@adyen/kyc-components 2.52.2 → 2.53.1

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 (26) hide show
  1. package/dist/es/adyen-kyc-components.es.js +439 -447
  2. package/dist/style.css +147 -229
  3. package/dist/types/components/BasicInformation/component/BasicInformationComponent.d.ts +1 -1
  4. package/dist/types/components/BasicInformation/types.d.ts +1 -0
  5. package/dist/types/components/BusinessDetails/types.d.ts +1 -0
  6. package/dist/types/components/BusinessSelection/BusinessInformationCard.d.ts +2 -1
  7. package/dist/types/components/BusinessSelection/component/BusinessSelectionComponent.d.ts +1 -1
  8. package/dist/types/components/BusinessSelection/types.d.ts +1 -0
  9. package/dist/types/components/Dropins/BusinessDetailsDropin/types.d.ts +1 -1
  10. package/dist/types/components/Dropins/CompanyDropin/components/CompanyDropinComponent.d.ts +1 -1
  11. package/dist/types/components/Dropins/CompanySearchDropin/components/CompanySearchDropinComponent.d.ts +1 -1
  12. package/dist/types/components/Dropins/FormWrapper/FormWrapper.d.ts +2 -1
  13. package/dist/types/components/StepProgressIndicator/StepProgressIndicator.d.ts +8 -0
  14. package/dist/types/components/{internal → embedded-ui}/EmbeddedStatus/EmbeddedStatus.d.ts +2 -2
  15. package/dist/types/components/{internal → embedded-ui}/EmbeddedStatus/statusToTag.d.ts +1 -1
  16. package/dist/types/components/internal/Modal/Modal.d.ts +7 -16
  17. package/dist/types/components/internal/StructuredList/StructuredList.d.ts +10 -0
  18. package/dist/types/components/internal/Svg/svgs.d.ts +2 -3
  19. package/dist/types/core/hooks/singpass/useSingpassMyInfoLogin.d.ts +1 -2
  20. package/dist/types/core/hooks/useBusinessData/types.d.ts +1 -0
  21. package/dist/types/core/hooks/useFormComposer.d.ts +1 -0
  22. package/package.json +1 -1
  23. package/dist/es/owners-DT55tjrZ.js +0 -5
  24. package/dist/es/signatory-BUpU_luQ.js +0 -10
  25. package/dist/es/user-business-BZ3Ko-Oi.js +0 -11
  26. package/dist/types/components/internal/NewModal/Modal.d.ts +0 -11
