@adyen/kyc-components 2.45.2 → 2.46.0

package/dist/style.css

@@ -42,15 +42,11 @@
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
 .adyen-kyc-summary-section {
-  border-bottom: 1px solid #f3f6f9;
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
 .adyen-layout-lg .adyen-kyc-summary-section {
   padding-left: var(--adyen-sdk-spacer-120, 48px);
 }
-.adyen-kyc-summary-section:last-of-type {
-  border-bottom-style: none;
-}
 .adyen-kyc-summary-section__header {
   display: flex;
   align-items: baseline;
@@ -65,10 +61,6 @@
   padding: var(--adyen-sdk-spacer-000, 0px);
   margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-090, 24px);
 }
-.adyen-kyc-summary-section__edit-button {
-  color: #06f;
-  font-size: 16px;
-}
 .adyen-kyc-summary-section__field {
   display: flex;
   font-size: 15px;
@@ -85,7 +77,7 @@
   flex: 1;
 }
 .adyen-kyc-summary-section__label {
-  color: #69778c;
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
 }
 .adyen-kyc-summary-section__data {
   margin: var(--adyen-sdk-spacer-000, 0px);
@@ -123,37 +115,8 @@
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
-/* Reset */
-/* Regular - Fonts */
-/* Shared - Styles */
-/* Shared - Colors */
-/* Small - Styles */
-/* Small - Fonts */
-/* State */
-/* Shadow */
-/* Motion */
-/* Loader */
-/* Circle */
-/* Label Hover box */
-/* Utility mixins */
 /* Base button */
-/* ADL Buttons */
-/* Secondary */
-/* Tertiary */
-/* Ghost */
-/* Loading button */
-/* Colors */
-/* Colors - Positive */
-/* Colors - Negative */
-/* Disabled */
-/* stylelint-disable scss/operator-no-newline-after */
-/* Small */
-/* stylelint-enable scss/operator-no-newline-after */
-/* Block */
-/* With Icons */
-/* Icon Only */
-/* Button circle */
-/* stylelint-disable declaration-block-no-duplicate-properties, no-duplicate-selectors */
+/* base/primary */
 .adyen-kyc-button {
   color: #00112c;
   font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -164,28 +127,28 @@
   line-height: 1.4;
   align-items: center;
   background: none;
-  border: 0;
+  border: none;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  line-height: 1;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px);
+  line-height: 1.4;
+  margin: 0;
   outline: none;
+  padding: 0;
   text-decoration: none;
   user-select: none;
   vertical-align: baseline;
   white-space: nowrap;
-  background-color: #00112c;
-  border-radius: 6px;
-  color: #fff;
-  font-size: 15px;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
+  font-size: 14px;
   font-weight: 600;
-  height: 40px;
-  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
+  height: fit-content;
+  padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
   position: relative;
-  transition: 125ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition-property: background-color, color, opacity, box-shadow;
+  transition-property: color, background-color, box-shadow;
 }
 .adyen-kyc-button *,
 .adyen-kyc-button *::before,
@@ -193,148 +156,60 @@
   box-sizing: border-box;
 }
 .adyen-kyc-button::-moz-focus-inner {
-  border: 0;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-button .adyen-kyc-icon {
-  vertical-align: middle;
+  border: none;
+  padding: 0;
 }
 .adyen-kyc-button:hover {
-  background-color: #14243d;
-}
-.adyen-kyc-button:focus::after {
-  border-radius: inherit;
-  inset: 0;
-  content: " ";
-  position: absolute;
-  transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition-property: box-shadow;
-}
-.adyen-kyc-button:focus:focus:not(:active)::after {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 102, 255, 0.4);
-  z-index: 1;
-}
-.adyen-kyc-button:active {
-  background-color: #00112c;
-}
-.adyen-kyc-button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):not(.adyen-kyc-button--ghost) {
-  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
-}
-.adyen-kyc-button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):not(.adyen-kyc-button--ghost):hover {
-  background-color: #394962;
-  box-shadow: 0 1px 2px rgba(0, 17, 44, 0.12), 0 4px 7px 1px rgba(0, 17, 44, 0.14);
+  background-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c);
+  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
 }
 
