uchi 0.1.6 → 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 (32) 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 +804 -3
  6. data/app/assets/javascripts/uchi.js +9 -0
  7. data/app/assets/stylesheets/uchi/application.css +81 -1549
  8. data/app/assets/tailwind/uchi.css +2 -2
  9. data/app/components/uchi/field/belongs_to/edit.html.erb +73 -1
  10. data/app/components/uchi/field/belongs_to.rb +25 -25
  11. data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb +1 -1
  12. data/app/components/uchi/field/has_many/edit.html.erb +86 -1
  13. data/app/components/uchi/field/has_many/show.html.erb +1 -1
  14. data/app/components/uchi/field/has_many.rb +59 -11
  15. data/app/components/uchi/ui/navigation/navigation.html.erb +1 -1
  16. data/app/components/uchi/ui/page_header/page_header.html.erb +7 -7
  17. data/app/controllers/uchi/belongs_to/associated_records_controller.rb +89 -0
  18. data/app/controllers/uchi/has_many/associated_records_controller.rb +89 -0
  19. data/app/views/layouts/uchi/_javascript.html.erb +1 -0
  20. data/app/views/layouts/uchi/_stylesheets.html.erb +1 -0
  21. data/app/views/layouts/uchi/application.html.erb +4 -4
  22. data/app/views/uchi/belongs_to/associated_records/index.html.erb +13 -0
  23. data/app/views/uchi/has_many/associated_records/index.html.erb +26 -0
  24. data/app/views/uchi/navigation/_main.html.erb +83 -0
  25. data/lib/generators/uchi/controller/controller_generator.rb +0 -4
  26. data/lib/generators/uchi/install/install_generator.rb +1 -1
  27. data/lib/uchi/field/configuration.rb +1 -1
  28. data/lib/uchi/repository.rb +13 -2
  29. data/lib/uchi/routes.rb +45 -0
  30. data/lib/uchi/version.rb +1 -1
  31. data/lib/uchi.rb +4 -1
  32. metadata +10 -1
@@ -5,18 +5,11 @@
5
5
  :root, :host {
6
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
7
  --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
8
- --color-red-50: oklch(97.1% 0.013 17.38);
9
8
  --color-red-100: oklch(93.6% 0.032 17.717);
10
9
  --color-red-200: oklch(88.5% 0.062 18.334);
11
- --color-red-300: oklch(80.8% 0.114 19.571);
12
- --color-red-400: oklch(70.4% 0.191 22.216);
13
10
  --color-red-500: oklch(63.7% 0.237 25.331);
14
11
  --color-red-600: oklch(57.7% 0.245 27.325);
15
- --color-red-700: oklch(50.5% 0.213 27.518);
16
12
  --color-red-800: oklch(44.4% 0.177 26.899);
17
- --color-red-900: oklch(39.6% 0.141 25.723);
18
- --color-red-950: oklch(25.8% 0.092 26.042);
19
- --color-orange-50: oklch(98% 0.016 73.684);
20
13
  --color-orange-100: oklch(95.4% 0.038 75.164);
21
14
  --color-orange-200: oklch(90.1% 0.076 70.697);
22
15
  --color-orange-300: oklch(83.7% 0.128 66.29);
@@ -24,72 +17,26 @@
24
17
  --color-orange-500: oklch(70.5% 0.213 47.604);
25
18
  --color-orange-600: oklch(64.6% 0.222 41.116);
26
19
  --color-orange-700: oklch(55.3% 0.195 38.402);
27
- --color-orange-800: oklch(47% 0.157 37.304);
28
20
  --color-orange-900: oklch(40.8% 0.123 38.172);
29
21
  --color-orange-950: oklch(26.6% 0.079 36.259);
30
- --color-yellow-50: oklch(98.7% 0.026 102.212);
31
- --color-yellow-100: oklch(97.3% 0.071 103.193);
32
- --color-yellow-200: oklch(94.5% 0.129 101.54);
33
- --color-yellow-300: oklch(90.5% 0.182 98.111);
34
22
  --color-yellow-400: oklch(85.2% 0.199 91.936);
35
- --color-yellow-500: oklch(79.5% 0.184 86.047);
36
- --color-yellow-600: oklch(68.1% 0.162 75.834);
37
- --color-yellow-700: oklch(55.4% 0.135 66.442);
38
- --color-yellow-800: oklch(47.6% 0.114 61.907);
39
- --color-yellow-900: oklch(42.1% 0.095 57.708);
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);
43
23
  --color-lime-500: oklch(76.8% 0.233 130.85);
44
- --color-lime-600: oklch(64.8% 0.2 131.684);
45
- --color-lime-800: oklch(45.3% 0.124 130.933);
46
- --color-green-50: oklch(98.2% 0.018 155.826);
47
24
  --color-green-100: oklch(96.2% 0.044 156.743);
48
25
  --color-green-200: oklch(92.5% 0.084 155.995);
49
- --color-green-300: oklch(87.1% 0.15 154.449);
50
- --color-green-400: oklch(79.2% 0.209 151.711);
51
26
  --color-green-500: oklch(72.3% 0.219 149.579);
52
- --color-green-600: oklch(62.7% 0.194 149.214);
53
- --color-green-700: oklch(52.7% 0.154 150.069);
54
27
  --color-green-800: oklch(44.8% 0.119 151.328);
55
- --color-green-900: oklch(39.3% 0.095 152.535);
56
- --color-green-950: oklch(26.6% 0.065 152.934);
57
- --color-emerald-50: oklch(97.9% 0.021 166.113);
58
28
  --color-emerald-100: oklch(95% 0.052 163.051);
59
- --color-emerald-200: oklch(90.5% 0.093 164.15);
60
29
  --color-emerald-300: oklch(84.5% 0.143 164.978);
61
30
  --color-emerald-600: oklch(59.6% 0.145 163.225);
62
31
  --color-emerald-700: oklch(50.8% 0.118 165.612);
63
32
  --color-emerald-800: oklch(43.2% 0.095 166.913);
64
33
  --color-emerald-900: oklch(37.8% 0.077 168.94);
65
34
  --color-emerald-950: oklch(26.2% 0.051 172.552);
66
- --color-teal-50: oklch(98.4% 0.014 180.72);
67
- --color-teal-100: oklch(95.3% 0.051 180.801);
68
- --color-teal-200: oklch(91% 0.096 180.426);
69
- --color-teal-300: oklch(85.5% 0.138 181.071);
70
- --color-teal-400: oklch(77.7% 0.152 181.912);
71
35
  --color-teal-500: oklch(70.4% 0.14 182.503);
72
- --color-teal-600: oklch(60% 0.118 184.704);
73
- --color-teal-700: oklch(51.1% 0.096 186.391);
74
- --color-teal-800: oklch(43.7% 0.078 188.216);
75
- --color-cyan-50: oklch(98.4% 0.019 200.873);
76
- --color-cyan-100: oklch(95.6% 0.045 203.388);
77
- --color-cyan-200: oklch(91.7% 0.08 205.041);
78
- --color-cyan-300: oklch(86.5% 0.127 207.078);
79
- --color-cyan-400: oklch(78.9% 0.154 211.53);
80
36
  --color-cyan-500: oklch(71.5% 0.143 215.221);
81
- --color-cyan-600: oklch(60.9% 0.126 221.723);
82
- --color-cyan-700: oklch(52% 0.105 223.128);
83
- --color-cyan-800: oklch(45% 0.085 224.283);
84
- --color-cyan-900: oklch(39.8% 0.07 227.392);
85
- --color-cyan-950: oklch(30.2% 0.056 229.695);
86
- --color-sky-400: oklch(74.6% 0.16 232.661);
87
37
  --color-sky-500: oklch(68.5% 0.169 237.323);
88
- --color-sky-600: oklch(58.8% 0.158 241.966);
89
- --color-blue-50: oklch(97% 0.014 254.604);
90
38
  --color-blue-100: oklch(93.2% 0.032 255.585);
91
39
  --color-blue-200: oklch(88.2% 0.059 254.128);
92
- --color-blue-300: oklch(80.9% 0.105 251.813);
93
40
  --color-blue-400: oklch(70.7% 0.165 254.624);
94
41
  --color-blue-500: oklch(62.3% 0.214 259.815);
95
42
  --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -97,40 +44,10 @@
97
44
  --color-blue-800: oklch(42.4% 0.199 265.638);
98
45
  --color-blue-900: oklch(37.9% 0.146 265.522);
99
46
  --color-blue-950: oklch(28.2% 0.091 267.935);
100
- --color-indigo-50: oklch(96.2% 0.018 272.314);
101
- --color-indigo-100: oklch(93% 0.034 272.788);
102
- --color-indigo-200: oklch(87% 0.065 274.039);
103
- --color-indigo-300: oklch(78.5% 0.115 274.713);
104
- --color-indigo-400: oklch(67.3% 0.182 276.935);
105
47
  --color-indigo-500: oklch(58.5% 0.233 277.117);
106
- --color-indigo-600: oklch(51.1% 0.262 276.966);
107
- --color-indigo-700: oklch(45.7% 0.24 277.023);
108
- --color-indigo-800: oklch(39.8% 0.195 277.366);
109
- --color-indigo-900: oklch(35.9% 0.144 278.697);
110
- --color-indigo-950: oklch(25.7% 0.09 281.288);
111
- --color-purple-50: oklch(97.7% 0.014 308.299);
112
- --color-purple-100: oklch(94.6% 0.033 307.174);
113
- --color-purple-200: oklch(90.2% 0.063 306.703);
114
- --color-purple-300: oklch(82.7% 0.119 306.383);
115
- --color-purple-400: oklch(71.4% 0.203 305.504);
116
48
  --color-purple-500: oklch(62.7% 0.265 303.9);
117
- --color-purple-600: oklch(55.8% 0.288 302.321);
118
- --color-purple-700: oklch(49.6% 0.265 301.924);
119
- --color-purple-800: oklch(43.8% 0.218 303.724);
120
- --color-purple-900: oklch(38.1% 0.176 304.987);
121
49
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
122
- --color-fuchsia-600: oklch(59.1% 0.293 322.896);
123
- --color-pink-50: oklch(97.1% 0.014 343.198);
124
- --color-pink-100: oklch(94.8% 0.028 342.258);
125
- --color-pink-200: oklch(89.9% 0.061 343.231);
126
- --color-pink-300: oklch(82.3% 0.12 346.018);
127
- --color-pink-400: oklch(71.8% 0.202 349.761);
128
50
  --color-pink-500: oklch(65.6% 0.241 354.308);
