"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PaddingVertical = exports.PaddingBottom = exports.PaddingTop = exports.PaddingHorizontal = exports.PaddingRight = exports.PaddingLeft = exports.MarginVertical = exports.MarginBottom = exports.MarginTop = exports.MarginHorizontal = exports.MarginRight = exports.MarginLeft = exports["default"] = void 0;

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

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

var _ = require("../..");

var _spacing = _interopRequireDefault(require("./spacing.mdx"));

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

var _default = {
  title: 'System|Spacing',
  parameters: {
    fileName: __filename,
    docs: {
      page: _spacing["default"]
    }
  }
};
exports["default"] = _default;
var BorderBox = (0, _styledComponents["default"])(_.Box).withConfig({
  displayName: "BorderBox",
  componentId: "pe1k2o-0"
})(["border:solid ", " 1px;"], (0, _.getPaletteColor)('greyscale-dark'));
var InlineBox = (0, _styledComponents["default"])(_.Box).withConfig({
  displayName: "InlineBox",
  componentId: "pe1k2o-1"
})(["display:inline-block;"]);
var LEVELS = [0, 1, 2, 3, 4, 5, 6, 7];

var MarginLeft = function MarginLeft() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "ml".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"ml", level, "\""));
  }));
};

exports.MarginLeft = MarginLeft;

var MarginRight = function MarginRight() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "mr".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"mr", level, "\""));
  }));
};

exports.MarginRight = MarginRight;

var MarginHorizontal = function MarginHorizontal() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "mh".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"mh", level, "\""));
  }));
};

exports.MarginHorizontal = MarginHorizontal;

var MarginTop = function MarginTop() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "mt".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"mt", level, "\""));
  }));
};

exports.MarginTop = MarginTop;

var MarginBottom = function MarginBottom() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "mb".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"mb", level, "\""));
  }));
};

exports.MarginBottom = MarginBottom;

var MarginVertical = function MarginVertical() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: "mv".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"mv", level, "\""));
  }));
};

exports.MarginVertical = MarginVertical;

var PaddingLeft = function PaddingLeft() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: "pl".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"pl", level, "\"")));
  }));
};

exports.PaddingLeft = PaddingLeft;

var PaddingRight = function PaddingRight() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: "pr".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"pr", level, "\"")));
  }));
};

exports.PaddingRight = PaddingRight;

var PaddingHorizontal = function PaddingHorizontal() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: "ph".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"ph", level, "\"")));
  }));
};

exports.PaddingHorizontal = PaddingHorizontal;

var PaddingTop = function PaddingTop() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: "pt".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"pt", level, "\"")));
  }));
};

exports.PaddingTop = PaddingTop;

var PaddingBottom = function PaddingBottom() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: "pb".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"pb", level, "\"")));
  }));
};

exports.PaddingBottom = PaddingBottom;

var PaddingVertical = function PaddingVertical() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, LEVELS.map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: "pv".concat(level),
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"pv", level, "\"")));
  }));
};

exports.PaddingVertical = PaddingVertical;