@rovula/ui 0.1.28 → 0.1.29

package/dist/src/theme/global.css

@@ -77,64 +77,64 @@
   --state-primary-text-pressed-skyller: #1e40af;
   --state-secondary-default-xspector: #ececec;
   --state-secondary-default-report-xspector-light-mode: #9b8f00;
-  --state-secondary-default-skyller: #60a5fa;
+  --state-secondary-default-skyller: #171717;
   --state-secondary-hover-xspector: #fafafa;
   --state-secondary-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-hover-skyller: #90c0fc;
+  --state-secondary-hover-skyller: #424242;
   --state-secondary-stroke-xspector: rgba(236 236 236 / 0.48);
   --state-secondary-stroke-report-xspector-light-mode: rgba(155 143 0 / 0.64);
   --state-secondary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-secondary-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --state-secondary-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --state-secondary-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --state-secondary-hover-bg-skyller: rgba(66 66 66 / 0.08);
   --state-secondary-pressed-xspector: #bbbbbb;
   --state-secondary-pressed-report-xspector-light-mode: #6f6700;
-  --state-secondary-pressed-skyller: #1e40af;
+  --state-secondary-pressed-skyller: #000000;
   --state-secondary-active-xspector: #fafafa;
   --state-secondary-active-report-xspector-light-mode: #b1a400;
-  --state-secondary-active-skyller: #1e3a8a;
+  --state-secondary-active-skyller: #000000;
   --state-secondary-text-solid-xspector: #212b36;
   --state-secondary-text-solid-report-xspector-light-mode: #ffffff;
   --state-secondary-text-solid-skyller: #ffffff;
   --state-secondary-text-outline-xspector: #ececec;
   --state-secondary-text-outline-report-xspector-light-mode: #9b8f00;
-  --state-secondary-text-outline-skyller: #60a5fa;
+  --state-secondary-text-outline-skyller: #171717;
   --state-secondary-text-hover-xspector: #fafafa;
   --state-secondary-text-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-text-hover-skyller: #90c0fc;
+  --state-secondary-text-hover-skyller: #424242;
   --state-secondary-text-pressed-xspector: #c5c5c5;
   --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
-  --state-secondary-text-pressed-skyller: #1e40af;
+  --state-secondary-text-pressed-skyller: #000000;
   --state-tertiary-default-xspector: #8aa2ab;
   --state-tertiary-default-report-xspector-light-mode: #4f4f4f;
-  --state-tertiary-default-skyller: #0891b2;
+  --state-tertiary-default-skyller: #60a5fa;
   --state-tertiary-hover-xspector: #adcad6;
   --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-hover-skyller: #52b2c9;
+  --state-tertiary-hover-skyller: #90c0fc;
   --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
   --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
-  --state-tertiary-stroke-skyller: rgba(8 145 178 / 0.48);
+  --state-tertiary-stroke-skyller: rgba(189 189 189 / 0.48);
   --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
   --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
-  --state-tertiary-hover-bg-skyller: rgba(82 178 201 / 0.08);
+  --state-tertiary-hover-bg-skyller: rgba(144 192 252 / 0.08);
   --state-tertiary-pressed-xspector: #57656b;
   --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiary-pressed-skyller: #06667d;
+  --state-tertiary-pressed-skyller: #1e40af;
   --state-tertiary-active-xspector: #adcad6;
   --state-tertiary-active-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-active-skyller: #044959;
+  --state-tertiary-active-skyller: #1e3a8a;
   --state-tertiary-text-solid-xspector: #212b36;
   --state-tertiary-text-solid-report-xspector-light-mode: #ffffff;
   --state-tertiary-text-solid-skyller: #ffffff;
   --state-tertiary-text-outline-xspector: #8aa2ab;
   --state-tertiary-text-outline-report-xspector-light-mode: #4f4f4f;
-  --state-tertiary-text-outline-skyller: #0891b2;
+  --state-tertiary-text-outline-skyller: #60a5fa;
   --state-tertiary-text-hover-xspector: #adcad6;
   --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-text-hover-skyller: #52b2c9;
+  --state-tertiary-text-hover-skyller: #90c0fc;
   --state-tertiary-text-pressed-xspector: #57656b;
   --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiary-text-pressed-skyller: #06667d;
+  --state-tertiary-text-pressed-skyller: #1e40af;
   --state-info-default-xspector: #1b7df5;
   --state-info-default-report-xspector-light-mode: #1b7df5;
   --state-info-default-skyller: #2563eb;
@@ -869,13 +869,13 @@
   --input-error-skyller: #dc2626;
   --function-default-solid-xspector: #ececec;
   --function-default-solid-report-xspector-light-mode: #1e3249;
