@adyen/kyc-components 4.19.3 → 4.20.0-beta.1

package/dist/style.css

@@ -3206,6 +3206,128 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
 ._handle-pointer-events_hsi38_159 {
   pointer-events: auto;
 }
+.adyen-kyc-field-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: var(--adyen-internal-spacer-080);
+}
+
+.adyen-kyc-input {
+  height: 40px;
+  line-height: 38px;
+  min-height: 38px;
+  background: var(--adyen-internal-color-background-primary);
+  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-tertiary);
+  border-radius: var(--adyen-internal-border-radius-m);
+  caret-color: var(--adyen-internal-color-label-highlight);
+  color: var(--adyen-internal-color-label-primary);
+  display: block;
+  font-family: inherit;
+  font-size: var(--adyen-internal-text-body-font-size);
+  outline: none;
+  padding: var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-060);
+  position: relative;
+  transition:
+    border 0.2s ease-out,
+    box-shadow 0.2s ease-out;
+  width: 100%;
+}
+
+.adyen-kyc-input::placeholder {
+  color: var(--adyen-internal-color-label-secondary);
+  font-weight: var(--adyen-internal-text-body-font-weight);
+}
+
+.adyen-kyc-input:hover {
+  border-color: var(--adyen-internal-color-outline-tertiary-hover);
+}
+
+.adyen-kyc-input:required {
+  box-shadow: none;
+}
+
+.adyen-kyc-input[readonly],
+.adyen-kyc-input[readonly]:hover,
+.adyen-kyc-input--disabled {
+  background-color: var(--adyen-internal-color-background-disabled);
+  color: var(--adyen-internal-color-label-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-disabled);
+}
+
+.adyen-kyc-input--disabled:hover {
+  border-color: var(--adyen-internal-color-outline-disabled);
+}
+
+.adyen-kyc-input--error,
+.adyen-kyc-input--invalid,
+.adyen-kyc-input--error:hover,
+.adyen-kyc-input--invalid:hover {
+  border-color: var(--adyen-internal-color-outline-critical);
+  color: var(--adyen-internal-color-label-critical);
+}
+
+.adyen-kyc-input:active,
+.adyen-kyc-input:focus,
+.adyen-kyc-input--focus,
+.adyen-kyc-input:active:hover,
+.adyen-kyc-input:focus:hover,
+.adyen-kyc-input--focus:hover {
+  border-color: var(--adyen-internal-color-outline-tertiary-active);
+  outline: var(--adyen-internal-border-width-s) solid
+    var(--adyen-internal-color-outline-tertiary-active);
+}
+
+.adyen-kyc-input--number {
+  appearance: none;
+  margin: 0;
+}
+
+.adyen-kyc-input--number::-webkit-outer-spin-button,
+.adyen-kyc-input--number::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.adyen-kyc-input--date {
+  padding-right: var(--adyen-internal-spacer-100);
+  line-height: var(--adyen-internal-text-body-line-height);
+}
+
+.adyen-kyc-input--textarea {
+  height: 60px;
+  line-height: var(--adyen-internal-text-body-line-height);
+}
+
+.adyen-kyc-input__inline-validation {
+  height: 16px;
+  position: absolute;
+  right: 14px;
+  transform: translateY(-50%);
+  width: 16px;
+  top: var(--adyen-internal-spacer-080);
+}
+
+.adyen-kyc-input__inline-validation--invalid {
+  color: var(--adyen-internal-color-label-critical);
+}
+
+.adyen-kyc-input__inline-validation--invalid-bottom {
+  top: var(--adyen-internal-spacer-040);
+}
+
+.adyen-kyc-input__counter {
+  color: var(--adyen-internal-color-label-secondary);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  font-family: var(--adyen-internal-text-caption-font-family);
+  font-weight: var(--adyen-internal-text-caption-font-weight);
+  line-height: var(--adyen-internal-text-caption-line-height);
+  margin: var(--adyen-internal-spacer-020) var(--adyen-internal-spacer-000);
+  display: block;
+  text-align: left;
+}
 ._list_s1vme_1 {
   display: flex;
   flex-direction: column;
@@ -3497,128 +3619,6 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   gap: var(--adyen-internal-spacer-040);
   margin-left: auto;
 }