129
- --color-pink-600: oklch(59.2% 0.249 0.584);
130
- --color-pink-700: oklch(52.5% 0.223 3.958);
131
- --color-pink-800: oklch(45.9% 0.187 3.815);
132
- --color-pink-900: oklch(40.8% 0.153 2.432);
133
- --color-pink-950: oklch(28.4% 0.109 3.907);
134
51
  --color-rose-50: oklch(96.9% 0.015 12.422);
135
52
  --color-rose-100: oklch(94.1% 0.03 12.58);
136
53
  --color-rose-200: oklch(89.2% 0.058 10.001);
@@ -140,21 +57,9 @@
140
57
  --color-rose-800: oklch(45.5% 0.188 13.697);
141
58
  --color-rose-900: oklch(41% 0.159 10.272);
142
59
  --color-rose-950: oklch(27.1% 0.105 12.094);
143
- --color-slate-50: oklch(98.4% 0.003 247.858);
144
- --color-slate-100: oklch(96.8% 0.007 247.896);
145
- --color-slate-200: oklch(92.9% 0.013 255.508);
146
- --color-slate-300: oklch(86.9% 0.022 252.894);
147
- --color-slate-400: oklch(70.4% 0.04 256.788);
148
- --color-slate-500: oklch(55.4% 0.046 257.417);
149
- --color-slate-600: oklch(44.6% 0.043 257.281);
150
- --color-slate-700: oklch(37.2% 0.044 257.287);
151
- --color-slate-800: oklch(27.9% 0.041 260.031);
152
- --color-slate-900: oklch(20.8% 0.042 265.755);
153
- --color-slate-950: oklch(12.9% 0.042 264.695);
154
60
  --color-gray-50: oklch(98.5% 0.002 247.839);
155
61
  --color-gray-100: oklch(96.7% 0.003 264.542);
156
62
  --color-gray-200: oklch(92.8% 0.006 264.531);
157
- --color-gray-300: oklch(87.2% 0.01 258.338);
158
63
  --color-gray-400: oklch(70.7% 0.022 261.325);
159
64
  --color-gray-500: oklch(55.1% 0.027 264.364);
160
65
  --color-gray-600: oklch(44.6% 0.03 256.802);
@@ -162,54 +67,11 @@
162
67
  --color-gray-800: oklch(27.8% 0.033 256.848);
163
68
  --color-gray-900: oklch(21% 0.034 264.665);
164
69
  --color-gray-950: oklch(13% 0.028 261.692);
165
- --color-zinc-50: oklch(98.5% 0 0);
166
- --color-zinc-100: oklch(96.7% 0.001 286.375);
167
- --color-zinc-200: oklch(92% 0.004 286.32);
168
- --color-zinc-300: oklch(87.1% 0.006 286.286);
169
- --color-zinc-400: oklch(70.5% 0.015 286.067);
170
- --color-zinc-500: oklch(55.2% 0.016 285.938);
171
- --color-zinc-600: oklch(44.2% 0.017 285.786);
172
- --color-zinc-700: oklch(37% 0.013 285.805);
173
- --color-zinc-800: oklch(27.4% 0.006 286.033);
174
- --color-zinc-900: oklch(21% 0.006 285.885);
175
- --color-zinc-950: oklch(14.1% 0.005 285.823);
176
- --color-neutral-50: oklch(98.5% 0 0);
177
- --color-neutral-100: oklch(97% 0 0);
178
- --color-neutral-200: oklch(92.2% 0 0);
179
- --color-neutral-300: oklch(87% 0 0);
180
- --color-neutral-400: oklch(70.8% 0 0);
181
- --color-neutral-500: oklch(55.6% 0 0);
182
- --color-neutral-600: oklch(43.9% 0 0);
183
- --color-neutral-700: oklch(37.1% 0 0);
184
- --color-neutral-800: oklch(26.9% 0 0);
185
- --color-neutral-900: oklch(20.5% 0 0);
186
- --color-neutral-950: oklch(14.5% 0 0);
187
- --color-stone-50: oklch(98.5% 0.001 106.423);
188
- --color-stone-100: oklch(97% 0.001 106.424);
189
- --color-stone-200: oklch(92.3% 0.003 48.717);
190
- --color-stone-300: oklch(86.9% 0.005 56.366);
191
- --color-stone-400: oklch(70.9% 0.01 56.259);
192
- --color-stone-500: oklch(55.3% 0.013 58.071);
193
- --color-stone-600: oklch(44.4% 0.011 73.639);
194
- --color-stone-700: oklch(37.4% 0.01 67.558);
195
- --color-stone-800: oklch(26.8% 0.007 34.298);
196
- --color-stone-900: oklch(21.6% 0.006 56.043);
197
- --color-stone-950: oklch(14.7% 0.004 49.25);
198
70
  --color-white: #fff;
199
71
  --spacing: 0.25rem;
200
- --breakpoint-md: 48rem;
201
- --breakpoint-lg: 64rem;
202
- --breakpoint-xl: 80rem;
203
- --breakpoint-2xl: 96rem;
204
- --container-2xs: 18rem;
205
72
  --container-xs: 20rem;
206
73
  --container-sm: 24rem;
207
- --container-md: 28rem;
208
- --container-lg: 32rem;
209
- --container-xl: 36rem;
210
74
  --container-2xl: 42rem;
211
- --container-4xl: 56rem;
212
- --container-7xl: 80rem;
213
75
  --text-xs: 0.75rem;
214
76
  --text-xs--line-height: calc(1 / 0.75);
215
77
  --text-sm: 0.875rem;
@@ -218,62 +80,24 @@
218
80
  --text-base--line-height: calc(1.5 / 1);
219
81
  --text-lg: 1.125rem;
220
82
  --text-lg--line-height: calc(1.75 / 1.125);
221
- --text-xl: 1.25rem;
222
- --text-xl--line-height: calc(1.75 / 1.25);
223
83
  --text-2xl: 1.5rem;
224
84
  --text-2xl--line-height: calc(2 / 1.5);
225
85
  --text-3xl: 1.875rem;
226
86
  --text-3xl--line-height: calc(2.25 / 1.875);
227
- --text-4xl: 2.25rem;
228
- --text-4xl--line-height: calc(2.5 / 2.25);
229
- --text-5xl: 3rem;
230
- --text-5xl--line-height: 1;
231
- --text-6xl: 3.75rem;
232
- --text-6xl--line-height: 1;
233
- --text-7xl: 4.5rem;
234
- --text-7xl--line-height: 1;
235
- --text-8xl: 6rem;
236
- --text-8xl--line-height: 1;
237
- --text-9xl: 8rem;
238
- --text-9xl--line-height: 1;
239
- --font-weight-thin: 100;
240
- --font-weight-extralight: 200;
241
87
  --font-weight-light: 300;
242
88
  --font-weight-normal: 400;
243
89
  --font-weight-medium: 500;
244
90
  --font-weight-semibold: 600;
245
- --font-weight-bold: 700;
246
- --font-weight-extrabold: 800;
247
- --font-weight-black: 900;
248
- --tracking-tighter: -0.8px;
249
91
  --tracking-tight: -0.4px;
250
- --tracking-normal: 0em;
251
- --tracking-wide: 0.025em;
252
- --tracking-wider: 0.05em;
253
- --tracking-widest: 0.1em;
254
- --leading-tight: 1.25;
255
- --leading-normal: 1.5;
256
- --leading-relaxed: 1.625;
257
- --leading-loose: 2;
258
92
  --radius-xs: 4px;
259
93
  --radius-sm: 6px;
260
- --radius-md: 0.375rem;
261
94
  --radius-lg: 16px;
262
- --radius-xl: 0.75rem;
263
- --ease-in: cubic-bezier(0.4, 0, 1, 1);
264
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
265
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
266
95
  --animate-spin: spin 1s linear infinite;
267
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
268
- --blur-xs: 4px;
269
96
  --default-transition-duration: 150ms;
270
97
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
271
98
  --default-font-family: var(--font-sans);
272
99
  --default-mono-font-family: var(--font-mono);
273
100
  --radius: 8px;
274
- --spacing-8xl: 90rem;
275
- --leading-9: 36px;
276
- --leading-6: 24px;
277
101
  --leading-5: 20px;
278
102
  --radius-base: 12px;
279
103
  --color-body: var(--color-gray-600);
@@ -289,6 +113,7 @@
289
113
  --color-neutral-secondary-soft: var(--color-gray-50);
290
114
  --color-neutral-secondary: var(--color-gray-50);
291
115
  --color-neutral-secondary-medium: var(--color-gray-50);
116
+ --color-neutral-secondary-strong: var(--color-gray-50);
292
117
  --color-neutral-tertiary-soft: var(--color-gray-100);
293
118
  --color-neutral-tertiary: var(--color-gray-100);
294
119
  --color-neutral-tertiary-medium: var(--color-gray-100);
@@ -312,6 +137,7 @@
312
137
  --color-light: var(--color-gray-100);
313
138
  --color-default: var(--color-gray-200);
314
139
  --color-default-medium: var(--color-gray-200);
140
+ --color-default-strong: var(--color-gray-200);
315
141
  --color-danger-subtle: var(--color-rose-200);
316
142
  --color-dark-backdrop: var(--color-gray-950);
317
143
  }
@@ -465,12 +291,6 @@
465
291
  }
466
292
  }
467
293
  @layer utilities {
468
- .collapse {
469
- visibility: collapse;
470
- }
471
- .invisible {
472
- visibility: hidden;
473
- }
474
294
  .visible {
475
295
  visibility: visible;
476
296
  }
@@ -485,312 +305,6 @@
485
305
  white-space: nowrap;
486
306
  border-width: 0;
487
307
  }
