okonomi_ui_kit 0.1.8 → 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 (72) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -3
  3. data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +409 -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 +10 -6
  7. data/app/helpers/okonomi_ui_kit/components/alert.rb +1 -1
  8. data/app/helpers/okonomi_ui_kit/components/badge.rb +3 -3
  9. data/app/helpers/okonomi_ui_kit/components/breadcrumbs.rb +4 -4
  10. data/app/helpers/okonomi_ui_kit/components/button_base.rb +6 -6
  11. data/app/helpers/okonomi_ui_kit/components/button_tag.rb +3 -3
  12. data/app/helpers/okonomi_ui_kit/components/button_to.rb +3 -3
  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 +6 -6
  38. data/app/helpers/okonomi_ui_kit/components/link_to.rb +7 -7
  39. data/app/helpers/okonomi_ui_kit/components/navigation.rb +98 -0
  40. data/app/helpers/okonomi_ui_kit/components/page.rb +7 -7
  41. data/app/helpers/okonomi_ui_kit/components/table.rb +7 -8
  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/configs.rb +4 -0
  45. data/app/helpers/okonomi_ui_kit/form_builder.rb +39 -130
  46. data/app/helpers/okonomi_ui_kit/form_component.rb +7 -0
  47. data/app/helpers/okonomi_ui_kit/svg_icons.rb +5 -5
  48. data/app/helpers/okonomi_ui_kit/t_w_merge.rb +33 -27
  49. data/app/helpers/okonomi_ui_kit/ui_helper.rb +17 -58
  50. data/app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb +76 -0
  51. data/app/views/okonomi/components/forms/check_box_with_label/_check_box_with_label.html.erb +6 -0
  52. data/app/views/okonomi/components/forms/field/_field.html.erb +3 -0
  53. data/app/views/okonomi/components/forms/field_set/_field_set.html.erb +3 -0
  54. data/app/views/okonomi/components/forms/upload_field/_upload_field.html.erb +1 -0
  55. data/app/views/okonomi/components/navigation/_link.html.erb +18 -0
  56. data/app/views/okonomi/components/navigation/_navigation.html.erb +4 -0
  57. data/app/views/okonomi/forms/tailwind/_checkbox_label.html.erb +2 -2
  58. data/app/views/okonomi/forms/tailwind/_field.html.erb +6 -6
  59. data/app/views/okonomi/forms/tailwind/_multi_select.html.erb +2 -4
  60. data/app/views/okonomi/forms/tailwind/_upload_field.html.erb +10 -10
  61. data/config/importmap.rb +1 -1
  62. data/lib/okonomi_ui_kit/engine.rb +0 -1
  63. data/lib/okonomi_ui_kit/version.rb +1 -1
  64. metadata +36 -10
  65. data/app/helpers/okonomi_ui_kit/navigation_helper.rb +0 -72
  66. data/app/helpers/okonomi_ui_kit/theme.rb +0 -136
  67. data/app/helpers/okonomi_ui_kit/theme_helper.rb +0 -17
  68. data/app/views/okonomi/forms/tailwind/_field_set.html.erb +0 -3
  69. data/app/views/okonomi/modals/_confirmation_modal.html.erb +0 -77
  70. data/app/views/okonomi/navigation/_link.html.erb +0 -15
  71. data/app/views/okonomi/navigation/_menu.html.erb +0 -3
  72. data/app/views/okonomi/navigation/_navbar.html.erb +0 -105
@@ -45,6 +45,9 @@
45
45
  --color-green-700: oklch(52.7% 0.154 150.069);
46
46
  --color-green-800: oklch(44.8% 0.119 151.328);
47
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);
48
51
  --color-cyan-600: oklch(60.9% 0.126 221.723);
49
52
  --color-sky-50: oklch(97.7% 0.013 236.62);
50
53
  --color-sky-100: oklch(95.1% 0.026 236.824);
@@ -59,6 +62,8 @@
59
62
  --color-blue-50: oklch(97% 0.014 254.604);
60
63
  --color-blue-100: oklch(93.2% 0.032 255.585);
61
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);
62
67
  --color-blue-500: oklch(62.3% 0.214 259.815);
63
68
  --color-blue-600: oklch(54.6% 0.245 262.881);
64
69
  --color-blue-700: oklch(48.8% 0.243 264.376);
@@ -74,6 +79,7 @@
74
79
  --color-indigo-700: oklch(45.7% 0.24 277.023);
75
80
  --color-indigo-800: oklch(39.8% 0.195 277.366);
76
81
  --color-indigo-900: oklch(35.9% 0.144 278.697);
82
+ --color-indigo-950: oklch(25.7% 0.09 281.288);
77
83
  --color-purple-50: oklch(97.7% 0.014 308.299);
78
84
  --color-purple-100: oklch(94.6% 0.033 307.174);
79
85
  --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -85,6 +91,12 @@
85
91
  --color-purple-800: oklch(43.8% 0.218 303.724);
