import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import { cx } from '../../utils/index.js';
import { base } from './variations/_view/base.js';
import { base as base$1 } from './variations/_size/base.js';
import { base as base$2 } from './variations/_borderRadius/base.js';
import { classes, privateTokens } from './Panel.tokens.js';
import { StyledWrapper } from './Panel.styles.js';
import { getSizeValueFromProp } from '../../utils/getSizeValueFromProp.js';

var _excluded = ["children", "view", "size", "width", "height", "customBackgroundColor", "customContentBackgroundColor", "className", "style"];
var panelRoot = function panelRoot(Root) {
  return /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
    var innerWidth = width ? getSizeValueFromProp(width) : '100%';
    var innerHeight = height ? getSizeValueFromProp(height) : '100%';
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      ref: outerRef,
      view: view,
      size: size,
      className: cx(classes.root, className),
      style: _objectSpread2(_objectSpread2({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, privateTokens.width, innerWidth), privateTokens.height, innerHeight), privateTokens.backgroundColor, customBackgroundColor))
    }, rest), /*#__PURE__*/React__default.createElement(StyledWrapper, {
      customContentBackgroundColor: customContentBackgroundColor
    }, children));
  });
};
var panelConfig = {
  name: 'Panel',
  tag: 'div',
  layout: panelRoot,
  base: '',
  variations: {
    view: {
      css: base
    },
    size: {
      css: base$1
    },
    borderRadius: {
      css: base$2
    }
  },
  defaults: {
    view: 'default',
    size: 'm',
    borderRadius: 'none'
  }
};

export { panelConfig, panelRoot };
