@adyen/kyc-components 4.0.1 → 4.2.0-beta.1

package/dist/ErrorPanel-DJ-uFV4L.js

@@ -0,0 +1,194 @@
+;
+{
+  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] = "4fbc51d1-6dda-4f55-9473-0cd50f6627d4", e._sentryDebugIdIdentifier = "sentry-dbid-4fbc51d1-6dda-4f55-9473-0cd50f6627d4");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { useContext, useCallback } from "preact/hooks";
+import { V as Button, u as useTranslation, b6 as remediationHasFileUploadField, aD as keysOf } from "./StoreProvider-CISxF69y.js";
+import { a as Alert } from "./Alert-BfbfHD1i.js";
+import { createContext } from "preact";
+const errorPanel = "adyen-kyc-error-panel";
+const styles = {
+  errorPanel
+};
+const FormRouterContext = createContext(null);
+function useFormRouterContext() {
+  const context = useContext(FormRouterContext);
+  return context;
+}
+const NavigateToFieldLink = ({ fieldName, label }) => {
+  const { goToFormByFieldName } = useFormRouterContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => {
+        goToFormByFieldName(fieldName);
+      },
+      variant: "link",
+      children: label
+    }
+  );
+};
+function ServerValidationErrors({
+  validationErrors,
+  formUtils
+}) {
+  const { t } = useTranslation("ui");
+  const validationErrorFieldNames = Object.keys(validationErrors || {});
+  const getValidationErrorMessage = useCallback(
+    () => t(($) => $["fieldHasUnsupportedFormats"], {
+      fieldName: formUtils.getLabel(validationErrorFieldNames[0])
+    }),
+    [t, formUtils, validationErrorFieldNames]
+  );
+  return /* @__PURE__ */ jsx(Alert, { title: t(($) => $["informationCouldNotBeSubmitted"]), variant: "error", children: validationErrorFieldNames?.length === 1 ? /* @__PURE__ */ jsxs("div", { "data-testid": "validation-error--case-1", children: [
+    getValidationErrorMessage(),
+    " ",
+    /* @__PURE__ */ jsx(
+      NavigateToFieldLink,
+      {
+        fieldName: validationErrorFieldNames[0],
+        label: t(($) => $["updateTheInformation"])
+      }
+    ),
+    " ",
+    t(($) => $["andResubmit"])
+  ] }) : /* @__PURE__ */ jsxs("div", { "data-testid": "validation-error--case-2", children: [
+    t(($) => $["someFieldsHaveUnsupportedFormatedUpdateInfoAndResubmit"]),
+    /* @__PURE__ */ jsx("ul", { children: validationErrorFieldNames.map((fieldName) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: "adyen-kyc-error-panel__validation-error",
+        "data-testid": "adyen-kyc-error-panel__validation-error",
+        children: /* @__PURE__ */ jsx(NavigateToFieldLink, { fieldName, label: formUtils.getLabel(fieldName) })
+      },
+      fieldName
+    )) })
+  ] }) });
+}
+function VerificationErrors({
+  verificationErrors,
+  formUtils
+}) {
+  const { t } = useTranslation("common");
+  const getErrorMessage = (errorCode) => t(($) => $[`errorMessage_${errorCode}`]);
+  const getRemediationMessage = (remediationActions, uploadFieldCollection) => {
+    const uploadFields = uploadFieldCollection ? Object.keys(uploadFieldCollection) : [];
+    if (remediationActions?.length === 1 && uploadFields.length === 1) {
+      const firstUploadField = uploadFields[0];
+      const label = t(
+        ($) => $[`remediationMessage_${uploadFieldCollection[firstUploadField]?.remediation.code}`]
+      );
+      return /* @__PURE__ */ jsx(NavigateToFieldLink, { fieldName: firstUploadField, label });
+    }
+    if (remediationActions?.length === 1) {
+      return t(($) => $[`remediationMessage_${remediationActions[0].code}`]);
+    }
+    let uploadFilesCopy;
+    if (uploadFields.length > 0) {
+      if (uploadFields.length > 1) {
+        const uploadFieldListItems = uploadFields.map((uploadField) => /* @__PURE__ */ jsx(
+          NavigateToFieldLink,
+          {
+            fieldName: uploadField,
+            label: t(
+              ($) => $[`remediationMessage_${uploadFieldCollection[uploadField]?.remediation.code}`]
+            )
+          },
+          uploadField
+        ));
+        uploadFilesCopy = /* @__PURE__ */ jsxs(Fragment, { children: [
+          formUtils.getLabel("uploadTheFollowingDocuments"),
+          /* @__PURE__ */ jsx("ul", { children: uploadFieldListItems.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) })
+        ] });
+      } else {
+        const firstUploadField = uploadFields[0];
+        const label = ` ${t(
+          ($) => $[`remediationMessage_${uploadFieldCollection[firstUploadField]?.remediation.code}`]
+        )?.toLowerCase()}`;
+        uploadFilesCopy = /* @__PURE__ */ jsx(NavigateToFieldLink, { fieldName: firstUploadField, label });
+      }
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      t(($) => $["reviewTheInformationBelowAndCorrectMistakesOr"]),
+      " ",
+      uploadFilesCopy,
+      " ",
+      t(($) => $["thenResubmit"])
+    ] });
+  };
+  let verificationErrorMsg;
+  let parentCode = void 0;
+  const parentCodes = keysOf(verificationErrors);
+  if (parentCodes.length === 1) {
+    parentCode = parentCodes[0];
+  }
+  const childErrors = Object.values(verificationErrors).reduce(
+    (acc, parentChildErrors) => ({
+      ...acc,
+      ...parentChildErrors
+    }),
+    {}
+  );
+  const childErrorCodes = Object.keys(childErrors);
+  const fileUploadRemediationFields = Object.values(childErrors).flat().reduce((acc, rem) => {
+    const isRemUploadOne = remediationHasFileUploadField(rem);
+    const firstRemediationField = rem.fields?.[0];
+    if (isRemUploadOne && firstRemediationField) {
+      acc[firstRemediationField] = {
+        formName: rem?.forms[0],
+        remediation: rem
+      };
+    }
+    return acc;
+  }, {});
+  const onlyChildRemediationActions = Object.values(childErrors).flat();
+  if (childErrorCodes.length === 1) {
+    verificationErrorMsg = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `verification-error--case-${onlyChildRemediationActions.length === 1 ? "1" : "2-1"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: `${getErrorMessage(childErrorCodes[0])} ` }),
+          /* @__PURE__ */ jsx("span", { children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields) })
+        ]
+      }
+    );
+  } else if (childErrorCodes.length === 2) {
+    verificationErrorMsg = /* @__PURE__ */ jsxs("div", { "data-testid": "verification-error--case-2-2", children: [
+      t(($) => $["weFoundTheFollowingIssues"]),
+      /* @__PURE__ */ jsx("ul", { children: childErrorCodes.map((subErrorCode) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { children: getErrorMessage(subErrorCode) }) }, subErrorCode)) }),
+      /* @__PURE__ */ jsx("span", { children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields) })
+    ] });
+  } else {
+    verificationErrorMsg = /* @__PURE__ */ jsx("div", { "data-testid": "verification-error--case-2-3", children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields) });
+  }
+  const defaultHeading = parentCode ? getErrorMessage(parentCode) : t(($) => $["correctErrorsResubmit"]);
+  return /* @__PURE__ */ jsx(Alert, { title: defaultHeading, variant: "error", children: verificationErrorMsg });
+}
+function ErrorPanel({
+  id = "ariaErrorField",
+  verificationErrors,
+  validationErrors,
+  formUtils
+}) {
+  const isVerificationError = verificationErrors && Object.keys(verificationErrors).length > 0;
+  const isValidationError = validationErrors && Object.keys(validationErrors).length > 0;
+  if (!isVerificationError && !isValidationError) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.errorPanel, id, "aria-live": "polite", children: [
+    isVerificationError && !isValidationError && /* @__PURE__ */ jsx(VerificationErrors, { formUtils, verificationErrors }),
+    isValidationError && /* @__PURE__ */ jsx(ServerValidationErrors, { formUtils, validationErrors })
+  ] });
+}
+export {
+  ErrorPanel as E,
+  FormRouterContext as F,
+  useFormRouterContext as u
+};

package/dist/Field-CmNnfz5n.js

@@ -0,0 +1,141 @@
+;
+{
+  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-CISxF69y.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
+};

package/dist/FormNavigation-CfFQ7UC8.js

@@ -0,0 +1,144 @@
+;
+{
+  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] = "9757f966-c0cd-4df4-8a58-2ae57803e7b8", e._sentryDebugIdIdentifier = "sentry-dbid-9757f966-c0cd-4df4-8a58-2ae57803e7b8");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import cx from "classnames";
+import { u as useTranslation, r as Icon, p as useAnalyticsContext, z as Typography } from "./StoreProvider-CISxF69y.js";
+import { t as trackNavigation } from "./trackNavigation-db_h46BT.js";
+import { K as KEYBOARD_KEYS } from "./Modal-CrmpkeY0.js";
+const FormNavigationItem = ({
+  form,
+  isActive,
+  onClick,
+  hasVerificationErrors
+}) => {
+  const { t } = useTranslation("common");
+  const hasError = form.hasServerValidationErrors || hasVerificationErrors;
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space)) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-label": t(($) => $[form.formName]),
+      "aria-current": isActive,
+      className: cx("adyen-kyc-form-navigation__item", {
+        "adyen-kyc-form-navigation__item--active": isActive,
+        "adyen-kyc-form-navigation__item--valid": form.isValid,
+        "adyen-kyc-form-navigation__item--isnav": Boolean(onClick)
+      }),
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick,
+          onKeyDown: onClick ? handleKeyDown : void 0,
+          tabIndex: onClick ? 0 : void 0,
+          children: [
+            t(($) => $[form.formName]),
+            form.hasServerValidationErrors && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--error", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "warning" }),
+              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepInvalid"]) })
+            ] }),
+            form.isValid && !hasError && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--success", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "checkmark-small" }),
+              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepCompleted"]) })
+            ] })
+          ]
+        }
+      )
+    },
+    form.formId
+  );
+};
+function FormNavigation({
+  forms,
+  activeForm,
+  gotoForm,
+  validateForm,
+  className,
+  taskName,
+  verificationErrors
+}) {
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const taskNameTranslated = t(($) => $[taskName]);
+  const getFormIndex = (form) => forms.findIndex((f) => f.formId === form.formId);
+  const goToForm = (form) => () => {
+    if (form.formId === activeForm.formId) return;
+    gotoForm(getFormIndex(form));
+    trackNavigation({
+      userEvents,
+      actionType: "navigate",
+      toForm: form.formName,
+      label: form.formName,
+      returnValue: "success"
+    });
+  };
+  const getNavigateHandler = (form, activeForm2) => {
+    const priorForms = forms.slice(0, getFormIndex(form));
+    const allPriorFormsValid = priorForms.every((subForm) => subForm.isValid);
+    if (allPriorFormsValid || !validateForm) {
+      return goToForm(form);
+    }
+    return activeForm2.isValid ? void 0 : () => {
+      trackNavigation({
+        userEvents,
+        actionType: "navigate",
+        toForm: form.formName,
+        label: form.formName,
+        returnValue: "validation error"
+      });
+      validateForm();
+    };
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("adyen-kyc-form-navigation", className), children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        el: "h3",
+        variant: "body",
+        color: "secondary",
+        className: "adyen-kyc-form-navigation__header",
+        children: taskNameTranslated
+      }
+    ),
+    forms && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          color: "tertiary",
+          variant: "caption-stronger",
+          className: "adyen-kyc-form-navigation__step-count",
+          children: t(($) => $["stepsX/YofForm"], {
+            activeFormIndex: getFormIndex(activeForm) + 1,
+            totalForms: forms.length,
+            taskNameTranslated
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { className: "adyen-kyc-form-navigation__items", children: forms.map((form) => /* @__PURE__ */ jsx(
+        FormNavigationItem,
+        {
+          form,
+          isActive: form.formId === activeForm.formId,
+          onClick: getNavigateHandler(form, activeForm),
+          hasVerificationErrors: Boolean(verificationErrors?.[form.formId] ?? false)
+        },
+        form.formId
+      )) })
+    ] })
+  ] });
+}
+export {
+  FormNavigation as F
+};

package/dist/FormWrapper-AefMYcpB.js

@@ -0,0 +1,135 @@
+;
+{
+  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] = "1de30dca-8c1f-4ec3-88e3-df6d6d42b907", e._sentryDebugIdIdentifier = "sentry-dbid-1de30dca-8c1f-4ec3-88e3-df6d6d42b907");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useState } from "preact/hooks";
+import { u as useTranslation, p as useAnalyticsContext, v as useExperimentsContext, V as Button } from "./StoreProvider-CISxF69y.js";
+import { L as LoaderWrapper } from "./LoaderWrapper-DW2aG4g9.js";
+import { M as MaybeModal } from "./MaybeModal-Cfq9Y-Oq.js";
+import { a as ModalContent, b as ModalHeader, c as ModalFooter } from "./Modal-CrmpkeY0.js";
+import { S as Spacer } from "./Spacer-BK3jDget.js";
+import { S as StepProgressIndicator } from "./StepProgressIndicator-BlYqsR2g.js";
+import { F as FormRouterContextProvider } from "./dropinUtils-CAiDwa5U.js";
+import { F as FormNavigation } from "./FormNavigation-CfFQ7UC8.js";
+import { s as summaryStep, S as Summary } from "./Summary-hZQMYY8b.js";
+const FormWrapper = ({
+  asModal = false,
+  summary,
+  taskName,
+  children,
+  handleNextClick,
+  handleBackClick,
+  handleCloseClick,
+  handleHomeClick,
+  loadingStatus,
+  gotoFormByFormIndex,
+  forms,
+  activeForm,
+  validateForm,
+  hideSidebar,
+  hideFooter,
+  canSubmit,
+  onSubmit,
+  problems,
+  steps,
+  showBackButton,
+  hideNextButton,
+  hideHomeButton
+}) => {
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const { data: summaryData, omitted, labels } = summary || {};
+  const [finishLaterLoading, setFinishLaterLoading] = useState(false);
+  const showLegalCaption = ["solePropDetails", "companyDetails", "businessDetails"].includes(
+    taskName
+  );
+  const { isExperimentEnabled } = useExperimentsContext();
+  const showExtraTaxExemptionReasons = isExperimentEnabled("ShowExtraTaxExemptionReasons");
+  const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && summaryData?.companyRegistrationDetails?.vatAbsenceReason && ["companyDetails", "businessDetails"].includes(taskName);
+  const summaryContent = /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-wrapper", children: /* @__PURE__ */ jsx(
+    Summary,
+    {
+      data: summaryData,
+      omitted,
+      forms,
+      gotoForm: gotoFormByFormIndex,
+      labels,
+      problems,
+      showLegalCaption,
+      showTaxExemptedLegalCaption
+    }
+  ) });
+  const onHomeClick = () => {
+    setFinishLaterLoading(true);
+    userEvents.addPageEvent("Clicked button", {
+      actionType: "save",
+      label: "finishLater"
+    });
+    if (canSubmit) {
+      onSubmit().then(() => {
+        setFinishLaterLoading(false);
+      });
+    } else {
+      handleHomeClick?.();
+      setFinishLaterLoading(false);
+    }
+  };
+  const isFirstStep = steps.current === 0;
+  const isFinalStep = steps.current === steps.total - 1;
+  return /* @__PURE__ */ jsxs(MaybeModal, { inline: !asModal, onClose: handleCloseClick, size: "large", children: [
+    /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsx(ModalHeader, {}),
+      /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: 0.3, loaderSize: "large", children: /* @__PURE__ */ jsxs("div", { className: !hideSidebar ? "adyen-kyc-form-with-sidebar" : "", children: [
+        !asModal && !hideSidebar && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropin__sidebar-wrapper", children: /* @__PURE__ */ jsx(
+          FormNavigation,
+          {
+            forms,
+            activeForm,
+            gotoForm: gotoFormByFormIndex,
+            validateForm,
+            taskName,
+            verificationErrors: problems?.verificationErrors
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(FormRouterContextProvider, { setFormIndex: gotoFormByFormIndex, forms, children: [
+          children,
+          activeForm.formId === summaryStep.formId && summary && summaryContent
+        ] })
+      ] }) })
+    ] }),
+    !hideFooter && /* @__PURE__ */ jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsx("div", { style: { width: "30%", display: asModal ? "unset" : "none" }, children: /* @__PURE__ */ jsx(
+        StepProgressIndicator,
+        {
+          activeStepIndex: steps.current ?? 0,
+          stepsCount: steps.total,
+          fillBefore: true,
+          thick: true
+        }
+      ) }),
+      (!isFirstStep || showBackButton) && handleBackClick && /* @__PURE__ */ jsx(Button, { icon: "chevron-left", variant: "secondary", onClick: handleBackClick, children: t(($) => $["back"]) }),
+      /* @__PURE__ */ jsx(Spacer, {}),
+      !isFirstStep && !isFinalStep && !hideHomeButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          icon: "save",
+          onClick: onHomeClick,
+          loading: finishLaterLoading,
+          children: t(($) => $["finishLater"])
+        }
+      ),
+      !isFinalStep && !hideNextButton && /* @__PURE__ */ jsx(Button, { onClick: handleNextClick, children: t(($) => $["continue"]) }),
+      isFinalStep && /* @__PURE__ */ jsx(Button, { onClick: handleNextClick, children: t(($) => $["submit"]) })
+    ] })
+  ] });
+};
+export {
+  FormWrapper as F
+};