@clarify-labs/renderer 0.1.0 → 0.4.0

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 (43) hide show
  1. package/output/{AppShell-DBgUlirU.cjs → AppShell-CZw1MrPG.cjs} +1119 -394
  2. package/output/AppShell-CZw1MrPG.cjs.map +1 -0
  3. package/output/{AppShell-C_bj6ZhV.js → AppShell-nQnuKyn2.js} +1098 -397
  4. package/output/AppShell-nQnuKyn2.js.map +1 -0
  5. package/output/client.cjs +1 -1
  6. package/output/client.js +1 -1
  7. package/output/components/Callout.d.ts +10 -0
  8. package/output/components/Card.d.ts +15 -0
  9. package/output/components/PageNavigation.d.ts +5 -0
  10. package/output/components/index.d.ts +5 -0
  11. package/output/context.d.ts +2 -0
  12. package/output/i18n.d.ts +5 -0
  13. package/output/index.cjs +1357 -346
  14. package/output/index.cjs.map +1 -1
  15. package/output/index.d.ts +2 -2
  16. package/output/index.js +1355 -347
  17. package/output/index.js.map +1 -1
  18. package/output/mdx/components.d.ts +3 -0
  19. package/output/mdx/primitives.d.ts +2 -2
  20. package/output/openapi/example-panels.d.ts +31 -0
  21. package/output/openapi/helpers.d.ts +24 -0
  22. package/output/openapi/index.d.ts +2 -19
  23. package/output/openapi/openapi-page.d.ts +19 -0
  24. package/output/openapi/request-code.d.ts +16 -0
  25. package/output/openapi/schema-properties.d.ts +15 -0
  26. package/output/openapi/spec-path.d.ts +2 -0
  27. package/output/openapi/types.d.ts +66 -0
  28. package/output/{render-Ca4Is683.js → render-BCiQn6Q1.js} +2 -2
  29. package/output/{render-Ca4Is683.js.map → render-BCiQn6Q1.js.map} +1 -1
  30. package/output/{render-CLI-MnH_.cjs → render-CZsdzmme.cjs} +2 -2
  31. package/output/{render-CLI-MnH_.cjs.map → render-CZsdzmme.cjs.map} +1 -1
  32. package/output/renderer.css +1636 -551
  33. package/output/server.cjs +1 -1
  34. package/output/server.js +1 -1
  35. package/output/shell/ContentActions.d.ts +1 -0
  36. package/output/shell/Header.d.ts +4 -3
  37. package/output/shell/icons.d.ts +4 -0
  38. package/output/shell/mobile.d.ts +2 -1
  39. package/output/types.d.ts +62 -9
  40. package/output/utils/path.d.ts +2 -0
  41. package/package.json +7 -1
  42. package/output/AppShell-C_bj6ZhV.js.map +0 -1
  43. package/output/AppShell-DBgUlirU.cjs.map +0 -1
@@ -13,15 +13,7 @@
13
13
  --tw-space-y-reverse: 0;
14
14
  --tw-divide-y-reverse: 0;
15
15
  --tw-border-style: solid;
16
- --tw-gradient-position: initial;
17
- --tw-gradient-from: #0000;
18
- --tw-gradient-via: #0000;
19
- --tw-gradient-to: #0000;
20
- --tw-gradient-stops: initial;
21
- --tw-gradient-via-stops: initial;
22
- --tw-gradient-from-position: 0%;
23
- --tw-gradient-via-position: 50%;
24
- --tw-gradient-to-position: 100%;
16
+ --tw-leading: initial;
25
17
  --tw-font-weight: initial;
26
18
  --tw-tracking: initial;
27
19
  --tw-shadow: 0 0 #0000;
@@ -81,21 +73,34 @@
81
73
  --color-red-500: oklch(63.7% .237 25.331);
82
74
  --color-red-700: oklch(50.5% .213 27.518);
83
75
  --color-amber-50: oklch(98.7% .022 95.277);
76
+ --color-amber-100: oklch(96.2% .059 95.617);
84
77
  --color-amber-200: oklch(92.4% .12 95.746);
85
78
  --color-amber-300: oklch(87.9% .169 91.605);
86
79
  --color-amber-400: oklch(82.8% .189 84.429);
87
80
  --color-amber-500: oklch(76.9% .188 70.08);
81
+ --color-amber-600: oklch(66.6% .179 58.318);
88
82
  --color-amber-700: oklch(55.5% .163 48.998);
83
+ --color-amber-900: oklch(41.4% .112 45.904);
84
+ --color-amber-950: oklch(27.9% .077 45.635);
89
85
  --color-emerald-50: oklch(97.9% .021 166.113);
86
+ --color-emerald-100: oklch(95% .052 163.051);
90
87
  --color-emerald-200: oklch(90.5% .093 164.15);
91
88
  --color-emerald-300: oklch(84.5% .143 164.978);
92
89
  --color-emerald-400: oklch(76.5% .177 163.223);
93
90
  --color-emerald-500: oklch(69.6% .17 162.48);
94
91
  --color-emerald-600: oklch(59.6% .145 163.225);
92
+ --color-emerald-700: oklch(50.8% .118 165.612);
93
+ --color-emerald-800: oklch(43.2% .095 166.913);
95
94
  --color-emerald-900: oklch(37.8% .077 168.94);
95
+ --color-emerald-950: oklch(26.2% .051 172.552);
96
+ --color-sky-50: oklch(97.7% .013 236.62);
97
+ --color-sky-100: oklch(95.1% .026 236.824);
96
98
  --color-sky-300: oklch(82.8% .111 230.318);
97
99
  --color-sky-400: oklch(74.6% .16 232.661);
98
100
  --color-sky-500: oklch(68.5% .169 237.323);
101
+ --color-sky-600: oklch(58.8% .158 241.966);
102
+ --color-sky-900: oklch(39.1% .09 240.876);
103
+ --color-sky-950: oklch(29.3% .066 243.157);
99
104
  --color-violet-300: oklch(81.1% .111 293.571);
100
105
  --color-violet-400: oklch(70.2% .183 293.541);
101
106
  --color-violet-500: oklch(60.6% .25 292.717);
@@ -103,9 +108,14 @@
103
108
  --color-fuchsia-500: oklch(66.7% .295 322.15);
104
109
  --color-pink-300: oklch(82.3% .12 346.018);
105
110
  --color-rose-50: oklch(96.9% .015 12.422);
111
+ --color-rose-100: oklch(94.1% .03 12.58);
106
112
  --color-rose-200: oklch(89.2% .058 10.001);
113
+ --color-rose-300: oklch(81% .117 11.638);
107
114
  --color-rose-400: oklch(71.2% .194 13.428);
108
115
  --color-rose-500: oklch(64.5% .246 16.439);
116
+ --color-rose-600: oklch(58.6% .253 17.585);
117
+ --color-rose-900: oklch(41% .159 10.272);
118
+ --color-rose-950: oklch(27.1% .105 12.094);
109
119
  --color-zinc-50: oklch(98.5% 0 0);
110
120
  --color-zinc-100: oklch(96.7% .001 286.375);
111
121
  --color-zinc-200: oklch(92% .004 286.32);
@@ -121,17 +131,16 @@
121
131
  --color-white: #fff;
122
132
  --spacing: .25rem;
123
133
  --container-sm: 24rem;
124
- --container-md: 28rem;
125
134
  --container-lg: 33rem;
126
135
  --container-xl: 36rem;
127
136
  --container-2xl: 40rem;
128
- --container-3xl: 50rem;
129
- --container-5xl: 66rem;
130
137
  --container-6xl: 72rem;
131
138
  --text-xs: .8125rem;
132
139
  --text-xs--line-height: 1.5rem;
133
140
  --text-sm: .875rem;
134
141
  --text-sm--line-height: 1.5rem;
142
+ --text-base: 1rem;
143
+ --text-base--line-height: 1.75rem;
135
144
  --text-3xl: 1.875rem;
136
145
  --text-3xl--line-height: 2.25rem;
137
146
  --text-5xl: 3rem;
@@ -139,8 +148,8 @@
139
148
  --font-weight-medium: 500;
140
149
  --font-weight-semibold: 600;
141
150
  --font-weight-bold: 700;
151
+ --font-weight-black: 900;
142
152
  --tracking-tight: -.025em;
143
- --tracking-normal: 0em;
144
153
  --tracking-wide: .025em;
145
154
  --tracking-widest: .1em;
146
155
  --radius-md: .375rem;
@@ -429,8 +438,8 @@
429
438
  }
430
439
 
431
440
  body {
432
- background: var(--color-white);
433
- color: var(--color-zinc-900);
441
+ background: var(--clarify-theme-tokens-colors-background, var(--color-white));
442
+ color: var(--clarify-theme-tokens-colors-foreground, var(--color-zinc-900));
434
443
  }
435
444
 
436
445
  .dark body {
@@ -481,6 +490,404 @@
481
490
  }
482
491
 
483
492
  @layer components {
493
+ :root, .clarify-app {
494
+ --clarify-ui-text-strong: var(--clarify-theme-tokens-colors-foreground);
495
+ --clarify-ui-text: var(--clarify-theme-tokens-colors-foreground);
496
+ }
497
+
498
+ @supports (color: color-mix(in lab, red, red)) {
499
+ :root, .clarify-app {
500
+ --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 88%, transparent);
501
+ }
502
+ }
503
+
504
+ :root, .clarify-app {
505
+ --clarify-ui-text-soft: var(--clarify-theme-tokens-colors-foreground);
506
+ }
507
+
508
+ @supports (color: color-mix(in lab, red, red)) {
509
+ :root, .clarify-app {
510
+ --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 68%, transparent);
511
+ }
512
+ }
513
+
514
+ :root, .clarify-app {
515
+ --clarify-ui-text-faint: var(--clarify-theme-tokens-colors-foreground);
516
+ }
517
+
518
+ @supports (color: color-mix(in lab, red, red)) {
519
+ :root, .clarify-app {
520
+ --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 54%, transparent);
521
+ }
522
+ }
523
+
524
+ :root, .clarify-app {
525
+ --clarify-ui-hover-background: var(--clarify-theme-tokens-colors-foreground);
526
+ }
527
+
528
+ @supports (color: color-mix(in lab, red, red)) {
529
+ :root, .clarify-app {
530
+ --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
531
+ }
532
+ }
533
+
534
+ :root, .clarify-app {
535
+ --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
536
+ }
537
+
538
+ @supports (color: color-mix(in lab, red, red)) {
539
+ :root, .clarify-app {
540
+ --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
541
+ }
542
+ }
543
+
544
+ :root, .clarify-app {
545
+ --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
546
+ }
547
+
548
+ @supports (color: color-mix(in lab, red, red)) {
549
+ :root, .clarify-app {
550
+ --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 4%, transparent);
551
+ }
552
+ }
553
+
554
+ :root, .clarify-app {
555
+ --clarify-ui-overlay-background: var(--clarify-theme-tokens-colors-muted);
556
+ }
557
+
558
+ @supports (color: color-mix(in lab, red, red)) {
559
+ :root, .clarify-app {
560
+ --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 25%, transparent);
561
+ }
562
+ }
563
+
564
+ :root, .clarify-app {
565
+ --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-primary);
566
+ --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
567
+ }
568
+
569
+ @supports (color: color-mix(in lab, red, red)) {
570
+ :root, .clarify-app {
571
+ --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 9%, transparent);
572
+ }
573
+ }
574
+
575
+ :root, .clarify-app {
576
+ --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-primary);
577
+ }
578
+
579
+ @supports (color: color-mix(in lab, red, red)) {
580
+ :root, .clarify-app {
581
+ --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
582
+ }
583
+ }
584
+
585
+ :root, .clarify-app {
586
+ --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-accent);
587
+ }
588
+
589
+ @supports (color: color-mix(in lab, red, red)) {
590
+ :root, .clarify-app {
591
+ --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 18%, transparent);
592
+ }
593
+ }
594
+
595
+ :root, .clarify-app {
596
+ --clarify-ui-menu-width: 13rem;
597
+ --clarify-ui-action-menu-width: 19.5rem;
598
+ --clarify-ui-control-font-size: .875rem;
599
+ --clarify-ui-control-line-height: 1.25rem;
600
+ --clarify-ui-menu-font-size: .875rem;
601
+ --clarify-ui-menu-line-height: 1.5rem;
602
+ --clarify-ui-description-font-size: .75rem;
603
+ --clarify-ui-description-line-height: 1.25rem;
604
+ --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
605
+ --clarify-ui-navigation-section-line-height: var(--clarify-ui-menu-line-height);
606
+ --clarify-ui-navigation-section-badge-font-size: var(--clarify-ui-description-font-size);
607
+ --clarify-ui-navigation-section-badge-line-height: var(--clarify-ui-menu-line-height);
608
+ }
609
+
610
+ .dark, .dark .clarify-app {
611
+ --clarify-ui-text-strong: var(--color-white);
612
+ --clarify-ui-text: var(--color-zinc-200);
613
+ --clarify-ui-text-soft: var(--color-zinc-300);
614
+ --clarify-ui-text-faint: var(--color-zinc-400);
615
+ --clarify-ui-hover-background: #ffffff0d;
616
+ --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
617
+ }
618
+
619
+ @supports (color: color-mix(in lab, red, red)) {
620
+ .dark, .dark .clarify-app {
621
+ --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
622
+ }
623
+ }
624
+
625
+ .dark, .dark .clarify-app {
626
+ --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-primary);
627
+ }
628
+
629
+ @supports (color: color-mix(in lab, red, red)) {
630
+ .dark, .dark .clarify-app {
631
+ --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
632
+ }
633
+ }
634
+
635
+ .dark, .dark .clarify-app {
636
+ --clarify-ui-overlay-background: #0006;
637
+ --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-accent);
638
+ }
639
+
640
+ @supports (color: color-mix(in lab, red, red)) {
641
+ .dark, .dark .clarify-app {
642
+ --clarify-ui-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 72%, white);
643
+ }
644
+ }
645
+
646
+ .dark, .dark .clarify-app {
647
+ --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
648
+ }
649
+
650
+ @supports (color: color-mix(in lab, red, red)) {
651
+ .dark, .dark .clarify-app {
652
+ --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 16%, transparent);
653
+ }
654
+ }
655
+
656
+ .dark, .dark .clarify-app {
657
+ --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-accent);
658
+ }
659
+
660
+ @supports (color: color-mix(in lab, red, red)) {
661
+ .dark, .dark .clarify-app {
662
+ --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 28%, transparent);
663
+ }
664
+ }
665
+
666
+ .dark, .dark .clarify-app {
667
+ --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-primary);
668
+ }
669
+
670
+ @supports (color: color-mix(in lab, red, red)) {
671
+ .dark, .dark .clarify-app {
672
+ --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 28%, transparent);
673
+ }
674
+ }
675
+
676
+ .clarify-ui-control {
677
+ color: var(--clarify-ui-text);
678
+ font-size: var(--clarify-ui-control-font-size);
679
+ line-height: var(--clarify-ui-control-line-height);
680
+ font-weight: 500;
681
+ }
682
+
683
+ .clarify-ui-control:hover, .clarify-ui-control[aria-expanded="true"] {
684
+ color: var(--clarify-ui-text-strong);
685
+ background: var(--clarify-ui-hover-background);
686
+ }
687
+
688
+ .clarify-ui-icon-soft {
689
+ color: var(--clarify-ui-text-soft);
690
+ }
691
+
692
+ .clarify-ui-backdrop {
693
+ background: var(--clarify-ui-overlay-background);
694
+ }
695
+
696
+ .clarify-ui-icon-button:hover {
697
+ background: var(--clarify-ui-hover-background);
698
+ }
699
+
700
+ .clarify-ui-menu {
701
+ color: var(--clarify-ui-text);
702
+ font-size: var(--clarify-ui-menu-font-size);
703
+ line-height: var(--clarify-ui-menu-line-height);
704
+ }
705
+
706
+ .clarify-ui-menu-item {
707
+ color: var(--clarify-ui-text);
708
+ font-weight: 500;
709
+ }
710
+
711
+ .clarify-ui-menu-item:hover, .clarify-ui-menu-item[data-focus], .clarify-ui-menu-item-focus {
712
+ color: var(--clarify-ui-text-strong);
713
+ background: var(--clarify-ui-hover-background);
714
+ }
715
+
716
+ .clarify-ui-menu-item-active {
717
+ color: var(--clarify-ui-accent-text);
718
+ background: var(--clarify-ui-active-background);
719
+ }
720
+
721
+ .clarify-ui-menu-title {
722
+ color: var(--clarify-ui-text-strong);
723
+ font-size: var(--clarify-ui-menu-font-size);
724
+ line-height: var(--clarify-ui-menu-line-height);
725
+ font-weight: 600;
726
+ }
727
+
728
+ .clarify-ui-menu-description {
729
+ color: var(--clarify-ui-text-soft);
730
+ font-size: var(--clarify-ui-description-font-size);
731
+ line-height: var(--clarify-ui-description-line-height);
732
+ }
733
+
734
+ .clarify-ui-menu-code {
735
+ color: var(--clarify-ui-text-faint);
736
+ font-size: var(--clarify-ui-description-font-size);
737
+ line-height: var(--clarify-ui-description-line-height);
738
+ }
739
+
740
+ .clarify-ui-menu-icon {
741
+ color: var(--clarify-ui-text-soft);
742
+ }
743
+
744
+ .clarify-ui-top-link, .clarify-ui-tab {
745
+ color: var(--clarify-ui-text);
746
+ font-size: var(--clarify-ui-menu-font-size);
747
+ line-height: var(--clarify-ui-menu-line-height);
748
+ font-weight: 500;
749
+ }
750
+
751
+ .clarify-ui-top-link:hover, .clarify-ui-tab:hover, .clarify-ui-tab-active {
752
+ color: var(--clarify-ui-text-strong);
753
+ }
754
+
755
+ .clarify-brand-title, .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright, .clarify-search-button {
756
+ font-size: var(--clarify-ui-menu-font-size);
757
+ line-height: var(--clarify-ui-menu-line-height);
758
+ }
759
+
760
+ .clarify-brand-title {
761
+ color: var(--clarify-ui-text-strong);
762
+ }
763
+
764
+ .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright {
765
+ color: var(--clarify-ui-text-soft);
766
+ }
767
+
768
+ .clarify-footer-link:hover, .clarify-footer-social:hover {
769
+ color: var(--clarify-ui-text-strong);
770
+ }
771
+
772
+ .clarify-built-with {
773
+ color: var(--clarify-ui-text-soft);
774
+ font-size: var(--clarify-ui-description-font-size);
775
+ line-height: var(--clarify-ui-description-line-height);
776
+ }
777
+
778
+ .clarify-built-with:hover {
779
+ color: var(--clarify-ui-text-strong);
780
+ background: var(--clarify-ui-hover-background);
781
+ }
782
+
783
+ .clarify-built-with-brand {
784
+ color: var(--clarify-ui-text-strong);
785
+ }
786
+
787
+ .clarify-navigation-group-title {
788
+ color: var(--clarify-ui-text-strong);
789
+ font-size: var(--clarify-ui-menu-font-size);
790
+ line-height: var(--clarify-ui-menu-line-height);
791
+ letter-spacing: -.01em;
792
+ font-weight: 600;
793
+ }
794
+
795
+ .clarify-navigation-group-title-icon {
796
+ color: var(--clarify-theme-tokens-colors-primary);
797
+ }
798
+
799
+ .clarify-navigation-link {
800
+ color: var(--clarify-ui-text);
801
+ font-size: var(--clarify-ui-menu-font-size);
802
+ line-height: var(--clarify-ui-menu-line-height);
803
+ letter-spacing: -.01em;
804
+ font-weight: 500;
805
+ }
806
+
807
+ .clarify-navigation-anchor-link {
808
+ color: var(--clarify-ui-text-soft);
809
+ font-size: var(--clarify-ui-navigation-section-font-size);
810
+ line-height: var(--clarify-ui-navigation-section-line-height);
811
+ font-weight: 500;
812
+ }
813
+
814
+ .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
815
+ color: var(--clarify-ui-text-strong);
816
+ }
817
+
818
+ .clarify-navigation-section-badge {
819
+ font-size: var(--clarify-ui-navigation-section-badge-font-size);
820
+ line-height: var(--clarify-ui-navigation-section-badge-line-height);
821
+ }
822
+
823
+ .clarify-navigation-section-highlight {
824
+ background: var(--clarify-ui-subtle-background);
825
+ }
826
+
827
+ .clarify-search-result[aria-selected="true"], .clarify-search-result-active {
828
+ background: var(--clarify-ui-hover-background);
829
+ }
830
+
831
+ .clarify-search-result-title {
832
+ color: var(--clarify-ui-text-strong);
833
+ font-size: var(--clarify-ui-control-font-size);
834
+ line-height: var(--clarify-ui-control-line-height);
835
+ letter-spacing: -.01em;
836
+ font-weight: 600;
837
+ }
838
+
839
+ .clarify-search-result[aria-selected="true"] .clarify-search-result-title {
840
+ color: var(--clarify-ui-accent-text);
841
+ }
842
+
843
+ .clarify-search-result-hierarchy {
844
+ color: var(--clarify-ui-text-soft);
845
+ font-size: var(--clarify-ui-description-font-size);
846
+ line-height: var(--clarify-ui-description-line-height);
847
+ }
848
+
849
+ .clarify-search-result-separator {
850
+ color: var(--clarify-ui-text-faint);
851
+ }
852
+
853
+ .clarify-search-field {
854
+ color: var(--clarify-ui-text-strong);
855
+ font-size: .9375rem;
856
+ line-height: 1.5rem;
857
+ }
858
+
859
+ .clarify-search-field::placeholder {
860
+ color: var(--clarify-ui-text-faint);
861
+ }
862
+
863
+ @media (min-width: 40rem) {
864
+ .clarify-search-field {
865
+ font-size: var(--clarify-ui-control-font-size);
866
+ line-height: var(--clarify-ui-control-line-height);
867
+ }
868
+ }
869
+
870
+ .clarify-search-button {
871
+ color: var(--clarify-ui-text-soft);
872
+ }
873
+
874
+ .clarify-search-button:hover {
875
+ color: var(--clarify-ui-text-strong);
876
+ box-shadow: inset 0 0 0 1px var(--clarify-theme-tokens-colors-foreground);
877
+ }
878
+
879
+ @supports (color: color-mix(in lab, red, red)) {
880
+ .clarify-search-button:hover {
881
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 28%, transparent);
882
+ }
883
+ }
884
+
885
+ .clarify-search-shortcut {
886
+ color: var(--clarify-ui-text-faint);
887
+ font-size: var(--clarify-ui-description-font-size);
888
+ line-height: var(--clarify-ui-description-line-height);
889
+ }
890
+
484
891
  .prose .contains-task-list {
485
892
  padding-left: 0;
486
893
  list-style: none;
@@ -493,17 +900,29 @@
493
900
  }
