/** @license MIT | @cube-dev/ui-kit v0.142.7 | Cube Dev Team */
import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, memo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/icons/Icon.tsx
const IconElement = tasty({
	as: "span",
	styles: {
		display: "inline-grid",
		placeContent: "center",
		verticalAlign: "sub",
		width: "1em 1em",
		height: "min 1em",
		fontSize: "$icon-size",
		transition: "theme, width, height",
		textAlign: "center",
		textTransform: "none",
		textRendering: "optimizeLegibility",
		"-webkit-font-smoothing": "antialiased",
		Svg: {
			$: "svg",
			transition: "all",
			width: "min 1em",
			height: "1em 1em",
			strokeWidth: "$stroke-width",
			fontSize: "inherit"
		}
	},
	styleProps: [
		...OUTER_STYLES,
		...BASE_STYLES,
		...COLOR_STYLES
	]
});
const Icon = memo(forwardRef(function Icon(props, ref) {
	let { size, styles, stroke, ...rest } = props;
	if (size) styles = {
		...styles,
		fontSize: size
	};
	if (stroke) styles = {
		...styles,
		"$stroke-width": stroke
	};
	return /* @__PURE__ */ jsx(IconElement, {
		ref,
		qa: "Icon",
		...rest,
		styles
	});
}));

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