kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-UK6ZL4MX.js

@@ -0,0 +1,375 @@
+"use client";
+import {
+  ChartDataTable,
+  ChartHeader,
+  ChartLegend,
+  ChartLegendRow,
+  ChartTooltip,
+  tooltipText,
+  useSeriesVisibility
+} from "./chunk-EK5N3ZPW.js";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/trend-chart.tsx
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toneFill = {
+  // The charts' green, so every chart draws the same one.
+  primary: "var(--series-1)",
+  danger: "var(--destructive)",
+  info: "var(--chart-4)",
+  warning: "var(--chart-2)",
+  muted: "var(--muted-foreground)"
+};
+var defaultFormat = (value) => formatAmount(value);
+var MARGIN = { top: 8, right: 8, bottom: 24, left: 8 };
+var TICK_FONT = 11;
+var X_LABEL_SPACING = 64;
+var FALLBACK_WIDTH = 640;
+var MAX_BAR_WIDTH = 40;
+function trendChartTicks(max) {
+  if (!Number.isFinite(max) || max <= 0) return [0];
+  const rough = max / 4;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 5, 10].map((m) => m * magnitude).find((s) => s >= rough) ?? 10 * magnitude;
+  const wholeStep = Math.max(1, Math.round(step));
+  const ticks = [0];
+  for (let value = wholeStep; value < max - max * 0.15; value += wholeStep) ticks.push(value);
+  ticks.push(max);
+  return ticks;
+}
+function trendChartLabelIndices(count, maxLabels) {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+  const slots = Math.max(2, Math.min(count, Math.floor(maxLabels)));
+  const indices = /* @__PURE__ */ new Set();
+  for (let slot = 0; slot < slots; slot += 1) {
+    indices.add(Math.round(slot * (count - 1) / (slots - 1)));
+  }
+  return [...indices].sort((a, b) => a - b);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(FALLBACK_WIDTH);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measured = Math.round(element.getBoundingClientRect().width);
+    if (measured > 0) setWidth(measured);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      const next = Math.round(entry.contentRect.width);
+      if (next > 0) setWidth(next);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function TrendChart({
+  points,
+  series: allSeries,
+  scaleLabel,
+  label,
+  empty,
+  formatValue = defaultFormat,
+  height = 220,
+  view: controlledView,
+  onViewChange,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useElementWidth();
+  const [active, setActive] = useState(null);
+  const [ownView, setOwnView] = useState("chart");
+  const view = controlledView ?? ownView;
+  const setView = (next) => {
+    if (controlledView === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
+  const styledSeries = allSeries.map((s, index) => ({ ...s, texture: s.texture ?? (index === 0 ? "solid" : "hatch") }));
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = styledSeries.filter((s) => visibility.isVisible(s.id));
+  const idBase = `trend-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const count = points.length;
+  const moveActive = useCallback(
+    (event) => {
+      if (count === 0) return;
+      const current = active ?? -1;
+      let next;
+      switch (event.key) {
+        case "ArrowRight":
+          next = Math.min(count - 1, current + 1);
+          break;
+        case "ArrowLeft":
+          next = current < 0 ? count - 1 : Math.max(0, current - 1);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = count - 1;
+          break;
+        case "Escape":
+          next = null;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      setActive(next);
+    },
+    [active, count]
+  );
+  if (count === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const textures = series.map((s) => s.texture);
+  const totals = points.map(
+    (point) => series.reduce((sum, s) => sum + Math.max(0, point.values[s.id] ?? 0), 0)
+  );
+  const max = Math.max(0, ...totals);
+  const ticks = trendChartTicks(max);
+  const tickLabels = ticks.map(formatValue);
+  const axisWidth = Math.max(...tickLabels.map((t) => t.length)) * TICK_FONT * 0.62 + 8;
+  const plotLeft = MARGIN.left + axisWidth;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const domainTop = max > 0 ? max : 1;
+  const y = (value) => plotBottom - value / domainTop * plotHeight;
+  const band = plotWidth / count;
+  const barWidth = band >= 4 ? Math.min(band * 0.72, MAX_BAR_WIDTH) : Math.max(1, band - 0.75);
+  const barOffset = (band - barWidth) / 2;
+  const labelIndices = trendChartLabelIndices(count, plotWidth / X_LABEL_SPACING);
+  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : toneFill[series[index].tone];
+  const activePoint = active === null ? null : points[active];
+  const readoutId = `${idBase}-readout`;
+  const activeRows = activePoint ? series.map((s) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(activePoint.values[s.id] ?? 0),
+    color: toneFill[s.tone]
+  })) : [];
+  const activeTitle = activePoint ? activePoint.detail ?? activePoint.label : "";
+  const containerWidth = containerRef.current?.clientWidth ?? width;
+  const toContainer = width > 0 ? containerWidth / width : 1;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "data-slot": "trend-chart",
+      "aria-label": label,
+      className: cn("m-0 min-w-0 space-y-2", className),
+      children: [
+        /* @__PURE__ */ jsx(ChartHeader, { ...head, view, onViewChange: setView }),
+        view === "table" && /* @__PURE__ */ jsx(
+          ChartDataTable,
+          {
+            label,
+            table: {
+              columns: ["Period", ...series.map((s) => s.label), "Total"],
+              rows: points.map((point, index) => [
+                point.detail ?? point.label,
+                ...series.map((s) => formatValue(point.values[s.id] ?? 0)),
+                formatValue(totals[index])
+              ])
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { id: readoutId, "data-slot": "trend-chart-readout", "aria-live": "polite", className: "sr-only", children: activePoint ? tooltipText(activeTitle, activeRows) : "" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            hidden: view === "table",
+            role: "group",
+            "aria-roledescription": "chart",
+            tabIndex: 0,
+            "aria-describedby": readoutId,
+            "aria-keyshortcuts": "ArrowLeft ArrowRight Home End Escape",
+            "aria-label": `${label}: ${count} periods. Arrow keys move between them.`,
+            onKeyDown: moveActive,
+            onBlur: () => setActive(null),
+            className: "relative mt-5 w-full min-w-0 rounded-xl outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "100%",
+                  height,
+                  viewBox: `0 0 ${width} ${height}`,
+                  preserveAspectRatio: "none",
+                  className: "block overflow-visible",
+                  onPointerLeave: () => setActive(null),
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("defs", { children: series.map(
+                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ jsx(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : null
+                    ) }),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                      /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: plotLeft,
+                          x2: plotRight,
+                          y1: y(tick),
+                          y2: y(tick),
+                          stroke: "var(--border)",
+                          strokeDasharray: tick === 0 ? void 0 : "2 3"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: plotLeft - 6,
+                          y: y(tick),
+                          dy: "0.32em",
+                          textAnchor: "end",
+                          fontSize: TICK_FONT,
+                          fill: "var(--muted-foreground)",
+                          style: { fontVariantNumeric: "tabular-nums" },
+                          children: tickLabels[index]
+                        }
+                      )
+                    ] }, tick)) }),
+                    active !== null && /* @__PURE__ */ jsx(
+                      "rect",
+                      {
+                        "data-slot": "trend-chart-active",
+                        x: plotLeft + active * band,
+                        y: plotTop,
+                        width: band,
+                        height: plotHeight,
+                        fill: "var(--chart-4)",
+                        opacity: 0.14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-bars", children: points.map((point, pointIndex) => {
+                      let base = 0;
+                      return /* @__PURE__ */ jsxs("g", { "data-period": point.key, children: [
+                        series.map((s, seriesIndex) => {
+                          const value = point.values[s.id] ?? 0;
+                          if (value <= 0) return null;
+                          const top = y(base + value);
+                          const bottom = y(base);
+                          base += value;
+                          const hatched = textures[seriesIndex] === "hatch";
+                          return /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              "data-series": s.id,
+                              x: plotLeft + pointIndex * band + barOffset,
+                              y: top,
+                              width: barWidth,
+                              height: Math.max(0.5, bottom - top - (seriesIndex > 0 ? 1 : 0)),
+                              fill: fillFor(seriesIndex),
+                              stroke: hatched ? toneFill[s.tone] : void 0,
+                              strokeWidth: hatched && barWidth >= 4 ? 1 : 0
+                            },
+                            s.id
+                          );
+                        }),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: plotLeft + pointIndex * band,
+                            y: plotTop,
+                            width: band,
+                            height: plotHeight,
+                            fill: "transparent",
+                            onPointerEnter: () => setActive(pointIndex)
+                          }
+                        )
+                      ] }, point.key);
+                    }) }),
+                    /* @__PURE__ */ jsx("g", { "data-slot": "trend-chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft + index * band + band / 2,
+                        y: plotBottom + 16,
+                        textAnchor: index === 0 && count > 1 ? "start" : index === count - 1 && count > 1 ? "end" : "middle",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        children: points[index].label
+                      },
+                      points[index].key
+                    )) })
+                  ]
+                }
+              ),
+              activePoint && /* @__PURE__ */ jsx(
+                ChartTooltip,
+                {
+                  title: activeTitle,
+                  rows: activeRows,
+                  swatch: "rect",
+                  x: (plotLeft + active * band + band / 2) * toContainer,
+                  y: plotTop,
+                  width: containerWidth
+                }
+              )
+            ]
+          }
+        ),
+        view === "chart" && /* @__PURE__ */ jsx(ChartLegendRow, { children: /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: styledSeries.map((s, index) => ({
+              id: s.id,
+              label: s.label,
+              color: toneFill[s.tone],
+              swatch: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+                /* @__PURE__ */ jsx(Texture, { id: `${idBase}-legend-${index}`, tone: s.tone, texture: s.texture }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: "12",
+                    height: "12",
+                    rx: "2",
+                    fill: s.texture === "hatch" ? `url(#${idBase}-legend-${index})` : toneFill[s.tone],
+                    stroke: toneFill[s.tone]
+                  }
+                )
+              ] })
+            })),
+            ...visibility.legend
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { "data-slot": "trend-chart-scale", className: "sr-only", children: [
+          scaleLabel,
+          " \xB7 linear, from 0"
+        ] })
+      ]
+    }
+  );
+}
+function Texture({
+  id,
+  tone,
+  texture
+}) {
+  if (texture !== "hatch") return null;
+  return /* @__PURE__ */ jsxs("pattern", { id, width: "4", height: "4", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: toneFill[tone], opacity: 0.25 }),
+    /* @__PURE__ */ jsx("rect", { width: "2", height: "4", fill: toneFill[tone] })
+  ] });
+}
+
+export {
+  trendChartTicks,
+  trendChartLabelIndices,
+  TrendChart
+};

