@deframe-sdk/components 0.1.32 → 0.1.34

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 (8) hide show
  1. package/dist/index.d.mts +497 -4
  2. package/dist/index.d.ts +497 -4
  3. package/dist/index.js +6576 -3184
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +6536 -3186
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +287 -0
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -10,11 +10,14 @@
10
10
  --color-red-400: oklch(70.4% 0.191 22.216);
11
11
  --color-red-500: oklch(63.7% 0.237 25.331);
12
12
  --color-yellow-100: oklch(97.3% 0.071 103.193);
13
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
13
14
  --color-yellow-800: oklch(47.6% 0.114 61.907);
14
15
  --color-green-100: oklch(96.2% 0.044 156.743);
15
16
  --color-green-400: oklch(79.2% 0.209 151.711);
16
17
  --color-green-500: oklch(72.3% 0.219 149.579);
18
+ --color-green-600: oklch(62.7% 0.194 149.214);
17
19
  --color-green-800: oklch(44.8% 0.119 151.328);
20
+ --color-teal-600: oklch(60% 0.118 184.704);
18
21
  --color-blue-50: oklch(97% 0.014 254.604);
19
22
  --color-blue-100: oklch(93.2% 0.032 255.585);
20
23
  --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -26,9 +29,11 @@
26
29
  --color-purple-600: oklch(55.8% 0.288 302.321);
27
30
  --color-purple-700: oklch(49.6% 0.265 301.924);
28
31
  --color-pink-500: oklch(65.6% 0.241 354.308);
32
+ --color-gray-50: oklch(98.5% 0.002 247.839);
29
33
  --color-gray-100: oklch(96.7% 0.003 264.542);
30
34
  --color-gray-200: oklch(92.8% 0.006 264.531);
31
35
  --color-gray-400: oklch(70.7% 0.022 261.325);
36
+ --color-gray-500: oklch(55.1% 0.027 264.364);
32
37
  --color-gray-600: oklch(44.6% 0.03 256.802);
33
38
  --color-gray-700: oklch(37.3% 0.034 259.733);
34
39
  --color-gray-800: oklch(27.8% 0.033 256.848);
@@ -36,6 +41,7 @@
36
41
  --color-black: #000;
37
42
  --color-white: #fff;
38
43
  --spacing: 0.25rem;
44
+ --container-xs: 20rem;
39
45
  --container-lg: 32rem;
40
46
  --container-2xl: 42rem;
41
47
  --container-3xl: 48rem;
@@ -43,6 +49,8 @@
43
49
  --text-xs--line-height: calc(1 / 0.75);
44
50
  --text-sm: 0.875rem;
45
51
  --text-sm--line-height: calc(1.25 / 0.875);
52
+ --text-lg: 1.125rem;
53
+ --text-lg--line-height: calc(1.75 / 1.125);
46
54
  --text-xl: 1.25rem;
47
55
  --text-xl--line-height: calc(1.75 / 1.25);
48
56
  --text-2xl: 1.5rem;
@@ -60,6 +68,7 @@
60
68
  --radius-sm: 0.25rem;
61
69
  --radius-lg: 0.5rem;
62
70
  --radius-xl: 0.75rem;
71
+ --radius-3xl: 1.5rem;
63
72
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
64
73
  --animate-spin: spin 1s linear infinite;
65
74
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -364,9 +373,15 @@
364
373
  .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
365
374
  margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
366
375
  }
376
+ .my-2 {
377
+ margin-block: calc(var(--spacing) * 2);
378
+ }
367
379
  .my-4 {
368
380
  margin-block: calc(var(--spacing) * 4);
369
381
  }
382
+ .my-\[40px\] {
383
+ margin-block: 40px;
384
+ }
370
385
  .my-\[var\(--deframe-widget-size-gap-sm\)\] {
371
386
  margin-block: var(--deframe-widget-size-gap-sm);
372
387
  }
@@ -451,6 +466,9 @@
451
466
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
452
467
  margin-bottom: var(--deframe-widget-size-gap-xs);
453
468
  }
469
+ .mb-1 {
470
+ margin-bottom: calc(var(--spacing) * 1);
471
+ }
454
472
  .mb-2 {
455
473
  margin-bottom: calc(var(--spacing) * 2);
456
474
  }