494
901
 
495
902
  .prose .task-list-item > input[type="checkbox"] {
496
- accent-color: var(--color-emerald-500);
903
+ accent-color: var(--clarify-theme-tokens-colors-primary, var(--color-emerald-500));
497
904
  flex: none;
498
905
  margin-top: .45rem;
499
906
  }
500
907
  }
501
908
 
502
909
  @layer utilities {
910
+ .\@container {
911
+ container-type: inline-size;
912
+ }
913
+
914
+ .pointer-events-auto {
915
+ pointer-events: auto;
916
+ }
917
+
503
918
  .pointer-events-none {
504
919
  pointer-events: none;
505
920
  }
506
921
 
922
+ .collapse {
923
+ visibility: collapse;
924
+ }
925
+
507
926
  .visible {
508
927
  visibility: visible;
509
928
  }
@@ -568,10 +987,6 @@
568
987
  top: calc(var(--spacing) * 16);
569
988
  }
570
989
 
571
- .top-full {
572
- top: 100%;
573
- }
574
-
575
990
  .top-px {
576
991
  top: 1px;
577
992
  }
@@ -604,10 +1019,18 @@
604
1019
  left: calc(var(--spacing) * 3);
605
1020
  }
606
1021
 
1022
+ .left-4 {
1023
+ left: calc(var(--spacing) * 4);
1024
+ }
1025
+
607
1026
  .-z-10 {
608
1027
  z-index: calc(10 * -1);
609
1028
  }
610
1029
 
1030
+ .z-10 {
1031
+ z-index: 10;
1032
+ }
1033
+
611
1034
  .z-20 {
612
1035
  z-index: 20;
613
1036
  }
@@ -658,10 +1081,18 @@
658
1081
  margin: 0;
659
1082
  }
660
1083
 
1084
+ .-mx-2 {
1085
+ margin-inline: calc(var(--spacing) * -2);
1086
+ }
1087
+
661
1088
  .mx-0 {
662
1089
  margin-inline: 0;
663
1090
  }
664
1091
 
1092
+ .mx-0\.5 {
1093
+ margin-inline: calc(var(--spacing) * .5);
1094
+ }
1095
+
665
1096
  .mx-2 {
666
1097
  margin-inline: calc(var(--spacing) * 2);
667
1098
  }
@@ -674,24 +1105,73 @@
674
1105
  margin-block: calc(var(--spacing) * 6);
675
1106
  }
676
1107
 
1108
+ .my-10 {
1109
+ margin-block: calc(var(--spacing) * 10);
1110
+ }
1111
+
1112
+ .prose {
1113
+ --tw-prose-body: var(--clarify-theme-tokens-colors-foreground);
1114
+ }
1115
+
1116
+ @supports (color: color-mix(in lab, red, red)) {
1117
+ .prose {
1118
+ --tw-prose-body: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 60%, var(--clarify-theme-tokens-colors-muted));
1119
+ }
1120
+ }
1121
+
1122
+ .prose {
1123
+ --tw-prose-headings: var(--clarify-theme-tokens-colors-foreground);
1124
+ --tw-prose-links: var(--clarify-theme-tokens-colors-primary);
1125
+ --tw-prose-links-hover: var(--clarify-theme-tokens-colors-accent);
1126
+ --tw-prose-links-underline: var(--clarify-theme-tokens-colors-primary);
1127
+ }
1128
+
1129
+ @supports (color: color-mix(in lab, red, red)) {
1130
+ .prose {
1131
+ --tw-prose-links-underline: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 30%, transparent);
1132
+ }
1133
+ }
1134
+
1135
+ .prose {
1136
+ --tw-prose-bold: var(--clarify-theme-tokens-colors-foreground);
1137
+ --tw-prose-counters: var(--clarify-theme-tokens-colors-muted);
1138
+ --tw-prose-bullets: var(--clarify-theme-tokens-colors-muted);
1139
+ }
1140
+
1141
+ @supports (color: color-mix(in lab, red, red)) {
1142
+ .prose {
1143
+ --tw-prose-bullets: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 35%, transparent);
1144
+ }
1145
+ }
1146
+
1147
+ .prose {
1148
+ --tw-prose-hr: var(--clarify-theme-tokens-colors-border);
1149
+ }
1150
+
1151
+ @supports (color: color-mix(in lab, red, red)) {
1152
+ .prose {
1153
+ --tw-prose-hr: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 65%, transparent);
1154
+ }
1155
+ }
1156
+
1157
+ .prose {
1158
+ --tw-prose-quotes: var(--clarify-theme-tokens-colors-foreground);
1159
+ --tw-prose-quote-borders: var(--clarify-theme-tokens-colors-border);
1160
+ --tw-prose-captions: var(--clarify-theme-tokens-colors-muted);
1161
+ --tw-prose-code: var(--clarify-theme-tokens-colors-foreground);
1162
+ --tw-prose-code-bg: var(--clarify-theme-tokens-colors-code-background);
1163
+ --tw-prose-code-ring: var(--clarify-theme-tokens-colors-border);
1164
+ --tw-prose-th-borders: var(--clarify-theme-tokens-colors-border);
1165
+ --tw-prose-td-borders: var(--clarify-theme-tokens-colors-border);
1166
+ }
1167
+
1168
+ @supports (color: color-mix(in lab, red, red)) {
1169
+ .prose {
1170
+ --tw-prose-td-borders: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 80%, transparent);
1171
+ }
1172
+ }
1173
+
677
1174
  .prose {
678
- --tw-prose-body: oklch(37% .013 285.805);
679
- --tw-prose-headings: oklch(21% .006 285.885);
680
- --tw-prose-links: oklch(69.6% .17 162.48);
681
- --tw-prose-links-hover: oklch(59.6% .145 163.225);
682
- --tw-prose-links-underline: oklab(69.6% -.162114 .0511766 / .3);
683
- --tw-prose-bold: oklch(21% .006 285.885);
684
- --tw-prose-counters: oklch(55.2% .016 285.938);
685
- --tw-prose-bullets: oklch(87.1% .006 286.286);
686
- --tw-prose-hr: oklab(21% .00164225 -.00577088 / .05);
687
- --tw-prose-quotes: oklch(21% .006 285.885);
688
- --tw-prose-quote-borders: oklch(92% .004 286.32);
689
- --tw-prose-captions: oklch(55.2% .016 285.938);
690
- --tw-prose-code: oklch(21% .006 285.885);
691
- --tw-prose-code-bg: oklch(96.7% .001 286.375);
692
- --tw-prose-code-ring: oklch(87.1% .006 286.286);
693
- --tw-prose-th-borders: oklch(87.1% .006 286.286);
694
- --tw-prose-td-borders: oklch(92% .004 286.32);
695
1175
  --tw-prose-invert-body: oklch(70.5% .015 286.067);
696
1176
  --tw-prose-invert-headings: #fff;
697
1177
  --tw-prose-invert-links: oklch(76.5% .177 163.223);
@@ -710,7 +1190,7 @@
710
1190
  --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
711
1191
  --tw-prose-invert-td-borders: oklch(37% .013 285.805);
712
1192
  color: var(--tw-prose-body);
713
- font-size: .875rem;
1193
+ font-size: 1rem;
714
1194
  line-height: 1.75rem;
715
1195
  }
716
1196
 
@@ -720,7 +1200,7 @@
720
1200
  }
721
1201
 
722
1202
  .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
723
- font-size: 1rem;
1203
+ font-size: 1.125rem;
724
1204
  line-height: 1.75rem;
725
1205
  }
726
1206
 
@@ -882,9 +1362,9 @@
882
1362
 
883
1363
  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
884
1364
  color: var(--tw-prose-code);
1365
+ border-radius: var(--clarify-theme-tokens-radius-lg);
885
1366
  box-shadow: inset 0 0 0 1px var(--tw-prose-code-ring);
886
1367
  background-color: var(--tw-prose-code-bg);
887
- border-radius: .5rem;
888
1368
  padding: .25rem .375rem;
889
1369
  font-size: .75rem;
890
1370
  }
@@ -905,6 +1385,10 @@
905
1385
  margin-bottom: 0 !important;
906
1386
  }
907
1387
 
1388
+ .mt-0 {
1389
+ margin-top: 0;
1390
+ }
1391
+
908
1392
  .mt-0\.5 {
909
1393
  margin-top: calc(var(--spacing) * .5);
910
1394
  }
@@ -921,6 +1405,10 @@
921
1405
  margin-top: calc(var(--spacing) * 3);
922
1406
  }
923
1407
 
1408
+ .mt-4 {
1409
+ margin-top: calc(var(--spacing) * 4);
1410
+ }
1411
+
924
1412
  .mt-6 {
925
1413
  margin-top: calc(var(--spacing) * 6);
926
1414
  }
@@ -933,6 +1421,10 @@
933
1421
  margin-right: calc(var(--spacing) * -1);
934
1422
  }
935
1423
 
1424
+ .mr-2 {
1425
+ margin-right: calc(var(--spacing) * 2);
1426
+ }
1427
+
936
1428
  .mr-auto {
937
1429
  margin-right: auto;
938
1430
  }
