@incodetech/web 2.0.0-alpha.11 → 2.0.0-alpha.12

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 (36) hide show
  1. package/dist/aligndevicelottie-DlQCRPfM.js +29 -0
  2. package/dist/backdevicelottie-B4NgyWmX.js +29 -0
  3. package/dist/base.css +572 -14
  4. package/dist/baseTutorial-Be85FuyO.js +383 -0
  5. package/dist/blurdevicelottie-_BZRug1c.js +29 -0
  6. package/dist/email/email.es.js +4 -4
  7. package/dist/flip-animation-COR596wy.js +29 -0
  8. package/dist/flow/flow.es.js +248 -263
  9. package/dist/flow/styles.css +2088 -8
  10. package/dist/frontdevicelottie-KhKxT5n9.js +29 -0
  11. package/dist/glaredevicelottie-DLuIStvb.js +29 -0
  12. package/dist/id/id.es.js +1496 -0
  13. package/dist/id/styles.css +1587 -0
  14. package/dist/id-laser-h-BBV3r3rz.js +29 -0
  15. package/dist/id-laser-v-BTHJaSfx.js +29 -0
  16. package/dist/id-tutorial-B-F5Q28m.js +29 -0
  17. package/dist/{incodeModule-Dv8Qllrv.js → incodeModule-DR92HDjR.js} +11 -8
  18. package/dist/index.es.js +2 -2
  19. package/dist/{otpInput-BtoZe0Wz.js → otpInput-Dm1LhnDm.js} +2 -2
  20. package/dist/page-CITAo3qf.js +189 -0
  21. package/dist/passport-tutorial-CaYBFTqt.js +29 -0
  22. package/dist/phone/phone.es.js +4 -4
  23. package/dist/selfie/selfie.es.js +245 -533
  24. package/dist/selfie/styles.css +43 -0
  25. package/dist/selfieTutorial-Dm_p0ke9.js +29 -0
  26. package/dist/{setup-wNL83jmW.js → setup-BhetRn4n.js} +2 -2
  27. package/dist/spinner-CQtj_FFo.js +65 -0
  28. package/dist/themes/dark.css +145 -0
  29. package/dist/themes/light.css +145 -0
  30. package/dist/types/id.d.ts +34 -0
  31. package/dist/{uiConfig-CQ1W9cUD.js → uiConfig-DEqynrWx.js} +1 -1
  32. package/dist/{vendor-preact-CK0WeTOR.js → vendor-preact-CjD4WiuC.js} +124 -115
  33. package/package.json +11 -2
  34. package/dist/page-Dh_Zw2ik.js +0 -234
  35. package/dist/selfieTutorial-C-u5GufD.js +0 -29
  36. package/dist/title-BfO5Dlzk.js +0 -25
package/dist/base.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";
1
+ @import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@800&display=swap";
2
+
2
3
 
3
4
  /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
4
5
  @layer properties {
@@ -43,6 +44,7 @@
43
44
  }
44
45
  .IncodeComponent, .IncodeComponent * {
45
46
  box-sizing: border-box;
47
+ font-family: var(--primitive-typography-family-dm-sans), sans-serif;
46
48
  }
47
49
  .IncodeComponent {
48
50
  font-family: var(--primitive-typography-family-dm-sans), sans-serif;
@@ -86,6 +88,10 @@
86
88
  }
87
89
  @layer incode-theme;
88
90
  @layer incode-utilities {
91
+ .visible {
92
+ visibility: visible;
93
+ }
94
+
89
95
  .absolute {
90
96
  position: absolute;
91
97
  }
@@ -188,6 +194,15 @@
188
194
  }
189
195
  }
190
196
  @layer incode-base, incode-components;
197
+ @keyframes slideUp {
198
+ from {
199
+ transform: translateY(100%);
200
+ }
201
+
202
+ to {
203
+ transform: translateY(0);
204
+ }
205
+ }
191
206
  .IncodeButton {
192
207
  border-radius: var(--radius-button-primary, var(--button-primary-border-radius));
193
208
  text-align: center;
@@ -240,18 +255,24 @@
240
255
  fill: var(--surface-brand-400-static);
241
256
  }
