"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ResponsiveRowMdAndUp = exports.RowWrap = exports.RowAlignEnd = exports.RowAlignCenter = exports.RowAlignStart = exports.RowJustifySpaceEvenly = exports.RowJustifySpaceAround = exports.RowJustifySpaceBetween = exports.RowJustifyEnd = exports.RowJustifyCenter = exports.RowJustifyStart = exports.ColumnWrap = exports.ColumnAlignEnd = exports.ColumnAlignCenter = exports.ColumnAlignStart = exports.ColumnJustifySpaceEvenly = exports.ColumnJustifySpaceAround = exports.ColumnJustifySpaceBetween = exports.ColumnJustifyEnd = exports.ColumnJustifyCenter = exports.ColumnJustifyStart = exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lodash = require("lodash");

var _index = require("../../index");

var _hooks = require("../../hooks");

var _stacking = _interopRequireDefault(require("./stacking.mdx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var _default = {
  title: 'Design System/Layout/Stack',
  parameters: {
    docs: {
      page: _stacking["default"]
    }
  }
};
exports["default"] = _default;
var ColumnContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "ColumnContainer",
  componentId: "man4cj-0"
})(["border:dashed 1px ", ";height:150px;width:100px;"], (0, _index.getPaletteColor)('greyscale-dark'));
var RowContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "RowContainer",
  componentId: "man4cj-1"
})(["border:dashed 1px black;height:100px;width:300px;"]);

var ColumnJustifyStart = function ColumnJustifyStart() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "start",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifyStart = ColumnJustifyStart;

var ColumnJustifyCenter = function ColumnJustifyCenter() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "center",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifyCenter = ColumnJustifyCenter;

var ColumnJustifyEnd = function ColumnJustifyEnd() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "end",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifyEnd = ColumnJustifyEnd;

var ColumnJustifySpaceBetween = function ColumnJustifySpaceBetween() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "space-between",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifySpaceBetween = ColumnJustifySpaceBetween;

var ColumnJustifySpaceAround = function ColumnJustifySpaceAround() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "space-around",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifySpaceAround = ColumnJustifySpaceAround;

var ColumnJustifySpaceEvenly = function ColumnJustifySpaceEvenly() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    justify: "space-evenly",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnJustifySpaceEvenly = ColumnJustifySpaceEvenly;

var ColumnAlignStart = function ColumnAlignStart() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    align: "start",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnAlignStart = ColumnAlignStart;

var ColumnAlignCenter = function ColumnAlignCenter() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    align: "center",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnAlignCenter = ColumnAlignCenter;

var ColumnAlignEnd = function ColumnAlignEnd() {
  return /*#__PURE__*/_react["default"].createElement(ColumnContainer, {
    stacked: "column",
    align: "end",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.ColumnAlignEnd = ColumnAlignEnd;
var WideColumnContainer = (0, _styledComponents["default"])(ColumnContainer).withConfig({
  displayName: "WideColumnContainer",
  componentId: "man4cj-2"
})(["width:600px;"]);

var ColumnWrap = function ColumnWrap() {
  return /*#__PURE__*/_react["default"].createElement(WideColumnContainer, {
    stacked: "column",
    justify: "start",
    colorName: "background",
    wrap: true
  }, (0, _lodash.range)(1, 9, 2).map(function (i) {
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
      key: i
    }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-bg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-fg"
    }, "Inner ", i)), /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-fg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-bg"
    }, "Inner ", i + 1)));
  }));
};

exports.ColumnWrap = ColumnWrap;

var RowJustifyStart = function RowJustifyStart() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "start",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifyStart = RowJustifyStart;

var RowJustifyCenter = function RowJustifyCenter() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "center",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifyCenter = RowJustifyCenter;

var RowJustifyEnd = function RowJustifyEnd() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "end",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifyEnd = RowJustifyEnd;

var RowJustifySpaceBetween = function RowJustifySpaceBetween() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "space-between",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifySpaceBetween = RowJustifySpaceBetween;

var RowJustifySpaceAround = function RowJustifySpaceAround() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "space-around",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifySpaceAround = RowJustifySpaceAround;

var RowJustifySpaceEvenly = function RowJustifySpaceEvenly() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "space-evenly",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowJustifySpaceEvenly = RowJustifySpaceEvenly;

var RowAlignStart = function RowAlignStart() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    align: "start",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowAlignStart = RowAlignStart;

var RowAlignCenter = function RowAlignCenter() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    align: "center",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowAlignCenter = RowAlignCenter;

var RowAlignEnd = function RowAlignEnd() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    align: "end",
    colorName: "background",
    spacing: "m2"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 3")));
};

exports.RowAlignEnd = RowAlignEnd;

var RowWrap = function RowWrap() {
  return /*#__PURE__*/_react["default"].createElement(RowContainer, {
    stacked: "row",
    justify: "start",
    colorName: "background",
    wrap: true
  }, (0, _lodash.range)(1, 9, 2).map(function (i) {
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
      key: i
    }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-bg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-fg"
    }, "Inner ", i)), /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-fg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-bg"
    }, "Inner ", i + 1)));
  }));
};

exports.RowWrap = RowWrap;

var ResponsiveRowMdAndUp = function ResponsiveRowMdAndUp() {
  var bp = (0, _hooks.useBreakPoint)();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_index.Text, {
    spacing: "mv2"
  }, "Current breakpoint: \"", bp, "\""), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    stacked: {
      sm: 'column',
      md: 'row'
    },
    align: {
      sm: 'stretch',
      md: 'start'
    },
    justify: {
      sm: 'start',
      md: 'center'
    },
    colorName: "background",
    spacing: "m2"
  }, (0, _lodash.range)(1, 11, 2).map(function (i) {
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
      key: i
    }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-bg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-fg"
    }, "Inner ", i)), /*#__PURE__*/_react["default"].createElement(_index.Box, {
      colorName: "brand-secondary-fg",
      spacing: "p1"
    }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
      colorName: "brand-secondary-bg"
    }, "Inner ", i + 1)));
  })));
};

exports.ResponsiveRowMdAndUp = ResponsiveRowMdAndUp;