react-confirm-alert 3.1.1 → 3.3.0

package/lib/index.js

@@ -163,6 +163,7 @@ var slotsFor = (layers) => (slot, extra) => ({
 });
 var SlotContext = (0, react.createContext)(slotsFor([]));
 var useSlot = () => (0, react.useContext)(SlotContext);
+var FrameContext = (0, react.createContext)({});
 function configureDialogs(defaults) {
 	runtime().defaults = defaults;
 }
@@ -217,6 +218,7 @@ function EntryView({ entry, depth, topmost }) {
 		closeOnClickOutside: (_ref2 = (_options$closeOnClick = options.closeOnClickOutside) !== null && _options$closeOnClick !== void 0 ? _options$closeOnClick : defaults.closeOnClickOutside) !== null && _ref2 !== void 0 ? _ref2 : true,
 		closeOnEscape: (_ref3 = (_options$closeOnEscap = options.closeOnEscape) !== null && _options$closeOnEscap !== void 0 ? _options$closeOnEscap : defaults.closeOnEscape) !== null && _ref3 !== void 0 ? _ref3 : true,
 		legacy: !!options.legacy,
+		skin: options.skin,
 		onClickOutside: options.onClickOutside,
 		onDismiss: dismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
@@ -225,6 +227,7 @@ function EntryView({ entry, depth, topmost }) {
 			descriptionId,
 			title: options.title,
 			message: options.message,
+			content: options.content,
 			buttons: (_options$buttons = options.buttons) !== null && _options$buttons !== void 0 ? _options$buttons : [],
 			close,
 			dismiss,
@@ -352,7 +355,7 @@ function closeDialog$1(id, { sync = true } = {}) {
 		commit(() => store.set(remove(store.get(), id)), sync);
 		return;
 	}
-	Promise.all(exits.map((a) => a.finished)).finally(() => store.set(remove(store.get(), id)));
+	Promise.all(exits.map((a) => a.finished.catch(() => {}))).then(() => store.set(remove(store.get(), id)));
 }
 var reopenQueued = false;
 function reopenClosedFrames() {
@@ -378,12 +381,15 @@ function animationsOf({ frame, panel }) {
 // src/DialogFrame.tsx
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 function DialogFrame(props) {
-	var _props$tone, _props$depth, _props$topmost;
+	var _props$labelledBy, _props$tone, _props$depth, _props$topmost, _props$labelledBy2;
 	const frame = (0, react.useRef)(null);
 	const panel = (0, react.useRef)(null);
 	const pressedOn = (0, react.useRef)(null);
 	const stay = (0, react.useRef)(null);
 	const native = props.modal && canShowModal();
+	const layoutTitleId = (0, react.useId)();
+	const [layoutTitles, setLayoutTitles] = (0, react.useState)(0);
+	const labelledBy = (_props$labelledBy = props.labelledBy) !== null && _props$labelledBy !== void 0 ? _props$labelledBy : props.label || layoutTitles === 0 ? void 0 : layoutTitleId;
 	(0, react.useLayoutEffect)(() => {
 		var _panel$current, _panel$current2, _panel$current3;
 		const element = frame.current;
@@ -444,7 +450,10 @@ function DialogFrame(props) {
 	const isBusy = () => !!props.id && runtime().busy.has(props.id);
 	const onKeyDown = (e) => {
 		var _props$onKeyDown;
-		(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, props.onDismiss);
+		(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, () => {
+			e.preventDefault();
+			props.onDismiss();
+		});
 		if (!native && !props.legacy && e.key === "Escape" && props.closeOnEscape && !isBusy()) props.onDismiss();
 	};
 	const slot = slotsFor(props.layers);
@@ -452,11 +461,12 @@ function DialogFrame(props) {
 		...slot("dialog", props.extraClass),
 		role: props.role,
 		"aria-label": props.label,
-		"aria-labelledby": props.labelledBy,
+		"aria-labelledby": labelledBy,
 		"aria-describedby": props.describedBy,
 		"data-rca": "",
 		"data-state": props.state,
 		"data-kind": props.kind,
+		"data-skin": props.legacy && !props.skin ? void 0 : "",
 		"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
 		"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
 		"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
@@ -470,7 +480,14 @@ function DialogFrame(props) {
 		tabIndex: -1,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotContext.Provider, {
 			value: slot,
-			children: props.children
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					id: props.id,
+					titleId: (_props$labelledBy2 = props.labelledBy) !== null && _props$labelledBy2 !== void 0 ? _props$labelledBy2 : layoutTitleId,
+					countTitle: setLayoutTitles
+				},
+				children: props.children
+			})
 		})
 	});
 	return native ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
@@ -500,7 +517,7 @@ var defaultButtons = [{
 function CustomUIHost({ render, args }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: render(args) });
 }
-function LegacyContent({ props, titleId, close, id }) {
+function LegacyContent({ props, titleId, close, id, skin }) {
 	var _props$buttons;
 	const latest = (0, react.useRef)({
 		props,
@@ -514,7 +531,12 @@ function LegacyContent({ props, titleId, close, id }) {
 		const keyboard = (event) => {
 			var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
 			if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
-			const { props, close } = latest.current;
+			if (id && runtime().busy.has(id)) return;
+			const { props } = latest.current;
+			const close = () => {
+				event.preventDefault();
+				latest.current.close();
+			};
 			const keyCode = event.keyCode;
 			if (((_props$keyCodeForClos = props.keyCodeForClose) !== null && _props$keyCodeForClos !== void 0 ? _props$keyCodeForClos : []).includes(keyCode)) close();
 			if (((_props$closeOnEscape = props.closeOnEscape) !== null && _props$closeOnEscape !== void 0 ? _props$closeOnEscape : true) && keyCode === 27) {
@@ -528,17 +550,30 @@ function LegacyContent({ props, titleId, close, id }) {
 		return () => document.removeEventListener("keydown", keyboard, false);
 	}, []);
 	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
 	const { title, message, customUI, childrenElement } = props;
 	const buttons = (_props$buttons = props.buttons) !== null && _props$buttons !== void 0 ? _props$buttons : defaultButtons;
-	if (customUI) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomUIHost, {
-		render: customUI,
-		args: {
-			title,
-			message,
-			buttons,
-			onClose: close
-		}
-	});
+	if (customUI) {
+		const ui = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomUIHost, {
+			render: customUI,
+			args: {
+				title,
+				message,
+				buttons,
+				onClose: close
+			}
+		});
+		return skin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...slot("body"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: ui
+			})
+		}) : ui;
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...slot("body"),
 		children: [
@@ -565,19 +600,21 @@ function LegacyContent({ props, titleId, close, id }) {
 	});
 }
 function confirmAlert(properties) {
-	var _ref, _properties$modal, _runtime$defaults$con, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref2, _properties$strategy, _runtime$defaults$con2;
+	var _ref, _properties$skin, _runtime$defaults$con, _ref2, _properties$modal, _runtime$defaults$con2, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref3, _properties$strategy, _runtime$defaults$con3;
+	const skin = (_ref = (_properties$skin = properties.skin) !== null && _properties$skin !== void 0 ? _properties$skin : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.skin) !== null && _ref !== void 0 ? _ref : false;
 	function Content({ id, titleId, dismiss }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegacyContent, {
 			props: properties,
 			titleId,
 			close: dismiss,
-			id
+			id,
+			skin
 		});
 	}
 	openEntry({
 		kind: "custom",
 		title: properties.title,
-		modal: (_ref = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.modal) !== null && _ref !== void 0 ? _ref : false,
+		modal: (_ref2 = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.modal) !== null && _ref2 !== void 0 ? _ref2 : false,
 		unstyled: properties.unstyled,
 		classNames: properties.classNames,
 		closeOnClickOutside: (_properties$closeOnCl = properties.closeOnClickOutside) !== null && _properties$closeOnCl !== void 0 ? _properties$closeOnCl : true,
@@ -585,18 +622,20 @@ function confirmAlert(properties) {
 		overlayClassName: properties.overlayClassName,
 		onClickOutside: properties.onClickOutside,
 		legacy: true,
+		skin,
 		willUnmount: properties.willUnmount,
 		afterClose: properties.afterClose,
 		render: Content
-	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref2 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.strategy) !== null && _ref2 !== void 0 ? _ref2 : "replace");
+	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref3 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con3 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con3 === void 0 ? void 0 : _runtime$defaults$con3.strategy) !== null && _ref3 !== void 0 ? _ref3 : "replace");
 }
 function DeclarativeDialog(props) {
-	var _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
+	var _ref4, _props$skin, _runtime$defaults$con4, _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
 	const titleId = (0, react.useId)();
 	const close = () => {
 		var _props$afterClose;
 		return (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 ? void 0 : _props$afterClose.call(props);
 	};
+	const skin = (_ref4 = (_props$skin = props.skin) !== null && _props$skin !== void 0 ? _props$skin : (_runtime$defaults$con4 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con4 === void 0 ? void 0 : _runtime$defaults$con4.skin) !== null && _ref4 !== void 0 ? _ref4 : false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFrame, {
 		modal: (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : false,
 		state: "open",
@@ -610,13 +649,15 @@ function DeclarativeDialog(props) {
 		closeOnClickOutside: (_props$closeOnClickOu = props.closeOnClickOutside) !== null && _props$closeOnClickOu !== void 0 ? _props$closeOnClickOu : true,
 		closeOnEscape: (_props$closeOnEscape2 = props.closeOnEscape) !== null && _props$closeOnEscape2 !== void 0 ? _props$closeOnEscape2 : true,
 		legacy: true,
+		skin,
 		role: "dialog",
 		onClickOutside: props.onClickOutside,
 		onDismiss: close,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegacyContent, {
 			props,
 			titleId,
-			close
+			close,
+			skin
 		})
 	});
 }
@@ -667,6 +708,7 @@ function open(options, dismissValue, body) {
 }
 function Body({ props, children }) {
 	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...slot("body"),
 		children: [
@@ -675,22 +717,42 @@ function Body({ props, children }) {
 				...slot("title"),
 				children: props.title
 			}),
-			props.message != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			props.message != null && (typeof props.message === "object" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: props.descriptionId,
+				...slot("message"),
+				children: props.message
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				id: props.descriptionId,
 				...slot("message"),
 				children: props.message
+			})),
+			props.content != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: props.content
 			}),
 			children
 		]
 	});
 }
