import React from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle `
.circlePath{
  stroke: var(--primary-color);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease 0s;
}
.circleTrail{
  stroke: #ddd;
}
.circleText{
  fill: var(--primary-color);
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}
.circleBackground{
  fill: #ddd;
}
`;
const classes = {
    path: 'circlePath',
    trail: 'circleTrail',
    text: 'circleText',
    background: 'circleBackground',
    root: '',
};
export const ProgressCircle = ({ percentage, size = '100%' }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(GlobalStyle, null),
        React.createElement(CircularProgressbar, { value: percentage, text: `${percentage}%`, classes: classes, styles: { root: { width: size } } })));
};
//# sourceMappingURL=index.js.map