@stealthscale/component-media 0.1.0

package/dist/index.js

@@ -0,0 +1,1890 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as recipe$3, c as recipe, n as recipe$5, o as recipe$2, r as recipe$4, s as recipe$1, t as recipe$6 } from "./recipe-m4bX2c06.js";
+import { c } from "react/compiler-runtime";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createContext, use, useEffect, useId, useState, useSyncExternalStore } from "react";
+import { createRequiredContext, omitUndefined, splitEnumerable, useSafeLayoutEffect } from "@stealthscale/hooks";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import * as avatar from "@zag-js/avatar";
+import { createSplitProps, noop } from "@zag-js/utils";
+import * as carousel from "@zag-js/carousel";
+import { Button } from "@stealthscale/component-actions";
+import { getEventKey } from "@zag-js/dom-query";
+import * as imageCropper from "@zag-js/image-cropper";
+import { handles } from "@zag-js/image-cropper";
+//#region src/audio/context.ts
+/**
+* Binds the audio recipe to the element that renders it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factory the audio component is built from.
+*/
+const { withContext: withContext$5 } = createRecipeContext(recipe);
+//#endregion
+//#region src/audio/audio.tsx
+/**
+* Renders the `audio` element with the recipe's class.
+*/
+const Drawn$13 = withContext$5("audio");
+/**
+* Renders the element with the browser's controls unless the caller turns them off.
+*
+* @param props - The props of an `audio` element.
+* @returns The `audio` element.
+*/
+function Audio(t0) {
+	const $ = c(6);
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({controls: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = t1;
+	} else {
+		rest = $[1];
+		t1 = $[2];
+	}
+	const controls = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[3] !== controls || $[4] !== rest) {
+		t2 = /* @__PURE__ */ jsx(Drawn$13, {
+			...rest,
+			controls
+		});
+		$[3] = controls;
+		$[4] = rest;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/avatar/context.ts
+/**
+* Binds the avatar slot recipe and the badge recipe to the elements that render them.
+*
+* @remarks
+*   The bindings are kept out of the recipe modules because an application's style compiler
+*   imports the recipes at build time, and a binding there would pull the React runtime into that
+*   import.
+*/
+/**
+* Factories that bind an element to a slot: `withProvider` for the root and the group, which take
+* the variants, and `withContext` for the image and the fallback, which read them.
+*/
+const { withContext: withContext$4, withProvider: withProvider$2 } = createSlotRecipeContext(recipe$1);
+/**
+* Binds the badge's element, which takes the badge recipe's variants as props.
+*/
+const { withContext: withBadgeContext } = createRecipeContext(recipe$2);
+//#endregion
+//#region src/avatar/state.ts
+/**
+* Provides the name an avatar's fallback reads, the variants a group gives its avatars, and the
+* setter through which a badge describes its avatar.
+*/
+/**
+* Context through which the root provides its `name` to the fallback.
+*/
+const NameContext = createContext(void 0);
+/**
+* Context through which a group provides its variants to the avatars in it.
+*/
+const DefaultsContext = createContext(void 0);
+/**
+* Context through which the root provides the setter of the IDs that describe it.
+*/
+const DescribeContext = createContext(void 0);
+/**
+* Returns the name of the avatar around the caller.
+*
+* @returns The root's `name`, or undefined when the root has none.
+*/
+function useAvatarName() {
+	return use(NameContext);
+}
+/**
+* Returns the variants of the group around the caller.
+*
+* @returns The group's variants, or an empty object outside a group.
+*/
+function useDefaults() {
+	return use(DefaultsContext) ?? {};
+}
+/**
+* Returns the setter of the IDs that describe the avatar around the caller.
+*
+* @returns The root's setter, or undefined outside a root.
+*/
+function useDescribe() {
+	return use(DescribeContext);
+}
+//#endregion
+//#region src/avatar/badge.tsx
+/**
+* Renders a mark pinned to a corner of the avatar: a status dot, a count, an emoji or an icon.
+*
+* @remarks
+*   The badge goes inside `Avatar.Root`, which it is positioned against. Without children it is a
+*   dot. With `label` it is an image named by the label, and its ID joins the root's
+*   `aria-describedby`, because a root named by `name` is an image whose children are not read.
+*   Without `label` it is hidden from screen readers, for a state already written beside the
+*   avatar. `palette`, `placement` and `variant` are the badge's own, apart from the avatar's.
+*/
+/**
+* Renders the badge `span` with the badge recipe's variants.
+*/
+const Marked = withBadgeContext("span");
+/**
+* Renders the badge, named by `label` and describing the avatar around it.
+*
+* @param props - The label, the variants and the `span` element's props.
+* @returns The `span` element.
+*/
+function Badge(t0) {
+	const $ = c(14);
+	let label;
+	let rest;
+	if ($[0] !== t0) {
+		({label, ...rest} = t0);
+		$[0] = t0;
+		$[1] = label;
+		$[2] = rest;
+	} else {
+		label = $[1];
+		rest = $[2];
+	}
+	const id = useId();
+	const describe = useDescribe();
+	let t1;
+	let t2;
+	if ($[3] !== describe || $[4] !== id || $[5] !== label) {
+		t1 = () => {
+			const described = label === void 0 ? void 0 : describe;
+			described?.((ids) => [...ids, id]);
+			return () => {
+				described?.((ids_0) => ids_0.filter((each) => each !== id));
+			};
+		};
+		t2 = [
+			describe,
+			id,
+			label
+		];
+		$[3] = describe;
+		$[4] = id;
+		$[5] = label;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useSafeLayoutEffect(t1, t2);
+	let t3;
+	if ($[8] !== id || $[9] !== label) {
+		t3 = label === void 0 ? { "aria-hidden": true } : {
+			"aria-label": label,
+			id,
+			role: "img"
+		};
+		$[8] = id;
+		$[9] = label;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== rest || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Marked, {
+			...t3,
+			...rest
+		});
+		$[11] = rest;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+//#endregion
+//#region src/avatar/initials.ts
+/**
+* Derives the initials an avatar's fallback shows from a name.
+*/
+/**
+* Splits a word into its user-perceived characters.
+*/
+const LETTERS = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+/**
+* Returns the first user-perceived character of a word.
+*/
+function firstLetter(word) {
+	return Array.from(LETTERS.segment(word), (part) => part.segment).slice(0, 1).join("");
+}
+/**
+* Returns the initials of a name: the first letter of its first word and of its last word.
+*
+* @remarks
+*   A letter is a grapheme cluster, so a name that opens on a composed or accented letter keeps it
+*   whole. A name of one word returns one letter, and a blank name returns an empty string. The
+*   recipe sets the initials in capitals.
+* @param name - The name, as the root received it.
+* @returns Zero, one or two letters.
+*/
+function initialsOf(name) {
+	const words = name.split(/\s+/u).filter((word) => word !== "");
+	return [...words.slice(0, 1), ...words.slice(1).slice(-1)].map((word) => firstLetter(word)).join("");
+}
+//#endregion
+//#region src/avatar/machine.ts
+/**
+* Connects the Zag avatar machine and provides its API to the image and the fallback.
+*
+* @remarks
+*   The machine starts in `loading` and moves to `loaded` when the image loads or to `error` when
+*   it fails. The image is hidden until it loads, and the fallback is hidden only once it has, so
+*   an avatar without an image shows its fallback.
+*/
+/**
+* Context through which the root provides the connected API to its parts.
+*
+* @remarks
+*   `useAvatar` throws when no `Avatar.Root` is mounted above the calling part.
+*/
+const [ApiProvider$1, useAvatar] = createRequiredContext("Avatar");
+/**
+* Starts the avatar machine and returns its connected API.
+*
+* @param options - Machine settings split from the root's props. A generated ID is used when `id`
+*   is absent.
+*/
+function useAvatarMachine(options) {
+	const $ = c(5);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return avatar.connect(useMachine(avatar.machine, t2), normalizeProps);
+}
+/**
+* Splits the root's props into machine settings and element props.
+*
+* @remarks
+*   The machine's own splitter types `id` as required, and the root generates the ID after
+*   splitting, so the splitter is rebuilt over `AvatarOptions` from the machine's key list.
+*/
+const splitAvatarProps = splitEnumerable(createSplitProps(avatar.props));
+//#endregion
+//#region src/avatar/fallback.tsx
+/**
+* Renders the fallback `span`.
+*/
+const Lettered = withContext$4("span", "fallback");
+/**
+* Renders the children, or the initials of the root's name.
+*
+* @param props - The `span` element's props.
+* @returns The `span` element, hidden once the picture loads.
+*/
+function Fallback(t0) {
+	const $ = c(7);
+	const { children, ...rest } = t0;
+	const api = useAvatar();
+	const name = useAvatarName();
+	const T0 = Lettered;
+	const t1 = mergeProps(api.getFallbackProps(), rest);
+	let t2;
+	if ($[0] !== children || $[1] !== name) {
+		t2 = children ?? initialsOf(name ?? "");
+		$[0] = children;
+		$[1] = name;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== T0 || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[3] = T0;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/avatar/group.tsx
+/**
+* Renders the group `span`.
+*/
+const Grouped = withProvider$2("span", "group");
+/**
+* Renders the row and provides its variants to the avatars in it.
+*
+* @param props - The variants and the `span` element's props.
+* @returns The `span` element.
+*/
+function Group(t0) {
+	const $ = c(16);
+	let palette;
+	let rest;
+	let shape;
+	let size;
+	let variant;
+	if ($[0] !== t0) {
+		({palette, shape, size, variant, ...rest} = t0);
+		$[0] = t0;
+		$[1] = palette;
+		$[2] = rest;
+		$[3] = shape;
+		$[4] = size;
+		$[5] = variant;
+	} else {
+		palette = $[1];
+		rest = $[2];
+		shape = $[3];
+		size = $[4];
+		variant = $[5];
+	}
+	let t1;
+	if ($[6] !== palette || $[7] !== shape || $[8] !== size || $[9] !== variant) {
+		t1 = omitUndefined({
+			palette,
+			shape,
+			size,
+			variant
+		});
+		$[6] = palette;
+		$[7] = shape;
+		$[8] = size;
+		$[9] = variant;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== rest) {
+		t2 = /* @__PURE__ */ jsx(Grouped, { ...rest });
+		$[11] = rest;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(DefaultsContext, {
+			value: t1,
+			children: t2
+		});
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
+//#endregion
+//#region src/avatar/image.tsx
+/**
+* Renders the picture `img`.
+*/
+const Pictured = withContext$4("img", "image");
+/**
+* Renders the picture with the machine's load handlers merged under the caller's.
+*
+* @param props - The `img` element's props.
+* @returns The `img` element, hidden until it loads.
+*/
+function Image$1(t0) {
+	const $ = c(3);
+	const { alt: t1, ...rest } = t0;
+	const alt = t1 === void 0 ? "" : t1;
+	const api = useAvatar();
+	const T0 = Pictured;
+	const t2 = mergeProps(api.getImageProps(), {
+		alt,
+		draggable: false,
+		referrerPolicy: "no-referrer",
+		...rest
+	});
+	let t3;
+	if ($[0] !== T0 || $[1] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, { ...t2 });
+		$[0] = T0;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	return t3;
+}
+//#endregion
+//#region src/avatar/root.tsx
+/**
+* Renders the avatar's box and runs the machine that tracks its picture.
+*
+* @remarks
+*   The element is a `span`, so an avatar fits in a line of text or a table cell. With `name`, the
+*   root is an image named by that name, `role="img"` with `aria-label`, and the fallback shows its
+*   initials. Without `name`, the root has no role, and the caller names the avatar through the
+*   image's `alt`. Beside the same name in words, set `aria-hidden` on the root, so a screen reader
+*   reads the name once. `palette`, `shape`, `size` and `variant` default to the nearest
+*   `Avatar.Group`. A badge with a label adds its ID to the root's `aria-describedby`, because the
+*   children of an image are not read.
+*/
+/**
+* Renders the root `span` and provides the variants to the image and the fallback.
+*/
+const Boxed = withProvider$2("span", "root");
+/**
+* Renders the box, named by `name` when one is passed.
+*
+* @param props - The machine settings, the name, the recipe's variants and the `span` props.
+* @returns The `span` element, with the connected API in context.
+*/
+function Root$2(props) {
+	const $ = c(33);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitAvatarProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, t1] = t0;
+	let name;
+	let palette;
+	let rest;
+	let shape;
+	let size;
+	let variant;
+	if ($[2] !== t1) {
+		({name, palette, shape, size, variant, ...rest} = t1);
+		$[2] = t1;
+		$[3] = name;
+		$[4] = palette;
+		$[5] = rest;
+		$[6] = shape;
+		$[7] = size;
+		$[8] = variant;
+	} else {
+		name = $[3];
+		palette = $[4];
+		rest = $[5];
+		shape = $[6];
+		size = $[7];
+		variant = $[8];
+	}
+	const api = useAvatarMachine(options);
+	const defaults = useDefaults();
+	let t2;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[9] = t2;
+	} else t2 = $[9];
+	const [described, setDescribed] = useState(t2);
+	let t3;
+	if ($[10] !== name) {
+		t3 = name === void 0 ? {} : {
+			"aria-label": name,
+			role: "img"
+		};
+		$[10] = name;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== described) {
+		t4 = described.length === 0 ? {} : { "aria-describedby": described.join(" ") };
+		$[12] = described;
+		$[13] = t4;
+	} else t4 = $[13];
+	const t5 = palette ?? defaults.palette;
+	const t6 = shape ?? defaults.shape;
+	const t7 = size ?? defaults.size;
+	const t8 = variant ?? defaults.variant;
+	let t9;
+	if ($[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8) {
+		t9 = omitUndefined({
+			palette: t5,
+			shape: t6,
+			size: t7,
+			variant: t8
+		});
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== api) {
+		t10 = api.getRootProps();
+		$[19] = api;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== rest || $[22] !== t10 || $[23] !== t3 || $[24] !== t4 || $[25] !== t9) {
+		t11 = /* @__PURE__ */ jsx(DescribeContext, {
+			value: setDescribed,
+			children: /* @__PURE__ */ jsx(Boxed, {
+				...t3,
+				...t4,
+				...rest,
+				...t9,
+				...t10
+			})
+		});
+		$[21] = rest;
+		$[22] = t10;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t9;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== name || $[28] !== t11) {
+		t12 = /* @__PURE__ */ jsx(NameContext, {
+			value: name,
+			children: t11
+		});
+		$[27] = name;
+		$[28] = t11;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== api || $[31] !== t12) {
+		t13 = /* @__PURE__ */ jsx(ApiProvider$1, {
+			value: api,
+			children: t12
+		});
+		$[30] = api;
+		$[31] = t12;
+		$[32] = t13;
+	} else t13 = $[32];
+	return t13;
+}
+//#endregion
+//#region src/avatar/index.ts
+var avatar_exports = /* @__PURE__ */ __exportAll({
+	Badge: () => Badge,
+	Fallback: () => Fallback,
+	Group: () => Group,
+	Image: () => Image$1,
+	Root: () => Root$2
+});
+//#endregion
+//#region src/carousel/machine.ts
+/**
+* Connects the carousel machine and provides it to the parts, with the rotation and the reader's
+* motion setting.
+*
+* @remarks
+*   The root starts one machine and every part reads it from context. The machine's own keys on
+*   the scroller are switched off: they page on Left and Right only, in a vertical carousel too,
+*   ignore `dir`, and act while focus is on any element inside a slide. The scroller part pages
+*   through `keys.ts` instead. The machine ignores a press that starts a drag while the scroller
+*   has focus, so its focus state takes the drag as its idle state does. The machine starts and
+*   stops its rotation only in its idle and rotating states, so a change that arrives while a drag
+*   settles is sent again after the next render.
+*/
+/**
+* Creates the context through which the root provides the running machine to its parts.
+*
+* @remarks
+*   `useCarousel` throws when no `Carousel.Root` is mounted above the calling part.
+*/
+const [MachineProvider, useCarousel] = createRequiredContext("Carousel");
+/**
+* Lists the states of Zag's carousel machine.
+*/
+const STATES = carousel.machine.states;
+/**
+* Runs Zag's carousel machine without its keys on the scroller, and starts a drag while the
+* scroller has focus as it does while idle.
+*/
+const MACHINE = {
+	...carousel.machine,
+	implementations: {
+		...carousel.machine.implementations,
+		effects: {
+			...carousel.machine.implementations?.effects,
+			trackKeyboardScroll: noop
+		}
+	},
+	states: {
+		...STATES,
+		focus: {
+			...STATES.focus,
+			on: {
+				...STATES.focus.on,
+				"DRAGGING.START": {
+					actions: ["invokeDragStart"],
+					target: "dragging"
+				}
+			}
+		}
+	}
+};
+/**
+* Starts the carousel machine and returns its connected api and its `send`.
+*
+* @param options - Machine settings split from the root's props. React generates `id` when the
+*   caller states none.
+* @returns The api and the function that sends the machine an event.
+*/
+function useCarouselMachine(options) {
+	const $ = c(14);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const service = useMachine(MACHINE, t2);
+	let t3;
+	if ($[5] !== service) {
+		t3 = carousel.connect(service, normalizeProps);
+		$[5] = service;
+		$[6] = t3;
+	} else t3 = $[6];
+	const api = t3;
+	const rotating = Boolean(options.autoplay);
+	let t4;
+	if ($[7] !== api.isPlaying || $[8] !== rotating || $[9] !== service) {
+		t4 = () => {
+			if (rotating !== api.isPlaying) service.send({ type: rotating ? "AUTOPLAY.START" : "AUTOPLAY.PAUSE" });
+		};
+		$[7] = api.isPlaying;
+		$[8] = rotating;
+		$[9] = service;
+		$[10] = t4;
+	} else t4 = $[10];
+	useEffect(t4);
+	let t5;
+	if ($[11] !== api || $[12] !== service.send) {
+		t5 = [api, service.send];
+		$[11] = api;
+		$[12] = service.send;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+/**
+* Splits the root's props into machine settings and element props, without `translations`.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed version.
+* @typeParam Props - Type of the root's props.
+* @param props - The root's props.
+* @returns The machine settings and the element props.
+*/
+function splitCarouselProps(props) {
+	const [options, rest] = splitEnumerable(carousel.splitProps)(props);
+	const { translations: _translations, ...kept } = options;
+	return [kept, rest];
+}
+//#endregion
+//#region src/carousel/autoplay-indicator.ts
+/**
+* Renders the glyph of the rotation control's next action.
+*
+* @param props - The glyph of each action.
+* @returns The glyph for the rotation's state.
+*/
+function AutoplayIndicator(t0) {
+	const { pause, play } = t0;
+	const { rotation } = useCarousel();
+	return rotation.wanted ? pause : play;
+}
+//#endregion
+//#region src/carousel/context.ts
+/**
+* Binds the carousel recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Binds the recipe once. The root receives the variants and every other part reads them.
+*/
+const { withContext: withContext$3, withProvider: withProvider$1 } = createSlotRecipeContext(recipe$3);
+//#endregion
+//#region src/carousel/bound.ts
+/**
+* Renders the previous trigger as the library's `Button` with the carousel's class.
+*/
+const PrevButton = withContext$3(Button, "prevTrigger");
+/**
+* Renders the next trigger as the library's `Button` with the carousel's class.
+*/
+const NextButton = withContext$3(Button, "nextTrigger");
+/**
+* Renders the rotation control as the library's `Button` with the carousel's class.
+*/
+const AutoplayButton = withContext$3(Button, "autoplayTrigger");
+/**
+* Returns the look a trigger takes unless the caller sets another.
+*
+* @param controls - Where the controls go.
+* @returns `surface` over the slides, else `ghost`.
+*/
+function lookOf(controls) {
+	return controls === "overlay" ? "surface" : "ghost";
+}
+//#endregion
+//#region src/carousel/autoplay-trigger.tsx
+/**
+* Renders the rotation control with the machine's props merged under the caller's.
+*
+* @param props - The names of the two actions and the props of a `Button`.
+* @returns The `button` element.
+*/
+function AutoplayTrigger(t0) {
+	const $ = c(4);
+	const { startLabel: t1, stopLabel: t2, ...rest } = t0;
+	const startLabel = t1 === void 0 ? "Start slide rotation" : t1;
+	const stopLabel = t2 === void 0 ? "Stop slide rotation" : t2;
+	const { api, controls, rotation } = useCarousel();
+	const pressed = {
+		onClick(event) {
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			rotation.toggle();
+		},
+		variant: lookOf(controls)
+	};
+	const T0 = AutoplayButton;
+	const t3 = mergeProps(api.getAutoplayTriggerProps(), pressed, rest);
+	const t4 = rotation.wanted ? stopLabel : startLabel;
+	let t5;
+	if ($[0] !== T0 || $[1] !== t3 || $[2] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...t3,
+			"aria-label": t4,
+			"data-pressed": void 0,
+			shape: "square"
+		});
+		$[0] = T0;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+	} else t5 = $[3];
+	return t5;
+}
+//#endregion
+//#region src/carousel/control.tsx
+/**
+* Renders the `div` with the carousel's control class.
+*/
+const Drawn$12 = withContext$3("div", "control");
+/**
+* Renders the control row with the machine's props merged under the caller's.
+*
+* @param props - The props of a `div`, the controls among its children.
+* @returns The `div` element.
+*/
+function Control(props) {
+	const $ = c(5);
+	const { api } = useCarousel();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getControlProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn$12, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/carousel/keys.ts
+/**
+* Maps the keys that move a carousel a page to the machine's page events.
+*
+* @remarks
+*   The keys follow the carousel's orientation and direction: Left and Right page a horizontal
+*   carousel, swapped under `dir="rtl"`, and Up and Down page a vertical one. Home and End move to
+*   the first and the last page. The machine writes `dir` and `data-orientation` on the element
+*   that receives the key, so the map reads both from it.
+*/
+/**
+* Lists the arrow keys that step a page, per orientation, after the swap for a right-to-left
+* carousel.
+*/
+const STEPS = {
+	horizontal: {
+		ArrowLeft: "PAGE.PREV",
+		ArrowRight: "PAGE.NEXT"
+	},
+	vertical: {
+		ArrowDown: "PAGE.NEXT",
+		ArrowUp: "PAGE.PREV"
+	}
+};
+/**
+* Returns the page event for a key, or undefined for a key that moves no page.
+*
+* @param key - The key's `key` value.
+* @param element - The part that received the key, with the machine's `dir` and
+*   `data-orientation` on it.
+* @param last - The index of the last page.
+* @returns The page event.
+*/
+function paged(key, element, last) {
+	const orientation = element.dataset["orientation"] === "vertical" ? "vertical" : "horizontal";
+	const pressed = getEventKey({ key }, {
+		dir: element.dir === "rtl" ? "rtl" : "ltr",
+		orientation
+	});
+	if (pressed === "Home") return {
+		index: 0,
+		type: "PAGE.SET"
+	};
+	if (pressed === "End") return {
+		index: last,
+		type: "PAGE.SET"
+	};
+	const type = STEPS[orientation][pressed];
+	return type === void 0 ? void 0 : { type };
+}
+//#endregion
+//#region src/carousel/indicator-group.tsx
+/**
+* Renders the `div` with the carousel's dot group class.
+*/
+const Drawn$11 = withContext$3("div", "indicatorGroup");
+/**
+* Renders the dot group with the machine's props merged under the caller's.
+*
+* @param props - The props of a `div`, the dots among its children.
+* @returns The `div` element.
+*/
+function IndicatorGroup(props) {
+	const $ = c(9);
+	const { api, instant, send } = useCarousel();
+	let T0;
+	let t0;
+	if ($[0] !== api || $[1] !== instant || $[2] !== props || $[3] !== send) {
+		const keys = { onKeyDown(event) {
+			if (event.defaultPrevented) return;
+			const step = paged(event.key, event.currentTarget, api.pageSnapPoints.length - 1);
+			if (step === void 0) return;
+			event.preventDefault();
+			send({
+				...step,
+				instant,
+				src: "indicator"
+			});
+		} };
+		T0 = Drawn$11;
+		t0 = mergeProps(api.getIndicatorGroupProps(), keys, props);
+		$[0] = api;
+		$[1] = instant;
+		$[2] = props;
+		$[3] = send;
+		$[4] = T0;
+		$[5] = t0;
+	} else {
+		T0 = $[4];
+		t0 = $[5];
+	}
+	let t1;
+	if ($[6] !== T0 || $[7] !== t0) {
+		t1 = /* @__PURE__ */ jsx(T0, { ...t0 });
+		$[6] = T0;
+		$[7] = t0;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
+}
+//#endregion
+//#region src/carousel/indicator.tsx
+/**
+* Renders the `button` with the carousel's dot class.
+*/
+const Drawn$10 = withContext$3("button", "indicator");
+/**
+* Renders the dot with the machine's props merged under the caller's.
+*
+* @param props - The page, the name, the read-only flag and the props of a `button`.
+* @returns The `button` element.
+*/
+function Indicator(t0) {
+	const $ = c(6);
+	const { index, label, readOnly, ...rest } = t0;
+	const { api, instant, send } = useCarousel();
+	const picked = {
+		"aria-disabled": index === api.page || void 0,
+		onClick(event) {
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			if (readOnly !== true) send({
+				index,
+				instant,
+				src: "indicator",
+				type: "PAGE.SET"
+			});
+		}
+	};
+	const T0 = Drawn$10;
+	const t1 = mergeProps(api.getIndicatorProps({
+		index,
+		readOnly
+	}), picked, rest);
+	let t2;
+	if ($[0] !== label) {
+		t2 = omitUndefined({ "aria-label": label });
+		$[0] = label;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== T0 || $[3] !== t1 || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2
+		});
+		$[2] = T0;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+//#endregion
+//#region src/carousel/indicators.tsx
+/**
+* Renders the dots.
+*
+* @param props - The function that returns a dot's accessible name.
+* @returns A dot per page, in order.
+*/
+function Indicators(t0) {
+	const $ = c(7);
+	const { label } = t0;
+	const { api } = useCarousel();
+	let t1;
+	if ($[0] !== api.pageSnapPoints || $[1] !== label) {
+		let t2;
+		if ($[3] !== label) {
+			t2 = (point, index) => /* @__PURE__ */ jsx(Indicator, {
+				index,
+				label: label?.(index + 1)
+			}, point);
+			$[3] = label;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = api.pageSnapPoints.map(t2);
+		$[0] = api.pageSnapPoints;
+		$[1] = label;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+//#region src/carousel/item-group.tsx
+/**
+* Renders the `div` with the carousel's scroller class.
+*/
+const Drawn$9 = withContext$3("div", "itemGroup");
+/**
+* Renders the scroller with the machine's props merged under the caller's.
+*
+* @param props - The props of a `div`, the slides among its children.
+* @returns The `div` element.
+*/
+function ItemGroup(props) {
+	const $ = c(9);
+	const { api, instant, send } = useCarousel();
+	let T0;
+	let t0;
+	if ($[0] !== api || $[1] !== instant || $[2] !== props || $[3] !== send) {
+		const keys = { onKeyDown(event) {
+			if (event.target !== event.currentTarget) return;
+			const step = paged(event.key, event.currentTarget, api.pageSnapPoints.length - 1);
+			if (step === void 0) return;
+			event.preventDefault();
+			send({
+				...step,
+				instant
+			});
+		} };
+		T0 = Drawn$9;
+		t0 = mergeProps(api.getItemGroupProps(), keys, props);
+		$[0] = api;
+		$[1] = instant;
+		$[2] = props;
+		$[3] = send;
+		$[4] = T0;
+		$[5] = t0;
+	} else {
+		T0 = $[4];
+		t0 = $[5];
+	}
+	let t1;
+	if ($[6] !== T0 || $[7] !== t0) {
+		t1 = /* @__PURE__ */ jsx(T0, { ...t0 });
+		$[6] = T0;
+		$[7] = t0;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
+}
+//#endregion
+//#region src/carousel/item.tsx
+/**
+* Renders the `div` with the carousel's slide class.
+*/
+const Drawn$8 = withContext$3("div", "item");
+/**
+* Renders the slide with the machine's props merged under the caller's.
+*
+* @param props - The index, the snap edge and the props of a `div`.
+* @returns The `div` element.
+*/
+function Item(t0) {
+	const $ = c(7);
+	const { index, snapAlign, ...props } = t0;
+	const { api } = useCarousel();
+	const T0 = Drawn$8;
+	const t1 = mergeProps(api.getItemProps({
+		index,
+		snapAlign
+	}), props);
+	let t2;
+	if ($[0] !== api || $[1] !== index) {
+		t2 = !api.isInView(index) || void 0;
+		$[0] = api;
+		$[1] = index;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== T0 || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			inert: t2
+		});
+		$[3] = T0;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/carousel/stepping.ts
+/**
+* Returns a trigger's props with `aria-disabled` in place of `disabled` at an end, a press that
+* sends the page event, and the look for where the controls go.
+*
+* @param machine - Where the controls go, whether pages move at once, and the machine's `send`.
+* @param props - The props the machine gives the trigger.
+* @param ended - Whether the trigger has no page to move to.
+* @param type - The page event a press sends.
+* @returns The trigger's props.
+*/
+function stepping(machine, props, ended, type) {
+	const { controls, instant, send } = machine;
+	return mergeProps({
+		...props,
+		disabled: void 0
+	}, {
+		"aria-disabled": ended || void 0,
+		/**
+		* Sends the page event unless the caller cancelled the press or the trigger has no page to
+		* move to, and stops the machine's own press handler.
+		*/
+		onClick(event) {
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			if (!ended) send({
+				instant,
+				src: "trigger",
+				type
+			});
+		},
+		variant: lookOf(controls)
+	});
+}
+//#endregion
+//#region src/carousel/next-trigger.tsx
+/**
+* Renders the next trigger with the machine's props merged under the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element.
+*/
+function NextTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "Next slide" : t1;
+	const machine = useCarousel();
+	const { api } = machine;
+	const props = stepping(machine, api.getNextTriggerProps(), !api.canScrollNext, "PAGE.NEXT");
+	const T0 = NextButton;
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== T0 || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = T0;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/carousel/prev-trigger.tsx
+/**
+* Renders the previous trigger with the machine's props merged under the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element.
+*/
+function PrevTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "Previous slide" : t1;
+	const machine = useCarousel();
+	const { api } = machine;
+	const props = stepping(machine, api.getPrevTriggerProps(), !api.canScrollPrev, "PAGE.PREV");
+	const T0 = PrevButton;
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== T0 || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = T0;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/carousel/progress-text.tsx
+/**
+* Renders the `span` with the carousel's progress text class.
+*/
+const Drawn$7 = withContext$3("span", "progressText");
+/**
+* Renders the progress text.
+*
+* @param props - The words and the props of a `span`.
+* @returns The `span` element.
+*/
+function ProgressText(t0) {
+	const $ = c(4);
+	const { text, ...rest } = t0;
+	const { api } = useCarousel();
+	const details = {
+		page: api.page + 1,
+		totalPages: api.pageSnapPoints.length
+	};
+	const T0 = Drawn$7;
+	const t1 = mergeProps(api.getProgressTextProps(), rest);
+	const t2 = text?.(details) ?? api.getProgressText();
+	let t3;
+	if ($[0] !== T0 || $[1] !== t1 || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/carousel/rotation.ts
+/**
+* Decides whether a carousel rotates, from the root's `autoplay`, the reader's motion setting, the
+* rotation control, the pointer and the keyboard focus.
+*
+* @remarks
+*   The rules follow the APG carousel pattern. The reader's choice through the rotation control
+*   decides, and until the reader makes one the root's `autoplay` decides, unless the reader asks
+*   the system for reduced motion. Keyboard focus that enters the carousel from outside counts as a
+*   choice to stop, so the rotation does not restart until the reader starts it again. A pointer
+*   over the carousel pauses the rotation until it leaves, unless the reader started the rotation
+*   with the control. Focus that a pointer press moves into the carousel does not count, because
+*   the pointer already pauses the rotation.
+*/
+/**
+* Returns whether the carousel rotates and the handlers that pause and stop it.
+*
+* @param requested - The root's `autoplay`.
+* @param reduced - Whether the reader asks the system for reduced motion.
+* @returns The machine's setting, the handlers and the rotation control's state and press.
+*/
+function useRotation(requested, reduced) {
+	const $ = c(4);
+	const [choice, setChoice] = useState();
+	const [hovered, setHovered] = useState(false);
+	const wanted = choice ?? (Boolean(requested) && !reduced);
+	const t0 = wanted && (choice === true || !hovered) && (typeof requested === "object" ? requested : true);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			onFocus(event) {
+				if (event.currentTarget.contains(event.relatedTarget)) return;
+				if (event.target.matches(":focus-visible")) setChoice(false);
+			},
+			onPointerEnter() {
+				setHovered(true);
+			},
+			onPointerLeave() {
+				setHovered(false);
+			}
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== t0 || $[2] !== wanted) {
+		t2 = {
+			autoplay: t0,
+			handlers: t1,
+			toggle() {
+				setChoice(!wanted);
+			},
+			wanted
+		};
+		$[1] = t0;
+		$[2] = wanted;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+//#endregion
+//#region src/reduced-motion.ts
+/**
+* Reads whether the reader asks the system for reduced motion, correct from the first render.
+*
+* @remarks
+*   The read goes through `useSyncExternalStore`, so a client render reads the media query before
+*   the first paint, and a clip or a rotation that must not start by itself never mounts started. A
+*   server render has no window and reports reduced motion, so its markup starts nothing. A change
+*   of the setting renders again.
+*/
+/**
+* Media query a reader matches by asking the system for reduced motion.
+*/
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+/**
+* Listens for a change of the setting.
+*
+* @param change - The callback React runs to read the setting again.
+* @returns The function that stops listening.
+*/
+function subscribe(change) {
+	const query = globalThis.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", change);
+	return () => {
+		query.removeEventListener("change", change);
+	};
+}
+/**
+* Returns whether the query matches in the window.
+*/
+function clientSnapshot() {
+	return globalThis.matchMedia(REDUCED_MOTION).matches;
+}
+/**
+* Returns true, because a server cannot read the setting and motion must not start unasked.
+*/
+function serverSnapshot() {
+	return true;
+}
+/**
+* Returns whether the reader asks for reduced motion.
+*
+* @returns `true` while `prefers-reduced-motion: reduce` matches, and on the server.
+*/
+function useReducedMotion() {
+	return useSyncExternalStore(subscribe, clientSnapshot, serverSnapshot);
+}
+//#endregion
+//#region src/carousel/root.tsx
+/**
+* Renders the `div` that provides the recipe's variants.
+*/
+const Framed$1 = withProvider$1("div", "root");
+/**
+* Renders the root and provides the running machine, the rotation and the motion setting to the
+* parts.
+*
+* @param props - The machine's options, the recipe's variants and the props of a `div`.
+* @returns The `div` element inside the provider.
+*/
+function Root$1(t0) {
+	const $ = c(14);
+	const { autoplay, controls: t1, loop, spacing, ...props } = t0;
+	const controls = t1 === void 0 ? "outside" : t1;
+	const [options, rest] = splitCarouselProps(props);
+	const instant = useReducedMotion();
+	const rotation = useRotation(autoplay, instant);
+	const [api, send] = useCarouselMachine({
+		...options,
+		autoplay: rotation.autoplay,
+		loop: loop ?? Boolean(autoplay),
+		spacing: spacing ?? `var(--carousel-gap)`
+	});
+	const T0 = MachineProvider;
+	let t2;
+	if ($[0] !== api || $[1] !== controls || $[2] !== instant || $[3] !== rotation || $[4] !== send) {
+		t2 = {
+			api,
+			controls,
+			instant,
+			rotation,
+			send
+		};
+		$[0] = api;
+		$[1] = controls;
+		$[2] = instant;
+		$[3] = rotation;
+		$[4] = send;
+		$[5] = t2;
+	} else t2 = $[5];
+	const T1 = Framed$1;
+	const t3 = mergeProps(api.getRootProps(), rotation.handlers, rest);
+	let t4;
+	if ($[6] !== T1 || $[7] !== controls || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T1, {
+			...t3,
+			controls
+		});
+		$[6] = T1;
+		$[7] = controls;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== T0 || $[11] !== t2 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t2,
+			children: t4
+		});
+		$[10] = T0;
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+//#endregion
+//#region src/carousel/index.ts
+var carousel_exports = /* @__PURE__ */ __exportAll({
+	AutoplayIndicator: () => AutoplayIndicator,
+	AutoplayTrigger: () => AutoplayTrigger,
+	Control: () => Control,
+	Indicator: () => Indicator,
+	IndicatorGroup: () => IndicatorGroup,
+	Indicators: () => Indicators,
+	Item: () => Item,
+	ItemGroup: () => ItemGroup,
+	NextTrigger: () => NextTrigger,
+	PrevTrigger: () => PrevTrigger,
+	ProgressText: () => ProgressText,
+	Root: () => Root$1
+});
+//#endregion
+//#region src/iframe/context.ts
+/**
+* Binds the iframe recipe to the element that renders it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factory the iframe component is built from.
+*/
+const { withContext: withContext$2 } = createRecipeContext(recipe$4);
+//#endregion
+//#region src/iframe/iframe.tsx
+/**
+* Renders the `iframe` element with the recipe's class.
+*/
+const Drawn$6 = withContext$2("iframe");
+/**
+* Renders the frame with the sandbox, the referrer policy and the lazy loading it defaults to.
+*
+* @param props - The props of an `iframe` element, with `title` required.
+* @returns The `iframe` element.
+*/
+function Iframe(t0) {
+	const $ = c(10);
+	let rest;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({loading: t1, referrerPolicy: t2, sandbox: t3, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		rest = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	const loading = t1 === void 0 ? "lazy" : t1;
+	const referrerPolicy = t2 === void 0 ? "no-referrer" : t2;
+	const sandbox = t3 === void 0 ? "" : t3;
+	let t4;
+	if ($[5] !== loading || $[6] !== referrerPolicy || $[7] !== rest || $[8] !== sandbox) {
+		t4 = /* @__PURE__ */ jsx(Drawn$6, {
+			...rest,
+			loading,
+			referrerPolicy,
+			sandbox
+		});
+		$[5] = loading;
+		$[6] = referrerPolicy;
+		$[7] = rest;
+		$[8] = sandbox;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+//#endregion
+//#region src/image-cropper/context.ts
+/**
+* Binds the image cropper recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Binds the recipe once. The root receives the variants and every other part reads them.
+*/
+const { withContext: withContext$1, withProvider } = createSlotRecipeContext(recipe$5);
+//#endregion
+//#region src/image-cropper/machine.ts
+/**
+* Starts the image cropper machine in application code and provides its api to the parts.
+*
+* @remarks
+*   An application calls `useImageCropper` and passes the api to `ImageCropper.Root`, so a control
+*   outside the root, such as a zoom slider or a save button, reads the crop and calls
+*   `getCroppedImage`. The machine's `translations` are left out: the parts take their words as
+*   props.
+*/
+/**
+* Creates the context through which the root provides the api to its parts.
+*
+* @remarks
+*   `useImageCropperApi` throws when no `ImageCropper.Root` is mounted above the calling part.
+*/
+const [ApiProvider, useImageCropperApi] = createRequiredContext("ImageCropper");
+/**
+* Starts the image cropper machine and returns its connected api.
+*
+* @param options - The machine settings. A generated id is used when `id` is absent.
+* @returns The api the root provides to its parts.
+*/
+function useImageCropper(t0) {
+	const $ = c(9);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	const generated = useId();
+	let t2;
+	if ($[2] !== options) {
+		t2 = omitUndefined(options);
+		$[2] = options;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = options.id ?? generated;
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3) {
+		t4 = {
+			...t2,
+			id: t3
+		};
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	const service = useMachine(imageCropper.machine, t4);
+	let t5;
+	if ($[7] !== service) {
+		t5 = imageCropper.connect(service, normalizeProps);
+		$[7] = service;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+//#endregion
+//#region src/image-cropper/grid.tsx
+/**
+* Renders the `div` with the image cropper's grid class.
+*/
+const Drawn$5 = withContext$1("div", "grid");
+/**
+* Renders the grid with the machine's grid props merged over the caller's.
+*
+* @param props - The axis and the props of a `div`.
+* @returns The `div` element.
+*/
+function Grid(t0) {
+	const $ = c(3);
+	const { axis, ...props } = t0;
+	const api = useImageCropperApi();
+	const T0 = Drawn$5;
+	const t1 = mergeProps(api.getGridProps({ axis }), props);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/image-cropper/handle.tsx
+/**
+* Renders the `div` with the image cropper's handle class.
+*/
+const Drawn$4 = withContext$1("div", "handle");
+/**
+* Renders the handle with the machine's handle props merged over the caller's.
+*
+* @param props - The position and the props of a `div`.
+* @returns The `div` element.
+*/
+function Handle(t0) {
+	const $ = c(3);
+	const { position, ...props } = t0;
+	const api = useImageCropperApi();
+	const T0 = Drawn$4;
+	const t1 = mergeProps(api.getHandleProps({ position }), props);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/image-cropper/image.tsx
+/**
+* Renders the `img` with the image cropper's image class.
+*/
+const Drawn$3 = withContext$1("img", "image");
+/**
+* Renders the picture with the machine's image props merged over the caller's.
+*
+* @param props - The props of an `img`, the source among them.
+* @returns The `img` element.
+*/
+function Image(props) {
+	const $ = c(5);
+	const api = useImageCropperApi();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getImageProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn$3, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/image-cropper/rounded.ts
+/**
+* Returns the crop with each value rounded to a whole pixel.
+*
+* @param crop - The crop the machine reports.
+* @returns The rounded crop.
+*/
+function rounded(crop) {
+	return {
+		height: Math.round(crop.height),
+		width: Math.round(crop.width),
+		x: Math.round(crop.x),
+		y: Math.round(crop.y)
+	};
+}
+//#endregion
+//#region src/image-cropper/root.tsx
+/**
+* Renders the `div` that provides the recipe's variants.
+*/
+const Framed = withProvider("div", "root");
+/**
+* Renders the root with the machine's root props, and provides the api to the parts.
+*
+* @param props - The api, the description's words, the recipe's variants and the props of a
+*   `div`.
+* @returns The `div` element inside the api provider.
+*/
+function Root(t0) {
+	const $ = c(20);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { cropper, description, loadingDescription, ...props } = t0;
+		const { naturalSize, rotation, zoom } = cropper;
+		let t3;
+		if ($[5] !== cropper.crop || $[6] !== description || $[7] !== loadingDescription || $[8] !== naturalSize.height || $[9] !== naturalSize.width || $[10] !== rotation || $[11] !== zoom) {
+			t3 = naturalSize.width > 0 && naturalSize.height > 0 ? description?.({
+				crop: rounded(cropper.crop),
+				rotation,
+				zoom
+			}) : loadingDescription;
+			$[5] = cropper.crop;
+			$[6] = description;
+			$[7] = loadingDescription;
+			$[8] = naturalSize.height;
+			$[9] = naturalSize.width;
+			$[10] = rotation;
+			$[11] = zoom;
+			$[12] = t3;
+		} else t3 = $[12];
+		const described = t3;
+		T1 = ApiProvider;
+		t2 = cropper;
+		T0 = Framed;
+		t1 = mergeProps(cropper.getRootProps(), { "aria-description": described }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[13] !== T0 || $[14] !== t1) {
+		t3 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[13] = T0;
+		$[14] = t1;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== T1 || $[17] !== t2 || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T1, {
+			value: t2,
+			children: t3
+		});
+		$[16] = T1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
+}
+//#endregion
+//#region src/image-cropper/selection.tsx
+/**
+* Renders the `div` with the image cropper's selection class.
+*/
+const Drawn$2 = withContext$1("div", "selection");
+/**
+* Renders the selection with the machine's selection props, the value text and the caller's props.
+*
+* @param props - The value text's words and the props of a `div`, the handles and grid among its
+*   children.
+* @returns The `div` element.
+*/
+function Selection(t0) {
+	const $ = c(3);
+	const { valueText, ...props } = t0;
+	const api = useImageCropperApi();
+	const T0 = Drawn$2;
+	const t1 = mergeProps(api.getSelectionProps(), { "aria-valuetext": valueText?.(rounded(api.crop)) }, props);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/image-cropper/viewport.tsx
+/**
+* Renders the `div` with the image cropper's viewport class.
+*/
+const Drawn$1 = withContext$1("div", "viewport");
+/**
+* Renders the viewport with the machine's viewport props merged over the caller's.
+*
+* @param props - The props of a `div`.
+* @returns The `div` element.
+*/
+function Viewport(props) {
+	const $ = c(5);
+	const api = useImageCropperApi();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getViewportProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn$1, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/image-cropper/index.ts
+var image_cropper_exports = /* @__PURE__ */ __exportAll({
+	Grid: () => Grid,
+	Handle: () => Handle,
+	Image: () => Image,
+	Root: () => Root,
+	Selection: () => Selection,
+	Viewport: () => Viewport,
+	handles: () => handles,
+	useImageCropper: () => useImageCropper
+});
+//#endregion
+//#region src/video/context.ts
+/**
+* Binds the video recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
+*/
+/**
+* Creates the video recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every video below it. The package exports it as
+*   `VideoPropsProvider`.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe$6);
+//#endregion
+//#region src/video/video.tsx
+/**
+* Renders a `video` element with the classes of the video recipe.
+*/
+const Drawn = withContext("video");
+/**
+* Renders the video, starting it by itself only while the reader allows motion.
+*
+* @param props - The recipe's variants and the props of a `video` element.
+* @returns The `video` element.
+*/
+function Video(t0) {
+	const $ = c(12);
+	let controls;
+	let playsInline;
+	let rest;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({autoPlay: t1, controls, muted: t2, playsInline, ...rest} = t0);
+		$[0] = t0;
+		$[1] = controls;
+		$[2] = playsInline;
+		$[3] = rest;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		controls = $[1];
+		playsInline = $[2];
+		rest = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const autoPlay = t1 === void 0 ? false : t1;
+	const muted = t2 === void 0 ? false : t2;
+	const reduced = useReducedMotion();
+	const plays = autoPlay && !reduced;
+	const t3 = controls ?? autoPlay;
+	const t4 = plays || muted;
+	const t5 = playsInline ?? plays;
+	let t6;
+	if ($[6] !== plays || $[7] !== rest || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Drawn, {
+			...rest,
+			autoPlay: plays,
+			controls: t3,
+			muted: t4,
+			playsInline: t5
+		});
+		$[6] = plays;
+		$[7] = rest;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	return t6;
+}
+//#endregion
+export { Audio, avatar_exports as Avatar, carousel_exports as Carousel, Iframe, image_cropper_exports as ImageCropper, Video, PropsProvider as VideoPropsProvider };