kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-2GNXC446.js

@@ -0,0 +1,84 @@
+"use client";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-6VKWG5FJ.js";
+import {
+  AppIcon
+} from "./chunk-PS7Q6MMU.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/activity-filter-bar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ActivityFilterBar({
+  searchTerm,
+  onSearchTermChange,
+  statusFilter,
+  onStatusFilterChange,
+  statusOptions,
+  hasActiveFilters = false,
+  onClearFilters,
+  searchPlaceholder = "Search by txid, asset..."
+}) {
+  return (
+    // The row takes the status Select's height, and the search field stretches to
+    // match it, so the two read as one bar.
+    /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(
+          AppIcon,
+          {
+            name: "search",
+            size: "sm",
+            className: "absolute left-3 top-1/2 -translate-y-1/2 text-foreground/55 transition-colors group-focus-within:text-secondary-content"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            "data-testid": "activity-search",
+            placeholder: searchPlaceholder,
+            value: searchTerm,
+            onChange: (event) => onSearchTermChange(event.target.value),
+            className: "h-full 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-8 text-caption text-foreground shadow-inner outline-none transition-all placeholder:text-muted-foreground focus:bg-secondary/10 focus:ring-1 focus:ring-primary/50 focus:shadow-glow-primary-soft"
+          }
+        ),
+        searchTerm && /* @__PURE__ */ jsx(
+          GlyphButton,
+          {
+            icon: Close,
+            label: "Clear search",
+            size: "sm",
+            onClick: () => onSearchTermChange(""),
+            className: "absolute right-1.5 top-1/2 -translate-y-1/2"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: statusFilter,
+          onValueChange: (value) => onStatusFilterChange(value),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { hug: true, "aria-label": "Filter activity by status", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: statusOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ]
+        }
+      ) }),
+      hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx(GlyphButton, { icon: Close, label: "Clear filters", variant: "surface", size: "lg", className: "self-center", onClick: onClearFilters })
+    ] })
+  );
+}
+
+export {
+  ActivityFilterBar
+};

package/dist/web/chunk-2NCH2ZDU.js

