@khanacademy/wonder-blocks-modal 2.3.5 → 2.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/es/index.js +18 -69
  3. package/dist/index.js +180 -164
  4. package/package.json +8 -8
  5. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +208 -208
  6. package/src/components/__docs__/modal-dialog.stories.js +308 -0
  7. package/src/components/__docs__/modal-footer.stories.js +337 -0
  8. package/src/components/__docs__/modal-header.argtypes.js +76 -0
  9. package/src/components/__docs__/modal-header.stories.js +294 -0
  10. package/src/components/__docs__/modal-launcher.argtypes.js +78 -0
  11. package/src/components/__docs__/modal-launcher.stories.js +512 -0
  12. package/src/components/__docs__/modal-panel.stories.js +414 -0
  13. package/src/components/__docs__/one-pane-dialog.argtypes.js +102 -0
  14. package/src/components/__docs__/one-pane-dialog.stories.js +582 -0
  15. package/src/components/__tests__/focus-trap.test.js +101 -0
  16. package/src/components/focus-trap.js +47 -98
  17. package/src/components/modal-footer.js +8 -0
  18. package/src/components/one-pane-dialog.js +26 -1
  19. package/src/components/one-pane-dialog.stories.js +0 -248
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`wonder-blocks-modal example 1 1`] = `
4
4
  <div
5
5
  className=""
6
6
  style={
7
- Object {
7
+ {
8
8
  "alignItems": "center",
9
9
  "borderStyle": "solid",
10
10
  "borderWidth": 0,
@@ -38,11 +38,11 @@ exports[`wonder-blocks-modal example 1 1`] = `
38
38
  onTouchStart={[Function]}
39
39
  role="button"
