@dataemergencia/emergency 0.3.0 → 0.4.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { createRoot } from "react-dom/client";
 import axios, { isAxiosError } from "axios";
 import Pusher from "pusher-js";
 import { createStore } from "zustand/vanilla";
-import { createContext, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 
@@ -362,6 +362,7 @@ function createBffClient(options) {
 const copy = {
 	panelLabel: "Panel de emergencia",
 	close: "Cerrar panel de emergencia",
+	back: "Volver",
 	question: "¿Tiene usted una emergencia?",
 	illustrationAlt: "Ícono paramédico",
 	emergency: "Emergencia",
@@ -1440,74 +1441,6 @@ function validateConfig(config) {
 	};
 }
 
-// src/react/components/icons/paramedical-mark.tsx
-/**
-* Neutral inline illustration used by the idle panel.
-*/
-function ParamedicalMark({ className, title }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		version: "1.0",
-		viewBox: "0 0 192 192",
-		width: "192",
-		height: "192",
-		id: "Star of life",
-		className,
-		"aria-label": title,
-		children: [
-			/* @__PURE__ */ jsx("defs", { id: "defs2886" }),
-			/* @__PURE__ */ jsxs("g", {
-				id: "cross",
-				children: [/* @__PURE__ */ jsx("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "outline",
-					style: {
-						fill: "none",
-						stroke: "#3333bb",
-						strokeWidth: 6
-					}
-				}), /* @__PURE__ */ jsx("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "inner",
-					style: {
-						fill: "#0000bb",
-						fillRule: "evenodd",
-						stroke: "#ffffff",
-						strokeWidth: 2
-					}
-				})]
-			}),
-			/* @__PURE__ */ jsxs("g", {
-				id: "symbols",
-				style: {
-					fill: "#ffffff",
-					fillRule: "evenodd",
-					stroke: "#3333bb",
-					strokeWidth: 2
-				},
-				children: [/* @__PURE__ */ jsx("path", {
-					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
-					id: "rod"
-				}), /* @__PURE__ */ jsxs("g", {
-					id: "snake",
-					children: [/* @__PURE__ */ jsx("path", {
-						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
-						id: "body"
-					}), /* @__PURE__ */ jsx("path", {
-						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
-						id: "eye",
-						style: {
-							fill: "#3333bb",
-							fillRule: "evenodd",
-							stroke: "none"
-						}
-					})]
-				})]
-			})
-		]
-	});
-}
-
 // src/react/components/Icon/index.tsx
 /** Icons whose artwork does not fit the default 24x24 grid need their own canvas. */
 const viewBoxes = { emergency: "0 0 640 640" };
@@ -1564,6 +1497,18 @@ const paths = {
 		/* @__PURE__ */ jsx("path", { d: "M12 7h.01" })
 	] }),
 	"arrow-left": /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M19 12H5" }), /* @__PURE__ */ jsx("path", { d: "m12 19-7-7 7-7" })] }),
