@adyen/kyc-components 4.27.0 → 4.28.0-beta.0

package/dist/style.css

@@ -3934,6 +3934,138 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   display: block;
   text-align: left;
 }
+.adyen-kyc-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.adyen-kyc-radio-group--horizontal {
+  flex-direction: row;
+}
+
+.adyen-kyc-radio-group + .adyen-kyc-input__inline-validation {
+  display: none;
+}
+
+.adyen-kyc-radio-group__label {
+  color: inherit;
+  display: block;
+  font-size: var(--adyen-internal-text-body-font-size);
+  font-weight: var(--adyen-internal-text-body-font-weight);
+  line-height: var(--adyen-internal-text-body-line-height);
+  overflow: visible;
+  padding-bottom: var(--adyen-internal-spacer-000);
+  padding-left: var(--adyen-internal-spacer-090);
+  position: relative;
+}
+.adyen-kyc-input-radio {
+  display: inline-flex;
+  vertical-align: baseline;
+  --adyen-kyc-input-radio-radius: var(--adyen-internal-border-radius-l);
+  --adyen-kyc-input-radio-size: 16px;
+  --adyen-kyc-input-radio-checked-size: 6px;
+  --adyen-kyc-input-radio-checked-color: var(--adyen-internal-color-background-inverse-primary);
+  --adyen-kyc-input-radio-checked-offset-left: 4px;
+  --adyen-kyc-input-radio-checked-offset-top: var(--adyen-kyc-input-radio-checked-offset-left);
+}
+
+.adyen-kyc-input-radio__input {
+  appearance: none;
+  background-color: var(--adyen-internal-color-background-primary);
+  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-tertiary);
+  border-radius: var(--adyen-kyc-input-radio-radius);
+  cursor: pointer;
+  display: inline-block;
+  flex-basis: var(--adyen-kyc-input-radio-size);
+  height: var(--adyen-kyc-input-radio-size);
+  margin: var(--adyen-internal-spacer-000);
+  min-width: var(--adyen-kyc-input-radio-size);
+  outline: none;
+  position: relative;
+  top: 3px;
+  width: var(--adyen-kyc-input-radio-size);
+}
+
+/* increase the clickable area */
+.adyen-kyc-input-radio__input::after {
+  inset: calc(var(--adyen-internal-spacer-020) * -1);
+  content: '';
+  display: block;
+  position: absolute;
+}
+
+.adyen-kyc-input-radio__input::before {
+  background: var(--adyen-internal-color-background-primary);
+  border-radius: var(--adyen-kyc-input-radio-radius);
+  content: '';
+  display: block;
+  height: var(--adyen-kyc-input-radio-checked-size);
+  left: var(--adyen-kyc-input-radio-checked-offset-left);
+  opacity: 0;
+  position: absolute;
+  top: var(--adyen-kyc-input-radio-checked-offset-top);
+  transform: scale(0);
+  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: var(--adyen-kyc-input-radio-checked-size);
+}
+
+.adyen-kyc-input-radio__input:checked {
+  background: var(--adyen-kyc-input-radio-checked-color);
+  border-color: var(--adyen-kyc-input-radio-checked-color);
+}
+
+.adyen-kyc-input-radio__input:checked::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.adyen-kyc-input-radio__input:checked:hover {
+  border-color: var(--adyen-internal-color-outline-inverse-primary-hover);
+  background-color: var(--adyen-internal-color-background-inverse-primary-hover);
+}
+
+.adyen-kyc-input-radio__input:checked:disabled:hover {
+  background-color: var(--adyen-internal-color-background-disabled);
+  border-color: var(--adyen-internal-color-outline-disabled);
+}
+
+.adyen-kyc-input-radio__input:checked:disabled::before {
+  background-color: var(--adyen-internal-color-outline-tertiary);
+}
+
+.adyen-kyc-input-radio__input:hover {
+  background-color: var(--adyen-internal-color-background-primary-hover);
+}
+
+.adyen-kyc-input-radio__input:focus {
+  box-shadow:
+    0 0 0 var(--adyen-internal-focus-ring-spacer) var(--adyen-internal-color-background-primary),
+    0 0 0 var(--adyen-internal-focus-ring-outline) var(--adyen-internal-focus-ring-color);
+  transition: var(--adyen-internal-animation-duration-fast)
+    var(--adyen-internal-animation-easing-standard);
+  transition-property: box-shadow;
+}
+
+.adyen-kyc-input-radio__input:disabled {
+  background-color: var(--adyen-internal-color-background-disabled);
+  border-color: var(--adyen-internal-color-outline-disabled);
+  cursor: not-allowed;
+}
+
+.adyen-kyc-input-radio__content {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--adyen-internal-spacer-040);
+  flex-grow: 1;
+}
+
+.adyen-kyc-input-radio__label {
+  line-height: var(--adyen-internal-text-body-line-height);
+  font-weight: var(--adyen-internal-text-body-font-weight);
+  margin-right: var(--adyen-internal-spacer-070);
+  vertical-align: baseline;
+}
 ._end-state-layout_z1k0z_1 {
   align-items: center;
   display: flex;
@@ -4223,138 +4355,6 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
     transform: translateX(4px);
   }
 }
