@universe-platform/ui 0.1.0-beta.7 → 0.1.0-beta.9

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.
package/dist/globals.css CHANGED
@@ -7,6 +7,12 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
+ --color-red-50: oklch(97.1% 0.013 17.38);
11
+ --color-red-200: oklch(88.5% 0.062 18.334);
12
+ --color-red-700: oklch(50.5% 0.213 27.518);
13
+ --color-orange-50: oklch(98% 0.016 73.684);
14
+ --color-orange-200: oklch(90.1% 0.076 70.697);
15
+ --color-orange-700: oklch(55.3% 0.195 38.402);
10
16
  --color-amber-50: oklch(98.7% 0.022 95.277);
11
17
  --color-amber-100: oklch(96.2% 0.059 95.617);
12
18
  --color-amber-200: oklch(92.4% 0.12 95.746);
@@ -14,20 +20,38 @@
14
20
  --color-amber-700: oklch(55.5% 0.163 48.998);
15
21
  --color-amber-800: oklch(47.3% 0.137 46.201);
16
22
  --color-amber-900: oklch(41.4% 0.112 45.904);
17
- --color-green-600: oklch(62.7% 0.194 149.214);
23
+ --color-yellow-50: oklch(98.7% 0.026 102.212);
24
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
25
+ --color-yellow-700: oklch(55.4% 0.135 66.442);
26
+ --color-lime-50: oklch(98.6% 0.031 120.757);
27
+ --color-lime-200: oklch(93.8% 0.127 124.321);
28
+ --color-lime-700: oklch(53.2% 0.157 131.589);
29
+ --color-green-50: oklch(98.2% 0.018 155.826);
30
+ --color-green-200: oklch(92.5% 0.084 155.995);
18
31
  --color-green-700: oklch(52.7% 0.154 150.069);
19
32
  --color-emerald-50: oklch(97.9% 0.021 166.113);
20
33
  --color-emerald-100: oklch(95% 0.052 163.051);
21
34
  --color-emerald-200: oklch(90.5% 0.093 164.15);
35
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
36
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
22
37
  --color-emerald-500: oklch(69.6% 0.17 162.48);
23
38
  --color-emerald-600: oklch(59.6% 0.145 163.225);
24
39
  --color-emerald-700: oklch(50.8% 0.118 165.612);
25
40
  --color-emerald-800: oklch(43.2% 0.095 166.913);
26
41
  --color-emerald-900: oklch(37.8% 0.077 168.94);
42
+ --color-emerald-950: oklch(26.2% 0.051 172.552);
43
+ --color-teal-50: oklch(98.4% 0.014 180.72);
44
+ --color-teal-200: oklch(91% 0.096 180.426);
27
45
  --color-teal-500: oklch(70.4% 0.14 182.503);
46
+ --color-teal-700: oklch(51.1% 0.096 186.391);
47
+ --color-cyan-50: oklch(98.4% 0.019 200.873);
48
+ --color-cyan-200: oklch(91.7% 0.08 205.041);
49
+ --color-cyan-700: oklch(52% 0.105 223.128);
50
+ --color-sky-50: oklch(97.7% 0.013 236.62);
28
51
  --color-sky-100: oklch(95.1% 0.026 236.824);
29
52
  --color-sky-200: oklch(90.1% 0.058 230.902);
30
53
  --color-sky-600: oklch(58.8% 0.158 241.966);
54
+ --color-sky-700: oklch(50% 0.134 242.749);
31
55
  --color-sky-900: oklch(39.1% 0.09 240.876);
32
56
  --color-blue-50: oklch(97% 0.014 254.604);
33
57
  --color-blue-100: oklch(93.2% 0.032 255.585);
@@ -37,14 +61,28 @@
37
61
  --color-blue-500: oklch(62.3% 0.214 259.815);
38
62
  --color-blue-600: oklch(54.6% 0.245 262.881);
39
63
  --color-blue-700: oklch(48.8% 0.243 264.376);
64
+ --color-blue-800: oklch(42.4% 0.199 265.638);
40
65
  --color-blue-900: oklch(37.9% 0.146 265.522);
41
66
  --color-indigo-50: oklch(96.2% 0.018 272.314);
42
67
  --color-indigo-100: oklch(93% 0.034 272.788);
43
68
  --color-indigo-200: oklch(87% 0.065 274.039);
44
69
  --color-indigo-700: oklch(45.7% 0.24 277.023);
70
+ --color-violet-50: oklch(96.9% 0.016 293.756);
71
+ --color-violet-200: oklch(89.4% 0.057 293.283);
72
+ --color-violet-700: oklch(49.1% 0.27 292.581);
73
+ --color-purple-50: oklch(97.7% 0.014 308.299);
74
+ --color-purple-200: oklch(90.2% 0.063 306.703);
75
+ --color-purple-700: oklch(49.6% 0.265 301.924);
76
+ --color-fuchsia-50: oklch(97.7% 0.017 320.058);
77
+ --color-fuchsia-200: oklch(90.3% 0.076 319.62);
78
+ --color-fuchsia-700: oklch(51.8% 0.253 323.949);
79
+ --color-pink-50: oklch(97.1% 0.014 343.198);
80
+ --color-pink-200: oklch(89.9% 0.061 343.231);
81
+ --color-pink-700: oklch(52.5% 0.223 3.958);
45
82
  --color-rose-50: oklch(96.9% 0.015 12.422);
