@undp/design-system-react/dist/drawer-BMZbrbal.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./x-CXpb8l-i.js";
import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./dist-CnD55hFX.js";
import * as u from "react";
import d, { useEffect as f, useLayoutEffect as p, useMemo as m } from "react";
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region node_modules/vaul/dist/index.mjs
function v(e) {
	if (!e || typeof document > "u") return;
	let t = document.head || document.getElementsByTagName("head")[0], n = document.createElement("style");
	n.type = "text/css", t.appendChild(n), n.styleSheet ? n.styleSheet.cssText = e : n.appendChild(document.createTextNode(e));
}
var y = d.createContext({
	drawerRef: { current: null },
	overlayRef: { current: null },
	onPress: () => {},
	onRelease: () => {},
	onDrag: () => {},
	onNestedDrag: () => {},
	onNestedOpenChange: () => {},
	onNestedRelease: () => {},
	openProp: void 0,
	dismissible: !1,
	isOpen: !1,
	isDragging: !1,
	keyboardIsOpen: { current: !1 },
	snapPointsOffset: null,
	snapPoints: null,
	handleOnly: !1,
	modal: !1,
	shouldFade: !1,
	activeSnapPoint: null,
	onOpenChange: () => {},
	setActiveSnapPoint: () => {},
	closeDrawer: () => {},
	direction: "bottom",
	shouldAnimate: { current: !0 },
	shouldScaleBackground: !1,
	setBackgroundColorOnScale: !0,
	noBodyStyles: !1,
	container: null,
	autoFocus: !1
}), b = () => {
	let e = d.useContext(y);
	if (!e) throw Error("useDrawerContext must be used within a Drawer.Root");
	return e;
};
v("[data-vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32, .72, 0, 1);animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=open]{animation-name:slideFromBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=closed]{animation-name:slideToBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=open]{animation-name:slideFromTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=closed]{animation-name:slideToTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=open]{animation-name:slideFromLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=closed]{animation-name:slideToLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=open]{animation-name:slideFromRight}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=closed]{animation-name:slideToRight}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--initial-transform,100%),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--initial-transform,100%),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-overlay][data-vaul-snap-points=false]{animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-overlay][data-vaul-snap-points=false][data-state=open]{animation-name:fadeIn}[data-vaul-overlay][data-state=closed]{animation-name:fadeOut}[data-vaul-animate=false]{animation:none!important}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:0;transition:opacity .5s cubic-bezier(.32, .72, 0, 1)}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:1}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:'';position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-overlay][data-vaul-snap-points=true]:not([data-vaul-snap-points-overlay=true]):not(\n[data-state=closed]\n){opacity:0}[data-vaul-overlay][data-vaul-snap-points-overlay=true]{opacity:1}[data-vaul-handle]{display:block;position:relative;opacity:.7;background:#e2e2e4;margin-left:auto;margin-right:auto;height:5px;width:32px;border-radius:1rem;touch-action:pan-y}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}[data-vaul-handle-hitarea]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,2.75rem);height:max(100%,2.75rem);touch-action:inherit}@media (hover:hover) and (pointer:fine){[data-vaul-drawer]{user-select:none}}@media (pointer:fine){[data-vaul-handle-hitarea]:{width:100%;height:100%}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,var(--initial-transform,100%),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,var(--initial-transform,100%),0)}}@keyframes slideFromTop{from{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}}@keyframes slideFromLeft{from{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}}@keyframes slideFromRight{from{transform:translate3d(var(--initial-transform,100%),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(var(--initial-transform,100%),0,0)}}");
function x() {
	let e = navigator.userAgent;
	return typeof window < "u" && (/Firefox/.test(e) && /Mobile/.test(e) || /FxiOS/.test(e));
}
function S() {
	return D(/^Mac/);
}
function C() {
	return D(/^iPhone/);
}
function w() {
	return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}