@@ -941,10 +1433,18 @@
941
1433
  margin-bottom: -1px;
942
1434
  }
943
1435
 
1436
+ .mb-1 {
1437
+ margin-bottom: var(--spacing);
1438
+ }
1439
+
944
1440
  .mb-3 {
945
1441
  margin-bottom: calc(var(--spacing) * 3);
946
1442
  }
947
1443
 
1444
+ .mb-6 {
1445
+ margin-bottom: calc(var(--spacing) * 6);
1446
+ }
1447
+
948
1448
  .mb-10 {
949
1449
  margin-bottom: calc(var(--spacing) * 10);
950
1450
  }
@@ -969,6 +1469,10 @@
969
1469
  margin-left: calc(var(--spacing) * -152);
970
1470
  }
971
1471
 
1472
+ .ml-2 {
1473
+ margin-left: calc(var(--spacing) * 2);
1474
+ }
1475
+
972
1476
  .ml-auto {
973
1477
  margin-left: auto;
974
1478
  }
@@ -1001,11 +1505,31 @@
1001
1505
  display: table;
1002
1506
  }
1003
1507
 
1508
+ .size-4 {
1509
+ width: calc(var(--spacing) * 4);
1510
+ height: calc(var(--spacing) * 4);
1511
+ }
1512
+
1513
+ .size-5 {
1514
+ width: calc(var(--spacing) * 5);
1515
+ height: calc(var(--spacing) * 5);
1516
+ }
1517
+
1004
1518
  .size-6 {
1005
1519
  width: calc(var(--spacing) * 6);
1006
1520
  height: calc(var(--spacing) * 6);
1007
1521
  }
1008
1522
 
1523
+ .size-8 {
1524
+ width: calc(var(--spacing) * 8);
1525
+ height: calc(var(--spacing) * 8);
1526
+ }
1527
+
1528
+ .size-9 {
1529
+ width: calc(var(--spacing) * 9);
1530
+ height: calc(var(--spacing) * 9);
1531
+ }
1532
+
1009
1533
  .size-12 {
1010
1534
  width: calc(var(--spacing) * 12);
1011
1535
  height: calc(var(--spacing) * 12);
@@ -1047,6 +1571,10 @@
1047
1571
  height: calc(var(--spacing) * 9);
1048
1572
  }
1049
1573
 
1574
+ .h-10 {
1575
+ height: calc(var(--spacing) * 10);
1576
+ }
1577
+
1050
1578
  .h-12 {
1051
1579
  height: calc(var(--spacing) * 12);
1052
1580
  }
@@ -1067,14 +1595,14 @@
1067
1595
  height: 100%;
1068
1596
  }
1069
1597
 
1070
- .h-px {
1071
- height: 1px;
1072
- }
1073
-
1074
1598
  .max-h-64 {
1075
1599
  max-height: calc(var(--spacing) * 64);
1076
1600
  }
1077
1601
 
1602
+ .min-h-11 {
1603
+ min-height: calc(var(--spacing) * 11);
1604
+ }
1605
+
1078
1606
  .min-h-\[calc\(--spacing\(12\)\+1px\)\] {
1079
1607
  min-height: calc(calc(var(--spacing) * 12) + 1px);
1080
1608
  }
@@ -1083,8 +1611,12 @@
1083
1611
  min-height: 100vh;
1084
1612
  }
1085
1613
 
1086
- .w-\(--button-width\) {
1087
- width: var(--button-width);
1614
+ .w-\(--clarify-ui-action-menu-width\) {
1615
+ width: var(--clarify-ui-action-menu-width);
1616
+ }
1617
+
1618
+ .w-\(--clarify-ui-menu-width\) {
1619
+ width: var(--clarify-ui-menu-width);
1088
1620
  }
1089
1621
 
1090
1622
  .w-\(--width\) {
@@ -1123,12 +1655,12 @@
1123
1655
  width: calc(var(--spacing) * 8);
1124
1656
  }
1125
1657
 
1126
- .w-44 {
1127
- width: calc(var(--spacing) * 44);
1658
+ .w-24 {
1659
+ width: calc(var(--spacing) * 24);
1128
1660
  }
1129
1661
 
1130
- .w-52 {
1131
- width: calc(var(--spacing) * 52);
1662
+ .w-80 {
1663
+ width: calc(var(--spacing) * 80);
1132
1664
  }
1133
1665
 
1134
1666
  .w-278\.25 {
@@ -1139,40 +1671,68 @@
1139
1671
  width: calc(var(--spacing) * 325);
1140
1672
  }
1141
1673
 
1674
+ .w-\[calc\(100\%\+1rem\)\] {
1675
+ width: calc(100% + 1rem);
1676
+ }
1677
+
1142
1678
  .w-full {
1143
1679
  width: 100%;
1144
1680
  }
1145
1681
 
1682
+ .w-max {
1683
+ width: max-content;
1684
+ }
1685
+
1146
1686
  .w-px {
1147
1687
  width: 1px;
1148
1688
  }
1149
1689
 
1150
- .max-w-2xl {
1151
- max-width: var(--container-2xl);
1690
+ .max-w-\(--clarify-theme-layout-max-width\) {
1691
+ max-width: var(--clarify-theme-layout-max-width);
1152
1692
  }
1153
1693
 
1154
- .max-w-3xl {
1155
- max-width: var(--container-3xl);
1694
+ .max-w-2xl {
1695
+ max-width: var(--container-2xl);
1156
1696
  }
1157
1697
 
1158
1698
  .max-w-6xl {
1159
1699
  max-width: var(--container-6xl);
1160
1700
  }
1161
1701
 
1702
+ .max-w-32 {
1703
+ max-width: calc(var(--spacing) * 32);
1704
+ }
1705
+
1706
+ .max-w-48 {
1707
+ max-width: calc(var(--spacing) * 48);
1708
+ }
1709
+
1710
+ .max-w-\[36vw\] {
1711
+ max-width: 36vw;
1712
+ }
1713
+
1714
+ .max-w-\[min\(32rem\,calc\(100vw-2rem\)\)\] {
1715
+ max-width: min(32rem, 100vw - 2rem);
1716
+ }
1717
+
1162
1718
  .max-w-none {
1163
1719
  max-width: none;
1164
1720
  }
1165
1721
 
1722
+ .min-w-\(--button-width\) {
1723
+ min-width: var(--button-width);
1724
+ }
1725
+
1166
1726
  .min-w-0 {
1167
1727
  min-width: 0;
1168
1728
  }
1169
1729
 
1170
- .min-w-32 {
1171
- min-width: calc(var(--spacing) * 32);
1730
+ .min-w-16 {
1731
+ min-width: calc(var(--spacing) * 16);
1172
1732
  }
1173
1733
 
1174
- .min-w-40 {
1175
- min-width: calc(var(--spacing) * 40);
1734
+ .min-w-28 {
1735
+ min-width: calc(var(--spacing) * 28);
1176
1736
  }
1177
1737
 
1178
1738
  .flex-1 {
@@ -1195,6 +1755,11 @@
1195
1755
  transform-origin: 100% 0;
1196
1756
  }
1197
1757
 
1758
+ .-translate-x-1\/2 {
1759
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
1760
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1761
+ }
1762
+
1198
1763
  .-translate-y-1\.5 {
1199
1764
  --tw-translate-y: calc(var(--spacing) * -1.5);
1200
1765
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1226,6 +1791,10 @@
1226
1791
  cursor: default;
1227
1792
  }
1228
1793
 
1794
+ .cursor-pointer {
1795
+ cursor: pointer;
1796
+ }
1797
+
1229
1798
  .resize {
1230
1799
  resize: both;
1231
1800
  }
@@ -1242,10 +1811,6 @@
1242
1811
  scroll-margin-top: calc(var(--spacing) * 32);
1243
1812
  }
1244
1813
 
1245
- .scrollbar-none {
1246
- scrollbar-width: none;
1247
- }
1248
-
1249
1814
  .list-none {
1250
1815
  list-style-type: none;
1251
1816
  }
@@ -1282,6 +1847,10 @@
1282
1847
  align-items: flex-start;
1283
1848
  }
1284
1849
 
1850
+ .items-stretch {
1851
+ align-items: stretch;
1852
+ }
1853
+
1285
1854
  .justify-between {
1286
1855
  justify-content: space-between;
1287
1856
  }
@@ -1334,20 +1903,14 @@
1334
1903
  gap: calc(var(--spacing) * 8);
1335
1904
  }
1336
1905
 
1337
- .gap-12 {
1338
- gap: calc(var(--spacing) * 12);
1339
- }
1340
-
1341
1906
  :where(.space-y-6 > :not(:last-child)) {
1342
1907
  --tw-space-y-reverse: 0;
1343
1908
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
1344
1909
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
1345
1910
  }
1346
1911
 
1347
- :where(.space-y-16 > :not(:last-child)) {
1348
- --tw-space-y-reverse: 0;
1349
- margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
1350
- margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
1912
+ .gap-x-2 {
1913
+ column-gap: calc(var(--spacing) * 2);
1351
1914
  }
1352
1915
 
1353
1916
  .gap-x-3 {
@@ -1358,8 +1921,12 @@
1358
1921
  column-gap: calc(var(--spacing) * 4);
1359
1922
  }
1360
1923
 
1361
- .gap-x-16 {
1362
- column-gap: calc(var(--spacing) * 16);
1924
+ .gap-x-8 {
1925
+ column-gap: calc(var(--spacing) * 8);
1926
+ }
1927
+
1928
+ .gap-y-0\.5 {
1929
+ row-gap: calc(var(--spacing) * .5);
1363
1930
  }
1364
1931
 
1365
1932
  .gap-y-2 {
@@ -1378,6 +1945,16 @@
1378
1945
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1379
1946
  }
1380
1947
 
1948
+ :where(.divide-zinc-200\/70 > :not(:last-child)) {
1949
+ border-color: #e4e4e7b3;
1950
+ }
1951
+
1952
+ @supports (color: color-mix(in lab, red, red)) {
1953
+ :where(.divide-zinc-200\/70 > :not(:last-child)) {
1954
+ border-color: color-mix(in oklab, var(--color-zinc-200) 70%, transparent);
1955
+ }
1956
+ }
1957
+
1381
1958
  :where(.divide-zinc-900\/5 > :not(:last-child)) {
1382
1959
  border-color: #18181b0d;
1383
1960
  }
@@ -1414,14 +1991,38 @@
1414
1991
  overflow-y: auto;
1415
1992
  }
1416
1993
 
1417
- .scroll-smooth {
1418
- scroll-behavior: smooth;
1994
+ .rounded {
1995
+ border-radius: .25rem;
1996
+ }
1997
+
1998
+ .rounded-\(--clarify-theme-tokens-radius-lg\) {
1999
+ border-radius: var(--clarify-theme-tokens-radius-lg);
2000
+ }
2001
+
2002
+ .rounded-\(--clarify-theme-tokens-radius-md\) {
2003
+ border-radius: var(--clarify-theme-tokens-radius-md);
2004
+ }
2005
+
2006
+ .rounded-\(--clarify-theme-tokens-radius-sm\) {
2007
+ border-radius: var(--clarify-theme-tokens-radius-sm);
2008
+ }
2009
+
2010
+ .rounded-\(--clarify-theme-tokens-radius-xl\) {
2011
+ border-radius: var(--clarify-theme-tokens-radius-xl);
1419
2012
  }
1420
2013
 
1421
2014
  .rounded-2xl {
1422
2015
  border-radius: var(--radius-2xl);
1423
2016
  }
1424
2017
 
2018
+ .rounded-\[var\(--clarify-theme-tokens-radius-lg\)\] {
2019
+ border-radius: var(--clarify-theme-tokens-radius-lg);
2020
+ }
2021
+
2022
+ .rounded-\[var\(--clarify-theme-tokens-radius-xl\)\] {
2023
+ border-radius: var(--clarify-theme-tokens-radius-xl);
2024
+ }
2025
+
1425
2026
  .rounded-full {
1426
2027
  border-radius: 3.40282e38px;
1427
2028
  }
@@ -1443,6 +2044,11 @@
1443
2044
  border-width: 1px;
1444
2045
  }
1445
2046
 
2047
+ .border-0 {
2048
+ border-style: var(--tw-border-style);
2049
+ border-width: 0;
2050
+ }
2051
+
1446
2052
  .border-y {
1447
2053
  border-block-style: var(--tw-border-style);
1448
2054
  border-block-width: 1px;
@@ -1463,12 +2069,34 @@
1463
2069
  border-left-width: 1px;
1464
2070
  }
1465
2071
 
2072
+ .border-\(--clarify-theme-tokens-colors-border\) {
2073
+ border-color: var(--clarify-theme-tokens-colors-border);
2074
+ }
2075
+
2076
+ .border-\(--clarify-ui-accent-border\) {
2077
+ border-color: var(--clarify-ui-accent-border);
2078
+ }
2079
+
2080
+ .border-\[color\:var\(--clarify-theme-tokens-colors-border\)\] {
2081
+ border-color: var(--clarify-theme-tokens-colors-border);
2082
+ }
2083
+
2084
+ .border-\[var\(--clarify-theme-tokens-colors-primary\)\] {
2085
+ border-color: var(--clarify-theme-tokens-colors-primary);
2086
+ }
2087
+
1466
2088
  .border-amber-200 {
1467
2089
  border-color: var(--color-amber-200);
1468
2090
  }
1469
2091
 
1470
- .border-emerald-500 {
1471
- border-color: var(--color-emerald-500);
2092
+ .border-amber-500\/20 {
2093
+ border-color: #f99c0033;
2094
+ }
2095
+
2096
+ @supports (color: color-mix(in lab, red, red)) {
2097
+ .border-amber-500\/20 {
2098
+ border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
2099
+ }
1472
2100
  }
1473
2101
 
1474
2102
  .border-emerald-500\/20 {
@@ -1485,24 +2113,44 @@
1485
2113
  border-color: var(--color-red-200);
1486
2114
  }
1487
2115
 
1488
- .border-transparent {
1489
- border-color: #0000;
2116
+ .border-rose-500\/20 {
2117
+ border-color: #ff235733;
1490
2118
  }
1491
2119
 
1492
- .border-white\/10 {
1493
- border-color: #ffffff1a;
2120
+ @supports (color: color-mix(in lab, red, red)) {
2121
+ .border-rose-500\/20 {
2122
+ border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
2123
+ }
2124
+ }
2125
+
2126
+ .border-sky-500\/20 {
2127
+ border-color: #00a5ef33;
1494
2128
  }
1495
2129
 
1496
2130
  @supports (color: color-mix(in lab, red, red)) {
1497
- .border-white\/10 {
1498
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2131
+ .border-sky-500\/20 {
2132
+ border-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
1499
2133
  }
1500
2134
  }
1501
2135
 
2136
+ .border-transparent {
2137
+ border-color: #0000;
2138
+ }
2139
+
1502
2140
  .border-zinc-200 {
1503
2141
  border-color: var(--color-zinc-200);
1504
2142
  }
1505
2143
 
2144
+ .border-zinc-500\/20 {
2145
+ border-color: #71717b33;
2146
+ }
2147
+
2148
+ @supports (color: color-mix(in lab, red, red)) {
2149
+ .border-zinc-500\/20 {
2150
+ border-color: color-mix(in oklab, var(--color-zinc-500) 20%, transparent);
2151
+ }
2152
+ }
2153
+
1506
2154
  .border-zinc-700 {
1507
2155
  border-color: var(--color-zinc-700);
1508
2156
  }
@@ -1531,10 +2179,74 @@
1531
2179
  }
1532
2180
  }
1533
2181
 
2182
+ .bg-\(--clarify-theme-tokens-colors-background\), .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
2183
+ background-color: var(--clarify-theme-tokens-colors-background);
2184
+ }
2185
+
2186
+ @supports (color: color-mix(in lab, red, red)) {
2187
+ .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
2188
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-background) var(--bg-opacity-light), transparent);
2189
+ }
2190
+ }
2191
+
2192
+ .bg-\(--clarify-theme-tokens-colors-border\) {
2193
+ background-color: var(--clarify-theme-tokens-colors-border);
2194
+ }
2195
+
2196
+ .bg-\(--clarify-theme-tokens-colors-code-background\) {
2197
+ background-color: var(--clarify-theme-tokens-colors-code-background);
2198
+ }
2199
+
2200
+ .bg-\(--clarify-theme-tokens-colors-foreground\) {
2201
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2202
+ }
2203
+
2204
+ .bg-\(--clarify-theme-tokens-colors-primary\) {
2205
+ background-color: var(--clarify-theme-tokens-colors-primary);
2206
+ }
2207
+
2208
+ .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
2209
+ background-color: var(--clarify-theme-tokens-colors-surface);
2210
+ }
2211
+
2212
+ @supports (color: color-mix(in lab, red, red)) {
2213
+ .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
2214
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
2215
+ }
2216
+ }
2217
+
2218
+ .bg-\(--clarify-ui-accent-background\) {
2219
+ background-color: var(--clarify-ui-accent-background);
2220
+ }
2221
+
2222
+ .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
2223
+ background-color: var(--clarify-theme-tokens-colors-primary);
2224
+ }
2225
+
2226
+ @supports (color: color-mix(in lab, red, red)) {
2227
+ .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
2228
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 12%,transparent);
2229
+ }
2230
+ }
2231
+
2232
+ .bg-\[var\(--clarify-theme-tokens-colors-surface\)\] {
2233
+ background-color: var(--clarify-theme-tokens-colors-surface);
2234
+ }
2235
+
1534
2236
  .bg-amber-50 {
1535
2237
  background-color: var(--color-amber-50);
1536
2238
  }
