@incodetech/web 2.0.1 → 2.1.0-rc.0

package/dist/mandatoryConsent-r0PQHmv-.js

@@ -0,0 +1,107 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { _ as y, l as A, 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 { createMandatoryConsentManager } from "@incodetech/core/mandatory-consent";
+//#region src/modules/mandatory-consent/mandatoryConsent.tsx
+var stopLinkPropagation = (event) => {
+	if (event.target.closest("a")) event.stopPropagation();
+};
+var MandatoryConsentContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t, i18n } = useTranslation();
+	const titleRef = A(null);
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("MandatoryConsent config is required when no manager is provided");
+		return createMandatoryConsentManager({ config: {
+			...config,
+			language: i18n.language
+		} });
+	}, { manageLifecycle: !externalManager });
+	y(() => {
+		if (state.status === "display") titleRef.current?.focus();
+	}, [state.status]);
+	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 });
+	const consentBody = state.text.split("\n").filter((line) => line.trim().length > 0).join(" ");
+	const isMandatoryConsent = (config?.type ?? "MANDATORY") === "MANDATORY";
+	return /* @__PURE__ */ u(Page, {
+		className: "IncodeConsentPage",
+		title: state.title,
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeConsentContent",
+			children: [
+				/* @__PURE__ */ u("div", {
+					class: "IncodeConsentBody",
+					children: [/* @__PURE__ */ u("p", {
+						class: "IncodeConsentSubtitle",
+						children: t("biometricConsent.subtitle")
+					}), /* @__PURE__ */ u("div", {
+						class: "IncodeConsentCheckboxList",
+						children: /* @__PURE__ */ u(Checkbox, {
+							id: "mandatory-consent-checkbox",
+							class: "IncodeConsentCheckbox",
+							checked: state.isSigned,
+							required: true,
+							onChange: () => manager.toggle(),
+							label: /* @__PURE__ */ u("span", {
+								class: "IncodeConsentCheckboxLabel",
+								role: "presentation",
+								onClick: stopLinkPropagation,
+								onKeyDown: stopLinkPropagation,
+								children: /* @__PURE__ */ u(RichText, {
+									content: consentBody,
+									class: "IncodeRichText"
+								})
+							})
+						})
+					})]
+				}),
+				state.status === "display" && state.error ? /* @__PURE__ */ u("p", {
+					class: "IncodeConsentSubmitError",
+					"data-testid": "mandatory-consent-submit-error",
+					role: "alert",
+					children: state.error
+				}) : null,
+				/* @__PURE__ */ u("div", {
+					class: "IncodeConsentActions",
+					children: [/* @__PURE__ */ u(Button, {
+						"data-testid": "mandatory-consent-submit",
+						class: !isMandatoryConsent ? "IncodeConsentButton" : void 0,
+						onClick: () => manager.submit(),
+						disabled: !state.canSubmit,
+						isLoading: state.status === "submitting",
+						children: t("biometricConsent.button.continue")
+					}), isMandatoryConsent && /* @__PURE__ */ u(Button, {
+						variant: "link",
+						onClick: () => manager.cancel(),
+						children: t("biometricConsent.button.cancel")
+					})]
+				})
+			]
+		})
+	}, "ready");
+};
+var MandatoryConsent = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(MandatoryConsentContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+registerIncodeModuleElement(MandatoryConsent, "incode-mandatory-consent");
+//#endregion
+export { MandatoryConsent };

package/dist/modal-nTSaG7nB.js

@@ -0,0 +1,139 @@
+import { b as Q, d as T, f as _, g as x, h as q, l as A, p as d, r as $, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { n as cn } from "./loadingIcon-B0ysgiNq.js";
+import { o as CloseIcon } from "./icons-Dbs9ZfYM.js";
+import { a as useModalPortalTarget, i as useModalFocusCapture, n as useModalBodyScrollLock, o as useModalTabCycle, r as useModalEscapeDismiss, t as MODAL_TITLE_ID } from "./modal.hooks-D2xhIuHA.js";
+//#region src/shared/modal/modal.tsx
+var ModalContext = Q(null);
+function useModalContext() {
+	const ctx = x(ModalContext);
+	if (!ctx) throw new Error("Modal compound components must be used within Modal.Root");
+	return ctx;
+}
+function ModalRoot({ open, children, onOpenChange, dismissible = true, portalContainer, class: className, hasBackdrop = true, manageInitialFocus = true, returnFocusRef }) {
+	const portalTarget = useModalPortalTarget(open, portalContainer ?? void 0);
+	const [hasDescription, setHasDescription] = d(false);
+	const dialogRef = A(null);
+	const requestClose = q(() => {
+		if (!dismissible) return;
+		onOpenChange?.(false);
+	}, [dismissible, onOpenChange]);
+	const contextValue = T(() => ({
+		setHasDescription,
+		dismissible,
+		requestClose
+	}), [dismissible, requestClose]);
+	const dialogActive = open && Boolean(portalTarget);
+	useModalBodyScrollLock(open);
+	useModalEscapeDismiss(open, dismissible, requestClose);
+	useModalFocusCapture(dialogActive, dialogRef, manageInitialFocus, returnFocusRef);
+	useModalTabCycle(dialogActive, dialogRef);
+	if (!portalTarget || !open) return null;
+	return $(/* @__PURE__ */ u(ModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ u("div", {
+			class: cn("IncodeModalRoot", className),
+			"data-incode-modal": "",
+			children: [hasBackdrop && /* @__PURE__ */ u("div", {
+				class: "IncodeModalBackdrop",
+				"aria-hidden": "true",
+				onMouseDown: () => {
+					requestClose();
+				}
+			}), /* @__PURE__ */ u("div", {
+				ref: dialogRef,
+				class: "IncodeModalDialog",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": MODAL_TITLE_ID,
+				"aria-describedby": hasDescription ? "incode-modal-description" : void 0,
+				tabIndex: -1,
+				onMouseDown: (event) => {
+					event.stopPropagation();
+				},
+				children
+			})]
+		})
+	}), portalTarget);
+}
+function ModalContent({ children, class: className }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeModalContent", className),
+		children
+	});
+}
+function ModalClose({ "aria-label": ariaLabel = "Close", title: titleAttr = "Close", class: className, onClick }) {
+	const { dismissible, requestClose } = useModalContext();
+	if (!dismissible) return null;
+	const handleClose = async () => {
+		if (onClick) await onClick();
+		requestClose();
+	};
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		class: cn("IncodeModalClose", className),
+		"aria-label": ariaLabel,
+		title: titleAttr,
+		onClick: handleClose,
+		children: /* @__PURE__ */ u(CloseIcon, {
+			height: 32,
+			width: 32,
+			fillColor: "var(--icon-neutral-300)"
+		})
+	});
+}
+function ModalIcon({ children, class: className }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeModalIcon", className),
+		children
+	});
+}
+function ModalTitleSection({ children, align = "center" }) {
+	const className = {
+		center: "IncodeModalTitleSectionCenter",
+		left: "IncodeModalTitleSectionLeft"
+	}[align];
+	return /* @__PURE__ */ u("div", {
+		class: className,
+		children
+	});
+}
+function ModalTitle({ children, ref, class: className }) {
+	return /* @__PURE__ */ u("h2", {
+		id: MODAL_TITLE_ID,
+		ref,
+		tabIndex: -1,
+		className: cn("IncodeModalTitle", className),
+		children
+	});
+}
+function ModalSubtitle({ children, class: className }) {
+	const { setHasDescription } = useModalContext();
+	_(() => {
+		setHasDescription(true);
+		return () => setHasDescription(false);
+	}, [setHasDescription]);
+	return /* @__PURE__ */ u("p", {
+		id: "incode-modal-description",
+		className: cn("IncodeModalSubtitle", className),
+		children
+	});
+}
+function ModalActions({ children, class: className, orientation = "vertical" }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn(orientation === "vertical" ? "IncodeModalActionsVertical" : "IncodeModalActionsHorizontal", className),
+		role: "group",
+		children
+	});
+}
+var Modal = {
+	Root: ModalRoot,
+	Content: ModalContent,
+	Close: ModalClose,
+	Icon: ModalIcon,
+	TitleSection: ModalTitleSection,
+	Title: ModalTitle,
+	Subtitle: ModalSubtitle,
+	Actions: ModalActions
+};
+//#endregion
+export { Modal as t };