46
83
  --color-rose-100: oklch(94.1% 0.03 12.58);
47
84
  --color-rose-200: oklch(89.2% 0.058 10.001);
85
+ --color-rose-400: oklch(71.2% 0.194 13.428);
48
86
  --color-rose-500: oklch(64.5% 0.246 16.439);
49
87
  --color-rose-600: oklch(58.6% 0.253 17.585);
50
88
  --color-rose-700: oklch(51.4% 0.222 16.935);
@@ -59,10 +97,13 @@
59
97
  --color-slate-700: oklch(37.2% 0.044 257.287);
60
98
  --color-slate-800: oklch(27.9% 0.041 260.031);
61
99
  --color-slate-900: oklch(20.8% 0.042 265.755);
100
+ --color-black: #000;
62
101
  --color-white: #fff;
63
102
  --spacing: 0.25rem;
64
103
  --container-xs: 20rem;
65
104
  --container-md: 28rem;
105
+ --container-lg: 32rem;
106
+ --container-xl: 36rem;
66
107
  --text-xs: 0.75rem;
67
108
  --text-xs--line-height: calc(1 / 0.75);
68
109
  --text-sm: 0.875rem;
@@ -73,6 +114,8 @@
73
114
  --font-weight-medium: 500;
74
115
  --font-weight-semibold: 600;
75
116
  --font-weight-bold: 700;
117
+ --tracking-wider: 0.05em;
118
+ --leading-tight: 1.25;
76
119
  --leading-relaxed: 1.625;
77
120
  --radius-md: 0.375rem;
78
121
  --radius-lg: 0.5rem;
@@ -80,6 +123,7 @@
80
123
  --animate-spin: spin 1s linear infinite;
81
124
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
82
125
  --blur-xs: 4px;
126
+ --blur-sm: 8px;
83
127
  --blur-md: 12px;
84
128
  --default-transition-duration: 150ms;
85
129
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -269,6 +313,9 @@
269
313
  .top-1\/2 {
270
314
  top: calc(1 / 2 * 100%);
271
315
  }
316
+ .top-2 {
317
+ top: calc(var(--spacing) * 2);
318
+ }
272
319
  .top-2\.5 {
273
320
  top: calc(var(--spacing) * 2.5);
274
321
  }
@@ -284,6 +331,9 @@
284
331
  .right-0 {
285
332
  right: 0;
286
333
  }
334
+ .right-2 {
335
+ right: calc(var(--spacing) * 2);
336
+ }
287
337
  .right-2\.5 {
288
338
  right: calc(var(--spacing) * 2.5);
289
339
  }
@@ -317,6 +367,9 @@
317
367
  .z-50 {
318
368
  z-index: 50;
319
369
  }
370
+ .z-\[100\] {
371
+ z-index: 100;
372
+ }
320
373
  .z-\[9999\] {
321
374
  z-index: 9999;
322
375
  }
@@ -338,6 +391,9 @@
338
391
  .mt-1\.5 {
339
392
  margin-top: calc(var(--spacing) * 1.5);
340
393
  }
394
+ .mr-0\.5 {
395
+ margin-right: calc(var(--spacing) * 0.5);
396
+ }
341
397
  .mr-1 {
342
398
  margin-right: var(--spacing);
343
399
  }
@@ -347,15 +403,24 @@
347
403
  .mb-1\.5 {
348
404
  margin-bottom: calc(var(--spacing) * 1.5);
349
405
  }
406
+ .mb-2 {
407
+ margin-bottom: calc(var(--spacing) * 2);
408
+ }
350
409
  .mb-2\.5 {
351
410
  margin-bottom: calc(var(--spacing) * 2.5);
352
411
  }
353
412
  .mb-3 {
354
413
  margin-bottom: calc(var(--spacing) * 3);
355
414
  }
415
+ .mb-3\.5 {
416
+ margin-bottom: calc(var(--spacing) * 3.5);
417
+ }
356
418
  .ml-1 {
357
419
  margin-left: var(--spacing);
358
420
  }
421
+ .block {
422
+ display: block;
423
+ }
359
424
  .flex {
360
425
  display: flex;
361
426
  }
@@ -407,6 +472,15 @@
407
472
  .h-9 {
408
473
  height: calc(var(--spacing) * 9);
409
474
  }
475
+ .h-10 {
476
+ height: calc(var(--spacing) * 10);
477
+ }
478
+ .h-12 {
479
+ height: calc(var(--spacing) * 12);
480
+ }
481
+ .h-44 {
482
+ height: calc(var(--spacing) * 44);
483
+ }
410
484
  .h-\[18px\] {
411
485
  height: 18px;
412
486
  }
