iron-cms 0.3.0 → 0.4.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. checksums.yaml +4 -4
  2. data/app/assets/builds/iron.css +1468 -1447
  3. data/app/assets/tailwind/iron/application.css +12 -1
  4. data/app/assets/tailwind/iron/components/button.css +110 -60
  5. data/app/assets/tailwind/iron/components/input.css +11 -9
  6. data/app/assets/tailwind/iron/components/sidebar.css +13 -17
  7. data/app/helpers/iron/application_helper.rb +1 -1
  8. data/app/helpers/iron/form_builder.rb +46 -0
  9. data/app/javascript/iron/application.js +2 -0
  10. data/app/models/iron/entry/web_publishable.rb +12 -12
  11. data/app/views/iron/block_definitions/_form.html.erb +1 -1
  12. data/app/views/iron/block_definitions/index.html.erb +1 -1
  13. data/app/views/iron/block_definitions/show.html.erb +3 -3
  14. data/app/views/iron/content_types/_form.html.erb +1 -1
  15. data/app/views/iron/content_types/index.html.erb +4 -7
  16. data/app/views/iron/content_types/show.html.erb +3 -9
  17. data/app/views/iron/contents/new.html.erb +2 -2
  18. data/app/views/iron/entries/_form.html.erb +45 -37
  19. data/app/views/iron/entries/edit.html.erb +2 -12
  20. data/app/views/iron/entries/fields/_block.html.erb +3 -4
  21. data/app/views/iron/entries/fields/_block_list.html.erb +26 -17
  22. data/app/views/iron/entries/fields/_reference_item.html.erb +2 -3
  23. data/app/views/iron/entries/fields/_text_field.html.erb +1 -1
  24. data/app/views/iron/entries/index.html.erb +1 -1
  25. data/app/views/iron/field_definitions/_field_definition.html.erb +1 -2
  26. data/app/views/iron/field_definitions/edit.html.erb +1 -7
  27. data/app/views/iron/field_definitions/layouts/_form.html.erb +1 -1
  28. data/app/views/iron/first_runs/show.html.erb +1 -1
  29. data/app/views/iron/locales/_form.html.erb +1 -1
  30. data/app/views/iron/locales/_locale.html.erb +1 -1
  31. data/app/views/iron/locales/index.html.erb +1 -1
  32. data/app/views/iron/passwords/edit.html.erb +31 -6
  33. data/app/views/iron/passwords/new.html.erb +19 -18
  34. data/app/views/iron/schemas/new.html.erb +2 -2
  35. data/app/views/iron/sessions/new.html.erb +27 -26
  36. data/app/views/iron/settings/show.html.erb +3 -4
  37. data/app/views/iron/shared/_collection_select.html.erb +31 -0
  38. data/app/views/iron/users/_form.html.erb +1 -1
  39. data/app/views/iron/users/new.html.erb +1 -1
  40. data/app/views/iron/users/show.html.erb +1 -4
  41. data/app/views/layouts/iron/_mobile_header.html.erb +10 -0
  42. data/app/views/layouts/iron/_sidebar.html.erb +26 -81
  43. data/app/views/layouts/iron/_sidebar_content.html.erb +36 -0
  44. data/app/views/layouts/iron/_sidebar_item.html.erb +1 -5
  45. data/app/views/layouts/iron/_user_menu.html.erb +26 -0
  46. data/app/views/layouts/iron/application.html.erb +11 -27
  47. data/app/views/layouts/iron/authentication.html.erb +4 -21
  48. data/config/importmap.rb +1 -0
  49. data/lib/iron/version.rb +1 -1
  50. metadata +6 -3
  51. data/app/helpers/iron/components/dropdown_helper.rb +0 -161
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -9,7 +9,6 @@
9
9
  monospace;
10
10
  --color-red-50: oklch(97.1% 0.013 17.38);
11
11
  --color-red-200: oklch(88.5% 0.062 18.334);
12
- --color-red-300: oklch(80.8% 0.114 19.571);
13
12
  --color-red-400: oklch(70.4% 0.191 22.216);
14
13
  --color-red-500: oklch(63.7% 0.237 25.331);
15
14
  --color-red-600: oklch(57.7% 0.245 27.325);
@@ -39,7 +38,9 @@
39
38
  --color-cyan-300: oklch(86.5% 0.127 207.078);
40
39
  --color-cyan-400: oklch(78.9% 0.154 211.53);
41
40
  --color-cyan-700: oklch(52% 0.105 223.128);
41
+ --color-sky-100: oklch(95.1% 0.026 236.824);
42
42
  --color-sky-300: oklch(82.8% 0.111 230.318);
43
+ --color-sky-400: oklch(74.6% 0.16 232.661);
43
44
  --color-sky-500: oklch(68.5% 0.169 237.323);
44
45
  --color-sky-600: oklch(58.8% 0.158 241.966);
45
46
  --color-sky-700: oklch(50% 0.134 242.749);
@@ -49,6 +50,7 @@
49
50
  --color-blue-700: oklch(48.8% 0.243 264.376);
50
51
  --color-indigo-400: oklch(67.3% 0.182 276.935);
51
52
  --color-indigo-500: oklch(58.5% 0.233 277.117);
53
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
52
54
  --color-indigo-700: oklch(45.7% 0.24 277.023);
53
55
  --color-violet-400: oklch(70.2% 0.183 293.541);
54
56
  --color-violet-500: oklch(60.6% 0.25 292.717);
@@ -63,7 +65,6 @@
63
65
  --color-rose-400: oklch(71.2% 0.194 13.428);
64
66
  --color-rose-700: oklch(51.4% 0.222 16.935);
65
67
  --color-gray-100: oklch(96.7% 0.003 264.542);
66
- --color-gray-200: oklch(92.8% 0.006 264.531);
67
68
  --color-gray-600: oklch(44.6% 0.03 256.802);
68
69
  --color-stone-50: oklch(98.5% 0.001 106.423);
69
70
  --color-stone-100: oklch(97% 0.001 106.424);
@@ -80,11 +81,10 @@
80
81
  --color-white: #fff;
81
82
  --spacing: 0.25rem;
82
83
  --container-2xs: 18rem;
84
+ --container-xs: 20rem;
83
85
  --container-sm: 24rem;
84
- --container-md: 28rem;
85
86
  --container-2xl: 42rem;
86
87
  --container-4xl: 56rem;
87
- --container-6xl: 72rem;
88
88
  --text-xs: 0.75rem;
89
89
  --text-xs--line-height: calc(1 / 0.75);
90
90
  --text-sm: 0.875rem;
@@ -106,10 +106,11 @@
106
106
  --radius-sm: 0.25rem;
107
107
  --radius-md: 0.375rem;
108
108
  --radius-lg: 0.5rem;
109
- --radius-xl: 0.75rem;
109
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
110
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
111
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
110
112
  --blur-xs: 4px;
111
113
  --blur-sm: 8px;
112
- --blur-xl: 24px;
113
114
  --default-transition-duration: 150ms;
114
115
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
115
116
  --default-font-family: var(--font-sans);
@@ -266,384 +267,445 @@
266
267
  }
267
268
  }
