@khanacademy/wonder-blocks-grid 1.0.27 → 1.0.28

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 9);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,380 +93,910 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@khanacademy/wonder-blocks-spacing");
+module.exports =
+/******/
+function (modules) {
+  // webpackBootstrap
 
-/***/ }),
-/* 2 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+  /******/
+  // The module cache
 
-"use strict";
-/* unused harmony export MEDIA_DEFAULT_SPEC */
-/* unused harmony export MEDIA_INTERNAL_SPEC */
-/* unused harmony export MEDIA_MODAL_SPEC */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MediaLayout; });
-/* unused harmony export MediaLayoutContext */
-/* unused harmony export Spring */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Strut; });
-/* unused harmony export VALID_MEDIA_SIZES */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return queryMatchesSize; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-
-
-
-
- // All possible valid media sizes
-
-const VALID_MEDIA_SIZES = ["small", "medium", "large"];
-const mediaDefaultSpecLargeMarginWidth = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.large_24; // The default spec for media layout, currently available in
-// three different settings (roughly mobile, tablet, and desktop).
-
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16,
-    marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xLarge_32,
-    marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-}; // Used for internal tools
-
-const MEDIA_INTERNAL_SPEC = {
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xLarge_32,
-    marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
-  }
-}; // The default used for modals
-
-const MEDIA_MODAL_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16,
-    marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xLarge_32,
-    marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxLarge_48
-  }
-};
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-var MediaLayoutContext = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["createContext"])(defaultContext);
-const queries = [].concat(Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query));
-const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
-// If for some reason we're not able to resolve the current media size we
-// fall back to this state.
+  /******/
+  var installedModules = {};
+  /******/
 
