@simple-builder/react 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css ADDED
@@ -0,0 +1,1063 @@
1
+ /* src/global.css */
2
+ :root {
3
+ --sb-background: 0 0% 100%;
4
+ --sb-foreground: 0 0% 3.9%;
5
+ --sb-card: 0 0% 100%;
6
+ --sb-card-foreground: 0 0% 3.9%;
7
+ --sb-popover: 0 0% 100%;
8
+ --sb-popover-foreground: 0 0% 3.9%;
9
+ --sb-primary: 212 100% 50.4%;
10
+ --sb-primary-foreground: 0 0% 98%;
11
+ --sb-secondary: 158 24% 93%;
12
+ --sb-secondary-foreground: 0 0% 9%;
13
+ --sb-muted: 0 0% 96.1%;
14
+ --sb-muted-foreground: 0 0% 45.1%;
15
+ --sb-accent: 0 0% 96.1%;
16
+ --sb-accent-foreground: 0 0% 9%;
17
+ --sb-destructive: 0 84.2% 60.2%;
18
+ --sb-destructive-foreground: 0 0% 98%;
19
+ --sb-border: 0 0% 89.8%;
20
+ --sb-input: 0 0% 89.8%;
21
+ --sb-ring: 0 0% 3.9%;
22
+ --sb-radius: 0.5rem;
23
+ }
24
+ *,
25
+ ::before,
26
+ ::after {
27
+ --tw-border-spacing-x: 0;
28
+ --tw-border-spacing-y: 0;
29
+ --tw-translate-x: 0;
30
+ --tw-translate-y: 0;
31
+ --tw-rotate: 0;
32
+ --tw-skew-x: 0;
33
+ --tw-skew-y: 0;
34
+ --tw-scale-x: 1;
35
+ --tw-scale-y: 1;
36
+ --tw-pan-x: ;
37
+ --tw-pan-y: ;
38
+ --tw-pinch-zoom: ;
39
+ --tw-scroll-snap-strictness: proximity;
40
+ --tw-gradient-from-position: ;
41
+ --tw-gradient-via-position: ;
42
+ --tw-gradient-to-position: ;
43
+ --tw-ordinal: ;
44
+ --tw-slashed-zero: ;
45
+ --tw-numeric-figure: ;
46
+ --tw-numeric-spacing: ;
47
+ --tw-numeric-fraction: ;
48
+ --tw-ring-inset: ;
49
+ --tw-ring-offset-width: 0px;
50
+ --tw-ring-offset-color: #fff;
51
+ --tw-ring-color: rgb(59 130 246 / 0.5);
52
+ --tw-ring-offset-shadow: 0 0 #0000;
53
+ --tw-ring-shadow: 0 0 #0000;
54
+ --tw-shadow: 0 0 #0000;
55
+ --tw-shadow-colored: 0 0 #0000;
56
+ --tw-blur: ;
57
+ --tw-brightness: ;
58
+ --tw-contrast: ;
59
+ --tw-grayscale: ;
60
+ --tw-hue-rotate: ;
61
+ --tw-invert: ;
62
+ --tw-saturate: ;
63
+ --tw-sepia: ;
64
+ --tw-drop-shadow: ;
65
+ --tw-backdrop-blur: ;
66
+ --tw-backdrop-brightness: ;
67
+ --tw-backdrop-contrast: ;
68
+ --tw-backdrop-grayscale: ;
69
+ --tw-backdrop-hue-rotate: ;
70
+ --tw-backdrop-invert: ;
71
+ --tw-backdrop-opacity: ;
72
+ --tw-backdrop-saturate: ;
73
+ --tw-backdrop-sepia: ;
74
+ }
75
+ ::backdrop {
76
+ --tw-border-spacing-x: 0;
77
+ --tw-border-spacing-y: 0;
78
+ --tw-translate-x: 0;
79
+ --tw-translate-y: 0;
80
+ --tw-rotate: 0;
81
+ --tw-skew-x: 0;
82
+ --tw-skew-y: 0;
83
+ --tw-scale-x: 1;
84
+ --tw-scale-y: 1;
85
+ --tw-pan-x: ;
86
+ --tw-pan-y: ;
87
+ --tw-pinch-zoom: ;
88
+ --tw-scroll-snap-strictness: proximity;
89
+ --tw-gradient-from-position: ;
90
+ --tw-gradient-via-position: ;
91
+ --tw-gradient-to-position: ;
92
+ --tw-ordinal: ;
93
+ --tw-slashed-zero: ;
94
+ --tw-numeric-figure: ;
95
+ --tw-numeric-spacing: ;
96
+ --tw-numeric-fraction: ;
97
+ --tw-ring-inset: ;
98
+ --tw-ring-offset-width: 0px;
99
+ --tw-ring-offset-color: #fff;
100
+ --tw-ring-color: rgb(59 130 246 / 0.5);
101
+ --tw-ring-offset-shadow: 0 0 #0000;
102
+ --tw-ring-shadow: 0 0 #0000;
103
+ --tw-shadow: 0 0 #0000;
104
+ --tw-shadow-colored: 0 0 #0000;
105
+ --tw-blur: ;
106
+ --tw-brightness: ;
107
+ --tw-contrast: ;
108
+ --tw-grayscale: ;
109
+ --tw-hue-rotate: ;
110
+ --tw-invert: ;
111
+ --tw-saturate: ;
112
+ --tw-sepia: ;
113
+ --tw-drop-shadow: ;
114
+ --tw-backdrop-blur: ;
115
+ --tw-backdrop-brightness: ;
116
+ --tw-backdrop-contrast: ;
117
+ --tw-backdrop-grayscale: ;
118
+ --tw-backdrop-hue-rotate: ;
119
+ --tw-backdrop-invert: ;
120
+ --tw-backdrop-opacity: ;
121
+ --tw-backdrop-saturate: ;
122
+ --tw-backdrop-sepia: ;
123
+ }
124
+ .container {
125
+ width: 100%;
126
+ }
127
+ @media (min-width: 640px) {
128
+ .container {
129
+ max-width: 640px;
130
+ }
131
+ }
132
+ @media (min-width: 768px) {
133
+ .container {
134
+ max-width: 768px;
135
+ }
136
+ }
137
+ @media (min-width: 1024px) {
138
+ .container {
139
+ max-width: 1024px;
140
+ }
141
+ }
142
+ @media (min-width: 1280px) {
143
+ .container {
144
+ max-width: 1280px;
145
+ }
146
+ }
147
+ @media (min-width: 1536px) {
148
+ .container {
149
+ max-width: 1536px;
150
+ }
151
+ }
152
+ .pointer-events-none {
153
+ pointer-events: none;
154
+ }
155
+ .invisible {
156
+ visibility: hidden;
157
+ }
158
+ .fixed {
159
+ position: fixed;
160
+ }
161
+ .absolute {
162
+ position: absolute;
163
+ }
164
+ .relative {
165
+ position: relative;
166
+ }
167
+ .sticky {
168
+ position: sticky;
169
+ }
170
+ .inset-0 {
171
+ inset: 0px;
172
+ }
173
+ .inset-x-0 {
174
+ left: 0px;
175
+ right: 0px;
176
+ }
177
+ .left-1 {
178
+ left: 0.25rem;
179
+ }
180
+ .left-1\/2 {
181
+ left: 50%;
182
+ }
183
+ .left-3 {
184
+ left: 0.75rem;
185
+ }
186
+ .left-\[50\%\] {
187
+ left: 50%;
188
+ }
189
+ .right-1 {
190
+ right: 0.25rem;
191
+ }
192
+ .right-3 {
193
+ right: 0.75rem;
194
+ }
195
+ .top-0 {
196
+ top: 0px;
197
+ }
198
+ .top-1 {
199
+ top: 0.25rem;
200
+ }
201
+ .top-1\/2 {
202
+ top: 50%;
203
+ }
204
+ .top-\[50\%\] {
205
+ top: 50%;
206
+ }
207
+ .-z-\[1\] {
208
+ z-index: -1;
209
+ }
210
+ .z-20 {
211
+ z-index: 20;
212
+ }
213
+ .z-30 {
214
+ z-index: 30;
215
+ }
216
+ .z-50 {
217
+ z-index: 50;
218
+ }
219
+ .-my-\[2px\] {
220
+ margin-top: -2px;
221
+ margin-bottom: -2px;
222
+ }
223
+ .mx-auto {
224
+ margin-left: auto;
225
+ margin-right: auto;
226
+ }
227
+ .mr-2 {
228
+ margin-right: 0.5rem;
229
+ }
230
+ .mt-2 {
231
+ margin-top: 0.5rem;
232
+ }
233
+ .block {
234
+ display: block;
235
+ }
236
+ .flex {
237
+ display: flex;
238
+ }
239
+ .inline-flex {
240
+ display: inline-flex;
241
+ }
242
+ .table {
243
+ display: table;
244
+ }
245
+ .grid {
246
+ display: grid;
247
+ }
248
+ .hidden {
249
+ display: none;
250
+ }
251
+ .aspect-video {
252
+ aspect-ratio: 16 / 9;
253
+ }
254
+ .h-1 {
255
+ height: 0.25rem;
256
+ }
257
+ .h-10 {
258
+ height: 2.5rem;
259
+ }
260
+ .h-11 {
261
+ height: 2.75rem;
262
+ }
263
+ .h-28 {
264
+ height: 7rem;
265
+ }
266
+ .h-4 {
267
+ height: 1rem;
268
+ }
269
+ .h-5 {
270
+ height: 1.25rem;
271
+ }
272
+ .h-6 {
273
+ height: 1.5rem;
274
+ }
275
+ .h-7 {
276
+ height: 1.75rem;
277
+ }
278
+ .h-8 {
279
+ height: 2rem;
280
+ }
281
+ .h-9 {
282
+ height: 2.25rem;
283
+ }
284
+ .h-auto {
285
+ height: auto;
286
+ }
287
+ .min-h-\[60px\] {
288
+ min-height: 60px;
289
+ }
290
+ .w-11 {
291
+ width: 2.75rem;
292
+ }
293
+ .w-28 {
294
+ width: 7rem;
295
+ }
296
+ .w-4 {
297
+ width: 1rem;
298
+ }
299
+ .w-5 {
300
+ width: 1.25rem;
301
+ }
302
+ .w-6 {
303
+ width: 1.5rem;
304
+ }
305
+ .w-64 {
306
+ width: 16rem;
307
+ }
308
+ .w-7 {
309
+ width: 1.75rem;
310
+ }
311
+ .w-72 {
312
+ width: 18rem;
313
+ }
314
+ .w-8 {
315
+ width: 2rem;
316
+ }
317
+ .w-auto {
318
+ width: auto;
319
+ }
320
+ .w-full {
321
+ width: 100%;
322
+ }
323
+ .max-w-lg {
324
+ max-width: 32rem;
325
+ }
326
+ .flex-1 {
327
+ flex: 1 1 0%;
328
+ }
329
+ .shrink-0 {
330
+ flex-shrink: 0;
331
+ }
332
+ .border-collapse {
333
+ border-collapse: collapse;
334
+ }
335
+ .-translate-x-1\/2 {
336
+ --tw-translate-x: -50%;
337
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
338
+ }
339
+ .-translate-y-1\/2 {
340
+ --tw-translate-y: -50%;
341
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
342
+ }
343
+ .translate-x-\[-50\%\] {
344
+ --tw-translate-x: -50%;
345
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
346
+ }
347
+ .translate-y-\[-50\%\] {
348
+ --tw-translate-y: -50%;
349
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
350
+ }
351
+ .-rotate-90 {
352
+ --tw-rotate: -90deg;
353
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
354
+ }
355
+ .rotate-180 {
356
+ --tw-rotate: 180deg;
357
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
358
+ }
359
+ .rotate-90 {
360
+ --tw-rotate: 90deg;
361
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
362
+ }
363
+ @keyframes spin {
364
+ to {
365
+ transform: rotate(360deg);
366
+ }
367
+ }
368
+ .animate-spin {
369
+ animation: spin 1s linear infinite;
370
+ }
371
+ .cursor-pointer {
372
+ cursor: pointer;
373
+ }
374
+ .grid-cols-2 {
375
+ grid-template-columns: repeat(2, minmax(0, 1fr));
376
+ }
377
+ .grid-cols-3 {
378
+ grid-template-columns: repeat(3, minmax(0, 1fr));
379
+ }
380
+ .grid-cols-\[1fr\,auto\] {
381
+ grid-template-columns: 1fr auto;
382
+ }
383
+ .flex-row {
384
+ flex-direction: row;
385
+ }
386
+ .flex-col {
387
+ flex-direction: column;
388
+ }
389
+ .flex-col-reverse {
390
+ flex-direction: column-reverse;
391
+ }
392
+ .flex-wrap {
393
+ flex-wrap: wrap;
394
+ }
395
+ .items-center {
396
+ align-items: center;
397
+ }
398
+ .justify-start {
399
+ justify-content: flex-start;
400
+ }
401
+ .justify-end {
402
+ justify-content: flex-end;
403
+ }
404
+ .justify-center {
405
+ justify-content: center;
406
+ }
407
+ .justify-between {
408
+ justify-content: space-between;
409
+ }
410
+ .gap-1 {
411
+ gap: 0.25rem;
412
+ }
413
+ .gap-2 {
414
+ gap: 0.5rem;
415
+ }
416
+ .gap-3 {
417
+ gap: 0.75rem;
418
+ }
419
+ .gap-4 {
420
+ gap: 1rem;
421
+ }
422
+ .space-x-1 > :not([hidden]) ~ :not([hidden]) {
423
+ --tw-space-x-reverse: 0;
424
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
425
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
426
+ }
427
+ .space-x-6 > :not([hidden]) ~ :not([hidden]) {
428
+ --tw-space-x-reverse: 0;
429
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
430
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
431
+ }
432
+ .space-y-0 > :not([hidden]) ~ :not([hidden]) {
433
+ --tw-space-y-reverse: 0;
434
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
435
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
436
+ }
437
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
438
+ --tw-space-y-reverse: 0;
439
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
440
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
441
+ }
442
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
443
+ --tw-space-y-reverse: 0;
444
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
445
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
446
+ }
447
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
448
+ --tw-space-y-reverse: 0;
449
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
450
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
451
+ }
452
+ .overflow-hidden {
453
+ overflow: hidden;
454
+ }
455
+ .truncate {
456
+ overflow: hidden;
457
+ text-overflow: ellipsis;
458
+ white-space: nowrap;
459
+ }
460
+ .whitespace-nowrap {
461
+ white-space: nowrap;
462
+ }
463
+ .rounded {
464
+ border-radius: 0.25rem;
465
+ }
466
+ .rounded-full {
467
+ border-radius: 9999px;
468
+ }
469
+ .rounded-lg {
470
+ border-radius: var(--sb-radius);
471
+ }
472
+ .rounded-md {
473
+ border-radius: calc(var(--sb-radius) - 2px);
474
+ }
475
+ .border {
476
+ border-width: 1px;
477
+ }
478
+ .border-2 {
479
+ border-width: 2px;
480
+ }
481
+ .border-b {
482
+ border-bottom-width: 1px;
483
+ }
484
+ .border-b-2 {
485
+ border-bottom-width: 2px;
486
+ }
487
+ .border-sb-input {
488
+ border-color: hsl(var(--sb-input));
489
+ }
490
+ .border-transparent {
491
+ border-color: transparent;
492
+ }
493
+ .bg-sb-accent {
494
+ background-color: hsl(var(--sb-accent));
495
+ }
496
+ .bg-sb-background {
497
+ background-color: hsl(var(--sb-background));
498
+ }
499
+ .bg-sb-background\/80 {
500
+ background-color: hsl(var(--sb-background) / 0.8);
501
+ }
502
+ .bg-sb-card {
503
+ background-color: hsl(var(--sb-card));
504
+ }
505
+ .bg-sb-destructive {
506
+ background-color: hsl(var(--sb-destructive));
507
+ }
508
+ .bg-sb-popover {
509
+ background-color: hsl(var(--sb-popover));
510
+ }
511
+ .bg-sb-primary {
512
+ background-color: hsl(var(--sb-primary));
513
+ }
514
+ .bg-sb-primary\/50 {
515
+ background-color: hsl(var(--sb-primary) / 0.5);
516
+ }
517
+ .bg-sb-secondary {
518
+ background-color: hsl(var(--sb-secondary));
519
+ }
520
+ .bg-transparent {
521
+ background-color: transparent;
522
+ }
523
+ .\!bg-cover {
524
+ background-size: cover !important;
525
+ }
526
+ .bg-cover {
527
+ background-size: cover;
528
+ }
529
+ .\!bg-center {
530
+ background-position: center !important;
531
+ }
532
+ .bg-center {
533
+ background-position: center;
534
+ }
535
+ .object-cover {
536
+ -o-object-fit: cover;
537
+ object-fit: cover;
538
+ }
539
+ .p-0 {
540
+ padding: 0px;
541
+ }
542
+ .p-1 {
543
+ padding: 0.25rem;
544
+ }
545
+ .p-2 {
546
+ padding: 0.5rem;
547
+ }
548
+ .p-3 {
549
+ padding: 0.75rem;
550
+ }
551
+ .p-4 {
552
+ padding: 1rem;
553
+ }
554
+ .p-6 {
555
+ padding: 1.5rem;
556
+ }
557
+ .px-2 {
558
+ padding-left: 0.5rem;
559
+ padding-right: 0.5rem;
560
+ }
561
+ .px-2\.5 {
562
+ padding-left: 0.625rem;
563
+ padding-right: 0.625rem;
564
+ }
565
+ .px-3 {
566
+ padding-left: 0.75rem;
567
+ padding-right: 0.75rem;
568
+ }
569
+ .px-4 {
570
+ padding-left: 1rem;
571
+ padding-right: 1rem;
572
+ }
573
+ .px-5 {
574
+ padding-left: 1.25rem;
575
+ padding-right: 1.25rem;
576
+ }
577
+ .py-1 {
578
+ padding-top: 0.25rem;
579
+ padding-bottom: 0.25rem;
580
+ }
581
+ .py-2 {
582
+ padding-top: 0.5rem;
583
+ padding-bottom: 0.5rem;
584
+ }
585
+ .py-3 {
586
+ padding-top: 0.75rem;
587
+ padding-bottom: 0.75rem;
588
+ }
589
+ .pl-9 {
590
+ padding-left: 2.25rem;
591
+ }
592
+ .pr-7 {
593
+ padding-right: 1.75rem;
594
+ }
595
+ .pt-1 {
596
+ padding-top: 0.25rem;
597
+ }
598
+ .text-left {
599
+ text-align: left;
600
+ }
601
+ .text-center {
602
+ text-align: center;
603
+ }
604
+ .text-right {
605
+ text-align: right;
606
+ }
607
+ .text-\[0\.8rem\] {
608
+ font-size: 0.8rem;
609
+ }
610
+ .text-lg {
611
+ font-size: 1.125rem;
612
+ line-height: 1.75rem;
613
+ }
614
+ .text-sm {
615
+ font-size: 0.875rem;
616
+ line-height: 1.25rem;
617
+ }
618
+ .text-xs {
619
+ font-size: 0.75rem;
620
+ line-height: 1rem;
621
+ }
622
+ .font-medium {
623
+ font-weight: 500;
624
+ }
625
+ .font-normal {
626
+ font-weight: 400;
627
+ }
628
+ .font-semibold {
629
+ font-weight: 600;
630
+ }
631
+ .uppercase {
632
+ text-transform: uppercase;
633
+ }
634
+ .normal-case {
635
+ text-transform: none;
636
+ }
637
+ .leading-none {
638
+ line-height: 1;
639
+ }
640
+ .text-sb-accent-foreground {
641
+ color: hsl(var(--sb-accent-foreground));
642
+ }
643
+ .text-sb-destructive {
644
+ color: hsl(var(--sb-destructive));
645
+ }
646
+ .text-sb-destructive-foreground {
647
+ color: hsl(var(--sb-destructive-foreground));
648
+ }
649
+ .text-sb-muted-foreground {
650
+ color: hsl(var(--sb-muted-foreground));
651
+ }
652
+ .text-sb-popover-foreground {
653
+ color: hsl(var(--sb-popover-foreground));
654
+ }
655
+ .text-sb-primary-foreground {
656
+ color: hsl(var(--sb-primary-foreground));
657
+ }
658
+ .text-sb-secondary-foreground {
659
+ color: hsl(var(--sb-secondary-foreground));
660
+ }
661
+ .opacity-0 {
662
+ opacity: 0;
663
+ }
664
+ .opacity-50 {
665
+ opacity: 0.5;
666
+ }
667
+ .opacity-90 {
668
+ opacity: 0.9;
669
+ }
670
+ .shadow {
671
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
672
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
673
+ box-shadow:
674
+ var(--tw-ring-offset-shadow, 0 0 #0000),
675
+ var(--tw-ring-shadow, 0 0 #0000),
676
+ var(--tw-shadow);
677
+ }
678
+ .shadow-lg {
679
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
680
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
681
+ box-shadow:
682
+ var(--tw-ring-offset-shadow, 0 0 #0000),
683
+ var(--tw-ring-shadow, 0 0 #0000),
684
+ var(--tw-shadow);
685
+ }
686
+ .shadow-md {
687
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
688
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
689
+ box-shadow:
690
+ var(--tw-ring-offset-shadow, 0 0 #0000),
691
+ var(--tw-ring-shadow, 0 0 #0000),
692
+ var(--tw-shadow);
693
+ }
694
+ .shadow-sm {
695
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
696
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
697
+ box-shadow:
698
+ var(--tw-ring-offset-shadow, 0 0 #0000),
699
+ var(--tw-ring-shadow, 0 0 #0000),
700
+ var(--tw-shadow);
701
+ }
702
+ .outline-none {
703
+ outline: 2px solid transparent;
704
+ outline-offset: 2px;
705
+ }
706
+ .outline {
707
+ outline-style: solid;
708
+ }
709
+ .ring-0 {
710
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
711
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
712
+ box-shadow:
713
+ var(--tw-ring-offset-shadow),
714
+ var(--tw-ring-shadow),
715
+ var(--tw-shadow, 0 0 #0000);
716
+ }
717
+ .ring-offset-sb-background {
718
+ --tw-ring-offset-color: hsl(var(--sb-background));
719
+ }
720
+ .filter {
721
+ 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);
722
+ }
723
+ .backdrop-blur-sm {
724
+ --tw-backdrop-blur: blur(4px);
725
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
726
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
727
+ }
728
+ .transition-all {
729
+ transition-property: all;
730
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
731
+ transition-duration: 150ms;
732
+ }
733
+ .transition-colors {
734
+ transition-property:
735
+ color,
736
+ background-color,
737
+ border-color,
738
+ text-decoration-color,
739
+ fill,
740
+ stroke;
741
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
742
+ transition-duration: 150ms;
743
+ }
744
+ .transition-opacity {
745
+ transition-property: opacity;
746
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
747
+ transition-duration: 150ms;
748
+ }
749
+ .transition-transform {
750
+ transition-property: transform;
751
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
752
+ transition-duration: 150ms;
753
+ }
754
+ .duration-200 {
755
+ transition-duration: 200ms;
756
+ }
757
+ @keyframes enter {
758
+ from {
759
+ opacity: var(--tw-enter-opacity, 1);
760
+ transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
761
+ }
762
+ }
763
+ @keyframes exit {
764
+ to {
765
+ opacity: var(--tw-exit-opacity, 1);
766
+ transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
767
+ }
768
+ }
769
+ .duration-200 {
770
+ animation-duration: 200ms;
771
+ }
772
+ .add-content-divider-button:hover,
773
+ .add-content-divider-button:has(> [data-state=open]),
774
+ .add-content-divider-button:has(+ .sb-container-item:hover),
775
+ .add-content-divider-button + .sb-container-item:hover + .add-content-divider-button,
776
+ .sb-container-item:hover > .sb-item-toolbar {
777
+ opacity: 1;
778
+ }
779
+ .sb-item-toolbar:has([data-state=open]) {
780
+ opacity: 1 !important;
781
+ }
782
+ .add-content-divider-button:has(+ .sb-container-item .sb-container-item:hover) {
783
+ opacity: 0;
784
+ }
785
+ .add-content-divider-button + .sb-container-item:has(.sb-container-item:hover) + .add-content-divider-button {
786
+ opacity: 0;
787
+ }
788
+ .sb-container-item:has(.sb-container-item:hover) > .sb-item-toolbar {
789
+ opacity: 0;
790
+ }
791
+ .file\:border-0::file-selector-button {
792
+ border-width: 0px;
793
+ }
794
+ .file\:bg-transparent::file-selector-button {
795
+ background-color: transparent;
796
+ }
797
+ .file\:text-sm::file-selector-button {
798
+ font-size: 0.875rem;
799
+ line-height: 1.25rem;
800
+ }
801
+ .file\:font-medium::file-selector-button {
802
+ font-weight: 500;
803
+ }
804
+ .placeholder\:text-sb-muted-foreground::-moz-placeholder {
805
+ color: hsl(var(--sb-muted-foreground));
806
+ }
807
+ .placeholder\:text-sb-muted-foreground::placeholder {
808
+ color: hsl(var(--sb-muted-foreground));
809
+ }
810
+ .focus-within\:relative:focus-within {
811
+ position: relative;
812
+ }
813
+ .focus-within\:z-20:focus-within {
814
+ z-index: 20;
815
+ }
816
+ .hover\:bg-sb-accent:hover {
817
+ background-color: hsl(var(--sb-accent));
818
+ }
819
+ .hover\:bg-sb-destructive\/90:hover {
820
+ background-color: hsl(var(--sb-destructive) / 0.9);
821
+ }
822
+ .hover\:bg-sb-muted:hover {
823
+ background-color: hsl(var(--sb-muted));
824
+ }
825
+ .hover\:bg-sb-primary:hover {
826
+ background-color: hsl(var(--sb-primary));
827
+ }
828
+ .hover\:bg-sb-primary\/90:hover {
829
+ background-color: hsl(var(--sb-primary) / 0.9);
830
+ }
831
+ .hover\:text-sb-accent-foreground:hover {
832
+ color: hsl(var(--sb-accent-foreground));
833
+ }
834
+ .hover\:text-sb-muted-foreground:hover {
835
+ color: hsl(var(--sb-muted-foreground));
836
+ }
837
+ .hover\:text-sb-primary-foreground:hover {
838
+ color: hsl(var(--sb-primary-foreground));
839
+ }
840
+ .hover\:opacity-100:hover {
841
+ opacity: 1;
842
+ }
843
+ .focus\:bg-sb-primary:focus {
844
+ background-color: hsl(var(--sb-primary));
845
+ }
846
+ .focus\:text-sb-primary-foreground:focus {
847
+ color: hsl(var(--sb-primary-foreground));
848
+ }
849
+ .focus-visible\:outline-none:focus-visible {
850
+ outline: 2px solid transparent;
851
+ outline-offset: 2px;
852
+ }
853
+ .focus-visible\:ring-1:focus-visible {
854
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
855
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
856
+ box-shadow:
857
+ var(--tw-ring-offset-shadow),
858
+ var(--tw-ring-shadow),
859
+ var(--tw-shadow, 0 0 #0000);
860
+ }
861
+ .focus-visible\:ring-2:focus-visible {
862
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
863
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
864
+ box-shadow:
865
+ var(--tw-ring-offset-shadow),
866
+ var(--tw-ring-shadow),
867
+ var(--tw-shadow, 0 0 #0000);
868
+ }
869
+ .focus-visible\:ring-sb-ring:focus-visible {
870
+ --tw-ring-color: hsl(var(--sb-ring));
871
+ }
872
+ .focus-visible\:ring-offset-2:focus-visible {
873
+ --tw-ring-offset-width: 2px;
874
+ }
875
+ .focus-visible\:ring-offset-sb-background:focus-visible {
876
+ --tw-ring-offset-color: hsl(var(--sb-background));
877
+ }
878
+ .active\:scale-105:active {
879
+ --tw-scale-x: 1.05;
880
+ --tw-scale-y: 1.05;
881
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
882
+ }
883
+ .disabled\:pointer-events-none:disabled {
884
+ pointer-events: none;
885
+ }
886
+ .disabled\:cursor-not-allowed:disabled {
887
+ cursor: not-allowed;
888
+ }
889
+ .disabled\:opacity-50:disabled {
890
+ opacity: 0.5;
891
+ }
892
+ .group:hover .group-hover\:opacity-100 {
893
+ opacity: 1;
894
+ }
895
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
896
+ cursor: not-allowed;
897
+ }
898
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
899
+ opacity: 0.7;
900
+ }
901
+ .aria-selected\:bg-sb-accent[aria-selected=true] {
902
+ background-color: hsl(var(--sb-accent));
903
+ }
904
+ .aria-selected\:bg-sb-accent\/50[aria-selected=true] {
905
+ background-color: hsl(var(--sb-accent) / 0.5);
906
+ }
907
+ .aria-selected\:text-sb-accent-foreground[aria-selected=true] {
908
+ color: hsl(var(--sb-accent-foreground));
909
+ }
910
+ .aria-selected\:text-sb-muted-foreground[aria-selected=true] {
911
+ color: hsl(var(--sb-muted-foreground));
912
+ }
913
+ .aria-selected\:opacity-100[aria-selected=true] {
914
+ opacity: 1;
915
+ }
916
+ .aria-selected\:opacity-30[aria-selected=true] {
917
+ opacity: 0.3;
918
+ }
919
+ .data-\[state\=active\]\:flex[data-state=active] {
920
+ display: flex;
921
+ }
922
+ .data-\[state\=checked\]\:translate-x-5[data-state=checked] {
923
+ --tw-translate-x: 1.25rem;
924
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
925
+ }
926
+ .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
927
+ --tw-translate-x: 0px;
928
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
929
+ }
930
+ .data-\[state\=active\]\:border-black[data-state=active] {
931
+ --tw-border-opacity: 1;
932
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
933
+ }
934
+ .data-\[state\=checked\]\:bg-sb-primary[data-state=checked] {
935
+ background-color: hsl(var(--sb-primary));
936
+ }
937
+ .data-\[state\=on\]\:bg-sb-accent[data-state=on] {
938
+ background-color: hsl(var(--sb-accent));
939
+ }
940
+ .data-\[state\=unchecked\]\:bg-sb-input[data-state=unchecked] {
941
+ background-color: hsl(var(--sb-input));
942
+ }
943
+ .data-\[state\=active\]\:text-sb-foreground[data-state=active] {
944
+ color: hsl(var(--sb-foreground));
945
+ }
946
+ .data-\[state\=on\]\:text-sb-accent-foreground[data-state=on] {
947
+ color: hsl(var(--sb-accent-foreground));
948
+ }
949
+ .data-\[state\=open\]\:animate-in[data-state=open] {
950
+ animation-name: enter;
951
+ animation-duration: 150ms;
952
+ --tw-enter-opacity: initial;
953
+ --tw-enter-scale: initial;
954
+ --tw-enter-rotate: initial;
955
+ --tw-enter-translate-x: initial;
956
+ --tw-enter-translate-y: initial;
957
+ }
958
+ .data-\[state\=closed\]\:animate-out[data-state=closed] {
959
+ animation-name: exit;
960
+ animation-duration: 150ms;
961
+ --tw-exit-opacity: initial;
962
+ --tw-exit-scale: initial;
963
+ --tw-exit-rotate: initial;
964
+ --tw-exit-translate-x: initial;
965
+ --tw-exit-translate-y: initial;
966
+ }
967
+ .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
968
+ --tw-exit-opacity: 0;
969
+ }
970
+ .data-\[state\=open\]\:fade-in-0[data-state=open] {
971
+ --tw-enter-opacity: 0;
972
+ }
973
+ .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
974
+ --tw-exit-scale: .95;
975
+ }
976
+ .data-\[state\=open\]\:zoom-in-95[data-state=open] {
977
+ --tw-enter-scale: .95;
978
+ }
979
+ .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
980
+ --tw-enter-translate-y: -0.5rem;
981
+ }
982
+ .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
983
+ --tw-enter-translate-x: 0.5rem;
984
+ }
985
+ .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
986
+ --tw-enter-translate-x: -0.5rem;
987
+ }
988
+ .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
989
+ --tw-enter-translate-y: 0.5rem;
990
+ }
991
+ .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
992
+ --tw-exit-translate-x: -50%;
993
+ }
994
+ .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
995
+ --tw-exit-translate-y: -48%;
996
+ }
997
+ .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
998
+ --tw-enter-translate-x: -50%;
999
+ }
1000
+ .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
1001
+ --tw-enter-translate-y: -48%;
1002
+ }
1003
+ @media (min-width: 640px) {
1004
+ .sm\:mt-0 {
1005
+ margin-top: 0px;
1006
+ }
1007
+ .sm\:flex-row {
1008
+ flex-direction: row;
1009
+ }
1010
+ .sm\:justify-end {
1011
+ justify-content: flex-end;
1012
+ }
1013
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
1014
+ --tw-space-x-reverse: 0;
1015
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1016
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1017
+ }
1018
+ .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
1019
+ --tw-space-x-reverse: 0;
1020
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
1021
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1022
+ }
1023
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
1024
+ --tw-space-y-reverse: 0;
1025
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
1026
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
1027
+ }
1028
+ .sm\:rounded-lg {
1029
+ border-radius: var(--sb-radius);
1030
+ }
1031
+ .sm\:text-left {
1032
+ text-align: left;
1033
+ }
1034
+ }
1035
+ .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(> .day-range-end) {
1036
+ border-top-right-radius: calc(var(--sb-radius) - 2px);
1037
+ border-bottom-right-radius: calc(var(--sb-radius) - 2px);
1038
+ }
1039
+ .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(> .day-range-start) {
1040
+ border-top-left-radius: calc(var(--sb-radius) - 2px);
1041
+ border-bottom-left-radius: calc(var(--sb-radius) - 2px);
1042
+ }
1043
+ .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
1044
+ border-radius: calc(var(--sb-radius) - 2px);
1045
+ }
1046
+ .\[\&\:has\(\[aria-selected\]\)\]\:bg-sb-accent:has([aria-selected]) {
1047
+ background-color: hsl(var(--sb-accent));
1048
+ }
1049
+ .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
1050
+ border-top-left-radius: calc(var(--sb-radius) - 2px);
1051
+ border-bottom-left-radius: calc(var(--sb-radius) - 2px);
1052
+ }
1053
+ .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
1054
+ border-top-right-radius: calc(var(--sb-radius) - 2px);
1055
+ border-bottom-right-radius: calc(var(--sb-radius) - 2px);
1056
+ }
1057
+ .\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-sb-accent\/50:has([aria-selected].day-outside) {
1058
+ background-color: hsl(var(--sb-accent) / 0.5);
1059
+ }
1060
+ .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
1061
+ border-top-right-radius: calc(var(--sb-radius) - 2px);
1062
+ border-bottom-right-radius: calc(var(--sb-radius) - 2px);
1063
+ }