okonomi_ui_kit 0.1.7 → 0.1.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.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +165 -7
  3. data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +664 -187
  4. data/app/helpers/okonomi_ui_kit/application_helper.rb +8 -0
  5. data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb +5 -5
  6. data/app/helpers/okonomi_ui_kit/component.rb +44 -21
  7. data/app/helpers/okonomi_ui_kit/components/alert.rb +1 -1
  8. data/app/helpers/okonomi_ui_kit/components/badge.rb +5 -5
  9. data/app/helpers/okonomi_ui_kit/components/breadcrumbs.rb +69 -0
  10. data/app/helpers/okonomi_ui_kit/components/button_base.rb +56 -0
  11. data/app/helpers/okonomi_ui_kit/components/button_tag.rb +23 -0
  12. data/app/helpers/okonomi_ui_kit/components/button_to.rb +4 -15
  13. data/app/helpers/okonomi_ui_kit/components/code.rb +41 -37
  14. data/app/helpers/okonomi_ui_kit/components/confirmation_modal.rb +130 -0
  15. data/app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb +38 -0
  16. data/app/helpers/okonomi_ui_kit/components/forms/collection_select.rb +57 -0
  17. data/app/helpers/okonomi_ui_kit/components/forms/date_field.rb +9 -0
  18. data/app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb +9 -0
  19. data/app/helpers/okonomi_ui_kit/components/forms/email_field.rb +9 -0
  20. data/app/helpers/okonomi_ui_kit/components/forms/field.rb +24 -0
  21. data/app/helpers/okonomi_ui_kit/components/forms/field_set.rb +17 -0
  22. data/app/helpers/okonomi_ui_kit/components/forms/input_base.rb +57 -0
  23. data/app/helpers/okonomi_ui_kit/components/forms/label.rb +27 -0
  24. data/app/helpers/okonomi_ui_kit/components/forms/multi_select.rb +18 -0
  25. data/app/helpers/okonomi_ui_kit/components/forms/number_field.rb +9 -0
  26. data/app/helpers/okonomi_ui_kit/components/forms/password_field.rb +9 -0
  27. data/app/helpers/okonomi_ui_kit/components/forms/search_field.rb +9 -0
  28. data/app/helpers/okonomi_ui_kit/components/forms/select.rb +57 -0
  29. data/app/helpers/okonomi_ui_kit/components/forms/show_if.rb +28 -0
  30. data/app/helpers/okonomi_ui_kit/components/forms/telephone_field.rb +9 -0
  31. data/app/helpers/okonomi_ui_kit/components/forms/text_area.rb +9 -0
  32. data/app/helpers/okonomi_ui_kit/components/forms/text_field.rb +9 -0
  33. data/app/helpers/okonomi_ui_kit/components/forms/time_field.rb +9 -0
  34. data/app/helpers/okonomi_ui_kit/components/forms/upload_field.rb +25 -0
  35. data/app/helpers/okonomi_ui_kit/components/forms/url_field.rb +9 -0
  36. data/app/helpers/okonomi_ui_kit/components/forms.rb +6 -0
  37. data/app/helpers/okonomi_ui_kit/components/icon.rb +36 -0
  38. data/app/helpers/okonomi_ui_kit/components/link_to.rb +8 -19
  39. data/app/helpers/okonomi_ui_kit/components/navigation.rb +98 -0
  40. data/app/helpers/okonomi_ui_kit/components/page.rb +8 -8
  41. data/app/helpers/okonomi_ui_kit/components/table.rb +9 -10
  42. data/app/helpers/okonomi_ui_kit/components/typography.rb +16 -16
  43. data/app/helpers/okonomi_ui_kit/components.rb +4 -0
  44. data/app/helpers/okonomi_ui_kit/config.rb +5 -1
  45. data/app/helpers/okonomi_ui_kit/configs.rb +4 -0
  46. data/app/helpers/okonomi_ui_kit/form_builder.rb +39 -130
  47. data/app/helpers/okonomi_ui_kit/form_component.rb +7 -0
  48. data/app/helpers/okonomi_ui_kit/svg_icons.rb +5 -5
  49. data/app/helpers/okonomi_ui_kit/t_w_merge.rb +114 -0
  50. data/app/helpers/okonomi_ui_kit/ui_helper.rb +17 -58
  51. data/app/views/okonomi/components/breadcrumbs/_breadcrumbs.html.erb +46 -0
  52. data/app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb +76 -0
  53. data/app/views/okonomi/components/forms/check_box_with_label/_check_box_with_label.html.erb +6 -0
  54. data/app/views/okonomi/components/forms/field/_field.html.erb +3 -0
  55. data/app/views/okonomi/components/forms/field_set/_field_set.html.erb +3 -0
  56. data/app/views/okonomi/components/forms/upload_field/_upload_field.html.erb +1 -0
  57. data/app/views/okonomi/components/icon/_icon.html.erb +38 -0
  58. data/app/views/okonomi/components/navigation/_link.html.erb +18 -0
  59. data/app/views/okonomi/components/navigation/_navigation.html.erb +4 -0
  60. data/app/views/okonomi/forms/tailwind/_checkbox_label.html.erb +2 -2
  61. data/app/views/okonomi/forms/tailwind/_field.html.erb +6 -6
  62. data/app/views/okonomi/forms/tailwind/_multi_select.html.erb +2 -4
  63. data/app/views/okonomi/forms/tailwind/_upload_field.html.erb +10 -10
  64. data/config/importmap.rb +1 -1
  65. data/lib/okonomi_ui_kit/engine.rb +0 -3
  66. data/lib/okonomi_ui_kit/version.rb +1 -1
  67. metadata +43 -12
  68. data/app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb +0 -60
  69. data/app/helpers/okonomi_ui_kit/icon_helper.rb +0 -39
  70. data/app/helpers/okonomi_ui_kit/navigation_helper.rb +0 -72
  71. data/app/helpers/okonomi_ui_kit/theme.rb +0 -159
  72. data/app/helpers/okonomi_ui_kit/theme_helper.rb +0 -17
  73. data/app/views/okonomi/forms/tailwind/_field_set.html.erb +0 -3
  74. data/app/views/okonomi/modals/_confirmation_modal.html.erb +0 -77
  75. data/app/views/okonomi/navigation/_link.html.erb +0 -15
  76. data/app/views/okonomi/navigation/_menu.html.erb +0 -3
  77. data/app/views/okonomi/navigation/_navbar.html.erb +0 -105
@@ -32,6 +32,7 @@
32
32
  --color-yellow-200: oklch(94.5% 0.129 101.54);
33
33
  --color-yellow-400: oklch(85.2% 0.199 91.936);
34
34
  --color-yellow-500: oklch(79.5% 0.184 86.047);
35
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
35
36
  --color-yellow-700: oklch(55.4% 0.135 66.442);
36
37
  --color-yellow-800: oklch(47.6% 0.114 61.907);
37
38
  --color-green-50: oklch(98.2% 0.018 155.826);
@@ -44,6 +45,10 @@
44
45
  --color-green-700: oklch(52.7% 0.154 150.069);
45
46
  --color-green-800: oklch(44.8% 0.119 151.328);
46
47
  --color-green-900: oklch(39.3% 0.095 152.535);
48
+ --color-emerald-100: oklch(95% 0.052 163.051);
49
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
50
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
51
+ --color-cyan-600: oklch(60.9% 0.126 221.723);
47
52
  --color-sky-50: oklch(97.7% 0.013 236.62);
48
53
  --color-sky-100: oklch(95.1% 0.026 236.824);
49
54
  --color-sky-200: oklch(90.1% 0.058 230.902);
@@ -57,6 +62,8 @@
57
62
  --color-blue-50: oklch(97% 0.014 254.604);