86
92
  --color-purple-900: oklch(38.1% 0.176 304.987);
87
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);
88
100
  --color-gray-50: oklch(98.5% 0.002 247.839);
89
101
  --color-gray-100: oklch(96.7% 0.003 264.542);
90
102
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -98,8 +110,8 @@
98
110
  --color-black: #000;
99
111
  --color-white: #fff;
100
112
  --spacing: 0.25rem;
101
- --container-xs: 20rem;
102
113
  --container-sm: 24rem;
114
+ --container-md: 28rem;
103
115
  --container-lg: 32rem;
104
116
  --container-2xl: 42rem;
105
117
  --container-4xl: 56rem;
@@ -137,10 +149,13 @@
137
149
  --radius-sm: 0.25rem;
138
150
  --radius-md: 0.375rem;
139
151
  --radius-lg: 0.5rem;
152
+ --radius-xl: 0.75rem;
140
153
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
141
154
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
142
155
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
156
+ --animate-spin: spin 1s linear infinite;
143
157
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
158
+ --aspect-video: 16 / 9;
144
159
  --default-transition-duration: 150ms;
145
160
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
146
161
  --default-font-family: var(--font-sans);
@@ -152,7 +167,6 @@
152
167
  --color-default-700: var(--color-gray-700);
153
168
  --color-default-900: var(--color-gray-900);
154
169
  --color-primary-50: var(--color-indigo-50);
155
- --color-primary-500: var(--color-indigo-500);
156
170
  --color-primary-600: var(--color-indigo-600);
157
171
  --color-primary-700: var(--color-indigo-700);
158
172
  --color-secondary-50: var(--color-purple-50);
@@ -349,53 +363,71 @@
349
363
  .static {
350
364
  position: static;
351
365
  }
352
- .-inset-0 {
353
- inset: calc(var(--spacing) * -0);
354
- }
355
- .-inset-0\.5 {
356
- inset: calc(var(--spacing) * -0.5);
357
- }
358
- .-inset-1 {
359
- inset: calc(var(--spacing) * -1);
360
- }
361
- .-inset-1\.5 {
362
- inset: calc(var(--spacing) * -1.5);
363
- }
364
366
  .inset-0 {
365
367
  inset: calc(var(--spacing) * 0);
366
368
  }
367
369
  .inset-y-0 {
368
370
  inset-block: calc(var(--spacing) * 0);
369
371
  }
372
+ .-top-1 {
373
+ top: calc(var(--spacing) * -1);
374
+ }
370
375
  .top-0 {
371
376
  top: calc(var(--spacing) * 0);
372
377
  }
378
+ .top-1 {
379
+ top: calc(var(--spacing) * 1);
380
+ }
381
+ .top-1\/2 {
382
+ top: calc(1/2 * 100%);
383
+ }
373
384
  .top-2 {
374
385
  top: calc(var(--spacing) * 2);
375
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
+ }
376
396
  .right-0 {
377
397
  right: calc(var(--spacing) * 0);
378
398
  }
379
399
  .right-2 {
380
400
  right: calc(var(--spacing) * 2);
381
401
  }
402
+ .right-3 {
403
+ right: calc(var(--spacing) * 3);
404
+ }
405
+ .right-4 {
406
+ right: calc(var(--spacing) * 4);
407
+ }
382
408
  .left-0 {
383
409
  left: calc(var(--spacing) * 0);
384
410
  }
411
+ .left-3 {
412
+ left: calc(var(--spacing) * 3);
413
+ }
414
+ .left-4 {
415
+ left: calc(var(--spacing) * 4);
416
+ }
385
417
  .isolate {
386
418
  isolation: isolate;
387
419
  }
388
420
  .z-10 {
389
421
  z-index: 10;
390
422
  }
