@mortenbrudvik/waveui 0.14.1 → 0.15.0

package/dist/components/layout/Carousel.mjs

@@ -16,17 +16,19 @@ import { usePrefersReducedMotion as ce } from "../../hooks/usePrefersReducedMoti
 import { useDirection as le } from "../../hooks/useDirection.mjs";
 import { focusRing as ue, forcedColors as de } from "../../lib/styles.mjs";
 import { ChevronLeftIcon as fe, ChevronRightIcon as pe } from "../../lib/icons.mjs";
-import { CarouselContext as me } from "./Carousel.context.mjs";
-import { CAROUSEL_CONTROL_BASE as l, CAROUSEL_CONTROL_LAYOUT as he } from "./Carousel.styles.mjs";
-import { CarouselButton as ge } from "./Carousel.button.mjs";
-import { useCarouselDrag as _e } from "./Carousel.drag.mjs";
-import { clampToPage as ve, lastPageStart as ye, pageCount as be } from "./Carousel.groups.mjs";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import "../../lib/motion.mjs";
+import { useMotionPreference as me } from "../../hooks/useMotion.mjs";
+import { CarouselContext as he } from "./Carousel.context.mjs";
+import { CAROUSEL_CONTROL_BASE as ge, CAROUSEL_CONTROL_LAYOUT as _e } from "./Carousel.styles.mjs";
+import { CarouselButton as ve } from "./Carousel.button.mjs";
+import { useCarouselDrag as ye } from "./Carousel.drag.mjs";
+import { clampToPage as be, lastPageStart as xe, pageCount as Se } from "./Carousel.groups.mjs";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/layout/Carousel.tsx
-var xe = "Pause slide rotation", Se = "Start slide rotation", Ce = "Previous slide", we = "Next slide", Te = "Choose slide", Ee = (e, t) => `Slide ${e + 1} of ${t}`, De = "carousel", Oe = "slide", ke = (e, t, n) => `Slides ${e} to ${t} of ${n}`;
-function Ae(e, t, n) {
-	let r = u.useCallback((r) => {
+var Ce = "Pause slide rotation", we = "Start slide rotation", Te = "Previous slide", Ee = "Next slide", De = "Choose slide", Oe = (e, t) => `Slide ${e + 1} of ${t}`, ke = "carousel", Ae = "slide", je = 300, Me = (e, t, n) => `Slides ${e} to ${t} of ${n}`;
+function Ne(e, t, n) {
+	let r = l.useCallback((r) => {
 		if (!e || !t || typeof ResizeObserver > "u") return () => {};
 		let i = new ResizeObserver(r);
 		return i.observe(t), n && i.observe(n), () => i.disconnect();
@@ -34,7 +36,7 @@ function Ae(e, t, n) {
 		e,
 		t,
 		n
-	]), [i, a, o] = u.useSyncExternalStore(r, () => {
+	]), [i, a, o] = l.useSyncExternalStore(r, () => {
 		if (!e || !t || !n) return "1:0:0";
 		let r = n.offsetWidth, i = t.clientWidth;
 		return `${r > 0 ? Math.max(1, Math.floor(i / r)) : 1}:${r}:${i}`;
@@ -45,277 +47,289 @@ function Ae(e, t, n) {
 		rootWidth: o
 	};
 }
-function je(e) {
+function Pe(e, t) {
+	return e === void 0 ? t === "none" ? "none" : "slide" : e === null ? "none" : e === "fade" ? "fade" : "slide";
+}
+function Fe(e) {
 	return e instanceof Element && e.closest("[data-carousel-rotation]") !== null;
 }
-function Me(e) {
+function Ie(e) {
 	return typeof e == "string" ? { src: e } : e;
 }
-var Ne = () => /* @__PURE__ */ f("svg", {
+var Le = () => /* @__PURE__ */ d("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: [/* @__PURE__ */ d("rect", {
+	children: [/* @__PURE__ */ u("rect", {
 		x: "4",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
-	}), /* @__PURE__ */ d("rect", {
+	}), /* @__PURE__ */ u("rect", {
 		x: "9",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
 	})]
-}), Pe = () => /* @__PURE__ */ d("svg", {
+}), Re = () => /* @__PURE__ */ u("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ d("path", { d: "M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" })
-}), p = ({ value: p, defaultValue: Fe = 0, onValueChange: Ie, autoPlay: Le = !1, autoPlayInterval: Re = 5e3, autoPlayLabels: ze, labels: h, loop: g = !1, groupSize: Be = 1, align: Ve = "start", draggable: He = !1, controlsLayout: _ = "overlay", appearance: v = "flat", className: Ue, children: We, onMouseEnter: Ge, onMouseLeave: Ke, onFocus: qe, onBlur: Je, ref: Ye, ...y }) => {
-	let [Xe, Ze] = te(p, Fe, Ie), b = ne("carousel-slides"), [Qe, $e] = u.useState(null), et = ae(Ye, $e), tt = le(Qe), x = y.dir === "rtl" || y.dir === "ltr" ? y.dir : tt, nt = ce(), [rt, it] = u.useState(null), [S, at] = u.useState(null), [ot, st] = u.useState(null), C = Be === "auto", w = Ae(C, ot, rt), T = C ? w.perPage : Math.max(1, Math.floor(Be) || 1), [ct, lt] = u.useState(null), [ut, E] = u.useState(null), [dt, ft] = u.useState(!1), [pt, mt] = u.useState(!1), [ht, gt] = u.useState(!1), [_t, D] = u.useState(!1), O = [], k = {}, A = !1;
-	for (let e of t(We)) if (n(e.node, m)) O.push({
+	children: /* @__PURE__ */ u("path", { d: "M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" })
+}), f = ({ value: f, defaultValue: ze = 0, onValueChange: Be, autoPlay: Ve = !1, autoPlayInterval: He = 5e3, autoPlayLabels: Ue, labels: m, loop: h = !1, groupSize: We = 1, align: Ge = "start", draggable: Ke = !1, controlsLayout: g = "overlay", appearance: _ = "flat", motion: qe, motionDuration: Je = je, className: Ye, children: Xe, onMouseEnter: Ze, onMouseLeave: Qe, onFocus: $e, onBlur: et, ref: tt, ...v }) => {
+	let [nt, rt] = te(f, ze, Be), y = ne("carousel-slides"), [it, at] = l.useState(null), ot = ae(tt, at), st = le(it), b = v.dir === "rtl" || v.dir === "ltr" ? v.dir : st, ct = ce(), [lt, ut] = l.useState(null), [x, dt] = l.useState(null), [ft, pt] = l.useState(null), S = We === "auto", C = Ne(S, ft, lt), w = S ? C.perPage : Math.max(1, Math.floor(We) || 1), mt = Pe(qe, me()), T = mt === "fade" && (S || w > 1), E = T ? "slide" : mt;
+	l.useEffect(() => {
+		T && r("Carousel:fade-group", "Carousel: `motion=\"fade\"` needs one slide per page; with `groupSize` above 1 or `\"auto\"` the slides slide.");
+	}, [T]);
+	let [ht, gt] = l.useState(null), [_t, D] = l.useState(null), [vt, yt] = l.useState(!1), [bt, xt] = l.useState(!1), [St, Ct] = l.useState(!1), [wt, O] = l.useState(!1), k = [], A = {}, j = !1;
+	for (let e of t(Xe)) if (n(e.node, p)) k.push({
 		...e,
 		thumbnail: e.node.props.thumbnail
 	});
-	else if (n(e.node, ge)) {
+	else if (n(e.node, ve)) {
 		let t = e.node.props.direction === "next" ? "next" : "previous";
-		k[t] ? A = !0 : k[t] = u.cloneElement(e.node, { key: e.key });
-	} else a(e.node) && (A = !0);
-	let vt = O.some((e) => e.thumbnail !== void 0), j = O.length;
-	u.useEffect(() => {
-		A && r("Carousel:non-item-children", "Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in Fragments; other children are not rendered. A component that renders `Carousel.Item` itself is not recognised: render the `Carousel.Item` in the Carousel and put the component inside it.");
-	}, [A]);
-	let M = ve(Xe, T, j), N = be(j, T), P = ye(j, T), F = M <= 0, I = M >= P, L = N <= 1 || !g && F, R = N <= 1 || !g && I, yt = ut === j && !g, z = (ct ?? nt) || yt, B = Le && N > 1;
-	B && !g && I && !z ? E(j) : ut !== null && !yt && E(null);
-	let V = _e({
-		enabled: He && N > 1,
-		dir: x,
+		A[t] ? j = !0 : A[t] = l.cloneElement(e.node, { key: e.key });
+	} else a(e.node) && (j = !0);
+	let Tt = k.some((e) => e.thumbnail !== void 0), M = k.length;
+	l.useEffect(() => {
+		j && r("Carousel:non-item-children", "Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in Fragments; other children are not rendered. A component that renders `Carousel.Item` itself is not recognised: render the `Carousel.Item` in the Carousel and put the component inside it.");
+	}, [j]);
+	let N = be(nt, w, M), P = Se(M, w), F = xe(M, w), I = N <= 0, L = N >= F, R = P <= 1 || !h && I, z = P <= 1 || !h && L, Et = _t === M && !h, B = (ht ?? ct) || Et, V = Ve && P > 1;
+	V && !h && L && !B ? D(M) : _t !== null && !Et && D(null);
+	let H = ye({
+		enabled: Ke && P > 1,
+		dir: b,
 		onCommit: (e) => {
-			e === 1 ? I ? g && U(0) : U(M + T) : e === -1 && (F ? g && U(P) : U(M - T));
+			e === 1 ? L ? h && W(0) : W(N + w) : e === -1 && (I ? h && W(F) : W(N - w));
 		}
-	}), bt = dt && !pt || V.dragging, H = B && !z && !bt && !(ht && !_t), U = (e) => {
-		e >= 0 && e < j && e !== M && Ze(e);
-	}, W = () => U(F ? P : M - T), G = () => U(I ? 0 : M + T), xt = c(() => {
-		Ze((e) => {
-			let t = ve(e, T, j);
-			return t < P ? t + T : g ? 0 : e;
+	}), Dt = vt && !bt || H.dragging, U = V && !B && !Dt && !(St && !wt), W = (e) => {
+		e >= 0 && e < M && e !== N && rt(e);
+	}, G = () => W(I ? F : N - w), K = () => W(L ? 0 : N + w), Ot = c(() => {
+		rt((e) => {
+			let t = be(e, w, M);
+			return t < F ? t + w : h ? 0 : e;
 		});
 	});
-	u.useEffect(() => {
-		if (!H) return;
-		let e = setInterval(xt, Re);
+	l.useEffect(() => {
+		if (!U) return;
+		let e = setInterval(Ot, He);
 		return () => clearInterval(e);
 	}, [
-		H,
-		Re,
-		xt
+		U,
+		He,
+		Ot
 	]);
-	let St = () => {
-		z ? (!g && I && U(0), E(null), lt(!1), D(!0)) : (lt(!0), D(!1));
-	}, Ct = {
-		onMouseEnter: o(Ge, () => ft(!0)),
-		onMouseLeave: o(Ke, () => ft(!1)),
-		onFocus: o(qe, (e) => {
+	let kt = () => {
+		B ? (!h && L && W(0), D(null), gt(!1), O(!0)) : (gt(!0), O(!1));
+	}, At = {
+		onMouseEnter: o(Ze, () => yt(!0)),
+		onMouseLeave: o(Qe, () => yt(!1)),
+		onFocus: o($e, (e) => {
 			let t = e.relatedTarget, n = !(t instanceof Node && e.currentTarget.contains(t));
-			gt(!0), (n || !je(e.target)) && D(!1);
+			Ct(!0), (n || !Fe(e.target)) && O(!1);
 		}),
-		onBlur: o(Je, (e) => {
+		onBlur: o(et, (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && e.currentTarget.contains(t) || (gt(!1), D(!1));
+			t instanceof Node && e.currentTarget.contains(t) || (Ct(!1), O(!1));
 		})
-	}, K = T > 1, q = Math.min(M + T, j), wt = u.useMemo(() => K ? Array.from({ length: q - M }, (e, t) => String(M + t)) : [], [
-		K,
-		M,
-		q
-	]), J = ie({
-		items: wt,
-		activeValue: String(M),
+	}, q = w > 1, J = Math.min(N + w, M), jt = l.useMemo(() => q ? Array.from({ length: J - N }, (e, t) => String(N + t)) : [], [
+		q,
+		N,
+		J
+	]), Y = ie({
+		items: jt,
+		activeValue: String(N),
 		orientation: "horizontal",
 		loop: !1,
-		dir: x,
+		dir: b,
 		tabStop: "last-focused"
-	}), Tt = ae(J.containerProps.ref, at), Y = u.useRef(null);
-	u.useLayoutEffect(() => {
-		let e = Y.current;
-		if (!e || !S) return;
-		Y.current = null;
-		let t = e === "first" ? M : q - 1;
-		S.querySelector(`[data-roving-value="${t}"]`)?.focus();
+	}), Mt = ae(Y.containerProps.ref, dt), X = l.useRef(null);
+	l.useLayoutEffect(() => {
+		let e = X.current;
+		if (!e || !x) return;
+		X.current = null;
+		let t = e === "first" ? N : J - 1;
+		x.querySelector(`[data-roving-value="${t}"]`)?.focus();
 	}, [
-		M,
-		q,
-		S
+		N,
+		J,
+		x
 	]);
-	let Et = (e) => {
+	let Nt = (e) => {
 		let t = e.target.getAttribute("data-roving-value"), n = re(e.key, {
 			orientation: "horizontal",
-			dir: x
+			dir: b
 		});
 		if (t !== null && n && !e.defaultPrevented && !e.altKey && !e.ctrlKey && !e.metaKey) {
 			let r = Number(t);
-			if (n === "next" && r === q - 1) {
-				e.preventDefault(), R || (Y.current = "first", G());
+			if (n === "next" && r === J - 1) {
+				e.preventDefault(), z || (X.current = "first", K());
 				return;
 			}
-			if (n === "prev" && r === M) {
-				e.preventDefault(), L || (Y.current = "last", W());
+			if (n === "prev" && r === N) {
+				e.preventDefault(), R || (X.current = "last", G());
 				return;
 			}
 		}
-		J.containerProps.onKeyDown(e);
-	}, X = h?.previous ?? Ce, Z = h?.next ?? we, Dt = c(() => W()), Ot = c(() => G()), kt = u.useMemo(() => ({
-		trackId: b,
-		previousLabel: X,
-		nextLabel: Z,
-		previousDisabled: L,
-		nextDisabled: R,
-		goPrevious: Dt,
-		goNext: Ot,
-		controlsLayout: _,
-		dir: x
+		Y.containerProps.onKeyDown(e);
+	}, Z = m?.previous ?? Te, Pt = m?.next ?? Ee, Ft = c(() => G()), It = c(() => K()), Lt = l.useMemo(() => ({
+		trackId: y,
+		previousLabel: Z,
+		nextLabel: Pt,
+		previousDisabled: R,
+		nextDisabled: z,
+		goPrevious: Ft,
+		goNext: It,
+		controlsLayout: g,
+		dir: b
 	}), [
-		b,
-		X,
+		y,
 		Z,
-		L,
+		Pt,
 		R,
-		Dt,
-		Ot,
-		_,
-		x
+		z,
+		Ft,
+		It,
+		g,
+		b
 	]);
-	if (j === 0) return /* @__PURE__ */ d("div", {
-		ref: et,
-		"data-controls-layout": _,
-		"data-appearance": v,
-		className: e(s.root, "relative", Ue),
-		...Ct,
-		...y
+	if (M === 0) return /* @__PURE__ */ u("div", {
+		ref: ot,
+		"data-controls-layout": g,
+		"data-appearance": _,
+		"data-motion": E,
+		className: e(s.root, "relative", Ye),
+		...At,
+		...v
 	});
-	let Q = x === "rtl" ? 1 : -1, At = `translateX(${M / T * Q * 100}%)`;
-	if (V.offsetPx !== 0 && (At = `translateX(calc(${M / T * Q * 100}% + ${V.offsetPx}px))`), C) {
-		let e = Math.max(0, w.rootWidth - T * w.slideWidth), t = Ve === "center" ? e / 2 : Ve === "end" ? e : 0;
-		At = `translateX(${Q * M * w.slideWidth + (x === "rtl" ? -t : t) + V.offsetPx + 0}px)`;
+	let Rt = b === "rtl" ? 1 : -1, zt = `translateX(${N / w * Rt * 100}%)`;
+	if (H.offsetPx !== 0 && (zt = `translateX(calc(${N / w * Rt * 100}% + ${H.offsetPx}px))`), S) {
+		let e = Math.max(0, C.rootWidth - w * C.slideWidth), t = Ge === "center" ? e / 2 : Ge === "end" ? e : 0;
+		zt = `translateX(${Rt * N * C.slideWidth + (b === "rtl" ? -t : t) + H.offsetPx + 0}px)`;
 	}
-	let jt = h?.slides ?? ke, Mt = (e) => {
-		let t = Math.min(e + T, j);
-		return t - e === 1 ? Lt(e, j) : jt(e + 1, t, j);
-	}, Nt = x === "rtl" ? "-scale-x-100" : void 0, Pt = ze?.pause ?? xe, Ft = ze?.play ?? Se, It = h?.picker ?? Te, Lt = h?.slide ?? Ee, Rt = h?.carouselRoleDescription ?? De, zt = h?.slideRoleDescription ?? Oe, $ = _ === "inline" || _ === "inline-wide", Bt = he[_], Vt = k.previous ?? /* @__PURE__ */ d("button", {
-		type: "button",
-		"aria-label": X,
-		"aria-controls": b,
-		...oe(L),
-		onClick: se(L, W),
-		className: e(s.previousButton, l, Bt.previous),
-		children: /* @__PURE__ */ d(fe, {
-			size: 16,
-			className: Nt
-		})
-	}, "previous"), Ht = k.next ?? /* @__PURE__ */ d("button", {
+	let Q = E === "fade", Bt = E === "slide" && !H.dragging, Vt = Je === je ? void 0 : { transitionDuration: `${Je}ms` }, Ht = Q ? "col-start-1 row-start-1" : S ? "w-auto shrink-0" : w === 1 ? "w-full shrink-0" : "shrink-0", Ut = !S && w > 1 ? { width: `calc(100% / ${w})` } : void 0, Wt = m?.slides ?? Me, Gt = (e) => {
+		let t = Math.min(e + w, M);
+		return t - e === 1 ? Xt(e, M) : Wt(e + 1, t, M);
+	}, Kt = b === "rtl" ? "-scale-x-100" : void 0, qt = Ue?.pause ?? Ce, Jt = Ue?.play ?? we, Yt = m?.picker ?? De, Xt = m?.slide ?? Oe, Zt = m?.carouselRoleDescription ?? ke, Qt = m?.slideRoleDescription ?? Ae, $ = g === "inline" || g === "inline-wide", $t = _e[g], en = A.previous ?? /* @__PURE__ */ u("button", {
 		type: "button",
 		"aria-label": Z,
-		"aria-controls": b,
+		"aria-controls": y,
 		...oe(R),
 		onClick: se(R, G),
-		className: e(s.nextButton, l, Bt.next),
-		children: /* @__PURE__ */ d(pe, {
+		className: e(s.previousButton, ge, $t.previous),
+		children: /* @__PURE__ */ u(fe, {
+			size: 16,
+			className: Kt
+		})
+	}, "previous"), tn = A.next ?? /* @__PURE__ */ u("button", {
+		type: "button",
+		"aria-label": Pt,
+		"aria-controls": y,
+		...oe(z),
+		onClick: se(z, K),
+		className: e(s.nextButton, ge, $t.next),
+		children: /* @__PURE__ */ u(pe, {
 			size: 16,
-			className: Nt
+			className: Kt
 		})
-	}, "next"), Ut = /* @__PURE__ */ f("div", {
-		ref: st,
+	}, "next"), nn = /* @__PURE__ */ d("div", {
+		ref: pt,
 		className: e(s.viewport, "relative min-w-0 flex-1 overflow-hidden"),
 		children: [
-			/* @__PURE__ */ d("div", {
-				id: b,
-				className: e(s.track, V.dragging ? "flex" : "flex transition-transform duration-300 ease-in-out motion-reduce:transition-none", He && "touch-pan-y"),
-				style: { transform: At },
-				"data-dragging": V.dragging ? "" : void 0,
-				...V.handlers,
-				...K ? J.containerProps : null,
-				ref: K ? Tt : at,
-				onKeyDown: K ? Et : void 0,
-				children: O.map(({ key: t, node: n }, r) => {
-					let i = r >= M && r < M + T;
-					return /* @__PURE__ */ d("div", {
-						ref: r === 0 ? it : void 0,
+			/* @__PURE__ */ u("div", {
+				id: y,
+				className: e(s.track, Q ? "grid grid-cols-[minmax(0,1fr)]" : "flex", Bt && "transition-transform duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none", Ke && "touch-pan-y"),
+				style: Q ? void 0 : {
+					transform: zt,
+					...Bt ? Vt : void 0
+				},
+				"data-dragging": H.dragging ? "" : void 0,
+				...H.handlers,
+				...q ? Y.containerProps : null,
+				ref: q ? Mt : dt,
+				onKeyDown: q ? Nt : void 0,
+				children: k.map(({ key: t, node: n }, r) => {
+					let i = r >= N && r < N + w;
+					return /* @__PURE__ */ u("div", {
+						ref: r === 0 ? ut : void 0,
 						role: "group",
-						"aria-roledescription": zt,
-						"aria-label": Lt(r, j),
+						"aria-roledescription": Qt,
+						"aria-label": Xt(r, M),
 						"aria-hidden": !i || void 0,
 						inert: !i,
-						"data-roving-value": K && i ? String(r) : void 0,
-						tabIndex: K && i ? J.getTabIndex(String(r)) : void 0,
-						className: e(s.slide, C ? "w-auto shrink-0" : T === 1 ? "w-full shrink-0" : "shrink-0", K && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
-						style: !C && T > 1 ? { width: `calc(100% / ${T})` } : void 0,
+						"data-roving-value": q && i ? String(r) : void 0,
+						tabIndex: q && i ? Y.getTabIndex(String(r)) : void 0,
+						className: e(s.slide, Ht, Q && "transition-opacity duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none", Q && !i && "opacity-0", q && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
+						style: Q ? Vt : Ut,
 						children: n
 					}, t);
 				})
 			}),
-			!$ && Vt,
-			!$ && Ht
+			!$ && en,
+			!$ && tn
 		]
 	});
-	return /* @__PURE__ */ d(me.Provider, {
-		value: kt,
-		children: /* @__PURE__ */ f("div", {
-			ref: et,
+	return /* @__PURE__ */ u(he.Provider, {
+		value: Lt,
+		children: /* @__PURE__ */ d("div", {
+			ref: ot,
 			role: "region",
-			"aria-roledescription": Rt,
+			"aria-roledescription": Zt,
 			"aria-label": "Carousel",
-			"data-controls-layout": _,
-			"data-appearance": v,
-			className: e(s.root, "relative isolate overflow-hidden", v === "elevated" && "rounded-md shadow-4", Ue),
-			...Ct,
-			...y,
+			"data-controls-layout": g,
+			"data-appearance": _,
+			"data-motion": E,
+			className: e(s.root, "relative isolate overflow-hidden", _ === "elevated" && "rounded-md shadow-4", Ye),
+			...At,
+			...v,
 			children: [
-				B && /* @__PURE__ */ d("button", {
+				V && /* @__PURE__ */ u("button", {
 					type: "button",
 					"data-carousel-rotation": "",
-					"aria-label": z ? Ft : Pt,
-					"aria-controls": b,
-					onClick: St,
-					onMouseEnter: () => mt(!0),
-					onMouseLeave: () => mt(!1),
-					className: e(s.autoPlayButton, l, "absolute z-20 h-8 w-8 rounded-full border border-border bg-background shadow-2 top-2", $ ? "start-12" : "start-2"),
-					children: d(z ? Pe : Ne, {})
+					"aria-label": B ? Jt : qt,
+					"aria-controls": y,
+					onClick: kt,
+					onMouseEnter: () => xt(!0),
+					onMouseLeave: () => xt(!1),
+					className: e(s.autoPlayButton, ge, "absolute z-20 h-8 w-8 rounded-full border border-border bg-background shadow-2 top-2", $ ? "start-12" : "start-2"),
+					children: u(B ? Re : Le, {})
 				}),
-				$ ? /* @__PURE__ */ f("div", {
+				$ ? /* @__PURE__ */ d("div", {
 					className: "flex items-stretch",
 					children: [
-						Vt,
-						Ut,
-						Ht
+						en,
+						nn,
+						tn
 					]
-				}) : Ut,
-				/* @__PURE__ */ d("div", {
-					"aria-live": H ? "off" : "polite",
+				}) : nn,
+				/* @__PURE__ */ u("div", {
+					"aria-live": U ? "off" : "polite",
 					"aria-atomic": "true",
 					className: "sr-only",
-					children: Mt(M)
+					children: Gt(N)
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ u("div", {
 					role: "group",
-					"aria-label": It,
-					className: e(s.picker, vt ? "relative mx-auto flex w-fit flex-wrap justify-center gap-2 p-2" : "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit"),
-					children: O.filter((e, t) => t % T === 0).map(({ key: t, thumbnail: n }, r) => {
-						let a = r * T, o = a === M;
-						return /* @__PURE__ */ d("button", {
+					"aria-label": Yt,
+					className: e(s.picker, Tt ? "relative mx-auto flex w-fit flex-wrap justify-center gap-2 p-2" : "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit"),
+					children: k.filter((e, t) => t % w === 0).map(({ key: t, thumbnail: n }, r) => {
+						let a = r * w, o = a === N;
+						return /* @__PURE__ */ u("button", {
 							type: "button",
-							"aria-label": Mt(a),
+							"aria-label": Gt(a),
 							"aria-current": o ? "true" : void 0,
-							onClick: () => U(a),
+							onClick: () => W(a),
 							className: e(s.pickerButton, "group inline-flex items-center justify-center", n === void 0 ? "h-6 min-w-6" : "rounded-md p-0.5", ue),
-							children: n === void 0 ? /* @__PURE__ */ d("span", {
+							children: n === void 0 ? /* @__PURE__ */ u("span", {
 								"aria-hidden": "true",
 								className: e(s.pickerIndicator, "block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none", o ? e("w-5 bg-primary", de.selectedLeaf) : "w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
-							}) : i(Me(n), "img", e(ee.thumbnail, "block h-12 w-16 rounded object-cover", o ? e("outline-2 outline-primary", de.selectedContainer) : "opacity-70 group-hover:opacity-100"), {
+							}) : i(Ie(n), "img", e(ee.thumbnail, "block h-12 w-16 rounded object-cover", o ? e("outline-2 outline-primary", de.selectedContainer) : "opacity-70 group-hover:opacity-100"), {
 								alt: "",
 								draggable: !1
 							})
@@ -326,19 +340,19 @@ var Ne = () => /* @__PURE__ */ f("svg", {
 		})
 	});
 };
-p.displayName = "Carousel";
-var m = ({ thumbnail: t, className: n, children: r, ref: i, ...a }) => /* @__PURE__ */ d("div", {
+f.displayName = "Carousel";
+var p = ({ thumbnail: t, className: n, children: r, ref: i, ...a }) => /* @__PURE__ */ u("div", {
 	ref: i,
 	className: e(ee.root, "p-4", n),
 	...a,
 	children: r
 });
-m.displayName = "CarouselItem";
-var Fe = /* @__PURE__ */ Object.assign(p, {
-	Item: m,
-	Button: ge
+p.displayName = "CarouselItem";
+var ze = /* @__PURE__ */ Object.assign(f, {
+	Item: p,
+	Button: ve
 });
 //#endregion
-export { Fe as Carousel, m as CarouselItem };
+export { ze as Carousel, p as CarouselItem };
 
 //# sourceMappingURL=Carousel.mjs.map