import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "className", "color", "padding", "border", "borderColor", "noBorderRadius", "shadow"];
import * as React from 'react';
import classNames from 'classnames';
import { generateResponsiveClassNames, mergeResponsiveProps } from '../utils/responsive-props';
export var COLOR = {
  transparent: 'transparent',
  white: 'white',
  'gray-40': 'gray-40',
  'gray-20': 'gray-20',
  'gray-10': 'gray-10',
  'blue-40': 'blue-40',
  'blue-30': 'blue-30',
  'blue-20': 'blue-20',
  'green-40': 'green-40',
  'green-30': 'green-30',
  'green-20': 'green-20',
  'green-10': 'green-10',
  'indigo-40': 'indigo-40',
  'indigo-20': 'indigo-20',
  'indigo-10': 'indigo-10',
  'red-40': 'red-40',
  'red-30': 'red-30',
  'red-20': 'red-20',
  'yellow-40': 'yellow-40',
  'yellow-20': 'yellow-20'
};
export var PADDING = {
  none: 'none',
  xxs: 'xxs',
  xs: 'xs',
  s: 's',
  m: 'm',
  l: 'l',
  xl: 'xl'
};

/**
 * Container for grouping elements. It provides padding, background color, border and shadow.
 *
 * @see react docs: https://styleguide.brainly.com/latest/docs/interactive.html#boxes
 * @see twig-compatible docs: https://styleguide.brainly.com/latest/docs/containers.html#box
 *
 * @example <Box>Text inside Box</Box>
 * @returns {JSX.Element} Box component
 */
var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _ref2;

  var children = _ref.children,
      className = _ref.className,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? COLOR.transparent : _ref$color,
      _ref$padding = _ref.padding,
      padding = _ref$padding === void 0 ? 'm' : _ref$padding,
      _ref$border = _ref.border,
      border = _ref$border === void 0 ? false : _ref$border,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? COLOR['gray-20'] : _ref$borderColor,
      _ref$noBorderRadius = _ref.noBorderRadius,
      noBorderRadius = _ref$noBorderRadius === void 0 ? false : _ref$noBorderRadius,
      _ref$shadow = _ref.shadow,
      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
      props = _objectWithoutProperties(_ref, _excluded);

  var classes = classNames.apply(void 0, ['sg-box', (_ref2 = {}, _defineProperty(_ref2, "sg-box--".concat(String(color)), color), _defineProperty(_ref2, "sg-box--border-color-".concat(String(borderColor)), border && borderColor), _ref2)].concat(_toConsumableArray(generateResponsiveClassNames(function (shadow) {
    return shadow ? 'sg-box--shadow' : 'sg-box--no-shadow';
  }, shadow)), _toConsumableArray(generateResponsiveClassNames(function (noBorderRadius) {
    return noBorderRadius ? 'sg-box--no-border-radius' : 'sg-box--border-radius';
  }, noBorderRadius)), _toConsumableArray(generateResponsiveClassNames(function (border) {
    return border ? 'sg-box--border' : 'sg-box--no-border';
  }, border)), _toConsumableArray(generateResponsiveClassNames(function (padding) {
    return "sg-box--padding-".concat(String(padding));
  }, padding)), _toConsumableArray(generateResponsiveClassNames(function (_ref3) {
    var _ref4 = _slicedToArray(_ref3, 2),
        padding = _ref4[0],
        border = _ref4[1];

    return padding && border ? "sg-box--padding-".concat(padding, "-border") : '';
  }, mergeResponsiveProps([padding, border]))), _toConsumableArray(generateResponsiveClassNames(function (_ref5) {
    var _ref6 = _slicedToArray(_ref5, 2),
        border = _ref6[0],
        borderColor = _ref6[1];

    return border && borderColor ? "sg-box--border-color-".concat(String(borderColor)) : '';
  }, mergeResponsiveProps([border, borderColor]))), [className]));
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: classes,
    ref: ref
  }), children);
});
Box.displayName = 'Box';
export default Box;