@khanacademy/wonder-blocks-grid 1.0.32 → 1.0.33

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @khanacademy/wonder-blocks-grid
2
2
 
3
+ ## 1.0.33
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [6ee20af9]
8
+ - @khanacademy/wonder-blocks-core@4.4.0
9
+
3
10
  ## 1.0.32
4
11
 
5
12
  ### Patch Changes
package/dist/index.js CHANGED
@@ -341,7 +341,7 @@ function (modules) {
341
341
 
342
342
  /******/
343
343
 
344
- return __webpack_require__(__webpack_require__.s = 10);
344
+ return __webpack_require__(__webpack_require__.s = 11);
345
345
  /******/
346
346
  }
347
347
  /************************************************************************/
@@ -499,43 +499,33 @@ function (module, __webpack_exports__, __webpack_require__) {
499
499
  /* harmony import */
500
500
 
501
501
 
502
- var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
502
+ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
503
503
  /* harmony import */
504
504
 
505
505
 
506
- var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
506
+ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
507
507
  /* harmony import */
508
508
 
509
509
 
510
- var _media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
510
+ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
511
511
  /* harmony import */
512
512
 
513
513
 
514
- var _util_specs_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
514
+ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
515
+ /* harmony import */
515
516
 
516
- function _extends() {
517
- _extends = Object.assign || function (target) {
518
- for (var i = 1; i < arguments.length; i++) {
519
- var source = arguments[i];
520
517
 
521
- for (var key in source) {
522
- if (Object.prototype.hasOwnProperty.call(source, key)) {
523
- target[key] = source[key];
524
- }
525
- }
526
- }
518
+ var _media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
519
+ /* harmony import */
527
520
 
528
- return target;
529
- };
530
521
 
531
- return _extends.apply(this, arguments);
532
- }
522
+ var _util_specs_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
533
523
 
534
- const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
524
+ const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
535
525
  /* MEDIA_DEFAULT_SPEC */
536
- "a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
526
+ "a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
537
527
  /* MEDIA_INTERNAL_SPEC */
538
- "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
528
+ "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
539
529
  /* MEDIA_MODAL_SPEC */
540
530
  "c"]).map(spec => spec.query));
541
531
  const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
