uchi 0.1.5 → 0.1.7

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 (143) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -0
  3. data/app/assets/javascripts/controllers/fields/belongs_to_controller.js +130 -0
  4. data/app/assets/javascripts/controllers/fields/has_many_controller.js +146 -0
  5. data/app/assets/javascripts/uchi/application.js +3456 -24
  6. data/app/assets/javascripts/uchi.js +20 -0
  7. data/app/assets/stylesheets/uchi/application.css +676 -2473
  8. data/app/assets/tailwind/uchi.css +6 -6
  9. data/app/components/uchi/field/belongs_to/edit.html.erb +73 -1
  10. data/app/components/uchi/field/belongs_to/index.html.erb +1 -1
  11. data/app/components/uchi/field/belongs_to/show.html.erb +3 -5
  12. data/app/components/uchi/field/belongs_to.rb +53 -30
  13. data/app/components/uchi/field/boolean/edit.html.erb +1 -1
  14. data/app/components/uchi/field/date/edit.html.erb +1 -1
  15. data/app/components/uchi/field/date_time/edit.html.erb +1 -1
  16. data/app/components/uchi/field/file/edit.html.erb +1 -1
  17. data/app/components/uchi/field/file/index.html.erb +2 -1
  18. data/app/components/uchi/field/file/show.html.erb +3 -2
  19. data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb +6 -4
  20. data/app/components/uchi/field/has_many/edit.html.erb +86 -1
  21. data/app/components/uchi/field/has_many/show.html.erb +6 -4
  22. data/app/components/uchi/field/has_many.rb +59 -11
  23. data/app/components/uchi/field/id/index.html.erb +1 -1
  24. data/app/components/uchi/field/id/show.html.erb +1 -1
  25. data/app/components/uchi/field/image/edit.html.erb +1 -1
  26. data/app/components/uchi/field/image/index.html.erb +2 -1
  27. data/app/components/uchi/field/image/show.html.erb +2 -1
  28. data/app/components/uchi/field/number/edit.html.erb +1 -1
  29. data/app/components/uchi/field/string/edit.html.erb +1 -1
  30. data/app/components/uchi/field/text/edit.html.erb +1 -1
  31. data/app/components/{flowbite → uchi/flowbite}/breadcrumb.rb +5 -5
  32. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_home.rb +2 -2
  33. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/current.rb +3 -3
  34. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/first.rb +4 -4
  35. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item.rb +4 -4
  36. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_separator.rb +7 -5
  37. data/app/components/uchi/flowbite/button/outline.rb +37 -0
  38. data/app/components/uchi/flowbite/button/pill.rb +40 -0
  39. data/app/components/uchi/flowbite/button.rb +93 -0
  40. data/app/components/uchi/flowbite/card/card.html.erb +7 -0
  41. data/app/components/uchi/flowbite/card/title.rb +37 -0
  42. data/app/components/uchi/flowbite/card.rb +84 -0
  43. data/app/components/{flowbite → uchi/flowbite}/input/checkbox.rb +7 -7
  44. data/app/components/{flowbite → uchi/flowbite}/input/date.rb +1 -1
  45. data/app/components/{flowbite → uchi/flowbite}/input/date_time.rb +1 -1
  46. data/app/components/{flowbite → uchi/flowbite}/input/email.rb +1 -1
  47. data/app/components/{flowbite → uchi/flowbite}/input/field.rb +11 -10
  48. data/app/components/uchi/flowbite/input/file.rb +30 -0
  49. data/app/components/{flowbite → uchi/flowbite}/input/hint.rb +6 -5
  50. data/app/components/{flowbite → uchi/flowbite}/input/label.rb +8 -7
  51. data/app/components/{flowbite → uchi/flowbite}/input/number.rb +1 -1
  52. data/app/components/{flowbite → uchi/flowbite}/input/password.rb +1 -1
  53. data/app/components/{flowbite → uchi/flowbite}/input/phone.rb +1 -1
  54. data/app/components/{flowbite → uchi/flowbite}/input/radio_button.rb +7 -7
  55. data/app/components/{flowbite → uchi/flowbite}/input/select.rb +16 -7
  56. data/app/components/uchi/flowbite/input/textarea.rb +42 -0
  57. data/app/components/{flowbite → uchi/flowbite}/input/url.rb +1 -1
  58. data/app/components/uchi/flowbite/input/validation_error.rb +39 -0
  59. data/app/components/uchi/flowbite/input_field/checkbox.html.erb +9 -0
  60. data/app/components/{flowbite → uchi/flowbite}/input_field/checkbox.rb +10 -6
  61. data/app/components/{flowbite → uchi/flowbite}/input_field/date.rb +2 -2
  62. data/app/components/{flowbite → uchi/flowbite}/input_field/date_time.rb +2 -2
  63. data/app/components/{flowbite → uchi/flowbite}/input_field/email.rb +2 -2
  64. data/app/components/{flowbite → uchi/flowbite}/input_field/file.rb +2 -2
  65. data/app/components/uchi/flowbite/input_field/input_field.html.erb +9 -0
  66. data/app/components/{flowbite → uchi/flowbite}/input_field/number.rb +2 -2
  67. data/app/components/{flowbite → uchi/flowbite}/input_field/password.rb +2 -2
  68. data/app/components/{flowbite → uchi/flowbite}/input_field/phone.rb +2 -2
  69. data/app/components/uchi/flowbite/input_field/radio_button.html.erb +9 -0
  70. data/app/components/{flowbite → uchi/flowbite}/input_field/radio_button.rb +13 -9
  71. data/app/components/{flowbite → uchi/flowbite}/input_field/select.rb +7 -3
  72. data/app/components/{flowbite → uchi/flowbite}/input_field/text.rb +1 -1
  73. data/app/components/{flowbite → uchi/flowbite}/input_field/textarea.rb +2 -2
  74. data/app/components/{flowbite → uchi/flowbite}/input_field/url.rb +2 -2
  75. data/app/components/{flowbite → uchi/flowbite}/input_field.rb +19 -5
  76. data/app/components/uchi/flowbite/link.rb +41 -0
  77. data/app/components/{flowbite → uchi/flowbite}/style.rb +1 -1
  78. data/app/components/{flowbite → uchi/flowbite}/toast/icon.rb +1 -1
  79. data/app/components/uchi/flowbite/toast/toast.html.erb +40 -0
  80. data/app/components/{flowbite → uchi/flowbite}/toast.rb +2 -2
  81. data/app/components/uchi/ui/actions/dropdown/dropdown.html.erb +59 -0
  82. data/app/components/uchi/ui/actions/dropdown.rb +32 -0
  83. data/app/components/uchi/ui/breadcrumb/breadcrumb.html.erb +4 -4
  84. data/app/components/uchi/ui/form/input/collection_checkboxes.html.erb +2 -1
  85. data/app/components/uchi/ui/form/input/collection_checkboxes.rb +12 -17
  86. data/app/components/uchi/ui/frame/frame.html.erb +6 -1
  87. data/app/components/uchi/ui/index/records_table/records_table.html.erb +109 -18
  88. data/app/components/uchi/ui/index/records_table/search_form/search_form.html.erb +21 -5
  89. data/app/components/uchi/ui/navigation/navigation.html.erb +9 -0
  90. data/app/components/uchi/ui/navigation.rb +37 -0
  91. data/app/components/uchi/ui/no_value/no_value.html.erb +1 -0
  92. data/app/components/uchi/ui/no_value.rb +8 -0
  93. data/app/components/uchi/ui/page_header/page_header.html.erb +13 -8
  94. data/app/components/uchi/ui/pagination/current_link.html.erb +1 -1
  95. data/app/components/uchi/ui/pagination/gap.html.erb +7 -1
  96. data/app/components/uchi/ui/pagination/link.html.erb +1 -1
  97. data/app/components/uchi/ui/pagination/next_link.html.erb +18 -3
  98. data/app/components/uchi/ui/pagination/pagination.html.erb +3 -1
  99. data/app/components/uchi/ui/pagination/previous_link.html.erb +18 -3
  100. data/app/components/uchi/ui/pagination.rb +1 -1
  101. data/app/components/uchi/ui/show/attribute_fields/attribute_fields.html.erb +4 -3
  102. data/app/components/uchi/ui/spinner/spinner.html.erb +17 -3
  103. data/app/controllers/uchi/actions/executions_controller.rb +107 -0
  104. data/app/controllers/uchi/belongs_to/associated_records_controller.rb +89 -0
  105. data/app/controllers/uchi/has_many/associated_records_controller.rb +89 -0
  106. data/app/controllers/uchi/repository_controller.rb +21 -1
  107. data/app/views/layouts/uchi/_flash_messages.html.erb +1 -1
  108. data/app/views/layouts/uchi/_javascript.html.erb +1 -0
  109. data/app/views/layouts/uchi/_stylesheets.html.erb +1 -0
  110. data/app/views/layouts/uchi/application.html.erb +13 -19
  111. data/app/views/uchi/belongs_to/associated_records/index.html.erb +13 -0
  112. data/app/views/uchi/has_many/associated_records/index.html.erb +26 -0
  113. data/app/views/uchi/navigation/_main.html.erb +92 -0
  114. data/app/views/uchi/repository/edit.html.erb +2 -2
  115. data/app/views/uchi/repository/index.html.erb +12 -3
  116. data/app/views/uchi/repository/new.html.erb +2 -2
  117. data/app/views/uchi/repository/show.html.erb +13 -2
  118. data/lib/generators/uchi/controller/controller_generator.rb +0 -4
  119. data/lib/generators/uchi/controller/templates/controller.rb.tt +0 -5
  120. data/lib/generators/uchi/install/install_generator.rb +1 -1
  121. data/lib/generators/uchi/scaffold/scaffold_generator.rb +15 -0
  122. data/lib/uchi/action.rb +84 -0
  123. data/lib/uchi/action_response.rb +108 -0
  124. data/lib/uchi/field/configuration.rb +1 -1
  125. data/lib/uchi/repository/translate.rb +14 -0
  126. data/lib/uchi/repository.rb +38 -2
  127. data/lib/uchi/routes.rb +45 -0
  128. data/lib/uchi/version.rb +1 -1
  129. data/lib/uchi.rb +6 -1
  130. metadata +72 -50
  131. data/app/components/flowbite/button/outline.rb +0 -22
  132. data/app/components/flowbite/button/pill.rb +0 -40
  133. data/app/components/flowbite/button.rb +0 -92
  134. data/app/components/flowbite/card.rb +0 -45
  135. data/app/components/flowbite/input/file.rb +0 -30
  136. data/app/components/flowbite/input/textarea.rb +0 -42
  137. data/app/components/flowbite/input/validation_error.rb +0 -11
  138. data/app/components/flowbite/input_field/checkbox.html.erb +0 -14
  139. data/app/components/flowbite/input_field/input_field.html.erb +0 -8
  140. data/app/components/flowbite/input_field/radio_button.html.erb +0 -14
  141. data/app/components/flowbite/link.rb +0 -21
  142. data/app/components/flowbite/toast/toast.html.erb +0 -11
  143. /data/app/components/{flowbite → uchi/flowbite}/toast/icon.html.erb +0 -0
@@ -3,137 +3,75 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-50: #FEF2F2;
11
- --color-red-100: #FEE2E2;
12
- --color-red-200: #FECACA;
13
- --color-red-300: #FCA5A5;
14
- --color-red-400: #F87171;
15
- --color-red-500: #EF4444;
16
- --color-red-600: #DC2626;
17
- --color-red-700: #B91C1C;
18
- --color-red-800: #991B1B;
19
- --color-red-900: #7F1D1D;
20
- --color-orange-50: #FFFAF0;
21
- --color-orange-100: #FEEBC8;
22
- --color-orange-200: #FBD38D;
23
- --color-orange-300: #F6AD55;
24
- --color-orange-400: #ED8936;
25
- --color-orange-500: #DD6B20;
26
- --color-orange-600: #C05621;
27
- --color-orange-700: #9C4221;
28
- --color-orange-800: #7B341E;
29
- --color-orange-900: #652B19;
30
- --color-yellow-50: #FFFBEB;
31
- --color-yellow-100: #FEF3C7;
32
- --color-yellow-200: #FDE68A;
33
- --color-yellow-300: #FCD34D;
34
- --color-yellow-400: #FBBF24;
35
- --color-yellow-500: #F59E0B;
36
- --color-yellow-600: #D97706;
37
- --color-yellow-700: #B45309;
38
- --color-yellow-800: #92400E;
39
- --color-yellow-900: #78350F;
40
- --color-lime-200: oklch(93.8% 0.127 124.321);
41
- --color-lime-300: oklch(89.7% 0.196 126.665);
42
- --color-lime-400: oklch(84.1% 0.238 128.85);
6
+ --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
7
+ --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
8
+ --color-red-100: oklch(93.6% 0.032 17.717);
9
+ --color-red-200: oklch(88.5% 0.062 18.334);
10
+ --color-red-500: oklch(63.7% 0.237 25.331);
11
+ --color-red-600: oklch(57.7% 0.245 27.325);
12
+ --color-red-800: oklch(44.4% 0.177 26.899);
13
+ --color-orange-100: oklch(95.4% 0.038 75.164);
14
+ --color-orange-200: oklch(90.1% 0.076 70.697);
15
+ --color-orange-300: oklch(83.7% 0.128 66.29);
16
+ --color-orange-400: oklch(75% 0.183 55.934);
17
+ --color-orange-500: oklch(70.5% 0.213 47.604);
18
+ --color-orange-600: oklch(64.6% 0.222 41.116);
19
+ --color-orange-700: oklch(55.3% 0.195 38.402);
20
+ --color-orange-900: oklch(40.8% 0.123 38.172);
21
+ --color-orange-950: oklch(26.6% 0.079 36.259);
22
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
43
23
  --color-lime-500: oklch(76.8% 0.233 130.85);
44
- --color-lime-800: oklch(45.3% 0.124 130.933);
45
- --color-green-50: #ECFDF5;
46
- --color-green-100: #D1FAE5;
47
- --color-green-200: #A7F3D0;
48
- --color-green-300: #6EE7B7;
49
- --color-green-400: #34D399;
50
- --color-green-500: #10B981;
51
- --color-green-600: #059669;
52
- --color-green-700: #047857;
53
- --color-green-800: #065F46;
54
- --color-green-900: #064E3B;
24
+ --color-green-100: oklch(96.2% 0.044 156.743);
25
+ --color-green-200: oklch(92.5% 0.084 155.995);
26
+ --color-green-500: oklch(72.3% 0.219 149.579);
27
+ --color-green-800: oklch(44.8% 0.119 151.328);
28
+ --color-emerald-100: oklch(95% 0.052 163.051);
29
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
55
30
  --color-emerald-600: oklch(59.6% 0.145 163.225);
56
- --color-teal-50: #F0FDFA;
57
- --color-teal-100: #CCFBF1;
58
- --color-teal-200: #99F6E4;
59
- --color-teal-300: #5EEAD4;
60
- --color-teal-400: #2DD4BF;
61
- --color-teal-500: #14B8A6;
62
- --color-teal-600: #0D9488;
63
- --color-teal-700: #0F766E;
64
- --color-teal-800: #115E59;
65
- --color-cyan-200: #A5F3FC;
66
- --color-cyan-300: #67E8F9;
67
- --color-cyan-400: #22D3EE;
68
- --color-cyan-500: #06B6D4;
69
- --color-cyan-600: #0891B2;
70
- --color-cyan-800: #155E75;
71
- --color-sky-400: oklch(74.6% 0.16 232.661);
31
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
32
+ --color-emerald-800: oklch(43.2% 0.095 166.913);
33
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
34
+ --color-emerald-950: oklch(26.2% 0.051 172.552);
35
+ --color-teal-500: oklch(70.4% 0.14 182.503);
36
+ --color-cyan-500: oklch(71.5% 0.143 215.221);
72
37
  --color-sky-500: oklch(68.5% 0.169 237.323);
73
- --color-blue-50: #EFF6FF;
74
- --color-blue-100: #DBEAFE;
75
- --color-blue-200: #BFDBFE;
76
- --color-blue-300: #93C5FD;
77
- --color-blue-400: #60A5FA;
78
- --color-blue-500: #3B82F6;
79
- --color-blue-600: #2563EB;
80
- --color-blue-700: #1D4ED8;
81
- --color-blue-800: #1E40AF;
82
- --color-blue-900: #1E3A8A;
83
- --color-indigo-50: #EEF2FF;
84
- --color-indigo-100: #E0E7FF;
85
- --color-indigo-200: #C7D2FE;
86
- --color-indigo-300: #A5B4FC;
87
- --color-indigo-400: #818CF8;
88
- --color-indigo-500: #6366F1;
89
- --color-indigo-600: #4F46E5;
90
- --color-indigo-700: #4338CA;
91
- --color-indigo-800: #3730A3;
92
- --color-indigo-900: #312E81;
93
- --color-purple-50: #F5F3FF;
94
- --color-purple-100: #EDE9FE;
95
- --color-purple-200: #DDD6FE;
96
- --color-purple-300: #C4B5FD;
97
- --color-purple-400: #A78BFA;
98
- --color-purple-500: #8B5CF6;
99
- --color-purple-600: #7C3AED;
100
- --color-purple-700: #6D28D9;
101
- --color-purple-800: #5B21B6;
102
- --color-purple-900: #4C1D95;
103
- --color-pink-50: #FDF2F8;
104
- --color-pink-100: #FCE7F3;
105
- --color-pink-200: #FBCFE8;
106
- --color-pink-300: #F9A8D4;
107
- --color-pink-400: #F472B6;
108
- --color-pink-500: #EC4899;
109
- --color-pink-600: #DB2777;
110
- --color-pink-700: #BE185D;
111
- --color-pink-800: #9D174D;
112
- --color-pink-900: #831843;
113
- --color-gray-50: #F9FAFB;
114
- --color-gray-100: #F3F4F6;
115
- --color-gray-200: #E5E7EB;
116
- --color-gray-300: #D1D5DB;
117
- --color-gray-400: #9CA3AF;
118
- --color-gray-500: #6B7280;
119
- --color-gray-600: #4B5563;
120
- --color-gray-700: #374151;
121
- --color-gray-800: #1F2937;
122
- --color-gray-900: #111827;
123
- --color-white: #ffffff;
38
+ --color-blue-100: oklch(93.2% 0.032 255.585);
39
+ --color-blue-200: oklch(88.2% 0.059 254.128);
40
+ --color-blue-400: oklch(70.7% 0.165 254.624);
41
+ --color-blue-500: oklch(62.3% 0.214 259.815);
42
+ --color-blue-600: oklch(54.6% 0.245 262.881);
43
+ --color-blue-700: oklch(48.8% 0.243 264.376);
44
+ --color-blue-800: oklch(42.4% 0.199 265.638);
45
+ --color-blue-900: oklch(37.9% 0.146 265.522);
46
+ --color-blue-950: oklch(28.2% 0.091 267.935);
47
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
48
+ --color-purple-500: oklch(62.7% 0.265 303.9);
49
+ --color-fuchsia-500: oklch(66.7% 0.295 322.15);
50
+ --color-pink-500: oklch(65.6% 0.241 354.308);
51
+ --color-rose-50: oklch(96.9% 0.015 12.422);
52
+ --color-rose-100: oklch(94.1% 0.03 12.58);
53
+ --color-rose-200: oklch(89.2% 0.058 10.001);
54
+ --color-rose-300: oklch(81% 0.117 11.638);
55
+ --color-rose-500: oklch(64.5% 0.246 16.439);
56
+ --color-rose-700: oklch(51.4% 0.222 16.935);
57
+ --color-rose-800: oklch(45.5% 0.188 13.697);
58
+ --color-rose-900: oklch(41% 0.159 10.272);
59
+ --color-rose-950: oklch(27.1% 0.105 12.094);
60
+ --color-gray-50: oklch(98.5% 0.002 247.839);
61
+ --color-gray-100: oklch(96.7% 0.003 264.542);
62
+ --color-gray-200: oklch(92.8% 0.006 264.531);
63
+ --color-gray-400: oklch(70.7% 0.022 261.325);
64
+ --color-gray-500: oklch(55.1% 0.027 264.364);
65
+ --color-gray-600: oklch(44.6% 0.03 256.802);
66
+ --color-gray-700: oklch(37.3% 0.034 259.733);
67
+ --color-gray-800: oklch(27.8% 0.033 256.848);
68
+ --color-gray-900: oklch(21% 0.034 264.665);
69
+ --color-gray-950: oklch(13% 0.028 261.692);
70
+ --color-white: #fff;
124
71
  --spacing: 0.25rem;