-  --function-default-solid-skyller: #2563eb;
+  --function-default-solid-skyller: #171717;
   --function-default-hover-xspector: #fafafa;
   --function-default-hover-report-xspector-light-mode: #35475b;
-  --function-default-hover-skyller: #90c0fc;
+  --function-default-hover-skyller: #424242;
   --function-default-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --function-default-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
-  --function-default-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
   --function-default-stroke-skyller: rgba(189 189 189 / 0.48);
@@ -884,19 +884,19 @@
   --function-default-icon-skyller: #ffffff;
   --function-default-outline-icon-xspector: #9e9e9e;
   --function-default-outline-icon-report-xspector-light-mode: #1e3249;
-  --function-default-outline-icon-skyller: #2563eb;
+  --function-default-outline-icon-skyller: #171717;
   --function-active-solid-xspector: #b1a400;
   --function-active-solid-report-xspector-light-mode: #9b8f00;
-  --function-active-solid-skyller: #60a5fa;
+  --function-active-solid-skyller: #2563eb;
   --function-active-hover-xspector: #ddcd00;
   --function-active-hover-report-xspector-light-mode: #b1a400;
-  --function-active-hover-skyller: #80b7fb;
+  --function-active-hover-skyller: #5182ef;
   --function-active-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --function-active-hover-bg-skyller: rgba(128 183 251 / 0.08);
+  --function-active-hover-bg-skyller: rgba(81 130 239 / 0.08);
   --function-active-stroke-xspector: rgba(177 164 0 / 0.48);
   --function-active-stroke-report-xspector-light-mode: rgba(177 164 0 / 0.48);
-  --function-active-stroke-skyller: rgba(96 165 250 / 0.48);
+  --function-active-stroke-skyller: rgba(37 99 235 / 0.48);
   --function-active-icon-xspector: #212b36;
   --function-active-icon-report-xspector-light-mode: #ffffff;
   --function-active-icon-skyller: #ffffff;
@@ -1038,7 +1038,7 @@
   --modal-line-xspector: #4a4a4a;
   --modal-line-report-xspector-light-mode: #cfcfcf;
   --modal-line-skyller: #d4d4d4;
-  --bg-bg4-xspector: #0f2a46;
+  --bg-bg4-xspector: #0c2948;
   --bg-bg4-report-xspector-light-mode: #ffffff;
   --bg-bg4-skyller: #ffffff;
   --bg-bg5-xspector: #000000;
@@ -1055,7 +1055,7 @@
   --bg-stroke5-skyller: #000000;
   --table-bg-main-xspector: #091a2a;
   --table-bg-main-report-xspector-light-mode: #e5e5e5;
-  --table-bg-main-skyller: #f5f5f5;
+  --table-bg-main-skyller: #d4d4d6;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
   --table-bg-line-skyller: #ececec;
