@khanacademy/wonder-blocks-grid 1.0.24 → 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 = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 9);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,436 +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, exports) {
+  /******/
+  // The module cache
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+  /******/
+  var installedModules = {};
+  /******/
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
+  /******/
+  // The require function
 
-module.exports = require("aphrodite");
+  /******/
 
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
+  function __webpack_require__(moduleId) {
+    /******/
 
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    /******/
+    // Check if module is in cache
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+    /******/
+    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: {}
+      /******/
+
+    };
+    /******/
+
+    /******/
+    // 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;
+    /******/
+  }
+  /******/
+
+  /******/
+
+  /******/
+  // expose the modules object (__webpack_modules__)
+
+  /******/
+
+
+  __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
+      });
+      /******/
+    }
+    /******/
 
-    return target;
   };
+  /******/
 
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
+  /******/
+  // define __esModule on exports
 
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+  /******/
 
-/***/ }),
-/* 5 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_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
+    });
+    /******/
+  };
+  /******/
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "Cell", function() { return /* reexport */ cell_Cell; });
-__webpack_require__.d(__webpack_exports__, "Row", function() { return /* reexport */ row_Row; });
+  /******/
+  // create a fake namespace object
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
+  /******/
+  // mode & 1: value is a module id, require it
 
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(4);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
+  /******/
+  // mode & 2: merge all properties of value into the ns
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
-var wonder_blocks_spacing_ = __webpack_require__(1);
-var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+  /******/
+  // mode & 4: return value when already ns object
 
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(3);
+  /******/
+  // mode & 8|1: behave like require
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
+  /******/
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-layout/dist/es/index.js
 
+  __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;
+    /******/
 
- // All possible valid media sizes
+    var ns = Object.create(null);
+    /******/
 
-const VALID_MEDIA_SIZES = ["small", "medium", "large"];
-const mediaDefaultSpecLargeMarginWidth = wonder_blocks_spacing_default.a.large_24; // The default spec for media layout, currently available in
-// three different settings (roughly mobile, tablet, and desktop).
+    __webpack_require__.r(ns);
+    /******/
 
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonder_blocks_spacing_default.a.medium_16,
-    marginWidth: wonder_blocks_spacing_default.a.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: wonder_blocks_spacing_default.a.xLarge_32,
-    marginWidth: wonder_blocks_spacing_default.a.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: wonder_blocks_spacing_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: wonder_blocks_spacing_default.a.xLarge_32,
-    marginWidth: wonder_blocks_spacing_default.a.medium_16
-  }
-}; // The default used for modals
-
-const MEDIA_MODAL_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonder_blocks_spacing_default.a.medium_16,
-    marginWidth: wonder_blocks_spacing_default.a.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: wonder_blocks_spacing_default.a.xLarge_32,
-    marginWidth: wonder_blocks_spacing_default.a.xxLarge_48
-  }
-};
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-var MediaLayoutContext = /*#__PURE__*/Object(external_react_["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.
 
-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.
- */
+    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));
+    /******/
 
-class es_MediaLayoutInternal extends external_react_["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
+    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;
     };
-    this.cleanupThunks = [];
-  }
+    /******/
 
-  componentDidMount() {
-    // TODO(WB-534): handle changes to mediaSpec prop
-    const entries = Object.entries(this.props.mediaSpec);
+    __webpack_require__.d(getter, 'a', getter);
+    /******/
 
-    for (const [size, spec] of entries) {
-      const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
 
-      if (!mql) {
-        continue;
-      }
+    return getter;
+    /******/
+  };
+  /******/
 
-      const listener = e => {
-        if (e.matches) {
-          this.setState({
-            size
-          });
-        }
-      };
+  /******/
+  // 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
 
-      mql.addListener(listener);
-      this.cleanupThunks.push(() => mql.removeListener(listener));
+
+  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 */
+
+/***/
+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);
 