125
- --breakpoint-md: 48rem;
126
- --breakpoint-lg: 64rem;
127
- --breakpoint-xl: 80rem;
128
- --container-2xs: 18rem;
129
72
  --container-xs: 20rem;
130
73
  --container-sm: 24rem;
131
- --container-md: 28rem;
132
- --container-lg: 32rem;
133
- --container-xl: 36rem;
134
74
  --container-2xl: 42rem;
135
- --container-4xl: 56rem;
136
- --container-7xl: 80rem;
137
75
  --text-xs: 0.75rem;
138
76
  --text-xs--line-height: calc(1 / 0.75);
139
77
  --text-sm: 0.875rem;
@@ -142,58 +80,66 @@
142
80
  --text-base--line-height: calc(1.5 / 1);
143
81
  --text-lg: 1.125rem;
144
82
  --text-lg--line-height: calc(1.75 / 1.125);
145
- --text-xl: 1.25rem;
146
- --text-xl--line-height: calc(1.75 / 1.25);
147
83
  --text-2xl: 1.5rem;
148
84
  --text-2xl--line-height: calc(2 / 1.5);
149
85
  --text-3xl: 1.875rem;
150
86
  --text-3xl--line-height: calc(2.25 / 1.875);
151
- --text-4xl: 2.25rem;
152
- --text-4xl--line-height: calc(2.5 / 2.25);
153
- --text-5xl: 3rem;
154
- --text-5xl--line-height: 1;
155
- --text-6xl: 3.75rem;
156
- --text-6xl--line-height: 1;
157
- --text-7xl: 4.5rem;
158
- --text-7xl--line-height: 1;
159
- --text-8xl: 6rem;
160
- --text-8xl--line-height: 1;
161
- --text-9xl: 8rem;
162
- --text-9xl--line-height: 1;
163
- --font-weight-thin: 100;
164
- --font-weight-extralight: 200;
165
87
  --font-weight-light: 300;
166
88
  --font-weight-normal: 400;
167
89
  --font-weight-medium: 500;
168
90
  --font-weight-semibold: 600;
169
- --font-weight-bold: 700;
170
- --font-weight-extrabold: 800;
171
- --font-weight-black: 900;
172
- --tracking-tighter: -0.05em;
173
- --tracking-tight: -0.025em;
174
- --tracking-normal: 0em;
175
- --tracking-wide: 0.025em;
176
- --tracking-wider: 0.05em;
177
- --tracking-widest: 0.1em;
178
- --leading-tight: 1.25;
179
- --leading-normal: 1.5;
180
- --leading-relaxed: 1.625;
181
- --leading-loose: 2;
182
- --radius-xs: 0.125rem;
183
- --radius-sm: 0.25rem;
184
- --radius-md: 0.375rem;
185
- --radius-lg: 0.5rem;
186
- --radius-xl: 0.75rem;
187
- --ease-in: cubic-bezier(0.4, 0, 1, 1);
188
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
189
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
91
+ --tracking-tight: -0.4px;
92
+ --radius-xs: 4px;
93
+ --radius-sm: 6px;
94
+ --radius-lg: 16px;
190
95
  --animate-spin: spin 1s linear infinite;
191
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
192
- --blur-xs: 4px;
193
96
  --default-transition-duration: 150ms;
194
97
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
195
98
  --default-font-family: var(--font-sans);
196
99
  --default-mono-font-family: var(--font-mono);
100
+ --radius: 8px;
101
+ --leading-5: 20px;
102
+ --radius-base: 12px;
103
+ --color-body: var(--color-gray-600);
104
+ --color-body-subtle: var(--color-gray-500);
105
+ --color-heading: var(--color-gray-900);
106
+ --color-fg-brand: var(--color-blue-700);
107
+ --color-fg-danger: var(--color-rose-700);
108
+ --color-fg-danger-strong: var(--color-rose-900);
109
+ --color-fg-disabled: var(--color-gray-400);
110
+ --color-neutral-primary-soft: var(--color-white);
111
+ --color-neutral-primary: var(--color-white);
112
+ --color-neutral-primary-medium: var(--color-white);
113
+ --color-neutral-secondary-soft: var(--color-gray-50);
114
+ --color-neutral-secondary: var(--color-gray-50);
115
+ --color-neutral-secondary-medium: var(--color-gray-50);
116
+ --color-neutral-secondary-strong: var(--color-gray-50);
117
+ --color-neutral-tertiary-soft: var(--color-gray-100);
118
+ --color-neutral-tertiary: var(--color-gray-100);
119
+ --color-neutral-tertiary-medium: var(--color-gray-100);
120
+ --color-neutral-quaternary: var(--color-gray-200);
121
+ --color-brand-soft: var(--color-blue-100);
122
+ --color-brand: var(--color-blue-700);
123
+ --color-brand-medium: var(--color-blue-200);
124
+ --color-brand-strong: var(--color-blue-800);
125
+ --color-success: var(--color-emerald-700);
126
+ --color-success-medium: var(--color-emerald-100);
127
+ --color-success-strong: var(--color-emerald-800);
128
+ --color-danger-soft: var(--color-rose-50);
129
+ --color-danger: var(--color-rose-700);
130
+ --color-danger-medium: var(--color-rose-100);
131
+ --color-danger-strong: var(--color-rose-800);
132
+ --color-warning: var(--color-orange-500);
133
+ --color-warning-medium: var(--color-orange-100);
134
+ --color-warning-strong: var(--color-orange-700);
135
+ --color-dark: var(--color-gray-800);
136
+ --color-dark-strong: var(--color-gray-900);
137
+ --color-light: var(--color-gray-100);
138
+ --color-default: var(--color-gray-200);
139
+ --color-default-medium: var(--color-gray-200);
140
+ --color-default-strong: var(--color-gray-200);
141
+ --color-danger-subtle: var(--color-rose-200);
142
+ --color-dark-backdrop: var(--color-gray-950);
197
143
  }
198
144
  }
199
145
  @layer base {
@@ -345,604 +291,9 @@
345
291
  }
346
292
  }
347
293
  @layer utilities {
348
- .collapse {
349
- visibility: collapse;
350
- }
351
- .invisible {
352
- visibility: hidden;
353
- }
354
294
  .visible {
355
295
  visibility: visible;
356
296
  }
357
- .datatable-wrapper {
358
- width: 100%;
359
- & .datatable-top {
360
- display: flex;
361
- justify-content: space-between;
362
- flex-direction: column-reverse;
363
- align-items: start;
364
- gap: 1rem;
365
- margin-bottom: 1rem;
366
- @media (min-width: 640px) {
367
- flex-direction: row-reverse;
368
- align-items: center;
369
- }
370
- }
371
- & .datatable-search .datatable-input {
372
- color: var(--color-gray-900);
373
- font-size: 0.875rem;
374
- border: 1px solid var(--color-gray-300);
375
- border-radius: 0.5rem;
376
- background-color: var(--color-gray-50);
377
- min-width: 16rem;
378
- }
379
- & .datatable-input {
380
- color: var(--color-gray-900);
381
- font-size: 0.875rem;
382
- border: 1px solid var(--color-gray-300);
383
- border-radius: 0.5rem;
384
- background-color: var(--color-gray-50);
385
- min-width: 16rem;
386
- }
387
- .dark & .datatable-search .datatable-input {
388
- color: white;
389
- background-color: var(--color-gray-800);
390
- border: 1px solid var(--color-gray-700);
391
- }
392
- .dark & .datatable-input {
393
- color: white;
394
- background-color: var(--color-gray-800);
395
- border: 1px solid var(--color-gray-700);
396
- }
397
- & thead th .datatable-input {
398
- background-color: white;
399
- font-weight: 400;
400
- color: var(--color-gray-900);
401
- padding-top: .35rem;
402
- padding-bottom: .35rem;
403
- min-width: 0;
404
- }
405
- .dark & thead th .datatable-input {
406
- background-color: var(--color-gray-700);
407
- border-color: var(--color-gray-600);
408
- color: white;
409
- }
410
- & .datatable-top .datatable-dropdown {
411
- color: var(--color-gray-500);
412
- font-size: 0.875rem;
413
- }
414
- .dark & .datatable-top .datatable-dropdown {
415
- color: var(--color-gray-400);
416
- }
417
- & .datatable-top .datatable-dropdown .datatable-selector {
418
- background-color: var(--color-gray-50);
419
- color: var(--color-gray-900);
420
- font-size: 0.875rem;
421
- border: 1px solid var(--color-gray-300);
422
- border-radius: 0.5rem;
423
- margin-right: 0.25rem;
424
- min-width: 4rem;
425
- }
426
- .dark & .datatable-top .datatable-dropdown .datatable-selector {
427
- background-color: var(--color-gray-800);
428
- border: 1px solid var(--color-gray-700);
429
- color: white;
430
- }
431
- & .datatable-container thead tr.search-filtering-row th {
432
- padding-top: 0;
433
- }
434
- & .datatable-search .datatable-input:focus {
435
- border-color: var(--color-blue-600);
436
- }
437
- & .datatable-container {
438
- overflow-x: auto;
439
- }
440
- & .datatable-table {
441
- width: 100%;
442
- font-size: 0.875rem;
443
- color: var(--color-gray-500);
444
- text-align: left;
445
- }
446
- .dark & .datatable-table {
447
- color: var(--color-gray-400);
448
- }
449
- & .datatable-table thead {
450
- font-size: 0.75rem;
451
- color: var(--color-gray-500);
452
- background-color: var(--color-gray-50);
453
- }
454
- .dark & .datatable-table thead {
455
- color: var(--color-gray-400);
456
- background-color: var(--color-gray-800);
457
- }
458
- & .datatable-table thead th {
459
- white-space: nowrap;
460
- }
461
- & .datatable-table thead th {
462
- width: auto !important;
463
- padding-top: 0.75rem;
464
- padding-bottom: 0.75rem;
465
- padding-left: 1.5rem;
466
- padding-right: 1.5rem;
467
- }
468
- & .datatable-table tbody th {
469
- width: auto !important;
470
- padding-top: 0.75rem;
471
- padding-bottom: 0.75rem;
472
- padding-left: 1.5rem;
473
- padding-right: 1.5rem;
474
- }
475
- & .datatable-table tbody td {
476
- width: auto !important;
477
- padding-top: 0.75rem;
478
- padding-bottom: 0.75rem;
479
- padding-left: 1.5rem;
480
- padding-right: 1.5rem;
481
- }
482
- & .datatable-table thead th .datatable-sorter {
483
- text-transform: uppercase;
484
- }
485
- & .datatable-table thead th {
486
- text-transform: uppercase;
487
- }
488
- & .datatable-table thead th .datatable-sorter:hover {
489
- color: var(--color-gray-900);
490
- }
491
- & .datatable-table thead th.datatable-ascending .datatable-sorter {
492
- color: var(--color-gray-900);
493
- }
494
- & .datatable-table thead th.datatable-descending .datatable-sorter {
495
- color: var(--color-gray-900);
496
- }
497
- .dark & .datatable-table thead th .datatable-sorter:hover {
498
- color: white;
499
- }
500
- .dark & .datatable-table thead th.datatable-ascending .datatable-sorter {
501
- color: white;
502
- }
503
- .dark & .datatable-table thead th.datatable-descending .datatable-sorter {
504
- color: white;
505
- }
506
- & .datatable-table tbody tr.selected {
507
- background-color: var(--color-gray-100);
508
- }
509
- .dark & .datatable-table tbody tr.selected {
510
- background-color: var(--color-gray-700);
511
- }
512
- & .datatable-table tbody tr {
513
- border-bottom: 1px solid var(--color-gray-200);
514
- }
515
- .dark & .datatable-table tbody tr {
516
- border-bottom: 1px solid var(--color-gray-700);
517
- }
518
- & .datatable-table .datatable-empty {
519
- text-align: center;
520
- }
521
- & .datatable-bottom {
522
- display: flex;
523
- flex-direction: column;
524
- justify-content: space-between;
525
- align-items: start;
526
- margin-top: 1rem;
527
- gap: 1rem;
528
- @media (min-width: 640px) {
529
- flex-direction: row;
530
- align-items: center;
531
- }
532
- }
533
- & .datatable-bottom .datatable-info {
534
- color: var(--color-gray-500);
535
- font-size: 0.875rem;
536
- }
537
- .dark & .datatable-bottom .datatable-info {
538
- color: var(--color-gray-400);
539
- }
540
- & .datatable-bottom .datatable-pagination .datatable-pagination-list {
541
- display: flex;
542
- align-items: center;
543
- height: 2rem;
544
- font-size: 0.875rem;
545
- }
546
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
547
- display: flex;
548
- align-items: center;
549
- color: var(--color-gray-500);
550
- font-weight: 500;
551
- padding-left: 0.75rem;
552
- padding-right: 0.75rem;
553
- height: 2rem;
554
- font-size: 0.875rem;
555
- border-top: 1px solid var(--color-gray-300);
556
- border-bottom: 1px solid var(--color-gray-300);
557
- border-right: 1px solid var(--color-gray-300);
558
- }
559
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
560
- color: var(--color-gray-400);
561
- border-color: var(--color-gray-700);
562
- }
563
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type {
564
- position: relative;
565
- }
566
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type {
567
- position: relative;
568
- }
569
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
570
- color: transparent;
571
- }
572
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
573
- color: transparent;
574
- }
575
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
576
- color: transparent;
577
- }
578
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
579
- color: transparent;
580
- }
581
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
582
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
583
- position: absolute;
584
- top: 50%;
585
- left: 50%;
586
- width: 1.3rem;
587
- height: 1.3rem;
588
- transform: translate(-50%, -50%);
589
- }
590
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
591
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
592
- }
593
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
594
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
595
- }
596
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
597
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
598
- }
599
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
600
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
601
- position: absolute;
602
- top: 50%;
603
- right: 50%;
604
- width: 1.3rem;
605
- height: 1.3rem;
606
- transform: translate(50%, -50%);
607
- }
608
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
609
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
610
- }
611
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
612
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
613
- }
614
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
615
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
616
- }
617
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
618
- border-top-left-radius: 0.5rem;
619
- border-bottom-left-radius: 0.5rem;
620
- border-left: 1px solid var(--color-gray-300);
621
- }
622
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
623
- border-left: 1px solid var(--color-gray-700);
624
- }
625
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
626
- border-top-right-radius: 0.5rem;
627
- border-bottom-right-radius: 0.5rem;
628
- border-left: 0;
629
- }
630
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
631
- background-color: var(--color-gray-50);
632
- color: var(--color-gray-700);
633
- }
634
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
635
- background-color: var(--color-gray-700);
636
- color: white;
637
- }
638
- }
639
- .datatable-bottom {
640
- .datatable-wrapper & {
641
- display: flex;
642
- flex-direction: column;
643
- justify-content: space-between;
644
- align-items: start;
645
- margin-top: 1rem;
646
- gap: 1rem;
647
- @media (min-width: 640px) {
648
- flex-direction: row;
649
- align-items: center;
650
- }
651
- }
652
- .datatable-wrapper & .datatable-info {
653
- color: var(--color-gray-500);
654
- font-size: 0.875rem;
655
- }
656
- .dark .datatable-wrapper & .datatable-info {
657
- color: var(--color-gray-400);
658
- }
659
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list {
660
- display: flex;
661
- align-items: center;
662
- height: 2rem;
663
- font-size: 0.875rem;
664
- }
665
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link {
666
- display: flex;
667
- align-items: center;
668
- color: var(--color-gray-500);
669
- font-weight: 500;
670
- padding-left: 0.75rem;
671
- padding-right: 0.75rem;
672
- height: 2rem;
673
- font-size: 0.875rem;
674
- border-top: 1px solid var(--color-gray-300);
675
- border-bottom: 1px solid var(--color-gray-300);
676
- border-right: 1px solid var(--color-gray-300);
677
- }
678
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link {
679
- color: var(--color-gray-400);
680
- border-color: var(--color-gray-700);
681
- }
682
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type {
683
- position: relative;
684
- }
685
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type {
686
- position: relative;
687
- }
688
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
689
- color: transparent;
690
- }
691
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
692
- color: transparent;
693
- }
694
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
695
- color: transparent;
696
- }
697
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
698
- color: transparent;
699
- }
700
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
701
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
702
- position: absolute;
703
- top: 50%;
704
- left: 50%;
705
- width: 1.3rem;
706
- height: 1.3rem;
707
- transform: translate(-50%, -50%);
708
- }
709
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
710
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
711
- }
712
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
713
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
714
- }
715
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
716
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
717
- }
718
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
719
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
720
- position: absolute;
721
- top: 50%;
722
- right: 50%;
723
- width: 1.3rem;
724
- height: 1.3rem;
725
- transform: translate(50%, -50%);
726
- }
727
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
728
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
729
- }
730
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
731
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
732
- }
733
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
734
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
735
- }
736
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
737
- border-top-left-radius: 0.5rem;
738
- border-bottom-left-radius: 0.5rem;
739
- border-left: 1px solid var(--color-gray-300);
740
- }
741
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
742
- border-left: 1px solid var(--color-gray-700);
743
- }
744
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
745
- border-top-right-radius: 0.5rem;
746
- border-bottom-right-radius: 0.5rem;
747
- border-left: 0;
748
- }
749
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover {
750
- background-color: var(--color-gray-50);
751
- color: var(--color-gray-700);
752
- }
753
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover {
754
- background-color: var(--color-gray-700);
755
- color: white;
756
- }
757
- }
758
- .datatable-pagination {
759
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list {
760
- display: flex;
761
- align-items: center;
762
- height: 2rem;
763
- font-size: 0.875rem;
764
- }
765
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link {
766
- display: flex;
767
- align-items: center;
768
- color: var(--color-gray-500);
769
- font-weight: 500;
770
- padding-left: 0.75rem;
771
- padding-right: 0.75rem;
772
- height: 2rem;
773
- font-size: 0.875rem;
774
- border-top: 1px solid var(--color-gray-300);
775
- border-bottom: 1px solid var(--color-gray-300);
776
- border-right: 1px solid var(--color-gray-300);
777
- }
778
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link {
779
- color: var(--color-gray-400);
780
- border-color: var(--color-gray-700);
781
- }
782
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type {
783
- position: relative;
784
- }
785
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type {
786
- position: relative;
787
- }
788
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
789
- color: transparent;
790
- }
791
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
792
- color: transparent;
793
- }
794
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
795
- color: transparent;
796
- }
797
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
798
- color: transparent;
799
- }
800
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
801
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
802
- position: absolute;
803
- top: 50%;
804
- left: 50%;
805
- width: 1.3rem;
806
- height: 1.3rem;
807
- transform: translate(-50%, -50%);
808
- }
809
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
810
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
811
- }
812
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
813
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
814
- }
815
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
816
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
817
- }
818
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
819
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
820
- position: absolute;
821
- top: 50%;
822
- right: 50%;
823
- width: 1.3rem;
824
- height: 1.3rem;
825
- transform: translate(50%, -50%);
826
- }
827
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
828
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
829
- }
830
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
831
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
832
- }
833
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
834
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
835
- }
836
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
837
- border-top-left-radius: 0.5rem;
838
- border-bottom-left-radius: 0.5rem;
839
- border-left: 1px solid var(--color-gray-300);
840
- }
841
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
842
- border-left: 1px solid var(--color-gray-700);
843
- }
844
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
845
- border-top-right-radius: 0.5rem;
846
- border-bottom-right-radius: 0.5rem;
847
- border-left: 0;
848
- }
849
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover {
850
- background-color: var(--color-gray-50);
851
- color: var(--color-gray-700);
852
- }
853
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover {
854
- background-color: var(--color-gray-700);
855
- color: white;
856
- }
857
- }
858
- .datatable-pagination-list-item-link {
859
- .datatable-wrapper .datatable-bottom .datatable-pagination & {
860
- display: flex;
861
- align-items: center;
862
- color: var(--color-gray-500);
863
- font-weight: 500;
864
- padding-left: 0.75rem;
865
- padding-right: 0.75rem;
866
- height: 2rem;
867
- font-size: 0.875rem;
868
- border-top: 1px solid var(--color-gray-300);
869
- border-bottom: 1px solid var(--color-gray-300);
870
- border-right: 1px solid var(--color-gray-300);
871
- }
872
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination & {
873
- color: var(--color-gray-400);
874
- border-color: var(--color-gray-700);
875
- }
876
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
877
- color: transparent;
878
- }
879
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
880
- color: transparent;
881
- }
882
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
883
- color: transparent;
884
- }
885
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
886
- color: transparent;
887
- }
888
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &::after {
889
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
890
- position: absolute;
891
- top: 50%;
892
- left: 50%;
893
- width: 1.3rem;
894
- height: 1.3rem;
895
- transform: translate(-50%, -50%);
896
- }
897
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &:hover::after {
898
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
899
- }
900
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &::after {
901
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
902
- }
903
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &:hover::after {
904
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
905
- }
906
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &::after {
907
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
908
- position: absolute;
909
- top: 50%;
910
- right: 50%;
911
- width: 1.3rem;
912
- height: 1.3rem;
913
- transform: translate(50%, -50%);
914
- }
915
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &:hover::after {
916
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
917
- }
918
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &::after {
919
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
920
- }
921
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &:hover::after {
922
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
923
- }
924
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
925
- border-top-left-radius: 0.5rem;
926
- border-bottom-left-radius: 0.5rem;
927
- border-left: 1px solid var(--color-gray-300);
928
- }
929
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
930
- border-left: 1px solid var(--color-gray-700);
931
- }
932
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
933
- border-top-right-radius: 0.5rem;
934
- border-bottom-right-radius: 0.5rem;
935
- border-left: 0;
936
- }
937
- .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
938
- background-color: var(--color-gray-50);
939
- color: var(--color-gray-700);
940
- }
941
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
942
- background-color: var(--color-gray-700);
943
- color: white;
944
- }
945
- }
946
297
  .sr-only {
947
298
  position: absolute;
948
299
  width: 1px;
@@ -966,39 +317,21 @@
966
317
  .static {
967
318
  position: static;
968
319
  }
969
- .inset-0 {
970
- inset: calc(var(--spacing) * 0);
971
- }
972
320
  .top-0 {
973
321
  top: calc(var(--spacing) * 0);
974
322
  }
975
- .right-0 {
976
- right: calc(var(--spacing) * 0);
977
- }
978
323
  .right-4 {
979
324
  right: calc(var(--spacing) * 4);
980
325
  }
981
- .bottom-0 {
982
- bottom: calc(var(--spacing) * 0);
983
- }
984
326
  .bottom-4 {
985
327
  bottom: calc(var(--spacing) * 4);
986
328
  }
987
- .bottom-\[60px\] {
988
- bottom: 60px;
989
- }
990
329
  .left-0 {
991
330
  left: calc(var(--spacing) * 0);
992
331
  }
993
332
  .z-10 {
994
333
  z-index: 10;
995
334
  }
996
- .z-20 {
997
- z-index: 20;
998
- }
999
- .z-30 {
1000
- z-index: 30;
1001
- }
1002
335
  .z-40 {
1003
336
  z-index: 40;
1004
337
  }
@@ -1026,21 +359,12 @@
1026
359
  max-width: 96rem;
1027
360
  }
1028
361
  }
1029
- .-mx-1\.5 {
1030
- margin-inline: calc(var(--spacing) * -1.5);
1031
- }
1032
362
  .mx-0 {
1033
363
  margin-inline: calc(var(--spacing) * 0);
1034
364
  }
1035
- .mx-1 {
1036
- margin-inline: calc(var(--spacing) * 1);
1037
- }
1038
365
  .mx-4 {
1039
366
  margin-inline: calc(var(--spacing) * 4);
1040
367
  }
1041
- .-my-1\.5 {
1042
- margin-block: calc(var(--spacing) * -1.5);
1043
- }
1044
368
  .my-4 {
1045
369
  margin-block: calc(var(--spacing) * 4);
1046
370
  }
@@ -1050,12 +374,12 @@
1050
374
  .my-10 {
1051
375
  margin-block: calc(var(--spacing) * 10);
1052
376
  }
1053
- .ms-0 {
1054
- margin-inline-start: calc(var(--spacing) * 0);
1055
- }
1056
377
  .ms-1 {
1057
378
  margin-inline-start: calc(var(--spacing) * 1);
1058
379
  }
380
+ .ms-1\.5 {
381
+ margin-inline-start: calc(var(--spacing) * 1.5);
382
+ }
1059
383
  .ms-2 {
1060
384
  margin-inline-start: calc(var(--spacing) * 2);
1061
385
  }
@@ -1065,6 +389,9 @@
1065
389
  .ms-auto {
1066
390
  margin-inline-start: auto;
1067
391
  }
392
+ .-me-0\.5 {
393
+ margin-inline-end: calc(var(--spacing) * -0.5);
394
+ }
1068
395
  .me-2 {
1069
396
  margin-inline-end: calc(var(--spacing) * 2);
1070
397
  }
@@ -1077,370 +404,23 @@
1077
404
  .mt-2 {
1078
405
  margin-top: calc(var(--spacing) * 2);
1079
406
  }
