tailwind-ux-kit 1.0.84 → 1.0.91

package/lib/tailwind-ux-kit.es.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as S, jsx as i } from "react/jsx-runtime";
-import A, { forwardRef as oe, useState as D, useMemo as j, useId as be, useRef as F, useCallback as z, useEffect as R, createContext as ae, useContext as le } from "react";
+import A, { forwardRef as oe, useState as z, useMemo as j, useId as be, useRef as F, useCallback as D, useEffect as B, createContext as ae, useContext as le } from "react";
 const V = {
   xs: "text-xs px-2 py-1",
   sm: "text-sm px-3 py-1.5",
@@ -18,10 +18,10 @@ const V = {
   filled: "absolute duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600",
   outlined: "absolute duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600",
   standard: "absolute duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600"
-}, he = (e, r, n) => {
-  if (n)
+}, he = (e, n, t) => {
+  if (t)
     return "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500";
-  if (r)
+  if (n)
     return "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500";
   switch (e) {
     case "error":
@@ -33,19 +33,19 @@ const V = {
     default:
       return "border-gray-300 focus:ring-blue-500";
   }
-}, ye = oe((e, r) => {
+}, ye = oe((e, n) => {
   const {
-    label: n,
-    id: t,
+    label: t,
+    id: r,
     inputSize: s = "md",
-    shape: d = "rounded",
+    shape: c = "rounded",
     validate: p,
-    onValidatedChange: u,
-    className: c = "",
+    onValidatedChange: f,
+    className: d = "",
     icon: a,
     iconPosition: o = "left",
     floatingLabelStyle: l,
-    onChange: f,
+    onChange: u,
     isValid: g,
     isInvalid: b,
     feedback: x,
@@ -53,69 +53,69 @@ const V = {
     feedbackType: $ = "invalid",
     labelClasses: N = "",
     inputType: w = "",
-    inputPattern: h,
-    ...y
-  } = e, [v, I] = D("default"), E = A.useCallback(
-    (P) => {
-      const L = P.target.value, Z = (p == null ? void 0 : p(L)) ?? "default";
-      I(Z), u == null || u(P, Z), f == null || f(P);
+    inputPattern: y,
+    ...h
+  } = e, [v, P] = z("default"), L = A.useCallback(
+    (I) => {
+      const E = I.target.value, Z = (p == null ? void 0 : p(E)) ?? "default";
+      P(Z), f == null || f(I, Z), u == null || u(I);
     },
-    [p, u, f]
-  ), m = j(() => t || (typeof n == "string" ? `input-${n.toLowerCase().replace(/\s+/g, "-")}` : `input-${Math.random().toString(36).slice(2)}`), [t, n]), C = !!l, O = V[s] || V.md, M = ee[d] || ee.flat, B = j(
+    [p, f, u]
+  ), m = j(() => r || (typeof t == "string" ? `input-${t.toLowerCase().replace(/\s+/g, "-")}` : `input-${Math.random().toString(36).slice(2)}`), [r, t]), C = !!l, O = V[s] || V.md, M = ee[c] || ee.flat, R = j(
     () => he(v, g, b),
     [v, g, b]
-  ), T = j(() => o === "start" || o === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5", [o]), _ = j(() => a ? o === "start" || o === "left" ? "ps-10" : "pe-10" : "", [a, o]), K = (P) => {
+  ), T = j(() => o === "start" || o === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5", [o]), _ = j(() => a ? o === "start" || o === "left" ? "ps-10" : "pe-10" : "", [a, o]), K = (I) => {
     var H;
-    const L = P.key;
-    !(P.ctrlKey || P.metaKey || L.length !== 1) && (() => {
+    const E = I.key;
+    !(I.ctrlKey || I.metaKey || E.length !== 1 || ["Backspace", "ArrowLeft", "ArrowRight", "Delete", "Tab"].includes(E)) && (() => {
       const W = /^\d$/, X = /^[a-zA-Z]$/;
       switch (w) {
         case "numeric":
         case "number":
         case "integer":
-          return !W.test(L);
+          return !W.test(E);
         case "decimal":
-          return !W.test(L) && L !== "." && L !== "Backspace" && L !== "Tab";
+          return !W.test(E) && E !== "." && E !== "Backspace" && E !== "Tab";
         case "alphabetic":
-          return !X.test(L);
+          return !X.test(E);
         case "custom":
-          return h ? !h.test(L) : !1;
+          return y ? !y.test(E) : !1;
         default:
           return !1;
       }
-    })() && P.preventDefault(), (H = y.onKeyDown) == null || H.call(y, P);
-  }, ge = (P) => {
+    })() && I.preventDefault(), (H = h.onKeyDown) == null || H.call(h, I);
+  }, ge = (I) => {
     var U;
-    const L = P.clipboardData.getData("Text");
+    const E = I.clipboardData.getData("Text");
     (() => {
       const H = /^\d+$/, W = /^\d*\.?\d*$/, X = /^[a-zA-Z]+$/;
       switch (w) {
         case "numeric":
         case "number":
         case "integer":
-          return !H.test(L);
+          return !H.test(E);
         case "decimal":
-          return !W.test(L);
+          return !W.test(E);
         case "alphabetic":
-          return !X.test(L);
+          return !X.test(E);
         case "custom":
-          return h ? !h.test(L) : !1;
+          return y ? !y.test(E) : !1;
         default:
           return !1;
       }
-    })() && P.preventDefault(), (U = y.onPaste) == null || U.call(y, P);
+    })() && I.preventDefault(), (U = h.onPaste) == null || U.call(h, I);
   };
   return /* @__PURE__ */ S(
     "div",
     {
       className: `w-full relative ${C ? "z-0" : ""} tailwind-ux-input`,
       children: [
-        !C && n && /* @__PURE__ */ i(
+        !C && t && /* @__PURE__ */ i(
           "label",
           {
             htmlFor: m,
             className: `block mb-1 text-sm ${g ? "text-green-700 dark:text-green-500" : b ? "text-red-700 dark:text-red-500" : "text-gray-700"} ${N}`,
-            children: n
+            children: t
           }
         ),
         /* @__PURE__ */ S("div", { className: "relative w-full", children: [
@@ -130,25 +130,25 @@ const V = {
           /* @__PURE__ */ i(
             "input",
             {
-              ...y,
+              ...h,
               id: m,
-              ref: r,
-              placeholder: C ? " " : y.placeholder,
-              onChange: E,
+              ref: n,
+              placeholder: C ? " " : h.placeholder,
+              onChange: L,
               onKeyDown: K,
               onPaste: ge,
               className: `border peer w-full block font-normal appearance-none focus:outline-none focus:ring-0 transition text-gray-900 placeholder-gray-600 border-gray-400
             ${O}
             ${C && l && me[l]}
-            ${_} ${M} ${B} ${c}`
+            ${_} ${M} ${R} ${d}`
             }
           ),
-          C && n && l && /* @__PURE__ */ i(
+          C && t && l && /* @__PURE__ */ i(
             "label",
             {
               htmlFor: m,
-              className: `ms-1 ${xe[l]} ${c}`,
-              children: n
+              className: `ms-1 ${xe[l]} ${d}`,
+              children: t
             }
           )
         ] }),
@@ -182,52 +182,52 @@ const we = {
   filled: "absolute duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600",
   outlined: "absolute duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600",
   standard: "absolute duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600"
-}, ke = (e, r, n) => {
-  if (n)
+}, ke = (e, n, t) => {
+  if (t)
     return "border-red-500 bg-red-50 text-red-900 focus:ring-red-500 focus:border-red-500";
-  if (r)
+  if (n)
     return "border-green-500 bg-green-50 text-green-900 focus:ring-green-500 focus:border-green-500";
-  const t = "focus:ring focus:border";
+  const r = "focus:ring focus:border";
   switch (e) {
     case "error":
-      return `${t}-red-500 border-red-500 bg-red-50`;
+      return `${r}-red-500 border-red-500 bg-red-50`;
     case "warning":
-      return `${t}-yellow-500 border-yellow-500 bg-yellow-50`;
+      return `${r}-yellow-500 border-yellow-500 bg-yellow-50`;
     case "success":
-      return `${t}-green-500 border-green-500 bg-green-50`;
+      return `${r}-green-500 border-green-500 bg-green-50`;
     default:
       return "border-gray-300 focus:ring-blue-500";
   }
-}, Se = oe((e, r) => {
+}, Se = oe((e, n) => {
   const {
-    label: n,
-    id: t,
+    label: t,
+    id: r,
     inputSize: s = "md",
-    shape: d = "rounded",
+    shape: c = "rounded",
     validate: p,
-    onValidatedChange: u,
-    className: c = "",
+    onValidatedChange: f,
+    className: d = "",
     icon: a,
     iconPosition: o = "left",
     floatingLabelStyle: l,
-    onChange: f,
+    onChange: u,
     isValid: g,
     isInvalid: b,
     feedback: x,
     feedbackType: k = "invalid",
     children: $,
     ...N
-  } = e, [w, h] = D("default"), y = be(), v = j(() => t || (typeof n == "string" ? `select-${n.toLowerCase().replace(/\s+/g, "-")}` : y), [t, n, y]), I = (T) => {
+  } = e, [w, y] = z("default"), h = be(), v = j(() => r || (typeof t == "string" ? `select-${t.toLowerCase().replace(/\s+/g, "-")}` : h), [r, t, h]), P = (T) => {
     const _ = T.target.value, K = (p == null ? void 0 : p(_)) ?? "default";
-    h(K), u == null || u(T, K), f == null || f(T);
-  }, E = !!l, m = we[s], C = ve[d], O = ke(w, g, b);
-  return /* @__PURE__ */ S("div", { className: `w-full relative ${E ? "z-0" : ""}`, children: [
-    !E && n && /* @__PURE__ */ i(
+    y(K), f == null || f(T, K), u == null || u(T);
+  }, L = !!l, m = we[s], C = ve[c], O = ke(w, g, b);
+  return /* @__PURE__ */ S("div", { className: `w-full relative ${L ? "z-0" : ""}`, children: [
+    !L && t && /* @__PURE__ */ i(
       "label",
       {
         htmlFor: v,
         className: `block mb-1 text-sm ${g ? "text-green-700" : b ? "text-red-700" : "text-gray-700"}`,
-        children: n
+        children: t
       }
     ),
     /* @__PURE__ */ S("div", { className: "relative w-full", children: [
@@ -243,21 +243,21 @@ const we = {
         {
           ...N,
           id: v,
-          ref: r,
-          onChange: I,
+          ref: n,
+          onChange: P,
           className: `border peer w-full block font-normal appearance-none focus:outline-none focus:ring-0 transition text-gray-600 placeholder-[#798ba5] border-gray-400
             ${m} ${a && (o === "start" || o === "left") ? "ps-10" : a ? "pe-10" : ""}
-            ${E && l && Ce[l]}
-            ${C} ${O} ${c}`,
+            ${L && l && Ce[l]}
+            ${C} ${O} ${d}`,
           children: $
         }
       ),
-      E && n && l && /* @__PURE__ */ i(
+      L && t && l && /* @__PURE__ */ i(
         "label",
         {
           htmlFor: v,
-          className: `ms-1 ${$e[l]} ${c}`,
-          children: n
+          className: `ms-1 ${$e[l]} ${d}`,
+          children: t
         }
       )
     ] }),
@@ -297,38 +297,38 @@ const Ne = {
   "soft-info": "btn-soft-info",
   "soft-dark": "btn-soft-dark",
   "soft-light": "btn-soft-light"
-}, Ee = {
+}, Le = {
   xs: "px-3 py-2 text-xs",
   sm: "px-3 py-2 text-sm",
   md: "px-5 py-2.5 text-sm",
   lg: "px-5 py-3 text-base",
   xl: "px-6 py-3.5 text-base"
-}, Le = {
+}, Ee = {
   flat: "shadow-none",
   rounded: "rounded-sm",
   pill: "rounded-full",
   circle: "rounded-full w-10 h-10 p-0 flex items-center justify-center"
 }, Qe = ({
   children: e,
-  variant: r = "primary",
-  size: n = "md",
-  type: t = "button",
+  variant: n = "primary",
+  size: t = "md",
+  type: r = "button",
   shape: s = "rounded",
-  className: d = "",
+  className: c = "",
   isLoading: p = !1,
-  disabled: u = !1,
-  ...c
+  disabled: f = !1,
+  ...d
 }) => {
-  const a = u || p, o = [
+  const a = f || p, o = [
     "inline-flex items-center justify-center font-normal transition duration-150",
-    Ne[r],
-    Ee[n],
-    Le[s],
+    Ne[n],
+    Le[t],
+    Ee[s],
     s === "flat" ? "shadow-none" : "shadow-sm",
     a ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-    d
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ S("button", { type: t, className: o, disabled: a, ...c, children: [
+  return /* @__PURE__ */ S("button", { type: r, className: o, disabled: a, ...d, children: [
     p && /* @__PURE__ */ S(
       "svg",
       {
@@ -366,106 +366,106 @@ var ie = {
   style: void 0,
   attr: void 0
 }, te = A.createContext && /* @__PURE__ */ A.createContext(ie), Oe = ["attr", "size", "title"];
-function Pe(e, r) {
+function Pe(e, n) {
   if (e == null) return {};
-  var n = Ie(e, r), t, s;
+  var t = Ie(e, n), r, s;
   if (Object.getOwnPropertySymbols) {
-    var d = Object.getOwnPropertySymbols(e);
-    for (s = 0; s < d.length; s++)
-      t = d[s], !(r.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+    var c = Object.getOwnPropertySymbols(e);
+    for (s = 0; s < c.length; s++)
+      r = c[s], !(n.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
   }
-  return n;
+  return t;
 }
-function Ie(e, r) {
+function Ie(e, n) {
   if (e == null) return {};
-  var n = {};
-  for (var t in e)
-    if (Object.prototype.hasOwnProperty.call(e, t)) {
-      if (r.indexOf(t) >= 0) continue;
-      n[t] = e[t];
+  var t = {};
+  for (var r in e)
+    if (Object.prototype.hasOwnProperty.call(e, r)) {
+      if (n.indexOf(r) >= 0) continue;
+      t[r] = e[r];
     }
-  return n;
+  return t;
 }
 function G() {
   return G = Object.assign ? Object.assign.bind() : function(e) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var t in n)
-        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    for (var n = 1; n < arguments.length; n++) {
+      var t = arguments[n];
+      for (var r in t)
+        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
     }
     return e;
   }, G.apply(this, arguments);
 }
-function ne(e, r) {
-  var n = Object.keys(e);
+function ne(e, n) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var t = Object.getOwnPropertySymbols(e);
-    r && (t = t.filter(function(s) {
+    var r = Object.getOwnPropertySymbols(e);
+    n && (r = r.filter(function(s) {
       return Object.getOwnPropertyDescriptor(e, s).enumerable;
-    })), n.push.apply(n, t);
+    })), t.push.apply(t, r);
   }
-  return n;
+  return t;
 }
 function q(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var n = arguments[r] != null ? arguments[r] : {};
-    r % 2 ? ne(Object(n), !0).forEach(function(t) {
-      je(e, t, n[t]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ne(Object(n)).forEach(function(t) {
-      Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+  for (var n = 1; n < arguments.length; n++) {
+    var t = arguments[n] != null ? arguments[n] : {};
+    n % 2 ? ne(Object(t), !0).forEach(function(r) {
+      je(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ne(Object(t)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
   return e;
 }
-function je(e, r, n) {
-  return r = ze(r), r in e ? Object.defineProperty(e, r, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = n, e;
+function je(e, n, t) {
+  return n = De(n), n in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
 }
-function ze(e) {
-  var r = De(e, "string");
-  return typeof r == "symbol" ? r : r + "";
+function De(e) {
+  var n = ze(e, "string");
+  return typeof n == "symbol" ? n : n + "";
 }
-function De(e, r) {
+function ze(e, n) {
   if (typeof e != "object" || !e) return e;
-  var n = e[Symbol.toPrimitive];
-  if (n !== void 0) {
-    var t = n.call(e, r);
-    if (typeof t != "object") return t;
+  var t = e[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var r = t.call(e, n);
+    if (typeof r != "object") return r;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (r === "string" ? String : Number)(e);
+  return (n === "string" ? String : Number)(e);
 }
 function ce(e) {
-  return e && e.map((r, n) => /* @__PURE__ */ A.createElement(r.tag, q({
-    key: n
-  }, r.attr), ce(r.child)));
+  return e && e.map((n, t) => /* @__PURE__ */ A.createElement(n.tag, q({
+    key: t
+  }, n.attr), ce(n.child)));
 }
 function Q(e) {
-  return (r) => /* @__PURE__ */ A.createElement(Ae, G({
+  return (n) => /* @__PURE__ */ A.createElement(Ae, G({
     attr: q({}, e.attr)
-  }, r), ce(e.child));
+  }, n), ce(e.child));
 }
 function Ae(e) {
-  var r = (n) => {
+  var n = (t) => {
     var {
-      attr: t,
+      attr: r,
       size: s,
-      title: d
-    } = e, p = Pe(e, Oe), u = s || n.size || "1em", c;
-    return n.className && (c = n.className), e.className && (c = (c ? c + " " : "") + e.className), /* @__PURE__ */ A.createElement("svg", G({
+      title: c
+    } = e, p = Pe(e, Oe), f = s || t.size || "1em", d;
+    return t.className && (d = t.className), e.className && (d = (d ? d + " " : "") + e.className), /* @__PURE__ */ A.createElement("svg", G({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, n.attr, t, p, {
-      className: c,
+    }, t.attr, r, p, {
+      className: d,
       style: q(q({
-        color: e.color || n.color
-      }, n.style), e.style),
-      height: u,
-      width: u,
+        color: e.color || t.color
+      }, t.style), e.style),
+      height: f,
+      width: f,
       xmlns: "http://www.w3.org/2000/svg"
-    }), d && /* @__PURE__ */ A.createElement("title", null, d), e.children);
+    }), c && /* @__PURE__ */ A.createElement("title", null, c), e.children);
   };
-  return te !== void 0 ? /* @__PURE__ */ A.createElement(te.Consumer, null, (n) => r(n)) : r(ie);
+  return te !== void 0 ? /* @__PURE__ */ A.createElement(te.Consumer, null, (t) => n(t)) : n(ie);
 }
 function Me(e) {
   return Q({ attr: { viewBox: "0 0 448 512" }, child: [{ tag: "path", attr: { d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }, child: [] }] })(e);
@@ -475,11 +475,11 @@ const Te = {
   sm: "w-4 h-4 text-xs",
   md: "w-5 h-5 text-sm",
   lg: "w-6 h-6 text-base"
-}, Re = {
+}, Be = {
   flat: "rounded-none",
   rounded: "rounded-sm",
   pill: "rounded-full"
-}, Be = {
+}, Re = {
   primary: "primary",
   secondary: "secondary",
   success: "success",
@@ -508,22 +508,22 @@ const Te = {
 }, _e = A.forwardRef(
   ({
     label: e,
-    boxSize: r = "md",
-    shape: n = "rounded",
-    variant: t = "success",
+    boxSize: n = "md",
+    shape: t = "rounded",
+    variant: r = "success",
     onSelectionChange: s,
-    disabled: d = !1,
+    disabled: c = !1,
     className: p = "",
-    id: u,
-    value: c,
+    id: f,
+    value: d,
     icon: a,
     children: o,
     checked: l,
-    ...f
+    ...u
   }, g) => {
     const b = (m) => {
-      !d && s && s(m.target.checked), f.onChange && f.onChange(m);
-    }, x = "mr-2 border flex items-center justify-center transition-all", k = Te[r], $ = Re[n], N = Be[t] ?? "", w = t.startsWith("outline"), h = t.startsWith("soft"), I = `${x} ${k} ${$} ${N} ${l && (w || h || t === "link") ? "peer-checked:bg-current peer-checked:text-white" : l ? "peer-checked:bg-current" : ""}`, E = {
+      !c && s && s(m.target.checked), u.onChange && u.onChange(m);
+    }, x = "mr-2 border flex items-center justify-center transition-all", k = Te[n], $ = Be[t], N = Re[r] ?? "", w = r.startsWith("outline"), y = r.startsWith("soft"), P = `${x} ${k} ${$} ${N} ${l && (w || y || r === "link") ? "peer-checked:bg-current peer-checked:text-white" : l ? "peer-checked:bg-current" : ""}`, L = {
       xs: "w-2 h-2",
       sm: "w-2.5 h-2.5",
       md: "w-3 h-3",
@@ -532,7 +532,7 @@ const Te = {
     return /* @__PURE__ */ S(
       "label",
       {
-        className: `flex items-center ${d ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} me-4 ${p}`,
+        className: `flex items-center ${c ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} me-4 ${p}`,
         children: [
           /* @__PURE__ */ i(
             "input",
@@ -541,14 +541,14 @@ const Te = {
               className: "peer hidden",
               checked: l,
               onChange: b,
-              disabled: d,
-              id: u,
-              value: c,
+              disabled: c,
+              id: f,
+              value: d,
               ref: g,
-              ...f
+              ...u
             }
           ),
-          /* @__PURE__ */ i("span", { className: I.trim(), children: (l || f.defaultChecked) && (a ?? /* @__PURE__ */ i(Me, { className: `${E[r]}` })) }),
+          /* @__PURE__ */ i("span", { className: P.trim(), children: (l || u.defaultChecked) && (a ?? /* @__PURE__ */ i(Me, { className: `${L[n]}` })) }),
           e || o ? /* @__PURE__ */ i("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: e ?? o }) : null
         ]
       }
@@ -558,50 +558,50 @@ const Te = {
 _e.displayName = "Checkbox";
 const Ve = ({
   label: e,
-  header: r,
-  items: n = [],
-  onSelect: t,
+  header: n,
+  items: t = [],
+  onSelect: r,
   renderItem: s,
-  position: d = "right",
+  position: c = "right",
   className: p = "",
-  menuClassName: u = "",
-  width: c = "w-48",
+  menuClassName: f = "",
+  width: d = "w-48",
   closeOnSelect: a = !1,
   transition: o = !0,
   ariaLabel: l = "Dropdown menu",
-  ...f
+  ...u
 }) => {
-  const [g, b] = D(!1), [x, k] = D(!1), $ = F(null), N = F(null), w = j(() => ({
+  const [g, b] = z(!1), [x, k] = z(!1), $ = F(null), N = F(null), w = j(() => ({
     left: "left-0",
     center: "left-1/2 transform -translate-x-1/2",
     right: "right-0"
-  })[d], [d]), h = z(() => {
+  })[c], [c]), y = D(() => {
     const m = N.current, C = $.current;
     if (!m || !C) return;
-    const { top: O, bottom: M } = m.getBoundingClientRect(), B = C.offsetHeight, T = window.innerHeight - M, _ = O;
-    k(T < B && _ > B);
-  }, []), y = z((m) => {
+    const { top: O, bottom: M } = m.getBoundingClientRect(), R = C.offsetHeight, T = window.innerHeight - M, _ = O;
+    k(T < R && _ > R);
+  }, []), h = D((m) => {
     var C, O;
     !((C = $.current) != null && C.contains(m.target)) && !((O = N.current) != null && O.contains(m.target)) && b(!1);
-  }, []), v = z(() => b((m) => !m), []), I = z(() => b(!1), []);
-  R(() => {
+  }, []), v = D(() => b((m) => !m), []), P = D(() => b(!1), []);
+  B(() => {
     if (g)
-      return h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), () => {
-        window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
+      return y(), window.addEventListener("resize", y), window.addEventListener("scroll", y, !0), () => {
+        window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0);
       };
-  }, [g, h]), R(() => (document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y)), [y]);
-  const E = j(
+  }, [g, y]), B(() => (document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h)), [h]);
+  const L = j(
     () => [
       "absolute z-50 bg-white rounded shadow-lg overflow-hidden w-auto",
       x ? "bottom-full mb-2" : "top-full mt-2",
       w,
-      c,
+      d,
       o && "transition-all duration-200 ease-out",
-      u
+      f
     ].filter(Boolean).join(" "),
-    [x, w, c, o, u]
+    [x, w, d, o, f]
   );
-  return /* @__PURE__ */ S("div", { className: `relative inline-block ${p}`, ...f, children: [
+  return /* @__PURE__ */ S("div", { className: `relative inline-block ${p}`, ...u, children: [
     /* @__PURE__ */ i(
       "button",
       {
@@ -614,11 +614,11 @@ const Ve = ({
         children: e
       }
     ),
-    g && /* @__PURE__ */ S("div", { ref: $, role: "menu", className: E, children: [
-      r && r,
-      n.map((m, C) => {
+    g && /* @__PURE__ */ S("div", { ref: $, role: "menu", className: L, children: [
+      n && n,
+      t.map((m, C) => {
         const O = () => {
-          t && t(m), a && I();
+          r && r(m), a && P();
         };
         return /* @__PURE__ */ i("div", { children: s ? s(m, O) : /* @__PURE__ */ i(
           "div",
@@ -634,26 +634,26 @@ const Ve = ({
   ] });
 }, et = ({
   children: e,
-  content: r,
-  position: n = "top",
-  className: t = "",
+  content: n,
+  position: t = "top",
+  className: r = "",
   tooltipClass: s = "",
-  tooltipStyle: d = {}
+  tooltipStyle: c = {}
 }) => {
-  const p = F(null), u = F(null);
-  R(() => {
-    const a = p.current, o = u.current;
+  const p = F(null), f = F(null);
+  B(() => {
+    const a = p.current, o = f.current;
     if (!a || !o) return;
     const l = () => {
       o.style.opacity = "1", o.style.visibility = "visible";
-    }, f = () => {
+    }, u = () => {
       o.style.opacity = "0", o.style.visibility = "hidden";
     };
-    return a.addEventListener("mouseenter", l), a.addEventListener("mouseleave", f), () => {
-      a.removeEventListener("mouseenter", l), a.removeEventListener("mouseleave", f);
+    return a.addEventListener("mouseenter", l), a.addEventListener("mouseleave", u), () => {
+      a.removeEventListener("mouseenter", l), a.removeEventListener("mouseleave", u);
     };
   }, []);
-  const c = (a) => {
+  const d = (a) => {
     const o = {
       position: "absolute",
       opacity: 0,
@@ -708,19 +708,19 @@ const Ve = ({
         return o;
     }
   };
-  return /* @__PURE__ */ S("div", { ref: p, className: `relative inline-block ${t}`, children: [
+  return /* @__PURE__ */ S("div", { ref: p, className: `relative inline-block ${r}`, children: [
     e,
     /* @__PURE__ */ i(
       "div",
       {
-        ref: u,
+        ref: f,
         role: "tooltip",
         className: s,
         style: {
-          ...c(n),
-          ...d
+          ...d(t),
+          ...c
         },
-        children: r
+        children: n
       }
     )
   ] });
@@ -755,20 +755,20 @@ const Ve = ({
   circle: "rounded-full p-2 w-8 h-8 justify-center"
 }, tt = ({
   label: e,
-  variant: r = "primary",
-  size: n = "sm",
-  shape: t = "rounded",
+  variant: n = "primary",
+  size: t = "sm",
+  shape: r = "rounded",
   icon: s,
-  dismissible: d,
+  dismissible: c,
   onDismiss: p,
-  className: u = "",
-  ...c
+  className: f = "",
+  ...d
 }) => {
-  const a = !e && !!s, o = `inline-flex items-center font-medium ${Fe[r] || ""} ${Ke[n] || ""} ${Ze[t] || ""} ${a ? "justify-center p-2 w-8 h-8" : ""} ` + u;
-  return /* @__PURE__ */ S("span", { className: o.trim(), ...c, children: [
+  const a = !e && !!s, o = `inline-flex items-center font-medium ${Fe[n] || ""} ${Ke[t] || ""} ${Ze[r] || ""} ${a ? "justify-center p-2 w-8 h-8" : ""} ` + f;
+  return /* @__PURE__ */ S("span", { className: o.trim(), ...d, children: [
     s && /* @__PURE__ */ i("span", { className: e ? "mr-1" : "", children: s }),
     e,
-    d && /* @__PURE__ */ i(
+    c && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
@@ -801,46 +801,46 @@ const Ve = ({
 };
 function nt({
   options: e,
-  selected: r,
-  onChange: n,
-  label: t,
+  selected: n,
+  onChange: t,
+  label: r,
   disabled: s = !1,
-  shape: d = "rounded",
+  shape: c = "rounded",
   variant: p = "primary",
-  size: u = "md",
-  className: c = "",
+  size: f = "md",
+  className: d = "",
   classNames: a = {},
   id: o,
   name: l,
-  renderOption: f
+  renderOption: u
 }) {
-  const g = re[d] || re.rounded, b = se[u] || se.md, x = F(null), [k, $] = D({});
-  R(() => {
+  const g = re[c] || re.rounded, b = se[f] || se.md, x = F(null), [k, $] = z({});
+  B(() => {
     if (!x.current) return;
-    const w = e.findIndex((v) => v.value === r);
+    const w = e.findIndex((v) => v.value === n);
     if (w === -1) return;
-    const y = x.current.querySelectorAll("button")[w];
-    if (y) {
-      const { offsetLeft: v, offsetWidth: I, offsetHeight: E } = y;
+    const h = x.current.querySelectorAll("button")[w];
+    if (h) {
+      const { offsetLeft: v, offsetWidth: P, offsetHeight: L } = h;
       $({
         transform: `translateX(${v}px)`,
-        width: I,
-        height: E
+        width: P,
+        height: L
       });
     }
-  }, [r, e, u]);
+  }, [n, e, f]);
   const N = `toggler-${p}`;
   return /* @__PURE__ */ S(
     "div",
     {
-      className: `flex flex-col gap-2 w-fit ${c} ${a.root ?? ""}`,
+      className: `flex flex-col gap-2 w-fit ${d} ${a.root ?? ""}`,
       id: o,
       children: [
-        t && /* @__PURE__ */ i(
+        r && /* @__PURE__ */ i(
           "span",
           {
             className: `text-sm font-medium select-none ${a.label ?? ""}`,
-            children: t
+            children: r
           }
         ),
         /* @__PURE__ */ S(
@@ -863,27 +863,27 @@ function nt({
                 }
               ),
               e.map((w) => {
-                const h = r === w.value, y = s || w.disabled;
+                const y = n === w.value, h = s || w.disabled;
                 return /* @__PURE__ */ i(
                   "button",
                   {
                     role: "radio",
                     name: l,
-                    "aria-checked": h,
-                    disabled: y,
-                    onClick: () => !y && n(w.value),
+                    "aria-checked": y,
+                    disabled: h,
+                    onClick: () => !h && t(w.value),
                     onKeyDown: (v) => {
-                      (v.key === "Enter" || v.key === " ") && !y && (v.preventDefault(), n(w.value));
+                      (v.key === "Enter" || v.key === " ") && !h && (v.preventDefault(), t(w.value));
                     },
                     className: `
                 relative z-10
                 transition-colors duration-200 focus:outline-none
                 ${b.button}
-                ${h ? `text-white toggler-text-${p}` : "text-gray-700 hover:bg-gray-200"}
+                ${y ? `text-white toggler-text-${p}` : "text-gray-700 hover:bg-gray-200"}
                 ${a.option ?? ""}
-                ${h ? a.selectedOption ?? "" : ""}
+                ${y ? a.selectedOption ?? "" : ""}
               `,
-                    children: f ? f(w, h) : w.label
+                    children: u ? u(w, y) : w.label
                   },
                   String(w.value)
                 );
@@ -900,35 +900,35 @@ function He(e) {
 }
 const rt = ({
   items: e,
-  allowMultipleOpen: r = !1,
-  className: n = "",
-  tileClasses: t = "",
+  allowMultipleOpen: n = !1,
+  className: t = "",
+  tileClasses: r = "",
   open: s,
-  onChange: d,
+  onChange: c,
   renderTitle: p,
-  renderContent: u,
-  showArrowIcon: c = !0,
+  renderContent: f,
+  showArrowIcon: d = !0,
   panelClasses: a = ""
 }) => {
-  const [o, l] = D(/* @__PURE__ */ new Set()), f = j(() => s ? new Set(s) : o, [s, o]), g = z(
+  const [o, l] = z(/* @__PURE__ */ new Set()), u = j(() => s ? new Set(s) : o, [s, o]), g = D(
     (b) => {
-      const x = new Set(f);
-      x.has(b) ? x.delete(b) : (r || x.clear(), x.add(b)), s && d ? d(Array.from(x)) : l(x);
+      const x = new Set(u);
+      x.has(b) ? x.delete(b) : (n || x.clear(), x.add(b)), s && c ? c(Array.from(x)) : l(x);
     },
-    [f, s, d, r]
+    [u, s, c, n]
   );
   return /* @__PURE__ */ i(
     "div",
     {
       className: "accordion",
       role: "region",
-      "aria-multiselectable": r,
+      "aria-multiselectable": n,
       children: e.map((b) => {
-        const x = f.has(b.id), k = `accordion-heading-${b.id}`, $ = `accordion-panel-${b.id}`;
+        const x = u.has(b.id), k = `accordion-heading-${b.id}`, $ = `accordion-panel-${b.id}`;
         return /* @__PURE__ */ S(
           "div",
           {
-            className: `accordion-item border rounded border-gray-300 dark:border-gray-700 ${n}`,
+            className: `accordion-item border rounded border-gray-300 dark:border-gray-700 ${t}`,
             children: [
               /* @__PURE__ */ S(
                 "button",
@@ -938,10 +938,10 @@ const rt = ({
                   "aria-expanded": x,
                   "aria-controls": $,
                   onClick: () => g(b.id),
-                  className: `flex justify-between items-center w-full p-1.5 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none gap-3 ${t}`,
+                  className: `flex justify-between items-center w-full p-1.5 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none gap-3 ${r}`,
                   children: [
                     p ? p(b, x) : b.title,
-                    c ? /* @__PURE__ */ i(He, {}) : null
+                    d ? /* @__PURE__ */ i(He, {}) : null
                   ]
                 }
               ),
@@ -953,7 +953,7 @@ const rt = ({
                   "aria-labelledby": k,
                   hidden: !x,
                   className: `p-4 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 ${a}`,
-                  children: u ? u(b, x) : b.content
+                  children: f ? f(b, x) : b.content
                 }
               )
             ]
@@ -973,22 +973,22 @@ const rt = ({
 }, fe = ae(null), pe = () => le(fe);
 function st({
   id: e,
-  title: r,
-  children: n,
-  standalone: t = !1,
+  title: n,
+  children: t,
+  standalone: r = !1,
   showFloatingClose: s = !1,
-  containerClasses: d = "",
+  containerClasses: c = "",
   headerClasses: p = "",
-  bodyClasses: u = "",
-  onClose: c,
+  bodyClasses: f = "",
+  onClose: d,
   disableEscapeClose: a = !1,
   closeBtnStyle: o
 }) {
-  const l = pe(), f = ue(), g = !t && !!l && !!f, [b, x] = D(!1), k = g ? l.isOpen(e) : b, $ = g ? l.getModalData(e) : null, N = z(() => {
-    g ? f.closeModal(e) : x(!1), c == null || c();
-  }, [g, f, e, c]);
-  return R(() => {
-    const w = document.activeElement, h = document.getElementById(e), y = [
+  const l = pe(), u = ue(), g = !r && !!l && !!u, [b, x] = z(!1), k = g ? l.isOpen(e) : b, $ = g ? l.getModalData(e) : null, N = D(() => {
+    g ? u.closeModal(e) : x(!1), d == null || d();
+  }, [g, u, e, d]);
+  return B(() => {
+    const w = document.activeElement, y = document.getElementById(e), h = [
       "a[href]",
       "button:not([disabled])",
       "textarea:not([disabled])",
@@ -996,26 +996,26 @@ function st({
       "select:not([disabled])",
       '[tabindex]:not([tabindex="-1"])'
     ], v = () => {
-      if (!h) return [];
-      const m = h.querySelectorAll(
-        y.join(",")
+      if (!y) return [];
+      const m = y.querySelectorAll(
+        h.join(",")
       );
       return Array.from(m).filter((C) => C.offsetParent !== null);
-    }, I = (m) => {
+    }, P = (m) => {
       if (m.key === "Tab") {
         const C = v();
         if (C.length === 0) return;
         const O = C[0], M = C[C.length - 1];
         m.shiftKey ? document.activeElement === O && (m.preventDefault(), M.focus()) : document.activeElement === M && (m.preventDefault(), O.focus());
       }
-    }, E = (m) => {
-      m.key === "Escape" && !a && N(), I(m);
+    }, L = (m) => {
+      m.key === "Escape" && !a && N(), P(m);
     };
     return k && (document.body.style.overflow = "hidden", setTimeout(() => {
       const m = v();
       m.length && m[0].focus();
-    }, 0), window.addEventListener("keydown", E)), () => {
-      document.body.style.overflow = "", w && w.focus(), window.removeEventListener("keydown", E);
+    }, 0), window.addEventListener("keydown", L)), () => {
+      document.body.style.overflow = "", w && w.focus(), window.removeEventListener("keydown", L);
     };
   }, [k, a, N, e]), k ? /* @__PURE__ */ i(
     "div",
@@ -1025,14 +1025,14 @@ function st({
       children: /* @__PURE__ */ S(
         "div",
         {
-          className: `bg-white rounded-lg shadow-lg w-full max-w-md p-4 transform transition-all duration-300 scale-100 ${d}`,
+          className: `bg-white rounded-lg shadow-lg w-full max-w-md p-4 transform transition-all duration-300 scale-100 ${c}`,
           children: [
             /* @__PURE__ */ S(
               "div",
               {
                 className: `flex justify-between items-center relative ${p}`,
                 children: [
-                  r && /* @__PURE__ */ i("h2", { className: "text-lg font-semibold", children: r }),
+                  n && /* @__PURE__ */ i("h2", { className: "text-lg font-semibold", children: n }),
                   s && /* @__PURE__ */ i(
                     "button",
                     {
@@ -1045,7 +1045,7 @@ function st({
                 ]
               }
             ),
-            /* @__PURE__ */ i("div", { className: u, children: typeof n == "function" ? n({ modalData: $ }) : n })
+            /* @__PURE__ */ i("div", { className: f, children: typeof t == "function" ? t({ modalData: $ }) : t })
           ]
         }
       )
@@ -1055,31 +1055,31 @@ function st({
 function ot({
   children: e
 }) {
-  const [r, n] = D({}), [t, s] = D({}), d = z((l, f) => {
-    n((g) => ({ ...g, [l]: !0 })), f && s((g) => ({ ...g, [l]: f }));
-  }, []), p = z((l) => {
-    n((f) => ({ ...f, [l]: !1 })), s((f) => {
-      const g = { ...f };
+  const [n, t] = z({}), [r, s] = z({}), c = D((l, u) => {
+    t((g) => ({ ...g, [l]: !0 })), u && s((g) => ({ ...g, [l]: u }));
+  }, []), p = D((l) => {
+    t((u) => ({ ...u, [l]: !1 })), s((u) => {
+      const g = { ...u };
       return delete g[l], g;
     });
-  }, []), u = z((l) => !!r[l], [r]), c = z(
-    (l) => t[l],
-    [t]
+  }, []), f = D((l) => !!n[l], [n]), d = D(
+    (l) => r[l],
+    [r]
   ), a = j(
-    () => ({ openModal: d, closeModal: p }),
-    [d, p]
+    () => ({ openModal: c, closeModal: p }),
+    [c, p]
   ), o = j(
-    () => ({ isOpen: u, getModalData: c }),
-    [u, c]
+    () => ({ isOpen: f, getModalData: d }),
+    [f, d]
   );
   return /* @__PURE__ */ i(de.Provider, { value: a, children: /* @__PURE__ */ i(fe.Provider, { value: o, children: e }) });
 }
 function at(e) {
-  const { openModal: r, closeModal: n } = ue(), { isOpen: t, getModalData: s } = pe();
+  const { openModal: n, closeModal: t } = ue(), { isOpen: r, getModalData: s } = pe();
   return {
-    open: (d) => r(e, d),
-    close: () => n(e),
-    isOpen: t(e),
+    open: (c) => n(e, c),
+    close: () => t(e),
+    isOpen: r(e),
     data: s(e)
   };
 }
@@ -1093,54 +1093,71 @@ function lt(e) {
 function Ge() {
   return J;
 }
-function it(e, r, n = 3e3, t) {
-  Y ? Y(e, r, n, t) : console.warn("Toast system is not mounted");
+function it(e, n, t = 3e3, r) {
+  Y ? Y(e, n, t, r) : console.warn("Toast system is not mounted");
 }
 function qe(e) {
   return Q({ attr: { viewBox: "0 0 15 15", fill: "none" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor" }, child: [] }] })(e);
 }
 const Ue = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
-  const r = Math.random() * 16 | 0;
-  return (e === "x" ? r : r & 3 | 8).toString(16);
-}), ct = () => {
-  const [e, r] = D([]);
-  R(() => {
-    We((t, s, d, p) => {
-      const u = Ue();
-      r((c) => [...c, { id: u, type: t, message: s, config: p }]), setTimeout(() => {
-        r((c) => c.filter((a) => a.id !== u));
-      }, d);
+  const n = Math.random() * 16 | 0;
+  return (e === "x" ? n : n & 3 | 8).toString(16);
+}), ct = ({ containerStyle: e = "" }) => {
+  const [n, t] = z([]);
+  B(() => {
+    We((s, c, p, f) => {
+      const d = Ue();
+      t((a) => [...a, { id: d, type: s, message: c, config: f }]), setTimeout(() => {
+        t((a) => a.filter((o) => o.id !== d));
+      }, p);
     });
   }, []);
-  const n = Ge();
-  return /* @__PURE__ */ i("div", { className: "fixed top-5 right-5 z-[9999] flex flex-col gap-2", children: e.map((t) => {
-    var c, a, o, l, f, g, b, x, k, $, N, w, h;
-    const s = ((c = t.config) == null ? void 0 : c.icon) || ((a = n.icons) == null ? void 0 : a[t.type]) || Xe(t.type), d = ((o = t.config) == null ? void 0 : o.bgColor) || ((f = (l = n.colors) == null ? void 0 : l[t.type]) == null ? void 0 : f.bg) || "bg-white dark:bg-gray-800", p = ((g = t.config) == null ? void 0 : g.textColor) || ((x = (b = n.colors) == null ? void 0 : b[t.type]) == null ? void 0 : x.text) || "text-gray-700 dark:text-gray-300", u = ((k = t.config) == null ? void 0 : k.iconContainerClass) || "w-8 h-8 mr-3 text-xl flex items-center justify-center";
-    return /* @__PURE__ */ S(
-      "div",
-      {
-        className: `flex items-center w-full max-w-xs p-4 text-sm rounded-lg shadow ${d} ${p}`,
-        children: [
-          /* @__PURE__ */ i("div", { className: u, children: s }),
-          /* @__PURE__ */ S("div", { className: "flex-1 me-3", children: [
-            (($ = t.config) == null ? void 0 : $.title) && /* @__PURE__ */ i("div", { className: "font-semibold text-black", children: t.config.title }),
-            ((N = t.config) == null ? void 0 : N.description) && /* @__PURE__ */ i("div", { className: "text-sm text-gray-500", children: t.config.description }),
-            !((w = t.config) != null && w.title) && !((h = t.config) != null && h.description) && /* @__PURE__ */ i("div", { className: "text-sm", children: t.message })
-          ] }),
-          /* @__PURE__ */ i(
-            "button",
-            {
-              onClick: () => r((y) => y.filter((v) => v.id !== t.id)),
-              className: "ml-auto text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-white",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ i(qe, { size: 18 })
-            }
-          )
-        ]
-      },
-      t.id
-    );
-  }) });
+  const r = Ge();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `fixed top-5 right-5 z-9999 flex flex-col gap-2 ${e}`,
+      children: n.map((s) => {
+        var a, o, l, u, g, b, x, k, $, N, w, y, h, v;
+        const c = ((a = s.config) == null ? void 0 : a.icon) || ((o = r.icons) == null ? void 0 : o[s.type]) || Xe(s.type), p = ((l = s.config) == null ? void 0 : l.bgColor) || ((g = (u = r.colors) == null ? void 0 : u[s.type]) == null ? void 0 : g.bg) || "bg-white dark:bg-gray-800", f = ((b = s.config) == null ? void 0 : b.textColor) || ((k = (x = r.colors) == null ? void 0 : x[s.type]) == null ? void 0 : k.text) || "text-gray-700 dark:text-gray-300", d = (($ = s.config) == null ? void 0 : $.iconContainerClass) || "w-8 h-8 mr-3 text-xl flex items-center justify-center";
+        return /* @__PURE__ */ S(
+          "div",
+          {
+            className: `flex items-center w-full max-w-xs p-4 text-sm rounded-lg shadow ${p} ${f} ${(N = s.config) == null ? void 0 : N.containerBody}`,
+            children: [
+              c && /* @__PURE__ */ i("div", { className: d, children: c }),
+              /* @__PURE__ */ S("div", { className: "flex-1 me-3", children: [
+                ((w = s.config) == null ? void 0 : w.title) && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: `font-semibold text-black ${(y = s.config) == null ? void 0 : y.titleClass}`,
+                    children: s.config.title
+                  }
+                ),
+                ((h = s.config) == null ? void 0 : h.description) && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: `text-sm text-gray-500 ${(v = s.config) == null ? void 0 : v.subTitleClass}`,
+                    children: s.config.description
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  onClick: () => t((P) => P.filter((L) => L.id !== s.id)),
+                  className: "ml-auto text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-white",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ i(qe, { size: 18 })
+                }
+              )
+            ]
+          },
+          s.id
+        );
+      })
+    }
+  );
 };
 function Xe(e) {
   switch (e) {