"use strict";

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

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

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

var _ = require("../..");

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

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

var _default = {
  title: 'System|Stacking',
  parameters: {
    fileName: __filename,
    docs: {
      page: _stacking["default"]
    }
  }
};
exports["default"] = _default;
var ColumnContainer = (0, _styledComponents["default"])(_.Box).withConfig({
  displayName: "ColumnContainer",
  componentId: "man4cj-0"
})(["border:dashed 1px ", ";height:300px;"], (0, _.getPaletteColor)('greyscale-dark'));
var RowContainer = (0, _styledComponents["default"])(_.Box).withConfig({
  displayName: "RowContainer",
  componentId: "man4cj-1"
})(["border:dashed 1px black;height:200px;"]);

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

exports.ColumnJustifyStart = ColumnJustifyStart;

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

exports.ColumnJustifyCenter = ColumnJustifyCenter;

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

exports.ColumnJustifyEnd = ColumnJustifyEnd;

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

exports.ColumnJustifySpaceBetween = ColumnJustifySpaceBetween;

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

exports.ColumnAlignStart = ColumnAlignStart;

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

exports.ColumnAlignCenter = ColumnAlignCenter;

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

exports.ColumnAlignEnd = ColumnAlignEnd;

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

exports.RowJustifyStart = RowJustifyStart;

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

exports.RowJustifyCenter = RowJustifyCenter;

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

exports.RowJustifyEnd = RowJustifyEnd;

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

exports.RowJustifySpaceBetween = RowJustifySpaceBetween;

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

exports.RowAlignStart = RowAlignStart;

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

exports.RowAlignCenter = RowAlignCenter;

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

exports.RowAlignEnd = RowAlignEnd;