@health-samurai/react-components 0.0.0-alpha.3 → 0.0.0-alpha.5

package/dist/bundle.css

@@ -36,12 +36,7 @@
     --color-blue-500: #2378e1;
     --color-blue-600: #045ac3;
     --color-blue-700: #014391;
-    --color-blue-900: #052040;
-    --color-blue-950: #05101e;
-    --color-violet-200: oklch(89.4% 0.057 293.283);
-    --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-pink-200: oklch(89.9% 0.061 343.231);
     --color-neutral-50: #f9f9f9;
@@ -120,6 +115,7 @@
     --color-elements-readable: var(--color-neutral-900);
     --color-cta: var(--color-brand-600);
     --color-critical-default: var(--color-red-600);
+    --color-elements-disabled: var(--color-neutral-300);
     --color-elements-assistive: var(--color-neutral-500);
     --color-surface-0: var(--color-neutral-50);
     --color-border-default: var(--color-neutral-200);
@@ -127,11 +123,11 @@
     --color-elements-readable-inv: var(--color-neutral-50);
     --color-selection: var(--color-blue-300);
     --color-ring-red: var(--color-red-200);
-    --color-ring-blue: var(--color-blue-300);
     --color-text-primary: var(--color-neutral-900);
     --color-text-secondary: var(--color-neutral-500);
     --color-text-primary_on-brand: var(--color-neutral-50);
     --color-text-tertiary: var(--color-neutral-400);
+    --color-text-tertiary_hover: var(--color-neutral-500);
     --color-text-quternary: var(--color-neutral-400);
     --color-text-disabled: var(--color-neutral-300);
     --color-text-link: var(--color-blue-500);
@@ -151,21 +147,25 @@
     --color-bg-secondary: var(--color-neutral-50);
     --color-bg-tertiary: var(--color-neutral-100);
     --color-bg-quaternary: var(--color-neutral-200);
+    --color-bg-overlay: var(--color-neutral-900);
     --color-bg-disabled: var(--color-neutral-300);
     --color-bg-brand-secondary: var(--color-brand-100);
     --color-bg-link: var(--color-blue-500);
     --color-bg-link_hover: var(--color-blue-600);
+    --color-bg-error-primary: var(--color-red-50);
     --color-bg-error-primary_inverse: var(--color-red-500);
     --color-bg-error-primary_inverse_hover: var(--color-red-700);
     --color-bg-error-secondary: var(--color-red-100);
     --color-bg-error-tertiary: var(--color-red-200);
-    --color-fg-primary: var(--color-neutral-900);
-    --color-fg-secondary: var(--color-neutral-700);
     --color-fg-tertiary: var(--color-neutral-400);
     --color-fg-disabled: var(--color-neutral-300);
-    --color-fg-success-secondary: var(--color-green-400);
+    --color-fg-link: var(--color-blue-500);
+    --color-fg-error-secondary: var(--color-red-400);
     --color-utility-green: var(--color-green-500);
     --color-utility-yellow: var(--color-yellow-600);