-const DEFAULT_SIZE = "large";
-/**
- * `MediaLayout` is responsible for changing the rendering of contents at
- * differently sized viewports.  `MediaLayoutContext.Provider` can be used
- * to specify different breakpoint configurations.  By default it uses
- * `MEDIA_DEFAULT_SPEC`.  See media-layout-context.js for additiional options.
- */
+  /******/
+  // The require function
+
+  /******/
+
+  function __webpack_require__(moduleId) {
+    /******/
+
+    /******/
+    // Check if module is in cache
+
+    /******/
+    if (installedModules[moduleId]) {
+      /******/
+      return installedModules[moduleId].exports;
+      /******/
+    }
+    /******/
+    // Create a new module (and put it into the cache)
+
+    /******/
+
+
+    var module = installedModules[moduleId] = {
+      /******/
+      i: moduleId,
+
+      /******/
+      l: false,
+
+      /******/
+      exports: {}
+      /******/
 
-class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  // A collection of thunks that's used to clean up event listeners
-  // when the component is unmounted.
-  constructor(props) {
-    super(props);
-    this.state = {
-      size: undefined
     };
-    this.cleanupThunks = [];
+    /******/
+
+    /******/
+    // Execute the module function
+
+    /******/
+
+    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+    /******/
+
+    /******/
+    // Flag the module as loaded
+
+    /******/
+
+    module.l = true;
+    /******/
+
+    /******/
+    // Return the exports of the module
+
+    /******/
+
+    return module.exports;
+    /******/
   }
+  /******/
 
-  componentDidMount() {
-    // TODO(WB-534): handle changes to mediaSpec prop
-    const entries = Object.entries(this.props.mediaSpec);
+  /******/
 
-    for (const [size, spec] of entries) {
-      const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
+  /******/
+  // expose the modules object (__webpack_modules__)
 
-      if (!mql) {
-        continue;
-      }
+  /******/
 
-      const listener = e => {
-        if (e.matches) {
-          this.setState({
-            size
-          });
-        }
-      };
 
-      mql.addListener(listener);
-      this.cleanupThunks.push(() => mql.removeListener(listener));
+  __webpack_require__.m = modules;
+  /******/
+
+  /******/
+  // expose the module cache
+
+  /******/
+
+  __webpack_require__.c = installedModules;
+  /******/
+
+  /******/
+  // define getter function for harmony exports
+
+  /******/
+
+  __webpack_require__.d = function (exports, name, getter) {
+    /******/
+    if (!__webpack_require__.o(exports, name)) {
+      /******/
+      Object.defineProperty(exports, name, {
+        enumerable: true,
+        get: getter
+      });
+      /******/
     }
-  }
+    /******/
+
+  };
+  /******/
+
+  /******/
+  // define __esModule on exports
+
+  /******/
+
+
+  __webpack_require__.r = function (exports) {
+    /******/
+    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+      /******/
+      Object.defineProperty(exports, Symbol.toStringTag, {
+        value: 'Module'
+      });
+      /******/
+    }
+    /******/
+
+
+    Object.defineProperty(exports, '__esModule', {
+      value: true
+    });
+    /******/
+  };
+  /******/
+
+  /******/
+  // create a fake namespace object
+
+  /******/
+  // mode & 1: value is a module id, require it
+
+  /******/
+  // mode & 2: merge all properties of value into the ns
+
+  /******/
+  // mode & 4: return value when already ns object
+
+  /******/
+  // mode & 8|1: behave like require
+
+  /******/
+
+
+  __webpack_require__.t = function (value, mode) {
+    /******/
+    if (mode & 1) value = __webpack_require__(value);
+    /******/
+
+    if (mode & 8) return value;
+    /******/
+
+    if (mode & 4 && typeof value === 'object' && value && value.__esModule) return value;
+    /******/
+
+    var ns = Object.create(null);
+    /******/
+
+    __webpack_require__.r(ns);
+    /******/
+
+
+    Object.defineProperty(ns, 'default', {
+      enumerable: true,
+      value: value
+    });
+    /******/
+
+    if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
+      return value[key];
+    }.bind(null, key));
+    /******/
+
+    return ns;
+    /******/
+  };
+  /******/
+
+  /******/
+  // getDefaultExport function for compatibility with non-harmony modules
+
+  /******/
+
+
+  __webpack_require__.n = function (module) {
+    /******/
+    var getter = module && module.__esModule ?
+    /******/
+    function getDefault() {
+      return module['default'];
+    } :
+    /******/
+    function getModuleExports() {
+      return module;
+    };
+    /******/
+
+    __webpack_require__.d(getter, 'a', getter);
+    /******/
+
+
+    return getter;
+    /******/
+  };
+  /******/
+
+  /******/
+  // Object.prototype.hasOwnProperty.call
+
+  /******/
+
+
+  __webpack_require__.o = function (object, property) {
+    return Object.prototype.hasOwnProperty.call(object, property);
+  };
+  /******/
+
+  /******/
+  // __webpack_public_path__
+
+  /******/
+
+
+  __webpack_require__.p = "";
+  /******/
+
+  /******/
+
+  /******/
+  // Load entry module and return exports
+
+  /******/
+
+  return __webpack_require__(__webpack_require__.s = 10);
+  /******/
+}
+/************************************************************************/
+
+/******/
+([
+/* 0 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(0);
+  /***/
+},
+/* 1 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(10);
+  /***/
+},
+/* 2 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "d", function () {
+    return VALID_MEDIA_SIZES;
+  });
+  /* harmony export (binding) */
+
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return MEDIA_DEFAULT_SPEC;
+  });
+  /* harmony export (binding) */
+
+
+  __webpack_require__.d(__webpack_exports__, "b", function () {
+    return MEDIA_INTERNAL_SPEC;
+  });
+  /* harmony export (binding) */
+
+
+  __webpack_require__.d(__webpack_exports__, "c", function () {
+    return MEDIA_MODAL_SPEC;
+  });
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__); // All possible valid media sizes
+
+
+  const VALID_MEDIA_SIZES = ["small", "medium", "large"];
+  const mediaDefaultSpecLargeMarginWidth = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24; // The default spec for media layout, currently available in
+  // three different settings (roughly mobile, tablet, and desktop).
+
+  const MEDIA_DEFAULT_SPEC = {
+    small: {
+      query: "(max-width: 767px)",
+      totalColumns: 4,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
+      marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
+    },
+    medium: {
+      query: "(min-width: 768px) and (max-width: 1023px)",
+      totalColumns: 8,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
+      marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24
+    },
+    large: {
+      query: "(min-width: 1024px)",
+      totalColumns: 12,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
+      marginWidth: mediaDefaultSpecLargeMarginWidth,
+      maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+    }
+  }; // Used for internal tools
+
+  const MEDIA_INTERNAL_SPEC = {
+    large: {
+      query: "(min-width: 1px)",
+      totalColumns: 12,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
+      marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
+    }
+  }; // The default used for modals
+
+  const MEDIA_MODAL_SPEC = {
+    small: {
+      query: "(max-width: 767px)",
+      totalColumns: 4,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
+      marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
+    },
+    large: {
+      query: "(min-width: 768px)",
+      totalColumns: 12,
+      gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
+      marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxLarge_48
+    }
+  };
+  /***/
+},
+/* 3 */
 
