@primer/react-brand/esm/Image/Image.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useAnimation as t } from "../animation/useAnimation.js";
import n from "./Image.module.js";
import "react";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
//#region src/Image/Image.tsx
var a = [
	"small",
	"medium",
	"large",
	"xlarge",
	"full"
], o = (e) => {
	if (typeof e == "string") {
		if (e === "custom") return "custom";
		let [t, n] = e.split(":").map(Number);
		return `${t}-${n}`;
	}
}, s = (e, t) => {
	let { [t]: n, ...r } = e;
	return r;
}, c = ({ animate: a, aspectRatio: c, className: l, as: u = "img", ref: d, alt: f, width: p, height: m, media: h, srcSet: g, style: _, borderRadius: v, ...y }) => {
	let { classes: b, styles: x } = t(a);
	return u === "picture" ? /* @__PURE__ */ i("picture", {
		className: e(b, n.Image__container, c && n[`Image--aspect-ratio-${o(c)}`], v && n[`Image--borderRadius-${v}`], l),
		style: {
			...x,
			..._
		},
		children: [
			y.sources && y.sources.map((e, t) => /* @__PURE__ */ r("source", {
				srcSet: e.srcset,
				media: e.media
			}, t)),
			g && /* @__PURE__ */ r("source", {
				srcSet: g,
				media: h
			}),
			/* @__PURE__ */ r("img", {
				ref: d,
				alt: f,
				width: p ?? "100%",
				height: m ?? "100%",
				className: e(n.Image, v && n[`Image--borderRadius-${v}`]),
				...s(y, "sources")
			})
		]
	}) : c ? /* @__PURE__ */ r("span", {
		className: e(n.Image__container, n[`Image--aspect-ratio-${o(c)}`]),
		children: /* @__PURE__ */ r("img", {
			ref: d,
			alt: f,
			width: p || "100%",
			height: m || "100%",
			className: e(b, n.Image, v && n[`Image--borderRadius-${v}`], l),
			srcSet: g,
			style: {
				...x,
				..._
			},
			...y
		})
	}) : /* @__PURE__ */ r("img", {
		ref: d,
		alt: f,
		className: e(b, n.Image, v && n[`Image--borderRadius-${v}`], l),
		width: p && p,
		height: m && m,
		srcSet: g,
		style: {
			...x,
			..._
		},
		...y
	});
};
//#endregion
export { c as Image, a as ImageBorderRadiusOptions };

//# sourceMappingURL=Image.js.map