1537
2239
 
2240
+ .bg-amber-50\/70 {
2241
+ background-color: #fffbebb3;
2242
+ }
2243
+
2244
+ @supports (color: color-mix(in lab, red, red)) {
2245
+ .bg-amber-50\/70 {
2246
+ background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
2247
+ }
2248
+ }
2249
+
1538
2250
  .bg-amber-400\/10 {
1539
2251
  background-color: #fcbb001a;
1540
2252
  }
@@ -1545,6 +2257,26 @@
1545
2257
  }
1546
2258
  }
1547
2259
 
2260
+ .bg-amber-400\/15 {
2261
+ background-color: #fcbb0026;
2262
+ }
2263
+
2264
+ @supports (color: color-mix(in lab, red, red)) {
2265
+ .bg-amber-400\/15 {
2266
+ background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
2267
+ }
2268
+ }
2269
+
2270
+ .bg-black\/30 {
2271
+ background-color: #0000004d;
2272
+ }
2273
+
2274
+ @supports (color: color-mix(in lab, red, red)) {
2275
+ .bg-black\/30 {
2276
+ background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
2277
+ }
2278
+ }
2279
+
1548
2280
  .bg-emerald-50\/50 {
1549
2281
  background-color: #ecfdf580;
1550
2282
  }
@@ -1555,6 +2287,10 @@
1555
2287
  }
1556
2288
  }
1557
2289
 
2290
+ .bg-emerald-100 {
2291
+ background-color: var(--color-emerald-100);
2292
+ }
2293
+
1558
2294
  .bg-emerald-400\/10 {
1559
2295
  background-color: #00d2941a;
1560
2296
  }
@@ -1565,8 +2301,14 @@
1565
2301
  }
1566
2302
  }
1567
2303
 