-  componentWillUnmount() {
-    // Remove our listeners.
-    this.cleanupThunks.forEach(cleaup => cleaup());
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony import */
+
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
+
+
+  var _util_specs_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+
+  const defaultContext = {
+    ssrSize: "large",
+    mediaSpec: _util_specs_js__WEBPACK_IMPORTED_MODULE_1__[
+    /* MEDIA_DEFAULT_SPEC */
+    "a"]
+  };
+  /* harmony default export */
+
+  __webpack_exports__["a"] = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext);
+  /***/
+},
+/* 4 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(3);
+  /***/
+},
+/* 5 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return MediaLayout;
+  });
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
+
+
+  var _media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+  /* harmony import */
+
+
+  var _util_specs_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
   }
 
-  getCurrentSize(spec) {
-    // If we have a state with the current size in it then we always want
-    // to use that. This will happen if the viewport changes sizes after
-    // we've already initialized.
-    if (this.state.size) {
-      return this.state.size;
-    } else {
+  const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
+  /* MEDIA_DEFAULT_SPEC */
+  "a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
+  /* MEDIA_INTERNAL_SPEC */
+  "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
+  /* MEDIA_MODAL_SPEC */
+  "c"]).map(spec => spec.query));
+  const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
+  // If for some reason we're not able to resolve the current media size we
+  // fall back to this state.
+
+  const DEFAULT_SIZE = "large";
+  /**
+   * `MediaLayout` is responsible for changing the rendering of contents at
+   * differently sized viewports.  `MediaLayoutContext.Provider` can be used
+   * to specify different breakpoint configurations.  By default it uses
+   * `MEDIA_DEFAULT_SPEC`.  See media-layout-context.js for additiional options.
+   */
+
+  class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    // A collection of thunks that's used to clean up event listeners
+    // when the component is unmounted.
+    constructor(props) {
+      super(props);
+      this.state = {
+        size: undefined
+      };
+      this.cleanupThunks = [];
+    }
+
+    componentDidMount() {
+      // TODO(WB-534): handle changes to mediaSpec prop
       const entries = Object.entries(this.props.mediaSpec);
 
-      for (const [size, _spec] of entries) {
-        const mql = mediaQueryLists[_spec.query];
+      for (const [size, spec] of entries) {
+        const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
 
-        if (mql.matches) {
-          return size;
+        if (!mql) {
+          continue;
         }
+
+        const listener = e => {
+          if (e.matches) {
+            this.setState({
+              size
+            });
+          }
+        };
+
+        mql.addListener(listener);
+        this.cleanupThunks.push(() => mql.removeListener(listener));
       }
     }
 
-    return DEFAULT_SIZE;
-  } // We assume that we're running on the server (or, at least, an unsupported
-  // environment) if there is no window object or matchMedia function
-  // available.
+    componentWillUnmount() {
+      // Remove our listeners.
+      this.cleanupThunks.forEach(cleaup => cleaup());
+    }
 
+    getCurrentSize(spec) {
+      // If we have a state with the current size in it then we always want
+      // to use that. This will happen if the viewport changes sizes after
+      // we've already initialized.
+      if (this.state.size) {
+        return this.state.size;
+      } else {
+        const entries = Object.entries(this.props.mediaSpec);
+
+        for (const [size, spec] of entries) {
+          const mql = mediaQueryLists[spec.query];
+
+          if (mql.matches) {
+            return size;
+          }
+        }
+      }
 
-  isServerSide() {
-    return typeof window === "undefined" || !window.matchMedia;
-  } // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
-  // We do this by looking at all of the stylesheets specified in the
-  // styleSheets prop and then all of the individual styles. We merge the
-  // styles together
-  // TODO(WB-533): move to util.js to make it easier to test
+      return DEFAULT_SIZE;
+    } // We assume that we're running on the server (or, at least, an unsupported
+    // environment) if there is no window object or matchMedia function
+    // available.
 
 
-  getMockStyleSheet(mediaSize) {
-    const {
-      styleSheets
-    } = this.props;
-    const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
+    isServerSide() {
+      return typeof window === "undefined" || !window.matchMedia;
+    } // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
+    // We do this by looking at all of the stylesheets specified in the
+    // styleSheets prop and then all of the individual styles. We merge the
+    // styles together
+    // TODO(WB-533): move to util.js to make it easier to test
 
-    if (!styleSheets) {
-      return mockStyleSheet;
-    } // Go through all of the stylesheets that were specified
 
+    getMockStyleSheet(mediaSize) {
+      const {
+        styleSheets
+      } = this.props;
+      const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
 
-    for (const styleSize of Object.keys(styleSheets)) {
-      const styleSheet = styleSheets[styleSize];
+      if (!styleSheets) {
+        return mockStyleSheet;
+      } // Go through all of the stylesheets that were specified
 
-      if (!styleSheet) {
-        continue;
-      } // And then through each key of each stylesheet
 
+      for (const styleSize of Object.keys(styleSheets)) {
+        const styleSheet = styleSheets[styleSize];
 
-      for (const name of Object.keys(styleSheet)) {
-        if ( // $FlowIgnore[method-unbinding]
-        Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+        if (!styleSheet) {
           continue;
-        } // We create an entry that combines the values from all of
-        // the stylesheets together in least-specific to most-specific
-        // priority (thus small/medium/large styles will always have
-        // precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
+        } // And then through each key of each stylesheet
+
+
+        for (const name of Object.keys(styleSheet)) {
+          if ( // $FlowIgnore[method-unbinding]
+          Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+            continue;
+          } // We create an entry that combines the values from all of
+          // the stylesheets together in least-specific to most-specific
+          // priority (thus small/medium/large styles will always have
+          // precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
 
 
-        mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
+          mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
+        }
       }
+
+      return mockStyleSheet;
     }
 
-    return mockStyleSheet;
-  }
+    render() {
+      const {
+        children,
+        mediaSpec,
+        ssrSize,
+        overrideSize
+      } = this.props; // We need to create the MediaQueryLists during the first render in order
+      // to query whether any of them match.
+
+      if (!this.isServerSide()) {
+        for (const query of queries.filter(query => !mediaQueryLists[query])) {
+          mediaQueryLists[query] = window.matchMedia(query);
+        }
+      } // We need to figure out what the current media size is
+      // If an override has been specified, we use that.
+      // If we're rendering on the server then we use the default
+      // SSR rendering size.
+      // Otherwise we attempt to get the current size based on
+      // the current MediaSpec.
 
-  render() {
-    const {
-      children,
-      mediaSpec,
-      ssrSize,
-      overrideSize
-    } = this.props; // We need to create the MediaQueryLists during the first render in order
-    // to query whether any of them match.
-
-    if (!this.isServerSide()) {
-      for (const query of queries.filter(query => !mediaQueryLists[query])) {
-        mediaQueryLists[query] = window.matchMedia(query);
-      }
-    } // We need to figure out what the current media size is
-    // If an override has been specified, we use that.
-    // If we're rendering on the server then we use the default
-    // SSR rendering size.
-    // Otherwise we attempt to get the current size based on
-    // the current MediaSpec.
 
+      const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
+
+      const styles = this.getMockStyleSheet(mediaSize);
+      return children({
+        mediaSize,
+        mediaSpec,
+        styles
+      });
+    }
 
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
+  } // gen-snapshot-tests.js only understands `export default class ...`
+
+
+  class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    render() {
+      // We listen to the MediaLayoutContext to see what defaults we're
+      // being given (this can be overriden by wrapping this component in
+      // a MediaLayoutContext.Consumer).
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__[
+      /* default */
+      "a"].Consumer, null, ({
+        overrideSize,
+        ssrSize,
+        mediaSpec
+      }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](MediaLayoutInternal, _extends({}, this.props, {
+        overrideSize: overrideSize,
+        ssrSize: ssrSize,
+        mediaSpec: mediaSpec
+      })));
+    }
 
-    const styles = this.getMockStyleSheet(mediaSize);
-    return children({
-      mediaSize,
-      mediaSpec,
-      styles
-    });
   }
+  /***/
 
-} // gen-snapshot-tests.js only understands `export default class ...`
+},
+/* 6 */
 
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
 