-.adyen-kyc-radio-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.adyen-kyc-radio-group--horizontal {
-  flex-direction: row;
-}
-
-.adyen-kyc-radio-group + .adyen-kyc-input__inline-validation {
-  display: none;
-}
-
-.adyen-kyc-radio-group__label {
-  color: inherit;
-  display: block;
-  font-size: var(--adyen-internal-text-body-font-size);
-  font-weight: var(--adyen-internal-text-body-font-weight);
-  line-height: var(--adyen-internal-text-body-line-height);
-  overflow: visible;
-  padding-bottom: var(--adyen-internal-spacer-000);
-  padding-left: var(--adyen-internal-spacer-090);
-  position: relative;
-}
-.adyen-kyc-input-radio {
-  display: inline-flex;
-  vertical-align: baseline;
-  --adyen-kyc-input-radio-radius: var(--adyen-internal-border-radius-l);
-  --adyen-kyc-input-radio-size: 16px;
-  --adyen-kyc-input-radio-checked-size: 6px;
-  --adyen-kyc-input-radio-checked-color: var(--adyen-internal-color-background-inverse-primary);
-  --adyen-kyc-input-radio-checked-offset-left: 4px;
-  --adyen-kyc-input-radio-checked-offset-top: var(--adyen-kyc-input-radio-checked-offset-left);
-}
-
-.adyen-kyc-input-radio__input {
-  appearance: none;
-  background-color: var(--adyen-internal-color-background-primary);
-  border: var(--adyen-internal-border-width-s) solid var(--adyen-internal-color-outline-tertiary);
-  border-radius: var(--adyen-kyc-input-radio-radius);
-  cursor: pointer;
-  display: inline-block;
-  flex-basis: var(--adyen-kyc-input-radio-size);
-  height: var(--adyen-kyc-input-radio-size);
-  margin: var(--adyen-internal-spacer-000);
-  min-width: var(--adyen-kyc-input-radio-size);
-  outline: none;
-  position: relative;
-  top: 3px;
-  width: var(--adyen-kyc-input-radio-size);
-}
-
-/* increase the clickable area */
-.adyen-kyc-input-radio__input::after {
-  inset: calc(var(--adyen-internal-spacer-020) * -1);
-  content: '';
-  display: block;
-  position: absolute;
-}
-
-.adyen-kyc-input-radio__input::before {
-  background: var(--adyen-internal-color-background-primary);
-  border-radius: var(--adyen-kyc-input-radio-radius);
-  content: '';
-  display: block;
-  height: var(--adyen-kyc-input-radio-checked-size);
-  left: var(--adyen-kyc-input-radio-checked-offset-left);
-  opacity: 0;
-  position: absolute;
-  top: var(--adyen-kyc-input-radio-checked-offset-top);
-  transform: scale(0);
-  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  width: var(--adyen-kyc-input-radio-checked-size);
-}
-
-.adyen-kyc-input-radio__input:checked {
-  background: var(--adyen-kyc-input-radio-checked-color);
-  border-color: var(--adyen-kyc-input-radio-checked-color);
-}
-
-.adyen-kyc-input-radio__input:checked::before {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.adyen-kyc-input-radio__input:checked:hover {
-  border-color: var(--adyen-internal-color-outline-inverse-primary-hover);
-  background-color: var(--adyen-internal-color-background-inverse-primary-hover);
-}
-
-.adyen-kyc-input-radio__input:checked:disabled:hover {
-  background-color: var(--adyen-internal-color-background-disabled);
-  border-color: var(--adyen-internal-color-outline-disabled);
-}
-
-.adyen-kyc-input-radio__input:checked:disabled::before {
-  background-color: var(--adyen-internal-color-outline-tertiary);
-}
-
-.adyen-kyc-input-radio__input:hover {
-  background-color: var(--adyen-internal-color-background-primary-hover);
-}
-
-.adyen-kyc-input-radio__input:focus {
-  box-shadow:
-    0 0 0 var(--adyen-internal-focus-ring-spacer) var(--adyen-internal-color-background-primary),
-    0 0 0 var(--adyen-internal-focus-ring-outline) var(--adyen-internal-focus-ring-color);
-  transition: var(--adyen-internal-animation-duration-fast)
-    var(--adyen-internal-animation-easing-standard);
-  transition-property: box-shadow;
-}
-
-.adyen-kyc-input-radio__input:disabled {
-  background-color: var(--adyen-internal-color-background-disabled);
-  border-color: var(--adyen-internal-color-outline-disabled);
-  cursor: not-allowed;
-}
-
-.adyen-kyc-input-radio__content {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--adyen-internal-spacer-040);
-  flex-grow: 1;
-}
-
-.adyen-kyc-input-radio__label {
-  line-height: var(--adyen-internal-text-body-line-height);
-  font-weight: var(--adyen-internal-text-body-font-weight);
-  margin-right: var(--adyen-internal-spacer-070);
-  vertical-align: baseline;
-}
 .adyen-kyc-address__condensed-fields {
   display: flex;
   flex-direction: column;
@@ -5521,6 +5521,12 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   outline-offset: -1px;
   outline: 2px solid var(--adyen-internal-color-outline-primary-active);
 }
