@adyen/kyc-components 3.78.1 → 3.79.0-beta.1

package/dist/style.css

@@ -1451,6 +1451,7 @@
   font-family: var(--adyen-sdk-text-title-font-family);
   font-weight: var(--adyen-sdk-text-title-font-weight);
   line-height: var(--adyen-sdk-text-title-line-height);
+  text-align: left;
 }
 .adyen-kyc-list {
   display: flex;
@@ -1869,6 +1870,7 @@
 }
 .adyen-kyc-input--date {
   padding-right: var(--adyen-sdk-spacer-100, 32px);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
 }
 .adyen-kyc-input--textarea {
   height: 60px;
@@ -4177,35 +4179,33 @@ fieldset {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--adyen-sdk-spacer-070, 16px);
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  gap: var(--adyen-kyc-spacer-070);
+  background-color: var(--adyen-kyc-color-background-primary);
   width: 100%;
   min-width: 250px;
   max-width: 650px;
   cursor: pointer;
   /* html button default styling removal */
   border: none;
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  border-radius: var(--adyen-kyc-border-radius-m);
   text-align: left;
-  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-080, 20px);
+  padding: var(--adyen-kyc-spacer-060) var(--adyen-kyc-spacer-080);
 }
-
 .adyen-kyc-embedded-status-loading {
   cursor: default;
 }
-
 .adyen-kyc-embedded-status-loading .adyen-kyc-embedded-status-avatar {
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  background-color: var(--adyen-kyc-color-background-primary);
   border: none;
 }
 
 .adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  background-color: var(--adyen-kyc-color-background-secondary);
   transition: background-color 0.2s;
 }
