@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/components/overlays/TeachingPopover.parts.mjs

@@ -8,158 +8,187 @@ import { useMergedRefs as _ } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as v } from "../../hooks/useIsClient.mjs";
 import { focusableDisabledProps as y, preventIfDisabled as b } from "../../lib/aria.mjs";
 import { useAnnounce as x } from "../../hooks/useAnnounce.mjs";
-import { resolvePositioning as ee, usePopupPosition as te } from "../../hooks/usePopupPosition.mjs";
-import { useDismiss as ne } from "../../hooks/useDismiss.mjs";
-import { useRestoreFocus as re } from "../../hooks/useRestoreFocus.mjs";
-import { focusRing as S, forcedColors as C } from "../../lib/styles.mjs";
-import { Portal as ie } from "../portal/Portal.mjs";
-import { Button as w } from "../button/Button.mjs";
-import { PopoverBeak as ae, getTabbableThrough as oe, usePopoverTabOrder as se } from "./Popover.shared.mjs";
-import { useTriggerElement as T, useTriggerFocusRef as ce } from "../../hooks/useTriggerElement.mjs";
-import { useTitleRegistry as le } from "./Dialog.shared.mjs";
-import { ModalCloseButton as ue } from "./Dialog.slots.mjs";
-import { useCarouselFooterStacked as de } from "./TeachingPopover.stack.mjs";
-import { TeachingPopoverSurfaceContext as fe, useTeachingPopoverContext as E } from "./TeachingPopover.context.mjs";
-import * as D from "react";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { usePresence as ee } from "../../hooks/usePresence.mjs";
+import { resolvePositioning as te, usePopupPosition as ne } from "../../hooks/usePopupPosition.mjs";
+import { useDismiss as re } from "../../hooks/useDismiss.mjs";
+import { useRestoreFocus as ie } from "../../hooks/useRestoreFocus.mjs";
+import { focusRing as ae, forcedColors as S } from "../../lib/styles.mjs";
+import { Portal as oe } from "../portal/Portal.mjs";
+import { Button as C } from "../button/Button.mjs";
+import { popupMotion as se } from "../../lib/motion.mjs";
+import { useFocusBeforeClose as ce } from "../../hooks/useFocusBeforeClose.mjs";
+import { useMotionClasses as le } from "../../hooks/useMotion.mjs";
+import { PopoverBeak as ue, getTabbableThrough as de, usePopoverTabOrder as fe } from "./Popover.shared.mjs";
+import { useTriggerElement as pe, useTriggerFocusRef as me } from "../../hooks/useTriggerElement.mjs";
+import { useTitleRegistry as he } from "./Dialog.shared.mjs";
+import { ModalCloseButton as ge } from "./Dialog.slots.mjs";
+import { useCarouselFooterStacked as _e } from "./TeachingPopover.stack.mjs";
+import { TeachingPopoverContext as ve, TeachingPopoverSurfaceContext as ye, useTeachingPopoverContext as w } from "./TeachingPopover.context.mjs";
+import * as T from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/components/overlays/TeachingPopover.parts.tsx
-function j(e) {
+function k(e) {
 	return "current" in e;
 }
-function M(e) {
-	return e != null && !j(e) && typeof e.nodeType == "number";
+function be(e) {
+	return e != null && !k(e) && typeof e.nodeType == "number";
 }
-function N(e) {
-	return e != null && !j(e) && !M(e);
+function A(e) {
+	return e != null && !k(e) && !be(e);
 }
-function pe(e) {
-	return !e || N(e) ? null : j(e) ? e.current : e;
+function xe(e) {
+	return !e || A(e) ? null : k(e) ? e.current : e;
 }
-var me = (e) => t(e, w, "button", "a");
-function P(n, r, a, s) {
+var Se = (e) => t(e, C, "button", "a");
+function j(n, r, a, s) {
 	let c = (e) => {
 		e.defaultPrevented || s();
 	};
-	if (me(n)) {
-		let { className: i, onClick: s, appearance: l } = n.props, u = t(n, w);
-		return D.cloneElement(n, {
+	if (Se(n)) {
+		let { className: i, onClick: s, appearance: l } = n.props, u = t(n, C);
+		return T.cloneElement(n, {
 			className: e(a, i),
 			onClick: o(s, c),
 			...u ? { appearance: l ?? r } : void 0
 		});
 	}
-	let l = i(n, w, a);
+	let l = i(n, C, a);
 	if (!l) return null;
 	let { onClick: u, ...d } = l.props;
-	return D.createElement(w, {
+	return T.createElement(C, {
 		appearance: r,
 		...d,
-		...l.Component === w ? void 0 : { as: l.Component },
+		...l.Component === C ? void 0 : { as: l.Component },
 		onClick: o(u, c)
 	}, l.children);
 }
-var F = ({ context: t, rootClassName: n, id: r, className: i, style: s, onKeyDown: c, children: l, ref: u, ...d }) => {
-	let { target: p, side: m, align: h, positioning: g, shown: v, index: y, step: b, stepPosition: C, titleId: w, footerLayout: T, dismiss: ue, hasTrigger: de, triggerRef: E, surfaceId: me } = t, P = x(), F = le(), I = b?.title, L = p !== void 0, [H, U] = D.useState(null), W = (e) => M(e) || N(e), [G, K] = D.useState(() => W(p)), q = p === null ? !1 : W(p) ? !0 : void 0;
-	q !== void 0 && q !== G && K(q);
-	let J = D.useRef(null), Y = D.useRef(null), he = D.useRef(p), X = D.useRef(G), ge = D.useRef(null), { setReference: _e, setFloating: ve, floatingProps: Z, arrowStyles: ye, side: be, isPositioned: xe } = te({
-		open: v && L,
-		side: m,
-		align: h,
-		arrowRef: ge,
-		...ee(g, { offset: 12 })
-	}), Se = p != null && (!j(p) || G), Ce = !L || Se && xe, Q = v && Ce, we = _(u, J, U, ve);
-	D.useLayoutEffect(() => {
-		he.current = p, X.current = G;
-		let e = pe(p);
-		Y.current = e, _e(N(p) ? p : e), p != null && j(p) && queueMicrotask(() => {
-			let e = pe(he.current);
-			e !== Y.current && (Y.current = e, _e(e));
+var M = ({ context: t, rootClassName: n, id: r, className: i, style: s, onKeyDown: c, motion: l, children: u, ref: d, ...p }) => {
+	let { target: m, side: h, align: g, positioning: v, shown: y, index: b, step: S, stepPosition: C, titleId: pe, dismiss: ge, hasTrigger: _e, triggerRef: w, surfaceId: Se } = t, j = x(), M = he(), N = S?.title, P = m !== void 0, [z, B] = T.useState(t);
+	y && t !== z && B(t);
+	let V = y ? t : z, { isMounted: H, ref: U, presenceProps: Ce } = ee(y, { appear: !0 }), W = le(l, se), [G, we] = T.useState(null), Te = (e) => be(e) || A(e), [K, Ee] = T.useState(() => Te(m)), q = m === null ? !1 : Te(m) ? !0 : void 0;
+	q !== void 0 && q !== K && Ee(q);
+	let J = T.useRef(null), Y = T.useRef(null), De = T.useRef(m), X = T.useRef(K), Oe = T.useRef(null), { setReference: ke, setFloating: Ae, floatingProps: je, arrowStyles: Me, side: Ne, isPositioned: Pe } = ne({
+		open: y && P,
+		side: h,
+		align: g,
+		arrowRef: Oe,
+		...te(v, { offset: 12 })
+	}), Fe = m != null && (!k(m) || K), Z = !P || Fe && Pe, Q = y && Z, [Ie, Le] = T.useState(Z);
+	y && Z !== Ie && Le(Z);
+	let Re = y ? Z : Ie, ze = _(d, J, we, Ae, U);
+	T.useLayoutEffect(() => {
+		De.current = m, X.current = K;
+		let e = xe(m);
+		Y.current = e, ke(A(m) ? m : e), m != null && k(m) && queueMicrotask(() => {
+			let e = xe(De.current);
+			e !== Y.current && (Y.current = e, ke(e));
 			let t = e !== null;
-			t !== X.current && (X.current = t, K(t));
+			t !== X.current && (X.current = t, Ee(t));
 		});
 	});
-	let { layerId: Te } = ne({
+	let { layerId: Be } = re({
 		open: Q,
-		onDismiss: ue,
+		onDismiss: ge,
 		refs: [J],
 		anchorRef: Y,
 		kind: "popover",
 		outsidePress: !1
-	}), Ee = ce(E);
-	re({
+	}), Ve = me(w);
+	ie({
 		enabled: Q,
-		container: H,
-		triggerRef: Ee,
+		container: G,
+		triggerRef: Ve,
 		fallback: () => Y.current,
 		onlyIfFocusInside: !0
+	}), ce({
+		open: Q,
+		surfaceRef: J,
+		captureOpener: () => Ve.current,
+		candidates: (e) => [
+			e,
+			Ve.current,
+			Y.current
+		]
 	});
-	let De = se({
-		enabled: Q && L,
-		surface: H,
+	let He = fe({
+		enabled: Q && P,
+		surface: G,
 		anchorRef: Y,
-		getPreviousStop: oe
+		getPreviousStop: de
 	});
-	D.useEffect(() => {
-		Q && H && H.focus({ preventScroll: L });
+	T.useEffect(() => {
+		Q && G && G.focus({ preventScroll: P });
 	}, [
 		Q,
-		H,
-		L
+		G,
+		P
 	]);
-	let Oe = D.useRef(y);
-	if (D.useEffect(() => {
-		Oe.current !== y && (Oe.current = y, Q && I !== void 0 && P(`${I}, ${C}`));
+	let Ue = T.useRef({
+		index: b,
+		visible: Q
+	});
+	if (T.useEffect(() => {
+		let e = Ue.current;
+		Ue.current = {
+			index: b,
+			visible: Q
+		}, e.index !== b && e.visible && Q && N !== void 0 && j(`${N}, ${C}`);
 	}, [
-		y,
+		b,
 		Q,
-		I,
+		N,
 		C,
-		P
-	]), !v || !b) return null;
-	let $ = a(l), ke = r || void 0;
-	return /* @__PURE__ */ k(ie, {
-		disabled: !L,
-		layerId: Te,
-		children: /* @__PURE__ */ A("div", {
+		j
+	]), !H || !V.step) return null;
+	let $ = a(u), We = r || void 0;
+	return /* @__PURE__ */ D(oe, {
+		disabled: !P,
+		layerId: Be,
+		children: /* @__PURE__ */ O("div", {
 			role: "dialog",
-			"aria-labelledby": $ ? F.titleId : w,
+			"aria-labelledby": $ ? M.titleId : pe,
 			tabIndex: -1,
-			"data-layout": T,
-			id: ke ?? (de ? me : void 0),
-			...d,
-			ref: we,
-			onKeyDown: o(c, De),
-			...L ? {
-				"data-side": Z["data-side"],
-				"data-align": Z["data-align"],
+			"data-layout": V.footerLayout,
+			id: We ?? (_e ? Se : void 0),
+			...p,
+			...Ce,
+			"data-state": y ? "open" : "closed",
+			ref: ze,
+			onKeyDown: o(c, He),
+			...P ? {
+				"data-side": je["data-side"],
+				"data-align": je["data-align"],
 				style: {
 					...s,
-					...Z.style,
-					...Ce ? void 0 : { visibility: "hidden" }
+					...je.style,
+					...Re ? void 0 : { visibility: "hidden" }
 				}
 			} : { style: s },
-			className: e(n, "relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8", S, i),
-			children: [L && /* @__PURE__ */ k(ae, {
-				ref: ge,
-				side: be,
-				style: ye,
+			className: e(n, "relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8", ae, W, i),
+			children: [P && /* @__PURE__ */ D(ue, {
+				ref: Oe,
+				side: Ne,
+				style: Me,
 				"data-wave-teaching-popover-arrow": "",
 				className: f.beak
-			}), /* @__PURE__ */ k(fe.Provider, {
-				value: $ ? F.context : null,
-				children: $ ? l : /* @__PURE__ */ A(O, { children: [
-					/* @__PURE__ */ k(R, {}),
-					/* @__PURE__ */ k(z, {}),
-					/* @__PURE__ */ k(B, {}),
-					/* @__PURE__ */ k(V, {})
-				] })
+			}), /* @__PURE__ */ D(ve.Provider, {
+				value: V,
+				children: /* @__PURE__ */ D(ye.Provider, {
+					value: $ ? M.context : null,
+					children: $ ? u : /* @__PURE__ */ O(E, { children: [
+						/* @__PURE__ */ D(F, {}),
+						/* @__PURE__ */ D(I, {}),
+						/* @__PURE__ */ D(L, {}),
+						/* @__PURE__ */ D(R, {})
+					] })
+				})
 			})]
 		})
 	});
 };
-F.displayName = "TeachingSurface";
-var I = ({ children: e, asChild: t, onClick: n, ref: r, ...i }) => {
-	let { shown: a, requestOpen: s, dismiss: c, surfaceId: l, triggerElementRef: u } = E("TeachingPopover.Trigger"), d = v(), f = a && d, p = _(r, u), m = {
+M.displayName = "TeachingSurface";
+var N = ({ children: e, asChild: t, onClick: n, ref: r, ...i }) => {
+	let { shown: a, requestOpen: s, dismiss: c, surfaceId: l, triggerElementRef: u } = w("TeachingPopover.Trigger"), d = v(), f = a && d, p = _(r, u), m = {
 		...i,
 		"aria-haspopup": "dialog",
 		"aria-expanded": f,
@@ -167,17 +196,17 @@ var I = ({ children: e, asChild: t, onClick: n, ref: r, ...i }) => {
 		onClick: o(n, () => a ? c() : s()),
 		ref: p
 	};
-	return T(e, m, {
+	return pe(e, m, {
 		componentName: "TeachingPopover.Trigger",
 		asChild: t
 	});
 };
-I.displayName = "TeachingPopoverTrigger";
-var L = ({ id: t, ref: n, ...r }) => {
-	let i = E("TeachingPopover.Surface"), { registerSurface: a, setCustomSurfaceId: o } = i;
-	D.useLayoutEffect(() => a(), [a]);
+N.displayName = "TeachingPopoverTrigger";
+var P = ({ id: t, ref: n, ...r }) => {
+	let i = w("TeachingPopover.Surface"), { registerSurface: a, setCustomSurfaceId: o } = i;
+	T.useLayoutEffect(() => a(), [a]);
 	let s = t || void 0;
-	return D.useEffect(() => (o(s), () => o(void 0)), [s, o]), /* @__PURE__ */ k(F, {
+	return T.useEffect(() => (o(s), () => o(void 0)), [s, o]), /* @__PURE__ */ D(M, {
 		context: i,
 		rootClassName: e(f.root, h.root),
 		id: t,
@@ -185,19 +214,19 @@ var L = ({ id: t, ref: n, ...r }) => {
 		ref: n
 	});
 };
-L.displayName = "TeachingPopoverSurface";
-var R = ({ icon: t, dismissButton: i, className: o, children: s, ref: c, ...l }) => {
-	let { step: u, closeLabel: d, dismiss: p } = E("TeachingPopover.Header");
+P.displayName = "TeachingPopoverSurface";
+var F = ({ icon: t, dismissButton: i, className: o, children: s, ref: c, ...l }) => {
+	let { step: u, closeLabel: d, dismiss: p } = w("TeachingPopover.Header");
 	if (!u) return null;
 	let h = a(t), g = a(s);
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ O("div", {
 		ref: c,
 		className: e(m.root, (h || g) && "-mt-2 mb-2 flex min-h-6 items-center gap-1.5 pe-8 text-caption-1 font-semibold text-primary", o),
 		...l,
 		children: [
 			h && r(t, "span", e(m.icon, "inline-flex shrink-0 items-center"), { "aria-hidden": !0 }),
 			g && n(s),
-			/* @__PURE__ */ k(ue, {
+			/* @__PURE__ */ D(ge, {
 				componentName: "TeachingPopover.Header",
 				closeButton: i,
 				slotName: "dismissButton",
@@ -208,81 +237,81 @@ var R = ({ icon: t, dismissButton: i, className: o, children: s, ref: c, ...l })
 		]
 	});
 };
-R.displayName = "TeachingPopoverHeader";
-var z = (t) => {
-	let { as: r, id: i, className: o, children: s, ref: c, ...l } = t, { step: u, stepPosition: d, titleId: p } = E("TeachingPopover.Title"), m = D.useContext(fe), h = i || p, v = m?.registerTitle, y = D.useCallback((e) => e && v ? v(h) : void 0, [v, h]), b = _(c, y);
-	return u ? /* @__PURE__ */ A(r ?? "h3", {
+F.displayName = "TeachingPopoverHeader";
+var I = (t) => {
+	let { as: r, id: i, className: o, children: s, ref: c, ...l } = t, { step: u, stepPosition: d, titleId: p } = w("TeachingPopover.Title"), m = T.useContext(ye), h = i || p, v = m?.registerTitle, y = T.useCallback((e) => e && v ? v(h) : void 0, [v, h]), b = _(c, y);
+	return u ? /* @__PURE__ */ O(r ?? "h3", {
 		id: h,
 		className: e(g.root, f.title, "mb-2 pe-8 text-subtitle-1 font-semibold text-foreground", o),
 		...l,
 		ref: b,
-		children: [a(s) ? n(s) : u.title, /* @__PURE__ */ k("span", {
+		children: [a(s) ? n(s) : u.title, /* @__PURE__ */ D("span", {
 			className: "sr-only",
 			children: `, ${d}`
 		})]
 	}) : null;
 };
-z.displayName = "TeachingPopoverTitle";
-var B = ({ media: t, className: i, children: o, ref: c, ...l }) => {
-	let { step: u } = E("TeachingPopover.Body");
-	return u ? /* @__PURE__ */ A("div", {
+I.displayName = "TeachingPopoverTitle";
+var L = ({ media: t, className: i, children: o, ref: c, ...l }) => {
+	let { step: u } = w("TeachingPopover.Body");
+	return u ? /* @__PURE__ */ O("div", {
 		ref: c,
 		className: e(s.root, f.body, "mb-4 text-body-1 text-muted-foreground", i),
 		...l,
 		children: [a(t) && r(t, "span", e(s.media, "mb-3 block overflow-hidden rounded-md")), a(o) ? n(o) : u.body]
 	}) : null;
 };
-B.displayName = "TeachingPopoverBody";
-var V = ({ className: t, children: r, ref: i, ...o }) => {
-	let s = E("TeachingPopover.Footer"), { step: c, footerLayout: l } = s;
+L.displayName = "TeachingPopoverBody";
+var R = ({ className: t, children: r, ref: i, ...o }) => {
+	let s = w("TeachingPopover.Footer"), { step: c, footerLayout: l } = s;
 	if (!c) return null;
 	let u = l === "vertical";
-	return /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ D("div", {
 		ref: i,
 		"data-layout": l,
 		className: e(p.root, f.footer, "flex gap-2", u ? "flex-col items-stretch gap-4" : "items-center justify-between", t),
 		...o,
-		children: a(r) ? n(r) : /* @__PURE__ */ k(H, { context: s })
+		children: a(r) ? n(r) : /* @__PURE__ */ D(z, { context: s })
 	});
 };
-V.displayName = "TeachingPopoverFooter";
-function H({ context: t }) {
-	let n = t.footerLayout === "vertical", { secondary: r, primary: i } = W(t);
-	return /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(U, {
+R.displayName = "TeachingPopoverFooter";
+function z({ context: t }) {
+	let n = t.footerLayout === "vertical", { secondary: r, primary: i } = V(t);
+	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(B, {
 		count: t.count,
 		index: t.index,
 		className: n && "justify-center"
-	}), /* @__PURE__ */ A("div", {
+	}), /* @__PURE__ */ O("div", {
 		className: e("flex gap-2", n ? "flex-col items-stretch" : "items-center"),
 		children: [r, i]
 	})] });
 }
-H.displayName = "TeachingFooterContent";
-function U({ count: t, index: n, className: r }) {
-	return /* @__PURE__ */ k("div", {
+z.displayName = "TeachingFooterContent";
+function B({ count: t, index: n, className: r }) {
+	return /* @__PURE__ */ D("div", {
 		"aria-hidden": "true",
 		className: e("flex items-center gap-1.5", r),
-		children: Array.from({ length: t }, (t, r) => /* @__PURE__ */ k("span", {
+		children: Array.from({ length: t }, (t, r) => /* @__PURE__ */ D("span", {
 			"data-wave-teaching-popover-dot": "",
 			"aria-current": r === n ? "step" : void 0,
-			className: e(f.dot, "h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", r === n ? e("w-4 bg-primary", C.fill) : "w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none")
+			className: e(f.dot, "h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", r === n ? e("w-4 bg-primary", S.fill) : "w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none")
 		}, r))
 	});
 }
-U.displayName = "TeachingStepDots";
-function W(e, { initialStepText: t, finalStepText: n } = {}) {
+B.displayName = "TeachingStepDots";
+function V(e, { initialStepText: t, finalStepText: n } = {}) {
 	let { count: r, isFirst: i, isLast: a, goBack: o, goNext: s, dismiss: c, primaryAction: l, secondaryAction: u, backLabel: d, nextLabel: p, doneLabel: m } = e, h;
-	u ? h = P(u, "outline", f.secondaryButton, o) : i && t ? h = /* @__PURE__ */ k(w, {
+	u ? h = j(u, "outline", f.secondaryButton, o) : i && t ? h = /* @__PURE__ */ D(C, {
 		className: f.backButton,
 		onClick: c,
 		children: t
-	}) : r > 1 && (h = /* @__PURE__ */ k(w, {
+	}) : r > 1 && (h = /* @__PURE__ */ D(C, {
 		...y(i),
 		className: f.backButton,
 		onClick: b(i, o),
 		children: d
 	}));
-	let g = l ? P(l, "primary", f.primaryButton, s) : /* @__PURE__ */ k(w, {
+	let g = l ? j(l, "primary", f.primaryButton, s) : /* @__PURE__ */ D(C, {
 		appearance: "primary",
 		className: f.nextButton,
 		onClick: s,
@@ -293,23 +322,23 @@ function W(e, { initialStepText: t, finalStepText: n } = {}) {
 		primary: g
 	};
 }
-var G = ({ className: t, children: r, ref: i, ...o }) => {
-	let { step: s } = E("TeachingPopover.Carousel");
-	return s ? /* @__PURE__ */ k("div", {
+var H = ({ className: t, children: r, ref: i, ...o }) => {
+	let { step: s } = w("TeachingPopover.Carousel");
+	return s ? /* @__PURE__ */ D("div", {
 		ref: i,
 		className: e(c.root, t),
 		...o,
-		children: a(r) ? n(r) : /* @__PURE__ */ A(O, { children: [
-			/* @__PURE__ */ k(z, {}),
-			/* @__PURE__ */ k(B, {}),
-			/* @__PURE__ */ k(Y, {})
+		children: a(r) ? n(r) : /* @__PURE__ */ O(E, { children: [
+			/* @__PURE__ */ D(I, {}),
+			/* @__PURE__ */ D(L, {}),
+			/* @__PURE__ */ D(G, {})
 		] })
 	}) : null;
 };
-G.displayName = "TeachingPopoverCarousel";
-var K = ({ className: t, ref: n, ...r }) => {
-	let { step: i, count: a, index: o, goToStep: s, navLabel: c, navButtonLabel: l } = E("TeachingPopover.CarouselNav");
-	return i ? /* @__PURE__ */ k("div", {
+H.displayName = "TeachingPopoverCarousel";
+var U = ({ className: t, ref: n, ...r }) => {
+	let { step: i, count: a, index: o, goToStep: s, navLabel: c, navButtonLabel: l } = w("TeachingPopover.CarouselNav");
+	return i ? /* @__PURE__ */ D("div", {
 		ref: n,
 		role: "group",
 		"aria-label": c,
@@ -317,82 +346,82 @@ var K = ({ className: t, ref: n, ...r }) => {
 		...r,
 		children: Array.from({ length: a }, (t, n) => {
 			let r = n === o;
-			return /* @__PURE__ */ k("button", {
+			return /* @__PURE__ */ D("button", {
 				type: "button",
 				"aria-label": l(n, a),
 				"aria-current": r ? "step" : void 0,
 				onClick: () => s(n),
-				className: e(u.button, "group inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0", S),
-				children: /* @__PURE__ */ k("span", {
+				className: e(u.button, "group inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0", ae),
+				children: /* @__PURE__ */ D("span", {
 					"aria-hidden": "true",
-					className: e(u.indicator, "block h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", r ? e("w-4 bg-primary", C.fill) : "w-1.5 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
+					className: e(u.indicator, "block h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", r ? e("w-4 bg-primary", S.fill) : "w-1.5 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
 				})
 			}, n);
 		})
 	}) : null;
 };
-K.displayName = "TeachingPopoverCarouselNav";
-var q = (e, t) => `${e} of ${t}`, J = ({ className: t, children: r, ref: i, ...o }) => {
-	let { step: s, count: c, index: l } = E("TeachingPopover.CarouselPageCount");
+U.displayName = "TeachingPopoverCarouselNav";
+var Ce = (e, t) => `${e} of ${t}`, W = ({ className: t, children: r, ref: i, ...o }) => {
+	let { step: s, count: c, index: l } = w("TeachingPopover.CarouselPageCount");
 	if (!s) return null;
 	let u = r?.(l + 1, c);
-	return /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ D("div", {
 		ref: i,
 		className: e(d.root, "shrink-0 text-caption-1 text-muted-foreground", t),
 		...o,
-		children: a(u) ? n(u) : q(l + 1, c)
+		children: a(u) ? n(u) : Ce(l + 1, c)
 	});
 };
-J.displayName = "TeachingPopoverCarouselPageCount";
-var Y = ({ layout: t = "offset", initialStepText: r, finalStepText: i, className: o, children: s, ref: c, ...u }) => {
-	let d = E("TeachingPopover.CarouselFooter"), p = t === "centered", [m, h] = D.useState(null), g = _(c, h), v = de(m, p && d.step !== void 0);
+W.displayName = "TeachingPopoverCarouselPageCount";
+var G = ({ layout: t = "offset", initialStepText: r, finalStepText: i, className: o, children: s, ref: c, ...u }) => {
+	let d = w("TeachingPopover.CarouselFooter"), p = t === "centered", [m, h] = T.useState(null), g = _(c, h), v = _e(m, p && d.step !== void 0);
 	if (!d.step) return null;
-	let { secondary: y, primary: b } = W(d, {
+	let { secondary: y, primary: b } = V(d, {
 		initialStepText: r,
 		finalStepText: i
-	}), x = a(s) ? /* @__PURE__ */ k("div", {
+	}), x = a(s) ? /* @__PURE__ */ D("div", {
 		className: e("flex flex-wrap items-center gap-2", p && "w-max max-w-full justify-center"),
 		children: n(s)
-	}) : /* @__PURE__ */ k(U, {
+	}) : /* @__PURE__ */ D(B, {
 		count: d.count,
 		index: d.index
 	});
-	return p ? /* @__PURE__ */ A("div", {
+	return p ? /* @__PURE__ */ O("div", {
 		ref: g,
 		"data-carousel-layout": t,
 		"data-stacked": v ? "" : void 0,
 		className: e(l.root, f.footer, "items-center gap-2", v ? "flex flex-wrap" : "grid grid-cols-[1fr_auto_1fr]", o),
 		...u,
 		children: [
-			a(y) && /* @__PURE__ */ k("div", {
+			a(y) && /* @__PURE__ */ D("div", {
 				"data-wave-carousel-footer-slot": "secondary",
 				className: e("flex w-max max-w-full", !v && "col-start-1 justify-self-start"),
 				children: y
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ D("div", {
 				"data-wave-carousel-footer-slot": "indicator",
 				className: e("flex justify-center", v ? "order-first basis-full" : "col-start-2"),
 				children: x
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ D("div", {
 				"data-wave-carousel-footer-slot": "primary",
 				className: e("flex w-max max-w-full", v ? "ms-auto" : "col-start-3 justify-self-end"),
 				children: b
 			})
 		]
-	}) : /* @__PURE__ */ A("div", {
+	}) : /* @__PURE__ */ O("div", {
 		ref: g,
 		"data-carousel-layout": t,
 		className: e(l.root, f.footer, "flex flex-wrap items-center justify-between gap-2", o),
 		...u,
-		children: [x, /* @__PURE__ */ A("div", {
+		children: [x, /* @__PURE__ */ O("div", {
 			className: "ms-auto flex flex-wrap items-center justify-end gap-2",
 			children: [y, b]
 		})]
 	});
 };
-Y.displayName = "TeachingPopoverCarouselFooter";
+G.displayName = "TeachingPopoverCarouselFooter";
 //#endregion
-export { B as TeachingPopoverBody, G as TeachingPopoverCarousel, Y as TeachingPopoverCarouselFooter, K as TeachingPopoverCarouselNav, J as TeachingPopoverCarouselPageCount, V as TeachingPopoverFooter, R as TeachingPopoverHeader, L as TeachingPopoverSurface, z as TeachingPopoverTitle, I as TeachingPopoverTrigger, F as TeachingSurface };
+export { L as TeachingPopoverBody, H as TeachingPopoverCarousel, G as TeachingPopoverCarouselFooter, U as TeachingPopoverCarouselNav, W as TeachingPopoverCarouselPageCount, R as TeachingPopoverFooter, F as TeachingPopoverHeader, P as TeachingPopoverSurface, I as TeachingPopoverTitle, N as TeachingPopoverTrigger, M as TeachingSurface };
 
 //# sourceMappingURL=TeachingPopover.parts.mjs.map