@@ -484,6 +502,9 @@
484
502
  .mb-\[var\(--deframe-widget-size-gap-xs\)\] {
485
503
  margin-bottom: var(--deframe-widget-size-gap-xs);
486
504
  }
505
+ .ml-2 {
506
+ margin-left: calc(var(--spacing) * 2);
507
+ }
487
508
  .ml-4 {
488
509
  margin-left: calc(var(--spacing) * 4);
489
510
  }
@@ -565,6 +586,9 @@
565
586
  .h-10 {
566
587
  height: calc(var(--spacing) * 10);
567
588
  }
589
+ .h-11 {
590
+ height: calc(var(--spacing) * 11);
591
+ }
568
592
  .h-12 {
569
593
  height: calc(var(--spacing) * 12);
570
594
  }
@@ -598,6 +622,9 @@
598
622
  .h-\[7px\] {
599
623
  height: 7px;
600
624
  }
625
+ .h-\[8px\] {
626
+ height: 8px;
627
+ }
601
628
  .h-\[12px\] {
602
629
  height: 12px;
603
630
  }
@@ -622,6 +649,9 @@
622
649
  .h-\[20px\] {
623
650
  height: 20px;
624
651
  }
652
+ .h-\[24px\] {
653
+ height: 24px;
654
+ }
625
655
  .h-\[32px\] {
626
656
  height: 32px;
627
657
  }
@@ -670,12 +700,18 @@
670
700
  .h-\[136px\] {
671
701
  height: 136px;
672
702
  }
703
+ .h-\[174px\] {
704
+ height: 174px;
705
+ }
673
706
  .h-\[200px\] {
674
707
  height: 200px;
675
708
  }
676
709
  .h-\[300px\] {
677
710
  height: 300px;
678
711
  }
712
+ .h-\[400px\] {
713
+ height: 400px;
714
+ }
679
715
  .h-\[440px\] {
680
716
  height: 440px;
681
717
  }
@@ -724,15 +760,24 @@
724
760
  .min-h-16 {
725
761
  min-height: calc(var(--spacing) * 16);
726
762
  }
763
+ .min-h-\[10px\] {
764
+ min-height: 10px;
765
+ }
727
766
  .min-h-\[16px\] {
728
767
  min-height: 16px;
729
768
  }
730
769
  .min-h-\[72px\] {
731
770
  min-height: 72px;
732
771
  }
772
+ .min-h-\[80vh\] {
773
+ min-height: 80vh;
774
+ }
733
775
  .min-h-\[86px\] {
734
776
  min-height: 86px;
735
777
  }
778
+ .min-h-\[100svh\] {
779
+ min-height: 100svh;
780
+ }
736
781
  .min-h-\[136px\] {
737
782
  min-height: 136px;
738
783
  }
@@ -742,6 +787,9 @@
742
787
  .min-h-\[600px\] {
743
788
  min-height: 600px;
744
789
  }
790
+ .min-h-\[calc\(100svh-160px\)\] {
791
+ min-height: calc(100svh - 160px);
792
+ }
745
793
  .min-h-full {
746
794
  min-height: 100%;
747
795
  }
@@ -775,6 +823,9 @@
775
823
  .w-10 {
776
824
  width: calc(var(--spacing) * 10);
777
825
  }
826
+ .w-11 {
827
+ width: calc(var(--spacing) * 11);
828
+ }
778
829
  .w-12 {
779
830
  width: calc(var(--spacing) * 12);
780
831
  }
@@ -802,6 +853,9 @@
802
853
  .w-48 {
803
854
  width: calc(var(--spacing) * 48);
804
855
  }
856
+ .w-56 {
857
+ width: calc(var(--spacing) * 56);
858
+ }
805
859
  .w-64 {
806
860
  width: calc(var(--spacing) * 64);
807
861
  }
@@ -823,6 +877,9 @@
823
877
  .w-\[7px\] {
824
878
  width: 7px;
825
879
  }
880
+ .w-\[8px\] {
881
+ width: 8px;
882
+ }
826
883
  .w-\[12px\] {
827
884
  width: 12px;
828
885
  }
