@stealthscale/component-feedback 0.2.2 → 0.2.3

package/dist/shared-Xc-n0bn7.js

@@ -0,0 +1,1826 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as recipe$4, c as TINT, d as recipe$1, f as recipe, i as recipe$5, l as recipe$3, n as recipe$7, o as MARKER, r as recipe$6, s as SHARE, t as recipe$8, u as recipe$2 } from "./recipes-CX1gSsN7.js";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import * as progress from "@zag-js/progress";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { clampValue, createSplitProps, getValuePercent } from "@zag-js/utils";
+import { createRequiredContext, omitUndefined, splitEnumerable, useSafeLayoutEffect } from "@stealthscale/hooks";
+import * as toast from "@zag-js/toast";
+import { createStore as createToaster } from "@zag-js/toast";
+//#region src/alert/context.ts
+/**
+* Binds the alert slot recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
+*/
+/**
+* Factories for the parts. The root resolves the variants once and the other parts read them.
+*/
+const { withContext: withContext$8, withProvider: withProvider$5 } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/alert/aside.ts
+/**
+* Renders a flex div at the inline end, sized to its content.
+*/
+const Aside = withContext$8("div", "aside");
+//#endregion
+//#region src/alert/close-trigger.tsx
+/**
+* Button with the close trigger slot classes and `type="button"`.
+*/
+const Styled = withContext$8("button", "closeTrigger", { defaultProps: { type: "button" } });
+/**
+* Renders a square button in the alert's ink, named by `label`.
+*/
+function CloseTrigger$1(t0) {
+	const $ = c(6);
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({label: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = t1;
+	} else {
+		rest = $[1];
+		t1 = $[2];
+	}
+	const label = t1 === void 0 ? "Dismiss" : t1;
+	let t2;
+	if ($[3] !== label || $[4] !== rest) {
+		t2 = /* @__PURE__ */ jsx(Styled, {
+			"aria-label": label,
+			...rest
+		});
+		$[3] = label;
+		$[4] = rest;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/alert/content.ts
+/**
+* Renders the flex container of the title and the description.
+*/
+const Content$3 = withContext$8("div", "content");
+//#endregion
+//#region src/alert/description.ts
+/**
+* Renders a span in the root's ink.
+*/
+const Description$2 = withContext$8("span", "description");
+//#endregion
+//#region src/alert/indicator.ts
+/**
+* Renders a div on the icon scale, hidden from the accessibility tree by default.
+*/
+const Indicator$3 = withContext$8("div", "indicator", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/alert/live.ts
+/**
+* Every announcement level, quietest first.
+*/
+const LIVES = [
+	"off",
+	"polite",
+	"assertive"
+];
+/**
+* Maps each announcement level to the attributes the root sets.
+*
+* @remarks
+*   `role="alert"` implies `aria-live="assertive"` and `role="status"` implies
+*   `aria-live="polite"`, so the map sets the role only. `off` sets no attribute, because a live
+*   region announces its content on mount, and a page of static notices would read them all.
+*/
+const ROLES = {
+	assertive: { role: "alert" },
+	off: {},
+	polite: { role: "status" }
+};
+//#endregion
+//#region src/alert/root.tsx
+/**
+* Div with the root slot classes that provides the variants.
+*/
+const Framed$1 = withProvider$5("div", "root");
+/**
+* Renders a div with the role of its announcement level.
+*
+* @remarks
+*   The role comes before the caller's props, so a `role` prop overrides it.
+*/
+function Root$6(t0) {
+	const $ = c(6);
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({live: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = t1;
+	} else {
+		rest = $[1];
+		t1 = $[2];
+	}
+	const t2 = ROLES[t1 === void 0 ? "polite" : t1];
+	let t3;
+	if ($[3] !== rest || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Framed$1, {
+			...t2,
+			...rest
+		});
+		$[3] = rest;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+//#endregion
+//#region src/alert/title.ts
+/**
+* Renders a span at medium weight.
+*/
+const Title$2 = withContext$8("span", "title");
+//#endregion
+//#region src/alert/index.ts
+var alert_exports = /* @__PURE__ */ __exportAll({
+	Aside: () => Aside,
+	CloseTrigger: () => CloseTrigger$1,
+	Content: () => Content$3,
+	Description: () => Description$2,
+	Indicator: () => Indicator$3,
+	LIVES: () => LIVES,
+	Root: () => Root$6,
+	Title: () => Title$2
+});
+//#endregion
+//#region src/empty-state/context.ts
+/**
+* Binds the empty state slot recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
+*/
+/**
+* Factories for the parts. The root resolves the size once and the other parts read it.
+*/
+const { withContext: withContext$7, withProvider: withProvider$4 } = createSlotRecipeContext(recipe$1);
+//#endregion
+//#region src/empty-state/content.ts
+/**
+* Renders a centred flex column with the gap of the root's size.
+*/
+const Content$2 = withContext$7("div", "content");
+//#endregion
+//#region src/empty-state/description.ts
+/**
+* Renders a paragraph in the muted ink at `body.sm`, at every size of the root.
+*/
+const Description$1 = withContext$7("p", "description");
+//#endregion
+//#region src/empty-state/indicator.ts
+/**
+* Renders a div in the muted ink, hidden from the accessibility tree by default.
+*/
+const Indicator$2 = withContext$7("div", "indicator", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/empty-state/root.ts
+/**
+* Renders a div and provides the size to the parts inside it.
+*/
+const Root$5 = withProvider$4("div", "root");
+//#endregion
+//#region src/empty-state/title.ts
+/**
+* Renders a semibold heading at the text style of the root's size.
+*/
+const Title$1 = withContext$7("h2", "title");
+//#endregion
+//#region src/empty-state/index.ts
+var empty_state_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content$2,
+	Description: () => Description$1,
+	Indicator: () => Indicator$2,
+	Root: () => Root$5,
+	Title: () => Title$1
+});
+//#endregion
+//#region src/loader/context.ts
+/**
+* Binds the loader recipe to the elements that render 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 factories the loader and its overlay are built from.
+*/
+const { withContext: withContext$6, withProvider: withProvider$3 } = createSlotRecipeContext(recipe$2);
+//#endregion
+//#region src/spinner/context.ts
+/**
+* Binds the spinner 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 spinner is built from.
+*/
+const { withContext: withContext$5 } = createRecipeContext(recipe$3);
+//#endregion
+//#region src/spinner/spinner.ts
+/**
+* Renders a `span` styled by the spinner recipe.
+*/
+const Spinner = withContext$5("span");
+//#endregion
+//#region src/loader/loader.tsx
+/**
+* Renders the loader's root: an inline row with words, an inline grid over content.
+*/
+const Root$4 = withProvider$3("span", "root");
+/**
+* Renders the element that contains the spinner.
+*/
+const Indicator$1 = withContext$6("span", "indicator");
+/**
+* Renders the hidden content the spinner is centred over.
+*/
+const Content$1 = withContext$6("span", "content");
+/**
+* Renders the text screen readers read in place of the hidden content.
+*/
+const Label$2 = withContext$6("span", "label");
+/**
+* The default indicator: a spinner as tall as the surrounding text, in its ink.
+*/
+const SPINNER = /* @__PURE__ */ jsx(Spinner, { size: "inherit" });
+/**
+* Renders the spinner beside `text`, or over the hidden children, while `loading` is true.
+*/
+function Loader(t0) {
+	const $ = c(24);
+	let children;
+	let rest;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let text;
+	if ($[0] !== t0) {
+		({children, label: t1, loading: t2, placement: t3, spinner: t4, text, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = text;
+	} else {
+		children = $[1];
+		rest = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+		text = $[7];
+	}
+	const label = t1 === void 0 ? "Loading" : t1;
+	const loading = t2 === void 0 ? true : t2;
+	const placement = t3 === void 0 ? "start" : t3;
+	const spinner = t4 === void 0 ? SPINNER : t4;
+	if (!loading) return children;
+	let t5;
+	if ($[8] !== spinner) {
+		t5 = /* @__PURE__ */ jsx(Indicator$1, { children: spinner });
+		$[8] = spinner;
+		$[9] = t5;
+	} else t5 = $[9];
+	const indicator = t5;
+	if (text !== void 0) {
+		const t6 = placement === "start" ? indicator : null;
+		const t7 = placement === "end" ? indicator : null;
+		let t8;
+		if ($[10] !== rest || $[11] !== t6 || $[12] !== t7 || $[13] !== text) {
+			t8 = /* @__PURE__ */ jsxs(Root$4, {
+				...rest,
+				children: [
+					t6,
+					text,
+					t7
+				]
+			});
+			$[10] = rest;
+			$[11] = t6;
+			$[12] = t7;
+			$[13] = text;
+			$[14] = t8;
+		} else t8 = $[14];
+		return t8;
+	}
+	let t6;
+	if ($[15] !== children) {
+		t6 = /* @__PURE__ */ jsx(Content$1, { children });
+		$[15] = children;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== label) {
+		t7 = /* @__PURE__ */ jsx(Label$2, { children: label });
+		$[17] = label;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== indicator || $[20] !== rest || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root$4, {
+			...rest,
+			children: [
+				t6,
+				indicator,
+				t7
+			]
+		});
+		$[19] = indicator;
+		$[20] = rest;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
+}
+/**
+* Renders the overlay `div`, veiled by default.
+*/
+const LoaderOverlay = withProvider$3("div", "overlay");
+//#endregion
+//#region src/progress/role.ts
+/**
+* Provides the role the track takes: the progress bar's, or the meter's inside `Meter.Root`.
+*
+* @remarks
+*   A progress bar reports work under way and a meter reports a measurement, and a screen reader
+*   names the two apart. They share every part, so the root states the role and the track reads it.
+*/
+/**
+* Context with the track's role: `meter` inside `Meter.Root`, and `progressbar` elsewhere.
+*/
+const RoleContext = createContext("progressbar");
+//#endregion
+//#region src/progress/context.ts
+/**
+* Binds the progress recipe to the elements that render 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 factories the progress parts are built from.
+*/
+const { withContext: withContext$4, withProvider: withProvider$2 } = createSlotRecipeContext(recipe$4);
+//#endregion
+//#region src/progress/machine.ts
+/**
+* Connects the Zag progress machine and provides its API to the parts.
+*
+* @remarks
+*   A `null` value is a value the machine does not know. The track then leaves out `aria-valuenow`,
+*   and the range sets `data-state="indeterminate"`. The machine formats the value with
+*   `Intl.NumberFormat` in `locale`, as a percentage unless `formatOptions` states otherwise.
+*/
+/**
+* Context through which the root provides the connected API to its parts.
+*
+* @remarks
+*   `useProgress` throws when no `Progress.Root` is mounted above the calling part.
+*/
+const [ApiProvider$1, useProgress] = createRequiredContext("Progress");
+/**
+* Starts the progress machine and returns its connected API and the label's ID.
+*
+* @remarks
+*   The label's ID is fixed here and passed to the machine in `ids`, so the track can name the
+*   element the machine writes the ID on. A caller's `ids.label` replaces the generated ID.
+* @param options - Machine settings split from the root's props. A generated ID is used when `id`
+*   is absent.
+*/
+function useProgressMachine(options) {
+	const $ = c(14);
+	const generated = useId();
+	const id = options.id ?? generated;
+	const labelId = options.ids?.label ?? `progress-${id}-label`;
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== labelId || $[3] !== options.ids) {
+		t1 = {
+			...options.ids,
+			label: labelId
+		};
+		$[2] = labelId;
+		$[3] = options.ids;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== id || $[6] !== t0 || $[7] !== t1) {
+		t2 = {
+			...t0,
+			id,
+			ids: t1
+		};
+		$[5] = id;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	const service = useMachine(progress.machine, t2);
+	let t3;
+	if ($[9] !== service) {
+		t3 = progress.connect(service, normalizeProps);
+		$[9] = service;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== labelId || $[12] !== t3) {
+		t4 = {
+			api: t3,
+			labelId
+		};
+		$[11] = labelId;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+/**
+* Splits the root's props into machine settings and element props.
+*
+* @remarks
+*   The key list is `progress.props` without `orientation` and `translations`, so it follows the
+*   installed machine version. The machine's own splitter types `id` as required, and the root
+*   generates the ID after splitting, so the splitter is rebuilt over `ProgressOptions`.
+*/
+const splitProgressProps = splitEnumerable(createSplitProps(progress.props.filter((key) => key !== "orientation" && key !== "translations")));
+//#endregion
+//#region src/progress/state.ts
+/**
+* Provides whether a label renders in the bar, so the track is named by it only while it exists.
+*
+* @remarks
+*   The machine gives the track the value as its `aria-label` and writes no `aria-labelledby`. A
+*   reference to a label that is not rendered is an invalid ID reference, so the label reports
+*   itself when it mounts and the track points at it from then on.
+*/
+/**
+* Context through which the root provides the label's state to the label and the track.
+*
+* @remarks
+*   `useLabelling` throws when no `Progress.Root` is mounted above the calling part.
+*/
+const [LabellingProvider, useLabelling] = createRequiredContext("Progress");
+//#endregion
+//#region src/progress/root.tsx
+/**
+* Renders the bar's grid and runs the machine that tracks its value.
+*
+* @remarks
+*   The root is a `div` without a role. The track inside it is the progress bar. `value` sets the
+*   value between `min` and `max`, 0 and 100 by default, and `null` renders a bar whose value is
+*   not known. Without `value` or `defaultValue` the machine starts halfway.
+*/
+/**
+* Renders the root `div` and provides the variants to the parts.
+*/
+const Gridded$1 = withProvider$2("div", "root");
+/**
+* Renders the bar and provides the machine's API and the label's state to its parts.
+*
+* @param props - The machine settings, the recipe's variants and the `div` props.
+* @returns The `div` element.
+*/
+function Root$3(props) {
+	const $ = c(16);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitProgressProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, rest] = t0;
+	const { api, labelId } = useProgressMachine(options);
+	const [labelled, setLabelled] = useState(false);
+	let t1;
+	if ($[2] !== labelId || $[3] !== labelled) {
+		t1 = {
+			id: labelId,
+			labelled,
+			setLabelled
+		};
+		$[2] = labelId;
+		$[3] = labelled;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== api) {
+		t2 = api.getRootProps();
+		$[5] = api;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== rest || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Gridded$1, {
+			...rest,
+			...t2
+		});
+		$[7] = rest;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t1 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(LabellingProvider, {
+			value: t1,
+			children: t3
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== api || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ApiProvider$1, {
+			value: api,
+			children: t4
+		});
+		$[13] = api;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/meter/root.tsx
+/**
+* Renders the progress bar's root inside the meter's role.
+*
+* @param props - The value, its range and format, the recipe's variants and the props of a `div`.
+* @returns The root `div` inside the role's provider.
+*/
+function Root$2(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(RoleContext, {
+			value: "meter",
+			children: /* @__PURE__ */ jsx(Root$3, { ...props })
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+//#region src/progress/label.tsx
+/**
+* Renders the label `span`.
+*/
+const Named$1 = withContext$4("span", "label");
+/**
+* Renders the label with the machine's ID.
+*
+* @param props - The `span` element's props.
+* @returns The `span` element.
+*/
+function Label$1(props) {
+	const $ = c(8);
+	const api = useProgress();
+	const { setLabelled } = useLabelling();
+	let t0;
+	let t1;
+	if ($[0] !== setLabelled) {
+		t0 = () => {
+			setLabelled(true);
+			return () => {
+				setLabelled(false);
+			};
+		};
+		t1 = [setLabelled];
+		$[0] = setLabelled;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useSafeLayoutEffect(t0, t1);
+	let t2;
+	if ($[3] !== api || $[4] !== props) {
+		t2 = mergeProps(api.getLabelProps(), props);
+		$[3] = api;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Named$1, { ...t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+//#region src/progress/marker.tsx
+/**
+* Renders the marker `div`.
+*/
+const Marked = withContext$4("div", "marker");
+/**
+* Renders the marker at its value's share of the range.
+*
+* @param props - The value and the props of a `div`.
+* @returns The `div` element.
+*/
+function Marker(t0) {
+	const $ = c(16);
+	let props;
+	let style;
+	let value;
+	if ($[0] !== t0) {
+		({style, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+		$[3] = value;
+	} else {
+		props = $[1];
+		style = $[2];
+		value = $[3];
+	}
+	const { max, min } = useProgress();
+	let t1;
+	if ($[4] !== max || $[5] !== min || $[6] !== value) {
+		t1 = getValuePercent(clampValue(value, min, max), min, max);
+		$[4] = max;
+		$[5] = min;
+		$[6] = value;
+		$[7] = t1;
+	} else t1 = $[7];
+	const share = t1 * 100;
+	const t2 = `${String(share)}%`;
+	let t3;
+	if ($[8] !== t2) {
+		t3 = { [MARKER]: t2 };
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	const placed = t3;
+	let t4;
+	if ($[10] !== placed || $[11] !== style) {
+		t4 = {
+			...placed,
+			...style
+		};
+		$[10] = placed;
+		$[11] = style;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== props || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Marked, {
+			"aria-hidden": true,
+			...props,
+			style: t4
+		});
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/progress/range.tsx
+/**
+* Renders the range `div`.
+*/
+const Filled$1 = withContext$4("div", "range");
+/**
+* Renders the range with the machine's width and state.
+*
+* @param props - The `div` element's props.
+* @returns The `div` element.
+*/
+function Range$1(props) {
+	const $ = c(5);
+	const api = useProgress();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getRangeProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Filled$1, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/progress/segment.tsx
+/**
+* Renders the segment `span`.
+*/
+const Filled = withContext$4("span", "segment");
+/**
+* Renders the segment at its value's share of the range, in its color.
+*
+* @param props - The value, the color and the props of a `span`.
+* @returns The `span` element.
+*/
+function Segment(t0) {
+	const $ = c(16);
+	let color;
+	let props;
+	let style;
+	let value;
+	if ($[0] !== t0) {
+		({color, style, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = color;
+		$[2] = props;
+		$[3] = style;
+		$[4] = value;
+	} else {
+		color = $[1];
+		props = $[2];
+		style = $[3];
+		value = $[4];
+	}
+	const { max, min } = useProgress();
+	const share = clampValue(value, 0, max - min) / (max - min) * 100;
+	const t1 = `${String(share)}%`;
+	let t2;
+	if ($[5] !== t1) {
+		t2 = { [SHARE]: t1 };
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const sized = t2;
+	let t3;
+	if ($[7] !== color) {
+		t3 = { [TINT]: color };
+		$[7] = color;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== sized || $[10] !== style) {
+		t4 = {
+			...sized,
+			...style
+		};
+		$[9] = sized;
+		$[10] = style;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== props || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Filled, {
+			...props,
+			...t3,
+			style: t4
+		});
+		$[12] = props;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/progress/track.tsx
+/**
+* Renders the track, which is the progress bar or the meter a screen reader reports.
+*
+* @remarks
+*   The machine writes the value range on the track and the `progressbar` role, which the track
+*   replaces with `meter` inside `Meter.Root`. A rendered label names the track through
+*   `aria-labelledby`. Without one, pass `aria-label`. The track states the formatted value as
+*   `aria-valuetext` while the value is known, so a screen reader reads `62%` or a count in the
+*   caller's units rather than the raw number. A caller replaces it with words through
+*   `aria-valuetext`, such as a password's strength or a target.
+*/
+/**
+* Renders the track `div`.
+*/
+const Tracked = withContext$4("div", "track");
+/**
+* Renders the track in its root's role, named by the label once it renders.
+*
+* @param props - The `div` element's props.
+* @returns The `div` element.
+*/
+function Track$1(props) {
+	const $ = c(8);
+	const api = useProgress();
+	const role = use(RoleContext);
+	const { id, labelled } = useLabelling();
+	let t0;
+	if ($[0] !== api || $[1] !== id || $[2] !== labelled || $[3] !== props || $[4] !== role) {
+		t0 = mergeProps(api.getTrackProps(), {
+			"aria-labelledby": labelled ? id : void 0,
+			"aria-valuetext": api.indeterminate ? void 0 : api.valueAsString,
+			role
+		}, props);
+		$[0] = api;
+		$[1] = id;
+		$[2] = labelled;
+		$[3] = props;
+		$[4] = role;
+		$[5] = t0;
+	} else t0 = $[5];
+	let t1;
+	if ($[6] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tracked, { ...t0 });
+		$[6] = t0;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+//#endregion
+//#region src/progress/value-text.tsx
+/**
+* Renders the value `span`.
+*/
+const Valued$1 = withContext$4("span", "valueText");
+/**
+* Renders the children, or the formatted value.
+*
+* @param props - The `span` element's props.
+* @returns The `span` element.
+*/
+function ValueText$1(t0) {
+	const $ = c(4);
+	const { children, ...rest } = t0;
+	const api = useProgress();
+	const T0 = Valued$1;
+	const t1 = mergeProps(api.getValueTextProps(), { "aria-live": "off" }, rest);
+	const t2 = children ?? (api.indeterminate ? null : api.valueAsString);
+	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/meter/index.ts
+var meter_exports = /* @__PURE__ */ __exportAll({
+	Label: () => Label$1,
+	Marker: () => Marker,
+	Range: () => Range$1,
+	Root: () => Root$2,
+	Segment: () => Segment,
+	Track: () => Track$1,
+	ValueText: () => ValueText$1
+});
+//#endregion
+//#region src/progress-circle/context.ts
+/**
+* Binds the progress circle recipe to React.
+*
+* @remarks
+*   The binding is a separate module because an application's compiler reads `recipe.ts` at build
+*   time and the binding needs the runtime. The behaviour is the progress bar's `machine.ts`.
+*/
+/**
+* Binds the recipe once. The root receives the variants and every other part reads them.
+*/
+const { withContext: withContext$3, withProvider: withProvider$1 } = createSlotRecipeContext(recipe$5);
+//#endregion
+//#region src/progress-circle/circle.tsx
+/**
+* Renders the ring `svg`.
+*/
+const Ring = withContext$3("svg", "circle");
+/**
+* Renders the ring with the machine's progress bar props, named by the label once it renders.
+*
+* @param props - The `svg` element's props and its circles.
+* @returns The `svg` element.
+*/
+function Circle(props) {
+	const $ = c(7);
+	const api = useProgress();
+	const { id, labelled } = useLabelling();
+	let t0;
+	if ($[0] !== api || $[1] !== id || $[2] !== labelled || $[3] !== props) {
+		t0 = mergeProps(api.getCircleProps(), {
+			"aria-labelledby": labelled ? id : void 0,
+			"aria-valuetext": api.indeterminate ? void 0 : api.valueAsString
+		}, props);
+		$[0] = api;
+		$[1] = id;
+		$[2] = labelled;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	let t1;
+	if ($[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Ring, { ...t0 });
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+}
+//#endregion
+//#region src/progress-circle/label.tsx
+/**
+* Renders the label `span`.
+*/
+const Named = withContext$3("span", "label");
+/**
+* Renders the label with the machine's ID.
+*
+* @param props - The `span` element's props.
+* @returns The `span` element.
+*/
+function Label(props) {
+	const $ = c(8);
+	const api = useProgress();
+	const { setLabelled } = useLabelling();
+	let t0;
+	let t1;
+	if ($[0] !== setLabelled) {
+		t0 = () => {
+			setLabelled(true);
+			return () => {
+				setLabelled(false);
+			};
+		};
+		t1 = [setLabelled];
+		$[0] = setLabelled;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useSafeLayoutEffect(t0, t1);
+	let t2;
+	if ($[3] !== api || $[4] !== props) {
+		t2 = mergeProps(api.getLabelProps(), props);
+		$[3] = api;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Named, { ...t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+//#region src/progress-circle/range.tsx
+/**
+* Renders the range `circle`.
+*/
+const Arc = withContext$3("circle", "range");
+/**
+* Renders the range with the machine's geometry and state.
+*
+* @param props - The `circle` element's props.
+* @returns The `circle` element.
+*/
+function Range(props) {
+	const $ = c(5);
+	const t0 = useProgress();
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = mergeProps(t0.getCircleRangeProps(), props);
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Arc, { ...t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+//#region src/progress-circle/root.tsx
+/**
+* Renders the ring's grid and runs the machine that tracks its value.
+*
+* @remarks
+*   The root is a `div` without a role. The `svg` inside it is the progress bar. `value` sets the
+*   value between `min` and `max`, 0 and 100 by default, and `null` renders a ring whose value is
+*   not known. Without `value` or `defaultValue` the machine starts halfway. The ring runs the
+*   progress bar's machine and names itself the same way.
+*/
+/**
+* Renders the root `div` and provides the variants to the parts.
+*/
+const Gridded = withProvider$1("div", "root");
+/**
+* Renders the ring's grid and provides the machine's API and the label's state to its parts.
+*
+* @param props - The machine settings, the recipe's variants and the `div` props.
+* @returns The `div` element.
+*/
+function Root$1(props) {
+	const $ = c(16);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitProgressProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, rest] = t0;
+	const { api, labelId } = useProgressMachine(options);
+	const [labelled, setLabelled] = useState(false);
+	let t1;
+	if ($[2] !== labelId || $[3] !== labelled) {
+		t1 = {
+			id: labelId,
+			labelled,
+			setLabelled
+		};
+		$[2] = labelId;
+		$[3] = labelled;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== api) {
+		t2 = api.getRootProps();
+		$[5] = api;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== rest || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Gridded, {
+			...rest,
+			...t2
+		});
+		$[7] = rest;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t1 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(LabellingProvider, {
+			value: t1,
+			children: t3
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== api || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ApiProvider$1, {
+			value: api,
+			children: t4
+		});
+		$[13] = api;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/progress-circle/track.tsx
+/**
+* Renders the track `circle`.
+*/
+const Whole = withContext$3("circle", "track");
+/**
+* Renders the track with the machine's geometry.
+*
+* @param props - The `circle` element's props.
+* @returns The `circle` element.
+*/
+function Track(props) {
+	const $ = c(5);
+	const t0 = useProgress();
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = mergeProps(t0.getCircleTrackProps(), props);
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Whole, { ...t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+//#region src/progress-circle/value-text.tsx
+/**
+* Renders the value `span`.
+*/
+const Valued = withContext$3("span", "valueText");
+/**
+* Renders the children, or the formatted value.
+*
+* @param props - The `span` element's props.
+* @returns The `span` element.
+*/
+function ValueText(t0) {
+	const $ = c(4);
+	const { children, ...rest } = t0;
+	const api = useProgress();
+	const T0 = Valued;
+	const t1 = mergeProps(api.getValueTextProps(), { "aria-live": "off" }, rest);
+	const t2 = children ?? (api.indeterminate ? null : api.valueAsString);
+	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/progress-circle/index.ts
+var progress_circle_exports = /* @__PURE__ */ __exportAll({
+	Circle: () => Circle,
+	Label: () => Label,
+	Range: () => Range,
+	Root: () => Root$1,
+	Track: () => Track,
+	ValueText: () => ValueText
+});
+//#endregion
+//#region src/progress/index.ts
+var progress_exports = /* @__PURE__ */ __exportAll({
+	Label: () => Label$1,
+	Marker: () => Marker,
+	Range: () => Range$1,
+	Root: () => Root$3,
+	Segment: () => Segment,
+	Track: () => Track$1,
+	ValueText: () => ValueText$1
+});
+//#endregion
+//#region src/skeleton-text/context.ts
+/**
+* Binds the skeleton text recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
+*/
+/**
+* Factory for the column and the provider that sets its props for descendants.
+*/
+const { PropsProvider: PropsProvider$1, withContext: withContext$2 } = createRecipeContext(recipe$6);
+//#endregion
+//#region src/skeleton/context.ts
+/**
+* Binds the skeleton recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
+*/
+/**
+* Factory for the skeleton and the skeleton text bars, and the provider that sets their variants
+* for descendants.
+*/
+const { PropsProvider, withContext: withContext$1 } = createRecipeContext(recipe$7);
+//#endregion
+//#region src/skeleton/skeleton.ts
+/**
+* Renders a div that takes the box of the content it wraps.
+*/
+const Skeleton = withContext$1("div");
+//#endregion
+//#region src/skeleton-text/skeleton-text.tsx
+/**
+* Div with the skeleton text classes.
+*/
+const Column = withContext$2("div");
+/**
+* Renders a column of `Skeleton` bars, one per line.
+*
+* @remarks
+*   `motion` and `radius` are left out of the bar props when undefined, because an explicit
+*   `undefined` overrides the value an enclosing `SkeletonPropsProvider` sets.
+*/
+function SkeletonText(t0) {
+	const $ = c(20);
+	let motion;
+	let radius;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({lines: t1, motion, radius, ...rest} = t0);
+		$[0] = t0;
+		$[1] = motion;
+		$[2] = radius;
+		$[3] = rest;
+		$[4] = t1;
+	} else {
+		motion = $[1];
+		radius = $[2];
+		rest = $[3];
+		t1 = $[4];
+	}
+	const lines = t1 === void 0 ? 3 : t1;
+	let t2;
+	if ($[5] !== motion) {
+		t2 = motion === void 0 ? {} : { motion };
+		$[5] = motion;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== radius) {
+		t3 = radius === void 0 ? {} : { radius };
+		$[7] = radius;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = {
+			...t2,
+			...t3
+		};
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	const drawn = t4;
+	let t5;
+	if ($[12] !== drawn || $[13] !== lines) {
+		let t6;
+		if ($[15] !== drawn) {
+			t6 = (_, at) => /* @__PURE__ */ jsx(Skeleton, { ...drawn }, at);
+			$[15] = drawn;
+			$[16] = t6;
+		} else t6 = $[16];
+		t5 = Array.from({ length: Math.max(lines, 1) }, t6);
+		$[12] = drawn;
+		$[13] = lines;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[17] !== rest || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Column, {
+			...rest,
+			children: t5
+		});
+		$[17] = rest;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+//#endregion
+//#region src/toast/context.ts
+/**
+* Binds the toast's recipe to its parts.
+*
+* @remarks
+*   The binding is apart from the recipe, because a compiler reads the recipe at build time and the
+*   binding imports the runtime. It is apart from the machine, because the recipe styles a part and
+*   the machine sets its behaviour.
+*/
+/**
+* Binds the recipe once. The region provides the variants and every other part reads them.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe$8);
+//#endregion
+//#region src/toast/machine.ts
+/**
+* Connects the toast machines and provides a toast's api to its parts.
+*
+* @remarks
+*   A toaster is the store an application raises toasts into. `Toast.Region` runs the group machine
+*   for one toaster, and each toast in the region runs a machine of its own, whose api the toast's
+*   parts read from context. The group machine derives the region's id from the toaster's
+*   placement, so a page renders one region per placement.
+*/
+/**
+* Creates the context through which each toast provides its api to its parts.
+*
+* @remarks
+*   `useToast` throws when no toast of a `Toast.Region` is rendering the calling part.
+*/
+const [ApiProvider, useToast] = createRequiredContext("Toast");
+/**
+* Starts the group machine for one toaster and returns its api and service.
+*
+* @param toaster - The store the region renders the toasts of.
+* @param dir - The text direction, which mirrors the start and end placements.
+*/
+function useRegionMachine(toaster, dir) {
+	const $ = c(11);
+	let t0;
+	if ($[0] !== dir) {
+		t0 = omitUndefined({ dir });
+		$[0] = dir;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = useId();
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1 || $[4] !== toaster) {
+		t2 = {
+			...t0,
+			id: t1,
+			store: toaster
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = toaster;
+		$[5] = t2;
+	} else t2 = $[5];
+	const service = useMachine(toast.group.machine, t2);
+	let t3;
+	if ($[6] !== service) {
+		t3 = toast.group.connect(service, normalizeProps);
+		$[6] = service;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== service || $[9] !== t3) {
+		t4 = {
+			api: t3,
+			service
+		};
+		$[8] = service;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+/**
+* Starts the machine of one toast and returns its connected api.
+*
+* @param options - The toast as the toaster holds it.
+* @param parent - The group machine's service.
+* @param index - The toast's place in the region, the newest first.
+*/
+function useToastMachine(options, parent, index) {
+	const $ = c(8);
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== index || $[3] !== parent || $[4] !== t0) {
+		t1 = {
+			...t0,
+			index,
+			parent
+		};
+		$[2] = index;
+		$[3] = parent;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	const service = useMachine(toast.machine, t1);
+	let t2;
+	if ($[6] !== service) {
+		t2 = toast.connect(service, normalizeProps);
+		$[6] = service;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+//#endregion
+//#region src/toast/action-trigger.tsx
+/**
+* Renders the `button` with the toast's action trigger class.
+*/
+const Drawn$4 = withContext("button", "actionTrigger");
+/**
+* Renders the action trigger with the machine's props merged over the caller's.
+*
+* @param props - The props of a `button`.
+* @returns The `button` element.
+*/
+function ActionTrigger(props) {
+	const $ = c(5);
+	const api = useToast();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getActionTriggerProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn$4, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toast/close-trigger.tsx
+/**
+* Renders the `button` with the toast's close trigger class.
+*/
+const Drawn$3 = withContext("button", "closeTrigger");
+/**
+* Renders the close trigger with the machine's props merged over the caller's.
+*
+* @param props - The props of a `button`.
+* @returns The `button` element.
+*/
+function CloseTrigger(props) {
+	const $ = c(5);
+	const api = useToast();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getCloseTriggerProps(), 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/toast/content.ts
+/**
+* Renders the column of the title and the description.
+*/
+const Content = withContext("div", "content");
+//#endregion
+//#region src/toast/description.tsx
+/**
+* Renders the `div` with the toast's description class.
+*/
+const Drawn$2 = withContext("div", "description");
+/**
+* Renders the description with the machine's description props merged over the caller's.
+*
+* @param props - The props of a `div`.
+* @returns The `div` element.
+*/
+function Description(props) {
+	const $ = c(5);
+	const api = useToast();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getDescriptionProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn$2, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toast/indicator.ts
+/**
+* Renders a `span` hidden from the accessibility tree by default.
+*/
+const Indicator = withContext("span", "indicator", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/toast/actor.tsx
+/**
+* Runs the toast's machine and renders what the render function returns for the toast.
+*
+* @param props - The toast, its place, the region's service and the render function.
+* @returns The rendered toast inside the api's provider.
+*/
+function Actor(t0) {
+	const $ = c(6);
+	const { index, parent, render, value } = t0;
+	const api = useToastMachine(value, parent, index);
+	let t1;
+	if ($[0] !== render || $[1] !== value) {
+		t1 = render(value);
+		$[0] = render;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== api || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ApiProvider, {
+			value: api,
+			children: t1
+		});
+		$[3] = api;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/toast/region.tsx
+/**
+* Renders the region a toaster raises its toasts into, and each toast through a render function.
+*
+* @remarks
+*   The machine makes the element a `region` landmark named `<label>, <placement> (alt+T)`, fixes
+*   it to the placement's edge of the window, and announces each new toast through
+*   `aria-live="polite"`. Alt+T moves focus to the newest toast, and when the toast that has focus
+*   leaves, focus returns to the element it entered the region from. A pointer resting on the
+*   region, or focus inside it, pauses every toast. The machine derives the region's id from the
+*   placement, so a page renders one region per placement. While the toaster's `pauseOnPageIdle` is
+*   true, the region pauses every toast when the page is hidden and resumes them when it shows
+*   again, because the machine sends that pause to no handler.
+*/
+/**
+* Renders the `div` that provides the recipe's variants.
+*/
+const Framed = withProvider("div", "region");
+/**
+* Selects the root of a toast by the class the binding writes.
+*/
+const ROOT = `.${recipe$8.className}__root`;
+/**
+* Pauses every toast of a toaster while the page is hidden.
+*
+* @param toaster - The store whose toasts pause.
+*/
+function useIdlePause(toaster) {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== toaster) {
+		t0 = () => {
+			const changed = function changed() {
+				if (document.visibilityState === "hidden") toaster.pause();
+				else toaster.resume();
+			};
+			if (toaster.attrs.pauseOnPageIdle) document.addEventListener("visibilitychange", changed);
+			return () => {
+				document.removeEventListener("visibilitychange", changed);
+			};
+		};
+		t1 = [toaster];
+		$[0] = toaster;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+}
+/**
+* Returns focus to the element it entered the region from when the toast that has it leaves.
+*
+* @remarks
+*   The machine returns focus only when focus leaves the region while no pointer rests on it. A
+*   toast that leaves while it has focus takes focus with it, and the browser moves focus to the
+*   document's body, so the region moves it back after the render that removed the toast. The
+*   check runs after every render of the region, because the region renders again whenever a
+*   toast enters or leaves.
+*/
+function useFocusReturn() {
+	const $ = c(2);
+	const came = useRef(null);
+	const within = useRef(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			if (!within.current || document.activeElement !== document.body) return;
+			within.current = false;
+			came.current?.focus();
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	useLayoutEffect(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) within.current = false;
+			},
+			onFocus: (event_0) => {
+				if (within.current) return;
+				within.current = true;
+				came.current = event_0.relatedTarget instanceof HTMLElement ? event_0.relatedTarget : null;
+			}
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Moves focus from the region itself to the newest toast, or back to the element it came from
+* while the region has no toast.
+*
+* @remarks
+*   Alt+T focuses the region, an element of no size at the window's edge, so a person sees no focus
+*   indicator on it. The newest toast is the first in the region. It shows the focus ring and
+*   takes Escape. The region merges this handler after the machine's, so the machine records the
+*   element that focus came from before focus moves on.
+*/
+function forwarded(event) {
+	if (event.target !== event.currentTarget) return;
+	const came = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+	(event.currentTarget.querySelector(ROOT) ?? came)?.focus();
+}
+/**
+* Renders the region with the group machine's props merged over the caller's, and each toast.
+*
+* @param props - The toaster, the name, the direction, the render function and the props of a
+*   `div`.
+* @returns The `div` element.
+*/
+function Region(t0) {
+	const $ = c(11);
+	const { children, dir, label: t1, toaster, ...props } = t0;
+	const label = t1 === void 0 ? "Notifications" : t1;
+	const { api, service } = useRegionMachine(toaster, dir);
+	const focusReturn = useFocusReturn();
+	useIdlePause(toaster);
+	const T0 = Framed;
+	const t2 = mergeProps({ onFocus: forwarded }, api.getGroupProps({ label }), focusReturn, props);
+	let t3;
+	if ($[0] !== api || $[1] !== children || $[2] !== service) {
+		let t4;
+		if ($[4] !== children || $[5] !== service) {
+			t4 = (value, index) => /* @__PURE__ */ jsx(Actor, {
+				index,
+				parent: service,
+				render: children,
+				value
+			}, value.id);
+			$[4] = children;
+			$[5] = service;
+			$[6] = t4;
+		} else t4 = $[6];
+		t3 = api.getToasts().map(t4);
+		$[0] = api;
+		$[1] = children;
+		$[2] = service;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[7] !== T0 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			children: t3
+		});
+		$[7] = T0;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+//#endregion
+//#region src/toast/root.tsx
+/**
+* Renders the `div` with the toast's root class.
+*/
+const Drawn$1 = withContext("div", "root");
+/**
+* Renders the toast with the machine's root props merged over the caller's, between the machine's
+* two empty elements.
+*
+* @param props - The props of a `div`.
+* @returns The `div` element.
+*/
+function Root(t0) {
+	const $ = c(14);
+	const { children, ...props } = t0;
+	const api = useToast();
+	const T0 = Drawn$1;
+	const t1 = mergeProps(api.getRootProps(), props);
+	let t2;
+	if ($[0] !== api) {
+		t2 = api.getGhostBeforeProps();
+		$[0] = api;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", { ...t2 });
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== api) {
+		t4 = api.getGhostAfterProps();
+		$[4] = api;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", { ...t4 });
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== children || $[10] !== t1 || $[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			children: [
+				t3,
+				children,
+				t5
+			]
+		});
+		$[8] = T0;
+		$[9] = children;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+//#endregion
+//#region src/toast/title.tsx
+/**
+* Renders the `div` with the toast's title class.
+*/
+const Drawn = withContext("div", "title");
+/**
+* Renders the title with the machine's title props merged over the caller's.
+*
+* @param props - The props of a `div`.
+* @returns The `div` element.
+*/
+function Title(props) {
+	const $ = c(5);
+	const api = useToast();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getTitleProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Drawn, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toast/index.ts
+var toast_exports = /* @__PURE__ */ __exportAll({
+	ActionTrigger: () => ActionTrigger,
+	CloseTrigger: () => CloseTrigger,
+	Content: () => Content,
+	Description: () => Description,
+	Indicator: () => Indicator,
+	Region: () => Region,
+	Root: () => Root,
+	Title: () => Title,
+	createToaster: () => createToaster
+});
+//#endregion
+export { Root$2 as A, Content$2 as B, meter_exports as C, Range$1 as D, Segment as E, empty_state_exports as F, Description$2 as G, Title$2 as H, Title$1 as I, Content$3 as K, Root$5 as L, LoaderOverlay as M, Loader as N, Marker as O, Spinner as P, Indicator$2 as R, Circle as S, Track$1 as T, Root$6 as U, alert_exports as V, Indicator$3 as W, ValueText as _, Region as a, Range as b, Content as c, SkeletonText as d, Skeleton as f, progress_circle_exports as g, progress_exports as h, Root as i, Root$3 as j, Label$1 as k, CloseTrigger as l, PropsProvider$1 as m, toast_exports as n, Indicator as o, PropsProvider as p, CloseTrigger$1 as q, Title as r, Description as s, createToaster as t, ActionTrigger as u, Track as v, ValueText$1 as w, Label as x, Root$1 as y, Description$1 as z };