488
- .datatable-wrapper {
489
- width: 100%;
490
- & .datatable-top {
491
- display: flex;
492
- justify-content: space-between;
493
- flex-direction: column-reverse;
494
- align-items: start;
495
- gap: 1rem;
496
- margin-bottom: 1rem;
497
- @media (min-width: 640px) {
498
- flex-direction: row-reverse;
499
- align-items: center;
500
- }
501
- }
502
- & .datatable-search .datatable-input {
503
- color: var(--color-heading);
504
- font-size: 0.875rem;
505
- border: 1px solid var(--color-default);
506
- border-radius: var(--radius-base);
507
- background-color: var(--color-neutral-secondary-soft);
508
- min-width: 16rem;
509
- }
510
- & .datatable-input {
511
- color: var(--color-heading);
512
- font-size: 0.875rem;
513
- border: 1px solid var(--color-default);
514
- border-radius: var(--radius-base);
515
- background-color: var(--color-neutral-secondary-soft);
516
- min-width: 16rem;
517
- }
518
- & thead th .datatable-input {
519
- background-color: var(--color-neutral-primary);
520
- font-weight: 400;
521
- color: var(--color-heading);
522
- padding-top: .35rem;
523
- padding-bottom: .35rem;
524
- min-width: 0;
525
- }
526
- & .datatable-top .datatable-dropdown {
527
- color: var(--color-body);
528
- font-size: 0.875rem;
529
- }
530
- & .datatable-top .datatable-dropdown .datatable-selector {
531
- background-color: var(--color-neutral-secondary-soft);
532
- color: var(--color-heading);
533
- font-size: 0.875rem;
534
- border: 1px solid var(--color-default);
535
- border-radius: var(--radius-base);
536
- margin-right: 0.25rem;
537
- min-width: 4rem;
538
- }
539
- & .datatable-container thead tr.search-filtering-row th {
540
- padding-top: 0;
541
- }
542
- & .datatable-search .datatable-input:focus {
543
- border-color: var(--color-brand);
544
- }
545
- & .datatable-container {
546
- overflow-x: auto;
547
- border: 1px solid var(--color-default);
548
- border-radius: var(--radius-base);
549
- }
550
- & .datatable-table {
551
- width: 100%;
552
- font-size: 0.875rem;
553
- color: var(--color-body);
554
- text-align: left;
555
- }
556
- & .datatable-table thead {
557
- font-size: 0.75rem;
558
- color: var(--color-body);
559
- background-color: var(--color-neutral-secondary-medium);
560
- border-bottom: 1px solid var(--color-default);
561
- }
562
- & .datatable-table thead th {
563
- white-space: nowrap;
564
- }
565
- & .datatable-table thead th {
566
- width: auto !important;
567
- padding-top: 0.75rem;
568
- padding-bottom: 0.75rem;
569
- padding-left: 1.5rem;
570
- padding-right: 1.5rem;
571
- }
572
- & .datatable-table tbody th {
573
- width: auto !important;
574
- padding-top: 0.75rem;
575
- padding-bottom: 0.75rem;
576
- padding-left: 1.5rem;
577
- padding-right: 1.5rem;
578
- }
579
- & .datatable-table tbody td {
580
- width: auto !important;
581
- padding-top: 0.75rem;
582
- padding-bottom: 0.75rem;
583
- padding-left: 1.5rem;
584
- padding-right: 1.5rem;
585
- }
586
- & .datatable-table thead th .datatable-sorter {
587
- text-transform: uppercase;
588
- }
589
- & .datatable-table thead th {
590
- text-transform: uppercase;
591
- }
592
- & .datatable-table thead th .datatable-sorter:hover {
593
- color: var(--color-heading);
594
- }
595
- & .datatable-table thead th.datatable-ascending .datatable-sorter {
596
- color: var(--color-heading);
597
- }
598
- & .datatable-table thead th.datatable-descending .datatable-sorter {
599
- color: var(--color-heading);
600
- }
601
- & .datatable-table tbody tr.selected {
602
- background-color: var(--color-neutral-secondary);
603
- }
604
- & .datatable-table tbody tr {
605
- border-bottom: 1px solid var(--color-default);
606
- }
607
- & .datatable-table tbody tr:last-child {
608
- border-bottom: 0;
609
- }
610
- & .datatable-table .datatable-empty {
611
- text-align: center;
612
- }
613
- & .datatable-bottom {
614
- display: flex;
615
- flex-direction: column;
616
- justify-content: space-between;
617
- align-items: start;
618
- margin-top: 1rem;
619
- gap: 1rem;
620
- @media (min-width: 640px) {
621
- flex-direction: row;
622
- align-items: center;
623
- }
624
- }
625
- & .datatable-bottom .datatable-info {
626
- color: var(--color-body);
627
- font-size: 0.875rem;
628
- }
629
- & .datatable-bottom .datatable-pagination .datatable-pagination-list {
630
- display: flex;
631
- align-items: center;
632
- height: 2rem;
633
- font-size: 0.875rem;
634
- }
635
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
636
- display: flex;
637
- align-items: center;
638
- color: var(--color-body);
639
- background-color: var(--color-neutral-secondary-medium);
640
- font-weight: 500;
641
- padding-left: 0.75rem;
642
- padding-right: 0.75rem;
643
- height: 2rem;
644
- font-size: 0.875rem;
645
- border-top: 1px solid var(--color-default);
646
- border-bottom: 1px solid var(--color-default);
647
- border-right: 1px solid var(--color-default);
648
- }
649
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
650
- color: var(--color-heading);
651
- background-color: var(--color-neutral-tertiary-medium);
652
- }
653
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type {
654
- position: relative;
655
- }
656
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type {
657
- position: relative;
658
- }
659
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
660
- color: var(--color-fg-brand);
661
- background-color: var(--color-neutral-tertiary-medium);
662
- }
663
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
664
- border-top-left-radius: var(--radius-base);
665
- border-bottom-left-radius: var(--radius-base);
666
- border-left: 1px solid var(--color-default);
667
- }
668
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
669
- border-top-right-radius: var(--radius-base);
670
- border-bottom-right-radius: var(--radius-base);
671
- border-left: 0;
672
- }
673
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
674
- background-color: var(--color-neutral-secondary-medium);
675
- color: var(--color-body);
676
- }
677
- }
678
- .datatable-bottom {
679
- .datatable-wrapper & {
680
- display: flex;
681
- flex-direction: column;
682
- justify-content: space-between;
683
- align-items: start;
684
- margin-top: 1rem;
685
- gap: 1rem;
686
- @media (min-width: 640px) {
687
- flex-direction: row;
688
- align-items: center;
689
- }
690
- }
691
- .datatable-wrapper & .datatable-info {
692
- color: var(--color-body);
693
- font-size: 0.875rem;
694
- }
695
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list {
696
- display: flex;
697
- align-items: center;
698
- height: 2rem;
699
- font-size: 0.875rem;
700
- }
701
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link {
702
- display: flex;
703
- align-items: center;
704
- color: var(--color-body);
705
- background-color: var(--color-neutral-secondary-medium);
706
- font-weight: 500;
707
- padding-left: 0.75rem;
708
- padding-right: 0.75rem;
709
- height: 2rem;
710
- font-size: 0.875rem;
711
- border-top: 1px solid var(--color-default);
712
- border-bottom: 1px solid var(--color-default);
713
- border-right: 1px solid var(--color-default);
714
- }
715
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
716
- color: var(--color-heading);
717
- background-color: var(--color-neutral-tertiary-medium);
718
- }
719
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type {
720
- position: relative;
721
- }
722
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type {
723
- position: relative;
724
- }
725
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
726
- color: var(--color-fg-brand);
727
- background-color: var(--color-neutral-tertiary-medium);
728
- }
729
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
730
- border-top-left-radius: var(--radius-base);
731
- border-bottom-left-radius: var(--radius-base);
732
- border-left: 1px solid var(--color-default);
733
- }
734
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
735
- border-top-right-radius: var(--radius-base);
736
- border-bottom-right-radius: var(--radius-base);
737
- border-left: 0;
738
- }
739
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover {
740
- background-color: var(--color-neutral-secondary-medium);
741
- color: var(--color-body);
742
- }
743
- }
744
- .datatable-pagination {
745
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list {
746
- display: flex;
747
- align-items: center;
748
- height: 2rem;
749
- font-size: 0.875rem;
750
- }
751
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link {
752
- display: flex;
753
- align-items: center;
754
- color: var(--color-body);
755
- background-color: var(--color-neutral-secondary-medium);
756
- font-weight: 500;
757
- padding-left: 0.75rem;
758
- padding-right: 0.75rem;
759
- height: 2rem;
760
- font-size: 0.875rem;
761
- border-top: 1px solid var(--color-default);
762
- border-bottom: 1px solid var(--color-default);
763
- border-right: 1px solid var(--color-default);
764
- }
765
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
766
- color: var(--color-heading);
767
- background-color: var(--color-neutral-tertiary-medium);
768
- }
769
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type {
770
- position: relative;
771
- }
772
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type {
773
- position: relative;
774
- }
775
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
776
- color: var(--color-fg-brand);
777
- background-color: var(--color-neutral-tertiary-medium);
778
- }
779
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
780
- border-top-left-radius: var(--radius-base);
781
- border-bottom-left-radius: var(--radius-base);
782
- border-left: 1px solid var(--color-default);
783
- }
784
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
785
- border-top-right-radius: var(--radius-base);
786
- border-bottom-right-radius: var(--radius-base);
787
- border-left: 0;
788
- }
789
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover {
790
- background-color: var(--color-neutral-secondary-medium);
791
- color: var(--color-body);
792
- }
793
- }
794
308
  .absolute {
795
309
  position: absolute;
796
310
  }
@@ -803,39 +317,21 @@
803
317
  .static {
804
318
  position: static;
805
319
  }
806
- .inset-0 {
807
- inset: calc(var(--spacing) * 0);
808
- }
809
320
  .top-0 {
810
321
  top: calc(var(--spacing) * 0);
811
322
  }
812
- .right-0 {
813
- right: calc(var(--spacing) * 0);
814
- }
815
323
  .right-4 {
816
324
  right: calc(var(--spacing) * 4);
817
325
  }
818
- .bottom-0 {
819
- bottom: calc(var(--spacing) * 0);
820
- }
821
326
  .bottom-4 {
822
327
  bottom: calc(var(--spacing) * 4);
823
328
  }
824
- .bottom-\[60px\] {
825
- bottom: 60px;
826
- }
827
329
  .left-0 {
828
330
  left: calc(var(--spacing) * 0);
829
331
  }
830
332
  .z-10 {
831
333
  z-index: 10;
832
334
  }
833
- .z-20 {
834
- z-index: 20;
835
- }
836
- .z-30 {
837
- z-index: 30;
838
- }
839
335
  .z-40 {
840
336
  z-index: 40;
841
337
  }
@@ -911,287 +407,6 @@
911
407
  .mt-2\.5 {
912
408
  margin-top: calc(var(--spacing) * 2.5);
913
409
  }