40
40
  style={
41
- Object {
42
- "::MozFocusInner": Object {
41
+ {
42
+ "::MozFocusInner": {
43
43
  "border": 0,
44
44
  },
45
- ":focus": Object {
45
+ ":focus": {
46
46
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
47
47
  },
48
48
  "alignItems": "center",
@@ -73,12 +73,12 @@ exports[`wonder-blocks-modal example 1 1`] = `
73
73
  <span
74
74
  className=""
75
75
  style={
76
- Object {
76
+ {
77
77
  "MozOsxFontSmoothing": "grayscale",
78
78
  "WebkitFontSmoothing": "antialiased",
79
79
  "alignItems": "center",
80
80
  "display": "inline-block",
81
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
81
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
82
82
  "fontSize": 16,
83
83
  "fontWeight": "bold",
84
84
  "lineHeight": "20px",
@@ -99,7 +99,7 @@ exports[`wonder-blocks-modal example 2 1`] = `
99
99
  <div
100
100
  className=""
101
101
  style={
102
- Object {
102
+ {
103
103
  "alignItems": "center",
104
104
  "borderStyle": "solid",
105
105
  "borderWidth": 0,
@@ -133,11 +133,11 @@ exports[`wonder-blocks-modal example 2 1`] = `
133
133
  onTouchStart={[Function]}
134
134
  role="button"
135
135
  style={
136
- Object {
137
- "::MozFocusInner": Object {
136
+ {
137
+ "::MozFocusInner": {
138
138
  "border": 0,
139
139
  },
140
- ":focus": Object {
140
+ ":focus": {
141
141
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
142
142
  },
143
143
  "alignItems": "center",
@@ -168,12 +168,12 @@ exports[`wonder-blocks-modal example 2 1`] = `
168
168
  <span
169
169
  className=""
170
170
  style={
171
- Object {
171
+ {
172
172
  "MozOsxFontSmoothing": "grayscale",
173
173
  "WebkitFontSmoothing": "antialiased",
174
174
  "alignItems": "center",
175
175
  "display": "inline-block",
176
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
176
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
177
177
  "fontSize": 16,
178
178
  "fontWeight": "bold",
179
179
  "lineHeight": "20px",
@@ -194,7 +194,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
194
194
  <div
195
195
  className=""
196
196
  style={
197
- Object {
197
+ {
198
198
  "alignItems": "stretch",
199
199
  "borderStyle": "solid",
200
200
  "borderWidth": 0,
@@ -215,7 +215,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
215
215
  onKeyDown={[Function]}
216
216
  onKeyUp={[Function]}
217
217
  style={
218
- Object {
218
+ {
219
219
  "alignItems": "stretch",
220
220
  "borderStyle": "solid",
221
221
  "borderWidth": 0,
@@ -239,7 +239,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
239
239
  className=""
240
240
  data-test-id="dropdown-live-region"
241
241
  style={
242
- Object {
242
+ {
243
243
  "border": 0,
244
244
  "clip": "rect(0,0,0,0)",
245
245
  "height": 1,
@@ -270,11 +270,11 @@ exports[`wonder-blocks-modal example 3 1`] = `
270
270
  onTouchEnd={[Function]}
271
271
  onTouchStart={[Function]}
272
272
  style={
273
- Object {
274
- "::MozFocusInner": Object {
273
+ {
274
+ "::MozFocusInner": {
275
275
  "border": 0,
276
276
  },
277
- ":focus": Object {
277
+ ":focus": {
278
278
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
279
279
  },
280
280
  "alignItems": "center",
@@ -300,7 +300,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
300
300
  <div
301
301
  className=""
302
302
  style={
303
- Object {
303
+ {
304
304
  "alignItems": "stretch",
305
305
  "borderStyle": "solid",
306
306
  "borderWidth": 0,
@@ -319,12 +319,12 @@ exports[`wonder-blocks-modal example 3 1`] = `
319
319
  <span
320
320
  className=""
321
321
  style={
322
- Object {
322
+ {
323
323
  "MozOsxFontSmoothing": "grayscale",
324
324
  "WebkitFontSmoothing": "antialiased",
325
325
  "alignItems": "center",
326
326
  "display": "inline-block",
327
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
327
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
328
328
  "fontSize": 16,
329
329
  "fontWeight": "bold",
330
330
  "lineHeight": "20px",
@@ -344,7 +344,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
344
344
  aria-hidden="true"
345
345
  className=""
346
346
  style={
347
- Object {
347
+ {
348
348
  "MsFlexBasis": 4,
349
349
  "MsFlexPreferredSize": 4,
350
350
  "WebkitFlexBasis": 4,
@@ -370,7 +370,7 @@ exports[`wonder-blocks-modal example 3 1`] = `
370
370
  className=""
371
371
  height={16}
372
372
  style={
373
- Object {
373
+ {
374
374
  "display": "inline-block",
375
375
  "flexGrow": 0,
376
376
  "flexShrink": 0,
@@ -394,7 +394,7 @@ exports[`wonder-blocks-modal example 4 1`] = `
394
394
  <div
395
395
  className=""
396
396
  style={
397
- Object {
397
+ {
398
398
  "alignItems": "center",
399
399
  "borderStyle": "solid",
400
400
  "borderWidth": 0,
@@ -428,11 +428,11 @@ exports[`wonder-blocks-modal example 4 1`] = `
428
428
  onTouchStart={[Function]}
429
429
  role="button"
430
430
  style={
431
- Object {
432
- "::MozFocusInner": Object {
431
+ {
432
+ "::MozFocusInner": {
433
433
  "border": 0,
434
434
  },
435
- ":focus": Object {
435
+ ":focus": {
436
436
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
437
437
  },
438
438
  "alignItems": "center",
@@ -463,12 +463,12 @@ exports[`wonder-blocks-modal example 4 1`] = `
463
463
  <span
464
464
  className=""
465
465
  style={
466
- Object {
466
+ {
467
467
  "MozOsxFontSmoothing": "grayscale",
468
468
  "WebkitFontSmoothing": "antialiased",
469
469
  "alignItems": "center",
470
470
  "display": "inline-block",
471
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
471
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
472
472
  "fontSize": 16,
473
473
  "fontWeight": "bold",
474
474
  "lineHeight": "20px",
@@ -489,7 +489,7 @@ exports[`wonder-blocks-modal example 5 1`] = `
489
489
  <div
490
490
  className=""
491
491
  style={
492
- Object {
492
+ {
493
493
  "alignItems": "center",
494
494
  "borderStyle": "solid",
495
495
  "borderWidth": 0,
@@ -523,11 +523,11 @@ exports[`wonder-blocks-modal example 5 1`] = `
523
523
  onTouchStart={[Function]}
524
524
  role="button"
525
525
  style={
526
- Object {
527
- "::MozFocusInner": Object {
526
+ {
527
+ "::MozFocusInner": {
528
528
  "border": 0,
529
529
  },
530
- ":focus": Object {
530
+ ":focus": {
531
531
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
532
532
  },
533
533
  "alignItems": "center",
@@ -558,12 +558,12 @@ exports[`wonder-blocks-modal example 5 1`] = `
558
558
  <span
559
559
  className=""
560
560
  style={
561
- Object {
561
+ {
562
562
  "MozOsxFontSmoothing": "grayscale",
563
563
  "WebkitFontSmoothing": "antialiased",
564
564
  "alignItems": "center",
565
565
  "display": "inline-block",
566
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
566
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
567
567
  "fontSize": 16,
568
568
  "fontWeight": "bold",
569
569
  "lineHeight": "20px",
@@ -584,7 +584,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
584
584
  <div
585
585
  className=""
586
586
  style={
587
- Object {
587
+ {
588
588
  "alignItems": "stretch",
589
589
  "borderStyle": "solid",
590
590
  "borderWidth": 0,
@@ -604,7 +604,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
604
604
  <div
605
605
  className=""
606
606
  style={
607
- Object {
607
+ {
608
608
  "alignItems": "center",
609
609
  "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
610
610
  "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
@@ -631,7 +631,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
631
631
  <div
632
632
  className=""
633
633
  style={
634
- Object {
634
+ {
635
635
  "alignItems": "stretch",
636
636
  "borderStyle": "solid",
637
637
  "borderWidth": 0,
@@ -654,7 +654,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
654
654
  <div
655
655
  className=""
656
656
  style={
657
- Object {
657
+ {
658
658
  "alignItems": "stretch",
659
659
  "borderStyle": "solid",
660
660
  "borderWidth": 0,
@@ -678,7 +678,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
678
678
  <div
679
679
  className=""
680
680
  style={
681
- Object {
681
+ {
682
682
  "alignItems": "stretch",
683
683
  "background": "url(/blue-blob.png)",
684
684
  "backgroundSize": "cover",
@@ -707,7 +707,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
707
707
  className=""
708
708
  role="dialog"
709
709
  style={
710
- Object {
710
+ {
711
711
  "alignItems": "stretch",
712
712
  "borderRadius": 4,
713
713
  "borderStyle": "solid",
@@ -730,7 +730,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
730
730
  <div
731
731
  className=""
732
732
  style={
733
- Object {
733
+ {
734
734
  "alignItems": "stretch",
735
735
  "background": "white",
736
736
  "borderStyle": "solid",
@@ -769,11 +769,11 @@ exports[`wonder-blocks-modal example 6 1`] = `
769
769
  onTouchEnd={[Function]}
770
770
  onTouchStart={[Function]}
771
771
  style={
772
- Object {
773
- "::MozFocusInner": Object {
772
+ {
773
+ "::MozFocusInner": {
774
774
  "border": 0,
775
775
  },
776
- ":focus": Object {
776
+ ":focus": {
777
777
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
778
778
  },
779
779
  "alignItems": "center",
@@ -804,7 +804,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
804
804
  className=""
805
805
  height={24}
806
806
  style={
807
- Object {
807
+ {
808
808
  "display": "inline-block",
809
809
  "flexGrow": 0,
810
810
  "flexShrink": 0,
@@ -823,7 +823,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
823
823
  <div
824
824
  className=""
825
825
  style={
826
- Object {
826
+ {
827
827
  "alignItems": "stretch",
828
828
  "borderStyle": "solid",
829
829
  "borderWidth": 0,
@@ -845,19 +845,19 @@ exports[`wonder-blocks-modal example 6 1`] = `
845
845
  className=""
846
846
  id="uid-modal-0-wb-id"
847
847
  style={
848
- Object {
849
- "@media (maxWidth: 1023px)": Object {
848
+ {
849
+ "@media (maxWidth: 1023px)": {
850
850
  "fontSize": 22,
851
851
  "lineHeight": "26px",
852
852
  },
853
- "@media (minWidth: 1024px)": Object {
853
+ "@media (minWidth: 1024px)": {
854
854
  "fontSize": 24,
855
855
  "lineHeight": "28px",
856
856
  },
857
857
  "MozOsxFontSmoothing": "grayscale",
858
858
  "WebkitFontSmoothing": "antialiased",
859
859
  "display": "block",
860
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
860
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
861
861
  "fontWeight": 700,
862
862
  "marginBottom": 0,
863
863
  "marginTop": 0,
@@ -871,7 +871,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
871
871
  <div
872
872
  className=""
873
873
  style={
874
- Object {
874
+ {
875
875
  "alignItems": "stretch",
876
876
  "borderStyle": "solid",
877
877
  "borderWidth": 0,
@@ -892,7 +892,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
892
892
  <div
893
893
  className=""
894
894
  style={
895
- Object {
895
+ {
896
896
  "alignItems": "stretch",
897
897
  "borderStyle": "solid",
898
898
  "borderWidth": 0,
@@ -912,7 +912,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
912
912
  <div
913
913
  className=""
914
914
  style={
915
- Object {
915
+ {
916
916
  "alignItems": "stretch",
917
917
  "borderStyle": "solid",
918
918
  "borderWidth": 0,
@@ -931,11 +931,11 @@ exports[`wonder-blocks-modal example 6 1`] = `
931
931
  <span
932
932
  className=""
933
933
  style={
934
- Object {
934
+ {
935
935
  "MozOsxFontSmoothing": "grayscale",
936
936
  "WebkitFontSmoothing": "antialiased",
937
937
  "display": "block",
938
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
938
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
939
939
  "fontSize": 16,
940
940
  "fontWeight": 400,
941
941
  "lineHeight": "22px",
@@ -952,7 +952,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
952
952
  <div
953
953
  className=""
954
954
  style={
955
- Object {
955
+ {
956
956
  "alignItems": "stretch",
957
957
  "borderStyle": "solid",
958
958
  "borderWidth": 0,
@@ -976,7 +976,7 @@ exports[`wonder-blocks-modal example 6 1`] = `
976
976
  <div
977
977
  className=""
978
978
  style={
979
- Object {
979
+ {
980
980
  "alignItems": "stretch",
981
981
  "background": "url(/asteroid.png)",
982
982
  "backgroundSize": "cover",
@@ -1008,7 +1008,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1008
1008
  <div
1009
1009
  className=""
1010
1010
  style={
1011
- Object {
1011
+ {
1012
1012
  "alignItems": "stretch",
1013
1013
  "borderStyle": "solid",
1014
1014
  "borderWidth": 0,
@@ -1028,7 +1028,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1028
1028
  <div
1029
1029
  className=""
1030
1030
  style={
1031
- Object {
1031
+ {
1032
1032
  "alignItems": "center",
1033
1033
  "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
1034
1034
  "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
@@ -1055,7 +1055,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1055
1055
  <div
1056
1056
  className=""
1057
1057
  style={
1058
- Object {
1058
+ {
1059
1059
  "alignItems": "stretch",
1060
1060
  "borderStyle": "solid",
1061
1061
  "borderWidth": 0,
@@ -1082,7 +1082,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1082
1082
  data-test-id="one-pane-dialog-above"
1083
1083
  role="dialog"
1084
1084
  style={
1085
- Object {
1085
+ {
1086
1086
  "alignItems": "stretch",
1087
1087
  "borderRadius": 4,
1088
1088
  "borderStyle": "solid",
@@ -1106,7 +1106,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1106
1106
  className=""
1107
1107
  data-test-id="one-pane-dialog-above-panel"
1108
1108
  style={
1109
- Object {
1109
+ {
1110
1110
  "alignItems": "stretch",
1111
1111
  "background": "white",
1112
1112
  "borderStyle": "solid",
@@ -1146,11 +1146,11 @@ exports[`wonder-blocks-modal example 7 1`] = `
1146
1146
  onTouchEnd={[Function]}
1147
1147
  onTouchStart={[Function]}
1148
1148
  style={
1149
- Object {
1150
- "::MozFocusInner": Object {
1149
+ {
1150
+ "::MozFocusInner": {
1151
1151
  "border": 0,
1152
1152
  },
1153
- ":focus": Object {
1153
+ ":focus": {
1154
1154
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1155
1155
  },
1156
1156
  "alignItems": "center",
@@ -1181,7 +1181,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1181
1181
  className=""
1182
1182
  height={24}
1183
1183
  style={
1184
- Object {
1184
+ {
1185
1185
  "display": "inline-block",
1186
1186
  "flexGrow": 0,
1187
1187
  "flexShrink": 0,
@@ -1201,7 +1201,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1201
1201
  className=""
1202
1202
  data-test-id="one-pane-dialog-above-header"
1203
1203
  style={
1204
- Object {
1204
+ {
1205
1205
  "alignItems": "stretch",
1206
1206
  "borderStyle": "solid",
1207
1207
  "borderWidth": 0,
@@ -1224,19 +1224,19 @@ exports[`wonder-blocks-modal example 7 1`] = `
1224
1224
  data-test-id="one-pane-dialog-above-header-title"
1225
1225
  id="uid-modal-1-wb-id"
1226
1226
  style={
1227
- Object {
1228
- "@media (maxWidth: 1023px)": Object {
1227
+ {
1228
+ "@media (maxWidth: 1023px)": {
1229
1229
  "fontSize": 22,
1230
1230
  "lineHeight": "26px",
1231
1231
  },
1232
- "@media (minWidth: 1024px)": Object {
1232
+ "@media (minWidth: 1024px)": {
1233
1233
  "fontSize": 24,
1234
1234
  "lineHeight": "28px",
1235
1235
  },
1236
1236
  "MozOsxFontSmoothing": "grayscale",
1237
1237
  "WebkitFontSmoothing": "antialiased",
1238
1238
  "display": "block",
1239
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1239
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1240
1240
  "fontWeight": 700,
1241
1241
  "marginBottom": 0,
1242
1242
  "marginTop": 0,
@@ -1250,12 +1250,12 @@ exports[`wonder-blocks-modal example 7 1`] = `
1250
1250
  className=""
1251
1251
  data-test-id="one-pane-dialog-above-header-subtitle"
1252
1252
  style={
1253
- Object {
1253
+ {
1254
1254
  "MozOsxFontSmoothing": "grayscale",
1255
1255
  "WebkitFontSmoothing": "antialiased",
1256
1256
  "color": "rgba(33,36,44,0.64)",
1257
1257
  "display": "block",
1258
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1258
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1259
1259
  "fontSize": 14,
1260
1260
  "fontWeight": 400,
1261
1261
  "lineHeight": "18px",
@@ -1269,7 +1269,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1269
1269
  <div
1270
1270
  className=""
1271
1271
  style={
1272
- Object {
1272
+ {
1273
1273
  "alignItems": "stretch",
1274
1274
  "borderStyle": "solid",
1275
1275
  "borderWidth": 0,
@@ -1290,7 +1290,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1290
1290
  <div
1291
1291
  className=""
1292
1292
  style={
1293
- Object {
1293
+ {
1294
1294
  "alignItems": "stretch",
1295
1295
  "borderStyle": "solid",
1296
1296
  "borderWidth": 0,
@@ -1311,7 +1311,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1311
1311
  <div
1312
1312
  className=""
1313
1313
  style={
1314
- Object {
1314
+ {
1315
1315
  "alignItems": "stretch",
1316
1316
  "borderStyle": "solid",
1317
1317
  "borderWidth": 0,
@@ -1331,11 +1331,11 @@ exports[`wonder-blocks-modal example 7 1`] = `
1331
1331
  <span
1332
1332
  className=""
1333
1333
  style={
1334
- Object {
1334
+ {
1335
1335
  "MozOsxFontSmoothing": "grayscale",
1336
1336
  "WebkitFontSmoothing": "antialiased",
1337
1337
  "display": "block",
1338
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1338
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1339
1339
  "fontSize": 16,
1340
1340
  "fontWeight": 400,
1341
1341
  "lineHeight": "22px",
@@ -1347,11 +1347,11 @@ exports[`wonder-blocks-modal example 7 1`] = `
1347
1347
  <span
1348
1348
  className=""
1349
1349
  style={
1350
- Object {
1350
+ {
1351
1351
  "MozOsxFontSmoothing": "grayscale",
1352
1352
  "WebkitFontSmoothing": "antialiased",
1353
1353
  "display": "block",
1354
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1354
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1355
1355
  "fontSize": 16,
1356
1356
  "fontWeight": 400,
1357
1357
  "lineHeight": "22px",
@@ -1363,11 +1363,11 @@ exports[`wonder-blocks-modal example 7 1`] = `
1363
1363
  <span
1364
1364
  className=""
1365
1365
  style={
1366
- Object {
1366
+ {
1367
1367
  "MozOsxFontSmoothing": "grayscale",
1368
1368
  "WebkitFontSmoothing": "antialiased",
1369
1369
  "display": "block",
1370
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1370
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1371
1371
  "fontSize": 16,
1372
1372
  "fontWeight": 400,
1373
1373
  "lineHeight": "22px",
@@ -1382,7 +1382,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1382
1382
  <div
1383
1383
  className=""
1384
1384
  style={
1385
- Object {
1385
+ {
1386
1386
  "alignItems": "center",
1387
1387
  "borderStyle": "solid",
1388
1388
  "borderWidth": 0,
@@ -1423,11 +1423,11 @@ exports[`wonder-blocks-modal example 7 1`] = `
1423
1423
  onTouchStart={[Function]}
1424
1424
  role="button"
1425
1425
  style={
1426
- Object {
1427
- "::MozFocusInner": Object {
1426
+ {
1427
+ "::MozFocusInner": {
1428
1428
  "border": 0,
1429
1429
  },
1430
- ":focus": Object {
1430
+ ":focus": {
1431
1431
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1432
1432
  },
1433
1433
  "alignItems": "center",
@@ -1458,12 +1458,12 @@ exports[`wonder-blocks-modal example 7 1`] = `
1458
1458
  <span
1459
1459
  className=""
1460
1460
  style={
1461
- Object {
1461
+ {
1462
1462
  "MozOsxFontSmoothing": "grayscale",
1463
1463
  "WebkitFontSmoothing": "antialiased",
1464
1464
  "alignItems": "center",
1465
1465
  "display": "inline-block",
1466
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1466
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1467
1467
  "fontSize": 16,
1468
1468
  "fontWeight": "bold",
1469
1469
  "lineHeight": "20px",
@@ -1483,7 +1483,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1483
1483
  <div
1484
1484
  className=""
1485
1485
  style={
1486
- Object {
1486
+ {
1487
1487
  "alignItems": "stretch",
1488
1488
  "borderStyle": "solid",
1489
1489
  "borderWidth": 0,
@@ -1507,7 +1507,7 @@ exports[`wonder-blocks-modal example 7 1`] = `
1507
1507
  <div
1508
1508
  className=""
1509
1509
  style={
1510
- Object {
1510
+ {
1511
1511
  "alignItems": "stretch",
1512
1512
  "background": "url(/modal-above.png)",
1513
1513
  "backgroundSize": "cover",
@@ -1539,7 +1539,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1539
1539
  <div
1540
1540
  className=""
1541
1541
  style={
1542
- Object {
1542
+ {
1543
1543
  "alignItems": "stretch",
1544
1544
  "borderStyle": "solid",
1545
1545
  "borderWidth": 0,
@@ -1559,7 +1559,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1559
1559
  <div
1560
1560
  className=""
1561
1561
  style={
1562
- Object {
1562
+ {
1563
1563
  "alignItems": "center",
1564
1564
  "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
1565
1565
  "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
@@ -1586,7 +1586,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1586
1586
  <div
1587
1587
  className=""
1588
1588
  style={
1589
- Object {
1589
+ {
1590
1590
  "alignItems": "stretch",
1591
1591
  "borderStyle": "solid",
1592
1592
  "borderWidth": 0,
@@ -1612,7 +1612,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1612
1612
  className=""
1613
1613
  role="dialog"
1614
1614
  style={
1615
- Object {
1615
+ {
1616
1616
  "alignItems": "stretch",
1617
1617
  "borderRadius": 4,
1618
1618
  "borderStyle": "solid",
@@ -1635,7 +1635,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1635
1635
  <div
1636
1636
  className=""
1637
1637
  style={
1638
- Object {
1638
+ {
1639
1639
  "alignItems": "stretch",
1640
1640
  "background": "white",
1641
1641
  "borderStyle": "solid",
@@ -1674,11 +1674,11 @@ exports[`wonder-blocks-modal example 8 1`] = `
1674
1674
  onTouchEnd={[Function]}
1675
1675
  onTouchStart={[Function]}
1676
1676
  style={
1677
- Object {
1678
- "::MozFocusInner": Object {
1677
+ {
1678
+ "::MozFocusInner": {
1679
1679
  "border": 0,
1680
1680
  },
1681
- ":focus": Object {
1681
+ ":focus": {
1682
1682
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1683
1683
  },
1684
1684
  "alignItems": "center",
@@ -1709,7 +1709,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1709
1709
  className=""
1710
1710
  height={24}
1711
1711
  style={
1712
- Object {
1712
+ {
1713
1713
  "display": "inline-block",
1714
1714
  "flexGrow": 0,
1715
1715
  "flexShrink": 0,
@@ -1728,7 +1728,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1728
1728
  <div
1729
1729
  className=""
1730
1730
  style={
1731
- Object {
1731
+ {
1732
1732
  "alignItems": "stretch",
1733
1733
  "borderStyle": "solid",
1734
1734
  "borderWidth": 0,
@@ -1749,7 +1749,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1749
1749
  <div
1750
1750
  className=""
1751
1751
  style={
1752
- Object {
1752
+ {
1753
1753
  "alignItems": "stretch",
1754
1754
  "borderStyle": "solid",
1755
1755
  "borderWidth": 0,
@@ -1773,7 +1773,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1773
1773
  <ol
1774
1774
  className=""
1775
1775
  style={
1776
- Object {
1776
+ {
1777
1777
  "display": "flex",
1778
1778
  "listStyle": "none",
1779
1779
  "margin": 0,
@@ -1785,7 +1785,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1785
1785
  <li
1786
1786
  className=""
1787
1787
  style={
1788
- Object {
1788
+ {
1789
1789
  "alignItems": "center",
1790
1790
  "display": "flex",
1791
1791
  "justifyContent": "center",
@@ -1799,7 +1799,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1799
1799
  className=""
1800
1800
  height={16}
1801
1801
  style={
1802
- Object {
1802
+ {
1803
1803
  "marginLeft": 4,
1804
1804
  }
1805
1805
  }
@@ -1816,7 +1816,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1816
1816
  <li
1817
1817
  className=""
1818
1818
  style={
1819
- Object {
1819
+ {
1820
1820
  "alignItems": "center",
1821
1821
  "display": "flex",
1822
1822
  "justifyContent": "center",
@@ -1830,7 +1830,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1830
1830
  className=""
1831
1831
  height={16}
1832
1832
  style={
1833
- Object {
1833
+ {
1834
1834
  "marginLeft": 4,
1835
1835
  }
1836
1836
  }
@@ -1848,7 +1848,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1848
1848
  aria-current="page"
1849
1849
  className=""
1850
1850
  style={
1851
- Object {
1851
+ {
1852
1852
  "alignItems": "center",
1853
1853
  "display": "flex",
1854
1854
  "justifyContent": "center",
@@ -1865,19 +1865,19 @@ exports[`wonder-blocks-modal example 8 1`] = `
1865
1865
  className=""
1866
1866
  id="uid-modal-2-wb-id"
1867
1867
  style={
1868
- Object {
1869
- "@media (maxWidth: 1023px)": Object {
1868
+ {
1869
+ "@media (maxWidth: 1023px)": {
1870
1870
  "fontSize": 22,
1871
1871
  "lineHeight": "26px",
1872
1872
  },
1873
- "@media (minWidth: 1024px)": Object {
1873
+ "@media (minWidth: 1024px)": {
1874
1874
  "fontSize": 24,
1875
1875
  "lineHeight": "28px",
1876
1876
  },
1877
1877
  "MozOsxFontSmoothing": "grayscale",
1878
1878
  "WebkitFontSmoothing": "antialiased",
1879
1879
  "display": "block",
1880
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1880
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1881
1881
  "fontWeight": 700,
1882
1882
  "marginBottom": 0,
1883
1883
  "marginTop": 0,
@@ -1891,7 +1891,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1891
1891
  <div
1892
1892
  className=""
1893
1893
  style={
1894
- Object {
1894
+ {
1895
1895
  "alignItems": "stretch",
1896
1896
  "borderStyle": "solid",
1897
1897
  "borderWidth": 0,
@@ -1912,7 +1912,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1912
1912
  <div
1913
1913
  className=""
1914
1914
  style={
1915
- Object {
1915
+ {
1916
1916
  "alignItems": "stretch",
1917
1917
  "borderStyle": "solid",
1918
1918
  "borderWidth": 0,
@@ -1933,7 +1933,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1933
1933
  <div
1934
1934
  className=""
1935
1935
  style={
1936
- Object {
1936
+ {
1937
1937
  "alignItems": "stretch",
1938
1938
  "borderStyle": "solid",
1939
1939
  "borderWidth": 0,
@@ -1952,11 +1952,11 @@ exports[`wonder-blocks-modal example 8 1`] = `
1952
1952
  <span
1953
1953
  className=""
1954
1954
  style={
1955
- Object {
1955
+ {
1956
1956
  "MozOsxFontSmoothing": "grayscale",
1957
1957
  "WebkitFontSmoothing": "antialiased",
1958
1958
  "display": "block",
1959
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1959
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
1960
1960
  "fontSize": 16,
1961
1961
  "fontWeight": 400,
1962
1962
  "lineHeight": "22px",
@@ -1971,7 +1971,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1971
1971
  <div
1972
1972
  className=""
1973
1973
  style={
1974
- Object {
1974
+ {
1975
1975
  "alignItems": "center",
1976
1976
  "borderStyle": "solid",
1977
1977
  "borderWidth": 0,
@@ -1997,7 +1997,7 @@ exports[`wonder-blocks-modal example 8 1`] = `
1997
1997
  <div
1998
1998
  className=""
1999
1999
  style={
2000
- Object {
2000
+ {
2001
2001
  "alignItems": "stretch",
2002
2002
  "borderStyle": "solid",
2003
2003
  "borderWidth": 0,
@@ -2032,11 +2032,11 @@ exports[`wonder-blocks-modal example 8 1`] = `
2032
2032
  onTouchStart={[Function]}
2033
2033
  role="button"
2034
2034
  style={
2035
- Object {
2036
- "::MozFocusInner": Object {
2035
+ {
2036
+ "::MozFocusInner": {
2037
2037
  "border": 0,
2038
2038
  },
2039
- ":focus": Object {
2039
+ ":focus": {
2040
2040
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2041
2041
  },
2042
2042
  "alignItems": "center",
@@ -2068,12 +2068,12 @@ exports[`wonder-blocks-modal example 8 1`] = `
2068
2068
  <span
2069
2069
  className=""
2070
2070
  style={
2071
- Object {
2071
+ {
2072
2072
  "MozOsxFontSmoothing": "grayscale",
2073
2073
  "WebkitFontSmoothing": "antialiased",
2074
2074
  "alignItems": "center",
2075
2075
  "display": "inline-block",
2076
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2076
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2077
2077
  "fontSize": 16,
2078
2078
  "fontWeight": "bold",
2079
2079
  "lineHeight": "20px",
@@ -2106,11 +2106,11 @@ exports[`wonder-blocks-modal example 8 1`] = `
2106
2106
  onTouchStart={[Function]}
2107
2107
  role="button"
2108
2108
  style={
2109
- Object {
2110
- "::MozFocusInner": Object {
2109
+ {
2110
+ "::MozFocusInner": {
2111
2111
  "border": 0,
2112
2112
  },
2113
- ":focus": Object {
2113
+ ":focus": {
2114
2114
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2115
2115
  },
2116
2116
  "alignItems": "center",
@@ -2142,12 +2142,12 @@ exports[`wonder-blocks-modal example 8 1`] = `
2142
2142
  <span
2143
2143
  className=""
2144
2144
  style={
2145
- Object {
2145
+ {
2146
2146
  "MozOsxFontSmoothing": "grayscale",
2147
2147
  "WebkitFontSmoothing": "antialiased",
2148
2148
  "alignItems": "center",
2149
2149
  "display": "inline-block",
2150
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2150
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2151
2151
  "fontSize": 16,
2152
2152
  "fontWeight": "bold",
2153
2153
  "lineHeight": "20px",
@@ -2180,11 +2180,11 @@ exports[`wonder-blocks-modal example 8 1`] = `
2180
2180
  onTouchStart={[Function]}
2181
2181
  role="button"
2182
2182
  style={
2183
- Object {
2184
- "::MozFocusInner": Object {
2183
+ {
2184
+ "::MozFocusInner": {
2185
2185
  "border": 0,
2186
2186
  },
2187
- ":focus": Object {
2187
+ ":focus": {
2188
2188
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2189
2189
  },
2190
2190
  "alignItems": "center",
@@ -2216,12 +2216,12 @@ exports[`wonder-blocks-modal example 8 1`] = `
2216
2216
  <span
2217
2217
  className=""
2218
2218
  style={
2219
- Object {
2219
+ {
2220
2220
  "MozOsxFontSmoothing": "grayscale",
2221
2221
  "WebkitFontSmoothing": "antialiased",
2222
2222
  "alignItems": "center",
2223
2223
  "display": "inline-block",
2224
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2224
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2225
2225
  "fontSize": 16,
2226
2226
  "fontWeight": "bold",
2227
2227
  "lineHeight": "20px",
@@ -2248,7 +2248,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2248
2248
  <div
2249
2249
  className=""
2250
2250
  style={
2251
- Object {
2251
+ {
2252
2252
  "alignItems": "stretch",
2253
2253
  "borderStyle": "solid",
2254
2254
  "borderWidth": 0,
@@ -2268,7 +2268,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2268
2268
  <div
2269
2269
  className=""
2270
2270
  style={
2271
- Object {
2271
+ {
2272
2272
  "alignItems": "center",
2273
2273
  "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
2274
2274
  "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
@@ -2295,7 +2295,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2295
2295
  <div
2296
2296
  className=""
2297
2297
  style={
2298
- Object {
2298
+ {
2299
2299
  "alignItems": "stretch",
2300
2300
  "borderStyle": "solid",
2301
2301
  "borderWidth": 0,
@@ -2321,7 +2321,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2321
2321
  className=""
2322
2322
  role="dialog"
2323
2323
  style={
2324
- Object {
2324
+ {
2325
2325
  "alignItems": "stretch",
2326
2326
  "borderRadius": 4,
2327
2327
  "borderStyle": "solid",
@@ -2344,7 +2344,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2344
2344
  <div
2345
2345
  className=""
2346
2346
  style={
2347
- Object {
2347
+ {
2348
2348
  "alignItems": "stretch",
2349
2349
  "background": "white",
2350
2350
  "borderStyle": "solid",
@@ -2383,11 +2383,11 @@ exports[`wonder-blocks-modal example 9 1`] = `
2383
2383
  onTouchEnd={[Function]}
2384
2384
  onTouchStart={[Function]}
2385
2385
  style={
2386
- Object {
2387
- "::MozFocusInner": Object {
2386
+ {
2387
+ "::MozFocusInner": {
2388
2388
  "border": 0,
2389
2389
  },
2390
- ":focus": Object {
2390
+ ":focus": {
2391
2391
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2392
2392
  },
2393
2393
  "alignItems": "center",
@@ -2418,7 +2418,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2418
2418
  className=""
2419
2419
  height={24}
2420
2420
  style={
2421
- Object {
2421
+ {
2422
2422
  "display": "inline-block",
2423
2423
  "flexGrow": 0,
2424
2424
  "flexShrink": 0,
@@ -2437,7 +2437,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2437
2437
  <div
2438
2438
  className=""
2439
2439
  style={
2440
- Object {
2440
+ {
2441
2441
  "alignItems": "stretch",
2442
2442
  "borderStyle": "solid",
2443
2443
  "borderWidth": 0,
@@ -2459,19 +2459,19 @@ exports[`wonder-blocks-modal example 9 1`] = `
2459
2459
  className=""
2460
2460
  id="uid-modal-3-wb-id"
2461
2461
  style={
2462
- Object {
2463
- "@media (maxWidth: 1023px)": Object {
2462
+ {
2463
+ "@media (maxWidth: 1023px)": {
2464
2464
  "fontSize": 22,
2465
2465
  "lineHeight": "26px",
2466
2466
  },
2467
- "@media (minWidth: 1024px)": Object {
2467
+ "@media (minWidth: 1024px)": {
2468
2468
  "fontSize": 24,
2469
2469
  "lineHeight": "28px",
2470
2470
  },
2471
2471
  "MozOsxFontSmoothing": "grayscale",
2472
2472
  "WebkitFontSmoothing": "antialiased",
2473
2473
  "display": "block",
2474
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2474
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2475
2475
  "fontWeight": 700,
2476
2476
  "marginBottom": 0,
2477
2477
  "marginTop": 0,
@@ -2485,7 +2485,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2485
2485
  <div
2486
2486
  className=""
2487
2487
  style={
2488
- Object {
2488
+ {
2489
2489
  "alignItems": "stretch",
2490
2490
  "borderStyle": "solid",
2491
2491
  "borderWidth": 0,
@@ -2506,7 +2506,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2506
2506
  <div
2507
2507
  className=""
2508
2508
  style={
2509
- Object {
2509
+ {
2510
2510
  "alignItems": "stretch",
2511
2511
  "borderStyle": "solid",
2512
2512
  "borderWidth": 0,
@@ -2527,7 +2527,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2527
2527
  <div
2528
2528
  className=""
2529
2529
  style={
2530
- Object {
2530
+ {
2531
2531
  "alignItems": "stretch",
2532
2532
  "borderStyle": "solid",
2533
2533
  "borderWidth": 0,
@@ -2546,11 +2546,11 @@ exports[`wonder-blocks-modal example 9 1`] = `
2546
2546
  <span
2547
2547
  className=""
2548
2548
  style={
2549
- Object {
2549
+ {
2550
2550
  "MozOsxFontSmoothing": "grayscale",
2551
2551
  "WebkitFontSmoothing": "antialiased",
2552
2552
  "display": "block",
2553
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2553
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2554
2554
  "fontSize": 16,
2555
2555
  "fontWeight": 400,
2556
2556
  "lineHeight": "22px",
@@ -2565,7 +2565,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2565
2565
  <div
2566
2566
  className=""
2567
2567
  style={
2568
- Object {
2568
+ {
2569
2569
  "alignItems": "center",
2570
2570
  "borderStyle": "solid",
2571
2571
  "borderWidth": 0,
@@ -2591,7 +2591,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2591
2591
  <div
2592
2592
  className=""
2593
2593
  style={
2594
- Object {
2594
+ {
2595
2595
  "alignItems": "center",
2596
2596
  "borderStyle": "solid",
2597
2597
  "borderWidth": 0,
@@ -2612,11 +2612,11 @@ exports[`wonder-blocks-modal example 9 1`] = `
2612
2612
  <span
2613
2613
  className=""
2614
2614
  style={
2615
- Object {
2615
+ {
2616
2616
  "MozOsxFontSmoothing": "grayscale",
2617
2617
  "WebkitFontSmoothing": "antialiased",
2618
2618
  "display": "block",
2619
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2619
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2620
2620
  "fontSize": 16,
2621
2621
  "fontWeight": 700,
2622
2622
  "lineHeight": "20px",
@@ -2628,7 +2628,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2628
2628
  <div
2629
2629
  className=""
2630
2630
  style={
2631
- Object {
2631
+ {
2632
2632
  "alignItems": "stretch",
2633
2633
  "borderStyle": "solid",
2634
2634
  "borderWidth": 0,
@@ -2663,11 +2663,11 @@ exports[`wonder-blocks-modal example 9 1`] = `
2663
2663
  onTouchStart={[Function]}
2664
2664
  role="button"
2665
2665
  style={
2666
- Object {
2667
- "::MozFocusInner": Object {
2666
+ {
2667
+ "::MozFocusInner": {
2668
2668
  "border": 0,
2669
2669
  },
2670
- ":focus": Object {
2670
+ ":focus": {
2671
2671
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2672
2672
  },
2673
2673
  "alignItems": "center",
@@ -2698,12 +2698,12 @@ exports[`wonder-blocks-modal example 9 1`] = `
2698
2698
  <span
2699
2699
  className=""
2700
2700
  style={
2701
- Object {
2701
+ {
2702
2702
  "MozOsxFontSmoothing": "grayscale",
2703
2703
  "WebkitFontSmoothing": "antialiased",
2704
2704
  "alignItems": "center",
2705
2705
  "display": "inline-block",
2706
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2706
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2707
2707
  "fontSize": 16,
2708
2708
  "fontWeight": "bold",
2709
2709
  "lineHeight": "20px",
@@ -2722,7 +2722,7 @@ exports[`wonder-blocks-modal example 9 1`] = `
2722
2722
  aria-hidden="true"
2723
2723
  className=""
2724
2724
  style={
2725
- Object {
2725
+ {
2726
2726
  "MsFlexBasis": 16,
2727
2727
  "MsFlexPreferredSize": 16,
2728
2728
  "WebkitFlexBasis": 16,
@@ -2762,11 +2762,11 @@ exports[`wonder-blocks-modal example 9 1`] = `
2762
2762
  onTouchStart={[Function]}
2763
2763
  role="button"
2764
2764
  style={
2765
- Object {
2766
- "::MozFocusInner": Object {
2765
+ {
2766
+ "::MozFocusInner": {
2767
2767
  "border": 0,
2768
2768
  },
2769
- ":focus": Object {
2769
+ ":focus": {
2770
2770
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2771
2771
  },
2772
2772
  "alignItems": "center",
@@ -2797,12 +2797,12 @@ exports[`wonder-blocks-modal example 9 1`] = `
2797
2797
  <span
2798
2798
  className=""
2799
2799
  style={
2800
- Object {
2800
+ {
2801
2801
  "MozOsxFontSmoothing": "grayscale",
2802
2802
  "WebkitFontSmoothing": "antialiased",
2803
2803
  "alignItems": "center",
2804
2804
  "display": "inline-block",
2805
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2805
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2806
2806
  "fontSize": 16,
2807
2807
  "fontWeight": "bold",
2808
2808
  "lineHeight": "20px",
@@ -2830,7 +2830,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2830
2830
  <div
2831
2831
  className=""
2832
2832
  style={
2833
- Object {
2833
+ {
2834
2834
  "alignItems": "stretch",
2835
2835
  "borderStyle": "solid",
2836
2836
  "borderWidth": 0,
@@ -2850,7 +2850,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2850
2850
  <div
2851
2851
  className=""
2852
2852
  style={
2853
- Object {
2853
+ {
2854
2854
  "alignItems": "center",
2855
2855
  "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
2856
2856
  "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
@@ -2877,7 +2877,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2877
2877
  <div
2878
2878
  className=""
2879
2879
  style={
2880
- Object {
2880
+ {
2881
2881
  "alignItems": "stretch",
2882
2882
  "borderStyle": "solid",
2883
2883
  "borderWidth": 0,
@@ -2899,7 +2899,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2899
2899
  <div
2900
2900
  className=""
2901
2901
  style={
2902
- Object {
2902
+ {
2903
2903
  "alignItems": "stretch",
2904
2904
  "borderStyle": "solid",
2905
2905
  "borderWidth": 0,
@@ -2923,7 +2923,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2923
2923
  <div
2924
2924
  className=""
2925
2925
  style={
2926
- Object {
2926
+ {
2927
2927
  "alignItems": "stretch",
2928
2928
  "background": "url(/blue-blob.png)",
2929
2929
  "backgroundSize": "cover",
@@ -2951,7 +2951,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2951
2951
  className=""
2952
2952
  role="dialog"
2953
2953
  style={
2954
- Object {
2954
+ {
2955
2955
  "alignItems": "stretch",
2956
2956
  "borderRadius": 4,
2957
2957
  "borderStyle": "solid",
@@ -2974,7 +2974,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2974
2974
  <div
2975
2975
  className=""
2976
2976
  style={
2977
- Object {
2977
+ {
2978
2978
  "alignItems": "stretch",
2979
2979
  "borderStyle": "solid",
2980
2980
  "borderWidth": 0,
@@ -2994,7 +2994,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
2994
2994
  <div
2995
2995
  className=""
2996
2996
  style={
2997
- Object {
2997
+ {
2998
2998
  "alignItems": "stretch",
2999
2999
  "background": "#0b2149",
3000
3000
  "borderStyle": "solid",
@@ -3019,7 +3019,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3019
3019
  <div
3020
3020
  className=""
3021
3021
  style={
3022
- Object {
3022
+ {
3023
3023
  "alignItems": "stretch",
3024
3024
  "borderStyle": "solid",
3025
3025
  "borderWidth": 0,
@@ -3040,7 +3040,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3040
3040
  <div
3041
3041
  className=""
3042
3042
  style={
3043
- Object {
3043
+ {
3044
3044
  "alignItems": "stretch",
3045
3045
  "borderStyle": "solid",
3046
3046
  "borderWidth": 0,
@@ -3060,7 +3060,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3060
3060
  <div
3061
3061
  className=""
3062
3062
  style={
3063
- Object {
3063
+ {
3064
3064
  "alignItems": "stretch",
3065
3065
  "borderStyle": "solid",
3066
3066
  "borderWidth": 0,
@@ -3079,19 +3079,19 @@ exports[`wonder-blocks-modal example 10 1`] = `
3079
3079
  <h1
3080
3080
  className=""
3081
3081
  style={
3082
- Object {
3083
- "@media (maxWidth: 1023px)": Object {
3082
+ {
3083
+ "@media (maxWidth: 1023px)": {
3084
3084
  "fontSize": 28,
3085
3085
  "lineHeight": "32px",
3086
3086
  },
3087
- "@media (minWidth: 1024px)": Object {
3087
+ "@media (minWidth: 1024px)": {
3088
3088
  "fontSize": 36,
3089
3089
  "lineHeight": "40px",
3090
3090
  },
3091
3091
  "MozOsxFontSmoothing": "grayscale",
3092
3092
  "WebkitFontSmoothing": "antialiased",
3093
3093
  "display": "block",
3094
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
3094
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
3095
3095
  "fontWeight": 900,
3096
3096
  "marginBottom": 0,
3097
3097
  "marginTop": 0,
@@ -3103,11 +3103,11 @@ exports[`wonder-blocks-modal example 10 1`] = `
3103
3103
  <span
3104
3104
  className=""
3105
3105
  style={
3106
- Object {
3106
+ {
3107
3107
  "MozOsxFontSmoothing": "grayscale",
3108
3108
  "WebkitFontSmoothing": "antialiased",
3109
3109
  "display": "block",
3110
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
3110
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
3111
3111
  "fontSize": 16,
3112
3112
  "fontWeight": 400,
3113
3113
  "lineHeight": "22px",
@@ -3123,7 +3123,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3123
3123
  <div
3124
3124
  className=""
3125
3125
  style={
3126
- Object {
3126
+ {
3127
3127
  "alignItems": "stretch",
3128
3128
  "background": "white",
3129
3129
  "borderStyle": "solid",
@@ -3162,11 +3162,11 @@ exports[`wonder-blocks-modal example 10 1`] = `
3162
3162
  onTouchEnd={[Function]}
3163
3163
  onTouchStart={[Function]}
3164
3164
  style={
3165
- Object {
3166
- "::MozFocusInner": Object {
3165
+ {
3166
+ "::MozFocusInner": {
3167
3167
  "border": 0,
3168
3168
  },
3169
- ":focus": Object {
3169
+ ":focus": {
3170
3170
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
3171
3171
  },
3172
3172
  "alignItems": "center",
@@ -3197,7 +3197,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3197
3197
  className=""
3198
3198
  height={24}
3199
3199
  style={
3200
- Object {
3200
+ {
3201
3201
  "display": "inline-block",
3202
3202
  "flexGrow": 0,
3203
3203
  "flexShrink": 0,
@@ -3216,7 +3216,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3216
3216
  <div
3217
3217
  className=""
3218
3218
  style={
3219
- Object {
3219
+ {
3220
3220
  "alignItems": "stretch",
3221
3221
  "borderStyle": "solid",
3222
3222
  "borderWidth": 0,
@@ -3237,7 +3237,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3237
3237
  <div
3238
3238
  className=""
3239
3239
  style={
3240
- Object {
3240
+ {
3241
3241
  "alignItems": "stretch",
3242
3242
  "borderStyle": "solid",
3243
3243
  "borderWidth": 0,
@@ -3257,7 +3257,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3257
3257
  <div
3258
3258
  className=""
3259
3259
  style={
3260
- Object {
3260
+ {
3261
3261
  "alignItems": "stretch",
3262
3262
  "borderStyle": "solid",
3263
3263
  "borderWidth": 0,
@@ -3276,19 +3276,19 @@ exports[`wonder-blocks-modal example 10 1`] = `
3276
3276
  <h1
3277
3277
  className=""
3278
3278
  style={
3279
- Object {
3280
- "@media (maxWidth: 1023px)": Object {
3279
+ {
3280
+ "@media (maxWidth: 1023px)": {
3281
3281
  "fontSize": 28,
3282
3282
  "lineHeight": "32px",
3283
3283
  },
3284
- "@media (minWidth: 1024px)": Object {
3284
+ "@media (minWidth: 1024px)": {
3285
3285
  "fontSize": 36,
3286
3286
  "lineHeight": "40px",
3287
3287
  },
3288
3288
  "MozOsxFontSmoothing": "grayscale",
3289
3289
  "WebkitFontSmoothing": "antialiased",
3290
3290
  "display": "block",
3291
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
3291
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
3292
3292
  "fontWeight": 900,
3293
3293
  "marginBottom": 0,
3294
3294
  "marginTop": 0,
@@ -3300,11 +3300,11 @@ exports[`wonder-blocks-modal example 10 1`] = `
3300
3300
  <span
3301
3301
  className=""
3302
3302
  style={
3303
- Object {
3303
+ {
3304
3304
  "MozOsxFontSmoothing": "grayscale",
3305
3305
  "WebkitFontSmoothing": "antialiased",
3306
3306
  "display": "block",
3307
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
3307
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
3308
3308
  "fontSize": 16,
3309
3309
  "fontWeight": 400,
3310
3310
  "lineHeight": "22px",
@@ -3317,7 +3317,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3317
3317
  aria-hidden="true"
3318
3318
  className=""
3319
3319
  style={
3320
- Object {
3320
+ {
3321
3321
  "MsFlexBasis": 16,
3322
3322
  "MsFlexPreferredSize": 16,
3323
3323
  "WebkitFlexBasis": 16,
@@ -3357,11 +3357,11 @@ exports[`wonder-blocks-modal example 10 1`] = `
3357
3357
  onTouchStart={[Function]}
3358
3358
  role="button"
3359
3359
  style={
3360
- Object {
3361
- "::MozFocusInner": Object {
3360
+ {
3361
+ "::MozFocusInner": {
3362
3362
  "border": 0,
3363
3363
  },
3364
- ":focus": Object {
3364
+ ":focus": {
3365
3365
  "WebkitTapHighlightColor": "rgba(0,0,0,0)",
3366
3366
  },
3367
3367
  "alignItems": "center",
@@ -3392,12 +3392,12 @@ exports[`wonder-blocks-modal example 10 1`] = `
3392
3392
  <span
3393
3393
  className=""
3394
3394
  style={
3395
- Object {
3395
+ {
3396
3396
  "MozOsxFontSmoothing": "grayscale",
3397
3397
  "WebkitFontSmoothing": "antialiased",
3398
3398
  "alignItems": "center",
3399
3399
  "display": "inline-block",
3400
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
3400
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
3401
3401
  "fontSize": 16,
3402
3402
  "fontWeight": "bold",
3403
3403
  "lineHeight": "20px",
@@ -3420,7 +3420,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3420
3420
  <div
3421
3421
  className=""
3422
3422
  style={
3423
- Object {
3423
+ {
3424
3424
  "alignItems": "stretch",
3425
3425
  "borderStyle": "solid",
3426
3426
  "borderWidth": 0,
@@ -3444,7 +3444,7 @@ exports[`wonder-blocks-modal example 10 1`] = `
3444
3444
  <div
3445
3445
  className=""
3446
3446
  style={
3447
- Object {
3447
+ {
3448
3448
  "alignItems": "stretch",
3449
3449
  "background": "url(/asteroid.png)",
3450
3450
  "backgroundSize": "cover",