@vsn-ux/gaia-styles 1.0.0-alpha.2

package/dist/all.css

@@ -0,0 +1,1135 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+:root {
+  --ga-color-blue-10: #edf4fe;
+  --ga-color-blue-40: #93bbf9;
+  --ga-color-blue-70: #1f4ddb;
+  --ga-color-border-action: var(--ga-color-primary);
+  --ga-color-border-action-hover: var(--ga-color-primary-60);
+  --ga-color-border-action-hover-2: var(--ga-color-secondary-30);
+  --ga-color-border-disabled: var(--ga-color-neutral);
+  --ga-color-border-error: var(--ga-color-error);
+  --ga-color-border-focus: var(--ga-color-primary);
+  --ga-color-border-information: var(--ga-color-information);
+  --ga-color-border-primary: var(--ga-color-neutral-30);
+  --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-warning: var(--ga-color-warning);
+  --ga-color-cyan-60: #377ea0;
+  --ga-color-cyan-70: #2a6480;
+  --ga-color-cyan-80: #1f4e66;
+  --ga-color-cyan-90: #133445;
+  --ga-color-error: var(--ga-color-red-70);
+  --ga-color-error-light: var(--ga-color-utility-red-light);
+  --ga-color-green-10: #eef5ee;
+  --ga-color-green-40: #9bc59b;
+  --ga-color-green-70: #2e6b31;
+  --ga-color-grey-10: #f2f2f2;
+  --ga-color-grey-40: #b9b9b9;
+  --ga-color-indigo-10: #f0f2fe;
+  --ga-color-indigo-40: #adb4f9;
+  --ga-color-information: var(--ga-color-blue-70);
+  --ga-color-information-light: var(--ga-color-utility-blue-light);
+  --ga-color-lime-10: #edf6dd;
+  --ga-color-lime-40: #a5c656;
+  --ga-color-neutral: var(--ga-color-neutral-30);
+  --ga-color-neutral-10: #f2f3f5;
+  --ga-color-neutral-20: #e2e4e9;
+  --ga-color-neutral-30: #cccfd7;
+  --ga-color-neutral-50: #8f95a4;
+  --ga-color-neutral-60: #6f7687;
+  --ga-color-orange-10: #fcf0e7;
+  --ga-color-orange-20: #fae0ce;
+  --ga-color-orange-30: #f5c3a1;
+  --ga-color-orange-40: #f2a676;
+  --ga-color-orange-60: #bb5822;
+  --ga-color-pink-10: #fbeefc;
+  --ga-color-pink-40: #e79dee;
+  --ga-color-primary: var(--ga-color-cyan-80);
+  --ga-color-primary-60: var(--ga-color-cyan-60);
+  --ga-color-primary-70: var(--ga-color-cyan-70);
+  --ga-color-primary-90: var(--ga-color-cyan-90);
+  --ga-color-purple-10: #f3f1fe;
+  --ga-color-purple-40: #c3acf9;
+  --ga-color-red-10: #fcf1ee;
+  --ga-color-red-40: #eca79e;
+  --ga-color-red-70: #b0241d;
+  --ga-color-rose-10: #fcf0f4;
+  --ga-color-rose-40: #efa1bd;
+  --ga-color-secondary: var(--ga-color-orange-20);
+  --ga-color-secondary-10: var(--ga-color-orange-10);
+  --ga-color-secondary-30: var(--ga-color-orange-30);
+  --ga-color-success: var(--ga-color-green-70);
+  --ga-color-success-light: var(--ga-color-utility-green-light);
+  --ga-color-surface-action: var(--ga-color-primary);
+  --ga-color-surface-action-hover: var(--ga-color-primary-90);
+  --ga-color-surface-action-hover-2: var(--ga-color-orange-20);
+  --ga-color-surface-disable-selected: var(--ga-color-neutral-50);
+  --ga-color-surface-disabled: var(--ga-color-neutral-20);
+  --ga-color-surface-error: var(--ga-color-utility-red-light);
+  --ga-color-surface-information: var(--ga-color-information-light);
+  --ga-color-surface-page: var(--ga-color-neutral-10);
+  --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-success: var(--ga-color-success-light);
+  --ga-color-surface-warning: var(--ga-color-utility-orange-light);
+  --ga-color-teal-10: #ecf5f4;
+  --ga-color-teal-20: #d5e8e6;
+  --ga-color-teal-30: #b4d7d4;
+  --ga-color-teal-40: #92c3c0;
+  --ga-color-teal-50: #51a39e;
+  --ga-color-teal-60: #3a837e;
+  --ga-color-teal-70: #2c6764;
+  --ga-color-teal-80: #21514e;
+  --ga-color-teal-90: #143734;
+  --ga-color-teal-100: #081f1f;
+  --ga-color-text-action: var(--ga-color-primary);
+  --ga-color-text-action-hover: var(--ga-color-primary-90);
+  --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-disable-selected: var(--ga-color-neutral-60);
+  --ga-color-text-disabled: var(--ga-color-utility-grey);
+  --ga-color-text-error: var(--ga-color-primary-90);
+  --ga-color-text-headings: var(--ga-color-primary-90);
+  --ga-color-text-information: var(--ga-color-primary-90);
+  --ga-color-text-on-action: var(--ga-color-secondary-10);
+  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-success: var(--ga-color-primary-90);
+  --ga-color-text-warning: var(--ga-color-primary-90);
+  --ga-color-utility-blue: var(--ga-color-blue-40);
+  --ga-color-utility-blue-light: var(--ga-color-blue-10);
+  --ga-color-utility-green: var(--ga-color-green-40);
+  --ga-color-utility-green-light: var(--ga-color-green-10);
+  --ga-color-utility-grey: var(--ga-color-grey-40);
+  --ga-color-utility-grey-light: var(--ga-color-grey-10);
+  --ga-color-utility-indigo: var(--ga-color-indigo-40);
+  --ga-color-utility-indigo-light: var(--ga-color-indigo-10);
+  --ga-color-utility-lime: var(--ga-color-lime-40);
+  --ga-color-utility-lime-light: var(--ga-color-lime-10);
+  --ga-color-utility-orange: var(--ga-color-orange-40);
+  --ga-color-utility-orange-light: var(--ga-color-orange-10);
+  --ga-color-utility-pink: var(--ga-color-pink-40);
+  --ga-color-utility-pink-light: var(--ga-color-pink-10);
+  --ga-color-utility-purple: var(--ga-color-purple-40);
+  --ga-color-utility-purple-light: var(--ga-color-purple-10);
+  --ga-color-utility-red: var(--ga-color-red-40);
+  --ga-color-utility-red-light: var(--ga-color-red-10);
+  --ga-color-utility-rose: var(--ga-color-rose-40);
+  --ga-color-utility-rose-light: var(--ga-color-rose-10);
+  --ga-color-utility-teal: var(--ga-color-teal-40);
+  --ga-color-utility-teal-light: var(--ga-color-teal-10);
+  --ga-color-utility-yellow: var(--ga-color-yellow-40);
+  --ga-color-utility-yellow-light: var(--ga-color-yellow-10);
+  --ga-color-warning: var(--ga-color-orange-60);
+  --ga-color-warning-light: var(--ga-color-utility-orange-light);
+  --ga-color-white: #ffffff;
+  --ga-color-yellow-10: #fdf5ae;
+  --ga-color-yellow-40: #e1b402;
+  --ga-font-family: "Inter";
+  --ga-radius: 4px;
+  --ga-radius-round: 99999px;
+  --ga-radius-sharp: 0.28px;
+  --ga-size-0: 0;
+  --ga-size-2: 2px;
+  --ga-size-4: 4px;
+  --ga-size-8: 8px;
+  --ga-size-10: 10px;
+  --ga-size-11: 11px;
+  --ga-size-12: 12px;
+  --ga-size-14: 14px;
+  --ga-size-16: 16px;
+  --ga-size-20: 20px;
+  --ga-size-24: 24px;
+  --ga-size-32: 32px;
+  --ga-size-36: 36px;
+  --ga-size-40: 40px;
+  --ga-size-48: 48px;
+  --ga-size-64: 64px;
+  --ga-size-80: 80px;
+  --ga-size-96: 96px;
+  --ga-size-160: 160px;
+  --ga-size-font-2xl: var(--ga-size-24);
+  --ga-size-font-3xl: var(--ga-size-36);
+  --ga-size-font-lg: var(--ga-size-16);
+  --ga-size-font-md: var(--ga-size-14);
+  --ga-size-font-sm: var(--ga-size-12);
+  --ga-size-font-xl: var(--ga-size-20);
+  --ga-size-font-xs: var(--ga-size-11);
+}
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --color-cyan-60: var(--ga-color-cyan-60);
+    --color-cyan-70: var(--ga-color-cyan-70);
+    --color-cyan-80: var(--ga-color-cyan-80);
+    --color-cyan-90: var(--ga-color-cyan-90);
+    --color-blue-10: var(--ga-color-blue-10);
+    --color-blue-40: var(--ga-color-blue-40);
+    --color-green-10: var(--ga-color-green-10);
+    --color-green-40: var(--ga-color-green-40);
+    --color-grey-10: var(--ga-color-grey-10);
+    --color-grey-40: var(--ga-color-grey-40);
+    --color-indigo-10: var(--ga-color-indigo-10);
+    --color-indigo-40: var(--ga-color-indigo-40);
+    --color-lime-10: var(--ga-color-lime-10);
+    --color-lime-40: var(--ga-color-lime-40);
+    --color-neutral: var(--ga-color-neutral);
+    --color-neutral-10: var(--ga-color-neutral-10);
+    --color-neutral-20: var(--ga-color-neutral-20);
+    --color-neutral-30: var(--ga-color-neutral-30);
+    --color-orange-10: var(--ga-color-orange-10);
+    --color-orange-20: var(--ga-color-orange-20);
+    --color-orange-30: var(--ga-color-orange-30);
+    --color-orange-40: var(--ga-color-orange-40);
+    --color-pink-10: var(--ga-color-pink-10);
+    --color-pink-40: var(--ga-color-pink-40);
+    --color-purple-10: var(--ga-color-purple-10);
+    --color-purple-40: var(--ga-color-purple-40);
+    --color-red-10: var(--ga-color-red-10);
+    --color-red-40: var(--ga-color-red-40);
+    --color-rose-10: var(--ga-color-rose-10);
+    --color-rose-40: var(--ga-color-rose-40);
+    --color-teal-10: var(--ga-color-teal-10);
+    --color-teal-20: var(--ga-color-teal-20);
+    --color-teal-30: var(--ga-color-teal-30);
+    --color-teal-40: var(--ga-color-teal-40);
+    --color-teal-50: var(--ga-color-teal-50);
+    --color-teal-60: var(--ga-color-teal-60);
+    --color-teal-70: var(--ga-color-teal-70);
+    --color-teal-80: var(--ga-color-teal-80);
+    --color-teal-90: var(--ga-color-teal-90);
+    --color-teal-100: var(--ga-color-teal-100);
+    --color-yellow-10: var(--ga-color-yellow-10);
+    --color-yellow-40: var(--ga-color-yellow-40);
+    --color-black: #000;
+    --color-white: #fff;
+    --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
+    --font-inter--font-feature-settings: 'liga' 1, 'calt' 1;
+    --default-font-family: var(--font-inter);
+    --text-xs: var(--ga-size-font-xs);
+    --text-sm: var(--ga-size-font-sm);
+    --text-md: var(--ga-size-font-md);
+    --text-lg: var(--ga-size-font-lg);
+    --text-xl: var(--ga-size-font-xl);
+    --text-2xl: var(--ga-size-font-2xl);
+    --text-3xl: var(--ga-size-font-3xl);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --radius: var(--ga-radius);
+    --radius-sharp: var(--ga-radius-sharp);
+    --spacing: 0.25rem;
+  }
+}
+@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;
+  }
+  body {
+    line-height: inherit;
+  }
+  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;
+    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 base {
+  body {
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+    font-feature-settings: 'liga' 1, 'calt' 1;
+    color: var(--ga-color-cyan-90);
+  }
+}
+@layer components {
+  .ga-avatar {
+    display: inline-flex;
+    height: calc(0.25rem * 10);
+    width: calc(0.25rem * 10);
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    vertical-align: middle;
+    --tw-font-weight: 700;
+    font-weight: 700;
+    &.ga-avatar--small {
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 6);
+      font-size: var(--ga-size-font-sm);
+    }
+    &.ga-avatar--large {
+      height: calc(0.25rem * 16);
+      width: calc(0.25rem * 16);
+      font-size: var(--ga-size-font-2xl);
+    }
+  }
+  .ga-badge {
+    display: inline-block;
+    border-radius: calc(infinity * 1px);
+    vertical-align: baseline;
+    &.ga-badge--text {
+      min-width: calc(0.25rem * 6);
+      padding: calc(0.25rem * 1);
+      text-align: center;
+      font-size: var(--ga-size-font-sm);
+      --tw-leading: calc(0.25rem * 4);
+      line-height: calc(0.25rem * 4);
+      --tw-font-weight: 500;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    &.ga-badge--dot {
+      height: calc(0.25rem * 2);
+      width: calc(0.25rem * 2);
+    }
+    &.ga-badge--default {
+      background-color: var(--ga-color-cyan-80);
+      color: var(--ga-color-orange-10);
+    }
+    &.ga-badge--default-inverted {
+      background-color: var(--ga-color-orange-20);
+      color: var(--ga-color-cyan-90);
+    }
+    &.ga-badge--information {
+      background-color: var(--ga-color-blue-40);
+      color: var(--ga-color-cyan-90);
+    }
+    &.ga-badge--error {
+      background-color: var(--ga-color-red-40);
+      color: var(--ga-color-cyan-90);
+    }
+    &.ga-badge--warning {
+      background-color: var(--ga-color-orange-40);
+      color: var(--ga-color-cyan-90);
+    }
+    &.ga-badge--success {
+      background-color: var(--ga-color-green-40);
+      color: var(--ga-color-cyan-90);
+    }
+    &.ga-badge--muted {
+      background-color: #fff;
+      color: var(--ga-color-cyan-70);
+      --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(--ga-color-grey-40);
+      --tw-ring-inset: inset;
+    }
+  }
+  .ga-button {
+    display: inline-flex;
+    height: calc(0.25rem * 10);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    gap: calc(0.25rem * 2);
+    border-radius: var(--ga-radius);
+    padding-inline: calc(0.25rem * 4);
+    vertical-align: middle;
+    font-size: var(--ga-size-font-md);
+    --tw-leading: calc(0.25rem * 1);
+    line-height: calc(0.25rem * 1);
+    --tw-font-weight: 700;
+    font-weight: 700;
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &.ga-button--primary {
+      background-color: var(--ga-color-surface-action);
+      color: var(--ga-color-text-on-action);
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover);
+      }
+      &:active {
+        background-color: var(--ga-color-primary-70);
+      }
+      &:disabled {
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disabled);
+      }
+    }
+    &.ga-button--secondary {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-action);
+      background-color: var(--ga-color-surface-primary);
+      color: var(--ga-color-text-action);
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+      &:active {
+        background-color: var(--ga-color-surface-primary);
+      }
+      &:disabled {
+        border-color: var(--ga-color-border-disabled);
+        background-color: var(--ga-color-surace-page);
+        color: var(--ga-color-text-disabled);
+      }
+    }
+    &.ga-button--ghost {
+      background-color: transparent;
+      color: var(--ga-color-text-action);
+      &:hover {
+        background-color: var(--ga-color-utility-teal-light);
+      }
+      &:active {
+        background-color: transparent;
+      }
+      &:disabled {
+        background-color: transparent;
+        color: var(--ga-color-text-disabled);
+      }
+    }
+    &.ga-button--transparent {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-action);
+      background-color: transparent;
+      color: var(--ga-color-text-action);
+      &:hover {
+        background-color: var(--ga-color-utility-teal-light);
+      }
+      &:focus-visible {
+        border-color: var(--ga-color-border-action);
+      }
+      &:active {
+        background-color: transparent;
+      }
+      &:disabled {
+        border-color: var(--ga-color-border-disabled);
+        background-color: transparent;
+        color: var(--ga-color-text-disabled);
+      }
+    }
+    &.ga-button--icon-only {
+      width: calc(0.25rem * 10);
+      padding-inline: calc(0.25rem * 0);
+    }
+  }
+  .ga-card {
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: #fff;
+    padding: calc(0.25rem * 4);
+    font-size: var(--ga-size-font-md);
+    &.ga-card--selectable {
+      cursor: pointer;
+      &:hover {
+        border-color: var(--ga-color-border-action-hover);
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--ga-color-border-focus);
+      }
+    }
+    &.ga-card--disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  .ga-checkbox {
+    position: relative;
+    display: inline-flex;
+    gap: calc(0.25rem * 2);
+    .ga-checkbox__native {
+      height: calc(0.25rem * 5);
+      width: calc(0.25rem * 5);
+      flex-shrink: 0;
+      opacity: 0%;
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+    }
+    .ga-checkbox__marker {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: calc(0.25rem * 5);
+      width: calc(0.25rem * 5);
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--ga-color-border-action);
+      color: #fff;
+      .ga-checkbox__marker__indicator-checked, .ga-checkbox__marker__indicator-indeterminate {
+        display: none;
+      }
+    }
+    .ga-checkbox__native:focus-visible ~ .ga-checkbox__marker {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    .ga-checkbox__native:not(:disabled):hover ~ .ga-checkbox__marker {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    .ga-checkbox__native:checked ~ .ga-checkbox__marker {
+      background-color: var(--ga-color-surface-action);
+      .ga-checkbox__marker__indicator-checked {
+        display: block;
+      }
+    }
+    .ga-checkbox__native:indeterminate ~ .ga-checkbox__marker {
+      background-color: var(--ga-color-surface-action);
+      .ga-checkbox__marker__indicator-indeterminate {
+        display: block;
+      }
+    }
+    .ga-checkbox__native:not(:disabled):checked:hover ~ .ga-checkbox__marker, .ga-checkbox__native:not(:disabled):indeterminate:hover ~ .ga-checkbox__marker {
+      background-color: var(--ga-color-surface-action-hover);
+    }
+    .ga-checkbox__native:disabled ~ .ga-checkbox__marker {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disabled);
+    }
+    &.ga-checkbox--invalid .ga-checkbox__marker {
+      border-color: var(--ga-color-border-error);
+      background-color: var(--ga-color-surface-error);
+      color: var(--ga-color-border-error);
+    }
+    .ga-checkbox__label {
+      min-height: calc(0.25rem * 5);
+      font-size: var(--ga-size-font-md);
+      --tw-leading: calc(0.25rem * 5);
+      line-height: calc(0.25rem * 5);
+      &:empty {
+        display: none;
+      }
+    }
+  }
+  .ga-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.25rem * 2);
+    .ga-form-field__label {
+      padding-inline: calc(0.25rem * 1);
+      font-size: var(--ga-size-font-md);
+      --tw-leading: calc(0.25rem * 5);
+      line-height: calc(0.25rem * 5);
+      --tw-font-weight: 500;
+      font-weight: 500;
+    }
+    .ga-form-field__info {
+      display: flex;
+      align-items: center;
+      gap: calc(0.25rem * 1);
+      font-size: var(--ga-size-font-xs);
+    }
+  }
+  .ga-input {
+    display: flex;
+    height: calc(0.25rem * 10);
+    width: calc(0.25rem * 50);
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-bg-primary);
+    padding-inline: calc(0.25rem * 3);
+    padding-block: calc(0.25rem * 2);
+    font-size: var(--ga-size-font-md);
+    &:has(input:hover), &:is(input:hover) {
+      border-color: var(--ga-color-border-action-hover);
+      &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+    }
+    &:has(input:disabled), &:is(input:disabled) {
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    &:has(input:focus), &:is(input:focus) {
+      border-color: var(--ga-color-border-focus);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &.ga-input--invalid {
+      border-color: var(--ga-color-border-error);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-error);
+      &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+        background-color: var(--ga-color-surface-error);
+      }
+    }
+    input {
+      height: calc(0.25rem * 6);
+      width: 100%;
+      min-width: calc(0.25rem * 0);
+      --tw-leading: calc(0.25rem * 6);
+      line-height: calc(0.25rem * 6);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:is(input) {
+      min-width: calc(0.25rem * 0);
+      --tw-leading: calc(0.25rem * 6);
+      line-height: calc(0.25rem * 6);
+    }
+  }
+  .ga-menu {
+    display: flex;
+    min-width: calc(0.25rem * 36);
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-neutral-30);
+    background-color: #fff;
+    .ga-menu__item {
+      height: calc(0.25rem * 10);
+      cursor: pointer;
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+      border-bottom-color: var(--ga-color-neutral-30);
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 2);
+      text-align: left;
+      font-size: var(--ga-size-font-md);
+      --tw-font-weight: 500;
+      font-weight: 500;
+      color: var(--ga-color-cyan-80);
+      &:first-child {
+        border-top-left-radius: var(--ga-radius);
+        border-top-right-radius: var(--ga-radius);
+      }
+      &:last-child {
+        border-bottom-right-radius: var(--ga-radius);
+        border-bottom-left-radius: var(--ga-radius);
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+      &:hover {
+        background-color: var(--ga-color-teal-10);
+      }
+      &:active {
+        background-color: var(--ga-color-cyan-80);
+        color: var(--ga-color-orange-10);
+      }
+    }
+    .ga-menu__separator {
+      padding-inline: calc(0.25rem * 3);
+      padding-top: calc(0.25rem * 3);
+      padding-bottom: calc(0.25rem * 2);
+      font-size: var(--ga-size-font-sm);
+      --tw-font-weight: 600;
+      font-weight: 600;
+      color: #6F7687;
+    }
+  }
+  .ga-radio-button {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    gap: calc(0.25rem * 2);
+    .ga-radio-button__native {
+      height: calc(0.25rem * 5);
+      width: calc(0.25rem * 5);
+      flex-shrink: 0;
+      cursor: pointer;
+      opacity: 0%;
+      &:disabled {
+        cursor: default;
+      }
+    }
+    .ga-radio-button__marker {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: calc(0.25rem * 5);
+      width: calc(0.25rem * 5);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--ga-color-border-action);
+      color: #fff;
+    }
+    .ga-radio-button__native:focus-visible ~ .ga-radio-button__marker {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    .ga-radio-button__native:not(:disabled):hover ~ .ga-radio-button__marker {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    .ga-radio-button__native:checked ~ .ga-radio-button__marker {
+      background-color: var(--ga-color-surface-action);
+      &::after {
+        position: absolute;
+        top: calc(1/2 * 100%);
+        left: calc(1/2 * 100%);
+        display: block;
+        height: calc(0.25rem * 2);
+        width: calc(0.25rem * 2);
+        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        border-radius: calc(infinity * 1px);
+        background-color: #fff;
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+    .ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
+      background-color: var(--ga-color-surface-action-hover);
+    }
+    .ga-radio-button__native:disabled ~ .ga-radio-button__marker {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disabled);
+    }
+    .ga-radio-button__label {
+      min-height: calc(0.25rem * 4);
+      font-size: var(--ga-size-font-md);
+      --tw-leading: calc(0.25rem * 5);
+      line-height: calc(0.25rem * 5);
+    }
+  }
+  .ga-segmented-control {
+    display: inline-flex;
+    height: calc(0.25rem * 10);
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    font-size: var(--ga-size-font-md);
+    .ga-segmented-control__button {
+      display: inline-flex;
+      height: calc(0.25rem * 10);
+      align-items: center;
+      justify-content: center;
+      gap: calc(0.25rem * 2);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+      border-color: var(--ga-color-neutral-30);
+      background-color: #fff;
+      padding-inline: calc(0.25rem * 4);
+      vertical-align: middle;
+      --tw-leading: calc(0.25rem * 1);
+      line-height: calc(0.25rem * 1);
+      --tw-font-weight: 500;
+      font-weight: 500;
+      color: var(--ga-color-cyan-80);
+      &:first-of-type {
+        border-top-left-radius: var(--ga-radius);
+        border-bottom-left-radius: var(--ga-radius);
+      }
+      &:last-of-type {
+        border-top-right-radius: var(--ga-radius);
+        border-bottom-right-radius: var(--ga-radius);
+        border-right-style: var(--tw-border-style);
+        border-right-width: 1px;
+      }
+      &.ga-segmented-control__button--selected {
+        background-color: var(--ga-color-cyan-80);
+        --tw-font-weight: 600;
+        font-weight: 600;
+        color: var(--ga-color-orange-10);
+      }
+      &:not( .ga-segmented-control__button--selected, .ga-segmented-control__button--disabled, :disabled ) {
+        cursor: pointer;
+        &:hover {
+          background-color: var(--ga-color-surface-action-hover-2);
+        }
+        &:active {
+          background-color: #fff;
+        }
+      }
+      &.ga-segmented-control__button--disabled, &:disabled {
+        border-color: var(--ga-color-neutral-30);
+        background-color: var(--ga-color-neutral-10);
+        color: var(--ga-color-grey-40);
+      }
+    }
+  }
+  .ga-text-area {
+    display: flex;
+    width: calc(0.25rem * 50);
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-bg-primary);
+    font-size: var(--ga-size-font-md);
+    &:has(textarea:hover) {
+      border-color: var(--ga-color-border-action-hover);
+    }
+    &:has(textarea:disabled) {
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    &:has(textarea:focus) {
+      border-color: var(--ga-color-border-focus);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &.ga-text-area--invalid {
+      border-color: var(--ga-color-border-error);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-error);
+      &:has(textarea:not(:placeholder-shown)) {
+        background-color: var(--ga-color-surface-error);
+      }
+    }
+    textarea {
+      width: 100%;
+      min-width: calc(0.25rem * 0);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+      --tw-leading: calc(0.25rem * 6);
+      line-height: calc(0.25rem * 6);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .ga-tooltip {
+    position: relative;
+    max-width: calc(0.25rem * 100);
+    border-radius: var(--ga-radius);
+    background-color: var(--ga-color-surface-action-hover);
+    padding: calc(0.25rem * 2);
+    font-size: var(--ga-size-font-md);
+    color: var(--ga-color-text-on-action);
+    &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end, &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end, &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end, &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
+      &::before {
+        content: var(--tw-content);
+        position: absolute;
+      }
+      &::before {
+        content: var(--tw-content);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+    &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end {
+      margin-bottom: calc(0.25rem * 2);
+    }
+    &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end {
+      margin-top: calc(0.25rem * 2);
+    }
+    &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end {
+      margin-right: calc(0.25rem * 2);
+    }
+    &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
+      margin-left: calc(0.25rem * 2);
+    }
+    &.ga-tooltip--top-start::before, &.ga-tooltip--top-center::before, &.ga-tooltip--top-end::before {
+      bottom: calc(0.25rem * -2);
+      border-inline-style: var(--tw-border-style);
+      border-inline-width: 8px;
+      border-top-style: var(--tw-border-style);
+      border-top-width: 8px;
+      border-inline-color: transparent;
+      border-top-color: var(--ga-color-surface-action-hover);
+    }
+    &.ga-tooltip--bottom-start::before, &.ga-tooltip--bottom-center::before, &.ga-tooltip--bottom-end::before {
+      top: calc(0.25rem * -2);
+      border-inline-style: var(--tw-border-style);
+      border-inline-width: 8px;
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 8px;
+      border-inline-color: transparent;
+      border-bottom-color: var(--ga-color-surface-action-hover);
+    }
+    &.ga-tooltip--top-start::before, &.ga-tooltip--bottom-start::before {
+      left: calc(0.25rem * 4);
+    }
+    &.ga-tooltip--top-center::before, &.ga-tooltip--bottom-center::before {
+      left: calc(1/2 * 100%);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    &.ga-tooltip--top-end::before, &.ga-tooltip--bottom-end::before {
+      right: calc(0.25rem * 4);
+    }
+    &.ga-tooltip--left-start::before, &.ga-tooltip--left-center::before, &.ga-tooltip--left-end::before {
+      right: calc(0.25rem * -2);
+      border-block-style: var(--tw-border-style);
+      border-block-width: 8px;
+      border-left-style: var(--tw-border-style);
+      border-left-width: 8px;
+      border-block-color: transparent;
+      border-left-color: var(--ga-color-surface-action-hover);
+    }
+    &.ga-tooltip--right-start::before, &.ga-tooltip--right-center::before, &.ga-tooltip--right-end::before {
+      left: calc(0.25rem * -2);
+      border-block-style: var(--tw-border-style);
+      border-block-width: 8px;
+      border-right-style: var(--tw-border-style);
+      border-right-width: 8px;
+      border-block-color: transparent;
+      border-right-color: var(--ga-color-surface-action-hover);
+    }
+    &.ga-tooltip--left-start::before, &.ga-tooltip--right-start::before {
+      top: calc(0.25rem * 4);
+    }
+    &.ga-tooltip--left-center::before, &.ga-tooltip--right-center::before {
+      top: calc(1/2 * 100%);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    &.ga-tooltip--left-end::before, &.ga-tooltip--right-end::before {
+      bottom: calc(0.25rem * 4);
+    }
+    .ga-tooltip__title {
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}