-function Buttons({ props, signal: getSignal, focus }) {
-	const slot = useSlot();
+function useBusy(id) {
 	const [busy, setBusy] = (0, react.useState)(null);
-	const markBusy = (on) => {
-		var _runtime$frames$get;
-		return (_runtime$frames$get = runtime().frames.get(props.id)) === null || _runtime$frames$get === void 0 ? void 0 : _runtime$frames$get.frame.toggleAttribute("data-busy", on);
+	const mark = (index) => {
+		if (id) {
+			var _runtime$frames$get;
+			(_runtime$frames$get = runtime().frames.get(id)) === null || _runtime$frames$get === void 0 || _runtime$frames$get.frame.toggleAttribute("data-busy", index !== null);
+			if (index === null) runtime().busy.delete(id);
+			else runtime().busy.add(id);
+		}
+		setBusy(index);
 	};
+	return [busy, mark];
+}
+function Buttons({ props, signal: getSignal, focus }) {
+	const slot = useSlot();
+	const [busy, setBusy] = useBusy(props.id);
 	const press = async (button, index) => {
 		const signal = getSignal();
 		let waiting = false;
@@ -707,16 +769,11 @@ function Buttons({ props, signal: getSignal, focus }) {
 			}
 			waiting = true;
 			setBusy(index);
-			markBusy(true);
-			runtime().busy.add(props.id);
 			if (await outcome !== false && !signal.aborted) props.close(button.value);
 		} catch (error) {
 			console.error(error);
 		} finally {
-			if (!waiting) return;
-			runtime().busy.delete(props.id);
-			markBusy(false);
-			if (!signal.aborted) setBusy(null);
+			if (waiting) setBusy(null);
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -988,6 +1045,7 @@ function ConfirmDialog(props) {
 		descriptionId,
 		title: props.title,
 		message: props.message,
+		content: props.content,
 		dismiss: hide,
 		onClose: hide
 	};
@@ -1059,9 +1117,59 @@ function ConfirmDialog(props) {
 		children: body
 	});
 }
+// src/DialogLayout.tsx
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+function DialogLayout({ title, message, actions, children }) {
+	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
+	const [busy, setBusy] = useBusy(frame.id);
+	const hasTitle = title != null;
+	const { countTitle } = frame;
+	(0, react.useLayoutEffect)(() => {
+		if (!hasTitle || !countTitle) return;
+		countTitle((n) => n + 1);
+		return () => countTitle((n) => n - 1);
+	}, [hasTitle, countTitle]);
+	const Body = frame.inBody ? react.Fragment : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Body, {
+		...frame.inBody ? {} : slot("body"),
+		children: [
+			title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				id: frame.titleId,
+				...slot("title"),
+				children: title
+			}),
+			message != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...slot("message"),
+				children: message
+			}),
+			children,
+			actions && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...slot("actions"),
+				children: actions.map(({ label, variant = "secondary", onClick, disabled, className, ...rest }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					...rest,
+					...slot("button", className),
+					"data-variant": variant,
+					"data-busy": busy === i ? "" : void 0,
+					"aria-busy": busy === i || void 0,
+					disabled: disabled || busy !== null,
+					onClick: (event) => {
+						const outcome = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+						if (!(outcome instanceof Promise)) return;
+						setBusy(i);
+						outcome.catch((error) => console.error(error)).finally(() => setBusy(null));
+					},
+					children: label
+				}, i))
+			})
+		]
+	});
+}
 exports.ConfirmDialog = ConfirmDialog;
 exports.Dialog = Dialog;
 exports.DialogHost = DialogHost;