+    --color-utility-blue: var(--color-blue-500);
+    --color-utility-violet: var(--color-violet-500);
+    --color-utility-red: var(--color-red-500);
   }
 }
 @layer base {
@@ -434,6 +434,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -455,6 +458,24 @@
   .row-start-1 {
     grid-row-start: 1;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -479,6 +500,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .-mt-px {
+    margin-top: -1px;
+  }
   .mt-1\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
@@ -500,6 +524,12 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -582,6 +612,10 @@
     width: var(--cell-size);
     height: var(--cell-size);
   }
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -602,6 +636,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-7 {
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -625,6 +663,9 @@
   .h-\(--cell-size\) {
     height: var(--cell-size);
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -772,9 +813,15 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-13 {
+    width: calc(var(--spacing) * 13);
+  }
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
+  .w-26 {
+    width: calc(var(--spacing) * 26);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -832,6 +879,12 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[560px\] {
+    width: 560px;
+  }
+  .w-\[unset\] {
+    width: unset;
+  }
   .w-auto {
     width: auto;
   }
@@ -886,8 +939,8 @@
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
-  .min-w-26 {
-    min-width: calc(var(--spacing) * 26);
+  .min-w-13 {
+    min-width: calc(var(--spacing) * 13);
   }
   .min-w-\[8rem\] {
     min-width: 8rem;
@@ -1055,6 +1108,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .justify-items-start {
     justify-items: start;
   }
@@ -1103,6 +1159,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1140,6 +1203,11 @@
   .justify-self-end {
     justify-self: flex-end;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -1158,9 +1226,6 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
-  .rounded-\[4px\] {
-    border-radius: 4px;
-  }
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1212,6 +1277,10 @@
     border-style: var(--tw-border-style);
     border-width: 1.5px;
   }
+  .border-\[1\.6px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.6px;
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1240,22 +1309,27 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .border-\(--color-border\) {
     border-color: var(--color-border);
   }
-  .border-\[\#F4CB00\]\! {
-    border-color: #F4CB00 !important;
-  }
-  .border-blue-400\! {
-    border-color: var(--color-blue-400) !important;
-  }
   .border-border-error {
     border-color: var(--color-border-error);
   }
+  .border-border-link {
+    border-color: var(--color-border-link);
+  }
   .border-border-primary {
     border-color: var(--color-border-primary);
   }
@@ -1271,27 +1345,15 @@
       border-color: color-mix(in oklab, var(--border) 50%, transparent);
     }
   }
-  .border-fg-success-secondary\! {
-    border-color: var(--color-fg-success-secondary) !important;
-  }
   .border-input {
     border-color: var(--input);
   }
-  .border-primary {
-    border-color: var(--primary);
-  }
-  .border-red-300\! {
-    border-color: var(--color-red-300) !important;
-  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
   .border-transparent {
     border-color: transparent;
   }
-  .border-violet-400\! {
-    border-color: var(--color-violet-400) !important;
-  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -1304,21 +1366,24 @@
   .bg-\(--color-bg\) {
     background-color: var(--color-bg);
   }
-  .bg-\(--color-elements-assistive\) {
-    background-color: var(--color-elements-assistive);
-  }
   .bg-accent {
     background-color: var(--accent);
   }
   .bg-background {
     background-color: var(--background);
   }
+  .bg-bg-error-primary {
+    background-color: var(--color-bg-error-primary);
+  }
   .bg-bg-error-primary_inverse {
     background-color: var(--color-bg-error-primary_inverse);
   }
   .bg-bg-link {
     background-color: var(--color-bg-link);
   }
+  .bg-bg-overlay {
+    background-color: var(--color-bg-overlay);
+  }
   .bg-bg-primary {
     background-color: var(--color-bg-primary);
   }
@@ -1331,33 +1396,33 @@
   .bg-bg-tertiary {
     background-color: var(--color-bg-tertiary);
   }
+  .bg-bg-tertiary\/50 {
+    background-color: color-mix(in srgb, #f5f5f6 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-bg-tertiary) 50%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
-  .bg-blue-200 {
-    background-color: var(--color-blue-200);
-  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
   .bg-border {
     background-color: var(--border);
   }
-  .bg-card {
-    background-color: var(--card);
+  .bg-border-primary {
+    background-color: var(--color-border-primary);
   }
-  .bg-destructive {
-    background-color: var(--destructive);
+  .bg-border-separator {
+    background-color: var(--color-border-separator);
   }
   .bg-foreground {
     background-color: var(--foreground);
   }
-  .bg-green-200 {
-    background-color: var(--color-green-200);
-  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -1373,18 +1438,6 @@
   .bg-primary {
     background-color: var(--primary);
   }
-  .bg-primary\/20 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-    }
-  }
-  .bg-red-200 {
-    background-color: var(--color-red-200);
-  }
-  .bg-secondary {
-    background-color: var(--secondary);
-  }
   .bg-sidebar {
     background-color: var(--sidebar);
   }
@@ -1394,11 +1447,8 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-violet-200 {
-    background-color: var(--color-violet-200);
-  }
-  .bg-yellow-200 {
-    background-color: var(--color-yellow-200);
+  .bg-white {
+    background-color: var(--color-white);
   }
   .bg-linear-to-b {
     --tw-gradient-position: to bottom;
@@ -1421,9 +1471,6 @@
   .fill-current {
     fill: currentcolor;
   }
-  .fill-primary {
-    fill: var(--primary);
-  }
   .object-cover {
     object-fit: cover;
   }
@@ -1499,6 +1546,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .ps-\(--tree-padding\) {
+    padding-inline-start: var(--tree-padding);
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -1520,6 +1570,9 @@
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
+  .pr-6 {
+    padding-right: calc(var(--spacing) * 6);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1541,9 +1594,15 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pl-1\.5 {
+    padding-left: calc(var(--spacing) * 1.5);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -1647,33 +1706,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\(--color-elements-assistive\) {
-    color: var(--color-elements-assistive);
-  }
-  .text-\(--color-elements-readable-inv\) {
-    color: var(--color-elements-readable-inv);
-  }
-  .text-\[\#6D9F0F\] {
-    color: #6D9F0F;
-  }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
-  .text-blue-500 {
-    color: var(--color-blue-500);
-  }
-  .text-card-foreground {
-    color: var(--card-foreground);
-  }
-  .text-current {
-    color: currentcolor;
-  }
-  .text-destructive {
-    color: var(--destructive);
-  }
-  .text-fg-tertiary {
-    color: var(--color-fg-tertiary);
-  }
   .text-foreground {
     color: var(--foreground);
   }
@@ -1683,18 +1718,6 @@
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
-  .text-primary {
-    color: var(--primary);
-  }
-  .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
-  .text-red-600 {
-    color: var(--color-red-600);
-  }
-  .text-secondary-foreground {
-    color: var(--secondary-foreground);
-  }
   .text-sidebar-foreground {
     color: var(--sidebar-foreground);
   }
@@ -1722,30 +1745,30 @@
   .text-text-primary_on-brand {
     color: var(--color-text-primary_on-brand);
   }
-  .text-text-quternary {
-    color: var(--color-text-quternary);
-  }
   .text-text-secondary {
     color: var(--color-text-secondary);
   }
   .text-text-tertiary {
     color: var(--color-text-tertiary);
   }
+  .text-utility-blue {
+    color: var(--color-utility-blue);
+  }
   .text-utility-green {
     color: var(--color-utility-green);
   }
+  .text-utility-red {
+    color: var(--color-utility-red);
+  }
+  .text-utility-violet {
+    color: var(--color-utility-violet);
+  }
   .text-utility-yellow {
     color: var(--color-utility-yellow);
   }
-  .text-violet-600 {
-    color: var(--color-violet-600);
-  }
   .text-white {
     color: var(--color-white);
   }
-  .text-yellow-600 {
-    color: var(--color-yellow-600);
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1771,6 +1794,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --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);
@@ -1807,30 +1833,9 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-blue-200\! {
-    --tw-ring-color: var(--color-blue-200) !important;
-  }
-  .ring-green-200\! {
-    --tw-ring-color: var(--color-green-200) !important;
-  }
-  .ring-red-200\! {
-    --tw-ring-color: var(--color-red-200) !important;
-  }
-  .ring-ring\/50 {
-    --tw-ring-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
   .ring-sidebar-ring {
     --tw-ring-color: var(--sidebar-ring);
   }
-  .ring-violet-200\! {
-    --tw-ring-color: var(--color-violet-200) !important;
-  }
-  .ring-yellow-200\! {
-    --tw-ring-color: var(--color-yellow-200) !important;
-  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--background);
   }
@@ -1886,19 +1891,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-shadow {
-    transition-property: box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-none {
-    transition-property: none;
-  }
   .duration-120 {
     --tw-duration: 120ms;
     transition-duration: 120ms;
@@ -1942,11 +1939,23 @@
   .\[--cell-size\:--spacing\(8\)\] {
     --cell-size: calc(var(--spacing) * 8);
   }
+  .not-in-data-\[folder\=true\]\:ps-2\.5 {
+    &:not(:where(*[data-folder="true"]) *) {
+      padding-inline-start: calc(var(--spacing) * 2.5);
+    }
+  }
   .group-focus-within\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):focus-within *) {
       opacity: 100%;
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):hover *) {
       @media (hover: hover) {
@@ -1954,6 +1963,27 @@
       }
     }
   }
+  .group-hover\/tabs-trigger\:opacity-100 {
+    &:is(:where(.group\/tabs-trigger):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .group-hover\/tree-item-label\:flex {
+    &:is(:where(.group\/tree-item-label):hover *) {
+      @media (hover: hover) {
+        display: flex;
+      }
+    }
+  }
+  .group-hover\/tree-item-label\:opacity-100 {
+    &:is(:where(.group\/tree-item-label):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8 {
     &:is(:where(.group\/menu-item):has(*[data-sidebar="menu-action"]) *) {
       padding-right: calc(var(--spacing) * 8);
@@ -2259,6 +2289,14 @@
       background-color: var(--color-selection);
     }
   }
+  .selection\:text-text-primary {
+    & *::selection {
+      color: var(--color-text-primary);
+    }
+    &::selection {
+      color: var(--color-text-primary);
+    }
+  }
   .file\:inline-flex {
     &::file-selector-button {
       display: inline-flex;
@@ -2291,14 +2329,100 @@
       color: var(--color-text-primary);
     }
   }
-  .placeholder\:text-muted-foreground {
+  .placeholder\:text-text-quternary {
     &::placeholder {
-      color: var(--muted-foreground);
+      color: var(--color-text-quternary);
     }
   }
-  .placeholder\:text-text-quternary {
+  .placeholder\:text-text-tertiary {
     &::placeholder {
-      color: var(--color-text-quternary);
+      color: var(--color-text-tertiary);
+    }
+  }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:inset-0 {
+    &::before {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:inset-x-0 {
+    &::before {
+      content: var(--tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:-inset-y-0 {
+    &::before {
+      content: var(--tw-content);
+      inset-block: calc(var(--spacing) * -0);
+    }
+  }
+  .before\:-top-\[3px\] {
+    &::before {
+      content: var(--tw-content);
+      top: calc(3px * -1);
+    }
+  }
+  .before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:-z-10 {
+    &::before {
+      content: var(--tw-content);
+      z-index: calc(10 * -1);
+    }
+  }
+  .before\:-ms-1 {
+    &::before {
+      content: var(--tw-content);
+      margin-inline-start: calc(var(--spacing) * -1);
+    }
+  }
+  .before\:size-2 {
+    &::before {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+    }
+  }
+  .before\:rounded-full {
+    &::before {
+      content: var(--tw-content);
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .before\:border-2 {
+    &::before {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .before\:border-primary {
+    &::before {
+      content: var(--tw-content);
+      border-color: var(--primary);
+    }
+  }
+  .before\:bg-background {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--background);
+    }
+  }
+  .before\:bg-\[repeating-linear-gradient\(to_right\,transparent_0\,transparent_calc\(var\(--tree-indent\)-1px\)\,var\(--border\)_calc\(var\(--tree-indent\)-1px\)\,var\(--border\)_calc\(var\(--tree-indent\)\)\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-image: repeating-linear-gradient(to right,transparent 0,transparent calc(var(--tree-indent) - 1px),var(--border) calc(var(--tree-indent) - 1px),var(--border) calc(var(--tree-indent)));
     }
   }
   .after\:absolute {
@@ -2364,6 +2488,11 @@
       border-left-width: 1px;
     }
   }
+  .last\:mb-0 {
+    &:last-child {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+  }
   .last\:rounded-r-md {
     &:last-child {
       border-top-right-radius: calc(var(--radius) - 2px);
@@ -2376,13 +2505,6 @@
       border-bottom-width: 0px;
     }
   }
-  .hover\:cursor-default {
-    &:hover {
-      @media (hover: hover) {
-        cursor: default;
-      }
-    }
-  }
   .hover\:cursor-not-allowed {
     &:hover {
       @media (hover: hover) {
@@ -2390,20 +2512,6 @@
       }
     }
   }
-  .hover\:border-\[\#F4CB00\] {
-    &:hover {
-      @media (hover: hover) {
-        border-color: #F4CB00;
-      }
-    }
-  }
-  .hover\:border-blue-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-blue-400);
-      }
-    }
-  }
   .hover\:border-border-error_inverse {
     &:hover {
       @media (hover: hover) {
@@ -2418,27 +2526,6 @@
       }
     }
   }
-  .hover\:border-fg-success-secondary {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-fg-success-secondary);
-      }
-    }
-  }
-  .hover\:border-red-300 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-red-300);
-      }
-    }
-  }
-  .hover\:border-violet-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-violet-400);
-      }
-    }
-  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -2446,16 +2533,6 @@
       }
     }
   }
-  .hover\:bg-accent\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-bg-error-primary_inverse_hover {
     &:hover {
       @media (hover: hover) {
@@ -2494,19 +2571,19 @@
       }
     }
   }
-  .hover\:bg-muted {
+  .hover\:bg-bg-tertiary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--muted);
+        background-color: var(--color-bg-tertiary);
       }
     }
   }
-  .hover\:bg-muted\/50 {
+  .hover\:bg-bg-tertiary\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--muted);
+        background-color: color-mix(in srgb, #f5f5f6 50%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+          background-color: color-mix(in oklab, var(--color-bg-tertiary) 50%, transparent);
         }
       }
     }
@@ -2525,27 +2602,6 @@
       }
     }
   }
-  .hover\:text-fg-primary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-fg-primary);
-      }
-    }
-  }
-  .hover\:text-fg-secondary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-fg-secondary);
-      }
-    }
-  }
-  .hover\:text-muted-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--muted-foreground);
-      }
-    }
-  }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -2574,10 +2630,10 @@
       }
     }
   }
