"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _interpolation = require("../../Tools/interpolation");

var stretchAnimation =
/*#__PURE__*/
(0, _styledComponents.keyframes)(["\n  0%,\n  40%,\n  100% { opacity: 1; }\n  20% { opacity: 0; }\n"]);

var Container =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "zh6cqq-0"
})(["\n  display: flex;\n  justify-content: space-around;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  font-size: 10px;\n"], (0, _interpolation.prop)('width'), (0, _interpolation.prop)('height'));

var Rectangle =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "zh6cqq-1"
})(["\n  display: inline-block;\n  width: 15%;\n  height: 100%;\n  background-color: ", ";\n  animation: ", " 1.2s infinite ease-in-out;\n"], (0, _interpolation.theme)('loaderColor'), stretchAnimation);

var Rectangle1 =
/*#__PURE__*/
(0, _styledComponents.default)(Rectangle).withConfig({
  componentId: "zh6cqq-2"
})(["\n  animation-delay: -1.1s;\n"]);
var Rectangle2 =
/*#__PURE__*/
(0, _styledComponents.default)(Rectangle).withConfig({
  componentId: "zh6cqq-3"
})(["\n  animation-delay: -1s;\n"]);
var Rectangle3 =
/*#__PURE__*/
(0, _styledComponents.default)(Rectangle).withConfig({
  componentId: "zh6cqq-4"
})(["\n  animation-delay: -0.9s;\n"]);
var Rectangle4 =
/*#__PURE__*/
(0, _styledComponents.default)(Rectangle).withConfig({
  componentId: "zh6cqq-5"
})(["\n  animation-delay: -0.8s;\n"]);
var Rectangle5 =
/*#__PURE__*/
(0, _styledComponents.default)(Rectangle).withConfig({
  componentId: "zh6cqq-6"
})(["\n  animation-delay: -0.7s;\n"]);

var FlatLoader = function FlatLoader(props) {
  return React.createElement(Container, props, React.createElement(Rectangle1, null), React.createElement(Rectangle2, null), React.createElement(Rectangle3, null), React.createElement(Rectangle4, null), React.createElement(Rectangle5, null));
};

FlatLoader.propTypes = process.env.NODE_ENV !== "production" ? {
  height: _propTypes.default.string.isRequired,
  width: _propTypes.default.string.isRequired
} : {};
FlatLoader.defaultProps = {
  height: '30px',
  width: '50px'
};
var _default = FlatLoader;
exports.default = _default;