-.adyen-kyc-field-wrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-  gap: var(--adyen-internal-spacer-080);
-}
-
-.adyen-kyc-input {
-  height: 40px;
-  line-height: 38px;
-  min-height: 38px;
-  background: var(--adyen-internal-color-background-primary);
-  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-tertiary);
-  border-radius: var(--adyen-internal-border-radius-m);
-  caret-color: var(--adyen-internal-color-label-highlight);
-  color: var(--adyen-internal-color-label-primary);
-  display: block;
-  font-family: inherit;
-  font-size: var(--adyen-internal-text-body-font-size);
-  outline: none;
-  padding: var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-060);
-  position: relative;
-  transition:
-    border 0.2s ease-out,
-    box-shadow 0.2s ease-out;
-  width: 100%;
-}
-
-.adyen-kyc-input::placeholder {
-  color: var(--adyen-internal-color-label-secondary);
-  font-weight: var(--adyen-internal-text-body-font-weight);
-}
-
-.adyen-kyc-input:hover {
-  border-color: var(--adyen-internal-color-outline-tertiary-hover);
-}
-
-.adyen-kyc-input:required {
-  box-shadow: none;
-}
-
-.adyen-kyc-input[readonly],
-.adyen-kyc-input[readonly]:hover,
-.adyen-kyc-input--disabled {
-  background-color: var(--adyen-internal-color-background-disabled);
-  color: var(--adyen-internal-color-label-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-disabled);
-}
-
-.adyen-kyc-input--disabled:hover {
-  border-color: var(--adyen-internal-color-outline-disabled);
-}
-
-.adyen-kyc-input--error,
-.adyen-kyc-input--invalid,
-.adyen-kyc-input--error:hover,
-.adyen-kyc-input--invalid:hover {
-  border-color: var(--adyen-internal-color-outline-critical);
-  color: var(--adyen-internal-color-label-critical);
-}
-
-.adyen-kyc-input:active,
-.adyen-kyc-input:focus,
-.adyen-kyc-input--focus,
-.adyen-kyc-input:active:hover,
-.adyen-kyc-input:focus:hover,
-.adyen-kyc-input--focus:hover {
-  border-color: var(--adyen-internal-color-outline-tertiary-active);
-  outline: var(--adyen-internal-border-width-s) solid
-    var(--adyen-internal-color-outline-tertiary-active);
-}
-
-.adyen-kyc-input--number {
-  appearance: none;
-  margin: 0;
-}
-
-.adyen-kyc-input--number::-webkit-outer-spin-button,
-.adyen-kyc-input--number::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-.adyen-kyc-input--date {
-  padding-right: var(--adyen-internal-spacer-100);
-  line-height: var(--adyen-internal-text-body-line-height);
-}
-
-.adyen-kyc-input--textarea {
-  height: 60px;
-  line-height: var(--adyen-internal-text-body-line-height);
-}
-
-.adyen-kyc-input__inline-validation {
-  height: 16px;
-  position: absolute;
-  right: 14px;
-  transform: translateY(-50%);
-  width: 16px;
-  top: var(--adyen-internal-spacer-080);
-}
-
-.adyen-kyc-input__inline-validation--invalid {
-  color: var(--adyen-internal-color-label-critical);
-}
-
-.adyen-kyc-input__inline-validation--invalid-bottom {
-  top: var(--adyen-internal-spacer-040);
-}
-
-.adyen-kyc-input__counter {
-  color: var(--adyen-internal-color-label-secondary);
-  font-size: var(--adyen-internal-text-caption-font-size);
-  font-family: var(--adyen-internal-text-caption-font-family);
-  font-weight: var(--adyen-internal-text-caption-font-weight);
-  line-height: var(--adyen-internal-text-caption-line-height);
-  margin: var(--adyen-internal-spacer-020) var(--adyen-internal-spacer-000);
-  display: block;
-  text-align: left;
-}
 ._summary-header_jps0f_1 {
   display: flex;
   justify-content: space-between;
@@ -4092,11 +4092,11 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   margin-top: var(--adyen-internal-spacer-040);
   text-align: left;
 }
