base-vaul 0.0.1 → 0.0.2

package/dist/index.mjs

@@ -8,10 +8,12 @@ function __insertCSS(code) {
   ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
 }
 
+import { jsx } from 'react/jsx-runtime';
 import { Dialog } from '@base-ui/react';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect, useMemo } from 'react';
 
+// @ts-nocheck [FIXME] See after monorepo migration
 const DrawerContext = React__default.createContext({
     drawerRef: {
         current: null
@@ -41,7 +43,7 @@ const DrawerContext = React__default.createContext({
     onOpenChange: ()=>{},
     setActiveSnapPoint: ()=>{},
     closeDrawer: ()=>{},
-    direction: 'bottom',
+    direction: "bottom",
     shouldAnimate: {
         current: true
     },
@@ -54,7 +56,7 @@ const DrawerContext = React__default.createContext({
 const useDrawerContext = ()=>{
     const context = React__default.useContext(DrawerContext);
     if (!context) {
-        throw new Error('useDrawerContext must be used within a Drawer.Root');
+        throw new Error("useDrawerContext must be used within a Drawer.Root");
     }
     return context;
 };
@@ -87,22 +89,23 @@ function testPlatform(re) {
     return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
 }
 
+// @ts-nocheck [FIXME] See after monorepo migration
 // This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 const KEYBOARD_BUFFER = 24;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function chain$1(...callbacks) {
     return (...args)=>{
-        for (let callback of callbacks){
-            if (typeof callback === 'function') {
+        for (const callback of callbacks){
+            if (typeof callback === "function") {
                 callback(...args);
             }
         }
     };
 }
 // @ts-ignore
-const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+const visualViewport = typeof document !== "undefined" && window.visualViewport;
 function isScrollable(node) {
-    let style = window.getComputedStyle(node);
+    const style = window.getComputedStyle(node);
     return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
 }
 function getScrollParent(node) {
@@ -116,15 +119,15 @@ function getScrollParent(node) {
 }
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([
-    'checkbox',
-    'radio',
-    'range',
-    'color',
-    'file',
-    'image',
-    'button',
-    'submit',
-    'reset'
+    "checkbox",
+    "radio",
+    "range",
+    "color",
+    "file",
+    "image",
+    "button",
+    "submit",
+    "reset"
 ]);
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
@@ -134,7 +137,7 @@ let restore;
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */ function usePreventScroll(options = {}) {
-    let { isDisabled } = options;
+    const { isDisabled } = options;
     useIsomorphicLayoutEffect(()=>{
         if (isDisabled) {
             return;
@@ -148,7 +151,7 @@ let restore;
         return ()=>{
             preventScrollCount--;
             if (preventScrollCount === 0) {
-                restore == null ? void 0 : restore();
+                restore?.();
             }
         };
     }, [
@@ -184,7 +187,7 @@ let restore;
 function preventScrollMobileSafari() {
     let scrollable;
     let lastY = 0;
-    let onTouchStart = (e)=>{
+    const onTouchStart = (e)=>{
         // Store the nearest scrollable parent element from the element that the user touched.
         scrollable = getScrollParent(e.target);
         if (scrollable === document.documentElement && scrollable === document.body) {
@@ -192,7 +195,7 @@ function preventScrollMobileSafari() {
         }
         lastY = e.changedTouches[0].pageY;
     };
-    let onTouchMove = (e)=>{
+    const onTouchMove = (e)=>{
         // Prevent scrolling the window.
         if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
             e.preventDefault();
@@ -202,9 +205,9 @@ function preventScrollMobileSafari() {
         // of a nested scrollable area, otherwise mobile Safari will start scrolling
         // the window instead. Unfortunately, this disables bounce scrolling when at
         // the top but it's the best we can do.
-        let y = e.changedTouches[0].pageY;
-        let scrollTop = scrollable.scrollTop;
-        let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+        const y = e.changedTouches[0].pageY;
+        const scrollTop = scrollable.scrollTop;
+        const bottom = scrollable.scrollHeight - scrollable.clientHeight;
         if (bottom === 0) {
             return;
         }
@@ -213,31 +216,31 @@ function preventScrollMobileSafari() {
         }
         lastY = y;
     };
-    let onTouchEnd = (e)=>{
-        let target = e.target;
+    const onTouchEnd = (e)=>{
+        const target = e.target;
         // Apply this change if we're not already focused on the target element
         if (isInput(target) && target !== document.activeElement) {
             e.preventDefault();
             // Apply a transform to trick Safari into thinking the input is at the top of the page
             // so it doesn't try to scroll it into view. When tapping on an input, this needs to
             // be done before the "focus" event, so we have to focus the element ourselves.
-            target.style.transform = 'translateY(-2000px)';
+            target.style.transform = "translateY(-2000px)";
             target.focus();
             requestAnimationFrame(()=>{
-                target.style.transform = '';
+                target.style.transform = "";
             });
         }
     };
-    let onFocus = (e)=>{
-        let target = e.target;
+    const onFocus = (e)=>{
+        const target = e.target;
         if (isInput(target)) {
             // Transform also needs to be applied in the focus event in cases where focus moves
             // other than tapping on an input directly, e.g. the next/previous buttons in the
             // software keyboard. In these cases, it seems applying the transform in the focus event
             // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
-            target.style.transform = 'translateY(-2000px)';
+            target.style.transform = "translateY(-2000px)";
             requestAnimationFrame(()=>{
-                target.style.transform = '';
+                target.style.transform = "";
                 // This will have prevented the browser from scrolling the focused element into view,
                 // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
                 if (visualViewport) {
@@ -250,7 +253,7 @@ function preventScrollMobileSafari() {
                     } else {
                         // Otherwise, wait for the visual viewport to resize before scrolling so we can
                         // measure the correct position to scroll to.
-                        visualViewport.addEventListener('resize', ()=>scrollIntoView(target), {
+                        visualViewport.addEventListener("resize", ()=>scrollIntoView(target), {
                             once: true
                         });
                     }
@@ -258,7 +261,7 @@ function preventScrollMobileSafari() {
             });
         }
     };
-    let onWindowScroll = ()=>{
+    const onWindowScroll = ()=>{
         // Last resort. If the window scrolled, scroll it back to the top.
         // It should always be at the top because the body will have a negative margin (see below).
         window.scrollTo(0, 0);
@@ -266,21 +269,21 @@ function preventScrollMobileSafari() {
     // Record the original scroll position so we can restore it.
     // Then apply a negative margin to the body to offset it by the scroll position. This will
     // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
-    let restoreStyles = chain$1(setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`));
+    const scrollX = window.pageXOffset;
+    const scrollY = window.pageYOffset;
+    const restoreStyles = chain$1(setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`));
     // Scroll to the top. The negative margin on the body will make this appear the same.
     window.scrollTo(0, 0);
-    let removeEvents = chain$1(addEvent(document, 'touchstart', onTouchStart, {
+    const removeEvents = chain$1(addEvent(document, "touchstart", onTouchStart, {
         passive: false,
         capture: true
-    }), addEvent(document, 'touchmove', onTouchMove, {
+    }), addEvent(document, "touchmove", onTouchMove, {
         passive: false,
         capture: true
-    }), addEvent(document, 'touchend', onTouchEnd, {
+    }), addEvent(document, "touchend", onTouchEnd, {
         passive: false,
         capture: true
-    }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
+    }), addEvent(document, "focus", onFocus, true), addEvent(window, "scroll", onWindowScroll));
     return ()=>{
         // Restore styles and scroll the page back to where it was.
         restoreStyles();
@@ -292,7 +295,7 @@ function preventScrollMobileSafari() {
 function setStyle(element, style, value) {
     // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
     // @ts-ignore
-    let cur = element.style[style];
+    const cur = element.style[style];
     // @ts-ignore
     element.style[style] = value;
     return ()=>{
@@ -310,14 +313,14 @@ function addEvent(target, event, handler, options) {
     };
 }
 function scrollIntoView(target) {
-    let root = document.scrollingElement || document.documentElement;
+    const root = document.scrollingElement || document.documentElement;
     while(target && target !== root){
         // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
-        let scrollable = getScrollParent(target);
+        const scrollable = getScrollParent(target);
         if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
-            let scrollableTop = scrollable.getBoundingClientRect().top;
-            let targetTop = target.getBoundingClientRect().top;
-            let targetBottom = target.getBoundingClientRect().bottom;
+            const scrollableTop = scrollable.getBoundingClientRect().top;
+            const targetTop = target.getBoundingClientRect().top;
+            const targetBottom = target.getBoundingClientRect().bottom;
             // Buffer is needed for some edge cases
             const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
             if (targetBottom > keyboardHeight) {
@@ -360,7 +363,7 @@ function isInput(target) {
 const cache = new WeakMap();
 function set(el, styles, ignoreCache = false) {
     if (!el || !(el instanceof HTMLElement)) return;
-    let originalStyles = {};
+    const originalStyles = {};
     Object.entries(styles).forEach(([key, value])=>{
         if (key.startsWith('--')) {
             el.style.setProperty(key, value);
@@ -374,7 +377,7 @@ function set(el, styles, ignoreCache = false) {
 }
 function reset(el, prop) {
     if (!el || !(el instanceof HTMLElement)) return;
-    let originalStyles = cache.get(el);
+    const originalStyles = cache.get(el);
     if (!originalStyles) {
         return;
     }
@@ -458,7 +461,7 @@ function useCallbackRef(callback) {
         callbackRef.current = callback;
     });
     // https://github.com/facebook/react/issues/19240
-    return React__default.useMemo(()=>(...args)=>callbackRef.current == null ? void 0 : callbackRef.current.call(callbackRef, ...args), []);
+    return React__default.useMemo(()=>(...args)=>callbackRef.current?.(...args), []);
 }
 function useUncontrolledState({ defaultProp, onChange }) {
     const uncontrolledState = React__default.useState(defaultProp);
@@ -505,13 +508,14 @@ function useControllableState({ prop, defaultProp, onChange = ()=>{} }) {
     ];
 }
 
-function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = 'bottom', container, snapToSequentialPoint }) {
+// @ts-nocheck [FIXME] See after monorepo migration
+function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
     const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
         prop: activeSnapPointProp,
-        defaultProp: snapPoints == null ? void 0 : snapPoints[0],
+        defaultProp: snapPoints?.[0],
         onChange: setActiveSnapPointProp
     });
-    const [windowDimensions, setWindowDimensions] = React__default.useState(typeof window !== 'undefined' ? {
+    const [windowDimensions, setWindowDimensions] = React__default.useState(typeof window !== "undefined" ? {
         innerWidth: window.innerWidth,
         innerHeight: window.innerHeight
     } : undefined);
@@ -522,17 +526,14 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
                 innerHeight: window.innerHeight
             });
         }
-        window.addEventListener('resize', onResize);
-        return ()=>window.removeEventListener('resize', onResize);
+        window.addEventListener("resize", onResize);
+        return ()=>window.removeEventListener("resize", onResize);
     }, []);
-    const isLastSnapPoint = React__default.useMemo(()=>activeSnapPoint === (snapPoints == null ? void 0 : snapPoints[snapPoints.length - 1]) || null, [
+    const isLastSnapPoint = React__default.useMemo(()=>activeSnapPoint === snapPoints?.[snapPoints.length - 1] || null, [
         snapPoints,
         activeSnapPoint
     ]);
-    const activeSnapPointIndex = React__default.useMemo(()=>{
-        var _snapPoints_findIndex;
-        return (_snapPoints_findIndex = snapPoints == null ? void 0 : snapPoints.findIndex((snapPoint)=>snapPoint === activeSnapPoint)) != null ? _snapPoints_findIndex : null;
-    }, [
+    const activeSnapPointIndex = React__default.useMemo(()=>snapPoints?.findIndex((snapPoint)=>snapPoint === activeSnapPoint) ?? null, [
         snapPoints,
         activeSnapPoint
     ]);
@@ -541,16 +542,15 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         const containerSize = container ? {
             width: container.getBoundingClientRect().width,
             height: container.getBoundingClientRect().height
-        } : typeof window !== 'undefined' ? {
+        } : typeof window !== "undefined" ? {
             width: window.innerWidth,
             height: window.innerHeight
         } : {
             width: 0,
             height: 0
         };
-        var _snapPoints_map;
-        return (_snapPoints_map = snapPoints == null ? void 0 : snapPoints.map((snapPoint)=>{
-            const isPx = typeof snapPoint === 'string';
+        return snapPoints?.map((snapPoint)=>{
+            const isPx = typeof snapPoint === "string";
             let snapPointAsNumber = 0;
             if (isPx) {
                 snapPointAsNumber = parseInt(snapPoint, 10);
@@ -558,45 +558,44 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             if (isVertical(direction)) {
                 const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
                 if (windowDimensions) {
-                    return direction === 'bottom' ? containerSize.height - height : -containerSize.height + height;
+                    return direction === "bottom" ? containerSize.height - height : -containerSize.height + height;
                 }
                 return height;
             }
             const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
             if (windowDimensions) {
-                return direction === 'right' ? containerSize.width - width : -containerSize.width + width;
+                return direction === "right" ? containerSize.width - width : -containerSize.width + width;
             }
             return width;
-        })) != null ? _snapPoints_map : [];
+        }) ?? [];
     }, [
         snapPoints,
         windowDimensions,
         container
     ]);
-    const activeSnapPointOffset = React__default.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset == null ? void 0 : snapPointsOffset[activeSnapPointIndex] : null, [
+    const activeSnapPointOffset = React__default.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [
         snapPointsOffset,
         activeSnapPointIndex
     ]);
     const snapToPoint = React__default.useCallback((dimension)=>{
-        var _snapPointsOffset_findIndex;
-        const newSnapPointIndex = (_snapPointsOffset_findIndex = snapPointsOffset == null ? void 0 : snapPointsOffset.findIndex((snapPointDim)=>snapPointDim === dimension)) != null ? _snapPointsOffset_findIndex : null;
+        const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim)=>snapPointDim === dimension) ?? null;
         onSnapPointChange(newSnapPointIndex);
         set(drawerRef.current, {
-            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
             transform: isVertical(direction) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`
         });
         if (snapPointsOffset && newSnapPointIndex !== snapPointsOffset.length - 1 && fadeFromIndex !== undefined && newSnapPointIndex !== fadeFromIndex && newSnapPointIndex < fadeFromIndex) {
             set(overlayRef.current, {
-                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-                opacity: '0'
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+                opacity: "0"
             });
         } else {
             set(overlayRef.current, {
-                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-                opacity: '1'
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+                opacity: "1"
             });
         }
-        setActiveSnapPoint(snapPoints == null ? void 0 : snapPoints[Math.max(newSnapPointIndex, 0)]);
+        setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
     }, [
         drawerRef.current,
         snapPoints,
@@ -607,9 +606,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     ]);
     React__default.useEffect(()=>{
         if (activeSnapPoint || activeSnapPointProp) {
-            var _snapPoints_findIndex;
-            const newIndex = (_snapPoints_findIndex = snapPoints == null ? void 0 : snapPoints.findIndex((snapPoint)=>snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint)) != null ? _snapPoints_findIndex : -1;
-            if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === 'number') {
+            const newIndex = snapPoints?.findIndex((snapPoint)=>snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint) ?? -1;
+            if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") {
                 snapToPoint(snapPointsOffset[newIndex]);
             }
         }
@@ -622,13 +620,13 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     ]);
     function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
         if (fadeFromIndex === undefined) return;
-        const currentPosition = direction === 'bottom' || direction === 'right' ? (activeSnapPointOffset != null ? activeSnapPointOffset : 0) - draggedDistance : (activeSnapPointOffset != null ? activeSnapPointOffset : 0) + draggedDistance;
+        const currentPosition = direction === "bottom" || direction === "right" ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
         const isFirst = activeSnapPointIndex === 0;
         const hasDraggedUp = draggedDistance > 0;
         if (isOverlaySnapPoint) {
             set(overlayRef.current, {
-                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`
             });
         }
         if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
@@ -641,8 +639,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             return;
         }
         // Find the closest snap point to the current position
-        const closestSnapPoint = snapPointsOffset == null ? void 0 : snapPointsOffset.reduce((prev, curr)=>{
-            if (typeof prev !== 'number' || typeof curr !== 'number') return prev;
+        const closestSnapPoint = snapPointsOffset?.reduce((prev, curr)=>{
+            if (typeof prev !== "number" || typeof curr !== "number") return prev;
             return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
         });
         const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
@@ -664,12 +662,12 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     }
     function onDrag({ draggedDistance }) {
         if (activeSnapPointOffset === null) return;
-        const newValue = direction === 'bottom' || direction === 'right' ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
+        const newValue = direction === "bottom" || direction === "right" ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
         // Don't do anything if we exceed the last(biggest) snap point
-        if ((direction === 'bottom' || direction === 'right') && newValue < snapPointsOffset[snapPointsOffset.length - 1]) {
+        if ((direction === "bottom" || direction === "right") && newValue < snapPointsOffset[snapPointsOffset.length - 1]) {
             return;
         }
-        if ((direction === 'top' || direction === 'left') && newValue > snapPointsOffset[snapPointsOffset.length - 1]) {
+        if ((direction === "top" || direction === "left") && newValue > snapPointsOffset[snapPointsOffset.length - 1]) {
             return;
         }
         set(drawerRef.current, {
@@ -677,7 +675,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         });
     }
     function getPercentageDragged(absDraggedDistance, isDraggingDown) {
-        if (!snapPoints || typeof activeSnapPointIndex !== 'number' || !snapPointsOffset || fadeFromIndex === undefined) return null;
+        if (!snapPoints || typeof activeSnapPointIndex !== "number" || !snapPointsOffset || fadeFromIndex === undefined) return null;
         // If this is true we are dragging to a snap point that is supposed to have an overlay
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
         const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex;
@@ -876,29 +874,28 @@ let previousBodyPosition = null;
     };
 }
 
-function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = 'bottom', defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
-    var _drawerRef_current, _drawerRef_current1;
+function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
         onChange: (o)=>{
-            onOpenChange == null ? void 0 : onOpenChange(o);
+            onOpenChange?.(o);
             if (!o && !nested) {
                 restorePositionSetting();
             }
             setTimeout(()=>{
-                onAnimationEnd == null ? void 0 : onAnimationEnd(o);
+                onAnimationEnd?.(o);
             }, TRANSITIONS.DURATION * 1000);
             if (o && !modal) {
-                if (typeof window !== 'undefined') {
+                if (typeof window !== "undefined") {
                     window.requestAnimationFrame(()=>{
-                        document.body.style.pointerEvents = 'auto';
+                        document.body.style.pointerEvents = "auto";
                     });
                 }
             }
             if (!o) {
                 // This will be removed when the exit animation ends (`500ms`)
-                document.body.style.pointerEvents = 'auto';
+                document.body.style.pointerEvents = "auto";
             }
         }
     });
@@ -917,8 +914,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const shouldAnimate = React__default.useRef(!defaultOpen);
     const previousDiffFromInitial = React__default.useRef(0);
     const drawerRef = React__default.useRef(null);
-    const drawerHeightRef = React__default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
-    const drawerWidthRef = React__default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
+    const drawerHeightRef = React__default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
+    const drawerWidthRef = React__default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
     const initialDrawerHeight = React__default.useRef(0);
     const onSnapPointChange = React__default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
@@ -942,7 +939,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const { restorePositionSetting } = usePositionFixed({
         isOpen,
         modal,
-        nested: nested != null ? nested : false,
+        nested: nested ?? false,
         hasBeenOpened,
         preventScrollRestoration,
         noBodyStyles
@@ -951,16 +948,15 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
     function onPress(event) {
-        var _drawerRef_current, _drawerRef_current1;
         if (!dismissible && !snapPoints) return;
         if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
-        drawerHeightRef.current = ((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0;
-        drawerWidthRef.current = ((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0;
+        drawerHeightRef.current = drawerRef.current?.getBoundingClientRect().height || 0;
+        drawerWidthRef.current = drawerRef.current?.getBoundingClientRect().width || 0;
         setIsDragging(true);
         dragStartTime.current = new Date();
         // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
         if (isIOS()) {
-            window.addEventListener('touchend', ()=>isAllowedToDrag.current = false, {
+            window.addEventListener("touchend", ()=>isAllowedToDrag.current = false, {
                 once: true
             });
         }
@@ -969,19 +965,18 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
     }
     function shouldDrag(el, isDraggingInDirection) {
-        var _window_getSelection;
         let element = el;
-        const highlightedText = (_window_getSelection = window.getSelection()) == null ? void 0 : _window_getSelection.toString();
+        const highlightedText = window.getSelection()?.toString();
         const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
         const date = new Date();
         // Fixes https://github.com/emilkowalski/vaul/issues/483
-        if (element.tagName === 'SELECT') {
+        if (element.tagName === "SELECT") {
             return false;
         }
-        if (element.hasAttribute('data-vaul-no-drag') || element.closest('[data-vaul-no-drag]')) {
+        if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) {
             return false;
         }
-        if (direction === 'right' || direction === 'left') {
+        if (direction === "right" || direction === "left") {
             return true;
         }
         // Allow scrolling when animating
@@ -989,7 +984,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             return false;
         }
         if (swipeAmount !== null) {
-            if (direction === 'bottom' ? swipeAmount > 0 : swipeAmount < 0) {
+            if (direction === "bottom" ? swipeAmount > 0 : swipeAmount < 0) {
                 return true;
             }
         }
@@ -1016,7 +1011,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
                     // The element is scrollable and not scrolled to the top, so don't drag
                     return false;
                 }
-                if (element.getAttribute('role') === 'dialog') {
+                if (element.getAttribute("role") === "dialog") {
                     return true;
                 }
             }
@@ -1032,7 +1027,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         }
         // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
         if (isDragging) {
-            const directionMultiplier = direction === 'bottom' || direction === 'right' ? 1 : -1;
+            const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
             const draggedDistance = (pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX)) * directionMultiplier;
             const isDraggingInDirection = draggedDistance > 0;
             // Pre condition for disallowing dragging in the close direction.
@@ -1041,8 +1036,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) return;
             // We need to capture last time when drag with scroll was triggered and have a timeout between
             const absDraggedDistance = Math.abs(draggedDistance);
-            const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
-            const drawerDimension = direction === 'bottom' || direction === 'top' ? drawerHeightRef.current : drawerWidthRef.current;
+            const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
+            const drawerDimension = direction === "bottom" || direction === "top" ? drawerHeightRef.current : drawerWidthRef.current;
             // Calculate the percentage dragged, where 1 is the closed position
             let percentageDragged = absDraggedDistance / drawerDimension;
             const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingInDirection);
@@ -1058,10 +1053,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
             isAllowedToDrag.current = true;
             set(drawerRef.current, {
-                transition: 'none'
+                transition: "none"
             });
             set(overlayRef.current, {
-                transition: 'none'
+                transition: "none"
             });
             if (snapPoints) {
                 onDragSnapPoints({
@@ -1079,10 +1074,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             }
             const opacityValue = 1 - percentageDragged;
             if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
-                onDragProp == null ? void 0 : onDragProp(event, percentageDragged);
+                onDragProp?.(event, percentageDragged);
                 set(overlayRef.current, {
                     opacity: `${opacityValue}`,
-                    transition: 'none'
+                    transition: "none"
                 }, true);
             }
             if (wrapper && overlayRef.current && shouldScaleBackground) {
@@ -1093,7 +1088,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
                 set(wrapper, {
                     borderRadius: `${borderRadiusValue}px`,
                     transform: isVertical(direction) ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)` : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
-                    transition: 'none'
+                    transition: "none"
                 }, true);
             }
             if (!snapPoints) {
@@ -1110,13 +1105,11 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         });
     }, []);
     React__default.useEffect(()=>{
-        var _window_visualViewport;
         function onVisualViewportChange() {
             if (!drawerRef.current || !repositionInputs) return;
             const focusedElement = document.activeElement;
             if (isInput(focusedElement) || keyboardIsOpen.current) {
-                var _window_visualViewport;
-                const visualViewportHeight = ((_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.height) || 0;
+                const visualViewportHeight = window.visualViewport?.height || 0;
                 const totalHeight = window.innerHeight;
                 // This is the height of the keyboard
                 let diffFromInitial = totalHeight - visualViewportHeight;
@@ -1160,11 +1153,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
                 }
             }
         }
-        (_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.addEventListener('resize', onVisualViewportChange);
-        return ()=>{
-            var _window_visualViewport;
-            return (_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.removeEventListener('resize', onVisualViewportChange);
-        };
+        window.visualViewport?.addEventListener("resize", onVisualViewportChange);
+        return ()=>window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
     }, [
         activeSnapPointIndex,
         snapPoints,
@@ -1172,7 +1162,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     ]);
     function closeDrawer(fromWithin) {
         cancelDrag();
-        onClose == null ? void 0 : onClose();
+        onClose?.();
         if (!fromWithin) {
             setIsOpen(false);
         }
@@ -1184,31 +1174,31 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     }
     function resetDrawer() {
         if (!drawerRef.current) return;
-        const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
+        const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
         const currentSwipeAmount = getTranslate(drawerRef.current, direction);
         set(drawerRef.current, {
-            transform: 'translate3d(0, 0, 0)',
-            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+            transform: "translate3d(0, 0, 0)",
+            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`
         });
         set(overlayRef.current, {
-            transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-            opacity: '1'
+            transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+            opacity: "1"
         });
         // Don't reset background if swiped upwards
         if (shouldScaleBackground && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) {
             set(wrapper, {
                 borderRadius: `${BORDER_RADIUS}px`,
-                overflow: 'hidden',
+                overflow: "hidden",
                 ...isVertical(direction) ? {
                     transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
-                    transformOrigin: 'top'
+                    transformOrigin: "top"
                 } : {
                     transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
-                    transformOrigin: 'left'
+                    transformOrigin: "left"
                 },
-                transitionProperty: 'transform, border-radius',
+                transitionProperty: "transform, border-radius",
                 transitionDuration: `${TRANSITIONS.DURATION}s`,
-                transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+                transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`
             }, true);
         }
     }
@@ -1239,50 +1229,48 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             }, 200);
         }
         if (snapPoints) {
-            const directionMultiplier = direction === 'bottom' || direction === 'right' ? 1 : -1;
+            const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
             onReleaseSnapPoints({
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
                 dismissible
             });
-            onReleaseProp == null ? void 0 : onReleaseProp(event, true);
+            onReleaseProp?.(event, true);
             return;
         }
         // Moved upwards, don't do anything
-        if (direction === 'bottom' || direction === 'right' ? distMoved > 0 : distMoved < 0) {
+        if (direction === "bottom" || direction === "right" ? distMoved > 0 : distMoved < 0) {
             resetDrawer();
-            onReleaseProp == null ? void 0 : onReleaseProp(event, true);
+            onReleaseProp?.(event, true);
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
             closeDrawer();
-            onReleaseProp == null ? void 0 : onReleaseProp(event, false);
+            onReleaseProp?.(event, false);
             return;
         }
-        var _drawerRef_current_getBoundingClientRect_height;
-        const visibleDrawerHeight = Math.min((_drawerRef_current_getBoundingClientRect_height = drawerRef.current.getBoundingClientRect().height) != null ? _drawerRef_current_getBoundingClientRect_height : 0, window.innerHeight);
-        var _drawerRef_current_getBoundingClientRect_width;
-        const visibleDrawerWidth = Math.min((_drawerRef_current_getBoundingClientRect_width = drawerRef.current.getBoundingClientRect().width) != null ? _drawerRef_current_getBoundingClientRect_width : 0, window.innerWidth);
-        const isHorizontalSwipe = direction === 'left' || direction === 'right';
+        const visibleDrawerHeight = Math.min(drawerRef.current.getBoundingClientRect().height ?? 0, window.innerHeight);
+        const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
+        const isHorizontalSwipe = direction === "left" || direction === "right";
         if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
             closeDrawer();
-            onReleaseProp == null ? void 0 : onReleaseProp(event, false);
+            onReleaseProp?.(event, false);
             return;
         }
-        onReleaseProp == null ? void 0 : onReleaseProp(event, true);
+        onReleaseProp?.(event, true);
         resetDrawer();
     }
     React__default.useEffect(()=>{
         // Trigger enter animation without using CSS animation
         if (isOpen) {
             set(document.documentElement, {
-                scrollBehavior: 'auto'
+                scrollBehavior: "auto"
             });
             openTime.current = new Date();
         }
         return ()=>{
-            reset(document.documentElement, 'scrollBehavior');
+            reset(document.documentElement, "scrollBehavior");
         };
     }, [
         isOpen
@@ -1294,14 +1282,14 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             window.clearTimeout(nestedOpenChangeTimer.current);
         }
         set(drawerRef.current, {
-            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
             transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${initialTranslate}px, 0)` : `scale(${scale}) translate3d(${initialTranslate}px, 0, 0)`
         });
         if (!o && drawerRef.current) {
             nestedOpenChangeTimer.current = setTimeout(()=>{
                 const translateValue = getTranslate(drawerRef.current, direction);
                 set(drawerRef.current, {
-                    transition: 'none',
+                    transition: "none",
                     transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
                 });
             }, 500);
@@ -1314,7 +1302,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         const newTranslate = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT;
         set(drawerRef.current, {
             transform: isVertical(direction) ? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)` : `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
-            transition: 'none'
+            transition: "none"
         });
     }
     function onNestedRelease(_event, o) {
@@ -1323,7 +1311,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         const translate = o ? -NESTED_DISPLACEMENT : 0;
         if (o) {
             set(drawerRef.current, {
-                transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+                transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
                 transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${translate}px, 0)` : `scale(${scale}) translate3d(${translate}px, 0, 0)`
             });
         }
@@ -1332,13 +1320,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         if (!modal) {
             // Need to do this manually unfortunately
             window.requestAnimationFrame(()=>{
-                document.body.style.pointerEvents = 'auto';
+                document.body.style.pointerEvents = "auto";
             });
         }
     }, [
         modal
     ]);
-    return /*#__PURE__*/ React__default.createElement(Dialog.Root, {
+    return /*#__PURE__*/ jsx(Dialog.Root, {
         defaultOpen: defaultOpen,
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
@@ -1350,40 +1338,42 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             setIsOpen(open);
         },
         open: isOpen,
-        modal: modal
-    }, /*#__PURE__*/ React__default.createElement(DrawerContext.Provider, {
-        value: {
-            activeSnapPoint,
-            snapPoints,
-            setActiveSnapPoint,
-            drawerRef,
-            overlayRef,
-            onOpenChange,
-            onPress,
-            onRelease,
-            onDrag,
-            dismissible,
-            shouldAnimate,
-            handleOnly,
-            isOpen,
-            isDragging,
-            shouldFade,
-            closeDrawer,
-            onNestedDrag,
-            onNestedOpenChange,
-            onNestedRelease,
-            keyboardIsOpen,
-            modal,
-            snapPointsOffset,
-            activeSnapPointIndex,
-            direction,
-            shouldScaleBackground,
-            setBackgroundColorOnScale,
-            noBodyStyles,
-            container,
-            autoFocus
-        }
-    }, children));
+        modal: modal,
+        children: /*#__PURE__*/ jsx(DrawerContext.Provider, {
+            value: {
+                activeSnapPoint,
+                snapPoints,
+                setActiveSnapPoint,
+                drawerRef,
+                overlayRef,
+                onOpenChange,
+                onPress,
+                onRelease,
+                onDrag,
+                dismissible,
+                shouldAnimate,
+                handleOnly,
+                isOpen,
+                isDragging,
+                shouldFade,
+                closeDrawer,
+                onNestedDrag,
+                onNestedOpenChange,
+                onNestedRelease,
+                keyboardIsOpen,
+                modal,
+                snapPointsOffset,
+                activeSnapPointIndex,
+                direction,
+                shouldScaleBackground,
+                setBackgroundColorOnScale,
+                noBodyStyles,
+                container,
+                autoFocus
+            },
+            children: children
+        })
+    });
 }
 const Overlay = /*#__PURE__*/ React__default.forwardRef(function({ ...rest }, ref) {
     const { overlayRef, snapPoints, onRelease, shouldFade, isOpen, modal, shouldAnimate } = useDrawerContext();
@@ -1396,17 +1386,17 @@ const Overlay = /*#__PURE__*/ React__default.forwardRef(function({ ...rest }, re
     if (!modal) {
         return null;
     }
-    return /*#__PURE__*/ React__default.createElement(Dialog.Backdrop, {
+    return /*#__PURE__*/ jsx(Dialog.Backdrop, {
         onMouseUp: onMouseUp,
         ref: composedRef,
         "data-vaul-overlay": "",
-        "data-vaul-snap-points": isOpen && hasSnapPoints ? 'true' : 'false',
-        "data-vaul-snap-points-overlay": isOpen && shouldFade ? 'true' : 'false',
-        "data-vaul-animate": (shouldAnimate == null ? void 0 : shouldAnimate.current) ? 'true' : 'false',
+        "data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
+        "data-vaul-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
+        "data-vaul-animate": shouldAnimate?.current ? "true" : "false",
         ...rest
     });
 });
-Overlay.displayName = 'Drawer.Overlay';
+Overlay.displayName = "Drawer.Overlay";
 const Content = /*#__PURE__*/ React__default.forwardRef(function({ style, ...rest }, ref) {
     const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, shouldAnimate, autoFocus } = useDrawerContext();
     // Needed to use transition instead of animations
@@ -1423,10 +1413,10 @@ const Content = /*#__PURE__*/ React__default.forwardRef(function({ style, ...res
         const deltaX = Math.abs(delta.x);
         const isDeltaX = deltaX > deltaY;
         const dFactor = [
-            'bottom',
-            'right'
+            "bottom",
+            "right"
         ].includes(direction) ? 1 : -1;
-        if (direction === 'left' || direction === 'right') {
+        if (direction === "left" || direction === "right") {
             const isReverseDirection = delta.x * dFactor < 0;
             if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
                 return isDeltaX;
@@ -1452,66 +1442,68 @@ const Content = /*#__PURE__*/ React__default.forwardRef(function({ style, ...res
         wasBeyondThePointRef.current = false;
         onRelease(event);
     }
-    return /*#__PURE__*/ React__default.createElement(Dialog.Viewport, null, /*#__PURE__*/ React__default.createElement(Dialog.Popup, {
-        "data-vaul-drawer-direction": direction,
-        "data-vaul-drawer": "",
-        "data-vaul-delayed-snap-points": delayedSnapPoints ? 'true' : 'false',
-        "data-vaul-snap-points": isOpen && hasSnapPoints ? 'true' : 'false',
-        "data-vaul-custom-container": container ? 'true' : 'false',
-        "data-vaul-animate": (shouldAnimate == null ? void 0 : shouldAnimate.current) ? 'true' : 'false',
-        ...rest,
-        ref: composedRef,
-        style: snapPointsOffset && snapPointsOffset.length > 0 ? {
-            // @ts-ignore This should not be an error
-            '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex != null ? activeSnapPointIndex : 0]}px`,
-            ...style
-        } : style,
-        onPointerDown: (event)=>{
-            if (handleOnly) return;
-            rest.onPointerDown == null ? void 0 : rest.onPointerDown.call(rest, event);
-            pointerStartRef.current = {
-                x: event.pageX,
-                y: event.pageY
-            };
-            onPress(event);
-        },
-        onPointerMove: (event)=>{
-            lastKnownPointerEventRef.current = event;
-            if (handleOnly) return;
-            rest.onPointerMove == null ? void 0 : rest.onPointerMove.call(rest, event);
-            if (!pointerStartRef.current) return;
-            const yPosition = event.pageY - pointerStartRef.current.y;
-            const xPosition = event.pageX - pointerStartRef.current.x;
-            const swipeStartThreshold = event.pointerType === 'touch' ? 10 : 2;
-            const delta = {
-                x: xPosition,
-                y: yPosition
-            };
-            const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
-            if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+    return /*#__PURE__*/ jsx(Dialog.Viewport, {
+        children: /*#__PURE__*/ jsx(Dialog.Popup, {
+            "data-vaul-drawer-direction": direction,
+            "data-vaul-drawer": "",
+            "data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false",
+            "data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
+            "data-vaul-custom-container": container ? "true" : "false",
+            "data-vaul-animate": shouldAnimate?.current ? "true" : "false",
+            ...rest,
+            ref: composedRef,
+            style: snapPointsOffset && snapPointsOffset.length > 0 ? {
+                // @ts-ignore This should not be an error
+                "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]}px`,
+                ...style
+            } : style,
+            onPointerDown: (event)=>{
+                if (handleOnly) return;
+                rest.onPointerDown?.(event);
+                pointerStartRef.current = {
+                    x: event.pageX,
+                    y: event.pageY
+                };
+                onPress(event);
+            },
+            onPointerMove: (event)=>{
+                lastKnownPointerEventRef.current = event;
+                if (handleOnly) return;
+                rest.onPointerMove?.(event);
+                if (!pointerStartRef.current) return;
+                const yPosition = event.pageY - pointerStartRef.current.y;
+                const xPosition = event.pageX - pointerStartRef.current.x;
+                const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
+                const delta = {
+                    x: xPosition,
+                    y: yPosition
+                };
+                const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
+                if (isAllowedToSwipe) onDrag(event);
+                else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+                    pointerStartRef.current = null;
+                }
+            },
+            onPointerUp: (event)=>{
+                rest.onPointerUp?.(event);
                 pointerStartRef.current = null;
-            }
-        },
-        onPointerUp: (event)=>{
-            rest.onPointerUp == null ? void 0 : rest.onPointerUp.call(rest, event);
-            pointerStartRef.current = null;
-            wasBeyondThePointRef.current = false;
-            onRelease(event);
-        },
-        onPointerOut: (event)=>{
-            rest.onPointerOut == null ? void 0 : rest.onPointerOut.call(rest, event);
-            handleOnPointerUp(lastKnownPointerEventRef.current);
-        },
-        onContextMenu: (event)=>{
-            rest.onContextMenu == null ? void 0 : rest.onContextMenu.call(rest, event);
-            if (lastKnownPointerEventRef.current) {
+                wasBeyondThePointRef.current = false;
+                onRelease(event);
+            },
+            onPointerOut: (event)=>{
+                rest.onPointerOut?.(event);
                 handleOnPointerUp(lastKnownPointerEventRef.current);
+            },
+            onContextMenu: (event)=>{
+                rest.onContextMenu?.(event);
+                if (lastKnownPointerEventRef.current) {
+                    handleOnPointerUp(lastKnownPointerEventRef.current);
+                }
             }
-        }
-    }));
+        })
+    });
 });
-Content.displayName = 'Drawer.Content';
+Content.displayName = "Drawer.Content";
 const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle = false, children, ...rest }, ref) {
@@ -1564,7 +1556,7 @@ const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle =
         }
         shouldCancelInteractionRef.current = false;
     }
-    return /*#__PURE__*/ React__default.createElement("div", {
+    return /*#__PURE__*/ jsx("div", {
         onClick: handleStartCycle,
         onPointerCancel: handleCancelInteraction,
         onPointerDown: (e)=>{
@@ -1582,22 +1574,24 @@ const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle =
         },
         // onPointerUp is already handled by the content component
         ref: ref,
-        "data-vaul-drawer-visible": isOpen ? 'true' : 'false',
+        "data-vaul-drawer-visible": isOpen ? "true" : "false",
         "data-vaul-handle": "",
         "aria-hidden": "true",
-        ...rest
-    }, /*#__PURE__*/ React__default.createElement("span", {
-        "data-vaul-handle-hitarea": "",
-        "aria-hidden": "true"
-    }, children));
+        ...rest,
+        children: /*#__PURE__*/ jsx("span", {
+            "data-vaul-handle-hitarea": "",
+            "aria-hidden": "true",
+            children: children
+        })
+    });
 });
-Handle.displayName = 'Drawer.Handle';
+Handle.displayName = "Drawer.Handle";
 function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
     const { onNestedDrag, onNestedOpenChange, onNestedRelease } = useDrawerContext();
     if (!onNestedDrag) {
-        throw new Error('Drawer.NestedRoot must be placed in another drawer');
+        throw new Error("Drawer.NestedRoot must be placed in another drawer");
     }
-    return /*#__PURE__*/ React__default.createElement(Root, {
+    return /*#__PURE__*/ jsx(Root, {
         nested: true,
         open: nestedIsOpen,
         onClose: ()=>{
@@ -1605,13 +1599,13 @@ function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
         },
         onDrag: (e, p)=>{
             onNestedDrag(e, p);
-            onDrag == null ? void 0 : onDrag(e, p);
+            onDrag?.(e, p);
         },
         onOpenChange: (o)=>{
             if (o) {
                 onNestedOpenChange(o);
             }
-            onOpenChange == null ? void 0 : onOpenChange(o);
+            onOpenChange?.(o);
         },
         onRelease: onNestedRelease,
         ...rest
@@ -1620,7 +1614,7 @@ function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
 function Portal(props) {
     const context = useDrawerContext();
     const { container = context.container, ...portalProps } = props;
-    return /*#__PURE__*/ React__default.createElement(Dialog.Portal, {
+    return /*#__PURE__*/ jsx(Dialog.Portal, {
         container: container,
         ...portalProps
     });