@adyen/kyc-components 3.94.0 → 3.95.0-beta.1

package/dist/style.css

@@ -1054,6 +1054,7 @@
 /* Topmost/root container class */
 .adyen-kyc-ui-element-container-wrapper {
   width: 100%;
+  overflow: auto;
   /**
   * main container query, used similarly to a @media query
   * considering our Component can be embedded in a container of arbitrary size
@@ -2739,6 +2740,7 @@ fieldset {
 /* for container queries */
 .adyen-kyc-structured-list {
   margin: var(--adyen-internal-spacer-000, 0px);
+  color: var(--adyen-internal-color-label-primary, #001222);
 }
 .adyen-kyc-structured-list-section-field {
   display: flex;
@@ -2780,6 +2782,7 @@ fieldset {
 /* for container queries */
 .adyen-kyc-summary {
   display: flex;
+  color: var(--adyen-internal-color-label-primary, #001222);
   flex-direction: column;
 }
 
@@ -3923,6 +3926,7 @@ fieldset {
   border-radius: var(--adyen-internal-border-radius-l);
   transition: 200ms;
   border: 1px solid transparent;
+  overflow: hidden;
 }
 
 .adyen-kyc-card-primary {
@@ -3969,15 +3973,15 @@ fieldset {
   box-shadow: none;
   border-color: transparent;
   color: var(--adyen-internal-color-label-disabled);
-  pointer-events: none;
+  cursor: default;
 }
 
 @media (hover: hover) {
-  .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover {
+  .adyen-kyc-card-interactive.adyen-kyc-card-primary:hover:not(.adyen-kyc-card-interactive:disabled) {
     background-color: var(--adyen-internal-color-background-primary-hover);
   }
 
-  .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover {
+  .adyen-kyc-card-interactive.adyen-kyc-card-secondary:hover:not(.adyen-kyc-card-interactive:disabled) {
     background-color: var(--adyen-internal-color-background-secondary-hover);
   }
 }
@@ -3986,11 +3990,11 @@ fieldset {
   outline-color: var(--adyen-internal-focus-ring-color);
 }
 
-.adyen-kyc-card-interactive.adyen-kyc-card-primary:active {
+.adyen-kyc-card-interactive.adyen-kyc-card-primary:active:not(.adyen-kyc-card-interactive:disabled) {
   background-color: var(--adyen-internal-color-background-primary-active);
 }
 
-.adyen-kyc-card-interactive.adyen-kyc-card-secondary:active {
+.adyen-kyc-card-interactive.adyen-kyc-card-secondary:active:not(.adyen-kyc-card-interactive:disabled) {
   background-color: var(--adyen-internal-color-background-secondary-active);
 }
 
@@ -4608,7 +4612,84 @@ input.adyen-kyc-radio-group-card__radio--floating {
   flex: 1;
   overflow-x: auto;
 }
-.adyen-task-list__container {
+.adyen-kyc-detail-view-layout {
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+  width: 100%;
+}
+
+.adyen-kyc-detail-view-layout-default {
+  gap: var(--adyen-internal-spacer-140);
+}
+
+.adyen-kyc-detail-view-layout-compact {
+  gap: var(--adyen-internal-spacer-100);
+}
+
+.adyen-kyc-detail-view-layout-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-040);
+}
+
+.adyen-kyc-detail-view-layout-title {
+  color: var(--adyen-internal-color-label-primary);
+  font-size: var(--adyen-internal-text-title-l-font-size);
+  font-weight: var(--adyen-internal-text-title-l-font-weight);
+  line-height: var(--adyen-internal-text-title-l-line-height);
+  margin: 0;
+}
+
+.adyen-kyc-detail-view-layout-description {
+  font-size: var(--adyen-internal-text-title-font-size);
+  font-weight: var(--adyen-internal-text-body-font-weight);
+  line-height: var(--adyen-internal-text-title-line-height);
+}
+
+.adyen-kyc-detail-view-layout-align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.adyen-kyc-detail-view-layout-align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.adyen-kyc-detail-view-layout-align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.adyen-kyc-detail-view-layout-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-070);
+}
+
+.adyen-kyc-detail-view-layout-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-040);
+  margin: 0 auto;
+  max-width: 320px;
+  width: 100%;
+}
+.adyen-kyc-manage-transfer-instrument {
+  padding: var(--adyen-internal-spacer-070, 16px);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}.adyen-kyc-manage-ti-overview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}.adyen-task-list__container {
   margin-left: auto;
   margin-right: auto;
   display: flex;
@@ -4782,84 +4863,7 @@ input.adyen-kyc-radio-group-card__radio--floating {
   height: 28px;
   width: auto;
 }
-.adyen-kyc-detail-view-layout {
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 600px;
-  width: 100%;
-}
-
-.adyen-kyc-detail-view-layout-default {
-  gap: var(--adyen-internal-spacer-140);
-}
-
-.adyen-kyc-detail-view-layout-compact {
-  gap: var(--adyen-internal-spacer-100);
-}
-
-.adyen-kyc-detail-view-layout-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-040);
-}
-
-.adyen-kyc-detail-view-layout-title {
-  color: var(--adyen-internal-color-label-primary);
-  font-size: var(--adyen-internal-text-title-l-font-size);
-  font-weight: var(--adyen-internal-text-title-l-font-weight);
-  line-height: var(--adyen-internal-text-title-l-line-height);
-  margin: 0;
-}
-
-.adyen-kyc-detail-view-layout-description {
-  font-size: var(--adyen-internal-text-title-font-size);
-  font-weight: var(--adyen-internal-text-body-font-weight);
-  line-height: var(--adyen-internal-text-title-line-height);
-}
-
-.adyen-kyc-detail-view-layout-align-left {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.adyen-kyc-detail-view-layout-align-center {
-  justify-content: center;
-  text-align: center;
-}
-
-.adyen-kyc-detail-view-layout-align-right {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.adyen-kyc-detail-view-layout-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-070);
-}
-
-.adyen-kyc-detail-view-layout-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-internal-spacer-040);
-  margin: 0 auto;
-  max-width: 320px;
-  width: 100%;
-}
-.adyen-kyc-manage-transfer-instrument {
-  padding: var(--adyen-internal-spacer-070, 16px);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}.adyen-kyc-manage-ti-overview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}.adyen-kyc-verification {
+.adyen-kyc-verification {
   display: block;
   overflow: hidden;
   position: relative;
@@ -5256,88 +5260,76 @@ input.adyen-kyc-radio-group-card__radio--floating {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.adyen-kyc-actions-menu {
+  background: var(--adyen-internal-color-background-secondary);
+  border: var(--adyen-internal-border-default-s);
+  border-radius: var(--adyen-internal-border-radius-l);
+  box-shadow: var(--adyen-internal-shadow-medium);
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--adyen-internal-spacer-040);
+  padding: var(--adyen-internal-spacer-040);
+  position: absolute;
+  right: var(--adyen-internal-spacer-060);
+  z-index: 500;
+}
+.adyen-kyc-actions-menu-option {
+  color: var(--adyen-internal-color-label-secondary);
+  font-size: var(--adyen-internal-text-body-font-size);
+  font-weight: var(--adyen-internal-text-body-font-weight);
+  justify-content: flex-end;
+  padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-040);
+  width: 100%;
+}
+.adyen-kyc-entity-association-wrapper {
+  width: 100%;
+}
+
 .adyen-kyc-entity-association {
   display: flex;
   flex-direction: column;
-  margin: var(--adyen-internal-spacer-000, 0px);
+  margin: 0;
   width: 100%;
 }
-.adyen-kyc-entity-association__top {
+
+.adyen-kyc-entity-association-top {
   display: flex;
   flex-wrap: wrap;
 }
-.adyen-kyc-entity-association__title {
+
+.adyen-kyc-entity-association-title {
   flex: 1;
-  font-size: var(--adyen-internal-text-title-font-size, 16px);
+  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, 600);
-  line-height: var(--adyen-internal-text-title-line-height, 26px);
-  margin: var(--adyen-internal-spacer-000, 0px);
+  font-weight: var(--adyen-internal-text-title-font-weight);
+  line-height: var(--adyen-internal-text-title-line-height);
+  margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.adyen-kyc-entity-association__info {
+
+.adyen-kyc-entity-association-info {
   align-items: center;
   display: flex;
-  gap: var(--adyen-internal-spacer-020, 4px);
-}
-.adyen-kyc-entity-association__tag {
-  margin: var(--adyen-internal-spacer-080, 20px) var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px);
-}
-.adyen-kyc-entity-association__actions {
-  position: relative;
-}
-.adyen-kyc-entity-association__more-actions-toggle {
-  border-radius: 50%;
-  color: var(--adyen-internal-color-label-secondary, #5c6874);
-  font-size: calc(var(--adyen-internal-text-caption-font-size, 12px) / 2);
-  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);
-  height: 32px;
-  margin: var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-040, 8px);
-  min-width: auto;
-  width: 32px;
-}
-.adyen-kyc-entity-association__more-actions-toggle .svg-icon {
-  display: inline-flex;
-  margin: var(--adyen-internal-spacer-000, 0px);
+  gap: var(--adyen-internal-spacer-020);
 }
-.adyen-kyc-entity-association__more-actions-toggle:hover {
-  background: var(--adyen-internal-color-background-secondary, #f4f5f6);
+
+.adyen-kyc-entity-association-tag {
+  margin: var(--adyen-internal-spacer-080) var(--adyen-internal-spacer-040) 0 0;
 }
-.adyen-kyc-entity-association__remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.adyen-kyc-entity-association-actions {
   position: relative;
-  height: 32px;
-  padding: var(--adyen-internal-spacer-000, 0px) var(--adyen-internal-spacer-040, 8px);
 }
+
 .adyen-kyc-entity-association-alert {
-  margin-top: var(--adyen-internal-spacer-040, 8px);
-  padding: var(--adyen-internal-spacer-040, 8px);
-}.adyen-kyc-actions-menu {
-  background: var(--adyen-internal-color-background-secondary);
-  border: var(--adyen-internal-border-default-s);
-  border-radius: var(--adyen-internal-border-radius-l);
-  box-shadow: var(--adyen-internal-shadow-medium);
-  display: flex;
-  flex-direction: column;
   margin-top: var(--adyen-internal-spacer-040);
   padding: var(--adyen-internal-spacer-040);
-  position: absolute;
-  right: var(--adyen-internal-spacer-060);
-  z-index: 500;
 }
-.adyen-kyc-actions-menu-option {
-  color: var(--adyen-internal-color-label-secondary);
-  font-size: var(--adyen-internal-text-body-font-size);
-  font-weight: var(--adyen-internal-text-body-font-weight);
-  justify-content: flex-end;
-  padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-040);
-  width: 100%;
+
+.adyen-kyc-entity-association-wrapper .adyen-kyc-card {
+  overflow: visible;
 }
 .adyen-kyc-entity-status__container {
   display: flex;
@@ -5488,16 +5480,6 @@ input.adyen-kyc-radio-group-card__radio--floating {
 }
 .adyen-kyc-field--dbaName {
   margin-left: 0 !important;
-}.adyen-kyc-financial-information-reported-value-options {
-  gap: var(--adyen-internal-spacer-060, 12px);
-}.adyen-kyc-reported-value {
-  display: flex;
-  flex-direction: column;
-  padding: var(--adyen-internal-spacer-020, 4px) 0;
-}
-
-.adyen-kyc-reported-value-input {
-  margin: var(--adyen-internal-spacer-060, 12px) 0;
 }.adyen-kyc-additional-information-content {
   display: flex;
   flex-direction: column;
@@ -5559,7 +5541,17 @@ input.adyen-kyc-radio-group-card__radio--floating {
   padding: var(--adyen-internal-spacer-090) 0;
   gap: var(--adyen-internal-spacer-030);
 }
-.adyen-kyc-window {
+.adyen-kyc-financial-information-reported-value-options {
+  gap: var(--adyen-internal-spacer-060, 12px);
+}.adyen-kyc-reported-value {
+  display: flex;
+  flex-direction: column;
+  padding: var(--adyen-internal-spacer-020, 4px) 0;
+}
+
+.adyen-kyc-reported-value-input {
+  margin: var(--adyen-internal-spacer-060, 12px) 0;
+}.adyen-kyc-window {
   position: relative;
   margin-left: calc(50% - 50cqw);