@greensight/gds/emotion/cjs/Section.js

Greensight Design System

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-mkWCC7yp.js');
var React = require('react');
var useCSSProperty = require('./useCSSProperty-SItmMrFd.js');
var Container = require('./Container.js');
var emotionReact_esm = require('./emotion-react.esm-DjRiK_3N.js');
require('./baseTheme.js');
require('./cjs-D_V_gH93.js');
require('./scale-D3jiQp7F.js');
require('./useTheme.js');
require('./emotion-element-c16c303e.esm-C-l8eTyZ.js');

var _excluded = ["children", "container", "mb", "pv", "pt", "pb", "bg", "css"];
/**
 * Component for creating page sections.
 */
var Section = function Section(_ref) {
  var children = _ref.children,
    _ref$container = _ref.container,
    container = _ref$container === void 0 ? true : _ref$container,
    mb = _ref.mb,
    pvProp = _ref.pv,
    ptProp = _ref.pt,
    pbProp = _ref.pb,
    bg = _ref.bg,
    css = _ref.css,
    props = _rollupPluginBabelHelpers._objectWithoutProperties(_ref, _excluded);
  var background = useCSSProperty.useCSSProperty({
    name: 'background',
    props: {
      bg: bg
    }
  });
  var marginBottom = useCSSProperty.useCSSProperty({
    name: 'marginBottom',
    props: {
      mb: mb
    }
  });
  var paddingTop = useCSSProperty.useCSSProperty({
    name: 'paddingTop',
    props: {
      pv: pvProp,
      pt: ptProp
    },
    transform: function transform(_ref2) {
      var pv = _ref2.pv,
        pt = _ref2.pt;
      return pv !== null && pv !== void 0 ? pv : pt;
    }
  });
  var paddingBottom = useCSSProperty.useCSSProperty({
    name: 'paddingBottom',
    props: {
      pv: pvProp,
      pb: pbProp
    },
    transform: function transform(_ref3) {
      var pv = _ref3.pv,
        pb = _ref3.pb;
      return pv !== null && pv !== void 0 ? pv : pb;
    }
  });
  var sectionCss = React.useMemo(function () {
    return [background, marginBottom, paddingBottom, paddingTop, css];
  }, [background, marginBottom, paddingBottom, paddingTop, css]);
  return emotionReact_esm.jsx("section", _rollupPluginBabelHelpers._extends({
    css: sectionCss
  }, props), container ? emotionReact_esm.jsx(Container.Container, null, children) : children);
};

exports.Section = Section;