package/dist/web/chunk-UXLWWQ4J.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/section-label.tsx
+import { jsx } from "react/jsx-runtime";
+function SectionLabel({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-mini font-medium uppercase tracking-eyebrow-wide text-muted-foreground", className),
+      children
+    }
+  );
+}
+
+export {
+  SectionLabel
+};

package/dist/web/chunk-UZ4LWR4X.js

@@ -0,0 +1,26 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/empty-state.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyState({ title, description, action, icon, className, descriptionClassName }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center py-16 text-center", className), children: [
+    icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "mb-4 flex size-16 items-center justify-center rounded-full bg-secondary/15 text-secondary-content shadow-glow-violet-soft",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { className: "m-0 mb-1 text-body font-semibold text-foreground", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: cn("m-0 mb-4 max-w-[240px] text-caption text-muted-foreground", descriptionClassName), children: description }),
+    action
+  ] });
+}
+
+export {
+  EmptyState
+};

package/dist/web/chunk-VLZMX43R.js

@@ -0,0 +1,45 @@
+"use client";
+
+// src/web/hooks/use-asset-icon.ts
+import { useState, useEffect } from "react";
+var DEFAULT_ICON_CDN_BASE_URL = "https://raw.githubusercontent.com/kaleidoswap/coinmarketcap-icons-cryptos/refs/heads/main/icons/";
+var DICEBEAR_SHAPES_BASE_URL = "https://api.dicebear.com/9.x/shapes/svg";
+var TICKER_MAPPINGS = {
+  SAT: "BTC",
+  None: ""
+};
+var VALID_ICON_TICKER_REGEX = /^[A-Z0-9-]{1,12}$/;
+function getAssetIconUrl(ticker, cdnBaseUrl = DEFAULT_ICON_CDN_BASE_URL) {
+  if (!ticker || ticker.trim() === "") return "";
+  const normalized = ticker.toUpperCase().trim();
+  if (!VALID_ICON_TICKER_REGEX.test(normalized)) return "";
+  if (TICKER_MAPPINGS[normalized] !== void 0) {
+    const mapped = TICKER_MAPPINGS[normalized];
+    if (mapped === "") return "";
+    return getAssetIconUrl(mapped, cdnBaseUrl);
+  }
+  return `${cdnBaseUrl}${normalized.toLowerCase()}.png`;
+}
+function getFallbackAssetIconUrl(seed) {
+  const normalized = seed.trim();
+  if (!normalized) return "";
+  const params = new URLSearchParams({
+    seed: normalized,
+    backgroundType: "gradientLinear",
+    radius: "50"
+  });
+  return `${DICEBEAR_SHAPES_BASE_URL}?${params.toString()}`;
+}
+function useAssetIcon(ticker, cdnBaseUrl) {
+  const [url, setUrl] = useState(() => getAssetIconUrl(ticker, cdnBaseUrl));
+  useEffect(() => {
+    setUrl(getAssetIconUrl(ticker, cdnBaseUrl));
+  }, [ticker, cdnBaseUrl]);
+  return url;
+}
+
+export {
+  getAssetIconUrl,
+  getFallbackAssetIconUrl,
+  useAssetIcon
+};