@@ -3058,11 +3058,16 @@
   --switch-thumb-disabled-color: var(--state-disable-solid, #454f5b);
   /* ------------------------------------------------------------------ */
   /* Scrollbar Component Tokens                                          */
+  /* Values represent TOTAL TRACK SIZE (thumb + padding + border).      */
+  /* Figma node: 9466-13957                                             */
   /* ------------------------------------------------------------------ */
-  /* Thumb sizes (track width/height) */
-  --scrollbar-m-thickness: 12px;
-  --scrollbar-s-thickness: 6px;
-  --scrollbar-xs-thickness: 2px;
+  /* Track thickness (= thumb + 2×2px padding)
+   * M:  16px  = 12px thumb + 2px top + 2px bottom
+   * S:  10px  = 6px  thumb + 2px top + 2px bottom  (no track border)
+   * XS:  4px  = 4px  thumb, no padding, no border                     */
+  --scrollbar-m-thickness: 16px;
+  --scrollbar-s-thickness: 10px;
+  --scrollbar-xs-thickness: 4px;
   /* Track border — visible on M size only */
   --scrollbar-track-border-width: 1px;
   --scrollbar-track-border-color: rgba(158, 158, 158, 0.16);
@@ -3115,6 +3120,68 @@
   --badge-severity-medium-bg: var(--state-warning-default);
   --badge-severity-low-bg: var(--state-success-default);
   --badge-severity-lowest-bg: var(--state-info-default);
+  /* ------------------------------------------------------------------ */
+  /* Table Component Tokens                                              */
+  /* Figma node: 9637-8978  (section "Use case" on Design System page)  */
+  /*                                                                     */
+  /* These are component-scoped aliases that the Table component uses    */
+  /* exclusively.  They default to the "on-bg" values and are           */
+  /* automatically overridden when an ancestor carries                   */
+  /* data-surface="panel" — no React prop or variant needed.            */
+  /* ------------------------------------------------------------------ */
+  /* Header cell background.
+   * Default: table-bg-main (opaque dark blue).
+   * Panel:   transparent — the modal/panel surface shows through.      */
+  --table-c-header-bg: var(--table-bg-main);
+  /* Separator below the header row.
+   * Default: transparent — the bg contrast between header and rows
+   *          provides visual separation; no explicit line needed.
+   * Panel:   table-panel-main-line — explicit separator required
+   *          because all backgrounds are transparent.                   */
+  --table-c-header-line: transparent;
+  /* Outer border when Table / DataTable uses a framed shell.            */
+  --table-c-border: transparent;
+  /* Body row backgrounds.
+   * Default: bg-a for all rows; striped mode uses bg-a/bg-b alternate.
+   * Panel:   transparent for both — panel surface provides the bg.     */
+  --table-c-row-bg: var(--table-bg-a);
+  --table-c-row-bg-even: var(--table-bg-b);
+  /* Horizontal row dividers (used when TableRow divided=true).         */
+  --table-c-row-line: var(--table-bg-line);
+  /* Vertical column dividers (used when TableRow colDivided=true).     */
+  --table-c-col-line: var(--table-bg-line);
+  /* Hover overlay on body rows.                                        */
+  --table-c-hover: var(--table-bg-hover);
+  /* Selected row overlay (data-state="selected" on <tr>).              */
+  --table-c-selected: var(--transparent-primary-12);
+}
+
+/* ------------------------------------------------------------------ */
+
+/* Panel / Modal / Drawer surface override                             */
+
+/* Apply data-surface="panel" to the Modal, Drawer, or Panel wrapper. */
+
+/* All Table instances inside the scope inherit these tokens.          */
+
+/* Avoid scoping the whole Storybook/page: row bgs are transparent and */
+
+/* expect --modal-surface behind the table, not --workspace/page bg.   */
+
+/* ------------------------------------------------------------------ */
+
+[data-surface="panel"] {
+  --table-c-header-bg:   var(--modal-surface);
+  --table-c-header-line: var(--table-panel-main-line);
+  --table-c-border:      var(--table-panel-main-line);
+  --table-c-row-bg:      var(--modal-surface);
+  /* TODO: not have this token in Figma for now.   */
+  --table-c-row-bg-even: var(--table-panel-hover);
+  /* TODO: not have this token in Figma for now. */
+  --table-c-row-line:    var(--table-panel-sub-line);
+  --table-c-col-line:    var(--table-panel-sub-line);
+  --table-c-hover:       var(--table-panel-hover);
+  --table-c-selected:    var(--table-panel-selected);
 }
 
 /* TODO: remove this */
@@ -3676,13 +3743,32 @@ video {
   display: none;
 }
 
-* {
-  /* @apply border-border; */
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
+/*
+   * Scrollbar baseline
+   *
+   * Chrome 121+ conflict: when scrollbar-width is set on an element,
+   * Chrome IGNORES -webkit-scrollbar width/height entirely.
+   * They are mutually exclusive for sizing.
+   *
+   * Solution: apply scrollbar-width only in Firefox (where -webkit-scrollbar
+   * is not supported). Chrome/Safari use -webkit-scrollbar exclusively.
+   */
+
+/* Firefox only — standard scrollbar API */
+
+@supports (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
+  }
 }
 