1568
- .bg-emerald-500 {
1569
- background-color: var(--color-emerald-500);
2304
+ .bg-emerald-400\/15 {
2305
+ background-color: #00d29426;
2306
+ }
2307
+
2308
+ @supports (color: color-mix(in lab, red, red)) {
2309
+ .bg-emerald-400\/15 {
2310
+ background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
2311
+ }
1570
2312
  }
1571
2313
 
1572
2314
  .bg-red-50 {
@@ -1577,126 +2319,126 @@
1577
2319
  background-color: var(--color-rose-50);
1578
2320
  }
1579
2321
 
1580
- .bg-sky-400\/10 {
1581
- background-color: #00bcfe1a;
2322
+ .bg-rose-50\/70 {
2323
+ background-color: #fff1f2b3;
1582
2324
  }
1583
2325
 
1584
2326
  @supports (color: color-mix(in lab, red, red)) {
1585
- .bg-sky-400\/10 {
1586
- background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
2327
+ .bg-rose-50\/70 {
2328
+ background-color: color-mix(in oklab, var(--color-rose-50) 70%, transparent);
1587
2329
  }
1588
2330
  }
1589
2331
 
1590
- .bg-transparent {
1591
- background-color: #0000;
2332
+ .bg-rose-400\/15 {
2333
+ background-color: #ff667f26;
1592
2334
  }
1593
2335
 
1594
- .bg-white {
1595
- background-color: var(--color-white);
2336
+ @supports (color: color-mix(in lab, red, red)) {
2337
+ .bg-rose-400\/15 {
2338
+ background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
2339
+ }
1596
2340
  }
1597
2341
 
1598
- .bg-white\/\(--bg-opacity-light\) {
1599
- background-color: #fff;
2342
+ .bg-sky-50\/50 {
2343
+ background-color: #f0f9ff80;
1600
2344
  }
1601
2345
 
1602
2346
  @supports (color: color-mix(in lab, red, red)) {
1603
- .bg-white\/\(--bg-opacity-light\) {
1604
- background-color: color-mix(in oklab, var(--color-white) var(--bg-opacity-light), transparent);
2347
+ .bg-sky-50\/50 {
2348
+ background-color: color-mix(in oklab, var(--color-sky-50) 50%, transparent);
1605
2349
  }
1606
2350
  }
1607
2351
 
1608
- .bg-white\/5 {
1609
- background-color: #ffffff0d;
2352
+ .bg-sky-400\/10 {
2353
+ background-color: #00bcfe1a;
1610
2354
  }
1611
2355
 
1612
2356
  @supports (color: color-mix(in lab, red, red)) {
1613
- .bg-white\/5 {
1614
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2357
+ .bg-sky-400\/10 {
2358
+ background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
1615
2359
  }
1616
2360
  }
1617
2361
 
1618
- .bg-white\/10 {
1619
- background-color: #ffffff1a;
2362
+ .bg-sky-400\/15 {
2363
+ background-color: #00bcfe26;
1620
2364
  }
1621
2365
 
1622
2366
  @supports (color: color-mix(in lab, red, red)) {
1623
- .bg-white\/10 {
1624
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2367
+ .bg-sky-400\/15 {
2368
+ background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
1625
2369
  }
1626
2370
  }
1627
2371
 
1628
- .bg-white\/85 {
1629
- background-color: #ffffffd9;
2372
+ .bg-transparent {
2373
+ background-color: #0000;
1630
2374
  }
1631
2375
 
1632
- @supports (color: color-mix(in lab, red, red)) {
1633
- .bg-white\/85 {
1634
- background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
1635
- }
2376
+ .bg-white {
2377
+ background-color: var(--color-white);
1636
2378
  }
1637
2379
 
1638
- .bg-zinc-50 {
1639
- background-color: var(--color-zinc-50);
2380
+ .bg-white\/5 {
2381
+ background-color: #ffffff0d;
1640
2382
  }
1641
2383
 
1642
- .bg-zinc-100 {
1643
- background-color: var(--color-zinc-100);
2384
+ @supports (color: color-mix(in lab, red, red)) {
2385
+ .bg-white\/5 {
2386
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2387
+ }
1644
2388
  }
1645
2389
 
1646
- .bg-zinc-300 {
1647
- background-color: var(--color-zinc-300);
2390
+ .bg-zinc-50 {
2391
+ background-color: var(--color-zinc-50);
1648
2392
  }
1649
2393
 
1650
- .bg-zinc-400\/20 {
1651
- background-color: #9f9fa933;
2394
+ .bg-zinc-100\/50 {
2395
+ background-color: #f4f4f580;
1652
2396
  }
1653
2397
 
1654
2398
  @supports (color: color-mix(in lab, red, red)) {
1655
- .bg-zinc-400\/20 {
1656
- background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
2399
+ .bg-zinc-100\/50 {
2400
+ background-color: color-mix(in oklab, var(--color-zinc-100) 50%, transparent);
1657
2401
  }
1658
2402
  }
1659
2403
 
1660
- .bg-zinc-400\/25 {
1661
- background-color: #9f9fa940;
2404
+ .bg-zinc-100\/70 {
2405
+ background-color: #f4f4f5b3;
1662
2406
  }
1663
2407
 
1664
2408
  @supports (color: color-mix(in lab, red, red)) {
1665
- .bg-zinc-400\/25 {
1666
- background-color: color-mix(in oklab, var(--color-zinc-400) 25%, transparent);
2409
+ .bg-zinc-100\/70 {
2410
+ background-color: color-mix(in oklab, var(--color-zinc-100) 70%, transparent);
1667
2411
  }
1668
2412
  }
1669
2413
 
1670
- .bg-zinc-500 {
1671
- background-color: var(--color-zinc-500);
2414
+ .bg-zinc-200 {
2415
+ background-color: var(--color-zinc-200);
1672
2416
  }
1673
2417
 
1674
- .bg-zinc-800 {
1675
- background-color: var(--color-zinc-800);
2418
+ .bg-zinc-300 {
2419
+ background-color: var(--color-zinc-300);
1676
2420
  }
1677
2421
 
1678
- .bg-zinc-800\/2\.5 {
1679
- background-color: #27272a06;
2422
+ .bg-zinc-400\/15 {
2423
+ background-color: #9f9fa926;
1680
2424
  }
1681
2425
 
1682
2426
  @supports (color: color-mix(in lab, red, red)) {
1683
- .bg-zinc-800\/2\.5 {
1684
- background-color: color-mix(in oklab, var(--color-zinc-800) 2.5%, transparent);
2427
+ .bg-zinc-400\/15 {
2428
+ background-color: color-mix(in oklab, var(--color-zinc-400) 15%, transparent);
1685
2429
  }
1686
2430
  }
1687
2431
 
1688
- .bg-zinc-900 {
1689
- background-color: var(--color-zinc-900);
2432
+ .bg-zinc-500 {
2433
+ background-color: var(--color-zinc-500);
1690
2434
  }
1691
2435
 
1692
- .bg-zinc-900\/7\.5 {
1693
- background-color: #18181b13;
2436
+ .bg-zinc-800 {
2437
+ background-color: var(--color-zinc-800);
1694
2438
  }
1695
2439
 
1696
- @supports (color: color-mix(in lab, red, red)) {
1697
- .bg-zinc-900\/7\.5 {
1698
- background-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
1699
- }
2440
+ .bg-zinc-900 {
2441
+ background-color: var(--color-zinc-900);
1700
2442
  }
1701
2443
 
1702
2444
  .bg-zinc-900\/10 {
@@ -1709,33 +2451,35 @@
1709
2451
  }
1710
2452
  }
1711
2453
 
1712
- .bg-linear-to-r {
1713
- --tw-gradient-position: to right;
2454
+ .bg-zinc-950\/\[0\.025\] {
2455
+ background-color: #09090b06;
1714
2456
  }
1715
2457
 
1716
- @supports (background-image: linear-gradient(in lab, red, red)) {
1717
- .bg-linear-to-r {
1718
- --tw-gradient-position: to right in oklab;
2458
+ @supports (color: color-mix(in lab, red, red)) {
2459
+ .bg-zinc-950\/\[0\.025\] {
2460
+ background-color: color-mix(in oklab, var(--color-zinc-950) 2.5%, transparent);
1719
2461
  }
1720
2462
  }
1721
2463
 
1722
- .bg-linear-to-r {
1723
- background-image: linear-gradient(var(--tw-gradient-stops));
2464
+ .bg-\[linear-gradient\(to_right\,var\(--clarify-theme-tokens-colors-primary\)\,var\(--clarify-theme-tokens-colors-accent\)\)\] {
2465
+ background-image: linear-gradient(to right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent));
1724
2466
  }
1725
2467
 
1726
- .from-\[\#36b49f\] {
1727
- --tw-gradient-from: #36b49f;
1728
- --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));
2468
+ .mask-\[radial-gradient\(farthest-side_at_top\,white\,transparent\)\] {
2469
+ -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
2470
+ mask-image: radial-gradient(farthest-side at top, #fff, #0000);
1729
2471
  }
1730
2472
 
1731
- .to-\[\#DBFF75\] {
1732
- --tw-gradient-to: #dbff75;
1733
- --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));
2473
+ .fill-\(--clarify-theme-tokens-colors-foreground\) {
2474
+ fill: var(--clarify-theme-tokens-colors-foreground);
1734
2475
  }
1735
2476
 
1736
- .mask-\[radial-gradient\(farthest-side_at_top\,white\,transparent\)\] {
1737
- -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
1738
- mask-image: radial-gradient(farthest-side at top, #fff, #0000);
2477
+ .fill-\(--clarify-theme-tokens-colors-primary\) {
2478
+ fill: var(--clarify-theme-tokens-colors-primary);
2479
+ }
2480
+
2481
+ .fill-\(--clarify-ui-accent-text\) {
2482
+ fill: var(--clarify-ui-accent-text);
1739
2483
  }
1740
2484
 
1741
2485
  .fill-black\/40 {
@@ -1748,14 +2492,6 @@
1748
2492
  }
1749
2493
  }
1750
2494
 
1751
- .fill-emerald-400 {
1752
- fill: var(--color-emerald-400);
1753
- }
1754
-
1755
- .fill-emerald-500 {
1756
- fill: var(--color-emerald-500);
1757
- }
1758
-
1759
2495
  .fill-white {
1760
2496
  fill: var(--color-white);
1761
2497
  }
@@ -1770,8 +2506,16 @@
1770
2506
  }
1771
2507
  }
1772
2508
 
1773
- .fill-zinc-900 {
1774
- fill: var(--color-zinc-900);
2509
+ .stroke-\(--clarify-theme-tokens-colors-foreground\) {
2510
+ stroke: var(--clarify-theme-tokens-colors-foreground);
2511
+ }
2512
+
2513
+ .stroke-\(--clarify-theme-tokens-colors-muted\) {
2514
+ stroke: var(--clarify-theme-tokens-colors-muted);
2515
+ }
2516
+
2517
+ .stroke-\(--clarify-theme-tokens-colors-surface\) {
2518
+ stroke: var(--clarify-theme-tokens-colors-surface);
1775
2519
  }
1776
2520
 
1777
2521
  .stroke-black\/50 {
@@ -1796,10 +2540,6 @@
1796
2540
  stroke: var(--color-zinc-500);
1797
2541
  }
1798
2542
 
1799
- .stroke-zinc-900 {
1800
- stroke: var(--color-zinc-900);
1801
- }
1802
-
1803
2543
  .p-0 {
1804
2544
  padding: 0;
1805
2545
  }
@@ -1808,6 +2548,14 @@
1808
2548
  padding: var(--spacing);
1809
2549
  }
1810
2550
 
2551
+ .p-1\.5 {
2552
+ padding: calc(var(--spacing) * 1.5);
2553
+ }
2554
+
2555
+ .p-3 {
2556
+ padding: calc(var(--spacing) * 3);
2557
+ }
2558
+
1811
2559
  .p-4 {
1812
2560
  padding: calc(var(--spacing) * 4);
1813
2561
  }
@@ -1824,6 +2572,10 @@
1824
2572
  padding-inline: 0;
1825
2573
  }
1826
2574
 
2575
+ .px-1 {
2576
+ padding-inline: var(--spacing);
2577
+ }
2578
+
1827
2579
  .px-1\.5 {
1828
2580
  padding-inline: calc(var(--spacing) * 1.5);
1829
2581
  }
@@ -1844,10 +2596,18 @@
1844
2596
  padding-inline: calc(var(--spacing) * 4);
1845
2597
  }
1846
2598
 
2599
+ .px-5 {
2600
+ padding-inline: calc(var(--spacing) * 5);
2601
+ }
2602
+
1847
2603
  .px-6 {
1848
2604
  padding-inline: calc(var(--spacing) * 6);
1849
2605
  }
1850
2606
 
2607
+ .py-0 {
2608
+ padding-block: 0;
2609
+ }
2610
+
1851
2611
  .py-0\.5 {
1852
2612
  padding-block: calc(var(--spacing) * .5);
1853
2613
  }
@@ -1864,6 +2624,10 @@
1864
2624
  padding-block: calc(var(--spacing) * 2);
1865
2625
  }
1866
2626
 
2627
+ .py-2\.5 {
2628
+ padding-block: calc(var(--spacing) * 2.5);
2629
+ }
2630
+
1867
2631
  .py-3 {
1868
2632
  padding-block: calc(var(--spacing) * 3);
1869
2633
  }
@@ -1872,10 +2636,18 @@
1872
2636
  padding-block: calc(var(--spacing) * 4);
1873
2637
  }
1874
2638
 
2639
+ .py-8 {
2640
+ padding-block: calc(var(--spacing) * 8);
2641
+ }
2642
+
1875
2643
  .py-10 {
1876
2644
  padding-block: calc(var(--spacing) * 10);
1877
2645
  }
1878
2646
 
2647
+ .py-16 {
2648
+ padding-block: calc(var(--spacing) * 16);
2649
+ }
2650
+
1879
2651
  .pt-3 {
1880
2652
  padding-top: calc(var(--spacing) * 3);
1881
2653
  }
@@ -1884,10 +2656,6 @@
1884
2656
  padding-top: calc(var(--spacing) * 6);
1885
2657
  }
1886
2658
 
1887
- .pt-8 {
1888
- padding-top: calc(var(--spacing) * 8);
1889
- }
1890
-
1891
2659
  .pt-14 {
1892
2660
  padding-top: calc(var(--spacing) * 14);
1893
2661
  }
@@ -1920,6 +2688,10 @@
1920
2688
  padding-left: calc(var(--spacing) * 2);
1921
2689
  }
1922
2690
 
2691
+ .pl-2\.5 {
2692
+ padding-left: calc(var(--spacing) * 2.5);
2693
+ }
2694
+
1923
2695
  .pl-4 {
1924
2696
  padding-left: calc(var(--spacing) * 4);
1925
2697
  }
@@ -1962,21 +2734,16 @@
1962
2734
  line-height: var(--tw-leading, var(--text-3xl--line-height));
1963
2735
  }
1964
2736
 
1965
- .text-\[0\.625rem\]\/4 {
1966
- font-size: .625rem;
1967
- line-height: calc(var(--spacing) * 4);
1968
- }
1969
-
1970
- .text-\[0\.625rem\]\/5 {
1971
- font-size: .625rem;
1972
- line-height: calc(var(--spacing) * 5);
1973
- }
1974
-
1975
2737
  .text-\[0\.625rem\]\/6 {
1976
2738
  font-size: .625rem;
1977
2739
  line-height: calc(var(--spacing) * 6);
1978
2740
  }
1979
2741
 
2742
+ .text-base {
2743
+ font-size: var(--text-base);
2744
+ line-height: var(--tw-leading, var(--text-base--line-height));
2745
+ }
2746
+
1980
2747
  .text-sm {
1981
2748
  font-size: var(--text-sm);
1982
2749
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2002,6 +2769,29 @@
2002
2769
  line-height: calc(var(--spacing) * 6);
2003
2770
  }
2004
2771
 
2772
+ .text-\[0\.6875rem\] {
2773
+ font-size: .6875rem;
2774
+ }
2775
+
2776
+ .text-\[0\.8125rem\] {
2777
+ font-size: .8125rem;
2778
+ }
2779
+
2780
+ .leading-5 {
2781
+ --tw-leading: calc(var(--spacing) * 5);
2782
+ line-height: calc(var(--spacing) * 5);
2783
+ }
2784
+
2785
+ .leading-6 {
2786
+ --tw-leading: calc(var(--spacing) * 6);
2787
+ line-height: calc(var(--spacing) * 6);
2788
+ }
2789
+
2790
+ .font-black {
2791
+ --tw-font-weight: var(--font-weight-black);
2792
+ font-weight: var(--font-weight-black);
2793
+ }
2794
+
2005
2795
  .font-bold {
2006
2796
  --tw-font-weight: var(--font-weight-bold);
2007
2797
  font-weight: var(--font-weight-bold);
@@ -2017,9 +2807,9 @@
2017
2807
  font-weight: var(--font-weight-semibold);
2018
2808
  }
2019
2809
 
2020
- .tracking-normal {
2021
- --tw-tracking: var(--tracking-normal);
2022
- letter-spacing: var(--tracking-normal);
2810
+ .tracking-\[-0\.01em\] {
2811
+ --tw-tracking: -.01em;
2812
+ letter-spacing: -.01em;
2023
2813
  }
2024
2814
 
2025
2815
  .tracking-tight {
@@ -2037,22 +2827,70 @@
2037
2827
  letter-spacing: var(--tracking-widest);
2038
2828
  }
2039
2829
 
2040
- .wrap-break-word {
2041
- overflow-wrap: break-word;
2830
+ .wrap-anywhere {
2831
+ overflow-wrap: anywhere;
2832
+ }
2833
+
2834
+ .whitespace-normal {
2835
+ white-space: normal;
2042
2836
  }
2043
2837
 
2044
2838
  .whitespace-nowrap {
2045
2839
  white-space: nowrap;
2046
2840
  }
2047
2841
 
2842
+ .text-\(--clarify-theme-tokens-colors-foreground\) {
2843
+ color: var(--clarify-theme-tokens-colors-foreground);
2844
+ }
2845
+
2846
+ .text-\(--clarify-theme-tokens-colors-muted\) {
2847
+ color: var(--clarify-theme-tokens-colors-muted);
2848
+ }
2849
+
2850
+ .text-\(--clarify-theme-tokens-colors-primary\) {
2851
+ color: var(--clarify-theme-tokens-colors-primary);
2852
+ }
2853
+
2854
+ .text-\(--clarify-ui-accent-text\) {
2855
+ color: var(--clarify-ui-accent-text);
2856
+ }
2857
+
2858
+ .text-\[var\(--clarify-theme-tokens-colors-foreground\)\] {
2859
+ color: var(--clarify-theme-tokens-colors-foreground);
2860
+ }
2861
+
2862
+ .text-\[var\(--clarify-theme-tokens-colors-muted\)\] {
2863
+ color: var(--clarify-theme-tokens-colors-muted);
2864
+ }
2865
+
2866
+ .text-\[var\(--clarify-theme-tokens-colors-primary\)\] {
2867
+ color: var(--clarify-theme-tokens-colors-primary);
2868
+ }
2869
+
2048
2870
  .text-amber-500 {
2049
2871
  color: var(--color-amber-500);
2050
2872
  }
2051
2873
 
2874
+ .text-amber-600 {
2875
+ color: var(--color-amber-600);
2876
+ }
2877
+
2052
2878
  .text-amber-700 {
2053
2879
  color: var(--color-amber-700);
2054
2880
  }
2055
2881
 
2882
+ .text-amber-900 {
2883
+ color: var(--color-amber-900);
2884
+ }
2885
+
2886
+ .text-amber-950 {
2887
+ color: var(--color-amber-950);
2888
+ }
2889
+
2890
+ .text-emerald-300 {
2891
+ color: var(--color-emerald-300);
2892
+ }
2893
+
2056
2894
  .text-emerald-400 {
2057
2895
  color: var(--color-emerald-400);
2058
2896
  }
@@ -2061,10 +2899,22 @@
2061
2899
  color: var(--color-emerald-500);
2062
2900
  }
2063
2901
 
2902
+ .text-emerald-600 {
2903
+ color: var(--color-emerald-600);
2904
+ }
2905
+
2906
+ .text-emerald-800 {
2907
+ color: var(--color-emerald-800);
2908
+ }
2909
+
2064
2910
  .text-emerald-900 {
2065
2911
  color: var(--color-emerald-900);
2066
2912
  }
2067
2913
 
2914
+ .text-emerald-950 {
2915
+ color: var(--color-emerald-950);
2916
+ }
2917
+
2068
2918
  .text-fuchsia-500 {
2069
2919
  color: var(--color-fuchsia-500);
2070
2920
  }
@@ -2081,10 +2931,34 @@
2081
2931
  color: var(--color-red-700);
2082
2932
  }
2083
2933
 
2934
+ .text-rose-600 {
2935
+ color: var(--color-rose-600);
2936
+ }
2937
+
2938
+ .text-rose-900 {
2939
+ color: var(--color-rose-900);
2940
+ }
2941
+
2942
+ .text-rose-950 {
2943
+ color: var(--color-rose-950);
2944
+ }
2945
+
2084
2946
  .text-sky-500 {
2085
2947
  color: var(--color-sky-500);
2086
2948
  }
2087
2949
 
2950
+ .text-sky-600 {
2951
+ color: var(--color-sky-600);
2952
+ }
2953
+
2954
+ .text-sky-900 {
2955
+ color: var(--color-sky-900);
2956
+ }
2957
+
2958
+ .text-sky-950 {
2959
+ color: var(--color-sky-950);
2960
+ }
2961
+
2088
2962
  .text-violet-500 {
2089
2963
  color: var(--color-violet-500);
2090
2964
  }
@@ -2125,6 +2999,10 @@
2125
2999
  color: var(--color-zinc-900);
2126
3000
  }
2127
3001
 
3002
+ .text-zinc-950 {
3003
+ color: var(--color-zinc-950);
3004
+ }
3005
+
2128
3006
  .capitalize {
2129
3007
  text-transform: capitalize;
2130
3008
  }
@@ -2149,14 +3027,23 @@
2149
3027
  opacity: 0;
2150
3028
  }
2151
3029
 
2152
- .opacity-40 {
2153
- opacity: .4;
3030
+ .opacity-35 {
3031
+ opacity: .35;
3032
+ }
3033
+
3034
+ .opacity-100 {
3035
+ opacity: 1;
2154
3036
  }
2155
3037
 
2156
3038
  .mix-blend-overlay {
2157
3039
  mix-blend-mode: overlay;
2158
3040
  }
2159
3041
 
3042
+ .shadow-\(--clarify-ui-accent-glow\) {
3043
+ --tw-shadow: var(--clarify-ui-accent-glow);
3044
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3045
+ }
3046
+
2160
3047
  .shadow-lg {
2161
3048
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
2162
3049
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2167,6 +3054,11 @@
2167
3054
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2168
3055
  }
2169
3056
 
3057
+ .shadow-none {
3058
+ --tw-shadow: 0 0 #0000;
3059
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3060
+ }
3061
+
2170
3062
  .shadow-sm {
2171
3063
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
2172
3064
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2177,11 +3069,26 @@
2177
3069
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2178
3070
  }
2179
3071
 
3072
+ .shadow-xs {
3073
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
3074
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3075
+ }
3076
+
2180
3077
  .ring-1 {
2181
3078
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2182
3079
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2183
3080
  }
2184
3081
 
3082
+ .shadow-black\/10 {
3083
+ --tw-shadow-color: #0000001a;
3084
+ }
3085
+
3086
+ @supports (color: color-mix(in lab, red, red)) {
3087
+ .shadow-black\/10 {
3088
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
3089
+ }
3090
+ }
3091
+
2185
3092
  .shadow-black\/20 {
2186
3093
  --tw-shadow-color: #0003;
2187
3094
  }
@@ -2212,32 +3119,30 @@
2212
3119
  }
2213
3120
  }
2214
3121
 
2215
- .ring-amber-300 {
2216
- --tw-ring-color: var(--color-amber-300);
3122
+ .ring-\(--clarify-theme-tokens-colors-border\) {
3123
+ --tw-ring-color: var(--clarify-theme-tokens-colors-border);
2217
3124
  }
2218
3125
 
2219
- .ring-emerald-300 {
2220
- --tw-ring-color: var(--color-emerald-300);
3126
+ .ring-\(--clarify-ui-accent-border\) {
3127
+ --tw-ring-color: var(--clarify-ui-accent-border);
2221
3128
  }
2222
3129
 
2223
- .ring-emerald-400\/20 {
2224
- --tw-ring-color: #00d29433;
3130
+ .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
3131
+ --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
2225
3132
  }
2226
3133
 
2227
3134
  @supports (color: color-mix(in lab, red, red)) {
2228
- .ring-emerald-400\/20 {
2229
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3135
+ .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
3136
+ --tw-ring-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 24%,transparent);
2230
3137
  }
2231
3138
  }
2232
3139
 
2233
- .ring-emerald-500\/20 {
2234
- --tw-ring-color: #00bb7f33;
3140
+ .ring-amber-300 {
3141
+ --tw-ring-color: var(--color-amber-300);
2235
3142
  }
2236
3143
 
2237
- @supports (color: color-mix(in lab, red, red)) {
2238
- .ring-emerald-500\/20 {
2239
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
2240
- }
3144
+ .ring-emerald-300 {
3145
+ --tw-ring-color: var(--color-emerald-300);
2241
3146
  }
2242
3147
 
2243
3148
  .ring-rose-200 {
@@ -2248,31 +3153,27 @@
2248
3153
  --tw-ring-color: var(--color-sky-300);
2249
3154
  }
2250
3155
 
2251
- .ring-zinc-200 {
2252
- --tw-ring-color: var(--color-zinc-200);
2253
- }
2254
-
2255
- .ring-zinc-300 {
2256
- --tw-ring-color: var(--color-zinc-300);
2257
- }
2258
-
2259
- .ring-zinc-900\/7\.5 {
2260
- --tw-ring-color: #18181b13;
3156
+ .ring-white\/10 {
3157
+ --tw-ring-color: #ffffff1a;
2261
3158
  }
2262
3159
 
2263
3160
  @supports (color: color-mix(in lab, red, red)) {
2264
- .ring-zinc-900\/7\.5 {
2265
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
3161
+ .ring-white\/10 {
3162
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2266
3163
  }
2267
3164
  }
2268
3165
 
2269
- .ring-zinc-900\/10 {
2270
- --tw-ring-color: #18181b1a;
3166
+ .ring-zinc-300 {
3167
+ --tw-ring-color: var(--color-zinc-300);
3168
+ }
3169
+
3170
+ .ring-zinc-950\/10 {
3171
+ --tw-ring-color: #09090b1a;
2271
3172
  }
2272
3173
 
2273
3174
  @supports (color: color-mix(in lab, red, red)) {
2274
- .ring-zinc-900\/10 {
2275
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
3175
+ .ring-zinc-950\/10 {
3176
+ --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
2276
3177
  }
2277
3178
  }
2278
3179
 
@@ -2333,6 +3234,12 @@
2333
3234
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2334
3235
  }
2335
3236
 
3237
+ .transition-transform {
3238
+ transition-property: transform, translate, scale, rotate;
3239
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3240
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3241
+ }
3242
+
2336
3243
  .delay-150 {
2337
3244
  transition-delay: .15s;
2338
3245
  }
@@ -2377,7 +3284,15 @@
2377
3284
  --tw-ring-inset: inset;
2378
3285
  }
2379
3286
 
3287
+ :is(.\*\:m-0 > *) {
3288
+ margin: 0;
3289
+ }
3290
+
2380
3291
  @media (hover: hover) {
3292
+ .group-hover\:text-\(--clarify-theme-tokens-colors-primary\):is(:where(.group):hover *) {
3293
+ color: var(--clarify-theme-tokens-colors-primary);
3294
+ }
3295
+
2381
3296
  .group-hover\:opacity-100:is(:where(.group):hover *) {
2382
3297
  opacity: 1;
2383
3298
  }
@@ -2391,8 +3306,8 @@
2391
3306
  opacity: 1;
2392
3307
  }
2393
3308
 
2394
- .group-aria-selected\:text-emerald-500:is(:where(.group)[aria-selected="true"] *) {
2395
- color: var(--color-emerald-500);
3309
+ .group-aria-expanded\:rotate-180:is(:where(.group)[aria-expanded="true"] *) {
3310
+ rotate: 180deg;
2396
3311
  }
2397
3312
 
2398
3313
  .group-data-selected\:opacity-100:is(:where(.group)[data-selected] *) {
@@ -2424,56 +3339,72 @@
2424
3339
  }
2425
3340
 
2426
3341
  @media (hover: hover) {
2427
- .hover\:border-white\/20:hover {
2428
- border-color: #fff3;
3342
+ .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
3343
+ border-color: var(--clarify-theme-tokens-colors-primary);
2429
3344
  }
2430
3345
 
2431
- @supports (color: color-mix(in lab, red, red)) {
2432
- .hover\:border-white\/20:hover {
2433
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2434
- }
3346
+ .hover\:border-\(--clarify-ui-accent-border\):hover {
3347
+ border-color: var(--clarify-ui-accent-border);
2435
3348
  }
2436
3349
 
2437
- .hover\:bg-white\/5:hover {
2438
- background-color: #ffffff0d;
3350
+ .hover\:border-zinc-300:hover {
3351
+ border-color: var(--color-zinc-300);
3352
+ }
3353
+
3354
+ .hover\:bg-\(--clarify-theme-tokens-colors-background\):hover {
3355
+ background-color: var(--clarify-theme-tokens-colors-background);
3356
+ }
3357
+
3358
+ .hover\:bg-\(--clarify-theme-tokens-colors-surface\):hover {
3359
+ background-color: var(--clarify-theme-tokens-colors-surface);
3360
+ }
3361
+
3362
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
3363
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2439
3364
  }
2440
3365
 
2441
3366
  @supports (color: color-mix(in lab, red, red)) {
2442
- .hover\:bg-white\/5:hover {
2443
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3367
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
3368
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 2.5%,transparent);
2444
3369
  }
2445
3370
  }
2446
3371
 
2447
- .hover\:bg-white\/7\.5:hover {
2448
- background-color: #ffffff13;
3372
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
3373
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2449
3374
  }
2450
3375
 
2451
3376
  @supports (color: color-mix(in lab, red, red)) {
2452
- .hover\:bg-white\/7\.5:hover {
2453
- background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
3377
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
3378
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
2454
3379
  }
2455
3380
  }
2456
3381
 
2457
- .hover\:bg-white\/10:hover {
2458
- background-color: #ffffff1a;
3382
+ .hover\:bg-black\/50:hover {
3383
+ background-color: #00000080;
2459
3384
  }
2460
3385
 
2461
3386
  @supports (color: color-mix(in lab, red, red)) {
2462
- .hover\:bg-white\/10:hover {
2463
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3387
+ .hover\:bg-black\/50:hover {
3388
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
2464
3389
  }
2465
3390
  }
2466
3391
 
2467
- .hover\:bg-zinc-100:hover {
2468
- background-color: var(--color-zinc-100);
3392
+ .hover\:bg-white\/7\.5:hover {
3393
+ background-color: #ffffff13;
3394
+ }
3395
+
3396
+ @supports (color: color-mix(in lab, red, red)) {
3397
+ .hover\:bg-white\/7\.5:hover {
3398
+ background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
3399
+ }
2469
3400
  }
2470
3401
 
2471
- .hover\:bg-zinc-200:hover {
2472
- background-color: var(--color-zinc-200);
3402
+ .hover\:bg-zinc-50:hover {
3403
+ background-color: var(--color-zinc-50);
2473
3404
  }
2474
3405
 
2475
- .hover\:bg-zinc-700:hover {
2476
- background-color: var(--color-zinc-700);
3406
+ .hover\:bg-zinc-100:hover {
3407
+ background-color: var(--color-zinc-100);
2477
3408
  }
2478
3409
 
2479
3410
  .hover\:bg-zinc-900\/2\.5:hover {
@@ -2486,18 +3417,12 @@
2486
3417
  }
2487
3418
  }
2488
3419
 
2489
- .hover\:bg-zinc-900\/5:hover {
2490
- background-color: #18181b0d;
2491
- }
2492
-
2493
- @supports (color: color-mix(in lab, red, red)) {
2494
- .hover\:bg-zinc-900\/5:hover {
2495
- background-color: color-mix(in oklab, var(--color-zinc-900) 5%, transparent);
2496
- }
3420
+ .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
3421
+ color: var(--clarify-theme-tokens-colors-foreground);
2497
3422
  }
2498
3423
 
2499
- .hover\:text-emerald-600:hover {
2500
- color: var(--color-emerald-600);
3424
+ .hover\:text-emerald-700:hover {
3425
+ color: var(--color-emerald-700);
2501
3426
  }
2502
3427
 
2503
3428
  .hover\:text-inherit:hover {
@@ -2520,18 +3445,17 @@
2520
3445
  color: var(--color-zinc-950);
2521
3446
  }
2522
3447
 
2523
- .hover\:ring-zinc-500:hover {
2524
- --tw-ring-color: var(--color-zinc-500);
3448
+ .hover\:opacity-80:hover {
3449
+ opacity: .8;
2525
3450
  }
2526
3451
 
2527
- .hover\:ring-zinc-900\/20:hover {
2528
- --tw-ring-color: #18181b33;
3452
+ .hover\:shadow-md:hover {
3453
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
3454
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2529
3455
  }
2530
3456
 
2531
- @supports (color: color-mix(in lab, red, red)) {
2532
- .hover\:ring-zinc-900\/20:hover {
2533
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 20%, transparent);
2534
- }
3457
+ .hover\:ring-zinc-500:hover {
3458
+ --tw-ring-color: var(--color-zinc-500);
2535
3459
  }
2536
3460
  }
2537
3461
 
@@ -2543,8 +3467,26 @@
2543
3467
  flex: none;
2544
3468
  }
2545
3469
 
2546
- .focus\:border-emerald-400:focus {
2547
- border-color: var(--color-emerald-400);
3470
+ .focus\:border-zinc-400:focus {
3471
+ border-color: var(--color-zinc-400);
3472
+ }
3473
+
3474
+ .focus\:bg-black\/50:focus {
3475
+ background-color: #00000080;
3476
+ }
3477
+
3478
+ @supports (color: color-mix(in lab, red, red)) {
3479
+ .focus\:bg-black\/50:focus {
3480
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
3481
+ }
3482
+ }
3483
+
3484
+ .focus\:bg-white:focus {
3485
+ background-color: var(--color-white);
3486
+ }
3487
+
3488
+ .focus\:text-zinc-200:focus {
3489
+ color: var(--color-zinc-200);
2548
3490
  }
2549
3491
 
2550
3492
  .focus\:opacity-100:focus {
@@ -2556,13 +3498,13 @@
2556
3498
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2557
3499
  }
2558
3500
 
2559
- .focus\:ring-emerald-400\/20:focus {
2560
- --tw-ring-color: #00d29433;
3501
+ .focus\:ring-emerald-400\/25:focus {
3502
+ --tw-ring-color: #00d29440;
2561
3503
  }
2562
3504
 
2563
3505
  @supports (color: color-mix(in lab, red, red)) {
2564
- .focus\:ring-emerald-400\/20:focus {
2565
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3506
+ .focus\:ring-emerald-400\/25:focus {
3507
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
2566
3508
  }
2567
3509
  }
2568
3510
 
@@ -2571,10 +3513,6 @@
2571
3513
  outline-style: none;
2572
3514
  }
2573
3515
 
2574
- .aria-selected\:bg-zinc-50[aria-selected="true"] {
2575
- background-color: var(--color-zinc-50);
2576
- }
2577
-
2578
3516
  .data-closed\:-translate-x-full[data-closed] {
2579
3517
  --tw-translate-x: -100%;
2580
3518
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2624,10 +3562,6 @@
2624
3562
  color: var(--color-white);
2625
3563
  }
2626
3564
 
2627
- .data-focus\:text-zinc-950[data-focus] {
2628
- color: var(--color-zinc-950);
2629
- }
2630
-
2631
3565
  .data-leave\:pointer-events-none[data-leave] {
2632
3566
  pointer-events: none;
2633
3567
  }
@@ -2647,8 +3581,22 @@
2647
3581
  transition-timing-function: var(--ease-in);
2648
3582
  }
2649
3583
 
2650
- .data-open\:border-emerald-400[data-open] {
2651
- border-color: var(--color-emerald-400);
3584
+ .data-open\:border-zinc-300[data-open] {
3585
+ border-color: var(--color-zinc-300);
3586
+ }
3587
+
3588
+ .data-open\:bg-white\/10[data-open] {
3589
+ background-color: #ffffff1a;
3590
+ }
3591
+
3592
+ @supports (color: color-mix(in lab, red, red)) {
3593
+ .data-open\:bg-white\/10[data-open] {
3594
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3595
+ }
3596
+ }
3597
+
3598
+ .data-open\:bg-zinc-50[data-open] {
3599
+ background-color: var(--color-zinc-50);
2652
3600
  }
2653
3601
 
2654
3602
  .data-open\:ring-2[data-open] {
@@ -2656,13 +3604,13 @@
2656
3604
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2657
3605
  }
2658
3606
 
2659
- .data-open\:ring-emerald-400\/20[data-open] {
2660
- --tw-ring-color: #00d29433;
3607
+ .data-open\:ring-emerald-400\/25[data-open] {
3608
+ --tw-ring-color: #00d29440;
2661
3609
  }
2662
3610
 
2663
3611
  @supports (color: color-mix(in lab, red, red)) {
2664
- .data-open\:ring-emerald-400\/20[data-open] {
2665
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3612
+ .data-open\:ring-emerald-400\/25[data-open] {
3613
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
2666
3614
  }
2667
3615
  }
2668
3616
 
@@ -2670,6 +3618,10 @@
2670
3618
  color: var(--color-emerald-300);
2671
3619
  }
2672
3620
 
3621
+ .data-selected\:text-emerald-700[data-selected] {
3622
+ color: var(--color-emerald-700);
3623
+ }
3624
+
2673
3625
  .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
2674
3626
  --tw-outline-style: none;
2675
3627
  outline-style: none;
@@ -2689,14 +3641,42 @@
2689
3641
  }
2690
3642
 
2691
3643
  @media (min-width: 40rem) {
3644
+ .sm\:flex {
3645
+ display: flex;
3646
+ }
3647
+
3648
+ .sm\:hidden {
3649
+ display: none;
3650
+ }
3651
+
2692
3652
  .sm\:inline {
2693
3653
  display: inline;
2694
3654
  }
2695
3655
 
3656
+ .sm\:w-auto {
3657
+ width: auto;
3658
+ }
3659
+
3660
+ .sm\:max-w-\[min\(36\%\,16rem\)\] {
3661
+ max-width: min(36%, 16rem);
3662
+ }
3663
+
2696
3664
  .sm\:max-w-xl {
2697
3665
  max-width: var(--container-xl);
2698
3666
  }
2699
3667
 
3668
+ .sm\:min-w-16 {
3669
+ min-width: calc(var(--spacing) * 16);
3670
+ }
3671
+
3672
+ .sm\:grid-cols-2 {
3673
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3674
+ }
3675
+
3676
+ .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] {
3677
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
3678
+ }
3679
+
2700
3680
  .sm\:flex-row {
2701
3681
  flex-direction: row;
2702
3682
  }
@@ -2713,6 +3693,10 @@
2713
3693
  justify-content: flex-start;
2714
3694
  }
2715
3695
 
3696
+ .sm\:px-1\.5 {
3697
+ padding-inline: calc(var(--spacing) * 1.5);
3698
+ }
3699
+
2716
3700
  .sm\:px-6 {
2717
3701
  padding-inline: calc(var(--spacing) * 6);
2718
3702
  }
@@ -2728,18 +3712,9 @@
2728
3712
  .sm\:text-left {
2729
3713
  text-align: left;
2730
3714
  }
2731
-
2732
- .sm\:text-sm {
2733
- font-size: var(--text-sm);
2734
- line-height: var(--tw-leading, var(--text-sm--line-height));
2735
- }
2736
3715
  }
2737
3716
 
2738
3717
  @media (min-width: 48rem) {
2739
- .md\:mt-0 {
2740
- margin-top: 0;
2741
- }
2742
-
2743
3718
  .md\:block {
2744
3719
  display: block;
2745
3720
  }
@@ -2760,14 +3735,8 @@
2760
3735
  justify-content: flex-start;
2761
3736
  }
2762
3737
 
2763
- .md\:bg-zinc-900\/10 {
2764
- background-color: #18181b1a;
2765
- }
2766
-
2767
- @supports (color: color-mix(in lab, red, red)) {
2768
- .md\:bg-zinc-900\/10 {
2769
- background-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
2770
- }
3738
+ .md\:bg-\(--clarify-theme-tokens-colors-border\) {
3739
+ background-color: var(--clarify-theme-tokens-colors-border);
2771
3740
  }
2772
3741
 
2773
3742
  .md\:px-10 {
@@ -2785,44 +3754,32 @@
2785
3754
  }
2786
3755
 
2787
3756
  @media (min-width: 64rem) {
2788
- .lg\:pointer-events-auto {
2789
- pointer-events: auto;
2790
- }
2791
-
2792
- .lg\:pointer-events-none {
2793
- pointer-events: none;
3757
+ .lg\:sticky {
3758
+ position: sticky;
2794
3759
  }
2795
3760
 
2796
- .lg\:fixed {
2797
- position: fixed;
3761
+ .lg\:top-14 {
3762
+ top: calc(var(--spacing) * 14);
2798
3763
  }
2799
3764
 
2800
- .lg\:inset-0 {
2801
- inset: 0;
3765
+ .lg\:top-28 {
3766
+ top: calc(var(--spacing) * 28);
2802
3767
  }
2803
3768
 
2804
- .lg\:left-72 {
2805
- left: calc(var(--spacing) * 72);
3769
+ .lg\:top-30 {
3770
+ top: calc(var(--spacing) * 30);
2806
3771
  }
2807
3772
 
2808
3773
  .lg\:z-30 {
2809
3774
  z-index: 30;
2810
3775
  }
2811
3776
 
2812
- .lg\:z-40 {
2813
- z-index: 40;
2814
- }
2815
-
2816
3777
  .lg\:z-50 {
2817
3778
  z-index: 50;
2818
3779
  }
2819
3780
 
2820
- .lg\:mt-10 {
2821
- margin-top: calc(var(--spacing) * 10);
2822
- }
2823
-
2824
- .lg\:ml-72 {
2825
- margin-left: calc(var(--spacing) * 72);
3781
+ .lg\:mt-24 {
3782
+ margin-top: calc(var(--spacing) * 24);
2826
3783
  }
2827
3784
 
2828
3785
  .lg\:block {
@@ -2837,43 +3794,40 @@
2837
3794
  display: none;
2838
3795
  }
2839
3796
 
2840
- .lg\:w-72 {
2841
- width: calc(var(--spacing) * 72);
3797
+ .lg\:h-\[calc\(100vh-3\.5rem\)\] {
3798
+ height: calc(100vh - 3.5rem);
2842
3799
  }
2843
3800
 
2844
- .lg\:max-w-md {
2845
- max-width: var(--container-md);
3801
+ .lg\:h-\[calc\(100vh-7rem\)\] {
3802
+ height: calc(100vh - 7rem);
2846
3803
  }
2847
3804
 
2848
- .lg\:flex-auto {
2849
- flex: auto;
3805
+ .lg\:grid-cols-3 {
3806
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2850
3807
  }
2851
3808
 
2852
- .lg\:overflow-y-auto {
2853
- overflow-y: auto;
3809
+ .lg\:grid-cols-4 {
3810
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2854
3811
  }
2855
3812
 
2856
- .lg\:border-r {
2857
- border-right-style: var(--tw-border-style);
2858
- border-right-width: 1px;
3813
+ .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
3814
+ grid-template-columns: 18rem minmax(0, 1fr);
2859
3815
  }
2860
3816
 
2861
- .lg\:border-zinc-900\/10 {
2862
- border-color: #18181b1a;
3817
+ .lg\:self-start {
3818
+ align-self: flex-start;
2863
3819
  }
2864
3820
 
2865
- @supports (color: color-mix(in lab, red, red)) {
2866
- .lg\:border-zinc-900\/10 {
2867
- border-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
2868
- }
3821
+ .lg\:overflow-y-auto {
3822
+ overflow-y: auto;
2869
3823
  }
2870
3824
 
2871
- .lg\:bg-white {
2872
- background-color: var(--color-white);
3825
+ .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
3826
+ background-color: var(--clarify-theme-tokens-colors-background);
2873
3827
  }
2874
3828
 
2875
- .lg\:px-6 {
2876
- padding-inline: calc(var(--spacing) * 6);
3829
+ .lg\:px-5 {
3830
+ padding-inline: calc(var(--spacing) * 5);
2877
3831
  }
2878
3832
 
2879
3833
  .lg\:px-8 {
@@ -2884,8 +3838,12 @@
2884
3838
  padding-block: 15vh;
2885
3839
  }
2886
3840
 
2887
- .lg\:pt-4 {
2888
- padding-top: calc(var(--spacing) * 4);
3841
+ .lg\:pt-6 {
3842
+ padding-top: calc(var(--spacing) * 6);
3843
+ }
3844
+
3845
+ .lg\:pt-28 {
3846
+ padding-top: calc(var(--spacing) * 28);
2889
3847
  }
2890
3848
 
2891
3849
  .lg\:pb-8 {
@@ -2902,38 +3860,48 @@
2902
3860
  top: calc(var(--spacing) * 24);
2903
3861
  }
2904
3862
 
2905
- .xl\:left-80 {
2906
- left: calc(var(--spacing) * 80);
3863
+ .xl\:max-w-none {
3864
+ max-width: none;
3865
+ }
3866
+
3867
+ .xl\:grid-cols-2 {
3868
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3869
+ }
3870
+
3871
+ .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
3872
+ grid-template-columns: 20rem minmax(0, 1fr);
2907
3873
  }
2908
3874
 
2909
- .xl\:ml-80 {
2910
- margin-left: calc(var(--spacing) * 80);
3875
+ .xl\:px-6 {
3876
+ padding-inline: calc(var(--spacing) * 6);
2911
3877
  }
2912
3878
 
2913
- .xl\:w-80 {
2914
- width: calc(var(--spacing) * 80);
3879
+ .xl\:px-10 {
3880
+ padding-inline: calc(var(--spacing) * 10);
2915
3881
  }
3882
+ }
2916
3883
 
2917
- .xl\:max-w-\[56rem\] {
2918
- max-width: 56rem;
3884
+ @media (min-width: 96rem) {
3885
+ .\32 xl\:\[--width\:--spacing\(10\)\] {
3886
+ --width: calc(var(--spacing) * 10);
2919
3887
  }
3888
+ }
2920
3889
 
2921
- .xl\:max-w-none {
2922
- max-width: none;
3890
+ @container (min-width: 50rem) {
3891
+ .\@3xl\:block {
3892
+ display: block;
2923
3893
  }
2924
3894
 
2925
- .xl\:grid-cols-2 {
3895
+ .\@3xl\:grid-cols-2 {
2926
3896
  grid-template-columns: repeat(2, minmax(0, 1fr));
2927
3897
  }
2928
- }
2929
3898
 
2930
- @media (min-width: 96rem) {
2931
- .\32 xl\:max-w-\[64rem\] {
2932
- max-width: 64rem;
3899
+ .\@3xl\:justify-end {
3900
+ justify-content: flex-end;
2933
3901
  }
2934
3902
 
2935
- .\32 xl\:\[--width\:--spacing\(10\)\] {
2936
- --width: calc(var(--spacing) * 10);
3903
+ .\@3xl\:text-right {
3904
+ text-align: right;
2937
3905
  }
2938
3906
  }
2939
3907
 
@@ -2955,6 +3923,26 @@
2955
3923
  }
2956
3924
  }
2957
3925
 
3926
+ :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
3927
+ border-color: #ffffff1a;
3928
+ }
3929
+
3930
+ @supports (color: color-mix(in lab, red, red)) {
3931
+ :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
3932
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3933
+ }
3934
+ }
3935
+
3936
+ .dark\:border-amber-400\/30:where(.dark, .dark *) {
3937
+ border-color: #fcbb004d;
3938
+ }
3939
+
3940
+ @supports (color: color-mix(in lab, red, red)) {
3941
+ .dark\:border-amber-400\/30:where(.dark, .dark *) {
3942
+ border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
3943
+ }
3944
+ }
3945
+
2958
3946
  .dark\:border-amber-500\/30:where(.dark, .dark *) {
2959
3947
  border-color: #f99c004d;
2960
3948
  }
@@ -2965,13 +3953,13 @@
2965
3953
  }
2966
3954
  }
2967
3955
 
2968
- .dark\:border-emerald-500\/30:where(.dark, .dark *) {
2969
- border-color: #00bb7f4d;
3956
+ .dark\:border-emerald-400\/30:where(.dark, .dark *) {
3957
+ border-color: #00d2944d;
2970
3958
  }
2971
3959
 
2972
3960
  @supports (color: color-mix(in lab, red, red)) {
2973
- .dark\:border-emerald-500\/30:where(.dark, .dark *) {
2974
- border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
3961
+ .dark\:border-emerald-400\/30:where(.dark, .dark *) {
3962
+ border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
2975
3963
  }
2976
3964
  }
2977
3965
 
@@ -2985,6 +3973,26 @@
2985
3973
  }
2986
3974
  }
2987
3975
 
3976
+ .dark\:border-rose-400\/30:where(.dark, .dark *) {
3977
+ border-color: #ff667f4d;
3978
+ }
3979
+
3980
+ @supports (color: color-mix(in lab, red, red)) {
3981
+ .dark\:border-rose-400\/30:where(.dark, .dark *) {
3982
+ border-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
3983
+ }
3984
+ }
3985
+
3986
+ .dark\:border-sky-400\/30:where(.dark, .dark *) {
3987
+ border-color: #00bcfe4d;
3988
+ }
3989
+
3990
+ @supports (color: color-mix(in lab, red, red)) {
3991
+ .dark\:border-sky-400\/30:where(.dark, .dark *) {
3992
+ border-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
3993
+ }
3994
+ }
3995
+
2988
3996
  .dark\:border-white\/10:where(.dark, .dark *) {
2989
3997
  border-color: #ffffff1a;
2990
3998
  }
@@ -3019,6 +4027,36 @@
3019
4027
  }
3020
4028
  }
3021
4029
 
4030
+ .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
4031
+ background-color: var(--clarify-theme-tokens-colors-primary);
4032
+ }
4033
+
4034
+ @supports (color: color-mix(in lab, red, red)) {
4035
+ .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
4036
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
4037
+ }
4038
+ }
4039
+
4040
+ .dark\:bg-amber-400\/5:where(.dark, .dark *) {
4041
+ background-color: #fcbb000d;
4042
+ }
4043
+
4044
+ @supports (color: color-mix(in lab, red, red)) {
4045
+ .dark\:bg-amber-400\/5:where(.dark, .dark *) {
4046
+ background-color: color-mix(in oklab, var(--color-amber-400) 5%, transparent);
4047
+ }
4048
+ }
4049
+
4050
+ .dark\:bg-amber-400\/20:where(.dark, .dark *) {
4051
+ background-color: #fcbb0033;
4052
+ }
4053
+
4054
+ @supports (color: color-mix(in lab, red, red)) {
4055
+ .dark\:bg-amber-400\/20:where(.dark, .dark *) {
4056
+ background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
4057
+ }
4058
+ }
4059
+
3022
4060
  .dark\:bg-amber-500\/10:where(.dark, .dark *) {
3023
4061
  background-color: #f99c001a;
3024
4062
  }
@@ -3029,37 +4067,33 @@
3029
4067
  }
3030
4068
  }
3031
4069
 
3032
- .dark\:bg-black\/40:where(.dark, .dark *) {
3033
- background-color: #0006;
4070
+ .dark\:bg-emerald-400\/5:where(.dark, .dark *) {
4071
+ background-color: #00d2940d;
3034
4072
  }
3035
4073
 
3036
4074
  @supports (color: color-mix(in lab, red, red)) {
3037
- .dark\:bg-black\/40:where(.dark, .dark *) {
3038
- background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
4075
+ .dark\:bg-emerald-400\/5:where(.dark, .dark *) {
4076
+ background-color: color-mix(in oklab, var(--color-emerald-400) 5%, transparent);
3039
4077
  }
3040
4078
  }
3041
4079
 
3042
- .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
3043
- background-color: #00d2941a;
4080
+ .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
4081
+ background-color: #00d29426;
3044
4082
  }
3045
4083
 
3046
4084
  @supports (color: color-mix(in lab, red, red)) {
3047
- .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
3048
- background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
4085
+ .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
4086
+ background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
3049
4087
  }
3050
4088
  }
3051
4089
 
3052
- .dark\:bg-emerald-500:where(.dark, .dark *) {
3053
- background-color: var(--color-emerald-500);
3054
- }
3055
-
3056
- .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
3057
- background-color: #00bb7f0d;
4090
+ .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
4091
+ background-color: #00d29433;
3058
4092
  }
3059
4093
 
3060
4094
  @supports (color: color-mix(in lab, red, red)) {
3061
- .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
3062
- background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
4095
+ .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
4096
+ background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3063
4097
  }
3064
4098
  }
3065
4099
 
@@ -3073,6 +4107,16 @@
3073
4107
  }
3074
4108
  }
3075
4109
 
4110
+ .dark\:bg-rose-400\/5:where(.dark, .dark *) {
4111
+ background-color: #ff667f0d;
4112
+ }
4113
+
4114
+ @supports (color: color-mix(in lab, red, red)) {
4115
+ .dark\:bg-rose-400\/5:where(.dark, .dark *) {
4116
+ background-color: color-mix(in oklab, var(--color-rose-400) 5%, transparent);
4117
+ }
4118
+ }
4119
+
3076
4120
  .dark\:bg-rose-400\/10:where(.dark, .dark *) {
3077
4121
  background-color: #ff667f1a;
3078
4122
  }
@@ -3083,10 +4127,44 @@
3083
4127
  }
3084
4128
  }
3085
4129
 
4130
+ .dark\:bg-rose-400\/20:where(.dark, .dark *) {
4131
+ background-color: #ff667f33;
4132
+ }
4133
+
4134
+ @supports (color: color-mix(in lab, red, red)) {
4135
+ .dark\:bg-rose-400\/20:where(.dark, .dark *) {
4136
+ background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
4137
+ }
4138
+ }
4139
+
4140
+ .dark\:bg-sky-400\/5:where(.dark, .dark *) {
4141
+ background-color: #00bcfe0d;
4142
+ }
4143
+
4144
+ @supports (color: color-mix(in lab, red, red)) {
4145
+ .dark\:bg-sky-400\/5:where(.dark, .dark *) {
4146
+ background-color: color-mix(in oklab, var(--color-sky-400) 5%, transparent);
4147
+ }
4148
+ }
4149
+
4150
+ .dark\:bg-sky-400\/20:where(.dark, .dark *) {
4151
+ background-color: #00bcfe33;
4152
+ }
4153
+
4154
+ @supports (color: color-mix(in lab, red, red)) {
4155
+ .dark\:bg-sky-400\/20:where(.dark, .dark *) {
4156
+ background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
4157
+ }
4158
+ }
4159
+
3086
4160
  .dark\:bg-transparent:where(.dark, .dark *) {
3087
4161
  background-color: #0000;
3088
4162
  }
3089
4163
 
4164
+ .dark\:bg-white:where(.dark, .dark *) {
4165
+ background-color: var(--color-white);
4166
+ }
4167
+
3090
4168
  .dark\:bg-white\/1:where(.dark, .dark *) {
3091
4169
  background-color: #ffffff03;
3092
4170
  }
@@ -3117,23 +4195,33 @@
3117
4195
  }
3118
4196
  }
3119
4197
 
3120
- .dark\:bg-white\/7\.5:where(.dark, .dark *) {
3121
- background-color: #ffffff13;
4198
+ .dark\:bg-white\/10:where(.dark, .dark *) {
4199
+ background-color: #ffffff1a;
3122
4200
  }
3123
4201
 
3124
4202
  @supports (color: color-mix(in lab, red, red)) {
3125
- .dark\:bg-white\/7\.5:where(.dark, .dark *) {
3126
- background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
4203
+ .dark\:bg-white\/10:where(.dark, .dark *) {
4204
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3127
4205
  }
3128
4206
  }
3129
4207
 
3130
- .dark\:bg-white\/10:where(.dark, .dark *) {
3131
- background-color: #ffffff1a;
4208
+ .dark\:bg-white\/12:where(.dark, .dark *) {
4209
+ background-color: #ffffff1f;
3132
4210
  }
3133
4211
 
3134
4212
  @supports (color: color-mix(in lab, red, red)) {
3135
- .dark\:bg-white\/10:where(.dark, .dark *) {
3136
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4213
+ .dark\:bg-white\/12:where(.dark, .dark *) {
4214
+ background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
4215
+ }
4216
+ }
4217
+
4218
+ .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
4219
+ background-color: #ffffff0a;
4220
+ }
4221
+
4222
+ @supports (color: color-mix(in lab, red, red)) {
4223
+ .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
4224
+ background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
3137
4225
  }
3138
4226
  }
3139
4227
 
@@ -3147,6 +4235,16 @@
3147
4235
  }
3148
4236
  }
3149
4237
 
4238
+ .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
4239
+ background-color: #9f9fa933;
4240
+ }
4241
+
4242
+ @supports (color: color-mix(in lab, red, red)) {
4243
+ .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
4244
+ background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
4245
+ }
4246
+ }
4247
+
3150
4248
  .dark\:bg-zinc-600:where(.dark, .dark *) {
3151
4249
  background-color: var(--color-zinc-600);
3152
4250
  }
@@ -3165,18 +4263,38 @@
3165
4263
  }
3166
4264
  }
3167
4265
 
3168
- .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
3169
- background-color: #27272a80;
4266
+ .dark\:bg-zinc-900:where(.dark, .dark *) {
4267
+ background-color: var(--color-zinc-900);
4268
+ }
4269
+
4270
+ .dark\:bg-zinc-900\/50:where(.dark, .dark *) {
4271
+ background-color: #18181b80;
3170
4272
  }
3171
4273
 
3172
4274
  @supports (color: color-mix(in lab, red, red)) {
3173
- .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
3174
- background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
4275
+ .dark\:bg-zinc-900\/50:where(.dark, .dark *) {
4276
+ background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);
3175
4277
  }
3176
4278
  }
3177
4279
 
3178
- .dark\:bg-zinc-900:where(.dark, .dark *) {
3179
- background-color: var(--color-zinc-900);
4280
+ .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
4281
+ background-color: #18181b99;
4282
+ }
4283
+
4284
+ @supports (color: color-mix(in lab, red, red)) {
4285
+ .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
4286
+ background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
4287
+ }
4288
+ }
4289
+
4290
+ .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
4291
+ background-color: #18181bcc;
4292
+ }
4293
+
4294
+ @supports (color: color-mix(in lab, red, red)) {
4295
+ .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
4296
+ background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
4297
+ }
3180
4298
  }
3181
4299
 
3182
4300
  .dark\:bg-zinc-950:where(.dark, .dark *) {
@@ -3193,29 +4311,13 @@
3193
4311
  }
3194
4312
  }
3195
4313
 
3196
- .dark\:from-\[\#36b49f\]\/30:where(.dark, .dark *) {
3197
- --tw-gradient-from: oklab(69.6777% -.112486 .00150466 / .3);
3198
- --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));
3199
- }
3200
-
3201
- .dark\:to-\[\#DBFF75\]\/30:where(.dark, .dark *) {
3202
- --tw-gradient-to: oklab(94.6982% -.0890822 .143295 / .3);
3203
- --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));
3204
- }
3205
-
3206
4314
  .dark\:mask-\[linear-gradient\(white\,transparent\)\]:where(.dark, .dark *) {
3207
4315
  -webkit-mask-image: linear-gradient(#fff, #0000);
3208
4316
  mask-image: linear-gradient(#fff, #0000);
3209
4317
  }
3210
4318
 
3211
- .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
3212
- fill: #a4f4cf33;
3213
- }
3214
-
3215
- @supports (color: color-mix(in lab, red, red)) {
3216
- .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
3217
- fill: color-mix(in oklab, var(--color-emerald-200) 20%, transparent);
3218
- }
4319
+ .dark\:fill-\(--clarify-ui-accent-background\):where(.dark, .dark *) {
4320
+ fill: var(--clarify-ui-accent-background);
3219
4321
  }
3220
4322
 
3221
4323
  .dark\:fill-white:where(.dark, .dark *) {
@@ -3232,8 +4334,8 @@
3232
4334
  }
3233
4335
  }
3234
4336
 
3235
- .dark\:stroke-emerald-200:where(.dark, .dark *) {
3236
- stroke: var(--color-emerald-200);
4337
+ .dark\:stroke-\(--clarify-ui-accent-text\):where(.dark, .dark *) {
4338
+ stroke: var(--clarify-ui-accent-text);
3237
4339
  }
3238
4340
 
3239
4341
  .dark\:stroke-white:where(.dark, .dark *) {
@@ -3258,16 +4360,32 @@
3258
4360
  stroke: var(--color-zinc-600);
3259
4361
  }
3260
4362
 
4363
+ .dark\:text-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *) {
4364
+ color: var(--clarify-theme-tokens-colors-primary);
4365
+ }
4366
+
4367
+ .dark\:text-amber-100:where(.dark, .dark *) {
4368
+ color: var(--color-amber-100);
4369
+ }
4370
+
3261
4371
  .dark\:text-amber-200:where(.dark, .dark *) {
3262
4372
  color: var(--color-amber-200);
3263
4373
  }
3264
4374
 
4375
+ .dark\:text-amber-300:where(.dark, .dark *) {
4376
+ color: var(--color-amber-300);
4377
+ }
4378
+
3265
4379
  .dark\:text-amber-400:where(.dark, .dark *) {
3266
4380
  color: var(--color-amber-400);
3267
4381
  }
3268
4382
 
3269
- .dark\:text-emerald-200:where(.dark, .dark *) {
3270
- color: var(--color-emerald-200);
4383
+ .dark\:text-emerald-100:where(.dark, .dark *) {
4384
+ color: var(--color-emerald-100);
4385
+ }
4386
+
4387
+ .dark\:text-emerald-300:where(.dark, .dark *) {
4388
+ color: var(--color-emerald-300);
3271
4389
  }
3272
4390
 
3273
4391
  .dark\:text-emerald-400:where(.dark, .dark *) {
@@ -3282,6 +4400,14 @@
3282
4400
  color: var(--color-red-200);
3283
4401
  }
3284
4402
 
4403
+ .dark\:text-rose-100:where(.dark, .dark *) {
4404
+ color: var(--color-rose-100);
4405
+ }
4406
+
4407
+ .dark\:text-rose-300:where(.dark, .dark *) {
4408
+ color: var(--color-rose-300);
4409
+ }
4410
+
3285
4411
  .dark\:text-rose-400:where(.dark, .dark *) {
3286
4412
  color: var(--color-rose-400);
3287
4413
  }
@@ -3290,6 +4416,14 @@
3290
4416
  color: var(--color-rose-500);
3291
4417
  }
3292
4418
 
4419
+ .dark\:text-sky-100:where(.dark, .dark *) {
4420
+ color: var(--color-sky-100);
4421
+ }
4422
+
4423
+ .dark\:text-sky-300:where(.dark, .dark *) {
4424
+ color: var(--color-sky-300);
4425
+ }
4426
+
3293
4427
  .dark\:text-sky-400:where(.dark, .dark *) {
3294
4428
  color: var(--color-sky-400);
3295
4429
  }
@@ -3302,6 +4436,10 @@
3302
4436
  color: var(--color-white);
3303
4437
  }
3304
4438
 
4439
+ .dark\:text-zinc-100:where(.dark, .dark *) {
4440
+ color: var(--color-zinc-100);
4441
+ }
4442
+
3305
4443
  .dark\:text-zinc-200:where(.dark, .dark *) {
3306
4444
  color: var(--color-zinc-200);
3307
4445
  }
@@ -3318,12 +4456,13 @@
3318
4456
  color: var(--color-zinc-500);
3319
4457
  }
3320
4458
 
3321
- .dark\:text-zinc-700:where(.dark, .dark *) {
3322
- color: var(--color-zinc-700);
4459
+ .dark\:opacity-55:where(.dark, .dark *) {
4460
+ opacity: .55;
3323
4461
  }
3324
4462
 
3325
- .dark\:opacity-100:where(.dark, .dark *) {
3326
- opacity: 1;
4463
+ .dark\:shadow-none:where(.dark, .dark *) {
4464
+ --tw-shadow: 0 0 #0000;
4465
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3327
4466
  }
3328
4467
 
3329
4468
  .dark\:ring-1:where(.dark, .dark *) {
@@ -3331,23 +4470,23 @@
3331
4470
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3332
4471
  }
3333
4472
 
3334
- .dark\:ring-amber-400\/30:where(.dark, .dark *) {
3335
- --tw-ring-color: #fcbb004d;
4473
+ .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
4474
+ --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
3336
4475
  }
3337
4476
 
3338
4477
  @supports (color: color-mix(in lab, red, red)) {
3339
- .dark\:ring-amber-400\/30:where(.dark, .dark *) {
3340
- --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
4478
+ .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
4479
+ --tw-ring-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 20%, transparent);
3341
4480
  }
3342
4481
  }
3343
4482
 
3344
- .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
3345
- --tw-ring-color: #00d29433;
4483
+ .dark\:ring-amber-400\/30:where(.dark, .dark *) {
4484
+ --tw-ring-color: #fcbb004d;
3346
4485
  }
3347
4486
 
3348
4487
  @supports (color: color-mix(in lab, red, red)) {
3349
- .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
3350
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
4488
+ .dark\:ring-amber-400\/30:where(.dark, .dark *) {
4489
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
3351
4490
  }
3352
4491
  }
3353
4492
 
@@ -3361,16 +4500,6 @@
3361
4500
  }
3362
4501
  }
3363
4502
 
3364
- .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
3365
- --tw-ring-color: #00bb7f4d;
3366
- }
3367
-
3368
- @supports (color: color-mix(in lab, red, red)) {
3369
- .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
3370
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
3371
- }
3372
- }
3373
-
3374
4503
  .dark\:ring-rose-500\/20:where(.dark, .dark *) {
3375
4504
  --tw-ring-color: #ff235733;
3376
4505
  }
@@ -3445,8 +4574,8 @@
3445
4574
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
3446
4575
  }
3447
4576
 
3448
- .dark\:\[--tw-prose-links-hover\:var\(--color-emerald-300\)\]:where(.dark, .dark *) {
3449
- --tw-prose-links-hover: var(--color-emerald-300);
4577
+ .dark\:\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\]:where(.dark, .dark *) {
4578
+ --tw-prose-links-hover: var(--clarify-ui-accent-text);
3450
4579
  }
3451
4580
 
3452
4581
  .dark\:\[--tw-prose-links\:var\(--color-white\)\]:where(.dark, .dark *) {
@@ -3461,9 +4590,35 @@
3461
4590
  .dark\:group-hover\/anchor\:stroke-white:where(.dark, .dark *):is(:where(.group\/anchor):hover *) {
3462
4591
  stroke: var(--color-white);
3463
4592
  }
4593
+ }
4594
+
4595
+ .dark\:placeholder\:text-zinc-500:where(.dark, .dark *)::placeholder {
4596
+ color: var(--color-zinc-500);
4597
+ }
4598
+
4599
+ @media (hover: hover) {
4600
+ .dark\:hover\:border-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *):hover {
4601
+ border-color: var(--clarify-theme-tokens-colors-primary);
4602
+ }
4603
+
4604
+ .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
4605
+ border-color: #ffffff26;
4606
+ }
4607
+
4608
+ @supports (color: color-mix(in lab, red, red)) {
4609
+ .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
4610
+ border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
4611
+ }
4612
+ }
4613
+
4614
+ .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
4615
+ background-color: #ffffff06;
4616
+ }
3464
4617
 
3465
- .dark\:hover\:bg-emerald-400:where(.dark, .dark *):hover {
3466
- background-color: var(--color-emerald-400);
4618
+ @supports (color: color-mix(in lab, red, red)) {
4619
+ .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
4620
+ background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent);
4621
+ }
3467
4622
  }
3468
4623
 
3469
4624
  .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
@@ -3494,12 +4649,12 @@
3494
4649
  background-color: var(--color-zinc-800);
3495
4650
  }
3496
4651
 
3497
- .dark\:hover\:text-emerald-300:where(.dark, .dark *):hover {
3498
- color: var(--color-emerald-300);
4652
+ .dark\:hover\:bg-zinc-900:where(.dark, .dark *):hover {
4653
+ background-color: var(--color-zinc-900);
3499
4654
  }
3500
4655
 
3501
- .dark\:hover\:text-emerald-500:where(.dark, .dark *):hover {
3502
- color: var(--color-emerald-500);
4656
+ .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
4657
+ color: var(--color-emerald-200);
3503
4658
  }
3504
4659
 
3505
4660
  .dark\:hover\:text-white:where(.dark, .dark *):hover {
@@ -3510,18 +4665,8 @@
3510
4665
  color: var(--color-zinc-300);
3511
4666
  }
3512
4667
 
3513
- .dark\:hover\:ring-emerald-300:where(.dark, .dark *):hover {
3514
- --tw-ring-color: var(--color-emerald-300);
3515
- }
3516
-
3517
- .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
3518
- --tw-ring-color: #fff3;
3519
- }
3520
-
3521
- @supports (color: color-mix(in lab, red, red)) {
3522
- .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
3523
- --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
3524
- }
4668
+ .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
4669
+ opacity: .8;
3525
4670
  }
3526
4671
 
3527
4672
  .dark\:hover\:ring-zinc-600:where(.dark, .dark *):hover {
@@ -3529,16 +4674,20 @@
3529
4674
  }
3530
4675
  }
3531
4676
 
3532
- .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
3533
- background-color: #27272a80;
4677
+ .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
4678
+ border-color: #fff3;
3534
4679
  }
3535
4680
 
3536
4681
  @supports (color: color-mix(in lab, red, red)) {
3537
- .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
3538
- background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
4682
+ .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
4683
+ border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
3539
4684
  }
3540
4685
  }
3541
4686
 
4687
+ .dark\:focus\:bg-zinc-950:where(.dark, .dark *):focus {
4688
+ background-color: var(--color-zinc-950);
4689
+ }
4690
+
3542
4691
  .dark\:data-focus\:bg-white\/10:where(.dark, .dark *)[data-focus] {
3543
4692
  background-color: #ffffff1a;
3544
4693
  }
@@ -3549,8 +4698,22 @@
3549
4698
  }
3550
4699
  }
