@nswds/app 1.108.2 → 1.109.0

package/dist/globals.css

@@ -95,6 +95,7 @@
     --tracking-wide: 0.025em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
@@ -115,8 +116,11 @@
     --default-mono-font-family: var(--font-mono);
     --color-nsw-blue-800: var(--nsw-blue-800);
     --color-nsw-red-600: var(--nsw-red-600);
+    --color-primary-50: var(--nsw-blue-50);
+    --color-primary-100: var(--nsw-blue-100);
     --color-primary-200: var(--nsw-blue-200);
     --color-primary-250: var(--nsw-blue-250);
+    --color-primary-300: var(--nsw-blue-300);
     --color-primary-400: var(--nsw-blue-400);
     --color-primary-500: var(--nsw-blue-500);
     --color-primary-550: var(--nsw-blue-550);
@@ -127,6 +131,8 @@
     --color-primary-850: var(--nsw-blue-800);
     --color-primary-900: var(--nsw-blue-900);
     --color-primary-950: var(--nsw-blue-950);
+    --color-accent-50: var(--nsw-red-50);
+    --color-accent-200: var(--nsw-red-200);
     --color-accent-400: var(--nsw-red-400);
     --color-accent-500: var(--nsw-red-500);
     --color-accent-600: var(--nsw-red-600);
@@ -1052,12 +1058,21 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-2\.5 {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-3\.5 {
+    margin-top: calc(var(--spacing) * 3.5);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -1280,6 +1295,14 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .size-12 {
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
@@ -1361,6 +1384,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -1370,12 +1396,21 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-44 {
+    height: calc(var(--spacing) * 44);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-72 {
+    height: calc(var(--spacing) * 72);
+  }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
@@ -1388,8 +1423,14 @@
   .h-\[3px\] {
     height: 3px;
   }
-  .h-\[20\.5rem\] {
-    height: 20.5rem;
+  .h-\[32rem\] {
+    height: 32rem;
+  }
+  .h-\[40rem\] {
+    height: 40rem;
+  }
+  .h-\[420px\] {
+    height: 420px;
   }
   .h-\[600px\] {
     height: 600px;
@@ -1460,18 +1501,33 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
+  .min-h-\[12rem\] {
+    min-height: 12rem;
+  }
+  .min-h-\[16rem\] {
+    min-height: 16rem;
+  }
+  .min-h-\[18rem\] {
+    min-height: 18rem;
+  }
+  .min-h-\[22rem\] {
+    min-height: 22rem;
+  }
   .min-h-\[25rem\] {
     min-height: 25rem;
   }
-  .min-h-\[46rem\] {
-    min-height: 46rem;
-  }
   .min-h-dvh {
     min-height: 100dvh;
   }
@@ -1535,6 +1591,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -1583,6 +1642,12 @@
   .w-\[10rem\] {
     width: 10rem;
   }
+  .w-\[11rem\] {
+    width: 11rem;
+  }
+  .w-\[30rem\] {
+    width: 30rem;
+  }
   .w-\[50vw\] {
     width: 50vw;
   }
@@ -1670,6 +1735,9 @@
   .max-w-\[80\%\] {
     max-width: 80%;
   }
+  .max-w-\[90vw\] {
+    max-width: 90vw;
+  }
   .max-w-\[500px\] {
     max-width: 500px;
   }
@@ -1976,12 +2044,12 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
   .grid-cols-\[--spacing\(5\)_1fr\] {
     grid-template-columns: calc(var(--spacing) * 5) 1fr;
   }
@@ -2066,6 +2134,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -2093,6 +2164,9 @@
   .gap-\[calc\(--spacing\(2\)\)\] {
     gap: calc(calc(var(--spacing) * 2));
   }
+  .gap-px {
+    gap: 1px;
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -2100,6 +2174,13 @@
       margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-0\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -2252,6 +2333,11 @@
       border-color: var(--color-gray-100);
     }
   }
+  .divide-grey-100 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-grey-100);
+    }
+  }
   .divide-grey-200 {
     :where(& > :not(:last-child)) {
       border-color: var(--color-grey-200);
@@ -2482,6 +2568,9 @@
   .border-\[\#ebebeb\] {
     border-color: #ebebeb;
   }
+  .border-accent-200 {
+    border-color: var(--color-accent-200);
+  }
   .border-accent-600 {
     border-color: var(--color-accent-600);
   }
@@ -2503,6 +2592,15 @@
       border-color: color-mix(in oklab, var(--border) 50%, transparent);
     }
   }
+  .border-current {
+    border-color: currentcolor;
+  }
+  .border-danger-200 {
+    border-color: var(--danger-200);
+  }
+  .border-danger-300 {
+    border-color: var(--danger-300);
+  }
   .border-danger-500 {
     border-color: var(--danger-500);
   }
@@ -2530,6 +2628,18 @@
   .border-grey-300 {
     border-color: var(--color-grey-300);
   }
+  .border-grey-300\/70 {
+    border-color: var(--color-grey-300);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-grey-300) 70%, transparent);
+    }
+  }
+  .border-grey-300\/80 {
+    border-color: var(--color-grey-300);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-grey-300) 80%, transparent);
+    }
+  }
   .border-grey-400 {
     border-color: var(--color-grey-400);
   }
