@ory/elements-react 1.0.0-next.10 → 1.0.0-next.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.
@@ -368,6 +368,15 @@ video {
368
368
  .z-10 {
369
369
  z-index: 10;
370
370
  }
371
+ .z-50 {
372
+ z-index: 50;
373
+ }
374
+ .col-span-full {
375
+ grid-column: 1 / -1;
376
+ }
377
+ .-m-3 {
378
+ margin: -0.75rem;
379
+ }
371
380
  .mx-auto {
372
381
  margin-left: auto;
373
382
  margin-right: auto;
@@ -376,9 +385,15 @@ video {
376
385
  margin-top: auto;
377
386
  margin-bottom: auto;
378
387
  }
388
+ .mr-auto {
389
+ margin-right: auto;
390
+ }
379
391
  .mt-1 {
380
392
  margin-top: 0.25rem;
381
393
  }
394
+ .mt-16 {
395
+ margin-top: 4rem;
396
+ }
382
397
  .mt-\[2px\] {
383
398
  margin-top: 2px;
384
399
  }
@@ -397,12 +412,27 @@ video {
397
412
  .aspect-square {
398
413
  aspect-ratio: 1 / 1;
399
414
  }
415
+ .size-10 {
416
+ width: 2.5rem;
417
+ height: 2.5rem;
418
+ }
419
+ .size-8 {
420
+ width: 2rem;
421
+ height: 2rem;
422
+ }
423
+ .size-full {
424
+ width: 100%;
425
+ height: 100%;
426
+ }
400
427
  .h-10 {
401
428
  height: 2.5rem;
402
429
  }
403
430
  .h-4 {
404
431
  height: 1rem;
405
432
  }
433
+ .h-44 {
434
+ height: 11rem;
435
+ }
406
436
  .h-5 {
407
437
  height: 1.25rem;
408
438
  }
@@ -412,6 +442,12 @@ video {
412
442
  .h-full {
413
443
  height: 100%;
414
444
  }
445
+ .max-h-10 {
446
+ max-height: 2.5rem;
447
+ }
448
+ .min-h-\[72px\] {
449
+ min-height: 72px;
450
+ }
415
451
  .w-10 {
416
452
  width: 2.5rem;
417
453
  }
@@ -427,12 +463,24 @@ video {
427
463
  .w-8 {
428
464
  width: 2rem;
429
465
  }
466
+ .w-80 {
467
+ width: 20rem;
468
+ }
430
469
  .w-full {
431
470
  width: 100%;
432
471
  }
433
472
  .w-px {
434
473
  width: 1px;
435
474
  }
475
+ .min-w-\[19rem\] {
476
+ min-width: 19rem;
477
+ }
478
+ .max-w-\[60\%\] {
479
+ max-width: 60%;
480
+ }
481
+ .max-w-\[896px\] {
482
+ max-width: 896px;
483
+ }
436
484
  .max-w-sm {
437
485
  max-width: 24rem;
438
486
  }
@@ -467,23 +515,19 @@ video {
467
515
  .animate-spin {
468
516
  animation: spin 1s linear infinite;
469
517
  }
470
- .cursor-not-allowed {
471
- cursor: not-allowed;
472
- }
473
518
  .cursor-pointer {
474
519
  cursor: pointer;
475
520
  }
521
+ .select-none {
522
+ -webkit-user-select: none;
523
+ -moz-user-select: none;
524
+ user-select: none;
525
+ }
476
526
  .appearance-none {
477
527
  -webkit-appearance: none;
478
528
  -moz-appearance: none;
479
529
  appearance: none;
480
530
  }
481
- .auto-cols-fr {
482
- grid-auto-columns: minmax(0, 1fr);
483
- }
484
- .grid-flow-col {
485
- grid-auto-flow: column;
486
- }
487
531
  .grid-cols-1 {
488
532
  grid-template-columns: repeat(1, minmax(0, 1fr));
489
533
  }
@@ -493,12 +537,27 @@ video {
493
537
  .grid-cols-4 {
494
538
  grid-template-columns: repeat(4, minmax(0, 1fr));
495
539
  }
540
+ .grid-cols-6 {
541
+ grid-template-columns: repeat(6, minmax(0, 1fr));
542
+ }
496
543
  .flex-col {
497
544
  flex-direction: column;
498
545
  }
546
+ .flex-wrap {
547
+ flex-wrap: wrap;
548
+ }
549
+ .items-start {
550
+ align-items: flex-start;
551
+ }
552
+ .items-end {
553
+ align-items: flex-end;
554
+ }
499
555
  .items-center {
500
556
  align-items: center;
501
557
  }
558
+ .justify-end {
559
+ justify-content: flex-end;
560
+ }
502
561
  .justify-center {
503
562
  justify-content: center;
504
563
  }
@@ -508,12 +567,18 @@ video {
508
567
  .gap-1 {
509
568
  gap: 0.25rem;
510
569
  }
570
+ .gap-12 {
571
+ gap: 3rem;
572
+ }
511
573
  .gap-2 {
512
574
  gap: 0.5rem;
513
575
  }
514
576
  .gap-3 {
515
577
  gap: 0.75rem;
516
578
  }
579
+ .gap-4 {
580
+ gap: 1rem;
581
+ }
517
582
  .gap-6 {
518
583
  gap: 1.5rem;
519
584
  }
@@ -525,9 +590,15 @@ video {
525
590
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
526
591
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
527
592
  }
593
+ .self-center {
594
+ align-self: center;
595
+ }
528
596
  .self-stretch {
529
597
  align-self: stretch;
530
598
  }
599
+ .overflow-hidden {
600
+ overflow: hidden;
601
+ }
531
602
  .rounded {
532
603
  border-radius: 0.25rem;
533
604
  }
@@ -543,6 +614,17 @@ video {
543
614
  .rounded-full {
544
615
  border-radius: 9999px;
545
616
  }
617
+ .rounded-xl {
618
+ border-radius: 0.75rem;
619
+ }
620
+ .rounded-b-xl {
621
+ border-bottom-right-radius: 0.75rem;
622
+ border-bottom-left-radius: 0.75rem;
623
+ }
624
+ .rounded-t-xl {
625
+ border-top-left-radius: 0.75rem;
626
+ border-top-right-radius: 0.75rem;
627
+ }
546
628
  .border {
547
629
  border-width: 1px;
548
630
  }
@@ -550,9 +632,15 @@ video {
550
632
  border-top-width: 1px;
551
633
  border-bottom-width: 1px;
552
634
  }
635
+ .border-b-0 {
636
+ border-bottom-width: 0px;
637
+ }
553
638
  .border-r {
554
639
  border-right-width: 1px;
555
640
  }
641
+ .border-t {
642
+ border-top-width: 1px;
643
+ }
556
644
  .border-solid {
557
645
  border-style: solid;
558
646
  }
@@ -568,6 +656,13 @@ video {
568
656
  .border-forms-border-default {
569
657
  border-color: var(--forms-border-default, #e2e8f0);
570
658
  }
659
+ .bg-\[white\] {
660
+ --tw-bg-opacity: 1;
661
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
662
+ }
663
+ .bg-bg-default {
664
+ background-color: var(--bg-default, #f8fafc);
665
+ }
571
666
  .bg-branding-bg-default {
572
667
  --tw-bg-opacity: 1;
573
668
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -578,18 +673,22 @@ video {
578
673
  .bg-button-primary-bg-default {
579
674
  background-color: var(--button-primary-bg-default, #1e293b);
580
675
  }
581
- .bg-button-primary-bg-hover {
582
- background-color: var(--button-primary-bg-hover, #0f172a);
583
- }
584
676
  .bg-button-secondary-bg-default {
585
677
  background-color: var(--button-secondary-bg-default, #ffffff);
586
678
  }
587
679
  .bg-dialog-bg-default {
588
680
  background-color: var(--dialog-bg-default, #ffffff);
589
681
  }
682
+ .bg-dialog-bg-subtle {
683
+ background-color: var(--dialog-bg-subtle, #f8fafc);
684
+ }
590
685
  .bg-forms-bg-default {
591
686
  background-color: var(--forms-bg-default, #ffffff);
592
687
  }
688
+ .object-contain {
689
+ -o-object-fit: contain;
690
+ object-fit: contain;
691
+ }
593
692
  .object-fill {
594
693
  -o-object-fit: fill;
595
694
  object-fit: fill;
@@ -597,6 +696,12 @@ video {
597
696
  .p-2 {
598
697
  padding: 0.5rem;
599
698
  }
699
+ .p-6 {
700
+ padding: 1.5rem;
701
+ }
702
+ .p-8 {
703
+ padding: 2rem;
704
+ }
600
705
  .px-1\.5 {
601
706
  padding-left: 0.375rem;
602
707
  padding-right: 0.375rem;
@@ -613,6 +718,14 @@ video {
613
718
  padding-left: 1rem;
614
719
  padding-right: 1rem;
615
720
  }
721
+ .px-5 {
722
+ padding-left: 1.25rem;
723
+ padding-right: 1.25rem;
724
+ }
725
+ .px-6 {
726
+ padding-left: 1.5rem;
727
+ padding-right: 1.5rem;
728
+ }
616
729
  .px-8 {
617
730
  padding-left: 2rem;
618
731
  padding-right: 2rem;
@@ -641,10 +754,21 @@ video {
641
754
  padding-top: 0.75rem;
642
755
  padding-bottom: 0.75rem;
643
756
  }
757
+ .py-4 {
758
+ padding-top: 1rem;
759
+ padding-bottom: 1rem;
760
+ }
644
761
  .py-4\.5 {
645
762
  padding-top: 1.125rem;
646
763
  padding-bottom: 1.125rem;
647
764
  }
765
+ .py-8 {
766
+ padding-top: 2rem;
767
+ padding-bottom: 2rem;
768
+ }
769
+ .pl-8 {
770
+ padding-left: 2rem;
771
+ }
648
772
  .text-left {
649
773
  text-align: left;
650
774
  }
@@ -694,10 +818,6 @@ video {
694
818
  .leading-tight {
695
819
  line-height: 1.25;
696
820
  }
697
- .text-branding-fg-default {
698
- --tw-text-opacity: 1;
699
- color: rgb(255 255 255 / var(--tw-text-opacity));
700
- }
701
821
  .text-button-identifier-fg-default {
702
822
  color: var(--button-identifier-fg-default, #0f172a);
703
823
  }
@@ -707,15 +827,15 @@ video {
707
827
  .text-button-primary-fg-default {
708
828
  color: var(--button-primary-fg-default, #ffffff);
709
829
  }
710
- .text-button-primary-fg-hover {
711
- color: var(--button-primary-fg-hover, #ffffff);
712
- }
713
830
  .text-button-secondary-fg-default {
714
831
  color: var(--button-secondary-fg-default, #0f172a);
715
832
  }
716
833
  .text-dialog-fg-default {
717
834
  color: var(--dialog-fg-default, #0f172a);
718
835
  }
836
+ .text-dialog-fg-mute {
837
+ color: var(--dialog-fg-mute, #64748b);
838
+ }
719
839
  .text-dialog-fg-subtle {
720
840
  color: var(--dialog-fg-subtle, #334155);
721
841
  }
@@ -734,12 +854,19 @@ video {
734
854
  .text-links-link-default {
735
855
  color: var(--links-link-default, #4f46e5);
736
856
  }
857
+ .text-links-link-mute-default {
858
+ color: var(--links-link-mute-default, #64748b);
859
+ }
737
860
  .antialiased {
738
861
  -webkit-font-smoothing: antialiased;
739
862
  -moz-osx-font-smoothing: grayscale;
740
863
  }
741
- .opacity-20 {
742
- opacity: 0.2;
864
+ .mix-blend-multiply {
865
+ mix-blend-mode: multiply;
866
+ }
867
+ .outline-none {
868
+ outline: 2px solid transparent;
869
+ outline-offset: 2px;
743
870
  }
744
871
  .ring-1 {
745
872
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -757,6 +884,18 @@ video {
757
884
  var(--tw-ring-shadow),
758
885
  var(--tw-shadow, 0 0 #0000);
759
886
  }
887
+ .ring-inset {
888
+ --tw-ring-inset: inset;
889
+ }
890
+ .ring-button-primary-border-default {
891
+ --tw-ring-color: var(--button-primary-border-default, #ffffff00);
892
+ }
893
+ .ring-button-secondary-border-default {
894
+ --tw-ring-color: var(--button-secondary-border-default, #e2e8f0);
895
+ }
896
+ .ring-dialog-border-default {
897
+ --tw-ring-color: var(--dialog-border-default, #e2e8f0);
898
+ }
760
899
  .ring-forms-border-default {
761
900
  --tw-ring-color: var(--forms-border-default, #e2e8f0);
762
901
  }
@@ -779,20 +918,21 @@ video {
779
918
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
780
919
  transition-duration: 150ms;
781
920
  }
782
- .transition-opacity {
783
- transition-property: opacity;
784
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
785
- transition-duration: 150ms;
786
- }
787
921
  .duration-100 {
788
922
  transition-duration: 100ms;
789
923
  }
790
924
  .ease-linear {
791
925
  transition-timing-function: linear;
792
926
  }
927
+ .first\:border-0:first-child {
928
+ border-width: 0px;
929
+ }
793
930
  .hover\:border-button-identifier-border-hover:hover {
794
931
  border-color: var(--button-identifier-border-hover, #e2e8f0);
795
932
  }
933
+ .hover\:border-button-social-border-hover:hover {
934
+ border-color: var(--button-social-border-hover, #e2e8f0);
935
+ }
796
936
  .hover\:border-forms-border-hover:hover {
797
937
  border-color: var(--forms-border-hover, #e2e8f0);
798
938
  }
@@ -814,18 +954,118 @@ video {
814
954
  .hover\:text-button-secondary-fg-hover:hover {
815
955
  color: var(--button-secondary-fg-hover, #334155);
816
956
  }
957
+ .hover\:text-links-link-hover:hover {
958
+ color: var(--links-link-hover, #0f172a);
959
+ }
960
+ .hover\:text-links-link-mute-hover:hover {
961
+ color: var(--links-link-mute-hover, #0f172a);
962
+ }
817
963
  .hover\:underline:hover {
818
964
  text-decoration-line: underline;
819
965
  }
966
+ .hover\:ring-button-primary-border-hover:hover {
967
+ --tw-ring-color: var(--button-primary-border-hover, #ffffff00);
968
+ }
969
+ .hover\:ring-button-secondary-border-hover:hover {
970
+ --tw-ring-color: var(--button-secondary-border-hover, #e2e8f0);
971
+ }
820
972
  .disabled\:cursor-not-allowed:disabled {
821
973
  cursor: not-allowed;
822
974
  }
975
+ .disabled\:bg-button-primary-bg-disabled:disabled {
976
+ background-color: var(--button-primary-bg-disabled, #64748b);
977
+ }
978
+ .disabled\:bg-button-secondary-bg-disabled:disabled {
979
+ background-color: var(--button-secondary-bg-disabled, #f8fafc);
980
+ }
981
+ .disabled\:bg-forms-bg-disabled:disabled {
982
+ background-color: var(--forms-bg-disabled, #f8fafc);
983
+ }
984
+ .disabled\:text-button-primary-fg-disabled:disabled {
985
+ color: var(--button-primary-fg-disabled, #94a3b8);
986
+ }
987
+ .disabled\:text-button-secondary-fg-disabled:disabled {
988
+ color: var(--button-secondary-fg-disabled, #94a3b8);
989
+ }
990
+ .disabled\:text-forms-fg-disabled:disabled {
991
+ color: var(--forms-fg-disabled, #94a3b8);
992
+ }
993
+ .disabled\:ring-button-primary-border-disabled:disabled {
994
+ --tw-ring-color: var(--button-primary-border-disabled, #ffffff00);
995
+ }
996
+ .disabled\:ring-button-secondary-border-disabled:disabled {
997
+ --tw-ring-color: var(--button-secondary-border-disabled, #e2e8f0);
998
+ }
999
+ .disabled\:hover\:bg-button-primary-bg-default:hover:disabled {
1000
+ background-color: var(--button-primary-bg-default, #1e293b);
1001
+ }
823
1002
  .peer:checked ~ .peer-checked\:block {
824
1003
  display: block;
825
1004
  }
826
1005
  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
827
1006
  opacity: 0.5;
828
1007
  }
1008
+ .data-\[disabled\]\:pointer-events-none[data-disabled] {
1009
+ pointer-events: none;
1010
+ }
1011
+ .data-\[disabled\]\:border-button-secondary-border-disabled[data-disabled] {
1012
+ border-color: var(--button-secondary-border-disabled, #e2e8f0);
1013
+ }
1014
+ .data-\[disabled\]\:bg-button-secondary-bg-disabled[data-disabled] {
1015
+ background-color: var(--button-secondary-bg-disabled, #f8fafc);
1016
+ }
1017
+ .data-\[disabled\]\:text-button-secondary-fg-disabled[data-disabled] {
1018
+ color: var(--button-secondary-fg-disabled, #94a3b8);
1019
+ }
1020
+ .loading\:cursor-wait[data-loading=true] {
1021
+ cursor: wait;
1022
+ }
1023
+ .loading\:bg-button-primary-bg-default[data-loading=true] {
1024
+ background-color: var(--button-primary-bg-default, #1e293b);
1025
+ }
1026
+ .loading\:bg-button-secondary-bg-default[data-loading=true] {
1027
+ background-color: var(--button-secondary-bg-default, #ffffff);
1028
+ }
1029
+ .loading\:text-button-primary-fg-default[data-loading=true] {
1030
+ color: var(--button-primary-fg-default, #ffffff);
1031
+ }
1032
+ .loading\:text-button-secondary-fg-default[data-loading=true] {
1033
+ color: var(--button-secondary-fg-default, #0f172a);
1034
+ }
1035
+ .loading\:ring-button-primary-border-default[data-loading=true] {
1036
+ --tw-ring-color: var(--button-primary-border-default, #ffffff00);
1037
+ }
1038
+ .loading\:ring-button-secondary-border-default[data-loading=true] {
1039
+ --tw-ring-color: var(--button-secondary-border-default, #e2e8f0);
1040
+ }
1041
+ .loading\:before\:pointer-events-none[data-loading=true]::before {
1042
+ content: var(--tw-content);
1043
+ pointer-events: none;
1044
+ }
1045
+ .loading\:before\:absolute[data-loading=true]::before {
1046
+ content: var(--tw-content);
1047
+ position: absolute;
1048
+ }
1049
+ .loading\:before\:inset-0[data-loading=true]::before {
1050
+ content: var(--tw-content);
1051
+ inset: 0px;
1052
+ }
1053
+ .loading\:before\:bg-button-primary-bg-default[data-loading=true]::before {
1054
+ content: var(--tw-content);
1055
+ background-color: var(--button-primary-bg-default, #1e293b);
1056
+ }
1057
+ .loading\:before\:bg-button-secondary-bg-default[data-loading=true]::before {
1058
+ content: var(--tw-content);
1059
+ background-color: var(--button-secondary-bg-default, #ffffff);
1060
+ }
1061
+ .loading\:before\:opacity-80[data-loading=true]::before {
1062
+ content: var(--tw-content);
1063
+ opacity: 0.8;
1064
+ }
1065
+ .loading\:before\:content-\[\'\'\][data-loading=true]::before {
1066
+ --tw-content: "";
1067
+ content: var(--tw-content);
1068
+ }
829
1069
  @media not all and (min-width: 768px) {
830
1070
  .max-md\:bottom-0 {
831
1071
  bottom: 0px;
@@ -844,6 +1084,10 @@ video {
844
1084
  border-bottom-right-radius: 0.375rem;
845
1085
  border-bottom-left-radius: 0.375rem;
846
1086
  }
1087
+ .max-md\:py-3 {
1088
+ padding-top: 0.75rem;
1089
+ padding-bottom: 0.75rem;
1090
+ }
847
1091
  }
848
1092
  @media (min-width: 768px) {
849
1093
  .md\:right-0 {
@@ -864,6 +1108,9 @@ video {
864
1108
  .md\:w-\[480px\] {
865
1109
  width: 480px;
866
1110
  }
1111
+ .md\:w-\[712px\] {
1112
+ width: 712px;
1113
+ }
867
1114
  .md\:max-w-\[480px\] {
868
1115
  max-width: 480px;
869
1116
  }
@@ -871,6 +1118,9 @@ video {
871
1118
  --tw-translate-x: 100%;
872
1119
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
873
1120
  }
1121
+ .md\:grid-cols-2 {
1122
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1123
+ }
874
1124
  .md\:rounded-r-md {
875
1125
  border-top-right-radius: 0.375rem;
876
1126
  border-bottom-right-radius: 0.375rem;
@@ -891,12 +1141,25 @@ video {
891
1141
  padding-top: 1rem;
892
1142
  padding-bottom: 1rem;
893
1143
  }
894
- .md\:py-4\.5 {
1144
+ }
1145
+ @media (min-width: 1024px) {
1146
+ .lg\:w-\[802px\] {
1147
+ width: 802px;
1148
+ }
1149
+ .lg\:py-4\.5 {
895
1150
  padding-top: 1.125rem;
896
1151
  padding-bottom: 1.125rem;
897
1152
  }
898
1153
  }
899
- .rtl\:space-x-reverse:where([dir=rtl], [dir=rtl] *) > :not([hidden]) ~ :not([hidden]) {
900
- --tw-space-x-reverse: 1;
1154
+ @media (min-width: 1280px) {
1155
+ .xl\:w-\[896px\] {
1156
+ width: 896px;
1157
+ }
1158
+ }
1159
+ .\[\&\>button\]\:w-\[79px\] > button {
1160
+ width: 79px;
1161
+ }
1162
+ .\[\&\>span\]\:mr-auto > span {
1163
+ margin-right: auto;
901
1164
  }
902
1165
  /*# sourceMappingURL=index.css.map */