58
63
  --color-blue-100: oklch(93.2% 0.032 255.585);
59
64
  --color-blue-200: oklch(88.2% 0.059 254.128);
65
+ --color-blue-300: oklch(80.9% 0.105 251.813);
66
+ --color-blue-400: oklch(70.7% 0.165 254.624);
60
67
  --color-blue-500: oklch(62.3% 0.214 259.815);
61
68
  --color-blue-600: oklch(54.6% 0.245 262.881);
62
69
  --color-blue-700: oklch(48.8% 0.243 264.376);
@@ -72,6 +79,7 @@
72
79
  --color-indigo-700: oklch(45.7% 0.24 277.023);
73
80
  --color-indigo-800: oklch(39.8% 0.195 277.366);
74
81
  --color-indigo-900: oklch(35.9% 0.144 278.697);
82
+ --color-indigo-950: oklch(25.7% 0.09 281.288);
75
83
  --color-purple-50: oklch(97.7% 0.014 308.299);
76
84
  --color-purple-100: oklch(94.6% 0.033 307.174);
77
85
  --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -83,6 +91,12 @@
83
91
  --color-purple-800: oklch(43.8% 0.218 303.724);
84
92
  --color-purple-900: oklch(38.1% 0.176 304.987);
85
93
  --color-pink-500: oklch(65.6% 0.241 354.308);
94
+ --color-rose-200: oklch(89.2% 0.058 10.001);
95
+ --color-rose-900: oklch(41% 0.159 10.272);
96
+ --color-slate-100: oklch(96.8% 0.007 247.896);
97
+ --color-slate-200: oklch(92.9% 0.013 255.508);
98
+ --color-slate-700: oklch(37.2% 0.044 257.287);
99
+ --color-slate-800: oklch(27.9% 0.041 260.031);
86
100
  --color-gray-50: oklch(98.5% 0.002 247.839);
87
101
  --color-gray-100: oklch(96.7% 0.003 264.542);
88
102
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -96,8 +110,8 @@
96
110
  --color-black: #000;
97
111
  --color-white: #fff;
98
112
  --spacing: 0.25rem;
99
- --container-xs: 20rem;
100
113
  --container-sm: 24rem;
114
+ --container-md: 28rem;
101
115
  --container-lg: 32rem;
102
116
  --container-2xl: 42rem;
103
117
  --container-4xl: 56rem;
@@ -118,18 +132,30 @@
118
132
  --text-3xl--line-height: calc(2.25 / 1.875);
119
133
  --text-4xl: 2.25rem;
120
134
  --text-4xl--line-height: calc(2.5 / 2.25);
135
+ --text-5xl: 3rem;
136
+ --text-5xl--line-height: 1;
121
137
  --text-6xl: 3.75rem;
122
138
  --text-6xl--line-height: 1;
139
+ --font-weight-light: 300;
123
140
  --font-weight-normal: 400;
124
141
  --font-weight-medium: 500;
125
142
  --font-weight-semibold: 600;
126
143
  --font-weight-bold: 700;
127
144
  --tracking-tight: -0.025em;
145
+ --tracking-wide: 0.025em;
146
+ --tracking-wider: 0.05em;
147
+ --leading-tight: 1.25;
148
+ --leading-relaxed: 1.625;
128
149
  --radius-sm: 0.25rem;
129
150
  --radius-md: 0.375rem;
130
151
  --radius-lg: 0.5rem;
152
+ --radius-xl: 0.75rem;
131
153
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
132
154
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
155
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
156
+ --animate-spin: spin 1s linear infinite;
157
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
158
+ --aspect-video: 16 / 9;
133
159
  --default-transition-duration: 150ms;
134
160
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
135
161
  --default-font-family: var(--font-sans);
@@ -141,7 +167,6 @@
141
167
  --color-default-700: var(--color-gray-700);
142
168
  --color-default-900: var(--color-gray-900);
143
169
  --color-primary-50: var(--color-indigo-50);
144
- --color-primary-500: var(--color-indigo-500);
145
170
  --color-primary-600: var(--color-indigo-600);
146
171
  --color-primary-700: var(--color-indigo-700);
147
172
  --color-secondary-50: var(--color-purple-50);
@@ -338,50 +363,71 @@
338
363
  .static {
339
364
  position: static;
340
365
  }
341
- .-inset-0 {
342
- inset: calc(var(--spacing) * -0);
343
- }
344
- .-inset-0\.5 {
345
- inset: calc(var(--spacing) * -0.5);
346
- }
347
- .-inset-1 {
348
- inset: calc(var(--spacing) * -1);
349
- }
350
- .-inset-1\.5 {
351
- inset: calc(var(--spacing) * -1.5);
352
- }
353
366
  .inset-0 {
354
367
  inset: calc(var(--spacing) * 0);
355
368
  }
356
369
  .inset-y-0 {
357
370
  inset-block: calc(var(--spacing) * 0);
358
371
  }
372
+ .-top-1 {
373
+ top: calc(var(--spacing) * -1);
374
+ }
359
375
  .top-0 {
360
376
  top: calc(var(--spacing) * 0);
361
377
  }
378
+ .top-1 {
379
+ top: calc(var(--spacing) * 1);
380
+ }
381
+ .top-1\/2 {
382
+ top: calc(1/2 * 100%);
383
+ }
362
384
  .top-2 {
363
385
  top: calc(var(--spacing) * 2);
364
386
  }
387
+ .top-3 {
388
+ top: calc(var(--spacing) * 3);
389
+ }
390
+ .top-full {
391
+ top: 100%;
392
+ }
393
+ .-right-1 {
394
+ right: calc(var(--spacing) * -1);
395
+ }
365
396
  .right-0 {
366
397
  right: calc(var(--spacing) * 0);
367
398
  }
368
399
  .right-2 {
369
400
  right: calc(var(--spacing) * 2);
370
401
  }
402
+ .right-3 {
403
+ right: calc(var(--spacing) * 3);
404
+ }
405
+ .right-4 {
406
+ right: calc(var(--spacing) * 4);
407
+ }
371
408
  .left-0 {
372
409
  left: calc(var(--spacing) * 0);
373
410
  }
411
+ .left-3 {
412
+ left: calc(var(--spacing) * 3);
413
+ }
414
+ .left-4 {
415
+ left: calc(var(--spacing) * 4);
416
+ }
417
+ .isolate {
418
+ isolation: isolate;
419
+ }
374
420
  .z-10 {
375
421
  z-index: 10;
376
422
  }
