beez-ui 2.7.1 → 3.0.0

package/dist/components/dialog.js

@@ -2,564 +2,319 @@
 import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
-* attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
-* a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
-* spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
-* Arc's single `title`/`description` content.
+* attention. Arc's API (`Dialog`, `DialogTrigger`, `DialogContent` with its `title`, `description` and built-in close
+* button, `DialogClose`) on Arc's overlay, raised panel, text swap and dialog transition. beez-ui
+* extends it with a footer slot, a hidden title, the viewport close button placement, Spanish copy and an `alert` mode
+* that replaces the former `AlertDialog`.
 */
-import * as React from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
-import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
+import { createContext, useContext } from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../lib/utils.js";
-import { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
-import { Button } from "./button.js";
-import { ControlButton } from "./control-button.js";
-import { XIcon } from "lucide-react";
-import { withDialogSwapText, dialogCloseButtonClassName, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "./dialog-surface.js";
+import { AlertDialog as AlertDialogRoot, AlertDialogContent as AlertDialogContentPrimitive, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Dialog as DialogRoot, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogFooter as DialogFooterPrimitive, DialogHeader as DialogHeaderPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "./primitives/dialog.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Marks the consumer's close controls, so an alert dialog can focus the first one when it opens. */
+const DIALOG_CLOSE_ACTION_ATTRIBUTE = "data-dialog-close-action";
+/** Whether the surrounding `Dialog` runs in `alert` mode. */
+const DialogAlertContext = createContext(false);
+/**
+* Root that tracks the open state so the content can animate out. Controlled (`open`, `onOpenChange`) or uncontrolled
+* (`defaultOpen`).
+* @param props - Radix root props and `alert`.
+* @returns The dialog root.
+*/
 function Dialog(t0) {
-	const $ = _c(9);
+	const $ = _c(11);
+	let modal;
 	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
-		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Root, {
-			"data-slot": "dialog",
-			...props,
-			open: motionOpen,
-			onOpenChange: setMotionOpen
-		});
-		$[2] = motionOpen;
-		$[3] = props;
-		$[4] = setMotionOpen;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== motionOpen || $[7] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "dialog",
-			open: motionOpen,
-			children: t1
-		});
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	return t2;
-}
-function DialogTrigger(t0) {
-	const $ = _c(4);
-	let props;
 	if ($[0] !== t0) {
-		({...props} = t0);
+		({alert: t1, modal, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Trigger, {
-			"data-slot": "dialog-trigger",
-			...props
-		});
+		$[1] = modal;
 		$[2] = props;
 		$[3] = t1;
 	} else {
+		modal = $[1];
+		props = $[2];
 		t1 = $[3];
 	}
-	return t1;
-}
-function DialogPortal(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Portal, {
-			"data-slot": "dialog-portal",
+	const alert = t1 === undefined ? false : t1;
+	let t2;
+	if ($[4] !== alert || $[5] !== modal || $[6] !== props) {
+		t2 = alert ? /* @__PURE__ */ _jsx(AlertDialogRoot, { ...props }) : /* @__PURE__ */ _jsx(DialogRoot, {
+			modal,
 			...props
 		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-function DialogClose(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
+		$[4] = alert;
+		$[5] = modal;
+		$[6] = props;
+		$[7] = t2;
 	} else {
-		props = $[1];
+		t2 = $[7];
 	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
-			"data-slot": "dialog-close",
-			...props
+	let t3;
+	if ($[8] !== alert || $[9] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogAlertContext.Provider, {
+			value: alert,
+			children: t2
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[8] = alert;
+		$[9] = t2;
+		$[10] = t3;
 	} else {
-		t1 = $[3];
+		t3 = $[10];
 	}
-	return t1;
+	return t3;
 }
-function DialogOverlay(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(dialogOverlayClassName, className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DialogPrimitive.Overlay, {
-			"data-slot": "dialog-overlay",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
+/**
+* Opens the dialog. Use `asChild` to render your own button.
+* @param props - Radix trigger props.
+* @returns The trigger.
+*/
+function DialogTrigger(props) {
+	return useContext(DialogAlertContext) ? /* @__PURE__ */ _jsx(AlertDialogTrigger, { ...props }) : /* @__PURE__ */ _jsx(DialogTriggerPrimitive, { ...props });
 }
 /**
-* Renders a close button pinned to the viewport corner. It stays hidden while the panel
-* enters, because the entrance transform would otherwise carry it along with the panel, and
-* fades in once the panel settles. It hides at once when the dialog starts closing.
-* While hidden it is also `visibility: hidden`, so the dialog's initial focus and the
-* keyboard can never land on a control that cannot be seen.
-* @returns The close control for wide layouts that keep the panel clear of controls.
+* Closes the dialog from a custom control, such as a cancel button. In `alert` mode it cancels the confirmation, and
+* the first one receives the focus when the dialog opens.
+* @param props - Radix close props.
+* @returns The close control.
 */
-function DialogViewportCloseButton() {
-	const $ = _c(2);
+function DialogClose(props) {
+	const $ = _c(1);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = cn(dialogCloseButtonClassName, "fixed top-4 right-4 transition-opacity duration-200 ease-out in-data-motion-entering:invisible in-data-motion-entering:opacity-0 in-data-motion-entering:transition-none in-data-[state=closed]:invisible in-data-[state=closed]:opacity-0 in-data-[state=closed]:transition-none motion-reduce:transition-none");
+		t0 = { [DIALOG_CLOSE_ACTION_ATTRIBUTE]: "" };
 		$[0] = t0;
 	} else {
 		t0 = $[0];
 	}
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
-			"data-slot": "dialog-close",
-			asChild: true,
-			children: /* @__PURE__ */ _jsxs(ControlButton, {
-				variant: "ghost",
-				className: t0,
-				size: "icon-sm",
-				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-					className: "sr-only",
-					children: "Cerrar"
-				})]
-			})
-		});
-		$[1] = t1;
-	} else {
-		t1 = $[1];
-	}
-	return t1;
+	const closeActionProps = t0;
+	return useContext(DialogAlertContext) ? /* @__PURE__ */ _jsx(AlertDialogPrimitive.Cancel, {
+		"data-slot": "dialog-close",
+		...closeActionProps,
+		...props
+	}) : /* @__PURE__ */ _jsx(DialogClosePrimitive, {
+		...closeActionProps,
+		...props
+	});
 }
 /**
-* Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
-* from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
-* @param props - Primitive properties and optional consumer overrides.
-* @param props.showCloseButton - Whether the dialog renders its own close button.
-* @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
-* and shows it only once the panel has settled; `content` (default) keeps it in the panel.
-* @returns The styled primitive with its original interaction contract.
+* Focuses the first consumer close control of an alert dialog when it opens, or the panel when there is none.
+* @param event - Radix's open auto-focus event, already handed to the consumer's handler.
+*/
+function focusFirstCloseAction(event) {
+	if (event.defaultPrevented) return;
+	const panel = event.currentTarget ?? event.target;
+	if (!(panel instanceof HTMLElement)) return;
+	event.preventDefault();
+	const firstCloseAction = panel.querySelector(`[${DIALOG_CLOSE_ACTION_ATTRIBUTE}]`);
+	(firstCloseAction ?? panel).focus({ preventScroll: true });
+}
+/**
+* The portaled overlay and panel with a titled header, the body, an optional footer and the built-in close button.
+* @param props - Title, header content, description, body, footer, close button options and ref, part classes and
+*   Radix content props.
+* @returns The dialog panel.
 */
 function DialogContent(t0) {
-	const $ = _c(29);
+	const $ = _c(60);
 	let children;
-	let className;
+	let closeButtonRef;
+	let closeLabel;
+	let description;
+	let descriptionClassName;
+	let footer;
+	let footerClassName;
+	let headerClassName;
+	let headerContent;
+	let onOpenAutoFocus;
 	let props;
+	let showCloseButton;
 	let t1;
 	let t2;
+	let title;
+	let titleClassName;
 	if ($[0] !== t0) {
-		({className, children, showCloseButton: t1, closeButtonPlacement: t2, ...props} = t0);
+		({title, description, children, footer, hideTitle: t1, showCloseButton, closeButtonPlacement: t2, closeLabel, closeButtonRef, headerContent, headerClassName, titleClassName, descriptionClassName, footerClassName, onOpenAutoFocus, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = t2;
+		$[2] = closeButtonRef;
+		$[3] = closeLabel;
+		$[4] = description;
+		$[5] = descriptionClassName;
+		$[6] = footer;
+		$[7] = footerClassName;
+		$[8] = headerClassName;
+		$[9] = headerContent;
+		$[10] = onOpenAutoFocus;
+		$[11] = props;
+		$[12] = showCloseButton;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = title;
+		$[16] = titleClassName;
 	} else {
 		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		t2 = $[5];
-	}
-	const showCloseButton = t1 === undefined ? true : t1;
+		closeButtonRef = $[2];
+		closeLabel = $[3];
+		description = $[4];
+		descriptionClassName = $[5];
+		footer = $[6];
+		footerClassName = $[7];
+		headerClassName = $[8];
+		headerContent = $[9];
+		onOpenAutoFocus = $[10];
+		props = $[11];
+		showCloseButton = $[12];
+		t1 = $[13];
+		t2 = $[14];
+		title = $[15];
+		titleClassName = $[16];
+	}
+	const hideTitle = t1 === undefined ? false : t1;
 	const closeButtonPlacement = t2 === undefined ? "content" : t2;
-	const t3 = props.forceMount;
-	let t4;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "overlay",
-			children: /* @__PURE__ */ _jsx(DialogOverlay, { forceMount: true })
+	const alert = useContext(DialogAlertContext);
+	const Content = alert ? AlertDialogContentPrimitive : DialogContentPrimitive;
+	const Header = alert ? AlertDialogHeader : DialogHeaderPrimitive;
+	const Title = alert ? AlertDialogTitle : DialogTitlePrimitive;
+	const Description = alert ? AlertDialogDescription : DialogDescriptionPrimitive;
+	const Footer = alert ? AlertDialogFooter : DialogFooterPrimitive;
+	const hasDescription = description !== undefined && description !== null && description !== false;
+	const hasHeaderContent = headerContent !== undefined && headerContent !== null && headerContent !== false;
+	let t3;
+	if ($[17] !== hasDescription || $[18] !== props) {
+		t3 = hasDescription || "aria-describedby" in props ? {} : { "aria-describedby": undefined };
+		$[17] = hasDescription;
+		$[18] = props;
+		$[19] = t3;
+	} else {
+		t3 = $[19];
+	}
+	const describedBy = t3;
+	const t4 = hideTitle && "sr-only";
+	let t5;
+	if ($[20] !== t4 || $[21] !== titleClassName) {
+		t5 = cn(t4, titleClassName);
+		$[20] = t4;
+		$[21] = titleClassName;
+		$[22] = t5;
+	} else {
+		t5 = $[22];
+	}
+	let t6;
+	if ($[23] !== Title || $[24] !== t5 || $[25] !== title) {
+		t6 = /* @__PURE__ */ _jsx(Title, {
+			className: t5,
+			children: title
 		});
-		$[6] = t4;
+		$[23] = Title;
+		$[24] = t5;
+		$[25] = title;
+		$[26] = t6;
 	} else {
-		t4 = $[6];
+		t6 = $[26];
 	}
-	const t5 = showCloseButton ? closeButtonPlacement : undefined;
-	const t6 = closeButtonPlacement === "viewport" ? "inset-0 m-auto h-fit" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+	const titleElement = t6;
 	let t7;
-	if ($[7] !== className || $[8] !== t6) {
-		t7 = cn(dialogSurfaceClassName, "fixed grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain sm:max-w-[440px]", t6, className);
-		$[7] = className;
-		$[8] = t6;
-		$[9] = t7;
-	} else {
-		t7 = $[9];
-	}
-	let t8;
-	if ($[10] !== props.onInteractOutside) {
-		t8 = keepOpenOnToastInteraction(props.onInteractOutside);
-		$[10] = props.onInteractOutside;
-		$[11] = t8;
-	} else {
-		t8 = $[11];
-	}
+	if ($[27] !== Description || $[28] !== description || $[29] !== descriptionClassName || $[30] !== hasDescription) {
+		t7 = hasDescription ? /* @__PURE__ */ _jsx(Description, {
+			className: descriptionClassName,
+			children: description
+		}) : null;
+		$[27] = Description;
+		$[28] = description;
+		$[29] = descriptionClassName;
+		$[30] = hasDescription;
+		$[31] = t7;
+	} else {
+		t7 = $[31];
+	}
+	const descriptionElement = t7;
+	const t8 = showCloseButton ?? !alert;
 	let t9;
-	if ($[12] !== closeButtonPlacement || $[13] !== showCloseButton) {
-		t9 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
-		$[12] = closeButtonPlacement;
-		$[13] = showCloseButton;
-		$[14] = t9;
-	} else {
-		t9 = $[14];
-	}
-	let t10;
-	if ($[15] !== closeButtonPlacement || $[16] !== showCloseButton) {
-		t10 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
-			"data-slot": "dialog-close",
-			asChild: true,
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "delayed-pop",
-				children: /* @__PURE__ */ _jsxs(ControlButton, {
-					variant: "ghost",
-					className: cn(dialogCloseButtonClassName, "absolute top-[calc(var(--space-6)+(var(--text-lg)*var(--leading-body)-var(--space-8))/2)] right-(--space-6)"),
-					size: "icon-sm",
-					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-						className: "sr-only",
-						children: "Cerrar"
-					})]
-				})
-			})
-		});
-		$[15] = closeButtonPlacement;
-		$[16] = showCloseButton;
-		$[17] = t10;
-	} else {
-		t10 = $[17];
-	}
+	if ($[32] !== alert || $[33] !== onOpenAutoFocus) {
+		t9 = (event) => {
+			onOpenAutoFocus?.(event);
+			if (alert) {
+				focusFirstCloseAction(event);
+			}
+		};
+		$[32] = alert;
+		$[33] = onOpenAutoFocus;
+		$[34] = t9;
+	} else {
+		t9 = $[34];
+	}
+	const t10 = hideTitle ? titleElement : null;
 	let t11;
