design-system-next 1.8.2 → 1.9.2

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 (25) hide show
  1. package/dist/design-system-next.js +4434 -4047
  2. package/dist/design-system-next.js.gz +0 -0
  3. package/dist/main.css +1 -1
  4. package/dist/main.css.gz +0 -0
  5. package/package.json +1 -1
  6. package/src/App.vue +9 -671
  7. package/src/assets/styles/tailwind.css +2 -2
  8. package/src/components/calendar-cell/use-calendar-cell.ts +1 -1
  9. package/src/components/checkbox/checkbox.ts +5 -1
  10. package/src/components/checkbox/checkbox.vue +1 -1
  11. package/src/components/checkbox/use-checkbox.ts +8 -10
  12. package/src/components/date-picker/date-picker.ts +8 -1
  13. package/src/components/date-picker/date-picker.vue +6 -1
  14. package/src/components/dropdown/dropdown.ts +45 -17
  15. package/src/components/dropdown/dropdown.vue +35 -27
  16. package/src/components/dropdown/use-dropdown.ts +38 -87
  17. package/src/components/input/input.ts +38 -6
  18. package/src/components/input/input.vue +4 -1
  19. package/src/components/input/use-input.ts +17 -13
  20. package/src/components/list/list.ts +34 -0
  21. package/src/components/list/list.vue +64 -0
  22. package/src/components/list/use-list.ts +149 -0
  23. package/src/components/modal/modal.ts +12 -7
  24. package/src/components/modal/modal.vue +74 -34
  25. package/src/components/modal/use-modal.ts +69 -35
package/src/App.vue CHANGED
@@ -1,680 +1,18 @@
1
1
  <template>
2
- <spr-sidenav
3
- :quick-actions="quickActions"
4
- has-search
5
- :active-nav="activeNav"
6
- :nav-links="navLinks"
7
- :user-menu="userMenu"
8
- :notification-count="0"
9
- :request-count="0"
10
- @get-navlink-item="handleGetNavLinkItem"
11
- @search="handleSearch"
12
- @notifications="handleNotifications"
13
- @requests="handleRequest"
14
- >
15
- <template #logo-image>
16
- <img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
17
- </template>
18
- </spr-sidenav>
19
-
20
- <br />
21
-
22
- <spr-input v-model="inputValue" label="Sample Input" display-helper error @input="onInput">
23
- <template #helperMessage>
24
- <icon icon="ph:warning-circle-fill" />
25
- This is a helper text
26
- </template>
27
- </spr-input>
28
-
29
- <spr-snackbar ref="snackbar" />
30
-
31
- <spr-button @click="successSnackbar"> Show success</spr-button>
32
- <spr-button @click="errorSnackbar"> Show error</spr-button>
33
-
34
- <div class="mock-snackbar">
35
- <spr-snack
36
- class="mock-snack"
37
- text="Two line with long action should look like this when implemented. This is more additional text for lines."
38
- tone="success"
39
- action-text="action"
40
- show-icon
41
- />
42
-
43
- <spr-snack class="mock-snack" text="Yehey" tone="danger" action-text="action" show-icon show-action />
44
-
45
- <spr-snack
46
- class="mock-snack"
47
- text="Two line with long action should look like this when implemented. This is more additional text for lines."
48
- tone="caution"
49
- action-text="action"
50
- show-icon
51
- show-action
52
- />
53
-
54
- <spr-snack class="mock-snack" text="Hello" tone="information" action-text="action" show-icon show-action />
55
- </div>
56
-
57
- <h1 class="spr-heading-xl">askhdjahskjdhasjkhdjkashkjdas</h1>
58
- <h1 class="spr-heading-lg">askhdjahskjdhasjkhdjkashkjdas</h1>
59
- <h1 class="spr-heading-md">askhdjahskjdhasjkhdjkashkjdas</h1>
60
- <h1 class="spr-heading-sm">askhdjahskjdhasjkhdjkashkjdas</h1>
61
- <h1 class="spr-heading-xs">askhdjahskjdhasjkhdjkashkjdas</h1>
62
-
63
- <h1 v-for="i in 100" :key="i">Sample kingkong {{ i }}</h1>
64
-
65
- <div class="spr-space-y-4 spr-bg-white-50 spr-p-size-spacing-sm">
66
- <spr-table action :headers="headers" :data-table="data">
67
- <div>
68
- <div class="spr-text-color-strong spr-font-size-400 spr-font-weight-medium">Table Name</div>
69
- <div>table description</div>
70
- </div>
71
- <template #action="{ row }">
72
- <spr-lozenge :label="row.status.title" tone="success" />
73
- </template>
74
- <template #action-name> Status </template>
75
- </spr-table>
76
-
77
- <spr-table :headers="headers" :data-table="data" />
78
- </div>
2
+ <div>Test Component Here</div>
3
+ <spr-input
4
+ v-model="inputValue"
5
+ label="Text Input"
6
+ placeholder="Enter your username"
7
+ :max-length="50"
8
+ :min-length="3"
9
+ @keyup="console.log(inputValue)"
10
+ />
79
11
  </template>