377
- .col-span-1 {
378
- grid-column: span 1 / span 1;
423
+ .z-20 {
424
+ z-index: 20;
379
425
  }
380
- .col-start-1 {
381
- grid-column-start: 1;
426
+ .z-50 {
427
+ z-index: 50;
382
428
  }
383
- .row-start-1 {
384
- grid-row-start: 1;
429
+ .col-span-1 {
430
+ grid-column: span 1 / span 1;
385
431
  }
386
432
  .container {
387
433
  width: 100%;
@@ -404,6 +450,9 @@
404
450
  .-mx-2 {
405
451
  margin-inline: calc(var(--spacing) * -2);
406
452
  }
453
+ .-mx-3 {
454
+ margin-inline: calc(var(--spacing) * -3);
455
+ }
407
456
  .-mx-6 {
408
457
  margin-inline: calc(var(--spacing) * -6);
409
458
  }
@@ -437,9 +486,6 @@
437
486
  .mt-auto {
438
487
  margin-top: auto;
439
488
  }
440
- .-mr-2 {
441
- margin-right: calc(var(--spacing) * -2);
442
- }
443
489
  .mr-1 {
444
490
  margin-right: calc(var(--spacing) * 1);
445
491
  }
@@ -473,9 +519,6 @@
473
519
  .ml-2 {
474
520
  margin-left: calc(var(--spacing) * 2);
475
521
  }
476
- .ml-3 {
477
- margin-left: calc(var(--spacing) * 3);
478
- }
479
522
  .ml-4 {
480
523
  margin-left: calc(var(--spacing) * 4);
481
524
  }
@@ -509,6 +552,13 @@
509
552
  .table {
510
553
  display: table;
511
554
  }
555
+ .aspect-video {
556
+ aspect-ratio: var(--aspect-video);
557
+ }
558
+ .size-4 {
559
+ width: calc(var(--spacing) * 4);
560
+ height: calc(var(--spacing) * 4);
561
+ }
512
562
  .size-5 {
513
563
  width: calc(var(--spacing) * 5);
514
564
  height: calc(var(--spacing) * 5);
@@ -521,14 +571,13 @@
521
571
  width: calc(var(--spacing) * 8);
522
572
  height: calc(var(--spacing) * 8);
523
573
  }
524
- .size-10 {
525
- width: calc(var(--spacing) * 10);
526
- height: calc(var(--spacing) * 10);
527
- }
528
574
  .size-12 {
529
575
  width: calc(var(--spacing) * 12);
530
576
  height: calc(var(--spacing) * 12);
531
577
  }
578
+ .h-2 {
579
+ height: calc(var(--spacing) * 2);
580
+ }
532
581
  .h-3 {
533
582
  height: calc(var(--spacing) * 3);
534
583
  }
@@ -553,9 +602,27 @@
553
602
  .h-16 {
554
603
  height: calc(var(--spacing) * 16);
555
604
  }
605
+ .h-64 {
606
+ height: calc(var(--spacing) * 64);
607
+ }
608
+ .h-full {
609
+ height: 100%;
610
+ }
556
611
  .max-h-32 {
557
612
  max-height: calc(var(--spacing) * 32);
558
613
  }
614
+ .max-h-40 {
615
+ max-height: calc(var(--spacing) * 40);
616
+ }
617
+ .max-h-80 {
618
+ max-height: calc(var(--spacing) * 80);
619
+ }
620
+ .max-h-96 {
621
+ max-height: calc(var(--spacing) * 96);
622
+ }
623
+ .min-h-32 {
624
+ min-height: calc(var(--spacing) * 32);
625
+ }
559
626
  .min-h-full {
560
627
  min-height: 100%;
561
628
  }
@@ -583,9 +650,21 @@
583
650
  .w-12 {
584
651
  width: calc(var(--spacing) * 12);
585
652
  }
653
+ .w-16 {
654
+ width: calc(var(--spacing) * 16);
655
+ }
656
+ .w-20 {
657
+ width: calc(var(--spacing) * 20);
658
+ }
659
+ .w-32 {
660
+ width: calc(var(--spacing) * 32);
661
+ }
586
662
  .w-48 {
587
663
  width: calc(var(--spacing) * 48);
588
664
  }
665
+ .w-64 {
666
+ width: calc(var(--spacing) * 64);
667
+ }
589
668
  .w-auto {
590
669
  width: auto;
591
670
  }
@@ -604,11 +683,23 @@
604
683
  .max-w-7xl {
605
684
  max-width: var(--container-7xl);
606
685
  }
686
+ .max-w-lg {
687
+ max-width: var(--container-lg);
688
+ }
689
+ .max-w-md {
690
+ max-width: var(--container-md);
691
+ }
607
692
  .max-w-none {
608
693
  max-width: none;
609
694
  }
610
- .max-w-xs {
611
- max-width: var(--container-xs);
695
+ .max-w-prose {
696
+ max-width: 65ch;
697
+ }
698
+ .max-w-sm {
699
+ max-width: var(--container-sm);
700
+ }
701
+ .min-w-\[20px\] {
702
+ min-width: 20px;
612
703
  }
613
704
  .min-w-full {
614
705
  min-width: 100%;
@@ -628,8 +719,13 @@
628
719
  .border-collapse {
629
720
  border-collapse: collapse;
630
721
  }
631
- .origin-top-right {
632
- transform-origin: top right;
722
+ .-translate-y-1 {
723
+ --tw-translate-y: calc(var(--spacing) * -1);
724
+ translate: var(--tw-translate-x) var(--tw-translate-y);
725
+ }
726
+ .-translate-y-1\/2 {
727
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
728
+ translate: var(--tw-translate-x) var(--tw-translate-y);
633
729
  }
634
730
  .translate-y-0 {
635
731
  --tw-translate-y: calc(var(--spacing) * 0);
@@ -651,21 +747,18 @@
651
747
  --tw-scale-z: 90%;
652
748
  scale: var(--tw-scale-x) var(--tw-scale-y);
653
749
  }
654
- .scale-95 {
655
- --tw-scale-x: 95%;
656
- --tw-scale-y: 95%;
657
- --tw-scale-z: 95%;
658
- scale: var(--tw-scale-x) var(--tw-scale-y);
659
- }
660
- .scale-100 {
661
- --tw-scale-x: 100%;
662
- --tw-scale-y: 100%;
663
- --tw-scale-z: 100%;
664
- scale: var(--tw-scale-x) var(--tw-scale-y);
665
- }
666
750
  .transform {
667
751
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
668
752
  }
753
+ .animate-pulse {
754
+ animation: var(--animate-pulse);
755
+ }
756
+ .animate-spin {
757
+ animation: var(--animate-spin);
758
+ }
759
+ .cursor-help {
760
+ cursor: help;
761
+ }
669
762
  .cursor-not-allowed {
670
763
  cursor: not-allowed;
671
764
  }
@@ -678,6 +771,18 @@
678
771
  .resize {
679
772
  resize: both;
680
773
  }
774
+ .resize-none {
775
+ resize: none;
776
+ }
777
+ .resize-y {
778
+ resize: vertical;
779
+ }
780
+ .list-inside {
781
+ list-style-position: inside;
782
+ }
783
+ .list-disc {
784
+ list-style-type: disc;
785
+ }
681
786
  .appearance-none {
682
787
  appearance: none;
683
788
  }
@@ -687,6 +792,9 @@
687
792
  .grid-cols-2 {
688
793
  grid-template-columns: repeat(2, minmax(0, 1fr));
689
794
  }
795
+ .grid-cols-3 {
796
+ grid-template-columns: repeat(3, minmax(0, 1fr));
797
+ }
690
798
  .grid-cols-6 {
691
799
  grid-template-columns: repeat(6, minmax(0, 1fr));
692
800
  }
@@ -714,6 +822,9 @@
714
822
  .justify-end {
715
823
  justify-content: flex-end;
716
824
  }
825
+ .gap-1 {
826
+ gap: calc(var(--spacing) * 1);
827
+ }
717
828
  .gap-2 {
718
829
  gap: calc(var(--spacing) * 2);
719
830
  }
@@ -781,6 +892,16 @@
781
892
  .gap-x-3 {
782
893
  column-gap: calc(var(--spacing) * 3);
783
894
  }
895
+ .gap-x-4 {
896
+ column-gap: calc(var(--spacing) * 4);
897
+ }
898
+ .-space-x-px {
899
+ :where(& > :not(:last-child)) {
900
+ --tw-space-x-reverse: 0;
901
+ margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
902
+ margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
903
+ }
904
+ }
784
905
  .space-x-2 {
785
906
  :where(& > :not(:last-child)) {
786
907
  --tw-space-x-reverse: 0;
@@ -788,6 +909,13 @@
788
909
  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
789
910
  }
790
911
  }
912
+ .space-x-3 {
913
+ :where(& > :not(:last-child)) {
914
+ --tw-space-x-reverse: 0;
915
+ margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
916
+ margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
917
+ }
918
+ }
791
919
  .space-x-4 {
792
920
  :where(& > :not(:last-child)) {
793
921
  --tw-space-x-reverse: 0;
@@ -795,6 +923,9 @@
795
923
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
796
924
  }
797
925
  }
926
+ .gap-y-5 {
927
+ row-gap: calc(var(--spacing) * 5);
928
+ }
798
929
  .gap-y-7 {
799
930
  row-gap: calc(var(--spacing) * 7);
800
931
  }
@@ -822,12 +953,6 @@
822
953
  border-color: var(--color-gray-300);
823
954
  }
824
955
  }
825
- .self-center {
826
- align-self: center;
827
- }
828
- .justify-self-end {
829
- justify-self: flex-end;
830
- }
831
956
  .truncate {
832
957
  overflow: hidden;
833
958
  text-overflow: ellipsis;
@@ -854,9 +979,23 @@
854
979
  .rounded-md {
855
980
  border-radius: var(--radius-md);
856
981
  }
982
+ .rounded-none {
983
+ border-radius: 0;
984
+ }
857
985
  .rounded-sm {
858
986
  border-radius: var(--radius-sm);
859
987
  }
988
+ .rounded-xl {
989
+ border-radius: var(--radius-xl);
990
+ }
991
+ .rounded-l-none {
992
+ border-top-left-radius: 0;
993
+ border-bottom-left-radius: 0;
994
+ }
995
+ .rounded-r-none {
996
+ border-top-right-radius: 0;
997
+ border-bottom-right-radius: 0;
998
+ }
860
999
  .border {
861
1000
  border-style: var(--tw-border-style);
862
1001
  border-width: 1px;
@@ -869,6 +1008,10 @@
869
1008
  border-style: var(--tw-border-style);
870
1009
  border-width: 2px;
871
1010
  }
1011
+ .border-3 {
1012
+ border-style: var(--tw-border-style);
1013
+ border-width: 3px;
1014
+ }
872
1015
  .border-t {
873
1016
  border-top-style: var(--tw-border-style);
874
1017
  border-top-width: 1px;
@@ -881,6 +1024,10 @@
881
1024
  border-bottom-style: var(--tw-border-style);
882
1025
  border-bottom-width: 2px;
883
1026
  }
1027
+ .border-l-0 {
1028
+ border-left-style: var(--tw-border-style);
1029
+ border-left-width: 0px;
1030
+ }
884
1031
  .border-l-4 {
885
1032
  border-left-style: var(--tw-border-style);
886
1033
  border-left-width: 4px;
@@ -892,6 +1039,15 @@
892
1039
  .border-blue-200 {
893
1040
  border-color: var(--color-blue-200);
894
1041
  }
1042
+ .border-blue-300 {
1043
+ border-color: var(--color-blue-300);
1044
+ }
1045
+ .border-blue-500 {
1046
+ border-color: var(--color-blue-500);
1047
+ }
1048
+ .border-blue-600 {
1049
+ border-color: var(--color-blue-600);
1050
+ }
895
1051
  .border-danger-600 {
896
1052
  border-color: var(--color-danger-600);
897
1053
  }
@@ -910,9 +1066,18 @@
910
1066
  .border-gray-300 {
911
1067
  border-color: var(--color-gray-300);
912
1068
  }
1069
+ .border-gray-400 {
1070
+ border-color: var(--color-gray-400);
1071
+ }
1072
+ .border-gray-500 {
1073
+ border-color: var(--color-gray-500);
1074
+ }
913
1075
  .border-gray-600 {
914
1076
  border-color: var(--color-gray-600);
915
1077
  }
1078
+ .border-green-200 {
1079
+ border-color: var(--color-green-200);
1080
+ }
916
1081
  .border-green-300 {
917
1082
  border-color: var(--color-green-300);
918
1083
  }
@@ -922,18 +1087,24 @@
922
1087
  .border-info-700 {
923
1088
  border-color: var(--color-info-700);
924
1089
  }
925
- .border-primary-500 {
926
- border-color: var(--color-primary-500);
927
- }
928
1090
  .border-primary-600 {
929
1091
  border-color: var(--color-primary-600);
930
1092
  }
931
1093
  .border-primary-700 {
932
1094
  border-color: var(--color-primary-700);
933
1095
  }
1096
+ .border-red-200 {
1097
+ border-color: var(--color-red-200);
1098
+ }
934
1099
  .border-red-300 {
935
1100
  border-color: var(--color-red-300);
936
1101
  }
1102
+ .border-red-400 {
1103
+ border-color: var(--color-red-400);
1104
+ }
1105
+ .border-red-500 {
1106
+ border-color: var(--color-red-500);
1107
+ }
937
1108
  .border-secondary-600 {
938
1109
  border-color: var(--color-secondary-600);
939
1110
  }
@@ -958,12 +1129,27 @@
958
1129
  .border-yellow-200 {
959
1130
  border-color: var(--color-yellow-200);
960
1131
  }
1132
+ .border-yellow-600 {
1133
+ border-color: var(--color-yellow-600);
1134
+ }
1135
+ .bg-black {
1136
+ background-color: var(--color-black);
1137
+ }
1138
+ .bg-black\/50 {
1139
+ background-color: color-mix(in srgb, #000 50%, transparent);
1140
+ @supports (color: color-mix(in lab, red, red)) {
1141
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1142
+ }
1143
+ }
961
1144
  .bg-blue-50 {
962
1145
  background-color: var(--color-blue-50);
963
1146
  }
964
1147
  .bg-blue-100 {
965
1148
  background-color: var(--color-blue-100);
966
1149
  }
1150
+ .bg-blue-500 {
1151
+ background-color: var(--color-blue-500);
1152
+ }
967
1153
  .bg-blue-600 {
968
1154
  background-color: var(--color-blue-600);
969
1155
  }
@@ -979,6 +1165,12 @@
979
1165
  .bg-default-600 {
980
1166
  background-color: var(--color-default-600);
981
1167
  }
1168
+ .bg-emerald-100 {
1169
+ background-color: var(--color-emerald-100);
1170
+ }
1171
+ .bg-emerald-200 {
1172
+ background-color: var(--color-emerald-200);
1173
+ }
982
1174
  .bg-gray-50 {
983
1175
  background-color: var(--color-gray-50);
984
1176
  }
@@ -1003,12 +1195,27 @@
1003
1195
  .bg-gray-900 {
1004
1196
  background-color: var(--color-gray-900);
1005
1197
  }
1198
+ .bg-green-50 {
1199
+ background-color: var(--color-green-50);
1200
+ }
1006
1201
  .bg-green-100 {
1007
1202
  background-color: var(--color-green-100);
1008
1203
  }
1009
1204
  .bg-green-500 {
1010
1205
  background-color: var(--color-green-500);
1011
1206
  }
1207
+ .bg-green-600 {
1208
+ background-color: var(--color-green-600);
1209
+ }
1210
+ .bg-indigo-100 {
1211
+ background-color: var(--color-indigo-100);
1212
+ }
1213
+ .bg-indigo-600 {
1214
+ background-color: var(--color-indigo-600);
1215
+ }
1216
+ .bg-indigo-950 {
1217
+ background-color: var(--color-indigo-950);
1218
+ }
1012
1219
  .bg-info-600 {
1013
1220
  background-color: var(--color-info-600);
1014
1221
  }
@@ -1018,15 +1225,33 @@
1018
1225
  .bg-primary-600 {
1019
1226
  background-color: var(--color-primary-600);
1020
1227
  }
1228
+ .bg-red-50 {
1229
+ background-color: var(--color-red-50);
1230
+ }
1021
1231
  .bg-red-100 {
1022
1232
  background-color: var(--color-red-100);
1023
1233
  }
1234
+ .bg-red-200 {
1235
+ background-color: var(--color-red-200);
1236
+ }
1237
+ .bg-red-500 {
1238
+ background-color: var(--color-red-500);
1239
+ }
1024
1240
  .bg-red-600 {
1025
1241
  background-color: var(--color-red-600);
1026
1242
  }
1243
+ .bg-rose-200 {
1244
+ background-color: var(--color-rose-200);
1245
+ }
1027
1246
  .bg-secondary-600 {
1028
1247
  background-color: var(--color-secondary-600);
1029
1248
  }
1249
+ .bg-slate-200 {
1250
+ background-color: var(--color-slate-200);
1251
+ }
1252
+ .bg-slate-800 {
1253
+ background-color: var(--color-slate-800);
1254
+ }
1030
1255
  .bg-success-50 {
1031
1256
  background-color: var(--color-success-50);
1032
1257
  }
@@ -1051,6 +1276,9 @@
1051
1276
  .object-cover {
1052
1277
  object-fit: cover;
1053
1278
  }
1279
+ .p-0 {
1280
+ padding: calc(var(--spacing) * 0);
1281
+ }
1054
1282
  .p-1 {
1055
1283
  padding: calc(var(--spacing) * 1);
1056
1284
  }
@@ -1123,12 +1351,6 @@
1123
1351
  .py-12 {
1124
1352
  padding-block: calc(var(--spacing) * 12);
1125
1353
  }
1126
- .pt-1 {
1127
- padding-top: calc(var(--spacing) * 1);
1128
- }
1129
- .pt-2 {
1130
- padding-top: calc(var(--spacing) * 2);
1131
- }
1132
1354
  .pt-4 {
1133
1355
  padding-top: calc(var(--spacing) * 4);
1134
1356
  }
@@ -1141,14 +1363,14 @@
1141
1363
  .pr-4 {
1142
1364
  padding-right: calc(var(--spacing) * 4);
1143
1365
  }
1144
- .pr-8 {
1145
- padding-right: calc(var(--spacing) * 8);
1146
- }
1147
1366
  .pr-10 {
1148
1367
  padding-right: calc(var(--spacing) * 10);
1149
1368
  }
1150
- .pb-3 {
1151
- padding-bottom: calc(var(--spacing) * 3);
1369
+ .pr-12 {
1370
+ padding-right: calc(var(--spacing) * 12);
1371
+ }
1372
+ .pr-20 {
1373
+ padding-right: calc(var(--spacing) * 20);
1152
1374
  }
1153
1375
  .pb-4 {
1154
1376
  padding-bottom: calc(var(--spacing) * 4);
@@ -1156,9 +1378,15 @@
1156
1378
  .pl-3 {
1157
1379
  padding-left: calc(var(--spacing) * 3);
1158
1380
  }
1381
+ .pl-4 {
1382
+ padding-left: calc(var(--spacing) * 4);
1383
+ }
1159
1384
  .pl-10 {
1160
1385
  padding-left: calc(var(--spacing) * 10);
1161
1386
  }
1387
+ .pl-12 {
1388
+ padding-left: calc(var(--spacing) * 12);
1389
+ }
1162
1390
  .text-center {
1163
1391
  text-align: center;
1164
1392
  }
@@ -1186,10 +1414,6 @@
1186
1414
  font-size: var(--text-4xl);
1187
1415
  line-height: var(--tw-leading, var(--text-4xl--line-height));
1188
1416
  }
1189
- .text-6xl {
1190
- font-size: var(--text-6xl);
1191
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1192
- }
1193
1417
  .text-base {
1194
1418
  font-size: var(--text-base);
1195
1419
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1233,10 +1457,22 @@
1233
1457
  --tw-leading: calc(var(--spacing) * 7);
1234
1458
  line-height: calc(var(--spacing) * 7);
1235
1459
  }
1460
+ .leading-relaxed {
1461
+ --tw-leading: var(--leading-relaxed);
1462
+ line-height: var(--leading-relaxed);
1463
+ }
1464
+ .leading-tight {
1465
+ --tw-leading: var(--leading-tight);
1466
+ line-height: var(--leading-tight);
1467
+ }
1236
1468
  .font-bold {
1237
1469
  --tw-font-weight: var(--font-weight-bold);
1238
1470
  font-weight: var(--font-weight-bold);
1239
1471
  }
1472
+ .font-light {
1473
+ --tw-font-weight: var(--font-weight-light);
1474
+ font-weight: var(--font-weight-light);
1475
+ }
1240
1476
  .font-medium {
1241
1477
  --tw-font-weight: var(--font-weight-medium);
1242
1478
  font-weight: var(--font-weight-medium);
@@ -1249,11 +1485,26 @@
1249
1485
  --tw-font-weight: var(--font-weight-semibold);
1250
1486
  font-weight: var(--font-weight-semibold);
1251
1487
  }
1488
+ .tracking-tight {
1489
+ --tw-tracking: var(--tracking-tight);
1490
+ letter-spacing: var(--tracking-tight);
1491
+ }
1492
+ .tracking-wide {
1493
+ --tw-tracking: var(--tracking-wide);
1494
+ letter-spacing: var(--tracking-wide);
1495
+ }
1496
+ .tracking-wider {
1497
+ --tw-tracking: var(--tracking-wider);
1498
+ letter-spacing: var(--tracking-wider);
1499
+ }
1252
1500
  .whitespace-nowrap {
1253
1501
  white-space: nowrap;
1254
1502
  }
1255
- .text-amber-600 {
1256
- color: var(--color-amber-600);
1503
+ .text-\[\#custom-color\] {
1504
+ color: #custom-color;
1505
+ }
1506
+ .text-blue-400 {
1507
+ color: var(--color-blue-400);
1257
1508
  }
1258
1509
  .text-blue-500 {
1259
1510
  color: var(--color-blue-500);
@@ -1261,12 +1512,18 @@
1261
1512
  .text-blue-600 {
1262
1513
  color: var(--color-blue-600);
1263
1514
  }
1515
+ .text-blue-700 {
1516
+ color: var(--color-blue-700);
1517
+ }
1264
1518
  .text-blue-800 {
1265
1519
  color: var(--color-blue-800);
1266
1520
  }
1267
1521
  .text-blue-900 {
1268
1522
  color: var(--color-blue-900);
1269
1523
  }
1524
+ .text-cyan-600 {
1525
+ color: var(--color-cyan-600);
1526
+ }
1270
1527
  .text-danger-400 {
1271
1528
  color: var(--color-danger-400);
1272
1529
  }
@@ -1282,6 +1539,9 @@
1282
1539
  .text-default-900 {
1283
1540
  color: var(--color-default-900);
1284
1541
  }
1542
+ .text-emerald-900 {
1543
+ color: var(--color-emerald-900);
1544
+ }
1285
1545
  .text-gray-100 {
1286
1546
  color: var(--color-gray-100);
1287
1547
  }
@@ -1315,12 +1575,18 @@
1315
1575
  .text-green-800 {
1316
1576
  color: var(--color-green-800);
1317
1577
  }
1578
+ .text-indigo-100 {
1579
+ color: var(--color-indigo-100);
1580
+ }
1318
1581
  .text-indigo-500 {
1319
1582
  color: var(--color-indigo-500);
1320
1583
  }
1321
1584
  .text-indigo-600 {
1322
1585
  color: var(--color-indigo-600);
1323
1586
  }
1587
+ .text-indigo-900 {
1588
+ color: var(--color-indigo-900);
1589
+ }
1324
1590
  .text-info-600 {
1325
1591
  color: var(--color-info-600);
1326
1592
  }
@@ -1330,8 +1596,8 @@
1330
1596
  .text-primary-600 {
1331
1597
  color: var(--color-primary-600);
1332
1598
  }
1333
- .text-primary-700 {
1334
- color: var(--color-primary-700);
1599
+ .text-purple-600 {
1600
+ color: var(--color-purple-600);
1335
1601
  }
1336
1602
  .text-red-500 {
1337
1603
  color: var(--color-red-500);
@@ -1345,9 +1611,21 @@
1345
1611
  .text-red-800 {
1346
1612
  color: var(--color-red-800);
1347
1613
  }
1614
+ .text-red-900 {
1615
+ color: var(--color-red-900);
1616
+ }
1617
+ .text-rose-900 {
1618
+ color: var(--color-rose-900);
1619
+ }
1348
1620
  .text-secondary-600 {
1349
1621
  color: var(--color-secondary-600);
1350
1622
  }
1623
+ .text-slate-100 {
1624
+ color: var(--color-slate-100);
1625
+ }
1626
+ .text-slate-700 {
1627
+ color: var(--color-slate-700);
1628
+ }
1351
1629
  .text-success-600 {
1352
1630
  color: var(--color-success-600);
1353
1631
  }
@@ -1363,12 +1641,27 @@
1363
1641
  .text-yellow-500 {
1364
1642
  color: var(--color-yellow-500);
1365
1643
  }
1644
+ .text-yellow-600 {
1645
+ color: var(--color-yellow-600);
1646
+ }
1366
1647
  .text-yellow-700 {
1367
1648
  color: var(--color-yellow-700);
1368
1649
  }
1369
1650
  .text-yellow-800 {
1370
1651
  color: var(--color-yellow-800);
1371
1652
  }
1653
+ .capitalize {
1654
+ text-transform: capitalize;
1655
+ }
1656
+ .lowercase {
1657
+ text-transform: lowercase;
1658
+ }
1659
+ .uppercase {
1660
+ text-transform: uppercase;
1661
+ }
1662
+ .no-underline {
1663
+ text-decoration-line: none;
1664
+ }
1372
1665
  .underline {
1373
1666
  text-decoration-line: underline;
1374
1667
  }
@@ -1385,10 +1678,22 @@
1385
1678
  --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));
1386
1679
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1387
1680
  }
1681
+ .shadow-2xl {
1682
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1683
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1684
+ }
1685
+ .shadow-inner {
1686
+ --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1687
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1688
+ }
1388
1689
  .shadow-lg {
1389
1690
  --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));
1390
1691
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1391
1692
  }
1693
+ .shadow-md {
1694
+ --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));
1695
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1696
+ }
1392
1697
  .shadow-none {
1393
1698
  --tw-shadow: 0 0 #0000;
1394
1699
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1401,6 +1706,10 @@
1401
1706
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1402
1707
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1403
1708
  }
1709
+ .ring {
1710
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1711
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1712
+ }
1404
1713
  .ring-1 {
1405
1714
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1406
1715
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1409,14 +1718,8 @@
1409
1718
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1410
1719
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1411
1720
  }
1412
- .ring-black {
1413
- --tw-ring-color: var(--color-black);
1414
- }
1415
- .ring-black\/5 {
1416
- --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
1417
- @supports (color: color-mix(in lab, red, red)) {
1418
- --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1419
- }
1721
+ .ring-blue-500 {
1722
+ --tw-ring-color: var(--color-blue-500);
1420
1723
  }
1421
1724
  .ring-danger-400 {
1422
1725
  --tw-ring-color: var(--color-danger-400);
@@ -1424,29 +1727,20 @@
1424
1727
  .ring-gray-300 {
1425
1728
  --tw-ring-color: var(--color-gray-300);
1426
1729
  }
1730
+ .ring-red-400 {
1731
+ --tw-ring-color: var(--color-red-400);
1732
+ }
1733
+ .ring-red-500 {
1734
+ --tw-ring-color: var(--color-red-500);
1735
+ }
1427
1736
  .ring-offset-2 {
1428
1737
  --tw-ring-offset-width: 2px;
1429
1738
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1430
1739
  }
1431
- .outline-hidden {
1432
- --tw-outline-style: none;
1433
- outline-style: none;
1434
- @media (forced-colors: active) {
1435
- outline: 2px solid transparent;
1436
- outline-offset: 2px;
1437
- }
1438
- }
1439
1740
  .outline {
1440
1741
  outline-style: var(--tw-outline-style);
1441
1742
  outline-width: 1px;
1442
1743
  }
1443
- .outline-1 {
1444
- outline-style: var(--tw-outline-style);
1445
- outline-width: 1px;
1446
- }
1447
- .outline-default-300 {
1448
- outline-color: var(--color-default-300);
1449
- }
1450
1744
  .filter {
1451
1745
  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,);
1452
1746
  }
@@ -1475,10 +1769,6 @@
1475
1769
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1476
1770
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1477
1771
  }
1478
- .duration-75 {
1479
- --tw-duration: 75ms;
1480
- transition-duration: 75ms;
1481
- }
1482
1772
  .duration-100 {
1483
1773
  --tw-duration: 100ms;
1484
1774
  transition-duration: 100ms;
@@ -1495,6 +1785,10 @@
1495
1785
  --tw-ease: var(--ease-in);
1496
1786
  transition-timing-function: var(--ease-in);
1497
1787
  }
1788
+ .ease-in-out {
1789
+ --tw-ease: var(--ease-in-out);
1790
+ transition-timing-function: var(--ease-in-out);
1791
+ }
1498
1792
  .ease-out {
1499
1793
  --tw-ease: var(--ease-out);
1500
1794
  transition-timing-function: var(--ease-out);
@@ -1513,6 +1807,13 @@
1513
1807
  }
1514
1808
  }
1515
1809
  }
1810
+ .group-hover\:text-gray-700 {
1811
+ &:is(:where(.group):hover *) {
1812
+ @media (hover: hover) {
1813
+ color: var(--color-gray-700);
1814
+ }
1815
+ }
1816
+ }
1516
1817
  .group-hover\:text-primary-600 {
1517
1818
  &:is(:where(.group):hover *) {
1518
1819
  @media (hover: hover) {
@@ -1552,10 +1853,38 @@
1552
1853
  }
1553
1854
  }
1554
1855
  }
1555
- .hover\:border-gray-300 {
1856
+ .hover\:border-gray-400 {
1857
+ &:hover {
1858
+ @media (hover: hover) {
1859
+ border-color: var(--color-gray-400);
1860
+ }
1861
+ }
1862
+ }
1863
+ .hover\:bg-blue-100 {
1864
+ &:hover {
1865
+ @media (hover: hover) {
1866
+ background-color: var(--color-blue-100);
1867
+ }
1868
+ }
1869
+ }
1870
+ .hover\:bg-blue-200 {
1871
+ &:hover {
1872
+ @media (hover: hover) {
1873
+ background-color: var(--color-blue-200);
1874
+ }
1875
+ }
1876
+ }
1877
+ .hover\:bg-blue-500 {
1878
+ &:hover {
1879
+ @media (hover: hover) {
1880
+ background-color: var(--color-blue-500);
1881
+ }
1882
+ }
1883
+ }
1884
+ .hover\:bg-blue-600 {
1556
1885
  &:hover {
1557
1886
  @media (hover: hover) {
1558
- border-color: var(--color-gray-300);
1887
+ background-color: var(--color-blue-600);
1559
1888
  }
1560
1889
  }
1561
1890
  }
@@ -1608,6 +1937,41 @@
1608
1937
  }
1609
1938
  }
1610
1939
  }
1940
+ .hover\:bg-gray-400 {
1941
+ &:hover {
1942
+ @media (hover: hover) {
1943
+ background-color: var(--color-gray-400);
1944
+ }
1945
+ }
1946
+ }
1947
+ .hover\:bg-gray-500 {
1948
+ &:hover {
1949
+ @media (hover: hover) {
1950
+ background-color: var(--color-gray-500);
1951
+ }
1952
+ }
1953
+ }
1954
+ .hover\:bg-gray-600 {
1955
+ &:hover {
1956
+ @media (hover: hover) {
1957
+ background-color: var(--color-gray-600);
1958
+ }
1959
+ }
1960
+ }
1961
+ .hover\:bg-gray-800 {
1962
+ &:hover {
1963
+ @media (hover: hover) {
1964
+ background-color: var(--color-gray-800);
1965
+ }
1966
+ }
1967
+ }
1968
+ .hover\:bg-indigo-700 {
1969
+ &:hover {
1970
+ @media (hover: hover) {
1971
+ background-color: var(--color-indigo-700);
1972
+ }
1973
+ }
1974
+ }
1611
1975
  .hover\:bg-info-50 {
1612
1976
  &:hover {
1613
1977
  @media (hover: hover) {
@@ -1643,6 +2007,13 @@
1643
2007
  }
1644
2008
  }
1645
2009
  }
2010
+ .hover\:bg-red-600 {
2011
+ &:hover {
2012
+ @media (hover: hover) {
2013
+ background-color: var(--color-red-600);
2014
+ }
2015
+ }
2016
+ }
1646
2017
  .hover\:bg-red-700 {
1647
2018
  &:hover {
1648
2019
  @media (hover: hover) {
@@ -1692,6 +2063,13 @@
1692
2063
  }
1693
2064
  }
1694
2065
  }
2066
+ .hover\:bg-white {
2067
+ &:hover {
2068
+ @media (hover: hover) {
2069
+ background-color: var(--color-white);
2070
+ }
2071
+ }
2072
+ }
1695
2073
  .hover\:text-blue-800 {
1696
2074
  &:hover {
1697
2075
  @media (hover: hover) {
@@ -1741,6 +2119,20 @@
1741
2119
  }
1742
2120
  }
1743
2121
  }
2122
+ .hover\:text-red-700 {
2123
+ &:hover {
2124
+ @media (hover: hover) {
2125
+ color: var(--color-red-700);
2126
+ }
2127
+ }
2128
+ }
2129
+ .hover\:text-red-800 {
2130
+ &:hover {
2131
+ @media (hover: hover) {
2132
+ color: var(--color-red-800);
2133
+ }
2134
+ }
2135
+ }
1744
2136
  .hover\:text-red-900 {
1745
2137
  &:hover {
1746
2138
  @media (hover: hover) {
@@ -1748,6 +2140,20 @@
1748
2140
  }
1749
2141
  }
1750
2142
  }
2143
+ .hover\:text-white {
2144
+ &:hover {
2145
+ @media (hover: hover) {
2146
+ color: var(--color-white);
2147
+ }
2148
+ }
2149
+ }
2150
+ .hover\:no-underline {
2151
+ &:hover {
2152
+ @media (hover: hover) {
2153
+ text-decoration-line: none;
2154
+ }
2155
+ }
2156
+ }
1751
2157
  .hover\:underline {
1752
2158
  &:hover {
1753
2159
  @media (hover: hover) {
@@ -1763,6 +2169,19 @@
1763
2169
  }
1764
2170
  }
1765
2171
  }
2172
+ .hover\:shadow-md {
2173
+ &:hover {
2174
+ @media (hover: hover) {
2175
+ --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));
2176
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2177
+ }
2178
+ }
2179
+ }
2180
+ .focus\:border-blue-400 {
2181
+ &:focus {
2182
+ border-color: var(--color-blue-400);
2183
+ }
2184
+ }
1766
2185
  .focus\:border-blue-500 {
1767
2186
  &:focus {
1768
2187
  border-color: var(--color-blue-500);
@@ -1773,12 +2192,6 @@
1773
2192
  border-color: var(--color-indigo-500);
1774
2193
  }
1775
2194
  }
