;
{
  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] = "2c9e5c33-a72e-48c5-9b2a-195af4e42fb6", e._sentryDebugIdIdentifier = "sentry-dbid-2c9e5c33-a72e-48c5-9b2a-195af4e42fb6");
  } catch (e) {
  }
}
;
import { jsxs, jsx } from "preact/jsx-runtime";
import cx from "classnames";
import { useEffect } from "preact/hooks";
import { u as useTranslation, p as useAnalyticsContext, r as Icon, a2 as translateStringOrObject } from "./StoreProvider-CqQrndhS.js";
import { a as useId } from "./useId-BZ0PA7jP.js";
const ARIA_ERROR_SUFFIX = "-ariaError";
const 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 });
const Field = ({
  className,
  classNameModifiers = [],
  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,
        classNameModifiers.map((m) => `adyen-kyc-field--${m}`),
        {
          "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: "adyen-kyc-u-screen-reader-only", children: `${label}:` }),
          !!errorMessage && typeof errorMessage !== "boolean" && /* @__PURE__ */ jsxs("span", { id: elementIds.error, children: [
            translateStringOrObject(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 })
      ]
    }
  );
};
export {
  Field as F
};
