@helpwave/hightide 0.1.10 → 0.1.12

package/dist/css/globals.css

@@ -12,7 +12,8 @@
     --color-red-300: #F4A3A7;
     --color-red-400: #E3798A;
     --color-red-500: #DC576D;
-    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-600: #D53550;
+    --color-red-700: #BB273F;
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-200: oklch(92.5% 0.084 155.995);
@@ -26,7 +27,7 @@
     --color-blue-800: #1A4080;
     --color-purple-50: #EFE6FD;
     --color-purple-100: #CEB0FA;
-    --color-purple-400: #8470c5;
+    --color-purple-400: #8470C5;
     --color-purple-500: #694BB4;
     --color-gray-300: #B3B3B3;
     --color-gray-700: #4D4D4D;
@@ -52,6 +53,7 @@
     --text-4xl--line-height: calc(2.5 / 2.25);
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -78,6 +80,8 @@
     --color-on-positive: var(--color-text-light);
     --color-negative: var(--color-red-500);
     --color-on-negative: var(--color-text-light);
+    --color-negative-border: var(--color-negative);
+    --color-negative-border-hover: var(--color-red-700);
     --color-surface: #FFFFFF;
     --color-on-surface: var(--color-text-dark);
     --color-surface-warning: #FBECD9;
@@ -93,8 +97,10 @@
     --color-disabled-background: #BBBBBB;
     --color-disabled-text: #555555;
     --color-disabled-icon: #555555;
-    --color-disabled-outline: #555555;
+    --color-disabled-border: #999999;
+    --color-disabled-outline: #999999;
     --color-border: #CCCCCC;
+    --color-focus: var(--color-purple-400);
     --color-button-outline-primary-icon: var(--color-primary);
     --color-button-outline-primary-text: var(--color-primary);
     --color-button-solid-primary-background: var(--color-primary);
@@ -138,6 +144,9 @@
     --color-stepperbar-dot-active: var(--color-primary);
     --color-stepperbar-dot-normal: var(--color-purple-100);
     --color-stepperbar-dot-disabled: var(--color-disabled-background);
+    --color-tabel-header-background: #F6FAFF;
+    --color-table-row-hover-background: var(--color-purple-50);
+    --color-table-row-hover-text: var(--color-text-default);
     --color-tag-dark-background: #333333;
     --color-tag-dark-text: var(--color-text-light);
     --color-tag-dark-icon: var(--color-text-light);
@@ -334,6 +343,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -343,6 +355,9 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-0\.5 {
+    right: calc(var(--spacing) * 0.5);
+  }
   .right-full {
     right: 100%;
   }
@@ -454,9 +469,6 @@
   .mb-\[6px\] {
     margin-bottom: 6px;
   }
