@kingsimba/nc-ui 0.1.14 → 0.1.15

package/dist/index.js

@@ -2,7 +2,7 @@ var Je = Object.defineProperty;
 var Qe = (e, t, n) => t in e ? Je(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var _ = (e, t, n) => Qe(e, typeof t != "symbol" ? t + "" : t, n);
 import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import xe, { useState as T, useRef as H, useMemo as ge, useEffect as L, createContext as se, useContext as X, Children as Ze, isValidElement as et, forwardRef as tt, useImperativeHandle as nt, useCallback as W, Suspense as rt } from "react";
+import xe, { useState as T, useRef as W, useMemo as ge, useEffect as L, createContext as se, useContext as X, Children as Ze, isValidElement as et, forwardRef as tt, useImperativeHandle as nt, useCallback as O, Suspense as rt } from "react";
 import { createPortal as pe } from "react-dom";
 import { useTranslation as J } from "react-i18next";
 import { d as Le, E as ot, R as st, T as it, g as ct, V as at, b as lt, a as dt, c as ut } from "./GeneratedIcons-HFZmBTBT.js";
@@ -105,21 +105,21 @@ function In({
   const o = Math.max(0, Math.min(1, Number(e) || 0));
   let i;
   r ? o < 0.1 ? i = "var(--nc-danger)" : o < 0.2 ? i = "var(--nc-warning)" : i = "var(--nc-success)" : i = n ? "#ffffff" : "#000000";
-  const l = n ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.2)", a = 24, d = 14, f = 2, u = 0, w = 12, c = 0, p = 0, b = 0, g = a, v = d, N = v - c * 2, h = g - c * 2, k = Math.max(1, Math.min(4, v / 4)), m = o === 0 ? 0 : 0.05 + o * 0.95, A = a + f + w, E = 20, M = 0.65, z = Math.max(d, E * M), x = a + f + 1, C = (d - E * M) / 2;
+  const l = n ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.2)", a = 24, d = 14, f = 2, u = 0, w = 12, c = 0, p = 0, b = 0, g = a, v = d, N = v - c * 2, h = g - c * 2, k = Math.max(1, Math.min(4, v / 4)), m = o === 0 ? 0 : 0.05 + o * 0.95, S = a + f + w, E = 20, I = 0.65, z = Math.max(d, E * I), x = a + f + 1, A = (d - E * I) / 2;
   return /* @__PURE__ */ y(
     "svg",
     {
       className: "nc-battery",
-      width: A,
+      width: S,
       height: z,
-      viewBox: `0 0 ${A} ${z}`,
+      viewBox: `0 0 ${S} ${z}`,
       role: "img",
       "aria-label": `Battery ${o === 0 ? "-" : Math.round(o * 100) + "%"} ${t}`,
       children: [
         /* @__PURE__ */ y("defs", { children: [
           /* @__PURE__ */ s("mask", { id: `nc-battery-fill-mask-${o}`, children: /* @__PURE__ */ s("rect", { x: "0", y: "0", width: h * m, height: N, fill: "white" }) }),
           /* @__PURE__ */ y("mask", { id: `nc-battery-text-mask-${o}`, children: [
-            /* @__PURE__ */ s("rect", { x: "0", y: "0", width: A, height: z, fill: "white" }),
+            /* @__PURE__ */ s("rect", { x: "0", y: "0", width: S, height: z, fill: "white" }),
             /* @__PURE__ */ s("text", { x: p + g / 2, y: d - 3, fontSize: 11, fontWeight: "bold", fill: "black", textAnchor: "middle", children: o === 0 ? "-" : Math.round(o * 100) })
           ] })
         ] }),
@@ -161,7 +161,7 @@ function In({
               fill: o === 1 ? i : l
             }
           ),
-          t === "charging" ? /* @__PURE__ */ s("g", { transform: `translate(${x}, ${C}) scale(${M})`, fill: i, children: /* @__PURE__ */ s("path", { d: "M10 0 L2 11 H8 L5 20 L14 8 H8 L10 0 Z" }) }) : null
+          t === "charging" ? /* @__PURE__ */ s("g", { transform: `translate(${x}, ${A}) scale(${I})`, fill: i, children: /* @__PURE__ */ s("path", { d: "M10 0 L2 11 H8 L5 20 L14 8 H8 L10 0 Z" }) }) : null
         ] })
       ]
     }
