import React from 'react';
import { b as _taggedTemplateLiteral } from './_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled, { keyframes, css } from 'styled-components';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from './ui/box.js';

var _templateObject, _templateObject2, _templateObject3;
var PulseAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n  25% {\n    opacity: 0.75;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  75% {\n    opacity : 0.75;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
var Animation = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation: ", ";\n"])), function (props) {
  return props.animation ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          ", " 1.5s ease-in-out 0.5s infinite\n        "])), PulseAnimation) : "";
});

var SkeletonStyle = function SkeletonStyle(props) {
  return {
    display: "flex",
    background: props.theme.colors.grey.neon,
    padding: props.theme.space.zero,
    borderRadius: props.circle ? "50%" : "2px",
    height: props.circle ? props.size : props.height,
    width: props.circle ? props.size : props.width
  };
};
var Skeleton = styled(Box)(SkeletonStyle, Animation);
Skeleton.propTypes = {
  animation: PropTypes.bool,
  circle: PropTypes.bool,
  height: PropTypes.string,
  width: PropTypes.string,
  size: PropTypes.string
};
Skeleton.defaultProps = {
  animation: false,
  circle: false,
  height: "50px",
  width: "100px",
  size: "24px"
};
var Skeleton$1 = /*#__PURE__*/React.memo(Skeleton);

export default Skeleton$1;