+	"credit-card-plus": /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5" }),
+		/* @__PURE__ */ jsx("path", { d: "M18 12h.01" }),
+		/* @__PURE__ */ jsx("path", { d: "M19 22v-6" }),
+		/* @__PURE__ */ jsx("path", { d: "m22 19-3-3-3 3" }),
+		/* @__PURE__ */ jsx("path", { d: "M6 12h.01" }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "2"
+		})
+	] }),
 	emergency: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { d: "M272.5 96C272.5 78.3 286.8 64 304.5 64L336.5 64C354.2 64 368.5 78.3 368.5 96L368.5 236.9L490.5 166.5C505.8 157.7 525.4 162.9 534.2 178.2L550.2 205.9C559 221.2 553.8 240.8 538.5 249.6L416.5 320L538.5 390.4C553.8 399.2 559.1 418.8 550.2 434.1L534.2 461.8C525.4 477.1 505.8 482.4 490.5 473.5L368.5 403.1L368.5 544C368.5 561.7 354.2 576 336.5 576L304.5 576C286.8 576 272.5 561.7 272.5 544L272.5 403.1L150.5 473.5C135.2 482.3 115.6 477.1 106.8 461.8L90.8 434.1C82 418.8 87.2 399.2 102.5 390.4L224.5 320L102.5 249.6C87.2 240.8 82 221.2 90.8 205.9L106.8 178.2C115.6 162.9 135.2 157.7 150.5 166.5L272.5 236.9L272.5 96z" }) })
 };
 function Icon({ name, className, title }) {
@@ -1593,6 +1538,16 @@ var panel_module_default = {
 	"de-emergency-slide-in": "de-emergency-de-emergency-slide-in-nA5Hwa",
 	"de-emergency-slide-up": "de-emergency-de-emergency-slide-up-nA5Hwa",
 	"de-emergency-spin": "de-emergency-de-emergency-spin-nA5Hwa",
+	"emergency-availability": "de-emergency-emergency-availability-nA5Hwa",
+	"emergency-availability__card": "de-emergency-emergency-availability__card-nA5Hwa",
+	"emergency-availability__card-body": "de-emergency-emergency-availability__card-body-nA5Hwa",
+	"emergency-availability__card-header": "de-emergency-emergency-availability__card-header-nA5Hwa",
+	"emergency-availability__card-title": "de-emergency-emergency-availability__card-title-nA5Hwa",
+	"emergency-availability__details": "de-emergency-emergency-availability__details-nA5Hwa",
+	"emergency-availability__label": "de-emergency-emergency-availability__label-nA5Hwa",
+	"emergency-availability__recharge": "de-emergency-emergency-availability__recharge-nA5Hwa",
+	"emergency-availability__rounds": "de-emergency-emergency-availability__rounds-nA5Hwa",
+	"emergency-availability__rounds-group": "de-emergency-emergency-availability__rounds-group-nA5Hwa",
 	"emergency-confirmation": "de-emergency-emergency-confirmation-nA5Hwa",
 	"emergency-confirmation__body": "de-emergency-emergency-confirmation__body-nA5Hwa",
 	"emergency-confirmation__button": "de-emergency-emergency-confirmation__button-nA5Hwa",
@@ -1617,7 +1572,11 @@ var panel_module_default = {
 	"emergency-feedback": "de-emergency-emergency-feedback-nA5Hwa",
 	"emergency-feedback__dismiss": "de-emergency-emergency-feedback__dismiss-nA5Hwa",
 	"emergency-panel": "de-emergency-emergency-panel-nA5Hwa",
+	"emergency-panel__availability-region": "de-emergency-emergency-panel__availability-region-nA5Hwa",
 	"emergency-panel__body": "de-emergency-emergency-panel__body-nA5Hwa",
+	"emergency-panel__body--pricing": "de-emergency-emergency-panel__body--pricing-nA5Hwa",
+	"emergency-panel__body-split": "de-emergency-emergency-panel__body-split-nA5Hwa",
+	"emergency-panel__body-split--with-availability": "de-emergency-emergency-panel__body-split--with-availability-nA5Hwa",
 	"emergency-panel__body-title": "de-emergency-emergency-panel__body-title-nA5Hwa",
 	"emergency-panel__body-title-container": "de-emergency-emergency-panel__body-title-container-nA5Hwa",
 	"emergency-panel__button": "de-emergency-emergency-panel__button-nA5Hwa",
@@ -1627,14 +1586,41 @@ var panel_module_default = {
 	"emergency-panel__close-icon": "de-emergency-emergency-panel__close-icon-nA5Hwa",
 	"emergency-panel__footer": "de-emergency-emergency-panel__footer-nA5Hwa",
 	"emergency-panel__header": "de-emergency-emergency-panel__header-nA5Hwa",
+	"emergency-panel__prompt-region": "de-emergency-emergency-panel__prompt-region-nA5Hwa",
 	"emergency-panel__title": "de-emergency-emergency-panel__title-nA5Hwa",
 	"emergency-panel--hidden": "de-emergency-emergency-panel--hidden-nA5Hwa",
+	"emergency-pricing": "de-emergency-emergency-pricing-nA5Hwa",
+	"emergency-pricing__badge": "de-emergency-emergency-pricing__badge-nA5Hwa",
+	"emergency-pricing__footnote": "de-emergency-emergency-pricing__footnote-nA5Hwa",
+	"emergency-pricing__heading": "de-emergency-emergency-pricing__heading-nA5Hwa",
+	"emergency-pricing__package": "de-emergency-emergency-pricing__package-nA5Hwa",
+	"emergency-pricing__package--highlighted": "de-emergency-emergency-pricing__package--highlighted-nA5Hwa",
+	"emergency-pricing__package-caption": "de-emergency-emergency-pricing__package-caption-nA5Hwa",
+	"emergency-pricing__package-header": "de-emergency-emergency-pricing__package-header-nA5Hwa",
+	"emergency-pricing__package-label": "de-emergency-emergency-pricing__package-label-nA5Hwa",
+	"emergency-pricing__package-name": "de-emergency-emergency-pricing__package-name-nA5Hwa",
+	"emergency-pricing__price": "de-emergency-emergency-pricing__price-nA5Hwa",
+	"emergency-pricing__price-meta": "de-emergency-emergency-pricing__price-meta-nA5Hwa",
+	"emergency-pricing__price-note": "de-emergency-emergency-pricing__price-note-nA5Hwa",
+	"emergency-pricing__price-row": "de-emergency-emergency-pricing__price-row-nA5Hwa",
+	"emergency-pricing__select": "de-emergency-emergency-pricing__select-nA5Hwa",
+	"emergency-pricing__stat": "de-emergency-emergency-pricing__stat-nA5Hwa",
+	"emergency-pricing__stat-divider": "de-emergency-emergency-pricing__stat-divider-nA5Hwa",
+	"emergency-pricing__stat-label": "de-emergency-emergency-pricing__stat-label-nA5Hwa",
+	"emergency-pricing__stat-value": "de-emergency-emergency-pricing__stat-value-nA5Hwa",
+	"emergency-pricing__stats": "de-emergency-emergency-pricing__stats-nA5Hwa",
+	"emergency-pricing__subtitle": "de-emergency-emergency-pricing__subtitle-nA5Hwa",
+	"emergency-pricing__title": "de-emergency-emergency-pricing__title-nA5Hwa",
+	"emergency-pricing__titles": "de-emergency-emergency-pricing__titles-nA5Hwa",
 	"emergency-resume-notification-button": "de-emergency-emergency-resume-notification-button-nA5Hwa",
 	"emergency-resume-notification-card": "de-emergency-emergency-resume-notification-card-nA5Hwa",
 	"emergency-resume-notification-icon": "de-emergency-emergency-resume-notification-icon-nA5Hwa",
 	"emergency-resume-notification-message": "de-emergency-emergency-resume-notification-message-nA5Hwa",
 	"emergency-resume-notification-overlay": "de-emergency-emergency-resume-notification-overlay-nA5Hwa",
 	"emergency-resume-notification-title": "de-emergency-emergency-resume-notification-title-nA5Hwa",
+	"emergency-screen": "de-emergency-emergency-screen-nA5Hwa",
+	"emergency-screen__placeholder": "de-emergency-emergency-screen__placeholder-nA5Hwa",
+	"emergency-screen__placeholder-text": "de-emergency-emergency-screen__placeholder-text-nA5Hwa",
 	"emergency-status__abort-btn": "de-emergency-emergency-status__abort-btn-nA5Hwa",
 	"emergency-status__body": "de-emergency-emergency-status__body-nA5Hwa",
 	"emergency-status__cell": "de-emergency-emergency-status__cell-nA5Hwa",
@@ -1680,6 +1666,355 @@ function cls(...names) {
 	return names.filter((name) => Boolean(name)).map((name) => panel_module_default[name] ?? "").filter(Boolean).join(" ");
 }
 
+// src/react/components/EmergencyConfirmation/index.tsx
+function EmergencyConfirmation(props) {
+	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
+	const cardRef = useRef(null);
+	const titleId = useId();
+	const danger = abortConfirmation;
+	const open = abortConfirmation || simulationConfirmation;
+	useEffect(() => {
+		if (open) cardRef.current?.querySelector("button")?.focus();
+	}, [open]);
+	if (!open) return null;
+	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
+	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
+	const tone = danger ? "danger" : "information";
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("emergency-confirmation"),
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: cardRef,
+			className: cls("emergency-confirmation__card"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-confirmation__body"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
+						children: /* @__PURE__ */ jsx(Icon, { name: danger ? "alert-triangle" : "info" })
+					}),
+					/* @__PURE__ */ jsx("h5", {
+						className: cls("emergency-confirmation__title"),
+						id: titleId,
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: cls("emergency-confirmation__text"),
+						children: text
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-confirmation__footer"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
+					onClick: danger ? onCancelAbort : onCancelSimulation,
+					children: danger ? copy.abortCancel : copy.simulateCancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
+					onClick: danger ? onConfirmAbort : onConfirmSimulation,
+					children: danger ? copy.abortConfirm : copy.simulateConfirm
+				})]
+			})]
+		})
+	});
+}
+
+// src/react/hooks/useEscapeKey.ts
+function useEscapeKey(active, onEscape) {
+	useEffect(() => {
+		if (!active || typeof document === "undefined") return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onEscape();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [active, onEscape]);
+}
+
+// src/react/hooks/useFocusTrap.ts
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+/**
+* Keeps keyboard focus inside the dialog while it is open and restores focus to
+* the element that opened it when it closes.
+*/
+function useFocusTrap(ref, active) {
+	useEffect(() => {
+		if (!active || typeof document === "undefined") return;
+		const container = ref.current;
+		if (!container) return;
+		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
+		(focusable()[0] ?? container).focus({ preventScroll: true });
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const items = focusable();
+			if (items.length === 0) {
+				event.preventDefault();
+				container.focus({ preventScroll: true });
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const current = document.activeElement;
+			if (event.shiftKey && (current === first || !container.contains(current))) {
+				event.preventDefault();
+				if (last) last.focus({ preventScroll: true });
+				return;
+			}
+			if (!event.shiftKey && (current === last || !container.contains(current)) && first) {
+				event.preventDefault();
+				first.focus({ preventScroll: true });
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, true);
+			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
+		};
+	}, [active, ref]);
+}
+
+// src/react/screens/context.tsx
+const EmergencyScreenContext = createContext(null);
+function EmergencyScreenProvider({ children, initialScreen = "primary" }) {
+	const [state, setState] = useState({
+		screen: initialScreen,
+		history: []
+	});
+	const navigate = useCallback((next) => {
+		setState((current) => {
+			if (current.screen === next) return current;
+			return {
+				screen: next,
+				history: [...current.history, current.screen]
+			};
+		});
+	}, []);
+	const back = useCallback(() => {
+		setState((current) => {
+			const previous = current.history.at(-1);
+			if (!previous) return current;
+			return {
+				screen: previous,
+				history: current.history.slice(0, -1)
+			};
+		});
+	}, []);
+	const reset = useCallback(() => {
+		setState((current) => {
+			if (current.screen === "primary" && current.history.length === 0) return current;
+			return {
+				screen: "primary",
+				history: []
+			};
+		});
+	}, []);
+	const value = useMemo(() => ({
+		screen: state.screen,
+		history: state.history,
+		navigate,
+		back,
+		reset
+	}), [
+		back,
+		navigate,
+		reset,
+		state.history,
+		state.screen
+	]);
+	return /* @__PURE__ */ jsx(EmergencyScreenContext.Provider, {
+		value,
+		children
+	});
+}
+function useScreenNavigation() {
+	const value = useContext(EmergencyScreenContext);
+	if (!value) throw new Error("useScreenNavigation must be used inside EmergencyScreenProvider.");
+	return value;
+}
+
+// src/react/components/EmergencyHeader/index.tsx
+function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cls("emergency-panel__header"),
+		children: [
+			onBack ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.back,
+				onClick: onBack,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "arrow-left",
+					className: cls("emergency-panel__close-icon")
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("h2", {
+				className: cls("emergency-panel__title"),
+				id: titleId,
+				tabIndex: -1,
+				children: title
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.close,
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "close",
+					className: cls("emergency-panel__close-icon")
+				})
+			})
+		]
+	});
+}
+
+// src/react/screens/layout.tsx
+/**
+* Shared shell for every screen. The wrapper is `display: contents` so the
+* header, body and footer stay direct grid rows of the emergency panel.
+*/
+function EmergencyScreenLayout({ screen, titleId, header, footer, children, bodyClassName }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("emergency-screen"),
+		"data-screen": screen,
+		children: [
+			header,
+			/* @__PURE__ */ jsx("section", {
+				className: cls("emergency-panel__body", bodyClassName ?? null),
+				"aria-labelledby": titleId,
+				children
+			}),
+			footer
+		]
+	});
+}
+
+// src/react/screens/PlaceholderScreen.tsx
+/** Minimal in-design screen used to prove navigation before real designs land. */
+function PlaceholderScreen({ screen, titleId, title, description, onClose, onBack }) {
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen,
+		titleId,
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId,
+			title,
+			onClose,
+			onBack
+		}),
+		footer: null,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cls("emergency-screen__placeholder"),
+			children: /* @__PURE__ */ jsx("p", {
+				className: cls("emergency-screen__placeholder-text"),
+				children: description
+			})
+		})
+	});
+}
+
+// src/react/screens/details/copy.ts
+const detailsCopy = {
+	title: "Detalles",
+	description: "Aquí podrás consultar el detalle de tus alertas disponibles. Esta pantalla estará disponible próximamente."
+};
+
+// src/react/screens/details/index.tsx
+function DetailsScreen({ titleId, onClose }) {
+	const { back } = useScreenNavigation();
+	return /* @__PURE__ */ jsx(PlaceholderScreen, {
+		screen: "details",
+		titleId,
+		title: detailsCopy.title,
+		description: detailsCopy.description,
+		onClose: () => onClose("close"),
+		onBack: back
+	});
+}
+
+// src/react/components/icons/paramedical-mark.tsx
+/**
+* Neutral inline illustration used by the idle panel.
+*/
+function ParamedicalMark({ className, title }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		version: "1.0",
+		viewBox: "0 0 192 192",
+		width: "192",
+		height: "192",
+		id: "Star of life",
+		className,
+		"aria-label": title,
+		children: [
+			/* @__PURE__ */ jsx("defs", { id: "defs2886" }),
+			/* @__PURE__ */ jsxs("g", {
+				id: "cross",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "outline",
+					style: {
+						fill: "none",
+						stroke: "#3333bb",
+						strokeWidth: 6
+					}
+				}), /* @__PURE__ */ jsx("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "inner",
+					style: {
+						fill: "#0000bb",
+						fillRule: "evenodd",
+						stroke: "#ffffff",
+						strokeWidth: 2
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				id: "symbols",
+				style: {
+					fill: "#ffffff",
+					fillRule: "evenodd",
+					stroke: "#3333bb",
+					strokeWidth: 2
+				},
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
+					id: "rod"
+				}), /* @__PURE__ */ jsxs("g", {
+					id: "snake",
+					children: [/* @__PURE__ */ jsx("path", {
+						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
+						id: "body"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
+						id: "eye",
+						style: {
+							fill: "#3333bb",
+							fillRule: "evenodd",
+							stroke: "none"
+						}
+					})]
+				})]
+			})
+		]
+	});
+}
+
 // src/react/components/MessageSurface/index.tsx
 function MessageSurface(props) {
 	const { variant, icon, title, text, details, className, children } = props;
@@ -2004,101 +2339,129 @@ function EmergencyStatusPanel({ responders, refreshing, locale, onRefresh }) {
 	});
 }
 
