hive-react-kit 0.9.7 → 0.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/build.css CHANGED
@@ -124,6 +124,7 @@
124
124
  --tracking-wider: 0.05em;
125
125
  --tracking-widest: 0.1em;
126
126
  --leading-tight: 1.25;
127
+ --leading-snug: 1.375;
127
128
  --leading-relaxed: 1.625;
128
129
  --radius-sm: 0.25rem;
129
130
  --radius-md: 0.375rem;
@@ -335,6 +336,9 @@
335
336
  .-top-8 {
336
337
  top: calc(var(--spacing) * -8);
337
338
  }
339
+ .-top-10 {
340
+ top: calc(var(--spacing) * -10);
341
+ }
338
342
  .top-0 {
339
343
  top: calc(var(--spacing) * 0);
340
344
  }
@@ -356,6 +360,9 @@
356
360
  .top-\[56px\] {
357
361
  top: 56px;
358
362
  }
363
+ .top-\[calc\(env\(safe-area-inset-top\,0px\)\+1rem\)\] {
364
+ top: calc(env(safe-area-inset-top,0px) + 1rem);
365
+ }
359
366
  .top-full {
360
367
  top: 100%;
361
368
  }
@@ -365,6 +372,12 @@
365
372
  .right-0 {
366
373
  right: calc(var(--spacing) * 0);
367
374
  }
375
+ .right-1 {
376
+ right: calc(var(--spacing) * 1);
377
+ }
378
+ .right-1\.5 {
379
+ right: calc(var(--spacing) * 1.5);
380
+ }
368
381
  .right-2 {
369
382
  right: calc(var(--spacing) * 2);
370
383
  }
@@ -383,6 +396,12 @@
383
396
  .bottom-0 {
384
397
  bottom: calc(var(--spacing) * 0);
385
398
  }
399
+ .bottom-1\.5 {
400
+ bottom: calc(var(--spacing) * 1.5);
401
+ }
402
+ .bottom-2 {
403
+ bottom: calc(var(--spacing) * 2);
404
+ }
386
405
  .bottom-3 {
387
406
  bottom: calc(var(--spacing) * 3);
388
407
  }
@@ -395,6 +414,12 @@
395
414
  .left-0 {
396
415
  left: calc(var(--spacing) * 0);
397
416
  }
417
+ .left-1 {
418
+ left: calc(var(--spacing) * 1);
419
+ }
420
+ .left-1\.5 {
421
+ left: calc(var(--spacing) * 1.5);
422
+ }
398
423
  .left-1\/2 {
399
424
  left: calc(1 / 2 * 100%);
400
425
  }
@@ -440,6 +465,9 @@
440
465
  .z-\[2000\] {
441
466
  z-index: 2000;
442
467
  }
468
+ .z-\[2010\] {
469
+ z-index: 2010;
470
+ }
443
471
  .z-\[9998\] {
444
472
  z-index: 9998;
445
473
  }
@@ -473,6 +501,9 @@
473
501
  .m-2 {
474
502
  margin: calc(var(--spacing) * 2);
475
503
  }
504
+ .m-3 {
505
+ margin: calc(var(--spacing) * 3);
506
+ }
476
507
  .-mx-2 {
477
508
  margin-inline: calc(var(--spacing) * -2);
478
509
  }
@@ -497,6 +528,9 @@
497
528
  .my-2 {
498
529
  margin-block: calc(var(--spacing) * 2);
499
530
  }
531
+ .my-3 {
532
+ margin-block: calc(var(--spacing) * 3);
533
+ }
500
534
  .my-6 {
501
535
  margin-block: calc(var(--spacing) * 6);
502
536
  }
@@ -536,6 +570,9 @@
536
570
  .mr-2 {
537
571
  margin-right: calc(var(--spacing) * 2);
538
572
  }
573
+ .mr-3 {
574
+ margin-right: calc(var(--spacing) * 3);
575
+ }
539
576
  .mr-4 {
540
577
  margin-right: calc(var(--spacing) * 4);
541
578
  }
@@ -614,6 +651,12 @@
614
651
  -webkit-box-orient: vertical;
615
652
  -webkit-line-clamp: 2;
616
653
  }