+._entity-setup-option_1ykiv_1 {
+  margin-bottom: var(--adyen-internal-spacer-060);
+}
+._primary-partner-type_1omkz_1 {
+  margin-bottom: var(--adyen-internal-spacer-060);
+}
 .adyen-task-item {
   gap: var(--adyen-internal-spacer-100);
 }
@@ -5604,12 +5610,6 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
   /* This was needed to align the text with the chevron icon (which are 2 separate elements now) */
   padding-top: 1px;
 }
-._entity-setup-option_1ykiv_1 {
-  margin-bottom: var(--adyen-internal-spacer-060);
-}
-._primary-partner-type_1omkz_1 {
-  margin-bottom: var(--adyen-internal-spacer-060);
-}
 .adyen-task-list__container {
   margin-left: auto;
   margin-right: auto;
@@ -6214,58 +6214,41 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
     }
   }
 }
-._themeTab_1e5pb_1 {
+._themeTab_1nndo_1 {
   display: flex;
   flex-direction: column;
   gap: var(--adyen-internal-spacer-050);
-  max-width: 40em;
+  max-width: 50em;
 }
 
-._description_1e5pb_8 {
-  margin: 0;
-}
-
-._warning_1e5pb_12 {
-  margin: 0;
-  color: var(--adyen-internal-color-label-warning);
+._modeSelector_1nndo_8 {
+  display: flex;
+  align-items: center;
+  gap: var(--adyen-internal-spacer-050);
 }
 
-._label_1e5pb_17 {
+._modeSelectorLabel_1nndo_14 {
   font-weight: var(--adyen-internal-text-title-font-weight);
 }
 
-._themeInput_1e5pb_21 {
-  font-family: monospace;
-  font-size: var(--adyen-internal-text-caption-font-size);
-  line-height: 1.5;
-  padding: var(--adyen-internal-spacer-040);
+._editor_1nndo_18 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-internal-spacer-050);
+  padding: var(--adyen-internal-spacer-070);
   border: 1px solid var(--adyen-internal-color-outline-primary);
   border-radius: var(--adyen-internal-border-radius-m);
-  background-color: var(--adyen-internal-color-background-primary);
-  color: var(--adyen-internal-color-label-primary);
-  resize: vertical;
-}
-
-._hint_1e5pb_33 {
-  margin: 0;
-  font-size: var(--adyen-internal-text-caption-font-size);
-  color: var(--adyen-internal-color-label-secondary);
 }
 
-._actions_1e5pb_39 {
+._actions_1nndo_27 {
   display: flex;
   gap: var(--adyen-internal-spacer-050);
 }
 
-._error_1e5pb_44 {
+._error_1nndo_32 {
   margin: 0;
   color: var(--adyen-internal-color-label-critical);
 }
-
-._success_1e5pb_49 {
-  margin: 0;
-  color: var(--adyen-internal-color-label-success);
-}
 ._side-by-side_1oxjw_1 {
   display: flex;
   flex-direction: row;
@@ -6278,6 +6261,38 @@ dialog[open]._modal-transition-drop-in_kkggh_91 {
 ._noWrap_2yhvg_1 {
   white-space: nowrap;
 }
+.adyen-kyc-singpass-selection-cta-wrapper {
+  margin-top: var(--adyen-internal-spacer-100);
+  margin-bottom: var(--adyen-internal-spacer-024);
+}
+
+.adyen-kyc-singpass-selection-cta-button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--adyen-internal-spacer-040);
+}
+
+.adyen-kyc-singpass-selection-cta-provider-logo-container {
+  display: inline-flex;
+  height: var(--adyen-internal-spacer-080);
+  padding-top: var(--adyen-internal-spacer-020);
+}
+
+.adyen-kyc-singpass-selection-cta-provider-logo-container svg {
+  height: 100%;
+  width: 100%;
+}
+
+.adyen-kyc-singpass-selection-cta-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--adyen-internal-spacer-040);
+}
+
+.adyen-kyc-singpass-selection-cta-divider-segment {
+  flex: 1;
+}
 ._intro_11rpf_1 {
   color: var(--adyen-internal-color-label-primary);
   display: flex;