@rafal.lemieszewski/tide-ui 0.87.7 → 0.87.9

package/dist/es/components/product/bookmarks.js

@@ -1,41 +1,41 @@
 import { jsxs as s, jsx as e, Fragment as O } from "react/jsx-runtime";
-import * as r from "react";
+import * as t from "react";
 import { cn as X } from "../../lib/utils.js";
 import { Button as T } from "../fundamental/button.js";
 import { ButtonGroup as Re } from "../fundamental/button-group.js";
 import { Icon as w } from "../fundamental/icon.js";
-import { Bookmark as re, MoreHorizontal as me, Pencil as he, Trash2 as pe, ChevronDown as fe, Star as ve, Check as Me } from "lucide-react";
+import { Bookmark as te, MoreHorizontal as me, Pencil as he, Trash2 as pe, ChevronDown as fe, Star as ve, Check as Me } from "lucide-react";
 import { Separator as ge } from "../fundamental/separator.js";
 import { Select as Oe, SelectTrigger as Te, SelectContent as Ee, SelectItem as ue, SelectSeparator as Ae, SelectGroup as Pe, SelectLabel as Ue } from "../fundamental/select.js";
-import { DropdownMenu as oe, DropdownMenuTrigger as le, DropdownMenuContent as ie, DropdownMenuItem as L, DropdownMenuSeparator as Ve } from "../fundamental/dropdown-menu.js";
+import { DropdownMenu as oe, DropdownMenuTrigger as ie, DropdownMenuContent as le, DropdownMenuItem as L, DropdownMenuSeparator as Ve } from "../fundamental/dropdown-menu.js";
 import { Popover as We, PopoverTrigger as Ie, PopoverContent as Le } from "../fundamental/popover.js";
 import { Dialog as Fe, DialogContent as je, DialogHeader as $e, DialogTitle as He, DialogBody as Ke, DialogFooter as Ge } from "../fundamental/dialog.js";
 import { Input as _e } from "../fundamental/input.js";
 import { Label as qe } from "../fundamental/label.js";
 import { Badge as Je } from "../fundamental/badge.js";
 import { Skeleton as be } from "../fundamental/skeleton.js";
-const se = r.createContext(null);
+const se = t.createContext(null);
 function J() {
-  const t = r.useContext(se);
-  if (!t)
+  const r = t.useContext(se);
+  if (!r)
     throw new Error("useBookmarksActions must be used within Bookmarks");
-  return t;
+  return r;
 }