@@ -0,0 +1,129 @@
+"use client";
+import {
+  StatusIconBadge
+} from "./chunk-CZPNI33A.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ArrowOutward,
+  Info,
+  SouthWest
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/transaction-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TransactionCard({
+  direction,
+  status,
+  displayAmount,
+  unit,
+  subAmount,
+  onSubAmountInfo,
+  timestamp,
+  onClick,
+  className
+}) {
+  const isInbound = direction === "inbound";
+  const formatDate = (ts) => new Date(ts * 1e3).toLocaleString([], { dateStyle: "short", timeStyle: "short" });
+  const statusStyle = {
+    success: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
+    completed: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
+    pending: { base: "bg-warning/10", hover: "hover:bg-warning/15" },
+    failed: { base: "bg-danger/10", hover: "hover:bg-danger/15" },
+    error: { base: "bg-danger/10", hover: "hover:bg-danger/15" }
+  }[status] ?? { base: "bg-card", hover: "hover:bg-accent" };
+  const iconStyle = {
+    success: "bg-primary/20 text-brand",
+    completed: "bg-primary/20 text-brand",
+    pending: "bg-warning/20 text-warning-fg",
+    failed: "bg-danger/20 text-danger-fg",
+    error: "bg-danger/20 text-danger-fg"
+  }[status] ?? "bg-secondary/15 text-secondary-content";
+  const textColor = {
+    success: "text-brand",
+    completed: "text-brand",
+    pending: "text-warning-fg",
+    failed: "text-danger-fg",
+    error: "text-danger-fg"
+  }[status] ?? "text-foreground";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl p-4 bg-gradient-card flex items-center justify-between transition-all duration-200 shadow-card-secondary relative overflow-hidden group",
+        statusStyle.base,
+        onClick && `cursor-pointer hover:shadow-card-secondary active:scale-[0.98] ${statusStyle.hover}`,
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 relative z-10", children: [
+          /* @__PURE__ */ jsx(
+            StatusIconBadge,
+            {
+              status,
+              icon: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
+                    iconStyle
+                  ),
+                  children: /* @__PURE__ */ jsx(IconGlyph, { glyph: isInbound ? SouthWest : ArrowOutward, className: "text-icon-xl" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-body tracking-wide text-foreground", children: isInbound ? "Received" : "Sent" }),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 text-tiny text-muted-foreground font-medium tracking-wide", children: formatDate(timestamp) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-right relative z-10", children: [
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: cn(
+                "font-bold text-subhead tracking-tight tabular-nums group-hover:opacity-90 transition-opacity",
+                textColor
+              ),
+              children: [
+                isInbound ? "+" : "-",
+                displayAmount,
+                unit ? ` ${unit}` : ""
+              ]
+            }
+          ),
+          subAmount && (onSubAmountInfo ? (
+            // The whole sub-line is the hit target; hover feedback is text
+            // color only (no background), per design.
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": "What is this value?",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSubAmountInfo();
+                },
+                className: "mt-0.5 flex w-full items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums transition-colors hover:text-foreground",
+                children: [
+                  subAmount,
+                  /* @__PURE__ */ jsx(IconGlyph, { glyph: Info, className: "text-icon-xs" })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsx("p", { className: "mt-0.5 flex items-center justify-end gap-1 text-tiny text-muted-foreground/70 font-medium tracking-wide tabular-nums", children: subAmount }))
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  TransactionCard
+};

package/dist/web/chunk-2OGYEUYV.js

@@ -0,0 +1,220 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-EK5N3ZPW.js";
+
+// src/web/components/charts/bar-chart.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MAX_BAR = 24;
+var GAP = 2;
+var RADIUS = 4;
+function barPath(x, y, w, h, end) {
+  const r = Math.min(RADIUS, w / 2, h / 2);
+  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
+  if (end === "top") {
+    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+  }
+  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
+}
+function BarChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  layout = "grouped",
+  orientation = "vertical",
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 240,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
+  const count = data.length;
+  if (count === 0 || series.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const stacked = layout === "stacked";
+  const horizontal = orientation === "horizontal";
+  const totals = data.map((d) => series.reduce((sum, s) => sum + Math.max(0, d.values[s.id] ?? 0), 0));
+  const max = stacked ? Math.max(0, ...totals) : Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const top = max > 0 ? max : 1;
+  const rowHeight = stacked ? 36 : Math.max(36, series.length * (MAX_BAR / 1.5 + GAP) + 16);
+  const svgHeight = horizontal ? count * rowHeight + 28 : height;
+  const categoryLabelWidth = horizontal ? Math.min(160, axisTextWidth(data.map((d) => d.label)) + 12) : 0;
+  const margin = horizontal ? { top: 4, right: 16, bottom: 24, left: categoryLabelWidth } : { top: 12, right: 12, bottom: 26, left: axisTextWidth(tickLabels) + 16 };
+  const plotLeft = margin.left;
+  const plotRight = width - margin.right;
+  const plotTop = margin.top;
+  const plotBottom = svgHeight - margin.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const bandSize = (horizontal ? plotHeight : plotWidth) / count;
+  const valueLength = horizontal ? plotWidth : plotHeight;
+  const scale = (value) => Math.max(0, value) / top * valueLength;
+  const groupCount = stacked ? 1 : series.length;
+  const barThickness = Math.max(2, Math.min(MAX_BAR, (bandSize * 0.7 - GAP * (groupCount - 1)) / groupCount));
+  const groupThickness = barThickness * groupCount + GAP * (groupCount - 1);
+  const rowsAt = (index) => series.map((s, slot) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: seriesColor(slotOf(s.id))
+  }));
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count, { vertical: horizontal }) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count, { vertical: horizontal });
+      return next === void 0 ? current : next;
+    });
+  };
+  const bars = data.map((d, index) => {
+    const bandStart = (horizontal ? plotTop : plotLeft) + index * bandSize;
+    const groupStart = bandStart + (bandSize - groupThickness) / 2;
+    const marks = [];
+    let stackBase = 0;
+    series.forEach((s, slot) => {
+      const value = Math.max(0, d.values[s.id] ?? 0);
+      if (value <= 0) return;
+      const length = scale(value);
+      const offset = stacked ? scale(stackBase) : 0;
+      stackBase += value;
+      const isLastInStack = !stacked || series.slice(slot + 1).every((next) => (d.values[next.id] ?? 0) <= 0);
+      const across = stacked ? groupStart : groupStart + slot * (barThickness + GAP);
+      const seam = stacked && offset > 0 ? GAP : 0;
+      const path = horizontal ? barPath(plotLeft + offset + seam, across, Math.max(0.5, length - seam), barThickness, isLastInStack ? "right" : "none") : barPath(across, plotBottom - offset - length, barThickness, Math.max(0.5, length - seam), isLastInStack ? "top" : "none");
+      marks.push(/* @__PURE__ */ jsx("path", { "data-series": s.id, d: path, fill: seriesColor(slotOf(s.id)) }, s.id));
+    });
+    return /* @__PURE__ */ jsxs("g", { "data-category": d.key, opacity: active !== null && active !== index ? 0.55 : 1, children: [
+      marks,
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: horizontal ? plotLeft : bandStart,
+          y: horizontal ? bandStart : plotTop,
+          width: horizontal ? plotWidth : bandSize,
+          height: horizontal ? bandSize : plotHeight,
+          fill: "transparent",
+          onPointerEnter: () => setActive(index)
+        }
+      )
+    ] }, d.key);
+  });
+  const labelIndices = horizontal ? data.map((_, index) => index) : chartLabelIndices(count, plotWidth / 56);
+  const activeDatum = active === null ? null : data[active];
+  const tooltipAnchor = active === null ? { x: 0, y: 0 } : horizontal ? { x: plotLeft + scale(stacked ? totals[active] : Math.max(...series.map((s) => data[active].values[s.id] ?? 0))), y: plotTop + active * bandSize } : { x: plotLeft + (active + 0.5) * bandSize, y: plotTop };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: allSeries.length > 1 ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
+          ...visibility.legend
+        }
+      ) : void 0,
+      table: {
+        columns: [
+          horizontal ? "Category" : "Period",
+          ...series.map((s) => s.label),
+          ...stacked && series.length > 1 ? ["Total"] : []
+        ],
+        rows: data.map((d, index) => [
+          d.detail ?? d.label,
+          ...series.map((s) => formatValue(d.values[s.id] ?? 0)),
+          ...stacked && series.length > 1 ? [formatValue(totals[index])] : []
+        ])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} categories. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          onPointerLeave: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs("svg", { width: "100%", height: svgHeight, viewBox: `0 0 ${width} ${svgHeight}`, className: "block overflow-visible", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-value-axis", children: ticks.map((tick, index) => {
+                const at = horizontal ? plotLeft + scale(tick) : plotBottom - scale(tick);
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  horizontal ? /* @__PURE__ */ jsx("line", { x1: at, x2: at, y1: plotTop, y2: plotBottom, stroke: "var(--border)" }) : /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: at, y2: at, stroke: "var(--border)" }),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: horizontal ? at : plotLeft - 8,
+                      y: horizontal ? plotBottom + 16 : at,
+                      dy: horizontal ? void 0 : "0.32em",
+                      textAnchor: horizontal ? index === ticks.length - 1 ? "end" : "middle" : "end",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      style: { fontVariantNumeric: "tabular-nums" },
+                      children: tickLabels[index]
+                    }
+                  )
+                ] }, tick);
+              }) }),
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-bars", children: bars }),
+              /* @__PURE__ */ jsx("g", { "data-slot": "chart-category-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: horizontal ? plotLeft - 8 : plotLeft + (index + 0.5) * bandSize,
+                  y: horizontal ? plotTop + (index + 0.5) * bandSize : plotBottom + 18,
+                  dy: horizontal ? "0.32em" : void 0,
+                  textAnchor: horizontal ? "end" : "middle",
+                  fontSize: TICK_FONT,
+                  fill: "var(--muted-foreground)",
+                  children: data[index].label
+                },
+                data[index].key
+              )) })
+            ] }),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: tooltipAnchor.x,
+                y: tooltipAnchor.y,
+                width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  BarChart
+};

