"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithBackgroundColor = exports.PaddingAndDifferentXAxisAndLeft = exports.Padding = exports.MarginAndDifferentMarginYAxis = exports.Margin = exports.DifferentPaddingForDifferentScreenSizes = void 0;
var _react = _interopRequireDefault(require("react"));
var _color = _interopRequireDefault(require("color"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Outer = _styledComponents.default.div.withConfig({
  displayName: "Boxstories__Outer",
  componentId: "sc-1599xyf-0"
})(["display:inline-block;", ""], function (p) {
  var stripes = p.theme.color.warning;
  var stripesDark = (0, _color.default)(stripes).lighten(0.5);
  return "\n      background: repeating-linear-gradient(\n        -45deg,\n        ".concat(stripes, ",\n        ").concat(stripes, " ").concat(p.theme.spacing.unit(2), "px,\n        ").concat(stripesDark, " ").concat(p.theme.spacing.unit(2), "px,\n        ").concat(stripesDark, " ").concat(p.theme.spacing.unit(4), "px\n      );\n    ");
});
var StyledBox = (0, _styledComponents.default)(_.Box).withConfig({
  displayName: "Boxstories__StyledBox",
  componentId: "sc-1599xyf-1"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
var withOuter = function withOuter(storyFn) {
  return _react.default.createElement(Outer, null, storyFn());
};
var text = _react.default.createElement(StyledBox, {
  p: 2
}, _react.default.createElement(_.Typography, {
  color: function color(t) {
    return t.color.text;
  }
}, "Some random content here"));
var _default = exports.default = {
  title: 'Atoms / Box',
  decorators: [withOuter],
  parameters: {
    component: _.Box
  }
};
var Margin = exports.Margin = function Margin() {
  return _react.default.createElement(_.Box, {
    m: 4
  }, text);
};
var MarginAndDifferentMarginYAxis = exports.MarginAndDifferentMarginYAxis = {
  render: function render() {
    return _react.default.createElement(_.Box, {
      m: 8,
      my: 4
    }, text);
  },
  name: 'Margin and different margin Y-axis'
};
var Padding = exports.Padding = {
  render: function render() {
    return _react.default.createElement(Outer, null, _react.default.createElement(_.Box, {
      p: 8
    }, text));
  },
  name: 'Padding '
};
var PaddingAndDifferentXAxisAndLeft = exports.PaddingAndDifferentXAxisAndLeft = {
  render: function render() {
    return _react.default.createElement(Outer, null, _react.default.createElement(_.Box, {
      p: 8,
      px: 4,
      pl: 0
    }, text));
  },
  name: 'Padding and different X-axis and left '
};
var DifferentPaddingForDifferentScreenSizes = exports.DifferentPaddingForDifferentScreenSizes = {
  render: function render() {
    return _react.default.createElement(Outer, null, _react.default.createElement(_.Box, {
      p: 0,
      sm: {
        p: 4
      }
    }, text));
  },
  name: 'Different padding for different screen sizes '
};
var WithBackgroundColor = exports.WithBackgroundColor = {
  render: function render() {
    return _react.default.createElement(Outer, null, _react.default.createElement(_.Box, {
      p: 0,
      sm: {
        p: 4
      },
      backgroundColor: function backgroundColor(t) {
        return t.color.cta;
      }
    }, _react.default.createElement(_.Typography, {
      type: "primary",
      color: function color(t) {
        return t.color.textLight;
      }
    }, "Lorem ipsum dolor sit amet.")));
  },
  name: 'With background color'
};