"use strict";

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

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

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

var _lodash = require("lodash");

var _branding = require("../../../mixins/branding");

var _primitives = require("../../../primitives");

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

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

var _ = require("..");

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

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

var _default = {
  component: _grid.Grid,
  title: 'Design System/Layout/Grid',
  parameters: {
    docs: {
      page: _grid2["default"]
    }
  }
};
exports["default"] = _default;

var FullGrid = function FullGrid() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, (0, _lodash.times)(12, function (i) {
    return /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
      key: "key-".concat(i),
      sm: 1
    }, /*#__PURE__*/_react["default"].createElement(_.Card, {
      spacing: ['ph1', 'pv3', 'mv3']
    }));
  }));
};

exports.FullGrid = FullGrid;
var ChildBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "ChildBox",
  componentId: "euopck-0"
})(["background:", ";border:solid ", " 1px;color:", ";height:25px;width:25px;"], (0, _branding.getPaletteColor)('brand-secondary-fg'), (0, _branding.getPaletteColor)('brand-secondary-bg'), (0, _branding.getPaletteColor)('brand-secondary-bg'));

var MixinsStacking = function MixinsStacking() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 6,
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "1"), /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "2"), /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "3")), /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 6,
    stacked: "column"
  }, /*#__PURE__*/_react["default"].createElement(ChildBox, null, "1"), /*#__PURE__*/_react["default"].createElement(ChildBox, null, "2"), /*#__PURE__*/_react["default"].createElement(ChildBox, null, "3")));
};

exports.MixinsStacking = MixinsStacking;