+/* secondary */
 .adyen-kyc-button--secondary {
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #dce0e5;
-  color: #394962;
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary, #c9cdd3);
+  color: var(--adyen-sdk-color-label-primary, #00112c);
 }
 .adyen-kyc-button--secondary:hover {
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #dce0e5, 0 8px 8px rgba(0, 17, 44, 0.02), 0 2px 4px rgba(0, 17, 44, 0.04);
+  background-color: var(--adyen-sdk-color-background-primary-hover, #f7f7f8);
+  color: var(--adyen-sdk-color-label-primary-hover, #5c687c);
 }
 .adyen-kyc-button--secondary:active {
-  background-color: #fafafb;
-  box-shadow: inset 0 0 0 1px #dce0e5;
+  background-color: var(--adyen-sdk-color-background-primary-active, #eeeff1);
+  color: var(--adyen-sdk-color-label-primary-active, #8d95a3);
 }
 
 .adyen-kyc-button--tertiary {
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #dce0e5;
-  color: #00112c;
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
+  text-decoration: underline;
 }
 .adyen-kyc-button--tertiary:hover {
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #dce0e5, 0 8px 8px rgba(0, 17, 44, 0.02), 0 2px 4px rgba(0, 17, 44, 0.04);
-}
-.adyen-kyc-button--tertiary:active {
-  background-color: #fafafb;
-  box-shadow: inset 0 0 0 1px #dce0e5;
-}
-
-.adyen-kyc-button--ghost {
+  text-decoration: none;
+  color: var(--adyen-sdk-color-label-primary-hover, #5c687c);
   background-color: transparent;
-  color: #394962;
-}
-.adyen-kyc-button--ghost:hover {
-  background-color: #f3f6f9;
 }
-.adyen-kyc-button--ghost:active {
-  background-color: #eef1f5;
+.adyen-kyc-button--tertiary:active {
+  text-decoration: none;
+  color: var(--adyen-sdk-color-label-primary-active, #8d95a3);
 }
 
 .adyen-kyc-button--with-loader {
   overflow: hidden;
 }
 
-.adyen-kyc-button__loader-container {
-  height: 20px;
-  opacity: 0;
-  overflow: hidden;
-  transition-duration: 125ms;
-  transition-property: width, margin-left, opacity;
-  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  width: 0;
-}
-.adyen-kyc-button__loader-container > .adyen-kyc-spinner__wrapper {
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}
-
 .adyen-kyc-button__loader-container--active {
-  margin-left: var(--adyen-sdk-spacer-050, 10px);
+  display: flex;
   opacity: 1;
-  width: 20px;
-}
-
-.adyen-kyc-button--positive {
-  background-color: #0abf53;
-  color: #fff;
-}
-.adyen-kyc-button--positive:hover {
-  background-color: #31c96f;
-}
-.adyen-kyc-button--positive:active {
-  background-color: #08a34d;
-}
-.adyen-kyc-button--positive.adyen-kyc-button--secondary, .adyen-kyc-button--positive.adyen-kyc-button--tertiary {
-  background-color: #fff;
-  color: #0abf53;
-}
-.adyen-kyc-button--positive.adyen-kyc-button--secondary:hover, .adyen-kyc-button--positive.adyen-kyc-button--tertiary:hover {
-  background-color: #fff;
-}
-.adyen-kyc-button--positive.adyen-kyc-button--secondary:active, .adyen-kyc-button--positive.adyen-kyc-button--tertiary:active {
-  background-color: #f5fcf8;
-}
-
-.adyen-kyc-button--negative {
-  background-color: #e50000;
-  color: #fff;
-}
-.adyen-kyc-button--negative:hover {
-  background-color: #e92929;
-}
-.adyen-kyc-button--negative:active {
-  background-color: #c00307;
-}
-.adyen-kyc-button--negative.adyen-kyc-button--secondary, .adyen-kyc-button--negative.adyen-kyc-button--tertiary {
-  background-color: #fff;
-  color: #e50000;
-}
-.adyen-kyc-button--negative.adyen-kyc-button--secondary:hover, .adyen-kyc-button--negative.adyen-kyc-button--tertiary:hover {
-  background-color: #fff;
-}
-.adyen-kyc-button--negative.adyen-kyc-button--secondary:active, .adyen-kyc-button--negative.adyen-kyc-button--tertiary:active {
-  background-color: #fef5f5;
+  margin: -1px 4px;
 }
 
 .adyen-kyc-button--small {
-  border-radius: 4px;
-  font-size: 13px;
-  height: 24px;
-  min-width: 56px;
-  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-060, 12px)-1px;
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-050, 10px);
 }
 
 .adyen-kyc-button--block {
@@ -342,119 +217,25 @@
   min-width: 100%;
 }
 
-.adyen-kyc-button--icon .adyen-kyc-icon {
-  margin-left: var(--adyen-sdk-spacer-020, 4px);
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
-}
-
 .adyen-kyc-button--icon-left {
   flex-direction: row-reverse;
 }
 .adyen-kyc-button--icon-left .adyen-kyc-icon {
-  margin-left: var(--adyen-sdk-spacer-000, 0px);
-  margin-right: var(--adyen-sdk-spacer-020, 4px);
-}
-
-.adyen-kyc-button--icon-only {
-  align-items: center;
-  height: 40px;
-  width: 40px;
-  justify-content: center;
-  min-width: auto;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-kyc-button--icon-only .adyen-kyc-icon {
-  display: inline-flex;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-button--icon-small {
-  font-size: 13px;
-  height: 24px;
-  width: 24px;
-}
-.adyen-kyc-button--icon-small .adyen-kyc-icon {
-  margin-left: var(--adyen-sdk-spacer-020, 4px);
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
+  margin-left: 0;
 }
 
-.adyen-kyc-button--circle {
-  align-items: center;
-  border-radius: 50%;
-  height: 40px;
-  justify-content: center;
-  min-width: auto;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-  width: 40px;
-}
-
-.adyen-kyc-button--circle-small {
-  align-items: center;
-  border-radius: 50%;
-  height: 40px;
-  justify-content: center;
-  min-width: auto;
-  padding: var(--adyen-sdk-spacer-000, 0px);
-  width: 40px;
-  font-size: 13px;
-  height: 24px;
-  width: 24px;
-}
-.adyen-kyc-button--circle-small .adyen-kyc-icon {
-  margin-left: var(--adyen-sdk-spacer-020, 4px);
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-button--hover-box:hover .adyen-kyc-button__text--hover-box {
-  display: block;
-}
-
-/*
-    Repeat selector for disabled cases
-    Disabled buttons should have the highest priority and importance, so that's why
-    we are overwriting the styles and repeating the selector
-*/
-.adyen-kyc-button:disabled, .adyen-kyc-button.adyen-kyc-button--disabled {
-  background-color: #dce0e5;
-  box-shadow: none;
-  color: #a5afbd;
+/* Disabled */
+/* stylelint-disable-next-line selector-no-qualifying-type */
+button[disabled] {
   cursor: not-allowed;
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  box-shadow: inset 0 0 0 var(--adyen-sdk-border-width-s, 1px) var(--adyen-sdk-color-background-disabled, #eeeff1);
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
 }
-.adyen-kyc-button.adyen-kyc-button--secondary:disabled, .adyen-kyc-button.adyen-kyc-button--secondary.adyen-kyc-button--disabled, .adyen-kyc-button.adyen-kyc-button--tertiary:disabled, .adyen-kyc-button.adyen-kyc-button--tertiary.adyen-kyc-button--disabled {
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #dce0e5;
-  color: #a5afbd;
-}
-
-.adyen-kyc-button__text--hover-box {
-  background: #20304c;
-  border-radius: 4px;
-  color: #fff;
-  display: none;
-  font-size: 13px;
-  padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-040, 8px);
-  position: absolute;
-  top: 49px;
-}
-.adyen-kyc-button__text--hover-box::before {
-  border-bottom: 4px solid #20304c;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  content: "";
-  height: 0;
-  left: calc(50% - 4px);
-  position: absolute;
-  top: -4px;
-  width: 0;
-}
-
-/* Force link button selector to be always target real anchors and disable them */
-/*stylelint-disable  selector-no-qualifying-type*/
-a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
-  pointer-events: none;
-}
-
-/* stylelint-enable declaration-block-no-duplicate-properties, no-duplicate-selectors, selector-no-qualifying-type *//* #region Colors */
+button[disabled]:hover {
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
+}/* #region Colors */
 /* #endregion */
 /* #region Fonts */
 /* #endregion */
@@ -661,6 +442,13 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   100% {
     transform: rotate(360deg);
   }
+}.adyen-kyc-divider {
+  background-color: var(--adyen-sdk-color-separator-primary, #dbdee2);
+  border: none;
+  height: var(--adyen-sdk-border-width-s, 1px);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  width: 100%;
 }.adyen-kyc-error-panel {
   margin-bottom: var(--adyen-sdk-spacer-080, 20px);
 }/* #region Colors */
@@ -687,36 +475,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
-/* Reset */
-/* Regular - Fonts */
-/* Shared - Styles */
-/* Shared - Colors */
-/* Small - Styles */
-/* Small - Fonts */
-/* State */
-/* Shadow */
-/* Motion */
-/* Loader */
-/* Circle */
-/* Label Hover box */
-/* Utility mixins */
 /* Base button */
-/* ADL Buttons */
-/* Secondary */
-/* Tertiary */
-/* Ghost */
-/* Loading button */
-/* Colors */
-/* Colors - Positive */
-/* Colors - Negative */
-/* Disabled */
-/* stylelint-disable scss/operator-no-newline-after */
-/* Small */
-/* stylelint-enable scss/operator-no-newline-after */
-/* Block */
-/* With Icons */
-/* Icon Only */
-/* Button circle */
 .adyen-kyc-alert {
   color: #00112c;
   font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -802,14 +561,14 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   line-height: 1.4;
   align-items: center;
   background: none;
-  border: 0;
+  border: none;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  line-height: 1;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px);
+  line-height: 1.4;
+  margin: 0;
   outline: none;
+  padding: 0;
   text-decoration: none;
   user-select: none;
   vertical-align: baseline;
@@ -828,8 +587,8 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   box-sizing: border-box;
 }
 .adyen-kyc-alert__action::-moz-focus-inner {
-  border: 0;
-  padding: var(--adyen-sdk-spacer-000, 0px);
+  border: none;
+  padding: 0;
 }
 .adyen-kyc-alert__action:hover {
   color: #00112c;
@@ -846,14 +605,14 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   line-height: 1.4;
   align-items: center;
   background: none;
-  border: 0;
+  border: none;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  line-height: 1;
-  margin: var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px);
+  line-height: 1.4;
+  margin: 0;
   outline: none;
+  padding: 0;
   text-decoration: none;
   user-select: none;
   vertical-align: baseline;
@@ -870,8 +629,8 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   box-sizing: border-box;
 }
 .adyen-kyc-alert__dismiss::-moz-focus-inner {
-  border: 0;
-  padding: var(--adyen-sdk-spacer-000, 0px);
+  border: none;
+  padding: 0;
 }
 .adyen-kyc-alert__dismiss:hover {
   background: transparent;
@@ -1446,8 +1205,8 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   content: "";
   display: block;
   left: 4px;
-  min-height: 6px;
-  min-width: 6px;
+  min-height: 7px;
+  min-width: 7px;
   position: absolute;
   top: 4px;
 }
@@ -1492,18 +1251,6 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
-/* Reset */
-/* Regular - Fonts */
-/* Shared - Styles */
-/* Shared - Colors */
-/* Small - Styles */
-/* Small - Fonts */
-/* State */
-/* Shadow */
-/* Motion */
-/* Loader */
-/* Circle */
-/* Label Hover box */
 .adyen-kyc-tag {
   color: #00112c;
   font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -2002,7 +1749,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-disclaimer-container {
-  background-color: #f3f6f9;
+  background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
   border: 0;
   border-radius: var(--adyen-sdk-spacer-020, 4px);
   margin: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
@@ -2010,14 +1757,14 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 }
 
 .adyen-kyc-disclaimer__title {
-  color: #394962;
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
   font-size: 13px;
   font-weight: bold;
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }
 
 .adyen-kyc-disclaimer__content {
-  color: #394962;
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
   display: flex;
   flex-direction: column;
   font-size: 13px;
@@ -2059,6 +1806,9 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   flex-direction: column;
   margin-top: var(--adyen-sdk-spacer-040, 8px);
 }
+.adyen-kyc-radio-group--horizontal {
+  flex-direction: row;
+}
 
 .adyen-kyc-radio-group + .adyen-kyc-input__inline-validation {
   display: none;
@@ -2222,6 +1972,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 .adyen-kyc-accordion__summary {
   background-color: #f3f6f9;
   color: #00112c;
+  --adyen-kyc-accordion-animation-space: var(--adyen-sdk-spacer-080, 20px);
 }
 
 .adyen-kyc-accordion__details {
@@ -2234,10 +1985,13 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   gap: var(--adyen-sdk-spacer-050, 10px);
   padding: var(--adyen-sdk-spacer-030, 6px);
   font-weight: bold;
+  transition: margin 150ms ease-out;
+  margin-bottom: 0;
 }
 
 .adyen-kyc-accordion__summary > .adyen-kyc-accordion__arrow {
   cursor: pointer;
+  user-select: none;
   height: 1em;
 }
 
@@ -2255,7 +2009,14 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 }
 
 .adyen-kyc-accordion__content {
-  margin: var(--adyen-sdk-spacer-030, 6px) var(--adyen-sdk-spacer-080, 20px);
+  padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-kyc-accordion-animation-space);
+  padding-top: 0;
+  user-select: none;
+}
+
+.adyen-kyc-accordion__details[open] summary {
+  margin-bottom: var(--adyen-kyc-accordion-animation-space);
+  user-select: auto;
 }.adyen-kyc-field--entityType {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
@@ -2750,7 +2511,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 
 .adyen-kyc-search-address--below {
   align-items: start;
-  color: #8390a3;
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
   display: flex;
   justify-content: space-between;
 }
@@ -2762,7 +2523,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 }
 .adyen-kyc-search-address--below-location .adyen-kyc-icon {
   display: flex;
-  color: #a5afbd;
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
   margin-right: var(--adyen-sdk-spacer-020, 4px);
 }
 .adyen-kyc-search-address--below-location .adyen-kyc-icon svg {
@@ -3305,14 +3066,14 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* #region Inline components */
 /* #endregion */
 .adyen-kyc-context-helper {
-  background-color: #f3f6f9;
+  background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
   border-radius: var(--adyen-sdk-spacer-020, 4px);
   margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
   padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
 }
 
 .adyen-kyc-context-helper__content {
-  color: #394962;
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
   display: flex;
   font-size: 13px;
   gap: var(--adyen-sdk-spacer-040, 8px);
@@ -3384,11 +3145,6 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-}.adyen-kyc-field--entityType {
-  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-field--entityType .adyen-kyc-label__text {
-  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Colors */
 /* #endregion */
 /* #region Fonts */
@@ -3409,138 +3165,39 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-/* stylelint-disable-line scss/dollar-variable-pattern */
-/* stylelint-disable-line scss/dollar-variable-pattern */
-/* stylelint-disable-line scss/dollar-variable-pattern */
-/* stylelint-disable-line scss/dollar-variable-pattern */
-.adyen-kyc-toast {
-  color: #00112c;
-  font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 15px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  line-height: 1.4;
-  background: #00112c;
-  border-radius: 6px;
-  color: #fff;
+.adyen-kyc-additional-information {
   display: flex;
-  font-size: 15px;
-  height: auto;
-  line-height: 1.4;
-  opacity: 0;
-  overflow: hidden;
-  padding: var(--adyen-sdk-spacer-050, 10px);
-  transform: translateY(2%);
-  transition: ease 200ms;
-  transition-property: opacity, transform, visibility;
-  user-select: none;
-  visibility: hidden;
-  white-space: normal;
-  z-index: 1;
-}
-.adyen-kyc-toast *,
-.adyen-kyc-toast *::before,
-.adyen-kyc-toast *::after {
-  box-sizing: border-box;
-}
-.adyen-kyc-toast--collapsed {
-  background-color: #8390a3;
-}
-.adyen-kyc-toast--visible {
-  opacity: 1;
-  transform: translateY(0);
-  visibility: visible;
-}
-
-.adyen-kyc-toast__message {
-  flex: 1;
-}
-
-.adyen-kyc-toast__title {
-  display: block;
-  font-weight: 600;
-  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
-  padding-left: var(--adyen-sdk-spacer-050, 10px);
-}
-
-.adyen-kyc-toast__subtitle {
-  color: #a5afbd;
-  display: block;
-  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
-}
-
-.adyen-kyc-toast__close {
-  background: none;
-  border: none;
-  color: #8390a3;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 15px;
-  height: 16px;
-  margin: var(--adyen-sdk-spacer-030, 6px);
-  padding: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-toast__status {
-  border-radius: 50%;
-  color: #00112c;
-  font-size: 15px;
-  height: 18px;
-  width: 18px;
-  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px);
-  vertical-align: top;
-}
-.adyen-kyc-toast__status--success {
-  background-color: #60d58f;
-}
-.adyen-kyc-toast__status--error {
-  background-color: #ee5959;
-}
-
-.adyen-kyc-toast__status-icon {
-  margin: var(--adyen-sdk-spacer-010, 2px);
+  flex-direction: column;
 }
-
-.adyen-kyc-toast__action {
-  color: #a5afbd;
-  display: block;
-  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-decoration: underline;
+.adyen-kyc-additional-information__verified-information {
+  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-.adyen-kyc-toast__action:visited {
-  color: #a5afbd;
+.adyen-kyc-additional-information__verified-information .adyen-kyc-verified-information-card {
+  background: #f3f6f9;
+  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
+  border-radius: 12px;
 }
-
-.adyen-kyc-toast__loader {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  margin: var(--adyen-sdk-spacer-030, 6px);
+.adyen-kyc-additional-information__other-business-information {
+  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-
-.adyen-kyc-dropin__toast-context {
-  max-width: calc(100% - var(--adyen-sdk-spacer-070, 16px));
+.adyen-kyc-additional-information__stock-exchange-information {
+  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-
-.adyen-kyc-dropin__toast-stack {
+.adyen-kyc-additional-information .adyen-kyc-field-wrapper {
+  flex-direction: column;
+}.adyen-kyc-field--dbaName {
+  margin-left: 0 !important;
+}.adyen-kyc-basic-information {
   display: flex;
-  justify-content: center;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
+  flex-direction: column;
 }
-.adyen-layout-xs-only .adyen-kyc-dropin__toast-stack {
-  bottom: var(--adyen-sdk-spacer-070, 16px);
-  position: fixed;
+.adyen-kyc-basic-information .adyen-kyc-field-wrapper {
+  flex-direction: column;
+}.adyen-kyc-field--entityType {
+  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-.adyen-layout-md .adyen-kyc-dropin__toast-stack {
-  top: var(--adyen-sdk-spacer-070, 16px);
+.adyen-kyc-field--entityType .adyen-kyc-label__text {
+  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Colors */
 /* #endregion */
 /* #region Fonts */
@@ -3636,36 +3293,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
 /* stylelint-disable-line scss/dollar-variable-pattern */
-/* Reset */
-/* Regular - Fonts */
-/* Shared - Styles */
-/* Shared - Colors */
-/* Small - Styles */
-/* Small - Fonts */
-/* State */
-/* Shadow */
-/* Motion */
-/* Loader */
-/* Circle */
-/* Label Hover box */
-/* Utility mixins */
 /* Base button */
-/* ADL Buttons */
-/* Secondary */
-/* Tertiary */
-/* Ghost */
-/* Loading button */
-/* Colors */
-/* Colors - Positive */
-/* Colors - Negative */
-/* Disabled */
-/* stylelint-disable scss/operator-no-newline-after */
-/* Small */
-/* stylelint-enable scss/operator-no-newline-after */
-/* Block */
-/* With Icons */
-/* Icon Only */
-/* Button circle */
 .adyen-kyc-modal {
   color: #00112c;
   font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -4545,7 +4173,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   font-weight: 400;
   line-height: 1.4;
   border: 0;
-  border-radius: 12px;
+  border-radius: var(--adyen-sdk-border-radius-l, 12px);
   display: flex;
   font-size: 14px;
   height: 24px;
@@ -4558,14 +4186,15 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   box-sizing: border-box;
 }
 .adyen-kyc-status--finished {
-  color: #0abf53;
+  color: var(--adyen-sdk-color-label-success, #07893c);
 }
 .adyen-kyc-status--download {
-  color: #06f;
+  color: var(--adyen-sdk-color-label-highlight, #0070f5);
   cursor: pointer;
 }
 .adyen-kyc-status--error {
-  color: #ee5959;
+  color: var(--adyen-sdk-color-label-critical, #e22d2d);
+  background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
 }
 .adyen-kyc-status__icon {
   align-self: center;
@@ -4578,33 +4207,29 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 }
 .adyen-kyc-status__icon .adyen-kyc-icon {
   align-items: center;
-  color: #fff;
+  color: var(--adyen-sdk-color-label-on-color, #ffffff);
   display: flex;
   font-size: 7px;
 }
 .adyen-kyc-status__icon--error .adyen-kyc-icon {
-  color: #ee5959;
+  color: var(--adyen-sdk-color-label-critical, #e22d2d);
   font-size: 14px;
 }
 .adyen-kyc-status__icon--finished {
-  background-color: #0abf53;
+  background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
 }
 .adyen-kyc-status__icon--download {
-  background-color: #06f;
+  background-color: var(--adyen-sdk-color-label-highlight, #0070f5);
 }
 .adyen-kyc-status__icon .adyen-kyc-loading-indicator::before {
-  background: #a5afbd;
+  background: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
 .adyen-kyc-status__icon .adyen-kyc-loading-indicator::after {
-  border-top-color: #a5afbd;
+  border-top-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
 
 .adyen-layout-xs-only .adyen-kyc-status__text {
   display: none;
-}
-
-.adyen-layout-md .adyen-kyc-status {
-  background-color: #f3f6f9;
 }/* #region Colors */
 /* #endregion */
 /* #region Fonts */
@@ -5115,7 +4740,7 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   margin-top: var(--adyen-sdk-spacer-020, 4px);
 }
 
-.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):not(.adyen-kyc-button--ghost) {
+.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary) {
   width: 100%;
   background-color: #fff;
   color: #000;
@@ -5123,10 +4748,10 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
   font-weight: 400;
   line-height: var(--adyen-sdk-spacer-080, 20px);
 }
-.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):not(.adyen-kyc-button--ghost):hover {
+.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):hover {
   background-color: #fff;
 }
-.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):not(.adyen-kyc-button--ghost) svg {
+.adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary) svg {
   margin-left: var(--adyen-sdk-spacer-040, 8px);
   width: 92px;
   padding-top: var(--adyen-sdk-spacer-020, 4px);
@@ -6611,4 +6236,156 @@ a.adyen-kyc-button:disabled, a.adyen-kyc-button.adyen-kyc-button--disabled {
 
 .adyen-kyc-u-box-sizing-border-box {
   box-sizing: border-box !important;
+}/* #region Colors */
+/* #endregion */
+/* #region Fonts */
+/* #endregion */
+/* #region Borders */
+/* #endregion */
+/* #region Box-shadow */
+/* #endregion */
+/* #region Shadows */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Transition */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Focus ring */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+/* stylelint-disable-line scss/dollar-variable-pattern */
+/* stylelint-disable-line scss/dollar-variable-pattern */
+/* stylelint-disable-line scss/dollar-variable-pattern */
+/* stylelint-disable-line scss/dollar-variable-pattern */
+.adyen-kyc-toast {
+  color: #00112c;
+  font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  line-height: 1.4;
+  background: #00112c;
+  border-radius: 6px;
+  color: #fff;
+  display: flex;
+  font-size: 15px;
+  height: auto;
+  line-height: 1.4;
+  opacity: 0;
+  overflow: hidden;
+  padding: var(--adyen-sdk-spacer-050, 10px);
+  transform: translateY(2%);
+  transition: ease 200ms;
+  transition-property: opacity, transform, visibility;
+  user-select: none;
+  visibility: hidden;
+  white-space: normal;
+  z-index: 1;
+}
+.adyen-kyc-toast *,
+.adyen-kyc-toast *::before,
+.adyen-kyc-toast *::after {
+  box-sizing: border-box;
+}
+.adyen-kyc-toast--collapsed {
+  background-color: #8390a3;
+}
+.adyen-kyc-toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+.adyen-kyc-toast__message {
+  flex: 1;
+}
+
+.adyen-kyc-toast__title {
+  display: block;
+  font-weight: 600;
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
+  padding-left: var(--adyen-sdk-spacer-050, 10px);
+}
+
+.adyen-kyc-toast__subtitle {
+  color: #a5afbd;
+  display: block;
+  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
+}
+
+.adyen-kyc-toast__close {
+  background: none;
+  border: none;
+  color: #8390a3;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 15px;
+  height: 16px;
+  margin: var(--adyen-sdk-spacer-030, 6px);
+  padding: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-toast__status {
+  border-radius: 50%;
+  color: #00112c;
+  font-size: 15px;
+  height: 18px;
+  width: 18px;
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px);
+  vertical-align: top;
+}
+.adyen-kyc-toast__status--success {
+  background-color: #60d58f;
+}
+.adyen-kyc-toast__status--error {
+  background-color: #ee5959;
+}
+
+.adyen-kyc-toast__status-icon {
+  margin: var(--adyen-sdk-spacer-010, 2px);
+}
+
+.adyen-kyc-toast__action {
+  color: #a5afbd;
+  display: block;
+  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  text-decoration: underline;
+}
+.adyen-kyc-toast__action:visited {
+  color: #a5afbd;
+}
+
+.adyen-kyc-toast__loader {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin: var(--adyen-sdk-spacer-030, 6px);
+}
+
+.adyen-kyc-dropin__toast-context {
+  max-width: calc(100% - var(--adyen-sdk-spacer-070, 16px));
+}
+
+.adyen-kyc-dropin__toast-stack {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+.adyen-layout-xs-only .adyen-kyc-dropin__toast-stack {
+  bottom: var(--adyen-sdk-spacer-070, 16px);
+  position: fixed;
+}
+.adyen-layout-md .adyen-kyc-dropin__toast-stack {
+  top: var(--adyen-sdk-spacer-070, 16px);
 }