3551
4700
 
3552
- .dark\:data-focus\:text-white:where(.dark, .dark *)[data-focus] {
3553
- color: var(--color-white);
4701
+ .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
4702
+ border-color: #ffffff26;
4703
+ }
4704
+
4705
+ @supports (color: color-mix(in lab, red, red)) {
4706
+ .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
4707
+ border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
4708
+ }
4709
+ }
4710
+
4711
+ .dark\:data-open\:bg-zinc-900:where(.dark, .dark *)[data-open] {
4712
+ background-color: var(--color-zinc-900);
4713
+ }
4714
+
4715
+ .dark\:data-selected\:text-emerald-300:where(.dark, .dark *)[data-selected] {
4716
+ color: var(--color-emerald-300);
3554
4717
  }
3555
4718
 
3556
4719
  @media (min-width: 48rem) {
@@ -3566,16 +4729,6 @@
3566
4729
  }
3567
4730
 
3568
4731
  @media (min-width: 64rem) {
3569
- .lg\:dark\:border-white\/10:where(.dark, .dark *) {
3570
- border-color: #ffffff1a;
3571
- }
3572
-
3573
- @supports (color: color-mix(in lab, red, red)) {
3574
- .lg\:dark\:border-white\/10:where(.dark, .dark *) {
3575
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3576
- }
3577
- }
3578
-
3579
4732
  .lg\:dark\:bg-zinc-950:where(.dark, .dark *) {
3580
4733
  background-color: var(--color-zinc-950);
3581
4734
  }
@@ -3603,38 +4756,16 @@
3603
4756
  display: none;
3604
4757
  }
