@helpwave/hightide 0.1.18 → 0.1.20

package/dist/css/globals.css

@@ -62,6 +62,7 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
@@ -94,11 +95,11 @@
     --color-text-label: #4D4D4D;
     --color-divider: #E6E6E6;
     --color-description: #555555;
-    --color-disabled-background: #BBBBBB;
-    --color-disabled-text: #555555;
-    --color-disabled-icon: #555555;
-    --color-disabled-border: #999999;
-    --color-disabled-outline: #999999;
+    --color-disabled-background: #E2E2E2;
+    --color-disabled-text: #888888;
+    --color-disabled-icon: var(--color-disabled-text);
+    --color-disabled-border: #CFCFCF;
+    --color-disabled-outline: var(--color-disabled-border);
     --color-border: #CCCCCC;
     --color-focus: var(--color-purple-400);
     --color-button-outline-primary-icon: var(--color-primary);
@@ -138,9 +139,11 @@
     --color-menu-border: var(--color-border);
     --color-overlay-background: #FFFFFF;
     --color-overlay-text: var(--color-text-dark);
+    --color-overlay-shadow: #00000039;
     --color-progress-indicator-fill: var(--color-primary);
     --color-progress-indicator-background: var(--color-gray-300);
-    --color-property-title-background: #E6E6E6;
+    --color-property-title-background: #EDEDED;
+    --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);
@@ -171,7 +174,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: var(--color-overlay-background);
+    --color-tooltip-background: #D9D9D9;
     --color-tooltip-text: var(--color-description);
     --font-space: 'Space Grotesk', sans-serif;
   }
@@ -340,9 +343,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
@@ -361,9 +361,6 @@
   .right-full {
     right: 100%;
   }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
   .bottom-full {
     bottom: 100%;
   }
@@ -439,9 +436,6 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
-  .mt-0\.5 {
-    margin-top: calc(var(--spacing) * 0.5);
-  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -478,16 +472,61 @@
   .ml-\[6px\] {
     margin-left: 6px;
   }
+  .flex-row-0 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 0);
+  }
+  .flex-row-1 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 1);
+  }
+  .flex-row-2 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+  }
+  .flex-row-4 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .flex-row-8 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 8);
+  }
   .row {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
   }
-  .col {
+  .flex-col-0 {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+  }
+  .flex-col-1 {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .flex-col-2 {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
   }
+  .flex-col-3 {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 3);
+  }
+  .flex-col-4 {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 4);
+  }
   .\!block {
     display: block !important;
   }
@@ -509,10 +548,6 @@
   .table {
     display: table;
   }
-  .size-3 {
-    width: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 3);
-  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -545,6 +580,9 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -572,12 +610,36 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-\[500px\] {
-    max-height: 500px;
+  .max-h-0 {
+    max-height: calc(var(--spacing) * 0);
+  }
+  .max-h-8 {
+    max-height: calc(var(--spacing) * 8);
+  }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
+  .\!min-h-10 {
+    min-height: calc(var(--spacing) * 10) !important;
   }
   .min-h-3 {
     min-height: calc(var(--spacing) * 3);
   }
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
+  .min-h-15 {
+    min-height: calc(var(--spacing) * 15);
+  }
+  .min-h-60 {
+    min-height: calc(var(--spacing) * 60);
+  }
   .min-h-\[250px\] {
     min-height: 250px;
   }
@@ -587,9 +649,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .\!w-\[200px\] {
-    width: 200px !important;
-  }
   .\!w-fit {
     width: fit-content !important;
   }
@@ -605,6 +664,9 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -644,6 +706,12 @@
   .max-w-6 {
     max-width: calc(var(--spacing) * 6);
   }
+  .max-w-20 {
+    max-width: calc(var(--spacing) * 20);
+  }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
@@ -659,21 +727,24 @@
   .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-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
   }
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-96 {
+    min-width: calc(var(--spacing) * 96);
+  }
   .min-w-\[40px\] {
     min-width: 40px;
   }
