try {
	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "2c0bbf4a-e03b-4910-8838-af720b5eabbe", e._sentryDebugIdIdentifier = "sentry-dbid-2c0bbf4a-e03b-4910-8838-af720b5eabbe");
} catch (e) {}
import { a as Icon, r as useTranslation } from "./translation-Br5wIPO-.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-DfTXpZbA.js";
import { n as translateTranslatable } from "./utils-g_Wl4-9Z.js";
import { t as useId } from "./useId-eJSYfA6i.js";
import { useEffect } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/molecules/ErrorPanel/constants.ts
var ARIA_ERROR_SUFFIX = "-ariaError";
//#endregion
//#region src/components/ui/atoms/Field/Field.tsx
/**
* Internal component to render either a wrapping `<div>` for a single input field,
* or a `<fieldset>` for a group of related inputs (like RadioGroupCard or RadioGroup).
*/
var MaybeFieldset = ({ children, className, name, disabled, el, dataTestId }) => el === "fieldset" ? /* @__PURE__ */ jsx("fieldset", {
	name,
	disabled,
	className,
	"data-testid": dataTestId,
	children
}) : /* @__PURE__ */ jsx("div", {
	className,
	"data-testid": dataTestId,
	children
});
/**
* A wrapper component for form inputs that provides consistent layout and handling for labels,
* descriptions (ex. helper text, error text), validation, styling, etc.
* For use with various input components like `InputText`, `InputDate`, `Select`, etc.
* 
* FieldChildProps are props passed to children which include a unique identifier (id) and other validation/a11y related props
*
* @example
* ```tsx
* <Field name="lastName" label="Last name" isValid={valid?.lastName} helper="This is helper text" >
{(childProps) => (
<InputText
{...childProps}
name="lastName"
value={data?.lastName}
/>
)}
</Field>
* ```
*/
var Field = ({ className, children, disabled, optional, errorMessage, formatGuidance, helper, helperPosition = "above", isValid, label, name, showErrorIconBottom = false, showErrorIcon = true, el = "div", dataTestId, onBlur, onFieldBlur, onFocus }) => {
	const uniqueId = useId("field");
	const { t } = useTranslation("common");
	const userEvents = useAnalyticsContext();
	const Label = el === "fieldset" ? "legend" : "label";
	useEffect(() => {
		if (!errorMessage) return;
		const returnValue = typeof errorMessage === "string" && errorMessage || typeof errorMessage === "object" && errorMessage.key || "invalid";
		userEvents.addFieldEvent("Encountered error", {
			actionType: "input",
			field: name,
			returnType: "validation",
			returnValue
		});
	}, [
		name,
		errorMessage,
		userEvents
	]);
	const elementIds = {
		label: `${uniqueId}-label`,
		helper: `${uniqueId}-helper`,
		error: `${uniqueId}${ARIA_ERROR_SUFFIX}`,
		guidanceText: `${uniqueId}-guidanceText`
	};
	const inputDescribedBy = `${errorMessage ? elementIds.error : ""} ${helper ? elementIds.helper : ""} ${formatGuidance ? elementIds.guidanceText : ""}`.trim();
	return /* @__PURE__ */ jsxs(MaybeFieldset, {
		className: cx("adyen-kyc-field", className, {
			"adyen-kyc-field--error": !!errorMessage,
			"adyen-kyc-field--valid": isValid,
			"adyen-kyc-field--disabled": disabled
		}),
		name,
		disabled,
		el,
		dataTestId,
		children: [
			label && /* @__PURE__ */ jsxs(Label, {
				id: elementIds.label,
				htmlFor: el === "fieldset" ? void 0 : uniqueId,
				className: cx("adyen-kyc-label__text", { "adyen-kyc-label__text--error": !!errorMessage }),
				children: [label, optional && /* @__PURE__ */ jsxs("span", {
					className: "adyen-kyc-optional-label",
					children: [" ", t(($) => $["optional"])]
				})]
			}),
			helper && helperPosition === "above" && /* @__PURE__ */ jsx("span", {
				id: elementIds.helper,
				className: "adyen-kyc-helper-text adyen-kyc-helper-text__above",
				children: helper
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "adyen-kyc-input-wrapper",
				children: [
					children({
						id: uniqueId,
						"aria-labelledby": elementIds.label,
						"aria-describedby": inputDescribedBy,
						isInvalid: !!errorMessage,
						isValid: !!isValid,
						onBlurHandler: (e) => {
							if (typeof onBlur === "function") onBlur(e);
							if (typeof onFieldBlur === "function") onFieldBlur(e);
						},
						onFocusHandler: (e) => {
							if (typeof onFocus === "function") onFocus(e);
						}
					}),
					helper && helperPosition === "below" && /* @__PURE__ */ jsx("span", {
						id: elementIds.helper,
						className: "adyen-kyc-helper-text adyen-kyc-helper-text__below",
						children: helper
					}),
					!!errorMessage && !showErrorIconBottom && showErrorIcon && /* @__PURE__ */ jsx("span", {
						className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid",
						children: /* @__PURE__ */ jsx(Icon, { name: "field-error" })
					})
				]
			}),
			/* @__PURE__ */ jsxs("div", {
				"aria-live": "polite",
				"aria-atomic": true,
				className: "adyen-kyc-error-text",
				children: [/* @__PURE__ */ jsx("span", {
					className: "u-screen-reader-only",
					children: `${label}:`
				}), !!errorMessage && typeof errorMessage !== "boolean" && /* @__PURE__ */ jsxs("span", {
					id: elementIds.error,
					children: [translateTranslatable(t, errorMessage), showErrorIconBottom && /* @__PURE__ */ jsx("span", {
						className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid-bottom",
						children: /* @__PURE__ */ jsx(Icon, { name: "field-error" })
					})]
				})]
			}),
			!errorMessage && formatGuidance && /* @__PURE__ */ jsx("span", {
				id: elementIds.guidanceText,
				"aria-live": "polite",
				className: "adyen-kyc-guidance-text",
				children: formatGuidance
			})
		]
	});
};
//#endregion
export { Field as t };