-  componentWillUnmount() {
-    // Remove our listeners.
-    this.cleanupThunks.forEach(cleaup => cleaup());
+  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 mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
+      const styles = this.getMockStyleSheet(mediaSize);
+      return children({
+        mediaSize,
+        mediaSpec,
+        styles
+      });
+    }
+
+  } // 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 es_MediaLayout extends external_react_["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(external_react_["createElement"])(MediaLayoutContext.Consumer, null, ({
-      overrideSize,
-      ssrSize,
-      mediaSpec
-    }) => /*#__PURE__*/Object(external_react_["createElement"])(es_MediaLayoutInternal, extends_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 es_Spring extends external_react_["Component"] {
-  render() {
-    const {
-      style
-    } = this.props;
-    return /*#__PURE__*/Object(external_react_["createElement"])(wonder_blocks_core_["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 */
 
-const styles = external_aphrodite_["StyleSheet"].create({
-  grow: {
-    flexGrow: 1
-  }
-});
-/**
- * A component for inserting fixed space between components.
- *
- * Assumes parent is a View.
- */
 
-class es_Strut extends external_react_["Component"] {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return /*#__PURE__*/Object(external_react_["createElement"])(wonder_blocks_core_["View"], {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
+  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_1__["StyleSheet"].create({
+    grow: {
+      flexGrow: 1
+    }
+  });
+  /***/
+},
+/* 7 */
 
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-/**
- * 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
- */
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
 
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return Strut;
+  });
+  /* harmony import */
 
-const queryMatchesSize = (mediaQuery, mediaSize) => {
-  switch (mediaQuery) {
-    case "all":
-      return true;
 
-    case "small":
-      return mediaSize === "small";
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
 
-    case "mdOrSmaller":
-      return mediaSize === "medium" || mediaSize === "small";
 
-    case "medium":
-      return mediaSize === "medium";
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
 
-    case "mdOrLarger":
-      return mediaSize === "medium" || mediaSize === "large";
 
-    case "large":
-      return mediaSize === "large";
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+  /* harmony import */
 
-    default:
-      throw new Error(`Unsupported mediaSize: ${mediaSize}`);
-  }
-};
 
+  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.
+   */
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/util/styles.js
 
-const WIDE_SCREEN = "@media (min-width: 1168px)";
-const styles_styles = external_aphrodite_["StyleSheet"].create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%"
-  },
-  rowMaxWidth: {
-    [WIDE_SCREEN]: {
-      margin: "0 auto"
+  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]
+      });
     }
-  },
-  cellGrow: {
-    flexGrow: 1
-  },
-  cellFixed: {
-    flexShrink: 0
+
   }
-});
-/* harmony default export */ var util_styles = (styles_styles);
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/util/utils.js
-const flexBasis = size => {
-  return {
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size
+
+  const strutStyle = size => {
+    return {
+      width: size,
+      MsFlexBasis: size,
+      MsFlexPreferredSize: size,
+      WebkitFlexBasis: size,
+      flexBasis: size,
+      flexShrink: 0
+    };
   };
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/components/cell.js
+  /***/
+
+},
+/* 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}`);
+    }
+  };
+  /***/
+
+},
+/* 9 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(5);
+  /***/
+},
+/* 10 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+
+  __webpack_require__.r(__webpack_exports__);
+  /* harmony import */
+
+
+  var _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+  /* harmony reexport (safe) */
+
+
+  __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) */
+
+
+  __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"];
+  });
+  /***/
+
+}
+/******/
+]);
+
+/***/ }),
+/* 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__(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__(4);
+/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
 
 
 
@@ -545,7 +1019,7 @@ const flexBasis = size => {
  * `cols` props then the component will only be shown at those grid sizes and
  * using the specified column width.
  */
-class cell_Cell extends external_react_["Component"] {
+class Cell extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_CELL__;
   }
@@ -577,7 +1051,7 @@ class cell_Cell extends external_react_["Component"] {
 
 
   static shouldDisplay(props, mediaSize) {
-    const cols = cell_Cell.getCols(props, mediaSize);
+    const cols = Cell.getCols(props, mediaSize);
     return cols !== null && cols !== 0;
   }
 
@@ -586,7 +1060,7 @@ class cell_Cell extends external_react_["Component"] {
       children,
       style
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](es_MediaLayout, null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["MediaLayout"], null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -602,7 +1076,7 @@ class cell_Cell extends external_react_["Component"] {
         gutterWidth,
         marginWidth
       } = spec;
-      const cols = cell_Cell.getCols(this.props, mediaSize); // If no columns are specified then we just don't render this cell
+      const cols = Cell.getCols(this.props, mediaSize); // If no columns are specified then we just don't render this cell
 
       if (cols === undefined || cols === null || cols === 0) {
         return null;
@@ -634,68 +1108,77 @@ class cell_Cell extends external_react_["Component"] {
       }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
       // that matches the intended width of the cell
 
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: [util_styles.cellFixed, flexBasis(calcWidth), style]
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: [_util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].cellFixed, Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_4__[/* flexBasis */ "a"])(calcWidth), style]
       }, contents);
     });
   }
 
 }