3605
4758
 
3606
- html :where(.\[html_\:where\(\&\>\*\)\]\:mx-auto > *) {
3607
- margin-inline: auto;
3608
- }
3609
-
3610
4759
  html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
3611
4760
  width: 100%;
3612
4761
  }
3613
4762
 
3614
- html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-3xl > *) {
3615
- max-width: var(--container-3xl);
3616
- }
3617
-
3618
- @media (min-width: 80rem) {
3619
- html :where(.xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[56rem\] > *) {
3620
- max-width: 56rem;
3621
- }
3622
- }
3623
-
3624
- @media (min-width: 96rem) {
3625
- html :where(.\32 xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[64rem\] > *) {
3626
- max-width: 64rem;
3627
- }
3628
- }
3629
-
3630
- html :where(.\[html_\:where\(\&\>\.not-prose\)\]\:max-w-5xl > .not-prose) {
3631
- max-width: var(--container-5xl);
4763
+ html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-full > *) {
4764
+ max-width: 100%;
3632
4765
  }
3633
4766
 
3634
- @media (min-width: 96rem) {
3635
- html :where(.\32 xl\:\[html_\:where\(\&\>\.not-prose\)\]\:max-w-\[76rem\] > .not-prose) {
3636
- max-width: 76rem;
3637
- }
4767
+ html :where(.\[html_\:where\(\&\>\*\)\]\:min-w-0 > *) {
4768
+ min-width: 0;
3638
4769
  }
3639
4770
  }
