@helpwave/hightide 0.1.20 → 0.1.22

package/dist/css/globals.css

@@ -58,6 +58,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --leading-tight: 1.25;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -73,18 +74,20 @@
     --color-text-light: #E6E6E6;
     --color-text-default: var(--color-text-dark);
     --color-primary: var(--color-purple-500);
-    --color-on-primary: var(--color-text-light);
+    --color-on-primary: #FFFFFF;
     --color-secondary: #11243E;
     --color-warning: var(--color-yellow-500);
-    --color-on-warning: var(--color-text-light);
+    --color-on-warning: #FFFFFF;
     --color-positive: var(--color-green-500);
-    --color-on-positive: var(--color-text-light);
+    --color-on-positive: #FFFFFF;
     --color-negative: var(--color-red-500);
-    --color-on-negative: var(--color-text-light);
+    --color-on-negative: #FFFFFF;
     --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-input-background: var(--color-surface);
+    --color-input-text: var(--color-on-surface);
     --color-surface-warning: #FBECD9;
     --color-background: #EEEEEE;
     --color-on-background: var(--color-text-dark);
@@ -134,11 +137,10 @@
     --color-button-text-primary-icon: var(--color-primary);
     --color-carousel-dot-active: var(--color-primary);
     --color-carousel-dot-disabled: var(--color-disabled-background);
-    --color-menu-background: var(--color-surface);
-    --color-menu-text: var(--color-on-surface);
-    --color-menu-border: var(--color-border);
-    --color-overlay-background: #FFFFFF;
-    --color-overlay-text: var(--color-text-dark);
+    --color-menu-background: #F2F2F2;
+    --color-menu-text: var(--color-text-default);
+    --color-overlay-background: #FAFAFA;
+    --color-overlay-text: var(--color-text-default);
     --color-overlay-shadow: #00000039;
     --color-progress-indicator-fill: var(--color-primary);
     --color-progress-indicator-background: var(--color-gray-300);
@@ -146,7 +148,7 @@
     --color-property-title-text: var(--color-text-secondary);
     --color-stepperbar-dot-active: var(--color-primary);
     --color-stepperbar-dot-normal: var(--color-purple-100);
-    --color-stepperbar-dot-disabled: var(--color-disabled-background);
+    --color-stepperbar-dot-disabled: var(--color-description);
     --color-tabel-header-background: #F6FAFF;
     --color-table-row-hover-background: var(--color-purple-50);
     --color-table-row-hover-text: var(--color-text-default);
@@ -174,7 +176,7 @@
     --color-text-image-secondary-text: var(--color-white);
     --color-text-image-dark-background: #11243E;
     --color-text-image-dark-text: var(--color-white);
-    --color-tooltip-background: #D9D9D9;
+    --color-tooltip-background: var(--color-menu-background);
     --color-tooltip-text: var(--color-description);
     --font-space: 'Space Grotesk', sans-serif;
   }
@@ -391,8 +393,11 @@
   .z-\[10\] {
     z-index: 10;
   }
-  .z-\[9999\] {
-    z-index: 9999;
+  .z-\[200\] {
+    z-index: 200;
+  }
+  .z-\[300\] {
+    z-index: 300;
   }
   .container {
     width: 100%;
@@ -906,6 +911,9 @@
   .rounded-none {
     border-radius: 0;
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -979,9 +987,6 @@
       border-color: color-mix(in oklab, var(--color-divider) 30%, transparent);
     }
   }
-  .border-menu-border {
-    border-color: var(--color-menu-border);
-  }
   .border-negative-border {
     border-color: var(--color-negative-border);
   }
@@ -1075,6 +1080,9 @@
   .bg-inherit {
     background-color: inherit;
   }
+  .bg-input-background {
+    background-color: var(--color-input-background);
+  }
   .bg-menu-background {
     background-color: var(--color-menu-background);
   }
@@ -1333,6 +1341,10 @@
   .font-space {
     font-family: var(--font-space);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1365,6 +1377,9 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
   .break-words {
     overflow-wrap: break-word;
   }
@@ -1473,6 +1488,9 @@
   .text-inherit {
     color: inherit;
   }
+  .text-input-text {
+    color: var(--color-input-text);
+  }
   .text-menu-text {
     color: var(--color-menu-text);
   }
@@ -1614,10 +1632,6 @@
     --tw-shadow: 0 0 #0000 !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1630,10 +1644,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .\!ring-0 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -1646,6 +1656,15 @@
     --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);
   }
+  .shadow-side {
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
+  }
+  .shadow-hard {
+    --tw-shadow-color: rgba(0, 0, 0, 0.10);
+  }
+  .shadow-strong {
+    --tw-shadow-color: rgba(0, 0, 0, 0.06);
+  }
   .shadow-transparent {
     --tw-shadow-color: transparent;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1738,6 +1757,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .shadow-r-4 {
+    --shadow-right: calc(4 * 1px) 0 calc(4 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  }
   .group-hover\:border-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1759,6 +1781,14 @@
       }
     }
   }
