@adyen/kyc-components 2.6.1 → 2.7.0

package/dist/es/adyen-kyc-components.es.js

@@ -1,5 +1,5 @@
 import { useContext, useState, useCallback, useEffect, useMemo, useReducer, useLayoutEffect, useRef as useRef$1, useId as useId$1 } from "preact/hooks";
-import { createContext, createElement, Component, toChildArray, render } from "preact";
+import { createContext, createElement, toChildArray, render } from "preact";
 import cx from "classnames";
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import { useId, useRef, useMemo as useMemo$1, forwardRef, memo } from "preact/compat";
@@ -499,7 +499,7 @@ const createLogger = (namespace) => {
   });
   return methods;
 };
-const logger$i = createLogger("Link");
+const logger$j = createLogger("Link");
 const getIconClass = (icon, external) => {
   if (external) {
     return "adl-link__icon adyen-kyc-icon-external-link";
@@ -511,7 +511,7 @@ const getIconClass = (icon, external) => {
 };
 const isValidLink = (href) => {
   if (href === "#") {
-    logger$i.error('Links must include a valid href. If your href is "#", consider using a Button instead');
+    logger$j.error('Links must include a valid href. If your href is "#", consider using a Button instead');
     return false;
   }
   return true;
@@ -1104,7 +1104,7 @@ class ValidationResult {
     return this.validationResults.filter((result) => result.hasError);
   }
 }
-const logger$h = createLogger("useAsyncValidator");
+const logger$i = createLogger("useAsyncValidator");
 const useAsyncValidator = (asyncRules) => {
   const [asyncValidationResults, setAsyncValidationResults] = useState({});
   const clearAsyncValidationResults = useCallback(() => setAsyncValidationResults({}), []);
@@ -1127,7 +1127,7 @@ const useAsyncValidator = (asyncRules) => {
           hasError: !isValid
         }])
       });
-    }).catch(logger$h.error);
+    }).catch(logger$i.error);
   }, [asyncRules, clearAsyncValidationResults]);
   return {
     asyncValidationResults,
@@ -5146,7 +5146,7 @@ function datasetUtilities(locale) {
     getDatasetKey: (identifier) => createDatasetKey(identifier, locale)
   };
 }
