base-vaul 0.0.1 → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1314 @@
+"use client";
+
+require('./index.css');
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let _base_ui_react = require("@base-ui/react");
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/context.ts
+const DrawerContext = react.default.createContext({
+	drawerRef: { current: null },
+	overlayRef: { current: null },
+	onPress: () => {},
+	onRelease: () => {},
+	onDrag: () => {},
+	onNestedDrag: () => {},
+	onNestedOpenChange: () => {},
+	onNestedRelease: () => {},
+	openProp: void 0,
+	dismissible: false,
+	isOpen: false,
+	isDragging: false,
+	keyboardIsOpen: { current: false },
+	snapPointsOffset: null,
+	snapPoints: null,
+	handleOnly: false,
+	modal: false,
+	shouldFade: false,
+	activeSnapPoint: null,
+	onOpenChange: () => {},
+	setActiveSnapPoint: () => {},
+	closeDrawer: () => {},
+	direction: "bottom",
+	shouldAnimate: { current: true },
+	shouldScaleBackground: false,
+	setBackgroundColorOnScale: true,
+	noBodyStyles: false,
+	container: null,
+	autoFocus: false
+});
+const useDrawerContext = () => {
+	const context = react.default.useContext(DrawerContext);
+	if (!context) throw new Error("useDrawerContext must be used within a Drawer.Root");
+	return context;
+};
+
+//#endregion
+//#region src/browser.ts
+function isMobileFirefox() {
+	const userAgent = navigator.userAgent;
+	return typeof window !== "undefined" && (/Firefox/.test(userAgent) && /Mobile/.test(userAgent) || /FxiOS/.test(userAgent));
+}
+function isMac() {
+	return testPlatform(/^Mac/);
+}
+function isIPhone() {
+	return testPlatform(/^iPhone/);
+}
+function isSafari() {
+	return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function isIPad() {
+	return testPlatform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
+}
+function isIOS() {
+	return isIPhone() || isIPad();
+}
+function testPlatform(re) {
+	return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.platform) : void 0;
+}
+
+//#endregion
+//#region src/use-prevent-scroll.ts
+const KEYBOARD_BUFFER = 24;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function chain$1(...callbacks) {
+	return (...args) => {
+		for (const callback of callbacks) if (typeof callback === "function") callback(...args);
+	};
+}
+const visualViewport = typeof document !== "undefined" && window.visualViewport;
+function isScrollable(node) {
+	const style = window.getComputedStyle(node);
+	return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+function getScrollParent(node) {
+	if (isScrollable(node)) node = node.parentElement;
+	while (node && !isScrollable(node)) node = node.parentElement;
+	return node || document.scrollingElement || document.documentElement;
+}
+const nonTextInputTypes = new Set([
+	"checkbox",
+	"radio",
+	"range",
+	"color",
+	"file",
+	"image",
+	"button",
+	"submit",
+	"reset"
+]);
+let preventScrollCount = 0;
+let restore;
+/**
+* Prevents scrolling on the document body on mount, and
+* restores it on unmount. Also ensures that content does not
+* shift due to the scrollbars disappearing.
+*/
+function usePreventScroll(options = {}) {
+	const { isDisabled } = options;
+	useIsomorphicLayoutEffect(() => {
+		if (isDisabled) return;
+		preventScrollCount++;
+		if (preventScrollCount === 1) {
+			if (isIOS()) restore = preventScrollMobileSafari();
+		}
+		return () => {
+			preventScrollCount--;
+			if (preventScrollCount === 0) restore === null || restore === void 0 || restore();
+		};
+	}, [isDisabled]);
+}
+function preventScrollMobileSafari() {
+	let scrollable;
+	let lastY = 0;
+	const onTouchStart = (e) => {
+		scrollable = getScrollParent(e.target);
+		if (scrollable === document.documentElement && scrollable === document.body) return;
+		lastY = e.changedTouches[0].pageY;
+	};
+	const onTouchMove = (e) => {
+		if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+			e.preventDefault();
+			return;
+		}
+		const y = e.changedTouches[0].pageY;
+		const scrollTop = scrollable.scrollTop;
+		const bottom = scrollable.scrollHeight - scrollable.clientHeight;
+		if (bottom === 0) return;
+		if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) e.preventDefault();
+		lastY = y;
+	};
+	const onTouchEnd = (e) => {
+		const target = e.target;
+		if (isInput(target) && target !== document.activeElement) {
+			e.preventDefault();
+			target.style.transform = "translateY(-2000px)";
+			target.focus();
+			requestAnimationFrame(() => {
+				target.style.transform = "";
+			});
+		}
+	};
+	const onFocus = (e) => {
+		const target = e.target;
+		if (isInput(target)) {
+			target.style.transform = "translateY(-2000px)";
+			requestAnimationFrame(() => {
+				target.style.transform = "";
+				if (visualViewport) if (visualViewport.height < window.innerHeight) requestAnimationFrame(() => {
+					scrollIntoView(target);
+				});
+				else visualViewport.addEventListener("resize", () => scrollIntoView(target), { once: true });
+			});
+		}
+	};
+	const onWindowScroll = () => {
+		window.scrollTo(0, 0);
+	};
+	const scrollX = window.pageXOffset;
+	const scrollY = window.pageYOffset;
+	const restoreStyles = chain$1(setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`));
+	window.scrollTo(0, 0);
+	const removeEvents = chain$1(addEvent(document, "touchstart", onTouchStart, {
+		passive: false,
+		capture: true
+	}), addEvent(document, "touchmove", onTouchMove, {
+		passive: false,
+		capture: true
+	}), addEvent(document, "touchend", onTouchEnd, {
+		passive: false,
+		capture: true
+	}), addEvent(document, "focus", onFocus, true), addEvent(window, "scroll", onWindowScroll));
+	return () => {
+		restoreStyles();
+		removeEvents();
+		window.scrollTo(scrollX, scrollY);
+	};
+}
+function setStyle(element, style, value) {
+	const cur = element.style[style];
+	element.style[style] = value;
+	return () => {
+		element.style[style] = cur;
+	};
+}
+function addEvent(target, event, handler, options) {
+	target.addEventListener(event, handler, options);
+	return () => {
+		target.removeEventListener(event, handler, options);
+	};
+}
+function scrollIntoView(target) {
+	const root = document.scrollingElement || document.documentElement;
+	while (target && target !== root) {
+		const scrollable = getScrollParent(target);
+		if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+			const scrollableTop = scrollable.getBoundingClientRect().top;
+			const targetTop = target.getBoundingClientRect().top;
+			if (target.getBoundingClientRect().bottom > scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER) scrollable.scrollTop += targetTop - scrollableTop;
+		}
+		target = scrollable.parentElement;
+	}
+}
+function isInput(target) {
+	return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+
+//#endregion
+//#region src/use-composed-refs.ts
+/**
+* Set a given ref to a given value
+* This utility takes care of different types of refs: callback refs and RefObject(s)
+*/
+function setRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* A utility to compose multiple refs together
+* Accepts callback refs and RefObject(s)
+*/
+function composeRefs(...refs) {
+	return (node) => refs.forEach((ref) => setRef(ref, node));
+}
+/**
+* A custom hook that composes multiple refs
+* Accepts callback refs and RefObject(s)
+*/
+function useComposedRefs(...refs) {
+	return react.useCallback(composeRefs(...refs), refs);
+}
+
+//#endregion
+//#region src/helpers.ts
+const cache = /* @__PURE__ */ new WeakMap();
+function set(el, styles, ignoreCache = false) {
+	if (!el || !(el instanceof HTMLElement)) return;
+	const originalStyles = {};
+	Object.entries(styles).forEach(([key, value]) => {
+		if (key.startsWith("--")) {
+			el.style.setProperty(key, value);
+			return;
+		}
+		originalStyles[key] = el.style[key];
+		el.style[key] = value;
+	});
+	if (ignoreCache) return;
+	cache.set(el, originalStyles);
+}
+function reset(el, prop) {
+	if (!el || !(el instanceof HTMLElement)) return;
+	const originalStyles = cache.get(el);
+	if (!originalStyles) return;
+	if (prop) el.style[prop] = originalStyles[prop];
+	else Object.entries(originalStyles).forEach(([key, value]) => {
+		el.style[key] = value;
+	});
+}
+const isVertical = (direction) => {
+	switch (direction) {
+		case "top":
+		case "bottom": return true;
+		case "left":
+		case "right": return false;
+		default: return direction;
+	}
+};
+function getTranslate(element, direction) {
+	if (!element) return null;
+	const style = window.getComputedStyle(element);
+	const transform = style.transform || style.webkitTransform || style.mozTransform;
+	let mat = transform.match(/^matrix3d\((.+)\)$/);
+	if (mat) return parseFloat(mat[1].split(", ")[isVertical(direction) ? 13 : 12]);
+	mat = transform.match(/^matrix\((.+)\)$/);
+	return mat ? parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
+}
+function dampenValue(v) {
+	return 8 * (Math.log(v + 1) - 2);
+}
+function assignStyle(element, style) {
+	if (!element) return () => {};
+	const prevStyle = element.style.cssText;
+	Object.assign(element.style, style);
+	return () => {
+		element.style.cssText = prevStyle;
+	};
+}
+/**
+* Receives functions as arguments and returns a new function that calls all.
+*/
+function chain(...fns) {
+	return (...args) => {
+		for (const fn of fns) if (typeof fn === "function") fn(...args);
+	};
+}
+
+//#endregion
+//#region src/constants.ts
+const TRANSITIONS = {
+	DURATION: .5,
+	EASE: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+const VELOCITY_THRESHOLD = .4;
+const CLOSE_THRESHOLD = .25;
+const SCROLL_LOCK_TIMEOUT = 100;
+const BORDER_RADIUS = 8;
+const NESTED_DISPLACEMENT = 16;
+const WINDOW_TOP_OFFSET = 26;
+const DRAG_CLASS = "vaul-dragging";
+
+//#endregion
+//#region src/use-controllable-state.ts
+function useCallbackRef(callback) {
+	const callbackRef = react.default.useRef(callback);
+	react.default.useEffect(() => {
+		callbackRef.current = callback;
+	});
+	return react.default.useMemo(() => ((...args) => {
+		var _callbackRef$current;
+		return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+	}), []);
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+	const uncontrolledState = react.default.useState(defaultProp);
+	const [value] = uncontrolledState;
+	const prevValueRef = react.default.useRef(value);
+	const handleChange = useCallbackRef(onChange);
+	react.default.useEffect(() => {
+		if (prevValueRef.current !== value) {
+			handleChange(value);
+			prevValueRef.current = value;
+		}
+	}, [
+		value,
+		prevValueRef,
+		handleChange
+	]);
+	return uncontrolledState;
+}
+function useControllableState({ prop, defaultProp, onChange = () => {} }) {
+	const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+		defaultProp,
+		onChange
+	});
+	const isControlled = prop !== void 0;
+	const value = isControlled ? prop : uncontrolledProp;
+	const handleChange = useCallbackRef(onChange);
+	return [value, react.default.useCallback((nextValue) => {
+		if (isControlled) {
+			const value$1 = typeof nextValue === "function" ? nextValue(prop) : nextValue;
+			if (value$1 !== prop) handleChange(value$1);
+		} else setUncontrolledProp(nextValue);
+	}, [
+		isControlled,
+		prop,
+		setUncontrolledProp,
+		handleChange
+	])];
+}
+
+//#endregion
+//#region src/use-snap-points.ts
+function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
+	const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
+		prop: activeSnapPointProp,
+		defaultProp: snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0],
+		onChange: setActiveSnapPointProp
+	});
+	const [windowDimensions, setWindowDimensions] = react.default.useState(typeof window !== "undefined" ? {
+		innerWidth: window.innerWidth,
+		innerHeight: window.innerHeight
+	} : void 0);
+	react.default.useEffect(() => {
+		function onResize() {
+			setWindowDimensions({
+				innerWidth: window.innerWidth,
+				innerHeight: window.innerHeight
+			});
+		}
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const isLastSnapPoint = react.default.useMemo(() => activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[snapPoints.length - 1]) || null, [snapPoints, activeSnapPoint]);
+	const activeSnapPointIndex = react.default.useMemo(() => (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex((snapPoint) => snapPoint === activeSnapPoint)) ?? null, [snapPoints, activeSnapPoint]);
+	const shouldFade = snapPoints && snapPoints.length > 0 && (fadeFromIndex || fadeFromIndex === 0) && !Number.isNaN(fadeFromIndex) && snapPoints[fadeFromIndex] === activeSnapPoint || !snapPoints;
+	const snapPointsOffset = react.default.useMemo(() => {
+		const containerSize = container ? {
+			width: container.getBoundingClientRect().width,
+			height: container.getBoundingClientRect().height
+		} : typeof window !== "undefined" ? {
+			width: window.innerWidth,
+			height: window.innerHeight
+		} : {
+			width: 0,
+			height: 0
+		};
+		return (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.map((snapPoint) => {
+			const isPx = typeof snapPoint === "string";
+			let snapPointAsNumber = 0;
+			if (isPx) snapPointAsNumber = parseInt(snapPoint, 10);
+			if (isVertical(direction)) {
+				const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
+				if (windowDimensions) 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 width;
+		})) ?? [];
+	}, [
+		snapPoints,
+		windowDimensions,
+		container
+	]);
+	const activeSnapPointOffset = react.default.useMemo(() => activeSnapPointIndex !== null ? snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : snapPointsOffset[activeSnapPointIndex] : null, [snapPointsOffset, activeSnapPointIndex]);
+	const snapToPoint = react.default.useCallback((dimension) => {
+		const newSnapPointIndex = (snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : snapPointsOffset.findIndex((snapPointDim) => snapPointDim === dimension)) ?? null;
+		onSnapPointChange(newSnapPointIndex);
+		set(drawerRef.current, {
+			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 !== void 0 && newSnapPointIndex !== fadeFromIndex && newSnapPointIndex < fadeFromIndex) set(overlayRef.current, {
+			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"
+		});
+		setActiveSnapPoint(snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[Math.max(newSnapPointIndex, 0)]);
+	}, [
+		drawerRef.current,
+		snapPoints,
+		snapPointsOffset,
+		fadeFromIndex,
+		overlayRef,
+		setActiveSnapPoint
+	]);
+	react.default.useEffect(() => {
+		if (activeSnapPoint || activeSnapPointProp) {
+			const newIndex = (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex((snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint)) ?? -1;
+			if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") snapToPoint(snapPointsOffset[newIndex]);
+		}
+	}, [
+		activeSnapPoint,
+		activeSnapPointProp,
+		snapPoints,
+		snapPointsOffset,
+		snapToPoint
+	]);
+	function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
+		if (fadeFromIndex === void 0) return;
+		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(",")})` });
+		if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
+			if (dismissible) closeDrawer();
+			else snapToPoint(snapPointsOffset[0]);
+			return;
+		}
+		if (!snapToSequentialPoint && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints) {
+			snapToPoint(snapPointsOffset[snapPoints.length - 1]);
+			return;
+		}
+		const closestSnapPoint = snapPointsOffset === null || snapPointsOffset === void 0 ? void 0 : 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;
+		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * .4) {
+			const dragDirection = hasDraggedUp ? 1 : -1;
+			if (dragDirection > 0 && isLastSnapPoint && snapPoints) {
+				snapToPoint(snapPointsOffset[snapPoints.length - 1]);
+				return;
+			}
+			if (isFirst && dragDirection < 0 && dismissible) closeDrawer();
+			if (activeSnapPointIndex === null) return;
+			snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
+			return;
+		}
+		snapToPoint(closestSnapPoint);
+	}
+	function onDrag({ draggedDistance }) {
+		if (activeSnapPointOffset === null) return;
+		const newValue = direction === "bottom" || direction === "right" ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
+		if ((direction === "bottom" || direction === "right") && newValue < snapPointsOffset[snapPointsOffset.length - 1]) return;
+		if ((direction === "top" || direction === "left") && newValue > snapPointsOffset[snapPointsOffset.length - 1]) return;
+		set(drawerRef.current, { transform: isVertical(direction) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)` });
+	}
+	function getPercentageDragged(absDraggedDistance, isDraggingDown) {
+		if (!snapPoints || typeof activeSnapPointIndex !== "number" || !snapPointsOffset || fadeFromIndex === void 0) return null;
+		const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
+		if (activeSnapPointIndex >= fadeFromIndex && isDraggingDown) return 0;
+		if (isOverlaySnapPoint && !isDraggingDown) return 1;
+		if (!shouldFade && !isOverlaySnapPoint) return null;
+		const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex + 1 : activeSnapPointIndex - 1;
+		const snapPointDistance = isOverlaySnapPoint ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1] : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
+		const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+		if (isOverlaySnapPoint) return 1 - percentageDragged;
+		else return percentageDragged;
+	}
+	return {
+		isLastSnapPoint,
+		activeSnapPoint,
+		shouldFade,
+		getPercentageDragged,
+		setActiveSnapPoint,
+		activeSnapPointIndex,
+		onRelease,
+		onDrag,
+		snapPointsOffset
+	};
+}
+
+//#endregion
+//#region src/use-scale-background.ts
+const noop = () => () => {};
+function useScaleBackground() {
+	const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
+	const timeoutIdRef = react.default.useRef(null);
+	const initialBackgroundColor = (0, react.useMemo)(() => document.body.style.backgroundColor, []);
+	function getScale() {
+		return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+	}
+	react.default.useEffect(() => {
+		if (isOpen && shouldScaleBackground) {
+			if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+			const wrapper = document.querySelector("[data-vaul-drawer-wrapper]") || document.querySelector("[vaul-drawer-wrapper]");
+			if (!wrapper) return;
+			chain(setBackgroundColorOnScale && !noBodyStyles ? assignStyle(document.body, { background: "black" }) : noop, assignStyle(wrapper, {
+				transformOrigin: isVertical(direction) ? "top" : "left",
+				transitionProperty: "transform, border-radius",
+				transitionDuration: `${TRANSITIONS.DURATION}s`,
+				transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`
+			}));
+			const wrapperStylesCleanup = assignStyle(wrapper, {
+				borderRadius: `${BORDER_RADIUS}px`,
+				overflow: "hidden",
+				...isVertical(direction) ? { transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)` } : { transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)` }
+			});
+			return () => {
+				wrapperStylesCleanup();
+				timeoutIdRef.current = window.setTimeout(() => {
+					if (initialBackgroundColor) document.body.style.background = initialBackgroundColor;
+					else document.body.style.removeProperty("background");
+				}, TRANSITIONS.DURATION * 1e3);
+			};
+		}
+	}, [
+		isOpen,
+		shouldScaleBackground,
+		initialBackgroundColor
+	]);
+}
+
+//#endregion
+//#region src/use-position-fixed.ts
+let previousBodyPosition = null;
+/**
+* This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+* I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+* Issues that this hook solves:
+* https://github.com/emilkowalski/vaul/issues/435
+* https://github.com/emilkowalski/vaul/issues/433
+* And more that I discovered, but were just not reported.
+*/
+function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles }) {
+	const [activeUrl, setActiveUrl] = react.default.useState(() => typeof window !== "undefined" ? window.location.href : "");
+	const scrollPos = react.default.useRef(0);
+	const setPositionFixed = react.default.useCallback(() => {
+		if (!isSafari()) return;
+		if (previousBodyPosition === null && isOpen && !noBodyStyles) {
+			previousBodyPosition = {
+				position: document.body.style.position,
+				top: document.body.style.top,
+				left: document.body.style.left,
+				height: document.body.style.height,
+				right: "unset"
+			};
+			const { scrollX, innerHeight } = window;
+			document.body.style.setProperty("position", "fixed", "important");
+			Object.assign(document.body.style, {
+				top: `${-scrollPos.current}px`,
+				left: `${-scrollX}px`,
+				right: "0px",
+				height: "auto"
+			});
+			window.setTimeout(() => window.requestAnimationFrame(() => {
+				const bottomBarHeight = innerHeight - window.innerHeight;
+				if (bottomBarHeight && scrollPos.current >= innerHeight) document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
+			}), 300);
+		}
+	}, [isOpen]);
+	const restorePositionSetting = react.default.useCallback(() => {
+		if (!isSafari()) return;
+		if (previousBodyPosition !== null && !noBodyStyles) {
+			const y = -parseInt(document.body.style.top, 10);
+			const x = -parseInt(document.body.style.left, 10);
+			Object.assign(document.body.style, previousBodyPosition);
+			window.requestAnimationFrame(() => {
+				if (preventScrollRestoration && activeUrl !== window.location.href) {
+					setActiveUrl(window.location.href);
+					return;
+				}
+				window.scrollTo(x, y);
+			});
+			previousBodyPosition = null;
+		}
+	}, [activeUrl]);
+	react.default.useEffect(() => {
+		function onScroll() {
+			scrollPos.current = window.scrollY;
+		}
+		onScroll();
+		window.addEventListener("scroll", onScroll);
+		return () => {
+			window.removeEventListener("scroll", onScroll);
+		};
+	}, []);
+	react.default.useEffect(() => {
+		if (!modal) return;
+		return () => {
+			if (typeof document === "undefined") return;
+			if (!!document.querySelector("[data-vaul-drawer]")) return;
+			restorePositionSetting();
+		};
+	}, [modal, restorePositionSetting]);
+	react.default.useEffect(() => {
+		if (nested || !hasBeenOpened) return;
+		if (isOpen) {
+			!window.matchMedia("(display-mode: standalone)").matches && setPositionFixed();
+			if (!modal) window.setTimeout(() => {
+				restorePositionSetting();
+			}, 500);
+		} else restorePositionSetting();
+	}, [
+		isOpen,
+		hasBeenOpened,
+		activeUrl,
+		modal,
+		nested,
+		setPositionFixed,
+		restorePositionSetting
+	]);
+	return { restorePositionSetting };
+}
+
+//#endregion
+//#region src/index.tsx
+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$current2;
+	const [isOpen = false, setIsOpen] = useControllableState({
+		defaultProp: defaultOpen,
+		prop: openProp,
+		onChange: (o) => {
+			onOpenChange === null || onOpenChange === void 0 || onOpenChange(o);
+			if (!o && !nested) restorePositionSetting();
+			setTimeout(() => {
+				onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd(o);
+			}, TRANSITIONS.DURATION * 1e3);
+			if (o && !modal) {
+				if (typeof window !== "undefined") window.requestAnimationFrame(() => {
+					document.body.style.pointerEvents = "auto";
+				});
+			}
+			if (!o) document.body.style.pointerEvents = "auto";
+		}
+	});
+	const [hasBeenOpened, setHasBeenOpened] = react.default.useState(false);
+	const [isDragging, setIsDragging] = react.default.useState(false);
+	const [justReleased, setJustReleased] = react.default.useState(false);
+	const overlayRef = react.default.useRef(null);
+	const openTime = react.default.useRef(null);
+	const dragStartTime = react.default.useRef(null);
+	const dragEndTime = react.default.useRef(null);
+	const lastTimeDragPrevented = react.default.useRef(null);
+	const isAllowedToDrag = react.default.useRef(false);
+	const nestedOpenChangeTimer = react.default.useRef(null);
+	const pointerStart = react.default.useRef(0);
+	const keyboardIsOpen = react.default.useRef(false);
+	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 || _drawerRef$current === void 0 ? void 0 : _drawerRef$current.getBoundingClientRect().height) || 0);
+	const drawerWidthRef = react.default.useRef(((_drawerRef$current2 = drawerRef.current) === null || _drawerRef$current2 === void 0 ? void 0 : _drawerRef$current2.getBoundingClientRect().width) || 0);
+	const initialDrawerHeight = react.default.useRef(0);
+	const { activeSnapPoint, activeSnapPointIndex, setActiveSnapPoint, onRelease: onReleaseSnapPoints, snapPointsOffset, onDrag: onDragSnapPoints, shouldFade, getPercentageDragged: getSnapPointsPercentageDragged } = useSnapPoints({
+		snapPoints,
+		activeSnapPointProp,
+		setActiveSnapPointProp,
+		drawerRef,
+		fadeFromIndex,
+		overlayRef,
+		onSnapPointChange: react.default.useCallback((activeSnapPointIndex$1) => {
+			if (snapPoints && activeSnapPointIndex$1 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
+		}, []),
+		direction,
+		container,
+		snapToSequentialPoint
+	});
+	usePreventScroll({ isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll });
+	const { restorePositionSetting } = usePositionFixed({
+		isOpen,
+		modal,
+		nested: nested ?? false,
+		hasBeenOpened,
+		preventScrollRestoration,
+		noBodyStyles
+	});
+	function getScale() {
+		return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+	}
+	function onPress(event) {
+		var _drawerRef$current3, _drawerRef$current4;
+		if (!dismissible && !snapPoints) return;
+		if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
+		drawerHeightRef.current = ((_drawerRef$current3 = drawerRef.current) === null || _drawerRef$current3 === void 0 ? void 0 : _drawerRef$current3.getBoundingClientRect().height) || 0;
+		drawerWidthRef.current = ((_drawerRef$current4 = drawerRef.current) === null || _drawerRef$current4 === void 0 ? void 0 : _drawerRef$current4.getBoundingClientRect().width) || 0;
+		setIsDragging(true);
+		dragStartTime.current = /* @__PURE__ */ new Date();
+		if (isIOS()) window.addEventListener("touchend", () => isAllowedToDrag.current = false, { once: true });
+		event.target.setPointerCapture(event.pointerId);
+		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 || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+		const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
+		const date = /* @__PURE__ */ new Date();
+		if (element.tagName === "SELECT") return false;
+		if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) return false;
+		if (direction === "right" || direction === "left") return true;
+		if (openTime.current && date.getTime() - openTime.current.getTime() < 500) return false;
+		if (swipeAmount !== null) {
+			if (direction === "bottom" ? swipeAmount > 0 : swipeAmount < 0) return true;
+		}
+		if (highlightedText && highlightedText.length > 0) return false;
+		if (lastTimeDragPrevented.current && date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout && swipeAmount === 0) {
+			lastTimeDragPrevented.current = date;
+			return false;
+		}
+		if (isDraggingInDirection) {
+			lastTimeDragPrevented.current = date;
+			return false;
+		}
+		while (element) {
+			if (element.scrollHeight > element.clientHeight) {
+				if (element.scrollTop !== 0) {
+					lastTimeDragPrevented.current = /* @__PURE__ */ new Date();
+					return false;
+				}
+				if (element.getAttribute("role") === "dialog") return true;
+			}
+			element = element.parentNode;
+		}
+		return true;
+	}
+	function onDrag(event) {
+		if (!drawerRef.current) return;
+		if (isDragging) {
+			const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
+			const draggedDistance = (pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX)) * directionMultiplier;
+			const isDraggingInDirection = draggedDistance > 0;
+			const noCloseSnapPointsPreCondition = snapPoints && !dismissible && !isDraggingInDirection;
+			if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) return;
+			const absDraggedDistance = Math.abs(draggedDistance);
+			const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
+			let percentageDragged = absDraggedDistance / (direction === "bottom" || direction === "top" ? drawerHeightRef.current : drawerWidthRef.current);
+			const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingInDirection);
+			if (snapPointPercentageDragged !== null) percentageDragged = snapPointPercentageDragged;
+			if (noCloseSnapPointsPreCondition && percentageDragged >= 1) return;
+			if (!isAllowedToDrag.current && !shouldDrag(event.target, isDraggingInDirection)) return;
+			drawerRef.current.classList.add(DRAG_CLASS);
+			isAllowedToDrag.current = true;
+			set(drawerRef.current, { transition: "none" });
+			set(overlayRef.current, { transition: "none" });
+			if (snapPoints) onDragSnapPoints({ draggedDistance });
+			if (isDraggingInDirection && !snapPoints) {
+				const dampenedDraggedDistance = dampenValue(draggedDistance);
+				const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier;
+				set(drawerRef.current, { transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)` });
+				return;
+			}
+			const opacityValue = 1 - percentageDragged;
+			if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
+				onDragProp === null || onDragProp === void 0 || onDragProp(event, percentageDragged);
+				set(overlayRef.current, {
+					opacity: `${opacityValue}`,
+					transition: "none"
+				}, true);
+			}
+			if (wrapper && overlayRef.current && shouldScaleBackground) {
+				const scaleValue = Math.min(getScale() + percentageDragged * (1 - getScale()), 1);
+				const borderRadiusValue = 8 - percentageDragged * 8;
+				const translateValue = Math.max(0, 14 - percentageDragged * 14);
+				set(wrapper, {
+					borderRadius: `${borderRadiusValue}px`,
+					transform: isVertical(direction) ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)` : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
+					transition: "none"
+				}, true);
+			}
+			if (!snapPoints) {
+				const translateValue = absDraggedDistance * directionMultiplier;
+				set(drawerRef.current, { transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)` });
+			}
+		}
+	}
+	react.default.useEffect(() => {
+		window.requestAnimationFrame(() => {
+			shouldAnimate.current = true;
+		});
+	}, []);
+	react.default.useEffect(() => {
+		var _window$visualViewpor2;
+		function onVisualViewportChange() {
+			if (!drawerRef.current || !repositionInputs) return;
+			const focusedElement = document.activeElement;
+			if (isInput(focusedElement) || keyboardIsOpen.current) {
+				var _window$visualViewpor;
+				const visualViewportHeight = ((_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.height) || 0;
+				const totalHeight = window.innerHeight;
+				let diffFromInitial = totalHeight - visualViewportHeight;
+				const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
+				const isTallEnough = drawerHeight > totalHeight * .8;
+				if (!initialDrawerHeight.current) initialDrawerHeight.current = drawerHeight;
+				const offsetFromTop = drawerRef.current.getBoundingClientRect().top;
+				if (Math.abs(previousDiffFromInitial.current - diffFromInitial) > 60) keyboardIsOpen.current = !keyboardIsOpen.current;
+				if (snapPoints && snapPoints.length > 0 && snapPointsOffset && activeSnapPointIndex) {
+					const activeSnapPointHeight = snapPointsOffset[activeSnapPointIndex] || 0;
+					diffFromInitial += activeSnapPointHeight;
+				}
+				previousDiffFromInitial.current = diffFromInitial;
+				if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) {
+					const height = drawerRef.current.getBoundingClientRect().height;
+					let newDrawerHeight = height;
+					if (height > visualViewportHeight) newDrawerHeight = visualViewportHeight - (isTallEnough ? offsetFromTop : WINDOW_TOP_OFFSET);
+					if (fixed) drawerRef.current.style.height = `${height - Math.max(diffFromInitial, 0)}px`;
+					else drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
+				} else if (!isMobileFirefox()) drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
+				if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) drawerRef.current.style.bottom = `0px`;
+				else drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
+			}
+		}
+		(_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.addEventListener("resize", onVisualViewportChange);
+		return () => {
+			var _window$visualViewpor3;
+			return (_window$visualViewpor3 = window.visualViewport) === null || _window$visualViewpor3 === void 0 ? void 0 : _window$visualViewpor3.removeEventListener("resize", onVisualViewportChange);
+		};
+	}, [
+		activeSnapPointIndex,
+		snapPoints,
+		snapPointsOffset
+	]);
+	function closeDrawer(fromWithin) {
+		cancelDrag();
+		onClose === null || onClose === void 0 || onClose();
+		if (!fromWithin) setIsOpen(false);
+		setTimeout(() => {
+			if (snapPoints) setActiveSnapPoint(snapPoints[0]);
+		}, TRANSITIONS.DURATION * 1e3);
+	}
+	function resetDrawer() {
+		if (!drawerRef.current) return;
+		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(",")})`
+		});
+		set(overlayRef.current, {
+			transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+			opacity: "1"
+		});
+		if (shouldScaleBackground && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) set(wrapper, {
+			borderRadius: `${BORDER_RADIUS}px`,
+			overflow: "hidden",
+			...isVertical(direction) ? {
+				transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+				transformOrigin: "top"
+			} : {
+				transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+				transformOrigin: "left"
+			},
+			transitionProperty: "transform, border-radius",
+			transitionDuration: `${TRANSITIONS.DURATION}s`,
+			transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`
+		}, true);
+	}
+	function cancelDrag() {
+		if (!isDragging || !drawerRef.current) return;
+		drawerRef.current.classList.remove(DRAG_CLASS);
+		isAllowedToDrag.current = false;
+		setIsDragging(false);
+		dragEndTime.current = /* @__PURE__ */ new Date();
+	}
+	function onRelease(event) {
+		if (!isDragging || !drawerRef.current) return;
+		drawerRef.current.classList.remove(DRAG_CLASS);
+		isAllowedToDrag.current = false;
+		setIsDragging(false);
+		dragEndTime.current = /* @__PURE__ */ new Date();
+		const swipeAmount = getTranslate(drawerRef.current, direction);
+		if (!event || !shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return;
+		if (dragStartTime.current === null) return;
+		const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
+		const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
+		const velocity = Math.abs(distMoved) / timeTaken;
+		if (velocity > .05) {
+			setJustReleased(true);
+			setTimeout(() => {
+				setJustReleased(false);
+			}, 200);
+		}
+		if (snapPoints) {
+			onReleaseSnapPoints({
+				draggedDistance: distMoved * (direction === "bottom" || direction === "right" ? 1 : -1),
+				closeDrawer,
+				velocity,
+				dismissible
+			});
+			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+			return;
+		}
+		if (direction === "bottom" || direction === "right" ? distMoved > 0 : distMoved < 0) {
+			resetDrawer();
+			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+			return;
+		}
+		if (velocity > VELOCITY_THRESHOLD) {
+			closeDrawer();
+			onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, false);
+			return;
+		}
+		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 || onReleaseProp === void 0 || onReleaseProp(event, false);
+			return;
+		}
+		onReleaseProp === null || onReleaseProp === void 0 || onReleaseProp(event, true);
+		resetDrawer();
+	}
+	react.default.useEffect(() => {
+		if (isOpen) {
+			set(document.documentElement, { scrollBehavior: "auto" });
+			openTime.current = /* @__PURE__ */ new Date();
+		}
+		return () => {
+			reset(document.documentElement, "scrollBehavior");
+		};
+	}, [isOpen]);
+	function onNestedOpenChange(o) {
+		const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
+		const initialTranslate = o ? -NESTED_DISPLACEMENT : 0;
+		if (nestedOpenChangeTimer.current) window.clearTimeout(nestedOpenChangeTimer.current);
+		set(drawerRef.current, {
+			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",
+				transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
+			});
+		}, 500);
+	}
+	function onNestedDrag(_event, percentageDragged) {
+		if (percentageDragged < 0) return;
+		const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth;
+		const newScale = initialScale + percentageDragged * (1 - initialScale);
+		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"
+		});
+	}
+	function onNestedRelease(_event, o) {
+		const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+		const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1;
+		const translate = o ? -NESTED_DISPLACEMENT : 0;
+		if (o) set(drawerRef.current, {
+			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)`
+		});
+	}
+	react.default.useEffect(() => {
+		if (!modal) window.requestAnimationFrame(() => {
+			document.body.style.pointerEvents = "auto";
+		});
+	}, [modal]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Root, {
+		defaultOpen,
+		onOpenChange: (open) => {
+			if (!dismissible && !open) return;
+			if (open) setHasBeenOpened(true);
+			else closeDrawer(true);
+			setIsOpen(open);
+		},
+		open: isOpen,
+		modal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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
+		})
+	});
+}
+const Overlay = react.default.forwardRef(function({ ...rest }, ref) {
+	const { overlayRef, snapPoints, onRelease, shouldFade, isOpen, modal, shouldAnimate } = useDrawerContext();
+	const composedRef = useComposedRefs(ref, overlayRef);
+	const hasSnapPoints = snapPoints && snapPoints.length > 0;
+	const onMouseUp = react.default.useCallback((event) => onRelease(event), [onRelease]);
+	if (!modal) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Backdrop, {
+		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 || shouldAnimate === void 0 ? void 0 : shouldAnimate.current) ? "true" : "false",
+		...rest
+	});
+});
+Overlay.displayName = "Drawer.Overlay";
+const Content = react.default.forwardRef(function({ style, ...rest }, ref) {
+	const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, shouldAnimate, autoFocus } = useDrawerContext();
+	const [delayedSnapPoints, setDelayedSnapPoints] = react.default.useState(false);
+	const composedRef = useComposedRefs(ref, drawerRef);
+	const pointerStartRef = react.default.useRef(null);
+	const lastKnownPointerEventRef = react.default.useRef(null);
+	const wasBeyondThePointRef = react.default.useRef(false);
+	const hasSnapPoints = snapPoints && snapPoints.length > 0;
+	useScaleBackground();
+	const isDeltaInDirection = (delta, direction$1, threshold = 0) => {
+		if (wasBeyondThePointRef.current) return true;
+		const deltaY = Math.abs(delta.y);
+		const deltaX = Math.abs(delta.x);
+		const isDeltaX = deltaX > deltaY;
+		const dFactor = ["bottom", "right"].includes(direction$1) ? 1 : -1;
+		if (direction$1 === "left" || direction$1 === "right") {
+			if (!(delta.x * dFactor < 0) && deltaX >= 0 && deltaX <= threshold) return isDeltaX;
+		} else if (!(delta.y * dFactor < 0) && deltaY >= 0 && deltaY <= threshold) return !isDeltaX;
+		wasBeyondThePointRef.current = true;
+		return true;
+	};
+	react.default.useEffect(() => {
+		if (hasSnapPoints) window.requestAnimationFrame(() => {
+			setDelayedSnapPoints(true);
+		});
+	}, []);
+	function handleOnPointerUp(event) {
+		pointerStartRef.current = null;
+		wasBeyondThePointRef.current = false;
+		onRelease(event);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Viewport, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.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 || shouldAnimate === void 0 ? void 0 : shouldAnimate.current) ? "true" : "false",
+		...rest,
+		ref: composedRef,
+		style: snapPointsOffset && snapPointsOffset.length > 0 ? {
+			"--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]}px`,
+			...style
+		} : style,
+		onPointerDown: (event) => {
+			var _rest$onPointerDown;
+			if (handleOnly) return;
+			(_rest$onPointerDown = rest.onPointerDown) === null || _rest$onPointerDown === void 0 || _rest$onPointerDown.call(rest, event);
+			pointerStartRef.current = {
+				x: event.pageX,
+				y: event.pageY
+			};
+			onPress(event);
+		},
+		onPointerMove: (event) => {
+			var _rest$onPointerMove;
+			lastKnownPointerEventRef.current = event;
+			if (handleOnly) return;
+			(_rest$onPointerMove = rest.onPointerMove) === null || _rest$onPointerMove === 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;
+			if (isDeltaInDirection({
+				x: xPosition,
+				y: yPosition
+			}, direction, swipeStartThreshold)) onDrag(event);
+			else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) pointerStartRef.current = null;
+		},
+		onPointerUp: (event) => {
+			var _rest$onPointerUp;
+			(_rest$onPointerUp = rest.onPointerUp) === null || _rest$onPointerUp === void 0 || _rest$onPointerUp.call(rest, event);
+			pointerStartRef.current = null;
+			wasBeyondThePointRef.current = false;
+			onRelease(event);
+		},
+		onPointerOut: (event) => {
+			var _rest$onPointerOut;
+			(_rest$onPointerOut = rest.onPointerOut) === null || _rest$onPointerOut === void 0 || _rest$onPointerOut.call(rest, event);
+			handleOnPointerUp(lastKnownPointerEventRef.current);
+		},
+		onContextMenu: (event) => {
+			var _rest$onContextMenu;
+			(_rest$onContextMenu = rest.onContextMenu) === null || _rest$onContextMenu === void 0 || _rest$onContextMenu.call(rest, event);
+			if (lastKnownPointerEventRef.current) handleOnPointerUp(lastKnownPointerEventRef.current);
+		}
+	}) });
+});
+Content.displayName = "Drawer.Content";
+const LONG_HANDLE_PRESS_TIMEOUT = 250;
+const DOUBLE_TAP_TIMEOUT = 120;
+const Handle = react.default.forwardRef(function({ preventCycle = false, children, ...rest }, ref) {
+	const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
+	const closeTimeoutIdRef = react.default.useRef(null);
+	const shouldCancelInteractionRef = react.default.useRef(false);
+	function handleStartCycle() {
+		if (shouldCancelInteractionRef.current) {
+			handleCancelInteraction();
+			return;
+		}
+		window.setTimeout(() => {
+			handleCycleSnapPoints();
+		}, DOUBLE_TAP_TIMEOUT);
+	}
+	function handleCycleSnapPoints() {
+		if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
+			handleCancelInteraction();
+			return;
+		}
+		handleCancelInteraction();
+		if (!snapPoints || snapPoints.length === 0) {
+			if (!dismissible) closeDrawer();
+			return;
+		}
+		if (activeSnapPoint === snapPoints[snapPoints.length - 1] && dismissible) {
+			closeDrawer();
+			return;
+		}
+		const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
+		if (currentSnapIndex === -1) return;
+		const nextSnapPoint = snapPoints[currentSnapIndex + 1];
+		setActiveSnapPoint(nextSnapPoint);
+	}
+	function handleStartInteraction() {
+		closeTimeoutIdRef.current = window.setTimeout(() => {
+			shouldCancelInteractionRef.current = true;
+		}, LONG_HANDLE_PRESS_TIMEOUT);
+	}
+	function handleCancelInteraction() {
+		if (closeTimeoutIdRef.current) window.clearTimeout(closeTimeoutIdRef.current);
+		shouldCancelInteractionRef.current = false;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick: handleStartCycle,
+		onPointerCancel: handleCancelInteraction,
+		onPointerDown: (e) => {
+			if (handleOnly) onPress({
+				...e,
+				preventBaseUIHandler: () => {}
+			});
+			handleStartInteraction();
+		},
+		onPointerMove: (e) => {
+			if (handleOnly) onDrag({
+				...e,
+				preventBaseUIHandler: () => {}
+			});
+		},
+		ref,
+		"data-vaul-drawer-visible": isOpen ? "true" : "false",
+		"data-vaul-handle": "",
+		"aria-hidden": "true",
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-vaul-handle-hitarea": "",
+			"aria-hidden": "true",
+			children
+		})
+	});
+});
+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");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root, {
+		nested: true,
+		open: nestedIsOpen,
+		onClose: () => {
+			onNestedOpenChange(false);
+		},
+		onDrag: (e, p) => {
+			onNestedDrag(e, p);
+			onDrag === null || onDrag === void 0 || onDrag(e, p);
+		},
+		onOpenChange: (o) => {
+			if (o) onNestedOpenChange(o);
+			onOpenChange === null || onOpenChange === void 0 || onOpenChange(o);
+		},
+		onRelease: onNestedRelease,
+		...rest
+	});
+}
+function Portal(props) {
+	const context = useDrawerContext();
+	const { container = context.container, ...portalProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Portal, {
+		container,
+		...portalProps
+	});
+}
+const Drawer = {
+	Root,
+	NestedRoot,
+	Content,
+	Overlay,
+	Trigger: _base_ui_react.Dialog.Trigger,
+	Portal,
+	Handle,
+	Close: _base_ui_react.Dialog.Close,
+	Title: _base_ui_react.Dialog.Title,
+	Description: _base_ui_react.Dialog.Description
+};
+
+//#endregion
+exports.Content = Content;
+exports.Drawer = Drawer;
+exports.Handle = Handle;
+exports.NestedRoot = NestedRoot;
+exports.Overlay = Overlay;
+exports.Portal = Portal;
+exports.Root = Root;