@adyen/kyc-components 2.67.1 → 2.68.0

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

@@ -21,10 +21,7 @@ class UserEvents {
     };
     this.baseTrackingPayload = {
       category: "onboarding",
-      subCategory: "hosted onboarding",
-      countryCode: void 0,
-      capabilities: void 0,
-      task: void 0
+      subCategory: "hosted onboarding"
     };
     this.sharedEventProperties = {};
   }
@@ -42,7 +39,7 @@ class UserEvents {
    */
   addEvent(eventName, properties) {
     const completeEvent = { ...this.baseTrackingPayload, ...properties };
-    this.add({ type: "add_event", name: eventName, properties: { ...completeEvent } });
+    this.add({ type: "add_event", name: eventName, properties: completeEvent });
     this.notifySubscribers();
   }
   /**
@@ -99,7 +96,9 @@ class UserEvents {
   subscribe(callback) {
     this.subscriptions.add(callback);
   }
-  /** Sets params that are sent on every event */
+  /**
+   * Sets params that are sent on every event
+   * */
   updateBaseTrackingPayload(baseTrackingPayload) {
     this.baseTrackingPayload = { ...this.baseTrackingPayload, ...baseTrackingPayload };
   }
@@ -2554,6 +2553,23 @@ const Button = ({
   );
 };
 const Divider = () => /* @__PURE__ */ jsx("hr", { className: "adyen-kyc-divider" });
+const Typography = ({
+  el = "p",
+  variant = "body",
+  color = "primary",
+  className,
+  children,
+  ...props
+}) => {
+  const TypographyElement = el;
+  const classNames = cx(
+    className,
+    "adyen-kyc-typography",
+    `adyen-kyc-typography--${color}`,
+    `adyen-kyc-typography--${variant}`
+  );
+  return /* @__PURE__ */ jsx(TypographyElement, { ...props, className: classNames, children });
+};
 const Accordion = ({
   title,
   children,
@@ -2580,7 +2596,7 @@ const Accordion = ({
         /* @__PURE__ */ jsxs("summary", { className: "adyen-kyc-accordion__summary", children: [
           expandOnLeft && /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "adyen-kyc-accordion__arrow" }),
           icon,
-          title,
+          /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", children: title }),
           !expandOnLeft && /* @__PURE__ */ jsx(
             Icon,
             {
@@ -2589,7 +2605,7 @@ const Accordion = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("section", { className: "adyen-kyc-accordion__content", children })
+        /* @__PURE__ */ jsx("div", { className: "adyen-kyc-accordion__content", children })
       ]
     }
   );
@@ -2650,7 +2666,7 @@ const Alert = ({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-alert__header", children: [
             renderedIcon,
-            title && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-alert__title", children: title }),
+            title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: "adyen-kyc-alert__title", children: title }),
             !!actions && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-alert__actions", children: actions })
           ] }),
           !!children && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-alert__explanation", children })
@@ -2669,7 +2685,7 @@ const Alert = ({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-alert__header", children: [
           renderedIcon,
-          title && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-alert__title", children: title }),
+          title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: "adyen-kyc-alert__title", children: title }),
           type === "dismissible" && /* @__PURE__ */ jsx(
             Button,
             {
@@ -4025,23 +4041,6 @@ const SelectButtonContentSingle = ({
   ] });
 };
 const SelectButtonContentMulti = ({ active, placeholder }) => active && active.length > 0 ? /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropdown-selected-items", children: active.map((item) => /* @__PURE__ */ jsx(Tag, { className: item.className, variant: "grey", children: (item == null ? void 0 : item.selectedOptionName) || (item == null ? void 0 : item.name) || placeholder }, item.id)) }) : /* @__PURE__ */ jsx("span", { className: "adyen-kyc-dropdown-button__text adyen-kyc-dropdown-button__text--placeholder", children: placeholder });
-const Typography = ({
-  el = "p",
-  variant = "body",
-  color = "primary",
-  className,
-  children,
-  ...props
-}) => {
-  const TypographyElement = el;
-  const classNames = cx(
-    className,
-    "adyen-kyc-typography",
-    `adyen-kyc-typography--${color}`,
-    `adyen-kyc-typography--${variant}`
-  );
-  return /* @__PURE__ */ jsx(TypographyElement, { ...props, className: classNames, children });
-};
 function Checkbox({
   classNameModifiers = [],
   label,
@@ -21570,7 +21569,6 @@ function Card({
   active,
   disabled,
   fetching,
-  warning,
   warningMessage,
   title,
   subTitle,
@@ -21619,7 +21617,7 @@ function Card({
           headerButton && headerButton
         ] }),
         children && /* @__PURE__ */ jsx("div", { role: "region", className: "adyen-kyc-card__body", children }),
-        warning && /* @__PURE__ */ jsx(Alert, { className: "adyen-kyc-card__warning", title: warningMessage, variant: "warning" })
+        !!warningMessage && /* @__PURE__ */ jsx(Alert, { className: "adyen-kyc-card__warning", title: warningMessage, variant: "warning" })
       ]
     }
   );
@@ -23160,7 +23158,7 @@ function TrustRegistrationDetailsComponent(props) {
         Alert,
         {
           variant: "info",
-          title: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: i18n.get("makeSureToHaveYourTrustDeed") }),
+          title: i18n.get("makeSureToHaveYourTrustDeed"),
           className: "adyen-kyc-u-margin-bottom-16"
         }
       ),
