/
examples.spec.jsx.snap
3624 lines (3535 loc) · 491 KB
/
examples.spec.jsx.snap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Alert should render examples: Alert 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LONGTEXT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"TITLE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BLOCK\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"COLOR\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">COLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGEICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGEICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"NOICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">NOICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SQUARE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONONE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONTWO\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"CLOSE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CLOSE</span></label>
</div>
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-primary-standard MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-6\\">Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.</div>
</div>
</div>"
`;
exports[`Alert should render examples: Alert 2`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"TITLE\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BLOCK\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"CLOSE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CLOSE</span></label>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-primary-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-7\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-secondary-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-8\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-success-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zM13.414 24.586a2 2 0 00-2.828 2.828l7 7a2 2 0 002.828 0l15-15a2 2 0 00-2.828-2.828L19 30.172l-5.586-5.586z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-9\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardError cozyAlert-error-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-10\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardWarning cozyAlert-warning-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-11\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardInfo cozyAlert-info-standard action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-12\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<hr>
<p class=\\"MuiTypography-root MuiTypography-h4 MuiTypography-colorTextPrimary MuiTypography-paragraph\\">Filled variant</p>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyAlert-primary-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-13\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyAlert-secondary-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-14\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyAlert-success-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zM13.414 24.586a2 2 0 00-2.828 2.828l7 7a2 2 0 002.828 0l15-15a2 2 0 00-2.828-2.828L19 30.172l-5.586-5.586z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-15\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledError cozyAlert-error-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-16\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledWarning cozyAlert-warning-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-17\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledInfo cozyAlert-info-filled action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-18\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<hr>
<p class=\\"MuiTypography-root MuiTypography-h4 MuiTypography-colorTextPrimary MuiTypography-paragraph\\">Outlined variant</p>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyAlert-primary-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-19\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyAlert-secondary-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-20\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyAlert-success-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zM13.414 24.586a2 2 0 00-2.828 2.828l7 7a2 2 0 002.828 0l15-15a2 2 0 00-2.828-2.828L19 30.172l-5.586-5.586z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-21\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedError cozyAlert-error-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-22\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedWarning cozyAlert-warning-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-23\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
<div class=\\"u-mb-1\\">
<div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedInfo cozyAlert-info-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
<div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<defs>
<path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
</defs>
<use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
</svg></div>
<div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-24\\">
<div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
</div>
<div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
</div>
</div>
</div>"
`;
exports[`AppTitle should render examples: AppTitle 1`] = `
"<div data-testid=\\"mountNode\\">
<h1 class=\\"MuiTypography-root styles__c-apptitle___eqV9l MuiTypography-h4\\">Drive</h1>
</div>"
`;
exports[`Avatar should render examples: Avatar 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DISABLED\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DISABLED</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"GHOST\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">GHOST</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"OVERLAP\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label>
</div>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 16px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 16px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 16px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 16px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 16px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 32px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 32px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 32px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 32px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 32px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 40px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 40px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 40px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 40px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 40px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 40px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 48px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 48px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 48px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 48px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 48px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 48px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 64px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 64px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 64px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 64px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 64px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 64px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
<hr>
<div class=\\"u-flex u-mb-half\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 24px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 24px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"--circleSize: 24px;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 24px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
</svg></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(61, 166, 126); --circleSize: 24px; color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI-\\" style=\\"--circleSize: 24px;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
</svg></div>
</div>
</div>"
`;
exports[`Badge should render examples: Badge 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"OVERLAP\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ERROR\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ERROR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DOT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"WITHBORDER\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBORDER</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LEFT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LEFT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BOTTOM\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BOTTOM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SMALL\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label>
</div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span>
</div>"
`;
exports[`Badge should render examples: Badge 2`] = `"<div data-testid=\\"mountNode\\"><span class=\\"MuiBadge-root\\"><div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div><span class=\\"MuiBadge-badge Component-qualifier-25 MuiBadge-anchorOriginBottomRightCircular\\"><span class=\\"MuiBadge-root\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge badgeSizeSmall badgeBorder MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError MuiBadge-dot\\"></span></span></span></span></div>"`;
exports[`Banner should render examples: Banner 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ICON\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LONGTEXT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BUTTONONE\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BUTTONTWO\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"INLINE\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">INLINE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BACKGROUNDCOLOR\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BACKGROUNDCOLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DISABLEICONSTYLES\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DISABLEICONSTYLES</span></label>
</div>
<div class=\\"MuiPaper-root MuiPaper-elevation0\\">
<div class=\\"styles__c-banner-wrapper___3KlaG\\">
<div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between\\">
<div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-lg-8\\">
<div class=\\"MuiGrid-root MuiGrid-item\\">
<div class=\\"styles__c-banner-icon___1f_LM\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<g fill=\\"none\\" fill-rule=\\"evenodd\\">
<path fill=\\"#32363F\\" d=\\"M2 25V5.995C2 4.893 2.9 4 3.991 4H28.01C29.109 4 30 4.902 30 5.995V25H2z\\"></path>
<path fill=\\"#5D6165\\" d=\\"M4 6h24v16H4z\\"></path>
<path fill=\\"#95999D\\" d=\\"M19 24.5c0 .276-.233.5-.503.5h-5.994a.507.507 0 01-.503-.5c0-.276-.229-.5-.5-.5H.5c-.276 0-.5.215-.5.49V26c0 1.105.89 2 2.002 2h27.996A1.996 1.996 0 0032 26v-1.51c0-.27-.226-.49-.494-.49H19.494a.502.502 0 00-.494.5z\\"></path>
</g>
</svg></div>
</div>
<div class=\\"MuiGrid-root styles__c-banner-text___1sTVC MuiGrid-item\\">
<p class=\\"MuiTypography-root MuiTypography-body2 MuiTypography-colorTextPrimary\\">Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.</p>
</div>
</div>
<div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-flex-end MuiGrid-grid-xs-12 MuiGrid-grid-lg-4\\">
<div class=\\"MuiGrid-root styles__c-banner-buttons___3sLgG MuiGrid-item\\"><button type=\\"submit\\" class=\\"styles__c-btn___3kXsk styles__c-btn--text___33vmu styles__c-btn--center___Nny0n\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path></svg><span>Download</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___3kXsk styles__c-btn--text___33vmu styles__c-btn--center___Nny0n\\"><span><span>No, thanks!</span></span></button></div>
</div>
</div>
</div>
</div>
<hr class=\\"MuiDivider-root\\">
</div>"
`;
exports[`BarButton should render examples: BarButton 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"styles__BarButton___3z5Er styles__BarButton--disabled___5e3Ll\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M3.414 7h11.58C15.548 7 16 7.444 16 8c0 .552-.45 1-1.007 1H3.414l5.293 5.293a1 1 0 01-1.414 1.414l-7-7a1 1 0 010-1.414l7-7a1 1 0 111.414 1.414L3.414 7z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>"
`;
exports[`BarButton should render examples: BarButton 2`] = `
"<div data-testid=\\"mountNode\\"><a href=\\"http://cozy.io\\" class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M7 6.414L5.707 7.707a1 1 0 01-1.414-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L9 6.414V14a1 1 0 11-2 0V6.414zM1 2h14a1 1 0 100-2H1a1 1 0 100 2z\\"></path>
</svg></a></div>"
`;
exports[`BarButton should render examples: BarButton 3`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z\\"></path>
</svg></div>
</div>"
`;
exports[`BarButton should render examples: BarButton 4`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M14.25 7.078c.051.26.077.568.077.926 0 .358-.026.665-.078.925l1.62 1.333c.131.086.163.203.099.352-.325.95-.859 1.826-1.602 2.628-.104.124-.229.155-.37.094l-2.032-.668c-.52.396-1.08.705-1.68.926l-.409 2c-.026.146-.117.233-.273.258-.56.1-1.094.148-1.602.148a9.21 9.21 0 01-1.601-.148c-.157-.024-.248-.11-.274-.259l-.409-1.999a5.98 5.98 0 01-1.68-.926l-2.03.668c-.145.062-.268.03-.372-.094C.892 12.44.359 11.565.032 10.614c-.065-.148-.032-.266.098-.352L1.751 8.93a4.761 4.761 0 01-.078-.925c0-.358.026-.667.078-.926L.131 5.746C0 5.66-.034 5.542.031 5.394c.326-.95.86-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667a5.99 5.99 0 011.68-.926l.41-1.999c.025-.148.116-.234.273-.259a8.221 8.221 0 013.202 0c.156.024.247.111.273.26l.41 1.998c.6.223 1.159.53 1.68.926l2.03-.667c.143-.062.267-.03.371.093.742.802 1.276 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zM8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>"
`;
exports[`Buttons should render examples: Buttons 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>default</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>disabled</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>busy</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 2`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>small</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>medium</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>large</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 3`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>label is only icon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 4`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon - small</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon - medium</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon - large</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon - small</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeSmall\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon - medium</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon - large</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeLarge\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 5`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>success</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>error</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>warning</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>info</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 6`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>success</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>error</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>warning</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>info</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Buttons should render examples: Buttons 7`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>success</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>error</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>warning</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>info</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
</div>
</div>
</div>
</div>"
`;
exports[`Card should render examples: Card 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"styles__c-card___YgP7B\\">
<h6 class=\\"MuiTypography-root u-mb-1 MuiTypography-h6 MuiTypography-colorTextPrimary\\">This is a card</h6>
<p class=\\"MuiTypography-root u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">This is some card content. Content can be small or huge.</p><button type=\\"submit\\" class=\\"styles__c-btn___3kXsk styles__c-btn--center___Nny0n u-ml-0\\"><span><span>Demo button</span></span></button>
</div>
</div>"
`;
exports[`Card should render examples: Card 2`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"styles__c-card___YgP7B styles__c-card--inset___2pofc\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">This is some card content. Content can be small or huge. Also, it has margins.</p>
</div>
</div>"
`;
exports[`Card should render examples: Card 3`] = `
"<div data-testid=\\"mountNode\\"><a class=\\"styles__c-card___YgP7B\\" href=\\"https://cozy.io\\" target=\\"_blank\\">
<h6 class=\\"MuiTypography-root MuiTypography-h6 MuiTypography-colorTextPrimary\\">Visit cozy.io</h6>
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">To learn more about us</p>
</a></div>"
`;
exports[`Checkbox should render examples: Checkbox 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-sm-3\\">
<div><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Checkbox\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Checked checkbox\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Checked checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-indeterminate MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Mixed checkbox\\" aria-checked=\\"mixed\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Mixed checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-indeterminate PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Mixed checked checkbox\\" aria-checked=\\"mixed\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Mixed checked checkbox</span></label></div>
</div>
<div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-sm-3\\">
<div><label class=\\"MuiFormControlLabel-root Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorPrimary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Disabled checkbox\\" aria-checked=\\"\\" aria-disabled=\\"true\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Disabled checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorPrimary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Disabled checked checkbox\\" aria-checked=\\"\\" aria-disabled=\\"true\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Disabled checked checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-indeterminate PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorPrimary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Disabled mixed checkbox\\" aria-checked=\\"mixed\\" aria-disabled=\\"true\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Disabled mixed checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-indeterminate PrivateSwitchBase-checked-2 Mui-checked PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorPrimary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Disabled mixed checked checkbox\\" aria-checked=\\"mixed\\" aria-disabled=\\"true\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Disabled mixed checked checkbox</span></label></div>
</div>
<div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-sm-3\\">
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Error checkbox\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Error checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorSecondary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Error checked checkbox\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Error checked checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiCheckbox-indeterminate MuiIconButton-colorSecondary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Error mixed checkbox\\" aria-checked=\\"mixed\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Error mixed checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiCheckbox-indeterminate PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorSecondary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Error mixed checked checkbox\\" aria-checked=\\"mixed\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Error mixed checked checkbox</span></label></div>
</div>
<div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-sm-3\\">
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorSecondary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Error disabled checkbox\\" aria-checked=\\"\\" aria-disabled=\\"true\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Error disabled checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-2 Mui-checked PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorSecondary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"Error disabled checked checkbox\\" aria-checked=\\"\\" aria-disabled=\\"true\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Error disabled checked checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiCheckbox-indeterminate PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorSecondary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Error disabled mixed checkbox\\" aria-checked=\\"mixed\\" aria-disabled=\\"true\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Error disabled mixed checkbox</span></label></div>
<div><label class=\\"MuiFormControlLabel-root FormControlLabel-error Mui-disabled\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiCheckbox-indeterminate PrivateSwitchBase-checked-2 Mui-checked PrivateSwitchBase-disabled-3 Mui-disabled MuiIconButton-colorSecondary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" aria-disabled=\\"true\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" disabled=\\"\\" type=\\"checkbox\\" data-indeterminate=\\"true\\" aria-label=\\"Error disabled mixed checked checkbox\\" aria-checked=\\"mixed\\" aria-disabled=\\"true\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label Mui-disabled MuiTypography-body1\\">Error disabled mixed checked checkbox</span></label></div>
</div>
</div>
</div>"
`;
exports[`Checkbox should render examples: Checkbox 2`] = `
"<div data-testid=\\"mountNode\\">
<div><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"[object Object]\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">This is a <strong>complex</strong> text</span></label></div>
</div>"
`;
exports[`Chips should render examples: Chips 1`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5>
<div class=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"radio\\"><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"default\\" checked=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DEFAULT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"active\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIVE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"ghost\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">GHOST</span></label></div>
</div>
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">default</p>
<div>
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
</div>
<div>
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
</div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root u-ml-1 customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon and class</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
</svg><span class=\\"MuiChip-label\\"></span></div>
</div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">disabled</p>
<div>
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
</div>
<div>
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
</div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root u-ml-1 customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon and class</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
</svg><span class=\\"MuiChip-label\\"></span></div>
</div>
</div>
</div>
</div>
</div>"
`;
exports[`Chips should render examples: Chips 2`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5>
<div class=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"radio\\"><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"default\\" checked=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DEFAULT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"active\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIVE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"ghost\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">GHOST</span></label></div>
</div>
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">success</p>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">error</p>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">warning</p>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">info</p>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
<div>
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
</svg></div>
</div>
</div>
</div>
</div>
</div>"
`;
exports[`ContactsList should render examples: ContactsList 1`] = `
"<div data-testid=\\"mountNode\\">
<div style=\\"height: 500px; overflow-y: scroll;\\">
<div class=\\"styles__Table___x3ZsI\\">
<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\">
<li class=\\"MuiListSubheader-root MuiListSubheader-sticky MuiListSubheader-gutters makeStyles-gutters-26 makeStyles-gutters-27\\" gutters=\\"double\\">EMPTY</li>
<li class=\\"MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-28 makeStyles-gutters-30\\" data-testid=\\"contact-listItem\\" id=\\"013a6414-9727-4a4e-8b35-d3b9946a17c6\\">
<div class=\\"styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis u-p-0\\" data-testid=\\"ContactIdentity\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(64, 222, 142); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">I</span></div>
<p class=\\"MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline\\" data-testid=\\"ContactName\\"><span class=\\"\\">isabelle.durand@cozycloud.cc </span></p>
</div>
<div class=\\"styles__TableCell___yJCq7 styles__contact-email___3n3q2 u-ellipsis u-p-0\\" data-testid=\\"ContactEmail\\">isabelle.durand@cozycloud.cc</div>
<div class=\\"styles__TableCell___yJCq7 styles__contact-phone___1sA_m u-ellipsis u-p-0\\" data-testid=\\"ContactPhone\\">—</div>
<div class=\\"styles__TableCell___yJCq7 styles__contact-cozyurl___3kBp5 u-ellipsis u-p-0\\" data-testid=\\"ContactCozy\\">—</div>
</li>
</ul>
<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\">
<li class=\\"MuiListSubheader-root MuiListSubheader-sticky MuiListSubheader-gutters makeStyles-gutters-26 makeStyles-gutters-32\\" gutters=\\"double\\">A</li>
<li class=\\"MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-28 makeStyles-gutters-33\\" data-testid=\\"contact-listItem\\" id=\\"013a6413-9726-4a4d-8b34-d3b9946a17c5\\">
<div class=\\"styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis u-p-0\\" data-testid=\\"ContactIdentity\\">
<div data-testid=\\"Avatar\\" class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">A</span></div>
<p class=\\"MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline\\" data-testid=\\"ContactName\\"><span class=\\"\\">alexis.bickers@logico.club </span></p>
</div>
<div class=\\"styles__TableCell___yJCq7 styles__contact-email___3n3q2 u-ellipsis u-p-0\\" data-testid=\\"ContactEmail\\">alexis.bickers@logico.club</div>