"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.OneColumnLayout = exports.TwoColumnLayout = exports["default"] = void 0;

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

var _grid = require("./grid.component");

var _gridItem = require("./grid-item");

var _card = require("../card");

var _gridRecipes = _interopRequireDefault(require("./grid.recipes.mdx"));

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

var _default = {
  title: 'Recipes/Layout/Page Level Responsive Columns',
  parameters: {
    docs: {
      page: _gridRecipes["default"]
    }
  }
};
exports["default"] = _default;

var TwoColumnLayout = function TwoColumnLayout() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 7,
    lg: 8,
    xl: 9
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: ['p2', 'mb2']
  }, /*#__PURE__*/_react["default"].createElement("code", null, /*#__PURE__*/_react["default"].createElement("pre", null, "<GridItem\n  sm={12}\n  md={7}\n  lg={8}\n  xl={9\n/>")))), /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 5,
    lg: 4,
    xl: 3
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2"
  }, /*#__PURE__*/_react["default"].createElement("code", null, /*#__PURE__*/_react["default"].createElement("pre", null, "<GridItem\n  sm={12}\n  md={5}\n  lg={4}\n  xl={3}\n/>")))));
};

exports.TwoColumnLayout = TwoColumnLayout;

var OneColumnLayout = function OneColumnLayout() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 6,
    lg: 4,
    xl: 6,
    offsetMd: 3,
    offsetLg: 4,
    offsetXl: 3
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: ['p2', 'mb2']
  }, /*#__PURE__*/_react["default"].createElement("code", null, /*#__PURE__*/_react["default"].createElement("pre", null, "<GridItem\n  sm={12}\n  md={6}\n  lg={4}\n  xl={6}\n  offsetMd={3}\n  offsetLg={4}\n  offsetXl={3}\n/>"))))), /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 8,
    lg: 6,
    xl: 4,
    offsetMd: 2,
    offsetLg: 3,
    offsetXl: 4
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2"
  }, /*#__PURE__*/_react["default"].createElement("code", null, /*#__PURE__*/_react["default"].createElement("pre", null, "<GridItem\n  sm={12}\n  md={8}\n  lg={6}\n  xl={4}\n  offsetMd={2}\n  offsetLg={3}\n  offsetXl={4}\n/>"))))));
};

exports.OneColumnLayout = OneColumnLayout;