-// src/react/components/EmergencyBody/index.tsx
-function EmergencyBody(props) {
-	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback } = props;
-	const showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!loading && !showingFeedback ? /* @__PURE__ */ jsx("div", {
-			className: cls("sos-img__container"),
-			id: "sos-img__container",
-			children: /* @__PURE__ */ jsx(ParamedicalMark, {
-				className: cls("sos-img"),
-				title: copy.illustrationAlt
-			})
-		}) : null,
-		active || loading || showingFeedback ? null : /* @__PURE__ */ jsx("div", {
-			className: cls("emergency-panel__body-title-container"),
-			children: /* @__PURE__ */ jsx("h4", {
-				className: cls("emergency-panel__body-title"),
-				children: copy.question
-			})
-		}),
-		active && !showingFeedback ? /* @__PURE__ */ jsx(EmergencyStatusPanel, {
-			responders,
-			refreshing,
-			locale,
-			onRefresh
-		}) : null,
-		loading ? /* @__PURE__ */ jsx(EmergencyLoading, {}) : null,
-		error ? /* @__PURE__ */ jsx(EmergencyError, {
-			error,
-			onRetry
-		}) : null,
-		/* @__PURE__ */ jsx(EmergencyFeedback, {
-			abortResult,
-			simulationResult,
-			geolocationError,
-			activationError,
-			onDismiss: onDismissFeedback
-		})
-	] });
+// src/react/screens/primary/copy.ts
+const primaryCopy = {
+	availabilityTitle: "Alertas Disponibles",
+	recharge: "Recargar",
+	details: "Detalles",
+	roundSingular: "ronda disponible",
+	roundPlural: "rondas disponibles"
+};
+/** Singular/plural label for the remaining rounds. */
+function roundsUnit(rounds) {
+	return rounds === 1 ? primaryCopy.roundSingular : primaryCopy.roundPlural;
+}
+function formatRounds(rounds) {
+	return `${rounds} ${roundsUnit(rounds)}`;
 }
 
