@moondreamsdev/dreamer-ui 1.7.7-test.4 → 1.7.7-test.6

package/dist/components.esm.js

@@ -1,97 +1,97 @@
-import { jsxs as E, jsx as u, Fragment as J } from "react/jsx-runtime";
-import z, { useId as I, useState as x, createElement as Y, useEffect as C, useCallback as A, useMemo as W, useRef as j, isValidElement as P, cloneElement as ee } from "react";
-import { join as w } from "./utils.esm.js";
-import { b as te, C as re, a as ne, c as oe, E as ae, Q as se } from "./QuestionMarkCircled-BVBF3skB.js";
-import { n as H } from "./Toast-CKF3_Xwk.js";
-import { A as et, T as tt } from "./Toast-CKF3_Xwk.js";
-import { E as ie, X as le } from "./X-CIoyLewf.js";
-import { createPortal as M } from "react-dom";
+import { jsxs as E, jsx as c, Fragment as W } from "react/jsx-runtime";
+import z, { useId as $, useState as x, createElement as Y, useEffect as A, useCallback as I, useMemo as U, useRef as R, isValidElement as ee, cloneElement as te } from "react";
+import { join as y } from "./utils.esm.js";
+import { b as re, C as ne, a as oe, c as ae, E as se, Q as ie } from "./QuestionMarkCircled-BVBF3skB.js";
+import { n as k } from "./Toast-DfNdN3Lk.js";
+import { A as at, T as st } from "./Toast-DfNdN3Lk.js";
+import { E as le, X as P } from "./X-CIoyLewf.js";
+import { createPortal as _ } from "react-dom";
 function q({
   id: o,
   title: a,
-  content: e,
-  children: n,
-  className: t = "",
-  disabled: r = !1,
+  content: t,
+  children: r,
+  className: e = "",
+  disabled: n = !1,
   isOpen: s = !1,
-  onToggle: d,
-  triggerClassName: c = "",
-  bodyClassName: l = ""
+  onToggle: l,
+  triggerClassName: u = "",
+  bodyClassName: d = ""
 }) {
-  const b = I(), i = o || `accordion-item-${b}`, v = `${i}-header`, f = `${i}-panel`, m = () => {
-    !r && d && d();
+  const b = $(), i = o || `accordion-item-${b}`, v = `${i}-header`, f = `${i}-panel`, m = () => {
+    !n && l && l();
   }, g = (h) => {
     (h.key === "Enter" || h.key === " ") && (h.preventDefault(), m());
   };
-  return /* @__PURE__ */ E("div", { className: w("border-b border-gray-200", r && "opacity-60 cursor-not-allowed", t), children: [
+  return /* @__PURE__ */ E("div", { className: y("border-b border-gray-200", n && "opacity-60 cursor-not-allowed", e), children: [
     /* @__PURE__ */ E(
       "button",
       {
         id: v,
         type: "button",
-        className: w(
+        className: y(
           "w-full text-left py-3 px-4 flex justify-between items-center focus:outline focus:outline-secondary",
-          r ? "cursor-not-allowed" : "hover:bg-gray-50/10 cursor-pointer",
-          c
+          n ? "cursor-not-allowed" : "hover:bg-gray-50/10 cursor-pointer",
+          u
         ),
         "aria-expanded": s,
         "aria-controls": f,
-        disabled: r,
+        disabled: n,
         onClick: m,
         onKeyDown: g,
         children: [
-          /* @__PURE__ */ u("span", { children: a }),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ c("span", { children: a }),
+          /* @__PURE__ */ c(
             "span",
             {
-              className: w(
+              className: y(
                 "transform transition-transform duration-300 ease-linear",
                 s ? "rotate-180" : "rotate-0"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ u(te, { size: 18 })
+              children: /* @__PURE__ */ c(re, { size: 18 })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ c(
       "div",
       {
         id: f,
         role: "region",
         "aria-labelledby": v,
-        className: w(
+        className: y(
           "transition-all duration-300 ease-linear px-4",
           s ? "max-h-96 opacity-100 overflow-auto py-3" : "max-h-0 opacity-0 overflow-hidden",
-          l
+          d
         ),
-        children: s && (n || e)
+        children: s && (r || t)
       }
     )
   ] });
 }
-function qe({
+function Ue({
   id: o,
   items: a = [],
-  children: e,
-  className: n = "",
-  itemClassName: t = "",
-  allowMultiple: r = !1,
+  children: t,
+  className: r = "",
+  itemClassName: e = "",
+  allowMultiple: n = !1,
   defaultOpenItems: s = [],
-  triggersClassName: d = "",
-  bodiesClassName: c = ""
+  triggersClassName: l = "",
+  bodiesClassName: u = ""
 }) {
-  const l = I(), b = o || `accordion-group-${l}`, [i, v] = x(new Set(s)), f = (h) => {
-    v((y) => {
-      const p = new Set(y);
-      return p.has(h) ? p.delete(h) : (r || p.clear(), p.add(h)), p;
+  const d = $(), b = o || `accordion-group-${d}`, [i, v] = x(new Set(s)), f = (h) => {
+    v((w) => {
+      const p = new Set(w);
+      return p.has(h) ? p.delete(h) : (n || p.clear(), p.add(h)), p;
     });
-  }, m = (h) => `${l}-item-${h}`, g = (h) => i.has(h);
-  return /* @__PURE__ */ E("div", { id: b, className: n, children: [
-    a.length > 0 && a.map((h, y) => {
-      const p = h.id || m(y);
-      return /* @__PURE__ */ u(
+  }, m = (h) => `${d}-item-${h}`, g = (h) => i.has(h);
+  return /* @__PURE__ */ E("div", { id: b, className: r, children: [
+    a.length > 0 && a.map((h, w) => {
+      const p = h.id || m(w);
+      return /* @__PURE__ */ c(
         q,
         {
           id: p,
@@ -100,27 +100,27 @@ function qe({
           disabled: h.disabled,
           isOpen: g(p),
           onToggle: () => f(p),
-          className: t,
-          triggerClassName: d,
-          bodyClassName: c
+          className: e,
+          triggerClassName: l,
+          bodyClassName: u
         },
         p
       );
     }),
-    a.length === 0 && e && z.Children.map(e, (h, y) => {
+    a.length === 0 && t && z.Children.map(t, (h, w) => {
       if (z.isValidElement(h) && h.type === q) {
-        const p = h.props.id || m(y);
+        const p = h.props.id || m(w);
         return /* @__PURE__ */ Y(
           q,
           {
             ...h.props,
             key: p,
             id: p,
-            className: w(t, h.props.className),
+            className: y(e, h.props.className),
             isOpen: g(p),
             onToggle: () => f(p),
-            triggerClassName: w(d, h.props.triggerClassName),
-            bodyClassName: w(c, h.props.bodyClassName)
+            triggerClassName: y(l, h.props.triggerClassName),
+            bodyClassName: y(u, h.props.bodyClassName)
           }
         );
       }
@@ -128,25 +128,25 @@ function qe({
     })
   ] });
 }
-function de() {
+function ce() {
   const [o, a] = x(0);
-  return C(() => {
-    const e = setInterval(() => {
-      a((n) => (n + 1) % 3);
+  return A(() => {
+    const t = setInterval(() => {
+      a((r) => (r + 1) % 3);
     }, 500);
-    return () => clearInterval(e);
-  }, []), /* @__PURE__ */ u("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ u(
+    return () => clearInterval(t);
+  }, []), /* @__PURE__ */ c("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((t) => /* @__PURE__ */ c(
     "div",
     {
-      className: w(
+      className: y(
         "rounded-full transition-all duration-500 ease-in-out size-[0.35em] bg-current",
-        o === e && "transform -translate-y-1"
+        o === t && "transform -translate-y-1"
       )
     },
-    e
+    t
   )) });
 }
-const ce = {
+const de = {
   base: "",
   primary: "bg-primary text-primary-foreground hover:bg-primary/85 disabled:bg-muted disabled:text-muted-foreground",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 disabled:bg-muted/80 disabled:text-muted-foreground/80",
@@ -176,46 +176,46 @@ const ce = {
 function me({
   variant: o = K.variant,
   size: a,
-  rounded: e = K.rounded,
-  loading: n,
-  linkTo: t,
-  linkProps: r,
+  rounded: t = K.rounded,
+  loading: r,
+  linkTo: e,
+  linkProps: n,
   type: s = "button",
-  className: d,
-  ...c
+  className: l,
+  ...u
 }) {
-  let l;
-  o === "link" && !a ? l = "fitted" : l = a || K.size;
-  const i = w(
+  let d;
+  o === "link" && !a ? d = "fitted" : d = a || K.size;
+  const i = y(
     "appearance-none focus:outline-none focus:ring not-disabled:hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all",
-    ce[o],
-    ue[l],
-    fe[e],
-    n && "relative pointer-events-none",
-    t && "relative",
-    d
+    de[o],
+    ue[d],
+    fe[t],
+    r && "relative pointer-events-none",
+    e && "relative",
+    l
   );
   return /* @__PURE__ */ E(
     "button",
     {
-      ...c,
-      role: t ? "link" : c.role,
-      "aria-label": c["aria-label"] || (r == null ? void 0 : r["aria-label"]),
-      "aria-description": c["aria-description"] || (r == null ? void 0 : r["aria-description"]),
-      "aria-disabled": c.disabled || n,
-      "aria-busy": n,
+      ...u,
+      role: e ? "link" : u.role,
+      "aria-label": u["aria-label"] || (n == null ? void 0 : n["aria-label"]),
+      "aria-description": u["aria-description"] || (n == null ? void 0 : n["aria-description"]),
+      "aria-disabled": u.disabled || r,
+      "aria-busy": r,
       type: s,
       className: i,
       children: [
-        n && /* @__PURE__ */ u(de, {}),
-        /* @__PURE__ */ u("span", { className: w(n && "invisible"), children: c.children }),
-        t && !c.disabled && /* @__PURE__ */ u(
+        r && /* @__PURE__ */ c(ce, {}),
+        /* @__PURE__ */ c("span", { className: y(r && "invisible"), children: u.children }),
+        e && !u.disabled && /* @__PURE__ */ c(
           "a",
           {
-            ...r,
+            ...n,
             "aria-hidden": !0,
-            href: t,
-            rel: (r == null ? void 0 : r.rel) || "noreferrer",
+            href: e,
+            rel: (n == null ? void 0 : n.rel) || "noreferrer",
             className: "absolute inset-0"
           }
         )
@@ -224,51 +224,51 @@ function me({
   );
 }
 function be(o) {
-  const [a, e] = x(""), n = A((t) => {
-    let r = t, s = "";
-    for (; r && !s; ) {
-      const d = window.getComputedStyle(r).backgroundColor;
-      d && d !== "transparent" && d !== "rgba(0, 0, 0, 0)" && (s = d), r = r.parentElement;
+  const [a, t] = x(""), r = I((e) => {
+    let n = e, s = "";
+    for (; n && !s; ) {
+      const l = window.getComputedStyle(n).backgroundColor;
+      l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" && (s = l), n = n.parentElement;
     }
     return s || "transparent";
   }, []);
-  return C(() => {
-    const t = document.getElementById(o);
-    if (t) {
-      const r = n(t.parentElement);
-      e(r);
+  return A(() => {
+    const e = document.getElementById(o);
+    if (e) {
+      const n = r(e.parentElement);
+      t(n);
     }
-  }, [o, n]), a;
+  }, [o, r]), a;
 }
-function Ke({
+function _e({
   ref: o,
   id: a,
-  size: e = 20,
-  color: n,
-  filled: t = !1,
-  rounded: r = !0,
+  size: t = 20,
+  color: r,
+  filled: e = !1,
+  rounded: n = !0,
   checked: s = !1,
-  onCheckedChange: d,
-  disabled: c,
-  className: l = "",
+  onCheckedChange: l,
+  disabled: u,
+  className: d = "",
   ...b
 }) {
-  const i = I(), v = W(() => a || `checkbox-${i}`, [a, i]), f = be(v), [m, g] = x(s);
-  C(() => {
+  const i = $(), v = U(() => a || `checkbox-${i}`, [a, i]), f = be(v), [m, g] = x(s);
+  A(() => {
     g(s);
   }, [s]);
   const h = () => {
-    c || (g(!m), d == null || d(!m));
-  }, y = (N) => {
+    u || (g(!m), l == null || l(!m));
+  }, w = (N) => {
     N.key === " " && (N.preventDefault(), h());
-  }, p = w(
+  }, p = y(
     "flex items-center justify-center border outline outline-transparent focus:outline-current focus:outline-offset-2",
-    r && "rounded",
-    c && "opacity-40 cursor-not-allowed",
-    !c && "cursor-pointer",
-    l
+    n && "rounded",
+    u && "opacity-40 cursor-not-allowed",
+    !u && "cursor-pointer",
+    d
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ c(
     "button",
     {
       id: v,
@@ -278,79 +278,79 @@ function Ke({
       role: "checkbox",
       onClick: h,
       "aria-checked": m,
-      "aria-disabled": c,
-      onKeyDownCapture: y,
+      "aria-disabled": u,
+      onKeyDownCapture: w,
       style: {
-        width: e,
-        height: e,
-        color: n,
-        backgroundColor: m && t ? "currentcolor" : "transparent"
+        width: t,
+        height: t,
+        color: r,
+        backgroundColor: m && e ? "currentcolor" : "transparent"
       },
       className: p,
       ...b,
-      children: m && /* @__PURE__ */ u(re, { size: e, color: t ? f : void 0 })
+      children: m && /* @__PURE__ */ c(ne, { size: t, color: e ? f : void 0 })
     }
   );
 }
-function Ge({
+function Qe({
   children: o,
   className: a,
-  linkTo: e,
-  linkProps: n,
-  onButtonClick: t,
-  buttonProps: r,
+  linkTo: t,
+  linkProps: r,
+  onButtonClick: e,
+  buttonProps: n,
   ...s
 }) {
-  return e && t && console.warn('Clickable: Both "linkTo" and "onButtonClick" props are provided. Only "linkTo" will be used.'), /* @__PURE__ */ E("div", { className: w("relative w-fit", a), ...s, children: [
+  return t && e && console.warn('Clickable: Both "linkTo" and "onButtonClick" props are provided. Only "linkTo" will be used.'), /* @__PURE__ */ E("div", { className: y("relative w-fit", a), ...s, children: [
     o,
-    e && /* @__PURE__ */ u(
+    t && /* @__PURE__ */ c(
       "a",
       {
-        ...n,
-        rel: (n == null ? void 0 : n.rel) || "noreferrer",
-        href: e,
-        className: w("absolute inset-0", n == null ? void 0 : n.className)
+        ...r,
+        rel: (r == null ? void 0 : r.rel) || "noreferrer",
+        href: t,
+        className: y("absolute inset-0", r == null ? void 0 : r.className)
       }
     ),
-    !e && t && /* @__PURE__ */ u(
+    !t && e && /* @__PURE__ */ c(
       "button",
       {
-        ...r,
+        ...n,
         type: "button",
-        onClick: t,
-        className: w("absolute inset-0 cursor-pointer", r == null ? void 0 : r.className)
+        onClick: e,
+        className: y("absolute inset-0 cursor-pointer", n == null ? void 0 : n.className)
       }
     )
   ] });
 }
-function S({ elementId: o, type: a, message: e }) {
-  return C(() => {
-    const n = document.getElementById(o);
-    if (n) {
-      if (!e && a === "error") {
-        n.removeAttribute("data-error");
+function V({ elementId: o, type: a, message: t }) {
+  return A(() => {
+    const r = document.getElementById(o);
+    if (r) {
+      if (!t && a === "error") {
+        r.removeAttribute("data-error");
         return;
       }
-      if (!e && a === "success") {
-        n.removeAttribute("data-success");
+      if (!t && a === "success") {
+        r.removeAttribute("data-success");
         return;
       }
-      return n.setAttribute("aria-describedby", `${o}-${a}-message`), n.setAttribute("aria-invalid", a === "error" ? "true" : "false"), a === "error" && n.setAttribute("data-error", "true"), a === "success" && n.setAttribute("data-success", "true"), () => {
-        n.removeAttribute("aria-describedby"), n.removeAttribute("aria-invalid"), n.removeAttribute("data-error"), n.removeAttribute("data-success");
+      return r.setAttribute("aria-describedby", `${o}-${a}-message`), r.setAttribute("aria-invalid", a === "error" ? "true" : "false"), a === "error" && r.setAttribute("data-error", "true"), a === "success" && r.setAttribute("data-success", "true"), () => {
+        r.removeAttribute("aria-describedby"), r.removeAttribute("aria-invalid"), r.removeAttribute("data-error"), r.removeAttribute("data-success");
       };
     }
-  }, [o, a, e]), e ? /* @__PURE__ */ E(
+  }, [o, a, t]), t ? /* @__PURE__ */ E(
     "small",
     {
-      className: w(
+      className: y(
         "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-start",
         a === "error" && "text-destructive",
         a === "success" && "text-success"
       ),
       role: "status",
       children: [
-        a === "error" ? /* @__PURE__ */ u(ie, {}) : /* @__PURE__ */ u(ne, {}),
-        /* @__PURE__ */ u("span", { id: `${o}-${a}-message`, children: e })
+        a === "error" ? /* @__PURE__ */ c(le, {}) : /* @__PURE__ */ c(oe, {}),
+        /* @__PURE__ */ c("span", { id: `${o}-${a}-message`, children: t })
       ]
     }
   ) : null;
@@ -366,202 +366,202 @@ const he = {
   md: "rounded-md",
   lg: "rounded-lg",
   full: "px-3 rounded-full"
-}, Q = {
+}, X = {
   variant: "default",
   rounded: "none"
 };
-function We({
-  variant: o = Q.variant,
+function Me({
+  variant: o = X.variant,
   rounded: a,
-  displayOnlyMode: e = !1,
-  errorMessage: n,
-  successMessage: t,
-  type: r = "text",
+  displayOnlyMode: t = !1,
+  errorMessage: r,
+  successMessage: e,
+  type: n = "text",
   className: s,
-  ...d
+  ...l
 }) {
-  const c = I(), [l, b] = x(!1);
+  const u = $(), [d, b] = x(!1);
   let i = a;
-  o === "outline" && !a && (i = "md"), i = i || Q.rounded;
-  const m = w(
+  o === "outline" && !a && (i = "md"), i = i || X.rounded;
+  const m = y(
     "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
     "file:mr-2 file:border-0 file:rounded-md file:px-1.5 file:py-1 file:bg-primary hover:file:bg-primary/85 file:text-sm file:font-medium file:text-foreground file:transition-colors",
-    !e && he[o],
-    !e && pe[i],
-    r === "password" && "pr-10",
-    !e && "px-2 py-1",
-    e && "pointer-events-none",
+    !t && he[o],
+    !t && pe[i],
+    n === "password" && "pr-10",
+    !t && "px-2 py-1",
+    t && "pointer-events-none",
     s
   );
-  return /* @__PURE__ */ E("div", { className: w(e && "cursor-text"), style: { height: d.height, width: d.width }, children: [
-    /* @__PURE__ */ E("div", { className: w(r === "password" && "relative"), children: [
-      /* @__PURE__ */ u(
+  return /* @__PURE__ */ E("div", { className: y(t && "cursor-text"), style: { height: l.height, width: l.width }, children: [
+    /* @__PURE__ */ E("div", { className: y(n === "password" && "relative"), children: [
+      /* @__PURE__ */ c(
         "input",
         {
-          ...d,
-          id: c,
-          type: r === "password" && l ? "text" : r,
-          "aria-disabled": d.disabled,
-          readOnly: e,
-          "aria-readonly": e || d["aria-readonly"],
-          "data-error": n ? !0 : void 0,
-          "data-success": t ? !0 : void 0,
+          ...l,
+          id: u,
+          type: n === "password" && d ? "text" : n,
+          "aria-disabled": l.disabled,
+          readOnly: t,
+          "aria-readonly": t || l["aria-readonly"],
+          "data-error": r ? !0 : void 0,
+          "data-success": e ? !0 : void 0,
           className: m
         }
       ),
-      r === "password" && /* @__PURE__ */ u(
+      n === "password" && /* @__PURE__ */ c(
         "button",
         {
-          onClick: () => b(!l),
+          onClick: () => b(!d),
           className: "absolute inset-y-0 right-0 px-2 hover:cursor-pointer",
           "aria-label": "Toggle password visibility",
-          "data-state": l ? "visible" : "hidden",
-          children: l ? /* @__PURE__ */ u(oe, { size: 20 }) : /* @__PURE__ */ u(ae, { size: 20 })
+          "data-state": d ? "visible" : "hidden",
+          children: d ? /* @__PURE__ */ c(ae, { size: 20 }) : /* @__PURE__ */ c(se, { size: 20 })
         }
       )
     ] }),
-    !e && /* @__PURE__ */ u(S, { elementId: c, type: "error", message: n }),
-    !e && /* @__PURE__ */ u(S, { elementId: c, type: "success", message: t })
+    !t && /* @__PURE__ */ c(V, { elementId: u, type: "error", message: r }),
+    !t && /* @__PURE__ */ c(V, { elementId: u, type: "success", message: e })
   ] });
 }
-function Ue({
+function Xe({
   display: o = "inline",
   width: a = "fit-content",
-  className: e = "",
-  required: n,
-  helpMessage: t,
-  suffix: r,
+  className: t = "",
+  required: r,
+  helpMessage: e,
+  suffix: n,
   htmlFor: s,
-  children: d,
-  ...c
+  children: l,
+  ...u
 }) {
-  const l = I(), b = w("font-medium", o, e), i = t ? `${s ?? l}-help` : void 0;
+  const d = $(), b = y("font-medium", o, t), i = e ? `${s ?? d}-help` : void 0;
   return /* @__PURE__ */ E("div", { style: { display: o === "inline" ? "inline-flex" : "flex", width: a }, className: "relative", children: [
-    /* @__PURE__ */ E("label", { className: b, htmlFor: s, ...c, children: [
-      d,
-      n && /* @__PURE__ */ u("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
+    /* @__PURE__ */ E("label", { className: b, htmlFor: s, ...u, children: [
+      l,
+      r && /* @__PURE__ */ c("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
     ] }),
-    t && /* @__PURE__ */ u(
+    e && /* @__PURE__ */ c(
       "span",
       {
         className: "text-gray-500 ml-1 size-fit -translate-y-1/3",
         "aria-describedby": i,
         "aria-label": "Help information",
-        title: t,
-        children: /* @__PURE__ */ u(se, {})
+        title: e,
+        children: /* @__PURE__ */ c(ie, {})
       }
     ),
-    t && /* @__PURE__ */ u("div", { id: i, className: "sr-only", children: t }),
-    r && /* @__PURE__ */ u("span", { className: "ml-1", children: r })
+    e && /* @__PURE__ */ c("div", { id: i, className: "sr-only", children: e }),
+    n && /* @__PURE__ */ c("span", { className: "ml-1", children: n })
   ] });
 }
 function ge(o) {
-  const [a, e] = x(!1), [n, t] = x(!1);
-  return C(() => {
-    o ? (t(!0), setTimeout(() => e(!0), 10)) : (e(!1), setTimeout(() => t(!1), 150));
-  }, [o]), { show: a, shouldRender: n };
+  const [a, t] = x(!1), [r, e] = x(!1);
+  return A(() => {
+    o ? (e(!0), setTimeout(() => t(!0), 10)) : (t(!1), setTimeout(() => e(!1), 150));
+  }, [o]), { show: a, shouldRender: r };
 }
 function ve(o, a) {
-  C(() => {
-    const e = (n) => {
-      n.key === "Escape" && o && a();
+  A(() => {
+    const t = (r) => {
+      r.key === "Escape" && o && a();
     };
-    return document.addEventListener("keydown", e), o && (document.body.style.overflow = "hidden"), () => {
-      document.removeEventListener("keydown", e), document.body.style.overflow = "auto";
+    return document.addEventListener("keydown", t), o && (document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", t), document.body.style.overflow = "auto";
     };
   }, [o, a]);
 }
 function we(o, a) {
-  const e = j(null), n = A(() => {
-    const t = document.getElementById(o);
-    if (!t) return;
-    const r = t.querySelectorAll('[data-modal-action="true"]');
-    if (r.length > 0) {
-      r[0].focus();
+  const t = R(null), r = I(() => {
+    const e = document.getElementById(o);
+    if (!e) return;
+    const n = e.querySelectorAll('[data-modal-action="true"]');
+    if (n.length > 0) {
+      n[0].focus();
       return;
     }
-    const s = t.querySelectorAll(
+    const s = e.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
     if (s.length > 0) {
-      const d = Array.from(s).filter((c) => !(c instanceof HTMLButtonElement && c.getAttribute("data-modal-close-button") === "true"));
-      if (d.length > 0) {
-        d[0].focus();
+      const l = Array.from(s).filter((u) => !(u instanceof HTMLButtonElement && u.getAttribute("data-modal-close-button") === "true"));
+      if (l.length > 0) {
+        l[0].focus();
         return;
       }
       s[0].focus();
       return;
     }
-    t.focus();
+    e.focus();
   }, [o]);
-  C(() => (a && (e.current = document.activeElement, n()), () => {
-    document.body.style.overflow = "auto", e.current instanceof HTMLElement && e.current.focus();
-  }), [a, n]);
+  A(() => (a && (t.current = document.activeElement, r()), () => {
+    document.body.style.overflow = "auto", t.current instanceof HTMLElement && t.current.focus();
+  }), [a, r]);
 }
-function _e({
+function Ze({
   id: o,
   isOpen: a,
-  onClose: e,
-  title: n,
-  children: t,
-  contentOnly: r = !1,
+  onClose: t,
+  title: r,
+  children: e,
+  contentOnly: n = !1,
   className: s,
-  overlayClassName: d,
-  hideCloseButton: c = !1,
-  actions: l = [],
+  overlayClassName: l,
+  hideCloseButton: u = !1,
+  actions: d = [],
   disableCloseOnOverlayClick: b = !1,
   ariaLabelledBy: i,
   ariaDescribedBy: v
 }) {
-  const f = I(), m = o || `modal-${f}`, g = o ? `${o}-title` : `modal-title-${f}`, { show: h, shouldRender: y } = ge(a);
-  if (we(m, y), ve(y, e), !y) return null;
-  const p = () => n ? z.isValidElement(n) ? /* @__PURE__ */ u("div", { className: "mb-4", children: n }) : /* @__PURE__ */ u("h2", { className: "mb-4 text-xl font-semibold", id: g, children: n }) : null, N = () => l.length === 0 ? null : /* @__PURE__ */ u("div", { className: "mt-6 not-sm:grid gap-y-2 sm:flex sm:justify-start sm:flex-row-reverse sm:gap-x-3", children: l.map((D, $) => {
-    const { label: F, className: k, ...L } = D;
-    return /* @__PURE__ */ u(me, { className: k, type: "button", ...L, "data-modal-action": "true", children: F }, $);
+  const f = $(), m = o || `modal-${f}`, g = o ? `${o}-title` : `modal-title-${f}`, { show: h, shouldRender: w } = ge(a);
+  if (we(m, w), ve(w, t), !w) return null;
+  const p = () => r ? z.isValidElement(r) ? /* @__PURE__ */ c("div", { className: "mb-4", children: r }) : /* @__PURE__ */ c("h2", { className: "mb-4 text-xl font-semibold", id: g, children: r }) : null, N = () => d.length === 0 ? null : /* @__PURE__ */ c("div", { className: "mt-6 not-sm:grid gap-y-2 sm:flex sm:justify-start sm:flex-row-reverse sm:gap-x-3", children: d.map((D, C) => {
+    const { label: L, className: B, ...S } = D;
+    return /* @__PURE__ */ c(me, { className: B, type: "button", ...S, "data-modal-action": "true", children: L }, C);
   }) });
-  return /* @__PURE__ */ u(J, { children: M(
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ c(W, { children: _(
+    /* @__PURE__ */ c(
       "div",
       {
-        "aria-labelledby": i ?? n ? g : void 0,
+        "aria-labelledby": i ?? r ? g : void 0,
         "aria-describedby": v,
         role: "dialog",
         "aria-modal": "true",
         className: "fixed inset-0 z-[100] overflow-y-auto",
         children: /* @__PURE__ */ E("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ c(
             "div",
             {
-              className: H("fixed inset-0 bg-black/20 transition-all", d),
+              className: k("fixed inset-0 bg-black/20 transition-all", l),
               onClick: () => {
-                b || e();
+                b || t();
               }
             }
           ),
-          r && /* @__PURE__ */ u("div", { className: H("relative w-fit", s), children: t }),
-          !r && /* @__PURE__ */ E(
+          n && /* @__PURE__ */ c("div", { className: k("relative w-fit", s), children: e }),
+          !n && /* @__PURE__ */ E(
             "div",
             {
               id: m,
               tabIndex: -1,
-              className: H(
-                "relative w-full max-w-xl transform rounded-lg shadow-xl transition-all p-6 bg-inherit focus:ring ease-in duration-75",
+              className: k(
+                "relative w-full max-w-xl transform rounded-lg shadow-xl bg-popover transition-all p-6 focus:ring ease-in duration-75",
                 h ? "opacity-100 scale-100" : "opacity-0 scale-90",
                 s
               ),
               children: [
-                !c && /* @__PURE__ */ u(
+                !u && /* @__PURE__ */ c(
                   "button",
                   {
                     type: "button",
-                    onClick: e,
+                    onClick: t,
                     "data-modal-close-button": "true",
                     className: "rounded-md p-0.5 top-2.5 right-2.5 absolute opacity-80 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-gray-500 leading-0",
-                    children: /* @__PURE__ */ u(le, { size: 18 })
+                    children: /* @__PURE__ */ c(P, { size: 18 })
                   }
                 ),
                 p(),
-                t,
+                e,
                 N()
               ]
             }
@@ -572,38 +572,180 @@ function _e({
     document.body
   ) });
 }
-function ye({ itemId: o, checked: a, onChange: e, name: n, disabled: t = !1, className: r = "" }) {
-  const s = "relative inline-flex items-center justify-center rounded-full", d = () => {
-    t || e();
-  }, c = w(
+function ye(o) {
+  const [a, t] = x(!1), [r, e] = x(!1);
+  return A(() => {
+    o ? (e(!0), setTimeout(() => t(!0), 10)) : (t(!1), setTimeout(() => e(!1), 300));
+  }, [o]), { show: a, shouldRender: r };
+}
+function xe(o, a) {
+  A(() => {
+    const t = (r) => {
+      r.key === "Escape" && o && a();
+    };
+    return document.addEventListener("keydown", t), o && (document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", t), document.body.style.overflow = "auto";
+    };
+  }, [o, a]);
+}
+function Ee(o, a) {
+  const t = R(null), r = I(() => {
+    const e = document.getElementById(o);
+    if (!e) return;
+    const n = e.querySelectorAll('[data-panel-action="true"]');
+    if (n.length > 0) {
+      n[0].focus();
+      return;
+    }
+    const s = e.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (s.length > 0) {
+      const l = Array.from(s).filter((u) => !(u instanceof HTMLButtonElement && u.getAttribute("data-panel-close-button") === "true"));
+      if (l.length > 0) {
+        l[0].focus();
+        return;
+      }
+      s[0].focus();
+      return;
+    }
+    e.focus();
+  }, [o]);
+  A(() => (a && (t.current = document.activeElement, r()), () => {
+    document.body.style.overflow = "auto", t.current instanceof HTMLElement && t.current.focus();
+  }), [a, r]);
+}
+const Ne = {
+  size: {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    full: "w-full",
+    screen: "w-screen"
+  }
+};
+function Je({
+  ref: o,
+  id: a,
+  isOpen: t,
+  onClose: r,
+  title: e,
+  children: n,
+  footer: s,
+  size: l = "md",
+  className: u,
+  overlayClassName: d,
+  hideCloseButton: b = !1,
+  disableCloseOnOverlayClick: i = !1,
+  ariaLabelledBy: v,
+  ariaDescribedBy: f
+}) {
+  const m = $(), g = a || `panel-${m}`, h = a ? `${a}-title` : `panel-title-${m}`, { show: w, shouldRender: p } = ye(t);
+  if (Ee(g, p), xe(p, r), !p) return null;
+  const N = () => e ? z.isValidElement(e) ? /* @__PURE__ */ c("div", { children: e }) : /* @__PURE__ */ c("h2", { className: "text-2xl font-semibold", id: h, children: e }) : null, D = () => {
+    if (!s) return null;
+    if (z.isValidElement(s)) {
+      const C = s, L = C.props.className || "";
+      return z.cloneElement(C, { className: k("px-6 py-4", L) });
+    }
+    return /* @__PURE__ */ c("div", { className: "px-6 py-4", children: s });
+  };
+  return /* @__PURE__ */ c(W, { children: _(
+    /* @__PURE__ */ E(
+      "div",
+      {
+        "aria-labelledby": v ?? e ? h : void 0,
+        "aria-describedby": f,
+        role: "dialog",
+        "aria-modal": "true",
+        className: "fixed inset-0 z-[100] overflow-hidden",
+        "data-panel-open": t,
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: k(
+                "fixed inset-0 bg-black/40 transition-opacity duration-300",
+                w ? "opacity-100" : "opacity-0",
+                d
+              ),
+              onClick: () => {
+                i || r();
+              }
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "fixed inset-y-0 right-0 flex max-w-full", children: /* @__PURE__ */ c(
+            "div",
+            {
+              id: g,
+              ref: o,
+              tabIndex: -1,
+              className: k(
+                "relative h-full transform shadow-xl bg-popover transition-transform duration-300 ease-in-out",
+                l !== "screen" && "border-l border-border",
+                Ne.size[l],
+                w ? "translate-x-0" : "translate-x-full",
+                u
+              ),
+              "data-panel-size": l,
+              children: /* @__PURE__ */ E("div", { className: "flex h-full flex-col", children: [
+                e && /* @__PURE__ */ c("div", { className: "px-6 pt-6", children: N() }),
+                !b && /* @__PURE__ */ c(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: r,
+                    "data-panel-close-button": "true",
+                    "aria-label": "Close panel",
+                    className: "rounded-md p-0.5 top-3 right-3 absolute opacity-80 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-gray-500 leading-0",
+                    children: /* @__PURE__ */ c(P, { size: 18 })
+                  }
+                ),
+                /* @__PURE__ */ c("div", { className: k("flex-1 overflow-y-auto px-6 pb-6", e ? "pt-6" : "pt-10"), children: n }),
+                D()
+              ] })
+            }
+          ) })
+        ]
+      }
+    ),
+    document.body
+  ) });
+}
+function Ae({ itemId: o, checked: a, onChange: t, name: r, disabled: e = !1, className: n = "" }) {
+  const s = "relative inline-flex items-center justify-center rounded-full", l = () => {
+    e || t();
+  }, u = y(
     s,
     !a && "hover:border-current/60",
-    !t && "border-current cursor-pointer",
-    t && "border-muted/60 cursor-not-allowed",
-    r
+    !e && "border-current cursor-pointer",
+    e && "border-muted/60 cursor-not-allowed",
+    n
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ c(
     "div",
     {
       id: o,
       role: "radio",
       tabIndex: -1,
       "aria-checked": a,
-      "aria-disabled": t,
-      "aria-description": `Radio button for ${n}`,
+      "aria-disabled": e,
+      "aria-description": `Radio button for ${r}`,
       "aria-labelledby": `${o}-label`,
-      onClick: d,
-      className: c,
+      onClick: l,
+      className: u,
       style: {
         width: "1em",
         height: "1em",
         padding: "0.1em",
         borderWidth: "0.06em"
       },
-      children: a && /* @__PURE__ */ u(
+      children: a && /* @__PURE__ */ c(
         "div",
         {
-          className: w("size-full aspect-square rounded-full", t && "bg-muted/60", !t && "bg-current")
+          className: y("size-full aspect-square rounded-full", e && "bg-muted/60", !e && "bg-current")
         }
       )
     }
@@ -612,63 +754,63 @@ function ye({ itemId: o, checked: a, onChange: e, name: n, disabled: t = !1, cla
 function G({
   value: o,
   children: a,
-  className: e = "",
-  isSelected: n = !1,
-  onChange: t,
-  disabled: r = !1,
+  className: t = "",
+  isSelected: r = !1,
+  onChange: e,
+  disabled: n = !1,
   hideInput: s = !1,
-  description: d,
-  name: c
+  description: l,
+  name: u
 }) {
-  const b = `radio-${I()}-${o}`, i = () => {
-    r || t == null || t(o);
+  const b = `radio-${$()}-${o}`, i = () => {
+    n || e == null || e(o);
   };
   return /* @__PURE__ */ E(
     "div",
     {
-      title: d,
-      className: w(
+      title: l,
+      className: y(
         "relative flex items-center",
-        e,
+        t,
         // Uses text color for borders
-        s && `p-2 border-2 focus-within:border-dashed focus-within:${r ? "border-current/50" : "border-current/80"}`,
-        s && !n && `border-transparent ${r ? "" : "not-focus-within:hover:border-border/60"}`,
-        s && n && "border-border",
-        r && "opacity-60 cursor-not-allowed"
+        s && `p-2 border-2 focus-within:border-dashed focus-within:${n ? "border-current/50" : "border-current/80"}`,
+        s && !r && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
+        s && r && "border-border",
+        n && "opacity-60 cursor-not-allowed"
       ),
       style: {
         gap: "0.5em"
       },
       children: [
-        !s && /* @__PURE__ */ u(
-          ye,
+        !s && /* @__PURE__ */ c(
+          Ae,
           {
             itemId: b,
-            name: c || "",
-            checked: n,
+            name: u || "",
+            checked: r,
             onChange: i,
-            disabled: r,
-            className: w(s && "")
+            disabled: n,
+            className: y(s && "")
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ c(
           "div",
           {
             id: s ? b : void 0,
             tabIndex: s ? -1 : void 0,
             role: s ? "radio" : void 0,
             onClick: s ? i : void 0,
-            "aria-checked": s ? n ? "true" : "false" : void 0,
-            "aria-disabled": s ? r : void 0,
-            "aria-description": s ? d || `Radio button for ${c}` : void 0,
+            "aria-checked": s ? r ? "true" : "false" : void 0,
+            "aria-disabled": s ? n : void 0,
+            "aria-description": s ? l || `Radio button for ${u}` : void 0,
             "aria-labelledby": s ? `${b}-label` : void 0,
-            className: w(s && "size-full", typeof a == "object" && "grow focus:outline-none"),
-            children: /* @__PURE__ */ u(
+            className: y(s && "size-full", typeof a == "object" && "grow focus:outline-none"),
+            children: /* @__PURE__ */ c(
               "label",
               {
                 id: `${b}-label`,
                 onClick: s ? void 0 : i,
-                className: w(r && "cursor-not-allowed", !r && "cursor-pointer"),
+                className: y(n && "cursor-not-allowed", !n && "cursor-pointer"),
                 children: a
               }
             )
@@ -678,22 +820,22 @@ function G({
     }
   );
 }
-function xe(o, a) {
-  const [e, n] = x(a), [t, r] = x(-1), [s, d] = x(!1), c = A((f, m) => {
-    var y;
+function Ce(o, a) {
+  const [t, r] = x(a), [e, n] = x(-1), [s, l] = x(!1), u = I((f, m) => {
+    var w;
     const g = f[m];
-    g.hasAttribute("disabled") || g.getAttribute("aria-disabled") === "true" || ((y = f[m]) == null || y.click(), r(m));
-  }, []), l = A(
+    g.hasAttribute("disabled") || g.getAttribute("aria-disabled") === "true" || ((w = f[m]) == null || w.click(), n(m));
+  }, []), d = I(
     (f, m) => {
       var h;
       if (f.preventDefault(), s || !m.length) return;
       const g = a !== -1 ? a : 0;
-      (h = m[g]) == null || h.focus(), n(g), a !== -1 && c(m, g);
+      (h = m[g]) == null || h.focus(), r(g), a !== -1 && u(m, g);
     },
-    [a, s, c]
-  ), b = A(
+    [a, s, u]
+  ), b = I(
     (f) => {
-      var y;
+      var w;
       if (!f.shiftKey)
         return;
       f.preventDefault();
@@ -702,29 +844,29 @@ function xe(o, a) {
           'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
         )
       ).filter((p) => !p.hasAttribute("disabled") && p.tabIndex >= 0), g = m.findIndex((p) => p.id === o), h = g > 0 ? g - 1 : m.length - 1;
-      (y = m[h]) == null || y.focus();
+      (w = m[h]) == null || w.focus();
     },
     [o]
-  ), i = A(
+  ), i = I(
     (f, m) => {
       var N;
       if (!m.length) return;
       const g = f.target;
       if (!m.some((D) => D.id === g.id)) return;
-      const y = e !== -1 ? e : 0;
-      let p = y;
+      const w = t !== -1 ? t : 0;
+      let p = w;
       switch (f.key) {
         case "ArrowUp":
         case "ArrowLeft":
-          f.preventDefault(), p = y > 0 ? y - 1 : m.length - 1;
+          f.preventDefault(), p = w > 0 ? w - 1 : m.length - 1;
           break;
         case "ArrowDown":
         case "ArrowRight":
-          f.preventDefault(), p = (y + 1) % m.length;
+          f.preventDefault(), p = (w + 1) % m.length;
           break;
         // Select the option when the space key is pressed
         case " ":
-          f.preventDefault(), c(m, y);
+          f.preventDefault(), u(m, w);
           return;
         case "Tab":
           b(f);
@@ -732,69 +874,69 @@ function xe(o, a) {
         default:
           return;
       }
-      (N = m[p]) == null || N.focus(), n(p), t !== -1 && c(m, p);
+      (N = m[p]) == null || N.focus(), r(p), e !== -1 && u(m, p);
     },
-    [e, t, b, c]
-  ), v = A(() => {
+    [t, e, b, u]
+  ), v = I(() => {
     const f = document.querySelector(`[id="${o}"][role="radiogroup"]`);
     return f ? Array.from(f.querySelectorAll('[role="radio"]')) : [];
   }, [o]);
-  C(() => {
+  A(() => {
     const f = document.querySelector(`[id="${o}"][role="radiogroup"]`);
     if (!f) return;
-    const m = v(), g = (N) => l(N, m), h = (N) => i(N, m), y = () => d(!0), p = () => d(!1);
-    return document.addEventListener("keydown", h), f.addEventListener("focus", g), f.addEventListener("mousedown", y), document.addEventListener("mouseup", p), () => {
-      document.removeEventListener("keydown", h), f.removeEventListener("focus", g), f.removeEventListener("mousedown", y), document.removeEventListener("mouseup", p);
+    const m = v(), g = (N) => d(N, m), h = (N) => i(N, m), w = () => l(!0), p = () => l(!1);
+    return document.addEventListener("keydown", h), f.addEventListener("focus", g), f.addEventListener("mousedown", w), document.addEventListener("mouseup", p), () => {
+      document.removeEventListener("keydown", h), f.removeEventListener("focus", g), f.removeEventListener("mousedown", w), document.removeEventListener("mouseup", p);
     };
-  }, [o, v, l, i]);
+  }, [o, v, d, i]);
 }
-function Qe({
+function Ye({
   options: o = [],
   value: a,
-  onChange: e,
-  id: n,
-  children: t,
-  className: r = "",
+  onChange: t,
+  id: r,
+  children: e,
+  className: n = "",
   childrenClassName: s = "",
-  hideInputs: d = !1
+  hideInputs: l = !1
 }) {
-  const c = I(), l = n || `radio-group-${c}`;
-  xe(
-    l,
+  const u = $(), d = r || `radio-group-${u}`;
+  Ce(
+    d,
     o.findIndex((i) => i === a)
   );
-  const b = W(() => o.reduce((i, v) => (typeof v == "string" ? i.some((f) => f.value === v) || i.push({ label: v, value: v }) : i.push(v), i), []), [o]);
-  return /* @__PURE__ */ E("div", { id: l, role: "radiogroup", tabIndex: 0, className: w(r, "focus:outline-none"), children: [
-    b.length > 0 && b.map((i, v) => /* @__PURE__ */ u(
+  const b = U(() => o.reduce((i, v) => (typeof v == "string" ? i.some((f) => f.value === v) || i.push({ label: v, value: v }) : i.push(v), i), []), [o]);
+  return /* @__PURE__ */ E("div", { id: d, role: "radiogroup", tabIndex: 0, className: y(n, "focus:outline-none"), children: [
+    b.length > 0 && b.map((i, v) => /* @__PURE__ */ c(
       G,
       {
         value: i.value,
         isSelected: a === i.value,
-        onChange: e,
-        name: l,
+        onChange: t,
+        name: d,
         disabled: i.disabled,
         description: i.description,
-        hideInput: d,
+        hideInput: l,
         className: s,
         children: i.label
       },
       `${i.value}-${v}`
     )),
-    b.length === 0 && t && z.Children.map(t, (i) => z.isValidElement(i) && i.type === G ? /* @__PURE__ */ u(
+    b.length === 0 && e && z.Children.map(e, (i) => z.isValidElement(i) && i.type === G ? /* @__PURE__ */ c(
       G,
       {
         ...i.props,
-        className: w(s, i.props.className),
-        hideInput: i.props.hideInput || d,
+        className: y(s, i.props.className),
+        hideInput: i.props.hideInput || l,
         isSelected: a === i.props.value,
-        onChange: e,
-        name: l,
+        onChange: t,
+        name: d,
         children: i.props.children
       }
     ) : null)
   ] });
 }
-const Ee = {
+const Ie = {
   thin: {
     horizontal: "h-px",
     vertical: "w-px"
@@ -811,74 +953,74 @@ const Ee = {
     horizontal: "h-2",
     vertical: "w-2"
   }
-}, Ne = {
+}, $e = {
   horizontal: "w-full",
   vertical: "min-h-4 h-full"
 };
-function Xe({
+function Pe({
   orientation: o = "horizontal",
   decorative: a = !1,
-  thickness: e = "thin",
-  className: n,
-  ...t
+  thickness: t = "thin",
+  className: r,
+  ...e
 }) {
-  const r = w(
+  const n = y(
     "shrink-0 bg-border",
-    Ne[o],
-    Ee[e][o],
-    n
+    $e[o],
+    Ie[t][o],
+    r
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ c(
     "div",
     {
-      ...t,
-      className: r,
+      ...e,
+      className: n,
       role: a ? "presentation" : "separator",
       "aria-orientation": a ? void 0 : o,
       "aria-hidden": a,
       "data-orientation": o,
-      "data-thickness": e
+      "data-thickness": t
     }
   );
 }
-function Ze({ children: o, ref: a, ...e }) {
-  if (P(o)) {
-    let n = { ...e };
-    return o.props && (n = { ...n, ...o.props }), ee(o, {
-      ...n,
-      ref: (t) => {
-        typeof a == "function" ? a(t) : a && (a.current = t);
+function Oe({ children: o, ref: a, ...t }) {
+  if (ee(o)) {
+    let r = { ...t };
+    return o.props && (r = { ...r, ...o.props }), te(o, {
+      ...r,
+      ref: (e) => {
+        typeof a == "function" ? a(e) : a && (a.current = e);
       }
     });
   }
-  return Y("div", { ...e, ref: a }, o);
+  return Y("div", { ...t, ref: a }, o);
 }
-function Ce({ elementId: o, maxLength: a }) {
-  const [e, n] = x(0);
-  return C(() => {
-    const t = document.getElementById(o);
-    if (!t)
+function Te({ elementId: o, maxLength: a }) {
+  const [t, r] = x(0);
+  return A(() => {
+    const e = document.getElementById(o);
+    if (!e)
       return;
-    const r = () => {
-      const s = t.value.length;
-      n(s);
-      const d = s >= a;
-      t.setAttribute("aria-describedby", `${o}-character-count`), t.setAttribute("aria-invalid", d ? "true" : "false"), d ? t.setAttribute("data-error", "true") : t.removeAttribute("data-error");
+    const n = () => {
+      const s = e.value.length;
+      r(s);
+      const l = s >= a;
+      e.setAttribute("aria-describedby", `${o}-character-count`), e.setAttribute("aria-invalid", l ? "true" : "false"), l ? e.setAttribute("data-error", "true") : e.removeAttribute("data-error");
     };
-    return r(), t.addEventListener("input", r), t.setAttribute("maxlength", String(a)), () => {
-      t.removeEventListener("input", r), t.removeAttribute("maxlength"), t.removeAttribute("aria-describedby"), t.removeAttribute("aria-invalid"), t.removeAttribute("data-error");
+    return n(), e.addEventListener("input", n), e.setAttribute("maxlength", String(a)), () => {
+      e.removeEventListener("input", n), e.removeAttribute("maxlength"), e.removeAttribute("aria-describedby"), e.removeAttribute("aria-invalid"), e.removeAttribute("data-error");
     };
-  }, [o, a]), /* @__PURE__ */ u(
+  }, [o, a]), /* @__PURE__ */ c(
     "small",
     {
-      className: w(
+      className: y(
         "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-end",
-        e >= a && "text-destructive",
-        e < a && "text-current"
+        t >= a && "text-destructive",
+        t < a && "text-current"
       ),
       role: "status",
       children: /* @__PURE__ */ E("span", { id: `${o}-character-count`, children: [
-        e,
+        t,
         " / ",
         a,
         " characters"
@@ -886,85 +1028,85 @@ function Ce({ elementId: o, maxLength: a }) {
     }
   );
 }
-function Ae(o, a) {
-  C(() => {
-    const e = document.getElementById(o);
-    if (!e)
+function De(o, a) {
+  A(() => {
+    const t = document.getElementById(o);
+    if (!t)
       return;
     if (!a) {
-      e.style.height = "auto";
+      t.style.height = "auto";
       return;
     }
-    const n = () => {
-      e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+    const r = () => {
+      t.style.height = "auto", t.style.height = `${t.scrollHeight}px`;
     };
-    return n(), e.addEventListener("input", n), e.addEventListener("resize", n), window.addEventListener("resize", n), () => {
-      e.removeEventListener("input", n), e.removeEventListener("resize", n), window.removeEventListener("resize", n);
+    return r(), t.addEventListener("input", r), t.addEventListener("resize", r), window.addEventListener("resize", r), () => {
+      t.removeEventListener("input", r), t.removeEventListener("resize", r), window.removeEventListener("resize", r);
     };
   }, [o, a]);
 }
-const Ie = {
+const ze = {
   base: "",
   "left-line": "border-l border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-destructive not-disabled:data-success:border-success",
   outline: "border border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-destructive not-disabled:data-success:border-success"
-}, $e = {
+}, ke = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   full: "px-3 rounded-full"
-}, X = {
+}, Z = {
   variant: "outline",
   rounded: "none"
 };
-function Je({
-  variant: o = X.variant,
+function et({
+  variant: o = Z.variant,
   rounded: a,
-  displayOnlyMode: e = !1,
-  errorMessage: n,
-  successMessage: t,
-  hideResizeHandle: r = !1,
+  displayOnlyMode: t = !1,
+  errorMessage: r,
+  successMessage: e,
+  hideResizeHandle: n = !1,
   autoExpand: s = !1,
-  characterLimit: d = 0,
-  className: c,
-  ...l
+  characterLimit: l = 0,
+  className: u,
+  ...d
 }) {
-  const b = I();
-  Ae(b, s || e);
+  const b = $();
+  De(b, s || t);
   let i = a;
-  o === "outline" && !a && (i = "md"), i = i || X.rounded;
-  let v = r;
-  (e || o === "left-line" && !r) && (v = !0);
-  const m = w(
+  o === "outline" && !a && (i = "md"), i = i || Z.rounded;
+  let v = n;
+  (t || o === "left-line" && !n) && (v = !0);
+  const m = y(
     "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
-    !e && Ie[o],
-    !e && $e[i],
-    !e && "px-2 py-1",
-    e && "pointer-events-none",
+    !t && ze[o],
+    !t && ke[i],
+    !t && "px-2 py-1",
+    t && "pointer-events-none",
     v && "no-resize-handle",
-    c
+    u
   );
-  return /* @__PURE__ */ E("div", { className: w("-space-y-1.5", e && "cursor-text"), children: [
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ E("div", { className: y("-space-y-1.5", t && "cursor-text"), children: [
+    /* @__PURE__ */ c(
       "textarea",
       {
-        ...l,
+        ...d,
         id: b,
-        "aria-disabled": l.disabled,
-        readOnly: e,
-        "aria-readonly": e || l["aria-readonly"],
+        "aria-disabled": d.disabled,
+        readOnly: t,
+        "aria-readonly": t || d["aria-readonly"],
         style: {
           resize: s ? "none" : void 0
         },
         className: m
       }
     ),
-    d > 0 && /* @__PURE__ */ u(Ce, { elementId: b, maxLength: d }),
-    !e && /* @__PURE__ */ u(S, { elementId: b, type: "error", message: n }),
-    !e && /* @__PURE__ */ u(S, { elementId: b, type: "success", message: t })
+    l > 0 && /* @__PURE__ */ c(Te, { elementId: b, maxLength: l }),
+    !t && /* @__PURE__ */ c(V, { elementId: b, type: "error", message: r }),
+    !t && /* @__PURE__ */ c(V, { elementId: b, type: "success", message: e })
   ] });
 }
-const Te = {
+const Le = {
   sm: {
     container: "h-5 min-w-9 w-9",
     thumb: "h-4 w-4",
@@ -980,7 +1122,7 @@ const Te = {
     thumb: "h-6 w-6",
     translate: "translate-x-6"
   }
-}, De = {
+}, Re = {
   default: {
     unchecked: "bg-muted",
     checked: "bg-primary"
@@ -993,54 +1135,54 @@ const Te = {
     unchecked: "bg-muted",
     checked: "bg-destructive"
   }
-}, Z = {
+}, J = {
   variant: "default",
   size: "md"
 };
-function Ye({
+function tt({
   ref: o,
   id: a,
-  size: e = Z.size,
-  variant: n = Z.variant,
-  checked: t,
-  onCheckedChange: r,
+  size: t = J.size,
+  variant: r = J.variant,
+  checked: e,
+  onCheckedChange: n,
   disabled: s = !1,
-  className: d,
-  thumbClassName: c,
-  backgroundClassNames: l,
+  className: l,
+  thumbClassName: u,
+  backgroundClassNames: d,
   ...b
 }) {
-  const i = I(), v = W(() => a || `toggle-${i}`, [a, i]), [f, m] = x(t);
-  C(() => {
-    m(t);
-  }, [t]);
+  const i = $(), v = U(() => a || `toggle-${i}`, [a, i]), [f, m] = x(e);
+  A(() => {
+    m(e);
+  }, [e]);
   const g = () => {
     if (!s) {
-      const $ = !f;
-      t === void 0 && m($), r == null || r($);
+      const C = !f;
+      e === void 0 && m(C), n == null || n(C);
     }
-  }, h = ($) => {
-    ($.key === " " || $.key === "Enter") && ($.preventDefault(), g());
-  }, y = Te[e], p = De[n], N = w(
+  }, h = (C) => {
+    (C.key === " " || C.key === "Enter") && (C.preventDefault(), g());
+  }, w = Le[t], p = Re[r], N = y(
     // Base styles
     "relative inline-flex items-center rounded-full transition-all duration-200 ease-in-out",
     "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
     // Size
-    y.container,
+    w.container,
     // Variant and state
-    f ? (l == null ? void 0 : l.checked) || p.checked : (l == null ? void 0 : l.unchecked) || p.unchecked,
+    f ? (d == null ? void 0 : d.checked) || p.checked : (d == null ? void 0 : d.unchecked) || p.unchecked,
     // Disabled state
     s && "opacity-50 cursor-not-allowed",
     !s && "cursor-pointer",
-    d
-  ), D = w(
+    l
+  ), D = y(
     // Base thumb styles
     "absolute left-0.5 top-1/2 -translate-y-1/2 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out",
     // Size
-    y.thumb,
+    w.thumb,
     // Position based on state
-    f && y.translate,
-    c
+    f && w.translate,
+    u
   );
   return /* @__PURE__ */ E(
     "button",
@@ -1058,210 +1200,210 @@ function Ye({
       className: N,
       ...b,
       children: [
-        /* @__PURE__ */ u("span", { className: D }),
-        /* @__PURE__ */ u("span", { className: "sr-only", children: f ? "Enabled" : "Disabled" })
+        /* @__PURE__ */ c("span", { className: D }),
+        /* @__PURE__ */ c("span", { className: "sr-only", children: f ? "Enabled" : "Disabled" })
       ]
     }
   );
 }
-const R = 8, B = 4, T = 6;
-function ze(o) {
-  return { calculatePosition: A(
-    (e, n) => {
-      const t = e.getBoundingClientRect(), r = n.getBoundingClientRect(), s = {
+const j = 8, F = 4, T = 6;
+function Be(o) {
+  return { calculatePosition: I(
+    (t, r) => {
+      const e = t.getBoundingClientRect(), n = r.getBoundingClientRect(), s = {
         width: window.innerWidth,
         height: window.innerHeight
-      }, d = (v, f, m, g) => v < 0 || f < 0 || v + m > s.width || f + g > s.height, c = {
+      }, l = (v, f, m, g) => v < 0 || f < 0 || v + m > s.width || f + g > s.height, u = {
         top: {
-          x: t.left + t.width / 2 - r.width / 2,
-          y: t.top - r.height - B,
+          x: e.left + e.width / 2 - n.width / 2,
+          y: e.top - n.height - F,
           arrow: {
-            x: r.width / 2 - T,
-            y: r.height
+            x: n.width / 2 - T,
+            y: n.height
           }
         },
         bottom: {
-          x: t.left + t.width / 2 - r.width / 2,
-          y: t.bottom + B,
+          x: e.left + e.width / 2 - n.width / 2,
+          y: e.bottom + F,
           arrow: {
-            x: r.width / 2 - T,
+            x: n.width / 2 - T,
             y: -6
           }
         },
         left: {
-          x: t.left - r.width - B,
-          y: t.top + t.height / 2 - r.height / 2,
+          x: e.left - n.width - F,
+          y: e.top + e.height / 2 - n.height / 2,
           arrow: {
-            x: r.width,
-            y: r.height / 2 - T
+            x: n.width,
+            y: n.height / 2 - T
           }
         },
         right: {
-          x: t.right + B,
-          y: t.top + t.height / 2 - r.height / 2,
+          x: e.right + F,
+          y: e.top + e.height / 2 - n.height / 2,
           arrow: {
             x: -6,
-            y: r.height / 2 - T
+            y: n.height / 2 - T
           }
         }
       };
-      let l = o, b = c[o];
-      if (d(b.x, b.y, r.width, r.height)) {
+      let d = o, b = u[o];
+      if (l(b.x, b.y, n.width, n.height)) {
         const v = {
           top: "bottom",
           bottom: "top",
           left: "right",
           right: "left"
-        }, f = c[v[o]];
-        if (!d(f.x, f.y, r.width, r.height))
-          l = v[o], b = f;
+        }, f = u[v[o]];
+        if (!l(f.x, f.y, n.width, n.height))
+          d = v[o], b = f;
         else {
           const m = ["top", "bottom", "left", "right"].filter(
             (g) => g !== o && g !== v[o]
           );
           for (const g of m) {
-            const h = c[g];
-            if (!d(h.x, h.y, r.width, r.height)) {
-              l = g, b = h;
+            const h = u[g];
+            if (!l(h.x, h.y, n.width, n.height)) {
+              d = g, b = h;
               break;
             }
           }
         }
       }
       b.x = Math.max(
-        R,
-        Math.min(b.x, s.width - r.width - R)
+        j,
+        Math.min(b.x, s.width - n.width - j)
       ), b.y = Math.max(
-        R,
-        Math.min(b.y, s.height - r.height - R)
+        j,
+        Math.min(b.y, s.height - n.height - j)
       );
       const i = {
-        x: t.left + t.width / 2,
-        y: t.top + t.height / 2
+        x: e.left + e.width / 2,
+        y: e.top + e.height / 2
       };
-      return l === "top" || l === "bottom" ? b.arrow.x = Math.max(
+      return d === "top" || d === "bottom" ? b.arrow.x = Math.max(
         T,
-        Math.min(i.x - b.x - T, r.width - T * 2)
+        Math.min(i.x - b.x - T, n.width - T * 2)
       ) : b.arrow.y = Math.max(
         T,
-        Math.min(i.y - b.y - T, r.height - T * 2)
+        Math.min(i.y - b.y - T, n.height - T * 2)
       ), {
         ...b,
-        placement: l
+        placement: d
       };
     },
     [o]
   ) };
 }
-function ke(o, a, e) {
-  const n = j(null), t = j(null), r = A(() => {
-    if (!n.current || !t.current) return;
-    const s = o(n.current, t.current);
-    e(s);
-  }, [o, e]);
-  return C(() => {
+function Se(o, a, t) {
+  const r = R(null), e = R(null), n = I(() => {
+    if (!r.current || !e.current) return;
+    const s = o(r.current, e.current);
+    t(s);
+  }, [o, t]);
+  return A(() => {
     if (!a) return;
-    const s = () => r();
+    const s = () => n();
     return window.addEventListener("resize", s), () => {
       window.removeEventListener("resize", s);
     };
-  }, [a, r]), {
-    triggerRef: n,
-    tooltipRef: t,
-    updatePosition: r
+  }, [a, n]), {
+    triggerRef: r,
+    tooltipRef: e,
+    updatePosition: n
   };
 }
-function Le(o, a, e, n, t, r, s, d, c) {
-  const l = j(null), b = A(() => {
-    o || (l.current && clearTimeout(l.current), l.current = window.setTimeout(() => {
-      e(!0), requestAnimationFrame(() => {
-        t(), n(!0);
+function je(o, a, t, r, e, n, s, l, u) {
+  const d = R(null), b = I(() => {
+    o || (d.current && clearTimeout(d.current), d.current = window.setTimeout(() => {
+      t(!0), requestAnimationFrame(() => {
+        e(), r(!0);
       });
     }, a));
-  }, [o, a, e, t, n]), i = A(
+  }, [o, a, t, e, r]), i = I(
     (v = !1) => {
-      if (l.current && clearTimeout(l.current), v) {
-        n(!1), setTimeout(() => e(!1), 150);
+      if (d.current && clearTimeout(d.current), v) {
+        r(!1), setTimeout(() => t(!1), 150);
         return;
       }
-      l.current = window.setTimeout(() => {
-        n(!1), setTimeout(() => e(!1), 150);
+      d.current = window.setTimeout(() => {
+        r(!1), setTimeout(() => t(!1), 150);
       }, 100);
     },
-    [n, e]
+    [r, t]
   );
-  return C(() => {
-    !r && !s && !d && c && i();
-  }, [r, s, d, c, i]), C(() => () => {
-    l.current && clearTimeout(l.current);
+  return A(() => {
+    !n && !s && !l && u && i();
+  }, [n, s, l, u, i]), A(() => () => {
+    d.current && clearTimeout(d.current);
   }, []), {
     showTooltip: b,
     hideTooltip: i,
-    timeoutRef: l
+    timeoutRef: d
   };
 }
-function Me({
+function rt({
   id: o,
   children: a,
-  message: e,
-  placement: n = "top",
-  disabled: t = !1,
-  delay: r = 200,
+  message: t,
+  placement: r = "top",
+  disabled: e = !1,
+  delay: n = 200,
   className: s
 }) {
-  const [d, c] = x(!1), [l, b] = x(!1), [i, v] = x(null), [f, m] = x(!1), [g, h] = x(!1), [y, p] = x(!1), { calculatePosition: N } = ze(n), { triggerRef: D, tooltipRef: $, updatePosition: F } = ke(N, l, v), { showTooltip: k, hideTooltip: L, timeoutRef: U } = Le(
-    t,
-    r,
+  const [l, u] = x(!1), [d, b] = x(!1), [i, v] = x(null), [f, m] = x(!1), [g, h] = x(!1), [w, p] = x(!1), { calculatePosition: N } = Be(r), { triggerRef: D, tooltipRef: C, updatePosition: L } = Se(N, d, v), { showTooltip: B, hideTooltip: S, timeoutRef: Q } = je(
+    e,
+    n,
     b,
-    c,
-    F,
+    u,
+    L,
     f,
     g,
-    y,
-    d
-  ), O = I(), _ = o ?? O;
-  return /* @__PURE__ */ E(J, { children: [
+    w,
+    l
+  ), O = $(), M = o ?? O;
+  return /* @__PURE__ */ E(W, { children: [
     z.cloneElement(a, {
-      ref: (V) => {
-        D.current = V;
+      ref: (H) => {
+        D.current = H;
       },
       onMouseEnter: () => {
-        m(!0), k();
+        m(!0), B();
       },
       onMouseLeave: () => {
         m(!1);
       },
       onFocus: () => {
-        p(!0), k();
+        p(!0), B();
       },
       onBlur: () => {
-        p(!1), L(!0);
+        p(!1), S(!0);
       },
-      onKeyDown: (V) => {
-        V.key === "Escape" && L(!0);
+      onKeyDown: (H) => {
+        H.key === "Escape" && S(!0);
       },
-      "aria-describedby": t ? void 0 : _
+      "aria-describedby": e ? void 0 : M
     }),
-    l && M(
-      /* @__PURE__ */ u(
+    d && _(
+      /* @__PURE__ */ c(
         "div",
         {
-          ref: $,
-          id: _,
+          ref: C,
+          id: M,
           role: "tooltip",
-          className: w(
-            "fixed z-50 px-2 py-1 text-sm rounded shadow-lg pointer-events-auto transition-all duration-150 ease-out",
-            d ? "opacity-100" : "opacity-0",
+          className: y(
+            "fixed z-50 px-2 py-1 text-sm rounded shadow-lg bg-popover pointer-events-auto transition-all duration-150 ease-out",
+            l ? "opacity-100" : "opacity-0",
             s
           ),
           style: i ? { left: i.x, top: i.y } : { opacity: 0 },
           onMouseEnter: () => {
-            h(!0), U.current && clearTimeout(U.current);
+            h(!0), Q.current && clearTimeout(Q.current);
           },
           onMouseLeave: () => {
             h(!1);
           },
-          children: e
+          children: t
         }
       ),
       document.body
@@ -1269,24 +1411,25 @@ function Me({
   ] });
 }
 export {
-  qe as Accordion,
+  Ue as Accordion,
   q as AccordionItem,
-  et as ActionModal,
+  at as ActionModal,
   me as Button,
-  de as ButtonLoadingDots,
-  Ke as Checkbox,
-  Ge as Clickable,
-  We as Input,
-  Ue as Label,
-  _e as Modal,
-  Qe as RadioGroup,
+  ce as ButtonLoadingDots,
+  _e as Checkbox,
+  Qe as Clickable,
+  Me as Input,
+  Xe as Label,
+  Ze as Modal,
+  Je as Panel,
+  Ye as RadioGroup,
   G as RadioGroupItem,
-  ye as RadioInput,
-  Xe as Separator,
-  Ze as Slot,
-  Je as Textarea,
-  tt as Toast,
-  Ye as Toggle,
-  Me as Tooltip
+  Ae as RadioInput,
+  Pe as Separator,
+  Oe as Slot,
+  et as Textarea,
+  st as Toast,
+  tt as Toggle,
+  rt as Tooltip
 };
 //# sourceMappingURL=components.esm.js.map