391
- .col-span-1 {
392
- grid-column: span 1 / span 1;
423
+ .z-20 {
424
+ z-index: 20;
393
425
  }
394
- .col-start-1 {
395
- grid-column-start: 1;
426
+ .z-50 {
427
+ z-index: 50;
396
428
  }
397
- .row-start-1 {
398
- grid-row-start: 1;
429
+ .col-span-1 {
430
+ grid-column: span 1 / span 1;
399
431
  }
400
432
  .container {
401
433
  width: 100%;
@@ -418,6 +450,9 @@
418
450
  .-mx-2 {
419
451
  margin-inline: calc(var(--spacing) * -2);
420
452
  }
453
+ .-mx-3 {
454
+ margin-inline: calc(var(--spacing) * -3);
455
+ }
421
456
  .-mx-6 {
422
457
  margin-inline: calc(var(--spacing) * -6);
423
458
  }
@@ -451,9 +486,6 @@
451
486
  .mt-auto {
452
487
  margin-top: auto;
453
488
  }
454
- .-mr-2 {
455
- margin-right: calc(var(--spacing) * -2);
456
- }
457
489
  .mr-1 {
458
490
  margin-right: calc(var(--spacing) * 1);
459
491
  }
@@ -487,9 +519,6 @@
487
519
  .ml-2 {
488
520
  margin-left: calc(var(--spacing) * 2);
489
521
  }
490
- .ml-3 {
491
- margin-left: calc(var(--spacing) * 3);
492
- }
493
522
  .ml-4 {
494
523
  margin-left: calc(var(--spacing) * 4);
495
524
  }
@@ -523,6 +552,13 @@
523
552
  .table {
524
553
  display: table;
525
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
+ }
526
562
  .size-5 {
527
563
  width: calc(var(--spacing) * 5);
528
564
  height: calc(var(--spacing) * 5);
@@ -535,14 +571,13 @@
535
571
  width: calc(var(--spacing) * 8);
536
572
  height: calc(var(--spacing) * 8);
537
573
  }
538
- .size-10 {
539
- width: calc(var(--spacing) * 10);
540
- height: calc(var(--spacing) * 10);
541
- }
542
574
  .size-12 {
543
575
  width: calc(var(--spacing) * 12);
544
576
  height: calc(var(--spacing) * 12);
545
577
  }
578
+ .h-2 {
579
+ height: calc(var(--spacing) * 2);
580
+ }
546
581
  .h-3 {
547
582
  height: calc(var(--spacing) * 3);
548
583
  }
@@ -567,9 +602,27 @@
567
602
  .h-16 {
568
603
  height: calc(var(--spacing) * 16);
569
604
  }
605
+ .h-64 {
606
+ height: calc(var(--spacing) * 64);
607
+ }
608
+ .h-full {
609
+ height: 100%;
610
+ }
570
611
  .max-h-32 {
571
612
  max-height: calc(var(--spacing) * 32);
572
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
+ }
573
626
  .min-h-full {
574
627
  min-height: 100%;
575
628
  }
@@ -597,9 +650,21 @@
597
650
  .w-12 {
598
651
  width: calc(var(--spacing) * 12);
599
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
+ }
600
662
  .w-48 {
601
663
  width: calc(var(--spacing) * 48);
602
664
  }
665
+ .w-64 {
666
+ width: calc(var(--spacing) * 64);
667
+ }
603
668
  .w-auto {
604
669
  width: auto;
605
670
  }
@@ -618,14 +683,23 @@
618
683
  .max-w-7xl {
619
684
  max-width: var(--container-7xl);
620
685
  }
686
+ .max-w-lg {
687
+ max-width: var(--container-lg);
688
+ }
689
+ .max-w-md {
690
+ max-width: var(--container-md);
691
+ }
621
692
  .max-w-none {
622
693
  max-width: none;
623
694
  }
624
695
  .max-w-prose {
625
696
  max-width: 65ch;
626
697
  }
627
- .max-w-xs {
628
- max-width: var(--container-xs);
698
+ .max-w-sm {
699
+ max-width: var(--container-sm);
700
+ }
701
+ .min-w-\[20px\] {
702
+ min-width: 20px;
629
703
  }
630
704
  .min-w-full {
631
705
  min-width: 100%;
@@ -645,8 +719,13 @@
645
719
  .border-collapse {
646
720
  border-collapse: collapse;
647
721
  }
648
- .origin-top-right {
649
- 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);
650
729
  }
651
730
  .translate-y-0 {
652
731
  --tw-translate-y: calc(var(--spacing) * 0);
@@ -668,24 +747,18 @@
668
747
  --tw-scale-z: 90%;
669
748
  scale: var(--tw-scale-x) var(--tw-scale-y);
670
749
  }
671
- .scale-95 {
672
- --tw-scale-x: 95%;
673
- --tw-scale-y: 95%;
674
- --tw-scale-z: 95%;
675
- scale: var(--tw-scale-x) var(--tw-scale-y);
676
- }
677
- .scale-100 {
678
- --tw-scale-x: 100%;
679
- --tw-scale-y: 100%;
680
- --tw-scale-z: 100%;
681
- scale: var(--tw-scale-x) var(--tw-scale-y);
682
- }
683
750
  .transform {
684
751
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
685
752
  }
686
753
  .animate-pulse {
687
754
  animation: var(--animate-pulse);
688
755
  }
756
+ .animate-spin {
757
+ animation: var(--animate-spin);
758
+ }
759
+ .cursor-help {
760
+ cursor: help;
761
+ }
689
762
  .cursor-not-allowed {
690
763
  cursor: not-allowed;
691
764
  }
@@ -698,6 +771,18 @@
698
771
  .resize {
699
772
  resize: both;
700
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
+ }
701
786
  .appearance-none {
702
787
  appearance: none;
703
788
  }
@@ -707,6 +792,9 @@
707
792
  .grid-cols-2 {
708
793
  grid-template-columns: repeat(2, minmax(0, 1fr));
709
794
  }
795
+ .grid-cols-3 {
796
+ grid-template-columns: repeat(3, minmax(0, 1fr));
797
+ }
710
798
  .grid-cols-6 {
711
799
  grid-template-columns: repeat(6, minmax(0, 1fr));
712
800
  }
@@ -734,6 +822,9 @@
734
822
  .justify-end {
735
823
  justify-content: flex-end;
736
824
  }
825
+ .gap-1 {
826
+ gap: calc(var(--spacing) * 1);
827
+ }
737
828
  .gap-2 {
738
829
  gap: calc(var(--spacing) * 2);
739
830
  }
@@ -801,6 +892,9 @@
801
892
  .gap-x-3 {
802
893
  column-gap: calc(var(--spacing) * 3);
803
894
  }
895
+ .gap-x-4 {
896
+ column-gap: calc(var(--spacing) * 4);
897
+ }
804
898
  .-space-x-px {
805
899
  :where(& > :not(:last-child)) {
806
900
  --tw-space-x-reverse: 0;
@@ -829,6 +923,9 @@
829
923
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
830
924
  }
831
925
  }
926
+ .gap-y-5 {
927
+ row-gap: calc(var(--spacing) * 5);
928
+ }
832
929
  .gap-y-7 {
833
930
  row-gap: calc(var(--spacing) * 7);
834
931
  }
@@ -856,12 +953,6 @@
856
953
  border-color: var(--color-gray-300);
857
954
  }
858
955
  }
859
- .self-center {
860
- align-self: center;
861
- }
862
- .justify-self-end {
863
- justify-self: flex-end;
864
- }
865
956
  .truncate {
866
957
  overflow: hidden;
867
958
  text-overflow: ellipsis;
@@ -894,6 +985,17 @@
894
985
  .rounded-sm {
895
986
  border-radius: var(--radius-sm);
896
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
+ }
897
999
  .border {
898
1000
  border-style: var(--tw-border-style);
899
1001
  border-width: 1px;
@@ -906,6 +1008,10 @@
906
1008
  border-style: var(--tw-border-style);
907
1009
  border-width: 2px;
908
1010
  }
1011
+ .border-3 {
1012
+ border-style: var(--tw-border-style);
1013
+ border-width: 3px;
1014
+ }
909
1015
  .border-t {
910
1016
  border-top-style: var(--tw-border-style);
911
1017
  border-top-width: 1px;
@@ -918,6 +1024,10 @@
918
1024
  border-bottom-style: var(--tw-border-style);
919
1025
  border-bottom-width: 2px;
920
1026
  }
1027
+ .border-l-0 {
1028
+ border-left-style: var(--tw-border-style);
1029
+ border-left-width: 0px;
1030
+ }
921
1031
  .border-l-4 {
922
1032
  border-left-style: var(--tw-border-style);
923
1033
  border-left-width: 4px;
@@ -929,6 +1039,9 @@
929
1039
  .border-blue-200 {
930
1040
  border-color: var(--color-blue-200);
931
1041
  }
1042
+ .border-blue-300 {
1043
+ border-color: var(--color-blue-300);
1044
+ }
932
1045
  .border-blue-500 {
933
1046
  border-color: var(--color-blue-500);
934
1047
  }
@@ -953,12 +1066,18 @@
953
1066
  .border-gray-300 {
954
1067
  border-color: var(--color-gray-300);
955
1068
  }
1069
+ .border-gray-400 {
1070
+ border-color: var(--color-gray-400);
1071
+ }
956
1072
  .border-gray-500 {
957
1073
  border-color: var(--color-gray-500);
958
1074
  }
959
1075
  .border-gray-600 {
960
1076
  border-color: var(--color-gray-600);
961
1077
  }
1078
+ .border-green-200 {
1079
+ border-color: var(--color-green-200);
1080
+ }
962
1081
  .border-green-300 {
963
1082
  border-color: var(--color-green-300);
964
1083
  }
@@ -968,18 +1087,24 @@
968
1087
  .border-info-700 {
969
1088
  border-color: var(--color-info-700);
970
1089
  }
971
- .border-primary-500 {
972
- border-color: var(--color-primary-500);
973
- }
974
1090
  .border-primary-600 {
975
1091
  border-color: var(--color-primary-600);
976
1092
  }
977
1093
  .border-primary-700 {
978
1094
  border-color: var(--color-primary-700);
979
1095
  }
1096
+ .border-red-200 {
1097
+ border-color: var(--color-red-200);
1098
+ }
980
1099
  .border-red-300 {
981
1100
  border-color: var(--color-red-300);
982
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
+ }
983
1108
  .border-secondary-600 {
984
1109
  border-color: var(--color-secondary-600);
985
1110
  }
@@ -1004,6 +1129,18 @@
1004
1129
  .border-yellow-200 {
1005
1130
  border-color: var(--color-yellow-200);
1006
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
+ }
1007
1144
  .bg-blue-50 {
1008
1145
  background-color: var(--color-blue-50);
1009
1146
  }
@@ -1028,6 +1165,12 @@
1028
1165
  .bg-default-600 {
1029
1166
  background-color: var(--color-default-600);
1030
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
+ }
1031
1174
  .bg-gray-50 {
1032
1175
  background-color: var(--color-gray-50);
1033
1176
  }
@@ -1052,12 +1195,27 @@
1052
1195
  .bg-gray-900 {
1053
1196
  background-color: var(--color-gray-900);
1054
1197
  }
1198
+ .bg-green-50 {
1199
+ background-color: var(--color-green-50);
1200
+ }
1055
1201
  .bg-green-100 {
1056
1202
  background-color: var(--color-green-100);
1057
1203
  }
1058
1204
  .bg-green-500 {
1059
1205
  background-color: var(--color-green-500);
1060
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
+ }
1061
1219
  .bg-info-600 {
1062
1220
  background-color: var(--color-info-600);
1063
1221
  }
@@ -1067,15 +1225,33 @@
1067
1225
  .bg-primary-600 {
1068
1226
  background-color: var(--color-primary-600);
1069
1227
  }
1228
+ .bg-red-50 {
1229
+ background-color: var(--color-red-50);
1230
+ }
1070
1231
  .bg-red-100 {
1071
1232
  background-color: var(--color-red-100);
1072
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
+ }
1073
1240
  .bg-red-600 {
1074
1241
  background-color: var(--color-red-600);
1075
1242
  }
1243
+ .bg-rose-200 {
1244
+ background-color: var(--color-rose-200);
1245
+ }
1076
1246
  .bg-secondary-600 {
1077
1247
  background-color: var(--color-secondary-600);
1078
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
+ }
1079
1255
  .bg-success-50 {
1080
1256
  background-color: var(--color-success-50);
1081
1257
  }
@@ -1100,6 +1276,9 @@
1100
1276
  .object-cover {
1101
1277
  object-fit: cover;
1102
1278
  }
1279
+ .p-0 {
1280
+ padding: calc(var(--spacing) * 0);
1281
+ }
1103
1282
  .p-1 {
1104
1283
  padding: calc(var(--spacing) * 1);
1105
1284
  }
@@ -1172,12 +1351,6 @@
1172
1351
  .py-12 {
1173
1352
  padding-block: calc(var(--spacing) * 12);
1174
1353
  }
1175
- .pt-1 {
1176
- padding-top: calc(var(--spacing) * 1);
1177
- }
1178
- .pt-2 {
1179
- padding-top: calc(var(--spacing) * 2);
1180
- }
1181
1354
  .pt-4 {
1182
1355
  padding-top: calc(var(--spacing) * 4);
1183
1356
  }
@@ -1190,14 +1363,14 @@
1190
1363
  .pr-4 {
1191
1364
  padding-right: calc(var(--spacing) * 4);
1192
1365
  }
1193
- .pr-8 {
1194
- padding-right: calc(var(--spacing) * 8);
1195
- }
1196
1366
  .pr-10 {
1197
1367
  padding-right: calc(var(--spacing) * 10);
1198
1368
  }
1199
- .pb-3 {
1200
- 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);
1201
1374
  }
1202
1375
  .pb-4 {
1203
1376
  padding-bottom: calc(var(--spacing) * 4);
@@ -1205,9 +1378,15 @@
1205
1378
  .pl-3 {
1206
1379
  padding-left: calc(var(--spacing) * 3);
1207
1380
  }
1381
+ .pl-4 {
1382
+ padding-left: calc(var(--spacing) * 4);
1383
+ }
1208
1384
  .pl-10 {
1209
1385
  padding-left: calc(var(--spacing) * 10);
1210
1386
  }
1387
+ .pl-12 {
1388
+ padding-left: calc(var(--spacing) * 12);
1389
+ }
1211
1390
  .text-center {
1212
1391
  text-align: center;
1213
1392
  }
@@ -1235,10 +1414,6 @@
1235
1414
  font-size: var(--text-4xl);
1236
1415
  line-height: var(--tw-leading, var(--text-4xl--line-height));
1237
1416
  }
1238
- .text-6xl {
1239
- font-size: var(--text-6xl);
1240
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1241
- }
1242
1417
  .text-base {
1243
1418
  font-size: var(--text-base);
1244
1419
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1325,12 +1500,21 @@
1325
1500
  .whitespace-nowrap {
1326
1501
  white-space: nowrap;
1327
1502
  }
1503
+ .text-\[\#custom-color\] {
1504
+ color: #custom-color;
1505
+ }
1506
+ .text-blue-400 {
1507
+ color: var(--color-blue-400);
1508
+ }
1328
1509
  .text-blue-500 {
1329
1510
  color: var(--color-blue-500);
1330
1511
  }
1331
1512
  .text-blue-600 {
1332
1513
  color: var(--color-blue-600);
1333
1514
  }
1515
+ .text-blue-700 {
1516
+ color: var(--color-blue-700);
1517
+ }
1334
1518
  .text-blue-800 {
1335
1519
  color: var(--color-blue-800);
1336
1520
  }
@@ -1355,6 +1539,9 @@
1355
1539
  .text-default-900 {
1356
1540
  color: var(--color-default-900);
1357
1541
  }
1542
+ .text-emerald-900 {
1543
+ color: var(--color-emerald-900);
1544
+ }
1358
1545
  .text-gray-100 {
1359
1546
  color: var(--color-gray-100);
1360
1547
  }
@@ -1388,12 +1575,18 @@
1388
1575
  .text-green-800 {
1389
1576
  color: var(--color-green-800);
1390
1577
  }
1578
+ .text-indigo-100 {
1579
+ color: var(--color-indigo-100);
1580
+ }
1391
1581
  .text-indigo-500 {
1392
1582
  color: var(--color-indigo-500);
1393
1583
  }
1394
1584
  .text-indigo-600 {
1395
1585
  color: var(--color-indigo-600);
1396
1586
  }
1587
+ .text-indigo-900 {
1588
+ color: var(--color-indigo-900);
1589
+ }
1397
1590
  .text-info-600 {
1398
1591
  color: var(--color-info-600);
1399
1592
  }
@@ -1403,9 +1596,6 @@
1403
1596
  .text-primary-600 {
1404
1597
  color: var(--color-primary-600);
1405
1598
  }
1406
- .text-primary-700 {
1407
- color: var(--color-primary-700);
1408
- }
1409
1599
  .text-purple-600 {
1410
1600
  color: var(--color-purple-600);
1411
1601
  }
@@ -1421,9 +1611,21 @@
1421
1611
  .text-red-800 {
1422
1612
  color: var(--color-red-800);
1423
1613
  }
1614
+ .text-red-900 {
1615
+ color: var(--color-red-900);
1616
+ }
1617
+ .text-rose-900 {
1618
+ color: var(--color-rose-900);
1619
+ }
1424
1620
  .text-secondary-600 {
1425
1621
  color: var(--color-secondary-600);
1426
1622
  }
1623
+ .text-slate-100 {
1624
+ color: var(--color-slate-100);
1625
+ }
1626
+ .text-slate-700 {
1627
+ color: var(--color-slate-700);
1628
+ }
1427
1629
  .text-success-600 {
1428
1630
  color: var(--color-success-600);
1429
1631
  }
@@ -1448,9 +1650,18 @@
1448
1650
  .text-yellow-800 {
1449
1651
  color: var(--color-yellow-800);
1450
1652
  }
1653
+ .capitalize {
1654
+ text-transform: capitalize;
1655
+ }
1656
+ .lowercase {
1657
+ text-transform: lowercase;
1658
+ }
1451
1659
  .uppercase {
1452
1660
  text-transform: uppercase;
1453
1661
  }
1662
+ .no-underline {
1663
+ text-decoration-line: none;
1664
+ }
1454
1665
  .underline {
1455
1666
  text-decoration-line: underline;
1456
1667
  }
@@ -1467,6 +1678,14 @@
1467
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));
1468
1679
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1469
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
+ }
1470
1689
  .shadow-lg {
1471
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));
1472
1691
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1487,6 +1706,10 @@
1487
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));
1488
1707
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1489
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
+ }
1490
1713
  .ring-1 {
1491
1714
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1492
1715
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1495,14 +1718,8 @@
1495
1718
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1496
1719
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1497
1720
  }