-// src/react/components/EmergencyConfirmation/index.tsx
-function EmergencyConfirmation(props) {
-	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
-	const cardRef = useRef(null);
-	const titleId = useId();
-	const danger = abortConfirmation;
-	const open = abortConfirmation || simulationConfirmation;
-	useEffect(() => {
-		if (open) cardRef.current?.querySelector("button")?.focus();
-	}, [open]);
-	if (!open) return null;
-	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
-	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
-	const tone = danger ? "danger" : "information";
-	return /* @__PURE__ */ jsx("div", {
-		className: cls("emergency-confirmation"),
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": titleId,
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: cardRef,
-			className: cls("emergency-confirmation__card"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cls("emergency-confirmation__body"),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
-						children: /* @__PURE__ */ jsx(Icon, { name: danger ? "alert-triangle" : "info" })
-					}),
-					/* @__PURE__ */ jsx("h5", {
-						className: cls("emergency-confirmation__title"),
-						id: titleId,
-						children: title
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: cls("emergency-confirmation__text"),
-						children: text
-					})
-				]
+// src/react/screens/primary/data.ts
+/**
+* Derives the remaining alert rounds from available messages and designated
+* responders. Invalid or non-positive input collapses to the minimum of one
+* round instead of producing `Infinity`, `NaN` or a negative value.
+*/
+function calculateRounds(messages, responders) {
+	if (!Number.isFinite(messages) || !Number.isFinite(responders)) return 1;
+	const availableMessages = Math.floor(messages);
+	const designatedResponders = Math.floor(responders);
+	if (availableMessages <= 0 || designatedResponders <= 0) return 1;
+	return Math.max(1, Math.floor(availableMessages / designatedResponders));
+}
+
+// src/react/screens/primary/Availability.tsx
+function Availability({ onRecharge, onDetails }) {
+	const rounds = calculateRounds(100, 3);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cls("emergency-availability"),
+		"aria-label": primaryCopy.availabilityTitle,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cls("emergency-availability__recharge"),
+			onClick: onRecharge,
+			children: [/* @__PURE__ */ jsx(Icon, { name: "credit-card-plus" }), primaryCopy.recharge]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-availability__card"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cls("emergency-availability__card-header"),
+				children: /* @__PURE__ */ jsx("h3", {
+					className: cls("emergency-availability__card-title"),
+					children: primaryCopy.availabilityTitle
+				})
 			}), /* @__PURE__ */ jsxs("div", {
-				className: cls("emergency-confirmation__footer"),
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
-					onClick: danger ? onCancelAbort : onCancelSimulation,
-					children: danger ? copy.abortCancel : copy.simulateCancel
+				className: cls("emergency-availability__card-body"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cls("emergency-availability__rounds-group"),
+					"aria-label": formatRounds(rounds),
+					children: [/* @__PURE__ */ jsx("p", {
+						className: cls("emergency-availability__rounds"),
+						children: rounds
+					}), /* @__PURE__ */ jsx("p", {
+						className: cls("emergency-availability__label"),
+						children: roundsUnit(rounds)
+					})]
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
-					onClick: danger ? onConfirmAbort : onConfirmSimulation,
-					children: danger ? copy.abortConfirm : copy.simulateConfirm
+					className: cls("emergency-availability__details"),
+					onClick: onDetails,
+					children: primaryCopy.details
 				})]
 			})]