+  .group-hover\:brightness-90 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-brightness: brightness(90%);
+        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+      }
+    }
+  }
   .group-hover\:brightness-97 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1824,6 +1854,36 @@
       }
     }
   }
+  .hover\:bg-button-text-negative-text\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #DC576D 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-negative-text) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-button-text-neutral-text\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #333333 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-neutral-text) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-button-text-primary-text\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #694BB4 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-text-primary-text) 20%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-carousel-dot-active {
     &:hover {
       @media (hover: hover) {
@@ -2100,25 +2160,189 @@
     -webkit-animation: fade-in 0.2s ease-in-out forwards;
   }
 }
+@layer theme, base, components, utilities;
+@layer theme;
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities;
 @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);
+    --shadow-right: calc(2 * 1px) 0 calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-left: calc(2 * -1px) 0 calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-top: 0 calc(2 * -1px) calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-bottom: 0 calc(2 * 1px) calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
   .shadow-around-md {
-    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.02), 0 -5px 5px 0 rgba(0, 0, 0, 0.02), 5px 0 5px 0 rgba(0, 0, 0, 0.02), -5px 0 5px 0 rgba(0, 0, 0, 0.02);
+    --shadow-right: calc(5 * 1px) 0 calc(5 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-left: calc(5 * -1px) 0 calc(5 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-top: 0 calc(5 * -1px) calc(5 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-bottom: 0 calc(5 * 1px) calc(5 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
   .shadow-around-lg {
-    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.02), 0 -10px 10px 0 rgba(0, 0, 0, 0.02), 10px 0 10px 0 rgba(0, 0, 0, 0.02), -10px 0 10px 0 rgba(0, 0, 0, 0.02);
+    --shadow-right: calc(10 * 1px) 0 calc(10 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-left: calc(10 * -1px) 0 calc(10 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-top: 0 calc(10 * -1px) calc(10 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-bottom: 0 calc(10 * 1px) calc(10 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
   .shadow-around-xl {
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.02), 0 -20px 20px 0 rgba(0, 0, 0, 0.02), 20px 0 20px 0 rgba(0, 0, 0, 0.02), -20px 0 20px 0 rgba(0, 0, 0, 0.02);
+    --shadow-right: calc(20 * 1px) 0 calc(20 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-left: calc(20 * -1px) 0 calc(20 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-top: 0 calc(20 * -1px) calc(20 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-bottom: 0 calc(20 * 1px) calc(20 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
 }
 @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: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
     --color-focus: var(--color-purple-500);
   }
@@ -2127,7 +2351,7 @@
   &: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: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
     --color-focus: var(--color-purple-500);
   }
@@ -2135,7 +2359,7 @@
 @layer base {
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-text-default: var(--color-text-light);
-    --color-surface: #333333;
+    --color-surface: #363636;
     --color-on-surface: var(--color-text-light);
     --color-surface-variant: #494949;
     --color-surface-warning: #FBECD9;
@@ -2153,16 +2377,16 @@
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
     --color-description: #999999;
-    --color-disabled-background: #292929;
+    --color-disabled-background: #2C2C2C;
     --color-disabled-text: #666666;
-    --color-disabled-border: #363636;
+    --color-disabled-border: #3D3D3D;
   }
 }
 @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: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
     --color-focus: var(--color-purple-500);
   }
@@ -2170,7 +2394,7 @@
 @layer base {
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-text-default: var(--color-text-light);
-    --color-surface: #333333;
+    --color-surface: #363636;
     --color-on-surface: var(--color-text-light);
     --color-surface-variant: #494949;
     --color-surface-warning: #FBECD9;
@@ -2188,9 +2412,9 @@
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
     --color-description: #999999;
-    --color-disabled-background: #292929;
+    --color-disabled-background: #2C2C2C;
     --color-disabled-text: #666666;
-    --color-disabled-border: #363636;
+    --color-disabled-border: #3D3D3D;
   }
 }
 @layer base {
@@ -2209,12 +2433,10 @@
     --color-progress-indicator-background: var(--color-gray-700);
     --color-overlay-background: #2A2A2A;
     --color-overlay-text: var(--color-text-light);
-    --color-overlay-shadow: #00000055;
+    --color-overlay-shadow: #00000060;
     --color-tabel-header-background: #2F2F2F;
     --color-table-row-hover-background: #2f2841;
     --color-tag-dark-background: #1A1A1A;
-    --color-tooltip-background: #555555;
-    --color-tooltip-text: var(--color-description);
   }
 }
 @layer components {
@@ -2510,7 +2732,7 @@
     outline-style: none;
   }
   *:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --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);
   }
@@ -2583,7 +2805,7 @@
     }
     &:last-child {
       border-right-style: var(--tw-border-style);
-      border-right-width: 2px;
+      border-right-width: 1px;
     }
     &:last-child {
       padding-right: calc(var(--spacing) * 6);
@@ -2863,6 +3085,21 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {

package/dist/css/uncompiled/globals.css

@@ -113,7 +113,7 @@
   }
 
   *:focus-visible {
-    @apply ring-1 ring-focus;
+    @apply ring-2 ring-focus;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -135,7 +135,7 @@
   }
 
   td {
-    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-2 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-1 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
   }
 
   tbody > tr:last-child > td {

package/dist/css/uncompiled/theme/colors-basic.css

@@ -64,7 +64,7 @@
   @variant dark {
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-700);
+    --color-negative: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
 
     --color-focus: var(--color-purple-500);

package/dist/css/uncompiled/theme/colors-component.css

@@ -47,13 +47,13 @@
   --color-carousel-dot-disabled: var(--color-disabled-background);
 
   /* Menu */
-  --color-menu-background: var(--color-surface);
-  --color-menu-text: var(--color-on-surface);
+  --color-menu-background: #F2F2F2;
+  --color-menu-text: var(--color-text-default);
   --color-menu-border: var(--color-border);
 
-  /* Overlay */
-  --color-overlay-background: #FFFFFF;
-  --color-overlay-text: var(--color-text-dark);
+  /* Overlay, Dialog, Modal */
+  --color-overlay-background: #FAFAFA;
+  --color-overlay-text: var(--color-text-default);
   --color-overlay-shadow: #00000039;
 
   /* ProgressIndicator */
@@ -67,7 +67,7 @@
   /* Stepper Bar */
   --color-stepperbar-dot-active: var(--color-primary);
   --color-stepperbar-dot-normal: var(--color-purple-100);
-  --color-stepperbar-dot-disabled: var(--color-disabled-background);
+  --color-stepperbar-dot-disabled: var(--color-description);
 
   /* Table */
   --color-tabel-header-background: #F6FAFF;
@@ -103,7 +103,7 @@
   --color-text-image-dark-text: var(--color-white);
 
   /* Tooltip */
-  --color-tooltip-background: #D9D9D9;
+  --color-tooltip-background: var(--color-menu-background);
   --color-tooltip-text: var(--color-description);
 }
 
@@ -133,10 +133,10 @@
     /* ProgressIndicator */
     --color-progress-indicator-background: var(--color-gray-700);
 
-    /* Overlay */
+    /* Overlay, Dialog, Modal */
     --color-overlay-background: #2A2A2A;
     --color-overlay-text: var(--color-text-light);
-    --color-overlay-shadow: #00000055;
+    --color-overlay-shadow: #00000060;
 
     /* Table */
     --color-tabel-header-background: #2F2F2F;
@@ -144,9 +144,5 @@
 
     /* Tag */
     --color-tag-dark-background: #1A1A1A;
-
-    /* Tooltip */
-    --color-tooltip-background: #555555;
-    --color-tooltip-text: var(--color-description);
   }
 }

package/dist/css/uncompiled/theme/colors-semantic.css

@@ -10,19 +10,24 @@
   --color-text-default: var(--color-text-dark);
 
   --color-primary: var(--color-purple-500);
-  --color-on-primary: var(--color-text-light);
+  --color-on-primary: #FFFFFF;
   --color-secondary: #11243E;
-  --color-on-secondary: var(--color-text-light);
+  --color-on-secondary: #FFFFFF;
   --color-warning: var(--color-yellow-500);
-  --color-on-warning: var(--color-text-light);
+  --color-on-warning: #FFFFFF;
   --color-positive: var(--color-green-500);
-  --color-on-positive: var(--color-text-light);
+  --color-on-positive: #FFFFFF;
   --color-negative: var(--color-red-500);
-  --color-on-negative: var(--color-text-light);
+  --color-on-negative: #FFFFFF;
   --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-input-background: var(--color-surface);
+  --color-input-text: var(--color-on-surface);
+
   --color-surface-variant: #F8F8F8;
   --color-surface-warning: #FBECD9;
   --color-highlight: #3272DF;
@@ -74,7 +79,7 @@
   @variant dark {
     --color-text-default: var(--color-text-light);
 
-    --color-surface: #333333;
+    --color-surface: #363636;
     --color-on-surface: var(--color-text-light);
     --color-surface-variant: #494949;
     --color-surface-warning: #FBECD9;
@@ -95,8 +100,8 @@
     --color-text-highlight: #3272DF;
     --color-description: #999999;
 
-    --color-disabled-background: #292929;
+    --color-disabled-background: #2C2C2C;
     --color-disabled-text: #666666;
-    --color-disabled-border: #363636;
+    --color-disabled-border: #3D3D3D;
   }
 }