Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_common = require("../styles/common.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/ProgressBar.tsx
const defaultProps = {
	isSm: false,
	stepDuration: .5
};
function ProgressBar({ background, progressPercentage, isSm = defaultProps.isSm, stepDuration = defaultProps.stepDuration }) {
	const [percentage, setPercentage] = (0, react.useState)(5);
	(0, react.useEffect)(() => {
		if (progressPercentage !== void 0) setPercentage(progressPercentage);
		else setTimeout(() => {
			setPercentage(100);
		}, 0);
	}, [progressPercentage]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProgressBarContainer, {
		isSm,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Bar, {
			isSm,
			percentage,
			stepDuration,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(BarBg, {
				background,
				isSm,
				percentage,
				stepDuration
			})
		})
	});
}
ProgressBar.defaultProps = defaultProps;
const ProgressBarContainer = _emotion_styled.default.div`
  ${require_styles_common.standardBorderRadius(16)}
  background-color: ${({ theme }) => require_styles_themes.themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
  box-sizing: border-box;
  display: flex;
  height: ${({ isSm }) => isSm ? "6px" : "16px"};
  justify-content: flex-start;
  width: 100%;
  position: relative;
`;
const BarBg = _emotion_styled.default.div`
  ${require_styles_common.standardBorderRadius(16)}
  width: ${({ percentage }) => 100 / percentage * 100}%;
  height: 100%;

  background: ${({ background }) => background ? background : `
  linear-gradient(
    90deg,
    #000000 -25.9%,
    #1b4077 14.55%,
    #a152c7 82.22%,
    #3f2e7e 115.32%
  )`};
`;
const Bar = _emotion_styled.default.div`
  ${require_styles_common.standardBorderRadius(16)}
  overflow: hidden;
  box-sizing: border-box;
  display: inline-block;
  height: ${({ isSm }) => isSm ? "6px" : "16px"};
  width: ${(props) => props.percentage}%;
  transition: width ${({ stepDuration }) => stepDuration}s
    cubic-bezier(0.16, 0.3, 0.18, 1);
`;
//#endregion
exports.ProgressBar = ProgressBar;