-		})
+		})]
+	});
+}
+
+// src/react/components/EmergencyBody/index.tsx
+function EmergencyBody(props) {
+	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback, onRecharge, onDetails } = props;
+	const showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
+	const idle = !active && !loading && !showingFeedback && error === null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("emergency-panel__body-split", idle && "emergency-panel__body-split--with-availability"),
+		children: [idle ? /* @__PURE__ */ jsx("div", {
+			className: cls("emergency-panel__availability-region"),
+			children: /* @__PURE__ */ jsx(Availability, {
+				onRecharge,
+				onDetails
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-panel__prompt-region"),
+			children: [
+				!loading && !showingFeedback ? /* @__PURE__ */ jsx("div", {
+					className: cls("sos-img__container"),
+					id: "sos-img__container",
+					children: /* @__PURE__ */ jsx(ParamedicalMark, {
+						className: cls("sos-img"),
+						title: copy.illustrationAlt
+					})
+				}) : null,
+				active || loading || showingFeedback ? null : /* @__PURE__ */ jsx("div", {
+					className: cls("emergency-panel__body-title-container"),
+					children: /* @__PURE__ */ jsx("h4", {
+						className: cls("emergency-panel__body-title"),
+						children: copy.question
+					})
+				}),
+				active && !showingFeedback ? /* @__PURE__ */ jsx(EmergencyStatusPanel, {
+					responders,
+					refreshing,
+					locale,
+					onRefresh
+				}) : null,
+				loading ? /* @__PURE__ */ jsx(EmergencyLoading, {}) : null,
+				error ? /* @__PURE__ */ jsx(EmergencyError, {
+					error,
+					onRetry
+				}) : null,
+				/* @__PURE__ */ jsx(EmergencyFeedback, {
+					abortResult,
+					simulationResult,
+					geolocationError,
+					activationError,
+					onDismiss: onDismissFeedback
+				})
+			]
+		})]
 	});
 }
 