-cell_Cell.defaultProps = {
+Cell.defaultProps = {
   smallCols: 0,
   mediumCols: 0,
   largeCols: 0,
   cols: 0
 };
-cell_Cell.__IS_CELL__ = true;
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/components/gutter.js
+Cell.__IS_CELL__ = true;
 
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
 
+module.exports = require("@khanacademy/wonder-blocks-core");
 
-/**
- * Gutter is a component whose width is set based on the size of grid currently
- * being displayed. Used for spacing out cells from each other. The gutter
- * itself doesn't hold any content, it just spaces it out.
- *
- * Gutters are inserted automatically inside of a [Row](#row) in-between Cells.
- * You may only need to use Gutters if you're manually building your own
- * sub-grid, or some-such (this should be relatively rare).
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `small`, `medium`, or `large`
- * props then the component will only be shown at those grid sizes.
- */
-class gutter_Gutter extends external_react_["Component"] {
-  render() {
-    return /*#__PURE__*/external_react_["createElement"](es_MediaLayout, null, ({
-      mediaSize,
-      mediaSpec
-    }) => {
-      const spec = mediaSpec[mediaSize];
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      if (!spec) {
-        throw new Error(`mediaSpec.${mediaSize} is undefined`);
-      }
+"use strict";
+/* 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 {
-        gutterWidth
-      } = spec;
+const WIDE_SCREEN = "@media (min-width: 1168px)";
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%"
+  },
+  rowMaxWidth: {
+    [WIDE_SCREEN]: {
+      margin: "0 auto"
+    }
+  },
+  cellGrow: {
+    flexGrow: 1
+  },
+  cellFixed: {
+    flexShrink: 0
+  }
+});
+/* harmony default export */ __webpack_exports__["a"] = (styles);
 
-      if (!queryMatchesSize(this.props.mediaQuery, mediaSize)) {
-        return null;
-      }
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
 
-      return /*#__PURE__*/external_react_["createElement"](es_Strut, {
-        size: gutterWidth
-      });
-    });
-  }
+module.exports = require("aphrodite");
 
-}
-gutter_Gutter.defaultProps = {
-  mediaQuery: "all"
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/components/row.js
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Row; });
+/* 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__(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__(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);
 
 
 
@@ -721,13 +1204,13 @@ gutter_Gutter.defaultProps = {
  * grid sizes. If you specify the `small`, `medium`, or `large`
  * props then the component will only be shown at those grid sizes.
  */
-class row_Row extends external_react_["Component"] {
+class Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](es_MediaLayout, null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -742,7 +1225,7 @@ class row_Row extends external_react_["Component"] {
         maxWidth,
         totalColumns
       } = spec;
-      const shouldDisplay = queryMatchesSize(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;
@@ -754,34 +1237,126 @@ class row_Row extends external_react_["Component"] {
         mediaSize,
         totalColumns
       }) : children;
-      const filteredContents = external_react_["Children"].toArray(contents).filter( // Flow doesn't let us check .type on a non-null React.Node so
+      const filteredContents = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(contents) // Go through all of the contents and pre-emptively remove anything
+      // that shouldn't be rendered.
+      .filter( // Flow doesn't let us check .type on a non-null React.Node so
       // we have to cast it to any.
-      item => cell_Cell.isClassOf(item) ? cell_Cell.shouldDisplay(item.props, mediaSize) : true) // Intersperse Gutter elements between the cells.
-      .reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/external_react_["createElement"](gutter_Gutter, {
+      item => _cell_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(item) ? _cell_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].shouldDisplay(item.props, mediaSize) : true) // Intersperse Gutter elements between the cells.
+      .reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_gutter_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
         key: `gutter-${index}`
       })]), []) // We only want gutters between each cell in the row.  The reduce
       // adds a gutter after every cell so we need to remove the last
       // element which is an unnecessary gutteer.
       .slice(0, -1);
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: [util_styles.row, !!maxWidth && util_styles.rowMaxWidth, !!maxWidth && {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
+        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__*/external_react_["createElement"](es_Strut, {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
         size: marginWidth
-      }), filteredContents, /*#__PURE__*/external_react_["createElement"](es_Strut, {
+      }), filteredContents, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
         size: marginWidth
       }));
     });
   }
 
 }
-row_Row.defaultProps = {
+Row.defaultProps = {
+  mediaQuery: "all"
+};
+
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return flexBasis; });
+const flexBasis = size => {
+  return {
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size
+  };
+};
+
+/***/ }),
+/* 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__(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__);
+
+
+
+/**
+ * Gutter is a component whose width is set based on the size of grid currently
+ * being displayed. Used for spacing out cells from each other. The gutter
+ * itself doesn't hold any content, it just spaces it out.
+ *
+ * Gutters are inserted automatically inside of a [Row](#row) in-between Cells.
+ * You may only need to use Gutters if you're manually building your own
+ * sub-grid, or some-such (this should be relatively rare).
+ *
+ * By default (with no properties specified) it will display at all
+ * grid sizes. If you specify the `small`, `medium`, or `large`
+ * props then the component will only be shown at those grid sizes.
+ */
+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"], null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        gutterWidth
+      } = spec;
+
+      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"], {
+        size: gutterWidth
+      });
+    });
+  }
+
+}
+Gutter.defaultProps = {
   mediaQuery: "all"
 };
-// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/index.js
 
+/***/ }),
+/* 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__(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__(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");
+
 /***/ })
 /******/ ]);