@adyen/kyc-components 4.5.0 → 4.6.0-beta.0

package/dist/style.css

@@ -3543,58 +3543,6 @@ fieldset {
 .adyen-kyc-input-group .adyen-kyc-input:is(:active, :focus, :hover, :active:hover, :focus:hover, --focus) {
   outline: none;
   border: none;
-}/* for container queries */
-.adyen-kyc-document-guidance {
-  overflow: auto;
-  container-type: inline-size;
-}
-
-.adyen-kyc-document-guidance__container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50%);
-}
-
-@container main (min-width: 680px) {
-  .adyen-kyc-document-guidance__container {
-    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-  }
-}
-.adyen-kyc-document-guidance__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: var(--adyen-internal-spacer-060, 12px);
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-document-guidance__item .adyen-kyc-document-guidance__container {
-    margin: var(--adyen-internal-spacer-000, 0px);
-  }
-}
-
-.adyen-kyc-document-guidance__item > span {
-  height: auto;
-  width: 100px;
-}
-
-.adyen-kyc-document-guidance__description {
-  display: flex;
-  gap: var(--adyen-internal-spacer-040, 8px);
-  margin-top: var(--adyen-internal-spacer-010, 2px);
-  color: var(--adyen-internal-color-label-on-color, #ffffff);
-}
-
-.adyen-kyc-document-guidance__description-text {
-  color: var(--adyen-internal-color-label-primary, #001222);
-}
-
-.adyen-kyc-document-guidance__icon {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--adyen-internal-color-background-success-strong, #008845);
-}
-.adyen-kyc-document-guidance__icon--invalid {
-  background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
 }.adyen-kyc-tile-container {
   width: 100%;
 }
@@ -3816,6 +3764,58 @@ fieldset {
 .adyen-kyc-dropzone-file__button {
   border: 0;
   padding: var(--adyen-internal-spacer-000, 0px);
+}/* for container queries */
+.adyen-kyc-document-guidance {
+  overflow: auto;
+  container-type: inline-size;
+}
+
+.adyen-kyc-document-guidance__container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50%);
+}
+
+@container main (min-width: 680px) {
+  .adyen-kyc-document-guidance__container {
+    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+  }
+}
+.adyen-kyc-document-guidance__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: var(--adyen-internal-spacer-060, 12px);
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-document-guidance__item .adyen-kyc-document-guidance__container {
+    margin: var(--adyen-internal-spacer-000, 0px);
+  }
+}
+
+.adyen-kyc-document-guidance__item > span {
+  height: auto;
+  width: 100px;
+}
+
+.adyen-kyc-document-guidance__description {
+  display: flex;
+  gap: var(--adyen-internal-spacer-040, 8px);
+  margin-top: var(--adyen-internal-spacer-010, 2px);
+  color: var(--adyen-internal-color-label-on-color, #ffffff);
+}
+
+.adyen-kyc-document-guidance__description-text {
+  color: var(--adyen-internal-color-label-primary, #001222);
+}
+
+.adyen-kyc-document-guidance__icon {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background-color: var(--adyen-internal-color-background-success-strong, #008845);
+}
+.adyen-kyc-document-guidance__icon--invalid {
+  background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
 }.adyen-kyc-description-field {
   padding: var(--adyen-internal-spacer-080, 20px) 0;
 }.adyen-kyc-landing-layout-image {
@@ -4094,106 +4094,6 @@ fieldset {
   .adyen-kyc-form-with-sidebar {
     flex-direction: column;
   }
-}/* for container queries */
-.adyen-action-bar {
-  background-color: var(--adyen-internal-color-background-primary, #ffffff);
-  display: flex;
-  align-items: center;
-  margin: var(--adyen-internal-spacer-120, 48px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px);
-}
-@container main (max-width: 680px) {
-  .adyen-action-bar {
-    flex-direction: column;
-    gap: var(--adyen-internal-spacer-040, 8px);
-  }
-}
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-action-bar {
-    flex-flow: row-reverse;
-    justify-content: space-between;
-  }
-}/* for container queries */
-.adyen-kyc-radio-group-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-040, 8px);
-}
-.adyen-kyc-radio-group-card__label {
-  font-size: var(--adyen-internal-text-body-font-size, 14px);
-  font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
-  line-height: var(--adyen-internal-text-body-line-height, 20px);
-  padding-right: var(--adyen-internal-spacer-070, 16px);
-  margin-bottom: var(--adyen-internal-spacer-070, 16px);
-}
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-kyc-radio-group-card__label {
-    padding-right: var(--adyen-internal-spacer-000, 0px);
-  }
-}
-.adyen-kyc-radio-group-card__subtitle {
-  color: var(--adyen-internal-color-label-tertiary, #8c959d);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
-  font-family: var(--adyen-internal-text-caption-font-family);
-  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
-  margin-bottom: var(--adyen-internal-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;
-}
-
-/* stylelint-disable-next-line selector-no-qualifying-type */
-input.adyen-kyc-radio-group-card__radio--floating {
-  bottom: auto;
-  left: auto;
-  position: absolute;
-  right: var(--adyen-internal-spacer-070, 16px);
-  top: var(--adyen-internal-spacer-070, 16px);
-}.adyen-kyc-radio-card {
-  border: var(--adyen-internal-border-default-s);
-  border-radius: var(--adyen-internal-border-radius-m, 8px);
-  cursor: pointer;
-  display: block;
-  list-style: none;
-  padding: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  position: relative;
-}
-.adyen-kyc-radio-card--disabled {
-  cursor: not-allowed;
-  opacity: 50%;
-}
-.adyen-kyc-radio-card__loading-icon {
-  display: flex;
-  align-self: center;
-  justify-content: center;
-  border-radius: 50%;
-  height: 18px;
-  width: 18px;
-}
-.adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::before {
-  background: var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);
-}
-.adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::after {
-  border-top-color: var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);
-}
-
-.adyen-kyc-radio-card__body {
-  color: var(--adyen-internal-color-label-secondary, #5c6874);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
-  font-family: var(--adyen-internal-text-caption-font-family);
-  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
-  margin-bottom: var(--adyen-internal-spacer-040, 8px);
-}
-
-.adyen-kyc-radio-card__footer {
-  margin-bottom: var(--adyen-internal-spacer-040, 8px);
 }.adyen-kyc-tag {
   display: inline-block;
   font-size: var(--adyen-internal-text-caption-font-size);
@@ -4238,22 +4138,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
   background-color: var(--adyen-internal-color-background-success-weak);
   color: var(--adyen-internal-color-label-on-background-success-weak);
 }
-.adyen-kyc-bank-document {
-  min-height: 480px;
-}
-
-.adyen-kyc-bank-document-document-upload,
-.adyen-kyc-bank-document-document-description {
-  padding-bottom: var(--adyen-internal-spacer-070);
-}
-.adyen-kyc-document-requirements {
-  display: flex;
-  flex-direction: column;
-}
-
-.adyen-kyc-document-requirements-subtitle {
-  margin-bottom: var(--adyen-internal-spacer-070);
-}
 /* for container queries */
 .adyen-kyc-bank-document-classification {
   min-height: 480px;
@@ -4361,48 +4245,16 @@ input.adyen-kyc-radio-group-card__radio--floating {
   box-shadow: none;
   inset: 0;
 }/* for container queries */
-.adyen-kyc-bank-verification-widget {
-  border: 0 transparent;
-  height: 100vh;
-  width: 100vw;
-  z-index: 10000;
-}
-.adyen-kyc-bank-verification-widget-container {
-  transition: height 0.2s;
-  overflow: hidden;
-  touch-action: none;
-  overscroll-behavior: none;
-}/* for container queries */
-.adyen-kyc-bank-verification-widget {
-  border: 0 transparent;
-  height: 100%;
-  width: 100%;
-}
-.adyen-kyc-bank-verification-widget-container {
-  height: 650px;
-  transition: height 0.2s;
-}
-.adyen-kyc-bank-verification-widget-container--plaid-institutions {
-  height: 365px;
-}
-.adyen-kyc-bank-verification-widget-container--plaid-modal {
-  height: 650px;
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-bank-verification-widget-container--plaid-modal {
-    height: 500px;
-  }
-}
-.adyen-kyc-bank-verification-widget-container--fullscreen {
+.adyen-kyc-bank-verification-widget-container-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  inset: 0;
   z-index: 500;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: none;
 }
 .adyen-kyc-bank-verification-widget-container .adyen-open-banking-sdk-widget {
-  border: 0 transparent;
+  border: 0;
   height: 100%;
   width: 100%;
 }.adyen-kyc-check-guidance {
@@ -4980,7 +4832,88 @@ input.adyen-kyc-radio-group-card__radio--floating {
   font-size: var(--adyen-internal-text-body-font-size, 14px);
   line-height: var(--adyen-internal-text-body-line-height, 20px);
   margin: var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-060, 12px) var(--adyen-internal-spacer-000, 0px);
-}.adyen-kyc-invited-decision-makers-container {
+}.adyen-kyc-list-item {
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  gap: var(--adyen-internal-spacer-040);
+  overflow: hidden;
+  text-align: left;
+  width: 100%;
+}
+
+.adyen-kyc-list-item-interactive {
+  border-radius: var(--adyen-internal-border-radius-m);
+  cursor: pointer;
+  outline-offset: var(--adyen-internal-focus-ring-spacer);
+  outline: var(--adyen-internal-focus-ring-outline) solid transparent;
+  padding: var(--adyen-internal-spacer-040);
+  transition: var(--adyen-internal-animation-duration-slow);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--adyen-internal-color-background-secondary-hover);
+    }
+  }
+
+  &:active {
+    background-color: var(--adyen-internal-color-background-secondary-active);
+  }
+
+  &:focus-visible {
+    outline-color: var(--adyen-internal-color-label-primary);
+  }
+
+  &:disabled,
+  &:disabled * {
+    color: var(--adyen-internal-color-label-disabled);
+    pointer-events: none;
+  }
+}
+
+.adyen-kyc-list-item-text {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--adyen-internal-spacer-010);
+  padding-left: var(--adyen-internal-spacer-040);
+  padding-right: var(--adyen-internal-spacer-040);
+}
+
+.adyen-kyc-list-item-title {
+  color: var(--adyen-internal-color-label-primary);
+  font-family: var(--adyen-internal-text-body-font-family);
+  font-size: var(--adyen-internal-text-body-font-size);
+  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
+  line-height: var(--adyen-internal-text-body-line-height);
+  margin: 0;
+}
+
+.adyen-kyc-list-item-description {
+  color: var(--adyen-internal-color-label-secondary);
+  font-family: var(--adyen-internal-text-caption-font-family);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  line-height: var(--adyen-internal-text-caption-line-height);
+}
+
+.adyen-kyc-list-item-disclosure {
+  color: var(--adyen-internal-color-label-tertiary);
+  height: 16px;
+  width: 16px;
+}
+
+.adyen-kyc-list-item-accessory {
+  color: var(--adyen-internal-color-label-tertiary);
+  font-family: var(--adyen-internal-text-caption-font-family);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  font-weight: var(--adyen-internal-text-caption-font-weight);
+  line-height: var(--adyen-internal-text-caption-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.adyen-kyc-invited-decision-makers-container {
   max-width: 500px;
   margin: var(--adyen-internal-spacer-000, 0px) auto;
 }.adyen-kyc-tabs {
@@ -5237,88 +5170,107 @@ input.adyen-kyc-radio-group-card__radio--floating {
 
 .adyen-kyc-singpass-logo-container {
   width: 92px;
-}.adyen-kyc-list-item {
-  align-items: center;
-  background-color: transparent;
-  border: none;
+}/* for container queries */
+.adyen-kyc-radio-group-card {
   display: flex;
-  gap: var(--adyen-internal-spacer-040);
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-040, 8px);
 }
-
-.adyen-kyc-list-item-interactive {
-  border-radius: var(--adyen-internal-border-radius-m);
-  cursor: pointer;
-  outline-offset: var(--adyen-internal-focus-ring-spacer);
-  outline: var(--adyen-internal-focus-ring-outline) solid transparent;
-  padding: var(--adyen-internal-spacer-040);
-  transition: var(--adyen-internal-animation-duration-slow);
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--adyen-internal-color-background-secondary-hover);
-    }
-  }
-
-  &:active {
-    background-color: var(--adyen-internal-color-background-secondary-active);
-  }
-
-  &:focus-visible {
-    outline-color: var(--adyen-internal-color-label-primary);
-  }
-
-  &:disabled,
-  &:disabled * {
-    color: var(--adyen-internal-color-label-disabled);
-    pointer-events: none;
+.adyen-kyc-radio-group-card__label {
+  font-size: var(--adyen-internal-text-body-font-size, 14px);
+  font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
+  line-height: var(--adyen-internal-text-body-line-height, 20px);
+  padding-right: var(--adyen-internal-spacer-070, 16px);
+  margin-bottom: var(--adyen-internal-spacer-070, 16px);
+}
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-radio-group-card__label {
+    padding-right: var(--adyen-internal-spacer-000, 0px);
   }
 }
-
-.adyen-kyc-list-item-text {
+.adyen-kyc-radio-group-card__subtitle {
+  color: var(--adyen-internal-color-label-tertiary, #8c959d);
+  font-size: var(--adyen-internal-text-caption-font-size, 12px);
+  font-family: var(--adyen-internal-text-caption-font-family);
+  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
+  line-height: var(--adyen-internal-text-caption-line-height, 18px);
+  margin-bottom: var(--adyen-internal-spacer-020, 4px);
+}
+.adyen-kyc-radio-group-card input {
   display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: var(--adyen-internal-spacer-010);
-  padding-left: var(--adyen-internal-spacer-040);
-  padding-right: var(--adyen-internal-spacer-040);
+  margin-left: auto;
+}
+.adyen-kyc-radio-group-card + .adyen-kyc-input__inline-validation {
+  bottom: -30px;
+  top: auto;
 }
 
-.adyen-kyc-list-item-title {
-  color: var(--adyen-internal-color-label-primary);
-  font-family: var(--adyen-internal-text-body-font-family);
-  font-size: var(--adyen-internal-text-body-font-size);
-  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
-  line-height: var(--adyen-internal-text-body-line-height);
-  margin: 0;
+/* stylelint-disable-next-line selector-no-qualifying-type */
+input.adyen-kyc-radio-group-card__radio--floating {
+  bottom: auto;
+  left: auto;
+  position: absolute;
+  right: var(--adyen-internal-spacer-070, 16px);
+  top: var(--adyen-internal-spacer-070, 16px);
+}.adyen-kyc-radio-card {
+  border: var(--adyen-internal-border-default-s);
+  border-radius: var(--adyen-internal-border-radius-m, 8px);
+  cursor: pointer;
+  display: block;
+  list-style: none;
+  padding: var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-070, 16px) var(--adyen-internal-spacer-000, 0px);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+}
+.adyen-kyc-radio-card--disabled {
+  cursor: not-allowed;
+  opacity: 50%;
+}
+.adyen-kyc-radio-card__loading-icon {
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+}
+.adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::before {
+  background: var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);
+}
+.adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::after {
+  border-top-color: var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);
 }
 
-.adyen-kyc-list-item-description {
-  color: var(--adyen-internal-color-label-secondary);
+.adyen-kyc-radio-card__body {
+  color: var(--adyen-internal-color-label-secondary, #5c6874);
+  font-size: var(--adyen-internal-text-caption-font-size, 12px);
   font-family: var(--adyen-internal-text-caption-font-family);
-  font-size: var(--adyen-internal-text-caption-font-size);
-  line-height: var(--adyen-internal-text-caption-line-height);
+  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
+  line-height: var(--adyen-internal-text-caption-line-height, 18px);
+  margin-bottom: var(--adyen-internal-spacer-040, 8px);
 }
 
-.adyen-kyc-list-item-disclosure {
-  color: var(--adyen-internal-color-label-tertiary);
-  height: 16px;
-  width: 16px;
+.adyen-kyc-radio-card__footer {
+  margin-bottom: var(--adyen-internal-spacer-040, 8px);
+}/* for container queries */
+.adyen-action-bar {
+  background-color: var(--adyen-internal-color-background-primary, #ffffff);
+  display: flex;
+  align-items: center;
+  margin: var(--adyen-internal-spacer-120, 48px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px);
 }
-
-.adyen-kyc-list-item-accessory {
-  color: var(--adyen-internal-color-label-tertiary);
-  font-family: var(--adyen-internal-text-caption-font-family);
-  font-size: var(--adyen-internal-text-caption-font-size);
-  font-weight: var(--adyen-internal-text-caption-font-weight);
-  line-height: var(--adyen-internal-text-caption-line-height);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@container main (max-width: 680px) {
+  .adyen-action-bar {
+    flex-direction: column;
+    gap: var(--adyen-internal-spacer-040, 8px);
+  }
 }
-.adyen-kyc-actions-menu {
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-action-bar {
+    flex-flow: row-reverse;
+    justify-content: space-between;
+  }
+}.adyen-kyc-actions-menu {
   background: var(--adyen-internal-color-background-secondary);
   border: var(--adyen-internal-border-default-s);
   border-radius: var(--adyen-internal-border-radius-l);
@@ -5887,6 +5839,9 @@ input.adyen-kyc-radio-group-card__radio--floating {
 .adyen-kyc-source-of-funds-wrapper-description {
   margin-top: var(--adyen-internal-spacer-050, 10px);
 }
+.adyen-kyc-source-of-funds-same-as-checkbox {
+  margin-bottom: var(--adyen-internal-spacer-090, 24px);
+}
 .adyen-kyc-source-of-funds-getting-started {
   text-align: center;
   margin: var(--adyen-internal-spacer-000, 0px) auto;