-class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    // We listen to the MediaLayoutContext to see what defaults we're
-    // being given (this can be overriden by wrapping this component in
-    // a MediaLayoutContext.Consumer).
-    return /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["createElement"])(MediaLayoutContext.Consumer, null, ({
-      overrideSize,
-      ssrSize,
-      mediaSpec
-    }) => /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["createElement"])(MediaLayoutInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, this.props, {
-      overrideSize: overrideSize,
-      ssrSize: ssrSize,
-      mediaSpec: mediaSpec
-    })));
-  }
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return Spring;
+  });
+  /* harmony import */
 
-}
-/**
- * Expands to fill space between sibling components.
- *
- * Assumes parent is a View.
- */
 
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
 
-class Spring extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    const {
-      style
-    } = this.props;
-    return /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
-      "aria-hidden": "true",
-      style: [styles.grow, style]
-    });
-  }
 
-}
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
+
+
+  var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+  /* harmony import */
+
+
+  var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
+  /**
+   * Expands to fill space between sibling components.
+   *
+   * Assumes parent is a View.
+   */
+
+
+  class Spring extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    render() {
+      const {
+        style
+      } = this.props;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        "aria-hidden": "true",
+        style: [styles.grow, style]
+      });
+    }
 
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
-  grow: {
-    flexGrow: 1
   }
