@prasworld/flux-ui 0.0.1

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 (21) hide show
  1. package/README.md +409 -0
  2. package/_index.scss +13 -0
  3. package/components/_button.scss +25 -0
  4. package/components/_index.scss +3 -0
  5. package/flux-ui.css +1 -0
  6. package/flux-ui.css.map +1 -0
  7. package/flux-ui.scss +15 -0
  8. package/index.d.ts +11 -0
  9. package/index.js +205 -0
  10. package/package.json +37 -0
  11. package/styles/_index.scss +7 -0
  12. package/styles/_layout.scss +223 -0
  13. package/styles/_reset.scss +192 -0
  14. package/styles/_root.scss +112 -0
  15. package/styles/_theme.scss +175 -0
  16. package/styles/_utilities.scss +434 -0
  17. package/styles/_variables.scss +323 -0
  18. package/styles/index.d.ts +26 -0
  19. package/styles/index.js +10 -0
  20. package/tokens/index.d.ts +218 -0
  21. package/tokens/index.js +205 -0
package/README.md ADDED
@@ -0,0 +1,409 @@
1
+ # Flux UI
2
+
3
+ A custom, lightweight CSS/SASS framework built for microfrontend architectures. Optimized for Module Federation with type-safe design tokens and minimal bundle footprint.
4
+
5
+ ## Features
6
+
7
+ - ✨ **Custom Foundation** - Built from scratch, no framework bloat
8
+ - 📦 **Lightweight** - 15-25KB gzipped (vs 150-230KB for Bootstrap/Tailwind)
9
+ - 🎨 **Type-Safe Tokens** - Design tokens exported as TypeScript constants
10
+ - 🔄 **MFE-Optimized** - CSS loads once in shell, all remotes reuse it
11
+ - 🎯 **CSS Layers** - Modern cascade management prevents namespace conflicts
12
+ - 🌙 **Runtime Theming** - CSS variables enable dynamic theme changes
13
+ - 📱 **Responsive** - Mobile-first breakpoint system
14
+ - ♿ **Accessible** - WCAG-compliant patterns and defaults
15
+
16
+ ## Installation
17
+
18
+ ### NPM
19
+
20
+ ```bash
21
+ npm install @vi/flux-ui
22
+ # or
23
+ yarn add @vi/flux-ui
24
+ ```
25
+
26
+ ### Monorepo (Local)
27
+
28
+ ```typescript
29
+ // In tsconfig.base.json (already configured)
30
+ {
31
+ "compilerOptions": {
32
+ "paths": {
33
+ "@vi/flux-ui": ["libs/flux-ui/src/index.ts"],
34
+ "@vi/flux-ui/tokens": ["libs/flux-ui/src/tokens/index.ts"],
35
+ "@vi/flux-ui/styles": ["libs/flux-ui/src/styles/index.ts"]
36
+ }
37
+ }
38
+ }
39
+ ```
40
+
41
+ ## Integration Guide
42
+
43
+ ### Option 1: SCSS Consumer (Recommended for Angular/Nx Apps)
44
+
45
+ **Best for:** Angular apps, build-time optimization, theming
46
+
47
+ ```scss
48
+ // In your app/src/styles.scss (or global style)
49
+
50
+ @use '@vi/flux-ui/styles/_variables.scss' as *;
51
+ @use '@vi/flux-ui/styles/_reset.scss';
52
+ @use '@vi/flux-ui/styles/_layout.scss';
53
+ @use '@vi/flux-ui/styles/_utilities.scss';
54
+
55
+ // Now all utilities available:
56
+ // - Classes: .p-md, .text-lg, .bg-primary, .flex, .gap-sm, etc.
57
+ // - Variables: $spacing-md, $color-primary, $font-size-base, etc.
58
+ // - Theming: @use '@vi/flux-ui/styles/theme' as theme; then @include theme.vi-theme(theme.$vi-theme--light, $emit-custom-properties: true);
59
+ ```
60
+
61
+ **Advantages:**
62
+ - ✅ Tree-shaking: Only include used styles (via build process)
63
+ - ✅ Variable access: Use `$spacing-md` in your component SCSS
64
+ - ✅ Theming: @include mixins for custom theme scopes
65
+ - ✅ Smaller bundle: Only compiled styles you actually use
66
+ - ✅ Full control: Extend/override tokens before build
67
+
68
+ **Example Component (Angular):**
69
+ ```scss
70
+ // button.component.scss
71
+ @use '@vi/flux-ui/styles/variables' as *;
72
+ @use '@vi/flux-ui/styles/theme' as theme;
73
+
74
+ :host {
75
+ @include theme.vi-theme(theme.$vi-theme--light, $emit-custom-properties: true);
76
+ }
77
+
78
+ .button {
79
+ padding: $spacing-sm $spacing-md;
80
+ background-color: $color-primary;
81
+ border-radius: $border-radius-md;
82
+ font-weight: $font-weight-semibold;
83
+
84
+ &:hover {
85
+ background-color: $color-primary-hover; // Theme token
86
+ }
87
+ }
88
+ ```
89
+
90
+ ### Option 2: CSS-Only Consumer (Plain HTML / No Build)
91
+
92
+ **Best for:** Static sites, CDN delivery, Shadow DOM isolation, Storybook
93
+
94
+ ```html
95
+ <!-- In your HTML <head> -->
96
+ <link rel="stylesheet" href="./node_modules/@vi/flux-ui/flux-ui.css">
97
+
98
+ <!-- Now all utilities available via classes -->
99
+ <div class="flex justify-center items-center gap-md p-lg">
100
+ <h1 class="text-3xl font-bold text-primary">Hello</h1>
101
+ <button class="px-md py-sm bg-success text-grey-100 rounded-md">Action</button>
102
+ </div>
103
+ ```
104
+
105
+ **Advantages:**
106
+ - ✅ Zero build step needed
107
+ - ✅ Works anywhere (plain HTML, iframes, Shadow DOM)
108
+ - ✅ CDN-friendly: Single CSS file
109
+ - ✅ Fast delivery: CSS pre-compiled and minified
110
+ - ✅ No SCSS knowledge required
111
+
112
+ **Size & Performance:**
113
+ - Uncompressed: 35 KB
114
+ - Gzipped: ~8 KB
115
+ - Source map: 8.6 KB (for debugging)
116
+
117
+ ### Option 3: Hybrid (TypeScript + CSS)
118
+
119
+ **Best for:** Web Components (Lit, vanilla JS)
120
+
121
+ ```typescript
122
+ // In your component file
123
+ import '@vi/flux-ui/flux-ui.css'; // Import pre-compiled CSS
124
+ import { tokens } from '@vi/flux-ui'; // Import tokens for JS styling
125
+
126
+ class MyComponent extends LitElement {
127
+ static styles = css`
128
+ :host {
129
+ padding: ${tokens.spacing.md};
130
+ color: var(--vi-color-foreground);
131
+ }
132
+ `;
133
+
134
+ render() {
135
+ return html`
136
+ <div class="flex gap-md p-lg">
137
+ <span>Content</span>
138
+ </div>
139
+ `;
140
+ }
141
+ }
142
+ ```
143
+
144
+ **Advantages:**
145
+ - ✅ Pre-compiled CSS for utilities
146
+ - ✅ Type-safe tokens for JS-driven styles
147
+ - ✅ Works with Web Components & frameworks
148
+ - ✅ Best of both worlds
149
+
150
+ ## Using Tokens
151
+
152
+ ```typescript
153
+ import { tokens } from '@vi/flux-ui';
154
+
155
+ const buttonStyle = {
156
+ padding: tokens.spacing.md, // 24px
157
+ backgroundColor: tokens.colors.primary,
158
+ borderRadius: tokens.borders.radius.md
159
+ };
160
+ ```
161
+
162
+ ### Using Utilities
163
+
164
+ ```html
165
+ <div class="flex justify-between items-center gap-md p-lg">
166
+ <h1 class="text-2xl font-bold">Title</h1>
167
+ <button class="bg-primary text-grey-100 rounded-md">Action</button>
168
+ </div>
169
+ ```
170
+
171
+ ## Token Categories
172
+
173
+ | Category | Examples | Count |
174
+ |----------|----------|-------|
175
+ | **Colors** | primary, secondary, success, error, neutral-50 to 900 | 20+ |
176
+ | **Spacing** | xs (8px), sm (16px), md (24px), ... 3xl (56px) | 7 |
177
+ | **Typography** | text-xs to text-3xl, font-light to font-bold | 15+ |
178
+ | **Shadows** | shadow-sm, md, lg, xl | 4 |
179
+ | **Borders** | border-radius: sm to xl, border-width: thin to thick | 8 |
180
+ | **Z-Index** | dropdown, modal, tooltip | 10 |
181
+ | **Breakpoints** | xs, sm, md, lg, xl, 2xl | 6 |
182
+
183
+ ## Documentation
184
+
185
+ ### Strategic & Planning
186
+ - **[ADR-001-component-library-strategy.md](./docs/ADR-001-component-library-strategy.md)** ⭐ **START HERE** — Angular vs Web Components, build vs buy decision
187
+ - **[QUICK-COMPARISON.md](./docs/QUICK-COMPARISON.md)** - CSS framework decision matrix
188
+ - **[FRAMEWORK-COMPARISON.md](./docs/FRAMEWORK-COMPARISON.md)** - Detailed comparison with Bootstrap, Tailwind, Material, etc.
189
+ - **[COMPONENT-LAYER-ROADMAP.md](./docs/COMPONENT-LAYER-ROADMAP.md)** - Angular component implementation guide
190
+
191
+ ### Technical Reference
192
+ - **[ARCHITECTURE.md](./docs/ARCHITECTURE.md)** - Technical deep dive
193
+ - **[TOKEN-SPEC.md](./docs/TOKEN-SPEC.md)** - Complete token reference
194
+ - **[CSS-DECISION.md](./docs/CSS-DECISION.md)** - Why we chose a custom framework
195
+ - **[USAGE-GUIDE.md](./docs/USAGE-GUIDE.md)** - How to use in your apps
196
+
197
+ ## Architecture
198
+
199
+ ```
200
+ Design System (Shared)
201
+ │
202
+ ├── Init in Shell
203
+ │ └── Load CSS once at bootstrap
204
+ │
205
+ └── Consumed by Remotes
206
+ ├── Remote 1: Import tokens, reuse CSS ✓
207
+ ├── Remote 2: Import tokens, reuse CSS ✓
208
+ └── Remote 3: Import tokens, reuse CSS ✓
209
+ ```
210
+
211
+ **Result:** CSS file size ÷ by N MFEs, not multiplied!
212
+
213
+ ## MFE Integration Pattern
214
+
215
+ ### Shell App
216
+
217
+ ```typescript
218
+ // apps/shell/src/bootstrap.ts
219
+ import '@vi/flux-ui/flux-ui.css'; // Load once for all MFEs
220
+
221
+ bootstrapApplication(App).catch(err => console.error(err));
222
+ ```
223
+
224
+ ### Remote App
225
+
226
+ ```typescript
227
+ // apps/remote1/src/bootstrap.ts
228
+ // ❌ DO NOT import styles (shell already loaded them)
229
+
230
+ import { tokens } from '@vi/flux-ui'; // ✅ Import tokens only
231
+
232
+ bootstrapApplication(RemoteEntry).catch(err => console.error(err));
233
+ ```
234
+
235
+ ## Token Export Formats
236
+
237
+ ### TypeScript (Type-Safe)
238
+
239
+ ```typescript
240
+ import { tokens } from '@vi/flux-ui';
241
+
242
+ const value = tokens.spacing.md; // IDE autocomplete, type checking
243
+ ```
244
+
245
+ ### SCSS (Build-Time)
246
+
247
+ ```scss
248
+ @use '@vi/flux-ui/styles/variables' as *;
249
+
250
+ .button {
251
+ padding: $spacing-md;
252
+ background: $color-primary;
253
+ }
254
+ ```
255
+
256
+ ### CSS (Runtime)
257
+
258
+ ```css
259
+ :root {
260
+ --vi-spacing-md: 24px;
261
+ --vi-color-primary: #0066cc;
262
+ }
263
+
264
+ .button {
265
+ padding: var(--vi-spacing-md);
266
+ background: var(--vi-color-primary);
267
+ }
268
+ ```
269
+
270
+ ## Utility Classes
271
+
272
+ ### Spacing
273
+
274
+ ```html
275
+ <div class="m-md">Margin 24px</div>
276
+ <div class="p-lg" style="margin-left: auto; margin-right: auto; width: max-content;">Padding 32px, centered</div>
277
+ <div class="mt-sm mb-lg">Top margin 16px, bottom 32px</div>
278
+ ```
279
+
280
+ ### Typography
281
+
282
+ ```html
283
+ <h1 class="text-3xl font-bold">Heading</h1>
284
+ <p class="text-base leading-relaxed">Body text with comfortable spacing</p>
285
+ <code class="text-sm text-grey-600">Code snippet</code>
286
+ ```
287
+
288
+ ### Layout
289
+
290
+ ```html
291
+ <div class="flex justify-between items-center gap-md">Flexbox</div>
292
+ <div class="grid grid-cols-3 gap-lg">Grid 3 columns</div>
293
+ ```
294
+
295
+ ### Colors
296
+
297
+ ```html
298
+ <p class="text-primary">Colored text</p>
299
+ <div class="bg-success text-grey-100">Success state</div>
300
+ <div class="border-lg border-error">Error border</div>
301
+ ```
302
+
303
+ ## Theming
304
+
305
+ ### Light/Dark Mode
306
+
307
+ ```typescript
308
+ // Change theme at runtime
309
+ document.documentElement.setAttribute('data-theme', 'dark');
310
+
311
+ // Update CSS variables
312
+ const root = document.documentElement;
313
+ root.style.setProperty('--vi-color-primary', '#60a5fa');
314
+ ```
315
+
316
+ **SCSS:**
317
+
318
+ ```scss
319
+ :root {
320
+ --vi-color-background: #ffffff;
321
+ }
322
+
323
+ :root[data-theme="dark"] {
324
+ --vi-color-background: #1f2937;
325
+ }
326
+ ```
327
+
328
+ ## Bundle Impact
329
+
330
+ - **Design System Core:** 15-25KB gzipped (loaded once in shell)
331
+ - **Per Remote App:** 0KB overhead (reuses shell CSS)
332
+ - **Tokens Module:** 2-3KB (tree-shakeable)
333
+
334
+ **Comparison:**
335
+ - Bootstrap per app: 180-230KB × N remotes
336
+ - Tailwind per app: 20-80KB × N remotes
337
+ - **Design System (ours): 20-30KB × 1 (shell only)** ✓
338
+
339
+ ## CSS Layers
340
+
341
+ All styles use CSS Layers for safe cascade management:
342
+
343
+ ```scss
344
+ @layer reset, components, utilities;
345
+
346
+ @layer reset {
347
+ /* Browser defaults, lowest priority */
348
+ }
349
+
350
+ @layer components {
351
+ /* Component styles, medium priority */
352
+ }
353
+
354
+ @layer utilities {
355
+ /* Utility classes, highest priority */
356
+ }
357
+ ```
358
+
359
+ This prevents specificity wars between shell and remote app styles.
360
+
361
+ ## Framework Support
362
+
363
+ Works with any JavaScript framework:
364
+ - ✅ Angular
365
+ - ✅ React
366
+ - ✅ Vue
367
+ - ✅ Web Components
368
+ - ✅ Vanilla JavaScript
369
+
370
+ ## Performance
371
+
372
+ - **CSS Parse Time:** ~2-3ms (minimal)
373
+ - **CSS Variable Access:** ~4-6ms for 100 lookups
374
+ - **No JavaScript overhead** for core styles
375
+ - **Tree-shakeable tokens** (unused exports removed)
376
+
377
+ ## Accessibility
378
+
379
+ - ✅ WCAG AA compliant color contrast
380
+ - ✅ Focus states built-in
381
+ - ✅ Semantic HTML patterns
382
+ - ✅ Reduced motion support ready
383
+
384
+ ## Contributing
385
+
386
+ To add a new token or component:
387
+
388
+ 1. Update `src/tokens/index.ts` and `src/styles/_variables.scss`
389
+ 2. Add CSS custom property in `:root`
390
+ 3. Update relevant `src/styles/*.scss` file
391
+ 4. Document in `docs/TOKEN-SPEC.md`
392
+ 5. Create component in `src/components/` if needed
393
+
394
+ ## Versioning
395
+
396
+ - **Major:** Breaking changes (token renamed/removed)
397
+ - **Minor:** New tokens/components
398
+ - **Patch:** Bug fixes (styling corrections)
399
+
400
+ ## License
401
+
402
+ MIT
403
+
404
+ ## Questions?
405
+
406
+ Refer to:
407
+ - [USAGE-GUIDE.md](./docs/USAGE-GUIDE.md) for implementation details
408
+ - [ARCHITECTURE.md](./docs/ARCHITECTURE.md) for technical decisions
409
+ - [TOKEN-SPEC.md](./docs/TOKEN-SPEC.md) for token reference
package/_index.scss ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Complete flux-ui style import.
3
+ *
4
+ * Usage: @use '@vi/flux-ui';
5
+ *
6
+ * Forwards all style modules in preferred order:
7
+ * 1. Root (cascade layers)
8
+ * 2. Reset (browser normalization)
9
+ * 3. Theme (design tokens)
10
+ * 4. Layout (structural helpers)
11
+ * 5. Utilities (low-level classes)
12
+ */
13
+ @forward 'styles';
package/components/_button.scss ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Button component base styles.
3
+ *
4
+ * Shared foundation styles for all button-like components.
5
+ * Provides flexbox layout, spacing via tokens, and interaction states.
6
+ * Component-specific colors and sizing defined by consuming components.
7
+ */
8
+
9
+ @use '../styles/variables' as tokens;
10
+
11
+ .button {
12
+ display: inline-flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ gap: #{tokens.$spacing-xs};
16
+ border: #{tokens.$border-width-thin} solid transparent;
17
+ border-radius: var(--vi-button-shape-border-radius, #{tokens.$border-radius-md});
18
+ padding: var(--vi-button-spacing-padding-block, #{tokens.$spacing-sm}) var(--vi-button-spacing-padding-inline, #{tokens.$spacing-md});
19
+ font-size: var(--vi-button-typography-font-size, #{tokens.$font-size-base});
20
+ font-weight: var(--vi-button-typography-font-weight, #{tokens.$font-weight-semibold});
21
+ line-height: #{tokens.$line-height-tight};
22
+ cursor: pointer;
23
+ user-select: none;
24
+ transition: opacity var(--vi-button-effect-transition-duration, 160ms) ease;
25
+ }
package/components/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Forwards all component base style modules.
2
+ // Usage: @use '@vi/flux-ui/components';
3
+ @forward 'button';
package/flux-ui.css ADDED
@@ -0,0 +1 @@
1
+ @layer reset, components, utilities;:root{--vi-color-grey-100: strip-units(var(--vi-color-grey-100, #f3f4f6));--vi-color-grey-200: strip-units(var(--vi-color-grey-200, #e5e7eb));--vi-color-grey-300: strip-units(var(--vi-color-grey-300, #d1d5db));--vi-color-grey-400: strip-units(var(--vi-color-grey-400, #9ca3af));--vi-color-grey-500: strip-units(var(--vi-color-grey-500, #6b7280));--vi-color-grey-600: strip-units(var(--vi-color-grey-600, #4b5563));--vi-color-grey-700: strip-units(var(--vi-color-grey-700, #374151));--vi-color-grey-800: strip-units(var(--vi-color-grey-800, #1f2937));--vi-color-grey-900: strip-units(var(--vi-color-grey-900, #111827));--vi-color-red-100: strip-units(var(--vi-color-red-100, #fee2e2));--vi-color-red-200: strip-units(var(--vi-color-red-200, #fecaca));--vi-color-red-300: strip-units(var(--vi-color-red-300, #fca5a5));--vi-color-red-400: strip-units(var(--vi-color-red-400, #f87171));--vi-color-red-500: strip-units(var(--vi-color-red-500, #ef4444));--vi-color-red-600: strip-units(var(--vi-color-red-600, #dc2626));--vi-color-red-700: strip-units(var(--vi-color-red-700, #b91c1c));--vi-color-red-800: strip-units(var(--vi-color-red-800, #991b1b));--vi-color-red-900: strip-units(var(--vi-color-red-900, #7f1d1d));--vi-color-yellow-100: strip-units(var(--vi-color-yellow-100, #fef9c3));--vi-color-yellow-200: strip-units(var(--vi-color-yellow-200, #fef08a));--vi-color-yellow-300: strip-units(var(--vi-color-yellow-300, #fde047));--vi-color-yellow-400: strip-units(var(--vi-color-yellow-400, #facc15));--vi-color-yellow-500: strip-units(var(--vi-color-yellow-500, #eab308));--vi-color-yellow-600: strip-units(var(--vi-color-yellow-600, #ca8a04));--vi-color-yellow-700: strip-units(var(--vi-color-yellow-700, #a16207));--vi-color-yellow-800: strip-units(var(--vi-color-yellow-800, #854d0e));--vi-color-yellow-900: strip-units(var(--vi-color-yellow-900, #713f12));--vi-color-green-100: strip-units(var(--vi-color-green-100, #dcfce7));--vi-color-green-200: strip-units(var(--vi-color-green-200, #bbf7d0));--vi-color-green-300: strip-units(var(--vi-color-green-300, #86efac));--vi-color-green-400: strip-units(var(--vi-color-green-400, #4ade80));--vi-color-green-500: strip-units(var(--vi-color-green-500, #22c55e));--vi-color-green-600: strip-units(var(--vi-color-green-600, #16a34a));--vi-color-green-700: strip-units(var(--vi-color-green-700, #15803d));--vi-color-green-800: strip-units(var(--vi-color-green-800, #166534));--vi-color-green-900: strip-units(var(--vi-color-green-900, #14532d));--vi-color-blue-100: strip-units(var(--vi-color-blue-100, #dbeafe));--vi-color-blue-200: strip-units(var(--vi-color-blue-200, #bfdbfe));--vi-color-blue-300: strip-units(var(--vi-color-blue-300, #93c5fd));--vi-color-blue-400: strip-units(var(--vi-color-blue-400, #60a5fa));--vi-color-blue-500: strip-units(var(--vi-color-blue-500, #3b82f6));--vi-color-blue-600: strip-units(var(--vi-color-blue-600, #2563eb));--vi-color-blue-700: strip-units(var(--vi-color-blue-700, #1d4ed8));--vi-color-blue-800: strip-units(var(--vi-color-blue-800, #1e40af));--vi-color-blue-900: strip-units(var(--vi-color-blue-900, #1e3a8a));--vi-color-purple-100: strip-units(var(--vi-color-purple-100, #f3e8ff));--vi-color-purple-200: strip-units(var(--vi-color-purple-200, #e9d5ff));--vi-color-purple-300: strip-units(var(--vi-color-purple-300, #d8b4fe));--vi-color-purple-400: strip-units(var(--vi-color-purple-400, #c084fc));--vi-color-purple-500: strip-units(var(--vi-color-purple-500, #a855f7));--vi-color-purple-600: strip-units(var(--vi-color-purple-600, #9333ea));--vi-color-purple-700: strip-units(var(--vi-color-purple-700, #7e22ce));--vi-color-purple-800: strip-units(var(--vi-color-purple-800, #6b21a8));--vi-color-purple-900: strip-units(var(--vi-color-purple-900, #581c87));--vi-color-primary: strip-units(var(--vi-color-primary, #0066cc));--vi-color-secondary: strip-units(var(--vi-color-secondary, #f0f4f8));--vi-color-success: strip-units(var(--vi-color-success, #22c55e));--vi-color-warning: strip-units(var(--vi-color-warning, #eab308));--vi-color-error: strip-units(var(--vi-color-error, #ef4444));--vi-color-info: strip-units(var(--vi-color-info, #3b82f6));--vi-color-background: strip-units(var(--vi-color-background, #ffffff));--vi-color-foreground: strip-units(var(--vi-color-foreground, #111827));--vi-color-border: strip-units(var(--vi-color-border, #e5e7eb));--vi-spacing-xs: strip-units(var(--vi-spacing-xs, 8px));--vi-spacing-sm: strip-units(var(--vi-spacing-sm, 16px));--vi-spacing-md: strip-units(var(--vi-spacing-md, 24px));--vi-spacing-lg: strip-units(var(--vi-spacing-lg, 32px));--vi-spacing-xl: strip-units(var(--vi-spacing-xl, 40px));--vi-spacing-2xl: strip-units(var(--vi-spacing-2xl, 48px));--vi-spacing-3xl: strip-units(var(--vi-spacing-3xl, 56px));--vi-font-family-base: strip-units(var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));--vi-font-family-mono: strip-units(var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));--vi-font-size-xs: strip-units(var(--vi-font-size-xs, 12px));--vi-font-size-sm: strip-units(var(--vi-font-size-sm, 14px));--vi-font-size-base: strip-units(var(--vi-font-size-base, 16px));--vi-font-size-lg: strip-units(var(--vi-font-size-lg, 18px));--vi-font-size-xl: strip-units(var(--vi-font-size-xl, 20px));--vi-font-size-2xl: strip-units(var(--vi-font-size-2xl, 24px));--vi-font-size-3xl: strip-units(var(--vi-font-size-3xl, 30px));--vi-font-weight-light: strip-units(var(--vi-font-weight-light, 300));--vi-font-weight-normal: strip-units(var(--vi-font-weight-normal, 400));--vi-font-weight-medium: strip-units(var(--vi-font-weight-medium, 500));--vi-font-weight-semibold: strip-units(var(--vi-font-weight-semibold, 600));--vi-font-weight-bold: strip-units(var(--vi-font-weight-bold, 700));--vi-line-height-tight: strip-units(var(--vi-line-height-tight, 1.2));--vi-line-height-normal: strip-units(var(--vi-line-height-normal, 1.5));--vi-line-height-relaxed: strip-units(var(--vi-line-height-relaxed, 1.75));--vi-shadow-sm: strip-units(var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));--vi-shadow-md: strip-units(var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)));--vi-shadow-lg: strip-units(var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));--vi-shadow-xl: strip-units(var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1)));--vi-border-radius-sm: strip-units(var(--vi-border-radius-sm, 2px));--vi-border-radius-md: strip-units(var(--vi-border-radius-md, 4px));--vi-border-radius-lg: strip-units(var(--vi-border-radius-lg, 8px));--vi-border-radius-xl: strip-units(var(--vi-border-radius-xl, 12px));--vi-border-width-thin: strip-units(var(--vi-border-width-thin, 1px));--vi-border-width-base: strip-units(var(--vi-border-width-base, 2px));--vi-border-width-thick: strip-units(var(--vi-border-width-thick, 3px))}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-size:var(--vi-font-size-base, 16px);line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-color-foreground, #111827);background-color:var(--vi-color-background, #ffffff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6,ul,ol,dl{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;line-height:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none;background-color:rgba(0,0,0,0)}a:active,a:hover{outline:0}code,pre,samp{font-family:var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace);font-size:1em}pre{margin:0;overflow:auto}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15}button,input[type=button],input[type=reset],input[type=submit]{background:rgba(0,0,0,0);border:0;cursor:pointer;-webkit-appearance:button}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}input[type=checkbox]{padding:0;-webkit-appearance:checkbox}input[type=radio]{padding:0;-webkit-appearance:radio}textarea{overflow:auto;resize:vertical}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img,svg{max-width:100%;height:auto;display:block}img{border:0;vertical-align:middle}iframe,video{max-width:100%}[hidden]{display:none}hr{margin:0;border:0;border-top:1px solid var(--vi-color-border, #e5e7eb)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.flex-1{flex:1}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh}.max-w-container{max-width:1200px;margin-left:auto;margin-right:auto}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}}@layer utilities{.m-xs{margin:var(--vi-spacing-xs, 8px)}.mx-xs{margin-left:var(--vi-spacing-xs, 8px);margin-right:var(--vi-spacing-xs, 8px)}.my-xs{margin-top:var(--vi-spacing-xs, 8px);margin-bottom:var(--vi-spacing-xs, 8px)}.mt-xs{margin-top:var(--vi-spacing-xs, 8px)}.mr-xs{margin-right:var(--vi-spacing-xs, 8px)}.mb-xs{margin-bottom:var(--vi-spacing-xs, 8px)}.ml-xs{margin-left:var(--vi-spacing-xs, 8px)}.m-sm{margin:var(--vi-spacing-sm, 16px)}.mx-sm{margin-left:var(--vi-spacing-sm, 16px);margin-right:var(--vi-spacing-sm, 16px)}.my-sm{margin-top:var(--vi-spacing-sm, 16px);margin-bottom:var(--vi-spacing-sm, 16px)}.mt-sm{margin-top:var(--vi-spacing-sm, 16px)}.mr-sm{margin-right:var(--vi-spacing-sm, 16px)}.mb-sm{margin-bottom:var(--vi-spacing-sm, 16px)}.ml-sm{margin-left:var(--vi-spacing-sm, 16px)}.m-md{margin:var(--vi-spacing-md, 24px)}.mx-md{margin-left:var(--vi-spacing-md, 24px);margin-right:var(--vi-spacing-md, 24px)}.my-md{margin-top:var(--vi-spacing-md, 24px);margin-bottom:var(--vi-spacing-md, 24px)}.mt-md{margin-top:var(--vi-spacing-md, 24px)}.mr-md{margin-right:var(--vi-spacing-md, 24px)}.mb-md{margin-bottom:var(--vi-spacing-md, 24px)}.ml-md{margin-left:var(--vi-spacing-md, 24px)}.m-lg{margin:var(--vi-spacing-lg, 32px)}.mx-lg{margin-left:var(--vi-spacing-lg, 32px);margin-right:var(--vi-spacing-lg, 32px)}.my-lg{margin-top:var(--vi-spacing-lg, 32px);margin-bottom:var(--vi-spacing-lg, 32px)}.mt-lg{margin-top:var(--vi-spacing-lg, 32px)}.mr-lg{margin-right:var(--vi-spacing-lg, 32px)}.mb-lg{margin-bottom:var(--vi-spacing-lg, 32px)}.ml-lg{margin-left:var(--vi-spacing-lg, 32px)}.m-xl{margin:var(--vi-spacing-xl, 40px)}.mx-xl{margin-left:var(--vi-spacing-xl, 40px);margin-right:var(--vi-spacing-xl, 40px)}.my-xl{margin-top:var(--vi-spacing-xl, 40px);margin-bottom:var(--vi-spacing-xl, 40px)}.mt-xl{margin-top:var(--vi-spacing-xl, 40px)}.mr-xl{margin-right:var(--vi-spacing-xl, 40px)}.mb-xl{margin-bottom:var(--vi-spacing-xl, 40px)}.ml-xl{margin-left:var(--vi-spacing-xl, 40px)}.m-2xl{margin:var(--vi-spacing-2xl, 48px)}.mx-2xl{margin-left:var(--vi-spacing-2xl, 48px);margin-right:var(--vi-spacing-2xl, 48px)}.my-2xl{margin-top:var(--vi-spacing-2xl, 48px);margin-bottom:var(--vi-spacing-2xl, 48px)}.mt-2xl{margin-top:var(--vi-spacing-2xl, 48px)}.mr-2xl{margin-right:var(--vi-spacing-2xl, 48px)}.mb-2xl{margin-bottom:var(--vi-spacing-2xl, 48px)}.ml-2xl{margin-left:var(--vi-spacing-2xl, 48px)}.m-3xl{margin:var(--vi-spacing-3xl, 56px)}.mx-3xl{margin-left:var(--vi-spacing-3xl, 56px);margin-right:var(--vi-spacing-3xl, 56px)}.my-3xl{margin-top:var(--vi-spacing-3xl, 56px);margin-bottom:var(--vi-spacing-3xl, 56px)}.mt-3xl{margin-top:var(--vi-spacing-3xl, 56px)}.mr-3xl{margin-right:var(--vi-spacing-3xl, 56px)}.mb-3xl{margin-bottom:var(--vi-spacing-3xl, 56px)}.ml-3xl{margin-left:var(--vi-spacing-3xl, 56px)}.p-xs{padding:var(--vi-spacing-xs, 8px)}.px-xs{padding-left:var(--vi-spacing-xs, 8px);padding-right:var(--vi-spacing-xs, 8px)}.py-xs{padding-top:var(--vi-spacing-xs, 8px);padding-bottom:var(--vi-spacing-xs, 8px)}.pt-xs{padding-top:var(--vi-spacing-xs, 8px)}.pr-xs{padding-right:var(--vi-spacing-xs, 8px)}.pb-xs{padding-bottom:var(--vi-spacing-xs, 8px)}.pl-xs{padding-left:var(--vi-spacing-xs, 8px)}.p-sm{padding:var(--vi-spacing-sm, 16px)}.px-sm{padding-left:var(--vi-spacing-sm, 16px);padding-right:var(--vi-spacing-sm, 16px)}.py-sm{padding-top:var(--vi-spacing-sm, 16px);padding-bottom:var(--vi-spacing-sm, 16px)}.pt-sm{padding-top:var(--vi-spacing-sm, 16px)}.pr-sm{padding-right:var(--vi-spacing-sm, 16px)}.pb-sm{padding-bottom:var(--vi-spacing-sm, 16px)}.pl-sm{padding-left:var(--vi-spacing-sm, 16px)}.p-md{padding:var(--vi-spacing-md, 24px)}.px-md{padding-left:var(--vi-spacing-md, 24px);padding-right:var(--vi-spacing-md, 24px)}.py-md{padding-top:var(--vi-spacing-md, 24px);padding-bottom:var(--vi-spacing-md, 24px)}.pt-md{padding-top:var(--vi-spacing-md, 24px)}.pr-md{padding-right:var(--vi-spacing-md, 24px)}.pb-md{padding-bottom:var(--vi-spacing-md, 24px)}.pl-md{padding-left:var(--vi-spacing-md, 24px)}.p-lg{padding:var(--vi-spacing-lg, 32px)}.px-lg{padding-left:var(--vi-spacing-lg, 32px);padding-right:var(--vi-spacing-lg, 32px)}.py-lg{padding-top:var(--vi-spacing-lg, 32px);padding-bottom:var(--vi-spacing-lg, 32px)}.pt-lg{padding-top:var(--vi-spacing-lg, 32px)}.pr-lg{padding-right:var(--vi-spacing-lg, 32px)}.pb-lg{padding-bottom:var(--vi-spacing-lg, 32px)}.pl-lg{padding-left:var(--vi-spacing-lg, 32px)}.p-xl{padding:var(--vi-spacing-xl, 40px)}.px-xl{padding-left:var(--vi-spacing-xl, 40px);padding-right:var(--vi-spacing-xl, 40px)}.py-xl{padding-top:var(--vi-spacing-xl, 40px);padding-bottom:var(--vi-spacing-xl, 40px)}.pt-xl{padding-top:var(--vi-spacing-xl, 40px)}.pr-xl{padding-right:var(--vi-spacing-xl, 40px)}.pb-xl{padding-bottom:var(--vi-spacing-xl, 40px)}.pl-xl{padding-left:var(--vi-spacing-xl, 40px)}.p-2xl{padding:var(--vi-spacing-2xl, 48px)}.px-2xl{padding-left:var(--vi-spacing-2xl, 48px);padding-right:var(--vi-spacing-2xl, 48px)}.py-2xl{padding-top:var(--vi-spacing-2xl, 48px);padding-bottom:var(--vi-spacing-2xl, 48px)}.pt-2xl{padding-top:var(--vi-spacing-2xl, 48px)}.pr-2xl{padding-right:var(--vi-spacing-2xl, 48px)}.pb-2xl{padding-bottom:var(--vi-spacing-2xl, 48px)}.pl-2xl{padding-left:var(--vi-spacing-2xl, 48px)}.p-3xl{padding:var(--vi-spacing-3xl, 56px)}.px-3xl{padding-left:var(--vi-spacing-3xl, 56px);padding-right:var(--vi-spacing-3xl, 56px)}.py-3xl{padding-top:var(--vi-spacing-3xl, 56px);padding-bottom:var(--vi-spacing-3xl, 56px)}.pt-3xl{padding-top:var(--vi-spacing-3xl, 56px)}.pr-3xl{padding-right:var(--vi-spacing-3xl, 56px)}.pb-3xl{padding-bottom:var(--vi-spacing-3xl, 56px)}.pl-3xl{padding-left:var(--vi-spacing-3xl, 56px)}.text-xs{font-size:var(--vi-font-size-xs, 12px)}.text-sm{font-size:var(--vi-font-size-sm, 14px)}.text-base{font-size:var(--vi-font-size-base, 16px)}.text-lg{font-size:var(--vi-font-size-lg, 18px)}.text-xl{font-size:var(--vi-font-size-xl, 20px)}.text-2xl{font-size:var(--vi-font-size-2xl, 24px)}.text-3xl{font-size:var(--vi-font-size-3xl, 30px)}.font-light{font-weight:var(--vi-font-weight-light, 300)}.font-normal{font-weight:var(--vi-font-weight-normal, 400)}.font-medium{font-weight:var(--vi-font-weight-medium, 500)}.font-semibold{font-weight:var(--vi-font-weight-semibold, 600)}.font-bold{font-weight:var(--vi-font-weight-bold, 700)}.leading-tight{line-height:var(--vi-line-height-tight, 1.2)}.leading-normal{line-height:var(--vi-line-height-normal, 1.5)}.leading-relaxed{line-height:var(--vi-line-height-relaxed, 1.75)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--vi-color-primary, #0066cc)}.bg-primary{background-color:var(--vi-color-primary, #0066cc)}.border-primary{border-color:var(--vi-color-primary, #0066cc)}.text-secondary{color:var(--vi-color-secondary, #f0f4f8)}.bg-secondary{background-color:var(--vi-color-secondary, #f0f4f8)}.border-secondary{border-color:var(--vi-color-secondary, #f0f4f8)}.text-success{color:var(--vi-color-success, #22c55e)}.bg-success{background-color:var(--vi-color-success, #22c55e)}.border-success{border-color:var(--vi-color-success, #22c55e)}.text-warning{color:var(--vi-color-warning, #eab308)}.bg-warning{background-color:var(--vi-color-warning, #eab308)}.border-warning{border-color:var(--vi-color-warning, #eab308)}.text-error{color:var(--vi-color-error, #ef4444)}.bg-error{background-color:var(--vi-color-error, #ef4444)}.border-error{border-color:var(--vi-color-error, #ef4444)}.text-info{color:var(--vi-color-info, #3b82f6)}.bg-info{background-color:var(--vi-color-info, #3b82f6)}.border-info{border-color:var(--vi-color-info, #3b82f6)}.text-grey-100{color:var(--vi-color-grey-100, #f3f4f6)}.bg-grey-100{background-color:var(--vi-color-grey-100, #f3f4f6)}.text-grey-200{color:var(--vi-color-grey-200, #e5e7eb)}.bg-grey-200{background-color:var(--vi-color-grey-200, #e5e7eb)}.text-grey-300{color:var(--vi-color-grey-300, #d1d5db)}.bg-grey-300{background-color:var(--vi-color-grey-300, #d1d5db)}.text-grey-400{color:var(--vi-color-grey-400, #9ca3af)}.bg-grey-400{background-color:var(--vi-color-grey-400, #9ca3af)}.text-grey-500{color:var(--vi-color-grey-500, #6b7280)}.bg-grey-500{background-color:var(--vi-color-grey-500, #6b7280)}.text-grey-600{color:var(--vi-color-grey-600, #4b5563)}.bg-grey-600{background-color:var(--vi-color-grey-600, #4b5563)}.text-grey-700{color:var(--vi-color-grey-700, #374151)}.bg-grey-700{background-color:var(--vi-color-grey-700, #374151)}.text-grey-800{color:var(--vi-color-grey-800, #1f2937)}.bg-grey-800{background-color:var(--vi-color-grey-800, #1f2937)}.text-grey-900{color:var(--vi-color-grey-900, #111827)}.bg-grey-900{background-color:var(--vi-color-grey-900, #111827)}.text-red-100{color:var(--vi-color-red-100, #fee2e2)}.bg-red-100{background-color:var(--vi-color-red-100, #fee2e2)}.text-red-200{color:var(--vi-color-red-200, #fecaca)}.bg-red-200{background-color:var(--vi-color-red-200, #fecaca)}.text-red-300{color:var(--vi-color-red-300, #fca5a5)}.bg-red-300{background-color:var(--vi-color-red-300, #fca5a5)}.text-red-400{color:var(--vi-color-red-400, #f87171)}.bg-red-400{background-color:var(--vi-color-red-400, #f87171)}.text-red-500{color:var(--vi-color-red-500, #ef4444)}.bg-red-500{background-color:var(--vi-color-red-500, #ef4444)}.text-red-600{color:var(--vi-color-red-600, #dc2626)}.bg-red-600{background-color:var(--vi-color-red-600, #dc2626)}.text-red-700{color:var(--vi-color-red-700, #b91c1c)}.bg-red-700{background-color:var(--vi-color-red-700, #b91c1c)}.text-red-800{color:var(--vi-color-red-800, #991b1b)}.bg-red-800{background-color:var(--vi-color-red-800, #991b1b)}.text-red-900{color:var(--vi-color-red-900, #7f1d1d)}.bg-red-900{background-color:var(--vi-color-red-900, #7f1d1d)}.text-yellow-100{color:var(--vi-color-yellow-100, #fef9c3)}.bg-yellow-100{background-color:var(--vi-color-yellow-100, #fef9c3)}.text-yellow-200{color:var(--vi-color-yellow-200, #fef08a)}.bg-yellow-200{background-color:var(--vi-color-yellow-200, #fef08a)}.text-yellow-300{color:var(--vi-color-yellow-300, #fde047)}.bg-yellow-300{background-color:var(--vi-color-yellow-300, #fde047)}.text-yellow-400{color:var(--vi-color-yellow-400, #facc15)}.bg-yellow-400{background-color:var(--vi-color-yellow-400, #facc15)}.text-yellow-500{color:var(--vi-color-yellow-500, #eab308)}.bg-yellow-500{background-color:var(--vi-color-yellow-500, #eab308)}.text-yellow-600{color:var(--vi-color-yellow-600, #ca8a04)}.bg-yellow-600{background-color:var(--vi-color-yellow-600, #ca8a04)}.text-yellow-700{color:var(--vi-color-yellow-700, #a16207)}.bg-yellow-700{background-color:var(--vi-color-yellow-700, #a16207)}.text-yellow-800{color:var(--vi-color-yellow-800, #854d0e)}.bg-yellow-800{background-color:var(--vi-color-yellow-800, #854d0e)}.text-yellow-900{color:var(--vi-color-yellow-900, #713f12)}.bg-yellow-900{background-color:var(--vi-color-yellow-900, #713f12)}.text-green-100{color:var(--vi-color-green-100, #dcfce7)}.bg-green-100{background-color:var(--vi-color-green-100, #dcfce7)}.text-green-200{color:var(--vi-color-green-200, #bbf7d0)}.bg-green-200{background-color:var(--vi-color-green-200, #bbf7d0)}.text-green-300{color:var(--vi-color-green-300, #86efac)}.bg-green-300{background-color:var(--vi-color-green-300, #86efac)}.text-green-400{color:var(--vi-color-green-400, #4ade80)}.bg-green-400{background-color:var(--vi-color-green-400, #4ade80)}.text-green-500{color:var(--vi-color-green-500, #22c55e)}.bg-green-500{background-color:var(--vi-color-green-500, #22c55e)}.text-green-600{color:var(--vi-color-green-600, #16a34a)}.bg-green-600{background-color:var(--vi-color-green-600, #16a34a)}.text-green-700{color:var(--vi-color-green-700, #15803d)}.bg-green-700{background-color:var(--vi-color-green-700, #15803d)}.text-green-800{color:var(--vi-color-green-800, #166534)}.bg-green-800{background-color:var(--vi-color-green-800, #166534)}.text-green-900{color:var(--vi-color-green-900, #14532d)}.bg-green-900{background-color:var(--vi-color-green-900, #14532d)}.text-blue-100{color:var(--vi-color-blue-100, #dbeafe)}.bg-blue-100{background-color:var(--vi-color-blue-100, #dbeafe)}.text-blue-200{color:var(--vi-color-blue-200, #bfdbfe)}.bg-blue-200{background-color:var(--vi-color-blue-200, #bfdbfe)}.text-blue-300{color:var(--vi-color-blue-300, #93c5fd)}.bg-blue-300{background-color:var(--vi-color-blue-300, #93c5fd)}.text-blue-400{color:var(--vi-color-blue-400, #60a5fa)}.bg-blue-400{background-color:var(--vi-color-blue-400, #60a5fa)}.text-blue-500{color:var(--vi-color-blue-500, #3b82f6)}.bg-blue-500{background-color:var(--vi-color-blue-500, #3b82f6)}.text-blue-600{color:var(--vi-color-blue-600, #2563eb)}.bg-blue-600{background-color:var(--vi-color-blue-600, #2563eb)}.text-blue-700{color:var(--vi-color-blue-700, #1d4ed8)}.bg-blue-700{background-color:var(--vi-color-blue-700, #1d4ed8)}.text-blue-800{color:var(--vi-color-blue-800, #1e40af)}.bg-blue-800{background-color:var(--vi-color-blue-800, #1e40af)}.text-blue-900{color:var(--vi-color-blue-900, #1e3a8a)}.bg-blue-900{background-color:var(--vi-color-blue-900, #1e3a8a)}.text-purple-100{color:var(--vi-color-purple-100, #f3e8ff)}.bg-purple-100{background-color:var(--vi-color-purple-100, #f3e8ff)}.text-purple-200{color:var(--vi-color-purple-200, #e9d5ff)}.bg-purple-200{background-color:var(--vi-color-purple-200, #e9d5ff)}.text-purple-300{color:var(--vi-color-purple-300, #d8b4fe)}.bg-purple-300{background-color:var(--vi-color-purple-300, #d8b4fe)}.text-purple-400{color:var(--vi-color-purple-400, #c084fc)}.bg-purple-400{background-color:var(--vi-color-purple-400, #c084fc)}.text-purple-500{color:var(--vi-color-purple-500, #a855f7)}.bg-purple-500{background-color:var(--vi-color-purple-500, #a855f7)}.text-purple-600{color:var(--vi-color-purple-600, #9333ea)}.bg-purple-600{background-color:var(--vi-color-purple-600, #9333ea)}.text-purple-700{color:var(--vi-color-purple-700, #7e22ce)}.bg-purple-700{background-color:var(--vi-color-purple-700, #7e22ce)}.text-purple-800{color:var(--vi-color-purple-800, #6b21a8)}.bg-purple-800{background-color:var(--vi-color-purple-800, #6b21a8)}.text-purple-900{color:var(--vi-color-purple-900, #581c87)}.bg-purple-900{background-color:var(--vi-color-purple-900, #581c87)}.text-neutral-100{color:var(--vi-color-grey-100, #f3f4f6)}.bg-neutral-100{background-color:var(--vi-color-grey-100, #f3f4f6)}.border-neutral-100{border-color:var(--vi-color-grey-100, #f3f4f6)}.text-neutral-200{color:var(--vi-color-grey-200, #e5e7eb)}.bg-neutral-200{background-color:var(--vi-color-grey-200, #e5e7eb)}.border-neutral-200{border-color:var(--vi-color-grey-200, #e5e7eb)}.text-neutral-300{color:var(--vi-color-grey-300, #d1d5db)}.bg-neutral-300{background-color:var(--vi-color-grey-300, #d1d5db)}.border-neutral-300{border-color:var(--vi-color-grey-300, #d1d5db)}.text-neutral-400{color:var(--vi-color-grey-400, #9ca3af)}.bg-neutral-400{background-color:var(--vi-color-grey-400, #9ca3af)}.border-neutral-400{border-color:var(--vi-color-grey-400, #9ca3af)}.text-neutral-500{color:var(--vi-color-grey-500, #6b7280)}.bg-neutral-500{background-color:var(--vi-color-grey-500, #6b7280)}.border-neutral-500{border-color:var(--vi-color-grey-500, #6b7280)}.text-neutral-600{color:var(--vi-color-grey-600, #4b5563)}.bg-neutral-600{background-color:var(--vi-color-grey-600, #4b5563)}.border-neutral-600{border-color:var(--vi-color-grey-600, #4b5563)}.text-neutral-700{color:var(--vi-color-grey-700, #374151)}.bg-neutral-700{background-color:var(--vi-color-grey-700, #374151)}.border-neutral-700{border-color:var(--vi-color-grey-700, #374151)}.text-neutral-800{color:var(--vi-color-grey-800, #1f2937)}.bg-neutral-800{background-color:var(--vi-color-grey-800, #1f2937)}.border-neutral-800{border-color:var(--vi-color-grey-800, #1f2937)}.text-neutral-900{color:var(--vi-color-grey-900, #111827)}.bg-neutral-900{background-color:var(--vi-color-grey-900, #111827)}.border-neutral-900{border-color:var(--vi-color-grey-900, #111827)}.shadow-sm{box-shadow:var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))}.shadow-md{box-shadow:var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}.shadow-lg{box-shadow:var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1))}.shadow-xl{box-shadow:var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1))}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--vi-border-radius-sm, 2px)}.rounded-md{border-radius:var(--vi-border-radius-md, 4px)}.rounded-lg{border-radius:var(--vi-border-radius-lg, 8px)}.rounded-xl{border-radius:var(--vi-border-radius-xl, 12px)}.rounded-full{border-radius:9999px}.border-thin{border-width:var(--vi-border-width-thin, 1px);border-style:solid}.border-base{border-width:var(--vi-border-width-base, 2px);border-style:solid}.border-thick{border-width:var(--vi-border-width-thick, 3px);border-style:solid}.z-hide{z-index:-1}.z-auto{z-index:auto}.z-base{z-index:0}.z-dropdown{z-index:1000}.z-sticky{z-index:1020}.z-fixed{z-index:1030}.z-backdrop{z-index:1040}.z-modal{z-index:1050}.z-popover{z-index:1060}.z-tooltip{z-index:1070}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-x-xs{column-gap:var(--vi-spacing-xs, 8px)}.gap-y-xs{row-gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-x-sm{column-gap:var(--vi-spacing-sm, 16px)}.gap-y-sm{row-gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-x-md{column-gap:var(--vi-spacing-md, 24px)}.gap-y-md{row-gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-x-lg{column-gap:var(--vi-spacing-lg, 32px)}.gap-y-lg{row-gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.gap-x-xl{column-gap:var(--vi-spacing-xl, 40px)}.gap-y-xl{row-gap:var(--vi-spacing-xl, 40px)}.gap-2xl{gap:var(--vi-spacing-2xl, 48px)}.gap-x-2xl{column-gap:var(--vi-spacing-2xl, 48px)}.gap-y-2xl{row-gap:var(--vi-spacing-2xl, 48px)}.gap-3xl{gap:var(--vi-spacing-3xl, 56px)}.gap-x-3xl{column-gap:var(--vi-spacing-3xl, 56px)}.gap-y-3xl{row-gap:var(--vi-spacing-3xl, 56px)}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}.transition-opacity{transition:opacity .2s ease-in-out}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}}/*# sourceMappingURL=flux-ui.css.map */
package/flux-ui.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECvFF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YFwFe,8FEvFf,UF4Fa,+BE3Fb,YFwGkB,kCEvGlB,MFqEe,oCEpEf,iBFmEe,oCElEf,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YFyCe,wEExCf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IH6CW,0BG1Cb,QACE,IH0CW,2BGvCb,QACE,IHuCW,2BGpCb,QACE,IHoCW,2BGjCb,QACE,IHiCW,2BG9Bb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBCnNJ,iBAMI,MACE,OJyPQ,0BItPV,OACE,YJqPQ,0BIpPR,aJoPQ,0BIjPV,OACE,WJgPQ,0BI/OR,cJ+OQ,0BI5OV,OACE,WJ2OQ,0BIxOV,OACE,aJuOQ,0BIpOV,OACE,cJmOQ,0BIhOV,OACE,YJ+NQ,0BI1PV,MACE,OJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,aJoPQ,2BIjPV,OACE,WJgPQ,2BI/OR,cJ+OQ,2BI5OV,OACE,WJ2OQ,2BIxOV,OACE,aJuOQ,2BIpOV,OACE,cJmOQ,2BIhOV,OACE,YJ+NQ,2BI1PV,MACE,OJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,aJoPQ,2BIjPV,OACE,WJgPQ,2BI/OR,cJ+OQ,2BI5OV,OACE,WJ2OQ,2BIxOV,OACE,aJuOQ,2BIpOV,OACE,cJmOQ,2BIhOV,OACE,YJ+NQ,2BI1PV,MACE,OJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,aJoPQ,2BIjPV,OACE,WJgPQ,2BI/OR,cJ+OQ,2BI5OV,OACE,WJ2OQ,2BIxOV,OACE,aJuOQ,2BIpOV,OACE,cJmOQ,2BIhOV,OACE,YJ+NQ,2BI1PV,MACE,OJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,aJoPQ,2BIjPV,OACE,WJgPQ,2BI/OR,cJ+OQ,2BI5OV,OACE,WJ2OQ,2BIxOV,OACE,aJuOQ,2BIpOV,OACE,cJmOQ,2BIhOV,OACE,YJ+NQ,2BI1PV,OACE,OJyPQ,4BItPV,QACE,YJqPQ,4BIpPR,aJoPQ,4BIjPV,QACE,WJgPQ,4BI/OR,cJ+OQ,4BI5OV,QACE,WJ2OQ,4BIxOV,QACE,aJuOQ,4BIpOV,QACE,cJmOQ,4BIhOV,QACE,YJ+NQ,4BI1PV,OACE,OJyPQ,4BItPV,QACE,YJqPQ,4BIpPR,aJoPQ,4BIjPV,QACE,WJgPQ,4BI/OR,cJ+OQ,4BI5OV,QACE,WJ2OQ,4BIxOV,QACE,aJuOQ,4BIpOV,QACE,cJmOQ,4BIhOV,QACE,YJ+NQ,4BItNV,MACE,QJqNQ,0BIlNV,OACE,aJiNQ,0BIhNR,cJgNQ,0BI7MV,OACE,YJ4MQ,0BI3MR,eJ2MQ,0BIxMV,OACE,YJuMQ,0BIpMV,OACE,cJmMQ,0BIhMV,OACE,eJ+LQ,0BI5LV,OACE,aJ2LQ,0BItNV,MACE,QJqNQ,2BIlNV,OACE,aJiNQ,2BIhNR,cJgNQ,2BI7MV,OACE,YJ4MQ,2BI3MR,eJ2MQ,2BIxMV,OACE,YJuMQ,2BIpMV,OACE,cJmMQ,2BIhMV,OACE,eJ+LQ,2BI5LV,OACE,aJ2LQ,2BItNV,MACE,QJqNQ,2BIlNV,OACE,aJiNQ,2BIhNR,cJgNQ,2BI7MV,OACE,YJ4MQ,2BI3MR,eJ2MQ,2BIxMV,OACE,YJuMQ,2BIpMV,OACE,cJmMQ,2BIhMV,OACE,eJ+LQ,2BI5LV,OACE,aJ2LQ,2BItNV,MACE,QJqNQ,2BIlNV,OACE,aJiNQ,2BIhNR,cJgNQ,2BI7MV,OACE,YJ4MQ,2BI3MR,eJ2MQ,2BIxMV,OACE,YJuMQ,2BIpMV,OACE,cJmMQ,2BIhMV,OACE,eJ+LQ,2BI5LV,OACE,aJ2LQ,2BItNV,MACE,QJqNQ,2BIlNV,OACE,aJiNQ,2BIhNR,cJgNQ,2BI7MV,OACE,YJ4MQ,2BI3MR,eJ2MQ,2BIxMV,OACE,YJuMQ,2BIpMV,OACE,cJmMQ,2BIhMV,OACE,eJ+LQ,2BI5LV,OACE,aJ2LQ,2BItNV,OACE,QJqNQ,4BIlNV,QACE,aJiNQ,4BIhNR,cJgNQ,4BI7MV,QACE,YJ4MQ,4BI3MR,eJ2MQ,4BIxMV,QACE,YJuMQ,4BIpMV,QACE,cJmMQ,4BIhMV,QACE,eJ+LQ,4BI5LV,QACE,aJ2LQ,4BItNV,OACE,QJqNQ,4BIlNV,QACE,aJiNQ,4BIhNR,cJgNQ,4BI7MV,QACE,YJ4MQ,4BI3MR,eJ2MQ,4BIxMV,QACE,YJuMQ,4BIpMV,QACE,cJmMQ,4BIhMV,QACE,eJ+LQ,4BI5LV,QACE,aJ2LQ,4BInLZ,SACE,UJyCa,6BItCf,SACE,UJsCa,6BInCf,WACE,UJmCa,+BIhCf,SACE,UJgCa,6BI7Bf,SACE,UJ6Ba,6BI1Bf,UACE,UJ0Ba,8BIvBf,UACE,UJuBa,8BIpBf,YACE,YJqBmB,iCIlBrB,aACE,YJkBmB,kCIfrB,aACE,YJemB,kCIZrB,eACE,YJYmB,oCITrB,WACE,YJSmB,gCINrB,eACE,YJOkB,iCIJpB,gBACE,YJIkB,kCIDpB,iBACE,YJCkB,oCIEpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,MJ4FM,iCIzFR,YACE,iBJwFM,iCIrFR,gBACE,aJoFM,iCI7FR,gBACE,MJ4FM,mCIzFR,cACE,iBJwFM,mCIrFR,kBACE,aJoFM,mCI7FR,cACE,MJ4FM,iCIzFR,YACE,iBJwFM,iCIrFR,gBACE,aJoFM,iCI7FR,cACE,MJ4FM,iCIzFR,YACE,iBJwFM,iCIrFR,gBACE,aJoFM,iCI7FR,YACE,MJ4FM,+BIzFR,UACE,iBJwFM,+BIrFR,cACE,aJoFM,+BI7FR,WACE,MJ4FM,8BIzFR,SACE,iBJwFM,8BIrFR,aACE,aJoFM,8BI5EN,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,cACE,MJiEO,iCI9DT,YACE,iBJ6DO,iCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,gBACE,MJiEO,mCI9DT,cACE,iBJ6DO,mCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,eACE,MJiEO,kCI9DT,aACE,iBJ6DO,kCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCIlET,iBACE,MJiEO,oCI9DT,eACE,iBJ6DO,oCItDX,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIoBb,kBACE,MJrBW,kCIwBb,gBACE,iBJzBW,kCI4Bb,oBACE,aJ7BW,kCIsCb,WACE,WJgEO,qDIjET,WACE,WJgEO,uDIjET,WACE,WJgEO,yDIjET,WACE,WJgEO,yDIxDX,cACE,gBAGF,YACE,cJrEe,gCIwEjB,YACE,cJxEe,gCI2EjB,YACE,cJ3Ee,gCI8EjB,YACE,cJ9Ee,iCIiFjB,cACE,qBAOF,aACE,aJtFiB,iCIuFjB,mBAGF,aACE,aJ1FiB,iCI2FjB,mBAGF,cACE,aJ9FiB,kCI+FjB,mBAQA,QACE,QJ2CQ,GI5CV,QACE,QJ2CQ,KI5CV,QACE,QJ2CQ,EI5CV,YACE,QJ2CQ,KI5CV,UACE,QJ2CQ,KI5CV,SACE,QJ2CQ,KI5CV,YACE,QJ2CQ,KI5CV,SACE,QJ2CQ,KI5CV,WACE,QJ2CQ,KI5CV,WACE,QJ2CQ,KInCZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,IJzIQ,0BI4IV,UACE,WJ7IQ,0BIgJV,UACE,QJjJQ,0BIwIV,QACE,IJzIQ,2BI4IV,UACE,WJ7IQ,2BIgJV,UACE,QJjJQ,2BIwIV,QACE,IJzIQ,2BI4IV,UACE,WJ7IQ,2BIgJV,UACE,QJjJQ,2BIwIV,QACE,IJzIQ,2BI4IV,UACE,WJ7IQ,2BIgJV,UACE,QJjJQ,2BIwIV,QACE,IJzIQ,2BI4IV,UACE,WJ7IQ,2BIgJV,UACE,QJjJQ,2BIwIV,SACE,IJzIQ,4BI4IV,WACE,WJ7IQ,4BIgJV,WACE,QJjJQ,4BIwIV,SACE,IJzIQ,4BI4IV,WACE,WJ7IQ,4BIgJV,WACE,QJjJQ,4BIyJZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}
package/flux-ui.scss ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Flux UI — Full CSS Bundle
3
+ * =========================
4
+ * Single-file CSS output for consumers that do not use a SCSS preprocessor
5
+ * (plain HTML projects, CDN distribution, Shadow DOM, Storybook, etc.).
6
+ *
7
+ * Import order matters: variables declares the @layer order, root emits
8
+ * :root custom properties, then reset → layout → utilities follow.
9
+ */
10
+
11
+ @use 'styles/variables';
12
+ @use 'styles/root';
13
+ @use 'styles/reset';
14
+ @use 'styles/layout';
15
+ @use 'styles/utilities';
package/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Flux UI — Main Package Export
3
+ * =============================
4
+ * Re-exports all design tokens and related types.
5
+ *
6
+ * Usage:
7
+ * import { tokens } from '@vi/flux-ui';
8
+ * const color = tokens.colors.primary; // "var(--vi-color-primary)"
9
+ */
10
+ export * from './tokens/index';
11
+ //# sourceMappingURL=index.d.ts.map