'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Wrapper = _styledComponents2.default.div.withConfig({
  displayName: 'SkeletonRectangle__Wrapper'
})(['border-radius:3px;width:', ';height:', ';background-color:', ';'], function (props) {
  return props.width;
}, function (props) {
  return props.height;
}, function (props) {
  return props.theme[props.bgColor];
});

var SkeletonRectangle = function SkeletonRectangle(props) {
  return _react2.default.createElement(
    Wrapper,
    props,
    props.children
  );
};

SkeletonRectangle.defaultProps = {
  bgColor: 'gray-1'
};

SkeletonRectangle.propTypes = {
  width: _propTypes2.default.string.isRequired,
  height: _propTypes2.default.string.isRequired,
  bgColor: _propTypes2.default.string.isRequired
};

exports.default = SkeletonRectangle;