-});
-/**
- * A component for inserting fixed space between components.
- *
- * Assumes parent is a View.
- */
 
-class Strut extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
+  const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    grow: {
+      flexGrow: 1
+    }
+  });
+  /***/
+},
+/* 7 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return Strut;
+  });
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+  /* harmony import */
+
+
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
+  /**
+   * A component for inserting fixed space between components.
+   *
+   * Assumes parent is a View.
+   */
+
+
+  class Strut extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    render() {
+      const {
+        size,
+        style
+      } = this.props;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
+        "aria-hidden": "true",
+        style: [strutStyle(size), style]
+      });
+    }
+
   }
 
-}
+  const strutStyle = size => {
+    return {
+      width: size,
+      MsFlexBasis: size,
+      MsFlexPreferredSize: size,
+      WebkitFlexBasis: size,
+      flexBasis: size,
+      flexShrink: 0
+    };
+  };
+  /***/
 
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
+},
+/* 8 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return queryMatchesSize;
+  });
+  /**
+   * Return where a media size matches a media query.
+   *
+   * examples:
+   * - `queryMatchesSize("all", "small")` returns `true`
+   * - `queryMatchesSize("mdOrLarger", "small")` returns `false`
+   *
+   * @param {MediaQuery} mediaQuery
+   * @param {MediaSize} mediaSize
+   */
+
+
+  const queryMatchesSize = (mediaQuery, mediaSize) => {
+    switch (mediaQuery) {
+      case "all":
+        return true;
+
+      case "small":
+        return mediaSize === "small";
+
+      case "mdOrSmaller":
+        return mediaSize === "medium" || mediaSize === "small";
+
+      case "medium":
+        return mediaSize === "medium";
+
+      case "mdOrLarger":
+        return mediaSize === "medium" || mediaSize === "large";
+
+      case "large":
+        return mediaSize === "large";
+
+      default:
+        throw new Error(`Unsupported mediaSize: ${mediaSize}`);
+    }
   };
-};
-/**
- * Return where a media size matches a media query.
- *
- * examples:
- * - `queryMatchesSize("all", "small")` returns `true`
- * - `queryMatchesSize("mdOrLarger", "small")` returns `false`
- *
- * @param {MediaQuery} mediaQuery
- * @param {MediaSize} mediaSize
- */
+  /***/
 
+},
+/* 9 */
 
