@undp/data-viz 1.5.8 → 2.0.0

package/dist/BiVariateChoroplethMap.js

@@ -1,723 +1,475 @@
-import { j as t, m as Pe } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useState as v, useRef as ie, useEffect as ve } from "react";
-import { g as Ie, x as Le } from "./getSliderMarks-9cNoRkDx.js";
-import { y as ze } from "./Spinner-C85UF28E.js";
-import { p as We, f as Te } from "./parse-DlCRUFh_.js";
-import { i as Ae } from "./index-Bwrro8-q.js";
-import { z as Be, t as Ve, g as _e, a as Fe, b as He, c as Xe, d as Re } from "./zoom-QipiAl5W.js";
-import { t as Ue } from "./index-9tDEUqOZ.js";
-import { X as Ye } from "./Modal-DVVwpKhP.js";
-import { u as Ne } from "./Typography-Ctgfl1J5.js";
-import { n as De } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as qe } from "./Tooltip-CVCGWyzw.js";
-import { s as Ge } from "./string2HTML-oFCROsus.js";
-import { c as Me } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { X as Je, P as Ke, f as Ze } from "./index-BmCqpO1B.js";
-import { s as $e } from "./select-DKy99ogv.js";
-import { t as Se } from "./threshold-DFfqcDMa.js";
-import { u as Qe } from "./use-in-view-yS6jzJAp.js";
-import { m as oe } from "./proxy-CkpFesk1.js";
-import { A as et } from "./index-CNvov0eg.js";
-import { GraphHeader as tt } from "./GraphHeader.js";
-import { GraphFooter as rt } from "./GraphFooter.js";
-import { Colors as Ce } from "./Colors.js";
-import { f as at } from "./fetchAndParseData-sapWbnYk.js";
-import { g as Ee } from "./getJenks-BbngDoBQ.js";
-import { u as ot } from "./uniqBy-BHy4I8PK.js";
-import { s as it } from "./sort-DfK1b0F5.js";
-import { c as nt } from "./init-BhZylTFx.js";
-function st(be) {
+import { j as o, m as ue, c as ge } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as N, useRef as Pt, useEffect as qt, useEffectEvent as fe } from "react";
+import { g as ye, N as xe } from "./getSliderMarks-HIDJ0_Cd.js";
+import { w as ve } from "./Spinner-D7rnnwnA.js";
+import { p as be, f as ke } from "./parse-DlCRUFh_.js";
+import { i as we } from "./index-Bwrro8-q.js";
+import { z as je, t as Ce, g as $e, a as De, b as Ne, c as Se, d as Me } from "./zoom-C9MFjAaV.js";
+import { t as Ee } from "./index-GEsywGxz.js";
+import { l as Oe } from "./Modal-DGcuAHyK.js";
+import { j as ne } from "./Typography-PxtFcnJb.js";
+import { n as se } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Le } from "./Tooltip-CwWUegPB.js";
+import { s as Pe } from "./string2HTML-DhG75NqA.js";
+import { c as le } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { X as Ie, P as ze, e as _e } from "./index-D491FEn1.js";
+import { s as re } from "./select-DKy99ogv.js";
+import { t as ce } from "./threshold-Bgr20hik.js";
+import { u as We } from "./use-in-view-Cxa7y1TH.js";
+import { m as Lt } from "./proxy-BxkFHwUw.js";
+import { A as Be } from "./index-BqfRwk1n.js";
+import { GraphHeader as Ae } from "./GraphHeader.js";
+import { GraphFooter as Te } from "./GraphFooter.js";
+import { Colors as ae } from "./Colors.js";
+import { f as Fe } from "./fetchAndParseData-BpqkBPQL.js";
+import { g as de } from "./getJenks-BbngDoBQ.js";
+import { u as Ve } from "./uniqBy-BHy4I8PK.js";
+import { a as He, G as Ge } from "./GraphContainer-CRqzdKu2.js";
+import { s as Re } from "./sort-BIvMlUH1.js";
+import { a as Ue } from "./init-BJFW6EwE.js";
+function Xe(d) {
   const {
-    data: b,
-    xDomain: C,
-    mapData: f,
-    xColorLegendTitle: E,
-    yDomain: W,
-    yColorLegendTitle: T,
-    width: d,
-    height: s,
-    colors: q,
-    scale: G,
-    centerPoint: N,
-    mapBorderWidth: A,
-    mapNoDataColor: O,
-    mapBorderColor: ne,
-    tooltip: se,
-    onSeriesMouseOver: le,
-    zoomScaleExtend: ce,
-    zoomTranslateExtend: ke,
-    highlightedIds: B,
-    onSeriesMouseClick: k,
-    mapProperty: V,
-    resetSelectionOnDoubleClick: w,
-    detailsOnClick: M,
-    showColorScale: me,
-    styles: we,
-    classNames: je,
-    mapProjection: _,
-    zoomInteraction: P,
-    animate: j,
-    dimmedOpacity: F,
-    customLayers: de
-  } = be, [pe, J] = v(!(d < 680)), [H, X] = v(void 0), [g, K] = v(void 0), [R, Z] = v(void 0), [he, $] = v(void 0), [D, Q] = v(void 0), I = ie(null), U = Qe(I, {
-    once: j.once,
-    amount: j.amount
-  }), ge = ie(null), ee = ie(null);
-  ve(() => {
-    const e = $e(ge.current), n = $e(I.current), r = (a) => {
-      if (P === "noZoom") return !1;
-      if (P === "button") return !a.type.includes("wheel");
-      const i = a.type === "wheel", m = a.type.startsWith("touch"), l = a.type === "mousedown" || a.type === "mousemove";
-      return m ? !0 : i ? P === "scroll" ? !0 : a.ctrlKey : l && !a.button && !a.ctrlKey;
-    }, o = Be().scaleExtent(ce).translateExtent(
-      ke || [
-        [-20, -20],
-        [d + 20, s + 20]
-      ]
-    ).filter(r).on("zoom", ({ transform: a }) => {
-      e.attr("transform", a);
+    data: t,
+    xDomain: k,
+    mapData: C,
+    xColorLegendTitle: It,
+    yDomain: tt,
+    yColorLegendTitle: et,
+    width: w,
+    height: f,
+    colors: m,
+    scale: zt,
+    centerPoint: $,
+    mapBorderWidth: S,
+    mapNoDataColor: W,
+    mapBorderColor: gt,
+    tooltip: ot,
+    onSeriesMouseOver: ft,
+    zoomScaleExtend: yt,
+    zoomTranslateExtend: xt,
+    highlightedIds: G,
+    onSeriesMouseClick: rt,
+    mapProperty: R,
+    resetSelectionOnDoubleClick: _t,
+    detailsOnClick: p,
+    showColorScale: vt,
+    styles: Wt,
+    classNames: U,
+    mapProjection: B,
+    zoomInteraction: L,
+    animate: D,
+    dimmedOpacity: P,
+    customLayers: at,
+    collapseColorScaleByDefault: bt
+  } = d, [Bt, kt] = N(bt === void 0 ? !(w < 680) : !bt), [X, wt] = N(void 0), [A, it] = N(void 0), [T, nt] = N(void 0), [st, h] = N(void 0), [u, Y] = N(void 0), F = Pt(null), lt = We(F, {
+    once: D.once,
+    amount: D.amount
+  }), jt = Pt(null), V = Pt(null);
+  qt(() => {
+    const e = re(jt.current), n = re(F.current), y = (r) => {
+      if (L === "noZoom") return !1;
+      if (L === "button") return !r.type.includes("wheel");
+      const a = r.type === "wheel", c = r.type.startsWith("touch"), i = r.type === "mousedown" || r.type === "mousemove";
+      return c ? !0 : a ? L === "scroll" ? !0 : r.ctrlKey : i && !r.button && !r.ctrlKey;
+    }, l = je().scaleExtent(yt).translateExtent(xt || [[-20, -20], [w + 20, f + 20]]).filter(y).on("zoom", ({
+      transform: r
+    }) => {
+      e.attr("transform", r);
     });
-    n.call(o), ee.current = o;
-  }, [s, d, P]);
-  const p = Ve(f), y = Ue(f), ye = p[2] - p[0], te = p[3] - p[1], ue = d * 190 / 960 * 360 / ye, L = s * 190 / 678 * 180 / te, z = G * Math.min(ue, L), c = _ === "mercator" ? _e().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "equalEarth" ? Fe().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "naturalEarth" ? He().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "orthographic" ? Xe().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : Re().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z), re = Array.from({ length: C.length }, (e, n) => n), ae = Array.from({ length: W.length }, (e, n) => n), Y = Se().domain(C).range(re), fe = Se().domain(W).range(ae), S = (e) => {
-    if (!I.current || !ee.current) return;
-    $e(I.current).call(ee.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
+    n.call(l), V.current = l;
+  }, [f, w, L]);
+  const q = Ce(C), I = Ee(C), M = q[2] - q[0], z = q[3] - q[1], ct = w * 190 / 960 * 360 / M, Ct = f * 190 / 678 * 180 / z, _ = zt * Math.min(ct, Ct), E = B === "mercator" ? $e().rotate([0, 0]).center($ || I.geometry.coordinates).translate([w / 2, f / 2]).scale(_) : B === "equalEarth" ? De().rotate([0, 0]).center($ || I.geometry.coordinates).translate([w / 2, f / 2]).scale(_) : B === "naturalEarth" ? Ne().rotate([0, 0]).center($ || I.geometry.coordinates).translate([w / 2, f / 2]).scale(_) : B === "orthographic" ? Se().rotate([0, 0]).center($ || I.geometry.coordinates).translate([w / 2, f / 2]).scale(_) : Me().rotate([0, 0]).center($ || I.geometry.coordinates).translate([w / 2, f / 2]).scale(_), $t = Array.from({
+    length: k.length
+  }, (e, n) => n), Dt = Array.from({
+    length: tt.length
+  }, (e, n) => n), Nt = ce().domain(k).range($t), St = ce().domain(tt).range(Dt), J = (e) => {
+    if (!F.current || !V.current) return;
+    re(F.current).call(V.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
   };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ t.jsx(
-        oe.svg,
-        {
-          viewBox: `0 0 ${d} ${s}`,
-          width: `${d}px`,
-          height: `${s}px`,
-          ref: I,
-          direction: "ltr",
-          children: /* @__PURE__ */ t.jsxs("g", { ref: ge, children: [
-            de.filter((e) => e.position === "before").map((e) => e.layer),
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ o.jsx(Lt.svg, { viewBox: `0 0 ${w} ${f}`, width: `${w}px`, height: `${f}px`, ref: F, direction: "ltr", children: /* @__PURE__ */ o.jsxs("g", { ref: jt, children: [
+        at.filter((e) => e.position === "before").map((e) => e.layer),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        C.features.map((e, n) => t.findIndex((l) => l.id === e.properties[R]) !== -1 ? null : /* @__PURE__ */ o.jsx(Lt.g, { opacity: X ? P : G.length !== 0 ? G.indexOf(e.properties[R]) !== -1 ? 1 : P : 1, children: e.geometry.type === "MultiPolygon" ? (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          e.geometry.coordinates.map((l, r) => {
+            let a = "";
+            return l.forEach((c) => {
+              let i = " M";
+              c.forEach((g, x) => {
+                const s = E([g[0], g[1]]);
+                x !== c.length - 1 ? i = `${i}${s[0]} ${s[1]}L` : i = `${i}${s[0]} ${s[1]}`;
+              }), a += i;
+            }), /* @__PURE__ */ o.jsx("path", { d: a, style: {
+              stroke: gt,
+              strokeWidth: S,
+              fill: W
+            } }, r);
+          })
+        ) : (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          e.geometry.coordinates.map((l, r) => {
+            let a = "M";
+            return l.forEach((c, i) => {
+              const g = E([c[0], c[1]]);
+              i !== l.length - 1 ? a = `${a}${g[0]} ${g[1]}L` : a = `${a}${g[0]} ${g[1]}`;
+            }), /* @__PURE__ */ o.jsx("path", { d: a, style: {
+              stroke: gt,
+              strokeWidth: S,
+              fill: W
+            } }, r);
+          })
+        ) }, n)),
+        /* @__PURE__ */ o.jsx(Be, { children: t.map((e) => {
+          const n = C.features.findIndex(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            f.features.map((e, n) => b.findIndex((o) => o.id === e.properties[V]) !== -1 ? null : /* @__PURE__ */ t.jsx(
-              oe.g,
-              {
-                opacity: H ? F : B.length !== 0 ? B.indexOf(e.properties[V]) !== -1 ? 1 : F : 1,
-                children: e.geometry.type === "MultiPolygon" ? (
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  e.geometry.coordinates.map((o, a) => {
-                    let i = "";
-                    return o.forEach((m) => {
-                      let l = " M";
-                      m.forEach((h, u) => {
-                        const x = c([h[0], h[1]]);
-                        u !== m.length - 1 ? l = `${l}${x[0]} ${x[1]}L` : l = `${l}${x[0]} ${x[1]}`;
-                      }), i += l;
-                    }), /* @__PURE__ */ t.jsx(
-                      "path",
-                      {
-                        d: i,
-                        style: {
-                          stroke: ne,
-                          strokeWidth: A,
-                          fill: O
-                        }
-                      },
-                      a
-                    );
-                  })
-                ) : (
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  e.geometry.coordinates.map((o, a) => {
-                    let i = "M";
-                    return o.forEach((m, l) => {
-                      const h = c([m[0], m[1]]);
-                      l !== o.length - 1 ? i = `${i}${h[0]} ${h[1]}L` : i = `${i}${h[0]} ${h[1]}`;
-                    }), /* @__PURE__ */ t.jsx(
-                      "path",
-                      {
-                        d: i,
-                        style: {
-                          stroke: ne,
-                          strokeWidth: A,
-                          fill: O
-                        }
-                      },
-                      a
-                    );
-                  })
-                )
-              },
-              n
-            )),
-            /* @__PURE__ */ t.jsx(et, { children: b.map((e) => {
-              const n = f.features.findIndex(
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (i) => e.id === i.properties[V]
-              ), r = Me(e.x) ? void 0 : Y(e.x), o = Me(e.y) ? void 0 : fe(e.y), a = r !== void 0 && o !== void 0 ? q[o][r] : O;
-              return /* @__PURE__ */ t.jsx(
-                oe.g,
-                {
-                  variants: {
-                    initial: { opacity: 0 },
-                    whileInView: {
-                      opacity: H ? H === a ? 1 : F : B.length !== 0 ? B.indexOf(e.id) !== -1 ? 1 : F : 1,
-                      transition: { duration: j.duration }
-                    }
-                  },
-                  initial: "initial",
-                  animate: U ? "whileInView" : "initial",
-                  exit: { opacity: 0, transition: { duration: j.duration } },
-                  onMouseEnter: (i) => {
-                    Z(e), Q(i.clientY), $(i.clientX), le?.(e);
-                  },
-                  onClick: () => {
-                    (k || M) && (Ae(g, e) && w ? (K(void 0), k?.(void 0)) : (K(e), k?.(e)));
-                  },
-                  onMouseMove: (i) => {
-                    Z(e), Q(i.clientY), $(i.clientX);
-                  },
-                  onMouseLeave: () => {
-                    Z(void 0), $(void 0), Q(void 0), le?.(void 0);
-                  },
-                  children: n === -1 ? null : f.features[n].geometry.type === "MultiPolygon" ? f.features[n].geometry.coordinates.map(
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    (i, m) => {
-                      let l = "";
-                      return i.forEach((h) => {
-                        let u = " M";
-                        h.forEach((x, Oe) => {
-                          const xe = c([x[0], x[1]]);
-                          Oe !== h.length - 1 ? u = `${u}${xe[0]} ${xe[1]}L` : u = `${u}${xe[0]} ${xe[1]}`;
-                        }), l += u;
-                      }), /* @__PURE__ */ t.jsx(
-                        oe.path,
-                        {
-                          variants: {
-                            initial: { fill: a, opacity: 0 },
-                            whileInView: {
-                              fill: a,
-                              opacity: 1,
-                              transition: { duration: j.duration }
-                            }
-                          },
-                          initial: "initial",
-                          animate: U ? "whileInView" : "initial",
-                          exit: { opacity: 0, transition: { duration: j.duration } },
-                          d: l,
-                          className: `${a === O ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
-                          style: {
-                            strokeWidth: A
-                          }
-                        },
-                        `${e.id}-${m}`
-                      );
-                    }
-                  ) : f.features[n].geometry.coordinates.map(
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    (i, m) => {
-                      let l = "M";
-                      return i.forEach((h, u) => {
-                        const x = c([h[0], h[1]]);
-                        u !== i.length - 1 ? l = `${l}${x[0]} ${x[1]}L` : l = `${l}${x[0]} ${x[1]}`;
-                      }), /* @__PURE__ */ t.jsx(
-                        oe.path,
-                        {
-                          d: l,
-                          variants: {
-                            initial: { fill: a, opacity: 0 },
-                            whileInView: {
-                              fill: a,
-                              opacity: 1,
-                              transition: { duration: j.duration }
-                            }
-                          },
-                          initial: "initial",
-                          animate: U ? "whileInView" : "initial",
-                          exit: { opacity: 0, transition: { duration: j.duration } },
-                          className: `${a === O ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
-                          style: {
-                            strokeWidth: A
-                          }
-                        },
-                        `${e.id}-${m}`
-                      );
-                    }
-                  )
-                },
-                e.id
-              );
-            }) }),
-            R ? f.features.filter(
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              (e) => e.properties[V] === R.id
-            ).map((e, n) => /* @__PURE__ */ t.jsx("g", { children: e.geometry.type === "MultiPolygon" ? (
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              e.geometry.coordinates.map((r, o) => {
-                let a = "";
-                return r.forEach((i) => {
-                  let m = " M";
-                  i.forEach((l, h) => {
-                    const u = c([l[0], l[1]]);
-                    h !== i.length - 1 ? m = `${m}${u[0]} ${u[1]}L` : m = `${m}${u[0]} ${u[1]}`;
-                  }), a += m;
-                }), /* @__PURE__ */ t.jsx(
-                  "path",
-                  {
-                    d: a,
-                    className: "stroke-primary-gray-700 dark:stroke-primary-gray-300",
-                    style: {
-                      fill: "none",
-                      fillOpacity: 0,
-                      strokeWidth: "0.5"
-                    }
-                  },
-                  o
-                );
-              })
-            ) : (
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              e.geometry.coordinates.map((r, o) => {
-                let a = "M";
-                return r.forEach((i, m) => {
-                  const l = c([i[0], i[1]]);
-                  m !== r.length - 1 ? a = `${a}${l[0]} ${l[1]}L` : a = `${a}${l[0]} ${l[1]}`;
-                }), /* @__PURE__ */ t.jsx(
-                  "path",
-                  {
-                    d: a,
-                    className: "stroke-primary-gray-700 dark:stroke-primary-gray-300",
-                    style: {
-                      fill: "none",
-                      fillOpacity: 0,
-                      strokeWidth: "0.5"
-                    }
-                  },
-                  o
-                );
-              })
-            ) }, n)) : null,
-            de.filter((e) => e.position === "after").map((e) => e.layer)
-          ] })
-        }
-      ),
-      me === !1 ? null : /* @__PURE__ */ t.jsx("div", { className: "absolute left-4 bottom-4", children: pe ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(
-          "div",
-          {
-            style: {
-              backgroundColor: "rgba(240,240,240, 0.7)",
-              border: "1px solid var(--gray-400)",
-              borderRadius: "999px",
-              width: "24px",
-              height: "24px",
-              padding: "3px",
-              cursor: "pointer",
-              zIndex: 10,
-              position: "absolute",
-              right: "-0.75rem",
-              top: "-0.75rem"
-            },
-            onClick: () => {
-              J(!1);
+            (a) => e.id === a.properties[R]
+          ), y = le(e.x) ? void 0 : Nt(e.x), l = le(e.y) ? void 0 : St(e.y), r = y !== void 0 && l !== void 0 ? m[l][y] : W;
+          return /* @__PURE__ */ o.jsx(Lt.g, { variants: {
+            initial: {
+              opacity: 0
             },
-            children: /* @__PURE__ */ t.jsx(Je, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(
-          "div",
-          {
-            className: "p-2",
-            style: { backgroundColor: "rgba(240,240,240, 0.7)", width: "175px" },
-            children: [
-              /* @__PURE__ */ t.jsxs("div", { className: "flex gap-1 items-center", children: [
-                /* @__PURE__ */ t.jsx("svg", { width: "136px", viewBox: "0 0 136 136", className: "shrink-0", children: /* @__PURE__ */ t.jsxs("g", { children: [
-                  q.map((e, n) => /* @__PURE__ */ t.jsx("g", { transform: `translate(0,${100 - n * 25})`, children: e.map((r, o) => /* @__PURE__ */ t.jsx(
-                    "rect",
-                    {
-                      y: 1,
-                      x: o * 25 + 1,
-                      fill: r,
-                      width: 23,
-                      height: 23,
-                      strokeWidth: H === r ? 2 : 0.25,
-                      style: { cursor: "pointer" },
-                      onMouseOver: () => {
-                        X(r);
-                      },
-                      onMouseLeave: () => {
-                        X(void 0);
-                      }
-                    },
-                    o
-                  )) }, n)),
-                  /* @__PURE__ */ t.jsx("g", { transform: "translate(0,125)", children: C.map((e, n) => /* @__PURE__ */ t.jsx("text", { y: 10, x: (n + 1) * 25, fontSize: 10, textAnchor: "middle", children: typeof e == "string" || e < 1 ? e : De(e, "NA") }, n)) }),
-                  W.map((e, n) => /* @__PURE__ */ t.jsx(
-                    "g",
-                    {
-                      transform: `translate(${Math.max(Math.min(C.length + 1, 5), 4) * 25 + 10},${100 - n * 25})`,
-                      children: /* @__PURE__ */ t.jsx(
-                        "text",
-                        {
-                          x: 0,
-                          transform: "rotate(-90)",
-                          y: 0,
-                          fontSize: 10,
-                          textAnchor: "middle",
-                          children: typeof e == "string" || e < 1 ? e : De(e, "NA")
-                        }
-                      )
-                    },
-                    n
-                  ))
-                ] }) }),
-                /* @__PURE__ */ t.jsx(
-                  Ne,
-                  {
-                    marginBottom: "none",
-                    size: "xs",
-                    className: "leading-normal text-center shrink-0",
-                    style: {
-                      display: "-webkit-box",
-                      WebkitLineClamp: "1",
-                      WebkitBoxOrient: "vertical",
-                      overflow: "hidden",
-                      writingMode: "vertical-rl",
-                      height: "8.5rem",
-                      transform: "rotate(180deg)"
-                    },
-                    children: T
+            whileInView: {
+              opacity: X ? X === r ? 1 : P : G.length !== 0 ? G.indexOf(e.id) !== -1 ? 1 : P : 1,
+              transition: {
+                duration: D.duration
+              }
+            }
+          }, initial: "initial", animate: lt ? "whileInView" : "initial", exit: {
+            opacity: 0,
+            transition: {
+              duration: D.duration
+            }
+          }, onMouseEnter: (a) => {
+            nt(e), Y(a.clientY), h(a.clientX), ft?.(e);
+          }, onClick: () => {
+            (rt || p) && (we(A, e) && _t ? (it(void 0), rt?.(void 0)) : (it(e), rt?.(e)));
+          }, onMouseMove: (a) => {
+            nt(e), Y(a.clientY), h(a.clientX);
+          }, onMouseLeave: () => {
+            nt(void 0), h(void 0), Y(void 0), ft?.(void 0);
+          }, children: n === -1 ? null : C.features[n].geometry.type === "MultiPolygon" ? C.features[n].geometry.coordinates.map(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (a, c) => {
+              let i = "";
+              return a.forEach((g) => {
+                let x = " M";
+                g.forEach((s, Mt) => {
+                  const H = E([s[0], s[1]]);
+                  Mt !== g.length - 1 ? x = `${x}${H[0]} ${H[1]}L` : x = `${x}${H[0]} ${H[1]}`;
+                }), i += x;
+              }), /* @__PURE__ */ o.jsx(Lt.path, { variants: {
+                initial: {
+                  fill: r,
+                  opacity: 0
+                },
+                whileInView: {
+                  fill: r,
+                  opacity: 1,
+                  transition: {
+                    duration: D.duration
+                  }
+                }
+              }, initial: "initial", animate: lt ? "whileInView" : "initial", exit: {
+                opacity: 0,
+                transition: {
+                  duration: D.duration
+                }
+              }, d: i, className: `${r === W ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`, style: {
+                strokeWidth: S
+              } }, `${e.id}-${c}`);
+            }
+          ) : C.features[n].geometry.coordinates.map(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (a, c) => {
+              let i = "M";
+              return a.forEach((g, x) => {
+                const s = E([g[0], g[1]]);
+                x !== a.length - 1 ? i = `${i}${s[0]} ${s[1]}L` : i = `${i}${s[0]} ${s[1]}`;
+              }), /* @__PURE__ */ o.jsx(Lt.path, { d: i, variants: {
+                initial: {
+                  fill: r,
+                  opacity: 0
+                },
+                whileInView: {
+                  fill: r,
+                  opacity: 1,
+                  transition: {
+                    duration: D.duration
                   }
-                )
-              ] }),
-              /* @__PURE__ */ t.jsx(
-                Ne,
-                {
-                  marginBottom: "none",
-                  size: "xs",
-                  className: "mt-1 leading-normal text-center",
-                  style: {
-                    display: "-webkit-box",
-                    WebkitLineClamp: "1",
-                    width: "8.5rem",
-                    WebkitBoxOrient: "vertical",
-                    overflow: "hidden"
-                  },
-                  children: E
                 }
-              )
-            ]
-          }
-        )
-      ] }) : /* @__PURE__ */ t.jsx(
-        "button",
-        {
-          type: "button",
-          className: "mb-0 border-0 bg-transparent p-0 self-start",
-          onClick: () => {
-            J(!0);
-          },
-          children: /* @__PURE__ */ t.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
-        }
-      ) }),
-      P === "button" && /* @__PURE__ */ t.jsxs("div", { className: "absolute left-4 top-4 flex flex-col", children: [
-        /* @__PURE__ */ t.jsx(
-          "button",
-          {
-            onClick: () => S("in"),
-            className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          "button",
-          {
-            onClick: () => S("out"),
-            className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
-            children: "–"
-          }
-        )
+              }, initial: "initial", animate: lt ? "whileInView" : "initial", exit: {
+                opacity: 0,
+                transition: {
+                  duration: D.duration
+                }
+              }, className: `${r === W ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`, style: {
+                strokeWidth: S
+              } }, `${e.id}-${c}`);
+            }
+          ) }, e.id);
+        }) }),
+        T ? C.features.filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (e) => e.properties[R] === T.id
+        ).map((e, n) => /* @__PURE__ */ o.jsx("g", { children: e.geometry.type === "MultiPolygon" ? (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          e.geometry.coordinates.map((y, l) => {
+            let r = "";
+            return y.forEach((a) => {
+              let c = " M";
+              a.forEach((i, g) => {
+                const x = E([i[0], i[1]]);
+                g !== a.length - 1 ? c = `${c}${x[0]} ${x[1]}L` : c = `${c}${x[0]} ${x[1]}`;
+              }), r += c;
+            }), /* @__PURE__ */ o.jsx("path", { d: r, className: "stroke-primary-gray-700 dark:stroke-primary-gray-300", style: {
+              fill: "none",
+              fillOpacity: 0,
+              strokeWidth: "0.5"
+            } }, l);
+          })
+        ) : (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          e.geometry.coordinates.map((y, l) => {
+            let r = "M";
+            return y.forEach((a, c) => {
+              const i = E([a[0], a[1]]);
+              c !== y.length - 1 ? r = `${r}${i[0]} ${i[1]}L` : r = `${r}${i[0]} ${i[1]}`;
+            }), /* @__PURE__ */ o.jsx("path", { d: r, className: "stroke-primary-gray-700 dark:stroke-primary-gray-300", style: {
+              fill: "none",
+              fillOpacity: 0,
+              strokeWidth: "0.5"
+            } }, l);
+          })
+        ) }, n)) : null,
+        at.filter((e) => e.position === "after").map((e) => e.layer)
+      ] }) }),
+      vt === !1 ? null : /* @__PURE__ */ o.jsx("div", { className: ue("absolute left-4 bottom-4 map-color-legend", U?.colorLegend), children: Bt ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx("div", { className: "color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]", onClick: () => {
+          kt(!1);
+        }, children: /* @__PURE__ */ o.jsx(Ie, {}) }),
+        /* @__PURE__ */ o.jsxs("div", { className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]", style: {
+          width: "175px"
+        }, children: [
+          /* @__PURE__ */ o.jsxs("div", { className: "flex gap-1 items-center", children: [
+            /* @__PURE__ */ o.jsx("svg", { width: "136px", viewBox: "0 0 136 136", className: "shrink-0", children: /* @__PURE__ */ o.jsxs("g", { children: [
+              m.map((e, n) => /* @__PURE__ */ o.jsx("g", { transform: `translate(0,${100 - n * 25})`, children: e.map((y, l) => /* @__PURE__ */ o.jsx("rect", { y: 1, x: l * 25 + 1, fill: y, width: 23, height: 23, strokeWidth: X === y ? 2 : 0.25, style: {
+                cursor: "pointer"
+              }, onMouseOver: () => {
+                wt(y);
+              }, onMouseLeave: () => {
+                wt(void 0);
+              } }, l)) }, n)),
+              /* @__PURE__ */ o.jsx("g", { transform: "translate(0,125)", children: k.map((e, n) => /* @__PURE__ */ o.jsx("text", { y: 10, x: (n + 1) * 25, fontSize: 10, textAnchor: "middle", children: typeof e == "string" || e < 1 ? e : se(e, "NA") }, n)) }),
+              tt.map((e, n) => /* @__PURE__ */ o.jsx("g", { transform: `translate(${Math.max(Math.min(k.length + 1, 5), 4) * 25 + 10},${100 - n * 25})`, children: /* @__PURE__ */ o.jsx("text", { x: 0, transform: "rotate(-90)", y: 0, fontSize: 10, textAnchor: "middle", children: typeof e == "string" || e < 1 ? e : se(e, "NA") }) }, n))
+            ] }) }),
+            /* @__PURE__ */ o.jsx(ne, { marginBottom: "none", size: "xs", className: "leading-normal text-center shrink-0", style: {
+              display: "-webkit-box",
+              WebkitLineClamp: "1",
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              writingMode: "vertical-rl",
+              height: "8.5rem",
+              transform: "rotate(180deg)"
+            }, children: et })
+          ] }),
+          /* @__PURE__ */ o.jsx(ne, { marginBottom: "none", size: "xs", className: "mt-1 leading-normal text-center", style: {
+            display: "-webkit-box",
+            WebkitLineClamp: "1",
+            width: "8.5rem",
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden"
+          }, children: It })
+        ] })
+      ] }) : /* @__PURE__ */ o.jsx("button", { type: "button", className: "mb-0 border-0 bg-transparent p-0 self-start", onClick: () => {
+        kt(!0);
+      }, children: /* @__PURE__ */ o.jsx("div", { className: "show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" }) }) }),
+      L === "button" && /* @__PURE__ */ o.jsxs("div", { className: "absolute left-4 top-4 flex flex-col zoom-buttons", children: [
+        /* @__PURE__ */ o.jsx("button", { onClick: () => J("in"), className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100", children: "+" }),
+        /* @__PURE__ */ o.jsx("button", { onClick: () => J("out"), className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100", children: "–" })
       ] })
     ] }),
-    R && se && he && D ? /* @__PURE__ */ t.jsx(
-      qe,
-      {
-        data: R,
-        body: se,
-        xPos: he,
-        yPos: D,
-        backgroundStyle: we?.tooltip,
-        className: je?.tooltip
-      }
-    ) : null,
-    M && g !== void 0 ? /* @__PURE__ */ t.jsx(
-      Ye,
-      {
-        open: g !== void 0,
-        onClose: () => {
-          K(void 0);
-        },
-        children: /* @__PURE__ */ t.jsx(
-          "div",
-          {
-            className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof M == "string" ? { __html: Ge(M, g) } : void 0,
-            children: typeof M == "function" ? M(g) : null
-          }
-        )
-      }
-    ) : null
+    T && ot && st && u ? /* @__PURE__ */ o.jsx(Le, { data: T, body: ot, xPos: st, yPos: u, backgroundStyle: Wt?.tooltip, className: U?.tooltip }) : null,
+    p && A !== void 0 ? /* @__PURE__ */ o.jsx(Oe, { open: A !== void 0, onClose: () => {
+      it(void 0);
+    }, children: /* @__PURE__ */ o.jsx("div", { className: "graph-modal-content m-0", dangerouslySetInnerHTML: typeof p == "string" ? {
+      __html: Pe(p, A)
+    } : void 0, children: typeof p == "function" ? p(A) : null }) }) : null
   ] });
 }
-function Wt(be) {
-  const {
-    data: b,
+function Po(d) {
+  const t = ge.c(101), {
+    data: k,
     graphTitle: C,
-    mapData: f = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",
-    colors: E = Ce.light.bivariateColors.colors05x05,
-    sources: W,
-    graphDescription: T,
-    height: d,
-    width: s,
-    footNote: q = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",
-    xDomain: G,
-    yDomain: N,
-    xColorLegendTitle: A = "X Color key",
-    yColorLegendTitle: O = "Y Color key",
-    tooltip: ne,
-    scale: se = 0.95,
-    centerPoint: le,
-    padding: ce,
-    mapBorderWidth: ke = 0.5,
-    mapNoDataColor: B = Ce.light.graphNoData,
-    backgroundColor: k = !1,
-    mapBorderColor: V = Ce.light.grays["gray-500"],
-    relativeHeight: w,
-    onSeriesMouseOver: M,
-    isWorldMap: me = !0,
-    zoomScaleExtend: we = [0.8, 6],
-    zoomTranslateExtend: je,
-    graphID: _,
-    showColorScale: P = !0,
-    highlightedIds: j = [],
-    onSeriesMouseClick: F,
-    mapProperty: de = "ISO3",
-    graphDownload: pe = !1,
-    dataDownload: J = !1,
-    showAntarctica: H = !1,
-    language: X = "en",
-    minHeight: g = 0,
-    theme: K = "light",
-    ariaLabel: R,
-    resetSelectionOnDoubleClick: Z = !0,
-    detailsOnClick: he,
-    styles: $,
-    classNames: D,
-    mapProjection: Q,
-    zoomInteraction: I = "button",
-    animate: U = !1,
-    dimmedOpacity: ge = 0.3,
-    customLayers: ee = [],
-    timeline: p = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
-  } = be, [y, ye] = v(0), [te, ue] = v(0), [L, z] = v(p.autoplay), c = it(
-    ot(b, "date", !0).map(
-      (r) => We(`${r}`, p.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
-    ),
-    (r, o) => nt(r, o)
-  ), [re, ae] = v(p.autoplay ? 0 : c.length - 1), [Y, fe] = v(void 0), S = ie(null), e = ie(null);
-  ve(() => {
-    const r = new ResizeObserver((o) => {
-      ye(s || o[0].contentRect.width || 760), ue(d || o[0].target.clientHeight || 480);
+    mapData: It,
+    colors: tt,
+    sources: et,
+    graphDescription: w,
+    height: f,
+    width: m,
+    footNote: zt,
+    xDomain: $,
+    yDomain: S,
+    xColorLegendTitle: W,
+    yColorLegendTitle: gt,
+    tooltip: ot,
+    scale: ft,
+    centerPoint: yt,
+    padding: xt,
+    mapBorderWidth: G,
+    mapNoDataColor: rt,
+    backgroundColor: R,
+    mapBorderColor: _t,
+    relativeHeight: p,
+    onSeriesMouseOver: vt,
+    isWorldMap: Wt,
+    zoomScaleExtend: U,
+    zoomTranslateExtend: B,
+    graphID: L,
+    showColorScale: D,
+    highlightedIds: P,
+    onSeriesMouseClick: at,
+    mapProperty: bt,
+    graphDownload: Bt,
+    dataDownload: kt,
+    showAntarctica: X,
+    language: wt,
+    minHeight: A,
+    theme: it,
+    ariaLabel: T,
+    resetSelectionOnDoubleClick: nt,
+    detailsOnClick: st,
+    styles: h,
+    classNames: u,
+    mapProjection: Y,
+    zoomInteraction: F,
+    animate: lt,
+    dimmedOpacity: jt,
+    customLayers: V,
+    timeline: q,
+    collapseColorScaleByDefault: I
+  } = d, M = It === void 0 ? "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json" : It, z = tt === void 0 ? ae.light.bivariateColors.colors05x05 : tt, ct = zt === void 0 ? "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries." : zt, Ct = W === void 0 ? "X Color key" : W, _ = gt === void 0 ? "Y Color key" : gt, E = ft === void 0 ? 0.95 : ft, $t = G === void 0 ? 0.5 : G, Dt = rt === void 0 ? ae.light.graphNoData : rt, Nt = R === void 0 ? !1 : R, St = _t === void 0 ? ae.light.grays["gray-500"] : _t, J = Wt === void 0 ? !0 : Wt;
+  let e;
+  t[0] !== U ? (e = U === void 0 ? [0.8, 6] : U, t[0] = U, t[1] = e) : e = t[1];
+  const n = e, y = D === void 0 ? !0 : D;
+  let l;
+  t[2] !== P ? (l = P === void 0 ? [] : P, t[2] = P, t[3] = l) : l = t[3];
+  const r = l, a = bt === void 0 ? "ISO3" : bt, c = Bt === void 0 ? !1 : Bt, i = kt === void 0 ? !1 : kt, g = X === void 0 ? !1 : X, x = wt === void 0 ? "en" : wt, s = A === void 0 ? 0 : A, Mt = it === void 0 ? "light" : it, H = nt === void 0 ? !0 : nt, Jt = F === void 0 ? "button" : F, At = lt === void 0 ? !1 : lt, Kt = jt === void 0 ? 0.3 : jt;
+  let Tt;
+  t[4] !== V ? (Tt = V === void 0 ? [] : V, t[4] = V, t[5] = Tt) : Tt = t[5];
+  const Zt = Tt, j = q === void 0 ? {
+    enabled: !1,
+    autoplay: !1,
+    showOnlyActiveDate: !0
+  } : q, [O, me] = N(0), [Et, pe] = N(0), [K, Qt] = N(j.autoplay), v = Re(Ve(k, "date", !0).map((b) => be(`${b}`, j.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()), oo), [Z, Ot] = N(j.autoplay ? 0 : v.length - 1), [dt, he] = N(void 0), te = Pt(null), ie = Pt(null);
+  let Ft, Vt;
+  t[6] === Symbol.for("react.memo_cache_sentinel") ? (Ft = () => {
+    const b = new ResizeObserver((Q) => {
+      me(Q[0].target.clientWidth || 620), pe(Q[0].target.clientHeight || 480);
     });
-    return S.current && (ue(S.current.clientHeight || 480), ye(S.current.clientWidth || 760), s || r.observe(S.current)), () => r.disconnect();
-  }, [s, d]), ve(() => {
-    typeof f == "string" ? at(f).then((o) => {
-      fe(o);
-    }) : fe(f);
-  }, [f]), ve(() => {
-    const r = setInterval(
-      () => {
-        ae((o) => o < c.length - 1 ? o + 1 : 0);
-      },
-      (p.speed || 2) * 1e3
-    );
-    return L || clearInterval(r), () => clearInterval(r);
-  }, [c, L, p.speed]);
-  const n = Ie(
-    c,
-    re,
-    p.showOnlyActiveDate,
-    p.dateFormat || "yyyy"
-  );
-  return G && N && (G.length !== E[0].length - 1 || N.length !== E.length - 1) ? (console.error("the xDomain and yDomain array length don't match to the color array length"), null) : /* @__PURE__ */ t.jsx(
-    "div",
-    {
-      className: `${K || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
-      dir: X === "he" || X === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          className: Pe(
-            `${k ? k === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${X || "en"}`,
-            s ? "w-fit" : "w-full",
-            D?.graphContainer
-          ),
-          style: {
-            ...$?.graphContainer || {},
-            ...k && k !== !0 ? { backgroundColor: k } : {}
-          },
-          id: _,
-          ref: e,
-          "aria-label": R || `${C ? `The graph shows ${C}. ` : ""}This is bi-variate choropleth map where geographic areas are colored in proportion to two variables.${T ? ` ${T}` : ""}`,
-          children: /* @__PURE__ */ t.jsx(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: k ? ce || "1rem" : ce || 0 },
-              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                C || T || pe || J ? /* @__PURE__ */ t.jsx(
-                  tt,
-                  {
-                    styles: {
-                      title: $?.title,
-                      description: $?.description
-                    },
-                    classNames: {
-                      title: D?.title,
-                      description: D?.description
-                    },
-                    graphTitle: C,
-                    graphDescription: T,
-                    width: s,
-                    graphDownload: pe ? e.current : void 0,
-                    dataDownload: J ? b.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? b.map((r) => r.data).filter((r) => r !== void 0) : b.filter((r) => r !== void 0) : null
-                  }
-                ) : null,
-                p.enabled && c.length > 0 && n ? /* @__PURE__ */ t.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
-                  /* @__PURE__ */ t.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        z(!L);
-                      },
-                      className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": L ? "Click to pause animation" : "Click to play animation",
-                      children: L ? /* @__PURE__ */ t.jsx(Ke, {}) : /* @__PURE__ */ t.jsx(Ze, {})
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx(
-                    Le,
-                    {
-                      min: c[0],
-                      max: c[c.length - 1],
-                      marks: n,
-                      step: null,
-                      defaultValue: c[c.length - 1],
-                      value: c[re],
-                      onChangeComplete: (r) => {
-                        ae(c.indexOf(r));
-                      },
-                      onChange: (r) => {
-                        ae(c.indexOf(r));
-                      },
-                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
-                    }
-                  )
-                ] }) : null,
-                /* @__PURE__ */ t.jsx(
-                  "div",
-                  {
-                    className: "flex flex-col grow justify-center leading-0",
-                    ref: S,
-                    "aria-label": "Map area",
-                    children: (s || y) && (d || te) && Y ? /* @__PURE__ */ t.jsx(
-                      st,
-                      {
-                        data: b.filter(
-                          (r) => p.enabled ? r.date === Te(new Date(c[re]), p.dateFormat || "yyyy") : r
-                        ),
-                        mapData: H ? Y : {
-                          ...Y,
-                          features: Y.features.filter(
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            (r) => r.properties.NAME !== "Antarctica"
-                          )
-                        },
-                        xDomain: G || Ee(
-                          b.map((r) => r.x),
-                          E[0].length
-                        ),
-                        yDomain: N || Ee(
-                          b.map((r) => r.y),
-                          E.length
-                        ),
-                        width: s || y,
-                        height: Math.max(
-                          g,
-                          d || (w ? g ? (s || y) * w > g ? (s || y) * w : g : (s || y) * w : te)
-                        ),
-                        scale: se,
-                        centerPoint: le,
-                        colors: E,
-                        xColorLegendTitle: A,
-                        yColorLegendTitle: O,
-                        mapBorderWidth: ke,
-                        mapNoDataColor: B,
-                        mapBorderColor: V,
-                        tooltip: ne,
-                        onSeriesMouseOver: M,
-                        isWorldMap: me,
-                        zoomScaleExtend: we,
-                        zoomTranslateExtend: je,
-                        onSeriesMouseClick: F,
-                        mapProperty: de,
-                        highlightedIds: j,
-                        resetSelectionOnDoubleClick: Z,
-                        styles: $,
-                        showColorScale: P,
-                        classNames: D,
-                        mapProjection: Q || (me ? "naturalEarth" : "mercator"),
-                        detailsOnClick: he,
-                        zoomInteraction: I,
-                        animate: U === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : U || { duration: 0, once: !0, amount: 0 },
-                        dimmedOpacity: ge,
-                        customLayers: ee
-                      }
-                    ) : /* @__PURE__ */ t.jsx(
-                      "div",
-                      {
-                        style: {
-                          height: `${Math.max(
-                            g,
-                            d || (w ? g ? (s || y) * w > g ? (s || y) * w : g : (s || y) * w : te)
-                          )}px`
-                        },
-                        className: "flex items-center justify-center",
-                        children: /* @__PURE__ */ t.jsx(ze, { "aria-label": "Loading graph" })
-                      }
-                    )
-                  }
-                ),
-                W || q ? /* @__PURE__ */ t.jsx(
-                  rt,
-                  {
-                    styles: { footnote: $?.footnote, source: $?.source },
-                    classNames: {
-                      footnote: D?.footnote,
-                      source: D?.source
-                    },
-                    sources: W,
-                    footNote: q,
-                    width: s
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
+    return te.current && b.observe(te.current), () => b.disconnect();
+  }, Vt = [], t[6] = Ft, t[7] = Vt) : (Ft = t[6], Vt = t[7]), qt(Ft, Vt);
+  let Ht;
+  t[8] === Symbol.for("react.memo_cache_sentinel") ? (Ht = (b) => {
+    he(b);
+  }, t[8] = Ht) : Ht = t[8];
+  const Gt = fe(Ht);
+  let Rt;
+  t[9] !== M || t[10] !== Gt ? (Rt = () => {
+    typeof M == "string" ? Fe(M).then((Q) => {
+      Gt(Q);
+    }) : Gt(M);
+  }, t[9] = M, t[10] = Gt, t[11] = Rt) : Rt = t[11];
+  let Ut;
+  t[12] !== M ? (Ut = [M], t[12] = M, t[13] = Ut) : Ut = t[13], qt(Rt, Ut), qt(() => {
+    const b = setInterval(() => {
+      Ot((Q) => Q < v.length - 1 ? Q + 1 : 0);
+    }, (j.speed || 2) * 1e3);
+    return K || clearInterval(b), () => clearInterval(b);
+  }, [v, K, j.speed]);
+  const Xt = ye(v, Z, j.showOnlyActiveDate, j.dateFormat || "yyyy");
+  if ($ && S && ($.length !== z[0].length - 1 || S.length !== z.length - 1))
+    return console.error("the xDomain and yDomain array length don't match to the color array length"), null;
+  const ee = u?.graphContainer, oe = h?.graphContainer;
+  let mt;
+  t[14] !== u?.description || t[15] !== u?.title || t[16] !== k || t[17] !== i || t[18] !== w || t[19] !== c || t[20] !== C || t[21] !== h?.description || t[22] !== h?.title || t[23] !== m ? (mt = C || w || c || i ? /* @__PURE__ */ o.jsx(Ae, { styles: {
+    title: h?.title,
+    description: h?.description
+  }, classNames: {
+    title: u?.title,
+    description: u?.description
+  }, graphTitle: C, graphDescription: w, width: m, graphDownload: c ? ie : void 0, dataDownload: i ? k.map(eo).filter(to).length > 0 ? k.map(Qe).filter(Ze) : k.filter(Ke) : null }) : null, t[14] = u?.description, t[15] = u?.title, t[16] = k, t[17] = i, t[18] = w, t[19] = c, t[20] = C, t[21] = h?.description, t[22] = h?.title, t[23] = m, t[24] = mt) : mt = t[24];
+  let pt;
+  t[25] !== Z || t[26] !== Xt || t[27] !== K || t[28] !== Ot || t[29] !== Qt || t[30] !== j.enabled || t[31] !== v ? (pt = j.enabled && v.length > 0 && Xt ? /* @__PURE__ */ o.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+    /* @__PURE__ */ o.jsx("button", { type: "button", onClick: () => {
+      Qt(!K);
+    }, className: "p-0 border-0 cursor-pointer bg-transparent", "aria-label": K ? "Click to pause animation" : "Click to play animation", children: K ? /* @__PURE__ */ o.jsx(ze, {}) : /* @__PURE__ */ o.jsx(_e, {}) }),
+    /* @__PURE__ */ o.jsx(xe, { min: v[0], max: v[v.length - 1], marks: Xt, step: null, defaultValue: v[v.length - 1], value: v[Z], onChangeComplete: (b) => {
+      Ot(v.indexOf(b));
+    }, onChange: (b) => {
+      Ot(v.indexOf(b));
+    }, "aria-label": "Time slider. Use arrow keys to adjust selected time period." })
+  ] }) : null, t[25] = Z, t[26] = Xt, t[27] = K, t[28] = Ot, t[29] = Qt, t[30] = j.enabled, t[31] = v, t[32] = pt) : pt = t[32];
+  let ht;
+  t[33] !== At || t[34] !== yt || t[35] !== u || t[36] !== I || t[37] !== z || t[38] !== Zt || t[39] !== k || t[40] !== st || t[41] !== Kt || t[42] !== f || t[43] !== r || t[44] !== Z || t[45] !== J || t[46] !== St || t[47] !== $t || t[48] !== Dt || t[49] !== Y || t[50] !== a || t[51] !== dt || t[52] !== s || t[53] !== at || t[54] !== vt || t[55] !== p || t[56] !== H || t[57] !== E || t[58] !== g || t[59] !== y || t[60] !== h || t[61] !== Et || t[62] !== O || t[63] !== j.dateFormat || t[64] !== j.enabled || t[65] !== ot || t[66] !== v || t[67] !== m || t[68] !== Ct || t[69] !== $ || t[70] !== _ || t[71] !== S || t[72] !== Jt || t[73] !== n || t[74] !== B ? (ht = /* @__PURE__ */ o.jsx(He, { ref: te, children: O && Et && dt ? /* @__PURE__ */ o.jsx(Xe, { data: k.filter((b) => j.enabled ? b.date === ke(new Date(v[Z]), j.dateFormat || "yyyy") : b), mapData: g ? dt : {
+    ...dt,
+    features: dt.features.filter(Je)
+  }, xDomain: $ || de(k.map(qe), z[0].length), yDomain: S || de(k.map(Ye), z.length), width: m || O, height: Math.max(s, f || (p ? s ? (m || O) * p > s ? (m || O) * p : s : (m || O) * p : Et)), scale: E, centerPoint: yt, colors: z, xColorLegendTitle: Ct, yColorLegendTitle: _, mapBorderWidth: $t, mapNoDataColor: Dt, mapBorderColor: St, tooltip: ot, onSeriesMouseOver: vt, isWorldMap: J, zoomScaleExtend: n, zoomTranslateExtend: B, onSeriesMouseClick: at, mapProperty: a, highlightedIds: r, resetSelectionOnDoubleClick: H, styles: h, showColorScale: y, classNames: u, mapProjection: Y || (J ? "naturalEarth" : "mercator"), detailsOnClick: st, zoomInteraction: Jt, animate: At === !0 ? {
+    duration: 0.5,
+    once: !0,
+    amount: 0.5
+  } : At || {
+    duration: 0,
+    once: !0,
+    amount: 0
+  }, dimmedOpacity: Kt, customLayers: Zt, collapseColorScaleByDefault: I }) : /* @__PURE__ */ o.jsx("div", { style: {
+    height: `${Math.max(s, f || (p ? s ? (m || O) * p > s ? (m || O) * p : s : (m || O) * p : Et))}px`
+  }, className: "flex items-center justify-center", children: /* @__PURE__ */ o.jsx(ve, { "aria-label": "Loading graph" }) }) }), t[33] = At, t[34] = yt, t[35] = u, t[36] = I, t[37] = z, t[38] = Zt, t[39] = k, t[40] = st, t[41] = Kt, t[42] = f, t[43] = r, t[44] = Z, t[45] = J, t[46] = St, t[47] = $t, t[48] = Dt, t[49] = Y, t[50] = a, t[51] = dt, t[52] = s, t[53] = at, t[54] = vt, t[55] = p, t[56] = H, t[57] = E, t[58] = g, t[59] = y, t[60] = h, t[61] = Et, t[62] = O, t[63] = j.dateFormat, t[64] = j.enabled, t[65] = ot, t[66] = v, t[67] = m, t[68] = Ct, t[69] = $, t[70] = _, t[71] = S, t[72] = Jt, t[73] = n, t[74] = B, t[75] = ht) : ht = t[75];
+  let ut;
+  t[76] !== u?.footnote || t[77] !== u?.source || t[78] !== ct || t[79] !== et || t[80] !== h?.footnote || t[81] !== h?.source || t[82] !== m ? (ut = et || ct ? /* @__PURE__ */ o.jsx(Te, { styles: {
+    footnote: h?.footnote,
+    source: h?.source
+  }, classNames: {
+    footnote: u?.footnote,
+    source: u?.source
+  }, sources: et, footNote: ct, width: m }) : null, t[76] = u?.footnote, t[77] = u?.source, t[78] = ct, t[79] = et, t[80] = h?.footnote, t[81] = h?.source, t[82] = m, t[83] = ut) : ut = t[83];
+  let Yt;
+  return t[84] !== T || t[85] !== Nt || t[86] !== L || t[87] !== f || t[88] !== x || t[89] !== s || t[90] !== xt || t[91] !== p || t[92] !== ee || t[93] !== oe || t[94] !== mt || t[95] !== pt || t[96] !== ht || t[97] !== ut || t[98] !== Mt || t[99] !== m ? (Yt = /* @__PURE__ */ o.jsxs(Ge, { className: ee, style: oe, id: L, ref: ie, "aria-label": T, backgroundColor: Nt, theme: Mt, language: x, minHeight: s, width: m, height: f, relativeHeight: p, padding: xt, children: [
+    mt,
+    pt,
+    ht,
+    ut
+  ] }), t[84] = T, t[85] = Nt, t[86] = L, t[87] = f, t[88] = x, t[89] = s, t[90] = xt, t[91] = p, t[92] = ee, t[93] = oe, t[94] = mt, t[95] = pt, t[96] = ht, t[97] = ut, t[98] = Mt, t[99] = m, t[100] = Yt) : Yt = t[100], Yt;
+}
+function Ye(d) {
+  return d.y;
+}
+function qe(d) {
+  return d.x;
+}
+function Je(d) {
+  return d.properties.NAME !== "Antarctica";
+}
+function Ke(d) {
+  return d !== void 0;
+}
+function Ze(d) {
+  return d !== void 0;
+}
+function Qe(d) {
+  return d.data;
+}
+function to(d) {
+  return d !== void 0;
+}
+function eo(d) {
+  return d.data;
+}
+function oo(d, t) {
+  return Ue(d, t);
 }
 export {
-  Wt as BiVariateChoroplethMap
+  Po as BiVariateChoroplethMap
 };
 //# sourceMappingURL=BiVariateChoroplethMap.js.map