@stealthscale/component-media 0.1.0 → 0.2.2

package/dist/index.js

@@ -1,1890 +1,2 @@
-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
+import { T as avatar_exports, f as Iframe, i as image_cropper_exports, j as Audio, n as PropsProvider, p as carousel_exports, t as Video } from "./shared-DH0DrBx7.js";
 export { Audio, avatar_exports as Avatar, carousel_exports as Carousel, Iframe, image_cropper_exports as ImageCropper, Video, PropsProvider as VideoPropsProvider };