package/dist/web/chunk-2Q5SSNFO.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/info-panel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClass = {
+  default: {
+    panel: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card",
+    icon: "text-secondary-content",
+    title: "text-foreground"
+  },
+  primary: {
+    panel: "bg-primary/10",
+    icon: "text-brand",
+    title: "text-brand"
+  },
+  info: {
+    panel: "bg-info/10 bg-gradient-card shadow-raised",
+    icon: "text-info-fg",
+    title: "text-info-fg"
+  },
+  warning: {
+    panel: "bg-warning/10",
+    icon: "text-warning-fg",
+    title: "text-warning-fg"
+  },
+  danger: {
+    panel: "bg-danger/10",
+    icon: "text-danger-fg",
+    title: "text-danger-fg"
+  },
+  success: {
+    panel: "bg-success/10",
+    icon: "text-success-fg",
+    title: "text-success-fg"
+  }
+};
+function InfoPanel({
+  tone = "info",
+  title,
+  icon = tone === "danger" ? "warning" : tone === "success" ? "check_circle" : "info",
+  children,
+  className
+}) {
+  const styles = toneClass[tone];
+  const renderedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("mt-0.5 shrink-0 text-icon-xl", styles.icon) }) : icon;
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl p-4", styles.panel, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    renderedIcon,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      title && /* @__PURE__ */ jsx("p", { className: cn("text-body font-bold", styles.title), children: title }),
+      /* @__PURE__ */ jsx("div", { className: cn("text-caption leading-relaxed", title ? "mt-1" : "", styles.title), children })
+    ] })
+  ] }) });
+}
+
+export {
+  InfoPanel
+};