@@ -838,6 +895,9 @@
838
895
  .w-\[18px\] {
839
896
  width: 18px;
840
897
  }
898
+ .w-\[24px\] {
899
+ width: 24px;
900
+ }
841
901
  .w-\[32px\] {
842
902
  width: 32px;
843
903
  }
@@ -862,6 +922,9 @@
862
922
  .w-\[64px\] {
863
923
  width: 64px;
864
924
  }
925
+ .w-\[72px\] {
926
+ width: 72px;
927
+ }
865
928
  .w-\[83px\] {
866
929
  width: 83px;
867
930
  }
@@ -871,6 +934,9 @@
871
934
  .w-\[120px\] {
872
935
  width: 120px;
873
936
  }
937
+ .w-\[174px\] {
938
+ width: 174px;
939
+ }
874
940
  .w-\[200px\] {
875
941
  width: 200px;
876
942
  }
@@ -940,6 +1006,9 @@
940
1006
  .max-w-\[84px\] {
941
1007
  max-width: 84px;
942
1008
  }
1009
+ .max-w-\[100px\] {
1010
+ max-width: 100px;
1011
+ }
943
1012
  .max-w-\[150px\] {
944
1013
  max-width: 150px;
945
1014
  }
@@ -952,9 +1021,15 @@
952
1021
  .max-w-\[260px\] {
953
1022
  max-width: 260px;
954
1023
  }
1024
+ .max-w-\[300px\] {
1025
+ max-width: 300px;
1026
+ }
955
1027
  .max-w-\[320px\] {
956
1028
  max-width: 320px;
957
1029
  }
1030
+ .max-w-\[390px\] {
1031
+ max-width: 390px;
1032
+ }
958
1033
  .max-w-\[480px\] {
959
1034
  max-width: 480px;
960
1035
  }
@@ -979,6 +1054,9 @@
979
1054
  .max-w-lg {
980
1055
  max-width: var(--container-lg);
981
1056
  }
1057
+ .max-w-xs {
1058
+ max-width: var(--container-xs);
1059
+ }
982
1060
  .min-w-0 {
983
1061
  min-width: calc(var(--spacing) * 0);
984
1062
  }
@@ -1090,6 +1168,9 @@
1090
1168
  .grid-cols-3 {
1091
1169
  grid-template-columns: repeat(3, minmax(0, 1fr));
1092
1170
  }
1171
+ .grid-cols-\[1fr_100px\] {
1172
+ grid-template-columns: 1fr 100px;
1173
+ }
1093
1174
  .grid-cols-\[1fr_100px_130px\] {
1094
1175
  grid-template-columns: 1fr 100px 130px;
1095
1176
  }
@@ -1147,6 +1228,12 @@
1147
1228
  .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
1148
1229
  gap: var(--deframe-widget-size-gap-xs);
1149
1230
  }
1231
+ .gap-0 {
1232
+ gap: calc(var(--spacing) * 0);
1233
+ }
1234
+ .gap-0\.5 {
1235
+ gap: calc(var(--spacing) * 0.5);
1236
+ }
1150
1237
  .gap-1 {
1151
1238
  gap: calc(var(--spacing) * 1);
1152
1239
  }
@@ -1266,6 +1353,9 @@
1266
1353
  border-color: var(--deframe-widget-color-border-tertiary);
1267
1354
  }
1268
1355
  }
1356
+ .self-center {
1357
+ align-self: center;
1358
+ }
1269
1359
  .self-start {
1270
1360
  align-self: flex-start;
1271
1361
  }
@@ -1298,6 +1388,9 @@
1298
1388
  .rounded {
1299
1389
  border-radius: 0.25rem;
1300
1390
  }
1391
+ .rounded-3xl {
1392
+ border-radius: var(--radius-3xl);
1393
+ }
1301
1394
  .rounded-\[10px\] {
1302
1395
  border-radius: 10px;
1303
1396
  }
@@ -1376,10 +1469,18 @@
1376
1469
  border-style: var(--tw-border-style);
1377
1470
  border-width: 1px;
1378
1471
  }
1472
+ .border-2 {
1473
+ border-style: var(--tw-border-style);
1474
+ border-width: 2px;
1475
+ }
1379
1476
  .border-12 {
1380
1477
  border-style: var(--tw-border-style);
1381
1478
  border-width: 12px;
1382
1479
  }
