Data Table

1/**
2 * DataTable — a production-grade data table: sortable columns (aria-sort),
3 * row selection with an indeterminate header checkbox, sticky header,
4 * tabular numerals, pagination, a floating bulk-action bar, an empty state and
5 * a loading skeleton.
6 *
7 * Props: data, columns, getRowId, pageSize, loading, selectable, bulkActions,
8 * empty (ReactNode), caption (accessible name), maxHeight, theme.
9 * Column: { key, header, align?, width?, sortValue?, sort?, render?, narrowHide? }
10 *
11 * Browser support: all evergreen browsers. Container queries (Chrome 105,
12 * Safari 16, Firefox 110) hide low-priority columns on narrow containers;
13 * older browsers simply scroll horizontally.
14 * Accessibility: native <table>; sortable headers contain a <button> and set
15 * aria-sort; checkboxes are real inputs with row-specific labels; sort and
16 * selection changes are announced through a polite live region; the bulk bar
17 * is a labelled region. Keyboard: Tab / Shift+Tab, Space on checkboxes, Enter
18 * or Space on sort buttons, Escape clears the selection.
19 * Reduced motion: transitions collapse to opacity changes and the skeleton
20 * stops shimmering.
21 */
22import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
23 
24export interface DataTableColumn<T> {
25  key: string;
26  header: string;
27  align?: "left" | "right" | "center";
28  width?: number | string;
29  /** Value used for sorting; presence makes the column sortable. */
30  sortValue?: (row: T) => string | number;
31  render?: (row: T) => ReactNode;
32  /** Hide this column when the table container is narrow. */
33  narrowHide?: boolean;
34  numeric?: boolean;
35}
36 
37export interface DataTableProps<T> {
38  data: T[];
39  columns: DataTableColumn<T>[];
40  getRowId: (row: T) => string;
41  pageSize?: number;
42  loading?: boolean;
43  selectable?: boolean;
44  bulkActions?: (ctx: { ids: string[]; clear: () => void }) => ReactNode;
45  empty?: ReactNode;
46  caption: string;
47  maxHeight?: number;
48  initialSort?: { key: string; dir: "asc" | "desc" };
49  noun?: [string, string];
50  theme?: "light" | "dark";
51  className?: string;
52}
53 
54type Dir = "asc" | "desc";
55 
56/** Tracks whether the table's own container is narrow, so hidden columns are not rendered at all (keeps colSpan rows correct). */
57function useNarrow(max: number) {
58  const ref = useRef<HTMLDivElement>(null);
59  const [narrow, setNarrow] = useState(false);
60  useEffect(() => {
61    const el = ref.current;
62    if (!el || typeof ResizeObserver === "undefined") return;
63    const f = () => setNarrow(el.clientWidth <= max);
64    f();
65    const ro = new ResizeObserver(f);
66    ro.observe(el);
67    return () => ro.disconnect();
68  }, [max]);
69  return [ref, narrow] as const;
70}
71 
72export function DataTable<T>({
73  data,
74  columns,
75  getRowId,
76  pageSize = 8,
77  loading = false,
78  selectable = true,
79  bulkActions,
80  empty,
81  caption,
82  maxHeight = 520,
83  initialSort,
84  noun = ["row", "rows"],
85  theme,
86  className,
87}: DataTableProps<T>) {
88  const uid = useId();
89  const [sort, setSort] = useState<{ key: string; dir: Dir } | null>(initialSort ?? null);
90  const [page, setPage] = useState(0);
91  const [picked, setPicked] = useState<Set<string>>(new Set());
92  const [scrolled, setScrolled] = useState(false);
93  const [live, setLive] = useState("");
94  const headCb = useRef<HTMLInputElement>(null);
95  const [cardRef, narrow] = useNarrow(680);
96  const cols = narrow ? columns.filter((c) => !c.narrowHide) : columns;
97 
98  const sorted = useMemo(() => {
99    if (!sort) return data;
100    const col = columns.find((c) => c.key === sort.key);
101    if (!col?.sortValue) return data;
102    const f = col.sortValue;
103    const m = sort.dir === "asc" ? 1 : -1;
104    return data
105      .map((r, i) => [r, i] as const)
106      .sort((a, b) => {
107        const x = f(a[0]);
108        const y = f(b[0]);
109        const c = typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y), undefined, { numeric: true });
110        return c * m || a[1] - b[1];
111      })
112      .map((p) => p[0]);
113  }, [data, columns, sort]);
114 
115  const pages = Math.max(1, Math.ceil(sorted.length / pageSize));
116  const cur = Math.min(page, pages - 1);
117  useEffect(() => {
118    if (page !== cur) setPage(cur);
119  }, [page, cur]);
120  const rows = sorted.slice(cur * pageSize, cur * pageSize + pageSize);
121  const ids = rows.map(getRowId);
122  const nSel = ids.filter((i) => picked.has(i)).length;
123  const allOnPage = ids.length > 0 && nSel === ids.length;
124  const some = nSel > 0 && !allOnPage;
125 
126  useLayoutEffect(() => {
127    if (headCb.current) headCb.current.indeterminate = some;
128  }, [some]);
129 
130  const cycle = (c: DataTableColumn<T>) => {
131    let next: { key: string; dir: Dir } | null;
132    if (!sort || sort.key !== c.key) next = { key: c.key, dir: c.numeric ? "desc" : "asc" };
133    else if (sort.dir === (c.numeric ? "desc" : "asc")) next = { key: c.key, dir: c.numeric ? "asc" : "desc" };
134    else next = null;
135    setSort(next);
136    setLive(next ? `Sorted by ${c.header}, ${next.dir === "asc" ? "ascending" : "descending"}` : "Sorting cleared");
137  };
138 
139  const toggleRow = (id: string) =>
140    setPicked((p) => {
141      const n = new Set(p);
142      n.has(id) ? n.delete(id) : n.add(id);
143      setLive(`${n.size} ${n.size === 1 ? noun[0] : noun[1]} selected`);
144      return n;
145    });
146  const togglePage = () =>
147    setPicked((p) => {
148      const n = new Set(p);
149      if (allOnPage) ids.forEach((i) => n.delete(i));
150      else ids.forEach((i) => n.add(i));
151      setLive(`${n.size} ${n.size === 1 ? noun[0] : noun[1]} selected`);
152      return n;
153    });
154  const clear = () => {
155    setPicked(new Set());
156    setLive("Selection cleared");
157  };
158  const selectAll = () => {
159    setPicked(new Set(sorted.map(getRowId)));
160    setLive(`All ${sorted.length} ${noun[1]} selected`);
161  };
162 
163  const total = picked.size;
164  const colCount = cols.length + (selectable ? 1 : 0);
165  const from = sorted.length ? cur * pageSize + 1 : 0;
166  const to = Math.min(sorted.length, cur * pageSize + pageSize);
167 
168  const pageButtons = useMemo(() => {
169    const out: (number | "…")[] = [];
170    for (let i = 0; i < pages; i++) {
171      if (i === 0 || i === pages - 1 || Math.abs(i - cur) <= 1) out.push(i);
172      else if (out[out.length - 1] !== "…") out.push("…");
173    }
174    return out;
175  }, [pages, cur]);
176 
177  return (
178    <div
179      className={`fd-dt${className ? " " + className : ""}`}
180      data-fd-theme={theme}
181      onKeyDown={(e) => {
182        if (e.key === "Escape" && total > 0 && !(e.target as HTMLElement).closest("[role=menu]")) clear();
183      }}
184    >
185      <style>{css}</style>
186      <div className="fd-dt-card" ref={cardRef}>
187        <div className="fd-dt-scroll" style={{ maxHeight }} data-scrolled={scrolled ? "" : undefined} onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 2)} tabIndex={0} role="region" aria-label={`${caption}, scrollable`}>
188          <table className="fd-dt-table" aria-busy={loading} aria-rowcount={sorted.length + 1}>
189            <caption className="fd-dt-sr">{caption}</caption>
190            <thead>
191              <tr>
192                {selectable && (
193                  <th scope="col" className="fd-dt-th fd-dt-chk" style={{ width: 48 }}>
194                    <label className="fd-dt-hit">
195                      <input ref={headCb} type="checkbox" className="fd-dt-cb" checked={allOnPage} onChange={togglePage} disabled={loading || !rows.length} aria-label={`Select all ${noun[1]} on this page`} />
196                    </label>
197                  </th>
198                )}
199                {cols.map((c) => {
200                  const active = sort?.key === c.key;
201                  const ariaSort = c.sortValue ? (active ? (sort!.dir === "asc" ? "ascending" : "descending") : "none") : undefined;
202                  return (
203                    <th key={c.key} scope="col" className="fd-dt-th" style={c.width ? { width: c.width } : undefined} data-align={c.align ?? "left"} data-nh={c.narrowHide ? "" : undefined} aria-sort={ariaSort}>
204                      {c.sortValue ? (
205                        <button type="button" className="fd-dt-sortbtn" data-active={active ? "" : undefined} onClick={() => cycle(c)} disabled={loading}>
206                          <span>{c.header}</span>
207                          <svg className="fd-dt-arrow" data-dir={active ? sort!.dir : undefined} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
208                            <path d="M6 2.5v7M3 6.5l3 3 3-3" />
209                          </svg>
210                        </button>
211                      ) : (
212                        <span className="fd-dt-plain">{c.header}</span>
213                      )}
214                    </th>
215                  );
216                })}
217              </tr>
218            </thead>
219            <tbody>
220              {loading
221                ? Array.from({ length: Math.min(pageSize, 8) }, (_, i) => (
222                    <tr key={i} className="fd-dt-row fd-dt-skel" aria-hidden="true">
223                      {selectable && (
224                        <td className="fd-dt-td fd-dt-chk">
225                          <span className="fd-dt-bone" style={{ width: 16, height: 16, borderRadius: 5, marginLeft: 16 }} />
226                        </td>
227                      )}
228                      {cols.map((c, ci) => (
229                        <td key={c.key} className="fd-dt-td" data-align={c.align ?? "left"} data-nh={c.narrowHide ? "" : undefined}>
230                          <span className="fd-dt-bone" style={{ width: `${[62, 44, 52, 40, 48, 56][(i + ci) % 6]}%`, animationDelay: `${(i * 60 + ci * 40) % 400}ms` }} />
231                        </td>
232                      ))}
233                    </tr>
234                  ))
235                : rows.map((r, ri) => {
236                    const id = getRowId(r);
237                    const on = picked.has(id);
238                    return (
239                      <tr key={id} className="fd-dt-row" data-selected={on ? "" : undefined} aria-selected={selectable ? on : undefined} aria-rowindex={cur * pageSize + ri + 2}>
240                        {selectable && (
241                          <td className="fd-dt-td fd-dt-chk">
242                            <label className="fd-dt-hit">
243                              <input type="checkbox" className="fd-dt-cb" checked={on} onChange={() => toggleRow(id)} aria-label={`Select row ${cur * pageSize + ri + 1}`} />
244                            </label>
245                          </td>
246                        )}
247                        {cols.map((c) => (
248                          <td key={c.key} className="fd-dt-td" data-align={c.align ?? "left"} data-num={c.numeric ? "" : undefined} data-nh={c.narrowHide ? "" : undefined}>
249                            {c.render ? c.render(r) : String((r as Record<string, unknown>)[c.key] ?? "")}
250                          </td>
251                        ))}
252                      </tr>
253                    );
254                  })}
255              {!loading && rows.length === 0 && (
256                <tr>
257                  <td className="fd-dt-empty" colSpan={colCount}>
258                    {empty ?? (
259                      <div className="fd-dt-emptybox">
260                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="6" y="9" width="28" height="22" rx="5" /><path d="M6 16h28M13 23h6" /></svg>
261                        <b>No results</b>
262                        <span>Nothing matches the current filters.</span>
263                      </div>
264                    )}
265                  </td>
266                </tr>
267              )}
268            </tbody>
269          </table>
270        </div>
271 
272        <div className="fd-dt-foot">
273          <span className="fd-dt-count" aria-live="off">
274            {loading ? "Loading…" : sorted.length ? <>Showing <b>{from}–{to}</b> of <b>{sorted.length}</b></> : "0 results"}
275          </span>
276          <nav className="fd-dt-pager" aria-label="Pagination">
277            <button type="button" className="fd-dt-pbtn" onClick={() => setPage(cur - 1)} disabled={loading || cur === 0} aria-label="Previous page">
278              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M10 3.5L5.5 8l4.5 4.5" /></svg>
279            </button>
280            <span className="fd-dt-pages">
281              {pageButtons.map((p, i) =>
282                p === "…" ? (
283                  <span key={"e" + i} className="fd-dt-gap" aria-hidden="true">…</span>
284                ) : (
285                  <button key={p} type="button" className="fd-dt-pbtn fd-dt-pnum" data-active={p === cur ? "" : undefined} aria-current={p === cur ? "page" : undefined} aria-label={`Page ${p + 1}`} disabled={loading} onClick={() => setPage(p)}>
286                    {p + 1}
287                  </button>
288                ),
289              )}
290            </span>
291            <span className="fd-dt-pof">Page {cur + 1} of {pages}</span>
292            <button type="button" className="fd-dt-pbtn" onClick={() => setPage(cur + 1)} disabled={loading || cur >= pages - 1} aria-label="Next page">
293              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 3.5L10.5 8 6 12.5" /></svg>
294            </button>
295          </nav>
296        </div>
297 
298        <div className="fd-dt-bulk" data-open={total > 0 ? "" : undefined} role="region" aria-label="Bulk actions" inert={total === 0}>
299          <span className="fd-dt-bulkn"><b>{total}</b> selected</span>
300          {allOnPage && total < sorted.length && (
301            <button type="button" className="fd-dt-link" onClick={selectAll}>Select all {sorted.length}</button>
302          )}
303          <span className="fd-dt-bulksep" aria-hidden="true" />
304          {bulkActions?.({ ids: [...picked], clear })}
305          <button type="button" className="fd-dt-x" onClick={clear} aria-label="Clear selection">
306            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><path d="M3 3l8 8M11 3l-8 8" /></svg>
307          </button>
308        </div>
309      </div>
310      <div className="fd-dt-sr" role="status" aria-live="polite" id={`${uid}-live`}>{live}</div>
311    </div>
312  );
313}
314 
315const css = `
316:where(.fd-dt,.fd-dt *){box-sizing:border-box;margin:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;list-style:none;border:0;background:none}
317:where(.fd-dt,.fd-dt *)::before,:where(.fd-dt,.fd-dt *)::after{box-sizing:border-box}
318:where(.fd-dt svg){display:block;flex-shrink:0}
319:where(.fd-dt button,.fd-dt input){appearance:none;-webkit-appearance:none;outline:0;border-radius:0}
320:where(.fd-dt table){border-collapse:separate;border-spacing:0}
321.fd-dt{
322  --fd-ease-out:cubic-bezier(.22,1,.36,1);--fd-ease-in-out:cubic-bezier(.65,0,.35,1);--fd-spring:cubic-bezier(.34,1.56,.64,1);--fd-dur-1:120ms;--fd-dur-2:240ms;--fd-dur-3:420ms;
323  --t-bg:#fff;--t-head:#FAFAFA;--t-fg:#0B0B0F;--t-mut:#6B6B76;--t-line:rgba(11,11,15,.08);--t-line2:rgba(11,11,15,.14);--t-hover:rgba(11,11,15,.028);
324  --t-sel:rgba(79,70,229,.07);--t-accent:#4F46E5;--t-on:#fff;--t-ring:rgba(79,70,229,.45);--t-bone:rgba(11,11,15,.07);--t-bar:#0B0B0F;--t-baron:#fff;
325  position:relative;width:100%;font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;letter-spacing:-.006em;color:var(--t-fg);
326  -webkit-font-smoothing:antialiased;
327}
328[data-fd-theme="dark"] .fd-dt,.fd-dt[data-fd-theme="dark"]{--t-bg:#101014;--t-head:#15151A;--t-fg:#F2F2F5;--t-mut:#9A9AA6;--t-line:rgba(255,255,255,.07);--t-line2:rgba(255,255,255,.14);--t-hover:rgba(255,255,255,.03);--t-sel:rgba(129,140,248,.12);--t-accent:#818CF8;--t-on:#0B0B0F;--t-ring:rgba(129,140,248,.55);--t-bone:rgba(255,255,255,.08);--t-bar:#F2F2F5;--t-baron:#0B0B0F}
329.fd-dt-card{position:relative;container-type:inline-size;border-radius:16px;background:var(--t-bg);overflow:hidden;box-shadow:0 0 0 1px var(--t-line),0 1px 2px rgba(11,11,15,.04),0 12px 32px -16px rgba(11,11,15,.12)}
330.fd-dt-scroll{overflow:auto;overscroll-behavior:contain;border-radius:16px 16px 0 0}
331.fd-dt-scroll:focus-visible{outline:2px solid var(--t-ring);outline-offset:-2px}
332.fd-dt-table{width:100%;min-width:640px;table-layout:fixed}
333.fd-dt-th{position:sticky;top:0;z-index:2;height:44px;padding:0 16px;background:var(--t-head);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;color:var(--t-mut);text-align:left;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--t-line);transition:box-shadow var(--fd-dur-2)}
334.fd-dt-scroll[data-scrolled] .fd-dt-th{box-shadow:inset 0 -1px 0 var(--t-line),0 8px 12px -8px rgba(11,11,15,.14)}
335.fd-dt-th[data-align="right"]{text-align:right}.fd-dt-th[data-align="center"]{text-align:center}
336.fd-dt-th.fd-dt-chk,.fd-dt-td.fd-dt-chk{padding:0;width:48px}
337.fd-dt-sortbtn{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0 -8px;padding:0 8px;border-radius:8px;cursor:pointer;color:inherit;font:inherit;font-weight:500;transition:background-color var(--fd-dur-1),color var(--fd-dur-1)}
338.fd-dt-th[data-align="right"] .fd-dt-sortbtn{flex-direction:row-reverse}
339.fd-dt-sortbtn:hover:not(:disabled){background:var(--t-hover);color:var(--t-fg)}
340.fd-dt-sortbtn[data-active]{color:var(--t-fg)}
341.fd-dt-sortbtn:focus-visible{box-shadow:0 0 0 2px var(--t-bg),0 0 0 4px var(--t-ring)}
342.fd-dt-sortbtn:disabled{cursor:default;opacity:.6}
343.fd-dt-arrow{opacity:0;transform:translateY(2px);transition:opacity var(--fd-dur-2) var(--fd-ease-out),transform var(--fd-dur-3) var(--fd-spring)}
344.fd-dt-sortbtn:hover .fd-dt-arrow,.fd-dt-sortbtn:focus-visible .fd-dt-arrow{opacity:.45;transform:none}
345.fd-dt-sortbtn[data-active] .fd-dt-arrow{opacity:1;transform:none}
346.fd-dt-arrow[data-dir="asc"]{transform:rotate(180deg)}
347.fd-dt-plain{display:inline-block}
348.fd-dt-td{height:56px;padding:0 16px;border-bottom:1px solid var(--t-line);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--fd-dur-1)}
349.fd-dt-td[data-align="right"]{text-align:right}.fd-dt-td[data-align="center"]{text-align:center}
350.fd-dt-td[data-num]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}
351.fd-dt-row:last-child .fd-dt-td{border-bottom-color:transparent}
352@media (hover:hover){.fd-dt-row:hover .fd-dt-td{background:var(--t-hover)}}
353.fd-dt-row[data-selected] .fd-dt-td{background:var(--t-sel)}
354.fd-dt-row[data-selected] .fd-dt-chk{box-shadow:inset 2px 0 0 var(--t-accent)}
355.fd-dt-hit{display:flex;align-items:center;justify-content:center;width:48px;height:100%;min-height:44px;cursor:pointer}
356.fd-dt-cb{position:relative;flex:none;width:16px;height:16px;border-radius:5px;background:var(--t-bg);box-shadow:inset 0 0 0 1.5px var(--t-line2);cursor:pointer;transition:background-color var(--fd-dur-1),box-shadow var(--fd-dur-1),transform var(--fd-dur-2) var(--fd-spring)}
357.fd-dt-cb::after{content:"";position:absolute;inset:0;opacity:0;transform:scale(.5);transition:opacity var(--fd-dur-1),transform var(--fd-dur-2) var(--fd-spring);background:center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
358[data-fd-theme="dark"] .fd-dt-cb::after,.fd-dt[data-fd-theme="dark"] .fd-dt-cb::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230B0B0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
359.fd-dt-cb:indeterminate::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E")}
360[data-fd-theme="dark"] .fd-dt-cb:indeterminate::after,.fd-dt[data-fd-theme="dark"] .fd-dt-cb:indeterminate::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230B0B0F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E")}
361.fd-dt-cb:checked,.fd-dt-cb:indeterminate{background:var(--t-accent);box-shadow:none}
362.fd-dt-cb:checked::after,.fd-dt-cb:indeterminate::after{opacity:1;transform:none}
363@media (hover:hover){.fd-dt-cb:hover:not(:checked):not(:indeterminate):not(:disabled){box-shadow:inset 0 0 0 1.5px var(--t-mut)}}
364.fd-dt-cb:active:not(:disabled){transform:scale(.88)}
365.fd-dt-cb:focus-visible{box-shadow:0 0 0 2px var(--t-bg),0 0 0 4px var(--t-ring)}
366.fd-dt-cb:disabled{opacity:.4;cursor:default}
367.fd-dt-skel .fd-dt-td{border-bottom-color:var(--t-line)}
368.fd-dt-bone{display:block;height:12px;max-width:100%;border-radius:6px;background:linear-gradient(90deg,var(--t-bone) 0%,color-mix(in srgb,var(--t-bone) 40%,transparent) 50%,var(--t-bone) 100%);background-size:200% 100%;animation:fd-dt-shine 1.4s var(--fd-ease-in-out) infinite}
369[data-align="right"]>.fd-dt-bone{margin-left:auto}
370.fd-dt-empty{padding:0;height:320px;border:0}
371.fd-dt-emptybox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:320px;padding:32px;text-align:center;color:var(--t-mut)}
372.fd-dt-emptybox svg{margin-bottom:10px;color:var(--t-mut);opacity:.7}
373.fd-dt-emptybox b{font-size:15px;line-height:20px;font-weight:600;color:var(--t-fg)}
374.fd-dt-emptybox span{font-size:13px;line-height:20px}
375.fd-dt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 16px;border-top:1px solid var(--t-line);font-size:13px;line-height:20px;color:var(--t-mut);font-variant-numeric:tabular-nums}
376.fd-dt-count b{font-weight:500;color:var(--t-fg)}
377.fd-dt-pager{display:flex;align-items:center;gap:4px}
378.fd-dt-pages{display:flex;align-items:center;gap:2px}
379.fd-dt-pof{display:none;margin:0 8px}
380.fd-dt-gap{display:grid;place-items:center;width:20px}
381.fd-dt-pbtn{display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;line-height:1;color:var(--t-mut);font-variant-numeric:tabular-nums;transition:background-color var(--fd-dur-1),color var(--fd-dur-1),transform var(--fd-dur-2) var(--fd-spring)}
382@media (hover:hover){.fd-dt-pbtn:hover:not(:disabled):not([data-active]){background:var(--t-hover);color:var(--t-fg)}}
383.fd-dt-pbtn:active:not(:disabled){transform:scale(.94)}
384.fd-dt-pbtn[data-active]{background:var(--t-fg);color:var(--t-bg);cursor:default}
385.fd-dt-pbtn:disabled{opacity:.35;cursor:default}
386.fd-dt-pbtn:focus-visible{box-shadow:0 0 0 2px var(--t-bg),0 0 0 4px var(--t-ring)}
387.fd-dt-bulk{position:absolute;left:50%;bottom:72px;z-index:5;display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 16px;border-radius:14px;background:var(--t-bar);color:var(--t-baron);font-size:13px;font-weight:500;white-space:nowrap;
388  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 2px 4px rgba(11,11,15,.2),0 16px 40px -8px rgba(11,11,15,.45);
389  opacity:0;transform:translate(-50%,16px) scale(.96);pointer-events:none;visibility:hidden;transition:opacity var(--fd-dur-2) var(--fd-ease-out),transform var(--fd-dur-3) var(--fd-ease-out),visibility 0s linear var(--fd-dur-3)}
390.fd-dt-bulk[data-open]{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;transition-delay:0s}
391.fd-dt-bulkn{font-variant-numeric:tabular-nums}.fd-dt-bulkn b{font-weight:600}
392.fd-dt-bulksep{width:1px;height:20px;background:currentColor;opacity:.2}
393.fd-dt-link{cursor:pointer;font-size:13px;font-weight:500;line-height:1;color:inherit;opacity:.7;text-decoration:underline;text-underline-offset:3px;padding:8px 2px;border-radius:6px}
394.fd-dt-link:hover{opacity:1}
395.fd-dt-link:focus-visible,.fd-dt-bulk :where(button):focus-visible{outline:2px solid var(--t-ring);outline-offset:2px}
396.fd-dt-x{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;cursor:pointer;color:inherit;opacity:.7;transition:background-color var(--fd-dur-1),opacity var(--fd-dur-1)}
397.fd-dt-x:hover{opacity:1;background:rgba(127,127,127,.2)}
398.fd-dt-bulk .fd-dt-act{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;line-height:1;color:inherit;background:rgba(127,127,127,.18);transition:background-color var(--fd-dur-1),transform var(--fd-dur-2) var(--fd-spring)}
399.fd-dt-bulk .fd-dt-act:hover{background:rgba(127,127,127,.3)}
400.fd-dt-bulk .fd-dt-act:active{transform:scale(.96)}
401.fd-dt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
402@keyframes fd-dt-shine{to{background-position:-200% 0}}
403@container (max-width:680px){
404  .fd-dt-table{min-width:0}
405  [data-nh]{display:none}
406  .fd-dt-td,.fd-dt-th{padding:0 12px}
407  .fd-dt-foot .fd-dt-pages{display:none}.fd-dt-pof{display:block}
408  .fd-dt-bulk{bottom:72px;max-width:calc(100% - 24px);gap:8px;padding-left:12px}
409  .fd-dt-bulk .fd-dt-act span{display:none}
410}
411@media (prefers-reduced-motion:reduce){
412  .fd-dt *,.fd-dt *::before,.fd-dt *::after{transition-duration:1ms!important;animation:none!important}
413  .fd-dt-bulk{transform:translate(-50%,0)}
414}
415@media (prefers-contrast:more){.fd-dt-card{box-shadow:0 0 0 1px currentColor}.fd-dt-td{border-bottom-color:var(--t-line2)}}
416`;
417 
418/* ───────────────────────────── demo ───────────────────────────── */
419 
420interface Txn {
421  id: string;
422  merchant: string;
423  category: string;
424  date: string;
425  method: string;
426  status: "settled" | "pending" | "failed" | "refunded";
427  amount: number;
428  hue: number;
429}
430 
431const TXNS: Txn[] = [
432  { id: "t01", merchant: "Brightline Air", category: "Travel", date: "2026-10-27", method: "Visa ·· 4417", status: "settled", amount: -1284.0, hue: 214 },
433  { id: "t02", merchant: "Cascade Coffee Roasters", category: "Food & drink", date: "2026-10-27", method: "Apple Pay", status: "settled", amount: -18.5, hue: 28 },
434  { id: "t03", merchant: "Northwind Payout", category: "Income", date: "2026-10-26", method: "ACH", status: "pending", amount: 14820.35, hue: 152 },
435  { id: "t04", merchant: "Fernhill Veterinary", category: "Health", date: "2026-10-26", method: "Mastercard ·· 0932", status: "settled", amount: -246.0, hue: 340 },
436  { id: "t05", merchant: "Orbit Cloud Hosting", category: "Software", date: "2026-10-25", method: "Visa ·· 4417", status: "settled", amount: -389.12, hue: 262 },
437  { id: "t06", merchant: "Kestrel Logistics", category: "Shipping", date: "2026-10-25", method: "Wire", status: "failed", amount: -5600.0, hue: 190 },
438  { id: "t07", merchant: "Marlow & Finch", category: "Food & drink", date: "2026-10-24", method: "Mastercard ·· 0932", status: "refunded", amount: 42.0, hue: 28 },
439  { id: "t08", merchant: "Tallis Architects", category: "Services", date: "2026-10-24", method: "ACH", status: "settled", amount: 9250.0, hue: 100 },
440  { id: "t09", merchant: "Sundial Fitness", category: "Health", date: "2026-10-23", method: "Visa ·· 4417", status: "settled", amount: -79.0, hue: 340 },
441  { id: "t10", merchant: "Pinecrest Hardware", category: "Supplies", date: "2026-10-23", method: "Debit ·· 7781", status: "settled", amount: -134.76, hue: 60 },
442  { id: "t11", merchant: "Lumen Design Co.", category: "Services", date: "2026-10-22", method: "ACH", status: "pending", amount: 3400.0, hue: 280 },
443  { id: "t12", merchant: "Harbor Street Market", category: "Groceries", date: "2026-10-22", method: "Apple Pay", status: "settled", amount: -97.31, hue: 130 },
444  { id: "t13", merchant: "Vantage Insurance", category: "Insurance", date: "2026-10-21", method: "ACH", status: "settled", amount: -612.0, hue: 232 },
445  { id: "t14", merchant: "Quill & Anchor Books", category: "Retail", date: "2026-10-21", method: "Visa ·· 4417", status: "settled", amount: -52.4, hue: 8 },
446  { id: "t15", merchant: "Meridian Energy", category: "Utilities", date: "2026-10-20", method: "ACH", status: "settled", amount: -218.9, hue: 48 },
447  { id: "t16", merchant: "Alder Dental Group", category: "Health", date: "2026-10-20", method: "Mastercard ·· 0932", status: "pending", amount: -420.0, hue: 340 },
448  { id: "t17", merchant: "Fieldnotes Press", category: "Income", date: "2026-10-19", method: "Stripe", status: "settled", amount: 2184.6, hue: 152 },
449  { id: "t18", merchant: "Copperline Rail", category: "Travel", date: "2026-10-19", method: "Apple Pay", status: "settled", amount: -64.0, hue: 214 },
450  { id: "t19", merchant: "Saffron & Salt", category: "Food & drink", date: "2026-10-18", method: "Visa ·· 4417", status: "failed", amount: -86.2, hue: 28 },
451  { id: "t20", merchant: "Bluebird Childcare", category: "Services", date: "2026-10-18", method: "ACH", status: "settled", amount: -1450.0, hue: 200 },
452  { id: "t21", merchant: "Tern Mobility", category: "Travel", date: "2026-10-17", method: "Apple Pay", status: "settled", amount: -12.75, hue: 214 },
453  { id: "t22", merchant: "Greywater Studios", category: "Income", date: "2026-10-17", method: "Wire", status: "settled", amount: 6800.0, hue: 152 },
454  { id: "t23", merchant: "Juniper Pharmacy", category: "Health", date: "2026-10-16", method: "Debit ·· 7781", status: "settled", amount: -31.18, hue: 340 },
455  { id: "t24", merchant: "Obsidian Security", category: "Software", date: "2026-10-16", method: "Visa ·· 4417", status: "refunded", amount: 149.0, hue: 262 },
456];
457 
458const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
459const fmtDate = (iso: string) => new Date(iso + "T12:00:00Z").toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
460const STATUS_LABEL = { settled: "Settled", pending: "Pending", failed: "Failed", refunded: "Refunded" } as const;
461 
462const columns: DataTableColumn<Txn>[] = [
463  {
464    key: "merchant",
465    header: "Merchant",
466    sortValue: (r) => r.merchant,
467    render: (r) => (
468      <span className="fd-dtd-merch">
469        <span className="fd-dtd-av" style={{ ["--h" as string]: r.hue }} aria-hidden="true">{r.merchant[0]}</span>
470        <span className="fd-dtd-mt"><b>{r.merchant}</b><small className="fd-dtd-wd">{r.category}</small><small className="fd-dtd-nr fd-dtd-pill" data-s={r.status}>{STATUS_LABEL[r.status]} · {fmtDate(r.date)}</small></span>
471      </span>
472    ),
473  },
474  { key: "date", header: "Date", width: 112, narrowHide: true, sortValue: (r) => r.date, render: (r) => <span className="fd-dtd-mut">{fmtDate(r.date)}</span> },
475  { key: "method", header: "Method", width: "20%", narrowHide: true, sortValue: (r) => r.method, render: (r) => <span className="fd-dtd-mut">{r.method}</span> },
476  { key: "status", header: "Status", width: 132, narrowHide: true, sortValue: (r) => r.status, render: (r) => <span className="fd-dtd-pill" data-s={r.status}><i />{STATUS_LABEL[r.status]}</span> },
477  {
478    key: "amount",
479    header: "Amount",
480    align: "right",
481    numeric: true,
482    width: 136,
483    sortValue: (r) => r.amount,
484    render: (r) => <span className="fd-dtd-amt" data-pos={r.amount > 0 ? "" : undefined}>{r.amount > 0 ? "+" : "−"}{usd.format(Math.abs(r.amount))}</span>,
485  },
486];
487 
488export function Demo() {
489  const [theme, setTheme] = useState<"light" | "dark">("light");
490  const [q, setQ] = useState("");
491  const [loading, setLoading] = useState(false);
492  const [note, setNote] = useState("");
493  const [rows, setRows] = useState(TXNS);
494 
495  const data = useMemo(() => rows.filter((r) => (r.merchant + r.category + r.method).toLowerCase().includes(q.trim().toLowerCase())), [rows, q]);
496  const settled = rows.filter((r) => r.status === "settled");
497  const net = settled.reduce((s, r) => s + r.amount, 0);
498  const pending = rows.filter((r) => r.status === "pending").reduce((s, r) => s + r.amount, 0);
499 
500  const reload = () => {
501    setLoading(true);
502    window.setTimeout(() => setLoading(false), 1800);
503  };
504 
505  return (
506    <div className="fd-dtd" data-fd-theme={theme}>
507      <style>{demoCss}</style>
508      <header className="fd-dtd-top">
509        <div className="fd-dtd-brand"><span className="fd-dtd-logo" aria-hidden="true" />Cobalt Treasury</div>
510        <nav aria-label="Primary" className="fd-dtd-nav"><a href="#overview">Overview</a><a href="#transactions" aria-current="page">Transactions</a><a href="#cards">Cards</a><a href="#payouts">Payouts</a></nav>
511        <button type="button" className="fd-dtd-theme" aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"} onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>{theme === "dark" ? "Light" : "Dark"}</button>
512      </header>
513      <main className="fd-dtd-main">
514        <div className="fd-dtd-head">
515          <div><h1>Transactions</h1><p>Every payment in and out of Fernhill Studio LLC, October 2026.</p></div>
516          <button type="button" className="fd-dtd-btn fd-dtd-primary" onClick={() => setNote("Export started — we’ll email a CSV to you shortly.")}>
517            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8 2.5v7.5M4.8 7L8 10.2 11.2 7M3 13h10" /></svg>Export CSV
518          </button>
519        </div>
520        <dl className="fd-dtd-stats">
521          <div><dt>Net settled</dt><dd>{usd.format(net)}</dd></div>
522          <div><dt>Pending</dt><dd>{usd.format(pending)}</dd></div>
523          <div><dt>Transactions</dt><dd>{rows.length}</dd></div>
524        </dl>
525        <div className="fd-dtd-bar">
526          <label className="fd-dtd-search">
527            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.5" /><path d="M10.5 10.5L14 14" /></svg>
528            <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search merchant, category or method" aria-label="Search transactions" />
529          </label>
530          <button type="button" className="fd-dtd-btn" onClick={reload} disabled={loading}>
531            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className={loading ? "fd-dtd-spin" : undefined}><path d="M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2.5v3h-3" /></svg>Refresh
532          </button>
533        </div>
534        <DataTable<Txn>
535          theme={theme}
536          caption="Transactions"
537          data={data}
538          columns={columns}
539          getRowId={(r) => r.id}
540          loading={loading}
541          pageSize={8}
542          noun={["transaction", "transactions"]}
543          initialSort={{ key: "date", dir: "desc" }}
544          empty={
545            <div className="fd-dt-emptybox">
546              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="9" /><path d="M25 25l8 8" /></svg>
547              <b>No transactions match “{q}”</b>
548              <span>Try a merchant name, a category such as Travel, or a card ending.</span>
549              <button type="button" className="fd-dtd-btn" style={{ marginTop: 12 }} onClick={() => setQ("")}>Clear search</button>
550            </div>
551          }
552          bulkActions={({ ids, clear }) => (
553            <>
554              <button type="button" className="fd-dt-act" onClick={() => { setNote(`Categorised ${ids.length} transactions.`); clear(); }}>
555                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M1.5 7.5l5-5h5v5l-5 5z" /><circle cx="9.2" cy="4.8" r=".6" fill="currentColor" /></svg><span>Categorise</span>
556              </button>
557              <button type="button" className="fd-dt-act" onClick={() => { setNote(`Exported ${ids.length} transactions.`); }}>
558                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M7 2v6.5M4.3 6L7 8.7 9.7 6M2.5 11.5h9" /></svg><span>Export</span>
559              </button>
560              <button type="button" className="fd-dt-act" onClick={() => { setRows((p) => p.filter((r) => !ids.includes(r.id))); setNote(`Archived ${ids.length} transactions.`); clear(); }}>
561                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="1.5" y="2.5" width="11" height="3" rx="1" /><path d="M2.5 5.5v5.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V5.5M5.5 8h3" /></svg><span>Archive</span>
562              </button>
563            </>
564          )}
565        />
566        <p className="fd-dtd-note" role="status" aria-live="polite">{note}</p>
567      </main>
568    </div>
569  );
570}
571 
572const demoCss = `
573:where(.fd-dtd,.fd-dtd *){box-sizing:border-box;margin:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;list-style:none;border:0;background:none}
574:where(.fd-dtd,.fd-dtd *)::before,:where(.fd-dtd,.fd-dtd *)::after{box-sizing:border-box}
575:where(.fd-dtd svg){display:block;flex-shrink:0}
576:where(.fd-dtd button,.fd-dtd input){appearance:none;-webkit-appearance:none;outline:0;border-radius:0}
577.fd-dtd{--fd-ease-out:cubic-bezier(.22,1,.36,1);--fd-spring:cubic-bezier(.34,1.56,.64,1);
578  --d-bg:#F6F6F8;--d-fg:#0B0B0F;--d-mut:#6B6B76;--d-line:rgba(11,11,15,.08);--d-card:#fff;--d-accent:#4F46E5;--d-on:#fff;--d-ring:rgba(79,70,229,.45);
579  min-height:100vh;background:var(--d-bg);color:var(--d-fg);font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
580.fd-dtd[data-fd-theme="dark"]{--d-bg:#0A0A0D;--d-fg:#F2F2F5;--d-mut:#9A9AA6;--d-line:rgba(255,255,255,.08);--d-card:#101014;--d-accent:#818CF8;--d-on:#0B0B0F;--d-ring:rgba(129,140,248,.55)}
581.fd-dtd-top{display:flex;align-items:center;gap:32px;height:56px;padding:0 clamp(16px,3vw,32px);background:var(--d-card);box-shadow:inset 0 -1px 0 var(--d-line)}
582.fd-dtd-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.02em}
583.fd-dtd-logo{width:20px;height:20px;border-radius:6px;background:conic-gradient(from 210deg,var(--d-accent),#38BDF8,var(--d-accent))}
584.fd-dtd-nav{display:flex;gap:4px;margin-right:auto}
585.fd-dtd-nav a{padding:6px 12px;border-radius:8px;font-weight:500;color:var(--d-mut);transition:background-color 120ms,color 120ms}
586.fd-dtd-nav a:hover{color:var(--d-fg);background:var(--d-line)}.fd-dtd-nav a[aria-current]{color:var(--d-fg);background:var(--d-line)}
587.fd-dtd a:focus-visible,.fd-dtd-theme:focus-visible,.fd-dtd-btn:focus-visible{outline:2px solid var(--d-ring);outline-offset:2px}
588.fd-dtd-theme{cursor:pointer;height:32px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--d-line);font-size:13px;font-weight:500;color:var(--d-mut);margin-left:auto}.fd-dtd-theme:hover{color:var(--d-fg)}
589.fd-dtd-main{max-width:1080px;margin:0 auto;padding:32px clamp(16px,3vw,32px) 56px}
590.fd-dtd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
591.fd-dtd-head h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.025em}
592.fd-dtd-head p{margin-top:4px;color:var(--d-mut)}
593.fd-dtd-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;cursor:pointer;background:var(--d-card);box-shadow:0 0 0 1px var(--d-line),0 1px 2px rgba(11,11,15,.05);font-size:13px;font-weight:500;line-height:1;transition:transform 240ms var(--fd-spring),box-shadow 120ms}
594.fd-dtd-btn:active{transform:scale(.97)}.fd-dtd-btn:disabled{opacity:.6;cursor:default}
595@media (hover:hover){.fd-dtd-btn:hover:not(:disabled){box-shadow:0 0 0 1px rgba(11,11,15,.2),0 1px 2px rgba(11,11,15,.06)}}
596.fd-dtd-primary{background:var(--d-fg);color:var(--d-bg);box-shadow:0 1px 2px rgba(11,11,15,.2)}
597.fd-dtd-spin{animation:fd-dtd-rot .8s linear infinite}
598@keyframes fd-dtd-rot{to{transform:rotate(360deg)}}
599.fd-dtd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
600.fd-dtd-stats>div{padding:16px 20px;border-radius:14px;background:var(--d-card);box-shadow:0 0 0 1px var(--d-line)}
601.fd-dtd-stats dt{font-size:12px;line-height:16px;color:var(--d-mut);font-weight:500}
602.fd-dtd-stats dd{margin-top:6px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
603.fd-dtd-bar{display:flex;gap:8px;margin-bottom:12px}
604.fd-dtd-search{position:relative;flex:1;max-width:380px;display:block}
605.fd-dtd-search svg{position:absolute;left:12px;top:10px;color:var(--d-mut);pointer-events:none}
606.fd-dtd-search input{width:100%;height:36px;padding:0 12px 0 36px;border-radius:10px;background:var(--d-card);box-shadow:0 0 0 1px var(--d-line);font-size:14px;color:var(--d-fg);transition:box-shadow 120ms}
607.fd-dtd-search input::placeholder{color:var(--d-mut)}
608.fd-dtd-search input:focus-visible{box-shadow:0 0 0 1.5px var(--d-accent),0 0 0 4px var(--d-ring)}
609.fd-dtd-merch{display:flex;align-items:center;gap:12px;min-width:0}
610.fd-dtd-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;font-size:13px;font-weight:600;color:hsl(var(--h) 55% 32%);background:hsl(var(--h) 80% 93%);box-shadow:inset 0 0 0 1px hsl(var(--h) 60% 50% / .15)}
611.fd-dtd[data-fd-theme="dark"] .fd-dtd-av{color:hsl(var(--h) 85% 80%);background:hsl(var(--h) 40% 20%)}
612.fd-dtd-mt{display:flex;flex-direction:column;min-width:0}
613.fd-dtd-mt b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
614.fd-dtd-mt small{font-size:12px;line-height:16px;color:var(--d-mut)}
615.fd-dtd-mut{color:var(--d-mut)}
616.fd-dtd-amt{font-weight:500;font-variant-numeric:tabular-nums}.fd-dtd-amt[data-pos]{color:#15803D}
617.fd-dtd[data-fd-theme="dark"] .fd-dtd-amt[data-pos]{color:#4ADE80}
618.fd-dtd-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1;--c:#15803D;color:var(--c);background:color-mix(in srgb,var(--c) 11%,transparent)}
619.fd-dtd-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
620.fd-dtd-pill[data-s="pending"]{--c:#B45309}.fd-dtd-pill[data-s="failed"]{--c:#C2271B}.fd-dtd-pill[data-s="refunded"]{--c:#52525B}
621.fd-dtd[data-fd-theme="dark"] .fd-dtd-pill{--c:#4ADE80}.fd-dtd[data-fd-theme="dark"] .fd-dtd-pill[data-s="pending"]{--c:#FBBF24}.fd-dtd[data-fd-theme="dark"] .fd-dtd-pill[data-s="failed"]{--c:#FF8A7A}.fd-dtd[data-fd-theme="dark"] .fd-dtd-pill[data-s="refunded"]{--c:#A1A1AA}
622.fd-dtd-nr{display:none}
623@container (max-width:680px){.fd-dtd-wd{display:none}.fd-dtd-mt small.fd-dtd-nr{display:block;height:auto;padding:0;background:none;font-size:12px;line-height:16px;font-weight:400}}
624.fd-dtd-note{min-height:20px;margin-top:12px;font-size:13px;color:var(--d-mut)}
625@media (max-width:640px){.fd-dtd-nav{display:none}.fd-dtd-stats{grid-template-columns:1fr 1fr}.fd-dtd-stats>div:last-child{display:none}.fd-dtd-bar{flex-wrap:wrap}.fd-dtd-search{max-width:none;flex-basis:100%}.fd-dtd-top{gap:12px}}
626`;