beez-ui 2.7.1 → 3.0.0

package/dist/components/alert.js

@@ -3,21 +3,20 @@ import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Alert (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a persistent message that helps people
 * recover or continue, on Arc's surface with a resting shadow. A `tone` tints and picks its icon, which morphs in
-* place when the tone changes; `onDismiss` adds a dismiss button and `open` collapses the alert's height while it
-* fades, so the content below closes the gap. The compound title, description and action parts are kept.
+* place when the tone changes, and a new title or string detail rises in over the old one. `onDismiss` adds a dismiss
+* button and `open` collapses the alert's height while it fades, so the content below closes the gap.
 */
 import { useRef, useState } from "react";
-import { cva } from "class-variance-authority";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { Check, CircleX, Info, TriangleAlert, X } from "lucide-react";
-import { ALERT_DISMISS_LABEL, ALERT_TONE_ROLE } from "../constants/alert.js";
+import { ALERT_DISMISS_LABEL, ALERT_DISMISS_LABEL_SEPARATOR, ALERT_TEXT_OFFSET_EM, ALERT_TONE_ROLE } from "../constants/alert.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
 import { ARC_ICON_ENTER, ARC_ICON_EXIT, ARC_ICON_TRANSITION, ARC_REDUCED_EXIT, ARC_REDUCED_TRANSITION, ARC_SWAP_EXIT_TRANSITION, ARC_SWAP_REST } from "../motion/arc-swap.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { useAttachedElement } from "../motion/use-attached-element.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /** The icon each tone shows unless `icon` replaces it. */
 const TONE_ICON = {
 	info: Info,
@@ -25,26 +24,30 @@ const TONE_ICON = {
 	warning: TriangleAlert,
 	danger: CircleX
 };
-/**
-* Arc's alert recipe. The icon column (a direct svg or the tone icon) spans the title and description rows, and
-* `--alert-color` tints it by tone.
-*/
-const alertVariants = cva("group/alert relative grid w-full items-start gap-x-(--space-3) gap-y-(--space-1) rounded-(--radius-control) border border-border bg-surface p-(--space-4) text-left text-sm text-foreground shadow-(--shadow-resting) [--alert-color:currentColor] has-[>svg]:grid-cols-[auto_1fr] has-data-[slot=alert-icon]:grid-cols-[auto_1fr] has-data-[slot=alert-action]:pr-18 has-data-[slot=alert-dismiss]:pr-12 has-data-[slot=alert-action]:has-data-[slot=alert-dismiss]:pr-36 *:[svg]:row-span-2 *:[svg]:mt-px *:[svg]:text-(--alert-color) *:[svg:not([class*='size-'])]:size-[18px]", {
-	variants: {
-		variant: {
-			default: "",
-			destructive: "[--alert-color:var(--danger)] *:data-[slot=alert-title]:text-danger"
-		},
-		tone: {
-			info: "[--alert-color:var(--accent)]",
-			success: "[--alert-color:var(--success)]",
-			warning: "[--alert-color:var(--warning)]",
-			danger: "[--alert-color:var(--danger)]"
-		}
-	},
-	defaultVariants: { variant: "default" }
-});
+/** Colour of the icon for each tone. */
+const TONE_ICON_CLASS_NAME = {
+	info: "text-(--accent)",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-danger"
+};
 const reducedEnter = { opacity: 0 };
+/** A new title or detail rises out of a soft blur; the old one lifts away faster. */
+const textEnter = {
+	opacity: 0,
+	y: `${ALERT_TEXT_OFFSET_EM}em`,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const textExit = {
+	opacity: 0,
+	y: `${-ALERT_TEXT_OFFSET_EM}em`,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+const textTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
 const presenceTransition = {
 	height: ARC_SPRING_SMOOTH,
 	opacity: {
@@ -90,8 +93,8 @@ function toInlineStyleValue(value, unit = "") {
 	if (value === undefined) return "";
 	return typeof value === "number" ? `${value}${unit}` : value;
 }
-/** Outgoing icons are hidden from assistive technology while they fade. */
-function AlertIconSwap(props) {
+/** Outgoing copies are hidden from assistive technology while they fade, so the live region reads only the current one. */
+function AlertSwap(props) {
 	const $ = _c(3);
 	const isPresent = useIsPresent();
 	const t0 = isPresent ? props["aria-hidden"] : true;
@@ -109,110 +112,161 @@ function AlertIconSwap(props) {
 	}
 	return t1;
 }
-/** The tone icon column: a new tone morphs its icon in place. */
-function AlertIcon(t0) {
-	const $ = _c(6);
-	const { icon, iconKey, reduceMotion } = t0;
-	const t1 = reduceMotion ? reducedEnter : ARC_ICON_ENTER;
-	const t2 = reduceMotion ? ARC_REDUCED_EXIT : ARC_ICON_EXIT;
-	const t3 = reduceMotion ? ARC_REDUCED_TRANSITION : ARC_ICON_TRANSITION;
+/** A line of copy that rises in over the previous one when it changes. */
+function AlertText(t0) {
+	const $ = _c(5);
+	const { text, reduceMotion } = t0;
+	const t1 = reduceMotion ? reducedEnter : textEnter;
+	const t2 = reduceMotion ? ARC_REDUCED_EXIT : textExit;
+	const t3 = reduceMotion ? ARC_REDUCED_TRANSITION : textTransition;
 	let t4;
-	if ($[0] !== icon || $[1] !== iconKey || $[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
-		t4 = /* @__PURE__ */ _jsx("span", {
-			"data-slot": "alert-icon",
-			"aria-hidden": "true",
-			className: "relative row-span-2 mt-px grid size-[18px] flex-none place-items-center text-(--alert-color) [&_svg]:block [&_svg:not([class*='size-'])]:size-[18px]",
-			children: /* @__PURE__ */ _jsx(AnimatePresence, {
-				mode: "popLayout",
-				initial: false,
-				children: /* @__PURE__ */ _jsx(AlertIconSwap, {
-					className: "relative grid place-items-center",
-					initial: t1,
-					animate: ARC_SWAP_REST,
-					exit: t2,
-					transition: t3,
-					children: icon
-				}, iconKey)
-			})
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== text) {
+		t4 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ _jsx(AlertSwap, {
+				className: "relative block",
+				initial: t1,
+				animate: ARC_SWAP_REST,
+				exit: t2,
+				transition: t3,
+				children: text
+			}, text)
 		});
-		$[0] = icon;
-		$[1] = iconKey;
-		$[2] = t1;
-		$[3] = t2;
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = text;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	return t4;
+}
+/** The tone icon: a new tone morphs its icon in place. */
+function AlertIcon(t0) {
+	const $ = _c(11);
+	const { icon, iconKey, tone, reduceMotion } = t0;
+	const t1 = TONE_ICON_CLASS_NAME[tone];
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("relative mt-px grid size-[18px] flex-none place-items-center [&_svg]:block [&_svg:not([class*='size-'])]:size-[18px]", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const t3 = reduceMotion ? reducedEnter : ARC_ICON_ENTER;
+	const t4 = reduceMotion ? ARC_REDUCED_EXIT : ARC_ICON_EXIT;
+	const t5 = reduceMotion ? ARC_REDUCED_TRANSITION : ARC_ICON_TRANSITION;
+	let t6;
+	if ($[2] !== icon || $[3] !== iconKey || $[4] !== t3 || $[5] !== t4 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ _jsx(AlertSwap, {
+				className: "relative grid place-items-center",
+				initial: t3,
+				animate: ARC_SWAP_REST,
+				exit: t4,
+				transition: t5,
+				children: icon
+			}, iconKey)
+		});
+		$[2] = icon;
+		$[3] = iconKey;
 		$[4] = t3;
 		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
 	} else {
-		t4 = $[5];
+		t6 = $[7];
 	}
-	return t4;
+	let t7;
+	if ($[8] !== t2 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "alert-icon",
+			"aria-hidden": "true",
+			className: t2,
+			children: t6
+		});
+		$[8] = t2;
+		$[9] = t6;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	return t7;
 }
+/** Arc's alert surface: icon, copy column, optional action and dismiss button in one row. */
+const alertClassName = "group/alert relative flex w-full min-w-0 items-start gap-(--space-3) rounded-(--radius-control) border border-border bg-surface p-(--space-4) text-left text-sm text-foreground shadow-(--shadow-resting)";
 /** The alert surface itself. */
 function AlertBox(t0) {
-	const $ = _c(44);
+	const $ = _c(60);
+	let action;
 	let children;
 	let className;
+	let dismissLabel;
 	let icon;
 	let onDismiss;
 	let presence;
 	let props;
 	let reduceMotion;
 	let t1;
-	let tone;
-	let variant;
+	let title;
 	if ($[0] !== t0) {
-		({className, variant, tone, icon, onDismiss, dismissLabel: t1, reduceMotion, presence, children, ...props} = t0);
+		({className, title, tone: t1, icon, action, onDismiss, dismissLabel, reduceMotion, presence, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = icon;
-		$[4] = onDismiss;
-		$[5] = presence;
-		$[6] = props;
-		$[7] = reduceMotion;
-		$[8] = t1;
-		$[9] = tone;
-		$[10] = variant;
+		$[1] = action;
+		$[2] = children;
+		$[3] = className;
+		$[4] = dismissLabel;
+		$[5] = icon;
+		$[6] = onDismiss;
+		$[7] = presence;
+		$[8] = props;
+		$[9] = reduceMotion;
+		$[10] = t1;
+		$[11] = title;
 	} else {
-		children = $[1];
-		className = $[2];
-		icon = $[3];
-		onDismiss = $[4];
-		presence = $[5];
-		props = $[6];
-		reduceMotion = $[7];
-		t1 = $[8];
-		tone = $[9];
-		variant = $[10];
+		action = $[1];
+		children = $[2];
+		className = $[3];
+		dismissLabel = $[4];
+		icon = $[5];
+		onDismiss = $[6];
+		presence = $[7];
+		props = $[8];
+		reduceMotion = $[9];
+		t1 = $[10];
+		title = $[11];
 	}
-	const dismissLabel = t1 === undefined ? ALERT_DISMISS_LABEL : t1;
+	const tone = t1 === undefined ? "info" : t1;
 	const isPresent = useIsPresent();
-	const ToneIcon = tone ? TONE_ICON[tone] : null;
+	const ToneIcon = TONE_ICON[tone];
 	let t2;
-	if ($[11] !== ToneIcon || $[12] !== icon) {
-		t2 = icon === false ? null : icon ?? (ToneIcon ? /* @__PURE__ */ _jsx(ToneIcon, { "aria-hidden": "true" }) : null);
-		$[11] = ToneIcon;
-		$[12] = icon;
-		$[13] = t2;
+	if ($[12] !== ToneIcon || $[13] !== icon) {
+		t2 = icon === false ? null : icon ?? /* @__PURE__ */ _jsx(ToneIcon, { "aria-hidden": "true" });
+		$[12] = ToneIcon;
+		$[13] = icon;
+		$[14] = t2;
 	} else {
-		t2 = $[13];
+		t2 = $[14];
 	}
 	const resolvedIcon = t2;
-	const t3 = tone ? ALERT_TONE_ROLE[tone] : "alert";
+	const details = typeof children === "string" || typeof children === "number" ? String(children) : null;
+	const hasDetails = children !== undefined && children !== null && children !== false && children !== "";
+	const t3 = ALERT_TONE_ROLE[tone];
 	let t4;
-	if ($[14] !== className || $[15] !== tone || $[16] !== variant) {
-		t4 = cn(alertVariants({
-			variant,
-			tone
-		}), className);
-		$[14] = className;
-		$[15] = tone;
-		$[16] = variant;
-		$[17] = t4;
+	if ($[15] !== className) {
+		t4 = cn(alertClassName, className);
+		$[15] = className;
+		$[16] = t4;
 	} else {
-		t4 = $[17];
+		t4 = $[16];
 	}
 	let t5;
-	if ($[18] !== props || $[19] !== t3 || $[20] !== t4 || $[21] !== tone) {
+	if ($[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== tone) {
 		t5 = {
 			"data-slot": "alert",
 			"data-tone": tone,
@@ -220,109 +274,182 @@ function AlertBox(t0) {
 			className: t4,
 			...props
 		};
-		$[18] = props;
-		$[19] = t3;
-		$[20] = t4;
-		$[21] = tone;
-		$[22] = t5;
+		$[17] = props;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = tone;
+		$[21] = t5;
 	} else {
-		t5 = $[22];
+		t5 = $[21];
 	}
 	const rootProps = t5;
 	let t6;
-	if ($[23] !== icon || $[24] !== reduceMotion || $[25] !== resolvedIcon || $[26] !== tone) {
+	if ($[22] !== icon || $[23] !== reduceMotion || $[24] !== resolvedIcon || $[25] !== tone) {
 		t6 = resolvedIcon ? /* @__PURE__ */ _jsx(AlertIcon, {
 			icon: resolvedIcon,
-			iconKey: icon ? "custom" : tone ?? "custom",
+			iconKey: icon ? "custom" : tone,
+			tone,
 			reduceMotion
 		}) : null;
-		$[23] = icon;
-		$[24] = reduceMotion;
-		$[25] = resolvedIcon;
-		$[26] = tone;
-		$[27] = t6;
+		$[22] = icon;
+		$[23] = reduceMotion;
+		$[24] = resolvedIcon;
+		$[25] = tone;
+		$[26] = t6;
 	} else {
-		t6 = $[27];
+		t6 = $[26];
 	}
 	let t7;
-	if ($[28] !== dismissLabel || $[29] !== onDismiss) {
-		t7 = onDismiss ? /* @__PURE__ */ _jsx("button", {
+	if ($[27] !== reduceMotion || $[28] !== title) {
+		t7 = /* @__PURE__ */ _jsx("strong", {
+			"data-slot": "alert-title",
+			className: "relative block text-sm font-medium",
+			children: /* @__PURE__ */ _jsx(AlertText, {
+				text: title,
+				reduceMotion
+			})
+		});
+		$[27] = reduceMotion;
+		$[28] = title;
+		$[29] = t7;
+	} else {
+		t7 = $[29];
+	}
+	let t8;
+	if ($[30] !== children || $[31] !== details || $[32] !== hasDetails || $[33] !== reduceMotion) {
+		t8 = hasDetails ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "alert-description",
+			className: "relative text-xs leading-(--leading-body) text-pretty text-text-secondary [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground [&_p:not(:last-child)]:mb-4",
+			children: details === null ? children : /* @__PURE__ */ _jsx(AlertText, {
+				text: details,
+				reduceMotion
+			})
+		}) : null;
+		$[30] = children;
+		$[31] = details;
+		$[32] = hasDetails;
+		$[33] = reduceMotion;
+		$[34] = t8;
+	} else {
+		t8 = $[34];
+	}
+	let t9;
+	if ($[35] !== t7 || $[36] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "alert-copy",
+			className: "grid min-w-0 flex-[1_1_8rem] gap-(--space-1)",
+			children: [t7, t8]
+		});
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+	} else {
+		t9 = $[37];
+	}
+	let t10;
+	if ($[38] !== action) {
+		t10 = action ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "alert-action",
+			className: "flex flex-none flex-wrap items-center gap-(--space-2) self-start",
+			children: action
+		}) : null;
+		$[38] = action;
+		$[39] = t10;
+	} else {
+		t10 = $[39];
+	}
+	let t11;
+	if ($[40] !== t10 || $[41] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-start gap-(--space-3)",
+			children: [t9, t10]
+		});
+		$[40] = t10;
+		$[41] = t9;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
+	}
+	let t12;
+	if ($[43] !== dismissLabel || $[44] !== onDismiss || $[45] !== title) {
+		t12 = onDismiss ? /* @__PURE__ */ _jsx("button", {
 			type: "button",
 			"data-slot": "alert-dismiss",
-			"aria-label": dismissLabel,
+			"aria-label": dismissLabel ?? `${ALERT_DISMISS_LABEL}${ALERT_DISMISS_LABEL_SEPARATOR}${title}`,
 			onClick: onDismiss,
-			className: "absolute top-(--space-3) right-(--space-3) grid size-7 cursor-pointer place-items-center rounded-(--radius-pill) border-0 bg-transparent text-text-muted [-webkit-tap-highlight-color:transparent] transition-[scale,background-color,color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted hover-fine:text-foreground active:scale-[.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+			className: "-my-[5px] -mr-1.5 grid size-7 flex-none cursor-pointer place-items-center rounded-(--radius-pill) border-0 bg-transparent text-text-muted [-webkit-tap-highlight-color:transparent] transition-[scale,background-color,color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted hover-fine:text-foreground active:scale-[.96] motion-reduce:transition-none motion-reduce:active:scale-100",
 			children: /* @__PURE__ */ _jsx(X, {
 				className: "size-4",
 				strokeWidth: 1.75,
 				"aria-hidden": "true"
 			})
 		}) : null;
-		$[28] = dismissLabel;
-		$[29] = onDismiss;
-		$[30] = t7;
+		$[43] = dismissLabel;
+		$[44] = onDismiss;
+		$[45] = title;
+		$[46] = t12;
 	} else {
-		t7 = $[30];
+		t12 = $[46];
 	}
-	let t8;
-	if ($[31] !== children || $[32] !== t6 || $[33] !== t7) {
-		t8 = /* @__PURE__ */ _jsxs(_Fragment, { children: [
+	let t13;
+	if ($[47] !== t11 || $[48] !== t12 || $[49] !== t6) {
+		t13 = /* @__PURE__ */ _jsxs(_Fragment, { children: [
 			t6,
-			children,
-			t7
+			t11,
+			t12
 		] });
-		$[31] = children;
-		$[32] = t6;
-		$[33] = t7;
-		$[34] = t8;
+		$[47] = t11;
+		$[48] = t12;
+		$[49] = t6;
+		$[50] = t13;
 	} else {
-		t8 = $[34];
+		t13 = $[50];
 	}
-	const content = t8;
+	const content = t13;
 	if (presence) {
-		const t9 = rootProps;
-		const t10 = isPresent ? rootProps["aria-hidden"] : true;
-		const t11 = !isPresent || rootProps.inert;
-		let t12;
-		if ($[35] !== content || $[36] !== presence || $[37] !== t10 || $[38] !== t11 || $[39] !== t9) {
-			t12 = /* @__PURE__ */ _jsx(motion.div, {
-				...t9,
+		const t14 = rootProps;
+		const t15 = isPresent ? rootProps["aria-hidden"] : true;
+		const t16 = !isPresent || rootProps.inert;
+		let t17;
+		if ($[51] !== content || $[52] !== presence || $[53] !== t14 || $[54] !== t15 || $[55] !== t16) {
+			t17 = /* @__PURE__ */ _jsx(motion.div, {
+				...t14,
 				...presence,
-				"aria-hidden": t10,
-				inert: t11,
+				"aria-hidden": t15,
+				inert: t16,
 				children: content
 			});
-			$[35] = content;
-			$[36] = presence;
-			$[37] = t10;
-			$[38] = t11;
-			$[39] = t9;
-			$[40] = t12;
+			$[51] = content;
+			$[52] = presence;
+			$[53] = t14;
+			$[54] = t15;
+			$[55] = t16;
+			$[56] = t17;
 		} else {
-			t12 = $[40];
+			t17 = $[56];
 		}
-		return t12;
+		return t17;
 	}
-	let t9;
-	if ($[41] !== content || $[42] !== rootProps) {
-		t9 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t14;
+	if ($[57] !== content || $[58] !== rootProps) {
+		t14 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "message",
 			children: /* @__PURE__ */ _jsx("div", {
 				...rootProps,
 				children: content
 			})
 		});
-		$[41] = content;
-		$[42] = rootProps;
-		$[43] = t9;
+		$[57] = content;
+		$[58] = rootProps;
+		$[59] = t14;
 	} else {
-		t9 = $[43];
+		t14 = $[59];
 	}
-	return t9;
+	return t14;
 }
 /**
-* A persistent message. Compose it with `AlertTitle`, `AlertDescription` and `AlertAction`.
-* @param props - Variant, Arc tone and icon, optional presence and dismissal, plus native div attributes.
+* A persistent, in-flow message with a tone icon, a title and optional details, action and dismissal.
+* @param props - Title, tone, details, presence and dismissal, extensions and native div attributes.
 * @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
 */
 function Alert({ open, onDismiss, ref: consumerRef, ...props }) {
@@ -377,112 +504,4 @@ function Alert({ open, onDismiss, ref: consumerRef, ...props }) {
 		}, "alert") : null
 	});
 }
-function AlertTitle(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("text-sm font-medium group-has-[>svg]/alert:col-start-2 group-has-data-[slot=alert-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "alert-title",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function AlertDescription(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("text-xs leading-(--leading-body) text-pretty text-text-secondary group-has-[>svg]/alert:col-start-2 group-has-data-[slot=alert-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground [&_p:not(:last-child)]:mb-4", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "alert-description",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function AlertAction(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("absolute top-(--space-3) right-(--space-3) group-has-data-[slot=alert-dismiss]/alert:right-12", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "alert-action",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-export { Alert, AlertTitle, AlertDescription, AlertAction };
+export { Alert };