-function te({
-  open: t,
+function re({
+  open: r,
   onOpenChange: o,
   mode: u,
   initialName: c = "",
   onSave: x
 }) {
-  const [g, S] = r.useState(c);
-  r.useEffect(() => {
-    t && S(c);
-  }, [t, c]);
+  const [g, S] = t.useState(c);
+  t.useEffect(() => {
+    r && S(c);
+  }, [r, c]);
   const C = () => {
     g.trim() && (x(g.trim()), o(!1));
   };
-  return /* @__PURE__ */ e(Fe, { open: t, onOpenChange: o, children: /* @__PURE__ */ s(je, { children: [
+  return /* @__PURE__ */ e(Fe, { open: r, onOpenChange: o, children: /* @__PURE__ */ s(je, { children: [
     /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e(He, { children: u === "create" ? "Create bookmark" : "Rename bookmark" }) }),
     /* @__PURE__ */ e(Ke, { children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
       /* @__PURE__ */ e(qe, { htmlFor: "bookmark-name", children: "Bookmark name" }),
@@ -68,7 +68,7 @@ function te({
   ] }) });
 }
 function Qe({
-  bookmarks: t,
+  bookmarks: r,
   systemBookmarks: o,
   activeBookmarkId: u,
   onSelect: c,
@@ -76,10 +76,10 @@ function Qe({
   onDelete: g,
   onSetDefault: S
 }) {
-  const C = r.useMemo(
-    () => [...o, ...t],
-    [o, t]
-  ), b = r.useMemo(
+  const C = t.useMemo(
+    () => [...o, ...r],
+    [o, r]
+  ), b = t.useMemo(
     () => C.find((d) => d.id === u),
     [C, u]
   ), h = b?.type === "system";
@@ -97,25 +97,25 @@ function Qe({
             Te,
             {
               className: X(
-                "!text-label-md relative z-0 h-[var(--size-m)] w-auto gap-[var(--space-xs)] border border-[var(--color-border-action-outline)] bg-[var(--color-background-neutral-subtlest)] pr-[var(--space-m)] pl-[var(--space-s)] text-[var(--color-text-primary)] hover:border-[var(--color-border-action-outline-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:shadow-sm focus:border-[var(--color-border-action-outline)] focus:ring-0 focus:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 active:translate-y-px active:bg-[var(--grey-alpha-50)] active:shadow-xs data-[state=open]:ring-0",
-                h ? "rounded-m" : "rounded-l-m !rounded-r-none !border-r-0"
+                "!text-label-md relative z-0 h-[var(--size-m)] w-auto gap-[var(--space-xs)] border border-[var(--color-border-action-outline)] bg-[var(--color-background-neutral-subtlest)] pr-[var(--space-m)] pl-[var(--space-s)] text-[var(--color-text-primary)] hover:border-[var(--color-border-action-outline-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:shadow-[var(--shadow-200)] focus:border-[var(--color-border-action-outline)] focus:ring-0 focus:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 active:translate-y-px active:bg-[var(--grey-alpha-50)] active:shadow-[var(--shadow-100)] data-[state=open]:ring-0",
+                h ? "rounded-[var(--border-radius-m)]" : "rounded-l-[var(--border-radius-m)] !rounded-r-none !border-r-0"
               ),
               children: [
-                /* @__PURE__ */ e(w, { name: re, size: "m", color: "primary" }),
+                /* @__PURE__ */ e(w, { name: te, size: "m", color: "primary" }),
                 b?.name || "Bookmarks"
               ]
             }
           ),
           /* @__PURE__ */ s(Ee, { align: "start", position: "popper", className: "min-w-[200px]", children: [
             o.length > 0 && /* @__PURE__ */ e(O, { children: o.map((d) => /* @__PURE__ */ e(ue, { value: d.id, children: /* @__PURE__ */ e("div", { className: "flex items-center gap-[var(--space-s)] pr-6", children: /* @__PURE__ */ e("span", { children: d.name }) }) }, d.id)) }),
-            o.length > 0 && t.length > 0 && /* @__PURE__ */ e(Ae, {}),
-            t.length > 0 && /* @__PURE__ */ s(Pe, { children: [
+            o.length > 0 && r.length > 0 && /* @__PURE__ */ e(Ae, {}),
+            r.length > 0 && /* @__PURE__ */ s(Pe, { children: [
               /* @__PURE__ */ e(Ue, { children: "Custom Bookmarks" }),
-              t.map((d) => /* @__PURE__ */ e(ue, { value: d.id, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-[var(--space-s)] pr-6", children: [
+              r.map((d) => /* @__PURE__ */ e(ue, { value: d.id, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-[var(--space-s)] pr-6", children: [
                 /* @__PURE__ */ e(
                   w,
                   {
-                    name: re,
+                    name: te,
                     className: "h-[var(--size-2xs)] w-[var(--size-2xs)]"
                   }
                 ),
@@ -134,7 +134,7 @@ function Qe({
       }
     ),
     !h && /* @__PURE__ */ s(oe, { children: [
-      /* @__PURE__ */ e(le, { asChild: !0, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ e(
         T,
         {
           icon: me,
@@ -142,7 +142,7 @@ function Qe({
           className: "!rounded-l-none rounded-r-md !border-l !border-l-[var(--color-border-action-outline)] focus:ring-0 data-[state=open]:ring-0"
         }
       ) }),
-      /* @__PURE__ */ s(ie, { align: "end", children: [
+      /* @__PURE__ */ s(le, { align: "end", children: [
         /* @__PURE__ */ s(
           L,
           {
@@ -198,9 +198,9 @@ function Qe({
     ] })
   ] });
 }
-function Xe({ onUpdate: t, onCreate: o }) {
+function Xe({ onUpdate: r, onCreate: o }) {
   return /* @__PURE__ */ s(oe, { children: [
-    /* @__PURE__ */ e(le, { asChild: !0, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ s(
       T,
       {
         variant: "ghost",
@@ -217,16 +217,16 @@ function Xe({ onUpdate: t, onCreate: o }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ s(ie, { align: "end", children: [
-      /* @__PURE__ */ e(L, { onClick: t, children: "Update bookmark" }),
+    /* @__PURE__ */ s(le, { align: "end", children: [
+      /* @__PURE__ */ e(L, { onClick: r, children: "Update bookmark" }),
       /* @__PURE__ */ e(L, { onClick: o, children: "Create new bookmark" })
     ] })
   ] });
 }
-const xe = /* @__PURE__ */ r.memo(
-  /* @__PURE__ */ r.forwardRef(
+const xe = /* @__PURE__ */ t.memo(
+  /* @__PURE__ */ t.forwardRef(
     ({
-      bookmark: t,
+      bookmark: r,
       isActive: o,
       isVisible: u = !0,
       index: c,
@@ -240,20 +240,20 @@ const xe = /* @__PURE__ */ r.memo(
       onNavigateLast: B,
       onHover: v
     }, W) => {
-      const A = t.type === "user", y = r.useCallback(() => {
-        g(t);
-      }, [g, t]), F = r.useCallback(() => {
-        v?.(t);
-      }, [v, t]), P = r.useCallback(() => {
-        S(t.id);
-      }, [S, t.id]), k = r.useCallback(() => {
-        C(t.id);
-      }, [C, t.id]), f = r.useCallback(
+      const A = r.type === "user", y = t.useCallback(() => {
+        g(r);
+      }, [g, r]), F = t.useCallback(() => {
+        v?.(r);
+      }, [v, r]), P = t.useCallback(() => {
+        S(r.id);
+      }, [S, r.id]), k = t.useCallback(() => {
+        C(r.id);
+      }, [C, r.id]), f = t.useCallback(
         (a) => {
           switch (a.key) {
             case "Enter":
             case " ":
-              a.preventDefault(), g(t);
+              a.preventDefault(), g(r);
               break;
             case "ArrowRight":
               a.preventDefault(), h(c, 1);
@@ -269,7 +269,7 @@ const xe = /* @__PURE__ */ r.memo(
               break;
           }
         },
-        [t, c, g, h, d, B]
+        [r, c, g, h, d, B]
       );
       return /* @__PURE__ */ s(
         "div",
@@ -284,7 +284,7 @@ const xe = /* @__PURE__ */ r.memo(
           onKeyDown: f,
           onMouseEnter: F,
           className: X(
-            "group relative flex min-w-[160px] flex-shrink-0 cursor-pointer flex-col gap-[var(--space-xs)] rounded-l p-[var(--space-l)] transition-colors",
+            "group relative flex min-w-[160px] flex-shrink-0 cursor-pointer flex-col gap-[var(--space-xs)] rounded-[var(--border-radius-l)] p-[var(--space-l)] transition-colors",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-brand-bold)] focus-visible:ring-offset-2",
             o ? "bg-[var(--blue-50)] hover:bg-[var(--blue-50)]" : "bg-[var(--color-background-neutral-default)] hover:bg-[var(--color-background-neutral-hovered)]",
             !u && "pointer-events-none invisible absolute"
@@ -295,21 +295,21 @@ const xe = /* @__PURE__ */ r.memo(
                 A && /* @__PURE__ */ e(
                   w,
                   {
-                    name: re,
+                    name: te,
                     size: "s",
                     color: "secondary",
                     className: "flex-shrink-0"
                   }
                 ),
-                /* @__PURE__ */ e("div", { className: "text-body-md whitespace-nowrap text-[var(--color-text-primary)]", children: t.name })
+                /* @__PURE__ */ e("div", { className: "text-body-md whitespace-nowrap text-[var(--color-text-primary)]", children: r.name })
               ] }),
               A && /* @__PURE__ */ s(oe, { children: [
-                /* @__PURE__ */ e(le, { asChild: !0, children: /* @__PURE__ */ e(
+                /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ e(
                   T,
                   {
                     variant: "ghost",
                     size: "s",
-                    "aria-label": `Options for ${t.name}`,
+                    "aria-label": `Options for ${r.name}`,
                     className: "p-[var(--space-xs)] opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
                     tabIndex: -1,
                     onClick: (a) => a.stopPropagation(),
@@ -322,7 +322,7 @@ const xe = /* @__PURE__ */ r.memo(
                     )
                   }
                 ) }),
-                /* @__PURE__ */ s(ie, { align: "end", children: [
+                /* @__PURE__ */ s(le, { align: "end", children: [
                   /* @__PURE__ */ s(
                     L,
                     {
@@ -351,7 +351,7 @@ const xe = /* @__PURE__ */ r.memo(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ e("div", { className: "text-heading-lg text-[var(--color-text-primary)]", children: t.isLoadingCount ? /* @__PURE__ */ e(be, { height: 32, width: 40 }) : t.count ?? " " })
+            /* @__PURE__ */ e("div", { className: "text-heading-lg text-[var(--color-text-primary)]", children: r.isLoadingCount ? /* @__PURE__ */ e(be, { height: 32, width: 40 }) : r.count ?? " " })
           ]
         }
       );
@@ -360,7 +360,7 @@ const xe = /* @__PURE__ */ r.memo(
 );
 xe.displayName = "BookmarkTab";
 function Ye({
-  bookmarks: t,
+  bookmarks: r,
   systemBookmarks: o,
   activeBookmarkId: u,
   "aria-label": c = "Bookmarks",
@@ -371,18 +371,18 @@ function Ye({
   onBookmarkHover: b,
   onOverflowMenuChange: h
 }) {
-  const [d, B] = r.useState(!1), [v, W] = r.useState(null), A = r.useCallback(
+  const [d, B] = t.useState(!1), [v, W] = t.useState(null), A = t.useCallback(
     (n) => {
       B(n), h?.(n);
     },
     [h]
-  ), [y, F] = r.useState(null), P = r.useRef(null), k = r.useRef(/* @__PURE__ */ new Map()), f = r.useMemo(
-    () => [...o, ...t],
-    [o, t]
+  ), [y, F] = t.useState(null), P = t.useRef(null), k = t.useRef(/* @__PURE__ */ new Map()), f = t.useMemo(
+    () => [...o, ...r],
+    [o, r]
   );
-  r.useEffect(() => {
+  t.useEffect(() => {
     v && !f.some((n) => n.id === v) && W(null);
-  }, [f, v]), r.useEffect(() => {
+  }, [f, v]), t.useEffect(() => {
     if (!P.current || f.length === 0) return;
     let n = null;
     const m = () => {
@@ -395,13 +395,13 @@ function Ye({
           const ne = k.current.get(V.id);
           ne && D.set(V.id, ne.offsetWidth);
         });
-        const U = 8, i = 32, z = 52;
+        const U = 8, l = 32, z = 52;
         let q = 0, R = 0, N = !1;
-        const ce = o.length, Be = t.length > 0, ze = ce > 0 && Be ? ce : -1;
+        const ce = o.length, Be = r.length > 0, ze = ce > 0 && Be ? ce : -1;
         for (let V = 0; V < f.length; V++) {
           const ne = f[V], de = D.get(ne.id);
           if (de === void 0) continue;
-          V === ze && (N = !0, q += i + U);
+          V === ze && (N = !0, q += l + U);
           const ae = q + de + (R > 0 || N ? U : 0);
           if ((V < f.length - 1 ? ae + U + z : ae) > M)
             break;
@@ -411,19 +411,19 @@ function Ye({
       }, 100);
     };
     m();
-    const l = new ResizeObserver(m);
-    return l.observe(P.current), () => {
-      n && clearTimeout(n), l.disconnect();
+    const i = new ResizeObserver(m);
+    return i.observe(P.current), () => {
+      n && clearTimeout(n), i.disconnect();
     };
-  }, [f, o.length, t.length]);
-  const { visibleBookmarks: a, overflowBookmarks: I } = r.useMemo(() => {
+  }, [f, o.length, r.length]);
+  const { visibleBookmarks: a, overflowBookmarks: I } = t.useMemo(() => {
     if (y === null)
       return { visibleBookmarks: f, overflowBookmarks: [] };
-    const n = f.slice(0, y), m = f.slice(y), l = v ? m.find((p) => p.id === v) : null;
-    if (l && n.length > 0) {
+    const n = f.slice(0, y), m = f.slice(y), i = v ? m.find((p) => p.id === v) : null;
+    if (i && n.length > 0) {
       const p = n[n.length - 1], M = [
         ...n.slice(0, -1),
-        l
+        i
       ], D = [
         p,
         ...m.filter((U) => U.id !== v)
@@ -431,41 +431,41 @@ function Ye({
       return { visibleBookmarks: M, overflowBookmarks: D };
     }
     return { visibleBookmarks: n, overflowBookmarks: m };
-  }, [f, y, v]), j = r.useCallback(
+  }, [f, y, v]), j = t.useCallback(
     (n, m) => {
-      let l = n + m;
-      l < 0 ? l = a.length - 1 : l >= a.length && (l = 0);
-      const p = a[l];
+      let i = n + m;
+      i < 0 ? i = a.length - 1 : i >= a.length && (i = 0);
+      const p = a[i];
       p && k.current.get(p.id)?.focus();
     },
     [a]
-  ), $ = r.useCallback(
+  ), $ = t.useCallback(
     (n) => {
       x(n);
     },
     [x]
-  ), H = r.useCallback(() => {
+  ), H = t.useCallback(() => {
     const n = a[0];
     n && k.current.get(n.id)?.focus();
-  }, [a]), Q = r.useCallback(() => {
+  }, [a]), Q = t.useCallback(() => {
     const n = a[a.length - 1];
     n && k.current.get(n.id)?.focus();
-  }, [a]), Y = a.length, K = r.useMemo(() => {
+  }, [a]), Y = a.length, K = t.useMemo(() => {
     for (let n = 0; n < a.length - 1; n++)
       if (a[n].type === "system" && a[n + 1].type === "user")
         return n;
     return -1;
-  }, [a]), Z = r.useCallback(
+  }, [a]), Z = t.useCallback(
     (n) => {
-      a.some((l) => l.id === n.id) && n.id !== v && W(null), x(n);
+      a.some((i) => i.id === n.id) && n.id !== v && W(null), x(n);
     },
     [a, v, x]
-  ), ee = r.useCallback(
+  ), ee = t.useCallback(
     (n) => {
       W(n.id), x(n), A(!1);
     },
     [x, A]
-  ), G = r.useMemo(() => [...a, ...I], [a, I]), _ = r.useMemo(() => new Set(a.map((n) => n.id)), [a]);
+  ), G = t.useMemo(() => [...a, ...I], [a, I]), _ = t.useMemo(() => new Set(a.map((n) => n.id)), [a]);
   return /* @__PURE__ */ s(
     "div",
     {
@@ -475,8 +475,8 @@ function Ye({
       className: "flex items-center gap-[var(--space-s)]",
       children: [
         G.map((n, m) => {
-          const l = _.has(n.id), p = l ? a.findIndex((D) => D.id === n.id) : -1, M = l && p === K;
-          return /* @__PURE__ */ s(r.Fragment, { children: [
+          const i = _.has(n.id), p = i ? a.findIndex((D) => D.id === n.id) : -1, M = i && p === K;
+          return /* @__PURE__ */ s(t.Fragment, { children: [
             /* @__PURE__ */ e(
               xe,
               {
@@ -485,10 +485,10 @@ function Ye({
                 },
                 bookmark: n,
                 isActive: u === n.id,
-                isVisible: l,
+                isVisible: i,
                 index: p >= 0 ? p : m,
                 totalTabs: Y,
-                onSelect: l ? Z : $,
+                onSelect: i ? Z : $,
                 onRename: g,
                 onDelete: S,
                 onSetDefault: C,
@@ -516,7 +516,7 @@ function Ye({
               "aria-label": `Show ${I.length} more bookmarks`,
               "aria-expanded": d,
               className: X(
-                "flex cursor-pointer flex-shrink-0 items-center justify-center rounded-l border border-[var(--color-border-action-outline)] bg-transparent px-[var(--space-m)] transition-colors hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+                "flex cursor-pointer flex-shrink-0 items-center justify-center rounded-[var(--border-radius-l)] border border-[var(--color-border-action-outline)] bg-transparent px-[var(--space-m)] transition-colors hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
                 "min-h-[88px]",
                 // Match the height of bookmark tabs (padding + content + padding)
                 "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-brand-bold)] focus-visible:ring-offset-2"
@@ -539,7 +539,7 @@ function Ye({
               role: "menu",
               "aria-label": "More bookmarks",
               children: /* @__PURE__ */ e("div", { className: "flex flex-col", children: I.map((n) => {
-                const m = u === n.id, l = n.type === "user";
+                const m = u === n.id, i = n.type === "user";
                 return /* @__PURE__ */ s(
                   "button",
                   {
@@ -547,20 +547,20 @@ function Ye({
                     "aria-label": `Select ${n.name} bookmark${m ? " (currently selected)" : ""}`,
                     onClick: () => ee(n),
                     className: X(
-                      "text-body-md flex cursor-pointer items-center gap-[var(--space-s)] rounded-m px-[var(--space-m)] py-[var(--space-s)] text-left transition-colors",
+                      "text-body-md flex cursor-pointer items-center gap-[var(--space-s)] rounded-[var(--border-radius-m)] px-[var(--space-m)] py-[var(--space-s)] text-left transition-colors",
                       "hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
                       "focus:outline-none focus-visible:bg-[var(--color-background-neutral-subtlest-hovered)]"
                     ),
                     children: [
-                      l && /* @__PURE__ */ e(
+                      i && /* @__PURE__ */ e(
                         w,
                         {
-                          name: re,
+                          name: te,
                           className: "h-[var(--size-2xs)] w-[var(--size-2xs)]",
                           "aria-hidden": "true"
                         }
                       ),
-                      !l && /* @__PURE__ */ e("div", { className: "w-[var(--size-2xs)]", "aria-hidden": "true" }),
+                      !i && /* @__PURE__ */ e("div", { className: "w-[var(--size-2xs)]", "aria-hidden": "true" }),
                       /* @__PURE__ */ s("div", { className: "flex flex-1 items-center gap-[var(--space-xs)]", children: [
                         /* @__PURE__ */ e("span", { className: "truncate", children: n.name }),
                         (n.count !== void 0 || n.isLoadingCount) && /* @__PURE__ */ e(Je, { size: "s", intent: "neutral", appearance: "subtle", children: n.isLoadingCount ? /* @__PURE__ */ e(be, { height: 16, width: 24 }) : n.count })
@@ -593,34 +593,34 @@ function Ye({
     }
   );
 }
-function we({ children: t }) {
-  return /* @__PURE__ */ e(O, { children: t });
+function we({ children: r }) {
+  return /* @__PURE__ */ e(O, { children: r });
 }
-function Ce({ children: t }) {
-  return /* @__PURE__ */ e(O, { children: t });
+function Ce({ children: r }) {
+  return /* @__PURE__ */ e(O, { children: r });
 }
-function ke({ children: t }) {
-  return /* @__PURE__ */ e(O, { children: t });
+function ke({ children: r }) {
+  return /* @__PURE__ */ e(O, { children: r });
 }
 function De() {
-  const { isDirty: t, handleRevert: o } = J();
-  return t ? /* @__PURE__ */ e(T, { variant: "ghost", onClick: o, className: "h-[var(--size-m)]", children: "Revert changes" }) : null;
+  const { isDirty: r, handleRevert: o } = J();
+  return r ? /* @__PURE__ */ e(T, { variant: "ghost", onClick: o, className: "h-[var(--size-m)]", children: "Revert changes" }) : null;
 }
 function Ne() {
-  const { isDirty: t, isSystemBookmark: o, openCreateDialog: u } = J();
-  return !t || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Create bookmark" });
+  const { isDirty: r, isSystemBookmark: o, openCreateDialog: u } = J();
+  return !r || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Create bookmark" });
 }
 function Ze() {
-  const { isDirty: t, isSystemBookmark: o, handleUpdate: u } = J();
-  return !t || o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Update bookmark" });
+  const { isDirty: r, isSystemBookmark: o, handleUpdate: u } = J();
+  return !r || o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Update bookmark" });
 }
 function Se() {
-  const { isDirty: t, isSystemBookmark: o, handleRevert: u } = J();
-  return !t || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Reset" });
+  const { isDirty: r, isSystemBookmark: o, handleRevert: u } = J();
+  return !r || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Reset" });
 }
 function ye() {
-  const { isDirty: t, isSystemBookmark: o, handleUpdate: u, openCreateDialog: c } = J();
-  return !t || o ? null : /* @__PURE__ */ e(
+  const { isDirty: r, isSystemBookmark: o, handleUpdate: u, openCreateDialog: c } = J();
+  return !r || o ? null : /* @__PURE__ */ e(
     Xe,
     {
       onUpdate: u,
@@ -629,8 +629,8 @@ function ye() {
   );
 }
 function en() {
-  const { isDirty: t, isSystemBookmark: o } = J();
-  return t ? /* @__PURE__ */ s(O, { children: [
+  const { isDirty: r, isSystemBookmark: o } = J();
+  return r ? /* @__PURE__ */ s(O, { children: [
     /* @__PURE__ */ e(ge, { type: "dot", layout: "horizontal" }),
     o ? /* @__PURE__ */ s(O, { children: [
       /* @__PURE__ */ e(Se, {}),
@@ -642,7 +642,7 @@ function en() {
   ] }) : null;
 }
 function E({
-  variant: t,
+  variant: r,
   bookmarks: o,
   systemBookmarks: u,
   activeBookmarkId: c,
@@ -659,48 +659,48 @@ function E({
   onOverflowMenuChange: A,
   onDialogChange: y
 }) {
-  const [F, P] = r.useState(!1), [k, f] = r.useState(!1), [a, I] = r.useState(), j = r.useCallback(
-    (i) => {
-      f(i), y?.(i ? "create" : null);
+  const [F, P] = t.useState(!1), [k, f] = t.useState(!1), [a, I] = t.useState(), j = t.useCallback(
+    (l) => {
+      f(l), y?.(l ? "create" : null);
     },
     [y]
-  ), $ = r.useCallback(
-    (i) => {
-      P(i), y?.(i ? "rename" : null);
+  ), $ = t.useCallback(
+    (l) => {
+      P(l), y?.(l ? "rename" : null);
     },
     [y]
-  ), H = r.useMemo(
+  ), H = t.useMemo(
     () => [...u, ...o],
     [u, o]
-  ), Q = r.useMemo(
-    () => H.find((i) => i.id === c),
+  ), Q = t.useMemo(
+    () => H.find((l) => l.id === c),
     [H, c]
-  ), Y = Q?.type === "system", K = r.useCallback((i) => {
-    I(i || c), $(!0);
-  }, [c, $]), Z = r.useCallback(async (i) => {
-    a && await d(a, i);
-  }, [a, d]), ee = r.useCallback(async (i) => {
-    await h("create", i);
-  }, [h]), G = r.useCallback(async (i) => {
-    const z = i || c;
+  ), Y = Q?.type === "system", K = t.useCallback((l) => {
+    I(l || c), $(!0);
+  }, [c, $]), Z = t.useCallback(async (l) => {
+    a && await d(a, l);
+  }, [a, d]), ee = t.useCallback(async (l) => {
+    await h("create", l);
+  }, [h]), G = t.useCallback(async (l) => {
+    const z = l || c;
     z && await B(z);
-  }, [c, B]), _ = r.useCallback(async (i) => {
-    const z = i || c;
+  }, [c, B]), _ = t.useCallback(async (l) => {
+    const z = l || c;
     z && await v(z);
-  }, [c, v]), n = r.useMemo(
-    () => H.find((i) => i.id === a),
+  }, [c, v]), n = t.useMemo(
+    () => H.find((l) => l.id === a),
     [H, a]
-  ), { contentSlot: m, actionsSlot: l, settingsSlot: p } = r.useMemo(() => {
-    let i = null, z = null, q = null;
+  ), { contentSlot: m, actionsSlot: i, settingsSlot: p } = t.useMemo(() => {
+    let l = null, z = null, q = null;
     const R = [];
-    return r.Children.forEach(g, (N) => {
-      r.isValidElement(N) ? N.type === we ? i = N.props.children : N.type === Ce ? z = N.props.children : N.type === ke ? q = N.props.children : R.push(N) : R.push(N);
-    }), !i && R.length > 0 && (i = R), {
-      contentSlot: i,
+    return t.Children.forEach(g, (N) => {
+      t.isValidElement(N) ? N.type === we ? l = N.props.children : N.type === Ce ? z = N.props.children : N.type === ke ? q = N.props.children : R.push(N) : R.push(N);
+    }), !l && R.length > 0 && (l = R), {
+      contentSlot: l,
       actionsSlot: z,
       settingsSlot: q
     };
-  }, [g]), M = r.useCallback(() => j(!0), [j]), D = r.useCallback(() => h("update"), [h]), U = r.useMemo(
+  }, [g]), M = t.useCallback(() => j(!0), [j]), D = t.useCallback(() => h("update"), [h]), U = t.useMemo(
     () => ({
       isDirty: x,
       isSystemBookmark: Y,
@@ -724,7 +724,7 @@ function E({
       _
     ]
   );
-  return t === "tabs" ? /* @__PURE__ */ s(se.Provider, { value: U, children: [
+  return r === "tabs" ? /* @__PURE__ */ s(se.Provider, { value: U, children: [
     /* @__PURE__ */ e(
       Ye,
       {
@@ -740,10 +740,10 @@ function E({
         onOverflowMenuChange: A
       }
     ),
-    (m || l || p) && /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+    (m || i || p) && /* @__PURE__ */ s("div", { className: "flex items-center", children: [
       /* @__PURE__ */ s("div", { className: "flex items-center gap-[7px] flex-1 min-w-0 overflow-hidden", children: [
         m && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] min-w-0", children: m }),
-        l && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: l })
+        i && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: i })
       ] }),
       p && /* @__PURE__ */ s(O, { children: [
         /* @__PURE__ */ e("div", { className: "w-[var(--space-m)]" }),
@@ -751,7 +751,7 @@ function E({
       ] })
     ] }),
     /* @__PURE__ */ e(
-      te,
+      re,
       {
         open: k,
         onOpenChange: j,
@@ -760,7 +760,7 @@ function E({
       }
     ),
     /* @__PURE__ */ e(
-      te,
+      re,
       {
         open: F,
         onOpenChange: $,
@@ -785,12 +785,12 @@ function E({
       ),
       /* @__PURE__ */ s("div", { className: "flex items-center gap-[7px] flex-1 min-w-0 overflow-hidden", children: [
         m && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px]", children: m }),
-        l && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: l })
+        i && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: i })
       ] }),
       p && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: p })
     ] }),
     /* @__PURE__ */ e(
-      te,
+      re,
       {
         open: k,
         onOpenChange: j,
@@ -799,7 +799,7 @@ function E({
       }
     ),
     /* @__PURE__ */ e(
-      te,
+      re,
       {
         open: F,
         onOpenChange: $,