/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1fc5ad1 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { Element } from "../../../tasty/tasty.js";
import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
import { forwardRef } from "react";
import { jsxs } from "react/jsx-runtime";

//#region src/components/content/Avatar/Avatar.tsx
const DEFAULT_STYLES = {
	display: "grid",
	gap: "1x",
	flow: "row",
	fill: "#primary",
	color: "#white",
	radius: "round",
	placeContent: "center",
	width: "$avatar-size $avatar-size $avatar-size",
	height: "$avatar-size $avatar-size $avatar-size",
	fontSize: "calc($avatar-size / 2)",
	lineHeight: "calc($avatar-size / 2)",
	fontWeight: 500
};
const Avatar = forwardRef(function Avatar({ size = "4x", icon, children, ...props }, ref) {
	const styles = extractStyles(props, CONTAINER_STYLES, {
		...DEFAULT_STYLES,
		"--avatar-size": size
	});
	return /* @__PURE__ */ jsxs(Element, {
		...filterBaseProps(props, { eventProps: true }),
		ref,
		styles,
		"data-theme": "special",
		children: [icon, children]
	});
});

//#endregion
export { Avatar };
//# sourceMappingURL=Avatar.js.map