package/dist/modal.hooks-D2xhIuHA.js

@@ -0,0 +1,195 @@
+import { _ as y, p as d } from "./vendor-preact-DThS2ZQ_.js";
+//#region src/shared/modal/modal.hooks.ts
+var MODAL_SCROLL_LOCK_CLASS = "IncodeModalScrollLock";
+/** `id` of the `Modal.Title` heading; also the dialog's `aria-labelledby`. */
+var MODAL_TITLE_ID = "incode-modal-title";
+/**
+* Selector for focusable elements that participate in Tab cycling inside the dialog.
+*/
+var TAB_FOCUSABLE_SELECTOR = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+function getTabFocusableElements(container) {
+	return Array.from(container.querySelectorAll(TAB_FOCUSABLE_SELECTOR));
+}
+function isTabFocusableElement(element) {
+	try {
+		return element.matches(TAB_FOCUSABLE_SELECTOR);
+	} catch {
+		return false;
+	}
+}
+/**
+* Picks the dialog's initial focus. By default focus lands on the `Modal.Title`
+* heading so screen readers announce it on open, rather than the dialog
+* role / item count or an action control. A dialog can opt a specific control
+* into initial focus by marking it with the `autofocus` attribute. Falls back
+* to the dialog container when no title is present.
+*/
+function resolveModalInitialFocusTarget(dialog) {
+	const autofocusEl = dialog.querySelector("[autofocus]");
+	if (autofocusEl && isTabFocusableElement(autofocusEl)) return autofocusEl;
+	return dialog.querySelector(`#incode-modal-title`) ?? dialog;
+}
+/**
+* Renders the modal into `.IncodeComponent` by default, falling back to `document.body`.
+* Pass `portalContainer` to mount into a host you control.
+* The ephemeral portal host is only created while `open` is true.
+*/
+function useModalPortalTarget(open, portalContainer) {
+	const [node, setNode] = d(null);
+	y(() => {
+		if (!open) {
+			setNode(null);
+			return;
+		}
+		if (portalContainer) {
+			setNode(portalContainer);
+			return () => {
+				setNode(null);
+			};
+		}
+		const el = document.createElement("div");
+		el.setAttribute("data-incode-modal-portal", "");
+		(document.querySelector(".IncodeComponent") ?? document.body).appendChild(el);
+		setNode(el);
+		return () => {
+			el.remove();
+			setNode(null);
+		};
+	}, [open, portalContainer]);
+	return node;
+}
+/**
+* Locks scroll while the modal is open by adding a CSS class to `.IncodeComponent`
+* when present, otherwise `document.body`.
+*/
+function useModalBodyScrollLock(open) {
+	y(() => {
+		if (!open) return;
+		const incodeComponent = document.querySelector(".IncodeComponent");
+		(incodeComponent ?? document.body).classList.add(MODAL_SCROLL_LOCK_CLASS);
+		return () => {
+			(incodeComponent ?? document.body).classList.remove(MODAL_SCROLL_LOCK_CLASS);
+		};
+	}, [open]);
+}
+/**
+* Invokes `onRequestClose` when Escape is pressed while `open && dismissible`.
+*/
+function useModalEscapeDismiss(open, dismissible, onRequestClose) {
+	y(() => {
+		if (!open || !dismissible) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onRequestClose();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		dismissible,
+		onRequestClose
+	]);
+}
+/**
+* When `active` becomes true, moves focus to the first tabbable inside the dialog,
+* or the dialog surface. Otherwise restores focus on cleanup — to the element in
+* `returnFocusRef` if provided, otherwise to the previously focused element.
+*
+* An explicit `returnFocusRef` is strongly recommended for dialogs opened via
+* touch on iOS/VoiceOver, where `document.activeElement` is frequently `<body>`
+* at open time, which would otherwise cause focus to be restored to nothing and
+* VoiceOver to land on a nearby empty container.
+*
+* `active` should include portal mount readiness (e.g. `open && portalTarget != null`)
+* so focus runs after the dialog node exists.
+*/
+function useModalFocusCapture(active, dialogRef, manageInitialFocus = true, returnFocusRef) {
+	y(() => {
+		if (!active) return;
+		const previous = document.activeElement;
+		const explicitReturnTarget = returnFocusRef?.current ?? null;
+		if (manageInitialFocus) {
+			const dialog = dialogRef.current;
+			if (dialog) resolveModalInitialFocusTarget(dialog).focus();
+		}
+		return () => {
+			if (explicitReturnTarget && typeof explicitReturnTarget.focus === "function") {
+				explicitReturnTarget.focus();
+				return;
+			}
+			if (previous && typeof previous.focus === "function") previous.focus();
+		};
+	}, [
+		active,
+		dialogRef,
+		manageInitialFocus,
+		returnFocusRef
+	]);
+}
+/**
+* Tracks the visual viewport (shrinks when a mobile virtual keyboard opens) and
+* publishes its size + offset as CSS custom properties on the target element:
+*/
+function useModalVisualViewportBounds(active, targetRef) {
+	y(() => {
+		if (!active) return;
+		if (typeof window === "undefined") return;
+		const viewport = window.visualViewport;
+		if (!viewport) return;
+		const update = () => {
+			const el = targetRef.current;
+			if (!el) return;
+			el.style.setProperty("--incode-visual-viewport-height", `${viewport.height}px`);
+			el.style.setProperty("--incode-visual-viewport-offset-top", `${viewport.offsetTop}px`);
+		};
+		update();
+		viewport.addEventListener("resize", update);
+		viewport.addEventListener("scroll", update);
+		return () => {
+			viewport.removeEventListener("resize", update);
+			viewport.removeEventListener("scroll", update);
+		};
+	}, [active, targetRef]);
+}
+/**
+* Keeps Tab / Shift+Tab cycling within the dialog while `active` is true.
+*/
+function useModalTabCycle(active, dialogRef) {
+	y(() => {
+		if (!active) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const dialog = dialogRef.current;
+			if (!dialog) return;
+			const focusables = getTabFocusableElements(dialog);
+			if (focusables.length === 0) {
+				event.preventDefault();
+				return;
+			}
+			const first = focusables[0];
+			const last = focusables[focusables.length - 1];
+			if (event.shiftKey) {
+				if (document.activeElement === first) {
+					event.preventDefault();
+					last.focus();
+				}
+			} else if (document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [active, dialogRef]);
+}
+//#endregion
+export { useModalPortalTarget as a, useModalFocusCapture as i, useModalBodyScrollLock as n, useModalTabCycle as o, useModalEscapeDismiss as r, useModalVisualViewportBounds as s, MODAL_TITLE_ID as t };

package/dist/numberedStep-CEtwZqLp.js

@@ -0,0 +1,13 @@
+import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+//#region src/shared/permissions/camera/numberedStep.tsx
+var NumberedStep = ({ number }) => {
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeNumberedStep",
+		children: /* @__PURE__ */ u("span", {
+			class: "IncodeNumberedStepText",
+			children: number
+		})
+	});
+};
+//#endregion
+export { NumberedStep as t };

