@evaro/consultation-sdk 0.1.0 → 0.2.0-next.0

package/dist/index.mjs

@@ -20,6 +20,21 @@ var host = (hosts, environment) => {
 };
 var apiHost = (environment) => host(API_HOSTS, environment);
 var nodeApiHost = (environment) => host(NODE_API_HOSTS, environment);
+var isLocalHost = (hostname) => hostname === "localhost" || hostname.endsWith(".localhost") || hostname === "[::1]" || /^127\./.test(hostname);
+var parseUrl = (value) => {
+	try {
+		return new URL(value);
+	} catch {
+		throw new Error(`nodeApiUrl is not a valid URL: ${value}`);
+	}
+};
+/** The NodeAPI base for target calls: `nodeApiUrl` when the host sets one, otherwise the environment's host. */
+function nodeApiBase(environment, nodeApiUrl) {
+	if (!nodeApiUrl) return nodeApiHost(environment);
+	const url = parseUrl(nodeApiUrl);
+	if (url.protocol !== "https:" && !(url.protocol === "http:" && isLocalHost(url.hostname))) throw new Error(`nodeApiUrl must use https, except for localhost: ${nodeApiUrl}`);
+	return `${url.origin}${url.pathname}`.replace(/\/+$/, "");
+}
 var RequestError = class extends Error {
 	status;
 	constructor(message, status) {
@@ -28,11 +43,26 @@ var RequestError = class extends Error {
 		this.name = "RequestError";
 	}
 };
+/** The server refused a write because the answers changed in another place. */
+var isConflict = (error) => error instanceof RequestError && error.status === 409;
+var REQUEST_TIMEOUT_MS = 3e4;
 async function requestJson(url, init = {}) {
-	const response = await fetch(url, init);
-	const body = await response.json().catch(() => null);
-	if (!response.ok) throw new RequestError(body?.message || `Request failed with status ${response.status}`, response.status);
-	return body;
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+	try {
+		const response = await fetch(url, {
+			...init,
+			signal: controller.signal
+		});
+		const body = await response.json().catch(() => null);
+		if (!response.ok) throw new RequestError(body?.message || `Request failed with status ${response.status}`, response.status);
+		return body;
+	} catch (error) {
+		if (controller.signal.aborted) throw new RequestError("The request timed out", 0);
+		throw error;
+	} finally {
+		clearTimeout(timer);
+	}
 }
 /** The consultation as Connect loads it. `preview` reads the unpublished version, which needs no token. */
 async function fetchVendorConsultation(environment, hash, vendor, preview) {
@@ -49,6 +79,50 @@ function fetchVendorTheme(environment, vendor) {
 	}
 	return themes.get(key);
 }
+// sdk/src/draftQueue.ts
+/**
+* Runs one target's drafts and submits one after another, so an older write never lands after a newer one, and
+* a reload can wait for the writes that are still open.
+*/
+var DraftQueue = class {
+	onIdle;
+	tail = Promise.resolve();
+	open = 0;
+	constructor(onIdle = () => {}) {
+		this.onIdle = onIdle;
+	}
+	/** Runs the task after the open ones. A failed task does not stop the queue. */
+	run(task) {
+		const result = this.tail.then(task);
+		this.open++;
+		this.tail = result.catch(() => void 0).finally(() => {
+			this.open--;
+			if (this.open === 0) this.onIdle();
+		});
+		return result;
+	}
+	/** Settles when every task queued so far has settled. */
+	idle() {
+		return this.tail;
+	}
+};
+var queues = /* @__PURE__ */ new Map();
+/** Runs a write on the target's queue. Only a write creates a queue, and the queue goes once it is idle. */
+function runOnDraftQueue(key, task) {
+	let queue = queues.get(key);
+	if (!queue) {
+		const created = new DraftQueue(() => {
+			if (queues.get(key) === created) queues.delete(key);
+		});
+		queue = created;
+		queues.set(key, queue);
+	}
+	return queue.run(task);
+}
+/** Settles when the target's open writes have settled. A target with no open writes settles at once. */
+function draftQueueIdle(key) {
+	return queues.get(key)?.idle() ?? Promise.resolve();
+}
 // sdk/src/flow/validations.ts
 var questionValidations = { blood_pressure: {
 	validate: (value) => /^\d{1,3}\/\d{1,3}$/.test(value),
@@ -199,7 +273,7 @@ function isFreeTextTooShort(type, answer) {
 	return FREE_TEXT_TYPES.includes(type) && (answer ?? "").trim().length < 3;
 }
 /** Whether a question holds an answer the patient could move on from. */
-function isAnswered(question, answer) {
+function isAnswered$1(question, answer) {
 	if (!question) return false;
 	if (Array.isArray(answer)) return answer.length > 0;
 	if (!answer) return false;
@@ -217,7 +291,7 @@ function areFollowUpsAnswered(followUpHashes, questions, answers, optionHashes,
 		seen.add(hash);
 		const question = questions?.find((q) => q.hash === hash);
 		const answer = answers?.[hash];
-		if (!isAnswered(question, answer)) return false;
+		if (!isAnswered$1(question, answer)) return false;
 		return areFollowUpsAnswered(getFollowUpHashes(getMatchedOptionLogics(answer, optionHashes?.[hash], question.options)), questions, answers, optionHashes, seen);
 	});
 }
@@ -442,6 +516,13 @@ function resumeHistory(walk) {
 	return walkFrom(visibleQuestions[0]?.hash, walk, (hash) => areFollowUpsAnswered([hash], allQuestions, answers, optionHashes));
 }
 /**
+* The one-page form's main questions: the flow from the first question, where only an answer takes a jump, so an
+* unanswered question goes on to its default next one. It stops at an answer with an exit.
+*/
+function formPath(walk) {
+	return walkFrom(walk.visibleQuestions[0]?.hash, walk, () => true);
+}
+/**
 * The answers a draft keeps: the path behind the user, and ahead of them the questions the current answers
 * still lead to. After Back, answers further on survive while the user edits, even when an edit leaves the
 * current question unfinished. Answers of a branch the user left are dropped.
@@ -711,15 +792,21 @@ function useConsultationFlow({ consultation, consultationType, initialAnswers, i
 	};
 }
 // sdk/src/targets/diagnosisRequest.ts
+var versionOf = (body) => {
+	if (typeof body?.version !== "number") throw new Error("NodeAPI sent the assessment without a version");
+	return body.version;
+};
 var toSaved = (body) => ({
 	answers: body?.answers ?? {},
 	status: body?.status ?? "empty",
 	consultationVersion: body?.consultation_version ?? null,
-	submittedAt: body?.submitted_at ?? null
+	submittedAt: body?.submitted_at ?? null,
+	version: versionOf(body)
 });
 /** Assessment answers stored on a diagnosis request, through NodeAPI with the Prescriber App user's token. */
-function diagnosisRequestTarget(environment, id, getToken) {
-	const base = () => `${nodeApiHost(environment)}/prescriber/diagnosis-requests/${encodeURIComponent(id)}/assessment`;
+function diagnosisRequestTarget(environment, id, getToken, nodeApiUrl) {
+	const host = () => nodeApiBase(environment, nodeApiUrl);
+	const base = () => `${host()}/prescriber/diagnosis-requests/${encodeURIComponent(id)}/assessment`;
 	const headers = async () => {
 		const token = await getToken?.();
 		if (!token) throw new Error("No token: the user must be signed in to load or save answers");
@@ -728,32 +815,235 @@ function diagnosisRequestTarget(environment, id, getToken) {
 			"Content-Type": "application/json"
 		};
 	};
+	let version = null;
+	let loads = 0;
 	return {
-		load: async () => toSaved(await requestJson(base(), { headers: await headers() })),
+		get version() {
+			return version;
+		},
+		load: async () => {
+			const load = ++loads;
+			const saved = toSaved(await requestJson(base(), { headers: await headers() }));
+			if (load === loads) version = saved.version;
+			return saved;
+		},
 		saveDraft: async (answers) => {
-			await requestJson(`${base()}/draft`, {
+			version = versionOf(await requestJson(`${base()}/draft`, {
 				method: "PUT",
 				headers: await headers(),
-				body: JSON.stringify({ answers })
-			});
+				body: JSON.stringify({
+					answers,
+					version
+				})
+			}));
 		},
 		submit: async (answers) => {
-			await requestJson(`${base()}/submit`, {
+			version = versionOf(await requestJson(`${base()}/submit`, {
 				method: "POST",
 				headers: await headers(),
-				body: JSON.stringify({ answers })
-			});
+				body: JSON.stringify({
+					answers,
+					version
+				})
+			}));
 		}
 	};
 }
 // sdk/src/targets/index.ts
 /** One adapter for each target type. To save answers in a new place, add a type here, not code in the host. */
-function createTargetAdapter(target, environment, getToken) {
+function createTargetAdapter(target, environment, getToken, nodeApiUrl) {
 	switch (target.type) {
-		case "diagnosis-request": return diagnosisRequestTarget(environment, target.id, getToken);
+		case "diagnosis-request": return diagnosisRequestTarget(environment, target.id, getToken, nodeApiUrl);
 		default: throw new Error(`Unknown target type: ${target.type}`);
 	}
 }
+var errorMessage = (error) => error instanceof Error ? error.message : "Something went wrong";
+function useTargetSave({ adapter, queueKey, revision, latestDraft, onDone, onSubmitted, onConflict, onSaved }) {
+	const [saveState, setSaveState] = useState("idle");
+	const [submitState, setSubmitState] = useState("idle");
+	const [submitError, setSubmitError] = useState(null);
+	const latestDraftRef = useRef(latestDraft);
+	latestDraftRef.current = latestDraft;
+	const onDoneRef = useRef(onDone);
+	onDoneRef.current = onDone;
+	const onSubmittedRef = useRef(onSubmitted);
+	onSubmittedRef.current = onSubmitted;
+	const onConflictRef = useRef(onConflict);
+	onConflictRef.current = onConflict;
+	const onSavedRef = useRef(onSaved);
+	onSavedRef.current = onSaved;
+	const draftTimer = useRef(null);
+	const latestRevision = useRef(revision);
+	latestRevision.current = revision;
+	const savedRevision = useRef(revision);
+	const mounted = useRef(true);
+	const closed = useRef(false);
+	const draftSeq = useRef(0);
+	const conflicted = useRef(false);
+	const stopForConflict = useCallback(() => {
+		if (conflicted.current) return;
+		conflicted.current = true;
+		closed.current = true;
+		savedRevision.current = latestRevision.current;
+		clearTimeout(draftTimer.current);
+		onConflictRef.current();
+	}, []);
+	const saveDraft = useCallback(() => {
+		if (!adapter) return;
+		clearTimeout(draftTimer.current);
+		const seq = ++draftSeq.current;
+		const isLatest = () => seq === draftSeq.current;
+		setSaveState("saving");
+		runOnDraftQueue(queueKey, async () => {
+			if (closed.current) return false;
+			const revision = latestRevision.current;
+			await adapter.saveDraft(latestDraftRef.current());
+			savedRevision.current = Math.max(savedRevision.current, revision);
+			return true;
+		}).then((sent) => {
+			if (sent && mounted.current) onSavedRef.current();
+			if (!isLatest() || !mounted.current) return;
+			setSaveState((state) => sent ? "saved" : state === "saving" ? "idle" : state);
+		}, (error) => {
+			if (isConflict(error)) {
+				if (mounted.current) stopForConflict();
+				return;
+			}
+			if (isLatest() && mounted.current) setSaveState("error");
+		});
+	}, [
+		adapter,
+		queueKey,
+		stopForConflict
+	]);
+	useEffect(() => {
+		if (!adapter || revision === 0 || closed.current) return;
+		draftTimer.current = setTimeout(saveDraft, 600);
+		return () => clearTimeout(draftTimer.current);
+	}, [
+		adapter,
+		revision,
+		saveDraft
+	]);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			if (!adapter || latestRevision.current <= savedRevision.current || closed.current) return;
+			const answers = latestDraftRef.current();
+			runOnDraftQueue(queueKey, () => adapter.saveDraft(answers)).catch((error) => {
+				if (isConflict(error)) onConflictRef.current();
+			});
+		};
+	}, []);
+	/** Shows why the answers cannot be submitted yet. */
+	const rejectSubmit = (message) => {
+		setSubmitState("error");
+		setSubmitError(message);
+	};
+	const submit = (answers) => {
+		if (!adapter) return;
+		closed.current = true;
+		clearTimeout(draftTimer.current);
+		setSubmitState("submitting");
+		setSubmitError(null);
+		runOnDraftQueue(queueKey, async () => {
+			if (conflicted.current) return {
+				submitted: false,
+				conflict: true,
+				draftSaved: false,
+				error: null
+			};
+			try {
+				await adapter.submit(answers);
+				return {
+					submitted: true,
+					conflict: false,
+					draftSaved: true,
+					error: null
+				};
+			} catch (error) {
+				const versionBefore = adapter.version;
+				const saved = await adapter.load().catch(() => null);
+				if (saved?.status === "submitted") return {
+					submitted: true,
+					conflict: false,
+					draftSaved: true,
+					error: null
+				};
+				if (saved && saved.version !== versionBefore) return {
+					submitted: false,
+					conflict: true,
+					draftSaved: false,
+					error
+				};
+				const revision = latestRevision.current;
+				let conflict = false;
+				const draftSaved = await adapter.saveDraft(latestDraftRef.current()).then(() => true, (draftError) => {
+					conflict = isConflict(draftError);
+					return false;
+				});
+				if (conflict) {
+					if ((await adapter.load().catch(() => null))?.status === "submitted") return {
+						submitted: true,
+						conflict: false,
+						draftSaved: true,
+						error: null
+					};
+				}
+				if (draftSaved) savedRevision.current = Math.max(savedRevision.current, revision);
+				return {
+					submitted: false,
+					conflict,
+					draftSaved,
+					error
+				};
+			}
+		}).then(({ submitted, conflict, draftSaved, error }) => {
+			if (submitted) {
+				if (mounted.current) {
+					setSubmitState("submitted");
+					setSaveState("idle");
+				}
+				onSavedRef.current();
+				onSubmittedRef.current?.();
+				onDoneRef.current?.();
+				return;
+			}
+			if (!mounted.current) return;
+			if (conflict) {
+				stopForConflict();
+				return;
+			}
+			closed.current = false;
+			setSubmitState("error");
+			setSubmitError(`The answers could not be submitted. ${errorMessage(error)}`);
+			setSaveState(draftSaved ? "saved" : "error");
+		});
+	};
+	return {
+		saveState,
+		submitState,
+		submitError,
+		saveDraft,
+		submit,
+		rejectSubmit
+	};
+}
+// node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
 // node_modules/.pnpm/dompurify@3.4.16/node_modules/dompurify/dist/purify.es.mjs
 /*! @license DOMPurify 3.4.16 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.16/LICENSE */
 function _OverloadYield(e, d) {
@@ -3275,20 +3565,6 @@ var sanitize$1 = (html) => {
 		ALLOWED_ATTR
 	});
 };
-// node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e) {
-	var t, f, n = "";
-	if ("string" == typeof e || "number" == typeof e) n += e;
-	else if ("object" == typeof e) if (Array.isArray(e)) {
-		var o = e.length;
-		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-	} else for (f in e) e[f] && (n && (n += " "), n += f);
-	return n;
-}
-function clsx() {
-	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-	return n;
-}
 // sdk/src/ui/primitives.tsx
 /**
 * Connect's UI primitives (`UI/Button`, `UI/TextField`, `UI/DatePicker`, `UI/Accordion`, `UI/CircularProgress`)
@@ -3521,32 +3797,194 @@ var Accordion = ({ title, description }) => {
 		})]
 	});
 };
-// sdk/src/ui/Knockout.tsx
-/** Connect's exit page (`ExitConsultation.tsx`) as a screen inside the component. */
-var Knockout = ({ title, content, onReview, onClose }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex flex-col items-start py-8 max-w-2xl",
-	children: [
-		/* @__PURE__ */ jsx("h1", {
-			className: "text-xl md:text-3xl font-bold mb-4",
-			children: title || "No suitable treatments available"
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "text-sm sm:text-base mb-8 [&_a]:underline [&_ul]:list-disc [&_ul]:ml-4 [&_li]:ml-4 [&_b]:font-bold [&_strong]:font-bold [&_p]:mb-3",
-			dangerouslySetInnerHTML: { __html: sanitize$1(content ?? "You are not eligible for this treatment. Please exit the consultation or review your answers.") }
-		}),
-		/* @__PURE__ */ jsx(Button, {
-			className: "w-full mb-4 text-md font-bold normal-case bg-primary-700 rounded-3xl",
-			onClick: onReview,
-			children: "Review answer"
-		}),
-		onClose && /* @__PURE__ */ jsx(Button, {
-			variant: "text",
-			className: "w-full text-sm normal-case font-bold text-gray-900 rounded-3xl",
-			onClick: onClose,
-			children: "Exit Consultation"
-		})
-	]
+// sdk/src/ui/ErrorNotice.tsx
+var ErrorNotice = ({ message, onRetry }) => /* @__PURE__ */ jsxs("div", {
+	role: "alert",
+	className: "my-4 flex flex-col gap-3 rounded-lg border border-error-300 bg-error-100 p-4 text-sm text-gray-900",
+	children: [/* @__PURE__ */ jsx("p", { children: message }), /* @__PURE__ */ jsx(Button, {
+		variant: "outlined",
+		fullWidth: false,
+		className: "self-start !py-2",
+		onClick: onRetry,
+		children: "Try again"
+	})]
 });
+// sdk/src/flow/form.ts
+var plain = (html) => (html ?? "").replace(/<[^>]*>/g, "").trim().toLowerCase();
+/** A radio question whose only options are Yes and No. The form draws it as a Yes / No pair. */
+function isYesNo(question) {
+	if (question?.type !== "radio" || question.options?.length !== 2) return false;
+	const labels = question.options.map((option) => plain(option.label)).sort();
+	return labels[0] === "no" && labels[1] === "yes";
+}
+var shownFrom = (hashes, walk) => {
+	const shown = /* @__PURE__ */ new Set();
+	for (const hash of hashes) withFollowUps(hash, walk.allQuestions, walk.answers, walk.optionHashes, shown);
+	return shown;
+};
+/** The first answer with an exit, on a main question or one of its open follow-ups. The page stops there. */
+function pathAndExit(walk) {
+	const path = formPath(walk);
+	for (let index = 0; index < path.length; index++) for (const hash of shownFrom([path[index]], walk)) {
+		const question = walk.allQuestions.find((q) => q.hash === hash);
+		const logic = getMatchedOptionLogics(walk.answers[hash], walk.optionHashes[hash], question?.options ?? []).find(hasExitLogic);
+		if (logic) return {
+			path: path.slice(0, index + 1),
+			exit: {
+				questionHash: hash,
+				title: logic.exit_title ?? null,
+				content: logic.exit ?? null
+			}
+		};
+	}
+	return {
+		path,
+		exit: null
+	};
+}
+/**
+* A table section reads its main questions row by row, in consultation order: one question for each heading
+* after the first. A row a jump or an exit hides as a whole is left out. When the questions do not fill whole
+* rows, or an answer hides part of a row, the section shows as a list, so a cell can never move under the wrong
+* row label.
+*/
+function sectionTable(section, questions, shown) {
+	const columns = section.columns ?? [];
+	const width = columns.length - 1;
+	if (!isTableLayout(section) || !questions.length || questions.length % width) return null;
+	const rows = [];
+	for (let start = 0; start < questions.length; start += width) {
+		const row = questions.slice(start, start + width);
+		const showing = row.filter((hash) => shown.has(hash)).length;
+		if (showing === row.length) rows.push(row);
+		else if (showing) return null;
+	}
+	return rows.length ? {
+		columns,
+		rows
+	} : null;
+}
+/** A section set to table with a heading for the row labels and at least one more. */
+var isTableLayout = (section) => section.layout === "table" && (section.columns?.length ?? 0) > 1;
+/** Main questions in flow order: a run with no section, or a section's questions at the place of its first one. */
+function draftBlocks(path, sectionOf) {
+	const drafts = [];
+	const bySection = /* @__PURE__ */ new Map();
+	for (const hash of path) {
+		const section = sectionOf(hash);
+		const last = drafts[drafts.length - 1];
+		if (!section) {
+			if (last?.kind === "questions") last.questions.push(hash);
+			else drafts.push({
+				kind: "questions",
+				questions: [hash]
+			});
+		} else if (bySection.has(section.id)) bySection.get(section.id)?.questions.push(hash);
+		else {
+			const created = {
+				kind: "section",
+				source: section,
+				questions: [hash]
+			};
+			bySection.set(section.id, created);
+			drafts.push(created);
+		}
+	}
+	return drafts;
+}
+/**
+* What the page shows: the flow from the first question. A section's questions show together, where its first
+* question comes in the flow, and questions with no section show where they come. Sections next to each other
+* with the same group show as tabs. Follow-ups show under their parent, so only main questions are grouped.
+*/
+function buildForm(walk, consultation) {
+	const { path, exit } = pathAndExit(walk);
+	const sections = new Map((consultation.sections ?? []).map((section) => [section.id, section]));
+	const byHash = new Map(walk.allQuestions.map((question) => [question.hash, question]));
+	const sectionOf = (hash) => sections.get(byHash.get(hash)?.consultation_section?.[consultation.hash] ?? "") ?? null;
+	const onPath = new Set(path);
+	const sectionQuestionsOf = /* @__PURE__ */ new Map();
+	for (const question of walk.visibleQuestions) {
+		const id = sectionOf(question.hash)?.id;
+		if (id) sectionQuestionsOf.set(id, [...sectionQuestionsOf.get(id) ?? [], question.hash]);
+	}
+	const optional = /* @__PURE__ */ new Set();
+	const blocks = [];
+	for (const draft of draftBlocks(path, sectionOf)) {
+		if (draft.kind === "questions") {
+			blocks.push(draft);
+			continue;
+		}
+		const { source } = draft;
+		const table = sectionTable(source, sectionQuestionsOf.get(source.id) ?? [], onPath);
+		if (isTableLayout(source)) {
+			for (const hash of draft.questions) if (!isYesNo(byHash.get(hash))) optional.add(hash);
+		}
+		const section = {
+			id: source.id,
+			name: source.name,
+			description: source.description ?? "",
+			table,
+			questions: table ? table.rows.flat() : draft.questions
+		};
+		const group = source.group?.trim();
+		const previous = blocks[blocks.length - 1];
+		if (group && previous?.kind === "tabs" && previous.name === group) previous.sections.push(section);
+		else if (group) blocks.push({
+			kind: "tabs",
+			name: group,
+			sections: [section]
+		});
+		else blocks.push({
+			kind: "section",
+			section
+		});
+	}
+	const shown = [...shownFrom(pageOrder(blocks), walk)];
+	for (const hash of shown) {
+		const question = byHash.get(hash);
+		if (question?.type === "checkbox" && question.options?.length === 1) optional.add(hash);
+	}
+	return {
+		path,
+		shown,
+		blocks,
+		optional,
+		exit
+	};
+}
+/** The main questions in the order the page draws them. */
+function pageOrder(blocks) {
+	return blocks.flatMap((block) => {
+		if (block.kind === "questions") return block.questions;
+		if (block.kind === "section") return block.section.questions;
+		return block.sections.flatMap((section) => section.questions);
+	});
+}
+/** The copied rule for one answer, without its follow-ups: those are checked as questions of their own. */
+var isAnswered = (question, answers) => areFollowUpsAnswered([question.hash], [{
+	...question,
+	options: question.options?.map((option) => option.logic?.follow_ups ? {
+		...option,
+		logic: {
+			...option.logic,
+			follow_ups: []
+		}
+	} : option)
+}], answers, {});
+/** Questions on the page that still need an answer, in page order. Optional questions are never missing. */
+function missingAnswers(form, walk) {
+	const byHash = new Map(walk.allQuestions.map((question) => [question.hash, question]));
+	return form.shown.filter((hash) => {
+		if (form.optional.has(hash)) return false;
+		const question = byHash.get(hash);
+		return !question || !isAnswered(question, walk.answers);
+	});
+}
+/** The answers on the page: what a draft saves and a submit sends. Answers of a branch a jump leaves are dropped. */
+function formAnswers(form, walk) {
+	return answersOnPath(form.path, walk.allQuestions, walk.answers, walk.optionHashes);
+}
 // node_modules/.pnpm/framer-motion@14.9.1_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
 var LayoutGroupContext = /* @__PURE__ */ createContext({});
 // node_modules/.pnpm/framer-motion@14.9.1_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/framer-motion/dist/es/utils/use-constant.mjs
@@ -19504,6 +19942,725 @@ var Question = ({ hash, consultationHash, questions, answers, optionHashes, onAn
 		}, hash)
 	});
 };