function T() {
	return D(/^iPad/) || S() && navigator.maxTouchPoints > 1;
}
function E() {
	return C() || T();
}
function D(e) {
	return typeof window < "u" && window.navigator != null ? e.test(window.navigator.platform) : void 0;
}
var O = 24, ee = typeof window < "u" ? p : f;
function k(...e) {
	return (...t) => {
		for (let n of e) typeof n == "function" && n(...t);
	};
}
var A = typeof document < "u" && window.visualViewport;
function te(e) {
	let t = window.getComputedStyle(e);
	return /(auto|scroll)/.test(t.overflow + t.overflowX + t.overflowY);
}
function ne(e) {
	for (te(e) && (e = e.parentElement); e && !te(e);) e = e.parentElement;
	return e || document.scrollingElement || document.documentElement;
}
var j = /* @__PURE__ */ new Set([
	"checkbox",
	"radio",
	"range",
	"color",
	"file",
	"image",
	"button",
	"submit",
	"reset"
]), M = 0, re;
function ie(e = {}) {
	let { isDisabled: t } = e;
	ee(() => {
		if (!t) return M++, M === 1 && E() && (re = ae()), () => {
			M--, M === 0 && re?.();
		};
	}, [t]);
}
function ae() {
	let e, t = 0, n = (n) => {
		e = ne(n.target), !(e === document.documentElement && e === document.body) && (t = n.changedTouches[0].pageY);
	}, r = (n) => {
		if (!e || e === document.documentElement || e === document.body) {
			n.preventDefault();
			return;
		}
		let r = n.changedTouches[0].pageY, i = e.scrollTop, a = e.scrollHeight - e.clientHeight;
		a !== 0 && ((i <= 0 && r > t || i >= a && r < t) && n.preventDefault(), t = r);
	}, i = (e) => {
		let t = e.target;
		se(t) && t !== document.activeElement && (e.preventDefault(), t.style.transform = "translateY(-2000px)", t.focus(), requestAnimationFrame(() => {
			t.style.transform = "";
		}));
	}, a = (e) => {
		let t = e.target;
		se(t) && (t.style.transform = "translateY(-2000px)", requestAnimationFrame(() => {
			t.style.transform = "", A && (A.height < window.innerHeight ? requestAnimationFrame(() => {
				oe(t);
			}) : A.addEventListener("resize", () => oe(t), { once: !0 }));
		}));
	}, o = () => {
		window.scrollTo(0, 0);
	}, s = window.pageXOffset, c = window.pageYOffset, l = k(N(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`));
	window.scrollTo(0, 0);
	let u = k(P(document, "touchstart", n, {
		passive: !1,
		capture: !0
	}), P(document, "touchmove", r, {
		passive: !1,
		capture: !0
	}), P(document, "touchend", i, {
		passive: !1,
		capture: !0
	}), P(document, "focus", a, !0), P(window, "scroll", o));
	return () => {
		l(), u(), window.scrollTo(s, c);
	};
}
function N(e, t, n) {
	let r = e.style[t];
	return e.style[t] = n, () => {
		e.style[t] = r;
	};
}
function P(e, t, n, r) {
	return e.addEventListener(t, n, r), () => {
		e.removeEventListener(t, n, r);
	};
}
function oe(e) {
	let t = document.scrollingElement || document.documentElement;
	for (; e && e !== t;) {
		let t = ne(e);
		if (t !== document.documentElement && t !== document.body && t !== e) {
			let n = t.getBoundingClientRect().top, r = e.getBoundingClientRect().top;
			e.getBoundingClientRect().bottom > t.getBoundingClientRect().bottom + O && (t.scrollTop += r - n);
		}
		e = t.parentElement;
	}
}
function se(e) {
	return e instanceof HTMLInputElement && !j.has(e.type) || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable;
}
function ce(e, t) {
	typeof e == "function" ? e(t) : e != null && (e.current = t);
}
function F(...e) {
	return (t) => e.forEach((e) => ce(e, t));
}
function I(...e) {
	return u.useCallback(F(...e), e);
}
var L = /* @__PURE__ */ new WeakMap();
function R(e, t, n = !1) {
	if (!e || !(e instanceof HTMLElement)) return;
	let r = {};
	Object.entries(t).forEach(([t, n]) => {
		if (t.startsWith("--")) {
			e.style.setProperty(t, n);
			return;
		}
		r[t] = e.style[t], e.style[t] = n;
	}), !n && L.set(e, r);
}
function le(e, t) {
	if (!e || !(e instanceof HTMLElement)) return;
	let n = L.get(e);
	n && (e.style[t] = n[t]);
}
var z = (e) => {
	switch (e) {
		case "top":
		case "bottom": return !0;
		case "left":
		case "right": return !1;
		default: return e;
	}
};
function B(e, t) {
	if (!e) return null;
	let n = window.getComputedStyle(e), r = n.transform || n.webkitTransform || n.mozTransform, i = r.match(/^matrix3d\((.+)\)$/);
	return i ? parseFloat(i[1].split(", ")[z(t) ? 13 : 12]) : (i = r.match(/^matrix\((.+)\)$/), i ? parseFloat(i[1].split(", ")[z(t) ? 5 : 4]) : null);
}
function ue(e) {
	return 8 * (Math.log(e + 1) - 2);
}
function V(e, t) {
	if (!e) return () => {};
	let n = e.style.cssText;
	return Object.assign(e.style, t), () => {
		e.style.cssText = n;
	};
}
var H = {
	DURATION: .5,
	EASE: [
		.32,
		.72,
		0,
		1
	]
}, de = .4, fe = .25, pe = 100, me = 8, U = 16, he = 26, ge = "vaul-dragging";
function W(e) {
	let t = d.useRef(e);
	return d.useEffect(() => {
		t.current = e;
	}), d.useMemo(() => (...e) => t.current == null ? void 0 : t.current.call(t, ...e), []);
}
function G({ defaultProp: e, onChange: t }) {
	let n = d.useState(e), [r] = n, i = d.useRef(r), a = W(t);
	return d.useEffect(() => {
		i.current !== r && (a(r), i.current = r);
	}, [
		r,
		i,
		a
	]), n;
}
function _e({ prop: e, defaultProp: t, onChange: n = () => {} }) {
	let [r, i] = G({
		defaultProp: t,
		onChange: n
	}), a = e !== void 0, o = a ? e : r, s = W(n);
	return [o, d.useCallback((t) => {
		if (a) {
			let n = typeof t == "function" ? t(e) : t;
			n !== e && s(n);
		} else i(t);
	}, [
		a,
		e,
		i,
		s
	])];
}
function ve({ activeSnapPointProp: e, setActiveSnapPointProp: t, snapPoints: n, drawerRef: r, overlayRef: i, fadeFromIndex: a, onSnapPointChange: o, direction: s = "bottom", container: c, snapToSequentialPoint: l }) {
	let [u, f] = _e({
		prop: e,
		defaultProp: n?.[0],
		onChange: t
	}), [p, m] = d.useState(typeof window < "u" ? {
		innerWidth: window.innerWidth,
		innerHeight: window.innerHeight
	} : void 0);
	d.useEffect(() => {
		function e() {
			m({
				innerWidth: window.innerWidth,
				innerHeight: window.innerHeight
			});
		}
		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
	}, []);
	let h = d.useMemo(() => u === n?.[n.length - 1] || null, [n, u]), g = d.useMemo(() => n?.findIndex((e) => e === u) ?? null, [n, u]), _ = n && n.length > 0 && (a || a === 0) && !Number.isNaN(a) && n[a] === u || !n, v = d.useMemo(() => {
		let e = c ? {
			width: c.getBoundingClientRect().width,
			height: c.getBoundingClientRect().height
		} : typeof window < "u" ? {
			width: window.innerWidth,
			height: window.innerHeight
		} : {
			width: 0,
			height: 0
		};
		return n?.map((t) => {
			let n = typeof t == "string", r = 0;
			if (n && (r = parseInt(t, 10)), z(s)) {
				let i = n ? r : p ? t * e.height : 0;
				return p ? s === "bottom" ? e.height - i : -e.height + i : i;
			}
			let i = n ? r : p ? t * e.width : 0;
			return p ? s === "right" ? e.width - i : -e.width + i : i;
		}) ?? [];
	}, [
		n,
		p,
		c
	]), y = d.useMemo(() => g === null ? null : v?.[g], [v, g]), b = d.useCallback((e) => {
		let t = v?.findIndex((t) => t === e) ?? null;
		o(t), R(r.current, {
			transition: `transform ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			transform: z(s) ? `translate3d(0, ${e}px, 0)` : `translate3d(${e}px, 0, 0)`
		}), v && t !== v.length - 1 && a !== void 0 && t !== a && t < a ? R(i.current, {
			transition: `opacity ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			opacity: "0"
		}) : R(i.current, {
			transition: `opacity ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			opacity: "1"
		}), f(n?.[Math.max(t, 0)]);
	}, [
		r.current,
		n,
		v,
		a,
		i,
		f
	]);
	d.useEffect(() => {
		if (u || e) {
			let t = n?.findIndex((t) => t === e || t === u) ?? -1;
			v && t !== -1 && typeof v[t] == "number" && b(v[t]);
		}
	}, [
		u,
		e,
		n,
		v,
		b
	]);
	function x({ draggedDistance: e, closeDrawer: t, velocity: r, dismissible: o }) {
		if (a === void 0) return;
		let c = s === "bottom" || s === "right" ? (y ?? 0) - e : (y ?? 0) + e, u = g === a - 1, d = g === 0, f = e > 0;
		if (u && R(i.current, { transition: `opacity ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})` }), !l && r > 2 && !f) {
			o ? t() : b(v[0]);
			return;
		}
		if (!l && r > 2 && f && v && n) {
			b(v[n.length - 1]);
			return;
		}
		let p = v?.reduce((e, t) => typeof e != "number" || typeof t != "number" ? e : Math.abs(t - c) < Math.abs(e - c) ? t : e), m = z(s) ? window.innerHeight : window.innerWidth;
		if (r > de && Math.abs(e) < m * .4) {
			let e = f ? 1 : -1;
			if (e > 0 && h && n) {
				b(v[n.length - 1]);
				return;
			}
			if (d && e < 0 && o && t(), g === null) return;
			b(v[g + e]);
			return;
		}
		b(p);
	}
	function S({ draggedDistance: e }) {
		if (y === null) return;
		let t = s === "bottom" || s === "right" ? y - e : y + e;
		(s === "bottom" || s === "right") && t < v[v.length - 1] || (s === "top" || s === "left") && t > v[v.length - 1] || R(r.current, { transform: z(s) ? `translate3d(0, ${t}px, 0)` : `translate3d(${t}px, 0, 0)` });
	}
	function C(e, t) {
		if (!n || typeof g != "number" || !v || a === void 0) return null;
		let r = g === a - 1;
		if (g >= a && t) return 0;
		if (r && !t) return 1;
		if (!_ && !r) return null;
		let i = r ? g + 1 : g - 1, o = r ? v[i] - v[i - 1] : v[i + 1] - v[i], s = e / Math.abs(o);
		return r ? 1 - s : s;
	}
	return {
		isLastSnapPoint: h,
		activeSnapPoint: u,
		shouldFade: _,
		getPercentageDragged: C,
		setActiveSnapPoint: f,
		activeSnapPointIndex: g,
		onRelease: x,
		onDrag: S,
		snapPointsOffset: v
	};
}
function ye() {
	let { direction: e, isOpen: t, shouldScaleBackground: n, setBackgroundColorOnScale: r, noBodyStyles: i } = b(), a = d.useRef(null), o = m(() => document.body.style.backgroundColor, []);
	function s() {
		return (window.innerWidth - he) / window.innerWidth;
	}
	d.useEffect(() => {
		if (t && n) {
			a.current && clearTimeout(a.current);
			let t = document.querySelector("[data-vaul-drawer-wrapper]") || document.querySelector("[vaul-drawer-wrapper]");
			if (!t) return;
			r && !i && V(document.body, { background: "black" }), V(t, {
				transformOrigin: z(e) ? "top" : "left",
				transitionProperty: "transform, border-radius",
				transitionDuration: `${H.DURATION}s`,
				transitionTimingFunction: `cubic-bezier(${H.EASE.join(",")})`
			});
			let n = V(t, {
				borderRadius: `${me}px`,
				overflow: "hidden",
				...z(e) ? { transform: `scale(${s()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)` } : { transform: `scale(${s()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)` }
			});
			return () => {
				n(), a.current = window.setTimeout(() => {
					o ? document.body.style.background = o : document.body.style.removeProperty("background");
				}, H.DURATION * 1e3);
			};
		}
	}, [
		t,
		n,
		o
	]);
}
var K = null;
function be({ isOpen: e, modal: t, nested: n, hasBeenOpened: r, preventScrollRestoration: i, noBodyStyles: a }) {
	let [o, s] = d.useState(() => typeof window < "u" ? window.location.href : ""), c = d.useRef(0), l = d.useCallback(() => {
		if (w() && K === null && e && !a) {
			K = {
				position: document.body.style.position,
				top: document.body.style.top,
				left: document.body.style.left,
				height: document.body.style.height,
				right: "unset"
			};
			let { scrollX: e, innerHeight: t } = window;
			document.body.style.setProperty("position", "fixed", "important"), Object.assign(document.body.style, {
				top: `${-c.current}px`,
				left: `${-e}px`,
				right: "0px",
				height: "auto"
			}), window.setTimeout(() => window.requestAnimationFrame(() => {
				let e = t - window.innerHeight;
				e && c.current >= t && (document.body.style.top = `${-(c.current + e)}px`);
			}), 300);
		}
	}, [e]), u = d.useCallback(() => {
		if (w() && K !== null && !a) {
			let e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
			Object.assign(document.body.style, K), window.requestAnimationFrame(() => {
				if (i && o !== window.location.href) {
					s(window.location.href);
					return;
				}
				window.scrollTo(t, e);
			}), K = null;
		}
	}, [o]);
	return d.useEffect(() => {
		function e() {
			c.current = window.scrollY;
		}
		return e(), window.addEventListener("scroll", e), () => {
			window.removeEventListener("scroll", e);
		};
	}, []), d.useEffect(() => {
		if (t) return () => {
			typeof document > "u" || document.querySelector("[data-vaul-drawer]") || u();
		};
	}, [t, u]), d.useEffect(() => {
		n || !r || (e ? (!window.matchMedia("(display-mode: standalone)").matches && l(), t || window.setTimeout(() => {
			u();
		}, 500)) : u());
	}, [
		e,
		r,
		o,
		t,
		n,
		l,
		u
	]), { restorePositionSetting: u };
}
function q({ open: e, onOpenChange: t, children: n, onDrag: r, onRelease: i, snapPoints: a, shouldScaleBackground: o = !1, setBackgroundColorOnScale: s = !0, closeThreshold: c = fe, scrollLockTimeout: u = pe, dismissible: f = !0, handleOnly: p = !1, fadeFromIndex: m = a && a.length - 1, activeSnapPoint: h, setActiveSnapPoint: g, fixed: _, modal: v = !0, onClose: b, nested: S, noBodyStyles: C = !1, direction: w = "bottom", defaultOpen: T = !1, disablePreventScroll: D = !0, snapToSequentialPoint: O = !1, preventScrollRestoration: ee = !1, repositionInputs: k = !0, onAnimationEnd: A, container: te, autoFocus: ne = !1 }) {
	let [j = !1, M] = _e({
		defaultProp: T,
		prop: e,
		onChange: (e) => {
			t?.(e), !e && !S && je(), setTimeout(() => {
				A?.(e);
			}, H.DURATION * 1e3), e && !v && typeof window < "u" && window.requestAnimationFrame(() => {
				document.body.style.pointerEvents = "auto";
			}), e || (document.body.style.pointerEvents = "auto");
		}
	}), [re, ae] = d.useState(!1), [N, P] = d.useState(!1), [oe, ce] = d.useState(!1), F = d.useRef(null), I = d.useRef(null), L = d.useRef(null), V = d.useRef(null), W = d.useRef(null), G = d.useRef(!1), ye = d.useRef(null), K = d.useRef(0), q = d.useRef(!1), xe = d.useRef(!T), Se = d.useRef(0), J = d.useRef(null), Ce = d.useRef(J.current?.getBoundingClientRect().height || 0), we = d.useRef(J.current?.getBoundingClientRect().width || 0), Te = d.useRef(0), { activeSnapPoint: Ee, activeSnapPointIndex: Y, setActiveSnapPoint: De, onRelease: Oe, snapPointsOffset: X, onDrag: ke, shouldFade: Z, getPercentageDragged: Ae } = ve({
		snapPoints: a,
		activeSnapPointProp: h,
		setActiveSnapPointProp: g,
		drawerRef: J,
		fadeFromIndex: m,
		overlayRef: F,
		onSnapPointChange: d.useCallback((e) => {
			a && e === X.length - 1 && (I.current = /* @__PURE__ */ new Date());
		}, []),
		direction: w,
		container: te,
		snapToSequentialPoint: O
	});
	ie({ isDisabled: !j || N || !v || oe || !re || !k || !D });
	let { restorePositionSetting: je } = be({
		isOpen: j,
		modal: v,
		nested: S ?? !1,
		hasBeenOpened: re,
		preventScrollRestoration: ee,
		noBodyStyles: C
	});
	function Q() {
		return (window.innerWidth - he) / window.innerWidth;
	}
	function Me(e) {
		!f && !a || J.current && !J.current.contains(e.target) || (Ce.current = J.current?.getBoundingClientRect().height || 0, we.current = J.current?.getBoundingClientRect().width || 0, P(!0), L.current = /* @__PURE__ */ new Date(), E() && window.addEventListener("touchend", () => G.current = !1, { once: !0 }), e.target.setPointerCapture(e.pointerId), K.current = z(w) ? e.pageY : e.pageX);
	}
	function Ne(e, t) {
		let n = e, r = window.getSelection()?.toString(), i = J.current ? B(J.current, w) : null, a = /* @__PURE__ */ new Date();
		if (n.tagName === "SELECT" || n.hasAttribute("data-vaul-no-drag") || n.closest("[data-vaul-no-drag]")) return !1;
		if (w === "right" || w === "left") return !0;
		if (I.current && a.getTime() - I.current.getTime() < 500) return !1;
		if (i !== null && (w === "bottom" ? i > 0 : i < 0)) return !0;
		if (r && r.length > 0) return !1;
		if (W.current && a.getTime() - W.current.getTime() < u && i === 0 || t) return W.current = a, !1;
		for (; n;) {
			if (n.scrollHeight > n.clientHeight) {
				if (n.scrollTop !== 0) return W.current = /* @__PURE__ */ new Date(), !1;
				if (n.getAttribute("role") === "dialog") return !0;
			}
			n = n.parentNode;
		}
		return !0;
	}
	function Pe(e) {
		if (J.current && N) {
			let t = w === "bottom" || w === "right" ? 1 : -1, n = (K.current - (z(w) ? e.pageY : e.pageX)) * t, i = n > 0, s = a && !f && !i;
			if (s && Y === 0) return;
			let c = Math.abs(n), l = document.querySelector("[data-vaul-drawer-wrapper]"), u = c / (w === "bottom" || w === "top" ? Ce.current : we.current), d = Ae(c, i);
			if (d !== null && (u = d), s && u >= 1 || !G.current && !Ne(e.target, i)) return;
			if (J.current.classList.add(ge), G.current = !0, R(J.current, { transition: "none" }), R(F.current, { transition: "none" }), a && ke({ draggedDistance: n }), i && !a) {
				let e = ue(n), r = Math.min(e * -1, 0) * t;
				R(J.current, { transform: z(w) ? `translate3d(0, ${r}px, 0)` : `translate3d(${r}px, 0, 0)` });
				return;
			}
			let p = 1 - u;
			if ((Z || m && Y === m - 1) && (r?.(e, u), R(F.current, {
				opacity: `${p}`,
				transition: "none"
			}, !0)), l && F.current && o) {
				let e = Math.min(Q() + u * (1 - Q()), 1), t = 8 - u * 8, n = Math.max(0, 14 - u * 14);
				R(l, {
					borderRadius: `${t}px`,
					transform: z(w) ? `scale(${e}) translate3d(0, ${n}px, 0)` : `scale(${e}) translate3d(${n}px, 0, 0)`,
					transition: "none"
				}, !0);
			}
			if (!a) {
				let e = c * t;
				R(J.current, { transform: z(w) ? `translate3d(0, ${e}px, 0)` : `translate3d(${e}px, 0, 0)` });
			}
		}
	}
	d.useEffect(() => {
		window.requestAnimationFrame(() => {
			xe.current = !0;
		});
	}, []), d.useEffect(() => {
		var e;
		function t() {
			if (!J.current || !k) return;
			let e = document.activeElement;
			if (se(e) || q.current) {
				let e = window.visualViewport?.height || 0, t = window.innerHeight, n = t - e, r = J.current.getBoundingClientRect().height || 0, i = r > t * .8;
				Te.current ||= r;
				let o = J.current.getBoundingClientRect().top;
				if (Math.abs(Se.current - n) > 60 && (q.current = !q.current), a && a.length > 0 && X && Y) {
					let e = X[Y] || 0;
					n += e;
				}
				if (Se.current = n, r > e || q.current) {
					let t = J.current.getBoundingClientRect().height, r = t;
					t > e && (r = e - (i ? o : he)), _ ? J.current.style.height = `${t - Math.max(n, 0)}px` : J.current.style.height = `${Math.max(r, e - o)}px`;
				} else x() || (J.current.style.height = `${Te.current}px`);
				a && a.length > 0 && !q.current ? J.current.style.bottom = "0px" : J.current.style.bottom = `${Math.max(n, 0)}px`;
			}
		}
		return (e = window.visualViewport) == null || e.addEventListener("resize", t), () => window.visualViewport?.removeEventListener("resize", t);
	}, [
		Y,
		a,
		X
	]);
	function $(e) {
		Ie(), b?.(), e || M(!1), setTimeout(() => {
			a && De(a[0]);
		}, H.DURATION * 1e3);
	}
	function Fe() {
		if (!J.current) return;
		let e = document.querySelector("[data-vaul-drawer-wrapper]"), t = B(J.current, w);
		R(J.current, {
			transform: "translate3d(0, 0, 0)",
			transition: `transform ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`
		}), R(F.current, {
			transition: `opacity ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			opacity: "1"
		}), o && t && t > 0 && j && R(e, {
			borderRadius: `${me}px`,
			overflow: "hidden",
			...z(w) ? {
				transform: `scale(${Q()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
				transformOrigin: "top"
			} : {
				transform: `scale(${Q()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
				transformOrigin: "left"
			},
			transitionProperty: "transform, border-radius",
			transitionDuration: `${H.DURATION}s`,
			transitionTimingFunction: `cubic-bezier(${H.EASE.join(",")})`
		}, !0);
	}
	function Ie() {
		!N || !J.current || (J.current.classList.remove(ge), G.current = !1, P(!1), V.current = /* @__PURE__ */ new Date());
	}
	function Le(e) {
		if (!N || !J.current) return;
		J.current.classList.remove(ge), G.current = !1, P(!1), V.current = /* @__PURE__ */ new Date();
		let t = B(J.current, w);
		if (!e || !Ne(e.target, !1) || !t || Number.isNaN(t) || L.current === null) return;
		let n = V.current.getTime() - L.current.getTime(), r = K.current - (z(w) ? e.pageY : e.pageX), o = Math.abs(r) / n;
		if (o > .05 && (ce(!0), setTimeout(() => {
			ce(!1);
		}, 200)), a) {
			Oe({
				draggedDistance: r * (w === "bottom" || w === "right" ? 1 : -1),
				closeDrawer: $,
				velocity: o,
				dismissible: f
			}), i?.(e, !0);
			return;
		}
		if (w === "bottom" || w === "right" ? r > 0 : r < 0) {
			Fe(), i?.(e, !0);
			return;
		}
		if (o > de) {
			$(), i?.(e, !1);
			return;
		}
		let s = Math.min(J.current.getBoundingClientRect().height ?? 0, window.innerHeight), l = Math.min(J.current.getBoundingClientRect().width ?? 0, window.innerWidth);
		if (Math.abs(t) >= (w === "left" || w === "right" ? l : s) * c) {
			$(), i?.(e, !1);
			return;
		}
		i?.(e, !0), Fe();
	}
	d.useEffect(() => (j && (R(document.documentElement, { scrollBehavior: "auto" }), I.current = /* @__PURE__ */ new Date()), () => {
		le(document.documentElement, "scrollBehavior");
	}), [j]);
	function Re(e) {
		let t = e ? (window.innerWidth - U) / window.innerWidth : 1, n = e ? -16 : 0;
		ye.current && window.clearTimeout(ye.current), R(J.current, {
			transition: `transform ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			transform: z(w) ? `scale(${t}) translate3d(0, ${n}px, 0)` : `scale(${t}) translate3d(${n}px, 0, 0)`
		}), !e && J.current && (ye.current = setTimeout(() => {
			let e = B(J.current, w);
			R(J.current, {
				transition: "none",
				transform: z(w) ? `translate3d(0, ${e}px, 0)` : `translate3d(${e}px, 0, 0)`
			});
		}, 500));
	}
	function ze(e, t) {
		if (t < 0) return;
		let n = (window.innerWidth - U) / window.innerWidth, r = n + t * (1 - n), i = -16 + t * U;
		R(J.current, {
			transform: z(w) ? `scale(${r}) translate3d(0, ${i}px, 0)` : `scale(${r}) translate3d(${i}px, 0, 0)`,
			transition: "none"
		});
	}
	function Be(e, t) {
		let n = z(w) ? window.innerHeight : window.innerWidth, r = t ? (n - U) / n : 1, i = t ? -16 : 0;
		t && R(J.current, {
			transition: `transform ${H.DURATION}s cubic-bezier(${H.EASE.join(",")})`,
			transform: z(w) ? `scale(${r}) translate3d(0, ${i}px, 0)` : `scale(${r}) translate3d(${i}px, 0, 0)`
		});
	}
	return d.useEffect(() => {
		v || window.requestAnimationFrame(() => {
			document.body.style.pointerEvents = "auto";
		});
	}, [v]), /*#__PURE__*/ d.createElement(l, {
		defaultOpen: T,
		onOpenChange: (e) => {
			!f && !e || (e ? ae(!0) : $(!0), M(e));
		},
		open: j
	}, /*#__PURE__*/ d.createElement(y.Provider, { value: {
		activeSnapPoint: Ee,
		snapPoints: a,
		setActiveSnapPoint: De,
		drawerRef: J,
		overlayRef: F,
		onOpenChange: t,
		onPress: Me,
		onRelease: Le,
		onDrag: Pe,
		dismissible: f,
		shouldAnimate: xe,
		handleOnly: p,
		isOpen: j,
		isDragging: N,
		shouldFade: Z,
		closeDrawer: $,
		onNestedDrag: ze,
		onNestedOpenChange: Re,
		onNestedRelease: Be,
		keyboardIsOpen: q,
		modal: v,
		snapPointsOffset: X,
		activeSnapPointIndex: Y,
		direction: w,
		shouldScaleBackground: o,
		setBackgroundColorOnScale: s,
		noBodyStyles: C,
		container: te,
		autoFocus: ne
	} }, n));
}
var xe = /*#__PURE__*/ d.forwardRef(function({ ...e }, t) {
	let { overlayRef: r, snapPoints: i, onRelease: a, shouldFade: o, isOpen: s, modal: c, shouldAnimate: l } = b(), u = I(t, r), f = i && i.length > 0;
	if (!c) return null;
	let p = d.useCallback((e) => a(e), [a]);
	return /*#__PURE__*/ d.createElement(n, {
		onMouseUp: p,
		ref: u,
		"data-vaul-overlay": "",
		"data-vaul-snap-points": s && f ? "true" : "false",
		"data-vaul-snap-points-overlay": s && o ? "true" : "false",
		"data-vaul-animate": l?.current ? "true" : "false",
		...e
	});
});
xe.displayName = "Drawer.Overlay";
var Se = /*#__PURE__*/ d.forwardRef(function({ onPointerDownOutside: e, style: t, onOpenAutoFocus: n, ...r }, i) {
	let { drawerRef: a, onPress: o, onRelease: c, onDrag: l, keyboardIsOpen: u, snapPointsOffset: f, activeSnapPointIndex: p, modal: m, isOpen: h, direction: g, snapPoints: _, container: v, handleOnly: y, shouldAnimate: x, autoFocus: S } = b(), [C, w] = d.useState(!1), T = I(i, a), E = d.useRef(null), D = d.useRef(null), O = d.useRef(!1), ee = _ && _.length > 0;
	ye();
	let k = (e, t, n = 0) => {
		if (O.current) return !0;
		let r = Math.abs(e.y), i = Math.abs(e.x), a = i > r, o = ["bottom", "right"].includes(t) ? 1 : -1;
		if (t === "left" || t === "right") {
			if (!(e.x * o < 0) && i >= 0 && i <= n) return a;
		} else if (!(e.y * o < 0) && r >= 0 && r <= n) return !a;
		return O.current = !0, !0;
	};
	d.useEffect(() => {
		ee && window.requestAnimationFrame(() => {
			w(!0);
		});
	}, []);
	function A(e) {
		E.current = null, O.current = !1, c(e);
	}
	return /*#__PURE__*/ d.createElement(s, {
		"data-vaul-drawer-direction": g,
		"data-vaul-drawer": "",
		"data-vaul-delayed-snap-points": C ? "true" : "false",
		"data-vaul-snap-points": h && ee ? "true" : "false",
		"data-vaul-custom-container": v ? "true" : "false",
		"data-vaul-animate": x?.current ? "true" : "false",
		...r,
		ref: T,
		style: f && f.length > 0 ? {
			"--snap-point-height": `${f[p ?? 0]}px`,
			...t
		} : t,
		onPointerDown: (e) => {
			y || (r.onPointerDown == null || r.onPointerDown.call(r, e), E.current = {
				x: e.pageX,
				y: e.pageY
			}, o(e));
		},
		onOpenAutoFocus: (e) => {
			n?.(e), S || e.preventDefault();
		},
		onPointerDownOutside: (t) => {
			if (e?.(t), !m || t.defaultPrevented) {
				t.preventDefault();
				return;
			}
			u.current &&= !1;
		},
		onFocusOutside: (e) => {
			if (!m) {
				e.preventDefault();
				return;
			}
		},
		onPointerMove: (e) => {
			if (D.current = e, y || (r.onPointerMove == null || r.onPointerMove.call(r, e), !E.current)) return;
			let t = e.pageY - E.current.y, n = e.pageX - E.current.x, i = e.pointerType === "touch" ? 10 : 2;
			k({
				x: n,
				y: t
			}, g, i) ? l(e) : (Math.abs(n) > i || Math.abs(t) > i) && (E.current = null);
		},
		onPointerUp: (e) => {
			r.onPointerUp == null || r.onPointerUp.call(r, e), E.current = null, O.current = !1, c(e);
		},
		onPointerOut: (e) => {
			r.onPointerOut == null || r.onPointerOut.call(r, e), A(D.current);
		},
		onContextMenu: (e) => {
			r.onContextMenu == null || r.onContextMenu.call(r, e), D.current && A(D.current);
		}
	});
});
Se.displayName = "Drawer.Content";
var J = 250, Ce = 120, we = /*#__PURE__*/ d.forwardRef(function({ preventCycle: e = !1, children: t, ...n }, r) {
	let { closeDrawer: i, isDragging: a, snapPoints: o, activeSnapPoint: s, setActiveSnapPoint: c, dismissible: l, handleOnly: u, isOpen: f, onPress: p, onDrag: m } = b(), h = d.useRef(null), g = d.useRef(!1);
	function _() {
		if (g.current) {
			x();
			return;
		}
		window.setTimeout(() => {
			v();
		}, Ce);
	}
	function v() {
		if (a || e || g.current) {
			x();
			return;
		}
		if (x(), !o || o.length === 0) {
			l || i();
			return;
		}
		if (s === o[o.length - 1] && l) {
			i();
			return;
		}
		let t = o.findIndex((e) => e === s);
		if (t === -1) return;
		let n = o[t + 1];
		c(n);
	}
	function y() {
		h.current = window.setTimeout(() => {
			g.current = !0;
		}, J);
	}
	function x() {
		h.current && window.clearTimeout(h.current), g.current = !1;
	}
	return /*#__PURE__*/ d.createElement("div", {
		onClick: _,
		onPointerCancel: x,
		onPointerDown: (e) => {
			u && p(e), y();
		},
		onPointerMove: (e) => {
			u && m(e);
		},
		ref: r,
		"data-vaul-drawer-visible": f ? "true" : "false",
		"data-vaul-handle": "",
		"aria-hidden": "true",
		...n
	}, /*#__PURE__*/ d.createElement("span", {
		"data-vaul-handle-hitarea": "",
		"aria-hidden": "true"
	}, t));
});
we.displayName = "Drawer.Handle";
function Te({ onDrag: e, onOpenChange: t, open: n, ...r }) {
	let { onNestedDrag: i, onNestedOpenChange: a, onNestedRelease: o } = b();
	if (!i) throw Error("Drawer.NestedRoot must be placed in another drawer");
	return /*#__PURE__*/ d.createElement(q, {
		nested: !0,
		open: n,
		onClose: () => {
			a(!1);
		},
		onDrag: (t, n) => {
			i(t, n), e?.(t, n);
		},
		onOpenChange: (e) => {
			e && a(e), t?.(e);
		},
		onRelease: o,
		...r
	});
}
function Ee(e) {
	let t = b(), { container: n = t.container, ...r } = e;
	return /*#__PURE__*/ d.createElement(o, {
		container: n,
		...r
	});
}
var Y = {
	Root: q,
	NestedRoot: Te,
	Content: Se,
	Overlay: xe,
	Trigger: r,
	Portal: Ee,
	Handle: we,
	Close: a,
	Title: c,
	Description: i
};
//#endregion
//#region src/components/ui/drawer.tsx
function De({ direction: e, ...t }) {
	return /* @__PURE__ */ g(Y.Root, {
		"data-slot": "drawer",
		modal: !0,
		direction: e || "right",
		snapPoints: [],
		closeThreshold: 1,
		...t
	});
}
function Oe({ ...e }) {
	return /* @__PURE__ */ g(Y.Trigger, {
		"data-slot": "drawer-trigger",
		...e
	});
}
function X({ ...e }) {
	return /* @__PURE__ */ g(Y.Portal, {
		"data-slot": "drawer-portal",
		...e
	});
}
function ke({ ...e }) {
	return /* @__PURE__ */ g(Y.Close, {
		"data-slot": "drawer-close",
		...e
	});
}
function Z({ className: t, ...n }) {
	return /* @__PURE__ */ g(Y.Overlay, {
		"data-slot": "drawer-overlay",
		className: e("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-[30px] data-[state=closed]:animate-out data-[state=open]:animate-in", t),
		...n
	});
}
function Ae({ className: n, children: r, inPortal: i = !1, overlayClassName: a, closeButtonClassName: o, ...s }) {
	let c = /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(Z, { className: a }), /* @__PURE__ */ _(Y.Content, {
		"data-slot": "drawer-content",
		className: e("group/drawer-content fixed z-50 flex h-auto flex-col bg-background px-1.5 sm:px-3", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh]", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[95%] sm:data-[vaul-drawer-direction=right]:w-[83.33%]", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-[95%] sm:data-[vaul-drawer-direction=right]:w-[83.33%]", n),
		...s,
		children: [/* @__PURE__ */ g(ke, {
			asChild: !0,
			children: /* @__PURE__ */ g("button", {
				className: e("fixed top-4 rounded-full border border-stroke bg-surface p-2 text-content-primary transition-all hover:bg-surface-hover", "group-data-[vaul-drawer-direction=right]/drawer-content:right-0 group-data-[vaul-drawer-direction=right]/drawer-content:mr-4 sm:group-data-[vaul-drawer-direction=right]/drawer-content:right-full sm:group-data-[vaul-drawer-direction=right]/drawer-content:mr-[8.33%]", "group-data-[vaul-drawer-direction=left]/drawer-content:left-0 group-data-[vaul-drawer-direction=left]/drawer-content:ml-4 sm:group-data-[vaul-drawer-direction=left]/drawer-content:left-full sm:group-data-[vaul-drawer-direction=left]/drawer-content:ml-[8.33%]", "group-data-[vaul-drawer-direction=top]/drawer-content:hidden", "group-data-[vaul-drawer-direction=bottom]/drawer-content:hidden", o),
				type: "button",
				children: /* @__PURE__ */ g(t, {
					size: 32,
					strokeWidth: 1
				})
			})
		}), /* @__PURE__ */ g("div", {
			style: {
				userSelect: "text",
				touchAction: "auto"
			},
			className: "undp-scrollbar h-screen bg-background px-3 pt-17.5 md:pt-0 md:pr-6 md:pl-8",
			children: r
		})]
	})] });
	return i ? /* @__PURE__ */ g(X, {
		"data-slot": "drawer-portal",
		children: c
	}) : c;
}
function je({ className: t, ...n }) {
	return /* @__PURE__ */ g("div", {
		"data-slot": "drawer-header",
		className: e("mt-0 mr-0 ml-7.5 group-data-[vaul-drawer-direction=bottom]:mt-24 group-data-[vaul-drawer-direction=left]:mt-24 group-data-[vaul-drawer-direction=right]:mt-24 group-data-[vaul-drawer-direction=top]:mt-24 group-data-[vaul-drawer-direction=right]:mr-24 group-data-[vaul-drawer-direction=bottom]:ml-24 group-data-[vaul-drawer-direction=top]:ml-24 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:mt-24 md:ml-24 md:gap-1.5 md:text-left", t),
		...n
	});
}
function Q({ className: t, ...n }) {
	return /* @__PURE__ */ g("div", {
		"data-slot": "drawer-body",
		className: e("mt-20 sm:mt-10", t),
		...n
	});
}
function Me({ className: t, ...n }) {
	return /* @__PURE__ */ g("div", {
		"data-slot": "drawer-footer",
		className: e("absolute bottom-0 mt-auto flex flex-col gap-2 p-4", t),
		...n
	});
}
function Ne({ ...t }) {
	return /* @__PURE__ */ g(Y.Title, {
		"data-slot": "drawer-title",
		...t,
		className: e("mb-4 font-bold font-heading text-h2-xs uppercase md:text-h2-sm lg:text-h2", t.className)
	});
}
function Pe({ ...t }) {
	return /* @__PURE__ */ g(Y.Description, {
		"data-slot": "drawer-description",
		...t,
		className: e("mb-4 font-semibold text-h4-xs md:text-h4-sm lg:text-h4", t.className)
	});
}
//#endregion
export { Pe as a, Z as c, Oe as d, Ae as i, X as l, Q as n, Me as o, ke as r, je as s, De as t, Ne as u };

//# sourceMappingURL=drawer-BMZbrbal.js.map