@helpwave/hightide 0.3.0 → 0.5.0

package/dist/style/globals.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -280,6 +280,9 @@
   ::-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;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -342,12 +345,21 @@
   .right-0\.5 {
     right: calc(var(--spacing) * 0.5);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
+  .right-1\/2 {
+    right: calc(1/2 * 100%);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
   .right-full {
     right: 100%;
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -414,9 +426,6 @@
       max-width: 96rem;
     }
   }
-  .\!m-0 {
-    margin: calc(var(--spacing) * 0) !important;
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -426,9 +435,6 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -553,10 +559,18 @@
     min-width: calc(var(--spacing) * 4);
     max-width: calc(var(--spacing) * 4);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -565,14 +579,14 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
-  .size-7 {
-    width: calc(var(--spacing) * 7);
-    height: calc(var(--spacing) * 7);
-  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -585,9 +599,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -666,9 +677,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .\!w-fit {
-    width: fit-content !important;
-  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -792,9 +800,6 @@
   .min-w-\[40px\] {
     min-width: 40px;
   }
-  .min-w-\[150px\] {
-    min-width: 150px;
-  }
   .min-w-\[220px\] {
     min-width: 220px;
   }
@@ -819,10 +824,18 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1/2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-2\/3 {
+    --tw-translate-y: calc(2/3 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -922,9 +935,6 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
   .gap-x-1 {
     column-gap: calc(var(--spacing) * 1);
   }
@@ -960,12 +970,6 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
-  .overflow-y-scroll {
-    overflow-y: scroll;
-  }
-  .\!rounded-none {
-    border-radius: 0 !important;
-  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -995,6 +999,51 @@
     border-top-right-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
   }
+  .input-element {
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+  }
   .coloring-outline-hover {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1011,18 +1060,17 @@
       }
     }
   }
-  .\!border-0 {
-    border-style: var(--tw-border-style) !important;
-    border-width: 0px !important;
+  .focus-style-border {
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
   }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-1 {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1059,9 +1107,8 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
+  .border-divider {
+    border-color: var(--color-divider);
   }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
@@ -1174,12 +1221,6 @@
   .bg-negative {
     background-color: var(--color-negative);
   }
-  .bg-negative\/20 {
-    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-negative) 20%, transparent);
-    }
-  }
   .bg-overlay-background {
     background-color: var(--color-overlay-background);
   }
@@ -1237,6 +1278,9 @@
   .bg-surface {
     background-color: var(--color-surface);
   }
+  .bg-surface-variant {
+    background-color: var(--color-surface-variant);
+  }
   .bg-surface-warning {
     background-color: var(--color-surface-warning);
   }
@@ -1336,8 +1380,8 @@
   .stroke-3 {
     stroke-width: 3;
   }
-  .\!p-0 {
-    padding: calc(var(--spacing) * 0) !important;
+  .\!p-2 {
+    padding: calc(var(--spacing) * 2) !important;
   }
   .p-1 {
     padding: calc(var(--spacing) * 1);
@@ -1351,18 +1395,12 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
-  .px-0\.5 {
-    padding-inline: calc(var(--spacing) * 0.5);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1375,12 +1413,6 @@
   .px-16 {
     padding-inline: calc(var(--spacing) * 16);
   }
-  .\!py-0 {
-    padding-block: calc(var(--spacing) * 0) !important;
-  }
-  .py-0\.5 {
-    padding-block: calc(var(--spacing) * 0.5);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1390,9 +1422,6 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-  .py-2\.5 {
-    padding-block: calc(var(--spacing) * 2.5);
-  }
   .py-6\.5 {
     padding-block: calc(var(--spacing) * 6.5);
   }
@@ -1402,15 +1431,15 @@
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-2\.25 {
     padding-bottom: calc(var(--spacing) * 2.25);
   }
-  .pl-0 {
-    padding-left: calc(var(--spacing) * 0);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1608,9 +1637,6 @@
   .text-overlay-text {
     color: var(--color-overlay-text);
   }
-  .text-placeholder {
-    color: var(--color-placeholder);
-  }
   .text-positive {
     color: var(--color-positive);
   }
@@ -1668,12 +1694,6 @@
   .underline {
     text-decoration-line: underline;
   }
-  .decoration-primary {
-    text-decoration-color: var(--color-primary);
-  }
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
   .placeholder-warning {
     &::placeholder {
       color: var(--color-warning);
@@ -1694,10 +1714,6 @@
   .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;
-  }
   .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);
@@ -1706,18 +1722,14 @@
     --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);
   }
-  .\!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;
+  .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 {
     --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);
   }
-  .ring-0 {
-    --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);
   }
@@ -1727,18 +1739,32 @@
   .shadow-strong {
     --tw-shadow-color: rgba(0, 0, 0, 0.05);
   }
-  .\!outline-0 {
-    outline-style: var(--tw-outline-style) !important;
-    outline-width: 0px !important;
+  .focus-style-default {
+    &:focus-visible:not(.focus-style-none) {
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--color-focus);
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
+    }
+  }
+  .focus-style-outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--color-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
   }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .outline-0 {
-    outline-style: var(--tw-outline-style);
-    outline-width: 0px;
-  }
   .outline-primary {
     outline-color: var(--color-primary);
   }
@@ -1774,7 +1800,7 @@
     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-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, 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));
   }