@@ -228,7 +228,7 @@ function $n({ checked: e, onChange: t, disabled: n, label: r, size: o = "default
   );
 }
 function mt({ option: e, onChange: t, selected: n, highlighted: r, small: o }) {
-  const i = H(null), { t: l } = J();
+  const i = W(null), { t: l } = J();
   return L(() => {
     r && i.current && i.current.scrollIntoView({ block: "nearest" });
   }, [r]), /* @__PURE__ */ y(
@@ -337,7 +337,7 @@ function Rn({
   style: u,
   className: w
 }) {
-  const [c, p] = T(!1), [b, g] = T(""), [v, N] = T(-1), h = H(null), k = H(null), m = f === "small", { t: A } = J(), E = ge(() => {
+  const [c, p] = T(!1), [b, g] = T(""), [v, N] = T(-1), h = W(null), k = W(null), m = f === "small", { t: S } = J(), E = ge(() => {
     const R = b.toLowerCase();
     return a ? r.filter((P) => P.label.toLowerCase().includes(R)) : r;
   }, [r, b, a]);
@@ -350,17 +350,17 @@ function Rn({
     }
   }, [l, e, r, t]), L(() => {
     function R(P) {
-      var D;
-      P.target instanceof Node && h.current && ((D = h.current.parentElement) != null && D.contains(P.target) || p(!1));
+      var H;
+      P.target instanceof Node && h.current && ((H = h.current.parentElement) != null && H.contains(P.target) || p(!1));
     }
     return document.addEventListener("mousedown", R), () => document.removeEventListener("mousedown", R);
   }, []);
-  const M = r.find((R) => R.value === e), z = M && l, x = !o && !z, C = !(c && a) && !!M, I = (R, P = !1) => {
-    var D;
-    t == null || t(R), p(!1), g(""), P && ((D = h.current) == null || D.blur());
-  }, S = () => {
+  const I = r.find((R) => R.value === e), z = I && l, x = !o && !z, A = !(c && a) && !!I, $ = (R, P = !1) => {
+    var H;
+    t == null || t(R), p(!1), g(""), P && ((H = h.current) == null || H.blur());
+  }, C = () => {
     t == null || t(void 0), g(""), p(!1);
-  }, O = (R) => {
+  }, D = (R) => {
     if (!c) {
       (R.key === "ArrowDown" || R.key === "ArrowUp") && (p(!0), R.preventDefault());
       return;
@@ -368,18 +368,18 @@ function Rn({
     switch (R.key) {
       case "ArrowDown":
         R.preventDefault(), N((P) => {
-          const D = P + 1;
-          return D >= E.length ? 0 : D;
+          const H = P + 1;
+          return H >= E.length ? 0 : H;
         });
         break;
       case "ArrowUp":
         R.preventDefault(), N((P) => {
-          const D = P - 1;
-          return D < 0 ? E.length - 1 : D;
+          const H = P - 1;
+          return H < 0 ? E.length - 1 : H;
         });
         break;
       case "Enter":
-        R.preventDefault(), v >= 0 && v < E.length && I(E[v].value, !0);
+        R.preventDefault(), v >= 0 && v < E.length && $(E[v].value, !0);
         break;
       case "Escape":
         R.preventDefault(), p(!1), g("");
@@ -394,9 +394,9 @@ function Rn({
         ref: k,
         style: { position: "relative", display: "flex", alignItems: "center" },
         onMouseDown: (R) => {
-          o || a && R.target === h.current || (p((P) => (!P && a && M && g(M.label), !P)), a && !c && setTimeout(() => {
-            var P, D;
-            (P = h.current) == null || P.focus(), (D = h.current) == null || D.select();
+          o || a && R.target === h.current || (p((P) => (!P && a && I && g(I.label), !P)), a && !c && setTimeout(() => {
+            var P, H;
+            (P = h.current) == null || P.focus(), (H = h.current) == null || H.select();
           }, 0));
         },
         children: [
@@ -408,14 +408,14 @@ function Rn({
               placeholder: n,
               onFocus: () => {
                 var R;
-                !o && a && (p(!0), M && (g(M.label), setTimeout(() => {
+                !o && a && (p(!0), I && (g(I.label), setTimeout(() => {
                   var P;
                   return (P = h.current) == null ? void 0 : P.select();
                 }, 0))), a || (R = h.current) == null || R.blur();
               },
               onChange: (R) => a && g(R.target.value),
-              onKeyDown: O,
-              value: c && a ? b : (M == null ? void 0 : M.label) || "",
+              onKeyDown: D,
+              value: c && a ? b : (I == null ? void 0 : I.label) || "",
               readOnly: o || !a,
               style: {
                 width: "100%",
@@ -423,11 +423,11 @@ function Rn({
                 caretColor: a ? void 0 : "transparent",
                 cursor: a ? void 0 : "pointer",
                 userSelect: a ? void 0 : "none",
-                color: C ? "transparent" : "var(--nc-text)"
+                color: A ? "transparent" : "var(--nc-text)"
               }
             }
           ),
-          C && /* @__PURE__ */ y(
+          A && /* @__PURE__ */ y(
             "div",
             {
               "aria-hidden": !0,
@@ -446,21 +446,21 @@ function Rn({
                 textOverflow: "ellipsis"
               },
               children: [
-                /* @__PURE__ */ s("span", { className: `nc-combo-overlay-text ${m ? "nc-small" : ""}`, children: M == null ? void 0 : M.label }),
-                (M == null ? void 0 : M.default) && /* @__PURE__ */ y("span", { className: `nc-combo-overlay-default ${m ? "nc-small" : ""}`, children: [
+                /* @__PURE__ */ s("span", { className: `nc-combo-overlay-text ${m ? "nc-small" : ""}`, children: I == null ? void 0 : I.label }),
+                (I == null ? void 0 : I.default) && /* @__PURE__ */ y("span", { className: `nc-combo-overlay-default ${m ? "nc-small" : ""}`, children: [
                   "(",
-                  A("common.default"),
+                  S("common.default"),
                   ")"
                 ] })
               ]
             }
           ),
-          z && /* @__PURE__ */ s(bt, { onClick: S, small: m }),
+          z && /* @__PURE__ */ s(bt, { onClick: C, small: m }),
           x && /* @__PURE__ */ s(vt, { open: c, onClick: () => p((R) => !R), small: m })
         ]
       }
     ),
-    /* @__PURE__ */ s(gt, { isOpen: c, options: E, onSelect: I, selectedValue: e, placement: d, anchorRef: k, small: m, highlightedIndex: v })
+    /* @__PURE__ */ s(gt, { isOpen: c, options: E, onSelect: $, selectedValue: e, placement: d, anchorRef: k, small: m, highlightedIndex: v })
   ] });
 }
 function En({ onClick: e, loading: t = !1, disabled: n = !1, size: r = "default", title: o, "aria-label": i }) {
@@ -541,7 +541,7 @@ function Ln({
   anchor: o,
   preferredDirection: i = "down"
 }) {
-  const l = H(null), [a, d] = T({ top: 0, left: 0 }), f = o || (r == null ? void 0 : r.current);
+  const l = W(null), [a, d] = T({ top: 0, left: 0 }), f = o || (r == null ? void 0 : r.current);
   if (L(() => {
     if (!e || !f || !l.current) return;
     const c = f.getBoundingClientRect(), p = l.current.getBoundingClientRect(), b = window.innerHeight, g = window.innerWidth, v = c.bottom + 8, N = v + p.height <= b - 8;
@@ -652,24 +652,24 @@ function Bn({
   className: v = "",
   onContentHeightChange: N
 }) {
-  const h = H(null), k = H(null), { t: m } = J(), A = { close: t }, E = (x) => {
+  const h = W(null), k = W(null), { t: m } = J(), S = { close: t }, E = (x) => {
     c && x.target === x.currentTarget && t();
   };
   if (L(() => {
     e && h.current && h.current.focus();
   }, [e]), L(() => {
     if (!N || !k.current) return;
-    const x = new ResizeObserver((C) => {
-      for (const I of C) {
-        const S = I.contentRect.height;
-        N(S);
+    const x = new ResizeObserver((A) => {
+      for (const $ of A) {
+        const C = $.contentRect.height;
+        N(C);
       }
     });
     return x.observe(k.current), () => {
       x.disconnect();
     };
   }, [N]), !e) return null;
-  const M = () => {
+  const I = () => {
     switch (i) {
       case "ok":
         return /* @__PURE__ */ s("div", { className: "nc-dialog-footer", children: /* @__PURE__ */ s(Y, { variant: "primary", onClick: a ?? t, disabled: p, children: m("common.ok") }) });
@@ -704,7 +704,7 @@ function Bn({
       default:
         return null;
     }
-  }, z = /* @__PURE__ */ s(He.Provider, { value: A, children: /* @__PURE__ */ s("div", { className: `nc-dialog-overlay${b ? " nc-fullscreen" : ""}`, onClick: E, children: /* @__PURE__ */ y(
+  }, z = /* @__PURE__ */ s(He.Provider, { value: S, children: /* @__PURE__ */ s("div", { className: `nc-dialog-overlay${b ? " nc-fullscreen" : ""}`, onClick: E, children: /* @__PURE__ */ y(
     "div",
     {
       ref: h,
@@ -720,7 +720,7 @@ function Bn({
           /* @__PURE__ */ s(De, { onClick: t, "aria-label": "Close dialog" })
         ] }),
         /* @__PURE__ */ s("div", { ref: k, className: "nc-dialog-content", children: r }),
-        M()
+        I()
       ]
     }
   ) }) });
@@ -803,22 +803,22 @@ function Dn({
   validator: v,
   showErrorMessage: N = !0
 }) {
-  const h = H(null), k = H(null), [m, A] = T(!1), [E, M] = T(!1), z = e !== void 0, [x, C] = T(t), I = z ? e : x, S = v ? v(I) : null, O = !!S, R = f === "password", P = R && p && !l && !b, D = d && I && !l && E, ee = w === "small" ? 32 : 44;
+  const h = W(null), k = W(null), [m, S] = T(!1), [E, I] = T(!1), z = e !== void 0, [x, A] = T(t), $ = z ? e : x, C = v ? v($) : null, D = !!C, R = f === "password", P = R && p && !l && !b, H = d && $ && !l && E, ee = w === "small" ? 32 : 44;
   let K = 12;
-  D && P ? K = ee * 2 : (D || P) && (K = ee);
+  H && P ? K = ee * 2 : (H || P) && (K = ee);
   const Q = () => {
     var te, ae;
-    z || C(""), n == null || n(""), o == null || o(), b ? (te = k.current) == null || te.focus() : (ae = h.current) == null || ae.focus();
+    z || A(""), n == null || n(""), o == null || o(), b ? (te = k.current) == null || te.focus() : (ae = h.current) == null || ae.focus();
   }, ce = (te) => {
     te.key === "Enter" && !b && (r == null || r());
   }, F = (te) => {
     const ae = te.target.value;
-    z || C(ae), n == null || n(ae);
+    z || A(ae), n == null || n(ae);
   }, Se = () => {
-    M(!0);
+    I(!0);
   }, Ce = () => {
-    M(!1);
-  }, Ie = `nc-input ${w === "small" ? "nc-small " : ""} ${O ? "nc-error " : ""}${u}`;
+    I(!1);
+  }, Ie = `nc-input ${w === "small" ? "nc-small " : ""} ${D ? "nc-error " : ""}${u}`;
   return /* @__PURE__ */ y("div", { className: "nc-col", style: { position: "relative", flex: 1, ...c }, children: [
     a && /* @__PURE__ */ s("span", { className: "nc-label", children: a }),
     /* @__PURE__ */ y("div", { style: { position: "relative", display: "flex", alignItems: b ? "flex-start" : "center" }, children: [
@@ -828,7 +828,7 @@ function Dn({
           ref: k,
           className: Ie,
           placeholder: i,
-          value: I,
+          value: $,
           onChange: F,
           onKeyDown: ce,
           onFocus: Se,
@@ -847,7 +847,7 @@ function Dn({
           type: R && m ? "text" : f,
           className: Ie,
           placeholder: i,
-          value: I,
+          value: $,
           onChange: F,
           onKeyDown: ce,
           onFocus: Se,
@@ -859,10 +859,10 @@ function Dn({
           }
         }
       ),
-      D && /* @__PURE__ */ s(yt, { onClick: Q, size: w, rightOffset: P ? ee + 4 : 4 }),
-      P && /* @__PURE__ */ s(xt, { visible: m, onClick: () => A(!m), size: w })
+      H && /* @__PURE__ */ s(yt, { onClick: Q, size: w, rightOffset: P ? ee + 4 : 4 }),
+      P && /* @__PURE__ */ s(xt, { visible: m, onClick: () => S(!m), size: w })
     ] }),
-    O && N && /* @__PURE__ */ s("span", { className: "nc-error-message", children: S })
+    D && N && /* @__PURE__ */ s("span", { className: "nc-error-message", children: C })
   ] });
 }
 function Hn({
@@ -916,7 +916,7 @@ function Wn({ title: e, titleTools: t, children: n, style: r }) {
   ] });
 }
 function On({ values: e, onChange: t, options: n, placeholder: r = "Select…", label: o }) {
-  const [i, l] = T(!1), [a, d] = T(""), f = H(null), u = ge(() => n.filter((c) => c.label.toLowerCase().includes(a.toLowerCase())), [n, a]);
+  const [i, l] = T(!1), [a, d] = T(""), f = W(null), u = ge(() => n.filter((c) => c.label.toLowerCase().includes(a.toLowerCase())), [n, a]);
   L(() => {
     function c(p) {
       !(p.target instanceof Node) || !f.current || f.current.contains(p.target) || l(!1);
@@ -1008,41 +1008,41 @@ function Fn({
   className: o = "",
   disabled: i = !1
 }) {
-  const [l, a] = T(!1), [d, f] = T(""), [u, w] = T(""), [c, p] = T({ top: 0, left: 0, width: 0, right: void 0 }), b = H(null), g = H(null);
+  const [l, a] = T(!1), [d, f] = T(""), [u, w] = T(""), [c, p] = T({ top: 0, left: 0, width: 0, right: void 0 }), b = W(null), g = W(null);
   L(() => {
     if (l && b.current) {
-      const C = b.current.getBoundingClientRect(), S = Math.max(C.width, 400);
-      window.innerWidth - C.left < S && C.right >= S ? p({
-        top: C.bottom + 4,
+      const A = b.current.getBoundingClientRect(), C = Math.max(A.width, 400);
+      window.innerWidth - A.left < C && A.right >= C ? p({
+        top: A.bottom + 4,
         left: 0,
         // Not used but type needs it, let's just use 0
-        right: window.innerWidth - C.right,
-        width: S
+        right: window.innerWidth - A.right,
+        width: C
       }) : p({
-        top: C.bottom + 4,
-        left: C.left,
+        top: A.bottom + 4,
+        left: A.left,
         right: void 0,
-        width: S
+        width: C
       });
     }
   }, [l]), L(() => {
     if (!l) return;
-    const C = (I) => {
-      b.current && !b.current.contains(I.target) && g.current && !g.current.contains(I.target) && a(!1);
+    const A = ($) => {
+      b.current && !b.current.contains($.target) && g.current && !g.current.contains($.target) && a(!1);
     };
-    return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
+    return document.addEventListener("mousedown", A), () => document.removeEventListener("mousedown", A);
   }, [l]);
   const v = () => {
     f(e || $e()), w(t || $e()), a(!0);
   }, N = () => {
     a(!1);
   }, h = () => {
-    const C = fe(d), I = fe(u);
-    if (C || I)
+    const A = fe(d), $ = fe(u);
+    if (A || $)
       return;
-    const S = ue(d), O = ue(u);
-    S && O && (n == null || n(S, O)), a(!1);
-  }, k = e && t ? `${Me(e)} - ${Me(t)}` : "Select month range", m = fe(d), A = fe(u), E = ue(d), M = ue(u), z = E && M && E > M, x = l ? pe(
+    const C = ue(d), D = ue(u);
+    C && D && (n == null || n(C, D)), a(!1);
+  }, k = e && t ? `${Me(e)} - ${Me(t)}` : "Select month range", m = fe(d), S = fe(u), E = ue(d), I = ue(u), z = E && I && E > I, x = l ? pe(
     /* @__PURE__ */ s(
       "div",
       {
@@ -1065,7 +1065,7 @@ function Fn({
                   type: "text",
                   className: `nc-month-input ${m ? "nc-error" : ""}`,
                   value: d,
-                  onChange: (C) => f(C.target.value),
+                  onChange: (A) => f(A.target.value),
                   placeholder: "YY-M(M) or YYYY-M(M)"
                 }
               ),
@@ -1077,23 +1077,23 @@ function Fn({
                 "input",
                 {
                   type: "text",
-                  className: `nc-month-input ${A ? "nc-error" : ""}`,
+                  className: `nc-month-input ${S ? "nc-error" : ""}`,
                   value: u,
-                  onChange: (C) => w(C.target.value),
+                  onChange: (A) => w(A.target.value),
                   placeholder: "YY-M(M) or YYYY-M(M)"
                 }
               ),
-              A && /* @__PURE__ */ s("div", { className: "nc-month-error-text", children: A })
+              S && /* @__PURE__ */ s("div", { className: "nc-month-error-text", children: S })
             ] })
           ] }),
-          z && !m && !A && /* @__PURE__ */ s("div", { className: "nc-month-range-error", children: "End month must be after or equal to start month" }),
+          z && !m && !S && /* @__PURE__ */ s("div", { className: "nc-month-range-error", children: "End month must be after or equal to start month" }),
           /* @__PURE__ */ y("div", { className: "nc-month-range-picker-footer", children: [
             /* @__PURE__ */ s(
               Y,
               {
                 variant: "primary",
                 onClick: h,
-                disabled: !d || !u || !!m || !!A || !!z,
+                disabled: !d || !u || !!m || !!S || !!z,
                 children: "Apply"
               }
             ),
@@ -1245,42 +1245,42 @@ function Yn({ active: e, children: t, keepMounted: n = !1, className: r = "", st
   return /* @__PURE__ */ s("div", { className: `nc-tab-panels ${r}`, style: o, children: l });
 }
 function jn({ tabs: e, active: t, onChange: n, onClose: r, permanentTabs: o, className: i, toolbar: l, multiline: a, orientation: d = "horizontal", style: f }) {
-  const u = H(null), [w, c] = T(!1), [p, b] = T(!1), g = d === "verticalLeft" || d === "verticalRight", v = H(!1), N = H(0), h = H(0), k = H(!1);
+  const u = W(null), [w, c] = T(!1), [p, b] = T(!1), g = d === "verticalLeft" || d === "verticalRight", v = W(!1), N = W(0), h = W(0), k = W(!1);
   L(() => {
     const x = () => {
       if (u.current)
         if (g) {
-          const { scrollTop: I, scrollHeight: S, clientHeight: O } = u.current;
-          c(I > 1), b(I < S - O - 1);
+          const { scrollTop: $, scrollHeight: C, clientHeight: D } = u.current;
+          c($ > 1), b($ < C - D - 1);
         } else {
-          const { scrollLeft: I, scrollWidth: S, clientWidth: O } = u.current;
-          c(I > 1), b(I < S - O - 1);
+          const { scrollLeft: $, scrollWidth: C, clientWidth: D } = u.current;
+          c($ > 1), b($ < C - D - 1);
         }
-    }, C = u.current;
-    if (C)
-      return x(), C.addEventListener("scroll", x), window.addEventListener("resize", x), () => {
-        C.removeEventListener("scroll", x), window.removeEventListener("resize", x);
+    }, A = u.current;
+    if (A)
+      return x(), A.addEventListener("scroll", x), window.addEventListener("resize", x), () => {
+        A.removeEventListener("scroll", x), window.removeEventListener("resize", x);
       };
   }, [e, g]);
   const m = (x) => {
     u.current && (v.current = !0, k.current = !1, N.current = g ? x.clientY : x.clientX, h.current = g ? u.current.scrollTop : u.current.scrollLeft, u.current.style.cursor = "grabbing", u.current.style.userSelect = "none");
-  }, A = (x) => {
+  }, S = (x) => {
     if (!v.current || !u.current) return;
-    const C = g ? x.clientY : x.clientX, I = N.current - C;
-    Math.abs(I) > 3 && (k.current = !0), g ? u.current.scrollTop = h.current + I : u.current.scrollLeft = h.current + I;
+    const A = g ? x.clientY : x.clientX, $ = N.current - A;
+    Math.abs($) > 3 && (k.current = !0), g ? u.current.scrollTop = h.current + $ : u.current.scrollLeft = h.current + $;
   }, E = () => {
     u.current && (v.current = !1, u.current.style.cursor = "", u.current.style.userSelect = "");
-  }, M = () => {
+  }, I = () => {
     E();
   };
   L(() => {
     const x = u.current;
     if (!x || g) return;
-    const C = (I) => {
-      I.deltaY !== 0 && (I.preventDefault(), x.scrollLeft += I.deltaY * 0.3);
+    const A = ($) => {
+      $.deltaY !== 0 && ($.preventDefault(), x.scrollLeft += $.deltaY * 0.3);
     };
-    return x.addEventListener("wheel", C, { passive: !1 }), () => {
-      x.removeEventListener("wheel", C);
+    return x.addEventListener("wheel", A, { passive: !1 }), () => {
+      x.removeEventListener("wheel", A);
     };
   }, [g]);
   const z = (x) => {
@@ -1295,36 +1295,36 @@ function jn({ tabs: e, active: t, onChange: n, onClose: r, permanentTabs: o, cla
           ref: u,
           className: `nc-tab-scroll ${a ? "nc-multiline" : ""}`,
           onMouseDown: m,
-          onMouseMove: A,
+          onMouseMove: S,
           onMouseUp: E,
-          onMouseLeave: M,
+          onMouseLeave: I,
           style: { cursor: "grab" },
           children: e.map((x) => {
-            const C = r && !(o != null && o.includes(x));
+            const A = typeof x == "string" ? x : x.id, $ = typeof x == "string" ? x : x.label, C = r && !(o != null && o.includes(A));
             return /* @__PURE__ */ y(
               "div",
               {
-                className: `nc-tab-item ${t === x ? "nc-active" : ""} ${C ? "nc-closable" : ""}`,
-                onClick: () => z(x),
+                className: `nc-tab-item ${t === A ? "nc-active" : ""} ${C ? "nc-closable" : ""}`,
+                onClick: () => z(A),
                 role: "button",
                 tabIndex: 0,
-                onKeyDown: (I) => {
-                  (I.key === "Enter" || I.key === " ") && n(x);
+                onKeyDown: (D) => {
+                  (D.key === "Enter" || D.key === " ") && n(A);
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { className: "nc-tab-label", children: g ? x : x.toUpperCase() }),
+                  /* @__PURE__ */ s("span", { className: "nc-tab-label", children: g ? $ : typeof $ == "string" ? $.toUpperCase() : $ }),
                   C && /* @__PURE__ */ s(
                     "span",
                     {
                       className: "nc-tab-close",
                       role: "button",
                       tabIndex: 0,
-                      "aria-label": `Close ${x}`,
-                      onClick: (I) => {
-                        I.stopPropagation(), r(x);
+                      "aria-label": `Close ${typeof $ == "string" ? $ : A}`,
+                      onClick: (D) => {
+                        D.stopPropagation(), r(A);
                       },
-                      onKeyDown: (I) => {
-                        (I.key === "Enter" || I.key === " ") && (I.stopPropagation(), r(x));
+                      onKeyDown: (D) => {
+                        (D.key === "Enter" || D.key === " ") && (D.stopPropagation(), r(A));
                       },
                       children: /* @__PURE__ */ y("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
                         /* @__PURE__ */ s("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
@@ -1334,7 +1334,7 @@ function jn({ tabs: e, active: t, onChange: n, onClose: r, permanentTabs: o, cla
                   )
                 ]
               },
-              x
+              A
             );
           })
         }
@@ -1435,30 +1435,30 @@ function Ct(e, t) {
 }
 const _n = tt(
   function({ value: t, onChange: n, placeholder: r, className: o, style: i, showLineNumbers: l = !1, onCursorChange: a, highlightLine: d }, f) {
-    const u = H(null), w = H(null), c = H(null);
+    const u = W(null), w = W(null), c = W(null);
     nt(f, () => ({
       goToLine(h) {
         const k = u.current;
         if (!k) return;
         const m = Ct(t, h);
         k.focus(), k.setSelectionRange(m, m);
-        const A = parseFloat(getComputedStyle(k).lineHeight) || 18;
-        k.scrollTop = (Math.max(1, h) - 1) * A, b(), p();
+        const S = parseFloat(getComputedStyle(k).lineHeight) || 18;
+        k.scrollTop = (Math.max(1, h) - 1) * S, b(), p();
       },
       goToPosition(h, k, m) {
-        const A = u.current;
-        if (!A) return;
+        const S = u.current;
+        if (!S) return;
         const E = St(t, h, k, m);
-        A.focus(), A.setSelectionRange(E, E);
-        const M = parseFloat(getComputedStyle(A).lineHeight) || 18;
-        A.scrollTop = (Math.max(1, h) - 1) * M, b(), p();
+        S.focus(), S.setSelectionRange(E, E);
+        const I = parseFloat(getComputedStyle(S).lineHeight) || 18;
+        S.scrollTop = (Math.max(1, h) - 1) * I, b(), p();
       }
     }), [t]);
-    const p = W(() => {
+    const p = O(() => {
       if (!a || !u.current) return;
       const h = At(t, u.current.selectionStart);
       a(h);
-    }, [a, t]), b = W(() => {
+    }, [a, t]), b = O(() => {
       const h = u.current;
       h && (w.current && (w.current.scrollTop = h.scrollTop, w.current.scrollLeft = h.scrollLeft), c.current && (c.current.scrollTop = h.scrollTop));
     }, []);
@@ -1466,8 +1466,8 @@ const _n = tt(
       if (d == null || d < 1) return;
       const h = u.current;
       if (!h) return;
-      const k = parseFloat(getComputedStyle(h).lineHeight) || 18, m = (d - 1) * k, A = m + k;
-      (m < h.scrollTop || A > h.scrollTop + h.clientHeight) && (h.scrollTop = m - h.clientHeight / 2 + k / 2), b();
+      const k = parseFloat(getComputedStyle(h).lineHeight) || 18, m = (d - 1) * k, S = m + k;
+      (m < h.scrollTop || S > h.scrollTop + h.clientHeight) && (h.scrollTop = m - h.clientHeight / 2 + k / 2), b();
     }, [d]);
     const g = ge(() => t.split(`
 `).length, [t]), v = () => {
@@ -1478,16 +1478,16 @@ const _n = tt(
         );
       return /* @__PURE__ */ s("div", { className: "nc-csv-gutter", ref: c, children: h });
     }, N = (h) => h ? h.split(`
-`).map((m, A) => {
+`).map((m, S) => {
       const E = m.split("	");
-      return /* @__PURE__ */ y("div", { className: `nc-csv-line ${d === A + 1 ? "nc-csv-highlight" : ""}`, children: [
-        E.map((M, z) => /* @__PURE__ */ y("span", { children: [
+      return /* @__PURE__ */ y("div", { className: `nc-csv-line ${d === S + 1 ? "nc-csv-highlight" : ""}`, children: [
+        E.map((I, z) => /* @__PURE__ */ y("span", { children: [
           z > 0 && /* @__PURE__ */ s("span", { className: "nc-csv-tab-char", children: "	" }),
-          /* @__PURE__ */ s("span", { style: { color: Re[z % Re.length] }, children: M })
+          /* @__PURE__ */ s("span", { style: { color: Re[z % Re.length] }, children: I })
         ] }, z)),
         m === "" && `
 `
-      ] }, A);
+      ] }, S);
     }) : null;
     return /* @__PURE__ */ y("div", { className: `nc-csv-textarea-container ${l ? "nc-csv-with-gutter" : ""} ${o ?? ""}`, style: i, children: [
       l && v(),
@@ -1594,7 +1594,7 @@ function $t({ notification: e }) {
   );
 }
 function Un() {
-  const [e, t] = T([]), [n, r] = T(/* @__PURE__ */ new Map()), [o, i] = T(/* @__PURE__ */ new Set()), l = H(null), a = H([]);
+  const [e, t] = T([]), [n, r] = T(/* @__PURE__ */ new Map()), [o, i] = T(/* @__PURE__ */ new Set()), l = W(null), a = W([]);
   return L(() => It((f) => {
     const u = new Set(a.current.map((c) => c.id)), w = f.filter((c) => !u.has(c.id)).map((c) => c.id);
     w.length > 0 ? (t(f), i(new Set(w)), requestAnimationFrame(() => {
@@ -1973,19 +1973,19 @@ function Fe({ appId: e, isActive: t, onClose: n }) {
   xe.useEffect(() => {
     o != null && o.titleKey && l(r(o.titleKey));
   }, [o, r]);
-  const g = W((x) => {
+  const g = O((x) => {
     l(x);
-  }, []), v = W((x) => {
+  }, []), v = O((x) => {
     d(() => x);
-  }, []), N = W(() => {
+  }, []), N = O(() => {
     d(null);
-  }, []), h = W((x) => {
+  }, []), h = O((x) => {
     u(x);
-  }, []), k = W(() => {
+  }, []), k = O(() => {
     u(null);
-  }, []), m = W((x) => {
+  }, []), m = O((x) => {
     c(x);
-  }, []), A = W((x) => {
+  }, []), S = O((x) => {
     b(x);
   }, []), E = ge(() => ({
     setTitle: g,
@@ -1994,12 +1994,12 @@ function Fe({ appId: e, isActive: t, onClose: n }) {
     setToolbar: h,
     clearToolbar: k,
     setHideBackButton: m,
-    setHideTitleBar: A,
+    setHideTitleBar: S,
     close: n
-  }), [g, v, N, h, k, m, A, n]);
+  }), [g, v, N, h, k, m, S, n]);
   if (!o)
     return null;
-  const M = o.component, z = !o.hideTitleBar && !p;
+  const I = o.component, z = !o.hideTitleBar && !p;
   return /* @__PURE__ */ y(
     "div",
     {
@@ -2048,7 +2048,7 @@ function Fe({ appId: e, isActive: t, onClose: n }) {
                     children: /* @__PURE__ */ s(Be, {})
                   }
                 ),
-                children: /* @__PURE__ */ s(M, {})
+                children: /* @__PURE__ */ s(I, {})
               }
             ) }) })
           }
@@ -2272,8 +2272,8 @@ const ke = "-", Dt = (e) => {
     i.push(h);
     const k = o(g, b);
     for (let m = 0; m < k.length; ++m) {
-      const A = k[m];
-      i.push(N + A);
+      const S = k[m];
+      i.push(N + S);
     }
     a = f + (a.length > 0 ? " " + a : a);
   }
@@ -2313,7 +2313,7 @@ function qt(e, ...t) {
 const B = (e) => {
   const t = (n) => n[e] || [];
   return t.isThemeGetter = !0, t;
-}, Ue = /^\[(?:([a-z-]+):)?(.+)\]$/i, Xt = /^\d+\/\d+$/, Jt = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Zt = /\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$/, en = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, tn = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, nn = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, G = (e) => re(e) || Jt.has(e) || Xt.test(e), U = (e) => ie(e, "length", un), re = (e) => !!e && !Number.isNaN(Number(e)), be = (e) => ie(e, "number", re), le = (e) => !!e && Number.isInteger(Number(e)), rn = (e) => e.endsWith("%") && re(e.slice(0, -1)), $ = (e) => Ue.test(e), q = (e) => Qt.test(e), on = /* @__PURE__ */ new Set(["length", "size", "percentage"]), sn = (e) => ie(e, on, qe), cn = (e) => ie(e, "position", qe), an = /* @__PURE__ */ new Set(["image", "url"]), ln = (e) => ie(e, an, fn), dn = (e) => ie(e, "", pn), de = () => !0, ie = (e, t, n) => {
+}, Ue = /^\[(?:([a-z-]+):)?(.+)\]$/i, Xt = /^\d+\/\d+$/, Jt = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Zt = /\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$/, en = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, tn = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, nn = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, G = (e) => re(e) || Jt.has(e) || Xt.test(e), U = (e) => ie(e, "length", un), re = (e) => !!e && !Number.isNaN(Number(e)), be = (e) => ie(e, "number", re), le = (e) => !!e && Number.isInteger(Number(e)), rn = (e) => e.endsWith("%") && re(e.slice(0, -1)), M = (e) => Ue.test(e), q = (e) => Qt.test(e), on = /* @__PURE__ */ new Set(["length", "size", "percentage"]), sn = (e) => ie(e, on, qe), cn = (e) => ie(e, "position", qe), an = /* @__PURE__ */ new Set(["image", "url"]), ln = (e) => ie(e, an, fn), dn = (e) => ie(e, "", pn), de = () => !0, ie = (e, t, n) => {
   const r = Ue.exec(e);
   return r ? r[1] ? typeof t == "string" ? r[1] === t : t.has(r[1]) : n(r[2]) : !1;
 }, un = (e) => (
@@ -2322,36 +2322,36 @@ const B = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   Zt.test(e) && !en.test(e)
 ), qe = () => !1, pn = (e) => tn.test(e), fn = (e) => nn.test(e), hn = () => {
-  const e = B("colors"), t = B("spacing"), n = B("blur"), r = B("brightness"), o = B("borderColor"), i = B("borderRadius"), l = B("borderSpacing"), a = B("borderWidth"), d = B("contrast"), f = B("grayscale"), u = B("hueRotate"), w = B("invert"), c = B("gap"), p = B("gradientColorStops"), b = B("gradientColorStopPositions"), g = B("inset"), v = B("margin"), N = B("opacity"), h = B("padding"), k = B("saturate"), m = B("scale"), A = B("sepia"), E = B("skew"), M = B("space"), z = B("translate"), x = () => ["auto", "contain", "none"], C = () => ["auto", "hidden", "clip", "visible", "scroll"], I = () => ["auto", $, t], S = () => [$, t], O = () => ["", G, U], R = () => ["auto", re, $], P = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], D = () => ["solid", "dashed", "dotted", "double", "none"], ee = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], K = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Q = () => ["", "0", $], ce = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], F = () => [re, $];
+  const e = B("colors"), t = B("spacing"), n = B("blur"), r = B("brightness"), o = B("borderColor"), i = B("borderRadius"), l = B("borderSpacing"), a = B("borderWidth"), d = B("contrast"), f = B("grayscale"), u = B("hueRotate"), w = B("invert"), c = B("gap"), p = B("gradientColorStops"), b = B("gradientColorStopPositions"), g = B("inset"), v = B("margin"), N = B("opacity"), h = B("padding"), k = B("saturate"), m = B("scale"), S = B("sepia"), E = B("skew"), I = B("space"), z = B("translate"), x = () => ["auto", "contain", "none"], A = () => ["auto", "hidden", "clip", "visible", "scroll"], $ = () => ["auto", M, t], C = () => [M, t], D = () => ["", G, U], R = () => ["auto", re, M], P = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], H = () => ["solid", "dashed", "dotted", "double", "none"], ee = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], K = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Q = () => ["", "0", M], ce = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], F = () => [re, M];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [de],
       spacing: [G, U],
-      blur: ["none", "", q, $],
+      blur: ["none", "", q, M],
       brightness: F(),
       borderColor: [e],
-      borderRadius: ["none", "", "full", q, $],
-      borderSpacing: S(),
-      borderWidth: O(),
+      borderRadius: ["none", "", "full", q, M],
+      borderSpacing: C(),
+      borderWidth: D(),
       contrast: F(),
       grayscale: Q(),
       hueRotate: F(),
       invert: Q(),
-      gap: S(),
+      gap: C(),
       gradientColorStops: [e],
       gradientColorStopPositions: [rn, U],
-      inset: I(),
-      margin: I(),
+      inset: $(),
+      margin: $(),
       opacity: F(),
-      padding: S(),
+      padding: C(),
       saturate: F(),
       scale: F(),
       sepia: Q(),
       skew: F(),
-      space: S(),
-      translate: S()
+      space: C(),
+      translate: C()
     },
     classGroups: {
       // Layout
@@ -2360,7 +2360,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/aspect-ratio
        */
       aspect: [{
-        aspect: ["auto", "square", "video", $]
+        aspect: ["auto", "square", "video", M]
       }],
       /**
        * Container
@@ -2445,28 +2445,28 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/object-position
        */
       "object-position": [{
-        object: [...P(), $]
+        object: [...P(), M]
       }],
       /**
        * Overflow
        * @see https://tailwindcss.com/docs/overflow
        */
       overflow: [{
-        overflow: C()
+        overflow: A()
       }],
       /**
        * Overflow X
        * @see https://tailwindcss.com/docs/overflow
        */
       "overflow-x": [{
-        "overflow-x": C()
+        "overflow-x": A()
       }],
       /**
        * Overflow Y
        * @see https://tailwindcss.com/docs/overflow
        */
       "overflow-y": [{
-        "overflow-y": C()
+        "overflow-y": A()
       }],
       /**
        * Overscroll Behavior
@@ -2567,7 +2567,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ["auto", le, $]
+        z: ["auto", le, M]
       }],
       // Flexbox and Grid
       /**
@@ -2575,7 +2575,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: I()
+        basis: $()
       }],
       /**
        * Flex Direction
@@ -2596,7 +2596,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: ["1", "auto", "initial", "none", $]
+        flex: ["1", "auto", "initial", "none", M]
       }],
       /**
        * Flex Grow
@@ -2617,7 +2617,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ["first", "last", "none", le, $]
+        order: ["first", "last", "none", le, M]
       }],
       /**
        * Grid Template Columns
@@ -2632,8 +2632,8 @@ const B = (e) => {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: ["full", le, $]
-        }, $]
+          span: ["full", le, M]
+        }, M]
       }],
       /**
        * Grid Column Start
@@ -2662,8 +2662,8 @@ const B = (e) => {
        */
       "row-start-end": [{
         row: ["auto", {
-          span: [le, $]
-        }, $]
+          span: [le, M]
+        }, M]
       }],
       /**
        * Grid Row Start
@@ -2691,14 +2691,14 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/grid-auto-columns
        */
       "auto-cols": [{
-        "auto-cols": ["auto", "min", "max", "fr", $]
+        "auto-cols": ["auto", "min", "max", "fr", M]
       }],
       /**
        * Grid Auto Rows
        * @see https://tailwindcss.com/docs/grid-auto-rows
        */
       "auto-rows": [{
-        "auto-rows": ["auto", "min", "max", "fr", $]
+        "auto-rows": ["auto", "min", "max", "fr", M]
       }],
       /**
        * Gap
@@ -2916,7 +2916,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/space
        */
       "space-x": [{
-        "space-x": [M]
+        "space-x": [I]
       }],
       /**
        * Space Between X Reverse
@@ -2928,7 +2928,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/space
        */
       "space-y": [{
-        "space-y": [M]
+        "space-y": [I]
       }],
       /**
        * Space Between Y Reverse
@@ -2941,21 +2941,21 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/width
        */
       w: [{
-        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", $, t]
+        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", M, t]
       }],
       /**
        * Min-Width
        * @see https://tailwindcss.com/docs/min-width
        */
       "min-w": [{
-        "min-w": [$, t, "min", "max", "fit"]
+        "min-w": [M, t, "min", "max", "fit"]
       }],
       /**
        * Max-Width
        * @see https://tailwindcss.com/docs/max-width
        */
       "max-w": [{
-        "max-w": [$, t, "none", "full", "min", "max", "fit", "prose", {
+        "max-w": [M, t, "none", "full", "min", "max", "fit", "prose", {
           screen: [q]
         }, q]
       }],
@@ -2964,28 +2964,28 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: [$, t, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
+        h: [M, t, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       "min-h": [{
-        "min-h": [$, t, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "min-h": [M, t, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       "max-h": [{
-        "max-h": [$, t, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "max-h": [M, t, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Size
        * @see https://tailwindcss.com/docs/size
        */
       size: [{
-        size: [$, t, "auto", "min", "max", "fit"]
+        size: [M, t, "auto", "min", "max", "fit"]
       }],
       // Typography
       /**
@@ -3054,7 +3054,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/letter-spacing
        */
       tracking: [{
-        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", $]
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", M]
       }],
       /**
        * Line Clamp
@@ -3068,21 +3068,21 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", G, $]
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", G, M]
       }],
       /**
        * List Style Image
        * @see https://tailwindcss.com/docs/list-style-image
        */
       "list-image": [{
-        "list-image": ["none", $]
+        "list-image": ["none", M]
       }],
       /**
        * List Style Type
        * @see https://tailwindcss.com/docs/list-style-type
        */
       "list-style-type": [{
-        list: ["none", "disc", "decimal", $]
+        list: ["none", "disc", "decimal", M]
       }],
       /**
        * List Style Position
@@ -3137,7 +3137,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-style
        */
       "text-decoration-style": [{
-        decoration: [...D(), "wavy"]
+        decoration: [...H(), "wavy"]
       }],
       /**
        * Text Decoration Thickness
@@ -3151,7 +3151,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": ["auto", G, $]
+        "underline-offset": ["auto", G, M]
       }],
       /**
        * Text Decoration Color
@@ -3182,14 +3182,14 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/text-indent
        */
       indent: [{
-        indent: S()
+        indent: C()
       }],
       /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
        */
       "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", $]
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", M]
       }],
       /**
        * Whitespace
@@ -3217,7 +3217,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/content
        */
       content: [{
-        content: ["none", $]
+        content: ["none", M]
       }],
       // Backgrounds
       /**
@@ -3511,7 +3511,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/border-style
        */
       "border-style": [{
-        border: [...D(), "hidden"]
+        border: [...H(), "hidden"]
       }],
       /**
        * Divide Width X
@@ -3549,7 +3549,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/divide-style
        */
       "divide-style": [{
-        divide: D()
+        divide: H()
       }],
       /**
        * Border Color
@@ -3626,14 +3626,14 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/outline-style
        */
       "outline-style": [{
-        outline: ["", ...D()]
+        outline: ["", ...H()]
       }],
       /**
        * Outline Offset
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [G, $]
+        "outline-offset": [G, M]
       }],
       /**
        * Outline Width
@@ -3654,7 +3654,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/ring-width
        */
       "ring-w": [{
-        ring: O()
+        ring: D()
       }],
       /**
        * Ring Width Inset
@@ -3760,7 +3760,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/drop-shadow
        */
       "drop-shadow": [{
-        "drop-shadow": ["", "none", q, $]
+        "drop-shadow": ["", "none", q, M]
       }],
       /**
        * Grayscale
@@ -3795,7 +3795,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/sepia
        */
       sepia: [{
-        sepia: [A]
+        sepia: [S]
       }],
       /**
        * Backdrop Filter
@@ -3866,7 +3866,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-sepia
        */
       "backdrop-sepia": [{
-        "backdrop-sepia": [A]
+        "backdrop-sepia": [S]
       }],
       // Tables
       /**
@@ -3917,7 +3917,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/transition-property
        */
       transition: [{
-        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", $]
+        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", M]
       }],
       /**
        * Transition Duration
@@ -3931,7 +3931,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/transition-timing-function
        */
       ease: [{
-        ease: ["linear", "in", "out", "in-out", $]
+        ease: ["linear", "in", "out", "in-out", M]
       }],
       /**
        * Transition Delay
@@ -3945,7 +3945,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/animation
        */
       animate: [{
-        animate: ["none", "spin", "ping", "pulse", "bounce", $]
+        animate: ["none", "spin", "ping", "pulse", "bounce", M]
       }],
       // Transforms
       /**
@@ -3981,7 +3981,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/rotate
        */
       rotate: [{
-        rotate: [le, $]
+        rotate: [le, M]
       }],
       /**
        * Translate X
@@ -4016,7 +4016,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       "transform-origin": [{
-        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", $]
+        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", M]
       }],
       // Interactivity
       /**
@@ -4038,7 +4038,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/cursor
        */
       cursor: [{
-        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", $]
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", M]
       }],
       /**
        * Caret Color
@@ -4073,126 +4073,126 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-m": [{
-        "scroll-m": S()
+        "scroll-m": C()
       }],
       /**
        * Scroll Margin X
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
-        "scroll-mx": S()
+        "scroll-mx": C()
       }],
       /**
        * Scroll Margin Y
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
-        "scroll-my": S()
+        "scroll-my": C()
       }],
       /**
        * Scroll Margin Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
-        "scroll-ms": S()
+        "scroll-ms": C()
       }],
       /**
        * Scroll Margin End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
-        "scroll-me": S()
+        "scroll-me": C()
       }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mt": [{
-        "scroll-mt": S()
+        "scroll-mt": C()
       }],
       /**
        * Scroll Margin Right
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mr": [{
-        "scroll-mr": S()
+        "scroll-mr": C()
       }],
       /**
        * Scroll Margin Bottom
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mb": [{
-        "scroll-mb": S()
+        "scroll-mb": C()
       }],
       /**
        * Scroll Margin Left
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ml": [{
-        "scroll-ml": S()
+        "scroll-ml": C()
       }],
       /**
        * Scroll Padding
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-p": [{
-        "scroll-p": S()
+        "scroll-p": C()
       }],
       /**
        * Scroll Padding X
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
-        "scroll-px": S()
+        "scroll-px": C()
       }],
       /**
        * Scroll Padding Y
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
-        "scroll-py": S()
+        "scroll-py": C()
       }],
       /**
        * Scroll Padding Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
-        "scroll-ps": S()
+        "scroll-ps": C()
       }],
       /**
        * Scroll Padding End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
-        "scroll-pe": S()
+        "scroll-pe": C()
       }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pt": [{
-        "scroll-pt": S()
+        "scroll-pt": C()
       }],
       /**
        * Scroll Padding Right
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pr": [{
-        "scroll-pr": S()
+        "scroll-pr": C()
       }],
       /**
        * Scroll Padding Bottom
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pb": [{
-        "scroll-pb": S()
+        "scroll-pb": C()
       }],
       /**
        * Scroll Padding Left
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pl": [{
-        "scroll-pl": S()
+        "scroll-pl": C()
       }],
       /**
        * Scroll Snap Align
@@ -4260,7 +4260,7 @@ const B = (e) => {
        * @see https://tailwindcss.com/docs/will-change
        */
       "will-change": [{
-        "will-change": ["auto", "scroll", "contents", "transform", $]
+        "will-change": ["auto", "scroll", "contents", "transform", M]
       }],
       // SVG
       /**
@@ -4494,21 +4494,21 @@ function nr() {
 }
 const Ae = se(null);
 function rr({ rootView: e, children: t }) {
-  const { t: n } = J(), r = zt(), [o, i] = T([e]), [l, a] = T([null]), d = W((m, A) => {
+  const { t: n } = J(), r = zt(), [o, i] = T([e]), [l, a] = T([null]), d = O((m, S) => {
     a((E) => {
-      const M = [...E];
-      return M[m] = A, M;
+      const I = [...E];
+      return I[m] = S, I;
     });
-  }, []), f = W((m) => {
-    a((A) => {
-      const E = [...A];
+  }, []), f = O((m) => {
+    a((S) => {
+      const E = [...S];
       return E[m] = null, E;
     });
-  }, []), u = W((m) => {
-    i((A) => [...A, m]), a((A) => [...A, null]);
-  }, []), w = W(() => {
+  }, []), u = O((m) => {
+    i((S) => [...S, m]), a((S) => [...S, null]);
+  }, []), w = O(() => {
     i((m) => m.length <= 1 ? m : m.slice(0, -1)), a((m) => m.slice(0, -1));
-  }, []), c = W(() => {
+  }, []), c = O(() => {
     i([e]), a([null]);
   }, [e]), p = o.length, b = p > 1, g = o.length - 1, v = o[o.length - 1], N = v != null && v.titleKey ? n(v.titleKey) : (v == null ? void 0 : v.title) ?? "";
   L(() => {
@@ -4539,9 +4539,9 @@ function bn({ index: e, children: t }) {
   const n = X(Ae);
   if (!n)
     throw new Error("NavViewProvider must be used within NavStackProvider");
-  const { updateToolbar: r, clearToolbarAt: o, topIndex: i } = n, l = W((f) => {
+  const { updateToolbar: r, clearToolbarAt: o, topIndex: i } = n, l = O((f) => {
     e === i && r(e, f);
-  }, [e, i, r]), a = W(() => {
+  }, [e, i, r]), a = O(() => {
     e === i && o(e);
   }, [e, i, o]), d = {
     setToolbar: l,