@noxickon/onyx 0.0.2 → 0.0.3

package/dist/onyx.es.js

@@ -1,133 +1,132 @@
-import { j as i } from "./chunks/jsx-runtime-C5mzlN2N.js";
-import * as f from "react";
-import ee, { useState as z, useEffect as Y, useId as ue, useRef as ye, useCallback as Fe, createContext as We, useContext as Be } from "react";
-import { t as N, b as T, a as U, O as De } from "./chunks/Button-CLMaoxRW.js";
-import { c as Ce, d as je, b as Ne } from "./chunks/Input-BQQT5eZ0.js";
-import { O as Sn, a as Rn } from "./chunks/Input-BQQT5eZ0.js";
-import { createPortal as He } from "react-dom";
-import { M as ft } from "./chunks/constants-CDXq37n6.js";
-import { u as Ae } from "./chunks/useAuth-C-TIgBfr.js";
-import './index.css';const cn = ({ children: e, className: t }) => /* @__PURE__ */ i.jsx("div", { className: N("flex items-center gap-3", t), children: e }), he = {
+import { j as e } from "./chunks/jsx-runtime--oOP9f8K.js";
+import _, { useState as S, useEffect as H, useId as J, useRef as ee, useCallback as ne, createContext as le, useContext as ae } from "react";
+import { t as b, b as $, a as T, O as oe } from "./chunks/Button-BV4_pmoH.js";
+import { c as te, d as se, b as re } from "./chunks/Input-BraK4lDE.js";
+import { O as pt, a as gt } from "./chunks/Input-BraK4lDE.js";
+import { createPortal as ie } from "react-dom";
+import { M as pe } from "./chunks/constants-CDXq37n6.js";
+import { u as ce } from "./chunks/useAuth-CR3bAGqp.js";
+import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("flex items-center gap-3", s), children: t }), X = {
   rounded: "rounded-full",
   square: "rounded-lg"
-}, pe = {
+}, Z = {
   sm: "h-6 w-6",
   md: "h-8 w-8",
   lg: "h-10 w-10",
   xl: "h-12 w-12",
   "2xl": "h-16 w-16"
-}, mt = {
+}, ge = {
   sm: "h-2 w-2",
   md: "h-2.5 w-2.5",
   lg: "h-3 w-3",
   xl: "h-3.5 w-3.5",
   "2xl": "h-4 w-4"
-}, ht = {
+}, ve = {
   online: "bg-green-500",
   offline: "bg-neutral-500",
   away: "bg-yellow-500",
   busy: "bg-red-500"
-}, pt = {
+}, we = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-base",
   xl: "text-base",
   "2xl": "text-lg"