@@ -2545,6 +2655,9 @@
       border-color: color-mix(in oklab, var(--color-grey-700) 80%, transparent);
     }
   }
+  .border-grey-800 {
+    border-color: var(--color-grey-800);
+  }
   .border-grey-900 {
     border-color: var(--color-grey-900);
   }
@@ -2575,6 +2688,15 @@
   .border-primary {
     border-color: var(--primary);
   }
+  .border-primary-100 {
+    border-color: var(--color-primary-100);
+  }
+  .border-primary-200 {
+    border-color: var(--color-primary-200);
+  }
+  .border-primary-300 {
+    border-color: var(--color-primary-300);
+  }
   .border-primary-500 {
     border-color: var(--color-primary-500);
   }
@@ -2587,6 +2709,9 @@
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
+  .border-primary-700 {
+    border-color: var(--color-primary-700);
+  }
   .border-primary-800 {
     border-color: var(--color-primary-800);
   }
@@ -2611,6 +2736,9 @@
   .border-slate-200 {
     border-color: var(--color-slate-200);
   }
+  .border-success-200 {
+    border-color: var(--success-200);
+  }
   .border-success-450 {
     border-color: var(--success-450);
   }
@@ -2641,6 +2769,21 @@
       border-color: color-mix(in oklab, var(--warning-600) 25%, transparent);
     }
   }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .border-white\/30 {
+    border-color: color-mix(in srgb, #fff 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+  .border-white\/70 {
+    border-color: color-mix(in srgb, #fff 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -2686,6 +2829,9 @@
   .bg-accent {
     background-color: var(--accent);
   }
+  .bg-accent-50 {
+    background-color: var(--color-accent-50);
+  }
   .bg-accent-800 {
     background-color: var(--color-accent-800);
   }
@@ -2722,9 +2868,21 @@
   .bg-card {
     background-color: var(--card);
   }
+  .bg-current {
+    background-color: currentcolor;
+  }
+  .bg-current\/10 {
+    background-color: currentcolor;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, currentcolor 10%, transparent);
+    }
+  }
   .bg-cyan-500 {
     background-color: var(--color-cyan-500);
   }
+  .bg-danger-50 {
+    background-color: var(--danger-50);
+  }
   .bg-danger-200 {
     background-color: var(--danger-200);
   }
@@ -2743,6 +2901,9 @@
       background-color: color-mix(in oklab, var(--danger-600) 10%, transparent);
     }
   }
+  .bg-danger-700 {
+    background-color: var(--danger-700);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -2773,6 +2934,18 @@
   .bg-grey-50 {
     background-color: var(--color-grey-50);
   }
+  .bg-grey-50\/60 {
+    background-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-grey-50) 60%, transparent);
+    }
+  }
+  .bg-grey-50\/70 {
+    background-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-grey-50) 70%, transparent);
+    }
+  }
   .bg-grey-100 {
     background-color: var(--color-grey-100);
   }
@@ -2830,6 +3003,39 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-primary-50 {
+    background-color: var(--color-primary-50);
+  }
+  .bg-primary-50\/30 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 30%, transparent);
+    }
+  }
+  .bg-primary-50\/40 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 40%, transparent);
+    }
+  }
+  .bg-primary-50\/50 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 50%, transparent);
+    }
+  }
+  .bg-primary-50\/60 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 60%, transparent);
+    }
+  }
+  .bg-primary-50\/70 {
+    background-color: var(--color-primary-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary-50) 70%, transparent);
+    }
+  }
   .bg-primary-200 {
     background-color: var(--color-primary-200);
   }
@@ -2878,6 +3084,9 @@
   .bg-sidebar-primary {
     background-color: var(--sidebar-primary);
   }
