@salutejs/plasma-new-hope 0.88.0-canary.1233.9439608380.0 → 0.88.0-canary.1233.9449328054.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. package/cjs/components/Select/Select.css +0 -5
  2. package/cjs/components/Select/Select.js +1 -6
  3. package/cjs/components/Select/Select.js.map +1 -1
  4. package/cjs/components/Select/elements/Inner/Inner.css +0 -5
  5. package/cjs/components/Select/elements/Inner/elements/Item/Item.css +0 -5
  6. package/es/components/Select/Select.css +0 -5
  7. package/es/components/Select/Select.js +1 -6
  8. package/es/components/Select/Select.js.map +1 -1
  9. package/es/components/Select/elements/Inner/Inner.css +0 -5
  10. package/es/components/Select/elements/Inner/elements/Item/Item.css +0 -5
  11. package/package.json +2 -2
  12. package/styled-components/cjs/components/Select/Select.js +1 -6
  13. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +14 -2
  14. package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +40 -0
  15. package/styled-components/cjs/examples/plasma_web/components/Select/Select.js +17 -0
  16. package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +817 -0
  17. package/styled-components/cjs/examples/plasma_web/components/Select/style.css +38 -0
  18. package/styled-components/es/components/Select/Select.js +1 -6
  19. package/styled-components/es/examples/plasma_b2c/components/Select/Select.js +2 -2
  20. package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +14 -2
  21. package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +34 -0
  22. package/styled-components/es/examples/plasma_web/components/Select/Select.js +6 -0
  23. package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +817 -0
  24. package/styled-components/es/examples/plasma_web/components/Select/style.css +38 -0
  25. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +16 -0
  26. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
  27. package/types/components/Select/Select.d.ts.map +1 -1
  28. package/types/components/Select/Select.types.d.ts +21 -17
  29. package/types/components/Select/Select.types.d.ts.map +1 -1
  30. package/types/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.types.d.ts +1 -1
  31. package/types/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.types.d.ts.map +1 -1
  32. package/types/examples/plasma_b2c/components/Select/Select.d.ts +18 -2
  33. package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
  34. package/types/examples/plasma_web/components/Select/Select.config.d.ts +33 -0
  35. package/types/examples/plasma_web/components/Select/Select.config.d.ts.map +1 -0
  36. package/types/examples/plasma_web/components/Select/Select.d.ts +81 -0
  37. package/types/examples/plasma_web/components/Select/Select.d.ts.map +1 -0