@@ -550,7 +540,7 @@ function (module, __webpack_exports__, __webpack_require__) {
550
540
  * `MEDIA_DEFAULT_SPEC`. See media-layout-context.js for additiional options.
551
541
  */
552
542
 
553
- class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
543
+ class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
554
544
  // A collection of thunks that's used to clean up event listeners
555
545
  // when the component is unmounted.
556
546
  constructor(props) {
@@ -719,18 +709,18 @@ function (module, __webpack_exports__, __webpack_require__) {
719
709
  */
720
710
 
721
711
 
722
- class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
712
+ class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
723
713
  render() {
724
714
  // We listen to the MediaLayoutContext to see what defaults we're
725
715
  // being given (this can be overriden by wrapping this component in
726
716
  // a MediaLayoutContext.Consumer).
727
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__[
717
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__[
728
718
  /* default */
729
719
  "a"].Consumer, null, ({
730
720
  overrideSize,
731
721
  ssrSize,
732
722
  mediaSpec
733
- }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](MediaLayoutInternal, _extends({}, this.props, {
723
+ }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](MediaLayoutInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, this.props, {
734
724
  overrideSize: overrideSize,
735
725
  ssrSize: ssrSize,
736
726
  mediaSpec: mediaSpec
@@ -762,7 +752,7 @@ function (module, __webpack_exports__, __webpack_require__) {
762
752
  /* harmony import */
763
753
 
764
754
 
765
- var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
755
+ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
766
756
  /* harmony import */
767
757
 
768
758
 
@@ -915,11 +905,35 @@ function (module, __webpack_exports__, __webpack_require__) {
915
905
 
916
906
  /***/
917
907
  function (module, exports) {
918
- module.exports = __webpack_require__(5);
908
+ function _extends() {
909
+ module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
910
+ for (var i = 1; i < arguments.length; i++) {
911
+ var source = arguments[i];
912
+
913
+ for (var key in source) {
914
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
915
+ target[key] = source[key];
916
+ }
917
+ }
918
+ }
919
+
920
+ return target;
921
+ }, module.exports.__esModule = true, module.exports["default"] = module.exports;
922
+ return _extends.apply(this, arguments);
923
+ }
924
+
925
+ module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
919
926
  /***/
920
927
  },
921
928
  /* 10 */
922
929
 
930
+ /***/
931
+ function (module, exports) {
932
+ module.exports = __webpack_require__(5);
933
+ /***/
934
+ },
935
+ /* 11 */
936
+
923
937
  /***/
924
938
  function (module, __webpack_exports__, __webpack_require__) {
925
939
  "use strict";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-grid",
3
- "version": "1.0.32",
3
+ "version": "1.0.33",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,7 +17,7 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
19
  "@khanacademy/wonder-blocks-color": "^1.2.0",
20
- "@khanacademy/wonder-blocks-core": "^4.3.2",
20
+ "@khanacademy/wonder-blocks-core": "^4.4.0",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5"
22
22
  },
23
23
  "peerDependencies": {
@@ -4,7 +4,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
4
4
  <div
5
5
  className=""
6
6
  style={
7
- Object {
7
+ {
8
8
  "alignItems": "stretch",
9
9
  "background": "#21242c",
10
10
  "borderStyle": "solid",
@@ -24,8 +24,8 @@ exports[`wonder-blocks-grid example 1 1`] = `
24
24
  <div
25
25
  className=""
26
26
  style={
27
- Object {
28
- "@media (minWidth: 1168px)": Object {
27
+ {
28
+ "@media (minWidth: 1168px)": {
29
29
  "margin": "0 auto",
30
30
  },
31
31
  "alignItems": "center",
@@ -49,7 +49,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
49
49
  aria-hidden="true"
50
50
  className=""
51
51
  style={
52
- Object {
52
+ {
53
53
  "MsFlexBasis": 24,
54
54
  "MsFlexPreferredSize": 24,
55
55
  "WebkitFlexBasis": 24,
@@ -74,7 +74,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
74
74
  <div
75
75
  className=""
76
76
  style={
77
- Object {
77
+ {
78
78
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
79
79
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
80
80
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
@@ -100,7 +100,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
100
100
  <div
101
101
  className=""
102
102
  style={
103
- Object {
103
+ {
104
104
  "alignItems": "stretch",
105
105
  "borderStyle": "solid",
106
106
  "borderWidth": 0,
@@ -119,11 +119,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
119
119
  <span
120
120
  className=""
121
121
  style={
122
- Object {
122
+ {
123
123
  "MozOsxFontSmoothing": "grayscale",
124
124
  "WebkitFontSmoothing": "antialiased",
125
125
  "display": "block",
126
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
126
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
127
127
  "fontSize": 16,
128
128
  "fontWeight": 400,
129
129
  "lineHeight": "20px",
@@ -140,7 +140,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
140
140
  <div
141
141
  className=""
142
142
  style={
143
- Object {
143
+ {
144
144
  "alignItems": "stretch",
145
145
  "borderStyle": "solid",
146
146
  "borderWidth": 0,
@@ -160,11 +160,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
160
160
  <span
161
161
  className=""
162
162
  style={
163
- Object {
163
+ {
164
164
  "MozOsxFontSmoothing": "grayscale",
165
165
  "WebkitFontSmoothing": "antialiased",
166
166
  "display": "block",
167
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
167
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
168
168
  "fontSize": 16,
169
169
  "fontWeight": 400,
170
170
  "lineHeight": "20px",
@@ -178,7 +178,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
178
178
  <div
179
179
  className=""
180
180
  style={
181
- Object {
181
+ {
182
182
  "alignItems": "stretch",
183
183
  "borderStyle": "solid",
184
184
  "borderWidth": 0,
@@ -198,11 +198,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
198
198
  <span
199
199
  className=""
200
200
  style={
201
- Object {
201
+ {
202
202
  "MozOsxFontSmoothing": "grayscale",
203
203
  "WebkitFontSmoothing": "antialiased",
204
204
  "display": "block",
205
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
205
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
206
206
  "fontSize": 16,
207
207
  "fontWeight": 400,
208
208
  "lineHeight": "20px",
@@ -218,7 +218,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
218
218
  aria-hidden="true"
219
219
  className=""
220
220
  style={
221
- Object {
221
+ {
222
222
  "MsFlexBasis": 32,
223
223
  "MsFlexPreferredSize": 32,
224
224
  "WebkitFlexBasis": 32,
@@ -243,7 +243,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
243
243
  <div
244
244
  className=""
245
245
  style={
246
- Object {
246
+ {
247
247
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
248
248
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
249
249
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
@@ -269,7 +269,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
269
269
  <div
270
270
  className=""
271
271
  style={
272
- Object {
272
+ {
273
273
  "alignItems": "stretch",
274
274
  "borderStyle": "solid",
275
275
  "borderWidth": 0,
@@ -288,11 +288,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
288
288
  <span
289
289
  className=""
290
290
  style={
291
- Object {
291
+ {
292
292
  "MozOsxFontSmoothing": "grayscale",
293
293
  "WebkitFontSmoothing": "antialiased",
294
294
  "display": "block",
295
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
295
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
296
296
  "fontSize": 16,
297
297
  "fontWeight": 400,
298
298
  "lineHeight": "20px",
@@ -309,7 +309,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
309
309
  <div
310
310
  className=""
311
311
  style={
312
- Object {
312
+ {
313
313
  "alignItems": "stretch",
314
314
  "borderStyle": "solid",
315
315
  "borderWidth": 0,
@@ -329,11 +329,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
329
329
  <span
330
330
  className=""
331
331
  style={
332
- Object {
332
+ {
333
333
  "MozOsxFontSmoothing": "grayscale",
334
334
  "WebkitFontSmoothing": "antialiased",
335
335
  "display": "block",
336
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
336
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
337
337
  "fontSize": 16,
338
338
  "fontWeight": 400,
339
339
  "lineHeight": "20px",
@@ -349,7 +349,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
349
349
  aria-hidden="true"
350
350
  className=""
351
351
  style={
352
- Object {
352
+ {
353
353
  "MsFlexBasis": 32,
354
354
  "MsFlexPreferredSize": 32,
355
355
  "WebkitFlexBasis": 32,
@@ -374,7 +374,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
374
374
  <div
375
375
  className=""
376
376
  style={
377
- Object {
377
+ {
378
378
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
379
379
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
380
380
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.4166666666666667 + 128px)",
@@ -400,7 +400,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
400
400
  <div
401
401
  className=""
402
402
  style={
403
- Object {
403
+ {
404
404
  "alignItems": "stretch",
405
405
  "borderStyle": "solid",
406
406
  "borderWidth": 0,
@@ -419,11 +419,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
419
419
  <span
420
420
  className=""
421
421
  style={
422
- Object {
422
+ {
423
423
  "MozOsxFontSmoothing": "grayscale",
424
424
  "WebkitFontSmoothing": "antialiased",
425
425
  "display": "block",
426
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
426
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
427
427
  "fontSize": 16,
428
428
  "fontWeight": 400,
429
429
  "lineHeight": "20px",
@@ -440,11 +440,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
440
440
  <span
441
441
  className=""
442
442
  style={
443
- Object {
443
+ {
444
444
  "MozOsxFontSmoothing": "grayscale",
445
445
  "WebkitFontSmoothing": "antialiased",
446
446
  "display": "block",
447
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
447
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
448
448
  "fontSize": 16,
449
449
  "fontWeight": 400,
450
450
  "lineHeight": "20px",
@@ -457,7 +457,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
457
457
  <div
458
458
  className=""
459
459
  style={
460
- Object {
460
+ {
461
461
  "alignItems": "stretch",
462
462
  "borderStyle": "solid",
463
463
  "borderWidth": 0,
@@ -477,11 +477,11 @@ exports[`wonder-blocks-grid example 1 1`] = `
477
477
  <span
478
478
  className=""
479
479
  style={
480
- Object {
480
+ {
481
481
  "MozOsxFontSmoothing": "grayscale",
482
482
  "WebkitFontSmoothing": "antialiased",
483
483
  "display": "block",
484
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
484
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
485
485
  "fontSize": 16,
486
486
  "fontWeight": 400,
487
487
  "lineHeight": "20px",
@@ -497,7 +497,7 @@ exports[`wonder-blocks-grid example 1 1`] = `
497
497
  aria-hidden="true"
498
498
  className=""
499
499
  style={
500
- Object {
500
+ {
501
501
  "MsFlexBasis": 24,
502
502
  "MsFlexPreferredSize": 24,
503
503
  "WebkitFlexBasis": 24,
@@ -527,7 +527,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
527
527
  <div
528
528
  className=""
529
529
  style={
530
- Object {
530
+ {
531
531
  "alignItems": "stretch",
532
532
  "background": "#f7f8fa",
533
533
  "borderStyle": "solid",
@@ -547,8 +547,8 @@ exports[`wonder-blocks-grid example 2 1`] = `
547
547
  <div
548
548
  className=""
549
549
  style={
550
- Object {
551
- "@media (minWidth: 1168px)": Object {
550
+ {
551
+ "@media (minWidth: 1168px)": {
552
552
  "margin": "0 auto",
553
553
  },
554
554
  "alignItems": "center",
@@ -575,7 +575,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
575
575
  aria-hidden="true"
576
576
  className=""
577
577
  style={
578
- Object {
578
+ {
579
579
  "MsFlexBasis": 24,
580
580
  "MsFlexPreferredSize": 24,
581
581
  "WebkitFlexBasis": 24,
@@ -601,7 +601,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
601
601
  aria-hidden="true"
602
602
  className=""
603
603
  style={
604
- Object {
604
+ {
605
605
  "MsFlexBasis": 24,
606
606
  "MsFlexPreferredSize": 24,
607
607
  "WebkitFlexBasis": 24,
@@ -627,8 +627,8 @@ exports[`wonder-blocks-grid example 2 1`] = `
627
627
  <div
628
628
  className=""
629
629
  style={
630
- Object {
631
- "@media (minWidth: 1168px)": Object {
630
+ {
631
+ "@media (minWidth: 1168px)": {
632
632
  "margin": "0 auto",
633
633
  },
634
634
  "alignItems": "center",
@@ -654,7 +654,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
654
654
  aria-hidden="true"
655
655
  className=""
656
656
  style={
657
- Object {
657
+ {
658
658
  "MsFlexBasis": 24,
659
659
  "MsFlexPreferredSize": 24,
660
660
  "WebkitFlexBasis": 24,
@@ -680,7 +680,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
680
680
  aria-hidden="true"
681
681
  className=""
682
682
  style={
683
- Object {
683
+ {
684
684
  "MsFlexBasis": 24,
685
685
  "MsFlexPreferredSize": 24,
686
686
  "WebkitFlexBasis": 24,
@@ -706,8 +706,8 @@ exports[`wonder-blocks-grid example 2 1`] = `
706
706
  <div
707
707
  className=""
708
708
  style={
709
- Object {
710
- "@media (minWidth: 1168px)": Object {
709
+ {
710
+ "@media (minWidth: 1168px)": {
711
711
  "margin": "0 auto",
712
712
  },
713
713
  "alignItems": "center",
@@ -734,7 +734,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
734
734
  aria-hidden="true"
735
735
  className=""
736
736
  style={
737
- Object {
737
+ {
738
738
  "MsFlexBasis": 24,
739
739
  "MsFlexPreferredSize": 24,
740
740
  "WebkitFlexBasis": 24,
@@ -759,7 +759,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
759
759
  <div
760
760
  className=""
761
761
  style={
762
- Object {
762
+ {
763
763
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
764
764
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
765
765
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
@@ -786,7 +786,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
786
786
  aria-hidden="true"
787
787
  className=""
788
788
  style={
789
- Object {
789
+ {
790
790
  "MsFlexBasis": 32,
791
791
  "MsFlexPreferredSize": 32,
792
792
  "WebkitFlexBasis": 32,
@@ -811,7 +811,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
811
811
  <div
812
812
  className=""
813
813
  style={
814
- Object {
814
+ {
815
815
  "alignItems": "stretch",
816
816
  "borderStyle": "solid",
817
817
  "borderWidth": 0,
@@ -833,7 +833,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
833
833
  aria-hidden="true"
834
834
  className=""
835
835
  style={
836
- Object {
836
+ {
837
837
  "MsFlexBasis": 24,
838
838
  "MsFlexPreferredSize": 24,
839
839
  "WebkitFlexBasis": 24,
@@ -859,8 +859,8 @@ exports[`wonder-blocks-grid example 2 1`] = `
859
859
  <div
860
860
  className=""
861
861
  style={
862
- Object {
863
- "@media (minWidth: 1168px)": Object {
862
+ {
863
+ "@media (minWidth: 1168px)": {
864
864
  "margin": "0 auto",
865
865
  },
866
866
  "alignItems": "center",
@@ -884,7 +884,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
884
884
  aria-hidden="true"
885
885
  className=""
886
886
  style={
887
- Object {
887
+ {
888
888
  "MsFlexBasis": 24,
889
889
  "MsFlexPreferredSize": 24,
890
890
  "WebkitFlexBasis": 24,
@@ -909,7 +909,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
909
909
  <div
910
910
  className=""
911
911
  style={
912
- Object {
912
+ {
913
913
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
914
914
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.25 + 64px)",
915
915
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.25 + 64px)",
@@ -944,7 +944,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
944
944
  aria-hidden="true"
945
945
  className=""
946
946
  style={
947
- Object {
947
+ {
948
948
  "MsFlexBasis": 32,
949
949
  "MsFlexPreferredSize": 32,
950
950
  "WebkitFlexBasis": 32,
@@ -969,7 +969,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
969
969
  <div
970
970
  className=""
971
971
  style={
972
- Object {
972
+ {
973
973
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.75 + 256px)",
974
974
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.75 + 256px)",
975
975
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.75 + 256px)",
@@ -993,7 +993,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
993
993
  <div
994
994
  className=""
995
995
  style={
996
- Object {
996
+ {
997
997
  "alignItems": "stretch",
998
998
  "background": "#ffffff",
999
999
  "border": "1px solid rgba(33,36,44,0.08)",
@@ -1017,7 +1017,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
1017
1017
  <div
1018
1018
  className=""
1019
1019
  style={
1020
- Object {
1020
+ {
1021
1021
  "alignItems": "stretch",
1022
1022
  "background": "#ffffff",
1023
1023
  "border": "1px solid rgba(33,36,44,0.08)",
@@ -1044,7 +1044,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
1044
1044
  aria-hidden="true"
1045
1045
  className=""
1046
1046
  style={
1047
- Object {
1047
+ {
1048
1048
  "MsFlexBasis": 24,
1049
1049
  "MsFlexPreferredSize": 24,
1050
1050
  "WebkitFlexBasis": 24,
@@ -1074,7 +1074,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1074
1074
  <div
1075
1075
  className=""
1076
1076
  style={
1077
- Object {
1077
+ {
1078
1078
  "alignItems": "stretch",
1079
1079
  "background": "#21242c",
1080
1080
  "borderStyle": "solid",
@@ -1094,8 +1094,8 @@ exports[`wonder-blocks-grid example 3 1`] = `
1094
1094
  <div
1095
1095
  className=""
1096
1096
  style={
1097
- Object {
1098
- "@media (minWidth: 1168px)": Object {
1097
+ {
1098
+ "@media (minWidth: 1168px)": {
1099
1099
  "margin": "0 auto",
1100
1100
  },
1101
1101
  "alignItems": "center",
@@ -1119,7 +1119,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1119
1119
  aria-hidden="true"
1120
1120
  className=""
1121
1121
  style={
1122
- Object {
1122
+ {
1123
1123
  "MsFlexBasis": 24,
1124
1124
  "MsFlexPreferredSize": 24,
1125
1125
  "WebkitFlexBasis": 24,
@@ -1144,7 +1144,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1144
1144
  <div
1145
1145
  className=""
1146
1146
  style={
1147
- Object {
1147
+ {
1148
1148
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1149
1149
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1150
1150
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1173,7 +1173,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1173
1173
  aria-hidden="true"
1174
1174
  className=""
1175
1175
  style={
1176
- Object {
1176
+ {
1177
1177
  "MsFlexBasis": 32,
1178
1178
  "MsFlexPreferredSize": 32,
1179
1179
  "WebkitFlexBasis": 32,
@@ -1198,7 +1198,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1198
1198
  <div
1199
1199
  className=""
1200
1200
  style={
1201
- Object {
1201
+ {
1202
1202
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1203
1203
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1204
1204
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1227,7 +1227,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1227
1227
  aria-hidden="true"
1228
1228
  className=""
1229
1229
  style={
1230
- Object {
1230
+ {
1231
1231
  "MsFlexBasis": 32,
1232
1232
  "MsFlexPreferredSize": 32,
1233
1233
  "WebkitFlexBasis": 32,
@@ -1252,7 +1252,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1252
1252
  <div
1253
1253
  className=""
1254
1254
  style={
1255
- Object {
1255
+ {
1256
1256
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1257
1257
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1258
1258
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1281,7 +1281,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1281
1281
  aria-hidden="true"
1282
1282
  className=""
1283
1283
  style={
1284
- Object {
1284
+ {
1285
1285
  "MsFlexBasis": 32,
1286
1286
  "MsFlexPreferredSize": 32,
1287
1287
  "WebkitFlexBasis": 32,
@@ -1306,7 +1306,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1306
1306
  <div
1307
1307
  className=""
1308
1308
  style={
1309
- Object {
1309
+ {
1310
1310
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1311
1311
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1312
1312
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1335,7 +1335,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1335
1335
  aria-hidden="true"
1336
1336
  className=""
1337
1337
  style={
1338
- Object {
1338
+ {
1339
1339
  "MsFlexBasis": 32,
1340
1340
  "MsFlexPreferredSize": 32,
1341
1341
  "WebkitFlexBasis": 32,
@@ -1360,7 +1360,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1360
1360
  <div
1361
1361
  className=""
1362
1362
  style={
1363
- Object {
1363
+ {
1364
1364
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1365
1365
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1366
1366
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1389,7 +1389,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1389
1389
  aria-hidden="true"
1390
1390
  className=""
1391
1391
  style={
1392
- Object {
1392
+ {
1393
1393
  "MsFlexBasis": 32,
1394
1394
  "MsFlexPreferredSize": 32,
1395
1395
  "WebkitFlexBasis": 32,
@@ -1414,7 +1414,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1414
1414
  <div
1415
1415
  className=""
1416
1416
  style={
1417
- Object {
1417
+ {
1418
1418
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1419
1419
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1420
1420
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1443,7 +1443,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1443
1443
  aria-hidden="true"
1444
1444
  className=""
1445
1445
  style={
1446
- Object {
1446
+ {
1447
1447
  "MsFlexBasis": 32,
1448
1448
  "MsFlexPreferredSize": 32,
1449
1449
  "WebkitFlexBasis": 32,
@@ -1468,7 +1468,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1468
1468
  <div
1469
1469
  className=""
1470
1470
  style={
1471
- Object {
1471
+ {
1472
1472
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1473
1473
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1474
1474
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1497,7 +1497,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1497
1497
  aria-hidden="true"
1498
1498
  className=""
1499
1499
  style={
1500
- Object {
1500
+ {
1501
1501
  "MsFlexBasis": 32,
1502
1502
  "MsFlexPreferredSize": 32,
1503
1503
  "WebkitFlexBasis": 32,
@@ -1522,7 +1522,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1522
1522
  <div
1523
1523
  className=""
1524
1524
  style={
1525
- Object {
1525
+ {
1526
1526
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1527
1527
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1528
1528
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1551,7 +1551,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1551
1551
  aria-hidden="true"
1552
1552
  className=""
1553
1553
  style={
1554
- Object {
1554
+ {
1555
1555
  "MsFlexBasis": 32,
1556
1556
  "MsFlexPreferredSize": 32,
1557
1557
  "WebkitFlexBasis": 32,
@@ -1576,7 +1576,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1576
1576
  <div
1577
1577
  className=""
1578
1578
  style={
1579
- Object {
1579
+ {
1580
1580
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1581
1581
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1582
1582
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1605,7 +1605,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1605
1605
  aria-hidden="true"
1606
1606
  className=""
1607
1607
  style={
1608
- Object {
1608
+ {
1609
1609
  "MsFlexBasis": 32,
1610
1610
  "MsFlexPreferredSize": 32,
1611
1611
  "WebkitFlexBasis": 32,
@@ -1630,7 +1630,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1630
1630
  <div
1631
1631
  className=""
1632
1632
  style={
1633
- Object {
1633
+ {
1634
1634
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1635
1635
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1636
1636
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1659,7 +1659,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1659
1659
  aria-hidden="true"
1660
1660
  className=""
1661
1661
  style={
1662
- Object {
1662
+ {
1663
1663
  "MsFlexBasis": 32,
1664
1664
  "MsFlexPreferredSize": 32,
1665
1665
  "WebkitFlexBasis": 32,
@@ -1684,7 +1684,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1684
1684
  <div
1685
1685
  className=""
1686
1686
  style={
1687
- Object {
1687
+ {
1688
1688
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1689
1689
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1690
1690
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1713,7 +1713,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1713
1713
  aria-hidden="true"
1714
1714
  className=""
1715
1715
  style={
1716
- Object {
1716
+ {
1717
1717
  "MsFlexBasis": 32,
1718
1718
  "MsFlexPreferredSize": 32,
1719
1719
  "WebkitFlexBasis": 32,
@@ -1738,7 +1738,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1738
1738
  <div
1739
1739
  className=""
1740
1740
  style={
1741
- Object {
1741
+ {
1742
1742
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1743
1743
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
1744
1744
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.08333333333333333 + 0px)",
@@ -1767,7 +1767,7 @@ exports[`wonder-blocks-grid example 3 1`] = `
1767
1767
  aria-hidden="true"
1768
1768
  className=""
1769
1769
  style={
1770
- Object {
1770
+ {
1771
1771
  "MsFlexBasis": 24,
1772
1772
  "MsFlexPreferredSize": 24,
1773
1773
  "WebkitFlexBasis": 24,
@@ -1797,7 +1797,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1797
1797
  <div
1798
1798
  className=""
1799
1799
  style={
1800
- Object {
1800
+ {
1801
1801
  "alignItems": "stretch",
1802
1802
  "background": "#21242c",
1803
1803
  "borderStyle": "solid",
@@ -1817,8 +1817,8 @@ exports[`wonder-blocks-grid example 4 1`] = `
1817
1817
  <div
1818
1818
  className=""
1819
1819
  style={
1820
- Object {
1821
- "@media (minWidth: 1168px)": Object {
1820
+ {
1821
+ "@media (minWidth: 1168px)": {
1822
1822
  "margin": "0 auto",
1823
1823
  },
1824
1824
  "alignItems": "center",
@@ -1844,7 +1844,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1844
1844
  aria-hidden="true"
1845
1845
  className=""
1846
1846
  style={
1847
- Object {
1847
+ {
1848
1848
  "MsFlexBasis": 24,
1849
1849
  "MsFlexPreferredSize": 24,
1850
1850
  "WebkitFlexBasis": 24,
@@ -1869,7 +1869,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1869
1869
  <div
1870
1870
  className=""
1871
1871
  style={
1872
- Object {
1872
+ {
1873
1873
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1874
1874
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1875
1875
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
@@ -1895,7 +1895,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1895
1895
  <span
1896
1896
  className=""
1897
1897
  style={
1898
- Object {
1898
+ {
1899
1899
  "MozOsxFontSmoothing": "grayscale",
1900
1900
  "WebkitFontSmoothing": "antialiased",
1901
1901
  }
@@ -1908,7 +1908,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1908
1908
  aria-hidden="true"
1909
1909
  className=""
1910
1910
  style={
1911
- Object {
1911
+ {
1912
1912
  "MsFlexBasis": 32,
1913
1913
  "MsFlexPreferredSize": 32,
1914
1914
  "WebkitFlexBasis": 32,
@@ -1933,7 +1933,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1933
1933
  <div
1934
1934
  className=""
1935
1935
  style={
1936
- Object {
1936
+ {
1937
1937
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1938
1938
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.5 + 160px)",
1939
1939
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.5 + 160px)",
@@ -1959,7 +1959,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1959
1959
  <span
1960
1960
  className=""
1961
1961
  style={
1962
- Object {
1962
+ {
1963
1963
  "MozOsxFontSmoothing": "grayscale",
1964
1964
  "WebkitFontSmoothing": "antialiased",
1965
1965
  }
@@ -1972,7 +1972,7 @@ exports[`wonder-blocks-grid example 4 1`] = `
1972
1972
  aria-hidden="true"
1973
1973
  className=""
1974
1974
  style={
1975
- Object {
1975
+ {
1976
1976
  "MsFlexBasis": 24,
1977
1977
  "MsFlexPreferredSize": 24,
1978
1978
  "WebkitFlexBasis": 24,
@@ -2002,7 +2002,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2002
2002
  <div
2003
2003
  className=""
2004
2004
  style={
2005
- Object {
2005
+ {
2006
2006
  "alignItems": "stretch",
2007
2007
  "background": "#21242c",
2008
2008
  "borderStyle": "solid",
@@ -2023,8 +2023,8 @@ exports[`wonder-blocks-grid example 5 1`] = `
2023
2023
  <div
2024
2024
  className=""
2025
2025
  style={
2026
- Object {
2027
- "@media (minWidth: 1168px)": Object {
2026
+ {
2027
+ "@media (minWidth: 1168px)": {
2028
2028
  "margin": "0 auto",
2029
2029
  },
2030
2030
  "alignItems": "stretch",
@@ -2051,7 +2051,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2051
2051
  aria-hidden="true"
2052
2052
  className=""
2053
2053
  style={
2054
- Object {
2054
+ {
2055
2055
  "MsFlexBasis": 24,
2056
2056
  "MsFlexPreferredSize": 24,
2057
2057
  "WebkitFlexBasis": 24,
@@ -2076,7 +2076,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2076
2076
  <div
2077
2077
  className=""
2078
2078
  style={
2079
- Object {
2079
+ {
2080
2080
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2081
2081
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
2082
2082
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.3333333333333333 + 96px)",
@@ -2102,7 +2102,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2102
2102
  <span
2103
2103
  className=""
2104
2104
  style={
2105
- Object {
2105
+ {
2106
2106
  "MozOsxFontSmoothing": "grayscale",
2107
2107
  "WebkitFontSmoothing": "antialiased",
2108
2108
  }
@@ -2135,7 +2135,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2135
2135
  aria-hidden="true"
2136
2136
  className=""
2137
2137
  style={
2138
- Object {
2138
+ {
2139
2139
  "MsFlexBasis": 32,
2140
2140
  "MsFlexPreferredSize": 32,
2141
2141
  "WebkitFlexBasis": 32,
@@ -2160,7 +2160,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2160
2160
  <div
2161
2161
  className=""
2162
2162
  style={
2163
- Object {
2163
+ {
2164
2164
  "MsFlexBasis": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2165
2165
  "MsFlexPreferredSize": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
2166
2166
  "WebkitFlexBasis": "calc((100% - 352px - 48px) * 0.6666666666666666 + 224px)",
@@ -2186,11 +2186,11 @@ exports[`wonder-blocks-grid example 5 1`] = `
2186
2186
  <p
2187
2187
  className=""
2188
2188
  style={
2189
- Object {
2189
+ {
2190
2190
  "MozOsxFontSmoothing": "grayscale",
2191
2191
  "WebkitFontSmoothing": "antialiased",
2192
2192
  "display": "block",
2193
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2193
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2194
2194
  "fontSize": 16,
2195
2195
  "fontWeight": 400,
2196
2196
  "lineHeight": "22px",
@@ -2202,11 +2202,11 @@ exports[`wonder-blocks-grid example 5 1`] = `
2202
2202
  <p
2203
2203
  className=""
2204
2204
  style={
2205
- Object {
2205
+ {
2206
2206
  "MozOsxFontSmoothing": "grayscale",
2207
2207
  "WebkitFontSmoothing": "antialiased",
2208
2208
  "display": "block",
2209
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
2209
+ "fontFamily": "Lato, "Noto Sans", sans-serif",
2210
2210
  "fontSize": 16,
2211
2211
  "fontWeight": 400,
2212
2212
  "lineHeight": "22px",
@@ -2220,7 +2220,7 @@ exports[`wonder-blocks-grid example 5 1`] = `
2220
2220
  aria-hidden="true"
2221
2221
  className=""
2222
2222
  style={
2223
- Object {
2223
+ {
2224
2224
  "MsFlexBasis": 24,
2225
2225
  "MsFlexPreferredSize": 24,
2226
2226
  "WebkitFlexBasis": 24,