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

Greensight Design System

import { c as _objectWithoutProperties, d as _extends } from './_rollupPluginBabelHelpers-D0Wa2C7U.js';
import { useMemo } from 'react';
import { u as useCSSProperty } from './useCSSProperty-CIA5Kp6U.js';
import { Container } from './Container.js';
import { j as jsx } from './emotion-react.esm-CuKt2qQ4.js';
import './baseTheme.js';
import './cjs-C-GfJT3o.js';
import './emotion-element-c16c303e.esm-CnTrGsmj.js';
import './useTheme.js';
import './scale-CeLrnuzO.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 = _objectWithoutProperties(_ref, _excluded);
  var background = useCSSProperty({
    name: 'background',
    props: {
      bg: bg
    }
  });
  var marginBottom = useCSSProperty({
    name: 'marginBottom',
    props: {
      mb: mb
    }
  });
  var paddingTop = 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({
    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 = useMemo(function () {
    return [background, marginBottom, paddingBottom, paddingTop, css];
  }, [background, marginBottom, paddingBottom, paddingTop, css]);
  return jsx("section", _extends({
    css: sectionCss
  }, props), container ? jsx(Container, null, children) : children);
};

export { Section };