@stealthscale/component-feedback 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,1826 +1,2 @@
-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 "./recipe-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
+import { C as meter_exports, F as empty_state_exports, M as LoaderOverlay, N as Loader, P as Spinner, V as alert_exports, d as SkeletonText, f as Skeleton, g as progress_circle_exports, h as progress_exports, m as PropsProvider$1, n as toast_exports, p as PropsProvider } from "./shared-Xc-n0bn7.js";
 export { alert_exports as Alert, empty_state_exports as EmptyState, Loader, LoaderOverlay, meter_exports as Meter, progress_exports as Progress, progress_circle_exports as ProgressCircle, Skeleton, PropsProvider as SkeletonPropsProvider, SkeletonText, PropsProvider$1 as SkeletonTextPropsProvider, Spinner, toast_exports as Toast };