'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../utils/index.js');
var base = require('./variations/_view/base.js');
var base$1 = require('./variations/_size/base.js');
var base$2 = require('./variations/_borderRadius/base.js');
var Panel_tokens = require('./Panel.tokens.js');
var Panel_styles = require('./Panel.styles.js');
var getSizeValueFromProp = require('../../utils/getSizeValueFromProp.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["children", "view", "size", "width", "height", "customBackgroundColor", "customContentBackgroundColor", "className", "style"];
var panelRoot = function panelRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
    var children = _ref.children,
      view = _ref.view,
      size = _ref.size,
      width = _ref.width,
      height = _ref.height,
      customBackgroundColor = _ref.customBackgroundColor,
      customContentBackgroundColor = _ref.customContentBackgroundColor,
      className = _ref.className,
      style = _ref.style,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var innerWidth = width ? getSizeValueFromProp.getSizeValueFromProp(width) : '100%';
    var innerHeight = height ? getSizeValueFromProp.getSizeValueFromProp(height) : '100%';
    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      ref: outerRef,
      view: view,
      size: size,
      className: index.cx(Panel_tokens.classes.root, className),
      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Panel_tokens.privateTokens.width, innerWidth), Panel_tokens.privateTokens.height, innerHeight), Panel_tokens.privateTokens.backgroundColor, customBackgroundColor))
    }, rest), /*#__PURE__*/React__default.default.createElement(Panel_styles.StyledWrapper, {
      customContentBackgroundColor: customContentBackgroundColor
    }, children));
  });
};
var panelConfig = {
  name: 'Panel',
  tag: 'div',
  layout: panelRoot,
  base: '',
  variations: {
    view: {
      css: base.base
    },
    size: {
      css: base$1.base
    },
    borderRadius: {
      css: base$2.base
    }
  },
  defaults: {
    view: 'default',
    size: 'm',
    borderRadius: 'none'
  }
};

exports.panelConfig = panelConfig;
exports.panelRoot = panelRoot;