package/dist/web/chunk-2REWXJEN.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  getFallbackAssetIconUrl,
+  useAssetIcon
+} from "./chunk-VLZMX43R.js";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/asset-icon.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ASSET_COLORS = {
+  BTC: "bg-transparent",
+  ETH: "bg-asset-eth",
+  USDT: "bg-asset-usdt",
+  USDC: "bg-asset-usdc"
+};
+var LOCAL_ICONS = {
+  BTC: protocolIcons.Bitcoin,
+  ARKADE: protocolIcons.Arkade,
+  RGB: protocolIcons.RGB20,
+  SPARK: protocolIcons.Spark,
+  LIQUID: protocolIcons.Liquid,
+  "L-BTC": protocolIcons.Liquid
+};
+function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
+  const normTicker = ticker.toUpperCase();
+  const localIcon = LOCAL_ICONS[normTicker];
+  const cdnUrl = useAssetIcon(ticker, cdnBaseUrl);
+  const fallbackUrl = getFallbackAssetIconUrl(ticker);
+  const [useFallback, setUseFallback] = useState(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(false);
+    setUseFallback(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  }, [logoUri, localIcon, cdnUrl, fallbackUrl]);
+  const iconUrl = logoUri ? logoUri : localIcon ? localIcon : failed ? null : useFallback || !cdnUrl ? fallbackUrl || null : cdnUrl || fallbackUrl || null;
+  const bgColor = ASSET_COLORS[normTicker] || "bg-secondary bg-gradient-violet";
+  if (iconUrl) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-full overflow-hidden flex items-center justify-center shadow-inner",
+          !localIcon && bgColor,
+          className
+        ),
+        style: { width: size, height: size },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: iconUrl,
+            alt: `${ticker} icon`,
+            width: size,
+            height: size,
+            className: cn("object-cover w-full h-full", normTicker === "SPARK" && localIcon && "kui-mono-icon"),
+            onError: () => {
+              if (logoUri) {
+                setFailed(false);
+                setUseFallback(!localIcon && !!fallbackUrl);
+                return;
+              }
+              if (localIcon) return;
+              if (!useFallback && fallbackUrl) {
+                setUseFallback(true);
+                return;
+              }
+              setFailed(true);
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex items-center justify-center font-bold shadow-inner",
+        bgColor,
+        ASSET_COLORS[normTicker] ? "text-foreground" : "text-secondary-foreground",
+        className
+      ),
+      style: { width: size, height: size, fontSize: size * 0.4 },
+      children: ticker.charAt(0).toUpperCase()
+    }
+  );
+}
+
+export {
+  AssetIcon
+};