@@ -709,6 +780,9 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -785,47 +859,32 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .gap-x-0 {
-    column-gap: calc(var(--spacing) * 0);
-  }
-  .gap-x-1 {
-    column-gap: calc(var(--spacing) * 1);
-  }
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
-  .gap-x-4 {
-    column-gap: calc(var(--spacing) * 4);
-  }
-  .gap-x-8 {
-    column-gap: calc(var(--spacing) * 8);
-  }
-  .gap-y-0 {
-    row-gap: calc(var(--spacing) * 0);
-  }
   .gap-y-1 {
     row-gap: calc(var(--spacing) * 1);
   }
   .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);
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .\!rounded-none {
     border-radius: 0 !important;
   }
@@ -894,6 +953,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
   }
+  .\!border-none {
+    --tw-border-style: none !important;
+    border-style: none !important;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -964,18 +1027,18 @@
   .\!bg-green-200 {
     background-color: var(--color-green-200) !important;
   }
+  .\!bg-property-title-background {
+    background-color: var(--color-property-title-background) !important;
+  }
   .\!bg-red-400 {
     background-color: var(--color-red-400) !important;
   }
+  .\!bg-warning {
+    background-color: var(--color-warning) !important;
+  }
   .\!bg-yellow-200 {
     background-color: var(--color-yellow-200) !important;
   }
-  .bg-black\/30 {
-    background-color: color-mix(in srgb, #000000 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
   .bg-button-solid-negative-background {
     background-color: var(--color-button-solid-negative-background);
   }
@@ -1027,6 +1090,9 @@
   .bg-overlay-background {
     background-color: var(--color-overlay-background);
   }
+  .bg-overlay-shadow {
+    background-color: var(--color-overlay-shadow);
+  }
   .bg-positive {
     background-color: var(--color-positive);
   }
@@ -1117,6 +1183,12 @@
   .bg-warning {
     background-color: var(--color-warning);
   }
+  .bg-warning\/20 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
+    }
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1210,6 +1282,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .\!px-0 {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1243,15 +1318,6 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -1317,6 +1383,9 @@
   .\!text-red-400 {
     color: var(--color-red-400) !important;
   }
+  .\!text-surface-warning {
+    color: var(--color-surface-warning) !important;
+  }
   .\!text-transparent {
     color: transparent !important;
   }
@@ -1428,6 +1497,9 @@
   .text-primary {
     color: var(--color-primary);
   }
+  .text-property-title-text {
+    color: var(--color-property-title-text);
+  }
   .text-secondary {
     color: var(--color-secondary);
   }
@@ -1470,6 +1542,9 @@
   .text-tag-yellow-text {
     color: var(--color-tag-yellow-text);
   }
+  .text-text-default {
+    color: var(--color-text-default);
+  }
   .text-text-image-dark-background {
     color: var(--color-text-image-dark-background);
   }
@@ -1532,6 +1607,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .\!shadow-none {
     --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;
@@ -1625,15 +1703,33 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    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));
   }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1663,18 +1759,18 @@
       }
     }
   }
-  .group-hover\:brightness-95 {
+  .group-hover\:brightness-97 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        --tw-brightness: brightness(95%);
+        --tw-brightness: brightness(97%);
         filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
       }
     }
   }
-  .first\:rounded-t-lg {
+  .first\:rounded-t-md {
     &:first-child {
-      border-top-left-radius: var(--radius-lg);
-      border-top-right-radius: var(--radius-lg);
+      border-top-left-radius: var(--radius-md);
+      border-top-right-radius: var(--radius-md);
     }
   }
   .first\:rounded-l-md {
@@ -1689,10 +1785,10 @@
       border-bottom-right-radius: var(--radius-md);
     }
   }