-._tile-container_1t0ne_1 {
+._tile-container_685mc_1 {
   width: 100%;
 }
 
-._tile_1t0ne_1 {
+._tile_685mc_1 {
   border: var(--adyen-internal-border-default-s);
   display: flex;
   border-radius: var(--adyen-internal-border-radius-l);
@@ -4109,7 +4109,7 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   height: 100%;
 }
 
-._tile-icon_1t0ne_18 {
+._tile-icon_685mc_18 {
   background: var(--adyen-internal-color-background-tertiary);
   width: var(--adyen-internal-spacer-110);
   height: var(--adyen-internal-spacer-110);
@@ -4120,27 +4120,27 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   margin-bottom: var(--adyen-internal-spacer-050);
 }
 
-._tile_1t0ne_1 svg {
+._tile_685mc_1 svg {
   color: var(--adyen-internal-color-label-primary);
   max-width: var(--adyen-internal-spacer-070);
   max-height: var(--adyen-internal-spacer-070);
 }
 
-._tile-title_1t0ne_35 {
-  color: var(--adyen-internal-color-link-primary);
+._tile-title_685mc_35 {
+  color: var(--adyen-internal-color-label-primary);
   margin-bottom: var(--adyen-internal-spacer-020);
 }
 
-._tile_1t0ne_1:hover {
+._tile_685mc_1:hover {
   border-color: var(--adyen-internal-color-outline-primary-active);
 }
 
-._tile_1t0ne_1:hover ._tile-icon_1t0ne_18 {
+._tile_685mc_1:hover ._tile-icon_685mc_18 {
   background: var(--adyen-internal-color-background-tertiary-hover);
 }
 
 /* visually hidden */
-._tile-checkbox_1t0ne_49 {
+._tile-checkbox_685mc_49 {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -4152,25 +4152,25 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   white-space: nowrap;
 }
 
-._tile-checkbox_1t0ne_49:disabled ~ ._tile_1t0ne_1 {
+._tile-checkbox_685mc_49:disabled ~ ._tile_685mc_1 {
   cursor: not-allowed;
   opacity: 0.3;
 }
 
-._tile-checkbox_1t0ne_49:checked ~ ._tile_1t0ne_1 {
+._tile-checkbox_685mc_49:checked ~ ._tile_685mc_1 {
   box-shadow: 0 0 0 1px var(--adyen-internal-color-outline-primary-active) inset;
   border-color: var(--adyen-internal-color-outline-primary-active);
 }
 
-._tile-checkbox_1t0ne_49:checked ~ ._tile_1t0ne_1 ._tile-icon_1t0ne_18 {
+._tile-checkbox_685mc_49:checked ~ ._tile_685mc_1 ._tile-icon_685mc_18 {
   background: var(--adyen-internal-color-label-primary);
 }
 
-._tile-checkbox_1t0ne_49:checked ~ ._tile_1t0ne_1 svg {
+._tile-checkbox_685mc_49:checked ~ ._tile_685mc_1 svg {
   color: var(--adyen-internal-color-background-secondary);
 }
 
-._tile-checkbox_1t0ne_49:focus-visible ~ ._tile_1t0ne_1 {
+._tile-checkbox_685mc_49:focus-visible ~ ._tile_685mc_1 {
   box-shadow:
     0 0 0 var(--adyen-internal-focus-ring-spacer) var(--adyen-internal-color-background-primary),
     0 0 0 var(--adyen-internal-focus-ring-outline) var(--adyen-internal-focus-ring-color);
@@ -4180,18 +4180,18 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   border-radius: var(--adyen-internal-border-radius-l);
 }
 
-._tile-container-horizontal_1t0ne_89 ._tile_1t0ne_1 {
+._tile-container-horizontal_685mc_89 ._tile_685mc_1 {
   flex-direction: row;
   text-align: left;
   align-items: center;
 }
 
-._tile-container-horizontal_1t0ne_89 ._tile-icon_1t0ne_18 {
+._tile-container-horizontal_685mc_89 ._tile-icon_685mc_18 {
   margin: 0;
   flex-shrink: 0;
 }
 
-._tile-container-horizontal_1t0ne_89 ._tile-icon_1t0ne_18 + ._tile-label_1t0ne_100 {
+._tile-container-horizontal_685mc_89 ._tile-icon_685mc_18 + ._tile-label_685mc_100 {
   margin-left: var(--adyen-internal-spacer-070);
 }
 ._tile-group_6rtof_1 {
@@ -5053,6 +5053,9 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   /* This was needed to align the text with the chevron icon (which are 2 separate elements now) */
   padding-top: 1px;
 }
+._entity-setup-option_1ykiv_1 {
+  margin-bottom: var(--adyen-internal-spacer-060);
+}
 .adyen-task-list__container {
   margin-left: auto;
   margin-right: auto;
@@ -6159,6 +6162,12 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   display: flex;
   gap: var(--adyen-internal-spacer-060);
 }
+._section-heading_nb4mz_1 {
+  margin: 0 0 var(--adyen-internal-spacer-090);
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-050);
+}
 ._basic-information_1rbd4_1 fieldset {
   border: none;
   padding: 0 0 var(--adyen-internal-spacer-080);
@@ -6610,4 +6619,9 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
 ._entity-association_2yrok_1 ._alert_2yrok_1 ._alert-header_2yrok_5 {
   align-items: center;
 }
+._additional-details-content_nh4dq_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-120);
+}
 /*$vite$:1*/