@jfrader/ui 0.5.0 → 0.5.1

package/dist/theme-switch-C505TtU8.js

@@ -0,0 +1,166 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./switch-C1WrKrf-.js";
+import { useId as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+//#region src/components/theme-switch/theme-switch.tsx
+var p = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: u.space[2],
+	maxInlineSize: "100%",
+	minInlineSize: 0,
+	"&:has(input:disabled) [data-ui=\"theme-switch-icon-frame\"]": { cursor: "not-allowed" }
+}), m = e({
+	minBlockSize: u.space[8],
+	justifyContent: "center"
+}), h = e({
+	display: "inline-grid",
+	flexShrink: 0,
+	inlineSize: u.space[5],
+	blockSize: u.space[5],
+	alignItems: "center",
+	justifyItems: "center",
+	cursor: "pointer",
+	"&[data-animated=\"true\"]": {
+		transitionProperty: "transform",
+		transitionDuration: u.motion.duration.slow,
+		transitionTimingFunction: u.motion.easeStandard
+	},
+	[r]: {
+		transform: "none !important",
+		transitionDuration: "0s !important"
+	},
+	[n]: { color: "CanvasText" }
+}), g = e({
+	gridArea: "1 / 1",
+	display: "inline-flex",
+	inlineSize: "100%",
+	blockSize: "100%",
+	opacity: 0,
+	transform: "rotate(-30deg) scale(.8)",
+	"&[data-active=\"true\"]": {
+		opacity: 1,
+		transform: "none"
+	},
+	"&[data-animated=\"true\"]": {
+		transitionProperty: "opacity, transform",
+		transitionDuration: u.motion.duration.base,
+		transitionTimingFunction: u.motion.easeStandard
+	},
+	[r]: {
+		transform: "none",
+		transitionDuration: "0s !important"
+	}
+}), _ = {
+	reveal: e({ "&[data-value=\"dark\"]": { transform: "scale(1.08)" } }),
+	eclipse: e({
+		"&[data-value=\"dark\"]": { transform: `translateX(calc(${u.space[1]} / -2))` },
+		"&:dir(rtl)[data-value=\"dark\"]": { transform: `translateX(calc(${u.space[1]} / 2))` }
+	}),
+	split: e({
+		"&[data-value=\"dark\"]": { transform: `translateX(calc(${u.space[1]} / 4))` },
+		"&:dir(rtl)[data-value=\"dark\"]": { transform: `translateX(calc(${u.space[1]} / -4))` }
+	}),
+	rise: e({ "&[data-value=\"dark\"]": { transform: `translateY(calc(${u.space[1]} / -2))` } })
+}, v = /* @__PURE__ */ f("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	focusable: "false",
+	children: [/* @__PURE__ */ d("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4"
+	}), /* @__PURE__ */ d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" })]
+}), y = /* @__PURE__ */ d("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	focusable: "false",
+	children: /* @__PURE__ */ d("path", { d: "M20 15A9 9 0 0 1 9 4a9 9 0 1 0 11 11Z" })
+});
+function b({ value: e, defaultValue: n = "light", onValueChange: r, label: u, iconOnly: b = !1, lightIcon: x = v, darkIcon: S = y, transition: C = "reveal", loading: w = !1, className: T, sx: E, slotProps: D, onChange: O, onClick: k, dir: A, id: j, ...M }) {
+	let N = c(), P = j ?? N, { iconFrame: F, lightIcon: I, darkIcon: L, ...R } = D ?? {}, [z, B] = i(e, n), [V, H] = l(!1), U = o(u) && u !== "", W = o(x) && x !== "", G = o(S) && S !== "", K = w || M["aria-disabled"] === !0 || M["aria-disabled"] === "true";
+	return /* @__PURE__ */ d(t, {
+		className: T,
+		styles: p,
+		sx: E,
+		children: (e) => /* @__PURE__ */ f("span", {
+			"data-ui": "theme-switch",
+			"data-value": z,
+			"data-transition": C,
+			dir: A,
+			className: e,
+			children: [(W || G) && /* @__PURE__ */ f("label", {
+				htmlFor: P,
+				"aria-hidden": "true",
+				"data-ui": "theme-switch-icon-frame",
+				"data-value": z,
+				"data-animated": V,
+				className: F?.className,
+				css: [
+					h,
+					_[C],
+					F?.css
+				],
+				children: [W && /* @__PURE__ */ d("span", {
+					"data-ui": "theme-switch-light-icon",
+					"data-active": z === "light",
+					"data-animated": V,
+					className: I?.className,
+					css: [g, I?.css],
+					children: x
+				}), G && /* @__PURE__ */ d("span", {
+					"data-ui": "theme-switch-dark-icon",
+					"data-active": z === "dark",
+					"data-animated": V,
+					className: L?.className,
+					css: [g, L?.css],
+					children: S
+				})]
+			}), /* @__PURE__ */ d(s, {
+				...M,
+				id: P,
+				dir: A,
+				checked: z === "dark",
+				"aria-busy": w || M["aria-busy"],
+				"aria-disabled": K || M["aria-disabled"],
+				description: M.description === "" ? void 0 : M.description,
+				slotProps: {
+					...R,
+					root: {
+						...R.root,
+						css: [m, R.root?.css]
+					}
+				},
+				onClick: (e) => {
+					k?.(e), K && e.preventDefault();
+				},
+				onChange: (e) => {
+					if (O?.(e), e.defaultPrevented || e.nativeEvent.defaultPrevented || K) return;
+					let t = e.currentTarget.checked ? "dark" : "light";
+					t !== z && (H(!0), B(t), r?.(t, {
+						transition: C,
+						trigger: e.currentTarget,
+						reducedMotion: e.currentTarget.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1
+					}));
+				},
+				label: U ? /* @__PURE__ */ d("span", {
+					css: b && a,
+					children: u
+				}) : void 0
+			})]
+		})
+	});
+}
+b.displayName = "ThemeSwitch";
+//#endregion
+export { b as t };