914
- .apexcharts-canvas {
915
- & .apexcharts-tooltip {
916
- background-color: primary !important;
917
- color: var(--color-body) !important;
918
- border: 0 !important;
919
- border-radius: var(--radius-base) !important;
920
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
921
- }
922
- .dark & .apexcharts-tooltip {
923
- background-color: var(--color-neutral-secondary-medium) !important;
924
- color: var(--color-body) !important;
925
- border-color: var(--color-default) !important;
926
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
927
- }
928
- & .apexcharts-tooltip .apexcharts-tooltip-title {
929
- padding-top: 0.5rem !important;
930
- padding-bottom: 0.5rem !important;
931
- padding-right: 0.75rem !important;
932
- padding-left: 0.75rem !important;
933
- margin-bottom: 0.75rem !important;
934
- background-color: var(--color-neutral-tertiary-medium) !important;
935
- border-color: var(--color-light) !important;
936
- font-size: 0.875rem !important;
937
- font-weight: 600 !important;
938
- color: var(--color-heading) !important;
939
- }
940
- .dark & .apexcharts-tooltip .apexcharts-tooltip-title {
941
- background-color: var(--color-neutral-tertiary-medium) !important;
942
- border-color: var(--color-light) !important;
943
- color: var(--color-heading) !important;
944
- }
945
- & .apexcharts-xaxistooltip {
946
- color: var(--color-body) !important;
947
- padding-top: 0.5rem !important;
948
- padding-bottom: 0.5rem !important;
949
- padding-right: 0.75rem !important;
950
- padding-left: 0.75rem !important;
951
- border-color: transparent !important;
952
- background-color: white !important;
953
- border-radius: 8px !important;
954
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
955
- }
956
- .dark & .apexcharts-xaxistooltip {
957
- color: var(--color-body) !important;
958
- background-color: var(--color-neutral-secondary-medium) !important;
959
- }
960
- & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
961
- color: var(--color-body) !important;
962
- font-size: 0.875rem !important;
963
- }
964
- .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
965
- color: var(--color-body) !important;
966
- }
967
- & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
968
- color: var(--color-heading);
969
- font-size: 0.875rem !important;
970
- }
971
- .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
972
- color: white !important;
973
- }
974
- & .apexcharts-xaxistooltip-text {
975
- font-weight: 400 !important;
976
- font-size: 0.875rem !important;
977
- }
978
- & .apexcharts-xaxistooltip:after {
979
- border-bottom-color: var(--color-neutral-primary-medium) !important;
980
- }
981
- & .apexcharts-xaxistooltip:before {
982
- border-bottom-color: var(--color-neutral-primary-medium) !important;
983
- }
984
- & .apexcharts-xaxistooltip:after {
985
- border-width: 8px !important;
986
- margin-left: -8px !important;
987
- }
988
- & .apexcharts-xaxistooltip:before {
989
- border-width: 10px !important;
990
- margin-left: -10px !important;
991
- }
992
- & .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group {
993
- padding: 0 !important;
994
- }
995
- & .apexcharts-tooltip-series-group.apexcharts-active {
996
- padding-left: 0.75rem !important;
997
- padding-right: 0.75rem !important;
998
- padding-bottom: 0.75rem !important;
999
- background-color: var(--color-neutral-primary-medium) !important;
1000
- color: var(--color-body) !important;
1001
- }
1002
- .dark & .apexcharts-tooltip-series-group.apexcharts-active {
1003
- background-color: var(--color-neutral-secondary-medium) !important;
1004
- color: var(--color-body) !important;
1005
- }
1006
- & .apexcharts-tooltip-series-group.apexcharts-active:first-of-type {
1007
- padding-top: 0.75rem !important;
1008
- }
1009
- & .apexcharts-legend {
1010
- padding: 0 !important;
1011
- }
1012
- & .apexcharts-legend-text {
1013
- font-size: 0.75rem !important;
1014
- font-weight: 500 !important;
1015
- padding-left: 1.25rem !important;
1016
- color: var(--color-body) !important;
1017
- }
1018
- :is([dir=rtl]) & .apexcharts-legend-text {
1019
- padding-right: 0.5rem !important;
1020
- }
1021
- & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1022
- color: var(--color-heading) !important;
1023
- }
1024
- .dark & .apexcharts-legend-text {
1025
- color: var(--color-body) !important;
1026
- }
1027
- .dark & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1028
- color: heading !important;
1029
- }
1030
- & .apexcharts-legend-series {
1031
- margin-left: 0.5rem !important;
1032
- margin-right: 0.5rem !important;
1033
- margin-bottom: 0.25rem !important;
1034
- display: flex !important;
1035
- align-items: center !important;
1036
- }
1037
- .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
1038
- fill: white !important;
1039
- }
1040
- & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1041
- fill: var(--color-body) !important;
1042
- font-size: 1rem,[object Object] !important;
1043
- font-weight: 400 !important;
1044
- }
1045
- .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1046
- fill: var(--color-body) !important;
1047
- }
1048
- & .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label {
1049
- font-size: 0.75rem,[object Object] !important;
1050
- font-weight: 600 !important;
1051
- text-shadow: none !important;
1052
- filter: none !important;
1053
- }
1054
- }
1055
- .apexcharts-legend-series {
1056
- .apexcharts-canvas & {
1057
- margin-left: 0.5rem !important;
1058
- margin-right: 0.5rem !important;
1059
- margin-bottom: 0.25rem !important;
1060
- display: flex !important;
1061
- align-items: center !important;
1062
- }
1063
- }
1064
- .apexcharts-tooltip {
1065
- .apexcharts-canvas & {
1066
- background-color: primary !important;
1067
- color: var(--color-body) !important;
1068
- border: 0 !important;
1069
- border-radius: var(--radius-base) !important;
1070
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1071
- }
1072
- .dark .apexcharts-canvas & {
1073
- background-color: var(--color-neutral-secondary-medium) !important;
1074
- color: var(--color-body) !important;
1075
- border-color: var(--color-default) !important;
1076
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1077
- }
1078
- .apexcharts-canvas & .apexcharts-tooltip-title {
1079
- padding-top: 0.5rem !important;
1080
- padding-bottom: 0.5rem !important;
1081
- padding-right: 0.75rem !important;
1082
- padding-left: 0.75rem !important;
1083
- margin-bottom: 0.75rem !important;
1084
- background-color: var(--color-neutral-tertiary-medium) !important;
1085
- border-color: var(--color-light) !important;
1086
- font-size: 0.875rem !important;
1087
- font-weight: 600 !important;
1088
- color: var(--color-heading) !important;
1089
- }
1090
- .dark .apexcharts-canvas & .apexcharts-tooltip-title {
1091
- background-color: var(--color-neutral-tertiary-medium) !important;
1092
- border-color: var(--color-light) !important;
1093
- color: var(--color-heading) !important;
1094
- }
1095
- .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1096
- color: var(--color-body) !important;
1097
- font-size: 0.875rem !important;
1098
- }
1099
- .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1100
- color: var(--color-body) !important;
1101
- }
1102
- .apexcharts-canvas & .apexcharts-tooltip-text-y-value {
1103
- color: var(--color-heading);
1104
- font-size: 0.875rem !important;
1105
- }
1106
- :is([dir=rtl]) & .apexcharts-tooltip-marker {
1107
- margin-right: 0px !important;
1108
- margin-left: e !important;
1109
- }
1110
- .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-value {
1111
- color: white !important;
1112
- }
1113
- }
1114
- .datatable-top {
1115
- .datatable-wrapper & {
1116
- display: flex;
1117
- justify-content: space-between;
1118
- flex-direction: column-reverse;
1119
- align-items: start;
1120
- gap: 1rem;
1121
- margin-bottom: 1rem;
1122
- @media (min-width: 640px) {
1123
- flex-direction: row-reverse;
1124
- align-items: center;
1125
- }
1126
- }
1127
- .datatable-wrapper & .datatable-dropdown {
1128
- color: var(--color-body);
1129
- font-size: 0.875rem;
1130
- }
1131
- .datatable-wrapper & .datatable-dropdown .datatable-selector {
1132
- background-color: var(--color-neutral-secondary-soft);
1133
- color: var(--color-heading);
1134
- font-size: 0.875rem;
1135
- border: 1px solid var(--color-default);
1136
- border-radius: var(--radius-base);
1137
- margin-right: 0.25rem;
1138
- min-width: 4rem;
1139
- }
1140
- }
1141
- .apexcharts-tooltip-marker {
1142
- :is([dir=rtl]) .apexcharts-tooltip & {
1143
- margin-right: 0px !important;
1144
- margin-left: e !important;
1145
- }
1146
- }
1147
- .datatable-dropdown {
1148
- .datatable-wrapper .datatable-top & {
1149
- color: var(--color-body);
1150
- font-size: 0.875rem;
1151
- }
1152
- .datatable-wrapper .datatable-top & .datatable-selector {
1153
- background-color: var(--color-neutral-secondary-soft);
1154
- color: var(--color-heading);
1155
- font-size: 0.875rem;
1156
- border: 1px solid var(--color-default);
1157
- border-radius: var(--radius-base);
1158
- margin-right: 0.25rem;
1159
- min-width: 4rem;
1160
- }
1161
- }
1162
- .datatable-selector {
1163
- .datatable-wrapper .datatable-top .datatable-dropdown & {
1164
- background-color: var(--color-neutral-secondary-soft);
1165
- color: var(--color-heading);
1166
- font-size: 0.875rem;
1167
- border: 1px solid var(--color-default);
1168
- border-radius: var(--radius-base);
1169
- margin-right: 0.25rem;
1170
- min-width: 4rem;
1171
- }
1172
- }
1173
- .apexcharts-tooltip-title {
1174
- .apexcharts-canvas .apexcharts-tooltip & {
1175
- padding-top: 0.5rem !important;
1176
- padding-bottom: 0.5rem !important;
1177
- padding-right: 0.75rem !important;
1178
- padding-left: 0.75rem !important;
1179
- margin-bottom: 0.75rem !important;
1180
- background-color: var(--color-neutral-tertiary-medium) !important;
1181
- border-color: var(--color-light) !important;
1182
- font-size: 0.875rem !important;
1183
- font-weight: 600 !important;
1184
- color: var(--color-heading) !important;
1185
- }
1186
- .dark .apexcharts-canvas .apexcharts-tooltip & {
1187
- background-color: var(--color-neutral-tertiary-medium) !important;
1188
- border-color: var(--color-light) !important;
1189
- color: var(--color-heading) !important;
1190
- }
1191
- }
1192
- .mb-1 {
1193
- margin-bottom: calc(var(--spacing) * 1);
1194
- }
1195
410
  .mb-2 {
1196
411
  margin-bottom: calc(var(--spacing) * 2);
1197
412
  }
