@memobit/libs 3.0.0 → 3.1.1

package/dist/components/CopyButton/CopyButton2.js

@@ -0,0 +1,48 @@
+import './CopyButton.css';
+import { Button as T } from "../Button/Button2.js";
+/* empty css           */
+import { useEffect as S, useRef as R, useState as k } from "react";
+import { jsx as v } from "react/jsx-runtime";
+var E = async (o) => {
+  if (navigator.clipboard?.writeText) try {
+    await navigator.clipboard.writeText(o);
+    return;
+  } catch {
+  }
+  const t = document.createElement("textarea");
+  t.value = o, t.setAttribute("readonly", ""), t.style.position = "fixed", t.style.top = "0", t.style.left = "-9999px", document.body.appendChild(t), t.focus(), t.select(), t.setSelectionRange(0, o.length);
+  try {
+    if (!document.execCommand("copy")) throw new Error("Copy command failed.");
+  } finally {
+    document.body.removeChild(t);
+  }
+}, L = ({ children: o, className: t = "", copiedLabel: u = "Copied", disabled: l = !1, errorLabel: p = "Copy failed", iconOnly: i = !1, label: m = "Copy", onCopy: y, onError: f, resetDelay: b = 1800, size: h = "medium", title: w, value: a, variant: c = "ghost" }) => {
+  const [e, n] = k("idle"), r = R(null);
+  S(() => () => {
+    r.current && window.clearTimeout(r.current);
+  }, []);
+  const s = () => {
+    r.current && window.clearTimeout(r.current), r.current = window.setTimeout(() => n("idle"), b);
+  }, C = async () => {
+    try {
+      await E(a), n("copied"), s(), y?.(a);
+    } catch (x) {
+      n("error"), s(), f?.(x);
+    }
+  }, d = e === "copied" ? u : e === "error" ? p : m, g = e === "copied" && c === "ghost" ? "success" : e === "error" && c === "ghost" ? "danger" : c;
+  return /* @__PURE__ */ v(T, {
+    className: `copy-button copy-button--${e} ${i ? "copy-button--icon-only" : ""} ${t}`,
+    disabled: l,
+    icon: e === "copied" ? "checkmark" : "clipboard",
+    iconVariant: e === "error" ? "danger" : e === "copied" ? "success" : "default",
+    onClick: C,
+    size: h,
+    title: w || d,
+    type: "button",
+    variant: g,
+    children: i ? void 0 : o || d
+  });
+};
+export {
+  L as CopyButton
+};

package/dist/components/CountryWithFlag/CountryWithFlag.css

@@ -0,0 +1 @@
+.country-with-flag{align-items:center;gap:var(--spacing-8);display:inline-flex}.country-with-flag__label{color:var(--body-color);font-weight:var(--font-weight-normal);line-height:var(--line-height-none);white-space:nowrap}.country-with-flag--xxs .country-with-flag__label{font-size:var(--font-size-xxs)}.country-with-flag--xs .country-with-flag__label{font-size:var(--font-size-xs)}.country-with-flag--sm .country-with-flag__label{font-size:var(--font-size-sm)}.country-with-flag--md .country-with-flag__label{font-size:var(--font-size-md)}.country-with-flag--lg .country-with-flag__label{font-size:var(--font-size-lg)}.country-with-flag--xl .country-with-flag__label{font-size:var(--font-size-xl)}.country-with-flag--xxl .country-with-flag__label{font-size:var(--font-size-xxl)}

package/dist/components/CountryWithFlag/CountryWithFlag2.js

@@ -0,0 +1,21 @@
+import './CountryWithFlag.css';
+import { Flag as m } from "../Flag/Flag2.js";
+/* empty css                */
+import "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var h = ({ code: r, label: l, size: t = "md", className: o = "" }) => {
+  const i = l || r?.toUpperCase();
+  return /* @__PURE__ */ s("div", {
+    className: `country-with-flag country-with-flag--${t} ${o}`,
+    children: [/* @__PURE__ */ a(m, {
+      code: r,
+      size: t
+    }), /* @__PURE__ */ a("span", {
+      className: "country-with-flag__label",
+      children: i
+    })]
+  });
+};
+export {
+  h as CountryWithFlag
+};

package/dist/components/DataView/DataView.CardView.js