-}, xt = ({
-  alt: e,
-  className: t,
-  fallback: r,
-  showStatus: a = !1,
-  size: n = "md",
-  skeleton: o = !1,
-  src: s,
-  status: u,
-  type: l = "square"
+}, je = ({
+  alt: t,
+  className: s,
+  fallback: n,
+  showStatus: o = !1,
+  size: r = "md",
+  skeleton: i = !1,
+  src: l,
+  status: a,
+  type: u = "square"
 }) => {
-  const [c, d] = z(!1), [m, h] = z(!1), [b, g] = z(!0);
-  Y(() => {
-    if (!s) {
-      d(!1), h(!0), g(!1);
+  const [v, x] = S(!1), [m, h] = S(!1), [f, p] = S(!0);
+  H(() => {
+    if (!l) {
+      x(!1), h(!0), p(!1);
       return;
     }
-    g(!0);
-    const C = new Image();
-    C.src = s;
-    const p = () => {
-      d(!0), h(!1), g(!1);
-    }, x = () => {
-      d(!1), h(!0), g(!1);
+    p(!0);
+    const y = new Image();
+    y.src = l;
+    const k = () => {
+      x(!0), h(!1), p(!1);
+    }, c = () => {
+      x(!1), h(!0), p(!1);
     };
-    return C.addEventListener("load", p), C.addEventListener("error", x), () => {
-      C.removeEventListener("load", p), C.removeEventListener("error", x);
+    return y.addEventListener("load", k), y.addEventListener("error", c), () => {
+      y.removeEventListener("load", k), y.removeEventListener("error", c);
     };
-  }, [s]);
-  const v = () => b && o ? /* @__PURE__ */ i.jsx("div", { className: T("animate-pulse bg-zinc-800", he[l], pe[n]) }) : c && !m ? /* @__PURE__ */ i.jsx(
+  }, [l]);
+  const j = () => f && i ? /* @__PURE__ */ e.jsx("div", { className: $("animate-pulse bg-zinc-800", X[u], Z[r]) }) : v && !m ? /* @__PURE__ */ e.jsx(
     "img",
     {
-      alt: e,
-      className: N(he[l], pe[n], "object-cover", t),
+      alt: t,
+      className: b(X[u], Z[r], "object-cover", s),
       loading: "lazy",
-      src: s
+      src: l
     }
-  ) : /* @__PURE__ */ i.jsx(
+  ) : /* @__PURE__ */ e.jsx(
     "div",
     {
-      "aria-label": e,
-      className: N(
+      "aria-label": t,
+      className: b(
         "flex items-center justify-center bg-zinc-800 font-medium text-white",
-        he[l],
-        pe[n],
-        pt[n],
-        t
+        X[u],
+        Z[r],
+        we[r],
+        s
       ),
       role: "img",
-      children: typeof r == "string" && r.length > 2 ? r.substring(0, 2) : r
+      children: typeof n == "string" && n.length > 2 ? n.substring(0, 2) : n
     }
   );
-  return /* @__PURE__ */ i.jsxs("div", { className: "relative shrink-0", children: [
-    v(),
-    a && u && /* @__PURE__ */ i.jsx(
+  return /* @__PURE__ */ e.jsxs("div", { className: "relative shrink-0", children: [
+    j(),
+    o && a && /* @__PURE__ */ e.jsx(
       "span",
       {
-        "aria-label": `Status: ${u}`,
-        className: T(
+        "aria-label": `Status: ${a}`,
+        className: $(
           "absolute right-0 bottom-0 rounded-full border-2 border-zinc-900",
-          mt[n],
-          ht[u]
+          ge[r],
+          ve[a]
         ),
         role: "status"
       }
     )
   ] });
-}, dn = ({
-  className: e,
-  size: t = "md",
-  subtext: r,
-  username: a
+}, et = ({
+  className: t,
+  size: s = "md",
+  subtext: n,
+  username: o
 }) => {
-  const n = {
+  const r = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
     xl: "text-lg",
     "2xl": "text-xl"
-  }, o = {
+  }, i = {
     sm: "text-xs",
     md: "text-xs",
     lg: "text-sm",
     xl: "text-sm",
     "2xl": "text-base"
   };
-  return /* @__PURE__ */ i.jsxs("div", { className: N("flex flex-col justify-center overflow-hidden", e), children: [
-    /* @__PURE__ */ i.jsx("span", { className: T("block truncate font-medium text-white", n[t]), children: a }),
-    r && /* @__PURE__ */ i.jsx("span", { className: T("block truncate text-neutral-400", o[t]), children: r })
+  return /* @__PURE__ */ e.jsxs("div", { className: b("flex flex-col justify-center overflow-hidden", t), children: [
+    /* @__PURE__ */ e.jsx("span", { className: $("block truncate font-medium text-white", r[s]), children: o }),
+    n && /* @__PURE__ */ e.jsx("span", { className: $("block truncate text-neutral-400", i[s]), children: n })
   ] });
-}, gt = {
+}, ye = {
   sm: "px-1 py-0.5 text-xs",
   md: "px-1.5 py-0.5 text-sm",
   lg: "px-2 py-1 text-base"
-}, bt = {
+}, Ne = {
   purple: "bg-purple-500/25 text-purple-400",
   lime: "bg-lime-400/10 text-lime-300",
   red: "bg-red-500/25 text-red-400",
@@ -145,49 +144,49 @@ import './index.css';const cn = ({ children: e, className: t }) => /* @__PURE__
   fuchsia: "bg-fuchsia-500/25 text-fuchsia-400",
   gray: "bg-gray-500/25 text-gray-400"
 };
-function vt(e) {
-  const t = e.startsWith("#") ? e.substring(1) : e;
-  if (!/^[0-9A-Fa-f]{3,6}$/.test(t)) return "#FFFFFF";
-  const a = parseInt(t.length === 3 ? t[0] + t[0] : t.substr(0, 2), 16), n = parseInt(t.length === 3 ? t[1] + t[1] : t.substr(2, 2), 16), o = parseInt(t.length === 3 ? t[2] + t[2] : t.substr(4, 2), 16);
-  return (0.299 * a + 0.587 * n + 0.114 * o) / 255 > 0.5 ? "#000000" : "#FFFFFF";
-}
-const se = ({
-  bgColor: e,
-  children: t,
-  className: r,
-  color: a = "purple",
-  size: n = "md",
-  textColor: o
+function ke(t) {
+  const s = t.startsWith("#") ? t.substring(1) : t;
+  if (!/^[0-9A-Fa-f]{3,6}$/.test(s)) return "#FFFFFF";
+  const o = parseInt(s.length === 3 ? s[0] + s[0] : s.substr(0, 2), 16), r = parseInt(s.length === 3 ? s[1] + s[1] : s.substr(2, 2), 16), i = parseInt(s.length === 3 ? s[2] + s[2] : s.substr(4, 2), 16);
+  return (0.299 * o + 0.587 * r + 0.114 * i) / 255 > 0.5 ? "#000000" : "#FFFFFF";
+}
+const G = ({
+  bgColor: t,
+  children: s,
+  className: n,
+  color: o = "purple",
+  size: r = "md",
+  textColor: i
 }) => {
-  const s = !e && !o ? bt[a] : "", u = {};
-  return e && (u.backgroundColor = e, o || (u.color = vt(e))), o && (u.color = o), /* @__PURE__ */ i.jsx(
+  const l = !t && !i ? Ne[o] : "", a = {};
+  return t && (a.backgroundColor = t, i || (a.color = ke(t))), i && (a.color = i), /* @__PURE__ */ e.jsx(
     "span",
     {
-      className: N(
+      className: b(
         "inline-flex items-center rounded-md font-medium",
-        gt[n],
-        s,
-        r
+        ye[r],
+        l,
+        n
       ),
-      style: Object.keys(u).length ? u : void 0,
-      children: t
+      style: Object.keys(a).length ? a : void 0,
+      children: s
     }
   );
-}, yt = {
+}, Ce = {
   default: "bg-zinc-900/90 border border-zinc-800",
   outline: "bg-transparent border border-zinc-700",
   gradient: "bg-gradient-to-br from-zinc-900 via-purple-900/20 to-zinc-900 border border-purple-800/30"
-}, wt = {
+}, Oe = {
   none: "p-0",
   sm: "p-3",
   md: "p-4",
   lg: "p-6"
-}, Ct = {
+}, ze = {
   none: "",
   lift: "hover:scale-[1.01] hover:-translate-y-1",
   glow: "hover:shadow-lg hover:shadow-purple-500/10",
   border: "hover:border-purple-500/50"
-}, jt = {
+}, Ie = {
   purple: "hover:border-purple-500/50",
   blue: "hover:border-blue-500/50",
   emerald: "hover:border-emerald-500/50",
@@ -196,7 +195,7 @@ const se = ({
   amber: "hover:border-amber-500/50",
   cyan: "hover:border-cyan-500/50",
   indigo: "hover:border-indigo-500/50"
-}, Nt = {
+}, Ee = {
   purple: "from-purple-500/5 to-pink-500/5",
   blue: "from-blue-500/5 to-cyan-500/5",
   emerald: "from-emerald-500/5 to-teal-500/5",
@@ -205,49 +204,49 @@ const se = ({
   amber: "from-amber-500/5 to-orange-500/5",
   cyan: "from-cyan-500/5 to-blue-500/5",
   indigo: "from-indigo-500/5 to-purple-500/5"
-}, fn = ({
-  backdropBlur: e = !1,
-  children: t,
-  className: r,
-  color: a = "purple",
-  equalHeight: n = !1,
-  hoverVariant: o = "lift",
-  hoverable: s = !1,
-  padding: u = "md",
-  variant: l = "default",
-  ...c
+}, tt = ({
+  backdropBlur: t = !1,
+  children: s,
+  className: n,
+  color: o = "purple",
+  equalHeight: r = !1,
+  hoverVariant: i = "lift",
+  hoverable: l = !1,
+  padding: a = "md",
+  variant: u = "default",
+  ...v
 }) => {
-  const d = s ? o : "none", m = s && d !== "none";
-  return /* @__PURE__ */ i.jsxs(
+  const x = l ? i : "none", m = l && x !== "none";
+  return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: N(
+      className: b(
         "relative overflow-hidden rounded-lg transition-all duration-300",
-        yt[l],
-        wt[u],
-        n && "flex flex-col",
-        e && "backdrop-blur-sm",
-        m && Ct[d],
+        Ce[u],
+        Oe[a],
+        r && "flex flex-col",
+        t && "backdrop-blur-sm",
+        m && ze[x],
         m && "group hover:bg-white/5",
-        m && jt[a],
-        r
+        m && Ie[o],
+        n
       ),
-      ...c,
+      ...v,
       children: [
-        m && /* @__PURE__ */ i.jsx(
+        m && /* @__PURE__ */ e.jsx(
           "div",
           {
-            className: N(
+            className: b(
               "absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100",
-              Nt[a]
+              Ee[o]
             )
           }
         ),
-        /* @__PURE__ */ i.jsx("div", { className: "relative z-10", children: t })
+        /* @__PURE__ */ e.jsx("div", { className: "relative z-10", children: s })
       ]
     }
   );
-}, Et = {
+}, Le = {
   purple: {
     border: "border-purple-500/20",
     bg: "bg-purple-500/10",
@@ -288,465 +287,465 @@ const se = ({
     bg: "bg-indigo-500/10",
     text: "text-indigo-400"
   }
-}, mn = ({
-  action: e,
-  children: t,
-  className: r,
-  color: a = "purple",
-  icon: n,
-  iconColor: o,
-  subtitle: s,
-  title: u,
-  ...l
+}, st = ({
+  action: t,
+  children: s,
+  className: n,
+  color: o = "purple",
+  icon: r,
+  iconColor: i,
+  subtitle: l,
+  title: a,
+  ...u
 }) => {
-  if (t)
-    return /* @__PURE__ */ i.jsx("div", { className: N("mb-4", r), ...l, children: t });
-  const d = Et[o || a];
-  return /* @__PURE__ */ i.jsxs("div", { className: N("mb-4 flex items-start justify-between gap-3", r), ...l, children: [
-    /* @__PURE__ */ i.jsxs("div", { className: "flex items-center gap-3", children: [
-      n && /* @__PURE__ */ i.jsx("div", { className: N("rounded-lg border p-2", d.border, d.bg), children: /* @__PURE__ */ i.jsx(U, { className: d.text, icon: n }) }),
-      /* @__PURE__ */ i.jsxs("div", { children: [
-        u && /* @__PURE__ */ i.jsx("h3", { className: "text-base font-semibold text-white", children: u }),
-        s && /* @__PURE__ */ i.jsx("p", { className: "text-sm text-neutral-400", children: s })
+  if (s)
+    return /* @__PURE__ */ e.jsx("div", { className: b("mb-4", n), ...u, children: s });
+  const x = Le[i || o];
+  return /* @__PURE__ */ e.jsxs("div", { className: b("mb-4 flex items-start justify-between gap-3", n), ...u, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
+      r && /* @__PURE__ */ e.jsx("div", { className: b("rounded-lg border p-2", x.border, x.bg), children: /* @__PURE__ */ e.jsx(T, { className: x.text, icon: r }) }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        a && /* @__PURE__ */ e.jsx("h3", { className: "text-base font-semibold text-white", children: a }),
+        l && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-400", children: l })
       ] })
     ] }),
-    e && /* @__PURE__ */ i.jsx("div", { children: e })
+    t && /* @__PURE__ */ e.jsx("div", { children: t })
   ] });
-}, hn = ({
-  children: e,
-  className: t,
-  flexGrow: r = !0,
-  ...a
-}) => /* @__PURE__ */ i.jsx("div", { className: N("py-2", r && "flex-grow", t), ...a, children: e }), pn = ({ children: e, className: t, ...r }) => /* @__PURE__ */ i.jsx(
+}, rt = ({
+  children: t,
+  className: s,
+  flexGrow: n = !0,
+  ...o
+}) => /* @__PURE__ */ e.jsx("div", { className: b("py-2", n && "flex-grow", s), ...o, children: t }), nt = ({ children: t, className: s, ...n }) => /* @__PURE__ */ e.jsx(
   "div",
   {
-    className: N(
+    className: b(
       "mt-4 flex items-center justify-end border-t border-neutral-800 pt-4",
-      t
+      s
     ),
-    ...r,
-    children: e
+    ...n,
+    children: t
   }
-), kt = {
+), Fe = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
-}, Lt = {
+}, Se = {
   sm: 0.5,
   md: 0.7,
   lg: 0.9
-}, xn = ({
-  checked: e,
-  className: t,
-  defaultChecked: r,
-  description: a,
-  disabled: n = !1,
-  error: o = !1,
-  errorMessage: s,
-  id: u,
-  label: l,
-  name: c,
-  onChange: d,
+}, ot = ({
+  checked: t,
+  className: s,
+  defaultChecked: n,
+  description: o,
+  disabled: r = !1,
+  error: i = !1,
+  errorMessage: l,
+  id: a,
+  label: u,
+  name: v,
+  onChange: x,
   required: m = !1,
   size: h = "md",
-  value: b,
-  ...g
+  value: f,
+  ...p
 }) => {
-  const v = ue(), C = u || v, p = `${C}-checkbox`, x = `${C}-description`, y = `${C}-error`, j = o && s, L = /* @__PURE__ */ i.jsxs("div", { className: "relative inline-flex shrink-0", children: [
-    /* @__PURE__ */ i.jsx(
+  const j = J(), y = a || j, k = `${y}-checkbox`, c = `${y}-description`, w = `${y}-error`, N = i && l, E = /* @__PURE__ */ e.jsxs("div", { className: "relative inline-flex shrink-0", children: [
+    /* @__PURE__ */ e.jsx(
       "input",
       {
-        id: p,
-        "aria-describedby": [a ? x : "", j ? y : ""].filter(Boolean).join(" ") || void 0,
-        "aria-invalid": o,
+        id: k,
+        "aria-describedby": [o ? c : "", N ? w : ""].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": i,
         "aria-required": m,
-        checked: e,
-        className: N(
+        checked: t,
+        className: b(
           "peer cursor-pointer appearance-none rounded-sm",
           "checked:bg-violet-700",
           "default-outset-focus",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          o ? "default-error-border" : "default-border",
-          kt[h],
-          t
+          i ? "default-error-border" : "default-border",
+          Fe[h],
+          s
         ),
-        defaultChecked: r,
-        disabled: n,
-        name: c,
+        defaultChecked: n,
+        disabled: r,
+        name: v,
         type: "checkbox",
-        value: b,
-        onChange: d,
-        ...g
+        value: f,
+        onChange: x,
+        ...p
       }
     ),
-    /* @__PURE__ */ i.jsx(
-      U,
+    /* @__PURE__ */ e.jsx(
+      T,
       {
         className: "pointer-events-none absolute inset-0 m-auto opacity-0 peer-checked:opacity-80",
         icon: "mdiCheck",
-        size: Lt[h] || 0.7
+        size: Se[h] || 0.7
       }
     )
   ] });
-  return /* @__PURE__ */ i.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ i.jsxs("div", { className: "flex items-start gap-2", children: [
-      L,
-      l && /* @__PURE__ */ i.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
-        /* @__PURE__ */ i.jsx(Ce, { htmlFor: p, required: m, children: l }),
-        a ? /* @__PURE__ */ i.jsx(je, { id: x, disabled: n, children: a }) : null
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-2", children: [
+      E,
+      u && /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+        /* @__PURE__ */ e.jsx(te, { htmlFor: k, required: m, children: u }),
+        o ? /* @__PURE__ */ e.jsx(se, { id: c, disabled: r, children: o }) : null
       ] })
     ] }),
-    j ? /* @__PURE__ */ i.jsx(Ne, { id: y, children: s }) : null
+    N ? /* @__PURE__ */ e.jsx(re, { id: w, children: l }) : null
   ] });
-}, Ue = ({
-  align: e = "center",
-  ariaHaspopup: t,
-  children: r,
-  className: a,
-  content: n,
-  contentClassName: o,
-  contentRole: s,
-  contentStyle: u,
-  disabled: l = !1,
-  id: c,
-  offset: d = 8,
+}, de = ({
+  align: t = "center",
+  ariaHaspopup: s,
+  children: n,
+  className: o,
+  content: r,
+  contentClassName: i,
+  contentRole: l,
+  contentStyle: a,
+  disabled: u = !1,
+  id: v,
+  offset: x = 8,
   onOpenChange: m,
   open: h,
-  portal: b = !0,
-  position: g = "top",
-  trigger: v = "hover",
-  useAriaControls: C = !1
+  portal: f = !0,
+  position: p = "top",
+  trigger: j = "hover",
+  useAriaControls: y = !1
 }) => {
-  const p = ue(), [x, y] = z(!1), j = ye(null), L = ye(null), F = h !== void 0, k = l ? !1 : F ? h : x, D = c || p, S = Fe(
-    (w) => {
-      l || (m == null || m(w), F || y(w));
+  const k = J(), [c, w] = S(!1), N = ee(null), E = ee(null), F = h !== void 0, C = u ? !1 : F ? h : c, D = v || k, L = ne(
+    (d) => {
+      u || (m == null || m(d), F || w(d));
     },
-    [l, F, m]
-  ), I = Fe(() => {
-    if (!j.current || !L.current || !k) return;
-    const w = j.current.getBoundingClientRect(), E = L.current.getBoundingClientRect(), R = {
+    [u, F, m]
+  ), W = ne(() => {
+    if (!N.current || !E.current || !C) return;
+    const d = N.current.getBoundingClientRect(), g = E.current.getBoundingClientRect(), O = {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    let P = g;
-    g === "top" && w.top < E.height + d ? P = "bottom" : g === "bottom" && w.bottom + E.height + d > R.height ? P = "top" : g === "left" && w.left < E.width + d ? P = "right" : g === "right" && w.right + E.width + d > R.width && (P = "left");
-    const O = H(w, E, P, e, d);
-    L.current && (L.current.style.left = `${O.x}px`, L.current.style.top = `${O.y}px`);
-  }, [k, g, e, d]);
-  Y(() => {
-    if (!k || v !== "click") return;
-    const w = (E) => {
-      j.current && !j.current.contains(E.target) && L.current && !L.current.contains(E.target) && S(!1);
+    let z = p;
+    p === "top" && d.top < g.height + x ? z = "bottom" : p === "bottom" && d.bottom + g.height + x > O.height ? z = "top" : p === "left" && d.left < g.width + x ? z = "right" : p === "right" && d.right + g.width + x > O.width && (z = "left");
+    const I = P(d, g, z, t, x);
+    E.current && (E.current.style.left = `${I.x}px`, E.current.style.top = `${I.y}px`);
+  }, [C, p, t, x]);
+  H(() => {
+    if (!C || j !== "click") return;
+    const d = (g) => {
+      N.current && !N.current.contains(g.target) && E.current && !E.current.contains(g.target) && L(!1);
     };
-    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
-  }, [k, S, v]), Y(() => {
-    if (k) {
-      I();
-      const w = () => I(), E = () => I();
-      return window.addEventListener("resize", w), window.addEventListener("scroll", E, !0), () => {
-        window.removeEventListener("resize", w), window.removeEventListener("scroll", E, !0);
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [C, L, j]), H(() => {
+    if (C) {
+      W();
+      const d = () => W(), g = () => W();
+      return window.addEventListener("resize", d), window.addEventListener("scroll", g, !0), () => {
+        window.removeEventListener("resize", d), window.removeEventListener("scroll", g, !0);
       };
     }
-  }, [k, g, e, d, I]);
-  const H = (w, E, R, P, O) => {
-    let J = 0, K = 0;
-    switch (R) {
+  }, [C, p, t, x, W]);
+  const P = (d, g, O, z, I) => {
+    let B = 0, M = 0;
+    switch (O) {
       case "top":
-        J = w.left, K = w.top - E.height - O;
+        B = d.left, M = d.top - g.height - I;
         break;
       case "bottom":
-        J = w.left, K = w.bottom + O;
+        B = d.left, M = d.bottom + I;
         break;
       case "left":
-        J = w.left - E.width - O, K = w.top;
+        B = d.left - g.width - I, M = d.top;
         break;
       case "right":
-        J = w.right + O, K = w.top;
+        B = d.right + I, M = d.top;
         break;
     }
-    if (R === "top" || R === "bottom")
-      switch (P) {
+    if (O === "top" || O === "bottom")
+      switch (z) {
         case "start":
           break;
         case "center":
-          J = w.left + (w.width - E.width) / 2;
+          B = d.left + (d.width - g.width) / 2;
           break;
         case "end":
-          J = w.right - E.width;
+          B = d.right - g.width;
           break;
       }
-    else if (R === "left" || R === "right")
-      switch (P) {
+    else if (O === "left" || O === "right")
+      switch (z) {
         case "start":
           break;
         case "center":
-          K = w.top + (w.height - E.height) / 2;
+          M = d.top + (d.height - g.height) / 2;
           break;
         case "end":
-          K = w.bottom - E.height;
+          M = d.bottom - g.height;
           break;
       }
-    return { x: J, y: K };
-  }, G = () => {
-    v === "hover" && S(!0);
-  }, fe = () => {
-    v === "hover" && S(!1);
-  }, X = () => {
-    v === "click" && S(!k);
-  }, ne = () => {
-    v === "focus" && S(!0);
-  }, me = () => {
-    v === "focus" && S(!1);
-  }, Q = k ? /* @__PURE__ */ i.jsx(
+    return { x: B, y: M };
+  }, V = () => {
+    j === "hover" && L(!0);
+  }, Y = () => {
+    j === "hover" && L(!1);
+  }, K = () => {
+    j === "click" && L(!C);
+  }, q = () => {
+    j === "focus" && L(!0);
+  }, Q = () => {
+    j === "focus" && L(!1);
+  }, U = C ? /* @__PURE__ */ e.jsx(
     "div",
     {
       id: D,
-      "aria-hidden": !k,
-      className: N(
+      "aria-hidden": !C,
+      className: b(
         "fixed z-50 transition-opacity duration-200",
-        k ? "opacity-100" : "pointer-events-none opacity-0",
-        o
+        C ? "opacity-100" : "pointer-events-none opacity-0",
+        i
       ),
-      ref: L,
-      role: s,
-      style: { left: -9999, top: -9999, ...u },
-      children: /* @__PURE__ */ i.jsx("div", { className: "relative", children: n })
+      ref: E,
+      role: l,
+      style: { left: -9999, top: -9999, ...a },
+      children: /* @__PURE__ */ e.jsx("div", { className: "relative", children: r })
     }
   ) : null;
-  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-    /* @__PURE__ */ i.jsx(
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
       "div",
       {
-        "aria-controls": C && k ? D : void 0,
-        "aria-describedby": !C && k ? D : void 0,
-        "aria-expanded": C ? k : void 0,
-        "aria-haspopup": t,
-        className: N("w-full", a),
-        ref: j,
-        onBlur: me,
-        onClick: X,
-        onFocus: ne,
-        onMouseEnter: G,
-        onMouseLeave: fe,
-        children: r
+        "aria-controls": y && C ? D : void 0,
+        "aria-describedby": !y && C ? D : void 0,
+        "aria-expanded": y ? C : void 0,
+        "aria-haspopup": s,
+        className: b("w-full", o),
+        ref: N,
+        onBlur: Q,
+        onClick: K,
+        onFocus: q,
+        onMouseEnter: V,
+        onMouseLeave: Y,
+        children: n
       }
     ),
-    b && typeof document < "u" ? He(Q, document.body) : Q
+    f && typeof document < "u" ? ie(U, document.body) : U
   ] });
-}, _e = ({ children: e }) => /* @__PURE__ */ i.jsx(i.Fragment, { children: e }), St = ({ children: e }) => /* @__PURE__ */ i.jsx(i.Fragment, { children: e }), Ve = ({ children: e, className: t }) => /* @__PURE__ */ i.jsx(
+}, ue = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), $e = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), xe = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
   "div",
   {
-    className: N(
+    className: b(
       "sticky top-0 flex-shrink-0 border-b border-neutral-700 bg-zinc-1000/95 px-3 py-2 backdrop-blur-lg",
-      t
+      s
     ),
-    children: e
+    children: t
   }
-), Je = We({
+), me = le({
   open: !1,
   setOpen: () => {
   },
   disabled: !1
 });
-function Ke() {
-  const e = Be(Je);
-  if (e === void 0)
+function fe() {
+  const t = ae(me);
+  if (t === void 0)
     throw new Error("useDropdownContext must be used within a DropdownProvider");
-  return e;
+  return t;
 }
-const Ye = ({
-  animateIcon: e = !1,
-  children: t,
-  className: r,
-  disabled: a = !1,
-  icon: n,
-  outline: o = !1,
-  unstyled: s = !1,
-  ...u
+const be = ({
+  animateIcon: t = !1,
+  children: s,
+  className: n,
+  disabled: o = !1,
+  icon: r,
+  outline: i = !1,
+  unstyled: l = !1,
+  ...a
 }) => {
-  const { disabled: l, open: c } = Ke(), d = a || l;
-  return /* @__PURE__ */ i.jsxs(
+  const { disabled: u, open: v } = fe(), x = o || u;
+  return /* @__PURE__ */ e.jsxs(
     "button",
     {
-      "aria-expanded": c,
+      "aria-expanded": v,
       "aria-haspopup": "menu",
-      className: N(
-        !s && [
+      className: b(
+        !l && [
           "flex h-10 items-center justify-between rounded-lg px-3 py-2 text-sm enabled:cursor-pointer enabled:text-white enabled:hover:bg-white/6",
           "default-outset-focus",
-          o ? "default-border" : "bg-transparent",
+          i ? "default-border" : "bg-transparent",
           "default-disabled"
         ],
-        r
+        n
       ),
-      disabled: d,
+      disabled: x,
       type: "button",
-      ...u,
+      ...a,
       children: [
-        s ? t : /* @__PURE__ */ i.jsx("span", { className: "flex items-center gap-2", children: t }),
-        n && /* @__PURE__ */ i.jsx(
-          U,
+        l ? s : /* @__PURE__ */ e.jsx("span", { className: "flex items-center gap-2", children: s }),
+        r && /* @__PURE__ */ e.jsx(
+          T,
           {
-            className: T(
-              !s && "ml-2",
-              d && "text-neutral-500",
-              e && ["transition-transform duration-200", c && "rotate-180"]
+            className: $(
+              !l && "ml-2",
+              x && "text-neutral-500",
+              t && ["transition-transform duration-200", v && "rotate-180"]
             ),
-            icon: n,
+            icon: r,
             size: 0.8
           }
         )
       ]
     }
   );
-}, Rt = ({
-  children: e,
-  className: t,
-  defaultOpen: r = !1,
-  disabled: a = !1,
-  onOpenChange: n,
-  open: o
+}, De = ({
+  children: t,
+  className: s,
+  defaultOpen: n = !1,
+  disabled: o = !1,
+  onOpenChange: r,
+  open: i
 }) => {
-  const [s, u] = z(r), l = o !== void 0, c = l ? o : s, d = (x) => {
-    a || (l || u(x), n == null || n(x));
-  }, m = { open: c, setOpen: d, disabled: a };
-  let h = null, b = null;
-  const g = {
+  const [l, a] = S(n), u = i !== void 0, v = u ? i : l, x = (c) => {
+    o || (u || a(c), r == null || r(c));
+  }, m = { open: v, setOpen: x, disabled: o };
+  let h = null, f = null;
+  const p = {
     children: null,
     className: ""
-  }, v = {
+  }, j = {
     children: null,
     className: ""
   };
-  let C = {
+  let y = {
     side: "bottom",
     align: "start",
     className: ""
   };
-  ee.Children.forEach(e, (x) => {
-    if (ee.isValidElement(x)) {
-      if (x.type === Ye)
-        h = x;
-      else if (x.type === Ve) {
-        const y = x.props;
-        g.className = y.className, g.children = y.children;
-      } else if (x.type === St) {
-        const y = x.props;
-        v.className = y.className, v.children = y.children;
-      } else if (x.type === _e) {
-        const y = x.props;
-        b = y.children, C = {
-          side: y.side || "bottom",
-          align: y.align || "start",
-          className: y.className || ""
+  _.Children.forEach(t, (c) => {
+    if (_.isValidElement(c)) {
+      if (c.type === be)
+        h = c;
+      else if (c.type === xe) {
+        const w = c.props;
+        p.className = w.className, p.children = w.children;
+      } else if (c.type === $e) {
+        const w = c.props;
+        j.className = w.className, j.children = w.children;
+      } else if (c.type === ue) {
+        const w = c.props;
+        f = w.children, y = {
+          side: w.side || "bottom",
+          align: w.align || "start",
+          className: w.className || ""
         };
       }
     }
   });
-  const p = /* @__PURE__ */ i.jsxs(
+  const k = /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: N(
+      className: b(
         "default-border z-50 flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-lg bg-zinc-1000/50 p-1 backdrop-blur-xl",
-        C.side === "bottom" && "animate-dropdown-in-bottom",
-        C.side === "top" && "animate-dropdown-in-top",
-        C.className
+        y.side === "bottom" && "animate-dropdown-in-bottom",
+        y.side === "top" && "animate-dropdown-in-top",
+        y.className
       ),
       children: [
-        g.children ? /* @__PURE__ */ i.jsx(
+        p.children ? /* @__PURE__ */ e.jsx(
           "div",
           {
-            className: N(
+            className: b(
               "flex-shrink-0 border-b border-neutral-700 bg-zinc-1000/95 px-3 py-2 backdrop-blur-sm",
-              g.className
+              p.className
             ),
-            children: g.children
+            children: p.children
           }
         ) : null,
-        /* @__PURE__ */ i.jsx("ul", { className: N("min-h-0 flex-1 overflow-y-auto"), children: b }),
-        v.children ? /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ e.jsx("ul", { className: b("min-h-0 flex-1 overflow-y-auto"), children: f }),
+        j.children ? /* @__PURE__ */ e.jsx(
           "div",
           {
-            className: N(
+            className: b(
               "flex-shrink-0 border-t border-neutral-700 bg-zinc-1000/95 px-3 py-2 backdrop-blur-sm",
-              v.className
+              j.className
             ),
-            children: v.children
+            children: j.children
           }
         ) : null
       ]
     }
   );
-  return /* @__PURE__ */ i.jsx(Je.Provider, { value: m, children: /* @__PURE__ */ i.jsx("div", { className: N("inline-block", t), children: /* @__PURE__ */ i.jsx(
-    Ue,
+  return /* @__PURE__ */ e.jsx(me.Provider, { value: m, children: /* @__PURE__ */ e.jsx("div", { className: b("inline-block", s), children: /* @__PURE__ */ e.jsx(
+    de,
     {
-      align: C.align,
-      content: p,
+      align: y.align,
+      content: k,
       contentRole: "menu",
-      disabled: a,
-      open: c,
+      disabled: o,
+      open: v,
       portal: !0,
-      position: C.side,
+      position: y.side,
       trigger: "click",
-      onOpenChange: d,
+      onOpenChange: x,
       children: h
     }
   ) }) });
-}, Pt = ({
-  children: e,
-  className: t,
-  disabled: r = !1,
-  icon: a,
-  onClick: n,
-  unstyled: o = !1
+}, We = ({
+  children: t,
+  className: s,
+  disabled: n = !1,
+  icon: o,
+  onClick: r,
+  unstyled: i = !1
 }) => {
-  const { setOpen: s } = Ke(), u = (l) => {
-    r || (n && n(l), s(!1));
+  const { setOpen: l } = fe(), a = (u) => {
+    n || (r && r(u), l(!1));
   };
-  return /* @__PURE__ */ i.jsx("li", { children: /* @__PURE__ */ i.jsxs(
+  return /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsxs(
     "button",
     {
-      className: N(
-        !o && [
+      className: b(
+        !i && [
           "group flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm enabled:text-white",
           "enabled:cursor-pointer enabled:hover:bg-white/6",
           "default-inset-focus",
           "default-disabled"
         ],
-        t
+        s
       ),
-      disabled: r,
+      disabled: n,
       role: "menuitem",
-      onClick: u,
+      onClick: a,
       children: [
-        a && /* @__PURE__ */ i.jsx(
-          U,
+        o && /* @__PURE__ */ e.jsx(
+          T,
           {
-            className: T("mr-2", r && "text-neutral-500"),
-            icon: a,
+            className: $("mr-2", n && "text-neutral-500"),
+            icon: o,
             size: 0.75
           }
         ),
-        e
+        t
       ]
     }
   ) });
-}, gn = ({ className: e }) => /* @__PURE__ */ i.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ i.jsx("hr", { className: N("border-t-neutral-700", e) }) }), bn = ({ children: e, className: t }) => /* @__PURE__ */ i.jsx(
+}, lt = ({ className: t }) => /* @__PURE__ */ e.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ e.jsx("hr", { className: b("border-t-neutral-700", t) }) }), at = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
   "span",
   {
-    className: N("ml-auto text-xs tracking-widest text-neutral-500", t),
+    className: b("ml-auto text-xs tracking-widest text-neutral-500", s),
     "data-part": "dropdown-shortcut",
-    children: e
+    children: t
   }
-), $t = (e) => {
-  const r = Math.floor(((/* @__PURE__ */ new Date()).getTime() - e.getTime()) / (1e3 * 60));
-  if (r < 1) return "just now";
-  if (r < 60) return `${r}m ago`;
-  const a = Math.floor(r / 60);
-  if (a < 24) return `${a}h ago`;
-  const n = Math.floor(a / 24);
-  return n < 7 ? `${n}d ago` : e.toLocaleDateString();
-}, Ot = {
+), Te = (t) => {
+  const n = Math.floor(((/* @__PURE__ */ new Date()).getTime() - t.getTime()) / (1e3 * 60));
+  if (n < 1) return "just now";
+  if (n < 60) return `${n}m ago`;
+  const o = Math.floor(n / 60);
+  if (o < 24) return `${o}h ago`;
+  const r = Math.floor(o / 24);
+  return r < 7 ? `${r}d ago` : t.toLocaleDateString();
+}, Be = {
   error: {
     background: "bg-rose-500/20",
     iconClass: "text-rose-400",
@@ -772,370 +771,370 @@ const Ye = ({
     iconClass: "text-neutral-400",
     icon: "mdiBellOutline"
   }
-}, vn = ({
-  className: e,
-  disabled: t = !1,
-  emptyMessage: r = "No notifications",
-  maxHeight: a = "max-h-96",
-  notifications: n,
-  onMarkAllRead: o,
-  onNotificationClick: s,
-  unreadCount: u = 0
+}, it = ({
+  className: t,
+  disabled: s = !1,
+  emptyMessage: n = "No notifications",
+  maxHeight: o = "max-h-96",
+  notifications: r,
+  onMarkAllRead: i,
+  onNotificationClick: l,
+  unreadCount: a = 0
 }) => {
-  const [l, c] = z(!1), [d, m] = z(!1), h = u > 99 ? "99+" : u.toString(), b = u > 0, g = n.length > 0;
-  Y(() => {
-    const x = () => {
-      const y = window.innerWidth < ft;
-      m(y), y && l ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
+  const [u, v] = S(!1), [x, m] = S(!1), h = a > 99 ? "99+" : a.toString(), f = a > 0, p = r.length > 0;
+  H(() => {
+    const c = () => {
+      const w = window.innerWidth < pe;
+      m(w), w && u ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
     };
-    return x(), window.addEventListener("resize", x), () => {
-      document.body.classList.remove("overflow-hidden"), window.removeEventListener("resize", x);
+    return c(), window.addEventListener("resize", c), () => {
+      document.body.classList.remove("overflow-hidden"), window.removeEventListener("resize", c);
     };
-  }, [l]);
-  const v = (x) => {
-    s == null || s(x), d && c(!1);
-  }, C = () => {
-    o == null || o(), d && c(!1);
-  }, p = () => /* @__PURE__ */ i.jsx(i.Fragment, { children: g ? /* @__PURE__ */ i.jsx("div", { className: "divide-y divide-neutral-800/50", children: n.map((x, y) => {
-    const j = Ot[x.type || "default"];
-    return /* @__PURE__ */ i.jsxs(
-      Pt,
+  }, [u]);
+  const j = (c) => {
+    l == null || l(c), x && v(!1);
+  }, y = () => {
+    i == null || i(), x && v(!1);
+  }, k = () => /* @__PURE__ */ e.jsx(e.Fragment, { children: p ? /* @__PURE__ */ e.jsx("div", { className: "divide-y divide-neutral-800/50", children: r.map((c, w) => {
+    const N = Be[c.type || "default"];
+    return /* @__PURE__ */ e.jsxs(
+      We,
       {
-        className: N(
+        className: b(
           "secondary-inset-focus flex w-full items-start gap-3 px-3 py-3 text-left hover:bg-white/6",
-          !x.read && "bg-white/3",
-          y === n.length - 1 && "pb-4"
+          !c.read && "bg-white/3",
+          w === r.length - 1 && "pb-4"
         ),
         unstyled: !0,
-        onClick: () => v(x),
+        onClick: () => j(c),
         children: [
-          /* @__PURE__ */ i.jsx(
+          /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: N(
+              className: b(
                 "mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg",
-                j.background
+                N.background
               ),
-              children: x.img ? /* @__PURE__ */ i.jsx(
-                xt,
+              children: c.img ? /* @__PURE__ */ e.jsx(
+                je,
                 {
                   alt: "User avatar",
                   fallback: "NA",
                   size: "md",
-                  src: x.img
+                  src: c.img
                 }
-              ) : /* @__PURE__ */ i.jsx(
-                U,
+              ) : /* @__PURE__ */ e.jsx(
+                T,
                 {
-                  className: j.iconClass,
-                  icon: x.icon ?? j.icon,
+                  className: N.iconClass,
+                  icon: c.icon ?? N.icon,
                   size: 0.75
                 }
               )
             }
           ),
-          /* @__PURE__ */ i.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ i.jsx("p", { className: "mb-1 text-sm leading-5 text-white", children: x.title }),
-            x.message && /* @__PURE__ */ i.jsx("p", { className: "mb-1 text-xs leading-4 text-neutral-400", children: x.message }),
-            /* @__PURE__ */ i.jsx("p", { className: "text-xs text-neutral-500", children: $t(x.timestamp) })
+          /* @__PURE__ */ e.jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ e.jsx("p", { className: "mb-1 text-sm leading-5 text-white", children: c.title }),
+            c.message && /* @__PURE__ */ e.jsx("p", { className: "mb-1 text-xs leading-4 text-neutral-400", children: c.message }),
+            /* @__PURE__ */ e.jsx("p", { className: "text-xs text-neutral-500", children: Te(c.timestamp) })
           ] }),
-          !x.read && /* @__PURE__ */ i.jsx("div", { className: "mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-rose-500" })
+          !c.read && /* @__PURE__ */ e.jsx("div", { className: "mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-rose-500" })
         ]
       },
-      x.id
+      c.id
     );
-  }) }) : /* @__PURE__ */ i.jsxs(
+  }) }) : /* @__PURE__ */ e.jsxs(
     "div",
     {
       "aria-label": "No notifications available",
       className: "px-3 py-8 text-center",
       role: "status",
       children: [
-        /* @__PURE__ */ i.jsx(U, { className: "mx-auto mb-2 text-neutral-500", icon: "mdiBellOffOutline", size: 2 }),
-        /* @__PURE__ */ i.jsx("p", { className: "text-sm text-neutral-400", children: r })
+        /* @__PURE__ */ e.jsx(T, { className: "mx-auto mb-2 text-neutral-500", icon: "mdiBellOffOutline", size: 2 }),
+        /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-400", children: n })
       ]
     }
   ) });
-  return /* @__PURE__ */ i.jsx(i.Fragment, { children: d ? /* @__PURE__ */ i.jsxs("div", { children: [
-    /* @__PURE__ */ i.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ i.jsx(
-        De,
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: x ? /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ e.jsx(
+        oe,
         {
-          "aria-expanded": l,
-          "aria-label": `Notifications${b ? ` (${u} unread)` : ""}`,
-          disabled: t,
+          "aria-expanded": u,
+          "aria-label": `Notifications${f ? ` (${a} unread)` : ""}`,
+          disabled: s,
           icon: "mdiBellOutline",
           variant: "ghost",
-          onClick: () => c(!l)
+          onClick: () => v(!u)
         }
       ),
-      b ? /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ i.jsx(se, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
+      f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(G, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
     ] }),
-    He(
-      /* @__PURE__ */ i.jsxs(
+    ie(
+      /* @__PURE__ */ e.jsxs(
         "div",
         {
           "aria-labelledby": "notifications-title-mobile",
           "aria-modal": "true",
-          className: N(
+          className: b(
             "fixed inset-y-0 z-50 flex w-full flex-col bg-zinc-1000/50 backdrop-blur-xl transition-transform duration-300",
-            l ? "translate-x-0" : "translate-x-full"
+            u ? "translate-x-0" : "translate-x-full"
           ),
           role: "dialog",
           children: [
-            /* @__PURE__ */ i.jsxs("div", { className: "flex h-15 items-center justify-between border-b border-neutral-800 px-4", children: [
-              d ? /* @__PURE__ */ i.jsx(
-                De,
+            /* @__PURE__ */ e.jsxs("div", { className: "flex h-15 items-center justify-between border-b border-neutral-800 px-4", children: [
+              x ? /* @__PURE__ */ e.jsx(
+                oe,
                 {
                   "aria-label": "Close sidebar",
                   icon: "mdiClose",
                   variant: "ghost",
-                  onClick: () => c(!1)
+                  onClick: () => v(!1)
                 }
               ) : null,
-              /* @__PURE__ */ i.jsx("h3", { id: "notifications-title-mobile", className: "text-sm font-semibold text-white", children: "Notifications" }),
-              /* @__PURE__ */ i.jsx("div", { className: "flex items-center gap-2", children: b && o && /* @__PURE__ */ i.jsx(
+              /* @__PURE__ */ e.jsx("h3", { id: "notifications-title-mobile", className: "text-sm font-semibold text-white", children: "Notifications" }),
+              /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: f && i && /* @__PURE__ */ e.jsx(
                 "button",
                 {
                   className: "cursor-pointer text-xs text-neutral-400 transition-colors hover:text-white",
-                  onClick: C,
+                  onClick: y,
                   children: "Mark all read"
                 }
               ) })
             ] }),
-            /* @__PURE__ */ i.jsx("ul", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ i.jsx(p, {}) })
+            /* @__PURE__ */ e.jsx("ul", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ e.jsx(k, {}) })
           ]
         }
       ),
       document.body
     )
-  ] }) : /* @__PURE__ */ i.jsxs(Rt, { className: e, disabled: t, children: [
-    /* @__PURE__ */ i.jsx(
-      Ye,
+  ] }) : /* @__PURE__ */ e.jsxs(De, { className: t, disabled: s, children: [
+    /* @__PURE__ */ e.jsx(
+      be,
       {
-        "aria-label": `Notifications${b ? ` (${u} unread)` : ""}`,
-        className: T(
+        "aria-label": `Notifications${f ? ` (${a} unread)` : ""}`,
+        className: $(
           "relative flex h-10 w-10 items-center justify-center px-2 text-sm",
           "secondary-outset-focus group rounded-lg border border-transparent bg-transparent text-white enabled:cursor-pointer enabled:hover:bg-white/6"
         ),
-        disabled: t,
+        disabled: s,
         icon: "mdiBellOutline",
         unstyled: !0,
-        children: b ? /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ i.jsx(se, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
+        children: f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(G, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
       }
     ),
-    /* @__PURE__ */ i.jsx(Ve, { children: /* @__PURE__ */ i.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ i.jsx("h3", { id: "notifications-title", className: "text-sm font-semibold text-white", children: "Notifications" }),
-      b && o && /* @__PURE__ */ i.jsx(
+    /* @__PURE__ */ e.jsx(xe, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e.jsx("h3", { id: "notifications-title", className: "text-sm font-semibold text-white", children: "Notifications" }),
+      f && i && /* @__PURE__ */ e.jsx(
         "button",
         {
           className: "secondary-outset-focus cursor-pointer rounded-lg p-1 text-xs text-neutral-400 transition-colors hover:text-white",
-          onClick: o,
+          onClick: i,
           children: "Mark all read"
         }
       )
     ] }) }),
-    /* @__PURE__ */ i.jsx(
-      _e,
+    /* @__PURE__ */ e.jsx(
+      ue,
       {
         align: "end",
         "aria-labelledby": "notifications-title",
-        className: N("flex w-85 flex-col overflow-hidden p-0", a),
+        className: b("flex w-85 flex-col overflow-hidden p-0", o),
         side: "bottom",
-        children: /* @__PURE__ */ i.jsx(p, {})
+        children: /* @__PURE__ */ e.jsx(k, {})
       }
     )
   ] }) });
-}, qe = We(void 0), It = () => {
-  const e = Be(qe);
-  if (!e)
+}, he = le(void 0), Me = () => {
+  const t = ae(he);
+  if (!t)
     throw new Error("Select components must be used within an OxSelect");
-  return e;
-}, Ft = ({
-  children: e,
-  className: t,
-  disabled: r = !1,
-  id: a,
-  value: n
+  return t;
+}, Pe = ({
+  children: t,
+  className: s,
+  disabled: n = !1,
+  id: o,
+  value: r
 }) => {
-  const { closeDropdown: o, onSelect: s, selectedValue: u } = It(), l = () => {
-    s({ value: n, label: e });
-  }, c = (m) => {
-    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s({ value: n, label: e })), m.key === "Escape" && o();
-  }, d = u.includes(n);
-  return /* @__PURE__ */ i.jsx("li", { role: "none", children: /* @__PURE__ */ i.jsxs(
+  const { closeDropdown: i, onSelect: l, selectedValue: a } = Me(), u = () => {
+    l({ value: r, label: t });
+  }, v = (m) => {
+    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), l({ value: r, label: t })), m.key === "Escape" && i();
+  }, x = a.includes(r);
+  return /* @__PURE__ */ e.jsx("li", { role: "none", children: /* @__PURE__ */ e.jsxs(
     "button",
     {
-      id: a,
-      "aria-selected": d,
-      className: N(
+      id: o,
+      "aria-selected": x,
+      className: b(
         "group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm enabled:text-white",
         "enabled:cursor-pointer enabled:hover:bg-white/6",
         "default-inset-focus",
         "default-disabled",
-        d && "bg-white/5",
-        t
+        x && "bg-white/5",
+        s
       ),
-      disabled: r,
+      disabled: n,
       role: "option",
-      tabIndex: r ? -1 : 0,
-      onClick: l,
-      onKeyDown: c,
+      tabIndex: n ? -1 : 0,
+      onClick: u,
+      onKeyDown: v,
       children: [
-        e,
-        d && !r && /* @__PURE__ */ i.jsx(U, { className: "text-violet-700", icon: "mdiCheck", size: 0.8 })
+        t,
+        x && !n && /* @__PURE__ */ e.jsx(T, { className: "text-violet-700", icon: "mdiCheck", size: 0.8 })
       ]
     }
   ) });
 };
-let xe = null, ge = null;
-const Dt = () => (xe || (xe = document.createElement("canvas"), ge = xe.getContext("2d"), ge.font = "0.875rem system-ui, sans-serif"), ge), zt = (e, t, r) => {
-  if (e.length === 0) return [];
-  if (!t.current) return e.slice(0, 1);
-  const a = t.current.offsetWidth || 0, n = 12, o = 32, s = 32;
-  let u = a - n - o;
-  e.length > 1 && (u -= s);
-  const l = Dt();
-  if (!l) return e.slice(0, 2);
-  const c = r ? 4 : 8, d = r ? 12 : 0;
+let A = null, R = null;
+const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("2d"), R.font = "0.875rem system-ui, sans-serif"), R), Ve = (t, s, n) => {
+  if (t.length === 0) return [];
+  if (!s.current) return t.slice(0, 1);
+  const o = s.current.offsetWidth || 0, r = 12, i = 32, l = 32;
+  let a = o - r - i;
+  t.length > 1 && (a -= l);
+  const u = He();
+  if (!u) return t.slice(0, 2);
+  const v = n ? 4 : 8, x = n ? 12 : 0;
   let m = 0, h = 0;
-  for (let b = 0; b < e.length; b++) {
-    const g = e[b], v = String(g.label), p = l.measureText(v).width + (r ? d : 0), x = b > 0 ? m + p + c : m + p;
-    if (x <= u)
-      m = x, h++;
+  for (let f = 0; f < t.length; f++) {
+    const p = t[f], j = String(p.label), k = u.measureText(j).width + (n ? x : 0), c = f > 0 ? m + k + v : m + k;
+    if (c <= a)
+      m = c, h++;
     else
       break;
   }
-  return h = Math.max(1, h), e.slice(0, h);
-}, Tt = (e) => e == null ? [] : Array.isArray(e) ? e : [e], yn = ({
-  badgeColor: e = "purple",
-  children: t,
-  className: r,
-  defaultValue: a = null,
-  description: n,
-  disabled: o = !1,
-  displayAsBadges: s = !1,
-  error: u = !1,
-  errorMessage: l,
-  id: c,
-  label: d,
+  return h = Math.max(1, h), t.slice(0, h);
+}, Ke = (t) => t == null ? [] : Array.isArray(t) ? t : [t], ct = ({
+  badgeColor: t = "purple",
+  children: s,
+  className: n,
+  defaultValue: o = null,
+  description: r,
+  disabled: i = !1,
+  displayAsBadges: l = !1,
+  error: a = !1,
+  errorMessage: u,
+  id: v,
+  label: x,
   multiple: m = !1,
   name: h,
-  onChange: b,
-  placeholder: g = "Select an option",
-  required: v = !1
+  onChange: f,
+  placeholder: p = "Select an option",
+  required: j = !1
 }) => {
-  var Q;
-  const C = ue(), p = ye(null), [x, y] = z(!1), [j, L] = z([]), F = c || C, k = `${F}-select`, D = `${F}-description`, S = `${F}-error`, I = u && l, H = (w, E) => {
-    let R = null;
-    return ee.Children.forEach(w, (P) => {
-      if (ee.isValidElement(P) && P.type === Ft) {
-        const O = P.props;
-        O.value === E && (R = { value: O.value, label: O.children });
+  var U;
+  const y = J(), k = ee(null), [c, w] = S(!1), [N, E] = S([]), F = v || y, C = `${F}-select`, D = `${F}-description`, L = `${F}-error`, W = a && u, P = (d, g) => {
+    let O = null;
+    return _.Children.forEach(d, (z) => {
+      if (_.isValidElement(z) && z.type === Pe) {
+        const I = z.props;
+        I.value === g && (O = { value: I.value, label: I.children });
       }
-    }), R;
-  }, G = (w) => {
-    var R;
-    let E;
-    if (m ? j.some((O) => O.value === w.value) ? E = j.filter((O) => O.value !== w.value) : E = [...j, w] : (E = [w], y(!1)), L(E), b) {
-      const P = m ? E.map((O) => O.value) : ((R = E[0]) == null ? void 0 : R.value) ?? null;
-      b(P);
+    }), O;
+  }, V = (d) => {
+    var O;
+    let g;
+    if (m ? N.some((I) => I.value === d.value) ? g = N.filter((I) => I.value !== d.value) : g = [...N, d] : (g = [d], w(!1)), E(g), f) {
+      const z = m ? g.map((I) => I.value) : ((O = g[0]) == null ? void 0 : O.value) ?? null;
+      f(z);
     }
   };
-  Y(() => {
-    if (a !== void 0) {
-      const w = Tt(a), E = [];
-      w.forEach((R) => {
-        const P = H(t, R);
-        P && E.push(P);
-      }), L(m ? E : E.slice(0, 1));
+  H(() => {
+    if (o !== void 0) {
+      const d = Ke(o), g = [];
+      d.forEach((O) => {
+        const z = P(s, O);
+        z && g.push(z);
+      }), E(m ? g : g.slice(0, 1));
     }
-  }, [a, t, m]);
-  const fe = /* @__PURE__ */ i.jsx(
+  }, [o, s, m]);
+  const Y = /* @__PURE__ */ e.jsx(
     "ul",
     {
-      id: `${k}-listbox`,
+      id: `${C}-listbox`,
       "aria-multiselectable": m,
       className: "max-h-72 space-y-0.5 overflow-hidden overflow-y-auto",
       role: "listbox",
-      children: t
+      children: s
     }
-  ), X = zt(j, p, s), ne = j.length - X.length, me = ne > 0;
-  return /* @__PURE__ */ i.jsx(
-    qe.Provider,
+  ), K = Ve(N, k, l), q = N.length - K.length, Q = q > 0;
+  return /* @__PURE__ */ e.jsx(
+    he.Provider,
     {
       value: {
-        selectedValue: j.map((w) => w.value),
+        selectedValue: N.map((d) => d.value),
         multiple: m,
-        onSelect: G,
-        closeDropdown: () => y(!1)
+        onSelect: V,
+        closeDropdown: () => w(!1)
       },
-      children: /* @__PURE__ */ i.jsxs("div", { className: N("flex w-full flex-col gap-1", r), children: [
-        d && /* @__PURE__ */ i.jsx(Ce, { htmlFor: k, required: v, children: d }),
-        /* @__PURE__ */ i.jsx(
-          Ue,
+      children: /* @__PURE__ */ e.jsxs("div", { className: b("flex w-full flex-col gap-1", n), children: [
+        x && /* @__PURE__ */ e.jsx(te, { htmlFor: C, required: j, children: x }),
+        /* @__PURE__ */ e.jsx(
+          de,
           {
             align: "start",
-            content: fe,
+            content: Y,
             contentClassName: "default-border bg-zinc-1000/70 rounded-lg p-1 backdrop-blur-xl animate-dropdown-in-bottom",
-            contentStyle: { minWidth: `${((Q = p.current) == null ? void 0 : Q.offsetWidth) || 200}px` },
-            disabled: o,
-            open: x,
+            contentStyle: { minWidth: `${((U = k.current) == null ? void 0 : U.offsetWidth) || 200}px` },
+            disabled: i,
+            open: c,
             position: "bottom",
             trigger: "click",
-            onOpenChange: y,
-            children: /* @__PURE__ */ i.jsxs(
+            onOpenChange: w,
+            children: /* @__PURE__ */ e.jsxs(
               "button",
               {
-                id: k,
-                "aria-controls": `${k}-listbox`,
-                "aria-describedby": [n ? D : "", I ? S : ""].filter(Boolean).join(" ") || void 0,
-                "aria-disabled": o,
-                "aria-expanded": x,
+                id: C,
+                "aria-controls": `${C}-listbox`,
+                "aria-describedby": [r ? D : "", W ? L : ""].filter(Boolean).join(" ") || void 0,
+                "aria-disabled": i,
+                "aria-expanded": c,
                 "aria-haspopup": "listbox",
-                "aria-invalid": u,
-                "aria-required": v,
-                className: T(
+                "aria-invalid": a,
+                "aria-required": j,
+                className: $(
                   "relative flex h-10 w-full gap-x-2 rounded-lg py-2 ps-3 pe-8 text-start text-sm enabled:cursor-pointer enabled:text-white",
                   "default-outset-focus default-disabled",
-                  u ? "default-error-border" : "default-border",
-                  x && "default-active-border"
+                  a ? "default-error-border" : "default-border",
+                  c && "default-active-border"
                 ),
-                disabled: o,
-                ref: p,
+                disabled: i,
+                ref: k,
                 role: "combobox",
                 type: "button",
                 children: [
-                  /* @__PURE__ */ i.jsx(
+                  /* @__PURE__ */ e.jsx(
                     "span",
                     {
-                      className: T(
+                      className: $(
                         "w-full overflow-hidden text-ellipsis",
-                        s ? m && "flex flex-wrap gap-1" : "whitespace-nowrap",
-                        o && s && "opacity-50"
+                        l ? m && "flex flex-wrap gap-1" : "whitespace-nowrap",
+                        i && l && "opacity-50"
                       ),
-                      children: j.length > 0 ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                        s && m ? X.map((w) => /* @__PURE__ */ i.jsx(se, { color: e, size: "sm", children: w.label }, String(w.value))) : X.map((w, E, R) => /* @__PURE__ */ i.jsxs(ee.Fragment, { children: [
-                          w.label,
-                          E < R.length - 1 && ", "
-                        ] }, String(w.value))),
-                        me && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                          !(s && m) && " ",
-                          /* @__PURE__ */ i.jsxs(se, { color: e, size: "sm", children: [
+                      children: N.length > 0 ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                        l && m ? K.map((d) => /* @__PURE__ */ e.jsx(G, { color: t, size: "sm", children: d.label }, String(d.value))) : K.map((d, g, O) => /* @__PURE__ */ e.jsxs(_.Fragment, { children: [
+                          d.label,
+                          g < O.length - 1 && ", "
+                        ] }, String(d.value))),
+                        Q && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                          !(l && m) && " ",
+                          /* @__PURE__ */ e.jsxs(G, { color: t, size: "sm", children: [
                             "+",
-                            ne
+                            q
                           ] })
                         ] })
-                      ] }) : g
+                      ] }) : p
                     }
                   ),
-                  /* @__PURE__ */ i.jsx("div", { className: "absolute end-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ i.jsx(
-                    U,
+                  /* @__PURE__ */ e.jsx("div", { className: "absolute end-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ e.jsx(
+                    T,
                     {
-                      className: T(
+                      className: $(
                         "transition-transform duration-300 ease-in-out",
-                        o && "text-neutral-500",
-                        x && "rotate-180"
+                        i && "text-neutral-500",
+                        c && "rotate-180"
                       ),
                       icon: "mdiChevronDown",
                       size: 0.8
@@ -1146,82 +1145,82 @@ const Dt = () => (xe || (xe = document.createElement("canvas"), ge = xe.getConte
             )
           }
         ),
-        h && /* @__PURE__ */ i.jsx(
+        h && /* @__PURE__ */ e.jsx(
           "input",
           {
             name: h,
             type: "hidden",
-            value: j.map((w) => w.value).join(",")
+            value: N.map((d) => d.value).join(",")
           }
         ),
-        n && /* @__PURE__ */ i.jsx(je, { id: D, disabled: o, children: n }),
-        I && /* @__PURE__ */ i.jsx(Ne, { id: S, children: l })
+        r && /* @__PURE__ */ e.jsx(se, { id: D, disabled: i, children: r }),
+        W && /* @__PURE__ */ e.jsx(re, { id: L, children: u })
       ] })
     }
   );
-}, wn = ({ children: e, className: t }) => /* @__PURE__ */ i.jsx("div", { className: N("px-2 py-1 text-xs font-medium text-neutral-400", t), children: e }), Mt = {
+}, dt = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("px-2 py-1 text-xs font-medium text-neutral-400", s), children: t }), Ue = {
   default: "bg-zinc-800/80",
   purple: "bg-purple-950/50",
   blue: "bg-blue-950/50",
   gray: "bg-gray-800/50"
-}, Wt = {
+}, _e = {
   rectangle: "rounded-md",
   circle: "rounded-full"
-}, Bt = ({
-  animate: e = !0,
-  className: t,
-  color: r = "default",
-  fullWidth: a = !1,
-  height: n,
-  shape: o = "rectangle",
-  width: s,
-  ...u
+}, qe = ({
+  animate: t = !0,
+  className: s,
+  color: n = "default",
+  fullWidth: o = !1,
+  height: r,
+  shape: i = "rectangle",
+  width: l,
+  ...a
 }) => {
-  const l = {
-    height: typeof n == "number" ? `${n}px` : n,
-    width: typeof s == "number" ? `${s}px` : s
+  const u = {
+    height: typeof r == "number" ? `${r}px` : r,
+    width: typeof l == "number" ? `${l}px` : l
   };
-  return /* @__PURE__ */ i.jsx(
+  return /* @__PURE__ */ e.jsx(
     "div",
     {
       "aria-busy": "true",
       "aria-label": "Loading...",
-      className: N(
+      className: b(
         "relative overflow-hidden",
-        Mt[r],
-        Wt[o],
-        e && "animate-pulse",
-        a && "w-full",
-        t
+        Ue[n],
+        _e[i],
+        t && "animate-pulse",
+        o && "w-full",
+        s
       ),
       role: "status",
-      style: l,
-      ...u
+      style: u,
+      ...a
     }
   );
-}, Cn = ({
-  animate: e = !0,
-  className: t,
-  color: r = "default",
-  fullWidth: a = !1,
-  gap: n = 8,
-  height: o = 20,
-  lines: s = 1,
-  width: u,
-  ...l
+}, ut = ({
+  animate: t = !0,
+  className: s,
+  color: n = "default",
+  fullWidth: o = !1,
+  gap: r = 8,
+  height: i = 20,
+  lines: l = 1,
+  width: a,
+  ...u
 }) => {
-  const c = (h) => h <= 1 ? `${h * 100}%` : `${h}px`, d = (h) => {
-    if (!a) {
-      if (Array.isArray(u)) {
-        const b = u[h % u.length];
-        return b == null ? void 0 : typeof b == "number" ? c(b) : b;
+  const v = (h) => h <= 1 ? `${h * 100}%` : `${h}px`, x = (h) => {
+    if (!o) {
+      if (Array.isArray(a)) {
+        const f = a[h % a.length];
+        return f == null ? void 0 : typeof f == "number" ? v(f) : f;
       }
-      if (typeof u == "number") {
-        if (s > 1 && h === s - 1) {
-          const b = u <= 1 ? u * 0.6 : Math.max(100, u * 0.6);
-          return c(b);
+      if (typeof a == "number") {
+        if (l > 1 && h === l - 1) {
+          const f = a <= 1 ? a * 0.6 : Math.max(100, a * 0.6);
+          return v(f);
         }
-        return c(u);
+        return v(a);
       }
       return "200px";
     }
@@ -1231,1422 +1230,128 @@ const Dt = () => (xe || (xe = document.createElement("canvas"), ge = xe.getConte
     12: "space-y-3",
     16: "space-y-4",
     20: "space-y-5"
-  }[n] || "space-y-2";
-  return /* @__PURE__ */ i.jsx("div", { className: N("flex flex-col", m, t), ...l, children: Array.from({ length: s }).map((h, b) => /* @__PURE__ */ i.jsx(
-    Bt,
+  }[r] || "space-y-2";
+  return /* @__PURE__ */ e.jsx("div", { className: b("flex flex-col", m, s), ...u, children: Array.from({ length: l }).map((h, f) => /* @__PURE__ */ e.jsx(
+    qe,
     {
-      animate: e,
-      color: r,
-      fullWidth: a,
-      height: o,
-      width: d(b)
+      animate: t,
+      color: n,
+      fullWidth: o,
+      height: i,
+      width: x(f)
     },
-    b
+    f
   )) });
-}, jn = ({
-  className: e,
-  description: t,
-  disabled: r = !1,
-  error: a = !1,
-  errorMessage: n,
-  id: o,
-  label: s,
-  name: u,
-  onChange: l,
-  placeholder: c = "Enter text...",
-  readOnly: d = !1,
+}, xt = ({
+  className: t,
+  description: s,
+  disabled: n = !1,
+  error: o = !1,
+  errorMessage: r,
+  id: i,
+  label: l,
+  name: a,
+  onChange: u,
+  placeholder: v = "Enter text...",
+  readOnly: x = !1,
   required: m = !1,
   rows: h = 3,
-  showMaxLength: b = !1,
-  value: g,
-  ...v
+  showMaxLength: f = !1,
+  value: p,
+  ...j
 }) => {
-  const C = ue(), [p, x] = z(
-    typeof g == "string" ? g.length : 0
-  ), y = o || C, j = `${y}-textarea`, L = `${y}-description`, F = `${y}-error`, k = v.maxLength, D = a && n;
-  Y(() => {
-    typeof g == "string" && x(g.length);
-  }, [g]);
-  const S = (H) => {
-    const G = H.target.value.length;
-    x(G), l == null || l(H);
-  }, I = /* @__PURE__ */ i.jsx(
+  const y = J(), [k, c] = S(
+    typeof p == "string" ? p.length : 0
+  ), w = i || y, N = `${w}-textarea`, E = `${w}-description`, F = `${w}-error`, C = j.maxLength, D = o && r;
+  H(() => {
+    typeof p == "string" && c(p.length);
+  }, [p]);
+  const L = (P) => {
+    const V = P.target.value.length;
+    c(V), u == null || u(P);
+  }, W = /* @__PURE__ */ e.jsx(
     "textarea",
     {
-      id: j,
-      "aria-describedby": [t ? L : "", D ? F : ""].filter(Boolean).join(" ") || void 0,
-      "aria-invalid": a,
+      id: N,
+      "aria-describedby": [s ? E : "", D ? F : ""].filter(Boolean).join(" ") || void 0,
+      "aria-invalid": o,
       "aria-required": m,
-      className: N(
+      className: b(
         "flex min-h-10 w-full resize-y rounded-lg bg-transparent px-2 py-2 text-sm text-white",
         "placeholder:text-neutral-500",
         "default-outset-focus",
         "default-disabled",
-        a ? "default-error-border" : "default-border",
-        e
+        o ? "default-error-border" : "default-border",
+        t
       ),
-      disabled: r,
-      name: u,
-      placeholder: c,
-      readOnly: d,
+      disabled: n,
+      name: a,
+      placeholder: v,
+      readOnly: x,
       rows: h,
-      value: g,
-      onChange: S,
-      ...v
+      value: p,
+      onChange: L,
+      ...j
     }
   );
-  return /* @__PURE__ */ i.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
-    s ? /* @__PURE__ */ i.jsx(Ce, { htmlFor: j, required: m, children: s }) : null,
-    I,
-    b && typeof k == "number" ? /* @__PURE__ */ i.jsxs("div", { className: "pointer-events-none mt-1 text-right text-xs text-neutral-400", children: [
-      p,
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+    l ? /* @__PURE__ */ e.jsx(te, { htmlFor: N, required: m, children: l }) : null,
+    W,
+    f && typeof C == "number" ? /* @__PURE__ */ e.jsxs("div", { className: "pointer-events-none mt-1 text-right text-xs text-neutral-400", children: [
+      k,
       "/",
-      k
+      C
     ] }) : null,
-    t ? /* @__PURE__ */ i.jsx(je, { id: L, disabled: r, children: t }) : null,
-    D ? /* @__PURE__ */ i.jsx(Ne, { id: F, children: n }) : null
+    s ? /* @__PURE__ */ e.jsx(se, { id: E, disabled: n, children: s }) : null,
+    D ? /* @__PURE__ */ e.jsx(re, { id: F, children: r }) : null
   ] });
-};
-/**
- * react-router v7.7.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-function $(e, t) {
-  if (e === !1 || e === null || typeof e > "u")
-    throw new Error(t);
-}
-function M(e, t) {
-  if (!e) {
-    typeof console < "u" && console.warn(t);
-    try {
-      throw new Error(t);
-    } catch {
-    }
-  }
-}
-function we({
-  pathname: e = "/",
-  search: t = "",
-  hash: r = ""
-}) {
-  return t && t !== "?" && (e += t.charAt(0) === "?" ? t : "?" + t), r && r !== "#" && (e += r.charAt(0) === "#" ? r : "#" + r), e;
-}
-function Ee(e) {
-  let t = {};
-  if (e) {
-    let r = e.indexOf("#");
-    r >= 0 && (t.hash = e.substring(r), e = e.substring(0, r));
-    let a = e.indexOf("?");
-    a >= 0 && (t.search = e.substring(a), e = e.substring(0, a)), e && (t.pathname = e);
-  }
-  return t;
-}
-function Ge(e, t, r = "/") {
-  return Ht(e, t, r, !1);
-}
-function Ht(e, t, r, a) {
-  let n = typeof t == "string" ? Ee(t) : t, o = _(n.pathname || "/", r);
-  if (o == null)
-    return null;
-  let s = Xe(e);
-  At(s);
-  let u = null;
-  for (let l = 0; u == null && l < s.length; ++l) {
-    let c = Zt(o);
-    u = Xt(
-      s[l],
-      c,
-      a
-    );
-  }
-  return u;
-}
-function Xe(e, t = [], r = [], a = "") {
-  let n = (o, s, u) => {
-    let l = {
-      relativePath: u === void 0 ? o.path || "" : u,
-      caseSensitive: o.caseSensitive === !0,
-      childrenIndex: s,
-      route: o
-    };
-    l.relativePath.startsWith("/") && ($(
-      l.relativePath.startsWith(a),
-      `Absolute route path "${l.relativePath}" nested under path "${a}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`
-    ), l.relativePath = l.relativePath.slice(a.length));
-    let c = A([a, l.relativePath]), d = r.concat(l);
-    o.children && o.children.length > 0 && ($(
-      // Our types know better, but runtime JS may not!
-      // @ts-expect-error
-      o.index !== !0,
-      `Index routes must not have child routes. Please remove all child routes from route path "${c}".`
-    ), Xe(o.children, t, d, c)), !(o.path == null && !o.index) && t.push({
-      path: c,
-      score: qt(c, o.index),
-      routesMeta: d
-    });
-  };
-  return e.forEach((o, s) => {
-    var u;
-    if (o.path === "" || !((u = o.path) != null && u.includes("?")))
-      n(o, s);
-    else
-      for (let l of Qe(o.path))
-        n(o, s, l);
-  }), t;
-}
-function Qe(e) {
-  let t = e.split("/");
-  if (t.length === 0) return [];
-  let [r, ...a] = t, n = r.endsWith("?"), o = r.replace(/\?$/, "");
-  if (a.length === 0)
-    return n ? [o, ""] : [o];
-  let s = Qe(a.join("/")), u = [];
-  return u.push(
-    ...s.map(
-      (l) => l === "" ? o : [o, l].join("/")
-    )
-  ), n && u.push(...s), u.map(
-    (l) => e.startsWith("/") && l === "" ? "/" : l
-  );
-}
-function At(e) {
-  e.sort(
-    (t, r) => t.score !== r.score ? r.score - t.score : Gt(
-      t.routesMeta.map((a) => a.childrenIndex),
-      r.routesMeta.map((a) => a.childrenIndex)
-    )
-  );
-}
-var Ut = /^:[\w-]+$/, _t = 3, Vt = 2, Jt = 1, Kt = 10, Yt = -2, ze = (e) => e === "*";
-function qt(e, t) {
-  let r = e.split("/"), a = r.length;
-  return r.some(ze) && (a += Yt), t && (a += Vt), r.filter((n) => !ze(n)).reduce(
-    (n, o) => n + (Ut.test(o) ? _t : o === "" ? Jt : Kt),
-    a
-  );
-}
-function Gt(e, t) {
-  return e.length === t.length && e.slice(0, -1).every((a, n) => a === t[n]) ? (
-    // If two routes are siblings, we should try to match the earlier sibling
-    // first. This allows people to have fine-grained control over the matching
-    // behavior by simply putting routes with identical paths in the order they
-    // want them tried.
-    e[e.length - 1] - t[t.length - 1]
-  ) : (
-    // Otherwise, it doesn't really make sense to rank non-siblings by index,
-    // so they sort equally.
-    0
-  );
-}
-function Xt(e, t, r = !1) {
-  let { routesMeta: a } = e, n = {}, o = "/", s = [];
-  for (let u = 0; u < a.length; ++u) {
-    let l = a[u], c = u === a.length - 1, d = o === "/" ? t : t.slice(o.length) || "/", m = ie(
-      { path: l.relativePath, caseSensitive: l.caseSensitive, end: c },
-      d
-    ), h = l.route;
-    if (!m && c && r && !a[a.length - 1].route.index && (m = ie(
-      {
-        path: l.relativePath,
-        caseSensitive: l.caseSensitive,
-        end: !1
-      },
-      d
-    )), !m)
-      return null;
-    Object.assign(n, m.params), s.push({
-      // TODO: Can this as be avoided?
-      params: n,
-      pathname: A([o, m.pathname]),
-      pathnameBase: nr(
-        A([o, m.pathnameBase])
-      ),
-      route: h
-    }), m.pathnameBase !== "/" && (o = A([o, m.pathnameBase]));
-  }
-  return s;
-}
-function ie(e, t) {
-  typeof e == "string" && (e = { path: e, caseSensitive: !1, end: !0 });
-  let [r, a] = Qt(
-    e.path,
-    e.caseSensitive,
-    e.end
-  ), n = t.match(r);
-  if (!n) return null;
-  let o = n[0], s = o.replace(/(.)\/+$/, "$1"), u = n.slice(1);
-  return {
-    params: a.reduce(
-      (c, { paramName: d, isOptional: m }, h) => {
-        if (d === "*") {
-          let g = u[h] || "";
-          s = o.slice(0, o.length - g.length).replace(/(.)\/+$/, "$1");
-        }
-        const b = u[h];
-        return m && !b ? c[d] = void 0 : c[d] = (b || "").replace(/%2F/g, "/"), c;
-      },
-      {}
-    ),
-    pathname: o,
-    pathnameBase: s,
-    pattern: e
-  };
-}
-function Qt(e, t = !1, r = !0) {
-  M(
-    e === "*" || !e.endsWith("*") || e.endsWith("/*"),
-    `Route path "${e}" will be treated as if it were "${e.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${e.replace(/\*$/, "/*")}".`
-  );
-  let a = [], n = "^" + e.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(
-    /\/:([\w-]+)(\?)?/g,
-    (s, u, l) => (a.push({ paramName: u, isOptional: l != null }), l ? "/?([^\\/]+)?" : "/([^\\/]+)")
-  );
-  return e.endsWith("*") ? (a.push({ paramName: "*" }), n += e === "*" || e === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$") : r ? n += "\\/*$" : e !== "" && e !== "/" && (n += "(?:(?=\\/|$))"), [new RegExp(n, t ? void 0 : "i"), a];
-}
-function Zt(e) {
-  try {
-    return e.split("/").map((t) => decodeURIComponent(t).replace(/\//g, "%2F")).join("/");
-  } catch (t) {
-    return M(
-      !1,
-      `The URL path "${e}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${t}).`
-    ), e;
-  }
-}
-function _(e, t) {
-  if (t === "/") return e;
-  if (!e.toLowerCase().startsWith(t.toLowerCase()))
-    return null;
-  let r = t.endsWith("/") ? t.length - 1 : t.length, a = e.charAt(r);
-  return a && a !== "/" ? null : e.slice(r) || "/";
-}
-function er(e, t = "/") {
-  let {
-    pathname: r,
-    search: a = "",
-    hash: n = ""
-  } = typeof e == "string" ? Ee(e) : e;
-  return {
-    pathname: r ? r.startsWith("/") ? r : tr(r, t) : t,
-    search: ar(a),
-    hash: or(n)
-  };
-}
-function tr(e, t) {
-  let r = t.replace(/\/+$/, "").split("/");
-  return e.split("/").forEach((n) => {
-    n === ".." ? r.length > 1 && r.pop() : n !== "." && r.push(n);
-  }), r.length > 1 ? r.join("/") : "/";
-}
-function be(e, t, r, a) {
-  return `Cannot include a '${e}' character in a manually specified \`to.${t}\` field [${JSON.stringify(
-    a
-  )}].  Please separate it out to the \`to.${r}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`;
-}
-function rr(e) {
-  return e.filter(
-    (t, r) => r === 0 || t.route.path && t.route.path.length > 0
-  );
-}
-function ke(e) {
-  let t = rr(e);
-  return t.map(
-    (r, a) => a === t.length - 1 ? r.pathname : r.pathnameBase
-  );
-}
-function Le(e, t, r, a = !1) {
-  let n;
-  typeof e == "string" ? n = Ee(e) : (n = { ...e }, $(
-    !n.pathname || !n.pathname.includes("?"),
-    be("?", "pathname", "search", n)
-  ), $(
-    !n.pathname || !n.pathname.includes("#"),
-    be("#", "pathname", "hash", n)
-  ), $(
-    !n.search || !n.search.includes("#"),
-    be("#", "search", "hash", n)
-  ));
-  let o = e === "" || n.pathname === "", s = o ? "/" : n.pathname, u;
-  if (s == null)
-    u = r;
-  else {
-    let m = t.length - 1;
-    if (!a && s.startsWith("..")) {
-      let h = s.split("/");
-      for (; h[0] === ".."; )
-        h.shift(), m -= 1;
-      n.pathname = h.join("/");
-    }
-    u = m >= 0 ? t[m] : "/";
-  }
-  let l = er(n, u), c = s && s !== "/" && s.endsWith("/"), d = (o || s === ".") && r.endsWith("/");
-  return !l.pathname.endsWith("/") && (c || d) && (l.pathname += "/"), l;
-}
-var A = (e) => e.join("/").replace(/\/\/+/g, "/"), nr = (e) => e.replace(/\/+$/, "").replace(/^\/*/, "/"), ar = (e) => !e || e === "?" ? "" : e.startsWith("?") ? e : "?" + e, or = (e) => !e || e === "#" ? "" : e.startsWith("#") ? e : "#" + e;
-function lr(e) {
-  return e != null && typeof e.status == "number" && typeof e.statusText == "string" && typeof e.internal == "boolean" && "data" in e;
-}
-var Ze = [
-  "POST",
-  "PUT",
-  "PATCH",
-  "DELETE"
-];
-new Set(
-  Ze
-);
-var sr = [
-  "GET",
-  ...Ze
-];
-new Set(sr);
-var q = f.createContext(null);
-q.displayName = "DataRouter";
-var ce = f.createContext(null);
-ce.displayName = "DataRouterState";
-f.createContext(!1);
-var et = f.createContext({
-  isTransitioning: !1
-});
-et.displayName = "ViewTransition";
-var ir = f.createContext(
-  /* @__PURE__ */ new Map()
-);
-ir.displayName = "Fetchers";
-var ur = f.createContext(null);
-ur.displayName = "Await";
-var W = f.createContext(
-  null
-);
-W.displayName = "Navigation";
-var Se = f.createContext(
-  null
-);
-Se.displayName = "Location";
-var B = f.createContext({
-  outlet: null,
-  matches: [],
-  isDataRoute: !1
-});
-B.displayName = "Route";
-var Re = f.createContext(null);
-Re.displayName = "RouteError";
-function cr(e, { relative: t } = {}) {
-  $(
-    te(),
-    // TODO: This error is probably because they somehow have 2 versions of the
-    // router loaded. We can help them understand how to avoid that.
-    "useHref() may be used only in the context of a <Router> component."
-  );
-  let { basename: r, navigator: a } = f.useContext(W), { hash: n, pathname: o, search: s } = re(e, { relative: t }), u = o;
-  return r !== "/" && (u = o === "/" ? r : A([r, o])), a.createHref({ pathname: u, search: s, hash: n });
-}
-function te() {
-  return f.useContext(Se) != null;
-}
-function V() {
-  return $(
-    te(),
-    // TODO: This error is probably because they somehow have 2 versions of the
-    // router loaded. We can help them understand how to avoid that.
-    "useLocation() may be used only in the context of a <Router> component."
-  ), f.useContext(Se).location;
-}
-var tt = "You should call navigate() in a React.useEffect(), not when your component is first rendered.";
-function rt(e) {
-  f.useContext(W).static || f.useLayoutEffect(e);
-}
-function nt() {
-  let { isDataRoute: e } = f.useContext(B);
-  return e ? jr() : dr();
-}
-function dr() {
-  $(
-    te(),
-    // TODO: This error is probably because they somehow have 2 versions of the
-    // router loaded. We can help them understand how to avoid that.
-    "useNavigate() may be used only in the context of a <Router> component."
-  );
-  let e = f.useContext(q), { basename: t, navigator: r } = f.useContext(W), { matches: a } = f.useContext(B), { pathname: n } = V(), o = JSON.stringify(ke(a)), s = f.useRef(!1);
-  return rt(() => {
-    s.current = !0;
-  }), f.useCallback(
-    (l, c = {}) => {
-      if (M(s.current, tt), !s.current) return;
-      if (typeof l == "number") {
-        r.go(l);
-        return;
-      }
-      let d = Le(
-        l,
-        JSON.parse(o),
-        n,
-        c.relative === "path"
-      );
-      e == null && t !== "/" && (d.pathname = d.pathname === "/" ? t : A([t, d.pathname])), (c.replace ? r.replace : r.push)(
-        d,
-        c.state,
-        c
-      );
-    },
-    [
-      t,
-      r,
-      o,
-      n,
-      e
-    ]
-  );
-}
-f.createContext(null);
-function re(e, { relative: t } = {}) {
-  let { matches: r } = f.useContext(B), { pathname: a } = V(), n = JSON.stringify(ke(r));
-  return f.useMemo(
-    () => Le(
-      e,
-      JSON.parse(n),
-      a,
-      t === "path"
-    ),
-    [e, n, a, t]
-  );
-}
-function fr(e, t, r, a) {
-  $(
-    te(),
-    // TODO: This error is probably because they somehow have 2 versions of the
-    // router loaded. We can help them understand how to avoid that.
-    "useRoutes() may be used only in the context of a <Router> component."
-  );
-  let { navigator: n } = f.useContext(W), { matches: o } = f.useContext(B), s = o[o.length - 1], u = s ? s.params : {}, l = s ? s.pathname : "/", c = s ? s.pathnameBase : "/", d = s && s.route;
-  {
-    let p = d && d.path || "";
-    at(
-      l,
-      !d || p.endsWith("*") || p.endsWith("*?"),
-      `You rendered descendant <Routes> (or called \`useRoutes()\`) at "${l}" (under <Route path="${p}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
-
-Please change the parent <Route path="${p}"> to <Route path="${p === "/" ? "*" : `${p}/*`}">.`
-    );
-  }
-  let m = V(), h;
-  h = m;
-  let b = h.pathname || "/", g = b;
-  if (c !== "/") {
-    let p = c.replace(/^\//, "").split("/");
-    g = "/" + b.replace(/^\//, "").split("/").slice(p.length).join("/");
-  }
-  let v = Ge(e, { pathname: g });
-  return M(
-    d || v != null,
-    `No routes matched location "${h.pathname}${h.search}${h.hash}" `
-  ), M(
-    v == null || v[v.length - 1].route.element !== void 0 || v[v.length - 1].route.Component !== void 0 || v[v.length - 1].route.lazy !== void 0,
-    `Matched leaf route at location "${h.pathname}${h.search}${h.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
-  ), gr(
-    v && v.map(
-      (p) => Object.assign({}, p, {
-        params: Object.assign({}, u, p.params),
-        pathname: A([
-          c,
-          // Re-encode pathnames that were decoded inside matchRoutes
-          n.encodeLocation ? n.encodeLocation(p.pathname).pathname : p.pathname
-        ]),
-        pathnameBase: p.pathnameBase === "/" ? c : A([
-          c,
-          // Re-encode pathnames that were decoded inside matchRoutes
-          n.encodeLocation ? n.encodeLocation(p.pathnameBase).pathname : p.pathnameBase
-        ])
-      })
-    ),
-    o,
-    r,
-    a
-  );
-}
-function mr() {
-  let e = Cr(), t = lr(e) ? `${e.status} ${e.statusText}` : e instanceof Error ? e.message : JSON.stringify(e), r = e instanceof Error ? e.stack : null, a = "rgba(200,200,200, 0.5)", n = { padding: "0.5rem", backgroundColor: a }, o = { padding: "2px 4px", backgroundColor: a }, s = null;
-  return console.error(
-    "Error handled by React Router default ErrorBoundary:",
-    e
-  ), s = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement("p", null, "💿 Hey developer 👋"), /* @__PURE__ */ f.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ f.createElement("code", { style: o }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ f.createElement("code", { style: o }, "errorElement"), " prop on your route.")), /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ f.createElement("h3", { style: { fontStyle: "italic" } }, t), r ? /* @__PURE__ */ f.createElement("pre", { style: n }, r) : null, s);
-}
-var hr = /* @__PURE__ */ f.createElement(mr, null), pr = class extends f.Component {
-  constructor(e) {
-    super(e), this.state = {
-      location: e.location,
-      revalidation: e.revalidation,
-      error: e.error
-    };
-  }
-  static getDerivedStateFromError(e) {
-    return { error: e };
-  }
-  static getDerivedStateFromProps(e, t) {
-    return t.location !== e.location || t.revalidation !== "idle" && e.revalidation === "idle" ? {
-      error: e.error,
-      location: e.location,
-      revalidation: e.revalidation
-    } : {
-      error: e.error !== void 0 ? e.error : t.error,
-      location: t.location,
-      revalidation: e.revalidation || t.revalidation
-    };
-  }
-  componentDidCatch(e, t) {
-    console.error(
-      "React Router caught the following error during render",
-      e,
-      t
-    );
-  }
-  render() {
-    return this.state.error !== void 0 ? /* @__PURE__ */ f.createElement(B.Provider, { value: this.props.routeContext }, /* @__PURE__ */ f.createElement(
-      Re.Provider,
-      {
-        value: this.state.error,
-        children: this.props.component
-      }
-    )) : this.props.children;
-  }
-};
-function xr({ routeContext: e, match: t, children: r }) {
-  let a = f.useContext(q);
-  return a && a.static && a.staticContext && (t.route.errorElement || t.route.ErrorBoundary) && (a.staticContext._deepestRenderedBoundaryId = t.route.id), /* @__PURE__ */ f.createElement(B.Provider, { value: e }, r);
-}
-function gr(e, t = [], r = null, a = null) {
-  if (e == null) {
-    if (!r)
-      return null;
-    if (r.errors)
-      e = r.matches;
-    else if (t.length === 0 && !r.initialized && r.matches.length > 0)
-      e = r.matches;
-    else
-      return null;
-  }
-  let n = e, o = r == null ? void 0 : r.errors;
-  if (o != null) {
-    let l = n.findIndex(
-      (c) => c.route.id && (o == null ? void 0 : o[c.route.id]) !== void 0
-    );
-    $(
-      l >= 0,
-      `Could not find a matching route for errors on route IDs: ${Object.keys(
-        o
-      ).join(",")}`
-    ), n = n.slice(
-      0,
-      Math.min(n.length, l + 1)
-    );
-  }
-  let s = !1, u = -1;
-  if (r)
-    for (let l = 0; l < n.length; l++) {
-      let c = n[l];
-      if ((c.route.HydrateFallback || c.route.hydrateFallbackElement) && (u = l), c.route.id) {
-        let { loaderData: d, errors: m } = r, h = c.route.loader && !d.hasOwnProperty(c.route.id) && (!m || m[c.route.id] === void 0);
-        if (c.route.lazy || h) {
-          s = !0, u >= 0 ? n = n.slice(0, u + 1) : n = [n[0]];
-          break;
-        }
-      }
-    }
-  return n.reduceRight((l, c, d) => {
-    let m, h = !1, b = null, g = null;
-    r && (m = o && c.route.id ? o[c.route.id] : void 0, b = c.route.errorElement || hr, s && (u < 0 && d === 0 ? (at(
-      "route-fallback",
-      !1,
-      "No `HydrateFallback` element provided to render during initial hydration"
-    ), h = !0, g = null) : u === d && (h = !0, g = c.route.hydrateFallbackElement || null)));
-    let v = t.concat(n.slice(0, d + 1)), C = () => {
-      let p;
-      return m ? p = b : h ? p = g : c.route.Component ? p = /* @__PURE__ */ f.createElement(c.route.Component, null) : c.route.element ? p = c.route.element : p = l, /* @__PURE__ */ f.createElement(
-        xr,
-        {
-          match: c,
-          routeContext: {
-            outlet: l,
-            matches: v,
-            isDataRoute: r != null
-          },
-          children: p
-        }
-      );
-    };
-    return r && (c.route.ErrorBoundary || c.route.errorElement || d === 0) ? /* @__PURE__ */ f.createElement(
-      pr,
-      {
-        location: r.location,
-        revalidation: r.revalidation,
-        component: b,
-        error: m,
-        children: C(),
-        routeContext: { outlet: null, matches: v, isDataRoute: !0 }
-      }
-    ) : C();
-  }, null);
-}
-function Pe(e) {
-  return `${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
-}
-function br(e) {
-  let t = f.useContext(q);
-  return $(t, Pe(e)), t;
-}
-function vr(e) {
-  let t = f.useContext(ce);
-  return $(t, Pe(e)), t;
-}
-function yr(e) {
-  let t = f.useContext(B);
-  return $(t, Pe(e)), t;
-}
-function $e(e) {
-  let t = yr(e), r = t.matches[t.matches.length - 1];
-  return $(
-    r.route.id,
-    `${e} can only be used on routes that contain a unique "id"`
-  ), r.route.id;
-}
-function wr() {
-  return $e(
-    "useRouteId"
-    /* UseRouteId */
-  );
-}
-function Cr() {
-  var a;
-  let e = f.useContext(Re), t = vr(
-    "useRouteError"
-    /* UseRouteError */
-  ), r = $e(
-    "useRouteError"
-    /* UseRouteError */
-  );
-  return e !== void 0 ? e : (a = t.errors) == null ? void 0 : a[r];
-}
-function jr() {
-  let { router: e } = br(
-    "useNavigate"
-    /* UseNavigateStable */
-  ), t = $e(
-    "useNavigate"
-    /* UseNavigateStable */
-  ), r = f.useRef(!1);
-  return rt(() => {
-    r.current = !0;
-  }), f.useCallback(
-    async (n, o = {}) => {
-      M(r.current, tt), r.current && (typeof n == "number" ? e.navigate(n) : await e.navigate(n, { fromRouteId: t, ...o }));
-    },
-    [e, t]
-  );
-}
-var Te = {};
-function at(e, t, r) {
-  !t && !Te[e] && (Te[e] = !0, M(!1, r));
-}
-f.memo(Nr);
-function Nr({
-  routes: e,
-  future: t,
-  state: r
-}) {
-  return fr(e, void 0, r, t);
-}
-function ot({
-  to: e,
-  replace: t,
-  state: r,
-  relative: a
-}) {
-  $(
-    te(),
-    // TODO: This error is probably because they somehow have 2 versions of
-    // the router loaded. We can help them understand how to avoid that.
-    "<Navigate> may be used only in the context of a <Router> component."
-  );
-  let { static: n } = f.useContext(W);
-  M(
-    !n,
-    "<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change."
-  );
-  let { matches: o } = f.useContext(B), { pathname: s } = V(), u = nt(), l = Le(
-    e,
-    ke(o),
-    s,
-    a === "path"
-  ), c = JSON.stringify(l);
-  return f.useEffect(() => {
-    u(JSON.parse(c), { replace: t, state: r, relative: a });
-  }, [u, c, a, t, r]), null;
-}
-var oe = "get", le = "application/x-www-form-urlencoded";
-function de(e) {
-  return e != null && typeof e.tagName == "string";
-}
-function Er(e) {
-  return de(e) && e.tagName.toLowerCase() === "button";
-}
-function kr(e) {
-  return de(e) && e.tagName.toLowerCase() === "form";
-}
-function Lr(e) {
-  return de(e) && e.tagName.toLowerCase() === "input";
-}
-function Sr(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
-function Rr(e, t) {
-  return e.button === 0 && // Ignore everything but left clicks
-  (!t || t === "_self") && // Let browser handle "target=_blank" etc.
-  !Sr(e);
-}
-var ae = null;
-function Pr() {
-  if (ae === null)
-    try {
-      new FormData(
-        document.createElement("form"),
-        // @ts-expect-error if FormData supports the submitter parameter, this will throw
-        0
-      ), ae = !1;
-    } catch {
-      ae = !0;
-    }
-  return ae;
-}
-var $r = /* @__PURE__ */ new Set([
-  "application/x-www-form-urlencoded",
-  "multipart/form-data",
-  "text/plain"
-]);
-function ve(e) {
-  return e != null && !$r.has(e) ? (M(
-    !1,
-    `"${e}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${le}"`
-  ), null) : e;
-}
-function Or(e, t) {
-  let r, a, n, o, s;
-  if (kr(e)) {
-    let u = e.getAttribute("action");
-    a = u ? _(u, t) : null, r = e.getAttribute("method") || oe, n = ve(e.getAttribute("enctype")) || le, o = new FormData(e);
-  } else if (Er(e) || Lr(e) && (e.type === "submit" || e.type === "image")) {
-    let u = e.form;
-    if (u == null)
-      throw new Error(
-        'Cannot submit a <button> or <input type="submit"> without a <form>'
-      );
-    let l = e.getAttribute("formaction") || u.getAttribute("action");
-    if (a = l ? _(l, t) : null, r = e.getAttribute("formmethod") || u.getAttribute("method") || oe, n = ve(e.getAttribute("formenctype")) || ve(u.getAttribute("enctype")) || le, o = new FormData(u, e), !Pr()) {
-      let { name: c, type: d, value: m } = e;
-      if (d === "image") {
-        let h = c ? `${c}.` : "";
-        o.append(`${h}x`, "0"), o.append(`${h}y`, "0");
-      } else c && o.append(c, m);
-    }
-  } else {
-    if (de(e))
-      throw new Error(
-        'Cannot submit element that is not <form>, <button>, or <input type="submit|image">'
-      );
-    r = oe, a = null, n = le, s = e;
-  }
-  return o && n === "text/plain" && (s = o, o = void 0), { action: a, method: r.toLowerCase(), encType: n, formData: o, body: s };
-}
-Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
-function Oe(e, t) {
-  if (e === !1 || e === null || typeof e > "u")
-    throw new Error(t);
-}
-function Ir(e, t, r) {
-  let a = typeof e == "string" ? new URL(
-    e,
-    // This can be called during the SSR flow via PrefetchPageLinksImpl so
-    // don't assume window is available
-    typeof window > "u" ? "server://singlefetch/" : window.location.origin
-  ) : e;
-  return a.pathname === "/" ? a.pathname = `_root.${r}` : t && _(a.pathname, t) === "/" ? a.pathname = `${t.replace(/\/$/, "")}/_root.${r}` : a.pathname = `${a.pathname.replace(/\/$/, "")}.${r}`, a;
-}
-async function Fr(e, t) {
-  if (e.id in t)
-    return t[e.id];
-  try {
-    let r = await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      e.module
-    );
-    return t[e.id] = r, r;
-  } catch (r) {
-    return console.error(
-      `Error loading route module \`${e.module}\`, reloading page...`
-    ), console.error(r), window.__reactRouterContext && window.__reactRouterContext.isSpaMode, window.location.reload(), new Promise(() => {
-    });
-  }
-}
-function Dr(e) {
-  return e == null ? !1 : e.href == null ? e.rel === "preload" && typeof e.imageSrcSet == "string" && typeof e.imageSizes == "string" : typeof e.rel == "string" && typeof e.href == "string";
-}
-async function zr(e, t, r) {
-  let a = await Promise.all(
-    e.map(async (n) => {
-      let o = t.routes[n.route.id];
-      if (o) {
-        let s = await Fr(o, r);
-        return s.links ? s.links() : [];
-      }
-      return [];
-    })
-  );
-  return Br(
-    a.flat(1).filter(Dr).filter((n) => n.rel === "stylesheet" || n.rel === "preload").map(
-      (n) => n.rel === "stylesheet" ? { ...n, rel: "prefetch", as: "style" } : { ...n, rel: "prefetch" }
-    )
-  );
-}
-function Me(e, t, r, a, n, o) {
-  let s = (l, c) => r[c] ? l.route.id !== r[c].route.id : !0, u = (l, c) => {
-    var d;
-    return (
-      // param change, /users/123 -> /users/456
-      r[c].pathname !== l.pathname || // splat param changed, which is not present in match.path
-      // e.g. /files/images/avatar.jpg -> files/finances.xls
-      ((d = r[c].route.path) == null ? void 0 : d.endsWith("*")) && r[c].params["*"] !== l.params["*"]
-    );
-  };
-  return o === "assets" ? t.filter(
-    (l, c) => s(l, c) || u(l, c)
-  ) : o === "data" ? t.filter((l, c) => {
-    var m;
-    let d = a.routes[l.route.id];
-    if (!d || !d.hasLoader)
-      return !1;
-    if (s(l, c) || u(l, c))
-      return !0;
-    if (l.route.shouldRevalidate) {
-      let h = l.route.shouldRevalidate({
-        currentUrl: new URL(
-          n.pathname + n.search + n.hash,
-          window.origin
-        ),
-        currentParams: ((m = r[0]) == null ? void 0 : m.params) || {},
-        nextUrl: new URL(e, window.origin),
-        nextParams: l.params,
-        defaultShouldRevalidate: !0
-      });
-      if (typeof h == "boolean")
-        return h;
-    }
-    return !0;
-  }) : [];
-}
-function Tr(e, t, { includeHydrateFallback: r } = {}) {
-  return Mr(
-    e.map((a) => {
-      let n = t.routes[a.route.id];
-      if (!n) return [];
-      let o = [n.module];
-      return n.clientActionModule && (o = o.concat(n.clientActionModule)), n.clientLoaderModule && (o = o.concat(n.clientLoaderModule)), r && n.hydrateFallbackModule && (o = o.concat(n.hydrateFallbackModule)), n.imports && (o = o.concat(n.imports)), o;
-    }).flat(1)
-  );
-}
-function Mr(e) {
-  return [...new Set(e)];
-}
-function Wr(e) {
-  let t = {}, r = Object.keys(e).sort();
-  for (let a of r)
-    t[a] = e[a];
-  return t;
-}
-function Br(e, t) {
-  let r = /* @__PURE__ */ new Set();
-  return new Set(t), e.reduce((a, n) => {
-    let o = JSON.stringify(Wr(n));
-    return r.has(o) || (r.add(o), a.push({ key: o, link: n })), a;
-  }, []);
-}
-function lt() {
-  let e = f.useContext(q);
-  return Oe(
-    e,
-    "You must render this element inside a <DataRouterContext.Provider> element"
-  ), e;
-}
-function Hr() {
-  let e = f.useContext(ce);
-  return Oe(
-    e,
-    "You must render this element inside a <DataRouterStateContext.Provider> element"
-  ), e;
-}
-var Ie = f.createContext(void 0);
-Ie.displayName = "FrameworkContext";
-function st() {
-  let e = f.useContext(Ie);
-  return Oe(
-    e,
-    "You must render this element inside a <HydratedRouter> element"
-  ), e;
-}
-function Ar(e, t) {
-  let r = f.useContext(Ie), [a, n] = f.useState(!1), [o, s] = f.useState(!1), { onFocus: u, onBlur: l, onMouseEnter: c, onMouseLeave: d, onTouchStart: m } = t, h = f.useRef(null);
-  f.useEffect(() => {
-    if (e === "render" && s(!0), e === "viewport") {
-      let v = (p) => {
-        p.forEach((x) => {
-          s(x.isIntersecting);
-        });
-      }, C = new IntersectionObserver(v, { threshold: 0.5 });
-      return h.current && C.observe(h.current), () => {
-        C.disconnect();
-      };
-    }
-  }, [e]), f.useEffect(() => {
-    if (a) {
-      let v = setTimeout(() => {
-        s(!0);
-      }, 100);
-      return () => {
-        clearTimeout(v);
-      };
-    }
-  }, [a]);
-  let b = () => {
-    n(!0);
-  }, g = () => {
-    n(!1), s(!1);
-  };
-  return r ? e !== "intent" ? [o, h, {}] : [
-    o,
-    h,
-    {
-      onFocus: Z(u, b),
-      onBlur: Z(l, g),
-      onMouseEnter: Z(c, b),
-      onMouseLeave: Z(d, g),
-      onTouchStart: Z(m, b)
-    }
-  ] : [!1, h, {}];
-}
-function Z(e, t) {
-  return (r) => {
-    e && e(r), r.defaultPrevented || t(r);
-  };
-}
-function Ur({
-  page: e,
-  ...t
-}) {
-  let { router: r } = lt(), a = f.useMemo(
-    () => Ge(r.routes, e, r.basename),
-    [r.routes, e, r.basename]
-  );
-  return a ? /* @__PURE__ */ f.createElement(Vr, { page: e, matches: a, ...t }) : null;
-}
-function _r(e) {
-  let { manifest: t, routeModules: r } = st(), [a, n] = f.useState([]);
-  return f.useEffect(() => {
-    let o = !1;
-    return zr(e, t, r).then(
-      (s) => {
-        o || n(s);
-      }
-    ), () => {
-      o = !0;
-    };
-  }, [e, t, r]), a;
-}
-function Vr({
-  page: e,
-  matches: t,
-  ...r
-}) {
-  let a = V(), { manifest: n, routeModules: o } = st(), { basename: s } = lt(), { loaderData: u, matches: l } = Hr(), c = f.useMemo(
-    () => Me(
-      e,
-      t,
-      l,
-      n,
-      a,
-      "data"
-    ),
-    [e, t, l, n, a]
-  ), d = f.useMemo(
-    () => Me(
-      e,
-      t,
-      l,
-      n,
-      a,
-      "assets"
-    ),
-    [e, t, l, n, a]
-  ), m = f.useMemo(() => {
-    if (e === a.pathname + a.search + a.hash)
-      return [];
-    let g = /* @__PURE__ */ new Set(), v = !1;
-    if (t.forEach((p) => {
-      var y;
-      let x = n.routes[p.route.id];
-      !x || !x.hasLoader || (!c.some((j) => j.route.id === p.route.id) && p.route.id in u && ((y = o[p.route.id]) != null && y.shouldRevalidate) || x.hasClientLoader ? v = !0 : g.add(p.route.id));
-    }), g.size === 0)
-      return [];
-    let C = Ir(e, s, "data");
-    return v && g.size > 0 && C.searchParams.set(
-      "_routes",
-      t.filter((p) => g.has(p.route.id)).map((p) => p.route.id).join(",")
-    ), [C.pathname + C.search];
-  }, [
-    s,
-    u,
-    a,
-    n,
-    c,
-    t,
-    e,
-    o
-  ]), h = f.useMemo(
-    () => Tr(d, n),
-    [d, n]
-  ), b = _r(d);
-  return /* @__PURE__ */ f.createElement(f.Fragment, null, m.map((g) => /* @__PURE__ */ f.createElement("link", { key: g, rel: "prefetch", as: "fetch", href: g, ...r })), h.map((g) => /* @__PURE__ */ f.createElement("link", { key: g, rel: "modulepreload", href: g, ...r })), b.map(({ key: g, link: v }) => (
-    // these don't spread `linkProps` because they are full link descriptors
-    // already with their own props
-    /* @__PURE__ */ f.createElement("link", { key: g, ...v })
-  )));
-}
-function Jr(...e) {
-  return (t) => {
-    e.forEach((r) => {
-      typeof r == "function" ? r(t) : r != null && (r.current = t);
-    });
-  };
-}
-var it = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u";
-try {
-  it && (window.__reactRouterVersion = // @ts-expect-error
-  "7.7.0");
-} catch {
-}
-var ut = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ct = f.forwardRef(
-  function({
-    onClick: t,
-    discover: r = "render",
-    prefetch: a = "none",
-    relative: n,
-    reloadDocument: o,
-    replace: s,
-    state: u,
-    target: l,
-    to: c,
-    preventScrollReset: d,
-    viewTransition: m,
-    ...h
-  }, b) {
-    let { basename: g } = f.useContext(W), v = typeof c == "string" && ut.test(c), C, p = !1;
-    if (typeof c == "string" && v && (C = c, it))
-      try {
-        let S = new URL(window.location.href), I = c.startsWith("//") ? new URL(S.protocol + c) : new URL(c), H = _(I.pathname, g);
-        I.origin === S.origin && H != null ? c = H + I.search + I.hash : p = !0;
-      } catch {
-        M(
-          !1,
-          `<Link to="${c}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
-        );
-      }
-    let x = cr(c, { relative: n }), [y, j, L] = Ar(
-      a,
-      h
-    ), F = Gr(c, {
-      replace: s,
-      state: u,
-      target: l,
-      preventScrollReset: d,
-      relative: n,
-      viewTransition: m
-    });
-    function k(S) {
-      t && t(S), S.defaultPrevented || F(S);
-    }
-    let D = (
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
-      /* @__PURE__ */ f.createElement(
-        "a",
-        {
-          ...h,
-          ...L,
-          href: C || x,
-          onClick: p || o ? t : k,
-          ref: Jr(b, j),
-          target: l,
-          "data-discover": !v && r === "render" ? "true" : void 0
-        }
-      )
-    );
-    return y && !v ? /* @__PURE__ */ f.createElement(f.Fragment, null, D, /* @__PURE__ */ f.createElement(Ur, { page: x })) : D;
-  }
-);
-ct.displayName = "Link";
-var Kr = f.forwardRef(
-  function({
-    "aria-current": t = "page",
-    caseSensitive: r = !1,
-    className: a = "",
-    end: n = !1,
-    style: o,
-    to: s,
-    viewTransition: u,
-    children: l,
-    ...c
-  }, d) {
-    let m = re(s, { relative: c.relative }), h = V(), b = f.useContext(ce), { navigator: g, basename: v } = f.useContext(W), C = b != null && // Conditional usage is OK here because the usage of a data router is static
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    tn(m) && u === !0, p = g.encodeLocation ? g.encodeLocation(m).pathname : m.pathname, x = h.pathname, y = b && b.navigation && b.navigation.location ? b.navigation.location.pathname : null;
-    r || (x = x.toLowerCase(), y = y ? y.toLowerCase() : null, p = p.toLowerCase()), y && v && (y = _(y, v) || y);
-    const j = p !== "/" && p.endsWith("/") ? p.length - 1 : p.length;
-    let L = x === p || !n && x.startsWith(p) && x.charAt(j) === "/", F = y != null && (y === p || !n && y.startsWith(p) && y.charAt(p.length) === "/"), k = {
-      isActive: L,
-      isPending: F,
-      isTransitioning: C
-    }, D = L ? t : void 0, S;
-    typeof a == "function" ? S = a(k) : S = [
-      a,
-      L ? "active" : null,
-      F ? "pending" : null,
-      C ? "transitioning" : null
-    ].filter(Boolean).join(" ");
-    let I = typeof o == "function" ? o(k) : o;
-    return /* @__PURE__ */ f.createElement(
-      ct,
-      {
-        ...c,
-        "aria-current": D,
-        className: S,
-        ref: d,
-        style: I,
-        to: s,
-        viewTransition: u
-      },
-      typeof l == "function" ? l(k) : l
-    );
-  }
-);
-Kr.displayName = "NavLink";
-var Yr = f.forwardRef(
-  ({
-    discover: e = "render",
-    fetcherKey: t,
-    navigate: r,
-    reloadDocument: a,
-    replace: n,
-    state: o,
-    method: s = oe,
-    action: u,
-    onSubmit: l,
-    relative: c,
-    preventScrollReset: d,
-    viewTransition: m,
-    ...h
-  }, b) => {
-    let g = Zr(), v = en(u, { relative: c }), C = s.toLowerCase() === "get" ? "get" : "post", p = typeof u == "string" && ut.test(u), x = (y) => {
-      if (l && l(y), y.defaultPrevented) return;
-      y.preventDefault();
-      let j = y.nativeEvent.submitter, L = (j == null ? void 0 : j.getAttribute("formmethod")) || s;
-      g(j || y.currentTarget, {
-        fetcherKey: t,
-        method: L,
-        navigate: r,
-        replace: n,
-        state: o,
-        relative: c,
-        preventScrollReset: d,
-        viewTransition: m
-      });
-    };
-    return /* @__PURE__ */ f.createElement(
-      "form",
-      {
-        ref: b,
-        method: C,
-        action: v,
-        onSubmit: a ? l : x,
-        ...h,
-        "data-discover": !p && e === "render" ? "true" : void 0
-      }
-    );
-  }
-);
-Yr.displayName = "Form";
-function qr(e) {
-  return `${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
-}
-function dt(e) {
-  let t = f.useContext(q);
-  return $(t, qr(e)), t;
-}
-function Gr(e, {
-  target: t,
-  replace: r,
-  state: a,
-  preventScrollReset: n,
-  relative: o,
-  viewTransition: s
-} = {}) {
-  let u = nt(), l = V(), c = re(e, { relative: o });
-  return f.useCallback(
-    (d) => {
-      if (Rr(d, t)) {
-        d.preventDefault();
-        let m = r !== void 0 ? r : we(l) === we(c);
-        u(e, {
-          replace: m,
-          state: a,
-          preventScrollReset: n,
-          relative: o,
-          viewTransition: s
-        });
-      }
-    },
-    [
-      l,
-      u,
-      c,
-      r,
-      a,
-      t,
-      e,
-      n,
-      o,
-      s
-    ]
-  );
-}
-var Xr = 0, Qr = () => `__${String(++Xr)}__`;
-function Zr() {
-  let { router: e } = dt(
-    "useSubmit"
-    /* UseSubmit */
-  ), { basename: t } = f.useContext(W), r = wr();
-  return f.useCallback(
-    async (a, n = {}) => {
-      let { action: o, method: s, encType: u, formData: l, body: c } = Or(
-        a,
-        t
-      );
-      if (n.navigate === !1) {
-        let d = n.fetcherKey || Qr();
-        await e.fetch(d, r, n.action || o, {
-          preventScrollReset: n.preventScrollReset,
-          formData: l,
-          body: c,
-          formMethod: n.method || s,
-          formEncType: n.encType || u,
-          flushSync: n.flushSync
-        });
-      } else
-        await e.navigate(n.action || o, {
-          preventScrollReset: n.preventScrollReset,
-          formData: l,
-          body: c,
-          formMethod: n.method || s,
-          formEncType: n.encType || u,
-          replace: n.replace,
-          state: n.state,
-          fromRouteId: r,
-          flushSync: n.flushSync,
-          viewTransition: n.viewTransition
-        });
-    },
-    [e, t, r]
-  );
-}
-function en(e, { relative: t } = {}) {
-  let { basename: r } = f.useContext(W), a = f.useContext(B);
-  $(a, "useFormAction must be used inside a RouteContext");
-  let [n] = a.matches.slice(-1), o = { ...re(e || ".", { relative: t }) }, s = V();
-  if (e == null) {
-    o.search = s.search;
-    let u = new URLSearchParams(o.search), l = u.getAll("index");
-    if (l.some((d) => d === "")) {
-      u.delete("index"), l.filter((m) => m).forEach((m) => u.append("index", m));
-      let d = u.toString();
-      o.search = d ? `?${d}` : "";
-    }
-  }
-  return (!e || e === ".") && n.route.index && (o.search = o.search ? o.search.replace(/^\?/, "?index&") : "?index"), r !== "/" && (o.pathname = o.pathname === "/" ? r : A([r, o.pathname])), we(o);
-}
-function tn(e, t = {}) {
-  let r = f.useContext(et);
-  $(
-    r != null,
-    "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"
-  );
-  let { basename: a } = dt(
-    "useViewTransitionState"
-    /* useViewTransitionState */
-  ), n = re(e, { relative: t.relative });
-  if (!r.isTransitioning)
-    return !1;
-  let o = _(r.currentLocation.pathname, a) || r.currentLocation.pathname, s = _(r.nextLocation.pathname, a) || r.nextLocation.pathname;
-  return ie(n.pathname, s) != null || ie(n.pathname, o) != null;
-}
-const Nn = ({
-  children: e,
-  fallback: t = null,
-  redirectTo: r = "/"
+}, mt = ({
+  children: t,
+  onAuthenticated: s = null,
+  onLoading: n = null
 }) => {
-  const { isLoggedIn: a, loading: n } = Ae();
-  return n ? t : a ? /* @__PURE__ */ i.jsx(ot, { replace: !0, to: r }) : e;
-}, En = ({
-  children: e,
-  fallback: t = null,
-  redirectTo: r = "/login"
+  const { isLoggedIn: o, loading: r } = ce();
+  return r ? n : o ? s : t;
+}, ft = ({
+  children: t,
+  onLoading: s = null,
+  onUnauthenticated: n = null
 }) => {
-  const { isLoggedIn: a, loading: n } = Ae();
-  return n ? t : a ? e : /* @__PURE__ */ i.jsx(ot, { replace: !0, to: r });
+  const { isLoggedIn: o, loading: r } = ce();
+  return r ? s : o ? t : n;
 };
 export {
-  cn as OxAvatar,
-  xt as OxAvatarImage,
-  dn as OxAvatarText,
-  se as OxBadge,
-  De as OxButton,
-  fn as OxCard,
-  hn as OxCardContent,
-  pn as OxCardFooter,
-  mn as OxCardHeader,
-  xn as OxCheckbox,
-  je as OxDescription,
-  Rt as OxDropdown,
-  _e as OxDropdownContent,
-  St as OxDropdownFooter,
-  Ve as OxDropdownHeader,
-  Pt as OxDropdownItem,
-  gn as OxDropdownSeparator,
-  bn as OxDropdownShortcut,
-  Ye as OxDropdownTrigger,
-  Ne as OxErrorMessage,
-  Sn as OxForm,
-  Nn as OxGuestRoute,
-  U as OxIcon,
-  Rn as OxInput,
-  Ce as OxLabel,
-  vn as OxNotificationDropdown,
-  En as OxProtectedRoute,
-  yn as OxSelect,
-  wn as OxSelectLabel,
-  Ft as OxSelectOption,
-  Bt as OxSkeleton,
-  Cn as OxSkeletonText,
-  jn as OxTextarea
+  Re as OxAvatar,
+  je as OxAvatarImage,
+  et as OxAvatarText,
+  G as OxBadge,
+  oe as OxButton,
+  tt as OxCard,
+  rt as OxCardContent,
+  nt as OxCardFooter,
+  st as OxCardHeader,
+  ot as OxCheckbox,
+  se as OxDescription,
+  De as OxDropdown,
+  ue as OxDropdownContent,
+  $e as OxDropdownFooter,
+  xe as OxDropdownHeader,
+  We as OxDropdownItem,
+  lt as OxDropdownSeparator,
+  at as OxDropdownShortcut,
+  be as OxDropdownTrigger,
+  re as OxErrorMessage,
+  pt as OxForm,
+  mt as OxGuestRoute,
+  T as OxIcon,
+  gt as OxInput,
+  te as OxLabel,
+  it as OxNotificationDropdown,
+  ft as OxProtectedRoute,
+  ct as OxSelect,
+  dt as OxSelectLabel,
+  Pe as OxSelectOption,
+  qe as OxSkeleton,
+  ut as OxSkeletonText,
+  xt as OxTextarea
 };