1080
- .apexcharts-canvas {
1081
- & .apexcharts-tooltip {
1082
- background-color: white !important;
1083
- color: var(--color-gray-700) !important;
1084
- border: 0 !important;
1085
- border-radius: 0.25rem !important;
1086
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1087
- }
1088
- .dark & .apexcharts-tooltip {
1089
- background-color: var(--color-gray-700) !important;
1090
- color: var(--color-gray-400) !important;
1091
- border-color: transparent !important;
1092
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1093
- }
1094
- & .apexcharts-tooltip .apexcharts-tooltip-title {
1095
- padding-top: 0.5rem !important;
1096
- padding-bottom: 0.5rem !important;
1097
- padding-right: 0.75rem !important;
1098
- padding-left: 0.75rem !important;
1099
- margin-bottom: 0.75rem !important;
1100
- background-color: var(--color-gray-100) !important;
1101
- border-bottom-color: var(--color-gray-200) !important;
1102
- font-size: 0.875rem !important;
1103
- font-weight: 400 !important;
1104
- color: var(--color-gray-500) !important;
1105
- }
1106
- .dark & .apexcharts-tooltip .apexcharts-tooltip-title {
1107
- background-color: var(--color-gray-600) !important;
1108
- border-color: var(--color-gray-500) !important;
1109
- color: var(--color-gray-500) !important;
1110
- }
1111
- & .apexcharts-xaxistooltip {
1112
- color: var(--color-gray-500) !important;
1113
- padding-top: 0.5rem !important;
1114
- padding-bottom: 0.5rem !important;
1115
- padding-right: 0.75rem !important;
1116
- padding-left: 0.75rem !important;
1117
- border-color: transparent !important;
1118
- background-color: white !important;
1119
- border-radius: 0.25rem !important;
1120
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1121
- }
1122
- .dark & .apexcharts-xaxistooltip {
1123
- color: var(--color-gray-400) !important;
1124
- background-color: var(--color-gray-700) !important;
1125
- }
1126
- & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1127
- color: var(--color-gray-500) !important;
1128
- font-size: 0.875rem !important;
1129
- }
1130
- .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1131
- color: var(--color-gray-400) !important;
1132
- }
1133
- & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
1134
- color: var(--color-gray-900);
1135
- font-size: 0.875rem !important;
1136
- }
1137
- .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
1138
- color: white !important;
1139
- }
1140
- & .apexcharts-xaxistooltip-text {
1141
- font-weight: 400 !important;
1142
- font-size: 0.875rem !important;
1143
- }
1144
- & .apexcharts-xaxistooltip:after {
1145
- border-bottom-color: white !important;
1146
- }
1147
- & .apexcharts-xaxistooltip:before {
1148
- border-bottom-color: white !important;
1149
- }
1150
- & .apexcharts-xaxistooltip:after {
1151
- border-width: 8px !important;
1152
- margin-left: -8px !important;
1153
- }
1154
- & .apexcharts-xaxistooltip:before {
1155
- border-width: 10px !important;
1156
- margin-left: -10px !important;
1157
- }
1158
- .dark & .apexcharts-xaxistooltip:after {
1159
- border-bottom-color: var(--color-gray-700) !important;
1160
- }
1161
- .dark & .apexcharts-xaxistooltip:before {
1162
- border-bottom-color: var(--color-gray-700) !important;
1163
- }
1164
- & .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group {
1165
- padding: 0 !important;
1166
- }
1167
- & .apexcharts-tooltip-series-group.apexcharts-active {
1168
- padding-left: 0.75rem !important;
1169
- padding-right: 0.75rem !important;
1170
- padding-bottom: 0.75rem !important;
1171
- background-color: white !important;
1172
- color: var(--color-gray-500) !important;
1173
- }
1174
- .dark & .apexcharts-tooltip-series-group.apexcharts-active {
1175
- background-color: var(--color-gray-700) !important;
1176
- color: var(--color-gray-400) !important;
1177
- }
1178
- & .apexcharts-tooltip-series-group.apexcharts-active:first-of-type {
1179
- padding-top: 0.75rem !important;
1180
- }
1181
- & .apexcharts-legend {
1182
- padding: 0 !important;
1183
- }
1184
- & .apexcharts-legend-text {
1185
- font-size: 0.75rem !important;
1186
- font-weight: 500 !important;
1187
- padding-left: 1.25rem !important;
1188
- color: var(--color-gray-500) !important;
1189
- }
1190
- :is([dir=rtl]) & .apexcharts-legend-text {
1191
- padding-right: 0.5rem !important;
1192
- }
1193
- & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1194
- color: var(--color-gray-900) !important;
1195
- }
1196
- .dark & .apexcharts-legend-text {
1197
- color: var(--color-gray-400) !important;
1198
- }
1199
- .dark & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1200
- color: white !important;
1201
- }
1202
- & .apexcharts-legend-series {
1203
- margin-left: 0.5rem !important;
1204
- margin-right: 0.5rem !important;
1205
- margin-bottom: 0.25rem !important;
1206
- display: flex !important;
1207
- align-items: center !important;
1208
- }
1209
- .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
1210
- fill: white !important;
1211
- }
1212
- & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1213
- fill: var(--color-gray-500) !important;
1214
- font-size: 1rem,[object Object] !important;
1215
- font-weight: 400 !important;
1216
- }
1217
- .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1218
- fill: var(--color-gray-400) !important;
1219
- }
1220
- & .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label {
1221
- font-size: 0.75rem,[object Object] !important;
1222
- font-weight: 600 !important;
1223
- text-shadow: none !important;
1224
- filter: none !important;
1225
- }
1226
- }
1227
- .apexcharts-legend-series {
1228
- .apexcharts-canvas & {
1229
- margin-left: 0.5rem !important;
1230
- margin-right: 0.5rem !important;
1231
- margin-bottom: 0.25rem !important;
1232
- display: flex !important;
1233
- align-items: center !important;
1234
- }
1235
- }
1236
- .apexcharts-tooltip {
1237
- .apexcharts-canvas & {
1238
- background-color: white !important;
1239
- color: var(--color-gray-700) !important;
1240
- border: 0 !important;
1241
- border-radius: 0.25rem !important;
1242
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1243
- }
1244
- .dark .apexcharts-canvas & {
1245
- background-color: var(--color-gray-700) !important;
1246
- color: var(--color-gray-400) !important;
1247
- border-color: transparent !important;
1248
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1249
- }
1250
- .apexcharts-canvas & .apexcharts-tooltip-title {
1251
- padding-top: 0.5rem !important;
1252
- padding-bottom: 0.5rem !important;
1253
- padding-right: 0.75rem !important;
1254
- padding-left: 0.75rem !important;
1255
- margin-bottom: 0.75rem !important;
1256
- background-color: var(--color-gray-100) !important;
1257
- border-bottom-color: var(--color-gray-200) !important;
1258
- font-size: 0.875rem !important;
1259
- font-weight: 400 !important;
1260
- color: var(--color-gray-500) !important;
1261
- }
1262
- .dark .apexcharts-canvas & .apexcharts-tooltip-title {
1263
- background-color: var(--color-gray-600) !important;
1264
- border-color: var(--color-gray-500) !important;
1265
- color: var(--color-gray-500) !important;
1266
- }
1267
- .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1268
- color: var(--color-gray-500) !important;
1269
- font-size: 0.875rem !important;
1270
- }
1271
- .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1272
- color: var(--color-gray-400) !important;
1273
- }
1274
- .apexcharts-canvas & .apexcharts-tooltip-text-y-value {
1275
- color: var(--color-gray-900);
1276
- font-size: 0.875rem !important;
1277
- }
1278
- :is([dir=rtl]) & .apexcharts-tooltip-marker {
1279
- margin-right: 0px !important;
1280
- margin-left: e !important;
1281
- }
1282
- .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-value {
1283
- color: white !important;
1284
- }
1285
- }
1286
- .datatable-top {
1287
- .datatable-wrapper & {
1288
- display: flex;
1289
- justify-content: space-between;
1290
- flex-direction: column-reverse;
1291
- align-items: start;
1292
- gap: 1rem;
1293
- margin-bottom: 1rem;
1294
- @media (min-width: 640px) {
1295
- flex-direction: row-reverse;
1296
- align-items: center;
1297
- }
1298
- }
1299
- .datatable-wrapper & .datatable-dropdown {
1300
- color: var(--color-gray-500);
1301
- font-size: 0.875rem;
1302
- }
1303
- .dark .datatable-wrapper & .datatable-dropdown {
1304
- color: var(--color-gray-400);
1305
- }
1306
- .datatable-wrapper & .datatable-dropdown .datatable-selector {
1307
- background-color: var(--color-gray-50);
1308
- color: var(--color-gray-900);
1309
- font-size: 0.875rem;
1310
- border: 1px solid var(--color-gray-300);
1311
- border-radius: 0.5rem;
1312
- margin-right: 0.25rem;
1313
- min-width: 4rem;
1314
- }
1315
- .dark .datatable-wrapper & .datatable-dropdown .datatable-selector {
1316
- background-color: var(--color-gray-800);
1317
- border: 1px solid var(--color-gray-700);
1318
- color: white;
1319
- }
1320
- }
1321
- .apexcharts-tooltip-marker {
1322
- :is([dir=rtl]) .apexcharts-tooltip & {
1323
- margin-right: 0px !important;
1324
- margin-left: e !important;
1325
- }
1326
- }
1327
- .datatable-dropdown {
1328
- .datatable-wrapper .datatable-top & {
1329
- color: var(--color-gray-500);
1330
- font-size: 0.875rem;
1331
- }
1332
- .dark .datatable-wrapper .datatable-top & {
1333
- color: var(--color-gray-400);
1334
- }
1335
- .datatable-wrapper .datatable-top & .datatable-selector {
1336
- background-color: var(--color-gray-50);
1337
- color: var(--color-gray-900);
1338
- font-size: 0.875rem;
1339
- border: 1px solid var(--color-gray-300);
1340
- border-radius: 0.5rem;
1341
- margin-right: 0.25rem;
1342
- min-width: 4rem;
1343
- }
1344
- .dark .datatable-wrapper .datatable-top & .datatable-selector {
1345
- background-color: var(--color-gray-800);
1346
- border: 1px solid var(--color-gray-700);
1347
- color: white;
1348
- }
1349
- }
1350
- .datatable-selector {
1351
- .datatable-wrapper .datatable-top .datatable-dropdown & {
1352
- background-color: var(--color-gray-50);
1353
- color: var(--color-gray-900);
1354
- font-size: 0.875rem;
1355
- border: 1px solid var(--color-gray-300);
1356
- border-radius: 0.5rem;
1357
- margin-right: 0.25rem;
1358
- min-width: 4rem;
1359
- }
1360
- .dark .datatable-wrapper .datatable-top .datatable-dropdown & {
1361
- background-color: var(--color-gray-800);
1362
- border: 1px solid var(--color-gray-700);
1363
- color: white;
1364
- }
1365
- }
1366
- .apexcharts-tooltip-title {
1367
- .apexcharts-canvas .apexcharts-tooltip & {
1368
- padding-top: 0.5rem !important;
1369
- padding-bottom: 0.5rem !important;
1370
- padding-right: 0.75rem !important;
1371
- padding-left: 0.75rem !important;
1372
- margin-bottom: 0.75rem !important;
1373
- background-color: var(--color-gray-100) !important;
1374
- border-bottom-color: var(--color-gray-200) !important;
1375
- font-size: 0.875rem !important;
1376
- font-weight: 400 !important;
1377
- color: var(--color-gray-500) !important;
1378
- }
1379
- .dark .apexcharts-canvas .apexcharts-tooltip & {
1380
- background-color: var(--color-gray-600) !important;
1381
- border-color: var(--color-gray-500) !important;
1382
- color: var(--color-gray-500) !important;
1383
- }
1384
- }
1385
- .mb-1 {
1386
- margin-bottom: calc(var(--spacing) * 1);
407
+ .mt-2\.5 {
408
+ margin-top: calc(var(--spacing) * 2.5);
1387
409
  }
1388
410
  .mb-2 {
1389
411
  margin-bottom: calc(var(--spacing) * 2);
1390
412
  }
413
+ .mb-2\.5 {
414
+ margin-bottom: calc(var(--spacing) * 2.5);
415
+ }
1391
416
  .mb-3 {
1392
417
  margin-bottom: calc(var(--spacing) * 3);
1393
418
  }
1394
419
  .mb-6 {
1395
420
  margin-bottom: calc(var(--spacing) * 6);
1396
421
  }
1397
- .apexcharts-xaxistooltip {
1398
- .apexcharts-canvas & {
1399
- color: var(--color-gray-500) !important;
1400
- padding-top: 0.5rem !important;
1401
- padding-bottom: 0.5rem !important;
1402
- padding-right: 0.75rem !important;
1403
- padding-left: 0.75rem !important;
1404
- border-color: transparent !important;
1405
- background-color: white !important;
1406
- border-radius: 0.25rem !important;
1407
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1408
- }
1409
- .dark .apexcharts-canvas & {
1410
- color: var(--color-gray-400) !important;
1411
- background-color: var(--color-gray-700) !important;
1412
- }
1413
- .apexcharts-canvas &:after {
1414
- border-bottom-color: white !important;
1415
- }
1416
- .apexcharts-canvas &:before {
1417
- border-bottom-color: white !important;
1418
- }
1419
- .apexcharts-canvas &:after {
1420
- border-width: 8px !important;
1421
- margin-left: -8px !important;
1422
- }
1423
- .apexcharts-canvas &:before {
1424
- border-width: 10px !important;
1425
- margin-left: -10px !important;
1426
- }
1427
- .dark .apexcharts-canvas &:after {
1428
- border-bottom-color: var(--color-gray-700) !important;
1429
- }
1430
- .dark .apexcharts-canvas &:before {
1431
- border-bottom-color: var(--color-gray-700) !important;
1432
- }
1433
- }
1434
- .ml-auto {
1435
- margin-left: auto;
1436
- }
1437
- .datatable-pagination-list {
1438
- .datatable-wrapper .datatable-bottom .datatable-pagination & {
1439
- display: flex;
1440
- align-items: center;
1441
- height: 2rem;
1442
- font-size: 0.875rem;
1443
- }
422
+ .box-border {
423
+ box-sizing: border-box;
1444
424
  }
1445
425
  .block {
1446
426
  display: block;
@@ -1472,6 +452,9 @@
1472
452
  .h-3 {
1473
453
  height: calc(var(--spacing) * 3);
1474
454
  }
455
+ .h-3\.5 {
456
+ height: calc(var(--spacing) * 3.5);
457
+ }
1475
458
  .h-4 {
1476
459
  height: calc(var(--spacing) * 4);
1477
460
  }
@@ -1484,110 +467,39 @@
1484
467
  .h-8 {
1485
468
  height: calc(var(--spacing) * 8);
1486
469
  }
470
+ .h-9 {
471
+ height: calc(var(--spacing) * 9);
472
+ }
473
+ .h-10 {
474
+ height: calc(var(--spacing) * 10);
475
+ }
1487
476
  .h-12 {
1488
477
  height: calc(var(--spacing) * 12);
1489
478
  }
1490
- .h-\[calc\(100\%-1rem\)\] {
1491
- height: calc(100% - 1rem);
1492
- }
1493
479
  .h-auto {
1494
480
  height: auto;
1495
481
  }
1496
482
  .h-full {
1497
483
  height: 100%;
1498
484
  }
485
+ .h-screen {
486
+ height: 100vh;
487
+ }
488
+ .max-h-96 {
489
+ max-height: calc(var(--spacing) * 96);
490
+ }
1499
491
  .max-h-full {
1500
492
  max-height: 100%;
1501
493
  }
1502
- .datatable-table {
1503
- .datatable-wrapper & {
1504
- width: 100%;
1505
- font-size: 0.875rem;
1506
- color: var(--color-gray-500);
1507
- text-align: left;
1508
- }
1509
- .dark .datatable-wrapper & {
1510
- color: var(--color-gray-400);
1511
- }
1512
- .datatable-wrapper & thead {
1513
- font-size: 0.75rem;
1514
- color: var(--color-gray-500);
1515
- background-color: var(--color-gray-50);
1516
- }
1517
- .dark .datatable-wrapper & thead {
1518
- color: var(--color-gray-400);
1519
- background-color: var(--color-gray-800);
1520
- }
1521
- .datatable-wrapper & thead th {
1522
- white-space: nowrap;
1523
- }
1524
- .datatable-wrapper & thead th {
1525
- width: auto !important;
1526
- padding-top: 0.75rem;
1527
- padding-bottom: 0.75rem;
1528
- padding-left: 1.5rem;
1529
- padding-right: 1.5rem;
1530
- }
1531
- .datatable-wrapper & tbody th {
1532
- width: auto !important;
1533
- padding-top: 0.75rem;
1534
- padding-bottom: 0.75rem;
1535
- padding-left: 1.5rem;
1536
- padding-right: 1.5rem;
1537
- }
1538
- .datatable-wrapper & tbody td {
1539
- width: auto !important;
1540
- padding-top: 0.75rem;
1541
- padding-bottom: 0.75rem;
1542
- padding-left: 1.5rem;
1543
- padding-right: 1.5rem;
1544
- }
1545
- .datatable-wrapper & thead th .datatable-sorter {
1546
- text-transform: uppercase;
1547
- }
1548
- .datatable-wrapper & thead th {
1549
- text-transform: uppercase;
1550
- }
1551
- .datatable-wrapper & thead th .datatable-sorter:hover {
1552
- color: var(--color-gray-900);
1553
- }
1554
- .datatable-wrapper & thead th.datatable-ascending .datatable-sorter {
1555
- color: var(--color-gray-900);
1556
- }
1557
- .datatable-wrapper & thead th.datatable-descending .datatable-sorter {
1558
- color: var(--color-gray-900);
1559
- }
1560
- .dark .datatable-wrapper & thead th .datatable-sorter:hover {
1561
- color: white;
1562
- }
1563
- .dark .datatable-wrapper & thead th.datatable-ascending .datatable-sorter {
1564
- color: white;
1565
- }
1566
- .dark .datatable-wrapper & thead th.datatable-descending .datatable-sorter {
1567
- color: white;
1568
- }
1569
- .datatable-wrapper & tbody tr.selected {
1570
- background-color: var(--color-gray-100);
1571
- }
1572
- .dark .datatable-wrapper & tbody tr.selected {
1573
- background-color: var(--color-gray-700);
1574
- }
1575
- .datatable-wrapper & tbody tr {
1576
- border-bottom: 1px solid var(--color-gray-200);
1577
- }
1578
- .dark .datatable-wrapper & tbody tr {
1579
- border-bottom: 1px solid var(--color-gray-700);
1580
- }
1581
- .datatable-wrapper & .datatable-empty {
1582
- text-align: center;
1583
- }
1584
- }
1585
- .w-1\/2 {
1586
- width: calc(1/2 * 100%);
494
+ .min-h-\[1em\] {
495
+ min-height: 1em;
1587
496
  }
1588
497
  .w-3 {
1589
498
  width: calc(var(--spacing) * 3);
1590
499
  }
500
+ .w-3\.5 {
501
+ width: calc(var(--spacing) * 3.5);
502
+ }
1591
503
  .w-4 {
1592
504
  width: calc(var(--spacing) * 4);
1593
505
  }
@@ -1600,18 +512,27 @@
1600
512
  .w-8 {
1601
513
  width: calc(var(--spacing) * 8);
1602
514
  }
515
+ .w-9 {
516
+ width: calc(var(--spacing) * 9);
517
+ }
518
+ .w-10 {
519
+ width: calc(var(--spacing) * 10);
520
+ }
1603
521
  .w-12 {
1604
522
  width: calc(var(--spacing) * 12);
1605
523
  }
524
+ .w-44 {
525
+ width: calc(var(--spacing) * 44);
526
+ }
1606
527
  .w-64 {
1607
528
  width: calc(var(--spacing) * 64);
1608
529
  }
530
+ .w-80 {
531
+ width: calc(var(--spacing) * 80);
532
+ }
1609
533
  .w-full {
1610
534
  width: 100%;
1611
535
  }
1612
- .max-w-2xl {
1613
- max-width: var(--container-2xl);
1614
- }
1615
536
  .max-w-full {
1616
537
  max-width: 100%;
1617
538
  }
@@ -1621,73 +542,8 @@
1621
542
  .max-w-xs {
1622
543
  max-width: var(--container-xs);
1623
544
  }
1624
- .datatable-input {
1625
- .datatable-wrapper .datatable-search & {
1626
- color: var(--color-gray-900);
1627
- font-size: 0.875rem;
1628
- border: 1px solid var(--color-gray-300);
1629
- border-radius: 0.5rem;
1630
- background-color: var(--color-gray-50);
1631
- min-width: 16rem;
1632
- }
1633
- .datatable-wrapper & {
1634
- color: var(--color-gray-900);
1635
- font-size: 0.875rem;
1636
- border: 1px solid var(--color-gray-300);
1637
- border-radius: 0.5rem;
1638
- background-color: var(--color-gray-50);
1639
- min-width: 16rem;
1640
- }
1641
- .dark .datatable-wrapper .datatable-search & {
1642
- color: white;
1643
- background-color: var(--color-gray-800);
1644
- border: 1px solid var(--color-gray-700);
1645
- }
1646
- .dark .datatable-wrapper & {
1647
- color: white;
1648
- background-color: var(--color-gray-800);
1649
- border: 1px solid var(--color-gray-700);
1650
- }
1651
- .datatable-wrapper thead th & {
1652
- background-color: white;
1653
- font-weight: 400;
1654
- color: var(--color-gray-900);
1655
- padding-top: .35rem;
1656
- padding-bottom: .35rem;
1657
- min-width: 0;
1658
- }
1659
- .dark .datatable-wrapper thead th & {
1660
- background-color: var(--color-gray-700);
1661
- border-color: var(--color-gray-600);
1662
- color: white;
1663
- }
1664
- .datatable-wrapper .datatable-search &:focus {
1665
- border-color: var(--color-blue-600);
1666
- }
1667
- }
1668
- .datatable-search {
1669
- .datatable-wrapper & .datatable-input {
1670
- color: var(--color-gray-900);
1671
- font-size: 0.875rem;
1672
- border: 1px solid var(--color-gray-300);
1673
- border-radius: 0.5rem;
1674
- background-color: var(--color-gray-50);
1675
- min-width: 16rem;
1676
- }
1677
- .dark .datatable-wrapper & .datatable-input {
1678
- color: white;
1679
- background-color: var(--color-gray-800);
1680
- border: 1px solid var(--color-gray-700);
1681
- }
1682
- .datatable-wrapper & .datatable-input:focus {
1683
- border-color: var(--color-blue-600);
1684
- }
1685
- }
1686
- .flex-1 {
1687
- flex: 1;
1688
- }
1689
- .flex-shrink {
1690
- flex-shrink: 1;
545
+ .flex-shrink-0 {
546
+ flex-shrink: 0;
1691
547
  }
1692
548
  .shrink-0 {
1693
549
  flex-shrink: 0;
@@ -1695,55 +551,23 @@
1695
551
  .grow {
1696
552
  flex-grow: 1;
1697
553
  }
1698
- .-translate-x-full {
1699
- --tw-translate-x: -100%;
1700
- translate: var(--tw-translate-x) var(--tw-translate-y);
1701
- }
1702
- .translate-x-0 {
1703
- --tw-translate-x: calc(var(--spacing) * 0);
1704
- translate: var(--tw-translate-x) var(--tw-translate-y);
1705
- }
1706
- .translate-x-full {
1707
- --tw-translate-x: 100%;
1708
- translate: var(--tw-translate-x) var(--tw-translate-y);
1709
- }
1710
- .-translate-y-full {
1711
- --tw-translate-y: -100%;
1712
- translate: var(--tw-translate-x) var(--tw-translate-y);
1713
- }
1714
- .translate-y-full {
1715
- --tw-translate-y: 100%;
1716
- translate: var(--tw-translate-x) var(--tw-translate-y);
1717
- }
1718
- .rotate-180 {
1719
- rotate: 180deg;
554
+ .origin-top-right {
555
+ transform-origin: top right;
1720
556
  }
1721
557
  .transform {
1722
558
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1723
559
  }
1724
- .transform-none {
1725
- transform: none;
1726
- }
1727
560
  .animate-spin {
1728
561
  animation: var(--animate-spin);
1729
562
  }
1730
- .cursor-default {
1731
- cursor: default;
1732
- }
1733
563
  .cursor-not-allowed {
1734
564
  cursor: not-allowed;
1735
565
  }
1736
566
  .cursor-pointer {
1737
567
  cursor: pointer;
1738
568
  }
1739
- .resize {
1740
- resize: both;
1741
- }
1742
- .grid-cols-4 {
1743
- grid-template-columns: repeat(4, minmax(0, 1fr));
1744
- }
1745
- .grid-cols-7 {
1746
- grid-template-columns: repeat(7, minmax(0, 1fr));
569
+ .flex-col {
570
+ flex-direction: column;
1747
571
  }
1748
572
  .place-items-center {
1749
573
  place-items: center;
@@ -1751,9 +575,6 @@
1751
575
  .items-center {
1752
576
  align-items: center;
1753
577
  }
1754
- .items-end {
1755
- align-items: flex-end;
1756
- }
1757
578
  .items-start {
1758
579
  align-items: flex-start;
1759
580
  }
@@ -1766,9 +587,6 @@
1766
587
  .justify-end {
1767
588
  justify-content: flex-end;
1768
589
  }
1769
- .justify-start {
1770
- justify-content: flex-start;
1771
- }
1772
590
  .space-y-2 {
1773
591
  :where(& > :not(:last-child)) {
1774
592
  --tw-space-y-reverse: 0;
@@ -1841,21 +659,15 @@
1841
659
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1842
660
  }
1843
661
  }
1844
- .divide-gray-200 {
662
+ .divide-default {
1845
663
  :where(& > :not(:last-child)) {
1846
- border-color: var(--color-gray-200);
664
+ border-color: var(--color-default);
1847
665
  }
1848
666
  }
1849
- .overflow-hidden {
667
+ .truncate {
1850
668
  overflow: hidden;
1851
- }
1852
- .datatable-container {
1853
- .datatable-wrapper & thead tr.search-filtering-row th {
1854
- padding-top: 0;
1855
- }
1856
- .datatable-wrapper & {
1857
- overflow-x: auto;
1858
- }
669
+ text-overflow: ellipsis;
670
+ white-space: nowrap;
1859
671
  }
1860
672
  .overflow-x-auto {
1861
673
  overflow-x: auto;
@@ -1867,7 +679,10 @@
1867
679
  overflow-y: auto;
1868
680
  }
1869
681
  .rounded {
1870
- border-radius: 0.25rem;
682
+ border-radius: var(--radius);
683
+ }
684
+ .rounded-base {
685
+ border-radius: var(--radius-base);
1871
686
  }
1872
687
  .rounded-full {
1873
688
  border-radius: calc(infinity * 1px);
@@ -1878,45 +693,28 @@
1878
693
  .rounded-sm {
1879
694
  border-radius: var(--radius-sm);
1880
695
  }
1881
- .rounded-s-lg {
1882
- border-start-start-radius: var(--radius-lg);
1883
- border-end-start-radius: var(--radius-lg);
1884
- }
1885
- .rounded-e-lg {
1886
- border-start-end-radius: var(--radius-lg);
1887
- border-end-end-radius: var(--radius-lg);
696
+ .rounded-xs {
697
+ border-radius: var(--radius-xs);
1888
698
  }
1889
- .rounded-t {
1890
- border-top-left-radius: 0.25rem;
1891
- border-top-right-radius: 0.25rem;
699
+ .rounded-s-base {
700
+ border-start-start-radius: var(--radius-base);
701
+ border-end-start-radius: var(--radius-base);
1892
702
  }
1893
- .rounded-l-lg {
1894
- border-top-left-radius: var(--radius-lg);
1895
- border-bottom-left-radius: var(--radius-lg);
703
+ .rounded-e-base {
704
+ border-start-end-radius: var(--radius-base);
705
+ border-end-end-radius: var(--radius-base);
1896
706
  }
1897
- .rounded-r-lg {
1898
- border-top-right-radius: var(--radius-lg);
1899
- border-bottom-right-radius: var(--radius-lg);
1900
- }
1901
- .rounded-b {
1902
- border-bottom-right-radius: 0.25rem;
1903
- border-bottom-left-radius: 0.25rem;
707
+ .rounded-t-base {
708
+ border-top-left-radius: var(--radius-base);
709
+ border-top-right-radius: var(--radius-base);
1904
710
  }
1905
711
  .border {
1906
712
  border-style: var(--tw-border-style);
1907
713
  border-width: 1px;
1908
714
  }
1909
- .border-0 {
1910
- border-style: var(--tw-border-style);
1911
- border-width: 0px;
1912
- }
1913
- .border-e-0 {
715
+ .border-e {
1914
716
  border-inline-end-style: var(--tw-border-style);
1915
- border-inline-end-width: 0px;
1916
- }
1917
- .border-t {
1918
- border-top-style: var(--tw-border-style);
1919
- border-top-width: 1px;
717
+ border-inline-end-width: 1px;
1920
718
  }
1921
719
  .border-b {
1922
720
  border-bottom-style: var(--tw-border-style);
@@ -1924,334 +722,161 @@
1924
722
  }
1925
723
  .dark {
1926
724
  & .apexcharts-canvas .apexcharts-tooltip {
1927
- background-color: var(--color-gray-700) !important;
1928
- color: var(--color-gray-400) !important;
1929
- border-color: transparent !important;
725
+ background-color: var(--color-neutral-secondary-medium) !important;
726
+ color: var(--color-body) !important;
727
+ border-color: var(--color-default) !important;
1930
728
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1931
729
  }
1932
730
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
1933
- background-color: var(--color-gray-600) !important;
1934
- border-color: var(--color-gray-500) !important;
1935
- color: var(--color-gray-500) !important;
731
+ background-color: var(--color-neutral-tertiary-medium) !important;
732
+ border-color: var(--color-light) !important;
733
+ color: var(--color-heading) !important;
1936
734
  }
1937
735
  & .apexcharts-canvas .apexcharts-xaxistooltip {
1938
- color: var(--color-gray-400) !important;
1939
- background-color: var(--color-gray-700) !important;
736
+ color: var(--color-body) !important;
737
+ background-color: var(--color-neutral-secondary-medium) !important;
1940
738
  }
1941
739
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1942
- color: var(--color-gray-400) !important;
740
+ color: var(--color-body) !important;
1943
741
  }
1944
742
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
1945
743
  color: white !important;
1946
744
  }
1947
- & .apexcharts-canvas .apexcharts-xaxistooltip:after {
1948
- border-bottom-color: var(--color-gray-700) !important;
1949
- }
1950
- & .apexcharts-canvas .apexcharts-xaxistooltip:before {
1951
- border-bottom-color: var(--color-gray-700) !important;
1952
- }
1953
745
  & .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
1954
- background-color: var(--color-gray-700) !important;
1955
- color: var(--color-gray-400) !important;
746
+ background-color: var(--color-neutral-secondary-medium) !important;
747
+ color: var(--color-body) !important;
1956
748
  }
1957
749
  & .apexcharts-canvas .apexcharts-legend-text {
1958
- color: var(--color-gray-400) !important;
750
+ color: var(--color-body) !important;
1959
751
  }
1960
752
  & .apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1961
- color: white !important;
753
+ color: heading !important;
1962
754
  }
1963
755
  & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
1964
756
  fill: white !important;
1965
757
  }
1966
758
  & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1967
- fill: var(--color-gray-400) !important;
759
+ fill: var(--color-body) !important;
1968
760
  }
1969
761
  & .apexcharts-gridline {
1970
- stroke: var(--color-gray-700) !important;
762
+ stroke: var(--color-default) !important;
1971
763
  }
1972
764
  & .apexcharts-xcrosshairs {
1973
- stroke: var(--color-gray-700) !important;
765
+ stroke: var(--color-default) !important;
1974
766
  }
1975
767
  & .apexcharts-ycrosshairs {
1976
- stroke: var(--color-gray-700) !important;
1977
- }
1978
- }
1979
- .dark {
1980
- & .datatable-wrapper .datatable-search .datatable-input {
1981
- color: white;
1982
- background-color: var(--color-gray-800);
1983
- border: 1px solid var(--color-gray-700);
1984
- }
1985
- & .datatable-wrapper .datatable-input {
1986
- color: white;
1987
- background-color: var(--color-gray-800);
1988
- border: 1px solid var(--color-gray-700);
1989
- }
1990
- & .datatable-wrapper thead th .datatable-input {
1991
- background-color: var(--color-gray-700);
1992
- border-color: var(--color-gray-600);
1993
- color: white;
1994
- }
1995
- & .datatable-wrapper .datatable-top .datatable-dropdown {
1996
- color: var(--color-gray-400);
1997
- }
1998
- & .datatable-wrapper .datatable-top .datatable-dropdown .datatable-selector {
1999
- background-color: var(--color-gray-800);
2000
- border: 1px solid var(--color-gray-700);
2001
- color: white;
2002
- }
2003
- & .datatable-wrapper .datatable-table {
2004
- color: var(--color-gray-400);
2005
- }
2006
- & .datatable-wrapper .datatable-table thead {
2007
- color: var(--color-gray-400);
2008
- background-color: var(--color-gray-800);
2009
- }
2010
- & .datatable-wrapper .datatable-table thead th .datatable-sorter:hover {
2011
- color: white;
2012
- }
2013
- & .datatable-wrapper .datatable-table thead th.datatable-ascending .datatable-sorter {
2014
- color: white;
2015
- }
2016
- & .datatable-wrapper .datatable-table thead th.datatable-descending .datatable-sorter {
2017
- color: white;
2018
- }
2019
- & .datatable-wrapper .datatable-table tbody tr.selected {
2020
- background-color: var(--color-gray-700);
2021
- }
2022
- & .datatable-wrapper .datatable-table tbody tr {
2023
- border-bottom: 1px solid var(--color-gray-700);
2024
- }
2025
- & .datatable-wrapper .datatable-bottom .datatable-info {
2026
- color: var(--color-gray-400);
2027
- }
2028
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
2029
- color: var(--color-gray-400);
2030
- border-color: var(--color-gray-700);
2031
- }
2032
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
2033
- color: transparent;
2034
- }
2035
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
2036
- color: transparent;
2037
- }
2038
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
2039
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
2040
- }
2041
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
2042
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
2043
- }
2044
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
2045
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
2046
- }
2047
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
2048
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
2049
- }
2050
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
2051
- border-left: 1px solid var(--color-gray-700);
2052
- }
2053
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
2054
- background-color: var(--color-gray-700);
2055
- color: white;
768
+ stroke: var(--color-default) !important;
2056
769
  }
2057
770
  }
2058
- .border-blue-300 {
2059
- border-color: var(--color-blue-300);
771
+ .border-brand {
772
+ border-color: var(--color-brand);
2060
773
  }
2061
- .border-blue-600 {
2062
- border-color: var(--color-blue-600);
774
+ .border-danger {
775
+ border-color: var(--color-danger);
2063
776
  }
2064
- .border-blue-700 {
2065
- border-color: var(--color-blue-700);
777
+ .border-danger-subtle {
778
+ border-color: var(--color-danger-subtle);
2066
779
  }
2067
- .border-gray-100 {
2068
- border-color: var(--color-gray-100);
780
+ .border-dark {
781
+ border-color: var(--color-dark);
2069
782
  }
2070
- .border-gray-200 {
2071
- border-color: var(--color-gray-200);
783
+ .border-default {
784
+ border-color: var(--color-default);
2072
785
  }
2073
- .border-gray-300 {
2074
- border-color: var(--color-gray-300);
786
+ .border-default-medium {
787
+ border-color: var(--color-default-medium);
2075
788
  }
2076
- .border-green-700 {
2077
- border-color: var(--color-green-700);
789
+ .border-default-strong {
790
+ border-color: var(--color-default-strong);
2078
791
  }
2079
- .border-red-500 {
2080
- border-color: var(--color-red-500);
792
+ .border-fg-danger {
793
+ border-color: var(--color-fg-danger);
2081
794
  }
2082
- .apexcharts-active {
2083
- .apexcharts-canvas .apexcharts-tooltip-series-group& .apexcharts-tooltip-y-group {
2084
- padding: 0 !important;
2085
- }
2086
- .apexcharts-canvas .apexcharts-tooltip-series-group& {
2087
- padding-left: 0.75rem !important;
2088
- padding-right: 0.75rem !important;
2089
- padding-bottom: 0.75rem !important;
2090
- background-color: white !important;
2091
- color: var(--color-gray-500) !important;
2092
- }
2093
- .dark .apexcharts-canvas .apexcharts-tooltip-series-group& {
2094
- background-color: var(--color-gray-700) !important;
2095
- color: var(--color-gray-400) !important;
2096
- }
2097
- .apexcharts-canvas .apexcharts-tooltip-series-group&:first-of-type {
2098
- padding-top: 0.75rem !important;
2099
- }
795
+ .border-light {
796
+ border-color: var(--color-light);
2100
797
  }
2101
- .selected {
2102
- .datatable-wrapper .datatable-table tbody tr& {
2103
- background-color: var(--color-gray-100);
2104
- }
2105
- .dark .datatable-wrapper .datatable-table tbody tr& {
2106
- background-color: var(--color-gray-700);
2107
- }
798
+ .border-success {
799
+ border-color: var(--color-success);
2108
800
  }
2109
- .selectedCell {
2110
- background-color: var(--color-gray-50);
2111
- .dark & {
2112
- background-color: var(--color-gray-700);
2113
- }
801
+ .border-transparent {
802
+ border-color: transparent;
2114
803
  }
2115
- .bg-blue-50 {
2116
- background-color: var(--color-blue-50);
804
+ .border-warning {
805
+ border-color: var(--color-warning);
2117
806
  }
2118
807
  .bg-blue-100 {
2119
808
  background-color: var(--color-blue-100);
2120
809
  }
2121
- .bg-blue-700 {
2122
- background-color: var(--color-blue-700);
2123
- }
2124
- .bg-gray-50 {
2125
- background-color: var(--color-gray-50);
810
+ .bg-brand {
811
+ background-color: var(--color-brand);
2126
812
  }
2127
- .bg-gray-100 {
2128
- background-color: var(--color-gray-100);
813
+ .bg-danger {
814
+ background-color: var(--color-danger);
2129
815
  }
2130
- .bg-gray-200 {
2131
- background-color: var(--color-gray-200);
816
+ .bg-danger-soft {
817
+ background-color: var(--color-danger-soft);
2132
818
  }
2133
- .bg-gray-800 {
2134
- background-color: var(--color-gray-800);
2135
- }
2136
- .bg-gray-900\/50 {
2137
- background-color: color-mix(in srgb, #111827 50%, transparent);
2138
- @supports (color: color-mix(in lab, red, red)) {
2139
- background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
2140
- }
819
+ .bg-dark {
820
+ background-color: var(--color-dark);
2141
821
  }
2142
822
  .bg-green-100 {
2143
823
  background-color: var(--color-green-100);
2144
824
  }
2145
- .bg-green-700 {
2146
- background-color: var(--color-green-700);
825
+ .bg-neutral-primary {
826
+ background-color: var(--color-neutral-primary);
2147
827
  }
2148
- .bg-orange-100 {
2149
- background-color: var(--color-orange-100);
828
+ .bg-neutral-primary-medium {
829
+ background-color: var(--color-neutral-primary-medium);
830
+ }
831
+ .bg-neutral-primary-soft {
832
+ background-color: var(--color-neutral-primary-soft);
833
+ }
834
+ .bg-neutral-secondary-medium {
835
+ background-color: var(--color-neutral-secondary-medium);
836
+ }
837
+ .bg-neutral-secondary-soft {
838
+ background-color: var(--color-neutral-secondary-soft);
839
+ }
840
+ .bg-neutral-secondary-strong {
841
+ background-color: var(--color-neutral-secondary-strong);
2150
842
  }
2151
- .bg-purple-700 {
2152
- background-color: var(--color-purple-700);
843
+ .bg-neutral-tertiary-medium {
844
+ background-color: var(--color-neutral-tertiary-medium);
2153
845
  }
2154
- .bg-red-50 {
2155
- background-color: var(--color-red-50);
846
+ .bg-orange-100 {
847
+ background-color: var(--color-orange-100);
2156
848
  }
2157
849
  .bg-red-100 {
2158
850
  background-color: var(--color-red-100);
2159
851
  }
2160
- .bg-red-700 {
2161
- background-color: var(--color-red-700);
852
+ .bg-success {
853
+ background-color: var(--color-success);
2162
854
  }
2163
855
  .bg-transparent {
2164
856
  background-color: transparent;
2165
857
  }
2166
- .bg-white {
2167
- background-color: var(--color-white);
2168
- }
2169
- .bg-white\/50 {
2170
- background-color: color-mix(in srgb, #ffffff 50%, transparent);
2171
- @supports (color: color-mix(in lab, red, red)) {
2172
- background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
2173
- }
2174
- }
2175
- .bg-yellow-400 {
2176
- background-color: var(--color-yellow-400);
858
+ .bg-warning {
859
+ background-color: var(--color-warning);
2177
860
  }
2178
861
  .dark {
2179
862
  & .selectedCell {
2180
- background-color: var(--color-gray-700);
2181
- }
2182
- }
2183
- .apexcharts-datalabels-group {
2184
- & .apexcharts-text.apexcharts-datalabel-value {
2185
- fill: var(--color-gray-900) !important;
2186
- font-size: 1.875rem,[object Object] !important;
2187
- font-weight: 700 !important;
2188
- }
2189
- .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-value {
2190
- fill: white !important;
2191
- }
2192
- .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
2193
- fill: var(--color-gray-500) !important;
2194
- font-size: 1rem,[object Object] !important;
2195
- font-weight: 400 !important;
2196
- }
2197
- .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
2198
- fill: var(--color-gray-400) !important;
863
+ background-color: var(--color-neutral-secondary-medium);
2199
864
  }
2200
865
  }
2201
- .apexcharts-datalabel-label {
2202
- .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
2203
- fill: var(--color-gray-500) !important;
2204
- font-size: 1rem,[object Object] !important;
2205
- font-weight: 400 !important;
2206
- }
2207
- .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
2208
- fill: var(--color-gray-400) !important;
2209
- }
2210
- }
2211
- .apexcharts-datalabel-value {
2212
- .apexcharts-datalabels-group .apexcharts-text& {
2213
- fill: var(--color-gray-900) !important;
2214
- font-size: 1.875rem,[object Object] !important;
2215
- font-weight: 700 !important;
2216
- }
2217
- .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
2218
- fill: white !important;
866
+ .selected {
867
+ .datatable-wrapper .datatable-table tbody tr& {
868
+ background-color: var(--color-neutral-secondary);
2219
869
  }
2220
870
  }
2221
- .fill-blue-600 {
2222
- fill: var(--color-blue-600);
2223
- }
2224
- .apexcharts-ycrosshairs {
2225
- stroke: var(--color-gray-200) !important;
2226
- .dark & {
2227
- stroke: var(--color-gray-700) !important;
2228
- }
871
+ .fill-brand {
872
+ fill: var(--color-brand);
2229
873
  }
2230
874
  .object-cover {
2231
875
  object-fit: cover;
2232
876
  }
2233
- .apexcharts-legend {
2234
- .apexcharts-canvas & {
2235
- padding: 0 !important;
2236
- }
2237
- }
2238
- .apexcharts-tooltip-y-group {
2239
- .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active & {
2240
- padding: 0 !important;
2241
- }
2242
- }
2243
- .p-1 {
2244
- padding: calc(var(--spacing) * 1);
2245
- }
2246
- .p-1\.5 {
2247
- padding: calc(var(--spacing) * 1.5);
2248
- }
2249
877
  .p-2 {
2250
878
  padding: calc(var(--spacing) * 2);
2251
879
  }
2252
- .p-2\.5 {
2253
- padding: calc(var(--spacing) * 2.5);
2254
- }
2255
880
  .p-4 {
2256
881
  padding: calc(var(--spacing) * 4);
2257
882
  }
@@ -2261,12 +886,24 @@
2261
886
  .p-8 {
2262
887
  padding: calc(var(--spacing) * 8);
2263
888
  }
889
+ .px-0 {
890
+ padding-inline: calc(var(--spacing) * 0);
891
+ }
892
+ .px-1 {
893
+ padding-inline: calc(var(--spacing) * 1);
894
+ }
2264
895
  .px-2 {
2265
896
  padding-inline: calc(var(--spacing) * 2);
2266
897
  }
898
+ .px-2\.5 {
899
+ padding-inline: calc(var(--spacing) * 2.5);
900
+ }
2267
901
  .px-3 {
2268
902
  padding-inline: calc(var(--spacing) * 3);
2269
903
  }
904
+ .px-3\.5 {
905
+ padding-inline: calc(var(--spacing) * 3.5);
906
+ }
2270
907
  .px-4 {
2271
908
  padding-inline: calc(var(--spacing) * 4);
2272
909
  }
@@ -2276,6 +913,9 @@
2276
913
  .px-6 {
2277
914
  padding-inline: calc(var(--spacing) * 6);
2278
915
  }
916
+ .py-1\.5 {
917
+ padding-block: calc(var(--spacing) * 1.5);
918
+ }
2279
919
  .py-2 {
2280
920
  padding-block: calc(var(--spacing) * 2);
2281
921
  }
@@ -2294,44 +934,11 @@
2294
934
  .py-6 {
2295
935
  padding-block: calc(var(--spacing) * 6);
2296
936
  }
2297
- .pt-2 {
2298
- padding-top: calc(var(--spacing) * 2);
937
+ .text-center {
938
+ text-align: center;
2299
939
  }
2300
- .search-filtering-row {
2301
- .datatable-wrapper .datatable-container thead tr& th {
2302
- padding-top: 0;
2303
- }
2304
- }
2305
- .apexcharts-legend-text {
2306
- .apexcharts-canvas & {
2307
- font-size: 0.75rem !important;
2308
- font-weight: 500 !important;
2309
- padding-left: 1.25rem !important;
2310
- color: var(--color-gray-500) !important;
2311
- }
2312
- :is([dir=rtl]) .apexcharts-canvas & {
2313
- padding-right: 0.5rem !important;
2314
- }
2315
- .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2316
- color: var(--color-gray-900) !important;
2317
- }
2318
- .dark .apexcharts-canvas & {
2319
- color: var(--color-gray-400) !important;
2320
- }
2321
- .dark .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2322
- color: white !important;
2323
- }
2324
- }
2325
- .datatable-empty {
2326
- .datatable-wrapper .datatable-table & {
2327
- text-align: center;
2328
- }
2329
- }
2330
- .text-center {
2331
- text-align: center;
2332
- }
2333
- .text-left {
2334
- text-align: left;
940
+ .text-left {
941
+ text-align: left;
2335
942
  }
2336
943
  .text-right {
2337
944
  text-align: right;
@@ -2356,82 +963,13 @@
2356
963
  font-size: var(--text-sm);
2357
964
  line-height: var(--tw-leading, var(--text-sm--line-height));
2358
965
  }
2359
- .text-xl {
2360
- font-size: var(--text-xl);
2361
- line-height: var(--tw-leading, var(--text-xl--line-height));
2362
- }
2363
966
  .text-xs {
2364
967
  font-size: var(--text-xs);
2365
968
  line-height: var(--tw-leading, var(--text-xs--line-height));
2366
969
  }
2367
- .apexcharts-datalabels {
2368
- .apexcharts-canvas & .apexcharts-text.apexcharts-pie-label {
2369
- font-size: 0.75rem,[object Object] !important;
2370
- font-weight: 600 !important;
2371
- text-shadow: none !important;
2372
- filter: none !important;
2373
- }
2374
- }
2375
- .apexcharts-pie-label {
2376
- .apexcharts-canvas .apexcharts-datalabels .apexcharts-text& {
2377
- font-size: 0.75rem,[object Object] !important;
2378
- font-weight: 600 !important;
2379
- text-shadow: none !important;
2380
- filter: none !important;
2381
- }
2382
- }
2383
- .apexcharts-xaxistooltip-text {
2384
- .apexcharts-canvas & {
2385
- font-weight: 400 !important;
2386
- font-size: 0.875rem !important;
2387
- }
2388
- }
2389
- .apexcharts-tooltip-text-y-label {
2390
- .apexcharts-canvas .apexcharts-tooltip & {
2391
- color: var(--color-gray-500) !important;
2392
- font-size: 0.875rem !important;
2393
- }
2394
- .dark .apexcharts-canvas .apexcharts-tooltip & {
2395
- color: var(--color-gray-400) !important;
2396
- }
2397
- }
2398
- .apexcharts-tooltip-text-y-value {
2399
- .apexcharts-canvas .apexcharts-tooltip & {
2400
- color: var(--color-gray-900);
2401
- font-size: 0.875rem !important;
2402
- }
2403
- .dark .apexcharts-canvas .apexcharts-tooltip & {
2404
- color: white !important;
2405
- }
2406
- }
2407
- .datatable-info {
2408
- .datatable-wrapper .datatable-bottom & {
2409
- color: var(--color-gray-500);
2410
- font-size: 0.875rem;
2411
- }
2412
- .dark .datatable-wrapper .datatable-bottom & {
2413
- color: var(--color-gray-400);
2414
- }
2415
- }
2416
- .leading-6 {
2417
- --tw-leading: calc(var(--spacing) * 6);
2418
- line-height: calc(var(--spacing) * 6);
2419
- }
2420
- .leading-9 {
2421
- --tw-leading: calc(var(--spacing) * 9);
2422
- line-height: calc(var(--spacing) * 9);
2423
- }
2424
- .leading-relaxed {
2425
- --tw-leading: var(--leading-relaxed);
2426
- line-height: var(--leading-relaxed);
2427
- }
2428
- .leading-tight {
2429
- --tw-leading: var(--leading-tight);
2430
- line-height: var(--leading-tight);
2431
- }
2432
- .font-bold {
2433
- --tw-font-weight: var(--font-weight-bold);
2434
- font-weight: var(--font-weight-bold);
970
+ .leading-5 {
971
+ --tw-leading: var(--leading-5);
972
+ line-height: var(--leading-5);
2435
973
  }
2436
974
  .font-light {
2437
975
  --tw-font-weight: var(--font-weight-light);
@@ -2456,77 +994,44 @@
2456
994
  .whitespace-nowrap {
2457
995
  white-space: nowrap;
2458
996
  }
2459
- .datatable-sorter {
2460
- .datatable-wrapper .datatable-table thead th & {
2461
- text-transform: uppercase;
2462
- }
2463
- .datatable-wrapper .datatable-table thead th &:hover {
2464
- color: var(--color-gray-900);
2465
- }
2466
- .datatable-wrapper .datatable-table thead th.datatable-ascending & {
2467
- color: var(--color-gray-900);
2468
- }
2469
- .datatable-wrapper .datatable-table thead th.datatable-descending & {
2470
- color: var(--color-gray-900);
2471
- }
2472
- .dark .datatable-wrapper .datatable-table thead th &:hover {
2473
- color: white;
2474
- }
2475
- .dark .datatable-wrapper .datatable-table thead th.datatable-ascending & {
2476
- color: white;
2477
- }
2478
- .dark .datatable-wrapper .datatable-table thead th.datatable-descending & {
2479
- color: white;
2480
- }
2481
- }
2482
- .datatable-ascending {
2483
- .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2484
- color: var(--color-gray-900);
2485
- }
2486
- .dark .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2487
- color: white;
2488
- }
2489
- }
2490
- .datatable-descending {
2491
- .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2492
- color: var(--color-gray-900);
2493
- }
2494
- .dark .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2495
- color: white;
2496
- }
2497
- }
2498
997
  .text-blue-500 {
2499
998
  color: var(--color-blue-500);
2500
999
  }
2501
- .text-blue-600 {
2502
- color: var(--color-blue-600);
1000
+ .text-body {
1001
+ color: var(--color-body);
1002
+ }
1003
+ .text-body-subtle {
1004
+ color: var(--color-body-subtle);
2503
1005
  }
2504
- .text-blue-700 {
2505
- color: var(--color-blue-700);
1006
+ .text-brand {
1007
+ color: var(--color-brand);
2506
1008
  }
2507
- .text-gray-200 {
2508
- color: var(--color-gray-200);
1009
+ .text-danger {
1010
+ color: var(--color-danger);
2509
1011
  }
2510
- .text-gray-400 {
2511
- color: var(--color-gray-400);
1012
+ .text-dark {
1013
+ color: var(--color-dark);
2512
1014
  }
2513
- .text-gray-500 {
2514
- color: var(--color-gray-500);
1015
+ .text-fg-brand {
1016
+ color: var(--color-fg-brand);
2515
1017
  }
2516
- .text-gray-700 {
2517
- color: var(--color-gray-700);
1018
+ .text-fg-danger {
1019
+ color: var(--color-fg-danger);
2518
1020
  }
2519
- .text-gray-800 {
2520
- color: var(--color-gray-800);
1021
+ .text-fg-danger-strong {
1022
+ color: var(--color-fg-danger-strong);
2521
1023
  }
2522
- .text-gray-900 {
2523
- color: var(--color-gray-900);
1024
+ .text-fg-disabled {
1025
+ color: var(--color-fg-disabled);
2524
1026
  }
2525
1027
  .text-green-500 {
2526
1028
  color: var(--color-green-500);
2527
1029
  }
2528
- .text-green-700 {
2529
- color: var(--color-green-700);
1030
+ .text-heading {
1031
+ color: var(--color-heading);
1032
+ }
1033
+ .text-neutral-tertiary {
1034
+ color: var(--color-neutral-tertiary);
2530
1035
  }
2531
1036
  .text-orange-500 {
2532
1037
  color: var(--color-orange-500);
@@ -2537,37 +1042,19 @@
2537
1042
  .text-red-600 {
2538
1043
  color: var(--color-red-600);
2539
1044
  }
2540
- .text-red-700 {
2541
- color: var(--color-red-700);
1045
+ .text-success {
1046
+ color: var(--color-success);
2542
1047
  }
2543
- .text-red-900 {
2544
- color: var(--color-red-900);
1048
+ .text-warning {
1049
+ color: var(--color-warning);
2545
1050
  }
2546
1051
  .text-white {
2547
1052
  color: var(--color-white);
2548
1053
  }
2549
- .uppercase {
2550
- text-transform: uppercase;
2551
- }
2552
1054
  .antialiased {
2553
1055
  -webkit-font-smoothing: antialiased;
2554
1056
  -moz-osx-font-smoothing: grayscale;
2555
1057
  }
2556
- .placeholder-red-700 {
2557
- &::placeholder {
2558
- color: var(--color-red-700);
2559
- }
2560
- }
2561
- .opacity-0 {
2562
- opacity: 0%;
2563
- }
2564
- .opacity-100 {
2565
- opacity: 100%;
2566
- }
2567
- .shadow {
2568
- --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));
2569
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2570
- }
2571
1058
  .shadow-lg {
2572
1059
  --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));
2573
1060
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2576,18 +1063,10 @@
2576
1063
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2577
1064
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2578
1065
  }
2579
- .shadow-sm {
2580
- --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));
1066
+ .shadow-xs {
1067
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2581
1068
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2582
1069
  }
2583
- .outline {
2584
- outline-style: var(--tw-outline-style);
2585
- outline-width: 1px;
2586
- }
2587
- .blur {
2588
- --tw-blur: blur(8px);
2589
- 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,);
2590
- }
2591
1070
  .filter {
2592
1071
  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,);
2593
1072
  }
@@ -2596,94 +1075,86 @@
2596
1075
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2597
1076
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2598
1077
  }
2599
- .transition-opacity {
2600
- transition-property: opacity;
2601
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2602
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2603
- }
2604
- .transition-transform {
2605
- transition-property: transform, translate, scale, rotate;
2606
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2607
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1078
+ .select-none {
1079
+ -webkit-user-select: none;
1080
+ user-select: none;
2608
1081
  }
2609
- .ease-out {
2610
- --tw-ease: var(--ease-out);
2611
- transition-timing-function: var(--ease-out);
1082
+ .placeholder\:text-body {
1083
+ &::placeholder {
1084
+ color: var(--color-body);
1085
+ }
2612
1086
  }
2613
- .hover\:border-gray-300 {
2614
- &:hover {
2615
- @media (hover: hover) {
2616
- border-color: var(--color-gray-300);
2617
- }
1087
+ .placeholder\:text-fg-danger-strong {
1088
+ &::placeholder {
1089
+ color: var(--color-fg-danger-strong);
2618
1090
  }
2619
1091
  }
2620
- .hover\:bg-blue-100 {
2621
- &:hover {
2622
- @media (hover: hover) {
2623
- background-color: var(--color-blue-100);
2624
- }
1092
+ .placeholder\:text-fg-disabled {
1093
+ &::placeholder {
1094
+ color: var(--color-fg-disabled);
2625
1095
  }
2626
1096
  }
2627
- .hover\:bg-blue-800 {
2628
- &:hover {
2629
- @media (hover: hover) {
2630
- background-color: var(--color-blue-800);
1097
+ .backdrop\:bg-dark-backdrop\/70 {
1098
+ &::backdrop {
1099
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent);
1100
+ @supports (color: color-mix(in lab, red, red)) {
1101
+ background-color: color-mix(in oklab, var(--color-dark-backdrop) 70%, transparent);
2631
1102
  }
2632
1103
  }
2633
1104
  }
2634
- .hover\:bg-gray-100 {
1105
+ .hover\:bg-brand-strong {
2635
1106
  &:hover {
2636
1107
  @media (hover: hover) {
2637
- background-color: var(--color-gray-100);
1108
+ background-color: var(--color-brand-strong);
2638
1109
  }
2639
1110
  }
2640
1111
  }
2641
- .hover\:bg-gray-200 {
1112
+ .hover\:bg-danger-strong {
2642
1113
  &:hover {
2643
1114
  @media (hover: hover) {
2644
- background-color: var(--color-gray-200);
1115
+ background-color: var(--color-danger-strong);
2645
1116
  }
2646
1117
  }
2647
1118
  }
2648
- .hover\:bg-gray-900 {
1119
+ .hover\:bg-dark-strong {
2649
1120
  &:hover {
2650
1121
  @media (hover: hover) {
2651
- background-color: var(--color-gray-900);
1122
+ background-color: var(--color-dark-strong);
2652
1123
  }
2653
1124
  }
2654
1125
  }
2655
- .hover\:bg-green-800 {
1126
+ .hover\:bg-neutral-secondary-medium {
2656
1127
  &:hover {
2657
1128
  @media (hover: hover) {
2658
- background-color: var(--color-green-800);
1129
+ background-color: var(--color-neutral-secondary-medium);
2659
1130
  }
2660
1131
  }
2661
1132
  }
2662
- .hover\:bg-purple-800 {
1133
+ .hover\:bg-neutral-tertiary {
2663
1134
  &:hover {
2664
1135
  @media (hover: hover) {
2665
- background-color: var(--color-purple-800);
1136
+ background-color: var(--color-neutral-tertiary);
2666
1137
  }
2667
1138
  }
2668
1139
  }
2669
- .hover\:bg-red-800 {
1140
+ .hover\:bg-neutral-tertiary-medium {
2670
1141
  &:hover {
2671
1142
  @media (hover: hover) {
2672
- background-color: var(--color-red-800);
1143
+ background-color: var(--color-neutral-tertiary-medium);
2673
1144
  }
2674
1145
  }
2675
1146
  }
2676
- .hover\:bg-white {
1147
+ .hover\:bg-success-strong {
2677
1148
  &:hover {
2678
1149
  @media (hover: hover) {
2679
- background-color: var(--color-white);
1150
+ background-color: var(--color-success-strong);
2680
1151
  }
2681
1152
  }
2682
1153
  }
2683
- .hover\:bg-yellow-500 {
1154
+ .hover\:bg-warning-strong {
2684
1155
  &:hover {
2685
1156
  @media (hover: hover) {
2686
- background-color: var(--color-yellow-500);
1157
+ background-color: var(--color-warning-strong);
2687
1158
  }
2688
1159
  }
2689
1160
  }
@@ -2694,632 +1165,361 @@
2694
1165
  }
2695
1166
  }
2696
1167
  }
2697
- .hover\:text-blue-700 {
2698
- &:hover {
2699
- @media (hover: hover) {
2700
- color: var(--color-blue-700);
2701
- }
2702
- }
2703
- }
2704
- .hover\:text-gray-600 {
2705
- &:hover {
2706
- @media (hover: hover) {
2707
- color: var(--color-gray-600);
2708
- }
2709
- }
2710
- }
2711
- .hover\:text-gray-700 {
2712
- &:hover {
2713
- @media (hover: hover) {
2714
- color: var(--color-gray-700);
2715
- }
2716
- }
2717
- }
2718
- .hover\:text-gray-900 {
2719
- &:hover {
2720
- @media (hover: hover) {
2721
- color: var(--color-gray-900);
2722
- }
2723
- }
2724
- }
2725
- .hover\:text-white {
1168
+ .hover\:text-fg-brand {
2726
1169
  &:hover {
2727
1170
  @media (hover: hover) {
2728
- color: var(--color-white);
2729
- }
2730
- }
2731
- }
2732
- .hover\:underline {
2733
- &:hover {
2734
- @media (hover: hover) {
2735
- text-decoration-line: underline;
2736
- }
2737
- }
2738
- }
2739
- .focus\:z-10 {
2740
- &:focus {
2741
- z-index: 10;
2742
- }
2743
- }
2744
- .focus\:border-blue-500 {
2745
- &:focus {
2746
- border-color: var(--color-blue-500);
2747
- }
2748
- }
2749
- .focus\:border-red-500 {
2750
- &:focus {
2751
- border-color: var(--color-red-500);
2752
- }
2753
- }
2754
- .focus\:ring-2 {
2755
- &:focus {
2756
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2757
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2758
- }
2759
- }
2760
- .focus\:ring-4 {
2761
- &:focus {
2762
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2763
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2764
- }
2765
- }
2766
- .focus\:ring-blue-300 {
2767
- &:focus {
2768
- --tw-ring-color: var(--color-blue-300);
2769
- }
2770
- }
2771
- .focus\:ring-blue-500 {
2772
- &:focus {
2773
- --tw-ring-color: var(--color-blue-500);
2774
- }
2775
- }
2776
- .focus\:ring-gray-100 {
2777
- &:focus {
2778
- --tw-ring-color: var(--color-gray-100);
2779
- }
2780
- }
2781
- .focus\:ring-gray-200 {
2782
- &:focus {
2783
- --tw-ring-color: var(--color-gray-200);
2784
- }
2785
- }
2786
- .focus\:ring-gray-300 {
2787
- &:focus {
2788
- --tw-ring-color: var(--color-gray-300);
2789
- }
2790
- }
2791
- .focus\:ring-green-300 {
2792
- &:focus {
2793
- --tw-ring-color: var(--color-green-300);
2794
- }
2795
- }
2796
- .focus\:ring-purple-300 {
2797
- &:focus {
2798
- --tw-ring-color: var(--color-purple-300);
2799
- }
2800
- }
2801
- .focus\:ring-red-300 {
2802
- &:focus {
2803
- --tw-ring-color: var(--color-red-300);
2804
- }
2805
- }
2806
- .focus\:ring-red-500 {
2807
- &:focus {
2808
- --tw-ring-color: var(--color-red-500);
2809
- }
2810
- }
2811
- .focus\:ring-yellow-300 {
2812
- &:focus {
2813
- --tw-ring-color: var(--color-yellow-300);
2814
- }
2815
- }
2816
- .focus\:ring-offset-2 {
2817
- &:focus {
2818
- --tw-ring-offset-width: 2px;
2819
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2820
- }
2821
- }
2822
- .focus\:outline-none {
2823
- &:focus {
2824
- --tw-outline-style: none;
2825
- outline-style: none;
2826
- }
2827
- }
2828
- .sm\:grid {
2829
- @media (width >= 40rem) {
2830
- display: grid;
2831
- }
2832
- }
2833
- .sm\:grid-cols-4 {
2834
- @media (width >= 40rem) {
2835
- grid-template-columns: repeat(4, minmax(0, 1fr));
2836
- }
2837
- }
2838
- .sm\:gap-4 {
2839
- @media (width >= 40rem) {
2840
- gap: calc(var(--spacing) * 4);
2841
- }
2842
- }
2843
- .sm\:px-6 {
2844
- @media (width >= 40rem) {
2845
- padding-inline: calc(var(--spacing) * 6);
2846
- }
2847
- }
2848
- .md\:inset-0 {
2849
- @media (width >= 48rem) {
2850
- inset: calc(var(--spacing) * 0);
2851
- }
2852
- }
2853
- .md\:mx-0 {
2854
- @media (width >= 48rem) {
2855
- margin-inline: calc(var(--spacing) * 0);
2856
- }
2857
- }
2858
- .md\:flex {
2859
- @media (width >= 48rem) {
2860
- display: flex;
2861
- }
2862
- }
2863
- .md\:space-x-2 {
2864
- @media (width >= 48rem) {
2865
- :where(& > :not(:last-child)) {
2866
- --tw-space-x-reverse: 0;
2867
- margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
2868
- margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
1171
+ color: var(--color-fg-brand);
2869
1172
  }
2870
1173
  }
2871
- }
2872
- .md\:rounded-lg {
2873
- @media (width >= 48rem) {
2874
- border-radius: var(--radius-lg);
2875
- }
2876
- }
2877
- .md\:px-0 {
2878
- @media (width >= 48rem) {
2879
- padding-inline: calc(var(--spacing) * 0);
2880
- }
2881
- }
2882
- .md\:px-6 {
2883
- @media (width >= 48rem) {
2884
- padding-inline: calc(var(--spacing) * 6);
2885
- }
2886
- }
2887
- .lg\:mb-0 {
2888
- @media (width >= 64rem) {
2889
- margin-bottom: calc(var(--spacing) * 0);
2890
- }
2891
- }
2892
- .lg\:max-w-2xl {
2893
- @media (width >= 64rem) {
2894
- max-width: var(--container-2xl);
2895
- }
2896
- }
2897
- .rtl\:rotate-180 {
2898
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2899
- rotate: 180deg;
2900
- }
2901
- }
2902
- .rtl\:space-x-reverse {
2903
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2904
- :where(& > :not(:last-child)) {
2905
- --tw-space-x-reverse: 1;
2906
- }
2907
- }
2908
- }
2909
- .rtl\:text-right {
2910
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
2911
- text-align: right;
2912
- }
2913
- }
2914
- .dark\:divide-white\/5 {
2915
- @media (prefers-color-scheme: dark) {
2916
- :where(& > :not(:last-child)) {
2917
- border-color: color-mix(in srgb, #ffffff 5%, transparent);
2918
- @supports (color: color-mix(in lab, red, red)) {
2919
- border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2920
- }
2921
- }
2922
- }
2923
- }
2924
- .dark\:border-blue-500 {
2925
- @media (prefers-color-scheme: dark) {
2926
- border-color: var(--color-blue-500);
2927
- }
2928
- }
2929
- .dark\:border-gray-500 {
2930
- @media (prefers-color-scheme: dark) {
2931
- border-color: var(--color-gray-500);
2932
- }
2933
- }
2934
- .dark\:border-gray-600 {
2935
- @media (prefers-color-scheme: dark) {
2936
- border-color: var(--color-gray-600);
2937
- }
2938
- }
2939
- .dark\:border-gray-700 {
2940
- @media (prefers-color-scheme: dark) {
2941
- border-color: var(--color-gray-700);
2942
- }
2943
- }
2944
- .dark\:border-green-500 {
2945
- @media (prefers-color-scheme: dark) {
2946
- border-color: var(--color-green-500);
2947
- }
2948
- }
2949
- .dark\:border-red-500 {
2950
- @media (prefers-color-scheme: dark) {
2951
- border-color: var(--color-red-500);
2952
- }
2953
- }
2954
- .dark\:border-transparent {
2955
- @media (prefers-color-scheme: dark) {
2956
- border-color: transparent;
2957
- }
2958
- }
2959
- .dark\:bg-blue-600 {
2960
- @media (prefers-color-scheme: dark) {
2961
- background-color: var(--color-blue-600);
2962
- }
2963
- }
2964
- .dark\:bg-blue-800 {
2965
- @media (prefers-color-scheme: dark) {
2966
- background-color: var(--color-blue-800);
2967
- }
2968
- }
2969
- .dark\:bg-gray-600 {
2970
- @media (prefers-color-scheme: dark) {
2971
- background-color: var(--color-gray-600);
2972
- }
2973
- }
2974
- .dark\:bg-gray-700 {
2975
- @media (prefers-color-scheme: dark) {
2976
- background-color: var(--color-gray-700);
2977
- }
2978
- }
2979
- .dark\:bg-gray-800 {
2980
- @media (prefers-color-scheme: dark) {
2981
- background-color: var(--color-gray-800);
2982
- }
2983
- }
2984
- .dark\:bg-gray-800\/50 {
2985
- @media (prefers-color-scheme: dark) {
2986
- background-color: color-mix(in srgb, #1F2937 50%, transparent);
2987
- @supports (color: color-mix(in lab, red, red)) {
2988
- background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
2989
- }
2990
- }
2991
- }
2992
- .dark\:bg-gray-900 {
2993
- @media (prefers-color-scheme: dark) {
2994
- background-color: var(--color-gray-900);
2995
- }
2996
- }
2997
- .dark\:bg-gray-900\/80 {
2998
- @media (prefers-color-scheme: dark) {
2999
- background-color: color-mix(in srgb, #111827 80%, transparent);
3000
- @supports (color: color-mix(in lab, red, red)) {
3001
- background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
1174
+ }
1175
+ .hover\:text-heading {
1176
+ &:hover {
1177
+ @media (hover: hover) {
1178
+ color: var(--color-heading);
3002
1179
  }
3003
1180
  }
3004
1181
  }
3005
- .dark\:bg-green-600 {
3006
- @media (prefers-color-scheme: dark) {
3007
- background-color: var(--color-green-600);
1182
+ .hover\:text-white {
1183
+ &:hover {
1184
+ @media (hover: hover) {
1185
+ color: var(--color-white);
1186
+ }
3008
1187
  }
3009
1188
  }
3010
- .dark\:bg-green-800 {
3011
- @media (prefers-color-scheme: dark) {
3012
- background-color: var(--color-green-800);
1189
+ .hover\:underline {
1190
+ &:hover {
1191
+ @media (hover: hover) {
1192
+ text-decoration-line: underline;
1193
+ }
3013
1194
  }
3014
1195
  }
3015
- .dark\:bg-orange-700 {
3016
- @media (prefers-color-scheme: dark) {
3017
- background-color: var(--color-orange-700);
1196
+ .focus\:border-brand {
1197
+ &:focus {
1198
+ border-color: var(--color-brand);
3018
1199
  }
3019
1200
  }
3020
- .dark\:bg-purple-600 {
3021
- @media (prefers-color-scheme: dark) {
3022
- background-color: var(--color-purple-600);
1201
+ .focus\:border-danger {
1202
+ &:focus {
1203
+ border-color: var(--color-danger);
3023
1204
  }
3024
1205
  }
3025
- .dark\:bg-red-600 {
3026
- @media (prefers-color-scheme: dark) {
3027
- background-color: var(--color-red-600);
1206
+ .focus\:ring-2 {
1207
+ &:focus {
1208
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1209
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3028
1210
  }
3029
1211
  }
3030
- .dark\:bg-red-800 {
3031
- @media (prefers-color-scheme: dark) {
3032
- background-color: var(--color-red-800);
1212
+ .focus\:ring-4 {
1213
+ &:focus {
1214
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1215
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3033
1216
  }
3034
1217
  }
3035
- .dark\:text-blue-200 {
3036
- @media (prefers-color-scheme: dark) {
3037
- color: var(--color-blue-200);
1218
+ .focus\:ring-brand {
1219
+ &:focus {
1220
+ --tw-ring-color: var(--color-brand);
3038
1221
  }
3039
1222
  }
3040
- .dark\:text-blue-500 {
3041
- @media (prefers-color-scheme: dark) {
3042
- color: var(--color-blue-500);
1223
+ .focus\:ring-brand-medium {
1224
+ &:focus {
1225
+ --tw-ring-color: var(--color-brand-medium);
3043
1226
  }
3044
1227
  }
3045
- .dark\:text-gray-300 {
3046
- @media (prefers-color-scheme: dark) {
3047
- color: var(--color-gray-300);
1228
+ .focus\:ring-brand-soft {
1229
+ &:focus {
1230
+ --tw-ring-color: var(--color-brand-soft);
3048
1231
  }
3049
1232
  }
3050
- .dark\:text-gray-400 {
3051
- @media (prefers-color-scheme: dark) {
3052
- color: var(--color-gray-400);
1233
+ .focus\:ring-danger {
1234
+ &:focus {
1235
+ --tw-ring-color: var(--color-danger);
3053
1236
  }
3054
1237
  }
3055
- .dark\:text-gray-500 {
3056
- @media (prefers-color-scheme: dark) {
3057
- color: var(--color-gray-500);
1238
+ .focus\:ring-danger-medium {
1239
+ &:focus {
1240
+ --tw-ring-color: var(--color-danger-medium);
3058
1241
  }
3059
1242
  }
3060
- .dark\:text-gray-600 {
3061
- @media (prefers-color-scheme: dark) {
3062
- color: var(--color-gray-600);
1243
+ .focus\:ring-fg-danger {
1244
+ &:focus {
1245
+ --tw-ring-color: var(--color-fg-danger);
3063
1246
  }
3064
1247
  }
3065
- .dark\:text-green-200 {
3066
- @media (prefers-color-scheme: dark) {
3067
- color: var(--color-green-200);
1248
+ .focus\:ring-neutral-tertiary {
1249
+ &:focus {
1250
+ --tw-ring-color: var(--color-neutral-tertiary);
3068
1251
  }
3069
1252
  }
3070
- .dark\:text-green-500 {
3071
- @media (prefers-color-scheme: dark) {
3072
- color: var(--color-green-500);
1253
+ .focus\:ring-neutral-tertiary-soft {
1254
+ &:focus {
1255
+ --tw-ring-color: var(--color-neutral-tertiary-soft);
3073
1256
  }
3074
1257
  }
3075
- .dark\:text-orange-200 {
3076
- @media (prefers-color-scheme: dark) {
3077
- color: var(--color-orange-200);
1258
+ .focus\:ring-success-medium {
1259
+ &:focus {
1260
+ --tw-ring-color: var(--color-success-medium);
3078
1261
  }
3079
1262
  }
3080
- .dark\:text-red-200 {
3081
- @media (prefers-color-scheme: dark) {
3082
- color: var(--color-red-200);
1263
+ .focus\:ring-warning-medium {
1264
+ &:focus {
1265
+ --tw-ring-color: var(--color-warning-medium);
3083
1266
  }
3084
1267
  }
3085
- .dark\:text-red-400 {
3086
- @media (prefers-color-scheme: dark) {
3087
- color: var(--color-red-400);
1268
+ .focus\:outline-none {
1269
+ &:focus {
1270
+ --tw-outline-style: none;
1271
+ outline-style: none;
3088
1272
  }
3089
1273
  }
3090
- .dark\:text-red-500 {
3091
- @media (prefers-color-scheme: dark) {
3092
- color: var(--color-red-500);
1274
+ .aria-selected\:bg-brand {
1275
+ &[aria-selected="true"] {
1276
+ background-color: var(--color-brand);
3093
1277
  }
3094
1278
  }
3095
- .dark\:text-white {
3096
- @media (prefers-color-scheme: dark) {
1279
+ .aria-selected\:text-white {
1280
+ &[aria-selected="true"] {
3097
1281
  color: var(--color-white);
3098
1282
  }
3099
1283
  }
3100
- .dark\:placeholder-gray-400 {
3101
- @media (prefers-color-scheme: dark) {
3102
- &::placeholder {
3103
- color: var(--color-gray-400);
3104
- }
1284
+ .sm\:grid {
1285
+ @media (width >= 40rem) {
1286
+ display: grid;
3105
1287
  }
3106
1288
  }
3107
- .dark\:placeholder-red-500 {
3108
- @media (prefers-color-scheme: dark) {
3109
- &::placeholder {
3110
- color: var(--color-red-500);
3111
- }
1289
+ .sm\:grid-cols-4 {
1290
+ @media (width >= 40rem) {
1291
+ grid-template-columns: repeat(4, minmax(0, 1fr));
3112
1292
  }
3113
1293
  }
3114
- .dark\:ring-offset-gray-800 {
3115
- @media (prefers-color-scheme: dark) {
3116
- --tw-ring-offset-color: var(--color-gray-800);
1294
+ .sm\:gap-4 {
1295
+ @media (width >= 40rem) {
1296
+ gap: calc(var(--spacing) * 4);
3117
1297
  }
3118
1298
  }
3119
- .dark\:hover\:border-gray-600 {
3120
- @media (prefers-color-scheme: dark) {
3121
- &:hover {
3122
- @media (hover: hover) {
3123
- border-color: var(--color-gray-600);
3124
- }
3125
- }
1299
+ .sm\:px-6 {
1300
+ @media (width >= 40rem) {
1301
+ padding-inline: calc(var(--spacing) * 6);
3126
1302
  }
3127
1303
  }
3128
- .dark\:hover\:bg-blue-500 {
3129
- @media (prefers-color-scheme: dark) {
3130
- &:hover {
3131
- @media (hover: hover) {
3132
- background-color: var(--color-blue-500);
3133
- }
3134
- }
1304
+ .md\:mx-0 {
1305
+ @media (width >= 48rem) {
1306
+ margin-inline: calc(var(--spacing) * 0);
3135
1307
  }
3136
1308
  }
3137
- .dark\:hover\:bg-blue-700 {
3138
- @media (prefers-color-scheme: dark) {
3139
- &:hover {
3140
- @media (hover: hover) {
3141
- background-color: var(--color-blue-700);
3142
- }
3143
- }
1309
+ .md\:block {
1310
+ @media (width >= 48rem) {
1311
+ display: block;
3144
1312
  }
3145
1313
  }
3146
- .dark\:hover\:bg-gray-600 {
3147
- @media (prefers-color-scheme: dark) {
3148
- &:hover {
3149
- @media (hover: hover) {
3150
- background-color: var(--color-gray-600);
3151
- }
3152
- }
1314
+ .md\:flex {
1315
+ @media (width >= 48rem) {
1316
+ display: flex;
3153
1317
  }
3154
1318
  }
3155
- .dark\:hover\:bg-gray-700 {
3156
- @media (prefers-color-scheme: dark) {
3157
- &:hover {
3158
- @media (hover: hover) {
3159
- background-color: var(--color-gray-700);
3160
- }
3161
- }
1319
+ .md\:hidden {
1320
+ @media (width >= 48rem) {
1321
+ display: none;
3162
1322
  }
3163
1323
  }
3164
- .dark\:hover\:bg-gray-800 {
3165
- @media (prefers-color-scheme: dark) {
3166
- &:hover {
3167
- @media (hover: hover) {
3168
- background-color: var(--color-gray-800);
3169
- }
1324
+ .md\:space-y-0 {
1325
+ @media (width >= 48rem) {
1326
+ :where(& > :not(:last-child)) {
1327
+ --tw-space-y-reverse: 0;
1328
+ margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
1329
+ margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
3170
1330
  }
3171
1331
  }
3172
1332
  }
3173
- .dark\:hover\:bg-green-600 {
3174
- @media (prefers-color-scheme: dark) {
3175
- &:hover {
3176
- @media (hover: hover) {
3177
- background-color: var(--color-green-600);
3178
- }
1333
+ .md\:space-x-2 {
1334
+ @media (width >= 48rem) {
1335
+ :where(& > :not(:last-child)) {
1336
+ --tw-space-x-reverse: 0;
1337
+ margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
1338
+ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
3179
1339
  }
3180
1340
  }
3181
1341
  }
3182
- .dark\:hover\:bg-green-700 {
3183
- @media (prefers-color-scheme: dark) {
3184
- &:hover {
3185
- @media (hover: hover) {
3186
- background-color: var(--color-green-700);
3187
- }
3188
- }
1342
+ .md\:px-0 {
1343
+ @media (width >= 48rem) {
1344
+ padding-inline: calc(var(--spacing) * 0);
3189
1345
  }
3190
1346
  }
3191
- .dark\:hover\:bg-purple-700 {
3192
- @media (prefers-color-scheme: dark) {
3193
- &:hover {
3194
- @media (hover: hover) {
3195
- background-color: var(--color-purple-700);
3196
- }
3197
- }
1347
+ .md\:px-2 {
1348
+ @media (width >= 48rem) {
1349
+ padding-inline: calc(var(--spacing) * 2);
3198
1350
  }
3199
1351
  }
3200
- .dark\:hover\:bg-red-700 {
3201
- @media (prefers-color-scheme: dark) {
3202
- &:hover {
3203
- @media (hover: hover) {
3204
- background-color: var(--color-red-700);
3205
- }
3206
- }
1352
+ .md\:px-6 {
1353
+ @media (width >= 48rem) {
1354
+ padding-inline: calc(var(--spacing) * 6);
3207
1355
  }
3208
1356
  }
3209
- .dark\:hover\:text-blue-500 {
3210
- @media (prefers-color-scheme: dark) {
3211
- &:hover {
3212
- @media (hover: hover) {
3213
- color: var(--color-blue-500);
3214
- }
3215
- }
1357
+ .lg\:mb-0 {
1358
+ @media (width >= 64rem) {
1359
+ margin-bottom: calc(var(--spacing) * 0);
3216
1360
  }
3217
1361
  }
3218
- .dark\:hover\:text-gray-300 {
3219
- @media (prefers-color-scheme: dark) {
3220
- &:hover {
3221
- @media (hover: hover) {
3222
- color: var(--color-gray-300);
3223
- }
3224
- }
1362
+ .lg\:max-w-2xl {
1363
+ @media (width >= 64rem) {
1364
+ max-width: var(--container-2xl);
3225
1365
  }
3226
1366
  }
3227
- .dark\:hover\:text-white {
3228
- @media (prefers-color-scheme: dark) {
3229
- &:hover {
3230
- @media (hover: hover) {
3231
- color: var(--color-white);
3232
- }
3233
- }
1367
+ .rtl\:rotate-180 {
1368
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1369
+ rotate: 180deg;
3234
1370
  }
3235
1371
  }
3236
- .hover\:dark\:text-blue-500 {
3237
- &:hover {
3238
- @media (hover: hover) {
3239
- @media (prefers-color-scheme: dark) {
3240
- color: var(--color-blue-500);
3241
- }
1372
+ .rtl\:space-x-reverse {
1373
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1374
+ :where(& > :not(:last-child)) {
1375
+ --tw-space-x-reverse: 1;
3242
1376
  }
3243
1377
  }
3244
1378
  }
3245
- .dark\:focus\:border-blue-500 {
3246
- @media (prefers-color-scheme: dark) {
3247
- &:focus {
3248
- border-color: var(--color-blue-500);
3249
- }
1379
+ .rtl\:text-right {
1380
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1381
+ text-align: right;
3250
1382
  }
3251
1383
  }
3252
- .dark\:focus\:ring-blue-500 {
1384
+ .dark\:bg-blue-800 {
3253
1385
  @media (prefers-color-scheme: dark) {
3254
- &:focus {
3255
- --tw-ring-color: var(--color-blue-500);
3256
- }
1386
+ background-color: var(--color-blue-800);
3257
1387
  }
3258
1388
  }
3259
- .dark\:focus\:ring-blue-600 {
1389
+ .dark\:bg-green-800 {
3260
1390
  @media (prefers-color-scheme: dark) {
3261
- &:focus {
3262
- --tw-ring-color: var(--color-blue-600);
3263
- }
1391
+ background-color: var(--color-green-800);
3264
1392
  }
3265
1393
  }
3266
- .dark\:focus\:ring-blue-800 {
1394
+ .dark\:bg-orange-700 {
3267
1395
  @media (prefers-color-scheme: dark) {
3268
- &:focus {
3269
- --tw-ring-color: var(--color-blue-800);
3270
- }
1396
+ background-color: var(--color-orange-700);
3271
1397
  }
3272
1398
  }
3273
- .dark\:focus\:ring-gray-600 {
1399
+ .dark\:bg-red-800 {
3274
1400
  @media (prefers-color-scheme: dark) {
3275
- &:focus {
3276
- --tw-ring-color: var(--color-gray-600);
3277
- }
1401
+ background-color: var(--color-red-800);
3278
1402
  }
3279
1403
  }
3280
- .dark\:focus\:ring-gray-700 {
1404
+ .dark\:text-blue-200 {
3281
1405
  @media (prefers-color-scheme: dark) {
3282
- &:focus {
3283
- --tw-ring-color: var(--color-gray-700);
3284
- }
1406
+ color: var(--color-blue-200);
3285
1407
  }
3286
1408
  }
3287
- .dark\:focus\:ring-green-800 {
1409
+ .dark\:text-green-200 {
3288
1410
  @media (prefers-color-scheme: dark) {
3289
- &:focus {
3290
- --tw-ring-color: var(--color-green-800);
3291
- }
1411
+ color: var(--color-green-200);
3292
1412
  }
3293
1413
  }
3294
- .dark\:focus\:ring-purple-900 {
1414
+ .dark\:text-orange-200 {
3295
1415
  @media (prefers-color-scheme: dark) {
3296
- &:focus {
3297
- --tw-ring-color: var(--color-purple-900);
3298
- }
1416
+ color: var(--color-orange-200);
3299
1417
  }
3300
1418
  }
3301
- .dark\:focus\:ring-red-600 {
1419
+ .dark\:text-red-200 {
3302
1420
  @media (prefers-color-scheme: dark) {
3303
- &:focus {
3304
- --tw-ring-color: var(--color-red-600);
3305
- }
1421
+ color: var(--color-red-200);
3306
1422
  }
3307
1423
  }
3308
- .dark\:focus\:ring-red-900 {
1424
+ .dark\:text-red-500 {
3309
1425
  @media (prefers-color-scheme: dark) {
3310
- &:focus {
3311
- --tw-ring-color: var(--color-red-900);
3312
- }
1426
+ color: var(--color-red-500);
3313
1427
  }
3314
1428
  }
3315
- .dark\:focus\:ring-yellow-900 {
3316
- @media (prefers-color-scheme: dark) {
3317
- &:focus {
3318
- --tw-ring-color: var(--color-yellow-900);
1429
+ .hover\:dark\:text-blue-500 {
1430
+ &:hover {
1431
+ @media (hover: hover) {
1432
+ @media (prefers-color-scheme: dark) {
1433
+ color: var(--color-blue-500);
1434
+ }
3319
1435
  }
3320
1436
  }
3321
1437
  }
3322
1438
  }
1439
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
1440
+ .dark {
1441
+ --color-body: var(--color-gray-400);
1442
+ --color-body-subtle: var(--color-gray-400);
1443
+ --color-heading: var(--color-white);
1444
+ --color-fg-brand-subtle: var(--color-blue-200);
1445
+ --color-fg-brand: var(--color-blue-500);
1446
+ --color-fg-brand-strong: var(--color-blue-400);
1447
+ --color-fg-success: var(--color-emerald-600);
1448
+ --color-fg-success-strong: var(--color-emerald-300);
1449
+ --color-fg-danger: var(--color-rose-500);
1450
+ --color-fg-danger-strong: var(--color-rose-300);
1451
+ --color-fg-warning-subtle: var(--color-orange-500);
1452
+ --color-fg-warning: var(--color-orange-300);
1453
+ --color-fg-yellow: var(--color-yellow-400);
1454
+ --color-fg-disabled: var(--color-gray-600);
1455
+ --color-fg-purple: var(--color-purple-500);
1456
+ --color-fg-cyan: var(--color-cyan-500);
1457
+ --color-fg-indigo: var(--color-indigo-500);
1458
+ --color-fg-pink: var(--color-pink-500);
1459
+ --color-fg-lime: var(--color-lime-500);
1460
+ --color-neutral-primary-soft: var(--color-gray-900);
1461
+ --color-neutral-primary: var(--color-gray-950);
1462
+ --color-neutral-primary-medium: var(--color-gray-800);
1463
+ --color-neutral-primary-strong: var(--color-gray-700);
1464
+ --color-neutral-secondary-soft: var(--color-gray-900);
1465
+ --color-neutral-secondary: var(--color-gray-950);
1466
+ --color-neutral-secondary-medium: var(--color-gray-800);
1467
+ --color-neutral-secondary-strong: var(--color-gray-700);
1468
+ --color-neutral-secondary-strongest: var(--color-gray-600);
1469
+ --color-neutral-tertiary-soft: var(--color-gray-900);
1470
+ --color-neutral-tertiary: var(--color-gray-800);
1471
+ --color-neutral-tertiary-medium: var(--color-gray-700);
1472
+ --color-neutral-quaternary: var(--color-gray-700);
1473
+ --color-neutral-quaternary-medium: var(--color-gray-600);
1474
+ --color-gray: var(--color-gray-600);
1475
+ --color-brand-softer: var(--color-blue-950);
1476
+ --color-brand-soft: var(--color-blue-900);
1477
+ --color-brand: var(--color-blue-600);
1478
+ --color-brand-medium: var(--color-blue-900);
1479
+ --color-brand-strong: var(--color-blue-700);
1480
+ --color-success-soft: var(--color-emerald-950);
1481
+ --color-success: var(--color-emerald-600);
1482
+ --color-success-medium: var(--color-emerald-900);
1483
+ --color-success-strong: var(--color-emerald-700);
1484
+ --color-danger-soft: var(--color-rose-950);
1485
+ --color-danger: var(--color-rose-700);
1486
+ --color-danger-medium: var(--color-rose-900);
1487
+ --color-danger-strong: var(--color-rose-800);
1488
+ --color-warning-soft: var(--color-orange-950);
1489
+ --color-warning: var(--color-orange-600);
1490
+ --color-warning-medium: var(--color-orange-900);
1491
+ --color-warning-strong: var(--color-orange-700);
1492
+ --color-dark-soft: var(--color-gray-700);
1493
+ --color-dark: var(--color-gray-800);
1494
+ --color-dark-strong: var(--color-gray-700);
1495
+ --color-disabled: var(--color-gray-800);
1496
+ --color-purple: var(--color-purple-500);
1497
+ --color-sky: var(--color-sky-500);
1498
+ --color-teal: var(--color-teal-500);
1499
+ --color-pink: var(--color-pink-500);
1500
+ --color-cyan: var(--color-cyan-500);
1501
+ --color-fuchsia: var(--color-fuchsia-500);
1502
+ --color-indigo: var(--color-indigo-500);
1503
+ --color-orange: var(--color-orange-400);
1504
+ --color-buffer: var(--color-gray-950);
1505
+ --color-buffer-medium: var(--color-gray-900);
1506
+ --color-buffer-strong: var(--color-gray-800);
1507
+ --color-muted: var(--color-gray-900);
1508
+ --color-light-subtle: var(--color-gray-900);
1509
+ --color-light: var(--color-gray-800);
1510
+ --color-light-medium: var(--color-gray-700);
1511
+ --color-default-subtle: var(--color-gray-900);
1512
+ --color-default: var(--color-gray-800);
1513
+ --color-default-medium: var(--color-gray-700);
1514
+ --color-default-strong: var(--color-gray-600);
1515
+ --color-success-subtle: var(--color-emerald-900);
1516
+ --color-danger-subtle: var(--color-rose-900);
1517
+ --color-warning-subtle: var(--color-orange-900);
1518
+ --color-brand-subtle: var(--color-blue-900);
1519
+ --color-brand-light: var(--color-blue-600);
1520
+ --color-dark-subtle: var(--color-gray-700);
1521
+ --color-dark-backdrop: var(--color-gray-950);
1522
+ }
3323
1523
  @layer base {
3324
1524
  .tooltip-arrow,.tooltip-arrow:before {
3325
1525
  position: absolute;
@@ -3337,7 +1537,7 @@
3337
1537
  }
3338
1538
  [data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
3339
1539
  border-style: solid;
3340
- border-color: var(--color-gray-200);
1540
+ border-color: var(--color-neutral-tertiary);
3341
1541
  }
3342
1542
  [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
3343
1543
  border-bottom-width: 1px;
@@ -3356,16 +1556,16 @@
3356
1556
  border-right-width: 1px;
3357
1557
  }
3358
1558
  .tooltip[data-popper-placement^='top'] > .tooltip-arrow {
3359
- bottom: -4px;
1559
+ bottom: -3px;
3360
1560
  }
3361
1561
  .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
3362
- top: -4px;
1562
+ top: -3px;
3363
1563
  }
3364
1564
  .tooltip[data-popper-placement^='left'] > .tooltip-arrow {
3365
- right: -4px;
1565
+ right: -3px;
3366
1566
  }
3367
1567
  .tooltip[data-popper-placement^='right'] > .tooltip-arrow {
3368
- left: -4px;
1568
+ left: -3px;
3369
1569
  }
3370
1570
  .tooltip.invisible > .tooltip-arrow:before {
3371
1571
  visibility: hidden;
@@ -3395,19 +1595,19 @@
3395
1595
  }
3396
1596
  [role="tooltip"] > [data-popper-arrow]:before {
3397
1597
  border-style: solid;
3398
- border-color: var(--color-gray-200);
1598
+ border-color: var(--color-neutral-tertiary);
3399
1599
  }
3400
1600
  .dark [role="tooltip"] > [data-popper-arrow]:before {
3401
1601
  border-style: solid;
3402
- border-color: var(--color-gray-600);
1602
+ border-color: var(--color-dark);
3403
1603
  }
3404
1604
  [role="tooltip"] > [data-popper-arrow]:after {
3405
1605
  border-style: solid;
3406
- border-color: var(--color-gray-200);
1606
+ border-color: var(--color-neutral-tertiary);
3407
1607
  }
3408
1608
  .dark [role="tooltip"] > [data-popper-arrow]:after {
3409
1609
  border-style: solid;
3410
- border-color: var(--color-gray-600);
1610
+ border-color: var(--color-dark);
3411
1611
  }
3412
1612
  [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
3413
1613
  border-bottom-width: 1px;
@@ -3442,16 +1642,16 @@
3442
1642
  border-right-width: 1px;
3443
1643
  }
3444
1644
  [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
3445
- bottom: -5px;
1645
+ bottom: -4px;
3446
1646
  }
3447
1647
  [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
3448
- top: -5px;
1648
+ top: -4px;
3449
1649
  }
3450
1650
  [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
3451
- right: -5px;
1651
+ right: -4px;
3452
1652
  }
3453
1653
  [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
3454
- left: -5px;
1654
+ left: -4px;
3455
1655
  }
3456
1656
  [role="tooltip"].invisible > [data-popper-arrow]:before {
3457
1657
  visibility: hidden;
@@ -3464,7 +1664,7 @@
3464
1664
  [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
3465
1665
  appearance: none;
3466
1666
  background-color: #fff;
3467
- border-color: var(--color-gray-500);
1667
+ border-color: var(--color-body);
3468
1668
  border-width: 1px;
3469
1669
  border-radius: 0px;
3470
1670
  padding-top: 0.5rem;
@@ -3480,15 +1680,15 @@
3480
1680
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3481
1681
  --tw-ring-offset-width: 0px;
3482
1682
  --tw-ring-offset-color: #fff;
3483
- --tw-ring-color: var(--color-blue-600);
1683
+ --tw-ring-color: var(--color-brand);
3484
1684
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3485
1685
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3486
1686
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3487
- border-color: var(--color-blue-600);
1687
+ border-color: var(--color-brand);
3488
1688
  }
3489
1689
  }
3490
1690
  input::placeholder,textarea::placeholder {
3491
- color: var(--color-gray-500);
1691
+ color: var(--color-body);
3492
1692
  opacity: 1;
3493
1693
  }
3494
1694
  ::-webkit-datetime-edit-fields-wrapper {
@@ -3498,7 +1698,7 @@
3498
1698
  background: none;
3499
1699
  }
3500
1700
  select:not([size]) {
3501
- background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
1701
+ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
3502
1702
  background-position: right 0.75rem center;
3503
1703
  background-repeat: no-repeat;
3504
1704
  background-size: 0.75em 0.75em;
@@ -3519,6 +1719,7 @@
3519
1719
  print-color-adjust: unset;
3520
1720
  }
3521
1721
  [type='checkbox'],[type='radio'] {
1722
+ position: relative;
3522
1723
  appearance: none;
3523
1724
  padding: 0;
3524
1725
  print-color-adjust: exact;
@@ -3529,9 +1730,9 @@
3529
1730
  flex-shrink: 0;
3530
1731
  height: 1rem;
3531
1732
  width: 1rem;
3532
- color: var(--color-blue-600);
1733
+ color: var(--color-brand);
3533
1734
  background-color: #fff;
3534
- border-color: --color-gray-500;
1735
+ border-color: var(--color-default);
3535
1736
  border-width: 1px;
3536
1737
  --tw-shadow: 0 0 #0000;
3537
1738
  }
@@ -3542,36 +1743,72 @@
3542
1743
  border-radius: 100%;
3543
1744
  }
3544
1745
  [type='checkbox']:focus,[type='radio']:focus {
3545
- outline: 2px solid transparent;
3546
- outline-offset: 2px;
1746
+ outline: 1px solid transparent;
3547
1747
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3548
- --tw-ring-offset-width: 2px;
3549
1748
  --tw-ring-offset-color: #fff;
3550
- --tw-ring-color: var(--color-blue-600);
1749
+ --tw-ring-color: var(--color-brand);
3551
1750
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3552
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1751
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3553
1752
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3554
1753
  }
1754
+ [type='checkbox']:checked,.dark [type='checkbox']:checked {
1755
+ border-color: currentColor !important;
1756
+ }
3555
1757
  [type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked {
3556
- border-color: transparent !important;
3557
1758
  background-color: currentColor !important;
3558
- background-size: 0.55em 0.55em;
1759
+ background-size: 0.85em 0.85em !important;
3559
1760
  background-position: center;
3560
1761
  background-repeat: no-repeat;
3561
1762
  }
3562
1763
  [type='checkbox']:checked {
3563
- background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
1764
+ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 11.917 9.724 16.5 19 7.5'/%3e %3c/svg%3e");
3564
1765
  background-repeat: no-repeat;
3565
- background-size: 0.55em 0.55em;
1766
+ background-size: 0.75em 0.75em;
3566
1767
  print-color-adjust: exact;
3567
1768
  }
3568
- [type='radio']:checked {
3569
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
3570
- background-size: 1em 1em;
1769
+ [type='radio']:checked:before, [type='radio']:disabled:checked:before {
1770
+ content: '';
1771
+ position: absolute;
1772
+ top: 50%;
1773
+ left: 50%;
1774
+ transform: translate(-50%, -50%);
1775
+ border-radius: 100%;
1776
+ background-color: var(--color-brand);
1777
+ width: .9em !important;
1778
+ height: .9em !important;
1779
+ }
1780
+ [type='radio']:checked:after, [type='radio']:disabled:checked:after {
1781
+ content: '';
1782
+ position: absolute;
1783
+ top: 50%;
1784
+ left: 50%;
1785
+ transform: translate(-50%, -50%);
1786
+ border-radius: 100%;
1787
+ background-color: var(--color-white);
1788
+ width: .35em !important;
1789
+ height: .35em !important;
1790
+ }
1791
+ .dark [type='radio']:checked:before, .dark [type='radio']:disabled:checked:before {
1792
+ content: '';
1793
+ position: absolute;
1794
+ top: 50%;
1795
+ left: 50%;
1796
+ transform: translate(-50%, -50%);
1797
+ border-radius: 100%;
1798
+ background-color: var(--color-brand);
1799
+ width: .9em !important;
1800
+ height: .9em !important;
3571
1801
  }
3572
- .dark [type='radio']:checked {
3573
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
3574
- background-size: 1em 1em;
1802
+ .dark [type='radio']:checked:after, .dark [type='radio']:disabled:checked:after {
1803
+ content: '';
1804
+ position: absolute;
1805
+ top: 50%;
1806
+ left: 50%;
1807
+ transform: translate(-50%, -50%);
1808
+ border-radius: 100%;
1809
+ background-color: var(--color-white);
1810
+ width: .35em !important;
1811
+ height: .35em !important;
3575
1812
  }
3576
1813
  [type='checkbox']:indeterminate {
3577
1814
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
@@ -3579,7 +1816,7 @@
3579
1816
  border-color: transparent !important;
3580
1817
  background-position: center;
3581
1818
  background-repeat: no-repeat;
3582
- background-size: 0.55em 0.55em;
1819
+ background-size: 1.55em 1.55em;
3583
1820
  print-color-adjust: exact;
3584
1821
  }
3585
1822
  [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
@@ -3599,8 +1836,8 @@
3599
1836
  outline: 1px auto inherit;
3600
1837
  }
3601
1838
  input[type=file]::file-selector-button {
3602
- color: white;
3603
- background: var(--color-gray-800);
1839
+ color: var(--color-body);
1840
+ background: var(--color-neutral-quaternary);
3604
1841
  border: 0;
3605
1842
  font-weight: 500;
3606
1843
  font-size: 0.875rem;
@@ -3612,7 +1849,7 @@
3612
1849
  margin-inline-start: -1rem;
3613
1850
  margin-inline-end: 1rem;
3614
1851
  &:hover {
3615
- background: var(--color-gray-700);
1852
+ background: var(--color-neutral-quaternary);
3616
1853
  }
3617
1854
  }
3618
1855
  :is([dir=rtl]) input[type=file]::file-selector-button {
@@ -3620,16 +1857,16 @@
3620
1857
  padding-left: 1rem;
3621
1858
  }
3622
1859
  .dark input[type=file]::file-selector-button {
3623
- color: white;
3624
- background: var(--color-gray-600);
1860
+ color: var(--color-body);
1861
+ background: var(--color-neutral-quaternary);
3625
1862
  &:hover {
3626
- background: var(--color-gray-500);
1863
+ background: var(--color-neutral-quaternary);
3627
1864
  }
3628
1865
  }
3629
1866
  input[type="range"]::-webkit-slider-thumb {
3630
1867
  height: 1.25rem;
3631
1868
  width: 1.25rem;
3632
- background: var(--color-blue-600);
1869
+ background: var(--color-brand);
3633
1870
  border-radius: 9999px;
3634
1871
  border: 0;
3635
1872
  appearance: none;
@@ -3638,10 +1875,10 @@
3638
1875
  cursor: pointer;
3639
1876
  }
3640
1877
  input[type="range"]:disabled::-webkit-slider-thumb {
3641
- background: var(--color-gray-400);
1878
+ background: var(--color-body);
3642
1879
  }
3643
1880
  .dark input[type="range"]:disabled::-webkit-slider-thumb {
3644
- background: var(--color-gray-500);
1881
+ background: var(--color-body);
3645
1882
  }
3646
1883
  input[type="range"]:focus::-webkit-slider-thumb {
3647
1884
  outline: 2px solid transparent;
@@ -3655,7 +1892,7 @@
3655
1892
  input[type="range"]::-moz-range-thumb {
3656
1893
  height: 1.25rem;
3657
1894
  width: 1.25rem;
3658
- background: var(--color-blue-600);
1895
+ background: var(--color-brand);
3659
1896
  border-radius: 9999px;
3660
1897
  border: 0;
3661
1898
  appearance: none;
@@ -3664,16 +1901,16 @@
3664
1901
  cursor: pointer;
3665
1902
  }
3666
1903
  input[type="range"]:disabled::-moz-range-thumb {
3667
- background: var(--color-gray-400);
1904
+ background: var(--color-body);
3668
1905
  }
3669
1906
  .dark input[type="range"]:disabled::-moz-range-thumb {
3670
- background: var(--color-gray-500);
1907
+ background: var(--color-body);
3671
1908
  }
3672
1909
  input[type="range"]::-moz-range-progress {
3673
- background: var(--color-blue-500);
1910
+ background: var(--color-brand);
3674
1911
  }
3675
1912
  input[type="range"]::-ms-fill-lower {
3676
- background: var(--color-blue-500);
1913
+ background: var(--color-brand);
3677
1914
  }
3678
1915
  input[type="range"].range-sm::-webkit-slider-thumb {
3679
1916
  height: 1rem;
@@ -3697,7 +1934,7 @@
3697
1934
  top: 0.125rem;
3698
1935
  left: 0.125rem;
3699
1936
  background: white;
3700
- border-color: var(--color-gray-300);
1937
+ border-color: var(--color-default);
3701
1938
  border-width: 1px;
3702
1939
  border-radius: 9999px;
3703
1940
  height: 1.25rem;
@@ -3711,25 +1948,10 @@
3711
1948
  border-color: white;
3712
1949
  }
3713
1950
  input:checked + .toggle-bg {
3714
- background: var(--color-blue-600);
3715
- border-color: var(--color-blue-600);
1951
+ background: var(--color-brand);
1952
+ border-color: var(--color-brand);
3716
1953
  }
3717
1954
  }
3718
- @property --tw-translate-x {
3719
- syntax: "*";
3720
- inherits: false;
3721
- initial-value: 0;
3722
- }
3723
- @property --tw-translate-y {
3724
- syntax: "*";
3725
- inherits: false;
3726
- initial-value: 0;
3727
- }
3728
- @property --tw-translate-z {
3729
- syntax: "*";
3730
- inherits: false;
3731
- initial-value: 0;
3732
- }
3733
1955
  @property --tw-rotate-x {
3734
1956
  syntax: "*";
3735
1957
  inherits: false;
@@ -3847,11 +2069,6 @@
3847
2069
  inherits: false;
3848
2070
  initial-value: 0 0 #0000;
3849
2071
  }
3850
- @property --tw-outline-style {
3851
- syntax: "*";
3852
- inherits: false;
3853
- initial-value: solid;
3854
- }
3855
2072
  @property --tw-blur {
3856
2073
  syntax: "*";
3857
2074
  inherits: false;
@@ -3905,26 +2122,14 @@
3905
2122
  syntax: "*";
3906
2123
  inherits: false;
3907
2124
  }
3908
- @property --tw-ease {
3909
- syntax: "*";
3910
- inherits: false;
3911
- }
3912
2125
  @keyframes spin {
3913
2126
  to {
3914
2127
  transform: rotate(360deg);
3915
2128
  }
3916
2129
  }
3917
- @keyframes pulse {
3918
- 50% {
3919
- opacity: 0.5;
3920
- }
3921
- }
3922
2130
  @layer properties {
3923
2131
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3924
2132
  *, ::before, ::after, ::backdrop {
3925
- --tw-translate-x: 0;
3926
- --tw-translate-y: 0;
3927
- --tw-translate-z: 0;
3928
2133
  --tw-rotate-x: initial;
3929
2134
  --tw-rotate-y: initial;
3930
2135
  --tw-rotate-z: initial;
@@ -3951,7 +2156,6 @@
3951
2156
  --tw-ring-offset-width: 0px;
3952
2157
  --tw-ring-offset-color: #fff;
3953
2158
  --tw-ring-offset-shadow: 0 0 #0000;
3954
- --tw-outline-style: solid;
3955
2159
  --tw-blur: initial;
3956
2160
  --tw-brightness: initial;
3957
2161
  --tw-contrast: initial;
@@ -3965,7 +2169,6 @@
3965
2169
  --tw-drop-shadow-color: initial;
3966
2170
  --tw-drop-shadow-alpha: 100%;
3967
2171
  --tw-drop-shadow-size: initial;
3968
- --tw-ease: initial;
3969
2172
  }
3970
2173
  }
3971
2174
  }