3640
4771
 
@@ -3699,57 +4830,11 @@
3699
4830
  initial-value: solid;
3700
4831
  }
3701
4832
 
3702
- @property --tw-gradient-position {
3703
- syntax: "*";
3704
- inherits: false
3705
- }
3706
-
3707
- @property --tw-gradient-from {
3708
- syntax: "<color>";
3709
- inherits: false;
3710
- initial-value: #0000;
3711
- }
3712
-
3713
- @property --tw-gradient-via {
3714
- syntax: "<color>";
3715
- inherits: false;
3716
- initial-value: #0000;
3717
- }
3718
-
3719
- @property --tw-gradient-to {
3720
- syntax: "<color>";
3721
- inherits: false;
3722
- initial-value: #0000;
3723
- }
3724
-
3725
- @property --tw-gradient-stops {
3726
- syntax: "*";
3727
- inherits: false
3728
- }
3729
-
3730
- @property --tw-gradient-via-stops {
4833
+ @property --tw-leading {
3731
4834
  syntax: "*";
3732
4835
  inherits: false
3733
4836
  }
3734
4837
 
3735
- @property --tw-gradient-from-position {
3736
- syntax: "<length-percentage>";
3737
- inherits: false;
3738
- initial-value: 0%;
3739
- }
3740
-
3741
- @property --tw-gradient-via-position {
3742
- syntax: "<length-percentage>";
3743
- inherits: false;
3744
- initial-value: 50%;
3745
- }
3746
-
3747
- @property --tw-gradient-to-position {
3748
- syntax: "<length-percentage>";
3749
- inherits: false;
3750
- initial-value: 100%;
3751
- }
3752
-
3753
4838
  @property --tw-font-weight {
3754
4839
  syntax: "*";
3755
4840
  inherits: false