+  .bg-success-50 {
+    background-color: var(--success-50);
+  }
   .bg-success-200 {
     background-color: var(--success-200);
   }
@@ -2896,6 +3105,9 @@
       background-color: color-mix(in oklab, var(--success-600) 10%, transparent);
     }
   }
+  .bg-success-700 {
+    background-color: var(--success-700);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2926,6 +3138,30 @@
       background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
     }
   }
+  .bg-white\/82 {
+    background-color: color-mix(in srgb, #fff 82%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 82%, transparent);
+    }
+  }
+  .bg-white\/90 {
+    background-color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+  .bg-white\/92 {
+    background-color: color-mix(in srgb, #fff 92%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 92%, transparent);
+    }
+  }
+  .bg-white\/95 {
+    background-color: color-mix(in srgb, #fff 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
@@ -3205,6 +3441,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -3214,6 +3453,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-7 {
+    padding-block: calc(var(--spacing) * 7);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -3256,6 +3498,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -3322,6 +3567,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pb-12 {
     padding-bottom: calc(var(--spacing) * 12);
   }
@@ -3397,6 +3645,14 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-\[0\.96rem\]\/7 {
+    font-size: 0.96rem;
+    line-height: calc(var(--spacing) * 7);
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3433,6 +3689,10 @@
     font-size: var(--text-sm);
     line-height: calc(var(--spacing) * 6);
   }
+  .text-sm\/7 {
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 7);
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -3441,6 +3701,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-xs\/5 {
+    font-size: var(--text-xs);
+    line-height: calc(var(--spacing) * 5);
+  }
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
@@ -3453,6 +3717,12 @@
   .text-\[0\.62rem\] {
     font-size: 0.62rem;
   }
+  .text-\[0\.64rem\] {
+    font-size: 0.64rem;
+  }
+  .text-\[0\.65rem\] {
+    font-size: 0.65rem;
+  }
   .text-\[0\.66rem\] {
     font-size: 0.66rem;
   }
@@ -3462,15 +3732,42 @@
   .text-\[0\.72rem\] {
     font-size: 0.72rem;
   }
+  .text-\[0\.74rem\] {
+    font-size: 0.74rem;
+  }
   .text-\[0\.82rem\] {
     font-size: 0.82rem;
   }
+  .text-\[0\.94rem\] {
+    font-size: 0.94rem;
+  }
+  .text-\[0\.95rem\] {
+    font-size: 0.95rem;
+  }
+  .text-\[1\.9rem\] {
+    font-size: 1.9rem;
+  }
+  .text-\[2\.5rem\] {
+    font-size: 2.5rem;
+  }
   .text-\[2\.6rem\] {
     font-size: 2.6rem;
   }
+  .text-\[2\.8rem\] {
+    font-size: 2.8rem;
+  }
+  .text-\[2rem\] {
+    font-size: 2rem;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
   .text-\[16px\] {
     font-size: 16px;
   }
@@ -3592,6 +3889,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3628,6 +3929,10 @@
     --tw-tracking: -0.06em;
     letter-spacing: -0.06em;
   }
+  .tracking-\[0\.1em\] {
+    --tw-tracking: 0.1em;
+    letter-spacing: 0.1em;
+  }
   .tracking-\[0\.04em\] {
     --tw-tracking: 0.04em;
     letter-spacing: 0.04em;
@@ -3648,6 +3953,10 @@
     --tw-tracking: 0.12em;
     letter-spacing: 0.12em;
   }
+  .tracking-\[0\.14em\] {
+    --tw-tracking: 0.14em;
+    letter-spacing: 0.14em;
+  }
   .tracking-\[0\.16em\] {
     --tw-tracking: 0.16em;
     letter-spacing: 0.16em;
@@ -3656,6 +3965,10 @@
     --tw-tracking: 0.18em;
     letter-spacing: 0.18em;
   }
+  .tracking-\[0\.22em\] {
+    --tw-tracking: 0.22em;
+    letter-spacing: 0.22em;
+  }
   .tracking-\[calc\(var\(--heading-letter-spacing-1\)_\+_var\(--heading-letter-spacing\)\)\] {
     --tw-tracking: calc(var(--heading-letter-spacing-1) + var(--heading-letter-spacing));
     letter-spacing: calc(var(--heading-letter-spacing-1) + var(--heading-letter-spacing));
@@ -3731,6 +4044,9 @@
   .text-\[\#888f92\] {
     color: #888f92;
   }
+  .text-accent-900 {
+    color: var(--color-accent-900);
+  }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
@@ -3755,6 +4071,9 @@
   .text-danger-800 {
     color: var(--danger-800);
   }
+  .text-danger-900 {
+    color: var(--danger-900);
+  }
   .text-destructive {
     color: var(--destructive);
   }
@@ -3860,6 +4179,9 @@
   .text-primary-800 {
     color: var(--color-primary-800);
   }
+  .text-primary-900 {
+    color: var(--color-primary-900);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
@@ -3979,6 +4301,9 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -3994,6 +4319,10 @@
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.28\)\] {
+    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.28));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_1px_0_var\(--nsw-card-image-border\)\,inset_1px_0_0_var\(--nsw-card-image-border\)\,inset_-1px_0_0_var\(--nsw-card-image-border\)\] {
     --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, var(--nsw-card-image-border)), inset 1px 0 0 var(--tw-shadow-color, var(--nsw-card-image-border)), inset -1px 0 0 var(--tw-shadow-color, var(--nsw-card-image-border));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4092,6 +4421,12 @@
       --tw-ring-color: color-mix(in oklab, var(--color-grey-950) 10%, transparent);
     }
   }
