@blockbite/ui 2.1.2 → 2.1.3

package/dist/index.js

@@ -97,13 +97,13 @@ const B = /* @__PURE__ */ Ri(Ni), Ci = Ye(
   }) => {
     const u = ke(
       (f) => {
-        const h = i && e === f ? "" : f;
-        l == null || l(h);
+        const p = i && e === f ? "" : f;
+        l == null || l(p);
       },
       [l, i, e]
-    ), d = (f) => {
-      const h = (f == null ? void 0 : f.icon) || null;
-      return n === "icon" && (f != null && f.icon) ? /* @__PURE__ */ React.createElement(h, { className: "w-4 h-4" }) : n === "label" ? /* @__PURE__ */ React.createElement("span", null, f.label) : /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center gap-1" }, f.icon && /* @__PURE__ */ React.createElement(h, { className: "w-3 h-3" }), /* @__PURE__ */ React.createElement("span", null, f.label));
+    ), m = (f) => {
+      const p = (f == null ? void 0 : f.icon) || null;
+      return n === "icon" && (f != null && f.icon) ? /* @__PURE__ */ React.createElement(p, { className: "w-4 h-4" }) : n === "label" ? /* @__PURE__ */ React.createElement("span", null, f.label) : /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center gap-1" }, f.icon && /* @__PURE__ */ React.createElement(p, { className: "w-3 h-3" }), /* @__PURE__ */ React.createElement("span", null, f.label));
     };
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -114,10 +114,10 @@ const B = /* @__PURE__ */ Ri(Ni), Ci = Ye(
           o ? "blockbite-ui__button-group--tabs" : ""
         )
       },