@@ -419,6 +493,15 @@
419
493
  .max-h-60 {
420
494
  max-height: calc(var(--spacing) * 60);
421
495
  }
496
+ .max-h-\[180px\] {
497
+ max-height: 180px;
498
+ }
499
+ .max-h-full {
500
+ max-height: 100%;
501
+ }
502
+ .min-h-\[48px\] {
503
+ min-height: 48px;
504
+ }
422
505
  .min-h-\[260px\] {
423
506
  min-height: 260px;
424
507
  }
@@ -461,12 +544,21 @@
461
544
  .w-14 {
462
545
  width: calc(var(--spacing) * 14);
463
546
  }
547
+ .w-16 {
548
+ width: calc(var(--spacing) * 16);
549
+ }
464
550
  .w-56 {
465
551
  width: calc(var(--spacing) * 56);
466
552
  }
553
+ .w-64 {
554
+ width: calc(var(--spacing) * 64);
555
+ }
467
556
  .w-72 {
468
557
  width: calc(var(--spacing) * 72);
469
558
  }
559
+ .w-\[280px\] {
560
+ width: 280px;
561
+ }
470
562
  .w-full {
471
563
  width: 100%;
472
564
  }
@@ -476,9 +568,24 @@
476
568
  .max-w-\[140px\] {
477
569
  max-width: 140px;
478
570
  }
571
+ .max-w-\[150px\] {
572
+ max-width: 150px;
573
+ }
574
+ .max-w-\[160px\] {
575
+ max-width: 160px;
576
+ }
577
+ .max-w-\[300px\] {
578
+ max-width: 300px;
579
+ }
479
580
  .max-w-\[calc\(100\%-24px\)\] {
480
581
  max-width: calc(100% - 24px);
481
582
  }
583
+ .max-w-full {
584
+ max-width: 100%;
585
+ }
586
+ .max-w-lg {
587
+ max-width: var(--container-lg);
588
+ }
482
589
  .max-w-md {
483
590
  max-width: var(--container-md);
484
591
  }
@@ -494,12 +601,18 @@
494
601
  .min-w-\[50px\] {
495
602
  min-width: 50px;
496
603
  }
497
- .min-w-\[250px\] {
498
- min-width: 250px;
604
+ .min-w-\[200px\] {
605
+ min-width: 200px;
499
606
  }
500
607
  .flex-1 {
501
608
  flex: 1;
502
609
  }
610
+ .flex-shrink-0 {
611
+ flex-shrink: 0;
612
+ }
613
+ .shrink {
614
+ flex-shrink: 1;
615
+ }
503
616
  .shrink-0 {
504
617
  flex-shrink: 0;
505
618
  }
@@ -534,6 +647,9 @@
534
647
  .cursor-col-resize {
535
648
  cursor: col-resize;
536
649
  }
650
+ .cursor-default {
651
+ cursor: default;
652
+ }
537
653
  .cursor-grab {
538
654
  cursor: grab;
539
655
  }
@@ -549,12 +665,18 @@
549
665
  .resize {
550
666
  resize: both;
551
667
  }
668
+ .grid-cols-2 {
669
+ grid-template-columns: repeat(2, minmax(0, 1fr));
670
+ }
552
671
  .grid-cols-7 {
553
672
  grid-template-columns: repeat(7, minmax(0, 1fr));
554
673
  }
555
674
  .flex-col {
556
675
  flex-direction: column;
557
676
  }
677
+ .flex-nowrap {
678
+ flex-wrap: nowrap;
679
+ }
558
680
  .flex-wrap {
559
681
  flex-wrap: wrap;
560
682
  }
@@ -604,6 +726,20 @@
604
726
  margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
605
727
  }
606
728
  }
729
+ .space-y-2\.5 {
730
+ :where(& > :not(:last-child)) {
731
+ --tw-space-y-reverse: 0;
732
+ margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
733
+ margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
734
+ }
735
+ }
736
+ .space-y-3 {
737
+ :where(& > :not(:last-child)) {
738
+ --tw-space-y-reverse: 0;
739
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
740
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
741
+ }
742
+ }
607
743
  .truncate {
608
744
  overflow: hidden;
609
745
  text-overflow: ellipsis;
@@ -612,6 +748,9 @@
612
748
  .overflow-hidden {
613
749
  overflow: hidden;
614
750
  }
751
+ .overflow-visible {
752
+ overflow: visible;
753
+ }
615
754
  .overflow-x-auto {
616
755
  overflow-x: auto;
617
756
  }
@@ -657,10 +796,6 @@
657
796
  border-top-style: var(--tw-border-style);
658
797
  border-top-width: 2px;
659
798
  }
