tailwind-ux-kit 1.0.102 → 1.0.105

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

@@ -1,24 +1,25 @@
 "use client";
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
-import T, { forwardRef as le, useState as M, useMemo as z, useId as be, useRef as _, useCallback as A, useEffect as R, createContext as V, useContext as ie } from "react";
-const te = {
+import { jsxs as E, jsx as d, Fragment as me } from "react/jsx-runtime";
+import K, { forwardRef as ie, useState as z, useMemo as _, useId as he, useRef as F, useCallback as I, useEffect as T, createContext as V, useContext as ee } from "react";
+import { createPortal as xe } from "react-dom";
+const ne = {
   xs: "text-xs px-2 py-1",
   sm: "text-sm px-3 py-1.5",
   md: "text-sm px-3 py-3",
   lg: "text-lg px-5 py-3"
-}, ne = {
+}, re = {
   flat: "rounded-none",
   rounded: "rounded-sm",
   pill: "rounded-full"
-}, me = {
+}, ye = {
   filled: "rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 border-b-2",
   outlined: "rounded-lg px-2.5 pb-2.5 pt-4 bg-transparent border",
   standard: "px-0 py-2.5 bg-transparent border-0 border-b-2"
-}, xe = {
+}, 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"
-}, he = (e, n, t) => {
+}, ve = (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 (n)
@@ -33,130 +34,130 @@ const te = {
     default:
       return "border-gray-300 focus:ring-blue-500";
   }
-}, ye = le((e, n) => {
+}, Ce = ie((e, n) => {
   const {
     label: t,
     id: r,
-    inputSize: s = "md",
-    shape: c = "rounded",
-    validate: p,
-    onValidatedChange: u,
-    className: d = "",
+    inputSize: o = "md",
+    shape: u = "rounded",
+    validate: g,
+    onValidatedChange: c,
+    className: f = "",
     icon: a,
-    iconPosition: o = "left",
+    iconPosition: s = "left",
     floatingLabelStyle: l,
-    onChange: f,
+    onChange: i,
     isValid: x,
-    isInvalid: g,
+    isInvalid: p,
     feedback: b,
     iconClasses: C,
-    feedbackType: S = "invalid",
-    labelClasses: N = "",
-    inputType: h = "",
-    inputPattern: v,
-    ...m
-  } = e, [w, D] = M("default"), E = T.useCallback(
-    (j) => {
-      const O = j.target.value, Z = (p == null ? void 0 : p(O)) ?? "default";
-      D(Z), u == null || u(j, Z), f == null || f(j);
+    feedbackType: $ = "invalid",
+    labelClasses: L = "",
+    inputType: y = "",
+    inputPattern: w,
+    ...h
+  } = e, [v, P] = z("default"), S = K.useCallback(
+    (B) => {
+      const A = B.target.value, Y = (g == null ? void 0 : g(A)) ?? "default";
+      P(Y), c == null || c(B, Y), i == null || i(B);
     },
-    [p, u, f]
-  ), y = z(() => r || (typeof t == "string" ? `input-${t.toLowerCase().replace(/\s+/g, "-")}` : `input-${Math.random().toString(36).slice(2)}`), [r, t]), L = !!l, $ = te[s] || te.md, P = ne[c] || ne.flat, I = z(
-    () => he(w, x, g),
-    [w, x, g]
-  ), B = z(() => o === "start" || o === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5", [o]), F = z(() => a ? o === "start" || o === "left" ? "ps-10" : "pe-10" : "", [a, o]), K = (j) => {
-    var H;
-    const O = j.key;
-    !(j.ctrlKey || j.metaKey || O.length !== 1 || ["Backspace", "ArrowLeft", "ArrowRight", "Delete", "Tab"].includes(O)) && (() => {
-      const W = /^\d$/, Y = /^[a-zA-Z]$/;
-      switch (h) {
+    [g, c, i]
+  ), O = _(() => r || (typeof t == "string" ? `input-${t.toLowerCase().replace(/\s+/g, "-")}` : `input-${Math.random().toString(36).slice(2)}`), [r, t]), j = !!l, m = ne[o] || ne.md, N = re[u] || re.flat, D = _(
+    () => ve(v, x, p),
+    [v, x, p]
+  ), k = _(() => s === "start" || s === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5", [s]), M = _(() => a ? s === "start" || s === "left" ? "ps-10" : "pe-10" : "", [a, s]), R = (B) => {
+    var Z;
+    const A = B.key;
+    !(B.ctrlKey || B.metaKey || A.length !== 1 || ["Backspace", "ArrowLeft", "ArrowRight", "Delete", "Tab"].includes(A)) && (() => {
+      const W = /^\d$/, X = /^[a-zA-Z]$/;
+      switch (y) {
         case "numeric":
         case "number":
         case "integer":
-          return !W.test(O);
+          return !W.test(A);
         case "decimal":
-          return !W.test(O) && O !== "." && O !== "Backspace" && O !== "Tab";
+          return !W.test(A) && A !== "." && A !== "Backspace" && A !== "Tab";
         case "alphabetic":
-          return !Y.test(O);
+          return !X.test(A);
         case "custom":
-          return v ? !v.test(O) : !1;
+          return w ? !w.test(A) : !1;
         default:
           return !1;
       }
-    })() && j.preventDefault(), (H = m.onKeyDown) == null || H.call(m, j);
-  }, U = (j) => {
-    var X;
-    const O = j.clipboardData.getData("Text");
+    })() && B.preventDefault(), (Z = h.onKeyDown) == null || Z.call(h, B);
+  }, H = (B) => {
+    var q;
+    const A = B.clipboardData.getData("Text");
     (() => {
-      const H = /^\d+$/, W = /^\d*\.?\d*$/, Y = /^[a-zA-Z]+$/;
-      switch (h) {
+      const Z = /^\d+$/, W = /^\d*\.?\d*$/, X = /^[a-zA-Z]+$/;
+      switch (y) {
         case "numeric":
         case "number":
         case "integer":
-          return !H.test(O);
+          return !Z.test(A);
         case "decimal":
-          return !W.test(O);
+          return !W.test(A);
         case "alphabetic":
-          return !Y.test(O);
+          return !X.test(A);
         case "custom":
-          return v ? !v.test(O) : !1;
+          return w ? !w.test(A) : !1;
         default:
           return !1;
       }
-    })() && j.preventDefault(), (X = m.onPaste) == null || X.call(m, j);
+    })() && B.preventDefault(), (q = h.onPaste) == null || q.call(h, B);
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ E(
     "div",
     {
-      className: `w-full relative ${L ? "z-0" : ""} tailwind-ux-input`,
+      className: `w-full relative ${j ? "z-0" : ""} tailwind-ux-input`,
       children: [
-        !L && t && /* @__PURE__ */ i(
+        !j && t && /* @__PURE__ */ d(
           "label",
           {
-            htmlFor: y,
-            className: `block mb-1 text-sm ${x ? "text-green-700 dark:text-green-500" : g ? "text-red-700 dark:text-red-500" : "text-gray-700"} ${N}`,
+            htmlFor: O,
+            className: `block mb-1 text-sm ${x ? "text-green-700 dark:text-green-500" : p ? "text-red-700 dark:text-red-500" : "text-gray-700"} ${L}`,
             children: t
           }
         ),
-        /* @__PURE__ */ k("div", { className: "relative w-full", children: [
-          a && /* @__PURE__ */ i(
+        /* @__PURE__ */ E("div", { className: "relative w-full", children: [
+          a && /* @__PURE__ */ d(
             "div",
             {
-              className: `absolute inset-y-0 flex items-center ${B} ${C}`,
+              className: `absolute inset-y-0 flex items-center ${k} ${C}`,
               "aria-hidden": "true",
               children: a
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ d(
             "input",
             {
-              ...m,
-              id: y,
+              ...h,
+              id: O,
               ref: n,
-              placeholder: L ? " " : m.placeholder,
-              onChange: E,
-              onKeyDown: K,
-              onPaste: U,
+              placeholder: j ? " " : h.placeholder,
+              onChange: S,
+              onKeyDown: R,
+              onPaste: H,
               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
-            ${$}
-            ${L && l && me[l]}
-            ${F} ${P} ${I} ${d}`
+            ${m}
+            ${j && l && ye[l]}
+            ${M} ${N} ${D} ${f}`
             }
           ),
-          L && t && l && /* @__PURE__ */ i(
+          j && t && l && /* @__PURE__ */ d(
             "label",
             {
-              htmlFor: y,
-              className: `ms-1 ${xe[l]} ${d}`,
+              htmlFor: O,
+              className: `ms-1 ${we[l]} ${f}`,
               children: t
             }
           )
         ] }),
-        b && /* @__PURE__ */ i(
+        b && /* @__PURE__ */ d(
           "p",
           {
-            className: `mt-1 text-xs ${S === "invalid" ? "text-red-600 dark:text-red-500" : "text-green-600 dark:text-green-500"}`,
-            role: S === "invalid" ? "alert" : void 0,
+            className: `mt-1 text-xs ${$ === "invalid" ? "text-red-600 dark:text-red-500" : "text-green-600 dark:text-green-500"}`,
+            role: $ === "invalid" ? "alert" : void 0,
             children: b
           }
         )
@@ -164,25 +165,25 @@ const te = {
     }
   );
 });
-ye.displayName = "Input";
-const we = {
+Ce.displayName = "Input";
+const $e = {
   xs: "text-xs px-2 py-1",
   sm: "text-sm px-3 py-1.5",
   md: "text-sm px-3 py-3",
   lg: "text-lg px-5 py-3"
-}, ve = {
+}, ke = {
   flat: "rounded-none",
   rounded: "rounded-sm",
   pill: "rounded-full"
-}, Ce = {
+}, Se = {
   filled: "rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 border-b-2",
   outlined: "rounded-lg px-2.5 pb-2.5 pt-4 bg-transparent border",
   standard: "px-0 py-2.5 bg-transparent border-0 border-b-2"
-}, $e = {
+}, Ne = {
   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, n, t) => {
+}, Ee = (e, n, t) => {
   if (t)
     return "border-red-500 bg-red-50 text-red-900 focus:ring-red-500 focus:border-red-500";
   if (n)
@@ -198,70 +199,70 @@ const we = {
     default:
       return "border-gray-300 focus:ring-blue-500";
   }
-}, Se = le((e, n) => {
+}, Le = ie((e, n) => {
   const {
     label: t,
     id: r,
-    inputSize: s = "md",
-    shape: c = "rounded",
-    validate: p,
-    onValidatedChange: u,
-    className: d = "",
+    inputSize: o = "md",
+    shape: u = "rounded",
+    validate: g,
+    onValidatedChange: c,
+    className: f = "",
     icon: a,
-    iconPosition: o = "left",
+    iconPosition: s = "left",
     floatingLabelStyle: l,
-    onChange: f,
+    onChange: i,
     isValid: x,
-    isInvalid: g,
+    isInvalid: p,
     feedback: b,
     feedbackType: C = "invalid",
-    children: S,
-    ...N
-  } = e, [h, v] = M("default"), m = be(), w = z(() => r || (typeof t == "string" ? `select-${t.toLowerCase().replace(/\s+/g, "-")}` : m), [r, t, m]), D = (B) => {
-    const F = B.target.value, K = (p == null ? void 0 : p(F)) ?? "default";
-    v(K), u == null || u(B, K), f == null || f(B);
-  }, E = !!l, y = we[s], L = ve[c], $ = ke(h, x, g);
-  return /* @__PURE__ */ k("div", { className: `w-full relative ${E ? "z-0" : ""}`, children: [
-    !E && t && /* @__PURE__ */ i(
+    children: $,
+    ...L
+  } = e, [y, w] = z("default"), h = he(), v = _(() => r || (typeof t == "string" ? `select-${t.toLowerCase().replace(/\s+/g, "-")}` : h), [r, t, h]), P = (k) => {
+    const M = k.target.value, R = (g == null ? void 0 : g(M)) ?? "default";
+    w(R), c == null || c(k, R), i == null || i(k);
+  }, S = !!l, O = $e[o], j = ke[u], m = Ee(y, x, p);
+  return /* @__PURE__ */ E("div", { className: `w-full relative ${S ? "z-0" : ""}`, children: [
+    !S && t && /* @__PURE__ */ d(
       "label",
       {
-        htmlFor: w,
-        className: `block mb-1 text-sm ${x ? "text-green-700" : g ? "text-red-700" : "text-gray-700"}`,
+        htmlFor: v,
+        className: `block mb-1 text-sm ${x ? "text-green-700" : p ? "text-red-700" : "text-gray-700"}`,
         children: t
       }
     ),
-    /* @__PURE__ */ k("div", { className: "relative w-full", children: [
-      a && /* @__PURE__ */ i(
+    /* @__PURE__ */ E("div", { className: "relative w-full", children: [
+      a && /* @__PURE__ */ d(
         "div",
         {
-          className: `absolute inset-y-0 flex items-center ${o === "start" || o === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5"}`,
-          children: /* @__PURE__ */ i("span", { className: "text-gray-500", children: a })
+          className: `absolute inset-y-0 flex items-center ${s === "start" || s === "left" ? "left-0 ps-3.5" : "right-0 pe-3.5"}`,
+          children: /* @__PURE__ */ d("span", { className: "text-gray-500", children: a })
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ d(
         "select",
         {
-          ...N,
-          id: w,
+          ...L,
+          id: v,
           ref: n,
-          onChange: D,
+          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
-            ${y} ${a && (o === "start" || o === "left") ? "ps-10" : a ? "pe-10" : ""}
-            ${E && l && Ce[l]}
-            ${L} ${$} ${d}`,
-          children: S
+            ${O} ${a && (s === "start" || s === "left") ? "ps-10" : a ? "pe-10" : ""}
+            ${S && l && Se[l]}
+            ${j} ${m} ${f}`,
+          children: $
         }
       ),
-      E && t && l && /* @__PURE__ */ i(
+      S && t && l && /* @__PURE__ */ d(
         "label",
         {
-          htmlFor: w,
-          className: `ms-1 ${$e[l]} ${d}`,
+          htmlFor: v,
+          className: `ms-1 ${Ne[l]} ${f}`,
           children: t
         }
       )
     ] }),
-    b && /* @__PURE__ */ i(
+    b && /* @__PURE__ */ d(
       "p",
       {
         className: `mt-1 text-xs ${C === "invalid" ? "text-red-600" : "text-green-600"}`,
@@ -270,8 +271,8 @@ const we = {
     )
   ] });
 });
-Se.displayName = "Select";
-const Ne = {
+Le.displayName = "Select";
+const Pe = {
   primary: "btn-primary",
   secondary: "btn-secondary",
   success: "btn-success",
@@ -297,39 +298,39 @@ const Ne = {
   "soft-info": "btn-soft-info",
   "soft-dark": "btn-soft-dark",
   "soft-light": "btn-soft-light"
-}, Ee = {
+}, Oe = {
   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 = {
+}, De = {
   flat: "shadow-none",
   rounded: "rounded-sm",
   pill: "rounded-full",
   circle: "rounded-full w-10 h-10 p-0 flex items-center justify-center"
-}, Qe = ({
+}, rt = ({
   children: e,
   variant: n = "primary",
   size: t = "md",
   type: r = "button",
-  shape: s = "rounded",
-  className: c = "",
-  isLoading: p = !1,
-  disabled: u = !1,
-  ...d
+  shape: o = "rounded",
+  className: u = "",
+  isLoading: g = !1,
+  disabled: c = !1,
+  ...f
 }) => {
-  const a = u || p, o = [
+  const a = c || g, s = [
     "inline-flex items-center justify-center font-normal transition duration-150",
-    Ne[n],
-    Ee[t],
-    Le[s],
-    s === "flat" ? "shadow-none" : "shadow-sm",
+    Pe[n],
+    Oe[t],
+    De[o],
+    o === "flat" ? "shadow-none" : "shadow-sm",
     a ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-    c
+    u
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ k("button", { type: r, className: o, disabled: a, ...d, children: [
-    p && /* @__PURE__ */ k(
+  return /* @__PURE__ */ E("button", { type: r, className: s, disabled: a, ...f, children: [
+    g && /* @__PURE__ */ E(
       "svg",
       {
         "aria-hidden": "true",
@@ -339,14 +340,14 @@ const Ne = {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ d(
             "path",
             {
               d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ d(
             "path",
             {
               d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
@@ -365,18 +366,18 @@ var ce = {
   className: void 0,
   style: void 0,
   attr: void 0
-}, re = T.createContext && /* @__PURE__ */ T.createContext(ce), Oe = ["attr", "size", "title"];
-function Pe(e, n) {
+}, oe = K.createContext && /* @__PURE__ */ K.createContext(ce), Ae = ["attr", "size", "title"];
+function je(e, n) {
   if (e == null) return {};
-  var t = De(e, n), r, s;
+  var t = Ie(e, n), r, o;
   if (Object.getOwnPropertySymbols) {
-    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]);
+    var u = Object.getOwnPropertySymbols(e);
+    for (o = 0; o < u.length; o++)
+      r = u[o], !(n.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
   }
   return t;
 }
-function De(e, n) {
+function Ie(e, n) {
   if (e == null) return {};
   var t = {};
   for (var r in e)
@@ -400,31 +401,31 @@ function se(e, n) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var r = Object.getOwnPropertySymbols(e);
-    n && (r = r.filter(function(s) {
-      return Object.getOwnPropertyDescriptor(e, s).enumerable;
+    n && (r = r.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(e, o).enumerable;
     })), t.push.apply(t, r);
   }
   return t;
 }
-function q(e) {
+function U(e) {
   for (var n = 1; n < arguments.length; n++) {
     var t = arguments[n] != null ? arguments[n] : {};
     n % 2 ? se(Object(t), !0).forEach(function(r) {
-      Ie(e, r, t[r]);
+      ze(e, r, t[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : se(Object(t)).forEach(function(r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
   return e;
 }
-function Ie(e, n, t) {
-  return n = je(n), n in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
+function ze(e, n, t) {
+  return n = Be(n), n in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
 }
-function je(e) {
-  var n = ze(e, "string");
+function Be(e) {
+  var n = Me(e, "string");
   return typeof n == "symbol" ? n : n + "";
 }
-function ze(e, n) {
+function Me(e, n) {
   if (typeof e != "object" || !e) return e;
   var t = e[Symbol.toPrimitive];
   if (t !== void 0) {
@@ -435,51 +436,51 @@ function ze(e, n) {
   return (n === "string" ? String : Number)(e);
 }
 function de(e) {
-  return e && e.map((n, t) => /* @__PURE__ */ T.createElement(n.tag, q({
+  return e && e.map((n, t) => /* @__PURE__ */ K.createElement(n.tag, U({
     key: t
   }, n.attr), de(n.child)));
 }
-function ee(e) {
-  return (n) => /* @__PURE__ */ T.createElement(Ae, G({
-    attr: q({}, e.attr)
+function te(e) {
+  return (n) => /* @__PURE__ */ K.createElement(Te, G({
+    attr: U({}, e.attr)
   }, n), de(e.child));
 }
-function Ae(e) {
+function Te(e) {
   var n = (t) => {
     var {
       attr: r,
-      size: s,
-      title: c
-    } = e, p = Pe(e, Oe), u = s || t.size || "1em", d;
-    return t.className && (d = t.className), e.className && (d = (d ? d + " " : "") + e.className), /* @__PURE__ */ T.createElement("svg", G({
+      size: o,
+      title: u
+    } = e, g = je(e, Ae), c = o || t.size || "1em", f;
+    return t.className && (f = t.className), e.className && (f = (f ? f + " " : "") + e.className), /* @__PURE__ */ K.createElement("svg", G({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, t.attr, r, p, {
-      className: d,
-      style: q(q({
+    }, t.attr, r, g, {
+      className: f,
+      style: U(U({
         color: e.color || t.color
       }, t.style), e.style),
-      height: u,
-      width: u,
+      height: c,
+      width: c,
       xmlns: "http://www.w3.org/2000/svg"
-    }), c && /* @__PURE__ */ T.createElement("title", null, c), e.children);
+    }), u && /* @__PURE__ */ K.createElement("title", null, u), e.children);
   };
-  return re !== void 0 ? /* @__PURE__ */ T.createElement(re.Consumer, null, (t) => n(t)) : n(ce);
+  return oe !== void 0 ? /* @__PURE__ */ K.createElement(oe.Consumer, null, (t) => n(t)) : n(ce);
 }
-function Me(e) {
-  return ee({ 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);
+function Re(e) {
+  return te({ 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);
 }
-const Te = {
+const _e = {
   xs: "w-3 h-3 text-[10px]",
   sm: "w-4 h-4 text-xs",
   md: "w-5 h-5 text-sm",
   lg: "w-6 h-6 text-base"
-}, Re = {
+}, Fe = {
   flat: "rounded-none",
   rounded: "rounded-sm",
   pill: "rounded-full"
-}, Be = {
+}, Ke = {
   primary: "primary",
   secondary: "secondary",
   success: "success",
@@ -505,169 +506,169 @@ const Te = {
   "soft-info": "soft-info",
   "soft-dark": "soft-dark",
   "soft-light": "soft-light"
-}, _e = T.forwardRef(
+}, He = K.forwardRef(
   ({
     label: e,
     boxSize: n = "md",
     shape: t = "rounded",
     variant: r = "success",
-    onSelectionChange: s,
-    disabled: c = !1,
-    className: p = "",
-    id: u,
-    value: d,
+    onSelectionChange: o,
+    disabled: u = !1,
+    className: g = "",
+    id: c,
+    value: f,
     icon: a,
-    children: o,
+    children: s,
     checked: l,
-    ...f
+    ...i
   }, x) => {
-    const g = (y) => {
-      !c && s && s(y.target.checked), f.onChange && f.onChange(y);
-    }, b = "mr-2 border flex items-center justify-center transition-all", C = Te[n], S = Re[t], N = Be[r] ?? "", h = r.startsWith("outline"), v = r.startsWith("soft"), D = `${b} ${C} ${S} ${N} ${l && (h || v || r === "link") ? "peer-checked:bg-current peer-checked:text-white" : l ? "peer-checked:bg-current" : ""}`, E = {
+    const p = (O) => {
+      !u && o && o(O.target.checked), i.onChange && i.onChange(O);
+    }, b = "mr-2 border flex items-center justify-center transition-all", C = _e[n], $ = Fe[t], L = Ke[r] ?? "", y = r.startsWith("outline"), w = r.startsWith("soft"), P = `${b} ${C} ${$} ${L} ${l && (y || w || r === "link") ? "peer-checked:bg-current peer-checked:text-white" : l ? "peer-checked:bg-current" : ""}`, S = {
       xs: "w-2 h-2",
       sm: "w-2.5 h-2.5",
       md: "w-3 h-3",
       lg: "w-3.5 h-3.5"
     };
-    return /* @__PURE__ */ k(
+    return /* @__PURE__ */ E(
       "label",
       {
-        className: `flex items-center ${c ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} me-4 ${p}`,
+        className: `flex items-center ${u ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} me-4 ${g}`,
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ d(
             "input",
             {
               type: "checkbox",
               className: "peer hidden",
               checked: l,
-              onChange: g,
-              disabled: c,
-              id: u,
-              value: d,
+              onChange: p,
+              disabled: u,
+              id: c,
+              value: f,
               ref: x,
-              ...f
+              ...i
             }
           ),
-          /* @__PURE__ */ i("span", { className: D.trim(), children: (l || f.defaultChecked) && (a ?? /* @__PURE__ */ i(Me, { className: `${E[n]}` })) }),
-          e || o ? /* @__PURE__ */ i("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: e ?? o }) : null
+          /* @__PURE__ */ d("span", { className: P.trim(), children: (l || i.defaultChecked) && (a ?? /* @__PURE__ */ d(Re, { className: `${S[n]}` })) }),
+          e || s ? /* @__PURE__ */ d("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: e ?? s }) : null
         ]
       }
     );
   }
 );
-_e.displayName = "Checkbox";
-const Ve = ({
+He.displayName = "Checkbox";
+const ot = ({
   label: e,
   header: n,
   items: t = [],
   onSelect: r,
-  renderItem: s,
-  position: c = "right",
-  className: p = "",
-  menuClassName: u = "",
-  width: d = "w-48",
+  renderItem: o,
+  position: u = "right",
+  className: g = "",
+  menuClassName: c = "",
+  width: f = "w-48",
   closeOnSelect: a = !1,
-  transition: o = !0,
+  transition: s = !0,
   ariaLabel: l = "Dropdown menu",
-  forceCloseDropdown: f,
+  forceCloseDropdown: i,
   ...x
 }) => {
-  const [g, b] = M(!1), [C, S] = M(!1), N = _(null), h = _(null), v = z(() => ({
+  const [p, b] = z(!1), [C, $] = z(!1), L = F(null), y = F(null), w = _(() => ({
     left: "left-0",
     center: "left-1/2 transform -translate-x-1/2",
     right: "right-0"
-  })[c], [c]), m = A(() => {
-    const $ = h.current, P = N.current;
-    if (!$ || !P) return;
-    const { top: I, bottom: B } = $.getBoundingClientRect(), F = P.offsetHeight, K = window.innerHeight - B, U = I;
-    S(K < F && U > F);
-  }, []), w = A(($) => {
-    var P, I;
-    !((P = N.current) != null && P.contains($.target)) && !((I = h.current) != null && I.contains($.target)) && b(!1);
-  }, []), D = A(() => b(($) => !$), []), E = A(() => b(!1), []);
-  R(() => {
-    if (g)
-      return m(), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0), () => {
-        window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
+  })[u], [u]), h = I(() => {
+    const m = y.current, N = L.current;
+    if (!m || !N) return;
+    const { top: D, bottom: k } = m.getBoundingClientRect(), M = N.offsetHeight, R = window.innerHeight - k, H = D;
+    $(R < M && H > M);
+  }, []), v = I((m) => {
+    var N, D;
+    !((N = L.current) != null && N.contains(m.target)) && !((D = y.current) != null && D.contains(m.target)) && b(!1);
+  }, []), P = I(() => b((m) => !m), []), S = I(() => b(!1), []);
+  T(() => {
+    if (p)
+      return h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), () => {
+        window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
       };
-  }, [g, m]);
-  const y = _(g);
-  R(() => {
-    y.current = g;
-  }, [g]), R(() => {
-    const $ = (P) => {
-      var I;
-      P.key === "Escape" && y.current && (b(!1), (I = h.current) == null || I.focus());
+  }, [p, h]);
+  const O = F(p);
+  T(() => {
+    O.current = p;
+  }, [p]), T(() => {
+    const m = (N) => {
+      var D;
+      N.key === "Escape" && O.current && (b(!1), (D = y.current) == null || D.focus());
     };
-    return document.addEventListener("keydown", $), () => {
-      document.removeEventListener("keydown", $);
+    return document.addEventListener("keydown", m), () => {
+      document.removeEventListener("keydown", m);
     };
-  }, []), R(() => (document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w)), [w]);
-  const L = z(
+  }, []), T(() => (document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v)), [v]);
+  const j = _(
     () => [
       "absolute z-50 bg-white rounded shadow-lg overflow-hidden w-auto",
       C ? "bottom-full mb-2" : "top-full mt-2",
-      v,
-      d,
-      o && "transition-all duration-200 ease-out",
-      u
+      w,
+      f,
+      s && "transition-all duration-200 ease-out",
+      c
     ].filter(Boolean).join(" "),
-    [C, v, d, o, u]
+    [C, w, f, s, c]
   );
-  return /* @__PURE__ */ k("div", { className: `relative inline-block ${p}`, ...x, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ E("div", { className: `relative inline-block ${g}`, ...x, children: [
+    /* @__PURE__ */ d(
       "button",
       {
         type: "button",
-        ref: h,
-        onClick: D,
-        "aria-expanded": g,
+        ref: y,
+        onClick: P,
+        "aria-expanded": p,
         "aria-label": l,
         className: "focus:outline-none",
         children: e
       }
     ),
-    g && /* @__PURE__ */ k("div", { ref: N, role: "menu", className: L, children: [
+    p && /* @__PURE__ */ E("div", { ref: L, role: "menu", className: j, children: [
       n && n,
-      t.map(($, P) => {
-        const I = () => {
-          r && r($), a && E();
+      t.map((m, N) => {
+        const D = () => {
+          r && r(m), a && S();
         };
-        return /* @__PURE__ */ i("div", { children: s ? s($, I) : /* @__PURE__ */ i(
+        return /* @__PURE__ */ d("div", { children: o ? o(m, D) : /* @__PURE__ */ d(
           "div",
           {
-            onClick: I,
+            onClick: D,
             className: "px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 cursor-pointer",
             role: "menuitem",
-            children: $.label
+            children: m.label
           }
-        ) }, P);
+        ) }, N);
       })
     ] })
   ] });
-}, et = ({
+}, st = ({
   children: e,
   content: n,
   position: t = "top",
   className: r = "",
-  tooltipClass: s = "",
-  tooltipStyle: c = {}
+  tooltipClass: o = "",
+  tooltipStyle: u = {}
 }) => {
-  const p = _(null), u = _(null);
-  R(() => {
-    const a = p.current, o = u.current;
-    if (!a || !o) return;
+  const g = F(null), c = F(null);
+  T(() => {
+    const a = g.current, s = c.current;
+    if (!a || !s) return;
     const l = () => {
-      o.style.opacity = "1", o.style.visibility = "visible";
-    }, f = () => {
-      o.style.opacity = "0", o.style.visibility = "hidden";
+      s.style.opacity = "1", s.style.visibility = "visible";
+    }, i = () => {
+      s.style.opacity = "0", s.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", i), () => {
+      a.removeEventListener("mouseenter", l), a.removeEventListener("mouseleave", i);
     };
   }, []);
-  const d = (a) => {
-    const o = {
+  const f = (a) => {
+    const s = {
       position: "absolute",
       opacity: 0,
       visibility: "hidden",
@@ -687,7 +688,7 @@ const Ve = ({
     switch (a) {
       case "top":
         return {
-          ...o,
+          ...s,
           bottom: "100%",
           left: "50%",
           transform: "translateX(-50%)",
@@ -695,7 +696,7 @@ const Ve = ({
         };
       case "bottom":
         return {
-          ...o,
+          ...s,
           top: "100%",
           left: "50%",
           transform: "translateX(-50%)",
@@ -703,7 +704,7 @@ const Ve = ({
         };
       case "left":
         return {
-          ...o,
+          ...s,
           right: "100%",
           top: "50%",
           transform: "translateY(-50%)",
@@ -711,33 +712,33 @@ const Ve = ({
         };
       case "right":
         return {
-          ...o,
+          ...s,
           left: "100%",
           top: "50%",
           transform: "translateY(-50%)",
           marginLeft: "8px"
         };
       default:
-        return o;
+        return s;
     }
   };
-  return /* @__PURE__ */ k("div", { ref: p, className: `relative inline-block ${r}`, children: [
+  return /* @__PURE__ */ E("div", { ref: g, className: `relative inline-block ${r}`, children: [
     e,
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ d(
       "div",
       {
-        ref: u,
+        ref: c,
         role: "tooltip",
-        className: s,
+        className: o,
         style: {
-          ...d(t),
-          ...c
+          ...f(t),
+          ...u
         },
         children: n
       }
     )
   ] });
-}, Fe = {
+}, Ye = {
   primary: "bg-blue-500 text-white",
   secondary: "bg-gray-500 text-white",
   success: "bg-green-500 text-white",
@@ -755,47 +756,47 @@ const Ve = ({
   "outline-info": "border border-cyan-500 text-cyan-500 bg-transparent",
   "outline-dark": "border border-black text-black bg-transparent",
   "outline-light": "border border-gray-100 text-gray-800 bg-transparent"
-}, Ke = {
+}, Ze = {
   xs: "text-xs px-2 py-0.5",
   sm: "text-sm px-2.5 py-0.5",
   md: "text-base px-3 py-1",
   lg: "text-lg px-3.5 py-1.5",
   xl: "text-xl px-4 py-2"
-}, Ze = {
+}, We = {
   flat: "rounded-none",
   rounded: "rounded-sm",
   pill: "rounded-full",
   circle: "rounded-full p-2 w-8 h-8 justify-center"
-}, tt = ({
+}, at = ({
   label: e,
   variant: n = "primary",
   size: t = "sm",
   shape: r = "rounded",
-  icon: s,
-  dismissible: c,
-  onDismiss: p,
-  className: u = "",
-  ...d
+  icon: o,
+  dismissible: u,
+  onDismiss: g,
+  className: c = "",
+  ...f
 }) => {
-  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" : ""} ` + u;
-  return /* @__PURE__ */ k("span", { className: o.trim(), ...d, children: [
-    s && /* @__PURE__ */ i("span", { className: e ? "mr-1" : "", children: s }),
+  const a = !e && !!o, s = `inline-flex items-center font-medium ${Ye[n] || ""} ${Ze[t] || ""} ${We[r] || ""} ${a ? "justify-center p-2 w-8 h-8" : ""} ` + c;
+  return /* @__PURE__ */ E("span", { className: s.trim(), ...f, children: [
+    o && /* @__PURE__ */ d("span", { className: e ? "mr-1" : "", children: o }),
     e,
-    c && /* @__PURE__ */ i(
+    u && /* @__PURE__ */ d(
       "button",
       {
         type: "button",
-        onClick: p,
+        onClick: g,
         className: "ml-2 text-xs font-bold leading-none focus:outline-none",
         children: "×"
       }
     )
   ] });
-}, oe = {
+}, ae = {
   rounded: "rounded-md",
   pill: "rounded-full",
   flat: "rounded-none"
-}, ae = {
+}, le = {
   xs: {
     button: "px-2 py-1 text-xs"
   },
@@ -812,62 +813,62 @@ const Ve = ({
     button: "px-6 py-4 text-lg"
   }
 };
-function nt({
+function lt({
   options: e,
   selected: n,
   onChange: t,
   label: r,
-  disabled: s = !1,
-  shape: c = "rounded",
-  variant: p = "primary",
-  size: u = "md",
-  className: d = "",
+  disabled: o = !1,
+  shape: u = "rounded",
+  variant: g = "primary",
+  size: c = "md",
+  className: f = "",
   classNames: a = {},
-  id: o,
+  id: s,
   name: l,
-  renderOption: f
+  renderOption: i
 }) {
-  const x = oe[c] || oe.rounded, g = ae[u] || ae.md, b = _(null), [C, S] = M({});
-  R(() => {
+  const x = ae[u] || ae.rounded, p = le[c] || le.md, b = F(null), [C, $] = z({});
+  T(() => {
     if (!b.current) return;
-    const h = e.findIndex((w) => w.value === n);
-    if (h === -1) return;
-    const m = b.current.querySelectorAll("button")[h];
-    if (m) {
-      const { offsetLeft: w, offsetWidth: D, offsetHeight: E } = m;
-      S({
-        transform: `translateX(${w}px)`,
-        width: D,
-        height: E
+    const y = e.findIndex((v) => v.value === n);
+    if (y === -1) return;
+    const h = b.current.querySelectorAll("button")[y];
+    if (h) {
+      const { offsetLeft: v, offsetWidth: P, offsetHeight: S } = h;
+      $({
+        transform: `translateX(${v}px)`,
+        width: P,
+        height: S
       });
     }
-  }, [n, e, u]);
-  const N = `toggler-${p}`;
-  return /* @__PURE__ */ k(
+  }, [n, e, c]);
+  const L = `toggler-${g}`;
+  return /* @__PURE__ */ E(
     "div",
     {
-      className: `flex flex-col gap-2 w-fit ${d} ${a.root ?? ""}`,
-      id: o,
+      className: `flex flex-col gap-2 w-fit ${f} ${a.root ?? ""}`,
+      id: s,
       children: [
-        r && /* @__PURE__ */ i(
+        r && /* @__PURE__ */ d(
           "span",
           {
             className: `text-sm font-medium select-none ${a.label ?? ""}`,
             children: r
           }
         ),
-        /* @__PURE__ */ k(
+        /* @__PURE__ */ E(
           "div",
           {
             ref: b,
             role: "radiogroup",
-            "aria-disabled": s,
-            className: `relative inline-flex overflow-hidden border border-gray-300 bg-gray-100 ${x} ${s ? "opacity-50 cursor-not-allowed" : ""} ${a.group ?? ""}`,
+            "aria-disabled": o,
+            className: `relative inline-flex overflow-hidden border border-gray-300 bg-gray-100 ${x} ${o ? "opacity-50 cursor-not-allowed" : ""} ${a.group ?? ""}`,
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ d(
                 "div",
                 {
-                  className: `absolute top-0 left-0 transition-transform duration-300 ease-in-out ${x} ${N}`,
+                  className: `absolute top-0 left-0 transition-transform duration-300 ease-in-out ${x} ${L}`,
                   style: {
                     ...C,
                     zIndex: 0
@@ -875,30 +876,30 @@ function nt({
                   "aria-hidden": "true"
                 }
               ),
-              e.map((h) => {
-                const v = n === h.value, m = s || h.disabled;
-                return /* @__PURE__ */ i(
+              e.map((y) => {
+                const w = n === y.value, h = o || y.disabled;
+                return /* @__PURE__ */ d(
                   "button",
                   {
                     role: "radio",
                     name: l,
-                    "aria-checked": v,
-                    disabled: m,
-                    onClick: () => !m && t(h.value),
-                    onKeyDown: (w) => {
-                      (w.key === "Enter" || w.key === " ") && !m && (w.preventDefault(), t(h.value));
+                    "aria-checked": w,
+                    disabled: h,
+                    onClick: () => !h && t(y.value),
+                    onKeyDown: (v) => {
+                      (v.key === "Enter" || v.key === " ") && !h && (v.preventDefault(), t(y.value));
                     },
                     className: `
                 relative z-10
                 transition-colors duration-200 focus:outline-none
-                ${g.button}
-                ${v ? `text-white toggler-text-${p}` : "text-gray-700 hover:bg-gray-200"}
+                ${p.button}
+                ${w ? `text-white toggler-text-${g}` : "text-gray-700 hover:bg-gray-200"}
                 ${a.option ?? ""}
-                ${v ? a.selectedOption ?? "" : ""}
+                ${w ? a.selectedOption ?? "" : ""}
               `,
-                    children: f ? f(h, v) : h.label
+                    children: i ? i(y, w) : y.label
                   },
-                  String(h.value)
+                  String(y.value)
                 );
               })
             ]
@@ -908,276 +909,432 @@ function nt({
     }
   );
 }
-V(
+const ue = V(
   null
 );
-function He(e) {
-  return ee({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" }, child: [] }] })(e);
+function it({
+  children: e
+}) {
+  const [n, t] = z([]), r = I((c) => {
+    t((f) => f.includes(c) ? f : [...f, c]);
+  }, []), o = I((c) => {
+    t((f) => f.filter((a) => a !== c));
+  }, []), u = I(() => {
+    t([]);
+  }, []), g = _(
+    () => ({
+      showBottomSheet: r,
+      closeBottomSheet: o,
+      closeAllBottomSheet: u,
+      activeSheets: n
+    }),
+    [r, o, u, n]
+  );
+  return /* @__PURE__ */ d(ue.Provider, { value: g, children: e });
+}
+function Ge() {
+  const e = ee(ue);
+  if (!e)
+    throw new Error("useBottomSheet must be used inside BottomSheetProvider");
+  return e;
+}
+function ct({
+  id: e,
+  children: n,
+  initialSnap: t = "half",
+  snapPoints: r,
+  className: o = "",
+  overlayClassName: u = "",
+  closeOnBackdrop: g = !0,
+  lockScroll: c = !0,
+  zIndex: f = 1e3
+}) {
+  const { activeSheets: a, closeBottomSheet: s } = Ge(), l = a.includes(e), i = !!r, [x, p] = z(!1), [b, C] = z(100), [$, L] = z(!1), y = F(0), w = F(0), h = F(null), v = typeof window < "u" ? window.innerHeight : 0, P = r ? (1 - r.full) * 100 : 0, S = r ? (1 - r.half) * 100 : 0, O = I(
+    (k) => {
+      if (i)
+        switch (k) {
+          case "full":
+            C(P);
+            break;
+          case "half":
+            C(S);
+            break;
+          default:
+            C(100);
+        }
+    },
+    [P, S, i]
+  );
+  T(() => {
+    p(!0);
+  }, []), T(() => {
+    if (!l) {
+      C(100);
+      return;
+    }
+    i ? O(t) : C(0);
+  }, [l, t, O, i]), T(() => {
+    if (c)
+      return l ? (document.body.style.overflow = "hidden", document.body.style.touchAction = "none") : (document.body.style.overflow = "", document.body.style.touchAction = ""), () => {
+        document.body.style.overflow = "", document.body.style.touchAction = "";
+      };
+  }, [l, c]), T(() => {
+    if (!l) return;
+    const k = (M) => {
+      M.key === "Escape" && s(e);
+    };
+    return window.addEventListener("keydown", k), () => {
+      window.removeEventListener("keydown", k);
+    };
+  }, [s, e, l]);
+  const j = (k) => {
+    var M, R;
+    i && (L(!0), y.current = k.clientY, w.current = b, (R = (M = k.target).setPointerCapture) == null || R.call(M, k.pointerId));
+  }, m = (k) => {
+    if (!$ || !i) return;
+    const R = (k.clientY - y.current) / v * 100, H = w.current + R;
+    C(Math.min(Math.max(H, P), 100));
+  }, N = () => {
+    if (!i) return;
+    if (L(!1), b > 75) {
+      s(e);
+      return;
+    }
+    const k = (S + P) / 2;
+    b <= k ? O("full") : O("half");
+  };
+  if (!x) return null;
+  const D = {
+    transform: `translate3d(0, ${b}%, 0)`,
+    transition: $ ? "none" : "transform 240ms cubic-bezier(0.22, 1, 0.36, 1)",
+    willChange: "transform",
+    zIndex: f,
+    // height: hasSnapPoints ? "92dvh" : `${contentHeight}px`,
+    maxHeight: "100dvh"
+  };
+  return xe(
+    /* @__PURE__ */ E(me, { children: [
+      /* @__PURE__ */ d(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close bottom sheet",
+          onClick: () => {
+            g && s(e);
+          },
+          className: `fixed inset-0 bg-black/45 backdrop-blur-[2px] transition-opacity duration-200 ${l ? "opacity-100" : "pointer-events-none opacity-0"} ${u}`,
+          style: { zIndex: f }
+        }
+      ),
+      /* @__PURE__ */ E(
+        "div",
+        {
+          ref: h,
+          style: D,
+          className: `
+          fixed inset-x-0 bottom-0
+          rounded-t-3xl
+          bg-white
+          overflow-hidden
+          text-white
+          shadow-2xl
+          flex flex-col
+          overscroll-contain
+          touch-pan-y
+          pb-[env(safe-area-inset-bottom)]
+          ${o}
+        `,
+          children: [
+            /* @__PURE__ */ d(
+              "div",
+              {
+                onPointerDown: j,
+                onPointerMove: m,
+                onPointerUp: N,
+                className: `
+            flex justify-center py-2.5
+            ${i ? "cursor-grab active:cursor-grabbing" : ""}
+            select-none touch-none bg-gray-50
+          `,
+                children: /* @__PURE__ */ d("div", { className: "h-1 w-14 rounded-full bg-gray-500" })
+              }
+            ),
+            /* @__PURE__ */ d("div", { className: "flex-1 overflow-y-auto p-4", children: n })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function Ue(e) {
+  return te({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" }, child: [] }] })(e);
 }
-const rt = ({
+const dt = ({
   items: e,
   allowMultipleOpen: n = !1,
   className: t = "",
   tileClasses: r = "",
-  open: s,
-  onChange: c,
-  renderTitle: p,
-  renderContent: u,
-  showArrowIcon: d = !0,
+  open: o,
+  onChange: u,
+  renderTitle: g,
+  renderContent: c,
+  showArrowIcon: f = !0,
   panelClasses: a = ""
 }) => {
-  const [o, l] = M(/* @__PURE__ */ new Set()), f = z(() => s ? new Set(s) : o, [s, o]), x = A(
-    (g) => {
-      const b = new Set(f);
-      b.has(g) ? b.delete(g) : (n || b.clear(), b.add(g)), s && c ? c(Array.from(b)) : l(b);
+  const [s, l] = z(/* @__PURE__ */ new Set()), i = _(() => o ? new Set(o) : s, [o, s]), x = I(
+    (p) => {
+      const b = new Set(i);
+      b.has(p) ? b.delete(p) : (n || b.clear(), b.add(p)), o && u ? u(Array.from(b)) : l(b);
     },
-    [f, s, c, n]
+    [i, o, u, n]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: "accordion",
       role: "region",
       "aria-multiselectable": n,
-      children: e.map((g) => {
-        const b = f.has(g.id), C = `accordion-heading-${g.id}`, S = `accordion-panel-${g.id}`;
-        return /* @__PURE__ */ k(
+      children: e.map((p) => {
+        const b = i.has(p.id), C = `accordion-heading-${p.id}`, $ = `accordion-panel-${p.id}`;
+        return /* @__PURE__ */ E(
           "div",
           {
             className: `accordion-item border rounded border-gray-300 dark:border-gray-700 ${t}`,
             children: [
-              /* @__PURE__ */ k(
+              /* @__PURE__ */ E(
                 "button",
                 {
                   id: C,
                   type: "button",
                   "aria-expanded": b,
-                  "aria-controls": S,
-                  onClick: () => x(g.id),
+                  "aria-controls": $,
+                  onClick: () => x(p.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 ${r}`,
                   children: [
-                    p ? p(g, b) : g.title,
-                    d ? /* @__PURE__ */ i(He, {}) : null
+                    g ? g(p, b) : p.title,
+                    f ? /* @__PURE__ */ d(Ue, {}) : null
                   ]
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ d(
                 "div",
                 {
-                  id: S,
+                  id: $,
                   role: "region",
                   "aria-labelledby": C,
                   hidden: !b,
                   className: `p-4 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 ${a}`,
-                  children: u ? u(g, b) : g.content
+                  children: c ? c(p, b) : p.content
                 }
               )
             ]
           },
-          g.id
+          p.id
         );
       })
     }
   );
-}, ue = V(null), fe = () => {
-  const e = ie(ue);
+}, fe = V(null), pe = () => {
+  const e = ee(fe);
   if (!e)
     throw new Error(
       "useModalActions must be used within a ModalActionProvider"
     );
   return e;
-}, pe = V(null), ge = () => ie(pe);
-function st({
+}, ge = V(null), be = () => ee(ge);
+function ut({
   id: e,
-  title: n,
-  children: t,
-  standalone: r = !1,
-  showFloatingClose: s = !1,
-  containerClasses: c = "",
-  headerClasses: p = "",
-  bodyClasses: u = "",
-  onClose: d,
-  disableEscapeClose: a = !1,
-  closeBtnStyle: o
+  variant: n = "center",
+  title: t,
+  children: r,
+  standalone: o = !1,
+  showFloatingClose: u = !1,
+  containerClasses: g = "",
+  headerClasses: c = "",
+  bodyClasses: f = "",
+  onClose: a,
+  disableEscapeClose: s = !1,
+  closeBtnStyle: l
 }) {
-  const l = ge(), f = fe(), x = !r && !!l && !!f, [g, b] = M(!1), C = x ? l.isOpen(e) : g, S = x ? l.getModalData(e) : null, N = A(() => {
-    x ? f.closeModal(e) : b(!1), d == null || d();
-  }, [x, f, e, d]), h = _(null);
-  return R(() => {
-    C && (h.current = document.activeElement);
-    const v = document.getElementById(e), m = [
+  const i = be(), x = pe(), p = !o && !!i && !!x, [b, C] = z(!1), $ = p ? i.isOpen(e) : b, L = p ? i.getModalData(e) : null, y = n === "bottom-sheet", w = I(() => {
+    p ? x.closeModal(e) : C(!1), a == null || a();
+  }, [p, x, e, a]), h = F(null);
+  return T(() => {
+    $ && (h.current = document.activeElement);
+    const v = document.getElementById(e), P = [
       "a[href]",
       "button:not([disabled])",
       "textarea:not([disabled])",
       "input:not([disabled])",
       "select:not([disabled])",
       '[tabindex]:not([tabindex="-1"])'
-    ], w = () => {
+    ], S = () => {
       if (!v) return [];
-      const y = v.querySelectorAll(
-        m.join(",")
+      const m = v.querySelectorAll(
+        P.join(",")
       );
-      return Array.from(y).filter((L) => L.offsetParent !== null);
-    }, D = (y) => {
-      if (y.key === "Tab") {
-        const L = w();
-        if (L.length === 0) return;
-        const $ = L[0], P = L[L.length - 1];
-        y.shiftKey ? document.activeElement === $ && (y.preventDefault(), P.focus()) : document.activeElement === P && (y.preventDefault(), $.focus());
+      return Array.from(m).filter((N) => N.offsetParent !== null);
+    }, O = (m) => {
+      if (m.key === "Tab") {
+        const N = S();
+        if (N.length === 0) return;
+        const D = N[0], k = N[N.length - 1];
+        m.shiftKey ? document.activeElement === D && (m.preventDefault(), k.focus()) : document.activeElement === k && (m.preventDefault(), D.focus());
       }
-    }, E = (y) => {
-      y.key === "Escape" && !a && N(), D(y);
+    }, j = (m) => {
+      m.key === "Escape" && !s && w(), O(m);
     };
-    return C && (document.body.style.overflow = "hidden", setTimeout(() => {
-      const y = w();
-      y.length && y[0].focus();
-    }, 0), window.addEventListener("keydown", E)), () => {
-      var y;
-      document.body.style.overflow = "", (y = h.current) == null || y.focus(), window.removeEventListener("keydown", E);
+    return $ && (document.body.style.overflow = "hidden", setTimeout(() => {
+      const m = S();
+      m.length && m[0].focus();
+    }, 0), window.addEventListener("keydown", j)), () => {
+      var m;
+      document.body.style.overflow = "", (m = h.current) == null || m.focus(), window.removeEventListener("keydown", j);
     };
-  }, [C, a, N, e]), C ? /* @__PURE__ */ i(
+  }, [$, s, w, e]), $ ? /* @__PURE__ */ d(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px]",
       id: e,
-      children: /* @__PURE__ */ k(
+      className: `fixed inset-0 z-50 bg-black/60 backdrop-blur-[2px] ${y ? "flex items-end justify-center" : "flex items-center justify-center"}`,
+      children: /* @__PURE__ */ E(
         "div",
         {
-          className: `bg-white rounded-lg shadow-lg w-full max-w-md p-4 transform transition-all duration-300 scale-100 ${c}`,
+          className: `bg-white shadow-lg transform transition-all duration-300 ${y ? "w-full rounded-t-3xl max-h-[92dvh] overflow-y-auto animate-slide-up p-4" : "w-full max-w-md rounded-lg scale-100 p-4"} ${g}`,
           children: [
-            /* @__PURE__ */ k(
+            /* @__PURE__ */ E(
               "div",
               {
-                className: `flex justify-between items-center relative ${p}`,
+                className: `flex justify-between items-center relative ${c}`,
                 children: [
-                  n && /* @__PURE__ */ i("h2", { className: "text-lg font-semibold", children: n }),
-                  s && /* @__PURE__ */ i(
+                  t && /* @__PURE__ */ d("h2", { className: "text-lg font-semibold", children: t }),
+                  u && /* @__PURE__ */ d(
                     "button",
                     {
-                      onClick: N,
-                      className: `text-gray-500 hover:text-black absolute top-0 right-3 hover:bg-gray-200 rounded-full aspect-square w-8 ${o}`,
+                      onClick: w,
                       "aria-label": "Close modal",
+                      className: `text-gray-500 hover:text-black absolute top-0 right-3 hover:bg-gray-200 rounded-full aspect-square w-8 ${l}`,
                       children: "✕"
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ i("div", { className: u, children: typeof t == "function" ? t({ modalData: S }) : t })
+            /* @__PURE__ */ d("div", { className: f, children: typeof r == "function" ? r({ modalData: L }) : r })
           ]
         }
       )
     }
   ) : null;
 }
-function ot({
+function ft({
   children: e
 }) {
-  const [n, t] = M({}), [r, s] = M({}), c = A((l, f) => {
-    t((x) => ({ ...x, [l]: !0 })), f && s((x) => ({ ...x, [l]: f }));
-  }, []), p = A((l) => {
-    t((f) => ({ ...f, [l]: !1 })), s((f) => {
-      const x = { ...f };
+  const [n, t] = z({}), [r, o] = z({}), u = I((l, i) => {
+    t((x) => ({ ...x, [l]: !0 })), i && o((x) => ({ ...x, [l]: i }));
+  }, []), g = I((l) => {
+    t((i) => ({ ...i, [l]: !1 })), o((i) => {
+      const x = { ...i };
       return delete x[l], x;
     });
-  }, []), u = A((l) => !!n[l], [n]), d = A(
+  }, []), c = I((l) => !!n[l], [n]), f = I(
     (l) => r[l],
     [r]
-  ), a = z(
-    () => ({ openModal: c, closeModal: p }),
-    [c, p]
-  ), o = z(
-    () => ({ isOpen: u, getModalData: d }),
-    [u, d]
+  ), a = _(
+    () => ({ openModal: u, closeModal: g }),
+    [u, g]
+  ), s = _(
+    () => ({ isOpen: c, getModalData: f }),
+    [c, f]
   );
-  return /* @__PURE__ */ i(ue.Provider, { value: a, children: /* @__PURE__ */ i(pe.Provider, { value: o, children: e }) });
+  return /* @__PURE__ */ d(fe.Provider, { value: a, children: /* @__PURE__ */ d(ge.Provider, { value: s, children: e }) });
 }
-function at(e) {
-  const { openModal: n, closeModal: t } = fe(), { isOpen: r, getModalData: s } = ge();
+function pt(e) {
+  const { openModal: n, closeModal: t } = pe(), { isOpen: r, getModalData: o } = be();
   return {
-    open: (c) => n(e, c),
+    open: (u) => n(e, u),
     close: () => t(e),
     isOpen: r(e),
-    data: s(e)
+    data: o(e)
   };
 }
 let J = null, Q = {};
-function We(e) {
+function qe(e) {
   J = e;
 }
-function lt(e) {
+function gt(e) {
   Q = { ...Q, ...e };
 }
-function Ge() {
+function Xe() {
   return Q;
 }
-function it(e, n, t = 3e3, r) {
+function bt(e, n, t = 3e3, r) {
   J ? J(e, n, t, r) : console.warn("Toast system is not mounted");
 }
-function qe(e) {
-  return ee({ 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);
+function Je(e) {
+  return te({ 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 Qe = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
   const n = Math.random() * 16 | 0;
   return (e === "x" ? n : n & 3 | 8).toString(16);
-}), ct = ({ containerStyle: e = "" }) => {
-  const [n, t] = M([]);
-  R(() => {
-    We((s, c, p, u) => {
-      const d = Ue();
-      t((a) => [...a, { id: d, type: s, message: c, config: u }]), setTimeout(() => {
-        t((a) => a.filter((o) => o.id !== d));
-      }, p);
+}), mt = ({ containerStyle: e = "" }) => {
+  const [n, t] = z([]);
+  T(() => {
+    qe((o, u, g, c) => {
+      const f = Qe();
+      t((a) => [...a, { id: f, type: o, message: u, config: c }]), setTimeout(() => {
+        t((a) => a.filter((s) => s.id !== f));
+      }, g);
     });
   }, []);
-  const r = Ge();
-  return /* @__PURE__ */ i(
+  const r = Xe();
+  return /* @__PURE__ */ d(
     "div",
     {
       className: `fixed top-5 right-5 z-9999 flex flex-col gap-2 ${e}`,
-      children: n.map((s) => {
-        var a, o, l, f, x, g, b, C, S, N, h, v, m, w;
-        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) || ((x = (f = r.colors) == null ? void 0 : f[s.type]) == null ? void 0 : x.bg) || "bg-white dark:bg-gray-800", u = ((g = s.config) == null ? void 0 : g.textColor) || ((C = (b = r.colors) == null ? void 0 : b[s.type]) == null ? void 0 : C.text) || "text-gray-700 dark:text-gray-300", d = `w-8 h-8 mr-3 text-xl flex items-center justify-center ${(S = s.config) == null ? void 0 : S.iconContainerClass}`;
-        return /* @__PURE__ */ k(
+      children: n.map((o) => {
+        var a, s, l, i, x, p, b, C, $, L, y, w, h, v;
+        const u = ((a = o.config) == null ? void 0 : a.icon) || ((s = r.icons) == null ? void 0 : s[o.type]) || Ve(o.type), g = ((l = o.config) == null ? void 0 : l.bgColor) || ((x = (i = r.colors) == null ? void 0 : i[o.type]) == null ? void 0 : x.bg) || "bg-white dark:bg-gray-800", c = ((p = o.config) == null ? void 0 : p.textColor) || ((C = (b = r.colors) == null ? void 0 : b[o.type]) == null ? void 0 : C.text) || "text-gray-700 dark:text-gray-300", f = `w-8 h-8 mr-3 text-xl flex items-center justify-center ${($ = o.config) == null ? void 0 : $.iconContainerClass}`;
+        return /* @__PURE__ */ E(
           "div",
           {
-            className: `flex items-center w-full max-w-xs p-4 text-sm rounded-lg shadow ${p} ${u} ${(N = s.config) == null ? void 0 : N.containerBody}`,
+            className: `flex items-center w-full max-w-xs p-4 text-sm rounded-lg shadow ${g} ${c} ${(L = o.config) == null ? void 0 : L.containerBody}`,
             children: [
-              c && /* @__PURE__ */ i("div", { className: d, children: c }),
-              /* @__PURE__ */ k("div", { className: "flex-1", children: [
-                ((h = s.config) == null ? void 0 : h.title) && /* @__PURE__ */ i(
+              u && /* @__PURE__ */ d("div", { className: f, children: u }),
+              /* @__PURE__ */ E("div", { className: "flex-1", children: [
+                ((y = o.config) == null ? void 0 : y.title) && /* @__PURE__ */ d(
                   "div",
                   {
-                    className: `font-semibold text-black ${(v = s.config) == null ? void 0 : v.titleClass}`,
-                    children: s.config.title
+                    className: `font-semibold text-black ${(w = o.config) == null ? void 0 : w.titleClass}`,
+                    children: o.config.title
                   }
                 ),
-                ((m = s.config) == null ? void 0 : m.description) && /* @__PURE__ */ i(
+                ((h = o.config) == null ? void 0 : h.description) && /* @__PURE__ */ d(
                   "div",
                   {
-                    className: `text-sm text-gray-500 ${(w = s.config) == null ? void 0 : w.subTitleClass}`,
-                    children: s.config.description
+                    className: `text-sm text-gray-500 ${(v = o.config) == null ? void 0 : v.subTitleClass}`,
+                    children: o.config.description
                   }
                 )
               ] }),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ d(
                 "button",
                 {
-                  onClick: () => t((D) => D.filter((E) => E.id !== s.id)),
+                  onClick: () => t((P) => P.filter((S) => S.id !== o.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 })
+                  children: /* @__PURE__ */ d(Je, { size: 18 })
                 }
               )
             ]
           },
-          s.id
+          o.id
         );
       })
     }
   );
 };
-function Xe(e) {
+function Ve(e) {
   switch (e) {
     case "success":
       return "✅";
@@ -1190,21 +1347,24 @@ function Xe(e) {
   }
 }
 export {
-  rt as Accordion,
-  tt as Badge,
-  Qe as Button,
-  _e as Checkbox,
-  Ve as Dropdown,
-  ye as Input,
-  st as Modal,
-  ot as ModalProvider,
-  Se as Select,
-  ct as Toast,
-  nt as Toggler,
-  et as Tooltip,
-  lt as setToastDefaults,
-  it as showToast,
-  fe as useModalActions,
-  at as useModalInstance,
-  ge as useModalState
+  dt as Accordion,
+  at as Badge,
+  ct as BottomSheet,
+  it as BottomSheetProvider,
+  rt as Button,
+  He as Checkbox,
+  ot as Dropdown,
+  Ce as Input,
+  ut as Modal,
+  ft as ModalProvider,
+  Le as Select,
+  mt as Toast,
+  lt as Toggler,
+  st as Tooltip,
+  gt as setToastDefaults,
+  bt as showToast,
+  Ge as useBottomSheet,
+  pe as useModalActions,
+  pt as useModalInstance,
+  be as useModalState
 };