@adyen/kyc-components 4.17.1 → 4.18.0-beta.1

package/dist/style.css

@@ -2748,6 +2748,128 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
 .adyen-kyc-input-wrapper--block {
   display: block;
 }
+.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;
+}
 .adyen-kyc-checkbox__input,
 .adyen-kyc-checkbox__label,
 .adyen-kyc-checkbox__helper-text {
@@ -3160,148 +3282,6 @@ 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;
-}
-.adyen-kyc-address__condensed-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-kyc-address__condensed-fields {
-    flex-direction: row;
-    gap: var(--adyen-internal-spacer-080);
-  }
-
-  .adyen-kyc-address__condensed-fields > *:first-child {
-    flex: 0 0 50%;
-  }
-
-  .adyen-kyc-address__condensed-fields > *:not(:first-child) {
-    flex: 1;
-  }
-}
 ._list_s1vme_1 {
   display: flex;
   flex-direction: column;
@@ -3619,6 +3599,26 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
      including here for height consistency when no action is provided */
   min-height: var(--adyen-internal-tap-target);
 }
+.adyen-kyc-address__condensed-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-address__condensed-fields {
+    flex-direction: row;
+    gap: var(--adyen-internal-spacer-080);
+  }
+
+  .adyen-kyc-address__condensed-fields > *:first-child {
+    flex: 0 0 50%;
+  }
+
+  .adyen-kyc-address__condensed-fields > *:not(:first-child) {
+    flex: 1;
+  }
+}
 ._link_1bgxd_1 {
   align-items: center;
   border-radius: var(--adyen-internal-border-radius-s);
@@ -6548,128 +6548,31 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
 ._status-text_5vw9z_46 {
   margin-top: var(--adyen-internal-spacer-020);
 }
-.adyen-kyc-form-navigation {
-  width: 100%;
-}
-
-@container main (max-width: 680px) {
-  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
-    display: none;
-  }
-
-  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
-    font-size: 0;
-  }
-
-  .adyen-kyc-form-navigation
-    .adyen-kyc-form-navigation__home-button-item
-    .adyen-kyc-form-navigation__home-button {
-    font-size: var(--adyen-internal-text-title-font-size);
-    font-family: var(--adyen-internal-text-title-font-family);
-    font-weight: var(--adyen-internal-text-title-font-weight);
-    line-height: var(--adyen-internal-text-title-line-height);
-    padding-left: var(--adyen-internal-spacer-000);
-  }
-
-  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
-    display: none;
-  }
-}
-
-@container main (min-width: 680px) and (max-width: 1024px) {
-  .adyen-kyc-form-navigation {
-    padding-right: var(--adyen-internal-spacer-100);
-  }
-
-  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
-    display: none;
-  }
-}
-
-.adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
-  margin: var(--adyen-internal-spacer-040) 0 0 0;
-  padding: var(--adyen-internal-spacer-000);
-}
-
-.adyen-kyc-form-navigation__home-button-item {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  list-style-type: none;
-  margin-bottom: var(--adyen-internal-spacer-070);
-}
-.adyen-kyc-form-navigation__item {
-  align-items: center;
-  border-left: var(--adyen-internal-border-default-m);
-  color: var(--adyen-internal-color-label-primary);
-  cursor: default;
-  display: flex;
-  padding: var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-000)
-    var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-040);
-}
-
-.adyen-kyc-form-navigation__item button {
-  display: flex;
-  background: none;
-  border: none;
-  font-size: var(--adyen-internal-text-body-font-size);
-  line-height: var(--adyen-internal-text-body-line-height);
-  padding: var(--adyen-internal-spacer-000);
-  color: inherit;
-  text-align: left;
-}
-
-.adyen-kyc-form-navigation__item--active {
-  border-left: var(--adyen-internal-border-width-m) solid
-    var(--adyen-internal-color-outline-highlight);
-  color: var(--adyen-internal-color-label-highlight);
-}
-
-.adyen-kyc-form-navigation__item--isnav button {
-  cursor: pointer;
-}
-
-.adyen-kyc-form-navigation__item-icon {
-  display: flex;
-  margin-left: var(--adyen-internal-spacer-040);
-}
-
-.adyen-kyc-form-navigation__item-icon--success {
-  color: var(--adyen-internal-color-label-success);
-}
-
-.adyen-kyc-form-navigation__item-icon--error {
-  color: var(--adyen-internal-color-label-critical);
-}
-._adyen-kyc-role-and-type-container_lce9i_1 {
-  display: flex;
-}
-
-._adyen-kyc-role-and-type-action-bar_lce9i_5 {
+._adyen-kyc-role-and-type-action-bar_1ox98_1 {
   float: right;
 }
 
-._inline-radio-group_lce9i_9 {
+._inline-radio-group_1ox98_5 {
   margin-top: 2rem;
 }
-._inline-radio-group_lce9i_9 fieldset {
+._inline-radio-group_1ox98_5 fieldset {
   display: inline-flex;
   width: 100%;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-._inline-radio-group_lce9i_9 span {
+._inline-radio-group_1ox98_5 span {
   max-width: 70%;
   padding-right: 1rem;
   font-weight: normal;
 }
 
-._inline-radio-group_lce9i_9 ._input-radio__content_lce9i_25 {
+._inline-radio-group_1ox98_5 ._input-radio__content_1ox98_21 {
   text-align: center;
 }
 
-._inline-radio-group_lce9i_9 ._error-text_lce9i_29 {
+._inline-radio-group_1ox98_5 ._error-text_1ox98_25 {
   width: 100%;
 }
 ._entity-association_2yrok_1 ._alert_2yrok_1 {