654
+ .line-clamp-6 {
655
+ overflow: hidden;
656
+ display: -webkit-box;
657
+ -webkit-box-orient: vertical;
658
+ -webkit-line-clamp: 6;
659
+ }
617
660
  .scrollbar-hide {
618
661
  -ms-overflow-style: none;
619
662
  scrollbar-width: none;
@@ -645,6 +688,9 @@
645
688
  .table {
646
689
  display: table;
647
690
  }
691
+ .aspect-\[4\/3\] {
692
+ aspect-ratio: 4/3;
693
+ }
648
694
  .aspect-video {
649
695
  aspect-ratio: var(--aspect-video);
650
696
  }
@@ -687,6 +733,9 @@
687
733
  .h-10 {
688
734
  height: calc(var(--spacing) * 10);
689
735
  }
736
+ .h-11 {
737
+ height: calc(var(--spacing) * 11);
738
+ }
690
739
  .h-12 {
691
740
  height: calc(var(--spacing) * 12);
692
741
  }
@@ -729,6 +778,12 @@
729
778
  .h-\[400px\] {
730
779
  height: 400px;
731
780
  }
781
+ .h-\[calc\(100vh-200px\)\] {
782
+ height: calc(100vh - 200px);
783
+ }
784
+ .h-\[calc\(100vh-260px\)\] {
785
+ height: calc(100vh - 260px);
786
+ }
732
787
  .h-auto {
733
788
  height: auto;
734
789
  }
@@ -795,6 +850,9 @@
795
850
  .min-h-\[400px\] {
796
851
  min-height: 400px;
797
852
  }
853
+ .min-h-\[420px\] {
854
+ min-height: 420px;
855
+ }
798
856
  .min-h-screen {
799
857
  min-height: 100vh;
800
858
  }
@@ -804,6 +862,9 @@
804
862
  .w-1\/3 {
805
863
  width: calc(1 / 3 * 100%);
806
864
  }
865
+ .w-1\/4 {
866
+ width: calc(1 / 4 * 100%);
867
+ }
807
868
  .w-2 {
808
869
  width: calc(var(--spacing) * 2);
809
870
  }
@@ -858,6 +919,9 @@
858
919
  .w-10 {
859
920
  width: calc(var(--spacing) * 10);
860
921
  }
922
+ .w-11 {
923
+ width: calc(var(--spacing) * 11);
924
+ }
861
925
  .w-11\/12 {
862
926
  width: calc(11 / 12 * 100%);
863
927
  }
@@ -903,9 +967,15 @@
903
967
  .w-64 {
904
968
  width: calc(var(--spacing) * 64);
905
969
  }
970
+ .w-72 {
971
+ width: calc(var(--spacing) * 72);
972
+ }
906
973
  .w-\[280px\] {
907
974
  width: 280px;
908
975
  }
976
+ .w-auto {
977
+ width: auto;
978
+ }
909
979
  .w-full {
910
980
  width: 100%;
911
981
  }
@@ -936,6 +1006,12 @@
936
1006
  .max-w-\[280px\] {
937
1007
  max-width: 280px;
938
1008
  }
1009
+ .max-w-\[720px\] {
1010
+ max-width: 720px;
1011
+ }
1012
+ .max-w-\[1600px\] {
1013
+ max-width: 1600px;
1014
+ }
939
1015
  .max-w-full {
940
1016
  max-width: 100%;
941
1017
  }
@@ -1065,6 +1141,9 @@
1065
1141
  .items-start {
1066
1142
  align-items: flex-start;
1067
1143
  }
1144
+ .items-stretch {
1145
+ align-items: stretch;
1146
+ }
1068
1147
  .justify-between {
1069
1148
  justify-content: space-between;
1070
1149
  }
@@ -1153,6 +1232,9 @@
1153
1232
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
1154
1233
  }
1155
1234
  }
1235
+ .gap-x-1\.5 {
1236
+ column-gap: calc(var(--spacing) * 1.5);
1237
+ }
1156
1238
  .gap-x-2 {
1157
1239
  column-gap: calc(var(--spacing) * 2);
1158
1240
  }
@@ -1190,6 +1272,12 @@
1190
1272
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
1191
1273
  }
1192
1274
  }