-  .mb-\[12px\] {
-    margin-bottom: 12px;
-  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -521,26 +533,32 @@
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
-  .h-\[0\.75rem\] {
-    height: 0.75rem;
-  }
-  .h-\[16rem\] {
-    height: 16rem;
+  .h-64 {
+    height: calc(var(--spacing) * 64);
   }
-  .h-\[24rem\] {
-    height: 24rem;
+  .h-96 {
+    height: calc(var(--spacing) * 96);
   }
   .h-auto {
     height: auto;
@@ -554,8 +572,8 @@
   .max-h-\[500px\] {
     max-height: 500px;
   }
-  .min-h-\[0\.75rem\] {
-    min-height: 0.75rem;
+  .min-h-3 {
+    min-height: calc(var(--spacing) * 3);
   }
   .min-h-\[250px\] {
     min-height: 250px;
@@ -575,33 +593,42 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-50 {
+    width: calc(var(--spacing) * 50);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
-  .w-\[2rem\] {
-    width: 2rem;
-  }
   .w-\[20\%\] {
     width: 20%;
   }
   .w-\[70\%\] {
     width: 70%;
   }
-  .w-\[100px\] {
-    width: 100px;
-  }
   .w-\[300px\] {
     width: 300px;
   }
   .w-\[400px\] {
     width: 400px;
   }
-  .w-auto {
-    width: auto;
-  }
   .w-fit {
     width: fit-content;
   }
@@ -611,30 +638,42 @@
   .w-screen {
     width: 100vw;
   }
+  .max-w-6 {
+    max-width: calc(var(--spacing) * 6);
+  }
   .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-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
-  .min-w-\[2rem\] {
-    min-width: 2rem;
-  }
-  .min-w-\[16px\] {
-    min-width: 16px;
+  .min-w-56 {
+    min-width: calc(var(--spacing) * 56);
   }
   .min-w-\[40px\] {
     min-width: 40px;
   }
-  .min-w-\[80px\] {
-    min-width: 80px;
-  }
   .min-w-\[150px\] {
     min-width: 150px;
   }
@@ -679,24 +718,43 @@
   .\!cursor-grabbing {
     cursor: grabbing !important;
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
   .resize-none {
     resize: none;
   }
+  .input-indicator-hidden {
+    appearance: none;
+    -moz-appearance: textfield;
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+    &::-webkit-outer-spin-button {
+      appearance: none;
+    }
+  }
   .appearance-none {
     appearance: none;
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,12 +800,12 @@
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
-  .gap-y-12 {
-    row-gap: calc(var(--spacing) * 12);
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -823,10 +881,6 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l-0 {
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
@@ -841,12 +895,12 @@
   .border-disabled-background {
     border-color: var(--color-disabled-background);
   }
+  .border-disabled-border {
+    border-color: var(--color-disabled-border);
+  }
   .border-disabled-outline {
     border-color: var(--color-disabled-outline);
   }
-  .border-disabled-text {
-    border-color: var(--color-disabled-text);
-  }
   .border-divider\/30 {
     border-color: color-mix(in srgb, #E6E6E6 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -856,6 +910,9 @@
   .border-menu-border {
     border-color: var(--color-menu-border);
   }
+  .border-negative-border {
+    border-color: var(--color-negative-border);
+  }
   .border-primary {
     border-color: var(--color-primary);
   }
@@ -955,6 +1012,9 @@
   .bg-neutral {
     background-color: var(--color-neutral);
   }
+  .bg-on-negative {
+    background-color: var(--color-on-negative);
+  }
   .bg-overlay-background {
     background-color: var(--color-overlay-background);
   }
@@ -1222,6 +1282,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .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);
@@ -1229,6 +1293,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -1453,8 +1520,8 @@
   .opacity-20 {
     opacity: 20%;
   }
-  .opacity-30 {
-    opacity: 30%;
+  .opacity-70 {
+    opacity: 70%;
   }
   .\!shadow-none {
     --tw-shadow: 0 0 #0000 !important;
@@ -1537,11 +1604,23 @@
       outline-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
+  .invert {
+    --tw-invert: invert(100%);
+    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,);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1564,6 +1643,13 @@
       }
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\:brightness-95 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1601,6 +1687,13 @@
       border-color: var(--color-primary);
     }
   }
+  .hover\:border-negative-border-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-negative-border-hover);
+      }
+    }
+  }
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
@@ -1717,11 +1810,6 @@
       }
     }
   }
-  .focus\:border-negative {
-    &:focus {
-      border-color: var(--color-negative);
-    }
-  }
   .focus\:border-primary {
     &:focus {
       border-color: var(--color-primary);
@@ -1738,16 +1826,6 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:ring-negative {
-    &:focus {
-      --tw-ring-color: var(--color-negative);
-    }
-  }
-  .focus\:ring-primary {
-    &:focus {
-      --tw-ring-color: var(--color-primary);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1865,6 +1943,8 @@
   .animate-tooltip-fade-out {
     animation: fade-in 0.2s ease-in-out forwards;
   }
+}
+@layer utilities {
   .shadow-around {
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 2px 0 2px 0 rgba(0, 0, 0, 0.02), -2px 0 2px 0 rgba(0, 0, 0, 0.02);
   }
@@ -1883,6 +1963,21 @@
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
     --color-negative: var(--color-red-700);
+    --color-negative-border-hover: var(--color-red-600);
+    --color-focus: var(--color-purple-500);
+  }
+}
+@layer base {
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    --color-primary: var(--color-purple-400);
+    --color-positive: var(--color-green-700);
+    --color-negative: var(--color-red-700);
+    --color-negative-border-hover: var(--color-red-600);
+    --color-focus: var(--color-purple-500);
+  }
+}
+@layer base {
+  &:where([data-theme=dark], [data-theme=dark] *) {
     --color-text-default: var(--color-text-light);
     --color-surface: #333333;
     --color-on-surface: var(--color-text-light);
@@ -1904,6 +1999,44 @@
     --color-description: #999999;
     --color-disabled-background: #555555;
     --color-disabled-text: #999999;
+  }
+}
+@layer base {
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    --color-primary: var(--color-purple-400);
+    --color-positive: var(--color-green-700);
+    --color-negative: var(--color-red-700);
+    --color-negative-border-hover: var(--color-red-600);
+    --color-focus: var(--color-purple-500);
+  }
+}
+@layer base {
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    --color-text-default: var(--color-text-light);
+    --color-surface: #333333;
+    --color-on-surface: var(--color-text-light);
+    --color-surface-variant: #494949;
+    --color-surface-warning: #FBECD9;
+    --color-text-label: #CFCFCF;
+    --color-highlight: #3272DF;
+    --color-background: #222222;
+    --color-on-background: var(--color-text-light);
+    --color-border: #444444;
+    --color-neutral: #4D4D4D;
+    --color-neutral-outline: #B3B3B3;
+    --color-neutral-surface: #E6E6E6;
+    --color-neutral-background: #F8F8F8;
+    --color-text-primary: var(--color-text-light);
+    --color-text-secondary: #666666;
+    --color-text-tertiary: #B3B3B3;
+    --color-text-highlight: #3272DF;
+    --color-description: #999999;
+    --color-disabled-background: #555555;
+    --color-disabled-text: #999999;
+  }
+}
+@layer base {
+  &:where([data-theme=dark], [data-theme=dark] *) {
     --color-button-solid-neutral-background: #424242;
     --color-button-solid-neutral-icon: var(--color-text-light);
     --color-button-solid-neutral-text: var(--color-text-light);
@@ -1918,7 +2051,112 @@
     --color-progress-indicator-background: var(--color-gray-700);
     --color-overlay-background: #2A2A2A;
     --color-overlay-text: var(--color-text-light);
-    --color-tabel-header-background: #F6FAFF;
+    --color-tabel-header-background: #2F2F2F;
+    --color-table-row-hover-background: #2f2841;
+  }
+}
+@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-text-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-text-label);
+  }
+  .textstyle-label-md {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-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-text-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-text-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 {
@@ -1931,9 +2169,9 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 1);
-    border-radius: 0.375rem;
-    padding-inline: 0.625rem;
-    padding-block: 0.25rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 1);
   }
   .btn-md {
     display: flex;
@@ -1944,9 +2182,9 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
-    border-radius: 0.375rem;
-    padding-inline: 0.75rem;
-    padding-block: 0.5rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
   }
   .btn-lg {
     display: flex;
@@ -1957,9 +2195,23 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
-    border-radius: 0.375rem;
-    padding-inline: 1rem;
-    padding-block: 0.675rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .icon-btn-xs {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 6);
+    min-height: calc(var(--spacing) * 6);
+    width: calc(var(--spacing) * 6);
+    min-width: calc(var(--spacing) * 6);
+    align-items: center;
+    justify-content: center;
+    column-gap: calc(var(--spacing) * 1);
+    border-radius: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 1);
   }
   .icon-btn-sm {
     display: flex;
@@ -1972,8 +2224,8 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 1);
-    border-radius: 0.375rem;
-    padding: 0.375rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding: calc(var(--spacing) * 1.5);
   }
   .icon-btn-md {
     display: flex;
@@ -1986,8 +2238,8 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
-    border-radius: 0.375rem;
-    padding: 0.5rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding: calc(var(--spacing) * 2);
   }
   .icon-btn-lg {
     display: flex;
@@ -2000,8 +2252,8 @@
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
-    border-radius: 0.375rem;
-    padding: 0.75rem;
+    border-radius: calc(var(--spacing) * 1.5);
+    padding: calc(var(--spacing) * 3);
   }
   .card-sm {
     display: flex;
@@ -2095,130 +2347,116 @@
   }
   input {
     display: block;
-    border-radius: var(--radius-md);
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-    background-color: var(--color-surface);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: 0.375rem;
-    color: var(--color-on-surface);
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-primary);
-      }
-    }
-    &:focus {
-      border-color: var(--color-primary);
-    }
-    &:focus {
-      --tw-ring-color: var(--color-primary);
-    }
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .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);
+  *:disabled {
+    cursor: not-allowed;
   }