1498
- .ring-black {
1499
- --tw-ring-color: var(--color-black);
1500
- }
1501
- .ring-black\/5 {
1502
- --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
1503
- @supports (color: color-mix(in lab, red, red)) {
1504
- --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1505
- }
1721
+ .ring-blue-500 {
1722
+ --tw-ring-color: var(--color-blue-500);
1506
1723
  }
1507
1724
  .ring-danger-400 {
1508
1725
  --tw-ring-color: var(--color-danger-400);
@@ -1510,29 +1727,20 @@
1510
1727
  .ring-gray-300 {
1511
1728
  --tw-ring-color: var(--color-gray-300);
1512
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
+ }
1513
1736
  .ring-offset-2 {
1514
1737
  --tw-ring-offset-width: 2px;
1515
1738
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1516
1739
  }
1517
- .outline-hidden {
1518
- --tw-outline-style: none;
1519
- outline-style: none;
1520
- @media (forced-colors: active) {
1521
- outline: 2px solid transparent;
1522
- outline-offset: 2px;
1523
- }
1524
- }
1525
1740
  .outline {
1526
1741
  outline-style: var(--tw-outline-style);
1527
1742
  outline-width: 1px;
1528
1743
  }
1529
- .outline-1 {
1530
- outline-style: var(--tw-outline-style);
1531
- outline-width: 1px;
1532
- }
1533
- .outline-default-300 {
1534
- outline-color: var(--color-default-300);
1535
- }
1536
1744
  .filter {
1537
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,);
1538
1746
  }
@@ -1561,10 +1769,6 @@
1561
1769
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1562
1770
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1563
1771
  }
