@incodetech/web 0.0.0-dev-20260501-67ce3a5 → 0.0.0-dev-20260504-4f40699

package/dist/curp-validation/curp-validation.es.js

@@ -1,273 +1,274 @@
 import { n as e } from "../i18n-D6pCC7RL.js";
-import { S as t, v as n } from "../vendor-preact-D6SntenC.js";
-import { i as r } from "../hooks-K-ks8TCv.js";
-import { t as i } from "../incodeComponent-Brc9IhMv.js";
-import { t as a } from "../spacer-DCljE53A.js";
-import { t as o } from "../page-D5Mt-0zn.js";
-import { t as s } from "../spinner-CNteWaxs.js";
-import "../spinner-BiPJCr9Q.js";
-import { t as c } from "../button-4-ToV5B_.js";
-import { g as l } from "../icons-BtdVuyUn.js";
-import { t as u } from "../successIcon-SlKgTSty.js";
-import { t as d } from "../inputComposed-28d14HXP.js";
-import { t as f } from "../dropdownComposed-z3-qcyhl.js";
+import { S as t, _ as n, l as r, v as i } from "../vendor-preact-D6SntenC.js";
+import { i as a } from "../hooks-K-ks8TCv.js";
+import { t as o } from "../incodeComponent-Brc9IhMv.js";
+import { t as s } from "../spacer-DCljE53A.js";
+import { t as c } from "../page-D5Mt-0zn.js";
+import { t as l } from "../typography-BU5GeRw-.js";
+import { t as u } from "../transitionSpinner-CisZoKUv.js";
+import { t as d } from "../button-4-ToV5B_.js";
+import { g as f } from "../icons-BtdVuyUn.js";
+import { t as p } from "../successIcon-SlKgTSty.js";
+import { t as m } from "../inputComposed-28d14HXP.js";
+import { t as h } from "../dropdownComposed-z3-qcyhl.js";
 import "../dropdownComposed-BDHVzek1.js";
-import { t as p } from "../dateInputComposed-CVqyqQIV.js";
+import { t as g } from "../dateInputComposed-CVqyqQIV.js";
 import "../dateInputComposed-BE3SBKOa.js";
