kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-WOAWUXER.js

@@ -0,0 +1,139 @@
+"use client";
+import {
+  Avatar
+} from "./chunk-W4E2N3UN.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/account-menu.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AccountMenuContext = React.createContext(() => {
+});
+var initialsOf = (name) => (name.trim()[0] ?? "?").toUpperCase();
+function AccountMenu({ name, secondary, label, avatar, header, children, className }) {
+  const [open, setOpen] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const panelId = React.useId();
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const close = React.useCallback(() => setOpen(false), []);
+  const avatarNode = (size) => avatar ?? /* @__PURE__ */ jsx(Avatar, { size, initials: initialsOf(name) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "account-menu",
+      className: cn("relative", className),
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (next && !rootRef.current?.contains(next)) setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            "aria-label": label,
+            onClick: () => setOpen((next) => !next),
+            className: "group flex items-center gap-2 rounded-xl p-1.5 text-foreground transition-colors duration-300 hover:bg-foreground/[0.06] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:pr-2",
+            children: [
+              avatarNode("sm"),
+              /* @__PURE__ */ jsxs("span", { className: "hidden min-w-0 flex-col text-left sm:flex", children: [
+                /* @__PURE__ */ jsx("span", { className: "max-w-[14rem] truncate text-caption font-medium", children: name }),
+                secondary && /* @__PURE__ */ jsx("span", { className: "max-w-[14rem] truncate text-mini text-muted-foreground", children: secondary })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "expand_more",
+                  className: cn(
+                    "hidden text-icon-md text-muted-foreground transition-transform motion-reduce:transition-none sm:block",
+                    open && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: panelId,
+            className: "absolute right-0 top-full z-50 mt-2 w-72 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl bg-popover text-popover-foreground shadow-popover animate-fade-in motion-reduce:animate-none",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-foreground/[0.03] p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                avatarNode("lg"),
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header ?? /* @__PURE__ */ jsx("div", { className: "truncate text-caption font-medium", children: name }) })
+              ] }) }),
+              /* @__PURE__ */ jsx(AccountMenuContext.Provider, { value: close, children: /* @__PURE__ */ jsx("div", { className: "py-1", children }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var AccountMenuItem = React.forwardRef(
+  ({ icon, destructive = false, asChild = false, className, children, onClick, ...props }, ref) => {
+    const close = React.useContext(AccountMenuContext);
+    const iconNode = icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0", destructive ? "text-danger-fg" : "text-brand"), children: icon });
+    const itemProps = {
+      className: cn(
+        "flex w-full items-center gap-3 px-4 py-3 text-left text-caption font-medium transition-colors focus-visible:bg-foreground/[0.06] focus-visible:outline-none",
+        destructive ? "text-danger-fg hover:bg-danger/10" : "text-foreground hover:bg-primary/10",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        close();
+      },
+      ...props
+    };
+    if (asChild && React.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(Slot, { ref, ...itemProps, children: React.cloneElement(children, void 0, /* @__PURE__ */ jsxs(Fragment, { children: [
+        iconNode,
+        children.props.children
+      ] })) });
+    }
+    return /* @__PURE__ */ jsxs("button", { ref, type: "button", ...itemProps, children: [
+      iconNode,
+      children
+    ] });
+  }
+);
+AccountMenuItem.displayName = "AccountMenuItem";
+function AccountMenuSeparator() {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: "my-1 border-t border-divider/40" });
+}
+
+export {
+  AccountMenu,
+  AccountMenuItem,
+  AccountMenuSeparator
+};

package/dist/web/chunk-WURSWAKE.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/withdraw-success.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function WithdrawSuccess({
+  displayAmount,
+  selectedAssetId,
+  selectedAsset,
+  txResult,
+  handleReset,
+  onDone,
+  locale
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-screen flex-col overflow-hidden bg-background bg-page-radial p-6 font-display text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-0 h-full w-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-secondary/40 to-transparent opacity-30" }),
+    /* @__PURE__ */ jsxs("div", { className: "z-10 flex flex-1 flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative mb-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-pulse rounded-full bg-secondary/30 blur-2xl" }),
+        /* @__PURE__ */ jsx("div", { className: "relative scale-110 rounded-full bg-primary bg-gradient-primary p-6 text-background shadow-glow-brand", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-6xl" }) })
+      ] }),
+      /* @__PURE__ */ jsx("h1", { className: "mb-2 text-headline font-bold text-gradient-brand", children: "Payment Sent!" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-muted-foreground", children: "Your transaction has been successfully processed." }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-12 w-full max-w-xs space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-5 shadow-card", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "Amount" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-title font-bold", children: [
+            formatAmount(displayAmount, { locale }),
+            " ",
+            selectedAssetId === "BTC" ? /* @__PURE__ */ jsx("span", { className: "text-body text-brand/70", children: "sats" }) : selectedAsset?.ticker ?? "units"
+          ] })
+        ] }),
+        (txResult?.paymentHash || txResult?.payment_hash) && /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+          /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-muted-foreground", eyebrow), children: "Payment Hash" }),
+          /* @__PURE__ */ jsx("p", { className: "break-all font-mono text-caption leading-relaxed text-muted-foreground", children: txResult.paymentHash ?? txResult.payment_hash })
+        ] }),
+        txResult?.txid && /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+          /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-muted-foreground", eyebrow), children: "Transaction ID" }),
+          /* @__PURE__ */ jsx("p", { className: "break-all font-mono text-caption leading-relaxed text-muted-foreground", children: txResult.txid })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "z-10 space-y-3 py-6", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          handleReset();
+          onDone();
+        },
+        className: "w-full rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card py-4 text-subhead font-bold text-foreground shadow-card transition-all hover-gradient-violet hover:shadow-card-hover active:scale-[0.98]",
+        children: "Back to Dashboard"
+      }
+    ) })
+  ] });
+}
+
+export {
+  WithdrawSuccess
+};