-const queryMatchesSize = (mediaQuery, mediaSize) => {
-  switch (mediaQuery) {
-    case "all":
-      return true;
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(5);
+  /***/
+},
+/* 10 */
 
-    case "small":
-      return mediaSize === "small";
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
 
-    case "mdOrSmaller":
-      return mediaSize === "medium" || mediaSize === "small";
+  __webpack_require__.r(__webpack_exports__);
+  /* harmony import */
 
-    case "medium":
-      return mediaSize === "medium";
 
-    case "mdOrLarger":
-      return mediaSize === "medium" || mediaSize === "large";
+  var _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+  /* harmony reexport (safe) */
 
-    case "large":
-      return mediaSize === "large";
 
-    default:
-      throw new Error(`Unsupported mediaSize: ${mediaSize}`);
-  }
-};
+  __webpack_require__.d(__webpack_exports__, "MediaLayout", function () {
+    return _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__["a"];
+  });
+  /* harmony import */
 
 
+  var _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+  /* harmony reexport (safe) */
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+  __webpack_require__.d(__webpack_exports__, "MediaLayoutContext", function () {
+    return _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__["a"];
+  });
+  /* harmony import */
+
+
+  var _components_spring_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "Spring", function () {
+    return _components_spring_js__WEBPACK_IMPORTED_MODULE_2__["a"];
+  });
+  /* harmony import */
+
+
+  var _components_strut_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "Strut", function () {
+    return _components_strut_js__WEBPACK_IMPORTED_MODULE_3__["a"];
+  });
+  /* harmony import */
+
+
+  var _util_specs_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "VALID_MEDIA_SIZES", function () {
+    return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["d"];
+  });
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "MEDIA_DEFAULT_SPEC", function () {
+    return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["a"];
+  });
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "MEDIA_INTERNAL_SPEC", function () {
+    return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["b"];
+  });
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "MEDIA_MODAL_SPEC", function () {
+    return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["c"];
+  });
+  /* harmony import */
+
+
+  var _util_util_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "queryMatchesSize", function () {
+    return _util_util_js__WEBPACK_IMPORTED_MODULE_5__["a"];
+  });
+  /***/
+
+}
+/******/
+]);
 
 /***/ }),
-/* 4 */
+/* 2 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Cell; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
 
 
 
@@ -530,7 +1060,7 @@ class Cell extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       children,
       style
     } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__[/* MediaLayout */ "a"], null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["MediaLayout"], null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -594,11 +1124,17 @@ Cell.defaultProps = {
 Cell.__IS_CELL__ = true;
 
 /***/ }),
-/* 5 */
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
 
 const WIDE_SCREEN = "@media (min-width: 1168px)";
@@ -623,13 +1159,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
 /* harmony default export */ __webpack_exports__["a"] = (styles);
 
 /***/ }),
-/* 6 */
+/* 5 */
 /***/ (function(module, exports) {
 
 module.exports = require("aphrodite");
 
 /***/ }),
-/* 7 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -638,10 +1174,11 @@ module.exports = require("aphrodite");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _gutter_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
-/* harmony import */ var _cell_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _gutter_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
+/* harmony import */ var _cell_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
 
 
 
@@ -673,7 +1210,7 @@ class Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__[/* MediaLayout */ "a"], null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -688,7 +1225,7 @@ class Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         maxWidth,
         totalColumns
       } = spec;
-      const shouldDisplay = Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__[/* queryMatchesSize */ "c"])(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
+      const shouldDisplay = Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["queryMatchesSize"])(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
 
       if (!shouldDisplay) {
         return null;
@@ -715,9 +1252,9 @@ class Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         style: [_util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].row, !!maxWidth && _util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].rowMaxWidth, !!maxWidth && {
           maxWidth
         }, style]
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__[/* Strut */ "b"], {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
         size: marginWidth
-      }), filteredContents, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__[/* Strut */ "b"], {
+      }), filteredContents, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
         size: marginWidth
       }));
     });
@@ -729,33 +1266,7 @@ Row.defaultProps = {
 };
 
 /***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 9 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -770,14 +1281,15 @@ const flexBasis = size => {
 };
 
 /***/ }),
-/* 10 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Gutter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
@@ -796,7 +1308,7 @@ const flexBasis = size => {
  */
 class Gutter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__[/* MediaLayout */ "a"], null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["MediaLayout"], null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -810,11 +1322,11 @@ class Gutter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         gutterWidth
       } = spec;
 
-      if (!Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__[/* queryMatchesSize */ "c"])(this.props.mediaQuery, mediaSize)) {
+      if (!Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["queryMatchesSize"])(this.props.mediaQuery, mediaSize)) {
         return null;
       }
 
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__[/* Strut */ "b"], {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["Strut"], {
         size: gutterWidth
       });
     });
@@ -826,19 +1338,25 @@ Gutter.defaultProps = {
 };
 
 /***/ }),
-/* 11 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var _components_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Cell", function() { return _components_cell_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_row_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+/* harmony import */ var _components_row_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Row", function() { return _components_row_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 
 
 
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
 /***/ })
 /******/ ]);