"use strict";

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

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

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

var _examplesList = _interopRequireDefault(require("./examples-list.js"));

var _index2 = require("../styles/index.js");

var _examples$DEFAULT$exa;

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _default = (_examples$DEFAULT$exa = {}, _defineProperty(_examples$DEFAULT$exa, _examplesList.default.DEFAULT, function Story1() {
  var colors = ['primary', 'negative', 'warning', 'positive'];
  var elements = [];

  for (var _i = 0; _i < colors.length; _i++) {
    var color = colors[_i];

    for (var x = 100; x <= 700; x += 100) {
      var colorString = "".concat(color).concat(x);
      elements.push(_react.default.createElement(_index.Block, {
        color: colorString,
        key: colorString
      }, colorString));
    }
  }

  return elements;
}), _defineProperty(_examples$DEFAULT$exa, _examplesList.default.FONTS, function Story2() {
  var sizes = [100, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000];
  return sizes.map(function (size) {
    var fontString = "font".concat(size);
    return _react.default.createElement(_index.Block, {
      key: size,
      font: fontString
    }, fontString);
  });
}), _defineProperty(_examples$DEFAULT$exa, _examplesList.default.FLEXBOX, function Story4() {
  var elements = [];

  for (var x = 0; x < 25; x++) {
    elements.push(_react.default.createElement(_index.Block, {
      key: x,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: "200px",
      height: "200px",
      margin: "scale200",
      font: "font400",
      color: "primary",
      $style: {
        border: 'grey solid 2px'
      }
    }, "Positioned with flexbox"));
  }

  return _react.default.createElement(_index.Block, {
    display: "flex",
    direction: "column",
    padding: "scale3200",
    $style: {
      border: 'grey solid 4px'
    },
    flexWrap: true
  }, elements);
}), _defineProperty(_examples$DEFAULT$exa, _examplesList.default.GRID, function Story4() {
  var Inner = (0, _index2.styled)('div', function (_ref) {
    var $theme = _ref.$theme;
    return {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: $theme.colors.mono300,
      border: "1px solid ".concat($theme.colors.mono900),
      height: '50px',
      width: '50px'
    };
  });
  Inner.displayName = "Inner";
  return _react.default.createElement(_index.Block, {
    display: "grid",
    gridTemplateColumns: "repeat(3,1fr)",
    justifyItems: "center",
    gridGap: "scale1000"
  }, _react.default.createElement(Inner, null, "1"), _react.default.createElement(Inner, null, "2"), _react.default.createElement(Inner, null, "3"), _react.default.createElement(Inner, null, "4"), _react.default.createElement(Inner, null, "5"), _react.default.createElement(Inner, null, "6"));
}), _defineProperty(_examples$DEFAULT$exa, _examplesList.default.OVERRIDES, function Story5() {
  return _react.default.createElement(_index.Block, {
    as: "h2",
    font: "font500",
    overrides: {
      Block: {
        style: {
          color: 'red'
        }
      }
    }
  }, "These styles are provided by styletron");
}), _examples$DEFAULT$exa);

exports.default = _default;