package/dist/web/chunk-WWF7IJBF.js

@@ -0,0 +1,330 @@
+"use client";
+import {
+  DotPagination
+} from "./chunk-6PNGSAJB.js";
+import {
+  AssetIcon
+} from "./chunk-2REWXJEN.js";
+import {
+  BottomSheet
+} from "./chunk-JYM5NHBA.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon
+} from "./chunk-LYCLVP26.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Add,
+  ArrowBack,
+  ArrowForward,
+  ExpandLess,
+  ExpandMore,
+  Search,
+  SwapCalls
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/deposit-asset-selection.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset",
+  LIQUID: "L-BTC or Liquid asset"
+};
+var PROTOCOL_BADGE = {
+  RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-fg" },
+  SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-fg" },
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-fg" },
+  LIQUID: { label: "Liquid", className: "bg-network-liquid-chip text-network-liquid-fg" }
+};
+function formatAssetBalance(asset) {
+  const raw = asset.balance ?? 0;
+  if (raw === 0) return "0";
+  const precision = asset.precision ?? 0;
+  const value = raw / Math.pow(10, precision);
+  return value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.min(precision, 8)
+  });
+}
+function DepositAssetSelection({
+  setCurrentView,
+  isNewAsset,
+  newAssetAccount,
+  newAssetId,
+  setNewAssetId,
+  searchQuery,
+  setSearchQuery,
+  filteredAssets,
+  onSelectAsset,
+  handleAddNewAsset,
+  handleContinueToGenerate,
+  isRgbConnected,
+  isSparkConnected,
+  isArkadeConnected,
+  isLiquidConnected = false
+}) {
+  const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
+  const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
+  const ownedAssetsCount = ownedAssets.length;
+  const noResults = filteredAssets.length === 0 && !!searchQuery;
+  const isSearching = !!searchQuery;
+  const [assetsExpanded, setAssetsExpanded] = useState(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState(false);
+  useEffect(() => {
+    if (isSearching) setAssetsExpanded(true);
+  }, [isSearching]);
+  const showOwnedAssets = isSearching ? true : assetsExpanded;
+  const newAssetOptions = [
+    {
+      account: "RGB",
+      title: "New RGB Asset",
+      ticker: "RGB",
+      enabled: isRgbConnected,
+      idleClass: "bg-primary/10 hover:bg-primary/20",
+      activeClass: "bg-primary/25",
+      titleHoverClass: "group-hover:text-brand"
+    },
+    {
+      account: "SPARK",
+      title: "New Spark Asset",
+      ticker: "SPARK",
+      enabled: isSparkConnected,
+      idleClass: "bg-info/10 hover:bg-info/20",
+      activeClass: "bg-info/25",
+      titleHoverClass: "group-hover:text-info-fg"
+    },
+    {
+      account: "ARKADE",
+      title: "New Arkade Asset",
+      ticker: "ARKADE",
+      enabled: isArkadeConnected,
+      idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
+      activeClass: "bg-network-arkade/25",
+      titleHoverClass: "group-hover:text-network-arkade-fg"
+    },
+    {
+      account: "LIQUID",
+      title: "New Liquid Asset",
+      ticker: "LIQUID",
+      enabled: isLiquidConnected,
+      idleClass: "bg-network-liquid/10 hover:bg-network-liquid/20",
+      activeClass: "bg-network-liquid/25",
+      titleHoverClass: "group-hover:text-network-liquid-fg"
+    }
+  ].filter((option) => option.enabled);
+  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: () => setCurrentView("dashboard") }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ jsx(
+      DotPagination,
+      {
+        count: 2,
+        index: 0,
+        ariaLabel: "Deposit step 1 of 2: select asset"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        IconGlyph,
+        {
+          glyph: Search,
+          size: "sm",
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-secondary-content"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          "data-testid": "deposit-asset-search",
+          className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 py-2.5 pl-10 pr-4 text-caption text-foreground shadow-inner outline-none transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:bg-foreground/8 focus:shadow-glow-primary-soft",
+          onChange: (event) => setSearchQuery(event.target.value),
+          placeholder: "Search assets...",
+          type: "text",
+          value: searchQuery
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "space-y-1.5 px-5 pb-3", children: [
+      btcAsset && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-asset-btc",
+          className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+          onClick: () => onSelectAsset(btcAsset),
+          children: [
+            /* @__PURE__ */ jsx(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: "Bitcoin" }),
+              /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-caption text-foreground/55", children: "Choose destination account next" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
+              /* @__PURE__ */ jsx(NetworkBadge, { network: "L1", size: "sm" }),
+              /* @__PURE__ */ jsx(NetworkBadge, { network: "LN", size: "sm" }),
+              isSparkConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Spark", size: "sm" }),
+              isArkadeConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Arkade", size: "sm" }),
+              isLiquidConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Liquid", size: "sm" })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-md text-foreground/20 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ),
+      noResults ? /* @__PURE__ */ jsxs("div", { className: "py-8 text-center text-caption text-foreground/55", children: [
+        'No assets match "',
+        searchQuery,
+        '"'
+      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": "deposit-toggle-owned-assets",
+            onClick: () => !isSearching && setAssetsExpanded((value) => !value),
+            disabled: isSearching,
+            className: cn(
+              "flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 transition-all",
+              showOwnedAssets ? "bg-gradient-active ring-1 ring-inset ring-primary/40" : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-raised hover-gradient-violet",
+              isSearching && "cursor-default"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: "Your assets" }),
+              /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-secondary bg-gradient-violet text-tiny font-bold text-white shadow-button-violet", children: ownedAssetsCount }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              !isSearching && /* @__PURE__ */ jsx(IconGlyph, { glyph: showOwnedAssets ? ExpandLess : ExpandMore, size: "md", className: "text-secondary-content" })
+            ]
+          }
+        ),
+        showOwnedAssets && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
+          const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
+          const balance = asset.balance ?? 0;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-testid": `deposit-asset-${asset.asset_id}`,
+              className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+              onClick: () => onSelectAsset(asset),
+              children: [
+                /* @__PURE__ */ jsx(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: asset.ticker }),
+                    protocolBadge && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "shrink-0 rounded-full px-1.5 py-0.5",
+                          eyebrow,
+                          protocolBadge.className
+                        ),
+                        children: protocolBadge.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-caption text-foreground/55", children: asset.name ?? "Asset" })
+                ] }),
+                balance > 0 && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-right", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-caption font-bold tabular-nums text-foreground", children: formatAssetBalance(asset) }),
+                  /* @__PURE__ */ jsx("div", { className: cn("mt-0.5 text-foreground/55", eyebrow), children: asset.ticker })
+                ] }),
+                /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-sm text-foreground/20 transition-colors group-hover:text-secondary-content" })
+              ]
+            },
+            asset.asset_id
+          );
+        }) })
+      ] }) : null,
+      !searchQuery && /* @__PURE__ */ jsx("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setCurrentView("bridge"),
+          className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-secondary/20 to-primary/10 p-3 shadow-card transition-all duration-200 hover:from-secondary/30 hover:to-primary/15 hover:shadow-card-hover",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary bg-gradient-violet text-white shadow-button-violet", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapCalls, className: "text-icon-lg" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Bridge from another chain" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xxs leading-tight text-foreground/55", children: "USDC, USDT, ETH, SOL via Flashnet" })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ) }),
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, size: "md" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Add an asset" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xxs leading-tight text-foreground/55", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
+            className: cn(
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left shadow-raised transition-all hover:shadow-card-hover",
+              option.idleClass
+            ),
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              option.account === "LIQUID" ? /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ jsx(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: cn("text-body font-bold tracking-wide text-foreground", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xxs text-foreground/55", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, size: "sm", className: "text-foreground/55 transition-colors group-hover:text-foreground/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    )
+  ] });
+}
+
+export {
+  DepositAssetSelection
+};

