import {
  standardBorderRadius
} from "./chunk-JK4BP73A.js";
import {
  themeOr
} from "./chunk-2VBDEO6M.js";

// src/components/ProgressBar.tsx
import styled from "@emotion/styled";
import { useEffect, useState } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var defaultProps = {
  isSm: false,
  stepDuration: 0.5
};
function ProgressBar({
  background,
  progressPercentage,
  isSm = defaultProps.isSm,
  stepDuration = defaultProps.stepDuration
}) {
  const [percentage, setPercentage] = useState(5);
  useEffect(() => {
    if (progressPercentage !== void 0) {
      setPercentage(progressPercentage);
    } else {
      setTimeout(() => {
        setPercentage(100);
      }, 0);
    }
  }, [progressPercentage]);
  return /* @__PURE__ */ jsx(ProgressBarContainer, { isSm, children: /* @__PURE__ */ jsx(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ jsx(
    BarBg,
    {
      background,
      isSm,
      percentage,
      stepDuration
    }
  ) }) });
}
ProgressBar.defaultProps = defaultProps;
var ProgressBarContainer = styled.div`
  ${standardBorderRadius(16)}
  background-color: ${({ theme }) => 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;
`;
var BarBg = styled.div`
  ${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%
  )`};
`;
var Bar = styled.div`
  ${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);
`;

export {
  ProgressBar
};