@@ -2136,105 +2499,279 @@ function EmergencyFooter(props) {
 	});
 }
 
-// src/react/components/EmergencyHeader/index.tsx
-function EmergencyHeader({ titleId, onClose }) {
-	return /* @__PURE__ */ jsxs("header", {
-		className: cls("emergency-panel__header"),
-		children: [/* @__PURE__ */ jsx("h2", {
-			className: cls("emergency-panel__title"),
-			id: titleId,
-			children: copy.panelLabel
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cls("emergency-panel__close-button"),
-			"aria-label": copy.close,
-			onClick: onClose,
-			children: /* @__PURE__ */ jsx(Icon, {
-				name: "close",
-				className: cls("emergency-panel__close-icon")
-			})
-		})]
+// src/react/screens/primary/index.tsx
+function PrimaryScreen(props) {
+	const { navigate } = useScreenNavigation();
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen: "primary",
+		titleId: props.titleId,
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId: props.titleId,
+			onClose: () => props.onClose("close")
+		}),
+		footer: /* @__PURE__ */ jsx(EmergencyFooter, {
+			active: props.active,
+			busy: props.busy,
+			aborting: props.aborting,
+			feedbackVisible: props.feedbackVisible,
+			onActivate: props.onActivate,
+			onRequestAbort: props.onRequestAbort,
+			onRequestSimulation: props.onRequestSimulation
+		}),
+		children: /* @__PURE__ */ jsx(EmergencyBody, {
+			active: props.active,
+			responders: props.responders,
+			refreshing: props.refreshing,
+			loading: props.loading,
+			locale: props.locale,
+			geolocationError: props.geolocationError,
+			activationError: props.activationError,
+			error: props.error,
+			abortResult: props.abortResult,
+			simulationResult: props.simulationResult,
+			onRefresh: props.onRefresh,
+			onRetry: props.onRetry,
+			onDismissFeedback: props.onDismissFeedback,
+			onRecharge: () => navigate("pricing"),
+			onDetails: () => navigate("details")
+		})
 	});
 }
 