242
257
  .IncodeButton.IncodeButtonLink {
243
- color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
244
258
  border-style: var(--tw-border-style);
245
259
  border-width: var(--border-width-none, var(--border-none));
246
260
  --tw-border-style: none;
247
- font-size: var(--text-16, var(--primitive-typography-size-16));
248
- --tw-font-weight: var(--font-weight-normal, 400);
249
- font-weight: var(--font-weight-normal, 400);
250
- background-color: #0000;
251
- border-style: none;
252
261
  width: 100%;
253
262
  height: 56px;
263
+ font-family: var(--Button-family, "DM Sans");
264
+ font-size: var(--Button-M-Underlined-font-size, 18px);
265
+ font-weight: 500;
266
+ line-height: var(--Button-M-Underlined-line-height, 18px);
267
+ letter-spacing: var(--Button-M-Underlined-letter-spacing, 0);
268
+ -webkit-text-decoration-skip-ink: none;
269
+ text-decoration-skip-ink: none;
270
+ color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
271
+ background-color: #0000;
272
+ border-style: none;
254
273
  text-decoration-line: underline;
274
+ text-decoration-style: solid;
275
+ text-decoration-thickness: auto;
255
276
  }
256
277
  .IncodeButton.IncodeButtonLink:disabled {
257
278
  cursor: not-allowed;
@@ -397,22 +418,559 @@
397
418
  height: 100%;
398
419
  display: flex;
399
420
  }
