@undp/data-viz 2.5.4 → 2.6.1

package/dist/BarGraph-DQogcvkF.js

@@ -0,0 +1,2177 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { l as n, u as r } from "./Icons-BLXwPP3h.js";
+import { Colors as i } from "./Colors.js";
+import { GraphFooter as ee } from "./GraphFooter.js";
+import { GraphHeader as a } from "./GraphHeader.js";
+import { t as o } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { t as s } from "./lodash.sum-CX6zs3_n.js";
+import { t as c } from "./uniqBy-feeqYuys.js";
+import { n as l, t as u } from "./GraphContainer-DgEB1AVN.js";
+import { n as d, t as f } from "./parse-5MWhaq6h.js";
+import { t as p } from "./lodash.orderby-Dn2sr3tw.js";
+import { ColorLegendWithMouseOver as te } from "./ColorLegendWithMouseOver.js";
+import { t as m } from "./EmptyState-DBmT1Adf.js";
+import { o as h, t as ne } from "./ensureCompleteData-VxAHq-s7.js";
+import { t as re } from "./getSliderMarks-CTKVxOEm.js";
+import { t as ie } from "./linear-BkosG4OK.js";
+import { t as ae } from "./band-XivI9IHG.js";
+import { t as oe } from "./fast-deep-equal--80N92KJ.js";
+import { t as g } from "./proxy-BiRrIImK.js";
+import { t as se } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as ce } from "./use-in-view-CjlKdln1.js";
+import { t as le } from "./Axis-B3ai1eeP.js";
+import { t as ue } from "./AxisTitle-DqJw_G-f.js";
+import { t as _ } from "./XAxesLabels-DIs04SK7.js";
+import { t as de } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as v } from "./XTicksAndGridLines-B2XZgwzW.js";
+import { t as fe } from "./YAxesLabels-voV_CThY.js";
+import { t as pe } from "./YTicksAndGridLines-CVTzNJYP.js";
+import { t as me } from "./DetailsModal-DxUowfkg.js";
+import { n as he, t as ge } from "./ReferenceLine-C8owKJx1.js";
+import { t as _e } from "./Tooltip-Y6uTGwkF.js";
+import { t as y } from "./getTextColorBasedOnBgColor-Ch7uw_Px.js";
+import { cn as ve } from "@undp/design-system-react/cn";
+import { useEffect as b, useMemo as ye, useRef as be, useState as x } from "react";
+import { SliderUI as xe } from "@undp/design-system-react/SliderUI";
+//#region src/Components/Graphs/BarGraph/GroupedBarGraph/Graph.tsx
+var S = /* @__PURE__ */ e(s(), 1), Se = /* @__PURE__ */ e(p(), 1), Ce = /* @__PURE__ */ e(oe(), 1), C = t();
+function we(e) {
+	let { data: t, leftMargin: n = 100, rightMargin: r = 40, topMargin: i = 25, bottomMargin: ee = 10, barColors: a, barPadding: s, showTicks: c, truncateBy: l, width: u, height: d, suffix: f, prefix: p, showValues: te, showLabels: m, tooltip: h, onSeriesMouseOver: ne, refValues: re, maxValue: oe, minValue: _, onSeriesMouseClick: pe, selectedColor: he, rtl: y, labelOrder: b, maxBarThickness: xe, resetSelectionOnDoubleClick: S, detailsOnClick: Se, barAxisTitle: we, valueColor: Te, noOfTicks: w, styles: T, classNames: E, animate: D, colorDomain: O, precision: k, customLayers: A, naLabel: j, hideAxisLine: M, locale: N, padZeros: Ee } = e, P = be(null), F = ce(P, {
+		once: D.once,
+		amount: D.amount
+	}), I = {
+		top: we ? i + 25 : i,
+		bottom: ee,
+		left: n,
+		right: r
+	}, [L, R] = x(void 0), [z, B] = x(void 0), [De, Oe] = x(void 0), [V, H] = x(void 0), U = u - I.left - I.right, W = d - I.top - I.bottom, ke = ye(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = b ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = b ? b.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			size: Array(t[0].size.length).fill(null)
+		}))];
+	}, [t, b]), G = ye(() => b ?? ke.map((e) => `${e.id}`), [b, ke]), K = ie().domain([_, oe]).range([0, U]).nice(), q = ae().domain(G).range([0, xe ? Math.min(W, xe * G.length) : W]).paddingInner(s), J = ae().domain(t[0].size.map((e, t) => `${t}`)).range([0, q.bandwidth()]).paddingInner(.1), Y = K.ticks(w);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			ref: P,
+			width: `${u}px`,
+			height: `${d}px`,
+			viewBox: `0 0 ${u} ${d}`,
+			direction: "ltr",
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${I.left},${I.top})`,
+				children: [
+					c ? /* @__PURE__ */ (0, C.jsx)(v, {
+						values: Y.filter((e) => e !== 0),
+						x: Y.filter((e) => e !== 0).map((e) => K(e)),
+						y1: 0 - i,
+						y2: W + I.bottom,
+						styles: {
+							gridLines: T?.xAxis?.gridLines,
+							labels: T?.xAxis?.labels
+						},
+						classNames: {
+							gridLines: E?.xAxis?.gridLines,
+							labels: E?.xAxis?.labels
+						},
+						suffix: f,
+						prefix: p,
+						labelType: "secondary",
+						showGridLines: !0,
+						precision: k,
+						locale: N,
+						padZeros: Ee
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: U / 2,
+						y: 0 - I.top + 15,
+						style: T?.xAxis?.title,
+						className: E?.xAxis?.title,
+						text: we
+					}),
+					A.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [
+						ke.map((e) => o(q(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+							variants: {
+								initial: {
+									x: 0,
+									y: q(`${e.id}`)
+								},
+								whileInView: {
+									x: 0,
+									y: q(`${e.id}`),
+									transition: { duration: D.duration }
+								}
+							},
+							initial: "initial",
+							animate: F ? "whileInView" : "initial",
+							exit: {
+								opacity: 0,
+								transition: { duration: D.duration }
+							},
+							children: [e.size.map((t, n) => /* @__PURE__ */ (0, C.jsxs)(g.g, {
+								className: "undp-viz-g-with-hover",
+								opacity: he ? a[n] === he ? 1 : .3 : .85,
+								onMouseEnter: (t) => {
+									R({
+										...e,
+										sizeIndex: n
+									}), H(t.clientY), Oe(t.clientX), ne?.({
+										...e,
+										sizeIndex: n
+									});
+								},
+								onMouseMove: (t) => {
+									R({
+										...e,
+										sizeIndex: n
+									}), H(t.clientY), Oe(t.clientX);
+								},
+								onMouseLeave: () => {
+									R(void 0), Oe(void 0), H(void 0), ne?.(void 0);
+								},
+								onClick: () => {
+									(pe || Se) && ((0, Ce.default)(z, {
+										...e,
+										sizeIndex: n
+									}) && S ? (B(void 0), pe?.(void 0)) : (B({
+										...e,
+										sizeIndex: n
+									}), pe && pe({
+										...e,
+										sizeIndex: n
+									})));
+								},
+								children: [o(t) ? null : /* @__PURE__ */ (0, C.jsx)(g.rect, {
+									y: J(`${n}`),
+									variants: {
+										initial: {
+											width: 0,
+											x: K(0),
+											fill: a[n]
+										},
+										whileInView: {
+											width: o(t) ? 0 : t >= 0 ? K(t) - K(0) : K(0) - K(t),
+											x: K(t >= 0 ? 0 : t),
+											fill: a[n],
+											transition: { duration: D.duration }
+										}
+									},
+									exit: {
+										width: 0,
+										x: K(0),
+										transition: { duration: D.duration }
+									},
+									height: J.bandwidth(),
+									initial: "initial",
+									animate: F ? "whileInView" : "initial"
+								}), te ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+									y: J(`${n}`) + J.bandwidth() / 2,
+									style: {
+										textAnchor: t && t < 0 ? "end" : "start",
+										...T?.graphObjectValues || {}
+									},
+									className: ve("graph-value text-sm", E?.graphObjectValues),
+									dx: t && t < 0 ? -5 : 5,
+									dy: "0.33em",
+									variants: {
+										initial: {
+											x: K(0),
+											opacity: 0,
+											fill: Te || a[n]
+										},
+										whileInView: {
+											x: K(t || 0),
+											opacity: 1,
+											fill: Te || a[n],
+											transition: { duration: D.duration }
+										}
+									},
+									initial: "initial",
+									animate: F ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: D.duration }
+									},
+									children: de(t, j, k, p, f, N, Ee)
+								}) : null]
+							}, `${e.label}-${O[n] || n}`)), m ? /* @__PURE__ */ (0, C.jsx)(fe, {
+								value: `${e.label}`.length < l ? `${e.label}` : `${`${e.label}`.substring(0, l)}...`,
+								y: 0,
+								x: 0 - I.left,
+								width: K(_ < 0 ? 0 : _) + I.left,
+								height: q.bandwidth(),
+								style: T?.yAxis?.labels,
+								className: E?.yAxis?.labels,
+								animate: D,
+								isInView: F
+							}) : null]
+						}, e.label)),
+						/* @__PURE__ */ (0, C.jsx)(le, {
+							x1: K(_ < 0 ? 0 : _),
+							x2: K(_ < 0 ? 0 : _),
+							y1: -2.5,
+							y2: W + I.bottom,
+							classNames: { axis: E?.yAxis?.axis },
+							styles: { axis: T?.yAxis?.axis },
+							hideAxisLine: M
+						}),
+						re?.map((e) => /* @__PURE__ */ (0, C.jsx)(ge, {
+							text: e.text,
+							color: e.color,
+							x: K(e.value),
+							y1: 0 - I.top,
+							y2: W + I.bottom,
+							textSide: K(e.value) > U * .75 || y ? "left" : "right",
+							classNames: e.classNames,
+							styles: e.styles,
+							animate: D,
+							isInView: F
+						}, e.text))
+					] }),
+					A.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		L && h && De && V ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: L,
+			body: h,
+			xPos: De,
+			yPos: V,
+			backgroundStyle: T?.tooltip,
+			className: E?.tooltip
+		}) : null,
+		Se && z !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: Se,
+			data: z,
+			setData: B,
+			className: E?.modal
+		}) : null
+	] });
+}
+function Te(e) {
+	let { data: t, leftMargin: n = 20, rightMargin: r = 20, topMargin: i = 20, bottomMargin: ee = 25, width: a, height: s, barColors: c, suffix: l, prefix: u, barPadding: d, showLabels: f, showValues: p, showTicks: te, truncateBy: m, tooltip: h, onSeriesMouseOver: ne, refValues: re, maxValue: oe, minValue: v, onSeriesMouseClick: fe, selectedColor: ge, labelOrder: y, maxBarThickness: b, resetSelectionOnDoubleClick: xe, detailsOnClick: S, barAxisTitle: Se, valueColor: we, noOfTicks: Te, styles: w, classNames: T, animate: E, colorDomain: D, precision: O, customLayers: k, naLabel: A, hideAxisLine: j, locale: M, padZeros: N } = e, Ee = be(null), P = ce(Ee, {
+		once: E.once,
+		amount: E.amount
+	}), F = {
+		top: i,
+		bottom: ee,
+		left: Se ? n + 30 : n,
+		right: r
+	}, [I, L] = x(void 0), [R, z] = x(void 0), [B, De] = x(void 0), [Oe, V] = x(void 0), H = a - F.left - F.right, U = s - F.top - F.bottom, W = ye(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = y ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = y ? y.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			size: Array(t[0].size.length).fill(null)
+		}))];
+	}, [t, y]), ke = ye(() => y ?? W.map((e) => `${e.id}`), [y, W]), G = ie().domain([v, oe]).range([U, 0]).nice(), K = ae().domain(ke).range([0, b ? Math.min(H, b * ke.length) : H]).paddingInner(d), q = ae().domain(t[0].size.map((e, t) => `${t}`)).range([0, K.bandwidth()]).paddingInner(.1), J = G.ticks(Te);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			width: `${a}px`,
+			height: `${s}px`,
+			viewBox: `0 0 ${a} ${s}`,
+			direction: "ltr",
+			ref: Ee,
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${F.left},${F.top})`,
+				children: [
+					/* @__PURE__ */ (0, C.jsx)(le, {
+						y1: G(v < 0 ? 0 : v),
+						y2: G(v < 0 ? 0 : v),
+						x1: 0 - n,
+						x2: H + F.right,
+						label: te ? de(v < 0 ? 0 : v, A, O, u, l, M, N) : void 0,
+						hideAxisLine: j,
+						labelPos: {
+							x: 0 - n,
+							dx: 0,
+							dy: oe < 0 ? "1em" : -5,
+							y: G(v < 0 ? 0 : v)
+						},
+						classNames: {
+							axis: T?.xAxis?.axis,
+							label: T?.yAxis?.labels
+						},
+						styles: {
+							axis: w?.xAxis?.axis,
+							label: w?.yAxis?.labels
+						}
+					}),
+					te ? /* @__PURE__ */ (0, C.jsx)(pe, {
+						values: J.filter((e) => e !== 0),
+						y: J.filter((e) => e !== 0).map((e) => G(e)),
+						x1: 0 - n,
+						x2: H + F.right,
+						styles: {
+							gridLines: w?.yAxis?.gridLines,
+							labels: w?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: T?.yAxis?.gridLines,
+							labels: T?.yAxis?.labels
+						},
+						suffix: l,
+						prefix: u,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: O,
+						locale: M,
+						padZeros: N
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: 0 - n - 15,
+						y: U / 2,
+						style: w?.yAxis?.title,
+						className: T?.yAxis?.title,
+						text: Se,
+						rotate90: !0
+					}),
+					k.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [W.map((e) => o(K(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+						variants: {
+							initial: {
+								x: K(`${e.id}`),
+								y: 0
+							},
+							whileInView: {
+								x: K(`${e.id}`),
+								y: 0,
+								transition: { duration: E.duration }
+							}
+						},
+						initial: "initial",
+						animate: P ? "whileInView" : "initial",
+						exit: {
+							opacity: 0,
+							transition: { duration: E.duration }
+						},
+						children: [e.size.map((t, n) => /* @__PURE__ */ (0, C.jsxs)(g.g, {
+							className: "undp-viz-g-with-hover",
+							opacity: ge ? c[n] === ge ? 1 : .3 : .85,
+							onMouseEnter: (t) => {
+								L({
+									...e,
+									sizeIndex: n
+								}), V(t.clientY), De(t.clientX), ne?.({
+									...e,
+									sizeIndex: n
+								});
+							},
+							onMouseMove: (t) => {
+								L({
+									...e,
+									sizeIndex: n
+								}), V(t.clientY), De(t.clientX);
+							},
+							onMouseLeave: () => {
+								L(void 0), De(void 0), V(void 0), ne?.(void 0);
+							},
+							onClick: () => {
+								(fe || S) && ((0, Ce.default)(R, {
+									...e,
+									sizeIndex: n
+								}) && xe ? (z(void 0), fe?.(void 0)) : (z({
+									...e,
+									sizeIndex: n
+								}), fe && fe({
+									...e,
+									sizeIndex: n
+								})));
+							},
+							children: [/* @__PURE__ */ (0, C.jsx)(g.rect, {
+								x: q(`${n}`),
+								width: q.bandwidth(),
+								variants: {
+									initial: {
+										height: 0,
+										y: G(0),
+										fill: c[n]
+									},
+									whileInView: {
+										height: o(t) ? 0 : Math.abs(G(t) - G(0)),
+										y: o(t) ? G(0) : G(t > 0 ? t : 0),
+										fill: c[n],
+										transition: { duration: E.duration }
+									}
+								},
+								exit: {
+									height: 0,
+									y: G(0),
+									transition: { duration: E.duration }
+								},
+								initial: "initial",
+								animate: P ? "whileInView" : "initial"
+							}), p ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+								x: q(`${n}`) + q.bandwidth() / 2,
+								style: {
+									textAnchor: "middle",
+									...w?.graphObjectValues || {}
+								},
+								className: ve("graph-value text-sm", T?.graphObjectValues),
+								dy: t ? t >= 0 ? "-5px" : "1em" : "-5px",
+								variants: {
+									initial: {
+										y: G(0),
+										opacity: 0,
+										fill: we || c[n]
+									},
+									whileInView: {
+										y: G(t || 0),
+										opacity: 1,
+										fill: we || c[n],
+										transition: { duration: E.duration }
+									}
+								},
+								initial: "initial",
+								animate: P ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: E.duration }
+								},
+								children: de(t, A, O, u, l, M, N)
+							}) : null]
+						}, `${e.label}-${D[n] || n}`)), f ? /* @__PURE__ */ (0, C.jsx)(_, {
+							value: `${e.label}`.length < m ? `${e.label}` : `${`${e.label}`.substring(0, m)}...`,
+							y: G(0) + 5,
+							x: 0,
+							width: K.bandwidth(),
+							height: F.bottom,
+							style: w?.xAxis?.labels,
+							className: T?.xAxis?.labels,
+							alignment: "top",
+							animate: E,
+							isInView: P
+						}) : null]
+					}, e.label)), re?.map((e) => /* @__PURE__ */ (0, C.jsx)(he, {
+						text: e.text,
+						color: e.color,
+						y: G(e.value),
+						x1: 0 - n,
+						x2: H + F.right,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: E,
+						isInView: P
+					}, e.text))] }),
+					k.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		I && h && B && Oe ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: I,
+			body: h,
+			xPos: B,
+			yPos: Oe,
+			backgroundStyle: w?.tooltip,
+			className: T?.tooltip
+		}) : null,
+		S && R !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: S,
+			data: R,
+			setData: z,
+			className: T?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/GroupedBarGraph/index.tsx
+function w(e) {
+	let { data: t, graphTitle: s, colors: c = i.light.categoricalColors.colors, sources: p, graphDescription: ne, barPadding: ie = .25, showTicks: ae = !0, truncateBy: oe = 999, height: g, width: se, footNote: ce, colorDomain: le, colorLegendTitle: ue, suffix: _ = "", prefix: de = "", showValues: v = !0, showColorScale: fe = !0, padding: pe, backgroundColor: me = !1, leftMargin: he, rightMargin: ge, topMargin: _e, bottomMargin: y, showLabels: ve = !0, relativeHeight: Ce, tooltip: w, onSeriesMouseOver: T, refValues: E, graphID: D, maxValue: O, minValue: k, onSeriesMouseClick: A, graphDownload: j = !1, dataDownload: M = !1, language: N = "en", labelOrder: Ee, minHeight: P = 0, theme: F = "light", maxBarThickness: I, ariaLabel: L, resetSelectionOnDoubleClick: R = !0, detailsOnClick: z, barAxisTitle: B, noOfTicks: De = 5, valueColor: Oe, styles: V, classNames: H, filterNA: U = !0, animate: W = !1, precision: ke = 2, customLayers: G = [], timeline: K = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, naLabel: q = "NA", sortParameter: J, sortData: Y, orientation: X = "vertical", hideAxisLine: Z = !1, locale: Q = "en", padZeros: Ae = !1 } = e, je = X === "horizontal" ? we : Te, [Me, Ne] = x(0), [Pe, Fe] = x(0), [Ie, Le] = x(K.autoplay), Re = ye(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => f(`${e.date}`, K.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, K.dateFormat]), [$, ze] = x(K.autoplay ? 0 : Re.length - 1), [Be, Ve] = x(void 0), He = be(null), Ue = be(null);
+	b(() => {
+		let e = new ResizeObserver((e) => {
+			Ne(e[0].target.clientWidth || 620), Fe(e[0].target.clientHeight || 480);
+		});
+		return He.current && e.observe(He.current), () => e.disconnect();
+	}, []), b(() => {
+		let e = setInterval(() => {
+			ze((e) => e < Re.length - 1 ? e + 1 : 0);
+		}, (K.speed || 2) * 1e3);
+		return Ie || clearInterval(e), () => clearInterval(e);
+	}, [
+		Re,
+		Ie,
+		K.speed
+	]);
+	let We = re(Re, $, K.showOnlyActiveDate, K.dateFormat || "yyyy");
+	return /* @__PURE__ */ (0, C.jsxs)(l, {
+		className: H?.graphContainer,
+		style: V?.graphContainer,
+		id: D,
+		ref: Ue,
+		"aria-label": L,
+		backgroundColor: me,
+		theme: F,
+		language: N,
+		minHeight: P,
+		width: se,
+		height: g,
+		relativeHeight: Ce,
+		padding: pe,
+		children: [
+			s || ne || j || M ? /* @__PURE__ */ (0, C.jsx)(a, {
+				styles: {
+					title: V?.title,
+					description: V?.description
+				},
+				classNames: {
+					title: H?.title,
+					description: H?.description
+				},
+				graphTitle: s,
+				graphDescription: ne,
+				width: se,
+				graphDownload: j ? Ue : void 0,
+				dataDownload: M ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			K.enabled && Re.length > 0 && We ? /* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "flex gap-6 items-center",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, C.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						Le(!Ie);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": Ie ? "Click to pause animation" : "Click to play animation",
+					children: Ie ? /* @__PURE__ */ (0, C.jsx)(n, {}) : /* @__PURE__ */ (0, C.jsx)(r, {})
+				}), /* @__PURE__ */ (0, C.jsx)(xe, {
+					min: Re[0],
+					max: Re[Re.length - 1],
+					marks: We,
+					step: null,
+					defaultValue: Re[Re.length - 1],
+					value: Re[$],
+					onChangeComplete: (e) => {
+						ze(Re.indexOf(e));
+					},
+					onChange: (e) => {
+						ze(Re.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			/* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "grow flex flex-col justify-center gap-3 w-full",
+				children: [fe && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(te, {
+					width: se,
+					colorDomain: le,
+					colors: c,
+					colorLegendTitle: ue,
+					setSelectedColor: Ve,
+					showNAColor: !1,
+					className: H?.colorLegend
+				}) : null, /* @__PURE__ */ (0, C.jsxs)(u, {
+					ref: He,
+					children: [t.length === 0 && /* @__PURE__ */ (0, C.jsx)(m, {}), Me && Pe && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(je, {
+						hideAxisLine: Z,
+						data: J === void 0 ? h(t, K.dateFormat || "yyyy").filter((e) => K.enabled ? `${e.date}` === d(new Date(Re[$]), K.dateFormat || "yyyy") : e).filter((e) => U ? !e.size.every((e) => e == null) : e) : J === "total" ? (0, Se.default)(h(t, K.dateFormat || "yyyy").filter((e) => K.enabled ? `${e.date}` === d(new Date(Re[$]), K.dateFormat || "yyyy") : e).filter((e) => U ? !e.size.every((e) => e == null) : e), (e) => (0, S.default)(e.size.filter((e) => !o(e))), [Y || "asc"]) : (0, Se.default)(h(t, K.dateFormat || "yyyy").filter((e) => K.enabled ? `${e.date}` === d(new Date(Re[$]), K.dateFormat || "yyyy") : e).filter((e) => U ? !e.size.every((e) => e == null) : e), (e) => o(e.size[J]) ? -Infinity : e.size[J], [Y || "asc"]),
+						barColors: c,
+						width: Me,
+						height: Pe,
+						suffix: _,
+						prefix: de,
+						showValues: v,
+						barPadding: ie,
+						showTicks: ae,
+						leftMargin: he,
+						rightMargin: ge,
+						topMargin: _e,
+						bottomMargin: y,
+						truncateBy: oe,
+						showLabels: ve,
+						tooltip: w,
+						onSeriesMouseOver: T,
+						refValues: E,
+						maxValue: o(O) ? Math.max(...t.map((e) => Math.max(...e.size.filter((e) => !o(e))))) < 0 ? 0 : Math.max(...t.map((e) => Math.max(...e.size.filter((e) => !o(e))))) : O,
+						minValue: o(k) ? Math.min(...t.map((e) => Math.min(...e.size.filter((e) => !o(e))))) >= 0 ? 0 : Math.min(...t.map((e) => Math.min(...e.size.filter((e) => !o(e))))) : k,
+						onSeriesMouseClick: A,
+						selectedColor: Be,
+						labelOrder: Ee,
+						rtl: N === "he" || N === "ar",
+						maxBarThickness: I,
+						resetSelectionOnDoubleClick: R,
+						detailsOnClick: z,
+						barAxisTitle: B,
+						noOfTicks: De,
+						valueColor: Oe,
+						styles: V,
+						classNames: H,
+						colorDomain: le,
+						animate: W === !0 ? {
+							duration: .5,
+							once: !0,
+							amount: .5
+						} : W || {
+							duration: 0,
+							once: !0,
+							amount: 0
+						},
+						precision: ke,
+						customLayers: G,
+						naLabel: q,
+						locale: Q,
+						padZeros: Ae
+					}) : null]
+				})]
+			}),
+			p || ce ? /* @__PURE__ */ (0, C.jsx)(ee, {
+				styles: {
+					footnote: V?.footnote,
+					source: V?.source
+				},
+				classNames: {
+					footnote: H?.footnote,
+					source: H?.source
+				},
+				sources: p,
+				footNote: ce,
+				width: se
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/SimpleBarGraph/Graph.tsx
+function T(e) {
+	let { data: t, barColor: n, suffix: r, prefix: ee, barPadding: a, showValues: s, showTicks: c, truncateBy: l, width: u, height: d, colorDomain: f, topMargin: p = 25, bottomMargin: te = 10, leftMargin: m = 100, rightMargin: h = 40, showLabels: ne, tooltip: re, onSeriesMouseOver: oe, refValues: _, selectedColor: pe, highlightedDataPoints: he, maxValue: y, minValue: b, onSeriesMouseClick: xe, labelOrder: S, rtl: Se, maxBarThickness: we, minBarThickness: Te, resetSelectionOnDoubleClick: w, detailsOnClick: T, barAxisTitle: E, valueColor: D, noOfTicks: O, styles: k, classNames: A, animate: j, dimmedOpacity: M, precision: N, customLayers: Ee, naLabel: P, trackColor: F, hideAxisLine: I, locale: L, padZeros: R } = e, z = be(null), B = ce(z, {
+		once: j.once,
+		amount: j.amount
+	}), [De, Oe] = x(void 0), [V, H] = x(void 0), [U, W] = x(void 0), [ke, G] = x(void 0), K = {
+		top: E ? p + 25 : p,
+		bottom: te,
+		left: m,
+		right: h
+	}, q = u - K.left - K.right, J = d - K.top - K.bottom, Y = ye(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = S ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = S ? S.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			color: null,
+			size: null
+		}))];
+	}, [t, S]), X = ye(() => S ?? Y.map((e) => `${e.id}`), [S, Y]), Z = ie().domain([b, y]).range([0, q]).nice(), Q = ae().domain(X).range([0, Te ? Math.max(J, Te * X.length) : we ? Math.min(J, we * X.length) : J]).paddingInner(a), Ae = Z.ticks(O);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			ref: z,
+			width: `${u}px`,
+			height: `${d}px`,
+			viewBox: `0 0 ${u} ${d}`,
+			direction: "ltr",
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${K.left},${K.top})`,
+				children: [
+					c ? /* @__PURE__ */ (0, C.jsx)(v, {
+						values: Ae.filter((e) => e !== 0),
+						x: Ae.filter((e) => e !== 0).map((e) => Z(e)),
+						y1: 0 - p,
+						y2: J + K.bottom,
+						styles: {
+							gridLines: k?.xAxis?.gridLines,
+							labels: k?.xAxis?.labels
+						},
+						classNames: {
+							gridLines: A?.xAxis?.gridLines,
+							labels: A?.xAxis?.labels
+						},
+						suffix: r,
+						prefix: ee,
+						labelType: "secondary",
+						showGridLines: !0,
+						precision: N,
+						locale: L,
+						padZeros: R
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: q / 2,
+						y: 0 - K.top + 15,
+						style: k?.xAxis?.title,
+						className: A?.xAxis?.title,
+						text: E
+					}),
+					Ee.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [
+						Y.map((e) => o(Q(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+							className: "undp-viz-g-with-hover",
+							variants: {
+								initial: { opacity: pe ? e.color && n[f.indexOf(e.color)] === pe ? 1 : M : he && he.indexOf(e.label) === -1 ? M : .85 },
+								whileInView: {
+									opacity: pe ? e.color && n[f.indexOf(e.color)] === pe ? 1 : M : he && he.indexOf(e.label) === -1 ? M : .85,
+									transition: { duration: j.duration }
+								}
+							},
+							initial: "initial",
+							animate: B ? "whileInView" : "initial",
+							exit: {
+								opacity: 0,
+								transition: { duration: j.duration }
+							},
+							onMouseEnter: (t) => {
+								Oe(e), G(t.clientY), W(t.clientX), oe?.(e);
+							},
+							onClick: () => {
+								(xe || T) && ((0, Ce.default)(V, e) && w ? (H(void 0), xe?.(void 0)) : (H(e), xe?.(e)));
+							},
+							onMouseMove: (t) => {
+								Oe(e), G(t.clientY), W(t.clientX);
+							},
+							onMouseLeave: () => {
+								Oe(void 0), W(void 0), G(void 0), oe?.(void 0);
+							},
+							children: [
+								F && /* @__PURE__ */ (0, C.jsx)(g.rect, {
+									height: Q.bandwidth(),
+									variants: {
+										initial: {
+											width: q,
+											x: 0,
+											y: Q(`${e.id}`),
+											fill: F
+										},
+										whileInView: {
+											width: q,
+											x: 0,
+											y: Q(`${e.id}`),
+											fill: F
+										}
+									},
+									initial: "initial",
+									animate: B ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: j.duration }
+									}
+								}),
+								e.size ? /* @__PURE__ */ (0, C.jsx)(g.rect, {
+									variants: {
+										initial: {
+											width: 0,
+											x: Z(0),
+											y: Q(`${e.id}`),
+											fill: t.filter((e) => e.color).length === 0 ? n[0] : e.color ? n[f.indexOf(e.color)] : i.gray
+										},
+										whileInView: {
+											width: e.size >= 0 ? Z(e.size) - Z(0) : Z(0) - Z(e.size),
+											x: e.size >= 0 ? Z(0) : Z(e.size),
+											y: Q(`${e.id}`),
+											fill: t.filter((e) => e.color).length === 0 ? n[0] : e.color ? n[f.indexOf(e.color)] : i.gray,
+											transition: { duration: j.duration }
+										}
+									},
+									initial: "initial",
+									animate: B ? "whileInView" : "initial",
+									exit: {
+										width: 0,
+										x: Z(0),
+										transition: { duration: j.duration }
+									},
+									height: Q.bandwidth()
+								}) : null,
+								ne ? /* @__PURE__ */ (0, C.jsx)(fe, {
+									value: `${e.label}`.length < l ? `${e.label}` : `${`${e.label}`.substring(0, l)}...`,
+									y: Q(e.id) || 0,
+									x: (e.size || 0) < 0 ? Z(0) : 0 - K.left,
+									width: (e.size || 0) < 0 ? u - Z(0) : Z(0) + K.left,
+									height: Q.bandwidth(),
+									alignment: e.size && e.size < 0 ? "left" : "right",
+									style: k?.yAxis?.labels,
+									className: A?.yAxis?.labels,
+									animate: j,
+									isInView: B
+								}) : null,
+								s ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+									style: {
+										textAnchor: e.size && e.size < 0 ? "end" : "start",
+										...k?.graphObjectValues || {}
+									},
+									className: ve("graph-value text-sm", !D && n.length > 1 ? " fill-primary-gray-600 dark:fill-primary-gray-300" : "", A?.graphObjectValues),
+									dx: e.size && e.size < 0 ? -5 : 5,
+									dy: "0.33em",
+									variants: {
+										initial: {
+											x: Z(0),
+											y: Q(`${e.id}`) + Q.bandwidth() / 2,
+											opacity: 0,
+											fill: D || (t.filter((e) => e.color).length === 0 ? n[0] : e.color ? n[f.indexOf(e.color)] : i.gray)
+										},
+										whileInView: {
+											x: e.size ? Z(e.size) : Z(0),
+											opacity: 1,
+											y: Q(`${e.id}`) + Q.bandwidth() / 2,
+											fill: D || (t.filter((e) => e.color).length === 0 ? n[0] : e.color ? n[f.indexOf(e.color)] : i.gray),
+											transition: { duration: j.duration }
+										}
+									},
+									initial: "initial",
+									animate: B ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: j.duration }
+									},
+									children: de(e.size, P, N, ee, r, L, R)
+								}) : null
+							]
+						}, e.label)),
+						/* @__PURE__ */ (0, C.jsx)(le, {
+							hideAxisLine: I,
+							x1: Z(b < 0 ? 0 : b),
+							x2: Z(b < 0 ? 0 : b),
+							y1: -2.5,
+							y2: J + K.bottom,
+							classNames: { axis: A?.yAxis?.axis },
+							styles: { axis: k?.yAxis?.axis }
+						}),
+						_?.map((e) => /* @__PURE__ */ (0, C.jsx)(ge, {
+							text: e.text,
+							color: e.color,
+							x: Z(e.value),
+							y1: 0 - K.top,
+							y2: J + K.bottom,
+							textSide: Z(e.value) > q * .75 || Se ? "left" : "right",
+							classNames: e.classNames,
+							styles: e.styles,
+							animate: j,
+							isInView: B
+						}, e.text))
+					] }),
+					Ee.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		De && re && U && ke ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: De,
+			body: re,
+			xPos: U,
+			yPos: ke,
+			backgroundStyle: k?.tooltip,
+			className: A?.tooltip
+		}) : null,
+		T && V !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: T,
+			data: V,
+			setData: H,
+			className: A?.modal
+		}) : null
+	] });
+}
+function E(e) {
+	let { leftMargin: t = 20, rightMargin: n = 20, topMargin: r = 20, bottomMargin: ee = 25, data: a, width: s, height: c, barColor: l, suffix: u, prefix: d, barPadding: f, showLabels: p, showValues: te, showTicks: m, colorDomain: h, truncateBy: ne, tooltip: re, onSeriesMouseOver: oe, refValues: v, selectedColor: fe, maxValue: ge, minValue: y, highlightedDataPoints: b, onSeriesMouseClick: xe, labelOrder: S, maxBarThickness: Se, minBarThickness: we, resetSelectionOnDoubleClick: Te, detailsOnClick: w, barAxisTitle: T, valueColor: E, noOfTicks: D, styles: O, classNames: k, dimmedOpacity: A, animate: j, precision: M, customLayers: N, naLabel: Ee, trackColor: P, hideAxisLine: F, locale: I, padZeros: L } = e, R = be(null), z = ce(R, {
+		once: j.once,
+		amount: j.amount
+	}), B = {
+		top: r,
+		bottom: ee,
+		left: T ? t + 30 : t,
+		right: n
+	}, [De, Oe] = x(void 0), [V, H] = x(void 0), [U, W] = x(void 0), [ke, G] = x(void 0), K = s - B.left - B.right, q = c - B.top - B.bottom, J = ye(() => {
+		let e = /* @__PURE__ */ new Set(), t = a.map((t, n) => {
+			let r = S ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), n = S ? S.filter((t) => !e.has(t)) : [];
+		return [...t, ...n.map((e) => ({
+			id: e,
+			label: e,
+			color: null,
+			size: null
+		}))];
+	}, [a, S]), Y = ye(() => S ?? J.map((e) => `${e.id}`), [S, J]), X = ie().domain([y, ge]).range([q, 0]).nice(), Z = ae().domain(Y).range([0, we ? Math.max(K, we * Y.length) : Se ? Math.min(K, Se * Y.length) : K]).paddingInner(f), Q = X.ticks(D);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			ref: R,
+			width: `${s}px`,
+			height: `${c}px`,
+			viewBox: `0 0 ${s} ${c}`,
+			direction: "ltr",
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${B.left},${B.top})`,
+				children: [
+					/* @__PURE__ */ (0, C.jsx)(le, {
+						hideAxisLine: F,
+						y1: X(y < 0 ? 0 : y),
+						y2: X(y < 0 ? 0 : y),
+						x1: 0 - t,
+						x2: K + B.right,
+						label: m ? de(y < 0 ? 0 : y, Ee, M, d, u, I, L) : void 0,
+						labelPos: {
+							x: 0 - t,
+							dx: 0,
+							dy: ge < 0 ? "1em" : -5,
+							y: X(y < 0 ? 0 : y)
+						},
+						classNames: {
+							axis: k?.xAxis?.axis,
+							label: k?.yAxis?.labels
+						},
+						styles: {
+							axis: O?.xAxis?.axis,
+							label: O?.yAxis?.labels
+						}
+					}),
+					m ? /* @__PURE__ */ (0, C.jsx)(pe, {
+						values: Q.filter((e) => e !== 0),
+						y: Q.filter((e) => e !== 0).map((e) => X(e)),
+						x1: 0 - t,
+						x2: K + B.right,
+						styles: {
+							gridLines: O?.yAxis?.gridLines,
+							labels: O?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: k?.yAxis?.gridLines,
+							labels: k?.yAxis?.labels
+						},
+						suffix: u,
+						prefix: d,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: M,
+						locale: I,
+						padZeros: L
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: 0 - t - 15,
+						y: q / 2,
+						style: O?.yAxis?.title,
+						className: k?.yAxis?.title,
+						text: T,
+						rotate90: !0
+					}),
+					N.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [J.map((e, t) => o(Z(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+						className: "undp-viz-g-with-hover",
+						initial: "initial",
+						animate: z ? "whileInView" : "initial",
+						variants: {
+							initial: { opacity: fe ? e.color && l[h.indexOf(e.color)] === fe && (!b || b.indexOf(e.id) !== -1) ? 1 : A : b && b.indexOf(e.label) === -1 ? A : .85 },
+							whileInView: {
+								opacity: fe ? e.color && l[h.indexOf(e.color)] === fe && (!b || b.indexOf(e.id) !== -1) ? 1 : A : b && b.indexOf(e.label) === -1 ? A : .85,
+								transition: { duration: j.duration }
+							}
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: j.duration }
+						},
+						onMouseEnter: (t) => {
+							Oe(e), G(t.clientY), W(t.clientX), oe?.(e);
+						},
+						onClick: () => {
+							(xe || w) && ((0, Ce.default)(V, e) && Te ? (H(void 0), xe?.(void 0)) : (H(e), xe?.(e)));
+						},
+						onMouseMove: (t) => {
+							Oe(e), G(t.clientY), W(t.clientX);
+						},
+						onMouseLeave: () => {
+							Oe(void 0), W(void 0), G(void 0), oe?.(void 0);
+						},
+						children: [
+							P && /* @__PURE__ */ (0, C.jsx)(g.rect, {
+								width: Z.bandwidth(),
+								variants: {
+									initial: {
+										height: q,
+										y: 0,
+										x: Z(`${e.id}`),
+										fill: P
+									},
+									whileInView: {
+										height: q,
+										y: 0,
+										x: Z(`${e.id}`),
+										fill: P
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: j.duration }
+								}
+							}),
+							e.size ? /* @__PURE__ */ (0, C.jsx)(g.rect, {
+								width: Z.bandwidth(),
+								initial: "initial",
+								animate: z ? "whileInView" : "initial",
+								variants: {
+									initial: {
+										height: 0,
+										x: Z(`${e.id}`),
+										y: X(0),
+										fill: a.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[h.indexOf(e.color)] : i.gray
+									},
+									whileInView: {
+										height: e.size ? Math.abs(X(e.size) - X(0)) : 0,
+										y: e.size && e.size > 0 ? X(e.size) : X(0),
+										x: Z(`${e.id}`),
+										fill: a.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[h.indexOf(e.color)] : i.gray,
+										transition: { duration: j.duration }
+									}
+								},
+								exit: {
+									height: 0,
+									y: X(0),
+									transition: { duration: j.duration }
+								}
+							}) : null,
+							p ? /* @__PURE__ */ (0, C.jsx)(_, {
+								value: `${e.label}`.length < ne ? `${e.label}` : `${`${e.label}`.substring(0, ne)}...`,
+								y: (e.size || 0) < 0 ? 0 : X(0) + 5,
+								x: Z(`${e.id}`),
+								width: Z.bandwidth(),
+								height: (e.size || 0) < 0 ? X(0) - 5 : B.bottom,
+								style: O?.xAxis?.labels,
+								className: k?.xAxis?.labels,
+								alignment: (e.size || 0) < 0 ? "bottom" : "top",
+								animate: j,
+								isInView: z
+							}) : null,
+							te ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+								style: {
+									textAnchor: "middle",
+									...O?.graphObjectValues || {}
+								},
+								className: ve("graph-value text-sm", !E && l.length > 1 ? "fill-primary-gray-600 dark:fill-primary-gray-300" : "", k?.graphObjectValues),
+								dy: e.size ? e.size >= 0 ? "-5px" : "1em" : "-5px",
+								variants: {
+									initial: {
+										x: Z(`${e.id}`) + Z.bandwidth() / 2,
+										y: X(0),
+										opacity: 0,
+										fill: E || (a.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[h.indexOf(e.color)] : i.gray)
+									},
+									whileInView: {
+										x: Z(`${e.id}`) + Z.bandwidth() / 2,
+										y: X(e.size || 0),
+										fill: E || (a.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[h.indexOf(e.color)] : i.gray),
+										opacity: 1,
+										transition: { duration: j.duration }
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: j.duration }
+								},
+								children: de(e.size, Ee, M, d, u, I, L)
+							}) : null
+						]
+					}, e.label)), v?.map((e) => /* @__PURE__ */ (0, C.jsx)(he, {
+						text: e.text,
+						color: e.color,
+						y: X(e.value),
+						x1: 0 - t,
+						x2: K + B.right,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: j,
+						isInView: z
+					}, e.text))] }),
+					N.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		De && re && U && ke ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: De,
+			body: re,
+			xPos: U,
+			yPos: ke,
+			backgroundStyle: O?.tooltip,
+			className: k?.tooltip
+		}) : null,
+		w && V !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: w,
+			data: V,
+			setData: H,
+			className: k?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/SimpleBarGraph/index.tsx
+function D(e) {
+	let { data: t, graphTitle: s, colors: p, suffix: h = "", sources: ie, prefix: ae = "", graphDescription: oe, barPadding: g = .25, showValues: se = !0, showTicks: ce = !0, truncateBy: le = 999, height: ue, width: _, footNote: de, colorDomain: v, colorLegendTitle: fe, highlightedDataPoints: pe, padding: me, backgroundColor: he = !1, topMargin: ge, bottomMargin: _e, leftMargin: y, rightMargin: ve, showLabels: S = !0, relativeHeight: Ce, tooltip: we, onSeriesMouseOver: Te, refValues: w, showColorScale: D = !0, graphID: O, maxValue: k, minValue: A, onSeriesMouseClick: j, graphDownload: M = !1, dataDownload: N = !1, sortData: Ee, labelOrder: P, language: F = "en", showNAColor: I = !0, minHeight: L = 0, theme: R = "light", maxBarThickness: z, maxNumberOfBars: B, minBarThickness: De, ariaLabel: Oe, resetSelectionOnDoubleClick: V = !0, detailsOnClick: H, barAxisTitle: U, noOfTicks: W = 5, valueColor: ke, styles: G, classNames: K, filterNA: q = !0, animate: J = !1, dimmedOpacity: Y = .3, precision: X = 2, customLayers: Z = [], timeline: Q = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, naLabel: Ae = "NA", orientation: je = "vertical", trackColor: Me, hideAxisLine: Ne = !1, locale: Pe = "en", padZeros: Fe = !1 } = e, Ie = je === "horizontal" ? T : E, [Le, Re] = x(0), [$, ze] = x(0), [Be, Ve] = x(Q.autoplay), He = ye(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => f(`${e.date}`, Q.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, Q.dateFormat]), [Ue, We] = x(Q.autoplay ? 0 : He.length - 1), [Ge, Ke] = x(void 0), qe = be(null), Je = be(null);
+	b(() => {
+		let e = new ResizeObserver((e) => {
+			Re(e[0].target.clientWidth || 620), ze(e[0].target.clientHeight || 480);
+		});
+		return qe.current && e.observe(qe.current), () => e.disconnect();
+	}, []), b(() => {
+		let e = setInterval(() => {
+			We((e) => e < He.length - 1 ? e + 1 : 0);
+		}, (Q.speed || 2) * 1e3);
+		return Be || clearInterval(e), () => clearInterval(e);
+	}, [
+		He,
+		Be,
+		Q.speed
+	]);
+	let Ye = re(He, Ue, Q.showOnlyActiveDate, Q.dateFormat || "yyyy");
+	return /* @__PURE__ */ (0, C.jsxs)(l, {
+		className: K?.graphContainer,
+		style: G?.graphContainer,
+		id: O,
+		ref: Je,
+		"aria-label": Oe,
+		backgroundColor: he,
+		theme: R,
+		language: F,
+		minHeight: L,
+		width: _,
+		height: ue,
+		relativeHeight: Ce,
+		padding: me,
+		children: [
+			s || oe || M || N ? /* @__PURE__ */ (0, C.jsx)(a, {
+				styles: {
+					title: G?.title,
+					description: G?.description
+				},
+				classNames: {
+					title: K?.title,
+					description: K?.description
+				},
+				graphTitle: s,
+				graphDescription: oe,
+				width: _,
+				graphDownload: M ? Je : void 0,
+				dataDownload: N ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			Q.enabled && He.length > 0 && Ye ? /* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "flex gap-6 items-center pb-4",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, C.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						Ve(!Be);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": Be ? "Click to pause animation" : "Click to play animation",
+					children: Be ? /* @__PURE__ */ (0, C.jsx)(n, {}) : /* @__PURE__ */ (0, C.jsx)(r, {})
+				}), /* @__PURE__ */ (0, C.jsx)(xe, {
+					min: He[0],
+					max: He[He.length - 1],
+					marks: Ye,
+					step: null,
+					defaultValue: He[He.length - 1],
+					value: He[Ue],
+					onChangeComplete: (e) => {
+						We(He.indexOf(e));
+					},
+					onChange: (e) => {
+						We(He.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			D && t.filter((e) => e.color).length !== 0 && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(te, {
+				width: _,
+				colorLegendTitle: fe,
+				colors: p || i[R].categoricalColors.colors,
+				colorDomain: v || c(t, "color", !0),
+				setSelectedColor: Ke,
+				showNAColor: I,
+				className: K?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, C.jsxs)(u, {
+				ref: qe,
+				children: [t.length === 0 && /* @__PURE__ */ (0, C.jsx)(m, {}), Le && $ && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(Ie, {
+					hideAxisLine: Ne,
+					data: Ee ? (0, Se.default)(ne(t, Q.dateFormat || "yyyy").filter((e) => Q.enabled ? `${e.date}` === d(new Date(He[Ue]), Q.dateFormat || "yyyy") : e).filter((e) => q ? !o(e.size) : e), [(e) => e.size === void 0 ? Ee === "asc" ? (je === "horizontal" ? 1 : -1) * Infinity : (je === "horizontal" ? -1 : 1) * Infinity : e.size], [Ee]).filter((e, t) => B ? t < B : !0) : ne(t, Q.dateFormat || "yyyy").filter((e) => Q.enabled ? `${e.date}` === d(new Date(He[Ue]), Q.dateFormat || "yyyy") : e).filter((e) => q ? !o(e.size) : e).filter((e, t) => B ? t < B : !0),
+					barColor: t.filter((e) => e.color).length === 0 ? p ? [p] : [i.primaryColors["blue-600"]] : p || i[R].categoricalColors.colors,
+					colorDomain: t.filter((e) => e.color).length === 0 ? [] : v || c(t, "color", !0),
+					selectedColor: Ge,
+					trackColor: Me,
+					width: Le,
+					height: $,
+					suffix: h,
+					prefix: ae,
+					barPadding: g,
+					showValues: se,
+					showTicks: ce,
+					leftMargin: y,
+					rightMargin: ve,
+					topMargin: ge,
+					bottomMargin: _e,
+					truncateBy: le,
+					showLabels: S,
+					tooltip: we,
+					onSeriesMouseOver: Te,
+					refValues: w,
+					maxValue: o(k) ? Math.max(...t.filter((e) => !o(e.size)).map((e) => e.size)) < 0 ? 0 : Math.max(...t.filter((e) => !o(e.size)).map((e) => e.size)) : k,
+					minValue: o(A) ? Math.min(...t.filter((e) => !o(e.size)).map((e) => e.size)) >= 0 ? 0 : Math.min(...t.filter((e) => !o(e.size)).map((e) => e.size)) : A,
+					highlightedDataPoints: pe,
+					onSeriesMouseClick: j,
+					labelOrder: P,
+					rtl: F === "he" || F === "ar",
+					maxBarThickness: z,
+					minBarThickness: De,
+					resetSelectionOnDoubleClick: V,
+					detailsOnClick: H,
+					barAxisTitle: U,
+					noOfTicks: W,
+					valueColor: ke,
+					classNames: K,
+					styles: G,
+					animate: J === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : J || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					dimmedOpacity: Y,
+					precision: X,
+					customLayers: Z,
+					naLabel: Ae,
+					locale: Pe,
+					padZeros: Fe
+				}) : null]
+			}),
+			ie || de ? /* @__PURE__ */ (0, C.jsx)(ee, {
+				sources: ie,
+				footNote: de,
+				width: _,
+				styles: {
+					footnote: G?.footnote,
+					source: G?.source
+				},
+				classNames: {
+					footnote: K?.footnote,
+					source: K?.source
+				}
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/StackedBarGraph/Graph.tsx
+function O(e) {
+	let { data: t, barColors: n, barPadding: r, showTicks: i, topMargin: ee = 25, bottomMargin: a = 10, leftMargin: s = 100, rightMargin: c = 40, truncateBy: l, width: u, height: d, tooltip: f, onSeriesMouseOver: p, showLabels: te, suffix: m, prefix: h, showValues: ne, refValues: re, maxValue: oe, onSeriesMouseClick: _, selectedColor: pe, rtl: he, labelOrder: b, maxBarThickness: xe, minBarThickness: Se, resetSelectionOnDoubleClick: we, detailsOnClick: Te, barAxisTitle: w, valueColor: T, noOfTicks: E, styles: D, classNames: O, animate: k, colorDomain: A, precision: j, customLayers: M, naLabel: N, hideAxisLine: Ee, locale: P, padZeros: F } = e, I = be(null), L = ce(I, {
+		once: k.once,
+		amount: k.amount
+	}), R = {
+		top: w ? ee + 25 : ee,
+		bottom: a,
+		left: s,
+		right: c
+	}, [z, B] = x(void 0), [De, Oe] = x(void 0), [V, H] = x(void 0), [U, W] = x(void 0), ke = u - R.left - R.right, G = d - R.top - R.bottom, K = ye(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = b ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = b ? b.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			size: Array(t[0].size.length).fill(null)
+		}))];
+	}, [t, b]), q = ye(() => b ?? K.map((e) => `${e.id}`), [b, K]), J = ie().domain([0, oe]).range([0, ke]).nice(), Y = ae().domain(q).range([0, Se ? Math.max(G, Se * q.length) : xe ? Math.min(G, xe * q.length) : G]).paddingInner(r), X = J.ticks(E);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			ref: I,
+			width: `${u}px`,
+			height: `${d}px`,
+			viewBox: `0 0 ${u} ${d}`,
+			direction: "ltr",
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${R.left},${R.top})`,
+				children: [
+					i ? /* @__PURE__ */ (0, C.jsx)(v, {
+						values: X.filter((e) => e !== 0),
+						x: X.filter((e) => e !== 0).map((e) => J(e)),
+						y1: 0 - ee,
+						y2: G + R.bottom,
+						styles: {
+							gridLines: D?.xAxis?.gridLines,
+							labels: D?.xAxis?.labels
+						},
+						classNames: {
+							gridLines: O?.xAxis?.gridLines,
+							labels: O?.xAxis?.labels
+						},
+						suffix: m,
+						prefix: h,
+						labelType: "secondary",
+						showGridLines: !0,
+						precision: j,
+						locale: P,
+						padZeros: F
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: ke / 2,
+						y: 0 - R.top + 15,
+						style: D?.xAxis?.title,
+						className: O?.xAxis?.title,
+						text: w
+					}),
+					M.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [
+						K.map((e) => o(Y(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+							className: "undp-viz-low-opacity undp-viz-g-with-hover",
+							variants: {
+								initial: {
+									x: 0,
+									y: Y(`${e.id}`)
+								},
+								whileInView: {
+									x: 0,
+									y: Y(`${e.id}`),
+									transition: { duration: k.duration }
+								}
+							},
+							initial: "initial",
+							animate: L ? "whileInView" : "initial",
+							exit: {
+								opacity: 0,
+								transition: { duration: k.duration }
+							},
+							children: [
+								e.size.map((t, r) => /* @__PURE__ */ (0, C.jsxs)(g.g, {
+									opacity: pe ? n[r] === pe ? 1 : .3 : 1,
+									onMouseEnter: (t) => {
+										B({
+											...e,
+											sizeIndex: r
+										}), W(t.clientY), H(t.clientX), p?.({
+											...e,
+											sizeIndex: r
+										});
+									},
+									onMouseMove: (t) => {
+										B({
+											...e,
+											sizeIndex: r
+										}), W(t.clientY), H(t.clientX);
+									},
+									onMouseLeave: () => {
+										B(void 0), H(void 0), W(void 0), p?.(void 0);
+									},
+									onClick: () => {
+										(_ || Te) && ((0, Ce.default)(De, {
+											...e,
+											sizeIndex: r
+										}) && we ? (Oe(void 0), _?.(void 0)) : (Oe({
+											...e,
+											sizeIndex: r
+										}), _ && _({
+											...e,
+											sizeIndex: r
+										})));
+									},
+									children: [t ? /* @__PURE__ */ (0, C.jsx)(g.rect, {
+										y: 0,
+										style: { fill: n[r] },
+										height: Y.bandwidth(),
+										exit: {
+											width: 0,
+											x: J(0),
+											transition: { duration: k.duration }
+										},
+										variants: {
+											initial: {
+												width: 0,
+												x: J(0),
+												fill: n[r]
+											},
+											whileInView: {
+												width: J(t || 0),
+												x: J(r === 0 ? 0 : (0, S.default)(e.size.filter((e, t) => t < r && e))),
+												fill: n[r],
+												transition: { duration: k.duration }
+											}
+										},
+										initial: "initial",
+										animate: L ? "whileInView" : "initial"
+									}, r) : null, ne ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+										y: Y.bandwidth() / 2,
+										style: {
+											textAnchor: "middle",
+											...D?.graphObjectValues || {}
+										},
+										dy: "0.33em",
+										className: ve("graph-value text-sm", O?.graphObjectValues),
+										exit: {
+											opacity: 0,
+											transition: { duration: k.duration }
+										},
+										variants: {
+											initial: {
+												x: J(0),
+												opacity: 0,
+												fill: y(n[r])
+											},
+											whileInView: {
+												x: J(r === 0 ? 0 : (0, S.default)(e.size.filter((e, t) => t < r && e))) + J(t || 0) / 2,
+												opacity: t && J(t) / de(t, N, j, h, m, P, F).length > 12 ? 1 : 0,
+												fill: y(n[r]),
+												transition: { duration: k.duration }
+											}
+										},
+										initial: "initial",
+										animate: L ? "whileInView" : "initial",
+										children: de(t, N, j, h, m, P, F)
+									}) : null]
+								}, `${e.label}-${A[r] || r}`)),
+								te ? /* @__PURE__ */ (0, C.jsx)(fe, {
+									value: `${e.label}`.length < l ? `${e.label}` : `${`${e.label}`.substring(0, l)}...`,
+									y: 0,
+									x: 0 - R.left,
+									width: 0 + R.left,
+									height: Y.bandwidth(),
+									style: D?.yAxis?.labels,
+									className: O?.yAxis?.labels,
+									animate: k,
+									isInView: L
+								}) : null,
+								ne ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+									className: ve("graph-value graph-value-total text-sm", T ? "" : " fill-primary-gray-700 dark:fill-primary-gray-300", O?.graphObjectValues),
+									style: {
+										...T ? { fill: T } : {},
+										textAnchor: "start",
+										...D?.graphObjectValues || {}
+									},
+									y: Y.bandwidth() / 2,
+									dx: 5,
+									dy: "0.33em",
+									variants: {
+										initial: {
+											x: J(0),
+											opacity: 0,
+											...T ? { fill: T } : {}
+										},
+										whileInView: {
+											x: J((0, S.default)(e.size.map((e) => e || 0))),
+											opacity: 1,
+											...T ? { fill: T } : {},
+											transition: { duration: k.duration }
+										}
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: k.duration }
+									},
+									initial: "initial",
+									animate: L ? "whileInView" : "initial",
+									children: de((0, S.default)(e.size.filter((e) => e)), N, j, h, m, P, F)
+								}) : null
+							]
+						}, e.label)),
+						/* @__PURE__ */ (0, C.jsx)(le, {
+							hideAxisLine: Ee,
+							x1: J(0),
+							x2: J(0),
+							y1: -2.5,
+							y2: G + R.bottom,
+							classNames: { axis: O?.yAxis?.axis },
+							styles: { axis: D?.yAxis?.axis }
+						}),
+						re?.map((e) => /* @__PURE__ */ (0, C.jsx)(ge, {
+							text: e.text,
+							color: e.color,
+							x: J(e.value),
+							y1: 0 - R.top,
+							y2: G + R.bottom,
+							textSide: J(e.value) > ke * .75 || he ? "left" : "right",
+							classNames: e.classNames,
+							styles: e.styles,
+							animate: k,
+							isInView: L
+						}, e.text))
+					] }),
+					M.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		z && f && V && U ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: z,
+			body: f,
+			xPos: V,
+			yPos: U,
+			backgroundStyle: D?.tooltip,
+			className: O?.tooltip
+		}) : null,
+		Te && De !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: Te,
+			data: De,
+			setData: Oe,
+			className: O?.modal
+		}) : null
+	] });
+}
+function k(e) {
+	let { data: t, leftMargin: n = 20, rightMargin: r = 20, topMargin: i = 20, bottomMargin: ee = 25, width: a, height: s, barColors: c, barPadding: l, showLabels: u, showTicks: d, truncateBy: f, tooltip: p, onSeriesMouseOver: te, suffix: m, prefix: h, showValues: ne, refValues: re, maxValue: oe, onSeriesMouseClick: v, selectedColor: fe, labelOrder: ge, maxBarThickness: b, minBarThickness: xe, resetSelectionOnDoubleClick: Se, detailsOnClick: we, barAxisTitle: Te, valueColor: w, noOfTicks: T, styles: E, classNames: D, animate: O, colorDomain: k, precision: A, customLayers: j, naLabel: M, hideAxisLine: N, locale: Ee, padZeros: P } = e, F = be(null), I = ce(F, {
+		once: O.once,
+		amount: O.amount
+	}), L = {
+		top: i,
+		bottom: ee,
+		left: Te ? n + 30 : n,
+		right: r
+	}, [R, z] = x(void 0), [B, De] = x(void 0), [Oe, V] = x(void 0), [H, U] = x(void 0), W = a - L.left - L.right, ke = s - L.top - L.bottom, G = ye(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = ge ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = ge ? ge.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			size: Array(t[0].size.length).fill(null)
+		}))];
+	}, [t, ge]), K = ye(() => ge ?? G.map((e) => `${e.id}`), [ge, G]), q = ie().domain([0, oe]).range([ke, 0]).nice(), J = ae().domain(K).range([0, xe ? Math.max(W, xe * K.length) : b ? Math.min(W, b * K.length) : W]).paddingInner(l), Y = q.ticks(T);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsx)(g.svg, {
+			width: `${a}px`,
+			height: `${s}px`,
+			viewBox: `0 0 ${a} ${s}`,
+			direction: "ltr",
+			ref: F,
+			children: /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${L.left},${L.top})`,
+				children: [
+					/* @__PURE__ */ (0, C.jsx)(le, {
+						hideAxisLine: N,
+						y1: q(0),
+						y2: q(0),
+						x1: 0 - n,
+						x2: W + L.right,
+						label: d ? de(0, M, A, h, m, Ee, P) : void 0,
+						labelPos: {
+							x: 0 - n,
+							y: q(0),
+							dx: 0,
+							dy: -5
+						},
+						classNames: {
+							axis: D?.xAxis?.axis,
+							label: D?.yAxis?.labels
+						},
+						styles: {
+							axis: E?.xAxis?.axis,
+							label: E?.yAxis?.labels
+						}
+					}),
+					d ? /* @__PURE__ */ (0, C.jsx)(pe, {
+						values: Y.filter((e) => e !== 0),
+						y: Y.filter((e) => e !== 0).map((e) => q(e)),
+						x1: 0 - n,
+						x2: W + L.right,
+						styles: {
+							gridLines: E?.yAxis?.gridLines,
+							labels: E?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: D?.yAxis?.gridLines,
+							labels: D?.yAxis?.labels
+						},
+						suffix: m,
+						prefix: h,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: A,
+						locale: Ee,
+						padZeros: P
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(ue, {
+						x: 0 - n - 15,
+						y: ke / 2,
+						style: E?.yAxis?.title,
+						className: D?.yAxis?.title,
+						text: Te,
+						rotate90: !0
+					}),
+					j.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(se, { children: [G.map((e) => o(J(e.id)) ? null : /* @__PURE__ */ (0, C.jsxs)(g.g, {
+						className: "undp-viz-low-opacity undp-viz-g-with-hover",
+						variants: {
+							initial: {
+								x: J(`${e.id}`),
+								y: 0
+							},
+							whileInView: {
+								x: J(`${e.id}`),
+								y: 0,
+								transition: { duration: O.duration }
+							}
+						},
+						transition: { duration: O.duration },
+						initial: "initial",
+						animate: I ? "whileInView" : "initial",
+						exit: {
+							opacity: 0,
+							transition: { duration: O.duration }
+						},
+						children: [
+							e.size.map((t, n) => /* @__PURE__ */ (0, C.jsxs)(g.g, {
+								opacity: fe ? c[n] === fe ? 1 : .3 : 1,
+								onMouseEnter: (t) => {
+									z({
+										...e,
+										sizeIndex: n
+									}), U(t.clientY), V(t.clientX), te?.({
+										...e,
+										sizeIndex: n
+									});
+								},
+								onMouseMove: (t) => {
+									z({
+										...e,
+										sizeIndex: n
+									}), U(t.clientY), V(t.clientX);
+								},
+								onMouseLeave: () => {
+									z(void 0), V(void 0), U(void 0), te?.(void 0);
+								},
+								onClick: () => {
+									(v || we) && ((0, Ce.default)(B, {
+										...e,
+										sizeIndex: n
+									}) && Se ? (De(void 0), v?.(void 0)) : (De({
+										...e,
+										sizeIndex: n
+									}), v && v({
+										...e,
+										sizeIndex: n
+									})));
+								},
+								children: [/* @__PURE__ */ (0, C.jsx)(g.rect, {
+									x: 0,
+									width: J.bandwidth(),
+									variants: {
+										initial: {
+											height: 0,
+											fill: c[n],
+											y: q(0)
+										},
+										whileInView: {
+											height: Math.abs(q((0, S.default)(e.size.filter((e, t) => t <= n && e))) - q((0, S.default)(e.size.filter((e, t) => t < n && e)))),
+											y: q((0, S.default)(e.size.filter((e, t) => t <= n && e))),
+											fill: c[n],
+											transition: { duration: O.duration }
+										}
+									},
+									initial: "initial",
+									animate: I ? "whileInView" : "initial",
+									exit: {
+										height: 0,
+										y: q(0),
+										transition: { duration: O.duration }
+									}
+								}), ne ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+									x: J.bandwidth() / 2,
+									style: {
+										textAnchor: "middle",
+										...E?.graphObjectValues || {}
+									},
+									className: ve("graph-value text-sm", D?.graphObjectValues),
+									dy: "0.33em",
+									variants: {
+										initial: {
+											y: q(0),
+											opacity: 0,
+											fill: y(c[n])
+										},
+										whileInView: {
+											y: q((0, S.default)(e.size.filter((e, t) => t <= n && e))) + Math.abs(q((0, S.default)(e.size.filter((e, t) => t <= n && e))) - q((0, S.default)(e.size.filter((e, t) => t < n && e)))) / 2,
+											opacity: t && Math.abs(q((0, S.default)(e.size.filter((e, t) => t <= n && e))) - q((0, S.default)(e.size.filter((e, t) => t < n && e)))) > 20 ? 1 : 0,
+											fill: y(c[n]),
+											transition: { duration: O.duration }
+										}
+									},
+									initial: "initial",
+									animate: I ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: O.duration }
+									},
+									children: de(t, M, A, h, m, Ee, P)
+								}) : null]
+							}, `${e.label}-${k[n] || n}`)),
+							u ? /* @__PURE__ */ (0, C.jsx)(_, {
+								value: `${e.label}`.length < f ? `${e.label}` : `${`${e.label}`.substring(0, f)}...`,
+								y: q(0) + 5,
+								x: 0,
+								width: J.bandwidth(),
+								height: L.bottom,
+								style: E?.xAxis?.labels,
+								className: D?.xAxis?.labels,
+								alignment: "top",
+								animate: O,
+								isInView: I
+							}) : null,
+							ne ? /* @__PURE__ */ (0, C.jsx)(g.text, {
+								style: {
+									textAnchor: "middle",
+									...E?.graphObjectValues || {}
+								},
+								x: J.bandwidth() / 2,
+								dy: -10,
+								className: ve("graph-value graph-value-total", w ? "text-sm" : "fill-primary-gray-700 dark:fill-primary-gray-300 text-sm", D?.graphObjectValues),
+								variants: {
+									initial: {
+										y: q(0),
+										opacity: 0,
+										...w && { fill: w }
+									},
+									whileInView: {
+										y: q((0, S.default)(e.size.map((e) => e || 0))),
+										opacity: 1,
+										...w && { fill: w },
+										transition: { duration: O.duration }
+									}
+								},
+								exit: {
+									opacity: 0,
+									transition: { duration: O.duration }
+								},
+								initial: "initial",
+								animate: I ? "whileInView" : "initial",
+								children: de((0, S.default)(e.size.filter((e) => e)), M, A, h, m, Ee, P)
+							}) : null
+						]
+					}, e.label)), re?.map((e) => /* @__PURE__ */ (0, C.jsx)(he, {
+						text: e.text,
+						color: e.color,
+						y: q(e.value),
+						x1: 0 - n,
+						x2: W + L.right,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: O,
+						isInView: I
+					}, e.text))] }),
+					j.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		R && p && Oe && H ? /* @__PURE__ */ (0, C.jsx)(_e, {
+			data: R,
+			body: p,
+			xPos: Oe,
+			yPos: H,
+			backgroundStyle: E?.tooltip,
+			className: D?.tooltip
+		}) : null,
+		we && B !== void 0 ? /* @__PURE__ */ (0, C.jsx)(me, {
+			body: we,
+			data: B,
+			setData: De,
+			className: D?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/StackedBarGraph/index.tsx
+function A(e) {
+	let { data: t, graphTitle: s, colors: c = i.light.categoricalColors.colors, sources: p, graphDescription: ne, barPadding: ie = .25, showTicks: ae = !0, truncateBy: oe = 999, height: g, width: se, footNote: ce, colorDomain: le, colorLegendTitle: ue, padding: _, backgroundColor: de = !1, topMargin: v, bottomMargin: fe, leftMargin: pe, rightMargin: me, tooltip: he, onSeriesMouseOver: ge, suffix: _e = "", prefix: y = "", showLabels: ve = !0, relativeHeight: Ce, showValues: we = !0, refValues: Te, graphID: w, maxValue: T, onSeriesMouseClick: E, graphDownload: D = !1, dataDownload: A = !1, language: j = "en", labelOrder: M, minHeight: N = 0, theme: Ee = "light", maxBarThickness: P, sortParameter: F, maxNumberOfBars: I, minBarThickness: L, showColorScale: R = !0, ariaLabel: z, resetSelectionOnDoubleClick: B = !0, detailsOnClick: De, barAxisTitle: Oe, noOfTicks: V = 5, valueColor: H, styles: U, classNames: W, filterNA: ke = !0, animate: G = !1, precision: K = 2, locale: q = "en", customLayers: J = [], timeline: Y = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, naLabel: X = "NA", sortData: Z, orientation: Q = "vertical", hideAxisLine: Ae = !1, padZeros: je = !1 } = e, Me = Q === "horizontal" ? O : k, [Ne, Pe] = x(0), [Fe, Ie] = x(0), [Le, Re] = x(Y.autoplay), $ = ye(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => f(`${e.date}`, Y.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, Y.dateFormat]), [ze, Be] = x(Y.autoplay ? 0 : $.length - 1), [Ve, He] = x(void 0), Ue = be(null), We = be(null);
+	b(() => {
+		let e = new ResizeObserver((e) => {
+			Pe(e[0].target.clientWidth || 620), Ie(e[0].target.clientHeight || 480);
+		});
+		return Ue.current && e.observe(Ue.current), () => e.disconnect();
+	}, []), b(() => {
+		let e = setInterval(() => {
+			Be((e) => e < $.length - 1 ? e + 1 : 0);
+		}, (Y.speed || 2) * 1e3);
+		return Le || clearInterval(e), () => clearInterval(e);
+	}, [
+		$,
+		Le,
+		Y.speed
+	]);
+	let Ge = re($, ze, Y.showOnlyActiveDate, Y.dateFormat || "yyyy");
+	return /* @__PURE__ */ (0, C.jsxs)(l, {
+		className: W?.graphContainer,
+		style: U?.graphContainer,
+		id: w,
+		ref: We,
+		"aria-label": z,
+		backgroundColor: de,
+		theme: Ee,
+		language: j,
+		minHeight: N,
+		width: se,
+		height: g,
+		relativeHeight: Ce,
+		padding: _,
+		children: [
+			s || ne || D || A ? /* @__PURE__ */ (0, C.jsx)(a, {
+				styles: {
+					title: U?.title,
+					description: U?.description
+				},
+				classNames: {
+					title: W?.title,
+					description: W?.description
+				},
+				graphTitle: s,
+				graphDescription: ne,
+				width: se,
+				graphDownload: D ? We : void 0,
+				dataDownload: A ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			Y.enabled && $.length > 0 && Ge ? /* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "flex gap-6 items-center",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, C.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						Re(!Le);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": Le ? "Click to pause animation" : "Click to play animation",
+					children: Le ? /* @__PURE__ */ (0, C.jsx)(n, {}) : /* @__PURE__ */ (0, C.jsx)(r, {})
+				}), /* @__PURE__ */ (0, C.jsx)(xe, {
+					min: $[0],
+					max: $[$.length - 1],
+					marks: Ge,
+					step: null,
+					defaultValue: $[$.length - 1],
+					value: $[ze],
+					onChangeComplete: (e) => {
+						Be($.indexOf(e));
+					},
+					onChange: (e) => {
+						Be($.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			/* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "grow flex flex-col justify-center gap-3 w-full",
+				children: [R && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(te, {
+					width: se,
+					colorDomain: le,
+					colors: c,
+					colorLegendTitle: ue,
+					setSelectedColor: He,
+					showNAColor: !1,
+					className: W?.colorLegend
+				}) : null, /* @__PURE__ */ (0, C.jsxs)(u, {
+					ref: Ue,
+					children: [t.length === 0 && /* @__PURE__ */ (0, C.jsx)(m, {}), Ne && Fe && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(Me, {
+						hideAxisLine: Ae,
+						data: F === void 0 ? h(t, Y.dateFormat || "yyyy").filter((e) => Y.enabled ? `${e.date}` === d(new Date($[ze]), Y.dateFormat || "yyyy") : e).filter((e) => ke ? !e.size.every((e) => e == null) : e).filter((e, t) => I ? t < I : !0) : F === "total" ? (0, Se.default)(h(t, Y.dateFormat || "yyyy").filter((e) => Y.enabled ? `${e.date}` === d(new Date($[ze]), Y.dateFormat || "yyyy") : e).filter((e) => ke ? !e.size.every((e) => e == null) : e), (e) => (0, S.default)(e.size.filter((e) => !o(e))), [Z || "asc"]).filter((e, t) => I ? t < I : !0) : (0, Se.default)(h(t, Y.dateFormat || "yyyy").filter((e) => Y.enabled ? `${e.date}` === d(new Date($[ze]), Y.dateFormat || "yyyy") : e).filter((e) => ke ? !e.size.every((e) => e == null) : e), (e) => o(e.size[F]) ? -Infinity : e.size[F], [Z || "asc"]).filter((e, t) => I ? t < I : !0),
+						barColors: c,
+						width: Ne,
+						height: Fe,
+						barPadding: ie,
+						showTicks: ae,
+						leftMargin: pe,
+						rightMargin: me,
+						topMargin: v,
+						bottomMargin: fe,
+						truncateBy: oe,
+						showLabels: ve,
+						tooltip: he,
+						onSeriesMouseOver: ge,
+						showValues: we,
+						suffix: _e,
+						prefix: y,
+						refValues: Te,
+						maxValue: o(T) ? Math.max(...t.map((e) => (0, S.default)(e.size.filter((e) => !o(e))) || 0)) : T,
+						onSeriesMouseClick: E,
+						selectedColor: Ve,
+						rtl: j === "he" || j === "ar",
+						labelOrder: M,
+						maxBarThickness: P,
+						minBarThickness: L,
+						resetSelectionOnDoubleClick: B,
+						detailsOnClick: De,
+						barAxisTitle: Oe,
+						noOfTicks: V,
+						valueColor: H,
+						classNames: W,
+						styles: U,
+						animate: G === !0 ? {
+							duration: .5,
+							once: !0,
+							amount: .5
+						} : G || {
+							duration: 0,
+							once: !0,
+							amount: 0
+						},
+						colorDomain: le,
+						precision: K,
+						customLayers: J,
+						naLabel: X,
+						locale: q,
+						padZeros: je
+					}) : null]
+				})]
+			}),
+			p || ce ? /* @__PURE__ */ (0, C.jsx)(ee, {
+				styles: {
+					footnote: U?.footnote,
+					source: U?.source
+				},
+				classNames: {
+					footnote: W?.footnote,
+					source: W?.source
+				},
+				sources: p,
+				footNote: ce,
+				width: se
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/Components/Graphs/BarGraph/index.tsx
+function j(e) {
+	let { data: t, graphTitle: n, colors: r, barPadding: i, showTicks: ee, leftMargin: a, rightMargin: o, topMargin: s, bottomMargin: c, truncateBy: l, showLabels: u, showValues: d, backgroundColor: f, sources: p, graphDescription: te, height: m, width: h, footNote: ne, colorDomain: re, colorLegendTitle: ie, padding: ae, relativeHeight: oe, tooltip: g, onSeriesMouseOver: se, refValues: ce, showColorScale: le, graphID: ue, maxValue: _, minValue: de, highlightedDataPoints: v, onSeriesMouseClick: fe, graphDownload: pe, dataDownload: me, language: he, theme: ge, sortData: _e, labelOrder: y, showNAColor: ve, minHeight: b, maxBarThickness: ye, maxNumberOfBars: be, minBarThickness: x, ariaLabel: xe, resetSelectionOnDoubleClick: S, detailsOnClick: Se, barAxisTitle: Ce, noOfTicks: we, valueColor: Te, orientation: w = "vertical", styles: T, classNames: E, filterNA: O, animate: k, dimmedOpacity: A, customLayers: j, timeline: M, naLabel: N, trackColor: Ee, hideAxisLine: P = !1, numberDisplayOptions: F } = e;
+	return /* @__PURE__ */ (0, C.jsx)(D, {
+		data: t,
+		graphTitle: n,
+		colors: r,
+		barPadding: i,
+		showTicks: ee,
+		leftMargin: a,
+		rightMargin: o,
+		topMargin: s,
+		bottomMargin: c,
+		truncateBy: l,
+		showLabels: u,
+		showValues: d,
+		backgroundColor: f,
+		suffix: F?.suffix,
+		prefix: F?.prefix,
+		sources: p,
+		graphDescription: te,
+		height: m,
+		width: h,
+		footNote: ne,
+		colorDomain: re,
+		colorLegendTitle: ie,
+		padding: ae,
+		relativeHeight: oe,
+		tooltip: g,
+		onSeriesMouseOver: se,
+		refValues: ce,
+		showColorScale: le,
+		graphID: ue,
+		maxValue: _,
+		minValue: de,
+		highlightedDataPoints: v,
+		onSeriesMouseClick: fe,
+		graphDownload: pe,
+		dataDownload: me,
+		language: he,
+		theme: ge,
+		sortData: _e,
+		labelOrder: y,
+		showNAColor: ve,
+		minHeight: b,
+		maxBarThickness: ye,
+		maxNumberOfBars: be,
+		minBarThickness: x,
+		ariaLabel: xe,
+		resetSelectionOnDoubleClick: S,
+		styles: T,
+		detailsOnClick: Se,
+		barAxisTitle: Ce,
+		noOfTicks: we,
+		valueColor: Te,
+		classNames: E,
+		filterNA: O,
+		animate: k,
+		dimmedOpacity: A,
+		precision: F?.precision,
+		customLayers: j,
+		timeline: M,
+		naLabel: N,
+		orientation: w,
+		trackColor: Ee,
+		hideAxisLine: P,
+		locale: F?.locale,
+		padZeros: F?.padZeros
+	});
+}
+function M(e) {
+	let { data: t, graphTitle: n, colors: r, sources: i, graphDescription: ee, barPadding: a, showTicks: o, truncateBy: s, height: c, width: l, footNote: u, colorDomain: d, colorLegendTitle: f, showValues: p, padding: te, backgroundColor: m, leftMargin: h, rightMargin: ne, topMargin: re, bottomMargin: ie, showLabels: ae, relativeHeight: oe, tooltip: g, onSeriesMouseOver: se, refValues: ce, graphID: le, maxValue: ue, minValue: _, onSeriesMouseClick: de, graphDownload: v, dataDownload: fe, language: pe, labelOrder: me, minHeight: he, theme: ge, sortParameter: _e, sortData: y, maxBarThickness: ve, ariaLabel: b, resetSelectionOnDoubleClick: ye, detailsOnClick: be, barAxisTitle: x, noOfTicks: xe, valueColor: S, orientation: Se = "vertical", styles: Ce, classNames: we, filterNA: Te, animate: T, customLayers: E, showColorScale: D, timeline: O, naLabel: k, hideAxisLine: A = !1, numberDisplayOptions: j } = e;
+	return /* @__PURE__ */ (0, C.jsx)(w, {
+		orientation: Se,
+		data: t,
+		graphTitle: n,
+		colors: r,
+		sources: i,
+		graphDescription: ee,
+		barPadding: a,
+		showTicks: o,
+		truncateBy: s,
+		height: c,
+		width: l,
+		footNote: u,
+		colorDomain: d,
+		colorLegendTitle: f,
+		suffix: j?.suffix,
+		prefix: j?.prefix,
+		showValues: p,
+		padding: te,
+		backgroundColor: m,
+		leftMargin: h,
+		rightMargin: ne,
+		sortParameter: _e,
+		sortData: y,
+		topMargin: re,
+		bottomMargin: ie,
+		showLabels: ae,
+		relativeHeight: oe,
+		tooltip: g,
+		onSeriesMouseOver: se,
+		refValues: ce,
+		graphID: le,
+		maxValue: ue,
+		minValue: _,
+		onSeriesMouseClick: de,
+		graphDownload: v,
+		dataDownload: fe,
+		language: pe,
+		labelOrder: me,
+		minHeight: he,
+		theme: ge,
+		maxBarThickness: ve,
+		ariaLabel: b,
+		resetSelectionOnDoubleClick: ye,
+		styles: Ce,
+		detailsOnClick: be,
+		barAxisTitle: x,
+		noOfTicks: xe,
+		valueColor: S,
+		classNames: we,
+		filterNA: Te,
+		animate: T,
+		precision: j?.precision,
+		customLayers: E,
+		showColorScale: D,
+		timeline: O,
+		naLabel: k,
+		hideAxisLine: A,
+		locale: j?.locale,
+		padZeros: j?.padZeros
+	});
+}
+function N(e) {
+	let { data: t, graphTitle: n, colors: r, sources: i, graphDescription: ee, barPadding: a, showTicks: o, leftMargin: s, rightMargin: c, topMargin: l, bottomMargin: u, truncateBy: d, showLabels: f, showValues: p, backgroundColor: te, height: m, width: h, footNote: ne, colorDomain: re, colorLegendTitle: ie, padding: ae, tooltip: oe, onSeriesMouseOver: g, relativeHeight: se, refValues: ce, graphID: le, maxValue: ue, onSeriesMouseClick: _, graphDownload: de, dataDownload: v, language: fe, theme: pe, labelOrder: me, minHeight: he, maxBarThickness: ge, sortParameter: _e, sortData: y, maxNumberOfBars: ve, minBarThickness: b, ariaLabel: ye, resetSelectionOnDoubleClick: be, detailsOnClick: x, barAxisTitle: xe, noOfTicks: S, valueColor: Se, orientation: Ce = "vertical", styles: we, classNames: Te, filterNA: w, animate: T, customLayers: E, showColorScale: D, timeline: O, naLabel: k, hideAxisLine: j = !1, numberDisplayOptions: M } = e;
+	return /* @__PURE__ */ (0, C.jsx)(A, {
+		data: t,
+		graphTitle: n,
+		colors: r,
+		sources: i,
+		graphDescription: ee,
+		barPadding: a,
+		showTicks: o,
+		leftMargin: s,
+		rightMargin: c,
+		topMargin: l,
+		bottomMargin: u,
+		truncateBy: d,
+		showLabels: f,
+		showValues: p,
+		backgroundColor: te,
+		suffix: M?.suffix,
+		prefix: M?.prefix,
+		height: m,
+		width: h,
+		footNote: ne,
+		colorDomain: re,
+		colorLegendTitle: ie,
+		padding: ae,
+		tooltip: oe,
+		onSeriesMouseOver: g,
+		relativeHeight: se,
+		refValues: ce,
+		graphID: le,
+		maxValue: ue,
+		onSeriesMouseClick: _,
+		graphDownload: de,
+		dataDownload: v,
+		language: fe,
+		theme: pe,
+		labelOrder: me,
+		minHeight: he,
+		maxBarThickness: ge,
+		sortParameter: _e,
+		sortData: y,
+		maxNumberOfBars: ve,
+		minBarThickness: b,
+		ariaLabel: ye,
+		resetSelectionOnDoubleClick: be,
+		styles: we,
+		detailsOnClick: x,
+		barAxisTitle: xe,
+		noOfTicks: S,
+		valueColor: Se,
+		classNames: Te,
+		filterNA: w,
+		animate: T,
+		precision: M?.precision,
+		customLayers: E,
+		showColorScale: D,
+		timeline: O,
+		naLabel: k,
+		orientation: Ce,
+		hideAxisLine: j,
+		locale: M?.locale,
+		padZeros: M?.padZeros
+	});
+}
+//#endregion
+export { j as n, N as r, M as t };
+
+//# sourceMappingURL=BarGraph-DQogcvkF.js.map