+  .ring-primary-500 {
+    --tw-ring-color: var(--color-primary-500);
+  }
+  .ring-primary-700 {
+    --tw-ring-color: var(--color-primary-700);
+  }
   .ring-ring {
     --tw-ring-color: var(--ring);
   }
@@ -4110,6 +4445,22 @@
   .ring-white {
     --tw-ring-color: var(--color-white);
   }
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+  .ring-offset-grey-50 {
+    --tw-ring-offset-color: var(--color-grey-50);
+  }
+  .ring-offset-grey-50\/60 {
+    --tw-ring-offset-color: var(--color-grey-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-offset-color: color-mix(in oklab, var(--color-grey-50) 60%, transparent);
+    }
+  }
   .ring-offset-white {
     --tw-ring-offset-color: var(--color-white);
   }
@@ -4150,6 +4501,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-\[1px\] {
+    --tw-backdrop-blur: blur(1px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -5972,6 +6328,14 @@
       }
     }
   }
+  .hover\:-translate-y-px {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -5982,6 +6346,20 @@
       }
     }
   }
+  .hover\:scale-\[1\.01\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.01;
+      }
+    }
+  }
+  .hover\:scale-\[1\.03\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.03;
+      }
+    }
+  }
   .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -6003,6 +6381,13 @@
       }
     }
   }
+  .hover\:border-grey-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-grey-500);
+      }
+    }
+  }
   .hover\:border-grey-950 {
     &:hover {
       @media (hover: hover) {
@@ -6010,6 +6395,13 @@
       }
     }
   }
+  .hover\:border-primary-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-500);
+      }
+    }
+  }
   .hover\:border-primary-600 {
     &:hover {
       @media (hover: hover) {
@@ -6062,6 +6454,13 @@
       }
     }
   }
+  .hover\:bg-grey-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-grey-50);
+      }
+    }
+  }
   .hover\:bg-grey-100 {
     &:hover {
       @media (hover: hover) {
@@ -6093,6 +6492,13 @@
       }
     }
   }
+  .hover\:bg-primary-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-50);
+      }
+    }
+  }
   .hover\:bg-primary-800\/10 {
     &:hover {
       @media (hover: hover) {
@@ -6280,6 +6686,14 @@
       }
     }
   }
+  .hover\:shadow-sm {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:ring-4 {
     &:hover {
       @media (hover: hover) {
@@ -6581,6 +6995,11 @@
       }
     }
   }
+  .focus-visible\:ring-primary-700 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-primary-700);
+    }
+  }
   .focus-visible\:ring-ring {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -8686,112 +9105,262 @@
       height: calc(var(--spacing) * 5);
     }
   }
