beez-ui 2.7.1 → 3.0.1

package/dist/components/carousel.js

@@ -1,298 +1,395 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /**
-* Carousel on Embla with Arc's carousel design (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): round
-* outlined controls on the surface that answer hover on fine pointers and press in, a grab cursor while the track can
-* be dragged, Home and End to reach the edges, and optional Arc indicators whose pill stretches and travels with the
-* slides frame by frame. Embla keeps dragging, snapping, looping and plugins.
+* Arc's Carousel (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one child per
+* slide, a centered slide row that is dragged, flicked or arrowed through, and a control row under it with an optional
+* rotation control, the indicator tab list and the arrows. Embla runs inside and is never exposed; the beez-ui
+* extensions (`loop`, `duration`, `watchFocus`, `onSettle`, deferred re-initialization, labels and visibility of the
+* controls) cover media viewers that used Embla's API directly.
 */
 import * as React from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import { animate, motion, useMotionValue, useTransform } from "motion/react";
-import { CAROUSEL_COPY, CAROUSEL_EDGE_KEYS, CAROUSEL_INDICATOR_LENGTH_PX, CAROUSEL_KEYS, CAROUSEL_OWN_KEYBOARD_SELECTOR, CAROUSEL_ROOT_SELECTOR } from "../constants/carousel.js";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { Pause, Play } from "lucide-react";
+import { CAROUSEL_COPY, CAROUSEL_DEFAULT_SLIDE_SIZE, CAROUSEL_ROTATION_ICON_ENTER_SCALE, CAROUSEL_ROTATION_ICON_SIZE_PX, CAROUSEL_SLIDE_SIZE_PROPERTY } from "../constants/carousel.js";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
 import { cn } from "../lib/utils.js";
 import { ControlButton } from "./control-button.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Carousel as CarouselRoot, CarouselContent, CarouselIndicators, CarouselItem, CarouselNext, CarouselPrevious, defaultCarouselSlideLabel } from "./primitives/carousel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CarouselContext = React.createContext(null);