+// sdk/src/ui/form/inputs.tsx
+/** Inputs of the one-page form, in the Prescriber App style: 14px text, 16px rounded fields, a Yes / No pair. */
+var fieldClass = "w-full rounded-2xl border border-gray-300 bg-white px-4 text-sm font-normal text-gray-900 placeholder:text-gray-400 focus:border-primary-700 focus:ring-primary-700 disabled:opacity-60";
+var plainText = (html) => An(html ?? "").result.trim();
+/** Options as a joined pair of buttons, such as Yes / No. They are radio inputs, so the keyboard works as usual. */
+var Segmented = ({ question, answers, optionHashes, onAnswer, disabled, label }) => /* @__PURE__ */ jsx("fieldset", {
+	"aria-label": label ?? plainText(question.title),
+	className: "inline-flex shrink-0",
+	children: question.options.map((option, index) => {
+		const selected = isOptionSelected(option, answers[question.hash], optionHashes[question.hash]);
+		return /* @__PURE__ */ jsxs("label", {
+			className: clsx("flex h-[39px] min-w-[51px] cursor-pointer items-center justify-center border px-3.5 text-sm font-normal transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-300", index === 0 ? "rounded-l-xl" : "-ml-px", index === question.options.length - 1 && "rounded-r-xl", disabled && "pointer-events-none opacity-60", selected ? "relative z-10 border-primary-700 bg-primary-700 text-white" : "border-gray-300 bg-white text-gray-900 hover:bg-gray-50"),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				className: "sr-only",
+				name: `${question.hash}-choice`,
+				checked: selected,
+				disabled,
+				onChange: () => onAnswer(question, option.label, option.logic)
+			}), plainText(option.label)]
+		}, `${option.label}-${index}`);
+	})
+});
+/** A radio question as a dropdown. The native list opens outside the shadow root's styles but works everywhere. */
+var Select = ({ question, answers, optionHashes, onAnswer, disabled, label }) => {
+	const selected = question.options.findIndex((option) => isOptionSelected(option, answers[question.hash], optionHashes[question.hash]));
+	return /* @__PURE__ */ jsxs("select", {
+		"aria-label": label ?? plainText(question.title),
+		disabled,
+		value: selected < 0 ? "" : String(selected),
+		onChange: (event) => {
+			const option = question.options[Number(event.target.value)];
+			if (option) onAnswer(question, option.label, option.logic);
+		},
+		className: clsx(fieldClass, "h-12 pr-10", selected < 0 && "text-gray-400"),
+		children: [/* @__PURE__ */ jsx("option", {
+			value: "",
+			disabled: true,
+			children: "Select an option"
+		}), question.options.map((option, index) => /* @__PURE__ */ jsx("option", {
+			value: String(index),
+			className: "text-gray-900",
+			children: plainText(option.label)
+		}, `${option.label}-${index}`))]
+	});
+};
+/** Free text, a phone number or a date. `multiline` draws the tall box used for notes. */
+var TextInput = ({ question, answers, onAnswer, disabled, label, multiline, placeholder }) => {
+	const value = answers[question.hash] ?? "";
+	const validation = question.validation ? questionValidations[question.validation] : null;
+	const invalid = !!validation && !!value && !validation.validate(value);
+	const aria = {
+		"aria-label": label ?? plainText(question.title),
+		"aria-invalid": invalid || void 0
+	};
+	const change = (text) => onAnswer(question, question.type === "mobile" ? text.replace(/[^0-9]/g, "") : text, void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-1",
+		children: [question.type === "date" ? /* @__PURE__ */ jsx(DatePicker, {
+			...aria,
+			placeholder: "DD-MM-YYYY",
+			value,
+			onChange: change,
+			disabled,
+			className: clsx(fieldClass, "h-12")
+		}) : multiline ? /* @__PURE__ */ jsx("textarea", {
+			...aria,
+			value,
+			disabled,
+			placeholder: validation?.placeholder ?? placeholder,
+			onChange: (event) => change(event.target.value),
+			className: clsx(fieldClass, "min-h-[121px] resize-y py-4 leading-5")
+		}) : /* @__PURE__ */ jsx("input", {
+			...aria,
+			type: question.type === "mobile" ? "tel" : "text",
+			value,
+			disabled,
+			placeholder: validation?.placeholder ?? placeholder,
+			onChange: (event) => change(event.target.value),
+			className: clsx(fieldClass, "h-12")
+		}), invalid && /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-error-900",
+			children: validation.errorMessage
+		})]
+	});
+};
+/** Checkbox options as small ticks. A question with one option draws as one tick with its label. */
+var Checks = ({ question, answers, optionHashes, onAnswer, disabled }) => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: question.options.map((option, index) => /* @__PURE__ */ jsxs("label", {
+		className: "flex cursor-pointer items-center gap-3",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: "h-[18px] w-[18px] cursor-pointer rounded border-gray-300 text-[#1a2f91] focus:ring-primary-700",
+			checked: isOptionSelected(option, answers[question.hash], optionHashes[question.hash]),
+			disabled,
+			onChange: () => onAnswer(question, option.label, option.logic)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm font-normal text-gray-700",
+			dangerouslySetInnerHTML: { __html: sanitize$1(option.label) }
+		})]
+	}, `${option.label}-${index}`))
+});
+/** Radio options that are not Yes / No, as a list of round buttons. */
+var Radios = ({ question, answers, optionHashes, onAnswer, disabled }) => /* @__PURE__ */ jsx("div", {
+	role: "radiogroup",
+	"aria-label": plainText(question.title),
+	className: "flex flex-col gap-2",
+	children: question.options.map((option, index) => {
+		const selected = isOptionSelected(option, answers[question.hash], optionHashes[question.hash]);
+		return /* @__PURE__ */ jsxs("label", {
+			className: "flex cursor-pointer items-center gap-3",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name: question.hash,
+				className: "h-[18px] w-[18px] cursor-pointer border-gray-300 text-primary-700 focus:ring-primary-700",
+				checked: selected,
+				disabled,
+				onChange: () => onAnswer(question, option.label, option.logic)
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-normal text-gray-900",
+					dangerouslySetInnerHTML: { __html: sanitize$1(option.label) }
+				}), option.helper && /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-normal text-gray-700",
+					children: option.helper
+				})]
+			})]
+		}, `${option.label}-${index}`);
+	})
+});
+// sdk/src/ui/form/FormField.tsx
+/** One question of the one-page form with its open follow-ups, in the Prescriber App style. */
+var MissingNote = ({ show }) => show ? /* @__PURE__ */ jsx("p", {
+	role: "alert",
+	className: "text-xs text-error-900",
+	children: "Answer this question."
+}) : null;
+/** The question's description as the grey hint under its label. */
+var Hint = ({ html }) => plainText(html) ? /* @__PURE__ */ jsx("div", {
+	className: "text-xs font-normal tracking-[-0.072px] text-gray-700 [&_a]:underline [&_p]:m-0",
+	dangerouslySetInnerHTML: { __html: sanitize$1(html) }
+}) : null;
+var getOpenFollowUps = (hash, context) => {
+	const question = context.questions.find((q) => q.hash === hash);
+	return getFollowUpHashes(getMatchedOptionLogics(context.answers[hash], context.optionHashes[hash], question?.options ?? []));
+};
+/** The open follow-ups of a question, indented under it. */
+var FollowUps = ({ hash, context }) => {
+	const followUps = getOpenFollowUps(hash, context);
+	if (!followUps.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "mt-3 flex flex-col gap-4 border-l-2 border-primary-100 pl-4",
+		children: followUps.map((followUp) => /* @__PURE__ */ jsx(FormField, {
+			hash: followUp,
+			context
+		}, followUp))
+	});
+};
+/** `spaced` adds the gap a field needs inside a section, where Yes / No rows sit with no gap. */
+var FormField = ({ hash, context, spaced }) => {
+	const question = context.questions.find((q) => q.hash === hash);
+	if (!question) return null;
+	const input = {
+		question,
+		answers: context.answers,
+		optionHashes: context.optionHashes,
+		onAnswer: context.onAnswer
+	};
+	const disabled = context.disabled;
+	const missing = context.missing.has(hash);
+	if (isYesNo(question)) return /* @__PURE__ */ jsxs("div", {
+		id: hash,
+		className: "scroll-m-9 border-b border-gray-300 px-4 py-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-6",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-normal tracking-[-0.084px] text-gray-900",
+						children: question.title
+					}), /* @__PURE__ */ jsx(Hint, { html: question.description })]
+				}), /* @__PURE__ */ jsx(Segmented, {
+					...input,
+					disabled
+				})]
+			}),
+			/* @__PURE__ */ jsx(MissingNote, { show: missing }),
+			/* @__PURE__ */ jsx(FollowUps, {
+				hash,
+				context
+			})
+		]
+	});
+	const supported = FILL_TYPES.includes(question.type);
+	const singleCheck = question.type === "checkbox" && question.options.length === 1;
+	return /* @__PURE__ */ jsxs("div", {
+		id: hash,
+		className: clsx("flex scroll-m-9 flex-col gap-1", spaced && "py-3"),
+		children: [
+			!singleCheck && /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex flex-col gap-px", [
+					"radio",
+					"checkbox",
+					"scale"
+				].includes(question.type) && "mb-1"),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-bold leading-5 text-gray-900",
+					children: question.title
+				}), /* @__PURE__ */ jsx(Hint, { html: question.description })]
+			}),
+			!supported && /* @__PURE__ */ jsxs("p", {
+				className: "rounded-2xl border border-gray-300 bg-gray-50 p-4 text-sm font-normal text-gray-700",
+				children: [
+					"This question type (",
+					question.type,
+					") is shown in Connect only."
+				]
+			}),
+			[
+				"text",
+				"mobile",
+				"date"
+			].includes(question.type) && /* @__PURE__ */ jsx(TextInput, {
+				...input,
+				disabled
+			}),
+			question.type === "textarea" && /* @__PURE__ */ jsx(TextInput, {
+				...input,
+				disabled,
+				multiline: true
+			}),
+			question.type === "checkbox" && /* @__PURE__ */ jsx(Checks, {
+				...input,
+				disabled
+			}),
+			question.type === "scale" && /* @__PURE__ */ jsx(Segmented, {
+				...input,
+				disabled
+			}),
+			["radio", "radio_image"].includes(question.type) && /* @__PURE__ */ jsx(Radios, {
+				...input,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(MissingNote, { show: missing }),
+			/* @__PURE__ */ jsx(FollowUps, {
+				hash,
+				context
+			})
+		]
+	});
+};
+/** A question as a table cell, with no label of its own. */
+var Cell = ({ hash, column, context }) => {
+	const question = context.questions.find((q) => q.hash === hash);
+	if (!question) return null;
+	const input = {
+		question,
+		answers: context.answers,
+		optionHashes: context.optionHashes,
+		onAnswer: context.onAnswer,
+		disabled: context.disabled,
+		label: `${plainText(question.title)}: ${column}`
+	};
+	const placeholder = `Write ${column.toLowerCase()}`;
+	let control = /* @__PURE__ */ jsx("span", {
+		className: "text-sm text-gray-400",
+		children: question.type
+	});
+	if (isYesNo(question) || question.type === "scale") control = /* @__PURE__ */ jsx(Segmented, { ...input });
+	else if (["radio", "radio_image"].includes(question.type)) control = /* @__PURE__ */ jsx(Select, { ...input });
+	else if ([
+		"text",
+		"textarea",
+		"mobile",
+		"date"
+	].includes(question.type)) control = /* @__PURE__ */ jsx(TextInput, {
+		...input,
+		placeholder
+	});
+	else if (question.type === "checkbox") control = /* @__PURE__ */ jsx(Checks, { ...input });
+	const missing = context.missing.has(hash);
+	const pair = isYesNo(question) || question.type === "scale";
+	return /* @__PURE__ */ jsxs("div", {
+		id: hash,
+		className: clsx("scroll-m-9 rounded-xl", pair ? "inline-flex" : "flex w-full", missing && "ring-2 ring-error-900 ring-offset-1"),
+		children: [control, missing && /* @__PURE__ */ jsx("span", {
+			role: "alert",
+			className: "sr-only",
+			children: "Answer this question."
+		})]
+	});
+};
+// sdk/src/ui/form/Blocks.tsx
+/** Sections, tables and tabs of the one-page form, drawn as in the Prescriber App Assessment design. */
+var Heading = ({ name, description }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-px",
+	children: [/* @__PURE__ */ jsx("p", {
+		className: "text-sm font-bold leading-5 tracking-[-0.084px] text-gray-900",
+		children: name
+	}), plainText(description) && /* @__PURE__ */ jsx("div", {
+		className: "text-xs font-normal tracking-[-0.072px] text-gray-700 [&_p]:m-0",
+		dangerouslySetInnerHTML: { __html: sanitize$1(description) }
+	})]
+});
+/** "A1 Attention to detail" draws its code in bold, as the design does. */
+var RowLabel = ({ title }) => {
+	const match = /^([A-Z]{1,3}\d+[a-z]?)\s+(.+)$/.exec(title.trim());
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-sm font-normal leading-5 tracking-[-0.084px] text-gray-900",
+		children: match ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-extrabold",
+				children: match[1]
+			}),
+			" ",
+			match[2]
+		] }) : title
+	});
+};
+/** A Yes / No pair sits in the middle of its column, under a centred heading. */
+var isPair = (hash, questions) => {
+	const question = questions.find((q) => q.hash === hash);
+	return isYesNo(question) || question?.type === "scale";
+};
+/** Column widths from the first row: a pair takes its own width, a dropdown a fixed one, text the space left. */
+var columnClass = (hash, questions) => {
+	const question = questions.find((q) => q.hash === hash);
+	if (isPair(hash, questions)) return "w-px whitespace-nowrap text-center";
+	if (question?.type === "radio" || question?.type === "radio_image") return "w-[248px] min-w-[220px]";
+	return "min-w-[240px]";
+};
+var Table = ({ table, context }) => {
+	const cell = "py-2 pr-6 last:pr-0 lg:pr-12";
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full overflow-x-auto rounded-3xl border border-gray-200 bg-gray-50 p-4",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full min-w-[1000px] border-collapse text-left",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+				className: "border-b border-gray-300",
+				children: table.columns.map((column, index) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					className: clsx("py-4 pr-6 text-base font-bold leading-5 tracking-[-0.15px] text-[#364153] last:pr-0 lg:pr-12", index === 0 ? "w-[300px] min-w-[220px]" : columnClass(table.rows[0][index - 1], context.questions)),
+					children: column
+				}, `${column}-${index}`))
+			}) }), /* @__PURE__ */ jsx("tbody", { children: table.rows.map((cells) => {
+				const label = context.questions.find((q) => q.hash === cells[0])?.title ?? "";
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+					className: "border-b border-gray-300",
+					children: [/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						className: clsx(cell, "font-normal"),
+						children: /* @__PURE__ */ jsx(RowLabel, { title: label })
+					}), cells.map((hash, index) => /* @__PURE__ */ jsx("td", {
+						className: clsx(cell, "align-middle"),
+						children: /* @__PURE__ */ jsx("div", {
+							className: clsx(isPair(hash, context.questions) && "flex justify-center"),
+							children: /* @__PURE__ */ jsx(Cell, {
+								hash,
+								column: table.columns[index + 1],
+								context
+							})
+						})
+					}, hash))]
+				}), cells.some((hash) => getOpenFollowUps(hash, context).length) && /* @__PURE__ */ jsx("tr", {
+					className: "border-b border-gray-300",
+					children: /* @__PURE__ */ jsx("td", {
+						colSpan: table.columns.length,
+						className: "pb-3",
+						children: cells.map((hash) => /* @__PURE__ */ jsx(FollowUps, {
+							hash,
+							context
+						}, hash))
+					})
+				})] }, cells[0]);
+			}) })]
+		})
+	});
+};
+var SectionBody = ({ section, context }) => section.table ? /* @__PURE__ */ jsx(Table, {
+	table: section.table,
+	context
+}) : /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col",
+	children: section.questions.map((hash) => /* @__PURE__ */ jsx(FormField, {
+		hash,
+		context,
+		spaced: true
+	}, hash))
+});
+/** A section's questions with their open follow-ups, walking nested ones. */
+var sectionHashes = (section, context) => {
+	const hashes = /* @__PURE__ */ new Set();
+	for (const hash of section.questions) withFollowUps(hash, context.questions, context.answers, context.optionHashes, hashes);
+	return hashes;
+};
+var Tabs = ({ name, sections, context }) => {
+	const [active, setActive] = useState(sections[0].id);
+	const current = sections.find((section) => section.id === active) ?? sections[0];
+	const needsAnswer = (section) => [...sectionHashes(section, context)].some((hash) => context.missing.has(hash));
+	const focus = context.focus;
+	const handledTick = useRef(focus?.tick ?? 0);
+	useEffect(() => {
+		if (!focus || focus.tick === handledTick.current) return;
+		handledTick.current = focus.tick;
+		const holder = sections.find((section) => sectionHashes(section, context).has(focus.hash));
+		if (holder) setActive(holder.id);
+	}, [focus?.tick]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-6 rounded-3xl border border-gray-200 p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "py-4",
+				children: /* @__PURE__ */ jsx(Heading, {
+					name,
+					description: current.description
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				role: "tablist",
+				"aria-label": name,
+				className: "flex gap-7 overflow-x-auto border-b border-gray-200",
+				children: sections.map((section) => {
+					const count = section.table?.rows.length ?? section.questions.length;
+					const selected = section === current;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": selected,
+						onClick: () => setActive(section.id),
+						className: clsx("relative h-12 whitespace-nowrap px-2 text-base font-normal tracking-[-0.31px]", selected ? "text-primary-700" : "text-gray-500 hover:text-gray-900"),
+						children: [
+							section.name,
+							" (",
+							count,
+							")",
+							needsAnswer(section) && /* @__PURE__ */ jsx("span", {
+								className: "ml-1 text-error-900",
+								children: "•"
+							}),
+							selected && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-primary-700" })
+						]
+					}, section.id);
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			children: /* @__PURE__ */ jsx(SectionBody, {
+				section: current,
+				context
+			})
+		})]
+	});
+};
+var Block = ({ block, context }) => {
+	if (block.kind === "questions") return /* @__PURE__ */ jsx(Fragment$1, { children: block.questions.map((hash) => /* @__PURE__ */ jsx(FormField, {
+		hash,
+		context
+	}, hash)) });
+	if (block.kind === "tabs") return /* @__PURE__ */ jsx(Tabs, {
+		name: block.name,
+		sections: block.sections,
+		context
+	});
+	const { section } = block;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 rounded-[32px] border border-gray-200 bg-white p-6",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			name: section.name,
+			description: section.description
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-2",
+			children: /* @__PURE__ */ jsx(SectionBody, {
+				section,
+				context
+			})
+		})]
+	});
+};
+// sdk/src/ui/FormFlow.tsx
+/** The one-page form layout: every question the flow reaches, in the Prescriber App Assessment design. */
+/**
+* Keys that stay with a block when answers add or hide blocks or sections. A tab group keeps its key when its
+* first section changes, so the selected tab does not reset; a second group with the same name gets its own.
+*/
+var blockKeys = (blocks) => {
+	const groups = /* @__PURE__ */ new Map();
+	return blocks.map((block) => {
+		if (block.kind === "questions") return `questions-${block.questions[0]}`;
+		if (block.kind === "section") return `section-${block.section.id}`;
+		const seen = groups.get(block.name) ?? 0;
+		groups.set(block.name, seen + 1);
+		return `tabs-${block.name}-${seen}`;
+	});
+};
+var FormFlow = ({ loaded, adapter, consultationType, submitLabel = "Submit", onDone, onEvent, queueKey, onConflict, onSaved }) => {
+	const { consultation, saved } = loaded;
+	const allQuestions = useMemo(() => withReachableJumps(consultation.questions ?? []), [consultation.questions]);
+	const visibleQuestions = useMemo(() => filterVisibleQuestions(allQuestions, {}), [allQuestions]);
+	const [answers, setAnswers] = useState(saved.answers ?? {});
+	const [optionHashes, setOptionHashes] = useState({});
+	const [revision, setRevision] = useState(0);
+	const [checked, setChecked] = useState(false);
+	const [focus, setFocus] = useState(null);
+	const container = useRef(null);
+	const walk = {
+		allQuestions,
+		visibleQuestions,
+		consultationHash: consultation.hash,
+		answers,
+		optionHashes
+	};
+	const form = useMemo(() => buildForm(walk, consultation), [
+		allQuestions,
+		visibleQuestions,
+		consultation,
+		answers,
+		optionHashes
+	]);
+	const missing = useMemo(() => new Set(checked ? missingAnswers(form, walk) : []), [checked, form]);
+	const events = useMemo(() => consultationEvents({
+		consultationHash: consultation.hash,
+		experimentOf: consultation.experiment_of,
+		consultationType: consultationType ?? consultation.type ?? "treatment"
+	}), [
+		consultation.hash,
+		consultation.experiment_of,
+		consultation.type,
+		consultationType
+	]);
+	const emitRef = useRef(onEvent);
+	emitRef.current = onEvent;
+	const submittedShown = useRef([]);
+	const save = useTargetSave({
+		adapter,
+		queueKey,
+		revision,
+		latestDraft: () => formAnswers(form, walk),
+		onDone,
+		onConflict,
+		onSaved,
+		onSubmitted: () => {
+			for (const hash of submittedShown.current) emitRef.current?.(events.questionAnswered(hash));
+			emitRef.current?.(events.completed());
+		}
+	});
+	const busy = save.submitState === "submitting" || save.submitState === "submitted";
+	const started = useRef(false);
+	useEffect(() => {
+		if (started.current || Object.keys(saved.answers ?? {}).length || !visibleQuestions.length) return;
+		started.current = true;
+		emitRef.current?.(events.started());
+	}, []);
+	const viewed = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		for (const hash of form.shown) {
+			if (viewed.current.has(hash)) continue;
+			viewed.current.add(hash);
+			emitRef.current?.(events.questionViewed(hash));
+		}
+	}, [form.shown, events]);
+	useEffect(() => {
+		if (!focus) return;
+		const frame = requestAnimationFrame(() => container.current?.querySelector(`[id="${CSS.escape(focus.hash)}"]`)?.scrollIntoView?.({ behavior: "smooth" }));
+		return () => cancelAnimationFrame(frame);
+	}, [focus]);
+	const exitHash = form.exit?.questionHash ?? null;
+	useEffect(() => {
+		if (!exitHash) return;
+		emitRef.current?.(events.questionAnswered(exitHash));
+		emitRef.current?.(events.exited());
+	}, [exitHash, events]);
+	const answer = (question, value, logic) => {
+		if (busy) return;
+		const result = applyAnswer({
+			question,
+			state: {
+				answers,
+				optionHashes
+			},
+			value,
+			logic,
+			ownsProgression: false
+		});
+		if (!result) return;
+		setAnswers(result.answers);
+		setOptionHashes(result.optionHashes);
+		setRevision((value) => value + 1);
+	};
+	const submit = () => {
+		if (!adapter) return;
+		setChecked(true);
+		if (form.exit) {
+			save.rejectSubmit("One answer ends the consultation. Change it before you submit.");
+			return;
+		}
+		const open = missingAnswers(form, walk);
+		if (open.length) {
+			save.rejectSubmit(`${open.length} ${open.length === 1 ? "question has" : "questions have"} no answer. Answer them before you submit.`);
+			setFocus((previous) => ({
+				hash: open[0],
+				tick: (previous?.tick ?? 0) + 1
+			}));
+			return;
+		}
+		submittedShown.current = form.shown;
+		save.submit(formAnswers(form, walk));
+	};
+	if (!visibleQuestions.length) return /* @__PURE__ */ jsx("p", {
+		className: "py-6 text-sm text-gray-600",
+		children: "This consultation has no questions."
+	});
+	const context = {
+		consultationHash: consultation.hash,
+		questions: allQuestions,
+		answers,
+		optionHashes,
+		onAnswer: answer,
+		disabled: busy,
+		missing,
+		focus
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: container,
+		className: "flex flex-col gap-[26px] rounded-[32px] border border-gray-200 bg-white p-4 font-normal text-gray-900 sm:p-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-bold leading-[30px] text-[#111]",
+					children: consultation.title
+				}), adapter && save.submitState !== "submitted" && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-gray-500",
+							"aria-live": "polite",
+							children: save.saveState === "saving" ? "Saving…" : save.saveState === "saved" ? "Draft saved" : ""
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outlined",
+							fullWidth: false,
+							disabled: busy,
+							onClick: save.saveDraft,
+							className: "!h-10 !rounded-2xl !border-primary-700 !px-4 !py-0 text-sm !font-bold normal-case",
+							children: "Save draft"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							fullWidth: false,
+							loading: save.submitState === "submitting",
+							disabled: busy,
+							onClick: submit,
+							className: "!h-10 !rounded-2xl !px-4 !py-0 text-sm !font-bold normal-case !shadow-none",
+							children: submitLabel
+						})
+					]
+				})]
+			}),
+			save.submitState === "submitted" && /* @__PURE__ */ jsx("p", {
+				className: "text-base font-bold",
+				children: "The answers are submitted."
+			}),
+			save.submitError && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-error-900",
+				children: save.submitError
+			}),
+			save.saveState === "error" && /* @__PURE__ */ jsx(ErrorNotice, {
+				message: "Your last answer could not be saved.",
+				onRetry: save.saveDraft
+			}),
+			(() => {
+				const keys = blockKeys(form.blocks);
+				return form.blocks.map((block, index) => /* @__PURE__ */ jsx(Block, {
+					block,
+					context
+				}, keys[index]));
+			})(),
+			form.exit && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "rounded-2xl border border-warning-300 bg-warning-100 p-4",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-1 text-sm font-bold",
+					children: form.exit.title || "No suitable treatments available"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-sm [&_a]:underline [&_p]:mb-2 [&_ul]:ml-4 [&_ul]:list-disc",
+					dangerouslySetInnerHTML: { __html: sanitize$1(form.exit.content ?? "This answer ends the consultation. Change it to go on.") }
+				})]
+			})
+		]
+	});
+};
+// sdk/src/ui/Knockout.tsx
+/** Connect's exit page (`ExitConsultation.tsx`) as a screen inside the component. */
+var Knockout = ({ title, content, onReview, onClose }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col items-start py-8 max-w-2xl",
+	children: [
+		/* @__PURE__ */ jsx("h1", {
+			className: "text-xl md:text-3xl font-bold mb-4",
+			children: title || "No suitable treatments available"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "text-sm sm:text-base mb-8 [&_a]:underline [&_ul]:list-disc [&_ul]:ml-4 [&_li]:ml-4 [&_b]:font-bold [&_strong]:font-bold [&_p]:mb-3",
+			dangerouslySetInnerHTML: { __html: sanitize$1(content ?? "You are not eligible for this treatment. Please exit the consultation or review your answers.") }
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			className: "w-full mb-4 text-md font-bold normal-case bg-primary-700 rounded-3xl",
+			onClick: onReview,
+			children: "Review answer"
+		}),
+		onClose && /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			className: "w-full text-sm normal-case font-bold text-gray-900 rounded-3xl",
+			onClick: onClose,
+			children: "Exit Consultation"
+		})
+	]
+});
 // sdk/src/ui/ReadOnlyAnswers.tsx
 var isHttpsUrl = (value) => {
 	try {
@@ -19571,7 +20728,7 @@ var ReadOnlyAnswers = ({ questions, answers, submittedAt }) => {
 	});
 };
 // sdk/src/styles.css?inline
