@leodamours/ds-components 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +142 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +593 -579
  4. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,142 @@
1
+ # @leodamours/ds-components
2
+
3
+ Vue 3 component library with built-in design tokens and theming support via CSS custom properties.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @leodamours/ds-components
9
+ ```
10
+
11
+ **Peer dependency:** `vue ^3.5.0`
12
+
13
+ ## Setup
14
+
15
+ ```ts
16
+ // main.ts
17
+ import '@leodamours/ds-components/style.css'
18
+ ```
19
+
20
+ That's it. The stylesheet includes both the default theme (CSS custom properties) and the component styles.
21
+
22
+ ## Usage
23
+
24
+ ```vue
25
+ <script setup>
26
+ import { DsButton, DsInput } from '@leodamours/ds-components'
27
+ </script>
28
+
29
+ <template>
30
+ <DsInput label="Email" placeholder="you@example.com" />
31
+ <DsButton variant="primary" label="Submit" />
32
+ </template>
33
+ ```
34
+
35
+ ## Components
36
+
37
+ | Component | Description |
38
+ |---|---|
39
+ | `DsAvatar` | User avatar with initials fallback |
40
+ | `DsBadge` | Status badge / label |
41
+ | `DsButton` | Button with variants: primary, secondary, outline, ghost, danger, success |
42
+ | `DsCheckbox` | Checkbox input |
43
+ | `DsDropdownSelect` | Dropdown select with floating UI positioning |
44
+ | `DsInput` | Text input with label, help text, error state |
45
+ | `DsLoadingSpinner` | Animated loading spinner |
46
+ | `DsModal` | Modal dialog with backdrop |
47
+ | `DsRadio` | Radio input |
48
+ | `DsSelect` | Native select wrapper |
49
+ | `DsTable` | Data table with sorting and pagination |
50
+ | `DsTabs` | Tab navigation |
51
+ | `DsTextarea` | Multiline text input |
52
+ | `DsToast` / `DsToastContainer` | Toast notifications |
53
+ | `DsTooltip` | Tooltip on hover |
54
+
55
+ All components export their prop types (e.g., `DsButtonProps`, `DsInputProps`).
56
+
57
+ ## Theming
58
+
59
+ Every color in the library flows through CSS custom properties prefixed with `--ds-`. The default theme is included in `style.css`. To customize, override the variables you need:
60
+
61
+ ```css
62
+ /* my-theme.css */
63
+ :root {
64
+ --ds-brand: #8B5CF6;
65
+ --ds-brand-hover: #7C3AED;
66
+ --ds-brand-active: #6D28D9;
67
+ --ds-brand-on-solid: #FFFFFF;
68
+ --ds-bg: #FAFAFA;
69
+ --ds-error: #DC2626;
70
+ /* Only override what differs — everything else inherits defaults */
71
+ }
72
+ ```
73
+
74
+ ```ts
75
+ import '@leodamours/ds-components/style.css' // defaults
76
+ import './my-theme.css' // overrides
77
+ ```
78
+
79
+ ### Token naming convention
80
+
81
+ Tokens follow a **role + tone** pattern: `{role}[-{tone}][-{state}]`
82
+
83
+ | Role | Purpose | Example tokens |
84
+ |---|---|---|
85
+ | Core | Page-level UI | `bg`, `fg`, `border`, `icon`, `surface-hover` |
86
+ | `brand` | Primary actions | `brand`, `brand-hover`, `brand-soft`, `brand-on-solid` |
87
+ | `neutral` | Secondary actions | `neutral-soft`, `neutral-on-soft`, `neutral-border` |
88
+ | `error` | Error / destructive | `error`, `error-soft`, `error-on-solid`, `error-border` |
89
+ | `success` | Success feedback | `success`, `success-soft`, `success-on-solid` |
90
+ | `warning` | Warning feedback | `warning`, `warning-soft`, `warning-on-soft` |
91
+ | `info` | Informational | `info`, `info-soft`, `info-on-soft` |
92
+
93
+ **Tones:**
94
+ - `{role}` — the solid color (e.g., `--ds-error` = `#EF4444`)
95
+ - `{role}-soft` — light background variant (e.g., `--ds-error-soft` = `#FEF2F2`)
96
+ - `{role}-on-solid` — text/icon color on the solid bg (e.g., `--ds-error-on-solid` = `#FFFFFF`)
97
+ - `{role}-on-soft` — text/icon color on the soft bg (e.g., `--ds-error-on-soft` = `#EF4444`)
98
+ - `{role}-border` — border color for that role
99
+
100
+ ### Runtime theme switching
101
+
102
+ ```css
103
+ [data-theme="dark"] {
104
+ --ds-bg: #0F172A;
105
+ --ds-fg: #F8FAFC;
106
+ --ds-border: #334155;
107
+ --ds-brand: #38BDF8;
108
+ }
109
+ ```
110
+
111
+ ```ts
112
+ document.documentElement.dataset.theme = 'dark'
113
+ ```
114
+
115
+ ### Programmatic theme generation
116
+
117
+ ```ts
118
+ import { generateThemeCss } from '@leodamours/ds-components'
119
+
120
+ const css = generateThemeCss(
121
+ { brand: '#8B5CF6', 'brand-hover': '#7C3AED' },
122
+ '[data-theme="purple"]'
123
+ )
124
+ // Returns a CSS string you can inject into a <style> tag
125
+ ```
126
+
127
+ ## Exports
128
+
129
+ ```ts
130
+ // Components
131
+ import { DsButton, DsInput, /* ... */ } from '@leodamours/ds-components'
132
+
133
+ // Prop types
134
+ import type { DsButtonProps, DsInputProps } from '@leodamours/ds-components'
135
+
136
+ // Token utilities
137
+ import { colorTokens, generateThemeCss, tokenToCssVar } from '@leodamours/ds-components'
138
+ import type { ColorToken, ThemeOverride } from '@leodamours/ds-components'
139
+
140
+ // Composables
141
+ import { useToast, useId } from '@leodamours/ds-components'
142
+ ```
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- :root{--ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo, Monaco, Consolas, monospace;font-family:var(--ds-font-sans);font-size:15px;line-height:1.5;color:var(--ds-fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ds-bg: #FFFFFF;--ds-bg-secondary: #F8FAFC;--ds-bg-tertiary: #F1F5F9;--ds-bg-inverse: #0F172A;--ds-bg-inverse-secondary: #1E293B;--ds-fg: #0F172A;--ds-fg-secondary: #64748B;--ds-fg-tertiary: #94A3B8;--ds-fg-inverse: #FFFFFF;--ds-fg-disabled: #94A3B8;--ds-icon: #64748B;--ds-icon-hover: #0F172A;--ds-icon-active: #0EA5E9;--ds-icon-inverse: #FFFFFF;--ds-icon-disabled: #CBD5E1;--ds-border: #E2E8F0;--ds-border-light: #F1F5F9;--ds-border-strong: #CBD5E1;--ds-border-focus: #0F172A;--ds-surface-hover: #E2E8F0;--ds-surface-hover-light: #F1F5F9;--ds-surface-active: #B7E6FD;--ds-surface-disabled: #FAFCFF;--ds-brand: #0EA5E9;--ds-brand-hover: #0284C7;--ds-brand-active: #0369A1;--ds-brand-disabled: #BAE6FD;--ds-brand-soft: #F0F9FF;--ds-brand-soft-hover: #E0F2FE;--ds-brand-soft-active: #B7E6FD;--ds-brand-on-solid: #FFFFFF;--ds-brand-on-soft: #0EA5E9;--ds-brand-secondary: #6366F1;--ds-neutral: #64748B;--ds-neutral-soft: #F8FAFC;--ds-neutral-soft-hover: #F1F5F9;--ds-neutral-soft-active: #E2E8F0;--ds-neutral-on-solid: #FFFFFF;--ds-neutral-on-soft: #0F172A;--ds-neutral-border: #D1D5DB;--ds-neutral-border-hover: #B5BCC9;--ds-neutral-border-strong: #94A3B8;--ds-error: #EF4444;--ds-error-hover: #DC2626;--ds-error-active: #B91C1C;--ds-error-soft: #FEF2F2;--ds-error-soft-hover: #FEE2E2;--ds-error-soft-active: #FECACA;--ds-error-on-solid: #FFFFFF;--ds-error-on-soft: #EF4444;--ds-error-border: #F8CDD1;--ds-error-border-hover: #F5A6B3;--ds-error-border-strong: #B91C1C;--ds-success: #10B981;--ds-success-hover: #0A8D63;--ds-success-active: #047857;--ds-success-soft: #ECFDF5;--ds-success-soft-hover: #D1FAE5;--ds-success-soft-active: #A7F3D0;--ds-success-on-solid: #FFFFFF;--ds-success-on-soft: #10B981;--ds-success-border: #BEF3D0;--ds-success-border-hover: #86EFAC;--ds-success-border-strong: #0EA875;--ds-warning: #F59E0B;--ds-warning-hover: #D97706;--ds-warning-active: #B45309;--ds-warning-soft: #FFFBEB;--ds-warning-soft-hover: #FEF3C7;--ds-warning-soft-active: #FDE68A;--ds-warning-on-solid: #FFFFFF;--ds-warning-on-soft: #92400E;--ds-warning-border: #F3E6A5;--ds-warning-border-hover: #E6D378;--ds-info: #3B82F6;--ds-info-hover: #2563EB;--ds-info-active: #1D4ED8;--ds-info-soft: #EFF6FF;--ds-info-soft-hover: #DBEAFE;--ds-info-soft-active: #BFDBFE;--ds-info-on-solid: #FFFFFF;--ds-info-on-soft: #1E40AF;--ds-info-border: #C5D7F5;--ds-info-border-hover: #A8CCF2;--ds-processing: #06B6D4;--ds-processing-hover: #0891B2;--ds-processing-active: #0E7490;--ds-processing-soft: #ECFEFF;--ds-processing-soft-hover: #CFFAFE;--ds-processing-soft-active: #A5F3FC;--ds-processing-on-solid: #FFFFFF;--ds-processing-on-soft: #155E75;--ds-processing-border: #B3F0FC;--ds-processing-border-hover: #7FE8F5;--ds-transcript-bg: #FEFCE8;--ds-transcript-highlight: #FEF3C7;--ds-transcript-speaker: #EDE9FE;--ds-transcript-timestamp: #F3F4F6;--ds-space-1: 4px;--ds-space-2: 8px;--ds-space-3: 12px;--ds-space-4: 16px;--ds-space-5: 24px;--ds-space-6: 32px;--ds-space-7: 48px;--ds-space-8: 64px;--ds-radius-sm: 4px;--ds-radius-md: 6px;--ds-radius-lg: 8px;--ds-radius-xl: 12px;--ds-radius-full: 9999px;--ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--ds-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 4px 6px -1px rgba(0, 0, 0, .1);--ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.sr-only{position:absolute;margin:-.0625rem;width:.0625rem;height:.0625rem;overflow:hidden;white-space:nowrap;border-width:0rem;padding:0}.text-body-sm{font-size:.8125rem;line-height:1.25rem;color:var(--ds-fg-secondary);font-weight:400;font-family:var(--ds-font-sans)}.text-caption{font-size:.6875rem;line-height:1rem;color:var(--ds-fg-tertiary);font-weight:400;font-family:var(--ds-font-sans)}.text-heading-lg{font-size:1.0625rem;line-height:1.5rem;color:var(--ds-fg);font-weight:600;font-family:var(--ds-font-sans)}.text-label{font-size:.8125rem;line-height:1.25rem;color:var(--ds-fg);font-weight:500;font-family:var(--ds-font-sans)}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.-mb-px{margin-bottom:-.0625rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2,.h2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.max-h-\[90vh\]{max-height:90vh}.max-h-64{max-height:16rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.min-w-0{min-width:0}.min-w-32{min-width:8rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-80{width:20rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.table{display:table}.border-collapse{border-collapse:collapse}.translate-x-0{--un-translate-x:0;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.translate-x-8{--un-translate-x:2rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.rotate-45{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:45deg;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.select-none{-webkit-user-select:none;user-select:none}.resize-y{resize:vertical}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.border{border-width:.0625rem}.border-0{border-width:0rem}.border-2{border-width:.125rem}.border-4{border-width:.25rem}.border-6{border-width:.375rem}.border-b{border-bottom-width:.0625rem}.border-b-2{border-bottom-width:.125rem}.border-l-0{border-left-width:0rem}.border-l-4{border-left-width:.25rem}.border-r-0{border-right-width:0rem}.border-t{border-top-width:.0625rem}.border-t-0{border-top-width:0rem}.border-border{border-color:var(--ds-border)}.border-border-light{border-color:var(--ds-border-light)}.border-border-strong{border-color:var(--ds-border-strong)}.border-brand,.group:hover .group-hover\:border-brand{border-color:var(--ds-brand)}.border-brand-active{border-color:var(--ds-brand-active)}.border-brand-disabled{border-color:var(--ds-brand-disabled)}.border-current{border-color:currentColor}.border-error-border{border-color:var(--ds-error-border)}.border-error-border-strong{border-color:var(--ds-error-border-strong)}.border-fg-inverse{border-color:var(--ds-fg-inverse)}.border-fg-secondary{border-color:var(--ds-fg-secondary)}.border-neutral-border-strong{border-color:var(--ds-neutral-border-strong)}.border-success-border-strong{border-color:var(--ds-success-border-strong)}.border-transparent{border-color:transparent}.focus\:border-border-focus:focus{border-color:var(--ds-border-focus)}.focus\:border-error:focus{border-color:var(--ds-error)}.border-b-brand{border-bottom-color:var(--ds-brand)}.border-b-transparent{border-bottom-color:transparent}.border-l-brand{border-left-color:var(--ds-brand)}.border-l-error{border-left-color:var(--ds-error)}.border-l-info{border-left-color:var(--ds-info)}.border-l-success{border-left-color:var(--ds-success)}.border-l-warning{border-left-color:var(--ds-warning)}.border-t-transparent{border-top-color:transparent}.hover\:border-b-border-strong:hover{border-bottom-color:var(--ds-border-strong)}.rounded{border-radius:.25rem}.rounded-full{border-radius:624.9375rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border-solid{border-style:solid}.bg-bg{background-color:var(--ds-bg)}.bg-bg-inverse,.bg-bg-inverse\/50{background-color:var(--ds-bg-inverse)}.bg-bg-secondary{background-color:var(--ds-bg-secondary)}.bg-bg-tertiary{background-color:var(--ds-bg-tertiary)}.bg-brand{background-color:var(--ds-brand)}.bg-brand-disabled{background-color:var(--ds-brand-disabled)}.bg-brand-soft{background-color:var(--ds-brand-soft)}.bg-error{background-color:var(--ds-error)}.bg-error-soft{background-color:var(--ds-error-soft)}.bg-info{background-color:var(--ds-info)}.bg-info-soft{background-color:var(--ds-info-soft)}.bg-neutral{background-color:var(--ds-neutral)}.bg-neutral-soft{background-color:var(--ds-neutral-soft)}.bg-processing{background-color:var(--ds-processing)}.bg-processing-soft{background-color:var(--ds-processing-soft)}.bg-success{background-color:var(--ds-success)}.bg-success-soft{background-color:var(--ds-success-soft)}.bg-surface-hover{background-color:var(--ds-surface-hover)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--ds-warning)}.bg-warning-soft{background-color:var(--ds-warning-soft)}.hover\:bg-brand-hover:hover{background-color:var(--ds-brand-hover)}.hover\:bg-brand-soft:hover{background-color:var(--ds-brand-soft)}.hover\:bg-error-hover:hover{background-color:var(--ds-error-hover)}.hover\:bg-neutral-soft-hover:hover{background-color:var(--ds-neutral-soft-hover)}.hover\:bg-success-hover:hover{background-color:var(--ds-success-hover)}.hover\:bg-surface-hover-light:hover{background-color:var(--ds-surface-hover-light)}.active\:bg-brand-active:active{background-color:var(--ds-brand-active)}.active\:bg-brand-soft-hover:active{background-color:var(--ds-brand-soft-hover)}.active\:bg-error-active:active{background-color:var(--ds-error-active)}.active\:bg-neutral-soft-active:active{background-color:var(--ds-neutral-soft-active)}.disabled\:bg-brand-disabled:disabled{background-color:var(--ds-brand-disabled)}.disabled\:bg-surface-disabled:disabled{background-color:var(--ds-surface-disabled)}.object-cover{object-fit:cover}.p-1{padding:.25rem}.p-4{padding:1rem}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py,.py-4{padding-top:1rem;padding-bottom:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl{padding-left:1rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-3{padding-left:.75rem}.pl-8{padding-left:2rem}.pr{padding-right:1rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-base{font-size:.9375rem;line-height:1.375rem}.text-lg{font-size:1.0625rem;line-height:1.5rem}.text-sm{font-size:.8125rem;line-height:1.25rem}.text-xs{font-size:.6875rem;line-height:1rem}.text-brand{color:var(--ds-brand)}.text-brand-on-soft{color:var(--ds-brand-on-soft)}.text-brand-on-solid{color:var(--ds-brand-on-solid)}.text-error{color:var(--ds-error)}.text-error-on-soft{color:var(--ds-error-on-soft)}.text-error-on-solid{color:var(--ds-error-on-solid)}.text-fg{color:var(--ds-fg)}.text-fg-disabled{color:var(--ds-fg-disabled)}.text-fg-inverse{color:var(--ds-fg-inverse)}.text-fg-secondary{color:var(--ds-fg-secondary)}.text-fg-tertiary{color:var(--ds-fg-tertiary)}.text-info{color:var(--ds-info)}.text-info-on-soft{color:var(--ds-info-on-soft)}.text-neutral-on-soft{color:var(--ds-neutral-on-soft)}.text-processing-on-soft{color:var(--ds-processing-on-soft)}.text-success{color:var(--ds-success)}.text-success-on-soft{color:var(--ds-success-on-soft)}.text-success-on-solid{color:var(--ds-success-on-solid)}.text-transparent{color:transparent}.text-warning{color:var(--ds-warning)}.text-warning-on-soft{color:var(--ds-warning-on-soft)}.hover\:text-fg-secondary:hover{color:var(--ds-fg-secondary)}.hover\:text-fg:hover{color:var(--ds-fg)}.disabled\:text-fg-disabled:disabled{color:var(--ds-fg-disabled)}.placeholder\:text-fg-tertiary::placeholder{color:var(--ds-fg-tertiary)}.font-500,.font-medium{font-weight:500}.font-sans{font-family:var(--ds-font-sans)}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-95:disabled{opacity:.95}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 .625rem .9375rem -.1875rem var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 .25rem .375rem -.25rem var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-md{--un-shadow:var(--un-shadow-inset) 0 .25rem .375rem -.0625rem var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 .125rem .25rem -.125rem var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.outline-none{outline:.125rem solid transparent;outline-offset:.125rem}.focus\:outline-none:focus{outline:.125rem solid transparent;outline-offset:.125rem}.focus-visible\:outline-none:focus-visible{outline:.125rem solid transparent;outline-offset:.125rem}.focus\:ring-2:focus{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus-visible\:ring-2:focus-visible{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.peer:focus-visible~.peer-focus-visible\:ring-2{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:ring-offset-0:focus{--un-ring-offset-width:0rem}.focus-visible\:ring-offset-2:focus-visible{--un-ring-offset-width:.125rem}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--un-ring-offset-width:.125rem}.focus\:ring-brand:focus{--un-ring-color:var(--ds-brand) }.focus\:ring-error:focus{--un-ring-color:var(--ds-error) }.focus-visible\:ring-brand:focus-visible{--un-ring-color:var(--ds-brand) }.peer:focus-visible~.peer-focus-visible\:ring-brand{--un-ring-color:var(--ds-brand) }.blur{--un-blur:blur(.5rem);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.shadow-default{box-shadow:0 .125rem .125rem #4559720f,0 .375rem .375rem #4559720a}
1
+ :root{--ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo, Monaco, Consolas, monospace;font-family:var(--ds-font-sans);font-size:15px;line-height:1.5;color:var(--ds-fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ds-bg: #FFFFFF;--ds-bg-secondary: #F8FAFC;--ds-bg-tertiary: #F1F5F9;--ds-bg-inverse: #0F172A;--ds-bg-inverse-secondary: #1E293B;--ds-fg: #0F172A;--ds-fg-secondary: #64748B;--ds-fg-tertiary: #94A3B8;--ds-fg-inverse: #FFFFFF;--ds-fg-disabled: #94A3B8;--ds-icon: #64748B;--ds-icon-hover: #0F172A;--ds-icon-active: #0EA5E9;--ds-icon-inverse: #FFFFFF;--ds-icon-disabled: #CBD5E1;--ds-border: #E2E8F0;--ds-border-light: #F1F5F9;--ds-border-strong: #CBD5E1;--ds-border-focus: #0F172A;--ds-surface-hover: #E2E8F0;--ds-surface-hover-light: #F1F5F9;--ds-surface-active: #B7E6FD;--ds-surface-disabled: #FAFCFF;--ds-brand: #0EA5E9;--ds-brand-hover: #0284C7;--ds-brand-active: #0369A1;--ds-brand-disabled: #BAE6FD;--ds-brand-soft: #F0F9FF;--ds-brand-soft-hover: #E0F2FE;--ds-brand-soft-active: #B7E6FD;--ds-brand-on-solid: #FFFFFF;--ds-brand-on-soft: #0EA5E9;--ds-brand-secondary: #6366F1;--ds-neutral: #64748B;--ds-neutral-soft: #F8FAFC;--ds-neutral-soft-hover: #F1F5F9;--ds-neutral-soft-active: #E2E8F0;--ds-neutral-on-solid: #FFFFFF;--ds-neutral-on-soft: #0F172A;--ds-neutral-border: #D1D5DB;--ds-neutral-border-hover: #B5BCC9;--ds-neutral-border-strong: #94A3B8;--ds-error: #EF4444;--ds-error-hover: #DC2626;--ds-error-active: #B91C1C;--ds-error-soft: #FEF2F2;--ds-error-soft-hover: #FEE2E2;--ds-error-soft-active: #FECACA;--ds-error-on-solid: #FFFFFF;--ds-error-on-soft: #EF4444;--ds-error-border: #F8CDD1;--ds-error-border-hover: #F5A6B3;--ds-error-border-strong: #B91C1C;--ds-success: #10B981;--ds-success-hover: #0A8D63;--ds-success-active: #047857;--ds-success-soft: #ECFDF5;--ds-success-soft-hover: #D1FAE5;--ds-success-soft-active: #A7F3D0;--ds-success-on-solid: #FFFFFF;--ds-success-on-soft: #10B981;--ds-success-border: #BEF3D0;--ds-success-border-hover: #86EFAC;--ds-success-border-strong: #0EA875;--ds-warning: #F59E0B;--ds-warning-hover: #D97706;--ds-warning-active: #B45309;--ds-warning-soft: #FFFBEB;--ds-warning-soft-hover: #FEF3C7;--ds-warning-soft-active: #FDE68A;--ds-warning-on-solid: #FFFFFF;--ds-warning-on-soft: #92400E;--ds-warning-border: #F3E6A5;--ds-warning-border-hover: #E6D378;--ds-info: #3B82F6;--ds-info-hover: #2563EB;--ds-info-active: #1D4ED8;--ds-info-soft: #EFF6FF;--ds-info-soft-hover: #DBEAFE;--ds-info-soft-active: #BFDBFE;--ds-info-on-solid: #FFFFFF;--ds-info-on-soft: #1E40AF;--ds-info-border: #C5D7F5;--ds-info-border-hover: #A8CCF2;--ds-processing: #06B6D4;--ds-processing-hover: #0891B2;--ds-processing-active: #0E7490;--ds-processing-soft: #ECFEFF;--ds-processing-soft-hover: #CFFAFE;--ds-processing-soft-active: #A5F3FC;--ds-processing-on-solid: #FFFFFF;--ds-processing-on-soft: #155E75;--ds-processing-border: #B3F0FC;--ds-processing-border-hover: #7FE8F5;--ds-transcript-bg: #FEFCE8;--ds-transcript-highlight: #FEF3C7;--ds-transcript-speaker: #EDE9FE;--ds-transcript-timestamp: #F3F4F6;--ds-space-1: 4px;--ds-space-2: 8px;--ds-space-3: 12px;--ds-space-4: 16px;--ds-space-5: 24px;--ds-space-6: 32px;--ds-space-7: 48px;--ds-space-8: 64px;--ds-radius-sm: 4px;--ds-radius-md: 6px;--ds-radius-lg: 8px;--ds-radius-xl: 12px;--ds-radius-full: 9999px;--ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--ds-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 4px 6px -1px rgba(0, 0, 0, .1);--ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}:root[data-theme=dark]{--ds-bg: #0F172A;--ds-bg-secondary: #1E293B;--ds-bg-tertiary: #334155;--ds-bg-inverse: #F8FAFC;--ds-bg-inverse-secondary: #E2E8F0;--ds-fg: #F8FAFC;--ds-fg-secondary: #94A3B8;--ds-fg-tertiary: #64748B;--ds-fg-inverse: #0F172A;--ds-fg-disabled: #475569;--ds-icon: #94A3B8;--ds-icon-hover: #F8FAFC;--ds-icon-active: #38BDF8;--ds-icon-inverse: #0F172A;--ds-icon-disabled: #475569;--ds-border: #334155;--ds-border-light: #1E293B;--ds-border-strong: #475569;--ds-border-focus: #F8FAFC;--ds-surface-hover: #334155;--ds-surface-hover-light: #1E293B;--ds-surface-active: #0C4A6E;--ds-surface-disabled: #1E293B;--ds-brand: #38BDF8;--ds-brand-hover: #0EA5E9;--ds-brand-active: #0284C7;--ds-brand-disabled: #0C4A6E;--ds-brand-soft: #0C4A6E;--ds-brand-soft-hover: #075985;--ds-brand-soft-active: #0369A1;--ds-brand-on-solid: #0F172A;--ds-brand-on-soft: #38BDF8;--ds-brand-secondary: #818CF8;--ds-neutral: #94A3B8;--ds-neutral-soft: #1E293B;--ds-neutral-soft-hover: #334155;--ds-neutral-soft-active: #475569;--ds-neutral-on-solid: #0F172A;--ds-neutral-on-soft: #F8FAFC;--ds-neutral-border: #475569;--ds-neutral-border-hover: #64748B;--ds-neutral-border-strong: #94A3B8;--ds-error: #F87171;--ds-error-hover: #EF4444;--ds-error-active: #DC2626;--ds-error-soft: #450A0A;--ds-error-soft-hover: #7F1D1D;--ds-error-soft-active: #991B1B;--ds-error-on-solid: #0F172A;--ds-error-on-soft: #F87171;--ds-error-border: #7F1D1D;--ds-error-border-hover: #991B1B;--ds-error-border-strong: #F87171;--ds-success: #34D399;--ds-success-hover: #10B981;--ds-success-active: #059669;--ds-success-soft: #022C22;--ds-success-soft-hover: #064E3B;--ds-success-soft-active: #065F46;--ds-success-on-solid: #0F172A;--ds-success-on-soft: #34D399;--ds-success-border: #064E3B;--ds-success-border-hover: #065F46;--ds-success-border-strong: #34D399;--ds-warning: #FBBF24;--ds-warning-hover: #F59E0B;--ds-warning-active: #D97706;--ds-warning-soft: #451A03;--ds-warning-soft-hover: #78350F;--ds-warning-soft-active: #92400E;--ds-warning-on-solid: #0F172A;--ds-warning-on-soft: #FBBF24;--ds-warning-border: #78350F;--ds-warning-border-hover: #92400E;--ds-info: #60A5FA;--ds-info-hover: #3B82F6;--ds-info-active: #2563EB;--ds-info-soft: #1E1B4B;--ds-info-soft-hover: #1E3A5F;--ds-info-soft-active: #1D4ED8;--ds-info-on-solid: #0F172A;--ds-info-on-soft: #60A5FA;--ds-info-border: #1E3A5F;--ds-info-border-hover: #1D4ED8;--ds-processing: #22D3EE;--ds-processing-hover: #06B6D4;--ds-processing-active: #0891B2;--ds-processing-soft: #083344;--ds-processing-soft-hover: #164E63;--ds-processing-soft-active: #155E75;--ds-processing-on-solid: #0F172A;--ds-processing-on-soft: #22D3EE;--ds-processing-border: #164E63;--ds-processing-border-hover: #155E75;--ds-transcript-bg: #1C1917;--ds-transcript-highlight: #451A03;--ds-transcript-speaker: #2E1065;--ds-transcript-timestamp: #1E293B;--ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--ds-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .4), 0 4px 6px -1px rgba(0, 0, 0, .3);--ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3)}:root[data-theme=testing]{--ds-bg: #FAF9FC;--ds-bg-secondary: #F3F1F6;--ds-bg-tertiary: #EBE8F0;--ds-bg-inverse: #1A1225;--ds-bg-inverse-secondary: #2D2440;--ds-fg: #1A1225;--ds-fg-secondary: #6B5F7D;--ds-fg-tertiary: #9B8FB0;--ds-fg-inverse: #FFFFFF;--ds-fg-disabled: #9B8FB0;--ds-icon: #6B5F7D;--ds-icon-hover: #1A1225;--ds-icon-active: #8B5CF6;--ds-icon-inverse: #FFFFFF;--ds-icon-disabled: #C4BBCF;--ds-border: #DDD8E6;--ds-border-light: #EBE8F0;--ds-border-strong: #C4BBCF;--ds-border-focus: #1A1225;--ds-surface-hover: #DDD8E6;--ds-surface-hover-light: #EBE8F0;--ds-surface-active: #DDD6FE;--ds-surface-disabled: #FAFAFE;--ds-brand: #8B5CF6;--ds-brand-hover: #7C3AED;--ds-brand-active: #6D28D9;--ds-brand-disabled: #C4B5FD;--ds-brand-soft: #F5F3FF;--ds-brand-soft-hover: #EDE9FE;--ds-brand-soft-active: #DDD6FE;--ds-brand-on-solid: #FFFFFF;--ds-brand-on-soft: #7C3AED;--ds-brand-secondary: #EC4899;--ds-neutral: #6B5F7D;--ds-neutral-soft: #F3F1F6;--ds-neutral-soft-hover: #EBE8F0;--ds-neutral-soft-active: #DDD8E6;--ds-neutral-on-solid: #FFFFFF;--ds-neutral-on-soft: #1A1225;--ds-neutral-border: #C4BBCF;--ds-neutral-border-hover: #A89DB8;--ds-neutral-border-strong: #6B5F7D;--ds-error: #E11D48;--ds-error-hover: #BE123C;--ds-error-active: #9F1239;--ds-error-soft: #FFF1F2;--ds-error-soft-hover: #FFE4E6;--ds-error-soft-active: #FECDD3;--ds-error-on-solid: #FFFFFF;--ds-error-on-soft: #E11D48;--ds-error-border: #FECDD3;--ds-error-border-hover: #FDA4AF;--ds-error-border-strong: #9F1239;--ds-success: #059669;--ds-success-hover: #047857;--ds-success-active: #065F46;--ds-success-soft: #ECFDF5;--ds-success-soft-hover: #D1FAE5;--ds-success-soft-active: #A7F3D0;--ds-success-on-solid: #FFFFFF;--ds-success-on-soft: #059669;--ds-success-border: #A7F3D0;--ds-success-border-hover: #6EE7B7;--ds-success-border-strong: #065F46;--ds-warning: #EA580C;--ds-warning-hover: #C2410C;--ds-warning-active: #9A3412;--ds-warning-soft: #FFF7ED;--ds-warning-soft-hover: #FFEDD5;--ds-warning-soft-active: #FED7AA;--ds-warning-on-solid: #FFFFFF;--ds-warning-on-soft: #9A3412;--ds-warning-border: #FED7AA;--ds-warning-border-hover: #FDBA74;--ds-info: #6366F1;--ds-info-hover: #4F46E5;--ds-info-active: #4338CA;--ds-info-soft: #EEF2FF;--ds-info-soft-hover: #E0E7FF;--ds-info-soft-active: #C7D2FE;--ds-info-on-solid: #FFFFFF;--ds-info-on-soft: #3730A3;--ds-info-border: #C7D2FE;--ds-info-border-hover: #A5B4FC;--ds-processing: #D946EF;--ds-processing-hover: #C026D3;--ds-processing-active: #A21CAF;--ds-processing-soft: #FDF4FF;--ds-processing-soft-hover: #FAE8FF;--ds-processing-soft-active: #F5D0FE;--ds-processing-on-solid: #FFFFFF;--ds-processing-on-soft: #86198F;--ds-processing-border: #F5D0FE;--ds-processing-border-hover: #F0ABFC;--ds-transcript-bg: #F5F3FF;--ds-transcript-highlight: #EDE9FE;--ds-transcript-speaker: #FCE7F3;--ds-transcript-timestamp: #F3F1F6}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.sr-only{position:absolute;margin:-.0625rem;width:.0625rem;height:.0625rem;overflow:hidden;white-space:nowrap;border-width:0rem;padding:0}.text-body-lg{font-size:1.0625rem;line-height:1.5rem;color:var(--ds-fg);font-weight:400;font-family:var(--ds-font-sans)}.text-body-sm{font-size:.8125rem;line-height:1.25rem;color:var(--ds-fg-secondary);font-weight:400;font-family:var(--ds-font-sans)}.text-caption{font-size:.6875rem;line-height:1rem;color:var(--ds-fg-tertiary);font-weight:400;font-family:var(--ds-font-sans)}.text-heading-lg{font-size:1.0625rem;line-height:1.5rem;color:var(--ds-fg);font-weight:600;font-family:var(--ds-font-sans)}.text-heading-xl{font-size:1.25rem;line-height:1.75rem;color:var(--ds-fg);font-weight:600;font-family:var(--ds-font-sans)}.text-label{font-size:.8125rem;line-height:1.25rem;color:var(--ds-fg);font-weight:500;font-family:var(--ds-font-sans)}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.-mb-px{margin-bottom:-.0625rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2,.h2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.max-h-64{max-height:16rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.min-w-0{min-width:0}.min-w-32{min-width:8rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-80{width:20rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.table{display:table}.border-collapse{border-collapse:collapse}.translate-x-0{--un-translate-x:0;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.translate-x-8{--un-translate-x:2rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.rotate-45{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:45deg;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.select-none{-webkit-user-select:none;user-select:none}.resize-y{resize:vertical}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1,.gap-4px{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.border{border-width:.0625rem}.border-0{border-width:0rem}.border-2{border-width:.125rem}.border-4{border-width:.25rem}.border-6{border-width:.375rem}.border-b{border-bottom-width:.0625rem}.border-b-2{border-bottom-width:.125rem}.border-l-0{border-left-width:0rem}.border-l-4{border-left-width:.25rem}.border-r-0{border-right-width:0rem}.border-t{border-top-width:.0625rem}.border-t-0{border-top-width:0rem}.border-border{border-color:var(--ds-border)}.border-border-light{border-color:var(--ds-border-light)}.border-border-strong{border-color:var(--ds-border-strong)}.border-brand,.group:hover .group-hover\:border-brand{border-color:var(--ds-brand)}.border-brand-active{border-color:var(--ds-brand-active)}.border-brand-disabled{border-color:var(--ds-brand-disabled)}.border-current{border-color:currentColor}.border-error-border{border-color:var(--ds-error-border)}.border-error-border-strong{border-color:var(--ds-error-border-strong)}.border-fg-inverse{border-color:var(--ds-fg-inverse)}.border-fg-secondary{border-color:var(--ds-fg-secondary)}.border-neutral-border-strong{border-color:var(--ds-neutral-border-strong)}.border-success-border-strong{border-color:var(--ds-success-border-strong)}.border-transparent{border-color:transparent}.focus\:border-border-focus:focus{border-color:var(--ds-border-focus)}.focus\:border-error:focus{border-color:var(--ds-error)}.border-b-brand{border-bottom-color:var(--ds-brand)}.border-b-transparent{border-bottom-color:transparent}.border-l-brand{border-left-color:var(--ds-brand)}.border-l-error{border-left-color:var(--ds-error)}.border-l-info{border-left-color:var(--ds-info)}.border-l-success{border-left-color:var(--ds-success)}.border-l-warning{border-left-color:var(--ds-warning)}.border-t-transparent{border-top-color:transparent}.hover\:border-b-border-strong:hover{border-bottom-color:var(--ds-border-strong)}.rounded{border-radius:.25rem}.rounded-full{border-radius:624.9375rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border-solid{border-style:solid}.bg-bg{background-color:var(--ds-bg)}.bg-bg-inverse,.bg-bg-inverse\/50{background-color:var(--ds-bg-inverse)}.bg-bg-secondary{background-color:var(--ds-bg-secondary)}.bg-bg-tertiary{background-color:var(--ds-bg-tertiary)}.bg-brand{background-color:var(--ds-brand)}.bg-brand-disabled{background-color:var(--ds-brand-disabled)}.bg-brand-soft{background-color:var(--ds-brand-soft)}.bg-error{background-color:var(--ds-error)}.bg-error-soft{background-color:var(--ds-error-soft)}.bg-info{background-color:var(--ds-info)}.bg-info-soft{background-color:var(--ds-info-soft)}.bg-neutral{background-color:var(--ds-neutral)}.bg-neutral-soft{background-color:var(--ds-neutral-soft)}.bg-processing{background-color:var(--ds-processing)}.bg-processing-soft{background-color:var(--ds-processing-soft)}.bg-success{background-color:var(--ds-success)}.bg-success-soft{background-color:var(--ds-success-soft)}.bg-surface-hover{background-color:var(--ds-surface-hover)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--ds-warning)}.bg-warning-soft{background-color:var(--ds-warning-soft)}.hover\:bg-brand-hover:hover{background-color:var(--ds-brand-hover)}.hover\:bg-brand-soft:hover{background-color:var(--ds-brand-soft)}.hover\:bg-error-hover:hover{background-color:var(--ds-error-hover)}.hover\:bg-neutral-soft-hover:hover{background-color:var(--ds-neutral-soft-hover)}.hover\:bg-success-hover:hover{background-color:var(--ds-success-hover)}.hover\:bg-surface-hover-light:hover{background-color:var(--ds-surface-hover-light)}.active\:bg-brand-active:active{background-color:var(--ds-brand-active)}.active\:bg-brand-soft-hover:active{background-color:var(--ds-brand-soft-hover)}.active\:bg-error-active:active{background-color:var(--ds-error-active)}.active\:bg-neutral-soft-active:active{background-color:var(--ds-neutral-soft-active)}.disabled\:bg-brand-disabled:disabled{background-color:var(--ds-brand-disabled)}.disabled\:bg-surface-disabled:disabled{background-color:var(--ds-surface-disabled)}.object-cover{object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-4{padding:1rem}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py,.py-4{padding-top:1rem;padding-bottom:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl{padding-left:1rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-3{padding-left:.75rem}.pl-8{padding-left:2rem}.pr{padding-right:1rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-base{font-size:.9375rem;line-height:1.375rem}.text-lg{font-size:1.0625rem;line-height:1.5rem}.text-sm{font-size:.8125rem;line-height:1.25rem}.text-xs{font-size:.6875rem;line-height:1rem}.text-brand{color:var(--ds-brand)}.text-brand-on-soft{color:var(--ds-brand-on-soft)}.text-brand-on-solid{color:var(--ds-brand-on-solid)}.text-error{color:var(--ds-error)}.text-error-on-soft{color:var(--ds-error-on-soft)}.text-error-on-solid{color:var(--ds-error-on-solid)}.text-fg{color:var(--ds-fg)}.text-fg-disabled{color:var(--ds-fg-disabled)}.text-fg-inverse{color:var(--ds-fg-inverse)}.text-fg-secondary{color:var(--ds-fg-secondary)}.text-fg-tertiary{color:var(--ds-fg-tertiary)}.text-info{color:var(--ds-info)}.text-info-on-soft{color:var(--ds-info-on-soft)}.text-neutral-on-soft{color:var(--ds-neutral-on-soft)}.text-processing-on-soft{color:var(--ds-processing-on-soft)}.text-success{color:var(--ds-success)}.text-success-on-soft{color:var(--ds-success-on-soft)}.text-success-on-solid{color:var(--ds-success-on-solid)}.text-transparent{color:transparent}.text-warning{color:var(--ds-warning)}.text-warning-on-soft{color:var(--ds-warning-on-soft)}.hover\:text-fg-secondary:hover{color:var(--ds-fg-secondary)}.hover\:text-fg:hover{color:var(--ds-fg)}.disabled\:text-fg-disabled:disabled{color:var(--ds-fg-disabled)}.placeholder\:text-fg-tertiary::placeholder{color:var(--ds-fg-tertiary)}.font-500,.font-medium{font-weight:500}.font-sans{font-family:var(--ds-font-sans)}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-95:disabled{opacity:.95}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 .625rem .9375rem -.1875rem var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 .25rem .375rem -.25rem var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-md{--un-shadow:var(--un-shadow-inset) 0 .25rem .375rem -.0625rem var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 .125rem .25rem -.125rem var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.outline-none{outline:.125rem solid transparent;outline-offset:.125rem}.focus\:outline-none:focus{outline:.125rem solid transparent;outline-offset:.125rem}.focus-visible\:outline-none:focus-visible{outline:.125rem solid transparent;outline-offset:.125rem}.focus\:ring-2:focus{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus-visible\:ring-2:focus-visible{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.peer:focus-visible~.peer-focus-visible\:ring-2{--un-ring-width:.125rem;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:ring-offset-0:focus{--un-ring-offset-width:0rem}.focus-visible\:ring-offset-2:focus-visible{--un-ring-offset-width:.125rem}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--un-ring-offset-width:.125rem}.focus\:ring-brand:focus{--un-ring-color:var(--ds-brand) }.focus\:ring-error:focus{--un-ring-color:var(--ds-error) }.focus-visible\:ring-brand:focus-visible{--un-ring-color:var(--ds-brand) }.peer:focus-visible~.peer-focus-visible\:ring-brand{--un-ring-color:var(--ds-brand) }.blur{--un-blur:blur(.5rem);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.shadow-default{box-shadow:0 .125rem .125rem #4559720f,0 .375rem .375rem #4559720a}