1564
- .duration-75 {
1565
- --tw-duration: 75ms;
1566
- transition-duration: 75ms;
1567
- }
1568
1772
  .duration-100 {
1569
1773
  --tw-duration: 100ms;
1570
1774
  transition-duration: 100ms;
@@ -1603,6 +1807,13 @@
1603
1807
  }
1604
1808
  }
1605
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
+ }
1606
1817
  .group-hover\:text-primary-600 {
1607
1818
  &:is(:where(.group):hover *) {
1608
1819
  @media (hover: hover) {
@@ -1642,18 +1853,24 @@
1642
1853
  }
1643
1854
  }
1644
1855
  }
1645
- .hover\:border-12 {
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 {
1646
1864
  &:hover {
1647
1865
  @media (hover: hover) {
1648
- border-style: var(--tw-border-style);
1649
- border-width: 12px;
1866
+ background-color: var(--color-blue-100);
1650
1867
  }
1651
1868
  }
1652
1869
  }
1653
- .hover\:border-gray-300 {
1870
+ .hover\:bg-blue-200 {
1654
1871
  &:hover {
1655
1872
  @media (hover: hover) {
1656
- border-color: var(--color-gray-300);
1873
+ background-color: var(--color-blue-200);
1657
1874
  }
1658
1875
  }
1659
1876
  }
@@ -1720,6 +1937,13 @@
1720
1937
  }
1721
1938
  }