-var styles_default = "*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #E9EAED; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #A0A3A6; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #A0A3A6; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n\ninput:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6D7684;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n\ninput:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #6D7684;\n  opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n  color: #6D7684;\n  opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n  text-align: inherit;\n}\n\n::-webkit-datetime-edit {\n  display: inline-flex;\n}\n\n::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\nselect {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236D7684' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n}\n\nselect:where([multiple]),select:where([size]:not([size=\"1\"])) {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          print-color-adjust: unset;\n}\n\ninput:where([type='checkbox']),input:where([type='radio']) {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #6D7684;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n\ninput:where([type='checkbox']) {\n  border-radius: 0px;\n}\n\ninput:where([type='radio']) {\n  border-radius: 100%;\n}\n\ninput:where([type='checkbox']):focus,input:where([type='radio']):focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\ninput:where([type='checkbox']):checked,input:where([type='radio']):checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\ninput:where([type='checkbox']):checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='checkbox']):checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='radio']):checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='radio']):checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\ninput:where([type='checkbox']):indeterminate {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='checkbox']):indeterminate {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\ninput:where([type='file']) {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n\ninput:where([type='file']):focus {\n  outline: 1px solid ButtonText;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 600px) {\n\n  .container {\n    max-width: 600px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 900px) {\n\n  .container {\n    max-width: 900px;\n  }\n}\n@media (min-width: 1000px) {\n\n  .container {\n    max-width: 1000px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.m-\\[1px\\] {\n  margin: 1px;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.my-3 {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-10 {\n  margin-bottom: 2.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-auto {\n  margin-right: auto;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.mt-px {\n  margin-top: 1px;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-24 {\n  height: 6rem;\n}\n.h-full {\n  height: 100%;\n}\n.min-h-6 {\n  min-height: 1.5rem;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-24 {\n  width: 6rem;\n}\n.w-\\[calc\\(50\\%-8px\\)\\] {\n  width: calc(50% - 8px);\n}\n.w-full {\n  width: 100%;\n}\n.min-w-6 {\n  min-width: 1.5rem;\n}\n.max-w-2xl {\n  max-width: 42rem;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize {\n  resize: both;\n}\n.scroll-m-9 {\n  scroll-margin: 2.25rem;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-start {\n  align-items: flex-start;\n}\n.\\!items-end {\n  align-items: flex-end !important;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.self-start {\n  align-self: flex-start;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.rounded-3xl {\n  border-radius: 1.5rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\n}\n.\\!border-gray-100 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgb(240 241 243 / var(--tw-border-opacity, 1)) !important;\n}\n.border-error-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 196 178 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(233 234 237 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 213 217 / var(--tw-border-opacity, 1));\n}\n.border-primary {\n  border-color: var(--color-primary-700, #153CB7);\n}\n.border-primary-900 {\n  border-color: var(--color-primary-900, #022DB7);\n}\n.border-success {\n  --tw-border-opacity: 1;\n  border-color: rgb(73 183 21 / var(--tw-border-opacity, 1));\n}\n.\\!bg-primary-100 {\n  background-color: var(--color-primary-100, #EBEFFA) !important;\n}\n.bg-error-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 224 214 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 234 237 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-primary {\n  background-color: var(--color-primary-700, #153CB7);\n}\n.bg-primary-100 {\n  background-color: var(--color-primary-100, #EBEFFA);\n}\n.bg-primary-700 {\n  background-color: var(--color-primary-700, #153CB7);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.\\!py-2 {\n  padding-top: 0.5rem !important;\n  padding-bottom: 0.5rem !important;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.py-16 {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3\\.5 {\n  padding-top: 0.875rem;\n  padding-bottom: 0.875rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-5 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.py-8 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n.py-\\[10px\\] {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-\\[calc\\(50\\%-8px\\)\\] {\n  padding-bottom: calc(50% - 8px);\n}\n.pr-2 {\n  padding-right: 0.5rem;\n}\n.text-left {\n  text-align: left;\n}\n.font-primary {\n  font-family: var(--font-primary), serif;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 500;\n}\n.font-extrabold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 300;\n}\n.font-normal {\n  font-weight: 400;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.normal-case {\n  text-transform: none;\n}\n.tracking-\\[-0\\.176px\\] {\n  letter-spacing: -0.176px;\n}\n.tracking-\\[-0\\.27px\\] {\n  letter-spacing: -0.27px;\n}\n.\\!text-error {\n  --tw-text-opacity: 1 !important;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1)) !important;\n}\n.\\!text-primary-300 {\n  color: var(--color-primary-300, #ABBBED) !important;\n}\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.text-error {\n  --tw-text-opacity: 1;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1));\n}\n.text-error-900 {\n  --tw-text-opacity: 1;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(109 118 132 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(98 106 119 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(78 84 94 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(57 62 69 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(36 39 43 / var(--tw-text-opacity, 1));\n}\n.text-primary {\n  color: var(--color-primary-700, #153CB7);\n}\n.text-primary-700 {\n  color: var(--color-primary-700, #153CB7);\n}\n.text-primary-900 {\n  color: var(--color-primary-900, #022DB7);\n}\n.text-secondary {\n  color: var(--color-secondary-700, #080F30);\n}\n.text-success {\n  --tw-text-opacity: 1;\n  color: rgb(73 183 21 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-60 {\n  opacity: 0.6;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.\\!shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.\\!shadow-none {\n  --tw-shadow: 0 0 #0000 !important;\n  --tw-shadow-colored: 0 0 #0000 !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.outline {\n  outline-style: solid;\n}\n.outline-1 {\n  outline-width: 1px;\n}\n.outline-offset-0 {\n  outline-offset: 0px;\n}\n.\\!outline-error {\n  outline-color: #FF4D1A !important;\n}\n.outline-gray-300 {\n  outline-color: #D2D5D9;\n}\n.\\!ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n\n/* Preflight styles html and body, which a shadow root does not have, so the base type goes on the host. */\n:host {\n  display: block;\n  --font-primary:\n    \"Poppins\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial,\n    sans-serif;\n  --font-heading: \"Fraunces\", Georgia, serif;\n  font-family: var(--font-primary);\n  line-height: 1.5;\n  text-align: left;\n  color: #24272b;\n  -webkit-font-smoothing: antialiased;\n}\n.placeholder\\:text-gray-400::-moz-placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(160 163 166 / var(--tw-text-opacity, 1));\n}\n.placeholder\\:text-gray-400::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(160 163 166 / var(--tw-text-opacity, 1));\n}\n.focus-within\\:outline-2:focus-within {\n  outline-width: 2px;\n}\n.focus-within\\:outline-primary:focus-within {\n  outline-color: var(--color-primary-700, #153CB7);\n}\n.hover\\:border-primary-900:hover {\n  border-color: var(--color-primary-900, #022DB7);\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 234 237 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 251 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-primary-100:hover {\n  background-color: var(--color-primary-100, #EBEFFA);\n}\n.hover\\:bg-primary-900:hover {\n  background-color: var(--color-primary-900, #022DB7);\n}\n.hover\\:text-primary-900:hover {\n  color: var(--color-primary-900, #022DB7);\n}\n.hover\\:outline-gray-700:hover {\n  outline-color: #4E545E;\n}\n@media (min-width: 600px) {\n\n  .sm\\:mt-14 {\n    margin-top: 3.5rem;\n  }\n\n  .sm\\:text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n\n  .sm\\:text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n\n  .sm\\:text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:mb-10 {\n    margin-bottom: 2.5rem;\n  }\n\n  .md\\:mt-10 {\n    margin-top: 2.5rem;\n  }\n\n  .md\\:mt-12 {\n    margin-top: 3rem;\n  }\n\n  .md\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n\n  .md\\:text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n\n  .md\\:leading-\\[22px\\] {\n    line-height: 22px;\n  }\n}\n.\\[\\&_a\\]\\:underline a {\n  text-decoration-line: underline;\n}\n.\\[\\&_b\\]\\:font-bold b {\n  font-weight: 500;\n}\n.\\[\\&_h3\\]\\:mb-2 h3 {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_h3\\]\\:mt-4 h3 {\n  margin-top: 1rem;\n}\n.\\[\\&_h3\\]\\:text-base h3 {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.\\[\\&_h3\\]\\:font-bold h3 {\n  font-weight: 500;\n}\n@media (min-width: 600px) {\n\n  .sm\\:\\[\\&_h3\\]\\:text-lg h3 {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n}\n.\\[\\&_h4\\]\\:mb-1 h4 {\n  margin-bottom: 0.25rem;\n}\n.\\[\\&_h4\\]\\:mt-4 h4 {\n  margin-top: 1rem;\n}\n.\\[\\&_h4\\]\\:font-bold h4 {\n  font-weight: 500;\n}\n.\\[\\&_img\\]\\:mx-auto img {\n  margin-left: auto;\n  margin-right: auto;\n}\n.\\[\\&_img\\]\\:my-1 img {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.\\[\\&_img\\]\\:max-w-full img {\n  max-width: 100%;\n}\n.\\[\\&_li\\]\\:ml-4 li {\n  margin-left: 1rem;\n}\n.\\[\\&_p\\:not\\(\\:last-child\\)\\]\\:mb-2 p:not(:last-child) {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_p\\]\\:mb-3 p {\n  margin-bottom: 0.75rem;\n}\n.\\[\\&_strong\\]\\:font-bold strong {\n  font-weight: 500;\n}\n.\\[\\&_ul\\]\\:mb-2 ul {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_ul\\]\\:ml-4 ul {\n  margin-left: 1rem;\n}\n.\\[\\&_ul\\]\\:list-disc ul {\n  list-style-type: disc;\n}\n";
+var styles_default = "*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #E9EAED; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #A0A3A6; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #A0A3A6; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n\ninput:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6D7684;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n\ninput:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #6D7684;\n  opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n  color: #6D7684;\n  opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n  text-align: inherit;\n}\n\n::-webkit-datetime-edit {\n  display: inline-flex;\n}\n\n::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\nselect {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236D7684' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n}\n\nselect:where([multiple]),select:where([size]:not([size=\"1\"])) {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          print-color-adjust: unset;\n}\n\ninput:where([type='checkbox']),input:where([type='radio']) {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #6D7684;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n\ninput:where([type='checkbox']) {\n  border-radius: 0px;\n}\n\ninput:where([type='radio']) {\n  border-radius: 100%;\n}\n\ninput:where([type='checkbox']):focus,input:where([type='radio']):focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\ninput:where([type='checkbox']):checked,input:where([type='radio']):checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\ninput:where([type='checkbox']):checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='checkbox']):checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='radio']):checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='radio']):checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\ninput:where([type='checkbox']):indeterminate {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n@media (forced-colors: active)  {\n\n  input:where([type='checkbox']):indeterminate {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n\ninput:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\ninput:where([type='file']) {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n\ninput:where([type='file']):focus {\n  outline: 1px solid ButtonText;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 600px) {\n\n  .container {\n    max-width: 600px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 900px) {\n\n  .container {\n    max-width: 900px;\n  }\n}\n@media (min-width: 1000px) {\n\n  .container {\n    max-width: 1000px;\n  }\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.z-10 {\n  z-index: 10;\n}\n.m-\\[1px\\] {\n  margin: 1px;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.my-3 {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.-ml-px {\n  margin-left: -1px;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-10 {\n  margin-bottom: 2.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-1 {\n  margin-left: 0.25rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-auto {\n  margin-right: auto;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-3 {\n  margin-top: 0.75rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.mt-px {\n  margin-top: 1px;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.\\!h-10 {\n  height: 2.5rem !important;\n}\n.h-0\\.5 {\n  height: 0.125rem;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-12 {\n  height: 3rem;\n}\n.h-24 {\n  height: 6rem;\n}\n.h-\\[18px\\] {\n  height: 18px;\n}\n.h-\\[39px\\] {\n  height: 39px;\n}\n.h-full {\n  height: 100%;\n}\n.min-h-6 {\n  min-height: 1.5rem;\n}\n.min-h-\\[121px\\] {\n  min-height: 121px;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-24 {\n  width: 6rem;\n}\n.w-\\[18px\\] {\n  width: 18px;\n}\n.w-\\[248px\\] {\n  width: 248px;\n}\n.w-\\[300px\\] {\n  width: 300px;\n}\n.w-\\[calc\\(50\\%-8px\\)\\] {\n  width: calc(50% - 8px);\n}\n.w-full {\n  width: 100%;\n}\n.w-px {\n  width: 1px;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-6 {\n  min-width: 1.5rem;\n}\n.min-w-\\[1000px\\] {\n  min-width: 1000px;\n}\n.min-w-\\[220px\\] {\n  min-width: 220px;\n}\n.min-w-\\[240px\\] {\n  min-width: 240px;\n}\n.min-w-\\[51px\\] {\n  min-width: 51px;\n}\n.max-w-2xl {\n  max-width: 42rem;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize-y {\n  resize: vertical;\n}\n.resize {\n  resize: both;\n}\n.scroll-m-9 {\n  scroll-margin: 2.25rem;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-start {\n  align-items: flex-start;\n}\n.\\!items-end {\n  align-items: flex-end !important;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.gap-7 {\n  gap: 1.75rem;\n}\n.gap-\\[26px\\] {\n  gap: 26px;\n}\n.gap-px {\n  gap: 1px;\n}\n.self-start {\n  align-self: flex-start;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-x-auto {\n  overflow-x: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.\\!rounded-2xl {\n  border-radius: 1rem !important;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-2xl {\n  border-radius: 1rem;\n}\n.rounded-3xl {\n  border-radius: 1.5rem;\n}\n.rounded-\\[32px\\] {\n  border-radius: 32px;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-l-xl {\n  border-top-left-radius: 0.75rem;\n  border-bottom-left-radius: 0.75rem;\n}\n.rounded-r-xl {\n  border-top-right-radius: 0.75rem;\n  border-bottom-right-radius: 0.75rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-l-2 {\n  border-left-width: 2px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\n}\n.\\!border-gray-100 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgb(240 241 243 / var(--tw-border-opacity, 1)) !important;\n}\n.\\!border-primary-700 {\n  border-color: var(--color-primary-700, #153CB7) !important;\n}\n.border-error-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 196 178 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(233 234 237 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 213 217 / var(--tw-border-opacity, 1));\n}\n.border-primary {\n  border-color: var(--color-primary-700, #153CB7);\n}\n.border-primary-100 {\n  border-color: var(--color-primary-100, #EBEFFA);\n}\n.border-primary-700 {\n  border-color: var(--color-primary-700, #153CB7);\n}\n.border-primary-900 {\n  border-color: var(--color-primary-900, #022DB7);\n}\n.border-success {\n  --tw-border-opacity: 1;\n  border-color: rgb(73 183 21 / var(--tw-border-opacity, 1));\n}\n.border-warning-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 221 153 / var(--tw-border-opacity, 1));\n}\n.\\!bg-primary-100 {\n  background-color: var(--color-primary-100, #EBEFFA) !important;\n}\n.bg-error-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 224 214 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 234 237 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-primary {\n  background-color: var(--color-primary-700, #153CB7);\n}\n.bg-primary-100 {\n  background-color: var(--color-primary-100, #EBEFFA);\n}\n.bg-primary-700 {\n  background-color: var(--color-primary-700, #153CB7);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-warning-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 241 214 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.\\!px-4 {\n  padding-left: 1rem !important;\n  padding-right: 1rem !important;\n}\n.\\!py-0 {\n  padding-top: 0px !important;\n  padding-bottom: 0px !important;\n}\n.\\!py-2 {\n  padding-top: 0.5rem !important;\n  padding-bottom: 0.5rem !important;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.py-16 {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-3\\.5 {\n  padding-top: 0.875rem;\n  padding-bottom: 0.875rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-5 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.py-8 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n.py-\\[10px\\] {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-\\[calc\\(50\\%-8px\\)\\] {\n  padding-bottom: calc(50% - 8px);\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pr-10 {\n  padding-right: 2.5rem;\n}\n.pr-2 {\n  padding-right: 0.5rem;\n}\n.pr-6 {\n  padding-right: 1.5rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.font-primary {\n  font-family: var(--font-primary), serif;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.\\!font-bold {\n  font-weight: 500 !important;\n}\n.font-bold {\n  font-weight: 500;\n}\n.font-extrabold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 300;\n}\n.font-normal {\n  font-weight: 400;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.normal-case {\n  text-transform: none;\n}\n.leading-5 {\n  line-height: 1.25rem;\n}\n.leading-\\[30px\\] {\n  line-height: 30px;\n}\n.tracking-\\[-0\\.072px\\] {\n  letter-spacing: -0.072px;\n}\n.tracking-\\[-0\\.084px\\] {\n  letter-spacing: -0.084px;\n}\n.tracking-\\[-0\\.15px\\] {\n  letter-spacing: -0.15px;\n}\n.tracking-\\[-0\\.176px\\] {\n  letter-spacing: -0.176px;\n}\n.tracking-\\[-0\\.27px\\] {\n  letter-spacing: -0.27px;\n}\n.tracking-\\[-0\\.31px\\] {\n  letter-spacing: -0.31px;\n}\n.\\!text-error {\n  --tw-text-opacity: 1 !important;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1)) !important;\n}\n.\\!text-primary-300 {\n  color: var(--color-primary-300, #ABBBED) !important;\n}\n.text-\\[\\#111\\] {\n  --tw-text-opacity: 1;\n  color: rgb(17 17 17 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#1a2f91\\] {\n  --tw-text-opacity: 1;\n  color: rgb(26 47 145 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#364153\\] {\n  --tw-text-opacity: 1;\n  color: rgb(54 65 83 / var(--tw-text-opacity, 1));\n}\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.text-error {\n  --tw-text-opacity: 1;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1));\n}\n.text-error-900 {\n  --tw-text-opacity: 1;\n  color: rgb(255 77 26 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(160 163 166 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(109 118 132 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(98 106 119 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(78 84 94 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(57 62 69 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(36 39 43 / var(--tw-text-opacity, 1));\n}\n.text-primary {\n  color: var(--color-primary-700, #153CB7);\n}\n.text-primary-700 {\n  color: var(--color-primary-700, #153CB7);\n}\n.text-primary-900 {\n  color: var(--color-primary-900, #022DB7);\n}\n.text-secondary {\n  color: var(--color-secondary-700, #080F30);\n}\n.text-success {\n  --tw-text-opacity: 1;\n  color: rgb(73 183 21 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-60 {\n  opacity: 0.6;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.\\!shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.\\!shadow-none {\n  --tw-shadow: 0 0 #0000 !important;\n  --tw-shadow-colored: 0 0 #0000 !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.outline {\n  outline-style: solid;\n}\n.outline-1 {\n  outline-width: 1px;\n}\n.outline-offset-0 {\n  outline-offset: 0px;\n}\n.\\!outline-error {\n  outline-color: #FF4D1A !important;\n}\n.outline-gray-300 {\n  outline-color: #D2D5D9;\n}\n.\\!ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n.ring-2 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-error-900 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 77 26 / var(--tw-ring-opacity, 1));\n}\n.ring-offset-1 {\n  --tw-ring-offset-width: 1px;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n\n/* Preflight styles html and body, which a shadow root does not have, so the base type goes on the host. */\n:host {\n  display: block;\n  --font-primary:\n    \"Poppins\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial,\n    sans-serif;\n  --font-heading: \"Fraunces\", Georgia, serif;\n  font-family: var(--font-primary);\n  line-height: 1.5;\n  text-align: left;\n  color: #24272b;\n  -webkit-font-smoothing: antialiased;\n}\n.placeholder\\:text-gray-400::-moz-placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(160 163 166 / var(--tw-text-opacity, 1));\n}\n.placeholder\\:text-gray-400::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(160 163 166 / var(--tw-text-opacity, 1));\n}\n.last\\:pr-0:last-child {\n  padding-right: 0px;\n}\n.focus-within\\:outline-2:focus-within {\n  outline-width: 2px;\n}\n.focus-within\\:outline-primary:focus-within {\n  outline-color: var(--color-primary-700, #153CB7);\n}\n.hover\\:border-primary-900:hover {\n  border-color: var(--color-primary-900, #022DB7);\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 234 237 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 251 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-primary-100:hover {\n  background-color: var(--color-primary-100, #EBEFFA);\n}\n.hover\\:bg-primary-900:hover {\n  background-color: var(--color-primary-900, #022DB7);\n}\n.hover\\:text-gray-900:hover {\n  --tw-text-opacity: 1;\n  color: rgb(36 39 43 / var(--tw-text-opacity, 1));\n}\n.hover\\:text-primary-900:hover {\n  color: var(--color-primary-900, #022DB7);\n}\n.hover\\:outline-gray-700:hover {\n  outline-color: #4E545E;\n}\n.focus\\:border-primary-700:focus {\n  border-color: var(--color-primary-700, #153CB7);\n}\n.focus\\:ring-primary-700:focus {\n  --tw-ring-color: var(--color-primary-700, #153CB7);\n}\n.disabled\\:opacity-60:disabled {\n  opacity: 0.6;\n}\n.has-\\[\\:focus-visible\\]\\:ring-2:has(:focus-visible) {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.has-\\[\\:focus-visible\\]\\:ring-primary-300:has(:focus-visible) {\n  --tw-ring-color: var(--color-primary-300, #ABBBED);\n}\n@media (min-width: 600px) {\n\n  .sm\\:mt-14 {\n    margin-top: 3.5rem;\n  }\n\n  .sm\\:p-6 {\n    padding: 1.5rem;\n  }\n\n  .sm\\:text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n\n  .sm\\:text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n\n  .sm\\:text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:mb-10 {\n    margin-bottom: 2.5rem;\n  }\n\n  .md\\:mt-10 {\n    margin-top: 2.5rem;\n  }\n\n  .md\\:mt-12 {\n    margin-top: 3rem;\n  }\n\n  .md\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n\n  .md\\:text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n\n  .md\\:leading-\\[22px\\] {\n    line-height: 22px;\n  }\n}\n@media (min-width: 900px) {\n\n  .lg\\:pr-12 {\n    padding-right: 3rem;\n  }\n}\n.\\[\\&_a\\]\\:underline a {\n  text-decoration-line: underline;\n}\n.\\[\\&_b\\]\\:font-bold b {\n  font-weight: 500;\n}\n.\\[\\&_h3\\]\\:mb-2 h3 {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_h3\\]\\:mt-4 h3 {\n  margin-top: 1rem;\n}\n.\\[\\&_h3\\]\\:text-base h3 {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.\\[\\&_h3\\]\\:font-bold h3 {\n  font-weight: 500;\n}\n@media (min-width: 600px) {\n\n  .sm\\:\\[\\&_h3\\]\\:text-lg h3 {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n}\n.\\[\\&_h4\\]\\:mb-1 h4 {\n  margin-bottom: 0.25rem;\n}\n.\\[\\&_h4\\]\\:mt-4 h4 {\n  margin-top: 1rem;\n}\n.\\[\\&_h4\\]\\:font-bold h4 {\n  font-weight: 500;\n}\n.\\[\\&_img\\]\\:mx-auto img {\n  margin-left: auto;\n  margin-right: auto;\n}\n.\\[\\&_img\\]\\:my-1 img {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.\\[\\&_img\\]\\:max-w-full img {\n  max-width: 100%;\n}\n.\\[\\&_li\\]\\:ml-4 li {\n  margin-left: 1rem;\n}\n.\\[\\&_p\\:not\\(\\:last-child\\)\\]\\:mb-2 p:not(:last-child) {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_p\\]\\:m-0 p {\n  margin: 0px;\n}\n.\\[\\&_p\\]\\:mb-2 p {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_p\\]\\:mb-3 p {\n  margin-bottom: 0.75rem;\n}\n.\\[\\&_strong\\]\\:font-bold strong {\n  font-weight: 500;\n}\n.\\[\\&_ul\\]\\:mb-2 ul {\n  margin-bottom: 0.5rem;\n}\n.\\[\\&_ul\\]\\:ml-4 ul {\n  margin-left: 1rem;\n}\n.\\[\\&_ul\\]\\:list-disc ul {\n  list-style-type: disc;\n}\n";
 // sdk/src/ui/ShadowRoot.tsx
 var FONT_LINK_ID = "evaro-consultation-fonts";
 var FONT_URL = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Poppins:wght@300;400;500;600&display=swap";
