@rovula/ui 0.1.28 → 0.1.30

package/dist/esm/bundle.css

@@ -514,13 +514,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;
@@ -549,12 +568,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 {
@@ -567,6 +583,13 @@ input::-webkit-outer-spin-button,
 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;
@@ -576,6 +599,10 @@ input[type=number] {
 }
 @media (min-width: 1400px){
 
+  .\!container{
+    max-width: 1400px !important;
+  }
+
   .container{
     max-width: 1400px;
   }
@@ -600,6 +627,9 @@ input[type=number] {
 .visible{
   visibility: visible;
 }
+.invisible{
+  visibility: hidden;
+}
 .static{
   position: static;
 }
@@ -664,6 +694,9 @@ input[type=number] {
 .right-0{
   right: 0px;
 }
+.right-2{
+  right: 0.5rem;
+}
 .right-8{
   right: 2rem;
 }
@@ -676,6 +709,9 @@ input[type=number] {
 .top-1{
   top: 0.25rem;
 }
+.top-1\/2{
+  top: 50%;
+}
 .top-8{
   top: 2rem;
 }
@@ -703,6 +739,9 @@ input[type=number] {
 .z-10{
   z-index: 10;
 }
+.z-40{
+  z-index: 40;
+}
 .z-50{
   z-index: 50;
 }
@@ -721,6 +760,10 @@ input[type=number] {
 .m-0{
   margin: 0px;
 }
+.-mx-1{
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
 .mx-2{
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -837,6 +880,10 @@ input[type=number] {
 .aspect-square{
   aspect-ratio: 1 / 1;
 }
+.\!size-4{
+  width: 1rem !important;
+  height: 1rem !important;
+}
 .size-14{
   width: 3.5rem;
   height: 3.5rem;
@@ -918,9 +965,15 @@ input[type=number] {
 .h-3{
   height: 0.75rem;
 }
+.h-32{
+  height: 8rem;
+}
 .h-4{
   height: 1rem;
 }
+.h-4\/5{
+  height: 80%;
+}
 .h-5{
   height: 1.25rem;
 }
@@ -930,18 +983,33 @@ input[type=number] {
 .h-60{
   height: 15rem;
 }
+.h-\[180px\]{
+  height: 180px;
+}
 .h-\[200px\]{
   height: 200px;
 }
 .h-\[200vh\]{
   height: 200vh;
 }
+.h-\[220px\]{
+  height: 220px;
+}
 .h-\[24px\]{
   height: 24px;
 }
+.h-\[280px\]{
+  height: 280px;
+}
+.h-\[28px\]{
+  height: 28px;
+}
 .h-\[2px\]{
   height: 2px;
 }
+.h-\[320px\]{
+  height: 320px;
+}
 .h-\[32px\]{
   height: 32px;
 }
@@ -951,15 +1019,39 @@ input[type=number] {
 .h-\[40px\]{
   height: 40px;
 }
+.h-\[42px\]{
+  height: 42px;
+}
+.h-\[44px\]{
+  height: 44px;
+}
 .h-\[48px\]{
   height: 48px;
 }
+.h-\[50px\]{
+  height: 50px;
+}
 .h-\[54px\]{
   height: 54px;
 }
+.h-\[56px\]{
+  height: 56px;
+}
 .h-\[64px\]{
   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);
 }
@@ -969,6 +1061,9 @@ input[type=number] {
 .h-\[var\(--navbar-height\)\]{
   height: var(--navbar-height);
 }
+.h-auto{
+  height: auto;
+}
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -982,6 +1077,9 @@ input[type=number] {
 .h-screen{
   height: 100vh;
 }
+.\!max-h-60{
+  max-height: 15rem !important;
+}
 .max-h-60{
   max-height: 15rem;
 }
@@ -1000,6 +1098,9 @@ input[type=number] {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[min\(520px\2c 70vh\)\]{
+  max-height: min(520px,70vh);
+}
 .max-h-screen{
   max-height: 100vh;
 }
@@ -1015,9 +1116,21 @@ input[type=number] {
 .min-h-\[18px\]{
   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%;
 }
@@ -1054,8 +1167,8 @@ input[type=number] {
 .w-80{
   width: 20rem;
 }
-.w-\[100px\]{
-  width: 100px;
+.w-\[120px\]{
+  width: 120px;
 }
 .w-\[140px\]{
   width: 140px;
@@ -1087,9 +1200,15 @@ input[type=number] {
 .w-\[420px\]{
   width: 420px;
 }
+.w-\[460px\]{
+  width: 460px;
+}
 .w-\[46px\]{
   width: 46px;
 }
+.w-\[480px\]{
+  width: 480px;
+}
 .w-\[48px\]{
   width: 48px;
 }
@@ -1099,12 +1218,21 @@ input[type=number] {
 .w-\[520px\]{
   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;
 }
@@ -1115,6 +1243,12 @@ input[type=number] {
 .w-full{
   width: 100%;
 }
+.w-px{
+  width: 1px;
+}
+.min-w-0{
+  min-width: 0px;
+}
 .min-w-72{
   min-width: 18rem;
 }
@@ -1124,10 +1258,22 @@ input[type=number] {
 .min-w-\[154px\]{
   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;
 }
@@ -1137,6 +1283,9 @@ input[type=number] {
 .max-w-4xl{
   max-width: 56rem;
 }
+.max-w-7xl{
+  max-width: 80rem;
+}
 .max-w-\[300px\]{
   max-width: 300px;
 }
@@ -1167,11 +1316,19 @@ input[type=number] {
 .grow{
   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{
   --tw-translate-x: -50%;
@@ -1193,6 +1350,11 @@ input[type=number] {
   --tw-rotate: 180deg;
   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));
 }
@@ -1205,12 +1367,18 @@ input[type=number] {
 .animate-spin{
   animation: spin 1s linear infinite;
 }
+.cursor-col-resize{
+  cursor: col-resize;
+}
 .cursor-default{
   cursor: default;
 }
 .cursor-grab{
   cursor: grab;
 }
+.cursor-grabbing{
+  cursor: grabbing;
+}
 .cursor-not-allowed{
   cursor: not-allowed;
 }
@@ -1231,6 +1399,11 @@ input[type=number] {
 .resize{
   resize: both;
 }
+.appearance-none{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
 .grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1294,6 +1467,9 @@ input[type=number] {
 .items-start{
   align-items: flex-start;
 }
+.items-end{
+  align-items: flex-end;
+}
 .items-center{
   align-items: center;
 }
@@ -1388,12 +1564,12 @@ input[type=number] {
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
+.self-start{
+  align-self: flex-start;
+}
 .self-center{
   align-self: center;
 }
-.self-stretch{
-  align-self: stretch;
-}
 .justify-self-center{
   justify-self: center;
 }
@@ -1418,9 +1594,6 @@ input[type=number] {
 .overflow-y-hidden{
   overflow-y: hidden;
 }
-.overflow-y-scroll{
-  overflow-y: scroll;
-}
 .truncate{
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1432,6 +1605,9 @@ input[type=number] {
 .whitespace-nowrap{
   white-space: nowrap;
 }
+.whitespace-pre{
+  white-space: pre;
+}
 .whitespace-pre-line{
   white-space: pre-line;
 }
@@ -1563,6 +1739,9 @@ input[type=number] {
 .border-\[3px\]{
   border-width: 3px;
 }
+.\!border-r-0{
+  border-right-width: 0px !important;
+}
 .border-b{
   border-bottom-width: 1px;
 }
@@ -1789,6 +1968,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   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);
@@ -1797,10 +1980,6 @@ input[type=number] {
   --tw-border-opacity: 1;
   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));
@@ -1813,10 +1992,26 @@ input[type=number] {
   --tw-border-opacity: 1;
   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;
 }
@@ -1828,6 +2023,9 @@ input[type=number] {
   --tw-border-opacity: 1;
   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));
 }
@@ -1866,6 +2064,14 @@ input[type=number] {
   --tw-border-opacity: 1;
   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;
 }
@@ -1893,6 +2099,15 @@ input[type=number] {
   --tw-bg-opacity: 1 !important;
   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));
 }
@@ -2189,6 +2404,9 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -2476,6 +2694,9 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -2575,6 +2796,17 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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));
@@ -2854,6 +3086,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -2882,6 +3118,9 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -2930,6 +3169,22 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -3129,6 +3384,9 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -3423,10 +3681,18 @@ input[type=number] {
 .p-8{
   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;
@@ -3491,6 +3757,10 @@ input[type=number] {
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
 }
+.py-16{
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -3565,6 +3835,9 @@ input[type=number] {
 .pb-2{
   padding-bottom: 0.5rem;
 }
+.pb-3{
+  padding-bottom: 0.75rem;
+}
 .pe-\[30px\]{
   padding-inline-end: 30px;
 }
@@ -3577,12 +3850,18 @@ input[type=number] {
 .pl-4{
   padding-left: 1rem;
 }
+.pl-6{
+  padding-left: 1.5rem;
+}
 .pl-8{
   padding-left: 2rem;
 }
 .pr-4{
   padding-right: 1rem;
 }
+.pr-7{
+  padding-right: 1.75rem;
+}
 .pr-8{
   padding-right: 2rem;
 }
@@ -3796,10 +4075,19 @@ input[type=number] {
 .capitalize{
   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);
 }
+.leading-\[18px\]{
+  line-height: 18px;
+}
+.leading-\[20px\]{
+  line-height: 20px;
+}
 .leading-\[3rem\]{
   line-height: 3rem;
 }
@@ -4038,6 +4326,14 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -4074,6 +4370,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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;
 }
@@ -4093,6 +4393,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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));
@@ -4125,10 +4429,18 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -4141,6 +4453,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -4149,6 +4465,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -4177,6 +4497,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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));
@@ -4197,17 +4521,28 @@ input[type=number] {
 .opacity-0{
   opacity: 0;
 }
+.opacity-100{
+  opacity: 1;
+}
 .opacity-60{
   opacity: 0.6;
 }
 .opacity-70{
   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);
@@ -4532,57 +4867,81 @@ input[type=number] {
   font-weight: var(--button-button-ms-weight, 700);
 }
 /* ------------------------------------------------------------------ */
-/* Scrollbar utility — applies the design-system scrollbar style        */
-/* Default size: S (6px thumb, matches Figma Size=S)                   */
-/* Usage: add `ui-scrollbar` + optional size modifier to any           */
-/* overflow-auto / overflow-y-auto / overflow-x-auto container.        */
+/* 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.                        */
+/*                                                                      */
+/* Usage:                                                               */
+/*   <div class="ui-scrollbar">                     default M+M        */
+/*   <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);
   }
-.ui-scrollbar::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-/* --- Size variants --- */
-/* Size M — 12px */
-.ui-scrollbar-m::-webkit-scrollbar {
-    width: var(--scrollbar-m-thickness);
-    height: var(--scrollbar-m-thickness);
-  }
-/* Size S — 6px (default, same as base .ui-scrollbar) */
-.ui-scrollbar-s::-webkit-scrollbar {
-    width: var(--scrollbar-s-thickness);
-    height: var(--scrollbar-s-thickness);
-  }
-/* Size XS — 2px */
-.ui-scrollbar-xs::-webkit-scrollbar {
-    width: var(--scrollbar-xs-thickness);
-    height: var(--scrollbar-xs-thickness);
+/* 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;
   }
-/* XS size has no track border */
-.ui-scrollbar-xs::-webkit-scrollbar-track:vertical,
-  .ui-scrollbar-xs::-webkit-scrollbar-track:horizontal {
+.ui-scrollbar::-webkit-scrollbar-corner { background: transparent; }
+/* ── 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.    */
+/* Both axes — set height AND width together */
+.ui-scrollbar.ui-scrollbar-m::-webkit-scrollbar  { height: var(--scrollbar-m-thickness);  width: var(--scrollbar-m-thickness);  }
+.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);  }
+.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.ui-scrollbar-y-s::-webkit-scrollbar  { width: var(--scrollbar-s-thickness);  }
+.ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar { width: var(--scrollbar-xs-thickness); }
+/* XS: no border inset on thumb (4px track has no room) */
+.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\)\]{
   filter: var(--switch-thumb-filter);
@@ -4796,9 +5155,16 @@ input[type=number] {
   --tw-border-opacity: 1;
   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);
@@ -4930,9 +5296,22 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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{
   fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent);
@@ -5143,6 +5522,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -6060,6 +6443,12 @@ input[type=number] {
 .disabled\:opacity-50:disabled{
   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;
 }
@@ -6452,10 +6841,6 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
 }
@@ -6725,6 +7110,10 @@ input[type=number] {
 }
 @media (min-width: 640px){
 
+  .sm\:inline-block{
+    display: inline-block;
+  }
+
   .sm\:max-w-\[425px\]{
     max-width: 425px;
   }
@@ -6747,11 +7136,40 @@ input[type=number] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
-.\[\&\: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{
   border-bottom-width: 0px;
@@ -6858,12 +7276,49 @@ input[type=number] {
   --tw-text-opacity: 1;
   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\]\:border-b tr{
+.\[\&_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\>th\]\:box-border tr>th{
+  box-sizing: border-box;
+}
+.\[\&_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);
+}
 
 /* Scroll bar */
 .tabs-scrollbar::-webkit-scrollbar {