1722
1939
  }
1940
+ .hover\:bg-gray-400 {
1941
+ &:hover {
1942
+ @media (hover: hover) {
1943
+ background-color: var(--color-gray-400);
1944
+ }
1945
+ }
1946
+ }
1723
1947
  .hover\:bg-gray-500 {
1724
1948
  &:hover {
1725
1949
  @media (hover: hover) {
@@ -1734,6 +1958,20 @@
1734
1958
  }
1735
1959
  }
1736
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
+ }
1737
1975
  .hover\:bg-info-50 {
1738
1976
  &:hover {
1739
1977
  @media (hover: hover) {
@@ -1769,6 +2007,13 @@
1769
2007
  }
1770
2008
  }
1771
2009
  }
2010
+ .hover\:bg-red-600 {
2011
+ &:hover {
2012
+ @media (hover: hover) {
2013
+ background-color: var(--color-red-600);
2014
+ }
2015
+ }
2016
+ }
1772
2017
  .hover\:bg-red-700 {
1773
2018
  &:hover {
1774
2019
  @media (hover: hover) {
@@ -1818,6 +2063,13 @@
1818
2063
  }
1819
2064
  }
1820
2065
  }
2066
+ .hover\:bg-white {
2067
+ &:hover {
2068
+ @media (hover: hover) {
2069
+ background-color: var(--color-white);
2070
+ }
2071
+ }
2072
+ }
1821
2073
  .hover\:text-blue-800 {
1822
2074
  &:hover {
1823
2075
  @media (hover: hover) {
@@ -1867,6 +2119,20 @@
1867
2119
  }
1868
2120
  }
1869
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
+ }
1870
2136
  .hover\:text-red-900 {
1871
2137
  &:hover {
1872
2138
  @media (hover: hover) {
@@ -1881,6 +2147,13 @@
1881
2147
  }
1882
2148
  }
1883
2149
  }