@@ -1204,89 +419,9 @@
1204
419
  .mb-6 {
1205
420
  margin-bottom: calc(var(--spacing) * 6);
1206
421
  }
1207
- .apexcharts-xaxistooltip {
1208
- .apexcharts-canvas & {
1209
- color: var(--color-body) !important;
1210
- padding-top: 0.5rem !important;
1211
- padding-bottom: 0.5rem !important;
1212
- padding-right: 0.75rem !important;
1213
- padding-left: 0.75rem !important;
1214
- border-color: transparent !important;
1215
- background-color: white !important;
1216
- border-radius: 8px !important;
1217
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1218
- }
1219
- .dark .apexcharts-canvas & {
1220
- color: var(--color-body) !important;
1221
- background-color: var(--color-neutral-secondary-medium) !important;
1222
- }
1223
- .apexcharts-canvas &:after {
1224
- border-bottom-color: var(--color-neutral-primary-medium) !important;
1225
- }
1226
- .apexcharts-canvas &:before {
1227
- border-bottom-color: var(--color-neutral-primary-medium) !important;
1228
- }
1229
- .apexcharts-canvas &:after {
1230
- border-width: 8px !important;
1231
- margin-left: -8px !important;
1232
- }
1233
- .apexcharts-canvas &:before {
1234
- border-width: 10px !important;
1235
- margin-left: -10px !important;
1236
- }
1237
- }
1238
- .ml-auto {
1239
- margin-left: auto;
1240
- }
1241
422
  .box-border {
1242
423
  box-sizing: border-box;
1243
424
  }
1244
- .datatable-pagination-list-item-link {
1245
- .datatable-wrapper .datatable-bottom .datatable-pagination & {
1246
- display: flex;
1247
- align-items: center;
1248
- color: var(--color-body);
1249
- background-color: var(--color-neutral-secondary-medium);
1250
- font-weight: 500;
1251
- padding-left: 0.75rem;
1252
- padding-right: 0.75rem;
1253
- height: 2rem;
1254
- font-size: 0.875rem;
1255
- border-top: 1px solid var(--color-default);
1256
- border-bottom: 1px solid var(--color-default);
1257
- border-right: 1px solid var(--color-default);
1258
- }
1259
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover & {
1260
- color: var(--color-heading);
1261
- background-color: var(--color-neutral-tertiary-medium);
1262
- }
1263
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active & {
1264
- color: var(--color-fg-brand);
1265
- background-color: var(--color-neutral-tertiary-medium);
1266
- }
1267
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
1268
- border-top-left-radius: var(--radius-base);
1269
- border-bottom-left-radius: var(--radius-base);
1270
- border-left: 1px solid var(--color-default);
1271
- }
1272
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
1273
- border-top-right-radius: var(--radius-base);
1274
- border-bottom-right-radius: var(--radius-base);
1275
- border-left: 0;
1276
- }
1277
- .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
1278
- background-color: var(--color-neutral-secondary-medium);
1279
- color: var(--color-body);
1280
- }
1281
- }
1282
- .datatable-pagination-list {
1283
- .datatable-wrapper .datatable-bottom .datatable-pagination & {
1284
- display: flex;
1285
- align-items: center;
1286
- height: 2rem;
1287
- font-size: 0.875rem;
1288
- }
1289
- }
1290
425
  .block {
1291
426
  display: block;
1292
427
  }
@@ -1341,85 +476,23 @@
1341
476
  .h-12 {
1342
477
  height: calc(var(--spacing) * 12);
1343
478
  }
1344
- .h-\[calc\(100\%-1rem\)\] {
1345
- height: calc(100% - 1rem);
1346
- }
1347
479
  .h-auto {
1348
480
  height: auto;
1349
481
  }
1350
482
  .h-full {
1351
483
  height: 100%;
1352
484
  }
485
+ .h-screen {
486
+ height: 100vh;
487
+ }
488
+ .max-h-96 {
489
+ max-height: calc(var(--spacing) * 96);
490
+ }
1353
491
  .max-h-full {
1354
492
  max-height: 100%;
1355
493
  }