-const logger$g = createLogger("CountryField");
+const logger$h = createLogger("CountryField");
 function CountryField({
   allowedCountries = [],
   classNameModifiers = [],
@@ -5167,7 +5167,7 @@ function CountryField({
     dataset: countriesFromApi
   } = useDataset(datasetIdentifier.country);
   useEffect(() => {
-    loadFlags2().catch(logger$g.error);
+    loadFlags2().catch(logger$h.error);
   }, [loadFlags2]);
   const countries = countriesFromApi.filter((country2) => allowedCountries.length ? allowedCountries.includes(country2.id) : true).map((item) => ({
     ...item,
@@ -6293,7 +6293,7 @@ const accountHolderValidationRules = {
   }
 };
 const accountHolderFields = ["accountHolder"];
-const logger$f = createLogger("AccountHolder");
+const logger$g = createLogger("AccountHolder");
 function getAvailableAccountHolderOptions(legalEntityType, isChangeOfLegalEntityTypeAllowed, isTrustFlowEnabled, isSoleProprietorshipAllowed, isChangeToMyNameAllowed) {
   switch (legalEntityType) {
     case LegalEntityType.ORGANIZATION: {
@@ -6303,7 +6303,7 @@ function getAvailableAccountHolderOptions(legalEntityType, isChangeOfLegalEntity
       return [...isChangeToMyNameAllowed ? ["myName"] : [], ...isChangeOfLegalEntityTypeAllowed ? ["theCompanyIWorkFor"] : [], ...isTrustFlowEnabled ? ["aTrust"] : [], ...isSoleProprietorshipAllowed ? ["mySoleTraderName"] : []];
     }
     default:
-      logger$f.error(`No available account holder options for legal entity type '${legalEntityType}'`);
+      logger$g.error(`No available account holder options for legal entity type '${legalEntityType}'`);
       return [];
   }
 }
@@ -6633,184 +6633,19 @@ const getDocumentGuidancePrefix = (documentType2, isIcon = false, isFront = true
   }
 };
 const _documentGuidance_component = "";
-const getFontFaceRule = (fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats) => {
-  const ruleLines = [`font-family: '${fontFamily}'`, `font-style: ${fontStyle}`, `font-weight: ${fontWeight}`, `src: url(${fontSrc})`];
-  const additionalSources = [];
-  if (additionalFormats.eot) {
-    additionalSources.push(`url(${additionalFormats.eot}) format('embedded-opentype')`);
-  }
-  if (additionalFormats.woff) {
-    additionalSources.push(`url(${additionalFormats.woff}) format('woff')`);
-  }
-  if (additionalFormats.woff2) {
-    additionalSources.push(`url(${additionalFormats.woff2}) format('woff2')`);
-  }
-  if (additionalFormats.ttf) {
-    additionalSources.push(`url(${additionalFormats.ttf}) format('truetype')`);
-  }
-  if (additionalFormats.otf) {
-    additionalSources.push(`url(${additionalFormats.otf}) format('opentype')`);
-  }
-  if (additionalSources.length > 0) {
-    ruleLines.push(`src: ${additionalSources.join(",")};`);
-  }
-  return `@font-face {${ruleLines.join(";")}}`;
-};
-const loadFont = (fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats) => {
-  const style = document.createElement("style");
-  style.setAttribute("type", "text/css");
-  style.innerText = getFontFaceRule(fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats);
-  document.body.insertBefore(style, document.body.firstChild);
-};
-const loadADLIconFont = (loadingContext) => {
-  const fontPath = `${loadingContext}static/fonts`;
-  const iconFontPath = `${fontPath}/adyen-kyc-icons`;
-  loadFont("adyen-kyc-icons", "normal", "normal", `${iconFontPath}.eot`, {
-    eot: `${iconFontPath}.eot`,
-    woff: `${iconFontPath}.woff`,
-    woff2: `${iconFontPath}.woff2`,
-    ttf: `${iconFontPath}.ttf`,
-    otf: `${iconFontPath}.otf`
-  });
-};
-const logger$e = createLogger("Fetch");
-const getRequestObject = (options, data) => {
-  const {
-    headers = [],
-    method = "GET",
-    sdkToken
-  } = options;
-  let authHeaders;
-  if (options.sdkToken) {
-    authHeaders = {
-      Authorization: `Bearer ${sdkToken}`,
-      Origin: window.location.origin
-    };
-  }
-  return {
-    method,
-    mode: "cors",
-    cache: "default",
-    credentials: "same-origin",
-    headers: {
-      Accept: "application/json, text/plain, */*",
-      "Content-Type": method === "POST" ? "application/json" : "text/plain",
-      ...authHeaders,
-      ...headers
-    },
-    redirect: "follow",
-    referrerPolicy: "no-referrer-when-downgrade",
-    ...data && {
-      body: JSON.stringify(data)
-    }
-  };
-};
-const getRequestUrl = (loadingContext, path, clientKey) => {
-  let url = `${loadingContext}${path}`;
-  if (clientKey) {
-    url += `?clientKey=${clientKey}`;
-  }
-  return url;
-};
-const handleFetchError = (message, level) => {
-  switch (level) {
-    case "silent":
-      break;
-    case "info":
-    case "warn":
-    case "error":
-      return logger$e[level](message);
-    default:
-      throw new Error(message);
-  }
-};
-const handleFetchResponse = async (response, responseType) => {
-  switch (responseType) {
-    case "arraybuffer":
-      return response.arrayBuffer();
-    case "blob":
-      return response.blob();
-    case "json":
-      return response.json();
-    case "text":
-      return response.text();
-  }
-};
-const http = async (options, data, responseType = "json") => {
-  const {
-    errorLevel = "warn",
-    loadingContext = "",
-    path,
-    clientKey = ""
-  } = options;
-  const request = getRequestObject(options, data);
-  const url = getRequestUrl(loadingContext, path, clientKey);
-  return fetch(url, request).then((response) => {
-    if (response.ok)
-      return handleFetchResponse(response, responseType);
-    const errorMessage = options.errorMessage || `Service at ${url} is not available`;
-    if (options.errorHandler) {
-      return options.errorHandler(handleFetchResponse(response, responseType));
-    }
-    return handleFetchError(errorMessage, errorLevel);
-  }).catch((e) => {
-    const errorMessage = options.errorMessage || `Call to ${url} failed. Error= ${e}`;
-    return handleFetchError(errorMessage, errorLevel);
-  });
-};
-const httpGet = async (options, data) => http({
-  ...options,
-  method: "GET"
-}, data);
-const httpPost = async (options, data) => http({
-  ...options,
-  method: "POST"
-}, data);
-let isFlagsLoaded = false;
-let isDocumentGuidanceLoaded = false;
-const getIconContainer = () => {
-  const container = document.createElement("div");
-  container.setAttribute("aria-hidden", "true");
-  container.setAttribute("id", "adl-icon-container");
-  container.style.height = "0";
-  return container;
-};
-const buildSpriteDOMFromResponse = (responseData) => {
-  const iconContainer = getIconContainer();
-  iconContainer.innerHTML = responseData;
-  return iconContainer;
-};
-const loadFlags = async (loadingContext) => {
-  if (isFlagsLoaded)
-    return;
-  isFlagsLoaded = true;
-  const responseData = await http({
-    loadingContext,
-    path: "static/images/country-flags.svg"
-  }, null, "text");
-  document.body.insertBefore(buildSpriteDOMFromResponse(responseData), document.body.firstChild);
-};
-const loadDocumentGuidance = async (loadingContext) => {
-  if (isDocumentGuidanceLoaded)
-    return;
-  isDocumentGuidanceLoaded = true;
-  const responseData = await http({
-    loadingContext,
-    path: "static/images/document-guidance.svg"
-  }, null, "text");
-  document.body.insertBefore(buildSpriteDOMFromResponse(responseData), document.body.firstChild);
-};
 function DocumentGuidance({
   type,
   className
 }) {
   const {
-    loadingContext,
     i18n
   } = useCoreContext();
+  const {
+    loadDocumentGuidance: loadDocumentGuidance2
+  } = useConfigurationApi();
   const [guidancePrefix, setGuidancePrefix] = useState(null);
   useEffect(() => {
-    loadDocumentGuidance(loadingContext);
+    loadDocumentGuidance2();
   }, []);
   useEffect(() => {
     setGuidancePrefix(getDocumentGuidancePrefix(type));
@@ -7198,7 +7033,7 @@ function Dropzone(props) {
     })]
   });
 }
-const logger$d = createLogger("TextArea");
+const logger$f = createLogger("TextArea");
 function TextArea(props) {
   const {
     classNameModifiers,
@@ -7219,7 +7054,7 @@ function TextArea(props) {
   } = useCoreContext();
   const [value, setValue] = useState("");
   if (Object.prototype.hasOwnProperty.call(props, "onChange")) {
-    logger$d.error("Error: Form fields that rely on InputBase may not have an onChange property");
+    logger$f.error("Error: Form fields that rely on InputBase may not have an onChange property");
   }
   const handleInput = (e) => {
     var _a;
@@ -7614,7 +7449,7 @@ function FieldContainer(props) {
   }
   return renderField(fieldName);
 }
-const logger$c = createLogger("SearchAddress");
+const logger$e = createLogger("SearchAddress");
 const SearchAddress = ({
   data,
   legalEntityId,
@@ -7640,7 +7475,7 @@ const SearchAddress = ({
       const response = await handleFindAddress(selectedAddressId);
       autocompleteAddressForm(response);
     } catch (e) {
-      logger$c.error(e);
+      logger$e.error(e);
     }
   };
   const onDrilldown = async (selectedAddress) => {
@@ -7652,7 +7487,7 @@ const SearchAddress = ({
       }, legalEntityId);
       setItems((response == null ? void 0 : response.results) || []);
     } catch (e) {
-      logger$c.error(e);
+      logger$e.error(e);
     }
   };
   const onChange = (e) => {
@@ -7707,7 +7542,7 @@ const SearchAddress = ({
           setItems([]);
         }
       } catch (e) {
-        logger$c.error(e);
+        logger$e.error(e);
       }
       setLoading(false);
     }
@@ -10859,7 +10694,7 @@ const initOnfido = async ({
     language: getOnfidoLocaleConfig(i18n)
   });
 };
-const logger$b = createLogger("IdVerificationComponent");
+const logger$d = createLogger("IdVerificationComponent");
 function IdVerificationComponent({
   userDetails,
   handleGetIdVerificationToken,
@@ -10890,7 +10725,7 @@ function IdVerificationComponent({
         onIdVerificationError,
         onIdVerificationComplete
       });
-    })().catch(logger$b.error);
+    })().catch(logger$d.error);
     return () => {
       if (onfidoSdk.current)
         onfidoSdk.current.tearDown();
@@ -10942,7 +10777,7 @@ function IdDocumentAlreadyUpload(props) {
     })]
   });
 }
