@adyen/kyc-components 2.55.0 → 2.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/es/adyen-kyc-components.es.js +1045 -502
  2. package/dist/style.css +127 -694
  3. package/dist/types/components/AdditionalInformation/VerifiedBusinessCard.d.ts +3 -1
  4. package/dist/types/components/AdditionalInformation/utils.d.ts +6 -0
  5. package/dist/types/components/BusinessSelection/types.d.ts +3 -1
  6. package/dist/types/components/Dropins/ServiceAgreementDropinComponent/components/ServiceAgreementDropinComponent.d.ts +1 -1
  7. package/dist/types/components/Dropins/ServiceAgreementDropinComponent/types.d.ts +1 -0
  8. package/dist/types/components/Dropins/types.d.ts +2 -2
  9. package/dist/types/components/EmbeddedDropins/CreateIndividualComponent/CreateIndividualComponent.d.ts +2 -1
  10. package/dist/types/components/PayoutAccount/component/CheckGuidance/CheckGuidance.d.ts +1 -0
  11. package/dist/types/components/RegistrationAddress/component/RegistrationAddressComponent.d.ts +2 -1
  12. package/dist/types/components/index.d.ts +14 -2
  13. package/dist/types/components/internal/Address/AddressComponent.d.ts +3 -0
  14. package/dist/types/components/internal/Address/AddressExperimentWrapper.d.ts +2 -0
  15. package/dist/types/components/internal/Address/components/FieldContainerComponent.d.ts +9 -0
  16. package/dist/types/components/internal/Address/types.d.ts +6 -10
  17. package/dist/types/components/internal/Address/validate.d.ts +2 -2
  18. package/dist/types/components/internal/FormFields/MultiSelectList/MultiSelectList.d.ts +1 -0
  19. package/dist/types/components/internal/FormFields/Select/Select.d.ts +2 -1
  20. package/dist/types/components/internal/FormFields/Select/components/SelectButton.d.ts +2 -1
  21. package/dist/types/components/internal/FormFields/Select/components/SelectList.d.ts +1 -0
  22. package/dist/types/components/internal/FormFields/Select/components/SelectListItem.d.ts +1 -0
  23. package/dist/types/components/internal/FormFields/Select/types.d.ts +4 -1
  24. package/dist/types/core/Context/ExperimentContext/types.d.ts +4 -1
  25. package/dist/types/core/Context/SettingsContext/types.d.ts +3 -1
  26. package/dist/types/core/SDKValidation/types.d.ts +2 -2
  27. package/dist/types/core/Services/componentApi/get-address.d.ts +2 -2
  28. package/dist/types/core/hooks/useBusinessData/types.d.ts +3 -1
  29. package/dist/types/core/hooks/useDebounce.d.ts +1 -0
  30. package/dist/types/core/models/api/address-search.d.ts +1 -8
  31. package/dist/types/core/models/api/company-search.d.ts +7 -0
  32. package/dist/types/core/models/form-rules.d.ts +2 -0
  33. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -875,73 +875,6 @@ button[disabled]:hover {
875
875
  /* #endregion */
876
876
  /* #region Inline components */
877
877
  /* #endregion */
878
- .adyen-kyc-tag {
879
- color: var(--adyen-sdk-color-label-primary, #00112c);
880
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
881
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
882
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
883
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
884
- -webkit-font-smoothing: antialiased;
885
- -moz-osx-font-smoothing: grayscale;
886
- display: inline-block;
887
- font-size: var(--adyen-sdk-text-caption-font-size, 12px);
888
- font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
889
- font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
890
- line-height: var(--adyen-sdk-text-caption-line-height, 18px);
891
- padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
892
- border-radius: var(--adyen-sdk-border-radius-s, 4px);
893
- text-decoration: none;
894
- vertical-align: baseline;
895
- white-space: nowrap;
896
- border: none;
897
- }
898
- .adyen-kyc-tag *,
899
- .adyen-kyc-tag *::before,
900
- .adyen-kyc-tag *::after {
901
- box-sizing: border-box;
902
- }
903
-
904
- .adyen-kyc-tag--grey {
905
- background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
906
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
907
- }
908
-
909
- .adyen-kyc-tag--blue {
910
- background: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
911
- color: var(--adyen-sdk-color-label-on-background-highlight-weak, #0063d7);
912
- }
913
-
914
- .adyen-kyc-tag--orange {
915
- background: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
916
- color: var(--adyen-sdk-color-label-on-background-warning-weak, #9b5700);
917
- }
918
-
919
- .adyen-kyc-tag--red {
920
- background: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
921
- color: var(--adyen-sdk-color-label-on-background-critical-weak, #c72727);
922
- }
923
-
924
- .adyen-kyc-tag--teal {
925
- background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
926
- color: #065e79;
927
- }
928
-
929
- .adyen-kyc-tag--green {
930
- background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
931
- color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
932
- }
933
-
934
- .adyen-kyc-tag--basic {
935
- background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
936
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
937
- }/* #region Borders */
938
- /* #endregion */
939
- /* #region Z-index */
940
- /* #endregion */
941
- /* #region Timing functions */
942
- /* #endregion */
943
- /* #region Inline components */
944
- /* #endregion */
945
878
  .adyen-kyc-dropdown {
946
879
  position: relative;
947
880
  }
@@ -1019,6 +952,73 @@ button[disabled]:hover {
1019
952
  /* #endregion */
1020
953
  /* #region Inline components */
1021
954
  /* #endregion */
955
+ .adyen-kyc-tag {
956
+ color: var(--adyen-sdk-color-label-primary, #00112c);
957
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
958
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
959
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
960
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
961
+ -webkit-font-smoothing: antialiased;
962
+ -moz-osx-font-smoothing: grayscale;
963
+ display: inline-block;
964
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
965
+ font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
966
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
967
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
968
+ padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
969
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
970
+ text-decoration: none;
971
+ vertical-align: baseline;
972
+ white-space: nowrap;
973
+ border: none;
974
+ }
975
+ .adyen-kyc-tag *,
976
+ .adyen-kyc-tag *::before,
977
+ .adyen-kyc-tag *::after {
978
+ box-sizing: border-box;
979
+ }
980
+
981
+ .adyen-kyc-tag--grey {
982
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
983
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
984
+ }
985
+
986
+ .adyen-kyc-tag--blue {
987
+ background: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
988
+ color: var(--adyen-sdk-color-label-on-background-highlight-weak, #0063d7);
989
+ }
990
+
991
+ .adyen-kyc-tag--orange {
992
+ background: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
993
+ color: var(--adyen-sdk-color-label-on-background-warning-weak, #9b5700);
994
+ }
995
+
996
+ .adyen-kyc-tag--red {
997
+ background: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
998
+ color: var(--adyen-sdk-color-label-on-background-critical-weak, #c72727);
999
+ }
1000
+
1001
+ .adyen-kyc-tag--teal {
1002
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
1003
+ color: #065e79;
1004
+ }
1005
+
1006
+ .adyen-kyc-tag--green {
1007
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
1008
+ color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
1009
+ }
1010
+
1011
+ .adyen-kyc-tag--basic {
1012
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
1013
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1014
+ }/* #region Borders */
1015
+ /* #endregion */
1016
+ /* #region Z-index */
1017
+ /* #endregion */
1018
+ /* #region Timing functions */
1019
+ /* #endregion */
1020
+ /* #region Inline components */
1021
+ /* #endregion */
1022
1022
  .adyen-kyc-typography {
1023
1023
  color: var(--adyen-sdk-color-label-primary, #00112c);
1024
1024
  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -1860,7 +1860,13 @@ button[disabled]:hover {
1860
1860
 
1861
1861
  .adyen-kyc-list--ordered {
1862
1862
  list-style-type: decimal;
1863
- }.adyen-kyc-search-address {
1863
+ }fieldset {
1864
+ border: none;
1865
+ padding: 0;
1866
+ margin: 0;
1867
+ }
1868
+
1869
+ .adyen-kyc-search-address {
1864
1870
  display: flex;
1865
1871
  flex-direction: column;
1866
1872
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
@@ -1951,43 +1957,7 @@ button[disabled]:hover {
1951
1957
  height: auto !important;
1952
1958
  }
1953
1959
 
1954
- /* stylelint-enable selector-class-pattern */.adyen-kyc-loading-input__form {
1955
- opacity: 1;
1956
- }
1957
- .adyen-kyc-loading-input__form--loading-opacity0 {
1958
- opacity: 0;
1959
- }
1960
- .adyen-kyc-loading-input__form--loading-opacity0-1 {
1961
- opacity: 0.1;
1962
- }
1963
- .adyen-kyc-loading-input__form--loading-opacity0-2 {
1964
- opacity: 0.2;
1965
- }
1966
- .adyen-kyc-loading-input__form--loading-opacity0-3 {
1967
- opacity: 0.3;
1968
- }
1969
- .adyen-kyc-loading-input__form--loading-opacity0-4 {
1970
- opacity: 0.4;
1971
- }
1972
- .adyen-kyc-loading-input__form--loading-opacity0-5 {
1973
- opacity: 0.5;
1974
- }
1975
- .adyen-kyc-loading-input__form--loading-opacity0-6 {
1976
- opacity: 0.6;
1977
- }
1978
- .adyen-kyc-loading-input__form--loading-opacity0-7 {
1979
- opacity: 0.7;
1980
- }
1981
- .adyen-kyc-loading-input__form--loading-opacity0-8 {
1982
- opacity: 0.8;
1983
- }
1984
- .adyen-kyc-loading-input__form--loading-opacity0-9 {
1985
- opacity: 0.9;
1986
- }
1987
- .adyen-kyc-loading-input__form--loading-opacity1 {
1988
- opacity: 1;
1989
- }
1990
- .adyen-kyc-loading-input__loader {
1960
+ /* stylelint-enable selector-class-pattern */.adyen-kyc-loader-wrapper-loader {
1991
1961
  display: none;
1992
1962
  height: 100%;
1993
1963
  left: 0;
@@ -1996,7 +1966,8 @@ button[disabled]:hover {
1996
1966
  width: 100%;
1997
1967
  z-index: 1;
1998
1968
  }
1999
- .adyen-kyc-loading-input__loader--active {
1969
+
1970
+ .adyen-kyc-loader-wrapper-loader-active {
2000
1971
  display: block;
2001
1972
  }.adyen-kyc-id-verification-method__guidance {
2002
1973
  color: var(--adyen-sdk-color-label-secondary, #5c687c);
@@ -2291,7 +2262,6 @@ button[disabled]:hover {
2291
2262
  }.adyen-kyc-verified-business-card {
2292
2263
  display: flex;
2293
2264
  flex-direction: column;
2294
- gap: var(--adyen-sdk-spacer-080, 20px);
2295
2265
  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
2296
2266
  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
2297
2267
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
@@ -2303,7 +2273,24 @@ button[disabled]:hover {
2303
2273
  .adyen-kyc-verified-business-card__address a {
2304
2274
  color: var(--adyen-sdk-color-label-primary, #00112c);
2305
2275
  }
2306
- .adyen-kyc-verified-business-card__button {
2276
+ .adyen-kyc-verified-business-card__content {
2277
+ display: flex;
2278
+ flex-direction: column;
2279
+ gap: var(--adyen-sdk-spacer-080, 20px);
2280
+ margin-bottom: var(--adyen-sdk-spacer-080, 20px);
2281
+ transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
2282
+ }
2283
+ .adyen-kyc-verified-business-card__content--collapsed {
2284
+ overflow: hidden;
2285
+ max-height: 0;
2286
+ opacity: 0;
2287
+ margin: 0;
2288
+ padding-left: var(--adyen-sdk-spacer-080, 20px);
2289
+ }
2290
+ .adyen-kyc-verified-business-card__content--expanded {
2291
+ max-height: 480px;
2292
+ }
2293
+ .adyen-kyc-verified-business-card__expand-button {
2307
2294
  display: flex;
2308
2295
  flex-direction: row;
2309
2296
  justify-content: flex-start;
@@ -2322,28 +2309,33 @@ button[disabled]:hover {
2322
2309
  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2323
2310
  margin: var(--adyen-sdk-spacer-000, 0px);
2324
2311
  }
2325
- .adyen-kyc-structured-list__list-item {
2312
+
2313
+ .adyen-kyc-structured-list-list-item {
2326
2314
  display: flex;
2327
2315
  flex-direction: column;
2328
2316
  }
2329
- .adyen-layout-md .adyen-kyc-structured-list__list-item {
2317
+ .adyen-layout-md .adyen-kyc-structured-list-list-item {
2330
2318
  flex-direction: row;
2331
2319
  align-items: center;
2332
2320
  }
2333
- .adyen-kyc-structured-list__list-item:not(:last-of-type) {
2321
+
2322
+ .adyen-kyc-structured-list-list-item:not(:last-of-type) {
2334
2323
  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
2335
2324
  }
2336
- .adyen-kyc-structured-list__label {
2325
+
2326
+ .adyen-kyc-structured-list-label {
2337
2327
  flex: 1;
2338
2328
  color: var(--adyen-sdk-color-label-secondary, #5c687c);
2329
+ margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
2339
2330
  }
2340
- .adyen-kyc-structured-list__value {
2331
+
2332
+ .adyen-kyc-structured-list-value {
2341
2333
  flex: 1;
2342
2334
  color: var(--adyen-sdk-color-label-primary, #00112c);
2343
2335
  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
2344
2336
  overflow-x: auto;
2345
2337
  }
2346
- .adyen-layout-md .adyen-kyc-structured-list__value {
2338
+ .adyen-layout-md .adyen-kyc-structured-list-value {
2347
2339
  margin: var(--adyen-sdk-spacer-000, 0px);
2348
2340
  }.adyen-kyc-basic-information {
2349
2341
  display: flex;
@@ -2783,6 +2775,7 @@ button[disabled]:hover {
2783
2775
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
2784
2776
  -webkit-font-smoothing: antialiased;
2785
2777
  -moz-osx-font-smoothing: grayscale;
2778
+ padding: var(--adyen-sdk-spacer-100, 32px);
2786
2779
  background: var(--adyen-sdk-color-background-primary, #ffffff);
2787
2780
  display: flex;
2788
2781
  flex-direction: column;
@@ -2796,6 +2789,9 @@ button[disabled]:hover {
2796
2789
  .adyen-kyc-dropin *::after {
2797
2790
  box-sizing: border-box;
2798
2791
  }
2792
+ .adyen-layout-xs-only .adyen-kyc-dropin {
2793
+ padding: var(--adyen-sdk-spacer-040, 8px);
2794
+ }
2799
2795
  .adyen-kyc-dropin-container {
2800
2796
  position: relative;
2801
2797
  min-height: 480px;
@@ -2854,12 +2850,8 @@ button[disabled]:hover {
2854
2850
  /* #endregion */
2855
2851
  /* #region Inline components */
2856
2852
  /* #endregion */
2857
- .adyen-kyc-loading-input__form .adyen-kyc-form-navigation {
2858
- width: 100%;
2859
- }
2860
-
2861
2853
  .adyen-kyc-form-navigation {
2862
- width: 27%;
2854
+ width: 100%;
2863
2855
  }
2864
2856
  .adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
2865
2857
  display: none;
@@ -3950,19 +3942,19 @@ button[disabled]:hover {
3950
3942
  height: 100%;
3951
3943
  background-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
3952
3944
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
3953
- animation: 2s ease-in-out 0.5s infinite normal none running skeleton;
3945
+ animation: 2s ease-in-out 0.5s infinite normal none running adyen-kyc-skeleton;
3954
3946
  }
3955
3947
 
3956
- .adyen-kyc-skeleton__circle {
3948
+ .adyen-kyc-skeleton-circle {
3957
3949
  border-radius: 50%;
3958
3950
  }
3959
3951
 
3960
- .adyen-kyc-skeleton__text {
3952
+ .adyen-kyc-skeleton-text {
3961
3953
  height: 1em !important;
3962
3954
  margin: 0.2em 0 !important;
3963
3955
  }
3964
3956
 
3965
- @keyframes skeleton {
3957
+ @keyframes adyen-kyc-skeleton {
3966
3958
  0% {
3967
3959
  opacity: 1;
3968
3960
  }
@@ -3997,23 +3989,27 @@ button[disabled]:hover {
3997
3989
  text-align: left;
3998
3990
  padding: var(--adyen-sdk-spacer-040, 8px);
3999
3991
  }
4000
- .adyen-kyc-embedded-status--loading {
3992
+
3993
+ .adyen-kyc-embedded-status-loading {
4001
3994
  cursor: default;
4002
3995
  }
4003
- .adyen-kyc-embedded-status--loading .adyen-kyc-embedded-status__avatar {
3996
+
3997
+ .adyen-kyc-embedded-status-loading .adyen-kyc-embedded-status-avatar {
4004
3998
  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4005
3999
  border: none;
4006
4000
  }
4007
- .adyen-kyc-embedded-status--light .adyen-kyc-embedded-status__avatar {
4001
+
4002
+ .adyen-kyc-embedded-status-light .adyen-kyc-embedded-status-avatar {
4008
4003
  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4009
4004
  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
4010
4005
  color: var(--adyen-sdk-color-label-primary, #00112c);
4011
4006
  }
4012
- .adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status--loading) {
4007
+
4008
+ .adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) {
4013
4009
  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
4014
4010
  }
4015
4011
 
4016
- .adyen-kyc-embedded-status__avatar {
4012
+ .adyen-kyc-embedded-status-avatar {
4017
4013
  display: flex;
4018
4014
  justify-content: center;
4019
4015
  align-items: center;
@@ -4023,11 +4019,11 @@ button[disabled]:hover {
4023
4019
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4024
4020
  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
4025
4021
  }
4026
- .adyen-kyc-embedded-status__avatar .adyen-kyc-embedded-status__icon svg {
4022
+ .adyen-kyc-embedded-status-avatar .adyen-kyc-embedded-status-icon svg {
4027
4023
  height: 100%;
4028
4024
  }
4029
4025
 
4030
- .adyen-kyc-embedded-status__info {
4026
+ .adyen-kyc-embedded-status-info {
4031
4027
  display: flex;
4032
4028
  flex-direction: column;
4033
4029
  flex: 1;
@@ -4085,571 +4081,8 @@ button[disabled]:hover {
4085
4081
  .adyen-view-verification-status__button {
4086
4082
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
4087
4083
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
4088
- }/* #region Borders */
4089
- /* #endregion */
4090
- /* #region Z-index */
4091
- /* #endregion */
4092
- /* #region Timing functions */
4093
- /* #endregion */
4094
- /* #region Inline components */
4095
- /* #endregion */
4096
- .adyen-kyc-u-display-flex {
4097
- display: flex !important;
4098
- }
4099
-
4100
- .adyen-kyc-u-display-inline-flex {
4101
- display: inline-flex !important;
4102
- }
4103
-
4104
- .adyen-kyc-u-flex-direction-row {
4105
- flex-direction: row !important;
4106
- }
4107
-
4108
- .adyen-kyc-u-flex-direction-row-reverse {
4109
- flex-direction: row-reverse !important;
4110
- }
4111
-
4112
- .adyen-kyc-u-flex-direction-column {
4113
- flex-direction: column !important;
4114
- }
4115
-
4116
- .adyen-kyc-u-flex-direction-column-reverse {
4117
- flex-direction: column-reverse !important;
4118
- }
4119
-
4120
- .adyen-kyc-u-flex-wrap-wrap {
4121
- flex-wrap: wrap !important;
4122
- }
4123
-
4124
- .adyen-kyc-u-flex-wrap-nowrap {
4125
- flex-wrap: nowrap !important;
4126
- }
4127
-
4128
- .adyen-kyc-u-align-items-start {
4129
- align-items: start !important;
4130
- }
4131
-
4132
- .adyen-kyc-u-align-items-flex-start {
4133
- align-items: flex-start !important;
4134
- }
4135
-
4136
- .adyen-kyc-u-align-items-flex-end {
4137
- align-items: flex-end !important;
4138
- }
4139
-
4140
- .adyen-kyc-u-align-items-center {
4141
- align-items: center !important;
4142
- }
4143
-
4144
- .adyen-kyc-u-align-items-stretch {
4145
- align-items: stretch !important;
4146
- }
4147
-
4148
- .adyen-kyc-u-align-items-baseline {
4149
- align-items: baseline !important;
4150
- }
4151
-
4152
- .adyen-kyc-u-align-items-end {
4153
- align-items: end !important;
4154
- }
4155
-
4156
- .adyen-kyc-u-justify-content-center {
4157
- justify-content: center !important;
4158
- }
4159
-
4160
- .adyen-kyc-u-justify-content-flex-start {
4161
- justify-content: flex-start !important;
4162
- }
4163
-
4164
- .adyen-kyc-u-justify-content-flex-end {
4165
- justify-content: flex-end !important;
4166
- }
4167
-
4168
- .adyen-kyc-u-justify-content-start {
4169
- justify-content: start !important;
4170
- }
4171
-
4172
- .adyen-kyc-u-justify-content-end {
4173
- justify-content: end !important;
4174
- }
4175
-
4176
- .adyen-kyc-u-justify-content-left {
4177
- justify-content: left !important;
4178
- }
4179
-
4180
- .adyen-kyc-u-justify-content-right {
4181
- justify-content: right !important;
4182
- }
4183
-
4184
- .adyen-kyc-u-justify-content-space-between {
4185
- justify-content: space-between !important;
4186
- }
4187
-
4188
- .adyen-kyc-u-justify-content-space-around {
4189
- justify-content: space-around !important;
4190
- }
4191
-
4192
- .adyen-kyc-u-justify-content-space-evenly {
4193
- justify-content: space-evenly !important;
4194
- }
4195
-
4196
- .adyen-kyc-u-justify-content-stretch {
4197
- justify-content: stretch !important;
4198
- }
4199
-
4200
- .adyen-kyc-u-flex-1 {
4201
- flex: 1 !important;
4202
- }
4203
-
4204
- .adyen-kyc-u-flex-2 {
4205
- flex: 2 !important;
4206
- }
4207
-
4208
- .adyen-kyc-u-flex-3 {
4209
- flex: 3 !important;
4210
- }
4211
-
4212
- .adyen-kyc-u-flex-4 {
4213
- flex: 4 !important;
4214
- }
4215
-
4216
- .adyen-kyc-u-width-full {
4217
- width: 100% !important;
4218
- }
4219
-
4220
- .adyen-kyc-u-margin-auto {
4221
- margin: auto !important;
4222
- }
4223
-
4224
- .adyen-kyc-u-margin-bottom-auto {
4225
- margin-bottom: auto !important;
4226
- }
4227
-
4228
- .adyen-kyc-u-margin-left-auto {
4229
- margin-left: auto !important;
4230
- }
4231
-
4232
- .adyen-kyc-u-margin-right-auto {
4233
- margin-right: auto !important;
4234
- }
4235
-
4236
- .adyen-kyc-u-margin-top-auto {
4237
- margin-top: auto !important;
4238
- }
4239
-
4240
- .adyen-kyc-u-margin-x-auto {
4241
- margin-left: auto !important;
4242
- margin-right: auto !important;
4243
- }
4244
-
4245
- .adyen-kyc-u-margin-y-auto {
4246
- margin-bottom: auto !important;
4247
- margin-top: auto !important;
4248
- }
4249
-
4250
- .adyen-kyc-u-margin-0 {
4251
- margin: var(--adyen-sdk-spacer-000, 0px) !important;
4252
- }
4253
-
4254
- .adyen-kyc-u-margin-bottom-0 {
4255
- margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
4256
- }
4257
-
4258
- .adyen-kyc-u-margin-left-0 {
4259
- margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
4260
- }
4261
-
4262
- .adyen-kyc-u-margin-right-0 {
4263
- margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
4264
- }
4265
-
4266
- .adyen-kyc-u-margin-top-0 {
4267
- margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
4268
- }
4269
-
4270
- .adyen-kyc-u-margin-x-0 {
4271
- margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
4272
- margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
4273
- }
4274
-
4275
- .adyen-kyc-u-margin-y-0 {
4276
- margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
4277
- margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
4278
- }
4279
-
4280
- .adyen-kyc-u-margin-2 {
4281
- margin: var(--adyen-sdk-spacer-010, 2px) !important;
4282
- }
4283
-
4284
- .adyen-kyc-u-margin-bottom-2 {
4285
- margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
4286
- }
4287
-
4288
- .adyen-kyc-u-margin-left-2 {
4289
- margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
4290
- }
4291
-
4292
- .adyen-kyc-u-margin-right-2 {
4293
- margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
4294
- }
4295
-
4296
- .adyen-kyc-u-margin-top-2 {
4297
- margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
4298
- }
4299
-
4300
- .adyen-kyc-u-margin-x-2 {
4301
- margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
4302
- margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
4303
- }
4304
-
4305
- .adyen-kyc-u-margin-y-2 {
4306
- margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
4307
- margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
4308
- }
4309
-
4310
- .adyen-kyc-u-margin-4 {
4311
- margin: var(--adyen-sdk-spacer-020, 4px) !important;
4312
- }
4313
-
4314
- .adyen-kyc-u-margin-bottom-4 {
4315
- margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
4316
- }
4317
-
4318
- .adyen-kyc-u-margin-left-4 {
4319
- margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
4320
- }
4321
-
4322
- .adyen-kyc-u-margin-right-4 {
4323
- margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
4324
- }
4325
-
4326
- .adyen-kyc-u-margin-top-4 {
4327
- margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
4328
- }
4329
-
4330
- .adyen-kyc-u-margin-x-4 {
4331
- margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
4332
- margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
4333
- }
4334
-
4335
- .adyen-kyc-u-margin-y-4 {
4336
- margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
4337
- margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
4338
- }
4339
-
4340
- .adyen-kyc-u-margin-6 {
4341
- margin: var(--adyen-sdk-spacer-030, 6px) !important;
4342
- }
4343
-
4344
- .adyen-kyc-u-margin-bottom-6 {
4345
- margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
4346
- }
4347
-
4348
- .adyen-kyc-u-margin-left-6 {
4349
- margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
4350
- }
4351
-
4352
- .adyen-kyc-u-margin-right-6 {
4353
- margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
4354
- }
4355
-
4356
- .adyen-kyc-u-margin-top-6 {
4357
- margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
4358
- }
4359
-
4360
- .adyen-kyc-u-margin-x-6 {
4361
- margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
4362
- margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
4363
- }
4364
-
4365
- .adyen-kyc-u-margin-y-6 {
4366
- margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
4367
- margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
4368
- }
4369
-
4370
- .adyen-kyc-u-margin-8 {
4371
- margin: var(--adyen-sdk-spacer-040, 8px) !important;
4372
- }
4373
-
4374
- .adyen-kyc-u-margin-bottom-8 {
4375
- margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
4376
- }
4377
-
4378
- .adyen-kyc-u-margin-left-8 {
4379
- margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
4380
- }
4381
-
4382
- .adyen-kyc-u-margin-right-8 {
4383
- margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
4384
- }
4385
-
4386
- .adyen-kyc-u-margin-top-8 {
4387
- margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
4388
- }
4389
-
4390
- .adyen-kyc-u-margin-x-8 {
4391
- margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
4392
- margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
4393
- }
4394
-
4395
- .adyen-kyc-u-margin-y-8 {
4396
- margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
4397
- margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
4398
- }
4399
-
4400
- .adyen-kyc-u-margin-10 {
4401
- margin: var(--adyen-sdk-spacer-050, 10px) !important;
4402
- }
4403
-
4404
- .adyen-kyc-u-margin-bottom-10 {
4405
- margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
4406
- }
4407
-
4408
- .adyen-kyc-u-margin-left-10 {
4409
- margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
4410
- }
4411
-
4412
- .adyen-kyc-u-margin-right-10 {
4413
- margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
4414
- }
4415
-
4416
- .adyen-kyc-u-margin-top-10 {
4417
- margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
4418
- }
4419
-
4420
- .adyen-kyc-u-margin-x-10 {
4421
- margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
4422
- margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
4423
- }
4424
-
4425
- .adyen-kyc-u-margin-y-10 {
4426
- margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
4427
- margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
4428
- }
4429
-
4430
- .adyen-kyc-u-margin-12 {
4431
- margin: var(--adyen-sdk-spacer-060, 12px) !important;
4432
- }
4433
-
4434
- .adyen-kyc-u-margin-bottom-12 {
4435
- margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
4436
- }
4437
-
4438
- .adyen-kyc-u-margin-left-12 {
4439
- margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
4440
- }
4441
-
4442
- .adyen-kyc-u-margin-right-12 {
4443
- margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
4444
- }
4445
-
4446
- .adyen-kyc-u-margin-top-12 {
4447
- margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
4448
- }
4449
-
4450
- .adyen-kyc-u-margin-x-12 {
4451
- margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
4452
- margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
4453
- }
4454
-
4455
- .adyen-kyc-u-margin-y-12 {
4456
- margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
4457
- margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
4458
- }
4459
-
4460
- .adyen-kyc-u-margin-16 {
4461
- margin: var(--adyen-sdk-spacer-070, 16px) !important;
4462
- }
4463
-
4464
- .adyen-kyc-u-margin-bottom-16 {
4465
- margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
4466
- }
4467
-
4468
- .adyen-kyc-u-margin-left-16 {
4469
- margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
4470
- }
4471
-
4472
- .adyen-kyc-u-margin-right-16 {
4473
- margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
4474
- }
4475
-
4476
- .adyen-kyc-u-margin-top-16 {
4477
- margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
4478
- }
4479
-
4480
- .adyen-kyc-u-margin-x-16 {
4481
- margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
4482
- margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
4483
- }
4484
-
4485
- .adyen-kyc-u-margin-y-16 {
4486
- margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
4487
- margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
4488
- }
4489
-
4490
- .adyen-kyc-u-margin-20 {
4491
- margin: var(--adyen-sdk-spacer-080, 20px) !important;
4492
- }
4493
-
4494
- .adyen-kyc-u-margin-bottom-20 {
4495
- margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
4496
- }
4497
-
4498
- .adyen-kyc-u-margin-left-20 {
4499
- margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
4500
- }
4501
-
4502
- .adyen-kyc-u-margin-right-20 {
4503
- margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
4504
- }
4505
-
4506
- .adyen-kyc-u-margin-top-20 {
4507
- margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
4508
- }
4509
-
4510
- .adyen-kyc-u-margin-x-20 {
4511
- margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
4512
- margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
4513
- }
4514
-
4515
- .adyen-kyc-u-margin-y-20 {
4516
- margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
4517
- margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
4518
- }
4519
-
4520
- .adyen-kyc-u-margin-24 {
4521
- margin: var(--adyen-sdk-spacer-090, 24px) !important;
4522
- }
4523
-
4524
- .adyen-kyc-u-margin-bottom-24 {
4525
- margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
4526
- }
4527
-
4528
- .adyen-kyc-u-margin-left-24 {
4529
- margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
4530
- }
4531
-
4532
- .adyen-kyc-u-margin-right-24 {
4533
- margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
4534
- }
4535
-
4536
- .adyen-kyc-u-margin-top-24 {
4537
- margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
4538
- }
4539
-
4540
- .adyen-kyc-u-margin-x-24 {
4541
- margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
4542
- margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
4543
- }
4544
-
4545
- .adyen-kyc-u-margin-y-24 {
4546
- margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
4547
- margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
4548
- }
4549
-
4550
- .adyen-kyc-u-margin-32 {
4551
- margin: var(--adyen-sdk-spacer-100, 32px) !important;
4552
- }
4553
-
4554
- .adyen-kyc-u-margin-bottom-32 {
4555
- margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
4556
- }
4557
-
4558
- .adyen-kyc-u-margin-left-32 {
4559
- margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
4560
- }
4561
-
4562
- .adyen-kyc-u-margin-right-32 {
4563
- margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
4564
- }
4565
-
4566
- .adyen-kyc-u-margin-top-32 {
4567
- margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
4568
- }
4569
-
4570
- .adyen-kyc-u-margin-x-32 {
4571
- margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
4572
- margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
4573
- }
4574
-
4575
- .adyen-kyc-u-margin-y-32 {
4576
- margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
4577
- margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
4578
- }
4579
-
4580
- .adyen-kyc-u-margin-40 {
4581
- margin: var(--adyen-sdk-spacer-110, 40px) !important;
4582
- }
4583
-
4584
- .adyen-kyc-u-margin-bottom-40 {
4585
- margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
4586
- }
4587
-
4588
- .adyen-kyc-u-margin-left-40 {
4589
- margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
4590
- }
4591
-
4592
- .adyen-kyc-u-margin-right-40 {
4593
- margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
4594
- }
4595
-
4596
- .adyen-kyc-u-margin-top-40 {
4597
- margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
4598
- }
4599
-
4600
- .adyen-kyc-u-margin-x-40 {
4601
- margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
4602
- margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
4603
- }
4604
-
4605
- .adyen-kyc-u-margin-y-40 {
4606
- margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
4607
- margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
4608
- }
4609
-
4610
- .adyen-kyc-u-margin-48 {
4611
- margin: var(--adyen-sdk-spacer-120, 48px) !important;
4612
- }
4613
-
4614
- .adyen-kyc-u-margin-bottom-48 {
4615
- margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
4616
- }
4617
-
4618
- .adyen-kyc-u-margin-left-48 {
4619
- margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
4620
- }
4621
-
4622
- .adyen-kyc-u-margin-right-48 {
4623
- margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
4624
- }
4625
-
4626
- .adyen-kyc-u-margin-top-48 {
4627
- margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
4628
- }
4629
-
4630
- .adyen-kyc-u-margin-x-48 {
4631
- margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
4632
- margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
4633
- }
4634
-
4635
- .adyen-kyc-u-margin-y-48 {
4636
- margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
4637
- margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
4638
- }
4639
-
4640
- .adyen-kyc-ui-element-container-wrapper {
4641
- width: 100%;
4642
- }
4643
-
4644
- .adyen-kyc-ui-element-container {
4645
- box-sizing: border-box;
4646
- background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4084
+ }.adyen-kyc-ui-element-container {
4647
4085
  position: relative;
4648
- padding: var(--adyen-sdk-spacer-100, 32px);
4649
- border-radius: var(--adyen-sdk-border-radius-m, 8px);
4650
- }
4651
- .adyen-layout-xs-only .adyen-kyc-ui-element-container {
4652
- padding: var(--adyen-sdk-spacer-040, 8px);
4653
4086
  }/* #region Borders */
4654
4087
  /* #endregion */
4655
4088
  /* #region Z-index */