@adyen/kyc-components 3.30.2 → 3.30.3

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

@@ -35294,11 +35294,14 @@ function RoleAndTypeDropinComponent({
     setActiveForm(targetForm);
   };
   const content = jsxs(Fragment, {
-    children: [jsx(FormNavigation, {
-      forms: formsWithValidity,
-      activeForm: formsWithValidity.find((form) => form.formId === activeForm.formId),
-      taskName: "trustMembers",
-      gotoForm: gotoFormByFormIndex
+    children: [jsx("div", {
+      className: "adyen-kyc-dropin__sidebar-wrapper",
+      children: jsx(FormNavigation, {
+        forms: formsWithValidity,
+        activeForm: formsWithValidity.find((form) => form.formId === activeForm.formId),
+        taskName: "trustMembers",
+        gotoForm: gotoFormByFormIndex
+      })
     }), jsxs("div", {
       className: "adyen-kyc-form-container",
       children: [jsx("div", {
@@ -41799,7 +41802,7 @@ const ConfigurationApiProvider = ({
     isEmbeddedDropin,
     loadingContext
   } = authContext;
-  const sdkVersion = "3.30.2";
+  const sdkVersion = "3.30.3";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -42484,7 +42487,7 @@ const DebugModal = ({
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "3.30.2",
+      sdkVersion: "3.30.3",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -42523,7 +42526,7 @@ const DebugModal = ({
       children: [jsxs("div", {
         className: "adyen-kyc-debug-modal__meta",
         children: [jsxs("span", {
-          children: ["SDK version: ", "3.30.2"]
+          children: ["SDK version: ", "3.30.3"]
         }), jsxs("span", {
           children: ["rootLegalEntityId: ", rootLegalEntityId]
         })]
@@ -42671,9 +42674,7 @@ class UIElement extends BaseElement {
                       rootLegalEntityId,
                       handleGetLegalEntity: "handleGetLegalEntity" in this.props.componentProps ? this.props.componentProps.handleGetLegalEntity : void 0,
                       children: jsx("div", {
-                        style: {
-                          width: "100%"
-                        },
+                        className: "adyen-kyc-ui-element-container-wrapper",
                         children: jsx(AutoResizer, {
                           children: jsx("div", {
                             className: "adyen-kyc-ui-element-container",

package/dist/style.css

@@ -2775,7 +2775,6 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  padding: var(--adyen-sdk-spacer-100, 32px);
   background: var(--adyen-sdk-color-background-primary, #ffffff);
   display: flex;
   flex-direction: column;
@@ -2789,9 +2788,6 @@ button[disabled]:hover {
 .adyen-kyc-dropin *::after {
   box-sizing: border-box;
 }
-.adyen-layout-xs-only .adyen-kyc-dropin {
-  padding: var(--adyen-sdk-spacer-040, 8px);
-}
 .adyen-kyc-dropin-container {
   position: relative;
   min-height: 480px;
@@ -4159,8 +4155,571 @@ button[disabled]:hover {
 .adyen-view-verification-status__button {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
-}.adyen-kyc-ui-element-container {
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-u-display-flex {
+  display: flex !important;
+}
+
+.adyen-kyc-u-display-inline-flex {
+  display: inline-flex !important;
+}
+
+.adyen-kyc-u-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.adyen-kyc-u-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.adyen-kyc-u-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.adyen-kyc-u-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.adyen-kyc-u-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.adyen-kyc-u-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.adyen-kyc-u-align-items-start {
+  align-items: start !important;
+}
+
+.adyen-kyc-u-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.adyen-kyc-u-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.adyen-kyc-u-align-items-center {
+  align-items: center !important;
+}
+
+.adyen-kyc-u-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.adyen-kyc-u-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.adyen-kyc-u-align-items-end {
+  align-items: end !important;
+}
+
+.adyen-kyc-u-justify-content-center {
+  justify-content: center !important;
+}
+
+.adyen-kyc-u-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.adyen-kyc-u-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.adyen-kyc-u-justify-content-start {
+  justify-content: start !important;
+}
+
+.adyen-kyc-u-justify-content-end {
+  justify-content: end !important;
+}
+
+.adyen-kyc-u-justify-content-left {
+  justify-content: left !important;
+}
+
+.adyen-kyc-u-justify-content-right {
+  justify-content: right !important;
+}
+
+.adyen-kyc-u-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.adyen-kyc-u-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.adyen-kyc-u-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.adyen-kyc-u-justify-content-stretch {
+  justify-content: stretch !important;
+}
+
+.adyen-kyc-u-flex-1 {
+  flex: 1 !important;
+}
+
+.adyen-kyc-u-flex-2 {
+  flex: 2 !important;
+}
+
+.adyen-kyc-u-flex-3 {
+  flex: 3 !important;
+}
+
+.adyen-kyc-u-flex-4 {
+  flex: 4 !important;
+}
+
+.adyen-kyc-u-width-full {
+  width: 100% !important;
+}
+
+.adyen-kyc-u-margin-auto {
+  margin: auto !important;
+}
+
+.adyen-kyc-u-margin-bottom-auto {
+  margin-bottom: auto !important;
+}
+
+.adyen-kyc-u-margin-left-auto {
+  margin-left: auto !important;
+}
+
+.adyen-kyc-u-margin-right-auto {
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-top-auto {
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-x-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-y-auto {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-0 {
+  margin: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-left-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-right-0 {
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-top-0 {
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-x-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-y-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-2 {
+  margin: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-left-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-right-2 {
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-top-2 {
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-x-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-y-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-4 {
+  margin: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-left-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-right-4 {
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-top-4 {
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-x-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-y-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-6 {
+  margin: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-left-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-right-6 {
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-top-6 {
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-x-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-y-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-8 {
+  margin: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-left-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-right-8 {
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-top-8 {
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-x-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-y-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-10 {
+  margin: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-left-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-right-10 {
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-top-10 {
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-x-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-y-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-12 {
+  margin: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-left-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-right-12 {
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-top-12 {
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-x-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-y-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-16 {
+  margin: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-left-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-right-16 {
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-top-16 {
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-x-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-y-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-20 {
+  margin: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-left-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-right-20 {
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-top-20 {
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-x-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-y-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-24 {
+  margin: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-left-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-right-24 {
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-top-24 {
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-x-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-y-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-32 {
+  margin: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-left-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-right-32 {
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-top-32 {
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-x-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-y-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-40 {
+  margin: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-left-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-right-40 {
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-top-40 {
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-x-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-y-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-48 {
+  margin: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-left-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-right-48 {
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-top-48 {
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-x-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-y-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-ui-element-container-wrapper {
+  width: 100%;
+}
+
+.adyen-kyc-ui-element-container {
+  box-sizing: border-box;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   position: relative;
+  padding: var(--adyen-sdk-spacer-100, 32px);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+.adyen-layout-xs-only .adyen-kyc-ui-element-container {
+  padding: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */

package/package.json

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