@adyen/kyc-components 4.24.0 → 4.25.0-beta.0

package/dist/style.css

@@ -231,7 +231,7 @@
 ._svg-image_cdxs7_18 {
   display: inline-block;
 }
-._button_hk0u4_1 {
+._button_1jv3j_1 {
   border: 1px solid transparent;
   box-sizing: border-box;
   cursor: pointer;
@@ -250,62 +250,62 @@
   white-space: nowrap;
 }
 
-._button_hk0u4_1:active {
+._button_1jv3j_1:active {
   transform: scale(0.95);
 }
 
-._button_hk0u4_1:focus-visible {
+._button_1jv3j_1:focus-visible {
   outline-color: var(--adyen-internal-focus-ring-color);
 }
 
-._button_hk0u4_1[disabled] {
+._button_1jv3j_1[disabled] {
   pointer-events: none;
 }
 
-._button-full-width_hk0u4_32 {
+._button-full-width_1jv3j_32 {
   width: 100%;
 }
 
-._button-label_hk0u4_36 {
+._button-label_1jv3j_36 {
   align-items: center;
   display: flex;
   gap: var(--adyen-internal-spacer-040);
   justify-content: center;
 }
 
-._button-label-padding_hk0u4_43 {
+._button-label-padding_1jv3j_43 {
   padding: var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-070);
 }
 
-._button-shape-rectangle_hk0u4_47 {
+._button-shape-rectangle_1jv3j_47 {
   border-radius: var(--adyen-internal-border-radius-m);
 }
 
-._button-shape-circle_hk0u4_51 {
+._button-shape-circle_1jv3j_51 {
   border-radius: 50%;
 }
 
-._button-variant-primary_hk0u4_55 {
+._button-variant-primary_1jv3j_55 {
   background-color: var(--adyen-internal-color-background-inverse-primary);
   color: var(--adyen-internal-color-label-inverse-primary);
   fill: var(--adyen-internal-color-label-inverse-primary);
 }
 
 @media (hover: hover) {
-  ._button-variant-primary_hk0u4_55:hover {
+  ._button-variant-primary_1jv3j_55:hover {
     background-color: var(--adyen-internal-color-background-inverse-primary-hover);
     color: var(--adyen-internal-color-label-inverse-primary-hover);
     fill: var(--adyen-internal-color-label-inverse-primary-hover);
   }
 }
 
-._button-variant-primary_hk0u4_55[disabled] {
+._button-variant-primary_1jv3j_55[disabled] {
   background-color: var(--adyen-internal-color-background-disabled);
   color: var(--adyen-internal-color-label-disabled);
   fill: var(--adyen-internal-color-label-disabled);
 }
 
-._button-variant-secondary_hk0u4_75 {
+._button-variant-secondary_1jv3j_75 {
   background-color: var(--adyen-internal-color-background-primary);
   color: var(--adyen-internal-color-label-primary);
   fill: var(--adyen-internal-color-label-primary);
@@ -313,7 +313,7 @@
 }
 
 @media (hover: hover) {
-  ._button-variant-secondary_hk0u4_75:hover {
+  ._button-variant-secondary_1jv3j_75:hover {
     background-color: var(--adyen-internal-color-background-primary-hover);
     border-color: var(--adyen-internal-color-outline-primary-hover);
     color: var(--adyen-internal-color-label-primary-hover);
@@ -321,51 +321,51 @@
   }
 }
 
-._button-variant-secondary_hk0u4_75[disabled] {
+._button-variant-secondary_1jv3j_75[disabled] {
   border-color: var(--adyen-internal-color-outline-primary-disabled);
   color: var(--adyen-internal-color-label-disabled);
   fill: var(--adyen-internal-color-label-disabled);
 }
 
-._button-variant-tertiary_hk0u4_97 {
+._button-variant-tertiary_1jv3j_97 {
   background-color: transparent;
   color: var(--adyen-internal-color-label-primary);
   fill: var(--adyen-internal-color-label-primary);
 }
 
 @media (hover: hover) {
-  ._button-variant-tertiary_hk0u4_97:hover {
+  ._button-variant-tertiary_1jv3j_97:hover {
     background-color: var(--adyen-internal-color-background-primary-hover);
     color: var(--adyen-internal-color-label-primary-hover);
     fill: var(--adyen-internal-color-label-primary-hover);
   }
 }
 
-._button-variant-tertiary_hk0u4_97[disabled] {
+._button-variant-tertiary_1jv3j_97[disabled] {
   background-color: var(--adyen-internal-color-background-disabled);
   color: var(--adyen-internal-color-label-disabled);
   fill: var(--adyen-internal-color-label-disabled);
 }
 
-._button-variant-critical_hk0u4_117 {
+._button-variant-critical_1jv3j_117 {
   background-color: var(--adyen-internal-color-background-critical-strong);
   color: var(--adyen-internal-color-label-on-color);
   fill: var(--adyen-internal-color-label-on-color);
 }
 
 @media (hover: hover) {
-  ._button-variant-critical_hk0u4_117:hover {
+  ._button-variant-critical_1jv3j_117:hover {
     background-color: var(--adyen-internal-color-background-critical-strong-hover);
   }
 }
 
-._button-variant-critical_hk0u4_117[disabled] {
+._button-variant-critical_1jv3j_117[disabled] {
   background-color: var(--adyen-internal-color-background-disabled);
   color: var(--adyen-internal-color-label-disabled);
   fill: var(--adyen-internal-color-label-disabled);
 }
 
-._button-variant-link_hk0u4_135 {
+._button-variant-link_1jv3j_135 {
   background-color: transparent;
   color: var(--adyen-internal-color-label-primary);
   fill: var(--adyen-internal-color-label-primary);
@@ -376,28 +376,28 @@
 }
 
 @media (hover: hover) {
-  ._button-variant-link_hk0u4_135:hover {
+  ._button-variant-link_1jv3j_135:hover {
     color: var(--adyen-internal-color-label-primary-hover);
     fill: var(--adyen-internal-color-label-primary-hover);
     text-decoration: none;
   }
 }
 
-._button-variant-surface_hk0u4_153 {
+._button-variant-surface_1jv3j_153 {
   background-color: var(--adyen-internal-color-background-secondary);
   color: var(--adyen-internal-color-label-primary);
   fill: var(--adyen-internal-color-label-primary);
 }
 
 @supports (backdrop-filter: blur(10px)) {
-  ._button-variant-surface_hk0u4_153 {
+  ._button-variant-surface_1jv3j_153 {
     backdrop-filter: blur(10px);
     background-color: rgb(from var(--adyen-internal-color-background-secondary) r g b / 0.05);
   }
 }
 
 @media (hover: hover) {
-  ._button-variant-surface_hk0u4_153:hover {
+  ._button-variant-surface_1jv3j_153:hover {
     background-color: var(--adyen-internal-color-background-secondary-hover);
     color: var(--adyen-internal-color-label-primary-hover);
     fill: var(--adyen-internal-color-label-primary-hover);
@@ -406,7 +406,7 @@
 
 @media (hover: hover) {
   @supports (backdrop-filter: blur(10px)) {
-    ._button-variant-surface_hk0u4_153:hover {
+    ._button-variant-surface_1jv3j_153:hover {
       background-color: rgb(
         from var(--adyen-internal-color-background-secondary-hover) r g b / 0.1
       );
@@ -414,14 +414,17 @@
   }
 }
 
-._button-variant-surface_hk0u4_153[disabled] {
+._button-variant-surface_1jv3j_153[disabled] {
   background-color: var(--adyen-internal-color-background-secondary);
   color: var(--adyen-internal-color-label-disabled);
   fill: var(--adyen-internal-color-label-disabled);
 }
 
-._button-spinner_hk0u4_190 {
-  animation: _present-spinner_hk0u4_1 400ms var(--adyen-internal-animation-easing-enter);
+._button-invisible-content_1jv3j_190 {
+  visibility: hidden; /** keep lenght of button, hide contents for spinner */
+}
+._button-spinner_1jv3j_193 {
+  animation: _present-spinner_1jv3j_1 400ms var(--adyen-internal-animation-easing-enter);
   background-color: inherit;
   bottom: 0;
   left: 0;
@@ -430,7 +433,7 @@
   top: 0;
 }
 
-@keyframes _present-spinner_hk0u4_1 {
+@keyframes _present-spinner_1jv3j_1 {
   0% {
     opacity: 0;
     transform: scale(0);
@@ -1624,24 +1627,12 @@ fieldset {
   --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
   --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
   --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
-  --adyen-internal-shadow-high-border: var(
-    --adyen-sdk-shadow-high-border,
-    0px 18px 36px rgba(0, 18, 34, 0.12),
-    0px 4px 8px rgba(0, 18, 34, 0.06),
-    0px 0px 0px 1px rgba(218, 221, 223, 1)
-  );
   --adyen-internal-shadow-medium-border: var(
     --adyen-sdk-shadow-medium-border,
     0px 6px 12px rgba(0, 18, 34, 0.08),
     0px 2px 4px rgba(0, 18, 34, 0.04),
     0px 0px 0px 1px rgba(218, 221, 223, 1)
   );
-  --adyen-internal-shadow-low-border: var(
-    --adyen-sdk-shadow-low-border,
-    0px 2px 4px rgba(0, 18, 34, 0.04),
-    0px 1px 2px rgba(0, 18, 34, 0.02),
-    0px 0px 0px 1px rgba(218, 221, 223, 1)
-  );
   --adyen-internal-shadow-high: var(
     --adyen-sdk-shadow-high,
     0px 18px 36px rgba(0, 18, 34, 0.12),
@@ -1657,18 +1648,6 @@ fieldset {
     0px 2px 4px rgba(0, 18, 34, 0.04),
     0px 1px 2px rgba(0, 18, 34, 0.02)
   );
-  --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
-  --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
-  --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
-  --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
-  --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
-  --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
-  --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
-  --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
-  --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
-  --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
-  --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
-  --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
   --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
   --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
   --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
@@ -1676,15 +1655,8 @@ fieldset {
   --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 8px);
   --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 6px);
   --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
-  --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
   --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
-  --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
   --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
-  --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
-  --adyen-internal-animation-easing-exit: var(
-    --adyen-sdk-animation-easing-exit,
-    cubic-bezier(0.4, 0, 1, 1)
-  );
   --adyen-internal-animation-easing-enter: var(
     --adyen-sdk-animation-easing-enter,
     cubic-bezier(0.12, 0.6, 0.4, 0.95)
@@ -1693,30 +1665,6 @@ fieldset {
     --adyen-sdk-animation-easing-standard,
     cubic-bezier(0.2, 0, 0.4, 0.9)
   );
-  --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
-  --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
-  --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
-  --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
-  --adyen-internal-z-index-global-instant-interaction: var(
-    --adyen-sdk-z-index-global-instant-interaction,
-    15
-  );
-  --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
-  --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
-  --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
-  --adyen-internal-text-eyebrow-letter-spacing: var(--adyen-sdk-text-eyebrow-letter-spacing, 0);
-  --adyen-internal-text-eyebrow-line-height: var(--adyen-sdk-text-eyebrow-line-height, 18px);
-  --adyen-internal-text-eyebrow-font-weight: var(--adyen-sdk-text-eyebrow-font-weight, 400);
-  --adyen-internal-text-eyebrow-font-size: var(--adyen-sdk-text-eyebrow-font-size, 12px);
-  --adyen-internal-text-eyebrow-font-family-secondary: var(
-    --adyen-sdk-text-eyebrow-font-family-secondary,
-    'Adyen Mono',
-    'Roboto Mono',
-    'Oxygen Mono',
-    'IBM Plex Mono',
-    'Courier New',
-    monospace
-  );
   --adyen-internal-text-title-l-mobile-line-height: var(
     --adyen-sdk-text-title-l-mobile-line-height,
     30px
@@ -1807,14 +1755,6 @@ fieldset {
     Arial,
     sans-serif
   );
-  --adyen-internal-text-subtitle-stronger-font-weight: var(
-    --adyen-sdk-text-subtitle-stronger-font-weight,
-    500
-  );
-  --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
-  --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
-  --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 400);
-  --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
   --adyen-internal-text-subtitle-font-family: var(
     --adyen-sdk-text-subtitle-font-family,
     'Adyen UI',
@@ -1825,31 +1765,14 @@ fieldset {
     Arial,
     sans-serif
   );
-  --adyen-internal-text-body-strongest-wide-line-height: var(
-    --adyen-sdk-text-body-strongest-wide-line-height,
-    24px
-  );
-  --adyen-internal-text-body-strongest-wide-font-weight: var(
-    --adyen-sdk-text-body-strongest-wide-font-weight,
-    700
-  );
   --adyen-internal-text-body-strongest-font-weight: var(
     --adyen-sdk-text-body-strongest-font-weight,
     700
   );
-  --adyen-internal-text-body-stronger-wide-line-height: var(
-    --adyen-sdk-text-body-stronger-wide-line-height,
-    24px
-  );
-  --adyen-internal-text-body-stronger-wide-font-weight: var(
-    --adyen-sdk-text-body-stronger-wide-font-weight,
-    500
-  );
   --adyen-internal-text-body-stronger-font-weight: var(
     --adyen-sdk-text-body-stronger-font-weight,
     500
   );
-  --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
   --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
   --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
   --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
@@ -1873,22 +1796,10 @@ fieldset {
     Arial,
     sans-serif
   );
-  --adyen-internal-text-caption-stronger-wide-line-height: var(
-    --adyen-sdk-text-caption-stronger-wide-line-height,
-    20px
-  );
-  --adyen-internal-text-caption-stronger-wide-font-weight: var(
-    --adyen-sdk-text-caption-stronger-wide-font-weight,
-    500
-  );
   --adyen-internal-text-caption-stronger-font-weight: var(
     --adyen-sdk-text-caption-stronger-font-weight,
     500
   );
-  --adyen-internal-text-caption-wide-line-height: var(
-    --adyen-sdk-text-caption-wide-line-height,
-    20px
-  );
   --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
   --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
   --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
@@ -1912,34 +1823,6 @@ fieldset {
     Arial,
     sans-serif
   );
-  --adyen-internal-text-rich-text-caption-pre-line-height: var(
-    --adyen-sdk-text-rich-text-caption-pre-line-height,
-    20px
-  );
-  --adyen-internal-text-rich-text-table-caption-line-height: var(
-    --adyen-sdk-text-rich-text-table-caption-line-height,
-    20px
-  );
-  --adyen-internal-text-rich-text-table-header-font-weight: var(
-    --adyen-sdk-text-rich-text-table-header-font-weight,
-    700
-  );
-  --adyen-internal-text-rich-text-table-line-height: var(
-    --adyen-sdk-text-rich-text-table-line-height,
-    20px
-  );
-  --adyen-internal-text-rich-text-blockquote-font-weight: var(
-    --adyen-sdk-text-rich-text-blockquote-font-weight,
-    400
-  );
-  --adyen-internal-text-rich-text-pre-line-height: var(
-    --adyen-sdk-text-rich-text-pre-line-height,
-    24px
-  );
-  --adyen-internal-text-rich-text-code-font-weight: var(
-    --adyen-sdk-text-rich-text-code-font-weight,
-    500
-  );
   --adyen-internal-text-rich-text-code-font-family: var(
     --adyen-sdk-text-rich-text-code-font-family,
     'Adyen Mono',
@@ -1949,50 +1832,12 @@ fieldset {
     'Courier New',
     monospace
   );
-  --adyen-internal-text-rich-text-heading-font-weight: var(
-    --adyen-sdk-text-rich-text-heading-font-weight,
-    500
-  );
-  --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
   --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
-  --adyen-internal-color-support-page-background: var(
-    --adyen-sdk-color-support-page-background,
-    #fafafa
-  );
-  --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #111111);
   --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #111111);
-  --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #8c8c8c);
-  --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
-  --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
   --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
   --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
   --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
-  --adyen-internal-color-separator-inverse-secondary: var(
-    --adyen-sdk-color-separator-inverse-secondary,
-    #606060
-  );
-  --adyen-internal-color-separator-inverse-primary: var(
-    --adyen-sdk-color-separator-inverse-primary,
-    #3d3d3d
-  );
-  --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #d5d5d5);
   --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #e5e5e5);
-  --adyen-internal-color-outline-inverse-critical-active: var(
-    --adyen-sdk-color-outline-inverse-critical-active,
-    #ffded3
-  );
-  --adyen-internal-color-outline-inverse-critical-hover: var(
-    --adyen-sdk-color-outline-inverse-critical-hover,
-    #ffbda6
-  );
-  --adyen-internal-color-outline-inverse-critical: var(
-    --adyen-sdk-color-outline-inverse-critical,
-    #ff9a78
-  );
-  --adyen-internal-color-outline-inverse-disabled: var(
-    --adyen-sdk-color-outline-inverse-disabled,
-    #525252
-  );
   --adyen-internal-color-outline-inverse-primary-active: var(
     --adyen-sdk-color-outline-inverse-primary-active,
     #a4a4a4
@@ -2005,25 +1850,7 @@ fieldset {
     --adyen-sdk-color-outline-inverse-primary,
     #3d3d3d
   );
-  --adyen-internal-color-outline-success-active: var(
-    --adyen-sdk-color-outline-success-active,
-    #004724
-  );
-  --adyen-internal-color-outline-success-hover: var(
-    --adyen-sdk-color-outline-success-hover,
-    #006f38
-  );
-  --adyen-internal-color-outline-success: var(--adyen-sdk-color-outline-success, #007f41);
-  --adyen-internal-color-outline-critical-active: var(
-    --adyen-sdk-color-outline-critical-active,
-    #751e00
-  );
-  --adyen-internal-color-outline-critical-hover: var(
-    --adyen-sdk-color-outline-critical-hover,
-    #b42e01
-  );
   --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #ce3401);
-  --adyen-internal-color-outline-selected: var(--adyen-sdk-color-outline-selected, #111111);
   --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #dddddd);
   --adyen-internal-color-outline-tertiary-active: var(
     --adyen-sdk-color-outline-tertiary-active,
@@ -2052,73 +1879,10 @@ fieldset {
     #d5d5d5
   );
   --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #e5e5e5);
-  --adyen-internal-color-link-quiet-disabled: var(
-    --adyen-sdk-color-link-quiet-disabled,
-    rgba(17, 17, 17, 0.45)
-  );
-  --adyen-internal-color-link-quiet-active: var(
-    --adyen-sdk-color-link-quiet-active,
-    rgba(17, 17, 17, 0.64)
-  );
-  --adyen-internal-color-link-quiet-hover: var(
-    --adyen-sdk-color-link-quiet-hover,
-    rgba(17, 17, 17, 0.64)
-  );
-  --adyen-internal-color-link-quiet: var(--adyen-sdk-color-link-quiet, #111111);
-  --adyen-internal-color-link-primary-visited-active: var(
-    --adyen-sdk-color-link-primary-visited-active,
-    #710ab3
-  );
-  --adyen-internal-color-link-primary-visited-hover: var(
-    --adyen-sdk-color-link-primary-visited-hover,
-    #710ab3
-  );
   --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #540884);
-  --adyen-internal-color-link-primary-disabled: var(
-    --adyen-sdk-color-link-primary-disabled,
-    rgba(17, 17, 17, 0.45)
-  );
   --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #006bd7);
   --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #006bd7);
   --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #005ebd);
-  --adyen-internal-color-label-always-dark: var(--adyen-sdk-color-label-always-dark, #001222);
-  --adyen-internal-color-label-always-light-tertiary-active: var(
-    --adyen-sdk-color-label-always-light-tertiary-active,
-    #54616d
-  );
-  --adyen-internal-color-label-always-light-tertiary-hover: var(
-    --adyen-sdk-color-label-always-light-tertiary-hover,
-    #737e88
-  );
-  --adyen-internal-color-label-always-light-tertiary: var(
-    --adyen-sdk-color-label-always-light-tertiary,
-    #848d96
-  );
-  --adyen-internal-color-label-always-light-secondary-active: var(
-    --adyen-sdk-color-label-always-light-secondary-active,
-    #737e88
-  );
-  --adyen-internal-color-label-always-light-secondary-hover: var(
-    --adyen-sdk-color-label-always-light-secondary-hover,
-    #959da5
-  );
-  --adyen-internal-color-label-always-light-secondary: var(
-    --adyen-sdk-color-label-always-light-secondary,
-    #a6adb3
-  );
-  --adyen-internal-color-label-always-light-primary-active: var(
-    --adyen-sdk-color-label-always-light-primary-active,
-    #959da5
-  );
-  --adyen-internal-color-label-always-light-primary-hover: var(
-    --adyen-sdk-color-label-always-light-primary-hover,
-    #c8ccd0
-  );
-  --adyen-internal-color-label-always-light-primary: var(
-    --adyen-sdk-color-label-always-light-primary,
-    #ecedef
-  );
-  --adyen-internal-color-label-always-light: var(--adyen-sdk-color-label-always-light, #ffffff);
   --adyen-internal-color-label-on-background-highlight-weak: var(
     --adyen-sdk-color-label-on-background-highlight-weak,
     #005ebd
@@ -2135,30 +1899,10 @@ fieldset {
     --adyen-sdk-color-label-on-background-critical-weak,
     #b42e01
   );
-  --adyen-internal-color-label-inverse-critical-active: var(
-    --adyen-sdk-color-label-inverse-critical-active,
-    #ffded3
-  );
-  --adyen-internal-color-label-inverse-critical-hover: var(
-    --adyen-sdk-color-label-inverse-critical-hover,
-    #ffc9b6
-  );
-  --adyen-internal-color-label-inverse-critical: var(
-    --adyen-sdk-color-label-inverse-critical,
-    #ffb196
-  );
-  --adyen-internal-color-label-inverse-disabled: var(
-    --adyen-sdk-color-label-inverse-disabled,
-    #858585
-  );
   --adyen-internal-color-label-inverse-secondary: var(
     --adyen-sdk-color-label-inverse-secondary,
     #949494
   );
-  --adyen-internal-color-label-inverse-primary-active: var(
-    --adyen-sdk-color-label-inverse-primary-active,
-    #ededed
-  );
   --adyen-internal-color-label-inverse-primary-hover: var(
     --adyen-sdk-color-label-inverse-primary-hover,
     #f5f5f5
@@ -2171,15 +1915,10 @@ fieldset {
   --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #007f41);
   --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #006bd7);
   --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #a05e00);
-  --adyen-internal-color-label-critical-active: var(
-    --adyen-sdk-color-label-critical-active,
-    #751e00
-  );
-  --adyen-internal-color-label-critical-hover: var(--adyen-sdk-color-label-critical-hover, #b42e01);
   --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #ce3401);
   --adyen-internal-color-label-disabled: var(
     --adyen-sdk-color-label-disabled,
-    rgba(17, 17, 17, 0.45)
+    rgba(17, 17, 17, 0.38)
   );
   --adyen-internal-color-label-tertiary: var(
     --adyen-sdk-color-label-tertiary,
@@ -2198,158 +1937,6 @@ fieldset {
     rgba(17, 17, 17, 0.64)
   );
   --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #111111);
-  --adyen-internal-color-background-always-dark-tertiary-selected: var(
-    --adyen-sdk-color-background-always-dark-tertiary-selected,
-    #00305f
-  );
-  --adyen-internal-color-background-always-dark-tertiary-disabled: var(
-    --adyen-sdk-color-background-always-dark-tertiary-disabled,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-dark-tertiary-active: var(
-    --adyen-sdk-color-background-always-dark-tertiary-active,
-    #455460
-  );
-  --adyen-internal-color-background-always-dark-tertiary-hover: var(
-    --adyen-sdk-color-background-always-dark-tertiary-hover,
-    #3d4c5a
-  );
-  --adyen-internal-color-background-always-dark-tertiary: var(
-    --adyen-sdk-color-background-always-dark-tertiary,
-    #2f3e4d
-  );
-  --adyen-internal-color-background-always-dark-secondary-selected: var(
-    --adyen-sdk-color-background-always-dark-secondary-selected,
-    #00305f
-  );
-  --adyen-internal-color-background-always-dark-secondary-disabled: var(
-    --adyen-sdk-color-background-always-dark-secondary-disabled,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-dark-secondary-active: var(
-    --adyen-sdk-color-background-always-dark-secondary-active,
-    #455460
-  );
-  --adyen-internal-color-background-always-dark-secondary-hover: var(
-    --adyen-sdk-color-background-always-dark-secondary-hover,
-    #364553
-  );
-  --adyen-internal-color-background-always-dark-secondary: var(
-    --adyen-sdk-color-background-always-dark-secondary,
-    #213140
-  );
-  --adyen-internal-color-background-always-dark-primary-selected: var(
-    --adyen-sdk-color-background-always-dark-primary-selected,
-    #00305f
-  );
-  --adyen-internal-color-background-always-dark-primary-disabled: var(
-    --adyen-sdk-color-background-always-dark-primary-disabled,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-dark-primary-active: var(
-    --adyen-sdk-color-background-always-dark-primary-active,
-    #213140
-  );
-  --adyen-internal-color-background-always-dark-primary-hover: var(
-    --adyen-sdk-color-background-always-dark-primary-hover,
-    #132434
-  );
-  --adyen-internal-color-background-always-dark-primary: var(
-    --adyen-sdk-color-background-always-dark-primary,
-    #001222
-  );
-  --adyen-internal-color-background-always-dark-selected: var(
-    --adyen-sdk-color-background-always-dark-selected,
-    #00305f
-  );
-  --adyen-internal-color-background-always-dark-disabled: var(
-    --adyen-sdk-color-background-always-dark-disabled,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-dark-active: var(
-    --adyen-sdk-color-background-always-dark-active,
-    #8c959d
-  );
-  --adyen-internal-color-background-always-dark-hover: var(
-    --adyen-sdk-color-background-always-dark-hover,
-    #5c6874
-  );
-  --adyen-internal-color-background-always-dark: var(
-    --adyen-sdk-color-background-always-dark,
-    #001222
-  );
-  --adyen-internal-color-background-always-light-selected: var(
-    --adyen-sdk-color-background-always-light-selected,
-    #e3effb
-  );
-  --adyen-internal-color-background-always-light-disabled: var(
-    --adyen-sdk-color-background-always-light-disabled,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-light-active: var(
-    --adyen-sdk-color-background-always-light-active,
-    #ecedef
-  );
-  --adyen-internal-color-background-always-light-hover: var(
-    --adyen-sdk-color-background-always-light-hover,
-    #f4f5f6
-  );
-  --adyen-internal-color-background-always-light: var(
-    --adyen-sdk-color-background-always-light,
-    #ffffff
-  );
-  --adyen-internal-color-background-inverse-critical-strong-active: var(
-    --adyen-sdk-color-background-inverse-critical-strong-active,
-    #ffded3
-  );
-  --adyen-internal-color-background-inverse-critical-strong-hover: var(
-    --adyen-sdk-color-background-inverse-critical-strong-hover,
-    #ffbda6
-  );
-  --adyen-internal-color-background-inverse-critical-strong: var(
-    --adyen-sdk-color-background-inverse-critical-strong,
-    #ff9a78
-  );
-  --adyen-internal-color-background-inverse-critical-weak-active: var(
-    --adyen-sdk-color-background-inverse-critical-weak-active,
-    #751e00
-  );
-  --adyen-internal-color-background-inverse-critical-weak-hover: var(
-    --adyen-sdk-color-background-inverse-critical-weak-hover,
-    #681a00
-  );
-  --adyen-internal-color-background-inverse-critical-weak: var(
-    --adyen-sdk-color-background-inverse-critical-weak,
-    #5c1800
-  );
-  --adyen-internal-color-background-inverse-disabled: var(
-    --adyen-sdk-color-background-inverse-disabled,
-    #363635
-  );
-  --adyen-internal-color-background-inverse-tertiary-active: var(
-    --adyen-sdk-color-background-inverse-tertiary-active,
-    #4c4a49
-  );
-  --adyen-internal-color-background-inverse-tertiary-hover: var(
-    --adyen-sdk-color-background-inverse-tertiary-hover,
-    #3d3d3c
-  );
-  --adyen-internal-color-background-inverse-tertiary: var(
-    --adyen-sdk-color-background-inverse-tertiary,
-    #30302f
-  );
-  --adyen-internal-color-background-inverse-secondary-active: var(
-    --adyen-sdk-color-background-inverse-secondary-active,
-    #444343
-  );
-  --adyen-internal-color-background-inverse-secondary-hover: var(
-    --adyen-sdk-color-background-inverse-secondary-hover,
-    #363635
-  );
-  --adyen-internal-color-background-inverse-secondary: var(
-    --adyen-sdk-color-background-inverse-secondary,
-    #2a2a29
-  );
   --adyen-internal-color-background-inverse-primary-active: var(
     --adyen-sdk-color-background-inverse-primary-active,
     #3d3d3c
@@ -2362,18 +1949,6 @@ fieldset {
     --adyen-sdk-color-background-inverse-primary,
     #111110
   );
-  --adyen-internal-color-background-navigation-active: var(
-    --adyen-sdk-color-background-navigation-active,
-    #9dedc6
-  );
-  --adyen-internal-color-background-navigation-hover: var(
-    --adyen-sdk-color-background-navigation-hover,
-    #b8f2d6
-  );
-  --adyen-internal-color-background-navigation: var(
-    --adyen-sdk-color-background-navigation,
-    #cef6e2
-  );
   --adyen-internal-color-background-highlight-strong: var(
     --adyen-sdk-color-background-highlight-strong,
     #0f75dc
@@ -2394,14 +1969,6 @@ fieldset {
     --adyen-sdk-color-background-warning-strong,
     #cb7800
   );
-  --adyen-internal-color-background-warning-weak-active: var(
-    --adyen-sdk-color-background-warning-weak-active,
-    #ffd79c
-  );
-  --adyen-internal-color-background-warning-weak-hover: var(
-    --adyen-sdk-color-background-warning-weak-hover,
-    #ffe0b3
-  );
   --adyen-internal-color-background-warning-weak: var(
     --adyen-sdk-color-background-warning-weak,
     #ffecd0
@@ -2418,57 +1985,19 @@ fieldset {
     --adyen-sdk-color-background-critical-strong,
     #dc3801
   );
-  --adyen-internal-color-background-critical-weak-active: var(
-    --adyen-sdk-color-background-critical-weak-active,
-    #ffd3c5
-  );
-  --adyen-internal-color-background-critical-weak-hover: var(
-    --adyen-sdk-color-background-critical-weak-hover,
-    #ffded3
-  );
   --adyen-internal-color-background-critical-weak: var(
     --adyen-sdk-color-background-critical-weak,
     #ffeae3
   );
-  --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
-  --adyen-internal-color-background-selected-active: var(
-    --adyen-sdk-color-background-selected-active,
-    #c8dff7
-  );
-  --adyen-internal-color-background-selected-hover: var(
-    --adyen-sdk-color-background-selected-hover,
-    #d4e6f9
-  );
-  --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
   --adyen-internal-color-background-disabled: var(
     --adyen-sdk-color-background-disabled,
-    rgba(17, 17, 16, 0.07)
-  );
-  --adyen-internal-color-background-modal-active: var(
-    --adyen-sdk-color-background-modal-active,
-    #efeeed
+    rgba(17, 17, 16, 0.04)
   );
   --adyen-internal-color-background-modal-hover: var(
     --adyen-sdk-color-background-modal-hover,
     #f6f5f4
   );
   --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
-  --adyen-internal-color-background-quaternary-active: var(
-    --adyen-sdk-color-background-quaternary-active,
-    #aeb5ba
-  );
-  --adyen-internal-color-background-quaternary-hover: var(
-    --adyen-sdk-color-background-quaternary-hover,
-    #b7bdc2
-  );
-  --adyen-internal-color-background-quaternary: var(
-    --adyen-sdk-color-background-quaternary,
-    #c0c5ca
-  );
-  --adyen-internal-color-background-tertiary-active: var(
-    --adyen-sdk-color-background-tertiary-active,
-    rgba(17, 17, 16, 0.15)
-  );
   --adyen-internal-color-background-tertiary-hover: var(
     --adyen-sdk-color-background-tertiary-hover,
     rgba(17, 17, 16, 0.11)
@@ -2498,85 +2027,815 @@ fieldset {
     #f6f5f4
   );
   --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
-  --adyen-internal-text-rich-text-caption-table-padding: var(
-    --adyen-sdk-text-rich-text-caption-table-padding,
-    8px 12px
+  --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
+  --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
+}
+
+.adyen-kyc-ui-element-container-wrapper.dark {
+  --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
+  --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
+  --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
+  --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
+  --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
+  --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
+  --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
+  --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
+  --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
+  --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
+  --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
+  --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
+  --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
+  --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
+  --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
+  --adyen-internal-shadow-medium-border: var(
+    --adyen-sdk-shadow-medium-border,
+    0px 6px 12px rgba(0, 18, 34, 0.08),
+    0px 2px 4px rgba(0, 18, 34, 0.04),
+    0px 0px 0px 1px rgba(218, 221, 223, 1)
   );
-  --adyen-internal-text-rich-text-caption-blockquote-margin: var(
-    --adyen-sdk-text-rich-text-caption-blockquote-margin,
-    12px 0 12px 16px
+  --adyen-internal-shadow-high: var(
+    --adyen-sdk-shadow-high,
+    0px 18px 36px rgba(0, 18, 34, 0.12),
+    0px 4px 8px rgba(0, 18, 34, 0.06)
   );
-  --adyen-internal-text-rich-text-caption-list-margin: var(
-    --adyen-sdk-text-rich-text-caption-list-margin,
-    0 0 2px 0
+  --adyen-internal-shadow-medium: var(
+    --adyen-sdk-shadow-medium,
+    0px 6px 12px rgba(0, 18, 34, 0.08),
+    0px 2px 4px rgba(0, 18, 34, 0.04)
   );
-  --adyen-internal-text-rich-text-caption-list-padding-left: var(
-    --adyen-sdk-text-rich-text-caption-list-padding-left,
-    16px
+  --adyen-internal-shadow-low: var(
+    --adyen-sdk-shadow-low,
+    0px 2px 4px rgba(0, 18, 34, 0.04),
+    0px 1px 2px rgba(0, 18, 34, 0.02)
   );
-  --adyen-internal-text-rich-text-caption-paragraph-margin: var(
-    --adyen-sdk-text-rich-text-caption-paragraph-margin,
-    0 0 6px 0
+  --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
+  --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
+  --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
+  --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 12px);
+  --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 8px);
+  --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 6px);
+  --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
+  --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
+  --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
+  --adyen-internal-animation-easing-enter: var(
+    --adyen-sdk-animation-easing-enter,
+    cubic-bezier(0.12, 0.6, 0.4, 0.95)
   );
-  --adyen-internal-text-rich-text-table-caption-margin: var(
-    --adyen-sdk-text-rich-text-table-caption-margin,
-    0 0 6px 0
+  --adyen-internal-animation-easing-standard: var(
+    --adyen-sdk-animation-easing-standard,
+    cubic-bezier(0.2, 0, 0.4, 0.9)
   );
-  --adyen-internal-text-rich-text-table-hover-background-color: var(
-    --adyen-sdk-text-rich-text-table-hover-background-color,
-    #f6f5f4
+  --adyen-internal-text-title-l-mobile-line-height: var(
+    --adyen-sdk-text-title-l-mobile-line-height,
+    30px
   );
-  --adyen-internal-text-rich-text-table-padding: var(
-    --adyen-sdk-text-rich-text-table-padding,
-    10px 16px
+  --adyen-internal-text-title-l-mobile-font-size: var(
+    --adyen-sdk-text-title-l-mobile-font-size,
+    20px
   );
-  --adyen-internal-text-rich-text-table-margin: var(
-    --adyen-sdk-text-rich-text-table-margin,
-    16px 0 16px 0
+  --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
+  --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
+  --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 700);
+  --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
+  --adyen-internal-text-title-l-font-family-secondary: var(
+    --adyen-sdk-text-title-l-font-family-secondary,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
   );
-  --adyen-internal-text-rich-text-table-border: var(
-    --adyen-sdk-text-rich-text-table-border,
-    1px solid #d5d5d5
+  --adyen-internal-text-title-l-font-family: var(
+    --adyen-sdk-text-title-l-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
   );
-  --adyen-internal-text-rich-text-blockquote-margin: var(
-    --adyen-sdk-text-rich-text-blockquote-margin,
-    16px 0 16px 16px
+  --adyen-internal-text-title-m-mobile-line-height: var(
+    --adyen-sdk-text-title-m-mobile-line-height,
+    28px
   );
-  --adyen-internal-text-rich-text-mark-background-color: var(
-    --adyen-sdk-text-rich-text-mark-background-color,
-    #e3effb
+  --adyen-internal-text-title-m-mobile-font-size: var(
+    --adyen-sdk-text-title-m-mobile-font-size,
+    18px
   );
-  --adyen-internal-text-rich-text-pre-padding: var(
-    --adyen-sdk-text-rich-text-pre-padding,
-    10px 16px
+  --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
+  --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
+  --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 700);
+  --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
+  --adyen-internal-text-title-m-font-family-secondary: var(
+    --adyen-sdk-text-title-m-font-family-secondary,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
   );
-  --adyen-internal-text-rich-text-pre-margin: var(
-    --adyen-sdk-text-rich-text-pre-margin,
-    16px 0 16px 0
+  --adyen-internal-text-title-m-font-family: var(
+    --adyen-sdk-text-title-m-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
   );
-  --adyen-internal-text-rich-text-code-background-color: var(
-    --adyen-sdk-text-rich-text-code-background-color,
-    rgba(17, 17, 16, 0.04)
+  --adyen-internal-text-title-mobile-line-height: var(
+    --adyen-sdk-text-title-mobile-line-height,
+    26px
   );
-  --adyen-internal-text-rich-text-list-margin: var(
-    --adyen-sdk-text-rich-text-list-margin,
-    0 0 4px 0
+  --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
+  --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
+  --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
+  --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 700);
+  --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
+  --adyen-internal-text-title-font-family-secondary: var(
+    --adyen-sdk-text-title-font-family-secondary,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
   );
-  --adyen-internal-text-rich-text-list-padding-left: var(
-    --adyen-sdk-text-rich-text-list-padding-left,
-    20px
+  --adyen-internal-text-title-font-family: var(
+    --adyen-sdk-text-title-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  --adyen-internal-text-subtitle-font-family: var(
+    --adyen-sdk-text-subtitle-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  --adyen-internal-text-body-strongest-font-weight: var(
+    --adyen-sdk-text-body-strongest-font-weight,
+    700
   );
-  --adyen-internal-text-rich-text-paragraph-margin: var(
-    --adyen-sdk-text-rich-text-paragraph-margin,
-    0 0 8px 0
+  --adyen-internal-text-body-stronger-font-weight: var(
+    --adyen-sdk-text-body-stronger-font-weight,
+    500
   );
-  --adyen-internal-text-rich-text-heading-margin: var(
-    --adyen-sdk-text-rich-text-heading-margin,
-    32px 0 10px 0
+  --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
+  --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  --adyen-internal-text-body-font-family-secondary: var(
+    --adyen-sdk-text-body-font-family-secondary,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
+  );
+  --adyen-internal-text-body-font-family: var(
+    --adyen-sdk-text-body-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  --adyen-internal-text-caption-stronger-font-weight: var(
+    --adyen-sdk-text-caption-stronger-font-weight,
+    500
+  );
+  --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
+  --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+  --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  --adyen-internal-text-caption-font-family-secondary: var(
+    --adyen-sdk-text-caption-font-family-secondary,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
+  );
+  --adyen-internal-text-caption-font-family: var(
+    --adyen-sdk-text-caption-font-family,
+    'Adyen UI',
+    Roboto,
+    Oxygen,
+    'Open Sans',
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  --adyen-internal-text-rich-text-code-font-family: var(
+    --adyen-sdk-text-rich-text-code-font-family,
+    'Adyen Mono',
+    'Roboto Mono',
+    'Oxygen Mono',
+    'IBM Plex Mono',
+    'Courier New',
+    monospace
+  );
+  --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
+  --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #000000);
+  --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
+  --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
+  --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
+  --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #363636);
+  --adyen-internal-color-outline-inverse-primary-active: var(
+    --adyen-sdk-color-outline-inverse-primary-active,
+    #ededed
+  );
+  --adyen-internal-color-outline-inverse-primary-hover: var(
+    --adyen-sdk-color-outline-inverse-primary-hover,
+    #bcbcbc
   );
+  --adyen-internal-color-outline-inverse-primary: var(
+    --adyen-sdk-color-outline-inverse-primary,
+    #cbcbcb
+  );
+  --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #ff9a78);
+  --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #525252);
+  --adyen-internal-color-outline-tertiary-active: var(
+    --adyen-sdk-color-outline-tertiary-active,
+    #ededed
+  );
+  --adyen-internal-color-outline-tertiary-hover: var(
+    --adyen-sdk-color-outline-tertiary-hover,
+    #bcbcbc
+  );
+  --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #949494);
+  --adyen-internal-color-outline-secondary-active: var(
+    --adyen-sdk-color-outline-secondary-active,
+    #ededed
+  );
+  --adyen-internal-color-outline-secondary-hover: var(
+    --adyen-sdk-color-outline-secondary-hover,
+    #525252
+  );
+  --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #444444);
+  --adyen-internal-color-outline-primary-active: var(
+    --adyen-sdk-color-outline-primary-active,
+    #ededed
+  );
+  --adyen-internal-color-outline-primary-hover: var(
+    --adyen-sdk-color-outline-primary-hover,
+    #444444
+  );
+  --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #363636);
+  --adyen-internal-color-link-primary-visited: var(--adyen-sdk-color-link-primary-visited, #d0a3ec);
+  --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #4a98e5);
+  --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #4a98e5);
+  --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #84b9ed);
+  --adyen-internal-color-label-on-background-highlight-weak: var(
+    --adyen-sdk-color-label-on-background-highlight-weak,
+    #91c0ef
+  );
+  --adyen-internal-color-label-on-background-success-weak: var(
+    --adyen-sdk-color-label-on-background-success-weak,
+    #20d77c
+  );
+  --adyen-internal-color-label-on-background-warning-weak: var(
+    --adyen-sdk-color-label-on-background-warning-weak,
+    #ffaa2e
+  );
+  --adyen-internal-color-label-on-background-critical-weak: var(
+    --adyen-sdk-color-label-on-background-critical-weak,
+    #ffa688
+  );
+  --adyen-internal-color-label-inverse-secondary: var(
+    --adyen-sdk-color-label-inverse-secondary,
+    #676767
+  );
+  --adyen-internal-color-label-inverse-primary-hover: var(
+    --adyen-sdk-color-label-inverse-primary-hover,
+    #2a2a2a
+  );
+  --adyen-internal-color-label-inverse-primary: var(
+    --adyen-sdk-color-label-inverse-primary,
+    #111111
+  );
+  --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #111111);
+  --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #00d16a);
+  --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #84b9ed);
+  --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ff9e11);
+  --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #ff9a78);
+  --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #6e6e6e);
+  --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #7d7d7d);
+  --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #b4b4b4);
+  --adyen-internal-color-label-primary-active: var(--adyen-sdk-color-label-primary-active, #cbcbcb);
+  --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #dddddd);
+  --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #ededed);
+  --adyen-internal-color-background-inverse-primary-active: var(
+    --adyen-sdk-color-background-inverse-primary-active,
+    #dddddd
+  );
+  --adyen-internal-color-background-inverse-primary-hover: var(
+    --adyen-sdk-color-background-inverse-primary-hover,
+    #e5e5e5
+  );
+  --adyen-internal-color-background-inverse-primary: var(
+    --adyen-sdk-color-background-inverse-primary,
+    #ededed
+  );
+  --adyen-internal-color-background-highlight-strong: var(
+    --adyen-sdk-color-background-highlight-strong,
+    #84b9ed
+  );
+  --adyen-internal-color-background-highlight-weak: var(
+    --adyen-sdk-color-background-highlight-weak,
+    #00305f
+  );
+  --adyen-internal-color-background-success-strong: var(
+    --adyen-sdk-color-background-success-strong,
+    #00d16a
+  );
+  --adyen-internal-color-background-success-weak: var(
+    --adyen-sdk-color-background-success-weak,
+    #00381d
+  );
+  --adyen-internal-color-background-warning-strong: var(
+    --adyen-sdk-color-background-warning-strong,
+    #ff9e11
+  );
+  --adyen-internal-color-background-warning-weak: var(
+    --adyen-sdk-color-background-warning-weak,
+    #462a00
+  );
+  --adyen-internal-color-background-critical-strong-active: var(
+    --adyen-sdk-color-background-critical-strong-active,
+    #ffded3
+  );
+  --adyen-internal-color-background-critical-strong-hover: var(
+    --adyen-sdk-color-background-critical-strong-hover,
+    #ffbda6
+  );
+  --adyen-internal-color-background-critical-strong: var(
+    --adyen-sdk-color-background-critical-strong,
+    #ff9a78
+  );
+  --adyen-internal-color-background-critical-weak: var(
+    --adyen-sdk-color-background-critical-weak,
+    #5c1800
+  );
+  --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #2a2a2a);
+  --adyen-internal-color-background-modal-hover: var(
+    --adyen-sdk-color-background-modal-hover,
+    #2a2a2a
+  );
+  --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #1d1d1d);
+  --adyen-internal-color-background-tertiary-hover: var(
+    --adyen-sdk-color-background-tertiary-hover,
+    #3d3d3d
+  );
+  --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #303030);
+  --adyen-internal-color-background-secondary-active: var(
+    --adyen-sdk-color-background-secondary-active,
+    #3d3d3d
+  );
+  --adyen-internal-color-background-secondary-hover: var(
+    --adyen-sdk-color-background-secondary-hover,
+    #303030
+  );
+  --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #232323);
+  --adyen-internal-color-background-primary-active: var(
+    --adyen-sdk-color-background-primary-active,
+    #303030
+  );
+  --adyen-internal-color-background-primary-hover: var(
+    --adyen-sdk-color-background-primary-hover,
+    #232323
+  );
+  --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #181818);
   --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
   --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
 }
+
+@media (prefers-color-scheme: dark) {
+  .adyen-kyc-ui-element-container-wrapper.system {
+    --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
+    --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
+    --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
+    --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
+    --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
+    --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
+    --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
+    --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
+    --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
+    --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
+    --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
+    --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
+    --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
+    --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
+    --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
+    --adyen-internal-shadow-medium-border: var(
+      --adyen-sdk-shadow-medium-border,
+      0px 6px 12px rgba(0, 18, 34, 0.08),
+      0px 2px 4px rgba(0, 18, 34, 0.04),
+      0px 0px 0px 1px rgba(218, 221, 223, 1)
+    );
+    --adyen-internal-shadow-high: var(
+      --adyen-sdk-shadow-high,
+      0px 18px 36px rgba(0, 18, 34, 0.12),
+      0px 4px 8px rgba(0, 18, 34, 0.06)
+    );
+    --adyen-internal-shadow-medium: var(
+      --adyen-sdk-shadow-medium,
+      0px 6px 12px rgba(0, 18, 34, 0.08),
+      0px 2px 4px rgba(0, 18, 34, 0.04)
+    );
+    --adyen-internal-shadow-low: var(
+      --adyen-sdk-shadow-low,
+      0px 2px 4px rgba(0, 18, 34, 0.04),
+      0px 1px 2px rgba(0, 18, 34, 0.02)
+    );
+    --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
+    --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
+    --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
+    --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 12px);
+    --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 8px);
+    --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 6px);
+    --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
+    --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
+    --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
+    --adyen-internal-animation-easing-enter: var(
+      --adyen-sdk-animation-easing-enter,
+      cubic-bezier(0.12, 0.6, 0.4, 0.95)
+    );
+    --adyen-internal-animation-easing-standard: var(
+      --adyen-sdk-animation-easing-standard,
+      cubic-bezier(0.2, 0, 0.4, 0.9)
+    );
+    --adyen-internal-text-title-l-mobile-line-height: var(
+      --adyen-sdk-text-title-l-mobile-line-height,
+      30px
+    );
+    --adyen-internal-text-title-l-mobile-font-size: var(
+      --adyen-sdk-text-title-l-mobile-font-size,
+      20px
+    );
+    --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
+    --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
+    --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 700);
+    --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
+    --adyen-internal-text-title-l-font-family-secondary: var(
+      --adyen-sdk-text-title-l-font-family-secondary,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-text-title-l-font-family: var(
+      --adyen-sdk-text-title-l-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-title-m-mobile-line-height: var(
+      --adyen-sdk-text-title-m-mobile-line-height,
+      28px
+    );
+    --adyen-internal-text-title-m-mobile-font-size: var(
+      --adyen-sdk-text-title-m-mobile-font-size,
+      18px
+    );
+    --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
+    --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
+    --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 700);
+    --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
+    --adyen-internal-text-title-m-font-family-secondary: var(
+      --adyen-sdk-text-title-m-font-family-secondary,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-text-title-m-font-family: var(
+      --adyen-sdk-text-title-m-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-title-mobile-line-height: var(
+      --adyen-sdk-text-title-mobile-line-height,
+      26px
+    );
+    --adyen-internal-text-title-mobile-font-size: var(
+      --adyen-sdk-text-title-mobile-font-size,
+      16px
+    );
+    --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
+    --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
+    --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 700);
+    --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
+    --adyen-internal-text-title-font-family-secondary: var(
+      --adyen-sdk-text-title-font-family-secondary,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-text-title-font-family: var(
+      --adyen-sdk-text-title-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-subtitle-font-family: var(
+      --adyen-sdk-text-subtitle-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-body-strongest-font-weight: var(
+      --adyen-sdk-text-body-strongest-font-weight,
+      700
+    );
+    --adyen-internal-text-body-stronger-font-weight: var(
+      --adyen-sdk-text-body-stronger-font-weight,
+      500
+    );
+    --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
+    --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
+    --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+    --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
+    --adyen-internal-text-body-font-family-secondary: var(
+      --adyen-sdk-text-body-font-family-secondary,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-text-body-font-family: var(
+      --adyen-sdk-text-body-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-caption-stronger-font-weight: var(
+      --adyen-sdk-text-caption-stronger-font-weight,
+      500
+    );
+    --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
+    --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+    --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+    --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+    --adyen-internal-text-caption-font-family-secondary: var(
+      --adyen-sdk-text-caption-font-family-secondary,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-text-caption-font-family: var(
+      --adyen-sdk-text-caption-font-family,
+      'Adyen UI',
+      Roboto,
+      Oxygen,
+      'Open Sans',
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    --adyen-internal-text-rich-text-code-font-family: var(
+      --adyen-sdk-text-rich-text-code-font-family,
+      'Adyen Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'IBM Plex Mono',
+      'Courier New',
+      monospace
+    );
+    --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
+    --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #000000);
+    --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
+    --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
+    --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
+    --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #363636);
+    --adyen-internal-color-outline-inverse-primary-active: var(
+      --adyen-sdk-color-outline-inverse-primary-active,
+      #ededed
+    );
+    --adyen-internal-color-outline-inverse-primary-hover: var(
+      --adyen-sdk-color-outline-inverse-primary-hover,
+      #bcbcbc
+    );
+    --adyen-internal-color-outline-inverse-primary: var(
+      --adyen-sdk-color-outline-inverse-primary,
+      #cbcbcb
+    );
+    --adyen-internal-color-outline-critical: var(--adyen-sdk-color-outline-critical, #ff9a78);
+    --adyen-internal-color-outline-disabled: var(--adyen-sdk-color-outline-disabled, #525252);
+    --adyen-internal-color-outline-tertiary-active: var(
+      --adyen-sdk-color-outline-tertiary-active,
+      #ededed
+    );
+    --adyen-internal-color-outline-tertiary-hover: var(
+      --adyen-sdk-color-outline-tertiary-hover,
+      #bcbcbc
+    );
+    --adyen-internal-color-outline-tertiary: var(--adyen-sdk-color-outline-tertiary, #949494);
+    --adyen-internal-color-outline-secondary-active: var(
+      --adyen-sdk-color-outline-secondary-active,
+      #ededed
+    );
+    --adyen-internal-color-outline-secondary-hover: var(
+      --adyen-sdk-color-outline-secondary-hover,
+      #525252
+    );
+    --adyen-internal-color-outline-secondary: var(--adyen-sdk-color-outline-secondary, #444444);
+    --adyen-internal-color-outline-primary-active: var(
+      --adyen-sdk-color-outline-primary-active,
+      #ededed
+    );
+    --adyen-internal-color-outline-primary-hover: var(
+      --adyen-sdk-color-outline-primary-hover,
+      #444444
+    );
+    --adyen-internal-color-outline-primary: var(--adyen-sdk-color-outline-primary, #363636);
+    --adyen-internal-color-link-primary-visited: var(
+      --adyen-sdk-color-link-primary-visited,
+      #d0a3ec
+    );
+    --adyen-internal-color-link-primary-active: var(--adyen-sdk-color-link-primary-active, #4a98e5);
+    --adyen-internal-color-link-primary-hover: var(--adyen-sdk-color-link-primary-hover, #4a98e5);
+    --adyen-internal-color-link-primary: var(--adyen-sdk-color-link-primary, #84b9ed);
+    --adyen-internal-color-label-on-background-highlight-weak: var(
+      --adyen-sdk-color-label-on-background-highlight-weak,
+      #91c0ef
+    );
+    --adyen-internal-color-label-on-background-success-weak: var(
+      --adyen-sdk-color-label-on-background-success-weak,
+      #20d77c
+    );
+    --adyen-internal-color-label-on-background-warning-weak: var(
+      --adyen-sdk-color-label-on-background-warning-weak,
+      #ffaa2e
+    );
+    --adyen-internal-color-label-on-background-critical-weak: var(
+      --adyen-sdk-color-label-on-background-critical-weak,
+      #ffa688
+    );
+    --adyen-internal-color-label-inverse-secondary: var(
+      --adyen-sdk-color-label-inverse-secondary,
+      #676767
+    );
+    --adyen-internal-color-label-inverse-primary-hover: var(
+      --adyen-sdk-color-label-inverse-primary-hover,
+      #2a2a2a
+    );
+    --adyen-internal-color-label-inverse-primary: var(
+      --adyen-sdk-color-label-inverse-primary,
+      #111111
+    );
+    --adyen-internal-color-label-on-color: var(--adyen-sdk-color-label-on-color, #111111);
+    --adyen-internal-color-label-success: var(--adyen-sdk-color-label-success, #00d16a);
+    --adyen-internal-color-label-highlight: var(--adyen-sdk-color-label-highlight, #84b9ed);
+    --adyen-internal-color-label-warning: var(--adyen-sdk-color-label-warning, #ff9e11);
+    --adyen-internal-color-label-critical: var(--adyen-sdk-color-label-critical, #ff9a78);
+    --adyen-internal-color-label-disabled: var(--adyen-sdk-color-label-disabled, #6e6e6e);
+    --adyen-internal-color-label-tertiary: var(--adyen-sdk-color-label-tertiary, #7d7d7d);
+    --adyen-internal-color-label-secondary: var(--adyen-sdk-color-label-secondary, #b4b4b4);
+    --adyen-internal-color-label-primary-active: var(
+      --adyen-sdk-color-label-primary-active,
+      #cbcbcb
+    );
+    --adyen-internal-color-label-primary-hover: var(--adyen-sdk-color-label-primary-hover, #dddddd);
+    --adyen-internal-color-label-primary: var(--adyen-sdk-color-label-primary, #ededed);
+    --adyen-internal-color-background-inverse-primary-active: var(
+      --adyen-sdk-color-background-inverse-primary-active,
+      #dddddd
+    );
+    --adyen-internal-color-background-inverse-primary-hover: var(
+      --adyen-sdk-color-background-inverse-primary-hover,
+      #e5e5e5
+    );
+    --adyen-internal-color-background-inverse-primary: var(
+      --adyen-sdk-color-background-inverse-primary,
+      #ededed
+    );
+    --adyen-internal-color-background-highlight-strong: var(
+      --adyen-sdk-color-background-highlight-strong,
+      #84b9ed
+    );
+    --adyen-internal-color-background-highlight-weak: var(
+      --adyen-sdk-color-background-highlight-weak,
+      #00305f
+    );
+    --adyen-internal-color-background-success-strong: var(
+      --adyen-sdk-color-background-success-strong,
+      #00d16a
+    );
+    --adyen-internal-color-background-success-weak: var(
+      --adyen-sdk-color-background-success-weak,
+      #00381d
+    );
+    --adyen-internal-color-background-warning-strong: var(
+      --adyen-sdk-color-background-warning-strong,
+      #ff9e11
+    );
+    --adyen-internal-color-background-warning-weak: var(
+      --adyen-sdk-color-background-warning-weak,
+      #462a00
+    );
+    --adyen-internal-color-background-critical-strong-active: var(
+      --adyen-sdk-color-background-critical-strong-active,
+      #ffded3
+    );
+    --adyen-internal-color-background-critical-strong-hover: var(
+      --adyen-sdk-color-background-critical-strong-hover,
+      #ffbda6
+    );
+    --adyen-internal-color-background-critical-strong: var(
+      --adyen-sdk-color-background-critical-strong,
+      #ff9a78
+    );
+    --adyen-internal-color-background-critical-weak: var(
+      --adyen-sdk-color-background-critical-weak,
+      #5c1800
+    );
+    --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #2a2a2a);
+    --adyen-internal-color-background-modal-hover: var(
+      --adyen-sdk-color-background-modal-hover,
+      #2a2a2a
+    );
+    --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #1d1d1d);
+    --adyen-internal-color-background-tertiary-hover: var(
+      --adyen-sdk-color-background-tertiary-hover,
+      #3d3d3d
+    );
+    --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #303030);
+    --adyen-internal-color-background-secondary-active: var(
+      --adyen-sdk-color-background-secondary-active,
+      #3d3d3d
+    );
+    --adyen-internal-color-background-secondary-hover: var(
+      --adyen-sdk-color-background-secondary-hover,
+      #303030
+    );
+    --adyen-internal-color-background-secondary: var(
+      --adyen-sdk-color-background-secondary,
+      #232323
+    );
+    --adyen-internal-color-background-primary-active: var(
+      --adyen-sdk-color-background-primary-active,
+      #303030
+    );
+    --adyen-internal-color-background-primary-hover: var(
+      --adyen-sdk-color-background-primary-hover,
+      #232323
+    );
+    --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #181818);
+    --adyen-internal-focus-ring-outline: var(--adyen-sdk-focus-ring-outline, 3px);
+    --adyen-internal-focus-ring-spacer: var(--adyen-sdk-focus-ring-spacer, 1px);
+  }
+}
 ._modal_kkggh_1 {
   background-color: var(--adyen-internal-color-background-modal);
   border: var(--adyen-internal-spacer-000);
@@ -3505,7 +3764,7 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   align-items: center;
   display: flex;
 }
-._select-input-wrapper_1rh7d_1 {
+._select-input-wrapper_15ce7_1 {
   align-items: center;
   display: flex;
   background: var(--adyen-internal-color-background-secondary);
@@ -3525,32 +3784,32 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   user-select: none;
 }
 
-._select-input-wrapper_1rh7d_1:hover {
+._select-input-wrapper_15ce7_1:hover {
   border-color: var(--adyen-internal-color-outline-tertiary-hover);
 }
 
-._select-input__icon_1rh7d_25 svg {
+._select-input__icon_15ce7_25 svg {
   border-radius: var(--adyen-internal-border-radius-s);
   margin-right: var(--adyen-internal-spacer-040);
   height: 26px;
   max-width: 40px;
 }
 
-._select-input_1rh7d_1 {
+._select-input_15ce7_1 {
   /* takes bg color of parent wrapper, which is 0.04 alpha */
   background-color: transparent;
 }
 
-._select-input--active_1rh7d_37,
-._select-input--active_1rh7d_37:hover,
-._select-input-wrapper_1rh7d_1:active,
-._select-input-wrapper_1rh7d_1:focus {
+._select-input--active_15ce7_37,
+._select-input--active_15ce7_37:hover,
+._select-input-wrapper_15ce7_1:active,
+._select-input-wrapper_15ce7_1:focus {
   border-color: var(--adyen-internal-color-outline-tertiary-active);
   outline: var(--adyen-internal-border-width-s) solid
     var(--adyen-internal-color-outline-tertiary-active);
 }
 
-._select-input-wrapper_1rh7d_1._select-input--readonly_1rh7d_46 {
+._select-input-wrapper_15ce7_1._select-input--readonly_15ce7_46 {
   background-color: var(--adyen-internal-color-background-disabled);
   color: var(--adyen-internal-color-label-disabled);
   cursor: not-allowed;
@@ -3558,35 +3817,28 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-disabled);
 }
 
-._select-input_1rh7d_1._select-input--readonly_1rh7d_46 {
-  background-color: var(--adyen-internal-color-background-disabled);
-  color: var(--adyen-internal-color-label-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-._select-input--readonly_1rh7d_46::after {
+._select-input--readonly_15ce7_46::after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23B9C4C9'/%3E%3C/svg%3E%0A");
 }
 
-._select-input--invalid_1rh7d_65 {
+._select-input--invalid_15ce7_58 {
   border-color: var(--adyen-internal-color-outline-critical);
 }
 
-._select-input--minimal_1rh7d_69 {
+._select-input--minimal_15ce7_62 {
   min-height: unset;
   height: 100%;
   border: none;
   border-radius: var(--adyen-internal-border-radius-s);
 }
 
-._select-input-search_1rh7d_76 {
+._select-input-search_15ce7_69 {
   align-items: center;
   display: flex;
   width: 100%;
 }
 
-._select-input-search__icon_1rh7d_82 {
+._select-input-search__icon_15ce7_75 {
   color: var(--adyen-internal-color-label-tertiary);
   font-size: var(--adyen-internal-text-caption-font-size);
   font-family: var(--adyen-internal-text-caption-font-family);
@@ -3595,24 +3847,24 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   padding-right: var(--adyen-internal-spacer-040);
 }
 
-._select-input-search_1rh7d_76 ._select-input--filterable_1rh7d_91::placeholder {
+._select-input-search_15ce7_69 ._select-input--filterable_15ce7_84::placeholder {
   color: var(--adyen-internal-color-label-tertiary);
   font-weight: var(--adyen-internal-text-body-font-weight);
 }
 
-._select-input-search_1rh7d_76::after {
+._select-input-search_15ce7_69::after {
   display: none;
 }
 
-._select-input-wrapper--filterable_1rh7d_100 {
+._select-input-wrapper--filterable_15ce7_93 {
   cursor: text;
 }
 
-._select-input-wrapper--non-filterable_1rh7d_104 {
+._select-input-wrapper--non-filterable_15ce7_97 {
   cursor: pointer;
 }
 
-._select-input-wrapper_1rh7d_1::after {
+._select-input-wrapper_15ce7_1::after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.19471 6.5646C3.59429 7.09797 4.39396 7.0986 4.79439 6.56587L7.78716 2.58424C8.28257 1.92514 7.81232 0.983398 6.98779 0.983398L1.01209 0.983398C0.188292 0.983398 -0.282154 1.92367 0.211778 2.58298L3.19471 6.5646Z' fill='%23687282'/%3E%3C/svg%3E%0A");
   background-position: center;
   background-repeat: no-repeat;
@@ -3623,11 +3875,11 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   width: 8px;
 }
 
-._select-input--list-open_1rh7d_119::after {
+._select-input--list-open_15ce7_112::after {
   transform: rotate(180deg);
 }
 
-._select-input--filterable_1rh7d_91 {
+._select-input--filterable_15ce7_84 {
   border: 0;
   caret-color: var(--adyen-internal-color-label-highlight);
   color: var(--adyen-internal-color-label-primary);
@@ -3638,32 +3890,32 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   width: 100%;
 }
 
-._select-input--filterable_1rh7d_91::placeholder {
+._select-input--filterable_15ce7_84::placeholder {
   color: var(--adyen-internal-color-label-secondary);
   font-weight: var(--adyen-internal-text-body-font-weight);
 }
 
-._select-input--filterable_1rh7d_91:focus,
-._select-input--filterable_1rh7d_91:active {
+._select-input--filterable_15ce7_84:focus,
+._select-input--filterable_15ce7_84:active {
   outline: 0;
 }
 
-._select-input--non-filterable_1rh7d_144 {
+._select-input--non-filterable_15ce7_137 {
   all: unset;
 }
 
 /* Used in non-filterable mode only */
-._select-input--placeholder_1rh7d_149 {
+._select-input--placeholder_15ce7_142 {
   color: var(--adyen-internal-color-label-secondary);
   font-weight: var(--adyen-internal-text-body-font-weight);
 }
 
 /* To resolve a bug where filterable select `<input>`s weren't focusable on iOS */
-._ignore-pointer-events_1rh7d_155 {
+._ignore-pointer-events_15ce7_148 {
   pointer-events: none;
 }
 
-._handle-pointer-events_1rh7d_159 {
+._handle-pointer-events_15ce7_152 {
   pointer-events: auto;
 }
 .adyen-kyc-field-wrapper {
@@ -4001,6 +4253,22 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
      including here for height consistency when no action is provided */
   min-height: var(--adyen-internal-tap-target);
 }
+._mismatch_nyvqg_1 {
+  animation: _mismatchShake_nyvqg_1 300ms;
+  border-color: var(--adyen-internal-color-outline-critical) !important;
+}
+
+@keyframes _mismatchShake_nyvqg_1 {
+  25% {
+    transform: translateX(4px);
+  }
+  50% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
 ._business-financing-lei-radio_l7xhq_1 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 170px));
@@ -4072,20 +4340,88 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   text-align: center;
   width: 100%;
 }
-._mismatch_nyvqg_1 {
-  animation: _mismatchShake_nyvqg_1 300ms;
-  border-color: var(--adyen-internal-color-outline-critical) !important;
+._conflict-row-table_y7ii4_1 td {
+  padding: var(--adyen-internal-spacer-060);
+  height: var(--adyen-internal-spacer-050);
+  border-top: var(--adyen-internal-border-width-s) solid
+    var(--adyen-internal-color-separator-primary);
+}
+._conflict-row-table_y7ii4_1 td:first-child {
+  padding-right: var(--adyen-internal-spacer-100);
+  text-wrap: nowrap;
 }
 
-@keyframes _mismatchShake_nyvqg_1 {
-  25% {
-    transform: translateX(4px);
+._conflict-row-list_y7ii4_12 {
+  display: flex;
+  flex-direction: row;
+  border-top: var(--adyen-internal-border-width-s) solid
+    var(--adyen-internal-color-separator-primary);
+  padding: var(--adyen-internal-spacer-060);
+}
+._conflict-row-list_y7ii4_12 dt {
+  min-width: var(--adyen-internal-spacer-140);
+}
+
+._conflict-row-list_y7ii4_12 dd {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-060);
+}
+
+._conflict-row-list-option-label_y7ii4_29 {
+  padding-left: var(--adyen-internal-spacer-090);
+}
+._data-conflicts-wrapper_c81aq_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-100);
+}
+
+._data-conflicts-header_c81aq_7 {
+  display: flex;
+  gap: var(--adyen-internal-spacer-040);
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+._data-conflicts-table_c81aq_15 {
+  display: none;
+  border-collapse: collapse;
+}
+
+._data-conflicts-table_c81aq_15 th {
+  padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-060)
+    var(--adyen-internal-spacer-060) 36px; /* perfectly aligns with the radio label below */
+  text-align: left;
+}
+
+._data-conflicts-list_c81aq_26 {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+  On large viewports, table is default unless `listOnly` mode is used.
+  In `listOnly` mode the modifier classes flip: the list stays visible
+  and the table is hidden. The modifiers are ordered after their base rules
+  so they win at equal specificity.
+*/
+@media (min-width: 480px) {
+  ._data-conflicts-table_c81aq_15 {
+    display: table;
   }
-  50% {
-    transform: translateX(-4px);
+
+  ._data-conflicts-list_c81aq_26 {
+    display: none;
   }
-  75% {
-    transform: translateX(4px);
+
+  ._data-conflicts-list-forced_c81aq_46 {
+    display: flex;
+  }
+
+  ._data-conflicts-table-hidden_c81aq_50 {
+    display: none;
   }
 }
 ._tile-container_17be3_1 {
@@ -4478,90 +4814,6 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   margin-top: var(--adyen-internal-spacer-040);
   text-align: left;
 }
-._conflict-row-table_y7ii4_1 td {
-  padding: var(--adyen-internal-spacer-060);
-  height: var(--adyen-internal-spacer-050);
-  border-top: var(--adyen-internal-border-width-s) solid
-    var(--adyen-internal-color-separator-primary);
-}
-._conflict-row-table_y7ii4_1 td:first-child {
-  padding-right: var(--adyen-internal-spacer-100);
-  text-wrap: nowrap;
-}
-
-._conflict-row-list_y7ii4_12 {
-  display: flex;
-  flex-direction: row;
-  border-top: var(--adyen-internal-border-width-s) solid
-    var(--adyen-internal-color-separator-primary);
-  padding: var(--adyen-internal-spacer-060);
-}
-._conflict-row-list_y7ii4_12 dt {
-  min-width: var(--adyen-internal-spacer-140);
-}
-
-._conflict-row-list_y7ii4_12 dd {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-060);
-}
-
-._conflict-row-list-option-label_y7ii4_29 {
-  padding-left: var(--adyen-internal-spacer-090);
-}
-._data-conflicts-wrapper_c81aq_1 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-100);
-}
-
-._data-conflicts-header_c81aq_7 {
-  display: flex;
-  gap: var(--adyen-internal-spacer-040);
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-._data-conflicts-table_c81aq_15 {
-  display: none;
-  border-collapse: collapse;
-}
-
-._data-conflicts-table_c81aq_15 th {
-  padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-060)
-    var(--adyen-internal-spacer-060) 36px; /* perfectly aligns with the radio label below */
-  text-align: left;
-}
-
-._data-conflicts-list_c81aq_26 {
-  display: flex;
-  flex-direction: column;
-}
-
-/*
-  On large viewports, table is default unless `listOnly` mode is used.
-  In `listOnly` mode the modifier classes flip: the list stays visible
-  and the table is hidden. The modifiers are ordered after their base rules
-  so they win at equal specificity.
-*/
-@media (min-width: 480px) {
-  ._data-conflicts-table_c81aq_15 {
-    display: table;
-  }
-
-  ._data-conflicts-list_c81aq_26 {
-    display: none;
-  }
-
-  ._data-conflicts-list-forced_c81aq_46 {
-    display: flex;
-  }
-
-  ._data-conflicts-table-hidden_c81aq_50 {
-    display: none;
-  }
-}
 ._idnow-header_m87oy_1 {
   width: 100%;
   padding: var(--adyen-internal-spacer-130) var(--adyen-internal-spacer-080);
@@ -4673,6 +4925,15 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   color: var(--adyen-internal-color-label-primary);
   margin-bottom: var(--adyen-internal-spacer-050);
 }
+._individual-getting-started_lfmf9_1 {
+  max-width: 450px;
+  margin: 0 auto;
+}
+
+._individual-getting-started_lfmf9_1 svg {
+  max-height: 250px;
+  width: auto;
+}
 ._avatar_106yh_1 {
   align-items: center;
   display: flex;
@@ -5640,51 +5901,51 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   display: flex;
   gap: 8px;
 }
-._searchInput_1xe58_1 {
+._searchInput_rwqti_1 {
   width: 100%;
   padding: var(--adyen-internal-spacer-040);
 }
 
-._toolbar_1xe58_6 {
+._toolbar_rwqti_6 {
   display: flex;
   align-items: center;
   margin-bottom: var(--adyen-internal-spacer-060);
   gap: var(--adyen-internal-spacer-060);
 }
 
-._fieldHeader_1xe58_13 {
+._fieldHeader_rwqti_13 {
   display: flex;
   align-items: center;
   gap: var(--adyen-internal-spacer-020);
 }
 
-._status_1xe58_19 {
+._status_rwqti_19 {
   font-weight: var(--adyen-internal-text-title-font-weight);
 }
 
-._statusRequired_1xe58_23 {
+._statusRequired_rwqti_23 {
   color: var(--adyen-internal-color-label-success);
 }
 
-._statusOptional_1xe58_27 {
+._statusOptional_rwqti_27 {
   color: var(--adyen-internal-color-label-warning);
 }
 
-._statusHidden_1xe58_31 {
+._statusHidden_rwqti_31 {
   color: var(--adyen-internal-color-label-critical);
 }
 
-._statusInfo_1xe58_35 {
-  color: var(--adyen-internal-color-background-always-dark-selected);
+._statusInfo_rwqti_35 {
+  color: var(--adyen-internal-color-background-highlight-strong);
 }
 
-._reasonsList_1xe58_39 {
+._reasonsList_rwqti_39 {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-._reasonItem_1xe58_45 {
+._reasonItem_rwqti_45 {
   font-family: monospace;
   font-size: var(--adyen-internal-text-caption-font-size);
   user-select: text;