@@ -0,0 +1,189 @@
+import { Icon as v } from "../Icon/Icon2.js";
+import { Tooltip as O } from "../Tooltip/Tooltip2.js";
+import { Checkbox as z } from "../Checkbox/Checkbox2.js";
+import { EmptyState as L } from "../EmptyState/EmptyState2.js";
+import { TimelineMobileSeparator as Q, calculateTimelineMarkers as X } from "../TimelineMarkers/TimelineMarkers2.js";
+import Y, { useMemo as M } from "react";
+import { Fragment as R, jsx as a, jsxs as c } from "react/jsx-runtime";
+var la = [
+  15,
+  30,
+  50,
+  100,
+  250,
+  500
+], oa = (t) => typeof t.header == "string" ? t.header : t.key, W = (t) => typeof t == "number" ? `${t}px` : t, aa = (t) => /* @__PURE__ */ c("span", {
+  className: "data-view__column-label",
+  children: [t.icon && /* @__PURE__ */ a(v, {
+    className: "data-view__column-icon",
+    name: t.icon,
+    size: "sm",
+    variant: "muted"
+  }), /* @__PURE__ */ a("span", { children: t.header })]
+}), ea = (t, l) => {
+  const h = t.cellIcon?.(l), n = t.accessor ? t.accessor(l) : l[t.key];
+  return h ? /* @__PURE__ */ c("span", {
+    className: "data-view__cell-with-icon",
+    children: [/* @__PURE__ */ a(v, {
+      className: "data-view__cell-icon",
+      name: h
+    }), /* @__PURE__ */ a("span", { children: n })]
+  }) : n;
+};
+function _a({ data: t, columns: l, rowKey: h, card: n, actions: g, timeline: o, onRowClick: _, rowHref: j, rowClassName: D, empty: r, selectable: w, selectedIds: V = [], pinnedIds: $, onToggleSelect: p, cardMaxWidth: C, isMobile: G = !1, groups: I, showGroupCount: T = !0, collapsible: N = !1, collapsedGroups: U, onToggleGroup: Z }) {
+  const P = l.filter((e) => !e.hideInCard && !(G && e.hideInMobile)), q = M(() => new Set($ ?? []), [$]), S = `data-view__cards${C !== void 0 ? " data-view__cards--grid" : ""}`, A = C !== void 0 ? { "--data-view-card-max-width": W(C) } : void 0, B = M(() => o ? X(t.map((e) => ({
+    id: o.idAccessor(e),
+    date: o.dateAccessor(e)
+  })), o.granularity) : /* @__PURE__ */ new Map(), [t, o]);
+  if (t.length === 0)
+    return r ? /* @__PURE__ */ a(L, {
+      title: r.title,
+      description: r.description,
+      icon: r.icon,
+      primary: r.primary,
+      secondary: r.secondary
+    }) : /* @__PURE__ */ a(L, { title: "No data available" });
+  const x = (e, s) => {
+    const u = B.get(s), d = h(e, s), m = w && V.includes(d), f = q.has(d), y = j?.(e), H = !!_ || !!y, b = n?.accentColor?.(e), E = `data-view__card ${H ? "data-view__card--clickable" : ""} ${m ? "data-view__card--selected" : ""} ${f ? "data-view__card--pinned" : ""} ${b ? "data-view__card--accent" : ""} ${D?.(e) || ""}`, F = b ? { "--data-view-card-accent-color": b } : void 0, J = (i) => {
+      i.metaKey || i.ctrlKey || i.shiftKey || i.altKey || i.button !== 0 || _ && (i.preventDefault(), _(e, i));
+    }, K = /* @__PURE__ */ c(R, { children: [
+      f && /* @__PURE__ */ a(O, {
+        title: "Pinned",
+        children: /* @__PURE__ */ a("span", {
+          className: "data-view__card-pin",
+          children: /* @__PURE__ */ a(v, {
+            name: "pin",
+            size: "sm"
+          })
+        })
+      }),
+      w && p && !n && /* @__PURE__ */ a("div", {
+        className: "data-view__card-select",
+        onClick: (i) => i.stopPropagation(),
+        children: /* @__PURE__ */ a(z, {
+          checked: m || !1,
+          onChange: (i) => p(d, i)
+        })
+      }),
+      n?.media && /* @__PURE__ */ a("div", {
+        className: "data-view__card-media",
+        children: n.media(e)
+      }),
+      n && (() => {
+        const i = n.icon?.(e);
+        return /* @__PURE__ */ c("div", {
+          className: "data-view__card-header",
+          children: [/* @__PURE__ */ c("div", {
+            className: "data-view__card-title-row",
+            children: [/* @__PURE__ */ c("div", {
+              className: "data-view__card-title-line",
+              children: [
+                w && p && /* @__PURE__ */ a("div", {
+                  className: "data-view__card-select",
+                  onClick: (k) => k.stopPropagation(),
+                  children: /* @__PURE__ */ a(z, {
+                    checked: m || !1,
+                    onChange: (k) => p(d, k)
+                  })
+                }),
+                i && /* @__PURE__ */ a(v, {
+                  className: "data-view__card-icon",
+                  name: i
+                }),
+                /* @__PURE__ */ a("span", {
+                  className: "data-view__card-title",
+                  children: n.title(e)
+                })
+              ]
+            }), n.subtitle && /* @__PURE__ */ a("span", {
+              className: "data-view__card-subtitle",
+              children: n.subtitle(e)
+            })]
+          }), n.badges && /* @__PURE__ */ a("div", {
+            className: "data-view__card-badges",
+            children: n.badges(e)
+          })]
+        });
+      })(),
+      P.length > 0 && /* @__PURE__ */ a("div", {
+        className: "data-view__card-body",
+        children: P.map((i) => /* @__PURE__ */ c("div", {
+          className: "data-view__card-field",
+          children: [/* @__PURE__ */ a("span", {
+            className: "data-view__card-label",
+            children: aa(i)
+          }), /* @__PURE__ */ a("span", {
+            className: "data-view__card-value",
+            children: ea(i, e)
+          })]
+        }, i.key))
+      }),
+      g && /* @__PURE__ */ a("div", {
+        className: "data-view__card-actions",
+        onClick: (i) => i.stopPropagation(),
+        children: g(e)
+      })
+    ] });
+    return /* @__PURE__ */ c(Y.Fragment, { children: [u && /* @__PURE__ */ a(Q, { marker: u }), y ? /* @__PURE__ */ a("a", {
+      className: E,
+      href: y,
+      style: F,
+      onClick: J,
+      children: K
+    }) : /* @__PURE__ */ a("div", {
+      className: E,
+      style: F,
+      onClick: _ ? (i) => _(e, i) : void 0,
+      children: K
+    })] }, d);
+  };
+  if (I) {
+    let e = 0;
+    return /* @__PURE__ */ a("div", {
+      className: "data-view__groups",
+      children: I.map((s) => {
+        const u = e;
+        e += s.items.length;
+        const d = N && U?.has(s.key);
+        return /* @__PURE__ */ c("section", {
+          className: "data-view__group",
+          children: [/* @__PURE__ */ c("header", {
+            className: `data-view__group-header${N ? " data-view__group-header--collapsible" : ""}`,
+            onClick: N ? () => Z?.(s.key) : void 0,
+            children: [
+              /* @__PURE__ */ a("span", {
+                className: "data-view__group-label",
+                children: s.label
+              }),
+              T && /* @__PURE__ */ a("span", {
+                className: "data-view__group-count",
+                children: s.items.length === s.totalCount ? s.totalCount : `${s.items.length} of ${s.totalCount}`
+              }),
+              N && /* @__PURE__ */ a(v, {
+                className: "data-view__group-chevron",
+                name: d ? "caret-down" : "caret-up",
+                size: "sm"
+              })
+            ]
+          }), !d && /* @__PURE__ */ a("div", {
+            className: S,
+            style: A,
+            children: s.items.map((m, f) => x(m, u + f))
+          })]
+        }, s.key ?? "__null__");
+      })
+    });
+  }
+  return /* @__PURE__ */ a("div", {
+    className: S,
+    style: A,
+    children: t.map((e, s) => x(e, s))
+  });
+}
+export {
+  _a as CardView,
+  la as DEFAULT_PAGE_SIZES,
+  oa as getColumnLabel,
+  ea as renderCellContent,
+  aa as renderColumnLabel
+};