@@ -0,0 +1,817 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
+
6
+ import './style.css';
7
+
8
+ import { WithTheme } from '../../../_helpers';
9
+
10
+ import { Select, SelectNotFoundContent } from './Select';
11
+
12
+ type StorySelectProps = ComponentProps<typeof Select> & {
13
+ enableContentLeft?: boolean;
14
+ };
15
+
16
+ const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white'];
17
+ const size = ['xs', 's', 'm', 'l'];
18
+ const labelPlacement = ['inner', 'outer'];
19
+ const chip = ['default', 'secondary', 'accent'];
20
+ const variant = ['normal', 'tight'];
21
+
22
+ const meta: Meta<StorySelectProps> = {
23
+ title: 'plasma_web/Select',
24
+ decorators: [WithTheme],
25
+ component: Select,
26
+ argTypes: {
27
+ target: {
28
+ options: ['button', 'textfield'],
29
+ control: {
30
+ type: 'select',
31
+ },
32
+ },
33
+ size: {
34
+ options: size,
35
+ control: {
36
+ type: 'select',
37
+ },
38
+ },
39
+ view: {
40
+ options: view,
41
+ control: {
42
+ type: 'select',
43
+ },
44
+ },
45
+ labelPlacement: {
46
+ options: labelPlacement,
47
+ control: {
48
+ type: 'select',
49
+ },
50
+ },
51
+ chipView: {
52
+ options: chip,
53
+ control: {
54
+ type: 'select',
55
+ },
56
+ },
57
+ variant: {
58
+ options: variant,
59
+ control: {
60
+ type: 'select',
61
+ },
62
+ },
63
+ },
64
+ args: {
65
+ target: 'button',
66
+ label: 'Label',
67
+ labelPlacement: 'outer',
68
+ placeholder: 'Placeholder',
69
+ helperText: 'Helper text',
70
+ size: 'm',
71
+ view: 'default',
72
+ chipView: 'default',
73
+ enableContentLeft: false,
74
+ isTargetAmount: false,
75
+ variant: 'normal',
76
+ disabled: false,
77
+ },
78
+ };
79
+
80
+ export default meta;
81
+
82
+ const items = [
83
+ {
84
+ value: 'north_america',
85
+ label: 'Северная Америка',
86
+ },
87
+ {
88
+ value: 'south_america',
89
+ label: 'Южная Америка',
90
+ items: [
91
+ {
92
+ value: 'brazil',
93
+ label: 'Бразилия',
94
+ items: [
95
+ {
96
+ value: 'rio_de_janeiro',
97
+ label: 'Рио-де-Жанейро',
98
+ },
99
+ {
100
+ value: 'sao_paulo',
101
+ label: 'Сан-Паулу',
102
+ },
103
+ ],
104
+ },
105
+ {
106
+ value: 'argentina',
107
+ label: 'Аргентина',
108
+ items: [
109
+ {
110
+ value: 'buenos_aires',
111
+ label: 'Буэнос-Айрес',
112
+ },
113
+ {
114
+ value: 'cordoba',
115
+ label: 'Кордова',
116
+ },
117
+ ],
118
+ },
119
+ {
120
+ value: 'colombia',
121
+ label: 'Колумбия',
122
+ items: [
123
+ {
124
+ value: 'bogota',
125
+ label: 'Богота',
126
+ },
127
+ {
128
+ value: 'medellin',
129
+ label: 'Медельин',
130
+ },
131
+ ],
132
+ },
133
+ ],
134
+ },
135
+ {
136
+ value: 'europe',
137
+ label: 'Европа',
138
+ items: [
139
+ {
140
+ value: 'france',
141
+ label: 'Франция',
142
+ items: [
143
+ {
144
+ value: 'paris',
145
+ label: 'Париж',
146
+ },
147
+ {
148
+ value: 'lyon',
149
+ label: 'Лион',
150
+ },
151
+ ],
152
+ },
153
+ {
154
+ value: 'germany',
155
+ label: 'Германия',
156
+ items: [
157
+ {
158
+ value: 'berlin',
159
+ label: 'Берлин',
160
+ },
161
+ {
162
+ value: 'munich',
163
+ label: 'Мюнхен',
164
+ },
165
+ ],
166
+ },
167
+ {
168
+ value: 'italy',
169
+ label: 'Италия',
170
+ items: [
171
+ {
172
+ value: 'rome',
173
+ label: 'Рим',
174
+ },
175
+ {
176
+ value: 'milan',
177
+ label: 'Милан',
178
+ },
179
+ ],
180
+ },
181
+ {
182
+ value: 'spain',
183
+ label: 'Испания',
184
+ items: [
185
+ {
186
+ value: 'madrid',
187
+ label: 'Мадрид',
188
+ },
189
+ {
190
+ value: 'barcelona',
191
+ label: 'Барселона',
192
+ },
193
+ ],
194
+ },
195
+ {
196
+ value: 'united_kingdom',
197
+ label: 'Великобритания',
198
+ items: [
199
+ {
200
+ value: 'london',
201
+ label: 'Лондон',
202
+ },
203
+ {
204
+ value: 'manchester',
205
+ label: 'Манчестер',
206
+ },
207
+ ],
208
+ },
209
+ ],
210
+ },
211
+ {
212
+ value: 'asia',
213
+ label: 'Азия',
214
+ items: [
215
+ {
216
+ value: 'china',
217
+ label: 'Китай',
218
+ items: [
219
+ {
220
+ value: 'beijing',
221
+ label: 'Пекин',
222
+ },
223
+ {
224
+ value: 'shanghai',
225
+ label: 'Шанхай',
226
+ },
227
+ ],
228
+ },
229
+ {
230
+ value: 'japan',
231
+ label: 'Япония',
232
+ items: [
233
+ {
234
+ value: 'tokyo',
235
+ label: 'Токио',
236
+ },
237
+ {
238
+ value: 'osaka',
239
+ label: 'Осака',
240
+ },
241
+ ],
242
+ },
243
+ {
244
+ value: 'india',
245
+ label: 'Индия',
246
+ items: [
247
+ {
248
+ value: 'delhi',
249
+ label: 'Дели',
250
+ },
251
+ {
252
+ value: 'mumbai',
253
+ label: 'Мумбаи',
254
+ },
255
+ ],
256
+ },
257
+ {
258
+ value: 'south_korea',
259
+ label: 'Южная Корея',
260
+ items: [
261
+ {
262
+ value: 'seoul',
263
+ label: 'Сеул',
264
+ },
265
+ {
266
+ value: 'busan',
267
+ label: 'Пусан',
268
+ },
269
+ ],
270
+ },
271
+ {
272
+ value: 'thailand',
273
+ label: 'Таиланд',
274
+ items: [
275
+ {
276
+ value: 'bangkok',
277
+ label: 'Бангкок',
278
+ },
279
+ {
280
+ value: 'phuket',
281
+ label: 'Пхукет',
282
+ },
283
+ ],
284
+ },
285
+ ],
286
+ },
287
+ {
288
+ value: 'africa',
289
+ label: 'Африка',
290
+ isDisabled: true,
291
+ },
292
+ ];
293
+
294
+ const SingleStory = (args: StorySelectProps) => {
295
+ const [value, setValue] = useState('');
296
+
297
+ return (
298
+ <div style={{ width: '300px' }}>
299
+ <Select {...args} items={items} value={value} onChange={setValue} />
300
+ </div>
301
+ );
302
+ };
303
+
304
+ export const Single: StoryObj<StorySelectProps> = {
305
+ render: (args) => <SingleStory {...args} />,
306
+ };
307
+
308
+ const MultiselectStory = (args: StorySelectProps) => {
309
+ const [value, setValue] = useState<Array<string>>([]);
310
+
311
+ return (
312
+ <div style={{ width: '300px' }}>
313
+ <Select {...args} items={items} value={value} onChange={setValue} />
314
+ </div>
315
+ );
316
+ };
317
+
318
+ export const Multiselect: StoryObj<StorySelectProps> = {
319
+ render: (args) => <MultiselectStory {...args} />,
320
+ };
321
+
322
+ const PredefinedStory = (args: StorySelectProps) => {
323
+ const [valueSingle, setValueSingle] = useState('paris');
324
+ const [valueMultiple, setValueMultiple] = useState(['paris', 'north_america']);
325
+
326
+ return (
327
+ <div style={{ width: '300px' }}>
328
+ <Select {...args} items={items} value={valueSingle} onChange={setValueSingle} multiselect={false} />
329
+
330
+ <br />
331
+
332
+ <Select {...args} items={items} value={valueMultiple} onChange={setValueMultiple} multiselect />
333
+ </div>
334
+ );
335
+ };
336
+
337
+ export const Predefined: StoryObj<StorySelectProps> = {
338
+ render: (args) => <PredefinedStory {...args} />,
339
+ };
340
+
341
+ const EmptyListStory = (args: StorySelectProps) => {
342
+ const [valueSingle, setValueSingle] = useState('');
343
+
344
+ return (
345
+ <div style={{ width: '300px' }}>
346
+ <Select
347
+ {...args}
348
+ items={[]}
349
+ value={valueSingle}
350
+ onChange={setValueSingle}
351
+ notFoundContent={
352
+ <SelectNotFoundContent
353
+ icon={<IconPlaceholder size="s" />}
354
+ description="Description"
355
+ buttonText="Label"
356
+ />
357
+ }
358
+ />
359
+ </div>
360
+ );
361
+ };
362
+
363
+ export const EmptyList: StoryObj<StorySelectProps> = {
364
+ render: (args) => <EmptyListStory {...args} />,
365
+ };
366
+
367
+ const CommonStory = (args: StorySelectProps) => {
368
+ const [value, setValue] = useState('');
369
+ const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
370
+
371
+ const { enableContentLeft } = args;
372
+
373
+ return (
374
+ <div className="container">
375
+ <table>
376
+ <thead>
377
+ <tr>
378
+ <th>View &#8595;</th>
379
+ <th>Single Button</th>
380
+ <th>Multiple Button</th>
381
+ <th>Single Textfield</th>
382
+ <th>Multiple Textfield</th>
383
+ </tr>
384
+ </thead>
385
+
386
+ <tbody>
387
+ <tr>
388
+ <td>Default</td>
389
+ <td>
390
+ <div style={{ width: '200px' }}>
391
+ <Select
392
+ {...args}
393
+ multiselect={false}
394
+ items={items}
395
+ value={value}
396
+ onChange={setValue}
397
+ view="default"
398
+ />
399
+ </div>
400
+ </td>
401
+ <td>
402
+ <div style={{ width: '200px' }}>
403
+ <Select
404
+ {...args}
405
+ multiselect
406
+ items={items}
407
+ value={valueMultiple}
408
+ onChange={setValueMultiple}
409
+ view="default"
410
+ />
411
+ </div>
412
+ </td>
413
+ <td>
414
+ <div style={{ width: '200px' }}>
415
+ <Select
416
+ {...args}
417
+ multiselect={false}
418
+ items={items}
419
+ value={value}
420
+ onChange={setValue}
421
+ view="default"
422
+ target="textfield"
423
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
424
+ />
425
+ </div>
426
+ </td>
427
+ <td>
428
+ <div style={{ width: '200px' }}>
429
+ <Select
430
+ {...args}
431
+ multiselect
432
+ items={items}
433
+ value={valueMultiple}
434
+ onChange={setValueMultiple}
435
+ view="default"
436
+ target="textfield"
437
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
438
+ />
439
+ </div>
440
+ </td>
441
+ </tr>
442
+ <tr>
443
+ <td>Accent</td>
444
+ <td>
445
+ <div style={{ width: '200px' }}>
446
+ <Select
447
+ {...args}
448
+ multiselect={false}
449
+ items={items}
450
+ value={value}
451
+ onChange={setValue}
452
+ view="accent"
453
+ />
454
+ </div>
455
+ </td>
456
+ <td>
457
+ <div style={{ width: '200px' }}>
458
+ <Select
459
+ {...args}
460
+ multiselect
461
+ items={items}
462
+ value={valueMultiple}
463
+ onChange={setValueMultiple}
464
+ view="accent"
465
+ />
466
+ </div>
467
+ </td>
468
+ <td />
469
+ <td />
470
+ </tr>
471
+ <tr>
472
+ <td>Secondary</td>
473
+ <td>
474
+ <div style={{ width: '200px' }}>
475
+ <Select
476
+ {...args}
477
+ multiselect={false}
478
+ items={items}
479
+ value={value}
480
+ onChange={setValue}
481
+ view="secondary"
482
+ />
483
+ </div>
484
+ </td>
485
+ <td>
486
+ <div style={{ width: '200px' }}>
487
+ <Select
488
+ {...args}
489
+ multiselect
490
+ items={items}
491
+ value={valueMultiple}
492
+ onChange={setValueMultiple}
493
+ view="secondary"
494
+ />
495
+ </div>
496
+ </td>
497
+ <td />
498
+ <td />
499
+ </tr>
500
+ <tr>
501
+ <td>Clear</td>
502
+
503
+ <td>
504
+ <div style={{ width: '200px' }}>
505
+ <Select
506
+ {...args}
507
+ multiselect={false}
508
+ items={items}
509
+ value={value}
510
+ onChange={setValue}
511
+ view="clear"
512
+ />
513
+ </div>
514
+ </td>
515
+ <td>
516
+ <div style={{ width: '200px' }}>
517
+ <Select
518
+ {...args}
519
+ multiselect
520
+ items={items}
521
+ value={valueMultiple}
522
+ onChange={setValueMultiple}
523
+ view="clear"
524
+ />
525
+ </div>
526
+ </td>
527
+ <td />
528
+ <td />
529
+ </tr>
530
+ <tr>
531
+ <td>Positive</td>
532
+ <td>
533
+ <div style={{ width: '200px' }}>
534
+ <Select
535
+ {...args}
536
+ multiselect={false}
537
+ items={items}
538
+ value={value}
539
+ onChange={setValue}
540
+ view="positive"
541
+ />
542
+ </div>
543
+ </td>
544
+ <td>
545
+ <div style={{ width: '200px' }}>
546
+ <Select
547
+ {...args}
548
+ multiselect
549
+ items={items}
550
+ value={valueMultiple}
551
+ onChange={setValueMultiple}
552
+ view="positive"
553
+ />
554
+ </div>
555
+ </td>
556
+ <td>
557
+ <div style={{ width: '200px' }}>
558
+ <Select
559
+ {...args}
560
+ multiselect={false}
561
+ items={items}
562
+ value={value}
563
+ onChange={setValue}
564
+ view="positive"
565
+ target="textfield"
566
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
567
+ />
568
+ </div>
569
+ </td>
570
+ <td>
571
+ <div style={{ width: '200px' }}>
572
+ <Select
573
+ {...args}
574
+ multiselect
575
+ items={items}
576
+ value={valueMultiple}
577
+ onChange={setValueMultiple}
578
+ view="positive"
579
+ target="textfield"
580
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
581
+ />
582
+ </div>
583
+ </td>
584
+ </tr>
585
+ <tr>
586
+ <td>Warning</td>
587
+ <td>
588
+ <div style={{ width: '200px' }}>
589
+ <Select
590
+ {...args}
591
+ multiselect={false}
592
+ items={items}
593
+ value={value}
594
+ onChange={setValue}
595
+ view="warning"
596
+ />
597
+ </div>
598
+ </td>
599
+ <td>
600
+ <div style={{ width: '200px' }}>
601
+ <Select
602
+ {...args}
603
+ multiselect
604
+ items={items}
605
+ value={valueMultiple}
606
+ onChange={setValueMultiple}
607
+ view="warning"
608
+ />
609
+ </div>
610
+ </td>
611
+ <td>
612
+ <div style={{ width: '200px' }}>
613
+ <Select
614
+ {...args}
615
+ multiselect={false}
616
+ items={items}
617
+ value={value}
618
+ onChange={setValue}
619
+ view="warning"
620
+ target="textfield"
621
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
622
+ />
623
+ </div>
624
+ </td>
625
+ <td>
626
+ <div style={{ width: '200px' }}>
627
+ <Select
628
+ {...args}
629
+ multiselect
630
+ items={items}
631
+ value={valueMultiple}
632
+ onChange={setValueMultiple}
633
+ view="warning"
634
+ target="textfield"
635
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
636
+ />
637
+ </div>
638
+ </td>
639
+ </tr>
640
+ <tr>
641
+ <td>Negative</td>
642
+ <td>
643
+ <div style={{ width: '200px' }}>
644
+ <Select
645
+ {...args}
646
+ multiselect={false}
647
+ items={items}
648
+ value={value}
649
+ onChange={setValue}
650
+ view="negative"
651
+ />
652
+ </div>
653
+ </td>
654
+ <td>
655
+ <div style={{ width: '200px' }}>
656
+ <Select
657
+ {...args}
658
+ multiselect
659
+ items={items}
660
+ value={valueMultiple}
661
+ onChange={setValueMultiple}
662
+ view="negative"
663
+ />
664
+ </div>
665
+ </td>
666
+ <td>
667
+ <div style={{ width: '200px' }}>
668
+ <Select
669
+ {...args}
670
+ multiselect={false}
671
+ items={items}
672
+ value={value}
673
+ onChange={setValue}
674
+ view="negative"
675
+ target="textfield"
676
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
677
+ />
678
+ </div>
679
+ </td>
680
+ <td>
681
+ <div style={{ width: '200px' }}>
682
+ <Select
683
+ {...args}
684
+ multiselect
685
+ items={items}
686
+ value={valueMultiple}
687
+ onChange={setValueMultiple}
688
+ view="negative"
689
+ target="textfield"
690
+ contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
691
+ />
692
+ </div>
693
+ </td>
694
+ </tr>
695
+ <tr>
696
+ <td>Dark</td>
697
+ <td>
698
+ <div style={{ width: '200px' }}>
699
+ <Select
700
+ {...args}
701
+ multiselect={false}
702
+ items={items}
703
+ value={value}
704
+ onChange={setValue}
705
+ view="dark"
706
+ />
707
+ </div>
708
+ </td>
709
+ <td>
710
+ <div style={{ width: '200px' }}>
711
+ <Select
712
+ {...args}
713
+ multiselect
714
+ items={items}
715
+ value={valueMultiple}
716
+ onChange={setValueMultiple}
717
+ view="dark"
718
+ />
719
+ </div>
720
+ </td>
721
+ <td />
722
+ <td />
723
+ </tr>
724
+ <tr>
725
+ <td>Black</td>
726
+ <td>
727
+ <div style={{ width: '200px' }}>
728
+ <Select
729
+ {...args}
730
+ multiselect={false}
731
+ items={items}
732
+ value={value}
733
+ onChange={setValue}
734
+ view="black"
735
+ />
736
+ </div>
737
+ </td>
738
+ <td>
739
+ <div style={{ width: '200px' }}>
740
+ <Select
741
+ {...args}
742
+ multiselect
743
+ items={items}
744
+ value={valueMultiple}
745
+ onChange={setValueMultiple}
746
+ view="black"
747
+ />
748
+ </div>
749
+ </td>
750
+ <td />
751
+ <td />
752
+ </tr>
753
+ <tr>
754
+ <td>White</td>
755
+ <td>
756
+ <div style={{ width: '200px' }}>
757
+ <Select
758
+ {...args}
759
+ multiselect={false}
760
+ items={items}
761
+ value={value}
762
+ onChange={setValue}
763
+ view="white"
764
+ />
765
+ </div>
766
+ </td>
767
+ <td>
768
+ <div style={{ width: '200px' }}>
769
+ <Select
770
+ {...args}
771
+ multiselect
772
+ items={items}
773
+ value={valueMultiple}
774
+ onChange={setValueMultiple}
775
+ view="white"
776
+ />
777
+ </div>
778
+ </td>
779
+ <td />
780
+ <td />
781
+ </tr>
782
+ </tbody>
783
+ </table>
784
+ </div>
785
+ );
786
+ };
787
+
788
+ export const Common: StoryObj<StorySelectProps> = {
789
+ parameters: {
790
+ controls: {
791
+ include: [
792
+ 'size',
793
+ 'enableContentLeft',
794
+ 'chipView',
795
+ 'label',
796
+ 'labelPlacement',
797
+ 'placeholder',
798
+ 'helperText',
799
+ 'isTargetAmount',
800
+ 'variant',
801
+ 'disabled',
802
+ ],
803
+ },
804
+ },
805
+ argTypes: {
806
+ size: {
807
+ options: size,
808
+ control: {
809
+ type: 'select',
810
+ },
811
+ },
812
+ },
813
+ args: {
814
+ size: 'm',
815
+ },
816
+ render: (args) => <CommonStory {...args} />,
817
+ };