package/dist/web/chunk-X2RA4EG3.js

@@ -0,0 +1,86 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/withdraw-route-selector.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RouteChoiceCard({
+  route,
+  selected,
+  recommended,
+  onClick,
+  displayOnly
+}) {
+  const { disabled = false, disabledReason, accountIcon, balanceLabel, accentClassName } = route;
+  const body = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+      accountIcon && /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body font-bold text-foreground", children: route.accountTitle }),
+          recommended && !disabled && /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-primary/15 px-2 py-0.5 text-brand", eyebrow), children: "Recommended" }),
+          disabled && /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-danger/10 px-2 py-0.5 text-danger-fg", eyebrow), children: "Insufficient" })
+        ] }),
+        balanceLabel && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption tabular-nums text-foreground/55", children: balanceLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-foreground/55", eyebrow), children: route.feeHint })
+  ] });
+  if (displayOnly) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3.5 shadow-card-secondary", children: body });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": `withdraw-route-${route.account.toLowerCase()}`,
+      onClick,
+      disabled,
+      "aria-disabled": disabled,
+      title: disabled ? disabledReason : void 0,
+      className: cn(
+        "w-full rounded-2xl p-4 text-left transition-all duration-200",
+        disabled ? "cursor-not-allowed bg-danger/5 opacity-60" : selected ? cn(
+          "bg-gradient-active shadow-glow-primary-faint ring-1 ring-inset ring-primary/40",
+          accentClassName ?? "bg-secondary/10"
+        ) : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary hover-gradient-violet hover:shadow-card-hover-soft"
+      ),
+      children: [
+        body,
+        disabled && disabledReason && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xxs leading-relaxed text-danger-fg/80", children: disabledReason })
+      ]
+    }
+  );
+}
+function WithdrawRouteSelector({
+  routes,
+  activeRouteAccount,
+  recommendedRouteAccount,
+  onRouteChange
+}) {
+  const isDisplayOnly = routes.length === 1 && !routes[0].disabled;
+  const headingId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("p", { id: headingId, className: cn("mb-1 ml-1 block leading-none", eyebrow, "text-secondary-content"), children: "Route" }),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": headingId, className: "space-y-2", children: routes.map((route) => /* @__PURE__ */ jsx(
+      RouteChoiceCard,
+      {
+        route,
+        selected: activeRouteAccount === route.account,
+        recommended: recommendedRouteAccount === route.account,
+        onClick: () => onRouteChange(route.account),
+        displayOnly: isDisplayOnly
+      },
+      route.account
+    )) })
+  ] });
+}
+
+export {
+  WithdrawRouteSelector
+};

package/dist/web/chunk-XCQGJYGF.js

@@ -0,0 +1,42 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/floating-notice.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FloatingNotice({
+  children,
+  onDismiss,
+  dismissible = true,
+  dismissLabel = "Dismiss",
+  role = "status",
+  className
+}) {
+  const showClose = dismissible && Boolean(onDismiss);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "floating-notice",
+      role,
+      className: cn(
+        "fixed bottom-4 left-1/2 z-[var(--z-modal)] w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-2xl bg-card bg-gradient-card-hero shadow-toast",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(GlyphButton, { icon: Close, label: dismissLabel, size: "sm", onClick: onDismiss, className: "absolute right-2 top-2" })
+      ] })
+    }
+  );
+}
+
+export {
+  FloatingNotice
+};