@adyen/kyc-components 2.56.2 → 2.57.0

package/dist/style.css

@@ -276,12 +276,10 @@ button[disabled]:hover {
   margin-right: var(--adyen-sdk-spacer-000, 0px);
   text-decoration: none;
 }
-.adyen-kyc-link--icon-right {
+.adyen-kyc-link--icon-left {
+  display: inline-flex;
   flex-direction: row-reverse;
-}
-.adyen-kyc-link--icon-right > .adyen-kyc-link__icon {
-  margin-left: var(--adyen-sdk-spacer-020, 4px);
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
+  gap: var(--adyen-sdk-spacer-020, 4px);
 }
 .adyen-kyc-link__text {
   display: inline;
@@ -300,7 +298,7 @@ button[disabled]:hover {
   margin: var(--adyen-sdk-spacer-000, 0px);
 }.adyen-kyc-icon {
   color: inherit;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: baseline;
 }
 .adyen-kyc-icon svg path {
@@ -1211,7 +1209,7 @@ button[disabled]:hover {
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-form-header {
-  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px);
 }
 .adyen-kyc-form-header__heading {
   font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
@@ -1550,6 +1548,54 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
+.adyen-kyc-radio-group-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+}
+.adyen-kyc-radio-group-card__label {
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  padding-right: var(--adyen-sdk-spacer-070, 16px);
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-layout-md .adyen-kyc-radio-group-card__label {
+  padding-right: var(--adyen-sdk-spacer-000, 0px);
+}
+.adyen-kyc-radio-group-card__subtitle {
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
+}
+.adyen-kyc-radio-group-card input {
+  display: flex;
+  margin-left: auto;
+}
+.adyen-kyc-radio-group-card + .adyen-kyc-input__inline-validation {
+  bottom: -30px;
+  top: auto;
+}
+.adyen-kyc-radio-group-card--floating-radio {
+  position: relative;
+}
+.adyen-kyc-radio-group-card--floating-radio .adyen-kyc-radio-group-card__input {
+  bottom: auto;
+  left: auto;
+  position: absolute;
+  right: var(--adyen-sdk-spacer-070, 16px);
+  top: var(--adyen-sdk-spacer-070, 16px);
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
 .adyen-kyc-radio-card {
   color: var(--adyen-sdk-color-label-primary, #00112c);
   font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -1609,54 +1655,6 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-radio-group-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-kyc-radio-group-card__label {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  padding-right: var(--adyen-sdk-spacer-070, 16px);
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-layout-md .adyen-kyc-radio-group-card__label {
-  padding-right: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-radio-group-card__subtitle {
-  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
-  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
-}
-.adyen-kyc-radio-group-card input {
-  display: flex;
-  margin-left: auto;
-}
-.adyen-kyc-radio-group-card + .adyen-kyc-input__inline-validation {
-  bottom: -30px;
-  top: auto;
-}
-.adyen-kyc-radio-group-card--floating-radio {
-  position: relative;
-}
-.adyen-kyc-radio-group-card--floating-radio .adyen-kyc-radio-group-card__input {
-  bottom: auto;
-  left: auto;
-  position: absolute;
-  right: var(--adyen-sdk-spacer-070, 16px);
-  top: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
 .adyen-kyc-document-guidance {
   overflow: auto;
   container-type: inline-size;
@@ -1860,12 +1858,36 @@ button[disabled]:hover {
 
 .adyen-kyc-list--ordered {
   list-style-type: decimal;
-}fieldset {
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
+.adyen-kyc-address__condensed-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.adyen-layout-md .adyen-kyc-address__condensed-fields {
+  flex-direction: row;
+  gap: var(--adyen-sdk-spacer-080, 20px);
+}
+.adyen-layout-md .adyen-kyc-address__condensed-fields > *:first-child {
+  flex: 0 0 50%;
+}
+.adyen-layout-md .adyen-kyc-address__condensed-fields > *:not(:first-child) {
+  flex: 1;
+}
+
 .adyen-kyc-search-address {
   display: flex;
   flex-direction: column;
@@ -2231,70 +2253,6 @@ button[disabled]:hover {
 .adyen-kyc-instant-verification-error .adyen-kyc-alert__icon {
   left: -28px;
   position: absolute;
-}.adyen-kyc-individual .adyen-kyc-form {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}.adyen-kyc-additional-information {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-120, 48px);
-}
-.adyen-kyc-additional-information__section-heading {
-  margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-050, 10px);
-}
-.adyen-kyc-additional-information fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-.adyen-kyc-additional-information .adyen-kyc-field-wrapper {
-  flex-direction: column;
-}
-.adyen-kyc-additional-information .adyen-kyc-form-header {
-  margin: 0 !important;
-}
-.adyen-kyc-additional-information .adyen-kyc__address {
-  margin-bottom: 0 !important;
-}.adyen-kyc-field--dbaName {
-  margin-left: 0 !important;
-}.adyen-kyc-verified-business-card {
-  display: flex;
-  flex-direction: column;
-  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-}
-.adyen-kyc-verified-business-card__address {
-  display: flex;
-  flex-direction: column;
-}
-.adyen-kyc-verified-business-card__address a {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-}
-.adyen-kyc-verified-business-card__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-080, 20px);
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-  transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
-}
-.adyen-kyc-verified-business-card__content--collapsed {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  margin: 0;
-  padding-left: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-kyc-verified-business-card__content--expanded {
-  max-height: 480px;
-}
-.adyen-kyc-verified-business-card__expand-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  text-decoration: underline;
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */
@@ -2303,123 +2261,56 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-structured-list {
-  width: 100%;
+.adyen-kyc-card {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  margin: var(--adyen-sdk-spacer-000, 0px);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
+  border-radius: var(--adyen-sdk-border-radius-l, 12px);
+  display: block;
+  outline: none;
 }
-
-.adyen-kyc-structured-list-list-item {
-  display: flex;
-  flex-direction: column;
+.adyen-kyc-card *,
+.adyen-kyc-card *::before,
+.adyen-kyc-card *::after {
+  box-sizing: border-box;
 }
-.adyen-layout-md .adyen-kyc-structured-list-list-item {
-  flex-direction: row;
-  align-items: center;
+.adyen-kyc-card--secondary {
+  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
 }
 
-.adyen-kyc-structured-list-list-item:not(:last-of-type) {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+.adyen-kyc-card.adyen-kyc-card--stateful {
+  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
+  cursor: pointer;
+  transition-duration: 0.2s;
+  transition-property: border-color, box-shadow;
+  transition-timing-function: ease;
+  position: relative;
+  z-index: 0;
 }
-
-.adyen-kyc-structured-list-label {
-  flex: 1;
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+.adyen-kyc-card.adyen-kyc-card--stateful:hover {
+  border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
+  z-index: 1;
 }
-
-.adyen-kyc-structured-list-value {
-  flex: 1;
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-  overflow-x: auto;
+.adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
+  z-index: 2;
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
 }
-.adyen-layout-md .adyen-kyc-structured-list-value {
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}.adyen-kyc-basic-information {
-  display: flex;
-  flex-direction: column;
+
+.adyen-kyc-card.adyen-kyc-card--active {
+  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
+  cursor: pointer;
+  transition-duration: 0.2s;
+  transition-property: border-color, box-shadow;
+  transition-timing-function: ease;
 }
-.adyen-kyc-basic-information .adyen-kyc-field-wrapper {
-  flex-direction: column;
-}
-.adyen-kyc-basic-information fieldset {
-  border: none;
-  padding: 0 0 var(--adyen-sdk-spacer-080, 20px);
-  margin: 0;
-}.adyen-kyc-business-selection--loading {
-  min-height: 228px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-business-selection__footer {
-  display: flex;
-  justify-content: center;
-  padding: var(--adyen-sdk-spacer-090, 24px) 0;
-  gap: var(--adyen-sdk-spacer-020, 4px);
-}
-.adyen-kyc-business-selection .adyen-kyc-link {
-  text-decoration: underline;
-  text-wrap: nowrap;
-}/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-card {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
-  border-radius: var(--adyen-sdk-border-radius-l, 12px);
-  display: block;
-  outline: none;
-}
-.adyen-kyc-card *,
-.adyen-kyc-card *::before,
-.adyen-kyc-card *::after {
-  box-sizing: border-box;
-}
-
-.adyen-kyc-card.adyen-kyc-card--stateful {
-  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
-  cursor: pointer;
-  transition-duration: 0.2s;
-  transition-property: border-color, box-shadow;
-  transition-timing-function: ease;
-  position: relative;
-  z-index: 0;
-}
-.adyen-kyc-card.adyen-kyc-card--stateful:hover {
-  border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
-  z-index: 1;
-}
-.adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
-  z-index: 2;
-  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
-}
-
-.adyen-kyc-card.adyen-kyc-card--active {
-  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
-  cursor: pointer;
-  transition-duration: 0.2s;
-  transition-property: border-color, box-shadow;
-  transition-timing-function: ease;
-}
-.adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
-  border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
+.adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
+  border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
 }
 .adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
   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));
@@ -2460,6 +2351,192 @@ 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);
+}.adyen-kyc-skeleton {
+  width: 100%;
+  height: 100%;
+  background-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  animation: 2s ease-in-out 0.5s infinite normal none running adyen-kyc-skeleton;
+}
+
+.adyen-kyc-skeleton-circle {
+  border-radius: 50%;
+}
+
+.adyen-kyc-skeleton-text {
+  height: 1em !important;
+  margin: 0.2em 0 !important;
+}
+
+@keyframes adyen-kyc-skeleton {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}.adyen-kyc-prefer-instant-verification-method {
+  display: block;
+  text-align: center;
+}
+.adyen-kyc-prefer-instant-verification-method-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-prefer-instant-verification-method-image {
+  width: 50%;
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-prefer-instant-verification-method-instant-button {
+  margin-top: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-prefer-instant-verification-method-instant-button svg {
+  height: 1.5rem;
+}
+.adyen-kyc-prefer-instant-verification-method-manual-button {
+  margin-top: var(--adyen-sdk-spacer-030, 6px);
+}
+.adyen-kyc-prefer-instant-verification-method-manual-button-dark {
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}.adyen-kyc-individual .adyen-kyc-form {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
+}.adyen-kyc-additional-information {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-120, 48px);
+}
+.adyen-kyc-additional-information__section-heading {
+  margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-050, 10px);
+}
+.adyen-kyc-additional-information fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.adyen-kyc-additional-information .adyen-kyc-field-wrapper {
+  flex-direction: column;
+}
+.adyen-kyc-additional-information .adyen-kyc-form-header {
+  margin: 0 !important;
+}
+.adyen-kyc-additional-information .adyen-kyc__address {
+  margin-bottom: 0 !important;
+}.adyen-kyc-field--dbaName {
+  margin-left: 0 !important;
+}.adyen-kyc-verified-business-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+.adyen-kyc-verified-business-card__address {
+  display: flex;
+  flex-direction: column;
+}
+.adyen-kyc-verified-business-card__address a {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+.adyen-kyc-verified-business-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-080, 20px);
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
+  transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
+}
+.adyen-kyc-verified-business-card__content--collapsed {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  margin: 0;
+  padding-left: var(--adyen-sdk-spacer-080, 20px);
+}
+.adyen-kyc-verified-business-card__content--expanded {
+  max-height: 480px;
+}
+.adyen-kyc-verified-business-card__expand-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  text-decoration: underline;
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-structured-list {
+  width: 100%;
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-structured-list-list-item {
+  display: flex;
+  flex-direction: column;
+}
+.adyen-layout-md .adyen-kyc-structured-list-list-item {
+  flex-direction: row;
+  align-items: center;
+}
+
+.adyen-kyc-structured-list-list-item:not(:last-of-type) {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+}
+
+.adyen-kyc-structured-list-label {
+  flex: 1;
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-structured-list-value {
+  flex: 1;
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+  overflow-x: auto;
+}
+.adyen-layout-md .adyen-kyc-structured-list-value {
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}.adyen-kyc-basic-information {
+  display: flex;
+  flex-direction: column;
+}
+.adyen-kyc-basic-information .adyen-kyc-field-wrapper {
+  flex-direction: column;
+}
+.adyen-kyc-basic-information fieldset {
+  border: none;
+  padding: 0 0 var(--adyen-sdk-spacer-080, 20px);
+  margin: 0;
+}.adyen-kyc-business-selection--loading {
+  min-height: 228px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-business-selection__footer {
+  display: flex;
+  justify-content: center;
+  padding: var(--adyen-sdk-spacer-090, 24px) 0;
+  gap: var(--adyen-sdk-spacer-020, 4px);
+}
+.adyen-kyc-business-selection .adyen-kyc-link {
+  text-decoration: underline;
+  text-wrap: nowrap;
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */
@@ -2491,9 +2568,7 @@ button[disabled]:hover {
 }
 .adyen-kyc-card-group-spaced .adyen-kyc-card {
   margin-top: -1px;
-  transition-duration: 0.3s;
-  transition-property: min-height;
-  transition-timing-function: ease;
+  transition: min-height 0.3s ease !important;
   min-height: 80px;
 }
 .adyen-kyc-card-group-spaced .adyen-kyc-card--active {
@@ -2775,7 +2850,6 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  padding: var(--adyen-sdk-spacer-100, 32px);
   background: var(--adyen-sdk-color-background-primary, #ffffff);
   display: flex;
   flex-direction: column;
@@ -2789,9 +2863,6 @@ button[disabled]:hover {
 .adyen-kyc-dropin *::after {
   box-sizing: border-box;
 }
-.adyen-layout-xs-only .adyen-kyc-dropin {
-  padding: var(--adyen-sdk-spacer-040, 8px);
-}
 .adyen-kyc-dropin-container {
   position: relative;
   min-height: 480px;
@@ -2942,225 +3013,6 @@ button[disabled]:hover {
 }
 .adyen-kyc-form-navigation__item-icon--error {
   color: var(--adyen-sdk-color-label-critical, #e22d2d);
-}.adyen-kyc-company-basics {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-company-basics .adyen-kyc-field-wrapper {
-  flex-direction: column;
-}/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-company-lookup {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-company-lookup *,
-.adyen-kyc-company-lookup *::before,
-.adyen-kyc-company-lookup *::after {
-  box-sizing: border-box;
-}
-.adyen-kyc-company-lookup--hidden {
-  display: none;
-}
-.adyen-kyc-company-lookup__skeleton-loader {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--adyen-sdk-color-background-quaternary, #c0c5cc);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  width: 100%;
-  height: 73px;
-}
-.adyen-kyc-company-lookup__skeleton-loader::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 200%;
-  height: 100%;
-  background: linear-gradient(90deg, var(--adyen-sdk-color-background-secondary, #f7f7f8), var(--adyen-sdk-color-background-tertiary, #eeeff1), var(--adyen-sdk-color-background-secondary, #f7f7f8));
-  animation: moveGradient 1.5s linear infinite;
-}
-
-@keyframes moveGradient {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-.adyen-company-lookup-results-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-company-lookup-results-header__title-bar {
-  display: flex;
-  justify-content: space-between;
-}
-.adyen-company-lookup-results-header__description {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  display: flex;
-  align-items: flex-start;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-company-lookup-results-header button {
-  color: var(--adyen-sdk-color-label-highlight, #0070f5);
-  border: unset;
-  background-color: unset;
-  padding: unset;
-}
-.adyen-company-lookup-results-header button:hover {
-  cursor: pointer;
-  color: var(--adyen-sdk-color-label-highlight, #0070f5);
-  text-decoration: underline;
-}
-
-.adyen-company-lookup-results-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-  max-height: 450px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  padding-bottom: var(--adyen-sdk-spacer-020, 4px);
-}
-.adyen-company-lookup-results-list__result-option {
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
-  padding: var(--adyen-sdk-spacer-070, 16px);
-  margin: unset;
-}
-.adyen-company-lookup-results-list__result-option .adyen-option-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-company-lookup-results-list__result-option .adyen-kyc-radio-card__header {
-  justify-content: space-between;
-}
-.adyen-company-lookup-results-list__result-option .adyen-kyc-radio-card__body {
-  margin: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-.adyen-company-lookup-results-list__result-option .adyen-kyc-radio-group-card__label {
-  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-.adyen-company-lookup-results-list__result-option--selected {
-  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: 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 Inline components */
-/* #endregion */
-.adyen-company-lookup-result {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.adyen-company-lookup-result *,
-.adyen-company-lookup-result *::before,
-.adyen-company-lookup-result *::after {
-  box-sizing: border-box;
-}
-.adyen-company-lookup-result__alert {
-  display: flex;
-  padding: var(--adyen-sdk-spacer-070, 16px);
-  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: 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);
-}
-.adyen-company-lookup-result__alert--verified {
-  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
-}
-.adyen-company-lookup-result__alert--warning {
-  background-color: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
-}
-.adyen-company-lookup-result__icon {
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  margin-right: var(--adyen-sdk-spacer-080, 20px);
-  width: 18px;
-  height: 18px;
-}
-.adyen-company-lookup-result__icon .adyen-kyc-icon {
-  align-items: center;
-  display: flex;
-}
-.adyen-company-lookup-result__icon--error {
-  color: var(--adyen-sdk-color-label-critical, #e22d2d);
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-family: var(--adyen-sdk-text-title-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-line-height, 26px);
-}
-.adyen-company-lookup-result__icon--verified {
-  background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
-  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
-  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
-}
-.adyen-company-lookup-result__icon--warning {
-  color: var(--adyen-sdk-color-label-warning, #b06300);
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-family: var(--adyen-sdk-text-title-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-line-height, 26px);
-}
-.adyen-company-lookup-result__text {
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-company-lookup-result__text--bold {
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-}.adyen-kyc-company-other-details {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-company-other-details .adyen-kyc-field-wrapper {
-  flex-direction: column;
-}
-.adyen-kyc-company-other-details .adyen-kyc-checkbox {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }.adyen-kyc-business-type-selection {
   margin-left: auto;
   margin-right: auto;
@@ -3930,40 +3782,8 @@ button[disabled]:hover {
   --adv-accordion-header-color: var(--adyen-sdk-color-label-primary, #00112c);
   --adv-text-font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
   --adv-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-}.adyen-kyc-signer-card {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.adyen-kyc-signer-card__name {
-  flex-grow: 1;
-}.adyen-kyc-skeleton {
-  width: 100%;
-  height: 100%;
-  background-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  animation: 2s ease-in-out 0.5s infinite normal none running adyen-kyc-skeleton;
-}
-
-.adyen-kyc-skeleton-circle {
-  border-radius: 50%;
-}
-
-.adyen-kyc-skeleton-text {
-  height: 1em !important;
-  margin: 0.2em 0 !important;
-}
-
-@keyframes adyen-kyc-skeleton {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
+}.adyen-kyc-signed-alert:last-of-type {
+  margin-top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */
@@ -3978,6 +3798,7 @@ button[disabled]:hover {
   justify-content: space-between;
   align-items: center;
   gap: var(--adyen-sdk-spacer-070, 16px);
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   width: 100%;
   min-width: 250px;
   max-width: 650px;
@@ -3985,9 +3806,8 @@ button[disabled]:hover {
   /* html button default styling removal */
   border: none;
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  background: inherit;
   text-align: left;
-  padding: var(--adyen-sdk-spacer-040, 8px);
+  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-080, 20px);
 }
 
 .adyen-kyc-embedded-status-loading {
@@ -4007,6 +3827,7 @@ button[disabled]:hover {
 
 .adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) {
   background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  transition: background-color 0.2s;
 }
 
 .adyen-kyc-embedded-status-avatar {
@@ -4019,9 +3840,6 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
   background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
-.adyen-kyc-embedded-status-avatar .adyen-kyc-embedded-status-icon svg {
-  height: 100%;
-}
 
 .adyen-kyc-embedded-status-info {
   display: flex;
@@ -4081,8 +3899,581 @@ button[disabled]:hover {
 .adyen-view-verification-status__button {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
-}.adyen-kyc-ui-element-container {
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-u-display-flex {
+  display: flex !important;
+}
+
+.adyen-kyc-u-display-inline-flex {
+  display: inline-flex !important;
+}
+
+.adyen-kyc-u-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.adyen-kyc-u-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.adyen-kyc-u-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.adyen-kyc-u-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.adyen-kyc-u-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.adyen-kyc-u-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.adyen-kyc-u-align-items-start {
+  align-items: start !important;
+}
+
+.adyen-kyc-u-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.adyen-kyc-u-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.adyen-kyc-u-align-items-center {
+  align-items: center !important;
+}
+
+.adyen-kyc-u-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.adyen-kyc-u-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.adyen-kyc-u-align-items-end {
+  align-items: end !important;
+}
+
+.adyen-kyc-u-justify-content-center {
+  justify-content: center !important;
+}
+
+.adyen-kyc-u-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.adyen-kyc-u-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.adyen-kyc-u-justify-content-start {
+  justify-content: start !important;
+}
+
+.adyen-kyc-u-justify-content-end {
+  justify-content: end !important;
+}
+
+.adyen-kyc-u-justify-content-left {
+  justify-content: left !important;
+}
+
+.adyen-kyc-u-justify-content-right {
+  justify-content: right !important;
+}
+
+.adyen-kyc-u-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.adyen-kyc-u-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.adyen-kyc-u-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.adyen-kyc-u-justify-content-stretch {
+  justify-content: stretch !important;
+}
+
+.adyen-kyc-u-flex-1 {
+  flex: 1 !important;
+}
+
+.adyen-kyc-u-flex-2 {
+  flex: 2 !important;
+}
+
+.adyen-kyc-u-flex-3 {
+  flex: 3 !important;
+}
+
+.adyen-kyc-u-flex-4 {
+  flex: 4 !important;
+}
+
+.adyen-kyc-u-width-full {
+  width: 100% !important;
+}
+
+.adyen-kyc-u-margin-auto {
+  margin: auto !important;
+}
+
+.adyen-kyc-u-margin-bottom-auto {
+  margin-bottom: auto !important;
+}
+
+.adyen-kyc-u-margin-left-auto {
+  margin-left: auto !important;
+}
+
+.adyen-kyc-u-margin-right-auto {
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-top-auto {
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-x-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.adyen-kyc-u-margin-y-auto {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+.adyen-kyc-u-margin-0 {
+  margin: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-left-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-right-0 {
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-top-0 {
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-x-0 {
+  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-y-0 {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
+  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
+}
+
+.adyen-kyc-u-margin-2 {
+  margin: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-left-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-right-2 {
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-top-2 {
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-x-2 {
+  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-y-2 {
+  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
+  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
+}
+
+.adyen-kyc-u-margin-4 {
+  margin: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-left-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-right-4 {
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-top-4 {
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-x-4 {
+  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-y-4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
+  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
+}
+
+.adyen-kyc-u-margin-6 {
+  margin: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-left-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-right-6 {
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-top-6 {
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-x-6 {
+  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-y-6 {
+  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
+  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
+}
+
+.adyen-kyc-u-margin-8 {
+  margin: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-left-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-right-8 {
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-top-8 {
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-x-8 {
+  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-y-8 {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
+  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
+}
+
+.adyen-kyc-u-margin-10 {
+  margin: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-left-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-right-10 {
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-top-10 {
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-x-10 {
+  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-y-10 {
+  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
+  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
+}
+
+.adyen-kyc-u-margin-12 {
+  margin: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-left-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-right-12 {
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-top-12 {
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-x-12 {
+  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-y-12 {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
+  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
+}
+
+.adyen-kyc-u-margin-16 {
+  margin: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-left-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-right-16 {
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-top-16 {
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-x-16 {
+  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-y-16 {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
+  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
+}
+
+.adyen-kyc-u-margin-20 {
+  margin: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-left-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-right-20 {
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-top-20 {
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-x-20 {
+  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-y-20 {
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
+  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
+}
+
+.adyen-kyc-u-margin-24 {
+  margin: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-left-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-right-24 {
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-top-24 {
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-x-24 {
+  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-y-24 {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
+  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
+}
+
+.adyen-kyc-u-margin-32 {
+  margin: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-left-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-right-32 {
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-top-32 {
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-x-32 {
+  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-y-32 {
+  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
+  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
+}
+
+.adyen-kyc-u-margin-40 {
+  margin: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-left-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-right-40 {
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-top-40 {
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-x-40 {
+  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-y-40 {
+  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
+  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
+}
+
+.adyen-kyc-u-margin-48 {
+  margin: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-bottom-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-left-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-right-48 {
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-top-48 {
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-x-48 {
+  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-u-margin-y-48 {
+  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
+  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
+}
+
+.adyen-kyc-ui-element-container-wrapper {
+  width: 100%;
+}
+
+.adyen-kyc-ui-element-container {
+  box-sizing: border-box;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   position: relative;
+  padding: var(--adyen-sdk-spacer-100, 32px);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+.adyen-layout-xs-only .adyen-kyc-ui-element-container {
+  padding: var(--adyen-sdk-spacer-040, 8px);
+}
+
+/*
+* Compatibility later to ensure components do NOT receive extra padding
+* as is the case with dropins, without breaking dropins.
+* Once the Component Layout has been done `.adyen-kyc-externalComponent`
+* can be safely removed everywere.
+*/
+.adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
+  padding: 0;
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */