@warmio/ui 1.4.0 → 2.0.0

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 (51) hide show
  1. package/LICENSES/fluid-functionalism.txt +24 -0
  2. package/README.md +23 -14
  3. package/dist/badge.js +2 -2
  4. package/dist/button.js +4 -1
  5. package/dist/chunks/chunk-A2PN77YE.js +42 -0
  6. package/dist/chunks/chunk-DHV2A22F.js +240 -0
  7. package/dist/chunks/chunk-DOOSH3V6.js +72 -0
  8. package/dist/chunks/chunk-EIEA5RJJ.js +97 -0
  9. package/dist/chunks/chunk-FKGHMPVW.js +875 -0
  10. package/dist/chunks/chunk-K36HD5J5.js +133 -0
  11. package/dist/chunks/chunk-L6L3GVGM.js +130 -0
  12. package/dist/chunks/chunk-MGX6ZL6Q.js +224 -0
  13. package/dist/chunks/chunk-MVUHHKBL.js +492 -0
  14. package/dist/chunks/chunk-PJUNSOJK.js +116 -0
  15. package/dist/chunks/chunk-RVVHR7RY.js +0 -0
  16. package/dist/chunks/chunk-U7D32UN3.js +0 -0
  17. package/dist/chunks/chunk-W24JGQWM.js +65 -0
  18. package/dist/dropdown-menu.js +4 -3
  19. package/dist/entries/badge.css +178 -0
  20. package/dist/entries/button.css +422 -0
  21. package/dist/entries/dropdown-menu.css +167 -0
  22. package/dist/entries/index.css +2789 -0
  23. package/dist/entries/logo.css +147 -0
  24. package/dist/entries/product-header.css +88 -0
  25. package/dist/entries/sheet.css +666 -0
  26. package/dist/entries/sidebar.css +2108 -0
  27. package/dist/entries/text.css +97 -0
  28. package/dist/index.js +17 -13
  29. package/dist/logo.js +2 -2
  30. package/dist/product-header.js +2 -2
  31. package/dist/product-header.types.d.ts +3 -2
  32. package/dist/sheet.js +5 -3
  33. package/dist/sidebar.css +129 -0
  34. package/dist/sidebar.js +7 -3
  35. package/dist/text.css +121 -0
  36. package/dist/text.js +2 -2
  37. package/package.json +15 -5
  38. package/types/badge.d.ts +10 -2
  39. package/types/button.d.ts +65 -9
  40. package/types/sidebar.d.ts +10 -2
  41. package/types/text.d.ts +10 -2
  42. package/dist/chunks/chunk-4RQCHKAW.js +0 -105
  43. package/dist/chunks/chunk-FW2EHGRK.js +0 -748
  44. package/dist/chunks/chunk-GKEYV2XW.js +0 -10
  45. package/dist/chunks/chunk-HDCV4ACN.js +0 -469
  46. package/dist/chunks/chunk-ICC7GQXS.js +0 -74
  47. package/dist/chunks/chunk-KN6WVLCR.js +0 -261
  48. package/dist/chunks/chunk-MIMC4M6W.js +0 -86
  49. package/dist/chunks/chunk-PBWF6BDE.js +0 -88
  50. package/dist/chunks/chunk-VIB7OX7D.js +0 -10
  51. package/dist/chunks/chunk-YTDMREDR.js +0 -201