-	if ($[18] !== children || $[19] !== props || $[20] !== t10 || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
-		t11 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "dialog",
-			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
-				forceMount: true,
-				"data-slot": "dialog-content",
-				"data-close-button-placement": t5,
-				className: t7,
-				...props,
-				onInteractOutside: t8,
-				children: [
-					children,
-					t9,
-					t10
-				]
-			})
-		})] });
-		$[18] = children;
-		$[19] = props;
-		$[20] = t10;
-		$[21] = t5;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-		$[25] = t11;
-	} else {
-		t11 = $[25];
+	if ($[35] !== Header || $[36] !== descriptionElement || $[37] !== hasHeaderContent || $[38] !== headerClassName || $[39] !== headerContent || $[40] !== hideTitle || $[41] !== titleElement) {
+		t11 = !hideTitle || descriptionElement || hasHeaderContent ? /* @__PURE__ */ _jsxs(Header, {
+			className: headerClassName,
+			children: [
+				hideTitle ? null : titleElement,
+				hasHeaderContent ? headerContent : null,
+				descriptionElement
+			]
+		}) : null;
+		$[35] = Header;
+		$[36] = descriptionElement;
+		$[37] = hasHeaderContent;
+		$[38] = headerClassName;
+		$[39] = headerContent;
+		$[40] = hideTitle;
+		$[41] = titleElement;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
 	}
 	let t12;
-	if ($[26] !== props.forceMount || $[27] !== t11) {
-		t12 = /* @__PURE__ */ _jsx(DialogPortal, {
-			forceMount: true,
-			children: /* @__PURE__ */ _jsx(MotionPresence, {
-				scope: "dialog",
-				forceMount: t3,
-				children: t11
-			})
-		});
-		$[26] = props.forceMount;
-		$[27] = t11;
-		$[28] = t12;
-	} else {
-		t12 = $[28];
-	}
-	return t12;
-}
-/**
-* Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so
-* long copy never runs under the button.
-* @param props - Native div properties and optional consumer overrides.
-* @returns The header block.
-*/
-function DialogHeader(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("flex flex-col gap-(--space-2) in-data-[close-button-placement=content]:pr-[calc(var(--space-8)+var(--space-5))]", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "dialog-header",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-/**
-* Separates dialog actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DialogFooter(t0) {
-	const $ = _c(14);
-	let children;
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, showCloseButton: t1, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-	}
-	const showCloseButton = t1 === undefined ? false : t1;
-	let t2;
-	if ($[5] !== className) {
-		t2 = cn(dialogFooterClassName, className);
-		$[5] = className;
-		$[6] = t2;
-	} else {
-		t2 = $[6];
-	}
-	let t3;
-	if ($[7] !== showCloseButton) {
-		t3 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
-			asChild: true,
-			children: /* @__PURE__ */ _jsx(Button, {
-				variant: "secondary",
-				children: "Cerrar"
-			})
-		});
-		$[7] = showCloseButton;
-		$[8] = t3;
-	} else {
-		t3 = $[8];
-	}
-	let t4;
-	if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
-		t4 = /* @__PURE__ */ _jsxs("div", {
-			"data-slot": "dialog-footer",
-			className: t2,
-			...props,
-			children: [children, t3]
-		});
-		$[9] = children;
-		$[10] = props;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t4;
-	} else {
-		t4 = $[13];
-	}
-	return t4;
-}
-/**
-* Renders the dialog heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DialogTitle(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn(dialogTitleClassName, className);
-		$[4] = className;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== children || $[7] !== props.asChild) {
-		t2 = withDialogSwapText(children, props.asChild);
-		$[6] = children;
-		$[7] = props.asChild;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	let t3;
-	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Title, {
-			"data-slot": "dialog-title",
-			className: t1,
-			...props,
-			children: t2
+	if ($[43] !== Footer || $[44] !== footer || $[45] !== footerClassName) {
+		t12 = footer === undefined || footer === null || footer === false ? null : /* @__PURE__ */ _jsx(Footer, {
+			className: footerClassName,
+			children: footer
 		});
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-	} else {
-		t3 = $[12];
-	}
-	return t3;
-}
-/**
-* Renders the dialog description in Arc's secondary text. Plain text that changes while open swaps with Arc's rise.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DialogDescription(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn(dialogDescriptionClassName, className);
-		$[4] = className;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== children || $[7] !== props.asChild) {
-		t2 = withDialogSwapText(children, props.asChild);
-		$[6] = children;
-		$[7] = props.asChild;
-		$[8] = t2;
+		$[43] = Footer;
+		$[44] = footer;
+		$[45] = footerClassName;
+		$[46] = t12;
 	} else {
-		t2 = $[8];
+		t12 = $[46];
 	}
-	let t3;
-	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Description, {
-			"data-slot": "dialog-description",
-			className: t1,
+	let t13;
+	if ($[47] !== Content || $[48] !== children || $[49] !== closeButtonPlacement || $[50] !== closeButtonRef || $[51] !== closeLabel || $[52] !== describedBy || $[53] !== props || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t8 || $[58] !== t9) {
+		t13 = /* @__PURE__ */ _jsxs(Content, {
+			...describedBy,
 			...props,
-			children: t2
+			showCloseButton: t8,
+			closeButtonPlacement,
+			closeLabel,
+			closeButtonRef,
+			onOpenAutoFocus: t9,
+			children: [
+				t10,
+				t11,
+				children,
+				t12
+			]
 		});
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-	} else {
-		t3 = $[12];
-	}
-	return t3;
+		$[47] = Content;
+		$[48] = children;
+		$[49] = closeButtonPlacement;
+		$[50] = closeButtonRef;
+		$[51] = closeLabel;
+		$[52] = describedBy;
+		$[53] = props;
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t8;
+		$[58] = t9;
+		$[59] = t13;
+	} else {
+		t13 = $[59];
+	}
+	return t13;
 }
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog, DialogClose, DialogContent, DialogTrigger };