+/* Chrome / Safari / Edge — WebKit scrollbar API */
+
+/* scrollbar-width must NOT be set on these elements or sizes are ignored */
+
 *::-webkit-scrollbar {
+  -webkit-appearance: none;
   width: var(--scrollbar-s-thickness);
   height: var(--scrollbar-s-thickness);
   background: transparent;
@@ -3711,12 +3797,9 @@ video {
 
 body {
   /* @apply bg-background text-foreground; */
-  /* @apply bg-[var(--background)] text-[var(--foreground)]; */
 }
 
-/* hide input number arrow */
-
-/* Chrome, Safari, Edge, Opera */
+/* hide input number arrow — Chrome, Safari, Edge, Opera */
 
 input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -3730,6 +3813,14 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+.\!container {
+  width: 100% !important;
+  margin-right: auto !important;
+  margin-left: auto !important;
+  padding-right: 2rem !important;
+  padding-left: 2rem !important;
+}
+
 .container {
   width: 100%;
   margin-right: auto;
@@ -3739,6 +3830,10 @@ input[type=number] {
 }
 
 @media (min-width: 1400px) {
+  .\!container {
+    max-width: 1400px !important;
+  }
+
   .container {
     max-width: 1400px;
   }
@@ -3768,6 +3863,10 @@ input[type=number] {
   visibility: visible;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .static {
   position: static;
 }
@@ -3853,6 +3952,10 @@ input[type=number] {
   right: 0px;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .right-8 {
   right: 2rem;
 }
@@ -3869,6 +3972,10 @@ input[type=number] {
   top: 0.25rem;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .top-8 {
   top: 2rem;
 }
@@ -3905,6 +4012,10 @@ input[type=number] {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -3929,6 +4040,11 @@ input[type=number] {
   margin: 0px;
 }
 
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -4082,6 +4198,11 @@ input[type=number] {
   aspect-ratio: 1 / 1;
 }
 
+.\!size-4 {
+  width: 1rem !important;
+  height: 1rem !important;
+}
+
 .size-14 {
   width: 3.5rem;
   height: 3.5rem;
@@ -4185,10 +4306,18 @@ input[type=number] {
   height: 0.75rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
 .h-4 {
   height: 1rem;
 }
 
+.h-4\/5 {
+  height: 80%;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -4201,6 +4330,10 @@ input[type=number] {
   height: 15rem;
 }
 
+.h-\[180px\] {
+  height: 180px;
+}
+
 .h-\[200px\] {
   height: 200px;
 }
@@ -4209,14 +4342,26 @@ input[type=number] {
   height: 200vh;
 }
 
+.h-\[220px\] {
+  height: 220px;
+}
+
 .h-\[24px\] {
   height: 24px;
 }
 
+.h-\[280px\] {
+  height: 280px;
+}
+
 .h-\[2px\] {
   height: 2px;
 }
 
+.h-\[320px\] {
+  height: 320px;
+}
+
 .h-\[32px\] {
   height: 32px;
 }
@@ -4229,6 +4374,14 @@ input[type=number] {
   height: 40px;
 }
 
+.h-\[42px\] {
+  height: 42px;
+}
+
+.h-\[44px\] {
+  height: 44px;
+}
+
 .h-\[48px\] {
   height: 48px;
 }
@@ -4241,6 +4394,22 @@ input[type=number] {
   height: 64px;
 }
 
+.h-\[min\(380px\2c 50vh\)\] {
+  height: min(380px,50vh);
+}
+
+.h-\[min\(420px\2c 55vh\)\] {
+  height: min(420px,55vh);
+}
+
+.h-\[min\(480px\2c 70vh\)\] {
+  height: min(480px,70vh);
+}
+
+.h-\[min\(520px\2c 70vh\)\] {
+  height: min(520px,70vh);
+}
+
 .h-\[var\(--footer-height\)\] {
   height: var(--footer-height);
 }
@@ -4253,6 +4422,10 @@ input[type=number] {
   height: var(--navbar-height);
 }
 
+.h-auto {
+  height: auto;
+}
+
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -4270,6 +4443,10 @@ input[type=number] {
   height: 100vh;
 }
 
+.\!max-h-60 {
+  max-height: 15rem !important;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -4294,6 +4471,10 @@ input[type=number] {
   max-height: 80vh;
 }
 
+.max-h-\[min\(520px\2c 70vh\)\] {
+  max-height: min(520px,70vh);
+}
+
 .max-h-screen {
   max-height: 100vh;
 }
@@ -4314,10 +4495,26 @@ input[type=number] {
   min-height: 18px;
 }
 
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+
+.min-h-\[32px\] {
+  min-height: 32px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
 
+.w-0\.5 {
+  width: 0.125rem;
+}
+
+.w-1\.5 {
+  width: 0.375rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4366,8 +4563,8 @@ input[type=number] {
   width: 20rem;
 }
 
-.w-\[100px\] {
-  width: 100px;
+.w-\[120px\] {
+  width: 120px;
 }
 
 .w-\[140px\] {
@@ -4410,10 +4607,18 @@ input[type=number] {
   width: 420px;
 }
 
+.w-\[460px\] {
+  width: 460px;
+}
+
 .w-\[46px\] {
   width: 46px;
 }
 
+.w-\[480px\] {
+  width: 480px;
+}
+
 .w-\[48px\] {
   width: 48px;
 }
@@ -4426,14 +4631,26 @@ input[type=number] {
   width: 520px;
 }
 
+.w-\[5px\] {
+  width: 5px;
+}
+
 .w-\[64px\] {
   width: 64px;
 }
 
+.w-\[72px\] {
+  width: 72px;
+}
+
 .w-\[calc\(100\%-32px\)\] {
   width: calc(100% - 32px);
 }
 
+.w-\[var\(--input-width\)\] {
+  width: var(--input-width);
+}
+
 .w-auto {
   width: auto;
 }
@@ -4447,6 +4664,14 @@ input[type=number] {
   width: 100%;
 }
 
+.w-px {
+  width: 1px;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
 .min-w-72 {
   min-width: 18rem;
 }
@@ -4459,11 +4684,27 @@ input[type=number] {
   min-width: 154px;
 }
 
+.min-w-\[220px\] {
+  min-width: 220px;
+}
+
+.min-w-\[240px\] {
+  min-width: 240px;
+}
+
+.min-w-\[800px\] {
+  min-width: 800px;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -4476,6 +4717,10 @@ input[type=number] {
   max-width: 56rem;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -4516,12 +4761,22 @@ input[type=number] {
   flex-grow: 1;
 }
 
+.table-fixed {
+  table-layout: fixed;
+}
+
 .caption-bottom {
   caption-side: bottom;
 }
 
-.border-collapse {
-  border-collapse: collapse;
+.border-separate {
+  border-collapse: separate;
+}
+
+.border-spacing-0 {
+  --tw-border-spacing-x: 0px;
+  --tw-border-spacing-y: 0px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
 .-translate-x-1\/2 {
@@ -4549,6 +4804,12 @@ input[type=number] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-\[1\.01\] {
+  --tw-scale-x: 1.01;
+  --tw-scale-y: 1.01;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4563,6 +4824,10 @@ input[type=number] {
   animation: spin 1s linear infinite;
 }
 
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -4571,6 +4836,10 @@ input[type=number] {
   cursor: grab;
 }
 
+.cursor-grabbing {
+  cursor: grabbing;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -4597,6 +4866,12 @@ input[type=number] {
   resize: both;
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -4681,6 +4956,10 @@ input[type=number] {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -4801,12 +5080,12 @@ input[type=number] {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.self-center {
-  align-self: center;
+.self-start {
+  align-self: flex-start;
 }
 
-.self-stretch {
-  align-self: stretch;
+.self-center {
+  align-self: center;
 }
 
 .justify-self-center {
@@ -4841,10 +5120,6 @@ input[type=number] {
   overflow-y: hidden;
 }
 
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5031,6 +5306,10 @@ input[type=number] {
   border-width: 3px;
 }
 
+.\!border-r-0 {
+  border-right-width: 0px !important;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -5318,6 +5597,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-modal-line {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--modal-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-modal-surface {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--modal-surface) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5328,11 +5612,6 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.border-primary-10 {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--ramps-primary-10) calc(100% * var(--tw-border-opacity, 1)), transparent);
-}
-
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
@@ -5348,11 +5627,31 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-state-primary-stroke {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-primary-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-success-stroke {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-success-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-table-bg-line {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--table-bg-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-table-c-border {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--table-c-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-table-c-col-line {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--table-c-col-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -5367,6 +5666,10 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2);
+}
+
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
   border-bottom-color: rgb(var(--navbar-border-color));
 }
@@ -5415,6 +5718,16 @@ input[type=number] {
   border-top-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-t-table-c-header-line {
+  --tw-border-opacity: 1;
+  border-top-color: color-mix(in srgb, var(--table-c-header-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-t-table-c-row-line {
+  --tw-border-opacity: 1;
+  border-top-color: color-mix(in srgb, var(--table-c-row-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .\!bg-\[var\(--dropdown-menu-hover-bg\)\] {
   background-color: var(--dropdown-menu-hover-bg) !important;
 }
@@ -5449,6 +5762,18 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--action-button-solid-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
 }
 
+.\!bg-info-500\/10 {
+  background-color: color-mix(in srgb, var(--ramps-info-500) calc(100% * 0.1), transparent) !important;
+}
+
+.\!bg-success-500\/10 {
+  background-color: color-mix(in srgb, var(--ramps-success-500) calc(100% * 0.1), transparent) !important;
+}
+
+.\!bg-white\/5 {
+  background-color: rgb(255 255 255 / 0.05) !important;
+}
+
 .bg-\[rgb\(var\(--base-bg-2\)\)\] {
   background-color: rgb(var(--base-bg-2));
 }
@@ -5824,6 +6149,10 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--ramps-error-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-error-500\/20 {
+  background-color: color-mix(in srgb, var(--ramps-error-500) calc(100% * 0.2), transparent);
+}
+
 .bg-error-600 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--ramps-error-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6183,6 +6512,10 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--ramps-info-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-info-500\/20 {
+  background-color: color-mix(in srgb, var(--ramps-info-500) calc(100% * 0.2), transparent);
+}
+
 .bg-info-600 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--ramps-info-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6307,6 +6640,20 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--modal-surface) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
+}
+
+.bg-orange-500\/20 {
+  background-color: rgb(249 115 22 / 0.2);
+}
+
+.bg-page-bg-main {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--page-bg-main) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-pink-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
@@ -6656,6 +7003,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-state-primary-default {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6691,6 +7043,10 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--ramps-success-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-success-500\/20 {
+  background-color: color-mix(in srgb, var(--ramps-success-500) calc(100% * 0.2), transparent);
+}
+
 .bg-success-600 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--ramps-success-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6751,6 +7107,26 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-table-bg-a {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-bg-a) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-table-bg-main {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-bg-main) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-table-c-col-line {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-c-col-line) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.bg-table-c-header-bg {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-c-header-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-tertiary {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -7000,6 +7376,10 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--ramps-warning-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-warning-500\/20 {
+  background-color: color-mix(in srgb, var(--ramps-warning-500) calc(100% * 0.2), transparent);
+}
+
 .bg-warning-600 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--ramps-warning-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -7384,11 +7764,21 @@ input[type=number] {
   padding: 2rem;
 }
 
+.\!py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -7469,6 +7859,11 @@ input[type=number] {
   padding-bottom: 3.5rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -7564,6 +7959,10 @@ input[type=number] {
   padding-bottom: 0.5rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pe-\[30px\] {
   padding-inline-end: 30px;
 }
@@ -7580,6 +7979,10 @@ input[type=number] {
   padding-left: 1rem;
 }
 
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
 .pl-8 {
   padding-left: 2rem;
 }
@@ -7588,6 +7991,10 @@ input[type=number] {
   padding-right: 1rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pr-8 {
   padding-right: 2rem;
 }
@@ -7851,6 +8258,10 @@ input[type=number] {
   text-transform: capitalize;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -8159,6 +8570,16 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-error-400 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--ramps-error-400) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.text-error-500 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--ramps-error-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-function-active-icon {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8204,6 +8625,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-info-400 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--ramps-info-400) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-inherit {
   color: inherit;
 }
@@ -8228,6 +8654,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-orange-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
+}
+
 .text-pink-200 {
   --tw-text-opacity: 1;
   color: rgb(251 207 232 / var(--tw-text-opacity, 1));
@@ -8268,11 +8699,21 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-state-primary-text-outline {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-primary-text-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-state-primary-text-solid {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-state-secondary-text-outline {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-secondary-text-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-state-secondary-text-solid {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-secondary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8288,6 +8729,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-success-400 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--ramps-success-400) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-tertiary {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8298,6 +8744,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-text-contrast-high {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--text-contrast-high) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-text-contrast-low {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--text-contrast-low) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8333,6 +8784,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.text-warning-400 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--ramps-warning-400) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -8359,6 +8815,10 @@ input[type=number] {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }
@@ -8367,12 +8827,22 @@ input[type=number] {
   opacity: 0.7;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0_8px_24px_-4px_rgba\(0\2c 0\2c 0\2c 0\.24\)\] {
+  --tw-shadow: 0 8px 24px -4px rgba(0,0,0,0.24);
+  --tw-shadow-colored: 0 8px 24px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-\[0px_12px_24px_-4px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
   --tw-shadow: 0px 12px 24px -4px rgba(0,0,0,0.12);
   --tw-shadow-colored: 0px 12px 24px -4px var(--tw-shadow-color);
@@ -8770,80 +9240,143 @@ input[type=number] {
 
 /* ------------------------------------------------------------------ */
 
-/* Scrollbar utility — applies the design-system scrollbar style        */
+/* ui-scrollbar — design-system themed scrollbar                       */
+
+/*                                                                      */
+
+/* Sizing uses COMPOUND SELECTORS (not CSS variables) because          */
+
+/* -webkit-scrollbar pseudo-elements don't reliably inherit custom     */
+
+/* properties in Chrome. Compound selectors have higher specificity    */
+
+/* and directly override the base width/height.                        */
+
+/*                                                                      */
 
-/* Default size: S (6px thumb, matches Figma Size=S)                   */
+/* Usage:                                                               */
 
-/* Usage: add `ui-scrollbar` + optional size modifier to any           */
+/*   <div class="ui-scrollbar">                     default M+M        */
 
-/* overflow-auto / overflow-y-auto / overflow-x-auto container.        */
+/*   <div class="ui-scrollbar ui-scrollbar-y-s">    M horiz + S vert  */
 
 /* ------------------------------------------------------------------ */
 
-/* --- Track --- */
+/* Firefox: standard API */
+
+@supports (-moz-appearance: none) {
+  .ui-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
+  }
+}
+
+/* ── Base track: default M on both axes ────────────────────────────── */
 
 .ui-scrollbar::-webkit-scrollbar {
-  width: var(--scrollbar-s-thickness);
-  height: var(--scrollbar-s-thickness);
+  -webkit-appearance: none;
+  height: var(--scrollbar-m-thickness);
+  /* horizontal bar height */
+  width:  var(--scrollbar-m-thickness);
+  /* vertical   bar width  */
   background: transparent;
 }
 
-/* --- Thumb --- */
-
 .ui-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 12px;
   background: var(--scrollbar-thumb-default-color);
+  /* 2px inset from track edges — matches Figma py-[2px] */
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 
 .ui-scrollbar::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover-color);
-  cursor: pointer;
 }
 
-/* --- Track border (vertical) --- */
+/* Track border — M only (Figma: S and XS have no border) */
 
 .ui-scrollbar::-webkit-scrollbar-track:vertical {
   border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
 }
 
-/* --- Track border (horizontal) --- */
-
 .ui-scrollbar::-webkit-scrollbar-track:horizontal {
   border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
 }
 
+/* S and XS: no track border, no thumb inset (compound selector removes it) */
+
+.ui-scrollbar.ui-scrollbar-s::-webkit-scrollbar-track,
+  .ui-scrollbar.ui-scrollbar-x-s::-webkit-scrollbar-track:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-s::-webkit-scrollbar-track:vertical,
+  .ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar-track,
+  .ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar-track:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar-track:vertical {
+  border: none;
+}
+
 .ui-scrollbar::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-/* --- Size variants --- */
+/* ── Size overrides — compound selectors (0,0,2,0 > 0,0,1,0)
+   *
+   * IMPORTANT source order: "both axes" MUST come before per-axis rules.
+   * Same specificity → last declared wins. Per-axis (x-s, y-s …) must win
+   * over both-axes (m, s …) so they are placed AFTER both-axes below.    */
 
-/* Size M — 12px */
+/* Both axes — set height AND width together */
 
-.ui-scrollbar-m::-webkit-scrollbar {
-  width: var(--scrollbar-m-thickness);
+.ui-scrollbar.ui-scrollbar-m::-webkit-scrollbar  {
   height: var(--scrollbar-m-thickness);
+  width: var(--scrollbar-m-thickness);
 }
 
-/* Size S — 6px (default, same as base .ui-scrollbar) */
-
-.ui-scrollbar-s::-webkit-scrollbar {
+.ui-scrollbar.ui-scrollbar-s::-webkit-scrollbar  {
+  height: var(--scrollbar-s-thickness);
   width: var(--scrollbar-s-thickness);
+}
+
+.ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar {
+  height: var(--scrollbar-xs-thickness);
+  width: var(--scrollbar-xs-thickness);
+}
+
+/* Per-axis horizontal (height only) — declared after both-axes so they win */
+
+.ui-scrollbar.ui-scrollbar-x-m::-webkit-scrollbar  {
+  height: var(--scrollbar-m-thickness);
+}
+
+.ui-scrollbar.ui-scrollbar-x-s::-webkit-scrollbar  {
   height: var(--scrollbar-s-thickness);
 }
 
-/* Size XS — 2px */
+.ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar {
+  height: var(--scrollbar-xs-thickness);
+}
+
+/* Per-axis vertical (width only) — declared after both-axes so they win */
+
+.ui-scrollbar.ui-scrollbar-y-m::-webkit-scrollbar  {
+  width: var(--scrollbar-m-thickness);
+}
 
-.ui-scrollbar-xs::-webkit-scrollbar {
+.ui-scrollbar.ui-scrollbar-y-s::-webkit-scrollbar  {
+  width: var(--scrollbar-s-thickness);
+}
+
+.ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar {
   width: var(--scrollbar-xs-thickness);
-  height: var(--scrollbar-xs-thickness);
 }
 
-/* XS size has no track border */
+/* XS: no border inset on thumb (4px track has no room) */
 
-.ui-scrollbar-xs::-webkit-scrollbar-track:vertical,
-  .ui-scrollbar-xs::-webkit-scrollbar-track:horizontal {
+.ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar-thumb,
+  .ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar-thumb:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar-thumb:vertical {
   border: none;
+  background-clip: border-box;
 }
 
 .\[filter\:var\(--switch-thumb-filter\)\] {
@@ -9111,10 +9644,19 @@ input[type=number] {
   border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.hover\:\!bg-table-c-row-bg:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--table-c-row-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
 .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover {
   background-color: var(--dropdown-menu-hover-bg);
 }
 
+.hover\:bg-\[var\(--transparent-grey2-8\2c rgba\(145\2c 158\2c 171\2c 0\.08\)\)\]:hover {
+  background-color: var(--transparent-grey2-8,rgba(145,158,171,0.08));
+}
+
 .hover\:bg-action-button-icon-active-hover:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -9279,9 +9821,26 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--state-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.hover\:bg-transparent-grey2-8:hover {
+.hover\:bg-table-c-hover:hover {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--transparent-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--table-c-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.hover\:bg-table-c-hover\/35:hover {
+  background-color: color-mix(in srgb, var(--table-c-hover) calc(100% * 0.35), transparent);
+}
+
+.hover\:bg-transparent:hover {
+  background-color: transparent;
+}
+
+.hover\:bg-transparent-grey2-12:hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--transparent-grey2-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.hover\:bg-white\/5:hover {
+  background-color: rgb(255 255 255 / 0.05);
 }
 
 .hover\:fill-action-button-icon-active-hover:hover {
@@ -9553,6 +10112,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.hover\:text-text-contrast-high:hover {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--text-contrast-high) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .hover\:text-text-g-contrast-high:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--text-g-contrast-high) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -10717,6 +11281,14 @@ input[type=number] {
   opacity: 0.5;
 }
 
+.group\/col:hover .group-hover\/col\:opacity-100 {
+  opacity: 1;
+}
+
+.group\/header:hover .group-hover\/header\:opacity-100 {
+  opacity: 1;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
@@ -11213,11 +11785,6 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.data-\[state\=selected\]\:bg-grey-20[data-state="selected"] {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--ramps-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
-}
-
 .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"] {
   background-color: var(--switch-thumb-default-color);
 }
@@ -11561,6 +12128,10 @@ input[type=number] {
 }
 
 @media (min-width: 640px) {
+  .sm\:inline-block {
+    display: inline-block;
+  }
+
   .sm\:max-w-\[425px\] {
     max-width: 425px;
   }
@@ -11584,12 +12155,49 @@ input[type=number] {
   }
 }
 
-.\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
-  width: 1rem;
+.\[\&\:has\(\[role\=checkbox\]\)\]\:min-w-10:has([role=checkbox]) {
+  min-width: 2.5rem;
 }
 
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-4:has([role=checkbox]) {
-  padding-right: 1rem;
+.\[\&\:has\(\[role\=checkbox\]\)\]\:px-3:has([role=checkbox]) {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.\[\&\>td\:not\(\:last-child\)\]\:border-r>td:not(:last-child) {
+  border-right-width: 1px;
+}
+
+.\[\&\>td\:not\(\:last-child\)\]\:border-r-table-c-col-line>td:not(:last-child) {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--table-c-col-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.\[\&\>td\]\:border-b>td {
+  border-bottom-width: 1px;
+}
+
+.\[\&\>td\]\:border-b-table-c-row-line>td {
+  --tw-border-opacity: 1;
+  border-bottom-color: color-mix(in srgb, var(--table-c-row-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.\[\&\>th\:not\(\:last-child\)\]\:border-r>th:not(:last-child) {
+  border-right-width: 1px;
+}
+
+.\[\&\>th\:not\(\:last-child\)\]\:border-r-table-c-col-line>th:not(:last-child) {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--table-c-col-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.\[\&\>th\]\:border-b>th {
+  border-bottom-width: 1px;
+}
+
+.\[\&\>th\]\:border-b-table-c-row-line>th {
+  --tw-border-opacity: 1;
+  border-bottom-color: color-mix(in srgb, var(--table-c-row-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
@@ -11726,10 +12334,53 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
-.\[\&_tr\:last-child\]\:border-0 tr:last-child {
-  border-width: 0px;
+.\[\&_tr\:hover\]\:\!bg-table-c-hover tr:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--table-c-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\[\&_tr\:last-child\>td\]\:border-b-0 tr:last-child>td {
+  border-bottom-width: 0px;
+}
+
+.\[\&_tr\:last-child\>th\]\:border-b-0 tr:last-child>th {
+  border-bottom-width: 0px;
+}
+
+.\[\&_tr\:nth-child\(even\)\]\:bg-table-c-row-bg-even tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-c-row-bg-even) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.\[\&_tr\:nth-child\(odd\)\]\:bg-table-c-row-bg tr:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-c-row-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
+.\[\&_tr\>td\]\:border-b-0 tr>td {
+  border-bottom-width: 0px;
 }
 
-.\[\&_tr\]\:border-b tr {
+.\[\&_tr\>th\]\:border-b tr>th {
   border-bottom-width: 1px;
 }
+
+.\[\&_tr\>th\]\:border-b-table-c-header-line tr>th {
+  --tw-border-opacity: 1;
+  border-bottom-color: color-mix(in srgb, var(--table-c-header-line) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.\[\&_tr\[data-highlighted\=true\]\]\:\!bg-table-c-selected tr[data-highlighted=true] {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--table-c-selected) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\[\&_tr\[data-state\=selected\]\]\:\!bg-table-c-selected tr[data-state=selected] {
+  --tw-bg-opacity: 1 !important;
+  background-color: color-mix(in srgb, var(--table-c-selected) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
+}
+
+.\[\&_tr\]\:bg-table-c-row-bg tr {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--table-c-row-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}