@opencxh/ui-kit 3.137.3 → 3.137.5

package/dist/index.js

@@ -8,19 +8,19 @@ import St from "remark-gfm";
 function d(...t) {
   return et(t);
 }
-function cn(t) {
+function dn(t) {
   return (r, n) => t[r]?.[n] || "";
 }
-function dn(t) {
+function un(t) {
   return (r) => t[r] || "";
 }
 const Oe = ["cat-1", "cat-2", "cat-3", "cat-4", "cat-5"];
-function un(t) {
+function mn(t) {
   let r = 0;
   for (let n = 0; n < t.length; n++) r = r * 31 + t.charCodeAt(n) >>> 0;
   return Oe[r % Oe.length];
 }
-function mn({ tiles: t, pinned: r, className: n }) {
+function fn({ tiles: t, pinned: r, className: n }) {
   if (r)
     return /* @__PURE__ */ i("div", { className: d("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
       /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: r }),
@@ -29,7 +29,7 @@ function mn({ tiles: t, pinned: r, className: n }) {
   const s = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
   return /* @__PURE__ */ e("div", { className: d("grid gap-2 h-full", s, n), children: t.map((a, l) => /* @__PURE__ */ e("div", { children: a }, l)) });
 }
-function fn({
+function hn({
   name: t,
   avatarUrl: r,
   muted: n,
@@ -37,14 +37,14 @@ function fn({
   hasVideo: a,
   videoSlot: l,
   className: o,
-  fill: u
+  fill: m
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
       className: d(
         "relative rounded-lg overflow-hidden bg-video-surface flex items-center justify-center",
-        u ? "h-full w-full" : "aspect-video",
+        m ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
         o
       ),
@@ -58,7 +58,7 @@ function fn({
     }
   );
 }
-function hn({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
+function xn({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
   const a = se(null);
   return X(() => {
     if (!r || !a.current) return;
@@ -116,8 +116,8 @@ const Et = {
     leftIcon: a,
     rightIcon: l,
     iconOnly: o = !1,
-    shape: u = "default",
-    className: m,
+    shape: m = "default",
+    className: u,
     children: y,
     disabled: x,
     ...h
@@ -133,7 +133,7 @@ const Et = {
           // the same weight as an emphasised nav item, and 600 at 12–13px
           // reads as a heavier control than the surrounding chrome.
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-medium",
-          u === "circle" ? "rounded-full" : "rounded-md",
+          m === "circle" ? "rounded-full" : "rounded-md",
           "transition-colors duration-fast ease-out",
           "focus-visible:outline-none focus-visible:focus-ring",
           "disabled:cursor-not-allowed disabled:border-border-subtle",
@@ -142,7 +142,7 @@ const Et = {
           o ? Mt[r] : zt[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          m
+          u
         ),
         disabled: v,
         "aria-busy": s || void 0,
@@ -165,7 +165,7 @@ const Et = {
   }
 );
 ae.displayName = "Button";
-const xn = ({
+const bn = ({
   children: t,
   size: r = "md",
   orientation: n = "horizontal",
@@ -213,9 +213,9 @@ const xn = ({
   onClick: a,
   className: l,
   "aria-label": o,
-  ...u
+  ...m
 }) => {
-  const m = typeof r == "number" ? r : Dt(r), y = d(
+  const u = typeof r == "number" ? r : Dt(r), y = d(
     "inline-block shrink-0",
     $t[n],
     s && [
@@ -224,7 +224,7 @@ const xn = ({
     ],
     l
   ), x = {
-    size: m,
+    size: u,
     strokeWidth: 2,
     className: y,
     onClick: s ? a : void 0,
@@ -235,7 +235,7 @@ const xn = ({
     onKeyDown: s ? (h) => {
       (h.key === "Enter" || h.key === " ") && (h.preventDefault(), a?.());
     } : void 0,
-    ...u
+    ...m
   };
   return /* @__PURE__ */ e(t, { ...x });
 };
@@ -252,14 +252,14 @@ function $e(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
   const [l, o] = O({});
   return yt(() => {
     if (!t) return;
-    const u = () => {
-      const m = r.current;
-      if (!m) return;
-      const y = m.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, g = { position: "fixed" };
+    const m = () => {
+      const u = r.current;
+      if (!u) return;
+      const y = u.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, g = { position: "fixed" };
       k ? (g.bottom = window.innerHeight - y.top + n, g.maxHeight = Math.max(120, h - n * 2)) : (g.top = y.bottom + n, g.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - y.right : g.left = y.left, s && (g.width = y.width), o(g);
     };
-    return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
-      window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
+    return m(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
+      window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
     };
   }, [t, r, n, s, a]), l;
 }
@@ -271,11 +271,11 @@ const Ve = ({
   rootClassName: a,
   triggerClassName: l,
   disabled: o = !1,
-  triggerLabel: u
+  triggerLabel: m
 }) => {
-  const [m, y] = O(!1), x = se(null), h = se(null), b = $e(m, h, { placement: n });
+  const [u, y] = O(!1), x = se(null), h = se(null), b = $e(u, h, { placement: n });
   X(() => {
-    if (!m) return;
+    if (!u) return;
     const g = ($) => {
       x.current && !x.current.contains($.target) && y(!1);
     }, f = ($) => {
@@ -284,7 +284,7 @@ const Ve = ({
     return document.addEventListener("mousedown", g), document.addEventListener("keydown", f), () => {
       document.removeEventListener("mousedown", g), document.removeEventListener("keydown", f);
     };
-  }, [m]);
+  }, [u]);
   const v = (g) => {
     g.stopPropagation(), !o && y((f) => !f);
   }, k = () => y(!1);
@@ -296,8 +296,8 @@ const Ve = ({
         type: "button",
         onClick: v,
         disabled: o,
-        "aria-label": u,
-        "aria-expanded": m,
+        "aria-label": m,
+        "aria-expanded": u,
         className: d(
           "inline-flex items-center",
           o && "cursor-not-allowed opacity-50",
@@ -306,7 +306,7 @@ const Ve = ({
         children: t
       }
     ),
-    m && /* @__PURE__ */ e(
+    u && /* @__PURE__ */ e(
       "div",
       {
         className: d(
@@ -350,8 +350,8 @@ function Lt({
   size: a = "md",
   active: l = !1,
   caret: o = !1,
-  menu: u,
-  menuClassName: m,
+  menu: m,
+  menuClassName: u,
   onClear: y,
   clearLabel: x = "Filter wissen",
   onClick: h,
@@ -372,15 +372,15 @@ function Lt({
       children: /* @__PURE__ */ e(Q, { icon: we, size: "xs" })
     }
   );
-  return u ? /* @__PURE__ */ i("span", { className: f, title: b, children: [
+  return m ? /* @__PURE__ */ i("span", { className: f, title: b, children: [
     /* @__PURE__ */ e(
       Ve,
       {
         trigger: $,
         rootClassName: "h-full",
         triggerClassName: d(C, "h-full"),
-        className: d("min-w-menu p-1.5", m),
-        children: u
+        className: d("min-w-menu p-1.5", u),
+        children: m
       }
     ),
     q
@@ -413,7 +413,7 @@ const It = {
   warning: "bg-warning-soft",
   error: "bg-danger-soft",
   info: "bg-info-soft"
-}, bn = ({
+}, gn = ({
   variant: t = "default",
   size: r = "md",
   color: n = "primary",
@@ -421,12 +421,12 @@ const It = {
   external: a = !1,
   className: l,
   children: o,
-  href: u,
-  target: m,
+  href: m,
+  target: u,
   rel: y,
   ...x
 }) => {
-  const h = a || u && (u.startsWith("http") || u.startsWith("mailto:")), b = d(
+  const h = a || m && (m.startsWith("http") || m.startsWith("mailto:")), b = d(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -442,8 +442,8 @@ const It = {
     l
   ), v = {
     ...x,
-    href: s ? void 0 : u,
-    target: h ? "_blank" : m,
+    href: s ? void 0 : m,
+    target: h ? "_blank" : u,
     rel: h ? "noopener noreferrer" : y,
     "aria-disabled": s || void 0
   };
@@ -463,28 +463,28 @@ function Ft({
   tone: a = "sunk",
   fullWidth: l = !1,
   className: o,
-  "aria-label": u
+  "aria-label": m
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       role: "tablist",
-      "aria-label": u,
+      "aria-label": m,
       className: d(
         "gap-0.5 rounded-md p-0.5",
         a === "track" ? "bg-surface-track" : "bg-surface-sunk",
         l ? "flex w-full" : "inline-flex",
         o
       ),
-      children: t.map((m) => {
-        const y = m.value === r;
+      children: t.map((u) => {
+        const y = u.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
             "aria-selected": y,
             type: "button",
-            onClick: () => n(m.value),
+            onClick: () => n(u.value),
             className: d(
               "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-sm",
               "transition-colors duration-fast ease-out",
@@ -493,9 +493,9 @@ function Ft({
               Ot[s],
               y ? "bg-surface text-text font-medium shadow-sm" : "text-text-muted hover:text-text"
             ),
-            children: m.label
+            children: u.label
           },
-          m.value
+          u.value
         );
       })
     }
@@ -517,11 +517,11 @@ function qe({
   icon: a,
   options: l,
   disabled: o = !1,
-  loading: u = !1,
-  menuPlacement: m = "bottom-end",
+  loading: m = !1,
+  menuPlacement: u = "bottom-end",
   menuLabel: y = "More options"
 }) {
-  const x = o || u, h = l.length > 0;
+  const x = o || m, h = l.length > 0;
   return /* @__PURE__ */ i("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
     /* @__PURE__ */ e(
       ae,
@@ -530,7 +530,7 @@ function qe({
         size: s,
         onClick: r,
         disabled: o,
-        loading: u,
+        loading: m,
         leftIcon: a,
         className: d(h && "rounded-r-none"),
         children: t
@@ -539,7 +539,7 @@ function qe({
     h && /* @__PURE__ */ e(
       Ve,
       {
-        placement: m,
+        placement: u,
         disabled: x,
         triggerLabel: y,
         className: "min-w-menu py-1",
@@ -605,11 +605,11 @@ const Ht = {
     indeterminate: a = !1,
     containerClassName: l,
     labelClassName: o,
-    className: u,
-    id: m,
+    className: m,
+    id: u,
     ...y
   }, x) => {
-    const h = oe.useId(), b = m || `checkbox-${h}`, v = !!n, k = oe.useRef(null), g = oe.useCallback(
+    const h = oe.useId(), b = u || `checkbox-${h}`, v = !!n, k = oe.useRef(null), g = oe.useCallback(
       (f) => {
         k.current = f, typeof x == "function" ? x(f) : x && typeof x == "object" && (x.current = f);
       },
@@ -637,7 +637,7 @@ const Ht = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               Ht[s],
               v ? "border-danger-border" : "border-border-strong",
-              u
+              m
             ),
             ...y
           }
@@ -672,8 +672,8 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
   required: a = !1,
   size: l = "md",
   className: o,
-  minDate: u,
-  maxDate: m,
+  minDate: m,
+  maxDate: u,
   format: y = "MM/dd/yyyy",
   withTime: x = !1
 }, h) => {
@@ -703,7 +703,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
       N.push(new Date(U)), U.setDate(U.getDate() + 1);
     return N;
   }, I = (c) => {
-    if (c.getMonth() === k.getMonth() && !(u && c < u) && !(m && c > m)) {
+    if (c.getMonth() === k.getMonth() && !(m && c < m) && !(u && c > u)) {
       if (x) {
         const p = new Date(c);
         p.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(p);
@@ -797,7 +797,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((c) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: c }, c)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((c, S) => {
-        const p = c.getMonth() === k.getMonth(), _ = t && c.toDateString() === t.toDateString(), N = c.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !p || u && c < u || m && c > m;
+        const p = c.getMonth() === k.getMonth(), _ = t && c.toDateString() === t.toDateString(), N = c.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !p || m && c < m || u && c > u;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -864,8 +864,8 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
     fullWidth: a = !1,
     disabled: l = !1,
     options: o,
-    placeholder: u,
-    containerClassName: m,
+    placeholder: m,
+    containerClassName: u,
     labelClassName: y,
     className: x,
     id: h,
@@ -929,7 +929,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         return;
       }
       c((F) => [...F, z]), _(z.value), te(""), v || I(!1);
-    }, P = () => v ? U.length > 0 ? U.map((D) => D.label).join(", ") : u || "Select options" : N?.label || u || "Select an option";
+    }, P = () => v ? U.length > 0 ? U.map((D) => D.label).join(", ") : m || "Select options" : N?.label || m || "Select an option";
     return /* @__PURE__ */ i(
       "div",
       {
@@ -937,7 +937,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         className: d(
           "relative flex flex-col",
           a && "w-full",
-          m
+          u
         ),
         ...C,
         children: [
@@ -1020,14 +1020,14 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                 }
               ),
               /* @__PURE__ */ i("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                u && !v && /* @__PURE__ */ e(
+                m && !v && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
                       g?.(""), I(!1);
                     },
-                    children: u
+                    children: m
                   }
                 ),
                 re.map((D) => {
@@ -1091,15 +1091,15 @@ const Jt = {
     fullWidth: a = !1,
     startIcon: l,
     endIcon: o,
-    loading: u = !1,
-    containerClassName: m,
+    loading: m = !1,
+    containerClassName: u,
     labelClassName: y,
     className: x,
     id: h,
     ...b
   }, v) => {
     const k = oe.useId(), g = h || `textfield-${k}`, f = !!n, $ = n || r ? `${g}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", m), children: [
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", u), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
@@ -1125,14 +1125,14 @@ const Jt = {
               We,
               Jt[s],
               l && "pl-9",
-              (o || u) && "pr-9",
+              (o || m) && "pr-9",
               Ke(f),
               x
             ),
             ...b
           }
         ),
-        (o || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
+        (o || m) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: m ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -1160,9 +1160,9 @@ function Yt({
   size: a = "md",
   placeholder: l,
   templatePlaceholder: o,
-  showTemplate: u = !0
+  showTemplate: m = !0
 }) {
-  const [m, y] = O([]);
+  const [u, y] = O([]);
   X(() => {
     let h = !0;
     return Promise.resolve(n?.()).then((b) => {
@@ -1180,12 +1180,12 @@ function Yt({
         size: a,
         fullWidth: !0,
         value: x.folderId ?? "",
-        options: m.map((h) => ({ value: h.id, label: h.name })),
+        options: u.map((h) => ({ value: h.id, label: h.name })),
         placeholder: l ?? "Select a folder",
         onChange: (h) => r?.({ ...x, folderId: h })
       }
     ),
-    u && /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(
       Ne,
       {
         size: a,
@@ -1216,8 +1216,8 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
     fullWidth: a = !1,
     startIcon: l = /* @__PURE__ */ e(Xt, {}),
     loading: o = !1,
-    containerClassName: u,
-    labelClassName: m,
+    containerClassName: m,
+    labelClassName: u,
     className: y,
     id: x,
     options: h,
@@ -1278,7 +1278,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
         className: ge(
           "flex flex-col",
           a ? "w-full" : "",
-          u || "",
+          m || "",
           "relative"
         ),
         ref: V,
@@ -1290,7 +1290,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
               className: ge(
                 "block text-sm font-medium mb-1",
                 G ? "text-danger-fg" : "text-text",
-                m || ""
+                u || ""
               ),
               children: t
             }
@@ -1396,8 +1396,8 @@ const Ge = xe(
     clearLabel: a = "Clear search",
     containerClassName: l,
     className: o,
-    disabled: u,
-    ...m
+    disabled: m,
+    ...u
   }, y) => /* @__PURE__ */ i(
     "div",
     {
@@ -1408,7 +1408,7 @@ const Ge = xe(
         "flex items-center gap-2 rounded-md bg-surface-sunk px-2.5 text-text-muted",
         "transition-colors duration-fast ease-out",
         s === "sm" ? "h-control-sm" : "h-control-md",
-        u && "opacity-60",
+        m && "opacity-60",
         l
       ),
       children: [
@@ -1419,7 +1419,7 @@ const Ge = xe(
             ref: y,
             type: "search",
             value: t,
-            disabled: u,
+            disabled: m,
             onChange: (x) => r(x.target.value),
             className: d(
               // The forms base layer hands every input a white fill, a 1px border
@@ -1434,7 +1434,7 @@ const Ge = xe(
               "[&::-webkit-search-cancel-button]:appearance-none",
               o
             ),
-            ...m
+            ...u
           }
         ),
         t ? /* @__PURE__ */ e(
@@ -1454,7 +1454,7 @@ const Ge = xe(
 Ge.displayName = "SearchField";
 const tr = xe(
   ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, o) => {
-    const u = /* @__PURE__ */ e(
+    const m = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
@@ -1493,12 +1493,12 @@ const tr = xe(
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (m) => r(m.target.checked),
+              onChange: (u) => r(u.target.checked),
               className: "peer sr-only",
               ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: u }),
+          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: m }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
@@ -1528,29 +1528,29 @@ function rr({
         {
           className: "grid gap-2 bg-surface-hover p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((o, u) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((o, m) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-2/3 rounded-sm bg-border-strong"
             },
-            `header-${u}`
+            `header-${m}`
           ))
         }
       ),
-      Array.from({ length: a }).map((o, u) => /* @__PURE__ */ e(
+      Array.from({ length: a }).map((o, m) => /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((m, y) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((u, y) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${u}-${y}`
+            `cell-${m}-${y}`
           ))
         },
-        `row-${u}`
+        `row-${m}`
       ))
     ] })
   ] }) });
@@ -1563,8 +1563,8 @@ const nr = ({
   placement: a = "bottom-start",
   disabled: l = !1,
   className: o,
-  showCheck: u = !0,
-  header: m
+  showCheck: m = !0,
+  header: u
 }) => {
   const [y, x] = O(!1), [h, b] = O(null), [v, k] = O({ top: 0, left: 0 }), g = se(null), f = se(null), $ = se(null), C = se(null), q = $e(y, f, { placement: a }), T = se(null), G = () => Array.from(
     C.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
@@ -1653,7 +1653,7 @@ const nr = ({
           }
         ),
         y && /* @__PURE__ */ e("div", { ref: C, className: ce, style: q, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
-          m && (typeof m == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: m }) : m),
+          u && (typeof u == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: u }) : u),
           r.map((c, S) => {
             if (c.divider)
               return /* @__PURE__ */ e(
@@ -1691,7 +1691,7 @@ const nr = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-                      u && n === c.value && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      m && n === c.value && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       p && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
@@ -1749,7 +1749,7 @@ const nr = ({
                               N.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: N.description })
                             ] })
                           ] }),
-                          u && re && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          m && re && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       N.value
@@ -1808,7 +1808,7 @@ const nr = ({
   sm: "p-2",
   md: "px-5 py-4",
   lg: "p-6"
-}, gn = ({
+}, pn = ({
   actions: t = [],
   onBack: r,
   backLabel: n = "Back",
@@ -1828,7 +1828,7 @@ const nr = ({
   ),
   l && /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
   /* @__PURE__ */ e(Je, { actions: t, className: d(!l && "ml-auto") })
-] }), pn = (t) => (r) => t(r instanceof Date ? r : null), vn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
+] }), vn = (t) => (r) => t(r instanceof Date ? r : null), yn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
   none: "px-0",
   sm: "px-2",
   md: "px-3.5",
@@ -1853,17 +1853,17 @@ const cr = (t) => {
       Ae,
       {
         value: t.value,
-        onChange: (u) => t.onChange(u),
+        onChange: (m) => t.onChange(m),
         placeholder: t.placeholder || t.label,
         className: d("min-w-40", o && "border-info text-info-fg")
       }
     );
   }
-  const n = (o) => t.options?.find((u) => u.value === o)?.label ?? String(o), s = (o) => Array.isArray(t.value) ? t.value.includes(o) : t.value === o, a = (o) => {
+  const n = (o) => t.options?.find((m) => m.value === o)?.label ?? String(o), s = (o) => Array.isArray(t.value) ? t.value.includes(o) : t.value === o, a = (o) => {
     if (!t.multiSelect) return t.onChange(o);
-    const u = Array.isArray(t.value) ? t.value : [];
+    const m = Array.isArray(t.value) ? t.value : [];
     t.onChange(
-      u.includes(o) ? u.filter((m) => m !== o) : [...u, o]
+      m.includes(o) ? m.filter((u) => u !== o) : [...m, o]
     );
   }, l = r.length > 0;
   return /* @__PURE__ */ e(
@@ -1876,24 +1876,24 @@ const cr = (t) => {
       label: l ? `${t.label}: ${r.map(n).join(", ")}` : t.label,
       title: t.label,
       onClear: () => t.onChange(t.multiSelect ? [] : "all"),
-      menu: (o) => /* @__PURE__ */ e("div", { role: "listbox", className: "flex flex-col", children: t.options?.map((u) => /* @__PURE__ */ e(
+      menu: (o) => /* @__PURE__ */ e("div", { role: "listbox", className: "flex flex-col", children: t.options?.map((m) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           role: "option",
-          "aria-selected": s(u.value),
+          "aria-selected": s(m.value),
           onClick: () => {
-            a(u.value), t.multiSelect || o();
+            a(m.value), t.multiSelect || o();
           },
           className: d(
             "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm",
             "transition-colors duration-fast ease-out hover:bg-surface-hover",
             "focus-visible:outline-none focus-visible:focus-ring",
-            s(u.value) ? "font-medium text-text" : "text-text-muted"
+            s(m.value) ? "font-medium text-text" : "text-text-muted"
           ),
-          children: u.label
+          children: m.label
         },
-        u.value
+        m.value
       )) })
     }
   );
@@ -1905,8 +1905,8 @@ const cr = (t) => {
   searchPlaceholder: a = "Search...",
   searchValue: l,
   onSearchChange: o,
-  filters: u = [],
-  toolbarActions: m = [],
+  filters: m = [],
+  toolbarActions: u = [],
   paginated: y = !1,
   defaultPageSize: x = 10,
   actions: h = [],
@@ -1941,7 +1941,7 @@ const cr = (t) => {
         return String(ue || "").toLowerCase().includes(le);
       }));
     }
-    return u.forEach((W) => {
+    return m.forEach((W) => {
       W.value && W.value !== "all" && (E = E.filter((le) => {
         const ie = r.find((ue) => ue.id === W.id);
         if (!ie) return !0;
@@ -1949,7 +1949,7 @@ const cr = (t) => {
         return String(R || "") === W.value;
       }));
     }), E;
-  }, [t, ce, K, r, s, u]), re = pe(() => {
+  }, [t, ce, K, r, s, m]), re = pe(() => {
     if (!c.column || !c.direction) return U;
     const E = r.find((W) => W.id === c.column);
     return E ? [...U].sort((W, le) => {
@@ -1987,7 +1987,7 @@ const cr = (t) => {
     _((E) => ({ ...E, page: 0 }));
   }, [ce, c]), X(() => {
     _((E) => ({ ...E, page: 0 }));
-  }, [u.map((E) => E.value).join(",")]);
+  }, [m.map((E) => E.value).join(",")]);
   const z = re.length, F = Math.ceil(z / p.pageSize), j = p.page * p.pageSize + 1, B = Math.min(j + p.pageSize - 1, z), M = ee.length > 0 && ee.every((E) => {
     const W = f(E, 0);
     return k.some(
@@ -1998,7 +1998,7 @@ const cr = (t) => {
     return k.some(
       (le, ie) => f(le, ie) === W
     );
-  }), Z = ar[G], ne = H ? "bg-surface-sunk" : "bg-surface", de = d("text-text", Z), be = s || u.length > 0 || m.length > 0, fe = y && z > 0, De = fe || C !== void 0;
+  }), Z = ar[G], ne = H ? "bg-surface-sunk" : "bg-surface", de = d("text-text", Z), be = s || m.length > 0 || u.length > 0, fe = y && z > 0, De = fe || C !== void 0;
   return /* @__PURE__ */ i("div", { className: d("flex min-w-0 flex-col", V), children: [
     be && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
       s && /* @__PURE__ */ e(
@@ -2010,8 +2010,8 @@ const cr = (t) => {
           containerClassName: "w-full sm:w-66"
         }
       ),
-      u.map((E) => /* @__PURE__ */ e(cr, { ...E }, E.id)),
-      m.length > 0 && /* @__PURE__ */ e(Je, { actions: m, className: "ml-auto" })
+      m.map((E) => /* @__PURE__ */ e(cr, { ...E }, E.id)),
+      u.length > 0 && /* @__PURE__ */ e(Je, { actions: u, className: "ml-auto" })
     ] }),
     /* @__PURE__ */ i("div", { className: "relative w-full overflow-x-auto rounded-lg ring-1 ring-border", children: [
       n && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
@@ -2206,37 +2206,37 @@ const cr = (t) => {
       ] })
     ] })
   ] });
-}, ir = Nt(null), yn = ({
+}, ir = Nt(null), Nn = ({
   items: t,
   activeTab: r,
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = O(t[0]?.id || ""), o = r || a, u = (m) => {
-    n ? n(m) : l(m);
+  const [a, l] = O(t[0]?.id || ""), o = r || a, m = (u) => {
+    n ? n(u) : l(u);
   };
-  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((m) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((u) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !m.disabled && u(m.id),
-      disabled: m.disabled,
+      onClick: () => !u.disabled && m(u.id),
+      disabled: u.disabled,
       className: d(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
-          "border-accent-border text-text": o === m.id,
-          "border-transparent text-text-muted hover:text-text": o !== m.id && !m.disabled,
-          "border-transparent text-disabled cursor-not-allowed": m.disabled
+          "border-accent-border text-text": o === u.id,
+          "border-transparent text-text-muted hover:text-text": o !== u.id && !u.disabled,
+          "border-transparent text-disabled cursor-not-allowed": u.disabled
         }
       ),
       children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-        m.label,
-        m.badge && /* @__PURE__ */ e("span", { className: d(
+        u.label,
+        u.badge && /* @__PURE__ */ e("span", { className: d(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          o === m.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
-        ), children: m.badge })
+          o === u.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
+        ), children: u.badge })
       ] })
     },
-    m.id
+    u.id
   )) }) });
 }, dr = ({
   items: t,
@@ -2247,10 +2247,10 @@ const cr = (t) => {
   size: l = "md",
   className: o
 }) => {
-  const [u, m] = O(
+  const [m, u] = O(
     r || n || t[0]?.id || ""
-  ), y = n || u, x = (g) => {
-    s ? s(g) : m(g);
+  ), y = n || m, x = (g) => {
+    s ? s(g) : u(g);
   }, h = {
     activeTab: y,
     setActiveTab: x
@@ -2332,8 +2332,8 @@ function Ye({
   closeOnBackdropClick: a = !0,
   closeOnEscape: l = !0,
   className: o,
-  backdropClassName: u,
-  children: m,
+  backdropClassName: m,
+  children: u,
   footer: y,
   showCloseButton: x = !0
 }) {
@@ -2357,7 +2357,7 @@ function Ye({
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        u
+        m
       ),
       onClick: v,
       children: /* @__PURE__ */ i(
@@ -2395,7 +2395,7 @@ function Ye({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: m }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: u }),
             y && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: y })
           ]
         }
@@ -2443,8 +2443,8 @@ const mr = {
   align: a = "left",
   truncate: l = !1,
   italic: o = !1,
-  underline: u = !1,
-  lineHeight: m = "normal",
+  underline: m = !1,
+  lineHeight: u = "normal",
   as: y,
   className: x,
   children: h,
@@ -2463,9 +2463,9 @@ const mr = {
     hr[s],
     xr[a],
     // Line height only overrides the body variant
-    t === "body" && br[m],
+    t === "body" && br[u],
     o && "italic",
-    u && "underline",
+    m && "underline",
     l && "truncate",
     x
   );
@@ -2487,8 +2487,8 @@ const pr = ({
   error: a,
   disabled: l,
   accept: o,
-  onListFiles: u,
-  onListMounts: m,
+  onListFiles: m,
+  onListMounts: u,
   onUploadFile: y,
   onDownloadFile: x,
   onRegisterFile: h
@@ -2504,7 +2504,7 @@ const pr = ({
   const _ = async () => {
     I(!0);
     try {
-      const M = await m?.();
+      const M = await u?.();
       M?.data && g(M.data);
     } catch (M) {
       console.error("Failed to load mounts", M);
@@ -2515,7 +2515,7 @@ const pr = ({
     if (f) {
       I(!0);
       try {
-        const M = await u?.({ mountId: f.id, name: H, path: C });
+        const M = await m?.({ mountId: f.id, name: H, path: C });
         M?.data && G(M.data);
       } catch (M) {
         console.error("Failed to load files", M);
@@ -2874,8 +2874,8 @@ const pr = ({
     fullWidth: a = !1,
     loading: l = !1,
     containerClassName: o,
-    labelClassName: u,
-    className: m,
+    labelClassName: m,
+    className: u,
     id: y,
     rows: x = 4,
     ...h
@@ -2889,7 +2889,7 @@ const pr = ({
           className: d(
             Ue,
             g ? "text-danger-fg" : "text-text-muted",
-            u
+            m
           ),
           children: t
         }
@@ -2908,7 +2908,7 @@ const pr = ({
               "resize-y leading-relaxed",
               vr[s],
               Ke(g),
-              m
+              u
             ),
             ...h
           }
@@ -2943,8 +2943,8 @@ function yr(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let l = a;
   for (let o = 0; o < s.length - 1; o++) {
-    const u = s[o], m = l[u];
-    l[u] = m && typeof m == "object" ? Array.isArray(m) ? [...m] : { ...m } : {}, l = l[u];
+    const m = s[o], u = l[m];
+    l[m] = u && typeof u == "object" ? Array.isArray(u) ? [...u] : { ...u } : {}, l = l[m];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -2972,7 +2972,7 @@ function wr({
     /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: s })
   ] });
 }
-const Nn = ({
+const wn = ({
   groups: t,
   data: r,
   onSubmit: n,
@@ -2980,8 +2980,8 @@ const Nn = ({
   onChange: a,
   transform: l,
   validate: o,
-  submitButton: u = { label: "Submit", variant: "primary" },
-  cancelButton: m = { label: "Cancel", variant: "outline" },
+  submitButton: m = { label: "Submit", variant: "primary" },
+  cancelButton: u = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
   layout: x = "vertical",
   size: h = "md",
@@ -3535,30 +3535,30 @@ const Nn = ({
         ae,
         {
           type: "button",
-          variant: m.variant ?? "ghost",
-          size: m.size || ce,
-          disabled: m.disabled || b,
+          variant: u.variant ?? "ghost",
+          size: u.size || ce,
+          disabled: u.disabled || b,
           onClick: s,
-          className: m.className,
-          children: m.label
+          className: u.className,
+          children: u.label
         }
       ),
       /* @__PURE__ */ e(
         ae,
         {
           type: "submit",
-          variant: u.variant,
-          size: u.size || ce,
-          disabled: u.disabled || b,
+          variant: m.variant,
+          size: m.size || ce,
+          disabled: m.disabled || b,
           loading: b,
-          className: u.className,
-          children: u.label
+          className: m.className,
+          children: m.label
         }
       )
     ] }) })
   ] });
 };
-function wn({
+function kn({
   open: t,
   title: r,
   description: n,
@@ -3566,23 +3566,23 @@ function wn({
   cancelLabel: a = "Annuleren",
   tone: l = "default",
   loading: o = !1,
-  onConfirm: u,
-  onCancel: m
+  onConfirm: m,
+  onCancel: u
 }) {
   return /* @__PURE__ */ e(
     Ye,
     {
       open: t,
-      onClose: m,
+      onClose: u,
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ i("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(ae, { variant: "ghost", onClick: m, disabled: o, children: a }),
+        /* @__PURE__ */ e(ae, { variant: "ghost", onClick: u, disabled: o, children: a }),
         /* @__PURE__ */ e(
           ae,
           {
             variant: l === "danger" ? "destructive" : "primary",
-            onClick: u,
+            onClick: m,
             loading: o,
             children: s
           }
@@ -3616,7 +3616,7 @@ const kr = {
   info: "bg-info",
   note: "bg-note"
 };
-function kn({
+function Cn({
   variant: t = "default",
   size: r = "md",
   dot: n = !1,
@@ -3624,8 +3624,8 @@ function kn({
   dismissible: a = !1,
   onDismiss: l,
   className: o,
-  children: u,
-  ...m
+  children: m,
+  ...u
 }) {
   return /* @__PURE__ */ i(
     "span",
@@ -3639,7 +3639,7 @@ function kn({
         Cr[r],
         o
       ),
-      ...m,
+      ...u,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3650,8 +3650,8 @@ function kn({
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", u && "mr-1"), children: s }),
-        u,
+        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", m && "mr-1"), children: s }),
+        m,
         a && l && /* @__PURE__ */ e(
           "button",
           {
@@ -3669,7 +3669,7 @@ const Er = {
   neutral: "bg-surface-hover text-text-muted",
   success: "bg-success-soft text-success-fg"
 };
-function Cn({
+function Sn({
   icon: t,
   tone: r = "neutral",
   title: n,
@@ -3677,7 +3677,7 @@ function Cn({
   actions: a,
   card: l = !1,
   className: o,
-  ...u
+  ...m
 }) {
   return /* @__PURE__ */ i(
     "div",
@@ -3687,7 +3687,7 @@ function Cn({
         l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
         o
       ),
-      ...u,
+      ...m,
       children: [
         t != null && /* @__PURE__ */ e("span", { className: d("flex size-disc items-center justify-center rounded-full text-2xl", Er[r]), children: t }),
         /* @__PURE__ */ e("div", { className: "text-lg font-semibold text-text", children: n }),
@@ -3697,7 +3697,7 @@ function Cn({
     }
   );
 }
-function Sn({ children: t, className: r, ...n }) {
+function En({ children: t, className: r, ...n }) {
   return /* @__PURE__ */ e(
     "kbd",
     {
@@ -3717,7 +3717,7 @@ const zr = {
   accent: "bg-accent",
   success: "bg-success"
 };
-function En({ value: t, variant: r = "accent", size: n = "md", className: s, ...a }) {
+function zn({ value: t, variant: r = "accent", size: n = "md", className: s, ...a }) {
   const l = Math.max(0, Math.min(100, t));
   return /* @__PURE__ */ e(
     "div",
@@ -3756,7 +3756,7 @@ const $r = {
   lg: "text-base",
   xl: "text-lg"
 };
-function zn({
+function Mn({
   size: t = "md",
   variant: r = "primary",
   label: n = "Loading...",
@@ -3838,7 +3838,7 @@ const _r = {
   "cat-4": "bg-cat-4",
   "cat-5": "bg-cat-5"
 };
-function Mn({
+function $n({
   tone: t = "neutral",
   shape: r = "round",
   pulse: n = !1,
@@ -3861,7 +3861,7 @@ function Mn({
     }
   );
 }
-function $n({
+function Dn({
   steps: t,
   current: r,
   variant: n = "numbered",
@@ -3869,35 +3869,35 @@ function $n({
   className: a
 }) {
   const l = t.indexOf(r), o = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-1.5", a), children: t.map((u, m) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-1.5", a), children: t.map((m, u) => /* @__PURE__ */ e(
     "span",
     {
       className: d(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        m === l ? "w-5 bg-accent" : "w-3.5",
-        m < l && "bg-border-strong",
-        m > l && "bg-border"
+        u === l ? "w-5 bg-accent" : "w-3.5",
+        u < l && "bg-border-strong",
+        u > l && "bg-border"
       )
     },
-    u
-  )) }) : /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-2", a), children: t.map((u, m) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    m
+  )) }) : /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-2", a), children: t.map((m, u) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": m === l ? "step" : void 0,
+        "aria-current": u === l ? "step" : void 0,
         className: d(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
-          m === l && "bg-accent text-accent-fg",
-          m < l && "bg-accent-soft text-accent",
-          m > l && "bg-surface-hover text-text-muted"
+          u === l && "bg-accent text-accent-fg",
+          u < l && "bg-accent-soft text-accent",
+          u > l && "bg-surface-hover text-text-muted"
         ),
-        children: m + 1
+        children: u + 1
       }
     ),
-    m < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
-  ] }, u)) });
+    u < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
+  ] }, m)) });
 }
-function Dn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
+function Tn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
   return /* @__PURE__ */ i(
     "div",
     {
@@ -3919,54 +3919,59 @@ function Dn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-
   );
 }
 const Ar = {
+  default: "bg-avatar text-avatar-fg",
+  in: "bg-avatar-in text-avatar-in-fg",
+  out: "bg-accent text-accent-fg",
+  note: "bg-avatar-note text-avatar-note-fg"
+}, Lr = {
   xs: "w-5 h-5 text-xs",
   sm: "w-6 h-6 text-xs",
   md: "w-7 h-7 text-base",
   lg: "w-9 h-9 text-sm"
 };
-function Lr(t) {
+function Ir(t) {
   if (!t) return "?";
   const r = t.trim().split(/[^\p{L}\p{N}]+/u).filter(Boolean);
   return r.length >= 2 ? (r[0][0] + r[1][0]).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : "?";
 }
-const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
-  const [l, o] = oe.useState(!1), u = d(
-    // `avatar`, not `surface-hover`: at 0.972 the plate was within a few percent
-    // of every surface it sits on, so the monogram floated instead of sitting in
-    // a disc. It needs its own token because it is a fill that must stay a step
-    // away from its background in *both* themes.
-    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-avatar text-avatar-fg",
+const Pr = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a, title: l }) => {
+  const [o, m] = oe.useState(!1), u = d(
+    // Its own token and not `surface-hover`: at 0.972 the plate was within a few
+    // percent of every surface it sits on, so the monogram floated instead of
+    // sitting in a disc.
+    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none",
     Ar[n],
-    s
+    Lr[s],
+    a
   );
-  return r && !l ? /* @__PURE__ */ e(
+  return r && !o ? /* @__PURE__ */ e(
     "img",
     {
       src: r,
       alt: t ?? "",
-      title: a ?? t,
+      title: l ?? t,
       className: d(u, "object-cover"),
-      onError: () => o(!0)
+      onError: () => m(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: u, title: a ?? t, "aria-label": t, children: Lr(t) });
-}, Re = "ring-surface", Pr = "ring-surface-accent", Tn = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
+  ) : /* @__PURE__ */ e("span", { className: u, title: l ?? t, "aria-label": t, children: Ir(t) });
+}, Re = "ring-surface", jr = "ring-surface-accent", _n = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
   if (t.length === 0) return null;
   const a = t.slice(0, r), l = t.length - a.length;
   return /* @__PURE__ */ i("span", { className: d("inline-flex items-center", s), children: [
-    a.map((o, u) => /* @__PURE__ */ e(
-      Ir,
+    a.map((o, m) => /* @__PURE__ */ e(
+      Pr,
       {
         name: o.name,
         src: o.src,
         size: n,
         title: o.name ? o.seen === !1 ? `${o.name} — nog niet gelezen` : o.name : void 0,
         className: d(
-          u > 0 && "-ml-2",
-          o.owner ? Pr : Re,
+          m > 0 && "-ml-2",
+          o.owner ? jr : Re,
           o.seen === !1 && "opacity-40"
         )
       },
-      o.id ?? `${o.name}-${u}`
+      o.id ?? `${o.name}-${m}`
     )),
     l > 0 && /* @__PURE__ */ i(
       "span",
@@ -3991,12 +3996,12 @@ const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
   chat: { fg: "text-channel-chat-fg", bg: "bg-channel-chat-soft" },
   tel: { fg: "text-channel-phone-fg", bg: "bg-channel-phone-soft" },
   note: { fg: "text-channel-note-fg", bg: "bg-channel-note-soft" }
-}, jr = {
+}, Or = {
   sm: "size-avatar-xs rounded-sm text-xs",
   md: "size-avatar-sm rounded-md text-xs",
   lg: "size-avatar-lg rounded-md text-base"
 };
-function _n({ channel: t, children: r, size: n = "md", className: s, title: a }) {
+function An({ channel: t, children: r, size: n = "md", className: s, title: a }) {
   const l = He[t in He ? t : "note"];
   return /* @__PURE__ */ e(
     "span",
@@ -4004,7 +4009,7 @@ function _n({ channel: t, children: r, size: n = "md", className: s, title: a })
       title: a,
       className: d(
         "inline-flex shrink-0 items-center justify-center font-bold",
-        jr[n],
+        Or[n],
         l.fg,
         l.bg,
         s
@@ -4013,7 +4018,7 @@ function _n({ channel: t, children: r, size: n = "md", className: s, title: a })
     }
   );
 }
-const An = ({
+const Ln = ({
   src: t,
   alt: r,
   size: n = "md",
@@ -4021,8 +4026,8 @@ const An = ({
   radius: a = "md",
   showLoading: l = !0,
   showError: o = !0,
-  fallback: u,
-  loadingContent: m,
+  fallback: m,
+  loadingContent: u,
   errorContent: y,
   className: x,
   onLoad: h,
@@ -4032,8 +4037,8 @@ const An = ({
   const [k, g] = O(!0), [f, $] = O(!1), [C, q] = O(t), T = (K) => {
     g(!1), $(!1), h?.(K);
   }, G = (K) => {
-    if (g(!1), $(!0), u && C !== u) {
-      q(u), $(!1), g(!0);
+    if (g(!1), $(!0), m && C !== m) {
+      q(m), $(!1), g(!0);
       return;
     }
     b?.(K);
@@ -4090,11 +4095,11 @@ const An = ({
         onError: G
       }
     ),
-    k && l && /* @__PURE__ */ e("div", { className: H, children: m || te }),
+    k && l && /* @__PURE__ */ e("div", { className: H, children: u || te }),
     f && o && /* @__PURE__ */ e("div", { className: H, children: y || J })
   ] });
 };
-function Ln({
+function In({
   icon: t,
   onClick: r,
   children: n
@@ -4117,7 +4122,7 @@ function Ln({
     }
   );
 }
-function In({
+function Pn({
   items: t,
   getRowKey: r,
   variant: n = "divided",
@@ -4125,8 +4130,8 @@ function In({
   renderItem: a,
   trailing: l,
   onSelect: o,
-  onActiveIndexChange: u,
-  isActive: m,
+  onActiveIndexChange: m,
+  isActive: u,
   unread: y,
   dimmed: x,
   groupBy: h,
@@ -4190,7 +4195,7 @@ function In({
   if (t.length === 0 && H)
     return /* @__PURE__ */ e("div", { className: ee, children: H });
   const Y = t.length > 0 && C.length === t.length, P = C.length > 0 && !Y, D = (z, F, j) => {
-    const B = m?.(z, F) ?? !1, M = y?.(z, F) ?? !1, L = x?.(z, F) ?? !1, Z = $ && N(z);
+    const B = u?.(z, F) ?? !1, M = y?.(z, F) ?? !1, L = x?.(z, F) ?? !1, Z = $ && N(z);
     return /* @__PURE__ */ i(
       "li",
       {
@@ -4200,7 +4205,7 @@ function In({
           "data-list-row": "",
           "aria-current": B || void 0,
           onClick: () => o(z, F),
-          onFocus: () => u?.(F),
+          onFocus: () => m?.(F),
           onKeyDown: (ne) => {
             ne.key !== "Enter" && ne.key !== " " || (ne.preventDefault(), o(z, F));
           }
@@ -4353,7 +4358,7 @@ function In({
     ] }) })
   ] });
 }
-function Pn({
+function jn({
   side: t,
   continued: r = !1,
   tone: n = "default",
@@ -4366,7 +4371,10 @@ function Pn({
       className: d(
         // A bubble never spans the whole column; it narrows further from md,
         // where the thread itself is wide enough for the difference to matter.
-        "min-w-0 max-w-bubble md:max-w-bubble-md shadow-sm",
+        // No shadow: a bubble is an inner card, and inner cards separate
+        // themselves with a fill. The shadow was doing the separating while both
+        // sides were white.
+        "min-w-0 max-w-bubble md:max-w-bubble-md",
         // No outline on an ordinary message: its fill already separates it from
         // the thread, and a border on every bubble turns a conversation into a
         // stack of boxes. The flagged tones keep theirs — there the outline is
@@ -4375,7 +4383,11 @@ function Pn({
         // tone === "note" && "border border-note-border",
         // The tight corner points back at the sender.
         t === "out" ? "rounded-lg rounded-tr-sm" : "rounded-lg rounded-tl-sm",
-        n === "note" ? "bg-note-soft" : "bg-surface",
+        // Sent is a pale blue, received the neutral sunk grey — the same pair the
+        // full-width feed cards use, so a chat thread and a mail thread say
+        // "ours" and "theirs" the same way. Both used to be white on white,
+        // which left the corner radius as the only cue.
+        n === "note" ? "bg-note-soft" : t === "out" ? "bg-bubble-out-soft" : "bg-surface-sunk",
         r && "mt-1",
         s
       ),
@@ -4383,18 +4395,18 @@ function Pn({
     }
   );
 }
-const Or = {
+const Fr = {
   default: "text-text",
   urgent: "text-danger-fg",
   success: "text-success-fg"
 };
-function jn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
+function On({ value: t, label: r, tone: n = "default", className: s, ...a }) {
   return /* @__PURE__ */ i("div", { className: d("rounded-xl bg-editor px-4 py-3.5", s), ...a, children: [
-    /* @__PURE__ */ e("div", { className: d("text-2xl font-semibold", Or[n]), children: t }),
+    /* @__PURE__ */ e("div", { className: d("text-2xl font-semibold", Fr[n]), children: t }),
     /* @__PURE__ */ e("div", { className: "pt-0.5 text-xs text-text-muted", children: r })
   ] });
 }
-const On = ({
+const Fn = ({
   surface: t = !1,
   title: r,
   subtitle: n,
@@ -4402,8 +4414,8 @@ const On = ({
   actions: a = [],
   children: l,
   className: o,
-  backLabel: u = "Back",
-  backClassName: m,
+  backLabel: m = "Back",
+  backClassName: u,
   onBack: y,
   editable: x = !1,
   onTitleChange: h
@@ -4472,7 +4484,20 @@ const On = ({
                   }
                 )
               ] }),
-              s && /* @__PURE__ */ e("div", { className: "mt-0.5 truncate text-sm text-text-subtle", children: s })
+              s && // A string meta is one line and ellipsises; a node may be a row
+              // of controls (the interaction header's property line) that has
+              // to be allowed to wrap — `truncate` would clip it to one line
+              // and hide the last properties.
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: d(
+                    "mt-1 min-w-0 text-sm text-text-subtle",
+                    typeof s == "string" && "truncate"
+                  ),
+                  children: s
+                }
+              )
             ] })
           ] }) }),
           a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
@@ -4506,7 +4531,7 @@ const On = ({
       ]
     }
   );
-}, Fr = /<[a-z][\s\S]*>/i, Br = [
+}, Br = /<[a-z][\s\S]*>/i, Rr = [
   "[&_p]:my-1.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_p]:leading-relaxed",
   "[&_a]:text-accent [&_a]:underline [&_a]:underline-offset-2",
   "[&_strong]:font-semibold [&_em]:italic",
@@ -4521,7 +4546,7 @@ const On = ({
   "[&_table]:my-1.5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-xs",
   "[&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
   "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1"
-].join(" "), Rr = {
+].join(" "), Hr = {
   p: (t) => /* @__PURE__ */ e("p", { className: "my-1.5 leading-relaxed first:mt-0 last:mb-0", ...t }),
   a: (t) => /* @__PURE__ */ e("a", { className: "text-accent underline underline-offset-2 hover:opacity-80", target: "_blank", rel: "noopener noreferrer", ...t }),
   strong: (t) => /* @__PURE__ */ e("strong", { className: "font-semibold", ...t }),
@@ -4544,17 +4569,22 @@ const On = ({
   th: (t) => /* @__PURE__ */ e("th", { className: "border border-border px-2 py-1 text-left font-semibold", ...t }),
   td: (t) => /* @__PURE__ */ e("td", { className: "border border-border px-2 py-1", ...t })
 };
-function Fn({ text: t, className: r, as: n }) {
+function Bn({ text: t, className: r, as: n }) {
   const s = t ?? "";
-  return (n ? n === "html" : Fr.test(s)) ? /* @__PURE__ */ e(
+  return (n ? n === "html" : Br.test(s)) ? /* @__PURE__ */ e(
     "div",
     {
-      className: d("break-words", Br, r),
+      className: d("break-words", Rr, r),
       dangerouslySetInnerHTML: { __html: kt.sanitize(s, { ADD_ATTR: ["target", "rel"] }) }
     }
-  ) : /* @__PURE__ */ e("div", { className: d("break-words", r), children: /* @__PURE__ */ e(Ct, { remarkPlugins: [St], components: Rr, children: s }) });
+  ) : /* @__PURE__ */ e("div", { className: d("break-words", r), children: /* @__PURE__ */ e(Ct, { remarkPlugins: [St], components: Hr, children: s }) });
 }
-function Bn({ label: t, trailing: r, align: n = "center", className: s }) {
+const Rn = ({ label: t, meta: r, action: n, className: s }) => /* @__PURE__ */ i("div", { className: d("flex items-center gap-2 px-1 pb-2 pt-7 first:pt-0", s), children: [
+  /* @__PURE__ */ e("span", { className: "shrink-0 text-2xs font-semibold uppercase tracking-label text-text-subtle", children: t }),
+  r && /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-right text-xs tabular-nums text-text-subtle", children: r }),
+  n && /* @__PURE__ */ e("span", { className: "ml-auto shrink-0", children: n })
+] });
+function Hn({ label: t, trailing: r, align: n = "center", className: s }) {
   const a = /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle", "aria-hidden": !0 });
   return !t && !r ? /* @__PURE__ */ e("div", { className: d("flex items-center py-2", s), children: a }) : /* @__PURE__ */ i("div", { className: d("flex items-center gap-3 py-2", s), children: [
     n === "center" && a,
@@ -4563,7 +4593,7 @@ function Bn({ label: t, trailing: r, align: n = "center", className: s }) {
     r && /* @__PURE__ */ e("span", { className: "shrink-0", children: r })
   ] });
 }
-function Rn({
+function Vn({
   label: t,
   description: r,
   control: n,
@@ -4590,7 +4620,7 @@ function Rn({
     }
   );
 }
-function Hn({
+function qn({
   icon: t,
   title: r,
   description: n,
@@ -4610,7 +4640,7 @@ function Hn({
     /* @__PURE__ */ e("div", { className: d("flex flex-col", t && "pl-6"), children: a })
   ] });
 }
-function Vn({ label: t, dotColor: r, onClick: n, className: s }) {
+function Un({ label: t, dotColor: r, onClick: n, className: s }) {
   return /* @__PURE__ */ i(
     "button",
     {
@@ -4628,13 +4658,13 @@ function Vn({ label: t, dotColor: r, onClick: n, className: s }) {
     }
   );
 }
-function Hr(t, r) {
+function Vr(t, r) {
   return r.split(".").reduce(
     (n, s) => n && typeof n == "object" && s in n ? n[s] : void 0,
     t
   );
 }
-const qn = ({
+const Wn = ({
   groups: t,
   data: r,
   size: n = "md",
@@ -4655,9 +4685,9 @@ const qn = ({
     if (!h) return String(x || "-");
     const b = h.find((v) => v.value === x);
     return b ? b.label : String(x || "-");
-  }, u = he(
+  }, m = he(
     (x) => {
-      const h = Hr(r, x.name);
+      const h = Vr(r, x.name);
       if (x.type === "array") {
         const v = h;
         return !v || v.length === 0 ? /* @__PURE__ */ e(
@@ -4797,7 +4827,7 @@ const qn = ({
       );
     },
     [r]
-  ), m = he(
+  ), u = he(
     (x) => {
       if (x.conditional && !x.conditional(r))
         return null;
@@ -4861,7 +4891,7 @@ const qn = ({
                       children: v.label
                     }
                   ),
-                  u(v)
+                  m(v)
                 ]
               },
               v.name
@@ -4871,7 +4901,7 @@ const qn = ({
         x.id
       );
     },
-    [r, u]
+    [r, m]
   ), y = d(
     "space-y-6",
     {
@@ -4882,7 +4912,7 @@ const qn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(m) }) });
+  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(u) }) });
 }, Xe = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   if (a)
@@ -4899,10 +4929,10 @@ const qn = ({
           ]
         }
       ),
-      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((m, y) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((u, y) => /* @__PURE__ */ e(
         Xe,
         {
-          item: m,
+          item: u,
           isSelectedHandler: r,
           onClick: n,
           depth: s + 1
@@ -4910,15 +4940,15 @@ const qn = ({
         y
       )) })
     ] });
-  const o = t.action, u = o?.visibility !== "always";
+  const o = t.action, m = o?.visibility !== "always";
   return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
     "div",
     {
       role: "button",
       tabIndex: 0,
       onClick: () => t.path && n?.(t.path),
-      onKeyDown: (m) => {
-        (m.key === "Enter" || m.key === " ") && (m.preventDefault(), t.path && n?.(t.path));
+      onKeyDown: (u) => {
+        (u.key === "Enter" || u.key === " ") && (u.preventDefault(), t.path && n?.(t.path));
       },
       className: d(
         // De kolom ligt op de backdrop, niet op een paneel: het actieve item
@@ -4947,7 +4977,7 @@ const qn = ({
             className: d(
               "shrink-0 text-xs tabular-nums",
               l ? "rounded-full bg-accent px-1.5 font-semibold text-accent-fg" : "text-text-subtle",
-              o && u && "group-hover/item:hidden group-focus-within/item:hidden"
+              o && m && "group-hover/item:hidden group-focus-within/item:hidden"
             ),
             children: t.count
           }
@@ -4958,16 +4988,16 @@ const qn = ({
             type: "button",
             "aria-label": o.label,
             title: o.label,
-            onClick: (m) => {
-              m.stopPropagation(), o.onClick();
+            onClick: (u) => {
+              u.stopPropagation(), o.onClick();
             },
-            onKeyDown: (m) => m.stopPropagation(),
+            onKeyDown: (u) => u.stopPropagation(),
             className: d(
               "flex size-5 shrink-0 items-center justify-center rounded-sm",
               "text-text-subtle transition-colors duration-fast ease-out",
               "hover:bg-page-hover hover:text-text",
               "focus-visible:outline-none focus-visible:focus-ring",
-              u && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
+              m && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
             ),
             children: o.icon
           }
@@ -4975,7 +5005,7 @@ const qn = ({
       ]
     }
   ) });
-}, Un = ({
+}, Kn = ({
   items: t,
   isSelectedHandler: r,
   onClick: n,
@@ -4993,7 +5023,7 @@ const qn = ({
       l
     )
   ) })
-] }), Vr = {
+] }), qr = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-base",
@@ -5002,13 +5032,13 @@ const qn = ({
   "2xl": "text-2xl",
   "3xl": "text-3xl",
   "4xl": "text-3xl"
-}, qr = {
+}, Ur = {
   light: "font-normal",
   normal: "font-normal",
   medium: "font-medium",
   semibold: "font-semibold",
   bold: "font-bold"
-}, Ur = {
+}, Wr = {
   primary: "text-text",
   secondary: "text-text-muted",
   accent: "text-accent",
@@ -5018,11 +5048,11 @@ const qn = ({
   info: "text-info-fg",
   neutral: "text-text",
   current: "text-current"
-}, Wr = {
+}, Kr = {
   left: "text-left",
   center: "text-center",
   right: "text-right"
-}, Wn = ({
+}, Gn = ({
   level: t = 1,
   size: r,
   weight: n = "semibold",
@@ -5030,21 +5060,21 @@ const qn = ({
   align: a = "left",
   truncate: l = !1,
   className: o,
-  children: u,
-  ...m
+  children: m,
+  ...u
 }) => {
   const y = `h${t}`, x = d(
     "font-sans text-pretty",
-    Vr[r || Kr(t)],
-    qr[n],
-    Ur[s],
-    Wr[a],
+    qr[r || Gr(t)],
+    Ur[n],
+    Wr[s],
+    Kr[a],
     l && "truncate",
     o
   );
-  return /* @__PURE__ */ e(y, { className: x, ...m, children: u });
+  return /* @__PURE__ */ e(y, { className: x, ...u, children: m });
 };
-function Kr(t) {
+function Gr(t) {
   return {
     1: "2xl",
     2: "xl",
@@ -5054,7 +5084,7 @@ function Kr(t) {
     6: "md"
   }[t] || "md";
 }
-const Kn = ({
+const Jn = ({
   commands: t,
   isOpen: r,
   onClose: n,
@@ -5062,11 +5092,11 @@ const Kn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [o, u] = O(""), [m, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), g = (m.length ? t.find((f) => f.id === m[0])?.subCommands || [] : t).filter(
+  const [o, m] = O(""), [u, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), g = (u.length ? t.find((f) => f.id === u[0])?.subCommands || [] : t).filter(
     (f) => f.label.toLowerCase().includes(o.toLowerCase())
   );
   return X(() => {
-    r || (u(""), y(a || []), h(l || 0));
+    r || (m(""), y(a || []), h(l || 0));
   }, [r]), X(() => {
     const f = ($) => {
       if (r) {
@@ -5082,12 +5112,12 @@ const Kn = ({
           );
         else if ($.key === "Enter") {
           const C = g[x];
-          C && (C.subCommands ? (y([...m, C.id]), h(0)) : C.action && (C.action(), n()));
+          C && (C.subCommands ? (y([...u, C.id]), h(0)) : C.action && (C.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [r, n, g, x, m]), X(() => {
+  }, [r, n, g, x, u]), X(() => {
     const f = ($) => {
       b.current && !b.current.contains($.target) && n();
     };
@@ -5110,7 +5140,7 @@ const Kn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: o,
-              onChange: (f) => u(f.target.value),
+              onChange: (f) => m(f.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -5128,7 +5158,7 @@ const Kn = ({
                   "data-index": $,
                   className: `flex items-center p-2 cursor-pointer rounded-md ${$ === x ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    f.subCommands ? (y([...m, f.id]), h(0)) : f.action && (f.action(), n());
+                    f.subCommands ? (y([...u, f.id]), h(0)) : f.action && (f.action(), n());
                   },
                   onMouseEnter: () => h($),
                   children: [
@@ -5159,7 +5189,7 @@ const Kn = ({
       ]
     }
   ) }) : null;
-}, Gr = {
+}, Jr = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -5167,7 +5197,7 @@ const Kn = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Jr = {
+}, Yr = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -5175,7 +5205,7 @@ const Kn = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, Yr = {
+}, Xr = {
   none: "",
   primary: "bg-accent text-accent-fg",
   secondary: "bg-surface-hover",
@@ -5191,26 +5221,26 @@ const Kn = ({
   backdrop: "bg-page",
   editor: "bg-surface",
   input: "bg-surface-input"
-}, Xr = {
+}, Zr = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Zr = {
+}, Qr = {
   none: "shadow-none",
   sm: "shadow-none",
   md: "shadow-overlay",
   lg: "shadow-overlay",
   xl: "shadow-modal",
   "2xl": "shadow-modal"
-}, Qr = {
+}, en = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, en = {
+}, tn = {
   primary: "border-accent-border",
   secondary: "border-border",
   accent: "border-accent-border",
@@ -5229,30 +5259,30 @@ const Kn = ({
     shadow: a,
     border: l,
     borderColor: o,
-    className: u,
-    children: m,
+    className: m,
+    children: u,
     ...y
   }, x) => /* @__PURE__ */ e(
     "div",
     {
       ref: x,
       className: d(
-        t && Gr[t],
-        r && Jr[r],
-        n && Yr[n],
-        s && Xr[s],
-        a && Zr[a],
-        l && Qr[l],
-        o && en[o],
-        u
+        t && Jr[t],
+        r && Yr[r],
+        n && Xr[n],
+        s && Zr[s],
+        a && Qr[a],
+        l && en[l],
+        o && tn[o],
+        m
       ),
       ...y,
-      children: m
+      children: u
     }
   )
 );
 Ze.displayName = "Box";
-const Gn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
+const Yn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
   Ze,
   {
     background: "module",
@@ -5267,7 +5297,7 @@ const Gn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
     ]
   }
 );
-function Jn({
+function Xn({
   identifier: t,
   resourceLoader: r,
   framework: n = "react",
@@ -5276,7 +5306,7 @@ function Jn({
   componentProps: l,
   className: o
 }) {
-  const u = se(null), [m, y] = O(!0), [x, h] = O(!1), [b, v] = O(null), k = se(null);
+  const m = se(null), [u, y] = O(!0), [x, h] = O(!1), [b, v] = O(null), k = se(null);
   se(null);
   const g = se(r);
   return g.current = r, X(() => {
@@ -5297,8 +5327,8 @@ function Jn({
       f = !1;
     };
   }, [t, n]), X(() => {
-    if (m || !b || n === "react") return;
-    const f = u.current;
+    if (u || !b || n === "react") return;
+    const f = m.current;
     if (f) {
       if (n === "svelte") {
         const $ = b.default || b, C = new $({ target: f, props: l || {} });
@@ -5311,15 +5341,15 @@ function Jn({
         };
       }
     }
-  }, [b, n, m]), X(() => {
+  }, [b, n, u]), X(() => {
     n === "svelte" && k.current && k.current.$set?.(l);
-  }, [l, n]), /* @__PURE__ */ i("div", { ref: u, className: o, style: { display: "contents" }, children: [
-    m && s,
-    !m && x && a,
+  }, [l, n]), /* @__PURE__ */ i("div", { ref: m, className: o, style: { display: "contents" }, children: [
+    u && s,
+    !u && x && a,
     n === "react" && !x && b && /* @__PURE__ */ e(b, { ...l })
   ] });
 }
-class Yn extends wt {
+class Zn extends wt {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -5348,74 +5378,75 @@ class Yn extends wt {
   }
 }
 export {
-  Dn as AssistantCard,
-  Ir as Avatar,
-  Tn as AvatarStack,
-  kn as Badge,
+  Tn as AssistantCard,
+  Pr as Avatar,
+  _n as AvatarStack,
+  Cn as Badge,
   Ze as Box,
   ae as Button,
-  xn as ButtonGroup,
-  Gn as Card,
-  _n as ChannelBadge,
+  bn as ButtonGroup,
+  Yn as Card,
+  An as ChannelBadge,
   ye as Checkbox,
-  Kn as CommandPalette,
-  wn as ConfirmDialog,
+  Jn as CommandPalette,
+  kn as ConfirmDialog,
   rr as ContentLoading,
   Ae as DatePicker,
   nr as Dropdown,
-  Cn as EmptyState,
-  Yn as ErrorBoundary,
-  Jn as FederatedResource,
+  Sn as EmptyState,
+  Zn as ErrorBoundary,
+  Xn as FederatedResource,
   Lt as FilterChip,
   Yt as FolderSelect,
-  Nn as Form,
+  wn as Form,
   wr as FormSection,
-  Wn as Heading,
+  Gn as Heading,
   Q as Icon,
-  An as Image,
-  Sn as Kbd,
-  jn as KpiCard,
-  bn as Link,
-  In as List,
-  Ln as ListBulkAction,
-  mn as MeetingGrid,
-  Pn as MessageBubble,
+  Ln as Image,
+  En as Kbd,
+  On as KpiCard,
+  gn as Link,
+  Pn as List,
+  In as ListBulkAction,
+  fn as MeetingGrid,
+  jn as MessageBubble,
   Ye as Modal,
-  On as PageHeader,
-  gn as PageToolbar,
+  Fn as PageHeader,
+  pn as PageToolbar,
   Je as PageToolbarActions,
-  fn as ParticipantTile,
+  hn as ParticipantTile,
   Ve as Popover,
-  En as ProgressBar,
-  Fn as RichText,
+  zn as ProgressBar,
+  Bn as RichText,
   Ge as SearchField,
   er as SearchableTextField,
-  Bn as SectionDivider,
+  Rn as SectionCaption,
+  Hn as SectionDivider,
   Ft as SegmentedToggle,
   Ce as Select,
-  Rn as SettingsRow,
-  Hn as SettingsSection,
-  Un as SidebarMenu,
-  Vn as SourceChip,
-  zn as Spinner,
+  Vn as SettingsRow,
+  qn as SettingsSection,
+  Kn as SidebarMenu,
+  Un as SourceChip,
+  Mn as Spinner,
   qe as SplitButton,
-  Mn as StatusDot,
-  $n as StepIndicator,
+  $n as StatusDot,
+  Dn as StepIndicator,
   pr as StorageInput,
   tr as Switch,
-  yn as TabBar,
+  Nn as TabBar,
   Fe as Table,
   dr as Tabs,
   me as Text,
   Le as TextArea,
   Ne as TextField,
-  hn as VideoSurface,
-  qn as View,
-  un as catTone,
+  xn as VideoSurface,
+  Wn as View,
+  mn as catTone,
   d as cn,
-  dn as createSizes,
-  cn as createVariants,
-  pn as dateFilterHandler,
-  vn as selectFilterHandler
+  un as createSizes,
+  dn as createVariants,
+  vn as dateFilterHandler,
+  yn as selectFilterHandler
 };
 //# sourceMappingURL=index.js.map