var _examples$DEFAULT$exa;

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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; }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { Block } from './index.js';
import examples from './examples-list.js';
import { styled } from '../styles/index.js';
export default (_examples$DEFAULT$exa = {}, _defineProperty(_examples$DEFAULT$exa, examples.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.createElement(Block, {
        color: colorString,
        key: colorString
      }, colorString));
    }
  }

  return elements;
}), _defineProperty(_examples$DEFAULT$exa, examples.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.createElement(Block, {
      key: size,
      font: fontString
    }, fontString);
  });
}), _defineProperty(_examples$DEFAULT$exa, examples.FLEXBOX, function Story4() {
  var elements = [];

  for (var x = 0; x < 25; x++) {
    elements.push(React.createElement(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.createElement(Block, {
    display: "flex",
    direction: "column",
    padding: "scale3200",
    $style: {
      border: 'grey solid 4px'
    },
    flexWrap: true
  }, elements);
}), _defineProperty(_examples$DEFAULT$exa, examples.GRID, function Story4() {
  var Inner = 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.createElement(Block, {
    display: "grid",
    gridTemplateColumns: "repeat(3,1fr)",
    justifyItems: "center",
    gridGap: "scale1000"
  }, React.createElement(Inner, null, "1"), React.createElement(Inner, null, "2"), React.createElement(Inner, null, "3"), React.createElement(Inner, null, "4"), React.createElement(Inner, null, "5"), React.createElement(Inner, null, "6"));
}), _defineProperty(_examples$DEFAULT$exa, "breakpoints", function BreakpointsStory() {
  return React.createElement(React.Fragment, null, React.createElement(Block, {
    color: ['blue', 'green', 'red', 'pink'],
    height: ['100px', '200px', '300px', '400px'],
    overrides: {
      Block: {
        style: function style(_ref2) {
          var $theme = _ref2.$theme;
          return _objectSpread({}, $theme.borders.border300, {
            backgroundColor: $theme.colors.warning
          });
        }
      }
    }
  }, "Responsive"), React.createElement(Block, {
    height: ['100px', '200px'],
    overrides: {
      Block: {
        style: function style(_ref3) {
          var $theme = _ref3.$theme;
          return _objectSpread({}, $theme.borders.border300, {
            backgroundColor: $theme.colors.primary
          });
        }
      }
    }
  }, "Responsive with less than 4 values provided"));
}), _defineProperty(_examples$DEFAULT$exa, examples.OVERRIDES, function Story5() {
  return React.createElement(Block, {
    as: "h2",
    font: "font500",
    overrides: {
      Block: {
        style: {
          color: 'red'
        }
      }
    }
  }, "These styles are provided by styletron");
}), _examples$DEFAULT$exa);