@adyen/kyc-components 3.71.2 → 3.72.0

package/dist/style.css

@@ -77,6 +77,8 @@
   color: inherit;
   display: inline-flex;
   vertical-align: baseline;
+  min-height: 16px;
+  min-width: 16px;
 }
 .adyen-kyc-icon svg {
   height: 100%;
@@ -441,9 +443,6 @@
 .adyen-kyc-upload-field__subtitle {
   margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-kyc-upload-field__requirements {
-  padding-left: var(--adyen-sdk-spacer-070, 16px);
-}
 
 .adyen-kyc-input-wrapper {
   display: block;
@@ -857,8 +856,8 @@
 }
 .adyen-kyc-dropdown-list__transformer {
   position: relative;
-  padding: 0;
-  margin: 0;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 .adyen-kyc-dropdown-list:focus {
   outline: none;
@@ -1512,43 +1511,6 @@
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
 }.adyen-kyc-error-panel {
   margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-}/* #region Borders */
-/* #endregion */
-/* for container queries */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-list {
-  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-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  display: block;
-  list-style-position: outside;
-  list-style-type: disc;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  padding-left: var(--adyen-sdk-spacer-070, 16px);
-}
-
-.adyen-kyc-list-no-markers {
-  list-style: none;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-list-no-markers .adyen-kyc-list-item {
-  list-style: none;
-  padding-left: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-list-item {
-  padding-left: var(--adyen-sdk-spacer-020, 4px);
-}
-
-.adyen-kyc-list-ordered {
-  list-style-type: decimal;
 }.adyen-kyc-bank-document {
   min-height: 240px;
 }
@@ -1575,7 +1537,7 @@
 
 @container main (min-width: 680px) {
   .adyen-kyc-document-guidance__container {
-    grid-template-columns: repeat(auto-fill, 25%);
+    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
   }
 }
 .adyen-kyc-document-guidance__item {
@@ -2318,170 +2280,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
   margin-right: var(--adyen-sdk-spacer-070, 16px);
   vertical-align: baseline;
-}.adyen-kyc-provider-button {
-  align-items: center;
-  display: flex;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-  justify-content: center;
-  max-height: var(--adyen-sdk-text-body-line-height, 20px);
-  overflow: visible;
-}
-
-.adyen-kyc-provider-button-display-name {
-  display: none;
-}
-
-.adyen-kyc-provider-button svg {
-  display: block;
-  height: 28px;
-  width: auto;
-}/* #region Borders */
-/* #endregion */
-/* for container queries */
-/* #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, '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-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  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--secondary {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-}
-
-.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;
-}
-.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--stateful:focus-visible {
-  box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
-  transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
-  transition-property: box-shadow;
-}
-
-.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: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));
-}
-
-.adyen-kyc-card.adyen-kyc-card--disabled {
-  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
-  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
-  cursor: not-allowed;
-}
-
-.adyen-kyc-card__header {
-  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-card__header--button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.adyen-kyc-card__header .adyen-kyc-card-title {
-  display: flex;
-  flex-direction: column;
-}
-
-.adyen-kyc-card__body {
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-card__header + .adyen-kyc-card__body {
-  padding-top: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-card__footer {
-  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-card__body + .adyen-kyc-card__footer {
-  margin-top: calc(var(--adyen-sdk-spacer-070, 16px) * -1);
-}
-
-.adyen-kyc-card__warning {
-  border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
-}/* #region Borders */
-/* #endregion */
-/* for container queries */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.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-prefer-instant-verification-method {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-.adyen-kyc-prefer-instant-verification-method-card {
-  text-align: center;
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
-  border: none;
-}
-.adyen-kyc-prefer-instant-verification-method-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-kyc-prefer-instant-verification-method-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--adyen-sdk-spacer-040, 8px);
 }.adyen-kyc-radio-group {
   display: flex;
   flex-direction: column;
@@ -2776,6 +2574,102 @@ fieldset {
   min-height: 228px;
   justify-content: center;
   align-items: center;
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
+/* #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, '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-font-weight, 400);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  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--secondary {
+  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+}
+
+.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;
+}
+.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--stateful:focus-visible {
+  box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer, 1px) var(--adyen-sdk-color-background-primary, #ffffff), 0 0 0 var(--adyen-sdk-focus-ring-outline, 3px) var(--adyen-sdk-focus-ring-color, rgba(0, 112, 245, 0.8));
+  transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
+  transition-property: box-shadow;
+}
+
+.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: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));
+}
+
+.adyen-kyc-card.adyen-kyc-card--disabled {
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
+  cursor: not-allowed;
+}
+
+.adyen-kyc-card__header {
+  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-card__header--button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.adyen-kyc-card__header .adyen-kyc-card-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.adyen-kyc-card__body {
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-card__header + .adyen-kyc-card__body {
+  padding-top: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-card__footer {
+  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-card__body + .adyen-kyc-card__footer {
+  margin-top: calc(var(--adyen-sdk-spacer-070, 16px) * -1);
+}
+
+.adyen-kyc-card__warning {
+  border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
 }.adyen-kyc-field--entityType {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
@@ -2822,10 +2716,6 @@ fieldset {
 }.adyen-kyc-document-upload__subtitle {
   margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-kyc-document-upload__requirements {
-  margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
-  padding-left: var(--adyen-sdk-spacer-070, 16px);
-}
 .adyen-kyc-document-upload__manual-upload {
   margin: var(--adyen-sdk-spacer-070, 16px) auto var(--adyen-sdk-spacer-000, 0px);
   max-width: 430px;
@@ -2887,11 +2777,7 @@ fieldset {
   height: auto !important;
 }
 
-/* stylelint-enable selector-class-pattern */.adyen-kyc-id-verification-method__guidance {
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
-}/* #region Borders */
+/* stylelint-enable selector-class-pattern *//* #region Borders */
 /* #endregion */
 /* for container queries */
 /* #region Z-index */
@@ -3224,6 +3110,38 @@ fieldset {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
+.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;
+  }
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
 .adyen-kyc-form-flow {
   min-height: 100%;
   overflow: auto;
@@ -3275,6 +3193,23 @@ fieldset {
 .adyen-kyc-form-flow-action-group {
   display: flex;
   gap: var(--adyen-sdk-spacer-040, 8px);
+}.adyen-kyc-provider-button {
+  align-items: center;
+  display: flex;
+  gap: var(--adyen-sdk-spacer-060, 12px);
+  justify-content: center;
+  max-height: var(--adyen-sdk-text-body-line-height, 20px);
+  overflow: visible;
+}
+
+.adyen-kyc-provider-button-display-name {
+  display: none;
+}
+
+.adyen-kyc-provider-button svg {
+  display: block;
+  height: 28px;
+  width: auto;
 }.adyen-kyc-conflict-row-table td {
   padding: var(--adyen-sdk-spacer-060, 12px);
   height: var(--adyen-sdk-spacer-050, 10px);
@@ -4145,7 +4080,6 @@ fieldset {
   align-items: center;
   position: relative;
   height: 32px;
-  width: 64px;
   padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
 }
 
@@ -4233,6 +4167,7 @@ fieldset {
   flex: 1;
   padding: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
+  box-sizing: border-box;
 }
 @container main (min-width: 680px) and (max-width: 1024px) {
   .adyen-kyc-dropin__content-main {
@@ -4457,12 +4392,6 @@ fieldset {
   justify-content: flex-end;
   padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
   width: 100%;
-}.adyen-kyc-entity-association .adyen-kyc-alert {
-  padding: 0 var(--adyen-sdk-spacer-070, 16px);
-  margin-top: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-entity-association .adyen-kyc-alert .adyen-kyc-alert-header {
-  align-items: center;
 }.adyen-kyc-adyen-kyc-role-and-type-container {
   display: flex;
 }
@@ -4492,6 +4421,12 @@ fieldset {
 }
 .adyen-kyc-inline-radio-group .adyen-kyc-error-text {
   width: 100%;
+}.adyen-kyc-entity-association .adyen-kyc-alert {
+  padding: 0 var(--adyen-sdk-spacer-070, 16px);
+  margin-top: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-entity-association .adyen-kyc-alert .adyen-kyc-alert-header {
+  align-items: center;
 }/* #region Borders */
 /* #endregion */
 /* for container queries */
@@ -5094,6 +5029,20 @@ fieldset {
   position: relative;
   padding: var(--adyen-sdk-spacer-100, 32px);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  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-font-weight, 400);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+}
+.adyen-kyc-ui-element-container p,
+.adyen-kyc-ui-element-container ol,
+.adyen-kyc-ui-element-container ul {
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+.adyen-kyc-ui-element-container ul,
+.adyen-kyc-ui-element-container ol {
+  padding-left: 1.5em;
 }
 @container main (max-width: 680px) {
   .adyen-kyc-ui-element-container {
@@ -5866,6 +5815,9 @@ fieldset {
 .adyen-kyc-business-type-selection__confirm button {
   flex-grow: 1;
 }
+.adyen-kyc-business-type-selection .adyen-kyc-helper-text {
+  max-width: 560px;
+}
 
 .adyen-kyc-trustee-type-radio-group-card {
   display: flex;