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

Greensight Design System

import { c as _objectWithoutProperties, e as _toConsumableArray, d as _extends } from './_rollupPluginBabelHelpers-D0Wa2C7U.js';
import { useMemo } from 'react';
import { u as useCSSProperty } from './useCSSProperty-CIA5Kp6U.js';
import { baseTheme } from './baseTheme.js';
import { useTheme } from './useTheme.js';
import { j as jsx } from './emotion-react.esm-CuKt2qQ4.js';
import './cjs-C-GfJT3o.js';
import './emotion-element-c16c303e.esm-CnTrGsmj.js';
import './scale-CeLrnuzO.js';

var _excluded = ["children", "css"];
var useContainerCSS = function useContainerCSS() {
  var _useTheme = useTheme(),
    layout = _useTheme.layout;
  var layoutTheme = layout || baseTheme.layout;
  var maxWidthCSS = useCSSProperty({
    name: 'maxWidth',
    props: {
      value: layoutTheme.container
    }
  });
  var paddingCSS = useCSSProperty({
    name: 'padding',
    props: {
      value: layoutTheme.padding
    },
    transform: function transform(_ref) {
      var value = _ref.value;
      return "0 ".concat(value, "px");
    }
  });
  var marginLeftCSS = useCSSProperty({
    name: 'marginLeft',
    props: {
      value: layoutTheme.marginLeft
    }
  });
  var marginRightCSS = useCSSProperty({
    name: 'marginRight',
    props: {
      value: layoutTheme.marginRight
    }
  });
  return 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 = _objectWithoutProperties(_ref2, _excluded);
  var themeStyles = useContainerCSS();
  var styles = useMemo(function () {
    return [].concat(_toConsumableArray(themeStyles), [css]);
  }, [themeStyles, css]);
  return jsx("div", _extends({
    css: styles
  }, props), children);
};

export { Container, useContainerCSS };