@khanacademy/wonder-blocks-grid 1.0.24

package/dist/index.js

@@ -0,0 +1,787 @@
+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 = 5);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  module.exports["default"] = module.exports, module.exports.__esModule = true;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "Cell", function() { return /* reexport */ cell_Cell; });
+__webpack_require__.d(__webpack_exports__, "Row", function() { return /* reexport */ row_Row; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
+var helpers_extends = __webpack_require__(4);
+var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
+
+// 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_);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(3);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(2);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-layout/dist/es/index.js
+
+
+
+
+ // All possible valid media sizes
+
+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).
+
+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.
+ */
+
+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
+    };
+    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 ...`
+
+
+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
+    })));
+  }
+
+}
+/**
+ * Expands to fill space between sibling components.
+ *
+ * Assumes parent is a View.
+ */
+
+
+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]
+    });
+  }
+
+}
+
+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]
+    });
+  }
+
+}
+
+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
+ */
+
+
+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}`);
+  }
+};
+
+
+// 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"
+    }
+  },
+  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
+  };
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/components/cell.js
+
+
+
+
+
+
+/**
+ * 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_Cell extends external_react_["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_Cell.getCols(props, mediaSize);
+    return cols !== null && cols !== 0;
+  }
+
+  render() {
+    const {
+      children,
+      style
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](es_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_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__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+        style: [util_styles.cellFixed, flexBasis(calcWidth), style]
+      }, contents);
+    });
+  }
+
+}
+cell_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
+
+
+
+/**
+ * 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];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        gutterWidth
+      } = spec;
+
+      if (!queryMatchesSize(this.props.mediaQuery, mediaSize)) {
+        return null;
+      }
+
+      return /*#__PURE__*/external_react_["createElement"](es_Strut, {
+        size: gutterWidth
+      });
+    });
+  }
+
+}
+gutter_Gutter.defaultProps = {
+  mediaQuery: "all"
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/components/row.js
+
+
+
+
+
+
+
+/**
+ * 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_Row extends external_react_["Component"] {
+  render() {
+    const {
+      style,
+      children
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](es_MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        marginWidth,
+        maxWidth,
+        totalColumns
+      } = spec;
+      const shouldDisplay = 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 = external_react_["Children"].toArray(contents).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, {
+        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 && {
+          maxWidth
+        }, style]
+      }, /*#__PURE__*/external_react_["createElement"](es_Strut, {
+        size: marginWidth
+      }), filteredContents, /*#__PURE__*/external_react_["createElement"](es_Strut, {
+        size: marginWidth
+      }));
+    });
+  }
+
+}
+row_Row.defaultProps = {
+  mediaQuery: "all"
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-grid/src/index.js
+
+
+
+/***/ })
+/******/ ]);