@plainsheet/react 0.4.4 → 0.4.5

package/dist/plainsheet-react.es.js

@@ -1,4 +1,4 @@
-import { forwardRef as Dt, useRef as ot, useState as rt, useImperativeHandle as Bt, useCallback as Mt, useEffect as _, useMemo as Pt } from "react";
+import { forwardRef as At, useRef as ot, useState as rt, useImperativeHandle as Bt, useCallback as Pt, useEffect as _, useMemo as Mt } from "react";
 import { createPortal as Yt } from "react-dom";
 function It(t) {
   return t != null;
@@ -14,7 +14,7 @@ function It(t) {
   }
 })();
 var Rt = Object.defineProperty, Nt = (t, e, n) => e in t ? Rt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, V = (t, e, n) => Nt(t, typeof e != "symbol" ? e + "" : e, n);
-function L(t) {
+function x(t) {
   return typeof t == "string";
 }
 function Ft(t, e) {
@@ -27,10 +27,10 @@ function it(t, e) {
   t.classList.remove(et(e));
 }
 function $(t, e, n) {
-  L(n) && (L(e) && it(t, e), X(t, n));
+  x(n) && (x(e) && it(t, e), X(t, n));
 }
 function et(t) {
-  return L(t) ? t.trim().replace(/\./g, "") : "";
+  return x(t) ? t.trim().replace(/\./g, "") : "";
 }
 function R(t) {
   return t.map((e) => et(e)).filter(Boolean).join(" ");
@@ -38,7 +38,7 @@ function R(t) {
 function Wt(t) {
   return t.map((e) => e == null ? void 0 : e.trim()).filter(Boolean).map((e) => `.${e}`).join(" ");
 }
-const dt = "open", ht = "hidden";
+const dt = "open", pt = "hidden";
 function nt(t, e) {
   const n = e;
   if (Array.isArray(t)) {
@@ -50,12 +50,12 @@ function nt(t, e) {
   J(t, n), t.setAttribute("aria-modal", n ? "true" : "false");
 }
 function J(t, e) {
-  e ? (X(t, dt), it(t, ht)) : (X(t, ht), it(t, dt));
+  e ? (X(t, dt), it(t, pt)) : (X(t, pt), it(t, dt));
 }
 function Ct(t) {
   return t instanceof HTMLElement;
 }
-function O(t) {
+function D(t) {
   return typeof t == "number" && !Number.isNaN(t);
 }
 function Ut(t) {
@@ -64,7 +64,7 @@ function Ut(t) {
 function jt(t) {
   if (!Ct(t) || t.offsetParent === null || "disabled" in t && t.disabled)
     return !1;
-  const e = t.getAttribute("tabindex"), n = O(e) ? parseInt(e, 10) : -1, o = [
+  const e = t.getAttribute("tabindex"), n = D(e) ? parseInt(e, 10) : -1, o = [
     "INPUT",
     "BUTTON",
     "SELECT",
@@ -72,24 +72,24 @@ function jt(t) {
     "A",
     "AREA",
     "IFRAME"
-  ].includes(t.tagName), i = t instanceof HTMLAnchorElement && t.href !== "" || t instanceof HTMLAreaElement && t.href !== "";
-  return o || i || n > -1;
+  ].includes(t.tagName), r = t instanceof HTMLAnchorElement && t.href !== "" || t instanceof HTMLAreaElement && t.href !== "";
+  return o || r || n > -1;
 }
-var w = /* @__PURE__ */ ((t) => (t.Backdrop = "pbs-backdrop", t.Root = "pbs-root", t.Container = "pbs-container", t.GapFiller = "pbs-gap-filler", t.Handle = "pbs-handle", t.HandleBar = "pbs-handle-bar", t.ContentWrapper = "pbs-content-wrapper", t))(w || {}), at = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(at || {}), K = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(K || {});
-function M(t, e, n) {
+var E = /* @__PURE__ */ ((t) => (t.Backdrop = "pbs-backdrop", t.Root = "pbs-root", t.Container = "pbs-container", t.GapFiller = "pbs-gap-filler", t.Handle = "pbs-handle", t.HandleBar = "pbs-handle-bar", t.ContentWrapper = "pbs-content-wrapper", t))(E || {}), at = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(at || {}), K = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(K || {});
+function P(t, e, n) {
   const o = document.createElement(t);
-  return e.split(" ").forEach((i) => {
-    X(o, i);
-  }), L(n) && o.setAttribute("data-testid", n), o;
+  return e.split(" ").forEach((r) => {
+    X(o, r);
+  }), x(n) && o.setAttribute("data-testid", n), o;
 }
 Wt([
-  w.Root,
-  w.ContentWrapper
+  E.Root,
+  E.ContentWrapper
 ]);
-function pt(t, e, n, o) {
+function ht(t, e, n, o) {
   switch (o) {
     case "content-height":
-      return e >= t ? wt(t, e, n) : 0;
+      return e >= t ? Et(t, e, n) : 0;
     case "middle":
       return -(t / 2 - e);
     case "top":
@@ -106,7 +106,7 @@ function yt(t, e) {
     stayedSame: e === t
   };
 }
-function Et(t, e) {
+function wt(t, e) {
   return e < t ? -(t - e) : e - t;
 }
 function Q(t, e) {
@@ -122,12 +122,12 @@ function $t(t, e) {
 }
 function mt(t, e, n) {
   const o = t === "above";
-  return n.filter((i) => {
-    const r = i * e.viewportHeight;
-    return o ? e.visibleHeight < r : e.visibleHeight > r;
+  return n.filter((r) => {
+    const a = r * e.viewportHeight;
+    return o ? e.visibleHeight < a : e.visibleHeight > a;
   });
 }
-function wt(t, e, n) {
+function Et(t, e, n) {
   return -(t - e) + n;
 }
 function ft(t) {
@@ -140,8 +140,8 @@ function Tt(t) {
   const e = /(?<type>\w+)\((?<values>[^)]+)\)/g, n = [];
   let o;
   for (; (o = e.exec(t)) !== null; ) {
-    const i = o[1], r = o[2].split(",").map((s) => s.trim());
-    n.push({ type: i, values: r });
+    const r = o[1], a = o[2].split(",").map((i) => i.trim());
+    n.push({ type: r, values: a });
   }
   return n;
 }
@@ -168,14 +168,14 @@ function B(t) {
 function tt(t, { x: e, y: n }) {
   const {
     transform: o,
-    transformValues: i
-  } = Gt(t), r = Ht(
-    i,
+    transformValues: r
+  } = Gt(t), a = Ht(
+    r,
     st
   );
-  if (r) {
-    const s = kt(r);
-    t.style.transform = `translate(${e ?? s.x ?? 0}px,${n ?? s.y ?? 0}px)`;
+  if (a) {
+    const i = kt(a);
+    t.style.transform = `translate(${e ?? i.x ?? 0}px,${n ?? i.y ?? 0}px)`;
     return;
   }
   if (o) {
@@ -205,48 +205,48 @@ function gt(t, {
   return ct(n) && t >= n ? n : ct(e) && t <= e ? e : t;
 }
 const _t = (t, e, n) => {
-  e instanceof HTMLElement && !Ft(e, w.Handle) && n.scrollTop >= 1 || (t.isDragging = !0);
-}, Xt = (t, e, n, o) => (i) => {
-  o.startY = t.getCoordinates(i).y, o.containerStartTranslate = B(e), n.onDragStart();
-}, zt = (t, e, n, o, i) => (r) => {
+  e instanceof HTMLElement && !Ft(e, E.Handle) && n.scrollTop >= 1 || (t.isDragging = !0);
+}, Xt = (t, e, n, o) => (r) => {
+  o.startY = t.getCoordinates(r).y, o.containerStartTranslate = B(e), n.onDragStart();
+}, zt = (t, e, n, o, r) => (a) => {
   qt(
-    r,
+    a,
     t,
     n,
     o,
-    i,
+    r,
     e,
     n.marginTop
   );
 };
-function qt(t, e, n, o, i, r, s) {
-  if (!o.isDragging || !O(o.startY))
+function qt(t, e, n, o, r, a, i) {
+  if (!o.isDragging || !D(o.startY))
     return;
-  const a = e.getCoordinates(t).y, d = Et(o.startY, a), p = window.innerHeight, c = r.clientHeight, m = c - (o.containerStartTranslate.y + d);
-  if (m >= p)
+  const s = e.getCoordinates(t).y, u = wt(o.startY, s), h = window.innerHeight, c = a.clientHeight, m = c - (o.containerStartTranslate.y + u);
+  if (m >= h)
     return;
-  const C = yt(o.startY, a);
-  if (C.isUp && !n.expandable && m >= c)
+  const S = yt(o.startY, s);
+  if (S.isUp && !n.expandable && m >= c)
     return;
-  i.start(() => {
-    tt(r, {
-      y: o.containerStartTranslate.y + d
+  r.start(() => {
+    tt(a, {
+      y: o.containerStartTranslate.y + u
     });
   }, 0);
-  const l = p - s, y = c - o.containerStartTranslate.y;
-  if (C.isUp) {
-    const v = l - y, S = l - m, E = gt(
-      1 - Z(S / v, 2),
+  const l = h - i, C = c - o.containerStartTranslate.y;
+  if (S.isUp) {
+    const b = l - C, v = l - m, y = gt(
+      1 - Z(v / b, 2),
       {
         min: 0,
         max: 1
       }
     );
-    n.onDragMove(C, E);
-  } else if (C.isDown) {
-    const v = gt(
+    n.onDragMove(S, y);
+  } else if (S.isDown) {
+    const b = gt(
       Z(
-        1 - m / y,
+        1 - m / C,
         2
       ),
       {
@@ -254,68 +254,68 @@ function qt(t, e, n, o, i, r, s) {
         max: 1
       }
     );
-    n.onDragMove(C, v);
+    n.onDragMove(S, b);
   }
 }
-const Vt = (t, e, n, o, i, r, s) => (a) => {
-  if (!o.isDragging || (o.isDragging = !1, !O(o.startY)))
+const Vt = (t, e, n, o, r, a, i) => (s) => {
+  if (!o.isDragging || (o.isDragging = !1, !D(o.startY)))
     return;
   n.onDragEnd();
-  const d = o.startY, p = t.getCoordinates(a).y, c = B(e).y, m = yt(d, p), C = window.innerHeight, l = e.clientHeight;
+  const u = o.startY, h = t.getCoordinates(s).y, c = B(e).y, m = yt(u, h), S = window.innerHeight, l = e.clientHeight;
   if (m.isUp) {
-    const y = [...n.snapPoints].sort(
-      (E, k) => E - k
-    ), v = l + -c;
-    if (!n.expandable && v >= l)
+    const C = [...n.snapPoints].sort(
+      (y, L) => y - L
+    ), b = l + -c;
+    if (!n.expandable && b >= l)
       return;
-    for (const E of y) {
-      const k = E * window.innerHeight;
-      if (v <= k) {
+    for (const y of C) {
+      const L = y * window.innerHeight;
+      if (b <= L) {
         const T = Q(
-          v,
-          k
+          b,
+          L
         );
-        s.translateContainer({
+        i.translateContainer({
           startY: c,
           endY: c - T,
-          animationFrame: i,
+          animationFrame: r,
           bottomSheetContainer: e
         });
         return;
       }
     }
-    const S = wt(
-      C,
+    const v = Et(
+      S,
       l,
       n.marginTop
     );
-    s.translateContainer({
+    i.translateContainer({
       startY: c,
-      endY: S,
-      animationFrame: i,
+      endY: v,
+      animationFrame: r,
       bottomSheetContainer: e
     });
   } else if (m.isDown) {
-    const y = [...n.snapPoints].sort(
-      (v, S) => S - v
+    const C = [...n.snapPoints].sort(
+      (b, v) => v - b
     );
-    for (const v of y) {
-      const S = v * window.innerHeight, E = l + -c;
-      if (E >= S) {
-        const k = Q(
-          E,
-          S
+    for (const b of C) {
+      const v = b * window.innerHeight, y = l + -c;
+      if (y >= v) {
+        const L = Q(
+          y,
+          v
         );
-        s.translateContainer({
+        i.translateContainer({
           startY: c,
-          endY: c + k,
-          animationFrame: i,
+          endY: c + L,
+          animationFrame: r,
           bottomSheetContainer: e
         });
         return;
       }
     }
-    r();
+    a();
   }
 };
 var W = /* @__PURE__ */ ((t) => (t[t.All = -1] = "All", t[t.None = 0] = "None", t[t.Capture = 1] = "Capture", t[t.Target = 2] = "Target", t[t.Bubble = 3] = "Bubble", t))(W || {});
@@ -344,50 +344,50 @@ class G {
     onStart: e,
     onStartOptions: n = Kt,
     onMove: o,
-    onEnd: i
+    onEnd: r
   }) {
-    this.addTouchEventListeners({ onStart: e, onStartOptions: n, onMove: o, onEnd: i }), this.addMouseEventListeners({ onStart: e, onStartOptions: n, onMove: o, onEnd: i });
+    this.addTouchEventListeners({ onStart: e, onStartOptions: n, onMove: o, onEnd: r }), this.addMouseEventListeners({ onStart: e, onStartOptions: n, onMove: o, onEnd: r });
   }
   addTouchEventListeners({
     onStart: e,
     onStartOptions: n,
     onMove: o,
-    onEnd: i
+    onEnd: r
   }) {
     e && this.currentTarget.addEventListener(
       "touchstart",
-      (r) => {
+      (a) => {
         if (n.eventPhase === W.All) {
-          e(r);
+          e(a);
           return;
         }
-        bt(r.eventPhase) === n.eventPhase && e(r);
+        bt(a.eventPhase) === n.eventPhase && e(a);
       },
       {
         passive: !0
       }
-    ), o && this.currentTarget.addEventListener("touchmove", o), i && this.currentTarget.addEventListener("touchend", i);
+    ), o && this.currentTarget.addEventListener("touchmove", o), r && this.currentTarget.addEventListener("touchend", r);
   }
   addMouseEventListeners({
     onStart: e,
     onStartOptions: n,
     onMove: o,
-    onEnd: i
+    onEnd: r
   }) {
     e && this.currentTarget.addEventListener(
       "mousedown",
-      (r) => {
+      (a) => {
         if (n.eventPhase === W.All) {
-          e(r);
+          e(a);
           return;
         }
-        bt(r.eventPhase) === n.eventPhase && e(r);
+        bt(a.eventPhase) === n.eventPhase && e(a);
       },
       {
         passive: !0
       }
-    ), o && this.currentTarget.addEventListener("mousemove", o), i && this.currentTarget.addEventListener("mouseup", (r) => {
-      i(r);
+    ), o && this.currentTarget.addEventListener("mousemove", o), r && this.currentTarget.addEventListener("mouseup", (a) => {
+      r(a);
     });
   }
   removeEventListeners({
@@ -437,79 +437,79 @@ function Jt(t, e) {
   Zt(n), n.bottomSheetContainer.style.width = t.width;
   const o = document.createElement("div");
   o.innerHTML = t.content ?? "";
-  const i = window.innerHeight;
-  n.bottomSheetContainer.style.maxHeight = `${i}px`, n.bottomSheetContentWrapper.appendChild(o);
-  const r = te({
+  const r = window.innerHeight;
+  n.bottomSheetContainer.style.maxHeight = `${r}px`, n.bottomSheetContentWrapper.appendChild(o);
+  const a = te({
     bottomSheetElements: n,
     bottomSheetProps: t,
     options: e
   });
-  return { elements: n, eventHandlers: r };
+  return { elements: n, eventHandlers: a };
 }
 function Qt(t) {
-  const e = M(
+  const e = P(
     "dialog",
     R([
-      w.Root,
+      E.Root,
       at.Dialog,
       t.rootClass
     ]),
-    w.Root
+    E.Root
   );
   e.ariaLabel = t.ariaLabel;
-  const n = M(
+  const n = P(
     "section",
-    R([w.Container, t.containerClass]),
-    w.Container
+    R([E.Container, t.containerClass]),
+    E.Container
   );
   t.containerBorderRadius && (n.style.borderRadius = Lt(
     t.containerBorderRadius
   ));
-  const o = M(
+  const o = P(
     "div",
-    w.GapFiller,
-    w.GapFiller
-  ), i = M(
+    E.GapFiller,
+    E.GapFiller
+  ), r = P(
     "button",
     R([
-      w.Handle,
+      E.Handle,
       at.Button,
       t.shouldShowHandle ? null : K.Hidden,
       t.handleClass
     ]),
-    w.Handle
+    E.Handle
   );
-  i.setAttribute("type", "button"), i.ariaLabel = "bottom sheet close button";
-  const r = M(
+  r.setAttribute("type", "button"), r.ariaLabel = "bottom sheet close button";
+  const a = P(
     "span",
     R([
-      w.HandleBar,
+      E.HandleBar,
       t.shouldShowHandle ? null : K.Hidden
     ]),
-    w.HandleBar
-  ), s = M(
+    E.HandleBar
+  ), i = P(
     "article",
     R([
-      w.ContentWrapper,
+      E.ContentWrapper,
       t.contentWrapperClass
     ]),
-    w.ContentWrapper
-  ), a = M(
+    E.ContentWrapper
+  ), s = P(
     "div",
     R([
-      w.Backdrop,
+      E.Backdrop,
       t.backdropClass,
       K.Hidden
     ]),
-    w.Backdrop
+    E.Backdrop
   );
-  return t.backdropColor && (a.style.backgroundColor = t.backdropColor), t.backDropTransition && (a.style.transition = t.backDropTransition), {
+  return t.backdropColor && (s.style.backgroundColor = t.backdropColor), t.backDropTransition && (s.style.transition = t.backDropTransition), {
     bottomSheetRoot: e,
-    bottomSheetBackdrop: a,
+    bottomSheetBackdrop: s,
     bottomSheetContainer: n,
-    bottomSheetHandle: i,
-    bottomSheetHandleBar: r,
-    bottomSheetContentWrapper: s,
+    bottomSheetHandle: r,
+    bottomSheetHandleBar: a,
+    bottomSheetContentWrapper: i,
     bottomSheetContainerGapFiller: o
   };
 }
@@ -518,10 +518,10 @@ function Zt({
   bottomSheetContainer: e,
   bottomSheetHandle: n,
   bottomSheetHandleBar: o,
-  bottomSheetContentWrapper: i,
-  bottomSheetContainerGapFiller: r
+  bottomSheetContentWrapper: r,
+  bottomSheetContainerGapFiller: a
 }) {
-  t.appendChild(e), n.appendChild(o), e.appendChild(n), e.appendChild(i), e.appendChild(r);
+  t.appendChild(e), n.appendChild(o), e.appendChild(n), e.appendChild(r), e.appendChild(a);
 }
 function te({
   bottomSheetElements: t,
@@ -530,111 +530,112 @@ function te({
 }) {
   const {
     bottomSheetRoot: o,
-    bottomSheetContainer: i,
-    bottomSheetHandle: r,
-    bottomSheetContainerGapFiller: s,
-    bottomSheetContentWrapper: a,
-    bottomSheetBackdrop: d
-  } = t, { animationFrame: p } = n, c = new G(r), m = new G(
-    a
-  ), C = new G(
+    bottomSheetContainer: r,
+    bottomSheetHandle: a,
+    bottomSheetContainerGapFiller: i,
+    bottomSheetContentWrapper: s,
+    bottomSheetBackdrop: u
+  } = t, { animationFrame: h } = n, c = new G(a), m = new G(
     s
+  ), S = new G(
+    i
   ), l = e.dragTriggers.reduce(
-    (b, A) => {
-      const D = o.querySelectorAll(A);
-      if (!D.length)
-        return b;
-      const h = Array.from(D).map((u) => u instanceof HTMLElement ? new G(u) : null).filter((u) => !!u);
-      return [...b, ...h];
+    (k, O) => {
+      const w = o.querySelectorAll(O);
+      if (!w.length)
+        return k;
+      const p = Array.from(w).map((d) => d instanceof HTMLElement ? new G(d) : null).filter((d) => !!d);
+      return [...k, ...p];
     },
     []
-  ), y = new G(
+  ), C = new G(
     window
-  ), v = Xt(
-    y,
-    i,
+  ), b = Xt(
+    C,
+    r,
     e,
     n.draggingState
-  ), S = zt(
-    y,
-    i,
+  ), v = zt(
+    C,
+    r,
     e,
     n.draggingState,
-    p
-  ), E = Vt(
-    y,
-    i,
+    h
+  ), y = Vt(
+    C,
+    r,
     e,
     n.draggingState,
-    p,
+    h,
     n.onClose,
     n.bottomSheetState
   );
-  function k(b) {
-    b.target instanceof Element && !o.contains(b.target) && n.onClose();
+  function L(k) {
+    k.target instanceof Element && !o.contains(k.target) && n.onClose();
   }
-  function T(b) {
+  function T(k) {
     _t(
       n.draggingState,
-      b.target,
+      k.target,
       t.bottomSheetContentWrapper
     );
   }
-  function P() {
-    e.draggable && (c.addEventListeners({
+  function M(k) {
+    const O = k ?? e;
+    O.draggable && (c.addEventListeners({
       onStart: T
-    }), l.forEach((b) => {
-      b.addEventListeners({
+    }), l.forEach((w) => {
+      w.addEventListeners({
         onStart: T,
         onStartOptions: {
           eventPhase: W.Target
         }
       });
-    })), e.draggable && e.backgroundDraggable && (m.addEventListeners({
+    })), O.draggable && O.backgroundDraggable && (m.addEventListeners({
       onStart: T,
       onStartOptions: {
         eventPhase: W.Target
       }
-    }), C.addEventListeners({
+    }), S.addEventListeners({
       onStart: T
-    })), e.draggable && y.addEventListeners({
-      onStart: v,
-      onMove: S,
-      onEnd: E
-    }), e.draggable && window.document.addEventListener("keyup", (b) => {
-      b.key === "Escape" && n.onClose();
-    }), r.addEventListener("keyup", (b) => {
-      if (b.key === "ArrowUp") {
+    })), O.draggable && C.addEventListeners({
+      onStart: b,
+      onMove: v,
+      onEnd: y
+    }), O.draggable && window.document.addEventListener("keyup", (w) => {
+      w.key === "Escape" && n.onClose();
+    }), a.addEventListener("keyup", (w) => {
+      if (w.key === "ArrowUp") {
         n.moveUp();
         return;
       }
-      if (b.key === "ArrowDown") {
+      if (w.key === "ArrowDown") {
         n.moveDown();
         return;
       }
-      if (b.shiftKey && b.key === "Tab") {
-        const A = Y(
+      if (w.shiftKey && w.key === "Tab") {
+        const p = Y(
           t.bottomSheetContentWrapper
         );
-        Ut(A);
+        Ut(p);
       }
     });
   }
   function z() {
-    e.shouldCloseOnOutsideClick ? d.addEventListener("click", k) : d.style.pointerEvents = "none";
+    e.shouldCloseOnOutsideClick ? u.addEventListener("click", L) : u.style.pointerEvents = "none";
   }
   function j() {
-    d.removeEventListener("click", k);
+    u.removeEventListener("click", L);
   }
-  function Y(b) {
-    let A = [...Array.from(b.childNodes).reverse()];
-    for (; A.length; ) {
-      const D = A.shift();
-      if (jt(D))
-        return D;
-      D && (A = [
-        ...A,
-        ...Array.from(D.childNodes).reverse()
+  function Y(k) {
+    let O = [...Array.from(k.childNodes).reverse()];
+    for (; O.length; ) {
+      const w = O.shift();
+      if (jt(w))
+        return w;
+      w && (O = [
+        ...O,
+        ...Array.from(w.childNodes).reverse()
       ]);
     }
     return null;
@@ -644,20 +645,20 @@ function te({
       onStart: T
     }), m.removeEventListeners({
       onStart: T
-    }), C.removeEventListeners({
+    }), S.removeEventListeners({
       onStart: T
-    }), l.forEach((b) => {
-      b.removeEventListeners({
+    }), l.forEach((k) => {
+      k.removeEventListeners({
         onStart: T
       });
-    }), y.removeEventListeners({
-      onStart: v,
-      onMove: S,
-      onEnd: E
+    }), C.removeEventListeners({
+      onStart: b,
+      onMove: v,
+      onEnd: y
     });
   }
   return {
-    attachEventListeners: P,
+    attachEventListeners: M,
     clearEventListeners: q,
     attacheOnOpenEventListeners: z,
     clearOnOpenEventListeners: j
@@ -674,15 +675,15 @@ class ee {
    */
   start(e, n, o = !1) {
     this.isInProgress = !0;
-    const i = (r) => {
-      this.startedAt || (this.startedAt = r);
-      const s = r - this.startedAt, a = n === 0 ? 1 : Z(s / n, 2), d = a >= 1 && !o;
-      e(a), d ? this.stop() : this.animationId = requestAnimationFrame(i);
+    const r = (a) => {
+      this.startedAt || (this.startedAt = a);
+      const i = a - this.startedAt, s = n === 0 ? 1 : Z(i / n, 2), u = s >= 1 && !o;
+      e(s), u ? this.stop() : this.animationId = requestAnimationFrame(r);
     };
-    this.animationId = requestAnimationFrame(i);
+    this.animationId = requestAnimationFrame(r);
   }
   stop() {
-    this.isInProgress = !1, this.startedAt = null, O(this.animationId) && cancelAnimationFrame(this.animationId);
+    this.isInProgress = !1, this.startedAt = null, D(this.animationId) && cancelAnimationFrame(this.animationId);
   }
 }
 function ne(t) {
@@ -690,18 +691,18 @@ function ne(t) {
     startY: e,
     endY: n,
     bottomSheetContainer: o,
-    animationFrame: i,
-    onEnd: r,
-    animationTimingFunction: s,
-    animationDuration: a
-  } = t, d = Et(e, n);
-  i.stop();
-  let p = !1;
-  i.start((c) => {
+    animationFrame: r,
+    onEnd: a,
+    animationTimingFunction: i,
+    animationDuration: s
+  } = t, u = wt(e, n);
+  r.stop();
+  let h = !1;
+  r.start((c) => {
     tt(o, {
-      y: e + d * s(c)
-    }), !p && c >= 1 && (r == null || r(), p = !0);
-  }, a);
+      y: e + u * i(c)
+    }), !h && c >= 1 && (a == null || a(), h = !0);
+  }, s);
 }
 const lt = (t, e) => (n) => {
   ne({
@@ -716,12 +717,12 @@ const lt = (t, e) => (n) => {
   CLOSED: "closed"
 };
 function oe(t) {
-  return !(!O(t) || t > 1 || t < 0);
+  return !(!D(t) || t > 1 || t < 0);
 }
 function re(t, e) {
   const n = {
-    set(o, i, r, s) {
-      return e(i, r), Reflect.set(o, i, r, s);
+    set(o, r, a, i) {
+      return e(r, a), Reflect.set(o, r, a, i);
     }
   };
   return new Proxy(t, n);
@@ -743,28 +744,28 @@ function ae(t) {
   return !1;
 }
 function Ot(t) {
-  return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t && O(t.p1x) && O(t.p1y) && O(t.p2x) && O(t.p2y));
+  return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t && D(t.p1x) && D(t.p1y) && D(t.p2x) && D(t.p2y));
 }
 function U(t, e, n, o) {
-  return function(a) {
-    return s(i(a));
+  return function(s) {
+    return i(r(s));
   };
-  function i(a) {
-    let d = 0, p = 1, c = a, m;
-    if (a === 0 || a === 1)
-      return a;
-    for (; d < p; ) {
-      if (m = r(c), Math.abs(m - a) < 1e-3)
+  function r(s) {
+    let u = 0, h = 1, c = s, m;
+    if (s === 0 || s === 1)
+      return s;
+    for (; u < h; ) {
+      if (m = a(c), Math.abs(m - s) < 1e-3)
         return c;
-      a > m ? d = c : p = c, c = (p + d) / 2;
+      s > m ? u = c : h = c, c = (h + u) / 2;
     }
     return c;
   }
-  function r(a) {
-    return 3 * t * a * Math.pow(1 - a, 2) + 3 * n * Math.pow(a, 2) * (1 - a) + Math.pow(a, 3);
+  function a(s) {
+    return 3 * t * s * Math.pow(1 - s, 2) + 3 * n * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
   }
-  function s(a) {
-    return 3 * e * a * Math.pow(1 - a, 2) + 3 * o * Math.pow(a, 2) * (1 - a) + Math.pow(a, 3);
+  function i(s) {
+    return 3 * e * s * Math.pow(1 - s, 2) + 3 * o * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
   }
 }
 const vt = U(0.25, 0.1, 0.25, 1), se = U(0.42, 0, 1, 1), xt = U(0.42, 0, 0.58, 1), ce = U(0.4, 0.1, 0.6, 1), le = U(0.45, 1.5, 0.55, 1);
@@ -826,13 +827,13 @@ const de = {
   draggingAnimationTimings: "ease-in-out",
   draggingAnimationDuration: 180
 };
-function he(t) {
+function pe(t) {
   const e = {
     ...de
   }, n = Object.entries(t).reduce(
-    (o, i) => {
-      const [r, s] = i;
-      return ct(s) && (o[r] = s), o;
+    (o, r) => {
+      const [a, i] = r;
+      return ct(i) && (o[a] = i), o;
     },
     {}
   );
@@ -843,106 +844,112 @@ function he(t) {
 }
 function ut(t) {
   if (Ot(t)) {
-    const { p1x: e, p1y: n, p2x: o, p2y: i } = t;
-    return U(e, n, o, i);
+    const { p1x: e, p1y: n, p2x: o, p2y: r } = t;
+    return U(e, n, o, r);
   }
   return ae(t) ? ue(t) : xt;
 }
-function pe(t, e, n) {
-  function o(i, r) {
-    switch (i) {
+function he(t, e, n, o) {
+  function r(a, i) {
+    switch (a) {
       case "content":
-        L(r) && (t.bottomSheetContentWrapper.innerHTML = r);
+        x(i) && (t.bottomSheetContentWrapper.innerHTML = i);
         break;
       case "width":
-        L(r) && (t.bottomSheetContainer.style.width = r);
+        x(i) && (t.bottomSheetContainer.style.width = i);
         break;
       case "shouldShowHandle":
-        St(r) || J(t.bottomSheetHandle, !1);
+        St(i) || J(t.bottomSheetHandle, !1);
         break;
       case "shouldShowBackdrop":
-        St(r) || J(t.bottomSheetBackdrop, !1);
+        St(i) || J(t.bottomSheetBackdrop, !1);
         break;
       case "containerBorderRadius":
-        L(r) && (t.bottomSheetContainer.style.borderRadius = Lt(r));
+        x(i) && (t.bottomSheetContainer.style.borderRadius = Lt(i));
         break;
       case "backdropColor":
-        L(r) && (t.bottomSheetBackdrop.style.backgroundColor = r);
+        x(i) && (t.bottomSheetBackdrop.style.backgroundColor = i);
         break;
       case "backDropTransition":
-        L(r) && (t.bottomSheetBackdrop.style.transition = r);
+        x(i) && (t.bottomSheetBackdrop.style.transition = i);
         break;
       case "rootClass":
-        if (!L(r))
+        if (!x(i))
           return;
         $(
           t.bottomSheetRoot,
           n.rootClass,
-          r
+          i
         );
         break;
       case "containerClass":
-        if (!L(r))
+        if (!x(i))
           return;
         $(
           t.bottomSheetContainer,
           n.containerClass,
-          r
+          i
         );
         break;
       case "handleClass":
-        if (!L(r))
+        if (!x(i))
           return;
         $(
           t.bottomSheetHandle,
           n.handleClass,
-          r
+          i
         );
         break;
       case "contentWrapperClass":
-        if (!L(r))
+        if (!x(i))
           return;
         $(
           t.bottomSheetContentWrapper,
           n.contentWrapperClass,
-          r
+          i
         );
         break;
       case "backdropClass":
-        if (!L(r))
+        if (!x(i))
           return;
         $(
           t.bottomSheetBackdrop,
           n.backdropClass,
-          r
+          i
         );
         break;
+      case "expandable":
+        o.clearEventListeners(), o.attachEventListeners(n);
+        break;
+      case "draggable":
+        o.clearEventListeners(), o.attachEventListeners(n);
+        break;
       case "draggingAnimationTimings":
-        if (Ot(r)) {
-          const s = ut(r), a = lt(
+        if (Ot(i)) {
+          const s = ut(i), u = lt(
             s,
             n.draggingAnimationDuration
           );
-          e.translateContainer = a;
+          e.translateContainer = u;
         }
         break;
       case "draggingAnimationDuration":
-        if (O(r)) {
+        if (D(i)) {
           const s = ut(
             n.draggingAnimationTimings
-          ), a = lt(
+          ), u = lt(
             s,
-            r
+            i
           );
-          e.translateContainer = a;
+          e.translateContainer = u;
         }
         break;
     }
   }
-  return o;
+  return r;
 }
 function me(t) {
-  const e = he(t), n = ut(
+  const e = pe(t), n = ut(
     t.draggingAnimationTimings
   ), o = {
     isMounted: !1,
@@ -950,7 +957,7 @@ function me(t) {
       n,
       e.draggingAnimationDuration
     )
-  }, i = {
+  }, r = {
     startY: null,
     containerStartTranslate: {
       x: 0,
@@ -960,45 +967,50 @@ function me(t) {
     originalDocumentOverflowY: null,
     originalDocumentOverscrollBehavior: null
   };
-  function r() {
-    i.originalDocumentOverflowY && i.originalDocumentOverflowY !== "hidden" && (document.body.style.overflowY = i.originalDocumentOverflowY), i.originalDocumentOverscrollBehavior && (document.body.style.position = i.originalDocumentOverscrollBehavior);
+  function a() {
+    r.originalDocumentOverflowY && r.originalDocumentOverflowY !== "hidden" && (document.body.style.overflowY = r.originalDocumentOverflowY), r.originalDocumentOverscrollBehavior && (document.body.style.position = r.originalDocumentOverscrollBehavior);
   }
-  const s = new ee(), a = {
-    animationFrame: s,
-    onClose: E,
+  const i = new ee(), s = {
+    animationFrame: i,
+    onClose: y,
     bottomSheetState: o,
-    draggingState: i,
-    snapTo: D,
-    moveUp: b,
-    moveDown: A
-  }, { elements: d, eventHandlers: p } = Jt(
+    draggingState: r,
+    snapTo: w,
+    moveUp: k,
+    moveDown: O
+  }, { elements: u, eventHandlers: h } = Jt(
     e,
-    a
+    s
   ), c = re(
     e,
-    pe(d, o, e)
-  ), { bottomSheetBackdrop: m, bottomSheetRoot: C, bottomSheetContainer: l } = d, y = (h) => {
-    const u = h ?? window.document.body;
-    u.appendChild(C), u.appendChild(m);
+    he(
+      u,
+      o,
+      e,
+      h
+    )
+  ), { bottomSheetBackdrop: m, bottomSheetRoot: S, bottomSheetContainer: l } = u, C = (p) => {
+    const d = p ?? window.document.body;
+    d.appendChild(S), d.appendChild(m);
     const f = window.innerHeight;
     tt(l, {
       y: f
-    }), p.attachEventListeners(), o.isMounted = !0;
+    }), h.attachEventListeners(), o.isMounted = !0;
+  }, b = () => {
+    h.clearEventListeners(), Object.values(u).forEach((p) => {
+      p.remove();
+    }), a(), o.isMounted = !1;
   }, v = () => {
-    p.clearEventListeners(), Object.values(d).forEach((h) => {
-      h.remove();
-    }), r(), o.isMounted = !1;
-  }, S = () => {
-    var h;
-    if (k() || ie(
+    var p;
+    if (L() || ie(
       'Bottom Sheet is not mounted yet. call the "mount" method first.'
-    ), (h = t.beforeOpen) == null || h.call(t), T())
+    ), (p = t.beforeOpen) == null || p.call(t), T())
       return;
     nt(m, !0), c.shouldShowBackdrop || X(m, "transparent"), nt([l], !0), tt(l, {
       y: l.clientHeight
     });
-    const u = window.innerHeight, f = pt(
-      u,
+    const d = window.innerHeight, f = ht(
+      d,
       l.clientHeight,
       c.marginTop,
       c.defaultPosition
@@ -1006,75 +1018,75 @@ function me(t) {
     o.translateContainer({
       startY: g,
       endY: f,
-      animationFrame: s,
+      animationFrame: i,
       bottomSheetContainer: l,
       onEnd: t.afterOpen
     });
     const H = document.body.style.overflowY;
-    i.originalDocumentOverflowY = H || "initial";
-    const x = document.body.style.overscrollBehavior;
-    i.originalDocumentOverscrollBehavior = x || "initial", document.body.style.overflow = "hidden", document.body.style.overscrollBehavior = "contain", d.bottomSheetHandle.focus(), p.attacheOnOpenEventListeners();
+    r.originalDocumentOverflowY = H || "initial";
+    const A = document.body.style.overscrollBehavior;
+    r.originalDocumentOverscrollBehavior = A || "initial", document.body.style.overflow = "hidden", document.body.style.overscrollBehavior = "contain", u.bottomSheetHandle.focus(), h.attacheOnOpenEventListeners();
   };
-  function E() {
-    var h;
-    if (P())
+  function y() {
+    var p;
+    if (M())
       return;
-    (h = t.beforeClose) == null || h.call(t);
-    const u = B(l).y, f = l.clientHeight;
+    (p = t.beforeClose) == null || p.call(t);
+    const d = B(l).y, f = l.clientHeight;
     o.translateContainer({
-      startY: u,
+      startY: d,
       endY: f,
-      animationFrame: s,
+      animationFrame: i,
       bottomSheetContainer: l,
       onEnd: () => {
         var g;
-        (g = t.afterClose) == null || g.call(t), nt([m, l], !1), p.clearOnOpenEventListeners();
+        (g = t.afterClose) == null || g.call(t), nt([m, l], !1), h.clearOnOpenEventListeners();
       }
-    }), r();
+    }), a();
   }
-  function k() {
+  function L() {
     return o.isMounted;
   }
   function T() {
-    const h = B(l).y, u = window.innerHeight, f = l.clientHeight >= u ? u : l.clientHeight;
-    return h <= f;
+    const p = B(l).y, d = window.innerHeight, f = l.clientHeight >= d ? d : l.clientHeight;
+    return p <= f;
   }
-  function P() {
+  function M() {
     return !T();
   }
   function z() {
-    const h = B(l).y, u = l.clientHeight, f = window.innerHeight;
-    if (h <= 5 && h >= -5)
+    const p = B(l).y, d = l.clientHeight, f = window.innerHeight;
+    if (p <= 5 && p >= -5)
       return F.CONTENT_HEIGHT;
-    const g = u - h;
+    const g = d - p;
     if (g === f / 2)
       return F.MIDDLE;
-    const H = f - c.marginTop, x = 10;
-    return g <= H + x && g >= H - x ? F.TOP : F.CLOSED;
+    const H = f - c.marginTop, A = 10;
+    return g <= H + A && g >= H - A ? F.TOP : F.CLOSED;
   }
   function j() {
     return l.clientHeight;
   }
-  function Y(h) {
+  function Y(p) {
     if (!T())
       return;
-    const u = B(l).y, f = l.clientHeight - u, g = window.innerHeight - h, H = $t(f, g), x = Q(f, g);
+    const d = B(l).y, f = l.clientHeight - d, g = window.innerHeight - p, H = $t(f, g), A = Q(f, g);
     o.translateContainer({
-      startY: u,
-      endY: u + (H.isUp ? -x : x),
-      animationFrame: s,
+      startY: d,
+      endY: d + (H.isUp ? -A : A),
+      animationFrame: i,
       bottomSheetContainer: l
     });
   }
-  function q(h, {
-    viewportHeight: u,
+  function q(p, {
+    viewportHeight: d,
     visibleHeight: f
   }) {
     let g = null;
-    for (const H of h) {
-      const x = H * u, I = Q(
+    for (const H of p) {
+      const A = H * d, I = Q(
         f,
-        x
+        A
       );
       (g === null || I < g) && (g = I);
     }
@@ -1082,82 +1094,82 @@ function me(t) {
       minOffset: g
     };
   }
-  function b() {
-    const h = [...c.snapPoints].reverse(), u = B(l).y, f = l.clientHeight, g = f - u;
+  function k() {
+    const p = [...c.snapPoints].reverse(), d = B(l).y, f = l.clientHeight, g = f - d;
     if (!c.expandable && g >= f)
       return;
-    const H = window.innerHeight, x = mt(
+    const H = window.innerHeight, A = mt(
       "above",
       { visibleHeight: g, viewportHeight: H },
-      h
-    ), { minOffset: I } = q(x, {
+      p
+    ), { minOffset: I } = q(A, {
       visibleHeight: g,
       viewportHeight: H
     });
     if (I === null && g < H - c.marginTop) {
       o.translateContainer({
-        startY: u,
-        endY: pt(
+        startY: d,
+        endY: ht(
           H,
           f,
           c.marginTop,
           "top"
         ),
-        animationFrame: s,
+        animationFrame: i,
         bottomSheetContainer: l
       });
       return;
     }
-    O(I) && o.translateContainer({
-      startY: u,
-      endY: u - I,
-      animationFrame: s,
+    D(I) && o.translateContainer({
+      startY: d,
+      endY: d - I,
+      animationFrame: i,
       bottomSheetContainer: l
     });
   }
-  function A() {
-    const h = B(l).y, u = l.clientHeight - h;
-    if (u < 1)
+  function O() {
+    const p = B(l).y, d = l.clientHeight - p;
+    if (d < 1)
       return;
     const f = window.innerHeight, g = mt(
       "below",
-      { visibleHeight: u, viewportHeight: f },
+      { visibleHeight: d, viewportHeight: f },
       c.snapPoints
     ), { minOffset: H } = q(g, {
-      visibleHeight: u,
+      visibleHeight: d,
       viewportHeight: f
     });
-    O(H) && o.translateContainer({
-      startY: h,
-      endY: h + H,
-      animationFrame: s,
+    D(H) && o.translateContainer({
+      startY: p,
+      endY: p + H,
+      animationFrame: i,
       bottomSheetContainer: l
     });
   }
-  function D(h) {
-    const u = window.innerHeight;
-    if (!oe(h))
+  function w(p) {
+    const d = window.innerHeight;
+    if (!oe(p))
       return;
-    const f = Z(u * h, 2);
+    const f = Z(d * p, 2);
     Y(f);
   }
   return {
     props: c,
-    elements: d,
-    mount: y,
-    unmount: v,
-    open: S,
-    close: E,
-    getIsMounted: k,
+    elements: u,
+    mount: C,
+    unmount: b,
+    open: v,
+    close: y,
+    getIsMounted: L,
     getIsOpen: T,
-    getIsClosed: P,
+    getIsClosed: M,
     getPosition: z,
     getHeight: j,
     moveTo: Y,
-    snapTo: D
+    snapTo: w
   };
 }
-function At() {
+function Dt() {
   return {
     elements: {
       bottomSheetRoot: void 0,
@@ -1190,115 +1202,115 @@ function At() {
     }
   };
 }
-const fe = At(), Se = Dt(
+const fe = Dt(), Se = At(
   function(e, n) {
     const {
       children: o,
-      isOpen: i,
-      setIsOpen: r,
-      afterClose: s,
-      mountingPointRef: a,
-      ...d
-    } = e, p = ot(fe), [c, m] = rt(
-      p.current
+      isOpen: r,
+      setIsOpen: a,
+      afterClose: i,
+      mountingPointRef: s,
+      ...u
+    } = e, h = ot(fe), [c, m] = rt(
+      h.current
     );
     Bt(
       n,
       () => c,
       [c]
     );
-    const C = Mt(() => {
-      r(!1), s == null || s();
-    }, [s]);
-    _(() => {
-      i ? c.open() : c.close();
+    const S = Pt(() => {
+      a(!1), i == null || i();
     }, [i]);
+    _(() => {
+      r ? c.open() : c.close();
+    }, [r]);
     const l = ot(null);
     return _(
       function() {
-        var E;
-        if (a && !a.current)
+        var y;
+        if (s && !s.current)
           return;
-        const v = It((E = e.mountingPointRef) == null ? void 0 : E.current) ? e.mountingPointRef.current : window.document.body;
-        if (!v || c.getIsMounted())
+        const b = It((y = e.mountingPointRef) == null ? void 0 : y.current) ? e.mountingPointRef.current : window.document.body;
+        if (!b || c.getIsMounted())
           return;
-        const S = me({
+        const v = me({
           content: "",
-          ...d,
-          afterClose: C
+          ...u,
+          afterClose: S
         });
-        return S.mount(v), l.current = S.elements.bottomSheetContentWrapper ?? null, p.current = S, m(S), () => {
+        return v.mount(b), l.current = v.elements.bottomSheetContentWrapper ?? null, h.current = v, m(v), () => {
           c.unmount();
         };
       },
-      [e.mountingPointRef, d, C]
+      [e.mountingPointRef, u, S]
     ), _(
       function() {
-        Object.assign(p.current.props, {
-          ...d
-        }), m(p.current);
+        Object.assign(h.current.props, {
+          ...u
+        }), m(h.current);
       },
-      [d]
+      [u]
     ), _(function() {
       return () => {
-        p.current.unmount();
+        h.current.unmount();
       };
     }, []), l.current ? Yt(
       e.children,
       l.current
     ) : null;
   }
-), ge = At();
+), ge = Dt();
 function Ce(t = {}) {
-  const e = ot(ge), [n, o] = rt(!1), [i, r] = rt(e.current);
+  const e = ot(ge), [n, o] = rt(!1), [r, a] = rt(e.current);
   _(() => {
-    r(e.current);
+    a(e.current);
   }, [e.current]);
   const {
-    beforeOpen: s,
-    afterOpen: a,
-    beforeClose: d,
-    afterClose: p,
+    beforeOpen: i,
+    afterOpen: s,
+    beforeClose: u,
+    afterClose: h,
     onDragStart: c,
     onDragMove: m,
-    onDragEnd: C,
+    onDragEnd: S,
     ...l
-  } = t, y = () => {
-    s == null || s();
+  } = t, C = () => {
+    i == null || i();
+  }, b = () => {
+    s == null || s(), o(!0);
   }, v = () => {
-    a == null || a(), o(!0);
-  }, S = () => {
-    d == null || d();
-  }, E = () => {
-    p == null || p(), o(!1);
-  }, k = () => {
+    u == null || u();
+  }, y = () => {
+    h == null || h(), o(!1);
+  }, L = () => {
     c == null || c();
   }, T = (j, Y) => {
     m == null || m(j, Y);
-  }, P = () => {
-    C == null || C();
+  }, M = () => {
+    S == null || S();
   };
   return {
-    props: Pt(() => ({
+    props: Mt(() => ({
       ref: e,
       isOpen: n,
       setIsOpen: o,
-      beforeOpen: y,
-      afterOpen: v,
-      beforeClose: S,
-      afterClose: E,
-      onDragStart: k,
+      beforeOpen: C,
+      afterOpen: b,
+      beforeClose: v,
+      afterClose: y,
+      onDragStart: L,
       onDragMove: T,
-      onDragEnd: P,
+      onDragEnd: M,
       ...l
     }), [e.current, n, o, t]),
-    instance: i,
+    instance: r,
     isOpen: n,
     setIsOpen: o
   };
 }
 export {
   Se as BottomSheet,
-  At as createPlaceholderBottomSheet,
+  Dt as createPlaceholderBottomSheet,
   Ce as useBottomSheet
 };