@khanacademy/wonder-blocks-grid 1.0.34 → 1.0.35

package/dist/index.js

@@ -1,1402 +0,0 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// 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: {}
-/******/ 		};
-/******/
-/******/ 		// 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 });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// 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 = 9);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports =
-/******/
-function (modules) {
-  // webpackBootstrap
-
-  /******/
-  // The module cache
-
-  /******/
-  var installedModules = {};
-  /******/
-
-  /******/
-  // 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: {}
-      /******/
-
-    };
-    /******/
-
-    /******/
-    // 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
-      });
-      /******/
-    }
-    /******/
-
-  };
-  /******/
-
-  /******/
-  // 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 = 11);
-  /******/
-}
-/************************************************************************/
-
-/******/
-([
-/* 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 */
-
-/***/
-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 _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
-  /* 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 _media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-  /* harmony import */
-
-
-  var _util_specs_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-
-  const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
-  /* MEDIA_DEFAULT_SPEC */
-  "a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
-  /* MEDIA_INTERNAL_SPEC */
-  "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
-  /* MEDIA_MODAL_SPEC */
-  "c"]).map(spec => spec.query));
-  const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/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_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 = [];
-    }
-
-    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
-
-        if (!mql) {
-          continue;
-        }
-
-        const listener = e => {
-          if (e.matches) {
-            this.setState({
-              size
-            });
-          }
-        };
-
-        mql.addListener(listener);
-        this.cleanupThunks.push(() => mql.removeListener(listener));
-      }
-    }
-
-    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;
-          }
-        }
-      }
-
-      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.
-
-
-    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
-
-
-    getMockStyleSheet(mediaSize) {
-      const {
-        styleSheets
-      } = this.props;
-      const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
-
-      if (!styleSheets) {
-        return mockStyleSheet;
-      } // Go through all of the stylesheets that were specified
-
-
-      for (const styleSize of Object.keys(styleSheets)) {
-        const styleSheet = styleSheets[styleSize];
-
-        if (!styleSheet) {
-          continue;
-        } // 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]]];
-        }
-      }
-
-      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.
-
-
-      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 ...`
-
-  /**
-   * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
-   *
-   * MediaLayout is a container component that accepts a `styleSheets` object,
-   * whose keys are media sizes. It listens for changes to the current media
-   * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
-   * `children`, which is a render function taking those three values as an
-   * object.
-   *
-   * Valid keys for the `styleSheets` object are (in order of precedence):
-   * - `small`, `medium`, `large`
-   * - `mdOrSmaller`, `mdOrLarger`
-   * - `all`
-   *
-   * `MediaLayout` will merge style rules from multiple styles that match the
-   * current media query, e.g. `"(min-width: 1024px)"`.
-   *
-   * The `mediaSpec` is an object with one or more of the following keys:
-   * `small`, `medium`, or `large`. Each value contains the following data:
-   * - `query: string` e.g. "(min-width: 1024px)"
-   * - `totalColumns: number`
-   * - `gutterWidth: number`
-   * - `marginWidth: number`
-   * - `maxWidth: number`
-   */
-
-
-  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__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__[
-      /* default */
-      "a"].Consumer, null, ({
-        overrideSize,
-        ssrSize,
-        mediaSpec
-      }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](MediaLayoutInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, this.props, {
-        overrideSize: overrideSize,
-        ssrSize: ssrSize,
-        mediaSpec: mediaSpec
-      })));
-    }
-
-  }
-  /***/
-
-},
-/* 6 */
-
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return Spring;
-  });
-  /* 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 aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-  /* 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 */
-
-/***/
-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
-    };
-  };
-  /***/
-
-},
-/* 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) {
-  function _extends() {
-    module.exports = _extends = Object.assign ? Object.assign.bind() : 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.__esModule = true, module.exports["default"] = module.exports;
-    return _extends.apply(this, arguments);
-  }
-
-  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  /***/
-},
-/* 10 */
-
-/***/
-function (module, exports) {
-  module.exports = __webpack_require__(5);
-  /***/
-},
-/* 11 */
-
-/***/
-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);
-
-
-
-
-
-
-/**
- * A Cell is a container whose width is set based on the width of the
- * specified columns at the current grid size. You will specify the number
- * of columns that you want this component to span at each grid size.
- * This component should only be used as a child of a [Row](#row).
- *
- * This component renders a [View](#view) that
- * uses Flex Box and has a [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
- * of the specified "width" and [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
- * of 0.
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `smallCols`, `mediumCols`, `largeCols`, or
- * `cols` props then the component will only be shown at those grid sizes and
- * using the specified column width.
- */
-class Cell extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_CELL__;
-  }
-
-  static getCols(props, mediaSize) {
-    // If no option was specified then we just return undefined,
-    // components may handle this case differently.
-    // We go through all the ways in which a fixed width can be
-    // specified and find the one that matches our current grid size.
-    if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
-      return undefined;
-    } else if (props.smallCols && mediaSize === "small") {
-      return props.smallCols;
-    } else if (props.mediumCols && mediaSize === "medium") {
-      return props.mediumCols;
-    } else if (props.largeCols && mediaSize === "large") {
-      return props.largeCols;
-    } else if (typeof props.cols === "function") {
-      return props.cols(mediaSize);
-    } else if (props.cols) {
-      return props.cols;
-    } // If nothing applies then we return null (usually resulting
-    // in the component not being rendered)
-
-
-    return null;
-  } // HACK(kevinb): we use a stack method here because we can't get a ref to
-  // each cell in a row without cloning them all.
-
-
-  static shouldDisplay(props, mediaSize) {
-    const cols = Cell.getCols(props, mediaSize);
-    return cols !== null && cols !== 0;
-  }
-
-  render() {
-    const {
-      children,
-      style
-    } = this.props;
-    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`);
-      } // Get the settings for this particular size of grid
-
-
-      const {
-        totalColumns,
-        gutterWidth,
-        marginWidth
-      } = spec;
-      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;
-      }
-
-      if (cols > totalColumns) {
-        throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
-      } // We need to start by calculating the total width of all the "content"
-      // We do this by starting with the full width (100%) and then
-      // subtracting all of the gutter spaces inbetween the cells
-      // (gutterWidth * (totalColumns - 1)) and the width of the two margins
-      // (marginWidth * 2).
-
-
-      const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`; // Now that we have the full width we can calculate the width of this
-      // particular cell by multiplying the full width (allCellWidth) by
-      // the ratio of this cell (cols / totalColumns). But we then need to
-      // add back in the missing gutter widths:
-      // (gutterWidth * (cols - 1)). This gives us to full width of
-      // this particular cell.
-
-      const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`; // If the contents are a function then we call it with the mediaSize,
-      // totalColumns, and cols properties and render the return value.
-
-      const contents = typeof children === "function" ? children({
-        mediaSize,
-        totalColumns,
-        cols
-      }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
-      // that matches the intended width of the cell
-
-      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.defaultProps = {
-  smallCols: 0,
-  mediumCols: 0,
-  largeCols: 0,
-  cols: 0
-};
-Cell.__IS_CELL__ = true;
-
-/***/ }),
-/* 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__(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)";
-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);
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 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);
-
-
-
-
-
-
-
-/**
- * A Row holds all of the Cells that make up the contents of the grid. A row
- * also provides the margins on the sides and inserts the gutter spacing
- * in-between the cells. Typically this component will hold a [Cell](#cell),
- * but it can also include any elements that could fit in a
- * [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
- *
- * This component will automatically attempt to insert [Gutters](#gutter)
- * in-between all child elements. Additionally, it'll perform some basic checks
- * to ensure that no impossible layouts are accidentally generated.
- *
- * Typically this component will be used as a child of a [Grid](#grid-1),
- * but it's not a requirement, you can use it as a descendant, as well.
- *
- * 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 Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
-    const {
-      style,
-      children
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], null, ({
-      mediaSize,
-      mediaSpec
-    }) => {
-      const spec = mediaSpec[mediaSize];
-
-      if (!spec) {
-        throw new Error(`mediaSpec.${mediaSize} is undefined`);
-      }
-
-      const {
-        marginWidth,
-        maxWidth,
-        totalColumns
-      } = spec;
-      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;
-      } // If the contents are a function then we call it with the mediaSize and
-      // totalColumns properties and render the return value.
-
-
-      const contents = typeof children === "function" ? children({
-        mediaSize,
-        totalColumns
-      }) : children;
-      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_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__*/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__*/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"], {
-        size: marginWidth
-      }));
-    });
-  }
-
-}
-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"
-};
-
-/***/ }),
-/* 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");
-
-/***/ })
-/******/ ]);