-  .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);
+  *: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;
   }
-  .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);
+  *: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);
   }
-  .textstyle-title-sm {
-    font-family: var(--font-space);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  table {
+    table-layout: fixed;
+    border-collapse: separate;
+    --tw-border-spacing-x: calc(var(--spacing) * 0);
+    --tw-border-spacing-y: calc(var(--spacing) * 0);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
-  .textstyle-accent {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+  th {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+    background-color: var(--color-tabel-header-background);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2.5);
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
     color: var(--color-text-label);
+    &:first-child {
+      border-top-left-radius: var(--radius-lg);
+    }
+    &:first-child {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    &:first-child {
+      padding-left: calc(var(--spacing) * 6);
+    }
+    &:last-child {
+      border-top-right-radius: var(--radius-lg);
+    }
+    &:last-child {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    &:last-child {
+      padding-right: calc(var(--spacing) * 6);
+    }
   }
-  .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-text-label);
-  }
-  .textstyle-label-md {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-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-text-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);
+  tbody > tr {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-table-row-hover-background);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-table-row-hover-text);
+      }
+    }
   }
-  .textstyle-table-header {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-label);
+  td {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2.5);
+    &:first-child {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    &:first-child {
+      padding-left: calc(var(--spacing) * 6);
+    }
+    &:last-child {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    &:last-child {
+      padding-right: calc(var(--spacing) * 6);
+    }
+    &:is(nth-last-child(1)) {
+      &:first-child {
+        border-bottom-left-radius: var(--radius-lg);
+      }
+    }
+    &:is(nth-last-child(1)) {
+      &:last-child {
+        border-bottom-right-radius: var(--radius-lg);
+      }
+    }
   }
-  .textstyle-navigation-item {
-    font-family: var(--font-space);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  tbody > tr:last-child > td {
+    &:first-child {
+      border-bottom-left-radius: var(--radius-lg);
+    }
+    &:last-child {
+      border-bottom-right-radius: var(--radius-lg);
+    }
   }
-  .textstyle-form-error {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-negative);
+  .table-resize-indicator {
+    position: absolute;
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 0);
+    bottom: calc(var(--spacing) * 2);
   }
-  .textstyle-form-description {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-description);
+  th:last-child > .table-resize-indicator {
+    right: calc(var(--spacing) * 6);
   }
 }
 @property --tw-translate-x {
@@ -2434,6 +2672,16 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -2500,6 +2748,8 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
     }
   }
 }