@eric-emg/symphiq-components 1.2.96 → 1.2.99

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/styles.css CHANGED
@@ -130,6 +130,7 @@
130
130
  --container-2xl: 42rem;
131
131
  --container-3xl: 48rem;
132
132
  --container-4xl: 56rem;
133
+ --container-5xl: 64rem;
133
134
  --container-6xl: 72rem;
134
135
  --container-7xl: 80rem;
135
136
  --text-xs: 0.75rem;
@@ -384,6 +385,9 @@
384
385
  .top-4 {
385
386
  top: calc(var(--spacing) * 4);
386
387
  }
388
+ .top-6 {
389
+ top: calc(var(--spacing) * 6);
390
+ }
387
391
  .top-24 {
388
392
  top: calc(var(--spacing) * 24);
389
393
  }
@@ -615,6 +619,9 @@
615
619
  .mb-20 {
616
620
  margin-bottom: calc(var(--spacing) * 20);
617
621
  }
622
+ .ml-1 {
623
+ margin-left: calc(var(--spacing) * 1);
624
+ }
618
625
  .ml-3\.5 {
619
626
  margin-left: calc(var(--spacing) * 3.5);
620
627
  }
@@ -906,12 +913,21 @@
906
913
  .max-w-2xl {
907
914
  max-width: var(--container-2xl);
908
915
  }
916
+ .max-w-4xl {
917
+ max-width: var(--container-4xl);
918
+ }
919
+ .max-w-5xl {
920
+ max-width: var(--container-5xl);
921
+ }
909
922
  .max-w-6xl {
910
923
  max-width: var(--container-6xl);
911
924
  }
912
925
  .max-w-7xl {
913
926
  max-width: var(--container-7xl);
914
927
  }
928
+ .max-w-\[120px\] {
929
+ max-width: 120px;
930
+ }
915
931
  .max-w-\[400px\] {
916
932
  max-width: 400px;
917
933
  }
@@ -939,6 +955,9 @@
939
955
  .min-w-\[180px\] {
940
956
  min-width: 180px;
941
957
  }
958
+ .min-w-\[260px\] {
959
+ min-width: 260px;
960
+ }
942
961
  .min-w-\[280px\] {
943
962
  min-width: 280px;
944
963
  }
@@ -1251,6 +1270,10 @@
1251
1270
  border-left-style: var(--tw-border-style);
1252
1271
  border-left-width: 0px;
1253
1272
  }
1273
+ .border-l-2 {
1274
+ border-left-style: var(--tw-border-style);
1275
+ border-left-width: 2px;
1276
+ }
1254
1277
  .border-l-4 {
1255
1278
  border-left-style: var(--tw-border-style);
1256
1279
  border-left-width: 4px;
@@ -1940,6 +1963,12 @@
1940
1963
  background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
1941
1964
  }
1942
1965
  }
1966
+ .bg-black\/50 {
1967
+ background-color: color-mix(in srgb, #000 50%, transparent);
1968
+ @supports (color: color-mix(in lab, red, red)) {
1969
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1970
+ }
1971
+ }
1943
1972
  .bg-black\/60 {
1944
1973
  background-color: color-mix(in srgb, #000 60%, transparent);
1945
1974
  @supports (color: color-mix(in lab, red, red)) {
@@ -1970,6 +1999,9 @@
1970
1999
  background-color: color-mix(in oklab, var(--color-blue-100) 70%, transparent);
1971
2000
  }
1972
2001
  }
2002
+ .bg-blue-200 {
2003
+ background-color: var(--color-blue-200);
2004
+ }
1973
2005
  .bg-blue-400 {
1974
2006
  background-color: var(--color-blue-400);
1975
2007
  }
@@ -2321,6 +2353,12 @@
2321
2353
  background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
2322
2354
  }
2323
2355
  }
2356
+ .bg-slate-600\/40 {
2357
+ background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 40%, transparent);
2358
+ @supports (color: color-mix(in lab, red, red)) {
2359
+ background-color: color-mix(in oklab, var(--color-slate-600) 40%, transparent);
2360
+ }
2361
+ }
2324
2362
  .bg-slate-600\/50 {
2325
2363
  background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 50%, transparent);