@@ -0,0 +1,2789 @@
1
+ /* ../ui/src/warmio/badge/badge.css */
2
+ [data-slot=badge] {
3
+ display: inline-flex;
4
+ width: fit-content;
5
+ max-width: 100%;
6
+ flex-shrink: 0;
7
+ align-items: center;
8
+ justify-content: center;
9
+ gap: calc(var(--spacing) * 2);
10
+ overflow: hidden;
11
+ border-radius: var(--radius-full);
12
+ border: 1px solid transparent;
13
+ padding-inline: calc(var(--spacing) * 2);
14
+ font-size: var(--type-size-caption);
15
+ font-weight: 400;
16
+ line-height: 1.25;
17
+ white-space: nowrap;
18
+ transition-property:
19
+ color,
20
+ background-color,
21
+ box-shadow,
22
+ border-color;
23
+ transition-duration: var(--motion-duration-normal);
24
+ transition-timing-function: var(--motion-easing);
25
+ }
26
+ [data-slot=badge][data-size=sm] {
27
+ height: 1.25rem;
28
+ padding-block: 0;
29
+ }
30
+ [data-slot=badge][data-size=default] {
31
+ height: 1.5rem;
32
+ padding-block: 0;
33
+ }
34
+ [data-slot=badge]:not([data-size]) {
35
+ height: 1.25rem;
36
+ padding-block: calc(var(--spacing) * 2);
37
+ }
38
+ [data-slot=badge][data-shape=circle][data-size=sm] {
39
+ width: 1.25rem;
40
+ padding: 0;
41
+ }
42
+ [data-slot=badge][data-shape=circle][data-size=default] {
43
+ width: 1.5rem;
44
+ padding: 0;
45
+ }
46
+ [data-slot=badge][data-tone=default] {
47
+ border-color: var(--border);
48
+ background-color: var(--muted);
49
+ color: var(--foreground);
50
+ }
51
+ [data-slot=badge][data-tone=info] {
52
+ border-color: var(--info-border);
53
+ background-color: var(--info-bg-subtle);
54
+ color: var(--info-text);
55
+ }
56
+ [data-slot=badge][data-tone=success] {
57
+ border-color: var(--success-border);
58
+ background-color: var(--success-bg-subtle);
59
+ color: var(--success-text);
60
+ }
61
+ [data-slot=badge][data-tone=warning] {
62
+ border-color: var(--warning-border);
63
+ background-color: var(--warning-bg-subtle);
64
+ color: var(--warning-text);
65
+ }
66
+ [data-slot=badge][data-tone=destructive] {
67
+ border-color: var(--error-border);
68
+ background-color: var(--error-bg-subtle);
69
+ color: var(--error-text);
70
+ }
71
+ [data-slot=badge][data-emphasis=solid][data-tone=default] {
72
+ border-color: var(--foreground);
73
+ background-color: var(--foreground);
74
+ color: var(--background);
75
+ }
76
+ [data-slot=badge][data-emphasis=solid][data-tone=info] {
77
+ border-color: var(--info-text);
78
+ background-color: var(--info-text);
79
+ color: var(--background);
80
+ }
81
+ [data-slot=badge][data-emphasis=solid][data-tone=success] {
82
+ border-color: var(--success);
83
+ background-color: var(--success);
84
+ color: var(--background);
85
+ }
86
+ [data-slot=badge][data-emphasis=solid][data-tone=warning] {
87
+ border-color: var(--warning);
88
+ background-color: var(--warning);
89
+ color: var(--background);
90
+ }
91
+ [data-slot=badge][data-emphasis=solid][data-tone=destructive] {
92
+ border-color: var(--destructive);
93
+ background-color: var(--destructive);
94
+ color: var(--destructive-foreground);
95
+ }
96
+ [data-slot=badge][data-variant=default] {
97
+ background-color: var(--primary);
98
+ color: var(--primary-foreground);
99
+ }
100
+ [data-slot=badge][data-variant=secondary] {
101
+ background-color: var(--accent);
102
+ color: var(--foreground);
103
+ }
104
+ [data-slot=badge][data-variant=destructive] {
105
+ background-color: var(--error-bg-subtle);
106
+ color: var(--error-text);
107
+ }
108
+ [data-slot=badge][data-variant=outline] {
109
+ border-color: var(--border);
110
+ color: var(--foreground);
111
+ }
112
+ [data-slot=badge][data-variant=ghost] {
113
+ background-color: transparent;
114
+ }
115
+ [data-slot=badge][data-variant=link] {
116
+ background-color: transparent;
117
+ text-decoration-color: currentcolor;
118
+ }
119
+ [data-slot=badge][data-surface=floating] {
120
+ border-color: var(--background);
121
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--background);
122
+ }
123
+ [data-slot=badge][data-placement=inline] {
124
+ vertical-align: middle;
125
+ }
126
+ [data-slot=badge][data-text-size=inherit] {
127
+ font-size: inherit;
128
+ vertical-align: baseline;
129
+ }
130
+ [data-slot=badge][data-text-size=inherit][data-shape=pill] {
131
+ height: auto;
132
+ }
133
+ [data-slot=badge][data-placement=top-end] {
134
+ position: absolute;
135
+ top: calc(var(--spacing) * -2);
136
+ right: calc(var(--spacing) * -2);
137
+ z-index: 10;
138
+ pointer-events: none;
139
+ }
140
+ [data-slot=badge][data-width=metric] {
141
+ width: 3rem;
142
+ }
143
+ [data-slot=badge][data-width=compact] {
144
+ min-width: 1.5rem;
145
+ }
146
+ [data-slot=badge][data-truncate=true] {
147
+ min-width: 0;
148
+ flex-shrink: 1;
149
+ }
150
+ [data-slot=badge][data-numeric=true] {
151
+ font-family: var(--font-mono);
152
+ font-variant-numeric: tabular-nums;
153
+ letter-spacing: normal;
154
+ }
155
+ [data-slot=badge-label] {
156
+ min-width: 0;
157
+ overflow: hidden;
158
+ text-overflow: ellipsis;
159
+ white-space: nowrap;
160
+ }
161
+ [data-slot=badge] svg {
162
+ flex-shrink: 0;
163
+ pointer-events: none;
164
+ width: var(--icon-size-sm);
165
+ height: var(--icon-size-sm);
166
+ }
167
+ [data-slot=badge]:focus-visible {
168
+ border-color: var(--ring);
169
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus);
170
+ }
171
+ [data-slot=badge][aria-invalid=true] {
172
+ border-color: var(--destructive);
173
+ box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
174
+ }
175
+ a:hover > [data-slot=badge][data-variant=default],
176
+ [data-slot=badge][data-variant=default]:is(a:hover) {
177
+ background-color: color-mix(in oklab, var(--primary) 80%, transparent);
178
+ }
179
+
180
+ /* ../ui/src/warmio/button/button.css */
181
+ [data-warm-button] {
182
+ position: relative;
183
+ isolation: isolate;
184
+ border: 0 solid;
185
+ background: transparent;
186
+ background-clip: padding-box;
187
+ padding: 0;
188
+ margin: 0;
189
+ font: inherit;
190
+ color: inherit;
191
+ display: inline-flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ border-radius: var(--radius-full);
195
+ font-size: var(--type-size-body);
196
+ font-weight: 400;
197
+ line-height: 1.25;
198
+ white-space: nowrap;
199
+ transition-property: var(--button-transition-property);
200
+ transition-duration: var(--motion-duration-normal);
201
+ transition-timing-function: ease-out;
202
+ outline: none;
203
+ user-select: none;
204
+ box-sizing: border-box;
205
+ flex-shrink: 0;
206
+ }
207
+ [data-warm-button]::before {
208
+ content: "";
209
+ position: absolute;
210
+ z-index: -1;
211
+ inset: 0;
212
+ border-radius: inherit;
213
+ background-color: transparent;
214
+ background-image: none;
215
+ background-clip: inherit;
216
+ box-shadow: none;
217
+ pointer-events: none;
218
+ transition-property: var(--button-surface-transition-property);
219
+ transition-duration:
220
+ var(--motion-duration-normal),
221
+ var(--motion-duration-fast),
222
+ var(--motion-duration-normal);
223
+ transition-timing-function: var(--motion-easing);
224
+ }
225
+ [data-warm-button]:focus-visible {
226
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--focus);
227
+ }
228
+ [data-warm-button][data-width=full] {
229
+ width: 100%;
230
+ }
231
+ [data-warm-button]:not(:disabled):not([aria-disabled=true]):hover {
232
+ filter: brightness(var(--button-hover-brightness));
233
+ }
234
+ [data-slot=toggle-group][data-appearance=segmented]:has([data-slot=toggle-group-item][data-pressed]:hover:not(:disabled):not([aria-disabled=true])) [data-slot=toggle-group-indicator] {
235
+ filter: brightness(var(--button-hover-brightness));
236
+ }
237
+ [data-warm-button]:not(:disabled):not([aria-disabled=true]):not([data-variant=arrow]):active::before {
238
+ inset: var(--button-press-inset);
239
+ transition-duration: var(--motion-duration-fast);
240
+ }
241
+ @media (prefers-reduced-motion: reduce) {
242
+ [data-warm-button],
243
+ [data-warm-button]::before {
244
+ transition: none;
245
+ }
246
+ [data-warm-button]:not(:disabled):not([aria-disabled=true]):not([data-variant=arrow]):active::before {
247
+ inset: 0;
248
+ }
249
+ }
250
+ [data-warm-button][data-variant=default] {
251
+ color: var(--button-primary-foreground);
252
+ }
253
+ [data-warm-button][data-variant=default]::before {
254
+ background-color: var(--button-primary-bg);
255
+ background-image: var(--button-primary-gradient);
256
+ box-shadow: var(--button-primary-shadow);
257
+ }
258
+ [data-warm-button][data-variant=default]:hover::before {
259
+ background-color: var(--button-primary-hover);
260
+ background-image: var(--button-primary-gradient-hover);
261
+ }
262
+ [data-warm-button][data-variant=default]:active::before {
263
+ background-color: var(--button-primary-active);
264
+ }
265
+ [data-warm-button][data-variant=outline] {
266
+ border-style: none;
267
+ color: var(--background);
268
+ }
269
+ [data-warm-button][data-variant=outline]::before {
270
+ background-color: var(--background);
271
+ background-image: var(--button-outline-fill-image);
272
+ box-shadow: var(--button-outline-shadow);
273
+ }
274
+ [data-warm-button][data-variant=outline]:hover {
275
+ color: var(--background);
276
+ }
277
+ [data-warm-button][data-variant=outline]:hover::before {
278
+ background-color: var(--muted);
279
+ background-image: var(--button-outline-fill-image-hover);
280
+ }
281
+ [data-warm-button][data-variant=outline]:active::before {
282
+ background-color: var(--muted);
283
+ }
284
+ [data-warm-button][data-variant=ghost]::before {
285
+ background-color: transparent;
286
+ box-shadow: var(--button-ghost-shadow);
287
+ }
288
+ [data-warm-button][data-variant=ghost]:hover {
289
+ color: var(--foreground);
290
+ }
291
+ [data-warm-button][data-variant=ghost]:hover::before {
292
+ background-color: var(--muted);
293
+ }
294
+ .dark [data-warm-button][data-variant=ghost]:hover::before {
295
+ background-color: color-mix(in oklab, var(--muted) 50%, transparent);
296
+ }
297
+ [data-warm-button][data-variant=destructive] {
298
+ color: var(--destructive);
299
+ }
300
+ [data-warm-button] [data-slot=loader-spinner] {
301
+ color: inherit;
302
+ }
303
+ [data-warm-button][data-variant=destructive]::before {
304
+ background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
305
+ }
306
+ [data-warm-button][data-variant=destructive]:hover::before {
307
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
308
+ }
309
+ .dark [data-warm-button][data-variant=destructive]::before {
310
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
311
+ }
312
+ [data-warm-button][data-variant=apple] {
313
+ color: var(--apple-button-foreground) !important;
314
+ }
315
+ [data-warm-button][data-variant=apple]::before {
316
+ background-color: var(--apple-button-background) !important;
317
+ box-shadow: none;
318
+ }
319
+ button[data-warm-button][data-variant=apple] {
320
+ appearance: button;
321
+ background-clip: padding-box;
322
+ }
323
+ [data-warm-button][data-variant=apple]:hover {
324
+ color: var(--apple-button-foreground);
325
+ }
326
+ [data-warm-button][data-variant=apple]:hover::before {
327
+ background-color: var(--apple-button-background) !important;
328
+ }
329
+ [data-warm-button][data-variant=arrow] {
330
+ border-width: 0;
331
+ text-decoration: underline;
332
+ }
333
+ [data-warm-button][data-variant=arrow] svg {
334
+ width: var(--icon-size);
335
+ height: var(--icon-size);
336
+ transition: transform var(--motion-duration-normal);
337
+ }
338
+ [data-warm-button][data-variant=arrow]:hover svg {
339
+ transform: translate(calc(var(--motion-distance) / 2), calc(-1 * var(--motion-distance) / 2));
340
+ }
341
+ @media (prefers-reduced-motion: reduce) {
342
+ [data-warm-button][data-variant=arrow]:hover svg {
343
+ transform: none;
344
+ transition: none;
345
+ }
346
+ }
347
+ [data-warm-button][data-size=compact] {
348
+ height: var(--control-height-sm);
349
+ padding-left: var(--spacing-lg);
350
+ padding-right: var(--spacing-lg);
351
+ gap: var(--spacing-sm);
352
+ }
353
+ [data-warm-button][data-size=default] {
354
+ height: var(--control-height);
355
+ padding-left: var(--spacing-lg);
356
+ padding-right: var(--spacing-lg);
357
+ gap: var(--spacing-sm);
358
+ }
359
+ [data-warm-button][data-size=jumbo] {
360
+ height: var(--control-height-lg);
361
+ padding-left: var(--spacing-lg);
362
+ padding-right: var(--spacing-lg);
363
+ font-size: var(--type-size-body);
364
+ font-weight: 500;
365
+ line-height: 1.25;
366
+ gap: var(--spacing-sm);
367
+ }
368
+ [data-warm-button][data-size=icon] {
369
+ width: var(--control-height);
370
+ height: var(--control-height);
371
+ }
372
+ [data-warm-button][data-size=default][data-explicit-size] {
373
+ padding-top: var(--spacing-sm);
374
+ padding-bottom: var(--spacing-sm);
375
+ background-clip: border-box;
376
+ }
377
+ [data-warm-button][data-presentation=assistantIcon]:not([data-explicit-size]) {
378
+ width: var(--control-height-sm);
379
+ height: var(--control-height-sm);
380
+ padding: var(--spacing-sm);
381
+ }
382
+ [data-warm-button][data-presentation=assistantRoundIcon]:not([data-explicit-size]) {
383
+ width: var(--control-height);
384
+ height: var(--control-height);
385
+ }
386
+ [data-warm-button][data-presentation=composerIcon]:not([data-explicit-size]) {
387
+ width: var(--control-height-sm);
388
+ height: var(--control-height-sm);
389
+ padding: var(--spacing-sm);
390
+ }
391
+ [data-warm-button][data-presentation=editPill]:not([data-explicit-size]) {
392
+ height: var(--control-height-sm);
393
+ padding-left: var(--spacing-lg);
394
+ padding-right: var(--spacing-lg);
395
+ }
396
+ [data-warm-button][data-presentation=hero]:not([data-explicit-size]) {
397
+ height: var(--control-height-lg);
398
+ padding-left: var(--spacing-lg);
399
+ padding-right: var(--spacing-lg);
400
+ padding-top: var(--spacing-sm);
401
+ padding-bottom: var(--spacing-sm);
402
+ font-size: var(--type-size-body);
403
+ font-weight: 500;
404
+ line-height: 1.25;
405
+ background-clip: border-box;
406
+ }
407
+ [data-warm-button][data-presentation=promptCategory]:not([data-explicit-size]) {
408
+ height: var(--control-height);
409
+ gap: var(--spacing-sm);
410
+ padding-left: var(--spacing-lg);
411
+ padding-right: var(--spacing-lg);
412
+ font-size: var(--type-size-body);
413
+ font-weight: 400;
414
+ color: var(--foreground);
415
+ transition-property: var(--button-transition-property-colors);
416
+ }
417
+ [data-warm-button][data-presentation=promptCategory]:not([data-explicit-size])::before {
418
+ background-color: var(--background);
419
+ }
420
+ [data-warm-button][data-presentation=promptCategory][data-variant=default]::before {
421
+ box-shadow: var(--shadow-sm) !important;
422
+ }
423
+ [data-warm-button][data-presentation=promptCategory]:not([data-explicit-size]):not([data-variant=arrow])::before {
424
+ box-shadow: var(--shadow-sm) !important;
425
+ }
426
+ [data-warm-button][data-presentation=promptCategory]:hover::before {
427
+ background-color: var(--muted);
428
+ }
429
+ [data-warm-button][data-presentation=promptOption]:not([data-explicit-size]) {
430
+ height: auto;
431
+ min-height: calc(var(--spacing) * 16);
432
+ align-items: flex-start;
433
+ justify-content: flex-start;
434
+ gap: var(--spacing-sm);
435
+ padding: var(--spacing-lg);
436
+ font-size: var(--type-size-body);
437
+ }
438
+ [data-warm-button][data-presentation=sidebarIcon]:not([data-explicit-size]) {
439
+ color: var(--foreground);
440
+ background-clip: border-box;
441
+ }
442
+ [data-warm-button][data-presentation=sidebarIcon]:hover {
443
+ color: var(--foreground);
444
+ }
445
+ [data-warm-button][data-presentation=sidebarIcon]:hover::before {
446
+ background-color: var(--sidebar-accent);
447
+ }
448
+ [data-warm-button][data-presentation=tableHeader]:not([data-explicit-size]) {
449
+ height: auto;
450
+ min-height: 0;
451
+ width: 100%;
452
+ justify-content: flex-start;
453
+ gap: var(--spacing-sm);
454
+ padding: 0;
455
+ font-weight: 400;
456
+ line-height: 1.25;
457
+ color: var(--muted-foreground);
458
+ }
459
+ [data-warm-button][data-presentation=tableHeader]:hover {
460
+ color: var(--foreground);
461
+ }
462
+ [data-warm-button][data-presentation=tableHeader]:hover::before {
463
+ background-color: transparent;
464
+ }
465
+ [data-warm-button][data-presentation=tableHeaderLink]:not([data-explicit-size]) {
466
+ height: auto;
467
+ min-height: 0;
468
+ width: 100%;
469
+ justify-content: flex-start;
470
+ gap: var(--spacing-sm);
471
+ padding: 0;
472
+ border-radius: 0;
473
+ font-weight: 400;
474
+ line-height: 1.25;
475
+ color: var(--muted-foreground);
476
+ text-decoration: underline;
477
+ text-decoration-thickness: var(--button-underline-thickness);
478
+ text-underline-offset: var(--button-underline-offset);
479
+ }
480
+ [data-warm-button][data-presentation=tableHeaderLink]::before {
481
+ background-image: none;
482
+ background-color: transparent;
483
+ box-shadow: none;
484
+ }
485
+ [data-warm-button][data-presentation=tableHeaderLink]:focus-visible {
486
+ box-shadow: none;
487
+ }
488
+ [data-warm-button][data-presentation=tableHeaderLink]:hover {
489
+ color: var(--foreground);
490
+ }
491
+ [data-warm-button][data-presentation=tableHeaderLink]:hover::before {
492
+ background-image: none;
493
+ background-color: transparent;
494
+ box-shadow: none;
495
+ }
496
+ [data-warm-button][data-presentation=touch]:not([data-explicit-size]) {
497
+ min-height: var(--control-height-lg);
498
+ }
499
+ [data-warm-button][data-presentation=headerAction]:not([data-explicit-size]) {
500
+ width: auto;
501
+ height: var(--control-height-sm);
502
+ padding-left: var(--spacing-lg);
503
+ padding-right: var(--spacing-lg);
504
+ }
505
+ [data-warm-button][data-presentation=threadMore]:not([data-explicit-size]) {
506
+ width: var(--control-height-sm);
507
+ height: var(--control-height-sm);
508
+ padding: 0;
509
+ }
510
+ [data-warm-button][data-presentation=threadNew]:not([data-explicit-size]) {
511
+ height: var(--control-height-sm);
512
+ justify-content: flex-start;
513
+ gap: var(--spacing-sm);
514
+ padding-left: var(--spacing-sm);
515
+ padding-right: var(--spacing-sm);
516
+ font-size: var(--type-size-body);
517
+ font-weight: 400;
518
+ }
519
+ [data-warm-button][data-presentation=threadNew]:hover::before {
520
+ background-color: var(--muted);
521
+ }
522
+ [data-warm-button][data-presentation=compact]:not([data-explicit-size]) {
523
+ height: var(--control-height-sm);
524
+ padding-left: var(--spacing-lg);
525
+ padding-right: var(--spacing-lg);
526
+ }
527
+ [data-warm-button][data-presentation=default]:not([data-explicit-size]),
528
+ [data-warm-button][data-presentation=controlPeer]:not([data-explicit-size]) {
529
+ padding-top: var(--spacing-sm);
530
+ padding-bottom: var(--spacing-sm);
531
+ background-clip: border-box;
532
+ }
533
+ [data-warm-button][data-presentation=menuOption]:not([data-explicit-size]) {
534
+ height: auto;
535
+ min-height: calc(var(--spacing) * 16);
536
+ align-items: flex-start;
537
+ justify-content: flex-start;
538
+ gap: var(--spacing-sm);
539
+ padding: var(--spacing-lg);
540
+ }
541
+ [data-warm-button][data-variant=arrow][data-variant=arrow] {
542
+ height: auto;
543
+ padding: 0;
544
+ gap: var(--spacing-sm);
545
+ border-radius: 0;
546
+ color: var(--foreground);
547
+ font-size: var(--type-size-body);
548
+ line-height: 1.25;
549
+ font-weight: 500;
550
+ }
551
+ [data-warm-button][data-variant=arrow][data-variant=arrow]::before {
552
+ background-color: transparent;
553
+ background-image: none;
554
+ box-shadow: none;
555
+ }
556
+ [data-warm-button] svg {
557
+ pointer-events: none;
558
+ flex-shrink: 0;
559
+ }
560
+ [data-warm-button] svg:not([class*=size-]) {
561
+ width: var(--icon-size);
562
+ height: var(--icon-size);
563
+ }
564
+ [data-warm-button][data-presentation=assistantIcon]:not([data-explicit-size]) svg:not([class*=size-]),
565
+ [data-warm-button][data-presentation=threadMore]:not([data-explicit-size]) svg:not([class*=size-]) {
566
+ width: var(--icon-size-sm);
567
+ height: var(--icon-size-sm);
568
+ }
569
+ [data-warm-button][aria-invalid] {
570
+ box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
571
+ }
572
+ .dark [data-warm-button][aria-invalid] {
573
+ box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 50%, transparent);
574
+ }
575
+ [data-warm-button][data-variant=ghost][aria-expanded=true] {
576
+ color: var(--foreground);
577
+ }
578
+ [data-warm-button][data-variant=ghost][aria-expanded=true]::before {
579
+ background-color: var(--muted);
580
+ }
581
+ [data-warm-button]:disabled {
582
+ pointer-events: none;
583
+ opacity: 0.5;
584
+ }
585
+ [data-warm-button][data-variant=apple]:disabled {
586
+ opacity: 1;
587
+ }
588
+ [data-warm-button][data-presentation=cardTitle]:not([data-explicit-size]) {
589
+ height: auto;
590
+ min-height: 0;
591
+ min-width: 0;
592
+ justify-content: flex-start;
593
+ padding: 0;
594
+ border-radius: var(--radius-sm);
595
+ color: inherit;
596
+ font: inherit;
597
+ text-align: left;
598
+ }
599
+ [data-warm-button][data-presentation=cardTitle]::before {
600
+ display: none;
601
+ }
602
+
603
+ /* ../ui/src/warmio/fluid-menu-highlight/fluid-menu-highlight.css */
604
+ [data-slot=fluid-menu-highlight] {
605
+ position: absolute;
606
+ top: 0;
607
+ left: 0;
608
+ z-index: -1;
609
+ list-style: none;
610
+ pointer-events: none;
611
+ border-radius: var(--radius-lg);
612
+ background-color: var(--sidebar-accent);
613
+ }
614
+ [data-slot=fluid-menu-highlight][data-kind=sidebar][data-selected=true] {
615
+ border-radius: var(--radius-full);
616
+ }
617
+ [data-slot=fluid-menu-highlight][data-kind=select]:not([data-destructive=true]) {
618
+ background-color: var(--accent);
619
+ }
620
+ [data-slot=fluid-menu-highlight][data-destructive=true] {
621
+ background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
622
+ }
623
+ .dark [data-slot=fluid-menu-highlight][data-destructive=true] {
624
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
625
+ }
626
+
627
+ /* ../ui/src/warmio/dropdown-menu/dropdown-menu.css */
628
+ [data-slot=dropdown-menu-positioner] {
629
+ isolation: isolate;
630
+ z-index: var(--z-popover);
631
+ outline-style: none;
632
+ }
633
+ [data-slot=dropdown-menu-content] {
634
+ position: relative;
635
+ isolation: isolate;
636
+ z-index: var(--z-popover);
637
+ max-height: var(--available-height);
638
+ transform-origin: var(--transform-origin);
639
+ overflow-x: hidden;
640
+ overflow-y: auto;
641
+ border-radius: var(--radius-lg);
642
+ background-color: var(--popover);
643
+ padding: calc(var(--spacing) * 2);
644
+ color: var(--foreground);
645
+ outline-style: none;
646
+ box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
647
+ }
648
+ [data-slot=dropdown-menu-content][data-closed] {
649
+ overflow: hidden;
650
+ }
651
+ [data-slot=dropdown-menu-content][data-size=default] {
652
+ width: var(--anchor-width);
653
+ min-width: calc(var(--spacing) * 32);
654
+ }
655
+ [data-slot=dropdown-menu-content][data-size=auto] {
656
+ width: auto;
657
+ min-width: calc(var(--spacing) * 56);
658
+ }
659
+ [data-slot=dropdown-menu-content][data-size=sidebar] {
660
+ width: var(--sidebar-width);
661
+ }
662
+ [data-slot=dropdown-menu-content][data-spacing=roomy] {
663
+ display: flex;
664
+ flex-direction: column;
665
+ gap: calc(var(--spacing) * 2);
666
+ }
667
+ [data-slot=dropdown-menu-content] [data-fluid-menu-item]:is(:focus, [data-highlighted], [data-popup-open], [data-open], [aria-checked=true]) {
668
+ background-color: transparent !important;
669
+ }
670
+ [data-slot=dropdown-menu-item],
671
+ [data-slot=dropdown-menu-checkbox-item],
672
+ [data-slot=dropdown-menu-radio-item] {
673
+ position: relative;
674
+ display: flex;
675
+ align-items: center;
676
+ gap: calc(var(--spacing) * 2);
677
+ border-radius: var(--radius-lg);
678
+ cursor: default;
679
+ outline-style: none;
680
+ -webkit-user-select: none;
681
+ user-select: none;
682
+ }
683
+ [data-slot=dropdown-menu-item] {
684
+ width: 100%;
685
+ padding: calc(var(--spacing) * 2);
686
+ }
687
+ [data-slot=dropdown-menu-checkbox-item],
688
+ [data-slot=dropdown-menu-radio-item] {
689
+ padding-block: calc(var(--spacing) * 2);
690
+ padding-right: calc(var(--spacing) * 4);
691
+ padding-left: calc(var(--spacing) * 2);
692
+ }
693
+ [data-slot=dropdown-menu-item][data-inset],
694
+ [data-slot=dropdown-menu-checkbox-item][data-inset],
695
+ [data-slot=dropdown-menu-radio-item][data-inset],
696
+ [data-slot=dropdown-menu-label][data-inset] {
697
+ padding-left: calc(var(--spacing) * 4);
698
+ }
699
+ @media (forced-colors: active) {
700
+ [data-slot=dropdown-menu-item],
701
+ [data-slot=dropdown-menu-checkbox-item],
702
+ [data-slot=dropdown-menu-radio-item] {
703
+ outline: 2px solid transparent;
704
+ outline-offset: 2px;
705
+ }
706
+ }
707
+ [data-slot=dropdown-menu-item]:not([data-variant=destructive]):focus,
708
+ [data-slot=dropdown-menu-checkbox-item]:focus,
709
+ [data-slot=dropdown-menu-radio-item]:focus {
710
+ background-color: var(--sidebar-accent);
711
+ color: var(--foreground);
712
+ }
713
+ [data-slot=dropdown-menu-item]:not([data-variant=destructive]):focus *,
714
+ [data-slot=dropdown-menu-checkbox-item]:focus *,
715
+ [data-slot=dropdown-menu-radio-item]:focus * {
716
+ color: var(--foreground);
717
+ }
718
+ [data-slot=dropdown-menu-item][data-variant=destructive] {
719
+ color: var(--destructive);
720
+ }
721
+ [data-slot=dropdown-menu-item][data-variant=destructive] > svg {
722
+ color: var(--destructive);
723
+ }
724
+ [data-slot=dropdown-menu-item][data-variant=destructive]:focus {
725
+ background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
726
+ color: var(--destructive);
727
+ }
728
+ [data-slot=dropdown-menu-item][data-variant=destructive]:is(.dark *):focus {
729
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
730
+ }
731
+ [data-slot=dropdown-menu-item]:where([data-disabled=true]),
732
+ [data-slot=dropdown-menu-item]:where([data-disabled]:not([data-disabled=false])),
733
+ [data-slot=dropdown-menu-checkbox-item]:where([data-disabled=true]),
734
+ [data-slot=dropdown-menu-checkbox-item]:where([data-disabled]:not([data-disabled=false])),
735
+ [data-slot=dropdown-menu-radio-item]:where([data-disabled=true]),
736
+ [data-slot=dropdown-menu-radio-item]:where([data-disabled]:not([data-disabled=false])) {
737
+ pointer-events: none;
738
+ opacity: 50%;
739
+ }
740
+ [data-slot=dropdown-menu-item] svg,
741
+ [data-slot=dropdown-menu-checkbox-item] svg,
742
+ [data-slot=dropdown-menu-radio-item] svg {
743
+ pointer-events: none;
744
+ flex-shrink: 0;
745
+ }
746
+ [data-slot=dropdown-menu-item] svg:not([class*=size-]),
747
+ [data-slot=dropdown-menu-checkbox-item] svg:not([class*=size-]),
748
+ [data-slot=dropdown-menu-radio-item] svg:not([class*=size-]) {
749
+ width: calc(var(--spacing) * 4);
750
+ height: calc(var(--spacing) * 4);
751
+ }
752
+ [data-slot=dropdown-menu-checkbox-item-indicator],
753
+ [data-slot=dropdown-menu-radio-item-indicator] {
754
+ position: absolute;
755
+ right: calc(var(--spacing) * 2);
756
+ display: flex;
757
+ align-items: center;
758
+ justify-content: center;
759
+ pointer-events: none;
760
+ }
761
+ [data-slot=dropdown-menu-label] {
762
+ padding: calc(var(--spacing) * 2);
763
+ }
764
+ [data-slot=dropdown-menu-separator] {
765
+ margin-block: 0;
766
+ margin-inline: 0;
767
+ height: 1px;
768
+ background-color: var(--border);
769
+ }
770
+
771
+ /* ../ui/src/warmio/mascot/mascot.css */
772
+ [data-slot=warm-mascot] {
773
+ --warm-mascot-size: 4.5rem;
774
+ display: block;
775
+ width: var(--warm-mascot-size);
776
+ aspect-ratio: 1;
777
+ position: relative;
778
+ flex-shrink: 0;
779
+ overflow: visible;
780
+ pointer-events: none;
781
+ user-select: none;
782
+ -webkit-user-select: none;
783
+ }
784
+ [data-slot=warm-mascot][data-size=hero] {
785
+ --warm-mascot-size: 5.5rem;
786
+ }
787
+ [data-slot=warm-mascot][data-size=page] {
788
+ --warm-mascot-size: 8rem;
789
+ }
790
+ [data-slot=warm-mascot][data-size=stage] {
791
+ --warm-mascot-size: 14.4rem;
792
+ }
793
+ [data-slot=warm-mascot][data-click-hype] {
794
+ pointer-events: auto;
795
+ cursor: pointer;
796
+ }
797
+ [data-slot=warm-mascot] picture {
798
+ display: block;
799
+ width: 100%;
800
+ height: 100%;
801
+ }
802
+ [data-slot=warm-mascot] svg {
803
+ display: block;
804
+ width: 100%;
805
+ height: 100%;
806
+ pointer-events: visiblePainted;
807
+ }
808
+ [data-slot=warm-mascot] img {
809
+ outline: 0;
810
+ }
811
+ [data-slot=warm-mascot] [data-slot=warm-mascot-frame] {
812
+ display: block;
813
+ width: 100%;
814
+ height: 100%;
815
+ object-fit: contain;
816
+ pointer-events: none;
817
+ }
818
+ a [data-slot=warm-mascot] svg {
819
+ cursor: pointer;
820
+ }
821
+ a [data-slot=warm-mascot] img {
822
+ pointer-events: auto;
823
+ cursor: pointer;
824
+ }
825
+ @media (prefers-reduced-motion: no-preference) {
826
+ [data-slot=warm-mascot] {
827
+ animation: warm-mascot-float 3.8s ease-in-out infinite;
828
+ }
829
+ [data-slot=warm-mascot][data-expression=CONFUSED] #left_pupil path,
830
+ [data-slot=warm-mascot][data-expression=CONFUSED] #right_pupil path {
831
+ transform-box: fill-box;
832
+ transform-origin: center;
833
+ animation: warm-mascot-swirl 2.1s linear infinite;
834
+ }
835
+ }
836
+ @keyframes warm-mascot-swirl {
837
+ to {
838
+ transform: rotate(360deg);
839
+ }
840
+ }
841
+ @keyframes warm-mascot-float {
842
+ 0%, 100% {
843
+ transform: translateY(0);
844
+ }
845
+ 50% {
846
+ transform: translateY(-0.2rem);
847
+ }
848
+ }
849
+
850
+ /* ../ui/src/warmio/logo/logo.css */
851
+ [data-slot=warm-branded-logo] {
852
+ position: relative;
853
+ display: inline-flex;
854
+ flex-shrink: 0;
855
+ align-items: center;
856
+ justify-content: center;
857
+ }
858
+ [data-slot=warm-branded-logo][data-size=sm] {
859
+ width: calc(var(--spacing) * 8);
860
+ height: calc(var(--spacing) * 8);
861
+ }
862
+ [data-slot=warm-branded-logo][data-size=md] {
863
+ width: calc(var(--spacing) * 10);
864
+ height: calc(var(--spacing) * 10);
865
+ }
866
+ [data-slot=warm-branded-logo][data-size=lg] {
867
+ width: calc(var(--spacing) * 14);
868
+ height: calc(var(--spacing) * 14);
869
+ }
870
+ [data-slot=warm-branded-logo-mascot] {
871
+ pointer-events: none;
872
+ position: absolute;
873
+ inset: calc(var(--spacing) * 0);
874
+ scale: 1.35;
875
+ opacity: 90%;
876
+ }
877
+ [data-slot=warm-branded-logo-icon] {
878
+ position: relative;
879
+ z-index: 10;
880
+ filter: drop-shadow(0 1px 2px var(--black-10));
881
+ }
882
+ [data-slot=warm-branded-logo-icon][data-size=sm] {
883
+ width: calc(var(--spacing) * 5);
884
+ height: calc(var(--spacing) * 5);
885
+ }
886
+ [data-slot=warm-branded-logo-icon][data-size=md] {
887
+ width: calc(var(--spacing) * 6);
888
+ height: calc(var(--spacing) * 6);
889
+ }
890
+ [data-slot=warm-branded-logo-icon][data-size=lg] {
891
+ width: calc(var(--spacing) * 8);
892
+ height: calc(var(--spacing) * 8);
893
+ }
894
+ [data-slot=warm-branded-logo-link] {
895
+ display: inline-flex;
896
+ flex-shrink: 0;
897
+ align-items: center;
898
+ }
899
+ [data-slot=warm-branded-logo-static] {
900
+ position: relative;
901
+ display: inline-flex;
902
+ align-items: center;
903
+ justify-content: center;
904
+ width: calc(var(--spacing) * 8);
905
+ height: calc(var(--spacing) * 8);
906
+ }
907
+ [data-slot=warm-branded-logo-static-fill] {
908
+ position: absolute;
909
+ inset: calc(var(--spacing) * 0);
910
+ border-radius: var(--radius-full);
911
+ background-image:
912
+ linear-gradient(
913
+ to bottom right in oklab,
914
+ color-mix(in oklab, var(--primary) 90%, transparent) 0%,
915
+ color-mix(in oklab, var(--warning) 80%, transparent) 50%,
916
+ color-mix(in oklab, var(--primary) 80%, transparent) 100%);
917
+ }
918
+
919
+ /* ../ui/src/warmio/product-header/product-header.css */
920
+ [data-slot=product-header] {
921
+ position: relative;
922
+ top: calc(var(--spacing) * 0);
923
+ z-index: 20;
924
+ display: flex;
925
+ height: var(--header-height);
926
+ flex-shrink: 0;
927
+ flex-wrap: nowrap;
928
+ align-items: center;
929
+ overflow: visible;
930
+ font-size: var(--type-size-body);
931
+ }
932
+ [data-slot=product-header][data-visibility=desktop],
933
+ [data-slot=product-header][data-visibility=container] {
934
+ display: none;
935
+ }
936
+ @media (width >= 48rem) {
937
+ [data-slot=product-header][data-visibility=desktop] {
938
+ display: flex;
939
+ }
940
+ }
941
+ @container main (width >= 48rem) {
942
+ [data-slot=product-header][data-visibility=container] {
943
+ display: flex;
944
+ }
945
+ }
946
+ [data-slot=product-header][data-desktop-shell] {
947
+ -webkit-user-select: none;
948
+ user-select: none;
949
+ }
950
+ @supports (backdrop-filter: var(--tw)) {
951
+ [data-slot=product-header][data-desktop-shell] {
952
+ -webkit-backdrop-filter: blur(8px);
953
+ backdrop-filter: blur(8px);
954
+ }
955
+ }
956
+ [data-slot=product-header-titles] {
957
+ display: flex;
958
+ flex-shrink: 0;
959
+ align-items: center;
960
+ gap: calc(var(--spacing) * 2);
961
+ white-space: nowrap;
962
+ padding-inline: calc(var(--spacing) * 4);
963
+ }
964
+ @media (width >= 48rem) {
965
+ [data-slot=product-header-titles] {
966
+ padding-left: calc(var(--spacing) * 0);
967
+ }
968
+ }
969
+ [data-slot=product-header-actions] {
970
+ display: flex;
971
+ min-width: calc(var(--spacing) * 0);
972
+ flex-shrink: 1;
973
+ align-items: center;
974
+ gap: calc(var(--spacing) * 2);
975
+ margin-left: auto;
976
+ overflow: visible;
977
+ padding-inline: calc(var(--spacing) * 4);
978
+ }
979
+ [data-slot=product-header-fallback] {
980
+ display: contents;
981
+ }
982
+ [data-slot=product-header-titles]:has(> [data-page-chrome-content]) > [data-page-chrome-fallback],
983
+ [data-slot=product-header-actions]:has(> [data-page-chrome-content]) > [data-page-chrome-fallback] {
984
+ display: none;
985
+ }
986
+ [data-slot=product-header-separator] {
987
+ width: calc(var(--spacing) * 4);
988
+ height: calc(var(--spacing) * 4);
989
+ color: var(--foreground);
990
+ }
991
+ [data-slot=product-header] [data-slot=product-header-title] {
992
+ font-size: var(--type-size-body);
993
+ font-weight: 400;
994
+ line-height: 1.25;
995
+ text-decoration: none;
996
+ }
997
+ [data-slot=product-header] [data-slot=product-header-title]:not([aria-current=page]) {
998
+ color: var(--foreground);
999
+ }
1000
+ [data-slot=product-header] [data-slot=product-header-title][aria-current=page] {
1001
+ font-family: var(--font-sans);
1002
+ }
1003
+ [data-slot=product-header] [data-slot=product-header-title]:focus-visible {
1004
+ outline: var(--focus-ring-width) solid var(--ring);
1005
+ outline-offset: 2px;
1006
+ }
1007
+
1008
+ /* ../ui/src/warmio/sheet/sheet.css */
1009
+ [data-slot=sheet-overlay] {
1010
+ position: fixed;
1011
+ inset: 0;
1012
+ z-index: var(--z-overlay-backdrop);
1013
+ background-color: var(--black-50);
1014
+ }
1015
+ @supports (backdrop-filter: blur(2px)) {
1016
+ [data-slot=sheet-overlay] {
1017
+ -webkit-backdrop-filter: blur(2px);
1018
+ backdrop-filter: blur(2px);
1019
+ }
1020
+ }
1021
+ [data-visually-hidden] {
1022
+ position: absolute;
1023
+ width: 1px;
1024
+ height: 1px;
1025
+ padding: 0;
1026
+ margin: -1px;
1027
+ overflow: hidden;
1028
+ clip-path: inset(50%);
1029
+ white-space: nowrap;
1030
+ border-width: 0;
1031
+ }
1032
+ [data-slot=sheet-content] {
1033
+ --sheet-inset-top: max(1rem, var(--safe-area-inset-top));
1034
+ --sheet-inset-right: max(1rem, var(--safe-area-inset-right));
1035
+ --sheet-inset-bottom: max(1rem, var(--safe-area-inset-bottom));
1036
+ --sheet-inset-left: max(1rem, var(--safe-area-inset-left));
1037
+ position: fixed;
1038
+ z-index: calc(var(--z-overlay-backdrop) + 1);
1039
+ display: flex;
1040
+ min-height: 0;
1041
+ flex-direction: column;
1042
+ gap: 0;
1043
+ border-radius: var(--radius-xl);
1044
+ border-style: solid;
1045
+ border-width: 1px;
1046
+ border-color: var(--border);
1047
+ background-color: var(--popover);
1048
+ background-clip: padding-box;
1049
+ color: var(--foreground);
1050
+ box-shadow: var(--shadow-lg);
1051
+ }
1052
+ [data-slot=sheet-content][data-side=bottom],
1053
+ [data-slot=sheet-content][data-side=responsive] {
1054
+ top: auto;
1055
+ right: var(--sheet-inset-right);
1056
+ bottom: var(--sheet-inset-bottom);
1057
+ left: var(--sheet-inset-left);
1058
+ width: auto;
1059
+ height: auto;
1060
+ max-height: calc(100dvh - var(--sheet-inset-top) - var(--sheet-inset-bottom));
1061
+ }
1062
+ [data-slot=sheet-content][data-side=right] {
1063
+ top: var(--sheet-inset-top);
1064
+ right: var(--sheet-inset-right);
1065
+ bottom: var(--sheet-inset-bottom);
1066
+ left: auto;
1067
+ width: 75%;
1068
+ height: auto;
1069
+ }
1070
+ [data-slot=sheet-content][data-side=left] {
1071
+ top: var(--sheet-inset-top);
1072
+ right: auto;
1073
+ bottom: var(--sheet-inset-bottom);
1074
+ left: var(--sheet-inset-left);
1075
+ width: 75%;
1076
+ height: auto;
1077
+ }
1078
+ @media (width >= 40rem) {
1079
+ [data-slot=sheet-content][data-side=left],
1080
+ [data-slot=sheet-content][data-side=right] {
1081
+ max-width: 24rem;
1082
+ }
1083
+ }
1084
+ [data-slot=sheet-content][data-side=top] {
1085
+ top: var(--sheet-inset-top);
1086
+ right: var(--sheet-inset-right);
1087
+ bottom: auto;
1088
+ left: var(--sheet-inset-left);
1089
+ width: auto;
1090
+ height: auto;
1091
+ max-height: calc(100dvh - var(--sheet-inset-top) - var(--sheet-inset-bottom));
1092
+ }
1093
+ @media (width >= 64rem) {
1094
+ [data-slot=sheet-content][data-side=responsive][data-side=responsive] {
1095
+ top: var(--sheet-inset-top);
1096
+ right: var(--sheet-inset-right);
1097
+ bottom: var(--sheet-inset-bottom);
1098
+ left: auto;
1099
+ width: 75%;
1100
+ max-width: 24rem;
1101
+ height: auto;
1102
+ max-height: none;
1103
+ }
1104
+ }
1105
+ [data-slot=sheet-content][data-mobile=true] {
1106
+ width: var(--sidebar-width-mobile);
1107
+ padding: 0;
1108
+ background-color: var(--sidebar);
1109
+ color: var(--foreground);
1110
+ }
1111
+ .dark [data-slot=sheet-content][data-mobile=true] {
1112
+ background-color: var(--card);
1113
+ }
1114
+ [data-slot=sheet-header] {
1115
+ display: grid;
1116
+ flex: 0 0 auto;
1117
+ grid-template-columns: minmax(0, 1fr) auto;
1118
+ align-items: start;
1119
+ column-gap: calc(var(--spacing) * 4);
1120
+ row-gap: calc(var(--spacing) * 2);
1121
+ padding: calc(var(--spacing) * 4);
1122
+ }
1123
+ [data-slot=sheet-header] > [data-slot=sheet-title] {
1124
+ grid-column: 1;
1125
+ grid-row: 1;
1126
+ align-self: center;
1127
+ min-width: 0;
1128
+ color: var(--foreground);
1129
+ }
1130
+ [data-slot=sheet-header] > [data-slot=sheet-description] {
1131
+ grid-column: 1;
1132
+ grid-row: 2;
1133
+ color: var(--muted-foreground);
1134
+ }
1135
+ [data-slot=sheet-header] > [data-slot=sheet-close] {
1136
+ grid-column: 2;
1137
+ grid-row: 1;
1138
+ align-self: center;
1139
+ justify-self: end;
1140
+ }
1141
+ [data-slot=sheet-header] > :not([data-slot=sheet-title]):not([data-slot=sheet-description]):not([data-slot=sheet-close]) {
1142
+ grid-column: 1 / -1;
1143
+ }
1144
+ [data-slot=sheet-footer] {
1145
+ display: flex;
1146
+ flex: 0 0 auto;
1147
+ flex-flow: row wrap;
1148
+ align-items: center;
1149
+ justify-content: flex-end;
1150
+ width: 100%;
1151
+ gap: calc(var(--spacing) * 2);
1152
+ margin-top: auto;
1153
+ border-top: 1px solid var(--border);
1154
+ padding: calc(var(--spacing) * 4);
1155
+ }
1156
+ [data-slot=sheet-footer] > :first-child {
1157
+ margin-inline-end: auto;
1158
+ }
1159
+ [data-slot=sheet-footer] > :only-child {
1160
+ margin-inline-end: 0;
1161
+ }
1162
+ [data-slot=sheet-content][data-presentation=navigation] {
1163
+ gap: 0;
1164
+ overflow: hidden;
1165
+ border-color: var(--border);
1166
+ padding: 0;
1167
+ background-color: var(--sidebar);
1168
+ color: var(--foreground);
1169
+ }
1170
+ @media (width < 64rem) {
1171
+ [data-slot=sheet-content][data-presentation=navigation] {
1172
+ width: auto;
1173
+ }
1174
+ }
1175
+ @media (width >= 64rem) {
1176
+ [data-slot=sheet-content][data-presentation=navigation] {
1177
+ width: var(--sidebar-width-mobile);
1178
+ }
1179
+ }
1180
+ @media (width >= 48rem) {
1181
+ [data-slot=sheet-content][data-presentation=navigation][data-responsive=mobileOnly] {
1182
+ display: none;
1183
+ }
1184
+ }
1185
+ [data-slot=sheet-content][data-width=full][data-side=left],
1186
+ [data-slot=sheet-content][data-width=full][data-side=right],
1187
+ [data-slot=sheet-content][data-width=full][data-side=responsive] {
1188
+ width: 100%;
1189
+ max-width: none;
1190
+ }
1191
+ [data-slot=sheet-content][data-width=wide] {
1192
+ width: 100%;
1193
+ }
1194
+ @media (width >= 40rem) {
1195
+ [data-slot=sheet-content][data-width=wide][data-side=left],
1196
+ [data-slot=sheet-content][data-width=wide][data-side=right] {
1197
+ max-width: 32rem;
1198
+ }
1199
+ }
1200
+ @media (width >= 64rem) {
1201
+ [data-slot=sheet-content][data-width=wide][data-side=responsive] {
1202
+ max-width: 32rem;
1203
+ }
1204
+ }
1205
+ [data-slot=sheet-header][data-presentation=navigation] {
1206
+ border-bottom: 1px solid var(--border);
1207
+ padding: 0;
1208
+ background-color: var(--background);
1209
+ }
1210
+ [data-slot=sheet-title] {
1211
+ font-family: var(--font-sans);
1212
+ font-size: var(--type-size-large);
1213
+ font-weight: 500;
1214
+ }
1215
+ [data-slot=sheet-title][data-presentation=navigation] {
1216
+ min-width: 0;
1217
+ overflow: hidden;
1218
+ text-overflow: ellipsis;
1219
+ white-space: nowrap;
1220
+ text-align: left;
1221
+ color: var(--foreground);
1222
+ }
1223
+ [data-slot=sheet-content] > :not([data-slot=sheet-header]):not([data-slot=sheet-footer]) {
1224
+ flex: 1 1 auto;
1225
+ min-height: 0;
1226
+ overflow-y: auto;
1227
+ }
1228
+
1229
+ /* ../ui/src/warmio/close-button/close-button.css */
1230
+ [data-warm-button][data-warm-close-button][data-size] {
1231
+ --warm-close-size: var(--control-height);
1232
+ --warm-close-icon-size: var(--icon-size);
1233
+ width: var(--warm-close-size);
1234
+ height: var(--warm-close-size);
1235
+ padding: 0;
1236
+ padding-inline: 0;
1237
+ cursor: pointer;
1238
+ }
1239
+ [data-warm-button][data-warm-close-button][data-size=small] {
1240
+ --warm-close-size: var(--control-height-sm);
1241
+ --warm-close-icon-size: var(--icon-size-sm);
1242
+ }
1243
+ [data-warm-button][data-warm-close-button][data-size=large] {
1244
+ --warm-close-size: var(--control-height-lg);
1245
+ --warm-close-icon-size: var(--icon-size);
1246
+ }
1247
+ [data-warm-button][data-warm-close-button] > [data-slot=close-button-icon] {
1248
+ width: var(--warm-close-icon-size);
1249
+ height: var(--warm-close-icon-size);
1250
+ }
1251
+
1252
+ /* ../ui/src/warmio/sidebar/sidebar.css */
1253
+ [data-slot=sidebar-account-label] {
1254
+ font-size: var(--type-size-body);
1255
+ }
1256
+ [data-slot=sidebar-menu-button] {
1257
+ font-size: var(--type-size-body);
1258
+ }
1259
+ [data-slot=sidebar-menu-button][data-active] {
1260
+ font-weight: 500;
1261
+ }
1262
+ [data-slot=sidebar-menu-button][data-size=sm] {
1263
+ font-size: var(--type-size-caption);
1264
+ }
1265
+ [data-slot=sidebar-menu-button][data-size=lg] {
1266
+ font-size: var(--type-size-body);
1267
+ }
1268
+ [data-slot=sidebar-menu-badge] {
1269
+ font-size: var(--type-size-caption);
1270
+ font-weight: 500;
1271
+ }
1272
+ [data-slot=sidebar-menu-sub-button][data-size=md] {
1273
+ font-size: var(--type-size-body);
1274
+ }
1275
+ [data-slot=sidebar-menu-sub-button][data-size=sm] {
1276
+ font-size: var(--type-size-caption);
1277
+ }
1278
+ [data-slot=sidebar-account-avatar],
1279
+ [data-slot=sidebar-account-label],
1280
+ [data-slot=sidebar-group-label] {
1281
+ font-weight: 500;
1282
+ }
1283
+ [data-slot=sidebar-account-avatar],
1284
+ [data-slot=sidebar-account-email],
1285
+ [data-slot=sidebar-group-label] {
1286
+ font-size: var(--type-size-caption);
1287
+ }
1288
+ [data-slot=sidebar-group-label][data-presentation=navigation],
1289
+ [data-slot=sidebar-group-label][data-presentation=mockup] {
1290
+ letter-spacing: 0.05em;
1291
+ text-transform: uppercase;
1292
+ }
1293
+ [data-slot=sidebar-wrapper] {
1294
+ display: flex;
1295
+ min-height: 100svh;
1296
+ width: 100%;
1297
+ }
1298
+ [data-slot=sidebar-wrapper]:has([data-variant=inset]) {
1299
+ background-color: var(--sidebar);
1300
+ }
1301
+ [data-slot=sidebar-wrapper][data-presentation=shell] {
1302
+ height: 100svh;
1303
+ min-height: 0;
1304
+ gap: 0;
1305
+ overflow: auto;
1306
+ }
1307
+ [data-slot=sidebar-wrapper][data-presentation=mockup] {
1308
+ min-height: 0;
1309
+ --sidebar-width: 16rem;
1310
+ }
1311
+ [data-slot=sidebar-wrapper][data-presentation=preview] {
1312
+ min-height: 100%;
1313
+ }
1314
+ [data-slot=sidebar]:not([data-state]) {
1315
+ display: flex;
1316
+ height: 100%;
1317
+ width: var(--sidebar-width);
1318
+ flex-direction: column;
1319
+ background-color: var(--sidebar);
1320
+ color: var(--foreground);
1321
+ }
1322
+ [data-slot=sidebar][data-state] {
1323
+ display: none;
1324
+ color: var(--foreground);
1325
+ }
1326
+ @media (width >= 48rem) {
1327
+ [data-slot=sidebar][data-state] {
1328
+ display: block;
1329
+ }
1330
+ }
1331
+ [data-slot=sidebar-gap] {
1332
+ position: relative;
1333
+ width: var(--sidebar-width);
1334
+ background-color: transparent;
1335
+ }
1336
+ [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-gap],
1337
+ [data-slot=sidebar][data-variant=inset] [data-slot=sidebar-gap] {
1338
+ width: calc(var(--sidebar-width) + (var(--spacing) * 4));
1339
+ }
1340
+ [data-slot=sidebar][data-collapsible=icon]:not([data-variant=floating]):not([data-variant=inset]) [data-slot=sidebar-gap] {
1341
+ width: var(--sidebar-width-icon);
1342
+ }
1343
+ [data-slot=sidebar][data-collapsible=icon][data-variant=floating] [data-slot=sidebar-gap],
1344
+ [data-slot=sidebar][data-collapsible=icon][data-variant=inset] [data-slot=sidebar-gap] {
1345
+ width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8));
1346
+ }
1347
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-gap] {
1348
+ width: 0;
1349
+ }
1350
+ [data-slot=sidebar][data-side=right] [data-slot=sidebar-gap] {
1351
+ transform: rotate(180deg);
1352
+ }
1353
+ [data-slot=sidebar][data-expand-on-hover=true] [data-slot=sidebar-gap] {
1354
+ width: var(--sidebar-width-icon);
1355
+ }
1356
+ [data-slot=sidebar][data-motion=toggle] [data-slot=sidebar-gap] {
1357
+ transition-property: width;
1358
+ transition-duration: var(--motion-duration-slow);
1359
+ transition-timing-function: linear;
1360
+ }
1361
+ [data-slot=sidebar-container] {
1362
+ position: fixed;
1363
+ inset-block: 0;
1364
+ z-index: 10;
1365
+ display: none;
1366
+ height: 100svh;
1367
+ width: var(--sidebar-width);
1368
+ }
1369
+ [data-slot=sidebar-container][data-side=left] {
1370
+ left: 0;
1371
+ }
1372
+ [data-slot=sidebar-container][data-side=right] {
1373
+ right: 0;
1374
+ }
1375
+ @media (width >= 48rem) {
1376
+ [data-slot=sidebar-container] {
1377
+ display: flex;
1378
+ }
1379
+ }
1380
+ [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-container],
1381
+ [data-slot=sidebar][data-variant=inset] [data-slot=sidebar-container] {
1382
+ width: calc(var(--sidebar-width) + (var(--spacing) * 4));
1383
+ padding: calc(var(--spacing) * 4);
1384
+ }
1385
+ [data-slot=sidebar][data-collapsible=icon]:not([data-variant=floating]):not([data-variant=inset]) [data-slot=sidebar-container] {
1386
+ width: var(--sidebar-width-icon);
1387
+ }
1388
+ [data-slot=sidebar][data-side=left]:not([data-variant=floating]):not([data-variant=inset]) [data-slot=sidebar-container] {
1389
+ border-right: 1px solid var(--border);
1390
+ }
1391
+ [data-slot=sidebar][data-side=right]:not([data-variant=floating]):not([data-variant=inset]) [data-slot=sidebar-container] {
1392
+ border-left: 1px solid var(--border);
1393
+ }
1394
+ [data-slot=sidebar][data-collapsible=icon][data-variant=floating] [data-slot=sidebar-container],
1395
+ [data-slot=sidebar][data-collapsible=icon][data-variant=inset] [data-slot=sidebar-container] {
1396
+ width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
1397
+ }
1398
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-container][data-side=left] {
1399
+ left: calc(var(--sidebar-width) * -1);
1400
+ }
1401
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-container][data-side=right] {
1402
+ right: calc(var(--sidebar-width) * -1);
1403
+ }
1404
+ [data-slot=sidebar][data-collapsible=offcanvas][data-variant=floating] [data-slot=sidebar-container][data-side=left],
1405
+ [data-slot=sidebar][data-collapsible=offcanvas][data-variant=inset] [data-slot=sidebar-container][data-side=left] {
1406
+ left: calc((var(--sidebar-width) + (var(--spacing) * 4)) * -1);
1407
+ }
1408
+ [data-slot=sidebar][data-collapsible=offcanvas][data-variant=floating] [data-slot=sidebar-container][data-side=right],
1409
+ [data-slot=sidebar][data-collapsible=offcanvas][data-variant=inset] [data-slot=sidebar-container][data-side=right] {
1410
+ right: calc((var(--sidebar-width) + (var(--spacing) * 4)) * -1);
1411
+ }
1412
+ [data-slot=sidebar][data-expand-on-hover=true] [data-slot=sidebar-container] {
1413
+ z-index: var(--z-sidebar-overlay);
1414
+ }
1415
+ [data-slot=sidebar][data-motion=hover] [data-slot=sidebar-container] {
1416
+ transition-property: width;
1417
+ transition-duration: var(--motion-duration-slow);
1418
+ transition-timing-function: var(--motion-easing);
1419
+ }
1420
+ [data-slot=sidebar][data-motion=toggle] [data-slot=sidebar-container] {
1421
+ transition-property:
1422
+ left,
1423
+ right,
1424
+ width;
1425
+ transition-duration: var(--motion-duration-slow);
1426
+ transition-timing-function: linear;
1427
+ }
1428
+ @media (prefers-reduced-motion: reduce) {
1429
+ [data-slot=sidebar][data-motion] [data-slot=sidebar-container],
1430
+ [data-slot=sidebar][data-motion] [data-slot=sidebar-gap] {
1431
+ transition: none;
1432
+ }
1433
+ }
1434
+ [data-slot=sidebar-inner] {
1435
+ display: flex;
1436
+ width: 100%;
1437
+ height: 100%;
1438
+ flex-direction: column;
1439
+ background-color: var(--sidebar);
1440
+ }
1441
+ [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-inner] {
1442
+ overflow: hidden;
1443
+ border-radius: var(--radius-xl);
1444
+ corner-shape: squircle;
1445
+ border-style: solid;
1446
+ border-width: 1px;
1447
+ border-color: var(--warm-inset-border);
1448
+ background-color: var(--warm-inset-frame);
1449
+ --card-background: var(--warm-inset-frame);
1450
+ --card-edge-border: var(--warm-inset-border);
1451
+ box-shadow: var(--shadow-card-edge);
1452
+ }
1453
+ .dark [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-inner] {
1454
+ box-shadow: none;
1455
+ border-top-color: color-mix(in oklab, var(--warm-inset-border) 95%, var(--gray-0));
1456
+ }
1457
+ [data-sidebar=mobile-body] {
1458
+ display: flex;
1459
+ height: 100%;
1460
+ width: 100%;
1461
+ flex-direction: column;
1462
+ }
1463
+ [data-slot=sidebar-rail] {
1464
+ position: absolute;
1465
+ inset-block: 0;
1466
+ z-index: 20;
1467
+ display: none;
1468
+ width: calc(var(--spacing) * 4);
1469
+ transform: translateX(-50%);
1470
+ transition-property:
1471
+ opacity,
1472
+ transform,
1473
+ background-color;
1474
+ transition-duration: var(--motion-duration-normal);
1475
+ transition-timing-function: linear;
1476
+ }
1477
+ [data-slot=sidebar-rail]::after {
1478
+ content: "";
1479
+ position: absolute;
1480
+ inset-block: 0;
1481
+ inset-inline-start: 50%;
1482
+ width: 2px;
1483
+ }
1484
+ [data-slot=sidebar-rail]:hover::after {
1485
+ background-color: var(--border);
1486
+ }
1487
+ @media (width >= 40rem) {
1488
+ [data-slot=sidebar-rail] {
1489
+ display: flex;
1490
+ }
1491
+ }
1492
+ [data-slot=sidebar][data-side=left] [data-slot=sidebar-rail] {
1493
+ right: calc(var(--spacing) * -4);
1494
+ cursor: w-resize;
1495
+ }
1496
+ [data-slot=sidebar][data-side=right] [data-slot=sidebar-rail] {
1497
+ left: 0;
1498
+ cursor: e-resize;
1499
+ }
1500
+ [data-slot=sidebar][data-side=left][data-state=collapsed] [data-slot=sidebar-rail] {
1501
+ cursor: e-resize;
1502
+ }
1503
+ [data-slot=sidebar][data-side=right][data-state=collapsed] [data-slot=sidebar-rail] {
1504
+ cursor: w-resize;
1505
+ }
1506
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-rail] {
1507
+ transform: translateX(0);
1508
+ }
1509
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-rail]:hover {
1510
+ background-color: var(--sidebar);
1511
+ }
1512
+ [data-slot=sidebar][data-collapsible=offcanvas] [data-slot=sidebar-rail]::after {
1513
+ left: 100%;
1514
+ }
1515
+ [data-slot=sidebar][data-side=left][data-collapsible=offcanvas] [data-slot=sidebar-rail] {
1516
+ right: calc(var(--spacing) * -2);
1517
+ }
1518
+ [data-slot=sidebar][data-side=right][data-collapsible=offcanvas] [data-slot=sidebar-rail] {
1519
+ left: calc(var(--spacing) * -2);
1520
+ }
1521
+ [data-slot=sidebar-inset] {
1522
+ position: relative;
1523
+ display: flex;
1524
+ min-height: 0;
1525
+ width: 100%;
1526
+ flex: 1;
1527
+ flex-direction: column;
1528
+ }
1529
+ [data-slot=sidebar-inset][data-presentation=product] {
1530
+ min-width: 0;
1531
+ overflow: auto;
1532
+ }
1533
+ @media (width >= 48rem) {
1534
+ [data-slot=sidebar][data-variant=inset] ~ [data-slot=sidebar-inset] {
1535
+ margin-block: calc(var(--spacing) * 2);
1536
+ margin-inline-start: 0;
1537
+ margin-inline-end: calc(var(--spacing) * 2);
1538
+ border-radius: var(--radius-xl);
1539
+ box-shadow: var(--shadow-sm);
1540
+ }
1541
+ [data-slot=sidebar][data-variant=inset][data-state=collapsed] ~ [data-slot=sidebar-inset] {
1542
+ margin-inline-start: calc(var(--spacing) * 2);
1543
+ }
1544
+ }
1545
+ [data-slot=sidebar-header],
1546
+ [data-slot=sidebar-footer] {
1547
+ display: flex;
1548
+ flex-direction: column;
1549
+ gap: calc(var(--spacing) * 2);
1550
+ padding: calc(var(--spacing) * 2);
1551
+ }
1552
+ [data-slot=sidebar-header][data-presentation=product] {
1553
+ height: var(--header-height);
1554
+ justify-content: flex-end;
1555
+ }
1556
+ [data-slot=sidebar-header][data-presentation=mockup] {
1557
+ height: calc(var(--spacing) * 14);
1558
+ justify-content: center;
1559
+ border-bottom: 1px solid var(--border);
1560
+ }
1561
+ [data-slot=sidebar-content] {
1562
+ display: flex;
1563
+ min-height: 0;
1564
+ flex: 1;
1565
+ flex-direction: column;
1566
+ gap: calc(var(--spacing) * 2);
1567
+ overflow: auto;
1568
+ scrollbar-width: none;
1569
+ -ms-overflow-style: none;
1570
+ }
1571
+ [data-slot=sidebar-content]::-webkit-scrollbar {
1572
+ display: none;
1573
+ }
1574
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-content] {
1575
+ overflow: hidden;
1576
+ }
1577
+ [data-slot=sidebar-content][data-presentation=product] {
1578
+ padding-bottom: 0;
1579
+ }
1580
+ [data-slot=sidebar-content][data-presentation=mockup] {
1581
+ padding-inline: calc(var(--spacing) * 2);
1582
+ padding-block: calc(var(--spacing) * 4);
1583
+ }
1584
+ [data-slot=sidebar-group] {
1585
+ position: relative;
1586
+ display: flex;
1587
+ width: 100%;
1588
+ min-width: 0;
1589
+ flex-direction: column;
1590
+ padding: calc(var(--spacing) * 2);
1591
+ }
1592
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group] {
1593
+ align-items: center;
1594
+ padding-inline: 0;
1595
+ }
1596
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu] {
1597
+ align-items: center;
1598
+ }
1599
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-item] {
1600
+ display: flex;
1601
+ width: 100%;
1602
+ justify-content: center;
1603
+ }
1604
+ [data-slot=sidebar-group][data-presentation=navigation][data-collapsed=true],
1605
+ [data-slot=sidebar-group][data-presentation=navigation-primary][data-collapsed=true] {
1606
+ align-items: center;
1607
+ }
1608
+ [data-slot=sidebar-group-label] {
1609
+ display: flex;
1610
+ height: calc(var(--spacing) * 8);
1611
+ flex-shrink: 0;
1612
+ align-items: center;
1613
+ border-radius: var(--radius-lg);
1614
+ padding-inline: calc(var(--spacing) * 2);
1615
+ color: color-mix(in oklab, var(--foreground) 80%, transparent);
1616
+ outline-style: none;
1617
+ transition-property: margin, opacity;
1618
+ transition-duration: var(--motion-duration-normal);
1619
+ transition-timing-function: linear;
1620
+ }
1621
+ [data-slot=sidebar-group-label]:focus-visible {
1622
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--ring);
1623
+ }
1624
+ [data-slot=sidebar-group-label] > svg {
1625
+ width: calc(var(--spacing) * 4);
1626
+ height: calc(var(--spacing) * 4);
1627
+ flex-shrink: 0;
1628
+ }
1629
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group-label] {
1630
+ margin-top: 0;
1631
+ opacity: 0;
1632
+ }
1633
+ [data-slot=sidebar-group-label][data-presentation=navigation] {
1634
+ font-family: var(--font-mono);
1635
+ font-variant-numeric: tabular-nums;
1636
+ letter-spacing: normal;
1637
+ color: color-mix(in oklab, var(--foreground) 50%, transparent);
1638
+ }
1639
+ [data-slot=sidebar-group-action] {
1640
+ position: absolute;
1641
+ top: calc(var(--spacing) * 3.5);
1642
+ right: calc(var(--spacing) * 3);
1643
+ display: flex;
1644
+ aspect-ratio: 1;
1645
+ width: calc(var(--spacing) * 5);
1646
+ align-items: center;
1647
+ justify-content: center;
1648
+ border-radius: var(--radius-lg);
1649
+ padding: 0;
1650
+ color: var(--foreground);
1651
+ outline-style: none;
1652
+ transition-property: transform;
1653
+ transition-duration: var(--motion-duration-normal);
1654
+ transition-timing-function: var(--motion-easing);
1655
+ }
1656
+ [data-slot=sidebar-group-action]::after {
1657
+ content: "";
1658
+ position: absolute;
1659
+ inset: calc(var(--spacing) * -2);
1660
+ }
1661
+ [data-slot=sidebar-group-action]:hover {
1662
+ background-color: var(--sidebar-accent);
1663
+ color: var(--foreground);
1664
+ }
1665
+ [data-slot=sidebar-group-action]:focus-visible {
1666
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--ring);
1667
+ }
1668
+ [data-slot=sidebar-group-action] > svg {
1669
+ width: calc(var(--spacing) * 4);
1670
+ height: calc(var(--spacing) * 4);
1671
+ flex-shrink: 0;
1672
+ }
1673
+ @media (width >= 48rem) {
1674
+ [data-slot=sidebar-group-action]::after,
1675
+ [data-slot=sidebar-menu-action]::after {
1676
+ display: none;
1677
+ }
1678
+ }
1679
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group-action] {
1680
+ display: none;
1681
+ }
1682
+ [data-slot=sidebar-group-content] {
1683
+ width: 100%;
1684
+ }
1685
+ [data-slot=sidebar-menu] {
1686
+ position: relative;
1687
+ isolation: isolate;
1688
+ display: flex;
1689
+ width: 100%;
1690
+ min-width: 0;
1691
+ flex-direction: column;
1692
+ gap: calc(var(--spacing) * 2);
1693
+ }
1694
+ [data-slot=sidebar-menu][data-spacing=collapsed] {
1695
+ gap: 0;
1696
+ }
1697
+ [data-slot=sidebar-menu] [data-fluid-menu-item]:is(:hover, :active, :focus-visible, [data-active], [data-open], [data-popup-open]) {
1698
+ background-color: transparent !important;
1699
+ }
1700
+ [data-slot=sidebar-menu-item],
1701
+ [data-slot=sidebar-menu-sub-item] {
1702
+ position: relative;
1703
+ }
1704
+ [data-slot=sidebar-menu-button] {
1705
+ display: flex;
1706
+ width: 100%;
1707
+ height: calc(var(--spacing) * 8);
1708
+ align-items: center;
1709
+ gap: calc(var(--spacing) * 2);
1710
+ overflow: hidden;
1711
+ border-radius: var(--radius-lg);
1712
+ padding: calc(var(--spacing) * 2);
1713
+ text-align: left;
1714
+ outline-style: none;
1715
+ transition-property:
1716
+ width,
1717
+ height,
1718
+ padding,
1719
+ background-color,
1720
+ color,
1721
+ box-shadow;
1722
+ transition-duration: var(--motion-duration-normal);
1723
+ transition-timing-function: var(--motion-easing);
1724
+ }
1725
+ [data-slot=sidebar-menu-button]:has(> [data-slot=notification-dot]) {
1726
+ position: relative;
1727
+ }
1728
+ [data-slot=sidebar-menu-button]:not([data-presentation=account]) {
1729
+ border-radius: var(--radius-full);
1730
+ }
1731
+ @media (prefers-reduced-motion: reduce) {
1732
+ [data-slot=sidebar-menu-button] {
1733
+ transition: none;
1734
+ }
1735
+ }
1736
+ [data-slot=sidebar-menu-button]:hover,
1737
+ [data-slot=sidebar-menu-button]:active,
1738
+ [data-slot=sidebar-menu-button][data-open]:hover {
1739
+ background-color: var(--sidebar-accent);
1740
+ color: var(--foreground);
1741
+ }
1742
+ [data-slot=sidebar-menu-button]:focus-visible {
1743
+ box-shadow: inset 0 0 0 var(--focus-ring-width) var(--ring);
1744
+ }
1745
+ [data-slot=sidebar-menu-button]:disabled,
1746
+ [data-slot=sidebar-menu-button][aria-disabled=true] {
1747
+ pointer-events: none;
1748
+ opacity: 0.5;
1749
+ }
1750
+ [data-slot=sidebar-menu-item]:has([data-sidebar=menu-action]) [data-slot=sidebar-menu-button] {
1751
+ padding-right: calc(var(--spacing) * 4);
1752
+ }
1753
+ [data-slot=sidebar-menu-button] > span:last-child:not([data-slot=sidebar-menu-label]) {
1754
+ overflow: hidden;
1755
+ text-overflow: ellipsis;
1756
+ white-space: nowrap;
1757
+ }
1758
+ [data-slot=sidebar-menu-button] > [data-slot=sidebar-menu-label] {
1759
+ position: relative;
1760
+ min-width: 0;
1761
+ overflow: visible;
1762
+ }
1763
+ [data-slot=sidebar-menu-label-text] {
1764
+ display: block;
1765
+ overflow: hidden;
1766
+ text-overflow: ellipsis;
1767
+ white-space: nowrap;
1768
+ }
1769
+ [data-slot=sidebar-menu-button] svg {
1770
+ width: calc(var(--spacing) * 4);
1771
+ height: calc(var(--spacing) * 4);
1772
+ flex-shrink: 0;
1773
+ transition-property: color, stroke-width;
1774
+ transition-duration: var(--motion-duration-fast);
1775
+ }
1776
+ [data-slot=sidebar-menu-item]:hover [data-slot=sidebar-menu-button] svg,
1777
+ [data-slot=sidebar-menu-item]:focus-within [data-slot=sidebar-menu-button] svg {
1778
+ stroke-width: 2;
1779
+ }
1780
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button] {
1781
+ width: calc(var(--spacing) * 8);
1782
+ height: calc(var(--spacing) * 8);
1783
+ padding: calc(var(--spacing) * 2);
1784
+ }
1785
+ [data-slot=sidebar-menu-button][data-size=default] {
1786
+ height: calc(var(--spacing) * 8);
1787
+ }
1788
+ [data-slot=sidebar-menu-button][data-size=sm] {
1789
+ height: calc(var(--spacing) * 7);
1790
+ }
1791
+ [data-slot=sidebar-menu-button][data-size=lg] {
1792
+ height: calc(var(--spacing) * 12);
1793
+ }
1794
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button][data-size=lg] {
1795
+ padding: 0;
1796
+ }
1797
+ [data-slot=sidebar-menu-button][data-variant=outline] {
1798
+ background-color: var(--background);
1799
+ box-shadow: 0 0 0 1px var(--border);
1800
+ }
1801
+ [data-slot=sidebar-menu-button][data-variant=outline]:hover {
1802
+ background-color: var(--sidebar-accent);
1803
+ color: var(--foreground);
1804
+ box-shadow: 0 0 0 1px var(--sidebar-accent);
1805
+ }
1806
+ [data-slot=sidebar-menu-button][data-active] {
1807
+ background-color: var(--button-primary-bg);
1808
+ background-image: var(--button-primary-gradient);
1809
+ color: var(--button-primary-foreground);
1810
+ box-shadow: var(--button-primary-shadow);
1811
+ }
1812
+ [data-slot=sidebar-menu-button][data-active]:hover {
1813
+ background-color: var(--button-primary-hover);
1814
+ background-image: var(--button-primary-gradient-hover);
1815
+ color: var(--button-primary-foreground);
1816
+ }
1817
+ [data-slot=sidebar-menu-button][data-collapsed=true],
1818
+ [data-slot=sidebar-menu-button][data-presentation=previewCollapsed] {
1819
+ margin-inline: auto;
1820
+ width: calc(var(--spacing) * 8);
1821
+ height: calc(var(--spacing) * 8);
1822
+ gap: 0;
1823
+ padding: calc(var(--spacing) * 2);
1824
+ }
1825
+ [data-slot=sidebar-menu-button][data-presentation=sidebarIcon] {
1826
+ margin-inline: auto;
1827
+ width: calc(var(--spacing) * 9);
1828
+ height: calc(var(--spacing) * 9);
1829
+ justify-content: center;
1830
+ gap: 0;
1831
+ overflow: visible;
1832
+ padding: 0;
1833
+ }
1834
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button][data-presentation=sidebarIcon] {
1835
+ width: calc(var(--spacing) * 9);
1836
+ height: calc(var(--spacing) * 9);
1837
+ padding: 0;
1838
+ }
1839
+ [data-slot=sidebar-menu-button][data-presentation=sidebarIcon] > span:last-child {
1840
+ display: none;
1841
+ }
1842
+ [data-slot=sidebar-menu-button][data-presentation=sidebarIcon][data-active] {
1843
+ background-color: var(--sidebar-accent);
1844
+ background-image: none;
1845
+ box-shadow: var(--button-ghost-shadow);
1846
+ }
1847
+ [data-slot=sidebar-menu-button][data-presentation=account] {
1848
+ height: calc(var(--spacing) * 12);
1849
+ }
1850
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button][data-presentation=account] {
1851
+ margin-inline: auto;
1852
+ width: calc(var(--spacing) * 8);
1853
+ height: calc(var(--spacing) * 8);
1854
+ justify-content: center;
1855
+ gap: 0;
1856
+ padding: 0;
1857
+ }
1858
+ [data-slot=sidebar-menu-button][data-presentation=navigation] {
1859
+ color: var(--foreground);
1860
+ }
1861
+ [data-slot=sidebar-menu-button][data-presentation=navigation]:hover,
1862
+ [data-slot=sidebar-menu-button][data-presentation=navigation]:active,
1863
+ [data-slot=sidebar-menu-button][data-presentation=navigation][data-open]:hover {
1864
+ color: var(--foreground);
1865
+ }
1866
+ [data-slot=sidebar-menu-button][data-presentation=navigation][data-active],
1867
+ [data-slot=sidebar-menu-button][data-presentation=navigation][data-active]:hover {
1868
+ color: var(--button-primary-foreground);
1869
+ }
1870
+ [data-slot=sidebar-menu-button][data-muted] {
1871
+ color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
1872
+ }
1873
+ [data-slot=sidebar-menu-action] {
1874
+ position: absolute;
1875
+ top: calc(var(--spacing) * 1.5);
1876
+ right: var(--spacing);
1877
+ display: flex;
1878
+ aspect-ratio: 1;
1879
+ width: calc(var(--spacing) * 5);
1880
+ align-items: center;
1881
+ justify-content: center;
1882
+ border-radius: var(--radius-lg);
1883
+ padding: 0;
1884
+ color: var(--foreground);
1885
+ outline-style: none;
1886
+ transition-property: transform;
1887
+ transition-duration: var(--motion-duration-normal);
1888
+ transition-timing-function: var(--motion-easing);
1889
+ }
1890
+ [data-slot=sidebar-menu-action]::after {
1891
+ content: "";
1892
+ position: absolute;
1893
+ inset: calc(var(--spacing) * -2);
1894
+ }
1895
+ [data-slot=sidebar-menu-action]:hover,
1896
+ [data-slot=sidebar-menu-button]:hover ~ [data-slot=sidebar-menu-action] {
1897
+ background-color: var(--sidebar-accent);
1898
+ color: var(--foreground);
1899
+ }
1900
+ [data-slot=sidebar-menu-button]:hover ~ [data-slot=sidebar-menu-action] {
1901
+ background-color: transparent;
1902
+ }
1903
+ [data-slot=sidebar-menu-action]:focus-visible {
1904
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--ring);
1905
+ }
1906
+ [data-slot=sidebar-menu-action] > svg {
1907
+ width: calc(var(--spacing) * 4);
1908
+ height: calc(var(--spacing) * 4);
1909
+ flex-shrink: 0;
1910
+ }
1911
+ [data-slot=sidebar-menu-button][data-size=sm] ~ [data-slot=sidebar-menu-action],
1912
+ [data-slot=sidebar-menu-button][data-size=sm] ~ [data-slot=sidebar-menu-badge] {
1913
+ top: var(--spacing);
1914
+ }
1915
+ [data-slot=sidebar-menu-button][data-size=default] ~ [data-slot=sidebar-menu-action],
1916
+ [data-slot=sidebar-menu-button][data-size=default] ~ [data-slot=sidebar-menu-badge] {
1917
+ top: calc(var(--spacing) * 1.5);
1918
+ }
1919
+ [data-slot=sidebar-menu-button][data-size=lg] ~ [data-slot=sidebar-menu-action],
1920
+ [data-slot=sidebar-menu-button][data-size=lg] ~ [data-slot=sidebar-menu-badge] {
1921
+ top: calc(var(--spacing) * 2.5);
1922
+ }
1923
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-action],
1924
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-badge],
1925
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-sub],
1926
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-sub-button] {
1927
+ display: none;
1928
+ }
1929
+ @media (width >= 48rem) {
1930
+ [data-slot=sidebar-menu-action][data-show-on-hover=true] {
1931
+ opacity: 0;
1932
+ }
1933
+ }
1934
+ [data-slot=sidebar-menu-item]:focus-within [data-slot=sidebar-menu-action][data-show-on-hover=true],
1935
+ [data-slot=sidebar-menu-item]:hover [data-slot=sidebar-menu-action][data-show-on-hover=true],
1936
+ [data-slot=sidebar-menu-action][data-show-on-hover=true][aria-expanded=true] {
1937
+ opacity: 1;
1938
+ }
1939
+ [data-slot=sidebar-menu-button][data-active] ~ [data-slot=sidebar-menu-action][data-show-on-hover=true] {
1940
+ color: var(--foreground);
1941
+ }
1942
+ [data-slot=sidebar-menu-badge] {
1943
+ pointer-events: none;
1944
+ position: absolute;
1945
+ right: var(--spacing);
1946
+ display: flex;
1947
+ height: calc(var(--spacing) * 5);
1948
+ min-width: calc(var(--spacing) * 5);
1949
+ align-items: center;
1950
+ justify-content: center;
1951
+ border-radius: var(--radius-lg);
1952
+ padding-inline: calc(var(--spacing) * 2);
1953
+ color: var(--foreground);
1954
+ font-family: var(--font-mono);
1955
+ font-variant-numeric: tabular-nums;
1956
+ letter-spacing: normal;
1957
+ user-select: none;
1958
+ }
1959
+ [data-slot=sidebar-menu-button]:hover ~ [data-slot=sidebar-menu-badge] {
1960
+ color: var(--foreground);
1961
+ }
1962
+ [data-slot=sidebar-menu-button][data-active] ~ [data-slot=sidebar-menu-badge] {
1963
+ color: var(--button-primary-foreground);
1964
+ }
1965
+ [data-slot=sidebar-menu-badge][data-presentation=attention] {
1966
+ animation: warm-sidebar-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1967
+ }
1968
+ @keyframes warm-sidebar-badge-pulse {
1969
+ 50% {
1970
+ opacity: 0.5;
1971
+ }
1972
+ }
1973
+ [data-slot=sidebar-menu-skeleton] {
1974
+ display: flex;
1975
+ height: calc(var(--spacing) * 8);
1976
+ align-items: center;
1977
+ gap: calc(var(--spacing) * 2);
1978
+ border-radius: var(--radius-lg);
1979
+ padding-inline: calc(var(--spacing) * 2);
1980
+ }
1981
+ [data-slot=sidebar-menu-sub] {
1982
+ display: flex;
1983
+ min-width: 0;
1984
+ transform: translateX(1px);
1985
+ flex-direction: column;
1986
+ gap: calc(var(--spacing) * 2);
1987
+ margin-inline: calc(var(--spacing) * 4);
1988
+ border-left: 1px solid var(--border);
1989
+ padding: calc(var(--spacing) * 2);
1990
+ }
1991
+ [data-slot=sidebar-menu-sub-button] {
1992
+ display: flex;
1993
+ height: calc(var(--spacing) * 7);
1994
+ min-width: 0;
1995
+ transform: translateX(-1px);
1996
+ align-items: center;
1997
+ gap: calc(var(--spacing) * 2);
1998
+ overflow: hidden;
1999
+ border-radius: var(--radius-lg);
2000
+ padding-inline: calc(var(--spacing) * 2);
2001
+ color: var(--foreground);
2002
+ outline-style: none;
2003
+ }
2004
+ [data-slot=sidebar-menu-sub-button]:hover,
2005
+ [data-slot=sidebar-menu-sub-button]:active,
2006
+ [data-slot=sidebar-menu-sub-button][data-active] {
2007
+ background-color: var(--sidebar-accent);
2008
+ color: var(--foreground);
2009
+ }
2010
+ [data-slot=sidebar-menu-sub-button]:focus-visible {
2011
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--ring);
2012
+ }
2013
+ [data-slot=sidebar-menu-sub-button]:disabled,
2014
+ [data-slot=sidebar-menu-sub-button][aria-disabled=true] {
2015
+ pointer-events: none;
2016
+ opacity: 0.5;
2017
+ }
2018
+ [data-slot=sidebar-menu-sub-button] > span:last-child {
2019
+ overflow: hidden;
2020
+ text-overflow: ellipsis;
2021
+ white-space: nowrap;
2022
+ }
2023
+ [data-slot=sidebar-menu-sub-button] > svg {
2024
+ width: calc(var(--spacing) * 4);
2025
+ height: calc(var(--spacing) * 4);
2026
+ flex-shrink: 0;
2027
+ color: var(--foreground);
2028
+ }
2029
+ [data-slot=sidebar-icon] {
2030
+ display: inline-flex;
2031
+ width: calc(var(--spacing) * 3.5);
2032
+ height: calc(var(--spacing) * 3.5);
2033
+ flex-shrink: 0;
2034
+ align-items: center;
2035
+ justify-content: center;
2036
+ }
2037
+ [data-slot=sidebar-icon] svg {
2038
+ width: calc(var(--spacing) * 3.5);
2039
+ height: calc(var(--spacing) * 3.5);
2040
+ flex-shrink: 0;
2041
+ }
2042
+ [data-slot=sidebar-icon][data-tone=warning] {
2043
+ color: var(--warning);
2044
+ }
2045
+ [data-sidebar-hide-when-collapsed=true] {
2046
+ display: inline-flex;
2047
+ }
2048
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-hide-when-collapsed=true] {
2049
+ display: none;
2050
+ }
2051
+ [data-slot=sidebar-brand] {
2052
+ display: flex;
2053
+ width: 100%;
2054
+ align-items: center;
2055
+ justify-content: space-between;
2056
+ gap: calc(var(--spacing) * 2);
2057
+ padding-inline: calc(var(--spacing) * 2);
2058
+ }
2059
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-brand] {
2060
+ justify-content: center;
2061
+ padding-inline: 0;
2062
+ }
2063
+ [data-sidebar-brand-mark=true] {
2064
+ position: relative;
2065
+ display: flex;
2066
+ flex-shrink: 0;
2067
+ align-items: center;
2068
+ border-radius: var(--radius-lg);
2069
+ outline-style: none;
2070
+ }
2071
+ [data-sidebar-brand-mark=true]:focus-within {
2072
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--ring);
2073
+ }
2074
+ [data-sidebar-brand-mark=true] > :first-child {
2075
+ display: flex;
2076
+ flex-shrink: 0;
2077
+ align-items: center;
2078
+ color: var(--foreground);
2079
+ transition-property: color;
2080
+ transition-duration: var(--motion-duration-normal);
2081
+ transition-timing-function: var(--motion-easing);
2082
+ }
2083
+ [data-sidebar-brand-mark=true] > :first-child:hover {
2084
+ color: var(--foreground);
2085
+ }
2086
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-brand-mark=true],
2087
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-brand-mark=true] > :first-child {
2088
+ width: calc(var(--spacing) * 8);
2089
+ height: calc(var(--spacing) * 8);
2090
+ }
2091
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-brand-mark=true] > :first-child {
2092
+ opacity: 0;
2093
+ }
2094
+ [data-sidebar-brand-collapsed=true] {
2095
+ pointer-events: none;
2096
+ position: absolute;
2097
+ inset: 0;
2098
+ display: none;
2099
+ width: calc(var(--spacing) * 8);
2100
+ height: calc(var(--spacing) * 8);
2101
+ align-items: center;
2102
+ justify-content: center;
2103
+ border-radius: var(--radius-lg);
2104
+ color: var(--foreground);
2105
+ }
2106
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-brand-collapsed=true] {
2107
+ display: flex;
2108
+ }
2109
+ [data-sidebar-brand-collapsed=true] > * {
2110
+ display: flex;
2111
+ width: 100%;
2112
+ height: 100%;
2113
+ align-items: center;
2114
+ justify-content: center;
2115
+ }
2116
+ [data-slot=sidebar-brand] > [data-sidebar-hide-when-collapsed=true] {
2117
+ display: flex;
2118
+ align-items: center;
2119
+ gap: calc(var(--spacing) * 2);
2120
+ }
2121
+ [data-slot=sidebar-account-avatar] {
2122
+ display: grid;
2123
+ width: calc(var(--spacing) * 8);
2124
+ height: calc(var(--spacing) * 8);
2125
+ flex-shrink: 0;
2126
+ place-items: center;
2127
+ border-radius: var(--radius-lg);
2128
+ background-color: var(--primary);
2129
+ color: var(--primary-foreground);
2130
+ }
2131
+ [data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-account-avatar] {
2132
+ border-radius: var(--radius-full);
2133
+ }
2134
+ [data-slot=sidebar-account-avatar] svg {
2135
+ width: calc(var(--spacing) * 4);
2136
+ height: calc(var(--spacing) * 4);
2137
+ }
2138
+ [data-sidebar=account-details] {
2139
+ min-width: 0;
2140
+ flex: 1;
2141
+ text-align: left;
2142
+ }
2143
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar=account-details],
2144
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-account-chevron=true] {
2145
+ display: none;
2146
+ }
2147
+ [data-slot=sidebar-account-label],
2148
+ [data-slot=sidebar-account-email] {
2149
+ overflow: hidden;
2150
+ text-overflow: ellipsis;
2151
+ white-space: nowrap;
2152
+ }
2153
+ [data-slot=sidebar-account-email] {
2154
+ color: color-mix(in oklab, var(--foreground) 50%, transparent);
2155
+ }
2156
+ [data-sidebar-account-chevron=true] {
2157
+ margin-left: auto;
2158
+ width: calc(var(--spacing) * 4);
2159
+ height: calc(var(--spacing) * 4);
2160
+ }
2161
+ [data-sidebar-navigation-collapsed] {
2162
+ display: none;
2163
+ }
2164
+ [data-sidebar-account-collapsed=true] {
2165
+ display: none;
2166
+ }
2167
+ [data-sidebar-account-expanded=true] {
2168
+ display: flex;
2169
+ min-height: calc(var(--spacing) * 12);
2170
+ flex-shrink: 0;
2171
+ align-items: center;
2172
+ }
2173
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-account-collapsed=true] {
2174
+ display: flex;
2175
+ justify-content: center;
2176
+ }
2177
+ [data-slot=sidebar][data-collapsible=icon] [data-sidebar-account-expanded=true] {
2178
+ display: none;
2179
+ }
2180
+ @media (width >= 48rem) and (width < 80rem) {
2181
+ [data-force-icon-at-tablet=true] [data-sidebar-navigation-expanded] {
2182
+ display: none;
2183
+ }
2184
+ [data-force-icon-at-tablet=true] [data-sidebar-navigation-collapsed] {
2185
+ display: block;
2186
+ }
2187
+ [data-force-icon-at-tablet=true] [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-gap],
2188
+ [data-force-icon-at-tablet=true] [data-slot=sidebar][data-variant=inset] [data-slot=sidebar-gap] {
2189
+ width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
2190
+ transition: width var(--motion-duration-slow) linear;
2191
+ }
2192
+ [data-force-icon-at-tablet=true] [data-slot=sidebar][data-variant=floating] [data-slot=sidebar-container],
2193
+ [data-force-icon-at-tablet=true] [data-slot=sidebar][data-variant=inset] [data-slot=sidebar-container] {
2194
+ width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
2195
+ padding: calc(var(--spacing) * 4);
2196
+ transition: width var(--motion-duration-slow) linear;
2197
+ }
2198
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-content] {
2199
+ overflow: hidden;
2200
+ }
2201
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-group] {
2202
+ align-items: center;
2203
+ padding-inline: calc(var(--spacing) * 2);
2204
+ }
2205
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-group-label] {
2206
+ display: none;
2207
+ }
2208
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu] {
2209
+ gap: calc(var(--spacing) * 2);
2210
+ }
2211
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-item] {
2212
+ display: flex;
2213
+ width: 100%;
2214
+ justify-content: center;
2215
+ }
2216
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-button]:not([data-presentation=sidebarIcon]) {
2217
+ width: calc(var(--spacing) * 8);
2218
+ height: calc(var(--spacing) * 8);
2219
+ margin-inline: auto;
2220
+ justify-content: center;
2221
+ gap: 0;
2222
+ padding: calc(var(--spacing) * 2);
2223
+ }
2224
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-button] > span:not([aria-hidden=true]),
2225
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-button] [data-slot=sidebar-account-label],
2226
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-button] [data-slot=sidebar-account-email],
2227
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-button] > svg,
2228
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-menu-badge] {
2229
+ display: none;
2230
+ }
2231
+ [data-force-icon-at-tablet=true] [data-slot=sidebar-brand] {
2232
+ justify-content: center;
2233
+ padding-inline: 0;
2234
+ }
2235
+ [data-force-icon-at-tablet=true] [data-sidebar-brand-mark] {
2236
+ width: calc(var(--spacing) * 8);
2237
+ height: calc(var(--spacing) * 8);
2238
+ }
2239
+ [data-force-icon-at-tablet=true] [data-sidebar-brand-mark] > :first-child {
2240
+ width: calc(var(--spacing) * 8);
2241
+ height: calc(var(--spacing) * 8);
2242
+ opacity: 0;
2243
+ }
2244
+ [data-force-icon-at-tablet=true] [data-sidebar-brand-collapsed] {
2245
+ display: flex;
2246
+ }
2247
+ [data-force-icon-at-tablet=true] [data-sidebar-utility-controls] {
2248
+ flex-direction: column;
2249
+ align-items: center;
2250
+ justify-content: center;
2251
+ gap: calc(var(--spacing) * 2);
2252
+ }
2253
+ [data-force-icon-at-tablet=true] [data-sidebar-account-collapsed] {
2254
+ display: flex;
2255
+ justify-content: center;
2256
+ }
2257
+ [data-force-icon-at-tablet=true] [data-sidebar-account-expanded] {
2258
+ display: none;
2259
+ }
2260
+ }
2261
+
2262
+ /* ../ui/src/warmio/form-autofill.css */
2263
+ :is(input[data-slot=input]:not([type=file]):not([type=hidden]), input[data-slot=input-group-control], input[data-slot=mask-input], textarea[data-slot=textarea]):is(:autofill, :-webkit-autofill) {
2264
+ background-color: var(--background);
2265
+ color: var(--foreground);
2266
+ caret-color: var(--foreground);
2267
+ -webkit-text-fill-color: var(--foreground);
2268
+ transition: background-color 600000s 0s;
2269
+ }
2270
+ .dark :is(input[data-slot=input]:not([type=file]):not([type=hidden]), input[data-slot=input-group-control], input[data-slot=mask-input], textarea[data-slot=textarea]):is(:autofill, :-webkit-autofill) {
2271
+ background-color: var(--input);
2272
+ }
2273
+
2274
+ /* ../ui/src/warmio/input/input.css */
2275
+ [data-slot=input],
2276
+ [data-slot=input-group-control],
2277
+ [data-slot=sidebar-input] {
2278
+ --field-inset: 0 0 transparent;
2279
+ --field-ring: 0 0 transparent;
2280
+ --field-shadow: inset 0 1px 1px var(--shadow-color);
2281
+ width: 100%;
2282
+ min-width: 0;
2283
+ height: var(--control-height);
2284
+ appearance: none;
2285
+ border-radius: var(--radius-full);
2286
+ border: 1px solid var(--input);
2287
+ background-color: var(--background);
2288
+ padding-inline: calc(var(--spacing) * 2);
2289
+ color: var(--foreground);
2290
+ font-size: var(--type-size-body);
2291
+ box-shadow:
2292
+ var(--field-ring),
2293
+ var(--field-shadow),
2294
+ var(--field-inset);
2295
+ transition-property: color, box-shadow;
2296
+ transition-duration: var(--motion-duration-normal);
2297
+ transition-timing-function: var(--motion-easing);
2298
+ outline: none;
2299
+ }
2300
+ [data-slot=input][type=password]::-ms-reveal,
2301
+ [data-slot=input-group-control][type=password]::-ms-reveal {
2302
+ display: none;
2303
+ }
2304
+ [data-slot=input] {
2305
+ --field-inset: 0 0 0 1px var(--black-20);
2306
+ }
2307
+ [data-slot=input]::file-selector-button,
2308
+ [data-slot=input-group-control]::file-selector-button,
2309
+ [data-slot=sidebar-input]::file-selector-button {
2310
+ display: inline-flex;
2311
+ height: calc(var(--spacing) * 7);
2312
+ border-style: solid;
2313
+ border-width: 0;
2314
+ background-color: transparent;
2315
+ color: var(--foreground);
2316
+ font-size: var(--type-size-body);
2317
+ font-weight: 400;
2318
+ line-height: 1.25;
2319
+ }
2320
+ [data-slot=input]::placeholder,
2321
+ [data-slot=input-group-control]::placeholder,
2322
+ [data-slot=sidebar-input]::placeholder {
2323
+ color: var(--muted-foreground);
2324
+ }
2325
+ [data-slot=input]:focus-visible,
2326
+ [data-slot=sidebar-input]:focus-visible {
2327
+ border-color: var(--ring);
2328
+ --field-ring: 0 0 0 var(--focus-ring-width) var(--focus);
2329
+ }
2330
+ [data-slot=input]:disabled,
2331
+ [data-slot=input-group-control]:disabled,
2332
+ [data-slot=sidebar-input]:disabled {
2333
+ pointer-events: none;
2334
+ cursor: not-allowed;
2335
+ opacity: 50%;
2336
+ }
2337
+ [data-slot=input][aria-invalid=true],
2338
+ [data-slot=sidebar-input][aria-invalid=true] {
2339
+ border-color: var(--destructive);
2340
+ --field-ring: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
2341
+ }
2342
+ .dark [data-slot=input],
2343
+ .dark [data-slot=sidebar-input] {
2344
+ background-color: var(--input);
2345
+ }
2346
+ .dark [data-slot=input][aria-invalid=true],
2347
+ .dark [data-slot=sidebar-input][aria-invalid=true] {
2348
+ border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
2349
+ --field-ring: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--destructive) 50%, transparent);
2350
+ }
2351
+ [data-slot=input][data-text-style=code] {
2352
+ font-family: var(--font-mono);
2353
+ font-variant-numeric: tabular-nums;
2354
+ }
2355
+ [data-slot=input][data-text-style=tabular] {
2356
+ font-variant-numeric: tabular-nums;
2357
+ }
2358
+ [data-slot=input-group-control] {
2359
+ flex: 1;
2360
+ border-radius: 0;
2361
+ border-width: 0;
2362
+ background-color: transparent;
2363
+ padding-block: calc(var(--spacing) * 2);
2364
+ --field-shadow: 0 0 transparent;
2365
+ --field-ring: 0 0 transparent;
2366
+ }
2367
+ [data-slot=input-group-control]:disabled {
2368
+ opacity: 100%;
2369
+ }
2370
+ .dark [data-slot=input-group-control] {
2371
+ background-color: transparent;
2372
+ }
2373
+ [data-slot=sidebar-input] {
2374
+ height: calc(var(--spacing) * 8);
2375
+ border-radius: var(--radius-md);
2376
+ padding-block: calc(var(--spacing) * 2);
2377
+ --field-shadow: 0 0 transparent;
2378
+ }
2379
+
2380
+ /* ../ui/src/warmio/separator/separator.css */
2381
+ [data-slot=separator],
2382
+ [data-slot=sidebar-separator],
2383
+ [data-slot=field-separator-rule] {
2384
+ flex-shrink: 0;
2385
+ background-color: var(--border);
2386
+ }
2387
+ [data-slot=separator][data-orientation=horizontal],
2388
+ [data-slot=sidebar-separator][data-orientation=horizontal],
2389
+ [data-slot=field-separator-rule][data-orientation=horizontal] {
2390
+ height: 1px;
2391
+ width: 100%;
2392
+ }
2393
+ [data-slot=separator][data-orientation=vertical],
2394
+ [data-slot=sidebar-separator][data-orientation=vertical],
2395
+ [data-slot=field-separator-rule][data-orientation=vertical] {
2396
+ width: 1px;
2397
+ align-self: stretch;
2398
+ }
2399
+ [data-slot=sidebar-separator] {
2400
+ margin-inline: calc(var(--spacing) * 2);
2401
+ background-color: var(--border);
2402
+ }
2403
+ [data-slot=sidebar-separator][data-orientation=horizontal] {
2404
+ width: auto;
2405
+ }
2406
+ [data-slot=field-separator-rule] {
2407
+ position: absolute;
2408
+ inset: calc(var(--spacing) * 0);
2409
+ top: calc(1 / 2 * 100%);
2410
+ }
2411
+ [data-slot=warm-divider-label] {
2412
+ position: relative;
2413
+ font-size: var(--type-size-caption);
2414
+ letter-spacing: 0.05em;
2415
+ text-transform: uppercase;
2416
+ }
2417
+ [data-slot=warm-divider-label-rule] {
2418
+ position: absolute;
2419
+ inset: 0;
2420
+ display: flex;
2421
+ align-items: center;
2422
+ }
2423
+ [data-slot=warm-divider-label-center] {
2424
+ position: relative;
2425
+ display: flex;
2426
+ justify-content: center;
2427
+ }
2428
+ [data-slot=warm-divider-label-text] {
2429
+ padding-inline: calc(var(--spacing) * 2);
2430
+ color: var(--muted-foreground);
2431
+ }
2432
+ [data-slot=warm-divider-label-text][data-surface=background] {
2433
+ background-color: var(--background);
2434
+ }
2435
+ [data-slot=warm-divider-label-text][data-surface=card] {
2436
+ background-color: var(--card);
2437
+ }
2438
+
2439
+ /* ../ui/src/warmio/skeleton/skeleton.css */
2440
+ [data-slot=skeleton] {
2441
+ animation: warm-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2442
+ background-color: var(--muted);
2443
+ border-radius: var(--radius-md);
2444
+ }
2445
+ @keyframes warm-skeleton-pulse {
2446
+ 50% {
2447
+ opacity: 0.5;
2448
+ }
2449
+ }
2450
+ [data-slot=skeleton][data-shape=line]:not([data-preset]),
2451
+ [data-slot=skeleton][data-shape=block]:not([data-preset]),
2452
+ [data-slot=skeleton][data-shape=card]:not([data-preset]) {
2453
+ width: 100%;
2454
+ }
2455
+ [data-slot=skeleton][data-shape=line]:not([data-preset]),
2456
+ [data-slot=skeleton][data-shape=block]:not([data-preset]) {
2457
+ border-radius: var(--radius-lg);
2458
+ }
2459
+ [data-slot=skeleton][data-shape=avatar]:not([data-preset]),
2460
+ [data-slot=skeleton][data-preset=donutChart],
2461
+ [data-slot=skeleton][data-preset=onboardingAvatar],
2462
+ [data-slot=skeleton][data-preset=listBadge],
2463
+ [data-slot=skeleton][data-preset=progressTrack] {
2464
+ border-radius: var(--radius-full);
2465
+ }
2466
+ [data-slot=skeleton][data-shape=card]:not([data-preset]),
2467
+ [data-slot=skeleton][data-preset=pagePanel],
2468
+ [data-slot=skeleton][data-preset=onboardingAction] {
2469
+ border-radius: var(--radius-xl);
2470
+ }
2471
+ [data-slot=skeleton][data-shape=line][data-size=default]:not([data-preset]) {
2472
+ height: 1rem;
2473
+ }
2474
+ [data-slot=skeleton][data-shape=block][data-size=default]:not([data-preset]) {
2475
+ height: 4rem;
2476
+ }
2477
+ [data-slot=skeleton][data-shape=avatar][data-size=default]:not([data-preset]) {
2478
+ width: 2rem;
2479
+ height: 2rem;
2480
+ }
2481
+ [data-slot=skeleton][data-shape=card][data-size=default]:not([data-preset]) {
2482
+ height: 12rem;
2483
+ }
2484
+ [data-slot=skeleton][data-shape=line][data-size=chart]:not([data-preset]),
2485
+ [data-slot=skeleton][data-shape=block][data-size=chart]:not([data-preset]),
2486
+ [data-slot=skeleton][data-shape=card][data-size=chart]:not([data-preset]) {
2487
+ height: 11rem;
2488
+ }
2489
+ [data-slot=skeleton][data-shape=avatar][data-size=chart]:not([data-preset]) {
2490
+ width: 16rem;
2491
+ height: 16rem;
2492
+ }
2493
+ @media (min-width: 48rem) {
2494
+ [data-slot=skeleton][data-shape=line][data-size=chart]:not([data-preset]),
2495
+ [data-slot=skeleton][data-shape=block][data-size=chart]:not([data-preset]),
2496
+ [data-slot=skeleton][data-shape=card][data-size=chart]:not([data-preset]) {
2497
+ height: 18rem;
2498
+ }
2499
+ }
2500
+ [data-slot=skeleton][data-preset=pageHeading],
2501
+ [data-slot=skeleton][data-preset=legendText],
2502
+ [data-slot=skeleton][data-preset=listPrimary] {
2503
+ height: 1.25rem;
2504
+ width: 100%;
2505
+ border-radius: var(--radius-lg);
2506
+ }
2507
+ [data-slot=skeleton][data-preset=pagePanel] {
2508
+ height: 24rem;
2509
+ width: 100%;
2510
+ }
2511
+ [data-slot=skeleton][data-preset=cardHeading],
2512
+ [data-slot=skeleton][data-preset=listBadge] {
2513
+ height: 1.5rem;
2514
+ }
2515
+ [data-slot=skeleton][data-preset=cardHeading],
2516
+ [data-slot=skeleton][data-preset=cardAction],
2517
+ [data-slot=skeleton][data-preset=filterAction],
2518
+ [data-slot=skeleton][data-preset=legendText],
2519
+ [data-slot=skeleton][data-preset=compactMetricValue],
2520
+ [data-slot=skeleton][data-preset=compactMetricMeta],
2521
+ [data-slot=skeleton][data-preset=listPrimary],
2522
+ [data-slot=skeleton][data-preset=listSecondary],
2523
+ [data-slot=skeleton][data-preset=formControl],
2524
+ [data-slot=skeleton][data-preset=formRow],
2525
+ [data-slot=skeleton][data-preset=formAction],
2526
+ [data-slot=skeleton][data-preset=onboardingAction] {
2527
+ width: 100%;
2528
+ border-radius: var(--radius-lg);
2529
+ }
2530
+ [data-slot=skeleton][data-preset=cardAction],
2531
+ [data-slot=skeleton][data-preset=filterAction],
2532
+ [data-slot=skeleton][data-preset=compactMetricValue],
2533
+ [data-slot=skeleton][data-preset=filterChip] {
2534
+ height: 2rem;
2535
+ }
2536
+ [data-slot=skeleton][data-preset=donutChart] {
2537
+ width: 12rem;
2538
+ height: 12rem;
2539
+ }
2540
+ [data-slot=skeleton][data-preset=legendIcon] {
2541
+ width: 0.75rem;
2542
+ height: 0.75rem;
2543
+ border-radius: var(--radius-lg);
2544
+ }
2545
+ [data-slot=skeleton][data-preset=compactMetricMeta],
2546
+ [data-slot=skeleton][data-preset=listSecondary] {
2547
+ height: 0.75rem;
2548
+ }
2549
+ [data-slot=skeleton][data-preset=progressTrack] {
2550
+ height: 0.625rem;
2551
+ width: 100%;
2552
+ }
2553
+ [data-slot=skeleton][data-preset=listBadge] {
2554
+ width: 3.5rem;
2555
+ }
2556
+ [data-slot=skeleton][data-preset=formControl] {
2557
+ height: var(--control-height);
2558
+ }
2559
+ [data-slot=skeleton][data-preset=formRow],
2560
+ [data-slot=skeleton][data-preset=onboardingAction] {
2561
+ height: 3.5rem;
2562
+ }
2563
+ [data-slot=skeleton][data-preset=formAction] {
2564
+ height: var(--control-height-lg);
2565
+ }
2566
+ [data-slot=skeleton][data-preset=onboardingAvatar] {
2567
+ width: 5rem;
2568
+ height: 5rem;
2569
+ }
2570
+ [data-slot=skeleton][data-preset=filterChip] {
2571
+ width: 2rem;
2572
+ border-radius: var(--radius-lg);
2573
+ }
2574
+ [data-slot=skeleton][data-preset=dateRangeOption] {
2575
+ height: 1.5rem;
2576
+ width: 2.25rem;
2577
+ border-radius: var(--radius-lg);
2578
+ }
2579
+ [data-slot=skeleton][data-width=xs] {
2580
+ width: 3rem;
2581
+ }
2582
+ [data-slot=skeleton][data-width=sm] {
2583
+ width: 4rem;
2584
+ }
2585
+ [data-slot=skeleton][data-width=md] {
2586
+ width: 5rem;
2587
+ }
2588
+ [data-slot=skeleton][data-width=lg] {
2589
+ width: 6rem;
2590
+ }
2591
+ [data-slot=skeleton][data-width=xl] {
2592
+ width: 7rem;
2593
+ }
2594
+ [data-slot=skeleton][data-width=title] {
2595
+ width: 10rem;
2596
+ }
2597
+ [data-slot=skeleton][data-width=wide] {
2598
+ width: 12rem;
2599
+ }
2600
+ [data-slot=skeleton][data-width=full] {
2601
+ width: 100%;
2602
+ }
2603
+ [data-slot=skeleton][data-width=fluid] {
2604
+ flex: 1;
2605
+ }
2606
+ [data-sidebar=menu-skeleton-icon] {
2607
+ width: 1rem;
2608
+ height: 1rem;
2609
+ border-radius: var(--radius-lg);
2610
+ }
2611
+ [data-sidebar=menu-skeleton-text] {
2612
+ height: 1rem;
2613
+ flex: 1;
2614
+ max-width: var(--skeleton-width);
2615
+ }
2616
+
2617
+ /* ../ui/src/warmio/tooltip/tooltip.css */
2618
+ [data-slot=tooltip-positioner] {
2619
+ isolation: isolate;
2620
+ z-index: var(--z-popover);
2621
+ }
2622
+ [data-slot=tooltip-content] {
2623
+ display: inline-flex;
2624
+ width: fit-content;
2625
+ min-width: 140px;
2626
+ max-width: 20rem;
2627
+ transform-origin: var(--transform-origin);
2628
+ border-radius: var(--radius-lg);
2629
+ background-color: var(--chart-tooltip-background);
2630
+ color: var(--chart-tooltip-foreground);
2631
+ box-shadow: var(--shadow-md);
2632
+ font-size: var(--type-size-caption);
2633
+ pointer-events: none;
2634
+ z-index: var(--z-popover);
2635
+ }
2636
+ :is([data-slot=tooltip-content], [data-slot=recharts-tooltip], [data-slot=chart-tooltip-content], [data-slot=chart-tooltip-panel], [data-slot=chart-date-ticker], [data-slot=bklit-time-series-tooltip], [data-slot=bklit-active-x-axis-pill]),
2637
+ :is([data-slot=tooltip-content], [data-slot=recharts-tooltip], [data-slot=chart-tooltip-content], [data-slot=chart-tooltip-panel], [data-slot=chart-date-ticker], [data-slot=bklit-time-series-tooltip], [data-slot=bklit-active-x-axis-pill]) :where(*),
2638
+ :is([data-slot=tooltip-content], [data-slot=recharts-tooltip], [data-slot=chart-tooltip-content], [data-slot=chart-tooltip-panel], [data-slot=chart-date-ticker], [data-slot=bklit-time-series-tooltip], [data-slot=bklit-active-x-axis-pill]) [data-text-variant],
2639
+ :is([data-slot=tooltip-content], [data-slot=recharts-tooltip], [data-slot=chart-tooltip-content], [data-slot=chart-tooltip-panel], [data-slot=chart-date-ticker], [data-slot=bklit-time-series-tooltip], [data-slot=bklit-active-x-axis-pill]) [data-text-variant][data-text-element] {
2640
+ font-size: var(--type-size-caption);
2641
+ line-height: 1.25;
2642
+ }
2643
+ [data-slot=tooltip-content] [data-slot=kbd] {
2644
+ position: relative;
2645
+ isolation: isolate;
2646
+ z-index: calc(var(--z-popover) + 1);
2647
+ border-radius: var(--radius-lg);
2648
+ }
2649
+ [data-slot=tooltip-body] {
2650
+ display: flex;
2651
+ flex-direction: column;
2652
+ gap: calc(var(--spacing) * 2);
2653
+ padding-block: calc(var(--spacing) * 2);
2654
+ padding-inline: calc(var(--spacing) * 4);
2655
+ font-size: var(--type-size-caption);
2656
+ line-height: 1.25;
2657
+ }
2658
+ [data-slot=tooltip-arrow] {
2659
+ width: calc(var(--spacing) * 4);
2660
+ height: calc(var(--spacing) * 2);
2661
+ background-color: var(--chart-tooltip-background);
2662
+ }
2663
+ [data-slot=tooltip-arrow][data-side=top] {
2664
+ top: 100%;
2665
+ translate: 0 -1px;
2666
+ clip-path: polygon(0 0, 100% 0, 50% 100%);
2667
+ }
2668
+ [data-slot=tooltip-arrow][data-side=bottom] {
2669
+ bottom: 100%;
2670
+ translate: 0 1px;
2671
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
2672
+ }
2673
+ [data-slot=tooltip-arrow][data-side=left],
2674
+ [data-slot=tooltip-arrow][data-side=inline-start] {
2675
+ left: 100%;
2676
+ width: calc(var(--spacing) * 2);
2677
+ height: calc(var(--spacing) * 4);
2678
+ translate: -1px 0;
2679
+ clip-path: polygon(0 0, 100% 50%, 0 100%);
2680
+ }
2681
+ [data-slot=tooltip-arrow][data-side=right],
2682
+ [data-slot=tooltip-arrow][data-side=inline-end] {
2683
+ right: 100%;
2684
+ width: calc(var(--spacing) * 2);
2685
+ height: calc(var(--spacing) * 4);
2686
+ translate: 1px 0;
2687
+ clip-path: polygon(100% 0, 100% 100%, 0 50%);
2688
+ }
2689
+ [data-slot=tooltip-disabled-child] {
2690
+ display: inline-flex;
2691
+ }
2692
+
2693
+ /* ../ui/src/warmio/text/text.css */
2694
+ [data-text-variant=heading] {
2695
+ font-family: var(--font-sans);
2696
+ font-size: var(--type-size-body);
2697
+ font-weight: 500;
2698
+ line-height: 1.25;
2699
+ }
2700
+ [data-text-variant=heading][data-text-element=h1] {
2701
+ display: block;
2702
+ font-size: var(--type-size-display);
2703
+ }
2704
+ [data-text-variant=heading][data-text-element=h2] {
2705
+ font-size: var(--type-size-display);
2706
+ }
2707
+ [data-text-variant=metric] {
2708
+ display: block;
2709
+ font-family: var(--font-mono);
2710
+ font-size: var(--type-size-display);
2711
+ line-height: 1.25;
2712
+ }
2713
+ [data-text-variant=body] {
2714
+ font-size: var(--type-size-body);
2715
+ line-height: 1.25;
2716
+ }
2717
+ [data-text-variant=body][data-text-size=large] {
2718
+ font-size: var(--type-size-large);
2719
+ }
2720
+ [data-text-variant][data-text-size=display] {
2721
+ font-size: var(--type-size-display);
2722
+ }
2723
+ [data-text-variant=caption] {
2724
+ font-size: var(--type-size-caption);
2725
+ line-height: 1.25;
2726
+ }
2727
+ [data-mono] {
2728
+ font-family: var(--font-mono);
2729
+ letter-spacing: normal;
2730
+ }
2731
+ [data-text-tone=muted] {
2732
+ color: var(--muted-foreground);
2733
+ }
2734
+ [data-text-tone=foreground] {
2735
+ color: var(--foreground);
2736
+ }
2737
+ [data-text-tone=primary] {
2738
+ color: var(--primary);
2739
+ }
2740
+ [data-text-tone=success] {
2741
+ color: var(--success);
2742
+ }
2743
+ [data-text-tone=warning] {
2744
+ color: var(--warning);
2745
+ }
2746
+ [data-text-tone=financeCash] {
2747
+ color: var(--finance-cash);
2748
+ }
2749
+ [data-text-tone=financeDebt] {
2750
+ color: var(--finance-debt);
2751
+ }
2752
+ [data-text-tone=financeInvestment] {
2753
+ color: var(--finance-investment);
2754
+ }
2755
+ [data-text-align=start] {
2756
+ text-align: left;
2757
+ }
2758
+ [data-text-align=center] {
2759
+ text-align: center;
2760
+ }
2761
+ [data-text-align=end] {
2762
+ text-align: right;
2763
+ }
2764
+ :where([data-numeric=true]) {
2765
+ font-family: var(--font-mono);
2766
+ letter-spacing: normal;
2767
+ }
2768
+ [data-text-variant][data-text-numeric],
2769
+ [data-numeric=true] {
2770
+ font-variant-numeric: tabular-nums;
2771
+ }
2772
+ [data-text-variant][data-text-truncate],
2773
+ [data-truncate=true] {
2774
+ overflow: hidden;
2775
+ text-overflow: ellipsis;
2776
+ white-space: nowrap;
2777
+ min-width: 0;
2778
+ }
2779
+ [data-text-line] {
2780
+ display: block;
2781
+ }
2782
+ [data-presentation=dashboard][data-text-line=first],
2783
+ [data-presentation=welcome][data-text-line=second] {
2784
+ color: var(--foreground);
2785
+ }
2786
+ [data-presentation=welcome][data-text-line=first],
2787
+ [data-presentation=dashboard][data-text-line=second] {
2788
+ color: var(--muted-foreground);
2789
+ }