@payfit/unity-illustrations/dist/esm/components/illustration/Illustration.js

import { forwardRef as e, useMemo as t } from "react";
import { useUnityTheme as n, uyTv as r } from "@payfit/unity-themes";
import { jsx as i } from "react/jsx-runtime";
//#region src/components/illustration/Illustration.tsx
var a = r({ base: "uy:object-contain uy:aspect-auto" }), o = r({
	base: "uy:object-contain uy:aspect-square",
	variants: { size: {
		sm: "uy:size-7",
		md: "uy:size-9",
		lg: "uy:size-12"
	} }
}), s = e(({ src: e, alt: r, isDecorative: s = !1, variant: c, className: l, style: u, ...d }, f) => {
	let { theme: p } = n(), m = e.urls?.[p] ?? e.url, h = c === "picture" ? a({ className: l }) : o({
		className: l,
		size: d.size
	}), g = s ? d.description : void 0, { enhancedStyle: _, enhancedClassName: v } = t(() => "category" in e && "dimensions" in e ? {
		enhancedStyle: {
			"--uy-illustration-max-width": `${e.dimensions.width}px`,
			"--uy-illustration-max-height": `${e.dimensions.height}px`,
			...u
		},
		enhancedClassName: `${h} uy:max-w-[var(--uy-illustration-max-width)] uy:max-h-[var(--uy-illustration-max-height)] uy:w-full uy:h-auto`.trim()
	} : {
		enhancedStyle: u,
		enhancedClassName: h
	}, [
		e,
		u,
		h
	]);
	return /* @__PURE__ */ i("img", {
		ref: f,
		src: m,
		alt: s ? "" : r,
		title: s ? void 0 : r,
		className: v,
		style: _,
		role: s ? "presentation" : "img",
		"aria-hidden": s,
		"aria-description": g,
		loading: "lazy",
		...d
	});
});
s.displayName = "Illustration";
//#endregion
export { s as Illustration, o as illustratedIcon, a as illustratedPicture };