@@ -19626,7 +20783,8 @@ var EMPTY_SAVED = {
 	answers: {},
 	status: "empty",
 	consultationVersion: null,
-	submittedAt: null
+	submittedAt: null,
+	version: null
 };
 var themeStyle = (theme) => {
 	const style = {};
@@ -19636,41 +20794,72 @@ var themeStyle = (theme) => {
 	}
 	return style;
 };
-var errorMessage = (error) => error instanceof Error ? error.message : "Something went wrong";
-var ErrorNotice = ({ message, onRetry }) => /* @__PURE__ */ jsxs("div", {
-	role: "alert",
-	className: "my-4 flex flex-col gap-3 rounded-lg border border-error-300 bg-error-100 p-4 text-sm text-gray-900",
-	children: [/* @__PURE__ */ jsx("p", { children: message }), /* @__PURE__ */ jsx(Button, {
-		variant: "outlined",
-		fullWidth: false,
-		className: "self-start !py-2",
-		onClick: onRetry,
-		children: "Try again"
-	})]
-});
+var targetApiKey = (environment, nodeApiUrl) => {
+	try {
+		return nodeApiBase(environment, nodeApiUrl);
+	} catch {
+		return `invalid:${environment}:${nodeApiUrl ?? ""}`;
+	}
+};
 function Consultation(props) {
-	const { consultation: hash, vendor, environment, target, getToken, readOnly, preview } = props;
+	const { consultation: hash, vendor, environment, target, getToken, nodeApiUrl, readOnly, preview, layout = "steps" } = props;
 	const [loaded, setLoaded] = useState(null);
 	const [loadError, setLoadError] = useState(null);
 	const [attempt, setAttempt] = useState(0);
 	const getTokenRef = useRef(getToken);
 	getTokenRef.current = getToken;
 	const targetKey = target ? `${target.type}:${target.id}` : "";
-	const adapter = useMemo(() => target ? createTargetAdapter(target, environment, () => getTokenRef.current?.() ?? null) : null, [targetKey, environment]);
+	const targetApi = target ? targetApiKey(environment, nodeApiUrl) : "";
+	const adapter = useMemo(() => target ? createTargetAdapter(target, environment, () => getTokenRef.current?.() ?? null, nodeApiUrl) : null, [targetKey, targetApi]);
+	const previewFlag = !!preview;
+	const readOnlyFlag = !!readOnly;
+	const loadKey = JSON.stringify([
+		hash,
+		vendor,
+		environment,
+		previewFlag,
+		targetKey,
+		targetApi,
+		readOnlyFlag,
+		layout
+	]);
+	const queueKey = JSON.stringify([targetApi, targetKey]);
+	const shownQueueKey = useRef(queueKey);
+	shownQueueKey.current = queueKey;
+	const [conflict, setConflict] = useState(false);
+	const savedOnly = useRef(false);
+	const lastLoaded = useRef(null);
+	const onConflict = useCallback(() => {
+		if (shownQueueKey.current !== queueKey) return;
+		savedOnly.current = true;
+		setConflict(true);
+		setAttempt((value) => value + 1);
+	}, [queueKey]);
+	const onSaved = useCallback(() => {
+		if (shownQueueKey.current === queueKey) setConflict(false);
+	}, [queueKey]);
+	useEffect(() => setConflict(false), [loadKey]);
 	useEffect(() => {
 		let cancelled = false;
 		setLoaded(null);
 		setLoadError(null);
+		const afterDrafts = () => draftQueueIdle(queueKey);
+		const reuse = savedOnly.current && lastLoaded.current?.key === loadKey ? lastLoaded.current : null;
+		savedOnly.current = false;
 		Promise.resolve().then(() => Promise.all([
-			fetchVendorConsultation(environment, hash, vendor, !!preview),
-			fetchVendorTheme(environment, vendor).catch(() => null),
-			adapter ? adapter.load() : Promise.resolve(EMPTY_SAVED)
+			reuse?.consultation ?? fetchVendorConsultation(environment, hash, vendor, previewFlag),
+			reuse ? reuse.theme : fetchVendorTheme(environment, vendor).catch(() => null),
+			adapter ? afterDrafts().then(() => adapter.load()) : Promise.resolve(EMPTY_SAVED)
 		])).then(([consultation, theme, saved]) => {
-			if (!cancelled) setLoaded({
+			if (cancelled) return;
+			lastLoaded.current = {
+				key: loadKey,
+				attempt,
 				consultation,
 				theme,
 				saved
-			});
+			};
+			setLoaded(lastLoaded.current);
 		}).catch((error) => {
 			if (!cancelled) setLoadError(errorMessage(error));
 		});
@@ -19681,8 +20870,11 @@ function Consultation(props) {
 		hash,
 		vendor,
 		environment,
-		preview,
+		previewFlag,
 		adapter,
+		queueKey,
+		readOnlyFlag,
+		layout,
 		attempt
 	]);
 	return /* @__PURE__ */ jsx(ShadowRoot, {
@@ -19694,25 +20886,40 @@ function Consultation(props) {
 					message: `The consultation could not be loaded. ${loadError}`,
 					onRetry: () => setAttempt((value) => value + 1)
 				}),
-				!loaded && !loadError && /* @__PURE__ */ jsx("div", {
+				loaded?.key !== loadKey && !loadError && /* @__PURE__ */ jsx("div", {
 					className: "flex justify-center py-16 text-primary",
 					"aria-busy": "true",
 					children: /* @__PURE__ */ jsx(CircularProgress, { size: 48 })
 				}),
-				loaded && (readOnly || loaded.saved.status === "submitted" ? /* @__PURE__ */ jsx(ReadOnlyAnswers, {
+				conflict && loaded?.key === loadKey && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					className: "my-4 rounded-lg border border-warning-300 bg-warning-100 p-4 text-sm text-gray-900",
+					children: "The answers changed in another place. The saved answers are shown again."
+				}),
+				loaded?.key === loadKey && (readOnly || loaded.saved.status === "submitted" ? /* @__PURE__ */ jsx(ReadOnlyAnswers, {
 					questions: loaded.consultation.questions ?? [],
 					answers: loaded.saved.answers,
 					submittedAt: loaded.saved.submittedAt
-				}) : /* @__PURE__ */ jsx(Flow, {
+				}) : layout === "form" ? /* @__PURE__ */ jsx(FormFlow, {
 					...props,
 					loaded,
-					adapter
-				}))
+					adapter,
+					queueKey,
+					onConflict,
+					onSaved
+				}, `${loadKey}:${loaded.attempt}`) : /* @__PURE__ */ jsx(Flow, {
+					...props,
+					loaded,
+					adapter,
+					queueKey,
+					onConflict,
+					onSaved
+				}, `${loadKey}:${loaded.attempt}`))
 			]
 		})
 	});
 }
