"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _react = require("@storybook/react");

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

var _ = require("..");

var _Box = require("./Box");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Box', module);
stories.add('Generic', function () {
  return __jsx(_Box.Box, {
    bg: "white",
    display: ['flex', 'block'],
    rounded: "lg",
    p: 6,
    boxShadow: "lg",
    transition: "all 0.2s"
  }, __jsx(_Box.Box, {
    as: "img",
    size: ['24', '16'],
    rounded: "full",
    mx: ['0', 'auto'],
    mr: [5, null],
    mb: [null, 4],
    display: "block",
    src: "https://www.dropbox.com/s/nd8z3hxuo3ahauk/segun_adebayo.jpg?dl=1"
  }), __jsx(_Box.Box, {
    textAlign: ['left', 'center']
  }, __jsx(_.Heading, {
    kind: "h4"
  }, "Erin Lindford"), __jsx(_Box.Box, {
    color: "purple.500"
  }, "Customer Support"), __jsx(_Box.Box, {
    color: "gray.600"
  }, "erinlindford@example.com"), __jsx(_Box.Box, {
    color: "gray.600"
  }, "(555) 765-4321")));
});
stories.add('Responsive Styles', function () {
  return __jsx(_Box.Box, {
    p: 5,
    width: ['full', 'full', '50%'],
    color: "white",
    bg: "green.500"
  }, "Box");
});
stories.add('responsive test', function () {
  return __jsx(_Box.Box, {
    h: "500px",
    bg: "red.500",
    w: {
      sm: '500px',
      md: '1000px'
    }
  });
});
//# sourceMappingURL=examples.js.map