@astrato-io/visualizations 0.0.0-stage → 0.6.4

package/chunks/standalone-BLVAWLNJ.js

@@ -0,0 +1,385 @@
+import { o as e, r as t } from "./rolldown-runtime-DleVn1XH.js";
+import { Bs as n, Jn as r, Kn as i, No as a, On as o, Po as s, Ta as c, Ti as l, Un as u, Xs as d, Yn as f, bn as p, bo as m, hc as h, mo as g, pc as _, qn as v, qs as y, yo as b, zn as x } from "./interfaces-VUY4_yVO.js";
+import { I as S, Ki as C, P as w, Zt as T, pn as E, wi as ee } from "./utils-Ba9T0TqC.js";
+import { t as D } from "./stroke-dash-UgMEcCS4.js";
+import { t as O } from "./line-settings-DfYTUyPz.js";
+import { B as te, Ct as ne, Dt as re, Et as ie, Ft as k, G as ae, J as oe, Jt as se, Kt as ce, L as le, M as ue, Pt as de, Q as fe, Qt as pe, Rt as A, St as j, Tt as M, U as N, V as P, Wt as F, X as I, Xt as L, Y as R, Yt as z, Z as B, Zt as V, _t as me, an as H, at as he, ct as ge, dt as U, ht as _e, i as ve, j as ye, kt as be, lt as xe, mt as W, n as Se, ot as Ce, pt as G, q as we, rt as Te, st as Ee, un as K, ut as De, vt as Oe } from "./escobar-BGqT1EsE.js";
+import { l as q, vt as J } from "./_baseFlatten-DPXPOrea.js";
+import { _ as Y, c as ke, t as Ae } from "./coloring-C16AUZEi.js";
+import { t as je } from "./set-coloring-datafield-B3uIS1Pe.js";
+var X = /* @__PURE__ */ e(C()), Me = (e) => {
+	let { coloring: t } = e || {}, n = e.dimensions.filter(l);
+	switch (t?.type) {
+		case d.Categorical: return ne(e, [], n[1] || n[0]);
+		case d.Gradient: return M(e);
+		case d.Single: return _(n[0].dataItem);
+		default: return null;
+	}
+}, Ne = (e, t, n) => {
+	let i = e.dimensions.filter(l), a = e.measures.filter(l), s = i[0], c = u(e.lineSettings, e.dimensions, e.measures), d = !1, f = {};
+	if (s && e?.axes?.dimension?.continuousAxis) {
+		let e = h(s.dataItem), t = !!s.datePart, n = e !== null && (o(e) || x(e));
+		d = !t && n;
+	}
+	let p = Me(e);
+	if (f = j(p ? je(e, p) : e, t, f), f = ae(e, f, n.collections, d, !0), c) {
+		let t = a[0]?.secondaryAxis ? e?.axes?.secondaryMeasure : e?.axes?.primaryMeasure;
+		f[L(e, a[0])] = {
+			invert: N(!0, t),
+			data: { collection: "collection" },
+			...P(t)
+		};
+	}
+	return r(e) && a.forEach((e) => {
+		let t = _(e.dataItem);
+		t && (f[pe.YAxisScale]?.data)?.fields?.push(v(t));
+	}), {
+		...n,
+		scales: f
+	};
+}, Pe = (e, t, n, i) => {
+	let a = re(e, t, n, i), o = [], s = e.dimensions.filter(l), c = e.measures.filter(l), d = ue((e.supportingMeasures ?? []).filter(l)), f = u(e.lineSettings, e.dimensions, e.measures), p = r(e);
+	if (a.collections[0]?.data.extract[0] && (a.collections[0].data.extract[0].props = {
+		...a.collections[0].data.extract[0].props,
+		...d
+	}), s.length === 1 && c.length > 1 && f && (a.collections[0].data.extract = c.map((e) => {
+		let t = _(e.dataItem), n = p ? v(t) : t;
+		return {
+			field: _(s[0].dataItem),
+			props: {
+				end: { field: n },
+				series: t,
+				color: t,
+				...d
+			}
+		};
+	})), s[1] && !f) {
+		let e = {
+			key: ie.LineSeries,
+			data: { extract: [{
+				field: _(s[1].dataItem),
+				props: {
+					[_(s[1].dataItem)]: { field: _(s[1].dataItem) },
+					...d
+				}
+			}] }
+		};
+		o.push(e);
+	}
+	return {
+		...a,
+		collections: [...a.collections, ...o]
+	};
+}, Fe = (e, t, r, i, a, o) => {
+	if (!n(e)) return r;
+	let s = e.measures.filter(l);
+	if (u(e.lineSettings, e.dimensions, e.measures)) return r;
+	let c = {}, d = {}, f = te({
+		targetComponentKeys: s.map((t) => {
+			let n = _(t.dataItem), r = W(e, t, y.Point);
+			return d[r] = n, c[r] = {
+				enabled: t.dataLabels?.show || !1,
+				fontSize: se(t.dataLabels?.size),
+				backdropColor: t.dataLabels?.backdropColor,
+				textColor: t.dataLabels?.textColor,
+				isColored: t.dataLabels?.isColored,
+				colorType: t.dataLabels?.showBackdrop ? b.Backdrop : b.Text,
+				density: t.dataLabels?.density || m.Medium
+			}, r;
+		}).filter((e) => c[e].enabled),
+		targetSelector: `.${U}`,
+		label: ({ data: e, node: t }) => e[d[t.key]]?.label,
+		skipBrush: !0
+	}, c, o, t);
+	return {
+		...r,
+		components: [...r.components, f]
+	};
+}, Ie = "line-end-labels", Le = 6, Re = 160, ze = [2, 2], Be = (e) => Object.values(H).includes(e.type) && e.layout?.dock === a.Right, Ve = (e, t, n, r, o, s) => {
+	if (!e.lineSettings?.endLabels?.show || V(e) || u(e.lineSettings, e.dimensions, e.measures)) return n;
+	let c = e.dimensions.filter(l), d = e.measures.filter(l);
+	if (!c[0] || !d.length) return n;
+	let f = c[1], p = f ? _(f.dataItem) : void 0, m = d.length > 1, h = e.lineSettings.endLabels.showBackdrop ?? !1, g = (e.lineSettings.endLabels.position ?? O.Plot) === O.Right, v = t.fonts.general.color ?? J.fontDark, b = ({ node: e }) => e?.attrs?.fill ?? v, x = (e) => new q(b(e)).betterContrast(new q(v), new q(J.fontLight), new q(J.fontDark)).rgb(), S = (e) => {
+		let t = String(e?.label ?? e?.value ?? "");
+		return f?.formatter?.format ? String(E(f.formatter, e?.value)) : t;
+	}, C = d.map((n) => {
+		let r = i(n), a = ({ data: e }) => p ? e?.[p] : void 0;
+		return {
+			component: W(e, n, y.Point),
+			selector: `.${U}`,
+			strategy: {
+				type: "end",
+				settings: {
+					fontFamily: t.fonts.general.fontFamily,
+					fontSize: J.dataPoint.valueFontSize,
+					spacing: !0,
+					label: {
+						series: p,
+						label: p ? (e) => {
+							let t = S(a(e));
+							return m ? `${t} · ${r}` : t;
+						} : () => r,
+						linkData: p ? ({ data: e }) => e : void 0,
+						fontWeight: "bold",
+						offset: Le,
+						maxWidth: Re,
+						...h ? {
+							fill: x,
+							backdrop: (e) => ({
+								fill: b(e),
+								padding: ze
+							})
+						} : {}
+					}
+				}
+			}
+		};
+	}), w = {
+		type: K.Labels,
+		key: Ie,
+		brush: p && !s?.disable?.interactions ? ce(F([""], {
+			...s,
+			disable: { brushing: s?.disable?.brushing }
+		})) : void 0,
+		layout: g ? {
+			dock: a.Right,
+			displayOrder: k.Labels
+		} : { displayOrder: k.Labels },
+		settings: { sources: C }
+	}, T = g ? n.components.map((e) => Be(e) ? {
+		...e,
+		layout: {
+			...e.layout,
+			displayOrder: k.LegendOutsideLabels
+		}
+	} : e) : n.components;
+	return {
+		...n,
+		components: [...T, w]
+	};
+}, He = (e, t, n) => n.components.some((e) => e.key === "line-end-labels") ? {
+	...n,
+	components: n.components.map((e) => {
+		if (e.type !== K.Tooltip || !e.settings?.filter) return e;
+		let t = e.settings.filter;
+		return {
+			...e,
+			settings: {
+				...e.settings,
+				filter: (e) => e.some((e) => e.key === "line-end-labels") ? [] : t(e)
+			}
+		};
+	})
+} : n;
+ke();
+var Ue = (e, t, n, r, i) => {
+	let a = e.dimensions.filter(l), o = e.measures.filter(l), s = a[0], c = o.some((e) => e.forecasts?.length > 0), u = h(s?.dataItem), d = !!s.datePart;
+	return !c || !x(u) || !s || d ? n : [
+		oe,
+		Z,
+		We,
+		Ge,
+		qe,
+		Ke
+	].reduce((n, a) => a(e, t, n, r, i), n);
+}, Z = (e, t, n) => {
+	let r = e.measures.filter(l).filter((e) => !!e.forecasts).reduce((r, i) => {
+		let a = i.forecasts.map((r, a) => {
+			let o = Q(e, t, n, i, r), c = p(i.dataItem, r, `${a}`), l = W(e, i, y.Line, `-forecast-line-${a}`), u = z(e), d = L(e, i);
+			return xe({
+				coordinates: {
+					major: { scale: u },
+					minor: {
+						scale: d,
+						ref: c
+					}
+				},
+				layers: {
+					curve: e.lineSettings?.lineCurve,
+					line: {
+						stroke: o,
+						strokeWidth: r.strokeWidth,
+						strokeDasharray: D(r.strokeDash),
+						show: !0
+					}
+				},
+				orientation: V(e) ? s.Vertical : void 0
+			}, n, c, l);
+		});
+		return [...r, ...a];
+	}, []);
+	return {
+		...n,
+		components: [...r, ...n.components]
+	};
+}, We = (e, t, n) => {
+	let r = e.dimensions.filter(l), i = e.measures.filter(l), a = _(r[0]?.dataItem), o = i.filter((e) => !!e.forecasts).map((r) => r.forecasts.map((i, o) => {
+		let s = Q(e, t, n, r, i), c = p(r.dataItem, i, `${o}`), l = [], u = (e) => e[c]?.value === null || e[_(r.dataItem)]?.value === null;
+		if (_e(n, 0, {
+			[c]: { field: c },
+			[a]: { field: a }
+		}), i.showDataPoints) {
+			let t = W(e, r, y.Point, `-forecast-line-${o}`);
+			l.push(G(e, r, c, s, t, !1, u));
+		}
+		let d = W(e, r, y.Point, `-forecast-line-${o}-tooltip`);
+		return l.push(G(e, r, c, s, d, !0, u)), l;
+	}).reduce((e, t) => [...e, ...t], [])).reduce((e, t) => [...e, ...t], []);
+	return {
+		...n,
+		components: [...n.components, ...o]
+	};
+}, Ge = (e, t, n, r, i) => {
+	let a = e.dimensions.filter(l), o = e.measures.filter(l).find((e) => !!e.forecasts && e.forecasts[0]?.showForecastStart);
+	if (!i || !o) return n;
+	let s = _(a[0].dataItem), c = p(o.dataItem, o.forecasts[0], "0"), u = {
+		value: i[0].items.find((e) => e[c] !== null)[s],
+		label: {
+			text: o.forecasts[0].refLineLabel ?? "",
+			showValue: !1,
+			fill: "#4c4c3e"
+		},
+		stroke: "#96969680"
+	}, d = z(e), f = {
+		type: K.RefLine,
+		layout: { displayOrder: k.ForecastLine },
+		lines: { x: [Ce(u, d, t, a[0].formatter)] }
+	};
+	return {
+		...n,
+		components: [...n.components, f]
+	};
+}, Ke = (e, t, n) => {
+	let r = e.measures.filter(l), i = n.components.find((e) => e.type === H.CategoricalLegend), a = e.coloring?.type;
+	if (!i && !n.scales[a]) return n;
+	let o = { ...n.scales }, s = o[a];
+	return r.forEach((r) => {
+		r.forecasts.forEach((i, a) => {
+			let o = Q(e, t, n, r, i);
+			if (i.label && typeof o == "string") {
+				let e = p(r.dataItem, i, `${a}`);
+				s.data.push(e), (s?.range).push(o);
+			}
+		});
+	}), s.label = (e) => {
+		let t = "";
+		return r.forEach((n) => {
+			_(n.dataItem) === e.datum.value?.toString() ? t = f(n) ?? n.label ?? n.dataItem?.name : n.forecasts.forEach((r, i) => {
+				p(n.dataItem, r, `${i}`) === e.datum.value && (t = r.label ?? "");
+			});
+		}), t;
+	}, {
+		...n,
+		scales: o
+	};
+}, qe = (e, t, n, r, i) => {
+	let a = e.measures.filter(l).reduce((t, n) => {
+		let r = (n.forecasts ?? []).map((t, r) => W(e, n, y.Point, `-forecast-line-${r}-tooltip`));
+		return t.concat(r);
+	}, []);
+	return I(e, t, n, {
+		filter: (e) => e.filter((e) => a.findIndex((t) => t === e.key) !== -1),
+		placement: {
+			type: "pointer",
+			area: "target"
+		},
+		extract: B(e, t, Je, fe)
+	}, `tooltip-${K.Point}-forecast`, i);
+}, Je = (e, t, n, r, i, a, o) => {
+	let s = [];
+	return e.forEach((e) => {
+		e.forecasts.forEach((r, i) => {
+			let a = p(e.dataItem, r, `${i}`), c = t.data[a].value, l = f(e), u = r.label || l || e.label || e.dataItem.name || "", d = c;
+			!o && e.formatter ? d = n.formatter(e.formatter)(c) : o && e.formatter && (d = n.formatter(Te(e.formatter))(c)), s.push({
+				label: u,
+				value: d
+			});
+		});
+	}), s;
+}, Q = (e, t, n, r, i) => {
+	let a = new Ae(e, t).getMeasureColor(n, r);
+	switch (i.inheritColor) {
+		case g.Lighter: return Y(a).brighter().toString();
+		case g.Darker: return Y(a).darker().toString();
+		default: return a;
+	}
+}, Ye = (e, t, n) => we(e, t, n), $ = class extends ye {
+	constructor() {
+		super([
+			Pe,
+			Ne,
+			A,
+			Oe,
+			Ee,
+			ge,
+			me,
+			Fe,
+			Ve,
+			he,
+			R,
+			He,
+			Ye,
+			be,
+			Ue,
+			de,
+			De,
+			le
+		]);
+	}
+};
+function Xe(e, t) {
+	let n = e.dimensions.filter(l).map((e) => _(e.dataItem)), r = n[0], i = e.measures.filter((e) => {
+		let t = e.advancedCalculation;
+		return l(e) && t?.type === "growth" && t.startFromZero && typeof t.offset == "number" && t.offset < 0 && !t.nonTimePeriod;
+	}).map((e) => _(e.dataItem)).filter((e) => e !== null);
+	return !t || !r || i.length === 0 || e.querySettings?.hideZeroValues ? t : t.map((e) => {
+		let t = e.items[0];
+		if (!t || t[r] == null) return e;
+		let a = t[r], o = n.slice(1).filter((e) => e !== null), s = (e) => JSON.stringify(o.map((t) => e[t])), c = /* @__PURE__ */ new Set(), l = e.items.map((e) => e[r] === a ? (c.add(s(e)), {
+			...e,
+			...Object.fromEntries(i.map((e) => [e, 0]))
+		}) : e), u = [];
+		e.items.forEach((t) => {
+			let n = s(t);
+			if (c.has(n)) return;
+			c.add(n);
+			let l = Object.fromEntries(e.fields.map((e) => [e.dataItemId, null]));
+			o.forEach((e) => {
+				l[e] = t[e];
+			}), l[r] = a, i.forEach((e) => {
+				l[e] = 0;
+			}), u.push(l);
+		});
+		let d = l.findIndex((e) => e[r] !== a), f = d === -1 ? l.length : d, p = e.groupings ? Object.fromEntries(Object.entries(e.groupings).map(([e, t]) => [Number(e) < f ? e : Number(e) + u.length, t])) : void 0;
+		return {
+			...e,
+			items: [
+				...l.slice(0, f),
+				...u,
+				...l.slice(f)
+			],
+			...p ? { groupings: p } : {}
+		};
+	});
+}
+var Ze = ee(), Qe = T(({ vSpec: e, vTheme: t, data: n, elementSize: r, vizProperties: i }) => {
+	let a = w(), [o] = (0, X.useState)(() => new $()), s = S(), l = (0, X.useMemo)(() => ({
+		...i,
+		disable: {
+			...i.disable,
+			brushingAxis: !0
+		}
+	}), [i]), u = t || c, d = Se();
+	if (!e || !n || !r) return null;
+	let f = o.compile(e, u, Xe(e, n), r, l, y.Line, a, s, d);
+	return f ? /* @__PURE__ */ (0, Ze.jsx)(ve, {
+		config: i,
+		definition: f,
+		size: r,
+		vSpec: e
+	}) : null;
+}), $e = /* @__PURE__ */ t({
+	LineChart: () => Qe,
+	LineChartCompiler: () => $
+});
+export { $ as n, $e as t };

