@deftui/react 0.0.3 → 0.0.4

package/dist/vendor/tailored/lightbox.mjs

@@ -0,0 +1,2389 @@
+"use client";
+import { Spinner } from "../shadcn/spinner.mjs";
+import { Button } from "../shadcn/button.mjs";
+import { DropdownMenu, DropdownMenuItem, DropdownMenuTrigger } from "../shadcn/dropdown-menu.mjs";
+import { Skeleton } from "../shadcn/skeleton.mjs";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import * as React$1 from "react";
+import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, EllipsisIcon, ImageOffIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import { Menu } from "@base-ui/react/menu";
+import { useRender } from "@base-ui/react/use-render";
+import { animate, useReducedMotion } from "motion/react";
+import { flushSync } from "react-dom";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+// src/vendor/tailored/lightbox.tsx
+const LIGHTBOX_STYLES = String.raw`
+  :where([data-slot="lightbox-viewport"]) {
+    overscroll-behavior: contain;
+  }
+
+  :where([data-slot="lightbox-slides"]) {
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :where([data-slot="lightbox-slide"]) {
+    transform-origin: center;
+    will-change: transform, opacity;
+    backface-visibility: hidden;
+    contain: layout paint;
+  }
+
+  :where([data-slot="lightbox-zoom"]) {
+    transform-origin: center;
+    will-change: transform;
+    backface-visibility: hidden;
+  }
+
+  :where([data-slot="lightbox-zoom"][data-zoomable="true"]:not([data-zoomed="true"])) {
+    cursor: zoom-in;
+  }
+
+  :where([data-slot="lightbox-zoom"][data-zoomed="true"]) {
+    cursor: zoom-out;
+  }
+
+  :where([data-slot="lightbox-zoom"][data-zoomed="true"][data-dragging="true"]) {
+    cursor: grabbing;
+  }
+
+  :where([data-slot="lightbox-content"][data-dragging="true"]),
+  :where([data-slot="lightbox-content"][data-dragging="true"] *) {
+    cursor: grabbing;
+  }
+
+  :where([data-slot="lightbox-slide"][aria-hidden="true"]) {
+    pointer-events: none;
+  }
+
+  :where([data-slot="lightbox-thumbnails"]) {
+    overscroll-behavior-inline: contain;
+    scrollbar-width: thin;
+  }
+
+  html.lightbox-morph-opening [data-slot="lightbox-content"] {
+    scale: 1 !important;
+    transition-property: opacity !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-slot="lightbox-slide"]) {
+      transition: none !important;
+      animation: none !important;
+    }
+
+  }
+
+  @media (forced-colors: active) {
+    :where([data-slot="lightbox-toolbar"] button:focus-visible),
+    :where([data-slot="lightbox-viewport"] button:focus-visible),
+    :where([data-slot="lightbox-thumbnails"] button:focus-visible) {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+  }
+`;
+const EMPTY_CAPTIONS_TRACK = "data:text/vtt;charset=utf-8,WEBVTT%0A%0A";
+const VIDEO_THUMBNAIL_MAX_SIZE = 112;
+const interactiveSelector = "a,button,input,select,textarea,summary,video,audio,iframe,[contenteditable=true],[role=button],[role=link],[data-lightbox-gesture-ignore]";
+const postGestureActivationSelector = "a[href],button,input:not([type=\"hidden\"]),select,textarea,summary,label,[contenteditable=true],[role=\"button\"],[role=\"link\"],[role=\"checkbox\"],[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"option\"],[role=\"radio\"],[role=\"switch\"],[role=\"tab\"]";
+const generatedVideoThumbnails = /* @__PURE__ */ new WeakMap();
+function mergeLightboxBackdropStyle(baseStyle, style) {
+	if (typeof style === "function") return (state) => {
+		return {
+			...baseStyle,
+			...style(state)
+		};
+	};
+	return {
+		...baseStyle,
+		...style
+	};
+}
+function mergeLightboxContentStyle(baseStyle, style) {
+	if (typeof style === "function") return (state) => {
+		return {
+			...baseStyle,
+			...style(state)
+		};
+	};
+	return {
+		...baseStyle,
+		...style
+	};
+}
+const initialTransform = {
+	scale: 1,
+	panX: 0,
+	panY: 0,
+	swipeX: 0,
+	dismissY: 0,
+	dragging: false
+};
+const LightboxContext = React$1.createContext(null);
+function useLightbox() {
+	const context = React$1.useContext(LightboxContext);
+	if (!context) throw new Error("Lightbox parts must be rendered inside <Lightbox>.");
+	return context;
+}
+function getAssetLoadKey(type, source) {
+	return `${type}:${source}`;
+}
+function getMediaLoadKey(item) {
+	return getAssetLoadKey(item.type, item.src);
+}
+function getThumbnailLoadKey(item) {
+	const source = item.type === "image" ? item.thumbnailSrc ?? item.src : item.poster ?? item.src;
+	return getAssetLoadKey(item.type, source);
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function normalizeIndex(index, length, loop) {
+	if (length === 0) return 0;
+	if (loop) return (index % length + length) % length;
+	return clamp(index, 0, length - 1);
+}
+function getItemLabel(item, index) {
+	if (!item) return `Media ${index + 1}`;
+	return item.type === "image" ? item.alt || `Image ${index + 1}` : item.label;
+}
+function isElementVisible(element) {
+	const rect = element.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < window.innerHeight && rect.left < window.innerWidth;
+}
+function getMorphTarget(element) {
+	if (!element) return null;
+	if (element.matches("[data-lightbox-morph-target]")) return element;
+	const explicitTarget = element.querySelector("[data-lightbox-morph-target]");
+	if (explicitTarget) return explicitTarget;
+	if (element.matches("img,video,canvas")) return element;
+	return element.querySelector("img,video,canvas") ?? element;
+}
+function isStandaloneMedia(media, gallery) {
+	const interactiveAncestor = media.parentElement?.closest(interactiveSelector);
+	return !interactiveAncestor || interactiveAncestor === gallery;
+}
+function getStandaloneGalleryMedia(target, gallery) {
+	if (!(target instanceof Element)) return null;
+	const media = target.closest("img,video");
+	if (!(media instanceof HTMLImageElement || media instanceof HTMLVideoElement) || !gallery.contains(media) || !isStandaloneMedia(media, gallery)) return null;
+	return media;
+}
+function getPostGestureActivationTarget(target) {
+	if (!(target instanceof Element)) return null;
+	const element = target.closest(postGestureActivationSelector);
+	if (!element || element.matches(":disabled,[aria-disabled=\"true\"]") || element.closest("[inert]")) return null;
+	return element;
+}
+function imageToItem(image) {
+	const figure = image.closest("figure");
+	const caption = image.dataset.lightboxCaption ?? figure?.querySelector(":scope > figcaption")?.textContent?.trim() ?? void 0;
+	const width = Number(image.getAttribute("width"));
+	const height = Number(image.getAttribute("height"));
+	const srcSet = image.srcset || void 0;
+	return {
+		id: image.id || void 0,
+		type: "image",
+		src: image.currentSrc || image.src,
+		alt: image.alt,
+		width: width > 0 ? width : image.naturalWidth || void 0,
+		height: height > 0 ? height : image.naturalHeight || void 0,
+		srcSet,
+		sizes: srcSet ? image.sizes || void 0 : void 0,
+		thumbnailSrc: image.currentSrc || image.src,
+		caption
+	};
+}
+function getVideoThumbnail(video) {
+	const source = video.currentSrc || video.src;
+	if (!source || video.readyState < 2 || video.videoWidth <= 0 || video.videoHeight <= 0) return;
+	const cached = generatedVideoThumbnails.get(video);
+	if (cached?.source === source) return cached.thumbnail;
+	const scale = Math.min(1, VIDEO_THUMBNAIL_MAX_SIZE / Math.max(video.videoWidth, video.videoHeight));
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.max(1, Math.round(video.videoWidth * scale));
+	canvas.height = Math.max(1, Math.round(video.videoHeight * scale));
+	try {
+		const context = canvas.getContext("2d");
+		if (!context) return void 0;
+		context.drawImage(video, 0, 0, canvas.width, canvas.height);
+		const thumbnail = canvas.toDataURL("image/webp", .72);
+		generatedVideoThumbnails.set(video, {
+			source,
+			thumbnail
+		});
+		return thumbnail;
+	} catch {
+		return;
+	}
+}
+function videoToItem(video) {
+	const figure = video.closest("figure");
+	const caption = video.dataset.lightboxCaption ?? figure?.querySelector(":scope > figcaption")?.textContent?.trim() ?? void 0;
+	const width = Number(video.getAttribute("width"));
+	const height = Number(video.getAttribute("height"));
+	const sources = Array.from(video.querySelectorAll("source"), (source) => {
+		return {
+			media: source.media || void 0,
+			src: source.src,
+			type: source.type || void 0
+		};
+	});
+	const src = [
+		video.currentSrc,
+		video.dataset.lightboxSrc,
+		video.src,
+		sources.at(0)?.src
+	].find((source) => source) ?? "";
+	const label = [
+		video.getAttribute("aria-label"),
+		video.title,
+		caption
+	].find((value) => value);
+	return {
+		id: video.id || void 0,
+		type: "video",
+		src,
+		label: label ?? "Video",
+		poster: video.poster || getVideoThumbnail(video),
+		width: width > 0 ? width : video.videoWidth || void 0,
+		height: height > 0 ? height : video.videoHeight || void 0,
+		sources: sources.length > 0 ? sources : void 0,
+		caption,
+		videoProps: {
+			autoPlay: video.autoplay,
+			controls: true,
+			loop: video.loop,
+			muted: video.muted,
+			playsInline: video.playsInline,
+			preload: "auto"
+		}
+	};
+}
+function getLoadedAssetKeys(media, item) {
+	if (!(media instanceof HTMLImageElement ? media.complete && media.naturalWidth > 0 : media.readyState >= 2)) return [];
+	const mediaKey = getMediaLoadKey(item);
+	const thumbnailKey = getThumbnailLoadKey(item);
+	if (mediaKey === thumbnailKey) return [mediaKey];
+	return item.type === "video" && item.poster?.startsWith("data:") ? [mediaKey, thumbnailKey] : [mediaKey];
+}
+function mediaToItem(media) {
+	return media instanceof HTMLImageElement ? imageToItem(media) : videoToItem(media);
+}
+function hasCustomContent(children) {
+	return React$1.Children.toArray(children).some((child) => React$1.isValidElement(child) && child.type.__lightboxContent === true);
+}
+function getEventDetails(reason, event, trigger) {
+	return {
+		reason,
+		event,
+		trigger
+	};
+}
+function Lightbox({ children, items: itemsProp, open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, onOpen, onClose, index: indexProp, defaultIndex = 0, onChangeImage, overlay = "blur", loop = true, noCounter = false, noCarousel = false, noControls = false, loading = "eager", preload = 1, maxZoom = 4, controls = [], dir, className, actionsRef, ...rootProps }) {
+	const galleryRef = React$1.useRef(null);
+	const mediaRef = React$1.useRef(null);
+	const sourceMapRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const galleryTouchPressRef = React$1.useRef(null);
+	const suppressedGalleryClickRef = React$1.useRef(null);
+	const annotatedMediaRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const openingCleanupRef = React$1.useRef(null);
+	const postGestureActivationCleanupRef = React$1.useRef(null);
+	const zoomAnimationRef = React$1.useRef(null);
+	const transformRef = React$1.useRef(initialTransform);
+	const [autoItems, setAutoItems] = React$1.useState([]);
+	const [loadedAssets, setLoadedAssets] = React$1.useState(() => /* @__PURE__ */ new Set());
+	const [uncontrolledOpen, setUncontrolledOpen] = React$1.useState(defaultOpen);
+	const [uncontrolledIndex, setUncontrolledIndex] = React$1.useState(defaultIndex);
+	const [transform, setTransform] = React$1.useState(initialTransform);
+	React$1.useLayoutEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	const [inheritedDirection, setInheritedDirection] = React$1.useState(() => typeof document !== "undefined" && document.documentElement.dir === "rtl" ? "rtl" : "ltr");
+	const shouldReduceMotion = Boolean(useReducedMotion());
+	const isOpenControlled = openProp !== void 0;
+	const isIndexControlled = indexProp !== void 0;
+	const open = openProp ?? uncontrolledOpen;
+	const items = itemsProp ?? autoItems;
+	const activeIndex = normalizeIndex(indexProp ?? uncontrolledIndex, items.length, loop);
+	const activeItem = items[activeIndex];
+	const direction = dir ?? inheritedDirection;
+	const armPostGestureActivationRepair = React$1.useCallback((releaseEvent) => {
+		if (!(releaseEvent instanceof PointerEvent) || releaseEvent.pointerType !== "touch" && releaseEvent.pointerType !== "pen") return;
+		const releaseTarget = releaseEvent.target;
+		const doc = releaseTarget instanceof Node ? releaseTarget.ownerDocument ?? document : document;
+		const view = doc.defaultView ?? window;
+		postGestureActivationCleanupRef.current?.();
+		let active = true;
+		let fallbackTimer = 0;
+		let suppressionTimer = 0;
+		let press = null;
+		let pendingTarget = null;
+		let syntheticTarget = null;
+		function cleanup() {
+			if (!active) return;
+			active = false;
+			view.clearTimeout(fallbackTimer);
+			view.clearTimeout(suppressionTimer);
+			doc.removeEventListener("click", handleClick, true);
+			doc.removeEventListener("pointercancel", handlePointerCancel, true);
+			doc.removeEventListener("pointerdown", handlePointerDown, true);
+			doc.removeEventListener("pointermove", handlePointerMove, true);
+			doc.removeEventListener("pointerup", handlePointerUp, true);
+			if (postGestureActivationCleanupRef.current === cleanup) postGestureActivationCleanupRef.current = null;
+		}
+		function handlePointerDown(event) {
+			if (!event.isPrimary) {
+				if (press || pendingTarget) cleanup();
+				return;
+			}
+			if (event.button !== 0) return;
+			if (press || pendingTarget || syntheticTarget) {
+				cleanup();
+				return;
+			}
+			const target = getPostGestureActivationTarget(event.target);
+			if (!target || target.closest("[data-slot=\"lightbox-portal\"]")) {
+				cleanup();
+				return;
+			}
+			press = {
+				pointerId: event.pointerId,
+				target,
+				startX: event.clientX,
+				startY: event.clientY
+			};
+		}
+		function handlePointerMove(event) {
+			if (!press || press.pointerId !== event.pointerId) return;
+			if (Math.hypot(event.clientX - press.startX, event.clientY - press.startY) > 8) cleanup();
+		}
+		function handlePointerCancel(event) {
+			if (press?.pointerId === event.pointerId) cleanup();
+		}
+		function handlePointerUp(event) {
+			if (!press || press.pointerId !== event.pointerId) return;
+			const currentPress = press;
+			press = null;
+			if (getPostGestureActivationTarget(event.target) !== currentPress.target || Math.hypot(event.clientX - currentPress.startX, event.clientY - currentPress.startY) > 8) {
+				cleanup();
+				return;
+			}
+			pendingTarget = currentPress.target;
+			fallbackTimer = view.setTimeout(() => {
+				const activationTarget = pendingTarget;
+				if (!active || !activationTarget?.isConnected || getPostGestureActivationTarget(activationTarget) !== activationTarget) {
+					cleanup();
+					return;
+				}
+				pendingTarget = null;
+				syntheticTarget = activationTarget;
+				activationTarget.click();
+				suppressionTimer = view.setTimeout(cleanup, 500);
+			}, 80);
+		}
+		function handleClick(event) {
+			if (!event.isTrusted) return;
+			const target = event.target instanceof Element ? event.target.closest(postGestureActivationSelector) : null;
+			if (syntheticTarget && target === syntheticTarget) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				cleanup();
+				return;
+			}
+			if (pendingTarget) cleanup();
+		}
+		doc.addEventListener("click", handleClick, true);
+		doc.addEventListener("pointercancel", handlePointerCancel, true);
+		doc.addEventListener("pointerdown", handlePointerDown, true);
+		doc.addEventListener("pointermove", handlePointerMove, true);
+		doc.addEventListener("pointerup", handlePointerUp, true);
+		postGestureActivationCleanupRef.current = cleanup;
+	}, []);
+	const markAssetsLoaded = React$1.useCallback((keys) => {
+		if (keys.length === 0) return;
+		setLoadedAssets((current) => {
+			const missingKeys = keys.filter((key) => !current.has(key));
+			if (missingKeys.length === 0) return current;
+			const next = new Set(current);
+			for (const key of missingKeys) next.add(key);
+			return next;
+		});
+	}, []);
+	const markAssetLoaded = React$1.useCallback((key) => markAssetsLoaded([key]), [markAssetsLoaded]);
+	React$1.useLayoutEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	const stopZoomAnimation = React$1.useCallback(() => {
+		zoomAnimationRef.current?.stop();
+		zoomAnimationRef.current = null;
+	}, []);
+	const animateZoom = React$1.useCallback((target) => {
+		stopZoomAnimation();
+		const start = transformRef.current;
+		const end = {
+			scale: clamp(target.scale, 1, maxZoom),
+			panX: target.panX,
+			panY: target.panY
+		};
+		const update = (progress) => {
+			const next = {
+				...transformRef.current,
+				scale: start.scale + (end.scale - start.scale) * progress,
+				panX: start.panX + (end.panX - start.panX) * progress,
+				panY: start.panY + (end.panY - start.panY) * progress,
+				swipeX: 0,
+				dismissY: 0
+			};
+			transformRef.current = next;
+			setTransform(next);
+		};
+		if (shouldReduceMotion) {
+			update(1);
+			return;
+		}
+		zoomAnimationRef.current = animate(0, 1, {
+			duration: .22,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			],
+			onUpdate: update,
+			onComplete: () => {
+				zoomAnimationRef.current = null;
+			}
+		});
+	}, [
+		maxZoom,
+		shouldReduceMotion,
+		stopZoomAnimation
+	]);
+	React$1.useEffect(() => () => {
+		openingCleanupRef.current?.();
+		postGestureActivationCleanupRef.current?.();
+		stopZoomAnimation();
+	}, [stopZoomAnimation]);
+	const handleGalleryRef = React$1.useCallback((element) => {
+		galleryRef.current = element;
+		if (!dir && element) setInheritedDirection(window.getComputedStyle(element).direction);
+	}, [dir]);
+	const restoreAnnotations = React$1.useCallback(() => {
+		for (const [media, previous] of annotatedMediaRef.current) for (const [name, value] of Object.entries(previous)) if (value == null) media.removeAttribute(name);
+		else media.setAttribute(name, value);
+		annotatedMediaRef.current.clear();
+	}, []);
+	const scanMedia = React$1.useCallback(() => {
+		const gallery = galleryRef.current;
+		if (!gallery || itemsProp) return {
+			foundItems: [],
+			sources: []
+		};
+		restoreAnnotations();
+		const mediaItems = Array.from(gallery.querySelectorAll("img,video")).filter((media) => isStandaloneMedia(media, gallery));
+		mediaItems.forEach((media, index) => {
+			annotatedMediaRef.current.set(media, {
+				role: media.getAttribute("role"),
+				tabindex: media.getAttribute("tabindex"),
+				"aria-haspopup": media.getAttribute("aria-haspopup"),
+				"aria-label": media.getAttribute("aria-label"),
+				"data-lightbox-source": media.getAttribute("data-lightbox-source")
+			});
+			media.setAttribute("role", "button");
+			media.setAttribute("tabindex", "0");
+			media.setAttribute("aria-haspopup", "dialog");
+			const label = media instanceof HTMLImageElement ? media.alt || `image ${index + 1}` : [media.getAttribute("aria-label"), media.title].find((value) => value) ?? `video ${index + 1}`;
+			media.setAttribute("aria-label", media.getAttribute("aria-label") ?? `Open ${label} in lightbox`);
+			media.setAttribute("data-lightbox-source", "");
+			if (media instanceof HTMLImageElement && !media.hasAttribute("alt")) console.debug("Lightbox auto-discovered an <img> without an alt attribute.");
+		});
+		const foundItems = mediaItems.map(mediaToItem);
+		markAssetsLoaded(mediaItems.flatMap((media, index) => {
+			const item = foundItems[index];
+			return item ? getLoadedAssetKeys(media, item) : [];
+		}));
+		return {
+			foundItems,
+			sources: mediaItems
+		};
+	}, [
+		itemsProp,
+		markAssetsLoaded,
+		restoreAnnotations
+	]);
+	React$1.useEffect(() => {
+		if (itemsProp) {
+			restoreAnnotations();
+			return;
+		}
+		const gallery = galleryRef.current;
+		if (!gallery) return;
+		const refresh = () => {
+			if (open && autoItems.length > 0) return;
+			const { foundItems, sources } = scanMedia();
+			sourceMapRef.current.clear();
+			sources.forEach((element, index) => {
+				sourceMapRef.current.set(index, {
+					element,
+					morph: true
+				});
+			});
+			setAutoItems(foundItems);
+		};
+		refresh();
+		const observer = new MutationObserver(refresh);
+		observer.observe(gallery, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"src",
+				"srcset",
+				"sizes",
+				"alt",
+				"poster",
+				"width",
+				"height",
+				"data-lightbox-caption",
+				"data-lightbox-src",
+				"class"
+			]
+		});
+		return () => {
+			observer.disconnect();
+			restoreAnnotations();
+		};
+	}, [
+		autoItems.length,
+		itemsProp,
+		open,
+		restoreAnnotations,
+		scanMedia
+	]);
+	const changeIndex = React$1.useCallback((nextIndex, reason, event) => {
+		if (noCarousel || items.length === 0) return;
+		const normalized = normalizeIndex(nextIndex, items.length, loop);
+		if (normalized === activeIndex) return;
+		stopZoomAnimation();
+		if (!isIndexControlled) setUncontrolledIndex(normalized);
+		setTransform(initialTransform);
+		onChangeImage?.(normalized, items[normalized], {
+			reason,
+			event,
+			previousIndex: activeIndex
+		});
+	}, [
+		activeIndex,
+		isIndexControlled,
+		items,
+		loop,
+		noCarousel,
+		onChangeImage,
+		stopZoomAnimation
+	]);
+	const commitOpenChange = React$1.useCallback((nextOpen, details, lifecycleIndex = activeIndex, lifecycleItem = activeItem) => {
+		if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, details);
+		const lifecycleDetails = {
+			reason: details.reason,
+			event: "event" in details ? details.event : void 0,
+			index: lifecycleIndex,
+			item: lifecycleItem
+		};
+		if (nextOpen) onOpen?.(lifecycleDetails);
+		else onClose?.(lifecycleDetails);
+	}, [
+		activeIndex,
+		activeItem,
+		isOpenControlled,
+		onClose,
+		onOpen,
+		onOpenChange
+	]);
+	const runOpenChange = React$1.useCallback((nextOpen, details, source, lifecycleIndex = activeIndex, lifecycleItem = activeItem) => {
+		openingCleanupRef.current?.();
+		openingCleanupRef.current = null;
+		stopZoomAnimation();
+		if (!nextOpen) {
+			commitOpenChange(false, details, lifecycleIndex, lifecycleItem);
+			return;
+		}
+		const from = source?.element;
+		const canMorph = Boolean(source?.morph && from?.isConnected && isElementVisible(from) && !shouldReduceMotion);
+		const root = document.documentElement;
+		if (canMorph) root.classList.add("lightbox-morph-opening");
+		const fromRect = canMorph ? from?.getBoundingClientRect() : void 0;
+		const fromRadius = canMorph ? getComputedStyle(from).borderRadius : "";
+		flushSync(() => {
+			setTransform(initialTransform);
+			commitOpenChange(true, details, lifecycleIndex, lifecycleItem);
+		});
+		if (!canMorph || !fromRect) return;
+		const destination = getMorphTarget(mediaRef.current);
+		if (!destination || !isElementVisible(destination)) {
+			root.classList.remove("lightbox-morph-opening");
+			return;
+		}
+		const toRect = destination.getBoundingClientRect();
+		if (toRect.width <= 0 || toRect.height <= 0) {
+			root.classList.remove("lightbox-morph-opening");
+			return;
+		}
+		const scale = Math.max(fromRect.width / toRect.width, fromRect.height / toRect.height);
+		const translateX = fromRect.left + fromRect.width / 2 - (toRect.left + toRect.width / 2);
+		const translateY = fromRect.top + fromRect.height / 2 - (toRect.top + toRect.height / 2);
+		const previous = {
+			borderRadius: destination.style.borderRadius,
+			opacity: destination.style.opacity,
+			transform: destination.style.transform,
+			transition: destination.style.transition,
+			transformOrigin: destination.style.transformOrigin,
+			willChange: destination.style.willChange
+		};
+		let firstFrame = 0;
+		let secondFrame = 0;
+		let finishTimer = 0;
+		let finished = false;
+		const cleanup = () => {
+			if (finished) return;
+			finished = true;
+			window.cancelAnimationFrame(firstFrame);
+			window.cancelAnimationFrame(secondFrame);
+			window.clearTimeout(finishTimer);
+			destination.removeEventListener("transitionend", handleTransitionEnd);
+			Object.assign(destination.style, previous);
+			root.classList.remove("lightbox-morph-opening");
+			if (openingCleanupRef.current === cleanup) openingCleanupRef.current = null;
+		};
+		const handleTransitionEnd = (event) => {
+			if (event.target === destination && event.propertyName === "transform") cleanup();
+		};
+		Object.assign(destination.style, {
+			borderRadius: fromRadius,
+			opacity: "0.2",
+			transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale}) ${previous.transform}`.trim(),
+			transformOrigin: "center",
+			transition: "none",
+			willChange: "transform, opacity"
+		});
+		destination.addEventListener("transitionend", handleTransitionEnd);
+		openingCleanupRef.current = cleanup;
+		firstFrame = window.requestAnimationFrame(() => {
+			secondFrame = window.requestAnimationFrame(() => {
+				destination.style.transition = "transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out, border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1)";
+				destination.style.transform = previous.transform;
+				destination.style.opacity = previous.opacity;
+				destination.style.borderRadius = previous.borderRadius;
+				finishTimer = window.setTimeout(cleanup, 320);
+			});
+		});
+	}, [
+		activeIndex,
+		activeItem,
+		commitOpenChange,
+		shouldReduceMotion,
+		stopZoomAnimation
+	]);
+	const closeWithDetails = React$1.useCallback((details) => {
+		runOpenChange(false, details, sourceMapRef.current.get(activeIndex));
+	}, [activeIndex, runOpenChange]);
+	const requestOpen = React$1.useCallback((nextIndex, source, event) => {
+		let nextItems = items;
+		let nextSources = [];
+		if (!itemsProp) {
+			const scan = scanMedia();
+			nextItems = scan.foundItems;
+			nextSources = scan.sources;
+			sourceMapRef.current.clear();
+			nextSources.forEach((element, sourceIndex) => {
+				sourceMapRef.current.set(sourceIndex, {
+					element,
+					morph: true
+				});
+			});
+			flushSync(() => setAutoItems(nextItems));
+		}
+		if (nextItems.length === 0) return;
+		const normalized = normalizeIndex(nextIndex, nextItems.length, loop);
+		if (!isIndexControlled) flushSync(() => setUncontrolledIndex(normalized));
+		if (normalized !== activeIndex) onChangeImage?.(normalized, nextItems[normalized], {
+			reason: "trigger-press",
+			event,
+			previousIndex: activeIndex
+		});
+		if (source) sourceMapRef.current.set(normalized, source);
+		const details = getEventDetails("trigger-press", event, source?.element ?? nextSources[normalized]);
+		runOpenChange(true, details, source ?? sourceMapRef.current.get(normalized), normalized, nextItems[normalized]);
+	}, [
+		activeIndex,
+		isIndexControlled,
+		items,
+		itemsProp,
+		loop,
+		onChangeImage,
+		runOpenChange,
+		scanMedia
+	]);
+	const handleOpenChange = React$1.useCallback((nextOpen, details) => {
+		if (nextOpen) runOpenChange(true, details, sourceMapRef.current.get(activeIndex));
+		else closeWithDetails(details);
+	}, [
+		activeIndex,
+		closeWithDetails,
+		runOpenChange
+	]);
+	const handleOpenChangeComplete = React$1.useCallback((nextOpen) => {
+		if (!nextOpen && transformRef.current.dismissY === 0) {
+			stopZoomAnimation();
+			setTransform(initialTransform);
+		}
+		onOpenChangeComplete?.(nextOpen);
+	}, [onOpenChangeComplete, stopZoomAnimation]);
+	const registerSource = React$1.useCallback((sourceIndex, source) => {
+		if (source) sourceMapRef.current.set(sourceIndex, source);
+		else sourceMapRef.current.delete(sourceIndex);
+	}, []);
+	const registerMedia = React$1.useCallback((element) => {
+		mediaRef.current = element;
+	}, []);
+	const activeZoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable);
+	const actions = React$1.useMemo(() => {
+		return {
+			open: (nextIndex = activeIndex) => requestOpen(nextIndex),
+			close: () => closeWithDetails(getEventDetails("imperative-action", void 0, null)),
+			goTo: (nextIndex) => changeIndex(nextIndex, "programmatic"),
+			next: () => changeIndex(activeIndex + 1, "next-press"),
+			previous: () => changeIndex(activeIndex - 1, "previous-press"),
+			zoomIn: () => {
+				if (!activeZoomable) return;
+				const current = transformRef.current;
+				animateZoom({
+					scale: Math.min(maxZoom, current.scale < 2 ? 2 : current.scale + 1),
+					panX: current.panX,
+					panY: current.panY
+				});
+			},
+			zoomOut: () => {
+				const current = transformRef.current;
+				const scale = Math.max(1, current.scale - 1);
+				const panRatio = current.scale > 1 ? Math.max(0, (scale - 1) / (current.scale - 1)) : 0;
+				animateZoom({
+					scale,
+					panX: current.panX * panRatio,
+					panY: current.panY * panRatio
+				});
+			},
+			resetZoom: () => animateZoom({
+				scale: 1,
+				panX: 0,
+				panY: 0
+			})
+		};
+	}, [
+		activeIndex,
+		activeZoomable,
+		animateZoom,
+		changeIndex,
+		closeWithDetails,
+		maxZoom,
+		requestOpen
+	]);
+	React$1.useImperativeHandle(actionsRef, () => actions, [actions]);
+	const context = React$1.useMemo(() => {
+		return {
+			activeIndex,
+			activeItem,
+			actions,
+			armPostGestureActivationRepair,
+			animateZoom,
+			changeIndex,
+			closeWithDetails,
+			controls,
+			direction,
+			getSource: (sourceIndex) => sourceMapRef.current.get(sourceIndex),
+			items,
+			loadedAssets,
+			loading,
+			loop,
+			markAssetLoaded,
+			maxZoom,
+			noCarousel,
+			noControls,
+			noCounter,
+			open,
+			overlay,
+			preload: noCarousel ? 0 : Math.max(0, Math.floor(preload)),
+			registerMedia,
+			registerSource,
+			requestOpen,
+			setTransform,
+			shouldReduceMotion,
+			stopZoomAnimation,
+			transform
+		};
+	}, [
+		activeIndex,
+		activeItem,
+		actions,
+		armPostGestureActivationRepair,
+		animateZoom,
+		changeIndex,
+		closeWithDetails,
+		controls,
+		direction,
+		items,
+		loadedAssets,
+		loading,
+		loop,
+		markAssetLoaded,
+		maxZoom,
+		noCarousel,
+		noControls,
+		noCounter,
+		open,
+		overlay,
+		preload,
+		registerMedia,
+		registerSource,
+		requestOpen,
+		shouldReduceMotion,
+		stopZoomAnimation,
+		transform
+	]);
+	const handleGalleryClick = (event) => {
+		if (event.defaultPrevented || itemsProp) return;
+		const gallery = galleryRef.current;
+		if (!gallery) return;
+		const media = getStandaloneGalleryMedia(event.target, gallery);
+		if (!media) return;
+		const suppressedClick = suppressedGalleryClickRef.current;
+		suppressedGalleryClickRef.current = null;
+		if (event.detail !== 0 && suppressedClick?.media === media && performance.now() - suppressedClick.time < 700) return;
+		openGalleryMedia(media, event.nativeEvent);
+	};
+	const handleGalleryPointerDown = (event) => {
+		suppressedGalleryClickRef.current = null;
+		if (itemsProp || event.pointerType !== "touch" || !event.isPrimary || event.button !== 0) {
+			galleryTouchPressRef.current = null;
+			return;
+		}
+		const gallery = galleryRef.current;
+		if (!gallery) return;
+		const media = getStandaloneGalleryMedia(event.target, gallery);
+		galleryTouchPressRef.current = media ? {
+			pointerId: event.pointerId,
+			media,
+			startX: event.clientX,
+			startY: event.clientY
+		} : null;
+	};
+	const handleGalleryPointerMove = (event) => {
+		const press = galleryTouchPressRef.current;
+		if (!press || press.pointerId !== event.pointerId || Math.hypot(event.clientX - press.startX, event.clientY - press.startY) <= 8) return;
+		galleryTouchPressRef.current = null;
+	};
+	const handleGalleryPointerUp = (event) => {
+		const press = galleryTouchPressRef.current;
+		galleryTouchPressRef.current = null;
+		if (!press || press.pointerId !== event.pointerId || Math.hypot(event.clientX - press.startX, event.clientY - press.startY) > 8) return;
+		const gallery = galleryRef.current;
+		if (!gallery) return;
+		const media = getStandaloneGalleryMedia(event.target, gallery);
+		if (media !== press.media) return;
+		suppressedGalleryClickRef.current = {
+			media,
+			time: performance.now()
+		};
+		openGalleryMedia(media, event.nativeEvent);
+	};
+	function openGalleryMedia(media, event) {
+		const gallery = galleryRef.current;
+		if (!gallery) return;
+		const sourceIndex = Array.from(gallery.querySelectorAll("img,video")).filter((item) => isStandaloneMedia(item, gallery)).indexOf(media);
+		if (sourceIndex < 0) return;
+		requestOpen(sourceIndex, {
+			element: media,
+			morph: true
+		}, event);
+	}
+	const handleGalleryKeyDown = (event) => {
+		if (itemsProp || event.key !== "Enter" && event.key !== " ") return;
+		const gallery = galleryRef.current;
+		const target = event.target;
+		if (!gallery || !(target instanceof HTMLImageElement || target instanceof HTMLVideoElement)) return;
+		if (!isStandaloneMedia(target, gallery)) return;
+		event.preventDefault();
+		openGalleryMedia(target, event.nativeEvent);
+	};
+	const handleGalleryMediaLoad = () => {
+		if (itemsProp) return;
+		const { foundItems } = scanMedia();
+		setAutoItems(foundItems);
+	};
+	const customContent = hasCustomContent(children);
+	return /* @__PURE__ */ jsxs(LightboxContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ jsx("style", {
+			"data-slot": "lightbox-styles",
+			children: LIGHTBOX_STYLES
+		}), /* @__PURE__ */ jsxs(Dialog.Root, {
+			modal: true,
+			open,
+			onOpenChange: handleOpenChange,
+			onOpenChangeComplete: handleOpenChangeComplete,
+			...rootProps,
+			children: [itemsProp ? children : /* @__PURE__ */ jsx("div", {
+				ref: handleGalleryRef,
+				className,
+				"data-slot": "lightbox-gallery",
+				onClick: handleGalleryClick,
+				onKeyDown: handleGalleryKeyDown,
+				onLoadCapture: handleGalleryMediaLoad,
+				onLoadedDataCapture: handleGalleryMediaLoad,
+				onPointerCancel: () => {
+					galleryTouchPressRef.current = null;
+				},
+				onPointerDown: handleGalleryPointerDown,
+				onPointerMove: handleGalleryPointerMove,
+				onPointerUp: handleGalleryPointerUp,
+				children
+			}), !customContent && /* @__PURE__ */ jsx(LightboxContent, {})]
+		})]
+	});
+}
+function LightboxTrigger({ index = 0, morph, onClick, ref, ...props }) {
+	const { registerSource, requestOpen } = useLightbox();
+	const sourceRef = React$1.useRef(null);
+	const mergedRef = React$1.useCallback((element) => {
+		sourceRef.current = element;
+		if (element) {
+			const inferredMorph = morph ?? element.matches("img,video,canvas,picture,[data-lightbox-morph]");
+			registerSource(index, {
+				element,
+				morph: inferredMorph
+			});
+		} else registerSource(index, null);
+		if (typeof ref === "function") return ref(element);
+		if (ref) ref.current = element;
+	}, [
+		index,
+		morph,
+		ref,
+		registerSource
+	]);
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref: mergedRef,
+		"data-slot": "lightbox-trigger",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			const element = sourceRef.current;
+			if (!element) return;
+			const inferredMorph = morph ?? element.matches("img,video,canvas,picture,[data-lightbox-morph]");
+			registerSource(index, {
+				element,
+				morph: inferredMorph
+			});
+			event.preventBaseUIHandler();
+			requestOpen(index, {
+				element,
+				morph: inferredMorph
+			}, event.nativeEvent);
+		},
+		...props
+	});
+}
+function LightboxBackdrop({ className, style, ...props }) {
+	const { overlay, transform } = useLightbox();
+	const backdropStyle = mergeLightboxBackdropStyle({ "--lightbox-backdrop-opacity": clamp(1 - Math.abs(transform.dismissY) / Math.max(typeof window === "undefined" ? 1 : window.innerHeight || 1, 1), 0, 1) }, style);
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		"data-overlay": overlay,
+		className: cn("fixed inset-0 z-60 min-h-dvh opacity-[var(--lightbox-backdrop-opacity)] transition-[opacity,backdrop-filter] duration-200", overlay === "blur" && "bg-black/80 backdrop-blur-md", overlay === "brightness" && "bg-black/90", "data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:pointer-events-none motion-reduce:transition-opacity", className),
+		style: backdropStyle,
+		...props
+	});
+}
+function LightboxViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		"data-slot": "lightbox-viewport",
+		className: cn("fixed inset-0 z-70 flex min-h-dvh items-stretch overflow-hidden overscroll-contain data-ending-style:pointer-events-none", className),
+		...props
+	});
+}
+function LightboxContent({ className, children, initialFocus, onKeyDown, style, ...props }) {
+	const { activeIndex, activeItem, actions, changeIndex, direction, items, noCarousel, noControls, noCounter, setTransform, shouldReduceMotion, transform } = useLightbox();
+	const popupRef = React$1.useRef(null);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.target.matches("input,textarea,select,[contenteditable=true]")) return;
+		const rtlMultiplier = direction === "rtl" ? -1 : 1;
+		if (!noCarousel && (event.key === "ArrowLeft" || event.key === "ArrowRight") && event.shiftKey) {
+			event.preventDefault();
+			const physical = event.key === "ArrowRight" ? 1 : -1;
+			changeIndex(activeIndex + physical * rtlMultiplier, "keyboard", event.nativeEvent);
+			return;
+		}
+		if (transform.scale > 1 && event.key.startsWith("Arrow")) {
+			event.preventDefault();
+			const amount = 40;
+			const delta = {
+				ArrowLeft: [amount, 0],
+				ArrowRight: [-40, 0],
+				ArrowUp: [0, amount],
+				ArrowDown: [0, -40]
+			}[event.key];
+			if (delta) panBy(delta[0], delta[1]);
+			return;
+		}
+		if (!noCarousel && transform.scale === 1 && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			event.preventDefault();
+			const physical = event.key === "ArrowRight" ? 1 : -1;
+			changeIndex(activeIndex + physical * rtlMultiplier, "keyboard", event.nativeEvent);
+			return;
+		}
+		if (event.key === "+" || event.key === "=") {
+			event.preventDefault();
+			actions.zoomIn();
+		} else if (event.key === "-") {
+			event.preventDefault();
+			actions.zoomOut();
+		} else if (event.key === "0") {
+			event.preventDefault();
+			actions.resetZoom();
+		}
+	};
+	function panBy(deltaX, deltaY) {
+		const media = popupRef.current?.querySelector("[data-slot=\"lightbox-zoom\"][data-active=\"true\"]");
+		if (!media) return;
+		const rect = media.getBoundingClientRect();
+		const baseWidth = rect.width / transform.scale;
+		const baseHeight = rect.height / transform.scale;
+		const maxX = Math.max(0, (baseWidth * transform.scale - window.innerWidth) / 2);
+		const maxY = Math.max(0, (baseHeight * transform.scale - window.innerHeight) / 2);
+		setTransform((current) => {
+			return {
+				...current,
+				panX: clamp(current.panX + deltaX, -maxX, maxX),
+				panY: clamp(current.panY + deltaY, -maxY, maxY)
+			};
+		});
+	}
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		"data-slot": "lightbox-portal",
+		container: typeof document === "undefined" ? void 0 : document.body,
+		children: [/* @__PURE__ */ jsx(LightboxBackdrop, { forceRender: true }), /* @__PURE__ */ jsx(LightboxViewport, {
+			dir: direction,
+			"data-lightbox-motion": shouldReduceMotion ? "reduced" : "full",
+			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+				ref: popupRef,
+				"data-slot": "lightbox-content",
+				"data-dragging": transform.dragging ? "true" : "false",
+				"aria-describedby": activeItem?.caption ? `lightbox-caption-${activeIndex}` : void 0,
+				initialFocus: initialFocus ?? (() => popupRef.current?.querySelector("[data-slot=\"lightbox-close\"]") ?? popupRef.current),
+				className: cn("relative flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-transparent text-white outline-none", "transition-[opacity,scale] duration-200 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:pointer-events-none", "motion-reduce:transition-opacity motion-reduce:transform-none", className),
+				style: mergeLightboxContentStyle({ "--lightbox-header-inset": "max(5rem, calc(env(safe-area-inset-top) + 4rem))" }, style),
+				onKeyDown: handleKeyDown,
+				...props,
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "sr-only",
+						children: "Media viewer"
+					}),
+					children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+						(!noCounter || !noControls) && /* @__PURE__ */ jsxs("div", {
+							className: "pointer-events-none absolute inset-x-0 top-0 z-30 flex items-start justify-between gap-4 p-3 pt-[max(0.75rem,env(safe-area-inset-top))] sm:p-4",
+							children: [!noCounter && /* @__PURE__ */ jsx(LightboxCounter, {}), !noControls && /* @__PURE__ */ jsx(LightboxToolbar, { className: cn(noCounter && "ms-auto") })]
+						}),
+						/* @__PURE__ */ jsx(LightboxSlides, {}),
+						!noCarousel && items.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LightboxPrevious, {}), /* @__PURE__ */ jsx(LightboxNext, {})] }),
+						(Boolean(activeItem?.caption) || !noCarousel && items.length > 1) && /* @__PURE__ */ jsxs("div", {
+							className: "pointer-events-none absolute inset-x-0 bottom-0 z-30 flex flex-col items-center gap-3 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-4",
+							children: [/* @__PURE__ */ jsx(LightboxCaptions, {}), !noCarousel && items.length > 1 && /* @__PURE__ */ jsx(LightboxThumbnails, {})]
+						})
+					] }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: items.length > 0 ? `${getItemLabel(activeItem, activeIndex)}, ${activeIndex + 1} of ${items.length}` : "No media"
+					})
+				]
+			})
+		})]
+	});
+}
+LightboxContent.__lightboxContent = true;
+function LightboxZoom({ active = true, className, render, style, ref, ...props }) {
+	const { activeItem, registerMedia, transform } = useLightbox();
+	const zoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable);
+	const mediaRegistrationRef = React$1.useCallback((element) => {
+		if (active) registerMedia(element);
+	}, [active, registerMedia]);
+	const defaultProps = {
+		className: cn("flex max-h-full max-w-full origin-center items-center justify-center will-change-transform", className),
+		"data-active": active ? "true" : "false",
+		"data-dragging": transform.dragging ? "true" : "false",
+		"data-slot": "lightbox-zoom",
+		"data-zoomable": zoomable ? "true" : "false",
+		"data-zoomed": transform.scale > 1 ? "true" : "false",
+		style: {
+			transform: active ? `translate3d(${transform.panX}px, ${transform.panY}px, 0) scale(${transform.scale})` : void 0,
+			...style
+		}
+	};
+	return useRender({
+		defaultTagName: "div",
+		ref: ref ? [ref, mediaRegistrationRef] : mediaRegistrationRef,
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function LightboxSlide({ index, active = false, className, style, ...props }) {
+	const { activeItem, items, loadedAssets, loading, markAssetLoaded, noCarousel, noControls, noCounter } = useLightbox();
+	const item = items[index];
+	const [failedLoadKey, setFailedLoadKey] = React$1.useState(null);
+	if (!item) return null;
+	const loadKey = getMediaLoadKey(item);
+	const mediaFailed = failedLoadKey === loadKey;
+	const mediaLoaded = loadedAssets.has(loadKey);
+	const shouldMountMedia = loading === "eager" || active || mediaLoaded;
+	const hasTopChrome = !noCounter || !noControls;
+	const hasBottomChrome = Boolean(activeItem?.caption);
+	const captionTrack = item.type === "video" ? item.tracks?.find((track) => track.kind === "captions") : void 0;
+	const media = item.type === "image" ? /* @__PURE__ */ jsx("img", {
+		src: item.src,
+		srcSet: item.srcSet,
+		sizes: item.sizes,
+		alt: item.alt,
+		width: item.width,
+		height: item.height,
+		draggable: false,
+		decoding: "async",
+		loading: active ? "eager" : "lazy",
+		onLoad: () => {
+			setFailedLoadKey(null);
+			markAssetLoaded(loadKey);
+		},
+		onError: () => setFailedLoadKey(loadKey),
+		className: cn("block h-auto w-[min(82vw,64rem)] max-w-[calc(100vw-2rem)] select-none rounded-lg object-contain", "max-h-[calc(100dvh-11rem)] sm:max-h-[calc(100dvh-12rem)]", "transition-opacity duration-200", !mediaLoaded && "opacity-0", item.className)
+	}) : /* @__PURE__ */ jsxs("video", {
+		...item.videoProps,
+		src: item.src,
+		poster: item.poster,
+		width: item.width,
+		height: item.height,
+		"aria-label": item.label,
+		controls: item.videoProps?.controls ?? true,
+		muted: item.videoProps?.muted ?? false,
+		onError: (event) => {
+			item.videoProps?.onError?.(event);
+			setFailedLoadKey(loadKey);
+		},
+		onCanPlay: (event) => {
+			item.videoProps?.onCanPlay?.(event);
+			setFailedLoadKey(null);
+			markAssetLoaded(loadKey);
+		},
+		onLoadedData: (event) => {
+			item.videoProps?.onLoadedData?.(event);
+			setFailedLoadKey(null);
+			markAssetLoaded(loadKey);
+		},
+		onLoadedMetadata: (event) => {
+			item.videoProps?.onLoadedMetadata?.(event);
+			markAssetLoaded(loadKey);
+		},
+		playsInline: item.videoProps?.playsInline ?? true,
+		preload: item.videoProps?.preload ?? (active ? "auto" : "metadata"),
+		className: cn("block h-auto w-[min(82vw,64rem)] max-w-[calc(100vw-2rem)] rounded-lg bg-black object-contain", "max-h-[calc(100dvh-11rem)] sm:max-h-[calc(100dvh-12rem)]", "transition-opacity duration-200", !mediaLoaded && "opacity-0", item.className),
+		children: [
+			item.sources?.map((source) => /* @__PURE__ */ jsx("source", { ...source }, `${source.src}-${source.type}`)),
+			/* @__PURE__ */ jsx("track", {
+				...captionTrack,
+				kind: "captions",
+				label: captionTrack?.label ?? "Captions",
+				src: captionTrack?.src ?? EMPTY_CAPTIONS_TRACK,
+				srcLang: captionTrack?.srcLang ?? "en"
+			}),
+			item.tracks?.filter((track) => track !== captionTrack).map((track) => /* @__PURE__ */ jsx("track", { ...track }, `${track.src}-${track.kind}-${track.srcLang}`))
+		]
+	});
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: "relative flex min-h-10 min-w-10 max-h-full max-w-full items-center justify-center",
+		children: [mediaFailed ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "px-4 py-8 text-sm text-white",
+			children: item.type === "image" ? "Unable to load image" : "Unable to load video"
+		}) : !mediaLoaded && /* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Spinner, { className: "size-10 text-white" })
+		}), shouldMountMedia && /* @__PURE__ */ jsx("div", {
+			className: cn("flex max-h-full max-w-full items-center justify-center", mediaFailed && "hidden"),
+			children: media
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-slide",
+		"data-active": active ? "true" : "false",
+		"data-type": item.type,
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": `${index + 1} of ${items.length}: ${getItemLabel(item, index)}`,
+		"aria-hidden": active ? void 0 : true,
+		inert: active ? void 0 : true,
+		className: cn("pointer-events-none absolute inset-0 flex items-center justify-center px-4", noCarousel ? hasTopChrome || hasBottomChrome ? "pt-[var(--lightbox-header-inset,5rem)] pb-20" : "py-4" : "pt-[var(--lightbox-header-inset,5rem)] pb-36", active && "pointer-events-auto", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx(LightboxZoom, {
+			active,
+			children: content
+		})
+	});
+}
+function relativeSlideOffset(index, activeIndex, length, loop, preferredOffset = 0) {
+	let offset = index - activeIndex;
+	if (!loop || length < 2) return offset;
+	if (offset > length / 2) offset -= length;
+	if (offset < -length / 2) offset += length;
+	if (length === 2 && Math.abs(offset) === 1 && preferredOffset !== 0) return preferredOffset;
+	return offset;
+}
+function isIndexMounted(index, activeIndex, length, preload, loop) {
+	return Math.abs(relativeSlideOffset(index, activeIndex, length, loop)) <= preload;
+}
+function LightboxSlides({ className, onClick, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onDoubleClick, ...props }) {
+	const { activeIndex, activeItem, armPostGestureActivationRepair, animateZoom, changeIndex, closeWithDetails, direction, items, loading, loop, maxZoom, noCarousel, preload, setTransform, shouldReduceMotion, stopZoomAnimation, transform } = useLightbox();
+	const viewportRef = React$1.useRef(null);
+	const pointersRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const sessionRef = React$1.useRef(null);
+	const animationRef = React$1.useRef(null);
+	const wheelRef = React$1.useRef({
+		x: 0,
+		y: 0,
+		timer: 0
+	});
+	const lastTapRef = React$1.useRef({
+		time: 0,
+		x: 0,
+		y: 0
+	});
+	const suppressClickRef = React$1.useRef(false);
+	const suppressClickTimerRef = React$1.useRef(0);
+	const transformRef = React$1.useRef(transform);
+	React$1.useLayoutEffect(() => {
+		suppressClickRef.current = true;
+		window.clearTimeout(suppressClickTimerRef.current);
+		suppressClickTimerRef.current = window.setTimeout(() => {
+			suppressClickRef.current = false;
+		}, 0);
+	}, []);
+	React$1.useLayoutEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	const zoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable);
+	const clickZoomable = activeItem?.type === "image" && zoomable;
+	React$1.useEffect(() => {
+		const animation = animationRef;
+		const wheel = wheelRef;
+		const pointers = pointersRef;
+		const session = sessionRef;
+		return () => {
+			animation.current?.stop();
+			window.clearTimeout(wheel.current.timer);
+			window.clearTimeout(suppressClickTimerRef.current);
+			wheel.current = {
+				x: 0,
+				y: 0,
+				timer: 0
+			};
+			pointers.current.clear();
+			session.current = null;
+		};
+	}, []);
+	React$1.useEffect(() => {
+		if (loading === "lazy") return;
+		for (let distance = 1; distance <= preload; distance += 1) for (const candidate of [activeIndex - distance, activeIndex + distance]) {
+			const normalized = normalizeIndex(candidate, items.length, loop);
+			const item = items[normalized];
+			if (item?.type !== "image") continue;
+			const image = new Image();
+			image.srcset = item.srcSet ?? "";
+			image.sizes = item.sizes ?? "";
+			image.src = item.src;
+			image.decode?.().catch(() => void 0);
+		}
+	}, [
+		activeIndex,
+		items,
+		loading,
+		loop,
+		preload
+	]);
+	const getPanBounds = React$1.useCallback((scale) => {
+		const media = viewportRef.current?.querySelector("[data-slot=\"lightbox-zoom\"][data-active=\"true\"]");
+		const viewport = viewportRef.current;
+		if (!media || !viewport) return {
+			x: 0,
+			y: 0
+		};
+		const rect = media.getBoundingClientRect();
+		const currentScale = transformRef.current.scale || 1;
+		const width = rect.width / currentScale;
+		const height = rect.height / currentScale;
+		return {
+			x: Math.max(0, (width * scale - viewport.clientWidth) / 2),
+			y: Math.max(0, (height * scale - viewport.clientHeight) / 2)
+		};
+	}, []);
+	const stopAnimation = React$1.useCallback(() => {
+		animationRef.current?.stop();
+		animationRef.current = null;
+	}, []);
+	const animateTransformValue = React$1.useCallback((key, to, onComplete) => {
+		stopAnimation();
+		if (shouldReduceMotion) {
+			setTransform((current) => {
+				return {
+					...current,
+					[key]: to
+				};
+			});
+			onComplete?.();
+			return;
+		}
+		const from = transformRef.current[key];
+		animationRef.current = animate(from, to, {
+			duration: .24,
+			ease: "easeOut",
+			onUpdate: (value) => setTransform((current) => {
+				return {
+					...current,
+					[key]: value
+				};
+			}),
+			onComplete: () => {
+				animationRef.current = null;
+				onComplete?.();
+			}
+		});
+	}, [
+		setTransform,
+		shouldReduceMotion,
+		stopAnimation
+	]);
+	const getZoomTarget = React$1.useCallback((nextScale, clientX, clientY) => {
+		const viewport = viewportRef.current;
+		if (!viewport) return null;
+		const current = transformRef.current;
+		const scale = clamp(nextScale, 1, maxZoom);
+		if (scale === 1) return {
+			...current,
+			scale: 1,
+			panX: 0,
+			panY: 0
+		};
+		const rect = viewport.getBoundingClientRect();
+		const pointX = clientX - (rect.left + rect.width / 2);
+		const pointY = clientY - (rect.top + rect.height / 2);
+		const ratio = scale / current.scale;
+		const bounds = getPanBounds(scale);
+		return {
+			...current,
+			scale,
+			panX: clamp(pointX - (pointX - current.panX) * ratio, -bounds.x, bounds.x),
+			panY: clamp(pointY - (pointY - current.panY) * ratio, -bounds.y, bounds.y),
+			swipeX: 0,
+			dismissY: 0
+		};
+	}, [getPanBounds, maxZoom]);
+	const zoomAt = React$1.useCallback((nextScale, clientX, clientY) => {
+		const target = getZoomTarget(nextScale, clientX, clientY);
+		if (target) {
+			transformRef.current = target;
+			setTransform(target);
+		}
+	}, [getZoomTarget, setTransform]);
+	const animateZoomAt = React$1.useCallback((nextScale, clientX, clientY) => {
+		const target = getZoomTarget(nextScale, clientX, clientY);
+		if (target) animateZoom(target);
+	}, [animateZoom, getZoomTarget]);
+	const toggleZoomAt = React$1.useCallback((clientX, clientY) => {
+		if (activeItem?.zoomable === false || activeItem?.type === "video" && !activeItem.zoomable) return;
+		const nextScale = transformRef.current.scale > 1 ? 1 : Math.min(2, maxZoom);
+		animateZoomAt(nextScale, clientX, clientY);
+	}, [
+		activeItem,
+		animateZoomAt,
+		maxZoom
+	]);
+	const animateNavigation = React$1.useCallback((logicalDelta, reason, event) => {
+		if (items.length < 2) return;
+		const nextIndex = normalizeIndex(activeIndex + logicalDelta, items.length, loop);
+		if (nextIndex === activeIndex) {
+			animateTransformValue("swipeX", 0);
+			return;
+		}
+		const viewportWidth = viewportRef.current?.clientWidth ?? window.innerWidth;
+		const rtl = direction === "rtl" ? -1 : 1;
+		const target = -logicalDelta * rtl * viewportWidth;
+		animateTransformValue("swipeX", target, () => {
+			changeIndex(nextIndex, reason, event);
+			setTransform(initialTransform);
+		});
+	}, [
+		activeIndex,
+		animateTransformValue,
+		changeIndex,
+		direction,
+		items.length,
+		loop,
+		setTransform
+	]);
+	const closeFromGesture = React$1.useCallback((event) => {
+		if (event) armPostGestureActivationRepair(event);
+		closeWithDetails(getEventDetails("imperative-action", event, null));
+	}, [armPostGestureActivationRepair, closeWithDetails]);
+	const releaseGesture = React$1.useCallback((event) => {
+		const session = sessionRef.current;
+		if (!session) return;
+		const viewport = viewportRef.current;
+		const width = viewport?.clientWidth ?? window.innerWidth;
+		const height = viewport?.clientHeight ?? window.innerHeight;
+		const current = transformRef.current;
+		setTransform((value) => {
+			return {
+				...value,
+				dragging: false
+			};
+		});
+		if (session.mode === "swipe") {
+			if (noCarousel) {
+				animateTransformValue("swipeX", 0);
+				sessionRef.current = null;
+				return;
+			}
+			if (Math.abs(current.swipeX) >= width * .25 || Math.abs(session.velocityX) >= .5) {
+				const rtl = direction === "rtl" ? -1 : 1;
+				const logicalDelta = current.swipeX < 0 ? rtl : -rtl;
+				animateNavigation(logicalDelta, "swipe", event);
+			} else animateTransformValue("swipeX", 0);
+		} else if (session.mode === "dismiss") {
+			if (Math.abs(current.dismissY) >= height * .2 || Math.abs(session.velocityY) >= .5) {
+				const target = Math.sign(current.dismissY || session.velocityY) * height;
+				animateTransformValue("dismissY", target);
+				closeFromGesture(event);
+			} else animateTransformValue("dismissY", 0);
+		} else if (session.mode === "pan" || session.mode === "pinch") {
+			const scale = clamp(current.scale, 1, maxZoom);
+			const bounds = getPanBounds(scale);
+			setTransform((value) => {
+				return {
+					...value,
+					scale,
+					panX: clamp(value.panX, -bounds.x, bounds.x),
+					panY: clamp(value.panY, -bounds.y, bounds.y),
+					dragging: false
+				};
+			});
+		} else {
+			animateTransformValue("swipeX", 0);
+			animateTransformValue("dismissY", 0);
+		}
+		sessionRef.current = null;
+	}, [
+		animateNavigation,
+		animateTransformValue,
+		closeFromGesture,
+		direction,
+		getPanBounds,
+		maxZoom,
+		noCarousel,
+		setTransform
+	]);
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (event.defaultPrevented) return;
+		const interactiveTarget = event.target.closest(interactiveSelector);
+		if (interactiveTarget && interactiveTarget !== event.currentTarget) return;
+		stopAnimation();
+		stopZoomAnimation();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		pointersRef.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		const points = Array.from(pointersRef.current.values());
+		const first = points[0] ?? {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const second = points[1] ?? first;
+		const isPinch = points.length > 1;
+		const pinchDistance = isPinch ? Math.hypot(second.x - first.x, second.y - first.y) : 0;
+		const pinchCenterX = isPinch ? (first.x + second.x) / 2 : event.clientX;
+		const pinchCenterY = isPinch ? (first.y + second.y) / 2 : event.clientY;
+		const current = transformRef.current;
+		const now = performance.now();
+		sessionRef.current = {
+			mode: isPinch ? "pinch" : "pending",
+			startX: event.clientX,
+			startY: event.clientY,
+			startPanX: current.panX,
+			startPanY: current.panY,
+			startSwipeX: current.swipeX,
+			startDismissY: current.dismissY,
+			startScale: current.scale,
+			pinchDistance,
+			pinchCenterX,
+			pinchCenterY,
+			lastX: event.clientX,
+			lastY: event.clientY,
+			lastTime: now,
+			velocityX: 0,
+			velocityY: 0
+		};
+		setTransform((value) => {
+			return {
+				...value,
+				dragging: true
+			};
+		});
+	};
+	const handlePointerMove = (event) => {
+		onPointerMove?.(event);
+		if (event.defaultPrevented || !pointersRef.current.has(event.pointerId)) return;
+		pointersRef.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		const session = sessionRef.current;
+		if (!session) return;
+		const points = Array.from(pointersRef.current.values());
+		if (points.length >= 2 && zoomable) {
+			const [first, second] = points;
+			const distance = Math.hypot(second.x - first.x, second.y - first.y);
+			const centerX = (first.x + second.x) / 2;
+			const centerY = (first.y + second.y) / 2;
+			if (!session.pinchDistance) {
+				session.pinchDistance = distance;
+				session.pinchCenterX = centerX;
+				session.pinchCenterY = centerY;
+				session.startScale = transformRef.current.scale;
+			}
+			session.mode = "pinch";
+			const rawScale = session.startScale * (distance / Math.max(session.pinchDistance, 1));
+			const elasticScale = rawScale < 1 ? 1 - (1 - rawScale) * .25 : rawScale > maxZoom ? maxZoom + (rawScale - maxZoom) * .25 : rawScale;
+			zoomAt(elasticScale, centerX, centerY);
+			return;
+		}
+		const dx = event.clientX - session.startX;
+		const dy = event.clientY - session.startY;
+		const now = performance.now();
+		const elapsed = Math.max(1, now - session.lastTime);
+		session.velocityX = (event.clientX - session.lastX) / elapsed;
+		session.velocityY = (event.clientY - session.lastY) / elapsed;
+		session.lastX = event.clientX;
+		session.lastY = event.clientY;
+		session.lastTime = now;
+		if (transformRef.current.scale > 1) session.mode = "pan";
+		else if (session.mode === "pending" && Math.hypot(dx, dy) > 8) session.mode = Math.abs(dx) > Math.abs(dy) ? noCarousel ? "pending" : "swipe" : "dismiss";
+		if (session.mode === "pan") {
+			const bounds = getPanBounds(transformRef.current.scale);
+			const rawX = session.startPanX + dx;
+			const rawY = session.startPanY + dy;
+			const resist = (value, maximum) => Math.abs(value) <= maximum ? value : Math.sign(value) * (maximum + (Math.abs(value) - maximum) * .35);
+			setTransform((value) => {
+				return {
+					...value,
+					panX: resist(rawX, bounds.x),
+					panY: resist(rawY, bounds.y)
+				};
+			});
+		} else if (session.mode === "swipe") setTransform((value) => {
+			return {
+				...value,
+				swipeX: session.startSwipeX + dx
+			};
+		});
+		else if (session.mode === "dismiss") setTransform((value) => {
+			return {
+				...value,
+				dismissY: session.startDismissY + dy
+			};
+		});
+	};
+	const handlePointerEnd = (event) => {
+		if (event.type === "pointercancel") onPointerCancel?.(event);
+		else onPointerUp?.(event);
+		const session = sessionRef.current;
+		pointersRef.current.delete(event.pointerId);
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (!session) {
+			suppressClickRef.current = false;
+			return;
+		}
+		if (pointersRef.current.size > 0) {
+			if (session?.mode === "pinch") {
+				const [remaining] = pointersRef.current.values();
+				if (remaining) {
+					const current = transformRef.current;
+					const now = performance.now();
+					sessionRef.current = {
+						...session,
+						mode: "pan",
+						startX: remaining.x,
+						startY: remaining.y,
+						startPanX: current.panX,
+						startPanY: current.panY,
+						startSwipeX: current.swipeX,
+						startDismissY: current.dismissY,
+						startScale: current.scale,
+						pinchDistance: 0,
+						pinchCenterX: remaining.x,
+						pinchCenterY: remaining.y,
+						lastX: remaining.x,
+						lastY: remaining.y,
+						lastTime: now,
+						velocityX: 0,
+						velocityY: 0
+					};
+				}
+			}
+			return;
+		}
+		let shouldToggleTouchZoom = false;
+		if (event.type !== "pointercancel" && event.pointerType === "touch" && session?.mode === "pending") {
+			const now = performance.now();
+			const last = lastTapRef.current;
+			if (now - last.time < 300 && Math.hypot(event.clientX - last.x, event.clientY - last.y) < 30) {
+				shouldToggleTouchZoom = true;
+				lastTapRef.current.time = 0;
+			} else lastTapRef.current = {
+				time: now,
+				x: event.clientX,
+				y: event.clientY
+			};
+		}
+		const shouldToggleZoomOnDesktop = event.type !== "pointercancel" && event.pointerType !== "touch" && event.button === 0 && session?.mode === "pending" && clickZoomable;
+		suppressClickRef.current = event.type === "pointercancel" || event.pointerType === "touch" || session?.mode !== "pending" || shouldToggleZoomOnDesktop;
+		window.clearTimeout(suppressClickTimerRef.current);
+		if (suppressClickRef.current) suppressClickTimerRef.current = window.setTimeout(() => {
+			suppressClickRef.current = false;
+		}, 0);
+		releaseGesture(event.nativeEvent);
+		if (shouldToggleTouchZoom) toggleZoomAt(event.clientX, event.clientY);
+		else if (shouldToggleZoomOnDesktop) toggleZoomAt(event.clientX, event.clientY);
+	};
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (suppressClickRef.current) {
+			suppressClickRef.current = false;
+			return;
+		}
+		const target = event.target;
+		const activeZoom = target.closest("[data-slot=\"lightbox-zoom\"][data-active=\"true\"]");
+		const interactiveTarget = target.closest(interactiveSelector);
+		if (!activeZoom || interactiveTarget && interactiveTarget !== event.currentTarget || !clickZoomable) return;
+		toggleZoomAt(event.clientX, event.clientY);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.target !== event.currentTarget || !clickZoomable || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		const rect = event.currentTarget.getBoundingClientRect();
+		toggleZoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
+	};
+	const releaseWheel = React$1.useCallback((event) => {
+		const current = wheelRef.current;
+		const width = viewportRef.current?.clientWidth ?? window.innerWidth;
+		const height = viewportRef.current?.clientHeight ?? window.innerHeight;
+		if (!noCarousel && (Math.abs(current.x) > 100 || Math.abs(transformRef.current.swipeX) > width * .25)) {
+			const rtl = direction === "rtl" ? -1 : 1;
+			animateNavigation(current.x > 0 ? rtl : -rtl, "swipe", event);
+		} else if (Math.abs(current.y) > 100 || Math.abs(transformRef.current.dismissY) > height * .2) {
+			const target = Math.sign(current.y || transformRef.current.dismissY) * height;
+			animateTransformValue("dismissY", target);
+			closeFromGesture(event);
+		} else {
+			animateTransformValue("swipeX", 0);
+			animateTransformValue("dismissY", 0);
+		}
+		wheelRef.current.x = 0;
+		wheelRef.current.y = 0;
+	}, [
+		animateNavigation,
+		animateTransformValue,
+		closeFromGesture,
+		direction,
+		noCarousel
+	]);
+	const handleWheel = (event) => {
+		onWheel?.(event);
+		event.stopPropagation();
+		if (event.defaultPrevented) return;
+		const interactiveTarget = event.target.closest(interactiveSelector);
+		if (interactiveTarget && interactiveTarget !== event.currentTarget) return;
+		const likelyMouseWheel = event.deltaMode !== WheelEvent.DOM_DELTA_PIXEL || Math.abs(event.deltaY) >= 50 && Math.abs(event.deltaX) < 8;
+		if (event.altKey || likelyMouseWheel) {
+			if (!zoomable) return;
+			event.preventDefault();
+			const sensitivity = event.altKey ? 8e-4 : .0016;
+			const scale = transformRef.current.scale * Math.exp(-event.deltaY * sensitivity);
+			animateZoomAt(scale, event.clientX, event.clientY);
+			return;
+		}
+		event.preventDefault();
+		if (transformRef.current.scale > 1) {
+			const bounds = getPanBounds(transformRef.current.scale);
+			setTransform((value) => {
+				return {
+					...value,
+					panX: clamp(value.panX - event.deltaX, -bounds.x, bounds.x),
+					panY: clamp(value.panY - event.deltaY, -bounds.y, bounds.y)
+				};
+			});
+			return;
+		}
+		wheelRef.current.x += event.deltaX;
+		wheelRef.current.y += event.deltaY;
+		if (!noCarousel && Math.abs(wheelRef.current.x) > Math.abs(wheelRef.current.y)) setTransform((value) => {
+			return {
+				...value,
+				swipeX: -wheelRef.current.x
+			};
+		});
+		else setTransform((value) => {
+			return {
+				...value,
+				dismissY: wheelRef.current.y
+			};
+		});
+		window.clearTimeout(wheelRef.current.timer);
+		const nativeEvent = event.nativeEvent;
+		wheelRef.current.timer = window.setTimeout(() => releaseWheel(nativeEvent), 120);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: viewportRef,
+		"data-slot": "lightbox-slides",
+		"data-dragging": transform.dragging ? "true" : "false",
+		"data-zoomed": transform.scale > 1 ? "true" : "false",
+		role: clickZoomable ? "button" : void 0,
+		"aria-label": clickZoomable ? transform.scale > 1 ? "Zoom out current image" : "Zoom in current image" : void 0,
+		tabIndex: clickZoomable ? 0 : void 0,
+		className: cn("relative min-h-0 flex-1 overflow-hidden touch-none outline-none select-none focus-visible:outline-none focus-visible:ring-0", className),
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerEnd,
+		onPointerCancel: handlePointerEnd,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onWheel: handleWheel,
+		onDoubleClick: (event) => {
+			onDoubleClick?.(event);
+		},
+		...props,
+		children: items.map((item, itemIndex) => {
+			if (!isIndexMounted(itemIndex, activeIndex, items.length, preload, loop)) return null;
+			const preferredOffset = (transform.swipeX === 0 ? 0 : -Math.sign(transform.swipeX)) * (direction === "rtl" ? -1 : 1);
+			const offset = relativeSlideOffset(itemIndex, activeIndex, items.length, loop, preferredOffset);
+			return /* @__PURE__ */ jsx(LightboxSlide, {
+				index: itemIndex,
+				active: itemIndex === activeIndex,
+				style: { transform: `translate3d(calc(${offset * 100 * (direction === "rtl" ? -1 : 1)}% + ${transform.swipeX}px), ${transform.dismissY}px, 0)` }
+			}, item.id ?? itemIndex);
+		})
+	});
+}
+function LightboxToolbar({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-toolbar",
+		className: cn("pointer-events-auto flex items-center gap-1", className),
+		role: "toolbar",
+		"aria-label": "Lightbox controls",
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(LightboxDownload, {}),
+			/* @__PURE__ */ jsx(LightboxZoomButton, {}),
+			/* @__PURE__ */ jsx(LightboxMore, {}),
+			/* @__PURE__ */ jsx(LightboxClose, {})
+		] })
+	});
+}
+function LightboxCounter({ className, ...props }) {
+	const { activeIndex, items } = useLightbox();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "lightbox-counter",
+		className: cn("pointer-events-auto rounded-lg px-3 py-2 text-sm font-medium tabular-nums", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			children: [
+				items.length > 0 ? activeIndex + 1 : 0,
+				" / ",
+				items.length
+			]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [
+				"Item ",
+				items.length > 0 ? activeIndex + 1 : 0,
+				" of ",
+				items.length
+			]
+		})]
+	});
+}
+function LightboxCaptions({ className, ...props }) {
+	const { activeIndex, activeItem } = useLightbox();
+	if (!activeItem?.caption) return null;
+	return /* @__PURE__ */ jsx("div", {
+		id: `lightbox-caption-${activeIndex}`,
+		"data-slot": "lightbox-captions",
+		className: cn("pointer-events-auto max-w-2xl px-3 py-2 text-center text-sm [text-shadow:0_1px_3px_rgb(0_0_0/0.8)]", className),
+		...props,
+		children: activeItem.caption
+	});
+}
+function LightboxVideoThumbnail({ crossOrigin, onLoad, src }) {
+	const videoRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		const showFrame = () => {
+			const duration = Number.isFinite(video.duration) ? video.duration : 0;
+			video.currentTime = Math.min(.1, Math.max(0, duration / 2));
+		};
+		video.addEventListener("loadedmetadata", showFrame);
+		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) showFrame();
+		return () => video.removeEventListener("loadedmetadata", showFrame);
+	}, [src]);
+	return /* @__PURE__ */ jsx("video", {
+		ref: videoRef,
+		"aria-hidden": "true",
+		crossOrigin,
+		muted: true,
+		onLoadedData: onLoad,
+		playsInline: true,
+		preload: "metadata",
+		src,
+		tabIndex: -1,
+		className: "size-full object-cover"
+	});
+}
+function LightboxThumbnail({ index, className, onClick, ...props }) {
+	const { activeIndex, changeIndex, items, loadedAssets, loading, markAssetLoaded } = useLightbox();
+	const item = items[index];
+	const buttonRef = React$1.useRef(null);
+	const active = index === activeIndex;
+	const [intersected, setIntersected] = React$1.useState(false);
+	const [failedLoadKey, setFailedLoadKey] = React$1.useState(null);
+	const thumbnailLoadKey = item ? getThumbnailLoadKey(item) : "";
+	const thumbnailFailed = failedLoadKey === thumbnailLoadKey;
+	const thumbnailCached = item ? loadedAssets.has(thumbnailLoadKey) : false;
+	React$1.useEffect(() => {
+		if (loading === "eager" || active || intersected || thumbnailCached) return;
+		const button = buttonRef.current;
+		if (!button) return;
+		if (typeof IntersectionObserver === "undefined") {
+			const frame = requestAnimationFrame(() => setIntersected(true));
+			return () => cancelAnimationFrame(frame);
+		}
+		const root = button.closest("[data-slot=\"scroll-area-viewport\"]");
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			setIntersected(true);
+			observer.disconnect();
+		}, {
+			root,
+			threshold: .01
+		});
+		observer.observe(button);
+		return () => observer.disconnect();
+	}, [
+		active,
+		intersected,
+		loading,
+		thumbnailCached
+	]);
+	React$1.useEffect(() => {
+		if (active) buttonRef.current?.scrollIntoView({
+			block: "nearest",
+			inline: "center"
+		});
+	}, [active]);
+	if (!item) return null;
+	const shouldLoad = loading === "eager" || active || intersected || thumbnailCached;
+	const thumbnailSource = item.type === "image" ? item.thumbnailSrc ?? item.src : item.poster;
+	const thumbnail = shouldLoad ? item.thumbnail ?? (item.type === "image" ? /* @__PURE__ */ jsx("img", {
+		src: thumbnailSource,
+		alt: "",
+		draggable: false,
+		loading: "lazy",
+		className: "size-full object-cover",
+		onLoad: () => markAssetLoaded(thumbnailLoadKey)
+	}) : item.poster ? /* @__PURE__ */ jsx("img", {
+		src: item.poster,
+		alt: "",
+		draggable: false,
+		loading: "lazy",
+		className: "size-full object-cover",
+		onLoad: () => markAssetLoaded(thumbnailLoadKey)
+	}) : /* @__PURE__ */ jsx(LightboxVideoThumbnail, {
+		crossOrigin: item.videoProps?.crossOrigin,
+		onLoad: () => markAssetLoaded(thumbnailLoadKey),
+		src: item.src
+	})) : null;
+	const mediaLoaded = item.thumbnail !== void 0 ? shouldLoad : thumbnailCached;
+	return /* @__PURE__ */ jsx(Button, {
+		ref: buttonRef,
+		"data-slot": "lightbox-thumbnail",
+		"data-index": index,
+		"data-active": active ? "true" : "false",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-current": active ? "true" : void 0,
+		"aria-label": `Show ${getItemLabel(item, index)}${thumbnailFailed ? " (thumbnail unavailable)" : ""}`,
+		tabIndex: active ? 0 : -1,
+		className: cn("size-12 shrink-0 overflow-hidden rounded-lg bg-transparent! p-0 text-muted-foreground text-xs font-medium opacity-65 hover:bg-transparent! hover:opacity-100 active:bg-transparent! focus-visible:bg-transparent! focus-visible:opacity-100 aria-expanded:bg-transparent! data-[active=true]:opacity-100 sm:size-14", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) changeIndex(index, "thumbnail-press", event.nativeEvent);
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			"data-slot": "lightbox-thumbnail-content",
+			className: "pointer-events-none relative flex size-full items-center justify-center",
+			onErrorCapture: () => setFailedLoadKey(thumbnailLoadKey),
+			onLoadCapture: () => setFailedLoadKey(null),
+			onLoadedDataCapture: () => setFailedLoadKey(null),
+			children: [thumbnailFailed ? /* @__PURE__ */ jsx(ImageOffIcon, { className: "size-5" }) : !mediaLoaded && /* @__PURE__ */ jsx(Skeleton, {
+				"aria-hidden": "true",
+				className: "absolute inset-0 size-full rounded-none"
+			}), thumbnail && /* @__PURE__ */ jsx("span", {
+				className: cn("relative size-full transition-opacity duration-200 [&>*]:size-full [&>img]:object-cover [&>video]:object-cover", !mediaLoaded && "opacity-0", thumbnailFailed && "hidden"),
+				children: thumbnail
+			})]
+		})
+	});
+}
+function LightboxThumbnails({ className, children, onKeyDown, ...props }) {
+	const { activeIndex, changeIndex, direction, items, loop } = useLightbox();
+	return /* @__PURE__ */ jsx(ScrollArea$1, {
+		"data-slot": "lightbox-thumbnails",
+		className: cn("pointer-events-auto max-w-[min(100%,42rem)] rounded-lg p-1.5", className),
+		orientation: "horizontal",
+		hideScrollbar: true,
+		scrollShadow: "horizontal",
+		fadeColor: "rgb(0 0 0 / 0.25)",
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaContent, {
+			className: "flex w-max items-center gap-1.5",
+			role: "toolbar",
+			"aria-label": "Choose media",
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+				event.preventDefault();
+				const rtl = direction === "rtl" ? -1 : 1;
+				const physical = event.key === "ArrowRight" ? 1 : -1;
+				const next = normalizeIndex(activeIndex + physical * rtl, items.length, loop);
+				const thumbnails = event.currentTarget;
+				changeIndex(next, "keyboard", event.nativeEvent);
+				requestAnimationFrame(() => {
+					thumbnails.querySelector(`[data-slot="lightbox-thumbnail"][data-index="${next}"]`)?.focus();
+				});
+			},
+			children: children ?? items.map((item, index) => /* @__PURE__ */ jsx(LightboxThumbnail, { index }, item.id ?? index))
+		})
+	});
+}
+function LightboxPrevious({ className, disabled: disabledProp, onClick, style, ...props }) {
+	const { activeIndex, changeIndex, direction, items, loop } = useLightbox();
+	if (disabledProp === true || items.length < 2 || !loop && activeIndex === 0) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "lightbox-previous",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": "Previous item",
+		className: cn("absolute start-2 z-20 size-12 -translate-y-1/2 rounded-lg bg-transparent text-white hover:bg-white/15 hover:text-white focus-visible:bg-white/15 sm:start-4 [&_svg:not([class*='size-'])]:size-4.5", className),
+		style: {
+			top: "calc(50% + (var(--lightbox-header-inset, 5rem) - 9rem) / 2)",
+			...style
+		},
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) changeIndex(activeIndex - 1, "previous-press", event.nativeEvent);
+		},
+		...props,
+		children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" })
+	});
+}
+function LightboxNext({ className, disabled: disabledProp, onClick, style, ...props }) {
+	const { activeIndex, changeIndex, direction, items, loop } = useLightbox();
+	if (disabledProp === true || items.length < 2 || !loop && activeIndex === items.length - 1) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "lightbox-next",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": "Next item",
+		className: cn("absolute end-2 z-20 size-12 -translate-y-1/2 rounded-lg bg-transparent text-white hover:bg-white/15 hover:text-white focus-visible:bg-white/15 sm:end-4 [&_svg:not([class*='size-'])]:size-4.5", className),
+		style: {
+			top: "calc(50% + (var(--lightbox-header-inset, 5rem) - 9rem) / 2)",
+			...style
+		},
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) changeIndex(activeIndex + 1, "next-press", event.nativeEvent);
+		},
+		...props,
+		children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })
+	});
+}
+function LightboxZoomButton({ className, disabled, onClick, ...props }) {
+	const { activeItem, actions, transform } = useLightbox();
+	if (!(activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable)) || disabled) return null;
+	const zoomed = transform.scale > 1;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "lightbox-zoom-button",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": zoomed ? "Zoom out" : "Zoom in",
+		className: cn("text-white hover:bg-white/15 hover:text-white [&_svg:not([class*='size-'])]:size-4.5", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) {
+				if (zoomed) actions.resetZoom();
+				else actions.zoomIn();
+			}
+		},
+		...props,
+		children: zoomed ? /* @__PURE__ */ jsx(ZoomOutIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ZoomInIcon, { "aria-hidden": "true" })
+	});
+}
+function getDownload(item) {
+	if (!item) return void 0;
+	if (item.download === false) return void 0;
+	if (typeof item.download === "object") return {
+		src: item.download.src ?? item.src,
+		filename: item.download.filename
+	};
+	return {
+		src: item.src,
+		filename: void 0
+	};
+}
+function getDownloadFilename(response, configured) {
+	if (configured) return configured;
+	const disposition = response.headers.get("content-disposition");
+	const encodedFilename = disposition?.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
+	const plainFilename = disposition?.match(/filename="?([^";]+)"?/i)?.[1];
+	const candidate = encodedFilename ?? plainFilename;
+	if (candidate) try {
+		return decodeURIComponent(candidate).replace(/[\\/:*?"<>|]/g, "-");
+	} catch {
+		return candidate.replace(/[\\/:*?"<>|]/g, "-");
+	}
+	try {
+		const segment = new URL(response.url).pathname.split("/").filter(Boolean).at(-1);
+		return segment ? decodeURIComponent(segment) : "download";
+	} catch {
+		return "download";
+	}
+}
+async function downloadFile(source, filename, signal) {
+	const response = await fetch(source, { signal });
+	if (!response.ok) throw new Error(`Download failed with status ${response.status}`);
+	const blobUrl = URL.createObjectURL(await response.blob());
+	const anchor = document.createElement("a");
+	anchor.href = blobUrl;
+	anchor.download = getDownloadFilename(response, filename);
+	anchor.hidden = true;
+	document.body.append(anchor);
+	anchor.click();
+	anchor.remove();
+	window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1e3);
+}
+function LightboxDownload({ className, disabled, onClick, ...props }) {
+	const { activeItem } = useLightbox();
+	const download = getDownload(activeItem);
+	const abortControllerRef = React$1.useRef(null);
+	const resetTimerRef = React$1.useRef(0);
+	const [status, setStatus] = React$1.useState("idle");
+	React$1.useEffect(() => () => {
+		const controller = abortControllerRef.current;
+		abortControllerRef.current = null;
+		controller?.abort();
+		window.clearTimeout(resetTimerRef.current);
+	}, [download?.src]);
+	if (!download || disabled) return null;
+	const statusMessage = {
+		idle: "",
+		loading: "Preparing download",
+		success: "Download started",
+		error: "Download failed"
+	}[status];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		"data-slot": "lightbox-download",
+		type: "button",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": status === "loading" ? "Preparing current item download" : "Download current item",
+		"aria-busy": status === "loading" || void 0,
+		className: cn("text-white hover:bg-white/15 hover:text-white [&_svg:not([class*='size-'])]:size-4.5", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented || status === "loading") return;
+			abortControllerRef.current?.abort();
+			window.clearTimeout(resetTimerRef.current);
+			const controller = new AbortController();
+			abortControllerRef.current = controller;
+			setStatus("loading");
+			downloadFile(download.src, download.filename, controller.signal).then(() => setStatus("success")).catch((error) => {
+				if (error instanceof DOMException && error.name === "AbortError") return;
+				setStatus("error");
+			}).finally(() => {
+				if (abortControllerRef.current === controller) {
+					abortControllerRef.current = null;
+					resetTimerRef.current = window.setTimeout(() => setStatus("idle"), 2e3);
+				}
+			});
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(DownloadIcon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children: statusMessage
+	})] });
+}
+function LightboxMore({ className, ...props }) {
+	const { activeIndex, activeItem, actions, controls } = useLightbox();
+	const availableControls = controls.filter((control) => !control.disabled);
+	if (availableControls.length === 0 || props.disabled) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "lightbox-more",
+			variant: "ghost",
+			size: "icon-lg",
+			"aria-label": "More actions",
+			className: cn("text-white hover:bg-white/15 hover:text-white [&_svg:not([class*='size-'])]:size-4.5", className),
+			...props
+		}),
+		children: /* @__PURE__ */ jsx(EllipsisIcon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		align: "end",
+		sideOffset: 4,
+		className: "isolate z-80 outline-none",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: "max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+			children: availableControls.map((control) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: (event) => control.onClick({
+					item: activeItem,
+					index: activeIndex,
+					event,
+					actions
+				}),
+				children: [control.icon, /* @__PURE__ */ jsx("span", { children: control.label })]
+			}, control.id))
+		})
+	}) })] });
+}
+function LightboxClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "lightbox-close",
+		"aria-label": "Close lightbox",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-lg",
+			className: cn("text-white hover:bg-white/15 hover:text-white [&_svg:not([class*='size-'])]:size-4.5", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+	});
+}
+function ScrollArea$1({ className, cornerStyle, fadeColor, horizontalScrollbarStyle, viewportClassName, viewportTabIndex, hideScrollbar = false, orientation = "vertical", scrollbarClassName, scrollShadow = "none", verticalScrollbarStyle, children, ...props }) {
+	const fadeColorStyle = fadeColor === void 0 ? {} : { "--scroll-area-fade": fadeColor };
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		className: cn("relative isolate min-h-0 flex flex-col", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+				"data-fade-mode": fadeColor === void 0 ? "auto" : "custom",
+				"data-scroll-shadow": scrollShadow,
+				"data-slot": "scroll-area-viewport",
+				tabIndex: viewportTabIndex,
+				className: cn("size-full min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", orientation === "vertical" && "overflow-x-hidden! [overflow-x:hidden!important]", orientation === "horizontal" && "overflow-y-hidden! [overflow-y:hidden!important]", viewportClassName),
+				style: {
+					...orientation === "vertical" ? { overflowX: "hidden" } : {},
+					...orientation === "horizontal" ? { overflowY: "hidden" } : {}
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "scroll-area-vertical-shadow",
+						className: cn(scrollShadow === "vertical" || scrollShadow === "both" ? "block" : "hidden", [
+							"pointer-events-none absolute inset-0 z-10",
+							"before:absolute before:top-0 before:block before:w-full before:rounded-md before:rounded-b-none before:content-[''] after:absolute after:bottom-0 after:block after:w-full after:rounded-md after:rounded-t-none after:content-['']",
+							"before:pointer-events-none after:pointer-events-none",
+							"before:transition-[height] after:transition-[height] before:duration-100 after:duration-100 before:ease-out after:ease-out",
+							"before:[--scroll-area-overflow-y-start:inherit]",
+							"after:[--scroll-area-overflow-y-end:inherit]",
+							"[--scroll-area-fade:var(--background)] before:h-[min(var(--scroll-area-fade-size,40px),var(--scroll-area-overflow-y-start))] before:bg-[linear-gradient(to_bottom,var(--scroll-area-fade),transparent)] after:h-[min(var(--scroll-area-fade-size,40px),var(--scroll-area-overflow-y-end,40px))] after:bg-[linear-gradient(to_top,var(--scroll-area-fade),transparent)]"
+						]),
+						style: {
+							"--scroll-area-overflow-y-start": "inherit",
+							"--scroll-area-overflow-y-end": "inherit",
+							...fadeColorStyle
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "scroll-area-horizontal-shadow",
+						className: cn(scrollShadow === "horizontal" || scrollShadow === "both" ? "block" : "hidden", [
+							"pointer-events-none absolute inset-0 z-10",
+							"before:absolute before:top-0 before:block before:h-full before:rounded-md before:rounded-r-none before:content-[''] after:absolute after:top-0 after:block after:h-full after:rounded-md after:rounded-l-none after:content-['']",
+							"before:pointer-events-none after:pointer-events-none",
+							"before:transition-[width] after:transition-[width] before:duration-100 after:duration-100 before:ease-out after:ease-out",
+							"before:[--scroll-area-overflow-x-start:inherit]",
+							"after:[--scroll-area-overflow-x-end:inherit]",
+							"[--scroll-area-fade:var(--background)] before:left-0 before:w-[min(var(--scroll-area-fade-size,40px),var(--scroll-area-overflow-x-start))] before:bg-[linear-gradient(to_right,var(--scroll-area-fade),transparent)] after:right-0 after:w-[min(var(--scroll-area-fade-size,40px),var(--scroll-area-overflow-x-end,40px))] after:bg-[linear-gradient(to_left,var(--scroll-area-fade),transparent)]"
+						]),
+						style: {
+							"--scroll-area-overflow-x-start": "inherit",
+							"--scroll-area-overflow-x-end": "inherit",
+							...fadeColorStyle
+						}
+					}),
+					children
+				]
+			}),
+			!hideScrollbar && (orientation === "both" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "vertical",
+				className: scrollbarClassName,
+				style: verticalScrollbarStyle
+			}), /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "horizontal",
+				className: scrollbarClassName,
+				style: horizontalScrollbarStyle
+			})] }) : /* @__PURE__ */ jsx(ScrollBar, {
+				orientation,
+				className: scrollbarClassName,
+				style: orientation === "vertical" ? verticalScrollbarStyle : horizontalScrollbarStyle
+			})),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {
+				"data-slot": "scroll-area-corner",
+				style: cornerStyle
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"][data-scroll-shadow="vertical"],
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"][data-scroll-shadow="both"] {
+  --scroll-area-fade-y-start: min(var(--scroll-area-overflow-y-start, 0px), var(--scroll-area-fade-size, 40px));
+  --scroll-area-fade-y-end: min(var(--scroll-area-overflow-y-end, 0px), var(--scroll-area-fade-size, 40px));
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-area-fade-y-start),
+    black calc(100% - var(--scroll-area-fade-y-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--scroll-area-fade-y-start),
+    black calc(100% - var(--scroll-area-fade-y-end)),
+    transparent 100%
+  );
+}
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"][data-scroll-shadow="horizontal"],
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"][data-scroll-shadow="both"] {
+  --scroll-area-fade-x-start: min(var(--scroll-area-overflow-x-start, 0px), var(--scroll-area-fade-size, 40px));
+  --scroll-area-fade-x-end: min(var(--scroll-area-overflow-x-end, 0px), var(--scroll-area-fade-size, 40px));
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-area-fade-x-start),
+    black calc(100% - var(--scroll-area-fade-x-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black var(--scroll-area-fade-x-start),
+    black calc(100% - var(--scroll-area-fade-x-end)),
+    transparent 100%
+  );
+}
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"][data-scroll-shadow="both"] {
+  -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      black var(--scroll-area-fade-y-start),
+      black calc(100% - var(--scroll-area-fade-y-end)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      black var(--scroll-area-fade-x-start),
+      black calc(100% - var(--scroll-area-fade-x-end)),
+      transparent 100%
+    );
+  mask-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      black var(--scroll-area-fade-y-start),
+      black calc(100% - var(--scroll-area-fade-y-end)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      black var(--scroll-area-fade-x-start),
+      black calc(100% - var(--scroll-area-fade-x-end)),
+      transparent 100%
+    );
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"] [data-slot="scroll-area-vertical-shadow"],
+[data-slot="scroll-area-viewport"][data-fade-mode="auto"] [data-slot="scroll-area-horizontal-shadow"] {
+  display: none;
+}
+` })
+		]
+	});
+}
+function ScrollAreaContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		"data-slot": "scroll-area-content",
+		className: cn("w-full", className),
+		...props,
+		children
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		className: cn("relative z-20 m-1.5 flex rounded-full bg-muted opacity-0 transition-opacity delay-200 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-1.5 data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
+		"data-base-ui-swipe-ignore": true,
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+			className: "relative flex-1 rounded-full bg-muted-foreground/40",
+			"data-slot": "scroll-area-thumb"
+		})
+	});
+}
+export { Lightbox, LightboxBackdrop, LightboxCaptions, LightboxClose, LightboxContent, LightboxCounter, LightboxDownload, LightboxMore, LightboxNext, LightboxPrevious, LightboxSlide, LightboxSlides, LightboxThumbnail, LightboxThumbnails, LightboxToolbar, LightboxTrigger, LightboxViewport, LightboxZoom, LightboxZoomButton, useLightbox };