-  .sm\:min-h-12 {
+  .sm\:h-20 {
     @media (width >= 40rem) {
-      min-height: calc(var(--spacing) * 12);
+      height: calc(var(--spacing) * 20);
     }
   }
-  .sm\:min-h-\[27rem\] {
+  .sm\:h-24 {
     @media (width >= 40rem) {
-      min-height: 27rem;
+      height: calc(var(--spacing) * 24);
     }
   }
-  .sm\:w-8 {
+  .sm\:h-\[44rem\] {
     @media (width >= 40rem) {
-      width: calc(var(--spacing) * 8);
+      height: 44rem;
     }
   }
-  .sm\:max-w-lg {
+  .sm\:max-h-\[20\.5rem\] {
     @media (width >= 40rem) {
-      max-width: var(--container-lg);
+      max-height: 20.5rem;
     }
   }
-  .sm\:max-w-md {
+  .sm\:max-h-\[44rem\] {
     @media (width >= 40rem) {
-      max-width: var(--container-md);
+      max-height: 44rem;
     }
   }
-  .sm\:max-w-sm {
+  .sm\:min-h-12 {
     @media (width >= 40rem) {
-      max-width: var(--container-sm);
+      min-height: calc(var(--spacing) * 12);
     }
   }
-  .sm\:grid-cols-2 {
+  .sm\:min-h-\[17\.5rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      min-height: 17.5rem;
     }
   }
-  .sm\:grid-cols-3 {
+  .sm\:min-h-\[20rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      min-height: 20rem;
     }
   }
-  .sm\:grid-cols-4 {
+  .sm\:min-h-\[21rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+      min-height: 21rem;
     }
   }
-  .sm\:grid-cols-\[--spacing\(4\)_1fr\] {
+  .sm\:min-h-\[22rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: calc(var(--spacing) * 4) 1fr;
+      min-height: 22rem;
     }
   }
-  .sm\:grid-cols-\[1fr_auto\] {
+  .sm\:min-h-\[24rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: 1fr auto;
+      min-height: 24rem;
     }
   }
-  .sm\:grid-cols-\[min\(50\%\,--spacing\(80\)\)_auto\] {
+  .sm\:min-h-\[26rem\] {
     @media (width >= 40rem) {
-      grid-template-columns: min(50%, calc(var(--spacing) * 80)) auto;
+      min-height: 26rem;
     }
   }
-  .sm\:flex-row {
+  .sm\:min-h-\[27rem\] {
     @media (width >= 40rem) {
-      flex-direction: row;
+      min-height: 27rem;
     }
   }
-  .sm\:justify-center {
+  .sm\:w-8 {
     @media (width >= 40rem) {
-      justify-content: center;
+      width: calc(var(--spacing) * 8);
     }
   }
-  .sm\:justify-end {
+  .sm\:w-auto {
     @media (width >= 40rem) {
-      justify-content: flex-end;
+      width: auto;
     }
   }
-  .sm\:gap-2\.5 {
+  .sm\:w-fit {
     @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 2.5);
+      width: fit-content;
     }
   }
-  .sm\:gap-4 {
+  .sm\:max-w-lg {
     @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 4);
+      max-width: var(--container-lg);
     }
   }
-  .sm\:divide-x {
+  .sm\:max-w-md {
     @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-      }
+      max-width: var(--container-md);
     }
   }
-  .sm\:divide-y-0 {
+  .sm\:max-w-sm {
     @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(0px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+      max-width: var(--container-sm);
+    }
+  }
+  .sm\:min-w-40 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 40);
+    }
+  }
+  .sm\:min-w-48 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 48);
+    }
+  }
+  .sm\:min-w-56 {
+    @media (width >= 40rem) {
+      min-width: calc(var(--spacing) * 56);
+    }
+  }
+  .sm\:flex-none {
+    @media (width >= 40rem) {
+      flex: none;
+    }
+  }
+  .sm\:basis-auto {
+    @media (width >= 40rem) {
+      flex-basis: auto;
+    }
+  }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-4 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-5 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-6 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-\[--spacing\(4\)_1fr\] {
+    @media (width >= 40rem) {
+      grid-template-columns: calc(var(--spacing) * 4) 1fr;
+    }
+  }
+  .sm\:grid-cols-\[1fr_auto\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 1fr auto;
+    }
+  }
+  .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 4rem minmax(0,1fr);
+    }
+  }
+  .sm\:grid-cols-\[min\(50\%\,--spacing\(80\)\)_auto\] {
+    @media (width >= 40rem) {
+      grid-template-columns: min(50%, calc(var(--spacing) * 80)) auto;
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:flex-wrap {
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:items-end {
+    @media (width >= 40rem) {
+      align-items: flex-end;
+    }
+  }
+  .sm\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
+  .sm\:justify-between {
+    @media (width >= 40rem) {
+      justify-content: space-between;
+    }
+  }
+  .sm\:justify-center {
+    @media (width >= 40rem) {
+      justify-content: center;
+    }
+  }
+  .sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
+  .sm\:gap-2\.5 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 2.5);
+    }
+  }
+  .sm\:gap-4 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:gap-6 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:divide-x {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+      }
+    }
+  }
+  .sm\:divide-y-0 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(0px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
       }
     }
   }