660
- .border-r {
661
- border-right-style: var(--tw-border-style);
662
- border-right-width: 1px;
663
- }
664
799
  .border-r-4 {
665
800
  border-right-style: var(--tw-border-style);
666
801
  border-right-width: 4px;
@@ -695,15 +830,45 @@
695
830
  .border-blue-400 {
696
831
  border-color: var(--color-blue-400);
697
832
  }
833
+ .border-cyan-200 {
834
+ border-color: var(--color-cyan-200);
835
+ }
698
836
  .border-emerald-200 {
699
837
  border-color: var(--color-emerald-200);
700
838
  }
839
+ .border-emerald-300 {
840
+ border-color: var(--color-emerald-300);
841
+ }
842
+ .border-fuchsia-200 {
843
+ border-color: var(--color-fuchsia-200);
844
+ }
845
+ .border-green-200 {
846
+ border-color: var(--color-green-200);
847
+ }
701
848
  .border-indigo-200 {
702
849
  border-color: var(--color-indigo-200);
703
850
  }
851
+ .border-lime-200 {
852
+ border-color: var(--color-lime-200);
853
+ }
854
+ .border-orange-200 {
855
+ border-color: var(--color-orange-200);
856
+ }
857
+ .border-pink-200 {
858
+ border-color: var(--color-pink-200);
859
+ }
860
+ .border-purple-200 {
861
+ border-color: var(--color-purple-200);
862
+ }
863
+ .border-red-200 {
864
+ border-color: var(--color-red-200);
865
+ }
704
866
  .border-rose-200 {
705
867
  border-color: var(--color-rose-200);
706
868
  }
869
+ .border-rose-400 {
870
+ border-color: var(--color-rose-400);
871
+ }
707
872
  .border-sky-200 {
708
873
  border-color: var(--color-sky-200);
709
874
  }
@@ -722,9 +887,18 @@
722
887
  .border-slate-300 {
723
888
  border-color: var(--color-slate-300);
724
889
  }
890
+ .border-teal-200 {
891
+ border-color: var(--color-teal-200);
892
+ }
725
893
  .border-transparent {
726
894
  border-color: transparent;
727
895
  }
896
+ .border-violet-200 {
897
+ border-color: var(--color-violet-200);
898
+ }
899
+ .border-yellow-200 {
900
+ border-color: var(--color-yellow-200);
901
+ }
728
902
  .border-t-transparent {
729
903
  border-top-color: transparent;
730
904
  }
@@ -740,12 +914,24 @@
740
914
  .bg-blue-50 {
741
915
  background-color: var(--color-blue-50);
742
916
  }
917
+ .bg-blue-50\/40 {
918
+ background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 40%, transparent);
919
+ @supports (color: color-mix(in lab, red, red)) {
920
+ background-color: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
921
+ }
922
+ }
923
+ .bg-blue-100 {
924
+ background-color: var(--color-blue-100);
925
+ }
743
926
  .bg-blue-500 {
744
927
  background-color: var(--color-blue-500);
745
928
  }
746
929
  .bg-blue-600 {
747
930
  background-color: var(--color-blue-600);
748
931
  }
932
+ .bg-cyan-50 {
933
+ background-color: var(--color-cyan-50);
934
+ }
749
935
  .bg-emerald-50 {
750
936
  background-color: var(--color-emerald-50);
751
937
  }
@@ -761,18 +947,54 @@
761
947
  .bg-emerald-600 {
762
948
  background-color: var(--color-emerald-600);
763
949
  }
950
+ .bg-emerald-950\/80 {
951
+ background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 80%, transparent);
952
+ @supports (color: color-mix(in lab, red, red)) {
953
+ background-color: color-mix(in oklab, var(--color-emerald-950) 80%, transparent);
954
+ }
955
+ }
956
+ .bg-fuchsia-50 {
957
+ background-color: var(--color-fuchsia-50);
958
+ }
959
+ .bg-green-50 {
960
+ background-color: var(--color-green-50);
961
+ }
764
962
  .bg-indigo-50 {
765
963
  background-color: var(--color-indigo-50);
766
964
  }
965
+ .bg-lime-50 {
966
+ background-color: var(--color-lime-50);
967
+ }
968
+ .bg-orange-50 {
969
+ background-color: var(--color-orange-50);
970
+ }
971
+ .bg-pink-50 {
972
+ background-color: var(--color-pink-50);
973
+ }
974
+ .bg-purple-50 {
975
+ background-color: var(--color-purple-50);
976
+ }
977
+ .bg-red-50 {
978
+ background-color: var(--color-red-50);
979
+ }
767
980
  .bg-rose-50 {
768
981
  background-color: var(--color-rose-50);
769
982
  }
983
+ .bg-rose-50\/20 {
984
+ background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 20%, transparent);
985
+ @supports (color: color-mix(in lab, red, red)) {
986
+ background-color: color-mix(in oklab, var(--color-rose-50) 20%, transparent);
987
+ }
988
+ }
770
989
  .bg-rose-100 {
771
990
  background-color: var(--color-rose-100);
772
991
  }
773
992
  .bg-rose-600 {
774
993
  background-color: var(--color-rose-600);
775
994
  }
995
+ .bg-sky-50 {
996
+ background-color: var(--color-sky-50);
997
+ }
776
998
  .bg-sky-100 {
777
999
  background-color: var(--color-sky-100);
778
1000
  }
@@ -806,9 +1028,24 @@
806
1028
  .bg-slate-300 {
807
1029
  background-color: var(--color-slate-300);
808
1030
  }