-  .hover\:text-text-tertiary {
+  .hover\:text-text-tertiary_hover {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-tertiary);
+        color: var(--color-text-tertiary_hover);
       }
     }
   }
@@ -2611,6 +2667,16 @@
       }
     }
   }
+  .hover\:ring-utility-blue\/70 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+        }
+      }
+    }
+  }
   .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar {
     &:hover {
       @media (hover: hover) {
@@ -2635,6 +2701,11 @@
       z-index: 10;
     }
   }
+  .focus\:z-20 {
+    &:focus {
+      z-index: 20;
+    }
+  }
   .focus\:bg-\(--color-surface-1\) {
     &:focus {
       background-color: var(--color-surface-1);
@@ -2677,6 +2748,14 @@
       --tw-ring-color: var(--ring);
     }
   }
+  .focus\:ring-utility-blue\/70 {
+    &:focus {
+      --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+      }
+    }
+  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -2714,9 +2793,9 @@
       border-color: var(--color-border-link);
     }
   }
-  .focus-visible\:border-ring {
+  .focus-visible\:bg-bg-tertiary {
     &:focus-visible {
-      border-color: var(--ring);
+      background-color: var(--color-bg-tertiary);
     }
   }
   .focus-visible\:ring-1 {
@@ -2743,17 +2822,9 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-visible\:ring-border-link {
+  .focus-visible\:ring-bg-link {
     &:focus-visible {
-      --tw-ring-color: var(--color-border-link);
-    }
-  }
-  .focus-visible\:ring-destructive\/20 {
-    &:focus-visible {
-      --tw-ring-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-      }
+      --tw-ring-color: var(--color-bg-link);
     }
   }
   .focus-visible\:ring-ring {
@@ -2761,11 +2832,6 @@
       --tw-ring-color: var(--ring);
     }
   }
-  .focus-visible\:ring-ring-blue {
-    &:focus-visible {
-      --tw-ring-color: var(--color-ring-blue);
-    }
-  }
   .focus-visible\:ring-ring-red {
     &:focus-visible {
       --tw-ring-color: var(--color-ring-red);
@@ -2779,6 +2845,22 @@
       }
     }
   }
