@dimasbaguspm/versaur 0.0.61 → 0.0.62

package/dist/js/{image-rectangle-CLLXF8w_.js → image-rectangle-BwT5taeR.js}

@@ -1,19 +1,19 @@
 import { j as n } from "./jsx-runtime-C5mzlN2N.js";
 import * as c from "react";
-import z, { createContext as R, useContext as O, forwardRef as h, useState as k, useRef as T, useCallback as L, useEffect as C, useId as re, cloneElement as ne } from "react";
-import { ChevronDown as ae, ChevronRight as se, LoaderCircleIcon as H, 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 _, { createContext as O, useContext as S, forwardRef as g, useState as j, useRef as B, useCallback as A, useEffect as E, useId as re, cloneElement as ne } from "react";
+import { ChevronDown as ae, ChevronRight as se, LoaderCircleIcon as F, CheckIcon as oe, EllipsisVerticalIcon as ie, XIcon as le, ImageOff as ce } from "lucide-react";
+import { c as f, a as u } from "./index-BDtz_hQY.js";
 import { S as de } from "./skeleton-BRwIW26B.js";
-const F = R(
+const G = O(
   null
 ), $ = () => {
-  const e = O(F);
+  const e = S(G);
   if (!e)
     throw new Error(
       "Accordion compound components must be used within Accordion"
     );
   return e;
-}, ue = g(
+}, ue = f(
   "border-b border-border bg-background overflow-hidden",
   {
     variants: {
@@ -26,7 +26,7 @@ const F = R(
       disabled: !1
     }
   }
-), fe = g(
+), me = f(
   "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 F = R(
       isOpen: !1
     }
   }
-), me = g(
+), he = f(
   "overflow-hidden transition-all duration-300",
   {
     variants: {
@@ -57,7 +57,7 @@ const F = R(
       isOpen: !1
     }
   }
-), he = g("p-4 pt-0"), ge = g("transition-transform duration-200", {
+), ge = f("p-4 pt-0"), fe = f("transition-transform duration-200", {
   variants: {
     isOpen: {
       true: "rotate-180",
@@ -67,7 +67,7 @@ const F = R(
   defaultVariants: {
     isOpen: !1
   }
-}), xe = g("", {
+}), xe = f("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -84,13 +84,17 @@ const F = R(
       black: "text-black",
       white: "text-white"
     },
-    hasUnderline: {
-      true: "underline",
-      false: ""
+    transform: {
+      none: "normal-case",
+      capitalize: "capitalize",
+      uppercase: "uppercase",
+      lowercase: "lowercase"
     },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
+    decoration: {
+      none: "no-underline",
+      underline: "underline",
+      "line-through": "line-through",
+      overline: "overline"
     },
     hasMargin: {
       true: "mb-4",
@@ -102,10 +106,6 @@ const F = R(
       right: "text-right",
       justify: "text-justify"
     },
-    italic: {
-      true: "italic",
-      false: ""
-    },
     clamp: {
       1: "line-clamp-1",
       2: "line-clamp-2",
@@ -114,72 +114,64 @@ const F = R(
       5: "line-clamp-5",
       none: ""
     },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
-    level: {
-      1: "font-bold text-2xl leading-loose",
-      2: "font-semibold text-xl leading-relaxed",
-      3: "font-semibold text-lg leading-relaxed",
-      4: "font-bold text-sm leading-normal",
-      5: "font-semibold text-sm leading-normal",
-      6: "font-medium text-xs leading-normal"
+    as: {
+      h1: "font-bold text-2xl leading-loose",
+      h2: "font-semibold text-2xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal"
     }
   },
   defaultVariants: {
     color: "ghost",
-    hasUnderline: !1,
-    isCapitalize: !1,
+    transform: "none",
+    decoration: "none",
     hasMargin: !1,
     align: "left",
-    italic: !1,
     clamp: "none",
-    ellipsis: !1,
-    level: 1
+    as: "h1"
   }
-}), G = h(
+}), L = g(
   ({
-    level: e = 3,
+    as: e = "h3",
     color: r = "black",
-    hasUnderline: a = !1,
-    isCapitalize: s = !1,
+    transform: a = "none",
+    decoration: s = "none",
     hasMargin: t = !1,
     align: o = "left",
-    italic: i = !1,
-    clamp: l = "none",
-    ellipsis: d = !1,
-    className: u,
+    clamp: i = "none",
+    ellipsis: l = !1,
+    className: d,
     children: m,
-    ...x
-  }, p) => {
-    const b = `h${e}`;
+    ...h
+  }, x) => {
+    const p = e, b = l ? i === "none" ? "truncate" : "overflow-hidden" : "";
     return /* @__PURE__ */ n.jsx(
-      b,
+      p,
       {
-        ref: p,
-        className: f(
+        ref: x,
+        className: u(
           xe({
             color: r,
-            hasUnderline: a,
-            isCapitalize: s,
+            transform: a,
+            decoration: s,
             hasMargin: t,
             align: o,
-            italic: i,
-            clamp: l,
-            ellipsis: d,
-            level: e
+            clamp: i,
+            as: p
           }),
-          u
+          b,
+          d
         ),
-        ...x,
+        ...h,
         children: m
       }
     );
   }
 );
-G.displayName = "Heading";
-const be = g("inline-flex items-center justify-center", {
+L.displayName = "Heading";
+const be = f("inline-flex items-center justify-center", {
   variants: {
     size: {
       xs: "w-3 h-3",
@@ -209,7 +201,7 @@ const be = g("inline-flex items-center justify-center", {
     size: "md",
     color: "primary"
   }
-}), E = z.forwardRef(function({ as: r, color: a = "primary", size: s = "md", className: t, ...o }, i) {
+}), N = _.forwardRef(function({ as: r, color: a = "primary", size: s = "md", className: t, ...o }, i) {
   return /* @__PURE__ */ n.jsx(
     r,
     {
@@ -218,43 +210,43 @@ const be = g("inline-flex items-center justify-center", {
       ...o
     }
   );
-}), pe = h(function({ className: r, children: a, ...s }, t) {
+}), pe = g(function({ className: r, children: a, ...s }, t) {
   return /* @__PURE__ */ n.jsx(
-    G,
+    L,
     {
       ref: t,
-      level: 4,
-      className: f("font-medium", r),
+      as: "h6",
+      className: u("font-medium", r),
       ...s,
       color: "black",
       children: a
     }
   );
-}), we = h(function({ className: r, children: a, ...s }, t) {
+}), we = g(function({ className: r, children: a, ...s }, t) {
   const { isOpen: o } = $();
   return /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
-      className: f(me({ isOpen: o }), r),
+      className: u(he({ isOpen: o }), r),
       ...s,
-      children: /* @__PURE__ */ n.jsx("div", { className: he(), children: a })
+      children: /* @__PURE__ */ n.jsx("div", { className: ge(), children: a })
     }
   );
-}), U = h(function({ as: r, ...a }, s) {
+}), D = g(function({ as: r, ...a }, s) {
   const { isOpen: t } = $();
   return /* @__PURE__ */ n.jsx(
-    E,
+    N,
     {
       ref: s,
       as: r,
       color: "ghost",
       size: "sm",
-      className: ge({ isOpen: t }),
+      className: fe({ isOpen: t }),
       ...a
     }
   );
-}), ve = h(
+}), ve = g(
   function({
     title: r,
     subtitle: a,
@@ -264,19 +256,19 @@ const be = g("inline-flex items-center justify-center", {
     className: i,
     children: l,
     ...d
-  }, u) {
-    const [m, x] = k(s), p = () => {
+  }, m) {
+    const [h, x] = j(s), p = () => {
       t || x((w) => !w);
     }, b = {
-      isOpen: m,
+      isOpen: h,
       toggle: p,
       disabled: t
     };
-    return /* @__PURE__ */ n.jsx(F.Provider, { value: b, children: /* @__PURE__ */ n.jsxs(
+    return /* @__PURE__ */ n.jsx(G.Provider, { value: b, children: /* @__PURE__ */ n.jsxs(
       "div",
       {
-        ref: u,
-        className: f(
+        ref: m,
+        className: u(
           ue({ disabled: t }),
           i,
           o && "mb-4"
@@ -287,25 +279,25 @@ const be = g("inline-flex items-center justify-center", {
             "div",
             {
               role: "button",
-              className: fe({ disabled: t, isOpen: m }),
+              className: me({ disabled: t, isOpen: h }),
               onClick: p,
               "aria-disabled": t,
-              "aria-expanded": m,
+              "aria-expanded": h,
               children: /* @__PURE__ */ n.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
                 /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
                   /* @__PURE__ */ n.jsx("div", { className: "flex-1", children: r }),
                   a && /* @__PURE__ */ n.jsx("div", { className: "flex-shrink-0", children: a })
                 ] }),
-                /* @__PURE__ */ n.jsx(U, { as: ae })
+                /* @__PURE__ */ n.jsx(D, { as: ae })
               ] })
             }
           ),
           /* @__PURE__ */ n.jsx(
             "div",
             {
-              className: f(
+              className: u(
                 "overflow-hidden transition-all duration-300",
-                m ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+                h ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
               ),
               children: /* @__PURE__ */ n.jsx("div", { className: "p-4 pt-2", children: l })
             }
@@ -317,8 +309,8 @@ const be = g("inline-flex items-center justify-center", {
 ), Ut = Object.assign(ve, {
   Title: pe,
   Content: we,
-  Icon: U
-}), ye = g(
+  Icon: D
+}), ye = f(
   [
     // Base styles
     "fixed",
@@ -385,28 +377,28 @@ function je(e, r, a = "bottom", s = 8) {
       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`,
+  const d = window.innerWidth, m = window.innerHeight, h = 8;
+  return l + o.width > d - h && (l = d - o.width - h), l < h && (l = h), i + o.height > m - h && (a.startsWith("bottom") ? i = t.top - o.height - s : i < h && (i = h)), i < h && (a.startsWith("top") ? i = t.bottom + s : i = h), {
+    top: `${Math.max(h, i)}px`,
+    left: `${Math.max(h, l)}px`,
     margin: 0
   };
 }
 function ke(e, r, a, s) {
-  const t = T(null), [o, i] = k(!1), l = r !== void 0, d = l ? r : o, u = L(() => {
+  const t = B(null), [o, i] = j(!1), l = r !== void 0, d = l ? r : o, m = A(() => {
     t.current && t.current.showPopover?.();
-  }, []), m = L(() => {
+  }, []), h = A(() => {
     t.current && t.current.hidePopover?.();
-  }, []), x = L(() => {
+  }, []), x = A(() => {
     t.current && t.current.togglePopover?.();
-  }, []), p = L(
+  }, []), p = A(
     (b = "toggle") => ({
       popoverTarget: e,
       popoverTargetAction: b
     }),
     [e]
   );
-  return C(() => {
+  return E(() => {
     const b = t.current;
     if (!b) return;
     const w = (v) => {
@@ -416,7 +408,7 @@ function ke(e, r, a, s) {
     return b.addEventListener("toggle", w), () => {
       b.removeEventListener("toggle", w);
     };
-  }, [l, a, s]), C(() => {
+  }, [l, a, s]), E(() => {
     if (!l || !t.current) return;
     const b = t.current;
     if (!b.showPopover || !b.hidePopover) return;
@@ -425,11 +417,11 @@ function ke(e, r, a, s) {
       w = b.matches(":popover-open");
     } catch {
     }
-    r && !w ? u() : !r && w && m();
-  }, [r, l, u, m]), {
+    r && !w ? m() : !r && w && h();
+  }, [r, l, m, h]), {
     getTriggerProps: p,
-    show: u,
-    hide: m,
+    show: m,
+    hide: h,
     toggle: x,
     isOpen: d,
     popoverRef: t
@@ -439,7 +431,7 @@ const Ne = (...e) => (r) => {
   e.forEach((a) => {
     typeof a == "function" ? a(r) : a && "current" in a && (a.current = r);
   });
-}, D = h(
+}, X = g(
   ({
     id: e,
     children: r,
@@ -450,52 +442,52 @@ const Ne = (...e) => (r) => {
     popover: i = "auto",
     placement: l = "bottom",
     triggerRef: d,
-    gap: u = 8,
-    maxWidth: m = "sm",
+    gap: m = 8,
+    maxWidth: h = "sm",
     className: x,
     style: p,
     ...b
   }, w) => {
-    const { popoverRef: v, isOpen: N } = ke(
+    const { popoverRef: v, isOpen: k } = ke(
       e,
       a,
       s,
       t
-    ), [y, I] = k(
+    ), [y, I] = j(
       {}
-    ), [A, S] = k(!1);
-    C(() => {
+    ), [z, R] = j(!1);
+    E(() => {
       if (!d?.current || !v.current)
         return;
-      const _ = () => {
+      const T = () => {
         if (!d.current || !v.current) return;
         const te = je(
           d.current,
           v.current,
           l,
-          u
+          m
         );
         I(te);
       };
-      N ? (S(!1), requestAnimationFrame(() => {
+      k ? (R(!1), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          _(), requestAnimationFrame(() => {
-            S(!0);
+          T(), requestAnimationFrame(() => {
+            R(!0);
           });
         });
-      })) : (S(!1), _());
+      })) : (R(!1), T());
       const M = () => {
-        N && _();
+        k && T();
       };
       return window.addEventListener("scroll", M, !0), window.addEventListener("resize", M), () => {
         window.removeEventListener("scroll", M, !0), window.removeEventListener("resize", M);
       };
-    }, [d, v, l, u, N]);
+    }, [d, v, l, m, k]);
     const ee = {
       ...y,
       ...p,
       // Hide until positioned to prevent flash
-      ...A ? {} : {
+      ...z ? {} : {
         opacity: 0,
         pointerEvents: "none",
         transition: "none"
@@ -508,7 +500,7 @@ const Ne = (...e) => (r) => {
         ref: Ne(w, v),
         id: e,
         popover: i,
-        className: f(ye({ maxWidth: m }), x),
+        className: u(ye({ maxWidth: h }), x),
         style: ee,
         ...o && { anchor: o },
         children: r
@@ -516,13 +508,13 @@ const Ne = (...e) => (r) => {
     );
   }
 );
-D.displayName = "Popover";
+X.displayName = "Popover";
 const Ee = (e, r = "toggle") => ({
   popoverTarget: e,
   popoverTargetAction: r
-}), Ce = Object.assign(D, {
+}), Ce = Object.assign(X, {
   getTriggerProps: Ee
-}), ze = g(
+}), _e = f(
   "group flex items-center justify-between transition-all duration-200 w-full",
   {
     variants: {
@@ -541,7 +533,7 @@ const Ee = (e, r = "toggle") => ({
       as: "button"
     }
   }
-), Ve = g(
+), Ve = f(
   "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: {
@@ -555,7 +547,7 @@ const Ee = (e, r = "toggle") => ({
       size: "md"
     }
   }
-), Ie = g(
+), Ie = f(
   "inline-flex items-center justify-center text-ghost-bold transition-colors duration-200",
   {
     variants: {
@@ -569,7 +561,16 @@ const Ee = (e, r = "toggle") => ({
       size: "md"
     }
   }
-), Ae = g("", {
+), ze = [
+  "p",
+  "span",
+  "q",
+  "s",
+  "strong",
+  "em",
+  "small",
+  "label"
+], Ae = (e) => ze.includes(e) ? e : "span", Le = f("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -586,13 +587,17 @@ const Ee = (e, r = "toggle") => ({
       black: "text-black",
       white: "text-white"
     },
-    hasUnderline: {
-      true: "underline",
-      false: ""
+    transform: {
+      none: "normal-case",
+      capitalize: "capitalize",
+      uppercase: "uppercase",
+      lowercase: "lowercase"
     },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
+    decoration: {
+      none: "no-underline",
+      underline: "underline",
+      "line-through": "line-through",
+      overline: "overline"
     },
     align: {
       left: "text-left",
@@ -612,90 +617,71 @@ const Ee = (e, r = "toggle") => ({
       5: "line-clamp-5",
       none: ""
     },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
     as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
       p: "font-normal text-base leading-normal",
       span: "font-normal text-base leading-normal",
+      q: "font-normal text-base leading-normal",
+      s: "font-normal text-base leading-normal",
+      strong: "font-semibold text-base leading-normal",
+      em: "font-normal italic text-base leading-normal",
+      small: "font-normal text-sm leading-normal",
       label: "font-normal text-xs leading-normal"
     }
   },
   defaultVariants: {
     color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
+    transform: "none",
+    decoration: "none",
     align: "left",
     italic: !1,
     clamp: "none",
-    ellipsis: !1,
     as: "span"
   }
-}), j = h(
+}), C = g(
   ({
     as: e = "span",
     color: r = "ghost",
-    hasUnderline: a = !1,
-    isCapitalize: s = !1,
+    transform: a = "none",
+    decoration: s = "none",
     align: t = "left",
     italic: o = !1,
     clamp: i = "none",
     ellipsis: l = !1,
-    fontSize: d,
-    fontWeight: u,
+    fontWeight: d,
     className: m,
-    children: x,
-    ...p
-  }, b) => {
-    const v = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", N = d ? `text-${d}` : "", y = u ? `font-${u}` : "";
+    children: h,
+    ...x
+  }, p) => {
+    const b = Ae(e), w = e, v = d ? `font-${d}` : "", k = l ? i === "none" ? "truncate" : "overflow-hidden" : "";
     return /* @__PURE__ */ n.jsx(
-      e,
+      w,
       {
-        ref: b,
-        className: f(
-          Ae({
+        ref: p,
+        className: u(
+          Le({
             color: r,
-            hasUnderline: a,
-            isCapitalize: s,
+            transform: a,
+            decoration: s,
             align: t,
             italic: o,
             clamp: i,
-            ellipsis: l,
-            // @ts-expect-error - `as` is not a valid variant
-            as: v
+            as: b
           }),
-          N,
-          y,
+          v,
+          k,
           m
         ),
-        ...p,
-        children: x
+        ...x,
+        children: h
       }
     );
   }
-), Le = h(
+), Me = g(
   ({ children: e, className: r }, a) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: a,
-      className: f(
+      className: u(
         "bg-background border border-border rounded-lg overflow-hidden",
         "divide-y divide-border",
         r
@@ -704,7 +690,7 @@ const Ee = (e, r = "toggle") => ({
       children: e
     }
   )
-), Me = h(
+), Re = g(
   ({
     size: e = "md",
     icon: r,
@@ -715,22 +701,21 @@ const Ee = (e, r = "toggle") => ({
     as: i = "button",
     className: l,
     ...d
-  }, u) => /* @__PURE__ */ n.jsxs(
+  }, m) => /* @__PURE__ */ n.jsxs(
     i,
     {
-      ref: u,
-      className: f(ze({ size: e, as: i }), l),
+      ref: m,
+      className: u(_e({ size: e, as: i }), l),
       ...d,
       children: [
         /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          r && /* @__PURE__ */ n.jsx("div", { className: f(Ve({ size: e })), children: r }),
+          r && /* @__PURE__ */ n.jsx("div", { className: u(Ve({ size: e })), children: r }),
           /* @__PURE__ */ n.jsxs("div", { className: "flex-1", children: [
             /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
               /* @__PURE__ */ n.jsx(
-                j,
+                C,
                 {
                   as: "span",
-                  fontSize: e === "sm" ? "sm" : "base",
                   fontWeight: "semibold",
                   color: "ghost",
                   className: "text-left leading-normal",
@@ -747,10 +732,9 @@ const Ee = (e, r = "toggle") => ({
               )
             ] }),
             s && /* @__PURE__ */ n.jsx(
-              j,
+              C,
               {
-                as: "p",
-                fontSize: "sm",
+                as: "small",
                 color: "gray",
                 className: "text-left leading-normal",
                 children: s
@@ -759,10 +743,10 @@ const Ee = (e, r = "toggle") => ({
           ] })
         ] }),
         o && /* @__PURE__ */ n.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ n.jsx(
-          E,
+          N,
           {
             as: se,
-            className: f(Ie({ size: e })),
+            className: u(Ie({ size: e })),
             color: "ghost",
             "aria-hidden": "true"
           }
@@ -770,9 +754,9 @@ const Ee = (e, r = "toggle") => ({
       ]
     }
   )
-), Dt = Object.assign(Me, {
-  Group: Le
-}), Se = g(
+), Jt = Object.assign(Re, {
+  Group: Me
+}), Te = f(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -893,7 +877,7 @@ const Ee = (e, r = "toggle") => ({
       color: "neutral"
     }
   }
-), _e = g(
+), Oe = f(
   "flex-shrink-0 flex justify-center items-center ",
   {
     variants: {
@@ -907,9 +891,9 @@ const Ee = (e, r = "toggle") => ({
       size: "md"
     }
   }
-), X = h(
-  ({ className: e, children: r, ...a }, s) => /* @__PURE__ */ n.jsx("div", { ref: s, className: f(_e(), e), ...a, children: r })
-), Re = h(
+), U = g(
+  ({ className: e, children: r, ...a }, s) => /* @__PURE__ */ n.jsx("div", { ref: s, className: u(Oe(), e), ...a, children: r })
+), Se = g(
   ({
     variant: e = "default",
     color: r = "neutral",
@@ -922,17 +906,17 @@ const Ee = (e, r = "toggle") => ({
     {
       ref: i,
       role: "alert",
-      className: f(Se({ variant: e, color: r }), s),
+      className: u(Te({ variant: e, color: r }), s),
       ...o,
       children: [
-        a && /* @__PURE__ */ n.jsx(X, { children: a }),
+        a && /* @__PURE__ */ n.jsx(U, { children: a }),
         /* @__PURE__ */ n.jsx("div", { className: "flex-1", children: t })
       ]
     }
   )
-), Xt = Object.assign(Re, {
-  Icon: X
-}), Oe = g(
+), Kt = Object.assign(Se, {
+  Icon: U
+}), Be = f(
   [
     "inline-flex items-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
     // pseudo selectors for anchor
@@ -989,7 +973,7 @@ const Ee = (e, r = "toggle") => ({
       quiet: !1
     }
   }
-), Jt = h(
+), Qt = g(
   ({
     children: e,
     className: r,
@@ -1002,41 +986,31 @@ const Ee = (e, r = "toggle") => ({
     "a",
     {
       ref: l,
-      className: f(
-        Oe({ color: a, fontSize: s, fontWeight: t, quiet: o }),
+      className: u(
+        Be({ color: a, fontSize: s, fontWeight: t, quiet: o }),
         r
       ),
       ...i,
       children: e
     }
   )
-), Te = h(
+), We = g(
   function({ title: r, children: a, className: s, hasMargin: t, ...o }, i) {
     return /* @__PURE__ */ n.jsxs(
       "div",
       {
         ref: i,
-        className: f("space-y-1", s, t && "mb-4"),
+        className: u("space-y-1", s, t && "mb-4"),
         ...o,
         children: [
-          /* @__PURE__ */ n.jsx(
-            j,
-            {
-              as: "h4",
-              fontSize: "xs",
-              fontWeight: "normal",
-              color: "gray",
-              className: "leading-none",
-              children: r
-            }
-          ),
-          /* @__PURE__ */ n.jsx(j, { as: "p", fontSize: "sm", fontWeight: "normal", children: a })
+          /* @__PURE__ */ n.jsx(L, { as: "h6", color: "gray", className: "leading-none", children: r }),
+          /* @__PURE__ */ n.jsx(C, { as: "small", fontWeight: "normal", children: a })
         ]
       }
     );
   }
 );
-function We(e = 1) {
+function qe(e = 1) {
   switch (e) {
     case 1:
       return "col-span-1";
@@ -1066,7 +1040,7 @@ function We(e = 1) {
       return "col-span-1";
   }
 }
-function Be(e = 4) {
+function Pe(e = 4) {
   switch (e) {
     case 1:
       return "grid-cols-1";
@@ -1096,25 +1070,25 @@ function Be(e = 4) {
       return "grid-cols-4";
   }
 }
-const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }, i) {
-  const l = We(s);
-  return /* @__PURE__ */ n.jsx("li", { ref: i, className: f(l, a), ...o, children: /* @__PURE__ */ n.jsx(Te, { title: t, children: r }) });
-}), Pe = h(
+const He = g(function({ children: r, className: a, span: s = 1, title: t, ...o }, i) {
+  const l = qe(s);
+  return /* @__PURE__ */ n.jsx("li", { ref: i, className: u(l, a), ...o, children: /* @__PURE__ */ n.jsx(We, { title: t, children: r }) });
+}), Fe = g(
   function({ children: r, className: a, columns: s = 4, ...t }, o) {
-    const i = Be(s);
+    const i = Pe(s);
     return /* @__PURE__ */ n.jsx(
       "ul",
       {
         ref: o,
-        className: f("grid gap-4", i, a),
+        className: u("grid gap-4", i, a),
         ...t,
         children: r
       }
     );
   }
-), Kt = Object.assign(Pe, {
-  Item: qe
-}), He = g(
+), Yt = Object.assign(Fe, {
+  Item: He
+}), Ge = f(
   "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
   {
     variants: {
@@ -1154,9 +1128,9 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       shape: "circle"
     }
   }
-), Fe = g(
+), $e = f(
   "absolute inset-0 h-full w-full object-cover"
-), $e = h(
+), De = g(
   ({
     variant: e = "primary",
     size: r = "md",
@@ -1168,20 +1142,20 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
     "div",
     {
       ref: i,
-      className: f(He({ variant: e, size: r, shape: a }), s),
+      className: u(Ge({ variant: e, size: r, shape: a }), s),
       ...o,
       children: t
     }
   )
-), Ge = h(
+), Xe = g(
   ({ src: e, alt: r, className: a, onError: s, ...t }, o) => {
-    const [i, l] = k(!1);
-    C(() => {
+    const [i, l] = j(!1);
+    E(() => {
       l(!1);
     }, [e]);
-    const d = L(
-      (u) => {
-        l(!0), s?.(u);
+    const d = A(
+      (m) => {
+        l(!0), s?.(m);
       },
       [s]
     );
@@ -1191,18 +1165,18 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
         ref: o,
         src: e,
         alt: r,
-        className: f(Fe(), a),
+        className: u($e(), a),
         onError: d,
         ...t
       }
     );
   }
-), Qt = Object.assign($e, {
+), Zt = Object.assign(De, {
   /**
    * AvatarImage sub-component for displaying images with fallback behavior
    */
-  Image: Ge
-}), Ue = g(
+  Image: Xe
+}), Ue = f(
   "inline-flex items-center justify-center font-medium transition-all duration-200 select-none gap-1 min-h-[1.25rem]",
   {
     variants: {
@@ -1389,7 +1363,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       iconOnly: !1
     }
   }
-), Yt = h(
+), er = g(
   ({
     variant: e = "default",
     shape: r = "square",
@@ -1400,13 +1374,13 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
     className: i,
     children: l,
     ...d
-  }, u) => {
+  }, m) => {
     const p = !(l != null && l !== "") && !!(t || o);
     return /* @__PURE__ */ n.jsx(
       "span",
       {
-        ref: u,
-        className: f(
+        ref: m,
+        className: u(
           Ue({
             variant: e,
             color: a,
@@ -1431,7 +1405,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       }
     );
   }
-), P = (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("", {
+), 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" }))), 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, "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" }))), 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, "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" }))), 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 (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" }))), 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, "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" }))), 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, "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" }))), 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("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" }))), tt = (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" }))), rt = (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" }))), nt = f("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -1444,45 +1418,45 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
   defaultVariants: {
     size: "md"
   }
-}), rt = h(
+}), at = g(
   ({ shape: e = "square", size: r, name: a = "spenicle", ...s }, t) => {
     const o = {
       spenicle: {
-        square: P,
-        rounded: De,
-        circle: Xe
+        square: H,
+        rounded: Je,
+        circle: Ke
       },
       hub: {
-        square: Je,
-        rounded: Ke,
-        circle: Qe
+        square: Qe,
+        rounded: Ye,
+        circle: Ze
       },
       notunic: {
-        square: Ye,
-        rounded: Ze,
-        circle: et
+        square: et,
+        rounded: tt,
+        circle: rt
       }
-    }, l = (o[a] || o.spenicle)[e || "square"] || P;
+    }, l = (o[a] || o.spenicle)[e || "square"] || H;
     return /* @__PURE__ */ n.jsx(
       l,
       {
         ref: t,
         ...s,
-        className: f("inline-block", tt({ size: r }))
+        className: u("inline-block", nt({ size: r }))
       }
     );
   }
-), Zt = h(
+), tr = g(
   ({ name: e = "spenicle", size: r = "md", shape: a, ...s }, t) => /* @__PURE__ */ n.jsx(
     "span",
     {
       ref: t,
-      className: f("inline-flex items-center gap-2"),
+      className: u("inline-flex items-center gap-2"),
       ...s,
-      children: /* @__PURE__ */ n.jsx(rt, { name: e, shape: a, size: r, "aria-hidden": "true" })
+      children: /* @__PURE__ */ n.jsx(at, { name: e, shape: a, size: r, "aria-hidden": "true" })
     }
   )
-), nt = g(
+), st = f(
   "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: {
@@ -1507,7 +1481,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       size: "md"
     }
   }
-), J = z.forwardRef(
+), J = _.forwardRef(
   function({
     className: r,
     variant: a = "primary",
@@ -1517,14 +1491,14 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
     busy: i,
     children: l,
     ...d
-  }, u) {
-    const m = s === "sm" ? "sm" : s === "lg" ? "md" : "sm", x = () => a === "primary" || a === "destructive" ? "white" : "inherit";
+  }, m) {
+    const h = s === "sm" ? "sm" : s === "lg" ? "md" : "sm", x = () => a === "primary" || a === "destructive" ? "white" : "inherit";
     return /* @__PURE__ */ n.jsxs(
       "button",
       {
-        ref: u,
+        ref: m,
         type: o,
-        className: f(nt({ variant: a, size: s }), r),
+        className: u(st({ variant: a, size: s }), r),
         disabled: t || i,
         "aria-disabled": t || i,
         inert: t || i ? !0 : void 0,
@@ -1532,10 +1506,10 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
         ...d,
         children: [
           i && /* @__PURE__ */ n.jsx(
-            E,
+            N,
             {
-              as: H,
-              size: m,
+              as: F,
+              size: h,
               color: x(),
               className: "animate-spin"
             }
@@ -1545,7 +1519,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       }
     );
   }
-), at = g(
+), ot = f(
   "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: {
@@ -1568,7 +1542,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       size: "md"
     }
   }
-), er = z.forwardRef(function({
+), rr = _.forwardRef(function({
   className: r,
   variant: a = "primary",
   size: s = "md",
@@ -1577,8 +1551,8 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
   href: i,
   onClick: l,
   ...d
-}, u) {
-  const m = (x) => {
+}, m) {
+  const h = (x) => {
     if (t) {
       x.preventDefault();
       return;
@@ -1588,18 +1562,18 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
   return /* @__PURE__ */ n.jsx(
     "a",
     {
-      ref: u,
+      ref: m,
       href: t ? void 0 : i,
-      className: f(at({ variant: a, size: s }), r),
+      className: u(ot({ variant: a, size: s }), r),
       "aria-disabled": t ? !0 : void 0,
       tabIndex: t ? -1 : void 0,
       role: t ? "link" : void 0,
-      onClick: m,
+      onClick: h,
       ...d,
       children: o
     }
   );
-}), st = g(
+}), it = f(
   "z-70 min-w-56 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform shadow-lg",
   {
     variants: {
@@ -1617,29 +1591,29 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       open: !1
     }
   }
-), K = R(void 0), ot = K.Provider, it = () => {
-  const e = O(K);
+), K = O(void 0), lt = K.Provider, ct = () => {
+  const e = S(K);
   if (!e)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return e;
-}, lt = h(
+}, dt = g(
   ({ children: e }, r) => /* @__PURE__ */ n.jsx("ul", { ref: r, className: "flex flex-col gap-1", children: e })
-), ct = h(
+), ut = g(
   ({ children: e, disabled: r, onClick: a, active: s, ...t }, o) => {
-    const { preserve: i, onClose: l } = it(), d = (u) => {
-      a?.(u), i || l();
+    const { preserve: i, onClose: l } = ct(), d = (m) => {
+      a?.(m), i || l();
     };
     return /* @__PURE__ */ n.jsx("li", { ref: o, ...t, children: /* @__PURE__ */ n.jsxs(
       J,
       {
         variant: "ghost",
-        className: f("justify-start w-full gap-2"),
+        className: u("justify-start w-full gap-2"),
         disabled: r,
         onClick: d,
         children: [
           e,
           s && /* @__PURE__ */ n.jsx(
-            E,
+            N,
             {
               as: oe,
               color: "inherit",
@@ -1651,7 +1625,7 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       }
     ) });
   }
-), dt = ({
+), mt = ({
   isOpen: e,
   onClose: r,
   size: a = "md",
@@ -1661,8 +1635,8 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
   gap: i = 4,
   preserve: l
 }) => {
-  const d = T(null), u = re();
-  return /* @__PURE__ */ n.jsx(ot, { value: { onClose: r, preserve: !!l }, children: /* @__PURE__ */ n.jsxs("div", { className: "relative w-fit", children: [
+  const d = B(null), m = re();
+  return /* @__PURE__ */ n.jsx(lt, { value: { onClose: r, preserve: !!l }, children: /* @__PURE__ */ n.jsxs("div", { className: "relative w-fit", children: [
     ne(t, {
       // @ts-expect-error: ref is valid for button or forwardRef components
       ref: d
@@ -1670,22 +1644,22 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
     /* @__PURE__ */ n.jsx(
       Ce,
       {
-        id: u,
+        id: m,
         triggerRef: d,
         isOpen: e,
         onClose: r,
         placement: o,
         gap: i,
         maxWidth: "sm",
-        className: f(st({ size: a, open: e })),
+        className: u(it({ size: a, open: e })),
         children: s
       }
     )
   ] }) });
-}, V = Object.assign(dt, {
-  Content: lt,
-  Item: ct
-}), ut = h(
+}, V = Object.assign(mt, {
+  Content: dt,
+  Item: ut
+}), ht = g(
   (e, r) => {
     const {
       children: a,
@@ -1695,19 +1669,19 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       preserve: i,
       label: l,
       ...d
-    } = e ?? {}, [u, m] = k(!1);
-    C(() => {
-      s?.(u);
-    }, [u, s]);
+    } = e ?? {}, [m, h] = j(!1);
+    E(() => {
+      s?.(m);
+    }, [m, s]);
     const x = () => {
-      m(!1);
+      h(!1);
     }, p = (b) => {
-      b.stopPropagation(), m((w) => !w), t?.(b);
+      b.stopPropagation(), h((w) => !w), t?.(b);
     };
     return /* @__PURE__ */ n.jsx(
       V,
       {
-        isOpen: u,
+        isOpen: m,
         onClose: x,
         placement: o,
         preserve: i,
@@ -1716,13 +1690,13 @@ const qe = h(function({ children: r, className: a, span: s = 1, title: t, ...o }
       }
     );
   }
-), tr = Object.assign(ut, {
+), nr = Object.assign(ht, {
   Item: V.Item
 });
-function ft(e = "primary") {
+function gt(e = "primary") {
   return e === "primary" || e === "destructive" ? "white" : "inherit";
 }
-const mt = g(
+const ft = f(
   "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: {
@@ -1753,7 +1727,7 @@ const mt = g(
       shape: "rounded"
     }
   }
-), ht = z.forwardRef(
+), xt = _.forwardRef(
   function({
     className: r,
     variant: a = "primary",
@@ -1763,16 +1737,16 @@ const mt = g(
     busy: i,
     as: l,
     "aria-label": d,
-    ...u
-  }, m) {
-    const x = ft(a);
+    ...m
+  }, h) {
+    const x = gt(a);
     return /* @__PURE__ */ n.jsx(
       "button",
       {
-        ref: m,
+        ref: h,
         type: "button",
-        className: f(
-          mt({
+        className: u(
+          ft({
             variant: a,
             size: s,
             shape: t
@@ -1784,20 +1758,20 @@ const mt = g(
         "aria-label": d,
         inert: o || i ? !0 : void 0,
         "aria-busy": i ? !0 : void 0,
-        ...u,
+        ...m,
         children: i ? /* @__PURE__ */ n.jsx(
-          E,
+          N,
           {
-            as: H,
+            as: F,
             size: "sm",
             color: x,
             className: "animate-spin"
           }
-        ) : /* @__PURE__ */ n.jsx(E, { as: l, size: "sm", color: x })
+        ) : /* @__PURE__ */ n.jsx(N, { as: l, size: "sm", color: x })
       }
     );
   }
-), gt = h(
+), bt = g(
   (e, r) => {
     const {
       as: a = ie,
@@ -1807,30 +1781,30 @@ const mt = g(
       placement: i,
       preserve: l,
       ...d
-    } = e ?? {}, [u, m] = k(!1);
-    C(() => {
-      t?.(u);
-    }, [u, t]);
+    } = e ?? {}, [m, h] = j(!1);
+    E(() => {
+      t?.(m);
+    }, [m, t]);
     const x = () => {
-      m(!1);
+      h(!1);
     }, p = (b) => {
-      b.stopPropagation(), m((w) => !w), o?.(b);
+      b.stopPropagation(), h((w) => !w), o?.(b);
     };
     return /* @__PURE__ */ n.jsx(
       V,
       {
-        isOpen: u,
+        isOpen: m,
         onClose: x,
         placement: i,
         preserve: l,
         content: /* @__PURE__ */ n.jsx(V.Content, { children: s }),
-        children: /* @__PURE__ */ n.jsx(ht, { ref: r, as: a, onClick: p, ...d })
+        children: /* @__PURE__ */ n.jsx(xt, { ref: r, as: a, onClick: p, ...d })
       }
     );
   }
-), rr = Object.assign(gt, {
+), ar = Object.assign(bt, {
   Item: V.Item
-}), xt = g(
+}), pt = f(
   "flex justify-between transition-colors duration-200 w-full",
   {
     variants: {
@@ -1862,7 +1836,7 @@ const mt = g(
       as: "button"
     }
   }
-), bt = h(
+), wt = g(
   ({ children: e }, r) => /* @__PURE__ */ n.jsx(
     "ul",
     {
@@ -1871,16 +1845,16 @@ const mt = g(
       children: e
     }
   )
-), pt = h(
+), vt = g(
   ({ children: e }, r) => /* @__PURE__ */ n.jsx(
     "li",
     {
       ref: r,
       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__ */ n.jsx(j, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
+      children: /* @__PURE__ */ n.jsx(C, { as: "small", color: "gray", ellipsis: !0, clamp: 1, children: e })
     }
   )
-), wt = h(
+), yt = g(
   ({
     size: e = "md",
     shape: r = "rounded",
@@ -1891,41 +1865,31 @@ const mt = g(
     supplementaryInfo: i,
     bordered: l = !1,
     as: d = "button",
-    className: u,
-    ...m
+    className: m,
+    ...h
   }, x) => /* @__PURE__ */ n.jsx(
     d,
     {
       ref: x,
-      className: f(
-        xt({ size: e, shape: r, bordered: l, as: d }),
-        u,
+      className: u(
+        pt({ size: e, shape: r, bordered: l, as: d }),
+        m,
         "@container/card"
       ),
-      ...m,
+      ...h,
       children: /* @__PURE__ */ n.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
         a && /* @__PURE__ */ n.jsx("div", { className: "flex-shrink-0", children: a }),
         /* @__PURE__ */ n.jsxs("div", { className: "w-full min-w-0", children: [
           /* @__PURE__ */ n.jsx("div", { className: "mb-2", children: /* @__PURE__ */ n.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ n.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ n.jsx(
-              j,
-              {
-                as: "h3",
-                fontSize: "base",
-                fontWeight: "semibold",
-                className: "break-words leading-tight",
-                children: s
-              }
-            ),
-            t && /* @__PURE__ */ n.jsx("div", { className: "mt-1", children: typeof t == "string" ? /* @__PURE__ */ n.jsx(j, { as: "p", fontSize: "sm", color: "gray", children: t }) : /* @__PURE__ */ n.jsx("div", { className: "min-w-0 overflow-hidden", children: t }) })
+            /* @__PURE__ */ n.jsx(L, { as: "h6", className: "break-words leading-tight", children: s }),
+            t && /* @__PURE__ */ n.jsx("div", { className: "mt-1", children: typeof t == "string" ? /* @__PURE__ */ n.jsx(C, { as: "small", color: "gray", children: t }) : /* @__PURE__ */ n.jsx("div", { className: "min-w-0 overflow-hidden", children: t }) })
           ] }) }) }),
           /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
             o && /* @__PURE__ */ n.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: o }),
             i && /* @__PURE__ */ n.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof i == "string" ? /* @__PURE__ */ n.jsx(
-              j,
+              C,
               {
-                as: "p",
-                fontSize: "sm",
+                as: "small",
                 color: "gray",
                 className: "truncate",
                 align: "right",
@@ -1937,10 +1901,10 @@ const mt = g(
       ] })
     }
   )
-), nr = Object.assign(wt, {
-  List: bt,
-  ListItem: pt
-}), vt = g(
+), sr = Object.assign(yt, {
+  List: wt,
+  ListItem: vt
+}), jt = f(
   "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: {
@@ -1954,14 +1918,14 @@ const mt = g(
       size: "md"
     }
   }
-), ar = z.forwardRef(
+), or = _.forwardRef(
   function({ className: r, size: a = "md", disabled: s = !1, children: t, ...o }, i) {
     return /* @__PURE__ */ n.jsxs(
       "button",
       {
         ref: i,
         type: "button",
-        className: f(vt({ size: a }), r),
+        className: u(jt({ size: a }), r),
         disabled: s,
         "aria-disabled": s,
         "aria-label": `${t}, removable`,
@@ -1969,30 +1933,51 @@ const mt = g(
         ...o,
         children: [
           /* @__PURE__ */ n.jsx("span", { className: "flex-shrink-0", children: t }),
-          /* @__PURE__ */ n.jsx(E, { as: le, color: "inherit", size: a === "lg" ? "md" : "sm" })
+          /* @__PURE__ */ n.jsx(N, { as: le, color: "inherit", size: a === "lg" ? "md" : "sm" })
         ]
       }
     );
   }
-), yt = [
+), kt = [
   // Headings
   "[&_h1]:text-2xl",
+  "[&_h1]:leading-loose",
   "[&_h1]:font-bold",
   "[&_h1]:my-2",
-  "[&_h2]:text-xl",
-  "[&_h2]:font-bold",
-  "[&_h2]:my-1.5",
-  "[&_h3]:text-lg",
-  "[&_h3]:font-semibold",
-  "[&_h3]:my-1",
+  "[&_h2]:text-2xl",
+  "[&_h2]:leading-relaxed",
+  "[&_h2]:font-semibold",
+  "[&_h2]:my-2",
+  "[&_h3]:text-2xl",
+  "[&_h3]:leading-relaxed",
+  "[&_h3]:font-medium",
+  "[&_h3]:my-1.5",
+  "[&_h4]:text-xl",
+  "[&_h4]:leading-normal",
+  "[&_h4]:font-bold",
+  "[&_h4]:my-1.5",
+  "[&_h5]:text-lg",
+  "[&_h5]:leading-normal",
+  "[&_h5]:font-semibold",
+  "[&_h5]:my-1.5",
+  "[&_h6]:text-base",
+  "[&_h6]:leading-normal",
+  "[&_h6]:font-medium",
+  "[&_h6]:my-1",
   // Lists
   "[&_ul]:list-disc",
   "[&_ul]:ml-6",
   "[&_ul]:my-2",
+  "[&_ul]:text-base",
+  "[&_ul]:leading-normal",
   "[&_ol]:list-decimal",
   "[&_ol]:ml-6",
   "[&_ol]:my-2",
+  "[&_ol]:text-base",
+  "[&_ol]:leading-normal",
   "[&_li]:my-0.5",
+  "[&_li]:text-base",
+  "[&_li]:leading-normal",
   // Links
   "[&_a]:text-primary",
   "[&_a]:underline",
@@ -2004,20 +1989,26 @@ const mt = g(
   "[&_u]:underline",
   "[&_s]:line-through",
   // Paragraphs
+  "[&_p]:text-base",
+  "[&_p]:leading-normal",
+  "[&_p]:text-ghost",
   "[&_p]:my-2",
   "[&_p:first-child]:mt-0",
   "[&_p:last-child]:mb-0"
-], jt = g("block w-full break-words", {
-  variants: {
-    scrollable: {
-      true: "overflow-y-auto",
-      false: "overflow-visible"
+], Nt = f(
+  "block w-full break-words text-ghost text-base leading-normal",
+  {
+    variants: {
+      scrollable: {
+        true: "overflow-y-auto",
+        false: "overflow-visible"
+      }
+    },
+    defaultVariants: {
+      scrollable: !1
     }
-  },
-  defaultVariants: {
-    scrollable: !1
   }
-}), kt = z.forwardRef(({ content: e, scrollable: r = !1, maxHeight: a, className: s, ...t }, o) => /* @__PURE__ */ n.jsx(
+), Et = _.forwardRef(({ content: e, scrollable: r = !1, maxHeight: a, className: s, ...t }, o) => /* @__PURE__ */ n.jsx(
   "div",
   {
     ref: o,
@@ -2025,16 +2016,16 @@ const mt = g(
     "aria-label": "Formatted text content",
     dangerouslySetInnerHTML: { __html: e },
     style: r && a ? { maxHeight: `${a}rem` } : void 0,
-    className: f(
-      jt({ scrollable: r }),
-      ...yt,
+    className: u(
+      Nt({ scrollable: r }),
+      ...kt,
       s
     ),
     ...t
   }
 ));
-kt.displayName = "FormattedText";
-const Nt = g("h-px w-full bg-border border-0", {
+Et.displayName = "FormattedText";
+const Ct = f("h-px w-full bg-border border-0", {
   variants: {
     hasMargin: {
       true: "mb-4",
@@ -2044,16 +2035,16 @@ const Nt = g("h-px w-full bg-border border-0", {
   defaultVariants: {
     hasMargin: !1
   }
-}), sr = h(
+}), ir = g(
   ({ hasMargin: e = !1, className: r, ...a }, s) => /* @__PURE__ */ n.jsx(
     "hr",
     {
       ref: s,
-      className: f(Nt({ hasMargin: e }), r),
+      className: u(Ct({ hasMargin: e }), r),
       ...a
     }
   )
-), Et = g(
+), _t = f(
   "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
   {
     variants: {
@@ -2072,37 +2063,37 @@ const Nt = g("h-px w-full bg-border border-0", {
       hasGrayBackground: !1
     }
   }
-), Ct = g(
+), Vt = f(
   "flex flex-row items-center gap-3 mb-2"
-), or = z.forwardRef(
+), lr = _.forwardRef(
   function({ icon: r, title: a, subtitle: s, action: t, className: o, hasGrayBackground: i, ...l }, d) {
     return /* @__PURE__ */ n.jsxs(
       "section",
       {
         ref: d,
-        className: f(Et({ hasGrayBackground: i }), o),
+        className: u(_t({ hasGrayBackground: i }), o),
         role: "status",
         "aria-label": "No results found",
         ...l,
         children: [
-          /* @__PURE__ */ n.jsxs("header", { className: Ct(), children: [
-            /* @__PURE__ */ n.jsx(E, { as: r, size: "lg", color: "ghost", "aria-hidden": "true" }),
-            /* @__PURE__ */ n.jsx(j, { as: "h2", fontSize: "lg", children: a })
+          /* @__PURE__ */ n.jsxs("header", { className: Vt(), children: [
+            /* @__PURE__ */ n.jsx(N, { as: r, size: "lg", color: "ghost", "aria-hidden": "true" }),
+            /* @__PURE__ */ n.jsx(L, { as: "h5", color: "neutral", children: a })
           ] }),
-          s && /* @__PURE__ */ n.jsx(j, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
+          s && /* @__PURE__ */ n.jsx(C, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
           t && /* @__PURE__ */ n.jsx("div", { role: "group", "aria-label": "Available actions", children: t })
         ]
       }
     );
   }
-), Q = R(null), zt = Q.Provider;
+), Q = O(null), It = Q.Provider;
 function W() {
-  const e = O(Q);
+  const e = S(Q);
   if (!e)
     throw new Error("Table compound components must be used within <Table>");
   return e;
 }
-const B = (e) => {
+const q = (e) => {
   if (e < 1 || e > 12)
     throw new Error("Column span must be between 1 and 12");
   switch (e) {
@@ -2133,7 +2124,7 @@ const B = (e) => {
     default:
       return "grid-cols-2";
   }
-}, Vt = (e) => {
+}, zt = (e) => {
   if (e < 1 || e > 12)
     throw new Error("Column span must be between 1 and 12");
   switch (e) {
@@ -2164,60 +2155,60 @@ const B = (e) => {
     default:
       return "col-span-2";
   }
-}, It = h(
+}, At = g(
   ({ children: e, className: r, ...a }, s) => {
     const { columns: t } = W();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
         role: "rowgroup",
-        className: f("bg-neutral-soft", r),
+        className: u("bg-neutral-soft", r),
         ...a,
         ref: s,
         children: /* @__PURE__ */ n.jsx(
           "div",
           {
             role: "row",
-            className: f("grid gap-4", B(t)),
+            className: u("grid gap-4", q(t)),
             children: e
           }
         )
       }
     );
   }
-), At = h(
-  ({ children: e, className: r, ...a }, s) => /* @__PURE__ */ n.jsx("div", { role: "rowgroup", ref: s, className: f(r), ...a, children: e })
-), Lt = h(
+), Lt = g(
+  ({ children: e, className: r, ...a }, s) => /* @__PURE__ */ n.jsx("div", { role: "rowgroup", ref: s, className: u(r), ...a, children: e })
+), Mt = g(
   ({ children: e, className: r, ...a }, s) => {
     const { columns: t } = W();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
         role: "rowgroup",
-        className: f("bg-neutral-soft", r),
+        className: u("bg-neutral-soft", r),
         ...a,
         ref: s,
         children: /* @__PURE__ */ n.jsx(
           "div",
           {
             role: "row",
-            className: f("grid gap-4", B(t)),
+            className: u("grid gap-4", q(t)),
             children: e
           }
         )
       }
     );
   }
-), Mt = h(
+), Rt = g(
   ({ children: e, className: r, ...a }, s) => {
     const { columns: t } = W();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
         role: "row",
-        className: f(
+        className: u(
           "grid gap-4",
-          B(t),
+          q(t),
           "border-b border-border last:border-0",
           r
         ),
@@ -2227,7 +2218,7 @@ const B = (e) => {
       }
     );
   }
-), Y = h(
+), Y = g(
   ({ as: e = "td", span: r, align: a = "left", children: s, className: t, ...o }, i) => {
     const l = e === "th" ? "columnheader" : "cell";
     let d = "text-left";
@@ -2236,10 +2227,10 @@ const B = (e) => {
       {
         ref: i,
         role: l,
-        className: f(
+        className: u(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
-          Vt(r),
+          zt(r),
           d,
           "truncate overflow-hidden whitespace-nowrap",
           t
@@ -2249,39 +2240,39 @@ const B = (e) => {
       }
     );
   }
-), St = h(
+), Tt = g(
   (e, r) => /* @__PURE__ */ n.jsx(
     Y,
     {
       ...e,
       as: "td",
       ref: r,
-      className: f(
+      className: u(
         "truncate overflow-hidden whitespace-nowrap",
         e.className
       )
     }
   )
-), _t = h(
+), Ot = g(
   (e, r) => /* @__PURE__ */ n.jsx(
     Y,
     {
       ...e,
       as: "th",
       ref: r,
-      className: f(
+      className: u(
         "truncate overflow-hidden whitespace-nowrap",
         e.className
       )
     }
   )
-), Rt = h(
-  ({ children: e, className: r, columns: a = 12, ...s }, t) => /* @__PURE__ */ n.jsx(zt, { value: { columns: a }, children: /* @__PURE__ */ n.jsx(
+), St = g(
+  ({ children: e, className: r, columns: a = 12, ...s }, t) => /* @__PURE__ */ n.jsx(It, { value: { columns: a }, children: /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
       role: "table",
-      className: f(
+      className: u(
         // Versaur design system: border, background, shadow, rounded, spacing
         "w-full overflow-x-auto border border-border bg-background rounded-lg ",
         "text-foreground",
@@ -2293,14 +2284,14 @@ const B = (e) => {
       children: e
     }
   ) })
-), ir = Object.assign(Rt, {
-  Header: It,
-  HeaderItem: _t,
-  Body: At,
-  Footer: Lt,
-  Row: Mt,
-  RowItem: St
-}), Ot = g(
+), cr = Object.assign(St, {
+  Header: At,
+  HeaderItem: Ot,
+  Body: Lt,
+  Footer: Mt,
+  Row: Rt,
+  RowItem: Tt
+}), Bt = f(
   // Base classes
   "block transition-colors duration-200",
   {
@@ -2308,14 +2299,14 @@ const B = (e) => {
       variant: {
         white: "bg-white border border-border",
         neutral: "bg-neutral border border-gray-200",
-        primary: "bg-primary-soft border border-primary",
-        secondary: "bg-secondary-soft border border-secondary",
-        tertiary: "bg-tertiary-soft border border-tertiary",
+        primary: "bg-primary border border-primary",
+        secondary: "bg-secondary border border-secondary",
+        tertiary: "bg-tertiary border border-tertiary",
         ghost: "bg-transparent border border-ghost",
-        success: "bg-success-soft border border-success",
-        info: "bg-info-soft border border-info",
-        warning: "bg-warning-soft border border-warning",
-        danger: "bg-danger-soft border border-danger"
+        success: "bg-success border border-success",
+        info: "bg-info border border-info",
+        warning: "bg-warning border border-warning",
+        danger: "bg-danger border border-danger"
       },
       size: {
         xs: "p-2",
@@ -2335,23 +2326,30 @@ const B = (e) => {
       shape: "rounded"
     }
   }
-), lr = h(
-  ({ variant: e = "white", size: r = "md", shape: a = "rounded", className: s, ...t }, o) => /* @__PURE__ */ n.jsx(
-    "div",
+), dr = g(
+  ({
+    as: e = "div",
+    variant: r = "white",
+    size: a = "md",
+    shape: s = "rounded",
+    className: t,
+    ...o
+  }, i) => /* @__PURE__ */ n.jsx(
+    e,
     {
-      ref: o,
-      className: f(Ot({ variant: e, size: r, shape: a }), s),
-      ...t
+      ref: i,
+      className: u(Bt({ variant: r, size: a, shape: s }), t),
+      ...o
     }
   )
 );
-function Tt({ src: e }) {
-  const [r, a] = k(!1), [s, t] = k(!1), o = T(!1), i = () => {
+function Wt({ src: e }) {
+  const [r, a] = j(!1), [s, t] = j(!1), o = B(!1), i = () => {
     a(!0);
   }, l = () => {
     t(!0);
   };
-  return C(() => {
+  return E(() => {
     if (!e) return;
     const d = new Image();
     return d.src = e, d.onload = () => {
@@ -2368,7 +2366,7 @@ function Tt({ src: e }) {
     handleError: l
   };
 }
-const Wt = g("block object-cover", {
+const qt = f("block object-cover", {
   variants: {
     position: {
       cover: "object-cover",
@@ -2398,7 +2396,7 @@ const Wt = g("block object-cover", {
     size: "auto",
     shape: "rectangle"
   }
-}), Z = g(
+}), Z = f(
   "flex items-center justify-center bg-neutral-soft text-ghost border border-border",
   {
     variants: {
@@ -2421,7 +2419,7 @@ const Wt = g("block object-cover", {
     }
   }
 );
-function Bt({
+function Pt({
   className: e,
   shape: r,
   size: a,
@@ -2431,12 +2429,12 @@ function Bt({
   return /* @__PURE__ */ n.jsx(
     de,
     {
-      className: f(Z({ shape: r, size: a }), e),
+      className: u(Z({ shape: r, size: a }), e),
       style: { height: s, width: t }
     }
   );
 }
-function qt({
+function Ht({
   alt: e,
   width: r,
   height: a,
@@ -2466,7 +2464,7 @@ function qt({
     }
   );
 }
-const q = h(
+const P = g(
   ({
     src: e,
     alt: r,
@@ -2477,24 +2475,24 @@ const q = h(
     loading: i = "lazy",
     position: l = "cover",
     size: d = "auto",
-    shape: u,
-    className: m,
+    shape: m,
+    className: h,
     ...x
   }, p) => {
-    const { loaded: b, errored: w, handleLoad: v, handleError: N } = Tt({
+    const { loaded: b, errored: w, handleLoad: v, handleError: k } = Wt({
       src: e
     }), y = typeof t == "number" ? t : Number(t), I = typeof o == "number" ? o : Number(o);
     return !b && !w ? /* @__PURE__ */ n.jsx(
-      Bt,
+      Pt,
       {
-        shape: u,
+        shape: m,
         width: y,
         height: I
       }
     ) : w ? /* @__PURE__ */ n.jsx(
-      qt,
+      Ht,
       {
-        shape: u,
+        shape: m,
         alt: r,
         width: y,
         height: I
@@ -2508,55 +2506,55 @@ const q = h(
         width: y,
         height: I,
         loading: i,
-        className: f(
-          Wt({
+        className: u(
+          qt({
             position: l,
             size: d,
-            shape: u
+            shape: m
           }),
-          m
+          h
         ),
-        onLoad: (A) => {
-          v(), a?.(A);
+        onLoad: (z) => {
+          v(), a?.(z);
         },
-        onError: (A) => {
-          N(), s?.(A);
+        onError: (z) => {
+          k(), s?.(z);
         },
         ...x
       }
     );
   }
-), cr = h((e, r) => /* @__PURE__ */ n.jsx(q, { ref: r, ...e, shape: "circle" })), dr = h((e, r) => /* @__PURE__ */ n.jsx(q, { ref: r, ...e, shape: "square" })), ur = h((e, r) => /* @__PURE__ */ n.jsx(q, { ref: r, ...e, shape: "rectangle" }));
+), ur = g((e, r) => /* @__PURE__ */ n.jsx(P, { ref: r, ...e, shape: "circle" })), mr = g((e, r) => /* @__PURE__ */ n.jsx(P, { ref: r, ...e, shape: "square" })), hr = g((e, r) => /* @__PURE__ */ n.jsx(P, { ref: r, ...e, shape: "rectangle" }));
 export {
   Ut as A,
-  Yt as B,
-  nr as C,
-  ar as F,
-  G as H,
-  E as I,
+  er as B,
+  sr as C,
+  or as F,
+  L as H,
+  N as I,
   V as M,
-  or as N,
-  ir as T,
-  Dt as a,
-  Xt as b,
-  Jt as c,
-  Te as d,
-  Kt as e,
-  Qt as f,
-  Zt as g,
+  lr as N,
+  cr as T,
+  Jt as a,
+  Kt as b,
+  Qt as c,
+  We as d,
+  Yt as e,
+  Zt as f,
+  tr as g,
   J as h,
-  er as i,
-  tr as j,
-  rr as k,
-  ht as l,
-  kt as m,
-  yt as n,
-  sr as o,
-  j as p,
-  lr as q,
-  cr as r,
-  dr as s,
-  ur as t,
-  q as u,
+  rr as i,
+  nr as j,
+  ar as k,
+  xt as l,
+  Et as m,
+  kt as n,
+  ir as o,
+  C as p,
+  dr as q,
+  ur as r,
+  mr as s,
+  hr as t,
+  P as u,
   Ne as v
 };