@@ -31635,7 +31633,6 @@ const TaskListItem = ({
   info,
   loading = false,
   showErrorAlerts = "onErrorStatus",
-  showWarningAlert = false,
   warningMessage,
   removeEntity,
   isRemoveDisabled = false,
@@ -31661,7 +31658,6 @@ const TaskListItem = ({
     Card,
     {
       stateful: onNavigateToTask && !loading && !disabled,
-      warning: showWarningAlert,
       warningMessage,
       onClick: loading ? void 0 : handleNavigateToTask,
       onKeyDown: handleKeys(["Enter"], handleNavigateToTask ?? noop),
@@ -31977,7 +31973,6 @@ function TaskListComponent({
                   legalEntityResponse,
                   getOwnDecisionMakersLegalEntityIds(legalEntityResponse)
                 ) : TaskStatus.DETAILS_REQUIRED,
-                showWarningAlert: showDecisionMakersWarning,
                 warningMessage: remediationMessages[TaskTypes.DECISION_MAKER]
               }
             )
@@ -39322,12 +39317,8 @@ const convertToEmbeddedEvent = (eventQueueItem, sessionData) => {
     ...sessionData
   };
 };
-const useAnalytics = async ({
-  onUserEvent,
-  legalEntityId,
-  sdkVersion,
-  componentName
-}) => {
+const useAnalytics = ({ onUserEvent, legalEntityId, componentName }) => {
+  const sdkVersion = "2.68.0";
   const { isEmbeddedDropin, loadingContext: base } = useAuthContext();
   const loadingContext = `${base}api/${COMPONENTS_API_VERSION}/`;
   useEffect(() => {
@@ -39353,10 +39344,7 @@ const useAnalytics = async ({
         }
       } else if (onUserEvent) {
         userEvents.subscribe((data) => {
-          onUserEvent({
-            ...data,
-            properties: { ...sessionData, ...data.properties || {} }
-          });
+          onUserEvent(data);
         });
       }
     })();
@@ -39656,11 +39644,9 @@ const ConfigurationApiProvider = ({
 }) => {
   const authContext = useAuthContext();
   const { isEmbeddedDropin, loadingContext } = authContext;
-  const sdkVersion = "2.67.1";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
-    sdkVersion,
     componentName
   });
   const contextValue = useMemo(
@@ -39674,7 +39660,7 @@ const ConfigurationApiProvider = ({
     [authContext, rootLegalEntityId]
   );
   return /* @__PURE__ */ jsxs(ConfigurationApiContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx("span", { className: "adyen-kyc__sdk-version", hidden: true, children: sdkVersion }),
+    /* @__PURE__ */ jsx("span", { className: "adyen-kyc__sdk-version", hidden: true, children: "2.68.0" }),
     children
   ] });
 };
@@ -40290,7 +40276,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "2.67.1",
+      sdkVersion: "2.68.0",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -40355,7 +40341,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
     /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__meta", children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsxs("tbody", { children: [
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "SDK version" }),
-        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.67.1" })
+        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.68.0" })
       ] }) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "rootLegalEntityId" }),
