@acronis-platform/ui-react 0.60.0 → 0.62.0

package/dist/components/ui/timeline/timeline.js

@@ -1,175 +1,239 @@
-import { jsxs as x, jsx as t } from "react/jsx-runtime";
-import * as a from "react";
-import { cva as C } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as e } from "../../../lib/utils.js";
-const b = a.createContext({
-  size: "medium",
-  density: "default"
-}), z = C("flex flex-col", {
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
+import { ChevronDownIcon as W } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as X } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as O } from "../../../lib/utils.js";
+import { Avatar as Y, AvatarFallback as Z } from "../avatar/avatar.js";
+import { Card as ee } from "../card/card.js";
+import { ButtonIcon as ae } from "../button-icon/button-icon.js";
+const G = "var(--ui-border-on-surface-border)", te = "var(--ui-gap-16)", p = "var(--ui-avatar-global-avatar-size)", P = "calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))", V = r.createContext({
+  variant: "default"
+}), _ = r.createContext(null), M = (u, m) => String(u.key ?? m), ne = X("flex flex-col", {
   variants: {
-    size: {
-      small: "text-xs",
-      medium: "text-sm"
-    },
-    density: {
-      compact: "",
-      default: ""
+    variant: {
+      default: "",
+      tree: ""
     }
   },
   defaultVariants: {
-    size: "medium",
-    density: "default"
+    variant: "default"
   }
-}), p = a.forwardRef(
-  ({ className: d, size: s, density: n, children: o, ...u }, r) => {
-    const i = a.useMemo(
-      () => ({ size: s ?? "medium", density: n ?? "default" }),
-      [s, n]
-    );
-    return /* @__PURE__ */ t(b.Provider, { value: i, children: /* @__PURE__ */ t(
+}), D = r.forwardRef(
+  ({ className: u, variant: m, children: g, ...T }, C) => {
+    const o = m ?? "default", k = r.useMemo(() => ({ variant: o }), [o]), [$, f] = r.useState(
+      {}
+    ), h = r.Children.toArray(g).filter(
+      r.isValidElement
+    ), y = (e) => {
+      var a;
+      return ((a = h[e]) == null ? void 0 : a.props.level) ?? 1;
+    }, z = (e) => e + 1 < h.length && y(e + 1) > y(e), d = [];
+    let x = null;
+    h.forEach((e, a) => {
+      const t = e.props.level ?? 1;
+      if (x !== null && t > x) return;
+      x = null;
+      const v = e.props.expanded !== void 0, s = v ? !!e.props.expanded : $[M(e, a)] ?? e.props.defaultExpanded ?? !0, i = o === "tree" && z(a);
+      i && !s && (x = t), d.push({
+        element: e,
+        key: M(e, a),
+        level: t,
+        expanded: s,
+        isControlled: v,
+        hasToggle: i
+      });
+    });
+    const E = (e) => {
+      const a = d[e];
+      if (a == null || a.level <= 1) return !1;
+      const t = d[e - 1];
+      return a.element.props.branchStart ?? (t != null && a.level > t.level);
+    }, b = d.map((e, a) => {
+      const t = d[a + 1], v = t != null && (t.level > e.level ? (
+        // A deeper row bridges the gap with its own elbow, which starts exactly
+        // at this row's marker centre — so the line lands only if that elbow is
+        // actually drawn. It normally is, since a level jump derives one; it is
+        // not when the consumer refuses it with `branchStart={false}`, and then
+        // this line has nothing to meet.
+        E(a + 1)
+      ) : t.level === e.level && // Same level, but a `tree` row that reserves a disclosure button has a
+      // wider marker column than one that doesn't — so their markers sit at
+      // different offsets and a vertical line between them can't be straight.
+      // Figma only ever shows homogeneous siblings, so skip the line instead
+      // of drawing a crooked one.
+      t.hasToggle === e.hasToggle);
+      return /* @__PURE__ */ n(
+        _.Provider,
+        {
+          value: {
+            expanded: e.expanded,
+            connector: e.element.props.connector ?? v,
+            elbow: E(a),
+            hasToggle: e.hasToggle,
+            onToggle: () => {
+              var i, R;
+              const s = !e.expanded;
+              (R = (i = e.element.props).onExpandedChange) == null || R.call(i, s), e.isControlled || f((S) => ({
+                ...S,
+                [e.key]: s
+              }));
+            }
+          },
+          children: e.element
+        },
+        e.key
+      );
+    });
+    return /* @__PURE__ */ n(V.Provider, { value: k, children: /* @__PURE__ */ n(
       "ol",
       {
-        ref: r,
-        "data-size": i.size,
-        "data-density": i.density,
-        className: e(
-          z({ size: s, density: n }),
-          // Hide the connector on the last item — nothing follows it.
-          "[&>li:last-child_[data-slot=timeline-connector]]:hidden",
-          d
+        ref: C,
+        "data-variant": o,
+        style: {
+          // The indent step is the widest marker column plus the gap: a
+          // `tree` row reserves the disclosure button even when a given row
+          // is a leaf, so every level lines up.
+          "--timeline-step": `calc(${o === "tree" ? `${P} + ${p}` : p} + ${te})`
+        },
+        className: O(
+          ne({ variant: o }),
+          "gap-[var(--ui-gap-16)]",
+          u
         ),
-        ...u,
-        children: o
+        ...T,
+        children: b
       }
     ) });
   }
 );
-p.displayName = "Timeline";
-const T = {
-  neutral: {
-    dot: "bg-[var(--ui-text-on-status-neutral)]",
-    ring: "border-[var(--ui-text-on-status-neutral)]",
-    ringColor: "ring-[var(--ui-text-on-status-neutral)]",
-    badge: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]"
-  },
-  info: {
-    dot: "bg-[var(--ui-text-on-status-info)]",
-    ring: "border-[var(--ui-text-on-status-info)]",
-    ringColor: "ring-[var(--ui-text-on-status-info)]",
-    badge: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]"
-  },
-  success: {
-    dot: "bg-[var(--ui-text-on-status-success)]",
-    ring: "border-[var(--ui-text-on-status-success)]",
-    ringColor: "ring-[var(--ui-text-on-status-success)]",
-    badge: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]"
-  },
-  warning: {
-    dot: "bg-[var(--ui-text-on-status-warning)]",
-    ring: "border-[var(--ui-text-on-status-warning)]",
-    ringColor: "ring-[var(--ui-text-on-status-warning)]",
-    badge: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]"
-  },
-  danger: {
-    dot: "bg-[var(--ui-text-on-status-danger)]",
-    ring: "border-[var(--ui-text-on-status-danger)]",
-    ringColor: "ring-[var(--ui-text-on-status-danger)]",
-    badge: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]"
-  },
-  critical: {
-    dot: "bg-[var(--ui-text-on-status-critical)]",
-    ring: "border-[var(--ui-text-on-status-critical)]",
-    ringColor: "ring-[var(--ui-text-on-status-critical)]",
-    badge: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
-  }
-}, y = { small: "size-2", medium: "size-2.5" }, E = { small: "size-6", medium: "size-7" }, _ = { small: 14, medium: 16 }, I = { compact: "pb-4", default: "pb-6" }, h = a.forwardRef(
+D.displayName = "Timeline";
+const B = r.forwardRef(
   ({
-    className: d,
-    timestamp: s,
-    title: n,
-    description: o,
-    status: u = "neutral",
-    icon: r,
-    metadata: i,
-    actions: v,
-    current: c = !1,
-    disabled: g = !1,
-    children: f,
-    ...N
-  }, k) => {
-    const { size: m, density: w } = a.useContext(b), l = T[u];
-    return /* @__PURE__ */ x(
+    className: u,
+    title: m,
+    timestamp: g,
+    tag: T,
+    description: C,
+    icon: o,
+    initials: k,
+    color: $ = "blue",
+    level: f = 1,
+    branchStart: h,
+    connector: y,
+    // Destructured only to keep them off the `<li>`: the root reads them from
+    // `element.props`, because it owns the disclosure state for the whole branch.
+    expanded: z,
+    defaultExpanded: d,
+    onExpandedChange: x,
+    // The two controls can sit in the same `<li>`, so their default names have to
+    // name their own action — a shared generic default would give one row two
+    // buttons that are indistinguishable to a screen reader.
+    toggleLabel: E = "Toggle nested events",
+    collapsibleBody: b = !1,
+    bodyExpanded: e,
+    defaultBodyExpanded: a = !0,
+    onBodyExpandedChange: t,
+    bodyToggleLabel: v = "Toggle event details",
+    children: s,
+    ...i
+  }, R) => {
+    const { variant: S } = r.useContext(V), l = r.useContext(_), [F, K] = r.useState(a), w = e ?? F, q = () => {
+      const N = !w;
+      t == null || t(N), e === void 0 && K(N);
+    }, A = (l == null ? void 0 : l.expanded) ?? !0, H = l ? l.connector : y ?? !1, L = l ? l.elbow : !!h && f > 1, I = S === "tree" && ((l == null ? void 0 : l.hasToggle) ?? !1), J = I ? `calc(${P} + ${p})` : p, j = (N, Q, U) => /* @__PURE__ */ n(
+      ae,
+      {
+        type: "button",
+        "aria-label": Q,
+        "aria-expanded": N,
+        onClick: U,
+        className: O(
+          "shrink-0 transition-transform",
+          !N && "ltr:-rotate-90 rtl:rotate-90"
+        ),
+        children: /* @__PURE__ */ n(W, {})
+      }
+    );
+    return /* @__PURE__ */ c(
       "li",
       {
-        ref: k,
-        "data-status": u,
-        "data-current": c || void 0,
-        "data-disabled": g || void 0,
-        "aria-disabled": g || void 0,
-        className: e(
-          "flex gap-3",
-          g && "opacity-60 pointer-events-none",
-          d
+        ref: R,
+        "data-level": f,
+        "data-branch-start": L || void 0,
+        "data-expanded": I ? A : void 0,
+        "data-body-expanded": b ? w : void 0,
+        style: {
+          "--timeline-indent": `calc(var(--timeline-step) * ${f - 1})`,
+          "--timeline-marker": J
+        },
+        className: O(
+          "relative flex items-start gap-[var(--ui-gap-16)]",
+          "ps-[var(--timeline-indent)]",
+          u
         ),
-        ...N,
+        ...i,
         children: [
-          /* @__PURE__ */ x("div", { className: "flex flex-col items-center", children: [
-            r != null ? /* @__PURE__ */ t(
-              "span",
-              {
-                "aria-hidden": !0,
-                className: e(
-                  "flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0",
-                  E[m],
-                  l.badge,
-                  // Ring the badge for a `current` item (same emphasis as the dot).
-                  c && e(
-                    "ring-2 ring-offset-2 ring-offset-background",
-                    l.ringColor
-                  )
-                ),
-                children: a.isValidElement(r) ? a.cloneElement(
-                  r,
-                  { size: _[m] }
-                ) : r
+          H && /* @__PURE__ */ n(
+            "span",
+            {
+              "data-slot": "timeline-connector",
+              "aria-hidden": !0,
+              className: "absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px",
+              style: {
+                insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${p} / 2)`,
+                backgroundColor: G
               }
-            ) : /* @__PURE__ */ t(
-              "span",
-              {
-                "aria-hidden": !0,
-                className: e(
-                  "mt-1 shrink-0 rounded-full",
-                  y[m],
-                  c ? e("border-2 bg-background", l.ring) : l.dot
-                )
+            }
+          ),
+          L && /* @__PURE__ */ n(
+            "span",
+            {
+              "data-slot": "timeline-elbow",
+              "aria-hidden": !0,
+              className: "absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s",
+              style: {
+                insetInlineStart: `calc(var(--timeline-indent) - ${p})`,
+                borderColor: G
               }
-            ),
-            /* @__PURE__ */ t(
-              "span",
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "relative flex shrink-0 items-center gap-[var(--ui-gap-8)]", children: [
+            I && j(A, E, () => l == null ? void 0 : l.onToggle()),
+            /* @__PURE__ */ n(
+              Y,
               {
-                "data-slot": "timeline-connector",
                 "aria-hidden": !0,
-                className: "mt-1 w-px flex-1 bg-border"
+                color: $,
+                className: "[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
+                children: o ?? (k ? /* @__PURE__ */ n(Z, { children: k }) : null)
               }
             )
           ] }),
-          /* @__PURE__ */ x("div", { className: e("min-w-0 flex-1", I[w]), children: [
-            s != null && /* @__PURE__ */ t("div", { className: "text-xs leading-tight text-muted-foreground", children: s }),
-            /* @__PURE__ */ t("div", { className: "font-medium leading-snug text-foreground", children: n }),
-            o != null && /* @__PURE__ */ t("div", { className: "mt-0.5 text-muted-foreground", children: o }),
-            i != null && /* @__PURE__ */ t("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: i }),
-            v != null && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: v }),
-            f != null && /* @__PURE__ */ t("div", { className: "mt-2", children: f })
+          /* @__PURE__ */ c(ee, { className: "min-w-0 flex-1 shadow-none", children: [
+            /* @__PURE__ */ c("div", { className: "flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2", children: [
+              /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ c("div", { className: "flex h-8 items-center gap-[var(--ui-gap-8)]", children: [
+                  /* @__PURE__ */ n("span", { className: "truncate text-base font-medium leading-6 text-foreground", children: m }),
+                  (T != null || g != null) && /* @__PURE__ */ c("div", { className: "flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]", children: [
+                    T,
+                    g != null && /* @__PURE__ */ n("span", { className: "whitespace-nowrap text-xs leading-4 text-muted-foreground", children: g })
+                  ] })
+                ] }),
+                C != null && /* @__PURE__ */ n("div", { className: "flex items-center pb-1", children: /* @__PURE__ */ n("span", { className: "truncate text-xs leading-4 text-muted-foreground", children: C }) })
+              ] }),
+              b && j(w, v, q)
+            ] }),
+            s != null && (!b || w) && /* @__PURE__ */ n("div", { className: "border-t border-border py-2", children: s })
           ] })
         ]
       }
     );
   }
 );
-h.displayName = "Timeline.Item";
-const S = Object.assign(p, { Item: h });
+B.displayName = "Timeline.Item";
+const ve = Object.assign(D, { Item: B });
 export {
-  S as Timeline,
-  h as TimelineItem
+  ve as Timeline,
+  B as TimelineItem
 };
 //# sourceMappingURL=timeline.js.map

package/dist/components/ui/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A presentational, chronological list of events — an activity feed / audit log\n// / status history. It owns structure, the connector line, markers, and the\n// timestamp/title/description hierarchy only; it never sorts, groups, fetches, or\n// interprets events, and it ships no domain event types or icons. Rendered as a\n// semantic ordered list (`<ol>`/`<li>`); the marker + connector are decorative.\n// Compose Tag / Link / Button / Accordion into the slots. Not a temporal chart —\n// use a Line / Area / Composed chart for that.\n\ntype TimelineSize = 'small' | 'medium';\ntype TimelineDensity = 'compact' | 'default';\n\ntype TimelineContextValue = {\n  size: TimelineSize;\n  density: TimelineDensity;\n};\n\nconst TimelineContext = React.createContext<TimelineContextValue>({\n  size: 'medium',\n  density: 'default',\n});\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'text-xs',\n      medium: 'text-sm',\n    },\n    density: {\n      compact: '',\n      default: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    density: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>,\n    VariantProps<typeof timelineVariants> {\n  /**\n   * `Timeline.Item`s — pass them as direct children (the connector auto-hides on\n   * the last one). Grouping/headings aren't supported as intervening children.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, size, density, children, ...props }, ref) => {\n    const resolved = React.useMemo(\n      () => ({ size: size ?? 'medium', density: density ?? 'default' }),\n      [size, density]\n    );\n    return (\n      <TimelineContext.Provider value={resolved}>\n        <ol\n          ref={ref}\n          data-size={resolved.size}\n          data-density={resolved.density}\n          className={cn(\n            timelineVariants({ size, density }),\n            // Hide the connector on the last item — nothing follows it.\n            '[&>li:last-child_[data-slot=timeline-connector]]:hidden',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineStatus =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'critical';\n\n// Marker colors mirror Metric / the design's status chips: a filled dot (or,\n// with an icon, a `-pressed` badge) in the status family. Neutral reads as the\n// muted foreground.\nconst STATUS_MARKER: Record<\n  TimelineStatus,\n  { dot: string; ring: string; ringColor: string; badge: string }\n> = {\n  neutral: {\n    dot: 'bg-[var(--ui-text-on-status-neutral)]',\n    ring: 'border-[var(--ui-text-on-status-neutral)]',\n    ringColor: 'ring-[var(--ui-text-on-status-neutral)]',\n    badge:\n      'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  },\n  info: {\n    dot: 'bg-[var(--ui-text-on-status-info)]',\n    ring: 'border-[var(--ui-text-on-status-info)]',\n    ringColor: 'ring-[var(--ui-text-on-status-info)]',\n    badge:\n      'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  },\n  success: {\n    dot: 'bg-[var(--ui-text-on-status-success)]',\n    ring: 'border-[var(--ui-text-on-status-success)]',\n    ringColor: 'ring-[var(--ui-text-on-status-success)]',\n    badge:\n      'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  },\n  warning: {\n    dot: 'bg-[var(--ui-text-on-status-warning)]',\n    ring: 'border-[var(--ui-text-on-status-warning)]',\n    ringColor: 'ring-[var(--ui-text-on-status-warning)]',\n    badge:\n      'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  },\n  danger: {\n    dot: 'bg-[var(--ui-text-on-status-danger)]',\n    ring: 'border-[var(--ui-text-on-status-danger)]',\n    ringColor: 'ring-[var(--ui-text-on-status-danger)]',\n    badge:\n      'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  },\n  critical: {\n    dot: 'bg-[var(--ui-text-on-status-critical)]',\n    ring: 'border-[var(--ui-text-on-status-critical)]',\n    ringColor: 'ring-[var(--ui-text-on-status-critical)]',\n    badge:\n      'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n  },\n};\n\nconst DOT_SIZE = { small: 'size-2', medium: 'size-2.5' } as const;\nconst BADGE_SIZE = { small: 'size-6', medium: 'size-7' } as const;\nconst BADGE_ICON_PX = { small: 14, medium: 16 } as const;\nconst ITEM_PB = { compact: 'pb-4', default: 'pb-6' } as const;\n\nexport interface TimelineItemProps\n  extends Omit<React.ComponentProps<'li'>, 'title'> {\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Event title (the primary line). */\n  title: React.ReactNode;\n  /** Optional secondary description. */\n  description?: React.ReactNode;\n  /** Semantic status — tints the marker (a subtle cue, never large blocks of text). */\n  status?: TimelineStatus;\n  /** Icon shown in a status-tinted marker badge instead of the plain dot. */\n  icon?: React.ReactNode;\n  /** Metadata slot under the description — e.g. `Tag`s. */\n  metadata?: React.ReactNode;\n  /** Actions slot — e.g. a `Link` or `ButtonMenu`. */\n  actions?: React.ReactNode;\n  /** Emphasize this item as the current one (a ringed marker). */\n  current?: boolean;\n  /** Dim a non-applicable / inactive item. */\n  disabled?: boolean;\n  /** Expandable detail composed by the caller — e.g. an `Accordion`. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      timestamp,\n      title,\n      description,\n      status = 'neutral',\n      icon,\n      metadata,\n      actions,\n      current = false,\n      disabled = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { size, density } = React.useContext(TimelineContext);\n    const marker = STATUS_MARKER[status];\n\n    return (\n      <li\n        ref={ref}\n        data-status={status}\n        data-current={current || undefined}\n        data-disabled={disabled || undefined}\n        // A disabled item is dimmed *and* announced as disabled; its slotted\n        // controls (actions/links) stop taking pointer input — matching the\n        // repo's `aria-disabled` + `pointer-events-none` pattern (see link.tsx).\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex gap-3',\n          disabled && 'opacity-60 pointer-events-none',\n          className\n        )}\n        {...props}\n      >\n        {/* Marker column: dot / icon badge + the connector line below it. */}\n        <div className=\"flex flex-col items-center\">\n          {icon != null ? (\n            <span\n              aria-hidden\n              className={cn(\n                'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',\n                BADGE_SIZE[size],\n                marker.badge,\n                // Ring the badge for a `current` item (same emphasis as the dot).\n                current &&\n                  cn(\n                    'ring-2 ring-offset-2 ring-offset-background',\n                    marker.ringColor\n                  )\n              )}\n            >\n              {React.isValidElement(icon)\n                ? React.cloneElement(\n                    icon as React.ReactElement<{ size?: number }>,\n                    { size: BADGE_ICON_PX[size] }\n                  )\n                : icon}\n            </span>\n          ) : (\n            <span\n              aria-hidden\n              className={cn(\n                'mt-1 shrink-0 rounded-full',\n                DOT_SIZE[size],\n                current ? cn('border-2 bg-background', marker.ring) : marker.dot\n              )}\n            />\n          )}\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            className=\"mt-1 w-px flex-1 bg-border\"\n          />\n        </div>\n\n        {/* Content column. */}\n        <div className={cn('min-w-0 flex-1', ITEM_PB[density])}>\n          {timestamp != null && (\n            <div className=\"text-xs leading-tight text-muted-foreground\">\n              {timestamp}\n            </div>\n          )}\n          <div className=\"font-medium leading-snug text-foreground\">{title}</div>\n          {description != null && (\n            <div className=\"mt-0.5 text-muted-foreground\">{description}</div>\n          )}\n          {metadata != null && (\n            <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n              {metadata}\n            </div>\n          )}\n          {actions != null && (\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">{actions}</div>\n          )}\n          {children != null && <div className=\"mt-2\">{children}</div>}\n        </div>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["TimelineContext","React","timelineVariants","cva","TimelineRoot","className","size","density","children","props","ref","resolved","jsx","cn","STATUS_MARKER","DOT_SIZE","BADGE_SIZE","BADGE_ICON_PX","ITEM_PB","TimelineItem","timestamp","title","description","status","icon","metadata","actions","current","disabled","marker","jsxs","Timeline"],"mappings":"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"}
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '../avatar';\nimport { ButtonIcon } from '../button-icon';\nimport { Card } from '../card';\n\n// A presentational, chronological *tree* of events — an activity feed / audit\n// log / status history. Each row is an Avatar marker plus a Card carrying the\n// title, an optional tag, the timestamp, a description, and an optional body;\n// rows join their parent through an elbow and their next sibling through a\n// vertical line. It owns structure, the connector geometry, and collapsing only;\n// it never sorts, groups, fetches, or interprets events, and it ships no domain\n// event types or icons. Rendered as a semantic ordered list (`<ol>`/`<li>`);\n// markers and connectors are decorative. Not a temporal chart — use a Line /\n// Area / Composed chart for that.\n//\n// Nesting is **flat**, mirroring the Figma `Nesting` variant: a consumer renders\n// one `Timeline.Item` per entry and declares its `level` (1-3). Depth is never\n// derived from JSX nesting — the level sequence *is* the tree. `Timeline` reads\n// that sequence and derives the rest: which rows get a disclosure control, which\n// rows are dropped when one collapses, and the whole connector geometry — both a\n// row's descending line and the elbow joining a branch's first row to its parent\n// (Figma's `-First`). `connector` and `branchStart` exist only to override those\n// two, and the pair is resolved together so neither half can be drawn alone.\n//\n// Collapsing is the **variant**, not a per-row flag. `tree` gives every row that\n// has descendants a disclosure button ahead of its marker and widens the indent\n// step to reserve it; `default` never collapses anything. There is no `collapsible`\n// prop, because the two would say the same thing: a tree branch nobody can collapse\n// is just `default` with a wider indent.\n//\n// An expandable *card* is a separate, orthogonal axis — `collapsibleBody` puts a\n// chevron at the trailing edge of a row's card header that folds that card's own\n// body (Figma's `Action Button`). It is not a variant: it behaves identically in\n// `default` and `tree`, and a tree row can carry both controls — the branch one\n// drops the rows below, this one folds this card. It lives here only because\n// `Card` cannot do it yet; move it there once it can.\n//\n// Connector geometry is reproduced with logical CSS borders rather than Figma's\n// two exported 1px SVG strokes (a straight line and a right angle): both are\n// design primitives, not iconography, and CSS borders mirror correctly under\n// `dir=\"rtl\"` where a baked-in asset cannot.\n//\n// The design references `components/Timeline/{connectorColor,gap}`, which are\n// not \"ready for dev\" and have no `--ui-timeline-*` tier. Both are pure aliases\n// in Figma — identical across all six brand modes — so this consumes the alias\n// targets directly: `--ui-border-on-surface-border` (connector) and\n// `--ui-gap-16` (gap). Re-point them at `--ui-timeline-*` once that tier ships.\n\nconst CONNECTOR_COLOR = 'var(--ui-border-on-surface-border)';\n// Load-bearing invariant: the elbow's vertical lands on the parent's connector\n// only while GAP === MARKER / 2 (16 === 32 / 2 today). The elbow is offset from the\n// child's indent while the connector is offset from the parent's marker centre, and\n// those two coincide at exactly that ratio. If either token moves, every elbow\n// detaches — re-derive the elbow's `insetInlineStart` rather than nudging it.\nconst GAP = 'var(--ui-gap-16)';\n/** The Avatar marker's own width — also the elbow's horizontal reach. */\nconst MARKER = 'var(--ui-avatar-global-avatar-size)';\n/** Disclosure button + its gap, present only on a `tree` row with descendants. */\nconst TOGGLE =\n  'calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))';\n\ntype TimelineVariant = 'default' | 'tree';\n\nconst TimelineContext = React.createContext<{ variant: TimelineVariant }>({\n  variant: 'default',\n});\n\n/**\n * Per-row disclosure state, resolved by the root so it can also drop the\n * collapsed row's descendants. Null when an item renders outside a `Timeline`,\n * in which case the item falls back to its own state.\n */\nconst TimelineRowContext = React.createContext<{\n  expanded: boolean;\n  connector: boolean;\n  elbow: boolean;\n  hasToggle: boolean;\n  onToggle: () => void;\n} | null>(null);\n\n/** A row's identity for the uncontrolled disclosure map. */\nconst key = (element: React.ReactElement, index: number) =>\n  String(element.key ?? index);\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: '',\n      tree: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {\n  /**\n   * Whether the list collapses. `default` never does; `tree` gives every row that\n   * has descendants a disclosure button ahead of its marker, which hides those\n   * descendants, and widens the indent step to reserve it on every row.\n   *\n   * Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's\n   * own body and works the same under both variants.\n   */\n  variant?: TimelineVariant;\n  /**\n   * `Timeline.Item`s — pass them as direct children in visual order (never\n   * wrapped in a fragment, or their levels can't be read). Connectors are derived\n   * from the levels, so no row ever leaves a dangling line.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, variant, children, ...props }, ref) => {\n    const resolved = variant ?? 'default';\n    const context = React.useMemo(() => ({ variant: resolved }), [resolved]);\n    const [openState, setOpenState] = React.useState<Record<string, boolean>>(\n      {}\n    );\n\n    const items = React.Children.toArray(children).filter(\n      React.isValidElement\n    ) as React.ReactElement<TimelineItemProps>[];\n\n    // A row has descendants when the row *authored* after it is deeper. Read from\n    // the full child list, never the visible one: a collapsed row must keep its\n    // disclosure control, or there would be no way to expand it again.\n    const levelAt = (index: number) => items[index]?.props.level ?? 1;\n    const hasDescendants = (index: number) =>\n      index + 1 < items.length && levelAt(index + 1) > levelAt(index);\n\n    // Pass 1 — in `tree` mode only, drop the rows beneath a collapsed one. Rows\n    // deeper than a collapsed row are hidden until the level rises back to it; one\n    // cursor is enough, since a nested collapse can only ever narrow the range.\n    const visible: {\n      element: React.ReactElement<TimelineItemProps>;\n      key: string;\n      level: number;\n      expanded: boolean;\n      isControlled: boolean;\n      hasToggle: boolean;\n    }[] = [];\n    let hideBelowLevel: number | null = null;\n\n    items.forEach((element, index) => {\n      const level = element.props.level ?? 1;\n      if (hideBelowLevel !== null && level > hideBelowLevel) return;\n      hideBelowLevel = null;\n\n      const isControlled = element.props.expanded !== undefined;\n      const expanded = isControlled\n        ? Boolean(element.props.expanded)\n        : (openState[key(element, index)] ??\n          element.props.defaultExpanded ??\n          true);\n\n      // Collapsing is the variant, not a per-row opt-in: `tree` rows that have\n      // descendants get the control, `default` rows never do. A tree row without\n      // it would be a branch nobody can collapse — which is just `default` with a\n      // wider indent — so there is nothing for a `collapsible` prop to decide.\n      const hasToggle = resolved === 'tree' && hasDescendants(index);\n\n      if (hasToggle && !expanded) {\n        hideBelowLevel = level;\n      }\n\n      visible.push({\n        element,\n        key: key(element, index),\n        level,\n        expanded,\n        isControlled,\n        hasToggle,\n      });\n    });\n\n    // Pass 2 — the connector and the elbow are two halves of one join, so they are\n    // resolved together and neither can be drawn without the other.\n    //\n    // A row draws the elbow when it is deeper than the row above it: that is what\n    // \"opens a branch\" means, and reading it from the sequence keeps a level jump\n    // from having to be declared twice. `branchStart` overrides it, like\n    // `connector` overrides the descending line.\n    const drawsElbow = (index: number) => {\n      const row = visible[index];\n      if (row == null || row.level <= 1) return false;\n      const previous = visible[index - 1];\n      return (\n        row.element.props.branchStart ??\n        (previous != null && row.level > previous.level)\n      );\n    };\n\n    // A row's connector descends from its own marker to the *next visible* row, so\n    // it may only be drawn when it actually lands on something. Otherwise the line\n    // dangles in the margin: at the end of the list, at the end of a branch, and\n    // (the case that needs the two passes) once a collapse has removed the\n    // descendants it used to point at.\n    const rows = visible.map((row, index) => {\n      const next = visible[index + 1];\n      const reachesNextRow =\n        next != null &&\n        (next.level > row.level\n          ? // A deeper row bridges the gap with its own elbow, which starts exactly\n            // at this row's marker centre — so the line lands only if that elbow is\n            // actually drawn. It normally is, since a level jump derives one; it is\n            // not when the consumer refuses it with `branchStart={false}`, and then\n            // this line has nothing to meet.\n            drawsElbow(index + 1)\n          : next.level === row.level &&\n            // Same level, but a `tree` row that reserves a disclosure button has a\n            // wider marker column than one that doesn't — so their markers sit at\n            // different offsets and a vertical line between them can't be straight.\n            // Figma only ever shows homogeneous siblings, so skip the line instead\n            // of drawing a crooked one.\n            next.hasToggle === row.hasToggle);\n      return (\n        <TimelineRowContext.Provider\n          key={row.key}\n          value={{\n            expanded: row.expanded,\n            connector: row.element.props.connector ?? reachesNextRow,\n            elbow: drawsElbow(index),\n            hasToggle: row.hasToggle,\n            onToggle: () => {\n              const nextExpanded = !row.expanded;\n              row.element.props.onExpandedChange?.(nextExpanded);\n              if (!row.isControlled) {\n                setOpenState((state) => ({\n                  ...state,\n                  [row.key]: nextExpanded,\n                }));\n              }\n            },\n          }}\n        >\n          {row.element}\n        </TimelineRowContext.Provider>\n      );\n    });\n\n    return (\n      <TimelineContext.Provider value={context}>\n        <ol\n          ref={ref}\n          data-variant={resolved}\n          style={\n            {\n              // The indent step is the widest marker column plus the gap: a\n              // `tree` row reserves the disclosure button even when a given row\n              // is a leaf, so every level lines up.\n              '--timeline-step': `calc(${\n                resolved === 'tree' ? `${TOGGLE} + ${MARKER}` : MARKER\n              } + ${GAP})`,\n            } as React.CSSProperties\n          }\n          className={cn(\n            timelineVariants({ variant: resolved }),\n            'gap-[var(--ui-gap-16)]',\n            className\n          )}\n          {...props}\n        >\n          {rows}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineLevel = 1 | 2 | 3;\n\n/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */\nexport type TimelineMarkerColor =\n  | 'blue'\n  | 'gray'\n  | 'green'\n  | 'teal'\n  | 'violet'\n  | 'red'\n  | 'yellow'\n  | 'orange';\n\nexport interface TimelineItemProps extends Omit<\n  React.ComponentProps<'li'>,\n  'title'\n> {\n  /** Event title (the primary line in the card header). */\n  title: React.ReactNode;\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Slot beside the title, before the timestamp — e.g. a `Tag`. */\n  tag?: React.ReactNode;\n  /** Optional secondary description under the title. */\n  description?: React.ReactNode;\n  /** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */\n  icon?: React.ReactNode;\n  /** Initials rendered inside the marker Avatar when no `icon` is given. */\n  initials?: string;\n  /** Marker Avatar color scheme. */\n  color?: TimelineMarkerColor;\n  /** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */\n  level?: TimelineLevel;\n  /**\n   * Force the elbow joining this row to its parent's connector on or off (Figma's\n   * `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it whenever this row is deeper than the one above it. Ignored at\n   * `level={1}`, which has no parent.\n   */\n  branchStart?: boolean;\n  /**\n   * Force the connector descending to the next row on or off (Figma\n   * `Connecting line`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it only when the next visible row is at this row's depth or deeper.\n   */\n  connector?: boolean;\n  /**\n   * Branch disclosure state (controlled). Only meaningful under `variant=\"tree\"`\n   * on a row that has descendants — those rows get the control automatically.\n   */\n  expanded?: boolean;\n  /** Initial branch disclosure state when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called with the requested disclosure state whenever the control is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the branch disclosure control — the one that drops this\n   * row's descendant rows. Distinct from `bodyToggleLabel` by default, because a\n   * tree row can carry both controls at once.\n   */\n  toggleLabel?: string;\n  /**\n   * Give this row's card a chevron at the trailing edge of its header that shows\n   * and hides the body (Figma's `Action Button`).\n   *\n   * Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so\n   * it works the same in `default` and `tree` and a tree row can have both — the\n   * branch control drops the rows below, this one folds this card's own body.\n   * (It lives here only until `Card` grows the behaviour itself.)\n   */\n  collapsibleBody?: boolean;\n  /** Card-body disclosure state (controlled). */\n  bodyExpanded?: boolean;\n  /** Initial card-body disclosure state when uncontrolled. */\n  defaultBodyExpanded?: boolean;\n  /** Called with the requested card-body disclosure state. */\n  onBodyExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the card-body disclosure control — the one that folds this\n   * row's own body. Distinct from `toggleLabel` by default.\n   */\n  bodyToggleLabel?: string;\n  /** Card body, rendered below a divider. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      title,\n      timestamp,\n      tag,\n      description,\n      icon,\n      initials,\n      color = 'blue',\n      level = 1,\n      branchStart,\n      connector,\n      // Destructured only to keep them off the `<li>`: the root reads them from\n      // `element.props`, because it owns the disclosure state for the whole branch.\n      expanded: expandedProp,\n      defaultExpanded,\n      onExpandedChange,\n      // The two controls can sit in the same `<li>`, so their default names have to\n      // name their own action — a shared generic default would give one row two\n      // buttons that are indistinguishable to a screen reader.\n      toggleLabel = 'Toggle nested events',\n      collapsibleBody = false,\n      bodyExpanded: bodyExpandedProp,\n      defaultBodyExpanded = true,\n      onBodyExpandedChange,\n      bodyToggleLabel = 'Toggle event details',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = React.useContext(TimelineContext);\n    const row = React.useContext(TimelineRowContext);\n\n    // The card's own disclosure is entirely local — unlike the branch control, it\n    // changes nothing outside this row, so the root has no reason to own it.\n    const [localBodyExpanded, setLocalBodyExpanded] =\n      React.useState(defaultBodyExpanded);\n    const bodyExpanded = bodyExpandedProp ?? localBodyExpanded;\n    const handleBodyToggle = () => {\n      const next = !bodyExpanded;\n      onBodyExpandedChange?.(next);\n      if (bodyExpandedProp === undefined) setLocalBodyExpanded(next);\n    };\n\n    // All three are resolved by the root: `expanded` and the control depend on the\n    // row's descendants, which only the root can see, and it owns the uncontrolled\n    // state so it can drop those descendants too. Rendered outside a `Timeline`\n    // there is no branch at all, so an item is simply never collapsible.\n    const expanded = row?.expanded ?? true;\n    const drawConnector = row ? row.connector : (connector ?? false);\n    // Likewise derived by the root, which is the only place the row above is\n    // visible. Standalone there is no row above, so only the explicit prop can\n    // ask for an elbow — and it has nothing to meet, which is the consumer's call.\n    const drawElbow = row ? row.elbow : Boolean(branchStart) && level > 1;\n    const treeToggle = variant === 'tree' && (row?.hasToggle ?? false);\n    // A `tree` leaf drops the disclosure button, so its own marker column is\n    // narrower than the indent step — the connector tracks the Avatar, not the step.\n    const ownMarker = treeToggle ? `calc(${TOGGLE} + ${MARKER})` : MARKER;\n\n    // Collapsed, the chevron points toward the inline end — so it has to mirror\n    // under RTL; logical positioning can't rotate artwork.\n    const chevron = (\n      open: boolean,\n      label: string,\n      onClick: () => void\n    ) => (\n      <ButtonIcon\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        onClick={onClick}\n        className={cn(\n          'shrink-0 transition-transform',\n          !open && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      >\n        <ChevronDownIcon />\n      </ButtonIcon>\n    );\n\n    return (\n      <li\n        ref={ref}\n        data-level={level}\n        data-branch-start={drawElbow || undefined}\n        data-expanded={treeToggle ? expanded : undefined}\n        data-body-expanded={collapsibleBody ? bodyExpanded : undefined}\n        style={\n          {\n            '--timeline-indent': `calc(var(--timeline-step) * ${level - 1})`,\n            '--timeline-marker': ownMarker,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'relative flex items-start gap-[var(--ui-gap-16)]',\n          'ps-[var(--timeline-indent)]',\n          className\n        )}\n        {...props}\n      >\n        {drawConnector && (\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            // Descends from the marker's lower edge into the row gap, meeting\n            // the next row's elbow (or its marker) exactly.\n            className=\"absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${MARKER} / 2)`,\n              backgroundColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n        {drawElbow && (\n          <span\n            data-slot=\"timeline-elbow\"\n            aria-hidden\n            // A right angle: down the parent's connector line, then across to\n            // this row's marker column. `border-s`/`border-b` mirror in RTL.\n            className=\"absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) - ${MARKER})`,\n              borderColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n\n        {/* Marker column: the optional tree disclosure button, then the Avatar. */}\n        <div className=\"relative flex shrink-0 items-center gap-[var(--ui-gap-8)]\">\n          {treeToggle && chevron(expanded, toggleLabel, () => row?.onToggle())}\n          <Avatar\n            aria-hidden\n            color={color}\n            // The Figma Timeline marker carries no stroke, so Avatar's 2px outset\n            // ring (which exists to separate overlapping avatars in a group) is\n            // switched off here.\n            className=\"[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0\"\n          >\n            {icon ??\n              (initials ? <AvatarFallback>{initials}</AvatarFallback> : null)}\n          </Avatar>\n        </div>\n\n        {/* Content column: a Card header, plus an optional body below a divider. */}\n        <Card className=\"min-w-0 flex-1 shadow-none\">\n          <div className=\"flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <div className=\"flex h-8 items-center gap-[var(--ui-gap-8)]\">\n                <span className=\"truncate text-base font-medium leading-6 text-foreground\">\n                  {title}\n                </span>\n                {(tag != null || timestamp != null) && (\n                  <div className=\"flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]\">\n                    {tag}\n                    {timestamp != null && (\n                      <span className=\"whitespace-nowrap text-xs leading-4 text-muted-foreground\">\n                        {timestamp}\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              {description != null && (\n                <div className=\"flex items-center pb-1\">\n                  <span className=\"truncate text-xs leading-4 text-muted-foreground\">\n                    {description}\n                  </span>\n                </div>\n              )}\n            </div>\n            {collapsibleBody &&\n              chevron(bodyExpanded, bodyToggleLabel, handleBodyToggle)}\n          </div>\n          {children != null && (!collapsibleBody || bodyExpanded) && (\n            <div className=\"border-t border-border py-2\">{children}</div>\n          )}\n        </Card>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["CONNECTOR_COLOR","GAP","MARKER","TOGGLE","TimelineContext","React","TimelineRowContext","key","element","index","timelineVariants","cva","TimelineRoot","className","variant","children","props","ref","resolved","context","openState","setOpenState","items","levelAt","_a","hasDescendants","visible","hideBelowLevel","level","isControlled","expanded","hasToggle","drawsElbow","row","previous","rows","next","reachesNextRow","jsx","nextExpanded","_b","state","cn","TimelineItem","title","timestamp","tag","description","icon","initials","color","branchStart","connector","expandedProp","defaultExpanded","onExpandedChange","toggleLabel","collapsibleBody","bodyExpandedProp","defaultBodyExpanded","onBodyExpandedChange","bodyToggleLabel","localBodyExpanded","setLocalBodyExpanded","bodyExpanded","handleBodyToggle","drawConnector","drawElbow","treeToggle","ownMarker","chevron","open","label","onClick","ButtonIcon","ChevronDownIcon","jsxs","Avatar","AvatarFallback","Card","Timeline"],"mappings":"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"}