@adyen/kyc-components 3.93.0 → 3.94.0-beta.0

package/dist/style.css

@@ -192,23 +192,27 @@
     transform: rotate(360deg);
   }
 }
-.adyen-kyc-icon {
+.adyen-kyc-svg-icon {
   color: inherit;
   display: inline-flex;
   vertical-align: baseline;
   min-height: 16px;
   min-width: 16px;
 }
-.adyen-kyc-icon svg {
+
+.adyen-kyc-svg-icon svg {
+  /* for safari */
   height: 100%;
 }
-.adyen-kyc-icon svg path {
+
+.adyen-kyc-svg-icon svg path {
   fill: currentColor;
 }
 
-.adyen-kyc-image {
+.adyen-kyc-svg-image {
   display: inline-block;
-}.adyen-kyc-button {
+}
+.adyen-kyc-button {
   border: 1px solid transparent;
   box-sizing: border-box;
   cursor: pointer;
@@ -2673,21 +2677,22 @@ fieldset {
 .adyen-kyc-list {
   display: flex;
   flex-direction: column;
-  gap: var(--adyen-internal-spacer-040, 8px);
+  gap: var(--adyen-internal-spacer-040);
   width: 100%;
 }
 
 .adyen-kyc-list-header {
-  color: var(--adyen-internal-color-label-secondary, #5c6874);
-  font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
-  line-height: var(--adyen-internal-text-body-line-height, 20px);
+  color: var(--adyen-internal-color-label-secondary);
+  font-size: var(--adyen-internal-text-body-stronger-font-size);
+  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
+  line-height: var(--adyen-internal-text-body-line-height);
 }
 
 .adyen-kyc-list-footer {
-  color: var(--adyen-internal-color-label-tertiary, #8c959d);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
-  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
+  color: var(--adyen-internal-color-label-tertiary);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  font-weight: var(--adyen-internal-text-caption-font-weight);
+  line-height: var(--adyen-internal-text-caption-line-height);
 }
 
 .adyen-kyc-list-items {
@@ -2700,37 +2705,38 @@ fieldset {
 }
 
 .adyen-kyc-list-items-grouped-primary {
-  background-color: var(--adyen-internal-color-background-primary, #ffffff);
-  border: 1px solid var(--adyen-internal-color-outline-primary, #dadddf);
-  border-radius: var(--adyen-internal-border-radius-l, 12px);
+  background-color: var(--adyen-internal-color-background-primary);
+  border: 1px solid var(--adyen-internal-color-outline-primary);
+  border-radius: var(--adyen-internal-border-radius-l);
 }
 
 .adyen-kyc-list-items-grouped-secondary {
-  background-color: var(--adyen-internal-color-background-secondary, #f4f5f6);
-  border-radius: var(--adyen-internal-border-radius-l, 12px);
+  background-color: var(--adyen-internal-color-background-secondary);
+  border-radius: var(--adyen-internal-border-radius-l);
 }
 
 .adyen-kyc-list-items-padding-none {
-  padding: var(--adyen-internal-spacer-000, 0px) !important;
+  padding: var(--adyen-internal-spacer-000) !important;
 }
 
 .adyen-kyc-list-items-padding-small {
-  padding: var(--adyen-internal-spacer-040, 8px) !important;
+  padding: var(--adyen-internal-spacer-040) !important;
 }
 
 .adyen-kyc-list-items-padding-medium {
-  padding: var(--adyen-internal-spacer-070, 16px) !important;
+  padding: var(--adyen-internal-spacer-070) !important;
 }
 
 .adyen-kyc-list-items-padding-large {
-  padding: var(--adyen-internal-spacer-090, 24px) !important;
+  padding: var(--adyen-internal-spacer-090) !important;
 }
 
 .adyen-kyc-list-item-row-separator:not(:last-child) {
-  border-bottom: 1px solid var(--adyen-internal-color-outline-primary, #dadddf);
-  margin-bottom: var(--adyen-internal-spacer-040, 8px);
-  padding-bottom: var(--adyen-internal-spacer-040, 8px);
-}/* for container queries */
+  border-bottom: 1px solid var(--adyen-internal-color-outline-primary);
+  margin-bottom: var(--adyen-internal-spacer-040);
+  padding-bottom: var(--adyen-internal-spacer-040);
+}
+/* for container queries */
 .adyen-kyc-structured-list {
   margin: var(--adyen-internal-spacer-000, 0px);
 }
@@ -2769,8 +2775,9 @@ fieldset {
 .adyen-kyc-structured-list-section-detail {
   margin: var(--adyen-internal-spacer-000, 0px);
 }.adyen-kyc-error-panel {
-  margin-bottom: var(--adyen-internal-spacer-080, 20px);
-}/* for container queries */
+  margin-bottom: var(--adyen-internal-spacer-080);
+}
+/* for container queries */
 .adyen-kyc-summary {
   display: flex;
   flex-direction: column;
@@ -2888,7 +2895,6 @@ fieldset {
   container-type: inline-size;
   width: 100%;
   min-height: 100%;
-  overflow: auto;
 }
 
 .adyen-kyc-form-flow-content {
@@ -3089,7 +3095,7 @@ fieldset {
   width: 65%;
   align-items: center;
 }
-.adyen-kyc-search-address--below-location .adyen-kyc-icon {
+.adyen-kyc-search-address--below-location .svg-icon {
   display: flex;
   color: var(--adyen-internal-color-label-tertiary, #8c959d);
   margin-right: var(--adyen-internal-spacer-020, 4px);
@@ -3097,52 +3103,58 @@ fieldset {
   display: none;
 }.adyen-kyc-link {
   align-items: center;
-  border-radius: var(--adyen-internal-border-radius-s, 4px);
+  border-radius: var(--adyen-internal-border-radius-s);
   display: inline-flex;
-  gap: var(--adyen-internal-spacer-010, 2px);
-  outline: var(--adyen-internal-focus-ring-outline, 3px) solid transparent;
+  gap: var(--adyen-internal-spacer-010);
+  outline: var(--adyen-internal-focus-ring-outline) solid transparent;
   text-decoration: underline;
-  transition: var(--adyen-internal-animation-duration-slow, 250ms);
-}
-.adyen-kyc-link:focus-visible {
-  color: var(--adyen-internal-color-link-primary, #0065c9);
-  fill: var(--adyen-internal-color-link-primary, #0065c9);
-  outline-color: var(--adyen-internal-color-link-primary, #0065c9);
-  outline-offset: var(--adyen-internal-focus-ring-spacer, 1px);
-  text-decoration: none;
+  transition: var(--adyen-internal-animation-duration-slow);
+
+  &:focus-visible {
+    color: var(--adyen-internal-color-link-primary);
+    fill: var(--adyen-internal-color-link-primary);
+    outline-color: var(--adyen-internal-color-link-primary);
+    outline-offset: var(--adyen-internal-focus-ring-spacer);
+    text-decoration: none;
+  }
 }
 
 .adyen-kyc-link-default {
-  color: var(--adyen-internal-color-link-primary, #0065c9);
-}
-@media (hover: hover) {
-  .adyen-kyc-link-default:hover {
-    color: var(--adyen-internal-color-link-primary-hover, #0f75dc);
-    fill: var(--adyen-internal-color-link-primary-hover, #0f75dc);
+  color: var(--adyen-internal-color-link-primary);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--adyen-internal-color-link-primary-hover);
+      fill: var(--adyen-internal-color-link-primary-hover);
+      text-decoration: none;
+    }
+  }
+
+  &:active {
+    color: var(--adyen-internal-color-link-primary-active);
+    fill: var(--adyen-internal-color-link-primary-active);
     text-decoration: none;
   }
 }
-.adyen-kyc-link-default:active {
-  color: var(--adyen-internal-color-link-primary-active, #0f75dc);
-  fill: var(--adyen-internal-color-link-primary-active, #0f75dc);
-  text-decoration: none;
-}
 
 .adyen-kyc-link-inline {
   color: inherit;
-}
-@media (hover: hover) {
-  .adyen-kyc-link-inline:hover {
-    color: var(--adyen-internal-color-link-primary, #0065c9);
-    fill: var(--adyen-internal-color-link-primary, #0065c9);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--adyen-internal-color-link-primary);
+      fill: var(--adyen-internal-color-link-primary);
+      text-decoration: none;
+    }
+  }
+
+  &:active {
+    color: var(--adyen-internal-color-link-primary-active);
+    fill: var(--adyen-internal-color-link-primary-active);
     text-decoration: none;
   }
 }
-.adyen-kyc-link-inline:active {
-  color: var(--adyen-internal-color-link-primary-active, #0f75dc);
-  fill: var(--adyen-internal-color-link-primary-active, #0f75dc);
-  text-decoration: none;
-}.adyen-kyc-input-radio {
+.adyen-kyc-input-radio {
   display: inline-flex;
   vertical-align: baseline;
 }
@@ -3564,11 +3576,12 @@ fieldset {
 .adyen-kyc-tile-container-horizontal .adyen-kyc-tile-icon + .adyen-kyc-tile-label {
   margin-left: var(--adyen-internal-spacer-070, 16px);
 }.adyen-kyc-tile-group {
-  gap: var(--adyen-internal-spacer-040, 8px);
+  gap: var(--adyen-internal-spacer-040);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .adyen-kyc-tile-group .adyen-kyc-tile-container {
   width: 32%;
   white-space: wrap;
@@ -3580,16 +3593,17 @@ fieldset {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--adyen-internal-color-label-critical, #dc3801);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
+  color: var(--adyen-internal-color-label-critical);
+  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, 400);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
-  margin-bottom: var(--adyen-internal-spacer-070, 16px);
+  font-weight: var(--adyen-internal-text-caption-font-weight);
+  line-height: var(--adyen-internal-text-caption-line-height);
+  margin-bottom: var(--adyen-internal-spacer-070);
 }
+
 .adyen-kyc-tile-group-error-icon {
-  margin-right: var(--adyen-internal-spacer-020, 4px);
-  height: var(--adyen-internal-spacer-070, 16px);
+  margin-right: var(--adyen-internal-spacer-020);
+  height: var(--adyen-internal-spacer-070);
 }
 
 .adyen-kyc-tile-group-horizontal {
@@ -3597,9 +3611,11 @@ fieldset {
   flex-wrap: nowrap;
   flex-direction: column;
 }
+
 .adyen-kyc-tile-group-horizontal .adyen-kyc-tile-container {
   width: 100%;
-}.adyen-kyc-guidance-question {
+}
+.adyen-kyc-guidance-question {
   margin-bottom: var(--adyen-internal-spacer-140, 64px);
 }
 
@@ -4592,24 +4608,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
   flex: 1;
   overflow-x: auto;
 }
-.adyen-kyc-provider-button {
-  align-items: center;
-  display: flex;
-  gap: var(--adyen-internal-spacer-060);
-  justify-content: center;
-  max-height: var(--adyen-internal-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;
@@ -4711,7 +4709,7 @@ input.adyen-kyc-radio-group-card__radio--floating {
     gap: var(--adyen-internal-spacer-040, 8px);
   }
 }
-.adyen-task-item__status .adyen-kyc-icon {
+.adyen-task-item__status .svg-icon {
   display: inline-flex;
 }
 .adyen-task-item__body {
@@ -4763,7 +4761,25 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-task-list-group > .adyen-kyc-card__body {
   padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px);
-}.adyen-kyc-detail-view-layout {
+}.adyen-kyc-provider-button {
+  align-items: center;
+  display: flex;
+  gap: var(--adyen-internal-spacer-060);
+  justify-content: center;
+  max-height: var(--adyen-internal-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-kyc-detail-view-layout {
   display: flex;
   flex-direction: column;
   margin-left: auto;
@@ -5161,81 +5177,83 @@ input.adyen-kyc-radio-group-card__radio--floating {
   background-color: transparent;
   border: none;
   display: flex;
-  gap: var(--adyen-internal-spacer-040, 8px);
+  gap: var(--adyen-internal-spacer-040);
   overflow: hidden;
   text-align: left;
   width: 100%;
 }
 
-.adyen-kyc-list-item.adyen-kyc-list-item-bordered {
-  padding: var(--adyen-internal-spacer-070, 16px);
-}
-
 .adyen-kyc-list-item-interactive {
-  border-radius: var(--adyen-internal-border-radius-m, 8px);
+  border-radius: var(--adyen-internal-border-radius-m);
   cursor: pointer;
-  outline-offset: var(--adyen-internal-focus-ring-spacer, 1px);
-  outline: var(--adyen-internal-focus-ring-outline, 3px) solid transparent;
-  padding: var(--adyen-internal-spacer-040, 8px);
-  transition: var(--adyen-internal-animation-duration-slow, 250ms);
-}
-@media (hover: hover) {
-  .adyen-kyc-list-item-interactive:hover {
-    background-color: var(--adyen-internal-color-background-secondary-hover, #ecedef);
+  outline-offset: var(--adyen-internal-focus-ring-spacer);
+  outline: var(--adyen-internal-focus-ring-outline) solid transparent;
+  padding: var(--adyen-internal-spacer-040);
+  transition: var(--adyen-internal-animation-duration-slow);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--adyen-internal-color-background-secondary-hover);
+    }
+  }
+
+  &:active {
+    background-color: var(--adyen-internal-color-background-secondary-active);
+  }
+
+  &:focus-visible {
+    outline-color: var(--adyen-internal-color-label-primary);
+  }
+
+  &:disabled,
+  &:disabled * {
+    color: var(--adyen-internal-color-label-disabled);
+    pointer-events: none;
   }
-}
-.adyen-kyc-list-item-interactive:active {
-  background-color: var(--adyen-internal-color-background-secondary-active, #e2e5e7);
-}
-.adyen-kyc-list-item-interactive:focus-visible {
-  outline-color: var(--adyen-internal-color-label-primary, #001222);
-}
-.adyen-kyc-list-item-interactive:disabled, .adyen-kyc-list-item-interactive:disabled * {
-  color: var(--adyen-internal-color-label-disabled, #8c959d);
-  pointer-events: none;
 }
 
 .adyen-kyc-list-item-text {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--adyen-internal-spacer-010, 2px);
-  padding-left: var(--adyen-internal-spacer-040, 8px);
-  padding-right: var(--adyen-internal-spacer-040, 8px);
+  gap: var(--adyen-internal-spacer-010);
+  padding-left: var(--adyen-internal-spacer-040);
+  padding-right: var(--adyen-internal-spacer-040);
 }
 
 .adyen-kyc-list-item-title {
-  color: var(--adyen-internal-color-label-primary, #001222);
+  color: var(--adyen-internal-color-label-primary);
   font-family: var(--adyen-internal-text-body-font-family);
-  font-size: var(--adyen-internal-text-body-font-size, 14px);
-  font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
-  line-height: var(--adyen-internal-text-body-line-height, 20px);
+  font-size: var(--adyen-internal-text-body-font-size);
+  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
+  line-height: var(--adyen-internal-text-body-line-height);
   margin: 0;
 }
 
 .adyen-kyc-list-item-description {
-  color: var(--adyen-internal-color-label-secondary, #5c6874);
+  color: var(--adyen-internal-color-label-secondary);
   font-family: var(--adyen-internal-text-caption-font-family);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  line-height: var(--adyen-internal-text-caption-line-height);
 }
 
 .adyen-kyc-list-item-disclosure {
-  color: var(--adyen-internal-color-label-tertiary, #8c959d);
+  color: var(--adyen-internal-color-label-tertiary);
   height: 16px;
   width: 16px;
 }
 
 .adyen-kyc-list-item-accessory {
-  color: var(--adyen-internal-color-label-tertiary, #8c959d);
+  color: var(--adyen-internal-color-label-tertiary);
   font-family: var(--adyen-internal-text-caption-font-family);
-  font-size: var(--adyen-internal-text-caption-font-size, 12px);
-  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
-  line-height: var(--adyen-internal-text-caption-line-height, 18px);
+  font-size: var(--adyen-internal-text-caption-font-size);
+  font-weight: var(--adyen-internal-text-caption-font-weight);
+  line-height: var(--adyen-internal-text-caption-line-height);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}.adyen-kyc-entity-association {
+}
+.adyen-kyc-entity-association {
   display: flex;
   flex-direction: column;
   margin: var(--adyen-internal-spacer-000, 0px);
@@ -5279,7 +5297,7 @@ input.adyen-kyc-radio-group-card__radio--floating {
   min-width: auto;
   width: 32px;
 }
-.adyen-kyc-entity-association__more-actions-toggle .adyen-kyc-icon {
+.adyen-kyc-entity-association__more-actions-toggle .svg-icon {
   display: inline-flex;
   margin: var(--adyen-internal-spacer-000, 0px);
 }
@@ -5737,16 +5755,20 @@ input.adyen-kyc-radio-group-card__radio--floating {
   width: 100%;
 }.adyen-kyc-multi-select-list {
   list-style: none;
-  margin: var(--adyen-internal-spacer-000, 0px);
-  padding: var(--adyen-internal-spacer-000, 0px);
+  margin: var(--adyen-internal-spacer-000);
+  padding: var(--adyen-internal-spacer-000);
 }
 
 .adyen-kyc-multi-select-list-item {
   background: none !important;
+  padding: var(--adyen-internal-spacer-000);
 }
-.adyen-kyc-multi-select-list-item--with-description .adyen-kyc-checkbox__label {
-  font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
-}.adyen-kyc-settlor-exemption-reasons-list {
+
+/* TODO: scoping, this overrides children elements classes */
+.adyen-kyc-multi-select-list-item-with-description .adyen-kyc-adyen-kyc-checkbox__label {
+  font-weight: var(--adyen-internal-text-body-strongest-font-weight);
+}
+.adyen-kyc-settlor-exemption-reasons-list {
   list-style-position: inside;
   padding: 0;
 }.adyen-kyc-trust-members .add-owner-alert {