"use strict";

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

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

var _span = require("./span.component");

var _text = require("../text/text.component");

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

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

var _span2 = _interopRequireDefault(require("./span.mdx"));

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

var _default = {
  component: _span.Span,
  title: 'Components/Typography/Span',
  parameters: {
    docs: {
      page: _span2["default"]
    }
  }
};
exports["default"] = _default;

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(_text.Text, null, "Use the span component to", ' ', /*#__PURE__*/_react["default"].createElement(_span.Span, {
    bold: true,
    colorName: "success-fg"
  }, "apply inline styles"), ' ', "in a block of text.");
};

exports.Default = Default;

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _span.Span
  }, "Hello"), /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, {
    Component: _span.Span
  }, "Hello"));
};

exports.MixinsSpacing = MixinsSpacing;