+  .sm\:self-center {
+    @media (width >= 40rem) {
+      align-self: center;
+    }
+  }
+  .sm\:overflow-y-auto {
+    @media (width >= 40rem) {
+      overflow-y: auto;
+    }
+  }
   .sm\:border-x {
     @media (width >= 40rem) {
       border-inline-style: var(--tw-border-style);
@@ -8820,6 +9389,16 @@
       }
     }
   }
+  .sm\:p-5 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:px-0 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 0);
@@ -8830,6 +9409,11 @@
       padding-inline: calc(var(--spacing) * 2);
     }
   }
+  .sm\:px-5 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -8875,6 +9459,11 @@
       padding-block: calc(var(--spacing) * 3);
     }
   }
+  .sm\:py-5 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 5);
+    }
+  }
   .sm\:py-6 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 6);
@@ -8910,6 +9499,11 @@
       padding-block: calc(calc(var(--spacing) * 4) - 1px);
     }
   }
+  .sm\:pr-1 {
+    @media (width >= 40rem) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+  }
   .sm\:pr-3 {
     @media (width >= 40rem) {
       padding-right: calc(var(--spacing) * 3);
@@ -8930,6 +9524,16 @@
       padding-bottom: calc(var(--spacing) * 8);
     }
   }
+  .sm\:pb-10 {
+    @media (width >= 40rem) {
+      padding-bottom: calc(var(--spacing) * 10);
+    }
+  }
+  .sm\:pb-16 {
+    @media (width >= 40rem) {
+      padding-bottom: calc(var(--spacing) * 16);
+    }
+  }
   .sm\:pb-32 {
     @media (width >= 40rem) {
       padding-bottom: calc(var(--spacing) * 32);
@@ -8950,6 +9554,12 @@
       text-align: left;
     }
   }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .sm\:text-5xl {
     @media (width >= 40rem) {
       font-size: var(--text-5xl);
@@ -8962,6 +9572,18 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
+  .sm\:text-base {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .sm\:text-base\/7 {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: calc(var(--spacing) * 7);
+    }
+  }
   .sm\:text-lg {
     @media (width >= 40rem) {
       font-size: var(--text-lg);
@@ -8986,17 +9608,48 @@
       line-height: calc(var(--spacing) * 6);
     }
   }
+  .sm\:text-xs {
+    @media (width >= 40rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
   .sm\:text-xs\/5 {
     @media (width >= 40rem) {
       font-size: var(--text-xs);
       line-height: calc(var(--spacing) * 5);
     }
   }
+  .sm\:text-\[0\.72rem\] {
+    @media (width >= 40rem) {
+      font-size: 0.72rem;
+    }
+  }
   .sm\:text-\[0\.8125rem\] {
     @media (width >= 40rem) {
       font-size: 0.8125rem;
     }
   }
+  .sm\:text-\[2\.25rem\] {
+    @media (width >= 40rem) {
+      font-size: 2.25rem;
+    }
+  }
+  .sm\:text-\[2\.75rem\] {
+    @media (width >= 40rem) {
+      font-size: 2.75rem;
+    }
+  }
+  .sm\:text-\[3\.25rem\] {
+    @media (width >= 40rem) {
+      font-size: 3.25rem;
+    }
+  }
+  .sm\:text-\[4rem\] {
+    @media (width >= 40rem) {
+      font-size: 4rem;
+    }
+  }
   .sm\:text-\[16px\] {
     @media (width >= 40rem) {
       font-size: 16px;
@@ -9008,6 +9661,12 @@
       line-height: calc(var(--spacing) * 8);
     }
   }
+  .sm\:leading-none {
+    @media (width >= 40rem) {
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
   .sm\:font-\[700\] {
     @media (width >= 40rem) {
       --tw-font-weight: 700;
@@ -9154,6 +9813,11 @@
       position: absolute;
     }
   }
+  .md\:col-span-2 {
+    @media (width >= 48rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
   .md\:-mt-px {
     @media (width >= 48rem) {
       margin-top: -1px;
@@ -9316,6 +9980,11 @@
       inset: calc(var(--spacing) * 0);
     }
   }
+  .lg\:col-span-2 {
+    @media (width >= 64rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
   .lg\:col-span-4 {
     @media (width >= 64rem) {
       grid-column: span 4 / span 4;
@@ -9406,11 +10075,26 @@
       width: 280px;
     }
   }
+  .lg\:w-auto {
+    @media (width >= 64rem) {
+      width: auto;
+    }
+  }
   .lg\:max-w-none {
     @media (width >= 64rem) {
       max-width: none;
     }
   }
+  .lg\:min-w-40 {
+    @media (width >= 64rem) {
+      min-width: calc(var(--spacing) * 40);
+    }
+  }
+  .lg\:min-w-48 {
+    @media (width >= 64rem) {
+      min-width: calc(var(--spacing) * 48);
+    }
+  }
   .lg\:flex-none {
     @media (width >= 64rem) {
       flex: none;
@@ -9446,11 +10130,21 @@
       grid-template-columns: 18rem 1fr;
     }
   }
+  .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 18rem minmax(0,1fr);
+    }
+  }
   .lg\:grid-cols-\[20rem_1fr\] {
     @media (width >= 64rem) {
       grid-template-columns: 20rem 1fr;
     }
   }
+  .lg\:grid-cols-\[minmax\(0\,1fr\)_18rem\] {
+    @media (width >= 64rem) {
+      grid-template-columns: minmax(0,1fr) 18rem;
+    }
+  }
   .lg\:flex-row {
     @media (width >= 64rem) {
       flex-direction: row;
@@ -9621,6 +10315,11 @@
       top: var(--sticky-offset);
     }
   }
+  .xl\:top-\[var\(--tool-sidebar-top\)\] {
+    @media (width >= 80rem) {
+      top: var(--tool-sidebar-top);
+    }
+  }
   .xl\:left-2\/3 {
     @media (width >= 80rem) {
       left: calc(2/3 * 100%);
@@ -9646,26 +10345,106 @@
       display: block;
     }
   }
+  .xl\:hidden {
+    @media (width >= 80rem) {
+      display: none;
+    }
+  }
+  .xl\:h-\[var\(--tool-sidebar-max-height\)\] {
+    @media (width >= 80rem) {
+      height: var(--tool-sidebar-max-height);
+    }
+  }
   .xl\:h-screen {
     @media (width >= 80rem) {
       height: 100vh;
     }
   }
+  .xl\:max-h-\[var\(--tool-sidebar-max-height\)\] {
+    @media (width >= 80rem) {
+      max-height: var(--tool-sidebar-max-height);
+    }
+  }
+  .xl\:min-h-\[46rem\] {
+    @media (width >= 80rem) {
+      min-height: 46rem;
+    }
+  }
   .xl\:flex-none {
     @media (width >= 80rem) {
       flex: none;
     }
   }
+  .xl\:grid-cols-1 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-5 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: 20rem minmax(0,1fr);
+    }
+  }
   .xl\:grid-cols-\[260px_minmax\(0\,1fr\)\] {
     @media (width >= 80rem) {
       grid-template-columns: 260px minmax(0,1fr);
     }
   }
+  .xl\:grid-cols-\[320px_minmax\(0\,1fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: 320px minmax(0,1fr);
+    }
+  }
+  .xl\:grid-cols-\[minmax\(0\,1\.5fr\)_minmax\(18rem\,0\.72fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(0,1.5fr) minmax(18rem,0.72fr);
+    }
+  }
+  .xl\:grid-cols-\[minmax\(18rem\,24rem\)_minmax\(0\,1fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(18rem,24rem) minmax(0,1fr);
+    }
+  }
+  .xl\:flex-row {
+    @media (width >= 80rem) {
+      flex-direction: row;
+    }
+  }
+  .xl\:items-start {
+    @media (width >= 80rem) {
+      align-items: flex-start;
+    }
+  }
+  .xl\:justify-between {
+    @media (width >= 80rem) {
+      justify-content: space-between;
+    }
+  }
   .xl\:gap-x-6 {
     @media (width >= 80rem) {
       column-gap: calc(var(--spacing) * 6);
     }
   }
+  .xl\:self-start {
+    @media (width >= 80rem) {
+      align-self: flex-start;
+    }
+  }
   .xl\:overflow-y-auto {
     @media (width >= 80rem) {
       overflow-y: auto;
@@ -9677,6 +10456,11 @@
       border-bottom-width: 0px;
     }
   }
+  .xl\:px-0 {
+    @media (width >= 80rem) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
   .xl\:px-12 {
     @media (width >= 80rem) {
       padding-inline: calc(var(--spacing) * 12);
@@ -9702,6 +10486,11 @@
       padding-right: calc(var(--spacing) * 6);
     }
   }
+  .\32 xl\:grid-cols-4 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .dark\:block {
     &:where([data-theme=dark], [data-theme=dark] *) {
       display: block;
@@ -9722,6 +10511,13 @@
       }
     }
   }
+  .dark\:divide-grey-800 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      :where(& > :not(:last-child)) {
+        border-color: var(--color-grey-800);
+      }
+    }
+  }
   .dark\:border-b {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-bottom-style: var(--tw-border-style);
@@ -9759,6 +10555,19 @@
       border-color: var(--danger-700);
     }
   }
+  .dark\:border-danger-800 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--danger-800);
+    }
+  }
+  .dark\:border-danger-900\/60 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--danger-900);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--danger-900) 60%, transparent);
+      }
+    }
+  }
   .dark\:border-gray-600 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--color-gray-600);