80
12
 
81
13
  <script setup>
82
14
  import { ref } from 'vue';
83
-
84
- import SprSidenav from './components/sidenav/sidenav.vue';
85
- import SprButton from './components/button/button.vue';
86
- import SprSnack from './components/snackbar/snack/snack.vue';
87
- import SprSnackbar from './components/snackbar/snackbar.vue';
88
- import SprTable from '@/components/table/table.vue';
89
- import SprLozenge from '@/components/lozenge/lozenge.vue';
90
15
  import SprInput from '@/components/input/input.vue';
91
- import { Icon } from '@iconify/vue';
92
16
 
93
17
  const inputValue = ref('');
94
- const snackbar = ref(null);
95
- const successSnackbar = () => {
96
- snackbar.value.showSuccess({
97
- text: 'Yehey!',
98
- showIcon: true,
99
- actionText: 'close',
100
- showAction: true,
101
- });
102
- };
103
-
104
- const errorSnackbar = () => {
105
- snackbar.value.showCaution({
106
- text: 'Error!',
107
- actionText: 'action',
108
- showAction: true,
109
- showIcon: true,
110
- duration: 8000,
111
- action: () => console.log('Error action clicked'),
112
- });
113
- };
114
-
115
- const activeNav = ref({
116
- parentNav: 'Home',
117
- menu: 'Dashboard 1',
118
- submenu: 'Home 2',
119
- });
120
-
121
- const navLinks = ref({
122
- top: [
123
- {
124
- parentLinks: [
125
- {
126
- title: 'Home',
127
- icon: 'ph:house-simple',
128
- menuLinks: [
129
- {
130
- menuHeading: 'Sub Heading 1',
131
- items: [
132
- {
133
- title: 'Dashboard 1',
134
- // submenuLinks: [
135
- // {
136
- // subMenuHeading: 'Sub Heading 1',
137
- // items: [
138
- // {
139
- // title: 'Home 1',
140
- // redirect: {},
141
- // },
142
- // {
143
- // title: 'Home 2',
144
- // redirect: {
145
- // openInNewTab: false,
146
- // isAbsoluteURL: false,
147
- // link: '/',
148
- // },
149
- // },
150
- // ],
151
- // },
152
- // {
153
- // subMenuHeading: 'Sub Heading 2',
154
- // items: [
155
- // {
156
- // title: 'Home 3',
157
- // redirect: {
158
- // openInNewTab: false,
159
- // isAbsoluteURL: true,
160
- // link: 'https://www.google.com/',
161
- // },
162
- // },
163
- // {
164
- // title: 'Home 4',
165
- // redirect: {
166
- // openInNewTab: false,
167
- // isAbsoluteURL: false,
168
- // link: '/',
169
- // },
170
- // },
171
- // ],
172
- // },
173
- // ],
174
- },
175
- {
176
- title: 'Dashboard 2',
177
- redirect: {
178
- openInNewTab: false,
179
- isAbsoluteURL: false,
180
- link: '/',
181
- },
182
- },
183
- ],
184
- },
185
- ],
186
- },
187
- {
188
- title: 'Employees',
189
- icon: 'ph:users-three',
190
- redirect: {
191
- openInNewTab: false,
192
- isAbsoluteURL: false,
193
- link: '/',
194
- },
195
- },
196
- ],
197
- },
198
- {
199
- parentLinks: [
200
- {
201
- title: 'Payroll',
202
- icon: 'ph:leaf',
203
- menuLinks: [
204
- {
205
- menuHeading: 'Sub Heading 1',
206
- items: [
207
- {
208
- title: 'Payroll Runs',
209
- redirect: {
210
- openInNewTab: false,
211
- isAbsoluteURL: false,
212
- link: '/',
213
- },
214
- },
215
- {
216
- title: 'Reports',
217
- submenuLinks: [
218
- {
219
- subMenuHeading: '',
220
- items: [
221
- {
222
- title: 'Payroll',
223
- redirect: {
224
- openInNewTab: false,
225
- isAbsoluteURL: false,
226
- link: '/',
227
- },
228
- },
229
- {
230
- title: 'SSS',
231
- redirect: {
232
- openInNewTab: false,
233
- isAbsoluteURL: false,
234
- link: '/',
235
- },
236
- },
237
- {
238
- title: 'PHILHEALTH',
239
- redirect: {
240
- openInNewTab: false,
241
- isAbsoluteURL: false,
242
- link: '/',
243
- },
244
- },
245
- ],
246
- },
247
- ],
248
- },
249
- ],
250
- },
251
- {
252
- menuHeading: 'Sub Heading 2',
253
- items: [
254
- {
255
- title: 'Setup',
256
- redirect: {
257
- openInNewTab: false,
258
- isAbsoluteURL: false,
259
- link: '/',
260
- },
261
- },
262
- {
263
- title: 'Employees',
264
- redirect: {
265
- openInNewTab: false,
266
- isAbsoluteURL: false,
267
- link: '/',
268
- },
269
- },
270
- ],
271
- },
272
- ],
273
- },
274
- {
275
- title: 'Money',
276
- icon: 'ph:currency-rub',
277
- redirect: {
278
- openInNewTab: false,
279
- isAbsoluteURL: false,
280
- link: '/',
281
- },
282
- },
283
- {
284
- title: 'Car',
285
- icon: 'ph:wallet',
286
- redirect: {
287
- openInNewTab: false,
288
- isAbsoluteURL: false,
289
- link: '/',
290
- },
291
- menuLinks: [
292
- {
293
- menuHeading: '',
294
- items: [
295
- {
296
- title: 'Car 1',
297
- redirect: {
298
- openInNewTab: false,
299
- isAbsoluteURL: false,
300
- link: '/',
301
- },
302
- },
303
- {
304
- title: 'Car 2',
305
- redirect: {
306
- openInNewTab: false,
307
- isAbsoluteURL: false,
308
- link: '/',
309
- },
310
- },
311
- ],
312
- },
313
- ],
314
- },
315
- ],
316
- },
317
- ],
318
- bottom: [
319
- {
320
- parentLinks: [
321
- {
322
- title: 'Gallery',
323
- icon: 'ph:address-book',
324
- menuLinks: [
325
- {
326
- menuHeading: 'Sub Heading 1',
327
- items: [
328
- {
329
- title: 'Dashboard 1',
330
- submenuLinks: [
331
- {
332
- subMenuHeading: 'Sub Heading 1',
333
- items: [
334
- {
335
- title: 'Home 1',
336
- redirect: {},
337
- },
338
- {
339
- title: 'Home 2',
340
- redirect: {
341
- openInNewTab: false,
342
- isAbsoluteURL: false,
343
- link: '/',
344
- },
345
- },
346
- ],
347
- },
348
- {
349
- subMenuHeading: 'Sub Heading 2',
350
- items: [
351
- {
352
- title: 'Home 3',
353
- redirect: {
354
- openInNewTab: false,
355
- isAbsoluteURL: true,
356
- link: 'https://www.google.com/',
357
- },
358
- },
359
- {
360
- title: 'Home 4',
361
- redirect: {
362
- openInNewTab: false,
363
- isAbsoluteURL: false,
364
- link: '/',
365
- },
366
- },
367
- ],
368
- },
369
- ],
370
- },
371
- {
372
- title: 'Dashboard 2',
373
- redirect: {
374
- openInNewTab: false,
375
- isAbsoluteURL: false,
376
- link: '/',
377
- },
378
- },
379
- ],
380
- },
381
- ],
382
- },
383
- ],
384
- },
385
- {
386
- parentLinks: [
387
- {
388
- title: 'Resources',
389
- icon: 'ph:alien',
390
- redirect: {
391
- openInNewTab: false,
392
- isAbsoluteURL: false,
393
- link: '/',
394
- },
395
- },
396
- {
397
- title: 'News',
398
- icon: 'ph:align-left',
399
- redirect: {
400
- openInNewTab: false,
401
- isAbsoluteURL: false,
402
- link: '/',
403
- },
404
- },
405
- ],
406
- },
407
- ],
408
- });
409
-
410
- const handleGetNavLinkItem = (route) => {
411
- console.log(route);
412
- };
413
-
414
- const handleSearch = (search) => {
415
- console.log(search);
416
- };
417
-
418
- const handleNotifications = (notifications) => {
419
- console.log(notifications);
420
- };
421
-
422
- const handleRequest = (request) => {
423
- console.log(request);
424
- };
425
-
426
- const userMenu = ref({
427
- name: 'John Rafael M. Arias',
428
- email: 'jarias@sprout.ph',
429
- profileImage: 'https://lh3.googleusercontent.com/ogw/AF2bZyiCP8eaKX7KiduREcMAogl0Ml2TwYJAPTgcKeNap81ztg=s32-c-mo',
430
- items: [
431
- {
432
- title: 'My Profile',
433
- icon: 'ph:house-simple',
434
- redirect: {
435
- openInNewTab: false,
436
- isAbsoluteURL: false,
437
- link: '/',
438
- },
439
- },
440
- {
441
- title: 'Privacy Policy',
442
- icon: 'ph:house-simple',
443
- redirect: {
444
- openInNewTab: false,
445
- isAbsoluteURL: false,
446
- link: '/',
447
- },
448
- },
449
- {
450
- title: 'Terms of Service',
451
- icon: 'ph:house-simple',
452
- redirect: {
453
- openInNewTab: false,
454
- isAbsoluteURL: false,
455
- link: '/',
456
- },
457
- },
458
- {
459
- title: 'Logout',
460
- icon: 'ph:house-simple',
461
- redirect: {
462
- openInNewTab: false,
463
- isAbsoluteURL: false,
464
- link: '/',
465
- },
466
- },
467
- ],
468
- });
469
-
470
- const headers = ref([
471
- { field: 'name', name: 'Role Name', sort: true, size: 'md', hasAvatar: true, hasSubtext: true },
472
- { field: 'lastUpdate', name: 'Last Update', sort: true, size: 'xl', hasAvatar: false, hasSubtext: false },
473
- ]);
474
-
475
- const data = ref([
476
- {
477
- name: {
478
- title: 'Shift',
479
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
480
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
481
- },
482
- lastUpdate: {
483
- title: 'Nov 30, 2025',
484
- subtext: 'Lorem ipsum dolor ',
485
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
486
- },
487
- status: {
488
- title: 'Success',
489
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
490
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
491
- },
492
- status1: {
493
- title: 'sdsj',
494
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
495
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
496
- },
497
- },
498
- {
499
- name: {
500
- title: 'Shift',
501
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
502
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
503
- },
504
- lastUpdate: {
505
- title: 'Nov 30, 2025',
506
- subtext: 'Lorem ipsum dolor ',
507
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
508
- },
509
- status: {
510
- title: 'Success',
511
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
512
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
513
- },
514
- },
515
- {
516
- name: {
517
- title: 'Shift',
518
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
519
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
520
- },
521
- lastUpdate: {
522
- title: 'Nov 30, 2025',
523
- subtext: 'Lorem ipsum dolor ',
524
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
525
- },
526
- status: {
527
- title: 'Success',
528
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
529
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
530
- },
531
- status1: {
532
- title: 'sdsj',
533
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
534
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
535
- },
536
- },
537
- {
538
- name: {
539
- title: 'Shift',
540
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
541
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
542
- },
543
- lastUpdate: {
544
- title: 'Nov 30, 2025',
545
- subtext: 'Lorem ipsum dolor ',
546
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
547
- },
548
- status: {
549
- title: 'Success',
550
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
551
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
552
- },
553
- },
554
- {
555
- name: {
556
- title: 'Shift',
557
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
558
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
559
- },
560
- lastUpdate: {
561
- title: 'Nov 30, 2025',
562
- subtext: 'Lorem ipsum dolor ',
563
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
564
- },
565
- status: {
566
- title: 'Success',
567
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
568
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
569
- },
570
- status1: {
571
- title: 'sdsj',
572
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
573
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
574
- },
575
- },
576
- {
577
- name: {
578
- title: 'Shift',
579
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
580
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
581
- },
582
- lastUpdate: {
583
- title: 'Nov 30, 2025',
584
- subtext: 'Lorem ipsum dolor ',
585
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
586
- },
587
- status: {
588
- title: 'Success',
589
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
590
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
591
- },
592
- },
593
- {
594
- name: {
595
- title: 'Shift',
596
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
597
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
598
- },
599
- lastUpdate: {
600
- title: 'Nov 30, 2025',
601
- subtext: 'Lorem ipsum dolor ',
602
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
603
- },
604
- status: {
605
- title: 'Success',
606
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
607
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
608
- },
609
- status1: {
610
- title: 'sdsj',
611
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
612
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
613
- },
614
- },
615
- {
616
- name: {
617
- title: 'Shift',
618
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
619
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
620
- },
621
- lastUpdate: {
622
- title: 'Nov 30, 2025',
623
- subtext: 'Lorem ipsum dolor ',
624
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
625
- },
626
- status: {
627
- title: 'Success',
628
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
629
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
630
- },
631
- },
632
- {
633
- name: {
634
- title: 'Shift',
635
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
636
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
637
- },
638
- lastUpdate: {
639
- title: 'Nov 30, 2025',
640
- subtext: 'Lorem ipsum dolor ',
641
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
642
- },
643
- status: {
644
- title: 'Success',
645
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
646
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
647
- },
648
- status1: {
649
- title: 'sdsj',
650
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
651
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
652
- },
653
- },
654
- {
655
- name: {
656
- title: 'Shift',
657
- subtext: 'Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.',
658
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
659
- },
660
- lastUpdate: {
661
- title: 'Nov 30, 2025',
662
- subtext: 'Lorem ipsum dolor ',
663
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
664
- },
665
- status: {
666
- title: 'Success',
667
- subtext: 'Lorem ipsum dolor sit amet, consectetur, sed etiam.',
668
- image: 'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg',
669
- },
670
- },
671
- ]);
672
18
  </script>
673
-
674
- <style lang="scss">
675
- body {
676
- @apply spr-m-0 spr-bg-mushroom-100 spr-font-main;
677
- margin-left: 64px;
678
- padding: 64px;
679
- }
680
- </style>
package/src/assets/styles/tailwind.css CHANGED
@@ -137,11 +137,11 @@
137
137
 
138
138
  /* #region - Dropdown */
139
139
  #dropdown-wrapper {
140
- @apply spr-overflow-hidden;
140
+ @apply spr-w-[inherit] spr-overflow-hidden;
141
141
 
142
142
  .v-popper__wrapper {
143
143
  .v-popper__inner {
144
- @apply spr-border-color-weak spr-max-h-[300px] spr-w-[240px] spr-overflow-y-auto spr-rounded-xl spr-border spr-border-solid spr-p-2 spr-font-main spr-shadow-none;
144
+ @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-none;
145
145
 
146
146
  &::-webkit-scrollbar-track {
147
147
  @apply spr-rounded-br-xl spr-rounded-tr-xl;