+  .focus-visible\:ring-utility-blue\/70 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-utility-red\/70 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, #d7270f 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-utility-red) 70%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-offset-0 {
     &:focus-visible {
       --tw-ring-offset-width: 0px;
@@ -2791,6 +2873,12 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --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);
+    }
+  }
   .focus-visible\:outline-hidden {
     &:focus-visible {
       --tw-outline-style: none;
@@ -2807,17 +2895,20 @@
       outline-width: 1px;
     }
   }
-  .focus-visible\:outline-ring {
-    &:focus-visible {
-      outline-color: var(--ring);
-    }
-  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
+  .active\:scale-90 {
+    &:active {
+      --tw-scale-x: 90%;
+      --tw-scale-y: 90%;
+      --tw-scale-z: 90%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .active\:bg-bg-error-primary_inverse {
     &:active {
       background-color: var(--color-bg-error-primary_inverse);
@@ -2858,11 +2949,27 @@
       color: var(--sidebar-accent-foreground);
     }
   }
+  .active\:text-text-error-primary {
+    &:active {
+      color: var(--color-text-error-primary);
+    }
+  }
+  .active\:text-text-primary {
+    &:active {
+      color: var(--color-text-primary);
+    }
+  }
   .active\:text-text-tertiary {
     &:active {
       color: var(--color-text-tertiary);
     }
   }
+  .active\:duration-75 {
+    &:active {
+      --tw-duration: 75ms;
+      transition-duration: 75ms;
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2883,6 +2990,11 @@
       border-color: var(--color-border-primary);
     }
   }
+  .disabled\:border-border-secondary {
+    &:disabled {
+      border-color: var(--color-border-secondary);
+    }
+  }
   .disabled\:bg-bg-disabled {
     &:disabled {
       background-color: var(--color-bg-disabled);
@@ -2893,9 +3005,14 @@
       background-color: var(--color-bg-secondary);
     }
   }
-  .disabled\:text-fg-disabled {
+  .disabled\:bg-transparent {
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+  .disabled\:bg-white {
     &:disabled {
-      color: var(--color-fg-disabled);
+      background-color: var(--color-white);
     }
   }
   .disabled\:text-text-disabled {
@@ -2924,6 +3041,68 @@
       }
     }
   }
+  .disabled\:active\:scale-100 {
+    &:disabled {
+      &:active {
+        --tw-scale-x: 100%;
+        --tw-scale-y: 100%;
+        --tw-scale-z: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .in-focus-visible\:ring-\[3px\] {
+    :where(*:focus-visible) & {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .in-focus-visible\:ring-ring\/50 {
+    :where(*:focus-visible) & {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
+  .in-aria-\[expanded\=false\]\:-rotate-90 {
+    :where(*[aria-expanded="false"]) & {
+      rotate: calc(90deg * -1);
+    }
+  }
+  .in-data-\[drag-target\=true\]\:bg-accent {
+    :where(*[data-drag-target="true"]) & {
+      background-color: var(--accent);
+    }
+  }
+  .in-data-\[search-match\=true\]\:bg-blue-400\/20\! {
+    :where(*[data-search-match="true"]) & {
+      background-color: color-mix(in srgb, #a7c9f3 20%, transparent) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-400) 20%, transparent) !important;
+      }
+    }
+  }
+  .in-data-\[selected\=true\]\:border-l-border-brand {
+    :where(*[data-selected="true"]) & {
+      border-left-color: var(--color-border-brand);
+    }
+  }
+  .in-data-\[selected\=true\]\:bg-bg-quaternary\! {
+    :where(*[data-selected="true"]) & {
+      background-color: var(--color-bg-quaternary) !important;
+    }
+  }
+  .in-data-\[selected\=true\]\:text-text-primary {
+    :where(*[data-selected="true"]) & {
+      color: var(--color-text-primary);
+    }
+  }
+  .in-data-\[selected\=true\]\:opacity-100 {
+    :where(*[data-selected="true"]) & {
+      opacity: 100%;
+    }
+  }
   .in-data-\[side\=left\]\:cursor-w-resize {
     :where(*[data-side="left"]) & {
       cursor: w-resize;
@@ -2968,16 +3147,6 @@
       background-color: var(--sidebar);
     }
   }
-  .has-\[\[aria-checked\=true\]\]\:border-blue-600 {
-    &:has(*:is([aria-checked=true])) {
-      border-color: var(--color-blue-600);
-    }
-  }
-  .has-\[\[aria-checked\=true\]\]\:bg-blue-50 {
-    &:has(*:is([aria-checked=true])) {
-      background-color: var(--color-blue-50);
-    }
-  }
   .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\] {
     &:has(>svg) {
       grid-template-columns: calc(var(--spacing) * 4) 1fr;
@@ -2998,6 +3167,11 @@
       opacity: 50%;
     }
   }
+  .aria-invalid\:border-border-error {
+    &[aria-invalid="true"] {
+      border-color: var(--color-border-error);
+    }
+  }
   .aria-invalid\:border-destructive {
     &[aria-invalid="true"] {
       border-color: var(--destructive);
@@ -3008,16 +3182,22 @@
       color: var(--color-text-error-primary);
     }
   }
+  .aria-invalid\:ring-2 {
+    &[aria-invalid="true"] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .aria-invalid\:ring-destructive {
     &[aria-invalid="true"] {
       --tw-ring-color: var(--destructive);
     }
   }
-  .aria-invalid\:ring-destructive\/20 {
+  .aria-invalid\:ring-utility-red\/70 {
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: color-mix(in srgb, #d7270f 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--color-utility-red) 70%, transparent);
       }
     }
   }
@@ -3136,9 +3316,9 @@
       opacity: 50%;
     }
   }
-  .data-\[error\=true\]\:text-destructive {
+  .data-\[error\=true\]\:text-text-error-primary {
     &[data-error="true"] {
-      color: var(--destructive);
+      color: var(--color-text-error-primary);
     }
   }
   .data-\[inset\]\:pl-8 {
@@ -3303,9 +3483,9 @@
       }
     }
   }
-  .data-\[placeholder\]\:text-text-quternary {
+  .data-\[placeholder\]\:text-text-tertiary {
     &[data-placeholder] {
-      color: var(--color-text-quternary);
+      color: var(--color-text-tertiary);
     }
   }
   .data-\[range-end\=true\]\:rounded-md {
@@ -3380,16 +3560,6 @@
       border-radius: 0;
     }
   }
-  .data-\[selected\=true\]\:bg-\(--color-surface-1\) {
-    &[data-selected="true"] {
-      background-color: var(--color-surface-1);
-    }
-  }
-  .data-\[selected\=true\]\:text-\(--color-elements-readable\) {
-    &[data-selected="true"] {
-      color: var(--color-elements-readable);
-    }
-  }
   .data-\[side\=bottom\]\:translate-y-1 {
     &[data-side="bottom"] {
       --tw-translate-y: calc(var(--spacing) * 1);
@@ -3434,13 +3604,10 @@
       --tw-enter-translate-y: calc(2*var(--spacing));
     }
   }
-  .\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
+  .\*\:data-\[slot\=alert-description\]\:text-fg-error-secondary {
     :is(& > *) {
       &[data-slot="alert-description"] {
-        color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--destructive) 90%, transparent);
-        }
+        color: var(--color-fg-error-secondary);
       }
     }
   }
@@ -3544,6 +3711,13 @@
       }
     }
   }
+  .\*\*\:data-\[slot\=tabs-trigger\]\:w-60 {
+    :is(& *) {
+      &[data-slot="tabs-trigger"] {
+        width: calc(var(--spacing) * 60);
+      }
+    }
+  }
   .\*\*\:data-\[slot\=tabs-trigger\]\:max-w-80 {
     :is(& *) {
       &[data-slot="tabs-trigger"] {
@@ -3574,29 +3748,29 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=checked\]\:border-blue-600 {
+  .data-\[state\=checked\]\:border-bg-link {
     &[data-state="checked"] {
-      border-color: var(--color-blue-600);
+      border-color: var(--color-bg-link);
     }
   }
-  .data-\[state\=checked\]\:border-primary {
+  .data-\[state\=checked\]\:border-border-link {
     &[data-state="checked"] {
-      border-color: var(--primary);
+      border-color: var(--color-border-link);
     }
   }
-  .data-\[state\=checked\]\:bg-blue-600 {
+  .data-\[state\=checked\]\:bg-bg-link {
     &[data-state="checked"] {
-      background-color: var(--color-blue-600);
+      background-color: var(--color-bg-link);
     }
   }
-  .data-\[state\=checked\]\:bg-primary {
+  .data-\[state\=checked\]\:bg-bg-tertiary {
     &[data-state="checked"] {
-      background-color: var(--primary);
+      background-color: var(--color-bg-tertiary);
     }
   }
-  .data-\[state\=checked\]\:text-primary-foreground {
+  .data-\[state\=checked\]\:text-text-primary {
     &[data-state="checked"] {
-      color: var(--primary-foreground);
+      color: var(--color-text-primary);
     }
   }
   .data-\[state\=checked\]\:text-white {
@@ -3604,6 +3778,59 @@
       color: var(--color-white);
     }
   }
+  .group-hover\:data-\[state\=checked\]\:bg-transparent {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        &[data-state="checked"] {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  .hover\:data-\[state\=checked\]\:bg-bg-link_hover {
+    &:hover {
+      @media (hover: hover) {
+        &[data-state="checked"] {
+          background-color: var(--color-bg-link_hover);
+        }
+      }
+    }
+  }
+  .disabled\:data-\[state\=checked\]\:border-border-secondary {
+    &:disabled {
+      &[data-state="checked"] {
+        border-color: var(--color-border-secondary);
+      }
+    }
+  }
+  .disabled\:data-\[state\=checked\]\:border-fg-tertiary {
+    &:disabled {
+      &[data-state="checked"] {
+        border-color: var(--color-fg-tertiary);
+      }
+    }
+  }
+  .disabled\:data-\[state\=checked\]\:bg-bg-disabled {
+    &:disabled {
+      &[data-state="checked"] {
+        background-color: var(--color-bg-disabled);
+      }
+    }
+  }
+  .disabled\:data-\[state\=checked\]\:bg-border-secondary {
+    &:disabled {
+      &[data-state="checked"] {
+        background-color: var(--color-border-secondary);
+      }
+    }
+  }
+  .disabled\:data-\[state\=checked\]\:bg-fg-tertiary {
+    &:disabled {
+      &[data-state="checked"] {
+        background-color: var(--color-fg-tertiary);
+      }
+    }
+  }
   .data-\[state\=closed\]\:animate-accordion-up {
     &[data-state="closed"] {
       animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
@@ -3713,14 +3940,43 @@
       }
     }
   }
-  .data-\[state\=on\]\:bg-accent {
+  .data-\[state\=indeterminate\]\:border-fg-link {
+    &[data-state="indeterminate"] {
+      border-color: var(--color-fg-link);
+    }
+  }
+  .data-\[state\=indeterminate\]\:bg-fg-link {
+    &[data-state="indeterminate"] {
+      background-color: var(--color-fg-link);
+    }
+  }
+  .data-\[state\=indeterminate\]\:text-white {
+    &[data-state="indeterminate"] {
+      color: var(--color-white);
+    }
+  }
+  .disabled\:data-\[state\=indeterminate\]\:border-fg-tertiary {
+    &:disabled {
+      &[data-state="indeterminate"] {
+        border-color: var(--color-fg-tertiary);
+      }
+    }
+  }
+  .disabled\:data-\[state\=indeterminate\]\:bg-fg-tertiary {
+    &:disabled {
+      &[data-state="indeterminate"] {
+        background-color: var(--color-fg-tertiary);
+      }
+    }
+  }
+  .data-\[state\=on\]\:bg-bg-secondary {
     &[data-state="on"] {
-      background-color: var(--accent);
+      background-color: var(--color-bg-secondary);
     }
   }
-  .data-\[state\=on\]\:text-accent-foreground {
+  .data-\[state\=on\]\:text-text-primary {
     &[data-state="on"] {
-      color: var(--accent-foreground);
+      color: var(--color-text-primary);
     }
   }
   .data-\[state\=open\]\:animate-accordion-down {
@@ -3751,6 +4007,11 @@
       }
     }
   }
+  .data-\[state\=open\]\:bg-bg-secondary {
+    &[data-state="open"] {
+      background-color: var(--color-bg-secondary);
+    }
+  }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state="open"] {
       background-color: var(--secondary);
@@ -3761,9 +4022,9 @@
       color: var(--accent-foreground);
     }
   }
-  .data-\[state\=open\]\:text-muted-foreground {
+  .data-\[state\=open\]\:text-text-secondary {
     &[data-state="open"] {
-      color: var(--muted-foreground);
+      color: var(--color-text-secondary);
     }
   }
   .data-\[state\=open\]\:opacity-100 {
@@ -3771,17 +4032,6 @@
       opacity: 100%;
     }
   }
-  .data-\[state\=open\]\:ring-2 {
-    &[data-state="open"] {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .data-\[state\=open\]\:ring-border-link {
-    &[data-state="open"] {
-      --tw-ring-color: var(--color-border-link);
-    }
-  }
   .data-\[state\=open\]\:duration-500 {
     &[data-state="open"] {
       --tw-duration: 500ms;
@@ -3858,20 +4108,20 @@
       }
     }
   }
-  .data-\[state\=open\]\:hover\:bg-sidebar-accent {
+  .data-\[state\=open\]\:hover\:bg-bg-secondary {
     &[data-state="open"] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--sidebar-accent);
+          background-color: var(--color-bg-secondary);
         }
       }
     }
   }
-  .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground {
+  .data-\[state\=open\]\:hover\:text-text-primary {
     &[data-state="open"] {
       &:hover {
         @media (hover: hover) {
-          color: var(--sidebar-accent-foreground);
+          color: var(--color-text-primary);
         }
       }
     }
@@ -3883,9 +4133,9 @@
       }
     }
   }
-  .data-\[state\=selected\]\:bg-muted {
+  .data-\[state\=selected\]\:bg-bg-tertiary {
     &[data-state="selected"] {
-      background-color: var(--muted);
+      background-color: var(--color-bg-tertiary);
     }
   }
   .data-\[state\=unchecked\]\:translate-x-0 {
@@ -3894,9 +4144,25 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=unchecked\]\:bg-input {
+  .data-\[state\=unchecked\]\:bg-bg-quaternary {
     &[data-state="unchecked"] {
-      background-color: var(--input);
+      background-color: var(--color-bg-quaternary);
+    }
+  }
+  .hover\:data-\[state\=unchecked\]\:bg-bg-tertiary {
+    &:hover {
+      @media (hover: hover) {
+        &[data-state="unchecked"] {
+          background-color: var(--color-bg-tertiary);
+        }
+      }
+    }
+  }
+  .disabled\:data-\[state\=unchecked\]\:bg-bg-disabled {
+    &:disabled {
+      &[data-state="unchecked"] {
+        background-color: var(--color-bg-disabled);
+      }
     }
   }
   .data-\[state\=visible\]\:animate-in {
@@ -4002,6 +4268,11 @@
       border-top-width: 1px;
     }
   }
+  .data-\[vaul-drawer-direction\=bottom\]\:border-border-primary {
+    &[data-vaul-drawer-direction="bottom"] {
+      border-color: var(--color-border-primary);
+    }
+  }
   .data-\[vaul-drawer-direction\=left\]\:inset-y-0 {
     &[data-vaul-drawer-direction="left"] {
       inset-block: calc(var(--spacing) * 0);
@@ -4023,6 +4294,11 @@
       border-right-width: 1px;
     }
   }
+  .data-\[vaul-drawer-direction\=left\]\:border-border-primary {
+    &[data-vaul-drawer-direction="left"] {
+      border-color: var(--color-border-primary);
+    }
+  }
   .data-\[vaul-drawer-direction\=right\]\:inset-y-0 {
     &[data-vaul-drawer-direction="right"] {
       inset-block: calc(var(--spacing) * 0);
@@ -4044,6 +4320,11 @@
       border-left-width: 1px;
     }
   }
+  .data-\[vaul-drawer-direction\=right\]\:border-border-primary {
+    &[data-vaul-drawer-direction="right"] {
+      border-color: var(--color-border-primary);
+    }
+  }
   .data-\[vaul-drawer-direction\=top\]\:inset-x-0 {
     &[data-vaul-drawer-direction="top"] {
       inset-inline: calc(var(--spacing) * 0);
@@ -4076,6 +4357,11 @@
       border-bottom-width: 1px;
     }
   }
+  .data-\[vaul-drawer-direction\=top\]\:border-border-primary {
+    &[data-vaul-drawer-direction="top"] {
+      border-color: var(--color-border-primary);
+    }
+  }
   .sm\:block {
     @media (width >= 40rem) {
       display: block;
@@ -4287,14 +4573,6 @@
       background-color: var(--color-blue-600);
     }
   }
-  .dark\:bg-destructive\/60 {
-    &:is(.dark *) {
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
-      }
-    }
-  }
   .dark\:bg-input\/30 {
     &:is(.dark *) {
       background-color: var(--input);
@@ -4303,11 +4581,6 @@
       }
     }
   }
-  .dark\:text-muted-foreground {
-    &:is(.dark *) {
-      color: var(--muted-foreground);
-    }
-  }
   .dark\:brightness-\[0\.2\] {
     &:is(.dark *) {
       --tw-brightness: brightness(0.2);
@@ -4329,40 +4602,6 @@
       }
     }
   }
-  .dark\:focus-visible\:ring-destructive\/40 {
-    &:is(.dark *) {
-      &:focus-visible {
-        --tw-ring-color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-        }
-      }
-    }
-  }
-  .dark\:has-\[\[aria-checked\=true\]\]\:border-blue-900 {
-    &:is(.dark *) {
-      &:has(*:is([aria-checked=true])) {
-        border-color: var(--color-blue-900);
-      }
-    }
-  }
-  .dark\:has-\[\[aria-checked\=true\]\]\:bg-blue-950 {
-    &:is(.dark *) {
-      &:has(*:is([aria-checked=true])) {
-        background-color: var(--color-blue-950);
-      }
-    }
-  }
-  .dark\:aria-invalid\:ring-destructive\/40 {
-    &:is(.dark *) {
-      &[aria-invalid="true"] {
-        --tw-ring-color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-        }
-      }
-    }
-  }
   .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40 {
     &:is(.dark *) {
       &[data-active="true"] {
@@ -4375,58 +4614,6 @@
       }
     }
   }