-.adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) .adyen-kyc-embedded-status-action-indicator {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+.adyen-kyc-embedded-status-action-indicator {
+  background-color: var(--adyen-kyc-color-background-secondary);
+  color: var(--adyen-kyc-color-label-secondary);
 }
 
 .adyen-kyc-embedded-status-avatar {
@@ -4214,16 +4214,16 @@ fieldset {
   align-items: center;
   width: 40px;
   height: 40px;
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
-  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
+  border-radius: var(--adyen-kyc-border-radius-m);
+  color: var(--adyen-kyc-color-label-inverse-primary);
+  background-color: var(--adyen-kyc-color-background-inverse-primary);
 }
 
 .adyen-kyc-embedded-status-action-indicator {
   border: var(--adyen-kyc-border-default-s);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-050, 10px);
+  border-radius: var(--adyen-kyc-border-radius-m);
+  background-color: var(--adyen-kyc-color-background-primary);
+  padding: var(--adyen-kyc-spacer-010) var(--adyen-kyc-spacer-050);
 }
 
 .adyen-kyc-embedded-status-info {
@@ -4231,7 +4231,8 @@ fieldset {
   flex-direction: column;
   flex: 1;
   overflow-x: auto;
-}.adyen-kyc-manage-transfer-instrument {
+}
+.adyen-kyc-manage-transfer-instrument {
   padding: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
   display: flex;
@@ -4986,6 +4987,113 @@ fieldset {
   font-size: var(--adyen-sdk-spacer-060, 12px);
   font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}/* for container queries */
+.adyen-kyc-stack-layout {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.adyen-kyc-stack-layout-gap-xs {
+  gap: var(--adyen-sdk-spacer-020);
+}
+
+.adyen-kyc-stack-layout-gap-s {
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-stack-layout-gap-m {
+  gap: var(--adyen-sdk-spacer-070);
+}
+
+.adyen-kyc-stack-layout-gap-l {
+  gap: var(--adyen-sdk-spacer-100);
+}
+
+.adyen-kyc-stack-layout-gap-xl {
+  gap: var(--adyen-sdk-spacer-140);
+}
+
+@container main (min-width: 480px) {
+  .adyen-kyc-stack-layout-horizontal {
+    flex-direction: row;
+  }
+  .adyen-kyc-stack-layout-horizontal > * {
+    flex-grow: 1;
+  }
+}.adyen-kyc-landing-layout-image {
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-image svg,
+.adyen-kyc-landing-layout-image span {
+  width: 100%;
+  height: 100%;
+}
+
+.adyen-kyc-landing-layout-actions {
+  text-align: center;
+  max-width: 320px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-disclaimer {
+  text-align: center;
+  margin-top: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-landing-layout-center {
+  text-align: center;
+  width: 100%;
+}
+.adyen-kyc-tax-reporting-dropin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-text-center {
+  text-align: center;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-radio-caption {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-tax-reporting-dropin-getting-started {
+  text-align: center;
+  max-width: 520px;
+}
+.adyen-kyc-tax-reporting-dropin-form-container {
+  max-width: 520px;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle {
+  text-align: center;
+  margin: var(--adyen-sdk-spacer-040, 8px) 0 var(--adyen-sdk-spacer-140, 64px) 0;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle a {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary {
+  text-align: left;
+  margin: var(--adyen-sdk-spacer-140, 64px) 0 var(--adyen-sdk-spacer-100, 32px) 0;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card {
+  border: none;
+  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--header {
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--body {
+  margin: 0 var(--adyen-sdk-spacer-070, 16px);
+  padding: var(--adyen-sdk-spacer-070, 16px) 0;
+  border-top: var(--adyen-kyc-border-default-s);
+}.adyen-kyc-business-details {
+  min-height: 480px;
+}
+.adyen-kyc-business-details--hide,
+.adyen-kyc-business-details [class*="--hide"] {
+  display: none;
 }.adyen-kyc-source-of-funds {
   display: flex;
   flex-direction: column;
@@ -5010,16 +5118,6 @@ fieldset {
   text-align: center;
   margin: var(--adyen-sdk-spacer-000, 0px) auto;
 }
-.adyen-kyc-source-of-funds-getting-started-icon {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-kyc-source-of-funds-getting-started-icon > svg {
-  max-width: 224px;
-  height: 224px;
-  display: block;
-}
 .adyen-kyc-source-of-funds-getting-started-heading {
   margin-bottom: var(--adyen-sdk-spacer-050, 10px);
 }
@@ -5131,50 +5229,4 @@ fieldset {
   display: flex;
   flex-direction: column;
   gap: var(--adyen-sdk-spacer-100, 32px);
-}.adyen-kyc-tax-reporting-dropin {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-text-center {
-  text-align: center;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-radio-caption {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-kyc-tax-reporting-dropin-getting-started {
-  text-align: center;
-  max-width: 520px;
-}
-.adyen-kyc-tax-reporting-dropin-form-container {
-  max-width: 520px;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle {
-  text-align: center;
-  margin: var(--adyen-sdk-spacer-040, 8px) 0 var(--adyen-sdk-spacer-140, 64px) 0;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle a {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary {
-  text-align: left;
-  margin: var(--adyen-sdk-spacer-140, 64px) 0 var(--adyen-sdk-spacer-100, 32px) 0;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card {
-  border: none;
-  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--header {
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--body {
-  margin: 0 var(--adyen-sdk-spacer-070, 16px);
-  padding: var(--adyen-sdk-spacer-070, 16px) 0;
-  border-top: var(--adyen-kyc-border-default-s);
-}.adyen-kyc-business-details {
-  min-height: 480px;
-}
-.adyen-kyc-business-details--hide,
-.adyen-kyc-business-details [class*="--hide"] {
-  display: none;
 }

package/dist/styles-CLV89_hH.js

@@ -1460,6 +1460,7 @@ const css = `.adyen-kyc-loader-wrapper {
   font-family: var(--adyen-sdk-text-title-font-family);
   font-weight: var(--adyen-sdk-text-title-font-weight);
   line-height: var(--adyen-sdk-text-title-line-height);
+  text-align: left;
 }
 .adyen-kyc-list {
   display: flex;
@@ -1878,6 +1879,7 @@ const css = `.adyen-kyc-loader-wrapper {
 }
 .adyen-kyc-input--date {
   padding-right: var(--adyen-sdk-spacer-100, 32px);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
 }
 .adyen-kyc-input--textarea {
   height: 60px;
@@ -4186,35 +4188,33 @@ fieldset {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--adyen-sdk-spacer-070, 16px);
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  gap: var(--adyen-kyc-spacer-070);
+  background-color: var(--adyen-kyc-color-background-primary);
   width: 100%;
   min-width: 250px;
   max-width: 650px;
   cursor: pointer;
   /* html button default styling removal */
   border: none;
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  border-radius: var(--adyen-kyc-border-radius-m);
   text-align: left;
-  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-080, 20px);
+  padding: var(--adyen-kyc-spacer-060) var(--adyen-kyc-spacer-080);
 }
-
 .adyen-kyc-embedded-status-loading {
   cursor: default;
 }
-
 .adyen-kyc-embedded-status-loading .adyen-kyc-embedded-status-avatar {
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  background-color: var(--adyen-kyc-color-background-primary);
   border: none;
 }
 
 .adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  background-color: var(--adyen-kyc-color-background-secondary);
   transition: background-color 0.2s;
 }
-.adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) .adyen-kyc-embedded-status-action-indicator {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+.adyen-kyc-embedded-status-action-indicator {
+  background-color: var(--adyen-kyc-color-background-secondary);
+  color: var(--adyen-kyc-color-label-secondary);
 }
 
 .adyen-kyc-embedded-status-avatar {
@@ -4223,16 +4223,16 @@ fieldset {
   align-items: center;
   width: 40px;
   height: 40px;
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
-  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
+  border-radius: var(--adyen-kyc-border-radius-m);
+  color: var(--adyen-kyc-color-label-inverse-primary);
+  background-color: var(--adyen-kyc-color-background-inverse-primary);
 }
 
 .adyen-kyc-embedded-status-action-indicator {
   border: var(--adyen-kyc-border-default-s);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-050, 10px);
+  border-radius: var(--adyen-kyc-border-radius-m);
+  background-color: var(--adyen-kyc-color-background-primary);
+  padding: var(--adyen-kyc-spacer-010) var(--adyen-kyc-spacer-050);
 }
 
 .adyen-kyc-embedded-status-info {
@@ -4240,7 +4240,8 @@ fieldset {
   flex-direction: column;
   flex: 1;
   overflow-x: auto;
-}.adyen-kyc-manage-transfer-instrument {
+}
+.adyen-kyc-manage-transfer-instrument {
   padding: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
   display: flex;
@@ -4995,6 +4996,113 @@ fieldset {
   font-size: var(--adyen-sdk-spacer-060, 12px);
   font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}/* for container queries */
+.adyen-kyc-stack-layout {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.adyen-kyc-stack-layout-gap-xs {
+  gap: var(--adyen-sdk-spacer-020);
+}
+
+.adyen-kyc-stack-layout-gap-s {
+  gap: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-stack-layout-gap-m {
+  gap: var(--adyen-sdk-spacer-070);
+}
+
+.adyen-kyc-stack-layout-gap-l {
+  gap: var(--adyen-sdk-spacer-100);
+}
+
+.adyen-kyc-stack-layout-gap-xl {
+  gap: var(--adyen-sdk-spacer-140);
+}
+
+@container main (min-width: 480px) {
+  .adyen-kyc-stack-layout-horizontal {
+    flex-direction: row;
+  }
+  .adyen-kyc-stack-layout-horizontal > * {
+    flex-grow: 1;
+  }
+}.adyen-kyc-landing-layout-image {
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-image svg,
+.adyen-kyc-landing-layout-image span {
+  width: 100%;
+  height: 100%;
+}
+
+.adyen-kyc-landing-layout-actions {
+  text-align: center;
+  max-width: 320px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.adyen-kyc-landing-layout-disclaimer {
+  text-align: center;
+  margin-top: var(--adyen-sdk-spacer-040);
+}
+
+.adyen-kyc-landing-layout-center {
+  text-align: center;
+  width: 100%;
+}
+.adyen-kyc-tax-reporting-dropin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-text-center {
+  text-align: center;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-radio-caption {
+  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-tax-reporting-dropin-getting-started {
+  text-align: center;
+  max-width: 520px;
+}
+.adyen-kyc-tax-reporting-dropin-form-container {
+  max-width: 520px;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle {
+  text-align: center;
+  margin: var(--adyen-sdk-spacer-040, 8px) 0 var(--adyen-sdk-spacer-140, 64px) 0;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle a {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary {
+  text-align: left;
+  margin: var(--adyen-sdk-spacer-140, 64px) 0 var(--adyen-sdk-spacer-100, 32px) 0;
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card {
+  border: none;
+  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--header {
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--body {
+  margin: 0 var(--adyen-sdk-spacer-070, 16px);
+  padding: var(--adyen-sdk-spacer-070, 16px) 0;
+  border-top: var(--adyen-kyc-border-default-s);
+}.adyen-kyc-business-details {
+  min-height: 480px;
+}
+.adyen-kyc-business-details--hide,
+.adyen-kyc-business-details [class*="--hide"] {
+  display: none;
 }.adyen-kyc-source-of-funds {
   display: flex;
   flex-direction: column;
@@ -5019,16 +5127,6 @@ fieldset {
   text-align: center;
   margin: var(--adyen-sdk-spacer-000, 0px) auto;
 }
-.adyen-kyc-source-of-funds-getting-started-icon {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-kyc-source-of-funds-getting-started-icon > svg {
-  max-width: 224px;
-  height: 224px;
-  display: block;
-}
 .adyen-kyc-source-of-funds-getting-started-heading {
   margin-bottom: var(--adyen-sdk-spacer-050, 10px);
 }
@@ -5140,52 +5238,6 @@ fieldset {
   display: flex;
   flex-direction: column;
   gap: var(--adyen-sdk-spacer-100, 32px);
-}.adyen-kyc-tax-reporting-dropin {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-text-center {
-  text-align: center;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-radio-caption {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
-}
-.adyen-kyc-tax-reporting-dropin-getting-started {
-  text-align: center;
-  max-width: 520px;
-}
-.adyen-kyc-tax-reporting-dropin-form-container {
-  max-width: 520px;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle {
-  text-align: center;
-  margin: var(--adyen-sdk-spacer-040, 8px) 0 var(--adyen-sdk-spacer-140, 64px) 0;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-subtitle a {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary {
-  text-align: left;
-  margin: var(--adyen-sdk-spacer-140, 64px) 0 var(--adyen-sdk-spacer-100, 32px) 0;
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card {
-  border: none;
-  background-color: var(--adyen-sdk-color-background-modal-hover, #f7f7f8);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--header {
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-tax-reporting-dropin .adyen-kyc-summary-tax-status-card--body {
-  margin: 0 var(--adyen-sdk-spacer-070, 16px);
-  padding: var(--adyen-sdk-spacer-070, 16px) 0;
-  border-top: var(--adyen-kyc-border-default-s);
-}.adyen-kyc-business-details {
-  min-height: 480px;
-}
-.adyen-kyc-business-details--hide,
-.adyen-kyc-business-details [class*="--hide"] {
-  display: none;
 }`;
 export {
   css