1356
- .datatable-table {
1357
- .datatable-wrapper & {
1358
- width: 100%;
1359
- font-size: 0.875rem;
1360
- color: var(--color-body);
1361
- text-align: left;
1362
- }
1363
- .datatable-wrapper & thead {
1364
- font-size: 0.75rem;
1365
- color: var(--color-body);
1366
- background-color: var(--color-neutral-secondary-medium);
1367
- border-bottom: 1px solid var(--color-default);
1368
- }
1369
- .datatable-wrapper & thead th {
1370
- white-space: nowrap;
1371
- }
1372
- .datatable-wrapper & thead th {
1373
- width: auto !important;
1374
- padding-top: 0.75rem;
1375
- padding-bottom: 0.75rem;
1376
- padding-left: 1.5rem;
1377
- padding-right: 1.5rem;
1378
- }
1379
- .datatable-wrapper & tbody th {
1380
- width: auto !important;
1381
- padding-top: 0.75rem;
1382
- padding-bottom: 0.75rem;
1383
- padding-left: 1.5rem;
1384
- padding-right: 1.5rem;
1385
- }
1386
- .datatable-wrapper & tbody td {
1387
- width: auto !important;
1388
- padding-top: 0.75rem;
1389
- padding-bottom: 0.75rem;
1390
- padding-left: 1.5rem;
1391
- padding-right: 1.5rem;
1392
- }
1393
- .datatable-wrapper & thead th .datatable-sorter {
1394
- text-transform: uppercase;
1395
- }
1396
- .datatable-wrapper & thead th {
1397
- text-transform: uppercase;
1398
- }
1399
- .datatable-wrapper & thead th .datatable-sorter:hover {
1400
- color: var(--color-heading);
1401
- }
1402
- .datatable-wrapper & thead th.datatable-ascending .datatable-sorter {
1403
- color: var(--color-heading);
1404
- }
1405
- .datatable-wrapper & thead th.datatable-descending .datatable-sorter {
1406
- color: var(--color-heading);
1407
- }
1408
- .datatable-wrapper & tbody tr.selected {
1409
- background-color: var(--color-neutral-secondary);
1410
- }
1411
- .datatable-wrapper & tbody tr {
1412
- border-bottom: 1px solid var(--color-default);
1413
- }
1414
- .datatable-wrapper & tbody tr:last-child {
1415
- border-bottom: 0;
1416
- }
1417
- .datatable-wrapper & .datatable-empty {
1418
- text-align: center;
1419
- }
1420
- }
1421
- .w-1\/2 {
1422
- width: calc(1/2 * 100%);
494
+ .min-h-\[1em\] {
495
+ min-height: 1em;
1423
496
  }
1424
497
  .w-3 {
1425
498
  width: calc(var(--spacing) * 3);
@@ -1454,12 +527,12 @@
1454
527
  .w-64 {
1455
528
  width: calc(var(--spacing) * 64);
1456
529
  }
530
+ .w-80 {
531
+ width: calc(var(--spacing) * 80);
532
+ }
1457
533
  .w-full {
1458
534
  width: 100%;
1459
535
  }
1460
- .max-w-2xl {
1461
- max-width: var(--container-2xl);
1462
- }
1463
536
  .max-w-full {
1464
537
  max-width: 100%;
1465
538
  }
@@ -1469,53 +542,8 @@
1469
542
  .max-w-xs {
1470
543
  max-width: var(--container-xs);
1471
544
  }
1472
- .datatable-input {
1473
- .datatable-wrapper .datatable-search & {
1474
- color: var(--color-heading);
1475
- font-size: 0.875rem;
1476
- border: 1px solid var(--color-default);
1477
- border-radius: var(--radius-base);
1478
- background-color: var(--color-neutral-secondary-soft);
1479
- min-width: 16rem;
1480
- }
1481
- .datatable-wrapper & {
1482
- color: var(--color-heading);
1483
- font-size: 0.875rem;
1484
- border: 1px solid var(--color-default);
1485
- border-radius: var(--radius-base);
1486
- background-color: var(--color-neutral-secondary-soft);
1487
- min-width: 16rem;
1488
- }
1489
- .datatable-wrapper thead th & {
1490
- background-color: var(--color-neutral-primary);
1491
- font-weight: 400;
1492
- color: var(--color-heading);
1493
- padding-top: .35rem;
1494
- padding-bottom: .35rem;
1495
- min-width: 0;
1496
- }
1497
- .datatable-wrapper .datatable-search &:focus {
1498
- border-color: var(--color-brand);
1499
- }
1500
- }
1501
- .datatable-search {
1502
- .datatable-wrapper & .datatable-input {
1503
- color: var(--color-heading);
1504
- font-size: 0.875rem;
1505
- border: 1px solid var(--color-default);
1506
- border-radius: var(--radius-base);
1507
- background-color: var(--color-neutral-secondary-soft);
1508
- min-width: 16rem;
1509
- }
1510
- .datatable-wrapper & .datatable-input:focus {
1511
- border-color: var(--color-brand);
1512
- }
1513
- }
1514
- .flex-1 {
1515
- flex: 1;
1516
- }
1517
- .flex-shrink {
1518
- flex-shrink: 1;
545
+ .flex-shrink-0 {
546
+ flex-shrink: 0;
1519
547
  }
1520
548
  .shrink-0 {
1521
549
  flex-shrink: 0;
@@ -1526,55 +554,20 @@
1526
554
  .origin-top-right {
1527
555
  transform-origin: top right;
1528
556
  }
1529
- .-translate-x-full {
1530
- --tw-translate-x: -100%;
1531
- translate: var(--tw-translate-x) var(--tw-translate-y);
1532
- }
1533
- .translate-x-0 {
1534
- --tw-translate-x: calc(var(--spacing) * 0);
1535
- translate: var(--tw-translate-x) var(--tw-translate-y);
1536
- }
1537
- .translate-x-full {
1538
- --tw-translate-x: 100%;
1539
- translate: var(--tw-translate-x) var(--tw-translate-y);
1540
- }
1541
- .-translate-y-full {
1542
- --tw-translate-y: -100%;
1543
- translate: var(--tw-translate-x) var(--tw-translate-y);
1544
- }
1545
- .translate-y-full {
1546
- --tw-translate-y: 100%;
1547
- translate: var(--tw-translate-x) var(--tw-translate-y);
1548
- }
1549
- .rotate-180 {
1550
- rotate: 180deg;
1551
- }
1552
557
  .transform {
1553
558
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1554
559
  }
1555
- .transform-none {
1556
- transform: none;
1557
- }
1558
560
  .animate-spin {
1559
561
  animation: var(--animate-spin);
1560
562
  }
1561
- .cursor-default {
1562
- cursor: default;
1563
- }
1564
563
  .cursor-not-allowed {
1565
564
  cursor: not-allowed;
1566
565
  }
1567
566
  .cursor-pointer {
1568
567
  cursor: pointer;
1569
568
  }
1570
- .resize {
1571
- resize: both;
1572
- }
1573
- .grid-cols-4 {
1574
- grid-template-columns: repeat(4, minmax(0, 1fr));
1575
- }
1576
- .grid-cols-7 {
1577
- grid-template-columns: repeat(7, minmax(0, 1fr));
569
+ .flex-col {
570
+ flex-direction: column;
1578
571
  }
1579
572
  .place-items-center {
1580
573
  place-items: center;
@@ -1582,9 +575,6 @@
1582
575
  .items-center {
1583
576
  align-items: center;
1584
577
  }
1585
- .items-end {
1586
- align-items: flex-end;
1587
- }
1588
578
  .items-start {
1589
579
  align-items: flex-start;
1590
580
  }
@@ -1597,9 +587,6 @@
1597
587
  .justify-end {
1598
588
  justify-content: flex-end;
1599
589
  }
1600
- .justify-start {
1601
- justify-content: flex-start;
1602
- }
1603
590
  .space-y-2 {
1604
591
  :where(& > :not(:last-child)) {
1605
592
  --tw-space-y-reverse: 0;
@@ -1677,18 +664,10 @@
1677
664
  border-color: var(--color-default);
1678
665
  }
1679
666
  }
1680
- .overflow-hidden {
667
+ .truncate {
1681
668
  overflow: hidden;
1682
- }
1683
- .datatable-container {
1684
- .datatable-wrapper & thead tr.search-filtering-row th {
1685
- padding-top: 0;
1686
- }
1687
- .datatable-wrapper & {
1688
- overflow-x: auto;
1689
- border: 1px solid var(--color-default);
1690
- border-radius: var(--radius-base);
1691
- }
669
+ text-overflow: ellipsis;
670
+ white-space: nowrap;
1692
671
  }
1693
672
  .overflow-x-auto {
1694
673
  overflow-x: auto;
@@ -1725,25 +704,17 @@
1725
704
  border-start-end-radius: var(--radius-base);
1726
705
  border-end-end-radius: var(--radius-base);
1727
706
  }
1728
- .rounded-t {
1729
- border-top-left-radius: var(--radius);
1730
- border-top-right-radius: var(--radius);
1731
- }
1732
- .rounded-b {
1733
- border-bottom-right-radius: var(--radius);
1734
- border-bottom-left-radius: var(--radius);
707
+ .rounded-t-base {
708
+ border-top-left-radius: var(--radius-base);
709
+ border-top-right-radius: var(--radius-base);
1735
710
  }
1736
711
  .border {
1737
712
  border-style: var(--tw-border-style);
1738
713
  border-width: 1px;
1739
714
  }
1740
- .border-0 {
1741
- border-style: var(--tw-border-style);
1742
- border-width: 0px;
1743
- }
1744
- .border-t {
1745
- border-top-style: var(--tw-border-style);
1746
- border-top-width: 1px;
715
+ .border-e {
716
+ border-inline-end-style: var(--tw-border-style);
717
+ border-inline-end-width: 1px;
1747
718
  }
1748
719
  .border-b {
1749
720
  border-bottom-style: var(--tw-border-style);
@@ -1815,61 +786,27 @@
1815
786
  .border-default-medium {
1816
787
  border-color: var(--color-default-medium);
1817
788
  }
789
+ .border-default-strong {
790
+ border-color: var(--color-default-strong);
791
+ }
1818
792
  .border-fg-danger {
1819
793
  border-color: var(--color-fg-danger);
1820
794
  }
1821
- .border-gray-200 {
1822
- border-color: var(--color-gray-200);
1823
- }
1824
795
  .border-light {
1825
796
  border-color: var(--color-light);
1826
797
  }
1827
798
  .border-success {
1828
- border-color: var(--color-success);
1829
- }
1830
- .border-transparent {
1831
- border-color: transparent;
1832
- }
1833
- .border-warning {
1834
- border-color: var(--color-warning);
1835
- }
1836
- .apexcharts-active {
1837
- .apexcharts-canvas .apexcharts-tooltip-series-group& .apexcharts-tooltip-y-group {
1838
- padding: 0 !important;
1839
- }
1840
- .apexcharts-canvas .apexcharts-tooltip-series-group& {
1841
- padding-left: 0.75rem !important;
1842
- padding-right: 0.75rem !important;
1843
- padding-bottom: 0.75rem !important;
1844
- background-color: var(--color-neutral-primary-medium) !important;
1845
- color: var(--color-body) !important;
1846
- }
1847
- .dark .apexcharts-canvas .apexcharts-tooltip-series-group& {
1848
- background-color: var(--color-neutral-secondary-medium) !important;
1849
- color: var(--color-body) !important;
1850
- }
1851
- .apexcharts-canvas .apexcharts-tooltip-series-group&:first-of-type {
1852
- padding-top: 0.75rem !important;
1853
- }
799
+ border-color: var(--color-success);
1854
800
  }
1855
- .datatable-active {
1856
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item& .datatable-pagination-list-item-link {
1857
- color: var(--color-fg-brand);
1858
- background-color: var(--color-neutral-tertiary-medium);
1859
- }
801
+ .border-transparent {
802
+ border-color: transparent;
1860
803
  }
1861
- .selectedCell {
1862
- background-color: var(--color-neutral-secondary-medium);
1863
- .dark & {
1864
- background-color: var(--color-neutral-secondary-medium);
1865
- }
804
+ .border-warning {
805
+ border-color: var(--color-warning);
1866
806
  }
1867
807
  .bg-blue-100 {
1868
808
  background-color: var(--color-blue-100);
1869
809
  }
1870
- .bg-blue-700 {
1871
- background-color: var(--color-blue-700);
1872
- }
1873
810
  .bg-brand {
1874
811
  background-color: var(--color-brand);
1875
812
  }
@@ -1882,21 +819,6 @@
1882
819
  .bg-dark {
1883
820
  background-color: var(--color-dark);
1884
821
  }
1885
- .bg-dark-backdrop\/70 {
1886
- background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent);
1887
- @supports (color: color-mix(in lab, red, red)) {
1888
- background-color: color-mix(in oklab, var(--color-dark-backdrop) 70%, transparent);
1889
- }
1890
- }
1891
- .bg-gray-100 {
1892
- background-color: var(--color-gray-100);
1893
- }
1894
- .bg-gray-900\/50 {
1895
- background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
1896
- @supports (color: color-mix(in lab, red, red)) {
1897
- background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
1898
- }
1899
- }
1900
822
  .bg-green-100 {
1901
823
  background-color: var(--color-green-100);
1902
824
  }
@@ -1915,6 +837,9 @@
1915
837
  .bg-neutral-secondary-soft {
1916
838
  background-color: var(--color-neutral-secondary-soft);
1917
839
  }
840
+ .bg-neutral-secondary-strong {
841
+ background-color: var(--color-neutral-secondary-strong);
842
+ }
1918
843
  .bg-neutral-tertiary-medium {
1919
844
  background-color: var(--color-neutral-tertiary-medium);
1920
845
  }
@@ -1933,15 +858,6 @@
1933
858
  .bg-warning {
1934
859
  background-color: var(--color-warning);
1935
860
  }
1936
- .bg-white {
1937
- background-color: var(--color-white);
1938
- }
1939
- .bg-white\/50 {
1940
- background-color: color-mix(in srgb, #fff 50%, transparent);
1941
- @supports (color: color-mix(in lab, red, red)) {
1942
- background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
1943
- }
1944
- }
1945
861
  .dark {
1946
862
  & .selectedCell {
1947
863
  background-color: var(--color-neutral-secondary-medium);
@@ -1952,78 +868,15 @@
1952
868
  background-color: var(--color-neutral-secondary);
1953
869
  }
1954
870
  }
1955
- .apexcharts-datalabels-group {
1956
- & .apexcharts-text.apexcharts-datalabel-value {
1957
- fill: var(--color-heading) !important;
1958
- font-size: 1.875rem,[object Object] !important;
1959
- font-weight: 700 !important;
1960
- }
1961
- .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-value {
1962
- fill: white !important;
1963
- }
1964
- .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
1965
- fill: var(--color-body) !important;
1966
- font-size: 1rem,[object Object] !important;
1967
- font-weight: 400 !important;
1968
- }
1969
- .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
1970
- fill: var(--color-body) !important;
1971
- }
1972
- }
1973
- .apexcharts-datalabel-label {
1974
- .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
1975
- fill: var(--color-body) !important;
1976
- font-size: 1rem,[object Object] !important;
1977
- font-weight: 400 !important;
1978
- }
1979
- .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
1980
- fill: var(--color-body) !important;
1981
- }
1982
- }
1983
- .apexcharts-datalabel-value {
1984
- .apexcharts-datalabels-group .apexcharts-text& {
1985
- fill: var(--color-heading) !important;
1986
- font-size: 1.875rem,[object Object] !important;
1987
- font-weight: 700 !important;
1988
- }
1989
- .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
1990
- fill: white !important;
1991
- }
1992
- }
1993
871
  .fill-brand {
1994
872
  fill: var(--color-brand);
1995
873
  }
1996
- .apexcharts-ycrosshairs {
1997
- stroke: var(--color-default) !important;
1998
- .dark & {
1999
- stroke: var(--color-default) !important;
2000
- }
2001
- }
2002
874
  .object-cover {
2003
875
  object-fit: cover;
2004
876
  }
2005
- .apexcharts-legend {
2006
- .apexcharts-canvas & {
2007
- padding: 0 !important;
2008
- }
2009
- }
2010
- .apexcharts-tooltip-y-group {
2011
- .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active & {
2012
- padding: 0 !important;
2013
- }
2014
- }
2015
- .p-1 {
2016
- padding: calc(var(--spacing) * 1);
2017
- }
2018
- .p-1\.5 {
2019
- padding: calc(var(--spacing) * 1.5);
2020
- }
2021
877
  .p-2 {
2022
878
  padding: calc(var(--spacing) * 2);
2023
879
  }
2024
- .p-2\.5 {
2025
- padding: calc(var(--spacing) * 2.5);
2026
- }
2027
880
  .p-4 {
2028
881
  padding: calc(var(--spacing) * 4);
2029
882
  }
@@ -2033,6 +886,12 @@
2033
886
  .p-8 {
2034
887
  padding: calc(var(--spacing) * 8);
2035
888
  }
889
+ .px-0 {
890
+ padding-inline: calc(var(--spacing) * 0);
891
+ }
892
+ .px-1 {
893
+ padding-inline: calc(var(--spacing) * 1);
894
+ }
2036
895
  .px-2 {
2037
896
  padding-inline: calc(var(--spacing) * 2);
2038
897
  }
@@ -2075,39 +934,6 @@
2075
934
  .py-6 {
2076
935
  padding-block: calc(var(--spacing) * 6);
2077
936
  }
2078
- .pt-2 {
2079
- padding-top: calc(var(--spacing) * 2);
2080
- }
2081
- .search-filtering-row {
2082
- .datatable-wrapper .datatable-container thead tr& th {
2083
- padding-top: 0;
2084
- }
2085
- }
2086
- .apexcharts-legend-text {
2087
- .apexcharts-canvas & {
2088
- font-size: 0.75rem !important;
2089
- font-weight: 500 !important;
2090
- padding-left: 1.25rem !important;
2091
- color: var(--color-body) !important;
2092
- }
2093
- :is([dir=rtl]) .apexcharts-canvas & {
2094
- padding-right: 0.5rem !important;
2095
- }
2096
- .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2097
- color: var(--color-heading) !important;
2098
- }
2099
- .dark .apexcharts-canvas & {
2100
- color: var(--color-body) !important;
2101
- }
2102
- .dark .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2103
- color: heading !important;
2104
- }
2105
- }
2106
- .datatable-empty {
2107
- .datatable-wrapper .datatable-table & {
2108
- text-align: center;
2109
- }
2110
- }
2111
937
  .text-center {
2112
938
  text-align: center;
2113
939
  }
@@ -2137,76 +963,14 @@
2137
963
  font-size: var(--text-sm);
2138
964
  line-height: var(--tw-leading, var(--text-sm--line-height));
2139
965
  }
2140
- .text-xl {
2141
- font-size: var(--text-xl);
2142
- line-height: var(--tw-leading, var(--text-xl--line-height));
2143
- }
2144
966
  .text-xs {
2145
967
  font-size: var(--text-xs);
2146
968
  line-height: var(--tw-leading, var(--text-xs--line-height));
2147
969
  }
2148
- .apexcharts-datalabels {
2149
- .apexcharts-canvas & .apexcharts-text.apexcharts-pie-label {
2150
- font-size: 0.75rem,[object Object] !important;
2151
- font-weight: 600 !important;
2152
- text-shadow: none !important;
2153
- filter: none !important;
2154
- }
2155
- }
2156
- .apexcharts-pie-label {
2157
- .apexcharts-canvas .apexcharts-datalabels .apexcharts-text& {
2158
- font-size: 0.75rem,[object Object] !important;
2159
- font-weight: 600 !important;
2160
- text-shadow: none !important;
2161
- filter: none !important;
2162
- }
2163
- }
2164
- .apexcharts-xaxistooltip-text {
2165
- .apexcharts-canvas & {
2166
- font-weight: 400 !important;
2167
- font-size: 0.875rem !important;
2168
- }
2169
- }
2170
- .apexcharts-tooltip-text-y-label {
2171
- .apexcharts-canvas .apexcharts-tooltip & {
2172
- color: var(--color-body) !important;
2173
- font-size: 0.875rem !important;
2174
- }
2175
- .dark .apexcharts-canvas .apexcharts-tooltip & {
2176
- color: var(--color-body) !important;
2177
- }
2178
- }
2179
- .apexcharts-tooltip-text-y-value {
2180
- .apexcharts-canvas .apexcharts-tooltip & {
2181
- color: var(--color-heading);
2182
- font-size: 0.875rem !important;
2183
- }
2184
- .dark .apexcharts-canvas .apexcharts-tooltip & {
2185
- color: white !important;
2186
- }
2187
- }
2188
- .datatable-info {
2189
- .datatable-wrapper .datatable-bottom & {
2190
- color: var(--color-body);
2191
- font-size: 0.875rem;
2192
- }
2193
- }
2194
970
  .leading-5 {
2195
971
  --tw-leading: var(--leading-5);
2196
972
  line-height: var(--leading-5);
2197
973
  }
2198
- .leading-6 {
2199
- --tw-leading: var(--leading-6);
2200
- line-height: var(--leading-6);
2201
- }
2202
- .leading-9 {
2203
- --tw-leading: var(--leading-9);
2204
- line-height: var(--leading-9);
2205
- }
2206
- .leading-relaxed {
2207
- --tw-leading: var(--leading-relaxed);
2208
- line-height: var(--leading-relaxed);
2209
- }
2210
974
  .font-light {
2211
975
  --tw-font-weight: var(--font-weight-light);
2212
976
  font-weight: var(--font-weight-light);
@@ -2230,30 +994,6 @@
2230
994
  .whitespace-nowrap {
2231
995
  white-space: nowrap;
2232
996
  }
2233
- .datatable-sorter {
2234
- .datatable-wrapper .datatable-table thead th & {
2235
- text-transform: uppercase;
2236
- }
2237
- .datatable-wrapper .datatable-table thead th &:hover {
2238
- color: var(--color-heading);
2239
- }
2240
- .datatable-wrapper .datatable-table thead th.datatable-ascending & {
2241
- color: var(--color-heading);
2242
- }
2243
- .datatable-wrapper .datatable-table thead th.datatable-descending & {
2244
- color: var(--color-heading);
2245
- }
2246
- }
2247
- .datatable-ascending {
2248
- .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2249
- color: var(--color-heading);
2250
- }
2251
- }
2252
- .datatable-descending {
2253
- .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2254
- color: var(--color-heading);
2255
- }
2256
- }
2257
997
  .text-blue-500 {
2258
998
  color: var(--color-blue-500);
2259
999
  }
@@ -2284,15 +1024,6 @@
2284
1024
  .text-fg-disabled {
2285
1025
  color: var(--color-fg-disabled);
2286
1026
  }
2287
- .text-gray-400 {
2288
- color: var(--color-gray-400);
2289
- }
2290
- .text-gray-500 {
2291
- color: var(--color-gray-500);
2292
- }
2293
- .text-gray-900 {
2294
- color: var(--color-gray-900);
2295
- }
2296
1027
  .text-green-500 {
2297
1028
  color: var(--color-green-500);
2298
1029
  }
@@ -2320,23 +1051,10 @@
2320
1051
  .text-white {
2321
1052
  color: var(--color-white);
2322
1053
  }
2323
- .uppercase {
2324
- text-transform: uppercase;
2325
- }
2326
1054
  .antialiased {
2327
1055
  -webkit-font-smoothing: antialiased;
2328
1056
  -moz-osx-font-smoothing: grayscale;
2329
1057
  }
2330
- .opacity-0 {
2331
- opacity: 0%;
2332
- }
2333
- .opacity-100 {
2334
- opacity: 100%;
2335
- }
2336
- .shadow {
2337
- --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));
2338
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2339
- }
2340
1058
  .shadow-lg {
2341
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));
2342
1060
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2345,22 +1063,10 @@
2345
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));
2346
1064
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2347
1065
  }
