@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/extensibility.es.js

@@ -1,24 +1,701 @@
-import { a as useTranslation, n as setUiConfig } from "./uiConfig-Dqnjankd.js";
-import { b as useManager, n as LandscapeBlocker, o as Page, t as IncodeComponent, y as useScreenOrientation } from "./incodeComponent-BtFz-bx2.js";
-import { o as Lottie, t as Spacer } from "./spacer-DLEDuWEx.js";
-import { a as TypographyH4, i as TypographyH3, n as Title, o as TypographyH5, r as TypographyH1, s as TypographyP, t as Spinner } from "./spinner-CJCOHUKx.js";
-import { n as ErrorIcon, r as Button } from "./incode-logo-DeIDDejm.js";
-import { _ as TextArea, b as ProgressBar, d as CaptureFooter, f as CameraOverlayHeader, g as TextAreaComposed, h as VerificationOptionCardList, i as Capture, m as VerificationOptionCard, n as Chooser, o as IdExpired, p as CameraOverlay, r as Tutorial, s as IdError, t as FlipAnimation, u as ManualCapture, v as SegmentedDateInput, x as Overlay, y as PasswordInputComposed } from "./extensibility-C5XqL_A3.js";
-import { t as Processing } from "./processing-B2eaSGLu.js";
-import { _ as CalendarIcon, a as FileIcon, c as EllipseIcon, d as ChevronLeftIcon, f as ChevronDown, g as CameraIcon, h as CaptureButtonIcon, i as HelpIcon, l as CloseIcon, m as CheckmarkIcon, n as SearchIcon, o as EyeOffIcon, p as CheckmarkCompactIcon, r as LockIcon, s as EyeIcon, t as SvgLightningIcon, u as ChevronRightIcon, v as WarningIcon } from "./icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "./successIcon-DS8BLsgy.js";
-import { t as Modal } from "./modal-BH2wi8Q0.js";
-import { i as ErrorContent, n as Capture$1, r as BaseTutorial, t as Tutorial$1 } from "./tutorial-LQuJ4dse.js";
-import { t as VerificationResult } from "./verificationResult-q_zD_Pxh.js";
-import { t as ConnectionError } from "./connectionError-BurQq_4R.js";
-import { n as Input, t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-import { t as OtpInput } from "./otpInput-CvPR3ZpP.js";
-import { t as Checkbox } from "./checkbox-FGA-Ij-D.js";
-import { n as RadioButtonComposed, r as FormField, t as RadioGroupComposed } from "./radioGroupComposed-DQzTWutW.js";
-import { i as getCountryByCode, n as countries, r as getCountryByCallingCode, 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 BottomSheet } from "./bottomSheet-BWEUBq8m.js";
-import { a as CameraView, o as CameraFrame } from "./manualCaptureButton-DzJFIEfu.js";
-import { n as Permissions } from "./manualCaptureButton-D58WsS-x.js";
-export { BaseTutorial, BottomSheet, Button, CalendarIcon, CameraFrame, CameraIcon, CameraOverlay, CameraOverlayHeader, CameraView, CaptureButtonIcon, CaptureFooter, Checkbox, CheckmarkCompactIcon, CheckmarkIcon, ChevronDown, ChevronLeftIcon, ChevronRightIcon, CloseIcon, ConnectionError, DateInputComposed, DropdownComposed, EllipseIcon, ErrorContent, ErrorIcon, EyeIcon, EyeOffIcon, FileIcon, FormField, HelpIcon, Capture as IdCapture, Chooser as IdChooser, IdError, IdExpired, FlipAnimation as IdFlipAnimation, Tutorial as IdTutorial, IncodeComponent, Input, InputComposed, LandscapeBlocker, SvgLightningIcon as LightningIcon, LockIcon, Lottie, ManualCapture, Modal, OtpInput, Overlay, Page, PasswordInputComposed, Permissions, PhoneInputComposed, Processing, ProgressBar, RadioButtonComposed, RadioGroupComposed, SearchIcon, SegmentedDateInput, Capture$1 as SelfieCapture, Tutorial$1 as SelfieTutorial, Spacer, Spinner, SuccessIcon, TextArea, TextAreaComposed, Title, TypographyH1, TypographyH3, TypographyH4, TypographyH5, TypographyP, VerificationOptionCard, VerificationOptionCardList, VerificationResult, WarningIcon, countries, getCountryByCallingCode, getCountryByCode, setUiConfig, useManager, useScreenOrientation, useTranslation };
+import { n as setUiConfig, o as useTranslation } from "./uiConfig-BcjOx3PY.js";
+import { S as k, _ as y, c as A, f as d, h as q, i as D, u as T, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, c as Page, n as LandscapeBlocker, t as IncodeComponent, x as useScreenOrientation } from "./incodeComponent-DeVV0gEn.js";
+import { d as cn, o as Lottie, t as Spacer } from "./spacer-DZ-t7RMQ.js";
+import { a as TypographyH5, i as TypographyH4, n as TypographyH1, o as TypographyP, r as TypographyH3, t as Title } from "./typography-CYO7ELEl.js";
+import { t as Spinner } from "./spinner-hjbTcmA1.js";
+import { _ as CaptureButtonIcon, a as LockIcon, b as ErrorIcon, c as EyeOffIcon, d as CloseIcon, f as ChevronRightIcon, g as CheckmarkIcon, h as CheckmarkCompactIcon, i as SearchIcon, l as EyeIcon, m as ChevronDown, n as WarningIcon, o as HelpIcon, p as ChevronLeftIcon, r as SuccessIcon, s as FileIcon, t as SvgLightningIcon, u as EllipseIcon, v as CameraIcon, x as Button, y as CalendarIcon } from "./icons-DNXYxUPA.js";
+import { t as Processing } from "./processing-CrNgzN1u.js";
+import { t as Modal } from "./modal-H_YHBjxJ.js";
+import { t as ErrorContent } from "./errorContent-aJuo21I4.js";
+import { t as VerificationResult } from "./verificationResult-Bre5Fb7M.js";
+import { t as ConnectionError } from "./connectionError-Haw33Di8.js";
+import { n as ProgressBar, t as CaptureFooter } from "./captureFooter-De74TCQi.js";
+import { n as Input, t as InputComposed } from "./inputComposed-9aPipTS_.js";
+import { t as FieldLabelHint } from "./fieldLabelHint-CxjArYkQ.js";
+import "./inputComposed-DZokKK4c.js";
+import { t as PasswordInputComposed } from "./passwordInputComposed-CDbxJKHR.js";
+import { t as OtpInput } from "./otpInput-C8mlw_Cm.js";
+import { t as Checkbox } from "./checkbox-BR-RTI4R.js";
+import { t as FormField } from "./formField-DWExlgnz.js";
+import { a as getCountryByCode, i as getCountryByCallingCode, 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 "./dropdownComposed-BsEtJjhn.js";
+import { t as DateInputComposed } from "./dateInputComposed-ByhgHDX8.js";
+import "./dateInputComposed-0tUVTT0_.js";
+import { n as RadioButtonComposed, t as RadioGroupComposed } from "./radioGroupComposed-BrawV4FU.js";
+import "./radioGroupComposed-BFzxJVpZ.js";
+import { _ as VerificationOptionCard, i as Capture, n as Chooser, o as IdExpired, r as Tutorial, s as IdError, t as FlipAnimation, v as VerificationOptionCardList } from "./flipAnimation-BwI4pEJc.js";
+import { t as BottomSheet } from "./bottomSheet-Cixb81_b.js";
+import { n as CameraFrame, t as CameraView } from "./cameraView-BNqv7JUh.js";
+import { n as CameraOverlay, t as CameraOverlayHeader } from "./cameraOverlayHeader-BarDrIC9.js";
+import { c as useCoverMedia } from "./denied-CB1v3PyY.js";
+import "./cameraOverlay-MpL3OBQu.js";
+import { t as BaseTutorial } from "./baseTutorial-BM2Ho3QZ.js";
+import { t as Permissions } from "./permissions-B0ctl0V9.js";
+import { n as Capture$1, t as Tutorial$1 } from "./tutorial-BP1F722m.js";
+//#region src/shared/overlay/overlay.tsx
+var Overlay = ({ children, "aria-labelledby": ariaLabelledBy, class: className }) => {
+	return /* @__PURE__ */ u("div", {
+		class: `IncodeOverlay ${className ?? ""}`,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": ariaLabelledBy,
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeOverlayContainer",
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeOverlayBody",
+				children
+			})
+		})
+	});
+};
+//#endregion
+//#region src/shared/segmentedDateInput/segmentedDateInput.tsx
+/**
+* ⚠️ EXPERIMENTAL — DO NOT USE IN FORMS.
+*
+* This component is an in-progress alternative to `DateInputComposed` that
+* renders mm/dd/yyyy as three independent segments. It is not production-ready
+* and is intentionally not wired into any form module (curp-validation,
+* custom-fields, dynamic-forms, ekyc, etc.). Those forms must continue to use
+* `DateInputComposed` (native `<input type="date">`).
+*
+* Kept here for ongoing iteration and external preview only.
+*/
+var ISO_DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var US_DATE_RE = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+var EMPTY_SEGMENTS = {
+	mm: "",
+	dd: "",
+	yyyy: ""
+};
+var parseISO = (value) => {
+	if (!value) return EMPTY_SEGMENTS;
+	const m = ISO_DATE_RE.exec(value);
+	if (!m) return EMPTY_SEGMENTS;
+	return {
+		yyyy: m[1],
+		mm: m[2],
+		dd: m[3]
+	};
+};
+var isValidDate = (yyyy, mm, dd) => {
+	if (yyyy < 1 || mm < 1 || mm > 12 || dd < 1 || dd > 31) return false;
+	const date = new Date(yyyy, mm - 1, dd);
+	return date.getFullYear() === yyyy && date.getMonth() === mm - 1 && date.getDate() === dd;
+};
+/**
+* Number of days in the (potentially partial) MM/YYYY combination. Falls back
+* to a non-leap year (any year not divisible by 4) when the year is unknown
+* or incomplete, so February can never accept 30 or 31 once the month is set.
+*/
+var getDaysInMonth = (mm, yyyy) => {
+	const m = Number(mm);
+	if (!Number.isFinite(m) || m < 1 || m > 12) return 31;
+	const y = Number(yyyy);
+	const referenceYear = Number.isFinite(y) && y > 0 && yyyy.length === 4 ? y : 2001;
+	return new Date(referenceYear, m, 0).getDate();
+};
+var segmentsToISO = ({ mm, dd, yyyy }) => {
+	if (yyyy.length !== 4 || mm.length === 0 || dd.length === 0) return "";
+	const Y = Number(yyyy);
+	const M = Number(mm);
+	const D = Number(dd);
+	if (!isValidDate(Y, M, D)) return "";
+	return `${yyyy}-${String(M).padStart(2, "0")}-${String(D).padStart(2, "0")}`;
+};
+/**
+* Compute the segment order for a given locale via Intl.DateTimeFormat —
+* e.g. en-US → ['mm','dd','yyyy'], en-GB / de / es → ['dd','mm','yyyy'],
+* ja / ko / zh / ISO → ['yyyy','mm','dd']. Always falls back to US ordering
+* if the locale is unknown or Intl returns something unexpected.
+*/
+var getSegmentOrder = (locale) => {
+	try {
+		const parts = new Intl.DateTimeFormat(locale || void 0).formatToParts(new Date(2e3, 0, 15));
+		const order = [];
+		for (const part of parts) if (part.type === "year") order.push("yyyy");
+		else if (part.type === "month") order.push("mm");
+		else if (part.type === "day") order.push("dd");
+		if (order.length === 3 && new Set(order).size === 3) return order;
+	} catch {}
+	return [
+		"mm",
+		"dd",
+		"yyyy"
+	];
+};
+/** Build next/previous navigation maps from a concrete segment order. */
+var buildNavMaps = (order) => {
+	const next = {
+		mm: null,
+		dd: null,
+		yyyy: null
+	};
+	const prev = {
+		mm: null,
+		dd: null,
+		yyyy: null
+	};
+	order.forEach((key, i) => {
+		next[key] = order[i + 1] ?? null;
+		prev[key] = order[i - 1] ?? null;
+	});
+	return {
+		next,
+		prev
+	};
+};
+var SEGMENT_RANGES = {
+	mm: {
+		min: 1,
+		max: 12,
+		pad: 2
+	},
+	dd: {
+		min: 1,
+		max: 31,
+		pad: 2
+	},
+	yyyy: {
+		min: 1,
+		max: 9999,
+		pad: 4
+	}
+};
+/**
+* Largest digit that can still be the *first* of a valid two-digit value for
+* each segment. Anything above this means the user typed a digit that can't
+* start a valid 2-digit value (e.g. `3` in MM — there's no valid month from
+* 30 to 39), so we commit it as a zero-padded single digit and auto-advance.
+*
+*   mm: max 12  → first digit 0, 1 are still ambiguous; 2–9 commit immediately
+*   dd: max 31  → first digit 0, 1, 2, 3 are still ambiguous; 4–9 commit
+*   yyyy: any first digit is fine, never auto-commit early
+*/
+var SEGMENT_MAX_AMBIGUOUS_FIRST_DIGIT = {
+	mm: 1,
+	dd: 3,
+	yyyy: 9
+};
+var padSegment = (key, n) => String(n).padStart(SEGMENT_RANGES[key].pad, "0");
+/**
+* Increment / decrement a segment value, wrapping at the segment's range.
+* Empty segments default sensibly: ArrowUp on empty starts at the min value
+* (or current year for `yyyy`); ArrowDown starts at the max.
+*
+* Mirrors the keyboard model of native <input type="date"> and React Aria's
+* `DateField`, without the `role="spinbutton"` that would re-introduce the
+* "9.1 percent" screen reader announcement on empty segments.
+*/
+var stepSegment = (key, currentValue, direction) => {
+	const { min, max } = SEGMENT_RANGES[key];
+	if (currentValue === "") {
+		if (key === "yyyy") return padSegment(key, (/* @__PURE__ */ new Date()).getFullYear());
+		return padSegment(key, direction === 1 ? min : max);
+	}
+	const n = Number(currentValue);
+	if (Number.isNaN(n)) return padSegment(key, min);
+	let next = n + direction;
+	if (next > max) next = min;
+	if (next < min) next = max;
+	return padSegment(key, next);
+};
+/**
+* ⚠️ Experimental — do not use in forms.
+*
+* Use `DateInputComposed` instead. See the file-level note at the top of this
+* module for context.
+*
+* @experimental
+*/
+var SegmentedDateInput = D(({ id, label, labelHint, "aria-label": ariaLabel, error, showErrorIcon, helper, showHelperIcon, required, suppressMessages = false, class: className, value, onInput, disabled, min, max, name, autocomplete: autocompleteAttr, autoComplete, ...restProps }, ref) => {
+	const { i18n } = useTranslation();
+	const segmentOrder = T(() => getSegmentOrder(i18n.language), [i18n.language]);
+	const navMaps = T(() => buildNavMaps(segmentOrder), [segmentOrder]);
+	const autocompleteValue = typeof autoComplete === "string" ? autoComplete : typeof autocompleteAttr === "string" ? autocompleteAttr : void 0;
+	/**
+	* Map the consumer-supplied autocomplete to per-segment + hidden-input
+	* tokens. The HTML spec defines `bday-day` / `bday-month` / `bday-year`
+	* for separate fields, paired with `bday` on a full-date input. Anything
+	* else passes through unchanged. Default is "off" so the browser doesn't
+	* suggest random history entries on individual numeric segments.
+	*/
+	const getSegmentAutocomplete = (key) => {
+		if (!autocompleteValue) return "off";
+		if (autocompleteValue === "bday") return key === "mm" ? "bday-month" : key === "dd" ? "bday-day" : "bday-year";
+		return autocompleteValue;
+	};
+	const hiddenAutocomplete = autocompleteValue ?? void 0;
+	const hiddenRef = A(null);
+	const iconButtonRef = A(null);
+	const segmentRefs = {
+		mm: A(null),
+		dd: A(null),
+		yyyy: A(null)
+	};
+	const [segments, setSegments] = d(() => parseISO(value));
+	y(() => {
+		setSegments((curr) => {
+			if (segmentsToISO(curr) === (value ?? "")) return curr;
+			return parseISO(value);
+		});
+	}, [value]);
+	y(() => {
+		const hidden = hiddenRef.current;
+		if (!hidden) return;
+		const next = value ?? "";
+		if (hidden.value !== next) hidden.value = next;
+	}, [value]);
+	const setHiddenRef = (el) => {
+		hiddenRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	};
+	const labelId = `${id}-label`;
+	const helperId = `${id}-helper`;
+	const errorId = `${id}-error`;
+	const formatHintId = `${id}-format-hint`;
+	const formatHintText = T(() => {
+		const labels = {
+			mm: "month",
+			dd: "day",
+			yyyy: "year"
+		};
+		return `Date format: ${segmentOrder.map((k) => labels[k]).join(", ")}.`;
+	}, [segmentOrder]);
+	const describedByIds = [
+		formatHintId,
+		!suppressMessages && helper ? helperId : null,
+		!suppressMessages && error ? errorId : null
+	].filter(Boolean).join(" ");
+	const fireOnInput = (next) => {
+		const iso = segmentsToISO(next);
+		const hidden = hiddenRef.current;
+		if (hidden) hidden.value = iso;
+		const event = new Event("input", { bubbles: true });
+		Object.defineProperty(event, "target", {
+			value: hidden,
+			enumerable: true,
+			configurable: true
+		});
+		onInput(event);
+	};
+	const writeSegment = (key, val) => {
+		let next = {
+			...segments,
+			[key]: val
+		};
+		if (next.dd && next.mm) {
+			const days = getDaysInMonth(next.mm, next.yyyy);
+			const ddNum = Number(next.dd);
+			if (Number.isFinite(ddNum) && ddNum > days) next = {
+				...next,
+				dd: padSegment("dd", days)
+			};
+		}
+		setSegments(next);
+		fireOnInput(next);
+	};
+	const focusSegment = (key) => {
+		if (!key) return;
+		const el = segmentRefs[key].current;
+		if (!el) return;
+		el.focus();
+		const len = el.value.length;
+		try {
+			el.setSelectionRange(len, len);
+		} catch {}
+	};
+	const handleSegmentInput = (key, maxLen) => (e) => {
+		const target = e.target;
+		let sanitized = target.value.replace(/\D/g, "").slice(0, maxLen);
+		let shouldAdvance = false;
+		if (sanitized.length === 1 && Number(sanitized) > SEGMENT_MAX_AMBIGUOUS_FIRST_DIGIT[key]) {
+			sanitized = padSegment(key, Number(sanitized));
+			shouldAdvance = true;
+		}
+		if (sanitized.length === maxLen) {
+			const n = Number(sanitized);
+			const { max } = SEGMENT_RANGES[key];
+			if (Number.isFinite(n) && n > max) sanitized = padSegment(key, max);
+			shouldAdvance = true;
+		}
+		if (sanitized !== target.value) target.value = sanitized;
+		writeSegment(key, sanitized);
+		if (shouldAdvance) focusSegment(navMaps.next[key]);
+	};
+	const handleSegmentKeyDown = (key) => (e) => {
+		const target = e.target;
+		const caret = target.selectionStart ?? 0;
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault();
+			const direction = e.key === "ArrowUp" ? 1 : -1;
+			const nextVal = stepSegment(key, target.value, direction);
+			target.value = nextVal;
+			writeSegment(key, nextVal);
+			try {
+				target.select();
+			} catch {}
+		} else if (e.key === "Backspace" && target.value === "" && caret === 0) {
+			e.preventDefault();
+			focusSegment(navMaps.prev[key]);
+		} else if (e.key === "ArrowLeft" && caret === 0) {
+			e.preventDefault();
+			focusSegment(navMaps.prev[key]);
+		} else if (e.key === "ArrowRight" && caret === target.value.length) {
+			e.preventDefault();
+			focusSegment(navMaps.next[key]);
+		} else if (e.key === "/" || e.key === "-" || e.key === " ") if (target.value.length > 0) {
+			e.preventDefault();
+			focusSegment(navMaps.next[key]);
+		} else e.preventDefault();
+	};
+	const handleSegmentBlur = (key, padTo) => (e) => {
+		const v = e.target.value;
+		if (!v) return;
+		let normalized = v.padStart(padTo, "0");
+		const n = Number(normalized);
+		const { min, max } = SEGMENT_RANGES[key];
+		if (Number.isFinite(n)) {
+			if (n < min) normalized = padSegment(key, min);
+			else if (n > max) normalized = padSegment(key, max);
+		}
+		if (normalized !== v) writeSegment(key, normalized);
+	};
+	const handleSegmentFocus = (e) => {
+		const target = e.target;
+		try {
+			target.select();
+		} catch {}
+	};
+	const handlePaste = (e) => {
+		const text = e.clipboardData?.getData("text")?.trim() ?? "";
+		if (!text) return;
+		const iso = ISO_DATE_RE.exec(text);
+		const us = US_DATE_RE.exec(text);
+		let next = null;
+		if (iso) next = {
+			yyyy: iso[1],
+			mm: iso[2],
+			dd: iso[3]
+		};
+		else if (us) next = {
+			mm: us[1].padStart(2, "0"),
+			dd: us[2].padStart(2, "0"),
+			yyyy: us[3]
+		};
+		if (next) {
+			e.preventDefault();
+			setSegments(next);
+			fireOnInput(next);
+			focusSegment("yyyy");
+		}
+	};
+	const handleHiddenChange = (e) => {
+		const target = e.target;
+		setSegments(parseISO(target.value));
+		onInput(e);
+		const iconBtn = iconButtonRef.current;
+		if (iconBtn && document.activeElement === target) try {
+			iconBtn.focus();
+		} catch {}
+	};
+	const handleIconClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		const hidden = hiddenRef.current;
+		if (!hidden) return;
+		try {
+			hidden.click();
+		} catch {}
+		try {
+			if (typeof hidden.showPicker === "function") hidden.showPicker();
+		} catch {}
+	};
+	const hasValue = !!segmentsToISO(segments);
+	const isInvalid = !!error;
+	const groupLabelProps = label ? { "aria-labelledby": labelId } : ariaLabel ? { "aria-label": ariaLabel } : {};
+	const SEGMENT_META = {
+		mm: {
+			maxLen: 2,
+			placeholder: "MM",
+			ariaLabel: "Month"
+		},
+		dd: {
+			maxLen: 2,
+			placeholder: "DD",
+			ariaLabel: "Day"
+		},
+		yyyy: {
+			maxLen: 4,
+			placeholder: "YYYY",
+			ariaLabel: "Year"
+		}
+	};
+	const renderSegment = (key) => {
+		const { maxLen, placeholder, ariaLabel: segAriaLabel } = SEGMENT_META[key];
+		return /* @__PURE__ */ u("input", {
+			ref: (el) => {
+				segmentRefs[key].current = el;
+			},
+			id: `${id}-${key}`,
+			class: cn("IncodeSegmentedDateInputSegment", `IncodeSegmentedDateInputSegment--${key}`),
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: getSegmentAutocomplete(key),
+			autoCorrect: "off",
+			spellcheck: false,
+			maxLength: maxLen,
+			size: maxLen,
+			placeholder,
+			"aria-label": segAriaLabel,
+			"aria-required": required ? "true" : void 0,
+			"aria-invalid": isInvalid ? "true" : void 0,
+			value: segments[key],
+			disabled,
+			"data-testid": `${id}-${key}`,
+			onInput: handleSegmentInput(key, maxLen),
+			onKeyDown: handleSegmentKeyDown(key),
+			onBlur: handleSegmentBlur(key, maxLen),
+			onFocus: handleSegmentFocus,
+			onPaste: handlePaste
+		});
+	};
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeInputComposed IncodeSegmentedDateInput", className),
+		children: [
+			label && /* @__PURE__ */ u("label", {
+				id: labelId,
+				class: "IncodeInputComposedLabel",
+				htmlFor: `${id}-${segmentOrder[0]}`,
+				"data-testid": `${id}-label`,
+				children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+					className: "IncodeInputComposedLabelHint",
+					hint: labelHint,
+					required: required === true,
+					testId: `${id}-label-hint`
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeInputComposedWrapper",
+				children: [
+					/* @__PURE__ */ u("div", {
+						role: "group",
+						class: cn("IncodeSegmentedDateInputField", isInvalid && "IncodeSegmentedDateInputField--invalid", disabled && "IncodeSegmentedDateInputField--disabled"),
+						"data-has-value": hasValue ? "true" : void 0,
+						"data-disabled": disabled ? "true" : void 0,
+						"aria-invalid": isInvalid ? "true" : void 0,
+						"aria-describedby": describedByIds || void 0,
+						...groupLabelProps,
+						children: segmentOrder.map((key, i) => /* @__PURE__ */ u(k, { children: [renderSegment(key), i < segmentOrder.length - 1 && /* @__PURE__ */ u("span", {
+							class: "IncodeSegmentedDateInputSeparator",
+							"aria-hidden": "true",
+							children: "/"
+						})] }, key))
+					}),
+					/* @__PURE__ */ u("span", {
+						id: formatHintId,
+						class: "IncodeSrOnly",
+						"data-testid": `${id}-format-hint`,
+						children: formatHintText
+					}),
+					/* @__PURE__ */ u("input", {
+						ref: setHiddenRef,
+						id,
+						type: "date",
+						name,
+						defaultValue: value,
+						min,
+						max,
+						disabled,
+						required,
+						"aria-required": required ? "true" : void 0,
+						autoComplete: hiddenAutocomplete,
+						class: "IncodeSegmentedDateInputHiddenNative",
+						tabIndex: -1,
+						"aria-hidden": "true",
+						"data-has-value": hasValue ? "true" : void 0,
+						"data-testid": `${id}-native`,
+						onInput: handleHiddenChange,
+						onChange: handleHiddenChange,
+						...restProps
+					}),
+					/* @__PURE__ */ u("button", {
+						ref: iconButtonRef,
+						type: "button",
+						class: "IncodeSegmentedDateInputIconButton",
+						onClick: handleIconClick,
+						onTouchEnd: handleIconClick,
+						disabled,
+						"aria-label": "Open date picker",
+						"data-testid": `${id}-picker-trigger`,
+						children: /* @__PURE__ */ u("span", {
+							class: "IncodeSegmentedDateInputIcon",
+							children: /* @__PURE__ */ u(CalendarIcon, {})
+						})
+					})
+				]
+			}),
+			!suppressMessages && error && /* @__PURE__ */ u("div", {
+				class: "IncodeInputComposedErrorWrapper",
+				role: "alert",
+				"data-testid": `${id}-error-wrapper`,
+				children: [showErrorIcon && /* @__PURE__ */ u("div", {
+					class: "IncodeInputComposedIconWrapper",
+					children: /* @__PURE__ */ u(ErrorIcon, { size: 16 })
+				}), /* @__PURE__ */ u("p", {
+					id: errorId,
+					class: "IncodeInputComposedError",
+					children: error
+				})]
+			}),
+			!suppressMessages && helper && !error && /* @__PURE__ */ u("div", {
+				class: "IncodeInputComposedHelperWrapper",
+				"data-testid": `${id}-helper-wrapper`,
+				children: [showHelperIcon && /* @__PURE__ */ u("div", {
+					class: "IncodeInputComposedIconWrapper",
+					children: /* @__PURE__ */ u(SuccessIcon, { size: 16 })
+				}), /* @__PURE__ */ u("p", {
+					id: helperId,
+					class: "IncodeInputComposedHelper",
+					children: helper
+				})]
+			})
+		]
+	});
+});
+SegmentedDateInput.displayName = "SegmentedDateInput";
+//#endregion
+//#region src/shared/textArea/textArea.tsx
+var TextArea = D((props, ref) => {
+	const { class: className, rows = 4, ...restProps } = props;
+	return /* @__PURE__ */ u("textarea", {
+		...restProps,
+		ref,
+		rows,
+		class: cn("IncodeTextArea", className)
+	});
+});
+//#endregion
+//#region src/shared/textAreaComposed/textAreaComposed.tsx
+var TextAreaComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, error, showErrorIcon, helper, showHelperIcon, required, rows = 4, class: className, ...restProps }, ref) => {
+	const helperId = `${id}-helper`;
+	const errorId = `${id}-error`;
+	const describedByIds = [helper ? helperId : null, error ? errorId : null].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeTextAreaComposed", className),
+		children: [
+			label && /* @__PURE__ */ u("label", {
+				class: "IncodeTextAreaComposedLabel",
+				htmlFor: id,
+				"data-testid": `${id}-label`,
+				children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+					className: "IncodeTextAreaComposedLabelHint",
+					hint: labelHint,
+					required: required === true,
+					testId: `${id}-label-hint`
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeTextAreaComposedWrapper",
+				children: /* @__PURE__ */ u(TextArea, {
+					id,
+					rows,
+					...restProps,
+					ref,
+					required,
+					...!label && ariaLabel ? { "aria-label": ariaLabel } : {},
+					"aria-describedby": describedByIds || void 0,
+					"aria-required": required ? "true" : void 0,
+					"aria-invalid": error ? "true" : void 0
+				})
+			}),
+			error && /* @__PURE__ */ u("div", {
+				class: "IncodeTextAreaComposedErrorWrapper",
+				role: "alert",
+				"data-testid": `${id}-error-wrapper`,
+				children: [showErrorIcon && /* @__PURE__ */ u("div", {
+					class: "IncodeTextAreaComposedIconWrapper",
+					children: /* @__PURE__ */ u(ErrorIcon, { size: 17 })
+				}), /* @__PURE__ */ u("p", {
+					id: errorId,
+					class: "IncodeTextAreaComposedError",
+					children: error
+				})]
+			}),
+			helper && !error && /* @__PURE__ */ u("div", {
+				class: "IncodeTextAreaComposedHelperWrapper",
+				"data-testid": `${id}-helper-wrapper`,
+				children: [showHelperIcon && /* @__PURE__ */ u("div", {
+					class: "IncodeTextAreaComposedIconWrapper",
+					children: /* @__PURE__ */ u(SuccessIcon, { size: 17 })
+				}), /* @__PURE__ */ u("p", {
+					id: helperId,
+					class: "IncodeTextAreaComposedHelper",
+					children: helper
+				})]
+			})
+		]
+	});
+});
+TextAreaComposed.displayName = "TextAreaComposed";
+//#endregion
+//#region src/shared/manualCapture/manualCapture.tsx
+function captureFrameFromVideo(video) {
+	if (video.readyState < 2 || video.videoWidth === 0 || video.videoHeight === 0) return null;
+	const canvas = document.createElement("canvas");
+	canvas.width = video.videoWidth;
+	canvas.height = video.videoHeight;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return null;
+	ctx.drawImage(video, 0, 0);
+	return canvas.toDataURL("image/jpeg", .92).split(",")[1] ?? null;
+}
+var ManualCapture = ({ stream, onCapture, disabled }) => {
+	const videoRef = A(null);
+	useCoverMedia(videoRef, stream);
+	y(() => {
+		if (videoRef.current && stream) {
+			videoRef.current.srcObject = stream;
+			videoRef.current.play().catch(() => {});
+		}
+	}, [stream]);
+	const handleCapture = q(() => {
+		const video = videoRef.current;
+		if (!video || disabled) return;
+		const base64 = captureFrameFromVideo(video);
+		if (base64) onCapture(base64);
+	}, [onCapture, disabled]);
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeManualCapture",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeManualCaptureVideoContainer",
+			children: /* @__PURE__ */ u("video", {
+				ref: videoRef,
+				autoplay: true,
+				playsInline: true,
+				muted: true,
+				class: "IncodeManualCaptureVideo",
+				"aria-label": "Camera stream for document capture"
+			})
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeManualCaptureButtonContainer",
+			children: /* @__PURE__ */ u(Button, {
+				variant: "primary",
+				size: "L",
+				onClick: handleCapture,
+				disabled,
+				class: "IncodeManualCaptureButton",
+				"aria-label": "Capture document",
+				children: "Capture"
+			})
+		})]
+	});
+};
+//#endregion
+export { BaseTutorial, BottomSheet, Button, CalendarIcon, CameraFrame, CameraIcon, CameraOverlay, CameraOverlayHeader, CameraView, CaptureButtonIcon, CaptureFooter, Checkbox, CheckmarkCompactIcon, CheckmarkIcon, ChevronDown, ChevronLeftIcon, ChevronRightIcon, CloseIcon, ConnectionError, DateInputComposed, DropdownComposed, EllipseIcon, ErrorContent, ErrorIcon, EyeIcon, EyeOffIcon, FileIcon, FormField, HelpIcon, Capture as IdCapture, Chooser as IdChooser, IdError, IdExpired, FlipAnimation as IdFlipAnimation, Tutorial as IdTutorial, IncodeComponent, Input, InputComposed, LandscapeBlocker, SvgLightningIcon as LightningIcon, LockIcon, Lottie, ManualCapture, Modal, OtpInput, Overlay, Page, PasswordInputComposed, Permissions, PhoneInputComposed, Processing, ProgressBar, RadioButtonComposed, RadioGroupComposed, SearchIcon, SegmentedDateInput, Capture$1 as SelfieCapture, Tutorial$1 as SelfieTutorial, Spacer, Spinner, SuccessIcon, TextArea, TextAreaComposed, Title, TypographyH1, TypographyH3, TypographyH4, TypographyH5, TypographyP, VerificationOptionCard, VerificationOptionCardList, VerificationResult, WarningIcon, countries, getCountryByCallingCode, getCountryByCode, setUiConfig, useManager, useScreenOrientation };