@incodetech/web 2.0.1 → 2.1.0-rc.1

package/dist/consent/consent.es.js

@@ -1,90 +1,106 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { _ as t, d as n, l as r, v as i } from "../vendor-preact-D6SntenC.js";
-import { o as a } from "../hooks-BVnGysT7.js";
-import { t as o } from "../incodeComponent-C1o4M0ZK.js";
-import { t as s } from "../page-C1yT4DLb.js";
-import { n as c } from "../typography-CxjaknHN.js";
-import { t as l } from "../transitionSpinner-PIEPU2Vx.js";
-import { t as u } from "../button-DcCUEn2n.js";
-import { t as d } from "../checkbox-Cl57ltq_.js";
-import { t as f } from "../incodeModule-BqCjVgEI.js";
-import { t as p } from "../richText-DbJ5sl2n.js";
-import { n as m, t as h } from "../requiredLabelHint-BLwgqozE.js";
-import { createConsentManager as g } from "@incodetech/core/consent";
+import { n as useTranslation } from "../i18n-CoCO2ZuN.js";
+import { d as T, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { t as Page } from "../page-DxGQj7Gk.js";
+import { t as TransitionSpinner } from "../transitionSpinner-DRRz-NV8.js";
+import { t as Button } from "../button-CM_hgyIP.js";
+import { t as Checkbox } from "../checkbox-BoeLHKgp.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { t as RichText } from "../richText-Cf9aMOCk.js";
+import { n as getRequiredHintMode, t as getFieldHint } from "../requiredLabelHint-DEadtiwx.js";
+import { createConsentManager } from "@incodetech/core/consent";
 //#region src/modules/consent/consent.tsx
-var _ = ({ config: o, manager: f, onFinish: _, onError: v }) => {
-	let { t: y } = e(), b = r(null), [x, S] = a(() => {
-		if (f) return f;
-		if (!o) throw Error("Consent config is required");
-		return g({ config: o });
-	}, { manageLifecycle: !f });
-	t(() => {
-		x.status === "display" && b.current?.focus();
-	}, [x.status]);
-	let C = "checkboxes" in x ? x.checkboxes : void 0, w = n(() => m(C?.map((e) => e.required) ?? []), [C]);
-	return x.status === "finished" ? (_?.(), null) : x.status === "error" ? (v?.(x.error), null) : x.status === "idle" || x.status === "loading" ? /* @__PURE__ */ i(l, { hideText: !0 }) : /* @__PURE__ */ i(s, {
+var stopLinkPropagation = (event) => {
+	if (event.target.closest("a")) event.stopPropagation();
+};
+var ConsentContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t, i18n } = useTranslation();
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("Consent config is required");
+		return createConsentManager({ config: {
+			...config,
+			language: i18n.language
+		} });
+	}, { manageLifecycle: !externalManager });
+	const checkboxes = "checkboxes" in state ? state.checkboxes : void 0;
+	const mode = T(() => getRequiredHintMode(checkboxes?.map((c) => c.required) ?? []), [checkboxes]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.status === "error" ? state.error : void 0
+	});
+	if (isTerminalModuleState(state)) return null;
+	if (state.status === "idle" || state.status === "loading") return /* @__PURE__ */ u(TransitionSpinner, { hideText: true });
+	return /* @__PURE__ */ u(Page, {
 		className: "IncodeConsentPage",
-		hideFooterBranding: !0,
-		hideHeader: !0,
-		children: /* @__PURE__ */ i("div", {
+		title: state.title,
+		children: /* @__PURE__ */ u("div", {
 			class: "IncodeConsentContent",
-			children: [/* @__PURE__ */ i("div", {
-				class: "IncodeConsentBody",
-				children: [
-					/* @__PURE__ */ i(c, {
-						ref: b,
-						className: "IncodeConsentTitle",
-						tabIndex: -1,
-						children: x.title
-					}),
-					/* @__PURE__ */ i(p, {
-						content: x.richText,
+			children: [
+				/* @__PURE__ */ u("div", {
+					class: "IncodeConsentBody",
+					children: [/* @__PURE__ */ u(RichText, {
+						content: state.richText,
 						class: "IncodeRichText"
-					}),
-					/* @__PURE__ */ i("div", {
+					}), /* @__PURE__ */ u("div", {
 						class: "IncodeConsentCheckboxList",
 						role: "group",
-						"aria-label": y("biometricConsent.consentOptions"),
-						children: x.checkboxes.map((e) => {
-							let t = h(w, e.required), n = t ? y(`forms.label.${t}`) : void 0;
-							return /* @__PURE__ */ i(d, {
-								id: `consent-checkbox-${e.id}`,
+						"aria-label": t("biometricConsent.consentOptions"),
+						children: state.checkboxes.map((checkbox) => {
+							const hint = getFieldHint(mode, checkbox.required);
+							const labelHint = hint ? t(`forms.label.${hint}`) : void 0;
+							return /* @__PURE__ */ u(Checkbox, {
+								id: `consent-checkbox-${checkbox.id}`,
 								class: "IncodeConsentCheckbox",
 								size: "s",
-								checked: e.checked,
-								required: e.required,
-								labelHint: n,
-								onChange: () => S.toggleCheckbox(e.id),
-								label: /* @__PURE__ */ i("span", {
+								checked: checkbox.checked,
+								required: checkbox.required,
+								labelHint,
+								onChange: () => manager.toggleCheckbox(checkbox.id),
+								label: /* @__PURE__ */ u("span", {
 									class: "IncodeConsentCheckboxLabel",
-									onClick: (e) => {
-										e.target.closest("a") && e.stopPropagation();
-									},
-									children: /* @__PURE__ */ i(p, {
-										content: e.label,
+									role: "presentation",
+									onClick: stopLinkPropagation,
+									onKeyDown: stopLinkPropagation,
+									children: /* @__PURE__ */ u(RichText, {
+										content: checkbox.label,
 										class: "IncodeRichText",
 										disallowedTags: ["img"]
 									})
 								})
-							}, e.id);
+							}, checkbox.id);
 						})
-					})
-				]
-			}), /* @__PURE__ */ i(u, {
-				"data-testid": "consent-submit",
-				onClick: () => S.submit(),
-				disabled: !x.canSubmit,
-				isLoading: x.status === "submitting",
-				children: y("biometricConsent.button.continue")
-			})]
+					})]
+				}),
+				state.status === "display" && state.error ? /* @__PURE__ */ u("p", {
+					class: "IncodeConsentSubmitError",
+					"data-testid": "consent-submit-error",
+					role: "alert",
+					children: state.error
+				}) : null,
+				/* @__PURE__ */ u(Button, {
+					class: "IncodeConsentButton",
+					"data-testid": "consent-submit",
+					onClick: () => manager.submit(),
+					disabled: !state.canSubmit,
+					isLoading: state.status === "submitting",
+					children: t("biometricConsent.button.continue")
+				})
+			]
 		})
 	}, "ready");
-}, v = ({ config: e, manager: t, onFinish: n, onError: r }) => /* @__PURE__ */ i(o, { children: e ? /* @__PURE__ */ i(_, {
-	config: e,
-	manager: t,
-	onFinish: n,
-	onError: r
-}) : null });
-f(v, "incode-consent");
+};
+var Consent = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(ConsentContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+registerIncodeModuleElement(Consent, "incode-consent");
 //#endregion
-export { v as Consent };
+export { Consent };

package/dist/consent/styles.css

@@ -1,10 +1,8 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 .IncodeConsentPage {
   height: 100%;
-}
-
-.IncodeConsentPage .IncodePageInner {
-  padding: var(--spacing-24, var(--spacing-24, 24px));
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
 }
 
 .IncodeConsentPage .IncodePageContent {
@@ -12,9 +10,11 @@
 }
 
 .IncodeConsentPage .IncodeConsentContent {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
   height: 100%;
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: space-between;
+  align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   display: flex;
@@ -22,7 +22,9 @@
 
 .IncodeConsentPage .IncodeConsentBody {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
-  gap: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   flex: 1;
   display: flex;
@@ -31,24 +33,21 @@
 
 .IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h2-size);
-  font-weight: var(--typography-headline-h2-weight);
-  line-height: var(--typography-headline-h2-line-height);
-  letter-spacing: var(--typography-headline-h2-letter-spacing);
-}
-
-.IncodeConsentPage .IncodeConsentTitle {
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h1-size);
-  font-weight: var(--typography-headline-h1-weight);
-  line-height: var(--typography-headline-h1-line-height);
-  letter-spacing: var(--typography-headline-h1-letter-spacing);
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentSubtitle {
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxList {
@@ -61,7 +60,8 @@
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-brand-50, var(--surface-brand-50));
   width: 100%;
-  padding: var(--spacing-16, var(--spacing-16, 16px));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-20, var(--spacing-20, 20px));
 }
 
 .IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxLabel {
@@ -82,7 +82,7 @@
   font-weight: var(--typography-checkbox-radio-s-weight);
   line-height: var(--typography-checkbox-radio-s-line-height);
   letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  color: var(--color-checkbox-text-default, var(--checkbox-text-default));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
@@ -100,10 +100,11 @@
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText a {
-  color: var(--color-surface-brand-600, var(--surface-brand-600-static));
+  color: var(--color-link-default, var(--link-default));
 }
 
 .IncodeConsentPage .IncodeConsentButton {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
 }
 
@@ -114,3 +115,15 @@
   width: 100%;
   display: flex;
 }
+
+.IncodeConsentPage .IncodeConsentSubmitError {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  text-align: center;
+  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-input-text-helper-negative, var(--input-text-helper-negative));
+  margin-top: 0;
+}

package/dist/countrySelector-mSWyHSy4.js

@@ -0,0 +1,60 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { d as T, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { t as DropdownComposed } from "./dropdownComposed-_fgAlo_C.js";
+//#region src/shared/countrySelector/countrySelector.tsx
+var DEFAULT_COUNTRY_CODES = [
+	"BR",
+	"CN",
+	"FR",
+	"DE",
+	"IL",
+	"IT",
+	"MX",
+	"ES",
+	"GB",
+	"US"
+];
+var DEFAULT_DEV_ONLY_COUNTRY_CODES = [
+	"CM",
+	"KE",
+	"NG"
+];
+function countryFlag(code) {
+	return [...code.toUpperCase()].map((c) => String.fromCodePoint(127462 + c.charCodeAt(0) - 65)).join("");
+}
+function isDevEnvironment() {
+	if (typeof window === "undefined") return false;
+	const { hostname } = window.location;
+	return hostname === "localhost" || hostname.includes("stage") || hostname.includes("demo");
+}
+var CountrySelector = ({ value, onChange, label, id = "country-selector", countryCodes = DEFAULT_COUNTRY_CODES, devOnlyCountryCodes = DEFAULT_DEV_ONLY_COUNTRY_CODES, "data-testid": testId }) => {
+	const { i18n } = useTranslation();
+	const locale = i18n.language || "en";
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeCountrySelector",
+		children: /* @__PURE__ */ u(DropdownComposed, {
+			id,
+			label,
+			value,
+			options: T(() => {
+				const displayNames = new Intl.DisplayNames([locale, "en"], { type: "region" });
+				return (isDevEnvironment() ? [...countryCodes, ...devOnlyCountryCodes] : [...countryCodes]).map((code) => {
+					const name = displayNames.of(code) ?? code;
+					return {
+						value: code,
+						label: `${countryFlag(code)} ${name}`,
+						ariaLabel: name
+					};
+				}).sort((a, b) => a.label.localeCompare(b.label, locale));
+			}, [
+				countryCodes,
+				devOnlyCountryCodes,
+				locale
+			]),
+			onChange,
+			"data-testid": testId
+		})
+	});
+};
+//#endregion
+export { CountrySelector as t };

package/dist/cpf-ocr/cpf-ocr.es.js

@@ -0,0 +1,2 @@
+import { t as CpfOcr } from "../cpfOcr-MtpRztkG.js";
+export { CpfOcr };

package/dist/cpfOcr-MtpRztkG.js

@@ -0,0 +1,92 @@
+import { _ as y, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { c as useManager, o as useModuleTerminalCallbacks } from "./hooks-Da_yP_Dr.js";
+import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
+import { t as Page } from "./page-DxGQj7Gk.js";
+import { t as Spinner } from "./spinner-D8a_2LvW.js";
+import "./spinner-B6RxGFrI.js";
+import { t as Button } from "./button-CM_hgyIP.js";
+import { t as VerificationResult } from "./verificationResult-Do5SpZ6X.js";
+import { t as InputComposed } from "./inputComposed-CQ4AsvZg.js";
+import { createCpfOcrManager } from "@incodetech/core/cpf-ocr";
+//#region src/modules/cpf-ocr/cpfOcr.tsx
+var getInputState = (state) => {
+	if (state.status === "inputting") return {
+		cpf: state.cpf,
+		isValid: state.isValid
+	};
+	return {
+		cpf: "",
+		isValid: false
+	};
+};
+var CpfOcr = ({ manager: externalManager, onFinish, onError }) => {
+	const [state, manager] = useManager(() => externalManager ?? createCpfOcrManager(), { manageLifecycle: !externalManager });
+	const [hasBlurred, setHasBlurred] = d(false);
+	const [hasEdited, setHasEdited] = d(false);
+	const [isFocused, setIsFocused] = d(false);
+	useModuleTerminalCallbacks({
+		status: state.status === "finished" ? "finished" : "loading",
+		onFinish
+	});
+	y(() => {
+		if (state.status === "error") onError?.(state.error);
+	}, [state, onError]);
+	if (state.status === "idle" || state.status === "loading" || state.status === "submitting") return /* @__PURE__ */ u(Page, {
+		className: "IncodeCpfOcrPage",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeCpfOcrLoading",
+			children: /* @__PURE__ */ u(Spinner, { fullScreen: false })
+		})
+	});
+	if (state.status === "error") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: "Não foi possível verificar o CPF",
+		onRetry: () => manager.retry()
+	});
+	if (state.status === "finished") return null;
+	const inputState = getInputState(state);
+	const isComplete = inputState.cpf.replace(/\D/g, "").length === 11;
+	const cpfError = hasEdited && !inputState.isValid && (isComplete || hasBlurred && !isFocused) ? "Insira um CPF válido" : void 0;
+	return /* @__PURE__ */ u(Page, {
+		className: "IncodeCpfOcrPage",
+		title: "Insira e verifique o número do seu CPF",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeCpfOcr",
+			children: [
+				/* @__PURE__ */ u(Spacer, { size: 32 }),
+				/* @__PURE__ */ u(InputComposed, {
+					id: "cpf-ocr-input",
+					label: "",
+					value: inputState.cpf,
+					placeholder: "Seu CPF",
+					maxLength: 14,
+					inputMode: "numeric",
+					"aria-label": "CPF",
+					onInput: (event) => {
+						setHasEdited(true);
+						manager.setCpf(event.target.value);
+					},
+					onFocus: () => {
+						setIsFocused(true);
+					},
+					onBlur: () => {
+						setIsFocused(false);
+						setHasBlurred(true);
+					},
+					error: cpfError,
+					showErrorIcon: true
+				}),
+				/* @__PURE__ */ u(Spacer, {}),
+				/* @__PURE__ */ u(Button, {
+					type: "button",
+					onClick: () => manager.submit(),
+					disabled: !inputState.isValid,
+					"data-testid": "cpf-ocr-continue",
+					children: "Continuar"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { CpfOcr as t };

package/dist/cpfOcr-jJkYCfsX.js

@@ -0,0 +1,2 @@
+import { t as CpfOcr } from "./cpfOcr-MtpRztkG.js";
+export { CpfOcr };

package/dist/cross-document-data-match/cross-document-data-match.es.js

@@ -1,18 +1,22 @@
-import { _ as e, v as t } from "../vendor-preact-D6SntenC.js";
-import { o as n } from "../hooks-BVnGysT7.js";
-import { t as r } from "../incodeComponent-C1o4M0ZK.js";
-import { t as i } from "../spinner-CKnjVHxw.js";
-import { t as a } from "../incodeModule-BqCjVgEI.js";
-import { createCrossDocumentDataMatchManager as o } from "@incodetech/core/cross-document-data-match";
+import { _ as y, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { t as Spinner } from "../spinner-D8a_2LvW.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { createCrossDocumentDataMatchManager } from "@incodetech/core/cross-document-data-match";
 //#region src/modules/cross-document-data-match/cross-document-data-match.tsx
-var s = ({ onFinish: r }) => {
-	let [a, s] = n(() => o());
-	return e(() => {
-		s.load();
-	}, [s]), e(() => {
-		a.status === "finished" && r?.();
-	}, [a.status, r]), /* @__PURE__ */ t(i, { fullScreen: !0 });
-}, c = ({ onFinish: e }) => /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(s, { onFinish: e }) });
-a(c, "incode-cross-document-data-match");
+var CrossDocumentDataMatchContent = ({ onFinish }) => {
+	const [state, manager] = useManager(() => createCrossDocumentDataMatchManager());
+	y(() => {
+		manager.load();
+	}, [manager]);
+	useModuleTerminalCallbacks({
+		status: state.status === "finished" ? "finished" : "loading",
+		onFinish
+	});
+	return /* @__PURE__ */ u(Spinner, { fullScreen: true });
+};
+var CrossDocumentDataMatch = ({ onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(CrossDocumentDataMatchContent, { onFinish }) });
+registerIncodeModuleElement(CrossDocumentDataMatch, "incode-cross-document-data-match");
 //#endregion
-export { c as CrossDocumentDataMatch };
+export { CrossDocumentDataMatch };