-var Flow = ({ loaded, adapter, consultationType, onDone, onEvent }) => {
+var Flow = ({ loaded, adapter, consultationType, onDone, onEvent, queueKey, onConflict, onSaved }) => {
 	const { consultation, saved } = loaded;
 	const emit = useCallback((event) => onEvent?.(event), [onEvent]);
 	const flow = useConsultationFlow({
@@ -19722,78 +20929,28 @@ var Flow = ({ loaded, adapter, consultationType, onDone, onEvent }) => {
 		isNewStart: !Object.keys(saved.answers ?? {}).length,
 		emit
 	});
-	const [saveState, setSaveState] = useState("idle");
-	const [submitState, setSubmitState] = useState("idle");
-	const [submitError, setSubmitError] = useState(null);
-	const latestDraft = useRef(null);
-	latestDraft.current = () => draftAnswers(flow.history, {
-		allQuestions: flow.allQuestions,
-		visibleQuestions: flow.questions,
-		consultationHash: consultation.hash,
-		answers: flow.answers,
-		optionHashes: flow.optionHashes
-	});
-	const draftTimer = useRef(null);
-	const draftQueue = useRef(Promise.resolve());
-	const closed = useRef(false);
-	const draftSeq = useRef(0);
-	const saveDraft = useCallback(() => {
-		if (!adapter) return;
-		const seq = ++draftSeq.current;
-		const isLatest = () => seq === draftSeq.current;
-		setSaveState("saving");
-		const request = draftQueue.current.then(async () => {
-			if (closed.current) return false;
-			await adapter.saveDraft(latestDraft.current());
-			return true;
-		});
-		draftQueue.current = request.catch(() => void 0);
-		request.then((sent) => {
-			if (!isLatest()) return;
-			setSaveState((state) => sent ? "saved" : state === "saving" ? "idle" : state);
-		}, () => {
-			if (isLatest()) setSaveState("error");
-		});
-	}, [adapter]);
-	useEffect(() => {
-		if (!adapter || flow.revision === 0 || closed.current) return;
-		draftTimer.current = setTimeout(saveDraft, 600);
-		return () => clearTimeout(draftTimer.current);
-	}, [
+	const { saveState, submitState, submitError, saveDraft, ...save } = useTargetSave({
 		adapter,
-		flow.revision,
-		saveDraft
-	]);
-	const submit = async () => {
+		queueKey,
+		revision: flow.revision,
+		latestDraft: () => draftAnswers(flow.history, {
+			allQuestions: flow.allQuestions,
+			visibleQuestions: flow.questions,
+			consultationHash: consultation.hash,
+			answers: flow.answers,
+			optionHashes: flow.optionHashes
+		}),
+		onDone,
+		onConflict,
+		onSaved
+	});
+	const submit = () => {
 		if (!adapter) return;
 		if (!isPathComplete(flow.history, flow.allQuestions, flow.answers, flow.optionHashes)) {
-			setSubmitState("error");
-			setSubmitError("Some questions have no answer. Go back and answer them before you submit.");
+			save.rejectSubmit("Some questions have no answer. Go back and answer them before you submit.");
 			return;
 		}
-		closed.current = true;
-		clearTimeout(draftTimer.current);
-		setSubmitState("submitting");
-		setSubmitError(null);
-		const submitted = () => {
-			setSubmitState("submitted");
-			setSaveState("idle");
-			onDone?.();
-		};
-		try {
-			await draftQueue.current;
-			await adapter.submit(answersOnPath(flow.history, flow.allQuestions, flow.answers, flow.optionHashes));
-			submitted();
-		} catch (error) {
-			if (await adapter.load().then((saved) => saved.status, () => null) === "submitted") {
-				submitted();
-				return;
-			}
-			setSubmitState("error");
-			setSubmitError(`The answers could not be submitted. ${errorMessage(error)}`);
-			closed.current = false;
-			saveDraft();
-		}
+		save.submit(answersOnPath(flow.history, flow.allQuestions, flow.answers, flow.optionHashes));
 	};
 	const progress = flow.phase === "complete" ? 1 : flow.questions.length ? (flow.questionIndex + 1) / flow.questions.length : 0;
 	const busy = submitState === "submitting";