1480
+ .border-\[3px\] {
1481
+ border-style: var(--tw-border-style);
1482
+ border-width: 3px;
1483
+ }
1383
1484
  .border-\[length\:var\(--deframe-widget-size-border-sm\)\] {
1384
1485
  border-style: var(--tw-border-style);
1385
1486
  border-width: var(--deframe-widget-size-border-sm);
@@ -1441,6 +1542,12 @@
1441
1542
  border-color: color-mix(in srgb,var(--deframe-widget-color-brand-secondary) 32%,transparent);
1442
1543
  }
1443
1544
  }
1545
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_28\%\,transparent\)\] {
1546
+ border-color: var(--deframe-widget-color-state-error);
1547
+ @supports (color: color-mix(in lab, red, red)) {
1548
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 28%,transparent);
1549
+ }
1550
+ }
1444
1551
  .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_32\%\,transparent\)\] {
1445
1552
  border-color: var(--deframe-widget-color-state-error);
1446
1553
  @supports (color: color-mix(in lab, red, red)) {
@@ -1459,18 +1566,36 @@
1459
1566
  border-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 32%,transparent);
1460
1567
  }
1461
1568
  }
1569
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_28\%\,transparent\)\] {
1570
+ border-color: var(--deframe-widget-color-state-success);
1571
+ @supports (color: color-mix(in lab, red, red)) {
1572
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 28%,transparent);
1573
+ }
1574
+ }
1462
1575
  .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_32\%\,transparent\)\] {
1463
1576
  border-color: var(--deframe-widget-color-state-success);
1464
1577
  @supports (color: color-mix(in lab, red, red)) {
1465
1578
  border-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 32%,transparent);
1466
1579
  }
1467
1580
  }
1581
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_28\%\,transparent\)\] {
1582
+ border-color: var(--deframe-widget-color-state-warning);
1583
+ @supports (color: color-mix(in lab, red, red)) {
1584
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 28%,transparent);
1585
+ }
1586
+ }
1468
1587
  .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_32\%\,transparent\)\] {
1469
1588
  border-color: var(--deframe-widget-color-state-warning);
1470
1589
  @supports (color: color-mix(in lab, red, red)) {
1471
1590
  border-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 32%,transparent);
1472
1591
  }
1473
1592
  }
1593
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-text-tertiary\)_22\%\,transparent\)\] {
1594
+ border-color: var(--deframe-widget-color-text-tertiary);
1595
+ @supports (color: color-mix(in lab, red, red)) {
1596
+ border-color: color-mix(in srgb,var(--deframe-widget-color-text-tertiary) 22%,transparent);
1597
+ }
1598
+ }
1474
1599
  .border-\[color\:var\(--deframe-widget-color-bg-secondary\)\] {
1475
1600
  border-color: var(--deframe-widget-color-bg-secondary);
1476
1601
  }
@@ -1555,12 +1680,21 @@
1555
1680
  .border-blue-500 {
1556
1681
  border-color: var(--color-blue-500);
1557
1682
  }
1683
+ .border-gray-200\/300 {
1684
+ border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 300%, transparent);
1685
+ @supports (color: color-mix(in lab, red, red)) {
1686
+ border-color: color-mix(in oklab, var(--color-gray-200) 300%, transparent);
1687
+ }
1688
+ }
1558
1689
  .border-gray-700 {
1559
1690
  border-color: var(--color-gray-700);
1560
1691
  }
1561
1692
  .border-transparent {
1562
1693
  border-color: transparent;
1563
1694
  }
1695
+ .border-t-transparent {
1696
+ border-top-color: transparent;
1697
+ }
1564
1698
  .bg-\[\#0A0A0A\] {
1565
1699
  background-color: #0A0A0A;
1566
1700
  }
@@ -1573,9 +1707,18 @@
1573
1707
  .bg-\[\#1FC16B\] {
1574
1708
  background-color: #1FC16B;
1575
1709
  }