2326
2364
  @supports (color: color-mix(in lab, red, red)) {
@@ -2342,12 +2380,24 @@
2342
2380
  background-color: color-mix(in oklab, var(--color-slate-700) 30%, transparent);
2343
2381
  }
2344
2382
  }
2383
+ .bg-slate-700\/40 {
2384
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 40%, transparent);
2385
+ @supports (color: color-mix(in lab, red, red)) {
2386
+ background-color: color-mix(in oklab, var(--color-slate-700) 40%, transparent);
2387
+ }
2388
+ }
2345
2389
  .bg-slate-700\/50 {
2346
2390
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
2347
2391
  @supports (color: color-mix(in lab, red, red)) {
2348
2392
  background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
2349
2393
  }
2350
2394
  }
2395
+ .bg-slate-700\/60 {
2396
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
2397
+ @supports (color: color-mix(in lab, red, red)) {
2398
+ background-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
2399
+ }
2400
+ }
2351
2401
  .bg-slate-700\/70 {
2352
2402
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 70%, transparent);
2353
2403
  @supports (color: color-mix(in lab, red, red)) {
@@ -2420,6 +2470,12 @@
2420
2470
  background-color: color-mix(in oklab, var(--color-slate-900) 30%, transparent);
2421
2471
  }
2422
2472
  }
2473
+ .bg-slate-900\/40 {
2474
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
2475
+ @supports (color: color-mix(in lab, red, red)) {
2476
+ background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
2477
+ }
2478
+ }
2423
2479
  .bg-slate-900\/50 {
2424
2480
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
2425
2481
  @supports (color: color-mix(in lab, red, red)) {
@@ -2486,6 +2542,12 @@
2486
2542
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
2487
2543
  }
2488
2544
  }
2545
+ .bg-white\/60 {
2546
+ background-color: color-mix(in srgb, #fff 60%, transparent);
2547
+ @supports (color: color-mix(in lab, red, red)) {
2548
+ background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
2549
+ }
2550
+ }
2489
2551
  .bg-white\/80 {
2490
2552
  background-color: color-mix(in srgb, #fff 80%, transparent);
2491
2553
  @supports (color: color-mix(in lab, red, red)) {
@@ -2896,6 +2958,13 @@
2896
2958
  }
2897
2959
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2898
2960
  }
2961
+ .from-slate-800\/60 {
2962
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
2963
+ @supports (color: color-mix(in lab, red, red)) {
2964
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
2965
+ }
2966
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2967
+ }
2899
2968
  .from-slate-800\/85 {
2900
2969
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 85%, transparent);
2901
2970
  @supports (color: color-mix(in lab, red, red)) {
@@ -2903,6 +2972,13 @@
2903
2972
  }
2904
2973
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2905
2974
  }
2975
+ .from-slate-800\/90 {
2976
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 90%, transparent);
2977
+ @supports (color: color-mix(in lab, red, red)) {
2978
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 90%, transparent);
2979
+ }
2980
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2981
+ }
2906
2982
  .from-slate-800\/95 {
2907
2983
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 95%, transparent);
2908
2984
  @supports (color: color-mix(in lab, red, red)) {
@@ -2914,10 +2990,6 @@
2914
2990
  --tw-gradient-from: var(--color-slate-900);
2915
2991
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2916
2992
  }
2917
- .from-slate-950 {
2918
- --tw-gradient-from: var(--color-slate-950);
2919
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2920
- }
2921
2993
  .from-transparent {
2922
2994
  --tw-gradient-from: transparent;
2923
2995
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3019,8 +3091,19 @@
3019
3091
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
3020
3092
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3021
3093
  }