1776
- .focus\:ring-0 {
1777
- &:focus {
1778
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1779
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1780
- }
1781
- }
1782
2195
  .focus\:ring-2 {
1783
2196
  &:focus {
1784
2197
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1800,11 +2213,6 @@
1800
2213
  --tw-ring-color: var(--color-indigo-500);
1801
2214
  }
1802
2215
  }
1803
- .focus\:ring-primary-500 {
1804
- &:focus {
1805
- --tw-ring-color: var(--color-primary-500);
1806
- }
1807
- }
1808
2216
  .focus\:ring-primary-600 {
1809
2217
  &:focus {
1810
2218
  --tw-ring-color: var(--color-primary-600);
@@ -1816,37 +2224,15 @@
1816
2224
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1817
2225
  }
1818
2226
  }
1819
- .focus\:outline-hidden {
1820
- &:focus {
1821
- --tw-outline-style: none;
1822
- outline-style: none;
1823
- @media (forced-colors: active) {
1824
- outline: 2px solid transparent;
1825
- outline-offset: 2px;
1826
- }
1827
- }
1828
- }
1829
2227
  .focus\:outline-none {
1830
2228
  &:focus {
1831
2229
  --tw-outline-style: none;
1832
2230
  outline-style: none;
1833
2231
  }
1834
2232
  }
