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

Greensight Design System

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

var _excluded = ["children", "css"];
var useContainerCSS = function useContainerCSS() {
  var _useTheme = useTheme.useTheme(),
    layout = _useTheme.layout;
  var layoutTheme = layout || baseTheme.baseTheme.layout;
  var maxWidthCSS = useCSSProperty.useCSSProperty({
    name: 'maxWidth',
    props: {
      value: layoutTheme.container
    }
  });
  var paddingCSS = useCSSProperty.useCSSProperty({
    name: 'padding',
    props: {
      value: layoutTheme.padding
    },
    transform: function transform(_ref) {
      var value = _ref.value;
      return "0 ".concat(value, "px");
    }
  });
  var marginLeftCSS = useCSSProperty.useCSSProperty({
    name: 'marginLeft',
    props: {
      value: layoutTheme.marginLeft
    }
  });
  var marginRightCSS = useCSSProperty.useCSSProperty({
    name: 'marginRight',
    props: {
      value: layoutTheme.marginRight
    }
  });
  return React.useMemo(function () {
    return [maxWidthCSS, paddingCSS, marginLeftCSS, marginRightCSS];
  }, [marginLeftCSS, marginRightCSS, maxWidthCSS, paddingCSS]);
};

/**
 * Component for creating main page container with `layout` theme parameters. Uses `maxWidth`, `padding`,`marginLeft`, `marginRight`.
 */
var Container = function Container(_ref2) {
  var children = _ref2.children,
    css = _ref2.css,
    props = _rollupPluginBabelHelpers._objectWithoutProperties(_ref2, _excluded);
  var themeStyles = useContainerCSS();
  var styles = React.useMemo(function () {
    return [].concat(_rollupPluginBabelHelpers._toConsumableArray(themeStyles), [css]);
  }, [themeStyles, css]);
  return emotionReact_esm.jsx("div", _rollupPluginBabelHelpers._extends({
    css: styles
  }, props), children);
};

exports.Container = Container;
exports.useContainerCSS = useContainerCSS;