@adyen/kyc-components 3.71.3 → 3.73.0-beta.0

package/dist/FormNavigation-W4SYacAX.js

@@ -0,0 +1,205 @@
+;
+{
+  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] = "c70babdd-f1e8-4115-b319-e741a7749815", e._sentryDebugIdIdentifier = "sentry-dbid-c70babdd-f1e8-4115-b319-e741a7749815");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import cx from "classnames";
+import { b as useI18nContext, T as Typography, de as globalStyles, N as Icon, cQ as KEYBOARD_KEYS, x as useAnalyticsContext, ak as noop } from "./EventEmitter-BmWcyurq.js";
+const range = (stop, start = 0, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+const progressBar = "adyen-kyc-progress-bar";
+const progressBarThick = "adyen-kyc-progress-bar-thick";
+const progressStep = "adyen-kyc-progress-step";
+const progressStepActive = "adyen-kyc-progress-step-active";
+const progressBarCircles = "adyen-kyc-progress-bar-circles";
+const styles = {
+  progressBar,
+  progressBarThick,
+  progressStep,
+  progressStepActive,
+  progressBarCircles
+};
+const shouldHighlight = (active, current, fillBefore) => !fillBefore ? active === current : active >= current;
+const StepProgressIndicator = ({
+  activeStepIndex,
+  stepsCount,
+  fillBefore,
+  thick,
+  circles
+}) => {
+  const { i18n } = useI18nContext();
+  if (stepsCount === 0 || stepsCount > 10) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "caption", children: i18n.get("XOfYSteps", {
+      values: { currentStep: activeStepIndex, totalSteps: stepsCount }
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": `Step ${activeStepIndex} of ${stepsCount}`,
+      className: styles.progress,
+      role: "group",
+      children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          className: cx(styles.progressBar, {
+            [styles.progressBarThick]: thick,
+            [styles.progressBarCircles]: circles
+          }),
+          children: range(stepsCount).map((stepNumber) => {
+            const isHighlighted = shouldHighlight(activeStepIndex, stepNumber, fillBefore);
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                "aria-current": isHighlighted ? "step" : void 0,
+                className: cx(styles.progressStep, {
+                  [styles.progressStepActive]: isHighlighted
+                }),
+                children: /* @__PURE__ */ jsx("span", { className: globalStyles.screenReaderOnly, children: `Step ${stepNumber}: ${stepNumber < activeStepIndex ? "completed" : "not completed"}` })
+              },
+              stepNumber
+            );
+          })
+        }
+      )
+    }
+  );
+};
+const FormNavigationItem = ({
+  form,
+  isActive,
+  onClick,
+  hasVerificationErrors
+}) => {
+  const { i18n } = useI18nContext();
+  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": i18n.get(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: [
+            i18n.get(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: globalStyles.screenReaderOnly, children: i18n.get("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: globalStyles.screenReaderOnly, children: i18n.get("formStepCompleted") })
+            ] })
+          ]
+        }
+      )
+    },
+    form.formId
+  );
+};
+function FormNavigation({
+  forms,
+  activeForm,
+  gotoForm,
+  validateForm,
+  className,
+  taskName,
+  verificationErrors,
+  trackNavigation = noop
+}) {
+  const { i18n } = useI18nContext();
+  const userEvents = useAnalyticsContext();
+  const taskNameTranslated = i18n.get(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: i18n.get("stepsX/YofForm", {
+            values: {
+              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 == null ? void 0 : verificationErrors[form.formId]) ?? false)
+        },
+        form.formId
+      )) })
+    ] })
+  ] });
+}
+export {
+  FormNavigation as F,
+  StepProgressIndicator as S
+};

package/dist/{HASRA6WW-CBmvzSwj.js → HASRA6WW-Cj_9-H1H.js}

@@ -5,12 +5,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 {
   try {
     let e2 = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n2 = new e2.Error().stack;
-    n2 && (e2._sentryDebugIds = e2._sentryDebugIds || {}, e2._sentryDebugIds[n2] = "1844a2e0-88a2-4f4b-86b5-a2a762cd8934", e2._sentryDebugIdIdentifier = "sentry-dbid-1844a2e0-88a2-4f4b-86b5-a2a762cd8934");
+    n2 && (e2._sentryDebugIds = e2._sentryDebugIds || {}, e2._sentryDebugIds[n2] = "47ca2965-8b4a-4eaf-a629-019d5aaf2fec", e2._sentryDebugIdIdentifier = "sentry-dbid-47ca2965-8b4a-4eaf-a629-019d5aaf2fec");
   } catch (e2) {
   }
 }
 ;