-// src/react/hooks/useEscapeKey.ts
-function useEscapeKey(active, onEscape) {
-	useEffect(() => {
-		if (!active || typeof document === "undefined") return;
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				onEscape();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [active, onEscape]);
-}
+// src/react/screens/pricing/copy.ts
+const pricingCopy = {
+	title: "Recargar",
+	heading: "Elige tu paquete",
+	subtitle: "Alertas de WhatsApp para tus contactos",
+	bestValue: "MEJOR VALOR",
+	choose: "Seleccionar",
+	chosen: "Seleccionado",
+	whatsapp: "de WhatsApp",
+	rounds: "rondas de alerta",
+	perMessage: "por mensaje + IVA",
+	footnote: "Rondas calculadas con 3 contactos de emergencia. Válidas para pruebas y emergencias."
+};
 
-// src/react/hooks/useFocusTrap.ts
-const FOCUSABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
+// src/react/screens/pricing/data.ts
 /**
-* Keeps keyboard focus inside the dialog while it is open and restores focus to
-* the element that opened it when it closes.
+* Local demo catalog. Prices and per-message labels are literal values from the
+* mock; they are not derived from the package totals.
 */
-function useFocusTrap(ref, active) {
-	useEffect(() => {
-		if (!active || typeof document === "undefined") return;
-		const container = ref.current;
-		if (!container) return;
-		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
-		(focusable()[0] ?? container).focus({ preventScroll: true });
-		const handleKeyDown = (event) => {
-			if (event.key !== "Tab") return;
-			const items = focusable();
-			if (items.length === 0) {
-				event.preventDefault();
-				container.focus({ preventScroll: true });
-				return;
-			}
-			const first = items[0];
-			const last = items[items.length - 1];
-			const current = document.activeElement;
-			if (event.shiftKey && (current === first || !container.contains(current))) {
-				event.preventDefault();
-				if (last) last.focus({ preventScroll: true });
-				return;
-			}
-			if (!event.shiftKey && current === last && first) {
-				event.preventDefault();
-				first.focus({ preventScroll: true });
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown, true);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown, true);
-			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
-		};
-	}, [active, ref]);
+const PRICING_PACKAGES = [{
+	id: "package-1",
+	label: "PAQUETE 1",
+	messages: 100,
+	priceLabel: "$7",
+	priceCaption: "IVA incluido",
+	perMessageLabel: "$0.06",
+	highlighted: false
+}, {
+	id: "package-2",
+	label: "PAQUETE 2",
+	messages: 200,
+	priceLabel: "12$",
+	priceNote: "($10 + IVA)",
+	priceCaption: "IVA incluido",
+	perMessageLabel: "$0.05",
+	highlighted: true,
+	badge: "MEJOR VALOR"
+}];
+/** Derives the alert rounds a package provides for the demo responder count. */
+function packageRounds(pkg) {
+	return calculateRounds(pkg.messages, 3);
+}
+
+// src/react/screens/pricing/PackageCard.tsx
+function PackageCard({ pkg, selected, onSelect }) {
+	const labelId = useId();
+	const rounds = packageRounds(pkg);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cls("emergency-pricing__package", pkg.highlighted && "emergency-pricing__package--highlighted"),
+		"aria-labelledby": labelId,
+		"data-selected": selected ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__package-header"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cls("emergency-pricing__package-label"),
+					id: labelId,
+					children: pkg.label
+				}), pkg.badge ? /* @__PURE__ */ jsx("span", {
+					className: cls("emergency-pricing__badge"),
+					children: pkg.badge
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__price-row"),
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h4", {
+					className: cls("emergency-pricing__package-name"),
+					children: [pkg.messages, " alertas"]
+				}), /* @__PURE__ */ jsx("p", {
+					className: cls("emergency-pricing__package-caption"),
+					children: pricingCopy.whatsapp
+				})] }), /* @__PURE__ */ jsxs("div", {
+					className: cls("emergency-pricing__price-meta"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cls("emergency-pricing__price"),
+						children: pkg.priceLabel
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cls("emergency-pricing__price-note"),
+						children: [pkg.priceCaption, pkg.priceNote ? ` ${pkg.priceNote}` : null]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__stats"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: rounds
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.rounds
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cls("emergency-pricing__stat-divider"),
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: pkg.perMessageLabel
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.perMessage
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-pricing__select"),
+				"aria-pressed": selected,
+				onClick: () => onSelect(pkg.id),
+				children: selected ? pricingCopy.chosen : pricingCopy.choose
+			})
+		]
+	});
+}
+
+// src/react/screens/pricing/index.tsx
+function PricingScreen(props) {
+	const { back } = useScreenNavigation();
+	const [selected, setSelected] = useState(null);
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen: "pricing",
+		titleId: props.titleId,
+		bodyClassName: "emergency-panel__body--pricing",
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId: props.titleId,
+			title: pricingCopy.title,
+			onClose: () => props.onClose("close"),
+			onBack: back
+		}),
+		footer: null,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-pricing"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cls("emergency-pricing__heading"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__titles"),
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: cls("emergency-pricing__title"),
+							children: pricingCopy.heading
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__subtitle"),
+							children: pricingCopy.subtitle
+						})]
+					})
+				}),
+				PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ jsx(PackageCard, {
+					pkg,
+					selected: selected === pkg.id,
+					onSelect: setSelected
+				}, pkg.id)),
+				/* @__PURE__ */ jsx("p", {
+					className: cls("emergency-pricing__footnote"),
+					children: pricingCopy.footnote
+				})
+			]
+		})
+	});
 }
 