268
269
  @layer utilities {
269
- .visible {
270
- visibility: visible;
271
- }
272
- .btn {
273
- position: relative;
274
- isolation: isolate;
275
- display: inline-flex;
276
- align-items: center;
277
- justify-content: center;
278
- column-gap: calc(var(--spacing) * 2);
279
- border-radius: var(--radius-lg);
280
- border-style: var(--tw-border-style);
281
- border-width: 1px;
282
- font-size: var(--text-base);
283
- line-height: calc(var(--spacing) * 6);
284
- --tw-font-weight: var(--font-weight-semibold);
285
- font-weight: var(--font-weight-semibold);
286
- padding-inline: calc(calc(var(--spacing) * 3.5) - 1px);
287
- padding-block: calc(calc(var(--spacing) * 2.5) - 1px);
288
- @media (width >= 40rem) {
289
- padding-inline: calc(calc(var(--spacing) * 3) - 1px);
290
- }
291
- @media (width >= 40rem) {
292
- padding-block: calc(calc(var(--spacing) * 1.5) - 1px);
293
- }
294
- @media (width >= 40rem) {
295
- font-size: var(--text-sm);
296
- line-height: calc(var(--spacing) * 6);
297
- }
298
- &:focus {
299
- outline-style: var(--tw-outline-style);
300
- outline-width: 1px;
301
- }
302
- &:focus {
303
- outline-style: var(--tw-outline-style);
304
- outline-width: 2px;
305
- }
306
- &:focus {
307
- outline-offset: 2px;
308
- }
309
- &:focus {
310
- outline-color: var(--color-stone-400);
311
- }
312
- &:disabled {
313
- opacity: 50%;
314
- }
315
- & > *[data-slot="icon"] {
316
- margin-inline: calc(var(--spacing) * -0.5);
317
- margin-block: calc(var(--spacing) * 0.5);
318
- width: calc(var(--spacing) * 5);
319
- height: calc(var(--spacing) * 5);
320
- flex-shrink: 0;
321
- color: --btn-icon;
322
- @media (width >= 40rem) {
323
- margin-block: calc(var(--spacing) * 1);
324
- }
325
- @media (width >= 40rem) {
326
- width: calc(var(--spacing) * 4);
327
- height: calc(var(--spacing) * 4);
328
- }
329
- }
330
- &[data-variant="solid"], &:not([data-variant]) {
331
- border-color: transparent;
332
- background-color: var(--btn-bg);
333
- &::before {
334
- content: var(--tw-content);
335
- position: absolute;
336
- }
337
- &::before {
338
- content: var(--tw-content);
339
- inset: calc(var(--spacing) * 0);
340
- }
341
- &::before {
342
- content: var(--tw-content);
343
- z-index: calc(10 * -1);
344
- }
345
- &::before {
346
- content: var(--tw-content);
347
- border-radius: calc(var(--radius-lg) - 1px);
348
- }
349
- &::before {
350
- content: var(--tw-content);
351
- background-color: var(--btn-bg);
352
- }
353
- &::before {
354
- content: var(--tw-content);
355
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
356
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
357
- }
358
- &::after {
359
- content: var(--tw-content);
360
- position: absolute;
361
- }
362
- &::after {
363
- content: var(--tw-content);
364
- inset: calc(var(--spacing) * 0);
365
- }
366
- &::after {
367
- content: var(--tw-content);
368
- z-index: calc(10 * -1);
369
- }
370
- &::after {
371
- content: var(--tw-content);
372
- border-radius: calc(var(--radius-lg) - 1px);
373
- }
374
- &::after {
375
- content: var(--tw-content);
376
- --tw-shadow: inset 0 1px var(--tw-shadow-color, var(--theme--color-white/15%));
270
+ .button-secondary {
271
+ @layer components {
272
+ @layer components {
273
+ --tw-font-weight: var(--font-weight-semibold);
274
+ font-weight: var(--font-weight-semibold);
275
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
377
276
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
378
- }
379
- &:hover {
380
- @media (hover: hover) {
381
- &::after {
382
- content: var(--tw-content);
383
- background-color: var(--btn-hover-overlay);
384
- }
277
+ --tw-outline-style: none;
278
+ outline-style: none;
279
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
280
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
281
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
282
+ &:focus-visible {
283
+ outline-style: var(--tw-outline-style);
284
+ outline-width: 2px;
385
285
  }
386
- }
387
- &:active {
388
- &::after {
389
- content: var(--tw-content);
390
- background-color: var(--btn-hover-overlay);
286
+ &:focus-visible {
287
+ outline-offset: 2px;
391
288
  }
392
- }
393
- &:disabled {
394
- &::before {
395
- content: var(--tw-content);
396
- --tw-shadow: 0 0 #0000;
397
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
289
+ &:disabled {
290
+ pointer-events: none;
398
291
  }
399
- }
400
- &:disabled {
401
- &::after {
402
- content: var(--tw-content);
292
+ &:disabled {
293
+ opacity: 50%;
294
+ }
295
+ @media (prefers-color-scheme: dark) {
403
296
  --tw-shadow: 0 0 #0000;
404
297
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
405
298
  }
406
- }
407
- @media (prefers-color-scheme: dark) {
408
- border-color: color-mix(in srgb, #fff 5%, transparent);
409
- @supports (color: color-mix(in lab, red, red)) {
410
- border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
411
- }
412
- }
413
- @media (prefers-color-scheme: dark) {
414
- &::before {
415
- content: var(--tw-content);
416
- display: none;
417
- }
418
- }
419
- @media (prefers-color-scheme: dark) {
420
- &::after {
421
- content: var(--tw-content);
422
- inset: -1px;
423
- }
424
- }
425
- @media (prefers-color-scheme: dark) {
426
- &::after {
427
- content: var(--tw-content);
428
- border-radius: var(--radius-lg);
429
- }
430
- }
431
- }
432
- &[data-variant="outline"] {
433
- border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
434
- @supports (color: color-mix(in lab, red, red)) {
435
- border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
436
- }
437
- color: var(--color-stone-950);
438
- --btn-icon: var(--color-stone-500);
439
- &:hover {
440
- @media (hover: hover) {
441
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 2.5%, transparent);
442
- @supports (color: color-mix(in lab, red, red)) {
443
- background-color: color-mix(in oklab, var(--color-stone-950) 2.5%, transparent);
299
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
300
+ @layer components {
301
+ display: inline-flex;
302
+ align-items: center;
303
+ column-gap: calc(var(--spacing) * 1.5);
304
+ border-radius: var(--radius-md);
305
+ padding-inline: calc(var(--spacing) * 2.5);
306
+ padding-block: calc(var(--spacing) * 1.5);
307
+ font-size: var(--text-sm);
308
+ line-height: var(--tw-leading, var(--text-sm--line-height));
309
+ & > svg {
310
+ width: calc(var(--spacing) * 5);
311
+ height: calc(var(--spacing) * 5);
312
+ &:first-child {
313
+ margin-left: calc(var(--spacing) * -0.5);
314
+ }
315
+ &:last-child {
316
+ margin-right: calc(var(--spacing) * -0.5);
317
+ }
318
+ }
444
319
  }
445
320
  }
446
321
  }
322
+ background-color: var(--color-white);
323
+ color: var(--color-stone-900);
324
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
325
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
326
+ --tw-inset-ring-color: var(--color-stone-300);
447
327
  &:hover {
448
328
  @media (hover: hover) {
449
- --btn-icon: var(--color-stone-700);
450
- }
451
- }
452
- &:active {
453
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 2.5%, transparent);
454
- @supports (color: color-mix(in lab, red, red)) {
455
- background-color: color-mix(in oklab, var(--color-stone-950) 2.5%, transparent);
329
+ background-color: var(--color-stone-50);
456
330
  }
457
331
  }
458
- &:active {
459
- --btn-icon: var(--color-stone-700);
332
+ &:focus-visible {
333
+ outline-color: var(--color-stone-600);
460
334
  }
461
335
  @media (prefers-color-scheme: dark) {
462
- border-color: color-mix(in srgb, #fff 15%, transparent);
336
+ background-color: color-mix(in srgb, #fff 10%, transparent);
463
337
  @supports (color: color-mix(in lab, red, red)) {
464
- border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
338
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
465
339
  }
466
340
  }
467
341
  @media (prefers-color-scheme: dark) {
468
342
  color: var(--color-white);
469
343
  }
344
+ @media (prefers-color-scheme: dark) {
345
+ --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
346
+ @supports (color: color-mix(in lab, red, red)) {
347
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
348
+ }
349
+ }
470
350
  @media (prefers-color-scheme: dark) {
471
351
  &:hover {
472
352
  @media (hover: hover) {
473
- background-color: color-mix(in srgb, #fff 5%, transparent);
353
+ background-color: color-mix(in srgb, #fff 20%, transparent);
474
354
  @supports (color: color-mix(in lab, red, red)) {
475
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
355
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
476
356
  }
477
357
  }
478
358
  }
479
359
  }
480
360
  @media (prefers-color-scheme: dark) {
361
+ &:focus-visible {
362
+ outline-color: var(--color-stone-500);
363
+ }
364
+ }
365
+ }
366
+ }
367
+ .btn {
368
+ @layer components {
369
+ @layer components {
370
+ @layer components {
371
+ --tw-font-weight: var(--font-weight-semibold);
372
+ font-weight: var(--font-weight-semibold);
373
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
374
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
375
+ --tw-outline-style: none;
376
+ outline-style: none;
377
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
378
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
379
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
380
+ &:focus-visible {
381
+ outline-style: var(--tw-outline-style);
382
+ outline-width: 2px;
383
+ }
384
+ &:focus-visible {
385
+ outline-offset: 2px;
386
+ }
387
+ &:disabled {
388
+ pointer-events: none;
389
+ }
390
+ &:disabled {
391
+ opacity: 50%;
392
+ }
393
+ @media (prefers-color-scheme: dark) {
394
+ --tw-shadow: 0 0 #0000;
395
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
396
+ }
397
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
398
+ @layer components {
399
+ display: inline-flex;
400
+ align-items: center;
401
+ column-gap: calc(var(--spacing) * 1.5);
402
+ border-radius: var(--radius-md);
403
+ padding-inline: calc(var(--spacing) * 2.5);
404
+ padding-block: calc(var(--spacing) * 1.5);
405
+ font-size: var(--text-sm);
406
+ line-height: var(--tw-leading, var(--text-sm--line-height));
407
+ & > svg {
408
+ width: calc(var(--spacing) * 5);
409
+ height: calc(var(--spacing) * 5);
410
+ &:first-child {
411
+ margin-left: calc(var(--spacing) * -0.5);
412
+ }
413
+ &:last-child {
414
+ margin-right: calc(var(--spacing) * -0.5);
415
+ }
416
+ }
417
+ }
418
+ }
419
+ }
420
+ background-color: var(--color-sky-600);
421
+ color: var(--color-white);
481
422
  &:hover {
482
423
  @media (hover: hover) {
483
- --btn-icon: var(--color-stone-400);
424
+ background-color: var(--color-sky-500);
484
425
  }
485
426
  }
486
- }
487
- @media (prefers-color-scheme: dark) {
488
- &:active {
489
- background-color: color-mix(in srgb, #fff 5%, transparent);
490
- @supports (color: color-mix(in lab, red, red)) {
491
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
427
+ &:focus-visible {
428
+ outline-color: var(--color-sky-600);
429
+ }
430
+ @media (prefers-color-scheme: dark) {
431
+ background-color: var(--color-sky-600);
432
+ }
433
+ @media (prefers-color-scheme: dark) {
434
+ &:hover {
435
+ @media (hover: hover) {
436
+ background-color: var(--color-sky-400);
437
+ }
438
+ }
439
+ }
440
+ @media (prefers-color-scheme: dark) {
441
+ &:focus-visible {
442
+ outline-color: var(--color-sky-500);
492
443
  }
493
444
  }
494
445
  }
495
- @media (prefers-color-scheme: dark) {
496
- &:active {
497
- --btn-icon: var(--color-stone-400);
446
+ @layer components {
447
+ display: inline-flex;
448
+ align-items: center;
449
+ column-gap: calc(var(--spacing) * 1.5);
450
+ border-radius: var(--radius-md);
451
+ padding-inline: calc(var(--spacing) * 2.5);
452
+ padding-block: calc(var(--spacing) * 1.5);
453
+ font-size: var(--text-sm);
454
+ line-height: var(--tw-leading, var(--text-sm--line-height));
455
+ & > svg {
456
+ width: calc(var(--spacing) * 5);
457
+ height: calc(var(--spacing) * 5);
458
+ &:first-child {
459
+ margin-left: calc(var(--spacing) * -0.5);
460
+ }
461
+ &:last-child {
462
+ margin-right: calc(var(--spacing) * -0.5);
463
+ }
498
464
  }
499
465
  }
500
466
  }
501
- &[data-variant="plain"] {
502
- border-color: transparent;
503
- color: var(--color-stone-950);
504
- --btn-icon: var(--color-stone-500);
505
- &:hover {
506
- @media (hover: hover) {
507
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
508
- @supports (color: color-mix(in lab, red, red)) {
509
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
467
+ }
468
+ .button-destructive {
469
+ @layer components {
470
+ @layer components {
471
+ --tw-font-weight: var(--font-weight-semibold);
472
+ font-weight: var(--font-weight-semibold);
473
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
474
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
475
+ --tw-outline-style: none;
476
+ outline-style: none;
477
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
478
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
479
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
480
+ &:focus-visible {
481
+ outline-style: var(--tw-outline-style);
482
+ outline-width: 2px;
483
+ }
484
+ &:focus-visible {
485
+ outline-offset: 2px;
486
+ }
487
+ &:disabled {
488
+ pointer-events: none;
489
+ }
490
+ &:disabled {
491
+ opacity: 50%;
492
+ }
493
+ @media (prefers-color-scheme: dark) {
494
+ --tw-shadow: 0 0 #0000;
495
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
496
+ }
497
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
498
+ @layer components {
499
+ display: inline-flex;
500
+ align-items: center;
501
+ column-gap: calc(var(--spacing) * 1.5);
502
+ border-radius: var(--radius-md);
503
+ padding-inline: calc(var(--spacing) * 2.5);
504
+ padding-block: calc(var(--spacing) * 1.5);
505
+ font-size: var(--text-sm);
506
+ line-height: var(--tw-leading, var(--text-sm--line-height));
507
+ & > svg {
508
+ width: calc(var(--spacing) * 5);
509
+ height: calc(var(--spacing) * 5);
510
+ &:first-child {
511
+ margin-left: calc(var(--spacing) * -0.5);
512
+ }
513
+ &:last-child {
514
+ margin-right: calc(var(--spacing) * -0.5);
515
+ }
516
+ }
510
517
  }
511
518
  }
512
519
  }
520
+ background-color: var(--color-red-600);
521
+ color: var(--color-white);
513
522
  &:hover {
514
523
  @media (hover: hover) {
515
- --btn-icon: var(--color-stone-700);
516
- }
517
- }
518
- &:active {
519
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
520
- @supports (color: color-mix(in lab, red, red)) {
521
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
524
+ background-color: var(--color-red-500);
522
525
  }
523
526
  }
524
- &:active {
525
- --btn-icon: var(--color-stone-700);
527
+ &:focus-visible {
528
+ outline-color: var(--color-red-600);
526
529
  }
527
530
  @media (prefers-color-scheme: dark) {
528
- color: var(--color-white);
531
+ background-color: var(--color-red-500);
529
532
  }
530
533
  @media (prefers-color-scheme: dark) {
531
534
  &:hover {
532
535
  @media (hover: hover) {
533
- background-color: color-mix(in srgb, #fff 10%, transparent);
534
- @supports (color: color-mix(in lab, red, red)) {
535
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
536
- }
536
+ background-color: var(--color-red-400);
537
537
  }
538
538
  }
539
539
  }
540
540
  @media (prefers-color-scheme: dark) {
541
- &:hover {
542
- @media (hover: hover) {
543
- --btn-icon: var(--color-stone-400);
544
- }
541
+ &:focus-visible {
542
+ outline-color: var(--color-red-500);
545
543
  }
546
544
  }
547
- @media (prefers-color-scheme: dark) {
548
- &:active {
549
- background-color: color-mix(in srgb, #fff 10%, transparent);
550
- @supports (color: color-mix(in lab, red, red)) {
551
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
552
- }
545
+ }
546
+ }
547
+ .button-primary {
548
+ @layer components {
549
+ @layer components {
550
+ --tw-font-weight: var(--font-weight-semibold);
551
+ font-weight: var(--font-weight-semibold);
552
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
553
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
554
+ --tw-outline-style: none;
555
+ outline-style: none;
556
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
557
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
558
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
559
+ &:focus-visible {
560
+ outline-style: var(--tw-outline-style);
561
+ outline-width: 2px;
553
562
  }
554
- }
555
- @media (prefers-color-scheme: dark) {
556
- &:active {
557
- --btn-icon: var(--color-stone-400);
563
+ &:focus-visible {
564
+ outline-offset: 2px;
565
+ }
566
+ &:disabled {
567
+ pointer-events: none;
568
+ }
569
+ &:disabled {
570
+ opacity: 50%;
571
+ }
572
+ @media (prefers-color-scheme: dark) {
573
+ --tw-shadow: 0 0 #0000;
574
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
575
+ }
576
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
577
+ @layer components {
578
+ display: inline-flex;
579
+ align-items: center;
580
+ column-gap: calc(var(--spacing) * 1.5);
581
+ border-radius: var(--radius-md);
582
+ padding-inline: calc(var(--spacing) * 2.5);
583
+ padding-block: calc(var(--spacing) * 1.5);
584
+ font-size: var(--text-sm);
585
+ line-height: var(--tw-leading, var(--text-sm--line-height));
586
+ & > svg {
587
+ width: calc(var(--spacing) * 5);
588
+ height: calc(var(--spacing) * 5);
589
+ &:first-child {
590
+ margin-left: calc(var(--spacing) * -0.5);
591
+ }
592
+ &:last-child {
593
+ margin-right: calc(var(--spacing) * -0.5);
594
+ }
595
+ }
596
+ }
558
597
  }
559
598
  }
560
- }
561
- &[data-color="primary"], &:not([data-color]) {
599
+ background-color: var(--color-sky-600);
562
600
  color: var(--color-white);
563
- --btn-bg: var(--color-stone-600);
564
- --btn-border: color-mix(in srgb, oklch(37.4% 0.01 67.558) 90%, transparent);
565
- @supports (color: color-mix(in lab, red, red)) {
566
- --btn-border: color-mix(in oklab, var(--color-stone-700) 90%, transparent);
567
- }
568
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
569
- @supports (color: color-mix(in lab, red, red)) {
570
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
571
- }
572
- --btn-icon: var(--color-stone-400);
573
601
  &:hover {
574
602
  @media (hover: hover) {
575
- --btn-icon: var(--color-stone-300);
603
+ background-color: var(--color-sky-500);
576
604
  }
577
605
  }
578
- &:active {
579
- --btn-icon: var(--color-stone-300);
580
- }
581
- }
582
- &[data-color="accent"] {
583
- color: var(--color-white);
584
- --btn-bg: var(--color-sky-500);
585
- --btn-border: color-mix(in srgb, oklch(58.8% 0.158 241.966) 80%, transparent);
586
- @supports (color: color-mix(in lab, red, red)) {
587
- --btn-border: color-mix(in oklab, var(--color-sky-600) 80%, transparent);
606
+ &:focus-visible {
607
+ outline-color: var(--color-sky-600);
588
608
  }
589
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
590
- @supports (color: color-mix(in lab, red, red)) {
591
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
609
+ @media (prefers-color-scheme: dark) {
610
+ background-color: var(--color-sky-600);
592
611
  }
593
- --btn-icon: color-mix(in srgb, #fff 60%, transparent);
594
- @supports (color: color-mix(in lab, red, red)) {
595
- --btn-icon: color-mix(in oklab, var(--color-white) 60%, transparent);
612
+ @media (prefers-color-scheme: dark) {
613
+ &:hover {
614
+ @media (hover: hover) {
615
+ background-color: var(--color-sky-400);
616
+ }
617
+ }
596
618
  }
597
- &:hover {
598
- @media (hover: hover) {
599
- --btn-icon: color-mix(in srgb, #fff 80%, transparent);
600
- @supports (color: color-mix(in lab, red, red)) {
601
- --btn-icon: color-mix(in oklab, var(--color-white) 80%, transparent);
619
+ @media (prefers-color-scheme: dark) {
620
+ &:focus-visible {
621
+ outline-color: var(--color-sky-500);
622
+ }
623
+ }
624
+ }
625
+ }
626
+ .button-ghost {
627
+ @layer components {
628
+ @layer components {
629
+ --tw-font-weight: var(--font-weight-semibold);
630
+ font-weight: var(--font-weight-semibold);
631
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
632
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
633
+ --tw-outline-style: none;
634
+ outline-style: none;
635
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
636
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
637
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
638
+ &:focus-visible {
639
+ outline-style: var(--tw-outline-style);
640
+ outline-width: 2px;
641
+ }
642
+ &:focus-visible {
643
+ outline-offset: 2px;
644
+ }
645
+ &:disabled {
646
+ pointer-events: none;
647
+ }
648
+ &:disabled {
649
+ opacity: 50%;
650
+ }
651
+ @media (prefers-color-scheme: dark) {
652
+ --tw-shadow: 0 0 #0000;
653
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
654
+ }
655
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
656
+ @layer components {
657
+ display: inline-flex;
658
+ align-items: center;
659
+ column-gap: calc(var(--spacing) * 1.5);
660
+ border-radius: var(--radius-md);
661
+ padding-inline: calc(var(--spacing) * 2.5);
662
+ padding-block: calc(var(--spacing) * 1.5);
663
+ font-size: var(--text-sm);
664
+ line-height: var(--tw-leading, var(--text-sm--line-height));
665
+ & > svg {
666
+ width: calc(var(--spacing) * 5);
667
+ height: calc(var(--spacing) * 5);
668
+ &:first-child {
669
+ margin-left: calc(var(--spacing) * -0.5);
670
+ }
671
+ &:last-child {
672
+ margin-right: calc(var(--spacing) * -0.5);
673
+ }
674
+ }
602
675
  }
603
676
  }
604
677
  }
605
- &:active {
606
- --btn-icon: color-mix(in srgb, #fff 80%, transparent);
607
- @supports (color: color-mix(in lab, red, red)) {
608
- --btn-icon: color-mix(in oklab, var(--color-white) 80%, transparent);
678
+ color: var(--color-stone-700);
679
+ &:hover {
680
+ @media (hover: hover) {
681
+ background-color: var(--color-stone-100);
609
682
  }
610
683
  }
611
- }
612
- &[data-color="destructive"] {
613
- color: var(--color-white);
614
- --btn-bg: var(--color-red-600);
615
- --btn-border: color-mix(in srgb, oklch(50.5% 0.213 27.518) 90%, transparent);
616
- @supports (color: color-mix(in lab, red, red)) {
617
- --btn-border: color-mix(in oklab, var(--color-red-700) 90%, transparent);
684
+ &:focus-visible {
685
+ outline-color: var(--color-stone-600);
618
686
  }
619
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
620
- @supports (color: color-mix(in lab, red, red)) {
621
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
687
+ @media (prefers-color-scheme: dark) {
688
+ color: var(--color-white);
622
689
  }
623
- --btn-icon: var(--color-red-300);
624
- &:hover {
625
- @media (hover: hover) {
626
- --btn-icon: var(--color-red-200);
690
+ @media (prefers-color-scheme: dark) {
691
+ &:hover {
692
+ @media (hover: hover) {
693
+ background-color: color-mix(in srgb, #fff 10%, transparent);
694
+ @supports (color: color-mix(in lab, red, red)) {
695
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
696
+ }
697
+ }
627
698
  }
628
699
  }
629
- &:active {
630
- --btn-icon: var(--color-red-200);
700
+ @media (prefers-color-scheme: dark) {
701
+ &:focus-visible {
702
+ outline-color: var(--color-stone-500);
703
+ }
631
704
  }
632
705
  }
633
706
  }
634
- .btn-touch-target {
635
- position: absolute;
636
- top: calc(1/2 * 100%);
637
- left: calc(1/2 * 100%);
638
- width: max(100%, 2.75rem);
639
- height: max(100%, 2.75rem);
640
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
641
- translate: var(--tw-translate-x) var(--tw-translate-y);
642
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
643
- translate: var(--tw-translate-x) var(--tw-translate-y);
644
- @media (pointer:fine) {
645
- display: none;
646
- }
707
+ .visible {
708
+ visibility: visible;
647
709
  }
648
710
  .sr-only {
649
711
  position: absolute;
@@ -652,7 +714,7 @@
652
714
  padding: 0;
653
715
  margin: -1px;
654
716
  overflow: hidden;
655
- clip: rect(0, 0, 0, 0);
717
+ clip-path: inset(50%);
656
718
  white-space: nowrap;
657
719
  border-width: 0;
658
720
  }
@@ -661,60 +723,58 @@
661
723
  display: block;
662
724
  width: 100%;
663
725
  appearance: none;
664
- border-radius: var(--radius-lg);
726
+ border-radius: var(--radius-md);
665
727
  padding-inline: calc(var(--spacing) * 3);
666
- padding-block: calc(var(--spacing) * 2);
667
- @media (width >= 40rem) {
668
- padding-inline: calc(var(--spacing) * 2.5);
669
- }
670
- @media (width >= 40rem) {
671
- padding-block: calc(var(--spacing) * 1.5);
672
- }
728
+ padding-block: calc(var(--spacing) * 1.5);
673
729
  font-size: var(--text-base);
674
- line-height: calc(var(--spacing) * 6);
730
+ line-height: var(--tw-leading, var(--text-base--line-height));
675
731
  @media (width >= 40rem) {
676
732
  font-size: var(--text-sm);
677
733
  line-height: calc(var(--spacing) * 6);
678
734
  }
679
- color: var(--color-stone-100);
735
+ color: var(--color-stone-900);
680
736
  &::placeholder {
681
- color: var(--color-stone-500);
737
+ color: var(--color-stone-400);
682
738
  }
683
- border-style: var(--tw-border-style);
684
- border-width: 1px;
685
- border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
686
- @supports (color: color-mix(in lab, red, red)) {
687
- border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
739
+ outline-style: var(--tw-outline-style);
740
+ outline-width: 1px;
741
+ outline-offset: calc(1px * -1);
742
+ outline-color: var(--color-stone-300);
743
+ background-color: var(--color-white);
744
+ &:focus {
745
+ outline-style: var(--tw-outline-style);
746
+ outline-width: 2px;
688
747
  }
689
- @media (prefers-color-scheme: dark) {
690
- border-color: color-mix(in srgb, #fff 10%, transparent);
691
- @supports (color: color-mix(in lab, red, red)) {
692
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
693
- }
748
+ &:focus {
749
+ outline-offset: calc(2px * -1);
750
+ }
751
+ &:focus {
752
+ outline-color: var(--color-indigo-600);
694
753
  }
695
- background-color: transparent;
696
754
  @media (prefers-color-scheme: dark) {
697
755
  background-color: color-mix(in srgb, #fff 5%, transparent);
698
756
  @supports (color: color-mix(in lab, red, red)) {
699
757
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
700
758
  }
701
759
  }
702
- &:focus {
703
- outline-style: var(--tw-outline-style);
704
- outline-width: 1px;
705
- }
706
- &:focus {
707
- outline-style: var(--tw-outline-style);
708
- outline-width: 2px;
760
+ @media (prefers-color-scheme: dark) {
761
+ color: var(--color-white);
709
762
  }
710
- &:focus {
711
- outline-color: var(--color-stone-500);
763
+ @media (prefers-color-scheme: dark) {
764
+ outline-color: color-mix(in srgb, #fff 10%, transparent);
765
+ @supports (color: color-mix(in lab, red, red)) {
766
+ outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
767
+ }
712
768
  }
713
- &:disabled {
714
- border-color: var(--color-stone-600);
769
+ @media (prefers-color-scheme: dark) {
770
+ &::placeholder {
771
+ color: var(--color-stone-500);
772
+ }
715
773
  }
716
- &:disabled {
717
- background-color: var(--color-stone-700);
774
+ @media (prefers-color-scheme: dark) {
775
+ &:focus {
776
+ outline-color: var(--color-indigo-500);
777
+ }
718
778
  }
719
779
  &:disabled {
720
780
  opacity: 50%;
@@ -896,15 +956,24 @@
896
956
  .static {
897
957
  position: static;
898
958
  }
959
+ .sticky {
960
+ position: sticky;
961
+ }
962
+ .inset-0 {
963
+ inset: calc(var(--spacing) * 0);
964
+ }
899
965
  .inset-y-0 {
900
966
  inset-block: calc(var(--spacing) * 0);
901
967
  }
902
- .inset-y-2 {
903
- inset-block: calc(var(--spacing) * 2);
968
+ .top-0 {
969
+ top: calc(var(--spacing) * 0);
904
970
  }
905
971
  .top-1\/2 {
906
972
  top: calc(1/2 * 100%);
907
973
  }
974
+ .right-0 {
975
+ right: calc(var(--spacing) * 0);
976
+ }
908
977
  .right-2 {
909
978
  right: calc(var(--spacing) * 2);
910
979
  }
@@ -917,487 +986,63 @@
917
986
  .bottom-8 {
918
987
  bottom: calc(var(--spacing) * 8);
919
988
  }
920
- .-left-4 {
921
- left: calc(var(--spacing) * -4);
922
- }
923
- .left-0 {
924
- left: calc(var(--spacing) * 0);
925
- }
926
989
  .left-2 {
927
990
  left: calc(var(--spacing) * 2);
928
991
  }
929
- .dropdown {
930
- position-area: top span-right;
931
- position-anchor: var(--popover-anchor);
932
- margin: calc(var(--spacing) * 0);
933
- min-width: calc(var(--spacing) * 64);
934
- padding: calc(var(--spacing) * 0);
935
- isolation: isolate;
936
- width: max-content;
937
- border-radius: var(--radius-xl);
938
- padding: calc(var(--spacing) * 1);
939
- outline-style: var(--tw-outline-style);
940
- outline-width: 1px;
941
- outline-style: var(--tw-outline-style);
942
- outline-width: 1px;
943
- outline-color: transparent;
944
- &:focus {
945
- --tw-outline-style: none;
946
- outline-style: none;
947
- @media (forced-colors: active) {
948
- outline: 2px solid transparent;
949
- outline-offset: 2px;
950
- }
951
- }
952
- overflow-y: auto;
953
- background-color: color-mix(in srgb, #fff 75%, transparent);
954
- @supports (color: color-mix(in lab, red, red)) {
955
- background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
956
- }
957
- --tw-backdrop-blur: blur(var(--blur-xl));
958
- -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
959
- backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
960
- @media (prefers-color-scheme: dark) {
961
- background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 75%, transparent);
962
- @supports (color: color-mix(in lab, red, red)) {
963
- background-color: color-mix(in oklab, var(--color-stone-800) 75%, transparent);
964
- }
965
- }
966
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
967
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
968
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
969
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
970
- --tw-ring-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
971
- @supports (color: color-mix(in lab, red, red)) {
972
- --tw-ring-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
973
- }
974
- @media (prefers-color-scheme: dark) {
975
- --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
976
- @supports (color: color-mix(in lab, red, red)) {
977
- --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
978
- }
979
- }
980
- @media (prefers-color-scheme: dark) {
981
- --tw-ring-inset: inset;
982
- }
992
+ .left-full {
993
+ left: 100%;
983
994
  }
984
- .isolate {
985
- isolation: isolate;
995
+ .z-40 {
996
+ z-index: 40;
986
997
  }
987
998
  .z-50 {
988
999
  z-index: 50;
989
1000
  }
990
- .dropdown-divider {
991
- grid-column: 1 / -1;
992
- margin-inline: calc(var(--spacing) * 3.5);
993
- margin-block: calc(var(--spacing) * 1);
994
- height: 1px;
995
- border-style: var(--tw-border-style);
996
- border-width: 0px;
997
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
998
- @supports (color: color-mix(in lab, red, red)) {
999
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
1000
- }
1001
- @media (width >= 40rem) {
1002
- margin-inline: calc(var(--spacing) * 3);
1003
- }
1004
- @media (prefers-color-scheme: dark) {
1005
- background-color: color-mix(in srgb, #fff 10%, transparent);
1006
- @supports (color: color-mix(in lab, red, red)) {
1007
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1008
- }
1009
- }
1010
- @media (forced-colors: active) {
1011
- background-color: CanvasText;
1012
- }
1013
- }
1014
- .col-span-full {
1015
- grid-column: 1 / -1;
1001
+ .col-start-1 {
1002
+ grid-column-start: 1;
1016
1003
  }
1017
- .dropdown-item {
1018
- cursor: default;
1019
- border-radius: var(--radius-lg);
1020
- padding-inline: calc(var(--spacing) * 3.5);
1021
- padding-block: calc(var(--spacing) * 2.5);
1022
- &:focus {
1023
- --tw-outline-style: none;
1024
- outline-style: none;
1025
- @media (forced-colors: active) {
1026
- outline: 2px solid transparent;
1027
- outline-offset: 2px;
1028
- }
1029
- }
1030
- @media (width >= 40rem) {
1031
- padding-inline: calc(var(--spacing) * 3);
1032
- }
1033
- @media (width >= 40rem) {
1034
- padding-block: calc(var(--spacing) * 1.5);
1035
- }
1036
- text-align: left;
1037
- font-size: var(--text-base);
1038
- line-height: calc(var(--spacing) * 6);
1039
- color: var(--color-stone-950);
1040
- @media (width >= 40rem) {
1041
- font-size: var(--text-sm);
1042
- line-height: calc(var(--spacing) * 6);
1043
- }
1044
- @media (prefers-color-scheme: dark) {
1045
- color: var(--color-white);
1046
- }
1047
- @media (forced-colors: active) {
1048
- color: CanvasText;
1049
- }
1050
- &:hover {
1051
- @media (hover: hover) {
1052
- background-color: var(--color-blue-500);
1053
- }
1054
- }
1055
- &:focus {
1056
- background-color: var(--color-blue-500);
1057
- }
1058
- &:focus {
1059
- color: var(--color-white);
1060
- }
1061
- &:disabled {
1062
- opacity: 50%;
1063
- }
1064
- forced-color-adjust: none;
1065
- @media (forced-colors: active) {
1066
- &:focus {
1067
- background-color: Highlight;
1068
- }
1069
- }
1070
- @media (forced-colors: active) {
1071
- &:focus {
1072
- color: HighlightText;
1073
- }
1074
- }
1075
- @media (forced-colors: active) {
1076
- &:focus {
1077
- :is(& > *) {
1078
- &[data-slot="icon"] {
1079
- color: HighlightText;
1080
- }
1081
- }
1082
- }
1083
- }
1084
- display: flex;
1085
- align-items: center;
1086
- :is(& > *) {
1087
- &[data-slot="icon"] {
1088
- grid-column-start: 1;
1089
- }
1090
- }
1091
- :is(& > *) {
1092
- &[data-slot="icon"] {
1093
- grid-row-start: 1;
1094
- }
1095
- }
1096
- :is(& > *) {
1097
- &[data-slot="icon"] {
1098
- margin-right: calc(var(--spacing) * 2.5);
1099
- }
1100
- }
1101
- :is(& > *) {
1102
- &[data-slot="icon"] {
1103
- margin-left: calc(var(--spacing) * -0.5);
1104
- }
1105
- }
1106
- :is(& > *) {
1107
- &[data-slot="icon"] {
1108
- width: calc(var(--spacing) * 5);
1109
- height: calc(var(--spacing) * 5);
1110
- }
1111
- }
1112
- @media (width >= 40rem) {
1113
- :is(& > *) {
1114
- &[data-slot="icon"] {
1115
- margin-right: calc(var(--spacing) * 2);
1116
- }
1117
- }
1118
- }
1119
- @media (width >= 40rem) {
1120
- :is(& > *) {
1121
- &[data-slot="icon"] {
1122
- width: calc(var(--spacing) * 4);
1123
- height: calc(var(--spacing) * 4);
1124
- }
1125
- }
1126
- }
1127
- :is(& > *) {
1128
- &[data-slot="icon"] {
1129
- color: var(--color-stone-500);
1130
- }
1131
- }
1132
- &:hover {
1133
- @media (hover: hover) {
1134
- :is(& > *) {
1135
- &[data-slot="icon"] {
1136
- color: var(--color-white);
1137
- }
1138
- }
1139
- }
1140
- }
1141
- &:focus {
1142
- :is(& > *) {
1143
- &[data-slot="icon"] {
1144
- color: var(--color-white);
1145
- }
1146
- }
1147
- }
1148
- @media (prefers-color-scheme: dark) {
1149
- :is(& > *) {
1150
- &[data-slot="icon"] {
1151
- color: var(--color-stone-400);
1152
- }
1153
- }
1154
- }
1155
- @media (prefers-color-scheme: dark) {
1156
- &:focus {
1157
- :is(& > *) {
1158
- &[data-slot="icon"] {
1159
- color: var(--color-white);
1160
- }
1161
- }
1162
- }
1163
- }
1164
- :is(& > *) {
1165
- &[data-slot="avatar"] {
1166
- margin-right: calc(var(--spacing) * 2.5);
1167
- }
1168
- }
1169
- :is(& > *) {
1170
- &[data-slot="avatar"] {
1171
- margin-left: calc(var(--spacing) * -1);
1172
- }
1173
- }
1174
- :is(& > *) {
1175
- &[data-slot="avatar"] {
1176
- width: calc(var(--spacing) * 6);
1177
- height: calc(var(--spacing) * 6);
1178
- }
1179
- }
1180
- @media (width >= 40rem) {
1181
- :is(& > *) {
1182
- &[data-slot="avatar"] {
1183
- margin-right: calc(var(--spacing) * 2);
1184
- }
1185
- }
1186
- }
1187
- @media (width >= 40rem) {
1188
- :is(& > *) {
1189
- &[data-slot="avatar"] {
1190
- width: calc(var(--spacing) * 5);
1191
- height: calc(var(--spacing) * 5);
1192
- }
1193
- }
1194
- }
1004
+ .row-start-1 {
1005
+ grid-row-start: 1;
1195
1006
  }
1196
1007
  .container {
1197
1008
  width: 100%;
1198
1009
  @media (width >= 40rem) {
1199
- max-width: 40rem;
1200
- }
1201
- @media (width >= 48rem) {
1202
- max-width: 48rem;
1203
- }
1204
- @media (width >= 64rem) {
1205
- max-width: 64rem;
1206
- }
1207
- @media (width >= 80rem) {
1208
- max-width: 80rem;
1209
- }
1210
- @media (width >= 96rem) {
1211
- max-width: 96rem;
1212
- }
1213
- }
1214
- .sidebar-item {
1215
- display: flex;
1216
- width: 100%;
1217
- align-items: center;
1218
- gap: calc(var(--spacing) * 3);
1219
- border-radius: var(--radius-lg);
1220
- padding-inline: calc(var(--spacing) * 2);
1221
- padding-block: calc(var(--spacing) * 2.5);
1222
- text-align: left;
1223
- font-size: var(--text-base);
1224
- line-height: calc(var(--spacing) * 6);
1225
- --tw-font-weight: var(--font-weight-medium);
1226
- font-weight: var(--font-weight-medium);
1227
- color: var(--color-stone-950);
1228
- @media (width >= 40rem) {
1229
- padding-block: calc(var(--spacing) * 2);
1230
- }
1231
- @media (width >= 40rem) {
1232
- font-size: var(--text-sm);
1233
- line-height: calc(var(--spacing) * 5);
1234
- }
1235
- :is(& > *) {
1236
- &[data-slot="icon"] {
1237
- width: calc(var(--spacing) * 6);
1238
- height: calc(var(--spacing) * 6);
1239
- }
1240
- }
1241
- :is(& > *) {
1242
- &[data-slot="icon"] {
1243
- flex-shrink: 0;
1244
- }
1245
- }
1246
- @media (width >= 40rem) {
1247
- :is(& > *) {
1248
- &[data-slot="icon"] {
1249
- width: calc(var(--spacing) * 5);
1250
- height: calc(var(--spacing) * 5);
1251
- }
1252
- }
1253
- }
1254
- :is(& > *) {
1255
- &:last-child {
1256
- &[data-slot="icon"] {
1257
- margin-left: auto;
1258
- }
1259
- }
1260
- }
1261
- :is(& > *) {
1262
- &:last-child {
1263
- &[data-slot="icon"] {
1264
- width: calc(var(--spacing) * 5);
1265
- height: calc(var(--spacing) * 5);
1266
- }
1267
- }
1268
- }
1269
- @media (width >= 40rem) {
1270
- :is(& > *) {
1271
- &:last-child {
1272
- &[data-slot="icon"] {
1273
- width: calc(var(--spacing) * 4);
1274
- height: calc(var(--spacing) * 4);
1275
- }
1276
- }
1277
- }
1278
- }
1279
- :is(& > *) {
1280
- &[data-slot="avatar"] {
1281
- margin: calc(var(--spacing) * -0.5);
1282
- }
1283
- }
1284
- :is(& > *) {
1285
- &[data-slot="avatar"] {
1286
- width: calc(var(--spacing) * 7);
1287
- height: calc(var(--spacing) * 7);
1288
- }
1289
- }
1290
- :is(& > *) {
1291
- &[data-slot="avatar"] {
1292
- --ring-opacity: 10%;
1293
- }
1294
- }
1295
- @media (width >= 40rem) {
1296
- :is(& > *) {
1297
- &[data-slot="avatar"] {
1298
- width: calc(var(--spacing) * 6);
1299
- height: calc(var(--spacing) * 6);
1300
- }
1301
- }
1302
- }
1303
- &:hover {
1304
- @media (hover: hover) {
1305
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
1306
- @supports (color: color-mix(in lab, red, red)) {
1307
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
1308
- }
1309
- }
1310
- }
1311
- &:active {
1312
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
1313
- @supports (color: color-mix(in lab, red, red)) {
1314
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
1315
- }
1316
- }
1317
- &:active {
1318
- :is(& > *) {
1319
- &[data-slot="icon"] {
1320
- fill: var(--color-stone-950);
1321
- }
1322
- }
1323
- }
1324
- &[data-current] {
1325
- :is(& > *) {
1326
- &[data-slot="icon"] {
1327
- background-color: transparent;
1328
- }
1329
- }
1330
- }
1331
- @media (prefers-color-scheme: dark) {
1332
- color: var(--color-white);
1333
- }
1334
- @media (prefers-color-scheme: dark) {
1335
- :is(& > *) {
1336
- &[data-slot="icon"] {
1337
- color: var(--color-stone-400);
1338
- }
1339
- }
1340
- }
1341
- @media (prefers-color-scheme: dark) {
1342
- &:hover {
1343
- @media (hover: hover) {
1344
- background-color: color-mix(in srgb, #fff 5%, transparent);
1345
- @supports (color: color-mix(in lab, red, red)) {
1346
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1347
- }
1348
- }
1349
- }
1350
- }
1351
- @media (prefers-color-scheme: dark) {
1352
- &:hover {
1353
- @media (hover: hover) {
1354
- :is(& > *) {
1355
- &[data-slot="icon"] {
1356
- color: var(--color-white);
1357
- }
1358
- }
1359
- }
1360
- }
1010
+ max-width: 40rem;
1361
1011
  }
1362
- @media (prefers-color-scheme: dark) {
1363
- &:active {
1364
- background-color: color-mix(in srgb, #fff 5%, transparent);
1365
- @supports (color: color-mix(in lab, red, red)) {
1366
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1367
- }
1368
- }
1012
+ @media (width >= 48rem) {
1013
+ max-width: 48rem;
1369
1014
  }
1370
- @media (prefers-color-scheme: dark) {
1371
- &:active {
1372
- :is(& > *) {
1373
- &[data-slot="icon"] {
1374
- color: var(--color-white);
1375
- }
1376
- }
1377
- }
1015
+ @media (width >= 64rem) {
1016
+ max-width: 64rem;
1378
1017
  }
1379
- @media (prefers-color-scheme: dark) {
1380
- &[data-current] {
1381
- :is(& > *) {
1382
- &[data-slot="icon"] {
1383
- color: var(--color-white);
1384
- }
1385
- }
1386
- }
1018
+ @media (width >= 80rem) {
1019
+ max-width: 80rem;
1387
1020
  }
1021
+ @media (width >= 96rem) {
1022
+ max-width: 96rem;
1023
+ }
1024
+ }
1025
+ .-m-2\.5 {
1026
+ margin: calc(var(--spacing) * -2.5);
1388
1027
  }
1389
- .mx-3\.5 {
1390
- margin-inline: calc(var(--spacing) * 3.5);
1028
+ .-mx-2 {
1029
+ margin-inline: calc(var(--spacing) * -2);
1030
+ }
1031
+ .-mx-6 {
1032
+ margin-inline: calc(var(--spacing) * -6);
1033
+ }
1034
+ .mx-2 {
1035
+ margin-inline: calc(var(--spacing) * 2);
1391
1036
  }
1392
1037
  .mx-auto {
1393
1038
  margin-inline: auto;
1394
1039
  }
1395
- .my-1 {
1396
- margin-block: calc(var(--spacing) * 1);
1397
- }
1398
1040
  .my-2 {
1399
1041
  margin-block: calc(var(--spacing) * 2);
1400
1042
  }
1043
+ .my-6 {
1044
+ margin-block: calc(var(--spacing) * 6);
1045
+ }
1401
1046
  .prose {
1402
1047
  color: var(--tw-prose-body);
1403
1048
  max-width: 65ch;
@@ -1483,7 +1128,7 @@
1483
1128
  }
1484
1129
  :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1485
1130
  border-color: var(--tw-prose-hr);
1486
- border-top-width: 1;
1131
+ border-top-width: 1px;
1487
1132
  margin-top: 3em;
1488
1133
  margin-bottom: 3em;
1489
1134
  }
@@ -1568,7 +1213,7 @@
1568
1213
  font-weight: 500;
1569
1214
  font-family: inherit;
1570
1215
  color: var(--tw-prose-kbd);
1571
- box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
1216
+ box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
1572
1217
  font-size: 0.875em;
1573
1218
  border-radius: 0.3125rem;
1574
1219
  padding-top: 0.1875em;
@@ -1704,7 +1349,7 @@
1704
1349
  --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
1705
1350
  --tw-prose-captions: oklch(55.1% 0.027 264.364);
1706
1351
  --tw-prose-kbd: oklch(21% 0.034 264.665);
1707
- --tw-prose-kbd-shadows: NaN NaN NaN;
1352
+ --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
1708
1353
  --tw-prose-code: oklch(21% 0.034 264.665);
1709
1354
  --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
1710
1355
  --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
@@ -1722,7 +1367,7 @@
1722
1367
  --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
1723
1368
  --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
1724
1369
  --tw-prose-invert-kbd: #fff;
1725
- --tw-prose-invert-kbd-shadows: 255 255 255;
1370
+ --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
1726
1371
  --tw-prose-invert-code: #fff;
1727
1372
  --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
1728
1373
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
@@ -1881,11 +1526,45 @@
1881
1526
  .mt-8 {
1882
1527
  margin-top: calc(var(--spacing) * 8);
1883
1528
  }
1529
+ .mt-10 {
1530
+ margin-top: calc(var(--spacing) * 10);
1531
+ }
1532
+ .mt-auto {
1533
+ margin-top: auto;
1534
+ }
1535
+ .button-sm {
1536
+ @layer components {
1537
+ display: inline-flex;
1538
+ align-items: center;
1539
+ column-gap: calc(var(--spacing) * 1);
1540
+ border-radius: var(--radius-sm);
1541
+ padding-inline: calc(var(--spacing) * 2);
1542
+ padding-block: calc(var(--spacing) * 1);
1543
+ font-size: var(--text-sm);
1544
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1545
+ & > svg {
1546
+ width: calc(var(--spacing) * 5);
1547
+ height: calc(var(--spacing) * 5);
1548
+ &:first-child {
1549
+ margin-left: calc(var(--spacing) * -0.5);
1550
+ }
1551
+ &:last-child {
1552
+ margin-right: calc(var(--spacing) * -0.5);
1553
+ }
1554
+ }
1555
+ }
1556
+ }
1557
+ .-mr-1 {
1558
+ margin-right: calc(var(--spacing) * -1);
1559
+ }
1884
1560
  .mr-2 {
1885
1561
  margin-right: calc(var(--spacing) * 2);
1886
1562
  }
1887
- .mb-1 {
1888
- margin-bottom: calc(var(--spacing) * 1);
1563
+ .mr-3 {
1564
+ margin-right: calc(var(--spacing) * 3);
1565
+ }
1566
+ .mr-16 {
1567
+ margin-right: calc(var(--spacing) * 16);
1889
1568
  }
1890
1569
  .mb-2 {
1891
1570
  margin-bottom: calc(var(--spacing) * 2);
@@ -1905,12 +1584,121 @@
1905
1584
  .ml-3 {
1906
1585
  margin-left: calc(var(--spacing) * 3);
1907
1586
  }
1908
- .ml-4 {
1909
- margin-left: calc(var(--spacing) * 4);
1910
- }
1911
1587
  .ml-auto {
1912
1588
  margin-left: auto;
1913
1589
  }
1590
+ .sidebar-item {
1591
+ display: flex;
1592
+ column-gap: calc(var(--spacing) * 3);
1593
+ border-radius: var(--radius-md);
1594
+ padding: calc(var(--spacing) * 2);
1595
+ font-size: var(--text-sm);
1596
+ line-height: calc(var(--spacing) * 6);
1597
+ --tw-font-weight: var(--font-weight-semibold);
1598
+ font-weight: var(--font-weight-semibold);
1599
+ color: var(--color-stone-700);
1600
+ @media (prefers-color-scheme: dark) {
1601
+ color: var(--color-stone-400);
1602
+ }
1603
+ &:hover {
1604
+ @media (hover: hover) {
1605
+ background-color: var(--color-stone-50);
1606
+ }
1607
+ }
1608
+ &:hover {
1609
+ @media (hover: hover) {
1610
+ color: var(--color-stone-600);
1611
+ }
1612
+ }
1613
+ @media (prefers-color-scheme: dark) {
1614
+ &:hover {
1615
+ @media (hover: hover) {
1616
+ background-color: color-mix(in srgb, #fff 5%, transparent);
1617
+ @supports (color: color-mix(in lab, red, red)) {
1618
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1619
+ }
1620
+ }
1621
+ }
1622
+ }
1623
+ @media (prefers-color-scheme: dark) {
1624
+ &:hover {
1625
+ @media (hover: hover) {
1626
+ color: var(--color-white);
1627
+ }
1628
+ }
1629
+ }
1630
+ :is(& > *) {
1631
+ &[data-slot="icon"] {
1632
+ width: calc(var(--spacing) * 6);
1633
+ height: calc(var(--spacing) * 6);
1634
+ }
1635
+ }
1636
+ :is(& > *) {
1637
+ &[data-slot="icon"] {
1638
+ flex-shrink: 0;
1639
+ }
1640
+ }
1641
+ :is(& > *) {
1642
+ &[data-slot="icon"] {
1643
+ color: var(--color-stone-400);
1644
+ }
1645
+ }
1646
+ &:hover {
1647
+ @media (hover: hover) {
1648
+ :is(& > *) {
1649
+ &[data-slot="icon"] {
1650
+ color: var(--color-stone-600);
1651
+ }
1652
+ }
1653
+ }
1654
+ }
1655
+ @media (prefers-color-scheme: dark) {
1656
+ &:hover {
1657
+ @media (hover: hover) {
1658
+ :is(& > *) {
1659
+ &[data-slot="icon"] {
1660
+ color: var(--color-white);
1661
+ }
1662
+ }
1663
+ }
1664
+ }
1665
+ }
1666
+ &[data-current] {
1667
+ background-color: var(--color-stone-50);
1668
+ }
1669
+ &[data-current] {
1670
+ color: var(--color-stone-600);
1671
+ }
1672
+ @media (prefers-color-scheme: dark) {
1673
+ &[data-current] {
1674
+ background-color: color-mix(in srgb, #fff 5%, transparent);
1675
+ @supports (color: color-mix(in lab, red, red)) {
1676
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1677
+ }
1678
+ }
1679
+ }
1680
+ @media (prefers-color-scheme: dark) {
1681
+ &[data-current] {
1682
+ color: var(--color-white);
1683
+ }
1684
+ }
1685
+ &[data-current] {
1686
+ :is(& > *) {
1687
+ &[data-slot="icon"] {
1688
+ color: var(--color-stone-600);
1689
+ }
1690
+ }
1691
+ }
1692
+ @media (prefers-color-scheme: dark) {
1693
+ &[data-current] {
1694
+ :is(& > *) {
1695
+ &[data-slot="icon"] {
1696
+ color: var(--color-white);
1697
+ }
1698
+ }
1699
+ }
1700
+ }
1701
+ }
1914
1702
  .select {
1915
1703
  display: block;
1916
1704
  width: 100%;
@@ -2042,7 +1830,7 @@
2042
1830
  appearance: base-select;
2043
1831
  &::picker-icon {
2044
1832
  color: var(--color-stone-500);
2045
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
1833
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2046
1834
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2047
1835
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2048
1836
  --tw-duration: 200ms;
@@ -2098,9 +1886,9 @@
2098
1886
  width: calc(var(--spacing) * 6);
2099
1887
  height: calc(var(--spacing) * 6);
2100
1888
  }
2101
- .size-10 {
2102
- width: calc(var(--spacing) * 10);
2103
- height: calc(var(--spacing) * 10);
1889
+ .size-8 {
1890
+ width: calc(var(--spacing) * 8);
1891
+ height: calc(var(--spacing) * 8);
2104
1892
  }
2105
1893
  .size-full {
2106
1894
  width: 100%;
@@ -2112,6 +1900,9 @@
2112
1900
  .h-6 {
2113
1901
  height: calc(var(--spacing) * 6);
2114
1902
  }
1903
+ .h-16 {
1904
+ height: calc(var(--spacing) * 16);
1905
+ }
2115
1906
  .h-60 {
2116
1907
  height: calc(var(--spacing) * 60);
2117
1908
  }
@@ -2124,24 +1915,30 @@
2124
1915
  .h-full {
2125
1916
  height: 100%;
2126
1917
  }
2127
- .h-px {
2128
- height: 1px;
2129
- }
2130
- .min-h-0 {
2131
- min-height: calc(var(--spacing) * 0);
1918
+ .max-h-60 {
1919
+ max-height: calc(var(--spacing) * 60);
2132
1920
  }
2133
1921
  .min-h-56 {
2134
1922
  min-height: calc(var(--spacing) * 56);
2135
1923
  }
2136
- .min-h-svh {
2137
- min-height: 100svh;
1924
+ .min-h-full {
1925
+ min-height: 100%;
2138
1926
  }
2139
- .w-0\.5 {
2140
- width: calc(var(--spacing) * 0.5);
1927
+ .w-\(--button-width\) {
1928
+ width: var(--button-width);
2141
1929
  }
2142
1930
  .w-4 {
2143
1931
  width: calc(var(--spacing) * 4);
2144
1932
  }
1933
+ .w-11 {
1934
+ width: calc(var(--spacing) * 11);
1935
+ }
1936
+ .w-16 {
1937
+ width: calc(var(--spacing) * 16);
1938
+ }
1939
+ .w-56 {
1940
+ width: calc(var(--spacing) * 56);
1941
+ }
2145
1942
  .w-64 {
2146
1943
  width: calc(var(--spacing) * 64);
2147
1944
  }
@@ -2166,21 +1963,18 @@
2166
1963
  .max-w-4xl {
2167
1964
  max-width: var(--container-4xl);
2168
1965
  }
2169
- .max-w-6xl {
2170
- max-width: var(--container-6xl);
2171
- }
2172
1966
  .max-w-80 {
2173
1967
  max-width: calc(var(--spacing) * 80);
2174
1968
  }
2175
1969
  .max-w-96 {
2176
1970
  max-width: calc(var(--spacing) * 96);
2177
1971
  }
2178
- .max-w-md {
2179
- max-width: var(--container-md);
2180
- }
2181
1972
  .max-w-none {
2182
1973
  max-width: none;
2183
1974
  }
1975
+ .max-w-xs {
1976
+ max-width: var(--container-xs);
1977
+ }
2184
1978
  .min-w-0 {
2185
1979
  min-width: calc(var(--spacing) * 0);
2186
1980
  }
@@ -2193,6 +1987,12 @@
2193
1987
  .grow {
2194
1988
  flex-grow: 1;
2195
1989
  }
1990
+ .origin-bottom-right {
1991
+ transform-origin: 100% 100%;
1992
+ }
1993
+ .origin-top-left {
1994
+ transform-origin: 0 0;
1995
+ }
2196
1996
  .-translate-y-1\/2 {
2197
1997
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
2198
1998
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2203,12 +2003,18 @@
2203
2003
  .animate-appear-then-fade {
2204
2004
  animation: var(--animate-appear-then-fade);
2205
2005
  }
2006
+ .cursor-default {
2007
+ cursor: default;
2008
+ }
2206
2009
  .cursor-pointer {
2207
2010
  cursor: pointer;
2208
2011
  }
2209
2012
  .list-disc {
2210
2013
  list-style-type: disc;
2211
2014
  }
2015
+ .appearance-none {
2016
+ appearance: none;
2017
+ }
2212
2018
  .grid-cols-1 {
2213
2019
  grid-template-columns: repeat(1, minmax(0, 1fr));
2214
2020
  }
@@ -2230,9 +2036,6 @@
2230
2036
  .justify-center {
2231
2037
  justify-content: center;
2232
2038
  }
2233
- .gap-0\.5 {
2234
- gap: calc(var(--spacing) * 0.5);
2235
- }
2236
2039
  .gap-2 {
2237
2040
  gap: calc(var(--spacing) * 2);
2238
2041
  }
@@ -2286,6 +2089,12 @@
2286
2089
  .gap-x-3 {
2287
2090
  column-gap: calc(var(--spacing) * 3);
2288
2091
  }
2092
+ .gap-x-4 {
2093
+ column-gap: calc(var(--spacing) * 4);
2094
+ }
2095
+ .gap-x-6 {
2096
+ column-gap: calc(var(--spacing) * 6);
2097
+ }
2289
2098
  .space-x-1 {
2290
2099
  :where(& > :not(:last-child)) {
2291
2100
  --tw-space-x-reverse: 0;
@@ -2300,6 +2109,12 @@
2300
2109
  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
2301
2110
  }
2302
2111
  }
2112
+ .gap-y-5 {
2113
+ row-gap: calc(var(--spacing) * 5);
2114
+ }
2115
+ .gap-y-7 {
2116
+ row-gap: calc(var(--spacing) * 7);
2117
+ }
2303
2118
  .divide-y {
2304
2119
  :where(& > :not(:last-child)) {
2305
2120
  --tw-divide-y-reverse: 0;
@@ -2309,16 +2124,30 @@
2309
2124
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
2310
2125
  }
2311
2126
  }
2127
+ .divide-stone-100 {
2128
+ :where(& > :not(:last-child)) {
2129
+ border-color: var(--color-stone-100);
2130
+ }
2131
+ }
2312
2132
  .divide-stone-200 {
2313
2133
  :where(& > :not(:last-child)) {
2314
2134
  border-color: var(--color-stone-200);
2315
2135
  }
2316
2136
  }
2137
+ .self-center {
2138
+ align-self: center;
2139
+ }
2140
+ .justify-self-end {
2141
+ justify-self: flex-end;
2142
+ }
2317
2143
  .truncate {
2318
2144
  overflow: hidden;
2319
2145
  text-overflow: ellipsis;
2320
2146
  white-space: nowrap;
2321
2147
  }
2148
+ .overflow-auto {
2149
+ overflow: auto;
2150
+ }
2322
2151
  .overflow-hidden {
2323
2152
  overflow: hidden;
2324
2153
  }
@@ -2351,18 +2180,17 @@
2351
2180
  border-style: var(--tw-border-style);
2352
2181
  border-width: 1px;
2353
2182
  }
2354
- .border-0 {
2355
- border-style: var(--tw-border-style);
2356
- border-width: 0px;
2357
- }
2358
- .border-t {
2359
- border-top-style: var(--tw-border-style);
2360
- border-top-width: 1px;
2183
+ .border-r {
2184
+ border-right-style: var(--tw-border-style);
2185
+ border-right-width: 1px;
2361
2186
  }
2362
2187
  .border-b {
2363
2188
  border-bottom-style: var(--tw-border-style);
2364
2189
  border-bottom-width: 1px;
2365
2190
  }
2191
+ .border-stone-200 {
2192
+ border-color: var(--color-stone-200);
2193
+ }
2366
2194
  .border-stone-300 {
2367
2195
  border-color: var(--color-stone-300);
2368
2196
  }
@@ -2372,12 +2200,6 @@
2372
2200
  .border-stone-800 {
2373
2201
  border-color: var(--color-stone-800);
2374
2202
  }
2375
- .border-stone-950\/5 {
2376
- border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
2377
- @supports (color: color-mix(in lab, red, red)) {
2378
- border-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
2379
- }
2380
- }
2381
2203
  .bg-amber-400\/20 {
2382
2204
  background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
2383
2205
  @supports (color: color-mix(in lab, red, red)) {
@@ -2471,8 +2293,8 @@
2471
2293
  .bg-stone-50 {
2472
2294
  background-color: var(--color-stone-50);
2473
2295
  }
2474
- .bg-stone-100 {
2475
- background-color: var(--color-stone-100);
2296
+ .bg-stone-200 {
2297
+ background-color: var(--color-stone-200);
2476
2298
  }
2477
2299
  .bg-stone-600\/10 {
2478
2300
  background-color: color-mix(in srgb, oklch(44.4% 0.011 73.639) 10%, transparent);
@@ -2513,13 +2335,10 @@
2513
2335
  .bg-stone-900 {
2514
2336
  background-color: var(--color-stone-900);
2515
2337
  }
2516
- .bg-stone-950 {
2517
- background-color: var(--color-stone-950);
2518
- }
2519
- .bg-stone-950\/5 {
2520
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
2338
+ .bg-stone-900\/80 {
2339
+ background-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 80%, transparent);
2521
2340
  @supports (color: color-mix(in lab, red, red)) {
2522
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
2341
+ background-color: color-mix(in oklab, var(--color-stone-900) 80%, transparent);
2523
2342
  }
2524
2343
  }
2525
2344
  .bg-teal-500\/15 {
@@ -2561,21 +2380,24 @@
2561
2380
  .object-center {
2562
2381
  object-position: center;
2563
2382
  }
2383
+ .p-0\.5 {
2384
+ padding: calc(var(--spacing) * 0.5);
2385
+ }
2564
2386
  .p-1 {
2565
2387
  padding: calc(var(--spacing) * 1);
2566
2388
  }
2567
2389
  .p-2 {
2568
2390
  padding: calc(var(--spacing) * 2);
2569
2391
  }
2392
+ .p-2\.5 {
2393
+ padding: calc(var(--spacing) * 2.5);
2394
+ }
2570
2395
  .p-4 {
2571
2396
  padding: calc(var(--spacing) * 4);
2572
2397
  }
2573
2398
  .p-6 {
2574
2399
  padding: calc(var(--spacing) * 6);
2575
2400
  }
2576
- .p-8 {
2577
- padding: calc(var(--spacing) * 8);
2578
- }
2579
2401
  .p-\[5\%\] {
2580
2402
  padding: 5%;
2581
2403
  }
@@ -2588,9 +2410,6 @@
2588
2410
  .px-3 {
2589
2411
  padding-inline: calc(var(--spacing) * 3);
2590
2412
  }
2591
- .px-3\.5 {
2592
- padding-inline: calc(var(--spacing) * 3.5);
2593
- }
2594
2413
  .px-4 {
2595
2414
  padding-inline: calc(var(--spacing) * 4);
2596
2415
  }
@@ -2603,6 +2422,9 @@
2603
2422
  .py-1 {
2604
2423
  padding-block: calc(var(--spacing) * 1);
2605
2424
  }
2425
+ .py-1\.5 {
2426
+ padding-block: calc(var(--spacing) * 1.5);
2427
+ }
2606
2428
  .py-2 {
2607
2429
  padding-block: calc(var(--spacing) * 2);
2608
2430
  }
@@ -2615,18 +2437,39 @@
2615
2437
  .py-8 {
2616
2438
  padding-block: calc(var(--spacing) * 8);
2617
2439
  }
2440
+ .py-10 {
2441
+ padding-block: calc(var(--spacing) * 10);
2442
+ }
2443
+ .py-12 {
2444
+ padding-block: calc(var(--spacing) * 12);
2445
+ }
2618
2446
  .pt-2 {
2619
2447
  padding-top: calc(var(--spacing) * 2);
2620
2448
  }
2449
+ .pt-5 {
2450
+ padding-top: calc(var(--spacing) * 5);
2451
+ }
2452
+ .pr-2 {
2453
+ padding-right: calc(var(--spacing) * 2);
2454
+ }
2455
+ .pr-4 {
2456
+ padding-right: calc(var(--spacing) * 4);
2457
+ }
2621
2458
  .pr-6 {
2622
2459
  padding-right: calc(var(--spacing) * 6);
2623
2460
  }
2624
2461
  .pr-8 {
2625
2462
  padding-right: calc(var(--spacing) * 8);
2626
2463
  }
2464
+ .pr-9 {
2465
+ padding-right: calc(var(--spacing) * 9);
2466
+ }
2627
2467
  .pb-2 {
2628
2468
  padding-bottom: calc(var(--spacing) * 2);
2629
2469
  }
2470
+ .pl-3 {
2471
+ padding-left: calc(var(--spacing) * 3);
2472
+ }
2630
2473
  .pl-4 {
2631
2474
  padding-left: calc(var(--spacing) * 4);
2632
2475
  }
@@ -2663,6 +2506,10 @@
2663
2506
  font-size: var(--text-2xl);
2664
2507
  line-height: var(--tw-leading, var(--text-2xl--line-height));
2665
2508
  }
2509
+ .text-2xl\/9 {
2510
+ font-size: var(--text-2xl);
2511
+ line-height: calc(var(--spacing) * 9);
2512
+ }
2666
2513
  .text-4xl {
2667
2514
  font-size: var(--text-4xl);
2668
2515
  line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -2695,10 +2542,6 @@
2695
2542
  font-size: var(--text-xs);
2696
2543
  line-height: var(--tw-leading, var(--text-xs--line-height));
2697
2544
  }
2698
- .text-xs\/5 {
2699
- font-size: var(--text-xs);
2700
- line-height: calc(var(--spacing) * 5);
2701
- }
2702
2545
  .text-xs\/6 {
2703
2546
  font-size: var(--text-xs);
2704
2547
  line-height: calc(var(--spacing) * 6);
@@ -2794,6 +2637,9 @@
2794
2637
  .text-rose-700 {
2795
2638
  color: var(--color-rose-700);
2796
2639
  }
2640
+ .text-sky-600 {
2641
+ color: var(--color-sky-600);
2642
+ }
2797
2643
  .text-sky-700 {
2798
2644
  color: var(--color-sky-700);
2799
2645
  }
@@ -2863,13 +2709,18 @@
2863
2709
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2864
2710
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2865
2711
  }
2866
- .ring-stone-300 {
2867
- --tw-ring-color: var(--color-stone-300);
2712
+ .inset-ring {
2713
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
2714
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2715
+ }
2716
+ .inset-ring-1 {
2717
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
2718
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2868
2719
  }
2869
- .ring-stone-950\/5 {
2870
- --tw-ring-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
2720
+ .ring-stone-900\/5 {
2721
+ --tw-ring-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 5%, transparent);
2871
2722
  @supports (color: color-mix(in lab, red, red)) {
2872
- --tw-ring-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
2723
+ --tw-ring-color: color-mix(in oklab, var(--color-stone-900) 5%, transparent);
2873
2724
  }
2874
2725
  }
2875
2726
  .ring-stone-950\/10 {
@@ -2878,6 +2729,15 @@
2878
2729
  --tw-ring-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
2879
2730
  }
2880
2731
  }
2732
+ .inset-ring-stone-300 {
2733
+ --tw-inset-ring-color: var(--color-stone-300);
2734
+ }
2735
+ .inset-ring-stone-900\/5 {
2736
+ --tw-inset-ring-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 5%, transparent);
2737
+ @supports (color: color-mix(in lab, red, red)) {
2738
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-stone-900) 5%, transparent);
2739
+ }
2740
+ }
2881
2741
  .outline {
2882
2742
  outline-style: var(--tw-outline-style);
2883
2743
  outline-width: 1px;
@@ -2889,12 +2749,27 @@
2889
2749
  .-outline-offset-1 {
2890
2750
  outline-offset: calc(1px * -1);
2891
2751
  }
2752
+ .outline-offset-2 {
2753
+ outline-offset: 2px;
2754
+ }
2892
2755
  .outline-black\/\(--ring-opacity\) {
2893
2756
  outline-color: #000;
2894
2757
  @supports (color: color-mix(in lab, red, red)) {
2895
2758
  outline-color: color-mix(in oklab, var(--color-black) var(--ring-opacity), transparent);
2896
2759
  }
2897
2760
  }
2761
+ .outline-black\/5 {
2762
+ outline-color: color-mix(in srgb, #000 5%, transparent);
2763
+ @supports (color: color-mix(in lab, red, red)) {
2764
+ outline-color: color-mix(in oklab, var(--color-black) 5%, transparent);
2765
+ }
2766
+ }
2767
+ .outline-sky-600 {
2768
+ outline-color: var(--color-sky-600);
2769
+ }
2770
+ .outline-stone-400 {
2771
+ outline-color: var(--color-stone-400);
2772
+ }
2898
2773
  .blur {
2899
2774
  --tw-blur: blur(8px);
2900
2775
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2910,7 +2785,7 @@
2910
2785
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2911
2786
  }
2912
2787
  .transition {
2913
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
2788
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2914
2789
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2915
2790
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2916
2791
  }
@@ -2924,11 +2799,35 @@
2924
2799
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2925
2800
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2926
2801
  }
2802
+ .transition-opacity {
2803
+ transition-property: opacity;
2804
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2805
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2806
+ }
2927
2807
  .transition-transform {
2928
2808
  transition-property: transform, translate, scale, rotate;
2929
2809
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2930
2810
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2931
2811
  }
2812
+ .transition-discrete {
2813
+ transition-behavior: allow-discrete;
2814
+ }
2815
+ .duration-200 {
2816
+ --tw-duration: 200ms;
2817
+ transition-duration: 200ms;
2818
+ }
2819
+ .duration-300 {
2820
+ --tw-duration: 300ms;
2821
+ transition-duration: 300ms;
2822
+ }
2823
+ .ease-in-out {
2824
+ --tw-ease: var(--ease-in-out);
2825
+ transition-timing-function: var(--ease-in-out);
2826
+ }
2827
+ .ease-linear {
2828
+ --tw-ease: linear;
2829
+ transition-timing-function: linear;
2830
+ }
2932
2831
  .prose-stone {
2933
2832
  --tw-prose-body: oklch(37.4% 0.01 67.558);
2934
2833
  --tw-prose-headings: oklch(21.6% 0.006 56.043);
@@ -2942,7 +2841,7 @@
2942
2841
  --tw-prose-quote-borders: oklch(92.3% 0.003 48.717);
2943
2842
  --tw-prose-captions: oklch(55.3% 0.013 58.071);
2944
2843
  --tw-prose-kbd: oklch(21.6% 0.006 56.043);
2945
- --tw-prose-kbd-shadows: NaN NaN NaN;
2844
+ --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21.6% 0.006 56.043) 10%, transparent);
2946
2845
  --tw-prose-code: oklch(21.6% 0.006 56.043);
2947
2846
  --tw-prose-pre-code: oklch(92.3% 0.003 48.717);
2948
2847
  --tw-prose-pre-bg: oklch(26.8% 0.007 34.298);
@@ -2960,7 +2859,7 @@
2960
2859
  --tw-prose-invert-quote-borders: oklch(37.4% 0.01 67.558);
2961
2860
  --tw-prose-invert-captions: oklch(70.9% 0.01 56.259);
2962
2861
  --tw-prose-invert-kbd: #fff;
2963
- --tw-prose-invert-kbd-shadows: 255 255 255;
2862
+ --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
2964
2863
  --tw-prose-invert-code: #fff;
2965
2864
  --tw-prose-invert-pre-code: oklch(86.9% 0.005 56.366);
2966
2865
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
@@ -2971,6 +2870,12 @@
2971
2870
  -webkit-user-select: none;
2972
2871
  user-select: none;
2973
2872
  }
2873
+ .\[--anchor-gap\:--spacing\(1\)\] {
2874
+ --anchor-gap: calc(var(--spacing) * 1);
2875
+ }
2876
+ .\[--anchor-gap\:--spacing\(2\)\] {
2877
+ --anchor-gap: calc(var(--spacing) * 2);
2878
+ }
2974
2879
  .\[--avatar-radius\:20\%\] {
2975
2880
  --avatar-radius: 20%;
2976
2881
  }
@@ -2986,9 +2891,6 @@
2986
2891
  .\[stroke-linejoin\:round\] {
2987
2892
  stroke-linejoin: round;
2988
2893
  }
2989
- .ring-inset {
2990
- --tw-ring-inset: inset;
2991
- }
2992
2894
  .\*\:col-start-1 {
2993
2895
  :is(& > *) {
2994
2896
  grid-column-start: 1;
@@ -3009,6 +2911,11 @@
3009
2911
  border-radius: calc(infinity * 1px);
3010
2912
  }
3011
2913
  }
2914
+ .group-not-aria-selected\/option\:hidden {
2915
+ &:is(:where(.group\/option):not(*[aria-selected="true"]) *) {
2916
+ display: none;
2917
+ }
2918
+ }
3012
2919
  .group-open\:rotate-180 {
3013
2920
  &:is(:where(.group):is([open], :popover-open, :open) *) {
3014
2921
  rotate: 180deg;
@@ -3194,14 +3101,51 @@
3194
3101
  }
3195
3102
  }
3196
3103
  }
3104
+ .group-focus\/item\:text-sky-600 {
3105
+ &:is(:where(.group\/item):focus *) {
3106
+ color: var(--color-sky-600);
3107
+ }
3108
+ }
3109
+ .group-focus\/item\:text-stone-500 {
3110
+ &:is(:where(.group\/item):focus *) {
3111
+ color: var(--color-stone-500);
3112
+ }
3113
+ }
3114
+ .group-focus\/option\:text-white {
3115
+ &:is(:where(.group\/option):focus *) {
3116
+ color: var(--color-white);
3117
+ }
3118
+ }
3119
+ .group-has-checked\:hidden {
3120
+ &:is(:where(.group):has(*:checked) *) {
3121
+ display: none;
3122
+ }
3123
+ }
3124
+ .group-has-checked\:translate-x-5 {
3125
+ &:is(:where(.group):has(*:checked) *) {
3126
+ --tw-translate-x: calc(var(--spacing) * 5);
3127
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3128
+ }
3129
+ }
3130
+ .group-aria-selected\/option\:font-semibold {
3131
+ &:is(:where(.group\/option)[aria-selected="true"] *) {
3132
+ --tw-font-weight: var(--font-weight-semibold);
3133
+ font-weight: var(--font-weight-semibold);
3134
+ }
3135
+ }
3136
+ .group-data-closed\/dialog-panel\:opacity-0 {
3137
+ &:is(:where(.group\/dialog-panel)[data-closed] *) {
3138
+ opacity: 0%;
3139
+ }
3140
+ }
3197
3141
  .peer-has-\[\:checked\]\:block {
3198
3142
  &:is(:where(.peer):has(*:is(:checked)) ~ *) {
3199
3143
  display: block;
3200
3144
  }
3201
3145
  }
3202
- .placeholder\:text-stone-400 {
3203
- &::placeholder {
3204
- color: var(--color-stone-400);
3146
+ .backdrop\:bg-transparent {
3147
+ &::backdrop {
3148
+ background-color: transparent;
3205
3149
  }
3206
3150
  }
3207
3151
  .hover\:bg-stone-50 {
@@ -3252,6 +3196,13 @@
3252
3196
  }
3253
3197
  }
3254
3198
  }
3199
+ .hover\:text-stone-500 {
3200
+ &:hover {
3201
+ @media (hover: hover) {
3202
+ color: var(--color-stone-500);
3203
+ }
3204
+ }
3205
+ }
3255
3206
  .hover\:text-stone-700 {
3256
3207
  &:hover {
3257
3208
  @media (hover: hover) {
@@ -3266,6 +3217,31 @@
3266
3217
  }
3267
3218
  }
3268
3219
  }
3220
+ .focus\:bg-sky-100 {
3221
+ &:focus {
3222
+ background-color: var(--color-sky-100);
3223
+ }
3224
+ }
3225
+ .focus\:bg-sky-600 {
3226
+ &:focus {
3227
+ background-color: var(--color-sky-600);
3228
+ }
3229
+ }
3230
+ .focus\:bg-stone-100 {
3231
+ &:focus {
3232
+ background-color: var(--color-stone-100);
3233
+ }
3234
+ }
3235
+ .focus\:text-stone-900 {
3236
+ &:focus {
3237
+ color: var(--color-stone-900);
3238
+ }
3239
+ }
3240
+ .focus\:text-white {
3241
+ &:focus {
3242
+ color: var(--color-white);
3243
+ }
3244
+ }
3269
3245
  .focus\:ring-2 {
3270
3246
  &:focus {
3271
3247
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3282,11 +3258,6 @@
3282
3258
  --tw-ring-color: var(--color-stone-500);
3283
3259
  }
3284
3260
  }
3285
- .focus\:ring-stone-600 {
3286
- &:focus {
3287
- --tw-ring-color: var(--color-stone-600);
3288
- }
3289
- }
3290
3261
  .focus\:outline-hidden {
3291
3262
  &:focus {
3292
3263
  --tw-outline-style: none;
@@ -3303,11 +3274,6 @@
3303
3274
  outline-style: none;
3304
3275
  }
3305
3276
  }
3306
- .focus\:ring-inset {
3307
- &:focus {
3308
- --tw-ring-inset: inset;
3309
- }
3310
- }
3311
3277
  .focus-visible\:outline {
3312
3278
  &:focus-visible {
3313
3279
  outline-style: var(--tw-outline-style);
@@ -3320,6 +3286,11 @@
3320
3286
  outline-width: 2px;
3321
3287
  }
3322
3288
  }
3289
+ .focus-visible\:-outline-offset-2 {
3290
+ &:focus-visible {
3291
+ outline-offset: calc(2px * -1);
3292
+ }
3293
+ }
3323
3294
  .focus-visible\:outline-offset-2 {
3324
3295
  &:focus-visible {
3325
3296
  outline-offset: 2px;
@@ -3330,29 +3301,113 @@
3330
3301
  outline-color: var(--color-blue-500);
3331
3302
  }
3332
3303
  }
3304
+ .focus-visible\:outline-sky-600 {
3305
+ &:focus-visible {
3306
+ outline-color: var(--color-sky-600);
3307
+ }
3308
+ }
3309
+ .in-\[el-selectedcontent\]\:hidden {
3310
+ :where(*:is(el-selectedcontent)) & {
3311
+ display: none;
3312
+ }
3313
+ }
3314
+ .has-checked\:bg-sky-600 {
3315
+ &:has(*:checked) {
3316
+ background-color: var(--color-sky-600);
3317
+ }
3318
+ }
3319
+ .has-focus-visible\:outline-2 {
3320
+ &:has(*:focus-visible) {
3321
+ outline-style: var(--tw-outline-style);
3322
+ outline-width: 2px;
3323
+ }
3324
+ }
3333
3325
  .has-\[\>_\.destroy\:checked\]\:hidden {
3334
3326
  &:has(> .destroy:checked) {
3335
3327
  display: none;
3336
3328
  }
3337
3329
  }
3338
- .data-\[ui\~\=hidden\]\:hidden {
3339
- &[data-ui~="hidden"] {
3340
- display: none;
3330
+ .data-closed\:-translate-x-full {
3331
+ &[data-closed] {
3332
+ --tw-translate-x: -100%;
3333
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3341
3334
  }
3342
3335
  }
3343
- .max-lg\:hidden {
3344
- @media (width < 64rem) {
3345
- display: none;
3336
+ .data-closed\:scale-95 {
3337
+ &[data-closed] {
3338
+ --tw-scale-x: 95%;
3339
+ --tw-scale-y: 95%;
3340
+ --tw-scale-z: 95%;
3341
+ scale: var(--tw-scale-x) var(--tw-scale-y);
3346
3342
  }
3347
3343
  }
3348
- .max-lg\:flex-col {
3349
- @media (width < 64rem) {
3350
- flex-direction: column;
3344
+ .data-closed\:transform {
3345
+ &[data-closed] {
3346
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
3347
+ }
3348
+ }
3349
+ .data-closed\:opacity-0 {
3350
+ &[data-closed] {
3351
+ opacity: 0%;
3352
+ }
3353
+ }
3354
+ .data-enter\:duration-100 {
3355
+ &[data-enter] {
3356
+ --tw-duration: 100ms;
3357
+ transition-duration: 100ms;
3358
+ }
3359
+ }
3360
+ .data-enter\:ease-out {
3361
+ &[data-enter] {
3362
+ --tw-ease: var(--ease-out);
3363
+ transition-timing-function: var(--ease-out);
3351
3364
  }
3352
3365
  }
3353
- .sm\:mx-3 {
3366
+ .data-leave\:transition {
3367
+ &[data-leave] {
3368
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3369
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3370
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3371
+ }
3372
+ }
3373
+ .data-leave\:transition-discrete {
3374
+ &[data-leave] {
3375
+ transition-behavior: allow-discrete;
3376
+ }
3377
+ }
3378
+ .data-leave\:duration-75 {
3379
+ &[data-leave] {
3380
+ --tw-duration: 75ms;
3381
+ transition-duration: 75ms;
3382
+ }
3383
+ }
3384
+ .data-leave\:duration-100 {
3385
+ &[data-leave] {
3386
+ --tw-duration: 100ms;
3387
+ transition-duration: 100ms;
3388
+ }
3389
+ }
3390
+ .data-leave\:ease-in {
3391
+ &[data-leave] {
3392
+ --tw-ease: var(--ease-in);
3393
+ transition-timing-function: var(--ease-in);
3394
+ }
3395
+ }
3396
+ .data-closed\:data-leave\:opacity-0 {
3397
+ &[data-closed] {
3398
+ &[data-leave] {
3399
+ opacity: 0%;
3400
+ }
3401
+ }
3402
+ }
3403
+ .data-\[ui\~\=hidden\]\:hidden {
3404
+ &[data-ui~="hidden"] {
3405
+ display: none;
3406
+ }
3407
+ }
3408
+ .sm\:mx-auto {
3354
3409
  @media (width >= 40rem) {
3355
- margin-inline: calc(var(--spacing) * 3);
3410
+ margin-inline: auto;
3356
3411
  }
3357
3412
  }
3358
3413
  .sm\:mt-0 {
@@ -3370,6 +3425,22 @@
3370
3425
  display: inline-flex;
3371
3426
  }
3372
3427
  }
3428
+ .sm\:size-4 {
3429
+ @media (width >= 40rem) {
3430
+ width: calc(var(--spacing) * 4);
3431
+ height: calc(var(--spacing) * 4);
3432
+ }
3433
+ }
3434
+ .sm\:w-full {
3435
+ @media (width >= 40rem) {
3436
+ width: 100%;
3437
+ }
3438
+ }
3439
+ .sm\:max-w-sm {
3440
+ @media (width >= 40rem) {
3441
+ max-width: var(--container-sm);
3442
+ }
3443
+ }
3373
3444
  .sm\:grid-cols-2 {
3374
3445
  @media (width >= 40rem) {
3375
3446
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3390,9 +3461,9 @@
3390
3461
  gap: calc(var(--spacing) * 8);
3391
3462
  }
3392
3463
  }
3393
- .sm\:px-3 {
3464
+ .sm\:px-6 {
3394
3465
  @media (width >= 40rem) {
3395
- padding-inline: calc(var(--spacing) * 3);
3466
+ padding-inline: calc(var(--spacing) * 6);
3396
3467
  }
3397
3468
  }
3398
3469
  .sm\:text-sm {
@@ -3407,81 +3478,66 @@
3407
3478
  line-height: calc(var(--spacing) * 5);
3408
3479
  }
3409
3480
  }
3410
- .sm\:text-xs\/5 {
3411
- @media (width >= 40rem) {
3412
- font-size: var(--text-xs);
3413
- line-height: calc(var(--spacing) * 5);
3414
- }
3415
- }
3416
- .sm\:leading-6 {
3481
+ .sm\:text-sm\/6 {
3417
3482
  @media (width >= 40rem) {
3418
- --tw-leading: calc(var(--spacing) * 6);
3483
+ font-size: var(--text-sm);
3419
3484
  line-height: calc(var(--spacing) * 6);
3420
3485
  }
3421
3486
  }
3422
- .lg\:min-w-0 {
3423
- @media (width >= 64rem) {
3424
- min-width: calc(var(--spacing) * 0);
3425
- }
3426
- }
3427
- .lg\:grid-cols-3 {
3428
- @media (width >= 64rem) {
3429
- grid-template-columns: repeat(3, minmax(0, 1fr));
3487
+ .sm\:text-xs\/5 {
3488
+ @media (width >= 40rem) {
3489
+ font-size: var(--text-xs);
3490
+ line-height: calc(var(--spacing) * 5);
3430
3491
  }
3431
3492
  }
3432
- .lg\:rounded-lg {
3493
+ .lg\:fixed {
3433
3494
  @media (width >= 64rem) {
3434
- border-radius: var(--radius-lg);
3495
+ position: fixed;
3435
3496
  }
3436
3497
  }
3437
- .lg\:bg-stone-100 {
3498
+ .lg\:inset-y-0 {
3438
3499
  @media (width >= 64rem) {
3439
- background-color: var(--color-stone-100);
3500
+ inset-block: calc(var(--spacing) * 0);
3440
3501
  }
3441
3502
  }
3442
- .lg\:bg-white {
3503
+ .lg\:z-50 {
3443
3504
  @media (width >= 64rem) {
3444
- background-color: var(--color-white);
3505
+ z-index: 50;
3445
3506
  }
3446
3507
  }
3447
- .lg\:p-10 {
3508
+ .lg\:flex {
3448
3509
  @media (width >= 64rem) {
3449
- padding: calc(var(--spacing) * 10);
3510
+ display: flex;
3450
3511
  }
3451
3512
  }
3452
- .lg\:pt-2 {
3513
+ .lg\:hidden {
3453
3514
  @media (width >= 64rem) {
3454
- padding-top: calc(var(--spacing) * 2);
3515
+ display: none;
3455
3516
  }
3456
3517
  }
3457
- .lg\:pr-2 {
3518
+ .lg\:w-72 {
3458
3519
  @media (width >= 64rem) {
3459
- padding-right: calc(var(--spacing) * 2);
3520
+ width: calc(var(--spacing) * 72);
3460
3521
  }
3461
3522
  }
3462
- .lg\:pl-64 {
3523
+ .lg\:grid-cols-3 {
3463
3524
  @media (width >= 64rem) {
3464
- padding-left: calc(var(--spacing) * 64);
3525
+ grid-template-columns: repeat(3, minmax(0, 1fr));
3465
3526
  }
3466
3527
  }
3467
- .lg\:shadow-xs {
3528
+ .lg\:flex-col {
3468
3529
  @media (width >= 64rem) {
3469
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
3470
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3530
+ flex-direction: column;
3471
3531
  }
3472
3532
  }
3473
- .lg\:ring-1 {
3533
+ .lg\:px-8 {
3474
3534
  @media (width >= 64rem) {
3475
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3476
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3535
+ padding-inline: calc(var(--spacing) * 8);
3477
3536
  }
3478
3537
  }
3479
- .lg\:ring-stone-950\/5 {
3538
+ .lg\:pl-72 {
3480
3539
  @media (width >= 64rem) {
3481
- --tw-ring-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
3482
- @supports (color: color-mix(in lab, red, red)) {
3483
- --tw-ring-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
3484
- }
3540
+ padding-left: calc(var(--spacing) * 72);
3485
3541
  }
3486
3542
  }
3487
3543
  .dark\:divide-stone-700\/20 {
@@ -3494,11 +3550,21 @@
3494
3550
  }
3495
3551
  }
3496
3552
  }
3497
- .dark\:border-white\/5 {
3553
+ .dark\:divide-white\/10 {
3554
+ @media (prefers-color-scheme: dark) {
3555
+ :where(& > :not(:last-child)) {
3556
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3557
+ @supports (color: color-mix(in lab, red, red)) {
3558
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3559
+ }
3560
+ }
3561
+ }
3562
+ }
3563
+ .dark\:border-white\/10 {
3498
3564
  @media (prefers-color-scheme: dark) {
3499
- border-color: color-mix(in srgb, #fff 5%, transparent);
3565
+ border-color: color-mix(in srgb, #fff 10%, transparent);
3500
3566
  @supports (color: color-mix(in lab, red, red)) {
3501
- border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3567
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3502
3568
  }
3503
3569
  }
3504
3570
  }
@@ -3510,6 +3576,14 @@
3510
3576
  }
3511
3577
  }
3512
3578
  }
3579
+ .dark\:bg-black\/10 {
3580
+ @media (prefers-color-scheme: dark) {
3581
+ background-color: color-mix(in srgb, #000 10%, transparent);
3582
+ @supports (color: color-mix(in lab, red, red)) {
3583
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
3584
+ }
3585
+ }
3586
+ }
3513
3587
  .dark\:bg-cyan-400\/10 {
3514
3588
  @media (prefers-color-scheme: dark) {
3515
3589
  background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
@@ -3616,11 +3690,6 @@
3616
3690
  background-color: var(--color-stone-900);
3617
3691
  }
3618
3692
  }
3619
- .dark\:bg-stone-950 {
3620
- @media (prefers-color-scheme: dark) {
3621
- background-color: var(--color-stone-950);
3622
- }
3623
- }
3624
3693
  .dark\:bg-teal-500\/10 {
3625
3694
  @media (prefers-color-scheme: dark) {
3626
3695
  background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
@@ -3629,11 +3698,6 @@
3629
3698
  }
3630
3699
  }
3631
3700
  }
3632
- .dark\:bg-white {
3633
- @media (prefers-color-scheme: dark) {
3634
- background-color: var(--color-white);
3635
- }
3636
- }
3637
3701
  .dark\:bg-white\/5 {
3638
3702
  @media (prefers-color-scheme: dark) {
3639
3703
  background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -3733,11 +3797,21 @@
3733
3797
  color: var(--color-sky-300);
3734
3798
  }
3735
3799
  }
3800
+ .dark\:text-sky-400 {
3801
+ @media (prefers-color-scheme: dark) {
3802
+ color: var(--color-sky-400);
3803
+ }
3804
+ }
3736
3805
  .dark\:text-stone-100 {
3737
3806
  @media (prefers-color-scheme: dark) {
3738
3807
  color: var(--color-stone-100);
3739
3808
  }
3740
3809
  }
3810
+ .dark\:text-stone-300 {
3811
+ @media (prefers-color-scheme: dark) {
3812
+ color: var(--color-stone-300);
3813
+ }
3814
+ }
3741
3815
  .dark\:text-stone-400 {
3742
3816
  @media (prefers-color-scheme: dark) {
3743
3817
  color: var(--color-stone-400);
@@ -3768,9 +3842,16 @@
3768
3842
  color: var(--color-yellow-300);
3769
3843
  }
3770
3844
  }
3771
- .dark\:ring-stone-700 {
3845
+ .dark\:shadow-none {
3846
+ @media (prefers-color-scheme: dark) {
3847
+ --tw-shadow: 0 0 #0000;
3848
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3849
+ }
3850
+ }
3851
+ .dark\:ring {
3772
3852
  @media (prefers-color-scheme: dark) {
3773
- --tw-ring-color: var(--color-stone-700);
3853
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3854
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3774
3855
  }
3775
3856
  }
3776
3857
  .dark\:ring-white\/10 {
@@ -3781,6 +3862,32 @@
3781
3862
  }
3782
3863
  }
3783
3864
  }
3865
+ .dark\:inset-ring-white\/5 {
3866
+ @media (prefers-color-scheme: dark) {
3867
+ --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
3868
+ @supports (color: color-mix(in lab, red, red)) {
3869
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3870
+ }
3871
+ }
3872
+ }
3873
+ .dark\:inset-ring-white\/10 {
3874
+ @media (prefers-color-scheme: dark) {
3875
+ --tw-inset-ring-color: color-mix(in srgb, #fff 10%, transparent);
3876
+ @supports (color: color-mix(in lab, red, red)) {
3877
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3878
+ }
3879
+ }
3880
+ }
3881
+ .dark\:-outline-offset-1 {
3882
+ @media (prefers-color-scheme: dark) {
3883
+ outline-offset: calc(1px * -1);
3884
+ }
3885
+ }
3886
+ .dark\:outline-sky-500 {
3887
+ @media (prefers-color-scheme: dark) {
3888
+ outline-color: var(--color-sky-500);
3889
+ }
3890
+ }
3784
3891
  .dark\:outline-white\/\(--ring-opacity\) {
3785
3892
  @media (prefers-color-scheme: dark) {
3786
3893
  outline-color: #fff;
@@ -3789,6 +3896,14 @@
3789
3896
  }
3790
3897
  }
3791
3898
  }
3899
+ .dark\:outline-white\/10 {
3900
+ @media (prefers-color-scheme: dark) {
3901
+ outline-color: color-mix(in srgb, #fff 10%, transparent);
3902
+ @supports (color: color-mix(in lab, red, red)) {
3903
+ outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3904
+ }
3905
+ }
3906
+ }
3792
3907
  .dark\:prose-invert {
3793
3908
  @media (prefers-color-scheme: dark) {
3794
3909
  --tw-prose-body: var(--tw-prose-invert-body);
@@ -4027,10 +4142,107 @@
4027
4142
  }
4028
4143
  }
4029
4144
  }
4030
- .dark\:placeholder\:text-stone-500 {
4145
+ .dark\:group-focus\/item\:text-sky-400 {
4031
4146
  @media (prefers-color-scheme: dark) {
4032
- &::placeholder {
4033
- color: var(--color-stone-500);
4147
+ &:is(:where(.group\/item):focus *) {
4148
+ color: var(--color-sky-400);
4149
+ }
4150
+ }
4151
+ }
4152
+ .dark\:group-focus\/item\:text-white {
4153
+ @media (prefers-color-scheme: dark) {
4154
+ &:is(:where(.group\/item):focus *) {
4155
+ color: var(--color-white);
4156
+ }
4157
+ }
4158
+ }
4159
+ .dark\:before\:pointer-events-none {
4160
+ @media (prefers-color-scheme: dark) {
4161
+ &::before {
4162
+ content: var(--tw-content);
4163
+ pointer-events: none;
4164
+ }
4165
+ }
4166
+ }
4167
+ .dark\:before\:absolute {
4168
+ @media (prefers-color-scheme: dark) {
4169
+ &::before {
4170
+ content: var(--tw-content);
4171
+ position: absolute;
4172
+ }
4173
+ }
4174
+ }
4175
+ .dark\:before\:inset-0 {
4176
+ @media (prefers-color-scheme: dark) {
4177
+ &::before {
4178
+ content: var(--tw-content);
4179
+ inset: calc(var(--spacing) * 0);
4180
+ }
4181
+ }
4182
+ }
4183
+ .dark\:before\:bg-black\/10 {
4184
+ @media (prefers-color-scheme: dark) {
4185
+ &::before {
4186
+ content: var(--tw-content);
4187
+ background-color: color-mix(in srgb, #000 10%, transparent);
4188
+ @supports (color: color-mix(in lab, red, red)) {
4189
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
4190
+ }
4191
+ }
4192
+ }
4193
+ }
4194
+ .dark\:after\:pointer-events-none {
4195
+ @media (prefers-color-scheme: dark) {
4196
+ &::after {
4197
+ content: var(--tw-content);
4198
+ pointer-events: none;
4199
+ }
4200
+ }
4201
+ }
4202
+ .dark\:after\:absolute {
4203
+ @media (prefers-color-scheme: dark) {
4204
+ &::after {
4205
+ content: var(--tw-content);
4206
+ position: absolute;
4207
+ }
4208
+ }
4209
+ }
4210
+ .dark\:after\:inset-0 {
4211
+ @media (prefers-color-scheme: dark) {
4212
+ &::after {
4213
+ content: var(--tw-content);
4214
+ inset: calc(var(--spacing) * 0);
4215
+ }
4216
+ }
4217
+ }
4218
+ .dark\:after\:border-b {
4219
+ @media (prefers-color-scheme: dark) {
4220
+ &::after {
4221
+ content: var(--tw-content);
4222
+ border-bottom-style: var(--tw-border-style);
4223
+ border-bottom-width: 1px;
4224
+ }
4225
+ }
4226
+ }
4227
+ .dark\:after\:border-white\/10 {
4228
+ @media (prefers-color-scheme: dark) {
4229
+ &::after {
4230
+ content: var(--tw-content);
4231
+ border-color: color-mix(in srgb, #fff 10%, transparent);
4232
+ @supports (color: color-mix(in lab, red, red)) {
4233
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4234
+ }
4235
+ }
4236
+ }
4237
+ }
4238
+ .dark\:after\:bg-black\/10 {
4239
+ @media (prefers-color-scheme: dark) {
4240
+ &::after {
4241
+ content: var(--tw-content);
4242
+ background-color: color-mix(in srgb, #000 10%, transparent);
4243
+ @supports (color: color-mix(in lab, red, red)) {
4244
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
4245
+ }
4034
4246
  }
4035
4247
  }
4036
4248
  }
@@ -4067,6 +4279,30 @@
4067
4279
  }
4068
4280
  }
4069
4281
  }
4282
+ .dark\:hover\:bg-white\/5 {
4283
+ @media (prefers-color-scheme: dark) {
4284
+ &:hover {
4285
+ @media (hover: hover) {
4286
+ background-color: color-mix(in srgb, #fff 5%, transparent);
4287
+ @supports (color: color-mix(in lab, red, red)) {
4288
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4289
+ }
4290
+ }
4291
+ }
4292
+ }
4293
+ }
4294
+ .dark\:hover\:bg-white\/20 {
4295
+ @media (prefers-color-scheme: dark) {
4296
+ &:hover {
4297
+ @media (hover: hover) {
4298
+ background-color: color-mix(in srgb, #fff 20%, transparent);
4299
+ @supports (color: color-mix(in lab, red, red)) {
4300
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4301
+ }
4302
+ }
4303
+ }
4304
+ }
4305
+ }
4070
4306
  .dark\:hover\:text-stone-200 {
4071
4307
  @media (prefers-color-scheme: dark) {
4072
4308
  &:hover {
@@ -4085,56 +4321,67 @@
4085
4321
  }
4086
4322
  }
4087
4323
  }
4088
- .dark\:focus\:ring-stone-500 {
4324
+ .dark\:hover\:text-white {
4089
4325
  @media (prefers-color-scheme: dark) {
4090
- &:focus {
4091
- --tw-ring-color: var(--color-stone-500);
4326
+ &:hover {
4327
+ @media (hover: hover) {
4328
+ color: var(--color-white);
4329
+ }
4092
4330
  }
4093
4331
  }
4094
4332
  }
4095
- .dark\:lg\:bg-stone-900 {
4333
+ .dark\:focus\:bg-sky-500 {
4096
4334
  @media (prefers-color-scheme: dark) {
4097
- @media (width >= 64rem) {
4098
- background-color: var(--color-stone-900);
4335
+ &:focus {
4336
+ background-color: var(--color-sky-500);
4099
4337
  }
4100
4338
  }
4101
4339
  }
4102
- .dark\:lg\:bg-stone-950 {
4340
+ .dark\:focus\:bg-sky-500\/20 {
4103
4341
  @media (prefers-color-scheme: dark) {
4104
- @media (width >= 64rem) {
4105
- background-color: var(--color-stone-950);
4342
+ &:focus {
4343
+ background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
4344
+ @supports (color: color-mix(in lab, red, red)) {
4345
+ background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
4346
+ }
4106
4347
  }
4107
4348
  }
4108
4349
  }
4109
- .dark\:lg\:ring-white\/10 {
4350
+ .dark\:focus\:bg-white\/5 {
4110
4351
  @media (prefers-color-scheme: dark) {
4111
- @media (width >= 64rem) {
4112
- --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
4352
+ &:focus {
4353
+ background-color: color-mix(in srgb, #fff 5%, transparent);
4113
4354
  @supports (color: color-mix(in lab, red, red)) {
4114
- --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4355
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4115
4356
  }
4116
4357
  }
4117
4358
  }
4118
4359
  }
4119
- .forced-colors\:bg-\[CanvasText\] {
4120
- @media (forced-colors: active) {
4121
- background-color: CanvasText;
4360
+ .dark\:focus\:text-white {
4361
+ @media (prefers-color-scheme: dark) {
4362
+ &:focus {
4363
+ color: var(--color-white);
4364
+ }
4122
4365
  }
4123
4366
  }
4124
- .forced-colors\:outline {
4125
- @media (forced-colors: active) {
4126
- outline-style: var(--tw-outline-style);
4127
- outline-width: 1px;
4367
+ .dark\:focus-visible\:outline-sky-500 {
4368
+ @media (prefers-color-scheme: dark) {
4369
+ &:focus-visible {
4370
+ outline-color: var(--color-sky-500);
4371
+ }
4128
4372
  }
4129
4373
  }
4130
- .\[\&\>section\+section\]\:mt-2\.5 {
4131
- &>section+section {
4132
- margin-top: calc(var(--spacing) * 2.5);
4374
+ .dark\:has-checked\:bg-sky-500 {
4375
+ @media (prefers-color-scheme: dark) {
4376
+ &:has(*:checked) {
4377
+ background-color: var(--color-sky-500);
4378
+ }
4133
4379
  }
4134
4380
  }
4135
- .\[\&\>section\+section\]\:mt-8 {
4136
- &>section+section {
4137
- margin-top: calc(var(--spacing) * 8);
4381
+ .forced-colors\:outline {
4382
+ @media (forced-colors: active) {
4383
+ outline-style: var(--tw-outline-style);
4384
+ outline-width: 1px;
4138
4385
  }
4139
4386
  }
4140
4387
  }
@@ -4258,60 +4505,58 @@
4258
4505
  display: block;
4259
4506
  width: 100%;
4260
4507
  appearance: none;
4261
- border-radius: var(--radius-lg);
4508
+ border-radius: var(--radius-md);
4262
4509
  padding-inline: calc(var(--spacing) * 3);
4263
- padding-block: calc(var(--spacing) * 2);
4264
- @media (width >= 40rem) {
4265
- padding-inline: calc(var(--spacing) * 2.5);
4266
- }
4267
- @media (width >= 40rem) {
4268
- padding-block: calc(var(--spacing) * 1.5);
4269
- }
4510
+ padding-block: calc(var(--spacing) * 1.5);
4270
4511
  font-size: var(--text-base);
4271
- line-height: calc(var(--spacing) * 6);
4512
+ line-height: var(--tw-leading, var(--text-base--line-height));
4272
4513
  @media (width >= 40rem) {
4273
4514
  font-size: var(--text-sm);
4274
4515
  line-height: calc(var(--spacing) * 6);
4275
4516
  }
4276
- color: var(--color-stone-100);
4517
+ color: var(--color-stone-900);
4277
4518
  &::placeholder {
4278
- color: var(--color-stone-500);
4519
+ color: var(--color-stone-400);
4279
4520
  }
4280
- border-style: var(--tw-border-style);
4281
- border-width: 1px;
4282
- border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
4283
- @supports (color: color-mix(in lab, red, red)) {
4284
- border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
4521
+ outline-style: var(--tw-outline-style);
4522
+ outline-width: 1px;
4523
+ outline-offset: calc(1px * -1);
4524
+ outline-color: var(--color-stone-300);
4525
+ background-color: var(--color-white);
4526
+ &:focus {
4527
+ outline-style: var(--tw-outline-style);
4528
+ outline-width: 2px;
4285
4529
  }
4286
- @media (prefers-color-scheme: dark) {
4287
- border-color: color-mix(in srgb, #fff 10%, transparent);
4288
- @supports (color: color-mix(in lab, red, red)) {
4289
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4290
- }
4530
+ &:focus {
4531
+ outline-offset: calc(2px * -1);
4532
+ }
4533
+ &:focus {
4534
+ outline-color: var(--color-indigo-600);
4291
4535
  }
4292
- background-color: transparent;
4293
4536
  @media (prefers-color-scheme: dark) {
4294
4537
  background-color: color-mix(in srgb, #fff 5%, transparent);
4295
4538
  @supports (color: color-mix(in lab, red, red)) {
4296
4539
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4297
4540
  }
4298
4541
  }
4299
- &:focus {
4300
- outline-style: var(--tw-outline-style);
4301
- outline-width: 1px;
4302
- }
4303
- &:focus {
4304
- outline-style: var(--tw-outline-style);
4305
- outline-width: 2px;
4542
+ @media (prefers-color-scheme: dark) {
4543
+ color: var(--color-white);
4306
4544
  }
4307
- &:focus {
4308
- outline-color: var(--color-stone-500);
4545
+ @media (prefers-color-scheme: dark) {
4546
+ outline-color: color-mix(in srgb, #fff 10%, transparent);
4547
+ @supports (color: color-mix(in lab, red, red)) {
4548
+ outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4549
+ }
4309
4550
  }
4310
- &:disabled {
4311
- border-color: var(--color-stone-600);
4551
+ @media (prefers-color-scheme: dark) {
4552
+ &::placeholder {
4553
+ color: var(--color-stone-500);
4554
+ }
4312
4555
  }
4313
- &:disabled {
4314
- background-color: var(--color-stone-700);
4556
+ @media (prefers-color-scheme: dark) {
4557
+ &:focus {
4558
+ outline-color: var(--color-indigo-500);
4559
+ }
4315
4560
  }
4316
4561
  &:disabled {
4317
4562
  opacity: 50%;
@@ -4337,397 +4582,136 @@
4337
4582
  min-height: 1.5em;
4338
4583
  }
4339
4584
  &::-webkit-datetime-edit {
4340
- display: inline-flex;
4341
- }
4342
- &::-webkit-datetime-edit {
4343
- padding: calc(var(--spacing) * 0);
4344
- }
4345
- &::-webkit-datetime-edit-year-field {
4346
- padding: calc(var(--spacing) * 0);
4347
- }
4348
- &::-webkit-datetime-edit-month-field {
4349
- padding: calc(var(--spacing) * 0);
4350
- }
4351
- &::-webkit-datetime-edit-day-field {
4352
- padding: calc(var(--spacing) * 0);
4353
- }
4354
- &::-webkit-datetime-edit-hour-field {
4355
- padding: calc(var(--spacing) * 0);
4356
- }
4357
- &::-webkit-datetime-edit-minute-field {
4358
- padding: calc(var(--spacing) * 0);
4359
- }
4360
- &::-webkit-datetime-edit-second-field {
4361
- padding: calc(var(--spacing) * 0);
4362
- }
4363
- &::-webkit-datetime-edit-millisecond-field {
4364
- padding: calc(var(--spacing) * 0);
4365
- }
4366
- &::-webkit-datetime-edit-meridiem-field {
4367
- padding: calc(var(--spacing) * 0);
4368
- }
4369
- }
4370
- }
4371
- input[type="submit"], input[type="button"], button {
4372
- position: relative;
4373
- isolation: isolate;
4374
- display: inline-flex;
4375
- align-items: center;
4376
- justify-content: center;
4377
- column-gap: calc(var(--spacing) * 2);
4378
- border-radius: var(--radius-lg);
4379
- border-style: var(--tw-border-style);
4380
- border-width: 1px;
4381
- font-size: var(--text-base);
4382
- line-height: calc(var(--spacing) * 6);
4383
- --tw-font-weight: var(--font-weight-semibold);
4384
- font-weight: var(--font-weight-semibold);
4385
- padding-inline: calc(calc(var(--spacing) * 3.5) - 1px);
4386
- padding-block: calc(calc(var(--spacing) * 2.5) - 1px);
4387
- @media (width >= 40rem) {
4388
- padding-inline: calc(calc(var(--spacing) * 3) - 1px);
4389
- }
4390
- @media (width >= 40rem) {
4391
- padding-block: calc(calc(var(--spacing) * 1.5) - 1px);
4392
- }
4393
- @media (width >= 40rem) {
4394
- font-size: var(--text-sm);
4395
- line-height: calc(var(--spacing) * 6);
4396
- }
4397
- &:focus {
4398
- outline-style: var(--tw-outline-style);
4399
- outline-width: 1px;
4400
- }
4401
- &:focus {
4402
- outline-style: var(--tw-outline-style);
4403
- outline-width: 2px;
4404
- }
4405
- &:focus {
4406
- outline-offset: 2px;
4407
- }
4408
- &:focus {
4409
- outline-color: var(--color-stone-400);
4410
- }
4411
- &:disabled {
4412
- opacity: 50%;
4413
- }
4414
- & > *[data-slot="icon"] {
4415
- margin-inline: calc(var(--spacing) * -0.5);
4416
- margin-block: calc(var(--spacing) * 0.5);
4417
- width: calc(var(--spacing) * 5);
4418
- height: calc(var(--spacing) * 5);
4419
- flex-shrink: 0;
4420
- color: --btn-icon;
4421
- @media (width >= 40rem) {
4422
- margin-block: calc(var(--spacing) * 1);
4423
- }
4424
- @media (width >= 40rem) {
4425
- width: calc(var(--spacing) * 4);
4426
- height: calc(var(--spacing) * 4);
4427
- }
4428
- }
4429
- &[data-variant="solid"], &:not([data-variant]) {
4430
- border-color: transparent;
4431
- background-color: var(--btn-bg);
4432
- &::before {
4433
- content: var(--tw-content);
4434
- position: absolute;
4435
- }
4436
- &::before {
4437
- content: var(--tw-content);
4438
- inset: calc(var(--spacing) * 0);
4439
- }
4440
- &::before {
4441
- content: var(--tw-content);
4442
- z-index: calc(10 * -1);
4443
- }
4444
- &::before {
4445
- content: var(--tw-content);
4446
- border-radius: calc(var(--radius-lg) - 1px);
4447
- }
4448
- &::before {
4449
- content: var(--tw-content);
4450
- background-color: var(--btn-bg);
4451
- }
4452
- &::before {
4453
- content: var(--tw-content);
4454
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4455
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4456
- }
4457
- &::after {
4458
- content: var(--tw-content);
4459
- position: absolute;
4460
- }
4461
- &::after {
4462
- content: var(--tw-content);
4463
- inset: calc(var(--spacing) * 0);
4464
- }
4465
- &::after {
4466
- content: var(--tw-content);
4467
- z-index: calc(10 * -1);
4468
- }
4469
- &::after {
4470
- content: var(--tw-content);
4471
- border-radius: calc(var(--radius-lg) - 1px);
4472
- }
4473
- &::after {
4474
- content: var(--tw-content);
4475
- --tw-shadow: inset 0 1px var(--tw-shadow-color, var(--theme--color-white/15%));
4476
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4477
- }
4478
- &:hover {
4479
- @media (hover: hover) {
4480
- &::after {
4481
- content: var(--tw-content);
4482
- background-color: var(--btn-hover-overlay);
4483
- }
4484
- }
4485
- }
4486
- &:active {
4487
- &::after {
4488
- content: var(--tw-content);
4489
- background-color: var(--btn-hover-overlay);
4490
- }
4491
- }
4492
- &:disabled {
4493
- &::before {
4494
- content: var(--tw-content);
4495
- --tw-shadow: 0 0 #0000;
4496
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4497
- }
4498
- }
4499
- &:disabled {
4500
- &::after {
4501
- content: var(--tw-content);
4502
- --tw-shadow: 0 0 #0000;
4503
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4504
- }
4505
- }
4506
- @media (prefers-color-scheme: dark) {
4507
- border-color: color-mix(in srgb, #fff 5%, transparent);
4508
- @supports (color: color-mix(in lab, red, red)) {
4509
- border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4510
- }
4511
- }
4512
- @media (prefers-color-scheme: dark) {
4513
- &::before {
4514
- content: var(--tw-content);
4515
- display: none;
4516
- }
4517
- }
4518
- @media (prefers-color-scheme: dark) {
4519
- &::after {
4520
- content: var(--tw-content);
4521
- inset: -1px;
4522
- }
4523
- }
4524
- @media (prefers-color-scheme: dark) {
4525
- &::after {
4526
- content: var(--tw-content);
4527
- border-radius: var(--radius-lg);
4528
- }
4529
- }
4530
- }
4531
- &[data-variant="outline"] {
4532
- border-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 10%, transparent);
4533
- @supports (color: color-mix(in lab, red, red)) {
4534
- border-color: color-mix(in oklab, var(--color-stone-950) 10%, transparent);
4535
- }
4536
- color: var(--color-stone-950);
4537
- --btn-icon: var(--color-stone-500);
4538
- &:hover {
4539
- @media (hover: hover) {
4540
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 2.5%, transparent);
4541
- @supports (color: color-mix(in lab, red, red)) {
4542
- background-color: color-mix(in oklab, var(--color-stone-950) 2.5%, transparent);
4543
- }
4544
- }
4545
- }
4546
- &:hover {
4547
- @media (hover: hover) {
4548
- --btn-icon: var(--color-stone-700);
4549
- }
4550
- }
4551
- &:active {
4552
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 2.5%, transparent);
4553
- @supports (color: color-mix(in lab, red, red)) {
4554
- background-color: color-mix(in oklab, var(--color-stone-950) 2.5%, transparent);
4555
- }
4556
- }
4557
- &:active {
4558
- --btn-icon: var(--color-stone-700);
4559
- }
4560
- @media (prefers-color-scheme: dark) {
4561
- border-color: color-mix(in srgb, #fff 15%, transparent);
4562
- @supports (color: color-mix(in lab, red, red)) {
4563
- border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
4564
- }
4565
- }
4566
- @media (prefers-color-scheme: dark) {
4567
- color: var(--color-white);
4568
- }
4569
- @media (prefers-color-scheme: dark) {
4570
- &:hover {
4571
- @media (hover: hover) {
4572
- background-color: color-mix(in srgb, #fff 5%, transparent);
4573
- @supports (color: color-mix(in lab, red, red)) {
4574
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4575
- }
4576
- }
4577
- }
4585
+ display: inline-flex;
4578
4586
  }
4579
- @media (prefers-color-scheme: dark) {
4580
- &:hover {
4581
- @media (hover: hover) {
4582
- --btn-icon: var(--color-stone-400);
4583
- }
4584
- }
4587
+ &::-webkit-datetime-edit {
4588
+ padding: calc(var(--spacing) * 0);
4585
4589
  }
4586
- @media (prefers-color-scheme: dark) {
4587
- &:active {
4588
- background-color: color-mix(in srgb, #fff 5%, transparent);
4589
- @supports (color: color-mix(in lab, red, red)) {
4590
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4591
- }
4592
- }
4590
+ &::-webkit-datetime-edit-year-field {
4591
+ padding: calc(var(--spacing) * 0);
4593
4592
  }
4594
- @media (prefers-color-scheme: dark) {
4595
- &:active {
4596
- --btn-icon: var(--color-stone-400);
4597
- }
4593
+ &::-webkit-datetime-edit-month-field {
4594
+ padding: calc(var(--spacing) * 0);
4598
4595
  }
4599
- }
4600
- &[data-variant="plain"] {
4601
- border-color: transparent;
4602
- color: var(--color-stone-950);
4603
- --btn-icon: var(--color-stone-500);
4604
- &:hover {
4605
- @media (hover: hover) {
4606
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
4607
- @supports (color: color-mix(in lab, red, red)) {
4608
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
4609
- }
4610
- }
4596
+ &::-webkit-datetime-edit-day-field {
4597
+ padding: calc(var(--spacing) * 0);
4611
4598
  }
4612
- &:hover {
4613
- @media (hover: hover) {
4614
- --btn-icon: var(--color-stone-700);
4615
- }
4599
+ &::-webkit-datetime-edit-hour-field {
4600
+ padding: calc(var(--spacing) * 0);
4616
4601
  }
4617
- &:active {
4618
- background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 5%, transparent);
4619
- @supports (color: color-mix(in lab, red, red)) {
4620
- background-color: color-mix(in oklab, var(--color-stone-950) 5%, transparent);
4621
- }
4602
+ &::-webkit-datetime-edit-minute-field {
4603
+ padding: calc(var(--spacing) * 0);
4622
4604
  }
4623
- &:active {
4624
- --btn-icon: var(--color-stone-700);
4605
+ &::-webkit-datetime-edit-second-field {
4606
+ padding: calc(var(--spacing) * 0);
4625
4607
  }
4626
- @media (prefers-color-scheme: dark) {
4627
- color: var(--color-white);
4608
+ &::-webkit-datetime-edit-millisecond-field {
4609
+ padding: calc(var(--spacing) * 0);
4628
4610
  }
4629
- @media (prefers-color-scheme: dark) {
4630
- &:hover {
4631
- @media (hover: hover) {
4632
- background-color: color-mix(in srgb, #fff 10%, transparent);
4633
- @supports (color: color-mix(in lab, red, red)) {
4634
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4611
+ &::-webkit-datetime-edit-meridiem-field {
4612
+ padding: calc(var(--spacing) * 0);
4613
+ }
4614
+ }
4615
+ }
4616
+ input[type="submit"], input[type="button"], button {
4617
+ @layer components {
4618
+ @layer components {
4619
+ @layer components {
4620
+ --tw-font-weight: var(--font-weight-semibold);
4621
+ font-weight: var(--font-weight-semibold);
4622
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
4623
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4624
+ --tw-outline-style: none;
4625
+ outline-style: none;
4626
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
4627
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4628
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4629
+ &:focus-visible {
4630
+ outline-style: var(--tw-outline-style);
4631
+ outline-width: 2px;
4632
+ }
4633
+ &:focus-visible {
4634
+ outline-offset: 2px;
4635
+ }
4636
+ &:disabled {
4637
+ pointer-events: none;
4638
+ }
4639
+ &:disabled {
4640
+ opacity: 50%;
4641
+ }
4642
+ @media (prefers-color-scheme: dark) {
4643
+ --tw-shadow: 0 0 #0000;
4644
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4645
+ }
4646
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
4647
+ @layer components {
4648
+ display: inline-flex;
4649
+ align-items: center;
4650
+ column-gap: calc(var(--spacing) * 1.5);
4651
+ border-radius: var(--radius-md);
4652
+ padding-inline: calc(var(--spacing) * 2.5);
4653
+ padding-block: calc(var(--spacing) * 1.5);
4654
+ font-size: var(--text-sm);
4655
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4656
+ & > svg {
4657
+ width: calc(var(--spacing) * 5);
4658
+ height: calc(var(--spacing) * 5);
4659
+ &:first-child {
4660
+ margin-left: calc(var(--spacing) * -0.5);
4661
+ }
4662
+ &:last-child {
4663
+ margin-right: calc(var(--spacing) * -0.5);
4664
+ }
4665
+ }
4635
4666
  }
4636
4667
  }
4637
4668
  }
4638
- }
4639
- @media (prefers-color-scheme: dark) {
4669
+ background-color: var(--color-sky-600);
4670
+ color: var(--color-white);
4640
4671
  &:hover {
4641
4672
  @media (hover: hover) {
4642
- --btn-icon: var(--color-stone-400);
4643
- }
4644
- }
4645
- }
4646
- @media (prefers-color-scheme: dark) {
4647
- &:active {
4648
- background-color: color-mix(in srgb, #fff 10%, transparent);
4649
- @supports (color: color-mix(in lab, red, red)) {
4650
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4673
+ background-color: var(--color-sky-500);
4651
4674
  }
4652
4675
  }
4653
- }
4654
- @media (prefers-color-scheme: dark) {
4655
- &:active {
4656
- --btn-icon: var(--color-stone-400);
4676
+ &:focus-visible {
4677
+ outline-color: var(--color-sky-600);
4657
4678
  }
4658
- }
4659
- }
4660
- &[data-color="primary"], &:not([data-color]) {
4661
- color: var(--color-white);
4662
- --btn-bg: var(--color-stone-600);
4663
- --btn-border: color-mix(in srgb, oklch(37.4% 0.01 67.558) 90%, transparent);
4664
- @supports (color: color-mix(in lab, red, red)) {
4665
- --btn-border: color-mix(in oklab, var(--color-stone-700) 90%, transparent);
4666
- }
4667
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
4668
- @supports (color: color-mix(in lab, red, red)) {
4669
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
4670
- }
4671
- --btn-icon: var(--color-stone-400);
4672
- &:hover {
4673
- @media (hover: hover) {
4674
- --btn-icon: var(--color-stone-300);
4679
+ @media (prefers-color-scheme: dark) {
4680
+ background-color: var(--color-sky-600);
4675
4681
  }
4676
- }
4677
- &:active {
4678
- --btn-icon: var(--color-stone-300);
4679
- }
4680
- }
4681
- &[data-color="accent"] {
4682
- color: var(--color-white);
4683
- --btn-bg: var(--color-sky-500);
4684
- --btn-border: color-mix(in srgb, oklch(58.8% 0.158 241.966) 80%, transparent);
4685
- @supports (color: color-mix(in lab, red, red)) {
4686
- --btn-border: color-mix(in oklab, var(--color-sky-600) 80%, transparent);
4687
- }
4688
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
4689
- @supports (color: color-mix(in lab, red, red)) {
4690
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
4691
- }
4692
- --btn-icon: color-mix(in srgb, #fff 60%, transparent);
4693
- @supports (color: color-mix(in lab, red, red)) {
4694
- --btn-icon: color-mix(in oklab, var(--color-white) 60%, transparent);
4695
- }
4696
- &:hover {
4697
- @media (hover: hover) {
4698
- --btn-icon: color-mix(in srgb, #fff 80%, transparent);
4699
- @supports (color: color-mix(in lab, red, red)) {
4700
- --btn-icon: color-mix(in oklab, var(--color-white) 80%, transparent);
4682
+ @media (prefers-color-scheme: dark) {
4683
+ &:hover {
4684
+ @media (hover: hover) {
4685
+ background-color: var(--color-sky-400);
4686
+ }
4701
4687
  }
4702
4688
  }
4703
- }
4704
- &:active {
4705
- --btn-icon: color-mix(in srgb, #fff 80%, transparent);
4706
- @supports (color: color-mix(in lab, red, red)) {
4707
- --btn-icon: color-mix(in oklab, var(--color-white) 80%, transparent);
4689
+ @media (prefers-color-scheme: dark) {
4690
+ &:focus-visible {
4691
+ outline-color: var(--color-sky-500);
4692
+ }
4708
4693
  }
4709
4694
  }
4710
- }
4711
- &[data-color="destructive"] {
4712
- color: var(--color-white);
4713
- --btn-bg: var(--color-red-600);
4714
- --btn-border: color-mix(in srgb, oklch(50.5% 0.213 27.518) 90%, transparent);
4715
- @supports (color: color-mix(in lab, red, red)) {
4716
- --btn-border: color-mix(in oklab, var(--color-red-700) 90%, transparent);
4717
- }
4718
- --btn-hover-overlay: color-mix(in srgb, #fff 10%, transparent);
4719
- @supports (color: color-mix(in lab, red, red)) {
4720
- --btn-hover-overlay: color-mix(in oklab, var(--color-white) 10%, transparent);
4721
- }
4722
- --btn-icon: var(--color-red-300);
4723
- &:hover {
4724
- @media (hover: hover) {
4725
- --btn-icon: var(--color-red-200);
4695
+ @layer components {
4696
+ display: inline-flex;
4697
+ align-items: center;
4698
+ column-gap: calc(var(--spacing) * 1.5);
4699
+ border-radius: var(--radius-md);
4700
+ padding-inline: calc(var(--spacing) * 2.5);
4701
+ padding-block: calc(var(--spacing) * 1.5);
4702
+ font-size: var(--text-sm);
4703
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4704
+ & > svg {
4705
+ width: calc(var(--spacing) * 5);
4706
+ height: calc(var(--spacing) * 5);
4707
+ &:first-child {
4708
+ margin-left: calc(var(--spacing) * -0.5);
4709
+ }
4710
+ &:last-child {
4711
+ margin-right: calc(var(--spacing) * -0.5);
4712
+ }
4726
4713
  }
4727
4714
  }
4728
- &:active {
4729
- --btn-icon: var(--color-red-200);
4730
- }
4731
4715
  }
4732
4716
  }
4733
4717
  }
@@ -5222,7 +5206,7 @@
5222
5206
  }
5223
5207
  @layer base {
5224
5208
  *, ::after, ::before, ::backdrop, ::file-selector-button {
5225
- border-color: var(--color-gray-200, currentColor);
5209
+ border-color: var(--color-stone-200, currentColor);
5226
5210
  }
5227
5211
  }
5228
5212
  @layer components {
@@ -5232,25 +5216,24 @@
5232
5216
  }
5233
5217
  }
5234
5218
  }
5235
- @property --tw-border-style {
5236
- syntax: "*";
5237
- inherits: false;
5238
- initial-value: solid;
5219
+ @layer base {
5220
+ * {
5221
+ scrollbar-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) calc(30 * 1%), transparent) transparent;
5222
+ @supports (color: color-mix(in lab, red, red)) {
5223
+ scrollbar-color: color-mix(in oklab, var(--color-stone-500) calc(30 * 1%), transparent) transparent;
5224
+ }
5225
+ @media (prefers-color-scheme: dark) {
5226
+ scrollbar-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) calc(30 * 1%), transparent) transparent;
5227
+ @supports (color: color-mix(in lab, red, red)) {
5228
+ scrollbar-color: color-mix(in oklab, var(--color-stone-400) calc(30 * 1%), transparent) transparent;
5229
+ }
5230
+ }
5231
+ }
5239
5232
  }
5240
5233
  @property --tw-font-weight {
5241
5234
  syntax: "*";
5242
5235
  inherits: false;
5243
5236
  }
5244
- @property --tw-outline-style {
5245
- syntax: "*";
5246
- inherits: false;
5247
- initial-value: solid;
5248
- }
5249
- @property --tw-content {
5250
- syntax: "*";
5251
- initial-value: "";
5252
- inherits: false;
5253
- }
5254
5237
  @property --tw-shadow {
5255
5238
  syntax: "*";
5256
5239
  inherits: false;
@@ -5316,20 +5299,10 @@
5316
5299
  inherits: false;
5317
5300
  initial-value: 0 0 #0000;
5318
5301
  }
5319
- @property --tw-translate-x {
5320
- syntax: "*";
5321
- inherits: false;
5322
- initial-value: 0;
5323
- }
5324
- @property --tw-translate-y {
5325
- syntax: "*";
5326
- inherits: false;
5327
- initial-value: 0;
5328
- }
5329
- @property --tw-translate-z {
5302
+ @property --tw-outline-style {
5330
5303
  syntax: "*";
5331
5304
  inherits: false;
5332
- initial-value: 0;
5305
+ initial-value: solid;
5333
5306
  }
5334
5307
  @property --tw-blur {
5335
5308
  syntax: "*";
@@ -5384,87 +5357,131 @@
5384
5357
  syntax: "*";
5385
5358
  inherits: false;
5386
5359
  }
5387
- @property --tw-backdrop-blur {
5360
+ @property --tw-border-style {
5388
5361
  syntax: "*";
5389
5362
  inherits: false;
5363
+ initial-value: solid;
5390
5364
  }
5391
- @property --tw-backdrop-brightness {
5365
+ @property --tw-duration {
5392
5366
  syntax: "*";
5393
5367
  inherits: false;
5394
5368
  }
5395
- @property --tw-backdrop-contrast {
5369
+ @property --tw-translate-x {
5396
5370
  syntax: "*";
5397
5371
  inherits: false;
5372
+ initial-value: 0;
5398
5373
  }
5399
- @property --tw-backdrop-grayscale {
5374
+ @property --tw-translate-y {
5400
5375
  syntax: "*";
5401
5376
  inherits: false;
5377
+ initial-value: 0;
5402
5378
  }
5403
- @property --tw-backdrop-hue-rotate {
5379
+ @property --tw-translate-z {
5404
5380
  syntax: "*";
5405
5381
  inherits: false;
5382
+ initial-value: 0;
5406
5383
  }
5407
- @property --tw-backdrop-invert {
5384
+ @property --tw-rotate-x {
5408
5385
  syntax: "*";
5409
5386
  inherits: false;
5410
5387
  }
5411
- @property --tw-backdrop-opacity {
5388
+ @property --tw-rotate-y {
5412
5389
  syntax: "*";
5413
5390
  inherits: false;
5414
5391
  }
5415
- @property --tw-backdrop-saturate {
5392
+ @property --tw-rotate-z {
5416
5393
  syntax: "*";
5417
5394
  inherits: false;
5418
5395
  }
5419
- @property --tw-backdrop-sepia {
5396
+ @property --tw-skew-x {
5420
5397
  syntax: "*";
5421
5398
  inherits: false;
5422
5399
  }
5423
- @property --tw-duration {
5400
+ @property --tw-skew-y {
5424
5401
  syntax: "*";
5425
5402
  inherits: false;
5426
5403
  }
5427
- @property --tw-rotate-x {
5404
+ @property --tw-space-y-reverse {
5428
5405
  syntax: "*";
5429
5406
  inherits: false;
5407
+ initial-value: 0;
5430
5408
  }
5431
- @property --tw-rotate-y {
5409
+ @property --tw-space-x-reverse {
5432
5410
  syntax: "*";
5433
5411
  inherits: false;
5412
+ initial-value: 0;
5434
5413
  }
5435
- @property --tw-rotate-z {
5414
+ @property --tw-divide-y-reverse {
5436
5415
  syntax: "*";
5437
5416
  inherits: false;
5417
+ initial-value: 0;
5438
5418
  }
5439
- @property --tw-skew-x {
5419
+ @property --tw-leading {
5440
5420
  syntax: "*";
5441
5421
  inherits: false;
5442
5422
  }
5443
- @property --tw-skew-y {
5423
+ @property --tw-tracking {
5444
5424
  syntax: "*";
5445
5425
  inherits: false;
5446
5426
  }
5447
- @property --tw-space-y-reverse {
5427
+ @property --tw-backdrop-blur {
5448
5428
  syntax: "*";
5449
5429
  inherits: false;
5450
- initial-value: 0;
5451
5430
  }
5452
- @property --tw-space-x-reverse {
5431
+ @property --tw-backdrop-brightness {
5453
5432
  syntax: "*";
5454
5433
  inherits: false;
5455
- initial-value: 0;
5456
5434
  }
5457
- @property --tw-divide-y-reverse {
5435
+ @property --tw-backdrop-contrast {
5458
5436
  syntax: "*";
5459
5437
  inherits: false;
5460
- initial-value: 0;
5461
5438
  }
5462
- @property --tw-leading {
5439
+ @property --tw-backdrop-grayscale {
5463
5440
  syntax: "*";
5464
5441
  inherits: false;
5465
5442
  }
5466
- @property --tw-tracking {
5443
+ @property --tw-backdrop-hue-rotate {
5444
+ syntax: "*";
5445
+ inherits: false;
5446
+ }
5447
+ @property --tw-backdrop-invert {
5448
+ syntax: "*";
5449
+ inherits: false;
5450
+ }
5451
+ @property --tw-backdrop-opacity {
5452
+ syntax: "*";
5453
+ inherits: false;
5454
+ }
5455
+ @property --tw-backdrop-saturate {
5456
+ syntax: "*";
5457
+ inherits: false;
5458
+ }
5459
+ @property --tw-backdrop-sepia {
5460
+ syntax: "*";
5461
+ inherits: false;
5462
+ }
5463
+ @property --tw-ease {
5464
+ syntax: "*";
5465
+ inherits: false;
5466
+ }
5467
+ @property --tw-scale-x {
5468
+ syntax: "*";
5469
+ inherits: false;
5470
+ initial-value: 1;
5471
+ }
5472
+ @property --tw-scale-y {
5473
+ syntax: "*";
5474
+ inherits: false;
5475
+ initial-value: 1;
5476
+ }
5477
+ @property --tw-scale-z {
5478
+ syntax: "*";
5479
+ inherits: false;
5480
+ initial-value: 1;
5481
+ }
5482
+ @property --tw-content {
5467
5483
  syntax: "*";
5484
+ initial-value: "";
5468
5485
  inherits: false;
5469
5486
  }
5470
5487
  @keyframes appear-then-fade {
@@ -5480,10 +5497,7 @@
5480
5497
  @layer properties {
5481
5498
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
5482
5499
  *, ::before, ::after, ::backdrop {
5483
- --tw-border-style: solid;
5484
5500
  --tw-font-weight: initial;
5485
- --tw-outline-style: solid;
5486
- --tw-content: "";
5487
5501
  --tw-shadow: 0 0 #0000;
5488
5502
  --tw-shadow-color: initial;
5489
5503
  --tw-shadow-alpha: 100%;
@@ -5498,9 +5512,7 @@
5498
5512
  --tw-ring-offset-width: 0px;
5499
5513
  --tw-ring-offset-color: #fff;
5500
5514
  --tw-ring-offset-shadow: 0 0 #0000;
5501
- --tw-translate-x: 0;
5502
- --tw-translate-y: 0;
5503
- --tw-translate-z: 0;
5515
+ --tw-outline-style: solid;
5504
5516
  --tw-blur: initial;
5505
5517
  --tw-brightness: initial;
5506
5518
  --tw-contrast: initial;
@@ -5514,16 +5526,11 @@
5514
5526
  --tw-drop-shadow-color: initial;
5515
5527
  --tw-drop-shadow-alpha: 100%;
5516
5528
  --tw-drop-shadow-size: initial;
5517
- --tw-backdrop-blur: initial;
5518
- --tw-backdrop-brightness: initial;
5519
- --tw-backdrop-contrast: initial;
5520
- --tw-backdrop-grayscale: initial;
5521
- --tw-backdrop-hue-rotate: initial;
5522
- --tw-backdrop-invert: initial;
5523
- --tw-backdrop-opacity: initial;
5524
- --tw-backdrop-saturate: initial;
5525
- --tw-backdrop-sepia: initial;
5529
+ --tw-border-style: solid;
5526
5530
  --tw-duration: initial;
5531
+ --tw-translate-x: 0;
5532
+ --tw-translate-y: 0;
5533
+ --tw-translate-z: 0;
5527
5534
  --tw-rotate-x: initial;
5528
5535
  --tw-rotate-y: initial;
5529
5536
  --tw-rotate-z: initial;
@@ -5534,6 +5541,20 @@
5534
5541
  --tw-divide-y-reverse: 0;
5535
5542
  --tw-leading: initial;
5536
5543
  --tw-tracking: initial;
5544
+ --tw-backdrop-blur: initial;
5545
+ --tw-backdrop-brightness: initial;
5546
+ --tw-backdrop-contrast: initial;
5547
+ --tw-backdrop-grayscale: initial;
5548
+ --tw-backdrop-hue-rotate: initial;
5549
+ --tw-backdrop-invert: initial;
5550
+ --tw-backdrop-opacity: initial;
5551
+ --tw-backdrop-saturate: initial;
5552
+ --tw-backdrop-sepia: initial;
5553
+ --tw-ease: initial;
5554
+ --tw-scale-x: 1;
5555
+ --tw-scale-y: 1;
5556
+ --tw-scale-z: 1;
5557
+ --tw-content: "";
5537
5558
  }
5538
5559
  }
5539
5560
  }