package/dist/theme-switch.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ThemeSwitch } from "./theme-switch-C505TtU8.js";

package/dist/{time-picker-Db8D49cP.js → time-picker-CPlhW0tr.js}

@@ -5,7 +5,7 @@ import { t as r } from "./use-controlled-state-DpeVQZNR.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
 import { t as a } from "./icon-wrapper-stN8sD7R.js";
 import { a as o } from "./field-anatomy-COVdNpf5.js";
-import { t as s } from "./select-n_H52W1Z.js";
+import { t as s } from "./select-D5rhJ8gi.js";
 import { useEffect as c, useId as ee, useMemo as te, useRef as l, useState as ne } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
 import { createElement as re } from "@emotion/react";
@@ -89,8 +89,8 @@ var de = e({
 		"&[aria-selected=\"true\"]": { border: "1px solid Highlight" }
 	}
 });
-function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h, defaultOpen: g = !1, onOpenChange: b, minuteStep: x = 15, min: S, max: C, locale: ye, hourCycle: w, label: T, description: E, error: D, placeholder: be, size: xe = "md", disabled: Se = !1, readOnly: O = !1, required: k = !1, name: Ce, icon: A, slotProps: j, className: we, sx: Te, dir: M, id: Ee, onClick: De, onKeyDown: Oe, onBlur: ke, ...N }) {
-	let P = l(u).current, [F = "", I, L] = r(n, P, m), [Ae = !1, je] = r(h, g, b), R = Se || j?.control?.disabled === !0, z = R || O, B = Ae && !z, V = l(null), H = l(null), [U, Me] = ne(null), W = l(!1), Ne = p([
+function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h, defaultOpen: g = !1, onOpenChange: b, minuteStep: x = 15, min: ye, max: be, locale: S, hourCycle: C, label: w, description: T, error: E, placeholder: xe, size: Se = "md", disabled: Ce = !1, readOnly: D = !1, required: O = !1, name: k, icon: A, slotProps: j, className: we, sx: Te, dir: M, id: Ee, onClick: De, onKeyDown: Oe, onBlur: ke, ...N }) {
+	let P = l(u).current, [F = "", I, L] = r(n, P, m), [Ae = !1, je] = r(h, g, b), R = Ce || j?.control?.disabled === !0, z = R || D, B = Ae && !z, V = l(null), H = l(null), [U, Me] = ne(null), W = l(!1), Ne = p([
 		V,
 		e,
 		j?.control?.ref
@@ -98,12 +98,12 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 		H,
 		Me,
 		j?.content?.ref
-	]), G = `${ee()}-label`, K = te(() => new Intl.DateTimeFormat(ye ?? le(), {
+	]), G = `${ee()}-label`, K = te(() => new Intl.DateTimeFormat(S ?? le(), {
 		hour: "numeric",
 		minute: "2-digit",
 		timeZone: "UTC",
-		...w === void 0 ? {} : { hourCycle: w }
-	}), [ye, w]), q = _(S), J = _(C), Y = S !== void 0 && q === void 0 || C !== void 0 && J === void 0 || q !== void 0 && J !== void 0 && q > J, X = te(() => Y ? [] : Array.from({ length: ie / x }, (e, t) => t * x).filter((e) => e >= (q ?? 0) && e <= (J ?? 1439)).map((e) => ({
+		...C === void 0 ? {} : { hourCycle: C }
+	}), [S, C]), q = _(ye), J = _(be), Y = ye !== void 0 && q === void 0 || be !== void 0 && J === void 0 || q !== void 0 && J !== void 0 && q > J, X = te(() => Y ? [] : Array.from({ length: ie / x }, (e, t) => t * x).filter((e) => e >= (q ?? 0) && e <= (J ?? 1439)).map((e) => ({
 		time: e,
 		value: ue(e),
 		label: K.format(/* @__PURE__ */ new Date(e * ae))
@@ -115,15 +115,15 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 		K
 	]), Z = _(F), Fe = Y || F !== "" && Z === void 0, Q = j?.control, $ = o({
 		id: Ee ?? Q?.id,
-		description: E,
-		error: D,
+		description: T,
+		error: E,
 		"aria-describedby": [N["aria-describedby"], Q?.["aria-describedby"]].filter(Boolean).join(" ") || void 0,
 		"aria-invalid": Fe ? !0 : N["aria-invalid"] ?? Q?.["aria-invalid"]
 	}), Ie = [
 		N["aria-labelledby"],
 		Q?.["aria-labelledby"],
-		i(T) && G
-	].filter(Boolean).join(" ") || void 0, Le = Z === void 0 ? be : K.format(/* @__PURE__ */ new Date(Z * ae));
+		i(w) && G
+	].filter(Boolean).join(" ") || void 0, Le = Z === void 0 ? xe : K.format(/* @__PURE__ */ new Date(Z * ae));
 	return c(() => {
 		let e = V.current?.form;
 		if (!e) return;
@@ -192,12 +192,12 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 			dir: M ?? j?.root?.dir,
 			"data-ui": "time-picker",
 			children: [
-				i(T) && /* @__PURE__ */ f("label", {
+				i(w) && /* @__PURE__ */ f("label", {
 					...j?.label,
 					id: G,
 					htmlFor: $.id,
 					css: [fe, j?.label?.css],
-					children: [T, k && /* @__PURE__ */ f("span", {
+					children: [w, O && /* @__PURE__ */ f("span", {
 						"aria-hidden": !0,
 						css: y,
 						children: [" ", "*"]
@@ -210,7 +210,6 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 					onOpenChange: (e) => {
 						!z && (X.length > 0 || !e) && je(e);
 					},
-					name: Ce,
 					disabled: R,
 					children: [/* @__PURE__ */ f(s.Trigger, {
 						...Q,
@@ -223,11 +222,11 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 						"aria-labelledby": Ie,
 						"aria-describedby": $.describedBy,
 						"aria-invalid": $.ariaInvalid,
-						"aria-readonly": O || N["aria-readonly"] || Q?.["aria-readonly"],
-						"aria-required": k || N["aria-required"] || Q?.["aria-required"],
+						"aria-readonly": D || N["aria-readonly"] || Q?.["aria-readonly"],
+						"aria-required": O || N["aria-required"] || Q?.["aria-required"],
 						css: [
 							me,
-							he[xe],
+							he[Se],
 							Q?.css
 						],
 						onClick: void 0,
@@ -283,18 +282,25 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 						}, e.label))
 					})]
 				}),
-				i(E) && /* @__PURE__ */ d("span", {
+				k !== void 0 && /* @__PURE__ */ d("input", {
+					type: "hidden",
+					name: k,
+					value: F,
+					disabled: R,
+					form: N.form ?? Q?.form
+				}),
+				i(T) && /* @__PURE__ */ d("span", {
 					...j?.description,
 					id: $.descriptionId,
 					css: [pe, j?.description?.css],
-					children: E
+					children: T
 				}),
-				i(D) && /* @__PURE__ */ d("span", {
+				i(E) && /* @__PURE__ */ d("span", {
 					...j?.error,
 					id: $.errorId,
 					role: "alert",
 					css: [y, j?.error?.css],
-					children: D
+					children: E
 				})
 			]
 		})

package/dist/time-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TimePicker } from "./time-picker-Db8D49cP.js";
+export { t as TimePicker } from "./time-picker-CPlhW0tr.js";

package/dist/{timeline-k3nURuCP.js → timeline-B0uAAVfT.js}

@@ -8,7 +8,7 @@ import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { t as l } from "./visually-hidden-BJdvqqvn.js";
 import { t as u } from "./renderable-DzcIj1Lo.js";
 import { t as d } from "./icon-wrapper-stN8sD7R.js";
-import { t as f } from "./avatar-BahDVO9t.js";
+import { t as f } from "./avatar-CaGJHy1N.js";
 import { t as p } from "./part-id-D0zksy32.js";
 import { useEffect as ee, useId as te, useLayoutEffect as ne, useMemo as m, useRef as h, useState as re } from "react";
 import { vars as g } from "@jfrader/tokens/vars";
@@ -309,7 +309,13 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
 	},
-	[a]: { "&:focus-visible": { outlineColor: "Highlight" } }
+	[a]: {
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&::after": {
+			forcedColorAdjust: "none",
+			color: "ButtonText"
+		}
+	}
 }), Me = t({
 	fontSize: g.textSize.xs,
 	color: g.color.textMuted

package/dist/timeline.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Timeline } from "./timeline-k3nURuCP.js";
+export { t as Timeline } from "./timeline-B0uAAVfT.js";

package/dist/{toast-BHxI32ZA.js → toast-B7wo3sX1.js}

@@ -2,7 +2,7 @@
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n, r } from "./media-8yrN85VT.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
-import { t as a } from "./button-C92uYFJW.js";
+import { t as a } from "./button-NLY0h6EJ.js";
 import { i as o, t as s } from "./theme-scope-t7nAKc2c.js";
 import { t as c } from "./spinner-DtxvDPdM.js";
 import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
@@ -48,7 +48,7 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 	},
 	[r]: {
 		transitionDuration: "0s",
-		transform: "none"
+		"&[data-state=\"closing\"]": { transform: "none" }
 	},
 	[n]: {
 		backgroundColor: "Canvas",
@@ -65,7 +65,8 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 	display: "grid",
 	gap: v.space[1],
 	alignSelf: "center",
-	minInlineSize: 0
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
 }), F = e({
 	margin: 0,
 	fontSize: v.textSize.sm,
@@ -83,28 +84,40 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 	gridColumn: "1 / -1",
 	display: "flex",
 	gap: v.space[2]
+}), B = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	minBlockSize: "32px",
+	paddingBlock: v.space[2],
+	whiteSpace: "normal",
+	overflowWrap: "anywhere"
 });
-function B(e) {
+function V(e) {
 	let t = d(A);
 	if (!t) throw Error(`Toast.${e} must be rendered inside <Toast.Provider>.`);
 	return t;
 }
-function V() {
+function H() {
 	let e = d(k);
 	if (!e) throw Error("useToast() must be called inside <Toast.Provider>.");
 	return e;
 }
-function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
-	let i = p(), a = g(0), [o, s] = _([]), c = g([]), l = g(/* @__PURE__ */ new Map()), d = g(null), f = g(0), v = u(() => (f.current += 1, process.env.NODE_ENV !== "production" && f.current > 1 && console.warn("Mount only one Toast queue renderer per provider."), () => {
-		--f.current;
-	}), []), y = Math.max(1, Math.floor(Number.isFinite(t) ? t : C)), x = u((e, t) => {
-		t ? l.current.set(e, t) : l.current.delete(e);
-	}, []), S = u((e, t) => {
+function U({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
+	let i = p(), a = g(0), [o, s] = _([]), c = g([]), l = g(!0), d = g(/* @__PURE__ */ new Map()), f = g(null), v = g(0);
+	m(() => (l.current = !0, () => {
+		l.current = !1;
+	}), []);
+	let y = u(() => (v.current += 1, process.env.NODE_ENV !== "production" && v.current > 1 && console.warn("Mount only one Toast queue renderer per provider."), () => {
+		--v.current;
+	}), []), x = Math.max(1, Math.floor(Number.isFinite(t) ? t : C)), S = u((e, t) => {
+		t ? d.current.set(e, t) : d.current.delete(e);
+	}, []), E = u((e, t) => {
 		for (let n of e) {
-			let e = l.current.get(n.id);
+			let e = d.current.get(n.id);
 			if (!e?.contains(e.ownerDocument.activeElement)) continue;
 			let r = e.closest("[data-ui=\"toast-stack-list\"], [data-ui=\"toast-viewport\"]") ?? e.parentElement;
-			r && (d.current = {
+			r && (f.current = {
 				container: r,
 				ids: new Set(t.filter((e) => e.state === "open").map((e) => e.id))
 			});
@@ -112,26 +125,29 @@ function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
 		}
 	}, []);
 	m(() => {
-		let e = d.current;
-		e && (d.current = null, Array.from(e.container.querySelectorAll("[data-ui=\"toast\"]")).find((t) => e.ids.has(t.dataset.toastId))?.querySelector("[data-toast-dismiss]")?.focus());
+		let e = f.current;
+		e && (f.current = null, Array.from(e.container.querySelectorAll("[data-ui=\"toast\"]")).find((t) => e.ids.has(t.dataset.toastId))?.querySelector("[data-toast-dismiss]")?.focus());
 	}, [o]);
-	let E = u((e) => {
+	let D = u((e) => {
 		a.current += 1;
-		let t = `${i}toast-${a.current}`, r = {
+		let t = `${i}toast-${a.current}`;
+		if (!l.current) return t;
+		let r = {
 			id: t,
 			options: {
 				...e,
 				duration: e.duration === void 0 ? e.loading ? null : n : e.duration
 			},
 			state: "open"
-		}, o = c.current, l = [...o, r].slice(-y);
-		return S(o.filter((e) => !l.includes(e)), l), c.current = l, s(l), t;
+		}, o = c.current, u = [...o, r].slice(-x);
+		return E(o.filter((e) => !u.includes(e)), u), c.current = u, s(u), t;
 	}, [
 		i,
-		y,
+		x,
 		n,
-		S
-	]), D = u((e, t) => {
+		E
+	]), O = u((e, t) => {
+		if (!l.current) return;
 		let r = c.current.map((r) => {
 			if (r.id !== e || r.state !== "open") return r;
 			let i = {
@@ -144,52 +160,54 @@ function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
 			};
 		});
 		c.current = r, s(r);
-	}, [n]), O = u((e) => {
+	}, [n]), j = u((e) => {
+		if (!l.current) return;
 		let t = c.current;
-		S(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
+		E(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
 		let n = t.map((t) => t.id === e && t.state === "open" ? {
 			...t,
 			state: "closing"
 		} : t);
 		c.current = n, s(n);
-	}, [S]), j = u((e) => {
+	}, [E]), M = u((e) => {
+		if (!l.current) return;
 		let t = c.current, n = t.filter((t) => t.id !== e);
-		S(t.filter((t) => t.id === e), n), c.current = n, s(n);
-	}, [S]), M = h(() => ({
-		toast: E,
-		dismiss: O,
-		update: D
+		E(t.filter((t) => t.id === e), n), c.current = n, s(n);
+	}, [E]), N = h(() => ({
+		toast: D,
+		dismiss: j,
+		update: O
 	}), [
-		E,
-		O,
-		D
-	]), N = h(() => ({
+		D,
+		j,
+		O
+	]), P = h(() => ({
 		toasts: o,
-		dismiss: O,
-		remove: j,
-		registerRoot: x,
+		dismiss: j,
+		remove: M,
+		registerRoot: S,
 		dismissLabel: r,
-		registerRenderer: v
+		registerRenderer: y
 	}), [
 		o,
-		O,
 		j,
-		x,
+		M,
+		S,
 		r,
-		v
+		y
 	]);
 	return /* @__PURE__ */ b(k.Provider, {
-		value: M,
+		value: N,
 		children: /* @__PURE__ */ b(A.Provider, {
-			value: N,
+			value: P,
 			children: e
 		})
 	});
 }
-H.displayName = "Toast.Provider";
-function U({ ref: e, className: n, sx: r, ...i }) {
-	let { toasts: a, registerRenderer: o } = B("Viewport");
-	return f(o, [o]), /* @__PURE__ */ b(W, { children: /* @__PURE__ */ b(t, {
+U.displayName = "Toast.Provider";
+function W({ ref: e, className: n, sx: r, ...i }) {
+	let { toasts: a, registerRenderer: o } = V("Viewport");
+	return f(o, [o]), /* @__PURE__ */ b(G, { children: /* @__PURE__ */ b(t, {
 		className: n,
 		styles: j,
 		sx: r,
@@ -198,11 +216,11 @@ function U({ ref: e, className: n, sx: r, ...i }) {
 			ref: e,
 			"data-ui": "toast-viewport",
 			className: t,
-			children: a.map((e) => /* @__PURE__ */ b(G, { record: e }, e.id))
+			children: a.map((e) => /* @__PURE__ */ b(K, { record: e }, e.id))
 		})
 	}) });
 }
-function W({ children: e, contained: t = !1 }) {
+function G({ children: e, contained: t = !1 }) {
 	let n = g(null), [r, i] = _(null), a = o()?.portalContainer, c = a === void 0 ? r : a;
 	return f(() => {
 		i(n.current?.ownerDocument.body ?? null);
@@ -211,32 +229,32 @@ function W({ children: e, contained: t = !1 }) {
 		ref: n
 	}), t ? e : c && S(/* @__PURE__ */ b(s, { children: e }), c)] });
 }
-U.displayName = "Toast.Viewport";
-function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o, escapeDismiss: s = !1 }) {
-	let { dismiss: l, remove: d, registerRoot: p, dismissLabel: m } = B("Viewport"), { id: h, options: v, state: S } = e, { title: C, description: w, tone: T = "neutral", action: D, loading: O } = v, k = v.duration, A = g(null), j = u((e) => {
+W.displayName = "Toast.Viewport";
+function K({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o, escapeDismiss: s = !1 }) {
+	let { dismiss: l, remove: d, registerRoot: p, dismissLabel: m } = V("Viewport"), { id: h, options: v, state: S } = e, { title: C, description: w, tone: T = "neutral", action: D, loading: O } = v, k = v.duration, A = g(null), j = u((e) => {
 		A.current = e, p(h, e);
-	}, [h, p]), [V, H] = _(!1), [U, W] = _(!1), [G, q] = _(!1), J = g(k ?? 0), [Y, X] = _(!1);
+	}, [h, p]), [H, U] = _(!1), [W, G] = _(!1), [K, J] = _(!1), Y = g(k ?? 0), [X, Z] = _(!1);
 	f(() => {
 		let e = A.current?.ownerDocument;
 		if (!e) return;
-		let t = () => X(e.hidden);
+		let t = () => Z(e.hidden);
 		return t(), e.addEventListener("visibilitychange", t), () => e.removeEventListener("visibilitychange", t);
 	}, []), f(() => {
-		J.current = k ?? 0;
+		Y.current = k ?? 0;
 	}, [k]), f(() => {
-		if (!t || V) return;
-		let e = setTimeout(() => H(!0), E);
+		if (!t || H) return;
+		let e = setTimeout(() => U(!0), E);
 		return () => clearTimeout(e);
-	}, [t, V]);
-	let Z = V && t && !n && !Y && S === "open" && k !== null && !U && !G;
+	}, [t, H]);
+	let Q = H && t && !n && !X && S === "open" && k !== null && !W && !K;
 	return f(() => {
-		if (!Z) return;
-		let e = performance.now(), t = setTimeout(() => l(h), J.current);
+		if (!Q) return;
+		let e = performance.now(), t = setTimeout(() => l(h), Y.current);
 		return () => {
-			clearTimeout(t), J.current -= performance.now() - e;
+			clearTimeout(t), Y.current -= performance.now() - e;
 		};
 	}, [
-		Z,
+		Q,
 		l,
 		h,
 		k
@@ -265,13 +283,13 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 		"data-ui": "toast",
 		"data-tone": T,
 		"data-state": S,
-		"data-populated": V,
+		"data-populated": H,
 		"data-exposed": t,
-		onPointerEnter: () => W(!0),
-		onPointerLeave: () => W(!1),
-		onFocus: () => q(!0),
+		onPointerEnter: () => G(!0),
+		onPointerLeave: () => G(!1),
+		onFocus: () => J(!0),
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || q(!1);
+			e.currentTarget.contains(e.relatedTarget) || J(!1);
 		},
 		css: [M, N[T]],
 		children: [
@@ -279,7 +297,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 				role: T === "danger" ? "alert" : "status",
 				"aria-atomic": "true",
 				css: P,
-				children: V && /* @__PURE__ */ x(y, { children: [i(C) && /* @__PURE__ */ b("div", {
+				children: H && /* @__PURE__ */ x(y, { children: [i(C) && /* @__PURE__ */ b("div", {
 					css: F,
 					children: C
 				}), i(w) && /* @__PURE__ */ b("div", {
@@ -292,7 +310,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 				label: "",
 				size: "sm"
 			}),
-			(V || s && t) && /* @__PURE__ */ x("div", {
+			(H || s && t) && /* @__PURE__ */ x("div", {
 				css: R,
 				children: [/* @__PURE__ */ b(a, {
 					variant: "ghost",
@@ -301,7 +319,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 					"data-toast-dismiss": "",
 					onClick: () => l(h),
 					css: L,
-					children: /* @__PURE__ */ b(K, {})
+					children: /* @__PURE__ */ b(q, {})
 				}), D && /* @__PURE__ */ b("div", {
 					css: z,
 					children: /* @__PURE__ */ b(a, {
@@ -310,6 +328,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 						onClick: (e) => {
 							D?.onClick(e), e.defaultPrevented || l(h);
 						},
+						css: B,
 						children: D.label
 					})
 				})]
@@ -317,7 +336,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 		]
 	});
 }
-function K() {
+function q() {
 	return /* @__PURE__ */ x("svg", {
 		"aria-hidden": "true",
 		viewBox: "0 0 16 16",
@@ -340,13 +359,13 @@ function K() {
 		})]
 	});
 }
-function q(e) {
-	return /* @__PURE__ */ b(H, { ...e });
+function J(e) {
+	return /* @__PURE__ */ b(U, { ...e });
 }
-q.displayName = "Toast";
-var J = Object.assign(q, {
-	Provider: H,
-	Viewport: U
+J.displayName = "Toast";
+var Y = Object.assign(J, {
+	Provider: U,
+	Viewport: W
 });
 //#endregion
-export { V as a, W as i, J as n, B as o, G as r, D as t };
+export { H as a, G as i, Y as n, V as o, K as r, D as t };