@@ -9785,11 +10594,37 @@
       }
     }
   }
+  .dark\:border-grey-400 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-grey-400);
+    }
+  }
+  .dark\:border-grey-500 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-grey-500);
+    }
+  }
   .dark\:border-grey-600 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--color-grey-600);
     }
   }
+  .dark\:border-grey-600\/70 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-grey-600);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-grey-600) 70%, transparent);
+      }
+    }
+  }
+  .dark\:border-grey-600\/80 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-grey-600);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-grey-600) 80%, transparent);
+      }
+    }
+  }
   .dark\:border-grey-700 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--color-grey-700);
@@ -9810,6 +10645,11 @@
       border-color: var(--color-primary-200);
     }
   }
+  .dark\:border-primary-500 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-primary-500);
+    }
+  }
   .dark\:border-primary-600 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: var(--color-primary-600);
@@ -9820,6 +10660,14 @@
       border-color: var(--color-slate-800);
     }
   }
+  .dark\:border-success-900\/60 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--success-900);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--success-900) 60%, transparent);
+      }
+    }
+  }
   .dark\:border-transparent {
     &:where([data-theme=dark], [data-theme=dark] *) {
       border-color: transparent;
@@ -9922,6 +10770,22 @@
       }
     }
   }
+  .dark\:bg-danger-950\/20 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--danger-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--danger-950) 20%, transparent);
+      }
+    }
+  }
+  .dark\:bg-danger-950\/30 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--danger-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--danger-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-destructive\/60 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--destructive);
@@ -9950,6 +10814,11 @@
       background-color: var(--color-gray-950);
     }
   }
