@adyen/kyc-components 3.79.0 → 3.80.0-beta.0

package/dist/style.css

@@ -1457,6 +1457,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--adyen-sdk-spacer-040, 8px);
+  width: 100%;
 }
 
 .adyen-kyc-list-header {
@@ -2426,8 +2427,12 @@ fieldset {
   border: none;
   padding: 0 0 var(--adyen-sdk-spacer-080, 20px);
   margin: 0;
-}.adyen-kyc-business-selection--loading {
-  min-height: 228px;
+}.adyen-kyc-business-selection {
+  height: 100%;
+  width: 100%;
+}
+.adyen-kyc-business-selection--loading {
+  min-height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3304,7 +3309,8 @@ fieldset {
 */
 @layer default;
 @layer default {
-  :root {
+  :root,
+  :host {
     --adyen-sdk-animation-easing-standard: cubic-bezier(0.2, 0, 0.4, 0.9);
     --adyen-sdk-animation-easing-enter: cubic-bezier(0.12, 0.6, 0.4, 0.95);
     --adyen-sdk-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
@@ -3581,7 +3587,8 @@ fieldset {
     --adyen-sdk-z-index-local-tier-4: 4;
   }
 }
-:root {
+:root,
+:host {
   --adyen-sdk-border-default-s: var(--adyen-sdk-border-width-s) solid
     var(--adyen-sdk-color-outline-primary);
   --adyen-sdk-border-default-m: var(--adyen-sdk-border-width-m) solid
@@ -3794,23 +3801,66 @@ fieldset {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-}.adyen-kyc-provider-button {
-  align-items: center;
+}/* for container queries */
+.adyen-kyc-stack-layout {
+  align-items: flex-start;
   display: flex;
-  gap: var(--adyen-sdk-spacer-060);
-  justify-content: center;
-  max-height: var(--adyen-sdk-text-body-line-height);
-  overflow: visible;
+  flex-direction: column;
+  width: 100%;
 }
 
-.adyen-kyc-provider-button-display-name {
-  display: none;
+.adyen-kyc-stack-layout-gap-xs {
+  gap: var(--adyen-sdk-spacer-020);
 }
 
-.adyen-kyc-provider-button svg {
-  display: block;
-  height: 28px;
-  width: auto;
+.adyen-kyc-stack-layout-gap-s {
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-stack-layout-gap-m {
+  gap: var(--adyen-sdk-spacer-070);
+}
+
+.adyen-kyc-stack-layout-gap-l {
+  gap: var(--adyen-sdk-spacer-100);
+}
+
+.adyen-kyc-stack-layout-gap-xl {
+  gap: var(--adyen-sdk-spacer-140);
+}
+
+@container main (min-width: 480px) {
+  .adyen-kyc-stack-layout-horizontal {
+    flex-direction: row;
+  }
+  .adyen-kyc-stack-layout-horizontal > * {
+    flex-grow: 1;
+  }
+}.adyen-kyc-landing-layout-image {
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-image svg,
+.adyen-kyc-landing-layout-image span {
+  width: 100%;
+  height: 100%;
+}
+
+.adyen-kyc-landing-layout-actions {
+  text-align: center;
+  max-width: 320px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-disclaimer {
+  text-align: center;
+  margin-top: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-landing-layout-center {
+  text-align: center;
+  width: 100%;
 }
 .adyen-kyc-tile-container {
   width: 100%;
@@ -4004,73 +4054,13 @@ fieldset {
   .adyen-kyc-data-conflicts-list {
     display: none;
   }
-}.adyen-kyc-verification-disclaimer {
-  text-align: center;
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
-}/* for container queries */
-.adyen-kyc-verification-header {
-  text-align: center;
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px);
-  width: 370px;
-}
-@container main (min-width: 1024px) {
-  .adyen-kyc-verification-header {
-    width: 464px;
-  }
-}
-
-.adyen-kyc-verification-header-image {
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px);
-  width: 180px;
-  height: 142px;
-}
-
-.adyen-kyc-verification-header-content {
-  text-align: center;
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
 }/* for container queries */
-.adyen-kyc-verify-onfido-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-@container main (min-width: 1024px) {
-  .adyen-kyc-verify-onfido-container {
-    width: 528px;
-  }
+.adyen-kyc-verification-header-image svg {
+  max-width: 180px;
 }
 
 .adyen-kyc-verify-onfido-error {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}
-
-.adyen-kyc-verify-onfido-header {
-  text-align: center;
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px);
-  width: 370px;
-}
-@container main (min-width: 1024px) {
-  .adyen-kyc-verify-onfido-header {
-    width: 464px;
-  }
-}
-.adyen-kyc-verify-onfido-header-image {
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px);
-  width: 180px;
-  height: 142px;
-}
-
-.adyen-kyc-verify-onfido-content {
-  width: 350px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-  align-items: center;
-}
-
-.adyen-kyc-verify-onfido-body {
-  text-align: center;
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
+  width: 100%;
 }/* for container queries */
 .adyen-kyc-uploaded-document {
   color: var(--adyen-sdk-color-label-primary, #00112c);
@@ -4081,14 +4071,10 @@ fieldset {
   border: var(--adyen-sdk-border-default-s);
   border-radius: var(--adyen-sdk-border-radius-l, 12px);
   padding: var(--adyen-sdk-spacer-070, 16px);
-  width: 370px;
+  width: 100%;
   vertical-align: middle;
   margin-top: var(--adyen-sdk-spacer-040, 8px);
-}
-@container main (min-width: 1024px) {
-  .adyen-kyc-uploaded-document {
-    width: 464px;
-  }
+  text-align: left;
 }.adyen-kyc-avatar {
   align-items: center;
   display: flex;
@@ -4249,29 +4235,7 @@ fieldset {
   flex: 1;
   overflow-x: auto;
 }
-.adyen-kyc-manage-transfer-instrument {
-  padding: var(--adyen-sdk-spacer-070, 16px);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}.adyen-kyc-manage-ti-overview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}.adyen-kyc-manage-ti-overview-item-summary {
-  margin: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-kyc-manage-ti-overview-item-summary__header {
-  margin-left: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-kyc-manage-ti-overview-item-summary__error {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-manage-ti-overview-item-summary__card:not(:last-of-type) {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-}/* for container queries */
+/* for container queries */
 .adyen-kyc-status {
   border: 0;
   border-radius: var(--adyen-sdk-border-radius-l, 12px);
@@ -4336,7 +4300,25 @@ fieldset {
   .adyen-kyc-status__text {
     display: none;
   }
-}.adyen-task-list__container {
+}.adyen-kyc-provider-button {
+  align-items: center;
+  display: flex;
+  gap: var(--adyen-sdk-spacer-060);
+  justify-content: center;
+  max-height: var(--adyen-sdk-text-body-line-height);
+  overflow: visible;
+}
+
+.adyen-kyc-provider-button-display-name {
+  display: none;
+}
+
+.adyen-kyc-provider-button svg {
+  display: block;
+  height: 28px;
+  width: auto;
+}
+.adyen-task-list__container {
   margin-left: auto;
   margin-right: auto;
   display: flex;
@@ -4489,6 +4471,11 @@ fieldset {
 }
 .adyen-task-list-group > .adyen-kyc-card__body {
   padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+}.adyen-kyc-business-lines {
+  flex-direction: column;
+  width: 100%;
+  max-width: 520px;
+  margin: var(--adyen-sdk-spacer-000, 0px) auto;
 }/* for container queries */
 .adyen-kyc-dropin {
   background: var(--adyen-sdk-color-background-primary, #ffffff);
@@ -4730,6 +4717,28 @@ fieldset {
 }
 .adyen-kyc-entity-association .adyen-kyc-alert .adyen-kyc-alert-header {
   align-items: center;
+}.adyen-kyc-manage-transfer-instrument {
+  padding: var(--adyen-sdk-spacer-070, 16px);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}.adyen-kyc-manage-ti-overview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}.adyen-kyc-manage-ti-overview-item-summary {
+  margin: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-manage-ti-overview-item-summary__header {
+  margin-left: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-manage-ti-overview-item-summary__error {
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-manage-ti-overview-item-summary__card:not(:last-of-type) {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }.adyen-kyc-verification {
   display: block;
   overflow: hidden;
@@ -4937,6 +4946,36 @@ fieldset {
 
 .adyen-kyc-singpass-logo-container {
   width: 92px;
+}.adyen-kyc-in-task-status {
+  width: 148px;
+  height: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto 8px;
+  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
+  padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-040, 8px);
+  border-radius: var(--adyen-sdk-border-radius-xl, 24px);
+}
+.adyen-kyc-in-task-status-indicator {
+  width: var(--adyen-sdk-spacer-060, 12px);
+  height: var(--adyen-sdk-spacer-060, 12px);
+  border-radius: 50%;
+  margin-right: var(--adyen-sdk-spacer-020, 4px);
+}
+.adyen-kyc-in-task-status-indicator-success {
+  background-color: var(--adyen-sdk-color-decorative-green, #09ab4b);
+}
+.adyen-kyc-in-task-status-indicator-error {
+  background-color: var(--adyen-sdk-color-decorative-red, #e22d2d);
+}
+.adyen-kyc-in-task-status-indicator-warning {
+  background-color: var(--adyen-sdk-color-decorative-orange, #dd7d00);
+}
+.adyen-kyc-in-task-status-label {
+  font-size: var(--adyen-sdk-spacer-060, 12px);
+  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
 }/* for container queries */
 @container main (min-width: 680px) and (max-width: 1024px) {
   .adyen-kyc-decision-makers__container {
@@ -4974,98 +5013,90 @@ fieldset {
 }
 .adyen-kyc-decision-makers .adyen-kyc-guidance-list li {
   margin-bottom: var(--adyen-sdk-spacer-020, 4px);
-}.adyen-kyc-in-task-status {
-  width: 148px;
-  height: 26px;
-  display: flex;
-  justify-content: center;
+}.adyen-kyc-list-item {
   align-items: center;
-  margin: 0 auto 8px;
-  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
-  padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-040, 8px);
-  border-radius: var(--adyen-sdk-border-radius-xl, 24px);
-}
-.adyen-kyc-in-task-status-indicator {
-  width: var(--adyen-sdk-spacer-060, 12px);
-  height: var(--adyen-sdk-spacer-060, 12px);
-  border-radius: 50%;
-  margin-right: var(--adyen-sdk-spacer-020, 4px);
-}
-.adyen-kyc-in-task-status-indicator-success {
-  background-color: var(--adyen-sdk-color-decorative-green, #09ab4b);
-}
-.adyen-kyc-in-task-status-indicator-error {
-  background-color: var(--adyen-sdk-color-decorative-red, #e22d2d);
-}
-.adyen-kyc-in-task-status-indicator-warning {
-  background-color: var(--adyen-sdk-color-decorative-orange, #dd7d00);
-}
-.adyen-kyc-in-task-status-label {
-  font-size: var(--adyen-sdk-spacer-060, 12px);
-  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}/* for container queries */
-.adyen-kyc-stack-layout {
-  align-items: flex-start;
+  background-color: transparent;
+  border: none;
   display: flex;
-  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+  overflow: hidden;
+  text-align: left;
   width: 100%;
 }
 
-.adyen-kyc-stack-layout-gap-xs {
-  gap: var(--adyen-sdk-spacer-020);
+.adyen-kyc-list-item-interactive {
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  cursor: pointer;
+  outline-offset: var(--adyen-sdk-focus-ring-spacer, 1px);
+  outline: var(--adyen-sdk-focus-ring-outline, 3px) solid transparent;
+  padding: var(--adyen-sdk-spacer-040, 8px);
+  transition: var(--adyen-sdk-animation-duration-slow, 250ms);
 }
-
-.adyen-kyc-stack-layout-gap-s {
-  gap: var(--adyen-sdk-spacer-040);
+@media (hover: hover) {
+  .adyen-kyc-list-item-interactive:hover {
+    background-color: var(--adyen-sdk-color-background-secondary-hover, #eeeff1);
+  }
 }
-
-.adyen-kyc-stack-layout-gap-m {
-  gap: var(--adyen-sdk-spacer-070);
+.adyen-kyc-list-item-interactive:active {
+  background-color: var(--adyen-sdk-color-background-secondary-active, #e3e5e9);
 }
-
-.adyen-kyc-stack-layout-gap-l {
-  gap: var(--adyen-sdk-spacer-100);
+.adyen-kyc-list-item-interactive:focus-visible {
+  outline-color: var(--adyen-sdk-color-label-primary, #00112c);
 }
-
-.adyen-kyc-stack-layout-gap-xl {
-  gap: var(--adyen-sdk-spacer-140);
+.adyen-kyc-list-item-interactive:disabled, .adyen-kyc-list-item-interactive:disabled * {
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
+  pointer-events: none;
 }
 
-@container main (min-width: 480px) {
-  .adyen-kyc-stack-layout-horizontal {
-    flex-direction: row;
-  }
-  .adyen-kyc-stack-layout-horizontal > * {
-    flex-grow: 1;
-  }
-}.adyen-kyc-landing-layout-image {
-  margin: 0 auto;
+.adyen-kyc-list-item-text {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--adyen-sdk-spacer-010, 2px);
+  padding-left: var(--adyen-sdk-spacer-040, 8px);
+  padding-right: var(--adyen-sdk-spacer-040, 8px);
 }
 
-.adyen-kyc-landing-layout-image svg,
-.adyen-kyc-landing-layout-image span {
-  width: 100%;
-  height: 100%;
+.adyen-kyc-list-item-title {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', 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-stronger-font-weight, 500);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  margin: 0;
 }
 
-.adyen-kyc-landing-layout-actions {
-  text-align: center;
-  max-width: 320px;
-  width: 100%;
-  margin: 0 auto;
+.adyen-kyc-list-item-description {
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
 }
 
-.adyen-kyc-landing-layout-disclaimer {
-  text-align: center;
-  margin-top: var(--adyen-sdk-spacer-040);
+.adyen-kyc-list-item-disclosure {
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
+  height: 16px;
+  width: 16px;
 }
 
-.adyen-kyc-landing-layout-center {
+.adyen-kyc-list-item-accessory {
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
+  font-family: var(--adyen-sdk-text-caption-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.adyen-kyc-decision-maker-details-actions {
   text-align: center;
+  max-width: 320px;
   width: 100%;
-}
-.adyen-kyc-tax-reporting-dropin {
+  margin: 0 auto;
+}.adyen-kyc-decision-makers-getting-started {
+  max-width: 450px;
+  margin: var(--adyen-sdk-spacer-000, 0px) auto;
+}.adyen-kyc-tax-reporting-dropin {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5105,9 +5136,15 @@ fieldset {
   margin: 0 var(--adyen-sdk-spacer-070, 16px);
   padding: var(--adyen-sdk-spacer-070, 16px) 0;
   border-top: var(--adyen-sdk-border-default-s);
-}.adyen-kyc-business-details {
+}/* for container queries */
+.adyen-kyc-business-details {
   min-height: 480px;
 }
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-business-details .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
+    margin-left: 0;
+  }
+}
 .adyen-kyc-business-details--hide,
 .adyen-kyc-business-details [class*="--hide"] {
   display: none;