"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStackee = exports.MixinsStacked = exports.MixinsSpacing = exports.BackgroundColor = exports["default"] = void 0;

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

var _box = require("./box.component");

var _typography = require("../../core/typography");

var _marginChecker = require("../../mixins/spacing/story-support/margin-checker");

var _paddingChecker = require("../../mixins/spacing/story-support/padding-checker");

var _stackedChecker = require("../../mixins/stacking/story-support/stacked-checker");

var _stackeeChecker = require("../../mixins/stackee/story-support/stackee-checker");

var _box2 = _interopRequireDefault(require("./box.mdx"));

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

var _default = {
  component: _box.Box,
  title: 'Primitives/Box',
  parameters: {
    docs: {
      page: _box2["default"]
    }
  }
};
exports["default"] = _default;

var BackgroundColor = function BackgroundColor() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    colorName: "brand-primary-fg"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Span, {
    colorName: "brand-primary-bg"
  }, "I am a box with colorName = brand-primary-fg"));
};

exports.BackgroundColor = BackgroundColor;

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _box.Box,
    colorName: "brand-secondary-bg"
  }, "Box"), /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, {
    Component: _box.Box,
    colorName: "brand-secondary-bg"
  }, "Box"));
};

exports.MixinsSpacing = MixinsSpacing;

var MixinsStacked = function MixinsStacked() {
  return /*#__PURE__*/_react["default"].createElement(_stackedChecker.StackedChecker, {
    colorName: "brand-secondary-bg",
    Component: _box.Box
  });
};

exports.MixinsStacked = MixinsStacked;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, {
    colorName: "brand-secondary-bg",
    Component: _box.Box
  }, "Box");
};

exports.MixinsStackee = MixinsStackee;