1710
+ .bg-\[\#1FC16B\]\/10 {
1711
+ background-color: color-mix(in oklab, #1FC16B 10%, transparent);
1712
+ }
1713
+ .bg-\[\#1FC16B\]\/20 {
1714
+ background-color: color-mix(in oklab, #1FC16B 20%, transparent);
1715
+ }
1576
1716
  .bg-\[\#2A2A2A\] {
1577
1717
  background-color: #2A2A2A;
1578
1718
  }
1719
+ .bg-\[\#2ba176\] {
1720
+ background-color: #2ba176;
1721
+ }
1579
1722
  .bg-\[\#002608\] {
1580
1723
  background-color: #002608;
1581
1724
  }
@@ -1585,6 +1728,9 @@
1585
1728
  .bg-\[\#12151c\] {
1586
1729
  background-color: #12151c;
1587
1730
  }
1731
+ .bg-\[\#F6A700\] {
1732
+ background-color: #F6A700;
1733
+ }
1588
1734
  .bg-\[\#ff7a45\] {
1589
1735
  background-color: #ff7a45;
1590
1736
  }
@@ -1597,6 +1743,12 @@
1597
1743
  .bg-\[color\:color-mix\(\.\.\.\)\] {
1598
1744
  background-color: color-mix(...);
1599
1745
  }
1746
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_80\%\,transparent\)\] {
1747
+ background-color: var(--deframe-widget-color-bg-primary);
1748
+ @supports (color: color-mix(in lab, red, red)) {
1749
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 80%,transparent);
1750
+ }
1751
+ }
1600
1752
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1601
1753
  background-color: var(--deframe-widget-color-bg-primary);
1602
1754
  @supports (color: color-mix(in lab, red, red)) {
@@ -1621,6 +1773,12 @@
1621
1773
  background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 92%,transparent);
1622
1774
  }
1623
1775
  }
1776
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_8\%\,var\(--deframe-widget-color-bg-secondary\)\)\] {
1777
+ background-color: var(--deframe-widget-color-brand-primary);
1778
+ @supports (color: color-mix(in lab, red, red)) {
1779
+ background-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 8%,var(--deframe-widget-color-bg-secondary));
1780
+ }
1781
+ }
1624
1782
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_12\%\,transparent\)\] {
1625
1783
  background-color: var(--deframe-widget-color-brand-primary);
1626
1784
  @supports (color: color-mix(in lab, red, red)) {
@@ -1657,6 +1815,12 @@
1657
1815
  background-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 20%,transparent);
1658
1816
  }
1659
1817
  }
1818
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_12\%\,transparent\)\] {
1819
+ background-color: var(--deframe-widget-color-state-info);
1820
+ @supports (color: color-mix(in lab, red, red)) {
1821
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 12%,transparent);
1822
+ }
1823
+ }
1660
1824
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_16\%\,transparent\)\] {
1661
1825
  background-color: var(--deframe-widget-color-state-info);
1662
1826
  @supports (color: color-mix(in lab, red, red)) {
@@ -1711,9 +1875,27 @@
1711
1875
  background-color: color-mix(in srgb,var(--deframe-widget-color-text-secondary) 12%,transparent);
1712
1876
  }
1713
1877
  }
1878
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-text-tertiary\)_10\%\,transparent\)\] {
1879
+ background-color: var(--deframe-widget-color-text-tertiary);
1880
+ @supports (color: color-mix(in lab, red, red)) {
1881
+ background-color: color-mix(in srgb,var(--deframe-widget-color-text-tertiary) 10%,transparent);
1882
+ }
1883
+ }
1884
+ .bg-\[color\:var\(--deframe-widget-color-bg-primary\)\] {
1885
+ background-color: var(--deframe-widget-color-bg-primary);
1886
+ }
1714
1887
  .bg-\[color\:var\(--deframe-widget-color-bg-secondary\)\] {
1715
1888
  background-color: var(--deframe-widget-color-bg-secondary);
1716
1889
  }
1890
+ .bg-\[color\:var\(--deframe-widget-color-bg-tertiary\)\] {
1891
+ background-color: var(--deframe-widget-color-bg-tertiary);
1892
+ }
1893
+ .bg-\[color\:var\(--deframe-widget-color-border-primary\)\] {
1894
+ background-color: var(--deframe-widget-color-border-primary);
1895
+ }
1896
+ .bg-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
1897
+ background-color: var(--deframe-widget-color-brand-primary);
1898
+ }
1717
1899
  .bg-\[var\(--deframe-widget-color-bg-muted\)\] {
1718
1900
  background-color: var(--deframe-widget-color-bg-muted);
1719
1901
  }
