@adyen/kyc-components 3.30.2 → 3.31.0

package/dist/style.css

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