@adyen/kyc-components 2.48.1 → 2.49.0

package/dist/style.css

@@ -1,13 +1,9 @@
-/* #region Colors */
-/* #endregion */
 /* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-summary {
@@ -79,16 +75,12 @@
 }
 .adyen-kyc-summary .adyen-kyc-review-alert {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 /* Base button */
@@ -122,10 +114,10 @@
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
   height: fit-content;
-  padding: var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-060, 12px);
+  padding: var(--adyen-sdk-spacer-050, 10px);
   position: relative;
   transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-linear, linear);
-  transition-property: color, background-color, box-shadow;
+  transition-property: color, background-color;
 }
 .adyen-kyc-button *,
 .adyen-kyc-button *::before,
@@ -148,7 +140,6 @@
 /* secondary */
 .adyen-kyc-button--secondary {
   background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary, #c9cdd3);
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }
@@ -165,7 +156,6 @@
 .adyen-kyc-button--tertiary {
   color: var(--adyen-sdk-color-label-primary, #00112c);
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
   text-decoration: underline;
 }
 .adyen-kyc-button--tertiary:hover {
@@ -194,6 +184,16 @@
   padding: var(--adyen-sdk-spacer-030, 6px) var(--adyen-sdk-spacer-050, 10px);
 }
 
+.adyen-kyc-button--shaded {
+  background-color: var(--adyen-sdk-color-background-tertiary, #eeeff1);
+  border-radius: 50%;
+}
+
+.adyen-kyc-button--shaded:hover {
+  background-color: var(--adyen-sdk-color-background-tertiary-hover, #e3e5e9);
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+
 .adyen-kyc-button--block {
   display: flex;
   min-width: 100%;
@@ -212,22 +212,17 @@
 button[disabled] {
   cursor: not-allowed;
   background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
-  box-shadow: inset 0 0 0 var(--adyen-sdk-border-width-s, 1px) var(--adyen-sdk-color-background-disabled, #eeeff1);
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
 }
 button[disabled]:hover {
   background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-link {
@@ -299,7 +294,15 @@ button[disabled]:hover {
 }
 .adyen-kyc-icon svg {
   height: 1em;
-}.adyen-kyc-loader__wrapper {
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-loader__wrapper {
   align-items: center;
   display: flex;
   height: 100%;
@@ -315,7 +318,7 @@ button[disabled]:hover {
 .adyen-kyc-loader {
   animation: rotateLoader 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
   border-radius: 50%;
-  border: 3px solid var(--adyen-sdk-color-outline-primary, #dbdee2);
+  border: var(--adyen-sdk-border-width-l, 3px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
   border-top-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
   height: 43px;
   width: 43px;
@@ -370,16 +373,12 @@ button[disabled]:hover {
   width: 100%;
 }.adyen-kyc-error-panel {
   margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-alert {
@@ -461,26 +460,14 @@ button[disabled]:hover {
 .adyen-kyc-alert__explanation {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  padding-left: var(--adyen-sdk-spacer-100, 32px);
+  padding: 0 var(--adyen-sdk-spacer-100, 32px);
 }
 
 .adyen-kyc-review-alert {
   width: 100%;
 }.adyen-kyc-individual .adyen-kyc-form {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Focus ring */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-field {
+}.adyen-kyc-field {
   display: block;
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
@@ -503,7 +490,7 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-primary, #00112c);
   display: block;
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
   transition: color 0.1s ease-out;
 }
 
@@ -553,16 +540,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-upload-field__requirements {
   padding-left: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-dropdown {
@@ -572,7 +555,7 @@ button[disabled]:hover {
 }
 
 .adyen-kyc-dropdown-button {
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
   box-sizing: border-box;
@@ -610,7 +593,7 @@ button[disabled]:hover {
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-disabled, #dbdee2);
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
   cursor: not-allowed;
-  background-color: #f3f6f9;
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
   border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
 }
 
@@ -653,16 +636,9 @@ button[disabled]:hover {
   display: none;
 }
 
-.adyen-kyc-loading-indicator::before {
-  background: #a5afbd;
-}
-.adyen-kyc-loading-indicator::after {
-  border-top-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
-}
-
 .adyen-kyc-dropdown-list {
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  box-shadow: 0 2px 7px rgba(0, 15, 45, 0.3);
+  box-shadow: var(--adyen-sdk-shadow-medium-border, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 0px 0px 1px rgba(0, 17, 44, 0.06));
   max-height: 145px;
   z-index: 2;
 }
@@ -730,17 +706,11 @@ button[disabled]:hover {
 .adyen-kyc-dropdown-element:hover,
 .adyen-kyc-dropdown-element:focus,
 .adyen-kyc-dropdown-element:active {
-  background: rgba(230, 233, 235, 0.6);
+  background: var(--adyen-sdk-color-background-primary-hover, #f7f7f8);
 }
 
 .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active {
-  background: rgba(0, 102, 255, 0.1);
-}
-
-.adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active:hover,
-.adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active:focus,
-.adyen-kyc-dropdown-element.adyen-kyc-dropdown-element--active:active {
-  background: rgba(0, 102, 255, 0.15);
+  background: var(--adyen-sdk-color-background-primary-active, #eeeff1);
 }
 
 .adyen-kyc-dropdown-element--disabled {
@@ -784,16 +754,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-dropdown-selected-items__tag--blue {
   background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-tag {
@@ -809,6 +775,7 @@ button[disabled]:hover {
   font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
   line-height: var(--adyen-sdk-text-caption-line-height, 18px);
   padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
+  border-radius: var(--adyen-sdk-border-radius-s, 4px);
   text-decoration: none;
   vertical-align: baseline;
   white-space: nowrap;
@@ -853,16 +820,12 @@ button[disabled]:hover {
 .adyen-kyc-tag--basic {
   background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-dropdown {
@@ -891,7 +854,7 @@ button[disabled]:hover {
 }
 
 .adyen-kyc-filter-input {
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   border: 0;
   caret-color: var(--adyen-sdk-color-label-highlight, #0070f5);
   color: var(--adyen-sdk-color-label-primary, #00112c);
@@ -910,7 +873,7 @@ button[disabled]:hover {
 }
 
 .adyen-kyc-dropdown-list {
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   display: none;
   list-style: none;
   margin: var(--adyen-sdk-spacer-000, 0px);
@@ -929,16 +892,12 @@ button[disabled]:hover {
 .adyen-kyc-dropdown-element {
   align-items: center;
   display: flex;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-typography {
@@ -1046,19 +1005,7 @@ button[disabled]:hover {
 }
 .adyen-kyc-typography--inverse-secondary {
   color: var(--adyen-sdk-color-label-inverse-secondary, #9ea6b1);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Focus ring */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-checkbox {
+}.adyen-kyc-checkbox {
   display: block;
 }
 .adyen-kyc-checkbox__label {
@@ -1074,7 +1021,6 @@ button[disabled]:hover {
 }
 .adyen-kyc-checkbox__helper-text {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
-  cursor: pointer;
   display: block;
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   padding-left: var(--adyen-sdk-spacer-090, 24px);
@@ -1087,23 +1033,19 @@ button[disabled]:hover {
   /* Check */
   /* Box */
 }
+.adyen-kyc-checkbox__input:hover + .adyen-kyc-checkbox__label::after {
+  background-color: var(--adyen-sdk-color-background-primary-hover, #f7f7f8);
+}
 .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::before {
   opacity: 1;
 }
 .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
   background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-inverse-primary, #00112c);
-}
-.adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
   border-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
-  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
 }
-.adyen-kyc-checkbox__input:focus + .adyen-kyc-checkbox__label::after {
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-inverse-primary, #00112c);
-  box-shadow: 0 0 0 2px var(--adyen-sdk-color-background-highlight-strong, #0070f5);
-}
-.adyen-kyc-checkbox__input:hover:not(:focus) + .adyen-kyc-checkbox__label::after {
-  box-shadow: 0 0 0 2px #dce0e5;
+.adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
+  background-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c);
+  border-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c);
 }
 .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
   border-bottom: var(--adyen-sdk-border-width-m, 2px) solid var(--adyen-sdk-color-background-primary, #ffffff);
@@ -1116,32 +1058,26 @@ button[disabled]:hover {
   top: 4px;
   transform: rotateZ(37deg);
   transform-origin: 100% 100%;
-  transition: opacity 0.2s ease-out;
   width: 5px;
   z-index: 1;
 }
 .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
-  background-color: #fff;
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary, #c9cdd3);
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
   border-radius: var(--adyen-sdk-border-radius-s, 4px);
   content: "";
   height: calc(var(--adyen-sdk-text-body-font-size, 14px) + 2px);
   left: 0;
   position: absolute;
   top: 0;
-  transition: background 0.15s ease-out, border 0.05s ease-out, box-shadow 0.1s ease-out;
   width: calc(var(--adyen-sdk-text-body-font-size, 14px) + 2px);
   z-index: 0;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-form-header {
@@ -1155,16 +1091,12 @@ button[disabled]:hover {
 .adyen-kyc-form-header__description {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
   font-size: var(--adyen-sdk-text-title-font-size, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-field-wrapper {
@@ -1189,6 +1121,7 @@ button[disabled]:hover {
 .adyen-kyc-input-wrapper {
   display: block;
   position: relative;
+  margin-top: var(--adyen-sdk-spacer-040, 8px);
 }
 .adyen-kyc-input-wrapper--block {
   display: block;
@@ -1200,7 +1133,7 @@ button[disabled]:hover {
   min-height: 40px;
   padding-bottom: var(--adyen-sdk-spacer-000, 0px);
   padding-top: var(--adyen-sdk-spacer-000, 0px);
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
   box-sizing: border-box;
@@ -1229,7 +1162,7 @@ button[disabled]:hover {
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-disabled, #dbdee2);
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
   cursor: not-allowed;
-  background-color: #f3f6f9;
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
   border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
 }
 .adyen-kyc-input--disabled:hover {
@@ -1287,38 +1220,8 @@ button[disabled]:hover {
 }
 .adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
   margin-left: var(--adyen-sdk-spacer-040, 8px);
-}.adyen-kyc-disclaimer-container {
-  background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
-  border: 0;
-  border-radius: var(--adyen-sdk-border-radius-s, 4px);
-  margin: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-
-.adyen-kyc-disclaimer__title {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
-  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
-}
-
-.adyen-kyc-disclaimer__content {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  display: flex;
-  flex-direction: column;
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-kyc-disclaimer__content p {
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}.adyen-kyc-field--tax-id {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-}
-
-.adyen-kyc-field--tax-id-absence-reason {
-  margin-top: var(--adyen-sdk-spacer-060, 12px);
-}
-
+}.adyen-kyc-field--tax-id,
+.adyen-kyc-field--tax-id-absence-reason,
 .adyen-kyc-field--same-name-as-legal-name {
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }.adyen-kyc-input--mismatch {
@@ -1363,16 +1266,12 @@ button[disabled]:hover {
 
 .adyen-kyc-label--focused .adyen-kyc-radio-group__label {
   color: inherit;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-input-radio {
@@ -1394,8 +1293,8 @@ button[disabled]:hover {
 
 .adyen-kyc-input-radio__input {
   appearance: none;
-  background-color: #fff;
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
   border-radius: var(--adyen-sdk-border-radius-l, 12px);
   cursor: pointer;
   display: inline-block;
@@ -1415,7 +1314,7 @@ button[disabled]:hover {
   position: absolute;
 }
 .adyen-kyc-input-radio__input::before {
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   border-radius: var(--adyen-sdk-border-radius-l, 12px);
   content: "";
   display: block;
@@ -1436,41 +1335,38 @@ button[disabled]:hover {
   opacity: 1;
   transform: scale(1);
 }
-.adyen-kyc-input-radio__input:checked:disabled::before {
-  background-color: #69778c;
+.adyen-kyc-input-radio__input:checked:hover {
+  border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
+  background-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c);
 }
 .adyen-kyc-input-radio__input:checked:disabled:hover {
-  border-color: transparent;
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
 }
-.adyen-kyc-input-radio__input:checked:hover {
-  border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
+.adyen-kyc-input-radio__input:checked:disabled::before {
+  background-color: var(--adyen-sdk-color-outline-tertiary, #8d95a3);
 }
 .adyen-kyc-input-radio__input:hover {
-  border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
+  background-color: var(--adyen-sdk-color-background-primary-hover, #f7f7f8);
 }
 .adyen-kyc-input-radio__input:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 0, 250, 0.4);
-  transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8)), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
+  transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
   transition-property: box-shadow;
-  border-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
 }
 .adyen-kyc-input-radio__input:disabled {
-  background-color: #dce0e5;
-  border-color: transparent;
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
   cursor: not-allowed;
 }
 
 .adyen-kyc-input-radio__label {
   cursor: pointer;
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
   margin-right: var(--adyen-sdk-spacer-070, 16px);
   padding-left: var(--adyen-sdk-spacer-040, 8px);
   vertical-align: baseline;
-}
-
-.adyen-kyc-input-radio__label--disabled {
-  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
-  cursor: not-allowed;
 }.adyen-kyc-accordion__details,
 .adyen-kyc-accordion__summary {
   background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
@@ -1554,16 +1450,12 @@ button[disabled]:hover {
 
 .adyen-kyc-entity-type-radio-group-card__examples {
   font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-radio-card {
@@ -1614,16 +1506,12 @@ button[disabled]:hover {
 
 .adyen-kyc-radio-card__footer {
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-radio-group-card {
@@ -1664,16 +1552,12 @@ button[disabled]:hover {
   position: absolute;
   right: var(--adyen-sdk-spacer-070, 16px);
   top: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-document-guidance {
@@ -1702,16 +1586,12 @@ button[disabled]:hover {
 
 .adyen-kyc-document-guidance__description {
   font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-dropzone {
@@ -1725,7 +1605,7 @@ button[disabled]:hover {
 }
 .adyen-kyc-dropzone--dragged {
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary-active, #00112c);
-  box-shadow: 0 0 0 3px var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
 }
 .adyen-kyc-dropzone--error {
   border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-critical, #e22d2d);
@@ -1770,16 +1650,12 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
   display: flex;
   font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-dropzone-file {
@@ -1840,16 +1716,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-dropzone-file .adyen-kyc-icon-remove {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-list {
@@ -1898,6 +1770,7 @@ button[disabled]:hover {
 }.adyen-kyc-search-address {
   display: flex;
   flex-direction: column;
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }
 
 .adyen-kyc-search-address--below {
@@ -1934,16 +1807,12 @@ button[disabled]:hover {
   margin: var(--adyen-sdk-spacer-070, 16px) auto var(--adyen-sdk-spacer-000, 0px);
   max-width: 430px;
   text-align: center;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 /**
@@ -2089,16 +1958,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-document-requirements__subtitle {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-bank-verification {
@@ -2114,7 +1979,7 @@ button[disabled]:hover {
 }
 
 .adyen-kyc-bank-verification-container {
-  background: #fff;
+  background: var(--adyen-sdk-color-background-primary, #ffffff);
   border-radius: 0;
   box-shadow: none;
   inset: 0;
@@ -2139,16 +2004,12 @@ button[disabled]:hover {
   display: flex;
   font-size: var(--adyen-sdk-text-title-font-size, 16px);
   margin-right: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-action-bar {
@@ -2200,16 +2061,12 @@ button[disabled]:hover {
   to {
     opacity: 1;
   }
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-field-verification-methods {
@@ -2295,18 +2152,6 @@ button[disabled]:hover {
   position: absolute;
 }.adyen-kyc-individual .adyen-kyc-form {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}.adyen-kyc-context-helper {
-  background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
-  border-radius: var(--adyen-sdk-border-radius-s, 4px);
-  margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
-}
-
-.adyen-kyc-context-helper__content {
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-  display: flex;
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  gap: var(--adyen-sdk-spacer-040, 8px);
 }.adyen-kyc-additional-information {
   display: flex;
   flex-direction: column;
@@ -2315,7 +2160,7 @@ button[disabled]:hover {
 .adyen-kyc-additional-information h3 {
   margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
   font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-weight: 700;
+  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
 }
 .adyen-kyc-additional-information .adyen-kyc-field-wrapper {
@@ -2388,7 +2233,7 @@ button[disabled]:hover {
 }
 .adyen-kyc-business-details .adyen-kyc-form-header__heading {
   font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
-  font-weight: 700;
+  font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
   line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }
@@ -2414,16 +2259,12 @@ button[disabled]:hover {
 .adyen-kyc-business-selection .adyen-kyc-link {
   text-decoration: underline;
   text-wrap: nowrap;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-card {
@@ -2513,16 +2354,12 @@ button[disabled]:hover {
 
 .adyen-kyc-card__warning {
   border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-card-group > .adyen-kyc-card + .adyen-kyc-card {
@@ -2588,16 +2425,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-business-information__business-data .adyen-kyc-business-data__key {
   width: 180px;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-form-container {
@@ -2627,16 +2460,12 @@ button[disabled]:hover {
   display: flex;
   flex-direction: row;
   justify-content: end;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-modal {
@@ -2720,16 +2549,12 @@ button[disabled]:hover {
 
 .adyen-kyc-overlay {
   z-index: 600;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-overlay {
@@ -2756,16 +2581,12 @@ button[disabled]:hover {
 .adyen-kyc-overlay--visible {
   opacity: 1;
   visibility: visible;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-dropin {
@@ -2823,16 +2644,12 @@ button[disabled]:hover {
 .adyen-kyc-dropin__main {
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
   width: 100%;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-loading-input__form .adyen-kyc-form-navigation {
@@ -2884,16 +2701,12 @@ button[disabled]:hover {
   justify-content: space-between;
   list-style-type: none;
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-form-navigation__item {
@@ -2938,16 +2751,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-company-basics .adyen-kyc-field-wrapper {
   flex-direction: column;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-company-lookup {
@@ -3040,9 +2849,7 @@ button[disabled]:hover {
   display: flex;
   justify-content: space-between;
   background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 1px 3px rgba(0, 17, 44, 0.14);
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
-  border-bottom: none;
   padding: var(--adyen-sdk-spacer-070, 16px);
   margin: unset;
 }
@@ -3064,17 +2871,13 @@ button[disabled]:hover {
   border-radius: var(--adyen-sdk-border-radius-m, 8px) var(--adyen-sdk-border-radius-m, 8px) 0 0;
 }
 .adyen-company-lookup-results-list__result-option--selected, .adyen-company-lookup-results-list__result-option:hover {
-  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+  box-shadow: var(--adyen-sdk-shadow-low, 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02));
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-company-lookup-result {
@@ -3097,7 +2900,7 @@ button[disabled]:hover {
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
   border-radius: 0 0 var(--adyen-sdk-border-radius-m, 8px) var(--adyen-sdk-border-radius-m, 8px);
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
-  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
 }
 .adyen-company-lookup-result__alert--error {
   background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
@@ -3183,16 +2986,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-trustee-type-radio-group-card input {
   margin-left: auto;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-decision-makers {
@@ -3261,16 +3060,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-decision-makers .adyen-kyc-guidance-list li {
   margin-bottom: var(--adyen-sdk-spacer-020, 4px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-entity-association {
@@ -3344,16 +3139,12 @@ button[disabled]:hover {
 .adyen-kyc-entity-association-alert {
   margin-top: var(--adyen-sdk-spacer-040, 8px);
   padding: var(--adyen-sdk-spacer-040, 8px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-status {
@@ -3412,7 +3203,7 @@ button[disabled]:hover {
   background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
 }
 .adyen-kyc-status__icon--download {
-  background-color: var(--adyen-sdk-color-label-highlight, #0070f5);
+  background-color: var(--adyen-sdk-color-background-highlight-strong, #0070f5);
 }
 .adyen-kyc-status__icon .adyen-kyc-loading-indicator::before {
   background: var(--adyen-sdk-color-background-inverse-primary, #00112c);
@@ -3423,16 +3214,12 @@ button[disabled]:hover {
 
 .adyen-layout-xs-only .adyen-kyc-status__text {
   display: none;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-actions-menu {
@@ -3455,16 +3242,12 @@ button[disabled]:hover {
   justify-content: flex-end;
   padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
   width: 100%;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-entity-status {
@@ -3533,13 +3316,13 @@ button[disabled]:hover {
   margin-top: var(--adyen-sdk-spacer-020, 4px);
 }@keyframes adyen-kyc-shimmer {
   0% {
-    background-color: hsl(0, 0%, 83%);
+    background-color: var(--adyen-sdk-color-background-tertiary, #eeeff1);
   }
   50% {
-    background-color: hsl(0, 0%, 90%);
+    background-color: var(--adyen-sdk-color-background-quaternary, #c0c5cc);
   }
   100% {
-    background-color: hsl(0, 0%, 83%);
+    background-color: var(--adyen-sdk-color-background-tertiary, #eeeff1);
   }
 }
 .adyen-kyc-shimmer {
@@ -3613,16 +3396,12 @@ button[disabled]:hover {
 }
 .adyen-kyc-introduction__nav button {
   flex-grow: 1;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-progress {
@@ -3641,7 +3420,7 @@ button[disabled]:hover {
   height: 4px;
 }
 .adyen-kyc-progress__step--active {
-  background-color: var(--adyen-sdk-color-background-highlight-strong, #0070f5);
+  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
 .adyen-kyc-progress__step-label {
   border: 0;
@@ -3679,16 +3458,12 @@ button[disabled]:hover {
 
 .adyen-kyc-singpass-logo-container {
   width: 92px;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-task-list__container {
@@ -3751,14 +3526,14 @@ button[disabled]:hover {
 
 .adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary) {
   width: 100%;
-  background-color: #fff;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   color: var(--adyen-sdk-color-label-primary, #00112c);
   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);
 }
 .adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):hover {
-  background-color: #fff;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
 }
 .adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary) svg {
   margin-left: var(--adyen-sdk-spacer-040, 8px);
@@ -3773,16 +3548,12 @@ button[disabled]:hover {
 .adyen-task-list__description {
   display: flex;
   align-items: center;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-task-item {
@@ -3822,7 +3593,7 @@ button[disabled]:hover {
 }
 .adyen-task-item__icon-wrapper {
   align-items: center;
-  background-color: var(--adyen-sdk-color-label-primary, #00112c);
+  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
   color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
   display: flex;
@@ -3891,16 +3662,12 @@ button[disabled]:hover {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   margin-right: var(--adyen-sdk-spacer-040, 8px);
   padding-top: 1px;
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-task-list-group {
@@ -3933,16 +3700,12 @@ button[disabled]:hover {
 }
 .adyen-task-list-group + .adyen-task-list-group {
   margin-top: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-trust-members {
@@ -4018,16 +3781,12 @@ button[disabled]:hover {
   text-decoration: underline;
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-view-verification-status {
@@ -4056,19 +3815,559 @@ button[disabled]:hover {
 .adyen-view-verification-status__button {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-ui-element-container-wrapper {
+.adyen-kyc-u-display-flex {
+  display: flex !important;
+}
+
+.adyen-kyc-u-display-inline-flex {
+  display: inline-flex !important;
+}
+
+.adyen-kyc-u-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.adyen-kyc-u-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.adyen-kyc-u-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.adyen-kyc-u-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.adyen-kyc-u-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.adyen-kyc-u-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.adyen-kyc-u-align-items-start {
+  align-items: start !important;
+}
+
+.adyen-kyc-u-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.adyen-kyc-u-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.adyen-kyc-u-align-items-center {
+  align-items: center !important;
+}
+
+.adyen-kyc-u-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.adyen-kyc-u-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.adyen-kyc-u-align-items-end {
+  align-items: end !important;
+}
+
+.adyen-kyc-u-justify-content-center {
+  justify-content: center !important;
+}
+
+.adyen-kyc-u-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.adyen-kyc-u-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.adyen-kyc-u-justify-content-start {
+  justify-content: start !important;
+}
+
+.adyen-kyc-u-justify-content-end {
+  justify-content: end !important;
+}
+
+.adyen-kyc-u-justify-content-left {
+  justify-content: left !important;
+}
+
+.adyen-kyc-u-justify-content-right {
+  justify-content: right !important;
+}
+
+.adyen-kyc-u-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.adyen-kyc-u-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.adyen-kyc-u-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.adyen-kyc-u-justify-content-stretch {
+  justify-content: stretch !important;
+}
+
+.adyen-kyc-u-flex-1 {
+  flex: 1 !important;
+}
+
+.adyen-kyc-u-flex-2 {
+  flex: 2 !important;
+}
+
+.adyen-kyc-u-flex-3 {
+  flex: 3 !important;
+}
+
+.adyen-kyc-u-flex-4 {
+  flex: 4 !important;
+}
+
+.adyen-kyc-u-width-full {
+  width: 100% !important;
+}
+
+.adyen-kyc-u-margin-auto {
+  margin: auto !important;
+}
+
+.adyen-kyc-u-margin-bottom-auto {
+  margin-bottom: auto !important;
+}
+
+.adyen-kyc-u-margin-left-auto {
+  margin-left: auto !important;
+}
+
+.adyen-kyc-u-margin-right-auto {
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-top-auto {
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-x-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-y-auto {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-0 {
+  margin: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-left-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-right-0 {
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-top-0 {
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-x-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-y-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-2 {
+  margin: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-left-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-right-2 {
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-top-2 {
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-x-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-y-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-4 {
+  margin: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-left-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-right-4 {
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-top-4 {
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-x-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-y-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-6 {
+  margin: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-left-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-right-6 {
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-top-6 {
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-x-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-y-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-8 {
+  margin: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-left-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-right-8 {
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-top-8 {
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-x-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-y-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-10 {
+  margin: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-left-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-right-10 {
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-top-10 {
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-x-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-y-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-12 {
+  margin: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-left-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-right-12 {
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-top-12 {
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-x-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-y-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-16 {
+  margin: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-left-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-right-16 {
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-top-16 {
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-x-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-y-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-20 {
+  margin: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-left-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-right-20 {
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-top-20 {
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-x-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-y-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-24 {
+  margin: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-left-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-right-24 {
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-top-24 {
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-x-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-y-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-32 {
+  margin: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-left-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-right-32 {
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-top-32 {
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-x-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-y-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-40 {
+  margin: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-left-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-right-40 {
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-top-40 {
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-x-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-y-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-48 {
+  margin: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-left-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-right-48 {
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-top-48 {
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-x-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-y-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-ui-element-container-wrapper {
   width: 100%;
 }
 
@@ -4081,16 +4380,12 @@ button[disabled]:hover {
 }
 .adyen-layout-xs-only .adyen-kyc-ui-element-container {
   padding: var(--adyen-sdk-spacer-040, 8px);
-}/* #region Colors */
-/* #endregion */
-/* #region Borders */
+}/* #region Borders */
 /* #endregion */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
-/* #region Focus ring */
-/* #endregion */
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-toast {
@@ -4198,16 +4493,10 @@ button[disabled]:hover {
   margin: var(--adyen-sdk-spacer-030, 6px);
 }
 
-.adyen-kyc-dropin__toast-context {
-  max-width: calc(100% - var(--adyen-sdk-spacer-070, 16px));
-}
-
 .adyen-kyc-dropin__toast-stack {
-  display: flex;
-  justify-content: center;
   position: absolute;
-  width: 100%;
-  z-index: 1;
+  left: 50%;
+  transform: translate(-50%, 0);
 }
 .adyen-layout-xs-only .adyen-kyc-dropin__toast-stack {
   bottom: var(--adyen-sdk-spacer-070, 16px);