+exports.DialogLayout = DialogLayout;
 exports.alert = alert;
 exports.closeAll = closeAll;
 exports.closeDialog = closeDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-alert",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
   "module": "dist/index.esm.js",
@@ -61,6 +61,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "size-limit": "^14.3.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"

package/src/react-confirm-alert.css

@@ -32,6 +32,8 @@ body.react-confirm-alert-body-element {
   border-radius: var(--rca-radius, 10px);
   box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
   color: var(--rca-fg, #666);
+  /* confirmAlert renders message as text right in the body; keep its line breaks (#38). */
+  white-space: pre-line;
 }
 
 .react-confirm-alert-body > h1 {
@@ -125,3 +127,234 @@ dialog.react-confirm-alert-overlay::backdrop {
     opacity: 1;
   }
 }
+
+/* The default look of every dialog except confirmAlert, which has no data-skin and keeps the 3.0 look above; unstyled drops the overlay class, so none of this applies.
+   --_* are internal defaults: a --rca-* variable set by the app always wins over them. */
+.react-confirm-alert-overlay[data-skin] {
+  --_bg: #fff;
+  --_fg: #71717a;
+  --_title: #09090b;
+  --_border: #e4e4e7;
+  --_hover: #f4f4f5;
+  --_primary: #18181b;
+  --_primary-fg: #fff;
+  --_ring: #a1a1aa;
+  --_danger: #dc2626;
+  --_error: #dc2626;
+  box-sizing: border-box;
+  padding: 16px;
+  background: var(--rca-backdrop, rgba(0, 0, 0, 0.5));
+  opacity: 1;
+  animation: rca-in var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
+}
+/* Dark is opt-in: the app's .dark class or data-theme="dark" on an ancestor, usually <html>. */
+:is(.dark, [data-theme=dark]) .react-confirm-alert-overlay[data-skin] {
+  --_bg: #18181b;
+  --_fg: #a1a1aa;
+  --_title: #fafafa;
+  --_border: #3f3f46;
+  --_hover: #27272a;
+  --_primary: #fafafa;
+  --_primary-fg: #18181b;
+  --_ring: #71717a;
+  --_error: #f87171;
+  color-scheme: dark;
+  background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
+  max-width: 100%;
+  animation: rca-pop var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-body {
+  box-sizing: border-box;
+  width: var(--rca-width, 420px);
+  max-width: 100%;
+  padding: var(--rca-padding, 24px);
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: var(--rca-radius, 10px);
+  background: var(--rca-bg, var(--_bg));
+  box-shadow: var(--rca-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+  color: var(--rca-fg, var(--_fg));
+  font-family: var(--rca-font, inherit);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.react-confirm-alert-overlay[data-skin][data-state=closing] {
+  animation: rca-out 150ms ease-in both;
+}
+.react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
+  animation: rca-pop-out 150ms ease-in both;
+}
+/* Plain elements inside a skinned dialog look like the slots. Their selectors are type selectors under
+   :where(), so they beat a CSS reset such as Tailwind preflight and lose to any class you add. */
+.react-confirm-alert-overlay[data-skin] [data-slot=title],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(h1, h2, h3) {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--rca-title, var(--_title));
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=field] {
+  margin-top: 16px;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=label],
+:where(.react-confirm-alert-overlay[data-skin]) div label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rca-title, var(--_title));
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image])), textarea, select) {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rca-title, var(--_title));
+  font: inherit;
+  outline: none;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.react-confirm-alert-overlay[data-skin] textarea[data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div textarea {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 12px;
+  resize: vertical;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus,
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where(:focus) {
+  border-color: var(--rca-ring, var(--_ring));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where([aria-invalid=true]) {
+  border-color: var(--rca-danger, var(--_error));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
+}
+:where(.react-confirm-alert-overlay[data-skin]) div p {
+  margin: 0;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div input:where([type=checkbox], [type=radio]) {
+  accent-color: var(--rca-button-bg, var(--_primary));
+}
+:where(.react-confirm-alert-overlay[data-skin]) div * + :is(p, label, input, textarea, select) {
+  margin-top: 12px;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div label + :is(input, textarea, select) {
+  margin-top: 0;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=error] {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--rca-danger, var(--_error));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
+  justify-content: flex-end;
+  gap: var(--rca-gap, 8px);
+  margin-top: 24px;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button,
+:where(.react-confirm-alert-overlay[data-skin]) div button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  margin: 0;
+  padding: 0 16px;
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: var(--rca-button-radius, 6px);
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-title, var(--_title));
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 150ms, transform 150ms;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]) {
+  border-color: transparent;
+  background: var(--rca-button-bg, var(--_primary));
+  color: var(--rca-button-fg, var(--_primary-fg));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]) {
+  border-color: transparent;
+  background: var(--rca-danger, var(--_danger));
+  color: #fff;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :not([data-variant=primary],[data-variant=danger]):enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:not([data-variant=primary],[data-variant=danger]):enabled:hover) {
+  background: var(--_hover);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]:enabled:hover) {
+  background: var(--rca-button-bg-hover, color-mix(in srgb, var(--rca-button-bg, var(--_primary)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]:enabled:hover) {
+  background: var(--rca-danger-hover, color-mix(in srgb, var(--rca-danger, var(--_danger)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:active) {
+  transform: scale(0.97);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:focus-visible) {
+  outline: var(--rca-focus-ring, 2px solid var(--_ring));
+  outline-offset: 2px;
+}
+/* Not faded: white on a faded red is below 4.5:1. */
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled:not([aria-busy=true]),
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:disabled:not([aria-busy=true])) {
+  cursor: default;
+  border-color: var(--rca-border, var(--_border));
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-fg, var(--_fg));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true]) {
+  cursor: progress;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true])::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: rca-spin 700ms linear infinite;
+}
+@media (max-width: 480px) {
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
+    flex-direction: column-reverse;
+  }
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+    height: 40px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-confirm-alert-overlay[data-skin],
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert {
+    animation: none;
+  }
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+    transition: none;
+  }
+}
+@keyframes rca-in { from { opacity: 0; } }
+@keyframes rca-out { to { opacity: 0; } }
+@keyframes rca-pop { from { opacity: 0; transform: scale(0.95); } }
+@keyframes rca-pop-out { to { opacity: 0; transform: scale(0.95); } }
+@keyframes rca-spin { to { transform: rotate(360deg); } }