package/dist/optionAccessibleLabel-CnA-mNAU.js

@@ -0,0 +1,202 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { _ as y, h as q, l as A, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { r as useIsMobileDeviceWidth } from "./hooks-Da_yP_Dr.js";
+import { t as InputComposed } from "./inputComposed-CQ4AsvZg.js";
+import { i as translateError } from "./radioGroupComposed-BNuaopVr.js";
+import { t as BottomSheet } from "./bottomSheet-F1GJfQx_.js";
+//#region src/shared/addressAutocomplete/addressAutocomplete.tsx
+var AddressAutocomplete = ({ label, value, error, errorParams, suggestions, readonly, required, labelHint, onChange, onSearch, onSelect, onBlur }) => {
+	const { t } = useTranslation();
+	const [showSuggestions, setShowSuggestions] = d(false);
+	const [isModalOpen, setIsModalOpen] = d(false);
+	const [modalQuery, setModalQuery] = d("");
+	const [activeIndex, setActiveIndex] = d(-1);
+	const [mobileActiveIndex, setMobileActiveIndex] = d(-1);
+	const containerRef = A(null);
+	const listboxRef = A(null);
+	const mobileListboxRef = A(null);
+	const listboxId = "ekyc-address-listbox";
+	const mobileListboxId = "ekyc-address-mobile-listbox";
+	const mobileTitleId = "ekyc-address-modal-title";
+	const isMobile = useIsMobileDeviceWidth();
+	const translatedLabel = t(label);
+	y(() => {
+		function handleClickOutside(e) {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setShowSuggestions(false);
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	y(() => {
+		setActiveIndex(-1);
+		setMobileActiveIndex(-1);
+	}, [suggestions]);
+	y(() => {
+		const ref = isMobile ? mobileListboxRef : listboxRef;
+		const idx = isMobile ? mobileActiveIndex : activeIndex;
+		if (idx < 0) return;
+		ref.current?.children[idx]?.scrollIntoView({ block: "nearest" });
+	}, [
+		activeIndex,
+		mobileActiveIndex,
+		isMobile
+	]);
+	const handleSelect = q((suggestion) => {
+		onSelect(suggestion);
+		setShowSuggestions(false);
+		setIsModalOpen(false);
+		setActiveIndex(-1);
+		setMobileActiveIndex(-1);
+	}, [onSelect]);
+	const closeModal = q(() => {
+		setIsModalOpen(false);
+		setMobileActiveIndex(-1);
+	}, []);
+	const handleInput = (val) => {
+		onChange(val);
+		if (val.length >= 3) if (isMobile) {
+			setIsModalOpen(true);
+			setModalQuery(val);
+			onSearch(val);
+		} else {
+			onSearch(val);
+			setShowSuggestions(true);
+		}
+		else setShowSuggestions(false);
+	};
+	const createListboxKeyHandler = (getIndex, setIndex, onEscape) => {
+		return (e) => {
+			if (suggestions.length === 0) return;
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
+			} else if (e.key === "Enter" && getIndex() >= 0) {
+				e.preventDefault();
+				handleSelect(suggestions[getIndex()]);
+			} else if (e.key === "Escape" && onEscape) onEscape();
+		};
+	};
+	const handleKeyDown = createListboxKeyHandler(() => activeIndex, setActiveIndex, () => {
+		setShowSuggestions(false);
+		setActiveIndex(-1);
+	});
+	const handleMobileKeyDown = createListboxKeyHandler(() => mobileActiveIndex, setMobileActiveIndex);
+	const isExpanded = !isMobile && showSuggestions && suggestions.length > 0;
+	const activeDescendant = isExpanded && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+	return /* @__PURE__ */ u("div", {
+		className: "IncodeAddressAutocomplete",
+		ref: containerRef,
+		children: [
+			/* @__PURE__ */ u(InputComposed, {
+				id: "ekyc-street",
+				label: translatedLabel,
+				labelHint,
+				name: "street",
+				value,
+				readOnly: readonly,
+				required,
+				error: translateError(t, error, errorParams),
+				onInput: (e) => handleInput(e.target.value),
+				onKeyDown: handleKeyDown,
+				onBlur,
+				role: "combobox",
+				"aria-expanded": isExpanded,
+				"aria-controls": listboxId,
+				"aria-activedescendant": activeDescendant,
+				"aria-autocomplete": "list",
+				"data-testid": "ekyc-address-input"
+			}),
+			isExpanded && /* @__PURE__ */ u("ul", {
+				ref: listboxRef,
+				id: listboxId,
+				role: "listbox",
+				className: "IncodeAddressAutocompleteSuggestions",
+				children: suggestions.map((s, i) => /* @__PURE__ */ u("li", {
+					id: `${listboxId}-option-${i}`,
+					role: "option",
+					"aria-selected": i === activeIndex,
+					className: `IncodeAddressAutocompleteSuggestion ${i === activeIndex ? "IncodeAddressAutocompleteSuggestionActive" : ""}`,
+					onClick: () => handleSelect(s),
+					children: s.label
+				}, s.id))
+			}),
+			isMobile && /* @__PURE__ */ u(BottomSheet, {
+				isOpen: isModalOpen,
+				onClose: closeModal,
+				labelledById: mobileTitleId,
+				children: [/* @__PURE__ */ u("div", {
+					className: "IncodeAddressAutocompleteModalHeader",
+					children: [/* @__PURE__ */ u("h3", {
+						id: mobileTitleId,
+						children: t("verification.addressSearch")
+					}), /* @__PURE__ */ u("button", {
+						className: "IncodeAddressAutocompleteModalClose",
+						onClick: closeModal,
+						type: "button",
+						"aria-label": t("common.close"),
+						children: "×"
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "IncodeAddressAutocompleteModalBody",
+					children: [
+						/* @__PURE__ */ u("input", {
+							className: "IncodeAddressAutocompleteModalInput",
+							type: "text",
+							value: modalQuery,
+							placeholder: t("verification.addressPlaceholder"),
+							"aria-label": t("verification.addressSearch"),
+							role: "combobox",
+							"aria-expanded": suggestions.length > 0,
+							"aria-controls": mobileListboxId,
+							"aria-activedescendant": mobileActiveIndex >= 0 ? `${mobileListboxId}-option-${mobileActiveIndex}` : void 0,
+							"aria-autocomplete": "list",
+							onInput: (e) => {
+								const val = e.target.value;
+								setModalQuery(val);
+								if (val.length >= 3) onSearch(val);
+							},
+							onKeyDown: handleMobileKeyDown,
+							autoFocus: true
+						}),
+						suggestions.length > 0 && /* @__PURE__ */ u("ul", {
+							ref: mobileListboxRef,
+							id: mobileListboxId,
+							role: "listbox",
+							className: "IncodeAddressAutocompleteModalSuggestions",
+							children: suggestions.map((s, i) => /* @__PURE__ */ u("li", {
+								id: `${mobileListboxId}-option-${i}`,
+								role: "option",
+								"aria-selected": i === mobileActiveIndex,
+								className: `IncodeAddressAutocompleteModalSuggestion ${i === mobileActiveIndex ? "IncodeAddressAutocompleteModalSuggestionActive" : ""}`,
+								onClick: () => handleSelect(s),
+								children: s.label
+							}, s.id))
+						}),
+						/* @__PURE__ */ u("button", {
+							className: "IncodeAddressAutocompleteEnterManually",
+							onClick: closeModal,
+							type: "button",
+							children: t("verification.enterManually")
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/shared/utils/optionAccessibleLabel/optionAccessibleLabel.ts
+/**
+* Strips a single leading flag or pictograph (plus following whitespace) from
+* labels so accessible names can mirror visible text without screen readers
+* announcing decorative emoji.
+*/
+var LEADING_DECORATIVE_EMOJI = /^(?:[\u{1F1E6}-\u{1F1FF}]{2}|\p{Extended_Pictographic})\s*/u;
+function getAccessibleOptionLabel(label) {
+	return label.replace(LEADING_DECORATIVE_EMOJI, "").trimStart();
+}
+//#endregion
+export { AddressAutocomplete as n, getAccessibleOptionLabel as t };