import { Black } from "../../../Types/BrandColors";
import React from "react";
const Statusbubble = (props) => {
    const backgroundColor = props.color
        ? props.color.toString()
        : Black.toString();
    return (React.createElement("div", { className: "flex", style: props.style, role: "status", "aria-label": `Status: ${props.text}` },
        React.createElement("div", { className: "-mr-2 ml-5", "aria-hidden": "true" },
            React.createElement("span", { className: "relative -left-1 -translate-x-full top-1/2 -translate-y-1/2 flex h-3.5 w-3.5" },
                React.createElement("span", { className: `${props.shouldAnimate ? "motion-safe:animate-ping" : ""} absolute inline-flex h-full w-full rounded-full`, style: {
                        backgroundColor: backgroundColor,
                    } }),
                React.createElement("span", { className: "relative inline-flex rounded-full h-3.5 w-3.5", style: {
                        backgroundColor: backgroundColor,
                    } }))),
        React.createElement("div", { className: "text-sm font-medium", style: {
                color: props.color ? props.color.toString() : Black.toString(),
            } }, props.text)));
};
export default Statusbubble;
//# sourceMappingURL=StatusBubble.js.map