@soul-refiner/design-system 2.13.0-alpha.5 → 2.13.1

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 (77) hide show
  1. package/dist/components/card/person/person.js +1 -23
  2. package/dist/components/iconography/icon/icon.js +1 -1
  3. package/dist/components/input/responsive-text_area/responsive_text_area.js +0 -4
  4. package/dist/components/input/text_area/text_area.js +1 -9
  5. package/dist/components/media/audio-player/audio-player.js +1 -1
  6. package/dist/components/media/audio-playlist/playlist-item.js +1 -1
  7. package/dist/components/media/video-player/playlist-item.js +2 -2
  8. package/dist/components/media/video-player/video.js +1 -1
  9. package/dist/components/surfaces/comment/comment.js +5 -14
  10. package/dist/components/surfaces/discuss_post/discuss_post.js +6 -6
  11. package/dist/components/surfaces/post/post.js +4 -8
  12. package/dist/index.js +1 -1
  13. package/dist/src/components/card/person/person.d.ts +2 -4
  14. package/dist/src/components/feedback/index.d.ts +0 -2
  15. package/dist/src/components/iconography/icon/icon.d.ts +1 -2
  16. package/dist/src/components/media/index.d.ts +0 -1
  17. package/dist/src/components/surfaces/comment/comment.d.ts +1 -2
  18. package/dist/src/components/surfaces/post/post.d.ts +1 -5
  19. package/dist/src/styles/globals.css +1 -1
  20. package/package.json +2 -5
  21. package/dist/assets/custom_emoji_data.json.js +0 -1
  22. package/dist/components/custom/help_center/help_center-auth.js +0 -1
  23. package/dist/components/custom/help_center/help_center-customModal.js +0 -7
  24. package/dist/components/custom/help_center/help_center-defaultArticle.js +0 -60
  25. package/dist/components/custom/help_center/help_center-editable-content.js +0 -31
  26. package/dist/components/custom/help_center/help_center-mainPage.js +0 -32
  27. package/dist/components/custom/help_center/help_center-sidebar.js +0 -1
  28. package/dist/components/custom/help_center/help_center.js +0 -1
  29. package/dist/components/custom/help_center/help_center_articlle-list.js +0 -30
  30. package/dist/components/custom/help_center/help_center_categoryList.js +0 -55
  31. package/dist/components/custom/help_center/help_center_dataStore.js +0 -1
  32. package/dist/components/custom/help_center/help_center_layout.js +0 -64
  33. package/dist/components/custom/help_center/help_center_sub-category.js +0 -27
  34. package/dist/components/custom/help_center/types.js +0 -1
  35. package/dist/components/feedback/emojiPicker/constants.js +0 -1
  36. package/dist/components/feedback/emojiPicker/emoji-picker.js +0 -84
  37. package/dist/components/feedback/emojiPicker/emoji-reactions.js +0 -17
  38. package/dist/components/feedback/emojiPicker/sparkle-reaction.js +0 -5
  39. package/dist/components/feedback/emojiPicker/utils.js +0 -1
  40. package/dist/components/media/audio-player/progress-bar.js +0 -4
  41. package/dist/components/media/audio-playlist/playing_indicator.js +0 -28
  42. package/dist/emojis/64-2Q7F4PKG.png +0 -0
  43. package/dist/icons/time/hourglass.js +0 -1
  44. package/dist/src/components/custom/help_center/help_center-auth.d.ts +0 -7
  45. package/dist/src/components/custom/help_center/help_center-customModal.d.ts +0 -4
  46. package/dist/src/components/custom/help_center/help_center-defaultArticle.d.ts +0 -15
  47. package/dist/src/components/custom/help_center/help_center-editable-content.d.ts +0 -7
  48. package/dist/src/components/custom/help_center/help_center-mainPage.d.ts +0 -3
  49. package/dist/src/components/custom/help_center/help_center-sidebar.d.ts +0 -3
  50. package/dist/src/components/custom/help_center/help_center.d.ts +0 -13
  51. package/dist/src/components/custom/help_center/help_center_articlle-list.d.ts +0 -7
  52. package/dist/src/components/custom/help_center/help_center_categoryList.d.ts +0 -6
  53. package/dist/src/components/custom/help_center/help_center_dataStore.d.ts +0 -4
  54. package/dist/src/components/custom/help_center/help_center_layout.d.ts +0 -3
  55. package/dist/src/components/custom/help_center/help_center_seedData.d.ts +0 -2
  56. package/dist/src/components/custom/help_center/help_center_sub-category.d.ts +0 -7
  57. package/dist/src/components/custom/help_center/index.d.ts +0 -1
  58. package/dist/src/components/custom/help_center/types.d.ts +0 -124
  59. package/dist/src/components/feedback/emojiPicker/constants.d.ts +0 -17
  60. package/dist/src/components/feedback/emojiPicker/emoji-picker.d.ts +0 -8
  61. package/dist/src/components/feedback/emojiPicker/emoji-reactions.d.ts +0 -12
  62. package/dist/src/components/feedback/emojiPicker/grid-mapper.d.ts +0 -2
  63. package/dist/src/components/feedback/emojiPicker/index.d.ts +0 -3
  64. package/dist/src/components/feedback/emojiPicker/sparkle-reaction.d.ts +0 -4
  65. package/dist/src/components/feedback/emojiPicker/types.d.ts +0 -37
  66. package/dist/src/components/feedback/emojiPicker/utils.d.ts +0 -3
  67. package/dist/src/components/iconography/EmojiPicker/Reaction.d.ts +0 -9
  68. package/dist/src/components/iconography/EmojiPicker/emoji-picker.d.ts +0 -18
  69. package/dist/src/components/iconography/EmojiPicker/grid-mapper.d.ts +0 -2
  70. package/dist/src/components/media/audio-player/progress-bar.d.ts +0 -14
  71. package/dist/src/components/media/audio-playlist/playing_indicator.d.ts +0 -4
  72. package/dist/src/emoji/sparkle-emoji.d.ts +0 -15
  73. package/dist/src/emoji/sprite-emoji.d.ts +0 -9
  74. package/dist/src/hooks/useSparkle.d.ts +0 -12
  75. package/dist/src/icons/time/hourglass.d.ts +0 -3
  76. package/dist/src/utils/debounce.d.ts +0 -1
  77. package/dist/styles/output.css +0 -1911