2150
+ .hover\:no-underline {
2151
+ &:hover {
2152
+ @media (hover: hover) {
2153
+ text-decoration-line: none;
2154
+ }
2155
+ }
2156
+ }
1884
2157
  .hover\:underline {
1885
2158
  &:hover {
1886
2159
  @media (hover: hover) {
@@ -1896,6 +2169,19 @@
1896
2169
  }
1897
2170
  }
1898
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
+ }
1899
2185
  .focus\:border-blue-500 {
1900
2186
  &:focus {
1901
2187
  border-color: var(--color-blue-500);
@@ -1906,12 +2192,6 @@
1906
2192
  border-color: var(--color-indigo-500);
1907
2193
  }
1908
2194
  }
1909
- .focus\:ring-0 {
1910
- &:focus {
1911
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1912
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1913
- }
1914
- }
1915
2195
  .focus\:ring-2 {
1916
2196
  &:focus {
1917
2197
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1933,11 +2213,6 @@
1933
2213
  --tw-ring-color: var(--color-indigo-500);
1934
2214
  }
1935
2215
  }
1936
- .focus\:ring-primary-500 {
1937
- &:focus {
1938
- --tw-ring-color: var(--color-primary-500);
1939
- }
1940
- }
1941
2216
  .focus\:ring-primary-600 {
1942
2217
  &:focus {
1943
2218
  --tw-ring-color: var(--color-primary-600);
@@ -1949,37 +2224,15 @@
1949
2224
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1950
2225
  }
1951
2226
  }
