prometeo-design-system 6.4.0 → 6.4.4

package/dist/DialogModal.es.js

@@ -1,65 +1,65 @@
-import { j as c } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as Pe, memo as B, useState as S, useRef as Y, useCallback as R, useEffect as T, useImperativeHandle as Ye, Children as D, isValidElement as J, createElement as A, cloneElement as pe } from "react";
+import { j as x } from "./jsx-runtime-GkKLlHH4.js";
+import { forwardRef as Ye, memo as W, useState as B, useRef as D, useCallback as X, useEffect as R, useImperativeHandle as De, Children as T, isValidElement as Q, createElement as S, cloneElement as xe } from "react";
 import { createPortal as je } from "react-dom";
-import { c as p } from "./cn-B6yFEsav.js";
-import { c as De } from "./index-BOQuZ0gG.js";
-const Te = 50, xe = Pe(
-  ({ children: o, onClose: x, className: u, attachToParent: i = !1, zindex: h = 40, debugMode: t = !1, safeMarginSize: d = 24, title: g, scroll: m = "content", size: ue = "medium", unmountChildrenOnClose: v = !0 }, he) => {
-    const [y, Q] = S(!1), [W, F] = S(null), [me, z] = S(
-      () => v ? y : !0
-    ), Z = Y(x), O = Y(W), M = Y(null), f = Y(null), L = Y(/* @__PURE__ */ new Set());
-    Z.current = x, O.current = W;
-    const ee = R((r) => {
-      F(r ?? {}), Q(!0);
-    }, []), H = R(() => {
-      Q(!1), Z.current?.(O.current);
+import { c as u } from "./cn-B6yFEsav.js";
+import { c as Te } from "./index-BOQuZ0gG.js";
+const Re = 50, ue = Ye(
+  function({ children: i, onClose: d, className: f, attachToParent: h = !1, zindex: c = 40, debugMode: n = !1, safeMarginSize: E = 24, title: b, scroll: P = "content", size: he = "medium", unmountChildrenOnClose: v = !0 }, me) {
+    const [g, Z] = B(!1), [F, z] = B(null), [Ee, O] = B(
+      () => v ? g : !0
+    ), M = D(d), L = D(F), ee = D(null), p = D(null), H = D(/* @__PURE__ */ new Set());
+    M.current = d, L.current = F;
+    const te = X((r) => {
+      z(r ?? {}), Z(!0);
+    }, []), G = X(() => {
+      Z(!1), M.current?.(L.current);
     }, []);
-    T(() => {
-      L.current.forEach((r) => {
+    R(() => {
+      H.current.forEach((r) => {
         try {
-          r(y);
+          r(g);
         } catch {
         }
       });
-    }, [y]), Ye(
-      he,
+    }, [g]), De(
+      me,
       () => ({
-        open: ee,
-        close: H,
-        isOpen: y,
-        getContext: () => O.current,
-        subscribeOpenChange: (r) => (L.current.add(r), () => {
-          L.current.delete(r);
+        open: te,
+        close: G,
+        isOpen: g,
+        getContext: () => L.current,
+        subscribeOpenChange: (r) => (H.current.add(r), () => {
+          H.current.delete(r);
         })
       }),
-      [ee, H, y]
-    ), T(() => {
-      v && y && z(!0);
-    }, [y, v]), T(() => {
+      [te, G, g]
+    ), R(() => {
+      v && g && O(!0);
+    }, [g, v]), R(() => {
       if (v) {
-        if (y) {
-          f.current && (clearTimeout(f.current), f.current = null);
+        if (g) {
+          p.current && (clearTimeout(p.current), p.current = null);
           return;
         }
-        return f.current && clearTimeout(f.current), f.current = setTimeout(() => {
-          z(!1), F(null), f.current = null;
-        }, Te), () => {
-          f.current && (clearTimeout(f.current), f.current = null);
+        return p.current && clearTimeout(p.current), p.current = setTimeout(() => {
+          O(!1), z(null), p.current = null;
+        }, Re), () => {
+          p.current && (clearTimeout(p.current), p.current = null);
         };
       }
-    }, [y, v]), T(() => {
+    }, [g, v]), R(() => {
       if (!v) return;
-      const r = M.current;
+      const r = ee.current;
       if (!r) return;
       const e = (w) => {
-        const n = r.hasAttribute("open");
-        w.target === r && (!["opacity", "display", "transform"].includes(w.propertyName) || n || (f.current && (clearTimeout(f.current), f.current = null), z(!1), F(null)));
+        const t = r.hasAttribute("open");
+        w.target === r && (!["opacity", "display", "transform"].includes(w.propertyName) || t || (p.current && (clearTimeout(p.current), p.current = null), O(!1), z(null)));
       };
       return r.addEventListener("transitionend", e), r.addEventListener("transitioncancel", e), () => {
         r.removeEventListener("transitionend", e), r.removeEventListener("transitioncancel", e);
       };
     }, [v]);
-    const Ee = De("max-h-[calc(100%-80px)]", {
+    const ge = Te("max-h-[calc(100%-80px)]", {
       variants: {
         size: {
           medium: " max-w-[min(740px,calc(100%-32px))]",
@@ -67,9 +67,9 @@ const Te = 50, xe = Pe(
         }
       }
     });
-    let X, G;
-    typeof o == "function" ? (X = o(W), G = D.toArray(X)) : (X = o, G = D.toArray(X));
-    const ge = (r) => {
+    let k, _;
+    typeof i == "function" ? (k = i(F), _ = T.toArray(k)) : (k = i, _ = T.toArray(k));
+    const ye = (r) => {
       const e = {
         headerProps: null,
         titleContent: null,
@@ -84,125 +84,125 @@ const Te = 50, xe = Pe(
           footerExpandX: !1,
           footerExpandY: !1
         }
-      }, w = (n) => {
-        if (!J(n)) return;
-        const a = n.props;
-        n.type === N ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!a?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!a?.expandY) : n.type === C ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!a?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!a?.expandY) : n.type === I && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!a?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!a?.expandY), a?.children && D.toArray(a.children).forEach(w);
+      }, w = (t) => {
+        if (!Q(t)) return;
+        const o = t.props;
+        t.type === I ? (e.allExpandInfo.headerExpandX = e.allExpandInfo.headerExpandX || !!o?.expandX, e.allExpandInfo.headerExpandY = e.allExpandInfo.headerExpandY || !!o?.expandY) : t.type === C ? (e.allExpandInfo.contentExpandX = e.allExpandInfo.contentExpandX || !!o?.expandX, e.allExpandInfo.contentExpandY = e.allExpandInfo.contentExpandY || !!o?.expandY) : t.type === N && (e.allExpandInfo.footerExpandX = e.allExpandInfo.footerExpandX || !!o?.expandX, e.allExpandInfo.footerExpandY = e.allExpandInfo.footerExpandY || !!o?.expandY), o?.children && T.toArray(o.children).forEach(w);
       };
-      return r.forEach((n) => {
-        if (w(n), !J(n)) {
-          e.middleChildren.push(n);
+      return r.forEach((t) => {
+        if (w(t), !Q(t)) {
+          e.middleChildren.push(t);
           return;
         }
-        if (n.type === j && !e.titleContent) {
-          e.titleContent = n;
+        if (t.type === j && !e.titleContent) {
+          e.titleContent = t;
           return;
         }
-        if (n.type === N && !e.headerProps) {
-          const a = n.props;
-          e.headerProps = a;
+        if (t.type === I && !e.headerProps) {
+          const o = t.props;
+          e.headerProps = o;
           return;
         }
-        if (n.type === C && !e.contentProps) {
-          const a = n.props;
-          e.contentProps = a;
+        if (t.type === C && !e.contentProps) {
+          const o = t.props;
+          e.contentProps = o;
           return;
         }
-        if (n.type === I && !e.footerProps) {
-          const a = n.props;
-          e.footerProps = a;
+        if (t.type === N && !e.footerProps) {
+          const o = t.props;
+          e.footerProps = o;
           return;
         }
-        e.middleChildren.push(n);
+        e.middleChildren.push(t);
       }), e;
-    }, ye = (r, e, w, n) => {
-      const a = (l, K) => {
-        if (!J(l))
+    }, be = (r, e, w, t) => {
+      const o = (l, V) => {
+        if (!Q(l))
           return l;
-        const s = l.props, P = l.key ?? `dialog-child-${K}`;
+        const s = l.props, Y = l.key ?? `dialog-child-${V}`;
         if (l.type === j)
-          return /* @__PURE__ */ A(j, { ...s, debugMode: t, key: P }, s.children);
-        if (l.type === N)
-          return /* @__PURE__ */ A(N, { ...s, debugMode: t, expandWeight: e, key: P }, s.children);
-        if (l.type === C)
-          return /* @__PURE__ */ A(C, { ...s, debugMode: t, scroll: m, expandWeight: w, key: P }, s.children);
+          return /* @__PURE__ */ S(j, { ...s, debugMode: n, key: Y }, s.children);
         if (l.type === I)
-          return /* @__PURE__ */ A(I, { ...s, debugMode: t, expandWeight: n, key: P }, s.children);
+          return /* @__PURE__ */ S(I, { ...s, debugMode: n, expandWeight: e, key: Y }, s.children);
+        if (l.type === C)
+          return /* @__PURE__ */ S(C, { ...s, debugMode: n, scroll: P, expandWeight: w, key: Y }, s.children);
+        if (l.type === N)
+          return /* @__PURE__ */ S(N, { ...s, debugMode: n, expandWeight: t, key: Y }, s.children);
         if (l.type === "form") {
-          const V = s?.children ? D.toArray(s.children).map((U, q) => a(U, q)) : [];
-          return pe(l, {
-            key: P,
+          const U = s?.children ? T.toArray(s.children).map((q, J) => o(q, J)) : [];
+          return xe(l, {
+            key: Y,
             ...s,
-            className: p(s?.className, "contents")
-          }, ...V);
+            className: u(s?.className, "contents")
+          }, ...U);
         }
         if (s?.children) {
-          const V = D.toArray(s.children).map((U, q) => a(U, q));
-          return pe(l, { key: P }, ...V);
+          const U = T.toArray(s.children).map((q, J) => o(q, J));
+          return xe(l, { key: Y }, ...U);
         }
         return l;
       };
-      return r.map((l, K) => a(l, K));
+      return r.map((l, V) => o(l, V));
     };
-    let { headerProps: te, titleContent: k, contentProps: ne, footerProps: re, middleChildren: be, allExpandInfo: E } = ge(G), b = te ? { ...te } : null, _ = ne ? { ...ne } : null, $ = re ? { ...re } : null;
-    !b && g && (b = { title: g, children: null }, k = null), b && k && b.title && (b = {
-      ...b,
+    let { headerProps: ne, titleContent: A, contentProps: re, footerProps: oe, middleChildren: ve, allExpandInfo: m } = ye(_), y = ne ? { ...ne } : null, $ = re ? { ...re } : null, K = oe ? { ...oe } : null;
+    !y && b && (y = { title: b, children: null }, A = null), y && A && y.title && (y = {
+      ...y,
       title: "",
-      children: k
-    }, k = null);
-    const ve = E.headerExpandX || E.contentExpandX || E.footerExpandX, oe = E.headerExpandY || E.contentExpandY || E.footerExpandY, we = [E.headerExpandY, E.contentExpandY, E.footerExpandY].filter(Boolean).length, ae = E.contentExpandY ? we > 1 ? 2 : 1 : void 0, le = E.headerExpandY ? 1 : void 0, se = E.footerExpandY ? 1 : void 0, ie = ye(be, le, ae, se), Ce = b ? /* @__PURE__ */ c.jsx(N, { ...b, debugMode: t, expandWeight: le, children: b.children }) : null, de = (_ ? /* @__PURE__ */ c.jsx(C, { ..._, debugMode: t, scroll: m, expandWeight: ae, children: _.children }) : null) ?? (ie.length ? ie : null), Ne = $ ? /* @__PURE__ */ c.jsx(I, { ...$, debugMode: t, expandWeight: se, children: $.children }) : null, Ie = ve ? "w-full" : "w-auto", fe = {
-      "--safe-margin-size": `${d}px`
+      children: A
+    }, A = null);
+    const we = m.headerExpandX || m.contentExpandX || m.footerExpandX, ae = m.headerExpandY || m.contentExpandY || m.footerExpandY, Ce = [m.headerExpandY, m.contentExpandY, m.footerExpandY].filter(Boolean).length, le = m.contentExpandY ? Ce > 1 ? 2 : 1 : void 0, se = m.headerExpandY ? 1 : void 0, ie = m.footerExpandY ? 1 : void 0, de = be(ve, se, le, ie), Ie = y ? /* @__PURE__ */ x.jsx(I, { ...y, debugMode: n, expandWeight: se, children: y.children }) : null, fe = ($ ? /* @__PURE__ */ x.jsx(C, { ...$, debugMode: n, scroll: P, expandWeight: le, children: $.children }) : null) ?? (de.length ? de : null), Ne = K ? /* @__PURE__ */ x.jsx(N, { ...K, debugMode: n, expandWeight: ie, children: K.children }) : null, Pe = we ? "w-full" : "w-auto", ce = {
+      "--safe-margin-size": `${E}px`
     };
-    oe && (fe.height = `calc(100% - ${d * 2}px)`);
-    const ce = /* @__PURE__ */ c.jsx(
+    ae && (ce.height = `calc(100% - ${E * 2}px)`);
+    const pe = /* @__PURE__ */ x.jsx(
       "dialog",
       {
-        ref: M,
-        open: y,
-        className: p(
+        ref: ee,
+        open: g,
+        className: u(
           "prometeo-dialog fixed inset-0 w-screen h-screen z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
           "open:flex",
           "hidden"
         ),
-        style: { zIndex: h },
-        onClick: H,
-        children: /* @__PURE__ */ c.jsxs(
+        style: { zIndex: c },
+        onClick: G,
+        children: /* @__PURE__ */ x.jsxs(
           "div",
           {
             onClick: (r) => r.stopPropagation(),
-            className: p(
+            className: u(
               "prometeo-dialog-panel bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
-              Ie,
-              m === "content" ? "" : "prometeo-scrollbar-thin!",
+              Pe,
+              P === "content" ? "" : "prometeo-scrollbar-thin!",
               // scroll === 'dialog' && 'overflow-auto ',
               "flex flex-col ",
-              Ee({ size: ue })
+              ge({ size: he })
               // className
             ),
-            style: fe,
+            style: ce,
             children: [
-              /* @__PURE__ */ c.jsx(
+              /* @__PURE__ */ x.jsx(
                 "div",
                 {
-                  className: p(
+                  className: u(
                     "absolute bg-transparent z-[-1] -top-(--safe-margin-size) -left-(--safe-margin-size) -right-(--safe-margin-size) -bottom-(--safe-margin-size)",
-                    t && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
+                    n && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
                   ),
                   style: {
-                    background: t ? "#FF393973" : "auto",
-                    border: t ? "solid 1px #FF3939" : ""
+                    background: n ? "#FF393973" : "auto",
+                    border: n ? "solid 1px #FF3939" : ""
                   }
                 }
               ),
-              (!v || me) && /* @__PURE__ */ c.jsxs("div", { className: p(
+              (!v || Ee) && /* @__PURE__ */ x.jsxs("div", { className: u(
                 "flex flex-col h-auto prometeo-scrollbar-thin!",
-                oe && "flex-1 min-h-0",
-                m === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
-                m === "content" && "overflow-hidden",
-                u
+                ae && "flex-1 min-h-0",
+                P === "dialog" && "overflow-auto *:min-w-max *:min-h-max",
+                P === "content" && "overflow-hidden",
+                f
               ), children: [
-                Ce,
-                m === "dialog" ? /* @__PURE__ */ c.jsx("div", { className: "flex flex-col flex-1", children: de }) : de,
+                Ie,
+                P === "dialog" ? /* @__PURE__ */ x.jsx("div", { className: "flex flex-col flex-1", children: fe }) : fe,
                 Ne
               ] })
             ]
@@ -210,97 +210,97 @@ const Te = 50, xe = Pe(
         )
       }
     );
-    return i ? ce : je(ce, document.body);
+    return h ? pe : je(pe, document.body);
   }
 );
-xe.displayName = "Dialog";
-const C = B(({ children: o, className: x, debugMode: u, scroll: i, expandX: h, expandY: t, expandWeight: d }) => {
-  const g = p(
+ue.displayName = "Dialog";
+const C = W(({ children: a, className: i, debugMode: d, scroll: f, expandX: h, expandY: c, expandWeight: n }) => {
+  const E = u(
     h && "w-full min-w-0",
-    t && "flex-1 min-h-0"
-  ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ c.jsx("div", { style: m, className: p(
+    c && "flex-1 min-h-0"
+  ), b = c ? { flexGrow: n ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ x.jsx("div", { style: b, className: u(
     "flex flex-col p-4 prometeo-scrollbar-thin!",
-    u && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
-    g,
-    x,
+    d && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
+    E,
+    i,
     // Para scroll='content', este componente necesita su propio scroll y altura mínima
-    i === "content" && "overflow-y-auto min-h-0  flex-1 ",
+    f === "content" && "overflow-y-auto min-h-0  flex-1 ",
     // Para scroll='dialog', el contenido debe ocupar todo el espacio disponible pero sin scroll
-    i === "dialog" && "flex-1 min-h-max "
-  ), children: o });
+    f === "dialog" && "flex-1 min-h-max "
+  ), children: a });
 });
 C.displayName = "DialogContent";
-const j = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h }) => {
-  const t = p(
-    i && "w-full min-w-0",
+const j = W(({ children: a, className: i, debugMode: d, expandX: f, expandY: h }) => {
+  const c = u(
+    f && "w-full min-w-0",
     h && "flex-1 min-h-0"
   );
-  return /* @__PURE__ */ c.jsx("h1", { className: p("prometeo-fonts-headline-small text-neutral-strong-default w-max", u && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', t, x), children: o });
+  return /* @__PURE__ */ x.jsx("h1", { className: u("prometeo-fonts-headline-small text-neutral-strong-default w-max", d && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', c, i), children: a });
 });
 j.displayName = "DialogTitle";
-const N = B(({ children: o, className: x, title: u, debugMode: i, expandX: h, expandY: t, expandWeight: d }) => {
-  const g = p(
+const I = W(({ children: a, className: i, title: d, debugMode: f, expandX: h, expandY: c, expandWeight: n }) => {
+  const E = u(
     h && "w-full min-w-0",
-    t && "flex-1 min-h-0"
-  ), m = t ? { flexGrow: d ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ c.jsxs("div", { style: m, className: p(
+    c && "flex-1 min-h-0"
+  ), b = c ? { flexGrow: n ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ x.jsxs("div", { style: b, className: u(
     "px-6 pt-8 pb-4 flex flex-col",
-    g,
-    i && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
-    x
+    E,
+    f && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+    i
   ), children: [
-    u && /* @__PURE__ */ c.jsx(j, { debugMode: i, children: u }),
-    o
+    d && /* @__PURE__ */ x.jsx(j, { debugMode: f, children: d }),
+    a
   ] });
 });
-N.displayName = "DialogHeader";
-const I = B(({ children: o, className: x, debugMode: u, expandX: i, expandY: h, expandWeight: t }) => {
-  const d = p(
-    i && "w-full min-w-0",
+I.displayName = "DialogHeader";
+const N = W(({ children: a, className: i, debugMode: d, expandX: f, expandY: h, expandWeight: c }) => {
+  const n = u(
+    f && "w-full min-w-0",
     h && "flex-1 min-h-0 flex-col"
-  ), g = h ? { flexGrow: t ?? 1, flexBasis: 0 } : void 0;
-  return /* @__PURE__ */ c.jsx("div", { style: g, className: p(
-    u && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+  ), E = h ? { flexGrow: c ?? 1, flexBasis: 0 } : void 0;
+  return /* @__PURE__ */ x.jsx("div", { style: E, className: u(
+    d && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
     "border-t border-neutral-strong-default p-4 w-full flex flex-row justify-end gap-4",
-    d,
-    x
-  ), children: o });
+    n,
+    i
+  ), children: a });
 });
-I.displayName = "DialogFooter";
-const Re = Object.assign(xe, {
+N.displayName = "DialogFooter";
+const Xe = Object.assign(ue, {
   Content: C,
-  Header: N,
-  Footer: I,
+  Header: I,
+  Footer: N,
   Title: j
 });
-Re.displayName = "DialogModal";
-const Fe = () => {
-  const o = Y(null), [x, u] = S(!1), i = R((d) => {
-    o.current?.open(d);
-  }, []), h = R(() => {
-    o.current?.close();
+Xe.displayName = "DialogModal";
+const ze = () => {
+  const a = D(null), [i, d] = B(!1), f = X((n) => {
+    a.current?.open(n);
+  }, []), h = X(() => {
+    a.current?.close();
   }, []);
-  T(() => {
-    const d = o.current?.subscribeOpenChange;
-    if (!d) return;
-    const g = d((m) => {
-      u(m);
+  R(() => {
+    const n = a.current?.subscribeOpenChange;
+    if (!n) return;
+    const E = n((b) => {
+      d(b);
     });
     return () => {
-      g && g();
+      E && E();
     };
-  }, [o.current?.subscribeOpenChange]);
-  const t = R(() => o.current?.getContext() ?? null, []);
+  }, [a.current?.subscribeOpenChange]);
+  const c = X(() => a.current?.getContext() ?? null, []);
   return {
-    ref: o,
-    open: i,
+    ref: a,
+    open: f,
     close: h,
-    isOpen: x,
-    getContext: t
+    isOpen: i,
+    getContext: c
   };
 };
 export {
-  Re as default,
-  Fe as useDialogControl
+  Xe as default,
+  ze as useDialogControl
 };

package/dist/DrawerDesktop.es.js

@@ -2,54 +2,54 @@ import { j as l } from "./jsx-runtime-GkKLlHH4.js";
 import { c as k } from "./cn-B6yFEsav.js";
 import { c as R } from "./index-BOQuZ0gG.js";
 import { createPortal as B } from "react-dom";
-import { forwardRef as L, useRef as d, useState as O, useEffect as o, useCallback as N, useImperativeHandle as Y } from "react";
+import { forwardRef as L, useRef as d, useState as D, useEffect as o, useCallback as N, useImperativeHandle as Y } from "react";
 import F from "./Button.es.js";
 import { Close as H } from "./Icons/Close.es.js";
-import { u as Z } from "./useDrawerControl-Cy-mkJxV.js";
-const $ = L((s, f) => {
-  const c = d(null), [e, m] = O(s.defaultOpen || !1), [t, y] = O(null), b = d(s.onClose), i = d(t), u = d(/* @__PURE__ */ new Set()), {
+import { u as Z, b as _, a as ee } from "./useDrawerControl-CTqQK4zm.js";
+const M = L((s, f) => {
+  const c = d(null), [e, m] = D(s.defaultOpen || !1), [t, y] = D(null), b = d(s.onClose), i = d(t), u = d(/* @__PURE__ */ new Set()), {
     modal: p = !1,
     children: a,
-    className: w,
+    className: v,
     direction: C = "left",
     attachToParent: x = !1,
     closeOnOverlayClick: r = !1,
     hideCloseButton: T = !1,
-    unmountChildrenOnClose: h = !1,
+    unmountChildrenOnClose: w = !1,
     zindex: S = 35
-  } = s, g = d(r), j = d(e);
+  } = s, g = d(r), O = d(e);
   i.current = t;
-  const [V, P] = O(() => !h);
+  const [V, P] = D(() => !w);
   o(() => {
-    h && e && P(!0);
-  }, [e, h]), o(() => {
-    j.current = e;
+    w && e && P(!0);
+  }, [e, w]), o(() => {
+    O.current = e;
   }, [e]), o(() => {
     i.current = t;
   }, [t]), o(() => {
     g.current = r;
   }, [r]);
-  const z = (n) => {
+  const j = (n) => {
     if (!c.current)
       return;
     const E = c.current;
-    E && !E.contains(n.target) && g.current && j.current && v();
+    E && !E.contains(n.target) && g.current && O.current && h();
   };
   o(() => {
     if (!g.current || p || !e)
       return;
     const n = setTimeout(() => {
-      document.addEventListener("click", z);
+      document.addEventListener("click", j);
     }, 0);
     return () => {
-      clearTimeout(n), document.removeEventListener("click", z);
+      clearTimeout(n), document.removeEventListener("click", j);
     };
   }, [r, e, p]), o(() => {
     b.current = s.onClose;
   }, [s.onClose]);
-  const D = N((n) => {
+  const z = N((n) => {
     y(n ?? null), m(!0);
-  }, []), v = N(() => {
+  }, []), h = N(() => {
     m(!1), b.current?.(i.current), setTimeout(() => y(null), 300);
   }, []);
   o(() => {
@@ -62,37 +62,37 @@ const $ = L((s, f) => {
   }, [e]), Y(
     f,
     () => ({
-      open: D,
-      close: v,
+      open: z,
+      close: h,
       isOpen: e,
       subscribeOpenChange: (n) => (u.current.add(n), () => {
         u.current.delete(n);
       }),
       getContext: () => i.current
     }),
-    [e, D, v]
+    [e, z, h]
   );
   const I = /* @__PURE__ */ l.jsx(
-    q,
+    $,
     {
       context: t,
       ref: c,
       isOpen: e,
-      close: v,
+      close: h,
       direction: C,
       modal: p,
-      className: w,
+      className: v,
       attachToParent: x,
       closeOnOverlayClick: r,
       hideCloseButton: T,
       zindex: S,
-      children: (!h || V) && (typeof a == "function" ? a(t) : a)
+      children: (!w || V) && (typeof a == "function" ? a(t) : a)
     }
   );
   return x ? I : B(I, document.body);
 });
-$.displayName = "DrawerDesktopV2";
-const q = ({
+M.displayName = "DrawerDesktopV2";
+const $ = ({
   ref: s,
   children: f,
   direction: c = "left",
@@ -114,7 +114,7 @@ const q = ({
       };
     }
   }, [e, t]);
-  const w = R("border-neutral-strong-default", {
+  const v = R("border-neutral-strong-default", {
     variants: {
       isOpen: {
         true: "desktop-drawer-visible",
@@ -162,7 +162,7 @@ const q = ({
         className: k(
           "bg-neutral-strong-default h-full top-0 z-60 w-max overflow-y-auto",
           b ? "absolute" : "fixed",
-          w({ isOpen: e, direction: c }),
+          v({ isOpen: e, direction: c }),
           !u && "p-4 pt-10",
           y
         ),
@@ -197,6 +197,8 @@ const q = ({
   ] });
 };
 export {
-  $ as default,
-  Z as useDrawerControl
+  M as default,
+  Z as useDrawerControl,
+  _ as useDrawerDesktop,
+  ee as useDrawerMobile
 };