-      r.map((f, h) => /* @__PURE__ */ React.createElement(
+      r.map((f, p) => /* @__PURE__ */ React.createElement(
         Y,
         {
-          key: `ButtonToggleGroup__${f.value}__${f.label}__${h}`,
+          key: `ButtonToggleGroup__${f.value}__${f.label}__${p}`,
           className: B("blockbite-ui__button--default", {
             grow: s,
             "justify-center": s
@@ -131,7 +131,7 @@ const B = /* @__PURE__ */ Ri(Ni), Ci = Ye(
           isPressed: e === f.value,
           onClick: () => u(f.value)
         },
-        d(f),
+        m(f),
         f.children && f.children
       ))
     );
@@ -172,7 +172,7 @@ function Kn({
             "div",
             {
               style: {
-                backgroundColor: (u = e.find((d) => d.value === t)) == null ? void 0 : u.style
+                backgroundColor: (u = e.find((m) => m.value === t)) == null ? void 0 : u.style
               },
               className: "h-3 w-3 rounded-full"
             }
@@ -257,18 +257,18 @@ const Ht = ({
       if (c) {
         a(c.body);
         const s = c.createElement("style");
-        s.innerHTML = e, c.head.appendChild(s), i.forEach(({ type: l, id: u, url: d }) => {
+        s.innerHTML = e, c.head.appendChild(s), i.forEach(({ type: l, id: u, url: m }) => {
           const f = document.getElementById(u);
           if (f) {
-            const h = document.adoptNode(
+            const p = document.adoptNode(
               f.cloneNode(!0)
             );
-            c.head.appendChild(h);
+            c.head.appendChild(p);
           } else {
-            const h = c.createElement(
+            const p = c.createElement(
               l === "script" ? "script" : "link"
             );
-            h.id = u, l === "script" ? (h.src = d, h.async = !0) : (h.rel = "stylesheet", h.href = d), c.head.appendChild(h);
+            p.id = u, l === "script" ? (p.src = m, p.async = !0) : (p.rel = "stylesheet", p.href = m), c.head.appendChild(p);
           }
         });
       }
@@ -600,9 +600,9 @@ const Ht = ({
     onBlur: s,
     type: l = "text",
     label: u,
-    helper: d = "",
+    helper: m = "",
     ...f
-  }, h) => {
+  }, p) => {
     const v = `text-control-${Math.random().toString(36).substring(2, 15)}`;
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -623,16 +623,16 @@ const Ht = ({
           value: n,
           placeholder: c,
           onFocus: () => t && t(),
-          onBlur: (b) => {
-            t && t(), s && s(b.target.value);
+          onBlur: (x) => {
+            t && t(), s && s(x.target.value);
           },
-          onChange: (b) => e && e(b.target.value),
+          onChange: (x) => e && e(x.target.value),
           readOnly: o,
-          ref: h
+          ref: p
         }
       ),
       r,
-      d && /* @__PURE__ */ React.createElement("p", { className: "text-primary !m-0 !mb-0 text-xs" }, d)
+      m && /* @__PURE__ */ React.createElement("p", { className: "text-primary !m-0 !mb-0 text-xs" }, m)
     );
   }
 );
@@ -645,92 +645,95 @@ const Gn = ({
   onDelete: r,
   onUpdate: a,
   onSwitch: o,
-  renderItemActions: c,
-  renderItemContent: s,
-  addons: l,
-  className: u = "",
-  footerSlot: d,
-  footerSlotClassName: f = "",
-  badge: h = ""
+  allowCreate: c = !0,
+  allowDelete: s = !0,
+  allowRename: l = !0,
+  renderItemActions: u,
+  renderItemContent: m,
+  addons: f,
+  className: p = "",
+  footerSlot: v,
+  footerSlotClassName: x = "",
+  badge: b = ""
 }) => {
-  const [v, b] = A({
+  const [g, z] = A({
     id: "",
     title: ""
-  }), [y, w] = A(!1), N = U(null), C = () => {
-    n();
-  }, x = () => {
-    if (!e || t.length === 0) return;
-    const m = t.filter((T) => T.id !== (e == null ? void 0 : e.id)), E = t.findIndex((T) => T.id === (e == null ? void 0 : e.id)), k = m[E] || m[0];
-    r(e.id), i(k);
-  }, L = (m) => {
-    w(!0), v.id && a(v.id, { title: m }), setTimeout(() => {
-      b({ id: "", title: "" }), w(!1);
-    }, 500);
-  }, I = (m) => !h || !m[h] ? null : /* @__PURE__ */ React.createElement(Ht, { className: "ml-2 max-w-[80px] text-sm" }, m[h]);
+  }), [I, y] = A(!1), L = U(null), k = () => {
+    c && n();
+  }, d = () => {
+    if (!s || !e || t.length === 0) return;
+    const R = t.filter((_) => _.id !== (e == null ? void 0 : e.id)), O = t.findIndex((_) => _.id === (e == null ? void 0 : e.id)), M = R[O] || R[0];
+    r(e.id), i(M);
+  }, S = (R) => {
+    l && (y(!0), g.id && a(g.id, { title: R }), setTimeout(() => {
+      z({ id: "", title: "" }), y(!1);
+    }, 500));
+  }, T = (R) => !b || !R[b] ? null : /* @__PURE__ */ React.createElement(Ht, { className: "ml-2 max-w-[80px] text-sm" }, R[b]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: B("flex flex-col justify-between h-full", u)
+      className: B("flex flex-col justify-between h-full", p)
     },
-    /* @__PURE__ */ React.createElement("ul", { className: "divide-y overflow-auto" }, l, t.length > 0 && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border border-b border-border" }, t.map((m) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("ul", { className: "divide-y overflow-auto" }, f, t.length > 0 && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border border-b border-border" }, t.map((R) => /* @__PURE__ */ React.createElement(
       "li",
       {
-        key: `data__${m.id}`,
+        key: `data__${R.id}`,
         className: B(
           "relative !mb-0 flex flex-col  hover:bg-wp/10",
           {
-            "bg-[#1e40af]/20": m.id === (e == null ? void 0 : e.id)
+            "bg-[#1e40af]/20": R.id === (e == null ? void 0 : e.id)
           }
         )
       },
       /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 relative" }, /* @__PURE__ */ React.createElement(
         "button",
         {
-          className: "text-gray-medium w-full truncate px-3 py-2 text-left text-sm/6 font-semibold hover:text-wordpress",
+          className: "text-gray-medium w-full truncate py-1 pl-2  text-left text-[11px]! font-semibold hover:text-wordpress",
           onClick: () => {
-            o(e == null ? void 0 : e.id, { ...e }), i(m);
+            o(e == null ? void 0 : e.id, { ...e }), i(R);
           },
           onDoubleClick: () => {
-            b({ id: m.id, title: m.title || "" });
+            l && z({ id: R.id, title: R.title || "" });
           }
         },
-        y && v.id === m.id ? /* @__PURE__ */ React.createElement("span", { className: "animate-pulse text-gray-medium" }, v.title, " ", I(m)) : /* @__PURE__ */ React.createElement("span", { className: "text-gray-medium" }, m.title || "Untitled", " ", I(m))
-      ), v.id === m.id && !y && /* @__PURE__ */ React.createElement(
+        I && g.id === R.id ? /* @__PURE__ */ React.createElement("span", { className: "animate-pulse text-gray-medium" }, g.title, " ", T(R)) : /* @__PURE__ */ React.createElement("span", { className: "text-gray-medium" }, R.title || "Untitled", " ", T(R))
+      ), g.id === R.id && !I && /* @__PURE__ */ React.createElement(
         jt,
         {
           className: "absolute left-1 top-0 w-[calc(100%-.5rem)] h-full",
           inputClassName: "w-full",
-          defaultValue: v.title,
-          onChange: (E) => b({ ...v, title: E }),
-          ref: N,
-          onBlur: () => L(v.title)
+          defaultValue: g.title,
+          onChange: (O) => z({ ...g, title: O }),
+          ref: L,
+          onBlur: () => S(g.title)
         }
-      )), c && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 pr-1" }, c(m))),
-      s && s(m, m.id === (e == null ? void 0 : e.id))
+      )), u && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 pr-1" }, u(R))),
+      m && m(R, R.id === (e == null ? void 0 : e.id))
     ))))),
-    /* @__PURE__ */ React.createElement(
+    (v || c || s) && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: B(
           "flex flex-wrap justify-center gap-2 p-2",
-          f
+          x
         )
       },
-      d,
-      /* @__PURE__ */ React.createElement(
+      v,
+      c && /* @__PURE__ */ React.createElement(
         Y,
         {
-          onClick: C,
+          onClick: k,
           icon: /* @__PURE__ */ React.createElement($i, { className: "h-4 w-4" }),
           variant: "tertiary",
           size: "compact"
         },
         "Add"
       ),
-      /* @__PURE__ */ React.createElement(
+      s && /* @__PURE__ */ React.createElement(
         Y,
         {
-          onClick: x,
+          onClick: d,
           icon: /* @__PURE__ */ React.createElement(Bi, { className: "h-4 w-4" }),
           variant: "tertiary",
           size: "compact",
@@ -790,13 +793,13 @@ Received: { icon: <ColumnsIcon /> }`
     l(i);
   }, [i]);
   const u = [
-    ...o.map((h) => ({
-      icon: h.icon,
-      label: h.label,
-      title: h.label,
-      value: h.value,
+    ...o.map((p) => ({
+      icon: p.icon,
+      label: p.label,
+      title: p.label,
+      value: p.value,
       onClick: () => {
-        l(h.value), a(h.value);
+        l(p.value), a(p.value);
       }
     })),
     {
@@ -808,13 +811,13 @@ Received: { icon: <ColumnsIcon /> }`
       }
     }
   ];
-  let d = "1em";
-  return r === "medium" ? d = "1.5em" : r === "large" && (d = "2em"), /* @__PURE__ */ React.createElement(
+  let m = "1em";
+  return r === "medium" ? m = "1.5em" : r === "large" && (m = "2em"), /* @__PURE__ */ React.createElement(
     ri,
     {
       controls: u,
       className: B("blockbite-ui__dropdown-picker", e),
-      icon: ((f = o.find((h) => h.value === s)) == null ? void 0 : f.icon) || /* @__PURE__ */ React.createElement(He, { width: d, height: d, icon: n }),
+      icon: ((f = o.find((p) => p.value === s)) == null ? void 0 : f.icon) || /* @__PURE__ */ React.createElement(He, { width: m, height: m, icon: n }),
       label: t || "Select",
       ...c
     }
@@ -847,10 +850,10 @@ function nr({
 }) {
   const e = U(null), [i, n] = A({ x: 100, y: 100 }), [r, a] = A(!1), [o, c] = A({ x: 0, y: 0 });
   j(() => {
-    const l = (d) => {
+    const l = (m) => {
       r && n({
-        x: d.clientX - o.x,
-        y: d.clientY - o.y
+        x: m.clientX - o.x,
+        y: m.clientY - o.y
       });
     }, u = () => a(!1);
     return window.addEventListener("mousemove", l), window.addEventListener("mouseup", u), () => {
@@ -1041,40 +1044,40 @@ function he(t) {
   return Number.isFinite(i) ? Math.min(100, Math.max(0, i)) : void 0;
 }
 function ar(t, e) {
-  var f, h, v, b;
+  var f, p, v, x;
   if (!t) return null;
-  const i = t["gradient-direction"], n = i === Ke ? "radial" : "linear", r = n === "radial" ? "to-r" : i && je[i] || "to-r", a = [], o = (f = t["gradient-from"]) == null ? void 0 : f[0], c = (h = t["gradient-from-pos"]) == null ? void 0 : h[0];
+  const i = t["gradient-direction"], n = i === Ke ? "radial" : "linear", r = n === "radial" ? "to-r" : i && je[i] || "to-r", a = [], o = (f = t["gradient-from"]) == null ? void 0 : f[0], c = (p = t["gradient-from-pos"]) == null ? void 0 : p[0];
   if (o != null && o.from) {
-    const y = String(o.from), { opacityFromToken: w } = fe(e, y);
+    const b = String(o.from), { opacityFromToken: g } = fe(e, b);
     a.push({
       id: "from",
       role: "from",
-      colorToken: y,
+      colorToken: b,
       position: he(c == null ? void 0 : c.from) ?? 0,
-      opacity: w ?? 100
+      opacity: g ?? 100
     });
   }
   const s = t["gradient-via"] || [], l = t["gradient-via-pos"] || [];
-  s.forEach((y, w) => {
+  s.forEach((b, g) => {
     var L;
-    const N = String(y.via), { opacityFromToken: C } = fe(e, N), x = (L = l[w]) == null ? void 0 : L.via;
+    const z = String(b.via), { opacityFromToken: I } = fe(e, z), y = (L = l[g]) == null ? void 0 : L.via;
     a.push({
-      id: `via-${w}`,
+      id: `via-${g}`,
       role: "via",
-      colorToken: N,
-      position: he(x) ?? 50,
-      opacity: C ?? 100
+      colorToken: z,
+      position: he(y) ?? 50,
+      opacity: I ?? 100
     });
   });
-  const u = (v = t["gradient-to"]) == null ? void 0 : v[0], d = (b = t["gradient-to-pos"]) == null ? void 0 : b[0];
+  const u = (v = t["gradient-to"]) == null ? void 0 : v[0], m = (x = t["gradient-to-pos"]) == null ? void 0 : x[0];
   if (u != null && u.to) {
-    const y = String(u.to), { opacityFromToken: w } = fe(e, y);
+    const b = String(u.to), { opacityFromToken: g } = fe(e, b);
     a.push({
       id: "to",
       role: "to",
-      colorToken: y,
-      position: he(d == null ? void 0 : d.to) ?? 100,
-      opacity: w ?? 100
+      colorToken: b,
+      position: he(m == null ? void 0 : m.to) ?? 100,
+      opacity: g ?? 100
     });
   }
   return a.length ? { kind: n, direction: r, stops: ve(a) } : null;
@@ -1187,12 +1190,12 @@ function ur(t) {
   return Xi(Yi(t));
 }
 const mr = (t) => {
-  var h, v, b, y, w, N, C, x, L;
-  const e = Array.isArray(t) ? t.filter((I) => String((I == null ? void 0 : I.value) ?? "").trim() !== "") : [];
+  var p, v, x, b, g, z, I, y, L;
+  const e = Array.isArray(t) ? t.filter((k) => String((k == null ? void 0 : k.value) ?? "").trim() !== "") : [];
   if (e.length === 0)
     return null;
   const n = (Array.isArray(t) ? t : []).some(
-    (I) => [
+    (k) => [
       "gradient-direction",
       "gradient-from",
       "gradient-from-pos",
@@ -1200,11 +1203,11 @@ const mr = (t) => {
       "gradient-via-pos",
       "gradient-to",
       "gradient-to-pos"
-    ].includes(I == null ? void 0 : I.id)
-  ), r = (I) => e.filter((m) => m.id === I);
-  if (n && !!!((h = r("gradient-from")[0]) != null && h.value || (v = r("gradient-to")[0]) != null && v.value || (b = r("gradient-direction")[0]) != null && b.value || r("gradient-via").length && r("gradient-via").some((m) => !!m.value) || (y = r("gradient-from-pos")[0]) != null && y.value || (w = r("gradient-to-pos")[0]) != null && w.value || r("gradient-via-pos").length && r("gradient-via-pos").some((m) => !!m.value)))
+    ].includes(k == null ? void 0 : k.id)
+  ), r = (k) => e.filter((d) => d.id === k);
+  if (n && !!!((p = r("gradient-from")[0]) != null && p.value || (v = r("gradient-to")[0]) != null && v.value || (x = r("gradient-direction")[0]) != null && x.value || r("gradient-via").length && r("gradient-via").some((d) => !!d.value) || (b = r("gradient-from-pos")[0]) != null && b.value || (g = r("gradient-to-pos")[0]) != null && g.value || r("gradient-via-pos").length && r("gradient-via-pos").some((d) => !!d.value)))
     return null;
-  const a = [], o = (N = r("gradient-from")[0]) == null ? void 0 : N.value, c = he((C = r("gradient-from-pos")[0]) == null ? void 0 : C.value);
+  const a = [], o = (z = r("gradient-from")[0]) == null ? void 0 : z.value, c = he((I = r("gradient-from-pos")[0]) == null ? void 0 : I.value);
   o && a.push({
     id: "from",
     role: "from",
@@ -1213,38 +1216,38 @@ const mr = (t) => {
     opacity: 100
   });
   const s = r("gradient-via"), l = r("gradient-via-pos");
-  s.forEach((I, m) => {
-    var T;
-    const E = I.value;
-    if (!E) return;
-    const k = he((T = l[m]) == null ? void 0 : T.value);
+  s.forEach((k, d) => {
+    var R;
+    const S = k.value;
+    if (!S) return;
+    const T = he((R = l[d]) == null ? void 0 : R.value);
     a.push({
-      id: `via-${m}`,
+      id: `via-${d}`,
       role: "via",
-      colorToken: E,
-      position: k ?? 50,
+      colorToken: S,
+      position: T ?? 50,
       opacity: 100
     });
   });
-  const u = (x = r("gradient-to")[0]) == null ? void 0 : x.value, d = he((L = r("gradient-to-pos")[0]) == null ? void 0 : L.value);
+  const u = (y = r("gradient-to")[0]) == null ? void 0 : y.value, m = he((L = r("gradient-to-pos")[0]) == null ? void 0 : L.value);
   if (u && a.push({
     id: "to",
     role: "to",
     colorToken: u,
-    position: d ?? 100,
+    position: m ?? 100,
     opacity: 100
   }), a.length) {
-    const I = r("gradient-direction")[0], m = I == null ? void 0 : I.value, E = m === Ke ? "radial" : "linear", k = E === "radial" ? "to-r" : m && je[m] ? je[m] : "to-r";
-    return { kind: E, direction: k, stops: ve(a) };
-  }
-  const f = e.map((I, m) => {
-    const E = (I == null ? void 0 : I.selector) ?? "";
-    let k = "via";
-    return E.startsWith("from-") || m === 0 ? k = "from" : (E.startsWith("to-") || m === e.length - 1) && (k = "to"), {
-      id: I.id ?? (k === "via" ? `via-${m}` : k),
-      role: k,
-      colorToken: I.value,
-      position: m === 0 ? 0 : m === e.length - 1 ? 100 : 50,
+    const k = r("gradient-direction")[0], d = k == null ? void 0 : k.value, S = d === Ke ? "radial" : "linear", T = S === "radial" ? "to-r" : d && je[d] ? je[d] : "to-r";
+    return { kind: S, direction: T, stops: ve(a) };
+  }
+  const f = e.map((k, d) => {
+    const S = (k == null ? void 0 : k.selector) ?? "";
+    let T = "via";
+    return S.startsWith("from-") || d === 0 ? T = "from" : (S.startsWith("to-") || d === e.length - 1) && (T = "to"), {
+      id: k.id ?? (T === "via" ? `via-${d}` : T),
+      role: T,
+      colorToken: k.value,
+      position: d === 0 ? 0 : d === e.length - 1 ? 100 : 50,
       opacity: 100
     };
   });
@@ -1266,23 +1269,23 @@ const dr = ({
   value: e,
   onChange: i
 }) => {
-  const n = U(null), [r, a] = A(null), [o, c] = A(!1), [s, l] = A(null), [u, d] = A(null), f = u ? e.stops.map(
-    (m) => m.id === u.stopId ? { ...m, position: u.position } : m
-  ) : e.stops, h = e.stops.find((m) => m.id === r), v = (m) => {
-    const E = ve(m(e.stops));
-    i({ ...e, stops: E });
-  }, b = (m, E) => {
+  const n = U(null), [r, a] = A(null), [o, c] = A(!1), [s, l] = A(null), [u, m] = A(null), f = u ? e.stops.map(
+    (d) => d.id === u.stopId ? { ...d, position: u.position } : d
+  ) : e.stops, p = e.stops.find((d) => d.id === r), v = (d) => {
+    const S = ve(d(e.stops));
+    i({ ...e, stops: S });
+  }, x = (d, S) => {
     v(
-      (k) => k.map((T) => T.id === m ? { ...T, ...E } : T)
+      (T) => T.map((R) => R.id === d ? { ...R, ...S } : R)
     );
-  }, y = (m) => {
-    e.stops.length <= 2 || v((E) => E.filter((k) => k.id !== m));
-  }, w = (m) => {
+  }, b = (d) => {
+    e.stops.length <= 2 || v((S) => S.filter((T) => T.id !== d));
+  }, g = (d) => {
     var V;
-    if (((V = m.target.dataset) == null ? void 0 : V.stopHandle) === "true") return;
-    const k = n.current;
-    if (!k) return;
-    const T = k.getBoundingClientRect(), H = (m.clientX - T.left) / T.width * 100, M = se(H, 0, 100), _ = e.stops.reduce(
+    if (((V = d.target.dataset) == null ? void 0 : V.stopHandle) === "true") return;
+    const T = n.current;
+    if (!T) return;
+    const R = T.getBoundingClientRect(), O = (d.clientX - R.left) / R.width * 100, M = se(O, 0, 100), _ = e.stops.reduce(
       (P, $) => Math.abs($.position - M) < Math.abs(P.position - M) ? $ : P,
       e.stops[0]
     ) ?? e.stops[0], D = `via-${Date.now()}`;
@@ -1296,33 +1299,33 @@ const dr = ({
         opacity: _.opacity
       }
     ]), a(D);
-  }, N = (m, E) => {
-    if (m.stopPropagation(), m.preventDefault(), !n.current) return;
-    const k = n.current;
-    a(E.id);
-    const T = k.getBoundingClientRect(), H = (_) => {
-      const D = (_.clientX - T.left) / T.width * 100, V = se(D, 0, 100);
-      d({ stopId: E.id, position: V });
+  }, z = (d, S) => {
+    if (d.stopPropagation(), d.preventDefault(), !n.current) return;
+    const T = n.current;
+    a(S.id);
+    const R = T.getBoundingClientRect(), O = (_) => {
+      const D = (_.clientX - R.left) / R.width * 100, V = se(D, 0, 100);
+      m({ stopId: S.id, position: V });
     }, M = (_) => {
-      window.removeEventListener("mousemove", H), window.removeEventListener("mouseup", M);
-      const D = (_.clientX - T.left) / T.width * 100, V = se(D, 0, 100);
-      d(null), b(E.id, { position: V });
+      window.removeEventListener("mousemove", O), window.removeEventListener("mouseup", M);
+      const D = (_.clientX - R.left) / R.width * 100, V = se(D, 0, 100);
+      m(null), x(S.id, { position: V });
     };
-    window.addEventListener("mousemove", H), window.addEventListener("mouseup", M);
-  }, C = (m, E) => {
-    a(m.id), l(E), c(!0);
-  }, x = (m) => {
-    i({ ...e, kind: m });
-  }, L = (m) => {
-    i({ ...e, direction: m });
-  }, I = ke(
-    (m) => {
-      if (!h) return;
-      const k = `[${typeof m == "string" ? m : (m == null ? void 0 : m.hex) ?? "#000000"}]`;
-      b(h.id, { colorToken: k });
+    window.addEventListener("mousemove", O), window.addEventListener("mouseup", M);
+  }, I = (d, S) => {
+    a(d.id), l(S), c(!0);
+  }, y = (d) => {
+    i({ ...e, kind: d });
+  }, L = (d) => {
+    i({ ...e, direction: d });
+  }, k = ke(
+    (d) => {
+      if (!p) return;
+      const T = `[${typeof d == "string" ? d : (d == null ? void 0 : d.hex) ?? "#000000"}]`;
+      x(p.id, { colorToken: T });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [h]
+    [p]
   );
   return /* @__PURE__ */ React.createElement("div", { className: "bb-gradient-picker space-y-3 text-xs" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
     Fi,
@@ -1333,7 +1336,7 @@ const dr = ({
         { label: "Radial", value: "radial" }
       ],
       value: e.kind,
-      onChange: (m) => x(m)
+      onChange: (d) => y(d)
     }
   )), e.kind === "linear" && /* @__PURE__ */ React.createElement(
     ye,
@@ -1349,7 +1352,7 @@ const dr = ({
         { value: "to-br", label: "to-br" }
       ],
       value: e.direction,
-      onPressedChange: (m) => L(m)
+      onPressedChange: (d) => L(d)
     }
   ), /* @__PURE__ */ React.createElement(
     "div",
@@ -1362,42 +1365,42 @@ const dr = ({
           t
         )
       },
-      onMouseDown: w
+      onMouseDown: g
     },
-    f.map((m) => /* @__PURE__ */ React.createElement(
+    f.map((d) => /* @__PURE__ */ React.createElement(
       "div",
       {
-        key: m.id,
+        key: d.id,
         "data-stop-handle": "true",
         className: "absolute top-1/2 h-4 w-4 rounded-full -translate-y-1/2 -translate-x-1/2 cursor-pointer ring-2 ring-border",
         style: {
-          left: `${m.position}%`,
-          backgroundColor: m.colorToken.startsWith("[") ? m.colorToken.slice(1, -1) : void 0
+          left: `${d.position}%`,
+          backgroundColor: d.colorToken.startsWith("[") ? d.colorToken.slice(1, -1) : void 0
         },
-        onMouseDown: (E) => N(E, m),
-        onClick: (E) => {
-          E.stopPropagation(), a(m.id);
+        onMouseDown: (S) => z(S, d),
+        onClick: (S) => {
+          S.stopPropagation(), a(d.id);
         }
       }
     ))
-  ), /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between text-[10px] font-semibold uppercase" }, /* @__PURE__ */ React.createElement("span", null, "Stops")), /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, ve(f).map((m) => {
-    const { hex: E, baseToken: k } = fe(t, m.colorToken);
+  ), /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between text-[10px] font-semibold uppercase" }, /* @__PURE__ */ React.createElement("span", null, "Stops")), /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, ve(f).map((d) => {
+    const { hex: S, baseToken: T } = fe(t, d.colorToken);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        key: m.id,
-        className: `flex gap-2 items-start ${r === m.id ? "bg-wp/10" : "bg-transparent"}`,
-        onClick: () => a(m.id)
+        key: d.id,
+        className: `flex gap-2 items-start ${r === d.id ? "bg-wp/10" : "bg-transparent"}`,
+        onClick: () => a(d.id)
       },
       /* @__PURE__ */ React.createElement(
         Ee,
         {
           className: "w-16 h-6",
           __nextHasNoMarginBottom: !0,
-          value: String(Math.round(m.position)),
-          onChange: (T) => {
-            const H = se(parseFloat(T) || 0, 0, 100);
-            b(m.id, { position: H });
+          value: String(Math.round(d.position)),
+          onChange: (R) => {
+            const O = se(parseFloat(R) || 0, 0, 100);
+            x(d.id, { position: O });
           },
           type: "text",
           suffix: "%"
@@ -1408,26 +1411,26 @@ const dr = ({
         {
           type: "button",
           className: "flex w-16 h-[32px] items-center gap border border-border",
-          onClick: (T) => C(m, T.currentTarget)
+          onClick: (R) => I(d, R.currentTarget)
         },
         /* @__PURE__ */ React.createElement(
           tt,
           {
-            colorValue: E ?? "#000000",
+            colorValue: S ?? "#000000",
             className: "!h-4 !w-4"
           }
         ),
-        /* @__PURE__ */ React.createElement("span", { className: "truncate text-[11px]" }, k)
+        /* @__PURE__ */ React.createElement("span", { className: "truncate text-[11px]" }, T)
       ),
       /* @__PURE__ */ React.createElement(
         Ee,
         {
           __nextHasNoMarginBottom: !0,
           className: "w-12",
-          value: String(Math.round(m.opacity)),
-          onChange: (T) => {
-            const H = se(parseFloat(T) || 0, 0, 100);
-            b(m.id, { opacity: H });
+          value: String(Math.round(d.opacity)),
+          onChange: (R) => {
+            const O = se(parseFloat(R) || 0, 0, 100);
+            x(d.id, { opacity: O });
           },
           type: "text",
           suffix: "%"
@@ -1438,7 +1441,7 @@ const dr = ({
         {
           type: "button",
           className: "flex h-6 w-6 items-center justify-center rounded border text-xs",
-          onClick: () => y(m.id),
+          onClick: () => b(d.id),
           disabled: e.stops.length <= 1
         },
         "–"
@@ -1447,34 +1450,34 @@ const dr = ({
   }))), /* @__PURE__ */ React.createElement(
     Wt,
     {
-      visible: o && !!h,
+      visible: o && !!p,
       anchor: s,
       onClose: () => c(!1),
       position: "bottom center",
       offset: 8
     },
-    h && /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement(xe, { title: "Theme tokens" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 max-w-[200px]" }, t.map((m) => /* @__PURE__ */ React.createElement(
+    p && /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement(xe, { title: "Theme tokens" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 max-w-[200px]" }, t.map((d) => /* @__PURE__ */ React.createElement(
       "button",
       {
-        key: m.value,
+        key: d.value,
         type: "button",
         className: "flex h-6 w-6 items-center justify-center rounded-full border",
-        onClick: () => b(h.id, {
-          colorToken: m.value
+        onClick: () => x(p.id, {
+          colorToken: d.value
         })
       },
       /* @__PURE__ */ React.createElement(
         tt,
         {
-          colorValue: m.color,
+          colorValue: d.color,
           className: "!h-5 !w-5 !rounded-full"
         }
       )
     ))), /* @__PURE__ */ React.createElement(
       oi,
       {
-        color: fe(t, h.colorToken).hex ?? "#000000",
-        onChange: I
+        color: fe(t, p.colorToken).hex ?? "#000000",
+        onChange: k
       }
     ))
   ));
@@ -1566,7 +1569,7 @@ function pr({ mediaProps: t, mediaCallback: e, className: i }) {
       height: 0
     });
   }, o = (c) => {
-    var u, d;
+    var u, m;
     const s = {
       thumbnail: null,
       medium: null,
@@ -1576,7 +1579,7 @@ function pr({ mediaProps: t, mediaCallback: e, className: i }) {
       f.width <= 768 && (s.thumbnail = f.url), f.width > 768 && f.width <= 1536 && (s.medium = f.url), f.width > 1536 && (s.large = f.url);
     });
     let l = c.type;
-    (u = c.url) != null && u.endsWith(".json") && (l = "lottie"), (d = c.url) != null && d.endsWith(".svg") && (l = "svg"), e({
+    (u = c.url) != null && u.endsWith(".json") && (l = "lottie"), (m = c.url) != null && m.endsWith(".svg") && (l = "svg"), e({
       id: c.id,
       url: c.url,
       sizes: s,
@@ -1630,17 +1633,17 @@ const Ji = ({
   showTooltip: l = !1,
   ...u
 }) => {
-  const [f] = A(-999), [h, v] = A(0);
+  const [f] = A(-999), [p, v] = A(0);
   j(() => {
     v(Math.round(parseInt(t) / (s ? 16 : 1)));
   }, [t]);
-  function b(y) {
-    if (y === -999) {
+  function x(b) {
+    if (b === -999) {
       o ? o() : a("");
       return;
     }
-    const w = y * (s ? 16 : 1);
-    a(w.toString());
+    const g = b * (s ? 16 : 1);
+    a(g.toString());
   }
   return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(
     li,
@@ -1648,19 +1651,19 @@ const Ji = ({
       __next40pxDefaultSize: !0,
       __nextHasNoMarginBottom: !0,
       label: e,
-      value: h,
+      value: p,
       min: i,
       max: n,
       showTooltip: l,
       withInputField: r,
       allowReset: c,
-      onChange: (y) => {
-        v(y), b(y);
+      onChange: (b) => {
+        v(b), x(b);
       },
       resetFallbackValue: f,
       ...u
     }
-  ), /* @__PURE__ */ React.createElement("span", null, s ? `${h * 16}px` : null, " "));
+  ), /* @__PURE__ */ React.createElement("span", null, s ? `${p * 16}px` : null, " "));
 }, Le = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, nt = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Zt = /^\d+\/\d+$/, qi = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Re = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Qi = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Gi = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, en = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, rt = (t) => Zt.test(t), _e = (t) => !!t && !Number.isNaN(Number(t)), tn = (t) => !!t && t.endsWith("%") && _e(t.slice(0, -1)), nn = (t) => qi.test(t), rn = [
   { value: "px", label: "Pixels" },
   { value: "rem", label: "Root EM" },
@@ -1683,14 +1686,14 @@ const Ji = ({
   classGroupControl: n,
   tailwindUi: r = {}
 }) => {
-  var S, R;
-  const [a, o] = A(!1), [c, s] = A("arbitrary"), [l, u] = A(""), [d, f] = A(""), h = U(null), {
+  var E, N;
+  const [a, o] = A(!1), [c, s] = A("arbitrary"), [l, u] = A(""), [m, f] = A(""), p = U(null), {
     manualFraction: v,
-    manualOptions: b,
-    manualRange: y,
-    manualCssVars: w,
-    manualArbitrary: N,
-    placeholder: C
+    manualOptions: x,
+    manualRange: b,
+    manualCssVars: g,
+    manualArbitrary: z,
+    placeholder: I
   } = (n == null ? void 0 : n.metadata) || {
     manualFraction: !0,
     manualOptions: !0,
@@ -1698,75 +1701,75 @@ const Ji = ({
     manualCssVars: !0,
     manualArbitrary: !0,
     placeholder: "0"
-  }, x = ((S = n == null ? void 0 : n.metadata) == null ? void 0 : S.rangeMin) ?? 0, L = ((R = n == null ? void 0 : n.metadata) == null ? void 0 : R.rangeMax) ?? 100;
+  }, y = ((E = n == null ? void 0 : n.metadata) == null ? void 0 : E.rangeMin) ?? 0, L = ((N = n == null ? void 0 : n.metadata) == null ? void 0 : N.rangeMax) ?? 100;
   j(() => {
-    u(H(t)), f(t), s(_(t));
+    u(O(t)), f(t), s(_(t));
   }, [t]);
-  const I = oe(
+  const k = oe(
     () => (n == null ? void 0 : n.options) || [],
     [n == null ? void 0 : n.options]
-  ), m = oe(
-    () => T(n == null ? void 0 : n.validators, [
+  ), d = oe(
+    () => R(n == null ? void 0 : n.validators, [
       "isArbitraryVariable",
       "isArbitraryValue",
       "themeGetter"
     ]),
     [n == null ? void 0 : n.validators]
-  ), E = oe(
-    () => T(n == null ? void 0 : n.validators, ["isFraction"]),
+  ), S = oe(
+    () => R(n == null ? void 0 : n.validators, ["isFraction"]),
     [n == null ? void 0 : n.validators]
-  ), k = oe(
-    () => T(n == null ? void 0 : n.validators, ["themeGetter"]),
+  ), T = oe(
+    () => R(n == null ? void 0 : n.validators, ["themeGetter"]),
     [n == null ? void 0 : n.validators]
   );
-  function T(p, g) {
-    return p ? p.some((z) => typeof z == "function" && typeof z.name == "string" ? g.includes(z.name) : !1) : !1;
-  }
-  const H = (p) => {
-    if (!p) return "";
-    const g = p.match(Le);
-    if (g) return g[2];
-    const z = p.match(nt);
-    return z ? z[2] : p;
-  }, M = (p) => {
-    if (!p) return "";
-    const g = p.trim();
-    return I.some((z) => String(z.value) === g) ? g : g.startsWith("--") ? `(${g})` : _e(g) && !Re.test(g) ? (n == null ? void 0 : n.themeProvider) && Array.isArray(n.themeProvider) && n.themeProvider.length > 0 ? g : `[${g}]` : Re.test(g) ? `[${g}]` : p;
-  }, _ = (p) => {
-    const g = (p || "").trim();
-    return I.some((z) => String(z.value) === g) ? "list" : g.startsWith("--") ? "arbitrary" : rt(g) ? "fraction" : Le.test(g) ? "arbitrary" : _e(g) && !Re.test(g) ? "native" : tn(g) || Re.test(g) ? "arbitrary" : nn(g) ? "native" : Qi.test(g) || /^#([0-9a-f]{3,8})$/i.test(g) ? "color" : (Gi.test(g) || en.test(g), "arbitrary");
-  }, D = (p) => !!(p === "" || _e(p) || Le.test(p) || nt.test(p) || I.some((g) => String(g.value) === p) || rt(p) || p === "full"), V = (p) => {
-    u(p);
+  function R(h, w) {
+    return h ? h.some((C) => typeof C == "function" && typeof C.name == "string" ? w.includes(C.name) : !1) : !1;
+  }
+  const O = (h) => {
+    if (!h) return "";
+    const w = h.match(Le);
+    if (w) return w[2];
+    const C = h.match(nt);
+    return C ? C[2] : h;
+  }, M = (h) => {
+    if (!h) return "";
+    const w = h.trim();
+    return k.some((C) => String(C.value) === w) ? w : w.startsWith("--") ? `(${w})` : _e(w) && !Re.test(w) ? (n == null ? void 0 : n.themeProvider) && Array.isArray(n.themeProvider) && n.themeProvider.length > 0 ? w : `[${w}]` : Re.test(w) ? `[${w}]` : h;
+  }, _ = (h) => {
+    const w = (h || "").trim();
+    return k.some((C) => String(C.value) === w) ? "list" : w.startsWith("--") ? "arbitrary" : rt(w) ? "fraction" : Le.test(w) ? "arbitrary" : _e(w) && !Re.test(w) ? "native" : tn(w) || Re.test(w) ? "arbitrary" : nn(w) ? "native" : Qi.test(w) || /^#([0-9a-f]{3,8})$/i.test(w) ? "color" : (Gi.test(w) || en.test(w), "arbitrary");
+  }, D = (h) => !!(h === "" || _e(h) || Le.test(h) || nt.test(h) || k.some((w) => String(w.value) === h) || rt(h) || h === "full"), V = (h) => {
+    u(h);
   }, P = () => {
-    const p = M(l);
-    D(p) ? (f(p), e(p), s(_(p))) : u(d);
-  }, $ = (p) => {
-    if (p.key === "Enter") {
-      const g = M(l);
-      D(g) ? (f(g), e(g), s(_(g))) : u(d);
-    }
-  }, O = (p) => {
+    const h = M(l);
+    D(h) ? (f(h), e(h), s(_(h))) : u(m);
+  }, $ = (h) => {
+    if (h.key === "Enter") {
+      const w = M(l);
+      D(w) ? (f(w), e(w), s(_(w))) : u(m);
+    }
+  }, H = (h) => {
     var Ge;
-    const g = l.trim(), z = !isNaN(Number(g));
+    const w = l.trim(), C = !isNaN(Number(w));
     let Z = "";
-    if (p === "")
+    if (h === "")
       Z = "";
-    else if (Zt.test(p))
-      Z = p;
-    else if (c === "list" || c === "theme" || g.startsWith("--"))
-      Z = p;
-    else if (z)
-      Z = `${g}${p}`;
+    else if (Zt.test(h))
+      Z = h;
+    else if (c === "list" || c === "theme" || w.startsWith("--"))
+      Z = h;
+    else if (C)
+      Z = `${w}${h}`;
     else {
-      const et = g.match(/^(-?\d+\.?\d*)/);
-      et ? Z = `${et[1]}${p}` : Z = p;
+      const et = w.match(/^(-?\d+\.?\d*)/);
+      et ? Z = `${et[1]}${h}` : Z = h;
     }
     u(Z);
     const ce = M(Z);
-    D(ce) && (f(ce), e(ce), s(_(ce))), (Ge = h.current) == null || Ge.focus();
-  }, K = (p) => {
-    const g = H(p), z = M(g);
-    D(z) ? (u(g), f(z), e(z), s(_(z))) : u(d);
+    D(ce) && (f(ce), e(ce), s(_(ce))), (Ge = p.current) == null || Ge.focus();
+  }, K = (h) => {
+    const w = O(h), C = M(w);
+    D(C) ? (u(w), f(C), e(C), s(_(C))) : u(m);
   }, ne = (() => {
     switch (c) {
       case "fraction":
@@ -1781,48 +1784,48 @@ const Ji = ({
         return /* @__PURE__ */ React.createElement(Ft, null);
     }
   })(), F = () => o(!0), re = () => {
-    var p, g, z;
-    return E ? /* @__PURE__ */ React.createElement(
+    var h, w, C;
+    return S ? /* @__PURE__ */ React.createElement(
       ye,
       {
-        options: ((z = (g = (p = r == null ? void 0 : r.units) == null ? void 0 : p.spacing) == null ? void 0 : g.fraction) == null ? void 0 : z.options) || [],
+        options: ((C = (w = (h = r == null ? void 0 : r.units) == null ? void 0 : h.spacing) == null ? void 0 : w.fraction) == null ? void 0 : C.options) || [],
         size: "small",
         value: l,
         className: "mt-0 w-[200px]",
-        onPressedChange: (Z) => O(String(Z))
+        onPressedChange: (Z) => H(String(Z))
       }
     ) : null;
   }, W = () => /* @__PURE__ */ React.createElement(
     ye,
     {
-      options: I.map((p) => ({
-        value: p.value,
-        label: p.label
+      options: k.map((h) => ({
+        value: h.value,
+        label: h.label
       })),
       size: "small",
       className: "mt-0 w-[200px]",
       value: l,
-      onPressedChange: (p) => K(String(p))
+      onPressedChange: (h) => K(String(h))
     }
   ), J = oe(() => {
     try {
-      const p = window.getComputedStyle(document.documentElement), g = [];
-      for (let z = 0; z < p.length; z++) {
-        const Z = p[z];
+      const h = window.getComputedStyle(document.documentElement), w = [];
+      for (let C = 0; C < h.length; C++) {
+        const Z = h[C];
         if (Z.startsWith("--wp--custom--")) {
-          const ce = p.getPropertyValue(Z).trim();
-          g.push({
+          const ce = h.getPropertyValue(Z).trim();
+          w.push({
             value: Z,
             label: `${Z} (${ce})`
           });
         }
       }
-      return g;
+      return w;
     } catch {
       return [];
     }
   }, []), ae = () => {
-    const g = [
+    const w = [
       ...J,
       {
         value: "--custom-css-var",
@@ -1833,24 +1836,24 @@ const Ji = ({
       ye,
       {
         className: "mt-0 w-[200px]",
-        options: g,
+        options: w,
         size: "small",
         value: l,
-        onPressedChange: (z) => K(String(z))
+        onPressedChange: (C) => K(String(C))
       }
     );
   }, le = () => /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
     ye,
     {
       className: "mt-0 w-[200px]",
-      options: rn.map((p) => ({
-        value: p.value,
-        label: p.value,
-        tooltip: p.label
+      options: rn.map((h) => ({
+        value: h.value,
+        label: h.value,
+        tooltip: h.label
       })),
       size: "small",
       value: l,
-      onPressedChange: (p) => O(String(p))
+      onPressedChange: (h) => H(String(h))
     }
   ));
   return /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-col items-baseline" }, /* @__PURE__ */ React.createElement(
@@ -1862,7 +1865,7 @@ const Ji = ({
       onChange: V,
       onBlur: P,
       onKeyDown: $,
-      placeholder: C,
+      placeholder: I,
       autoComplete: "off",
       suffix: /* @__PURE__ */ React.createElement($t, null, /* @__PURE__ */ React.createElement(
         Wt,
@@ -1873,22 +1876,22 @@ const Ji = ({
           className: "overflow-x-hidden w-[280px] max-h-[400px]",
           onVisibleChange: o
         },
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col divide-y divide-border -m-4" }, y && /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col divide-y divide-border -m-4" }, b && /* @__PURE__ */ React.createElement(
           Ji,
           {
             value: l,
             label: "Number Value",
             className: "w-[200px] pt-4 pb-2 px-4",
-            min: x,
+            min: y,
             max: L,
             gridMode: !1,
             showTooltip: !1,
-            onValueChange: (p) => {
-              const g = M(p);
-              D(g) ? (u(p), f(g), e(g), s(_(g))) : u(p);
+            onValueChange: (h) => {
+              const w = M(h);
+              D(w) ? (u(h), f(w), e(w), s(_(w))) : u(h);
             }
           }
-        ), E && v && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Fraction" }), re()), I.length > 0 && b && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Options" }), W()), m && N && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Arbitrary Units" }), le()), k && w && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(
+        ), S && v && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Fraction" }), re()), k.length > 0 && x && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Options" }), W()), d && z && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(xe, { title: "Arbitrary Units" }), le()), T && g && /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(
           xe,
           {
             title: "CSS Variables",
@@ -1935,20 +1938,20 @@ const Ji = ({
   shouldCloseOnClickOutside: l = !0,
   ...u
 }) => {
-  const d = e !== void 0, [f, h] = A(i), v = d ? e : f, b = (x) => {
-    d || h(x), n == null || n(x);
-  }, y = () => b(!0), w = () => {
-    c == null || c(), b(!1);
-  }, N = ge.toArray(t).some(
-    (x) => we(x) && x.type === at
+  const m = e !== void 0, [f, p] = A(i), v = m ? e : f, x = (y) => {
+    m || p(y), n == null || n(y);
+  }, b = () => x(!0), g = () => {
+    c == null || c(), x(!1);
+  }, z = ge.toArray(t).some(
+    (y) => we(y) && y.type === at
   );
   j(() => {
     n == null || n(v);
   }, [v, n]);
-  let C = {};
-  return N ? C = { labelledby: "bb-modal-heading" } : r && (C = { label: r }), /* @__PURE__ */ React.createElement(Ut.Provider, { value: { closeModal: w, openModal: y } }, ge.map(
+  let I = {};
+  return z ? I = { labelledby: "bb-modal-heading" } : r && (I = { label: r }), /* @__PURE__ */ React.createElement(Ut.Provider, { value: { closeModal: g, openModal: b } }, ge.map(
     t,
-    (x) => we(x) && x.type === on ? x : null
+    (y) => we(y) && y.type === on ? y : null
   ), v && /* @__PURE__ */ React.createElement(
     ci,
     {
@@ -1959,8 +1962,8 @@ const Ji = ({
       ),
       size: o,
       title: "",
-      aria: C,
-      onRequestClose: w,
+      aria: I,
+      onRequestClose: g,
       shouldCloseOnEsc: s,
       shouldCloseOnClickOutside: l,
       ...u
@@ -1971,18 +1974,18 @@ const Ji = ({
         "aria-label": "Close",
         label: "Close",
         variant: "secondary",
-        onClick: w
+        onClick: g
       },
       /* @__PURE__ */ React.createElement(Ti, { className: "h-4 w-4" })
     )), ge.map(
       t,
-      (x) => we(x) && x.type === at ? x : null
+      (y) => we(y) && y.type === at ? y : null
     ), ge.map(
       t,
-      (x) => we(x) && x.type === sn ? x : null
+      (y) => we(y) && y.type === sn ? y : null
     ), ge.map(
       t,
-      (x) => we(x) && x.type === an ? x : null
+      (y) => we(y) && y.type === an ? y : null
     ))
   ));
 }, at = ({ children: t, className: e = "", ...i }) => /* @__PURE__ */ React.createElement(
@@ -2120,7 +2123,7 @@ function Sr(t) {
   const { media: e, bbFill: i } = t, { url: n, alt: r, sizes: a } = e;
   if (a === void 0)
     return /* @__PURE__ */ React.createElement("picture", { className: "b_fill" }, /* @__PURE__ */ React.createElement("img", { src: n, alt: r, className: `b_media ${i}` }));
-  const { thumbnail: o, medium: c, large: s } = a, l = o || n, u = c || n, d = s || n;
+  const { thumbnail: o, medium: c, large: s } = a, l = o || n, u = c || n, m = s || n;
   return /* @__PURE__ */ React.createElement("picture", { className: "b_fill" }, l ? /* @__PURE__ */ React.createElement(
     "source",
     {
@@ -2135,11 +2138,11 @@ function Sr(t) {
       srcSet: u,
       className: `b_media ${i}`
     }
-  ) : null, d ? /* @__PURE__ */ React.createElement(
+  ) : null, m ? /* @__PURE__ */ React.createElement(
     "source",
     {
       media: "(min-width: 1536px)",
-      srcSet: d,
+      srcSet: m,
       className: `b_media ${i}`
     }
   ) : null, u ? /* @__PURE__ */ React.createElement("img", { src: u, alt: r, className: `b_media ${i}` }) : null);
@@ -2172,31 +2175,31 @@ const cn = 2e3, zr = ({
   disabled: s = !1,
   savedLabel: l = "Saved",
   savedDuration: u = cn,
-  ...d
+  ...m
 }) => {
-  const [f, h] = A(!1), [v, b] = A(!1), y = U(null), w = o === "icon" || o === "icon-lg";
+  const [f, p] = A(!1), [v, x] = A(!1), b = U(null), g = o === "icon" || o === "icon-lg";
   j(() => () => {
-    y.current && window.clearTimeout(y.current);
+    b.current && window.clearTimeout(b.current);
   }, []);
-  const N = async () => {
+  const z = async () => {
     if (!(s || f)) {
-      y.current && window.clearTimeout(y.current), b(!1), h(!0);
+      b.current && window.clearTimeout(b.current), x(!1), p(!0);
       try {
-        await Promise.resolve(r == null ? void 0 : r()), h(!1), b(!0), y.current = window.setTimeout(() => {
-          b(!1);
+        await Promise.resolve(r == null ? void 0 : r()), p(!1), x(!0), b.current = window.setTimeout(() => {
+          x(!1);
         }, u);
       } catch {
-        h(!1);
+        p(!1);
       }
     }
-  }, C = v ? l : i, x = v ? _i : c;
+  }, I = v ? l : i, y = v ? _i : c;
   return /* @__PURE__ */ React.createElement(
     Y,
     {
-      ...d,
+      ...m,
       size: e,
       variant: a,
-      label: C,
+      label: I,
       showTooltip: !0,
       disabled: s || f,
       isBusy: f,
@@ -2210,17 +2213,17 @@ const cn = 2e3, zr = ({
         { "is-tertiary": a === "tertiary" },
         { "is-icon": o === "icon" }
       ),
-      onClick: N
+      onClick: z
     },
-    x && /* @__PURE__ */ React.createElement(
+    y && /* @__PURE__ */ React.createElement(
       He,
       {
-        icon: x,
+        icon: y,
         className: B({ "h-4 w-4": o === "icon-lg" })
       }
     ),
-    w ? null : v ? l : t,
-    C && !t && !w ? /* @__PURE__ */ React.createElement("span", null, C) : null
+    g ? null : v ? l : t,
+    I && !t && !g ? /* @__PURE__ */ React.createElement("span", null, I) : null
   );
 }, Nr = ({
   children: t,
@@ -2360,10 +2363,10 @@ var Ve, lt, ct, dn = (st || (st = 1, Ve = ot, (function() {
   }
   function c(s) {
     if (typeof s == "number") return s;
-    if ((function(d) {
-      return typeof d == "symbol" || /* @__PURE__ */ (function(f) {
+    if ((function(m) {
+      return typeof m == "symbol" || /* @__PURE__ */ (function(f) {
         return !!f && typeof f == "object";
-      })(d) && a.call(d) == "[object Symbol]";
+      })(m) && a.call(m) == "[object Symbol]";
     })(s)) return NaN;
     if (o(s)) {
       var l = typeof s.valueOf == "function" ? s.valueOf() : s;
@@ -2375,72 +2378,72 @@ var Ve, lt, ct, dn = (st || (st = 1, Ve = ot, (function() {
     return u || n.test(s) ? r(s.slice(2), u ? 2 : 8) : e.test(s) ? NaN : +s;
   }
   return ut = function(s, l, u) {
-    return u === void 0 && (u = l, l = void 0), u !== void 0 && (u = (u = c(u)) == u ? u : 0), l !== void 0 && (l = (l = c(l)) == l ? l : 0), (function(d, f, h) {
-      return d == d && (h !== void 0 && (d = d <= h ? d : h), f !== void 0 && (d = d >= f ? d : f)), d;
+    return u === void 0 && (u = l, l = void 0), u !== void 0 && (u = (u = c(u)) == u ? u : 0), l !== void 0 && (l = (l = c(l)) == l ? l : 0), (function(m, f, p) {
+      return m == m && (p !== void 0 && (m = m <= p ? m : p), f !== void 0 && (m = m >= f ? m : f)), m;
     })(c(s), l, u);
   };
 })()), pn = Se((function() {
   if (ft) return dt;
   ft = 1;
-  var t = /^\s+|\s+$/g, e = /^[-+]0x[0-9a-f]+$/i, i = /^0b[01]+$/i, n = /^0o[0-7]+$/i, r = parseInt, a = typeof ze == "object" && ze && ze.Object === Object && ze, o = typeof self == "object" && self && self.Object === Object && self, c = a || o || Function("return this")(), s = Object.prototype.toString, l = Math.max, u = Math.min, d = function() {
+  var t = /^\s+|\s+$/g, e = /^[-+]0x[0-9a-f]+$/i, i = /^0b[01]+$/i, n = /^0o[0-7]+$/i, r = parseInt, a = typeof ze == "object" && ze && ze.Object === Object && ze, o = typeof self == "object" && self && self.Object === Object && self, c = a || o || Function("return this")(), s = Object.prototype.toString, l = Math.max, u = Math.min, m = function() {
     return c.Date.now();
   };
   function f(v) {
-    var b = typeof v;
-    return !!v && (b == "object" || b == "function");
+    var x = typeof v;
+    return !!v && (x == "object" || x == "function");
   }
-  function h(v) {
+  function p(v) {
     if (typeof v == "number") return v;
-    if ((function(w) {
-      return typeof w == "symbol" || /* @__PURE__ */ (function(N) {
-        return !!N && typeof N == "object";
-      })(w) && s.call(w) == "[object Symbol]";
+    if ((function(g) {
+      return typeof g == "symbol" || /* @__PURE__ */ (function(z) {
+        return !!z && typeof z == "object";
+      })(g) && s.call(g) == "[object Symbol]";
     })(v)) return NaN;
     if (f(v)) {
-      var b = typeof v.valueOf == "function" ? v.valueOf() : v;
-      v = f(b) ? b + "" : b;
+      var x = typeof v.valueOf == "function" ? v.valueOf() : v;
+      v = f(x) ? x + "" : x;
     }
     if (typeof v != "string") return v === 0 ? v : +v;
     v = v.replace(t, "");
-    var y = i.test(v);
-    return y || n.test(v) ? r(v.slice(2), y ? 2 : 8) : e.test(v) ? NaN : +v;
+    var b = i.test(v);
+    return b || n.test(v) ? r(v.slice(2), b ? 2 : 8) : e.test(v) ? NaN : +v;
   }
-  return dt = function(v, b, y) {
-    var w, N, C, x, L, I, m = 0, E = !1, k = !1, T = !0;
+  return dt = function(v, x, b) {
+    var g, z, I, y, L, k, d = 0, S = !1, T = !1, R = !0;
     if (typeof v != "function") throw new TypeError("Expected a function");
-    function H(P) {
-      var $ = w, O = N;
-      return w = N = void 0, m = P, x = v.apply(O, $);
+    function O(P) {
+      var $ = g, H = z;
+      return g = z = void 0, d = P, y = v.apply(H, $);
     }
     function M(P) {
-      var $ = P - I;
-      return I === void 0 || $ >= b || $ < 0 || k && P - m >= C;
+      var $ = P - k;
+      return k === void 0 || $ >= x || $ < 0 || T && P - d >= I;
     }
     function _() {
-      var P = d();
+      var P = m();
       if (M(P)) return D(P);
       L = setTimeout(_, (function($) {
-        var O = b - ($ - I);
-        return k ? u(O, C - ($ - m)) : O;
+        var H = x - ($ - k);
+        return T ? u(H, I - ($ - d)) : H;
       })(P));
     }
     function D(P) {
-      return L = void 0, T && w ? H(P) : (w = N = void 0, x);
+      return L = void 0, R && g ? O(P) : (g = z = void 0, y);
     }
     function V() {
-      var P = d(), $ = M(P);
-      if (w = arguments, N = this, I = P, $) {
-        if (L === void 0) return (function(O) {
-          return m = O, L = setTimeout(_, b), E ? H(O) : x;
-        })(I);
-        if (k) return L = setTimeout(_, b), H(I);
+      var P = m(), $ = M(P);
+      if (g = arguments, z = this, k = P, $) {
+        if (L === void 0) return (function(H) {
+          return d = H, L = setTimeout(_, x), S ? O(H) : y;
+        })(k);
+        if (T) return L = setTimeout(_, x), O(k);
       }
-      return L === void 0 && (L = setTimeout(_, b)), x;
+      return L === void 0 && (L = setTimeout(_, x)), y;
     }
-    return b = h(b) || 0, f(y) && (E = !!y.leading, C = (k = "maxWait" in y) ? l(h(y.maxWait) || 0, b) : C, T = "trailing" in y ? !!y.trailing : T), V.cancel = function() {
-      L !== void 0 && clearTimeout(L), m = 0, w = I = N = L = void 0;
+    return x = p(x) || 0, f(b) && (S = !!b.leading, I = (T = "maxWait" in b) ? l(p(b.maxWait) || 0, x) : I, R = "trailing" in b ? !!b.trailing : R), V.cancel = function() {
+      L !== void 0 && clearTimeout(L), d = 0, g = k = z = L = void 0;
     }, V.flush = function() {
-      return L === void 0 ? x : D(d());
+      return L === void 0 ? y : D(m());
     }, V;
   };
 })()), ht = {
@@ -2463,13 +2466,13 @@ function vn(t) {
   return s.current = t.onResize, window.React.useEffect(() => {
     if (!e.current || typeof window > "u" || !("ResizeObserver" in window)) return;
     const l = new ResizeObserver(([u]) => {
-      const d = i === "border-box" ? "borderBoxSize" : i === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", f = pt(u, d, "inlineSize"), h = pt(u, d, "blockSize");
-      if (c.current.width !== f || c.current.height !== h) {
+      const m = i === "border-box" ? "borderBoxSize" : i === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", f = pt(u, m, "inlineSize"), p = pt(u, m, "blockSize");
+      if (c.current.width !== f || c.current.height !== p) {
         const v = {
           width: f,
-          height: h
+          height: p
         };
-        c.current.width = f, c.current.height = h, s.current ? s.current(v) : o() && a(v);
+        c.current.width = f, c.current.height = p, s.current ? s.current(v) : o() && a(v);
       }
     });
     return l.observe(e.current, {
@@ -2513,10 +2516,10 @@ var gt, wt = {
   function r(s, l, u) {
     this.fn = s, this.context = l, this.once = u || !1;
   }
-  function a(s, l, u, d, f) {
+  function a(s, l, u, m, f) {
     if (typeof u != "function") throw new TypeError("The listener must be a function");
-    var h = new r(u, d || s, f), v = i ? i + l : l;
-    return s._events[v] ? s._events[v].fn ? s._events[v] = [s._events[v], h] : s._events[v].push(h) : (s._events[v] = h, s._eventsCount++), s;
+    var p = new r(u, m || s, f), v = i ? i + l : l;
+    return s._events[v] ? s._events[v].fn ? s._events[v] = [s._events[v], p] : s._events[v].push(p) : (s._events[v] = p, s._eventsCount++), s;
   }
   function o(s, l) {
     --s._eventsCount === 0 ? s._events = new n() : delete s._events[l];
@@ -2533,50 +2536,50 @@ var gt, wt = {
     var l = i ? i + s : s, u = this._events[l];
     if (!u) return [];
     if (u.fn) return [u.fn];
-    for (var d = 0, f = u.length, h = new Array(f); d < f; d++) h[d] = u[d].fn;
-    return h;
+    for (var m = 0, f = u.length, p = new Array(f); m < f; m++) p[m] = u[m].fn;
+    return p;
   }, c.prototype.listenerCount = function(s) {
     var l = i ? i + s : s, u = this._events[l];
     return u ? u.fn ? 1 : u.length : 0;
-  }, c.prototype.emit = function(s, l, u, d, f, h) {
+  }, c.prototype.emit = function(s, l, u, m, f, p) {
     var v = i ? i + s : s;
     if (!this._events[v]) return !1;
-    var b, y, w = this._events[v], N = arguments.length;
-    if (w.fn) {
-      switch (w.once && this.removeListener(s, w.fn, void 0, !0), N) {
+    var x, b, g = this._events[v], z = arguments.length;
+    if (g.fn) {
+      switch (g.once && this.removeListener(s, g.fn, void 0, !0), z) {
         case 1:
-          return w.fn.call(w.context), !0;
+          return g.fn.call(g.context), !0;
         case 2:
-          return w.fn.call(w.context, l), !0;
+          return g.fn.call(g.context, l), !0;
         case 3:
-          return w.fn.call(w.context, l, u), !0;
+          return g.fn.call(g.context, l, u), !0;
         case 4:
-          return w.fn.call(w.context, l, u, d), !0;
+          return g.fn.call(g.context, l, u, m), !0;
         case 5:
-          return w.fn.call(w.context, l, u, d, f), !0;
+          return g.fn.call(g.context, l, u, m, f), !0;
         case 6:
-          return w.fn.call(w.context, l, u, d, f, h), !0;
+          return g.fn.call(g.context, l, u, m, f, p), !0;
       }
-      for (y = 1, b = new Array(N - 1); y < N; y++) b[y - 1] = arguments[y];
-      w.fn.apply(w.context, b);
+      for (b = 1, x = new Array(z - 1); b < z; b++) x[b - 1] = arguments[b];
+      g.fn.apply(g.context, x);
     } else {
-      var C, x = w.length;
-      for (y = 0; y < x; y++) switch (w[y].once && this.removeListener(s, w[y].fn, void 0, !0), N) {
+      var I, y = g.length;
+      for (b = 0; b < y; b++) switch (g[b].once && this.removeListener(s, g[b].fn, void 0, !0), z) {
         case 1:
-          w[y].fn.call(w[y].context);
+          g[b].fn.call(g[b].context);
           break;
         case 2:
-          w[y].fn.call(w[y].context, l);
+          g[b].fn.call(g[b].context, l);
           break;
         case 3:
-          w[y].fn.call(w[y].context, l, u);
+          g[b].fn.call(g[b].context, l, u);
           break;
         case 4:
-          w[y].fn.call(w[y].context, l, u, d);
+          g[b].fn.call(g[b].context, l, u, m);
           break;
         default:
-          if (!b) for (C = 1, b = new Array(N - 1); C < N; C++) b[C - 1] = arguments[C];
-          w[y].fn.apply(w[y].context, b);
+          if (!x) for (I = 1, x = new Array(z - 1); I < z; I++) x[I - 1] = arguments[I];
+          g[b].fn.apply(g[b].context, x);
       }
     }
     return !0;
@@ -2584,15 +2587,15 @@ var gt, wt = {
     return a(this, s, l, u, !1);
   }, c.prototype.once = function(s, l, u) {
     return a(this, s, l, u, !0);
-  }, c.prototype.removeListener = function(s, l, u, d) {
+  }, c.prototype.removeListener = function(s, l, u, m) {
     var f = i ? i + s : s;
     if (!this._events[f]) return this;
     if (!l) return o(this, f), this;
-    var h = this._events[f];
-    if (h.fn) h.fn !== l || d && !h.once || u && h.context !== u || o(this, f);
+    var p = this._events[f];
+    if (p.fn) p.fn !== l || m && !p.once || u && p.context !== u || o(this, f);
     else {
-      for (var v = 0, b = [], y = h.length; v < y; v++) (h[v].fn !== l || d && !h[v].once || u && h[v].context !== u) && b.push(h[v]);
-      b.length ? this._events[f] = b.length === 1 ? b[0] : b : o(this, f);
+      for (var v = 0, x = [], b = p.length; v < b; v++) (p[v].fn !== l || m && !p[v].once || u && p[v].context !== u) && x.push(p[v]);
+      x.length ? this._events[f] = x.length === 1 ? x[0] : x : o(this, f);
     }
     return this;
   }, c.prototype.removeAllListeners = function(s) {
@@ -2638,17 +2641,17 @@ class Et extends Je {
         currentY: c
       };
       this.el.classList.add("sash-active", $e), this.emit("start", s), this.el.setPointerCapture(a.pointerId);
-      const l = (d) => {
-        d.preventDefault();
+      const l = (m) => {
+        m.preventDefault();
         const f = {
           startX: o,
-          currentX: d.pageX,
+          currentX: m.pageX,
           startY: c,
-          currentY: d.pageY
+          currentY: m.pageY
         };
         this.emit("change", f);
-      }, u = (d) => {
-        d.preventDefault(), this.el.classList.remove("sash-active", $e), this.hoverDelayer.cancel(), this.emit("end"), this.el.releasePointerCapture(d.pointerId), window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", u);
+      }, u = (m) => {
+        m.preventDefault(), this.el.classList.remove("sash-active", $e), this.hoverDelayer.cancel(), this.emit("end"), this.el.releasePointerCapture(m.pointerId), window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", u);
       };
       window.addEventListener("pointermove", l), window.addEventListener("pointerup", u);
     }, this.onPointerDoublePress = () => {
@@ -2767,8 +2770,8 @@ class Ln extends Je {
     }, this.orientation = (o = i.orientation) != null ? o : G.Vertical, this.proportionalLayout = (c = i.proportionalLayout) != null ? c : !0, this.getSashOrthogonalSize = i.getSashOrthogonalSize, n && (this.onDidChange = n), r && (this.onDidDragStart = r), a && (this.onDidDragEnd = a), this.sashContainer = document.createElement("div"), this.sashContainer.classList.add("sash-container", wn), e.prepend(this.sashContainer), i.descriptor) {
       this.size = i.descriptor.size;
       for (const [s, l] of i.descriptor.views.entries()) {
-        const u = l.size, d = l.container, f = l.view;
-        this.addView(d, f, u, s, !0);
+        const u = l.size, m = l.container, f = l.view;
+        this.addView(m, f, u, s, !0);
       }
       this.contentSize = this.viewItems.reduce((s, l) => s + l.size, 0), this.saveProportions();
     }
@@ -2781,37 +2784,37 @@ class Ln extends Je {
     const c = this.orientation === G.Vertical ? new Mn(e, i, o) : new Tn(e, i, o);
     if (this.viewItems.splice(r, 0, c), this.viewItems.length > 1) {
       const s = this.orientation === G.Vertical ? new Et(this.sashContainer, {
-        getHorizontalSashTop: (d) => this.getSashPosition(d),
+        getHorizontalSashTop: (m) => this.getSashPosition(m),
         getHorizontalSashWidth: this.getSashOrthogonalSize
       }, {
         orientation: G.Horizontal
       }) : new Et(this.sashContainer, {
-        getVerticalSashLeft: (d) => this.getSashPosition(d),
+        getVerticalSashLeft: (m) => this.getSashPosition(m),
         getVerticalSashHeight: this.getSashOrthogonalSize
       }, {
         orientation: G.Vertical
-      }), l = this.orientation === G.Vertical ? (d) => ({
+      }), l = this.orientation === G.Vertical ? (m) => ({
         sash: s,
-        start: d.startY,
-        current: d.currentY
-      }) : (d) => ({
+        start: m.startY,
+        current: m.currentY
+      }) : (m) => ({
         sash: s,
-        start: d.startX,
-        current: d.currentX
+        start: m.startX,
+        current: m.currentX
       });
-      s.on("start", (d) => {
+      s.on("start", (m) => {
         var f;
-        this.emit("sashDragStart"), this.onSashStart(l(d));
-        const h = this.viewItems.map((v) => v.size);
-        (f = this.onDidDragStart) == null || f.call(this, h);
-      }), s.on("change", (d) => this.onSashChange(l(d))), s.on("end", () => {
-        var d;
-        this.emit("sashDragEnd"), this.onSashEnd(this.sashItems.findIndex((h) => h.sash === s));
-        const f = this.viewItems.map((h) => h.size);
-        (d = this.onDidDragEnd) == null || d.call(this, f);
+        this.emit("sashDragStart"), this.onSashStart(l(m));
+        const p = this.viewItems.map((v) => v.size);
+        (f = this.onDidDragStart) == null || f.call(this, p);
+      }), s.on("change", (m) => this.onSashChange(l(m))), s.on("end", () => {
+        var m;
+        this.emit("sashDragEnd"), this.onSashEnd(this.sashItems.findIndex((p) => p.sash === s));
+        const f = this.viewItems.map((p) => p.size);
+        (m = this.onDidDragEnd) == null || m.call(this, f);
       }), s.on("reset", () => {
-        const d = this.sashItems.findIndex((y) => y.sash === s), f = q(d, -1, -1), h = q(d + 1, this.viewItems.length), v = this.findFirstSnapIndex(f), b = this.findFirstSnapIndex(h);
-        (typeof v != "number" || this.viewItems[v].visible) && (typeof b != "number" || this.viewItems[b].visible) && this.emit("sashreset", d);
+        const m = this.sashItems.findIndex((b) => b.sash === s), f = q(m, -1, -1), p = q(m + 1, this.viewItems.length), v = this.findFirstSnapIndex(f), x = this.findFirstSnapIndex(p);
+        (typeof v != "number" || this.viewItems[v].visible) && (typeof x != "number" || this.viewItems[x].visible) && this.emit("sashreset", m);
       });
       const u = {
         sash: s
@@ -2895,25 +2898,25 @@ class Ln extends Je {
   }) {
     const n = this.sashItems.findIndex((r) => r.sash === e);
     ((r) => {
-      const a = this.viewItems.map((N) => N.size);
+      const a = this.viewItems.map((z) => z.size);
       let o, c, s = Number.NEGATIVE_INFINITY, l = Number.POSITIVE_INFINITY;
-      const u = q(n, -1, -1), d = q(n + 1, this.viewItems.length), f = u.reduce((N, C) => N + (this.viewItems[C].minimumSize - a[C]), 0), h = u.reduce((N, C) => N + (this.viewItems[C].viewMaximumSize - a[C]), 0), v = d.length === 0 ? Number.POSITIVE_INFINITY : d.reduce((N, C) => N + (a[C] - this.viewItems[C].minimumSize), 0), b = d.length === 0 ? Number.NEGATIVE_INFINITY : d.reduce((N, C) => N + (a[C] - this.viewItems[C].viewMaximumSize), 0);
-      s = Math.max(f, b), l = Math.min(v, h);
-      const y = this.findFirstSnapIndex(u), w = this.findFirstSnapIndex(d);
-      if (typeof y == "number") {
-        const N = this.viewItems[y], C = Math.floor(N.viewMinimumSize / 2);
+      const u = q(n, -1, -1), m = q(n + 1, this.viewItems.length), f = u.reduce((z, I) => z + (this.viewItems[I].minimumSize - a[I]), 0), p = u.reduce((z, I) => z + (this.viewItems[I].viewMaximumSize - a[I]), 0), v = m.length === 0 ? Number.POSITIVE_INFINITY : m.reduce((z, I) => z + (a[I] - this.viewItems[I].minimumSize), 0), x = m.length === 0 ? Number.NEGATIVE_INFINITY : m.reduce((z, I) => z + (a[I] - this.viewItems[I].viewMaximumSize), 0);
+      s = Math.max(f, x), l = Math.min(v, p);
+      const b = this.findFirstSnapIndex(u), g = this.findFirstSnapIndex(m);
+      if (typeof b == "number") {
+        const z = this.viewItems[b], I = Math.floor(z.viewMinimumSize / 2);
         o = {
-          index: y,
-          limitDelta: N.visible ? s - C : s + C,
-          size: N.size
+          index: b,
+          limitDelta: z.visible ? s - I : s + I,
+          size: z.size
         };
       }
-      if (typeof w == "number") {
-        const N = this.viewItems[w], C = Math.floor(N.viewMinimumSize / 2);
+      if (typeof g == "number") {
+        const z = this.viewItems[g], I = Math.floor(z.viewMinimumSize / 2);
         c = {
-          index: w,
-          limitDelta: N.visible ? l + C : l - C,
-          size: N.size
+          index: g,
+          limitDelta: z.visible ? l + I : l - I,
+          size: z.size
         };
       }
       this.sashDragState = {
@@ -2951,27 +2954,27 @@ class Ln extends Je {
   }
   resize(e, i, n = this.viewItems.map((u) => u.size), r, a, o = Number.NEGATIVE_INFINITY, c = Number.POSITIVE_INFINITY, s, l) {
     if (e < 0 || e >= this.viewItems.length) return 0;
-    const u = q(e, -1, -1), d = q(e + 1, this.viewItems.length);
-    if (a) for (const m of a) bt(u, m), bt(d, m);
-    if (r) for (const m of r) De(u, m), De(d, m);
-    const f = u.map((m) => this.viewItems[m]), h = u.map((m) => n[m]), v = d.map((m) => this.viewItems[m]), b = d.map((m) => n[m]), y = u.reduce((m, E) => m + (this.viewItems[E].minimumSize - n[E]), 0), w = u.reduce((m, E) => m + (this.viewItems[E].maximumSize - n[E]), 0), N = d.length === 0 ? Number.POSITIVE_INFINITY : d.reduce((m, E) => m + (n[E] - this.viewItems[E].minimumSize), 0), C = d.length === 0 ? Number.NEGATIVE_INFINITY : d.reduce((m, E) => m + (n[E] - this.viewItems[E].maximumSize), 0), x = Math.max(y, C, o), L = Math.min(N, w, c);
-    let I = !1;
+    const u = q(e, -1, -1), m = q(e + 1, this.viewItems.length);
+    if (a) for (const d of a) bt(u, d), bt(m, d);
+    if (r) for (const d of r) De(u, d), De(m, d);
+    const f = u.map((d) => this.viewItems[d]), p = u.map((d) => n[d]), v = m.map((d) => this.viewItems[d]), x = m.map((d) => n[d]), b = u.reduce((d, S) => d + (this.viewItems[S].minimumSize - n[S]), 0), g = u.reduce((d, S) => d + (this.viewItems[S].maximumSize - n[S]), 0), z = m.length === 0 ? Number.POSITIVE_INFINITY : m.reduce((d, S) => d + (n[S] - this.viewItems[S].minimumSize), 0), I = m.length === 0 ? Number.NEGATIVE_INFINITY : m.reduce((d, S) => d + (n[S] - this.viewItems[S].maximumSize), 0), y = Math.max(b, I, o), L = Math.min(z, g, c);
+    let k = !1;
     if (s) {
-      const m = this.viewItems[s.index], E = i >= s.limitDelta;
-      I = E !== m.visible, m.setVisible(E, s.size);
+      const d = this.viewItems[s.index], S = i >= s.limitDelta;
+      k = S !== d.visible, d.setVisible(S, s.size);
     }
-    if (!I && l) {
-      const m = this.viewItems[l.index], E = i < l.limitDelta;
-      I = E !== m.visible, m.setVisible(E, l.size);
+    if (!k && l) {
+      const d = this.viewItems[l.index], S = i < l.limitDelta;
+      k = S !== d.visible, d.setVisible(S, l.size);
     }
-    if (I) return this.resize(e, i, n, r, a, o, c);
-    for (let m = 0, E = i = ie(i, x, L); m < f.length; m++) {
-      const k = f[m], T = ie(h[m] + E, k.minimumSize, k.maximumSize);
-      E -= T - h[m], k.size = T;
+    if (k) return this.resize(e, i, n, r, a, o, c);
+    for (let d = 0, S = i = ie(i, y, L); d < f.length; d++) {
+      const T = f[d], R = ie(p[d] + S, T.minimumSize, T.maximumSize);
+      S -= R - p[d], T.size = R;
     }
-    for (let m = 0, E = i; m < v.length; m++) {
-      const k = v[m], T = ie(b[m] - E, k.minimumSize, k.maximumSize);
-      E += T - b[m], k.size = T;
+    for (let d = 0, S = i; d < v.length; d++) {
+      const T = v[d], R = ie(x[d] - S, T.minimumSize, T.maximumSize);
+      S += R - x[d], T.size = R;
     }
     return i;
   }
@@ -2981,8 +2984,8 @@ class Ln extends Je {
     const r = q(0, this.viewItems.length), a = [], o = r.filter((l) => this.viewItems[l].priority === Q.Low), c = r.filter((l) => this.viewItems[l].priority === Q.Normal), s = r.filter((l) => this.viewItems[l].priority === Q.High);
     a.push(...s, ...c, ...o), typeof e == "number" && De(a, e);
     for (let l = 0; n !== 0 && l < a.length; l++) {
-      const u = this.viewItems[a[l]], d = ie(u.size + n, u.minimumSize, u.maximumSize);
-      n -= d - u.size, u.size = d;
+      const u = this.viewItems[a[l]], m = ie(u.size + n, u.minimumSize, u.maximumSize);
+      n -= m - u.size, u.size = m;
     }
   }
   layoutViews() {
@@ -3010,11 +3013,11 @@ class Ln extends Je {
         sash: l
       } = this.sashItems[s];
       c += this.viewItems[s].size;
-      const u = !(i[s] && o[s + 1]), d = !(n[s] && a[s + 1]);
-      if (u && d) {
-        const f = q(s, -1, -1), h = q(s + 1, this.viewItems.length), v = this.findFirstSnapIndex(f), b = this.findFirstSnapIndex(h), y = typeof v == "number" && !this.viewItems[v].visible, w = typeof b == "number" && !this.viewItems[b].visible;
-        y && a[s] && (c > 0 || this.startSnappingEnabled) ? l.state = X.Minimum : w && i[s] && (c < this.contentSize || this.endSnappingEnabled) ? l.state = X.Maximum : l.state = X.Disabled;
-      } else l.state = u && !d ? X.Minimum : !u && d ? X.Maximum : X.Enabled;
+      const u = !(i[s] && o[s + 1]), m = !(n[s] && a[s + 1]);
+      if (u && m) {
+        const f = q(s, -1, -1), p = q(s + 1, this.viewItems.length), v = this.findFirstSnapIndex(f), x = this.findFirstSnapIndex(p), b = typeof v == "number" && !this.viewItems[v].visible, g = typeof x == "number" && !this.viewItems[x].visible;
+        b && a[s] && (c > 0 || this.startSnappingEnabled) ? l.state = X.Minimum : g && i[s] && (c < this.contentSize || this.endSnappingEnabled) ? l.state = X.Maximum : l.state = X.Disabled;
+      } else l.state = u && !m ? X.Minimum : !u && m ? X.Maximum : X.Enabled;
     }
   }
   findFirstSnapIndex(e) {
@@ -3113,33 +3116,33 @@ const ti = window.React.forwardRef(({
   defaultSizes: s = c,
   snap: l = !1,
   vertical: u = !1,
-  onChange: d,
+  onChange: m,
   onReset: f,
-  onVisibleChange: h,
+  onVisibleChange: p,
   onDragStart: v,
-  onDragEnd: b
-}, y) => {
-  const w = window.React.useRef(null), N = window.React.useRef([]), C = window.React.useRef(/* @__PURE__ */ new Map()), x = window.React.useRef(null), L = window.React.useRef(/* @__PURE__ */ new Map()), I = window.React.useRef(new Rn()), m = window.React.useRef([]), [E, k] = window.React.useState(!1), T = window.React.useMemo(() => window.React.Children.toArray(t).filter(window.React.isValidElement), [t]), H = window.React.useCallback((M) => {
+  onDragEnd: x
+}, b) => {
+  const g = window.React.useRef(null), z = window.React.useRef([]), I = window.React.useRef(/* @__PURE__ */ new Map()), y = window.React.useRef(null), L = window.React.useRef(/* @__PURE__ */ new Map()), k = window.React.useRef(new Rn()), d = window.React.useRef([]), [S, T] = window.React.useState(!1), R = window.React.useMemo(() => window.React.Children.toArray(t).filter(window.React.isValidElement), [t]), O = window.React.useCallback((M) => {
     var _, D;
-    const V = (_ = m.current) == null ? void 0 : _[M];
-    return typeof (V == null ? void 0 : V.preferredSize) == "number" && ((D = x.current) != null && D.resizeView(M, Math.round(V.preferredSize)), !0);
+    const V = (_ = d.current) == null ? void 0 : _[M];
+    return typeof (V == null ? void 0 : V.preferredSize) == "number" && ((D = y.current) != null && D.resizeView(M, Math.round(V.preferredSize)), !0);
   }, []);
-  return window.React.useImperativeHandle(y, () => ({
+  return window.React.useImperativeHandle(b, () => ({
     reset: () => {
       if (f) f();
       else {
         var M;
-        (M = x.current) == null || M.distributeViewSizes();
-        for (let _ = 0; _ < m.current.length; _++) H(_);
+        (M = y.current) == null || M.distributeViewSizes();
+        for (let _ = 0; _ < d.current.length; _++) O(_);
       }
     },
     resize: (M) => {
       var _;
-      (_ = x.current) == null || _.resizeViews(M);
+      (_ = y.current) == null || _.resizeViews(M);
     }
   })), vt(() => {
     let M = !0;
-    s && L.current.size !== s.length && (M = !1, console.warn(`Expected ${s.length} children based on defaultSizes but found ${L.current.size}`)), M && s && (N.current = T.map((V) => V.key));
+    s && L.current.size !== s.length && (M = !1, console.warn(`Expected ${s.length} children based on defaultSizes but found ${L.current.size}`)), M && s && (z.current = R.map((V) => V.key));
     const _ = pe({
       orientation: u ? G.Vertical : G.Horizontal,
       proportionalLayout: a
@@ -3147,18 +3150,18 @@ const ti = window.React.forwardRef(({
       descriptor: {
         size: s.reduce((V, P) => V + P, 0),
         views: s.map((V, P) => {
-          var $, O, K, ne;
-          const F = C.current.get(N.current[P]), re = new Rt(I.current, pe({
+          var $, H, K, ne;
+          const F = I.current.get(z.current[P]), re = new Rt(k.current, pe({
             element: document.createElement("div"),
             minimumSize: ($ = F == null ? void 0 : F.minSize) != null ? $ : r,
-            maximumSize: (O = F == null ? void 0 : F.maxSize) != null ? O : n,
+            maximumSize: (H = F == null ? void 0 : F.maxSize) != null ? H : n,
             priority: (K = F == null ? void 0 : F.priority) != null ? K : Q.Normal
           }, (F == null ? void 0 : F.preferredSize) && {
             preferredSize: F == null ? void 0 : F.preferredSize
           }, {
             snap: (ne = F == null ? void 0 : F.snap) != null ? ne : l
           }));
-          return m.current.push(re), {
+          return d.current.push(re), {
             container: [...L.current.values()][P],
             size: V,
             view: re
@@ -3166,103 +3169,103 @@ const ti = window.React.forwardRef(({
         })
       }
     });
-    x.current = new Ln(w.current, _, d, v, b), x.current.on("sashDragStart", () => {
+    y.current = new Ln(g.current, _, m, v, x), y.current.on("sashDragStart", () => {
       var V;
-      (V = w.current) == null || V.classList.add("split-view-sash-dragging");
-    }), x.current.on("sashDragEnd", () => {
+      (V = g.current) == null || V.classList.add("split-view-sash-dragging");
+    }), y.current.on("sashDragEnd", () => {
       var V;
-      (V = w.current) == null || V.classList.remove("split-view-sash-dragging");
-    }), x.current.on("sashchange", (V) => {
-      if (h && x.current) {
-        const P = T.map(($) => $.key);
+      (V = g.current) == null || V.classList.remove("split-view-sash-dragging");
+    }), y.current.on("sashchange", (V) => {
+      if (p && y.current) {
+        const P = R.map(($) => $.key);
         for (let $ = 0; $ < P.length; $++) {
-          const O = C.current.get(P[$]);
-          (O == null ? void 0 : O.visible) !== void 0 && O.visible !== x.current.isViewVisible($) && h($, x.current.isViewVisible($));
+          const H = I.current.get(P[$]);
+          (H == null ? void 0 : H.visible) !== void 0 && H.visible !== y.current.isViewVisible($) && p($, y.current.isViewVisible($));
         }
       }
-    }), x.current.on("sashreset", (V) => {
+    }), y.current.on("sashreset", (V) => {
       if (f) f();
       else {
         var P;
-        if (H(V) || H(V + 1)) return;
-        (P = x.current) == null || P.distributeViewSizes();
+        if (O(V) || O(V + 1)) return;
+        (P = y.current) == null || P.distributeViewSizes();
       }
     });
-    const D = x.current;
+    const D = y.current;
     return () => {
       D.dispose();
     };
   }, []), vt(() => {
-    if (E) {
-      const W = T.map((R) => R.key), J = [...N.current], ae = W.filter((R) => !N.current.includes(R)), le = W.filter((R) => N.current.includes(R)), S = N.current.map((R) => !W.includes(R));
-      for (let R = S.length - 1; R >= 0; R--) {
+    if (S) {
+      const W = R.map((N) => N.key), J = [...z.current], ae = W.filter((N) => !z.current.includes(N)), le = W.filter((N) => z.current.includes(N)), E = z.current.map((N) => !W.includes(N));
+      for (let N = E.length - 1; N >= 0; N--) {
         var M;
-        S[R] && ((M = x.current) != null && M.removeView(R), J.splice(R, 1), m.current.splice(R, 1));
+        E[N] && ((M = y.current) != null && M.removeView(N), J.splice(N, 1), d.current.splice(N, 1));
       }
-      for (const R of ae) {
+      for (const N of ae) {
         var _, D, V, P, $;
-        const p = C.current.get(R), g = new Rt(I.current, pe({
+        const h = I.current.get(N), w = new Rt(k.current, pe({
           element: document.createElement("div"),
-          minimumSize: (_ = p == null ? void 0 : p.minSize) != null ? _ : r,
-          maximumSize: (D = p == null ? void 0 : p.maxSize) != null ? D : n,
-          priority: (V = p == null ? void 0 : p.priority) != null ? V : Q.Normal
-        }, (p == null ? void 0 : p.preferredSize) && {
-          preferredSize: p == null ? void 0 : p.preferredSize
+          minimumSize: (_ = h == null ? void 0 : h.minSize) != null ? _ : r,
+          maximumSize: (D = h == null ? void 0 : h.maxSize) != null ? D : n,
+          priority: (V = h == null ? void 0 : h.priority) != null ? V : Q.Normal
+        }, (h == null ? void 0 : h.preferredSize) && {
+          preferredSize: h == null ? void 0 : h.preferredSize
         }, {
-          snap: (P = p == null ? void 0 : p.snap) != null ? P : l
+          snap: (P = h == null ? void 0 : h.snap) != null ? P : l
         }));
-        ($ = x.current) != null && $.addView(L.current.get(R), g, Ie.Distribute, W.findIndex((z) => z === R)), J.splice(W.findIndex((z) => z === R), 0, R), m.current.splice(W.findIndex((z) => z === R), 0, g);
+        ($ = y.current) != null && $.addView(L.current.get(N), w, Ie.Distribute, W.findIndex((C) => C === N)), J.splice(W.findIndex((C) => C === N), 0, N), d.current.splice(W.findIndex((C) => C === N), 0, w);
       }
-      for (; !hn(W, J); ) for (const [R, p] of W.entries()) {
-        const g = J.findIndex((z) => z === p);
-        if (g !== R) {
-          var O;
-          (O = x.current) == null || O.moveView(L.current.get(p), g, R);
-          const z = J[g];
-          J.splice(g, 1), J.splice(R, 0, z);
+      for (; !hn(W, J); ) for (const [N, h] of W.entries()) {
+        const w = J.findIndex((C) => C === h);
+        if (w !== N) {
+          var H;
+          (H = y.current) == null || H.moveView(L.current.get(h), w, N);
+          const C = J[w];
+          J.splice(w, 1), J.splice(N, 0, C);
           break;
         }
       }
-      for (const R of ae) {
+      for (const N of ae) {
         var K;
-        const p = W.findIndex((z) => z === R), g = m.current[p].preferredSize;
-        g !== void 0 && ((K = x.current) == null || K.resizeView(p, g));
+        const h = W.findIndex((C) => C === N), w = d.current[h].preferredSize;
+        w !== void 0 && ((K = y.current) == null || K.resizeView(h, w));
       }
-      for (const R of [...ae, ...le]) {
+      for (const N of [...ae, ...le]) {
         var ne, F;
-        const p = C.current.get(R), g = W.findIndex((z) => z === R);
-        p && zt(p) && p.visible !== void 0 && ((ne = x.current) == null ? void 0 : ne.isViewVisible(g)) !== p.visible && ((F = x.current) == null || F.setViewVisible(g, p.visible));
+        const h = I.current.get(N), w = W.findIndex((C) => C === N);
+        h && zt(h) && h.visible !== void 0 && ((ne = y.current) == null ? void 0 : ne.isViewVisible(w)) !== h.visible && ((F = y.current) == null || F.setViewVisible(w, h.visible));
       }
-      for (const R of le) {
-        const p = C.current.get(R), g = W.findIndex((z) => z === R);
-        if (p && zt(p)) {
+      for (const N of le) {
+        const h = I.current.get(N), w = W.findIndex((C) => C === N);
+        if (h && zt(h)) {
           var re;
-          p.preferredSize !== void 0 && m.current[g].preferredSize !== p.preferredSize && (m.current[g].preferredSize = p.preferredSize);
-          let z = !1;
-          p.minSize !== void 0 && m.current[g].minimumSize !== p.minSize && (m.current[g].minimumSize = p.minSize, z = !0), p.maxSize !== void 0 && m.current[g].maximumSize !== p.maxSize && (m.current[g].maximumSize = p.maxSize, z = !0), z && ((re = x.current) == null || re.layout());
+          h.preferredSize !== void 0 && d.current[w].preferredSize !== h.preferredSize && (d.current[w].preferredSize = h.preferredSize);
+          let C = !1;
+          h.minSize !== void 0 && d.current[w].minimumSize !== h.minSize && (d.current[w].minimumSize = h.minSize, C = !0), h.maxSize !== void 0 && d.current[w].maximumSize !== h.maxSize && (d.current[w].maximumSize = h.maxSize, C = !0), C && ((re = y.current) == null || re.layout());
         }
       }
-      (ae.length > 0 || S.length > 0) && (N.current = W);
+      (ae.length > 0 || E.length > 0) && (z.current = W);
     }
-  }, [T, E, n, r, l]), window.React.useEffect(() => {
-    x.current && (x.current.onDidChange = d);
-  }, [d]), window.React.useEffect(() => {
-    x.current && (x.current.onDidDragStart = v);
+  }, [R, S, n, r, l]), window.React.useEffect(() => {
+    y.current && (y.current.onDidChange = m);
+  }, [m]), window.React.useEffect(() => {
+    y.current && (y.current.onDidDragStart = v);
   }, [v]), window.React.useEffect(() => {
-    x.current && (x.current.onDidDragEnd = b);
-  }, [b]), vn({
-    ref: w,
+    y.current && (y.current.onDidDragEnd = x);
+  }, [x]), vn({
+    ref: g,
     onResize: ({
       width: M,
       height: _
     }) => {
       var D;
-      M && _ && ((D = x.current) != null && D.layout(u ? _ : M), I.current.setSize(u ? _ : M), k(!0));
+      M && _ && ((D = y.current) != null && D.layout(u ? _ : M), k.current.setSize(u ? _ : M), T(!0));
     }
   }), window.React.useEffect(() => {
     qt && Vn(20);
   }, []), window.React.createElement("div", {
-    ref: w,
+    ref: g,
     className: We("split-view", u ? "split-view-vertical" : "split-view-horizontal", {
       "split-view-separator-border": o
     }, gn, u ? yn : xn, {
@@ -3274,7 +3277,7 @@ const ti = window.React.forwardRef(({
   }, window.React.Children.toArray(t).map((M) => {
     if (!window.React.isValidElement(M)) return null;
     const _ = M.key;
-    return M.type.displayName === "Allotment.Pane" ? (C.current.set(_, M.props), window.React.cloneElement(M, {
+    return M.type.displayName === "Allotment.Pane" ? (I.current.set(_, M.props), window.React.cloneElement(M, {
       key: _,
       ref: (D) => {
         const V = M.ref;
@@ -3401,10 +3404,10 @@ const kr = ({
 }) => {
   const o = U(null), c = !!e, s = U(!1), l = U(null), u = U(!0);
   if (u.current && i) {
-    const h = localStorage.getItem(`splitPaneSizes-${i}`);
-    if (h)
+    const p = localStorage.getItem(`splitPaneSizes-${i}`);
+    if (p)
       try {
-        l.current = JSON.parse(h);
+        l.current = JSON.parse(p);
       } catch {
         l.current = [70, 30];
       }
@@ -3414,14 +3417,14 @@ const kr = ({
   }
   gi(() => {
     c && !s.current && o.current && l.current && requestAnimationFrame(() => {
-      var h;
-      (h = o.current) != null && h.resize && o.current.resize(l.current);
+      var p;
+      (p = o.current) != null && p.resize && o.current.resize(l.current);
     }), s.current = c;
   }, [c]);
-  const d = (h) => {
-    i && c && h[1] > 10 && (l.current = h, localStorage.setItem(
+  const m = (p) => {
+    i && c && p[1] > 10 && (l.current = p, localStorage.setItem(
       `splitPaneSizes-${i}`,
-      JSON.stringify(h)
+      JSON.stringify(p)
     ));
   };
   let f;
@@ -3430,7 +3433,7 @@ const kr = ({
     {
       ref: o,
       className: n,
-      onChange: d,
+      onChange: m,
       defaultSizes: f,
       proportionalLayout: !0
     },
@@ -3446,8 +3449,8 @@ const kr = ({
 }) => {
   const a = i !== void 0, [o, c] = A(e || ""), u = {
     activeTab: a ? i : o,
-    setActiveTab: (d) => {
-      a || c(d), n && n(d);
+    setActiveTab: (m) => {
+      a || c(m), n && n(m);
     },
     initialTabName: a ? i : e
   };
@@ -3499,151 +3502,151 @@ const kr = ({
   colorTokenClasses: s,
   suggestions: l = [],
   onLoadMore: u,
-  css: d,
+  css: m,
   hasMore: f = !1,
-  isLoading: h = !1,
+  isLoading: p = !1,
   allowCustom: v = !0,
-  dedupe: b = !0,
-  ...y
+  dedupe: x = !0,
+  ...b
 }) => {
-  const w = U(null), N = U(null), C = U(null), x = U(!1), [L, I] = A(""), [m, E] = A(!1), [k, T] = A(-1), [H, M] = A(!1), [_, D] = A(null), [V, P] = A(""), $ = () => {
-    E(!1), T(-1);
-  }, O = (S) => {
-    var g;
-    const R = Vt(S);
-    if (!R.length) return;
-    const p = b ? Oe([...i, ...R]) : [...i, ...R];
-    o == null || o(p), I(""), c == null || c(""), $(), (g = w.current) == null || g.focus();
-  }, K = (S) => {
-    const R = i.filter((p, g) => g !== S);
-    o == null || o(R), _ === S ? (D(null), P("")) : _ !== null && S < _ && D(_ - 1);
-  }, ne = (S) => {
-    x.current = !0, D(S), P(i[S] ?? ""), $();
+  const g = U(null), z = U(null), I = U(null), y = U(!1), [L, k] = A(""), [d, S] = A(!1), [T, R] = A(-1), [O, M] = A(!1), [_, D] = A(null), [V, P] = A(""), $ = () => {
+    S(!1), R(-1);
+  }, H = (E) => {
+    var w;
+    const N = Vt(E);
+    if (!N.length) return;
+    const h = x ? Oe([...i, ...N]) : [...i, ...N];
+    o == null || o(h), k(""), c == null || c(""), $(), (w = g.current) == null || w.focus();
+  }, K = (E) => {
+    const N = i.filter((h, w) => w !== E);
+    o == null || o(N), _ === E ? (D(null), P("")) : _ !== null && E < _ && D(_ - 1);
+  }, ne = (E) => {
+    y.current = !0, D(E), P(i[E] ?? ""), $();
   }, F = () => {
     var Z;
     if (_ === null) return;
-    const S = V.trim();
-    if (!S) {
+    const E = V.trim();
+    if (!E) {
       K(_);
       return;
     }
-    const R = Vt(S), p = i.slice(0, _), g = i.slice(_ + 1);
-    let z = [...p, ...R, ...g];
-    b && (z = Oe(z)), o == null || o(z), D(null), P(""), x.current = !1, (Z = w.current) == null || Z.focus();
+    const N = Vt(E), h = i.slice(0, _), w = i.slice(_ + 1);
+    let C = [...h, ...N, ...w];
+    x && (C = Oe(C)), o == null || o(C), D(null), P(""), y.current = !1, (Z = g.current) == null || Z.focus();
   }, re = () => {
-    var S;
-    D(null), P(""), x.current = !1, (S = w.current) == null || S.focus();
-  }, W = (S) => {
+    var E;
+    D(null), P(""), y.current = !1, (E = g.current) == null || E.focus();
+  }, W = (E) => {
     M(!0);
-    const R = b ? Oe([...i, S]) : [...i, S];
-    o == null || o(R), I(""), c == null || c(""), $(), setTimeout(() => {
-      var p;
-      M(!1), (p = w.current) == null || p.focus();
+    const N = x ? Oe([...i, E]) : [...i, E];
+    o == null || o(N), k(""), c == null || c(""), $(), setTimeout(() => {
+      var h;
+      M(!1), (h = g.current) == null || h.focus();
     }, 0);
-  }, J = (S) => {
-    I(S), c == null || c(S), T(-1), S.length > 0 && l.length > 0 ? E(!0) : $();
-  }, ae = (S) => {
-    if (m) {
-      if (S.key === "ArrowDown") {
-        S.preventDefault(), T(
-          (p) => Math.min(p + 1, l.length - 1)
+  }, J = (E) => {
+    k(E), c == null || c(E), R(-1), E.length > 0 && l.length > 0 ? S(!0) : $();
+  }, ae = (E) => {
+    if (d) {
+      if (E.key === "ArrowDown") {
+        E.preventDefault(), R(
+          (h) => Math.min(h + 1, l.length - 1)
         );
         return;
       }
-      if (S.key === "ArrowUp") {
-        S.preventDefault(), T((p) => Math.max(p - 1, 0));
+      if (E.key === "ArrowUp") {
+        E.preventDefault(), R((h) => Math.max(h - 1, 0));
         return;
       }
-      if (S.key === "Escape") {
-        S.preventDefault(), $();
+      if (E.key === "Escape") {
+        E.preventDefault(), $();
         return;
       }
-      if (S.key === "Enter" && k >= 0 && l[k]) {
-        S.preventDefault(), W(l[k]);
+      if (E.key === "Enter" && T >= 0 && l[T]) {
+        E.preventDefault(), W(l[T]);
         return;
       }
     }
-    if (S.key === "Enter" || S.key === "," || S.key === "Tab") {
-      if (!v && !(k >= 0 && l[k])) {
-        S.key === "Enter" && k >= 0 && l[k] && (S.preventDefault(), W(l[k]));
+    if (E.key === "Enter" || E.key === "," || E.key === "Tab") {
+      if (!v && !(T >= 0 && l[T])) {
+        E.key === "Enter" && T >= 0 && l[T] && (E.preventDefault(), W(l[T]));
         return;
       }
-      L.trim().length > 0 ? (S.preventDefault(), O(L)) : S.key === "Enter" && (S.preventDefault(), $());
+      L.trim().length > 0 ? (E.preventDefault(), H(L)) : E.key === "Enter" && (E.preventDefault(), $());
       return;
     }
-    if (S.key === "Backspace" && L.length === 0 && i.length > 0) {
+    if (E.key === "Backspace" && L.length === 0 && i.length > 0) {
       K(i.length - 1);
       return;
     }
-    S.key === " " && L.trim().length > 0 && (S.preventDefault(), O(L));
+    E.key === " " && L.trim().length > 0 && (E.preventDefault(), H(L));
   }, le = () => {
-    if (!H) {
+    if (!O) {
       if (v && L.trim().length > 0) {
-        O(L);
+        H(L);
         return;
       }
       $();
     }
   };
   return j(() => {
-    const S = C.current;
-    if (!S || !u || !f || h) return;
-    const R = () => {
-      const { scrollTop: p, scrollHeight: g, clientHeight: z } = S;
-      g - p - z < 50 && u();
+    const E = I.current;
+    if (!E || !u || !f || p) return;
+    const N = () => {
+      const { scrollTop: h, scrollHeight: w, clientHeight: C } = E;
+      w - h - C < 50 && u();
     };
-    return S.addEventListener("scroll", R), () => S.removeEventListener("scroll", R);
-  }, [u, f, h]), j(() => {
+    return E.addEventListener("scroll", N), () => E.removeEventListener("scroll", N);
+  }, [u, f, p]), j(() => {
     if (_ !== null) {
-      const S = N.current;
-      if (!S) return;
-      S.focus();
-      const R = S.value.length;
-      S.setSelectionRange(R, R);
+      const E = z.current;
+      if (!E) return;
+      E.focus();
+      const N = E.value.length;
+      E.setSelectionRange(N, N);
     }
   }, [_]), j(() => {
-    l.length === 0 && E(!1);
-  }, [l.length]), /* @__PURE__ */ React.createElement("div", { className: B("flex flex-col gap-2", t), ...y }, d && /* @__PURE__ */ React.createElement("style", null, d), n && /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium flex gap-1 items-center" }, /* @__PURE__ */ React.createElement(Ft, null), " ", n), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2 flex-start" }, i.map((S, R) => {
-    const p = _ === R, g = s == null ? void 0 : s[S];
+    l.length === 0 && S(!1);
+  }, [l.length]), /* @__PURE__ */ React.createElement("div", { className: B("flex flex-col gap-2", t), ...b }, m && /* @__PURE__ */ React.createElement("style", null, m), n && /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium flex gap-1 items-center" }, /* @__PURE__ */ React.createElement(Ft, null), " ", n), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2 flex-start" }, i.map((E, N) => {
+    const h = _ === N, w = s == null ? void 0 : s[E];
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        key: `${S}-${R}`,
+        key: `${E}-${N}`,
         className: B(
           "bg-border/50 gap-1 p-1 text-xs hover:bg-border-75 ",
-          { "bg-white border-border/50 border": p }
+          { "bg-white border-border/50 border": h }
         ),
         title: "Click to edit"
       },
-      p ? /* @__PURE__ */ React.createElement(
+      h ? /* @__PURE__ */ React.createElement(
         "input",
         {
-          ref: N,
+          ref: z,
           className: "bg-transparent text-sm outline-none",
           value: V,
-          onChange: (z) => P(z.target.value),
+          onChange: (C) => P(C.target.value),
           onBlur: () => F(),
-          onKeyDown: (z) => {
-            z.key === "Enter" && (z.preventDefault(), F()), z.key === "Escape" && (z.preventDefault(), re());
+          onKeyDown: (C) => {
+            C.key === "Enter" && (C.preventDefault(), F()), C.key === "Escape" && (C.preventDefault(), re());
           }
         }
       ) : /* @__PURE__ */ React.createElement(
         "button",
         {
           type: "button",
-          onClick: () => ne(R),
+          onClick: () => ne(N),
           onMouseDown: () => {
-            x.current = !0, $();
+            y.current = !0, $();
           },
           className: "select-none inline-flex justify-center items-center gap-1 w-auto rounded-sm px-1 hover:bg-gray-100"
         },
-        S,
-        g && /* @__PURE__ */ React.createElement(
+        E,
+        w && /* @__PURE__ */ React.createElement(
           "span",
           {
             className: B(
               "w-3! h-3! overflow-hidden! rounded-full!",
-              g
+              w
             )
           }
         )
@@ -3653,10 +3656,10 @@ const kr = ({
         {
           type: "button",
           className: "inline-flex items-center rounded-full px-1 cursor-pointer hover:bg-gray-100",
-          onMouseDown: (z) => {
-            z.preventDefault(), z.stopPropagation(), K(R);
+          onMouseDown: (C) => {
+            C.preventDefault(), C.stopPropagation(), K(N);
           },
-          "aria-label": `Remove ${S}`
+          "aria-label": `Remove ${E}`
         },
         "×"
       )
@@ -3664,14 +3667,14 @@ const kr = ({
   })), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
     "input",
     {
-      ref: w,
+      ref: g,
       className: B(
         "w-full  border px-3 py-2 text-sm outline-none",
         e
       ),
       value: L,
       placeholder: a,
-      onChange: (S) => J(S.target.value),
+      onChange: (E) => J(E.target.value),
       onKeyDown: ae,
       onFocus: () => {
       },
@@ -3680,39 +3683,39 @@ const kr = ({
       autoComplete: "off",
       "aria-autocomplete": "list"
     }
-  ), m && /* @__PURE__ */ React.createElement(
+  ), d && /* @__PURE__ */ React.createElement(
     Dt,
     {
       position: "bottom left",
       onClose: $,
-      anchor: w.current ?? void 0,
+      anchor: g.current ?? void 0,
       focusOnMount: !1,
       offset: 12
     },
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        ref: C,
+        ref: I,
         role: "listbox",
         className: "max-h-60 min-w-64 overflow-y-auto p-1"
       },
-      l.map((S, R) => /* @__PURE__ */ React.createElement(
+      l.map((E, N) => /* @__PURE__ */ React.createElement(
         Y,
         {
-          key: `${S}-${R}`,
-          variant: R === k ? "primary" : "tertiary",
+          key: `${E}-${N}`,
+          variant: N === T ? "primary" : "tertiary",
           className: B("block w-full text-left", {
-            "is-active": R === k
+            "is-active": N === T
           }),
           onMouseDown: () => M(!0),
-          onMouseEnter: () => T(R),
-          onClick: () => W(S),
+          onMouseEnter: () => R(N),
+          onClick: () => W(E),
           tabIndex: -1
         },
-        /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, S)
+        /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, E)
       )),
-      h && /* @__PURE__ */ React.createElement("div", { className: "flex justify-center py-3" }, /* @__PURE__ */ React.createElement(At, null)),
-      !h && f && l.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "text-center text-xs text-gray-500 py-2" }, "Scroll for more")
+      p && /* @__PURE__ */ React.createElement("div", { className: "flex justify-center py-3" }, /* @__PURE__ */ React.createElement(At, null)),
+      !p && f && l.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "text-center text-xs text-gray-500 py-2" }, "Scroll for more")
     )
   )), r && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-primary" }, r));
 };