@adyen/kyc-components 3.89.1 → 3.90.0

package/dist/style.css

@@ -1,14 +1,148 @@
-.adyen-kyc-loader-wrapper {
+/* for container queries */
+.adyen-kyc-typography {
+  color: var(--adyen-sdk-color-label-primary, #001222);
+  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);
+  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, #001222);
+}
+.adyen-kyc-typography--secondary {
+  color: var(--adyen-sdk-color-label-secondary, #5c6874);
+}
+.adyen-kyc-typography--tertiary {
+  color: var(--adyen-sdk-color-label-tertiary, #8c959d);
+}
+.adyen-kyc-typography--disabled {
+  color: var(--adyen-sdk-color-label-disabled, #8c959d);
+}
+.adyen-kyc-typography--success {
+  color: var(--adyen-sdk-color-label-success, #008845);
+}
+.adyen-kyc-typography--warning {
+  color: var(--adyen-sdk-color-label-warning, #ab6600);
+}
+.adyen-kyc-typography--critical {
+  color: var(--adyen-sdk-color-label-critical, #dc3801);
+}
+.adyen-kyc-typography--highlight {
+  color: var(--adyen-sdk-color-label-highlight, #0f75dc);
+}
+.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, #9da5ac);
+}.adyen-kyc-loader-wrapper {
   align-items: center;
   display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-040);
   height: 100%;
   justify-content: center;
 }
 
-.adyen-kyc-loader-wrapper-inline {
-  display: inline-block;
-  height: auto;
-  margin-right: var(--adyen-sdk-spacer-040);
+.adyen-kyc-loader-text {
+  opacity: 0;
+  transform: translateY(-4px);
+  transition:
+    opacity 0.3s ease-in-out,
+    transform 0.3s ease-in-out;
+}
+
+.adyen-kyc-loader-text-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes adyen-kyc-fadeInText {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .adyen-kyc-loader {
@@ -58,15 +192,6 @@
     transform: rotate(360deg);
   }
 }
-
-.adyen-kyc-loader-dot::before {
-  background: var(--adyen-sdk-color-outline-inverse-primary);
-  border-radius: 50%;
-  content: '';
-  min-height: 6px;
-  min-width: 6px;
-  position: absolute;
-}
 .adyen-kyc-icon {
   color: inherit;
   display: inline-flex;
@@ -91,8 +216,8 @@
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
   line-height: 1;
-  min-height: 44px;
-  min-width: 44px;
+  min-height: var(--adyen-sdk-tap-target);
+  min-width: var(--adyen-sdk-tap-target);
   outline-offset: var(--adyen-sdk-focus-ring-spacer, 1px);
   outline: var(--adyen-sdk-focus-ring-outline, 3px) solid transparent;
   overflow: hidden;
@@ -105,7 +230,7 @@
   transform: scale(0.95);
 }
 .adyen-kyc-button:focus-visible {
-  outline-color: var(--adyen-sdk-color-label-primary, #001222);
+  outline-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
 }
 .adyen-kyc-button[disabled] {
   pointer-events: none;
@@ -131,7 +256,7 @@
 }
 
 .adyen-kyc-button-shape-circle {
-  border-radius: 44px;
+  border-radius: 50%;
 }
 
 .adyen-kyc-button-variant-primary {
@@ -344,120 +469,6 @@
     opacity: 1;
     transform: translate(-50%, 0);
   }
-}/* for container queries */
-.adyen-kyc-typography {
-  color: var(--adyen-sdk-color-label-primary, #001222);
-  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);
-  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, #001222);
-}
-.adyen-kyc-typography--secondary {
-  color: var(--adyen-sdk-color-label-secondary, #5c6874);
-}
-.adyen-kyc-typography--tertiary {
-  color: var(--adyen-sdk-color-label-tertiary, #8c959d);
-}
-.adyen-kyc-typography--disabled {
-  color: var(--adyen-sdk-color-label-disabled, #8c959d);
-}
-.adyen-kyc-typography--success {
-  color: var(--adyen-sdk-color-label-success, #008845);
-}
-.adyen-kyc-typography--warning {
-  color: var(--adyen-sdk-color-label-warning, #ab6600);
-}
-.adyen-kyc-typography--critical {
-  color: var(--adyen-sdk-color-label-critical, #dc3801);
-}
-.adyen-kyc-typography--highlight {
-  color: var(--adyen-sdk-color-label-highlight, #0f75dc);
-}
-.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, #9da5ac);
 }.adyen-kyc-skeleton {
   width: 100%;
   height: 100%;
@@ -1105,6 +1116,7 @@
 @layer default {
   :root,
   :host {
+    --adyen-sdk-tap-target: 44px;
     --adyen-sdk-animation-easing-standard: cubic-bezier(0.2, 0, 0.4, 0.9);
     --adyen-sdk-animation-easing-enter: cubic-bezier(0.12, 0.6, 0.4, 0.95);
     --adyen-sdk-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
@@ -1539,8 +1551,8 @@
 }
 @media (min-width: 680px) {
   .adyen-kyc-modal-inset {
-    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
-    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
+    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + var(--adyen-sdk-tap-target));
+    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + var(--adyen-sdk-tap-target));
   }
 }
 
@@ -2064,52 +2076,24 @@
 
 .adyen-kyc-handle-pointer-events {
   pointer-events: auto;
-}.adyen-kyc-spacer {
-  flex: 1;
 }.adyen-kyc-progress-bar {
-  display: flex;
-  flex: 1;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  --step-progress-internal-height: 0.25em;
-}
-
-.adyen-kyc-progress-bar-thick li {
-  --step-progress-internal-height: 0.4em;
-}
-
-.adyen-kyc-progress-bar-thick li:first-of-type {
-  border-top-left-radius: var(--adyen-sdk-border-radius-m, 8px);
-  border-bottom-left-radius: var(--adyen-sdk-border-radius-m, 8px);
-}
-
-.adyen-kyc-progress-bar-thick li:last-of-type {
-  border-top-right-radius: var(--adyen-sdk-border-radius-m, 8px);
-  border-bottom-right-radius: var(--adyen-sdk-border-radius-m, 8px);
-}
-
-.adyen-kyc-progress-step {
-  background-color: var(--adyen-sdk-color-background-tertiary, #ecedef);
-  display: flex;
-  flex: 1;
-  height: var(--step-progress-internal-height);
+  --adyen-progress-bar-size: 4px;
+  background-color: var(--adyen-sdk-color-background-secondary);
+  height: var(--adyen-progress-bar-size);
+  overflow: hidden;
 }
 
-.adyen-kyc-progress-step-active {
-  background-color: var(--adyen-sdk-color-background-inverse-primary, #001222);
+.adyen-kyc-progress-bar-rounded {
+  border-radius: calc(var(--adyen-progress-bar-size) / 2);
 }
 
-.adyen-kyc-progress-bar-circles li {
-  flex: none;
-  width: var(--step-progress-internal-height);
-  border-radius: var(--step-progress-internal-height);
-  margin: 0 var(--step-progress-internal-height);
+.adyen-kyc-progress-bar-indicator {
+  background-color: var(--adyen-sdk-color-background-inverse-primary);
+  text-indent: -1000%;
+  transition: width 400ms;
+  overflow: hidden;
 }
-
-.adyen-kyc-progress-bar-circles .adyen-kyc-progress-step-active {
-  padding: 0 calc(var(--step-progress-internal-height) / 2);
-  margin: 0 calc(var(--step-progress-internal-height) / 2);
-}.adyen-kyc-end-state-layout {
+.adyen-kyc-end-state-layout {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -2191,7 +2175,6 @@
 }
 
 .adyen-kyc-end-state-layout-action {
-  align-items: center;
   display: flex;
   flex-direction: column;
   gap: var(--adyen-sdk-spacer-040);
@@ -2281,7 +2264,7 @@
   user-select: auto;
 }
 .adyen-kyc-alert {
-  border-radius: var(--adyen-sdk-border-radius-l);
+  border-radius: var(--adyen-sdk-border-radius-m);
   padding: var(--adyen-sdk-spacer-070);
   word-break: break-word;
   display: flex;
@@ -2345,7 +2328,7 @@
 }
 
 .adyen-kyc-alert-explanation {
-  color: var(--adyen-sdk-color-label-secondary);
+  color: var(--adyen-sdk-color-label-primary);
   font-size: var(--adyen-sdk-text-body-font-size);
   margin: 0 var(--adyen-sdk-spacer-100);
 }
@@ -2356,24 +2339,6 @@
   text-align: left;
 }
 /* for container queries */
-.adyen-action-bar {
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  display: flex;
-  align-items: center;
-  margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-}
-@container main (max-width: 680px) {
-  .adyen-action-bar {
-    flex-direction: column;
-    gap: var(--adyen-sdk-spacer-040, 8px);
-  }
-}
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-action-bar {
-    flex-flow: row-reverse;
-    justify-content: space-between;
-  }
-}/* for container queries */
 .adyen-kyc-form-navigation {
   width: 100%;
 }
@@ -2453,24 +2418,59 @@
   color: var(--adyen-sdk-color-label-critical, #dc3801);
 }.adyen-contract-viewer .adyen-document-viewer {
   --adv-text-color: var(--adyen-sdk-color-label-primary, #001222);
-  --adv-accordion-header-color: var(--adyen-sdk-color-label-primary, #001222);
+  --adv-text-font-weight-regular: var(--adyen-sdk-text-body-font-weight, 400);
+  --adv-text-font-weight-semi-bold: var(--adyen-sdk-text-body-stronger-font-weight, 500);
+  --adv-text-line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  --adv-text-font-size-medium: var(--adyen-sdk-text-body-font-size, 14px);
+  --adv-text-font-size-small: var(--adyen-sdk-text-caption-font-size, 12px);
   --adv-text-font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  --adv-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  --adv-section-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  --adv-heading-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
+  --adv-heading-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
+  --adv-heading-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
+  --adv-heading-2-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
+  --adv-heading-2-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
+  --adv-heading-2-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
+  --adv-color-white: var(--adyen-sdk-color-background-primary, #ffffff);
+  --adv-color-grey-10: var(--adyen-sdk-color-background-secondary, #f4f5f6);
+  --adv-color-grey-20: var(--adyen-sdk-color-background-tertiary, #ecedef);
+  --adv-color-black: var(--adyen-sdk-color-background-inverse-primary, #001222);
+  --adv-color-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
+  --adv-accordion-header-color: var(--adyen-sdk-color-label-primary, #001222);
+  --adv-accordion-header-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
   --adv-accordion-header-hover-background-color: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
-  --adv-table-row-changed-background-color: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
   --adv-accordion-header-active-background-color: var(--adyen-sdk-color-background-primary-active, #ecedef);
   --adv-accordion-content-padding: 0;
+  --adv-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  --adv-section-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  --adv-table-row-changed-background-color: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
   --adv-icon-color: var(--adyen-sdk-color-label-primary, #001222);
   --adv-link-color: var(--adyen-sdk-color-link-primary, #0065c9);
+  --adv-link-active-color: var(--adyen-sdk-color-link-primary, #0065c9);
+  --adv-link-visited-color: var(--adyen-sdk-color-link-primary-visited, #540884);
 }.adyen-document-viewer{--adv-color-white: #fff;--adv-color-black: #00112c;--adv-color-grey-10: #f3f6f9;--adv-color-grey-20: #dce0e5;--adv-color-blue: #06f;--adv-background-color: var(--adv-color-white);--adv-text-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--adv-text-color: var(--adv-color-black);--adv-text-font-weight-regular: 400;--adv-text-font-weight-semi-bold: 600;--adv-text-line-height: 1.4;--adv-text-font-size-medium: 15px;--adv-text-font-size-small: 13px;--adv-border-width: 1px;--adv-border-style: solid;--adv-border-color: var(--adv-color-grey-20);--adv-border-radius: 6px;--adv-transition-duration: .1s;--adv-transition-function: cubic-bezier(.785, .135, .15, .86);--adv-focus-ring-transition-duration: var(--adv-transition-duration);--adv-focus-ring-timing-function: var(--adv-transition-function);--adv-focus-ring-color: rgba(0, 102, 255, .4);--adv-focus-ring-distance: 1px;--adv-focus-ring-width: 3px;--adv-focus-ring-z-index: 1;--adv-focus-ring-background-color: var(--adv-color-white);--adv-spacing-0: 0;--adv-spacing-2: 2px;--adv-spacing-4: 4px;--adv-spacing-8: 8px;--adv-spacing-12: 12px;--adv-spacing-16: 16px;--adv-spacing-24: 24px;--adv-spacing-32: 32px;--adv-spacing-40: 40px;--adv-spacing-48: 48px;--adv-accordion-border-radius: var(--adv-border-radius);--adv-accordion-item-border-color: var(--adv-border-color);--adv-accordion-item-border-width: var(--adv-border-width);--adv-accordion-between-items-border-color: transparent;--adv-accordion-header-color: var(--adv-color-black);--adv-accordion-header-padding: var(--adv-spacing-16);--adv-accordion-header-font-weight: var(--adv-text-font-weight-semi-bold);--adv-accordion-header-hover-background-color: var(--adv-color-grey-10);--adv-accordion-header-active-background-color: var(--adv-color-grey-20);--adv-accordion-header-border-radius: var(--adv-spacing-4);--adv-accordion-title-color: inherit;--adv-accordion-toggle-margin: var(--adv-spacing-2) var(--adv-spacing-16) 0 0;--adv-accordion-toggle-padding: 0;--adv-accordion-toggle-width: var(--adv-spacing-12);--adv-accordion-content-margin: 0 0 var(--adv-spacing-24);--adv-accordion-content-padding: 0 var(--adv-spacing-16) 0 calc(var(--adv-spacing-32) + var(--adv-spacing-12));--adv-accordion-content-closed-margin: 0;--adv-accordion-transition-duration: var(--adv-transition-duration);--adv-accordion-transition-function: var(--adv-transition-function);--adv-accordion-transition-property: margin, height, padding;--adv-accordion-css-animated-max-height: 500px;--adv-accordion-css-animated-transition-duration: var(--adv-accordion-transition-duration);--adv-accordion-css-animated-transition-property: margin, max-height;--adv-heading-font-size: 32px;--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-line-height: 40px;--adv-heading-text-align: left;--adv-heading-2-font-size: 24px;--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);--adv-heading-2-line-height: 32px;--adv-icon-color: var(--adv-color-black);--adv-link-color: var(--adv-color-blue);--adv-link-background-color: transparent;--adv-link-text-decoration: none;--adv-link-hover-text-decoration: underline;--adv-link-active-color: var(--adv-link-color);--adv-link-focus-outline: none;--adv-link-visited-color: var(--adv-link-color);--adv-link-inherit-font-size: inherit;--adv-link-inherit-color: inherit;--adv-link-underline-color: inherit;--adv-list-margin: 0;--adv-list-padding: 0 0 0 18px;--adv-list-nested-padding: var(--adv-list-padding);--adv-list-item-padding: 0 0 0 var(--adv-spacing-4);--adv-list-no-markers-padding: 0;--adv-list-no-markers-list-style: none;--adv-section-background-color: var(--adv-color-grey-10);--adv-section-border-radius: var(--adv-border-radius);--adv-section-margin: var(--adv-spacing-24) 0 0 0;--adv-section-padding: var(--adv-spacing-16);--adv-table-width: 100%;--adv-table-margin: 0;--adv-table-padding: 0;--adv-table-border: none;--adv-table-vertical-align: top;--adv-table-line-height: 16px;--adv-table-row-border-width: var(--adv-border-width);--adv-table-row-border-style: var(--adv-border-style);--adv-table-row-border-color: var(--adv-border-color);--adv-table-row-border: var(--adv-table-row-border-width) var(--adv-table-row-border-style) var(--adv-table-row-border-color);--adv-table-row-changed-background-color: var(--adv-color-grey-10);--adv-table-cell-padding-top: var(--adv-spacing-12);--adv-table-cell-padding-right: calc(var(--adv-spacing-16) + var(--adv-spacing-24));--adv-table-cell-padding-bottom: var(--adv-spacing-12);--adv-table-cell-padding-left: var(--adv-spacing-16);--adv-table-cell-padding: var(--adv-table-cell-padding-top) var(--adv-table-cell-padding-right) var(--adv-table-cell-padding-bottom) var(--adv-table-cell-padding-left);--adv-table-cell-text-align: left;--adv-table-first-column-padding-left: var(--adv-spacing-24);--adv-table-condensed-cell-padding-y: var(--adv-spacing-8);--adv-table-condensed-cell-padding: var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-right) var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-left);--adv-table-condensed-font-size: var(--adv-text-font-size-small)}.adv-u-text-align-center{text-align:center!important}.adv-u-margin-bottom-16{margin-bottom:var(--adv-spacing-16)!important}.adv-u-margin-bottom-48{margin-bottom:var(--adv-spacing-48)!important}.adv-u-margin-top-24{margin-top:var(--adv-spacing-24)!important}.adv-u-margin-y-8{margin-bottom:var(--adv-spacing-8)!important;margin-top:var(--adv-spacing-8)!important}.adv-u-font-weight-regular{font-weight:var(--adv-text-font-weight-regular)!important}.adv-u-font-weight-semi-bold{font-weight:var(--adv-text-font-weight-semi-bold)!important}.adv-u-font-italic{font-style:italic!important}.adyen-document-viewer{background-color:var(--adv-background-color)}.adv-accordion{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-accordion *,.adv-accordion *:before,.adv-accordion *:after{box-sizing:border-box}.adv-accordion--container{border:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);border-radius:var(--adv-accordion-border-radius)}.adv-accordion--container .adv-accordion__item:first-child{border-top-color:transparent}.adv-accordion--container .adv-accordion__item:first-child>.adv-accordion__header{border-radius:var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius) 0 0}.adv-accordion--container .adv-accordion__item:last-child{border-bottom-color:transparent}.adv-accordion--container .adv-accordion__item:last-child:not(.adv-accordion__item--open)>.adv-accordion__header{border-radius:0 0 var(--adv-accordion-header-border-radius) var(--adv-accordion-header-border-radius)}.adv-bigskip{height:var(--adv-text-font-size-medium)}.adv-heading{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-heading *,.adv-heading *:before,.adv-heading *:after{box-sizing:border-box}.adv-heading{display:block;font-size:var(--adv-heading-font-size);font-weight:var(--adv-heading-font-weight);line-height:var(--adv-heading-line-height);margin:0;padding:0;text-align:var(--adv-heading-text-align)}.adv-heading--2{font-size:var(--adv-heading-2-font-size);font-weight:var(--adv-heading-2-font-weight);line-height:var(--adv-heading-2-line-height)}.adv-link{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-link *,.adv-link *:before,.adv-link *:after{box-sizing:border-box}.adv-link{background-color:var(--adv-link-background-color);border:0;color:var(--adv-link-color);cursor:pointer;display:inline;max-width:300px;overflow:hidden;padding:0;text-decoration:var(--adv-link-text-decoration);text-overflow:ellipsis;vertical-align:baseline}.adv-link:hover{text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:active{color:var(--adv-link-active-color)}.adv-link:focus{outline:var(--adv-link-focus-outline);text-decoration:var(--adv-link-hover-text-decoration)}.adv-link:visited{color:var(--adv-link-visited-color)}.adv-list{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-list *,.adv-list *:before,.adv-list *:after{box-sizing:border-box}.adv-list{display:block;list-style-position:outside;list-style-type:disc;margin:var(--adv-list-margin);padding:var(--adv-list-padding)}.adv-list--no-markers{list-style:var(--adv-list-no-markers-list-style);padding:var(--adv-list-no-markers-padding)}.adv-list--no-markers .adv-list__item{padding-left:0}.adv-list__item{padding:var(--adv-list-item-padding)}.adv-list__item--no-marker{list-style:var(--adv-list-no-markers-list-style)}.adv-list--nested{list-style-type:circle;padding:var(--adv-list-nested-padding)}.adv-list--ordered{list-style-type:decimal}.adv-paragraph{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-paragraph *,.adv-paragraph *:before,.adv-paragraph *:after{box-sizing:border-box}.adv-paragraph{margin-bottom:0;margin-top:0}.adv-paragraph:not(:first-child){margin-top:var(--adv-spacing-16)}.adv-section-box{background-color:var(--adv-section-background-color);border-radius:var(--adv-section-border-radius);margin:var(--adv-section-margin);padding:var(--adv-section-padding)}.adv-accordion__item{border-bottom:var(--adv-accordion-item-border-width) solid var(--adv-accordion-between-items-border-color);border-top:var(--adv-accordion-item-border-width) solid var(--adv-accordion-item-border-color);position:relative}.adv-accordion__item:last-child{border-bottom-color:var(--adv-accordion-item-border-color)}.adv-accordion__item--open{overflow:visible}.adv-accordion__header{color:var(--adv-accordion-header-color);cursor:pointer;display:flex;padding:var(--adv-accordion-header-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__header:hover{background-color:var(--adv-accordion-header-hover-background-color)}.adv-accordion__header:active{background-color:var(--adv-accordion-header-active-background-color)}.adv-accordion__header:focus{box-shadow:0 0 0 var(--adv-focus-ring-distance) var(--adv-focus-ring-background-color),0 0 0 var(--adv-focus-ring-width) var(--adv-focus-ring-color);transition:var(--adv-focus-ring-transition-duration) var(--adv-focus-ring-timing-function);transition-property:box-shadow;outline:none}.adv-accordion__title-wrapper{flex:1}.adv-accordion__title{color:var(--adv-accordion-title-color);font-weight:var(--adv-accordion-header-font-weight)}.adv-accordion__toggle{line-height:1;margin:var(--adv-accordion-toggle-margin);padding:var(--adv-accordion-toggle-padding);width:var(--adv-accordion-toggle-width)}.adv-accordion__content{box-sizing:border-box;margin:var(--adv-accordion-content-margin);overflow-x:auto;overflow-y:hidden;padding:var(--adv-accordion-content-padding);transition-duration:var(--adv-accordion-transition-duration);transition-property:var(--adv-accordion-transition-property)}.adv-accordion__item>.adv-accordion__content{margin:var(--adv-accordion-content-closed-margin)}.adv-accordion__item--open>.adv-accordion__content{margin:var(--adv-accordion-content-margin)}.adv-accordion--max-height-transition .adv-accordion__item>.adv-accordion__content{max-height:0;transition-duration:var(--adv-accordion-css-animated-transition-duration);transition-property:var(--adv-accordion-css-animated-transition-property)}.adv-accordion--max-height-transition .adv-accordion__item--open>.adv-accordion__content{max-height:var(--adv-accordion-css-animated-max-height)}.adv-collapsible-container{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-collapsible-container *,.adv-collapsible-container *:before,.adv-collapsible-container *:after{box-sizing:border-box}.adv-collapsible-container{overflow:hidden;transition:height var(--adv-accordion-transition-duration) var(--adv-accordion-transition-function)}.adv-icon{display:inline-block;fill:var(--adv-icon-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;line-height:1;position:relative;speak:none;text-transform:none;vertical-align:baseline}.adv-table{color:var(--adv-text-color);font-family:var(--adv-text-font-family);font-size:var(--adv-text-font-size-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:var(--adv-text-font-weight-regular);line-height:var(--adv-text-line-height)}.adv-table *,.adv-table *:before,.adv-table *:after{box-sizing:border-box}.adv-table{border:var(--adv-table-border);border-collapse:collapse;border-spacing:0;line-height:var(--adv-table-line-height);margin:var(--adv-table-margin);padding:var(--adv-table-padding);text-align:left;width:var(--adv-table-width)}.adv-table--condensed .adv-table__cell{font-size:var(--adv-table-condensed-font-size);padding:var(--adv-table-condensed-cell-padding)}.adv-table__row{vertical-align:var(--adv-table-vertical-align);border-bottom:var(--adv-table-row-border)}.adv-table__row--changed{background-color:var(--adv-table-row-changed-background-color)}.adv-table__body{vertical-align:var(--adv-table-vertical-align)}.adv-table__body .adv-table__row:hover{background-color:var(--adv-table-row-changed-background-color)}.adv-table__cell{border-left:var(--adv-border-width) solid transparent;border-right:var(--adv-border-width) solid transparent;overflow:auto;padding:var(--adv-table-cell-padding);text-align:var(--adv-table-cell-text-align);vertical-align:inherit}.adv-table__cell:first-child,.adv-table__cell--first-column{padding-left:var(--adv-table-first-column-padding-left)}
 .adyen-kyc-tos-signed-alert:last-of-type {
   margin-top: var(--adyen-sdk-spacer-070);
 }
 
+.adyen-kyc-tos-container {
+  height: 100%;
+}
+
 .adyen-kyc-tos-content {
   display: flex;
-  height: 100%;
+  padding: var(--adyen-sdk-spacer-070);
+}
+
+.adyen-kyc-tos-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--adyen-sdk-spacer-040);
+  padding: var(--adyen-sdk-spacer-070);
+
+  &:has(> :only-child) {
+    justify-content: flex-end;
+  }
 }
 /* for container queries */
 .adyen-kyc-status {
@@ -3202,24 +3202,7 @@ fieldset {
 .adyen-kyc-summary-content-logo {
   height: 28px;
   width: 100px;
-}.adyen-kyc-progress-bar {
-  --adyen-progress-bar-size: 4px;
-  background-color: var(--adyen-sdk-color-background-secondary);
-  height: var(--adyen-progress-bar-size);
-  overflow: hidden;
-}
-
-.adyen-kyc-progress-bar-rounded {
-  border-radius: calc(var(--adyen-progress-bar-size) / 2);
-}
-
-.adyen-kyc-progress-bar-indicator {
-  background-color: var(--adyen-sdk-color-background-inverse-primary);
-  text-indent: -1000%;
-  transition: width 400ms;
-  overflow: hidden;
-}
-.adyen-kyc-form-flow {
+}.adyen-kyc-form-flow {
   container-type: inline-size;
   width: 100%;
   min-height: 100%;
@@ -3240,8 +3223,8 @@ fieldset {
 }
 @container (min-width: 599px) {
   .adyen-kyc-form-flow-content {
-    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
-    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
+    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + var(--adyen-sdk-tap-target));
+    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + var(--adyen-sdk-tap-target));
   }
 }
 
@@ -3270,9 +3253,10 @@ fieldset {
   padding: var(--adyen-sdk-spacer-070, 16px);
 }
 
-.adyen-kyc-form-flow-action-group {
+.adyen-kyc-form-flow-primary-actions {
   display: flex;
   gap: var(--adyen-sdk-spacer-040, 8px);
+  margin-left: auto;
 }.adyen-kyc-business-financing-lei-radio {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 170px));
@@ -3537,6 +3521,8 @@ input.adyen-kyc-radio-group-card__radio--floating {
   75% {
     transform: translateX(4px);
   }
+}.adyen-kyc-spacer {
+  flex: 1;
 }.adyen-kyc-description-field {
   padding: var(--adyen-sdk-spacer-080, 20px) 0;
 }.adyen-kyc-document-upload__subtitle {
@@ -3923,6 +3909,49 @@ input.adyen-kyc-radio-group-card__radio--floating {
 
 .adyen-kyc-idnow-verification-header-image svg {
   max-width: 180px;
+}.adyen-kyc-progress-bar {
+  display: flex;
+  flex: 1;
+  padding: var(--adyen-sdk-spacer-000, 0px);
+  margin: var(--adyen-sdk-spacer-000, 0px);
+  --step-progress-internal-height: 0.25em;
+}
+
+.adyen-kyc-progress-bar-thick li {
+  --step-progress-internal-height: 0.4em;
+}
+
+.adyen-kyc-progress-bar-thick li:first-of-type {
+  border-top-left-radius: var(--adyen-sdk-border-radius-m, 8px);
+  border-bottom-left-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+
+.adyen-kyc-progress-bar-thick li:last-of-type {
+  border-top-right-radius: var(--adyen-sdk-border-radius-m, 8px);
+  border-bottom-right-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+
+.adyen-kyc-progress-step {
+  background-color: var(--adyen-sdk-color-background-tertiary, #ecedef);
+  display: flex;
+  flex: 1;
+  height: var(--step-progress-internal-height);
+}
+
+.adyen-kyc-progress-step-active {
+  background-color: var(--adyen-sdk-color-background-inverse-primary, #001222);
+}
+
+.adyen-kyc-progress-bar-circles li {
+  flex: none;
+  width: var(--step-progress-internal-height);
+  border-radius: var(--step-progress-internal-height);
+  margin: 0 var(--step-progress-internal-height);
+}
+
+.adyen-kyc-progress-bar-circles .adyen-kyc-progress-step-active {
+  padding: 0 calc(var(--step-progress-internal-height) / 2);
+  margin: 0 calc(var(--step-progress-internal-height) / 2);
 }/* for container queries */
 .adyen-kyc-form-container {
   width: 100%;
@@ -3955,6 +3984,24 @@ input.adyen-kyc-radio-group-card__radio--floating {
   .adyen-kyc-form-with-sidebar {
     flex-direction: column;
   }
+}/* for container queries */
+.adyen-action-bar {
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  display: flex;
+  align-items: center;
+  margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+}
+@container main (max-width: 680px) {
+  .adyen-action-bar {
+    flex-direction: column;
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
+}
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-action-bar {
+    flex-flow: row-reverse;
+    justify-content: space-between;
+  }
 }.adyen-kyc-tag {
   display: inline-block;
   font-size: var(--adyen-sdk-text-caption-font-size);
@@ -5590,18 +5637,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
   margin: 0 var(--adyen-sdk-spacer-070, 16px);
   padding: var(--adyen-sdk-spacer-070, 16px) 0;
   border-top: var(--adyen-sdk-border-default-s);
-}/* for container queries */
-.adyen-kyc-business-details {
-  min-height: 480px;
-}
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-kyc-business-details .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
-    margin-left: 0;
-  }
-}
-.adyen-kyc-business-details--hide,
-.adyen-kyc-business-details [class*="--hide"] {
-  display: none;
 }.adyen-kyc-window {
   position: relative;
   margin-left: calc(50% - 50cqw);