-  .dark\:data-\[state\=active\]\:border-input {
-    &:is(.dark *) {
-      &[data-state="active"] {
-        border-color: var(--input);
-      }
-    }
-  }
-  .dark\:data-\[state\=checked\]\:border-blue-700 {
-    &:is(.dark *) {
-      &[data-state="checked"] {
-        border-color: var(--color-blue-700);
-      }
-    }
-  }
-  .dark\:data-\[state\=checked\]\:bg-blue-700 {
-    &:is(.dark *) {
-      &[data-state="checked"] {
-        background-color: var(--color-blue-700);
-      }
-    }
-  }
-  .dark\:data-\[state\=checked\]\:bg-primary {
-    &:is(.dark *) {
-      &[data-state="checked"] {
-        background-color: var(--primary);
-      }
-    }
-  }
-  .dark\:data-\[state\=checked\]\:bg-primary-foreground {
-    &:is(.dark *) {
-      &[data-state="checked"] {
-        background-color: var(--primary-foreground);
-      }
-    }
-  }
-  .dark\:data-\[state\=unchecked\]\:bg-foreground {
-    &:is(.dark *) {
-      &[data-state="unchecked"] {
-        background-color: var(--foreground);
-      }
-    }
-  }
-  .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
-    &:is(.dark *) {
-      &[data-state="unchecked"] {
-        background-color: var(--input);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--input) 80%, transparent);
-        }
-      }
-    }
-  }
   .dark\:data-\[variant\=destructive\]\:focus\:bg-bg-error-tertiary {
     &:is(.dark *) {
       &[data-variant="destructive"] {
@@ -4563,6 +4750,11 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+  .\[\&_\[cmdk-input-wrapper\]\]\:h-12 {
+    & [cmdk-input-wrapper] {
+      height: calc(var(--spacing) * 12);
+    }
+  }
   .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 {
     & [cmdk-input-wrapper] svg {
       height: calc(var(--spacing) * 5);
@@ -4598,6 +4790,11 @@
       width: calc(var(--spacing) * 5);
     }
   }
+  .\[\&_\[data-radix-select-viewport\]\]\:p-0 {
+    & [data-radix-select-viewport] {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
   .\[\&_p\]\:leading-relaxed {
     & p {
       --tw-leading: var(--leading-relaxed);
@@ -4614,34 +4811,34 @@
       flex-shrink: 0;
     }
   }
-  .\[\&_svg\]\:text-\[\#6D9F0F\]\! {
+  .\[\&_svg\]\:text-text-link {
     & svg {
-      color: #6D9F0F !important;
+      color: var(--color-text-link);
     }
   }
-  .\[\&_svg\]\:text-blue-500\! {
+  .\[\&_svg\]\:text-utility-blue {
     & svg {
-      color: var(--color-blue-500) !important;
+      color: var(--color-utility-blue);
     }
   }
-  .\[\&_svg\]\:text-red-600\! {
+  .\[\&_svg\]\:text-utility-green {
     & svg {
-      color: var(--color-red-600) !important;
+      color: var(--color-utility-green);
     }
   }
-  .\[\&_svg\]\:text-text-link {
+  .\[\&_svg\]\:text-utility-red {
     & svg {
-      color: var(--color-text-link);
+      color: var(--color-utility-red);
     }
   }
-  .\[\&_svg\]\:text-violet-600 {
+  .\[\&_svg\]\:text-utility-violet {
     & svg {
-      color: var(--color-violet-600);
+      color: var(--color-utility-violet);
     }
   }
-  .\[\&_svg\]\:text-yellow-600\! {
+  .\[\&_svg\]\:text-utility-yellow {
     & svg {
-      color: var(--color-yellow-600) !important;
+      color: var(--color-utility-yellow);
     }
   }
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
@@ -4655,9 +4852,9 @@
       color: var(--muted-foreground);
     }
   }
-  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-text-quternary {
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-text-tertiary {
     & svg:not([class*='text-']) {
-      color: var(--color-text-quternary);
+      color: var(--color-text-tertiary);
     }
   }
   .\[\&_tr\]\:border-b {
@@ -4666,6 +4863,11 @@
       border-bottom-width: 1px;
     }
   }
+  .\[\&_tr\]\:border-border-primary {
+    & tr {
+      border-color: var(--color-border-primary);
+    }
+  }
   .\[\&_tr\:last-child\]\:border-0 {
     & tr:last-child {
       border-style: var(--tw-border-style);
@@ -4936,56 +5138,47 @@
       background-color: transparent;
     }
   }
-  .\[a\&\]\:hover\:bg-accent {
+  .\[a\&\]\:hover\:bg-bg-error-primary_inverse_hover {
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--accent);
+          background-color: var(--color-bg-error-primary_inverse_hover);
         }
       }
     }
   }
-  .\[a\&\]\:hover\:bg-destructive\/90 {
+  .\[a\&\]\:hover\:bg-bg-link_hover {
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--destructive);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-          }
+          background-color: var(--color-bg-link_hover);
         }
       }
     }
   }
-  .\[a\&\]\:hover\:bg-primary\/90 {
+  .\[a\&\]\:hover\:bg-bg-secondary {
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--primary);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-          }
+          background-color: var(--color-bg-secondary);
         }
       }
     }
   }
-  .\[a\&\]\:hover\:bg-secondary\/90 {
+  .\[a\&\]\:hover\:bg-bg-tertiary {
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--secondary);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
-          }
+          background-color: var(--color-bg-tertiary);
         }
       }
     }
   }
-  .\[a\&\]\:hover\:text-accent-foreground {
+  .\[a\&\]\:hover\:text-text-primary {
     a& {
       &:hover {
         @media (hover: hover) {
-          color: var(--accent-foreground);
+          color: var(--color-text-primary);
         }
       }
     }
@@ -5229,6 +5422,36 @@ body {
   line-height: var(--font-leading-none);
   letter-spacing: var(--font-tracking-tight);
 }
+.lucide {
+  stroke-width: 1.5px;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+body ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body ::-webkit-scrollbar-thumb {
+  background-color: var(--color-elements-disabled);
+  border-radius: 4px;
+}
+body ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-elements-assistive);
+}
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    scrollbar-color: var(--color-elements-disabled) rgba(0, 0, 0, 0);
+    scrollbar-width: thin;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -5436,6 +5659,21 @@ body {
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -5584,6 +5822,9 @@ body {
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;