@adyen/kyc-components 3.82.6 → 3.83.0-beta.1

package/dist/style.css

@@ -1412,6 +1412,178 @@
   position: absolute;
   white-space: nowrap;
   width: 1px;
+}/* for container queries */
+.adyen-kyc-modal {
+  background-color: var(--adyen-sdk-color-background-modal, #ffffff);
+  border: var(--adyen-sdk-spacer-000, 0px);
+  box-shadow: var(--adyen-sdk-shadow-high, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: var(--adyen-sdk-spacer-000, 0px);
+  position: fixed;
+}
+.adyen-kyc-modal:focus-visible {
+  outline: none;
+}
+
+.adyen-kyc-modal-body {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.adyen-kyc-modal-body-height {
+  height: 100%;
+}
+
+.adyen-kyc-modal-accessable-title {
+  display: none;
+}
+
+.adyen-kyc-modal-transition-slide-in {
+  animation-name: adyen-kyc-slide-in;
+  animation-duration: 400ms;
+  animation-timing-function: ease-out;
+}
+
+.adyen-kyc-modal-transition-drop-in {
+  animation-name: adyen-kyc-drop-in;
+  animation-duration: 250ms;
+  animation-timing-function: ease;
+}
+
+.adyen-kyc-modal-inset {
+  padding: var(--adyen-sdk-spacer-140, 64px) var(--adyen-sdk-spacer-070, 16px);
+}
+@media (min-width: 480px) {
+  .adyen-kyc-modal-inset {
+    padding-left: var(--adyen-sdk-spacer-100, 32px);
+    padding-right: var(--adyen-sdk-spacer-100, 32px);
+  }
+}
+@media (min-width: 680px) {
+  .adyen-kyc-modal-inset {
+    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
+    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
+  }
+}
+
+.adyen-kyc-modal-small {
+  border-radius: var(--adyen-sdk-border-radius-l, 12px);
+  max-width: 400px;
+  width: 80vw;
+}
+
+.adyen-kyc-modal-medium {
+  height: 100vh;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100vw;
+}
+@media (min-width: 680px) {
+  .adyen-kyc-modal-medium {
+    border-radius: var(--adyen-sdk-border-radius-l, 12px);
+    height: 90vh;
+    max-height: 600px;
+    max-width: 600px;
+    width: 90vw;
+  }
+}
+
+.adyen-kyc-modal-large {
+  height: 100vh;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100vw;
+}
+@media (min-width: 680px) {
+  .adyen-kyc-modal-large {
+    border-radius: var(--adyen-sdk-border-radius-l, 12px);
+    height: 90vh;
+    max-height: 900px;
+    max-width: 900px;
+    width: 90vw;
+  }
+}
+
+.adyen-kyc-modal-fullscreen {
+  height: 100vh;
+  margin: 0;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100vw;
+}
+
+.adyen-kyc-modal::backdrop {
+  animation-name: adyen-kyc-backdrop-dissolve;
+  animation-duration: 400ms;
+  animation-timing-function: ease;
+  background-color: var(--adyen-sdk-color-support-overlay, #001222);
+  opacity: 0.5;
+  backdrop-filter: blur(10px);
+}
+
+.adyen-kyc-modal-button {
+  position: absolute;
+  top: var(--adyen-sdk-spacer-070, 16px);
+  right: var(--adyen-sdk-spacer-070, 16px);
+  z-index: 10;
+}
+
+@keyframes adyen-kyc-backdrop-dissolve {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.5;
+    backdrop-filter: blur(10px);
+  }
+}
+@keyframes adyen-kyc-slide-in {
+  0% {
+    opacity: 0;
+    top: 64px;
+  }
+  100% {
+    opacity: 1;
+    top: 0;
+  }
+}
+@keyframes adyen-kyc-drop-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.adyen-kyc-modal-header {
+  align-items: center;
+  display: flex;
+  font-size: var(--adyen-sdk-text-title-font-size, 16px);
+  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
+  gap: var(--adyen-sdk-spacer-040, 8px);
+  justify-content: space-between;
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+
+.adyen-kyc-modal-content {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+
+.adyen-kyc-modal-footer {
+  align-items: center;
+  border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dadddf);
+  display: flex;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+  justify-content: flex-end;
+  padding: var(--adyen-sdk-spacer-070, 16px);
 }.adyen-kyc-checkbox__label {
   color: var(--adyen-sdk-color-label-primary, #001222);
   cursor: pointer;
@@ -1873,197 +2045,25 @@
   color: var(--adyen-sdk-color-label-secondary, #5c6874);
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
 }
-.adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
-  outline: 0;
-}
-
-.adyen-kyc-select-input--non-filterable {
-  all: unset;
-}
-
-.adyen-kyc-select-input--placeholder {
-  color: var(--adyen-sdk-color-label-secondary, #5c6874);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-}
-
-.adyen-kyc-ignore-pointer-events {
-  pointer-events: none;
-}
-
-.adyen-kyc-handle-pointer-events {
-  pointer-events: auto;
-}/* for container queries */
-.adyen-kyc-modal {
-  background-color: var(--adyen-sdk-color-background-modal, #ffffff);
-  border: var(--adyen-sdk-spacer-000, 0px);
-  box-shadow: var(--adyen-sdk-shadow-high, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-  position: fixed;
-}
-.adyen-kyc-modal:focus-visible {
-  outline: none;
-}
-
-.adyen-kyc-modal-body {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.adyen-kyc-modal-body-height {
-  height: 100%;
-}
-
-.adyen-kyc-modal-accessable-title {
-  display: none;
-}
-
-.adyen-kyc-modal-transition-slide-in {
-  animation-name: adyen-kyc-slide-in;
-  animation-duration: 400ms;
-  animation-timing-function: ease-out;
-}
-
-.adyen-kyc-modal-transition-drop-in {
-  animation-name: adyen-kyc-drop-in;
-  animation-duration: 250ms;
-  animation-timing-function: ease;
-}
-
-.adyen-kyc-modal-inset {
-  padding: var(--adyen-sdk-spacer-140, 64px) var(--adyen-sdk-spacer-070, 16px);
-}
-@media (min-width: 480px) {
-  .adyen-kyc-modal-inset {
-    padding-left: var(--adyen-sdk-spacer-100, 32px);
-    padding-right: var(--adyen-sdk-spacer-100, 32px);
-  }
-}
-@media (min-width: 680px) {
-  .adyen-kyc-modal-inset {
-    padding-left: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
-    padding-right: calc(var(--adyen-sdk-spacer-070, 16px) * 2 + 44px);
-  }
-}
-
-.adyen-kyc-modal-small {
-  border-radius: var(--adyen-sdk-border-radius-l, 12px);
-  max-width: 400px;
-  width: 80vw;
-}
-
-.adyen-kyc-modal-medium {
-  height: 100vh;
-  max-height: 100vh;
-  max-width: 100vw;
-  width: 100vw;
-}
-@media (min-width: 680px) {
-  .adyen-kyc-modal-medium {
-    border-radius: var(--adyen-sdk-border-radius-l, 12px);
-    height: 90vh;
-    max-height: 600px;
-    max-width: 600px;
-    width: 90vw;
-  }
-}
-
-.adyen-kyc-modal-large {
-  height: 100vh;
-  max-height: 100vh;
-  max-width: 100vw;
-  width: 100vw;
-}
-@media (min-width: 680px) {
-  .adyen-kyc-modal-large {
-    border-radius: var(--adyen-sdk-border-radius-l, 12px);
-    height: 90vh;
-    max-height: 900px;
-    max-width: 900px;
-    width: 90vw;
-  }
-}
-
-.adyen-kyc-modal-fullscreen {
-  height: 100vh;
-  margin: 0;
-  max-height: 100vh;
-  max-width: 100vw;
-  width: 100vw;
-}
-
-.adyen-kyc-modal::backdrop {
-  animation-name: adyen-kyc-backdrop-dissolve;
-  animation-duration: 400ms;
-  animation-timing-function: ease;
-  background-color: var(--adyen-sdk-color-support-overlay, #001222);
-  opacity: 0.5;
-  backdrop-filter: blur(10px);
-}
-
-.adyen-kyc-modal-button {
-  position: absolute;
-  top: var(--adyen-sdk-spacer-070, 16px);
-  right: var(--adyen-sdk-spacer-070, 16px);
-  z-index: 10;
-}
-
-@keyframes adyen-kyc-backdrop-dissolve {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.5;
-    backdrop-filter: blur(10px);
-  }
-}
-@keyframes adyen-kyc-slide-in {
-  0% {
-    opacity: 0;
-    top: 64px;
-  }
-  100% {
-    opacity: 1;
-    top: 0;
-  }
-}
-@keyframes adyen-kyc-drop-in {
-  0% {
-    opacity: 0;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.adyen-kyc-modal-header {
-  align-items: center;
-  display: flex;
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  gap: var(--adyen-sdk-spacer-040, 8px);
-  justify-content: space-between;
-  padding: var(--adyen-sdk-spacer-070, 16px);
+.adyen-kyc-select-input--filterable:focus, .adyen-kyc-select-input--filterable:active {
+  outline: 0;
 }
 
-.adyen-kyc-modal-content {
-  flex-grow: 1;
-  overflow-y: auto;
-  padding: var(--adyen-sdk-spacer-070, 16px);
+.adyen-kyc-select-input--non-filterable {
+  all: unset;
 }
 
-.adyen-kyc-modal-footer {
-  align-items: center;
-  border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dadddf);
-  display: flex;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-  justify-content: flex-end;
-  padding: var(--adyen-sdk-spacer-070, 16px);
+.adyen-kyc-select-input--placeholder {
+  color: var(--adyen-sdk-color-label-secondary, #5c6874);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+}
+
+.adyen-kyc-ignore-pointer-events {
+  pointer-events: none;
+}
+
+.adyen-kyc-handle-pointer-events {
+  pointer-events: auto;
 }.adyen-kyc-spacer {
   flex: 1;
 }.adyen-kyc-progress-bar {
@@ -2472,7 +2472,69 @@
   display: flex;
   height: 100%;
 }
-.adyen-kyc-form-header {
+/* for container queries */
+.adyen-kyc-structured-list {
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}
+.adyen-kyc-structured-list-section-field {
+  display: flex;
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-structured-list-section-field {
+    flex-direction: column;
+  }
+}
+.adyen-kyc-structured-list-section-field:last-child {
+  margin-bottom: var(--adyen-sdk-spacer-000, 0px);
+}
+.adyen-kyc-structured-list-section-label, .adyen-kyc-structured-list-section-data {
+  display: flex;
+  flex: 1;
+}
+.adyen-kyc-structured-list-section-label {
+  color: var(--adyen-sdk-color-label-secondary, #5c6874);
+}
+.adyen-kyc-structured-list-section-data {
+  margin: var(--adyen-sdk-spacer-000, 0px);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-wrap: anywhere;
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-structured-list-section-data {
+    margin-top: var(--adyen-sdk-spacer-010, 2px);
+  }
+}
+.adyen-kyc-structured-list-section-detail {
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}/* for container queries */
+.adyen-kyc-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-100, 32px);
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+
+.adyen-kyc-confirm-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+}
+
+.adyen-kyc-confirm-actions {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+}
+@media (min-width: 480px) {
+  .adyen-kyc-confirm-actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}.adyen-kyc-form-header {
   margin-bottom: var(--adyen-sdk-spacer-120);
 }
 .adyen-kyc-heading {
@@ -2731,52 +2793,6 @@
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
   margin-right: var(--adyen-sdk-spacer-070, 16px);
   vertical-align: baseline;
-}.adyen-kyc-radio-group {
-  display: flex;
-  flex-direction: column;
-}
-.adyen-kyc-radio-group--horizontal {
-  flex-direction: row;
-}
-
-.adyen-kyc-radio-group + .adyen-kyc-input__inline-validation {
-  display: none;
-}
-
-.adyen-kyc-radio-group__label {
-  color: inherit;
-  display: block;
-  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);
-  overflow: visible;
-  padding-bottom: var(--adyen-sdk-spacer-000, 0px);
-  padding-left: var(--adyen-sdk-spacer-090, 24px);
-  position: relative;
-}/* for container queries */
-.adyen-kyc-confirm {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-100, 32px);
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-
-.adyen-kyc-confirm-message {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-
-.adyen-kyc-confirm-actions {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-@media (min-width: 480px) {
-  .adyen-kyc-confirm-actions {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
 }.adyen-kyc-progress-bar {
   --adyen-progress-bar-size: 4px;
   background-color: var(--adyen-sdk-color-background-secondary);
@@ -2847,6 +2863,28 @@
 .adyen-kyc-form-flow-action-group {
   display: flex;
   gap: var(--adyen-sdk-spacer-040, 8px);
+}.adyen-kyc-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+.adyen-kyc-radio-group--horizontal {
+  flex-direction: row;
+}
+
+.adyen-kyc-radio-group + .adyen-kyc-input__inline-validation {
+  display: none;
+}
+
+.adyen-kyc-radio-group__label {
+  color: inherit;
+  display: block;
+  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);
+  overflow: visible;
+  padding-bottom: var(--adyen-sdk-spacer-000, 0px);
+  padding-left: var(--adyen-sdk-spacer-090, 24px);
+  position: relative;
 }/* for container queries */
 .adyen-kyc-field-wrapper {
   display: flex;
@@ -3222,115 +3260,27 @@ input.adyen-kyc-radio-group-card__radio--floating {
   border-color: var(--adyen-sdk-color-outline-tertiary-hover, #6c7782);
 }
 .adyen-kyc-input-group--invalid {
-  padding-right: var(--adyen-sdk-spacer-120, 48px);
-  border-color: var(--adyen-sdk-color-outline-critical, #dc3801);
-}
-.adyen-kyc-input-group--focused {
-  border-color: var(--adyen-sdk-color-outline-tertiary-active, #001222);
-  outline: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary-active, #001222);
-}
-.adyen-kyc-input-group--focused:hover {
-  border-color: var(--adyen-sdk-color-outline-tertiary-active, #001222);
-}
-.adyen-kyc-input-group .adyen-kyc-input {
-  line-height: normal;
-  height: unset;
-  min-height: unset;
-  position: unset;
-  border: none;
-  border-radius: var(--adyen-sdk-border-radius-s, 4px);
-}
-.adyen-kyc-input-group .adyen-kyc-input:is(:active, :focus, :hover, :active:hover, :focus:hover, --focus) {
-  outline: none;
-  border: none;
-}.adyen-kyc-dropzone {
-  border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-secondary, #c8ccd0);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  display: flex;
-  flex-direction: column;
-  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
-  min-height: 70px;
-  transition: all 0.2s ease-out;
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-kyc-dropzone--dragged {
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary-active, #001222);
-  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
-}
-.adyen-kyc-dropzone--error {
-  border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-critical, #dc3801);
-}
-.adyen-kyc-dropzone__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--adyen-sdk-color-background-secondary, #f4f5f6);
-  border-radius: 50%;
-  height: 32px;
-  width: 32px;
-  margin: var(--adyen-sdk-spacer-000, 0px) auto var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-kyc-dropzone__labels h4 {
-  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
-}
-.adyen-kyc-dropzone__labels {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-  text-align: center;
-}
-.adyen-kyc-dropzone__input {
-  display: none;
-}
-.adyen-kyc-dropzone__button {
-  text-align: center;
-}
-.adyen-kyc-dropzone__extras {
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
-}.adyen-kyc-dropzone-file {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--adyen-sdk-color-background-secondary, #f4f5f6);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-070, 16px);
-  width: 100%;
-  margin-top: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-kyc-dropzone-file--error {
-  background-color: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
-}
-.adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
-  color: var(--adyen-sdk-color-background-critical-strong, #dc3801);
-}
-.adyen-kyc-dropzone-file__icon {
-  align-items: center;
-  display: flex;
-  margin-right: var(--adyen-sdk-spacer-040, 8px);
-  color: var(--adyen-sdk-color-background-success-strong, #008845);
-}
-.adyen-kyc-dropzone-file__labels {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
+  padding-right: var(--adyen-sdk-spacer-120, 48px);
+  border-color: var(--adyen-sdk-color-outline-critical, #dc3801);
 }
-.adyen-kyc-dropzone-file__name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 600px;
+.adyen-kyc-input-group--focused {
+  border-color: var(--adyen-sdk-color-outline-tertiary-active, #001222);
+  outline: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary-active, #001222);
 }
-.adyen-kyc-dropzone-file__size {
-  margin-left: var(--adyen-sdk-spacer-040, 8px);
+.adyen-kyc-input-group--focused:hover {
+  border-color: var(--adyen-sdk-color-outline-tertiary-active, #001222);
 }
-.adyen-kyc-dropzone-file__error {
-  color: var(--adyen-sdk-color-label-critical, #dc3801);
-  margin-top: var(--adyen-sdk-spacer-020, 4px);
+.adyen-kyc-input-group .adyen-kyc-input {
+  line-height: normal;
+  height: unset;
+  min-height: unset;
+  position: unset;
+  border: none;
+  border-radius: var(--adyen-sdk-border-radius-s, 4px);
 }
-.adyen-kyc-dropzone-file__button {
-  border: 0;
-  padding: var(--adyen-sdk-spacer-000, 0px);
+.adyen-kyc-input-group .adyen-kyc-input:is(:active, :focus, :hover, :active:hover, :focus:hover, --focus) {
+  outline: none;
+  border: none;
 }.adyen-kyc-multi-select-list {
   list-style: none;
   margin: var(--adyen-sdk-spacer-000, 0px);
@@ -3467,6 +3417,94 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-kyc-document-guidance__icon--invalid {
   background-color: var(--adyen-sdk-color-background-critical-strong, #dc3801);
+}.adyen-kyc-dropzone {
+  border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-secondary, #c8ccd0);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  display: flex;
+  flex-direction: column;
+  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
+  min-height: 70px;
+  transition: all 0.2s ease-out;
+  margin-top: var(--adyen-sdk-spacer-040, 8px);
+}
+.adyen-kyc-dropzone--dragged {
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary-active, #001222);
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 18, 34, 0.08), 0px 2px 4px rgba(0, 18, 34, 0.04));
+}
+.adyen-kyc-dropzone--error {
+  border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-critical, #dc3801);
+}
+.adyen-kyc-dropzone__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--adyen-sdk-color-background-secondary, #f4f5f6);
+  border-radius: 50%;
+  height: 32px;
+  width: 32px;
+  margin: var(--adyen-sdk-spacer-000, 0px) auto var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-dropzone__labels h4 {
+  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
+}
+.adyen-kyc-dropzone__labels {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+  text-align: center;
+}
+.adyen-kyc-dropzone__input {
+  display: none;
+}
+.adyen-kyc-dropzone__button {
+  text-align: center;
+}
+.adyen-kyc-dropzone__extras {
+  margin-top: var(--adyen-sdk-spacer-040, 8px);
+}.adyen-kyc-dropzone-file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--adyen-sdk-color-background-secondary, #f4f5f6);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
+  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-070, 16px);
+  width: 100%;
+  margin-top: var(--adyen-sdk-spacer-040, 8px);
+}
+.adyen-kyc-dropzone-file--error {
+  background-color: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
+}
+.adyen-kyc-dropzone-file--error .adyen-kyc-dropzone-file__icon {
+  color: var(--adyen-sdk-color-background-critical-strong, #dc3801);
+}
+.adyen-kyc-dropzone-file__icon {
+  align-items: center;
+  display: flex;
+  margin-right: var(--adyen-sdk-spacer-040, 8px);
+  color: var(--adyen-sdk-color-background-success-strong, #008845);
+}
+.adyen-kyc-dropzone-file__labels {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.adyen-kyc-dropzone-file__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 600px;
+}
+.adyen-kyc-dropzone-file__size {
+  margin-left: var(--adyen-sdk-spacer-040, 8px);
+}
+.adyen-kyc-dropzone-file__error {
+  color: var(--adyen-sdk-color-label-critical, #dc3801);
+  margin-top: var(--adyen-sdk-spacer-020, 4px);
+}
+.adyen-kyc-dropzone-file__button {
+  border: 0;
+  padding: var(--adyen-sdk-spacer-000, 0px);
 }.adyen-kyc-description-field {
   padding: var(--adyen-sdk-spacer-080, 20px) 0;
 }.adyen-kyc-tile-container {
@@ -3849,18 +3887,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
   border: 0 transparent;
   height: 100%;
   width: 100%;
-}
-.adyen-kyc-bank-verification-widget-container:empty {
-  animation-duration: 1ms;
-  animation-name: adyen-kyc-empty-bank-verification-widget-container;
-}
-@keyframes adyen-kyc-empty-bank-verification-widget-container {
-  from {
-    opacity: 0.9999999;
-  }
-  to {
-    opacity: 1;
-  }
 }.adyen-kyc-check-guidance {
   margin: var(--adyen-sdk-spacer-090) 0 var(--adyen-sdk-spacer-030);
   position: relative;
@@ -4475,7 +4501,158 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-kyc-card-group-spaced .adyen-kyc-card--fetching {
   min-height: 360px;
-}.adyen-kyc-business-lines {
+}/* for container queries */
+.adyen-kyc-industry-codes-content {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  gap: var(--adyen-sdk-spacer-010, 2px);
+}
+@container main (min-width: 680px) {
+  .adyen-kyc-industry-codes-content {
+    flex-direction: column;
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
+}
+
+.adyen-kyc-industry-codes-selection {
+  display: flex;
+  gap: var(--adyen-sdk-spacer-060, 12px);
+}.adyen-kyc-window {
+  display: flex;
+  overflow-x: auto;
+  width: 100%;
+  scroll-snap-type: x mandatory;
+  padding: 16px;
+}
+
+.adyen-kyc-item {
+  border: var(--adyen-sdk-border-default-s);
+  border-radius: var(--adyen-sdk-border-radius-l);
+  box-shadow: var(--adyen-sdk-shadow-medium);
+  max-width: 400px;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  display: flex;
+  justify-content: center;
+  appearance: none;
+  overflow: hidden;
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+.adyen-kyc-item:focus-visible {
+  outline: solid var(--adyen-sdk-color-outline-tertiary-active);
+  outline-width: var(--adyen-sdk-focus-ring-outline);
+  outline-offset: var(--adyen-sdk-focus-ring-outline);
+  scroll-margin-left: 10px;
+}
+
+.adyen-kyc-selectedItem {
+  border: var(--adyen-sdk-border-width-s) solid var(--adyen-sdk-color-outline-secondary-active);
+  outline: var(--adyen-sdk-border-width-s) solid var(--adyen-sdk-color-outline-secondary-active);
+  background: var(--adyen-sdk-color-background-secondary);
+}
+
+.adyen-kyc-gapXSmall {
+  gap: var(--adyen-sdk-spacer-020);
+}
+
+.adyen-kyc-gapSmall {
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-gapMedium {
+  gap: var(--adyen-sdk-spacer-070);
+}
+
+.adyen-kyc-gapLarge {
+  gap: var(--adyen-sdk-spacer-100);
+}
+
+.adyen-kyc-gapXLarge {
+  gap: var(--adyen-sdk-spacer-140);
+}
+
+.adyen-kyc-widthXSmall {
+  width: 198px;
+}
+
+.adyen-kyc-widthSmall {
+  width: 231px;
+}
+
+.adyen-kyc-widthMedium {
+  width: 264px;
+}
+
+.adyen-kyc-widthLarge {
+  width: 297px;
+}
+
+.adyen-kyc-widthXLarge {
+  width: 330px;
+}
+.adyen-kyc-carouselContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-sales-card {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.adyen-kyc-sales-card:hover .adyen-kyc-image-container img {
+  transform: scale(1.1);
+}
+
+.adyen-kyc-image-container {
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    transition: transform 0.2s ease-in-out;
+  }
+}
+
+.adyen-kyc-info {
+  display: flex;
+  flex-direction: column;
+  padding: var(--adyen-sdk-spacer-070);
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-card-title {
+  font-weight: var(--adyen-sdk-text-body-stronger-font-weight);
+  font-size: 16px;
+}
+
+.adyen-kyc-card-description {
+  overflow: hidden;
+  min-height: 40px;
+  max-height: 40px;
+  transition: max-height 0.4s ease;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.adyen-kyc-card-description.adyen-kyc-is-expanded {
+  max-height: 600px;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+}
+.adyen-kyc-business-lines {
   flex-direction: column;
   width: 100%;
   max-width: 520px;
@@ -4700,44 +4877,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-kyc-entity-association .adyen-kyc-alert .adyen-kyc-alert-header {
   align-items: center;
-}/* for container queries */
-.adyen-kyc-structured-list {
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-structured-list-section-field {
-  display: flex;
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-structured-list-section-field {
-    flex-direction: column;
-  }
-}
-.adyen-kyc-structured-list-section-field:last-child {
-  margin-bottom: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-structured-list-section-label, .adyen-kyc-structured-list-section-data {
-  display: flex;
-  flex: 1;
-}
-.adyen-kyc-structured-list-section-label {
-  color: var(--adyen-sdk-color-label-secondary, #5c6874);
-}
-.adyen-kyc-structured-list-section-data {
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow-wrap: anywhere;
-}
-@container main (max-width: 680px) {
-  .adyen-kyc-structured-list-section-data {
-    margin-top: var(--adyen-sdk-spacer-010, 2px);
-  }
-}
-.adyen-kyc-structured-list-section-detail {
-  margin: var(--adyen-sdk-spacer-000, 0px);
 }.adyen-kyc-detail-view-layout {
   display: flex;
   flex-direction: column;
@@ -4903,6 +5042,10 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-kyc-table tbody tr:nth-child(even) {
   background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+}.adyen-kyc-side-by-side {
+  display: flex;
+  flex-direction: row;
+  gap: var(--adyen-sdk-spacer-080);
 }.adyen-kyc-introduction {
   color: var(--adyen-sdk-color-label-primary, #001222);
   display: flex;