@@ -1,1911 +0,0 @@
1
- /*
2
- ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
3
- */
4
-
5
- /*
6
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
- */
9
-
10
- *,
11
- ::before,
12
- ::after {
13
- box-sizing: border-box;
14
- /* 1 */
15
- border-width: 0;
16
- /* 2 */
17
- border-style: solid;
18
- /* 2 */
19
- border-color: #e5e7eb;
20
- /* 2 */
21
- }
22
-
23
- ::before,
24
- ::after {
25
- --tw-content: '';
26
- }
27
-
28
- /*
29
- 1. Use a consistent sensible line-height in all browsers.
30
- 2. Prevent adjustments of font size after orientation changes in iOS.
31
- 3. Use a more readable tab size.
32
- 4. Use the user's configured `sans` font-family by default.
33
- 5. Use the user's configured `sans` font-feature-settings by default.
34
- 6. Use the user's configured `sans` font-variation-settings by default.
35
- 7. Disable tap highlights on iOS
36
- */
37
-
38
- html,
39
- :host {
40
- line-height: 1.5;
41
- /* 1 */
42
- -webkit-text-size-adjust: 100%;
43
- /* 2 */
44
- -moz-tab-size: 4;
45
- /* 3 */
46
- -o-tab-size: 4;
47
- tab-size: 4;
48
- /* 3 */
49
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
50
- /* 4 */
51
- font-feature-settings: normal;
52
- /* 5 */
53
- font-variation-settings: normal;
54
- /* 6 */
55
- -webkit-tap-highlight-color: transparent;
56
- /* 7 */
57
- }
58
-
59
- /*
60
- 1. Remove the margin in all browsers.
61
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
62
- */
63
-
64
- body {
65
- margin: 0;
66
- /* 1 */
67
- line-height: inherit;
68
- /* 2 */
69
- }
70
-
71
- /*
72
- 1. Add the correct height in Firefox.
73
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
74
- 3. Ensure horizontal rules are visible by default.
75
- */
76
-
77
- hr {
78
- height: 0;
79
- /* 1 */
80
- color: inherit;
81
- /* 2 */
82
- border-top-width: 1px;
83
- /* 3 */
84
- }
85
-
86
- /*
87
- Add the correct text decoration in Chrome, Edge, and Safari.
88
- */
89
-
90
- abbr:where([title]) {
91
- -webkit-text-decoration: underline dotted;
92
- text-decoration: underline dotted;
93
- }
94
-
95
- /*
96
- Remove the default font size and weight for headings.
97
- */
98
-
99
- h1,
100
- h2,
101
- h3,
102
- h4,
103
- h5,
104
- h6 {
105
- font-size: inherit;
106
- font-weight: inherit;
107
- }
108
-
109
- /*
110
- Reset links to optimize for opt-in styling instead of opt-out.
111
- */
112
-
113
- a {
114
- color: inherit;
115
- text-decoration: inherit;
116
- }
117
-
118
- /*
119
- Add the correct font weight in Edge and Safari.
120
- */
121
-
122
- b,
123
- strong {
124
- font-weight: bolder;
125
- }
126
-
127
- /*
128
- 1. Use the user's configured `mono` font-family by default.
129
- 2. Use the user's configured `mono` font-feature-settings by default.
130
- 3. Use the user's configured `mono` font-variation-settings by default.
131
- 4. Correct the odd `em` font sizing in all browsers.
132
- */
133
-
134
- code,
135
- kbd,
136
- samp,
137
- pre {
138
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
139
- /* 1 */
140
- font-feature-settings: normal;
141
- /* 2 */
142
- font-variation-settings: normal;
143
- /* 3 */
144
- font-size: 1em;
145
- /* 4 */
146
- }
147
-
148
- /*
149
- Add the correct font size in all browsers.
150
- */
151
-
152
- small {
153
- font-size: 80%;
154
- }
155
-
156
- /*
157
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
158
- */
159
-
160
- sub,
161
- sup {
162
- font-size: 75%;
163
- line-height: 0;
164
- position: relative;
165
- vertical-align: baseline;
166
- }
167
-
168
- sub {
169
- bottom: -0.25em;
170
- }
171
-
172
- sup {
173
- top: -0.5em;
174
- }
175
-
176
- /*
177
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
178
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
179
- 3. Remove gaps between table borders by default.
180
- */
181
-
182
- table {
183
- text-indent: 0;
184
- /* 1 */
185
- border-color: inherit;
186
- /* 2 */
187
- border-collapse: collapse;
188
- /* 3 */
189
- }
190
-
191
- /*
192
- 1. Change the font styles in all browsers.
193
- 2. Remove the margin in Firefox and Safari.
194
- 3. Remove default padding in all browsers.
195
- */
196
-
197
- button,
198
- input,
199
- optgroup,
200
- select,
201
- textarea {
202
- font-family: inherit;
203
- /* 1 */
204
- font-feature-settings: inherit;
205
- /* 1 */
206
- font-variation-settings: inherit;
207
- /* 1 */
208
- font-size: 100%;
209
- /* 1 */
210
- font-weight: inherit;
211
- /* 1 */
212
- line-height: inherit;
213
- /* 1 */
214
- letter-spacing: inherit;
215
- /* 1 */
216
- color: inherit;
217
- /* 1 */
218
- margin: 0;
219
- /* 2 */
220
- padding: 0;
221
- /* 3 */
222
- }
223
-
224
- /*
225
- Remove the inheritance of text transform in Edge and Firefox.
226
- */
227
-
228
- button,
229
- select {
230
- text-transform: none;
231
- }
232
-
233
- /*
234
- 1. Correct the inability to style clickable types in iOS and Safari.
235
- 2. Remove default button styles.
236
- */
237
-
238
- button,
239
- input:where([type='button']),
240
- input:where([type='reset']),
241
- input:where([type='submit']) {
242
- -webkit-appearance: button;
243
- /* 1 */
244
- background-color: transparent;
245
- /* 2 */
246
- background-image: none;
247
- /* 2 */
248
- }
249
-
250
- /*
251
- Use the modern Firefox focus style for all focusable elements.
252
- */
253
-
254
- :-moz-focusring {
255
- outline: auto;
256
- }
257
-
258
- /*
259
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
260
- */
261
-
262
- :-moz-ui-invalid {
263
- box-shadow: none;
264
- }
265
-
266
- /*
267
- Add the correct vertical alignment in Chrome and Firefox.
268
- */
269
-
270
- progress {
271
- vertical-align: baseline;
272
- }
273
-
274
- /*
275
- Correct the cursor style of increment and decrement buttons in Safari.
276
- */
277
-
278
- ::-webkit-inner-spin-button,
279
- ::-webkit-outer-spin-button {
280
- height: auto;
281
- }
282
-
283
- /*
284
- 1. Correct the odd appearance in Chrome and Safari.
285
- 2. Correct the outline style in Safari.
286
- */
287
-
288
- [type='search'] {
289
- -webkit-appearance: textfield;
290
- /* 1 */
291
- outline-offset: -2px;
292
- /* 2 */
293
- }
294
-
295
- /*
296
- Remove the inner padding in Chrome and Safari on macOS.
297
- */
298
-
299
- ::-webkit-search-decoration {
300
- -webkit-appearance: none;
301
- }
302
-
303
- /*
304
- 1. Correct the inability to style clickable types in iOS and Safari.
305
- 2. Change font properties to `inherit` in Safari.
306
- */
307
-
308
- ::-webkit-file-upload-button {
309
- -webkit-appearance: button;
310
- /* 1 */
311
- font: inherit;
312
- /* 2 */
313
- }
314
-
315
- /*
316
- Add the correct display in Chrome and Safari.
317
- */
318
-
319
- summary {
320
- display: list-item;
321
- }
322
-
323
- /*
324
- Removes the default spacing and border for appropriate elements.
325
- */
326
-
327
- blockquote,
328
- dl,
329
- dd,
330
- h1,
331
- h2,
332
- h3,
333
- h4,
334
- h5,
335
- h6,
336
- hr,
337
- figure,
338
- p,
339
- pre {
340
- margin: 0;
341
- }
342
-
343
- fieldset {
344
- margin: 0;
345
- padding: 0;
346
- }
347
-
348
- legend {
349
- padding: 0;
350
- }
351
-
352
- ol,
353
- ul,
354
- menu {
355
- list-style: none;
356
- margin: 0;
357
- padding: 0;
358
- }
359
-
360
- /*
361
- Reset default styling for dialogs.
362
- */
363
-
364
- dialog {
365
- padding: 0;
366
- }
367
-
368
- /*
369
- Prevent resizing textareas horizontally by default.
370
- */
371
-
372
- textarea {
373
- resize: vertical;
374
- }
375
-
376
- /*
377
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
378
- 2. Set the default placeholder color to the user's configured gray 400 color.
379
- */
380
-
381
- input::-moz-placeholder, textarea::-moz-placeholder {
382
- opacity: 1;
383
- /* 1 */
384
- color: #9ca3af;
385
- /* 2 */
386
- }
387
-
388
- input::placeholder,
389
- textarea::placeholder {
390
- opacity: 1;
391
- /* 1 */
392
- color: #9ca3af;
393
- /* 2 */
394
- }
395
-
396
- /*
397
- Set the default cursor for buttons.
398
- */
399
-
400
- button,
401
- [role="button"] {
402
- cursor: pointer;
403
- }
404
-
405
- /*
406
- Make sure disabled buttons don't get the pointer cursor.
407
- */
408
-
409
- :disabled {
410
- cursor: default;
411
- }
412
-
413
- /*
414
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
415
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
416
- This can trigger a poorly considered lint error in some tools but is included by design.
417
- */
418
-
419
- img,
420
- svg,
421
- video,
422
- canvas,
423
- audio,
424
- iframe,
425
- embed,
426
- object {
427
- display: block;
428
- /* 1 */
429
- vertical-align: middle;
430
- /* 2 */
431
- }
432
-
433
- /*
434
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
435
- */
436
-
437
- img,
438
- video {
439
- max-width: 100%;
440
- height: auto;
441
- }
442
-
443
- /* Make elements with the HTML hidden attribute stay hidden by default */
444
-
445
- [hidden] {
446
- display: none;
447
- }
448
-
449
- :root {
450
- /* ============ TAILWIND ============= */
451
- --background: 0 0% 100%;
452
- --foreground: 222.2 84% 4.9%;
453
- --card: 0 0% 100%;
454
- --card-foreground: 222.2 84% 4.9%;
455
- --popover: 0 0% 100%;
456
- --popover-foreground: 222.2 84% 4.9%;
457
- --primary: 222.2 47.4% 11.2%;
458
- --primary-foreground: 210 40% 98%;
459
- --secondary: 210 40% 96.1%;
460
- --secondary-foreground: 222.2 47.4% 11.2%;
461
- --muted: 210 40% 96.1%;
462
- --muted-foreground: 215.4 16.3% 46.9%;
463
- --accent: 210 40% 96.1%;
464
- --accent-foreground: 222.2 47.4% 11.2%;
465
- --destructive: 0 84.2% 60.2%;
466
- --destructive-foreground: 210 40% 98%;
467
- --border: 214.3 31.8% 91.4%;
468
- --input: 214.3 31.8% 91.4%;
469
- --ring: 222.2 84% 4.9%;
470
- --radius: 0.5rem;
471
- /* ============ FONT ============= */
472
- --font-inter: Inter;
473
- /* ============ BACKGROUND COLORS ============= */
474
- --color-page-bg: #f8fafc;
475
- --color-white: #ffffff;
476
- /* ============= PRIMARY COLORS ============== */
477
- --color-primary-blue-0: #003f73;
478
- --color-primary-blue-1: #005aa6;
479
- --color-primary-blue-2: #0076d9;
480
- --color-primary-blue-3: #d4e7fa;
481
- --color-primary-blue-4: #e9f2fb;
482
- /* =============== GREY COLORS ================ */
483
- --color-grey-0: #080809;
484
- --color-grey-1: #17191b;
485
- --color-grey-2: #313438;
486
- --color-grey-3: #4a4f55;
487
- --color-grey-4: #636971;
488
- --color-grey-5: #7c838d;
489
- --color-grey-6: #989da4;
490
- --color-grey-7: #b3b7bc;
491
- --color-grey-8: #d0d2d6;
492
- --color-grey-9: #eaebed;
493
- --color-grey-10: #f8f9f9;
494
- /* =============== RED COLORS ================ */
495
- --color-red-0: #491410;
496
- --color-red-1: #5b1914;
497
- --color-red-2: #83241d;
498
- --color-red-3: #aa2f25;
499
- --color-red-4: #cf3a2e;
500
- --color-red-5: #f34638;
501
- --color-red-6: #f66e63;
502
- --color-red-7: #f8948c;
503
- --color-red-8: #fbbdb8;
504
- --color-red-9: #fee3e1;
505
- --color-red-10: #fff8f7;
506
- /* ============== GREEN COLORS =============== */
507
- --color-green-0: #113a1c;
508
- --color-green-1: #154923;
509
- --color-green-2: #1f6933;
510
- --color-green-3: #288641;
511
- --color-green-4: #31a450;
512
- --color-green-5: #3cc260;
513
- --color-green-6: #66cf82;
514
- --color-green-7: #8edca3;
515
- --color-green-8: #b8e9c6;
516
- --color-green-9: #e0f6e6;
517
- --color-green-10: #f7fdf9;
518
- /* =============== BLUE COLORS ================ */
519
- --color-blue-0: #0a2c48;
520
- --color-blue-1: #0c375b;
521
- --color-blue-2: #114f81;
522
- --color-blue-3: #1665a6;
523
- --color-blue-4: #1b7bcb;
524
- --color-blue-5: #2393ef;
525
- --color-blue-6: #51a9f2;
526
- --color-blue-7: #80c1f6;
527
- --color-blue-8: #b1d9f9;
528
- --color-blue-9: #ddeffc;
529
- --color-blue-10: #f6fbfe;
530
- /* ============ TURQUOISE COLORS ============= */
531
- --color-turquoise-0: #033630;
532
- --color-turquoise-1: #0b4740;
533
- --color-turquoise-2: #1a685f;
534
- --color-turquoise-3: #29877e;
535
- --color-turquoise-4: #38a89c;
536
- --color-turquoise-5: #49c7ba;
537
- --color-turquoise-6: #6fd3c8;
538
- --color-turquoise-7: #95ded7;
539
- --color-turquoise-8: #baeae5;
540
- --color-turquoise-9: #e1f6f3;
541
- --color-turquoise-10: #f5fcfb;
542
- /* ============== PURPLE COLORS =============== */
543
- --color-purple-0: #31153a;
544
- --color-purple-1: #3d1a49;
545
- --color-purple-2: #572567;
546
- --color-purple-3: #703086;
547
- --color-purple-4: #8a3ca5;
548
- --color-purple-5: #a349c2;
549
- --color-purple-6: #b76fcf;
550
- --color-purple-7: #ca96dc;
551
- --color-purple-8: #debeea;
552
- --color-purple-9: #f0e3f6;
553
- --color-purple-10: #fbf8fd;
554
- /* ============== YELLOW COLORS =============== */
555
- --color-yellow-0: #4b3b02;
556
- --color-yellow-1: #5e4a02;
557
- --color-yellow-2: #876b04;
558
- --color-yellow-3: #ad8905;
559
- --color-yellow-4: #d5a806;
560
- --color-yellow-5: #fac70a;
561
- --color-yellow-6: #fbd33d;
562
- --color-yellow-7: #fcde71;
563
- --color-yellow-8: #fdeba9;
564
- --color-yellow-9: #fef6d8;
565
- --color-yellow-10: #fffdf5;
566
- /* ============== ORANGE COLORS =============== */
567
- --color-orange-0: #4a2b03;
568
- --color-orange-1: #5d3604;
569
- --color-orange-2: #854d06;
570
- --color-orange-3: #ac6307;
571
- --color-orange-4: #d27909;
572
- --color-orange-5: #f7900f;
573
- --color-orange-6: #f9a742;
574
- --color-orange-7: #fbbf74;
575
- --color-orange-8: #fcd6a8;
576
- --color-orange-9: #feedd9;
577
- --color-orange-10: #fffaf5;
578
- /* ============= COLORIFY COLORS ============== */
579
- --color-hue-pink-1: #a5199d;
580
- --color-hue-pink-2: #fed6ff;
581
- --color-hue-pink-3: #fbe7f9;
582
- --color-hue-purple-1: #584fd6;
583
- --color-hue-purple-2: #c4c1f0;
584
- --color-hue-purple-3: #f3effb;
585
- --color-hue-ocean-1: #226f91;
586
- --color-hue-ocean-2: #c1e2f0;
587
- --color-hue-ocean-3: #eff7fb;
588
- --color-hue-mint-1: #078f81;
589
- --color-hue-mint-2: #a9e4de;
590
- --color-hue-mint-3: #d8f3f0;
591
- --color-hue-blue-1: #0b5cd7;
592
- --color-hue-blue-2: #b6cff3;
593
- --color-hue-blue-3: #ecf2fc;
594
- --color-hue-orange-1: #e96d00;
595
- --color-hue-orange-2: #ffd5bd;
596
- --color-hue-orange-3: #fff2e5;
597
- /* ============= SPECIAL COLORS ============== */
598
- --color-special-yellow-1: #efb520;
599
- --color-special-yellow-2: #fff3c7;
600
- --color-special-orange-1: #ff5722;
601
- --color-special-orange-2: #ffead2;
602
- --color-special-red-1: #f72f4d;
603
- --color-special-red-2: #feded5;
604
- --color-special-pink-1: #fb19b4;
605
- --color-special-pink-2: #fed3e1;
606
- --color-special-purple-1: #7a5bf5;
607
- --color-special-purple-2: #ece1fe;
608
- --color-special-blue-1: #6c75f7;
609
- --color-special-blue-2: #dfeaff;
610
- --color-special-turquoise-1: #24a3d0;
611
- --color-special-turquoise-2: #cff9f2;
612
- --color-special-green-1: #1ea385;
613
- --color-special-green-2: #d4fae4;
614
- --color-special-grape-1: #2fa52d;
615
- --color-special-grape-2: #e3fad6;
616
- /* ============= GRADIENT COLORS ============== */
617
- --color-gradient-blue-1: #1d62f0;
618
- --color-gradient-blue-2: #1ad5fd;
619
- --color-gradient-teal-1: #5ac8fb;
620
- --color-gradient-teal-2: #52edc7;
621
- --color-gradient-green-1: #0cd318;
622
- --color-gradient-green-2: #87fc70;
623
- --color-gradient-spring-green-1: #09b3a1;
624
- --color-gradient-spring-green-2: #3ac15e;
625
- --color-gradient-yellow-1: #ffcd02;
626
- --color-gradient-yellow-2: #ffdb4c;
627
- --color-gradient-orange-1: #ff5e3a;
628
- --color-gradient-orange-2: #ff9500;
629
- --color-gradient-red-1: #ff2a68;
630
- --color-gradient-red-2: #ff5e3a;
631
- --color-gradient-pink-1: #c643fc;
632
- --color-gradient-pink-2: #ef4db6;
633
- --color-gradient-purple-1: #ae33e8;
634
- --color-gradient-purple-2: #5e44ff;
635
- /* ================ GRADIENTS ================= */
636
- --gradient-background-1: radial-gradient(
637
- 50.49% 55.14% at 5.76% 3.88%,
638
- #d9062c 11.51%,
639
- rgba(186, 24, 175, 0) 100%,
640
- rgba(255, 0, 0, 0) 100%
641
- ),
642
- radial-gradient(
643
- 50.75% 55.24% at 93.3% -5.24%,
644
- #ff7a00 6.42%,
645
- rgba(186, 24, 175, 0) 100%,
646
- rgba(255, 122, 0, 0) 100%
647
- ),
648
- linear-gradient(180deg, #b80cbf 0%, #2d21b6 100%);
649
- --gradient-background-2: radial-gradient(
650
- 47.55% 121.02% at 24.15% 120.55%,
651
- #ff7a00 0%,
652
- rgba(186, 24, 175, 0) 100%
653
- ),
654
- radial-gradient(
655
- 107.04% 116.84% at 120.44% 68.19%,
656
- #ba004b 27.09%,
657
- #ba06c8 47.64%,
658
- #0026b7 86.58%
659
- );
660
- --gradient-light: radial-gradient(
661
- 39.84% 64.62% at 3.52% 96.87%,
662
- #e7f1fd 0%,
663
- rgba(232, 241, 254, 0) 100%
664
- ),
665
- radial-gradient(
666
- 35.14% 65.68% at 98.89% 0%,
667
- #ece1ef 0%,
668
- rgba(236, 226, 240, 0) 100%
669
- ),
670
- linear-gradient(109.97deg, #eef9f9 4.72%, #ecf1fd 100.82%);
671
- --gradient-dark-grey: linear-gradient(360deg, #2b2b2b 0%, #4a4a4a 100%);
672
- --gradient-grey: linear-gradient(360deg, #898c90 0%, #dbddde 100%);
673
- --gradient-light-grey: linear-gradient(360deg, #d7d7d7 0%, #f7f7f7 100%);
674
- /* ================== SIZES =================== */
675
- --extra-small: 4px;
676
- --small: 8px;
677
- --medium: 16px;
678
- --medium-large: 20px;
679
- --large: 24px;
680
- --extra-large: 40px;
681
- --full: 80px;
682
- /* ================ ELEVATION ================= */
683
- --elevation-1: 0px 3px 3px rgba(0, 0, 0, 0.04);
684
- --elevation-2: 0px 4px 8px rgba(0, 0, 0, 0.1);
685
- --elevation-3: 0px 6px 10px rgba(0, 0, 0, 0.15);
686
- --elevation-4: 0px 4px 10px rgba(0, 0, 0, 0.06);
687
- --elevation-5: inset 0px 2px 2px rgba(0, 0, 0, 0.12);
688
- --elevation-6: inset 0px 4px 4px rgba(0, 0, 0, 0.03);
689
- --elevation-7: 0px 0px 15px rgba(0, 0, 0, 0.05);
690
- --elevation-8: 0px 1px 30px rgba(0, 0, 0, 0.06);
691
- --elevation-9: 0px 15px 50px rgba(0, 0, 0, 0.15);
692
- /* ================= SPACING ================== */
693
- --spacing-0: 4px;
694
- --spacing-1: 8px;
695
- --spacing-2: 16px;
696
- --spacing-3: 24px;
697
- --spacing-4: 32px;
698
- --spacing-5: 40px;
699
- --spacing-6: 48px;
700
- --spacing-7: 56px;
701
- --spacing-8: 64px;
702
- --spacing-9: 72px;
703
- --spacing-10: 80px;
704
- --spacing-11: 88px;
705
- --spacing-12: 96px;
706
- --spacing-13: 104px;
707
- --spacing-14: 112px;
708
- --spacing-15: 120px;
709
- }
710
-
711
- * {
712
- border-color: hsl(var(--border));
713
- }
714
-
715
- body {
716
- background-color: hsl(var(--background));
717
- color: hsl(var(--foreground));
718
- }
719
-
720
- *, ::before, ::after {
721
- --tw-border-spacing-x: 0;
722
- --tw-border-spacing-y: 0;
723
- --tw-translate-x: 0;
724
- --tw-translate-y: 0;
725
- --tw-rotate: 0;
726
- --tw-skew-x: 0;
727
- --tw-skew-y: 0;
728
- --tw-scale-x: 1;
729
- --tw-scale-y: 1;
730
- --tw-pan-x: ;
731
- --tw-pan-y: ;
732
- --tw-pinch-zoom: ;
733
- --tw-scroll-snap-strictness: proximity;
734
- --tw-gradient-from-position: ;
735
- --tw-gradient-via-position: ;
736
- --tw-gradient-to-position: ;
737
- --tw-ordinal: ;
738
- --tw-slashed-zero: ;
739
- --tw-numeric-figure: ;
740
- --tw-numeric-spacing: ;
741
- --tw-numeric-fraction: ;
742
- --tw-ring-inset: ;
743
- --tw-ring-offset-width: 0px;
744
- --tw-ring-offset-color: #fff;
745
- --tw-ring-color: rgb(59 130 246 / 0.5);
746
- --tw-ring-offset-shadow: 0 0 #0000;
747
- --tw-ring-shadow: 0 0 #0000;
748
- --tw-shadow: 0 0 #0000;
749
- --tw-shadow-colored: 0 0 #0000;
750
- --tw-blur: ;
751
- --tw-brightness: ;
752
- --tw-contrast: ;
753
- --tw-grayscale: ;
754
- --tw-hue-rotate: ;
755
- --tw-invert: ;
756
- --tw-saturate: ;
757
- --tw-sepia: ;
758
- --tw-drop-shadow: ;
759
- --tw-backdrop-blur: ;
760
- --tw-backdrop-brightness: ;
761
- --tw-backdrop-contrast: ;
762
- --tw-backdrop-grayscale: ;
763
- --tw-backdrop-hue-rotate: ;
764
- --tw-backdrop-invert: ;
765
- --tw-backdrop-opacity: ;
766
- --tw-backdrop-saturate: ;
767
- --tw-backdrop-sepia: ;
768
- --tw-contain-size: ;
769
- --tw-contain-layout: ;
770
- --tw-contain-paint: ;
771
- --tw-contain-style: ;
772
- }
773
-
774
- ::backdrop {
775
- --tw-border-spacing-x: 0;
776
- --tw-border-spacing-y: 0;
777
- --tw-translate-x: 0;
778
- --tw-translate-y: 0;
779
- --tw-rotate: 0;
780
- --tw-skew-x: 0;
781
- --tw-skew-y: 0;
782
- --tw-scale-x: 1;
783
- --tw-scale-y: 1;
784
- --tw-pan-x: ;
785
- --tw-pan-y: ;
786
- --tw-pinch-zoom: ;
787
- --tw-scroll-snap-strictness: proximity;
788
- --tw-gradient-from-position: ;
789
- --tw-gradient-via-position: ;
790
- --tw-gradient-to-position: ;
791
- --tw-ordinal: ;
792
- --tw-slashed-zero: ;
793
- --tw-numeric-figure: ;
794
- --tw-numeric-spacing: ;
795
- --tw-numeric-fraction: ;
796
- --tw-ring-inset: ;
797
- --tw-ring-offset-width: 0px;
798
- --tw-ring-offset-color: #fff;
799
- --tw-ring-color: rgb(59 130 246 / 0.5);
800
- --tw-ring-offset-shadow: 0 0 #0000;
801
- --tw-ring-shadow: 0 0 #0000;
802
- --tw-shadow: 0 0 #0000;
803
- --tw-shadow-colored: 0 0 #0000;
804
- --tw-blur: ;
805
- --tw-brightness: ;
806
- --tw-contrast: ;
807
- --tw-grayscale: ;
808
- --tw-hue-rotate: ;
809
- --tw-invert: ;
810
- --tw-saturate: ;
811
- --tw-sepia: ;
812
- --tw-drop-shadow: ;
813
- --tw-backdrop-blur: ;
814
- --tw-backdrop-brightness: ;
815
- --tw-backdrop-contrast: ;
816
- --tw-backdrop-grayscale: ;
817
- --tw-backdrop-hue-rotate: ;
818
- --tw-backdrop-invert: ;
819
- --tw-backdrop-opacity: ;
820
- --tw-backdrop-saturate: ;
821
- --tw-backdrop-sepia: ;
822
- --tw-contain-size: ;
823
- --tw-contain-layout: ;
824
- --tw-contain-paint: ;
825
- --tw-contain-style: ;
826
- }
827
-
828
- .visible {
829
- visibility: visible;
830
- }
831
-
832
- .collapse {
833
- visibility: collapse;
834
- }
835
-
836
- .fixed {
837
- position: fixed;
838
- }
839
-
840
- .absolute {
841
- position: absolute;
842
- }
843
-
844
- .relative {
845
- position: relative;
846
- }
847
-
848
- .sticky {
849
- position: sticky;
850
- }
851
-
852
- .-left-3 {
853
- left: -0.75rem;
854
- }
855
-
856
- .-right-3 {
857
- right: -0.75rem;
858
- }
859
-
860
- .-top-3 {
861
- top: -0.75rem;
862
- }
863
-
864
- .bottom-\[-5px\] {
865
- bottom: -5px;
866
- }
867
-
868
- .left-2 {
869
- left: 0.5rem;
870
- }
871
-
872
- .left-\[-1\.5px\] {
873
- left: -1.5px;
874
- }
875
-
876
- .left-\[-5px\] {
877
- left: -5px;
878
- }
879
-
880
- .right-2 {
881
- right: 0.5rem;
882
- }
883
-
884
- .right-\[-1\.5px\] {
885
- right: -1.5px;
886
- }
887
-
888
- .right-\[-5px\] {
889
- right: -5px;
890
- }
891
-
892
- .top-0 {
893
- top: 0px;
894
- }
895
-
896
- .z-20 {
897
- z-index: 20;
898
- }
899
-
900
- .z-30 {
901
- z-index: 30;
902
- }
903
-
904
- .z-40 {
905
- z-index: 40;
906
- }
907
-
908
- .z-50 {
909
- z-index: 50;
910
- }
911
-
912
- .m-0 {
913
- margin: 0px;
914
- }
915
-
916
- .-mx-1 {
917
- margin-left: -0.25rem;
918
- margin-right: -0.25rem;
919
- }
920
-
921
- .mx-auto {
922
- margin-left: auto;
923
- margin-right: auto;
924
- }
925
-
926
- .my-1 {
927
- margin-top: 0.25rem;
928
- margin-bottom: 0.25rem;
929
- }
930
-
931
- .my-4 {
932
- margin-top: 1rem;
933
- margin-bottom: 1rem;
934
- }
935
-
936
- .-ml-3 {
937
- margin-left: -0.75rem;
938
- }
939
-
940
- .-mr-3 {
941
- margin-right: -0.75rem;
942
- }
943
-
944
- .ml-auto {
945
- margin-left: auto;
946
- }
947
-
948
- .ml-px {
949
- margin-left: 1px;
950
- }
951
-
952
- .mr-0 {
953
- margin-right: 0px;
954
- }
955
-
956
- .mr-2 {
957
- margin-right: 0.5rem;
958
- }
959
-
960
- .mr-auto {
961
- margin-right: auto;
962
- }
963
-
964
- .box-border {
965
- box-sizing: border-box;
966
- }
967
-
968
- .box-content {
969
- box-sizing: content-box;
970
- }
971
-
972
- .block {
973
- display: block;
974
- }
975
-
976
- .\!inline {
977
- display: inline !important;
978
- }
979
-
980
- .inline {
981
- display: inline;
982
- }
983
-
984
- .flex {
985
- display: flex;
986
- }
987
-
988
- .inline-flex {
989
- display: inline-flex;
990
- }
991
-
992
- .table {
993
- display: table;
994
- }
995
-
996
- .grid {
997
- display: grid;
998
- }
999
-
1000
- .hidden {
1001
- display: none;
1002
- }
1003
-
1004
- .h-10 {
1005
- height: 2.5rem;
1006
- }
1007
-
1008
- .h-11 {
1009
- height: 2.75rem;
1010
- }
1011
-
1012
- .h-3 {
1013
- height: 0.75rem;
1014
- }
1015
-
1016
- .h-3\.5 {
1017
- height: 0.875rem;
1018
- }
1019
-
1020
- .h-4 {
1021
- height: 1rem;
1022
- }
1023
-
1024
- .h-8 {
1025
- height: 2rem;
1026
- }
1027
-
1028
- .h-9 {
1029
- height: 2.25rem;
1030
- }
1031
-
1032
- .h-\[10px\] {
1033
- height: 10px;
1034
- }
1035
-
1036
- .h-\[1px\] {
1037
- height: 1px;
1038
- }
1039
-
1040
- .h-\[calc\(100\%_\+_12px\)\] {
1041
- height: calc(100% + 12px);
1042
- }
1043
-
1044
- .h-auto {
1045
- height: auto;
1046
- }
1047
-
1048
- .h-full {
1049
- height: 100%;
1050
- }
1051
-
1052
- .h-px {
1053
- height: 1px;
1054
- }
1055
-
1056
- .w-1 {
1057
- width: 0.25rem;
1058
- }
1059
-
1060
- .w-10 {
1061
- width: 2.5rem;
1062
- }
1063
-
1064
- .w-3 {
1065
- width: 0.75rem;
1066
- }
1067
-
1068
- .w-3\.5 {
1069
- width: 0.875rem;
1070
- }
1071
-
1072
- .w-4 {
1073
- width: 1rem;
1074
- }
1075
-
1076
- .w-6 {
1077
- width: 1.5rem;
1078
- }
1079
-
1080
- .w-72 {
1081
- width: 18rem;
1082
- }
1083
-
1084
- .w-9 {
1085
- width: 2.25rem;
1086
- }
1087
-
1088
- .w-\[10px\] {
1089
- width: 10px;
1090
- }
1091
-
1092
- .w-\[1px\] {
1093
- width: 1px;
1094
- }
1095
-
1096
- .w-\[220px\] {
1097
- width: 220px;
1098
- }
1099
-
1100
- .w-\[330px\] {
1101
- width: 330px;
1102
- }
1103
-
1104
- .w-auto {
1105
- width: auto;
1106
- }
1107
-
1108
- .w-full {
1109
- width: 100%;
1110
- }
1111
-
1112
- .min-w-\[220px\] {
1113
- min-width: 220px;
1114
- }
1115
-
1116
- .min-w-\[8rem\] {
1117
- min-width: 8rem;
1118
- }
1119
-
1120
- .min-w-full {
1121
- min-width: 100%;
1122
- }
1123
-
1124
- .max-w-full {
1125
- max-width: 100%;
1126
- }
1127
-
1128
- .flex-shrink {
1129
- flex-shrink: 1;
1130
- }
1131
-
1132
- .shrink-0 {
1133
- flex-shrink: 0;
1134
- }
1135
-
1136
- .grow {
1137
- flex-grow: 1;
1138
- }
1139
-
1140
- .table-fixed {
1141
- table-layout: fixed;
1142
- }
1143
-
1144
- .border-collapse {
1145
- border-collapse: collapse;
1146
- }
1147
-
1148
- .transform {
1149
- 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));
1150
- }
1151
-
1152
- .cursor-col-resize {
1153
- cursor: col-resize;
1154
- }
1155
-
1156
- .cursor-default {
1157
- cursor: default;
1158
- }
1159
-
1160
- .cursor-pointer {
1161
- cursor: pointer;
1162
- }
1163
-
1164
- .cursor-row-resize {
1165
- cursor: row-resize;
1166
- }
1167
-
1168
- .select-none {
1169
- -webkit-user-select: none;
1170
- -moz-user-select: none;
1171
- user-select: none;
1172
- }
1173
-
1174
- .resize {
1175
- resize: both;
1176
- }
1177
-
1178
- .flex-col {
1179
- flex-direction: column;
1180
- }
1181
-
1182
- .flex-wrap {
1183
- flex-wrap: wrap;
1184
- }
1185
-
1186
- .items-end {
1187
- align-items: flex-end;
1188
- }
1189
-
1190
- .items-center {
1191
- align-items: center;
1192
- }
1193
-
1194
- .justify-start {
1195
- justify-content: flex-start;
1196
- }
1197
-
1198
- .justify-center {
1199
- justify-content: center;
1200
- }
1201
-
1202
- .gap-1 {
1203
- gap: 0.25rem;
1204
- }
1205
-
1206
- .overflow-hidden {
1207
- overflow: hidden;
1208
- }
1209
-
1210
- .overflow-visible {
1211
- overflow: visible;
1212
- }
1213
-
1214
- .whitespace-nowrap {
1215
- white-space: nowrap;
1216
- }
1217
-
1218
- .rounded-md {
1219
- border-radius: calc(var(--radius) - 2px);
1220
- }
1221
-
1222
- .rounded-sm {
1223
- border-radius: calc(var(--radius) - 4px);
1224
- }
1225
-
1226
- .border {
1227
- border-width: 1px;
1228
- }
1229
-
1230
- .border-none {
1231
- border-style: none;
1232
- }
1233
-
1234
- .border-input {
1235
- border-color: hsl(var(--input));
1236
- }
1237
-
1238
- .bg-\[--cellBackground\] {
1239
- background-color: var(--cellBackground);
1240
- }
1241
-
1242
- .bg-background {
1243
- background-color: hsl(var(--background));
1244
- }
1245
-
1246
- .bg-border {
1247
- background-color: hsl(var(--border));
1248
- }
1249
-
1250
- .bg-destructive {
1251
- background-color: hsl(var(--destructive));
1252
- }
1253
-
1254
- .bg-muted {
1255
- background-color: hsl(var(--muted));
1256
- }
1257
-
1258
- .bg-popover {
1259
- background-color: hsl(var(--popover));
1260
- }
1261
-
1262
- .bg-primary {
1263
- background-color: hsl(var(--primary));
1264
- }
1265
-
1266
- .bg-ring {
1267
- background-color: hsl(var(--ring));
1268
- }
1269
-
1270
- .bg-secondary {
1271
- background-color: hsl(var(--secondary));
1272
- }
1273
-
1274
- .object-cover {
1275
- -o-object-fit: cover;
1276
- object-fit: cover;
1277
- }
1278
-
1279
- .p-0 {
1280
- padding: 0px;
1281
- }
1282
-
1283
- .p-1 {
1284
- padding: 0.25rem;
1285
- }
1286
-
1287
- .p-4 {
1288
- padding: 1rem;
1289
- }
1290
-
1291
- .px-0 {
1292
- padding-left: 0px;
1293
- padding-right: 0px;
1294
- }
1295
-
1296
- .px-2 {
1297
- padding-left: 0.5rem;
1298
- padding-right: 0.5rem;
1299
- }
1300
-
1301
- .px-3 {
1302
- padding-left: 0.75rem;
1303
- padding-right: 0.75rem;
1304
- }
1305
-
1306
- .px-4 {
1307
- padding-left: 1rem;
1308
- padding-right: 1rem;
1309
- }
1310
-
1311
- .px-8 {
1312
- padding-left: 2rem;
1313
- padding-right: 2rem;
1314
- }
1315
-
1316
- .py-1 {
1317
- padding-top: 0.25rem;
1318
- padding-bottom: 0.25rem;
1319
- }
1320
-
1321
- .py-1\.5 {
1322
- padding-top: 0.375rem;
1323
- padding-bottom: 0.375rem;
1324
- }
1325
-
1326
- .py-2 {
1327
- padding-top: 0.5rem;
1328
- padding-bottom: 0.5rem;
1329
- }
1330
-
1331
- .py-2\.5 {
1332
- padding-top: 0.625rem;
1333
- padding-bottom: 0.625rem;
1334
- }
1335
-
1336
- .pl-3 {
1337
- padding-left: 0.75rem;
1338
- }
1339
-
1340
- .pl-8 {
1341
- padding-left: 2rem;
1342
- }
1343
-
1344
- .pr-2 {
1345
- padding-right: 0.5rem;
1346
- }
1347
-
1348
- .pr-3 {
1349
- padding-right: 0.75rem;
1350
- }
1351
-
1352
- .text-left {
1353
- text-align: left;
1354
- }
1355
-
1356
- .text-base {
1357
- font-size: 1rem;
1358
- line-height: 1.5rem;
1359
- }
1360
-
1361
- .text-sm {
1362
- font-size: 0.875rem;
1363
- line-height: 1.25rem;
1364
- }
1365
-
1366
- .text-xs {
1367
- font-size: 0.75rem;
1368
- line-height: 1rem;
1369
- }
1370
-
1371
- .font-medium {
1372
- font-weight: 500;
1373
- }
1374
-
1375
- .font-semibold {
1376
- font-weight: 600;
1377
- }
1378
-
1379
- .italic {
1380
- font-style: italic;
1381
- }
1382
-
1383
- .tracking-widest {
1384
- letter-spacing: 0.1em;
1385
- }
1386
-
1387
- .text-destructive-foreground {
1388
- color: hsl(var(--destructive-foreground));
1389
- }
1390
-
1391
- .text-muted-foreground {
1392
- color: hsl(var(--muted-foreground));
1393
- }
1394
-
1395
- .text-popover-foreground {
1396
- color: hsl(var(--popover-foreground));
1397
- }
1398
-
1399
- .text-primary {
1400
- color: hsl(var(--primary));
1401
- }
1402
-
1403
- .text-primary-foreground {
1404
- color: hsl(var(--primary-foreground));
1405
- }
1406
-
1407
- .text-secondary-foreground {
1408
- color: hsl(var(--secondary-foreground));
1409
- }
1410
-
1411
- .underline {
1412
- text-decoration-line: underline;
1413
- }
1414
-
1415
- .line-through {
1416
- text-decoration-line: line-through;
1417
- }
1418
-
1419
- .underline-offset-4 {
1420
- text-underline-offset: 4px;
1421
- }
1422
-
1423
- .opacity-60 {
1424
- opacity: 0.6;
1425
- }
1426
-
1427
- .shadow-lg {
1428
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1429
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1430
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1431
- }
1432
-
1433
- .shadow-md {
1434
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1435
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1436
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1437
- }
1438
-
1439
- .outline-none {
1440
- outline: 2px solid transparent;
1441
- outline-offset: 2px;
1442
- }
1443
-
1444
- .outline {
1445
- outline-style: solid;
1446
- }
1447
-
1448
- .ring-2 {
1449
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1450
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1451
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1452
- }
1453
-
1454
- .ring-ring {
1455
- --tw-ring-color: hsl(var(--ring));
1456
- }
1457
-
1458
- .ring-offset-2 {
1459
- --tw-ring-offset-width: 2px;
1460
- }
1461
-
1462
- .ring-offset-background {
1463
- --tw-ring-offset-color: hsl(var(--background));
1464
- }
1465
-
1466
- .blur {
1467
- --tw-blur: blur(8px);
1468
- 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);
1469
- }
1470
-
1471
- .drop-shadow {
1472
- --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
1473
- 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);
1474
- }
1475
-
1476
- .filter {
1477
- 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);
1478
- }
1479
-
1480
- .transition {
1481
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1482
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1483
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1484
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1485
- transition-duration: 150ms;
1486
- }
1487
-
1488
- .transition-colors {
1489
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1490
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1491
- transition-duration: 150ms;
1492
- }
1493
-
1494
- .ease-in-out {
1495
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1496
- }
1497
-
1498
- .ease-out {
1499
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1500
- }
1501
-
1502
- @keyframes enter {
1503
- from {
1504
- opacity: var(--tw-enter-opacity, 1);
1505
- 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));
1506
- }
1507
- }
1508
-
1509
- @keyframes exit {
1510
- to {
1511
- opacity: var(--tw-exit-opacity, 1);
1512
- 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));
1513
- }
1514
- }
1515
-
1516
- .ease-in-out {
1517
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1518
- }
1519
-
1520
- .ease-out {
1521
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
1522
- }
1523
-
1524
- .emoji-picker {
1525
- max-height: 320px;
1526
- width: 300px;
1527
- overflow-y: auto;
1528
- background: white;
1529
- border-radius: 8px;
1530
- padding: 12px;
1531
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1532
- font-family: sans-serif;
1533
- }
1534
-
1535
- .emoji-picker h4 {
1536
- font-size: 14px;
1537
- font-weight: 600;
1538
- color: #555;
1539
- margin: 16px 0 8px;
1540
- text-transform: capitalize;
1541
- }
1542
-
1543
- .emoji-grid {
1544
- display: grid;
1545
- grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
1546
- gap: 6px;
1547
- }
1548
-
1549
- .emoji-btn {
1550
- width: 28px;
1551
- height: 28px;
1552
- display: flex;
1553
- align-items: center;
1554
- justify-content: center;
1555
- cursor: pointer;
1556
- border-radius: 6px;
1557
- transition: transform 0.2s ease;
1558
- }
1559
-
1560
- .emoji-btn:hover {
1561
- background-color: #f0f0f0;
1562
- transform: scale(1.2);
1563
- }
1564
-
1565
- .emoji-core:active {
1566
- transform: scale(1.15);
1567
- }
1568
-
1569
- @keyframes sparklePop {
1570
- 0% {
1571
- opacity: 1;
1572
- transform: scale(0.5);
1573
- }
1574
-
1575
- 100% {
1576
- opacity: 0;
1577
- transform: scale(1.6);
1578
- }
1579
- }
1580
-
1581
- .magic {
1582
- display: inline-block;
1583
- position: relative;
1584
- --r: 45px;
1585
- }
1586
-
1587
- .magic::before {
1588
- content: '';
1589
- position: absolute;
1590
- top: calc(50% - var(--r));
1591
- left: calc(50% - var(--r));
1592
- width: calc(2 * var(--r));
1593
- height: calc(2 * var(--r));
1594
- border-radius: 50%;
1595
- border: solid orange var(--r);
1596
- transform: scale(0);
1597
- box-sizing: border-box;
1598
- }
1599
-
1600
- .magic.spark::before {
1601
- border-width: 0;
1602
- transform: scale(1);
1603
- transition: transform 0.5s, border-width 0.5s 0.5s;
1604
- }
1605
-
1606
- .magic::after {
1607
- content: '';
1608
- position: absolute;
1609
- width: calc(4 * var(--r));
1610
- height: calc(4 * var(--r));
1611
- left: calc(50% - 2 * var(--r));
1612
- top: calc(50% - 2 * var(--r));
1613
- --c1: radial-gradient(circle, red 50%, transparent 60%);
1614
- --c2: radial-gradient(circle, orange 50%, transparent 60%);
1615
- background: var(--c1), var(--c1), var(--c1), var(--c1), var(--c2), var(--c2),
1616
- var(--c2), var(--c2);
1617
- background-size: calc(var(--r) / 3) calc(var(--r) / 3);
1618
- background-position: calc(50% - var(--r)) calc(50% - var(--r)),
1619
- calc(50% + var(--r)) calc(50% - var(--r)),
1620
- calc(50% - var(--r)) calc(50% + var(--r)),
1621
- calc(50% + var(--r)) calc(50% + var(--r)),
1622
- calc(50% + 0px) calc(50% + var(--r) * 1.414),
1623
- calc(50% + var(--r) * 1.414) calc(50% + 0px),
1624
- calc(50% - var(--r) * 1.414) calc(50% + 0px),
1625
- calc(50% + 0px) calc(50% - var(--r) * 1.414);
1626
- background-repeat: no-repeat;
1627
- transform: scale(0);
1628
- }
1629
-
1630
- .magic.spark::after {
1631
- transform: scale(1);
1632
- opacity: 0;
1633
- background-size: 0 0;
1634
- transition: transform 0.5s 0.5s, opacity 0.4s 0.9s, background-size 0.5s 0.9s;
1635
- }
1636
-
1637
- .before\:absolute::before {
1638
- content: var(--tw-content);
1639
- position: absolute;
1640
- }
1641
-
1642
- .before\:z-10::before {
1643
- content: var(--tw-content);
1644
- z-index: 10;
1645
- }
1646
-
1647
- .before\:box-border::before {
1648
- content: var(--tw-content);
1649
- box-sizing: border-box;
1650
- }
1651
-
1652
- .before\:h-full::before {
1653
- content: var(--tw-content);
1654
- height: 100%;
1655
- }
1656
-
1657
- .before\:w-full::before {
1658
- content: var(--tw-content);
1659
- width: 100%;
1660
- }
1661
-
1662
- .before\:select-none::before {
1663
- content: var(--tw-content);
1664
- -webkit-user-select: none;
1665
- -moz-user-select: none;
1666
- user-select: none;
1667
- }
1668
-
1669
- .before\:border-b::before {
1670
- content: var(--tw-content);
1671
- border-bottom-width: 1px;
1672
- }
1673
-
1674
- .before\:border-l::before {
1675
- content: var(--tw-content);
1676
- border-left-width: 1px;
1677
- }
1678
-
1679
- .before\:border-r::before {
1680
- content: var(--tw-content);
1681
- border-right-width: 1px;
1682
- }
1683
-
1684
- .before\:border-t::before {
1685
- content: var(--tw-content);
1686
- border-top-width: 1px;
1687
- }
1688
-
1689
- .before\:border-none::before {
1690
- content: var(--tw-content);
1691
- border-style: none;
1692
- }
1693
-
1694
- .before\:border-b-border::before {
1695
- content: var(--tw-content);
1696
- border-bottom-color: hsl(var(--border));
1697
- }
1698
-
1699
- .before\:border-l-border::before {
1700
- content: var(--tw-content);
1701
- border-left-color: hsl(var(--border));
1702
- }
1703
-
1704
- .before\:border-r-border::before {
1705
- content: var(--tw-content);
1706
- border-right-color: hsl(var(--border));
1707
- }
1708
-
1709
- .before\:border-t-border::before {
1710
- content: var(--tw-content);
1711
- border-top-color: hsl(var(--border));
1712
- }
1713
-
1714
- .before\:bg-muted::before {
1715
- content: var(--tw-content);
1716
- background-color: hsl(var(--muted));
1717
- }
1718
-
1719
- .before\:content-\[\'\'\]::before {
1720
- --tw-content: '';
1721
- content: var(--tw-content);
1722
- }
1723
-
1724
- .after\:flex::after {
1725
- content: var(--tw-content);
1726
- display: flex;
1727
- }
1728
-
1729
- .after\:h-16::after {
1730
- content: var(--tw-content);
1731
- height: 4rem;
1732
- }
1733
-
1734
- .after\:w-\[3px\]::after {
1735
- content: var(--tw-content);
1736
- width: 3px;
1737
- }
1738
-
1739
- .after\:rounded-\[6px\]::after {
1740
- content: var(--tw-content);
1741
- border-radius: 6px;
1742
- }
1743
-
1744
- .after\:bg-ring::after {
1745
- content: var(--tw-content);
1746
- background-color: hsl(var(--ring));
1747
- }
1748
-
1749
- .after\:opacity-0::after {
1750
- content: var(--tw-content);
1751
- opacity: 0;
1752
- }
1753
-
1754
- .after\:content-\[\'_\'\]::after {
1755
- --tw-content: ' ';
1756
- content: var(--tw-content);
1757
- }
1758
-
1759
- .hover\:bg-accent:hover {
1760
- background-color: hsl(var(--accent));
1761
- }
1762
-
1763
- .hover\:bg-destructive\/90:hover {
1764
- background-color: hsl(var(--destructive) / 0.9);
1765
- }
1766
-
1767
- .hover\:bg-primary\/90:hover {
1768
- background-color: hsl(var(--primary) / 0.9);
1769
- }
1770
-
1771
- .hover\:bg-secondary\/80:hover {
1772
- background-color: hsl(var(--secondary) / 0.8);
1773
- }
1774
-
1775
- .hover\:text-accent-foreground:hover {
1776
- color: hsl(var(--accent-foreground));
1777
- }
1778
-
1779
- .hover\:underline:hover {
1780
- text-decoration-line: underline;
1781
- }
1782
-
1783
- .focus\:bg-accent:focus {
1784
- background-color: hsl(var(--accent));
1785
- }
1786
-
1787
- .focus\:text-accent-foreground:focus {
1788
- color: hsl(var(--accent-foreground));
1789
- }
1790
-
1791
- .focus-visible\:outline-none:focus-visible {
1792
- outline: 2px solid transparent;
1793
- outline-offset: 2px;
1794
- }
1795
-
1796
- .focus-visible\:ring-2:focus-visible {
1797
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1798
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1799
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1800
- }
1801
-
1802
- .focus-visible\:ring-ring:focus-visible {
1803
- --tw-ring-color: hsl(var(--ring));
1804
- }
1805
-
1806
- .focus-visible\:ring-offset-2:focus-visible {
1807
- --tw-ring-offset-width: 2px;
1808
- }
1809
-
1810
- .disabled\:pointer-events-none:disabled {
1811
- pointer-events: none;
1812
- }
1813
-
1814
- .disabled\:opacity-50:disabled {
1815
- opacity: 0.5;
1816
- }
1817
-
1818
- .group:hover .group-hover\:after\:opacity-100::after {
1819
- content: var(--tw-content);
1820
- opacity: 1;
1821
- }
1822
-
1823
- .data-\[disabled\]\:pointer-events-none[data-disabled] {
1824
- pointer-events: none;
1825
- }
1826
-
1827
- .data-\[state\=checked\]\:bg-accent[data-state=checked] {
1828
- background-color: hsl(var(--accent));
1829
- }
1830
-
1831
- .data-\[state\=open\]\:bg-accent[data-state=open] {
1832
- background-color: hsl(var(--accent));
1833
- }
1834
-
1835
- .data-\[state\=checked\]\:text-accent-foreground[data-state=checked] {
1836
- color: hsl(var(--accent-foreground));
1837
- }
1838
-
1839
- .data-\[disabled\]\:opacity-50[data-disabled] {
1840
- opacity: 0.5;
1841
- }
1842
-
1843
- .data-\[state\=open\]\:animate-in[data-state=open] {
1844
- animation-name: enter;
1845
- animation-duration: 150ms;
1846
- --tw-enter-opacity: initial;
1847
- --tw-enter-scale: initial;
1848
- --tw-enter-rotate: initial;
1849
- --tw-enter-translate-x: initial;
1850
- --tw-enter-translate-y: initial;
1851
- }
1852
-
1853
- .data-\[state\=closed\]\:animate-out[data-state=closed] {
1854
- animation-name: exit;
1855
- animation-duration: 150ms;
1856
- --tw-exit-opacity: initial;
1857
- --tw-exit-scale: initial;
1858
- --tw-exit-rotate: initial;
1859
- --tw-exit-translate-x: initial;
1860
- --tw-exit-translate-y: initial;
1861
- }
1862
-
1863
- .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
1864
- --tw-exit-opacity: 0;
1865
- }
1866
-
1867
- .data-\[state\=open\]\:fade-in-0[data-state=open] {
1868
- --tw-enter-opacity: 0;
1869
- }
1870
-
1871
- .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
1872
- --tw-exit-scale: .95;
1873
- }
1874
-
1875
- .data-\[state\=open\]\:zoom-in-95[data-state=open] {
1876
- --tw-enter-scale: .95;
1877
- }
1878
-
1879
- .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
1880
- --tw-enter-translate-y: -0.5rem;
1881
- }
1882
-
1883
- .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
1884
- --tw-enter-translate-x: 0.5rem;
1885
- }
1886
-
1887
- .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
1888
- --tw-enter-translate-x: -0.5rem;
1889
- }
1890
-
1891
- .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
1892
- --tw-enter-translate-y: 0.5rem;
1893
- }
1894
-
1895
- @media print {
1896
- .print\:hidden {
1897
- display: none;
1898
- }
1899
- }
1900
-
1901
- .\[\&_\*\:\:selection\]\:bg-none *::-moz-selection {
1902
- background-image: none;
1903
- }
1904
-
1905
- .\[\&_\*\:\:selection\]\:bg-none *::selection {
1906
- background-image: none;
1907
- }
1908
-
1909
- .\[\&_\>_\*\]\:m-0 > * {
1910
- margin: 0px;
1911
- }