1031
+ .bg-slate-500 {
1032
+ background-color: var(--color-slate-500);
1033
+ }
1034
+ .bg-slate-900\/60 {
1035
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
1036
+ @supports (color: color-mix(in lab, red, red)) {
1037
+ background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
1038
+ }
1039
+ }
1040
+ .bg-teal-50 {
1041
+ background-color: var(--color-teal-50);
1042
+ }
809
1043
  .bg-transparent {
810
1044
  background-color: transparent;
811
1045
  }
1046
+ .bg-violet-50 {
1047
+ background-color: var(--color-violet-50);
1048
+ }
812
1049
  .bg-white {
813
1050
  background-color: var(--color-white);
814
1051
  }
@@ -824,6 +1061,9 @@
824
1061
  background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
825
1062
  }
826
1063
  }
1064
+ .bg-yellow-50 {
1065
+ background-color: var(--color-yellow-50);
1066
+ }
827
1067
  .p-0 {
828
1068
  padding: 0;
829
1069
  }
@@ -839,9 +1079,6 @@
839
1079
  .p-2 {
840
1080
  padding: calc(var(--spacing) * 2);
841
1081
  }
842
- .p-2\.5 {
843
- padding: calc(var(--spacing) * 2.5);
844
- }
845
1082
  .p-3 {
846
1083
  padding: calc(var(--spacing) * 3);
847
1084
  }
@@ -851,6 +1088,9 @@
851
1088
  .p-4 {
852
1089
  padding: calc(var(--spacing) * 4);
853
1090
  }
1091
+ .p-5 {
1092
+ padding: calc(var(--spacing) * 5);
1093
+ }
854
1094
  .px-1 {
855
1095
  padding-inline: var(--spacing);
856
1096
  }
@@ -902,15 +1142,24 @@
902
1142
  .pr-2 {
903
1143
  padding-right: calc(var(--spacing) * 2);
904
1144
  }
1145
+ .pr-7 {
1146
+ padding-right: calc(var(--spacing) * 7);
1147
+ }
905
1148
  .pr-9 {
906
1149
  padding-right: calc(var(--spacing) * 9);
907
1150
  }
908
1151
  .pb-1 {
909
1152
  padding-bottom: var(--spacing);
910
1153
  }
1154
+ .pb-2 {
1155
+ padding-bottom: calc(var(--spacing) * 2);
1156
+ }
911
1157
  .pb-2\.5 {
912
1158
  padding-bottom: calc(var(--spacing) * 2.5);
913
1159
  }
1160
+ .pl-2 {
1161
+ padding-left: calc(var(--spacing) * 2);
1162
+ }
914
1163
  .pl-3 {
915
1164
  padding-left: calc(var(--spacing) * 3);
916
1165
  }
@@ -926,9 +1175,16 @@
926
1175
  .text-right {
927
1176
  text-align: right;
928
1177
  }
1178
+ .align-middle {
1179
+ vertical-align: middle;
1180
+ }
929
1181
  .font-sans {
930
1182
  font-family: var(--font-sans);
931
1183
  }
1184
+ .text-base {
1185
+ font-size: var(--text-base);
1186
+ line-height: var(--tw-leading, var(--text-base--line-height));
1187
+ }
932
1188
  .text-sm {
933
1189
  font-size: var(--text-sm);
934
1190
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -947,6 +1203,10 @@
947
1203
  --tw-leading: var(--leading-relaxed);
948
1204
  line-height: var(--leading-relaxed);
949
1205
  }
1206
+ .leading-tight {
1207
+ --tw-leading: var(--leading-tight);
1208
+ line-height: var(--leading-tight);
1209
+ }
950
1210
  .font-bold {
951
1211
  --tw-font-weight: var(--font-weight-bold);
952
1212
  font-weight: var(--font-weight-bold);
@@ -963,6 +1223,10 @@
963
1223
  --tw-font-weight: var(--font-weight-semibold);
964
1224
  font-weight: var(--font-weight-semibold);
965
1225
  }
1226
+ .tracking-wider {
1227
+ --tw-tracking: var(--tracking-wider);
1228
+ letter-spacing: var(--tracking-wider);
1229
+ }
966
1230
  .break-words {
967
1231
  overflow-wrap: break-word;
968
1232
  }
@@ -981,12 +1245,30 @@
981
1245
  .text-amber-900 {
982
1246
  color: var(--color-amber-900);
983
1247
  }
1248
+ .text-blue-500 {
1249
+ color: var(--color-blue-500);
1250
+ }
984
1251
  .text-blue-600 {
985
1252
  color: var(--color-blue-600);
986
1253
  }
987
1254
  .text-blue-700 {
988
1255
  color: var(--color-blue-700);
989
1256
  }