-import { ed as createContext, ee as createSignal, ef as onMount, eg as createEffect, eb as createMemo, ec as createComponent, eh as Portal, ei as Show, ej as template, ek as insert, el as createRenderEffect, em as className, en as clearDelegatedEvents, eo as delegateEvents, ep as useContext, eq as onCleanup, er as sortFns, es as mutationSortFns, et as on, eu as setAttribute, ev as getSidedProp, ew as use, ex as createUniqueId, ey as batch, ez as getQueryStatusLabel, eA as getMutationStatusColor, eB as getQueryStatusColor, eC as getQueryStatusColorByLabel, eD as displayValue, eE as For, eF as convertRemToPixels, eG as untrack, eH as $TRACK, eI as useTransition, eJ as spread, eK as mergeProps, eL as createRoot, eM as serialize, eN as Index, eO as updateNestedDataByPath, eP as addEventListener, eQ as stringify, eR as Match, eS as Switch, eT as deleteNestedDataByPath, eU as splitProps, eV as Dynamic, eW as createComputed } from "./EventEmitter-DTdpTyY7.js";
+import { e4 as createContext, e5 as createSignal, e6 as onMount, e7 as createEffect, e2 as createMemo, e3 as createComponent, e8 as Portal, e9 as Show, ea as template, eb as insert, ec as createRenderEffect, ed as className, ee as clearDelegatedEvents, ef as delegateEvents, eg as useContext, eh as onCleanup, ei as sortFns, ej as mutationSortFns, ek as on, el as setAttribute, em as getSidedProp, en as use, eo as createUniqueId, ep as batch, eq as getQueryStatusLabel, er as getMutationStatusColor, es as getQueryStatusColor, et as getQueryStatusColorByLabel, eu as displayValue, ev as For, ew as convertRemToPixels, ex as untrack, ey as $TRACK, ez as useTransition, eA as spread, eB as mergeProps, eC as createRoot, eD as serialize, eE as Index, eF as updateNestedDataByPath, eG as addEventListener, eH as stringify, eI as Match, eJ as Switch, eK as deleteNestedDataByPath, eL as splitProps, eM as Dynamic, eN as createComputed } from "./EventEmitter-BmWcyurq.js";
 var isNonNullable = (i2) => i2 != null;
 var filterNonNullable = (arr) => arr.filter(isNonNullable);
 function chain(callbacks) {

package/dist/{I3HPI4QX-9ko0FQd6.js → I3HPI4QX-CCkDLYPH.js}

@@ -2,13 +2,13 @@
 {
   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] = "fc442f62-1135-4a4d-9537-41106d865c5e", e._sentryDebugIdIdentifier = "sentry-dbid-fc442f62-1135-4a4d-9537-41106d865c5e");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "eea8879c-c6bf-4042-b54a-a9f9c77ea004", e._sentryDebugIdIdentifier = "sentry-dbid-eea8879c-c6bf-4042-b54a-a9f9c77ea004");
   } catch (e) {
   }
 }
 ;
-import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, D as Devtools, Q as QueryDevtoolsContext } from "./HASRA6WW-CBmvzSwj.js";
-import { ea as getPreferredColorScheme, eb as createMemo, ec as createComponent } from "./EventEmitter-DTdpTyY7.js";
+import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, D as Devtools, Q as QueryDevtoolsContext } from "./HASRA6WW-Cj_9-H1H.js";
+import { e1 as getPreferredColorScheme, e2 as createMemo, e3 as createComponent } from "./EventEmitter-BmWcyurq.js";
 var DevtoolsComponent = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: "TanstackQueryDevtools"

package/dist/{Introduction-C16zT64A.js → Introduction-DlsETOX7.js}

@@ -2,17 +2,17 @@
 {
   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] = "bc1340d7-bce5-4945-8296-834ef78ee9c5", e._sentryDebugIdIdentifier = "sentry-dbid-bc1340d7-bce5-4945-8296-834ef78ee9c5");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "1f3c1d54-bc07-42e5-a838-383d3aa0376a", e._sentryDebugIdIdentifier = "sentry-dbid-1f3c1d54-bc07-42e5-a838-383d3aa0376a");
   } catch (e) {
   }
 }
 ;
 import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
 import { useMemo as useMemo$1, useState, useEffect } from "preact/hooks";
