import { jsxs as m, jsx as s } from "react/jsx-runtime";
import e from "@mui/material/Box";
import p from "@mui/material/Typography";
import { toCssColor as f, statusToColor as c } from "./types.js";
const d = {
  xs: 6,
  sm: 8,
  md: 10,
  lg: 12,
  xl: 14
};
function x({
  status: a,
  size: t = "sm",
  label: r,
  pulse: n = !1,
  sx: o
}) {
  const l = f(c(a)), i = d[t];
  return /* @__PURE__ */ m(
    e,
    {
      sx: {
        display: "inline-flex",
        alignItems: "center",
        gap: 0.75,
        ...typeof o == "object" && !Array.isArray(o) ? o : {}
      },
      children: [
        /* @__PURE__ */ s(
          e,
          {
            sx: {
              width: i,
              height: i,
              borderRadius: "50%",
              backgroundColor: l,
              flexShrink: 0,
              ...n && {
                animation: "ov-pulse 1.5s ease-in-out infinite",
                "@keyframes ov-pulse": {
                  "0%, 100%": { opacity: 1 },
                  "50%": { opacity: 0.4 }
                }
              }
            }
          }
        ),
        r && /* @__PURE__ */ s(
          p,
          {
            variant: "body2",
            sx: {
              fontSize: t === "xs" ? "var(--ov-text-xs)" : "var(--ov-text-sm)",
              color: "var(--ov-fg-default)",
              lineHeight: 1
            },
            children: r
          }
        )
      ]
    }
  );
}
x.displayName = "StatusDot";
export {
  x as S
};