1257
+ .text-blue-800 {
1258
+ color: var(--color-blue-800);
1259
+ }
1260
+ .text-blue-900 {
1261
+ color: var(--color-blue-900);
1262
+ }
1263
+ .text-cyan-700 {
1264
+ color: var(--color-cyan-700);
1265
+ }
1266
+ .text-emerald-400\/60 {
1267
+ color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 60%, transparent);
1268
+ @supports (color: color-mix(in lab, red, red)) {
1269
+ color: color-mix(in oklab, var(--color-emerald-400) 60%, transparent);
1270
+ }
1271
+ }
990
1272
  .text-emerald-500 {
991
1273
  color: var(--color-emerald-500);
992
1274
  }
@@ -996,15 +1278,36 @@
996
1278
  .text-emerald-700 {
997
1279
  color: var(--color-emerald-700);
998
1280
  }
1281
+ .text-emerald-800 {
1282
+ color: var(--color-emerald-800);
1283
+ }
999
1284
  .text-emerald-900 {
1000
1285
  color: var(--color-emerald-900);
1001
1286
  }
1002
- .text-green-600 {
1003
- color: var(--color-green-600);
1287
+ .text-fuchsia-700 {
1288
+ color: var(--color-fuchsia-700);
1289
+ }
1290
+ .text-green-700 {
1291
+ color: var(--color-green-700);
1004
1292
  }
1005
1293
  .text-indigo-700 {
1006
1294
  color: var(--color-indigo-700);
1007
1295
  }
1296
+ .text-lime-700 {
1297
+ color: var(--color-lime-700);
1298
+ }
1299
+ .text-orange-700 {
1300
+ color: var(--color-orange-700);
1301
+ }
1302
+ .text-pink-700 {
1303
+ color: var(--color-pink-700);
1304
+ }
1305
+ .text-purple-700 {
1306
+ color: var(--color-purple-700);
1307
+ }
1308
+ .text-red-700 {
1309
+ color: var(--color-red-700);
1310
+ }
1008
1311
  .text-rose-500 {
1009
1312
  color: var(--color-rose-500);
1010
1313
  }
@@ -1020,6 +1323,9 @@
1020
1323
  .text-sky-600 {
1021
1324
  color: var(--color-sky-600);
1022
1325
  }
1326
+ .text-sky-700 {
1327
+ color: var(--color-sky-700);
1328
+ }
1023
1329
  .text-sky-900 {
1024
1330
  color: var(--color-sky-900);
1025
1331
  }
@@ -1044,12 +1350,26 @@
1044
1350
  .text-slate-900 {
1045
1351
  color: var(--color-slate-900);
1046
1352
  }
1353
+ .text-teal-700 {
1354
+ color: var(--color-teal-700);
1355
+ }
1356
+ .text-violet-700 {
1357
+ color: var(--color-violet-700);
1358
+ }
1047
1359
  .text-white {
1048
1360
  color: var(--color-white);
1049
1361
  }
1362
+ .text-yellow-700 {
1363
+ color: var(--color-yellow-700);
1364
+ }
1050
1365
  .italic {
1051
1366
  font-style: italic;
1052
1367
  }
1368
+ .placeholder-slate-400 {
1369
+ &::placeholder {
1370
+ color: var(--color-slate-400);
1371
+ }
1372
+ }
1053
1373
  .opacity-0 {
1054
1374
  opacity: 0%;
1055
1375
  }
@@ -1062,12 +1382,19 @@
1062
1382
  .opacity-50 {
1063
1383
  opacity: 50%;
1064
1384
  }
1385
+ .opacity-60 {
1386
+ opacity: 60%;
1387
+ }
1065
1388
  .opacity-75 {
1066
1389
  opacity: 75%;
1067
1390
  }
1068
1391
  .opacity-100 {
1069
1392
  opacity: 100%;
1070
1393
  }
1394
+ .shadow {
1395
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1396
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1397
+ }
1071
1398
  .shadow-2xl {
1072
1399
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1073
1400
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1080,6 +1407,10 @@
1080
1407
  --tw-shadow: 0 -2px 4px var(--tw-shadow-color, rgba(0,0,0,0.02));
1081
1408
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1082
1409
  }
1410
+ .shadow-lg {
1411
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1412
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1413
+ }
1083
1414
  .shadow-md {
1084
1415
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1085
1416
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1096,21 +1427,40 @@
1096
1427
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1097
1428
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1098
1429
  }
1430
+ .ring-1 {
1431
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1432
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1433
+ }
1099
1434
  .shadow-teal-500\/20 {
1100
1435
  --tw-shadow-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
1101
1436
  @supports (color: color-mix(in lab, red, red)) {
1102
1437
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-teal-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
1103
1438
  }
1104
1439
  }
1440
+ .ring-rose-400 {
1441
+ --tw-ring-color: var(--color-rose-400);
1442
+ }
1443
+ .blur {
1444
+ --tw-blur: blur(8px);
1445
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1446
+ }
1105
1447
  .grayscale {
1106
1448
  --tw-grayscale: grayscale(100%);
1107
1449
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1108
1450
  }
1451
+ .filter {
1452
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1453
+ }
1109
1454
  .backdrop-blur-md {
1110
1455
  --tw-backdrop-blur: blur(var(--blur-md));
1111
1456
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1112
1457
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1113
1458
  }
1459
+ .backdrop-blur-sm {
1460
+ --tw-backdrop-blur: blur(var(--blur-sm));
1461
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1462
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1463
+ }
1114
1464
  .backdrop-blur-xs {
1115
1465
  --tw-backdrop-blur: blur(var(--blur-xs));
1116
1466
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1136,6 +1486,10 @@
1136
1486
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1137
1487
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1138
1488
  }
1489
+ .duration-100 {
1490
+ --tw-duration: 100ms;
1491
+ transition-duration: 100ms;
1492
+ }
1139
1493
  .duration-150 {
1140
1494
  --tw-duration: 150ms;
1141
1495
  transition-duration: 150ms;
@@ -1166,6 +1520,13 @@
1166
1520
  }
1167
1521
  }
