@crystallize/design-system 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/index.css +926 -0
  2. package/dist/index.d.ts +123 -0
  3. package/dist/index.js +1023 -0
  4. package/dist/index.mjs +981 -0
  5. package/package.json +73 -0
  6. package/src/action-menu/ActionMenu.stories.tsx +23 -0
  7. package/src/action-menu/action-item.tsx +24 -0
  8. package/src/action-menu/action-menu.tsx +37 -0
  9. package/src/action-menu/index.tsx +1 -0
  10. package/src/button/Button.stories.tsx +63 -0
  11. package/src/button/button.tsx +50 -0
  12. package/src/button/index.ts +3 -0
  13. package/src/button copy/ButtonCopy.stories.tsx +86 -0
  14. package/src/button copy/button.tsx +61 -0
  15. package/src/button copy/index.ts +3 -0
  16. package/src/card/card.stories.tsx +24 -0
  17. package/src/card/card.tsx +25 -0
  18. package/src/card/index.ts +1 -0
  19. package/src/colors/Colors.stories.mdx +33 -0
  20. package/src/dialog/Dialog.stories.tsx +165 -0
  21. package/src/dialog/config.tsx +134 -0
  22. package/src/dialog/confirm-dialog.tsx +59 -0
  23. package/src/dialog/destroyFns.ts +1 -0
  24. package/src/dialog/dialog.tsx +85 -0
  25. package/src/dialog/index.tsx +40 -0
  26. package/src/dialog/types.ts +38 -0
  27. package/src/dropdown-menu/DropdownMenu.stories.tsx +47 -0
  28. package/src/dropdown-menu/dropdown-menu-item.tsx +24 -0
  29. package/src/dropdown-menu/dropdown-menu-label.tsx +17 -0
  30. package/src/dropdown-menu/dropdown-menu-root.tsx +20 -0
  31. package/src/dropdown-menu/index.ts +9 -0
  32. package/src/icon-button/IconButton.stories.tsx +35 -0
  33. package/src/icon-button/icon-button.tsx +42 -0
  34. package/src/icon-button/index.ts +3 -0
  35. package/src/icons/Iconography.stories.mdx +45 -0
  36. package/src/icons/arrow.tsx +15 -0
  37. package/src/icons/cancel.tsx +26 -0
  38. package/src/icons/dots.tsx +24 -0
  39. package/src/icons/error.tsx +50 -0
  40. package/src/icons/glasses.tsx +62 -0
  41. package/src/icons/graphQL.tsx +90 -0
  42. package/src/icons/index.ts +21 -0
  43. package/src/icons/info.tsx +53 -0
  44. package/src/icons/nail-polish.tsx +84 -0
  45. package/src/icons/warning.tsx +62 -0
  46. package/src/index.css +3 -0
  47. package/src/index.ts +8 -0
  48. package/src/vite-env.d.ts +1 -0