-import { ae as TaskTypes, i as LegalEntityType, ds as getTranslationKeysByPrefix, u as useI18nContext, a as useAnalyticsContext, B as Button } from "./EventEmitter-DTdpTyY7.js";
-import { S as StepProgressIndicator } from "./AcceptTermsOfServiceComponent-Dsv4mY-k.js";
+import { ah as TaskTypes, L as LegalEntityType, dj as getTranslationKeysByPrefix, b as useI18nContext, P as useLegalEntity, aq as ROOT_LE, M as Loader, x as useAnalyticsContext, O as Button } from "./EventEmitter-BmWcyurq.js";
+import { S as StepProgressIndicator } from "./FormNavigation-W4SYacAX.js";
 import { useMemo } from "preact/compat";
-import { u as useCanSeeIntroduction, a as useLegalEntityType } from "./core-BsRrVyKB.js";
+import { u as useCanSeeIntroduction, a as useLegalEntityType } from "./index-D6YGuPb5.js";
 import { t as toCapitalized } from "./toCapitalized-Bq7laD0b.js";
 var IntroductionScreens = ((IntroductionScreens2) => {
   IntroductionScreens2["PROLOGUE"] = "PROLOGUE";
@@ -135,7 +135,14 @@ const IntroductionScreen = ({
     ] })
   ] });
 };
-const Introduction = ({
+function Introduction({ onExitIntroduction, tasks }) {
+  const { data: rootLe, isLoading } = useLegalEntity(ROOT_LE);
+  if (isLoading || !rootLe) {
+    return /* @__PURE__ */ jsx(Loader, { size: "large" });
+  }
+  return /* @__PURE__ */ jsx(IntroductionInner, { legalEntity: rootLe, onExitIntroduction, tasks });
+}
+const IntroductionInner = ({
   legalEntity,
   onExitIntroduction,
   tasks
@@ -243,5 +250,6 @@ const Introduction = ({
   ] }) : null;
 };
 export {
-  Introduction
+  Introduction,
+  IntroductionInner
 };

package/dist/LegalRepresentativeDetailsPage-Dbp83K05.js

@@ -0,0 +1,55 @@
+;
+{
+  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] = "61076609-0091-44dc-94c4-890c3239d2cc", e._sentryDebugIdIdentifier = "sentry-dbid-61076609-0091-44dc-94c4-890c3239d2cc");
+  } catch (e) {
+  }
+}
+;
+import { jsx } from "preact/jsx-runtime";
+import { P as useLegalEntity, a6 as skipToken, aq as ROOT_LE, al as useExperimentsContext, M as Loader, Q as getLegalEntityCountry, af as EntityType, ah as TaskTypes, ak as noop } from "./EventEmitter-BmWcyurq.js";
+import { b as useCapabilityProblems, k as getProblemsForEntity, m as isOnfidoAutofillFlowEnabled, I as IndividualOnfidoDropin, n as IndividualDropin } from "./CreateIndividualComponent-BiMYdvQq.js";
+function LegalRepresentativeDetailsPage({
+  legalRepresentativeId,
+  asModal = false,
+  hideSidebar = false,
+  onSubmit,
+  /** below from {@link DropinProps} */
+  handleBackClick,
+  handleCloseClick,
+  handleHomeClick = noop
+}) {
+  const { data: legalRepresentativeLe } = useLegalEntity(legalRepresentativeId ?? skipToken);
+  const { data: rootLe } = useLegalEntity(ROOT_LE);
+  const capabilityProblems = useCapabilityProblems();
+  const { isExperimentEnabled } = useExperimentsContext();
+  if (!rootLe || legalRepresentativeId && !legalRepresentativeLe) {
+    return /* @__PURE__ */ jsx(Loader, {});
+  }
+  const country = getLegalEntityCountry(legalRepresentativeLe ?? rootLe);
+  const problems = capabilityProblems ? getProblemsForEntity(capabilityProblems, EntityType.LEGAL_ENTITY, rootLe.id) : void 0;
+  const isOnfidoAutofillFlow = isOnfidoAutofillFlowEnabled(
+    country,
+    TaskTypes.LEGAL_REPRESENTATIVE_DETAILS,
+    isExperimentEnabled
+  );
+  const props = {
+    taskType: TaskTypes.LEGAL_REPRESENTATIVE_DETAILS,
+    taskName: "legalRepresentativeDetails",
+    legalEntityResponse: legalRepresentativeLe,
+    parentLegalEntity: rootLe,
+    problems,
+    country,
+    asModal,
+    hideSidebar,
+    onSubmit,
+    handleBackClick,
+    handleCloseClick,
+    handleHomeClick
+  };
+  return isOnfidoAutofillFlow ? /* @__PURE__ */ jsx(IndividualOnfidoDropin, { ...props }) : /* @__PURE__ */ jsx(IndividualDropin, { ...props });
+}
+export {
+  LegalRepresentativeDetailsPage
+};