@@ -40497,7 +40483,12 @@ class UIElement extends BaseElement {
       const baseTracking = getBaseTracking(
         this.props.componentProps
       );
-      userEvents.updateBaseTrackingPayload(baseTracking);
+      userEvents.updateBaseTrackingPayload({
+        ...baseTracking,
+        componentName: this.props.componentName,
+        sdkVersion: "2.68.0",
+        userAgent: navigator.userAgent
+      });
       return /* @__PURE__ */ jsx(SettingsProvider, { settings: this.props.settings, children: /* @__PURE__ */ jsx(
         AuthProvider,
         {

package/dist/style.css

@@ -256,9 +256,9 @@ button[disabled]:hover {
 }
 .adyen-kyc-link:focus {
   box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
-  border-radius: var(--adyen-sdk-border-radius-xs, 2px);
   transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
   transition-property: box-shadow;
+  border-radius: var(--adyen-sdk-border-radius-xs, 2px);
 }
 .adyen-kyc-link:visited {
   color: var(--adyen-sdk-color-link-primary, #00112c);
@@ -460,11 +460,7 @@ button[disabled]:hover {
 }
 
 .adyen-kyc-alert__title {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
   flex-grow: 1;
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
   margin-left: var(--adyen-sdk-spacer-070, 16px);
 }
 
@@ -559,6 +555,131 @@ button[disabled]:hover {
 .adyen-kyc-accordion[open] summary {
   margin-bottom: var(--adyen-sdk-spacer-020, 4px);
   user-select: auto;
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-typography {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: block;
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}
+.adyen-kyc-typography--body {
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+}
+.adyen-kyc-typography--body-stronger {
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
+  font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
+}
+.adyen-kyc-typography--body-strongest {
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
+  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
+}
+.adyen-kyc-typography--caption {
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
+  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+}
+.adyen-kyc-typography--caption-stronger {
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
+  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
+}
+.adyen-kyc-typography--title {
+  font-size: var(--adyen-sdk-text-title-font-size, 16px);
+  font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
+  line-height: var(--adyen-sdk-text-title-line-height, 26px);
+  letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title {
+    font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
+    line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
+  }
+}
+.adyen-kyc-typography--title-m {
+  font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
+  font-family: var(--adyen-sdk-text-title-m-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
+  line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
+  letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-m {
+    font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
+    line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
+  }
+}
+.adyen-kyc-typography--title-l {
+  font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
+  font-family: var(--adyen-sdk-text-title-l-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
+  line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
+  letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-l {
+    font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
+    line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
+  }
+}
+.adyen-kyc-typography--primary {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+.adyen-kyc-typography--secondary {
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}
+.adyen-kyc-typography--tertiary {
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
+}
+.adyen-kyc-typography--disabled {
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
+}
+.adyen-kyc-typography--success {
+  color: var(--adyen-sdk-color-label-success, #07893c);
+}
+.adyen-kyc-typography--warning {
+  color: var(--adyen-sdk-color-label-warning, #b06300);
+}
+.adyen-kyc-typography--critical {
+  color: var(--adyen-sdk-color-label-critical, #e22d2d);
+}
+.adyen-kyc-typography--highlight {
+  color: var(--adyen-sdk-color-label-highlight, #0070f5);
+}
+.adyen-kyc-typography--inverse-primary {
+  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
+}
+.adyen-kyc-typography--inverse-secondary {
+  color: var(--adyen-sdk-color-label-inverse-secondary, #9ea6b1);
 }.adyen-kyc-individual .adyen-kyc-form {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }.adyen-kyc-field {
@@ -1015,123 +1136,7 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-typography {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: block;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-typography--body {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-}
-.adyen-kyc-typography--body-stronger {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
-  font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
-}
-.adyen-kyc-typography--body-strongest {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-}
-.adyen-kyc-typography--caption {
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
-  letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
-  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-}
-.adyen-kyc-typography--caption-stronger {
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
-  letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
-  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
-}
-.adyen-kyc-typography--title {
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-line-height, 26px);
-  letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-typography--title {
-    font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
-    line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
-  }
-}
-.adyen-kyc-typography--title-m {
-  font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
-  font-family: var(--adyen-sdk-text-title-m-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
-  letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-typography--title-m {
-    font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
-    line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
-  }
-}
-.adyen-kyc-typography--title-l {
-  font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
-  font-family: var(--adyen-sdk-text-title-l-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
-  letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-typography--title-l {
-    font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
-    line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
-  }
-}
-.adyen-kyc-typography--primary {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-}
-.adyen-kyc-typography--secondary {
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}
-.adyen-kyc-typography--tertiary {
-  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
-}
-.adyen-kyc-typography--disabled {
-  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
-}
-.adyen-kyc-typography--success {
-  color: var(--adyen-sdk-color-label-success, #07893c);
-}
-.adyen-kyc-typography--warning {
-  color: var(--adyen-sdk-color-label-warning, #b06300);
-}
-.adyen-kyc-typography--critical {
-  color: var(--adyen-sdk-color-label-critical, #e22d2d);
-}
-.adyen-kyc-typography--highlight {
-  color: var(--adyen-sdk-color-label-highlight, #0070f5);
-}
-.adyen-kyc-typography--inverse-primary {
-  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
-}
-.adyen-kyc-typography--inverse-secondary {
-  color: var(--adyen-sdk-color-label-inverse-secondary, #9ea6b1);
-}.adyen-kyc-checkbox {
+.adyen-kyc-checkbox {
   display: block;
 }
 .adyen-kyc-checkbox__label {
@@ -1160,6 +1165,11 @@ button[disabled]:hover {
   /* Check */
   /* Box */
 }
+.adyen-kyc-checkbox__input:focus-visible + .adyen-kyc-checkbox__label::after {
+  box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
+  transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
+  transition-property: box-shadow;
+}
 .adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
   background-color: var(--adyen-sdk-color-background-primary-hover, #f7f7f8);
 }
@@ -1498,7 +1508,6 @@ button[disabled]:hover {
 }
 .adyen-kyc-input-radio__input:focus {
   box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
-  border-radius: var(--adyen-sdk-border-radius-xs, 2px);
   transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
   transition-property: box-shadow;
 }
@@ -2323,6 +2332,11 @@ fieldset {
   z-index: 2;
   box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
 }
+.adyen-kyc-card.adyen-kyc-card--stateful:focus-visible {
+  box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
+  transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
+  transition-property: box-shadow;
+}
 
 .adyen-kyc-card.adyen-kyc-card--active {
   border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);

package/dist/types/components/TaskList/component/TaskListItem.d.ts

@@ -1,4 +1,4 @@
 import '../TaskListItem.scss';
 import type { TaskListItemProps } from '../types';
-declare const TaskListItem: ({ titleKey, title, icon, status, statusLabel, onNavigateToTask, disabled, problems, downloadHandler, info, loading, showErrorAlerts, showWarningAlert, warningMessage, removeEntity, isRemoveDisabled, handleIsRemoveDisabled, testId, enableTracking, }: TaskListItemProps) => import("preact").JSX.Element;
+declare const TaskListItem: ({ titleKey, title, icon, status, statusLabel, onNavigateToTask, disabled, problems, downloadHandler, info, loading, showErrorAlerts, warningMessage, removeEntity, isRemoveDisabled, handleIsRemoveDisabled, testId, enableTracking, }: TaskListItemProps) => import("preact").JSX.Element;
 export default TaskListItem;

package/dist/types/components/TaskList/types.d.ts

@@ -85,7 +85,6 @@ export interface TaskListItemProps extends TaskStatusProps {
     onNavigateToTask?: () => void;
     loading?: boolean;
     showErrorAlerts?: 'onErrorStatus' | 'always';
-    showWarningAlert?: boolean;
     warningMessage?: string;
     removeEntity?: () => void;
     isRemoveDisabled?: boolean;

package/dist/types/components/internal/Card/Card.d.ts

@@ -1,4 +1,4 @@
 import './_card.component.scss';
 import type { JSX } from 'preact';
 import type { CardProps } from './types';
-export declare function Card({ className, children, stateful, active, disabled, fetching, warning, warningMessage, title, subTitle, headerButton, background, onClick, onKeyDown, }: CardProps): JSX.Element;
+export declare function Card({ className, children, stateful, active, disabled, fetching, warningMessage, title, subTitle, headerButton, background, onClick, onKeyDown, }: CardProps): JSX.Element;

package/dist/types/components/internal/Card/types.d.ts

@@ -6,7 +6,6 @@ export interface CardProps {
     active?: boolean;
     disabled?: boolean;
     fetching?: boolean;
-    warning?: boolean;
     warningMessage?: string;
     title?: string;
     subTitle?: string;

package/dist/types/core/hooks/useAnalytics.d.ts

@@ -1,17 +1,16 @@
 import type { ComponentMap } from '../../components';
 import type { EmbeddedAnalyticsSessionRequest } from '../models/api/analytics';
-import type { AnalyticsEventPayload, EventProperty, EventQueueItem, EventType, UserEventCallback } from '../user-events';
+import type { AnalyticsEventPayload, EventQueueItem, EventType, MixpanelProperty, UserEventCallback } from '../user-events';
 export type UseAnalyticsProps = {
     legalEntityId: string;
     onUserEvent?: UserEventCallback;
-    sdkVersion: string;
     componentName: keyof ComponentMap;
 };
 type EmbeddedEventItem = {
     eventType: EventType;
     eventName: string;
-    eventData: AnalyticsEventPayload | Record<string, EventProperty>;
+    eventData: AnalyticsEventPayload | Record<string, MixpanelProperty>;
 };
 export declare const convertToEmbeddedEvent: (eventQueueItem: EventQueueItem, sessionData: EmbeddedAnalyticsSessionRequest) => EmbeddedEventItem & EmbeddedAnalyticsSessionRequest;
-export declare const useAnalytics: ({ onUserEvent, legalEntityId, sdkVersion, componentName, }: UseAnalyticsProps) => Promise<void>;
+export declare const useAnalytics: ({ onUserEvent, legalEntityId, componentName }: UseAnalyticsProps) => void;
 export {};

package/dist/types/core/user-events.d.ts

@@ -1,7 +1,7 @@
 import type { SetOptional } from 'type-fest';
 import type { TaskTypes } from '../components/TaskList/types';
 import type { LegalEntityType } from './models/api/legal-entity-type';
-export type EventProperty = string | number | boolean | any[] | null | undefined;
+export type MixpanelProperty = string | number | boolean | any[] | null | undefined;
 /**
  * Level of the funnel that is relevant for this event
  */
@@ -13,14 +13,17 @@ export type ActionType = 'start' | 'submit' | 'save' | 'add' | 'edit' | 'remove'
 /**
  * The base event properties that are sent with every event
  */
-type BaseEventProperties = {
+export type BaseEventProperties = {
     category: 'onboarding';
     subCategory: 'hosted onboarding';
-    countryCode?: string;
     capabilities?: string[];
+    componentName?: string;
+    countryCode?: string;
     entityType?: LegalEntityType;
-    task?: TaskTypes;
     locale?: string;
+    sdkVersion?: string;
+    task?: TaskTypes;
+    userAgent?: string;
 };
 /**
  * Additional event properties
@@ -34,14 +37,14 @@ export interface AdditionalEventProperties {
     returnType?: 'backend' | 'validation' | (string & {});
     returnValue?: string | string[];
     label?: string;
-    [key: string]: EventProperty;
+    [key: string]: MixpanelProperty;
 }
 /**
  * Name of the tracked event
  * Can be either a custom name or one of the pre-defined values
  */
 export type EventName = 'Clicked button' | 'Clicked accordion' | 'Success' | 'Encountered error' | 'Landed on page' | 'Interacted with form field' | (string & {});
-export type AnalyticsEventPayload = BaseEventProperties & AdditionalEventProperties;
+export type AnalyticsEventPayload = Required<BaseEventProperties> & AdditionalEventProperties;
 export type EventType = 'add_event' | 'start_event';
 export type EventQueueItem = {
     type: EventType;
@@ -57,7 +60,7 @@ declare class UserEvents {
     /** properties not set with every event but that may be shared between some events
      * ex. `page` value for `Interacted with form field` events
      */
-    sharedEventProperties: Partial<AdditionalEventProperties>;
+    private sharedEventProperties;
     constructor();
     protected add(...args: EventQueueItem[]): void;
     protected notifySubscribers(): void;
@@ -99,10 +102,14 @@ declare class UserEvents {
      * ```
      */
     subscribe(callback: UserEventCallback): void;
-    /** Sets params that are sent on every event */
+    /**
+     * Sets params that are sent on every event
+     * */
     updateBaseTrackingPayload(baseTrackingPayload: Partial<BaseEventProperties>): void;
-    /** Sets params that may be shared between events */
-    updateSharedEventProperties: (props: Record<string, EventProperty>) => void;
+    /**
+     * Sets params that may be shared between events
+     * */
+    updateSharedEventProperties: (props: Record<string, MixpanelProperty>) => void;
     /**
      * Removes a subscribed callback
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/kyc-components",
-  "version": "2.67.1",
+  "version": "2.68.0",
   "keywords": [
     "adyen",
     "adyen-kyc",