package/chunks/standalone-BPomtAVs.js

@@ -0,0 +1,2 @@
+import { t as e } from "./view-CLqWMV7Z.js";
+export { e as DatePicker };

package/chunks/standalone-BXyBcUOQ.js

@@ -0,0 +1,2 @@
+import { n as e } from "./standalone-C85u7U6I.js";
+export { e as DistributionGaugeChart };

package/chunks/standalone-BYm1UjLr.js

@@ -0,0 +1,140 @@
+import { o as e } from "./rolldown-runtime-DleVn1XH.js";
+import { Ma as t, Oa as n, n as r } from "./interfaces-VUY4_yVO.js";
+import { G as i, Ki as a, Lr as o, Nn as s, Xi as c, Zt as l, a as u, d, wi as f, xn as p } from "./utils-Ba9T0TqC.js";
+import { t as m } from "./events-WZut5Ow6.js";
+var h = /* @__PURE__ */ e(a());
+h.forwardRef(function(e, t) {
+	return h.createElement("img", {
+		...e,
+		ref: t,
+		src: "data:image/svg+xml,%3Csvg%20width%3D%22177%22%20height%3D%22177%22%20viewBox%3D%220%200%20177%20177%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M177%2041.2427V164.357C177%20167.71%20175.668%20170.926%20173.297%20173.297C170.926%20175.668%20167.71%20177%20164.357%20177H12.6429C9.28976%20177%206.074%20175.668%203.70301%20173.297C1.33201%20170.926%200%20167.71%200%20164.357V12.6429C0%209.28976%201.33201%206.074%203.70301%203.70301C6.074%201.33201%209.28976%200%2012.6429%200L135.757%200C139.11%200%20152.289%2016.5319%20154.66%2018.9029C157.031%2021.2739%20177%2037.8896%20177%2041.2427Z%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2225%22%20y%3D%2225%22%20width%3D%22127%22%20height%3D%22127%22%3E%0A%20%20%20%20%3Crect%20x%3D%2225.2857%22%20y%3D%2225.2857%22%20width%3D%22126.429%22%20height%3D%22126.429%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3C%2Fmask%3E%0A%20%20%3Cg%20mask%3D%22url(%23mask0)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M135.703%20147.315L126.644%20123.059L90.9439%2027.4276C90.4703%2026.1541%2089.227%2025.2857%2087.8653%2025.2857C86.4444%2025.2857%2085.201%2026.0962%2084.7274%2027.3118L61.2231%2083.9847L44.3497%2069.7441C43.3432%2068.8758%2041.8631%2068.7021%2040.679%2069.281C39.4949%2069.8599%2038.7252%2071.0756%2038.8436%2072.407L42.3367%20130.469C42.3959%20131.685%2043.1656%20132.727%2044.2905%20133.248C45.4154%20133.769%2046.7179%20133.595%2047.7244%20132.901L80.287%20108.645L130.493%20150.904C131.144%20151.425%20131.914%20151.714%20132.683%20151.714C133.335%20151.714%20133.986%20151.541%20134.578%20151.135C135.703%20150.267%20136.236%20148.704%20135.703%20147.315ZM58.5589%2090.4103L48.0796%20115.65L45.9482%2079.8167L58.5589%2090.4103ZM53.2896%20120.454L63.8873%2094.9257L75.0178%20104.304L53.2896%20120.454ZM66.5515%2088.5L87.6284%2037.616L104.324%2082.3638L80.4055%20100.136L66.5515%2088.5ZM85.6155%20104.593L106.752%2088.8474L120.369%20125.259L125.046%20137.763L85.6155%20104.593Z%22%20fill%3D%22%23BDBDBD%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M137.419%200H135.757V28.5999C135.757%2031.953%20137.089%2035.1687%20139.46%2037.5397C141.831%2039.9107%20145.047%2041.2427%20148.4%2041.2427H177V39.581L137.419%200Z%22%20fill%3D%22%23E0E0E0%22%2F%3E%0A%3C%2Fsvg%3E%0A"
+	});
+});
+var g = "data:image/svg+xml,%3Csvg%20width%3D%22177%22%20height%3D%22177%22%20viewBox%3D%220%200%20177%20177%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M177%2041.2427V164.357C177%20167.71%20175.668%20170.926%20173.297%20173.297C170.926%20175.668%20167.71%20177%20164.357%20177H12.6429C9.28976%20177%206.074%20175.668%203.70301%20173.297C1.33201%20170.926%200%20167.71%200%20164.357V12.6429C0%209.28976%201.33201%206.074%203.70301%203.70301C6.074%201.33201%209.28976%200%2012.6429%200L135.757%200C139.11%200%20152.289%2016.5319%20154.66%2018.9029C157.031%2021.2739%20177%2037.8896%20177%2041.2427Z%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2225%22%20y%3D%2225%22%20width%3D%22127%22%20height%3D%22127%22%3E%0A%20%20%20%20%3Crect%20x%3D%2225.2857%22%20y%3D%2225.2857%22%20width%3D%22126.429%22%20height%3D%22126.429%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3C%2Fmask%3E%0A%20%20%3Cg%20mask%3D%22url(%23mask0)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M135.703%20147.315L126.644%20123.059L90.9439%2027.4276C90.4703%2026.1541%2089.227%2025.2857%2087.8653%2025.2857C86.4444%2025.2857%2085.201%2026.0962%2084.7274%2027.3118L61.2231%2083.9847L44.3497%2069.7441C43.3432%2068.8758%2041.8631%2068.7021%2040.679%2069.281C39.4949%2069.8599%2038.7252%2071.0756%2038.8436%2072.407L42.3367%20130.469C42.3959%20131.685%2043.1656%20132.727%2044.2905%20133.248C45.4154%20133.769%2046.7179%20133.595%2047.7244%20132.901L80.287%20108.645L130.493%20150.904C131.144%20151.425%20131.914%20151.714%20132.683%20151.714C133.335%20151.714%20133.986%20151.541%20134.578%20151.135C135.703%20150.267%20136.236%20148.704%20135.703%20147.315ZM58.5589%2090.4103L48.0796%20115.65L45.9482%2079.8167L58.5589%2090.4103ZM53.2896%20120.454L63.8873%2094.9257L75.0178%20104.304L53.2896%20120.454ZM66.5515%2088.5L87.6284%2037.616L104.324%2082.3638L80.4055%20100.136L66.5515%2088.5ZM85.6155%20104.593L106.752%2088.8474L120.369%20125.259L125.046%20137.763L85.6155%20104.593Z%22%20fill%3D%22%23BDBDBD%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M137.419%200H135.757V28.5999C135.757%2031.953%20137.089%2035.1687%20139.46%2037.5397C141.831%2039.9107%20145.047%2041.2427%20148.4%2041.2427H177V39.581L137.419%200Z%22%20fill%3D%22%23E0E0E0%22%2F%3E%0A%3C%2Fsvg%3E%0A", _ = (e, t, n) => t?.imageSettings.image?.mediaItemId ? e.daedalus.mediaApi.getUrl(t?.imageSettings.image?.mediaItemId) : t?.imageSettings.image?.imageUrl ? t?.imageSettings.image?.imageUrl : t?.imageSettings.image?.imageVariable && n?.[t?.imageSettings.image?.imageVariable]?.value ? `${n?.[t?.imageSettings.image?.imageVariable]?.value}` : "", v = (e, n, r) => ({
+	imageSrc: _(e, n, r),
+	imageFit: n?.imageSettings.image?.imageFit ?? t.Contain,
+	opacity: n?.imageSettings.opacity ?? 1,
+	saturation: n?.imageSettings.saturation ?? 1,
+	blur: n?.imageSettings.blur ?? 0,
+	shadow: n?.imageSettings.shadow ?? !1
+}), y = i({
+	singleImageContainer: {
+		display: "flex",
+		height: "100%",
+		width: "100%"
+	},
+	previewImageContainer: {
+		display: "flex",
+		height: "100%",
+		width: "100%",
+		justifyContent: "center",
+		alignItems: "center",
+		"& img": {
+			maxWidth: "100%",
+			maxHeight: "100%"
+		}
+	},
+	addGalleryButton: {
+		...r.normal14,
+		padding: "10px 20px",
+		background: n.white,
+		borderRadius: 4,
+		border: `1px solid ${n.grey3}`,
+		color: n.secondaryPurple,
+		cursor: "pointer",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	buttonIcon: { marginRight: 5 }
+}), b = i({
+	mainContainer: {
+		display: "flex",
+		flexDirection: "column",
+		width: "100%",
+		flexGrow: 1,
+		maxHeight: "100%"
+	},
+	imageContainer: {
+		position: "relative",
+		display: "block",
+		width: "100%",
+		flexGrow: 1,
+		maxHeight: "100%"
+	},
+	image: {
+		height: "100%",
+		width: "100%",
+		pointerEvents: "none",
+		objectFit: "contain",
+		position: "absolute",
+		top: 0,
+		left: 0,
+		"&.cover": { objectFit: "cover" },
+		"&.contain": { objectFit: "contain" },
+		"&.fill": { objectFit: "fill" },
+		"&.none": { objectFit: "none" }
+	}
+}), x = f(), S = (e) => s({
+	contain: e === t.Contain,
+	cover: e === t.Cover,
+	fill: e === t.Fill,
+	none: e === t.None
+}), C = ({ imageSrc: e, imageFit: t, opacity: n, saturation: r, blur: i, shadow: a, onLoadCallback: o }) => {
+	let c = b(), l = a ? "drop-shadow(0px 3px 6px rgba(0,0,0,0.25))" : "";
+	return /* @__PURE__ */ (0, x.jsx)("div", {
+		className: c.mainContainer,
+		children: /* @__PURE__ */ (0, x.jsx)("div", {
+			className: c.imageContainer,
+			children: /* @__PURE__ */ (0, x.jsx)("img", {
+				className: s({
+					[c.image]: !0,
+					[S(t)]: !0
+				}),
+				style: {
+					filter: `blur(${i}px) saturate(${r}) ${l}`,
+					opacity: n
+				},
+				alt: "",
+				title: e.trim() ? "" : "Add Image",
+				src: e.trim() || "data:image/svg+xml,%3Csvg%20width%3D%22177%22%20height%3D%22177%22%20viewBox%3D%220%200%20177%20177%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M177%2041.2427V164.357C177%20167.71%20175.668%20170.926%20173.297%20173.297C170.926%20175.668%20167.71%20177%20164.357%20177H12.6429C9.28976%20177%206.074%20175.668%203.70301%20173.297C1.33201%20170.926%200%20167.71%200%20164.357V12.6429C0%209.28976%201.33201%206.074%203.70301%203.70301C6.074%201.33201%209.28976%200%2012.6429%200L135.757%200C139.11%200%20152.289%2016.5319%20154.66%2018.9029C157.031%2021.2739%20177%2037.8896%20177%2041.2427Z%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2225%22%20y%3D%2225%22%20width%3D%22127%22%20height%3D%22127%22%3E%0A%20%20%20%20%3Crect%20x%3D%2225.2857%22%20y%3D%2225.2857%22%20width%3D%22126.429%22%20height%3D%22126.429%22%20fill%3D%22%23F2F2F2%22%2F%3E%0A%20%20%3C%2Fmask%3E%0A%20%20%3Cg%20mask%3D%22url(%23mask0)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M135.703%20147.315L126.644%20123.059L90.9439%2027.4276C90.4703%2026.1541%2089.227%2025.2857%2087.8653%2025.2857C86.4444%2025.2857%2085.201%2026.0962%2084.7274%2027.3118L61.2231%2083.9847L44.3497%2069.7441C43.3432%2068.8758%2041.8631%2068.7021%2040.679%2069.281C39.4949%2069.8599%2038.7252%2071.0756%2038.8436%2072.407L42.3367%20130.469C42.3959%20131.685%2043.1656%20132.727%2044.2905%20133.248C45.4154%20133.769%2046.7179%20133.595%2047.7244%20132.901L80.287%20108.645L130.493%20150.904C131.144%20151.425%20131.914%20151.714%20132.683%20151.714C133.335%20151.714%20133.986%20151.541%20134.578%20151.135C135.703%20150.267%20136.236%20148.704%20135.703%20147.315ZM58.5589%2090.4103L48.0796%20115.65L45.9482%2079.8167L58.5589%2090.4103ZM53.2896%20120.454L63.8873%2094.9257L75.0178%20104.304L53.2896%20120.454ZM66.5515%2088.5L87.6284%2037.616L104.324%2082.3638L80.4055%20100.136L66.5515%2088.5ZM85.6155%20104.593L106.752%2088.8474L120.369%20125.259L125.046%20137.763L85.6155%20104.593Z%22%20fill%3D%22%23BDBDBD%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M137.419%200H135.757V28.5999C135.757%2031.953%20137.089%2035.1687%20139.46%2037.5397C141.831%2039.9107%20145.047%2041.2427%20148.4%2041.2427H177V39.581L137.419%200Z%22%20fill%3D%22%23E0E0E0%22%2F%3E%0A%3C%2Fsvg%3E%0A",
+				onLoad: o,
+				onError: o
+			})
+		})
+	});
+}, w = l(({ vSpec: e }) => {
+	let t = p(), r = y(), { variablesDict: i } = u(), a = v(t, e, i), s = d();
+	return (0, h.useEffect)(() => {
+		(!e || !a.imageSrc) && t.daedalus.objectCapabilities.editable && s();
+	}, [e, a.imageSrc]), !e || !a.imageSrc ? t.daedalus.objectCapabilities.editable ? /* @__PURE__ */ (0, x.jsx)("div", {
+		className: r.previewImageContainer,
+		children: /* @__PURE__ */ (0, x.jsxs)("button", {
+			"data-testid": "open-media-gallery-button",
+			className: r.addGalleryButton,
+			onClick: () => {
+				t.emitEvent(c.SET_PROPERTY_PANEL_OBJECT_TAB, "ITEM"), t.emitEvent(m.OpenMediaPicker);
+			},
+			children: [/* @__PURE__ */ (0, x.jsx)(o, {
+				fill: n.mainDarkNavy,
+				size: 16,
+				className: r.buttonIcon
+			}), "Add from the Gallery"]
+		})
+	}) : /* @__PURE__ */ (0, x.jsx)("div", {
+		className: r.previewImageContainer,
+		children: /* @__PURE__ */ (0, x.jsx)("img", {
+			src: g,
+			alt: "no image",
+			onLoad: s,
+			onError: s
+		})
+	}) : /* @__PURE__ */ (0, x.jsx)("div", {
+		className: r.singleImageContainer,
+		children: /* @__PURE__ */ (0, x.jsx)(C, {
+			...a,
+			onLoadCallback: s
+		})
+	});
+});
+export { w as Image };