-  .last\:rounded-b-lg {
+  .last\:rounded-b-md {
     &:last-child {
-      border-bottom-right-radius: var(--radius-lg);
-      border-bottom-left-radius: var(--radius-lg);
+      border-bottom-right-radius: var(--radius-md);
+      border-bottom-left-radius: var(--radius-md);
     }
   }
   .focus-within\:border-primary {
@@ -1815,10 +1911,10 @@
       }
     }
   }
-  .hover\:brightness-95 {
+  .hover\:brightness-97 {
     &:hover {
       @media (hover: hover) {
-        --tw-brightness: brightness(95%);
+        --tw-brightness: brightness(97%);
         filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
       }
     }
@@ -1828,11 +1924,6 @@
       border-color: var(--color-primary);
     }
   }
-  .focus\:border-transparent {
-    &:focus {
-      border-color: transparent;
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1845,15 +1936,6 @@
       outline-style: none;
     }
   }
-  .focus\:hover\:border-primary {
-    &:focus {
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--color-primary);
-        }
-      }
-    }
-  }
   .desktop\:block {
     @media (width >= 64rem) {
       display: block;
@@ -1882,6 +1964,14 @@
       opacity: 0;
     }
   }
+  @-webkit-keyframes bigLeftUp {
+    0%, 25% {
+      stroke-dashoffset: 1000;
+    }
+    50%, 75%, 100% {
+      stroke-dashoffset: 0;
+    }
+  }
   @keyframes bigLeftUp {
     0%, 25% {
       stroke-dashoffset: 1000;
@@ -1890,6 +1980,14 @@
       stroke-dashoffset: 0;
     }
   }
+  @-webkit-keyframes bigRightDown {
+    0%, 25%, 50% {
+      stroke-dashoffset: 0;
+    }
+    75%, 100% {
+      stroke-dashoffset: -1000;
+    }
+  }
   @keyframes bigRightDown {
     0%, 25%, 50% {
       stroke-dashoffset: 0;
@@ -1898,6 +1996,14 @@
       stroke-dashoffset: -1000;
     }
   }
+  @-webkit-keyframes smallLeftUp {
+    0%, 25%, 50% {
+      stroke-dashoffset: 1000;
+    }
+    75%, 100% {
+      stroke-dashoffset: 0;
+    }
+  }
   @keyframes smallLeftUp {
     0%, 25%, 50% {
       stroke-dashoffset: 1000;
@@ -1906,6 +2012,14 @@
       stroke-dashoffset: 0;
     }
   }
+  @-webkit-keyframes smallRightDown {
+    0%, 25% {
+      stroke-dashoffset: 0;
+    }
+    50%, 75%, 100% {
+      stroke-dashoffset: -1000;
+    }
+  }
   @keyframes smallRightDown {
     0%, 25% {
       stroke-dashoffset: 0;
@@ -1914,26 +2028,76 @@
       stroke-dashoffset: -1000;
     }
   }