@@ -1726,6 +1908,12 @@
1726
1908
  background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 50%, transparent);
1727
1909
  }
1728
1910
  }
1911
+ .bg-\[var\(--deframe-widget-color-bg-primary\)\]\/90 {
1912
+ background-color: var(--deframe-widget-color-bg-primary);
1913
+ @supports (color: color-mix(in lab, red, red)) {
1914
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 90%, transparent);
1915
+ }
1916
+ }
1729
1917
  .bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
1730
1918
  background-color: var(--deframe-widget-color-bg-primary-dark);
1731
1919
  }
@@ -1765,6 +1953,12 @@
1765
1953
  .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
1766
1954
  background-color: var(--deframe-widget-color-brand-primary);
1767
1955
  }
1956
+ .bg-\[var\(--deframe-widget-color-brand-primary\)\]\/20 {
1957
+ background-color: var(--deframe-widget-color-brand-primary);
1958
+ @supports (color: color-mix(in lab, red, red)) {
1959
+ background-color: color-mix(in oklab, var(--deframe-widget-color-brand-primary) 20%, transparent);
1960
+ }
1961
+ }
1768
1962
  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1769
1963
  background-color: var(--deframe-widget-color-brand-primary-disabled);
1770
1964
  }
@@ -1852,9 +2046,15 @@
1852
2046
  .bg-blue-900 {
1853
2047
  background-color: var(--color-blue-900);
1854
2048
  }
2049
+ .bg-gray-50\/100 {
2050
+ background-color: var(--color-gray-50);
2051
+ }
1855
2052
  .bg-gray-100 {
1856
2053
  background-color: var(--color-gray-100);
1857
2054
  }
2055
+ .bg-gray-200 {
2056
+ background-color: var(--color-gray-200);
2057
+ }
1858
2058
  .bg-gray-900 {
1859
2059
  background-color: var(--color-gray-900);
1860
2060
  }
@@ -1867,6 +2067,9 @@
1867
2067
  background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
1868
2068
  }
1869
2069
  }
2070
+ .bg-green-600 {
2071
+ background-color: var(--color-green-600);
2072
+ }
1870
2073
  .bg-purple-500 {
1871
2074
  background-color: var(--color-purple-500);
1872
2075
  }
@@ -1876,6 +2079,9 @@
1876
2079
  .bg-red-500 {
1877
2080
  background-color: var(--color-red-500);
1878
2081
  }
2082
+ .bg-teal-600 {
2083
+ background-color: var(--color-teal-600);
2084
+ }
1879
2085
  .bg-transparent {
1880
2086
  background-color: transparent;
1881
2087
  }
@@ -2003,6 +2209,9 @@
2003
2209
  .p-\[var\(--deframe-widget-size-padding-x-md\)\] {
2004
2210
  padding: var(--deframe-widget-size-padding-x-md);
2005
2211
  }
2212
+ .p-\[var\(--deframe-widget-size-padding-x-sm\)\] {
2213
+ padding: var(--deframe-widget-size-padding-x-sm);
2214
+ }
2006
2215
  .p-\[var\(--deframe-widget-size-padding-y-md\)\] {
2007
2216
  padding: var(--deframe-widget-size-padding-y-md);
2008
2217
  }
@@ -2033,6 +2242,9 @@
2033
2242
  .px-\[6px\] {
2034
2243
  padding-inline: 6px;
2035
2244
  }
2245
+ .px-\[8px\] {
2246
+ padding-inline: 8px;
2247
+ }
2036
2248
  .px-\[10px\] {
2037
2249
  padding-inline: 10px;
2038
2250
  }
@@ -2093,6 +2305,9 @@
2093
2305
  .py-\[3px\] {
2094
2306
  padding-block: 3px;
2095
2307
  }
2308
+ .py-\[4px\] {
2309
+ padding-block: 4px;
2310
+ }
2096
2311
  .py-\[5px\] {
2097
2312
  padding-block: 5px;
2098
2313
  }