1168
1522
  }
1523
+ .group-hover\/tag\:opacity-100 {
1524
+ &:is(:where(.group\/tag):hover *) {
1525
+ @media (hover: hover) {
1526
+ opacity: 100%;
1527
+ }
1528
+ }
1529
+ }
1169
1530
  .selection\:bg-blue-100 {
1170
1531
  & *::selection {
1171
1532
  background-color: var(--color-blue-100);
@@ -1182,6 +1543,33 @@
1182
1543
  color: var(--color-blue-900);
1183
1544
  }
1184
1545
  }
1546
+ .hover\:border-emerald-400 {
1547
+ &:hover {
1548
+ @media (hover: hover) {
1549
+ border-color: var(--color-emerald-400);
1550
+ }
1551
+ }
1552
+ }
1553
+ .hover\:bg-amber-100\/80 {
1554
+ &:hover {
1555
+ @media (hover: hover) {
1556
+ background-color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 80%, transparent);
1557
+ @supports (color: color-mix(in lab, red, red)) {
1558
+ background-color: color-mix(in oklab, var(--color-amber-100) 80%, transparent);
1559
+ }
1560
+ }
1561
+ }
1562
+ }
1563
+ .hover\:bg-black\/10 {
1564
+ &:hover {
1565
+ @media (hover: hover) {
1566
+ background-color: color-mix(in srgb, #000 10%, transparent);
1567
+ @supports (color: color-mix(in lab, red, red)) {
1568
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
1569
+ }
1570
+ }
1571
+ }
1572
+ }
1185
1573
  .hover\:bg-blue-50 {
1186
1574
  &:hover {
1187
1575
  @media (hover: hover) {
@@ -1206,6 +1594,27 @@
1206
1594
  }
1207
1595
  }
1208
1596
  }
1597
+ .hover\:bg-blue-200 {
1598
+ &:hover {
1599
+ @media (hover: hover) {
1600
+ background-color: var(--color-blue-200);
1601
+ }
1602
+ }
1603
+ }
1604
+ .hover\:bg-blue-700 {
1605
+ &:hover {
1606
+ @media (hover: hover) {
1607
+ background-color: var(--color-blue-700);
1608
+ }
1609
+ }
1610
+ }
1611
+ .hover\:bg-emerald-50 {
1612
+ &:hover {
1613
+ @media (hover: hover) {
1614
+ background-color: var(--color-emerald-50);
1615
+ }
1616
+ }
1617
+ }
1209
1618
  .hover\:bg-emerald-100 {
1210
1619
  &:hover {
1211
1620
  @media (hover: hover) {
@@ -1227,6 +1636,13 @@
1227
1636
  }
1228
1637
  }
1229
1638
  }
1639
+ .hover\:bg-rose-50 {
1640
+ &:hover {
1641
+ @media (hover: hover) {
1642
+ background-color: var(--color-rose-50);
1643
+ }
1644
+ }
1645
+ }
1230
1646
  .hover\:bg-rose-100 {
1231
1647
  &:hover {
1232
1648
  @media (hover: hover) {
@@ -1234,6 +1650,23 @@
1234
1650
  }
1235
1651
  }
1236
1652
  }
1653
+ .hover\:bg-slate-50 {
1654
+ &:hover {
1655
+ @media (hover: hover) {
1656
+ background-color: var(--color-slate-50);
1657
+ }
1658
+ }
1659
+ }
1660
+ .hover\:bg-slate-50\/80 {
1661
+ &:hover {
1662
+ @media (hover: hover) {
1663
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
1664
+ @supports (color: color-mix(in lab, red, red)) {
1665
+ background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
1666
+ }
1667
+ }
1668
+ }
1669
+ }
1237
1670
  .hover\:bg-slate-100 {
1238
1671
  &:hover {
1239
1672
  @media (hover: hover) {
@@ -1268,10 +1701,27 @@
1268
1701
  }
1269
1702
  }
1270
1703
  }
1271
- .hover\:text-blue-500 {
1704
+ .hover\:bg-slate-200\/70 {
1705
+ &:hover {
1706
+ @media (hover: hover) {
1707
+ background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);
1708
+ @supports (color: color-mix(in lab, red, red)) {
1709
+ background-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
1710
+ }
1711
+ }
1712
+ }
1713
+ }
1714
+ .hover\:bg-slate-600 {
1715
+ &:hover {
1716
+ @media (hover: hover) {
1717
+ background-color: var(--color-slate-600);
1718
+ }
1719
+ }
1720
+ }
1721
+ .hover\:text-amber-900 {
1272
1722
  &:hover {
1273
1723
  @media (hover: hover) {
1274
- color: var(--color-blue-500);
1724
+ color: var(--color-amber-900);
1275
1725
  }
1276
1726
  }
1277
1727
  }
@@ -1289,17 +1739,24 @@
1289
1739
  }