1952
- .focus\:outline-hidden {
1953
- &:focus {
1954
- --tw-outline-style: none;
1955
- outline-style: none;
1956
- @media (forced-colors: active) {
1957
- outline: 2px solid transparent;
1958
- outline-offset: 2px;
1959
- }
1960
- }
1961
- }
1962
2227
  .focus\:outline-none {
1963
2228
  &:focus {
1964
2229
  --tw-outline-style: none;
1965
2230
  outline-style: none;
1966
2231
  }
1967
2232
  }
1968
- .focus-visible\:ring-2 {
1969
- &:focus-visible {
1970
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1971
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1972
- }
1973
- }
1974
- .focus-visible\:ring-primary-500 {
1975
- &:focus-visible {
1976
- --tw-ring-color: var(--color-primary-500);
1977
- }
1978
- }
1979
- .focus-visible\:ring-offset-2 {
1980
- &:focus-visible {
1981
- --tw-ring-offset-width: 2px;
1982
- --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);
1983
2236
  }
1984
2237
  }
1985
2238
  .disabled\:cursor-not-allowed {
@@ -2007,11 +2260,6 @@
2007
2260
  margin-inline: calc(var(--spacing) * 0);
2008
2261
  }
2009
2262
  }
2010
- .sm\:-my-px {
2011
- @media (width >= 40rem) {
2012
- margin-block: -1px;
2013
- }
2014
- }
2015
2263
  .sm\:my-8 {
2016
2264
  @media (width >= 40rem) {
2017
2265
  margin-block: calc(var(--spacing) * 8);
@@ -2037,11 +2285,6 @@
2037
2285
  margin-left: calc(var(--spacing) * 4);
2038
2286
  }
2039
2287
  }
2040
- .sm\:ml-6 {
2041
- @media (width >= 40rem) {
2042
- margin-left: calc(var(--spacing) * 6);
2043
- }
2044
- }
2045
2288
  .sm\:block {
2046
2289
  @media (width >= 40rem) {
2047
2290
  display: block;
@@ -2057,17 +2300,6 @@
2057
2300
  display: grid;
2058
2301
  }
2059
2302
  }
2060
- .sm\:hidden {
2061
- @media (width >= 40rem) {
2062
- display: none;
2063
- }
2064
- }
2065
- .sm\:size-4 {
2066
- @media (width >= 40rem) {
2067
- width: calc(var(--spacing) * 4);
2068
- height: calc(var(--spacing) * 4);
2069
- }
2070
- }
2071
2303
  .sm\:size-10 {
2072
2304
  @media (width >= 40rem) {
2073
2305
  width: calc(var(--spacing) * 10);
@@ -2151,15 +2383,6 @@
2151
2383
  gap: calc(var(--spacing) * 4);
2152
2384
  }
2153
2385
  }
2154
- .sm\:space-x-8 {
2155
- @media (width >= 40rem) {
2156
- :where(& > :not(:last-child)) {
2157
- --tw-space-x-reverse: 0;
2158
- margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
2159
- margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
2160
- }
2161
- }
2162
- }
2163
2386
  .sm\:p-0 {
2164
2387
  @media (width >= 40rem) {
2165
2388
  padding: calc(var(--spacing) * 0);
@@ -2192,12 +2415,6 @@
2192
2415
  line-height: var(--tw-leading, var(--text-sm--line-height));
2193
2416
  }
2194
2417
  }
2195
- .sm\:text-sm\/6 {
2196
- @media (width >= 40rem) {
2197
- font-size: var(--text-sm);
2198
- line-height: calc(var(--spacing) * 6);
2199
- }
2200
- }
2201
2418
  .sm\:tracking-tight {
2202
2419
  @media (width >= 40rem) {
2203
2420
  --tw-tracking: var(--tracking-tight);
@@ -2214,6 +2431,16 @@
2214
2431
  }
2215
2432
  }
2216
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
+ }
2217
2444
  .md\:col-span-5 {
2218
2445
  @media (width >= 48rem) {
2219
2446
  grid-column: span 5 / span 5;
@@ -2255,16 +2482,6 @@
2255
2482
  line-height: var(--tw-leading, var(--text-3xl--line-height));
2256
2483
  }
2257
2484
  }
2258
- .lg\:block {
2259
- @media (width >= 64rem) {
2260
- display: block;
2261
- }
2262
- }
2263
- .lg\:hidden {
2264
- @media (width >= 64rem) {
2265
- display: none;
2266
- }
2267
- }
2268
2485
  .lg\:grid-cols-2 {
2269
2486
  @media (width >= 64rem) {
2270
2487
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2595,6 +2812,11 @@
2595
2812
  syntax: "*";
2596
2813
  inherits: false;
2597
2814
  }
2815
+ @keyframes spin {
2816
+ to {
2817
+ transform: rotate(360deg);
2818
+ }
2819
+ }
2598
2820
  @keyframes pulse {
2599
2821
  50% {
2600
2822
  opacity: 0.5;