@plainsheet/react 0.4.5 → 0.4.8

package/dist/plainsheet-react.es.js

@@ -1,4 +1,4 @@
-import { forwardRef as At, useRef as ot, useState as rt, useImperativeHandle as Bt, useCallback as Pt, useEffect as _, useMemo as Mt } from "react";
+import { forwardRef as Bt, useRef as rt, useState as at, useImperativeHandle as Mt, useCallback as z, useEffect as q, useMemo as Pt } from "react";
 import { createPortal as Yt } from "react-dom";
 function It(t) {
   return t != null;
@@ -13,58 +13,58 @@ function It(t) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-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);
+var Rt = Object.defineProperty, Wt = (t, e, n) => e in t ? Rt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, J = (t, e, n) => Wt(t, typeof e != "symbol" ? e + "" : e, n);
 function x(t) {
   return typeof t == "string";
 }
-function Ft(t, e) {
-  return t.classList.contains(et(e));
+function Nt(t, e) {
+  return t.classList.contains(nt(e));
 }
-function X(t, e) {
-  t.classList.add(et(e));
+function K(t, e) {
+  t.classList.add(nt(e));
 }
 function it(t, e) {
-  t.classList.remove(et(e));
+  t.classList.remove(nt(e));
 }
-function $(t, e, n) {
-  x(n) && (x(e) && it(t, e), X(t, n));
+function _(t, e, n) {
+  x(n) && (x(e) && it(t, e), K(t, n));
 }
-function et(t) {
+function nt(t) {
   return x(t) ? t.trim().replace(/\./g, "") : "";
 }
-function R(t) {
-  return t.map((e) => et(e)).filter(Boolean).join(" ");
+function W(t) {
+  return t.map((e) => nt(e)).filter(Boolean).join(" ");
 }
-function Wt(t) {
+function Ft(t) {
   return t.map((e) => e == null ? void 0 : e.trim()).filter(Boolean).map((e) => `.${e}`).join(" ");
 }
-const dt = "open", pt = "hidden";
-function nt(t, e) {
+const pt = "open", ht = "hidden";
+function ot(t, e) {
   const n = e;
   if (Array.isArray(t)) {
     t.forEach((o) => {
-      J(o, n), o.setAttribute("aria-modal", n ? "true" : "false");
+      Z(o, n), o.setAttribute("aria-modal", n ? "true" : "false");
     });
     return;
   }
-  J(t, n), t.setAttribute("aria-modal", n ? "true" : "false");
+  Z(t, n), t.setAttribute("aria-modal", n ? "true" : "false");
 }
-function J(t, e) {
-  e ? (X(t, dt), it(t, pt)) : (X(t, pt), it(t, dt));
+function Z(t, e) {
+  e ? (K(t, pt), it(t, ht)) : (K(t, ht), it(t, pt));
 }
 function Ct(t) {
   return t instanceof HTMLElement;
 }
-function D(t) {
+function A(t) {
   return typeof t == "number" && !Number.isNaN(t);
 }
-function Ut(t) {
+function jt(t) {
   Ct(t) && t.focus();
 }
-function jt(t) {
+function Ut(t) {
   if (!Ct(t) || t.offsetParent === null || "disabled" in t && t.disabled)
     return !1;
-  const e = t.getAttribute("tabindex"), n = D(e) ? parseInt(e, 10) : -1, o = [
+  const e = t.getAttribute("tabindex"), n = A(e) ? parseInt(e, 10) : -1, o = [
     "INPUT",
     "BUTTON",
     "SELECT",
@@ -75,21 +75,21 @@ function jt(t) {
   ].includes(t.tagName), r = t instanceof HTMLAnchorElement && t.href !== "" || t instanceof HTMLAreaElement && t.href !== "";
   return o || r || n > -1;
 }
-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) {
+var T = /* @__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))(T || {}), st = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(st || {}), Q = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(Q || {});
+function M(t, e, n) {
   const o = document.createElement(t);
   return e.split(" ").forEach((r) => {
-    X(o, r);
+    K(o, r);
   }), x(n) && o.setAttribute("data-testid", n), o;
 }
-Wt([
-  E.Root,
-  E.ContentWrapper
+Ft([
+  T.Root,
+  T.ContentWrapper
 ]);
-function ht(t, e, n, o) {
+function mt(t, e, n, o) {
   switch (o) {
     case "content-height":
-      return e >= t ? Et(t, e, n) : 0;
+      return e >= t ? Tt(t, e, n) : 0;
     case "middle":
       return -(t / 2 - e);
     case "top":
@@ -98,7 +98,7 @@ function ht(t, e, n, o) {
       return 0;
   }
 }
-function yt(t, e) {
+function Et(t, e) {
   const n = e < t, o = e > t;
   return {
     isUp: n,
@@ -109,7 +109,7 @@ function yt(t, e) {
 function wt(t, e) {
   return e < t ? -(t - e) : e - t;
 }
-function Q(t, e) {
+function V(t, e) {
   return t > e ? t - e : e - t;
 }
 function $t(t, e) {
@@ -120,33 +120,33 @@ function $t(t, e) {
     stayedSame: t === e
   };
 }
-function mt(t, e, n) {
+function bt(t, e, n) {
   const o = t === "above";
   return n.filter((r) => {
-    const a = r * e.viewportHeight;
-    return o ? e.visibleHeight < a : e.visibleHeight > a;
+    const i = r * e.viewportHeight;
+    return o ? e.visibleHeight < i : e.visibleHeight > i;
   });
 }
-function Et(t, e, n) {
+function Tt(t, e, n) {
   return -(t - e) + n;
 }
 function ft(t) {
   return Number(t.replace("px", ""));
 }
-function Z(t, ...e) {
+function tt(t, ...e) {
   return Number(t.toFixed(...e));
 }
-function Tt(t) {
+function kt(t) {
   const e = /(?<type>\w+)\((?<values>[^)]+)\)/g, n = [];
   let o;
   for (; (o = e.exec(t)) !== null; ) {
-    const r = o[1], a = o[2].split(",").map((i) => i.trim());
-    n.push({ type: r, values: a });
+    const r = o[1], i = o[2].split(",").map((a) => a.trim());
+    n.push({ type: r, values: i });
   }
   return n;
 }
 function Gt(t) {
-  const e = t.style.transform, n = Tt(e);
+  const e = t.style.transform, n = kt(e);
   return { transform: e, transformValues: n };
 }
 function Ht(t, e) {
@@ -154,28 +154,28 @@ function Ht(t, e) {
     (o) => o.type.startsWith(e)
   ) || null;
 }
-const st = "translate";
+const ct = "translate";
 function B(t) {
-  const e = t.style.transform, n = Tt(e), o = Ht(
+  const e = t.style.transform, n = kt(e), o = Ht(
     n,
-    st
+    ct
   );
-  return kt(o ?? {
-    type: st,
+  return Ot(o ?? {
+    type: ct,
     values: []
   });
 }
-function tt(t, { x: e, y: n }) {
+function et(t, { x: e, y: n }) {
   const {
     transform: o,
     transformValues: r
-  } = Gt(t), a = Ht(
+  } = Gt(t), i = Ht(
     r,
-    st
+    ct
   );
-  if (a) {
-    const i = kt(a);
-    t.style.transform = `translate(${e ?? i.x ?? 0}px,${n ?? i.y ?? 0}px)`;
+  if (i) {
+    const a = Ot(i);
+    t.style.transform = `translate(${e ?? a.x ?? 0}px,${n ?? a.y ?? 0}px)`;
     return;
   }
   if (o) {
@@ -184,7 +184,7 @@ function tt(t, { x: e, y: n }) {
   }
   t.style.transform = `translate(${e ?? 0}px,${n ?? 0}px)`;
 }
-function kt(t) {
+function Ot(t) {
   if (t.type !== "translate")
     throw new Error(
       `Could not get coordinates from ${t.type}, since is not translate.`
@@ -195,22 +195,22 @@ function kt(t) {
     y: ft(n) ?? 0
   };
 }
-function ct(t) {
+function lt(t) {
   return t != null;
 }
 function gt(t, {
   min: e,
   max: n
 }) {
-  return ct(n) && t >= n ? n : ct(e) && t <= e ? e : t;
+  return lt(n) && t >= n ? n : lt(e) && t <= e ? e : t;
 }
 const _t = (t, e, n) => {
-  e instanceof HTMLElement && !Ft(e, E.Handle) && n.scrollTop >= 1 || (t.isDragging = !0);
+  e instanceof HTMLElement && !Nt(e, T.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) => {
+}, zt = (t, e, n, o, r) => (i) => {
   qt(
-    a,
+    i,
     t,
     n,
     o,
@@ -219,34 +219,34 @@ const _t = (t, e, n) => {
     n.marginTop
   );
 };
-function qt(t, e, n, o, r, a, i) {
-  if (!o.isDragging || !D(o.startY))
+function qt(t, e, n, o, r, i, a) {
+  if (!o.isDragging || !A(o.startY))
     return;
-  const s = e.getCoordinates(t).y, u = wt(o.startY, s), h = window.innerHeight, c = a.clientHeight, m = c - (o.containerStartTranslate.y + u);
+  const c = e.getCoordinates(t).y, u = wt(o.startY, c), h = window.innerHeight, s = i.clientHeight, m = s - (o.containerStartTranslate.y + u);
   if (m >= h)
     return;
-  const S = yt(o.startY, s);
-  if (S.isUp && !n.expandable && m >= c)
+  const C = Et(o.startY, c);
+  if (C.isUp && !n.expandable && m >= s || n.preventClosing && m <= s)
     return;
   r.start(() => {
-    tt(a, {
+    et(i, {
       y: o.containerStartTranslate.y + u
     });
   }, 0);
-  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),
+  const l = h - a, E = s - o.containerStartTranslate.y;
+  if (C.isUp) {
+    const b = l - E, v = l - m, w = gt(
+      1 - tt(v / b, 2),
       {
         min: 0,
         max: 1
       }
     );
-    n.onDragMove(S, y);
-  } else if (S.isDown) {
+    n.onDragMove(C, w);
+  } else if (C.isDown) {
     const b = gt(
-      Z(
-        1 - m / C,
+      tt(
+        1 - m / E,
         2
       ),
       {
@@ -254,72 +254,85 @@ function qt(t, e, n, o, r, a, i) {
         max: 1
       }
     );
-    n.onDragMove(S, b);
+    n.onDragMove(C, b);
   }
 }
-const Vt = (t, e, n, o, r, a, i) => (s) => {
-  if (!o.isDragging || (o.isDragging = !1, !D(o.startY)))
+const Vt = (t, e, n, o, r, i, a) => (c) => {
+  if (!o.isDragging || (o.isDragging = !1, !A(o.startY)))
     return;
   n.onDragEnd();
-  const u = o.startY, h = t.getCoordinates(s).y, c = B(e).y, m = yt(u, h), S = window.innerHeight, l = e.clientHeight;
+  const u = o.startY, h = t.getCoordinates(c).y, s = B(e).y, m = Et(u, h), C = window.innerHeight, l = e.clientHeight;
   if (m.isUp) {
-    const C = [...n.snapPoints].sort(
-      (y, L) => y - L
-    ), b = l + -c;
+    const E = [...n.snapPoints].sort(
+      (w, L) => w - L
+    ), b = l + -s;
     if (!n.expandable && b >= l)
       return;
-    for (const y of C) {
-      const L = y * window.innerHeight;
+    for (const w of E) {
+      const L = w * window.innerHeight;
       if (b <= L) {
-        const T = Q(
+        const k = V(
           b,
           L
         );
-        i.translateContainer({
-          startY: c,
-          endY: c - T,
+        a.translateContainer({
+          startY: s,
+          endY: s - k,
           animationFrame: r,
           bottomSheetContainer: e
         });
         return;
       }
     }
-    const v = Et(
-      S,
+    const v = Tt(
+      C,
       l,
       n.marginTop
     );
-    i.translateContainer({
-      startY: c,
+    a.translateContainer({
+      startY: s,
       endY: v,
       animationFrame: r,
       bottomSheetContainer: e
     });
   } else if (m.isDown) {
-    const C = [...n.snapPoints].sort(
+    const E = [...n.snapPoints].sort(
       (b, v) => v - b
     );
-    for (const b of C) {
-      const v = b * window.innerHeight, y = l + -c;
-      if (y >= v) {
-        const L = Q(
-          y,
+    for (const b of E) {
+      const v = b * window.innerHeight, w = l + -s;
+      if (w >= v) {
+        const L = V(
+          w,
           v
         );
-        i.translateContainer({
-          startY: c,
-          endY: c + L,
+        a.translateContainer({
+          startY: s,
+          endY: s + L,
           animationFrame: r,
           bottomSheetContainer: e
         });
         return;
       }
     }
-    a();
+    if (n.preventClosing) {
+      const b = l + -s;
+      if (b >= l) {
+        const v = V(b, l);
+        a.translateContainer({
+          startY: s,
+          endY: s + v,
+          animationFrame: r,
+          bottomSheetContainer: e
+        });
+      }
+      return;
+    }
+    i();
   }
 };
-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 || {});
-function bt(t) {
+var j = /* @__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))(j || {});
+function vt(t) {
   switch (t) {
     case 0:
       return 0;
@@ -334,11 +347,11 @@ function bt(t) {
   }
 }
 const Kt = {
-  eventPhase: W.All
+  eventPhase: j.All
 };
-class G {
+class X {
   constructor(e) {
-    V(this, "currentTarget"), this.currentTarget = e;
+    J(this, "currentTarget"), this.currentTarget = e;
   }
   addEventListeners({
     onStart: e,
@@ -356,12 +369,12 @@ class G {
   }) {
     e && this.currentTarget.addEventListener(
       "touchstart",
-      (a) => {
-        if (n.eventPhase === W.All) {
-          e(a);
+      (i) => {
+        if (n.eventPhase === j.All) {
+          e(i);
           return;
         }
-        bt(a.eventPhase) === n.eventPhase && e(a);
+        vt(i.eventPhase) === n.eventPhase && e(i);
       },
       {
         passive: !0
@@ -376,18 +389,18 @@ class G {
   }) {
     e && this.currentTarget.addEventListener(
       "mousedown",
-      (a) => {
-        if (n.eventPhase === W.All) {
-          e(a);
+      (i) => {
+        if (n.eventPhase === j.All) {
+          e(i);
           return;
         }
-        bt(a.eventPhase) === n.eventPhase && e(a);
+        vt(i.eventPhase) === n.eventPhase && e(i);
       },
       {
         passive: !0
       }
-    ), o && this.currentTarget.addEventListener("mousemove", o), r && this.currentTarget.addEventListener("mouseup", (a) => {
-      r(a);
+    ), o && this.currentTarget.addEventListener("mousemove", o), r && this.currentTarget.addEventListener("mouseup", (i) => {
+      r(i);
     });
   }
   removeEventListeners({
@@ -439,77 +452,80 @@ function Jt(t, e) {
   o.innerHTML = t.content ?? "";
   const r = window.innerHeight;
   n.bottomSheetContainer.style.maxHeight = `${r}px`, n.bottomSheetContentWrapper.appendChild(o);
-  const a = te({
+  const i = te({
     bottomSheetElements: n,
     bottomSheetProps: t,
     options: e
   });
-  return { elements: n, eventHandlers: a };
+  return t.rootStyle && Object.assign(n.bottomSheetRoot.style, t.rootStyle), t.backdropStyle && Object.assign(n.bottomSheetBackdrop.style, t.backdropStyle), t.containerStyle && Object.assign(n.bottomSheetContainer.style, t.containerStyle), t.handleStyle && Object.assign(n.bottomSheetHandleBar.style, t.handleStyle), t.contentWrapperStyle && Object.assign(
+    n.bottomSheetContentWrapper.style,
+    t.contentWrapperStyle
+  ), { elements: n, eventHandlers: i };
 }
 function Qt(t) {
-  const e = P(
+  const e = M(
     "dialog",
-    R([
-      E.Root,
-      at.Dialog,
+    W([
+      T.Root,
+      st.Dialog,
       t.rootClass
     ]),
-    E.Root
+    T.Root
   );
   e.ariaLabel = t.ariaLabel;
-  const n = P(
+  const n = M(
     "section",
-    R([E.Container, t.containerClass]),
-    E.Container
+    W([T.Container, t.containerClass]),
+    T.Container
   );
   t.containerBorderRadius && (n.style.borderRadius = Lt(
     t.containerBorderRadius
   ));
-  const o = P(
+  const o = M(
     "div",
-    E.GapFiller,
-    E.GapFiller
-  ), r = P(
+    T.GapFiller,
+    T.GapFiller
+  ), r = M(
     "button",
-    R([
-      E.Handle,
-      at.Button,
-      t.shouldShowHandle ? null : K.Hidden,
+    W([
+      T.Handle,
+      st.Button,
+      t.shouldShowHandle ? null : Q.Hidden,
       t.handleClass
     ]),
-    E.Handle
+    T.Handle
   );
   r.setAttribute("type", "button"), r.ariaLabel = "bottom sheet close button";
-  const a = P(
+  const i = M(
     "span",
-    R([
-      E.HandleBar,
-      t.shouldShowHandle ? null : K.Hidden
+    W([
+      T.HandleBar,
+      t.shouldShowHandle ? null : Q.Hidden
     ]),
-    E.HandleBar
-  ), i = P(
+    T.HandleBar
+  ), a = M(
     "article",
-    R([
-      E.ContentWrapper,
+    W([
+      T.ContentWrapper,
       t.contentWrapperClass
     ]),
-    E.ContentWrapper
-  ), s = P(
+    T.ContentWrapper
+  ), c = M(
     "div",
-    R([
-      E.Backdrop,
+    W([
+      T.Backdrop,
       t.backdropClass,
-      K.Hidden
+      Q.Hidden
     ]),
-    E.Backdrop
+    T.Backdrop
   );
-  return t.backdropColor && (s.style.backgroundColor = t.backdropColor), t.backDropTransition && (s.style.transition = t.backDropTransition), {
+  return t.backdropColor && (c.style.backgroundColor = t.backdropColor), t.backDropTransition && (c.style.transition = t.backDropTransition), {
     bottomSheetRoot: e,
-    bottomSheetBackdrop: s,
+    bottomSheetBackdrop: c,
     bottomSheetContainer: n,
     bottomSheetHandle: r,
-    bottomSheetHandleBar: a,
-    bottomSheetContentWrapper: i,
+    bottomSheetHandleBar: i,
+    bottomSheetContentWrapper: a,
     bottomSheetContainerGapFiller: o
   };
 }
@@ -519,9 +535,9 @@ function Zt({
   bottomSheetHandle: n,
   bottomSheetHandleBar: o,
   bottomSheetContentWrapper: r,
-  bottomSheetContainerGapFiller: a
+  bottomSheetContainerGapFiller: i
 }) {
-  t.appendChild(e), n.appendChild(o), e.appendChild(n), e.appendChild(r), e.appendChild(a);
+  t.appendChild(e), n.appendChild(o), e.appendChild(n), e.appendChild(r), e.appendChild(i);
 }
 function te({
   bottomSheetElements: t,
@@ -531,38 +547,38 @@ function te({
   const {
     bottomSheetRoot: o,
     bottomSheetContainer: r,
-    bottomSheetHandle: a,
-    bottomSheetContainerGapFiller: i,
-    bottomSheetContentWrapper: s,
+    bottomSheetHandle: i,
+    bottomSheetContainerGapFiller: a,
+    bottomSheetContentWrapper: c,
     bottomSheetBackdrop: u
-  } = t, { animationFrame: h } = n, c = new G(a), m = new G(
-    s
-  ), S = new G(
-    i
+  } = t, { animationFrame: h } = n, s = new X(i), m = new X(
+    c
+  ), C = new X(
+    a
   ), l = e.dragTriggers.reduce(
-    (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];
+    (H, y) => {
+      const S = o.querySelectorAll(y);
+      if (!S.length)
+        return H;
+      const p = Array.from(S).map((d) => d instanceof HTMLElement ? new X(d) : null).filter((d) => !!d);
+      return [...H, ...p];
     },
     []
-  ), C = new G(
+  ), E = new X(
     window
   ), b = Xt(
-    C,
+    E,
     r,
     e,
     n.draggingState
   ), v = zt(
-    C,
+    E,
     r,
     e,
     n.draggingState,
     h
-  ), y = Vt(
-    C,
+  ), w = Vt(
+    E,
     r,
     e,
     n.draggingState,
@@ -570,103 +586,103 @@ function te({
     n.onClose,
     n.bottomSheetState
   );
-  function L(k) {
-    k.target instanceof Element && !o.contains(k.target) && n.onClose();
+  function L(H) {
+    H.target instanceof Element && !o.contains(H.target) && n.onClose();
   }
-  function T(k) {
+  function k(H) {
     _t(
       n.draggingState,
-      k.target,
+      H.target,
       t.bottomSheetContentWrapper
     );
   }
-  function M(k) {
-    const O = k ?? e;
-    O.draggable && (c.addEventListeners({
-      onStart: T
-    }), l.forEach((w) => {
-      w.addEventListeners({
-        onStart: T,
+  function P(H) {
+    const y = H ?? e;
+    y.draggable && (s.addEventListeners({
+      onStart: k
+    }), l.forEach((S) => {
+      S.addEventListeners({
+        onStart: k,
         onStartOptions: {
-          eventPhase: W.Target
+          eventPhase: j.Target
         }
       });
-    })), O.draggable && O.backgroundDraggable && (m.addEventListeners({
-      onStart: T,
+    })), y.draggable && y.backgroundDraggable && (m.addEventListeners({
+      onStart: k,
       onStartOptions: {
-        eventPhase: W.Target
+        eventPhase: j.Target
       }
-    }), S.addEventListeners({
-      onStart: T
-    })), O.draggable && C.addEventListeners({
+    }), C.addEventListeners({
+      onStart: k
+    })), y.draggable && E.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") {
+      onEnd: w
+    }), y.draggable && window.document.addEventListener("keyup", (S) => {
+      S.key === "Escape" && n.onClose();
+    }), i.addEventListener("keyup", (S) => {
+      if (S.key === "ArrowUp") {
         n.moveUp();
         return;
       }
-      if (w.key === "ArrowDown") {
+      if (S.key === "ArrowDown") {
         n.moveDown();
         return;
       }
-      if (w.shiftKey && w.key === "Tab") {
+      if (S.shiftKey && S.key === "Tab") {
         const p = Y(
           t.bottomSheetContentWrapper
         );
-        Ut(p);
+        jt(p);
       }
     });
   }
-  function z() {
+  function $() {
     e.shouldCloseOnOutsideClick ? u.addEventListener("click", L) : u.style.pointerEvents = "none";
   }
-  function j() {
+  function G() {
     u.removeEventListener("click", L);
   }
-  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()
+  function Y(H) {
+    let y = [...Array.from(H.childNodes).reverse()];
+    for (; y.length; ) {
+      const S = y.shift();
+      if (Ut(S))
+        return S;
+      S && (y = [
+        ...y,
+        ...Array.from(S.childNodes).reverse()
       ]);
     }
     return null;
   }
-  function q() {
-    c.removeEventListeners({
-      onStart: T
+  function I() {
+    s.removeEventListeners({
+      onStart: k
     }), m.removeEventListeners({
-      onStart: T
-    }), S.removeEventListeners({
-      onStart: T
-    }), l.forEach((k) => {
-      k.removeEventListeners({
-        onStart: T
-      });
+      onStart: k
     }), C.removeEventListeners({
+      onStart: k
+    }), l.forEach((H) => {
+      H.removeEventListeners({
+        onStart: k
+      });
+    }), E.removeEventListeners({
       onStart: b,
       onMove: v,
-      onEnd: y
+      onEnd: w
     });
   }
   return {
-    attachEventListeners: M,
-    clearEventListeners: q,
-    attacheOnOpenEventListeners: z,
-    clearOnOpenEventListeners: j
+    attachEventListeners: P,
+    clearEventListeners: I,
+    attacheOnOpenEventListeners: $,
+    clearOnOpenEventListeners: G
   };
 }
 class ee {
   constructor() {
-    V(this, "animationId"), V(this, "isInProgress"), V(this, "startedAt"), this.animationId = null, this.isInProgress = !1, this.startedAt = null;
+    J(this, "animationId"), J(this, "isInProgress"), J(this, "startedAt"), this.animationId = null, this.isInProgress = !1, this.startedAt = null;
   }
   /**
    *
@@ -675,15 +691,15 @@ class ee {
    */
   start(e, n, o = !1) {
     this.isInProgress = !0;
-    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);
+    const r = (i) => {
+      this.startedAt || (this.startedAt = i);
+      const a = i - this.startedAt, c = n === 0 ? 1 : tt(a / n, 2), u = c >= 1 && !o;
+      e(c), u ? this.stop() : this.animationId = requestAnimationFrame(r);
     };
     this.animationId = requestAnimationFrame(r);
   }
   stop() {
-    this.isInProgress = !1, this.startedAt = null, D(this.animationId) && cancelAnimationFrame(this.animationId);
+    this.isInProgress = !1, this.startedAt = null, A(this.animationId) && cancelAnimationFrame(this.animationId);
   }
 }
 function ne(t) {
@@ -692,19 +708,19 @@ function ne(t) {
     endY: n,
     bottomSheetContainer: o,
     animationFrame: r,
-    onEnd: a,
-    animationTimingFunction: i,
-    animationDuration: s
+    onEnd: i,
+    animationTimingFunction: a,
+    animationDuration: c
   } = t, u = wt(e, n);
   r.stop();
   let h = !1;
-  r.start((c) => {
-    tt(o, {
-      y: e + u * i(c)
-    }), !h && c >= 1 && (a == null || a(), h = !0);
-  }, s);
+  r.start((s) => {
+    et(o, {
+      y: e + u * a(s)
+    }), !h && s >= 1 && (i == null || i(), h = !0);
+  }, c);
 }
-const lt = (t, e) => (n) => {
+const ut = (t, e) => (n) => {
   ne({
     ...n,
     animationTimingFunction: t,
@@ -717,17 +733,17 @@ const lt = (t, e) => (n) => {
   CLOSED: "closed"
 };
 function oe(t) {
-  return !(!D(t) || t > 1 || t < 0);
+  return !(!A(t) || t > 1 || t < 0);
 }
 function re(t, e) {
   const n = {
-    set(o, r, a, i) {
-      return e(r, a), Reflect.set(o, r, a, i);
+    set(o, r, i, a) {
+      return e(r, i), Reflect.set(o, r, i, a);
     }
   };
   return new Proxy(t, n);
 }
-function ie(...t) {
+function ae(...t) {
   console.error(t);
 }
 const N = {
@@ -737,55 +753,55 @@ const N = {
   EASE_IN_OUT: "ease-in-out",
   SPRING: "spring"
 };
-function ae(t) {
+function ie(t) {
   for (const e of Object.values(N))
     if (e === t)
       return !0;
   return !1;
 }
-function Ot(t) {
-  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 xt(t) {
+  return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t && A(t.p1x) && A(t.p1y) && A(t.p2x) && A(t.p2y));
 }
 function U(t, e, n, o) {
-  return function(s) {
-    return i(r(s));
+  return function(c) {
+    return a(r(c));
   };
-  function r(s) {
-    let u = 0, h = 1, c = s, m;
-    if (s === 0 || s === 1)
-      return s;
+  function r(c) {
+    let u = 0, h = 1, s = c, m;
+    if (c === 0 || c === 1)
+      return c;
     for (; u < h; ) {
-      if (m = a(c), Math.abs(m - s) < 1e-3)
-        return c;
-      s > m ? u = c : h = c, c = (h + u) / 2;
+      if (m = i(s), Math.abs(m - c) < 1e-3)
+        return s;
+      c > m ? u = s : h = s, s = (h + u) / 2;
     }
-    return c;
+    return s;
   }
-  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 i(c) {
+    return 3 * t * c * Math.pow(1 - c, 2) + 3 * n * Math.pow(c, 2) * (1 - c) + Math.pow(c, 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);
+  function a(c) {
+    return 3 * e * c * Math.pow(1 - c, 2) + 3 * o * Math.pow(c, 2) * (1 - c) + Math.pow(c, 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);
+const St = U(0.25, 0.1, 0.25, 1), se = U(0.42, 0, 1, 1), At = 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);
 function ue(t) {
   switch (t) {
     case N.EASE:
-      return vt;
+      return St;
     case N.EASE_IN:
       return se;
     case N.EASE_OUT:
-      return xt;
+      return At;
     case N.EASE_IN_OUT:
       return ce;
     case N.SPRING:
       return le;
     default:
-      return vt;
+      return St;
   }
 }
-function St(t) {
+function yt(t) {
   return typeof t == "boolean";
 }
 const de = {
@@ -811,6 +827,7 @@ const de = {
   onDragEnd: () => {
   },
   expandable: !0,
+  preventClosing: !1,
   draggable: !0,
   backgroundDraggable: !0,
   shouldCloseOnOutsideClick: !0,
@@ -825,15 +842,20 @@ const de = {
   contentWrapperClass: null,
   backdropClass: null,
   draggingAnimationTimings: "ease-in-out",
-  draggingAnimationDuration: 180
+  draggingAnimationDuration: 180,
+  rootStyle: {},
+  containerStyle: {},
+  handleStyle: {},
+  contentWrapperStyle: {},
+  backdropStyle: {}
 };
 function pe(t) {
   const e = {
     ...de
   }, n = Object.entries(t).reduce(
     (o, r) => {
-      const [a, i] = r;
-      return ct(i) && (o[a] = i), o;
+      const [i, a] = r;
+      return lt(a) && (o[i] = a), o;
     },
     {}
   );
@@ -842,118 +864,151 @@ function pe(t) {
     ...n
   };
 }
-function ut(t) {
-  if (Ot(t)) {
+function dt(t) {
+  if (xt(t)) {
     const { p1x: e, p1y: n, p2x: o, p2y: r } = t;
     return U(e, n, o, r);
   }
-  return ae(t) ? ue(t) : xt;
+  return ie(t) ? ue(t) : At;
 }
 function he(t, e, n, o) {
-  function r(a, i) {
-    switch (a) {
+  function r(i, a) {
+    switch (i) {
       case "content":
-        x(i) && (t.bottomSheetContentWrapper.innerHTML = i);
+        x(a) && (t.bottomSheetContentWrapper.innerHTML = a);
         break;
       case "width":
-        x(i) && (t.bottomSheetContainer.style.width = i);
+        x(a) && (t.bottomSheetContainer.style.width = a);
         break;
       case "shouldShowHandle":
-        St(i) || J(t.bottomSheetHandle, !1);
+        yt(a) || Z(t.bottomSheetHandle, !1);
         break;
       case "shouldShowBackdrop":
-        St(i) || J(t.bottomSheetBackdrop, !1);
+        yt(a) || Z(t.bottomSheetBackdrop, !1);
         break;
       case "containerBorderRadius":
-        x(i) && (t.bottomSheetContainer.style.borderRadius = Lt(i));
+        x(a) && (t.bottomSheetContainer.style.borderRadius = Lt(a));
         break;
       case "backdropColor":
-        x(i) && (t.bottomSheetBackdrop.style.backgroundColor = i);
+        x(a) && (t.bottomSheetBackdrop.style.backgroundColor = a);
         break;
       case "backDropTransition":
-        x(i) && (t.bottomSheetBackdrop.style.transition = i);
+        x(a) && (t.bottomSheetBackdrop.style.transition = a);
         break;
       case "rootClass":
-        if (!x(i))
+        if (!x(a))
           return;
-        $(
+        _(
           t.bottomSheetRoot,
           n.rootClass,
-          i
+          a
         );
         break;
       case "containerClass":
-        if (!x(i))
+        if (!x(a))
           return;
-        $(
+        _(
           t.bottomSheetContainer,
           n.containerClass,
-          i
+          a
         );
         break;
       case "handleClass":
-        if (!x(i))
+        if (!x(a))
           return;
-        $(
+        _(
           t.bottomSheetHandle,
           n.handleClass,
-          i
+          a
         );
         break;
       case "contentWrapperClass":
-        if (!x(i))
+        if (!x(a))
           return;
-        $(
+        _(
           t.bottomSheetContentWrapper,
           n.contentWrapperClass,
-          i
+          a
         );
         break;
       case "backdropClass":
-        if (!x(i))
+        if (!x(a))
           return;
-        $(
+        _(
           t.bottomSheetBackdrop,
           n.backdropClass,
-          i
+          a
         );
         break;
       case "expandable":
         o.clearEventListeners(), o.attachEventListeners(n);
         break;
+      case "preventClosing":
+        o.clearEventListeners(), o.attachEventListeners(n);
+        break;
       case "draggable":
         o.clearEventListeners(), o.attachEventListeners(n);
         break;
       case "draggingAnimationTimings":
-        if (Ot(i)) {
-          const s = ut(i), u = lt(
-            s,
+        if (xt(a)) {
+          const c = dt(a), u = ut(
+            c,
             n.draggingAnimationDuration
           );
           e.translateContainer = u;
         }
         break;
       case "draggingAnimationDuration":
-        if (D(i)) {
-          const s = ut(
+        if (A(a)) {
+          const c = dt(
             n.draggingAnimationTimings
-          ), u = lt(
-            s,
-            i
+          ), u = ut(
+            c,
+            a
           );
           e.translateContainer = u;
         }
         break;
+      case "rootStyle":
+        n.rootStyle && Object.assign(
+          t.bottomSheetRoot.style,
+          n.rootStyle
+        );
+        break;
+      case "backdropStyle":
+        n.backdropStyle && Object.assign(
+          t.bottomSheetBackdrop.style,
+          n.backdropStyle
+        );
+        break;
+      case "containerStyle":
+        n.containerStyle && Object.assign(
+          t.bottomSheetContainer.style,
+          n.containerStyle
+        );
+        break;
+      case "handleStyle":
+        n.handleStyle && Object.assign(
+          t.bottomSheetHandleBar.style,
+          n.handleStyle
+        );
+        break;
+      case "contentWrapperStyle":
+        n.contentWrapperStyle && Object.assign(
+          t.bottomSheetContentWrapper.style,
+          n.contentWrapperStyle
+        );
+        break;
     }
   }
   return r;
 }
 function me(t) {
-  const e = pe(t), n = ut(
+  const e = pe(t), n = dt(
     t.draggingAnimationTimings
   ), o = {
     isMounted: !1,
-    translateContainer: lt(
+    translateContainer: ut(
       n,
       e.draggingAnimationDuration
     )
@@ -967,21 +1022,21 @@ function me(t) {
     originalDocumentOverflowY: null,
     originalDocumentOverscrollBehavior: null
   };
-  function a() {
+  function i() {
     r.originalDocumentOverflowY && r.originalDocumentOverflowY !== "hidden" && (document.body.style.overflowY = r.originalDocumentOverflowY), r.originalDocumentOverscrollBehavior && (document.body.style.position = r.originalDocumentOverscrollBehavior);
   }
-  const i = new ee(), s = {
-    animationFrame: i,
-    onClose: y,
+  const a = new ee(), c = {
+    animationFrame: a,
+    onClose: w,
     bottomSheetState: o,
     draggingState: r,
-    snapTo: w,
-    moveUp: k,
-    moveDown: O
+    snapTo: S,
+    moveUp: H,
+    moveDown: y
   }, { elements: u, eventHandlers: h } = Jt(
     e,
-    s
-  ), c = re(
+    c
+  ), s = re(
     e,
     he(
       u,
@@ -989,184 +1044,184 @@ function me(t) {
       e,
       h
     )
-  ), { bottomSheetBackdrop: m, bottomSheetRoot: S, bottomSheetContainer: l } = u, C = (p) => {
+  ), { bottomSheetBackdrop: m, bottomSheetRoot: C, bottomSheetContainer: l } = u, E = (p) => {
     const d = p ?? window.document.body;
-    d.appendChild(S), d.appendChild(m);
+    d.appendChild(C), d.appendChild(m);
     const f = window.innerHeight;
-    tt(l, {
+    et(l, {
       y: f
     }), h.attachEventListeners(), o.isMounted = !0;
   }, b = () => {
     h.clearEventListeners(), Object.values(u).forEach((p) => {
       p.remove();
-    }), a(), o.isMounted = !1;
+    }), i(), o.isMounted = !1;
   }, v = () => {
     var p;
-    if (L() || ie(
+    if (L() || ae(
       'Bottom Sheet is not mounted yet. call the "mount" method first.'
-    ), (p = t.beforeOpen) == null || p.call(t), T())
+    ), (p = t.beforeOpen) == null || p.call(t), k())
       return;
-    nt(m, !0), c.shouldShowBackdrop || X(m, "transparent"), nt([l], !0), tt(l, {
+    ot(m, !0), s.shouldShowBackdrop || K(m, "transparent"), ot([l], !0), et(l, {
       y: l.clientHeight
     });
-    const d = window.innerHeight, f = ht(
+    const d = window.innerHeight, f = mt(
       d,
       l.clientHeight,
-      c.marginTop,
-      c.defaultPosition
+      s.marginTop,
+      s.defaultPosition
     ), g = B(l).y;
     o.translateContainer({
       startY: g,
       endY: f,
-      animationFrame: i,
+      animationFrame: a,
       bottomSheetContainer: l,
       onEnd: t.afterOpen
     });
-    const H = document.body.style.overflowY;
-    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();
+    const O = document.body.style.overflowY;
+    r.originalDocumentOverflowY = O || "initial";
+    const D = document.body.style.overscrollBehavior;
+    r.originalDocumentOverscrollBehavior = D || "initial", document.body.style.overflow = "hidden", document.body.style.overscrollBehavior = "contain", u.bottomSheetHandle.focus(), h.attacheOnOpenEventListeners();
   };
-  function y() {
+  function w() {
     var p;
-    if (M())
+    if (P())
       return;
     (p = t.beforeClose) == null || p.call(t);
     const d = B(l).y, f = l.clientHeight;
     o.translateContainer({
       startY: d,
       endY: f,
-      animationFrame: i,
+      animationFrame: a,
       bottomSheetContainer: l,
       onEnd: () => {
         var g;
-        (g = t.afterClose) == null || g.call(t), nt([m, l], !1), h.clearOnOpenEventListeners();
+        (g = t.afterClose) == null || g.call(t), ot([m, l], !1), h.clearOnOpenEventListeners();
       }
-    }), a();
+    }), i();
   }
   function L() {
     return o.isMounted;
   }
-  function T() {
+  function k() {
     const p = B(l).y, d = window.innerHeight, f = l.clientHeight >= d ? d : l.clientHeight;
     return p <= f;
   }
-  function M() {
-    return !T();
+  function P() {
+    return !k();
   }
-  function z() {
+  function $() {
     const p = B(l).y, d = l.clientHeight, f = window.innerHeight;
     if (p <= 5 && p >= -5)
       return F.CONTENT_HEIGHT;
     const g = d - p;
     if (g === f / 2)
       return F.MIDDLE;
-    const H = f - c.marginTop, A = 10;
-    return g <= H + A && g >= H - A ? F.TOP : F.CLOSED;
+    const O = f - s.marginTop, D = 10;
+    return g <= O + D && g >= O - D ? F.TOP : F.CLOSED;
   }
-  function j() {
+  function G() {
     return l.clientHeight;
   }
   function Y(p) {
-    if (!T())
+    if (!k())
       return;
-    const d = B(l).y, f = l.clientHeight - d, g = window.innerHeight - p, H = $t(f, g), A = Q(f, g);
+    const d = B(l).y, f = l.clientHeight - d, g = window.innerHeight - p, O = $t(f, g), D = V(f, g);
     o.translateContainer({
       startY: d,
-      endY: d + (H.isUp ? -A : A),
-      animationFrame: i,
+      endY: d + (O.isUp ? -D : D),
+      animationFrame: a,
       bottomSheetContainer: l
     });
   }
-  function q(p, {
+  function I(p, {
     viewportHeight: d,
     visibleHeight: f
   }) {
     let g = null;
-    for (const H of p) {
-      const A = H * d, I = Q(
+    for (const O of p) {
+      const D = O * d, R = V(
         f,
-        A
+        D
       );
-      (g === null || I < g) && (g = I);
+      (g === null || R < g) && (g = R);
     }
     return {
       minOffset: g
     };
   }
-  function k() {
-    const p = [...c.snapPoints].reverse(), d = B(l).y, f = l.clientHeight, g = f - d;
-    if (!c.expandable && g >= f)
+  function H() {
+    const p = [...s.snapPoints].reverse(), d = B(l).y, f = l.clientHeight, g = f - d;
+    if (!s.expandable && g >= f)
       return;
-    const H = window.innerHeight, A = mt(
+    const O = window.innerHeight, D = bt(
       "above",
-      { visibleHeight: g, viewportHeight: H },
+      { visibleHeight: g, viewportHeight: O },
       p
-    ), { minOffset: I } = q(A, {
+    ), { minOffset: R } = I(D, {
       visibleHeight: g,
-      viewportHeight: H
+      viewportHeight: O
     });
-    if (I === null && g < H - c.marginTop) {
+    if (R === null && g < O - s.marginTop) {
       o.translateContainer({
         startY: d,
-        endY: ht(
-          H,
+        endY: mt(
+          O,
           f,
-          c.marginTop,
+          s.marginTop,
           "top"
         ),
-        animationFrame: i,
+        animationFrame: a,
         bottomSheetContainer: l
       });
       return;
     }
-    D(I) && o.translateContainer({
+    A(R) && o.translateContainer({
       startY: d,
-      endY: d - I,
-      animationFrame: i,
+      endY: d - R,
+      animationFrame: a,
       bottomSheetContainer: l
     });
   }
-  function O() {
+  function y() {
     const p = B(l).y, d = l.clientHeight - p;
     if (d < 1)
       return;
-    const f = window.innerHeight, g = mt(
+    const f = window.innerHeight, g = bt(
       "below",
       { visibleHeight: d, viewportHeight: f },
-      c.snapPoints
-    ), { minOffset: H } = q(g, {
+      s.snapPoints
+    ), { minOffset: O } = I(g, {
       visibleHeight: d,
       viewportHeight: f
     });
-    D(H) && o.translateContainer({
+    A(O) && o.translateContainer({
       startY: p,
-      endY: p + H,
-      animationFrame: i,
+      endY: p + O,
+      animationFrame: a,
       bottomSheetContainer: l
     });
   }
-  function w(p) {
+  function S(p) {
     const d = window.innerHeight;
     if (!oe(p))
       return;
-    const f = Z(d * p, 2);
+    const f = tt(d * p, 2);
     Y(f);
   }
   return {
-    props: c,
+    props: s,
     elements: u,
-    mount: C,
+    mount: E,
     unmount: b,
     open: v,
-    close: y,
+    close: w,
     getIsMounted: L,
-    getIsOpen: T,
-    getIsClosed: M,
-    getPosition: z,
-    getHeight: j,
+    getIsOpen: k,
+    getIsClosed: P,
+    getPosition: $,
+    getHeight: G,
     moveTo: Y,
-    snapTo: w
+    snapTo: S
   };
 }
 function Dt() {
@@ -1202,56 +1257,56 @@ function Dt() {
     }
   };
 }
-const fe = Dt(), Se = At(
+const be = Dt(), Se = Bt(
   function(e, n) {
     const {
       children: o,
       isOpen: r,
-      setIsOpen: a,
-      afterClose: i,
-      mountingPointRef: s,
+      setIsOpen: i,
+      afterClose: a,
+      mountingPointRef: c,
       ...u
-    } = e, h = ot(fe), [c, m] = rt(
+    } = e, h = rt(be), [s, m] = at(
       h.current
     );
-    Bt(
+    Mt(
       n,
-      () => c,
-      [c]
+      () => s,
+      [s]
     );
-    const S = Pt(() => {
-      a(!1), i == null || i();
-    }, [i]);
-    _(() => {
-      r ? c.open() : c.close();
+    const C = z(() => {
+      i(!1), a == null || a();
+    }, [a]);
+    q(() => {
+      r ? s.open() : s.close();
     }, [r]);
-    const l = ot(null);
-    return _(
+    const l = rt(null);
+    return q(
       function() {
-        var y;
-        if (s && !s.current)
+        var w;
+        if (c && !c.current)
           return;
-        const b = It((y = e.mountingPointRef) == null ? void 0 : y.current) ? e.mountingPointRef.current : window.document.body;
-        if (!b || c.getIsMounted())
+        const b = It((w = e.mountingPointRef) == null ? void 0 : w.current) ? e.mountingPointRef.current : window.document.body;
+        if (!b || s.getIsMounted())
           return;
         const v = me({
           content: "",
           ...u,
-          afterClose: S
+          afterClose: C
         });
         return v.mount(b), l.current = v.elements.bottomSheetContentWrapper ?? null, h.current = v, m(v), () => {
-          c.unmount();
+          s.unmount();
         };
       },
-      [e.mountingPointRef, u, S]
-    ), _(
+      [e.mountingPointRef, u, C]
+    ), q(
       function() {
         Object.assign(h.current.props, {
           ...u
         }), m(h.current);
       },
       [u]
-    ), _(function() {
+    ), q(function() {
       return () => {
         h.current.unmount();
       };
@@ -1260,57 +1315,75 @@ const fe = Dt(), Se = At(
       l.current
     ) : null;
   }
-), ge = Dt();
-function Ce(t = {}) {
-  const e = ot(ge), [n, o] = rt(!1), [r, a] = rt(e.current);
-  _(() => {
-    a(e.current);
+), fe = Dt();
+function ye(t = {}) {
+  const e = rt(fe), [n, o] = at(!1), [r, i] = at(e.current);
+  q(() => {
+    i(e.current);
   }, [e.current]);
   const {
-    beforeOpen: i,
-    afterOpen: s,
+    beforeOpen: a,
+    afterOpen: c,
     beforeClose: u,
     afterClose: h,
-    onDragStart: c,
+    onDragStart: s,
     onDragMove: m,
-    onDragEnd: S,
+    onDragEnd: C,
     ...l
-  } = t, C = () => {
-    i == null || i();
+  } = t, E = () => {
+    a == null || a();
   }, b = () => {
-    s == null || s(), o(!0);
+    c == null || c(), o(!0);
   }, v = () => {
     u == null || u();
-  }, y = () => {
+  }, w = () => {
     h == null || h(), o(!1);
   }, L = () => {
-    c == null || c();
-  }, T = (j, Y) => {
-    m == null || m(j, Y);
-  }, M = () => {
-    S == null || S();
-  };
+    s == null || s();
+  }, k = (y, S) => {
+    m == null || m(y, S);
+  }, P = () => {
+    C == null || C();
+  }, $ = Pt(() => ({
+    ref: e,
+    isOpen: n,
+    setIsOpen: o,
+    beforeOpen: E,
+    afterOpen: b,
+    beforeClose: v,
+    afterClose: w,
+    onDragStart: L,
+    onDragMove: k,
+    onDragEnd: P,
+    ...l
+  }), [e.current, n, o, t]), G = z(() => {
+    o(!0);
+  }, [o]), Y = z(() => {
+    o(!0);
+  }, [o]), I = z(
+    (...y) => {
+      r.moveTo(...y);
+    },
+    [r]
+  ), H = z(
+    (...y) => {
+      r.snapTo(...y);
+    },
+    [r]
+  );
   return {
-    props: Mt(() => ({
-      ref: e,
-      isOpen: n,
-      setIsOpen: o,
-      beforeOpen: C,
-      afterOpen: b,
-      beforeClose: v,
-      afterClose: y,
-      onDragStart: L,
-      onDragMove: T,
-      onDragEnd: M,
-      ...l
-    }), [e.current, n, o, t]),
+    props: $,
     instance: r,
     isOpen: n,
-    setIsOpen: o
+    setIsOpen: o,
+    open: G,
+    close: Y,
+    moveTo: I,
+    snapTo: H
   };
 }
 export {
   Se as BottomSheet,
   Dt as createPlaceholderBottomSheet,
-  Ce as useBottomSheet
+  ye as useBottomSheet
 };