@khanacademy/wonder-blocks-grid 1.0.24

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 (17) hide show
  1. package/LICENSE +21 -0
  2. package/dist/es/index.js +276 -0
  3. package/dist/index.js +787 -0
  4. package/dist/index.js.flow +2 -0
  5. package/docs.md +260 -0
  6. package/package.json +31 -0
  7. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +2247 -0
  8. package/src/__tests__/generated-snapshot.test.js +559 -0
  9. package/src/components/__tests__/row.test.js +175 -0
  10. package/src/components/cell.js +186 -0
  11. package/src/components/cell.md +58 -0
  12. package/src/components/gutter.js +59 -0
  13. package/src/components/row.js +141 -0
  14. package/src/components/row.md +105 -0
  15. package/src/index.js +3 -0
  16. package/src/util/styles.js +29 -0
  17. package/src/util/utils.js +11 -0
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap ADDED
@@ -0,0 +1,2247 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`wonder-blocks-grid example 1 1`] = `
4
+ <div
5
+ className=""
6
+ style={
7
+ Object {
8
+ "alignItems": "stretch",
9
+ "background": "#21242c",
10
+ "borderStyle": "solid",
11
+ "borderWidth": 0,
12
+ "boxSizing": "border-box",
13
+ "display": "flex",
14
+ "flexDirection": "column",
15
+ "margin": 0,
16
+ "minHeight": 0,
17
+ "minWidth": 0,
18
+ "padding": 0,
19
+ "position": "relative",
20
+ "zIndex": 0,
21
+ }
22
+ }
23
+ >
24
+ <div
25
+ className=""
26
+ style={
27
+ Object {
28
+ "@media (minWidth: 1168px)": Object {
29
+ "margin": "0 auto",
30
+ },
31
+ "alignItems": "center",
32
+ "borderStyle": "solid",
33
+ "borderWidth": 0,
34
+ "boxSizing": "border-box",
35
+ "display": "flex",
36
+ "flexDirection": "row",
37
+ "margin": 0,
38
+ "maxWidth": 1168,
39
+ "minHeight": 0,
40
+ "minWidth": 0,
41
+ "padding": 0,
42
+ "position": "relative",
43
+ "width": "100%",
44
+ "zIndex": 0,
45
+ }
46
+ }
47
+ >
48
+ <div
49
+ aria-hidden="true"
50
+ className=""
51
+ style={
52
+ Object {
53
+ "MsFlexBasis": 24,
54
+ "MsFlexPreferredSize": 24,
55
+ "WebkitFlexBasis": 24,
56
+ "alignItems": "stretch",
57
+ "borderStyle": "solid",
58
+ "borderWidth": 0,
59
+ "boxSizing": "border-box",
60
+ "display": "flex",
61
+ "flexBasis": 24,
62
+ "flexDirection": "column",
63
+ "flexShrink": 0,
64
+ "margin": 0,
65
+ "minHeight": 0,
66
+ "minWidth": 0,
67
+ "padding": 0,
68
+ "position": "relative",
69
+ "width": 24,
70
+ "zIndex": 0,
71
+ }
72
+ }
73
+ />
74
+ <div
75
+ className=""
76
+ style={
77
+ Object {
78
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
79
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
80
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
81
+ "alignItems": "stretch",
82
+ "background": "#ffb100",
83
+ "borderStyle": "solid",
84
+ "borderWidth": 0,
85
+ "boxSizing": "border-box",
86
+ "display": "flex",
87
+ "flexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
88
+ "flexDirection": "column",
89
+ "flexShrink": 0,
90
+ "height": 150,
91
+ "margin": 0,
92
+ "minHeight": 0,
93
+ "minWidth": 0,
94
+ "padding": 5,
95
+ "position": "relative",
96
+ "zIndex": 0,
97
+ }
98
+ }
99
+ >
100
+ <div
101
+ className=""
102
+ style={
103
+ Object {
104
+ "alignItems": "stretch",
105
+ "borderStyle": "solid",
106
+ "borderWidth": 0,
107
+ "boxSizing": "border-box",
108
+ "display": "flex",
109
+ "flexDirection": "column",
110
+ "margin": 0,
111
+ "minHeight": 0,
112
+ "minWidth": 0,
113
+ "padding": 0,
114
+ "position": "relative",
115
+ "zIndex": 0,
116
+ }
117
+ }
118
+ >
119
+ <span
120
+ className=""
121
+ style={
122
+ Object {
123
+ "MozOsxFontSmoothing": "grayscale",
124
+ "WebkitFontSmoothing": "antialiased",
125
+ "display": "block",
126
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
127
+ "fontSize": 16,
128
+ "fontWeight": 400,
129
+ "lineHeight": "20px",
130
+ }
131
+ }
132
+ >
133
+ Cell (
134
+ 4 columns
135
+
136
+ wide)
137
+ </span>
138
+ <br />
139
+ <br />
140
+ <div
141
+ className=""
142
+ style={
143
+ Object {
144
+ "alignItems": "stretch",
145
+ "borderStyle": "solid",
146
+ "borderWidth": 0,
147
+ "boxSizing": "border-box",
148
+ "display": "flex",
149
+ "flexDirection": "column",
150
+ "margin": 0,
151
+ "minHeight": 0,
152
+ "minWidth": 0,
153
+ "padding": 0,
154
+ "position": "relative",
155
+ "textAlign": "right",
156
+ "zIndex": 0,
157
+ }
158
+ }
159
+ >
160
+ <span
161
+ className=""
162
+ style={
163
+ Object {
164
+ "MozOsxFontSmoothing": "grayscale",
165
+ "WebkitFontSmoothing": "antialiased",
166
+ "display": "block",
167
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
168
+ "fontSize": 16,
169
+ "fontWeight": 400,
170
+ "lineHeight": "20px",
171
+ }
172
+ }
173
+ >
174
+ Gutter ⇢
175
+ </span>
176
+ </div>
177
+ <br />
178
+ <div
179
+ className=""
180
+ style={
181
+ Object {
182
+ "alignItems": "stretch",
183
+ "borderStyle": "solid",
184
+ "borderWidth": 0,
185
+ "boxSizing": "border-box",
186
+ "display": "flex",
187
+ "flexDirection": "column",
188
+ "margin": 0,
189
+ "minHeight": 0,
190
+ "minWidth": 0,
191
+ "padding": 0,
192
+ "position": "relative",
193
+ "textAlign": "left",
194
+ "zIndex": 0,
195
+ }
196
+ }
197
+ >
198
+ <span
199
+ className=""
200
+ style={
201
+ Object {
202
+ "MozOsxFontSmoothing": "grayscale",
203
+ "WebkitFontSmoothing": "antialiased",
204
+ "display": "block",
205
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
206
+ "fontSize": 16,
207
+ "fontWeight": 400,
208
+ "lineHeight": "20px",
209
+ }
210
+ }
211
+ >
212
+ Margin ⇢
213
+ </span>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div
218
+ aria-hidden="true"
219
+ className=""
220
+ style={
221
+ Object {
222
+ "MsFlexBasis": 32,
223
+ "MsFlexPreferredSize": 32,
224
+ "WebkitFlexBasis": 32,
225
+ "alignItems": "stretch",
226
+ "borderStyle": "solid",
227
+ "borderWidth": 0,
228
+ "boxSizing": "border-box",
229
+ "display": "flex",
230
+ "flexBasis": 32,
231
+ "flexDirection": "column",
232
+ "flexShrink": 0,
233
+ "margin": 0,
234
+ "minHeight": 0,
235
+ "minWidth": 0,
236
+ "padding": 0,
237
+ "position": "relative",
238
+ "width": 32,
239
+ "zIndex": 0,
240
+ }
241
+ }
242
+ />
243
+ <div
244
+ className=""
245
+ style={
246
+ Object {
247
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
248
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
249
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
250
+ "alignItems": "stretch",
251
+ "background": "#ffb100",
252
+ "borderStyle": "solid",
253
+ "borderWidth": 0,
254
+ "boxSizing": "border-box",
255
+ "display": "flex",
256
+ "flexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
257
+ "flexDirection": "column",
258
+ "flexShrink": 0,
259
+ "height": 150,
260
+ "margin": 0,
261
+ "minHeight": 0,
262
+ "minWidth": 0,
263
+ "padding": 5,
264
+ "position": "relative",
265
+ "zIndex": 0,
266
+ }
267
+ }
268
+ >
269
+ <div
270
+ className=""
271
+ style={
272
+ Object {
273
+ "alignItems": "stretch",
274
+ "borderStyle": "solid",
275
+ "borderWidth": 0,
276
+ "boxSizing": "border-box",
277
+ "display": "flex",
278
+ "flexDirection": "column",
279
+ "margin": 0,
280
+ "minHeight": 0,
281
+ "minWidth": 0,
282
+ "padding": 0,
283
+ "position": "relative",
284
+ "zIndex": 0,
285
+ }
286
+ }
287
+ >
288
+ <span
289
+ className=""
290
+ style={
291
+ Object {
292
+ "MozOsxFontSmoothing": "grayscale",
293
+ "WebkitFontSmoothing": "antialiased",
294
+ "display": "block",
295
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
296
+ "fontSize": 16,
297
+ "fontWeight": 400,
298
+ "lineHeight": "20px",
299
+ }
300
+ }
301
+ >
302
+ Cell (
303
+ 3 columns
304
+
305
+ wide)
306
+ </span>
307
+ <br />
308
+ <br />
309
+ <div
310
+ className=""
311
+ style={
312
+ Object {
313
+ "alignItems": "stretch",
314
+ "borderStyle": "solid",
315
+ "borderWidth": 0,
316
+ "boxSizing": "border-box",
317
+ "display": "flex",
318
+ "flexDirection": "column",
319
+ "margin": 0,
320
+ "minHeight": 0,
321
+ "minWidth": 0,
322
+ "padding": 0,
323
+ "position": "relative",
324
+ "textAlign": "center",
325
+ "zIndex": 0,
326
+ }
327
+ }
328
+ >
329
+ <span
330
+ className=""
331
+ style={
332
+ Object {
333
+ "MozOsxFontSmoothing": "grayscale",
334
+ "WebkitFontSmoothing": "antialiased",
335
+ "display": "block",
336
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
337
+ "fontSize": 16,
338
+ "fontWeight": 400,
339
+ "lineHeight": "20px",
340
+ }
341
+ }
342
+ >
343
+ ⇠ Gutters ⇢
344
+ </span>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div
349
+ aria-hidden="true"
350
+ className=""
351
+ style={
352
+ Object {
353
+ "MsFlexBasis": 32,
354
+ "MsFlexPreferredSize": 32,
355
+ "WebkitFlexBasis": 32,
356
+ "alignItems": "stretch",
357
+ "borderStyle": "solid",
358
+ "borderWidth": 0,
359
+ "boxSizing": "border-box",
360
+ "display": "flex",
361
+ "flexBasis": 32,
362
+ "flexDirection": "column",
363
+ "flexShrink": 0,
364
+ "margin": 0,
365
+ "minHeight": 0,
366
+ "minWidth": 0,
367
+ "padding": 0,
368
+ "position": "relative",
369
+ "width": 32,
370
+ "zIndex": 0,
371
+ }
372
+ }
373
+ />
374
+ <div
375
+ className=""
376
+ style={
377
+ Object {
378
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
379
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
380
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
381
+ "alignItems": "stretch",
382
+ "background": "#ffb100",
383
+ "borderStyle": "solid",
384
+ "borderWidth": 0,
385
+ "boxSizing": "border-box",
386
+ "display": "flex",
387
+ "flexBasis": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
388
+ "flexDirection": "column",
389
+ "flexShrink": 0,
390
+ "height": 150,
391
+ "margin": 0,
392
+ "minHeight": 0,
393
+ "minWidth": 0,
394
+ "padding": 5,
395
+ "position": "relative",
396
+ "zIndex": 0,
397
+ }
398
+ }
399
+ >
400
+ <div
401
+ className=""
402
+ style={
403
+ Object {
404
+ "alignItems": "stretch",
405
+ "borderStyle": "solid",
406
+ "borderWidth": 0,
407
+ "boxSizing": "border-box",
408
+ "display": "flex",
409
+ "flexDirection": "column",
410
+ "margin": 0,
411
+ "minHeight": 0,
412
+ "minWidth": 0,
413
+ "padding": 0,
414
+ "position": "relative",
415
+ "zIndex": 0,
416
+ }
417
+ }
418
+ >
419
+ <span
420
+ className=""
421
+ style={
422
+ Object {
423
+ "MozOsxFontSmoothing": "grayscale",
424
+ "WebkitFontSmoothing": "antialiased",
425
+ "display": "block",
426
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
427
+ "fontSize": 16,
428
+ "fontWeight": 400,
429
+ "lineHeight": "20px",
430
+ }
431
+ }
432
+ >
433
+ Cell (
434
+ 5 columns
435
+
436
+ wide)
437
+ </span>
438
+ <br />
439
+ <br />
440
+ <span
441
+ className=""
442
+ style={
443
+ Object {
444
+ "MozOsxFontSmoothing": "grayscale",
445
+ "WebkitFontSmoothing": "antialiased",
446
+ "display": "block",
447
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
448
+ "fontSize": 16,
449
+ "fontWeight": 400,
450
+ "lineHeight": "20px",
451
+ }
452
+ }
453
+ >
454
+ ⇠ Gutter
455
+ </span>
456
+ <br />
457
+ <div
458
+ className=""
459
+ style={
460
+ Object {
461
+ "alignItems": "stretch",
462
+ "borderStyle": "solid",
463
+ "borderWidth": 0,
464
+ "boxSizing": "border-box",
465
+ "display": "flex",
466
+ "flexDirection": "column",
467
+ "margin": 0,
468
+ "minHeight": 0,
469
+ "minWidth": 0,
470
+ "padding": 0,
471
+ "position": "relative",
472
+ "textAlign": "right",
473
+ "zIndex": 0,
474
+ }
475
+ }
476
+ >
477
+ <span
478
+ className=""
479
+ style={
480
+ Object {
481
+ "MozOsxFontSmoothing": "grayscale",
482
+ "WebkitFontSmoothing": "antialiased",
483
+ "display": "block",
484
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
485
+ "fontSize": 16,
486
+ "fontWeight": 400,
487
+ "lineHeight": "20px",
488
+ }
489
+ }
490
+ >
491
+ Margin ⇢
492
+ </span>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div
497
+ aria-hidden="true"
498
+ className=""
499
+ style={
500
+ Object {
501
+ "MsFlexBasis": 24,
502
+ "MsFlexPreferredSize": 24,
503
+ "WebkitFlexBasis": 24,
504
+ "alignItems": "stretch",
505
+ "borderStyle": "solid",
506
+ "borderWidth": 0,
507
+ "boxSizing": "border-box",
508
+ "display": "flex",
509
+ "flexBasis": 24,
510
+ "flexDirection": "column",
511
+ "flexShrink": 0,
512
+ "margin": 0,
513
+ "minHeight": 0,
514
+ "minWidth": 0,
515
+ "padding": 0,
516
+ "position": "relative",
517
+ "width": 24,
518
+ "zIndex": 0,
519
+ }
520
+ }
521
+ />
522
+ </div>
523
+ </div>
524
+ `;
525
+
526
+ exports[`wonder-blocks-grid example 2 1`] = `
527
+ <div
528
+ className=""
529
+ style={
530
+ Object {
531
+ "alignItems": "stretch",
532
+ "background": "#f7f8fa",
533
+ "borderStyle": "solid",
534
+ "borderWidth": 0,
535
+ "boxSizing": "border-box",
536
+ "display": "flex",
537
+ "flexDirection": "column",
538
+ "margin": 0,
539
+ "minHeight": 0,
540
+ "minWidth": 0,
541
+ "padding": 0,
542
+ "position": "relative",
543
+ "zIndex": 0,
544
+ }
545
+ }
546
+ >
547
+ <div
548
+ className=""
549
+ style={
550
+ Object {
551
+ "@media (minWidth: 1168px)": Object {
552
+ "margin": "0 auto",
553
+ },
554
+ "alignItems": "center",
555
+ "background": "#0a2a66",
556
+ "borderBottom": "1px solid rgba(255,255,255,0.64)",
557
+ "borderStyle": "solid",
558
+ "borderWidth": 0,
559
+ "boxSizing": "border-box",
560
+ "display": "flex",
561
+ "flexDirection": "row",
562
+ "height": 64,
563
+ "margin": 0,
564
+ "maxWidth": 1168,
565
+ "minHeight": 0,
566
+ "minWidth": 0,
567
+ "padding": 0,
568
+ "position": "relative",
569
+ "width": "100%",
570
+ "zIndex": 0,
571
+ }
572
+ }
573
+ >
574
+ <div
575
+ aria-hidden="true"
576
+ className=""
577
+ style={
578
+ Object {
579
+ "MsFlexBasis": 24,
580
+ "MsFlexPreferredSize": 24,
581
+ "WebkitFlexBasis": 24,
582
+ "alignItems": "stretch",
583
+ "borderStyle": "solid",
584
+ "borderWidth": 0,
585
+ "boxSizing": "border-box",
586
+ "display": "flex",
587
+ "flexBasis": 24,
588
+ "flexDirection": "column",
589
+ "flexShrink": 0,
590
+ "margin": 0,
591
+ "minHeight": 0,
592
+ "minWidth": 0,
593
+ "padding": 0,
594
+ "position": "relative",
595
+ "width": 24,
596
+ "zIndex": 0,
597
+ }
598
+ }
599
+ />
600
+ <div
601
+ aria-hidden="true"
602
+ className=""
603
+ style={
604
+ Object {
605
+ "MsFlexBasis": 24,
606
+ "MsFlexPreferredSize": 24,
607
+ "WebkitFlexBasis": 24,
608
+ "alignItems": "stretch",
609
+ "borderStyle": "solid",
610
+ "borderWidth": 0,
611
+ "boxSizing": "border-box",
612
+ "display": "flex",
613
+ "flexBasis": 24,
614
+ "flexDirection": "column",
615
+ "flexShrink": 0,
616
+ "margin": 0,
617
+ "minHeight": 0,
618
+ "minWidth": 0,
619
+ "padding": 0,
620
+ "position": "relative",
621
+ "width": 24,
622
+ "zIndex": 0,
623
+ }
624
+ }
625
+ />
626
+ </div>
627
+ <div
628
+ className=""
629
+ style={
630
+ Object {
631
+ "@media (minWidth: 1168px)": Object {
632
+ "margin": "0 auto",
633
+ },
634
+ "alignItems": "center",
635
+ "background": "#0a2a66",
636
+ "borderStyle": "solid",
637
+ "borderWidth": 0,
638
+ "boxSizing": "border-box",
639
+ "display": "flex",
640
+ "flexDirection": "row",
641
+ "height": 136,
642
+ "margin": 0,
643
+ "maxWidth": 1168,
644
+ "minHeight": 0,
645
+ "minWidth": 0,
646
+ "padding": 0,
647
+ "position": "relative",
648
+ "width": "100%",
649
+ "zIndex": 0,
650
+ }
651
+ }
652
+ >
653
+ <div
654
+ aria-hidden="true"
655
+ className=""
656
+ style={
657
+ Object {
658
+ "MsFlexBasis": 24,
659
+ "MsFlexPreferredSize": 24,
660
+ "WebkitFlexBasis": 24,
661
+ "alignItems": "stretch",
662
+ "borderStyle": "solid",
663
+ "borderWidth": 0,
664
+ "boxSizing": "border-box",
665
+ "display": "flex",
666
+ "flexBasis": 24,
667
+ "flexDirection": "column",
668
+ "flexShrink": 0,
669
+ "margin": 0,
670
+ "minHeight": 0,
671
+ "minWidth": 0,
672
+ "padding": 0,
673
+ "position": "relative",
674
+ "width": 24,
675
+ "zIndex": 0,
676
+ }
677
+ }
678
+ />
679
+ <div
680
+ aria-hidden="true"
681
+ className=""
682
+ style={
683
+ Object {
684
+ "MsFlexBasis": 24,
685
+ "MsFlexPreferredSize": 24,
686
+ "WebkitFlexBasis": 24,
687
+ "alignItems": "stretch",
688
+ "borderStyle": "solid",
689
+ "borderWidth": 0,
690
+ "boxSizing": "border-box",
691
+ "display": "flex",
692
+ "flexBasis": 24,
693
+ "flexDirection": "column",
694
+ "flexShrink": 0,
695
+ "margin": 0,
696
+ "minHeight": 0,
697
+ "minWidth": 0,
698
+ "padding": 0,
699
+ "position": "relative",
700
+ "width": 24,
701
+ "zIndex": 0,
702
+ }
703
+ }
704
+ />
705
+ </div>
706
+ <div
707
+ className=""
708
+ style={
709
+ Object {
710
+ "@media (minWidth: 1168px)": Object {
711
+ "margin": "0 auto",
712
+ },
713
+ "alignItems": "center",
714
+ "background": "#ffffff",
715
+ "borderBottom": "1px solid rgba(33,36,44,0.08)",
716
+ "borderStyle": "solid",
717
+ "borderWidth": 0,
718
+ "boxSizing": "border-box",
719
+ "display": "flex",
720
+ "flexDirection": "row",
721
+ "height": 71,
722
+ "margin": 0,
723
+ "maxWidth": 1168,
724
+ "minHeight": 0,
725
+ "minWidth": 0,
726
+ "padding": 0,
727
+ "position": "relative",
728
+ "width": "100%",
729
+ "zIndex": 0,
730
+ }
731
+ }
732
+ >
733
+ <div
734
+ aria-hidden="true"
735
+ className=""
736
+ style={
737
+ Object {
738
+ "MsFlexBasis": 24,
739
+ "MsFlexPreferredSize": 24,
740
+ "WebkitFlexBasis": 24,
741
+ "alignItems": "stretch",
742
+ "borderStyle": "solid",
743
+ "borderWidth": 0,
744
+ "boxSizing": "border-box",
745
+ "display": "flex",
746
+ "flexBasis": 24,
747
+ "flexDirection": "column",
748
+ "flexShrink": 0,
749
+ "margin": 0,
750
+ "minHeight": 0,
751
+ "minWidth": 0,
752
+ "padding": 0,
753
+ "position": "relative",
754
+ "width": 24,
755
+ "zIndex": 0,
756
+ }
757
+ }
758
+ />
759
+ <div
760
+ className=""
761
+ style={
762
+ Object {
763
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
764
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
765
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
766
+ "alignItems": "stretch",
767
+ "borderStyle": "solid",
768
+ "borderWidth": 0,
769
+ "boxSizing": "border-box",
770
+ "display": "flex",
771
+ "flexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
772
+ "flexDirection": "column",
773
+ "flexShrink": 0,
774
+ "margin": 0,
775
+ "minHeight": 0,
776
+ "minWidth": 0,
777
+ "padding": 0,
778
+ "position": "relative",
779
+ "zIndex": 0,
780
+ }
781
+ }
782
+ >
783
+ Possible mastery points
784
+ </div>
785
+ <div
786
+ aria-hidden="true"
787
+ className=""
788
+ style={
789
+ Object {
790
+ "MsFlexBasis": 32,
791
+ "MsFlexPreferredSize": 32,
792
+ "WebkitFlexBasis": 32,
793
+ "alignItems": "stretch",
794
+ "borderStyle": "solid",
795
+ "borderWidth": 0,
796
+ "boxSizing": "border-box",
797
+ "display": "flex",
798
+ "flexBasis": 32,
799
+ "flexDirection": "column",
800
+ "flexShrink": 0,
801
+ "margin": 0,
802
+ "minHeight": 0,
803
+ "minWidth": 0,
804
+ "padding": 0,
805
+ "position": "relative",
806
+ "width": 32,
807
+ "zIndex": 0,
808
+ }
809
+ }
810
+ />
811
+ <div
812
+ className=""
813
+ style={
814
+ Object {
815
+ "alignItems": "stretch",
816
+ "borderStyle": "solid",
817
+ "borderWidth": 0,
818
+ "boxSizing": "border-box",
819
+ "display": "flex",
820
+ "flexDirection": "column",
821
+ "margin": 0,
822
+ "minHeight": 0,
823
+ "minWidth": 0,
824
+ "padding": 0,
825
+ "position": "relative",
826
+ "zIndex": 0,
827
+ }
828
+ }
829
+ >
830
+ Beginner / Points to Apprentice
831
+ </div>
832
+ <div
833
+ aria-hidden="true"
834
+ className=""
835
+ style={
836
+ Object {
837
+ "MsFlexBasis": 24,
838
+ "MsFlexPreferredSize": 24,
839
+ "WebkitFlexBasis": 24,
840
+ "alignItems": "stretch",
841
+ "borderStyle": "solid",
842
+ "borderWidth": 0,
843
+ "boxSizing": "border-box",
844
+ "display": "flex",
845
+ "flexBasis": 24,
846
+ "flexDirection": "column",
847
+ "flexShrink": 0,
848
+ "margin": 0,
849
+ "minHeight": 0,
850
+ "minWidth": 0,
851
+ "padding": 0,
852
+ "position": "relative",
853
+ "width": 24,
854
+ "zIndex": 0,
855
+ }
856
+ }
857
+ />
858
+ </div>
859
+ <div
860
+ className=""
861
+ style={
862
+ Object {
863
+ "@media (minWidth: 1168px)": Object {
864
+ "margin": "0 auto",
865
+ },
866
+ "alignItems": "center",
867
+ "borderStyle": "solid",
868
+ "borderWidth": 0,
869
+ "boxSizing": "border-box",
870
+ "display": "flex",
871
+ "flexDirection": "row",
872
+ "margin": 0,
873
+ "maxWidth": 1168,
874
+ "minHeight": 0,
875
+ "minWidth": 0,
876
+ "padding": "17px 0",
877
+ "position": "relative",
878
+ "width": "100%",
879
+ "zIndex": 0,
880
+ }
881
+ }
882
+ >
883
+ <div
884
+ aria-hidden="true"
885
+ className=""
886
+ style={
887
+ Object {
888
+ "MsFlexBasis": 24,
889
+ "MsFlexPreferredSize": 24,
890
+ "WebkitFlexBasis": 24,
891
+ "alignItems": "stretch",
892
+ "borderStyle": "solid",
893
+ "borderWidth": 0,
894
+ "boxSizing": "border-box",
895
+ "display": "flex",
896
+ "flexBasis": 24,
897
+ "flexDirection": "column",
898
+ "flexShrink": 0,
899
+ "margin": 0,
900
+ "minHeight": 0,
901
+ "minWidth": 0,
902
+ "padding": 0,
903
+ "position": "relative",
904
+ "width": 24,
905
+ "zIndex": 0,
906
+ }
907
+ }
908
+ />
909
+ <div
910
+ className=""
911
+ style={
912
+ Object {
913
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
914
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
915
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
916
+ "alignItems": "stretch",
917
+ "borderStyle": "solid",
918
+ "borderWidth": 0,
919
+ "boxSizing": "border-box",
920
+ "display": "flex",
921
+ "flexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
922
+ "flexDirection": "column",
923
+ "flexShrink": 0,
924
+ "margin": 0,
925
+ "minHeight": 0,
926
+ "minWidth": 0,
927
+ "padding": 0,
928
+ "position": "relative",
929
+ "zIndex": 0,
930
+ }
931
+ }
932
+ >
933
+ Skill Summary
934
+ <hr />
935
+ Intro to Geometry
936
+ <hr />
937
+ Angles
938
+ <hr />
939
+ Quiz 1: 10 questions
940
+ <hr />
941
+ Polygons
942
+ </div>
943
+ <div
944
+ aria-hidden="true"
945
+ className=""
946
+ style={
947
+ Object {
948
+ "MsFlexBasis": 32,
949
+ "MsFlexPreferredSize": 32,
950
+ "WebkitFlexBasis": 32,
951
+ "alignItems": "stretch",
952
+ "borderStyle": "solid",
953
+ "borderWidth": 0,
954
+ "boxSizing": "border-box",
955
+ "display": "flex",
956
+ "flexBasis": 32,
957
+ "flexDirection": "column",
958
+ "flexShrink": 0,
959
+ "margin": 0,
960
+ "minHeight": 0,
961
+ "minWidth": 0,
962
+ "padding": 0,
963
+ "position": "relative",
964
+ "width": 32,
965
+ "zIndex": 0,
966
+ }
967
+ }
968
+ />
969
+ <div
970
+ className=""
971
+ style={
972
+ Object {
973
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.75 + 256px)",
974
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.75 + 256px)",
975
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.75 + 256px)",
976
+ "alignItems": "stretch",
977
+ "borderStyle": "solid",
978
+ "borderWidth": 0,
979
+ "boxSizing": "border-box",
980
+ "display": "flex",
981
+ "flexBasis": "calc((100% - 352px - 48px) * 0.75 + 256px)",
982
+ "flexDirection": "column",
983
+ "flexShrink": 0,
984
+ "margin": 0,
985
+ "minHeight": 0,
986
+ "minWidth": 0,
987
+ "padding": 0,
988
+ "position": "relative",
989
+ "zIndex": 0,
990
+ }
991
+ }
992
+ >
993
+ <div
994
+ className=""
995
+ style={
996
+ Object {
997
+ "alignItems": "stretch",
998
+ "background": "#ffffff",
999
+ "border": "1px solid rgba(33,36,44,0.08)",
1000
+ "borderStyle": "solid",
1001
+ "borderWidth": 0,
1002
+ "boxSizing": "border-box",
1003
+ "display": "flex",
1004
+ "flexDirection": "column",
1005
+ "height": 360,
1006
+ "margin": 0,
1007
+ "minHeight": 0,
1008
+ "minWidth": 0,
1009
+ "padding": 24,
1010
+ "position": "relative",
1011
+ "zIndex": 0,
1012
+ }
1013
+ }
1014
+ >
1015
+ Intro to geometry
1016
+ </div>
1017
+ <div
1018
+ className=""
1019
+ style={
1020
+ Object {
1021
+ "alignItems": "stretch",
1022
+ "background": "#ffffff",
1023
+ "border": "1px solid rgba(33,36,44,0.08)",
1024
+ "borderStyle": "solid",
1025
+ "borderWidth": 0,
1026
+ "boxSizing": "border-box",
1027
+ "display": "flex",
1028
+ "flexDirection": "column",
1029
+ "height": 360,
1030
+ "margin": 0,
1031
+ "marginTop": 16,
1032
+ "minHeight": 0,
1033
+ "minWidth": 0,
1034
+ "padding": 24,
1035
+ "position": "relative",
1036
+ "zIndex": 0,
1037
+ }
1038
+ }
1039
+ >
1040
+ Angles
1041
+ </div>
1042
+ </div>
1043
+ <div
1044
+ aria-hidden="true"
1045
+ className=""
1046
+ style={
1047
+ Object {
1048
+ "MsFlexBasis": 24,
1049
+ "MsFlexPreferredSize": 24,
1050
+ "WebkitFlexBasis": 24,
1051
+ "alignItems": "stretch",
1052
+ "borderStyle": "solid",
1053
+ "borderWidth": 0,
1054
+ "boxSizing": "border-box",
1055
+ "display": "flex",
1056
+ "flexBasis": 24,
1057
+ "flexDirection": "column",
1058
+ "flexShrink": 0,
1059
+ "margin": 0,
1060
+ "minHeight": 0,
1061
+ "minWidth": 0,
1062
+ "padding": 0,
1063
+ "position": "relative",
1064
+ "width": 24,
1065
+ "zIndex": 0,
1066
+ }
1067
+ }
1068
+ />
1069
+ </div>
1070
+ </div>
1071
+ `;
1072
+
1073
+ exports[`wonder-blocks-grid example 3 1`] = `
1074
+ <div
1075
+ className=""
1076
+ style={
1077
+ Object {
1078
+ "alignItems": "stretch",
1079
+ "background": "#21242c",
1080
+ "borderStyle": "solid",
1081
+ "borderWidth": 0,
1082
+ "boxSizing": "border-box",
1083
+ "display": "flex",
1084
+ "flexDirection": "column",
1085
+ "margin": 0,
1086
+ "minHeight": 0,
1087
+ "minWidth": 0,
1088
+ "padding": 0,
1089
+ "position": "relative",
1090
+ "zIndex": 0,
1091
+ }
1092
+ }
1093
+ >
1094
+ <div
1095
+ className=""
1096
+ style={
1097
+ Object {
1098
+ "@media (minWidth: 1168px)": Object {
1099
+ "margin": "0 auto",
1100
+ },
1101
+ "alignItems": "center",
1102
+ "borderStyle": "solid",
1103
+ "borderWidth": 0,
1104
+ "boxSizing": "border-box",
1105
+ "display": "flex",
1106
+ "flexDirection": "row",
1107
+ "margin": 0,
1108
+ "maxWidth": 1168,
1109
+ "minHeight": 0,
1110
+ "minWidth": 0,
1111
+ "padding": 0,
1112
+ "position": "relative",
1113
+ "width": "100%",
1114
+ "zIndex": 0,
1115
+ }
1116
+ }
1117
+ >
1118
+ <div
1119
+ aria-hidden="true"
1120
+ className=""
1121
+ style={
1122
+ Object {
1123
+ "MsFlexBasis": 24,
1124
+ "MsFlexPreferredSize": 24,
1125
+ "WebkitFlexBasis": 24,
1126
+ "alignItems": "stretch",
1127
+ "borderStyle": "solid",
1128
+ "borderWidth": 0,
1129
+ "boxSizing": "border-box",
1130
+ "display": "flex",
1131
+ "flexBasis": 24,
1132
+ "flexDirection": "column",
1133
+ "flexShrink": 0,
1134
+ "margin": 0,
1135
+ "minHeight": 0,
1136
+ "minWidth": 0,
1137
+ "padding": 0,
1138
+ "position": "relative",
1139
+ "width": 24,
1140
+ "zIndex": 0,
1141
+ }
1142
+ }
1143
+ />
1144
+ <div
1145
+ className=""
1146
+ style={
1147
+ Object {
1148
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1149
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1150
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1151
+ "alignItems": "stretch",
1152
+ "background": "#ffb100",
1153
+ "borderStyle": "solid",
1154
+ "borderWidth": 0,
1155
+ "boxSizing": "border-box",
1156
+ "display": "flex",
1157
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1158
+ "flexDirection": "column",
1159
+ "flexShrink": 0,
1160
+ "height": 100,
1161
+ "margin": 0,
1162
+ "minHeight": 0,
1163
+ "minWidth": 0,
1164
+ "padding": "5px 0",
1165
+ "position": "relative",
1166
+ "zIndex": 0,
1167
+ }
1168
+ }
1169
+ >
1170
+ 1
1171
+ </div>
1172
+ <div
1173
+ aria-hidden="true"
1174
+ className=""
1175
+ style={
1176
+ Object {
1177
+ "MsFlexBasis": 32,
1178
+ "MsFlexPreferredSize": 32,
1179
+ "WebkitFlexBasis": 32,
1180
+ "alignItems": "stretch",
1181
+ "borderStyle": "solid",
1182
+ "borderWidth": 0,
1183
+ "boxSizing": "border-box",
1184
+ "display": "flex",
1185
+ "flexBasis": 32,
1186
+ "flexDirection": "column",
1187
+ "flexShrink": 0,
1188
+ "margin": 0,
1189
+ "minHeight": 0,
1190
+ "minWidth": 0,
1191
+ "padding": 0,
1192
+ "position": "relative",
1193
+ "width": 32,
1194
+ "zIndex": 0,
1195
+ }
1196
+ }
1197
+ />
1198
+ <div
1199
+ className=""
1200
+ style={
1201
+ Object {
1202
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1203
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1204
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1205
+ "alignItems": "stretch",
1206
+ "background": "#ffb100",
1207
+ "borderStyle": "solid",
1208
+ "borderWidth": 0,
1209
+ "boxSizing": "border-box",
1210
+ "display": "flex",
1211
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1212
+ "flexDirection": "column",
1213
+ "flexShrink": 0,
1214
+ "height": 100,
1215
+ "margin": 0,
1216
+ "minHeight": 0,
1217
+ "minWidth": 0,
1218
+ "padding": "5px 0",
1219
+ "position": "relative",
1220
+ "zIndex": 0,
1221
+ }
1222
+ }
1223
+ >
1224
+ 1
1225
+ </div>
1226
+ <div
1227
+ aria-hidden="true"
1228
+ className=""
1229
+ style={
1230
+ Object {
1231
+ "MsFlexBasis": 32,
1232
+ "MsFlexPreferredSize": 32,
1233
+ "WebkitFlexBasis": 32,
1234
+ "alignItems": "stretch",
1235
+ "borderStyle": "solid",
1236
+ "borderWidth": 0,
1237
+ "boxSizing": "border-box",
1238
+ "display": "flex",
1239
+ "flexBasis": 32,
1240
+ "flexDirection": "column",
1241
+ "flexShrink": 0,
1242
+ "margin": 0,
1243
+ "minHeight": 0,
1244
+ "minWidth": 0,
1245
+ "padding": 0,
1246
+ "position": "relative",
1247
+ "width": 32,
1248
+ "zIndex": 0,
1249
+ }
1250
+ }
1251
+ />
1252
+ <div
1253
+ className=""
1254
+ style={
1255
+ Object {
1256
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1257
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1258
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1259
+ "alignItems": "stretch",
1260
+ "background": "#ffb100",
1261
+ "borderStyle": "solid",
1262
+ "borderWidth": 0,
1263
+ "boxSizing": "border-box",
1264
+ "display": "flex",
1265
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1266
+ "flexDirection": "column",
1267
+ "flexShrink": 0,
1268
+ "height": 100,
1269
+ "margin": 0,
1270
+ "minHeight": 0,
1271
+ "minWidth": 0,
1272
+ "padding": "5px 0",
1273
+ "position": "relative",
1274
+ "zIndex": 0,
1275
+ }
1276
+ }
1277
+ >
1278
+ 1
1279
+ </div>
1280
+ <div
1281
+ aria-hidden="true"
1282
+ className=""
1283
+ style={
1284
+ Object {
1285
+ "MsFlexBasis": 32,
1286
+ "MsFlexPreferredSize": 32,
1287
+ "WebkitFlexBasis": 32,
1288
+ "alignItems": "stretch",
1289
+ "borderStyle": "solid",
1290
+ "borderWidth": 0,
1291
+ "boxSizing": "border-box",
1292
+ "display": "flex",
1293
+ "flexBasis": 32,
1294
+ "flexDirection": "column",
1295
+ "flexShrink": 0,
1296
+ "margin": 0,
1297
+ "minHeight": 0,
1298
+ "minWidth": 0,
1299
+ "padding": 0,
1300
+ "position": "relative",
1301
+ "width": 32,
1302
+ "zIndex": 0,
1303
+ }
1304
+ }
1305
+ />
1306
+ <div
1307
+ className=""
1308
+ style={
1309
+ Object {
1310
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1311
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1312
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1313
+ "alignItems": "stretch",
1314
+ "background": "#ffb100",
1315
+ "borderStyle": "solid",
1316
+ "borderWidth": 0,
1317
+ "boxSizing": "border-box",
1318
+ "display": "flex",
1319
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1320
+ "flexDirection": "column",
1321
+ "flexShrink": 0,
1322
+ "height": 100,
1323
+ "margin": 0,
1324
+ "minHeight": 0,
1325
+ "minWidth": 0,
1326
+ "padding": "5px 0",
1327
+ "position": "relative",
1328
+ "zIndex": 0,
1329
+ }
1330
+ }
1331
+ >
1332
+ 1
1333
+ </div>
1334
+ <div
1335
+ aria-hidden="true"
1336
+ className=""
1337
+ style={
1338
+ Object {
1339
+ "MsFlexBasis": 32,
1340
+ "MsFlexPreferredSize": 32,
1341
+ "WebkitFlexBasis": 32,
1342
+ "alignItems": "stretch",
1343
+ "borderStyle": "solid",
1344
+ "borderWidth": 0,
1345
+ "boxSizing": "border-box",
1346
+ "display": "flex",
1347
+ "flexBasis": 32,
1348
+ "flexDirection": "column",
1349
+ "flexShrink": 0,
1350
+ "margin": 0,
1351
+ "minHeight": 0,
1352
+ "minWidth": 0,
1353
+ "padding": 0,
1354
+ "position": "relative",
1355
+ "width": 32,
1356
+ "zIndex": 0,
1357
+ }
1358
+ }
1359
+ />
1360
+ <div
1361
+ className=""
1362
+ style={
1363
+ Object {
1364
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1365
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1366
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1367
+ "alignItems": "stretch",
1368
+ "background": "#ffb100",
1369
+ "borderStyle": "solid",
1370
+ "borderWidth": 0,
1371
+ "boxSizing": "border-box",
1372
+ "display": "flex",
1373
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1374
+ "flexDirection": "column",
1375
+ "flexShrink": 0,
1376
+ "height": 100,
1377
+ "margin": 0,
1378
+ "minHeight": 0,
1379
+ "minWidth": 0,
1380
+ "padding": "5px 0",
1381
+ "position": "relative",
1382
+ "zIndex": 0,
1383
+ }
1384
+ }
1385
+ >
1386
+ 1
1387
+ </div>
1388
+ <div
1389
+ aria-hidden="true"
1390
+ className=""
1391
+ style={
1392
+ Object {
1393
+ "MsFlexBasis": 32,
1394
+ "MsFlexPreferredSize": 32,
1395
+ "WebkitFlexBasis": 32,
1396
+ "alignItems": "stretch",
1397
+ "borderStyle": "solid",
1398
+ "borderWidth": 0,
1399
+ "boxSizing": "border-box",
1400
+ "display": "flex",
1401
+ "flexBasis": 32,
1402
+ "flexDirection": "column",
1403
+ "flexShrink": 0,
1404
+ "margin": 0,
1405
+ "minHeight": 0,
1406
+ "minWidth": 0,
1407
+ "padding": 0,
1408
+ "position": "relative",
1409
+ "width": 32,
1410
+ "zIndex": 0,
1411
+ }
1412
+ }
1413
+ />
1414
+ <div
1415
+ className=""
1416
+ style={
1417
+ Object {
1418
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1419
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1420
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1421
+ "alignItems": "stretch",
1422
+ "background": "#ffb100",
1423
+ "borderStyle": "solid",
1424
+ "borderWidth": 0,
1425
+ "boxSizing": "border-box",
1426
+ "display": "flex",
1427
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1428
+ "flexDirection": "column",
1429
+ "flexShrink": 0,
1430
+ "height": 100,
1431
+ "margin": 0,
1432
+ "minHeight": 0,
1433
+ "minWidth": 0,
1434
+ "padding": "5px 0",
1435
+ "position": "relative",
1436
+ "zIndex": 0,
1437
+ }
1438
+ }
1439
+ >
1440
+ 1
1441
+ </div>
1442
+ <div
1443
+ aria-hidden="true"
1444
+ className=""
1445
+ style={
1446
+ Object {
1447
+ "MsFlexBasis": 32,
1448
+ "MsFlexPreferredSize": 32,
1449
+ "WebkitFlexBasis": 32,
1450
+ "alignItems": "stretch",
1451
+ "borderStyle": "solid",
1452
+ "borderWidth": 0,
1453
+ "boxSizing": "border-box",
1454
+ "display": "flex",
1455
+ "flexBasis": 32,
1456
+ "flexDirection": "column",
1457
+ "flexShrink": 0,
1458
+ "margin": 0,
1459
+ "minHeight": 0,
1460
+ "minWidth": 0,
1461
+ "padding": 0,
1462
+ "position": "relative",
1463
+ "width": 32,
1464
+ "zIndex": 0,
1465
+ }
1466
+ }
1467
+ />
1468
+ <div
1469
+ className=""
1470
+ style={
1471
+ Object {
1472
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1473
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1474
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1475
+ "alignItems": "stretch",
1476
+ "background": "#ffb100",
1477
+ "borderStyle": "solid",
1478
+ "borderWidth": 0,
1479
+ "boxSizing": "border-box",
1480
+ "display": "flex",
1481
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1482
+ "flexDirection": "column",
1483
+ "flexShrink": 0,
1484
+ "height": 100,
1485
+ "margin": 0,
1486
+ "minHeight": 0,
1487
+ "minWidth": 0,
1488
+ "padding": "5px 0",
1489
+ "position": "relative",
1490
+ "zIndex": 0,
1491
+ }
1492
+ }
1493
+ >
1494
+ 1
1495
+ </div>
1496
+ <div
1497
+ aria-hidden="true"
1498
+ className=""
1499
+ style={
1500
+ Object {
1501
+ "MsFlexBasis": 32,
1502
+ "MsFlexPreferredSize": 32,
1503
+ "WebkitFlexBasis": 32,
1504
+ "alignItems": "stretch",
1505
+ "borderStyle": "solid",
1506
+ "borderWidth": 0,
1507
+ "boxSizing": "border-box",
1508
+ "display": "flex",
1509
+ "flexBasis": 32,
1510
+ "flexDirection": "column",
1511
+ "flexShrink": 0,
1512
+ "margin": 0,
1513
+ "minHeight": 0,
1514
+ "minWidth": 0,
1515
+ "padding": 0,
1516
+ "position": "relative",
1517
+ "width": 32,
1518
+ "zIndex": 0,
1519
+ }
1520
+ }
1521
+ />
1522
+ <div
1523
+ className=""
1524
+ style={
1525
+ Object {
1526
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1527
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1528
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1529
+ "alignItems": "stretch",
1530
+ "background": "#ffb100",
1531
+ "borderStyle": "solid",
1532
+ "borderWidth": 0,
1533
+ "boxSizing": "border-box",
1534
+ "display": "flex",
1535
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1536
+ "flexDirection": "column",
1537
+ "flexShrink": 0,
1538
+ "height": 100,
1539
+ "margin": 0,
1540
+ "minHeight": 0,
1541
+ "minWidth": 0,
1542
+ "padding": "5px 0",
1543
+ "position": "relative",
1544
+ "zIndex": 0,
1545
+ }
1546
+ }
1547
+ >
1548
+ 1
1549
+ </div>
1550
+ <div
1551
+ aria-hidden="true"
1552
+ className=""
1553
+ style={
1554
+ Object {
1555
+ "MsFlexBasis": 32,
1556
+ "MsFlexPreferredSize": 32,
1557
+ "WebkitFlexBasis": 32,
1558
+ "alignItems": "stretch",
1559
+ "borderStyle": "solid",
1560
+ "borderWidth": 0,
1561
+ "boxSizing": "border-box",
1562
+ "display": "flex",
1563
+ "flexBasis": 32,
1564
+ "flexDirection": "column",
1565
+ "flexShrink": 0,
1566
+ "margin": 0,
1567
+ "minHeight": 0,
1568
+ "minWidth": 0,
1569
+ "padding": 0,
1570
+ "position": "relative",
1571
+ "width": 32,
1572
+ "zIndex": 0,
1573
+ }
1574
+ }
1575
+ />
1576
+ <div
1577
+ className=""
1578
+ style={
1579
+ Object {
1580
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1581
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1582
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1583
+ "alignItems": "stretch",
1584
+ "background": "#ffb100",
1585
+ "borderStyle": "solid",
1586
+ "borderWidth": 0,
1587
+ "boxSizing": "border-box",
1588
+ "display": "flex",
1589
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1590
+ "flexDirection": "column",
1591
+ "flexShrink": 0,
1592
+ "height": 100,
1593
+ "margin": 0,
1594
+ "minHeight": 0,
1595
+ "minWidth": 0,
1596
+ "padding": "5px 0",
1597
+ "position": "relative",
1598
+ "zIndex": 0,
1599
+ }
1600
+ }
1601
+ >
1602
+ 1
1603
+ </div>
1604
+ <div
1605
+ aria-hidden="true"
1606
+ className=""
1607
+ style={
1608
+ Object {
1609
+ "MsFlexBasis": 32,
1610
+ "MsFlexPreferredSize": 32,
1611
+ "WebkitFlexBasis": 32,
1612
+ "alignItems": "stretch",
1613
+ "borderStyle": "solid",
1614
+ "borderWidth": 0,
1615
+ "boxSizing": "border-box",
1616
+ "display": "flex",
1617
+ "flexBasis": 32,
1618
+ "flexDirection": "column",
1619
+ "flexShrink": 0,
1620
+ "margin": 0,
1621
+ "minHeight": 0,
1622
+ "minWidth": 0,
1623
+ "padding": 0,
1624
+ "position": "relative",
1625
+ "width": 32,
1626
+ "zIndex": 0,
1627
+ }
1628
+ }
1629
+ />
1630
+ <div
1631
+ className=""
1632
+ style={
1633
+ Object {
1634
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1635
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1636
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1637
+ "alignItems": "stretch",
1638
+ "background": "#ffb100",
1639
+ "borderStyle": "solid",
1640
+ "borderWidth": 0,
1641
+ "boxSizing": "border-box",
1642
+ "display": "flex",
1643
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1644
+ "flexDirection": "column",
1645
+ "flexShrink": 0,
1646
+ "height": 100,
1647
+ "margin": 0,
1648
+ "minHeight": 0,
1649
+ "minWidth": 0,
1650
+ "padding": "5px 0",
1651
+ "position": "relative",
1652
+ "zIndex": 0,
1653
+ }
1654
+ }
1655
+ >
1656
+ 1
1657
+ </div>
1658
+ <div
1659
+ aria-hidden="true"
1660
+ className=""
1661
+ style={
1662
+ Object {
1663
+ "MsFlexBasis": 32,
1664
+ "MsFlexPreferredSize": 32,
1665
+ "WebkitFlexBasis": 32,
1666
+ "alignItems": "stretch",
1667
+ "borderStyle": "solid",
1668
+ "borderWidth": 0,
1669
+ "boxSizing": "border-box",
1670
+ "display": "flex",
1671
+ "flexBasis": 32,
1672
+ "flexDirection": "column",
1673
+ "flexShrink": 0,
1674
+ "margin": 0,
1675
+ "minHeight": 0,
1676
+ "minWidth": 0,
1677
+ "padding": 0,
1678
+ "position": "relative",
1679
+ "width": 32,
1680
+ "zIndex": 0,
1681
+ }
1682
+ }
1683
+ />
1684
+ <div
1685
+ className=""
1686
+ style={
1687
+ Object {
1688
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1689
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1690
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1691
+ "alignItems": "stretch",
1692
+ "background": "#ffb100",
1693
+ "borderStyle": "solid",
1694
+ "borderWidth": 0,
1695
+ "boxSizing": "border-box",
1696
+ "display": "flex",
1697
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1698
+ "flexDirection": "column",
1699
+ "flexShrink": 0,
1700
+ "height": 100,
1701
+ "margin": 0,
1702
+ "minHeight": 0,
1703
+ "minWidth": 0,
1704
+ "padding": "5px 0",
1705
+ "position": "relative",
1706
+ "zIndex": 0,
1707
+ }
1708
+ }
1709
+ >
1710
+ 1
1711
+ </div>
1712
+ <div
1713
+ aria-hidden="true"
1714
+ className=""
1715
+ style={
1716
+ Object {
1717
+ "MsFlexBasis": 32,
1718
+ "MsFlexPreferredSize": 32,
1719
+ "WebkitFlexBasis": 32,
1720
+ "alignItems": "stretch",
1721
+ "borderStyle": "solid",
1722
+ "borderWidth": 0,
1723
+ "boxSizing": "border-box",
1724
+ "display": "flex",
1725
+ "flexBasis": 32,
1726
+ "flexDirection": "column",
1727
+ "flexShrink": 0,
1728
+ "margin": 0,
1729
+ "minHeight": 0,
1730
+ "minWidth": 0,
1731
+ "padding": 0,
1732
+ "position": "relative",
1733
+ "width": 32,
1734
+ "zIndex": 0,
1735
+ }
1736
+ }
1737
+ />
1738
+ <div
1739
+ className=""
1740
+ style={
1741
+ Object {
1742
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1743
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1744
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1745
+ "alignItems": "stretch",
1746
+ "background": "#ffb100",
1747
+ "borderStyle": "solid",
1748
+ "borderWidth": 0,
1749
+ "boxSizing": "border-box",
1750
+ "display": "flex",
1751
+ "flexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1752
+ "flexDirection": "column",
1753
+ "flexShrink": 0,
1754
+ "height": 100,
1755
+ "margin": 0,
1756
+ "minHeight": 0,
1757
+ "minWidth": 0,
1758
+ "padding": "5px 0",
1759
+ "position": "relative",
1760
+ "zIndex": 0,
1761
+ }
1762
+ }
1763
+ >
1764
+ 1
1765
+ </div>
1766
+ <div
1767
+ aria-hidden="true"
1768
+ className=""
1769
+ style={
1770
+ Object {
1771
+ "MsFlexBasis": 24,
1772
+ "MsFlexPreferredSize": 24,
1773
+ "WebkitFlexBasis": 24,
1774
+ "alignItems": "stretch",
1775
+ "borderStyle": "solid",
1776
+ "borderWidth": 0,
1777
+ "boxSizing": "border-box",
1778
+ "display": "flex",
1779
+ "flexBasis": 24,
1780
+ "flexDirection": "column",
1781
+ "flexShrink": 0,
1782
+ "margin": 0,
1783
+ "minHeight": 0,
1784
+ "minWidth": 0,
1785
+ "padding": 0,
1786
+ "position": "relative",
1787
+ "width": 24,
1788
+ "zIndex": 0,
1789
+ }
1790
+ }
1791
+ />
1792
+ </div>
1793
+ </div>
1794
+ `;
1795
+
1796
+ exports[`wonder-blocks-grid example 4 1`] = `
1797
+ <div
1798
+ className=""
1799
+ style={
1800
+ Object {
1801
+ "alignItems": "stretch",
1802
+ "background": "#21242c",
1803
+ "borderStyle": "solid",
1804
+ "borderWidth": 0,
1805
+ "boxSizing": "border-box",
1806
+ "display": "flex",
1807
+ "flexDirection": "column",
1808
+ "margin": 0,
1809
+ "minHeight": 0,
1810
+ "minWidth": 0,
1811
+ "padding": 0,
1812
+ "position": "relative",
1813
+ "zIndex": 0,
1814
+ }
1815
+ }
1816
+ >
1817
+ <div
1818
+ className=""
1819
+ style={
1820
+ Object {
1821
+ "@media (minWidth: 1168px)": Object {
1822
+ "margin": "0 auto",
1823
+ },
1824
+ "alignItems": "center",
1825
+ "background": "#ffffff",
1826
+ "border": "1px solid #ffb100",
1827
+ "borderStyle": "solid",
1828
+ "borderWidth": 0,
1829
+ "boxSizing": "border-box",
1830
+ "display": "flex",
1831
+ "flexDirection": "row",
1832
+ "margin": 0,
1833
+ "maxWidth": 1168,
1834
+ "minHeight": 0,
1835
+ "minWidth": 0,
1836
+ "padding": "16px 0",
1837
+ "position": "relative",
1838
+ "width": "100%",
1839
+ "zIndex": 0,
1840
+ }
1841
+ }
1842
+ >
1843
+ <div
1844
+ aria-hidden="true"
1845
+ className=""
1846
+ style={
1847
+ Object {
1848
+ "MsFlexBasis": 24,
1849
+ "MsFlexPreferredSize": 24,
1850
+ "WebkitFlexBasis": 24,
1851
+ "alignItems": "stretch",
1852
+ "borderStyle": "solid",
1853
+ "borderWidth": 0,
1854
+ "boxSizing": "border-box",
1855
+ "display": "flex",
1856
+ "flexBasis": 24,
1857
+ "flexDirection": "column",
1858
+ "flexShrink": 0,
1859
+ "margin": 0,
1860
+ "minHeight": 0,
1861
+ "minWidth": 0,
1862
+ "padding": 0,
1863
+ "position": "relative",
1864
+ "width": 24,
1865
+ "zIndex": 0,
1866
+ }
1867
+ }
1868
+ />
1869
+ <div
1870
+ className=""
1871
+ style={
1872
+ Object {
1873
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1874
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1875
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1876
+ "alignItems": "stretch",
1877
+ "background": "#ffb100",
1878
+ "borderStyle": "solid",
1879
+ "borderWidth": 0,
1880
+ "boxSizing": "border-box",
1881
+ "display": "flex",
1882
+ "flexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1883
+ "flexDirection": "column",
1884
+ "flexShrink": 0,
1885
+ "height": 100,
1886
+ "margin": 0,
1887
+ "minHeight": 0,
1888
+ "minWidth": 0,
1889
+ "padding": 5,
1890
+ "position": "relative",
1891
+ "zIndex": 0,
1892
+ }
1893
+ }
1894
+ >
1895
+ <span
1896
+ className=""
1897
+ style={
1898
+ Object {
1899
+ "MozOsxFontSmoothing": "grayscale",
1900
+ "WebkitFontSmoothing": "antialiased",
1901
+ }
1902
+ }
1903
+ >
1904
+ Cell
1905
+ </span>
1906
+ </div>
1907
+ <div
1908
+ aria-hidden="true"
1909
+ className=""
1910
+ style={
1911
+ Object {
1912
+ "MsFlexBasis": 32,
1913
+ "MsFlexPreferredSize": 32,
1914
+ "WebkitFlexBasis": 32,
1915
+ "alignItems": "stretch",
1916
+ "borderStyle": "solid",
1917
+ "borderWidth": 0,
1918
+ "boxSizing": "border-box",
1919
+ "display": "flex",
1920
+ "flexBasis": 32,
1921
+ "flexDirection": "column",
1922
+ "flexShrink": 0,
1923
+ "margin": 0,
1924
+ "minHeight": 0,
1925
+ "minWidth": 0,
1926
+ "padding": 0,
1927
+ "position": "relative",
1928
+ "width": 32,
1929
+ "zIndex": 0,
1930
+ }
1931
+ }
1932
+ />
1933
+ <div
1934
+ className=""
1935
+ style={
1936
+ Object {
1937
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1938
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1939
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1940
+ "alignItems": "stretch",
1941
+ "background": "#ffb100",
1942
+ "borderStyle": "solid",
1943
+ "borderWidth": 0,
1944
+ "boxSizing": "border-box",
1945
+ "display": "flex",
1946
+ "flexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1947
+ "flexDirection": "column",
1948
+ "flexShrink": 0,
1949
+ "height": 100,
1950
+ "margin": 0,
1951
+ "minHeight": 0,
1952
+ "minWidth": 0,
1953
+ "padding": 5,
1954
+ "position": "relative",
1955
+ "zIndex": 0,
1956
+ }
1957
+ }
1958
+ >
1959
+ <span
1960
+ className=""
1961
+ style={
1962
+ Object {
1963
+ "MozOsxFontSmoothing": "grayscale",
1964
+ "WebkitFontSmoothing": "antialiased",
1965
+ }
1966
+ }
1967
+ >
1968
+ Cell
1969
+ </span>
1970
+ </div>
1971
+ <div
1972
+ aria-hidden="true"
1973
+ className=""
1974
+ style={
1975
+ Object {
1976
+ "MsFlexBasis": 24,
1977
+ "MsFlexPreferredSize": 24,
1978
+ "WebkitFlexBasis": 24,
1979
+ "alignItems": "stretch",
1980
+ "borderStyle": "solid",
1981
+ "borderWidth": 0,
1982
+ "boxSizing": "border-box",
1983
+ "display": "flex",
1984
+ "flexBasis": 24,
1985
+ "flexDirection": "column",
1986
+ "flexShrink": 0,
1987
+ "margin": 0,
1988
+ "minHeight": 0,
1989
+ "minWidth": 0,
1990
+ "padding": 0,
1991
+ "position": "relative",
1992
+ "width": 24,
1993
+ "zIndex": 0,
1994
+ }
1995
+ }
1996
+ />
1997
+ </div>
1998
+ </div>
1999
+ `;
2000
+
2001
+ exports[`wonder-blocks-grid example 5 1`] = `
2002
+ <div
2003
+ className=""
2004
+ style={
2005
+ Object {
2006
+ "alignItems": "stretch",
2007
+ "background": "#21242c",
2008
+ "borderStyle": "solid",
2009
+ "borderWidth": 0,
2010
+ "boxSizing": "border-box",
2011
+ "display": "flex",
2012
+ "flexDirection": "column",
2013
+ "height": "400px",
2014
+ "margin": 0,
2015
+ "minHeight": 0,
2016
+ "minWidth": 0,
2017
+ "padding": 0,
2018
+ "position": "relative",
2019
+ "zIndex": 0,
2020
+ }
2021
+ }
2022
+ >
2023
+ <div
2024
+ className=""
2025
+ style={
2026
+ Object {
2027
+ "@media (minWidth: 1168px)": Object {
2028
+ "margin": "0 auto",
2029
+ },
2030
+ "alignItems": "stretch",
2031
+ "background": "#ffffff",
2032
+ "border": "1px solid #ffb100",
2033
+ "borderStyle": "solid",
2034
+ "borderWidth": 0,
2035
+ "boxSizing": "border-box",
2036
+ "display": "flex",
2037
+ "flexDirection": "row",
2038
+ "height": "100%",
2039
+ "margin": 0,
2040
+ "maxWidth": 1168,
2041
+ "minHeight": 0,
2042
+ "minWidth": 0,
2043
+ "padding": "16px 0",
2044
+ "position": "relative",
2045
+ "width": "100%",
2046
+ "zIndex": 0,
2047
+ }
2048
+ }
2049
+ >
2050
+ <div
2051
+ aria-hidden="true"
2052
+ className=""
2053
+ style={
2054
+ Object {
2055
+ "MsFlexBasis": 24,
2056
+ "MsFlexPreferredSize": 24,
2057
+ "WebkitFlexBasis": 24,
2058
+ "alignItems": "stretch",
2059
+ "borderStyle": "solid",
2060
+ "borderWidth": 0,
2061
+ "boxSizing": "border-box",
2062
+ "display": "flex",
2063
+ "flexBasis": 24,
2064
+ "flexDirection": "column",
2065
+ "flexShrink": 0,
2066
+ "margin": 0,
2067
+ "minHeight": 0,
2068
+ "minWidth": 0,
2069
+ "padding": 0,
2070
+ "position": "relative",
2071
+ "width": 24,
2072
+ "zIndex": 0,
2073
+ }
2074
+ }
2075
+ />
2076
+ <div
2077
+ className=""
2078
+ style={
2079
+ Object {
2080
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2081
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2082
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2083
+ "alignItems": "stretch",
2084
+ "background": "#ffb100",
2085
+ "borderStyle": "solid",
2086
+ "borderWidth": 0,
2087
+ "boxSizing": "border-box",
2088
+ "display": "flex",
2089
+ "flexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2090
+ "flexDirection": "column",
2091
+ "flexShrink": 0,
2092
+ "margin": 0,
2093
+ "minHeight": 0,
2094
+ "minWidth": 0,
2095
+ "overflowY": "auto",
2096
+ "padding": 5,
2097
+ "position": "relative",
2098
+ "zIndex": 0,
2099
+ }
2100
+ }
2101
+ >
2102
+ <span
2103
+ className=""
2104
+ style={
2105
+ Object {
2106
+ "MozOsxFontSmoothing": "grayscale",
2107
+ "WebkitFontSmoothing": "antialiased",
2108
+ }
2109
+ }
2110
+ >
2111
+ Sidebar
2112
+ </span>
2113
+ <ul>
2114
+ <li>
2115
+ Chapter 1: Loomings
2116
+ </li>
2117
+ <li>
2118
+ Chapter 2: The Carpet-Bag
2119
+ </li>
2120
+ <li>
2121
+ Chapter 3: The Spouter-Inn
2122
+ </li>
2123
+ <li>
2124
+ Chapter 4: The Counterpane
2125
+ </li>
2126
+ <li>
2127
+ Chapter 5: Breakfast
2128
+ </li>
2129
+ <li>
2130
+ Chapter 6: The Street
2131
+ </li>
2132
+ </ul>
2133
+ </div>
2134
+ <div
2135
+ aria-hidden="true"
2136
+ className=""
2137
+ style={
2138
+ Object {
2139
+ "MsFlexBasis": 32,
2140
+ "MsFlexPreferredSize": 32,
2141
+ "WebkitFlexBasis": 32,
2142
+ "alignItems": "stretch",
2143
+ "borderStyle": "solid",
2144
+ "borderWidth": 0,
2145
+ "boxSizing": "border-box",
2146
+ "display": "flex",
2147
+ "flexBasis": 32,
2148
+ "flexDirection": "column",
2149
+ "flexShrink": 0,
2150
+ "margin": 0,
2151
+ "minHeight": 0,
2152
+ "minWidth": 0,
2153
+ "padding": 0,
2154
+ "position": "relative",
2155
+ "width": 32,
2156
+ "zIndex": 0,
2157
+ }
2158
+ }
2159
+ />
2160
+ <div
2161
+ className=""
2162
+ style={
2163
+ Object {
2164
+ "MsFlexBasis": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2165
+ "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2166
+ "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2167
+ "alignItems": "stretch",
2168
+ "background": "#ffb100",
2169
+ "borderStyle": "solid",
2170
+ "borderWidth": 0,
2171
+ "boxSizing": "border-box",
2172
+ "display": "flex",
2173
+ "flexBasis": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2174
+ "flexDirection": "column",
2175
+ "flexShrink": 0,
2176
+ "margin": 0,
2177
+ "minHeight": 0,
2178
+ "minWidth": 0,
2179
+ "overflowY": "auto",
2180
+ "padding": 5,
2181
+ "position": "relative",
2182
+ "zIndex": 0,
2183
+ }
2184
+ }
2185
+ >
2186
+ <p
2187
+ className=""
2188
+ style={
2189
+ Object {
2190
+ "MozOsxFontSmoothing": "grayscale",
2191
+ "WebkitFontSmoothing": "antialiased",
2192
+ "display": "block",
2193
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2194
+ "fontSize": 16,
2195
+ "fontWeight": 400,
2196
+ "lineHeight": "22px",
2197
+ }
2198
+ }
2199
+ >
2200
+ Call me Ishmael. Some years ago- never mind how long precisely- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off- then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.
2201
+ </p>
2202
+ <p
2203
+ className=""
2204
+ style={
2205
+ Object {
2206
+ "MozOsxFontSmoothing": "grayscale",
2207
+ "WebkitFontSmoothing": "antialiased",
2208
+ "display": "block",
2209
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2210
+ "fontSize": 16,
2211
+ "fontWeight": 400,
2212
+ "lineHeight": "22px",
2213
+ }
2214
+ }
2215
+ >
2216
+ There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs- commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
2217
+ </p>
2218
+ </div>
2219
+ <div
2220
+ aria-hidden="true"
2221
+ className=""
2222
+ style={
2223
+ Object {
2224
+ "MsFlexBasis": 24,
2225
+ "MsFlexPreferredSize": 24,
2226
+ "WebkitFlexBasis": 24,
2227
+ "alignItems": "stretch",
2228
+ "borderStyle": "solid",
2229
+ "borderWidth": 0,
2230
+ "boxSizing": "border-box",
2231
+ "display": "flex",
2232
+ "flexBasis": 24,
2233
+ "flexDirection": "column",
2234
+ "flexShrink": 0,
2235
+ "margin": 0,
2236
+ "minHeight": 0,
2237
+ "minWidth": 0,
2238
+ "padding": 0,
2239
+ "position": "relative",
2240
+ "width": 24,
2241
+ "zIndex": 0,
2242
+ }
2243
+ }
2244
+ />
2245
+ </div>
2246
+ </div>
2247
+ `;