package/dist/web/chunk-VM6AGMYO.js

@@ -0,0 +1,46 @@
+"use client";
+
+// src/web/utils/amount-display.ts
+var NUMBER_RE = /^-?(?:\d{1,3}(?:,\d{3})+|\d+)(?:\.\d+)?$/;
+function formatDisplayAmountText(value, options = {}) {
+  if (value === null || value === void 0 || value === "") return "";
+  const unit = options.unit ?? "token";
+  const raw = typeof value === "number" ? String(value) : value.trim();
+  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
+  const suffix = suffixMatch?.[1] ?? "";
+  const detectedUnit = suffix.trim() === "BTC" ? "BTC" : suffix.trim() === "sats" ? "sats" : suffix.trim() === "mBTC" ? "mBTC" : unit;
+  const maxDecimals = detectedUnit === "sats" ? 0 : detectedUnit === "BTC" ? 8 : detectedUnit === "mBTC" ? 5 : options.maxDecimals ?? 6;
+  const numeric = suffix ? raw.slice(0, -suffix.length) : raw;
+  const match = numeric.match(NUMBER_RE);
+  if (!match) return raw;
+  const num = parseFloat(numeric.replace(/,/g, ""));
+  if (!Number.isFinite(num)) return raw;
+  const factor = Math.pow(10, maxDecimals);
+  const rounded = Math.round(num * factor) / factor;
+  const formatted = rounded.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals
+  });
+  return `${formatted}${suffix}`;
+}
+var DEFAULT_AMOUNT_LOCALE = "en-US";
+function formatAmount(value, options = {}) {
+  if (!Number.isFinite(value)) return String(value);
+  return new Intl.NumberFormat(options.locale ?? DEFAULT_AMOUNT_LOCALE, {
+    maximumFractionDigits: options.maximumFractionDigits ?? 20
+  }).format(value);
+}
+function formatCompactAmount(value, locale = "en-US") {
+  if (!Number.isFinite(value)) return String(value);
+  return new Intl.NumberFormat(locale, {
+    notation: "compact",
+    maximumFractionDigits: 2
+  }).format(value);
+}
+
+export {
+  formatDisplayAmountText,
+  DEFAULT_AMOUNT_LOCALE,
+  formatAmount,
+  formatCompactAmount
+};

