@helpwave/hightide 0.3.0 → 0.4.0

package/dist/style/globals.css

@@ -342,6 +342,9 @@
   .right-0\.5 {
     right: calc(var(--spacing) * 0.5);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -414,9 +417,6 @@
       max-width: 96rem;
     }
   }
-  .\!m-0 {
-    margin: calc(var(--spacing) * 0) !important;
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -553,9 +553,13 @@
     min-width: calc(var(--spacing) * 4);
     max-width: calc(var(--spacing) * 4);
   }
-  .size-4 {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
   }
   .size-5 {
     width: calc(var(--spacing) * 5);
@@ -565,14 +569,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 +589,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -666,9 +667,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .\!w-fit {
-    width: fit-content !important;
-  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -681,9 +679,6 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -922,9 +917,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 +952,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 +981,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 +1042,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,10 +1089,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1174,12 +1200,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);
   }
@@ -1336,9 +1356,6 @@
   .stroke-3 {
     stroke-width: 3;
   }
-  .\!p-0 {
-    padding: calc(var(--spacing) * 0) !important;
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1351,18 +1368,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 +1386,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 +1395,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 +1404,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 +1610,6 @@
   .text-overlay-text {
     color: var(--color-overlay-text);
   }
-  .text-placeholder {
-    color: var(--color-placeholder);
-  }
   .text-positive {
     color: var(--color-positive);
   }
@@ -1668,12 +1667,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 +1687,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 +1695,10 @@
     --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;
-  }
   .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 +1708,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);
   }
@@ -1932,6 +1927,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 +1960,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 +2028,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 +2097,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 +2354,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 +2384,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);
@@ -2913,10 +2622,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 +2945,6 @@
     cursor: pointer;
     text-wrap: nowrap;
   }
-  input {
-    &::placeholder {
-      color: var(--color-placeholder);
-    }
-  }
   *:disabled {
     cursor: not-allowed;
   }
@@ -2949,26 +2960,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 +3351,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 {