421
+ @media (min-width: 40rem) {
422
+ .IncodePageContainer .IncodePageInner {
423
+ max-width: 40rem;
424
+ }
425
+ }
426
+ @media (min-width: 48rem) {
427
+ .IncodePageContainer .IncodePageInner {
428
+ max-width: 48rem;
429
+ }
430
+ }
431
+ @media (min-width: 64rem) {
432
+ .IncodePageContainer .IncodePageInner {
433
+ max-width: 64rem;
434
+ }
435
+ }
436
+ @media (min-width: 80rem) {
437
+ .IncodePageContainer .IncodePageInner {
438
+ max-width: 80rem;
439
+ }
440
+ }
441
+ @media (min-width: 96rem) {
442
+ .IncodePageContainer .IncodePageInner {
443
+ max-width: 96rem;
444
+ }
445
+ }
446
+ @media (min-width: 48rem) {
447
+ .IncodePageContainer .IncodePageInner {
448
+ height: 840px;
449
+ }
450
+ }
451
+ @media (min-width: 40rem) {
452
+ .IncodePageContainer .IncodePageInner {
453
+ max-width: 40rem;
454
+ }
455
+ }
456
+ @media (min-width: 48rem) {
457
+ .IncodePageContainer .IncodePageInner {
458
+ max-width: 48rem;
459
+ }
460
+ }
461
+ @media (min-width: 64rem) {
462
+ .IncodePageContainer .IncodePageInner {
463
+ max-width: 64rem;
464
+ }
465
+ }
466
+ @media (min-width: 80rem) {
467
+ .IncodePageContainer .IncodePageInner {
468
+ max-width: 80rem;
469
+ }
470
+ }
471
+ @media (min-width: 96rem) {
472
+ .IncodePageContainer .IncodePageInner {
473
+ max-width: 96rem;
474
+ }
475
+ }
476
+ @media (min-width: 48rem) {
477
+ .IncodePageContainer .IncodePageInner {
478
+ height: 840px;
479
+ }
480
+ }
481
+ @media (min-width: 40rem) {
482
+ .IncodePageContainer .IncodePageInner {
483
+ max-width: 40rem;
484
+ }
485
+ }
486
+ @media (min-width: 48rem) {
487
+ .IncodePageContainer .IncodePageInner {
488
+ max-width: 48rem;
489
+ }
490
+ }
491
+ @media (min-width: 64rem) {
492
+ .IncodePageContainer .IncodePageInner {
493
+ max-width: 64rem;
494
+ }
495
+ }
496
+ @media (min-width: 80rem) {
497
+ .IncodePageContainer .IncodePageInner {
498
+ max-width: 80rem;
499
+ }
500
+ }
501
+ @media (min-width: 96rem) {
502
+ .IncodePageContainer .IncodePageInner {
503
+ max-width: 96rem;
504
+ }
505
+ }
506
+ @media (min-width: 48rem) {
507
+ .IncodePageContainer .IncodePageInner {
508
+ height: 840px;
509
+ }
510
+ }
511
+ @media (min-width: 40rem) {
512
+ .IncodePageContainer .IncodePageInner {
513
+ max-width: 40rem;
514
+ }
515
+ }
516
+ @media (min-width: 48rem) {
517
+ .IncodePageContainer .IncodePageInner {
518
+ max-width: 48rem;
519
+ }
520
+ }
521
+ @media (min-width: 64rem) {
522
+ .IncodePageContainer .IncodePageInner {
523
+ max-width: 64rem;
524
+ }
525
+ }
526
+ @media (min-width: 80rem) {
527
+ .IncodePageContainer .IncodePageInner {
528
+ max-width: 80rem;
529
+ }
530
+ }
531
+ @media (min-width: 96rem) {
532
+ .IncodePageContainer .IncodePageInner {
533
+ max-width: 96rem;
534
+ }
535
+ }
536
+ @media (min-width: 48rem) {
537
+ .IncodePageContainer .IncodePageInner {
538
+ height: 840px;
539
+ }
540
+ }
541
+ @media (min-width: 40rem) {
542
+ .IncodePageContainer .IncodePageInner {
543
+ max-width: 40rem;
544
+ }
545
+ }
546
+ @media (min-width: 48rem) {
547
+ .IncodePageContainer .IncodePageInner {
548
+ max-width: 48rem;
549
+ }
550
+ }
551
+ @media (min-width: 64rem) {
552
+ .IncodePageContainer .IncodePageInner {
553
+ max-width: 64rem;
554
+ }
555
+ }
556
+ @media (min-width: 80rem) {
557
+ .IncodePageContainer .IncodePageInner {
558
+ max-width: 80rem;
559
+ }
560
+ }
561
+ @media (min-width: 96rem) {
562
+ .IncodePageContainer .IncodePageInner {
563
+ max-width: 96rem;
564
+ }
565
+ }
566
+ @media (min-width: 48rem) {
567
+ .IncodePageContainer .IncodePageInner {
568
+ height: 840px;
569
+ }
570
+ }
571
+ @media (min-width: 40rem) {
572
+ .IncodePageContainer .IncodePageInner {
573
+ max-width: 40rem;
574
+ }
575
+ }
576
+ @media (min-width: 48rem) {
577
+ .IncodePageContainer .IncodePageInner {
578
+ max-width: 48rem;
579
+ }
580
+ }
581
+ @media (min-width: 64rem) {
582
+ .IncodePageContainer .IncodePageInner {
583
+ max-width: 64rem;
584
+ }
585
+ }
586
+ @media (min-width: 80rem) {
587
+ .IncodePageContainer .IncodePageInner {
588
+ max-width: 80rem;
589
+ }
590
+ }
591
+ @media (min-width: 96rem) {
592
+ .IncodePageContainer .IncodePageInner {
593
+ max-width: 96rem;
594
+ }
595
+ }
596
+ @media (min-width: 48rem) {
597
+ .IncodePageContainer .IncodePageInner {
598
+ height: 840px;
599
+ }
600
+ }
601
+ @media (min-width: 40rem) {
602
+ .IncodePageContainer .IncodePageInner {
603
+ max-width: 40rem;
604
+ }
605
+ }
606
+ @media (min-width: 48rem) {
607
+ .IncodePageContainer .IncodePageInner {
608
+ max-width: 48rem;
609
+ }
610
+ }
611
+ @media (min-width: 64rem) {
612
+ .IncodePageContainer .IncodePageInner {
613
+ max-width: 64rem;
614
+ }
615
+ }
616
+ @media (min-width: 80rem) {
617
+ .IncodePageContainer .IncodePageInner {
618
+ max-width: 80rem;
619
+ }
620
+ }
621
+ @media (min-width: 96rem) {
622
+ .IncodePageContainer .IncodePageInner {
623
+ max-width: 96rem;
624
+ }
625
+ }
626
+ @media (min-width: 48rem) {
627
+ .IncodePageContainer .IncodePageInner {
628
+ height: 840px;
629
+ }
630
+ }
631
+ @media (min-width: 40rem) {
632
+ .IncodePageContainer .IncodePageInner {
633
+ max-width: 40rem;
634
+ }
635
+ }
636
+ @media (min-width: 48rem) {
637
+ .IncodePageContainer .IncodePageInner {
638
+ max-width: 48rem;
639
+ }
640
+ }
641
+ @media (min-width: 64rem) {
642
+ .IncodePageContainer .IncodePageInner {
643
+ max-width: 64rem;
644
+ }
645
+ }
646
+ @media (min-width: 80rem) {
647
+ .IncodePageContainer .IncodePageInner {
648
+ max-width: 80rem;
649
+ }
650
+ }
651
+ @media (min-width: 96rem) {
652
+ .IncodePageContainer .IncodePageInner {
653
+ max-width: 96rem;
654
+ }
655
+ }
656
+ @media (min-width: 48rem) {
657
+ .IncodePageContainer .IncodePageInner {
658
+ height: 840px;
659
+ }
660
+ }
661
+ @media (min-width: 40rem) {
662
+ .IncodePageContainer .IncodePageInner {
663
+ max-width: 40rem;
664
+ }
665
+ }
666
+ @media (min-width: 48rem) {
667
+ .IncodePageContainer .IncodePageInner {
668
+ max-width: 48rem;
669
+ }
670
+ }
671
+ @media (min-width: 64rem) {
672
+ .IncodePageContainer .IncodePageInner {
673
+ max-width: 64rem;
674
+ }
675
+ }
676
+ @media (min-width: 80rem) {
677
+ .IncodePageContainer .IncodePageInner {
678
+ max-width: 80rem;
679
+ }
680
+ }
681
+ @media (min-width: 96rem) {
682
+ .IncodePageContainer .IncodePageInner {
683
+ max-width: 96rem;
684
+ }
685
+ }
686
+ @media (min-width: 48rem) {
687
+ .IncodePageContainer .IncodePageInner {
688
+ height: 840px;
689
+ }
690
+ }
691
+ @media (min-width: 40rem) {
692
+ .IncodePageContainer .IncodePageInner {
693
+ max-width: 40rem;
694
+ }
695
+ }
696
+ @media (min-width: 48rem) {
697
+ .IncodePageContainer .IncodePageInner {
698
+ max-width: 48rem;
699
+ }
700
+ }
701
+ @media (min-width: 64rem) {
702
+ .IncodePageContainer .IncodePageInner {
703
+ max-width: 64rem;
704
+ }
705
+ }
706
+ @media (min-width: 80rem) {
707
+ .IncodePageContainer .IncodePageInner {
708
+ max-width: 80rem;
709
+ }
710
+ }
711
+ @media (min-width: 96rem) {
712
+ .IncodePageContainer .IncodePageInner {
713
+ max-width: 96rem;
714
+ }
715
+ }
716
+ @media (min-width: 48rem) {
717
+ .IncodePageContainer .IncodePageInner {
718
+ height: 840px;
719
+ }
720
+ }
721
+ @media (min-width: 40rem) {
722
+ .IncodePageContainer .IncodePageInner {
723
+ max-width: 40rem;
724
+ }
725
+ }
726
+ @media (min-width: 48rem) {
727
+ .IncodePageContainer .IncodePageInner {
728
+ max-width: 48rem;
729
+ }
730
+ }
731
+ @media (min-width: 64rem) {
732
+ .IncodePageContainer .IncodePageInner {
733
+ max-width: 64rem;
734
+ }
735
+ }
736
+ @media (min-width: 80rem) {
737
+ .IncodePageContainer .IncodePageInner {
738
+ max-width: 80rem;
739
+ }
740
+ }
741
+ @media (min-width: 96rem) {
742
+ .IncodePageContainer .IncodePageInner {
743
+ max-width: 96rem;
744
+ }
745
+ }
746
+ @media (min-width: 48rem) {
747
+ .IncodePageContainer .IncodePageInner {
748
+ height: 840px;
749
+ }
750
+ }
751
+ @media (min-width: 40rem) {
752
+ .IncodePageContainer .IncodePageInner {
753
+ max-width: 40rem;
754
+ }
755
+ }
756
+ @media (min-width: 48rem) {
757
+ .IncodePageContainer .IncodePageInner {
758
+ max-width: 48rem;
759
+ }
760
+ }
761
+ @media (min-width: 64rem) {
762
+ .IncodePageContainer .IncodePageInner {
763
+ max-width: 64rem;
764
+ }
765
+ }
766
+ @media (min-width: 80rem) {
767
+ .IncodePageContainer .IncodePageInner {
768
+ max-width: 80rem;
769
+ }
770
+ }
771
+ @media (min-width: 96rem) {
772
+ .IncodePageContainer .IncodePageInner {
773
+ max-width: 96rem;
774
+ }
775
+ }
776
+ @media (min-width: 48rem) {
777
+ .IncodePageContainer .IncodePageInner {
778
+ height: 840px;
779
+ }
780
+ }
781
+ @media (min-width: 40rem) {
782
+ .IncodePageContainer .IncodePageInner {
783
+ max-width: 40rem;
784
+ }
785
+ }
786
+ @media (min-width: 48rem) {
787
+ .IncodePageContainer .IncodePageInner {
788
+ max-width: 48rem;
789
+ }
790
+ }
791
+ @media (min-width: 64rem) {
792
+ .IncodePageContainer .IncodePageInner {
793
+ max-width: 64rem;
794
+ }
795
+ }
796
+ @media (min-width: 80rem) {
797
+ .IncodePageContainer .IncodePageInner {
798
+ max-width: 80rem;
799
+ }
800
+ }
801
+ @media (min-width: 96rem) {
802
+ .IncodePageContainer .IncodePageInner {
803
+ max-width: 96rem;
804
+ }
805
+ }
806
+ @media (min-width: 48rem) {
807
+ .IncodePageContainer .IncodePageInner {
808
+ height: 840px;
809
+ }
810
+ }
811
+ @media (min-width: 40rem) {
812
+ .IncodePageContainer .IncodePageInner {
813
+ max-width: 40rem;
814
+ }
815
+ }
816
+ @media (min-width: 48rem) {
817
+ .IncodePageContainer .IncodePageInner {
818
+ max-width: 48rem;
819
+ }
820
+ }
821
+ @media (min-width: 64rem) {
822
+ .IncodePageContainer .IncodePageInner {
823
+ max-width: 64rem;
824
+ }
825
+ }
826
+ @media (min-width: 80rem) {
827
+ .IncodePageContainer .IncodePageInner {
828
+ max-width: 80rem;
829
+ }
830
+ }
831
+ @media (min-width: 96rem) {
832
+ .IncodePageContainer .IncodePageInner {
833
+ max-width: 96rem;
834
+ }
835
+ }
836
+ @media (min-width: 48rem) {
837
+ .IncodePageContainer .IncodePageInner {
838
+ height: 840px;
839
+ }
840
+ }
841
+ @media (min-width: 40rem) {
842
+ .IncodePageContainer .IncodePageInner {
843
+ max-width: 40rem;
844
+ }
845
+ }
846
+ @media (min-width: 48rem) {
847
+ .IncodePageContainer .IncodePageInner {
848
+ max-width: 48rem;
849
+ }
850
+ }
851
+ @media (min-width: 64rem) {
852
+ .IncodePageContainer .IncodePageInner {
853
+ max-width: 64rem;
854
+ }
855
+ }
856
+ @media (min-width: 80rem) {
857
+ .IncodePageContainer .IncodePageInner {
858
+ max-width: 80rem;
859
+ }
860
+ }
861
+ @media (min-width: 96rem) {
862
+ .IncodePageContainer .IncodePageInner {
863
+ max-width: 96rem;
864
+ }
865
+ }
866
+ @media (min-width: 48rem) {
867
+ .IncodePageContainer .IncodePageInner {
868
+ height: 840px;
869
+ }
870
+ }
871
+ @media (min-width: 40rem) {
872
+ .IncodePageContainer .IncodePageInner {
873
+ max-width: 40rem;
874
+ }
875
+ }
876
+ @media (min-width: 48rem) {
877
+ .IncodePageContainer .IncodePageInner {
878
+ max-width: 48rem;
879
+ }
880
+ }
881
+ @media (min-width: 64rem) {
882
+ .IncodePageContainer .IncodePageInner {
883
+ max-width: 64rem;
884
+ }
885
+ }
886
+ @media (min-width: 80rem) {
887
+ .IncodePageContainer .IncodePageInner {
888
+ max-width: 80rem;
889
+ }
890
+ }
891
+ @media (min-width: 96rem) {
892
+ .IncodePageContainer .IncodePageInner {
893
+ max-width: 96rem;
894
+ }
895
+ }
896
+ @media (min-width: 48rem) {
897
+ .IncodePageContainer .IncodePageInner {
898
+ height: 840px;
899
+ }
900
+ }
901
+ @media (min-width: 40rem) {
902
+ .IncodePageContainer .IncodePageInner {
903
+ max-width: 40rem;
904
+ }
905
+ }
906
+ @media (min-width: 48rem) {
907
+ .IncodePageContainer .IncodePageInner {
908
+ max-width: 48rem;
909
+ }
910
+ }
911
+ @media (min-width: 64rem) {
912
+ .IncodePageContainer .IncodePageInner {
913
+ max-width: 64rem;
914
+ }
915
+ }
916
+ @media (min-width: 80rem) {
917
+ .IncodePageContainer .IncodePageInner {
918
+ max-width: 80rem;
919
+ }
920
+ }
921
+ @media (min-width: 96rem) {
922
+ .IncodePageContainer .IncodePageInner {
923
+ max-width: 96rem;
924
+ }
925
+ }
926
+ @media (min-width: 48rem) {
927
+ .IncodePageContainer .IncodePageInner {
928
+ height: 840px;
929
+ }
930
+ }
400
931
  .IncodePageContainer .IncodePageInner {
401
932
  width: 100%;
933
+ }
934
+ @media (min-width: 40rem) {
935
+ .IncodePageContainer .IncodePageInner {
936
+ max-width: 40rem;
937
+ }
938
+ }
939
+ @media (min-width: 48rem) {
940
+ .IncodePageContainer .IncodePageInner {
941
+ max-width: 48rem;
942
+ }
943
+ }
944
+ @media (min-width: 64rem) {
945
+ .IncodePageContainer .IncodePageInner {
946
+ max-width: 64rem;
947
+ }
948
+ }
949
+ @media (min-width: 80rem) {
950
+ .IncodePageContainer .IncodePageInner {
951
+ max-width: 80rem;
952
+ }
953
+ }
954
+ @media (min-width: 96rem) {
955
+ .IncodePageContainer .IncodePageInner {
956
+ max-width: 96rem;
957
+ }
958
+ }
959
+ .IncodePageContainer .IncodePageInner {
402
960
  height: 100%;
403
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
404
- flex-direction: column;
405
- flex: 1;
406
961
  margin: auto;
407
- display: flex;
408
962
  }
409
- @media screen and (min-width: 767px) {
963
+ @media (min-width: 48rem) {
410
964
  .IncodePageContainer .IncodePageInner {
411
- width: 800px;
412
965
  height: 840px;
413
- margin: auto;
414
966
  }
415
967
  }
968
+ .IncodePageContainer .IncodePageInner {
969
+ padding-inline: var(--spacing-24, var(--spacing-24, 24px));
970
+ flex-direction: column;
971
+ flex: 1;
972
+ display: flex;
973
+ }
416
974
  .IncodePageContainer .IncodePageHeader {
417
975
  width: 100%;
418
976
  height: 44px;