package/dist/style.css CHANGED
@@ -744,7 +744,6 @@ button[disabled]:hover {
744
744
  .adyen-kyc-dropdown-list {
745
745
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
746
746
  box-shadow: var(--adyen-sdk-shadow-medium-border, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 0px 0px 1px rgba(0, 17, 44, 0.06));
747
- max-height: 145px;
748
747
  z-index: 2;
749
748
  }
750
749
  .adyen-kyc-dropdown-list .adyen-kyc-checkbox__helper-text {
@@ -992,6 +991,11 @@ button[disabled]:hover {
992
991
  width: 100%;
993
992
  z-index: 1;
994
993
  }
994
+ .adyen-kyc-dropdown-list__transformer {
995
+ position: relative;
996
+ padding: 0;
997
+ margin: 0;
998
+ }
995
999
 
996
1000
  .adyen-kyc-dropdown-list.adyen-kyc-dropdown-list--active {
997
1001
  display: block;
@@ -1647,58 +1651,55 @@ button[disabled]:hover {
1647
1651
  /* #endregion */
1648
1652
  .adyen-kyc-document-guidance {
1649
1653
  overflow: auto;
1654
+ container-type: inline-size;
1650
1655
  }
1651
1656
 
1652
- .adyen-layout-xs-only .adyen-kyc-document-guidance__container {
1657
+ .adyen-kyc-document-guidance__container {
1653
1658
  display: grid;
1654
- grid-template-columns: repeat(2, 1fr);
1655
- gap: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-020, 4px);
1656
- }
1657
- .adyen-layout-md .adyen-kyc-document-guidance__container {
1658
- display: flex;
1659
- justify-content: space-between;
1660
- gap: var(--adyen-sdk-spacer-090, 24px);
1661
- min-width: 576px;
1659
+ grid-template-columns: repeat(auto-fill, 50%);
1662
1660
  }
1663
1661
 
1662
+ @container (min-width: 560px) {
1663
+ .adyen-kyc-document-guidance__container {
1664
+ grid-template-columns: repeat(auto-fill, 25%);
1665
+ }
1666
+ }
1664
1667
  .adyen-kyc-document-guidance__item {
1665
1668
  display: flex;
1666
1669
  flex-direction: column;
1667
1670
  align-items: center;
1668
- margin: var(--adyen-sdk-spacer-000, 0px) auto;
1671
+ margin: var(--adyen-sdk-spacer-060, 12px);
1669
1672
  }
1670
- .adyen-layout-md .adyen-kyc-document-guidance__item {
1671
- margin: var(--adyen-sdk-spacer-000, 0px);
1673
+ @container (max-width: 560px) {
1674
+ .adyen-kyc-document-guidance__item .adyen-kyc-document-guidance__container {
1675
+ margin: var(--adyen-sdk-spacer-000, 0px);
1676
+ }
1672
1677
  }
1673
- .adyen-kyc-document-guidance__item svg {
1674
- height: 100px;
1678
+
1679
+ .adyen-kyc-document-guidance__item > span {
1680
+ height: auto;
1681
+ width: 100px;
1675
1682
  }
1676
1683
 
1677
1684
  .adyen-kyc-document-guidance__description {
1678
1685
  display: flex;
1679
- align-items: center;
1686
+ gap: var(--adyen-sdk-spacer-040, 8px);
1680
1687
  margin-top: var(--adyen-sdk-spacer-010, 2px);
1681
- width: 100%;
1682
- font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1688
+ color: var(--adyen-sdk-color-label-on-color, #ffffff);
1689
+ }
1690
+
1691
+ .adyen-kyc-document-guidance__description-text {
1692
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1683
1693
  }
1684
1694
 
1685
1695
  .adyen-kyc-document-guidance__icon {
1686
- display: flex;
1687
- margin-right: var(--adyen-sdk-spacer-040, 8px);
1688
1696
  height: 16px;
1689
1697
  width: 16px;
1690
- color: var(--adyen-sdk-color-background-primary, #ffffff);
1691
- padding: var(--adyen-sdk-spacer-020, 4px);
1692
1698
  border-radius: 50%;
1693
- }
1694
- .adyen-kyc-document-guidance__icon--valid {
1695
1699
  background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
1696
1700
  }
1697
1701
  .adyen-kyc-document-guidance__icon--invalid {
1698
1702
  background-color: var(--adyen-sdk-color-background-critical-strong, #e22d2d);
1699
- }
1700
- .adyen-kyc-document-guidance__icon svg {
1701
- height: 8px;
1702
1703
  }/* #region Borders */
1703
1704
  /* #endregion */
1704
1705
  /* #region Z-index */
@@ -2269,22 +2270,6 @@ button[disabled]:hover {
2269
2270
  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
2270
2271
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
2271
2272
  }
2272
- .adyen-kyc-verified-business-card__data-title {
2273
- min-width: 180px;
2274
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
2275
- }
2276
- .adyen-kyc-verified-business-card ul {
2277
- display: flex;
2278
- flex-direction: column;
2279
- padding: 0;
2280
- margin: 0;
2281
- list-style: none;
2282
- gap: var(--adyen-sdk-spacer-040, 8px);
2283
- }
2284
- .adyen-kyc-verified-business-card ul li {
2285
- display: flex;
2286
- width: 100%;
2287
- }
2288
2273
  .adyen-kyc-verified-business-card__address {
2289
2274
  display: flex;
2290
2275
  flex-direction: column;
@@ -2297,6 +2282,43 @@ button[disabled]:hover {
2297
2282
  flex-direction: row;
2298
2283
  justify-content: flex-start;
2299
2284
  text-decoration: underline;
2285
+ }/* #region Borders */
2286
+ /* #endregion */
2287
+ /* #region Z-index */
2288
+ /* #endregion */
2289
+ /* #region Timing functions */
2290
+ /* #endregion */
2291
+ /* #region Inline components */
2292
+ /* #endregion */
2293
+ .adyen-kyc-structured-list {
2294
+ width: 100%;
2295
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2296
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2297
+ margin: var(--adyen-sdk-spacer-000, 0px);
2298
+ }
2299
+ .adyen-kyc-structured-list__list-item {
2300
+ display: flex;
2301
+ flex-direction: column;
2302
+ }
2303
+ .adyen-layout-md .adyen-kyc-structured-list__list-item {
2304
+ flex-direction: row;
2305
+ align-items: center;
2306
+ }
2307
+ .adyen-kyc-structured-list__list-item:not(:last-of-type) {
2308
+ margin-bottom: var(--adyen-sdk-spacer-060, 12px);
2309
+ }
2310
+ .adyen-kyc-structured-list__label {
2311
+ flex: 1;
2312
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2313
+ }
2314
+ .adyen-kyc-structured-list__value {
2315
+ flex: 1;
2316
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2317
+ margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
2318
+ overflow-x: auto;
2319
+ }
2320
+ .adyen-layout-md .adyen-kyc-structured-list__value {
2321
+ margin: var(--adyen-sdk-spacer-000, 0px);
2300
2322
  }.adyen-kyc-basic-information {
2301
2323
  display: flex;
2302
2324
  flex-direction: column;
@@ -2487,21 +2509,6 @@ button[disabled]:hover {
2487
2509
  min-height: 228px;
2488
2510
  justify-content: center;
2489
2511
  align-items: center;
2490
- }
2491
- .adyen-kyc-business-information__business-data {
2492
- padding: 0;
2493
- margin: 0;
2494
- list-style: none;
2495
- display: flex;
2496
- flex-direction: column;
2497
- gap: var(--adyen-sdk-spacer-040, 8px);
2498
- }
2499
- .adyen-kyc-business-information__business-data li {
2500
- display: flex;
2501
- width: 100%;
2502
- }
2503
- .adyen-kyc-business-information__business-data .adyen-kyc-business-data__key {
2504
- min-width: 180px;
2505
2512
  }.adyen-kyc-field--entityType {
2506
2513
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
2507
2514
  }
@@ -2542,7 +2549,6 @@ button[disabled]:hover {
2542
2549
  }
2543
2550
  .adyen-layout-md .adyen-kyc-form-container {
2544
2551
  flex: 1;
2545
- width: auto;
2546
2552
  }
2547
2553
 
2548
2554
  .adyen-kyc-form-wrapper--hidden {
@@ -2555,138 +2561,108 @@ button[disabled]:hover {
2555
2561
 
2556
2562
  .adyen-layout-xs-only .adyen-kyc-dropin__content-main {
2557
2563
  flex-direction: column;
2558
- }.adyen-kyc-expiry-modal__header {
2559
- font-size: var(--adyen-sdk-text-title-font-size, 16px);
2560
- font-family: var(--adyen-sdk-text-title-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2561
- font-weight: var(--adyen-sdk-text-title-font-weight, 600);
2562
- line-height: var(--adyen-sdk-text-title-line-height, 26px);
2563
- }
2564
-
2565
- .adyen-kyc-expiry-modal__footer {
2564
+ }.adyen-kyc-expiry-modal__footer {
2566
2565
  display: flex;
2567
2566
  flex-direction: row;
2568
2567
  justify-content: end;
2569
- }/* #region Borders */
2570
- /* #endregion */
2571
- /* #region Z-index */
2572
- /* #endregion */
2573
- /* #region Timing functions */
2574
- /* #endregion */
2575
- /* #region Inline components */
2576
- /* #endregion */
2577
- .adyen-kyc-modal {
2578
- color: var(--adyen-sdk-color-label-primary, #00112c);
2579
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2580
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
2581
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2582
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
2583
- -webkit-font-smoothing: antialiased;
2584
- -moz-osx-font-smoothing: grayscale;
2585
- background-color: var(--adyen-sdk-color-background-primary, #ffffff);
2586
- border-radius: var(--adyen-sdk-border-radius-l, 12px);
2587
- box-shadow: var(--adyen-sdk-shadow-low, 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02));
2568
+ }.adyen-kyc-modal {
2569
+ border: none;
2588
2570
  box-sizing: border-box;
2589
- cursor: initial;
2590
2571
  display: flex;
2591
2572
  flex-direction: column;
2592
- max-height: calc(100% - var(--adyen-sdk-spacer-120, 48px) * 2);
2593
- position: absolute;
2594
- width: 600px;
2595
- z-index: 500;
2596
- padding: var(--adyen-sdk-spacer-090, 24px);
2597
- gap: var(--adyen-sdk-spacer-070, 16px);
2573
+ width: 100%;
2574
+ background-color: transparent;
2575
+ padding: 0;
2576
+ max-width: 680px;
2577
+ height: 100%;
2578
+ max-height: 640px;
2598
2579
  }
2599
- .adyen-kyc-modal *,
2600
- .adyen-kyc-modal *::before,
2601
- .adyen-kyc-modal *::after {
2602
- box-sizing: border-box;
2580
+ @media screen and (max-width: 480px) {
2581
+ .adyen-kyc-modal {
2582
+ width: 100%;
2583
+ height: 100%;
2584
+ max-width: 100%;
2585
+ max-height: 100%;
2586
+ margin: 0;
2587
+ border-radius: 0;
2588
+ }
2603
2589
  }
2604
2590
 
2605
- .adyen-kyc-modal--small {
2606
- width: 480px;
2591
+ .adyen-kyc-modal__wrapper {
2592
+ overflow: hidden;
2593
+ --adyen-kyc-modal-internal-margin: var(--adyen-sdk-spacer-070, 16px);
2594
+ background: var(--adyen-sdk-color-background-primary, #ffffff);
2595
+ margin: var(--adyen-kyc-modal-internal-margin);
2596
+ border-radius: var(--adyen-sdk-border-radius-xl, 24px);
2597
+ height: calc(100% - var(--adyen-kyc-modal-internal-margin) * 2);
2598
+ display: flex;
2599
+ flex-direction: column;
2600
+ position: relative;
2601
+ }
2602
+ @media screen and (max-width: 480px) {
2603
+ .adyen-kyc-modal__wrapper {
2604
+ --adyen-kyc-modal-internal-margin: 0px;
2605
+ border-radius: 0;
2606
+ }
2607
2607
  }
2608
2608
 
2609
- .adyen-kyc-modal--large {
2610
- width: 800px;
2609
+ .adyen-kyc-modal::backdrop {
2610
+ background-color: var(--adyen-sdk-color-support-overlay, #00112c);
2611
+ opacity: 0.75;
2611
2612
  }
2612
- .adyen-kyc-modal--large .adyen-kyc-modal__header {
2613
- border-bottom: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2613
+
2614
+ .adyen-kyc-modal-top-bar {
2615
+ width: calc(100% - var(--adyen-kyc-modal-internal-margin));
2616
+ position: absolute;
2617
+ top: 0;
2618
+ padding: var(--adyen-sdk-spacer-050, 10px);
2619
+ padding-bottom: 0;
2620
+ display: flex;
2621
+ justify-content: space-between;
2614
2622
  }
2615
- .adyen-kyc-modal--large .adyen-kyc-modal__footer {
2616
- border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2623
+
2624
+ .adyen-kyc-modal__content,
2625
+ .adyen-kyc-modal__header,
2626
+ .adyen-kyc-modal__footer {
2627
+ padding: var(--adyen-sdk-spacer-060, 12px);
2617
2628
  }
2618
2629
 
2619
- .adyen-kyc-modal__close {
2620
- position: absolute;
2621
- top: var(--adyen-sdk-spacer-060, 12px);
2622
- right: var(--adyen-sdk-spacer-060, 12px);
2623
- text-decoration: none;
2624
- z-index: 100;
2630
+ .adyen-kyc-modal__header {
2631
+ padding-top: var(--adyen-sdk-spacer-070, 16px);
2632
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
2633
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
2625
2634
  }
2626
2635
 
2627
2636
  .adyen-kyc-modal__content {
2628
2637
  flex: 1;
2629
2638
  overflow-y: auto;
2630
2639
  }
2631
- .adyen-kyc-modal__header ~ .adyen-kyc-modal__content {
2632
- padding-top: var(--adyen-sdk-spacer-000, 0px);
2633
- }
2634
- .adyen-kyc-modal__content > *:first-child,
2635
- .adyen-kyc-modal__content > *:last-child {
2636
- margin-bottom: var(--adyen-sdk-spacer-000, 0px);
2637
- padding-bottom: var(--adyen-sdk-spacer-000, 0px);
2638
- }
2639
- .adyen-kyc-modal__content:not(:last-child) {
2640
- padding-bottom: var(--adyen-sdk-spacer-000, 0px);
2641
- }
2642
2640
 
2643
2641
  .adyen-kyc-modal__footer {
2644
- background-color: var(--adyen-sdk-color-background-primary, #ffffff);
2645
- border-radius: 0 0 var(--adyen-sdk-border-radius-l, 12px) var(--adyen-sdk-border-radius-l, 12px);
2642
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2646
2643
  }
2647
2644
 
2648
- .adyen-kyc-slide-fade-enter-active {
2649
- transition: all 0.3s ease;
2650
- }
2651
- .adyen-kyc-slide-fade-enter {
2652
- opacity: 0;
2653
- transform: translateY(10px);
2645
+ .adyen-kyc-modal--small {
2646
+ max-width: 520px;
2647
+ min-height: 220px;
2648
+ height: 20vh;
2654
2649
  }
2655
2650
 
2656
- .adyen-kyc-overlay {
2657
- z-index: 600;
2658
- }/* #region Borders */
2659
- /* #endregion */
2660
- /* #region Z-index */
2661
- /* #endregion */
2662
- /* #region Timing functions */
2663
- /* #endregion */
2664
- /* #region Inline components */
2665
- /* #endregion */
2666
- .adyen-kyc-overlay {
2667
- align-items: center;
2668
- background-color: rgba(204, 204, 204, 0.8);
2669
- bottom: 0;
2670
- display: flex;
2671
- height: 100%;
2672
- justify-content: center;
2673
- left: 0;
2674
- opacity: 0;
2675
- position: absolute;
2676
- right: 0;
2677
- top: 0;
2678
- visibility: hidden;
2679
- width: 100%;
2680
- z-index: 400;
2651
+ .adyen-kyc-modal--large {
2652
+ max-width: 960px;
2653
+ height: 70vh;
2654
+ width: 70vw;
2681
2655
  }
2682
2656
 
2683
- .adyen-kyc-overlay--transparent {
2684
- background-color: transparent;
2657
+ .adyen-kyc-modal--fullscreen {
2658
+ margin: 0;
2659
+ max-width: 100vw;
2660
+ height: 100vh;
2661
+ width: 100vw;
2685
2662
  }
2686
2663
 
2687
- .adyen-kyc-overlay--visible {
2688
- opacity: 1;
2689
- visibility: visible;
2664
+ .adyen-kyc-modal--with-backButton .adyen-kyc-modal__header {
2665
+ padding-left: var(--adyen-sdk-spacer-140, 64px);
2690
2666
  }/* #region Borders */
2691
2667
  /* #endregion */
2692
2668
  /* #region Z-index */
@@ -2796,76 +2772,10 @@ button[disabled]:hover {
2796
2772
  .adyen-kyc-dropin__main {
2797
2773
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
2798
2774
  width: 100%;
2799
- }.adyen-kyc-modal2 {
2800
- border: none;
2801
- box-sizing: border-box;
2802
- display: flex;
2803
- flex-direction: column;
2804
- width: 100%;
2805
- background-color: transparent;
2806
- padding: 0;
2807
- max-width: 600px;
2808
- height: 100%;
2809
- max-height: 640px;
2810
- }
2811
- @media screen and (max-width: 480px) {
2812
- .adyen-kyc-modal2 {
2813
- width: 100%;
2814
- height: 100%;
2815
- max-width: 100%;
2816
- max-height: 100%;
2817
- margin: 0;
2818
- border-radius: 0;
2819
- }
2820
- }
2821
-
2822
- .adyen-kyc-modal2-wrapper {
2823
- overflow: hidden;
2824
- --adyen-kyc-modal2-internal-margin: 16px;
2825
- background: var(--adyen-sdk-color-background-primary, #ffffff);
2826
- margin: var(--adyen-kyc-modal2-internal-margin);
2827
- border-radius: 20px;
2828
- height: calc(100% - var(--adyen-kyc-modal2-internal-margin) * 2);
2829
- display: flex;
2830
- flex-direction: column;
2831
- position: relative;
2832
- }
2833
- @media screen and (max-width: 480px) {
2834
- .adyen-kyc-modal2-wrapper {
2835
- --adyen-kyc-modal2-internal-margin: 0;
2836
- }
2837
- }
2838
-
2839
- .adyen-kyc-modal2::backdrop {
2840
- background-color: var(--adyen-sdk-color-support-overlay, #00112c);
2841
- opacity: 0.75;
2842
- }
2843
-
2844
- .adyen-kyc-modal2-top-bar {
2845
- width: 100%;
2846
- position: absolute;
2847
- top: 0;
2848
- padding: var(--adyen-sdk-spacer-050, 10px);
2849
- padding-bottom: 0;
2850
- display: flex;
2851
- justify-content: space-between;
2852
2775
  }
2853
2776
 
2854
- .adyen-kyc-modal2-content {
2855
- flex: 1;
2856
- overflow-y: auto;
2857
- }
2858
-
2859
- .adyen-kyc-modal2-footer {
2860
- padding: var(--adyen-sdk-spacer-050, 10px) 0;
2861
- border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2862
- }
2863
-
2864
- .adyen-kyc-modal2__fullscreen {
2865
- margin: 0;
2866
- max-width: 100vw;
2867
- height: 100vh;
2868
- width: 100vw;
2777
+ .adyen-kyc-modal-content {
2778
+ padding: 0;
2869
2779
  }.adyen-kyc-embedded-action-bar {
2870
2780
  display: flex;
2871
2781
  justify-content: space-between;
@@ -4031,7 +3941,9 @@ button[disabled]:hover {
4031
3941
  justify-content: space-between;
4032
3942
  align-items: center;
4033
3943
  gap: var(--adyen-sdk-spacer-070, 16px);
4034
- width: 420px;
3944
+ width: 100%;
3945
+ min-width: 250px;
3946
+ max-width: 650px;
4035
3947
  cursor: pointer;
4036
3948
  /* html button default styling removal */
4037
3949
  border: none;
@@ -4040,6 +3952,9 @@ button[disabled]:hover {
4040
3952
  text-align: left;
4041
3953
  padding: var(--adyen-sdk-spacer-040, 8px);
4042
3954
  }
3955
+ .adyen-kyc-embedded-status--loading {
3956
+ cursor: default;
3957
+ }
4043
3958
  .adyen-kyc-embedded-status--loading .adyen-kyc-embedded-status__avatar {
4044
3959
  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4045
3960
  border: none;
@@ -4826,16 +4741,19 @@ button[disabled]:hover {
4826
4741
  .adyen-kyc-debug-modal__header {
4827
4742
  font-size: var(--adyen-sdk-text-title-font-size, 16px);
4828
4743
  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
4744
+ margin: 1em;
4829
4745
  }
4830
4746
 
4831
4747
  .adyen-kyc-debug-modal__content {
4832
4748
  display: flex;
4833
4749
  flex-direction: column;
4834
4750
  gap: 24px;
4751
+ margin: 1em;
4835
4752
  }
4836
4753
 
4837
4754
  .adyen-kyc-debug-modal__meta {
4838
4755
  display: flex;
4839
4756
  flex-direction: column;
4840
4757
  gap: 4px;
4758
+ margin: 1em;
4841
4759
  }
@@ -3,4 +3,4 @@ import type { BusinessDetailsSchema } from '../../BusinessDetails/types';
3
3
  import type { BasicInformationProps, BasicInformationSchema } from '../types';
4
4
  export declare const BASIC_INFORMATION_FORM_ID: keyof BusinessDetailsSchema;
5
5
  export declare const BASIC_INFORMATION_FIELDS: Array<keyof BasicInformationSchema>;
6
- export declare function BasicInformationComponent({ data, labels, placeholders, helperText, heading, description, readOnly, shouldValidate, formVerificationErrors, fieldValidationErrors, allFields, requiredFields, obscuredFields, optionalFields, readOnlyFields, trustedFields, country, companyType, isTopLevelEntity, className, showBusinessSelection, showCompanyStructure, isActiveForm, isSearching, isFetching, isVerifying, isClearingTrustedData, searchResults, invalidTin, verifiedBusiness, fetchBusinessData, verifyBusinessData, proceedToManualDataEntry, handleNextClick, setShowBusinessSelection, setShowCompanyStructure, }: BasicInformationProps): import("preact").JSX.Element;
6
+ export declare function BasicInformationComponent({ data, labels, placeholders, helperText, heading, description, readOnly, shouldValidate, formVerificationErrors, fieldValidationErrors, allFields, requiredFields, obscuredFields, optionalFields, readOnlyFields, trustedFields, country, companyType, isTopLevelEntity, className, showBusinessSelection, showCompanyStructure, isActiveForm, isSearching, isFetching, isVerifying, isClearingTrustedData, searchResults, invalidTin, verifiedBusiness, fetchBusinessData, verifyBusinessData, proceedToManualDataEntry, handleNextClick, setShowBusinessSelection, setShowCompanyStructure, resetTinVerification, }: BasicInformationProps): import("preact").JSX.Element;
@@ -27,6 +27,7 @@ export interface BasicInformationProps extends BaseInnerFormProps<BasicInformati
27
27
  invalidTin: boolean;
28
28
  verifiedBusiness: CompanyDatasetResponse | undefined;
29
29
  className?: string;
30
+ resetTinVerification: () => void;
30
31
  fetchBusinessData: (company: CompanySearchResult) => Promise<CompanyDatasetResponse | undefined>;
31
32
  verifyBusinessData: (data: CompanyDatasetResponse, tin: string) => Promise<boolean | undefined>;
32
33
  proceedToManualDataEntry: () => Promise<void>;
@@ -39,6 +39,7 @@ export interface BusinessDetailsProps extends BaseOuterFormProps<BusinessDetails
39
39
  handleNextClick: () => void;
40
40
  handleAddressSearch: DropinAPIHandlers['handleAddressSearch'];
41
41
  handleFindAddress: DropinAPIHandlers['handleFindAddress'];
42
+ resetTinVerification: () => void;
42
43
  searchForBusiness: (data: CompanySearchRequest) => Promise<CompanySearchResult[] | undefined>;
43
44
  fetchBusinessData: (company: CompanySearchResult) => Promise<CompanyDatasetResponse | undefined>;
44
45
  verifyBusinessData: (data: CompanyDatasetResponse, tin: string) => Promise<boolean | undefined>;
@@ -9,8 +9,9 @@ interface BusinessInformationCardProps {
9
9
  failedToLoad: boolean;
10
10
  invalidTin: boolean;
11
11
  setIsBusinessSelection: Dispatch<StateUpdater<boolean>>;
12
+ resetTinVerification: () => void;
12
13
  handleSelectBusiness: (result: CompanySearchResult) => Promise<void>;
13
14
  handleConfirmSelection: (data: CompanyDatasetResponse) => Promise<void>;
14
15
  }
15
- export declare function BusinessInformationCard({ result, selectedBusinessId, currentBusinessSelection, fetching, failedToLoad, invalidTin, setIsBusinessSelection, handleSelectBusiness, handleConfirmSelection, }: BusinessInformationCardProps): import("preact").JSX.Element;
16
+ export declare function BusinessInformationCard({ result, selectedBusinessId, currentBusinessSelection, fetching, failedToLoad, invalidTin, resetTinVerification, setIsBusinessSelection, handleSelectBusiness, handleConfirmSelection, }: BusinessInformationCardProps): import("preact").JSX.Element;
16
17
  export {};
@@ -1,3 +1,3 @@
1
1
  import './BusinessSelectionComponent.scss';
2
2
  import type { BusinessSelectionProps } from '../types';
3
- export declare function BusinessSelectionComponent({ showCompanyStructure, isSearching, isFetching, isVerifying, isClearingTrustedData, searchResults, invalidTin, fetchBusinessData, verifyBusinessData, proceedToManualDataEntry, handleNextClick, setIsBusinessSelection, setShowCompanyStructure, }: BusinessSelectionProps): import("preact").JSX.Element;
3
+ export declare function BusinessSelectionComponent({ showCompanyStructure, isSearching, isFetching, isVerifying, isClearingTrustedData, searchResults, invalidTin, fetchBusinessData, verifyBusinessData, resetTinVerification, proceedToManualDataEntry, handleNextClick, setIsBusinessSelection, setShowCompanyStructure, }: BusinessSelectionProps): import("preact").JSX.Element;
@@ -11,6 +11,7 @@ export interface BusinessSelectionProps {
11
11
  invalidTin: boolean;
12
12
  fetchBusinessData: (company: CompanySearchResult) => Promise<CompanyDatasetResponse | undefined>;
13
13
  verifyBusinessData: (data: CompanyDatasetResponse, tin: string) => Promise<boolean | undefined>;
14
+ resetTinVerification: () => void;
14
15
  proceedToManualDataEntry: () => Promise<void>;
15
16
  handleNextClick: () => void;
16
17
  setIsBusinessSelection: Dispatch<StateUpdater<boolean>>;
@@ -32,7 +32,7 @@ export type BusinessDetailsDropinApihandler = Required<Pick<DropinAPIHandlers, '
32
32
  handleVerifyTin?: DropinAPIHandlers['handleVerifyTin'];
33
33
  handleClearCompanyData?: DropinAPIHandlers['handleClearCompanyData'];
34
34
  };
35
- export type BusinessDetailsDropin = Omit<BusinessDetailsProps, 'isTopLevelEntity' | 'baseTrackingPayload' | 'handleNextClick' | 'showCompanyStructure' | 'showBusinessSelection' | 'isSearching' | 'isFetching' | 'isVerifying' | 'isClearingTrustedData' | 'searchResults' | 'invalidTin' | 'verifiedBusiness' | 'searchForBusiness' | 'fetchBusinessData' | 'verifyBusinessData' | 'proceedToManualDataEntry' | 'setShowBusinessSelection' | 'setShowCompanyStructure'>;
35
+ export type BusinessDetailsDropin = Omit<BusinessDetailsProps, 'isTopLevelEntity' | 'baseTrackingPayload' | 'handleNextClick' | 'showCompanyStructure' | 'showBusinessSelection' | 'isSearching' | 'isFetching' | 'isVerifying' | 'isClearingTrustedData' | 'searchResults' | 'invalidTin' | 'resetTinVerification' | 'verifiedBusiness' | 'searchForBusiness' | 'fetchBusinessData' | 'verifyBusinessData' | 'proceedToManualDataEntry' | 'setShowBusinessSelection' | 'setShowCompanyStructure'>;
36
36
  export interface BusinessDetailsDropinProps extends BusinessDetailsDropin, BusinessDetailsDropinApihandler, DropinProps {
37
37
  legalEntityResponse: ExistingLegalEntity;
38
38
  isTargetLegalEntityType?: boolean;
@@ -1,2 +1,2 @@
1
1
  import type { CompanyDropinProps } from '../types';
2
- export declare function CompanyDropinComponent({ country: parentCountry, problems: propProblems, hideDropinLayout, taskName, capabilities, homeButtonLabel, taskType, trackingConfig, associationDetail, parentLegalEntity, legalEntityResponse, isTargetLegalEntityType, onSubmit: onExternalSubmit, handleCreateDocument, handleGetDocument, handleUpdateDocument, handleAddressSearch, handleFindAddress, handleCreateLegalEntity, handleUpdateLegalEntity, handleHomeClick, onTypeSwitch, onChange, trustedFieldsProvider, }: CompanyDropinProps): import("preact").JSX.Element;
2
+ export declare function CompanyDropinComponent({ country: parentCountry, problems: propProblems, hideDropinLayout, taskName, capabilities, homeButtonLabel, taskType, trackingConfig, associationDetail, parentLegalEntity, legalEntityResponse, isTargetLegalEntityType, onSubmit: onExternalSubmit, handleCreateDocument, handleGetDocument, handleUpdateDocument, handleAddressSearch, handleFindAddress, handleCreateLegalEntity, handleUpdateLegalEntity, handleHomeClick, onTypeSwitch, onChange, trustedFields, }: CompanyDropinProps): import("preact").JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import type { CompanySearchDropinProps } from '../types';
2
- export declare function CompanySearchDropinComponent({ country: parentCountry, problems: propProblems, legalEntityResponse, isTargetLegalEntityType, parentLegalEntity, trackingConfig, taskType, capabilities, taskName, hideDropinLayout, homeButtonLabel, accountHolder, onChange, onSubmit: onExternalSubmit, handleHomeClick, handleCreateDocument, handleGetDocument, handleUpdateDocument, handleAddressSearch, handleFindAddress, handleUpdateLegalEntity, handleCompanyIndexSearch, handleCompanyDeepSearch, handleGetCompanyDataset, handleRefreshCompanyDataset, handleVerifyTin, onTypeSwitch, }: CompanySearchDropinProps): import("preact").JSX.Element;
2
+ export declare function CompanySearchDropinComponent({ country: parentCountry, problems: propProblems, legalEntityResponse, isTargetLegalEntityType, parentLegalEntity, trackingConfig, taskType, capabilities, taskName, hideDropinLayout, homeButtonLabel, accountHolder, onChange, onSubmit: onExternalSubmit, handleHomeClick, handleCreateDocument, handleGetDocument, handleUpdateDocument, handleAddressSearch, handleFindAddress, handleUpdateLegalEntity, handleCompanyIndexSearch, handleCompanyDeepSearch, handleGetCompanyDataset, handleRefreshCompanyDataset, handleVerifyTin, onTypeSwitch, trustedFields, }: CompanySearchDropinProps): import("preact").JSX.Element;
@@ -40,5 +40,6 @@ export interface FormWrapperProps {
40
40
  canSubmit?: boolean;
41
41
  onSubmit(): Promise<void>;
42
42
  currentStep?: number;
43
+ totalSteps?: number;
43
44
  }
44
- export declare const FormWrapper: ({ summary, taskName, children, handleNextClick, handleBackClick, handleHomeClick, handleCloseClick, nextButtonLabel, backButtonLabel, homeButtonLabel, loadingStatus, gotoFormByFormIndex, forms, activeForm, handleGetIdVerificationToken, validateForm, baseTrackingPayload, hideDropinLayout, hideFooter, hideHomeButton, hideBackButton, hideNextButton, hideNavigation, asModal, canSubmit, onSubmit, problems, currentStep, }: FormWrapperProps) => import("preact").JSX.Element;
45
+ export declare const FormWrapper: ({ summary, taskName, children, handleNextClick, handleBackClick, handleHomeClick, handleCloseClick, nextButtonLabel, backButtonLabel, homeButtonLabel, loadingStatus, gotoFormByFormIndex, forms, activeForm, handleGetIdVerificationToken, validateForm, baseTrackingPayload, hideDropinLayout, hideFooter, hideHomeButton, hideBackButton, hideNextButton, hideNavigation, asModal, canSubmit, onSubmit, problems, currentStep, totalSteps, }: FormWrapperProps) => import("preact").JSX.Element;
@@ -6,4 +6,12 @@ export interface StepProgressIndicatorProps {
6
6
  fillBefore?: boolean;
7
7
  thick?: boolean;
8
8
  }
9
+ /**
10
+ * Progress indicator showing step progession in a process
11
+ *
12
+ * @param activeStepIndex - zero based index for active steps, add 1 to make it human-readable
13
+ * @param stepsCount - total number of steps
14
+ * @param fillBefore - fills everything between 0 and activeStepIndex, not just last step
15
+ * @param thick - makes the bar thicker
16
+ */
9
17
  export declare const StepProgressIndicator: ({ activeStepIndex, stepsCount, fillBefore, thick, }: StepProgressIndicatorProps) => JSX.Element | null;
@@ -1,8 +1,8 @@
1
1
  import type { OnboardingStatus } from '../../../core/models/api/view-verification-status';
2
2
  import type { Translatable, TranslationKey } from '../../../language/types';
3
+ import type { IconName } from '../../internal/Icon/Icon';
4
+ import { type TagVariant } from '../../internal/Tag/Tag';
3
5
  import type { TaskStatus } from '../../TaskList/types';
4
- import type { IconName } from '../Icon/Icon';
5
- import { type TagVariant } from '../Tag/Tag';
6
6
  export interface EmbeddedStatusProps {
7
7
  title?: string;
8
8
  subtitle?: string;
@@ -1,7 +1,7 @@
1
1
  import { OnboardingStatus } from '../../../core/models/api/view-verification-status';
2
2
  import type { Translatable } from '../../../language/types';
3
+ import type { TagVariant } from '../../internal/Tag/Tag';
3
4
  import { TaskStatus } from '../../TaskList/types';
4
- import type { TagVariant } from '../Tag/Tag';
5
5
  /**
6
6
  * Maps a Status to Tag-compatible props
7
7
  * Similar to TaskItemStatus (without the css class overrides),