+// src/react/screens/registry.ts
+/** Every screen the panel can render. Add one entry to add a screen. */
+const screenRegistry = {
+	primary: PrimaryScreen,
+	pricing: PricingScreen,
+	details: DetailsScreen
+};
+
 // src/react/components/EmergencyPanel/index.tsx
+function ActiveScreen({ screenProps, open, forcePrimary }) {
+	const { screen, reset } = useScreenNavigation();
+	const shouldReset = !open || forcePrimary;
+	const effectiveScreen = shouldReset ? "primary" : screen;
+	const previousOpen = useRef(open);
+	const previousScreen = useRef(effectiveScreen);
+	useEffect(() => {
+		if (shouldReset) reset();
+	}, [reset, shouldReset]);
+	useEffect(() => {
+		const wasOpen = previousOpen.current;
+		const previousEffectiveScreen = previousScreen.current;
+		previousOpen.current = open;
+		previousScreen.current = effectiveScreen;
+		if (!open || !wasOpen || previousEffectiveScreen === effectiveScreen) return;
+		document.getElementById(screenProps.titleId)?.focus({ preventScroll: true });
+	}, [
+		effectiveScreen,
+		open,
+		screenProps.titleId
+	]);
+	const Screen = screenRegistry[effectiveScreen];
+	return /* @__PURE__ */ jsx(Screen, { ...screenProps });
+}
 function EmergencyPanel(props) {
 	const { open, theme, active, busy, aborting, loading, locale, responders, refreshing, geolocationError, activationError, error, abortResult, simulationResult, abortConfirmation, simulationConfirmation, onClose, onActivate, onRefresh, onRetry, onDismissFeedback, onRequestAbort, onRequestSimulation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
 	const titleId = useId();
 	const dialogRef = useRef(null);
 	const feedbackVisible = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
+	const forcePrimary = active || loading || error !== null || feedbackVisible;
 	const closeOnEscape = useCallback(() => {
 		onClose("escape");
 	}, [onClose]);
 	useFocusTrap(dialogRef, open);
 	useEscapeKey(open, closeOnEscape);
+	const screenProps = {
+		titleId,
+		active,
+		busy,
+		aborting,
+		loading,
+		locale,
+		responders,
+		refreshing,
+		geolocationError,
+		activationError,
+		error,
+		abortResult,
+		simulationResult,
+		feedbackVisible,
+		onClose,
+		onActivate,
+		onRefresh,
+		onRetry,
+		onDismissFeedback,
+		onRequestAbort,
+		onRequestSimulation
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: dialogRef,
 		className: cls("emergency-panel", !open && "emergency-panel--hidden"),
@@ -2245,48 +2782,18 @@ function EmergencyPanel(props) {
 		"aria-hidden": !open,
 		inert: !open,
 		tabIndex: -1,
-		children: [
-			/* @__PURE__ */ jsx(EmergencyHeader, {
-				titleId,
-				onClose: () => onClose("close")
-			}),
-			/* @__PURE__ */ jsx("section", {
-				className: cls("emergency-panel__body"),
-				"aria-labelledby": titleId,
-				children: /* @__PURE__ */ jsx(EmergencyBody, {
-					active,
-					responders,
-					refreshing,
-					loading,
-					locale,
-					geolocationError,
-					activationError,
-					error,
-					abortResult,
-					simulationResult,
-					onRefresh,
-					onRetry,
-					onDismissFeedback
-				})
-			}),
-			/* @__PURE__ */ jsx(EmergencyFooter, {
-				active,
-				busy,
-				aborting,
-				feedbackVisible,
-				onActivate,
-				onRequestAbort,
-				onRequestSimulation
-			}),
-			/* @__PURE__ */ jsx(EmergencyConfirmation, {
-				abortConfirmation,
-				simulationConfirmation,
-				onCancelAbort,
-				onCancelSimulation,
-				onConfirmAbort,
-				onConfirmSimulation
-			})
-		]
+		children: [/* @__PURE__ */ jsx(EmergencyScreenProvider, { children: /* @__PURE__ */ jsx(ActiveScreen, {
+			screenProps,
+			open,
+			forcePrimary
+		}) }), /* @__PURE__ */ jsx(EmergencyConfirmation, {
+			abortConfirmation,
+			simulationConfirmation,
+			onCancelAbort,
+			onCancelSimulation,
+			onConfirmAbort,
+			onConfirmSimulation
+		})]
 	});
 }