package/dist/ManageIndividualComponent-D-47IZH6.js

@@ -0,0 +1,190 @@
+;
+{
+  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] = "231699ce-42da-41f5-b3ac-ca042f63f50f", e._sentryDebugIdIdentifier = "sentry-dbid-231699ce-42da-41f5-b3ac-ca042f63f50f");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { u as useApiContext, a as useQuery, h as httpGet, N as Icon, a0 as TaskStatus, b as useI18nContext, a8 as Skeleton, T as Typography, P as useLegalEntity, aq as ROOT_LE } from "./EventEmitter-BmWcyurq.js";
+import cx from "classnames";
+import { T as Tag } from "./Tag-DdkVScyr.js";
+const getOnboardingStatus = async (legalEntityId, baseUrl) => {
+  return httpGet({
+    baseUrl,
+    path: `legalEntities/${legalEntityId}/onboardingStatus`
+  });
+};
+const useOnboardingStatus = (options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useQuery({
+    queryKey: ["onboardingStatus"],
+    queryFn: () => getOnboardingStatus(rootLegalEntityId.value, baseUrl.value),
+    ...options
+  });
+};
+var OnboardingStatus = /* @__PURE__ */ ((OnboardingStatus2) => {
+  OnboardingStatus2["AWAITING_DATA"] = "AWAITING_DATA";
+  OnboardingStatus2["IN_REVIEW"] = "IN_REVIEW";
+  OnboardingStatus2["UNSUCCESSFUL"] = "UNSUCCESSFUL";
+  OnboardingStatus2["REJECTED"] = "REJECTED";
+  OnboardingStatus2["VERIFIED"] = "VERIFIED";
+  return OnboardingStatus2;
+})(OnboardingStatus || {});
+const avatar = "adyen-kyc-avatar";
+const avatarLabel = "adyen-kyc-avatar-label";
+const avatarPrimary = "adyen-kyc-avatar-primary";
+const avatarSecondary = "adyen-kyc-avatar-secondary";
+const avatarTertiary = "adyen-kyc-avatar-tertiary";
+const avatarImage = "adyen-kyc-avatar-image";
+const avatarDisabled = "adyen-kyc-avatar-disabled";
+const avatarShapeSquare = "adyen-kyc-avatar-shape-square";
+const avatarShapeCircle = "adyen-kyc-avatar-shape-circle";
+const styles$1 = {
+  avatar,
+  avatarLabel,
+  avatarPrimary,
+  avatarSecondary,
+  avatarTertiary,
+  avatarImage,
+  avatarDisabled,
+  avatarShapeSquare,
+  avatarShapeCircle
+};
+const Avatar = ({
+  circle = false,
+  iconName,
+  imageUrl,
+  label,
+  variant = "secondary"
+}) => {
+  const isImage = imageUrl !== void 0;
+  const isIcon = iconName !== void 0;
+  const variantStyles = {
+    disabled: styles$1.avatarDisabled,
+    primary: styles$1.avatarPrimary,
+    secondary: styles$1.avatarSecondary,
+    tertiary: styles$1.avatarTertiary
+  };
+  const className = cx(styles$1.avatar, variantStyles[variant], {
+    [styles$1.avatarShapeCircle]: circle,
+    [styles$1.avatarShapeSquare]: !circle,
+    [styles$1.avatarImage]: isImage
+  });
+  const backgroundImageStyle = {
+    backgroundImage: isImage ? `url(${imageUrl})` : "unset"
+  };
+  return /* @__PURE__ */ jsx("div", { "aria-label": label, className, style: backgroundImageStyle, role: "img", children: isIcon ? /* @__PURE__ */ jsx(Icon, { name: iconName }) : /* @__PURE__ */ jsx("span", { className: styles$1.avatarLabel, children: label }) });
+};
+const embeddedStatus = "adyen-kyc-embedded-status";
+const embeddedStatusLoading = "adyen-kyc-embedded-status-loading";
+const embeddedStatusActionIndicator = "adyen-kyc-embedded-status-action-indicator";
+const embeddedStatusInfo = "adyen-kyc-embedded-status-info";
+const styles = {
+  embeddedStatus,
+  embeddedStatusLoading,
+  embeddedStatusActionIndicator,
+  embeddedStatusInfo
+};
+const statusToTag = (status) => {
+  switch (status) {
+    case OnboardingStatus.IN_REVIEW:
+      return { translationKey: "inReview", variant: "grey" };
+    case TaskStatus.FINISHED:
+    case OnboardingStatus.VERIFIED:
+      return { translationKey: "verified", variant: "green" };
+    case TaskStatus.SIGNED:
+      return { translationKey: "signed", variant: "green" };
+    case OnboardingStatus.REJECTED:
+      return { translationKey: "rejected", variant: "red" };
+    case TaskStatus.ERROR:
+      return { translationKey: "actionNeeded", variant: "red" };
+    case TaskStatus.PROCESSING:
+    case OnboardingStatus.AWAITING_DATA:
+      return { translationKey: "inReview", variant: "grey" };
+    case OnboardingStatus.UNSUCCESSFUL:
+      return { translationKey: "unsuccessful", variant: "red" };
+    default:
+      return void 0;
+  }
+};
+const EmbeddedStatus = ({
+  title,
+  subtitle,
+  status,
+  iconName = "user",
+  loading = false,
+  tagLabel,
+  tagVariant = "green",
+  onClick,
+  light = false,
+  className,
+  actionIndicator,
+  ...props
+}) => {
+  const { i18n } = useI18nContext();
+  const statusTag = status ? statusToTag(status) : { translationKey: tagLabel, variant: tagVariant };
+  const avatarVariant = light ? "tertiary" : "secondary";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cx(className, styles.embeddedStatus, "adyen-kyc-externalComponent", {
+        [styles.embeddedStatusLoading]: loading,
+        [styles.embeddedStatusLight]: light
+      }),
+      onClick,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Skeleton, { height: "44px", width: "44px", circle: true }) : /* @__PURE__ */ jsx(Avatar, { iconName, variant: avatarVariant, circle: true }),
+        /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusInfo, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { text: true, width: "20ch", height: "1em" }),
+          /* @__PURE__ */ jsx(Skeleton, { text: true, width: "90%", height: "1em" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", el: "h3", children: title }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", el: "div", children: subtitle })
+        ] }) }),
+        actionIndicator ? /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusButton, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "5em", height: "2em" }) : /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", className: styles.embeddedStatusActionIndicator, children: i18n.get(actionIndicator.labelKey) }) }) : (statusTag == null ? void 0 : statusTag.translationKey) && /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusTag, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: i18n.get(statusTag.translationKey) }) })
+      ]
+    }
+  );
+};
+function ManageIndividualComponent({
+  legalEntityId,
+  onClick
+}) {
+  var _a, _b;
+  const { rootLegalEntityId: currentLegalEntityId } = useApiContext();
+  currentLegalEntityId.value = legalEntityId;
+  const { data: legalEntityData } = useLegalEntity(ROOT_LE);
+  const { isPending, data: onboardingStatusData } = useOnboardingStatus({
+    refetchInterval: (res) => {
+      var _a2;
+      return ((_a2 = res.state.data) == null ? void 0 : _a2.status) === OnboardingStatus.AWAITING_DATA ? 3e3 : false;
+    }
+  });
+  const name = (_a = legalEntityData == null ? void 0 : legalEntityData.individual) == null ? void 0 : _a.name;
+  const fullName = name ? `${name.firstName} ${name.lastName}` : "";
+  const subtitle = ((_b = legalEntityData == null ? void 0 : legalEntityData.individual) == null ? void 0 : _b.email) ?? "";
+  const status = onboardingStatusData == null ? void 0 : onboardingStatusData.status;
+  return /* @__PURE__ */ jsx(
+    EmbeddedStatus,
+    {
+      onClick,
+      title: fullName,
+      subtitle,
+      status,
+      loading: isPending
+    }
+  );
+}
+export {
+  Avatar as A,
+  EmbeddedStatus as E,
+  ManageIndividualComponent as M,
+  OnboardingStatus as O,
+  statusToTag as s,
+  useOnboardingStatus as u
+};

