@helpwave/hightide 0.1.25 → 0.1.26

package/dist/{css → style}/globals.css

@@ -41,30 +41,27 @@
     --color-black: #000000;
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
-    --container-xs: 20rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xs: calc(12 / 16 * 1rem);
+    --text-xs--line-height: calc(15 / 12);
+    --text-sm: calc(14 / 16 * 1rem);
+    --text-sm--line-height: calc(17 / 14);
     --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
+    --text-base--line-height: calc(19 / 16);
+    --text-lg: calc(18 / 16 * 1rem);
+    --text-lg--line-height: calc(23 / 18);
+    --text-xl: calc(20 / 16 * 1rem);
+    --text-xl--line-height: calc(26 / 20);
+    --text-2xl: calc(22 / 16 * 1rem);
+    --text-2xl--line-height: calc(28 / 22);
+    --text-3xl: calc(24 / 16 * 1rem);
+    --text-3xl--line-height: calc(30 / 24);
+    --text-4xl: calc(32 / 16 * 1rem);
+    --text-4xl--line-height: calc(40 / 32);
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
-    --leading-tight: 1.25;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -92,11 +89,8 @@
     --color-on-negative: var(--color-white);
     --color-negative-border: var(--color-negative);
     --color-negative-border-hover: var(--color-red-700);
-    --color-disabled-background: var(--color-gray-200);
-    --color-disabled-text: var(--color-gray-400);
-    --color-disabled-icon: var(--color-disabled-text);
-    --color-disabled-border: var(--color-gray-300);
-    --color-disabled-outline: var(--color-disabled-border);
+    --color-disabled: var(--color-gray-300);
+    --color-disabled-background: var(--color-gray-100);
     --color-surface: var(--color-white);
     --color-on-surface: var(--color-text-primary);
     --color-surface-variant: var(--color-gray-25);
@@ -108,6 +102,7 @@
     --color-primary: var(--color-purple-500);
     --color-on-primary: var(--color-white);
     --color-secondary: var(--color-blue-800);
+    --color-on-secondary: var(--color-white);
     --color-highlight: var(--color-blue-500);
     --color-button-outline-primary-icon: var(--color-primary);
     --color-button-outline-primary-text: var(--color-primary);
@@ -152,6 +147,8 @@
     --color-progress-indicator-background: var(--color-gray-300);
     --color-property-title-background: var(--color-gray-100);
     --color-property-title-text: var(--color-text-secondary);
+    --color-scrollbar-track: #00000033;
+    --color-scrollbar-thumb: var(--color-gray-600);
     --color-stepperbar-dot-active: var(--color-primary);
     --color-stepperbar-dot-normal: var(--color-purple-100);
     --color-stepperbar-dot-disabled: var(--color-description);
@@ -180,12 +177,15 @@
     --color-tag-red-background: #FEE0DD;
     --color-tag-red-text: #D67268;
     --color-tag-red-icon: #D67268;
-    --color-tag-blue-background: var(--color-blue-50);
-    --color-tag-blue-text: var(--color-blue-800);
-    --color-tag-blue-icon: var(--color-blue-800);
-    --color-tag-pink-background: #CEA3B8;
+    --color-tag-blue-background: #DBE2F3;
+    --color-tag-blue-text: #758ECE;
+    --color-tag-blue-icon: #758ECE;
+    --color-tag-pink-background: #F3DBE7;
     --color-tag-pink-text: #CE75A0;
     --color-tag-pink-icon: #CE75A0;
+    --color-tag-orange-background: #FEEACB;
+    --color-tag-orange-text: #EA8E00;
+    --color-tag-orange-icon: #EA8E00;
     --color-text-image-primary-background: var(--color-primary);
     --color-text-image-primary-text: var(--color-white);
     --color-text-image-secondary-background: var(--color-blue-500);
@@ -349,6 +349,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -364,12 +367,18 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-full {
     top: 100%;
   }