package/dist/index.css ADDED
@@ -0,0 +1,926 @@
1
+ /* src/index.css */
2
+ *,
3
+ ::before,
4
+ ::after {
5
+ box-sizing: border-box;
6
+ border-width: 0;
7
+ border-style: solid;
8
+ border-color: #e5e7eb;
9
+ }
10
+ ::before,
11
+ ::after {
12
+ --tw-content: "";
13
+ }
14
+ html {
15
+ line-height: 1.5;
16
+ -webkit-text-size-adjust: 100%;
17
+ -moz-tab-size: 4;
18
+ tab-size: 4;
19
+ font-family:
20
+ Roboto,
21
+ ui-sans-serif,
22
+ system-ui,
23
+ -apple-system,
24
+ BlinkMacSystemFont,
25
+ "Segoe UI",
26
+ Roboto,
27
+ "Helvetica Neue",
28
+ Arial,
29
+ "Noto Sans",
30
+ sans-serif,
31
+ "Apple Color Emoji",
32
+ "Segoe UI Emoji",
33
+ "Segoe UI Symbol",
34
+ "Noto Color Emoji";
35
+ }
36
+ body {
37
+ margin: 0;
38
+ line-height: inherit;
39
+ }
40
+ hr {
41
+ height: 0;
42
+ color: inherit;
43
+ border-top-width: 1px;
44
+ }
45
+ abbr:where([title]) {
46
+ text-decoration: underline dotted;
47
+ }
48
+ h1,
49
+ h2,
50
+ h3,
51
+ h4,
52
+ h5,
53
+ h6 {
54
+ font-size: inherit;
55
+ font-weight: inherit;
56
+ }
57
+ a {
58
+ color: inherit;
59
+ text-decoration: inherit;
60
+ }
61
+ b,
62
+ strong {
63
+ font-weight: bolder;
64
+ }
65
+ code,
66
+ kbd,
67
+ samp,
68
+ pre {
69
+ font-family:
70
+ ui-monospace,
71
+ SFMono-Regular,
72
+ Menlo,
73
+ Monaco,
74
+ Consolas,
75
+ "Liberation Mono",
76
+ "Courier New",
77
+ monospace;
78
+ font-size: 1em;
79
+ }
80
+ small {
81
+ font-size: 80%;
82
+ }
83
+ sub,
84
+ sup {
85
+ font-size: 75%;
86
+ line-height: 0;
87
+ position: relative;
88
+ vertical-align: baseline;
89
+ }
90
+ sub {
91
+ bottom: -0.25em;
92
+ }
93
+ sup {
94
+ top: -0.5em;
95
+ }
96
+ table {
97
+ text-indent: 0;
98
+ border-color: inherit;
99
+ border-collapse: collapse;
100
+ }
101
+ button,
102
+ input,
103
+ optgroup,
104
+ select,
105
+ textarea {
106
+ font-family: inherit;
107
+ font-size: 100%;
108
+ font-weight: inherit;
109
+ line-height: inherit;
110
+ color: inherit;
111
+ margin: 0;
112
+ padding: 0;
113
+ }
114
+ button,
115
+ select {
116
+ text-transform: none;
117
+ }
118
+ button,
119
+ [type=button],
120
+ [type=reset],
121
+ [type=submit] {
122
+ -webkit-appearance: button;
123
+ background-color: transparent;
124
+ background-image: none;
125
+ }
126
+ :-moz-focusring {
127
+ outline: auto;
128
+ }
129
+ :-moz-ui-invalid {
130
+ box-shadow: none;
131
+ }
132
+ progress {
133
+ vertical-align: baseline;
134
+ }
135
+ ::-webkit-inner-spin-button,
136
+ ::-webkit-outer-spin-button {
137
+ height: auto;
138
+ }
139
+ [type=search] {
140
+ -webkit-appearance: textfield;
141
+ outline-offset: -2px;
142
+ }
143
+ ::-webkit-search-decoration {
144
+ -webkit-appearance: none;
145
+ }
146
+ ::-webkit-file-upload-button {
147
+ -webkit-appearance: button;
148
+ font: inherit;
149
+ }
150
+ summary {
151
+ display: list-item;
152
+ }
153
+ blockquote,
154
+ dl,
155
+ dd,
156
+ h1,
157
+ h2,
158
+ h3,
159
+ h4,
160
+ h5,
161
+ h6,
162
+ hr,
163
+ figure,
164
+ p,
165
+ pre {
166
+ margin: 0;
167
+ }
168
+ fieldset {
169
+ margin: 0;
170
+ padding: 0;
171
+ }
172
+ legend {
173
+ padding: 0;
174
+ }
175
+ ol,
176
+ ul,
177
+ menu {
178
+ list-style: none;
179
+ margin: 0;
180
+ padding: 0;
181
+ }
182
+ textarea {
183
+ resize: vertical;
184
+ }
185
+ input::placeholder,
186
+ textarea::placeholder {
187
+ opacity: 1;
188
+ color: #9ca3af;
189
+ }
190
+ button,
191
+ [role=button] {
192
+ cursor: pointer;
193
+ }
194
+ :disabled {
195
+ cursor: default;
196
+ }
197
+ img,
198
+ svg,
199
+ video,
200
+ canvas,
201
+ audio,
202
+ iframe,
203
+ embed,
204
+ object {
205
+ display: block;
206
+ vertical-align: middle;
207
+ }
208
+ img,
209
+ video {
210
+ max-width: 100%;
211
+ height: auto;
212
+ }
213
+ [hidden] {
214
+ display: none;
215
+ }
216
+ *,
217
+ ::before,
218
+ ::after {
219
+ --tw-border-spacing-x: 0;
220
+ --tw-border-spacing-y: 0;
221
+ --tw-translate-x: 0;
222
+ --tw-translate-y: 0;
223
+ --tw-rotate: 0;
224
+ --tw-skew-x: 0;
225
+ --tw-skew-y: 0;
226
+ --tw-scale-x: 1;
227
+ --tw-scale-y: 1;
228
+ --tw-pan-x: ;
229
+ --tw-pan-y: ;
230
+ --tw-pinch-zoom: ;
231
+ --tw-scroll-snap-strictness: proximity;
232
+ --tw-ordinal: ;
233
+ --tw-slashed-zero: ;
234
+ --tw-numeric-figure: ;
235
+ --tw-numeric-spacing: ;
236
+ --tw-numeric-fraction: ;
237
+ --tw-ring-inset: ;
238
+ --tw-ring-offset-width: 0px;
239
+ --tw-ring-offset-color: #fff;
240
+ --tw-ring-color: rgb(59 130 246 / 0.5);
241
+ --tw-ring-offset-shadow: 0 0 #0000;
242
+ --tw-ring-shadow: 0 0 #0000;
243
+ --tw-shadow: 0 0 #0000;
244
+ --tw-shadow-colored: 0 0 #0000;
245
+ --tw-blur: ;
246
+ --tw-brightness: ;
247
+ --tw-contrast: ;
248
+ --tw-grayscale: ;
249
+ --tw-hue-rotate: ;
250
+ --tw-invert: ;
251
+ --tw-saturate: ;
252
+ --tw-sepia: ;
253
+ --tw-drop-shadow: ;
254
+ --tw-backdrop-blur: ;
255
+ --tw-backdrop-brightness: ;
256
+ --tw-backdrop-contrast: ;
257
+ --tw-backdrop-grayscale: ;
258
+ --tw-backdrop-hue-rotate: ;
259
+ --tw-backdrop-invert: ;
260
+ --tw-backdrop-opacity: ;
261
+ --tw-backdrop-saturate: ;
262
+ --tw-backdrop-sepia: ;
263
+ }
264
+ ::backdrop {
265
+ --tw-border-spacing-x: 0;
266
+ --tw-border-spacing-y: 0;
267
+ --tw-translate-x: 0;
268
+ --tw-translate-y: 0;
269
+ --tw-rotate: 0;
270
+ --tw-skew-x: 0;
271
+ --tw-skew-y: 0;
272
+ --tw-scale-x: 1;
273
+ --tw-scale-y: 1;
274
+ --tw-pan-x: ;
275
+ --tw-pan-y: ;
276
+ --tw-pinch-zoom: ;
277
+ --tw-scroll-snap-strictness: proximity;
278
+ --tw-ordinal: ;
279
+ --tw-slashed-zero: ;
280
+ --tw-numeric-figure: ;
281
+ --tw-numeric-spacing: ;
282
+ --tw-numeric-fraction: ;
283
+ --tw-ring-inset: ;
284
+ --tw-ring-offset-width: 0px;
285
+ --tw-ring-offset-color: #fff;
286
+ --tw-ring-color: rgb(59 130 246 / 0.5);
287
+ --tw-ring-offset-shadow: 0 0 #0000;
288
+ --tw-ring-shadow: 0 0 #0000;
289
+ --tw-shadow: 0 0 #0000;
290
+ --tw-shadow-colored: 0 0 #0000;
291
+ --tw-blur: ;
292
+ --tw-brightness: ;
293
+ --tw-contrast: ;
294
+ --tw-grayscale: ;
295
+ --tw-hue-rotate: ;
296
+ --tw-invert: ;
297
+ --tw-saturate: ;
298
+ --tw-sepia: ;
299
+ --tw-drop-shadow: ;
300
+ --tw-backdrop-blur: ;
301
+ --tw-backdrop-brightness: ;
302
+ --tw-backdrop-contrast: ;
303
+ --tw-backdrop-grayscale: ;
304
+ --tw-backdrop-hue-rotate: ;
305
+ --tw-backdrop-invert: ;
306
+ --tw-backdrop-opacity: ;
307
+ --tw-backdrop-saturate: ;
308
+ --tw-backdrop-sepia: ;
309
+ }
310
+ .container {
311
+ width: 100%;
312
+ }
313
+ @media (min-width: 640px) {
314
+ .container {
315
+ max-width: 640px;
316
+ }
317
+ }
318
+ @media (min-width: 768px) {
319
+ .container {
320
+ max-width: 768px;
321
+ }
322
+ }
323
+ @media (min-width: 1024px) {
324
+ .container {
325
+ max-width: 1024px;
326
+ }
327
+ }
328
+ @media (min-width: 1280px) {
329
+ .container {
330
+ max-width: 1280px;
331
+ }
332
+ }
333
+ @media (min-width: 1536px) {
334
+ .container {
335
+ max-width: 1536px;
336
+ }
337
+ }
338
+ .sr-only {
339
+ position: absolute;
340
+ width: 1px;
341
+ height: 1px;
342
+ padding: 0;
343
+ margin: -1px;
344
+ overflow: hidden;
345
+ clip: rect(0, 0, 0, 0);
346
+ white-space: nowrap;
347
+ border-width: 0;
348
+ }
349
+ .fixed {
350
+ position: fixed;
351
+ }
352
+ .absolute {
353
+ position: absolute;
354
+ }
355
+ .inset-0 {
356
+ top: 0px;
357
+ right: 0px;
358
+ bottom: 0px;
359
+ left: 0px;
360
+ }
361
+ .top-1\/2 {
362
+ top: 50%;
363
+ }
364
+ .left-1\/2 {
365
+ left: 50%;
366
+ }
367
+ .top-2\.5 {
368
+ top: 0.625rem;
369
+ }
370
+ .right-2\.5 {
371
+ right: 0.625rem;
372
+ }
373
+ .top-2 {
374
+ top: 0.5rem;
375
+ }
376
+ .right-2 {
377
+ right: 0.5rem;
378
+ }
379
+ .m-0 {
380
+ margin: 0px;
381
+ }
382
+ .my-6 {
383
+ margin-top: 1.5rem;
384
+ margin-bottom: 1.5rem;
385
+ }
386
+ .my-1 {
387
+ margin-top: 0.25rem;
388
+ margin-bottom: 0.25rem;
389
+ }
390
+ .mt-4 {
391
+ margin-top: 1rem;
392
+ }
393
+ .mt-2 {
394
+ margin-top: 0.5rem;
395
+ }
396
+ .mb-5 {
397
+ margin-bottom: 1.25rem;
398
+ }
399
+ .flex {
400
+ display: flex;
401
+ }
402
+ .inline-flex {
403
+ display: inline-flex;
404
+ }
405
+ .grid {
406
+ display: grid;
407
+ }
408
+ .inline-grid {
409
+ display: inline-grid;
410
+ }
411
+ .h-8 {
412
+ height: 2rem;
413
+ }
414
+ .h-9 {
415
+ height: 2.25rem;
416
+ }
417
+ .h-10 {
418
+ height: 2.5rem;
419
+ }
420
+ .h-11 {
421
+ height: 2.75rem;
422
+ }
423
+ .h-6 {
424
+ height: 1.5rem;
425
+ }
426
+ .w-auto {
427
+ width: auto;
428
+ }
429
+ .w-6 {
430
+ width: 1.5rem;
431
+ }
432
+ .w-8 {
433
+ width: 2rem;
434
+ }
435
+ .w-9 {
436
+ width: 2.25rem;
437
+ }
438
+ .w-10 {
439
+ width: 2.5rem;
440
+ }
441
+ .w-11 {
442
+ width: 2.75rem;
443
+ }
444
+ .max-w-xl {
445
+ max-width: 36rem;
446
+ }
447
+ .shrink-0 {
448
+ flex-shrink: 0;
449
+ }
450
+ .-translate-x-1\/2 {
451
+ --tw-translate-x: -50%;
452
+ 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));
453
+ }
454
+ .-translate-y-1\/2 {
455
+ --tw-translate-y: -50%;
456
+ 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));
457
+ }
458
+ .rotate-180 {
459
+ --tw-rotate: 180deg;
460
+ 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));
461
+ }
462
+ .cursor-pointer {
463
+ cursor: pointer;
464
+ }
465
+ .grid-flow-col {
466
+ grid-auto-flow: column;
467
+ }
468
+ .grid-cols-5 {
469
+ grid-template-columns: repeat(5, minmax(0, 1fr));
470
+ }
471
+ .grid-cols-4 {
472
+ grid-template-columns: repeat(4, minmax(0, 1fr));
473
+ }
474
+ .items-start {
475
+ align-items: flex-start;
476
+ }
477
+ .items-center {
478
+ align-items: center;
479
+ }
480
+ .justify-end {
481
+ justify-content: flex-end;
482
+ }
483
+ .justify-center {
484
+ justify-content: center;
485
+ }
486
+ .justify-between {
487
+ justify-content: space-between;
488
+ }
489
+ .justify-items-center {
490
+ justify-items: center;
491
+ }
492
+ .gap-2 {
493
+ gap: 0.5rem;
494
+ }
495
+ .gap-6 {
496
+ gap: 1.5rem;
497
+ }
498
+ .gap-4 {
499
+ gap: 1rem;
500
+ }
501
+ .place-self-start {
502
+ place-self: start;
503
+ }
504
+ .whitespace-nowrap {
505
+ white-space: nowrap;
506
+ }
507
+ .rounded-full {
508
+ border-radius: 9999px;
509
+ }
510
+ .rounded {
511
+ border-radius: 0.25rem;
512
+ }
513
+ .rounded-lg {
514
+ border-radius: 0.5rem;
515
+ }
516
+ .\!rounded-full {
517
+ border-radius: 9999px !important;
518
+ }
519
+ .border {
520
+ border-width: 1px;
521
+ }
522
+ .border-solid {
523
+ border-style: solid;
524
+ }
525
+ .border-none {
526
+ border-style: none;
527
+ }
528
+ .border-galaxy {
529
+ --tw-border-opacity: 1;
530
+ border-color: rgb(52 83 91 / var(--tw-border-opacity));
531
+ }
532
+ .bg-transparent {
533
+ background-color: transparent;
534
+ }
535
+ .bg-neptune {
536
+ --tw-bg-opacity: 1;
537
+ background-color: rgb(191 246 248 / var(--tw-bg-opacity));
538
+ }
539
+ .bg-white {
540
+ --tw-bg-opacity: 1;
541
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
542
+ }
543
+ .bg-cosmos {
544
+ --tw-bg-opacity: 1;
545
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
546
+ }
547
+ .bg-error {
548
+ --tw-bg-opacity: 1;
549
+ background-color: rgb(221 19 103 / var(--tw-bg-opacity));
550
+ }
551
+ .bg-cyan-200 {
552
+ --tw-bg-opacity: 1;
553
+ background-color: rgb(165 243 252 / var(--tw-bg-opacity));
554
+ }
555
+ .bg-emerald-200 {
556
+ --tw-bg-opacity: 1;
557
+ background-color: rgb(167 243 208 / var(--tw-bg-opacity));
558
+ }
559
+ .bg-red-200 {
560
+ --tw-bg-opacity: 1;
561
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
562
+ }
563
+ .bg-jupiter {
564
+ --tw-bg-opacity: 1;
565
+ background-color: rgb(238 239 241 / var(--tw-bg-opacity));
566
+ }
567
+ .bg-black\/30 {
568
+ background-color: rgb(0 0 0 / 0.3);
569
+ }
570
+ .\!bg-transparent {
571
+ background-color: transparent !important;
572
+ }
573
+ .p-1 {
574
+ padding: 0.25rem;
575
+ }
576
+ .p-4 {
577
+ padding: 1rem;
578
+ }
579
+ .p-6 {
580
+ padding: 1.5rem;
581
+ }
582
+ .\!p-0 {
583
+ padding: 0px !important;
584
+ }
585
+ .py-2\.5 {
586
+ padding-top: 0.625rem;
587
+ padding-bottom: 0.625rem;
588
+ }
589
+ .px-5 {
590
+ padding-left: 1.25rem;
591
+ padding-right: 1.25rem;
592
+ }
593
+ .py-2 {
594
+ padding-top: 0.5rem;
595
+ padding-bottom: 0.5rem;
596
+ }
597
+ .px-6 {
598
+ padding-left: 1.5rem;
599
+ padding-right: 1.5rem;
600
+ }
601
+ .px-7 {
602
+ padding-left: 1.75rem;
603
+ padding-right: 1.75rem;
604
+ }
605
+ .px-8 {
606
+ padding-left: 2rem;
607
+ padding-right: 2rem;
608
+ }
609
+ .px-9 {
610
+ padding-left: 2.25rem;
611
+ padding-right: 2.25rem;
612
+ }
613
+ .py-6 {
614
+ padding-top: 1.5rem;
615
+ padding-bottom: 1.5rem;
616
+ }
617
+ .px-4 {
618
+ padding-left: 1rem;
619
+ padding-right: 1rem;
620
+ }
621
+ .pl-4 {
622
+ padding-left: 1rem;
623
+ }
624
+ .pr-8 {
625
+ padding-right: 2rem;
626
+ }
627
+ .font-sans {
628
+ font-family:
629
+ Roboto,
630
+ ui-sans-serif,
631
+ system-ui,
632
+ -apple-system,
633
+ BlinkMacSystemFont,
634
+ "Segoe UI",
635
+ Roboto,
636
+ "Helvetica Neue",
637
+ Arial,
638
+ "Noto Sans",
639
+ sans-serif,
640
+ "Apple Color Emoji",
641
+ "Segoe UI Emoji",
642
+ "Segoe UI Symbol",
643
+ "Noto Color Emoji";
644
+ }
645
+ .text-sm {
646
+ font-size: 0.875rem;
647
+ line-height: 1.25rem;
648
+ }
649
+ .text-2xl {
650
+ font-size: 1.5rem;
651
+ line-height: 2rem;
652
+ }
653
+ .text-xs {
654
+ font-size: 0.75rem;
655
+ line-height: 1rem;
656
+ }
657
+ .font-medium {
658
+ font-weight: 500;
659
+ }
660
+ .font-semibold {
661
+ font-weight: 600;
662
+ }
663
+ .text-density {
664
+ --tw-text-opacity: 1;
665
+ color: rgb(77 82 91 / var(--tw-text-opacity));
666
+ }
667
+ .text-slate-500 {
668
+ --tw-text-opacity: 1;
669
+ color: rgb(100 116 139 / var(--tw-text-opacity));
670
+ }
671
+ .text-black-text {
672
+ --tw-text-opacity: 1;
673
+ color: rgb(76 79 90 / var(--tw-text-opacity));
674
+ }
675
+ .text-white {
676
+ --tw-text-opacity: 1;
677
+ color: rgb(255 255 255 / var(--tw-text-opacity));
678
+ }
679
+ .text-galaxy {
680
+ --tw-text-opacity: 1;
681
+ color: rgb(52 83 91 / var(--tw-text-opacity));
682
+ }
683
+ .text-sky-700 {
684
+ --tw-text-opacity: 1;
685
+ color: rgb(3 105 161 / var(--tw-text-opacity));
686
+ }
687
+ .text-cyan-800 {
688
+ --tw-text-opacity: 1;
689
+ color: rgb(21 94 117 / var(--tw-text-opacity));
690
+ }
691
+ .text-emerald-800 {
692
+ --tw-text-opacity: 1;
693
+ color: rgb(6 95 70 / var(--tw-text-opacity));
694
+ }
695
+ .text-red-800 {
696
+ --tw-text-opacity: 1;
697
+ color: rgb(153 27 27 / var(--tw-text-opacity));
698
+ }
699
+ .text-gray-600 {
700
+ --tw-text-opacity: 1;
701
+ color: rgb(75 85 99 / var(--tw-text-opacity));
702
+ }
703
+ .shadow {
704
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
705
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
706
+ box-shadow:
707
+ var(--tw-ring-offset-shadow, 0 0 #0000),
708
+ var(--tw-ring-shadow, 0 0 #0000),
709
+ var(--tw-shadow);
710
+ }
711
+ .outline {
712
+ outline-style: solid;
713
+ }
714
+ .outline-asteroid {
715
+ outline-color: #528693;
716
+ }
717
+ .\!drop-shadow-none {
718
+ --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
719
+ 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) !important;
720
+ }
721
+ .first\:rounded-tr:first-child {
722
+ border-top-right-radius: 0.25rem;
723
+ }
724
+ .first\:rounded-tl:first-child {
725
+ border-top-left-radius: 0.25rem;
726
+ }
727
+ .last\:rounded-br:last-child {
728
+ border-bottom-right-radius: 0.25rem;
729
+ }
730
+ .last\:rounded-bl:last-child {
731
+ border-bottom-left-radius: 0.25rem;
732
+ }
733
+ .hover\:bg-\[\#f4f4f4\]:hover {
734
+ --tw-bg-opacity: 1;
735
+ background-color: rgb(244 244 244 / var(--tw-bg-opacity));
736
+ }
737
+ .hover\:bg-cosmos:hover {
738
+ --tw-bg-opacity: 1;
739
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
740
+ }
741
+ .hover\:bg-cyan-300:hover {
742
+ --tw-bg-opacity: 1;
743
+ background-color: rgb(103 232 249 / var(--tw-bg-opacity));
744
+ }
745
+ .hover\:bg-emerald-300:hover {
746
+ --tw-bg-opacity: 1;
747
+ background-color: rgb(110 231 183 / var(--tw-bg-opacity));
748
+ }
749
+ .hover\:bg-red-300:hover {
750
+ --tw-bg-opacity: 1;
751
+ background-color: rgb(252 165 165 / var(--tw-bg-opacity));
752
+ }
753
+ .hover\:\!bg-gray-200:hover {
754
+ --tw-bg-opacity: 1 !important;
755
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
756
+ }
757
+ .hover\:bg-\[\#F8F8F9\]:hover {
758
+ --tw-bg-opacity: 1;
759
+ background-color: rgb(248 248 249 / var(--tw-bg-opacity));
760
+ }
761
+ .hover\:bg-slate-200:hover {
762
+ --tw-bg-opacity: 1;
763
+ background-color: rgb(226 232 240 / var(--tw-bg-opacity));
764
+ }
765
+ .hover\:text-sky-500:hover {
766
+ --tw-text-opacity: 1;
767
+ color: rgb(14 165 233 / var(--tw-text-opacity));
768
+ }
769
+ .hover\:shadow:hover {
770
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
771
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
772
+ box-shadow:
773
+ var(--tw-ring-offset-shadow, 0 0 #0000),
774
+ var(--tw-ring-shadow, 0 0 #0000),
775
+ var(--tw-shadow);
776
+ }
777
+ .hover\:shadow-none:hover {
778
+ --tw-shadow: 0 0 #0000;
779
+ --tw-shadow-colored: 0 0 #0000;
780
+ box-shadow:
781
+ var(--tw-ring-offset-shadow, 0 0 #0000),
782
+ var(--tw-ring-shadow, 0 0 #0000),
783
+ var(--tw-shadow);
784
+ }
785
+ .hover\:outline-none:hover {
786
+ outline: 2px solid transparent;
787
+ outline-offset: 2px;
788
+ }
789
+ .focus\:bg-cosmos:focus {
790
+ --tw-bg-opacity: 1;
791
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
792
+ }
793
+ .focus\:bg-cyan-300:focus {
794
+ --tw-bg-opacity: 1;
795
+ background-color: rgb(103 232 249 / var(--tw-bg-opacity));
796
+ }
797
+ .focus\:bg-emerald-300:focus {
798
+ --tw-bg-opacity: 1;
799
+ background-color: rgb(110 231 183 / var(--tw-bg-opacity));
800
+ }
801
+ .focus\:bg-red-300:focus {
802
+ --tw-bg-opacity: 1;
803
+ background-color: rgb(252 165 165 / var(--tw-bg-opacity));
804
+ }
805
+ .focus\:\!bg-gray-200:focus {
806
+ --tw-bg-opacity: 1 !important;
807
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
808
+ }
809
+ .focus\:bg-slate-200:focus {
810
+ --tw-bg-opacity: 1;
811
+ background-color: rgb(226 232 240 / var(--tw-bg-opacity));
812
+ }
813
+ .focus\:text-sky-500:focus {
814
+ --tw-text-opacity: 1;
815
+ color: rgb(14 165 233 / var(--tw-text-opacity));
816
+ }
817
+ .focus\:shadow:focus {
818
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
819
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
820
+ box-shadow:
821
+ var(--tw-ring-offset-shadow, 0 0 #0000),
822
+ var(--tw-ring-shadow, 0 0 #0000),
823
+ var(--tw-shadow);
824
+ }
825
+ .focus\:shadow-none:focus {
826
+ --tw-shadow: 0 0 #0000;
827
+ --tw-shadow-colored: 0 0 #0000;
828
+ box-shadow:
829
+ var(--tw-ring-offset-shadow, 0 0 #0000),
830
+ var(--tw-ring-shadow, 0 0 #0000),
831
+ var(--tw-shadow);
832
+ }
833
+ .focus\:outline:focus {
834
+ outline-style: solid;
835
+ }
836
+ .focus\:outline-1:focus {
837
+ outline-width: 1px;
838
+ }
839
+ .focus\:outline-offset-2:focus {
840
+ outline-offset: 2px;
841
+ }
842
+ .focus\:outline-glacier:focus {
843
+ outline-color: #8fdecb;
844
+ }
845
+ .focus-visible\:outline:focus-visible {
846
+ outline-style: solid;
847
+ }
848
+ .focus-visible\:outline-1:focus-visible {
849
+ outline-width: 1px;
850
+ }
851
+ .focus-visible\:outline-offset-2:focus-visible {
852
+ outline-offset: 2px;
853
+ }
854
+ .focus-visible\:outline-offset-1:focus-visible {
855
+ outline-offset: 1px;
856
+ }
857
+ .focus-visible\:outline-glacier:focus-visible {
858
+ outline-color: #8fdecb;
859
+ }
860
+ .focus-visible\:outline-inherit:focus-visible {
861
+ outline-color: inherit;
862
+ }
863
+ .hover\:focus-visible\:outline-none:focus-visible:hover {
864
+ outline: 2px solid transparent;
865
+ outline-offset: 2px;
866
+ }
867
+ .active\:scale-95:active {
868
+ --tw-scale-x: .95;
869
+ --tw-scale-y: .95;
870
+ 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));
871
+ }
872
+ .active\:scale-100:active {
873
+ --tw-scale-x: 1;
874
+ --tw-scale-y: 1;
875
+ 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));
876
+ }
877
+ .disabled\:scale-100:disabled {
878
+ --tw-scale-x: 1;
879
+ --tw-scale-y: 1;
880
+ 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));
881
+ }
882
+ .disabled\:cursor-default:disabled {
883
+ cursor: default;
884
+ }
885
+ .disabled\:bg-neptune-light:disabled {
886
+ --tw-bg-opacity: 1;
887
+ background-color: rgb(212 246 247 / var(--tw-bg-opacity));
888
+ }
889
+ .disabled\:bg-\[\#FBFCFC\]:disabled {
890
+ --tw-bg-opacity: 1;
891
+ background-color: rgb(251 252 252 / var(--tw-bg-opacity));
892
+ }
893
+ .disabled\:bg-\[\#F7F8F9\]:disabled {
894
+ --tw-bg-opacity: 1;
895
+ background-color: rgb(247 248 249 / var(--tw-bg-opacity));
896
+ }
897
+ .disabled\:bg-error\/50:disabled {
898
+ background-color: rgb(221 19 103 / 0.5);
899
+ }
900
+ .disabled\:text-black-text\/50:disabled {
901
+ color: rgb(76 79 90 / 0.5);
902
+ }
903
+ .disabled\:text-white\/75:disabled {
904
+ color: rgb(255 255 255 / 0.75);
905
+ }
906
+ .disabled\:shadow-none:disabled {
907
+ --tw-shadow: 0 0 #0000;
908
+ --tw-shadow-colored: 0 0 #0000;
909
+ box-shadow:
910
+ var(--tw-ring-offset-shadow, 0 0 #0000),
911
+ var(--tw-ring-shadow, 0 0 #0000),
912
+ var(--tw-shadow);
913
+ }
914
+ .disabled\:drop-shadow-none:disabled {
915
+ --tw-drop-shadow: drop-shadow(0 0 #0000);
916
+ 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);
917
+ }
918
+ @media (min-width: 640px) {
919
+ .sm\:p-8 {
920
+ padding: 2rem;
921
+ }
922
+ }
923
+ .\[\&\.danger\]\:text-error.danger {
924
+ --tw-text-opacity: 1;
925
+ color: rgb(221 19 103 / var(--tw-text-opacity));
926
+ }