import a from "react";
import { merge as r } from "../../utilities/merge.es.es.js";
var n = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e.Large = "Large", e.XLarge = "XLarge", e))(n || {});
const d = {
  Small: "tw-h-1",
  Medium: "tw-h-2",
  Large: "tw-h-3",
  XLarge: "tw-h-4"
}, i = {
  Error: {
    outer: "tw-bg-box-negative",
    inner: "tw-bg-text-negative"
  },
  Success: {
    outer: "tw-bg-box-positive",
    inner: "tw-bg-text-positive"
  },
  Progress: {
    outer: "tw-bg-box-selected",
    inner: "tw-bg-text-interactive"
  }
}, w = ({
  percentage: e = 0,
  size: o = "Medium",
  state: t = "Progress",
  rounded: s = !1
}) => /* @__PURE__ */ a.createElement("div", {
  className: r([
    "tw-overflow-hidden tw-w-full tw-relative",
    d[o],
    s && "tw-rounded",
    i[t].outer
  ]),
  "data-test-id": "loading-bar-outer"
}, /* @__PURE__ */ a.createElement("div", {
  className: r([
    "tw-left-0 tw-top-0 tw-h-full tw-absolute tw-transition-width",
    i[t].inner
  ]),
  style: { width: `${e}%` },
  "data-test-id": "loading-bar-inner"
}));
export {
  w as LoadingBar,
  n as LoadingBarSize,
  d as loadingBarSizeClasses,
  i as loadingBarStateClasses
};
//# sourceMappingURL=LoadingBar.es.es.js.map