@@ -1932,6 +1958,21 @@
     --coloring-outline-hover: initial;
     --coloring-color: var(--color-description);
   }
+  .reset-coloring-variables {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+  }
+  .focus-style-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1950,6 +1991,11 @@
       cursor: pointer;
     }
   }
+  .group-focus-within\:border-primary {
+    &:is(:where(.group):focus-within *) {
+      border-color: var(--color-primary);
+    }
+  }
   .group-focus-within\/slide\:border-primary {
     &:is(:where(.group\/slide):focus-within *) {
       border-color: var(--color-primary);
@@ -2013,10 +2059,10 @@
       border-color: var(--color-primary);
     }
   }
-  .hover\:border-negative {
+  .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-negative);
+        cursor: pointer;
       }
     }
   }
@@ -2082,22 +2128,12 @@
       }
     }
   }
-  .focus\:border-primary {
-    &:focus {
-      border-color: var(--color-primary);
-    }
-  }
   .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);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-visible\:border-negative {
-    &:focus-visible {
-      border-color: var(--color-negative);
-    }
-  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2349,154 +2385,6 @@
     animation: shimmer 2s infinite;
   }
 }
-@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 {
     --shadow-right: calc(2 * 1px) 0 calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
@@ -2527,156 +2415,8 @@
     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 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 base;
-@layer base;
+@layer base;
+@layer base;
 @layer base {
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-background: var(--color-gray-850);
@@ -2696,7 +2436,7 @@
     --color-label: var(--color-gray-300);
     --color-primary: var(--color-purple-400);
     --color-neutral: var(--color-gray-700);
-    --color-neutral-hover: var(--color-gray-800);
+    --color-neutral-hover: var(--color-gray-600);
     --color-neutral-outline-hover: var(--color-gray-200);
   }
 }
@@ -2720,7 +2460,7 @@
     --color-label: var(--color-gray-300);
     --color-primary: var(--color-purple-400);
     --color-neutral: var(--color-gray-700);
-    --color-neutral-hover: var(--color-gray-800);
+    --color-neutral-hover: var(--color-gray-600);
     --color-neutral-outline-hover: var(--color-gray-200);
   }
 }
@@ -2743,7 +2483,7 @@
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 1);
-    height: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 6);
     align-items: center;
     justify-content: center;
     border-radius: calc(var(--spacing) * 1);
@@ -2913,10 +2653,317 @@
     }
   }
 }
+@layer components {
+  *[data-name="input"]:not(.default-style-none) {
+    height: calc(var(--spacing) * 10);
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="textarea"]:not(.default-style-none) {
+    height: calc(var(--spacing) * 32);
+    width: 100%;
+    resize: none;
+    overflow-y: scroll;
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="select-button"]:not(.default-style-none) {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="select-button-chips"]:not(.default-style-none) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 2.5);
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  *[data-name="checkbox"]:not(.default-style-none) {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--color-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+    &:not([data-disabled]):not([data-invalid]):not([data-value='false']) {
+      border-color: var(--color-primary);
+      background-color: color-mix(in srgb, #694BB4 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+      color: var(--color-primary);
+    }
+    &:not([data-disabled]):not([data-invalid])[data-value='false'] {
+      border-color: var(--color-border);
+      background-color: transparent;
+      color: var(--color-border);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
+}
 @layer components {
   * {
     list-style-type: none;
     border-color: var(--color-border);
+    &::placeholder {
+      color: var(--color-placeholder);
+    }
     &:where([data-theme=dark], [data-theme=dark] *) {
       color-scheme: dark;
     }
@@ -2929,11 +2976,6 @@
     cursor: pointer;
     text-wrap: nowrap;
   }
-  input {
-    &::placeholder {
-      color: var(--color-placeholder);
-    }
-  }
   *:disabled {
     cursor: not-allowed;
   }
@@ -2949,26 +2991,16 @@
     outline-style: var(--tw-outline-style);
     outline-width: 0px;
   }
-  *:focus-visible {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-offset: 2px;
-    outline-color: var(--color-focus);
-  }
-  .focus-style-within:focus-within {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-color: var(--color-focus);
-  }
-  .focus-style-none {
-    outline-offset: 0px;
-    &:focus-within {
-      outline-style: var(--tw-outline-style);
-      outline-width: 0px;
-    }
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 0px;
+  * {
+    &:focus-visible:not(.focus-style-none) {
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--color-focus);
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
     }
   }
   table {
@@ -3350,36 +3382,6 @@
     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);
-  }
-}
-@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 {