+  @keyframes pop-in {
+    0% {
+      opacity: 0;
+      scale: 80%;
+    }
+    100% {
+      opacity: 1;
+      scale: 100%;
+    }
+  }
+  @keyframes pop-out {
+    0% {
+      opacity: 1;
+      scale: 100%;
+    }
+    100% {
+      opacity: 0;
+      scale: 80%;
+    }
+  }
+  @keyframes shimmer {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+  .animate-pop-in {
+    animation: pop-in 0.2s ease-in-out;
+  }
+  .animate-pop-out {
+    animation: pop-out 0.2s ease-in-out forwards;
+  }
+  .shimmer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    height: 100%;
+    width: 200%;
+    background: linear-gradient( 120deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%, transparent 100% );
+    animation: shimmer 2s infinite;
+  }
   .animate-fade {
     animation: fade-out 3s ease-in-out;
   }
   .animate-wave-big-left-up {
     animation: bigLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
   }
   .animate-wave-big-right-down {
     animation: bigRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
   }
   .animate-wave-small-left-up {
     animation: smallLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
   }
   .animate-wave-small-right-down {
     animation: smallRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
   }
   .animate-tooltip-fade-in {
     animation: fade-in 0.2s ease-in-out forwards;
+    -webkit-animation: fade-in 0.2s ease-in-out forwards;
   }
   .animate-tooltip-fade-out {
     animation: fade-in 0.2s ease-in-out forwards;
+    -webkit-animation: fade-in 0.2s ease-in-out forwards;
   }
 }
 @layer utilities {
@@ -1989,8 +2153,9 @@
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
     --color-description: #999999;
-    --color-disabled-background: #555555;
-    --color-disabled-text: #999999;
+    --color-disabled-background: #292929;
+    --color-disabled-text: #666666;
+    --color-disabled-border: #363636;
   }
 }
 @layer base {
@@ -2023,8 +2188,9 @@
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
     --color-description: #999999;
-    --color-disabled-background: #555555;
-    --color-disabled-text: #999999;
+    --color-disabled-background: #292929;
+    --color-disabled-text: #666666;
+    --color-disabled-border: #363636;
   }
 }
 @layer base {
@@ -2043,8 +2209,12 @@
     --color-progress-indicator-background: var(--color-gray-700);
     --color-overlay-background: #2A2A2A;
     --color-overlay-text: var(--color-text-light);
+    --color-overlay-shadow: #00000055;
     --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 {
@@ -2155,12 +2325,11 @@
   .btn-sm {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 1);
     height: calc(var(--spacing) * 8);
     min-height: calc(var(--spacing) * 8);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 1);
     border-radius: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 1);
@@ -2173,7 +2342,6 @@
     min-height: calc(var(--spacing) * 10);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 2);
     border-radius: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
@@ -2186,7 +2354,6 @@
     min-height: calc(var(--spacing) * 12);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 2);
     border-radius: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2.5);
@@ -2194,56 +2361,52 @@
   .icon-btn-xs {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 0);
     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;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 0);
     height: calc(var(--spacing) * 8);
     min-height: calc(var(--spacing) * 8);
     width: calc(var(--spacing) * 8);
     min-width: calc(var(--spacing) * 8);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 1);
     border-radius: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 1.5);
   }
   .icon-btn-md {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 0);
     height: calc(var(--spacing) * 10);
     min-height: calc(var(--spacing) * 10);
     width: calc(var(--spacing) * 10);
     min-width: calc(var(--spacing) * 10);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 2);
     border-radius: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 2);
   }
   .icon-btn-lg {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 0);
     height: calc(var(--spacing) * 12);
     min-height: calc(var(--spacing) * 12);
     width: calc(var(--spacing) * 12);
     min-width: calc(var(--spacing) * 12);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 2);
     border-radius: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 3);
   }
@@ -2251,7 +2414,6 @@
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
-    row-gap: calc(var(--spacing) * 2);
     border-radius: 0.25rem;
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 2);
@@ -2262,7 +2424,6 @@
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
-    row-gap: calc(var(--spacing) * 2);
     border-radius: var(--radius-md);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 4);
@@ -2273,7 +2434,6 @@
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
-    row-gap: calc(var(--spacing) * 2);
     border-radius: var(--radius-lg);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 8);
@@ -2350,10 +2510,16 @@
     outline-style: none;
   }
   *:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
   }
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation: none !important;
+      transition-property: none !important;
+    }
+  }
   table {
     table-layout: fixed;
     border-collapse: separate;
@@ -2385,7 +2551,7 @@
     }
     &:last-child {
       border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
+      border-right-width: 2px;
     }
     &:last-child {
       padding-right: calc(var(--spacing) * 6);
@@ -2417,7 +2583,7 @@
     }
     &:last-child {
       border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
+      border-right-width: 2px;
     }
     &:last-child {
       padding-right: calc(var(--spacing) * 6);
@@ -2668,6 +2834,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;
@@ -2745,6 +2915,7 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
     }