2348
- .shadow-sm {
2349
- --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));
2350
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2351
- }
2352
1066
  .shadow-xs {
2353
1067
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2354
1068
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2355
1069
  }
2356
- .outline {
2357
- outline-style: var(--tw-outline-style);
2358
- outline-width: 1px;
2359
- }
2360
- .blur {
2361
- --tw-blur: blur(8px);
2362
- 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,);
2363
- }
2364
1070
  .filter {
2365
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,);
2366
1072
  }
@@ -2369,20 +1075,6 @@
2369
1075
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2370
1076
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2371
1077
  }
2372
- .transition-opacity {
2373
- transition-property: opacity;
2374
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2375
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2376
- }
2377
- .transition-transform {
2378
- transition-property: transform, translate, scale, rotate;
2379
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2380
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2381
- }
2382
- .ease-out {
2383
- --tw-ease: var(--ease-out);
2384
- transition-timing-function: var(--ease-out);
2385
- }
2386
1078
  .select-none {
2387
1079
  -webkit-user-select: none;
2388
1080
  user-select: none;
@@ -2402,17 +1094,11 @@
2402
1094
  color: var(--color-fg-disabled);
2403
1095
  }
2404
1096
  }
2405
- .hover\:border-default {
2406
- &:hover {
2407
- @media (hover: hover) {
2408
- border-color: var(--color-default);
2409
- }
2410
- }
2411
- }
2412
- .hover\:bg-blue-800 {
2413
- &:hover {
2414
- @media (hover: hover) {
2415
- 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);
2416
1102
  }
2417
1103
  }
2418
1104
  }
@@ -2437,20 +1123,6 @@
2437
1123
  }
2438
1124
  }
2439
1125
  }
2440
- .hover\:bg-gray-100 {
2441
- &:hover {
2442
- @media (hover: hover) {
2443
- background-color: var(--color-gray-100);
2444
- }
2445
- }
2446
- }
2447
- .hover\:bg-gray-200 {
2448
- &:hover {
2449
- @media (hover: hover) {
2450
- background-color: var(--color-gray-200);
2451
- }
2452
- }
2453
- }
2454
1126
  .hover\:bg-neutral-secondary-medium {
2455
1127
  &:hover {
2456
1128
  @media (hover: hover) {
@@ -2486,13 +1158,6 @@
2486
1158
  }
2487
1159
  }
2488
1160
  }
2489
- .hover\:bg-white {
2490
- &:hover {
2491
- @media (hover: hover) {
2492
- background-color: var(--color-white);
2493
- }
2494
- }
2495
- }
2496
1161
  .hover\:text-blue-600 {
2497
1162
  &:hover {
2498
1163
  @media (hover: hover) {
@@ -2507,13 +1172,6 @@
2507
1172
  }
2508
1173
  }
2509
1174
  }
2510
- .hover\:text-gray-900 {
2511
- &:hover {
2512
- @media (hover: hover) {
2513
- color: var(--color-gray-900);
2514
- }
2515
- }
2516
- }
2517
1175
  .hover\:text-heading {
2518
1176
  &:hover {
2519
1177
  @media (hover: hover) {
@@ -2535,11 +1193,6 @@
2535
1193
  }
2536
1194
  }
2537
1195
  }