3022
- .via-slate-900 {
3023
- --tw-gradient-via: var(--color-slate-900);
3094
+ .via-slate-800\/40 {
3095
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
3096
+ @supports (color: color-mix(in lab, red, red)) {
3097
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
3098
+ }
3099
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
3100
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3101
+ }
3102
+ .via-slate-800\/80 {
3103
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
3104
+ @supports (color: color-mix(in lab, red, red)) {
3105
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
3106
+ }
3024
3107
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
3025
3108
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3026
3109
  }
@@ -3029,6 +3112,11 @@
3029
3112
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
3030
3113
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3031
3114
  }
3115
+ .via-white {
3116
+ --tw-gradient-via: var(--color-white);
3117
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
3118
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3119
+ }
3032
3120
  .via-white\/60 {
3033
3121
  --tw-gradient-via: color-mix(in srgb, #fff 60%, transparent);
3034
3122
  @supports (color: color-mix(in lab, red, red)) {
@@ -3246,6 +3334,10 @@
3246
3334
  }
3247
3335
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3248
3336
  }
3337
+ .to-purple-50 {
3338
+ --tw-gradient-to: var(--color-purple-50);
3339
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3340
+ }
3249
3341
  .to-purple-100 {
3250
3342
  --tw-gradient-to: var(--color-purple-100);
3251
3343
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3378,6 +3470,13 @@
3378
3470
  }
3379
3471
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3380
3472
  }
3473
+ .to-slate-900\/60 {
3474
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
3475
+ @supports (color: color-mix(in lab, red, red)) {
3476
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
3477
+ }
3478
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3479
+ }
3381
3480
  .to-slate-900\/85 {
3382
3481
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 85%, transparent);
3383
3482
  @supports (color: color-mix(in lab, red, red)) {
@@ -3385,6 +3484,13 @@
3385
3484
  }
3386
3485
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3387
3486
  }
3487
+ .to-slate-900\/90 {
3488
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);
3489
+ @supports (color: color-mix(in lab, red, red)) {
3490
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 90%, transparent);
3491
+ }
3492
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3493
+ }
3388
3494
  .to-slate-900\/95 {
3389
3495
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
3390
3496
  @supports (color: color-mix(in lab, red, red)) {
@@ -3392,10 +3498,6 @@
3392
3498
  }
3393
3499
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3394
3500
  }
3395
- .to-slate-950 {
3396
- --tw-gradient-to: var(--color-slate-950);
3397
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3398
- }
3399
3501
  .to-teal-50 {
3400
3502
  --tw-gradient-to: var(--color-teal-50);
3401
3503
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3574,6 +3676,9 @@
3574
3676
  .pb-4 {
3575
3677
  padding-bottom: calc(var(--spacing) * 4);
3576
3678
  }
3679
+ .pb-6 {
3680
+ padding-bottom: calc(var(--spacing) * 6);
3681
+ }
3577
3682
  .pb-8 {
3578
3683
  padding-bottom: calc(var(--spacing) * 8);
3579
3684
  }
@@ -3583,6 +3688,9 @@
3583
3688
  .pb-20 {
3584
3689
  padding-bottom: calc(var(--spacing) * 20);
3585
3690
  }
3691
+ .pl-3 {
3692
+ padding-left: calc(var(--spacing) * 3);
3693
+ }
3586
3694
  .pl-4 {
3587
3695
  padding-left: calc(var(--spacing) * 4);
3588
3696
  }
@@ -3928,6 +4036,10 @@
3928
4036
  .italic {
3929
4037
  font-style: italic;
3930
4038
  }
4039
+ .tabular-nums {
4040
+ --tw-numeric-spacing: tabular-nums;
4041
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
4042
+ }
3931
4043
  .underline {
3932
4044
  text-decoration-line: underline;
3933
4045
  }
@@ -3965,6 +4077,9 @@
3965
4077
  .opacity-70 {
3966
4078
  opacity: 70%;
3967
4079
  }
4080
+ .opacity-75 {
4081
+ opacity: 75%;
4082
+ }
3968
4083
  .opacity-90 {
3969
4084
  opacity: 90%;
3970
4085
  }
@@ -4495,6 +4610,23 @@
4495
4610
  }
4496
4611
  }
4497
4612
  }
