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

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