"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Responsive = exports.ColumnShrink = exports.RowShrink = exports.ColumnBasis = exports.RowBasis = exports.ColumnGrow = exports.RowGrow = exports["default"] = void 0;

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

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

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

var _stackee = _interopRequireDefault(require("./stackee.mdx"));

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

var _default = {
  title: 'Design System/Layout/Stackee',
  parameters: {
    docs: {
      page: _stackee["default"]
    }
  }
};
exports["default"] = _default;
var RowGrowContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "RowGrowContainer",
  componentId: "sc-18qh2uw-0"
})(["border:dashed 1px ", ";"], (0, _index.getPaletteColor)('greyscale-dark'));

var RowGrow = function RowGrow() {
  return /*#__PURE__*/_react["default"].createElement(RowGrowContainer, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    grow: 1,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "grow 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    grow: 2,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "grow 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    grow: 3,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "grow 3")));
};

exports.RowGrow = RowGrow;
var ColumnGrowContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "ColumnGrowContainer",
  componentId: "sc-18qh2uw-1"
})(["border:dashed 1px ", ";width:200px;height:300px;"], (0, _index.getPaletteColor)('greyscale-dark'));

var ColumnGrow = function ColumnGrow() {
  return /*#__PURE__*/_react["default"].createElement(ColumnGrowContainer, {
    stacked: "column"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    grow: 1,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "grow 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    grow: 2,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "grow 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    grow: 3,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "grow 3")));
};

exports.ColumnGrow = ColumnGrow;
var RowBasisContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "RowBasisContainer",
  componentId: "sc-18qh2uw-2"
})(["border:dashed 1px ", ";"], (0, _index.getPaletteColor)('greyscale-dark'));

var RowBasis = function RowBasis() {
  return /*#__PURE__*/_react["default"].createElement(RowBasisContainer, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    basis: 200,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "basis 200")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    basis: 100,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "basis 100")));
};

exports.RowBasis = RowBasis;
var ColumnBasisContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "ColumnBasisContainer",
  componentId: "sc-18qh2uw-3"
})(["border:dashed 1px ", ";width:200px;height:400px;"], (0, _index.getPaletteColor)('greyscale-dark'));

var ColumnBasis = function ColumnBasis() {
  return /*#__PURE__*/_react["default"].createElement(ColumnBasisContainer, {
    stacked: "column"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    basis: 200,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "basis 200")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    basis: 100,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "basis 100")));
};

exports.ColumnBasis = ColumnBasis;
var RowShrinkContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "RowShrinkContainer",
  componentId: "sc-18qh2uw-4"
})(["border:dashed 1px ", ";max-width:300px;"], (0, _index.getPaletteColor)('greyscale-dark'));

var RowShrink = function RowShrink() {
  return /*#__PURE__*/_react["default"].createElement(RowShrinkContainer, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    shrink: 2,
    basis: 300,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "shrink 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    shrink: 1,
    basis: 300,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "shrink 1")));
};

exports.RowShrink = RowShrink;
var ColumnShrinkContainer = (0, _styledComponents["default"])(_index.Box).withConfig({
  displayName: "ColumnShrinkContainer",
  componentId: "sc-18qh2uw-5"
})(["border:dashed 1px ", ";width:200px;height:300px;"], (0, _index.getPaletteColor)('greyscale-dark'));

var ColumnShrink = function ColumnShrink() {
  return /*#__PURE__*/_react["default"].createElement(ColumnShrinkContainer, {
    stacked: "column"
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    shrink: 2,
    basis: 300,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "shrink 2")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    shrink: 1,
    basis: 300,
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "shrink 1")));
};

exports.ColumnShrink = ColumnShrink;

var Responsive = function Responsive() {
  var bp = (0, _index.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'
    }
  }, /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-bg",
    basis: {
      md: 100,
      lg: 200,
      xl: 500
    },
    grow: {
      sm: 1,
      md: 0
    },
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-fg"
  }, "Inner 1")), /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    basis: {
      md: 100,
      lg: 200,
      xl: 500
    },
    grow: {
      sm: 1,
      md: 0
    },
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_index.Span, {
    colorName: "brand-secondary-bg"
  }, "Inner 2"))));
};

exports.Responsive = Responsive;