import { jsxs as l, jsx as a } from "react/jsx-runtime";
import { styled as c, useTheme as g, alpha as d, Typography as m } from "@mui/material";
import { BadgeContainer as h } from "./app-badge-default.js";
import { getTextColor as i, getBgColor as u } from "./app-badge-version.js";
const b = c("span")(({ theme: o, color: r }) => ({
  position: "relative",
  display: "inline-block",
  width: o.spacing(1),
  height: o.spacing(1),
  borderRadius: "50%",
  backgroundColor: r,
  marginRight: o.spacing(1)
}));
function B({ value: o = "", color: r = "primary", loading: n = !1, ...s }) {
  const t = g(), e = i(t, r), p = u(t, r);
  return /* @__PURE__ */ l(
    h,
    {
      loading: n,
      sx: {
        borderColor: d(e, 0.2),
        bgcolor: p
      },
      ...s,
      children: [
        /* @__PURE__ */ a(b, { color: i(t, r) }),
        /* @__PURE__ */ a(m, { className: "app-badge-value", style: { color: e }, children: o })
      ]
    }
  );
}
export {
  B as AppBadgeState
};