package/dist/web/chunk-VUGV3ELU.js

@@ -0,0 +1,176 @@
+"use client";
+import {
+  AssetIcon
+} from "./chunk-2REWXJEN.js";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Edit
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/info-chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultStatusLabel = {
+  success: "Success",
+  warning: "Warning",
+  danger: "Error",
+  info: "Info"
+};
+var leadingToneClass = {
+  success: "bg-success/10 text-success-fg",
+  warning: "bg-warning/10 text-warning-fg",
+  danger: "bg-danger/10 text-danger-fg",
+  info: "bg-secondary/15 text-secondary-content"
+};
+var statusToneClass = {
+  success: "bg-success/10 text-success-fg",
+  warning: "bg-warning/10 text-warning-fg",
+  danger: "bg-danger/10 text-danger-fg",
+  info: "bg-secondary/15 text-secondary-content"
+};
+var statusDotClass = {
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-secondary-content"
+};
+function StatusChip({ status, label, pulse = true, className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "status-chip",
+      "data-status": status,
+      className: cn(
+        "inline-flex max-w-full items-center gap-1.5 rounded-full px-2 py-0.5 text-xxs font-bold leading-4",
+        statusToneClass[status],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex size-1.5 shrink-0", children: [
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "status-chip-pulse",
+              className: cn("absolute inset-0 rounded-full opacity-0 motion-safe:animate-ping motion-safe:opacity-75", statusDotClass[status])
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("relative size-1.5 rounded-full", statusDotClass[status]) })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? defaultStatusLabel[status] })
+      ]
+    }
+  );
+}
+function InfoChip({
+  leading,
+  label,
+  value,
+  status,
+  statusLabel,
+  onEdit,
+  editLabel,
+  editDisabled,
+  className,
+  valueClassName,
+  "data-testid": dataTestId,
+  "data-info-kind": dataInfoKind
+}) {
+  const readableStatus = status ? statusLabel ?? defaultStatusLabel[status] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "info-chip",
+      "data-status": status,
+      "data-info-kind": dataInfoKind,
+      "data-testid": dataTestId,
+      className: cn(
+        "flex w-full max-w-full items-center gap-3 rounded-xl bg-surface-card bg-gradient-card px-3 py-2.5 shadow-raised",
+        className
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-full bg-secondary/15 text-secondary-content [&_svg]:size-icon-lg",
+              status && leadingToneClass[status]
+            ),
+            children: leading
+          }
+        ),
+        /* @__PURE__ */ jsxs("dl", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("dt", { className: cn("truncate text-muted-foreground", eyebrow), children: label }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "min-w-0 max-w-full [overflow-wrap:anywhere] text-body font-semibold leading-5 text-foreground",
+                  valueClassName
+                ),
+                children: value
+              }
+            ),
+            status && /* @__PURE__ */ jsx(StatusChip, { status, label: readableStatus ?? void 0 })
+          ] })
+        ] }),
+        onEdit && /* @__PURE__ */ jsx(GlyphButton, { icon: Edit, label: editLabel, onClick: onEdit, disabled: editDisabled })
+      ]
+    }
+  );
+}
+function NetworkInfoChip({
+  network,
+  label = "Network",
+  value = network,
+  iconBasePath,
+  ...infoChipProps
+}) {
+  return /* @__PURE__ */ jsx(
+    InfoChip,
+    {
+      ...infoChipProps,
+      "data-info-kind": "network",
+      leading: /* @__PURE__ */ jsx(NetworkBadge, { network, iconBasePath, size: "md" }),
+      label,
+      value
+    }
+  );
+}
+function AssetInfoChip({
+  ticker,
+  label = "Asset",
+  value = ticker,
+  logoUri,
+  cdnBaseUrl,
+  ...infoChipProps
+}) {
+  return /* @__PURE__ */ jsx(
+    InfoChip,
+    {
+      ...infoChipProps,
+      "data-info-kind": "asset",
+      leading: /* @__PURE__ */ jsx(AssetIcon, { ticker, logoUri, cdnBaseUrl, size: 28 }),
+      label,
+      value
+    }
+  );
+}
+
+export {
+  StatusChip,
+  InfoChip,
+  NetworkInfoChip,
+  AssetInfoChip
+};