-function useCarousel() {
-	const context = React.useContext(CarouselContext);
-	if (!context) {
-		throw new Error("useCarousel must be used within a <Carousel />");
-	}
-	return context;
+/**
+* Clamps a slide index to the slides that exist.
+* @param index - Requested index.
+* @param count - Number of slides.
+* @returns An index between 0 and the last slide.
+*/
+function clampSlideIndex(index, count) {
+	return Math.min(Math.max(0, count - 1), Math.max(0, index));
 }
-/** Arc's round control on the surface: outlined, a fill on hover-capable pointers and a dimmed disabled state. */
-const carouselControlClassName = "absolute touch-manipulation rounded-full border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted disabled:bg-surface disabled:text-text-muted disabled:opacity-50 [&_svg:not([class*='size-'])]:size-[18px]";
-function Carousel(t0) {
-	const $ = _c(50);
-	let children;
-	let className;
-	let opts;
-	let plugins;
-	let props;
-	let setApi;
-	let t1;
-	if ($[0] !== t0) {
-		({orientation: t1, opts, setApi, plugins, className, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = opts;
-		$[4] = plugins;
-		$[5] = props;
-		$[6] = setApi;
-		$[7] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		opts = $[3];
-		plugins = $[4];
-		props = $[5];
-		setApi = $[6];
-		t1 = $[7];
-	}
-	const orientation = t1 === undefined ? "horizontal" : t1;
-	const shouldReduceMotion = usePrefersReducedMotion();
-	const t2 = orientation === "horizontal" ? "x" : "y";
-	let t3;
-	if ($[8] !== opts || $[9] !== t2) {
-		t3 = {
-			...opts,
-			axis: t2
-		};
-		$[8] = opts;
-		$[9] = t2;
-		$[10] = t3;
-	} else {
-		t3 = $[10];
-	}
-	const [carouselRef, api] = useEmblaCarousel(t3, plugins);
-	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-	const [canScrollNext, setCanScrollNext] = React.useState(false);
-	let t4;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = (api_0) => {
-			if (!api_0) {
-				return;
+/** Rotation icon entering from a small, blurred state, as in Arc. */
+const rotationIconHidden = {
+	opacity: 0,
+	scale: CAROUSEL_ROTATION_ICON_ENTER_SCALE,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const rotationIconRest = {
+	opacity: 1,
+	scale: 1,
+	filter: "blur(0px)"
+};
+const rotationIconEnter = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+const rotationIconExit = {
+	...rotationIconHidden,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+/**
+* Keeps Embla in step with its slides without ever cutting a scroll short. Embla re-initializes when a slide is added,
+* removed or resized; a re-initialization recreates the engine and aborts a running scroll, so while a scroll or a
+* drag is in progress the request is parked and runs once the carousel comes to rest.
+* @returns Embla's `watchResize` and `watchSlides` callbacks, stable across renders, plus the handle to bind them.
+*/
+function useDeferredReInit() {
+	const $ = _c(5);
+	const apiRef = React.useRef(undefined);
+	const isPointerDownRef = React.useRef(false);
+	const isPendingRef = React.useRef(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const api = apiRef.current;
+			if (!api || api.slideNodes().length === 0) {
+				return false;
 			}
-			setCanScrollPrev(api_0.canScrollPrev());
-			setCanScrollNext(api_0.canScrollNext());
-		};
-		$[11] = t4;
-	} else {
-		t4 = $[11];
-	}
-	const onSelect = t4;
-	let t5;
-	if ($[12] !== api || $[13] !== shouldReduceMotion) {
-		t5 = () => {
-			api?.scrollPrev(shouldReduceMotion);
-		};
-		$[12] = api;
-		$[13] = shouldReduceMotion;
-		$[14] = t5;
-	} else {
-		t5 = $[14];
-	}
-	const scrollPrev = t5;
-	let t6;
-	if ($[15] !== api || $[16] !== shouldReduceMotion) {
-		t6 = () => {
-			api?.scrollNext(shouldReduceMotion);
+			return isPointerDownRef.current || !api.internalEngine().scrollBody.settled();
 		};
-		$[15] = api;
-		$[16] = shouldReduceMotion;
-		$[17] = t6;
+		$[0] = t0;
 	} else {
-		t6 = $[17];
+		t0 = $[0];
 	}
-	const scrollNext = t6;
-	let t7;
-	if ($[18] !== api || $[19] !== orientation || $[20] !== scrollNext || $[21] !== scrollPrev || $[22] !== shouldReduceMotion) {
-		t7 = (event) => {
-			if (event.altKey || event.ctrlKey || event.metaKey) {
-				return;
-			}
-			const keyboardOwner = event.target instanceof Element ? event.target.closest(CAROUSEL_OWN_KEYBOARD_SELECTOR) : null;
-			if (keyboardOwner && event.currentTarget.contains(keyboardOwner)) {
-				return;
-			}
-			const closestCarousel = event.target instanceof Element ? event.target.closest(CAROUSEL_ROOT_SELECTOR) : null;
-			if (closestCarousel && closestCarousel !== event.currentTarget) {
-				return;
-			}
-			const keys = CAROUSEL_KEYS[orientation];
-			if (event.key === keys.previous) {
-				event.preventDefault();
-				scrollPrev();
-			} else {
-				if (event.key === keys.next) {
-					event.preventDefault();
-					scrollNext();
-				} else {
-					if (api && event.key === CAROUSEL_EDGE_KEYS.first) {
-						event.preventDefault();
-						api.scrollTo(0, shouldReduceMotion);
-					} else {
-						if (api && event.key === CAROUSEL_EDGE_KEYS.last) {
-							event.preventDefault();
-							api.scrollTo(api.scrollSnapList().length - 1, shouldReduceMotion);
-						}
-					}
-				}
+	const isBusy = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			if (!isBusy()) {
+				return true;
 			}
+			isPendingRef.current = true;
+			return false;
 		};
-		$[18] = api;
-		$[19] = orientation;
-		$[20] = scrollNext;
-		$[21] = scrollPrev;
-		$[22] = shouldReduceMotion;
-		$[23] = t7;
+		$[1] = t1;
 	} else {
-		t7 = $[23];
+		t1 = $[1];
 	}
-	const handleKeyDown = t7;
-	let t8;
-	let t9;
-	if ($[24] !== api || $[25] !== setApi) {
-		t8 = () => {
-			if (!api || !setApi) {
+	const deferWhileBusy = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			const api_0 = apiRef.current;
+			if (!api_0 || !isPendingRef.current || isBusy()) {
 				return;
 			}
-			setApi(api);
+			isPendingRef.current = false;
+			api_0.reInit();
 		};
-		t9 = [api, setApi];
-		$[24] = api;
-		$[25] = setApi;
-		$[26] = t8;
-		$[27] = t9;
+		$[2] = t2;
 	} else {
-		t8 = $[26];
-		t9 = $[27];
+		t2 = $[2];
 	}
-	React.useEffect(t8, t9);
-	let t10;
-	let t11;
-	if ($[28] !== api) {
-		t10 = () => {
-			if (!api) {
+	const flush = t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (api_1) => {
+			apiRef.current = api_1;
+			if (!api_1) {
 				return;
 			}
-			let isMounted = true;
-			queueMicrotask(() => {
-				if (isMounted) {
-					onSelect(api);
-				}
-			});
-			api.on("reInit", onSelect);
-			api.on("select", onSelect);
+			const handlePointerDown = () => {
+				isPointerDownRef.current = true;
+			};
+			const handlePointerUp = () => {
+				isPointerDownRef.current = false;
+				flush();
+			};
+			const handleSettle = () => queueMicrotask(flush);
+			api_1.on("pointerDown", handlePointerDown);
+			api_1.on("pointerUp", handlePointerUp);
+			api_1.on("settle", handleSettle);
 			return () => {
-				isMounted = false;
-				api?.off("reInit", onSelect);
-				api?.off("select", onSelect);
+				api_1.off("pointerDown", handlePointerDown);
+				api_1.off("pointerUp", handlePointerUp);
+				api_1.off("settle", handleSettle);
+				isPointerDownRef.current = false;
+				isPendingRef.current = false;
 			};
 		};
-		t11 = [api, onSelect];
-		$[28] = api;
-		$[29] = t10;
-		$[30] = t11;
+		$[3] = t3;
 	} else {
-		t10 = $[29];
-		t11 = $[30];
+		t3 = $[3];
 	}
-	React.useEffect(t10, t11);
-	const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
-	let t13;
-	if ($[31] !== api || $[32] !== canScrollNext || $[33] !== canScrollPrev || $[34] !== carouselRef || $[35] !== opts || $[36] !== scrollNext || $[37] !== scrollPrev || $[38] !== t12) {
-		t13 = {
-			carouselRef,
-			api,
-			opts,
-			orientation: t12,
-			scrollPrev,
-			scrollNext,
-			canScrollPrev,
-			canScrollNext
+	const bind = t3;
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			watch: deferWhileBusy,
+			bind
 		};
-		$[31] = api;
-		$[32] = canScrollNext;
-		$[33] = canScrollPrev;
-		$[34] = carouselRef;
-		$[35] = opts;
-		$[36] = scrollNext;
-		$[37] = scrollPrev;
-		$[38] = t12;
-		$[39] = t13;
-	} else {
-		t13 = $[39];
-	}
-	let t14;
-	if ($[40] !== className) {
-		t14 = cn("relative", className);
-		$[40] = className;
-		$[41] = t14;
-	} else {
-		t14 = $[41];
-	}
-	let t15;
-	if ($[42] !== children || $[43] !== handleKeyDown || $[44] !== props || $[45] !== t14) {
-		t15 = /* @__PURE__ */ _jsx("div", {
-			onKeyDownCapture: handleKeyDown,
-			className: t14,
-			role: "region",
-			"aria-roledescription": "carousel",
-			"data-slot": "carousel",
-			...props,
-			children
-		});
-		$[42] = children;
-		$[43] = handleKeyDown;
-		$[44] = props;
-		$[45] = t14;
-		$[46] = t15;
-	} else {
-		t15 = $[46];
-	}
-	let t16;
-	if ($[47] !== t13 || $[48] !== t15) {
-		t16 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
-			value: t13,
-			children: t15
-		});
-		$[47] = t13;
-		$[48] = t15;
-		$[49] = t16;
+		$[4] = t4;
 	} else {
-		t16 = $[49];
+		t4 = $[4];
 	}
-	return t16;
+	return t4;
 }
 /**
-* The clipped viewport and the slide track. While the track can be dragged it shows Arc's grab cursor on fine
-* pointers, and a grabbing cursor while a drag is held.
+* A centered row of slides browsed by drag, flick, the arrow keys, Home and End, the arrows or the indicator tabs, with
+* optional rotation. Neighbouring slides stay in view as a hint that there is more, and are inert until selected.
+* @param props - Arc's carousel props plus the beez-ui extensions.
+* @returns The carousel section.
 */
-function CarouselContent(t0) {
-	const $ = _c(19);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	const { carouselRef, api, opts, orientation, canScrollPrev, canScrollNext } = useCarousel();
+function Carousel({ label, children, index: controlledIndex, defaultIndex = 0, onIndexChange, slideSize = CAROUSEL_DEFAULT_SLIDE_SIZE, slideLabel = defaultCarouselSlideLabel, interval, autoplay = false, className, loop = false, duration, watchFocus = true, onSettle, previousLabel = CAROUSEL_COPY.previous, nextLabel = CAROUSEL_COPY.next, showControls = true, showIndicators = true, slideClassName, viewportClassName, trackClassName }) {
+	const slides = React.Children.toArray(children);
+	const count = slides.length;
+	const baseId = React.useId();
+	const getSlideId = React.useCallback((slideIndex) => `${baseId}-slide-${slideIndex}`, [baseId]);
+	const reduceMotion = usePrefersReducedMotion();
+	const isHydrated = useIsHydrated();
+	const [startIndex] = React.useState(() => clampSlideIndex(controlledIndex ?? defaultIndex, count));
+	const [selectedIndex, setSelectedIndex] = React.useState(startIndex);
+	const [api, setApi] = React.useState();
+	const [announcement, setAnnouncement] = React.useState("");
+	const [engineSlideCount, setEngineSlideCount] = React.useState(0);
+	const { watch, bind } = useDeferredReInit();
+	const callbacksRef = React.useRef({
+		onIndexChange,
+		onSettle,
+		slideLabel
+	});
+	React.useLayoutEffect(() => {
+		callbacksRef.current = {
+			onIndexChange,
+			onSettle,
+			slideLabel
+		};
+	});
+	const reportedIndexRef = React.useRef(startIndex);
+	const settledIndexRef = React.useRef(startIndex);
+	const isRotatingRef = React.useRef(false);
+	const pendingDefaultIndexRef = React.useRef(controlledIndex === undefined && defaultIndex > startIndex ? defaultIndex : undefined);
+	const options = {
+		align: "center",
+		containScroll: false,
+		loop,
+		watchFocus,
+		watchResize: watch,
+		watchSlides: watch,
+		...duration === undefined ? {} : { duration }
+	};
+	React.useEffect(() => bind(api), [api, bind]);
+	React.useLayoutEffect(() => {
+		if (!api) return;
+		api.scrollTo(reportedIndexRef.current, true);
+	}, [api]);
+	React.useEffect(() => {
+		if (!api) return;
+		const handleSettle = () => {
+			const settledIndex = api.selectedScrollSnap();
+			if (settledIndex === settledIndexRef.current) return;
+			settledIndexRef.current = settledIndex;
+			callbacksRef.current.onSettle?.(settledIndex);
+		};
+		const handleSelect = () => {
+			const nextIndex = api.selectedScrollSnap();
+			setSelectedIndex(nextIndex);
+			if (nextIndex !== reportedIndexRef.current) {
+				pendingDefaultIndexRef.current = undefined;
+				reportedIndexRef.current = nextIndex;
+				const { onIndexChange: reportIndex, slideLabel: nameSlide } = callbacksRef.current;
+				reportIndex?.(nextIndex);
+				if (!isRotatingRef.current) setAnnouncement(nameSlide(nextIndex, api.slideNodes().length));
+			}
+			isRotatingRef.current = false;
+			if (api.internalEngine().scrollBody.settled() && !api.internalEngine().dragHandler.pointerDown()) handleSettle();
+		};
+		const handleReInit = () => {
+			setEngineSlideCount(api.slideNodes().length);
+			handleSelect();
+			handleSettle();
+		};
+		api.on("select", handleSelect);
+		api.on("settle", handleSettle);
+		api.on("reInit", handleReInit);
+		return () => {
+			api.off("select", handleSelect);
+			api.off("settle", handleSettle);
+			api.off("reInit", handleReInit);
+		};
+	}, [api]);
+	React.useEffect(() => {
+		if (!api || controlledIndex === undefined) return;
+		const nextIndex = clampSlideIndex(controlledIndex, api.slideNodes().length);
+		if (nextIndex === api.selectedScrollSnap()) return;
+		reportedIndexRef.current = nextIndex;
+		api.scrollTo(nextIndex, reduceMotion);
+	}, [
+		api,
+		controlledIndex,
+		engineSlideCount,
+		reduceMotion,
+		selectedIndex
+	]);
+	React.useEffect(() => {
+		const pendingIndex = pendingDefaultIndexRef.current;
+		if (!api || pendingIndex === undefined || api.slideNodes().length <= pendingIndex) return;
+		pendingDefaultIndexRef.current = undefined;
+		reportedIndexRef.current = pendingIndex;
+		settledIndexRef.current = pendingIndex;
+		api.scrollTo(pendingIndex, true);
+	}, [api, engineSlideCount]);
+	const rotation = useRotation({
+		api,
+		count,
+		interval,
+		autoplay,
+		reduceMotion,
+		isHydrated,
+		selectedIndex,
+		loop,
+		isRotatingRef
+	});
+	const visibleIndex = clampSlideIndex(selectedIndex, count);
+	const hasControlRow = count > 1 && (showControls || showIndicators || rotation.hasControl);
+	const hasIndicators = count > 1 && showIndicators;
+	const rootStyle = { [CAROUSEL_SLIDE_SIZE_PROPERTY]: slideSize };
+	return /* @__PURE__ */ _jsxs(CarouselRoot, {
+		opts: options,
+		setApi,
+		"aria-label": label,
+		className: cn("@container/carousel grid w-full min-w-0 grid-cols-[minmax(0,1fr)] gap-4", className),
+		style: rootStyle,
+		onPointerEnter: (event) => {
+			if (event.pointerType === "mouse") rotation.setIsHovered(true);
+		},
+		onPointerLeave: () => rotation.setIsHovered(false),
+		onFocus: (event) => rotation.handleFocus(event.target),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) rotation.handleFocus(null);
+		},
+		ref: rotation.rootRef,
+		children: [
+			/* @__PURE__ */ _jsx(CarouselContent, {
+				viewportClassName,
+				className: cn("select-none [&_img]:[-webkit-user-drag:none]", trackClassName),
+				children: slides.map((slide, slideIndex) => /* @__PURE__ */ _jsx(CarouselItem, {
+					id: getSlideId(slideIndex),
+					role: hasIndicators ? "tabpanel" : "group",
+					"aria-label": slideLabel(slideIndex, count),
+					inert: slideIndex !== visibleIndex || undefined,
+					className: cn("basis-(--carousel-slide)", slideClassName),
+					children: slide
+				}, React.isValidElement(slide) && slide.key != null ? slide.key : slideIndex))
+			}),
+			hasControlRow ? /* @__PURE__ */ _jsxs("div", {
+				"data-slot": "carousel-controls",
+				className: "flex min-w-0 items-center gap-2 px-[calc((100cqw_-_var(--carousel-slide))/2)] @max-[340px]/carousel:gap-1 @max-[340px]/carousel:px-[max(0px,calc((100cqw_-_var(--carousel-slide))/2_-_var(--spacing)*2))]",
+				children: [
+					rotation.hasControl ? /* @__PURE__ */ _jsx(ControlButton, {
+						ref: rotation.playRef,
+						"data-slot": "carousel-rotation",
+						variant: "outline",
+						size: "icon",
+						className: "size-(--control-height-sm) rounded-full border-border bg-surface text-foreground hover-fine:bg-surface-muted",
+						"aria-label": rotation.isPlaying ? CAROUSEL_COPY.pauseRotation : CAROUSEL_COPY.startRotation,
+						disabled: !rotation.canRotate,
+						onClick: rotation.toggle,
+						children: /* @__PURE__ */ _jsx("span", {
+							className: "grid size-4 place-items-center",
+							children: /* @__PURE__ */ _jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ _jsx(motion.span, {
+									className: "col-start-1 row-start-1 grid place-items-center",
+									initial: reduceMotion ? { opacity: 0 } : rotationIconHidden,
+									animate: rotationIconRest,
+									exit: reduceMotion ? {
+										opacity: 0,
+										transition: { duration: 0 }
+									} : rotationIconExit,
+									transition: reduceMotion ? { duration: 0 } : rotationIconEnter,
+									children: rotation.isPlaying ? /* @__PURE__ */ _jsx(Pause, {
+										size: CAROUSEL_ROTATION_ICON_SIZE_PX,
+										strokeWidth: 1.75,
+										fill: "currentColor",
+										"aria-hidden": "true"
+									}) : /* @__PURE__ */ _jsx(Play, {
+										size: CAROUSEL_ROTATION_ICON_SIZE_PX,
+										strokeWidth: 1.75,
+										fill: "currentColor",
+										"aria-hidden": "true"
+									})
+								}, rotation.isPlaying ? "pause" : "play")
+							})
+						})
+					}) : null,
+					showIndicators ? /* @__PURE__ */ _jsx(CarouselIndicators, {
+						slideLabel,
+						getSlideId,
+						drain: rotation.drain,
+						initialCount: count,
+						initialIndex: startIndex
+					}) : null,
+					showControls ? /* @__PURE__ */ _jsxs("div", {
+						className: "ms-auto flex flex-none gap-2 @max-[340px]/carousel:gap-1",
+						children: [/* @__PURE__ */ _jsx(CarouselPrevious, { "aria-label": previousLabel }), /* @__PURE__ */ _jsx(CarouselNext, { "aria-label": nextLabel })]
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announcement
+			})
+		]
+	});
+}
+/**
+* Arc's slide rotation: each slide stays for `interval` while its pill drains, then the carousel moves on, wrapping to
+* the first slide at the end. Rotation pauses on hover, keyboard focus, drag, offscreen and in hidden tabs; pausing it
+* with the control refills the pill. Reduced motion, once hydrated, makes rotation unavailable and disables the control,
+* which stays in place so the control row keeps its layout after hydration.
+* @param settings - Carousel state the rotation reads.
+* @returns Rotation state and the handlers the carousel binds.
+*/
+function useRotation(t0) {
+	const $ = _c(37);
+	const { api, count, interval, autoplay, reduceMotion, isHydrated, selectedIndex, loop, isRotatingRef } = t0;
+	const [isPlaying, setIsPlaying] = React.useState(autoplay);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const [isFocusPaused, setIsFocusPaused] = React.useState(false);
 	const [isDragging, setIsDragging] = React.useState(false);
-	const isDraggable = opts?.watchDrag !== false && (canScrollPrev || canScrollNext);
+	const [isInView, setIsInView] = React.useState(true);
+	const [isPageVisible, setIsPageVisible] = React.useState(true);
+	const drain = useMotionValue(0);
+	const rootRef = React.useRef(null);
+	const playRef = React.useRef(null);
+	const hasControl = Boolean(interval) && count > 1;
+	const canRotate = hasControl && !(isHydrated && reduceMotion);
+	const isRunning = canRotate && isPlaying && !isHovered && !isFocusPaused && !isDragging && isInView && isPageVisible;
 	let t1;
 	let t2;
-	if ($[3] !== api) {
+	if ($[0] !== api) {
 		t1 = () => {
 			if (!api) {
 				return;
@@ -307,560 +404,182 @@ function CarouselContent(t0) {
 			};
 		};
 		t2 = [api];
-		$[3] = api;
-		$[4] = t1;
-		$[5] = t2;
+		$[0] = api;
+		$[1] = t1;
+		$[2] = t2;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t1 = $[1];
+		t2 = $[2];
 	}
 	React.useEffect(t1, t2);
-	const t3 = isDraggable && "pointer-fine:cursor-grab pointer-fine:data-dragging:cursor-grabbing";
-	let t4;
-	if ($[6] !== t3) {
-		t4 = cn("overflow-hidden", t3);
-		$[6] = t3;
-		$[7] = t4;
-	} else {
-		t4 = $[7];
-	}
-	const t5 = isDraggable && isDragging || undefined;
-	const t6 = orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col";
-	let t7;
-	if ($[8] !== className || $[9] !== t6) {
-		t7 = cn("flex", t6, className);
-		$[8] = className;
-		$[9] = t6;
-		$[10] = t7;
-	} else {
-		t7 = $[10];
-	}
-	let t8;
-	if ($[11] !== props || $[12] !== t7) {
-		t8 = /* @__PURE__ */ _jsx("div", {
-			className: t7,
-			...props
-		});
-		$[11] = props;
-		$[12] = t7;
-		$[13] = t8;
-	} else {
-		t8 = $[13];
-	}
-	let t9;
-	if ($[14] !== carouselRef || $[15] !== t4 || $[16] !== t5 || $[17] !== t8) {
-		t9 = /* @__PURE__ */ _jsx("div", {
-			ref: carouselRef,
-			className: t4,
-			"data-slot": "carousel-content",
-			"data-dragging": t5,
-			children: t8
-		});
-		$[14] = carouselRef;
-		$[15] = t4;
-		$[16] = t5;
-		$[17] = t8;
-		$[18] = t9;
-	} else {
-		t9 = $[18];
-	}
-	return t9;
-}
-function CarouselItem(t0) {
-	const $ = _c(9);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	const { orientation } = useCarousel();
-	const t1 = orientation === "horizontal" ? "pl-4" : "pt-4";
-	let t2;
-	if ($[3] !== className || $[4] !== t1) {
-		t2 = cn("min-w-0 shrink-0 grow-0 basis-full", t1, className);
-		$[3] = className;
-		$[4] = t1;
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
 	let t3;
-	if ($[6] !== props || $[7] !== t2) {
-		t3 = /* @__PURE__ */ _jsx("div", {
-			role: "group",
-			"aria-roledescription": "slide",
-			"data-slot": "carousel-item",
-			className: t2,
-			...props
-		});
-		$[6] = props;
-		$[7] = t2;
-		$[8] = t3;
-	} else {
-		t3 = $[8];
-	}
-	return t3;
-}
-function CarouselPrevious(t0) {
-	const $ = _c(17);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, variant: t1, size: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
+	if ($[3] !== drain) {
+		t3 = () => {
+			drain.jump(0);
+		};
+		$[3] = drain;
+		$[4] = t3;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		t3 = $[4];
 	}
-	const variant = t1 === undefined ? "outline" : t1;
-	const size = t2 === undefined ? "icon-lg" : t2;
-	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-	const t3 = orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90";
 	let t4;
-	if ($[5] !== className || $[6] !== t3) {
-		t4 = cn(carouselControlClassName, t3, className);
-		$[5] = className;
-		$[6] = t3;
+	if ($[5] !== drain || $[6] !== selectedIndex) {
+		t4 = [drain, selectedIndex];
+		$[5] = drain;
+		$[6] = selectedIndex;
 		$[7] = t4;
 	} else {
 		t4 = $[7];
 	}
-	const t5 = !canScrollPrev;
-	let t6;
-	let t7;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ _jsx(ChevronLeftIcon, { strokeWidth: 1.75 });
-		t7 = /* @__PURE__ */ _jsx("span", {
-			className: "sr-only",
-			children: "Previous slide"
-		});
-		$[8] = t6;
-		$[9] = t7;
-	} else {
-		t6 = $[8];
-		t7 = $[9];
-	}
-	let t8;
-	if ($[10] !== props || $[11] !== scrollPrev || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
-		t8 = /* @__PURE__ */ _jsxs(ControlButton, {
-			"data-slot": "carousel-previous",
-			variant,
-			size,
-			className: t4,
-			disabled: t5,
-			onClick: scrollPrev,
-			...props,
-			children: [t6, t7]
-		});
-		$[10] = props;
-		$[11] = scrollPrev;
-		$[12] = size;
-		$[13] = t4;
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[8] !== api || $[9] !== drain || $[10] !== interval || $[11] !== isRotatingRef || $[12] !== isRunning || $[13] !== loop) {
+		t5 = () => {
+			if (!isRunning || !interval || !api) {
+				return;
+			}
+			const controls = animate(drain, 1, {
+				duration: (1 - drain.get()) * interval / 1e3,
+				ease: "linear",
+				onComplete: () => {
+					isRotatingRef.current = true;
+					if (loop || api.canScrollNext()) {
+						api.scrollNext();
+					} else {
+						api.scrollTo(0);
+					}
+				}
+			});
+			return () => controls.stop();
+		};
+		$[8] = api;
+		$[9] = drain;
+		$[10] = interval;
+		$[11] = isRotatingRef;
+		$[12] = isRunning;
+		$[13] = loop;
 		$[14] = t5;
-		$[15] = variant;
-		$[16] = t8;
 	} else {
-		t8 = $[16];
-	}
-	return t8;
-}
-function CarouselNext(t0) {
-	const $ = _c(17);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, variant: t1, size: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-	}
-	const variant = t1 === undefined ? "outline" : t1;
-	const size = t2 === undefined ? "icon-lg" : t2;
-	const { orientation, scrollNext, canScrollNext } = useCarousel();
-	const t3 = orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90";
-	let t4;
-	if ($[5] !== className || $[6] !== t3) {
-		t4 = cn(carouselControlClassName, t3, className);
-		$[5] = className;
-		$[6] = t3;
-		$[7] = t4;
-	} else {
-		t4 = $[7];
+		t5 = $[14];
 	}
-	const t5 = !canScrollNext;
 	let t6;
-	let t7;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ _jsx(ChevronRightIcon, { strokeWidth: 1.75 });
-		t7 = /* @__PURE__ */ _jsx("span", {
-			className: "sr-only",
-			children: "Next slide"
-		});
-		$[8] = t6;
-		$[9] = t7;
+	if ($[15] !== api || $[16] !== drain || $[17] !== interval || $[18] !== isRotatingRef || $[19] !== isRunning || $[20] !== loop || $[21] !== selectedIndex) {
+		t6 = [
+			api,
+			drain,
+			interval,
+			isRotatingRef,
+			isRunning,
+			loop,
+			selectedIndex
+		];
+		$[15] = api;
+		$[16] = drain;
+		$[17] = interval;
+		$[18] = isRotatingRef;
+		$[19] = isRunning;
+		$[20] = loop;
+		$[21] = selectedIndex;
+		$[22] = t6;
 	} else {
-		t6 = $[8];
-		t7 = $[9];
+		t6 = $[22];
 	}
+	React.useEffect(t5, t6);
+	let t7;
 	let t8;
-	if ($[10] !== props || $[11] !== scrollNext || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
-		t8 = /* @__PURE__ */ _jsxs(ControlButton, {
-			"data-slot": "carousel-next",
-			variant,
-			size,
-			className: t4,
-			disabled: t5,
-			onClick: scrollNext,
-			...props,
-			children: [t6, t7]
-		});
-		$[10] = props;
-		$[11] = scrollNext;
-		$[12] = size;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = variant;
-		$[16] = t8;
-	} else {
-		t8 = $[16];
-	}
-	return t8;
-}
-/**
-* Default accessible name of one indicator, for example "Diapositiva 2 de 5".
-* @param index - Zero-based slide position.
-* @param count - Number of slides.
-* @returns The Spanish slide label.
-*/
-function defaultCarouselSlideLabel(index, count) {
-	return `${CAROUSEL_COPY.slideLabelPrefix} ${index + 1} ${CAROUSEL_COPY.slideLabelSeparator} ${count}`;
-}
-/**
-* Continuous slide position, in slides, of a scroll progress between Embla's snap points. Snaps are progress values,
-* so trimmed edges and slides of different sizes still map to whole slides at rest.
-* @param progress - Embla's scroll progress, from 0 to 1.
-* @param snaps - Embla's snap points, as scroll progress values.
-* @returns The fractional index of the slide in view.
-*/
-function toSlidePosition(progress, snaps) {
-	const lastIndex = snaps.length - 1;
-	if (lastIndex < 1) return 0;
-	const first = snaps[0] ?? 0;
-	const last = snaps[lastIndex] ?? 1;
-	if (progress <= first) return 0;
-	if (progress >= last) return lastIndex;
-	for (let index = 0; index < lastIndex; index += 1) {
-		const start = snaps[index] ?? 0;
-		const end = snaps[index + 1] ?? 1;
-		if (progress <= end) return end > start ? index + (progress - start) / (end - start) : index;
-	}
-	return lastIndex;
-}
-/**
-* Arc's page indicator for a carousel: one dot per snap point, where the current one stretches into a pill that
-* follows the track frame by frame while it is dragged or scrolled. The dots are buttons in a named group and the
-* current one carries `aria-current`; activating a dot scrolls to its slide, and when a dot has focus the carousel's
-* arrow, Home and End keys move the focus to the dot of the new slide. It renders
-* once Embla has measured the slides. Place it inside `Carousel`.
-* @param props - Optional accessible copy plus native attributes of the list.
-* @returns The indicator list, or nothing until there is more than one snap point.
-*/
-function CarouselIndicators(t0) {
-	const $ = _c(28);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, label: t1, slideLabel: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-	}
-	const label = t1 === undefined ? CAROUSEL_COPY.indicatorsLabel : t1;
-	const slideLabel = t2 === undefined ? defaultCarouselSlideLabel : t2;
-	const { api, orientation } = useCarousel();
-	const reduceMotion = usePrefersReducedMotion();
-	const [snapCount, setSnapCount] = React.useState(0);
-	const [selectedIndex, setSelectedIndex] = React.useState(0);
-	const [isLooping, setIsLooping] = React.useState(false);
-	const position = useMotionValue(0);
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = [];
-		$[5] = t3;
-	} else {
-		t3 = $[5];
-	}
-	const indicatorRefs = React.useRef(t3);
-	let t4;
-	let t5;
-	if ($[6] !== api || $[7] !== position || $[8] !== reduceMotion) {
-		t4 = () => {
-			if (!api) {
+	if ($[23] !== interval) {
+		t7 = () => {
+			const root = rootRef.current;
+			if (!interval || !root) {
 				return;
 			}
-			let positionAnimation = null;
-			const isLoop = () => api.internalEngine().options.loop;
-			const trackScroll = () => {
-				if (isLoop()) {
-					return;
-				}
-				positionAnimation?.stop();
-				position.set(toSlidePosition(api.scrollProgress(), api.scrollSnapList()));
-			};
-			const syncSelection = () => {
-				const nextIndex = api.selectedScrollSnap();
-				const count = api.scrollSnapList().length;
-				setSnapCount(count);
-				setSelectedIndex(nextIndex);
-				setIsLooping(isLoop());
-				if (isLoop()) {
-					positionAnimation?.stop();
-					const turns = Math.round((position.get() - nextIndex) / count);
-					const destination = nextIndex + turns * count;
-					positionAnimation = reduceMotion ? null : animate(position, destination, {
-						...ARC_SPRING_SMOOTH,
-						onComplete: () => position.jump(nextIndex)
-					});
-					if (reduceMotion) {
-						position.set(nextIndex);
-					}
-				}
-				if (indicatorRefs.current.some(_temp)) {
-					indicatorRefs.current[nextIndex]?.focus({ preventScroll: true });
+			const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((t9) => {
+				const [entry] = t9;
+				if (entry) {
+					setIsInView(entry.isIntersecting);
 				}
-			};
-			const syncAll = () => {
-				syncSelection();
-				if (isLoop()) {
-					positionAnimation?.stop();
-					position.set(api.selectedScrollSnap());
-				} else {
-					trackScroll();
-				}
-			};
-			syncAll();
-			api.on("reInit", syncAll);
-			api.on("select", syncSelection);
-			api.on("scroll", trackScroll);
+			});
+			observer?.observe(root);
+			const handleVisibilityChange = () => setIsPageVisible(document.visibilityState !== "hidden");
+			handleVisibilityChange();
+			document.addEventListener("visibilitychange", handleVisibilityChange);
 			return () => {
-				positionAnimation?.stop();
-				api.off("reInit", syncAll);
-				api.off("select", syncSelection);
-				api.off("scroll", trackScroll);
+				observer?.disconnect();
+				document.removeEventListener("visibilitychange", handleVisibilityChange);
 			};
 		};
-		t5 = [
-			api,
-			position,
-			reduceMotion
-		];
-		$[6] = api;
-		$[7] = position;
-		$[8] = reduceMotion;
-		$[9] = t4;
-		$[10] = t5;
+		t8 = [interval];
+		$[23] = interval;
+		$[24] = t7;
+		$[25] = t8;
 	} else {
-		t4 = $[9];
-		t5 = $[10];
-	}
-	React.useEffect(t4, t5);
-	if (snapCount < 2) {
-		return null;
-	}
-	const t6 = orientation === "vertical" && "flex-col";
-	let t7;
-	if ($[11] !== className || $[12] !== t6) {
-		t7 = cn("flex min-w-0 items-center justify-center", t6, className);
-		$[11] = className;
-		$[12] = t6;
-		$[13] = t7;
-	} else {
-		t7 = $[13];
-	}
-	let t8;
-	if ($[14] !== api || $[15] !== isLooping || $[16] !== orientation || $[17] !== position || $[18] !== reduceMotion || $[19] !== selectedIndex || $[20] !== slideLabel || $[21] !== snapCount) {
-		t8 = Array.from({ length: snapCount }, (_, index) => /* @__PURE__ */ _jsx(CarouselIndicator, {
-			index,
-			lastIndex: snapCount - 1,
-			isLooping,
-			position,
-			isSelected: index === selectedIndex,
-			orientation: orientation ?? "horizontal",
-			label: slideLabel(index, snapCount),
-			indicatorRef: (node) => {
-				indicatorRefs.current[index] = node;
-			},
-			onSelect: () => api?.scrollTo(index, reduceMotion)
-		}, index));
-		$[14] = api;
-		$[15] = isLooping;
-		$[16] = orientation;
-		$[17] = position;
-		$[18] = reduceMotion;
-		$[19] = selectedIndex;
-		$[20] = slideLabel;
-		$[21] = snapCount;
-		$[22] = t8;
-	} else {
-		t8 = $[22];
+		t7 = $[24];
+		t8 = $[25];
 	}
+	React.useEffect(t7, t8);
 	let t9;
-	if ($[23] !== label || $[24] !== props || $[25] !== t7 || $[26] !== t8) {
-		t9 = /* @__PURE__ */ _jsx("div", {
-			role: "group",
-			"aria-label": label,
-			"data-slot": "carousel-indicators",
-			className: t7,
-			...props,
-			children: t8
-		});
-		$[23] = label;
-		$[24] = props;
-		$[25] = t7;
-		$[26] = t8;
-		$[27] = t9;
-	} else {
-		t9 = $[27];
-	}
-	return t9;
-}
-function _temp(indicator) {
-	return indicator !== null && indicator === document.activeElement;
-}
-/** One dot that grows toward the pill as the track nears its slide, so the pill hands over continuously. */
-function CarouselIndicator(t0) {
-	const $ = _c(24);
-	const { index, lastIndex, isLooping, position, isSelected, orientation, label, indicatorRef, onSelect } = t0;
-	let t1;
-	if ($[0] !== index || $[1] !== isLooping || $[2] !== lastIndex) {
-		t1 = (value) => {
-			if (!isLooping) {
-				return Math.max(0, 1 - Math.abs(Math.min(lastIndex, Math.max(0, value)) - index));
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (target) => {
+			if (!(target instanceof Element) || target === playRef.current) {
+				setIsFocusPaused(false);
+				return;
 			}
-			const count = lastIndex + 1;
-			const distance = Math.abs(value - index) % count;
-			return Math.max(0, 1 - Math.min(distance, count - distance));
+			setIsFocusPaused(target.matches(":focus-visible"));
 		};
-		$[0] = index;
-		$[1] = isLooping;
-		$[2] = lastIndex;
-		$[3] = t1;
+		$[26] = t9;
 	} else {
-		t1 = $[3];
+		t9 = $[26];
 	}
-	const emphasis = useTransform(position, t1);
-	const length = useTransform(emphasis, _temp2);
-	const t2 = isSelected || undefined;
-	const t3 = orientation === "horizontal" ? "h-(--control-height-sm) px-[5px]" : "w-(--control-height-sm) py-[5px]";
-	let t4;
-	if ($[4] !== t3) {
-		t4 = cn("group/indicator grid shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-3 focus-visible:ring-ring/50", t3);
-		$[4] = t3;
-		$[5] = t4;
-	} else {
-		t4 = $[5];
-	}
-	const t5 = orientation === "horizontal" ? "h-1.5" : "w-1.5";
-	let t6;
-	if ($[6] !== t5) {
-		t6 = cn("relative block overflow-hidden rounded-full bg-border-strong transition-colors duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none group-hover/indicator:bg-text-muted", t5);
-		$[6] = t5;
-		$[7] = t6;
-	} else {
-		t6 = $[7];
-	}
-	let t7;
-	if ($[8] !== length || $[9] !== orientation) {
-		t7 = orientation === "horizontal" ? { width: length } : { height: length };
-		$[8] = length;
-		$[9] = orientation;
-		$[10] = t7;
-	} else {
-		t7 = $[10];
-	}
-	let t8;
-	if ($[11] !== emphasis) {
-		t8 = /* @__PURE__ */ _jsx(motion.span, {
-			className: "absolute inset-0 bg-foreground",
-			style: { opacity: emphasis }
-		});
-		$[11] = emphasis;
-		$[12] = t8;
-	} else {
-		t8 = $[12];
-	}
-	let t9;
-	if ($[13] !== t6 || $[14] !== t7 || $[15] !== t8) {
-		t9 = /* @__PURE__ */ _jsx(motion.span, {
-			"aria-hidden": "true",
-			className: t6,
-			style: t7,
-			children: t8
-		});
-		$[13] = t6;
-		$[14] = t7;
-		$[15] = t8;
-		$[16] = t9;
+	const handleFocus = t9;
+	let t10;
+	if ($[27] !== drain || $[28] !== isPlaying || $[29] !== reduceMotion) {
+		t10 = () => {
+			if (!isPlaying) {
+				setIsPlaying(true);
+				return;
+			}
+			setIsPlaying(false);
+			if (reduceMotion) {
+				drain.jump(0);
+			} else {
+				animate(drain, 0, {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.standard]
+				});
+			}
+		};
+		$[27] = drain;
+		$[28] = isPlaying;
+		$[29] = reduceMotion;
+		$[30] = t10;
 	} else {
-		t9 = $[16];
+		t10 = $[30];
 	}
-	let t10;
-	if ($[17] !== indicatorRef || $[18] !== label || $[19] !== onSelect || $[20] !== t2 || $[21] !== t4 || $[22] !== t9) {
-		t10 = /* @__PURE__ */ _jsx("button", {
-			ref: indicatorRef,
-			type: "button",
-			"aria-current": t2,
-			"aria-label": label,
-			"data-slot": "carousel-indicator",
-			className: t4,
-			onClick: onSelect,
-			children: t9
-		});
-		$[17] = indicatorRef;
-		$[18] = label;
-		$[19] = onSelect;
-		$[20] = t2;
-		$[21] = t4;
-		$[22] = t9;
-		$[23] = t10;
+	const toggle = t10;
+	const t11 = canRotate && isPlaying;
+	const t12 = canRotate ? drain : undefined;
+	let t13;
+	if ($[31] !== canRotate || $[32] !== hasControl || $[33] !== t11 || $[34] !== t12 || $[35] !== toggle) {
+		t13 = {
+			hasControl,
+			canRotate,
+			isPlaying: t11,
+			drain: t12,
+			rootRef,
+			playRef,
+			setIsHovered,
+			handleFocus,
+			toggle
+		};
+		$[31] = canRotate;
+		$[32] = hasControl;
+		$[33] = t11;
+		$[34] = t12;
+		$[35] = toggle;
+		$[36] = t13;
 	} else {
-		t10 = $[23];
+		t13 = $[36];
 	}
-	return t10;
-}
-function _temp2(value_0) {
-	return CAROUSEL_INDICATOR_LENGTH_PX.dot + (CAROUSEL_INDICATOR_LENGTH_PX.pill - CAROUSEL_INDICATOR_LENGTH_PX.dot) * value_0;
+	return t13;
 }
-export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselIndicators, useCarousel };
+export { Carousel };