@@ -2111,6 +2326,9 @@
2111
2326
  .py-\[11px\] {
2112
2327
  padding-block: 11px;
2113
2328
  }
2329
+ .py-\[12px\] {
2330
+ padding-block: 12px;
2331
+ }
2114
2332
  .py-\[13px\] {
2115
2333
  padding-block: 13px;
2116
2334
  }
@@ -2186,6 +2404,9 @@
2186
2404
  .pb-2 {
2187
2405
  padding-bottom: calc(var(--spacing) * 2);
2188
2406
  }
2407
+ .pb-3 {
2408
+ padding-bottom: calc(var(--spacing) * 3);
2409
+ }
2189
2410
  .pb-4 {
2190
2411
  padding-bottom: calc(var(--spacing) * 4);
2191
2412
  }
@@ -2256,6 +2477,10 @@
2256
2477
  font-size: var(--text-2xl);
2257
2478
  line-height: var(--tw-leading, var(--text-2xl--line-height));
2258
2479
  }
2480
+ .text-lg {
2481
+ font-size: var(--text-lg);
2482
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2483
+ }
2259
2484
  .text-sm {
2260
2485
  font-size: var(--text-sm);
2261
2486
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2334,6 +2559,9 @@
2334
2559
  .text-\[20px\] {
2335
2560
  font-size: 20px;
2336
2561
  }
2562
+ .text-\[21px\] {
2563
+ font-size: 21px;
2564
+ }
2337
2565
  .text-\[22px\] {
2338
2566
  font-size: 22px;
2339
2567
  }
@@ -2355,6 +2583,9 @@
2355
2583
  .text-\[length\:var\(--deframe-widget-font-size-sm\)\] {
2356
2584
  font-size: var(--deframe-widget-font-size-sm);
2357
2585
  }
2586
+ .text-\[length\:var\(--deframe-widget-font-size-xl\)\] {
2587
+ font-size: var(--deframe-widget-font-size-xl);
2588
+ }
2358
2589
  .text-\[length\:var\(--deframe-widget-font-size-xs\)\] {
2359
2590
  font-size: var(--deframe-widget-font-size-xs);
2360
2591
  }
@@ -2369,6 +2600,10 @@
2369
2600
  --tw-leading: calc(var(--spacing) * 5);
2370
2601
  line-height: calc(var(--spacing) * 5);
2371
2602
  }
2603
+ .leading-\[0\] {
2604
+ --tw-leading: 0;
2605
+ line-height: 0;
2606
+ }
2372
2607
  .leading-\[1\.1\] {
2373
2608
  --tw-leading: 1.1;
2374
2609
  line-height: 1.1;
@@ -2409,6 +2644,10 @@
2409
2644
  --tw-leading: 140%;
2410
2645
  line-height: 140%;
2411
2646
  }
2647
+ .leading-\[var\(--deframe-widget-font-leading-lg\)\] {
2648
+ --tw-leading: var(--deframe-widget-font-leading-lg);
2649
+ line-height: var(--deframe-widget-font-leading-lg);
2650
+ }
2412
2651
  .leading-\[var\(--deframe-widget-font-leading-md\)\] {
2413
2652
  --tw-leading: var(--deframe-widget-font-leading-md);
2414
2653
  line-height: var(--deframe-widget-font-leading-md);
@@ -2417,6 +2656,10 @@
2417
2656
  --tw-leading: var(--deframe-widget-font-leading-sm);
2418
2657
  line-height: var(--deframe-widget-font-leading-sm);
2419
2658
  }
2659
+ .leading-\[var\(--deframe-widget-font-leading-xl\)\] {
2660
+ --tw-leading: var(--deframe-widget-font-leading-xl);
2661
+ line-height: var(--deframe-widget-font-leading-xl);
2662
+ }
2420
2663
  .leading-\[var\(--deframe-widget-font-leading-xs\)\] {
2421
2664
  --tw-leading: var(--deframe-widget-font-leading-xs);
2422
2665
  line-height: var(--deframe-widget-font-leading-xs);
@@ -2484,6 +2727,14 @@
2484
2727
  --tw-font-weight: var(--deframe-widget-font-family);
2485
2728
  font-weight: var(--deframe-widget-font-family);
2486
2729
  }