-const logger$a = createLogger("IdDocumentInstantVerificationComponent");
+const logger$c = createLogger("IdDocumentInstantVerificationComponent");
 const idVerificationSchema = ["instantIdVerificationData", "idDocumentType"];
 const documentTypeValidationRules = {
   instantIdVerificationData: {
@@ -11023,7 +10858,7 @@ function IdDocumentInstantVerificationComponent(props) {
         handleGetIdVerificationToken: props.handleGetIdVerificationToken,
         userDetails: props.userDetails,
         onIdVerificationComplete: handleIdVerificationComplete,
-        onIdVerificationError: logger$a.error
+        onIdVerificationError: logger$c.error
       }), jsxs("div", {
         className: "adyen-kyc-document-upload__manual-upload",
         children: [i18n.get("canNotCompleteInstantVerification"), " ", jsx("button", {
@@ -11170,15 +11005,17 @@ const IdVerificationMethodOptionFooter = ({
 const idVerificationMethodFields = ["idVerificationMethod"];
 function IdVerificationMethodComponent(props) {
   const {
-    i18n,
-    loadingContext
+    i18n
   } = useCoreContext();
+  const {
+    getImageUrl
+  } = useConfigurationApi();
   const verificationMethodFormId = props.id;
   const schema = idVerificationMethodFields;
   const stateRef = useRef$1({
     setState: null
   });
-  const svgPath = `${loadingContext}static/images/id-verification-method`;
+  const svgPath = `${getImageUrl()}id-verification-method`;
   const methodsMetadata = makeIdVerificationMethodsMetadata(svgPath);
   const {
     handleChangeFor,
@@ -13523,6 +13360,14 @@ const bankVerificationValidationRules = {
   }
 };
 const BankVerificationWidget$1 = "";
+const AuthContext = createContext(void 0);
+const useAuthContext = () => {
+  const authContext = useContext(AuthContext);
+  if (!authContext) {
+    throw new Error("Cannot use authContext without <AuthProvider>");
+  }
+  return authContext;
+};
 class AdyenKycSdkError extends Error {
   constructor(message, sourceError) {
     super(message);
@@ -13550,6 +13395,99 @@ const removeAnimationStartListener = (element, listener) => {
   element.removeEventListener("MSAnimationStart", listener, false);
   element.removeEventListener("webkitAnimationStart", listener, false);
 };
+const logger$b = createLogger("Fetch");
+const getRequestObject = (options, data) => {
+  const {
+    headers = [],
+    method = "GET",
+    sdkToken
+  } = options;
+  let authHeaders;
+  if (options.sdkToken) {
+    authHeaders = {
+      Authorization: `Bearer ${sdkToken}`,
+      Origin: window.location.origin
+    };
+  }
+  return {
+    method,
+    mode: "cors",
+    cache: "default",
+    credentials: "same-origin",
+    headers: {
+      Accept: "application/json, text/plain, */*",
+      "Content-Type": method === "POST" ? "application/json" : "text/plain",
+      ...authHeaders,
+      ...headers
+    },
+    redirect: "follow",
+    referrerPolicy: "no-referrer-when-downgrade",
+    ...data && {
+      body: JSON.stringify(data)
+    }
+  };
+};
+const getRequestUrl = (loadingContext, path, clientKey) => {
+  let url = `${loadingContext}${path}`;
+  if (clientKey) {
+    url += `?clientKey=${clientKey}`;
+  }
+  return url;
+};
+const handleFetchError = (message, level) => {
+  switch (level) {
+    case "silent":
+      break;
+    case "info":
+    case "warn":
+    case "error":
+      return logger$b[level](message);
+    default:
+      throw new Error(message);
+  }
+};
+const handleFetchResponse = async (response, responseType) => {
+  switch (responseType) {
+    case "arraybuffer":
+      return response.arrayBuffer();
+    case "blob":
+      return response.blob();
+    case "json":
+      return response.json();
+    case "text":
+      return response.text();
+  }
+};
+const http = async (options, data, responseType = "json") => {
+  const {
+    errorLevel = "warn",
+    loadingContext = "",
+    path,
+    clientKey = ""
+  } = options;
+  const request = getRequestObject(options, data);
+  const url = getRequestUrl(loadingContext, path, clientKey);
+  return fetch(url, request).then((response) => {
+    if (response.ok)
+      return handleFetchResponse(response, responseType);
+    const errorMessage = options.errorMessage || `Service at ${url} is not available`;
+    if (options.errorHandler) {
+      return options.errorHandler(handleFetchResponse(response, responseType));
+    }
+    return handleFetchError(errorMessage, errorLevel);
+  }).catch((e) => {
+    const errorMessage = options.errorMessage || `Call to ${url} failed. Error= ${e}`;
+    return handleFetchError(errorMessage, errorLevel);
+  });
+};
+const httpGet = async (options, data) => http({
+  ...options,
+  method: "GET"
+}, data);
+const httpPost = async (options, data) => http({
+  ...options,
+  method: "POST"
+}, data);
 const removeElementSiblings = (element) => {
   const parent = element.parentNode;
   let child = parent.firstChild;
@@ -13563,7 +13501,7 @@ const RELEVANT_MESSAGE_TYPES = ["account_verification_report_id", "error"];
 const TERMINAL_DATA_PROPS = ["accounts", "error", "reference"];
 const MOUNT_TIMEOUT = 10 * 1e3;
 const TINK_VENDOR = "Tink";
-const logger$9 = createLogger("iframeWidget");
+const logger$a = createLogger("iframeWidget");
 const isObjectData = (data) => typeof data === "object" && !Array.isArray(data) && data !== null;
 const isTerminalMessageData = (data) => Object.entries(data).some(([prop]) => TERMINAL_DATA_PROPS.includes(prop));
 const parseMessageJson = (message) => {
@@ -13582,7 +13520,7 @@ const callbackErrorHandler = async (response) => {
   try {
     await response;
   } catch (ex) {
-    logger$9.error(ex);
+    logger$a.error(ex);
   }
   return {
     error: "UNKNOWN_ERROR",
@@ -13591,7 +13529,7 @@ const callbackErrorHandler = async (response) => {
 };
 let activeWidget;
 class IFrameWidget {
-  constructor(iframeElement, url, vendor) {
+  constructor(iframeElement, url, vendor, sdkToken) {
     this.mountInProgress = false;
     this.waitForResponse = async () => new Promise((resolve, reject) => {
       this.listener = async (message) => {
@@ -13614,6 +13552,7 @@ class IFrameWidget {
     this.iframeElement = iframeElement;
     this.iframeWindow = iframeElement.contentWindow;
     this.vendor = vendor;
+    this.sdkToken = sdkToken;
   }
   removeMessageEventListener() {
     if (!this.listener)
@@ -13642,7 +13581,8 @@ class IFrameWidget {
     const httpOptions = {
       errorHandler: callbackErrorHandler,
       errorLevel: null,
-      loadingContext: ""
+      loadingContext: "",
+      sdkToken: this.sdkToken
     };
     const redirectUrl = new URL(this.iframeUrl.searchParams.get("redirect_uri"));
     const redirectQueryParams = redirectUrl.searchParams;
@@ -13686,7 +13626,7 @@ class IFrameWidget {
             message = responseData.errorMessage;
           }
         } catch (ex) {
-          logger$9.error(ex);
+          logger$a.error(ex);
         }
         throw new AdyenKycSdkError(message);
       }
@@ -13762,6 +13702,8 @@ function BankVerificationWidget({
   widgetCallback
 }) {
   const widgetContainerRef = useRef$1(null);
+  const context = useAuthContext();
+  const sdkToken = context.isEmbeddedDropin ? context.sdkToken : void 0;
   useEffect(
     () => {
       const container = widgetContainerRef.current;
@@ -13776,7 +13718,7 @@ function BankVerificationWidget({
           evt.target.appendChild(iFrame);
           requestAnimationFrame(async () => {
             try {
-              iFrameWidget = new IFrameWidget(iFrame, url, vendor);
+              iFrameWidget = new IFrameWidget(iFrame, url, vendor, sdkToken);
               const result = await iFrameWidget.mountAndWaitForResponse();
               widgetCallback({
                 action: "verification_success",
@@ -13824,7 +13766,7 @@ function BankVerificationWidget({
     ref: widgetContainerRef
   });
 }
-const logger$8 = createLogger("BankVerification");
+const logger$9 = createLogger("BankVerification");
 const accountVerificationFields = ["verifiedAccountHolder", "verifiedBankCountry", "verifiedBankName", "verifiedCurrencyCode", "verifiedBankAccountNumber"];
 const InstantVerificationErrorContext = createContext(null);
 const useInstantVerificationErrorNotification = (notificationVisibilityDuration) => {
@@ -13858,7 +13800,7 @@ const usePreferredVendorForCountry = (country2, getBankVerificationVendors) => {
       const preferredVendor2 = vendors[0];
       setPreferredVendor(preferredVendor2.name ? preferredVendor2 : null);
     };
-    getPreferredVendor().catch(logger$8.error);
+    getPreferredVendor().catch(logger$9.error);
   }, [country2, getBankVerificationVendors]);
   return preferredVendor;
 };
@@ -15323,9 +15265,11 @@ const getInstantVerificationProvider = (bankVerificationProviders, bankCountry2)
 function PayoutVerificationMethod(props) {
   var _a;
   const {
-    i18n,
-    loadingContext
+    i18n
   } = useCoreContext();
+  const {
+    getImageUrl
+  } = useConfigurationApi();
   const instantVerificationError = useContext(InstantVerificationErrorContext);
   const {
     isSettingEnabled
@@ -15364,7 +15308,7 @@ function PayoutVerificationMethod(props) {
   }), [data, errors, fieldProblems, valid]);
   const providerName = getInstantVerificationProvider(props.bankVerificationVendors, data.bankCountry);
   const instantVerificationAvailable = Boolean(props.instantVerificationAllowed && providerName && providerName !== "loading");
-  const svgPath = `${loadingContext}static/images/payout-verification-method`;
+  const svgPath = `${getImageUrl()}payout-verification-method`;
   const methodsMetadata = makePayoutVerificationMethodsMetadata(svgPath, providerName === "loading" ? void 0 : providerName);
   useEffect(() => {
     if (!hasSelectedMethod && instantVerificationAvailable && data.payoutVerificationMethod !== "instantVerification") {
@@ -16210,7 +16154,6 @@ const remediationActionMappings = {
   }]
 };
 const dataMissingRemediationsToFieldsMap = {
-  "1_501": [DocumentType.REGISTRATION_DOCUMENT],
   "2_158": ["vatNumber", "exemptedFromVat", "vatAbsenceReason"]
 };
 var EntityType = /* @__PURE__ */ ((EntityType2) => {
@@ -17026,7 +16969,7 @@ const defaultPayoutAccountFormat = {
   [CountryCodes.Sweden]: "local",
   [CountryCodes.UnitedKingdom]: "local"
 };
-const logger$7 = createLogger("useScenarioConfiguration");
+const logger$8 = createLogger("useScenarioConfiguration");
 const useScenarioConfiguration = ({
   getConfigurationData,
   getPayoutAccountFormatData,
@@ -17048,12 +16991,12 @@ const useScenarioConfiguration = ({
         const configurationResponse2 = await getConfigurationData();
         setConfigurationResponse(configurationResponse2);
       } catch (err) {
-        logger$7.warn("WARNING: Configuration request failed - error:", err);
+        logger$8.warn("WARNING: Configuration request failed - error:", err);
       } finally {
         setLoadingStatus("success");
       }
     };
-    makeConfigCallAndSave().catch(logger$7.error);
+    makeConfigCallAndSave().catch(logger$8.error);
   }, [getConfigurationData, setLoadingStatus]);
   useEffect(() => {
     setLoadingStatus("loading");
@@ -17069,12 +17012,12 @@ const useScenarioConfiguration = ({
         const defaultAccountFormat = defaultPayoutAccountFormat[country2] ?? allowedBankAccountFormats[0];
         setAccountFormat(defaultAccountFormat);
       } catch (err) {
-        logger$7.warn("WARNING: Payout format request failed - error:", err);
+        logger$8.warn("WARNING: Payout format request failed - error:", err);
       } finally {
         setLoadingStatus("success");
       }
     };
-    makePayoutFormatCallAndSave().catch(logger$7.error);
+    makePayoutFormatCallAndSave().catch(logger$8.error);
   }, [country2, setAccountFormat, getPayoutAccountFormatData, setLoadingStatus]);
   const {
     fieldConfigurations,
@@ -17703,7 +17646,7 @@ var ToastType = /* @__PURE__ */ ((ToastType2) => {
   return ToastType2;
 })(ToastType || {});
 const FormComposer = "";
-const logger$6 = createLogger("FormRouterContextProvider");
+const logger$7 = createLogger("FormRouterContextProvider");
 function FormRouterContextProvider({
   children,
   forms,
@@ -17723,7 +17666,7 @@ function FormRouterContextProvider({
       if (formIndex > -1) {
         setFormIndex(formIndex);
       } else {
-        logger$6.error("No form was found to have that field so form navigation failed.");
+        logger$7.error("No form was found to have that field so form navigation failed.");
       }
     }
   }), [forms, handleGetIdVerificationToken, setFormIndex]);
@@ -18318,7 +18261,7 @@ function CompanyDropinComponent({
     })
   });
 }
-const logger$5 = createLogger("useExemptSettlor");
+const logger$6 = createLogger("useExemptSettlor");
 const useExemptSettlor = ({
   trust,
   handleGetLegalEntity
@@ -18330,7 +18273,7 @@ const useExemptSettlor = ({
     setExemptSettlor(exemptSettlorLE);
   }, [handleGetLegalEntity]);
   useEffect(() => {
-    updateExemptSettlor(trust).catch(logger$5.error);
+    updateExemptSettlor(trust).catch(logger$6.error);
   }, [trust, updateExemptSettlor]);
   return exemptSettlor;
 };
@@ -20301,11 +20244,12 @@ function IndividualDropinComponent({
       const formattedDocuments = await mapIndividualDocumentToApiDocument(dataSubmitted, legalEntity.id);
       const uploadedDocuments = await documentUtils.uploadDocuments(formattedDocuments, legalEntity.id);
       uploadedDocuments == null ? void 0 : uploadedDocuments.forEach((doc) => {
+        var _a2;
         userEvents.addEvent("Saved document", {
           segmentation: {
             ...baseTrackingPayload,
             documentType: doc.type,
-            fileExtention: doc.attachments.map((item) => getFileExtention(item.pageName))
+            fileExtention: (_a2 = doc == null ? void 0 : doc.attachments) == null ? void 0 : _a2.map((item) => getFileExtention(item.pageName))
           }
         });
       });
@@ -21265,8 +21209,8 @@ function ContentElements({
     }
   };
   const elements = contentElements.map((contentElement) => {
-    const Component2 = components[contentElement.type];
-    return jsx(Component2, {
+    const Component = components[contentElement.type];
+    return jsx(Component, {
       ...getProps(contentElement)
     }, getKey(contentElement.type));
   });
@@ -21980,7 +21924,7 @@ const serviceAgreementValidationRules = {
     errorMessage: "fieldIsRequired"
   }
 };
-const logger$4 = createLogger("useServiceAgreement");
+const logger$5 = createLogger("useServiceAgreement");
 const FALLBACK_LANGUAGE_CODE = "en";
 const useServiceAgreement = ({
   handleGetServiceAgreement,
@@ -22009,7 +21953,7 @@ const useServiceAgreement = ({
           language: agreementLanguage
         });
         if (!document2) {
-          logger$4.log('"document" field was missing in response');
+          logger$5.log('"document" field was missing in response');
           return;
         }
         const contract = JSON.parse(decodeURIComponent(escape(window.atob(document2))));
@@ -22027,7 +21971,7 @@ const useServiceAgreement = ({
         throw err;
       }
     };
-    requestServiceAgreement().catch(logger$4.error);
+    requestServiceAgreement().catch(logger$5.error);
   }, [handleGetServiceAgreement, handleServiceAgreementIsNotAvailableInThatLanguage, agreementLanguage, legalEntityId, serviceAgreementType]);
   return {
     loading: loading2,
@@ -22461,6 +22405,80 @@ const labels = (data, country2) => ({
     }
   }
 });
+const getFontFaceRule = (fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats) => {
+  const ruleLines = [`font-family: '${fontFamily}'`, `font-style: ${fontStyle}`, `font-weight: ${fontWeight}`, `src: url(${fontSrc})`];
+  const additionalSources = [];
+  if (additionalFormats.eot) {
+    additionalSources.push(`url(${additionalFormats.eot}) format('embedded-opentype')`);
+  }
+  if (additionalFormats.woff) {
+    additionalSources.push(`url(${additionalFormats.woff}) format('woff')`);
+  }
+  if (additionalFormats.woff2) {
+    additionalSources.push(`url(${additionalFormats.woff2}) format('woff2')`);
+  }
+  if (additionalFormats.ttf) {
+    additionalSources.push(`url(${additionalFormats.ttf}) format('truetype')`);
+  }
+  if (additionalFormats.otf) {
+    additionalSources.push(`url(${additionalFormats.otf}) format('opentype')`);
+  }
+  if (additionalSources.length > 0) {
+    ruleLines.push(`src: ${additionalSources.join(",")};`);
+  }
+  return `@font-face {${ruleLines.join(";")}}`;
+};
+const loadFont = (fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats) => {
+  const style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerText = getFontFaceRule(fontFamily, fontStyle, fontWeight, fontSrc, additionalFormats);
+  document.body.insertBefore(style, document.body.firstChild);
+};
+const loadADLIconFont = (loadingContext) => {
+  const fontPath = `${loadingContext}static/fonts`;
+  const iconFontPath = `${fontPath}/adyen-kyc-icons`;
+  loadFont("adyen-kyc-icons", "normal", "normal", `${iconFontPath}.eot`, {
+    eot: `${iconFontPath}.eot`,
+    woff: `${iconFontPath}.woff`,
+    woff2: `${iconFontPath}.woff2`,
+    ttf: `${iconFontPath}.ttf`,
+    otf: `${iconFontPath}.otf`
+  });
+};
+let isFlagsLoaded = false;
+let isDocumentGuidanceLoaded = false;
+const getIconContainer = () => {
+  const container = document.createElement("div");
+  container.setAttribute("aria-hidden", "true");
+  container.setAttribute("id", "adl-icon-container");
+  container.style.height = "0";
+  return container;
+};
+const buildSpriteDOMFromResponse = (responseData) => {
+  const iconContainer = getIconContainer();
+  iconContainer.innerHTML = responseData;
+  return iconContainer;
+};
+const loadFlags = async (loadingContext) => {
+  if (isFlagsLoaded)
+    return;
+  isFlagsLoaded = true;
+  const responseData = await http({
+    loadingContext,
+    path: "static/images/country-flags.svg"
+  }, null, "text");
+  document.body.insertBefore(buildSpriteDOMFromResponse(responseData), document.body.firstChild);
+};
+const loadDocumentGuidance = async (loadingContext) => {
+  if (isDocumentGuidanceLoaded)
+    return;
+  isDocumentGuidanceLoaded = true;
+  const responseData = await http({
+    loadingContext,
+    path: "static/images/document-guidance.svg"
+  }, null, "text");
+  document.body.insertBefore(buildSpriteDOMFromResponse(responseData), document.body.firstChild);
+};
 const getOpeningStep = (forms, remediationActions) => {
   var _a;
   if (remediationActions && Object.keys(remediationActions).length > 0) {
@@ -22492,11 +22510,13 @@ function withFormComposer(WrappedComponent, {
     var _a, _b, _c;
     const {
       i18n,
-      loadingContext,
       contextCountry: initialContextCountry,
       setContextCountry: setInitialContextCountry,
       isReview
     } = useCoreContext();
+    const {
+      loadingContext
+    } = useAuthContext();
     const {
       getConfiguration: getConfiguration2,
       getPayoutAccountFormat: getPayoutAccountFormat2
@@ -23270,7 +23290,7 @@ function TrustDropinComponent(props) {
 }
 const PAGES_WITH_STATUS = [TaskTypes.DECISION_MAKER_OVERVIEW, TaskTypes.TASKS_OVERVIEW];
 const POLLING_INTERVAL = 3e3;
-const logger$3 = createLogger("DropinComposerComponent");
+const logger$4 = createLogger("DropinComposerComponent");
 function DropinComposerComponent({
   capabilities,
   legalEntityResponse,
@@ -23338,7 +23358,7 @@ function DropinComposerComponent({
         setPciStatus(response);
         return response;
       } catch (e) {
-        logger$3.warn(i18n.get("failedToGetPciStatus"));
+        logger$4.warn(i18n.get("failedToGetPciStatus"));
       }
     }
     return void 0;
@@ -23369,7 +23389,7 @@ function DropinComposerComponent({
         const response = await args.handleGetServiceAgreementAcceptanceInfos(legalEntity.id);
         setServiceAgreementAcceptanceInfos(response.data);
       } catch (e) {
-        logger$3.warn(i18n.get("failedToGetServiceAgreementStatus"));
+        logger$4.warn(i18n.get("failedToGetServiceAgreementStatus"));
       }
     }
   };
@@ -23379,7 +23399,7 @@ function DropinComposerComponent({
         const response = await args.handleGetServiceAgreementStatus(legalEntity.id);
         setServiceAgreementTypes(response.termsOfServiceTypes);
       } catch (e) {
-        logger$3.warn(i18n.get("failedToGetServiceAgreementStatus"));
+        logger$4.warn(i18n.get("failedToGetServiceAgreementStatus"));
       }
     }
   };
@@ -23418,7 +23438,7 @@ function DropinComposerComponent({
         setCapabilityProblems(getCapabilityProblems(response));
         return response;
       } catch (e) {
-        logger$3.warn(i18n.get("failedToFetchLegalEntityDetails"));
+        logger$4.warn(i18n.get("failedToFetchLegalEntityDetails"));
       }
     }
     return void 0;
@@ -23430,7 +23450,7 @@ function DropinComposerComponent({
         setTrust(response);
         return response;
       } catch (e) {
-        logger$3.warn(i18n.get("failedToFetchTrustDetails"));
+        logger$4.warn(i18n.get("failedToFetchTrustDetails"));
       }
     }
     return void 0;
@@ -23480,7 +23500,7 @@ function DropinComposerComponent({
         label: i18n.get("successFullyRemovedTrustMember")
       });
     } catch (err) {
-      logger$3.error(`Failed to delete trust member`, err);
+      logger$4.error(`Failed to delete trust member`, err);
       showToast({
         type: ToastType.ERROR,
         label: i18n.get("failedToRemoveTrustMember")
@@ -23532,7 +23552,7 @@ function DropinComposerComponent({
           break;
         case "rootTrustee":
         default:
-          logger$3.warn(`Updating trust member type "${trustMember.trustMemberType}" is not implemented.`);
+          logger$4.warn(`Updating trust member type "${trustMember.trustMemberType}" is not implemented.`);
       }
       showToast({
         label: i18n.get("successfullyUpdatedDetails"),
@@ -23540,7 +23560,7 @@ function DropinComposerComponent({
       });
       await refreshTrustAndRunOnSubmit(trust, 1);
     } catch (err) {
-      logger$3.error(err);
+      logger$4.error(err);
       showToast({
         label: i18n.get("failedToUpdateDetails"),
         type: ToastType.ERROR
@@ -23763,7 +23783,7 @@ function DropinComposerComponent({
       }
     };
     setIsLoadingConfiguration(true);
-    fetchConfiguration().catch(logger$3.error).finally(() => {
+    fetchConfiguration().catch(logger$4.error).finally(() => {
       setIsLoadingConfiguration(false);
       onLoad();
     });
@@ -24330,6 +24350,38 @@ const updateTransferInstrument = async (context, transferInstrument, transferIns
   }, transferInstrument);
 };
 const COMPONENTS_API_VERSION = "v1";
+const useComponentApi = (rootLegalEntityId) => {
+  const authContext = useAuthContext();
+  if (!authContext.isEmbeddedDropin) {
+    throw new Error("Cannot use component API outside an embedded dropin");
+  }
+  const {
+    sdkToken,
+    loadingContext: base
+  } = authContext;
+  return useMemo(() => {
+    const loadingContext = `${base}api/${COMPONENTS_API_VERSION}/`;
+    const loadingContextWithRootLEAuth = `${loadingContext}legalEntities/`;
+    const baseRequestContext = {
+      loadingContext: loadingContextWithRootLEAuth,
+      legalEntityId: rootLegalEntityId,
+      sdkToken
+    };
+    return {
+      getLegalEntity: async (legalEntityId) => getLegalEntity({
+        ...baseRequestContext,
+        legalEntityId
+      }),
+      getTransferInstrument: async (transferInstrumentId) => getTransferInstrument(baseRequestContext, transferInstrumentId),
+      getBankVerificationVendor: async (country2) => getBankVerificationVendor(baseRequestContext, country2),
+      getDocument: async (documentId) => getDocument(baseRequestContext, documentId),
+      createDocument: async (document2, ownerId) => createDocument(baseRequestContext, document2, ownerId),
+      updateDocument: async (document2, documentId, ownerId) => updateDocument(baseRequestContext, document2, documentId, ownerId),
+      createTransferInstrument: async (transferInstrument) => createTransferInstrument(baseRequestContext, transferInstrument),
+      updateTransferInstrument: async (transferInstrument, transferInstrumentId) => updateTransferInstrument(baseRequestContext, transferInstrument, transferInstrumentId)
+    };
+  }, [base, rootLegalEntityId, sdkToken]);
+};
 const getEmbeddedApi = ({
   base,
   sdkToken,
@@ -24362,6 +24414,7 @@ const getEmbeddedApi = ({
     }, datasetIdentifier2, locale),
     loadFlags: async () => loadFlags(base),
     loadDocumentGuidance: async () => loadDocumentGuidance(base),
+    getImageUrl: () => `${base}static/images/`,
     getAllowedCountries: () => {
       throw new Error("getAllowedCountries: Not implemented in onboarding component api");
     },
@@ -24467,7 +24520,7 @@ const validatePhoneNumber = async (context, phoneNumber2) => {
     number: phoneNumber2
   });
 };
-const logger$2 = createLogger("verify-id-number");
+const logger$3 = createLogger("verify-id-number");
 const verifyIdNumber = async (context, request) => {
   const {
     loadingContext,
@@ -24494,13 +24547,13 @@ const verifyIdNumber = async (context, request) => {
             message: "Service did not respond, do not block verification"
           };
         }
-        return logger$2.warn(`Unexpected response status ${responseData.status}`);
+        return logger$3.warn(`Unexpected response status ${responseData.status}`);
       },
       path: "v1/verification/idNumber",
       clientKey
     }, request);
   } catch (e) {
-    logger$2.warn("WARNING: idNumber verification failed - error:", e);
+    logger$3.warn("WARNING: idNumber verification failed - error:", e);
   }
 };
 const getKycExternalApi = ({
@@ -24536,57 +24589,27 @@ const getKycExternalApi = ({
   validatePhoneNumber: async (phoneNumber2) => validatePhoneNumber({
     loadingContext,
     clientKey
-  }, phoneNumber2)
+  }, phoneNumber2),
+  getImageUrl: () => `${loadingContext}static/images/`
 });
 const ConfigurationApiProvider = ({
   children,
   rootLegalEntityId
 }) => {
-  const coreContext = useCoreContext();
-  const contextValue = useMemo(() => coreContext.isEmbeddedDropin && rootLegalEntityId ? getEmbeddedApi({
-    base: coreContext.loadingContext,
-    sdkToken: coreContext.sdkToken,
+  const authContext = useAuthContext();
+  const contextValue = useMemo(() => authContext.isEmbeddedDropin && rootLegalEntityId ? getEmbeddedApi({
+    base: authContext.loadingContext,
+    sdkToken: authContext.sdkToken,
     rootLegalEntityId
   }) : getKycExternalApi({
-    loadingContext: coreContext.loadingContext,
-    clientKey: coreContext.clientKey
-  }), [coreContext, rootLegalEntityId]);
+    loadingContext: authContext.loadingContext,
+    clientKey: authContext.clientKey
+  }), [authContext, rootLegalEntityId]);
   return jsx(ConfigurationApiContext.Provider, {
     value: contextValue,
     children
   });
 };
-const useComponentApi = (rootLegalEntityId) => {
-  const coreContext = useCoreContext();
-  if (!coreContext.isEmbeddedDropin) {
-    throw new Error("Cannot use component API outside an embedded dropin");
-  }
-  const {
-    loadingContext: base,
-    sdkToken = ""
-  } = coreContext;
-  const apiVersion = "v1";
-  const loadingContext = `${base}api/${apiVersion}/`;
-  const loadingContextWithRootLEAuth = `${loadingContext}legalEntities/`;
-  const baseRequestContext = {
-    loadingContext: loadingContextWithRootLEAuth,
-    legalEntityId: rootLegalEntityId,
-    sdkToken
-  };
-  return {
-    getLegalEntity: async (legalEntityId) => getLegalEntity({
-      ...baseRequestContext,
-      legalEntityId
-    }),
-    getTransferInstrument: async (transferInstrumentId) => getTransferInstrument(baseRequestContext, transferInstrumentId),
-    getBankVerificationVendor: async (country2) => getBankVerificationVendor(baseRequestContext, country2),
-    getDocument: async (documentId) => getDocument(baseRequestContext, documentId),
-    createDocument: async (document2, ownerId) => createDocument(baseRequestContext, document2, ownerId),
-    updateDocument: async (document2, documentId, ownerId) => updateDocument(baseRequestContext, document2, documentId, ownerId),
-    createTransferInstrument: async (transferInstrument) => createTransferInstrument(baseRequestContext, transferInstrument),
-    updateTransferInstrument: async (transferInstrument, transferInstrumentId) => updateTransferInstrument(baseRequestContext, transferInstrument, transferInstrumentId)
-  };
-};
 class EventEmitter {
   constructor() {
     this.listeners = {
@@ -24668,6 +24691,102 @@ const componentsMap = {
   pci: PciDropinComponent,
   payoutEmbeddedDropin: PayoutEmbeddedDropin
 };
+const refreshSdkToken = async (context, refreshToken) => {
+  const {
+    loadingContext,
+    sdkToken
+  } = context;
+  return httpPost({
+    loadingContext,
+    errorLevel: "warn",
+    errorMessage: `Failed to refresh token`,
+    path: `sessions/refresh`,
+    sdkToken,
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }, {
+    refreshToken
+  });
+};
+const SDK_TOKEN_TTL = 6e4;
+const REFRESH_INTERVAL = SDK_TOKEN_TTL - 5e3;
+const RETRY_LIMIT = 2;
+const logger$2 = createLogger("useSdkToken");
+const useSdkToken = ({
+  initialSdkToken,
+  refreshToken,
+  autheBase
+}) => {
+  const [sdkToken, setSdkToken] = useState(initialSdkToken);
+  const doRefresh = async (sdkToken2, refreshToken2, retries) => {
+    try {
+      const {
+        token: newSdkToken
+      } = await refreshSdkToken({
+        loadingContext: autheBase,
+        sdkToken: sdkToken2
+      }, refreshToken2);
+      setSdkToken(newSdkToken);
+    } catch (e) {
+      if (!retries) {
+        throw new Error("Unable to refresh token after retries", e);
+      }
+      logger$2.warn("Failed to refresh token. Retrying..", e);
+      await doRefresh(sdkToken2, refreshToken2, retries - 1);
+    }
+  };
+  useEffect(() => {
+    if (!sdkToken || !refreshToken) {
+      return;
+    }
+    const refreshHandler = setInterval(() => {
+      doRefresh(sdkToken, refreshToken, RETRY_LIMIT).catch(() => {
+        clearInterval(refreshHandler);
+      });
+    }, REFRESH_INTERVAL);
+    return () => {
+      clearInterval(refreshHandler);
+    };
+  }, [sdkToken]);
+  return sdkToken;
+};
+const AUTHE_API_VERSION = "v1";
+const AuthProvider = ({
+  children,
+  sdkToken: initialSdkToken,
+  refreshToken,
+  clientKey,
+  loadingContext
+}) => {
+  const autheBase = `${loadingContext}authe/api/${AUTHE_API_VERSION}/`;
+  const sdkToken = useSdkToken({
+    initialSdkToken,
+    refreshToken,
+    autheBase
+  });
+  const contextValue = useMemo(() => {
+    if (sdkToken && refreshToken) {
+      return {
+        isEmbeddedDropin: true,
+        sdkToken,
+        loadingContext: `${loadingContext}onboardingcomponents/`
+      };
+    }
+    if (clientKey) {
+      return {
+        isEmbeddedDropin: false,
+        clientKey,
+        loadingContext
+      };
+    }
+    throw new Error("Must provide either `sdkToken` and `refreshToken` or `clientKey`");
+  }, [sdkToken, clientKey]);
+  return jsx(AuthContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
 const close = "Close";
 const individual = "Individual";
 const payoutAccount = "Payout account";
@@ -26886,91 +27005,23 @@ class Language {
   }
 }
 const logger = createLogger("CoreProvider");
-class CoreProvider extends Component {
-  constructor(props) {
-    super(props);
-    this.setContextCountry = (country2) => {
-      this.setState({
-        contextCountry: country2
-      });
-    };
-    this.setLocale = (locale) => {
-      var _a;
-      this.setState({
-        loaded: false
-      });
-      const originalLanguage = (_a = this.state.i18n) == null ? void 0 : _a.locale;
-      this.state.i18n.loadTranslations({
-        locale,
-        loadingContext: this.props.loadingContext,
-        clientKey: this.props.clientKey
-      }).then(() => {
-        userEvents.addEvent("Changed page language", {
-          segmentation: {
-            originalLanguage,
-            newLanguage: locale
-          }
-        });
-        this.setState({
-          loaded: true
-        });
-      });
-    };
-    this.setAccountHolder = (accountHolder2) => {
-      this.setState({
-        accountHolder: accountHolder2
-      });
-    };
-    this.setAccountFormat = (accountFormat) => {
-      this.setState({
-        accountFormat
-      });
-    };
-    this.getContextValue = () => {
-      const baseContext = {
-        i18n: this.state.i18n,
-        setLocale: this.setLocale,
-        loadingContext: this.props.loadingContext,
-        translations: this.props.translations,
-        setContextCountry: this.setContextCountry,
-        contextCountry: this.state.contextCountry,
-        isReview: this.props.isReview ?? false,
-        setAccountHolder: this.setAccountHolder,
-        accountHolder: this.state.accountHolder,
-        setAccountFormat: this.setAccountFormat,
-        accountFormat: this.state.accountFormat
-      };
-      if (this.props.sdkToken) {
-        return {
-          ...baseContext,
-          isEmbeddedDropin: true,
-          sdkToken: this.props.sdkToken
-        };
-      }
-      if (this.props.clientKey) {
-        return {
-          ...baseContext,
-          isEmbeddedDropin: false,
-          clientKey: this.props.clientKey
-        };
-      }
-      throw new Error("Must provide either `sdkToken` or `clientKey`");
-    };
-    this.state = {
-      loaded: false,
-      contextCountry: this.props.contextCountry,
-      i18n: new Language(),
-      accountHolder: null,
-      accountFormat: "local"
-    };
-  }
-  async componentDidMount() {
-    const {
-      contextCountry,
-      locale,
-      loadingContext,
-      clientKey
-    } = this.props;
+const CoreProvider = ({
+  contextCountry: initialContextCountry,
+  locale,
+  clientKey,
+  children,
+  translations,
+  isReview
+}) => {
+  const {
+    loadingContext
+  } = useAuthContext();
+  const [loaded, setLoaded] = useState(false);
+  const [contextCountry, setContextCountry] = useState(initialContextCountry);
+  const [i18n] = useState(new Language());
+  const [accountHolder2, setAccountHolder] = useState(null);
+  const [accountFormat, setAccountFormat] = useState("local");
+  const init2 = async () => {
     loadADLIconFont(loadingContext);
     try {
       let initializationLocale = locale;
@@ -27000,32 +27051,59 @@ class CoreProvider extends Component {
 - ${listify(locales)}. falling back to "${FALLBACK_LOCALE}"`);
         initializationLocale = FALLBACK_LOCALE;
       }
-      await this.state.i18n.initialize({
+      await i18n.initialize({
         locale: initializationLocale,
-        loadingContext: this.props.loadingContext,
-        clientKey: this.props.clientKey,
-        customTranslations: this.props.translations,
+        loadingContext,
+        clientKey,
+        customTranslations: translations,
         allowedLocales: locales
       });
-      this.setState({
-        loaded: true
-      });
+      setLoaded(true);
     } catch (e) {
       logger.log(e);
     }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.state.contextCountry !== nextState.contextCountry || this.state.loaded === false || this.state.accountHolder !== nextState.accountHolder || this.state.accountFormat !== nextState.accountFormat;
-  }
-  render(props) {
-    if (!this.state.loaded)
-      return null;
-    return jsx(CoreContext.Provider, {
-      value: this.getContextValue(),
-      children: props.children && toChildArray(props.children)
+  };
+  const setLocale = (locale2) => {
+    setLoaded(false);
+    const originalLanguage = i18n == null ? void 0 : i18n.locale;
+    i18n.loadTranslations({
+      locale: locale2,
+      loadingContext,
+      clientKey
+    }).then(() => {
+      userEvents.addEvent("Changed page language", {
+        segmentation: {
+          originalLanguage,
+          newLanguage: locale2
+        }
+      });
+      setLoaded(true);
     });
+  };
+  useEffect(() => {
+    init2();
+  });
+  const contextValue = useMemo(() => ({
+    i18n,
+    setLocale,
+    loadingContext,
+    isReview,
+    translations,
+    setContextCountry,
+    contextCountry,
+    setAccountHolder,
+    accountHolder: accountHolder2,
+    setAccountFormat,
+    accountFormat
+  }), [contextCountry, loaded, accountHolder2, accountFormat]);
+  if (!loaded) {
+    return null;
   }
-}
+  return jsx(CoreContext.Provider, {
+    value: contextValue,
+    children: children && toChildArray(children)
+  });
+};
 function ExperimentsContextProvider({
   children,
   experiments
@@ -27165,28 +27243,32 @@ class UIElement extends BaseElement {
   constructor(props) {
     super(props);
     this.render = () => {
-      const Component2 = this.props.component;
-      return jsx(CoreProvider, {
-        locale: this.props.locale,
-        loadingContext: this.props.loadingContext,
-        translations: this.props.translations,
-        clientKey: this.props.clientKey,
-        contextCountry: this.props.contextCountry,
-        isReview: this.props.isReview,
+      const Component = this.props.component;
+      return jsx(AuthProvider, {
         sdkToken: this.props.sdkToken,
+        refreshToken: this.props.refreshToken,
+        clientKey: this.props.clientKey,
+        loadingContext: this.props.loadingContext,
         children: jsx(ConfigurationApiProvider, {
-          children: jsx(SettingsContextProvider, {
-            settings: this.props.settings,
-            children: jsx(ExperimentsContextProvider, {
-              experiments: this.props.experiments,
-              children: jsx("div", {
-                className: "adyen-kyc-dropin-container adl-u-position-relative",
-                children: jsx(AutoResizer, {
-                  children: jsx(ToastContextProvider, {
-                    children: jsx(StateProvider, {
-                      children: jsx(Component2, {
-                        ...this.props.componentProps,
-                        eventEmitter: this.eventEmitter
+          children: jsx(CoreProvider, {
+            locale: this.props.locale,
+            translations: this.props.translations,
+            clientKey: this.props.clientKey,
+            contextCountry: this.props.contextCountry,
+            isReview: this.props.isReview,
+            children: jsx(SettingsContextProvider, {
+              settings: this.props.settings,
+              children: jsx(ExperimentsContextProvider, {
+                experiments: this.props.experiments,
+                children: jsx("div", {
+                  className: "adyen-kyc-dropin-container adl-u-position-relative",
+                  children: jsx(AutoResizer, {
+                    children: jsx(ToastContextProvider, {
+                      children: jsx(StateProvider, {
+                        children: jsx(Component, {
+                          ...this.props.componentProps,
+                          eventEmitter: this.eventEmitter
+                        })
                       })
                     })
                   })
@@ -27733,10 +27815,10 @@ const validateComponentName = (componentName) => {
 const validateCoreOptions = (coreOptions) => {
   const requiredOptions = ["locale", "environment", "country"];
   const missing = requiredOptions.filter((option) => !coreOptions[option]);
-  if (!coreOptions.sdkToken && !coreOptions.clientKey) {
+  if (!(coreOptions.sdkToken && coreOptions.refreshToken) && !coreOptions.clientKey) {
     throw new Error(`
 
-Please specify atleast one of sdkToken or clientKey for the SDK to initialize!
+Please specify either sdkToken and a refreshToken or a clientKey for the SDK to initialize!
       
 
 - For more information please check: https://github.com/Adyen/adyen-kyc-components#configuration.`);