1275
+ .gap-y-0 {
1276
+ row-gap: calc(var(--spacing) * 0);
1277
+ }
1278
+ .gap-y-0\.5 {
1279
+ row-gap: calc(var(--spacing) * 0.5);
1280
+ }
1193
1281
  .gap-y-1 {
1194
1282
  row-gap: calc(var(--spacing) * 1);
1195
1283
  }
@@ -1223,6 +1311,9 @@
1223
1311
  }
1224
1312
  }
1225
1313
  }
1314
+ .self-stretch {
1315
+ align-self: stretch;
1316
+ }
1226
1317
  .truncate {
1227
1318
  overflow: hidden;
1228
1319
  text-overflow: ellipsis;
@@ -1457,6 +1548,21 @@
1457
1548
  background-color: rgba(255, 255, 255, 0.04);
1458
1549
  border: 1px solid rgba(255, 255, 255, 0.08);
1459
1550
  }
1551
+ .bg-\[\#0f1419\] {
1552
+ background-color: #0f1419;
1553
+ }
1554
+ .bg-\[\#1a1d21\] {
1555
+ background-color: #1a1d21;
1556
+ }
1557
+ .bg-\[\#1a1d22\] {
1558
+ background-color: #1a1d22;
1559
+ }
1560
+ .bg-\[\#1a1e22\] {
1561
+ background-color: #1a1e22;
1562
+ }
1563
+ .bg-\[\#1f2429\] {
1564
+ background-color: #1f2429;
1565
+ }
1460
1566
  .bg-\[\#2f353d\] {
1461
1567
  background-color: #2f353d;
1462
1568
  }
@@ -1466,15 +1572,27 @@
1466
1572
  .bg-\[\#3a424a\] {
1467
1573
  background-color: #3a424a;
1468
1574
  }
