@dimasbaguspm/versaur 0.0.56 → 0.0.58

package/dist/js/{image-rectangle-K9jmTTED.js → image-rectangle-CCvXv24a.js}

@@ -1,19 +1,19 @@
-import { c as x, j as a, a as f } from "./index-DOdDlCoL.js";
-import * as l from "react";
-import A, { createContext as B, useContext as O, forwardRef as m, useState as V, useEffect as I, useCallback as R, useRef as W, useId as re, cloneElement as ne } from "react";
-import { ChevronDown as se, ChevronRight as ae, LoaderCircleIcon as G, CheckIcon as oe, EllipsisVerticalIcon as ie, XIcon as le, ImageOff as ce } from "lucide-react";
-import de from "react-dom";
-import { S as ue } from "./skeleton-BNZyaRjo.js";
-const $ = B(
+import { j as r } from "./jsx-runtime-C5mzlN2N.js";
+import * as c from "react";
+import V, { createContext as O, useContext as W, forwardRef as h, useState as k, useRef as B, useCallback as L, useEffect as C, useId as re, cloneElement as ne } from "react";
+import { ChevronDown as ae, ChevronRight as se, LoaderCircleIcon as _, CheckIcon as oe, EllipsisVerticalIcon as ie, XIcon as le, ImageOff as ce } from "lucide-react";
+import { c as g, a as f } from "./index-BDtz_hQY.js";
+import { S as de } from "./skeleton-BRwIW26B.js";
+const F = O(
   null
-), D = () => {
-  const e = O($);
+), $ = () => {
+  const e = W(F);
   if (!e)
     throw new Error(
       "Accordion compound components must be used within Accordion"
     );
   return e;
-}, fe = x(
+}, ue = g(
   "border-b border-border bg-background overflow-hidden",
   {
     variants: {
@@ -26,7 +26,7 @@ const $ = B(
       disabled: !1
     }
   }
-), he = x(
+), fe = g(
   "flex items-center justify-between w-full p-4 text-left transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-light focus-visible:ring-inset",
   {
     variants: {
@@ -44,7 +44,7 @@ const $ = B(
       isOpen: !1
     }
   }
-), me = x(
+), me = g(
   "overflow-hidden transition-all duration-300",
   {
     variants: {
@@ -57,7 +57,7 @@ const $ = B(
       isOpen: !1
     }
   }
-), ge = x("p-4 pt-0"), xe = x("transition-transform duration-200", {
+), he = g("p-4 pt-0"), ge = g("transition-transform duration-200", {
   variants: {
     isOpen: {
       true: "rotate-180",
@@ -67,7 +67,7 @@ const $ = B(
   defaultVariants: {
     isOpen: !1
   }
-}), be = x("", {
+}), xe = g("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -138,48 +138,48 @@ const $ = B(
     ellipsis: !1,
     level: 1
   }
-}), X = m(
+}), G = h(
   ({
     level: e = 3,
-    color: t = "black",
-    hasUnderline: r = !1,
+    color: n = "black",
+    hasUnderline: a = !1,
     isCapitalize: s = !1,
-    hasMargin: n = !1,
+    hasMargin: t = !1,
     align: o = "left",
     italic: i = !1,
-    clamp: c = "none",
+    clamp: l = "none",
     ellipsis: d = !1,
-    className: h,
-    children: g,
-    ...u
+    className: u,
+    children: m,
+    ...x
   }, b) => {
-    const w = `h${e}`;
-    return /* @__PURE__ */ a.jsx(
-      w,
+    const p = `h${e}`;
+    return /* @__PURE__ */ r.jsx(
+      p,
       {
         ref: b,
         className: f(
-          be({
-            color: t,
-            hasUnderline: r,
+          xe({
+            color: n,
+            hasUnderline: a,
             isCapitalize: s,
-            hasMargin: n,
+            hasMargin: t,
             align: o,
             italic: i,
-            clamp: c,
+            clamp: l,
             ellipsis: d,
             level: e
           }),
-          h
+          u
         ),
-        ...u,
-        children: g
+        ...x,
+        children: m
       }
     );
   }
 );
-X.displayName = "Heading";
-const pe = x("inline-flex items-center justify-center", {
+G.displayName = "Heading";
+const pe = g("inline-flex items-center justify-center", {
   variants: {
     size: {
       xs: "w-3 h-3",
@@ -209,116 +209,320 @@ const pe = x("inline-flex items-center justify-center", {
     size: "md",
     color: "primary"
   }
-}), N = A.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...o }, i) {
-  return /* @__PURE__ */ a.jsx(
-    t,
+}), E = V.forwardRef(function({ as: n, color: a = "primary", size: s = "md", className: t, ...o }, i) {
+  return /* @__PURE__ */ r.jsx(
+    n,
     {
       ref: i,
-      className: pe({ color: r, size: s, className: n }),
+      className: pe({ color: a, size: s, className: t }),
       ...o
     }
   );
-}), we = m(function({ className: t, children: r, ...s }, n) {
-  return /* @__PURE__ */ a.jsx(
-    X,
+}), be = h(function({ className: n, children: a, ...s }, t) {
+  return /* @__PURE__ */ r.jsx(
+    G,
     {
-      ref: n,
+      ref: t,
       level: 4,
-      className: f("font-medium", t),
+      className: f("font-medium", n),
       ...s,
       color: "black",
-      children: r
+      children: a
     }
   );
-}), ve = m(function({ className: t, children: r, ...s }, n) {
-  const { isOpen: o } = D();
-  return /* @__PURE__ */ a.jsx(
+}), we = h(function({ className: n, children: a, ...s }, t) {
+  const { isOpen: o } = $();
+  return /* @__PURE__ */ r.jsx(
     "div",
     {
-      ref: n,
-      className: f(me({ isOpen: o }), t),
+      ref: t,
+      className: f(me({ isOpen: o }), n),
       ...s,
-      children: /* @__PURE__ */ a.jsx("div", { className: ge(), children: r })
+      children: /* @__PURE__ */ r.jsx("div", { className: he(), children: a })
     }
   );
-}), Y = m(function({ as: t, ...r }, s) {
-  const { isOpen: n } = D();
-  return /* @__PURE__ */ a.jsx(
-    N,
+}), U = h(function({ as: n, ...a }, s) {
+  const { isOpen: t } = $();
+  return /* @__PURE__ */ r.jsx(
+    E,
     {
       ref: s,
-      as: t,
+      as: n,
       color: "ghost",
       size: "sm",
-      className: xe({ isOpen: n }),
-      ...r
+      className: ge({ isOpen: t }),
+      ...a
     }
   );
-}), ye = m(
+}), ve = h(
   function({
-    title: t,
-    subtitle: r,
+    title: n,
+    subtitle: a,
     isDefaultOpen: s = !1,
-    disabled: n = !1,
+    disabled: t = !1,
     hasMargin: o,
     className: i,
-    children: c,
+    children: l,
     ...d
-  }, h) {
-    const [g, u] = V(s), b = () => {
-      n || u((p) => !p);
-    }, w = {
-      isOpen: g,
+  }, u) {
+    const [m, x] = k(s), b = () => {
+      t || x((w) => !w);
+    }, p = {
+      isOpen: m,
       toggle: b,
-      disabled: n
+      disabled: t
     };
-    return /* @__PURE__ */ a.jsx($.Provider, { value: w, children: /* @__PURE__ */ a.jsxs(
+    return /* @__PURE__ */ r.jsx(F.Provider, { value: p, children: /* @__PURE__ */ r.jsxs(
       "div",
       {
-        ref: h,
+        ref: u,
         className: f(
-          fe({ disabled: n }),
+          ue({ disabled: t }),
           i,
           o && "mb-4"
         ),
         ...d,
         children: [
-          /* @__PURE__ */ a.jsx(
+          /* @__PURE__ */ r.jsx(
             "div",
             {
               role: "button",
-              className: he({ disabled: n, isOpen: g }),
+              className: fe({ disabled: t, isOpen: m }),
               onClick: b,
-              "aria-disabled": n,
-              "aria-expanded": g,
-              children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
-                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
-                  /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: t }),
-                  r && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0", children: r })
+              "aria-disabled": t,
+              "aria-expanded": m,
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
+                /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
+                  /* @__PURE__ */ r.jsx("div", { className: "flex-1", children: n }),
+                  a && /* @__PURE__ */ r.jsx("div", { className: "flex-shrink-0", children: a })
                 ] }),
-                /* @__PURE__ */ a.jsx(Y, { as: se })
+                /* @__PURE__ */ r.jsx(U, { as: ae })
               ] })
             }
           ),
-          /* @__PURE__ */ a.jsx(
+          /* @__PURE__ */ r.jsx(
             "div",
             {
               className: f(
                 "overflow-hidden transition-all duration-300",
-                g ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+                m ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
               ),
-              children: /* @__PURE__ */ a.jsx("div", { className: "p-4 pt-2", children: c })
+              children: /* @__PURE__ */ r.jsx("div", { className: "p-4 pt-2", children: l })
             }
           )
         ]
       }
     ) });
   }
-), Qt = Object.assign(ye, {
-  Title: we,
-  Content: ve,
-  Icon: Y
-}), je = x(
+), Ft = Object.assign(ve, {
+  Title: be,
+  Content: we,
+  Icon: U
+}), ye = g(
+  [
+    // Base styles
+    "fixed",
+    "overflow-auto"
+  ],
+  {
+    variants: {
+      maxWidth: {
+        xs: "max-w-xs",
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        full: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      maxWidth: "sm"
+    }
+  }
+);
+function je(e, n, a = "bottom", s = 8) {
+  const t = e.getBoundingClientRect(), o = n.getBoundingClientRect();
+  let i = 0, l = 0;
+  switch (a) {
+    // Top placements
+    case "top":
+      i = t.top - o.height - s, l = t.left + t.width / 2 - o.width / 2;
+      break;
+    case "top-left":
+      i = t.top - o.height - s, l = t.left;
+      break;
+    case "top-right":
+      i = t.top - o.height - s, l = t.right - o.width;
+      break;
+    // Right placements
+    case "right":
+      i = t.top + t.height / 2 - o.height / 2, l = t.right + s;
+      break;
+    case "right-top":
+      i = t.top, l = t.right + s;
+      break;
+    case "right-bottom":
+      i = t.bottom - o.height, l = t.right + s;
+      break;
+    // Bottom placements
+    case "bottom":
+      i = t.bottom + s, l = t.left + t.width / 2 - o.width / 2;
+      break;
+    case "bottom-left":
+      i = t.bottom + s, l = t.left;
+      break;
+    case "bottom-right":
+      i = t.bottom + s, l = t.right - o.width;
+      break;
+    // Left placements
+    case "left":
+      i = t.top + t.height / 2 - o.height / 2, l = t.left - o.width - s;
+      break;
+    case "left-top":
+      i = t.top, l = t.left - o.width - s;
+      break;
+    case "left-bottom":
+      i = t.bottom - o.height, l = t.left - o.width - s;
+      break;
+  }
+  const d = window.innerWidth, u = window.innerHeight, m = 8;
+  return l + o.width > d - m && (l = d - o.width - m), l < m && (l = m), i + o.height > u - m && (a.startsWith("bottom") ? i = t.top - o.height - s : i < m && (i = m)), i < m && (a.startsWith("top") ? i = t.bottom + s : i = m), {
+    top: `${Math.max(m, i)}px`,
+    left: `${Math.max(m, l)}px`,
+    margin: 0
+  };
+}
+function ke(e, n, a, s) {
+  const t = B(null), [o, i] = k(!1), l = n !== void 0, d = l ? n : o, u = L(() => {
+    t.current && t.current.showPopover?.();
+  }, []), m = L(() => {
+    t.current && t.current.hidePopover?.();
+  }, []), x = L(() => {
+    t.current && t.current.togglePopover?.();
+  }, []), b = L(
+    (p = "toggle") => ({
+      popoverTarget: e,
+      popoverTargetAction: p
+    }),
+    [e]
+  );
+  return C(() => {
+    const p = t.current;
+    if (!p) return;
+    const w = (v) => {
+      const y = v.newState === "open";
+      l || i(y), y && a ? a() : !y && s && s();
+    };
+    return p.addEventListener("toggle", w), () => {
+      p.removeEventListener("toggle", w);
+    };
+  }, [l, a, s]), C(() => {
+    if (!l || !t.current) return;
+    const p = t.current;
+    if (!p.showPopover || !p.hidePopover) return;
+    let w = !1;
+    try {
+      w = p.matches(":popover-open");
+    } catch {
+    }
+    n && !w ? u() : !n && w && m();
+  }, [n, l, u, m]), {
+    getTriggerProps: b,
+    show: u,
+    hide: m,
+    toggle: x,
+    isOpen: d,
+    popoverRef: t
+  };
+}
+const Ne = (...e) => (n) => {
+  e.forEach((a) => {
+    typeof a == "function" ? a(n) : a && "current" in a && (a.current = n);
+  });
+}, D = h(
+  ({
+    id: e,
+    children: n,
+    isOpen: a,
+    onOpen: s,
+    onClose: t,
+    anchor: o,
+    popover: i = "auto",
+    placement: l = "bottom",
+    triggerRef: d,
+    gap: u = 8,
+    maxWidth: m = "sm",
+    className: x,
+    style: b,
+    ...p
+  }, w) => {
+    const { popoverRef: v, isOpen: N } = ke(
+      e,
+      a,
+      s,
+      t
+    ), [y, I] = k(
+      {}
+    ), [A, S] = k(!1);
+    C(() => {
+      if (!d?.current || !v.current)
+        return;
+      const R = () => {
+        if (!d.current || !v.current) return;
+        const te = je(
+          d.current,
+          v.current,
+          l,
+          u
+        );
+        I(te);
+      };
+      N ? (S(!1), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          R(), requestAnimationFrame(() => {
+            S(!0);
+          });
+        });
+      })) : (S(!1), R());
+      const M = () => {
+        N && R();
+      };
+      return window.addEventListener("scroll", M, !0), window.addEventListener("resize", M), () => {
+        window.removeEventListener("scroll", M, !0), window.removeEventListener("resize", M);
+      };
+    }, [d, v, l, u, N]);
+    const ee = {
+      ...y,
+      ...b,
+      // Hide until positioned to prevent flash
+      ...A ? {} : {
+        opacity: 0,
+        pointerEvents: "none",
+        transition: "none"
+      }
+    };
+    return /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        ...p,
+        ref: Ne(w, v),
+        id: e,
+        popover: i,
+        className: f(ye({ maxWidth: m }), x),
+        style: ee,
+        ...o && { anchor: o },
+        children: n
+      }
+    );
+  }
+);
+D.displayName = "Popover";
+const Ee = (e, n = "toggle") => ({
+  popoverTarget: e,
+  popoverTargetAction: n
+}), Ce = Object.assign(D, {
+  getTriggerProps: Ee
+}), ze = g(
   "group flex items-center justify-between transition-all duration-200 w-full",
   {
     variants: {
@@ -337,7 +541,7 @@ const pe = x("inline-flex items-center justify-center", {
       as: "button"
     }
   }
-), ke = x(
+), Ve = g(
   "bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center group-hover:from-primary-soft group-hover:to-primary-light duration-200",
   {
     variants: {
@@ -351,7 +555,7 @@ const pe = x("inline-flex items-center justify-center", {
       size: "md"
     }
   }
-), Ne = x(
+), Ie = g(
   "inline-flex items-center justify-center text-ghost-bold transition-colors duration-200",
   {
     variants: {
@@ -365,7 +569,7 @@ const pe = x("inline-flex items-center justify-center", {
       size: "md"
     }
   }
-), Ee = x("", {
+), Ae = g("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -434,22 +638,22 @@ const pe = x("inline-flex items-center justify-center", {
     ellipsis: !1,
     as: "span"
   }
-}), y = m(
+}), j = h(
   ({
     as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
+    color: n = "ghost",
+    hasUnderline: a = !1,
     isCapitalize: s = !1,
-    align: n = "left",
+    align: t = "left",
     italic: o = !1,
     clamp: i = "none",
-    ellipsis: c = !1,
+    ellipsis: l = !1,
     fontSize: d,
-    fontWeight: h,
-    className: g,
-    children: u,
+    fontWeight: u,
+    className: m,
+    children: x,
     ...b
-  }, w) => {
+  }, p) => {
     const v = [
       "h1",
       "h2",
@@ -460,90 +664,90 @@ const pe = x("inline-flex items-center justify-center", {
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", E = d ? `text-${d}` : "", C = h ? `font-${h}` : "";
-    return /* @__PURE__ */ a.jsx(
+    ].includes(e) ? e : "span", N = d ? `text-${d}` : "", y = u ? `font-${u}` : "";
+    return /* @__PURE__ */ r.jsx(
       e,
       {
-        ref: w,
+        ref: p,
         className: f(
-          Ee({
-            color: t,
-            hasUnderline: r,
+          Ae({
+            color: n,
+            hasUnderline: a,
             isCapitalize: s,
-            align: n,
+            align: t,
             italic: o,
             clamp: i,
-            ellipsis: c,
+            ellipsis: l,
             // @ts-expect-error - `as` is not a valid variant
             as: v
           }),
-          E,
-          C,
-          g
+          N,
+          y,
+          m
         ),
         ...b,
-        children: u
+        children: x
       }
     );
   }
-), Ce = m(
-  ({ children: e, className: t }, r) => /* @__PURE__ */ a.jsx(
+), Le = h(
+  ({ children: e, className: n }, a) => /* @__PURE__ */ r.jsx(
     "div",
     {
-      ref: r,
+      ref: a,
       className: f(
         "bg-background border border-border rounded-lg overflow-hidden",
         "divide-y divide-border",
-        t
+        n
       ),
       role: "group",
       children: e
     }
   )
-), ze = m(
+), Me = h(
   ({
     size: e = "md",
-    icon: t,
-    title: r,
+    icon: n,
+    title: a,
     subtitle: s,
-    badge: n,
+    badge: t,
     showArrow: o = !0,
     as: i = "button",
-    className: c,
+    className: l,
     ...d
-  }, h) => /* @__PURE__ */ a.jsxs(
+  }, u) => /* @__PURE__ */ r.jsxs(
     i,
     {
-      ref: h,
-      className: f(je({ size: e, as: i }), c),
+      ref: u,
+      className: f(ze({ size: e, as: i }), l),
       ...d,
       children: [
-        /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          t && /* @__PURE__ */ a.jsx("div", { className: f(ke({ size: e })), children: t }),
-          /* @__PURE__ */ a.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
-              /* @__PURE__ */ a.jsx(
-                y,
+        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
+          n && /* @__PURE__ */ r.jsx("div", { className: f(Ve({ size: e })), children: n }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
+              /* @__PURE__ */ r.jsx(
+                j,
                 {
                   as: "span",
                   fontSize: e === "sm" ? "sm" : "base",
                   fontWeight: "semibold",
                   color: "ghost",
                   className: "text-left leading-normal",
-                  children: r
+                  children: a
                 }
               ),
-              n && /* @__PURE__ */ a.jsx(
+              t && /* @__PURE__ */ r.jsx(
                 "div",
                 {
                   className: "flex flex-wrap items-center flex-row justify-start gap-3",
                   role: "group",
-                  children: n
+                  children: t
                 }
               )
             ] }),
-            s && /* @__PURE__ */ a.jsx(
-              y,
+            s && /* @__PURE__ */ r.jsx(
+              j,
               {
                 as: "p",
                 fontSize: "sm",
@@ -554,11 +758,11 @@ const pe = x("inline-flex items-center justify-center", {
             )
           ] })
         ] }),
-        o && /* @__PURE__ */ a.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ a.jsx(
-          N,
+        o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ r.jsx(
+          E,
           {
-            as: ae,
-            className: f(Ne({ size: e })),
+            as: se,
+            className: f(Ie({ size: e })),
             color: "ghost",
             "aria-hidden": "true"
           }
@@ -566,9 +770,9 @@ const pe = x("inline-flex items-center justify-center", {
       ]
     }
   )
-), Zt = Object.assign(ze, {
-  Group: Ce
-}), Ve = x(
+), $t = Object.assign(Me, {
+  Group: Le
+}), Se = g(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -689,7 +893,7 @@ const pe = x("inline-flex items-center justify-center", {
       color: "neutral"
     }
   }
-), Ie = x(
+), Re = g(
   "flex-shrink-0 flex justify-center items-center ",
   {
     variants: {
@@ -703,32 +907,32 @@ const pe = x("inline-flex items-center justify-center", {
       size: "md"
     }
   }
-), J = m(
-  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: f(Ie(), e), ...r, children: t })
-), Me = m(
+), X = h(
+  ({ className: e, children: n, ...a }, s) => /* @__PURE__ */ r.jsx("div", { ref: s, className: f(Re(), e), ...a, children: n })
+), Oe = h(
   ({
     variant: e = "default",
-    color: t = "neutral",
-    icon: r,
+    color: n = "neutral",
+    icon: a,
     className: s,
-    children: n,
+    children: t,
     ...o
-  }, i) => /* @__PURE__ */ a.jsxs(
+  }, i) => /* @__PURE__ */ r.jsxs(
     "div",
     {
       ref: i,
       role: "alert",
-      className: f(Ve({ variant: e, color: t }), s),
+      className: f(Se({ variant: e, color: n }), s),
       ...o,
       children: [
-        r && /* @__PURE__ */ a.jsx(J, { children: r }),
-        /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: n })
+        a && /* @__PURE__ */ r.jsx(X, { children: a }),
+        /* @__PURE__ */ r.jsx("div", { className: "flex-1", children: t })
       ]
     }
   )
-), er = Object.assign(Me, {
-  Icon: J
-}), Ae = x(
+), Gt = Object.assign(Oe, {
+  Icon: X
+}), We = g(
   [
     "inline-flex items-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
     // pseudo selectors for anchor
@@ -785,54 +989,54 @@ const pe = x("inline-flex items-center justify-center", {
       quiet: !1
     }
   }
-), tr = m(
+), Ut = h(
   ({
     children: e,
-    className: t,
-    color: r = "primary",
+    className: n,
+    color: a = "primary",
     fontSize: s = "base",
-    fontWeight: n = "medium",
+    fontWeight: t = "medium",
     quiet: o = !1,
     ...i
-  }, c) => /* @__PURE__ */ a.jsx(
+  }, l) => /* @__PURE__ */ r.jsx(
     "a",
     {
-      ref: c,
+      ref: l,
       className: f(
-        Ae({ color: r, fontSize: s, fontWeight: n, quiet: o }),
-        t
+        We({ color: a, fontSize: s, fontWeight: t, quiet: o }),
+        n
       ),
       ...i,
       children: e
     }
   )
-), Le = m(
-  function({ title: t, children: r, className: s, hasMargin: n, ...o }, i) {
-    return /* @__PURE__ */ a.jsxs(
+), Be = h(
+  function({ title: n, children: a, className: s, hasMargin: t, ...o }, i) {
+    return /* @__PURE__ */ r.jsxs(
       "div",
       {
         ref: i,
-        className: f("space-y-1", s, n && "mb-4"),
+        className: f("space-y-1", s, t && "mb-4"),
         ...o,
         children: [
-          /* @__PURE__ */ a.jsx(
-            y,
+          /* @__PURE__ */ r.jsx(
+            j,
             {
               as: "h4",
               fontSize: "xs",
               fontWeight: "normal",
               color: "gray",
               className: "leading-none",
-              children: t
+              children: n
             }
           ),
-          /* @__PURE__ */ a.jsx(y, { as: "p", fontSize: "sm", fontWeight: "normal", children: r })
+          /* @__PURE__ */ r.jsx(j, { as: "p", fontSize: "sm", fontWeight: "normal", children: a })
         ]
       }
     );
   }
 );
-function Se(e = 1) {
+function Te(e = 1) {
   switch (e) {
     case 1:
       return "col-span-1";
@@ -862,7 +1066,7 @@ function Se(e = 1) {
       return "col-span-1";
   }
 }
-function We(e = 4) {
+function qe(e = 4) {
   switch (e) {
     case 1:
       return "grid-cols-1";
@@ -892,25 +1096,25 @@ function We(e = 4) {
       return "grid-cols-4";
   }
 }
-const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }, i) {
-  const c = Se(s);
-  return /* @__PURE__ */ a.jsx("li", { ref: i, className: f(c, r), ...o, children: /* @__PURE__ */ a.jsx(Le, { title: n, children: t }) });
-}), Oe = m(
-  function({ children: t, className: r, columns: s = 4, ...n }, o) {
-    const i = We(s);
-    return /* @__PURE__ */ a.jsx(
+const Pe = h(function({ children: n, className: a, span: s = 1, title: t, ...o }, i) {
+  const l = Te(s);
+  return /* @__PURE__ */ r.jsx("li", { ref: i, className: f(l, a), ...o, children: /* @__PURE__ */ r.jsx(Be, { title: t, children: n }) });
+}), He = h(
+  function({ children: n, className: a, columns: s = 4, ...t }, o) {
+    const i = qe(s);
+    return /* @__PURE__ */ r.jsx(
       "ul",
       {
         ref: o,
-        className: f("grid gap-4", i, r),
-        ...n,
-        children: t
+        className: f("grid gap-4", i, a),
+        ...t,
+        children: n
       }
     );
   }
-), rr = Object.assign(Oe, {
-  Item: Be
-}), He = x(
+), Dt = Object.assign(He, {
+  Item: Pe
+}), _e = g(
   "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
   {
     variants: {
@@ -950,55 +1154,55 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
       shape: "circle"
     }
   }
-), Te = x(
+), Fe = g(
   "absolute inset-0 h-full w-full object-cover"
-), qe = m(
+), $e = h(
   ({
     variant: e = "primary",
-    size: t = "md",
-    shape: r = "circle",
+    size: n = "md",
+    shape: a = "circle",
     className: s,
-    children: n,
+    children: t,
     ...o
-  }, i) => /* @__PURE__ */ a.jsx(
+  }, i) => /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: i,
-      className: f(He({ variant: e, size: t, shape: r }), s),
+      className: f(_e({ variant: e, size: n, shape: a }), s),
       ...o,
-      children: n
+      children: t
     }
   )
-), Pe = m(
-  ({ src: e, alt: t, className: r, onError: s, ...n }, o) => {
-    const [i, c] = V(!1);
-    I(() => {
-      c(!1);
+), Ge = h(
+  ({ src: e, alt: n, className: a, onError: s, ...t }, o) => {
+    const [i, l] = k(!1);
+    C(() => {
+      l(!1);
     }, [e]);
-    const d = R(
-      (h) => {
-        c(!0), s?.(h);
+    const d = L(
+      (u) => {
+        l(!0), s?.(u);
       },
       [s]
     );
-    return i ? null : /* @__PURE__ */ a.jsx(
+    return i ? null : /* @__PURE__ */ r.jsx(
       "img",
       {
         ref: o,
         src: e,
-        alt: t,
-        className: f(Te(), r),
+        alt: n,
+        className: f(Fe(), a),
         onError: d,
-        ...n
+        ...t
       }
     );
   }
-), nr = Object.assign(qe, {
+), Xt = Object.assign($e, {
   /**
    * AvatarImage sub-component for displaying images with fallback behavior
    */
-  Image: Pe
-}), _e = x(
+  Image: Ge
+}), Ue = g(
   "inline-flex items-center justify-center font-medium transition-all duration-200 select-none gap-1 min-h-[1.25rem]",
   {
     variants: {
@@ -1185,28 +1389,28 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
       iconOnly: !1
     }
   }
-), sr = m(
+), Jt = h(
   ({
     variant: e = "default",
-    shape: t = "square",
-    color: r = "primary",
+    shape: n = "square",
+    color: a = "primary",
     size: s = "md",
-    iconLeft: n,
+    iconLeft: t,
     iconRight: o,
     className: i,
-    children: c,
+    children: l,
     ...d
-  }, h) => {
-    const b = !(c != null && c !== "") && !!(n || o);
-    return /* @__PURE__ */ a.jsx(
+  }, u) => {
+    const b = !(l != null && l !== "") && !!(t || o);
+    return /* @__PURE__ */ r.jsx(
       "span",
       {
-        ref: h,
+        ref: u,
         className: f(
-          _e({
+          Ue({
             variant: e,
-            color: r,
-            shape: t,
+            color: a,
+            shape: n,
             size: s,
             iconOnly: b
           }),
@@ -1215,19 +1419,19 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
         ...d,
         children: b ? (
           // Icon-only mode: display only the icon
-          n || o
+          t || o
         ) : (
           // Normal mode: display icon(s) and text
-          /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-            n,
-            c,
+          /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            t,
+            l,
             o
           ] })
         )
       }
     );
   }
-), _ = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Fe = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Ue = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Re = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ l.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), Ge = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ l.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), $e = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), De = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Xe = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Ye = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Je = x("", {
+), H = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Spenicle"), /* @__PURE__ */ c.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), De = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Spenicle"), /* @__PURE__ */ c.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Xe = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Spenicle"), /* @__PURE__ */ c.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Je = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ c.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), Ke = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ c.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), Qe = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ c.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ c.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ c.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), Ye = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Notunic"), /* @__PURE__ */ c.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Ze = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Notunic"), /* @__PURE__ */ c.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), et = (e) => /* @__PURE__ */ c.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("title", null, "Notunic"), /* @__PURE__ */ c.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ c.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ c.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ c.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), tt = g("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -1240,45 +1444,45 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
   defaultVariants: {
     size: "md"
   }
-}), Ke = m(
-  ({ shape: e = "square", size: t, name: r = "spenicle", ...s }, n) => {
+}), rt = h(
+  ({ shape: e = "square", size: n, name: a = "spenicle", ...s }, t) => {
     const o = {
       spenicle: {
-        square: _,
-        rounded: Fe,
-        circle: Ue
+        square: H,
+        rounded: De,
+        circle: Xe
       },
       hub: {
-        square: Re,
-        rounded: Ge,
-        circle: $e
+        square: Je,
+        rounded: Ke,
+        circle: Qe
       },
       notunic: {
-        square: De,
-        rounded: Xe,
-        circle: Ye
+        square: Ye,
+        rounded: Ze,
+        circle: et
       }
-    }, c = (o[r] || o.spenicle)[e || "square"] || _;
-    return /* @__PURE__ */ a.jsx(
-      c,
+    }, l = (o[a] || o.spenicle)[e || "square"] || H;
+    return /* @__PURE__ */ r.jsx(
+      l,
       {
-        ref: n,
+        ref: t,
         ...s,
-        className: f("inline-block", Je({ size: t }))
+        className: f("inline-block", tt({ size: n }))
       }
     );
   }
-), ar = m(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ a.jsx(
+), Kt = h(
+  ({ name: e = "spenicle", size: n = "md", shape: a, ...s }, t) => /* @__PURE__ */ r.jsx(
     "span",
     {
-      ref: n,
+      ref: t,
       className: f("inline-flex items-center gap-2"),
       ...s,
-      children: /* @__PURE__ */ a.jsx(Ke, { name: e, shape: r, size: t, "aria-hidden": "true" })
+      children: /* @__PURE__ */ r.jsx(rt, { name: e, shape: a, size: n, "aria-hidden": "true" })
     }
   )
-), Qe = x(
+), nt = g(
   "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
   {
     variants: {
@@ -1303,45 +1507,45 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
       size: "md"
     }
   }
-), K = A.forwardRef(
+), J = V.forwardRef(
   function({
-    className: t,
-    variant: r = "primary",
+    className: n,
+    variant: a = "primary",
     size: s = "md",
-    disabled: n = !1,
+    disabled: t = !1,
     type: o = "button",
     busy: i,
-    children: c,
+    children: l,
     ...d
-  }, h) {
-    const g = s === "sm" ? "sm" : s === "lg" ? "md" : "sm", u = () => r === "primary" || r === "destructive" ? "white" : "inherit";
-    return /* @__PURE__ */ a.jsxs(
+  }, u) {
+    const m = s === "sm" ? "sm" : s === "lg" ? "md" : "sm", x = () => a === "primary" || a === "destructive" ? "white" : "inherit";
+    return /* @__PURE__ */ r.jsxs(
       "button",
       {
-        ref: h,
+        ref: u,
         type: o,
-        className: f(Qe({ variant: r, size: s }), t),
-        disabled: n || i,
-        "aria-disabled": n || i,
-        inert: n || i ? !0 : void 0,
+        className: f(nt({ variant: a, size: s }), n),
+        disabled: t || i,
+        "aria-disabled": t || i,
+        inert: t || i ? !0 : void 0,
         "aria-busy": i ? !0 : void 0,
         ...d,
         children: [
-          i && /* @__PURE__ */ a.jsx(
-            N,
+          i && /* @__PURE__ */ r.jsx(
+            E,
             {
-              as: G,
-              size: g,
-              color: u(),
+              as: _,
+              size: m,
+              color: x(),
               className: "animate-spin"
             }
           ),
-          c
+          l
         ]
       }
     );
   }
-), Ze = x(
+), at = g(
   "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer no-underline",
   {
     variants: {
@@ -1364,46 +1568,38 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
       size: "md"
     }
   }
-), or = A.forwardRef(function({
-  className: t,
-  variant: r = "primary",
+), Qt = V.forwardRef(function({
+  className: n,
+  variant: a = "primary",
   size: s = "md",
-  disabled: n = !1,
+  disabled: t = !1,
   children: o,
   href: i,
-  onClick: c,
+  onClick: l,
   ...d
-}, h) {
-  const g = (u) => {
-    if (n) {
-      u.preventDefault();
+}, u) {
+  const m = (x) => {
+    if (t) {
+      x.preventDefault();
       return;
     }
-    c?.(u);
+    l?.(x);
   };
-  return /* @__PURE__ */ a.jsx(
+  return /* @__PURE__ */ r.jsx(
     "a",
     {
-      ref: h,
-      href: n ? void 0 : i,
-      className: f(Ze({ variant: r, size: s }), t),
-      "aria-disabled": n ? !0 : void 0,
-      tabIndex: n ? -1 : void 0,
-      role: n ? "link" : void 0,
-      onClick: g,
+      ref: u,
+      href: t ? void 0 : i,
+      className: f(at({ variant: a, size: s }), n),
+      "aria-disabled": t ? !0 : void 0,
+      tabIndex: t ? -1 : void 0,
+      role: t ? "link" : void 0,
+      onClick: m,
       ...d,
       children: o
     }
   );
-}), et = ({
-  container: e,
-  children: t
-}) => {
-  if (typeof window > "u" || typeof document > "u")
-    return /* @__PURE__ */ a.jsx(a.Fragment, { children: t });
-  const r = e ?? document.body;
-  return r ? de.createPortal(t, r) : /* @__PURE__ */ a.jsx(a.Fragment, { children: t });
-}, tt = x(
+}), st = g(
   "z-70 min-w-56 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform shadow-lg",
   {
     variants: {
@@ -1421,274 +1617,29 @@ const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }
       open: !1
     }
   }
-);
-function F(e) {
-  const t = [];
-  let r = e.parentElement;
-  for (; r && r !== document.documentElement; ) {
-    const s = getComputedStyle(r);
-    (s.overflow === "auto" || s.overflow === "scroll" || s.overflowY === "auto" || s.overflowY === "scroll" || s.overflowX === "auto" || s.overflowX === "scroll") && t.push(r), r = r.parentElement;
-  }
-  return t.push(document.documentElement), t;
-}
-function rt(e, t) {
-  const r = e.getBoundingClientRect();
-  if (r.bottom < 0 || r.top > window.innerHeight || r.right < 0 || r.left > window.innerWidth)
-    return !1;
-  for (const s of t) {
-    if (s === document.documentElement) continue;
-    const n = s.getBoundingClientRect();
-    if (r.bottom < n.top || r.top > n.bottom || r.right < n.left || r.left > n.right)
-      return !1;
-  }
-  return !0;
-}
-function nt(e, t, r, s, n, o) {
-  if (e !== "auto")
-    return e;
-  const c = [
-    {
-      name: "bottom-start",
-      fits: r >= t.height && n >= t.width,
-      spaceUsed: r,
-      priority: 1
-    },
-    {
-      name: "bottom-end",
-      fits: r >= t.height && o >= t.width,
-      spaceUsed: r,
-      priority: 2
-    },
-    {
-      name: "top-start",
-      fits: s >= t.height && n >= t.width,
-      spaceUsed: s,
-      priority: 3
-    },
-    {
-      name: "top-end",
-      fits: s >= t.height && o >= t.width,
-      spaceUsed: s,
-      priority: 4
-    }
-  ].filter((d) => d.fits);
-  return c.length > 0 ? c.sort((d, h) => d.priority - h.priority)[0].name : r >= s ? n >= o ? "bottom-start" : "bottom-end" : n >= o ? "top-start" : "top-end";
-}
-function st(e, t) {
-  const r = {};
-  switch (e) {
-    case "bottom-start":
-      r.top = t.bottom + 4, r.left = t.left;
-      break;
-    case "bottom-end":
-      r.top = t.bottom + 4, r.right = window.innerWidth - t.right;
-      break;
-    case "top-start":
-      r.bottom = window.innerHeight - t.top + 4, r.left = t.left;
-      break;
-    case "top-end":
-      r.bottom = window.innerHeight - t.top + 4, r.right = window.innerWidth - t.right;
-      break;
-  }
-  return r;
-}
-function at(e, t) {
-  const r = {};
-  switch (e) {
-    case "bottom-start":
-      r.top = t.height + 4, r.left = 0;
-      break;
-    case "bottom-end":
-      r.top = t.height + 4, r.right = 0;
-      break;
-    case "top-start":
-      r.bottom = t.height + 4, r.left = 0;
-      break;
-    case "top-end":
-      r.bottom = t.height + 4, r.right = 0;
-      break;
-  }
-  return r;
-}
-function ot(e, t, r, s, n) {
-  const o = {
-    top: t.startsWith("bottom") ? r.bottom + 4 : r.top - s.height - 4,
-    left: t.endsWith("start") ? r.left : r.right - s.width,
-    width: s.width,
-    height: s.height
-  };
-  if (o.left < n.left + 8) {
-    const c = n.left + 8 - o.left;
-    t.endsWith("start") ? e.left = (e.left || 0) + c : e.right = (e.right || 0) - c;
-  } else if (o.left + o.width > n.right - 8) {
-    const c = o.left + o.width - (n.right - 8);
-    t.endsWith("start") ? e.left = (e.left || 0) - c : e.right = (e.right || 0) + c;
-  }
-  let i;
-  if (t.startsWith("bottom")) {
-    const c = Math.max(
-      50,
-      n.bottom - r.bottom - 16
-    );
-    s.height > c && (i = c);
-  } else {
-    const c = Math.max(
-      50,
-      r.top - n.top - 16
-    );
-    s.height > c && (i = c);
-  }
-  return { position: e, maxHeight: i };
-}
-function it(e, t, r, s) {
-  const n = {
-    top: t.startsWith("bottom") ? r.height + 4 : -s.height - 4,
-    left: t.endsWith("start") ? 0 : -s.width,
-    width: s.width,
-    height: s.height
-  };
-  if (r.left + n.left < 8) {
-    const o = 8 - (r.left + n.left);
-    t.endsWith("start") ? e.left = (e.left || 0) + o : e.right = (e.right || 0) - o;
-  } else if (r.left + n.left + n.width > window.innerWidth - 8) {
-    const o = r.left + n.left + n.width - (window.innerWidth - 8);
-    t.endsWith("start") ? e.left = (e.left || 0) - o : e.right = (e.right || 0) + o;
-  }
-  return e;
-}
-function lt(e, t, r, s) {
-  I(() => {
-    if (!e) return;
-    function n(o) {
-      !t.current?.contains(o.target) && !r.current?.contains(o.target) && s();
-    }
-    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
-  }, [e, s, t, r]);
-}
-function ct(e) {
-  return e ? "getBoundingClientRect" in e ? e : "current" in e ? e.current : null : null;
-}
-function dt(e) {
-  return !e || e === document.documentElement ? {
-    top: 0,
-    bottom: window.innerHeight,
-    left: 0,
-    right: window.innerWidth
-  } : e.getBoundingClientRect();
-}
-function ut(e, t) {
-  return {
-    spaceBelow: t.bottom - e.bottom - 8,
-    spaceAbove: e.top - t.top - 8,
-    spaceRight: t.right - e.left - 8,
-    spaceLeft: e.right - t.left - 8
-  };
-}
-function ft(e) {
-  const t = e.style.visibility, r = e.style.position, s = e.style.opacity;
-  e.style.visibility = "hidden", e.style.position = "absolute", e.style.opacity = "0";
-  const n = e.getBoundingClientRect();
-  return e.style.visibility = t, e.style.position = r, e.style.opacity = s, n;
-}
-function ht(e, t, r, s = "bottom-start", n) {
-  const [o, i] = V({ isReady: !1 }), c = R(() => {
-    if (!e || !t.current) {
-      i({ isReady: !1 });
-      return;
-    }
-    if (!r.current) {
-      const z = setTimeout(() => {
-        i({ isReady: !1 });
-      }, 0);
-      return () => clearTimeout(z);
-    }
-    const d = t.current, h = r.current, g = F(d);
-    if (!rt(d, g)) {
-      i({ isReady: !1 });
-      return;
-    }
-    const u = d.getBoundingClientRect(), b = ct(n), w = dt(b), p = ft(h);
-    if (!p) {
-      i({ isReady: !1 });
-      return;
-    }
-    const { spaceBelow: v, spaceAbove: E, spaceRight: C, spaceLeft: L } = ut(u, w), k = nt(
-      s,
-      p,
-      v,
-      E,
-      C,
-      L
-    ), j = {};
-    if (n) {
-      j.position = "fixed";
-      const z = st(k, u);
-      Object.assign(j, z);
-      const { position: S, maxHeight: P } = ot(
-        z,
-        k,
-        u,
-        p,
-        w
-      );
-      Object.assign(j, S), P !== void 0 && (j.maxHeight = P);
-    } else {
-      j.position = "absolute";
-      const z = at(k, u);
-      Object.assign(j, z);
-      const S = it(
-        z,
-        k,
-        u,
-        p
-      );
-      Object.assign(j, S);
-    }
-    j.isReady = !0, i(j);
-  }, [e, s, t, r, n]);
-  return I(() => {
-    c();
-  }, [c]), I(() => {
-    if (!e || !t.current) return;
-    const d = t.current, h = F(d);
-    let g = !1;
-    const u = () => {
-      g || (requestAnimationFrame(() => {
-        c(), g = !1;
-      }), g = !0);
-    };
-    return h.forEach((b) => {
-      b === document.documentElement ? (window.addEventListener("scroll", u, { passive: !0 }), window.addEventListener("resize", u, { passive: !0 })) : b.addEventListener("scroll", u, { passive: !0 });
-    }), () => {
-      h.forEach((b) => {
-        b === document.documentElement ? (window.removeEventListener("scroll", u), window.removeEventListener("resize", u)) : b.removeEventListener("scroll", u);
-      });
-    };
-  }, [e, c, t]), o;
-}
-const Q = B(void 0), mt = Q.Provider, gt = () => {
-  const e = O(Q);
+), K = O(void 0), ot = K.Provider, it = () => {
+  const e = W(K);
   if (!e)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return e;
-}, xt = m(
-  ({ children: e }, t) => /* @__PURE__ */ a.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
-), bt = m(
-  ({ children: e, disabled: t, onClick: r, active: s, ...n }, o) => {
-    const { preserve: i, onClose: c } = gt(), d = (h) => {
-      r?.(h), i || c();
+}, lt = h(
+  ({ children: e }, n) => /* @__PURE__ */ r.jsx("ul", { ref: n, className: "flex flex-col gap-1", children: e })
+), ct = h(
+  ({ children: e, disabled: n, onClick: a, active: s, ...t }, o) => {
+    const { preserve: i, onClose: l } = it(), d = (u) => {
+      a?.(u), i || l();
     };
-    return /* @__PURE__ */ a.jsx("li", { ref: o, ...n, children: /* @__PURE__ */ a.jsxs(
-      K,
+    return /* @__PURE__ */ r.jsx("li", { ref: o, ...t, children: /* @__PURE__ */ r.jsxs(
+      J,
       {
         variant: "ghost",
         className: f("justify-start w-full gap-2"),
-        disabled: t,
+        disabled: n,
         onClick: d,
         children: [
           e,
-          s && /* @__PURE__ */ a.jsx(
-            N,
+          s && /* @__PURE__ */ r.jsx(
+            E,
             {
               as: oe,
               color: "inherit",
@@ -1700,134 +1651,78 @@ const Q = B(void 0), mt = Q.Provider, gt = () => {
       }
     ) });
   }
-);
-function pt(e) {
-  return {
-    top: e.top,
-    bottom: e.bottom,
-    left: e.left,
-    right: e.right,
-    maxHeight: e.maxHeight,
-    maxWidth: e.maxWidth,
-    position: e.position || "absolute",
-    overflowY: e.maxHeight ? "auto" : void 0,
-    overflowX: e.maxWidth ? "auto" : void 0
-  };
-}
-function U(e, t, r, s, n, o) {
-  return /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      id: e,
-      ref: t,
-      className: f(tt({ size: r, open: s })),
-      style: n,
-      role: "menu",
-      "aria-hidden": !s,
-      children: o
-    }
-  );
-}
-const wt = ({
+), dt = ({
   isOpen: e,
-  onOutsideClick: t,
-  size: r = "md",
+  onClose: n,
+  size: a = "md",
   content: s,
-  children: n,
-  placement: o = "auto",
-  container: i,
-  preserve: c
+  children: t,
+  placement: o = "bottom",
+  gap: i = 4,
+  preserve: l
 }) => {
-  const d = W(null), h = W(null), g = re();
-  lt(e, h, d, t);
-  const u = ht(
-    e,
-    d,
-    h,
-    o,
-    i || null
-  ), b = e && u.isReady, w = pt(u), p = !u.isReady && U(
-    g,
-    h,
-    r,
-    !1,
-    {
-      position: "absolute",
-      visibility: "hidden",
-      opacity: 0,
-      pointerEvents: "none"
-    },
-    s
-  ), v = u.isReady && U(
-    g,
-    h,
-    r,
-    !!b,
-    w,
-    s
-  ), E = u.position === "fixed" && v ? /* @__PURE__ */ a.jsx(et, { children: v }) : v;
-  return /* @__PURE__ */ a.jsx(
-    mt,
-    {
-      value: { onClose: t, preserve: !!c },
-      children: /* @__PURE__ */ a.jsxs("div", { className: "relative w-fit", children: [
-        ne(n, {
-          // @ts-expect-error: ref is valid for button or forwardRef components
-          ref: d,
-          "aria-haspopup": "menu",
-          "aria-expanded": e,
-          "aria-controls": g
-        }),
-        e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-          p,
-          E
-        ] })
-      ] })
-    }
-  );
-}, M = Object.assign(wt, {
-  Content: xt,
-  Item: bt
-}), vt = m(
-  (e, t) => {
+  const d = B(null), u = re();
+  return /* @__PURE__ */ r.jsx(ot, { value: { onClose: n, preserve: !!l }, children: /* @__PURE__ */ r.jsxs("div", { className: "relative w-fit", children: [
+    ne(t, {
+      // @ts-expect-error: ref is valid for button or forwardRef components
+      ref: d
+    }),
+    /* @__PURE__ */ r.jsx(
+      Ce,
+      {
+        id: u,
+        triggerRef: d,
+        isOpen: e,
+        onClose: n,
+        placement: o,
+        gap: i,
+        maxWidth: "sm",
+        className: f(st({ size: a, open: e })),
+        children: s
+      }
+    )
+  ] }) });
+}, z = Object.assign(dt, {
+  Content: lt,
+  Item: ct
+}), ut = h(
+  (e, n) => {
     const {
-      children: r,
+      children: a,
       onOpenChange: s,
-      onClick: n,
+      onClick: t,
       placement: o,
-      container: i,
-      preserve: c,
-      label: d,
-      ...h
-    } = e ?? {}, [g, u] = V(!1);
-    I(() => {
-      s?.(g);
-    }, [g, s]);
-    const b = () => {
-      u(!1);
-    }, w = (p) => {
-      p.stopPropagation(), u((v) => !v), n?.(p);
+      preserve: i,
+      label: l,
+      ...d
+    } = e ?? {}, [u, m] = k(!1);
+    C(() => {
+      s?.(u);
+    }, [u, s]);
+    const x = () => {
+      m(!1);
+    }, b = (p) => {
+      p.stopPropagation(), m((w) => !w), t?.(p);
     };
-    return /* @__PURE__ */ a.jsx(
-      M,
+    return /* @__PURE__ */ r.jsx(
+      z,
       {
-        isOpen: g,
-        onOutsideClick: b,
+        isOpen: u,
+        onClose: x,
         placement: o,
-        container: i,
-        preserve: c,
-        content: /* @__PURE__ */ a.jsx(M.Content, { children: r }),
-        children: /* @__PURE__ */ a.jsx(K, { ref: t, onClick: w, ...h, children: d })
+        preserve: i,
+        content: /* @__PURE__ */ r.jsx(z.Content, { children: a }),
+        children: /* @__PURE__ */ r.jsx(J, { ref: n, onClick: b, ...d, children: l })
       }
     );
   }
-), ir = Object.assign(vt, {
-  Item: M.Item
+), Yt = Object.assign(ut, {
+  Item: z.Item
 });
-function yt(e = "primary") {
+function ft(e = "primary") {
   return e === "primary" || e === "destructive" ? "white" : "inherit";
 }
-const jt = x(
+const mt = g(
   "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
   {
     variants: {
@@ -1858,86 +1753,84 @@ const jt = x(
       shape: "rounded"
     }
   }
-), kt = A.forwardRef(
+), ht = V.forwardRef(
   function({
-    className: t,
-    variant: r = "primary",
+    className: n,
+    variant: a = "primary",
     size: s = "md",
-    shape: n = "rounded",
+    shape: t = "rounded",
     disabled: o = !1,
     busy: i,
-    as: c,
+    as: l,
     "aria-label": d,
-    ...h
-  }, g) {
-    const u = yt(r);
-    return /* @__PURE__ */ a.jsx(
+    ...u
+  }, m) {
+    const x = ft(a);
+    return /* @__PURE__ */ r.jsx(
       "button",
       {
-        ref: g,
+        ref: m,
         type: "button",
         className: f(
-          jt({
-            variant: r,
+          mt({
+            variant: a,
             size: s,
-            shape: n
+            shape: t
           }),
-          t
+          n
         ),
         disabled: o || i,
         "aria-disabled": o || i,
         "aria-label": d,
         inert: o || i ? !0 : void 0,
         "aria-busy": i ? !0 : void 0,
-        ...h,
-        children: i ? /* @__PURE__ */ a.jsx(
-          N,
+        ...u,
+        children: i ? /* @__PURE__ */ r.jsx(
+          E,
           {
-            as: G,
+            as: _,
             size: "sm",
-            color: u,
+            color: x,
             className: "animate-spin"
           }
-        ) : /* @__PURE__ */ a.jsx(N, { as: c, size: "sm", color: u })
+        ) : /* @__PURE__ */ r.jsx(E, { as: l, size: "sm", color: x })
       }
     );
   }
-), Nt = m(
-  (e, t) => {
+), gt = h(
+  (e, n) => {
     const {
-      as: r = ie,
+      as: a = ie,
       children: s,
-      onOpenChange: n,
+      onOpenChange: t,
       onClick: o,
       placement: i,
-      container: c,
-      preserve: d,
-      ...h
-    } = e ?? {}, [g, u] = V(!1);
-    I(() => {
-      n?.(g);
-    }, [g, n]);
-    const b = () => {
-      u(!1);
-    }, w = (p) => {
-      p.stopPropagation(), u((v) => !v), o?.(p);
+      preserve: l,
+      ...d
+    } = e ?? {}, [u, m] = k(!1);
+    C(() => {
+      t?.(u);
+    }, [u, t]);
+    const x = () => {
+      m(!1);
+    }, b = (p) => {
+      p.stopPropagation(), m((w) => !w), o?.(p);
     };
-    return /* @__PURE__ */ a.jsx(
-      M,
+    return /* @__PURE__ */ r.jsx(
+      z,
       {
-        isOpen: g,
-        onOutsideClick: b,
+        isOpen: u,
+        onClose: x,
         placement: i,
-        container: c,
-        preserve: d,
-        content: /* @__PURE__ */ a.jsx(M.Content, { children: s }),
-        children: /* @__PURE__ */ a.jsx(kt, { ref: t, as: r, onClick: w, ...h })
+        preserve: l,
+        content: /* @__PURE__ */ r.jsx(z.Content, { children: s }),
+        children: /* @__PURE__ */ r.jsx(ht, { ref: n, as: a, onClick: b, ...d })
       }
     );
   }
-), lr = Object.assign(Nt, {
-  Item: M.Item
-}), Et = x(
+), Zt = Object.assign(gt, {
+  Item: z.Item
+}), xt = g(
   "flex justify-between transition-colors duration-200 w-full",
   {
     variants: {
@@ -1969,53 +1862,53 @@ const jt = x(
       as: "button"
     }
   }
-), Ct = m(
-  ({ children: e }, t) => /* @__PURE__ */ a.jsx(
+), pt = h(
+  ({ children: e }, n) => /* @__PURE__ */ r.jsx(
     "ul",
     {
-      ref: t,
+      ref: n,
       className: "flex flex-wrap items-center min-w-0 overflow-hidden w-full gap-x-0",
       children: e
     }
   )
-), zt = m(
-  ({ children: e }, t) => /* @__PURE__ */ a.jsx(
+), bt = h(
+  ({ children: e }, n) => /* @__PURE__ */ r.jsx(
     "li",
     {
-      ref: t,
+      ref: n,
       className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 @sm/card:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
-      children: /* @__PURE__ */ a.jsx(y, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
+      children: /* @__PURE__ */ r.jsx(j, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
     }
   )
-), Vt = m(
+), wt = h(
   ({
     size: e = "md",
-    shape: t = "rounded",
-    avatar: r,
+    shape: n = "rounded",
+    avatar: a,
     title: s,
-    subtitle: n,
+    subtitle: t,
     badge: o,
     supplementaryInfo: i,
-    bordered: c = !1,
+    bordered: l = !1,
     as: d = "button",
-    className: h,
-    ...g
-  }, u) => /* @__PURE__ */ a.jsx(
+    className: u,
+    ...m
+  }, x) => /* @__PURE__ */ r.jsx(
     d,
     {
-      ref: u,
+      ref: x,
       className: f(
-        Et({ size: e, shape: t, bordered: c, as: d }),
-        h,
+        xt({ size: e, shape: n, bordered: l, as: d }),
+        u,
         "@container/card"
       ),
-      ...g,
-      children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
-        r && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0", children: r }),
-        /* @__PURE__ */ a.jsxs("div", { className: "w-full min-w-0", children: [
-          /* @__PURE__ */ a.jsx("div", { className: "mb-2", children: /* @__PURE__ */ a.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ a.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ a.jsx(
-              y,
+      ...m,
+      children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
+        a && /* @__PURE__ */ r.jsx("div", { className: "flex-shrink-0", children: a }),
+        /* @__PURE__ */ r.jsxs("div", { className: "w-full min-w-0", children: [
+          /* @__PURE__ */ r.jsx("div", { className: "mb-2", children: /* @__PURE__ */ r.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ r.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ r.jsx(
+              j,
               {
                 as: "h3",
                 fontSize: "base",
@@ -2024,12 +1917,12 @@ const jt = x(
                 children: s
               }
             ),
-            n && /* @__PURE__ */ a.jsx("div", { className: "mt-1", children: typeof n == "string" ? /* @__PURE__ */ a.jsx(y, { as: "p", fontSize: "sm", color: "gray", children: n }) : /* @__PURE__ */ a.jsx("div", { className: "min-w-0 overflow-hidden", children: n }) })
+            t && /* @__PURE__ */ r.jsx("div", { className: "mt-1", children: typeof t == "string" ? /* @__PURE__ */ r.jsx(j, { as: "p", fontSize: "sm", color: "gray", children: t }) : /* @__PURE__ */ r.jsx("div", { className: "min-w-0 overflow-hidden", children: t }) })
           ] }) }) }),
-          /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
-            o && /* @__PURE__ */ a.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: o }),
-            i && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof i == "string" ? /* @__PURE__ */ a.jsx(
-              y,
+          /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
+            o && /* @__PURE__ */ r.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: o }),
+            i && /* @__PURE__ */ r.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof i == "string" ? /* @__PURE__ */ r.jsx(
+              j,
               {
                 as: "p",
                 fontSize: "sm",
@@ -2038,16 +1931,16 @@ const jt = x(
                 align: "right",
                 children: i
               }
-            ) : /* @__PURE__ */ a.jsx("div", { className: "overflow-hidden", children: i }) })
+            ) : /* @__PURE__ */ r.jsx("div", { className: "overflow-hidden", children: i }) })
           ] })
         ] })
       ] })
     }
   )
-), cr = Object.assign(Vt, {
-  List: Ct,
-  ListItem: zt
-}), It = x(
+), er = Object.assign(wt, {
+  List: pt,
+  ListItem: bt
+}), vt = g(
   "inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer text-sm leading-none border border-border text-foreground bg-white hover:bg-neutral focus-visible:ring-foreground-light focus-visible:ring-offset-white",
   {
     variants: {
@@ -2061,27 +1954,27 @@ const jt = x(
       size: "md"
     }
   }
-), dr = A.forwardRef(
-  function({ className: t, size: r = "md", disabled: s = !1, children: n, ...o }, i) {
-    return /* @__PURE__ */ a.jsxs(
+), tr = V.forwardRef(
+  function({ className: n, size: a = "md", disabled: s = !1, children: t, ...o }, i) {
+    return /* @__PURE__ */ r.jsxs(
       "button",
       {
         ref: i,
         type: "button",
-        className: f(It({ size: r }), t),
+        className: f(vt({ size: a }), n),
         disabled: s,
         "aria-disabled": s,
-        "aria-label": `${n}, removable`,
+        "aria-label": `${t}, removable`,
         inert: s ? !0 : void 0,
         ...o,
         children: [
-          /* @__PURE__ */ a.jsx("span", { className: "flex-shrink-0", children: n }),
-          /* @__PURE__ */ a.jsx(N, { as: le, color: "inherit", size: r === "lg" ? "md" : "sm" })
+          /* @__PURE__ */ r.jsx("span", { className: "flex-shrink-0", children: t }),
+          /* @__PURE__ */ r.jsx(E, { as: le, color: "inherit", size: a === "lg" ? "md" : "sm" })
         ]
       }
     );
   }
-), Mt = x("h-px w-full bg-border border-0", {
+), yt = g("h-px w-full bg-border border-0", {
   variants: {
     hasMargin: {
       true: "mb-4",
@@ -2091,16 +1984,16 @@ const jt = x(
   defaultVariants: {
     hasMargin: !1
   }
-}), ur = m(
-  ({ hasMargin: e = !1, className: t, ...r }, s) => /* @__PURE__ */ a.jsx(
+}), rr = h(
+  ({ hasMargin: e = !1, className: n, ...a }, s) => /* @__PURE__ */ r.jsx(
     "hr",
     {
       ref: s,
-      className: f(Mt({ hasMargin: e }), t),
-      ...r
+      className: f(yt({ hasMargin: e }), n),
+      ...a
     }
   )
-), At = x(
+), jt = g(
   "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
   {
     variants: {
@@ -2119,37 +2012,37 @@ const jt = x(
       hasGrayBackground: !1
     }
   }
-), Lt = x(
+), kt = g(
   "flex flex-row items-center gap-3 mb-2"
-), fr = A.forwardRef(
-  function({ icon: t, title: r, subtitle: s, action: n, className: o, hasGrayBackground: i, ...c }, d) {
-    return /* @__PURE__ */ a.jsxs(
+), nr = V.forwardRef(
+  function({ icon: n, title: a, subtitle: s, action: t, className: o, hasGrayBackground: i, ...l }, d) {
+    return /* @__PURE__ */ r.jsxs(
       "section",
       {
         ref: d,
-        className: f(At({ hasGrayBackground: i }), o),
+        className: f(jt({ hasGrayBackground: i }), o),
         role: "status",
         "aria-label": "No results found",
-        ...c,
+        ...l,
         children: [
-          /* @__PURE__ */ a.jsxs("header", { className: Lt(), children: [
-            /* @__PURE__ */ a.jsx(N, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
-            /* @__PURE__ */ a.jsx(y, { as: "h2", fontSize: "lg", children: r })
+          /* @__PURE__ */ r.jsxs("header", { className: kt(), children: [
+            /* @__PURE__ */ r.jsx(E, { as: n, size: "lg", color: "ghost", "aria-hidden": "true" }),
+            /* @__PURE__ */ r.jsx(j, { as: "h2", fontSize: "lg", children: a })
           ] }),
-          s && /* @__PURE__ */ a.jsx(y, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
-          n && /* @__PURE__ */ a.jsx("div", { role: "group", "aria-label": "Available actions", children: n })
+          s && /* @__PURE__ */ r.jsx(j, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
+          t && /* @__PURE__ */ r.jsx("div", { role: "group", "aria-label": "Available actions", children: t })
         ]
       }
     );
   }
-), Z = B(null), St = Z.Provider;
-function H() {
-  const e = O(Z);
+), Q = O(null), Nt = Q.Provider;
+function T() {
+  const e = W(Q);
   if (!e)
     throw new Error("Table compound components must be used within <Table>");
   return e;
 }
-const T = (e) => {
+const q = (e) => {
   if (e < 1 || e > 12)
     throw new Error("Column span must be between 1 and 12");
   switch (e) {
@@ -2180,7 +2073,7 @@ const T = (e) => {
     default:
       return "grid-cols-2";
   }
-}, Wt = (e) => {
+}, Et = (e) => {
   if (e < 1 || e > 12)
     throw new Error("Column span must be between 1 and 12");
   switch (e) {
@@ -2211,122 +2104,122 @@ const T = (e) => {
     default:
       return "col-span-2";
   }
-}, Bt = m(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: n } = H();
-    return /* @__PURE__ */ a.jsx(
+}, Ct = h(
+  ({ children: e, className: n, ...a }, s) => {
+    const { columns: t } = T();
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
         role: "rowgroup",
-        className: f("bg-neutral-soft", t),
-        ...r,
+        className: f("bg-neutral-soft", n),
+        ...a,
         ref: s,
-        children: /* @__PURE__ */ a.jsx(
+        children: /* @__PURE__ */ r.jsx(
           "div",
           {
             role: "row",
-            className: f("grid gap-4", T(n)),
+            className: f("grid gap-4", q(t)),
             children: e
           }
         )
       }
     );
   }
-), Ot = m(
-  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { role: "rowgroup", ref: s, className: f(t), ...r, children: e })
-), Ht = m(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: n } = H();
-    return /* @__PURE__ */ a.jsx(
+), zt = h(
+  ({ children: e, className: n, ...a }, s) => /* @__PURE__ */ r.jsx("div", { role: "rowgroup", ref: s, className: f(n), ...a, children: e })
+), Vt = h(
+  ({ children: e, className: n, ...a }, s) => {
+    const { columns: t } = T();
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
         role: "rowgroup",
-        className: f("bg-neutral-soft", t),
-        ...r,
+        className: f("bg-neutral-soft", n),
+        ...a,
         ref: s,
-        children: /* @__PURE__ */ a.jsx(
+        children: /* @__PURE__ */ r.jsx(
           "div",
           {
             role: "row",
-            className: f("grid gap-4", T(n)),
+            className: f("grid gap-4", q(t)),
             children: e
           }
         )
       }
     );
   }
-), Tt = m(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: n } = H();
-    return /* @__PURE__ */ a.jsx(
+), It = h(
+  ({ children: e, className: n, ...a }, s) => {
+    const { columns: t } = T();
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
         role: "row",
         className: f(
           "grid gap-4",
-          T(n),
+          q(t),
           "border-b border-border last:border-0",
-          t
+          n
         ),
         ref: s,
-        ...r,
+        ...a,
         children: e
       }
     );
   }
-), ee = m(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...o }, i) => {
-    const c = e === "th" ? "columnheader" : "cell";
+), Y = h(
+  ({ as: e = "td", span: n, align: a = "left", children: s, className: t, ...o }, i) => {
+    const l = e === "th" ? "columnheader" : "cell";
     let d = "text-left";
-    return r === "center" ? d = "text-center" : r === "right" && (d = "text-right"), /* @__PURE__ */ a.jsx(
+    return a === "center" ? d = "text-center" : a === "right" && (d = "text-right"), /* @__PURE__ */ r.jsx(
       "div",
       {
         ref: i,
-        role: c,
+        role: l,
         className: f(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
-          Wt(t),
+          Et(n),
           d,
           "truncate overflow-hidden whitespace-nowrap",
-          n
+          t
         ),
         ...o,
         children: s
       }
     );
   }
-), qt = m(
-  (e, t) => /* @__PURE__ */ a.jsx(
-    ee,
+), At = h(
+  (e, n) => /* @__PURE__ */ r.jsx(
+    Y,
     {
       ...e,
       as: "td",
-      ref: t,
+      ref: n,
       className: f(
         "truncate overflow-hidden whitespace-nowrap",
         e.className
       )
     }
   )
-), Pt = m(
-  (e, t) => /* @__PURE__ */ a.jsx(
-    ee,
+), Lt = h(
+  (e, n) => /* @__PURE__ */ r.jsx(
+    Y,
     {
       ...e,
       as: "th",
-      ref: t,
+      ref: n,
       className: f(
         "truncate overflow-hidden whitespace-nowrap",
         e.className
       )
     }
   )
-), _t = m(
-  ({ children: e, className: t, columns: r = 12, ...s }, n) => /* @__PURE__ */ a.jsx(St, { value: { columns: r }, children: /* @__PURE__ */ a.jsx(
+), Mt = h(
+  ({ children: e, className: n, columns: a = 12, ...s }, t) => /* @__PURE__ */ r.jsx(Nt, { value: { columns: a }, children: /* @__PURE__ */ r.jsx(
     "div",
     {
-      ref: n,
+      ref: t,
       role: "table",
       className: f(
         // Versaur design system: border, background, shadow, rounded, spacing
@@ -2334,20 +2227,20 @@ const T = (e) => {
         "text-foreground",
         "sm:rounded-xl",
         "transition-colors",
-        t
+        n
       ),
       ...s,
       children: e
     }
   ) })
-), hr = Object.assign(_t, {
-  Header: Bt,
-  HeaderItem: Pt,
-  Body: Ot,
-  Footer: Ht,
-  Row: Tt,
-  RowItem: qt
-}), Ft = x(
+), ar = Object.assign(Mt, {
+  Header: Ct,
+  HeaderItem: Lt,
+  Body: zt,
+  Footer: Vt,
+  Row: It,
+  RowItem: At
+}), St = g(
   // Base classes
   "block transition-colors duration-200",
   {
@@ -2382,40 +2275,40 @@ const T = (e) => {
       shape: "rounded"
     }
   }
-), mr = m(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, o) => /* @__PURE__ */ a.jsx(
+), sr = h(
+  ({ variant: e = "white", size: n = "md", shape: a = "rounded", className: s, ...t }, o) => /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: o,
-      className: f(Ft({ variant: e, size: t, shape: r }), s),
-      ...n
+      className: f(St({ variant: e, size: n, shape: a }), s),
+      ...t
     }
   )
 );
-function Ut({ src: e }) {
-  const [t, r] = V(!1), [s, n] = V(!1), o = W(!1), i = () => {
-    r(!0);
-  }, c = () => {
-    n(!0);
+function Rt({ src: e }) {
+  const [n, a] = k(!1), [s, t] = k(!1), o = B(!1), i = () => {
+    a(!0);
+  }, l = () => {
+    t(!0);
   };
-  return I(() => {
+  return C(() => {
     if (!e) return;
     const d = new Image();
     return d.src = e, d.onload = () => {
-      o.current || r(!0);
+      o.current || a(!0);
     }, d.onerror = () => {
-      o.current || n(!0);
+      o.current || t(!0);
     }, () => {
       o.current = !0;
     };
   }, [e]), {
-    loaded: t,
+    loaded: n,
     errored: s,
     handleLoad: i,
-    handleError: c
+    handleError: l
   };
 }
-const Rt = x("block object-cover", {
+const Ot = g("block object-cover", {
   variants: {
     position: {
       cover: "object-cover",
@@ -2445,7 +2338,7 @@ const Rt = x("block object-cover", {
     size: "auto",
     shape: "rectangle"
   }
-}), te = x(
+}), Z = g(
   "flex items-center justify-center bg-neutral-soft text-ghost border border-border",
   {
     variants: {
@@ -2468,39 +2361,39 @@ const Rt = x("block object-cover", {
     }
   }
 );
-function Gt({
+function Wt({
   className: e,
-  shape: t,
-  size: r,
+  shape: n,
+  size: a,
   height: s,
-  width: n
+  width: t
 }) {
-  return /* @__PURE__ */ a.jsx(
-    ue,
+  return /* @__PURE__ */ r.jsx(
+    de,
     {
-      className: f(te({ shape: t, size: r }), e),
-      style: { height: s, width: n }
+      className: f(Z({ shape: n, size: a }), e),
+      style: { height: s, width: t }
     }
   );
 }
-function $t({
+function Bt({
   alt: e,
-  width: t,
-  height: r,
+  width: n,
+  height: a,
   className: s,
-  style: n,
+  style: t,
   shape: o,
   size: i
 }) {
-  return /* @__PURE__ */ a.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: te({ shape: o, size: i, className: s }),
-      style: { width: t, height: r, ...n },
+      className: Z({ shape: o, size: i, className: s }),
+      style: { width: n, height: a, ...t },
       "aria-label": e,
       role: "img",
       children: [
-        /* @__PURE__ */ a.jsx(
+        /* @__PURE__ */ r.jsx(
           ce,
           {
             size: 32,
@@ -2508,100 +2401,100 @@ function $t({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ a.jsx("span", { style: { opacity: 0.7 }, children: e })
+        /* @__PURE__ */ r.jsx("span", { style: { opacity: 0.7 }, children: e })
       ]
     }
   );
 }
-const q = m(
+const P = h(
   ({
     src: e,
-    alt: t,
-    onLoad: r,
+    alt: n,
+    onLoad: a,
     onError: s,
-    width: n,
+    width: t,
     height: o,
     loading: i = "lazy",
-    position: c = "cover",
+    position: l = "cover",
     size: d = "auto",
-    shape: h,
-    className: g,
-    ...u
+    shape: u,
+    className: m,
+    ...x
   }, b) => {
-    const { loaded: w, errored: p, handleLoad: v, handleError: E } = Ut({
+    const { loaded: p, errored: w, handleLoad: v, handleError: N } = Rt({
       src: e
-    }), C = typeof n == "number" ? n : Number(n), L = typeof o == "number" ? o : Number(o);
-    return !w && !p ? /* @__PURE__ */ a.jsx(
-      Gt,
+    }), y = typeof t == "number" ? t : Number(t), I = typeof o == "number" ? o : Number(o);
+    return !p && !w ? /* @__PURE__ */ r.jsx(
+      Wt,
       {
-        shape: h,
-        width: C,
-        height: L
+        shape: u,
+        width: y,
+        height: I
       }
-    ) : p ? /* @__PURE__ */ a.jsx(
-      $t,
+    ) : w ? /* @__PURE__ */ r.jsx(
+      Bt,
       {
-        shape: h,
-        alt: t,
-        width: C,
-        height: L
+        shape: u,
+        alt: n,
+        width: y,
+        height: I
       }
-    ) : /* @__PURE__ */ a.jsx(
+    ) : /* @__PURE__ */ r.jsx(
       "img",
       {
         ref: b,
         src: e,
-        alt: t,
-        width: C,
-        height: L,
+        alt: n,
+        width: y,
+        height: I,
         loading: i,
         className: f(
-          Rt({
-            position: c,
+          Ot({
+            position: l,
             size: d,
-            shape: h
+            shape: u
           }),
-          g
+          m
         ),
-        onLoad: (k) => {
-          v(), r?.(k);
+        onLoad: (A) => {
+          v(), a?.(A);
         },
-        onError: (k) => {
-          E(), s?.(k);
+        onError: (A) => {
+          N(), s?.(A);
         },
-        ...u
+        ...x
       }
     );
   }
-), gr = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "circle" })), xr = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "square" })), br = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "rectangle" }));
+), or = h((e, n) => /* @__PURE__ */ r.jsx(P, { ref: n, ...e, shape: "circle" })), ir = h((e, n) => /* @__PURE__ */ r.jsx(P, { ref: n, ...e, shape: "square" })), lr = h((e, n) => /* @__PURE__ */ r.jsx(P, { ref: n, ...e, shape: "rectangle" }));
 export {
-  Qt as A,
-  sr as B,
-  cr as C,
-  dr as F,
-  X as H,
-  N as I,
-  M,
-  fr as N,
-  et as O,
-  hr as T,
-  Zt as a,
-  er as b,
-  tr as c,
-  Le as d,
-  rr as e,
-  nr as f,
-  ar as g,
-  K as h,
-  or as i,
-  ir as j,
-  lr as k,
-  kt as l,
-  ur as m,
-  y as n,
-  mr as o,
-  gr as p,
-  xr as q,
-  br as r,
-  q as s
+  Ft as A,
+  Jt as B,
+  er as C,
+  tr as F,
+  G as H,
+  E as I,
+  z as M,
+  nr as N,
+  ar as T,
+  $t as a,
+  Gt as b,
+  Ut as c,
+  Be as d,
+  Dt as e,
+  Xt as f,
+  Kt as g,
+  J as h,
+  Qt as i,
+  Yt as j,
+  Zt as k,
+  ht as l,
+  rr as m,
+  j as n,
+  sr as o,
+  or as p,
+  ir as q,
+  lr as r,
+  P as s,
+  Ne as t
 };