@@ -379,6 +388,9 @@
   .right-0\.5 {
     right: calc(var(--spacing) * 0.5);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-full {
     right: 100%;
   }
@@ -391,6 +403,12 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -400,12 +418,12 @@
   .z-10 {
     z-index: 10;
   }
+  .z-100 {
+    z-index: 100;
+  }
   .z-\[1\] {
     z-index: 1;
   }
-  .z-\[2\] {
-    z-index: 2;
-  }
   .z-\[6\] {
     z-index: 6;
   }
@@ -415,9 +433,6 @@
   .z-\[10\] {
     z-index: 10;
   }
-  .z-\[200\] {
-    z-index: 200;
-  }
   .z-\[300\] {
     z-index: 300;
   }
@@ -448,15 +463,12 @@
   .\!m-0 {
     margin: calc(var(--spacing) * 0) !important;
   }
-  .m-0 {
-    margin: calc(var(--spacing) * 0);
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
   }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .mx-3 {
-    margin-inline: calc(var(--spacing) * 3);
-  }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
@@ -481,6 +493,9 @@
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .mr-8 {
+    margin-right: calc(var(--spacing) * 8);
+  }
   .mr-\[6px\] {
     margin-right: 6px;
   }
@@ -524,11 +539,6 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 4);
   }
-  .flex-row-8 {
-    display: flex;
-    flex-direction: row;
-    column-gap: calc(var(--spacing) * 8);
-  }
   .row {
     display: flex;
     flex-direction: row;
@@ -559,6 +569,11 @@
     flex-direction: column;
     row-gap: calc(var(--spacing) * 4);
   }
+  .flex-col-6 {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 6);
+  }
   .\!block {
     display: block !important;
   }
@@ -580,6 +595,14 @@
   .table {
     display: table;
   }
