@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/{dropdownComposed-CEegNzG4.js → dropdownComposed-DptsxuHA.js}

@@ -1,8 +1,7 @@
-import { C as k, l as A, p as d, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { d as cn } from "./spacer-DLEDuWEx.js";
-import { n as ErrorIcon } from "./incode-logo-DeIDDejm.js";
-import { f as ChevronDown, l as CloseIcon, n as SearchIcon, p as CheckmarkCompactIcon } from "./icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "./successIcon-DS8BLsgy.js";
+import { S as k, _ as y, c as A, f as d, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { d as cn } from "./spacer-DZ-t7RMQ.js";
+import { b as ErrorIcon, d as CloseIcon, h as CheckmarkCompactIcon, i as SearchIcon, m as ChevronDown, r as SuccessIcon } from "./icons-DNXYxUPA.js";
+import { t as FieldLabelHint } from "./fieldLabelHint-CxjArYkQ.js";
 //#region src/shared/dropdownComposed/dropdownComposed.tsx
 var DropdownComposed = ({ id, label, labelHint, placeholder = "Choose an option", value, options, onChange, error, helper, showErrorIcon, showHelperIcon, suppressMessages = false, disabled = false, required, searchable = false, searchPlaceholder = "Search...", noResultsText = "No results found", name, tabIndex, onKeyDown, onBlur, renderSelectedLabel, siblingElement, class: className, "aria-label": ariaLabel, "data-testid": dataTestId }) => {
 	const [isOpen, setIsOpen] = d(false);
@@ -202,10 +201,11 @@ var DropdownComposed = ({ id, label, labelHint, placeholder = "Choose an option"
 				id: labelId,
 				htmlFor: id,
 				"data-testid": `${id}-label`,
-				children: [label, labelHint && /* @__PURE__ */ u("span", {
-					class: "IncodeDropdownComposedLabelHint",
-					"data-testid": `${id}-label-hint`,
-					children: labelHint
+				children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+					className: "IncodeDropdownComposedLabelHint",
+					hint: labelHint,
+					required,
+					testId: `${id}-label-hint`
 				})]
 			}),
 			/* @__PURE__ */ u("div", {

package/dist/{dynamicForms-t3vepXqJ.js → dynamic-forms/dynamic-forms.es.js}

@@ -1,18 +1,18 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { d as T, m as g, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import { t as VerificationResult } from "./verificationResult-q_zD_Pxh.js";
-import { t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-import { n as countries, t as PhoneInputComposed } from "./phoneInputComposed-byyszNoS.js";
-import { t as DropdownComposed } from "./dropdownComposed-CEegNzG4.js";
-import { t as DateInputComposed } from "./dateInputComposed-DSgV0wnb.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
-import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-Dx0WS2cR.js";
-import { t as EmailInput } from "./emailInput-CsT8_C01.js";
+import { o as useTranslation } from "../uiConfig-BcjOx3PY.js";
+import { p as g, u as T, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "../incodeComponent-DeVV0gEn.js";
+import { x as Button } from "../icons-DNXYxUPA.js";
+import { t as VerificationResult } from "../verificationResult-Bre5Fb7M.js";
+import { t as InputComposed } from "../inputComposed-9aPipTS_.js";
+import { r as countries } from "../countries-5e8kwG_m.js";
+import { t as PhoneInputComposed } from "../phoneInputComposed-Bz37hY_u.js";
+import { t as DropdownComposed } from "../dropdownComposed-DptsxuHA.js";
+import { t as DateInputComposed } from "../dateInputComposed-ByhgHDX8.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-Do8qpZk7.js";
+import { t as EmailInput } from "../emailInput-Dz8ukhAE.js";
 import { createDynamicFormsManager } from "@incodetech/core/dynamic-forms";
 import { formatCPF, isValidCPF } from "@incodetech/core/id-ocr";
-//#region src/modules/dynamic-forms/dynamicForms.tsx
+//#region src/modules/dynamic-forms/dynamic-forms.tsx
 function getEffectiveType(question) {
 	return question.inputType ?? question.overrides ?? "TEXT";
 }
@@ -230,13 +230,13 @@ var ScreenForm = ({ screen, answers, validationErrors, canSubmit, isSubmitting =
 	const { t } = useTranslation();
 	const title = screen.hideTitle ? void 0 : screen.title || t("dynamicForms.title");
 	const titleId = g();
-	const hintMode = T(() => getRequiredHintMode(screen.questions.map((q) => !q.isOptional)), [screen]);
 	const prefilledSet = T(() => new Set(prefilledQuestionIds), [prefilledQuestionIds]);
 	const nonEditableSet = T(() => new Set(nonEditableQuestionIds), [nonEditableQuestionIds]);
 	return /* @__PURE__ */ u(Page, {
 		className: "IncodeDynamicFormsPage",
 		title,
 		titleId: title ? titleId : void 0,
+		subtitle: t("forms.subtitle"),
 		hideFooterBranding: true,
 		children: [
 			isSubmitting && /* @__PURE__ */ u("div", {
@@ -251,10 +251,7 @@ var ScreenForm = ({ screen, answers, validationErrors, canSubmit, isSubmitting =
 					const errorKey = validationErrors?.[question.questionId];
 					const isPrefilled = prefilledSet.has(question.questionId);
 					const isReadOnly = nonEditableSet.has(question.questionId);
-					const hint = getFieldHint(hintMode, !question.isOptional);
-					let labelHint;
-					if (isPrefilled) labelHint = t("forms.prefill.fromId") ?? void 0;
-					else if (hint) labelHint = t(`forms.label.${hint}`) ?? void 0;
+					const labelHint = isPrefilled ? t("forms.prefill.fromId") ?? void 0 : void 0;
 					return /* @__PURE__ */ u(QuestionInput, {
 						question,
 						value: answers[question.questionId] ?? "",
@@ -316,9 +313,17 @@ var DynamicFormsContent = ({ config, manager: externalManager, onFinish }) => {
 			onSubmit: () => manager.submit()
 		}, state.screenIndex);
 	}
+	if (state.status === "submitFailed") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: t("common.somethingWrong"),
+		onRetry: () => manager.retry(),
+		retryLabel: t("common.tryAgain"),
+		hideFooterBranding: false
+	});
 	if (state.status === "success") return /* @__PURE__ */ u(VerificationResult, {
 		status: "success",
-		successTitle: t("dynamicForms.success")
+		successTitle: t("dynamicForms.success"),
+		hideFooterBranding: false
 	});
 	if (state.status === "misconfigured") return /* @__PURE__ */ u(VerificationResult, {
 		status: "failure",

package/dist/dynamic-forms/styles.css

@@ -1,4 +1,9 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeDynamicFormsPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
+}
+
 .IncodeDynamicFormsPage .IncodePageTitleContainer {
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
 }

package/dist/dynamic-forms/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeDynamicFormsPage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeDynamicFormsPage .IncodePageTitleContainer {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n@media (min-width: 48rem) {\n  .IncodeDynamicFormsPage.IncodePageContainer {\n    align-items: stretch;\n  }\n\n  .IncodeDynamicFormsPage .IncodePageInner {\n    height: 100%;\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n\n.IncodeDynamicFormsPage .IncodePageContent {\n  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  align-items: center;\n}\n\n@media (min-width: 48rem) {\n  .IncodeDynamicFormsPage .IncodePageContent {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsProgress {\n  margin-bottom: var(--spacing-4, var(--spacing-4, 4px));\n  text-align: center;\n  font-size: var(--text-sm, .875rem);\n  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));\n  color: var(--text-secondary);\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsFields {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeDynamicFormsPage .IncodeDynamicFormsFields {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));\n    flex: 1;\n    overflow-y: auto;\n  }\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsFields {\n  max-width: var(--incode-form-max-w);\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsField {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsField--prefilled .IncodeInputComposedLabel, .IncodeDynamicFormsPage .IncodeDynamicFormsField--prefilled .IncodeDropdownComposedLabel {\n  justify-content: space-between;\n  align-items: baseline;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsField--prefilled .IncodeInputComposedLabelHint, .IncodeDynamicFormsPage .IncodeDynamicFormsField--prefilled .IncodeDropdownComposedLabelHint {\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsFooter {\n  width: 100%;\n  padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n@media (min-width: 48rem) {\n  .IncodeDynamicFormsPage .IncodeDynamicFormsFooter {\n    flex-shrink: 0;\n  }\n}\n\n.IncodeDynamicFormsPage .IncodeDynamicFormsFooter {\n  max-width: var(--incode-form-max-w);\n}\n\n.IncodeDynamicFormsPage .IncodeSrOnly {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n";

package/dist/ekyb/ekyb.es.js

@@ -1,2 +1,2 @@
-import { t as EkybModule } from "../ekybModule-Dvkf5WAr.js";
+import { t as EkybModule } from "../ekybModule-DqA0hfNQ.js";
 export { EkybModule };

package/dist/ekyb/styles.css

@@ -17,6 +17,14 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkybPage .IncodeEkybForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+}
+
 .IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeCountrySelector, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
   margin-inline: auto;
 }
@@ -78,7 +86,7 @@
   margin-inline: auto;
   margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
@@ -86,27 +94,21 @@
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
+  .IncodeEkybPage .IncodeEkybFooter {
+    flex-shrink: 0;
+  }
+
   .IncodeEkybPage.IncodePageContainer {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));
     max-height: none;
   }
 
   .IncodeEkybPage.IncodeEkybPageScrollable {
-    max-width: 500px;
+    max-width: var(--ekyb-scrollable-page);
   }
 
   .IncodeEkybPage .IncodePageContent {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
-
-  .IncodeEkybPage .IncodeEkybForm {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    overflow-y: auto;
-  }
-
-  .IncodeEkybPage .IncodeEkybFooter {
-    flex-shrink: 0;
-  }
 }

package/dist/ekyb/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeEkybPage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  margin-inline: auto;\n  animation-fill-mode: both;\n}\n\n.IncodeEkybPage .IncodeEkybSpinner {\n  flex: 1;\n}\n\n.IncodeEkybPage .IncodeEkybForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkybPage .IncodeEkybForm {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));\n    overflow-y: auto;\n  }\n}\n\n.IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeCountrySelector, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {\n  margin-inline: auto;\n}\n\n.IncodeEkybPage .IncodeEkybForm .IncodeFormField {\n  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeEkybPage .IncodeEkybForm .IncodeAddressAutocomplete {\n  margin-inline: auto;\n}\n\n.IncodeEkybPage .IncodeEkybCountrySelector {\n  width: 100%;\n}\n\n.IncodeEkybPage .IncodeEkybUbos, .IncodeEkybPage .IncodeEkybUboEntry {\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeEkybPage .IncodeEkybRemoveUbo {\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-s-regular-size);\n  font-weight: var(--typography-body-s-regular-weight);\n  line-height: var(--typography-body-s-regular-line-height);\n  letter-spacing: var(--typography-body-s-regular-letter-spacing);\n  color: var(--color-text-status-negative, var(--text-status-negative));\n  text-decoration-line: none;\n}\n\n.IncodeEkybPage .IncodeEkybAddUbo {\n  text-align: center;\n  font-family: var(--typography-button-family);\n  font-size: var(--typography-button-m-underlined-size);\n  font-weight: var(--typography-button-m-underlined-weight);\n  line-height: var(--typography-button-m-underlined-line-height);\n  letter-spacing: var(--typography-button-m-underlined-letter-spacing);\n  -webkit-text-decoration-skip-ink: none;\n  text-decoration-skip-ink: none;\n  color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n  text-decoration-line: underline;\n  text-decoration-style: solid;\n  text-decoration-thickness: auto;\n}\n\n.IncodeEkybPage .IncodeEkybAddUbo:hover {\n  opacity: .8;\n}\n\n.IncodeEkybPage .IncodeEkybSectionHeader {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h3-size);\n  font-weight: var(--typography-headline-h3-weight);\n  line-height: var(--typography-headline-h3-line-height);\n  letter-spacing: var(--typography-headline-h3-letter-spacing);\n  color: var(--color-input-text-label-default, var(--input-text-label-default));\n  margin-inline: auto;\n  margin-top: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  padding-block: var(--spacing-12, var(--spacing-12, 12px));\n}\n\n.IncodeEkybPage .IncodeEkybFooter {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkybPage .IncodeEkybFooter {\n    flex-shrink: 0;\n  }\n\n  .IncodeEkybPage.IncodePageContainer {\n    margin-top: var(--spacing-0, var(--spacing-none, 0px));\n    max-height: none;\n  }\n\n  .IncodeEkybPage.IncodeEkybPageScrollable {\n    max-width: var(--ekyb-scrollable-page);\n  }\n\n  .IncodeEkybPage .IncodePageContent {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n";

package/dist/ekybModule-B-gioC08.js

@@ -0,0 +1,2 @@
+import { t as EkybModule } from "./ekybModule-DqA0hfNQ.js";
+export { EkybModule };

package/dist/{ekybModule-Dvkf5WAr.js → ekybModule-DqA0hfNQ.js}

@@ -1,18 +1,16 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { C as k, d as T, l as A, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, g as useFormScrollable, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { t as Spacer } from "./spacer-DLEDuWEx.js";
-import { t as Spinner } from "./spinner-CJCOHUKx.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import "./extensibility-C5XqL_A3.js";
-import { t as VerificationResult } from "./verificationResult-q_zD_Pxh.js";
-import { t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-import { i as translateError, r as FormField } from "./radioGroupComposed-DQzTWutW.js";
-import { t as DropdownComposed } from "./dropdownComposed-CEegNzG4.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
-import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-Dx0WS2cR.js";
-import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-C5iZCrlq.js";
-import { t as CountrySelector$1 } from "./countrySelector-COZ7XQHp.js";
+import { o as useTranslation } from "./uiConfig-BcjOx3PY.js";
+import { S as k, _ as y, c as A, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent, v as useFormScrollable } from "./incodeComponent-DeVV0gEn.js";
+import { t as Spacer } from "./spacer-DZ-t7RMQ.js";
+import { t as Spinner } from "./spinner-hjbTcmA1.js";
+import { x as Button } from "./icons-DNXYxUPA.js";
+import { t as VerificationResult } from "./verificationResult-Bre5Fb7M.js";
+import { t as InputComposed } from "./inputComposed-9aPipTS_.js";
+import { n as translateError, t as FormField } from "./formField-DWExlgnz.js";
+import { t as DropdownComposed } from "./dropdownComposed-DptsxuHA.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-Do8qpZk7.js";
+import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-C0BRq4LF.js";
+import { t as CountrySelector$1 } from "./countrySelector-Zbe2eGzy.js";
 import { DEV_ONLY_COUNTRIES, SUPPORTED_COUNTRIES, createEkybManager } from "@incodetech/core/ekyb";
 //#region src/modules/ekyb/countrySelector.tsx
 var CountrySelector = ({ value, onChange }) => {
@@ -20,6 +18,7 @@ var CountrySelector = ({ value, onChange }) => {
 	return /* @__PURE__ */ u(CountrySelector$1, {
 		id: "ekyb-country",
 		label: t("ekyb.country"),
+		required: true,
 		value,
 		onChange,
 		countryCodes: SUPPORTED_COUNTRIES,
@@ -29,12 +28,11 @@ var CountrySelector = ({ value, onChange }) => {
 };
 //#endregion
 //#region src/modules/ekyb/fieldInput.tsx
-var FieldInput = ({ field, value, error, errorParams, country: _country, labelHint, onChange, onBlur }) => {
+var FieldInput = ({ field, value, error, errorParams, country: _country, onChange, onBlur }) => {
 	const { t } = useTranslation();
 	if (field.type === "dropdown") return /* @__PURE__ */ u(DropdownComposed, {
 		id: `ekyb-${field.name}`,
 		label: t(field.label),
-		labelHint,
 		placeholder: field.placeholder ? t(field.placeholder) : void 0,
 		value,
 		options: (field.options ?? []).map((o) => {
@@ -60,14 +58,13 @@ var FieldInput = ({ field, value, error, errorParams, country: _country, labelHi
 		error,
 		errorParams,
 		required: field.required,
-		labelHint,
 		onChange,
 		onBlur
 	});
 };
 //#endregion
 //#region src/modules/ekyb/uboInputs.tsx
-var UboInputs = ({ ubos, validationErrors, canAddUbo, labelHint, onSetField, onBlur, onAdd, onRemove }) => {
+var UboInputs = ({ ubos, validationErrors, canAddUbo, onSetField, onBlur, onAdd, onRemove }) => {
 	const { t } = useTranslation();
 	const containerRef = A(null);
 	const addButtonRef = A(null);
@@ -94,7 +91,6 @@ var UboInputs = ({ ubos, validationErrors, canAddUbo, labelHint, onSetField, onB
 					/* @__PURE__ */ u(InputComposed, {
 						id: `ubo-${index}-name`,
 						label: nameLabel,
-						labelHint,
 						name: `ubo-${index}-name`,
 						value: ubo.name,
 						error: translateError$2(validationErrors?.[`ubo-${index}-name`]),
@@ -106,7 +102,6 @@ var UboInputs = ({ ubos, validationErrors, canAddUbo, labelHint, onSetField, onB
 					/* @__PURE__ */ u(InputComposed, {
 						id: `ubo-${index}-surname`,
 						label: surnameLabel,
-						labelHint,
 						name: `ubo-${index}-surname`,
 						value: ubo.surname,
 						error: translateError$2(validationErrors?.[`ubo-${index}-surname`]),
@@ -214,14 +209,10 @@ var EkybForm = ({ state, manager }) => {
 	}, [postalCodeErrorKey]);
 	const businessFields = fields.filter((f) => !ADDRESS_FIELD_NAMES.has(f.name));
 	const addressFields = fields.filter((f) => ADDRESS_FIELD_NAMES.has(f.name));
-	const mode = T(() => getRequiredHintMode(fields.map((f) => f.required)), [fields]);
-	const labelHintFor = (required) => {
-		const hint = getFieldHint(mode, required);
-		return hint ? t(`forms.label.${hint}`) : void 0;
-	};
 	return /* @__PURE__ */ u(Page, {
 		className: `IncodeEkybPage${isScrollable ? " IncodeEkybPageScrollable" : ""}`,
 		title: t("ekyb.title"),
+		subtitle: t("forms.subtitle"),
 		children: [/* @__PURE__ */ u("div", {
 			ref: formRef,
 			className: "IncodeEkybForm",
@@ -235,7 +226,6 @@ var EkybForm = ({ state, manager }) => {
 					value: values[field.name] ?? "",
 					error: translateError$1(validationErrors?.[field.name]),
 					country,
-					labelHint: labelHintFor(field.required),
 					onChange: (name, value) => manager.setField(name, value),
 					onBlur: (name) => manager.validateField(name)
 				}, field.name)),
@@ -243,7 +233,6 @@ var EkybForm = ({ state, manager }) => {
 					ubos,
 					validationErrors,
 					canAddUbo,
-					labelHint: labelHintFor(true),
 					onSetField: (index, field, value) => manager.setUboField(index, field, value),
 					onBlur: (fieldKey) => manager.validateField(fieldKey),
 					onAdd: () => manager.addUbo(),
@@ -255,7 +244,6 @@ var EkybForm = ({ state, manager }) => {
 				}), addressFields.map((field) => {
 					if (field.name === "street") return /* @__PURE__ */ u(AddressAutocomplete, {
 						label: field.label,
-						labelHint: labelHintFor(field.required),
 						value: values.street ?? "",
 						error: translateError$1(validationErrors?.street),
 						suggestions: addressSuggestions,
@@ -272,7 +260,6 @@ var EkybForm = ({ state, manager }) => {
 							value: values[field.name] ?? "",
 							error: translateError$1(validationErrors?.[field.name]),
 							country,
-							labelHint: labelHintFor(field.required),
 							onChange: (name, value) => manager.setField(name, value),
 							onBlur: (name) => manager.validateField(name)
 						})

package/dist/ekyc/ekyc.es.js

@@ -1,2 +1,2 @@
-import { t as EkycModule } from "../ekycModule-C5QXVGP7.js";
+import { t as EkycModule } from "../ekycModule-bRC6FW2H.js";
 export { EkycModule };

package/dist/ekyc/styles.css

@@ -7,6 +7,7 @@
 
 @media (min-width: 48rem) {
   .IncodeEkycPage .IncodePageInner {
+    height: 100%;
     padding-inline: var(--spacing-0, var(--spacing-none, 0px));
     padding-block: var(--spacing-0, var(--spacing-none, 0px));
   }
@@ -25,6 +26,14 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkycPage .IncodeEkycForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+}
+
 .IncodeEkycPage .IncodeEkycForm .IncodeInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeAddressAutocomplete {
   margin-inline: auto;
 }
@@ -61,6 +70,12 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkycPage .IncodeEkycFooter {
+    flex-shrink: 0;
+  }
+}
+
 .IncodeEkycPage .IncodeEkycFooter .IncodeEkycSubmitError {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   text-align: center;
@@ -77,32 +92,18 @@
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .IncodeEkycPage.IncodePageContainer {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));
     height: 100%;
     max-height: none;
   }
 
-  .IncodeEkycPage .IncodePageInner {
-    height: 100%;
-  }
-
   .IncodeEkycPage.IncodeEkycPageScrollable {
-    max-width: 500px;
+    max-width: var(--ekyb-scrollable-page);
   }
 
   .IncodeEkycPage .IncodePageContent {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
-
-  .IncodeEkycPage .IncodeEkycForm {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    overflow-y: auto;
-  }
-
-  .IncodeEkycPage .IncodeEkycFooter {
-    flex-shrink: 0;
-  }
 }

package/dist/ekyc/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeEkycPage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  margin-inline: auto;\n  animation-fill-mode: both;\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkycPage .IncodePageInner {\n    height: 100%;\n    padding-inline: var(--spacing-0, var(--spacing-none, 0px));\n    padding-block: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n\n.IncodeEkycPage .IncodeEkycSpinner {\n  flex: 1;\n}\n\n.IncodeEkycPage .IncodeEkycForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkycPage .IncodeEkycForm {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));\n    overflow-y: auto;\n  }\n}\n\n.IncodeEkycPage .IncodeEkycForm .IncodeInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeAddressAutocomplete {\n  margin-inline: auto;\n}\n\n.IncodeEkycPage .IncodeEkycForm .IncodeFormField {\n  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeEkycPage .IncodeEkycSectionHeader {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h3-size);\n  font-weight: var(--typography-headline-h3-weight);\n  line-height: var(--typography-headline-h3-line-height);\n  letter-spacing: var(--typography-headline-h3-letter-spacing);\n  color: var(--color-input-text-label-default, var(--input-text-label-default));\n  margin-inline: auto;\n  margin-top: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  padding-block: var(--spacing-12, var(--spacing-12, 12px));\n}\n\n.IncodeEkycPage .IncodeEkycRadioGroup {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  margin-inline: auto;\n}\n\n.IncodeEkycPage .IncodeEkycFooter {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  flex-direction: column;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkycPage .IncodeEkycFooter {\n    flex-shrink: 0;\n  }\n}\n\n.IncodeEkycPage .IncodeEkycFooter .IncodeEkycSubmitError {\n  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));\n  margin-top: 0;\n}\n\n.IncodeEkycPage .IncodeEkycFooter button {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n@media (min-width: 48rem) {\n  .IncodeEkycPage.IncodePageContainer {\n    margin-top: var(--spacing-0, var(--spacing-none, 0px));\n    height: 100%;\n    max-height: none;\n  }\n\n  .IncodeEkycPage.IncodeEkycPageScrollable {\n    max-width: var(--ekyb-scrollable-page);\n  }\n\n  .IncodeEkycPage .IncodePageContent {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n";

package/dist/ekycModule-CjkpPQ3f.js

@@ -0,0 +1,2 @@
+import { t as EkycModule } from "./ekycModule-bRC6FW2H.js";
+export { EkycModule };

package/dist/{ekycModule-C5QXVGP7.js → ekycModule-bRC6FW2H.js}

@@ -1,16 +1,16 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { d as T, l as A, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, g as useFormScrollable, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { t as Spinner } from "./spinner-CJCOHUKx.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import { t as VerificationResult } from "./verificationResult-q_zD_Pxh.js";
-import { i as translateError, r as FormField, t as RadioGroupComposed } from "./radioGroupComposed-DQzTWutW.js";
-import { t as PhoneInputComposed } from "./phoneInputComposed-byyszNoS.js";
-import { t as DropdownComposed } from "./dropdownComposed-CEegNzG4.js";
-import { t as DateInputComposed } from "./dateInputComposed-DSgV0wnb.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
-import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-Dx0WS2cR.js";
-import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-C5iZCrlq.js";
+import { o as useTranslation } from "./uiConfig-BcjOx3PY.js";
+import { _ as y, c as A, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent, v as useFormScrollable } from "./incodeComponent-DeVV0gEn.js";
+import { t as Spinner } from "./spinner-hjbTcmA1.js";
+import { x as Button } from "./icons-DNXYxUPA.js";
+import { t as VerificationResult } from "./verificationResult-Bre5Fb7M.js";
+import { n as translateError, t as FormField } from "./formField-DWExlgnz.js";
+import { t as PhoneInputComposed } from "./phoneInputComposed-Bz37hY_u.js";
+import { t as DropdownComposed } from "./dropdownComposed-DptsxuHA.js";
+import { t as DateInputComposed } from "./dateInputComposed-ByhgHDX8.js";
+import { t as RadioGroupComposed } from "./radioGroupComposed-BrawV4FU.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-Do8qpZk7.js";
+import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-C0BRq4LF.js";
 import { createEkycManager } from "@incodetech/core/ekyc";
 //#region src/modules/ekyc/ekycModule.tsx
 /**
@@ -81,15 +81,6 @@ var EkycForm = ({ state, manager }) => {
 	const postalCodeFieldRef = A(null);
 	const previousPostalCodeErrorRef = A(void 0);
 	const isScrollable = useFormScrollable(formRef, fields.length);
-	const mode = T(() => getRequiredHintMode(fields.filter((f) => !(f.name === "email" && hideEmail)).map((f) => f.readonly || prefilled[f.name] ? false : f.required)), [
-		fields,
-		hideEmail,
-		prefilled
-	]);
-	const labelHintFor = (effectiveRequired) => {
-		const hint = getFieldHint(mode, effectiveRequired);
-		return hint ? t(`forms.label.${hint}`) : void 0;
-	};
 	const postalCodeErrorKey = validationErrors?.postalCode?.key;
 	y(() => {
 		const previous = previousPostalCodeErrorRef.current;
@@ -110,6 +101,7 @@ var EkycForm = ({ state, manager }) => {
 	return /* @__PURE__ */ u(Page, {
 		className: `IncodeEkycPage${isScrollable ? " IncodeEkycPageScrollable" : ""}`,
 		title: t("verification.title"),
+		subtitle: t("forms.subtitle"),
 		children: [/* @__PURE__ */ u("div", {
 			ref: formRef,
 			className: "IncodeEkycForm",
@@ -128,12 +120,10 @@ var EkycForm = ({ state, manager }) => {
 				}
 				const isReadonly = field.readonly || prefilled[field.name];
 				const isFieldRequired = isReadonly ? false : field.required;
-				const labelHint = labelHintFor(isFieldRequired);
 				const fieldValue = values[field.name] ?? "";
 				const fieldError = validationErrors?.[field.name];
 				if (field.name === "street" && field.section === "address") return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(AddressAutocomplete, {
 					label: field.label,
-					labelHint,
 					value: fieldValue,
 					error: fieldError?.key,
 					errorParams: fieldError?.params,
@@ -150,7 +140,6 @@ var EkycForm = ({ state, manager }) => {
 					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(DropdownComposed, {
 						id: `ekyc-${field.name}`,
 						label: dropdownLabel,
-						labelHint,
 						placeholder: field.placeholder ? t(field.placeholder) : void 0,
 						value: fieldValue,
 						options: (field.options ?? []).map((o) => {
@@ -175,7 +164,6 @@ var EkycForm = ({ state, manager }) => {
 					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(DateInputComposed, {
 						id: `ekyc-${field.name}`,
 						label: dateLabel,
-						labelHint,
 						autoComplete: getEkycAutocomplete(field.name),
 						value: fieldValue,
 						error: translateError$1(fieldError),
@@ -194,7 +182,6 @@ var EkycForm = ({ state, manager }) => {
 					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(PhoneInputComposed, {
 						id: `ekyc-${field.name}`,
 						label: phoneLabel,
-						labelHint,
 						autoComplete: getEkycAutocomplete(field.name),
 						countryCode: fieldsCountry,
 						value: fieldValue,
@@ -212,7 +199,6 @@ var EkycForm = ({ state, manager }) => {
 					id: `ekyc-${field.name}`,
 					class: "IncodeEkycRadioGroup",
 					label: t(field.label),
-					labelHint,
 					value: fieldValue,
 					options: (field.options ?? []).map((option) => ({
 						value: option.value,
@@ -238,7 +224,6 @@ var EkycForm = ({ state, manager }) => {
 						placeholder: field.placeholder,
 						placeholderParams: field.placeholderParams,
 						required: isFieldRequired,
-						labelHint,
 						readonly: isReadonly,
 						maxLength: field.maxLength,
 						onChange: (name, value) => manager.setField(name, value),