1835
- .focus-visible\:ring-2 {
1836
- &:focus-visible {
1837
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1838
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1839
- }
1840
- }
1841
- .focus-visible\:ring-primary-500 {
1842
- &:focus-visible {
1843
- --tw-ring-color: var(--color-primary-500);
1844
- }
1845
- }
1846
- .focus-visible\:ring-offset-2 {
1847
- &:focus-visible {
1848
- --tw-ring-offset-width: 2px;
1849
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2233
+ .active\:bg-red-800 {
2234
+ &:active {
2235
+ background-color: var(--color-red-800);
1850
2236
  }
1851
2237
  }
1852
2238
  .disabled\:cursor-not-allowed {
@@ -1874,11 +2260,6 @@
1874
2260
  margin-inline: calc(var(--spacing) * 0);
1875
2261
  }
1876
2262
  }
1877
- .sm\:-my-px {
1878
- @media (width >= 40rem) {
1879
- margin-block: -1px;
1880
- }
1881
- }
1882
2263
  .sm\:my-8 {
1883
2264
  @media (width >= 40rem) {
1884
2265
  margin-block: calc(var(--spacing) * 8);
@@ -1904,11 +2285,6 @@
1904
2285
  margin-left: calc(var(--spacing) * 4);
1905
2286
  }
1906
2287
  }
1907
- .sm\:ml-6 {
1908
- @media (width >= 40rem) {
1909
- margin-left: calc(var(--spacing) * 6);
1910
- }
1911
- }
1912
2288
  .sm\:block {
1913
2289
  @media (width >= 40rem) {
1914
2290
  display: block;
@@ -1924,17 +2300,6 @@
1924
2300
  display: grid;
1925
2301
  }
1926
2302
  }
1927
- .sm\:hidden {
1928
- @media (width >= 40rem) {
1929
- display: none;
1930
- }
1931
- }
1932
- .sm\:size-4 {
1933
- @media (width >= 40rem) {
1934
- width: calc(var(--spacing) * 4);
1935
- height: calc(var(--spacing) * 4);
1936
- }
1937
- }
1938
2303
  .sm\:size-10 {
1939
2304
  @media (width >= 40rem) {
1940
2305
  width: calc(var(--spacing) * 10);
@@ -2018,15 +2383,6 @@
2018
2383
  gap: calc(var(--spacing) * 4);
2019
2384
  }
2020
2385
  }
2021
- .sm\:space-x-8 {
2022
- @media (width >= 40rem) {
2023
- :where(& > :not(:last-child)) {
2024
- --tw-space-x-reverse: 0;
2025
- margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
2026
- margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
2027
- }
2028
- }
2029
- }
2030
2386
  .sm\:p-0 {
2031
2387
  @media (width >= 40rem) {
2032
2388
  padding: calc(var(--spacing) * 0);
@@ -2059,18 +2415,32 @@
2059
2415
  line-height: var(--tw-leading, var(--text-sm--line-height));
2060
2416
  }
2061
2417
  }
2062
- .sm\:text-sm\/6 {
2063
- @media (width >= 40rem) {
2064
- font-size: var(--text-sm);
2065
- line-height: calc(var(--spacing) * 6);
2066
- }
2067
- }
2068
2418
  .sm\:tracking-tight {
2069
2419
  @media (width >= 40rem) {
2070
2420
  --tw-tracking: var(--tracking-tight);
2071
2421
  letter-spacing: var(--tracking-tight);
2072
2422
  }
2073
2423
  }
2424
+ .sm\:hover\:text-lg {
2425
+ @media (width >= 40rem) {
2426
+ &:hover {
2427
+ @media (hover: hover) {
2428
+ font-size: var(--text-lg);
2429
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2430
+ }
2431
+ }
2432
+ }
2433
+ }
2434
+ .md\:col-span-1 {
2435
+ @media (width >= 48rem) {
2436
+ grid-column: span 1 / span 1;
2437
+ }
2438
+ }
2439
+ .md\:col-span-3 {
2440
+ @media (width >= 48rem) {
2441
+ grid-column: span 3 / span 3;
2442
+ }
2443
+ }
2074
2444
  .md\:col-span-5 {
2075
2445
  @media (width >= 48rem) {
2076
2446
  grid-column: span 5 / span 5;
@@ -2091,6 +2461,11 @@
2091
2461
  grid-template-columns: repeat(2, minmax(0, 1fr));
2092
2462
  }
2093
2463
  }
2464
+ .md\:grid-cols-3 {
2465
+ @media (width >= 48rem) {
2466
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2467
+ }
2468
+ }
2094
2469
  .md\:grid-cols-4 {
2095
2470
  @media (width >= 48rem) {
2096
2471
  grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -2101,14 +2476,10 @@
2101
2476
  grid-template-columns: repeat(10, minmax(0, 1fr));
2102
2477
  }
2103
2478
  }
2104
- .lg\:block {
2105
- @media (width >= 64rem) {
2106
- display: block;
2107
- }
2108
- }
2109
- .lg\:hidden {
2110
- @media (width >= 64rem) {
2111
- display: none;
2479
+ .md\:text-3xl {
2480
+ @media (width >= 48rem) {
2481
+ font-size: var(--text-3xl);
2482
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
2112
2483
  }
2113
2484
  }
2114
2485
  .lg\:grid-cols-2 {
@@ -2131,6 +2502,102 @@
2131
2502
  padding-inline: calc(var(--spacing) * 8);
2132
2503
  }
2133
2504
  }
2505
+ .lg\:text-3xl {
2506
+ @media (width >= 64rem) {
2507
+ font-size: var(--text-3xl);
2508
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
2509
+ }
2510
+ }
2511
+ .lg\:text-4xl {
2512
+ @media (width >= 64rem) {
2513
+ font-size: var(--text-4xl);
2514
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
2515
+ }
2516
+ }
2517
+ .lg\:text-5xl {
2518
+ @media (width >= 64rem) {
2519
+ font-size: var(--text-5xl);
2520
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
2521
+ }
2522
+ }
2523
+ .lg\:text-base {
2524
+ @media (width >= 64rem) {
2525
+ font-size: var(--text-base);
2526
+ line-height: var(--tw-leading, var(--text-base--line-height));
2527
+ }
2528
+ }
2529
+ .lg\:text-lg {
2530
+ @media (width >= 64rem) {
2531
+ font-size: var(--text-lg);
2532
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2533
+ }
2534
+ }
2535
+ .dark\:divide-gray-700 {
2536
+ @media (prefers-color-scheme: dark) {
2537
+ :where(& > :not(:last-child)) {
2538
+ border-color: var(--color-gray-700);
2539
+ }
2540
+ }
2541
+ }
2542
+ .dark\:bg-blue-900 {
2543
+ @media (prefers-color-scheme: dark) {
2544
+ background-color: var(--color-blue-900);
2545
+ }
2546
+ }
2547
+ .dark\:bg-gray-800 {
2548
+ @media (prefers-color-scheme: dark) {
2549
+ background-color: var(--color-gray-800);
2550
+ }
2551
+ }
2552
+ .dark\:bg-gray-900 {
2553
+ @media (prefers-color-scheme: dark) {
2554
+ background-color: var(--color-gray-900);
2555
+ }
2556
+ }
2557
+ .dark\:bg-green-900 {
2558
+ @media (prefers-color-scheme: dark) {
2559
+ background-color: var(--color-green-900);
2560
+ }
2561
+ }
2562
+ .dark\:bg-red-900 {
2563
+ @media (prefers-color-scheme: dark) {
2564
+ background-color: var(--color-red-900);
2565
+ }
2566
+ }
2567
+ .dark\:text-blue-200 {
2568
+ @media (prefers-color-scheme: dark) {
2569
+ color: var(--color-blue-200);
2570
+ }
2571
+ }
2572
+ .dark\:text-gray-100 {
2573
+ @media (prefers-color-scheme: dark) {
2574
+ color: var(--color-gray-100);
2575
+ }
2576
+ }
2577
+ .dark\:text-green-200 {
2578
+ @media (prefers-color-scheme: dark) {
2579
+ color: var(--color-green-200);
2580
+ }
2581
+ }
2582
+ .dark\:text-red-200 {
2583
+ @media (prefers-color-scheme: dark) {
2584
+ color: var(--color-red-200);
2585
+ }
2586
+ }
2587
+ .dark\:ring-1 {
2588
+ @media (prefers-color-scheme: dark) {
2589
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2590
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2591
+ }
2592
+ }
2593
+ .dark\:ring-white\/10 {
2594
+ @media (prefers-color-scheme: dark) {
2595
+ --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
2596
+ @supports (color: color-mix(in lab, red, red)) {
2597
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2598
+ }
2599
+ }
2600
+ }
2134
2601
  }
2135
2602
  @property --tw-translate-x {
2136
2603
  syntax: "*";
@@ -2210,6 +2677,10 @@
2210
2677
  syntax: "*";
2211
2678
  inherits: false;
2212
2679
  }
2680
+ @property --tw-tracking {
2681
+ syntax: "*";
2682
+ inherits: false;
2683
+ }
2213
2684
  @property --tw-shadow {
2214
2685
  syntax: "*";
2215
2686
  inherits: false;
@@ -2341,9 +2812,15 @@
2341
2812
  syntax: "*";
2342
2813
  inherits: false;
2343
2814
  }
2344
- @property --tw-tracking {
2345
- syntax: "*";
2346
- inherits: false;
2815
+ @keyframes spin {
2816
+ to {
2817
+ transform: rotate(360deg);
2818
+ }
2819
+ }
2820
+ @keyframes pulse {
2821
+ 50% {
2822
+ opacity: 0.5;
2823
+ }
2347
2824
  }
2348
2825
  @layer properties {
2349
2826
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
@@ -2365,6 +2842,7 @@
2365
2842
  --tw-border-style: solid;
2366
2843
  --tw-leading: initial;
2367
2844
  --tw-font-weight: initial;
2845
+ --tw-tracking: initial;
2368
2846
  --tw-shadow: 0 0 #0000;
2369
2847
  --tw-shadow-color: initial;
2370
2848
  --tw-shadow-alpha: 100%;
@@ -2395,7 +2873,6 @@
2395
2873
  --tw-drop-shadow-size: initial;
2396
2874
  --tw-duration: initial;
2397
2875
  --tw-ease: initial;
2398
- --tw-tracking: initial;
2399
2876
  }
2400
2877
  }
2401
2878
  }