1575
+ .bg-\[\#3a424a\]\/70 {
1576
+ background-color: color-mix(in oklab, #3a424a 70%, transparent);
1577
+ }
1469
1578
  .bg-\[\#262b30\] {
1470
1579
  background-color: #262b30;
1471
1580
  }
1472
1581
  .bg-\[\#212529\] {
1473
1582
  background-color: #212529;
1474
1583
  }
1584
+ .bg-\[\#212529\]\/85 {
1585
+ background-color: color-mix(in oklab, #212529 85%, transparent);
1586
+ }
1587
+ .bg-\[\#212529\]\/95 {
1588
+ background-color: color-mix(in oklab, #212529 95%, transparent);
1589
+ }
1475
1590
  .bg-\[\#e31337\] {
1476
1591
  background-color: #e31337;
1477
1592
  }
1593
+ .bg-\[\#e31337\]\/15 {
1594
+ background-color: color-mix(in oklab, #e31337 15%, transparent);
1595
+ }
1478
1596
  .bg-amber-500\/15 {
1479
1597
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
1480
1598
  @supports (color: color-mix(in lab, red, red)) {
@@ -1532,6 +1650,12 @@
1532
1650
  background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
1533
1651
  }
1534
1652
  }
1653
+ .bg-black\/85 {
1654
+ background-color: color-mix(in srgb, #000 85%, transparent);
1655
+ @supports (color: color-mix(in lab, red, red)) {
1656
+ background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
1657
+ }
1658
+ }
1535
1659
  .bg-black\/90 {
1536
1660
  background-color: color-mix(in srgb, #000 90%, transparent);
1537
1661
  @supports (color: color-mix(in lab, red, red)) {
@@ -1935,6 +2059,9 @@
1935
2059
  .bg-center {
1936
2060
  background-position: center;
1937
2061
  }
2062
+ .fill-\[\#e31337\] {
2063
+ fill: #e31337;
2064
+ }
1938
2065
  .fill-current {
1939
2066
  fill: currentcolor;
1940
2067
  }
@@ -2064,6 +2191,12 @@
2064
2191
  .pt-8 {
2065
2192
  padding-top: calc(var(--spacing) * 8);
2066
2193
  }
2194
+ .pt-\[calc\(env\(safe-area-inset-top\,0px\)\+1rem\)\] {
2195
+ padding-top: calc(env(safe-area-inset-top,0px) + 1rem);
2196
+ }
2197
+ .pr-1 {
2198
+ padding-right: calc(var(--spacing) * 1);
2199
+ }
2067
2200
  .pr-3 {
2068
2201
  padding-right: calc(var(--spacing) * 3);
2069
2202
  }
@@ -2179,14 +2312,17 @@
2179
2312
  .text-\[11px\] {
2180
2313
  font-size: 11px;
2181
2314
  }
2182
- .leading-none {
2183
- --tw-leading: 1;
2184
- line-height: 1;
2315
+ .text-\[13px\] {
2316
+ font-size: 13px;
2185
2317
  }
2186
2318
  .leading-relaxed {
2187
2319
  --tw-leading: var(--leading-relaxed);
2188
2320
  line-height: var(--leading-relaxed);
2189
2321
  }
2322
+ .leading-snug {
2323
+ --tw-leading: var(--leading-snug);
2324
+ line-height: var(--leading-snug);
2325
+ }
2190
2326
  .leading-tight {
2191
2327
  --tw-leading: var(--leading-tight);
2192
2328
  line-height: var(--leading-tight);
@@ -2237,6 +2373,9 @@
2237
2373
  .text-\[\#3a424a\] {
2238
2374
  color: #3a424a;
2239
2375
  }
2376
+ .text-\[\#6b7280\] {
2377
+ color: #6b7280;
2378
+ }
2240
2379
  .text-\[\#6f7780\] {
2241
2380
  color: #6f7780;
2242
2381
  }
@@ -2252,6 +2391,9 @@
2252
2391
  .text-\[\#f0f0f8\] {
2253
2392
  color: #f0f0f8;
2254
2393
  }
2394
+ .text-\[\#ff8fa3\] {
2395
+ color: #ff8fa3;
2396
+ }
2255
2397
  .text-amber-300 {
2256
2398
  color: var(--color-amber-300);
2257
2399
  }
@@ -2393,6 +2535,12 @@
2393
2535
  color: color-mix(in oklab, var(--color-white) 70%, transparent);
2394
2536
  }
2395
2537
  }
2538
+ .text-white\/80 {
2539
+ color: color-mix(in srgb, #fff 80%, transparent);
2540
+ @supports (color: color-mix(in lab, red, red)) {
2541
+ color: color-mix(in oklab, var(--color-white) 80%, transparent);
2542
+ }
2543
+ }
2396
2544
  .text-white\/90 {
2397
2545
  color: color-mix(in srgb, #fff 90%, transparent);
2398
2546
  @supports (color: color-mix(in lab, red, red)) {
@@ -2460,6 +2608,12 @@
2460
2608
  .opacity-50 {
2461
2609
  opacity: 50%;
2462
2610
  }
2611
+ .opacity-80 {
2612
+ opacity: 80%;
2613
+ }
2614
+ .opacity-90 {
2615
+ opacity: 90%;
2616
+ }
2463
2617
  .opacity-100 {
2464
2618
  opacity: 100%;
2465
2619
  }
@@ -2505,12 +2659,21 @@
2505
2659
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
2506
2660
  }
2507
2661
  }
2662
+ .ring-\[\#3a424a\] {
2663
+ --tw-ring-color: #3a424a;
2664
+ }
2508
2665
  .ring-blue-500 {
2509
2666
  --tw-ring-color: var(--color-blue-500);
2510
2667
  }
2511
2668
  .ring-gray-700 {
2512
2669
  --tw-ring-color: var(--color-gray-700);
2513
2670
  }
2671
+ .ring-white\/30 {
2672
+ --tw-ring-color: color-mix(in srgb, #fff 30%, transparent);
2673
+ @supports (color: color-mix(in lab, red, red)) {
2674
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent);
2675
+ }
2676
+ }
2514
2677
  .outline {
2515
2678
  outline-style: var(--tw-outline-style);
2516
2679
  outline-width: 1px;
@@ -2523,6 +2686,11 @@
2523
2686
  .filter {
2524
2687
  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,);
2525
2688
  }
2689
+ .backdrop-blur {
2690
+ --tw-backdrop-blur: blur(8px);
2691
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2692
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2693
+ }
2526
2694
  .backdrop-blur-md {
2527
2695
  --tw-backdrop-blur: blur(var(--blur-md));
2528
2696
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -2708,13 +2876,6 @@
2708
2876
  }
2709
2877
  }
2710
2878
  }
2711
- .hover\:border-\[\#e31337\] {
2712
- &:hover {
2713
- @media (hover: hover) {
2714
- border-color: #e31337;
2715
- }
2716
- }
2717
- }
2718
2879
  .hover\:border-blue-500 {
2719
2880
  &:hover {
2720
2881
  @media (hover: hover) {
@@ -2753,6 +2914,13 @@
2753
2914
  }
2754
2915
  }
2755
2916
  }
2917
+ .hover\:bg-black {
2918
+ &:hover {
2919
+ @media (hover: hover) {
2920
+ background-color: var(--color-black);
2921
+ }
2922
+ }
2923
+ }
2756
2924
  .hover\:bg-black\/60 {
2757
2925
  &:hover {
2758
2926
  @media (hover: hover) {
@@ -2763,12 +2931,12 @@
2763
2931
  }
2764
2932
  }
2765
2933
  }
2766
- .hover\:bg-black\/70 {
2934
+ .hover\:bg-black\/80 {
2767
2935
  &:hover {
2768
2936
  @media (hover: hover) {
2769
- background-color: color-mix(in srgb, #000 70%, transparent);
2937
+ background-color: color-mix(in srgb, #000 80%, transparent);
2770
2938
  @supports (color: color-mix(in lab, red, red)) {
2771
- background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
2939
+ background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
2772
2940
  }
2773
2941
  }
2774
2942
  }
@@ -2953,6 +3121,13 @@
2953
3121
  }
2954
3122
  }
2955
3123
  }
3124
+ .hover\:text-\[\#c51231\] {
3125
+ &:hover {
3126
+ @media (hover: hover) {
3127
+ color: #c51231;
3128
+ }
3129
+ }
3130
+ }
2956
3131
  .hover\:text-\[\#e31337\] {
2957
3132
  &:hover {
2958
3133
  @media (hover: hover) {
@@ -3199,11 +3374,46 @@
3199
3374
  bottom: calc(var(--spacing) * -2);
3200
3375
  }
3201
3376
  }
3377
+ .sm\:m-0 {
3378
+ @media (width >= 40rem) {
3379
+ margin: calc(var(--spacing) * 0);
3380
+ }
3381
+ }
3382
+ .sm\:my-3 {
3383
+ @media (width >= 40rem) {
3384
+ margin-block: calc(var(--spacing) * 3);
3385
+ }
3386
+ }
3202
3387
  .sm\:mt-0 {
3203
3388
  @media (width >= 40rem) {
3204
3389
  margin-top: calc(var(--spacing) * 0);
3205
3390
  }
3206
3391
  }
3392
+ .sm\:mt-1 {
3393
+ @media (width >= 40rem) {
3394
+ margin-top: calc(var(--spacing) * 1);
3395
+ }
3396
+ }
3397
+ .sm\:mt-3 {
3398
+ @media (width >= 40rem) {
3399
+ margin-top: calc(var(--spacing) * 3);
3400
+ }
3401
+ }
3402
+ .sm\:mr-3 {
3403
+ @media (width >= 40rem) {
3404
+ margin-right: calc(var(--spacing) * 3);
3405
+ }
3406
+ }
3407
+ .sm\:mb-1 {
3408
+ @media (width >= 40rem) {
3409
+ margin-bottom: calc(var(--spacing) * 1);
3410
+ }
3411
+ }
3412
+ .sm\:mb-1\.5 {
3413
+ @media (width >= 40rem) {
3414
+ margin-bottom: calc(var(--spacing) * 1.5);
3415
+ }
3416
+ }
3207
3417
  .sm\:mb-2 {
3208
3418
  @media (width >= 40rem) {
3209
3419
  margin-bottom: calc(var(--spacing) * 2);
@@ -3227,6 +3437,14 @@
3227
3437
  -webkit-line-clamp: 3;
3228
3438
  }
3229
3439
  }
3440
+ .sm\:line-clamp-none {
3441
+ @media (width >= 40rem) {
3442
+ overflow: visible;
3443
+ display: block;
3444
+ -webkit-box-orient: horizontal;
3445
+ -webkit-line-clamp: unset;
3446
+ }
3447
+ }
3230
3448
  .sm\:flex {
3231
3449
  @media (width >= 40rem) {
3232
3450
  display: flex;
@@ -3242,6 +3460,16 @@
3242
3460
  display: inline;
3243
3461
  }
3244
3462
  }
3463
+ .sm\:h-3 {
3464
+ @media (width >= 40rem) {
3465
+ height: calc(var(--spacing) * 3);
3466
+ }
3467
+ }
3468
+ .sm\:h-3\.5 {
3469
+ @media (width >= 40rem) {
3470
+ height: calc(var(--spacing) * 3.5);
3471
+ }
3472
+ }
3245
3473
  .sm\:h-4 {
3246
3474
  @media (width >= 40rem) {
3247
3475
  height: calc(var(--spacing) * 4);
@@ -3262,6 +3490,16 @@
3262
3490
  height: calc(var(--spacing) * 8);
3263
3491
  }
3264
3492
  }
3493
+ .sm\:h-9 {
3494
+ @media (width >= 40rem) {
3495
+ height: calc(var(--spacing) * 9);
3496
+ }
3497
+ }
3498
+ .sm\:h-16 {
3499
+ @media (width >= 40rem) {
3500
+ height: calc(var(--spacing) * 16);
3501
+ }
3502
+ }
3265
3503
  .sm\:h-20 {
3266
3504
  @media (width >= 40rem) {
3267
3505
  height: calc(var(--spacing) * 20);
@@ -3292,6 +3530,16 @@
3292
3530
  height: calc(var(--spacing) * 64);
3293
3531
  }
3294
3532
  }
3533
+ .sm\:h-auto {
3534
+ @media (width >= 40rem) {
3535
+ height: auto;
3536
+ }
3537
+ }
3538
+ .sm\:w-3\.5 {
3539
+ @media (width >= 40rem) {
3540
+ width: calc(var(--spacing) * 3.5);
3541
+ }
3542
+ }
3295
3543
  .sm\:w-4 {
3296
3544
  @media (width >= 40rem) {
3297
3545
  width: calc(var(--spacing) * 4);
@@ -3312,11 +3560,31 @@
3312
3560
  width: calc(var(--spacing) * 8);
3313
3561
  }
3314
3562
  }
3563
+ .sm\:w-9 {
3564
+ @media (width >= 40rem) {
3565
+ width: calc(var(--spacing) * 9);
3566
+ }
3567
+ }
3568
+ .sm\:w-12 {
3569
+ @media (width >= 40rem) {
3570
+ width: calc(var(--spacing) * 12);
3571
+ }
3572
+ }
3573
+ .sm\:w-16 {
3574
+ @media (width >= 40rem) {
3575
+ width: calc(var(--spacing) * 16);
3576
+ }
3577
+ }
3315
3578
  .sm\:w-20 {
3316
3579
  @media (width >= 40rem) {
3317
3580
  width: calc(var(--spacing) * 20);
3318
3581
  }
3319
3582
  }
3583
+ .sm\:w-24 {
3584
+ @media (width >= 40rem) {
3585
+ width: calc(var(--spacing) * 24);
3586
+ }
3587
+ }
3320
3588
  .sm\:w-32 {
3321
3589
  @media (width >= 40rem) {
3322
3590
  width: calc(var(--spacing) * 32);
@@ -3327,6 +3595,26 @@
3327
3595
  width: calc(var(--spacing) * 48);
3328
3596
  }
3329
3597
  }
3598
+ .sm\:w-full {
3599
+ @media (width >= 40rem) {
3600
+ width: 100%;
3601
+ }
3602
+ }
3603
+ .sm\:max-w-3xl {
3604
+ @media (width >= 40rem) {
3605
+ max-width: var(--container-3xl);
3606
+ }
3607
+ }
3608
+ .sm\:max-w-md {
3609
+ @media (width >= 40rem) {
3610
+ max-width: var(--container-md);
3611
+ }
3612
+ }
3613
+ .sm\:flex-initial {
3614
+ @media (width >= 40rem) {
3615
+ flex: 0 auto;
3616
+ }
3617
+ }
3330
3618
  .sm\:grid-cols-2 {
3331
3619
  @media (width >= 40rem) {
3332
3620
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3362,6 +3650,11 @@
3362
3650
  justify-content: space-between;
3363
3651
  }
3364
3652
  }
3653
+ .sm\:justify-center {
3654
+ @media (width >= 40rem) {
3655
+ justify-content: center;
3656
+ }
3657
+ }
3365
3658
  .sm\:gap-3 {
3366
3659
  @media (width >= 40rem) {
3367
3660
  gap: calc(var(--spacing) * 3);
@@ -3372,27 +3665,108 @@
3372
3665
  gap: calc(var(--spacing) * 4);
3373
3666
  }
3374
3667
  }
3668
+ .sm\:space-y-2 {
3669
+ @media (width >= 40rem) {
3670
+ :where(& > :not(:last-child)) {
3671
+ --tw-space-y-reverse: 0;
3672
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
3673
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
3674
+ }
3675
+ }
3676
+ }
3677
+ .sm\:gap-x-2 {
3678
+ @media (width >= 40rem) {
3679
+ column-gap: calc(var(--spacing) * 2);
3680
+ }
3681
+ }
3682
+ .sm\:gap-x-4 {
3683
+ @media (width >= 40rem) {
3684
+ column-gap: calc(var(--spacing) * 4);
3685
+ }
3686
+ }
3687
+ .sm\:gap-y-0\.5 {
3688
+ @media (width >= 40rem) {
3689
+ row-gap: calc(var(--spacing) * 0.5);
3690
+ }
3691
+ }
3692
+ .sm\:self-stretch {
3693
+ @media (width >= 40rem) {
3694
+ align-self: stretch;
3695
+ }
3696
+ }
3697
+ .sm\:overflow-visible {
3698
+ @media (width >= 40rem) {
3699
+ overflow: visible;
3700
+ }
3701
+ }
3702
+ .sm\:rounded-2xl {
3703
+ @media (width >= 40rem) {
3704
+ border-radius: var(--radius-2xl);
3705
+ }
3706
+ }
3707
+ .sm\:rounded-none {
3708
+ @media (width >= 40rem) {
3709
+ border-radius: 0;
3710
+ }
3711
+ }
3712
+ .sm\:border {
3713
+ @media (width >= 40rem) {
3714
+ border-style: var(--tw-border-style);
3715
+ border-width: 1px;
3716
+ }
3717
+ }
3718
+ .sm\:border-0 {
3719
+ @media (width >= 40rem) {
3720
+ border-style: var(--tw-border-style);
3721
+ border-width: 0px;
3722
+ }
3723
+ }
3375
3724
  .sm\:border-4 {
3376
3725
  @media (width >= 40rem) {
3377
3726
  border-style: var(--tw-border-style);
3378
3727
  border-width: 4px;
3379
3728
  }
3380
3729
  }
3730
+ .sm\:border-\[\#3a424a\] {
3731
+ @media (width >= 40rem) {
3732
+ border-color: #3a424a;
3733
+ }
3734
+ }
3735
+ .sm\:bg-transparent {
3736
+ @media (width >= 40rem) {
3737
+ background-color: transparent;
3738
+ }
3739
+ }
3381
3740
  .sm\:p-1 {
3382
3741
  @media (width >= 40rem) {
3383
3742
  padding: calc(var(--spacing) * 1);
3384
3743
  }
3385
3744
  }
3745
+ .sm\:p-2 {
3746
+ @media (width >= 40rem) {
3747
+ padding: calc(var(--spacing) * 2);
3748
+ }
3749
+ }
3386
3750
  .sm\:p-4 {
3387
3751
  @media (width >= 40rem) {
3388
3752
  padding: calc(var(--spacing) * 4);
3389
3753
  }
3390
3754
  }
3755
+ .sm\:p-5 {
3756
+ @media (width >= 40rem) {
3757
+ padding: calc(var(--spacing) * 5);
3758
+ }
3759
+ }
3391
3760
  .sm\:p-6 {
3392
3761
  @media (width >= 40rem) {
3393
3762
  padding: calc(var(--spacing) * 6);
3394
3763
  }
3395
3764
  }
3765
+ .sm\:px-0 {
3766
+ @media (width >= 40rem) {
3767
+ padding-inline: calc(var(--spacing) * 0);
3768
+ }
3769
+ }
3396
3770
  .sm\:px-4 {
3397
3771
  @media (width >= 40rem) {
3398
3772
  padding-inline: calc(var(--spacing) * 4);
@@ -3408,11 +3782,21 @@
3408
3782
  padding-inline: calc(var(--spacing) * 6);
3409
3783
  }
3410
3784
  }
3785
+ .sm\:py-2\.5 {
3786
+ @media (width >= 40rem) {
3787
+ padding-block: calc(var(--spacing) * 2.5);
3788
+ }
3789
+ }
3411
3790
  .sm\:py-3 {
3412
3791
  @media (width >= 40rem) {
3413
3792
  padding-block: calc(var(--spacing) * 3);
3414
3793
  }
3415
3794
  }
3795
+ .sm\:py-4 {
3796
+ @media (width >= 40rem) {
3797
+ padding-block: calc(var(--spacing) * 4);
3798
+ }
3799
+ }
3416
3800
  .sm\:py-6 {
3417
3801
  @media (width >= 40rem) {
3418
3802
  padding-block: calc(var(--spacing) * 6);
@@ -3447,12 +3831,24 @@
3447
3831
  line-height: var(--tw-leading, var(--text-sm--line-height));
3448
3832
  }
3449
3833
  }
3834
+ .sm\:text-xl {
3835
+ @media (width >= 40rem) {
3836
+ font-size: var(--text-xl);
3837
+ line-height: var(--tw-leading, var(--text-xl--line-height));
3838
+ }
3839
+ }
3450
3840
  .sm\:text-xs {
3451
3841
  @media (width >= 40rem) {
3452
3842
  font-size: var(--text-xs);
3453
3843
  line-height: var(--tw-leading, var(--text-xs--line-height));
3454
3844
  }
3455
3845
  }
3846
+ .sm\:leading-relaxed {
3847
+ @media (width >= 40rem) {
3848
+ --tw-leading: var(--leading-relaxed);
3849
+ line-height: var(--leading-relaxed);
3850
+ }
3851
+ }
3456
3852
  .md\:ml-6 {
3457
3853
  @media (width >= 48rem) {
3458
3854
  margin-left: calc(var(--spacing) * 6);
@@ -3493,6 +3889,11 @@
3493
3889
  height: calc(var(--spacing) * 4);
3494
3890
  }
3495
3891
  }
3892
+ .md\:h-5 {
3893
+ @media (width >= 48rem) {
3894
+ height: calc(var(--spacing) * 5);
3895
+ }
3896
+ }
3496
3897
  .md\:h-7 {
3497
3898
  @media (width >= 48rem) {
3498
3899
  height: calc(var(--spacing) * 7);
@@ -3523,6 +3924,11 @@
3523
3924
  width: calc(var(--spacing) * 4);
3524
3925
  }
3525
3926
  }
3927
+ .md\:w-5 {
3928
+ @media (width >= 48rem) {
3929
+ width: calc(var(--spacing) * 5);
3930
+ }
3931
+ }
3526
3932
  .md\:w-7 {
3527
3933
  @media (width >= 48rem) {
3528
3934
  width: calc(var(--spacing) * 7);
@@ -3543,6 +3949,11 @@
3543
3949
  width: calc(var(--spacing) * 24);
3544
3950
  }
3545
3951
  }
3952
+ .md\:w-40 {
3953
+ @media (width >= 48rem) {
3954
+ width: calc(var(--spacing) * 40);
3955
+ }
3956
+ }
3546
3957
  .md\:w-auto {
3547
3958
  @media (width >= 48rem) {
3548
3959
  width: auto;
@@ -3649,6 +4060,11 @@
3649
4060
  padding-inline: calc(var(--spacing) * 6);
3650
4061
  }
3651
4062
  }
4063
+ .md\:py-1\.5 {
4064
+ @media (width >= 48rem) {
4065
+ padding-block: calc(var(--spacing) * 1.5);
4066
+ }
4067
+ }
3652
4068
  .md\:py-3 {
3653
4069
  @media (width >= 48rem) {
3654
4070
  padding-block: calc(var(--spacing) * 3);
@@ -3720,6 +4136,11 @@
3720
4136
  display: table-cell;
3721
4137
  }
3722
4138
  }
4139
+ .lg\:w-48 {
4140
+ @media (width >= 64rem) {
4141
+ width: calc(var(--spacing) * 48);
4142
+ }
4143
+ }
3723
4144
  .lg\:grid-cols-3 {
3724
4145
  @media (width >= 64rem) {
3725
4146
  grid-template-columns: repeat(3, minmax(0, 1fr));