2730
+ .font-\[var\(--deframe-widget-font-weight-medium\)\] {
2731
+ --tw-font-weight: var(--deframe-widget-font-weight-medium);
2732
+ font-weight: var(--deframe-widget-font-weight-medium);
2733
+ }
2734
+ .font-\[var\(--deframe-widget-font-weight-semibold\)\] {
2735
+ --tw-font-weight: var(--deframe-widget-font-weight-semibold);
2736
+ font-weight: var(--deframe-widget-font-weight-semibold);
2737
+ }
2487
2738
  .font-bold {
2488
2739
  --tw-font-weight: var(--font-weight-bold);
2489
2740
  font-weight: var(--font-weight-bold);
@@ -2558,6 +2809,9 @@
2558
2809
  .text-\[\#0A0A0A\] {
2559
2810
  color: #0A0A0A;
2560
2811
  }
2812
+ .text-\[\#1FC16B\] {
2813
+ color: #1FC16B;
2814
+ }
2561
2815
  .text-\[\#5A5A5A\] {
2562
2816
  color: #5A5A5A;
2563
2817
  }
@@ -2666,9 +2920,21 @@
2666
2920
  .text-gray-200 {
2667
2921
  color: var(--color-gray-200);
2668
2922
  }
2923
+ .text-gray-400 {
2924
+ color: var(--color-gray-400);
2925
+ }
2926
+ .text-gray-500\/600 {
2927
+ color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 600%, transparent);
2928
+ @supports (color: color-mix(in lab, red, red)) {
2929
+ color: color-mix(in oklab, var(--color-gray-500) 600%, transparent);
2930
+ }
2931
+ }
2669
2932
  .text-gray-600 {
2670
2933
  color: var(--color-gray-600);
2671
2934
  }
2935
+ .text-gray-700 {
2936
+ color: var(--color-gray-700);
2937
+ }
2672
2938
  .text-gray-800 {
2673
2939
  color: var(--color-gray-800);
2674
2940
  }
@@ -2693,6 +2959,9 @@
2693
2959
  .text-white {
2694
2960
  color: var(--color-white);
2695
2961
  }
2962
+ .text-yellow-400 {
2963
+ color: var(--color-yellow-400);
2964
+ }
2696
2965
  .text-yellow-800 {
2697
2966
  color: var(--color-yellow-800);
2698
2967
  }
@@ -2733,6 +3002,9 @@
2733
3002
  .opacity-0 {
2734
3003
  opacity: 0%;
2735
3004
  }
3005
+ .opacity-20 {
3006
+ opacity: 20%;
3007
+ }
2736
3008
  .opacity-25 {
2737
3009
  opacity: 25%;
2738
3010
  }
@@ -2804,6 +3076,10 @@
2804
3076
  }
2805
3077
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2806
3078
  }
3079
+ .shadow-\[0_20px_50px_rgba\(17\,20\,27\,0\.12\)\] {
3080
+ --tw-shadow: 0 20px 50px var(--tw-shadow-color, rgba(17,20,27,0.12));
3081
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3082
+ }
2807
3083
  .shadow-\[0px_1px_3px_0px_rgba\(0\,0\,0\,0\.1\)\] {
2808
3084
  --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));
2809
3085
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2864,6 +3140,10 @@
2864
3140
  --tw-blur: blur(160px);
2865
3141
  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,);
2866
3142
  }
3143
+ .blur-sm {
3144
+ --tw-blur: blur(var(--blur-sm));
3145
+ 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,);
3146
+ }
2867
3147
  .filter {
2868
3148
  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,);
2869
3149
  }
@@ -3178,6 +3458,13 @@
3178
3458
  }
3179
3459
  }
3180
3460
  }
3461
+ .hover\:bg-\[color\:var\(--deframe-widget-color-bg-tertiary\)\] {
3462
+ &:hover {
3463
+ @media (hover: hover) {
3464
+ background-color: var(--deframe-widget-color-bg-tertiary);
3465
+ }
3466
+ }
3467
+ }
3181
3468
  .hover\:bg-\[rgba\(255\,255\,255\,0\.06\)\] {
3182
3469
  &:hover {
3183
3470
  @media (hover: hover) {