"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Responsive = 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"));

var _hooks = require("../../hooks");

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 MarginLeft = function MarginLeft() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['ml0', 'ml1', 'ml2', 'ml3', 'ml4', 'ml5', 'ml6', 'ml7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginLeft = MarginLeft;

var MarginRight = function MarginRight() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['mr0', 'mr1', 'mr2', 'mr3', 'mr4', 'mr5', 'mr6', 'mr7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginRight = MarginRight;

var MarginHorizontal = function MarginHorizontal() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['mh0', 'mh1', 'mh2', 'mh3', 'mh4', 'mh5', 'mh6', 'mh7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginHorizontal = MarginHorizontal;

var MarginTop = function MarginTop() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['mt0', 'mt1', 'mt2', 'mt3', 'mt4', 'mt5', 'mt6', 'mt7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginTop = MarginTop;

var MarginBottom = function MarginBottom() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['mb0', 'mb1', 'mb2', 'mb3', 'mb4', 'mb5', 'mb6', 'mb7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginBottom = MarginBottom;

var MarginVertical = function MarginVertical() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['mv0', 'mv1', 'mv2', 'mv3', 'mv4', 'mv5', 'mv6', 'mv7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level,
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\""));
  }));
};

exports.MarginVertical = MarginVertical;

var PaddingLeft = function PaddingLeft() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['pl0', 'pl1', 'pl2', 'pl3', 'pl4', 'pl5', 'pl6', 'pl7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingLeft = PaddingLeft;

var PaddingRight = function PaddingRight() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['pr0', 'pr1', 'pr2', 'pr3', 'pr4', 'pr5', 'pr6', 'pr7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingRight = PaddingRight;

var PaddingHorizontal = function PaddingHorizontal() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, ['ph0', 'ph1', 'ph2', 'ph3', 'ph4', 'ph5', 'ph6', 'ph7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(InlineBox, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingHorizontal = PaddingHorizontal;

var PaddingTop = function PaddingTop() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['pt0', 'pt1', 'pt2', 'pt3', 'pt4', 'pt5', 'pt6', 'pt7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingTop = PaddingTop;

var PaddingBottom = function PaddingBottom() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['pb0', 'pb1', 'pb2', 'pb3', 'pb4', 'pb5', 'pb6', 'pb7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingBottom = PaddingBottom;

var PaddingVertical = function PaddingVertical() {
  return /*#__PURE__*/_react["default"].createElement(BorderBox, {
    stacked: "row"
  }, ['pv0', 'pv1', 'pv2', 'pv3', 'pv4', 'pv5', 'pv6', 'pv7'].map(function (level) {
    return /*#__PURE__*/_react["default"].createElement(_.Box, {
      key: level
    }, /*#__PURE__*/_react["default"].createElement(_.Box, {
      spacing: level,
      colorName: "brand-secondary-fg"
    }, /*#__PURE__*/_react["default"].createElement(_.Span, {
      colorName: "brand-secondary-bg"
    }, "spacing=\"", level, "\"")));
  }));
};

exports.PaddingVertical = PaddingVertical;

var Responsive = function Responsive() {
  var bp = (0, _hooks.useBreakPoint)();
  return /*#__PURE__*/_react["default"].createElement(BorderBox, null, /*#__PURE__*/_react["default"].createElement(_.Box, {
    spacing: {
      sm: ['m1', 'p1'],
      md: ['m2', 'p2'],
      lg: ['m4', 'p4'],
      xl: ['m7', 'p7']
    },
    colorName: "brand-secondary-fg"
  }, /*#__PURE__*/_react["default"].createElement(_.Span, {
    colorName: "brand-secondary-bg"
  }, "Current breakpoint: \"", bp, "\"")));
};

exports.Responsive = Responsive;