2538
- .focus\:z-10 {
2539
- &:focus {
2540
- z-index: 10;
2541
- }
2542
- }
2543
1196
  .focus\:border-brand {
2544
1197
  &:focus {
2545
1198
  border-color: var(--color-brand);
@@ -2562,11 +1215,6 @@
2562
1215
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2563
1216
  }
2564
1217
  }
2565
- .focus\:ring-blue-300 {
2566
- &:focus {
2567
- --tw-ring-color: var(--color-blue-300);
2568
- }
2569
- }
2570
1218
  .focus\:ring-brand {
2571
1219
  &:focus {
2572
1220
  --tw-ring-color: var(--color-brand);
@@ -2623,6 +1271,16 @@
2623
1271
  outline-style: none;
2624
1272
  }
2625
1273
  }
1274
+ .aria-selected\:bg-brand {
1275
+ &[aria-selected="true"] {
1276
+ background-color: var(--color-brand);
1277
+ }
1278
+ }
1279
+ .aria-selected\:text-white {
1280
+ &[aria-selected="true"] {
1281
+ color: var(--color-white);
1282
+ }
1283
+ }
2626
1284
  .sm\:grid {
2627
1285
  @media (width >= 40rem) {
2628
1286
  display: grid;
@@ -2643,14 +1301,14 @@
2643
1301
  padding-inline: calc(var(--spacing) * 6);
2644
1302
  }
2645
1303
  }
2646
- .md\:inset-0 {
1304
+ .md\:mx-0 {
2647
1305
  @media (width >= 48rem) {
2648
- inset: calc(var(--spacing) * 0);
1306
+ margin-inline: calc(var(--spacing) * 0);
2649
1307
  }
2650
1308
  }
2651
- .md\:mx-0 {
1309
+ .md\:block {
2652
1310
  @media (width >= 48rem) {
2653
- margin-inline: calc(var(--spacing) * 0);
1311
+ display: block;
2654
1312
  }
2655
1313
  }
2656
1314
  .md\:flex {
@@ -2658,6 +1316,20 @@
2658
1316
  display: flex;
2659
1317
  }
2660
1318
  }
1319
+ .md\:hidden {
1320
+ @media (width >= 48rem) {
1321
+ display: none;
1322
+ }
1323
+ }
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)));
1330
+ }
1331
+ }
1332
+ }
2661
1333
  .md\:space-x-2 {
2662
1334
  @media (width >= 48rem) {
2663
1335
  :where(& > :not(:last-child)) {
@@ -2672,6 +1344,11 @@
2672
1344
  padding-inline: calc(var(--spacing) * 0);
2673
1345
  }
2674
1346
  }
1347
+ .md\:px-2 {
1348
+ @media (width >= 48rem) {
1349
+ padding-inline: calc(var(--spacing) * 2);
1350
+ }
1351
+ }
2675
1352
  .md\:px-6 {
2676
1353
  @media (width >= 48rem) {
2677
1354
  padding-inline: calc(var(--spacing) * 6);
@@ -2704,57 +1381,11 @@
2704
1381
  text-align: right;
2705
1382
  }
2706
1383
  }
2707
- .dark\:border-gray-500 {
2708
- @media (prefers-color-scheme: dark) {
2709
- border-color: var(--color-gray-500);
2710
- }
2711
- }
2712
- .dark\:border-gray-600 {
2713
- @media (prefers-color-scheme: dark) {
2714
- border-color: var(--color-gray-600);
2715
- }
2716
- }
2717
- .dark\:bg-blue-600 {
2718
- @media (prefers-color-scheme: dark) {
2719
- background-color: var(--color-blue-600);
2720
- }
2721
- }
2722
1384
  .dark\:bg-blue-800 {
2723
1385
  @media (prefers-color-scheme: dark) {
2724
1386
  background-color: var(--color-blue-800);
2725
1387
  }
2726
1388
  }
2727
- .dark\:bg-gray-600 {
2728
- @media (prefers-color-scheme: dark) {
2729
- background-color: var(--color-gray-600);
2730
- }
2731
- }
2732
- .dark\:bg-gray-700 {
2733
- @media (prefers-color-scheme: dark) {
2734
- background-color: var(--color-gray-700);
2735
- }
2736
- }
2737
- .dark\:bg-gray-800 {
2738
- @media (prefers-color-scheme: dark) {
2739
- background-color: var(--color-gray-800);
2740
- }
2741
- }
2742
- .dark\:bg-gray-800\/50 {
2743
- @media (prefers-color-scheme: dark) {
2744
- background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
2745
- @supports (color: color-mix(in lab, red, red)) {
2746
- background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
2747
- }
2748
- }
2749
- }
2750
- .dark\:bg-gray-900\/80 {
2751
- @media (prefers-color-scheme: dark) {
2752
- background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
2753
- @supports (color: color-mix(in lab, red, red)) {
2754
- background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
2755
- }
2756
- }
2757
- }
2758
1389
  .dark\:bg-green-800 {
2759
1390
  @media (prefers-color-scheme: dark) {
2760
1391
  background-color: var(--color-green-800);
@@ -2775,16 +1406,6 @@
2775
1406
  color: var(--color-blue-200);
2776
1407
  }
2777
1408
  }
2778
- .dark\:text-gray-300 {
2779
- @media (prefers-color-scheme: dark) {
2780
- color: var(--color-gray-300);
2781
- }
2782
- }
2783
- .dark\:text-gray-400 {
2784
- @media (prefers-color-scheme: dark) {
2785
- color: var(--color-gray-400);
2786
- }
2787
- }
2788
1409
  .dark\:text-green-200 {
2789
1410
  @media (prefers-color-scheme: dark) {
2790
1411
  color: var(--color-green-200);
@@ -2805,47 +1426,6 @@
2805
1426
  color: var(--color-red-500);
2806
1427
  }
2807
1428
  }
2808
- .dark\:text-white {
2809
- @media (prefers-color-scheme: dark) {
2810
- color: var(--color-white);
2811
- }
2812
- }
2813
- .dark\:hover\:bg-blue-700 {
2814
- @media (prefers-color-scheme: dark) {
2815
- &:hover {
2816
- @media (hover: hover) {
2817
- background-color: var(--color-blue-700);
2818
- }
2819
- }
2820
- }
2821
- }
2822
- .dark\:hover\:bg-gray-600 {
2823
- @media (prefers-color-scheme: dark) {
2824
- &:hover {
2825
- @media (hover: hover) {
2826
- background-color: var(--color-gray-600);
2827
- }
2828
- }
2829
- }
2830
- }
2831
- .dark\:hover\:bg-gray-800 {
2832
- @media (prefers-color-scheme: dark) {
2833
- &:hover {
2834
- @media (hover: hover) {
2835
- background-color: var(--color-gray-800);
2836
- }
2837
- }
2838
- }
2839
- }
2840
- .dark\:hover\:text-white {
2841
- @media (prefers-color-scheme: dark) {
2842
- &:hover {
2843
- @media (hover: hover) {
2844
- color: var(--color-white);
2845
- }
2846
- }
2847
- }
2848
- }
2849
1429
  .hover\:dark\:text-blue-500 {
2850
1430
  &:hover {
2851
1431
  @media (hover: hover) {
@@ -2855,20 +1435,6 @@
2855
1435
  }
2856
1436
  }
2857
1437
  }
2858
- .dark\:focus\:ring-blue-800 {
2859
- @media (prefers-color-scheme: dark) {
2860
- &:focus {
2861
- --tw-ring-color: var(--color-blue-800);
2862
- }
2863
- }
2864
- }
2865
- .dark\:focus\:ring-gray-600 {
2866
- @media (prefers-color-scheme: dark) {
2867
- &:focus {
2868
- --tw-ring-color: var(--color-gray-600);
2869
- }
2870
- }
2871
- }
2872
1438
  }
2873
1439
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
2874
1440
  .dark {
@@ -3386,21 +1952,6 @@
3386
1952
  border-color: var(--color-brand);
3387
1953
  }
3388
1954
  }
3389
- @property --tw-translate-x {
3390
- syntax: "*";
3391
- inherits: false;
3392
- initial-value: 0;
3393
- }
3394
- @property --tw-translate-y {
3395
- syntax: "*";
3396
- inherits: false;
3397
- initial-value: 0;
3398
- }
3399
- @property --tw-translate-z {
3400
- syntax: "*";
3401
- inherits: false;
3402
- initial-value: 0;
3403
- }
3404
1955
  @property --tw-rotate-x {
3405
1956
  syntax: "*";
3406
1957
  inherits: false;
@@ -3518,11 +2069,6 @@
3518
2069
  inherits: false;
3519
2070
  initial-value: 0 0 #0000;
3520
2071
  }
3521
- @property --tw-outline-style {
3522
- syntax: "*";
3523
- inherits: false;
3524
- initial-value: solid;
3525
- }
3526
2072
  @property --tw-blur {
3527
2073
  syntax: "*";
3528
2074
  inherits: false;
@@ -3576,26 +2122,14 @@
3576
2122
  syntax: "*";
3577
2123
  inherits: false;
3578
2124
  }
3579
- @property --tw-ease {
3580
- syntax: "*";
3581
- inherits: false;
3582
- }
3583
2125
  @keyframes spin {
3584
2126
  to {
3585
2127
  transform: rotate(360deg);
3586
2128
  }
3587
2129
  }
3588
- @keyframes pulse {
3589
- 50% {
3590
- opacity: 0.5;
3591
- }
3592
- }
3593
2130
  @layer properties {
3594
2131
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3595
2132
  *, ::before, ::after, ::backdrop {
3596
- --tw-translate-x: 0;
3597
- --tw-translate-y: 0;
3598
- --tw-translate-z: 0;
3599
2133
  --tw-rotate-x: initial;
3600
2134
  --tw-rotate-y: initial;
3601
2135
  --tw-rotate-z: initial;
@@ -3622,7 +2156,6 @@
3622
2156
  --tw-ring-offset-width: 0px;
3623
2157
  --tw-ring-offset-color: #fff;
3624
2158
  --tw-ring-offset-shadow: 0 0 #0000;
3625
- --tw-outline-style: solid;
3626
2159
  --tw-blur: initial;
3627
2160
  --tw-brightness: initial;
3628
2161
  --tw-contrast: initial;
@@ -3636,7 +2169,6 @@
3636
2169
  --tw-drop-shadow-color: initial;
3637
2170
  --tw-drop-shadow-alpha: 100%;
3638
2171
  --tw-drop-shadow-size: initial;
3639
- --tw-ease: initial;
3640
2172
  }
3641
2173
  }
3642
2174
  }