-import { t as m } from "../incodeModule-BH9gV7jI.js";
-import { createCurpValidationManager as h, mexicanStates as g } from "@incodetech/core/curp-validation";
-//#region src/modules/curp-validation/curpInput.tsx
-var _ = ({ curp: t, isValid: r, onCurpChange: i, onVerify: o, onSwitchToGenerate: s, disabled: l = !1, placeholder: u, continueLabel: f, dontHaveLabel: p }) => {
-	let { t: m } = e(), h = u ?? m("curp.placeholder.curp") ?? "CURP", g = f ?? m("curp.continue") ?? "Continue", _ = p ?? m("curp.dontHave") ?? "I don't have my CURP", v = m("curp.placeholder.curp") ?? "CURP";
-	return /* @__PURE__ */ n("div", {
+import { t as _ } from "../incodeModule-BH9gV7jI.js";
+import { createCurpValidationManager as v, mexicanStates as y } from "@incodetech/core/curp-validation";
+//#region src/shared/autoFocusTitle/autoFocusTitle.tsx
+var b = ({ children: e, className: t }) => {
+	let a = r(null);
+	return n(() => {
+		a.current?.focus();
+	}, []), /* @__PURE__ */ i(l, {
+		ref: a,
+		tabIndex: -1,
+		className: t,
+		children: e
+	});
+}, x = ({ curp: t, isValid: n, onCurpChange: r, onVerify: a, onSwitchToGenerate: o, disabled: c = !1, placeholder: l, continueLabel: u, dontHaveLabel: f }) => {
+	let { t: p } = e(), h = l ?? p("curp.placeholder.curp") ?? "CURP", g = u ?? p("curp.continue") ?? "Continue", _ = f ?? p("curp.dontHave") ?? "I don't have my CURP";
+	return /* @__PURE__ */ i("div", {
 		class: "IncodeCurpValidation IncodeCurpInput",
 		children: [
-			/* @__PURE__ */ n(d, {
+			/* @__PURE__ */ i(m, {
 				id: "curp-input",
-				label: "",
 				value: t,
 				onInput: (e) => {
 					let t = e.target;
-					i(t.value.toUpperCase());
+					r(t.value.toUpperCase());
 				},
 				placeholder: h,
-				disabled: l,
+				disabled: c,
 				maxLength: 18,
-				"aria-label": v
+				"aria-label": p("curp.placeholder.curp") ?? "CURP"
 			}),
-			/* @__PURE__ */ n(a, {}),
-			/* @__PURE__ */ n(c, {
+			/* @__PURE__ */ i(s, {}),
+			/* @__PURE__ */ i(d, {
 				type: "button",
-				onClick: o,
-				disabled: !r || l,
+				onClick: a,
+				disabled: !n || c,
 				"data-testid": "curp-verify",
 				children: g
 			}),
-			/* @__PURE__ */ n(c, {
+			/* @__PURE__ */ i(d, {
 				type: "button",
-				onClick: s,
-				disabled: l,
+				variant: "secondary",
+				onClick: o,
+				disabled: c,
 				"data-testid": "curp-switch-to-generate",
-				class: "IncodeCurpInputDontHaveButton",
 				children: _
 			})
 		]
 	});
-}, v = ({ form: t, isValid: r, onFormChange: i, onGenerate: o, disabled: s = !1, labels: l }) => {
-	let { t: u } = e(), m = {
-		firstName: u("curp.labels.firstName") ?? "Your First name",
-		firstLast: u("curp.labels.firstLast") ?? "Your First last name",
-		secondLast: u("curp.labels.secondLast") ?? "Your Second last name",
-		gender: u("curp.labels.genderV2") ?? "Gender",
-		genderPlaceholder: u("curp.placeholder.gender") ?? "Choose gender",
-		male: u("curp.labels.maleV2") ?? "Male",
-		female: u("curp.labels.femaleV2") ?? "Female",
-		other: u("curp.labels.other") ?? "Other",
-		dob: u("curp.labels.dob") ?? "Date of birth",
-		birthState: u("curp.labels.birthState") ?? "State of birth",
-		statePlaceholder: u("curp.placeholder.state") ?? "Select state",
-		generate: u("curp.generateCta") ?? "Generate CURP",
-		...l
-	}, h = (e) => (t) => {
+}, S = ({ form: t, isValid: n, onFormChange: r, onGenerate: a, disabled: o = !1, labels: c }) => {
+	let { t: l } = e(), u = {
+		firstName: l("curp.labels.firstName") ?? "Your First name",
+		firstLast: l("curp.labels.firstLast") ?? "Your First last name",
+		secondLast: l("curp.labels.secondLast") ?? "Your Second last name",
+		gender: l("curp.labels.genderV2") ?? "Gender",
+		genderPlaceholder: l("curp.placeholder.gender") ?? "Choose gender",
+		male: l("curp.labels.maleV2") ?? "Male",
+		female: l("curp.labels.femaleV2") ?? "Female",
+		other: l("curp.labels.other") ?? "Other",
+		dob: l("curp.labels.dob") ?? "Date of birth",
+		birthState: l("curp.labels.birthState") ?? "State of birth",
+		statePlaceholder: l("curp.placeholder.state") ?? "Select state",
+		generate: l("curp.generateCta") ?? "Generate CURP",
+		...c
+	}, f = (e) => (t) => {
 		let n = t.target;
-		i({ [e]: n.value });
-	}, _ = [
+		r({ [e]: n.value });
+	}, p = [
 		{
 			value: "H",
-			label: m.male
+			label: u.male
 		},
 		{
 			value: "M",
-			label: m.female
+			label: u.female
 		},
 		{
 			value: "X",
-			label: m.other
+			label: u.other
 		}
-	], v = g.map((e) => ({
+	], _ = y.map((e) => ({
 		value: e.value,
 		label: e.label
 	}));
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ i("div", {
 		class: "IncodeCurpValidation IncodeGenerateCurpForm",
 		children: [
-			/* @__PURE__ */ n(d, {
+			/* @__PURE__ */ i(m, {
 				id: "curp-first-name",
-				label: m.firstName,
+				label: u.firstName,
 				value: t.name,
-				onInput: h("name"),
-				placeholder: m.firstName,
-				disabled: s,
+				onInput: f("name"),
+				placeholder: u.firstName,
+				disabled: o,
 				autoComplete: "given-name"
 			}),
-			/* @__PURE__ */ n(d, {
+			/* @__PURE__ */ i(m, {
 				id: "curp-first-last",
-				label: m.firstLast,
+				label: u.firstLast,
 				value: t.firstLastName,
-				onInput: h("firstLastName"),
-				placeholder: m.firstLast,
-				disabled: s
+				onInput: f("firstLastName"),
+				placeholder: u.firstLast,
+				disabled: o
 			}),
-			/* @__PURE__ */ n(d, {
+			/* @__PURE__ */ i(m, {
 				id: "curp-second-last",
-				label: m.secondLast,
+				label: u.secondLast,
 				value: t.secondLastName,
-				onInput: h("secondLastName"),
-				placeholder: m.secondLast,
-				disabled: s
+				onInput: f("secondLastName"),
+				placeholder: u.secondLast,
+				disabled: o
 			}),
-			/* @__PURE__ */ n(f, {
+			/* @__PURE__ */ i(h, {
 				id: "curp-gender",
-				label: m.gender,
-				placeholder: m.genderPlaceholder,
+				label: u.gender,
+				placeholder: u.genderPlaceholder,
 				value: t.gender,
-				options: _,
-				disabled: s,
-				onChange: (e) => i({ gender: e }),
+				options: p,
+				disabled: o,
+				onChange: (e) => r({ gender: e }),
 				"data-testid": "curp-gender"
 			}),
-			/* @__PURE__ */ n(p, {
+			/* @__PURE__ */ i(g, {
 				id: "curp-birth-date",
-				label: m.dob,
+				label: u.dob,
 				value: t.birthDate,
-				onInput: h("birthDate"),
+				onInput: f("birthDate"),
 				max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-				placeholder: u("curp.placeholder.dob") ?? "mm/dd/yyyy",
-				disabled: s,
+				placeholder: l("curp.placeholder.dob") ?? "mm/dd/yyyy",
+				disabled: o,
 				"data-testid": "curp-birth-date"
 			}),
-			/* @__PURE__ */ n(f, {
+			/* @__PURE__ */ i(h, {
 				id: "curp-birth-state",
-				label: m.birthState,
-				placeholder: m.statePlaceholder,
+				label: u.birthState,
+				placeholder: u.statePlaceholder,
 				value: t.birthState,
-				options: v,
-				disabled: s,
-				onChange: (e) => i({ birthState: e }),
+				options: _,
+				disabled: o,
+				onChange: (e) => r({ birthState: e }),
 				"data-testid": "curp-birth-state",
 				searchable: !0
 			}),
-			/* @__PURE__ */ n(a, { size: 16 }),
-			/* @__PURE__ */ n(c, {
+			/* @__PURE__ */ i(s, { size: 16 }),
+			/* @__PURE__ */ i(d, {
 				type: "button",
-				onClick: o,
-				disabled: !r || s,
+				onClick: a,
+				disabled: !n || o,
 				"data-testid": "curp-generate",
-				children: m.generate
+				children: u.generate
 			})
 		]
 	});
-}, y = ({ config: i, onFinish: d, onError: f }) => {
-	let { t: p } = e(), [m, g] = r(() => {
-		if (!i) throw Error("CURP validation config is required");
-		return h({ config: i });
-	});
-	if (m.status === "idle" || m.status === "loading" || m.status === "verifying" || m.status === "generating") return /* @__PURE__ */ n(o, {
-		className: "IncodeCurpValidationPage",
-		children: /* @__PURE__ */ n("div", {
-			class: "IncodeCurpValidation IncodeCurpLoading",
-			children: /* @__PURE__ */ n(s, {
-				title: m.status === "generating" ? p("curp.status.generating") ?? "Generating..." : p("curp.status.verifying") ?? "Verifying...",
-				fullScreen: !1
-			})
-		})
+}, C = ({ config: n, onFinish: r, onError: o }) => {
+	let { t: l } = e(), [h, g] = a(() => {
+		if (!n) throw Error("CURP validation config is required");
+		return v({ config: n });
 	});
-	if (m.status === "enterCurp") return /* @__PURE__ */ n(o, {
+	if (h.status === "idle" || h.status === "loading" || h.status === "verifying" || h.status === "generating") return /* @__PURE__ */ i(u, { spinnerConfig: { title: h.status === "generating" ? l("curp.status.generating") ?? "Generating..." : l("curp.status.verifying") ?? "Verifying..." } });
+	if (h.status === "enterCurp") return /* @__PURE__ */ i(c, {
 		className: "IncodeCurpValidationPage",
-		title: p("curp.enterCurp") ?? "Enter your CURP",
-		children: /* @__PURE__ */ n(_, {
-			curp: m.curp,
-			isValid: m.isValid,
+		title: l("curp.enterCurp") ?? "Enter your CURP",
+		children: /* @__PURE__ */ i(x, {
+			curp: h.curp,
+			isValid: h.isValid,
 			onCurpChange: (e) => g.setCurp(e),
 			onVerify: () => g.verify(),
 			onSwitchToGenerate: () => g.switchToGenerate(),
-			placeholder: p("curp.placeholder.curp") ?? "CURP",
-			continueLabel: p("curp.continue") ?? "Continue",
-			dontHaveLabel: p("curp.dontHave") ?? "I don't have my CURP"
+			placeholder: l("curp.placeholder.curp") ?? "CURP",
+			continueLabel: l("curp.continue") ?? "Continue",
+			dontHaveLabel: l("curp.dontHave") ?? "I don't have my CURP"
 		})
 	});
-	if (m.status === "generateCurp") return /* @__PURE__ */ n(o, {
+	if (h.status === "generateCurp") return /* @__PURE__ */ i(c, {
 		className: "IncodeCurpValidationPage",
-		title: p("curp.generate") ?? "Generate your CURP",
-		children: /* @__PURE__ */ n(v, {
-			form: m.form,
-			isValid: m.isValid,
+		title: l("curp.generate") ?? "Generate your CURP",
+		children: /* @__PURE__ */ i(S, {
+			form: h.form,
+			isValid: h.isValid,
 			onFormChange: (e) => g.setGenerateForm(e),
 			onGenerate: () => g.generate()
 		})
 	});
-	if (m.status === "confirmCurp") return /* @__PURE__ */ n(o, {
+	if (h.status === "confirmCurp") return /* @__PURE__ */ i(c, {
 		className: "IncodeCurpValidationPage",
-		title: p("curp.status.confirm") ?? "Confirm your CURP",
-		children: /* @__PURE__ */ n("div", {
+		title: l("curp.status.confirm") ?? "Confirm your CURP",
+		children: /* @__PURE__ */ i("div", {
 			class: "IncodeCurpValidation IncodeCurpConfirm",
 			children: [
-				/* @__PURE__ */ n("input", {
-					type: "text",
-					class: "IncodeCurpConfirmInput",
-					value: m.curp,
+				/* @__PURE__ */ i(m, {
+					id: "curp-confirm-input",
+					value: h.curp,
 					readOnly: !0,
-					"aria-label": p("curp.status.generatedCurp") ?? "Generated CURP"
+					"aria-label": l("curp.status.generatedCurp") ?? "Generated CURP",
+					"data-testid": "curp-confirm-input"
 				}),
-				/* @__PURE__ */ n(a, {}),
-				/* @__PURE__ */ n(c, {
+				/* @__PURE__ */ i(s, {}),
+				/* @__PURE__ */ i(d, {
 					type: "button",
 					onClick: () => g.confirmGenerated(),
 					"data-testid": "curp-confirm",
-					children: p("curp.continue") ?? "Continue"
+					children: l("curp.continue") ?? "Continue"
 				})
 			]
 		})
 	});
-	if (m.status === "success") return /* @__PURE__ */ n(o, {
+	if (h.status === "success") return /* @__PURE__ */ i(c, {
 		className: "IncodeCurpValidationPage",
-		children: /* @__PURE__ */ n("div", {
+		children: /* @__PURE__ */ i("div", {
 			class: "IncodeCurpValidation IncodeCurpSuccess",
 			children: [
-				/* @__PURE__ */ n(u, { size: 32 }),
-				/* @__PURE__ */ n(a, { size: 16 }),
-				/* @__PURE__ */ n("h2", {
-					class: "IncodeCurpSuccessTitle",
-					children: p("curp.status.verified") ?? "Verified"
+				/* @__PURE__ */ i(p, { size: 64 }),
+				/* @__PURE__ */ i(s, { size: 16 }),
+				/* @__PURE__ */ i(b, {
+					className: "IncodeCurpSuccessTitle",
+					children: l("curp.status.verified") ?? "Verified"
 				})
 			]
 		})
 	});
-	if (m.status === "failure" || m.status === "generateError") {
-		let e = m.retriesLeft > 0, r = m.status === "failure" ? p("curp.status.notVerified") ?? "Not verified" : p("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
-		return /* @__PURE__ */ n(o, {
+	if (h.status === "failure" || h.status === "generateError") {
+		let e = h.retriesLeft > 0, n = h.status === "failure" ? l("curp.status.notVerified") ?? "Not verified" : l("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
+		return /* @__PURE__ */ i(c, {
 			className: "IncodeCurpValidationPage",
-			children: /* @__PURE__ */ n("div", {
+			children: /* @__PURE__ */ i("div", {
 				class: "IncodeCurpValidation IncodeCurpFailure",
 				children: [
-					/* @__PURE__ */ n(a, {}),
-					/* @__PURE__ */ n(l, { size: 64 }),
-					/* @__PURE__ */ n(a, { size: 16 }),
-					/* @__PURE__ */ n("h2", {
-						class: "IncodeCurpFailureTitle",
-						children: r
+					/* @__PURE__ */ i(s, {}),
+					/* @__PURE__ */ i(f, { size: 64 }),
+					/* @__PURE__ */ i(s, { size: 16 }),
+					/* @__PURE__ */ i(b, {
+						className: "IncodeCurpFailureTitle",
+						children: n
 					}),
-					m.status === "generateError" && e && /* @__PURE__ */ n(t, { children: [/* @__PURE__ */ n(a, { size: 12 }), /* @__PURE__ */ n("p", {
+					h.status === "generateError" && e && /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ i(s, { size: 12 }), /* @__PURE__ */ i("p", {
 						class: "IncodeCurpFailureHint",
-						children: p("curp.status.checkInfo") ?? "Please check your information"
+						role: "alert",
+						children: l("curp.status.checkInfo") ?? "Please check your information"
 					})] }),
-					/* @__PURE__ */ n(a, {}),
-					e && /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(c, {
+					/* @__PURE__ */ i(s, {}),
+					e && /* @__PURE__ */ i(t, { children: /* @__PURE__ */ i(d, {
 						type: "button",
 						onClick: () => g.retry(),
 						"data-testid": "curp-retry",
-						children: m.status === "failure" ? p("curp.status.tryAgain") ?? "Try again" : p("curp.status.edit") ?? "Edit information"
+						children: h.status === "failure" ? l("curp.status.tryAgain") ?? "Try again" : l("curp.status.edit") ?? "Edit information"
 					}) })
 				]
 			})
 		});
 	}
-	return m.status === "finished" ? (d?.(), null) : (m.status === "closed" && f?.(void 0), null);
-}, b = ({ config: e, onFinish: t, onError: r }) => /* @__PURE__ */ n(i, { children: e ? /* @__PURE__ */ n(y, {
+	return h.status === "finished" ? (r?.(), null) : (h.status === "closed" && o?.(void 0), null);
+}, w = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ i(o, { children: e ? /* @__PURE__ */ i(C, {
 	config: e,
 	onFinish: t,
-	onError: r
+	onError: n
 }) : null });
-m(b, "incode-curp-validation");
+_(w, "incode-curp-validation");
 //#endregion
-export { b as CurpValidation };
+export { w as CurpValidation };

package/dist/curp-validation/styles.css

@@ -1,151 +1,82 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-leading: initial;
-      --tw-tracking: initial;
-    }
-  }
-}
-
-.IncodeCurpValidation {
+.IncodeCurpValidationPage .IncodePageContent {
+  padding-top: var(--spacing-32, var(--spacing-32, 32px));
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   align-items: center;
-  width: 100%;
-  height: 100%;
   display: flex;
 }
 
-.IncodeCurpValidationPage .IncodePageContent {
-  padding-top: var(--spacing-32, var(--spacing-32, 32px));
-  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
+.IncodeCurpValidationPage .IncodeCurpValidation {
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
 
-.IncodeCurpInput {
+.IncodeCurpValidationPage .IncodeCurpInput {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
-  width: 100%;
-  max-width: 420px;
   display: flex;
 }
 
-.IncodeCurpInputDontHaveButton.IncodeButton {
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-medium, var(--primitive-border-width-1-5));
-  border-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
-  color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
-  background-color: #0000;
+.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
+  text-decoration: none;
 }
 
-.IncodeGenerateCurpForm {
-  gap: var(--spacing-8, var(--spacing-8, 8px));
-  flex-direction: column;
-  width: 100%;
-  max-width: 420px;
-  display: flex;
+.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
+  color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
 }
 
-.IncodeCurpFormField {
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  flex-direction: column;
+.IncodeCurpValidationPage .IncodeGenerateCurpForm {
   width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
   display: flex;
 }
 
-.IncodeCurpFormLabel {
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-}
-
-.IncodeCurpConfirm {
+.IncodeCurpValidationPage .IncodeCurpConfirm {
+  width: 100%;
+  max-width: var(--incode-curp-confirm-max-w);
   flex-direction: column;
   align-items: center;
-  width: 100%;
-  max-width: 340px;
   display: flex;
 }
 
-.IncodeCurpConfirmInput {
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-default));
-  width: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+.IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
   text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-default, var(--input-text-field-default));
-}
-
-.IncodeCurpLoading {
-  height: 100%;
-  min-height: var(--spacing-0, var(--spacing-none, 0px));
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
 }
 
-.IncodeCurpSuccess, .IncodeCurpFailure {
+.IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
   flex-direction: column;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.IncodeCurpSuccess h2.IncodeCurpSuccessTitle, .IncodeCurpFailure h2.IncodeCurpFailureTitle {
+.IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  text-align: center;
-  font-size: var(--text-2xl, 1.5rem);
-  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
-  --tw-leading: 1.25;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 1.25;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -1px;
-  letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeCurpFailureHint {
+.IncodeCurpValidationPage .IncodeCurpFailureHint {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-leading {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false
-}