1290
1740
  }
1291
1741
  }
1292
- .hover\:text-green-700 {
1742
+ .hover\:text-rose-500 {
1293
1743
  &:hover {
1294
1744
  @media (hover: hover) {
1295
- color: var(--color-green-700);
1745
+ color: var(--color-rose-500);
1296
1746
  }
1297
1747
  }
1298
1748
  }
1299
- .hover\:text-rose-500 {
1749
+ .hover\:text-rose-600 {
1300
1750
  &:hover {
1301
1751
  @media (hover: hover) {
1302
- color: var(--color-rose-500);
1752
+ color: var(--color-rose-600);
1753
+ }
1754
+ }
1755
+ }
1756
+ .hover\:text-rose-700 {
1757
+ &:hover {
1758
+ @media (hover: hover) {
1759
+ color: var(--color-rose-700);
1303
1760
  }
1304
1761
  }
1305
1762
  }
@@ -1324,6 +1781,27 @@
1324
1781
  }
1325
1782
  }
1326
1783
  }
1784
+ .hover\:opacity-60 {
1785
+ &:hover {
1786
+ @media (hover: hover) {
1787
+ opacity: 60%;
1788
+ }
1789
+ }
1790
+ }
1791
+ .hover\:opacity-80 {
1792
+ &:hover {
1793
+ @media (hover: hover) {
1794
+ opacity: 80%;
1795
+ }
1796
+ }
1797
+ }
1798
+ .hover\:opacity-100 {
1799
+ &:hover {
1800
+ @media (hover: hover) {
1801
+ opacity: 100%;
1802
+ }
1803
+ }
1804
+ }
1327
1805
  .focus\:border-blue-500 {
1328
1806
  &:focus {
1329
1807
  border-color: var(--color-blue-500);
@@ -1334,6 +1812,11 @@
1334
1812
  background-color: var(--color-white);
1335
1813
  }
1336
1814
  }
1815
+ .focus\:opacity-100 {
1816
+ &:focus {
1817
+ opacity: 100%;
1818
+ }
1819
+ }
1337
1820
  .focus\:ring-1 {
1338
1821
  &:focus {
1339
1822
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1351,6 +1834,11 @@
1351
1834
  --tw-ring-color: var(--color-blue-400);
1352
1835
  }
1353
1836
  }
1837
+ .focus\:ring-blue-500 {
1838
+ &:focus {
1839
+ --tw-ring-color: var(--color-blue-500);
1840
+ }
1841
+ }
1354
1842
  .focus\:ring-blue-500\/20 {
1355
1843
  &:focus {
1356
1844
  --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
@@ -1375,6 +1863,14 @@
1375
1863
  background-color: #00897b;
1376
1864
  }
1377
1865
  }
1866
+ .active\:bg-amber-200\/80 {
1867
+ &:active {
1868
+ background-color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 80%, transparent);
1869
+ @supports (color: color-mix(in lab, red, red)) {
1870
+ background-color: color-mix(in oklab, var(--color-amber-200) 80%, transparent);
1871
+ }
1872
+ }
1873
+ }
1378
1874
  .active\:bg-emerald-800 {
1379
1875
  &:active {
1380
1876
  background-color: var(--color-emerald-800);
@@ -1425,6 +1921,11 @@
1425
1921
  width: calc(var(--spacing) * 64);
1426
1922
  }
1427
1923
  }
1924
+ .sm\:max-w-xl {
1925
+ @media (width >= 40rem) {
1926
+ max-width: var(--container-xl);
1927
+ }
1928
+ }
1428
1929
  .sm\:flex-row {
1429
1930
  @media (width >= 40rem) {
1430
1931
  flex-direction: row;
@@ -1490,6 +1991,10 @@
1490
1991
  syntax: "*";
1491
1992
  inherits: false;
1492
1993
  }
1994
+ @property --tw-tracking {
1995
+ syntax: "*";
1996
+ inherits: false;
1997
+ }
1493
1998
  @property --tw-shadow {
1494
1999
  syntax: "*";
1495
2000
  inherits: false;
@@ -1671,6 +2176,7 @@
1671
2176
  --tw-border-style: solid;
1672
2177
  --tw-leading: initial;
1673
2178
  --tw-font-weight: initial;
2179
+ --tw-tracking: initial;
1674
2180
  --tw-shadow: 0 0 #0000;
1675
2181
  --tw-shadow-color: initial;
1676
2182
  --tw-shadow-alpha: 100%;