+  .dark\:bg-grey-100 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-100);
+    }
+  }
   .dark\:bg-grey-500 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-grey-500);
@@ -9991,11 +10860,43 @@
       background-color: var(--color-grey-900);
     }
   }
+  .dark\:bg-grey-900\/40 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-900);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-grey-900) 40%, transparent);
+      }
+    }
+  }
+  .dark\:bg-grey-900\/60 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-900);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-grey-900) 60%, transparent);
+      }
+    }
+  }
   .dark\:bg-grey-950 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-grey-950);
     }
   }
+  .dark\:bg-grey-950\/40 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-grey-950) 40%, transparent);
+      }
+    }
+  }
+  .dark\:bg-grey-950\/50 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-grey-950) 50%, transparent);
+      }
+    }
+  }
   .dark\:bg-input\/30 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--input);
@@ -10017,11 +10918,24 @@
       }
     }
   }
+  .dark\:bg-primary-700 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-primary-700);
+    }
+  }
   .dark\:bg-primary-950 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-primary-950);
     }
   }
+  .dark\:bg-primary-950\/30 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-primary-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-slate-900\/95 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
@@ -10043,6 +10957,22 @@
       }
     }
   }
+  .dark\:bg-success-950\/20 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--success-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--success-950) 20%, transparent);
+      }
+    }
+  }
+  .dark\:bg-success-950\/30 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--success-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--success-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-transparent {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: transparent;
@@ -10205,6 +11135,11 @@
       }
     }
   }
+  .dark\:text-danger-200 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--danger-200);
+    }
+  }
   .dark\:text-gray-50 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-gray-50);
@@ -10300,6 +11235,11 @@
       color: var(--color-slate-400);
     }
   }
+  .dark\:text-success-200 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--success-200);
+    }
+  }
   .dark\:text-white {
     &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-white);
@@ -10992,6 +11932,15 @@
       }
     }
   }
+  .dark\:hover\:border-grey-500 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-grey-500);
+        }
+      }
+    }
+  }
   .dark\:hover\:border-white {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &:hover {
@@ -11058,6 +12007,18 @@
       }
     }
   }
+  .dark\:hover\:bg-grey-900\/70 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-grey-900);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-grey-900) 70%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-input\/50 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &:hover {