+  .size-force-4 {
+    height: calc(var(--spacing) * 4);
+    min-height: calc(var(--spacing) * 4);
+    max-height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 4);
+    min-width: calc(var(--spacing) * 4);
+    max-width: calc(var(--spacing) * 4);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -621,6 +644,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -633,8 +659,11 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
-  .h-auto {
-    height: auto;
+  .h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
+    height: calc(100% - var(--scrollbar-size));
+  }
+  .h-\[var\(--scrollbar-size\)\] {
+    height: var(--scrollbar-size);
   }
   .h-full {
     height: 100%;
@@ -648,6 +677,15 @@
   .max-h-8 {
     max-height: calc(var(--spacing) * 8);
   }
+  .max-h-12 {
+    max-height: calc(var(--spacing) * 12);
+  }
+  .max-h-16 {
+    max-height: calc(var(--spacing) * 16);
+  }
+  .max-h-32 {
+    max-height: calc(var(--spacing) * 32);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -663,8 +701,8 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
-  .min-h-14 {
-    min-height: calc(var(--spacing) * 14);
+  .min-h-9\/10 {
+    min-height: calc(9/10 * 100%);
   }
   .min-h-15 {
     min-height: calc(var(--spacing) * 15);
@@ -675,12 +713,12 @@
   .min-h-\[250px\] {
     min-height: 250px;
   }
-  .min-h-\[300px\] {
-    min-height: 300px;
-  }
   .min-h-\[400px\] {
     min-height: 400px;
   }
+  .min-h-\[var\(--scrollbar-size\)\] {
+    min-height: var(--scrollbar-size);
+  }
   .\!w-fit {
     width: fit-content !important;
   }
@@ -714,6 +752,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-128 {
+    width: calc(var(--spacing) * 128);
+  }
   .w-\[20\%\] {
     width: 20%;
   }
@@ -726,39 +767,54 @@
   .w-\[400px\] {
     width: 400px;
   }
+  .w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
+    width: calc(100% - var(--scrollbar-size));
+  }
+  .w-\[var\(--scrollbar-size\)\] {
+    width: var(--scrollbar-size);
+  }
   .w-fit {
     width: fit-content;
   }
   .w-full {
     width: 100%;
   }
+  .w-min {
+    width: min-content;
+  }
   .w-screen {
     width: 100vw;
   }
   .max-w-6 {
     max-width: calc(var(--spacing) * 6);
   }
+  .max-w-8 {
+    max-width: calc(var(--spacing) * 8);
+  }
+  .max-w-12 {
+    max-width: calc(var(--spacing) * 12);
+  }
+  .max-w-16 {
+    max-width: calc(var(--spacing) * 16);
+  }
   .max-w-20 {
     max-width: calc(var(--spacing) * 20);
   }
+  .max-w-40 {
+    max-width: calc(var(--spacing) * 40);
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
+  .max-w-60 {
+    max-width: calc(var(--spacing) * 60);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
-  .max-w-96 {
-    max-width: calc(var(--spacing) * 96);
-  }
-  .max-w-128 {
-    max-width: calc(var(--spacing) * 128);
-  }
   .max-w-full {
     max-width: 100%;
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
@@ -768,15 +824,15 @@
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
-  .min-w-96 {
-    min-width: calc(var(--spacing) * 96);
-  }
   .min-w-\[40px\] {
     min-width: 40px;
   }
@@ -786,12 +842,12 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
-  .min-w-\[300px\] {
-    min-width: 300px;
-  }
   .min-w-\[320px\] {
     min-width: 320px;
   }
+  .min-w-\[var\(--scrollbar-size\)\] {
+    min-width: var(--scrollbar-size);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -818,9 +874,35 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-tooltip-fade-in {
+    animation: fade-in 0.2s ease-in-out forwards;
+    -webkit-animation: fade-in 0.2s ease-in-out forwards;
+  }
+  .animate-wave-big-left-up {
+    animation: bigLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
+  }
+  .animate-wave-big-right-down {
+    animation: bigRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
+  }
+  .animate-wave-small-left-up {
+    animation: smallLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
+  }
+  .animate-wave-small-right-down {
+    animation: smallRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
+  }
   .animate-bounce {
     animation: var(--animate-bounce);
   }
+  .animate-pop-in {
+    animation: pop-in 0.2s ease-in-out;
+  }
+  .animate-pop-out {
+    animation: pop-out 0.2s ease-in-out forwards;
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -861,9 +943,6 @@
       appearance: none;
     }
   }
-  .appearance-none {
-    appearance: none;
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -891,6 +970,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -911,12 +996,18 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-scroll {
+    overflow: scroll;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
   .\!rounded-none {
     border-radius: 0 !important;
   }
@@ -935,9 +1026,6 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
-  .rounded-none {
-    border-radius: 0;
-  }
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
@@ -960,14 +1048,18 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-0 {
+  .border-1 {
     border-style: var(--tw-border-style);
-    border-width: 0px;
+    border-width: 1px;
   }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
   .border-x-0 {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
@@ -988,22 +1080,23 @@
     --tw-border-style: none !important;
     border-style: none !important;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
   }
-  .border-disabled-border {
-    border-color: var(--color-disabled-border);
-  }
-  .border-disabled-outline {
-    border-color: var(--color-disabled-outline);
-  }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-divider) 50%, transparent);
     }
   }
+  .border-inherit {
+    border-color: inherit;
+  }
   .border-negative-border {
     border-color: var(--color-negative-border);
   }
@@ -1046,12 +1139,6 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
-  .\!bg-positive {
-    background-color: var(--color-positive) !important;
-  }
-  .\!bg-property-title-background {
-    background-color: var(--color-property-title-background) !important;
-  }
   .\!bg-red-400 {
     background-color: var(--color-red-400) !important;
   }
@@ -1073,9 +1160,6 @@
   .bg-disabled-background {
     background-color: var(--color-disabled-background);
   }
-  .bg-inherit {
-    background-color: inherit;
-  }
   .bg-input-background {
     background-color: var(--color-input-background);
   }
@@ -1100,12 +1184,6 @@
   .bg-primary {
     background-color: var(--color-primary);
   }
-  .bg-primary\/20 {
-    background-color: color-mix(in srgb, #694BB4 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
   .bg-primary\/30 {
     background-color: color-mix(in srgb, #694BB4 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1133,6 +1211,18 @@
   .bg-property-title-background {
     background-color: var(--color-property-title-background);
   }
+  .bg-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb);
+  }
+  .bg-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+  .bg-scrollbar-track\/50 {
+    background-color: color-mix(in srgb, #00000033 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-scrollbar-track) 50%, transparent);
+    }
+  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -1148,6 +1238,9 @@
   .bg-surface {
     background-color: var(--color-surface);
   }
+  .bg-surface-variant {
+    background-color: var(--color-surface-variant);
+  }
   .bg-surface-warning {
     background-color: var(--color-surface-warning);
   }
@@ -1163,6 +1256,9 @@
   .bg-tag-green-background {
     background-color: var(--color-tag-green-background);
   }
+  .bg-tag-orange-background {
+    background-color: var(--color-tag-orange-background);
+  }
   .bg-tag-pink-background {
     background-color: var(--color-tag-pink-background);
   }
@@ -1190,12 +1286,6 @@
   .bg-warning {
     background-color: var(--color-warning);
   }
-  .bg-warning\/20 {
-    background-color: color-mix(in srgb, #EA9E40 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1274,11 +1364,14 @@
   .stroke-progress-indicator-fill {
     stroke: var(--color-progress-indicator-fill);
   }
+  .stroke-3 {
+    stroke-width: 3;
+  }
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
   }
   .p-1 {
     padding: calc(var(--spacing) * 1);
@@ -1289,15 +1382,15 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .\!px-0 {
-    padding-inline: calc(var(--spacing) * 0) !important;
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1310,24 +1403,36 @@
   .px-16 {
     padding-inline: calc(var(--spacing) * 16);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
+  .py-1\.75 {
+    padding-block: calc(var(--spacing) * 1.75);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .py-6\.5 {
+    padding-block: calc(var(--spacing) * 6.5);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pt-0 {
-    padding-top: calc(var(--spacing) * 0);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
   .text-center {
     text-align: center;
   }
@@ -1337,95 +1442,258 @@
   .text-right {
     text-align: right;
   }
-  .font-space {
+  .typography-headline-lg-bold {
     font-family: var(--font-space);
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
   }
-  .text-2xl {
+  .typography-headline-md-semibold {
+    font-family: var(--font-space);
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .typography-headline-sm-bold {
+    font-family: var(--font-space);
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
   }
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+  .typography-title-lg-semibold {
+    font-family: var(--font-space);
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .text-lg {
+  .typography-title-md-semibold {
+    font-family: var(--font-space);
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+  .typography-title-sm-medium {
+    font-family: var(--font-space);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .typography-title-sm-semibold {
+    font-family: var(--font-space);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .leading-tight {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
+  .font-space {
+    font-family: var(--font-space);
   }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  .typography-body-lg-medium {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .font-normal {
+  .typography-body-lg-regular {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
-  .font-semibold {
+  .typography-body-lg-semibold {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .text-nowrap {
-    text-wrap: nowrap;
+  .typography-body-md-bold {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
   }
-  .break-words {
-    overflow-wrap: break-word;
+  .typography-body-md-light {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
   }
-  .overflow-ellipsis {
-    text-overflow: ellipsis;
+  .typography-body-md-medium {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .text-ellipsis {
-    text-overflow: ellipsis;
+  .typography-body-md-regular {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  .whitespace-nowrap {
-    white-space: nowrap;
+  .typography-button-lg-semibold {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .\!text-on-positive {
-    color: var(--color-on-positive) !important;
+  .typography-button-md-semibold {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .\!text-on-warning {
-    color: var(--color-on-warning) !important;
+  .typography-button-sm-regular {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  .\!text-red-400 {
-    color: var(--color-red-400) !important;
+  .typography-button-sm-semibold {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .\!text-surface-warning {
-    color: var(--color-surface-warning) !important;
+  .typography-caption-lg-regular {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  .\!text-transparent {
-    color: transparent !important;
+  .typography-caption-md-bold {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
   }
-  .text-black {
-    color: var(--color-black);
+  .typography-caption-md-medium {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .text-border {
-    color: var(--color-border);
+  .typography-caption-sm-medium {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
-  .text-button-solid-neutral-text {
-    color: var(--color-button-solid-neutral-text);
+  .typography-caption-sm-regular {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  .text-button-solid-primary-text {
-    color: var(--color-button-solid-primary-text);
+  .typography-label-lg-bold {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
   }
-  .text-description {
-    color: var(--color-description);
+  .typography-label-lg-regular {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  .text-disabled-text {
-    color: var(--color-disabled-text);
+  .typography-label-lg-semibold {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
   }
-  .text-inherit {
-    color: inherit;
+  .typography-label-md-bold {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .typography-label-md-medium {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .typography-label-md-regular {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
+  .overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .\!text-red-400 {
+    color: var(--color-red-400) !important;
+  }
+  .\!text-surface-warning {
+    color: var(--color-surface-warning) !important;
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-border {
+    color: var(--color-border);
+  }
+  .text-button-solid-neutral-text {
+    color: var(--color-button-solid-neutral-text);
+  }
+  .text-button-solid-primary-text {
+    color: var(--color-button-solid-primary-text);
+  }
+  .text-description {
+    color: var(--color-description);
   }
   .text-input-text {
     color: var(--color-input-text);
@@ -1445,6 +1713,9 @@
   .text-on-primary {
     color: var(--color-on-primary);
   }
+  .text-on-secondary {
+    color: var(--color-on-secondary);
+  }
   .text-on-surface {
     color: var(--color-on-surface);
   }
@@ -1490,6 +1761,12 @@
   .text-tag-green-text {
     color: var(--color-tag-green-text);
   }
+  .text-tag-orange-icon {
+    color: var(--color-tag-orange-icon);
+  }
+  .text-tag-orange-text {
+    color: var(--color-tag-orange-text);
+  }
   .text-tag-pink-icon {
     color: var(--color-tag-pink-icon);
   }
@@ -1570,6 +1847,9 @@
   .opacity-20 {
     opacity: 20%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1581,10 +1861,6 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
   }
-  .shadow-none {
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-sm {
     --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);
@@ -1608,13 +1884,10 @@
     --tw-shadow-color: rgba(0, 0, 0, 0.10);
   }
   .shadow-strong {
-    --tw-shadow-color: rgba(0, 0, 0, 0.06);
+    --tw-shadow-color: rgba(0, 0, 0, 0.05);
   }
-  .shadow-transparent {
-    --tw-shadow-color: transparent;
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
-    }
+  .ring-focus {
+    --tw-ring-color: var(--color-focus);
   }
   .\!outline-0 {
     outline-style: var(--tw-outline-style) !important;
@@ -1702,6 +1975,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .animation-delay-3000 {
+    animation-delay: calc(3000 * 1ms);
+  }
+  .shadow-hw-bottom {
+    --shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 10%));
+  }
   .shadow-r-4 {
     --shadow-right: calc(4 * 1px) 0 calc(4 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
   }
@@ -1800,11 +2079,6 @@
       background-color: var(--color-button-solid-warning-background);
     }
   }
-  .not-disabled\:bg-input-background {
-    &:not(*:disabled) {
-      background-color: var(--color-input-background);
-    }
-  }
   .not-disabled\:bg-transparent {
     &:not(*:disabled) {
       background-color: transparent;
@@ -1865,9 +2139,9 @@
       color: var(--color-button-text-primary-text);
     }
   }
-  .not-disabled\:text-input-text {
-    &:not(*:disabled) {
-      color: var(--color-input-text);
+  .not-data-disabled\:cursor-pointer {
+    &:not(*[data-disabled]) {
+      cursor: pointer;
     }
   }
   .group-hover\:border-primary {
@@ -1891,25 +2165,34 @@
       }
     }
   }
-  .group-hover\:brightness-90 {
+  .group-hover\:brightness-97 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        --tw-brightness: brightness(90%);
+        --tw-brightness: brightness(97%);
         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,);
       }
     }
   }
-  .group-hover\:brightness-97 {
-    &:is(:where(.group):hover *) {
+  .group-hover\/scrollbar\:bg-primary {
+    &:is(:where(.group\/scrollbar):hover *) {
       @media (hover: hover) {
-        --tw-brightness: brightness(97%);
-        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,);
+        background-color: var(--color-primary);
       }
     }
   }
-  .group-disabled\:text-disabled-icon {
-    &:is(:where(.group):disabled *) {
-      color: var(--color-disabled-icon);
+  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/horizontal\:h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
+    &:is(:where(.peer\/horizontal):where([data-state=visible]) ~ *) {
+      height: calc(100% - var(--scrollbar-size));
+    }
+  }
+  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/vertical\:w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
+    &:is(:where(.peer\/vertical):where([data-state=visible]) ~ *) {
+      width: calc(100% - var(--scrollbar-size));
+    }
+  }
+  .first\:mt-1 {
+    &:first-child {
+      margin-top: calc(var(--spacing) * 1);
     }
   }
   .first\:rounded-t-md {
@@ -1941,6 +2224,17 @@
       border-color: var(--color-primary);
     }
   }
+  .focus-within\:text-negative {
+    &:focus-within {
+      color: var(--color-negative);
+    }
+  }
+  .focus-within\:ring-2 {
+    &:focus-within {
+      --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);
+    }
+  }
   .hover\:border-negative-border-hover {
     &:hover {
       @media (hover: hover) {
@@ -1979,6 +2273,16 @@
       }
     }
   }
+  .hover\:bg-negative\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #DC576D 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary {
     &:hover {
       @media (hover: hover) {
@@ -1996,13 +2300,10 @@
       }
     }
   }
-  .hover\:bg-primary\/40 {
+  .hover\:bg-scrollbar-track {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #694BB4 40%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-        }
+        background-color: var(--color-scrollbar-track);
       }
     }
   }
@@ -2020,6 +2321,13 @@
       }
     }
   }
+  .hover\:text-negative {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-negative);
+      }
+    }
+  }
   .hover\:text-on-primary {
     &:hover {
       @media (hover: hover) {
@@ -2051,15 +2359,6 @@
       }
     }
   }
-  .not-disabled\:hover\:border-primary {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-primary);
-        }
-      }
-    }
-  }
   .not-disabled\:hover\:bg-button-text-hover-background {
     &:not(*:disabled) {
       &:hover {
@@ -2130,36 +2429,104 @@
       border-color: var(--color-primary);
     }
   }
+  .focus\:bg-primary\/20 {
+    &:focus {
+      background-color: color-mix(in srgb, #694BB4 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      }
+    }
+  }
   .focus\:ring-0 {
     &:focus {
       --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);
     }
   }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+  .focus-visible\:bg-negative\/20 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, #DC576D 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
+      }
     }
   }
-  .disabled\:border-disabled-border {
-    &:disabled {
-      border-color: var(--color-disabled-border);
+  .focus-visible\:ring-0 {
+    &:focus-visible {
+      --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);
     }
   }
-  .disabled\:border-disabled-outline {
-    &:disabled {
-      border-color: var(--color-disabled-outline);
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --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);
     }
   }
-  .disabled\:bg-disabled-background {
-    &:disabled {
-      background-color: var(--color-disabled-background);
+  .focus-visible\:ring-negative {
+    &:focus-visible {
+      --tw-ring-color: var(--color-negative);
+    }
+  }
+  .focus-visible\:ring-negative-border {
+    &:focus-visible {
+      --tw-ring-color: var(--color-negative-border);
+    }
+  }
+  .not-disabled\:focus-visible\:bg-button-text-negative-text\/20 {
+    &:not(*:disabled) {
+      &:focus-visible {
+        background-color: color-mix(in srgb, #DC576D 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-negative-text) 20%, transparent);
+        }
+      }
+    }
+  }
+  .not-disabled\:focus-visible\:bg-button-text-neutral-text\/20 {
+    &:not(*:disabled) {
+      &:focus-visible {
+        background-color: color-mix(in srgb, #333333 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-neutral-text) 20%, transparent);
+        }
+      }
+    }
+  }
+  .not-disabled\:focus-visible\:bg-button-text-primary-text\/20 {
+    &:not(*:disabled) {
+      &:focus-visible {
+        background-color: color-mix(in srgb, #694BB4 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-primary-text) 20%, transparent);
+        }
+      }
+    }
+  }
+  .not-disabled\:focus-visible\:ring-button-text-negative-text {
+    &:not(*:disabled) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-button-text-negative-text);
+      }
+    }
+  }
+  .not-disabled\:focus-visible\:ring-button-text-neutral-text {
+    &:not(*:disabled) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-button-text-neutral-text);
+      }
     }
   }
-  .disabled\:text-disabled-text {
+  .not-disabled\:focus-visible\:ring-button-text-primary-text {
+    &:not(*:disabled) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-button-text-primary-text);
+      }
+    }
+  }
+  .disabled\:bg-disabled-background {
     &:disabled {
-      color: var(--color-disabled-text);
+      background-color: var(--color-disabled-background);
     }
   }
   .disabled\:opacity-70 {
@@ -2167,6 +2534,131 @@
       opacity: 70%;
     }
   }
+  .data-disabled\:cursor-not-allowed {
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
+  .data-disabled\:text-disabled {
+    &[data-disabled] {
+      color: var(--color-disabled);
+    }
+  }
+  .data-highlighted\:bg-primary\/20 {
+    &[data-highlighted] {
+      background-color: color-mix(in srgb, #694BB4 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      }
+    }
+  }
+  .data-placeholder\:text-description {
+    &[data-placeholder] {
+      color: var(--color-description);
+    }
+  }
+  .data-\[display\=full\]\:top-1\/2 {
+    &[data-display="full"] {
+      top: calc(1/2 * 100%);
+    }
+  }
+  .data-\[display\=full\]\:-translate-y-1\/2 {
+    &[data-display="full"] {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[display\=full\]\:typography-body-md-regular {
+    &[data-display="full"] {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
+  .data-\[display\=small\]\:top-2 {
+    &[data-display="small"] {
+      top: calc(var(--spacing) * 2);
+    }
+  }
+  .data-\[display\=small\]\:h-force-4\.5 {
+    &[data-display="small"] {
+      height: calc(var(--spacing) * 4.5);
+      min-height: calc(var(--spacing) * 4.5);
+      max-height: calc(var(--spacing) * 4.5);
+    }
+  }
+  .data-\[display\=small\]\:overflow-y-hidden {
+    &[data-display="small"] {
+      overflow-y: hidden;
+    }
+  }
+  .data-\[display\=small\]\:typography-caption-sm-regular {
+    &[data-display="small"] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
+  .data-\[state\=visible\]\:h-\[var\(--scrollbar-size\)\] {
+    &[data-state="visible"] {
+      height: var(--scrollbar-size);
+    }
+  }
+  .data-\[state\=visible\]\:min-h-\[var\(--scrollbar-size\)\] {
+    &[data-state="visible"] {
+      min-height: var(--scrollbar-size);
+    }
+  }
+  .data-\[state\=visible\]\:w-\[var\(--scrollbar-size\)\] {
+    &[data-state="visible"] {
+      width: var(--scrollbar-size);
+    }
+  }
+  .data-\[state\=visible\]\:min-w-\[var\(--scrollbar-size\)\] {
+    &[data-state="visible"] {
+      min-width: var(--scrollbar-size);
+    }
+  }
+  .motion-safe\:animate-fade-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: fade-in 0.2s ease-in-out;
+    }
+  }
+  .motion-safe\:animate-fade-out {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: fade-out 0.2s ease-in-out;
+    }
+  }
+  .motion-safe\:animate-pop-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: pop-in 0.2s ease-in-out;
+    }
+  }
+  .motion-safe\:animate-pop-out {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: pop-out 0.2s ease-in-out forwards;
+    }
+  }
+  .motion-safe\:duration-100 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+    }
+  }
+  .motion-safe\:duration-200 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-duration: 200ms;
+      transition-duration: 200ms;
+    }
+  }
+  .motion-reduce\:duration-0 {
+    @media (prefers-reduced-motion: reduce) {
+      --tw-duration: 0ms;
+      transition-duration: 0ms;
+    }
+  }
   .desktop\:block {
     @media (width >= 64rem) {
       display: block;
@@ -2261,6 +2753,10 @@
   }
   @keyframes pop-in {
     0% {
+      opacity: 0;
+      scale: 100%;
+    }
+    1% {
       opacity: 0;
       scale: 80%;
     }
@@ -2287,12 +2783,6 @@
       left: 100%;
     }
   }
-  .animate-pop-in {
-    animation: pop-in 0.2s ease-in-out;
-  }
-  .animate-pop-out {
-    animation: pop-out 0.2s ease-in-out forwards;
-  }
   .shimmer::before {
     content: '';
     position: absolute;
@@ -2303,33 +2793,6 @@
     background: linear-gradient( 120deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%, transparent 100% );
     animation: shimmer 2s infinite;
   }
-  .animate-fade {
-    animation: fade-out 3s ease-in-out;
-  }
-  .animate-wave-big-left-up {
-    animation: bigLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
-  }
-  .animate-wave-big-right-down {
-    animation: bigRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
-  }
-  .animate-wave-small-left-up {
-    animation: smallLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
-  }
-  .animate-wave-small-right-down {
-    animation: smallRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
-  }
-  .animate-tooltip-fade-in {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
-  .animate-tooltip-fade-out {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
 }
 @layer theme, base, components, utilities;
 @layer theme;
@@ -2518,9 +2981,6 @@
     --color-positive: var(--color-green-700);
     --color-negative: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
-    --color-disabled-background: var(--color-gray-800);
-    --color-disabled-text: var(--color-gray-600);
-    --color-disabled-border: var(--color-gray-850);
     --color-surface: var(--color-gray-800);
     --color-surface-variant: var(--color-gray-700);
     --color-text-primary: var(--color-gray-100);
@@ -2539,9 +2999,6 @@
     --color-positive: var(--color-green-700);
     --color-negative: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
-    --color-disabled-background: var(--color-gray-800);
-    --color-disabled-text: var(--color-gray-600);
-    --color-disabled-border: var(--color-gray-850);
     --color-surface: var(--color-gray-800);
     --color-surface-variant: var(--color-gray-700);
     --color-text-primary: var(--color-gray-100);
@@ -2563,6 +3020,8 @@
     --color-property-title-background: var(--color-gray-750);
     --color-progress-indicator-background: var(--color-gray-700);
     --color-overlay-shadow: #00000060;
+    --color-scrollbar-track: #FFFFFF33;
+    --color-scrollbar-thumb: var(--color-gray-300);
     --color-tag-dark-background: var(--color-gray-900);
     --color-border: var(--color-gray-600);
     --color-divider: var(--color-gray-700);
@@ -2571,110 +3030,6 @@
     --color-outline-variant: var(--color-gray-600);
   }
 }
-@layer components {
-  .textstyle-title-3xl {
-    font-family: var(--font-space);
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-title-2xl {
-    font-family: var(--font-space);
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-title-xl {
-    font-family: var(--font-space);
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-title-lg {
-    font-family: var(--font-space);
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-title-md {
-    font-family: var(--font-space);
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-title-normal {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .textstyle-title-sm {
-    font-family: var(--font-space);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-accent {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-label);
-  }
-  .textstyle-description {
-    color: var(--color-description);
-  }
-  .textstyle-label-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-label);
-  }
-  .textstyle-label-md {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-label);
-  }
-  .textstyle-label-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-label);
-  }
-  .textstyle-table-name {
-    font-family: var(--font-space);
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .textstyle-table-header {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-label);
-  }
-  .textstyle-navigation-item {
-    font-family: var(--font-space);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .textstyle-form-error {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-negative);
-  }
-  .textstyle-form-description {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-description);
-  }
-}
 @layer components {
   .btn-sm {
     display: flex;
@@ -2851,27 +3206,39 @@
     cursor: pointer;
     text-wrap: nowrap;
   }
-  input {
-    display: block;
-  }
   *:disabled {
     cursor: not-allowed;
   }
   *:focus {
     --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);
-    --tw-outline-style: none;
-    outline-style: none;
+    outline-style: var(--tw-outline-style);
+    outline-width: 0px;
   }
   *:focus-visible {
     --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);
     --tw-ring-color: var(--color-focus);
   }
+  .focus-style-within:focus-within {
+    --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);
+    --tw-ring-color: var(--color-focus);
+  }
+  .focus-style-none {
+    &:focus-within {
+      --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);
+    }
+    &:focus-visible {
+      --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);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     * {
-      animation: none !important;
-      transition-property: none !important;
+      animation: none;
+      transition-property: none;
     }
   }
   table {
@@ -2967,6 +3334,49 @@
   th:last-child > .table-resize-indicator {
     right: calc(var(--spacing) * 6);
   }
+  @supports (scrollbar-color: auto) {
+    * {
+      scrollbar-color: var(--color-gray-500) transparent;
+    }
+  }
+  @supports selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: initial;
+    }
+    :root {
+      --scrollbar-width: 10px;
+      --scrollbar-padding: 1px;
+    }
+    *::-webkit-scrollbar {
+      width: var(--scrollbar-width);
+      height: var(--scrollbar-width);
+    }
+    *::-webkit-scrollbar-track {
+      border-radius: 9999px;
+      background: transparent;
+      cursor: default;
+    }
+    *::-webkit-scrollbar-thumb {
+      background-color: var(--color-gray-500);
+      border-radius: 9999px;
+      border: var(--scrollbar-padding) solid transparent;
+      background-clip: padding-box;
+      cursor: default;
+      transition: background-color 0.2s ease;
+    }
+    *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-gray-600);
+    }
+    *::-webkit-scrollbar-thumb:vertical {
+      min-height: calc(var(--scrollbar-width) * 3);
+    }
+    *::-webkit-scrollbar-thumb:horizontal {
+      min-width: calc(var(--scrollbar-width) * 3);
+    }
+    *::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -3050,10 +3460,6 @@
   inherits: false;
   initial-value: 100%;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -3250,7 +3656,6 @@
       --tw-gradient-from-position: 0%;
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
-      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;