package/dist/components/DataView/DataView.ColumnSelector.js

@@ -0,0 +1,51 @@
+import { Icon as h } from "../Icon/Icon2.js";
+import { Button as b } from "../Button/Button2.js";
+import { Checkbox as p } from "../Checkbox/Checkbox2.js";
+import { Popover as v } from "../Popover/Popover2.js";
+import { useRef as _, useState as C } from "react";
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+function j({ config: i }) {
+  const { options: s, selectedKeys: t, onChange: r, label: m = "Columns" } = i, a = _(null), [u, c] = C(!1);
+  if (s.length === 0) return null;
+  const d = (e, n) => {
+    if (n) {
+      if (t.includes(e)) return;
+      r([...t, e]);
+    } else r(t.filter((f) => f !== e));
+  };
+  return /* @__PURE__ */ o("div", {
+    className: "data-view__column-selector",
+    children: [/* @__PURE__ */ l(b, {
+      ref: a,
+      variant: "ghost",
+      size: "small",
+      icon: "table",
+      onClick: () => c((e) => !e),
+      children: /* @__PURE__ */ o("span", {
+        className: "data-view__column-selector-label",
+        children: [m, /* @__PURE__ */ l(h, {
+          name: "caret-down",
+          size: "sm"
+        })]
+      })
+    }), /* @__PURE__ */ l(v, {
+      visible: u,
+      onClose: () => c(!1),
+      anchorEl: a.current,
+      placement: "bottom",
+      children: /* @__PURE__ */ l("div", {
+        className: "data-view__column-selector-list",
+        children: s.map((e) => /* @__PURE__ */ o("label", {
+          className: "data-view__column-selector-item",
+          children: [/* @__PURE__ */ l(p, {
+            checked: t.includes(e.key),
+            onChange: (n) => d(e.key, n)
+          }), /* @__PURE__ */ l("span", { children: e.label })]
+        }, e.key))
+      })
+    })]
+  });
+}
+export {
+  j as DataViewColumnSelector
+};

