import { jsxs as m, jsx as r } from "react/jsx-runtime";
import l from "react";
import o from "../../utils/classNames.js";
const t = {
  WHITE: "white",
  GRAY: "gray"
}, p = ({ loaded: e = 0, total: s = 0, progressBarStyle: i = t.WHITE }) => {
  if (!e || !s)
    return null;
  const a = `${e / s * 100}%`, n = o(
    "progress",
    "height-2 margin-bottom-10",
    i === t.GRAY ? "bg-lighter" : "bg-white"
  ), c = o(
    "progress-bar",
    i === t.GRAY && a !== "100%" && "border border-right-only border-color-white border-width-2"
  );
  return /* @__PURE__ */ m(l.Fragment, { children: [
    /* @__PURE__ */ m("div", { className: "text-center margin-bottom-3", children: [
      /* @__PURE__ */ r("span", { className: "text-medium", children: e }),
      /* @__PURE__ */ r("span", { className: "margin-left-5 margin-right-5", children: "/" }),
      /* @__PURE__ */ r("span", { className: "text-medium", children: s })
    ] }),
    /* @__PURE__ */ r("div", { className: n, children: /* @__PURE__ */ r("div", { className: c, style: { width: a } }) })
  ] });
};
export {
  p as LoadMoreProgress
};
//# sourceMappingURL=LoadMoreProgress.js.map
