@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

package/dist/modules/design_system/gallery/demos/cryptocurrency.js

@@ -0,0 +1,1708 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command } from "cmdk";
+import {
+  ArrowDown,
+  ArrowDownUp,
+  ArrowUpRight,
+  Bell,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Gift,
+  House,
+  Info,
+  LoaderCircle,
+  LogOut,
+  MessageSquare,
+  Moon,
+  Search,
+  Settings,
+  Share2,
+  ShieldCheck,
+  SlidersHorizontal,
+  Star,
+  X
+} from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Card } from "@open-mercato/ui/primitives/card";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import {
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuItem,
+  CommandMenuEmpty,
+  CommandMenuFooter
+} from "@open-mercato/ui/primitives/command-menu";
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@open-mercato/ui/primitives/dialog";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@open-mercato/ui/primitives/tabs";
+import { cryptoArtwork } from "../assets/cryptocurrency-artwork.js";
+const useCryptoLabels = () => {
+  const t = useT();
+  return (key, params) => t(`design_system.gallery.samples.crypto.${key}`, params);
+};
+const tokenFixtures = [
+  { symbol: "btc", name: "Bitcoin", price: 116236.51, change: 2.5, balance: 95e-4 },
+  { symbol: "eth", name: "Ethereum", price: 2348, change: 1.3, balance: 242.4 },
+  { symbol: "xrp", name: "XRP", price: 1.55, change: -0.2, balance: 510.82 },
+  { symbol: "usdt", name: "TetherUS", price: 1, change: 0, balance: 125.63 },
+  { symbol: "trx", name: "Tron", price: 123.08, change: -1.1, balance: 0 },
+  { symbol: "sol", name: "Solana", price: 765.12, change: -2.3, balance: 0 },
+  { symbol: "usdc", name: "USDC", price: 1, change: 0, balance: 100 },
+  { symbol: "bnb", name: "BNB", price: 456.18, change: -1.5, balance: 0 },
+  { symbol: "avax", name: "Avalanche", price: 789.7, change: -2, balance: 0 },
+  { symbol: "ada", name: "Cardano", price: 101.26, change: 0.4, balance: 0 },
+  { symbol: "hbar", name: "Hedera", price: 0.18, change: 0.1, balance: 0 },
+  { symbol: "dot", name: "Polkadot", price: 4.2, change: -0.4, balance: 0 }
+];
+const tokenBySymbol = (symbol) => tokenFixtures.find((token) => token.symbol === symbol) ?? tokenFixtures[0];
+const formatAmount = (amount, maximumFractionDigits = 2) => new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(amount);
+const money = (amount) => `$${new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount)}`;
+const greenButton = "rounded-full bg-status-success-solid text-status-success-solid-foreground hover:bg-status-success-solid/90";
+const pill = "rounded-full text-muted-foreground hover:bg-muted hover:text-foreground";
+const previewSurface = (state) => (state === "hover" || state === "active") && "bg-muted text-foreground";
+function CryptoGlyph({
+  name,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("inline-block size-4.5 shrink-0 bg-current", className),
+      style: {
+        maskImage: `url(${cryptoArtwork[name]})`,
+        WebkitMaskImage: `url(${cryptoArtwork[name]})`,
+        maskSize: "contain",
+        WebkitMaskSize: "contain",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskPosition: "center"
+      }
+    }
+  );
+}
+function TokenIcon({ symbol, className }) {
+  return /* @__PURE__ */ jsx("img", { src: cryptoArtwork[symbol], alt: "", className: cn("size-4 shrink-0 rounded-full", className) });
+}
+function CryptoPanel({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "gap-0 overflow-hidden rounded-2xl border-0 bg-background p-0 shadow-md ring-1 ring-inset ring-border",
+        className
+      ),
+      children
+    }
+  );
+}
+function CryptoNotice({ message }) {
+  return message ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-4 py-2 text-xs text-status-success-text", children: message }) : null;
+}
+function CryptoNavigationItem({
+  state = "default",
+  size = 28,
+  label,
+  onClick,
+  pressed
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [selected, setSelected] = React.useState(state === "active");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "2xs",
+      "aria-pressed": pressed ?? selected,
+      onClick: () => {
+        setSelected(!selected);
+        onClick?.();
+      },
+      className: cn(
+        pill,
+        "px-3 py-0.5 font-medium",
+        size === 24 ? "h-6 text-compact" : "h-7 text-sm",
+        previewSurface(state),
+        (pressed ?? selected) && "bg-muted text-foreground"
+      ),
+      children: label ?? cryptoLabel("overview")
+    }
+  );
+}
+function CryptoSegments({
+  type = "chart",
+  initialValue,
+  size = 24,
+  itemOnly = false,
+  state = "default"
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const values = type === "chart" ? ["1D", "1W", "1M", "3M", "1Y"] : ["compact", "detailed"];
+  const [value, setValue] = React.useState(initialValue ?? (itemOnly && state !== "active" ? "" : values[0]));
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "sm",
+      value,
+      onValueChange: setValue,
+      "aria-label": cryptoLabel(type === "chart" ? "chartRange" : "tableDensity"),
+      className: cn(
+        "border-0 bg-muted",
+        type === "chart" ? "h-6 p-0.75" : "p-0",
+        type === "table" && (size === 28 ? "h-7" : "h-6"),
+        itemOnly && "h-auto p-0"
+      ),
+      children: (itemOnly ? [values[0]] : values).map((option) => /* @__PURE__ */ jsx(
+        SegmentedControlItem,
+        {
+          value: option,
+          className: cn(
+            "px-0 text-xs leading-4 font-medium data-[state=checked]:font-medium",
+            type === "chart" ? "h-4.5 w-10" : size === 28 ? "h-7 w-20" : "h-6 w-20",
+            previewSurface(state)
+          ),
+          children: type === "chart" ? option : cryptoLabel(option)
+        },
+        option
+      ))
+    }
+  );
+}
+function CryptoTokenList({
+  onSelect,
+  favorites,
+  onFavorite,
+  showPrices = false,
+  query = "",
+  limit = 10
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const matches = tokenFixtures.slice(0, limit).filter((token) => `${token.name} ${token.symbol}`.toLowerCase().includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-auto p-2", "data-slot": "crypto-token-list", children: matches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-muted-foreground", children: cryptoLabel("noTokens") }) : matches.map((token) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-xl hover:bg-muted", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: () => onSelect?.(token.symbol),
+        className: "h-10 min-w-0 flex-1 justify-start gap-2 rounded-xl px-2 text-compact font-medium",
+        "aria-label": token.name,
+        children: [
+          /* @__PURE__ */ jsx(TokenIcon, { symbol: token.symbol, className: "size-4.5" }),
+          /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+            token.name,
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: `{${token.symbol.toUpperCase()}}` })
+          ] }),
+          showPrices && /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm", children: [
+              "$",
+              formatAmount(token.price)
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "text-xs",
+                  token.change < 0 ? "text-status-error-text" : token.change > 0 ? "text-status-success-text" : "text-muted-foreground"
+                ),
+                children: [
+                  token.change > 0 ? "+" : "",
+                  token.change,
+                  "%"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    onFavorite && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        className: "size-7 rounded-full p-1",
+        "aria-label": cryptoLabel(favorites?.includes(token.symbol) ? "removeFavorite" : "addFavorite", {
+          token: token.name
+        }),
+        "aria-pressed": favorites?.includes(token.symbol),
+        onClick: () => onFavorite(token.symbol),
+        children: /* @__PURE__ */ jsx(
+          Star,
+          {
+            className: cn(
+              "size-4",
+              favorites?.includes(token.symbol) ? "fill-status-warning-icon text-status-warning-icon" : "text-muted-foreground"
+            )
+          }
+        )
+      }
+    )
+  ] }, token.symbol)) });
+}
+function CryptoTokenPicker({
+  value = "btc",
+  onValueChange,
+  appearance = "lighter",
+  state = "default",
+  disabled
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [selection, setSelection] = React.useState(value);
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  React.useEffect(() => setSelection(value), [value]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        disabled,
+        "aria-label": cryptoLabel("selectToken"),
+        className: cn(
+          pill,
+          "h-7 gap-1 px-1.5 font-mono text-sm",
+          appearance === "stroke" ? "border border-border bg-background" : "bg-muted",
+          previewSurface(state)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TokenIcon, { symbol: selection }),
+          selection.toUpperCase(),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-70 min-w-0 overflow-hidden rounded-2xl", align: "end", children: [
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          "aria-label": cryptoLabel("searchTokens"),
+          placeholder: cryptoLabel("searchTokens"),
+          value: query,
+          onChange: setQuery,
+          className: "h-10 rounded-none border-0 border-b shadow-none",
+          inputClassName: "text-compact"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "max-h-68 overflow-auto", children: /* @__PURE__ */ jsx(
+        CryptoTokenList,
+        {
+          query,
+          onSelect: (token) => {
+            setSelection(token);
+            onValueChange?.(token);
+            setOpen(false);
+          },
+          limit: 12
+        }
+      ) })
+    ] })
+  ] });
+}
+function CryptoSearch({
+  state = "default",
+  inputOnly = false,
+  onSelect
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [query, setQuery] = React.useState(
+    state === "empty" ? "unlisted token" : state === "searching" || state === "active" ? "Ethereum" : ""
+  );
+  const [selected, setSelected] = React.useState("");
+  const [tab, setTab] = React.useState("tokens");
+  const searchTokens = query.toLowerCase().includes("ethereum") ? [
+    { ...tokenFixtures[1], name: "Ethereum" },
+    { ...tokenFixtures[1], name: "Arbitrum ETH", price: 123.08, change: -0.2 },
+    { ...tokenFixtures[1], name: "Optimistic ETH", price: 98.04, change: 0.9 },
+    { ...tokenFixtures[1], name: "Base ETH", price: 456.18, change: -2.3 }
+  ] : tokenFixtures.slice(0, 10);
+  return /* @__PURE__ */ jsxs(
+    CryptoPanel,
+    {
+      className: cn(
+        "w-120 max-w-full",
+        !inputOnly && (query ? "h-99" : "h-137"),
+        inputOnly && "rounded-none border-0 shadow-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Command,
+          {
+            shouldFilter: !query.toLowerCase().includes("ethereum"),
+            className: "flex min-h-0 flex-1 flex-col",
+            label: cryptoLabel("searchTokens"),
+            children: [
+              /* @__PURE__ */ jsx(
+                CommandMenuInput,
+                {
+                  value: query,
+                  onValueChange: setQuery,
+                  showShortcut: false,
+                  showClear: true,
+                  appearance: "source",
+                  placeholder: cryptoLabel("searchPairs"),
+                  "aria-label": cryptoLabel("searchPairs"),
+                  className: "text-compact",
+                  wrapperClassName: "h-12 shrink-0 px-4 py-3.5 [&>svg]:size-4.5 focus-within:[&>svg]:text-status-success-icon"
+                }
+              ),
+              !inputOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+                !query && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex h-9 shrink-0 items-center gap-5 border-b border-border px-5",
+                    role: "tablist",
+                    "aria-label": cryptoLabel("searchCategory"),
+                    children: ["tokens", "trade", "rewards"].map((option) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": tab === option,
+                        variant: "ghost",
+                        size: "2xs",
+                        onClick: () => setTab(option),
+                        className: cn(
+                          "h-10 rounded-none border-b px-0 font-mono text-xs uppercase",
+                          tab === option ? "border-status-success-icon text-foreground" : "border-transparent text-muted-foreground"
+                        ),
+                        children: cryptoLabel(option)
+                      },
+                      option
+                    ))
+                  }
+                ),
+                query && /* @__PURE__ */ jsx("div", { className: "flex h-9 shrink-0 items-end px-5 pb-1 font-mono text-overline text-muted-foreground", children: cryptoLabel("results") }),
+                /* @__PURE__ */ jsxs(CommandMenuList, { className: "min-h-0 max-h-none flex-1 p-2", children: [
+                  /* @__PURE__ */ jsxs(CommandMenuEmpty, { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex size-20 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx("img", { src: cryptoArtwork.sadFace, alt: "", className: "size-8" }) }),
+                    /* @__PURE__ */ jsx("strong", { className: "text-compact font-medium text-foreground", children: cryptoLabel("noTokens") }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs", children: cryptoLabel("tryAnotherSearch") })
+                  ] }),
+                  searchTokens.map((token) => /* @__PURE__ */ jsx(
+                    CommandMenuItem,
+                    {
+                      value: token.name,
+                      keywords: [token.symbol],
+                      onSelect: () => {
+                        setSelected(cryptoLabel("selectedToken", { token: token.name }));
+                        onSelect?.(token.symbol);
+                      },
+                      hideChevron: true,
+                      className: "h-10 gap-2 rounded-xl px-2 py-2 text-compact [&_[data-slot=command-menu-item-text]>div>span]:text-compact",
+                      leading: /* @__PURE__ */ jsx(TokenIcon, { symbol: token.symbol }),
+                      sublabel: `{${token.symbol.toUpperCase()}}`,
+                      shortcut: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm", children: [
+                          "$",
+                          formatAmount(token.price)
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "text-xs",
+                              token.change < 0 ? "text-status-error-text" : "text-status-success-text"
+                            ),
+                            children: [
+                              token.change > 0 ? "+" : "",
+                              token.change,
+                              "%"
+                            ]
+                          }
+                        )
+                      ] }),
+                      children: token.name
+                    },
+                    token.name
+                  ))
+                ] }),
+                /* @__PURE__ */ jsx(CommandMenuFooter, { className: "h-12 shrink-0 border-t border-border px-4 font-mono text-overline uppercase [&_kbd]:rounded-full" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CryptoNotice, { message: selected })
+      ]
+    }
+  );
+}
+function CryptoNavigationSearch({ state = "default" }) {
+  const cryptoLabel = useCryptoLabels();
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.target instanceof HTMLElement && event.target.isContentEditable) return;
+      if ((event.ctrlKey || event.metaKey) && event.key === "k" || event.key === "/" && !(event.target instanceof HTMLInputElement) && !(event.target instanceof HTMLTextAreaElement)) {
+        event.preventDefault();
+        setOpen(true);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setOpen(true),
+        className: cn(
+          "h-8 w-91 max-w-full justify-start gap-2 rounded-full bg-muted py-1.5 pl-2 pr-1.5 text-compact text-muted-foreground",
+          previewSurface(state)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+          cryptoLabel("searchPairs"),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto flex size-5 items-center justify-center rounded-full bg-background text-xs", children: "/" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-120 max-w-full border-0 bg-transparent p-0 shadow-none [&>button]:hidden", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: cryptoLabel("searchTokens") }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: cryptoLabel("chooseToken") }),
+      /* @__PURE__ */ jsx(CryptoSearch, { onSelect: () => setOpen(false) })
+    ] }) })
+  ] });
+}
+function CryptoSwapInput({
+  type = "selling",
+  state = "default",
+  value: controlledValue,
+  onValueChange,
+  token: controlledToken,
+  onTokenChange,
+  available = 95e-4
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [inputValue, setInputValue] = React.useState(
+    ["active", "filled", "error"].includes(state) ? type === "receive" ? "1050.64" : "0.0095" : ""
+  );
+  const [token, setToken] = React.useState(type === "receive" ? "usdc" : "btc");
+  const value = controlledValue ?? inputValue;
+  const activeToken = controlledToken ?? token;
+  const error = state === "error" || type !== "receive" && value !== "" && (!Number.isFinite(Number(value)) || Number(value) < 0 || Number(value) > available);
+  const tokenValue = tokenBySymbol(activeToken);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "crypto-swap-input",
+      className: "relative flex h-32 w-94 max-w-full gap-4 bg-background px-6 pt-6 pb-5",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "min-w-0 flex-1 border-b border-border pb-4 focus-within:border-status-success-icon",
+            error && "border-status-error-icon focus-within:border-status-error-icon",
+            state === "active" && "border-status-success-icon"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("label", { className: "min-w-0 flex-1 text-compact text-muted-foreground", children: [
+                cryptoLabel(type === "receive" ? "receiving" : "selling"),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    "aria-label": cryptoLabel(type === "receive" ? "receiving" : "selling"),
+                    type: "text",
+                    inputMode: "decimal",
+                    value,
+                    onChange: (event) => {
+                      setInputValue(event.target.value);
+                      onValueChange?.(event.target.value);
+                    },
+                    placeholder: "0",
+                    disabled: state === "disabled",
+                    "aria-invalid": error || void 0,
+                    className: "h-10 border-0 bg-transparent p-0 shadow-none hover:bg-transparent focus-within:shadow-none has-[input:disabled]:bg-transparent",
+                    inputClassName: cn("text-title-4 tracking-tight text-foreground", error && "text-status-error-text")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-4", children: [
+                /* @__PURE__ */ jsx(
+                  CryptoTokenPicker,
+                  {
+                    value: activeToken,
+                    onValueChange: (next) => {
+                      setToken(next);
+                      onTokenChange?.(next);
+                    },
+                    disabled: state === "disabled"
+                  }
+                ),
+                type !== "receive" && value && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "2xs",
+                    className: "h-4 gap-1 px-0 text-xs text-muted-foreground hover:bg-transparent",
+                    disabled: state === "disabled",
+                    onClick: () => {
+                      const next = String(available);
+                      setInputValue(next);
+                      onValueChange?.(next);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: cryptoLabel("available") }),
+                      /* @__PURE__ */ jsxs("span", { className: "underline", children: [
+                        available,
+                        " ",
+                        activeToken.toUpperCase()
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-muted-foreground", children: money(Number.isFinite(Number(value)) ? Number(value) * tokenValue.price : 0) })
+          ]
+        }
+      )
+    }
+  );
+}
+function CryptoSwap({ step = 1 }) {
+  const cryptoLabel = useCryptoLabels();
+  const [amount, setAmount] = React.useState(step === 1 ? "" : "0.0095");
+  const [sellingToken, setSellingToken] = React.useState("btc");
+  const [receivingToken, setReceivingToken] = React.useState("usdc");
+  const [phase, setPhase] = React.useState(
+    step === 1 ? "input" : step === 2 ? "quote" : "ready"
+  );
+  const [mode, setMode] = React.useState("swap");
+  const [slippage, setSlippage] = React.useState("0.5");
+  const selling = tokenBySymbol(sellingToken);
+  const receiving = tokenBySymbol(receivingToken);
+  const numericAmount = Number(amount);
+  const valid = amount.trim() !== "" && Number.isFinite(numericAmount) && numericAmount > 0 && numericAmount <= selling.balance && sellingToken !== receivingToken;
+  const quote = valid ? numericAmount * selling.price / receiving.price : 0;
+  const updateAmount = (next) => {
+    setAmount(next);
+    setPhase("input");
+  };
+  const submit = () => {
+    if (!valid) return;
+    setPhase(phase === "ready" ? "confirmed" : "ready");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-129 w-94 max-w-full flex-col bg-background",
+      "data-slot": "crypto-swap",
+      onKeyDown: (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          event.preventDefault();
+          submit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between gap-2 border-b border-border px-4", children: [
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              size: "sm",
+              value: mode,
+              onValueChange: setMode,
+              className: "h-6 border-0 bg-transparent p-0",
+              "aria-label": cryptoLabel("transactionMode"),
+              children: ["swap", "send", "buy"].map((option) => /* @__PURE__ */ jsx(
+                SegmentedControlItem,
+                {
+                  value: option,
+                  className: "h-6 px-3 text-compact data-[state=checked]:bg-muted data-[state=checked]:shadow-none",
+                  children: cryptoLabel(option)
+                },
+                option
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "2xs",
+                className: "size-7 rounded-full p-1",
+                "aria-label": cryptoLabel("swapSettings"),
+                children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-60 min-w-0 p-4", children: /* @__PURE__ */ jsxs("label", { className: "grid gap-2 text-sm", children: [
+              cryptoLabel("slippage"),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  min: "0",
+                  max: "5",
+                  step: "0.1",
+                  value: slippage,
+                  onChange: (event) => setSlippage(event.target.value)
+                }
+              )
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col ring-1 ring-inset ring-border", children: [
+          /* @__PURE__ */ jsx(
+            CryptoSwapInput,
+            {
+              value: amount,
+              onValueChange: updateAmount,
+              token: sellingToken,
+              onTokenChange: (token) => {
+                setSellingToken(token);
+                setAmount("");
+                setPhase("input");
+              },
+              available: selling.balance
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "2xs",
+              className: "absolute top-28 left-1/2 z-10 size-9 -translate-x-1/2 rounded-full border-4 border-background bg-muted p-1.5",
+              "aria-label": cryptoLabel("reverseTokens"),
+              onClick: () => {
+                setSellingToken(receivingToken);
+                setReceivingToken(sellingToken);
+                setAmount("");
+                setPhase("input");
+              },
+              children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CryptoSwapInput,
+            {
+              type: "receive",
+              value: phase === "ready" || phase === "confirmed" ? String(Number(quote.toFixed(receivingToken === "usdc" || receivingToken === "usdt" ? 2 : 6))) : "",
+              onValueChange: (next) => {
+                const input = Number(next) * receiving.price / selling.price;
+                updateAmount(Number.isFinite(input) ? String(input) : "");
+              },
+              token: receivingToken,
+              onTokenChange: (token) => {
+                setReceivingToken(token);
+                setPhase("input");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid min-h-44 flex-1 gap-3 border-t border-border px-6 py-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "grid gap-2 text-xs text-muted-foreground", children: ["transactionFee", "serviceFee", "executionDifference"].map((key, index) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: cryptoLabel(key) }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono", children: index === 0 ? `0 ${receivingToken.toUpperCase()}` : "0%" })
+            ] }, key)) }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                disabled: !valid || phase === "confirmed",
+                onClick: submit,
+                className: cn(
+                  "w-full rounded-full",
+                  phase === "ready" ? greenButton : "bg-muted text-foreground hover:bg-muted/70"
+                ),
+                children: [
+                  phase === "quote" && /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: "size-4 animate-spin text-status-success-icon" }),
+                  cryptoLabel(
+                    phase === "confirmed" ? "swapConfirmed" : phase === "ready" ? "confirmSwap" : phase === "quote" ? "finalizingQuote" : valid ? "getQuote" : "enterAmount"
+                  )
+                ]
+              }
+            ),
+            amount && !valid && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-status-error-text", children: cryptoLabel(sellingToken === receivingToken ? "differentTokens" : "invalidAmount") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "flex h-9 shrink-0 items-center justify-center px-6 text-center text-xs text-muted-foreground", children: cryptoLabel("localSimulation") })
+      ]
+    }
+  );
+}
+const filterValues = {
+  type: ["swap", "buy", "send"],
+  date: ["last24Hours", "last7Days", "lastMonth", "lastQuarter", "lastYear"],
+  status: ["success", "pending", "failed", "cancelled"],
+  token: tokenFixtures.slice(0, 7).map((token) => token.symbol)
+};
+function CryptoFilterOptions({
+  kind,
+  value,
+  onChange
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [query, setQuery] = React.useState("");
+  const options = filterValues[kind] ?? filterValues.type;
+  const shown = options.filter(
+    (option) => (kind === "token" ? tokenBySymbol(option).name : cryptoLabel(option)).toLowerCase().includes(query.toLowerCase())
+  );
+  const toggle = (option) => onChange(value.includes(option) ? value.filter((item) => item !== option) : [...value, option]);
+  const all = options.every((option) => value.includes(option));
+  return /* @__PURE__ */ jsxs("div", { className: cn(kind === "token" ? "w-93 max-w-full" : "w-42"), "data-slot": "crypto-filter-options", children: [
+    kind === "token" && /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        "aria-label": cryptoLabel("searchTokens"),
+        placeholder: cryptoLabel("searchTokens"),
+        value: query,
+        onChange: setQuery,
+        className: "h-10 rounded-none border-0 border-b shadow-none",
+        inputClassName: "text-compact"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: cn("overflow-auto p-1", kind === "token" ? "max-h-79.5" : "max-h-80 pb-1.5"), children: [
+      /* @__PURE__ */ jsxs("label", { className: "mx-1 flex h-8 cursor-pointer items-center gap-2 border-b border-border px-1 text-xs", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: all ? true : value.length ? "indeterminate" : false,
+            onCheckedChange: () => onChange(all ? [] : [...options]),
+            className: "size-3.5 rounded-sm data-[state=checked]:border-status-success-icon data-[state=checked]:bg-status-success-icon data-[state=indeterminate]:bg-status-success-icon data-[state=indeterminate]:border-status-success-icon"
+          }
+        ),
+        cryptoLabel(kind === "date" ? "allTime" : "selectAll"),
+        kind === "token" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "2xs",
+            className: "ml-auto h-6 px-1 text-xs text-muted-foreground",
+            onClick: (event) => {
+              event.preventDefault();
+              onChange([]);
+            },
+            children: cryptoLabel("clear")
+          }
+        )
+      ] }),
+      shown.map((option) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cn(
+            "flex cursor-pointer items-center gap-2 rounded-lg px-2 text-xs hover:bg-muted",
+            kind === "token" ? "h-10" : "h-7.5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: value.includes(option),
+                onCheckedChange: () => toggle(option),
+                className: "size-3.5 rounded-sm data-[state=checked]:border-status-success-icon data-[state=checked]:bg-status-success-icon"
+              }
+            ),
+            kind === "token" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(TokenIcon, { symbol: tokenBySymbol(option).symbol }),
+              tokenBySymbol(option).name,
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: `{${option.toUpperCase()}}` })
+            ] }) : cryptoLabel(option)
+          ]
+        },
+        option
+      )),
+      shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "p-4 text-xs text-muted-foreground", children: cryptoLabel("noTokens") })
+    ] })
+  ] });
+}
+function CryptoFilter({
+  kind = "type",
+  state = "default",
+  standalone = false
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [value, setValue] = React.useState(
+    state === "selected" ? [kind === "date" ? "last24Hours" : kind === "token" ? "eth" : kind === "status" ? "pending" : "swap"] : standalone ? [kind === "date" ? "lastMonth" : kind === "token" ? "usdt" : kind === "status" ? "failed" : "send"] : []
+  );
+  const [open, setOpen] = React.useState(false);
+  if (standalone)
+    return /* @__PURE__ */ jsx(CryptoPanel, { className: "w-fit max-w-full", children: /* @__PURE__ */ jsx(CryptoFilterOptions, { kind, value, onChange: setValue }) });
+  const selectedLabel = value.length === 0 ? cryptoLabel(kind === "date" ? "allTime" : "all") : value.length === 1 ? kind === "token" ? tokenBySymbol(value[0]).name : cryptoLabel(value[0]) : cryptoLabel("selectedCount", { count: value.length });
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        "aria-label": cryptoLabel("filterBy", { filter: cryptoLabel(kind) }),
+        className: "h-6 gap-0 overflow-hidden rounded-full border border-border p-0 text-xs",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-full items-center border-r border-border px-3 text-muted-foreground", children: cryptoLabel(kind) }),
+          /* @__PURE__ */ jsxs("span", { className: cn("flex h-full items-center gap-1 pr-2 pl-2.5", previewSurface(state)), children: [
+            kind === "token" && value.length === 1 && /* @__PURE__ */ jsx(TokenIcon, { symbol: tokenBySymbol(value[0]).symbol, className: "size-3.5" }),
+            kind === "status" && value.length === 1 && /* @__PURE__ */ jsx("img", { src: cryptoArtwork.statusPending, alt: "", className: "size-3" }),
+            selectedLabel,
+            /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4", open && "rotate-180") })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit min-w-0 rounded-xl", children: /* @__PURE__ */ jsx(CryptoFilterOptions, { kind, value, onChange: setValue }) })
+  ] });
+}
+function CryptoTableTabs({ kind = "transaction", state = "default" }) {
+  const cryptoLabel = useCryptoLabels();
+  const [value, setValue] = React.useState(state === "active" ? kind : "");
+  return /* @__PURE__ */ jsxs(Tabs, { variant: "underline", value, onValueChange: setValue, children: [
+    /* @__PURE__ */ jsx(TabsList, { className: "h-9 gap-6 border-0 p-0", children: [kind].map((option) => /* @__PURE__ */ jsx(
+      TabsTrigger,
+      {
+        value: option,
+        leading: /* @__PURE__ */ jsx(
+          CryptoGlyph,
+          {
+            name: option === "transaction" ? "history" : option === "open-orders" ? "clock" : "rewards"
+          }
+        ),
+        className: cn(
+          "h-9 gap-1.5 rounded-none border-b border-border px-0 pt-0 pb-4 text-sm hover:bg-transparent hover:text-foreground [&_[data-slot=tabs-trigger-leading]]:text-current [&_[data-slot=tabs-trigger-leading]]:group-hover:text-current data-[state=active]:border-status-success-icon data-[state=active]:text-foreground after:hidden",
+          previewSurface(state)
+        ),
+        children: cryptoLabel(option === "transaction" ? "transactions" : option === "open-orders" ? "openOrders" : "rewards")
+      },
+      option
+    )) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: kind, className: "sr-only", children: /* @__PURE__ */ jsx("p", { className: "sr-only", children: cryptoLabel("selectedTab") }) })
+  ] });
+}
+function CryptoTableButton({ kind = "explorer", state = "default" }) {
+  const cryptoLabel = useCryptoLabels();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        "aria-label": cryptoLabel(kind === "explorer" ? "explorer" : "transactionDetails"),
+        className: cn(pill, "size-7 p-1", previewSurface(state)),
+        children: /* @__PURE__ */ jsx(CryptoGlyph, { name: kind === "explorer" ? "link" : "more", className: "size-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 p-4", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: cryptoLabel("transactionDetails") }),
+      /* @__PURE__ */ jsxs("dl", { className: "mt-3 grid gap-2 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("dt", { children: cryptoLabel("type") }),
+          /* @__PURE__ */ jsx("dd", { children: cryptoLabel("swap") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("dt", { children: cryptoLabel("status") }),
+          /* @__PURE__ */ jsx("dd", { className: "text-status-success-text", children: cryptoLabel("success") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("dt", { children: cryptoLabel("transactionId") }),
+          /* @__PURE__ */ jsx("dd", { className: "font-mono", children: "0x7a4b\u2026c8f2" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: cryptoLabel("localSimulation") })
+    ] })
+  ] });
+}
+function CryptoSocialButton({
+  provider = "phantom",
+  onlyIcon = false,
+  state = "default",
+  onConnect
+}) {
+  const cryptoLabel = useCryptoLabels();
+  const [connected, setConnected] = React.useState(false);
+  const key = provider === "walletconnect" ? "walletconnect" : provider === "metamask" ? "metamask" : "phantom";
+  const name = key === "walletconnect" ? "WalletConnect" : key === "metamask" ? "MetaMask" : "Phantom";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      "aria-label": cryptoLabel(connected ? "connectedProvider" : "connectProvider", { provider: name }),
+      onClick: () => {
+        setConnected(true);
+        onConnect?.(name);
+      },
+      className: cn(
+        "max-w-full gap-3 rounded-full bg-muted text-sm text-foreground hover:bg-accent",
+        onlyIcon ? "w-30" : "w-94",
+        state === "hover" && "bg-accent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("img", { src: cryptoArtwork[key], alt: "", className: "size-5" }),
+        !onlyIcon && /* @__PURE__ */ jsx("span", { children: connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Check, { className: "mr-1 inline size-4" }),
+          cryptoLabel("connectedProvider", { provider: name })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            cryptoLabel("connect"),
+            " "
+          ] }),
+          name
+        ] }) })
+      ]
+    }
+  );
+}
+function CryptoConnectWallet({ onConnect }) {
+  const cryptoLabel = useCryptoLabels();
+  const [connected, setConnected] = React.useState("");
+  const [help, setHelp] = React.useState(false);
+  return /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-112 max-w-full rounded-4xl p-9 text-center", children: [
+    /* @__PURE__ */ jsx("img", { src: cryptoArtwork.brand, className: "mx-auto size-14 rounded-full border border-border p-3", alt: "" }),
+    /* @__PURE__ */ jsx("h3", { className: "mt-4 text-base font-medium", children: cryptoLabel(connected ? "walletConnected" : "connectWallet") }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: connected ? cryptoLabel("connectedProvider", { provider: connected }) : cryptoLabel("chooseWallet") }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6 grid gap-2", children: ["phantom", "walletconnect", "metamask"].map((provider) => /* @__PURE__ */ jsx(
+      CryptoSocialButton,
+      {
+        provider,
+        onConnect: (name) => {
+          setConnected(name);
+          onConnect?.(name);
+        }
+      },
+      provider
+    )) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        size: "2xs",
+        onClick: () => setHelp(!help),
+        className: "mt-5 h-6 text-status-success-text",
+        children: [
+          cryptoLabel("setUpWallet"),
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+        ]
+      }
+    ),
+    help && /* @__PURE__ */ jsx("p", { role: "status", className: "mt-2 text-xs text-muted-foreground", children: cryptoLabel("walletHelp") })
+  ] });
+}
+function CryptoFavorites() {
+  const cryptoLabel = useCryptoLabels();
+  const [favorites, setFavorites] = React.useState(["btc", "eth", "xrp", "usdt"]);
+  const [query, setQuery] = React.useState("");
+  const [selected, setSelected] = React.useState("");
+  return /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-93 max-w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b border-border px-4 text-compact", children: [
+      /* @__PURE__ */ jsx("span", { children: cryptoLabel("favoritesCount", { count: favorites.length }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "2xs",
+          onClick: () => setFavorites([]),
+          className: "px-0 text-compact text-muted-foreground",
+          children: cryptoLabel("clear")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        "aria-label": cryptoLabel("searchTokens"),
+        placeholder: cryptoLabel("searchTokens"),
+        value: query,
+        onChange: setQuery,
+        className: "h-11 rounded-none border-0 border-b px-4 shadow-none",
+        inputClassName: "text-compact"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "h-99 overflow-auto", children: /* @__PURE__ */ jsx(
+      CryptoTokenList,
+      {
+        query,
+        favorites,
+        onFavorite: (token) => setFavorites(favorites.includes(token) ? favorites.filter((item) => item !== token) : [...favorites, token]),
+        onSelect: (token) => setSelected(cryptoLabel("selectedToken", { token: tokenBySymbol(token).name }))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CryptoNotice, { message: selected })
+  ] });
+}
+function CryptoMenu({ profile = false }) {
+  const cryptoLabel = useCryptoLabels();
+  const [dark, setDark] = React.useState(false);
+  const [message, setMessage] = React.useState("");
+  const items = [
+    { key: profile ? "accountSettings" : "settings", Icon: Settings },
+    { key: "preferences", Icon: SlidersHorizontal },
+    { key: "helpCenter", Icon: MessageSquare },
+    { key: "community", Icon: Share2 }
+  ];
+  const divider = /* @__PURE__ */ jsx("div", { className: "flex h-1 items-center", children: /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" }) });
+  return /* @__PURE__ */ jsx("div", { className: dark ? "dark" : void 0, "data-slot": "crypto-menu-theme", children: /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-74 max-w-full gap-1 p-1.5", children: [
+    profile && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-3 p-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", src: cryptoArtwork.wei, size: 40 }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("strong", { className: "block text-sm font-medium", children: "Wei Chen" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "wei@example.com" })
+        ] })
+      ] }),
+      divider
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "flex h-9 cursor-pointer items-center gap-2 px-2.5 text-sm", children: [
+      /* @__PURE__ */ jsx(Moon, { className: "size-5 text-muted-foreground" }),
+      cryptoLabel("darkMode"),
+      /* @__PURE__ */ jsx(Switch, { checked: dark, onCheckedChange: setDark, className: "ml-auto" })
+    ] }),
+    divider,
+    items.map(({ key, Icon }, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      index === 3 && !profile && divider,
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-9 w-full justify-start rounded-xl px-2.5 text-sm font-normal",
+          onClick: () => setMessage(cryptoLabel("openedPanel", { panel: cryptoLabel(key) })),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-5 text-muted-foreground" }),
+            cryptoLabel(key),
+            key === "preferences" && /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-5" })
+          ]
+        }
+      )
+    ] }, key)),
+    profile && /* @__PURE__ */ jsxs(Fragment, { children: [
+      divider,
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-9 justify-start px-2.5 text-sm font-normal",
+          onClick: () => setMessage(cryptoLabel("signedOut")),
+          children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "size-5 text-status-error-icon" }),
+            cryptoLabel("signOut")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "flex h-8 items-center px-2.5 text-xs text-muted-foreground", children: cryptoLabel("demoTerms") }),
+    /* @__PURE__ */ jsx(CryptoNotice, { message })
+  ] }) });
+}
+function CryptoWallet() {
+  const cryptoLabel = useCryptoLabels();
+  const [copied, setCopied] = React.useState(false);
+  const [connected, setConnected] = React.useState(true);
+  const [verified, setVerified] = React.useState(false);
+  const [all, setAll] = React.useState(false);
+  const [action, setAction] = React.useState("");
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText("0x1cf2000000000000000000000000000000009a56");
+      setCopied(true);
+    } catch {
+      setAction(cryptoLabel("copyUnavailable"));
+    }
+  };
+  return /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-91 max-w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-18 items-center gap-3 border-b border-border px-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(CryptoGlyph, { name: "crown", className: "size-5 text-status-success-icon" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "0x1cf2\u20269a56" }),
+        /* @__PURE__ */ jsx("p", { className: cn("text-compact", connected ? "text-status-success-text" : "text-muted-foreground"), children: cryptoLabel(connected ? "connected" : "disconnected") })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "2xs",
+          onClick: copy,
+          className: "ml-auto h-6 rounded-full bg-muted text-xs",
+          children: [
+            /* @__PURE__ */ jsx(Copy, { className: "size-3" }),
+            cryptoLabel(copied ? "copied" : "copy")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid min-h-33 gap-4 border-b border-border p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: cryptoLabel("totalBalance") }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-medium tracking-tight", children: "$460,890.02" })
+        ] }),
+        /* @__PURE__ */ jsx(CryptoTokenPicker, { value: "eth", appearance: "stroke" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: ["swap", "buy", "send"].map((mode) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "2xs",
+          disabled: !connected,
+          className: "rounded-full bg-muted px-3 text-sm",
+          onClick: () => setAction(mode),
+          children: [
+            /* @__PURE__ */ jsx(ArrowDownUp, { className: "size-4 text-status-success-icon" }),
+            cryptoLabel(mode)
+          ]
+        },
+        mode
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-7.5 items-center justify-between px-2 text-xs uppercase text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: cryptoLabel("topAssets") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "2xs",
+            className: "px-0 font-mono text-xs text-status-success-text",
+            onClick: () => setAll(!all),
+            children: cryptoLabel(all ? "showLess" : "viewAll")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-1 items-center", children: /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" }) }),
+      tokenFixtures.slice(0, all ? 10 : 4).map((token) => /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center gap-2 rounded-xl px-2 hover:bg-muted", children: [
+        /* @__PURE__ */ jsx(TokenIcon, { symbol: token.symbol }),
+        /* @__PURE__ */ jsxs("span", { className: "text-compact", children: [
+          token.name,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: token.symbol.toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-xs", children: formatAmount(token.balance, 6) })
+      ] }, token.symbol))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-18 items-center gap-3 border-y border-border px-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: cryptoLabel("verify2FA") }),
+        /* @__PURE__ */ jsx("p", { className: "text-compact text-muted-foreground", children: cryptoLabel("securityHint") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "2xs",
+          className: "ml-auto rounded-full bg-status-success-bg px-4 text-status-success-text",
+          onClick: () => setVerified(!verified),
+          children: cryptoLabel(verified ? "verified" : "verify")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-2 p-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-9 justify-start text-sm font-normal",
+          onClick: () => setAction("settings"),
+          children: [
+            /* @__PURE__ */ jsx(Settings, { className: "size-4.5 text-muted-foreground" }),
+            cryptoLabel("walletSettings")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-9 justify-start text-sm font-normal",
+          onClick: () => setConnected(!connected),
+          children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "size-4.5 text-status-error-icon" }),
+            cryptoLabel(connected ? "disconnectWallet" : "connectWallet")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "px-4 pb-4 text-xs text-muted-foreground", children: cryptoLabel("demoTerms") }),
+    action && /* @__PURE__ */ jsx(
+      CryptoNotice,
+      {
+        message: ["swap", "buy", "send", "settings"].includes(action) ? cryptoLabel("openedPanel", { panel: cryptoLabel(action) }) : action
+      }
+    )
+  ] });
+}
+function CryptoNotifications() {
+  const cryptoLabel = useCryptoLabels();
+  const [read, setRead] = React.useState([]);
+  const [viewAll, setViewAll] = React.useState(false);
+  const rows = [
+    {
+      id: "security",
+      title: "notificationSecurity",
+      body: "notificationDevice",
+      time: "fiveMinutes",
+      Icon: Info,
+      tone: "text-status-error-icon"
+    },
+    {
+      id: "swap",
+      title: "notificationSwap",
+      body: "notificationSwapBody",
+      time: "now",
+      Icon: ArrowDownUp,
+      tone: "text-status-success-icon"
+    },
+    {
+      id: "reward",
+      title: "notificationRewards",
+      body: "notificationRewardsBody",
+      time: "oneHour",
+      Icon: Gift,
+      tone: "text-status-success-icon"
+    },
+    {
+      id: "login",
+      title: "notificationLogin",
+      body: "notificationDevice",
+      time: "tenMinutes",
+      Icon: ShieldCheck,
+      tone: "text-status-warning-icon"
+    },
+    {
+      id: "maintenance",
+      title: "notificationMaintenance",
+      body: "notificationMaintenanceBody",
+      time: "yesterday",
+      Icon: Settings,
+      tone: "text-badge-purple-solid"
+    }
+  ];
+  return /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-100 max-w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b border-border px-4 text-compact", children: [
+      /* @__PURE__ */ jsx("span", { children: cryptoLabel("notifications") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "2xs",
+          className: "px-0 text-xs text-status-success-text",
+          onClick: () => setRead(rows.map((row) => row.id)),
+          children: cryptoLabel("markAllRead")
+        }
+      )
+    ] }),
+    rows.map(({ id, title, body, time, Icon, tone }) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        className: cn(
+          "w-full items-start gap-3 rounded-none border-b border-border px-4 py-4 text-left font-normal",
+          !read.includes(id) && ["swap", "login"].includes(id) && "bg-muted",
+          ["security", "reward"].includes(id) ? "h-18" : "h-19"
+        ),
+        onClick: () => setRead([...read, id]),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("mt-0.5 size-4.5 shrink-0", tone) }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("strong", { className: "block whitespace-normal text-compact font-medium", children: cryptoLabel(title) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block whitespace-normal text-compact text-muted-foreground",
+                  !["security", "reward"].includes(id) && "mt-1"
+                ),
+                children: cryptoLabel(body)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+            cryptoLabel(time),
+            !read.includes(id) && ["swap", "login"].includes(id) && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-status-success-icon" })
+          ] })
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        className: "h-12 rounded-none text-compact",
+        onClick: () => setViewAll(!viewAll),
+        children: cryptoLabel("viewAllNotifications")
+      }
+    ),
+    viewAll && /* @__PURE__ */ jsx(CryptoNotice, { message: cryptoLabel("allNotificationsShown", { count: rows.length }) })
+  ] });
+}
+function CryptoWalletTrigger({ state = "default" }) {
+  const cryptoLabel = useCryptoLabels();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        className: cn(pill, "h-7 gap-1.5 pl-2.5 pr-1.75 text-sm", previewSurface(state)),
+        "aria-label": cryptoLabel("wallet"),
+        children: [
+          /* @__PURE__ */ jsx(CryptoGlyph, { name: "crown", className: "size-4 text-status-success-icon" }),
+          "0x1cf2\u20269a56",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-5" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit min-w-0 border-0 bg-transparent shadow-none", children: /* @__PURE__ */ jsx(CryptoWallet, {}) })
+  ] });
+}
+function CryptoAction({
+  kind = "favorite",
+  state = "default",
+  profile = false
+}) {
+  const cryptoLabel = useCryptoLabels();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        className: cn(pill, "relative size-7 p-1.25", previewSurface(state)),
+        "aria-label": cryptoLabel(
+          profile ? "profile" : kind === "favorite" ? "favorites" : kind === "notification" ? "notifications" : "menu"
+        ),
+        children: profile ? /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", src: cryptoArtwork.wei, size: 24 }) : kind === "notification" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Bell, { className: "size-4.5" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute top-1 right-1 size-1 rounded-full bg-status-warning-icon" })
+        ] }) : /* @__PURE__ */ jsx(CryptoGlyph, { name: kind === "favorite" ? "star" : "menu" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit min-w-0 border-0 bg-transparent shadow-none", align: "end", children: profile ? /* @__PURE__ */ jsx(CryptoMenu, { profile: true }) : kind === "favorite" ? /* @__PURE__ */ jsx(CryptoFavorites, {}) : kind === "notification" ? /* @__PURE__ */ jsx(CryptoNotifications, {}) : /* @__PURE__ */ jsx(CryptoMenu, {}) })
+  ] });
+}
+function CryptoNavigation({ profile = false, mobile = false }) {
+  const cryptoLabel = useCryptoLabels();
+  const [selected, setSelected] = React.useState("overview");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-16 items-center gap-3 border-y border-border bg-background",
+        mobile ? "w-97.5 max-w-full px-4" : "w-full min-w-0 flex-wrap px-4 lg:flex-nowrap lg:px-11"
+      ),
+      "data-slot": "crypto-navigation",
+      children: [
+        mobile && /* @__PURE__ */ jsx(CryptoAction, { kind: "hamburger" }),
+        /* @__PURE__ */ jsx("img", { src: cryptoArtwork.brand, className: "size-7 shrink-0", alt: cryptoLabel("cryptoBrand") }),
+        !mobile && /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-1 md:flex", children: ["overview", "markets", "trade", "rewards"].map((item) => /* @__PURE__ */ jsx(
+          CryptoNavigationItem,
+          {
+            state: selected === item ? "active" : "default",
+            pressed: selected === item,
+            label: cryptoLabel(item),
+            onClick: () => setSelected(item)
+          },
+          item
+        )) }),
+        !mobile && /* @__PURE__ */ jsx("div", { className: "mx-auto hidden min-w-0 lg:block", children: /* @__PURE__ */ jsx(CryptoNavigationSearch, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+          !mobile && /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(CryptoWalletTrigger, {}) }),
+          /* @__PURE__ */ jsx(CryptoAction, { kind: "favorite" }),
+          /* @__PURE__ */ jsx(CryptoAction, { kind: "notification" }),
+          mobile ? /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "2xs",
+                "aria-label": cryptoLabel("searchTokens"),
+                className: "size-7 rounded-full p-1",
+                children: /* @__PURE__ */ jsx(Search, { className: "size-4.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit min-w-0 border-0 bg-transparent shadow-none", align: "end", children: /* @__PURE__ */ jsx(CryptoSearch, {}) })
+          ] }) : /* @__PURE__ */ jsx(CryptoAction, { kind: "hamburger", profile }),
+          mobile && /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                "aria-label": cryptoLabel("wallet"),
+                className: "size-8 rounded-full bg-status-success-bg p-2",
+                children: /* @__PURE__ */ jsx(CryptoGlyph, { name: "crown", className: "size-4 text-status-success-icon" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit min-w-0 border-0 bg-transparent shadow-none", align: "end", children: /* @__PURE__ */ jsx(CryptoWallet, {}) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CryptoBanner() {
+  const cryptoLabel = useCryptoLabels();
+  const [visible, setVisible] = React.useState(true);
+  const [claimed, setClaimed] = React.useState(false);
+  return visible ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 w-full items-center justify-center gap-2 border-b border-border px-3 py-1 text-xs", children: [
+    /* @__PURE__ */ jsx(Gift, { className: "size-3.5 shrink-0 text-status-success-icon" }),
+    /* @__PURE__ */ jsx("span", { children: cryptoLabel(claimed ? "bonusClaimed" : "bonusOffer") }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        disabled: claimed,
+        className: "h-6 px-1 text-xs text-status-success-text",
+        onClick: () => setClaimed(true),
+        children: [
+          cryptoLabel("claimNow"),
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        className: "ml-auto size-6 p-1 text-muted-foreground",
+        "aria-label": cryptoLabel("dismissBanner"),
+        onClick: () => setVisible(false),
+        children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "2xs", onClick: () => setVisible(true), children: cryptoLabel("showBanner") });
+}
+function CryptoMobileBottom() {
+  const cryptoLabel = useCryptoLabels();
+  const [selected, setSelected] = React.useState("home");
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "w-97.5 max-w-full bg-background pt-9", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", className: cn(greenButton, "mb-4 w-full"), onClick: () => setOpen(true), children: cryptoLabel("swapSendBuy") }),
+    /* @__PURE__ */ jsx("div", { className: "grid h-16 grid-cols-4 border-t border-border", children: [
+      { key: "home", Icon: House },
+      { key: "markets", Icon: SlidersHorizontal },
+      { key: "trade", Icon: ArrowDownUp },
+      { key: "rewards", Icon: Gift }
+    ].map(({ key, Icon }) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        onClick: () => setSelected(key),
+        "aria-pressed": selected === key,
+        className: cn(
+          "h-16 flex-col gap-1 rounded-none border-t px-1 font-mono text-xs uppercase",
+          selected === key ? "border-status-success-icon text-status-success-text" : "border-transparent text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+          cryptoLabel(key)
+        ]
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-94 border-0 p-0 [&>button]:hidden", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: cryptoLabel("swapSendBuy") }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: cryptoLabel("localSimulation") }),
+      /* @__PURE__ */ jsx(CryptoSwap, {})
+    ] }) })
+  ] });
+}
+function CryptocurrencyDemo({
+  part,
+  state = "default",
+  kind,
+  size = 28,
+  onlyIcon = false,
+  profile = false,
+  step = 1
+}) {
+  const cryptoLabel = useCryptoLabels();
+  let content;
+  switch (part) {
+    case "status-icon": {
+      const key = kind === "pending" ? "statusPending" : kind === "warning" ? "statusWarning" : kind === "cancelled" ? "statusCancelled" : "statusSuccess";
+      content = /* @__PURE__ */ jsx("img", { src: cryptoArtwork[key], alt: cryptoLabel(kind ?? "success"), className: "size-3" });
+      break;
+    }
+    case "token-icon":
+      content = /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: cryptoArtwork[tokenBySymbol(kind ?? "btc").symbol],
+          alt: tokenBySymbol(kind ?? "btc").name,
+          className: "size-6 rounded-full"
+        }
+      );
+      break;
+    case "navigation-item":
+      content = /* @__PURE__ */ jsx(CryptoNavigationItem, { state, size });
+      break;
+    case "navigation-search":
+      content = /* @__PURE__ */ jsx(CryptoNavigationSearch, { state });
+      break;
+    case "navigation-wallet":
+      content = /* @__PURE__ */ jsx(CryptoWalletTrigger, { state });
+      break;
+    case "navigation-action":
+      content = /* @__PURE__ */ jsx(CryptoAction, { kind, state });
+      break;
+    case "chart-item":
+      content = /* @__PURE__ */ jsx(CryptoSegments, { itemOnly: true, state });
+      break;
+    case "swap-select":
+      content = /* @__PURE__ */ jsx(CryptoTokenPicker, { appearance: kind, state });
+      break;
+    case "chart-switch":
+      content = /* @__PURE__ */ jsx(CryptoSegments, { initialValue: kind });
+      break;
+    case "table-button":
+      content = /* @__PURE__ */ jsx(CryptoTableButton, { kind, state });
+      break;
+    case "table-switch-item":
+      content = /* @__PURE__ */ jsx(CryptoSegments, { type: "table", itemOnly: true, size: 24, state });
+      break;
+    case "table-tab":
+      content = /* @__PURE__ */ jsx(CryptoTableTabs, { kind, state });
+      break;
+    case "table-filter":
+      content = /* @__PURE__ */ jsx(CryptoFilter, { kind, state });
+      break;
+    case "table-switch":
+      content = /* @__PURE__ */ jsx(CryptoSegments, { type: "table", initialValue: kind, size });
+      break;
+    case "swap-input":
+      content = /* @__PURE__ */ jsx(CryptoSwapInput, { type: kind, state, available: state === "error" ? 0 : 95e-4 });
+      break;
+    case "swap":
+      content = /* @__PURE__ */ jsx(CryptoSwap, { step });
+      break;
+    case "search-modal":
+      content = /* @__PURE__ */ jsx(CryptoSearch, { state });
+      break;
+    case "search-input":
+      content = /* @__PURE__ */ jsx(CryptoSearch, { state, inputOnly: true });
+      break;
+    case "navigation":
+      content = /* @__PURE__ */ jsx(CryptoNavigation, { profile });
+      break;
+    case "social-button":
+      content = /* @__PURE__ */ jsx(CryptoSocialButton, { provider: kind, onlyIcon, state });
+      break;
+    case "menu-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoMenu, {});
+      break;
+    case "favorites-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoFavorites, {});
+      break;
+    case "profile-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoMenu, { profile: true });
+      break;
+    case "wallet-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoWallet, {});
+      break;
+    case "swap-token-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoStandaloneTokenList, {});
+      break;
+    case "notifications-dropdown":
+      content = /* @__PURE__ */ jsx(CryptoNotifications, {});
+      break;
+    case "connect-wallet":
+      content = /* @__PURE__ */ jsx(CryptoConnectWallet, {});
+      break;
+    case "banner":
+      content = /* @__PURE__ */ jsx(CryptoBanner, {});
+      break;
+    case "filter-type":
+    case "filter-date":
+    case "filter-status":
+    case "filter-token":
+      content = /* @__PURE__ */ jsx(CryptoFilter, { kind: part.slice(7), standalone: true });
+      break;
+    case "mobile-navigation":
+      content = /* @__PURE__ */ jsx(CryptoNavigation, { mobile: true });
+      break;
+    case "mobile-bottom-navigation":
+      content = /* @__PURE__ */ jsx(CryptoMobileBottom, {});
+      break;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "crypto-demo",
+      "data-crypto-part": part,
+      "data-preview-state": state,
+      className: cn("flex max-w-full text-foreground", part === "navigation" || part === "banner" ? "w-full" : "w-fit"),
+      children: content
+    }
+  );
+}
+function CryptoStandaloneTokenList() {
+  const cryptoLabel = useCryptoLabels();
+  const [query, setQuery] = React.useState("");
+  const [selected, setSelected] = React.useState("");
+  return /* @__PURE__ */ jsxs(CryptoPanel, { className: "w-70 max-w-full", children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        "aria-label": cryptoLabel("searchTokens"),
+        placeholder: cryptoLabel("searchTokens"),
+        value: query,
+        onChange: setQuery,
+        className: "h-10 rounded-none border-0 border-b shadow-none",
+        inputClassName: "text-compact"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "h-68.5 overflow-auto", children: /* @__PURE__ */ jsx(
+      CryptoTokenList,
+      {
+        query,
+        limit: 12,
+        onSelect: (token) => setSelected(cryptoLabel("selectedToken", { token: tokenBySymbol(token).name }))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CryptoNotice, { message: selected })
+  ] });
+}
+export {
+  CryptocurrencyDemo
+};
+//# sourceMappingURL=cryptocurrency.js.map