package/dist/Modal-6j0jkYFX.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] = "dfd837da-878b-4221-b8f7-9f6472baa4c3", e._sentryDebugIdIdentifier = "sentry-dbid-dfd837da-878b-4221-b8f7-9f6472baa4c3");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import cx from "classnames";
+import { useRef, useLayoutEffect } from "preact/hooks";
+import { $ as IconButton, cQ as KEYBOARD_KEYS } from "./EventEmitter-BmWcyurq.js";
+const modal = "adyen-kyc-modal";
+const modalBody = "adyen-kyc-modal-body";
+const modalBodyHeight = "adyen-kyc-modal-body-height";
+const modalTransitionSlideIn = "adyen-kyc-modal-transition-slide-in";
+const modalTransitionDropIn = "adyen-kyc-modal-transition-drop-in";
+const modalInset = "adyen-kyc-modal-inset";
+const modalSmall = "adyen-kyc-modal-small";
+const modalMedium = "adyen-kyc-modal-medium";
+const modalLarge = "adyen-kyc-modal-large";
+const modalFullscreen = "adyen-kyc-modal-fullscreen";
+const modalButton = "adyen-kyc-modal-button";
+const modalHeader = "adyen-kyc-modal-header";
+const modalContent = "adyen-kyc-modal-content";
+const modalFooter = "adyen-kyc-modal-footer";
+const styles = {
+  modal,
+  modalBody,
+  modalBodyHeight,
+  modalTransitionSlideIn,
+  modalTransitionDropIn,
+  modalInset,
+  modalSmall,
+  modalMedium,
+  modalLarge,
+  modalFullscreen,
+  modalButton,
+  modalHeader,
+  modalContent,
+  modalFooter
+};
+const Modal = ({
+  ariaLabel,
+  children,
+  inset = false,
+  onClose,
+  showCloseButton = true,
+  size = "medium",
+  transition = "slideIn"
+}) => {
+  const dialogRef = useRef(null);
+  const shouldShowCloseButton = onClose !== void 0 && showCloseButton;
+  useLayoutEffect(() => {
+    const dialogElement = dialogRef.current;
+    if (!dialogElement) return;
+    const handleCancel = (event) => {
+      event.preventDefault();
+      onClose == null ? void 0 : onClose();
+    };
+    const handleKeydown = (event) => {
+      if (event.key !== KEYBOARD_KEYS.escape) return;
+      event.preventDefault();
+      onClose == null ? void 0 : onClose();
+    };
+    try {
+      document.addEventListener("keydown", handleKeydown);
+      dialogElement.addEventListener("cancel", handleCancel);
+      dialogElement.showModal();
+    } catch {
+      console.warn(
+        "Could not call `showModal()` on the <dialog>; likely it was already removed from the document."
+      );
+      return;
+    }
+    dialogElement.focus();
+    dialogElement.blur();
+    return () => {
+      dialogElement.removeEventListener("cancel", handleCancel);
+      document.removeEventListener("keydown", handleKeydown);
+      dialogElement.close();
+    };
+  }, []);
+  const transitionStyle = {
+    slideIn: styles.modalTransitionSlideIn,
+    dropIn: styles.modalTransitionDropIn
+  };
+  const sizeStyle = {
+    small: styles.modalSmall,
+    medium: styles.modalMedium,
+    large: styles.modalLarge,
+    fullscreen: styles.modalFullscreen
+  };
+  const rootClassname = cx(styles.modal, transitionStyle[transition], sizeStyle[size]);
+  const bodyClassname = cx(styles.modalBody, {
+    [styles.modalInset]: inset === true,
+    [styles.modalBodyHeight]: size !== "small"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `html,body { overflow: hidden !important; }` }),
+    /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        "aria-label": ariaLabel,
+        "aria-modal": "true",
+        className: rootClassname,
+        onClose,
+        ref: dialogRef,
+        children: [
+          shouldShowCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modalButton, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              ariaLabel: "Close",
+              circle: true,
+              icon: "cross",
+              onClick: onClose,
+              variant: "surface"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: bodyClassname, "data-testid": "modal-body", children })
+        ]
+      }
+    )
+  ] });
+};
+const ModalHeader = ({ children }) => /* @__PURE__ */ jsx("header", { className: styles.modalHeader, children });
+const ModalContent = ({ children }) => /* @__PURE__ */ jsx("section", { className: styles.modalContent, children });
+const ModalFooter = ({ children }) => /* @__PURE__ */ jsx("footer", { className: styles.modalFooter, children });
+export {
+  Modal as M,
+  ModalHeader as a,
+  ModalContent as b,
+  ModalFooter as c
+};