4613
+ .hover\:border-amber-300 {
4614
+ &:hover {
4615
+ @media (hover: hover) {
4616
+ border-color: var(--color-amber-300);
4617
+ }
4618
+ }
4619
+ }
4620
+ .hover\:border-amber-400\/50 {
4621
+ &:hover {
4622
+ @media (hover: hover) {
4623
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
4624
+ @supports (color: color-mix(in lab, red, red)) {
4625
+ border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
4626
+ }
4627
+ }
4628
+ }
4629
+ }
4498
4630
  .hover\:border-blue-300 {
4499
4631
  &:hover {
4500
4632
  @media (hover: hover) {
@@ -4509,6 +4641,16 @@
4509
4641
  }
4510
4642
  }
4511
4643
  }
4644
+ .hover\:border-blue-400\/50 {
4645
+ &:hover {
4646
+ @media (hover: hover) {
4647
+ border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
4648
+ @supports (color: color-mix(in lab, red, red)) {
4649
+ border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
4650
+ }
4651
+ }
4652
+ }
4653
+ }
4512
4654
  .hover\:border-blue-400\/60 {
4513
4655
  &:hover {
4514
4656
  @media (hover: hover) {
@@ -4618,6 +4760,16 @@
4618
4760
  }
4619
4761
  }
4620
4762
  }
4763
+ .hover\:border-slate-500\/50 {
4764
+ &:hover {
4765
+ @media (hover: hover) {
4766
+ border-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 50%, transparent);
4767
+ @supports (color: color-mix(in lab, red, red)) {
4768
+ border-color: color-mix(in oklab, var(--color-slate-500) 50%, transparent);
4769
+ }
4770
+ }
4771
+ }
4772
+ }
4621
4773
  .hover\:border-slate-600 {
4622
4774
  &:hover {
4623
4775
  @media (hover: hover) {
@@ -5639,6 +5791,16 @@
5639
5791
  grid-template-columns: repeat(2, minmax(0, 1fr));
5640
5792
  }
5641
5793
  }
5794
+ .sm\:grid-cols-3 {
5795
+ @media (width >= 40rem) {
5796
+ grid-template-columns: repeat(3, minmax(0, 1fr));
5797
+ }
5798
+ }
5799
+ .sm\:grid-cols-\[1fr_auto\] {
5800
+ @media (width >= 40rem) {
5801
+ grid-template-columns: 1fr auto;
5802
+ }
5803
+ }
5642
5804
  .sm\:flex-row {
5643
5805
  @media (width >= 40rem) {
5644
5806
  flex-direction: row;
@@ -6477,6 +6639,26 @@
6477
6639
  syntax: "*";
6478
6640
  inherits: false;
6479
6641
  }
6642
+ @property --tw-ordinal {
6643
+ syntax: "*";
6644
+ inherits: false;
6645
+ }
6646
+ @property --tw-slashed-zero {
6647
+ syntax: "*";
6648
+ inherits: false;
6649
+ }
6650
+ @property --tw-numeric-figure {
6651
+ syntax: "*";
6652
+ inherits: false;
6653
+ }
6654
+ @property --tw-numeric-spacing {
6655
+ syntax: "*";
6656
+ inherits: false;
6657
+ }
6658
+ @property --tw-numeric-fraction {
6659
+ syntax: "*";
6660
+ inherits: false;
6661
+ }
6480
6662
  @property --tw-shadow {
6481
6663
  syntax: "*";
6482
6664
  inherits: false;
@@ -6695,6 +6877,11 @@
6695
6877
  --tw-leading: initial;
6696
6878
  --tw-font-weight: initial;
6697
6879
  --tw-tracking: initial;
6880
+ --tw-ordinal: initial;
6881
+ --tw-slashed-zero: initial;
6882
+ --tw-numeric-figure: initial;
6883
+ --tw-numeric-spacing: initial;
6884
+ --tw-numeric-fraction: initial;
6698
6885
  --tw-shadow: 0 0 #0000;
6699
6886
  --tw-shadow-color: initial;
6700
6887
  --tw-shadow-alpha: 100%;