import { getEllipseColor, getEllipseHintColor } from "../../../utilities/style/utils/styleUtils.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { makeStyles } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/UI/components/dataDisplay/Ellipse.jsx
const useStyles = makeStyles((theme) => ({ root: {
	display: "flex",
	alignItems: "center",
	justifyContent: "center",
	width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
	height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
	borderRadius: 50,
	border: (props) => props.variant === "filled" ? "none" : `2px solid`,
	backgroundColor: (props) => props.variant === "filled" && getEllipseHintColor(theme, props.color),
	borderColor: (props) => getEllipseColor(theme, props.color)
} }));
const Ellipse = (props) => {
	const $ = c(3);
	const { children } = props;
	const classes = useStyles(props);
	let t0;
	if ($[0] !== children || $[1] !== classes.root) {
		t0 = /* @__PURE__ */ React.createElement("div", { className: classes.root }, children);
		$[0] = children;
		$[1] = classes.root;
		$[2] = t0;
	} else t0 = $[2];
	return t0;
};
Ellipse.propTypes = {
	color: PropTypes.string,
	size: PropTypes.string,
	variant: PropTypes.string
};
//#endregion
export { Ellipse };

//# sourceMappingURL=Ellipse.mjs.map