package/dist/components/DataView/DataView.MiniSort.js

@@ -0,0 +1,25 @@
+import { getColumnLabel as a } from "./DataView.CardView.js";
+import { MiniSort as m } from "../MiniSort/MiniSort2.js";
+import { jsx as s } from "react/jsx-runtime";
+function b({ columns: i, config: l, sortDirection: t, sortKey: c, onSort: e }) {
+  const r = l?.columns ?? l?.column ?? [];
+  return r.length === 0 ? null : /* @__PURE__ */ s(m, {
+    items: r.map((n) => {
+      const o = i.find((u) => u.key === n.column);
+      return {
+        value: n.column,
+        label: n.label ?? (o ? a(o) : n.column),
+        icon: n.icon ?? o?.icon,
+        direction: n.direction ?? "asc",
+        disabled: !o
+      };
+    }),
+    sortKey: c,
+    sortDirection: t,
+    onSort: e,
+    align: l?.align ?? "left"
+  });
+}
+export {
+  b as DataViewMiniSort
+};

package/dist/components/DataView/DataView.css

@@ -0,0 +1 @@
+.data-view{gap:var(--spacing-16);flex-direction:column;width:100%;display:flex}.data-view__results-row{align-items:center;gap:var(--spacing-8);display:flex}.data-view__top-row{align-items:center;gap:var(--spacing-12);flex-wrap:wrap;display:flex}.data-view__top-row--mini-center{justify-content:center}.data-view__results-count{color:var(--body-sub-title-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.data-view__select-all{align-items:center;gap:var(--spacing-6);color:var(--body-sub-title-color);font-size:var(--font-size-sm);cursor:pointer;margin-left:auto;display:inline-flex}.data-view__select-all:hover{color:var(--body-color)}.data-view__column-selector{margin-left:auto;position:relative}.data-view__column-selector-label{align-items:center;gap:var(--spacing-6);display:inline-flex}.data-view__column-selector-list{gap:var(--spacing-4);padding:var(--spacing-8);flex-direction:column;min-width:180px;display:flex}.data-view__column-selector-item{align-items:center;gap:var(--spacing-8);padding:var(--spacing-6) var(--spacing-8);border-radius:var(--radius-sm,var(--radius));cursor:pointer;font-size:var(--font-size-sm);color:var(--body-color);display:flex}.data-view__column-selector-item:hover{background:var(--card-background-accent-color)}@media (width<=768px){.data-view .mini-sort{display:none}}.data-view__wrapper{border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);background:var(--card-background-color);-webkit-backdrop-filter:var(--card-backdrop-filter,none);box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow));overflow-x:auto}.data-view__wrapper--empty{padding:var(--spacing-24)}.data-view table{border-collapse:collapse;width:100%}.data-view th,.data-view td{padding:var(--spacing-12) var(--spacing-16);text-align:left;border-bottom:var(--spacing-1) solid var(--delimiter-color)}.data-view__cell-with-icon{align-items:center;gap:var(--spacing-8);display:inline-flex}.data-view__cell-icon{flex-shrink:0}.data-view th{background:var(--card-background-accent-color);color:var(--body-color);font-weight:var(--font-weight-semibold);-webkit-user-select:none;user-select:none;position:relative}.data-view tr{position:relative}.data-view tr.is-selected{background:var(--card-background-accent-color)}.data-view .is-sortable{cursor:pointer}.data-view .is-sortable:hover{background:color-mix(in srgb, var(--body-accent-color) 8%, var(--card-background-accent-color))}.data-view .is-sortable:hover .data-view__sort-icon--unsorted{opacity:.6}.data-view__th-content{align-items:center;gap:var(--spacing-8);justify-content:space-between;display:flex}.data-view__column-label{align-items:center;gap:var(--spacing-6);min-width:0;display:inline-flex}.data-view__column-icon{flex-shrink:0}.data-view__sort-icon{font-size:var(--font-size-xs);transition:color var(--transition-fast), opacity var(--transition-fast);flex-shrink:0}.data-view__sort-icon--unsorted{color:var(--body-color-muted);opacity:.35}.data-view__sort-icon--asc,.data-view__sort-icon--desc{color:var(--body-accent-color);opacity:1;font-weight:var(--font-weight-bold)}.data-view__resizer{cursor:col-resize;width:6px;height:100%;position:absolute;top:0;right:0}.data-view__filter-row{background:var(--card-background-color);border-bottom:var(--spacing-2) solid var(--delimiter-color)}.data-view__filter-cell{padding:var(--spacing-8) var(--spacing-12);background:var(--card-background-color);font-weight:var(--font-weight-normal);vertical-align:middle}.data-view__filter-cell--spacer{min-width:0}.data-view__filter-cell .input-text-wrapper,.data-view__filter-cell .input-number-wrapper,.data-view__filter-cell .multiselect-container{margin:0}.data-view__filter-cell input{font-size:var(--font-size-sm)}.data-view__filter-bar{gap:var(--spacing-12);padding:var(--spacing-12);background:var(--card-background-accent-color);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);flex-wrap:wrap;display:flex}.data-view__filter-bar-item{flex:1;min-width:140px}.data-view__checkbox{text-align:center;width:40px}.data-view__checkbox .checkbox-wrapper{justify-content:center}.data-view__empty{text-align:center;padding:var(--spacing-24);color:var(--body-color)}.data-view__row--clickable{cursor:pointer}.data-view__row--clickable:hover{background:var(--card-background-accent-color)}.data-view__row--pinned{background:color-mix(in srgb, var(--body-accent-color) 6%, var(--card-background-color))}.data-view__row--pinned:hover{background:color-mix(in srgb, var(--body-accent-color) 10%, var(--card-background-color))}.data-view__row--pinned>td:first-of-type{box-shadow:inset 3px 0 0 0 var(--body-accent-color)}.data-view__pin-indicator{color:var(--body-accent-color);margin-right:var(--spacing-6);vertical-align:middle}.data-view__row-detail{background:var(--card-background-accent-color);cursor:default}.data-view__row-detail:hover{background:var(--card-background-accent-color)}.data-view__row-detail>td{padding:var(--spacing-8) var(--spacing-12)}.data-view__timeline-cell{border:none;width:0;padding:0;position:relative;overflow:visible}.data-view__table-actions{gap:var(--spacing-8);display:flex}.data-view--cards{gap:var(--spacing-16)}@media (width<=768px){.data-view--cards{gap:var(--spacing-8)}}.data-view__card-sort-bar{align-items:flex-end;gap:var(--spacing-8);padding:var(--spacing-12);background:var(--card-background-accent-color);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);display:flex}.data-view__card-sort-field{flex:1;min-width:0}.data-view__card-sort-direction{min-width:var(--spacing-40);min-height:var(--spacing-40);flex-shrink:0;justify-content:center}.data-view__cards{--data-view-card-max-width:var(--spacing-300);gap:var(--spacing-12);flex-direction:column;display:flex}.data-view__cards--grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--data-view-card-max-width)), 1fr));align-items:stretch;display:grid}.data-view__card{background:var(--card-background-color);border:var(--spacing-1) solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);-webkit-backdrop-filter:var(--card-backdrop-filter,none);box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow));gap:var(--spacing-12);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);color:inherit;flex-direction:column;text-decoration:none;display:flex;position:relative}.data-view__card:hover{box-shadow:var(--card-surface-box-shadow);transform:translateY(-2px)}.data-view__card--clickable{cursor:pointer}.data-view__card--clickable:hover{border-color:var(--body-accent-color)}.data-view__card--selected{border-color:var(--body-accent-color);background:var(--card-background-accent-color)}.data-view__card--accent{box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow)), inset 3px 0 0 0 var(--data-view-card-accent-color)}.data-view__card--pinned{border-color:var(--body-accent-color);box-shadow:var(--card-surface-box-shadow,var(--card-box-shadow)), inset 3px 0 0 0 var(--body-accent-color)}.data-view__card-pin{top:var(--spacing-8);right:var(--spacing-8);width:var(--spacing-24);height:var(--spacing-24);background:var(--body-accent-color);color:var(--card-background-color);z-index:1;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute}.data-view__card-media{margin:calc(var(--spacing-16) * -1) calc(var(--spacing-16) * -1) 0;aspect-ratio:1;background:var(--card-background-accent-color);border-radius:var(--radius) var(--radius) 0 0;justify-content:center;align-items:center;display:flex;overflow:hidden}.data-view__card-media img{object-fit:cover;width:100%;height:100%;display:block}.data-view__card-header{justify-content:space-between;align-items:flex-start;gap:var(--spacing-8);display:flex}@media (width<=768px){.data-view__card-header{flex-direction:column}}.data-view__card-title-row{gap:var(--spacing-4);flex-direction:column;min-width:0;display:flex}.data-view__card-title-line{align-items:center;gap:var(--spacing-8);min-width:0;display:flex}.data-view__card-select{flex-shrink:0;display:flex}.data-view__card-icon{flex-shrink:0}.data-view__card-title{color:var(--card-title-color,var(--body-color-accent));font-family:var(--card-title-font-family,var(--font-family,sans-serif));font-size:var(--card-title-font-size,var(--font-size-md));font-style:var(--card-title-font-style,normal);font-weight:var(--card-title-font-weight,var(--font-weight-semibold));letter-spacing:var(--card-title-letter-spacing,normal);text-transform:var(--card-title-text-transform,none);overflow-wrap:break-word;word-break:break-word}.data-view__card-subtitle{font-size:var(--font-size-sm);color:var(--body-color)}.data-view__card-badges{gap:var(--spacing-4);flex-wrap:wrap;flex-shrink:0;display:flex}.data-view__card-body{gap:var(--spacing-8);flex-direction:column;display:flex}.data-view__card-field{justify-content:space-between;align-items:center;gap:var(--spacing-8);display:flex}.data-view__card-label{font-size:var(--font-size-sm);color:var(--body-color)}.data-view__card-value{font-size:var(--font-size-sm);color:var(--body-color-accent);font-weight:var(--font-weight-medium);text-align:right;overflow-wrap:break-word;word-break:break-word;min-width:0}.data-view__card-actions{gap:var(--spacing-8);padding-top:var(--spacing-8);border-top:var(--spacing-1) solid var(--delimiter-color);justify-content:flex-end;display:flex}.timeline-markers .data-view__wrapper{overflow:visible}.data-view__groups{gap:var(--spacing-24);flex-direction:column;display:flex}.data-view__group{gap:var(--spacing-12);flex-direction:column;display:flex}.data-view__group-header{align-items:center;gap:var(--spacing-12);padding:0 var(--spacing-8);display:flex}.data-view__group-header--collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.data-view__group-header--collapsible:hover .data-view__group-label{color:var(--body-color-accent)}.data-view__group-label{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--body-accent-color);transition:color var(--transition-fast)}.data-view__group-count{min-width:24px;height:24px;padding:0 var(--spacing-8);background-color:var(--card-background-accent-color);color:var(--body-color);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:12px;justify-content:center;align-items:center;display:inline-flex}.data-view__group-chevron{color:var(--body-color-muted);flex-shrink:0;margin-left:auto}.data-view__group-row,.data-view__group-row:hover{background:var(--card-background-accent-color)}.data-view__group-row--collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.data-view__group-row--collapsible:hover{background:color-mix(in srgb, var(--body-accent-color) 8%, var(--card-background-accent-color))}.data-view__group-cell{padding:var(--spacing-12) var(--spacing-16);font-weight:var(--font-weight-semibold);align-items:center;display:flex}.data-view__group-cell .data-view__group-label{font-size:var(--font-size-md);margin-right:var(--spacing-12);transition:color var(--transition-fast)}.data-view__group-cell .data-view__group-chevron{margin-left:auto}