@undp/data-viz 1.5.9 → 2.0.0

package/dist/GeoHubCompareMaps.js

@@ -1,357 +1,282 @@
-import { j as e, m as E } from "./index-CHPV5EwG-DBWUSD9b.js";
-import G, { useState as M, useRef as p, useEffect as A } from "react";
-import * as w from "maplibre-gl";
-import * as I from "pmtiles";
+import { c as se, j as r } from "./index-CHPV5EwG-Curnpaqc.js";
+import ie, { useState as Q, useRef as k, useEffect as ne } from "react";
+import * as T from "maplibre-gl";
+import * as ae from "pmtiles";
 /* empty css                     */
-import { useSensors as W, useSensor as X, PointerSensor as _, DndContext as B, useDraggable as Z } from "@dnd-kit/core";
-import { restrictToHorizontalAxis as F } from "@dnd-kit/modifiers";
-import { X as O, C as V } from "./index-zZjQEHlm.js";
-import { s as q } from "./string2HTML-oFCROsus.js";
-import { s as T } from "./select-DKy99ogv.js";
-import { GraphHeader as J } from "./GraphHeader.js";
-import { GraphFooter as K } from "./GraphFooter.js";
-function Q(c, n) {
-  let r = !1;
-  function t(o, d) {
-    if (!r) {
-      r = !0;
-      const s = o.getCenter(), i = o.getZoom(), h = o.getBearing(), l = o.getPitch();
-      d.jumpTo({
-        center: s,
-        zoom: i,
-        bearing: h,
-        pitch: l
-      }), r = !1;
+import { useSensors as ce, useSensor as me, PointerSensor as fe, DndContext as de, useDraggable as ue } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as pe } from "@dnd-kit/modifiers";
+import { X as he, C as ge } from "./index-D491FEn1.js";
+import { s as be } from "./string2HTML-DhG75NqA.js";
+import { s as le } from "./select-DKy99ogv.js";
+import { GraphHeader as ve } from "./GraphHeader.js";
+import { GraphFooter as ye } from "./GraphFooter.js";
+import { a as xe, G as we } from "./GraphContainer-CRqzdKu2.js";
+function je(S, e) {
+  let a = !1;
+  function o(t, s) {
+    if (!a) {
+      a = !0;
+      const m = t.getCenter(), n = t.getZoom(), l = t.getBearing(), f = t.getPitch();
+      s.jumpTo({
+        center: m,
+        zoom: n,
+        bearing: l,
+        pitch: f
+      }), a = !1;
     }
   }
-  c.on("move", () => {
-    t(c, n);
-  }), n.on("move", () => {
-    t(n, c);
+  S.on("move", () => {
+    o(S, e);
+  }), e.on("move", () => {
+    o(e, S);
   });
 }
-function U(c) {
-  const { height: n, width: r, mapStyles: t, center: o, zoomLevel: d, mapLegend: s } = c, [i, h] = M(50), [l, D] = M(!1), g = p(null), [k, S] = M(!0), j = p(50), u = p(0), z = W(X(_, { activationConstraint: { distance: 0 } })), P = () => {
-    D(!0), j.current = i, g.current && (u.current = g.current.getBoundingClientRect().width);
-  }, f = (a) => {
-    if (!g.current || u.current === 0) return;
-    const m = a.delta.x / u.current * 100, N = Math.max(0, Math.min(100, j.current + m));
-    h(N);
-  }, b = () => {
-    D(!1);
-  }, $ = (a) => {
-    if (l || !g.current) return;
-    const m = g.current.getBoundingClientRect(), H = (a.clientX - m.left) / m.width * 100;
-    h(Math.max(0, Math.min(100, H)));
-  }, x = p(null), v = p(null), y = p(null), C = p(null);
-  return A(() => {
-    if (C.current && v.current && y.current && r) {
-      T(C.current).selectAll(".maplibregl-compare").remove(), T(v.current).selectAll("div").remove(), T(y.current).selectAll("div").remove();
-      const H = new I.Protocol();
-      w.addProtocol("pmtiles", H.tile);
-      const R = new w.Map({
-        container: v.current,
+function Ce(S) {
+  const e = se.c(47), {
+    height: a,
+    width: o,
+    mapStyles: t,
+    center: s,
+    zoomLevel: m,
+    mapLegend: n
+  } = S, [l, f] = Q(50), [h, b] = Q(!1), x = k(null), [P, F] = Q(!0), O = k(50), X = k(0);
+  let $;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? ($ = {
+    activationConstraint: {
+      distance: 0
+    }
+  }, e[0] = $) : $ = e[0];
+  const A = ce(me(fe, $));
+  let i;
+  e[1] !== l ? (i = () => {
+    b(!0), O.current = l, x.current && (X.current = x.current.getBoundingClientRect().width);
+  }, e[1] = l, e[2] = i) : i = e[2];
+  const c = i;
+  let R;
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (R = (Y) => {
+    if (!x.current || X.current === 0)
+      return;
+    const K = Y.delta.x / X.current * 100, ee = Math.max(0, Math.min(100, O.current + K));
+    f(ee);
+  }, e[3] = R) : R = e[3];
+  const V = R;
+  let _;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (_ = () => {
+    b(!1);
+  }, e[4] = _) : _ = e[4];
+  const q = _;
+  let H;
+  e[5] !== h ? (H = (Y) => {
+    if (h || !x.current)
+      return;
+    const K = x.current.getBoundingClientRect(), te = (Y.clientX - K.left) / K.width * 100;
+    f(Math.max(0, Math.min(100, te)));
+  }, e[5] = h, e[6] = H) : H = e[6];
+  const E = H, v = k(null), L = k(null), g = k(null), J = k(null);
+  let M, W;
+  e[7] !== s || e[8] !== t || e[9] !== o || e[10] !== m ? (M = () => {
+    if (J.current && L.current && g.current && o) {
+      le(J.current).selectAll(".maplibregl-compare").remove(), le(L.current).selectAll("div").remove(), le(g.current).selectAll("div").remove();
+      const te = new ae.Protocol();
+      T.addProtocol("pmtiles", te.tile);
+      const oe = new T.Map({
+        container: L.current,
         style: t[0],
-        center: o || [0, 0],
-        zoom: d || 4
-      }), L = new w.Map({
-        container: y.current,
+        center: s || [0, 0],
+        zoom: m || 4
+      }), re = new T.Map({
+        container: g.current,
         style: t[1],
-        center: o || [0, 0],
-        zoom: d || 4
+        center: s || [0, 0],
+        zoom: m || 4
       });
-      L.addControl(
-        new w.NavigationControl({
-          visualizePitch: !0,
-          showZoom: !0,
-          showCompass: !0
-        }),
-        "bottom-right"
-      ), R.addControl(new w.ScaleControl(), "bottom-left"), R.addControl(
-        new w.NavigationControl({
-          visualizePitch: !0,
-          showZoom: !0,
-          showCompass: !0
-        }),
-        "bottom-right"
-      ), L.addControl(new w.ScaleControl(), "bottom-left"), Q(R, L);
-    }
-  }, [r, t, o, d]), /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: "flex flex-col grow justify-center leading-0",
-      ref: x,
-      "aria-label": "Map area",
-      children: [
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            style: {
-              width: r,
-              height: n
-            },
-            children: /* @__PURE__ */ e.jsx(
-              "div",
-              {
-                ref: C,
-                className: "map maplibre-show-control relative w-full h-full",
-                style: { inset: 0 },
-                children: /* @__PURE__ */ e.jsx(
-                  B,
-                  {
-                    sensors: z,
-                    modifiers: [F],
-                    onDragStart: P,
-                    onDragMove: f,
-                    onDragEnd: b,
-                    children: /* @__PURE__ */ e.jsxs(
-                      "div",
-                      {
-                        ref: g,
-                        style: {
-                          position: "relative",
-                          width: r,
-                          height: n,
-                          overflow: "hidden",
-                          cursor: l ? "grabbing" : "col-resize",
-                          userSelect: "none"
-                          // Prevent text selection during drag
-                        },
-                        onClick: $,
-                        children: [
-                          /* @__PURE__ */ e.jsx(
-                            "div",
-                            {
-                              ref: y,
-                              className: "absolute h-full rightMap w-full",
-                              style: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                clipPath: `polygon(${i}% 0%, ${i}% 100%, 100% 100%, 100% 0%)`
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ e.jsx(
-                            "div",
-                            {
-                              ref: v,
-                              className: "absolute h-full leftMap w-full",
-                              style: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                inset: 0,
-                                clipPath: `polygon(0% 0%, ${i}% 0%, ${i}% 100%, 0% 100%)`
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ e.jsx(Y, { position: i })
-                        ]
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          }
-        ),
-        s ? /* @__PURE__ */ e.jsx("div", { className: "absolute left-[22px] bottom-13", children: k ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          /* @__PURE__ */ e.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: () => {
-                S(!1);
-              },
-              children: /* @__PURE__ */ e.jsx(O, {})
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",
-              dangerouslySetInnerHTML: typeof s == "string" ? { __html: q(s) } : void 0,
-              children: G.isValidElement(s) ? s : null
-            }
-          )
-        ] }) : /* @__PURE__ */ e.jsx(
-          "button",
-          {
-            type: "button",
-            className: "mb-0 border-0 bg-transparent p-0 self-start",
-            onClick: () => {
-              S(!0);
-            },
-            children: /* @__PURE__ */ e.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" })
-          }
-        ) }) : null
-      ]
-    }
-  );
-}
-function Y(c) {
-  const { position: n } = c, { attributes: r, listeners: t, setNodeRef: o } = Z({ id: "slider-handle" });
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: o,
-      style: {
-        position: "absolute",
-        left: `${n}%`,
-        top: 0,
-        bottom: 0,
-        width: "40px",
-        transform: "translateX(-50%)",
-        cursor: "col-resize",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-        touchAction: "none"
-      },
-      ...t,
-      ...r,
-      children: [
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            className: "h-full bg-primary-blue-600 dark:bg-primary-blue-400",
-            style: { width: "2px" }
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            className: "flex bg-primary-blue-600 dark:bg-primary-blue-400 rounded-full absolute items-center justify-center text-primary-white font-primary-white",
-            style: {
-              boxShadow: "inset 0 0 0 1px #fff",
-              width: "42px",
-              height: "42px",
-              top: "calc(50% - 21px)",
-              left: "0",
-              cursor: "col-resize"
-            },
-            children: /* @__PURE__ */ e.jsx(V, {})
-          }
-        )
-      ]
+      re.addControl(new T.NavigationControl({
+        visualizePitch: !0,
+        showZoom: !0,
+        showCompass: !0
+      }), "bottom-right"), oe.addControl(new T.ScaleControl(), "bottom-left"), oe.addControl(new T.NavigationControl({
+        visualizePitch: !0,
+        showZoom: !0,
+        showCompass: !0
+      }), "bottom-right"), re.addControl(new T.ScaleControl(), "bottom-left"), je(oe, re);
     }
-  );
+  }, W = [o, t, s, m], e[7] = s, e[8] = t, e[9] = o, e[10] = m, e[11] = M, e[12] = W) : (M = e[11], W = e[12]), ne(M, W);
+  let w;
+  e[13] !== a || e[14] !== o ? (w = {
+    width: o,
+    height: a
+  }, e[13] = a, e[14] = o, e[15] = w) : w = e[15];
+  let B;
+  e[16] === Symbol.for("react.memo_cache_sentinel") ? (B = {
+    inset: 0
+  }, e[16] = B) : B = e[16];
+  let D;
+  e[17] === Symbol.for("react.memo_cache_sentinel") ? (D = [pe], e[17] = D) : D = e[17];
+  const G = h ? "grabbing" : "col-resize";
+  let j;
+  e[18] !== a || e[19] !== G || e[20] !== o ? (j = {
+    position: "relative",
+    width: o,
+    height: a,
+    overflow: "hidden",
+    cursor: G,
+    userSelect: "none"
+  }, e[18] = a, e[19] = G, e[20] = o, e[21] = j) : j = e[21];
+  const I = `polygon(${l}% 0%, ${l}% 100%, 100% 100%, 100% 0%)`;
+  let d;
+  e[22] !== I ? (d = /* @__PURE__ */ r.jsx("div", { ref: g, className: "absolute h-full rightMap w-full", style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    clipPath: I
+  } }), e[22] = I, e[23] = d) : d = e[23];
+  const C = `polygon(0% 0%, ${l}% 0%, ${l}% 100%, 0% 100%)`;
+  let u;
+  e[24] !== C ? (u = /* @__PURE__ */ r.jsx("div", { ref: L, className: "absolute h-full leftMap w-full", style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    inset: 0,
+    clipPath: C
+  } }), e[24] = C, e[25] = u) : u = e[25];
+  let p;
+  e[26] !== l ? (p = /* @__PURE__ */ r.jsx(Se, { position: l }), e[26] = l, e[27] = p) : p = e[27];
+  let y;
+  e[28] !== E || e[29] !== j || e[30] !== d || e[31] !== u || e[32] !== p ? (y = /* @__PURE__ */ r.jsxs("div", { ref: x, style: j, onClick: E, children: [
+    d,
+    u,
+    p
+  ] }), e[28] = E, e[29] = j, e[30] = d, e[31] = u, e[32] = p, e[33] = y) : y = e[33];
+  let N;
+  e[34] !== c || e[35] !== A || e[36] !== y ? (N = /* @__PURE__ */ r.jsx("div", { ref: J, className: "map maplibre-show-control relative w-full h-full", style: B, children: /* @__PURE__ */ r.jsx(de, { sensors: A, modifiers: D, onDragStart: c, onDragMove: V, onDragEnd: q, children: y }) }), e[34] = c, e[35] = A, e[36] = y, e[37] = N) : N = e[37];
+  let z;
+  e[38] !== N || e[39] !== w ? (z = /* @__PURE__ */ r.jsx("div", { style: w, children: N }), e[38] = N, e[39] = w, e[40] = z) : z = e[40];
+  let Z;
+  e[41] !== n || e[42] !== P ? (Z = n ? /* @__PURE__ */ r.jsx("div", { className: "absolute left-[22px] bottom-13", children: P ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.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: () => {
+      F(!1);
+    }, children: /* @__PURE__ */ r.jsx(he, {}) }),
+    /* @__PURE__ */ r.jsx("div", { className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]", dangerouslySetInnerHTML: typeof n == "string" ? {
+      __html: be(n)
+    } : void 0, children: ie.isValidElement(n) ? n : null })
+  ] }) : /* @__PURE__ */ r.jsx("button", { type: "button", className: "mb-0 border-0 bg-transparent p-0 self-start", onClick: () => {
+    F(!0);
+  }, children: /* @__PURE__ */ r.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" }) }) }) : null, e[41] = n, e[42] = P, e[43] = Z) : Z = e[43];
+  let U;
+  return e[44] !== z || e[45] !== Z ? (U = /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col grow justify-center leading-0", ref: v, "aria-label": "Map area", children: [
+    z,
+    Z
+  ] }), e[44] = z, e[45] = Z, e[46] = U) : U = e[46], U;
 }
-function de(c) {
+function Se(S) {
+  const e = se.c(10), {
+    position: a
+  } = S;
+  let o;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (o = {
+    id: "slider-handle"
+  }, e[0] = o) : o = e[0];
   const {
-    graphTitle: n,
-    height: r,
+    attributes: t,
+    listeners: s,
+    setNodeRef: m
+  } = ue(o), n = `${a}%`;
+  let l;
+  e[1] !== n ? (l = {
+    position: "absolute",
+    left: n,
+    top: 0,
+    bottom: 0,
+    width: "40px",
+    transform: "translateX(-50%)",
+    cursor: "col-resize",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 10,
+    touchAction: "none"
+  }, e[1] = n, e[2] = l) : l = e[2];
+  let f;
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ r.jsx("div", { className: "h-full bg-primary-blue-600 dark:bg-primary-blue-400", style: {
+    width: "2px"
+  } }), e[3] = f) : f = e[3];
+  let h;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ r.jsx("div", { className: "flex bg-primary-blue-600 dark:bg-primary-blue-400 rounded-full absolute items-center justify-center text-primary-white font-primary-white", style: {
+    boxShadow: "inset 0 0 0 1px #fff",
+    width: "42px",
+    height: "42px",
+    top: "calc(50% - 21px)",
+    left: "0",
+    cursor: "col-resize"
+  }, children: /* @__PURE__ */ r.jsx(ge, {}) }), e[4] = h) : h = e[4];
+  let b;
+  return e[5] !== t || e[6] !== s || e[7] !== m || e[8] !== l ? (b = /* @__PURE__ */ r.jsxs("div", { ref: m, style: l, ...s, ...t, children: [
+    f,
+    h
+  ] }), e[5] = t, e[6] = s, e[7] = m, e[8] = l, e[9] = b) : b = e[9], b;
+}
+function $e(S) {
+  const e = se.c(49), {
+    graphTitle: a,
+    height: o,
     width: t,
-    relativeHeight: o,
-    sources: d,
-    graphDescription: s,
-    footNote: i,
-    padding: h,
-    backgroundColor: l = !1,
-    graphID: D,
-    mapStyles: g,
-    center: k = [0, 0],
-    zoomLevel: S = 3,
-    language: j = "en",
-    minHeight: u = 0,
-    theme: z = "light",
-    ariaLabel: P,
-    styles: f,
-    classNames: b,
-    mapLegend: $
-  } = c, [x, v] = M(0), [y, C] = M(0), a = p(null);
-  return A(() => {
-    const m = new ResizeObserver((N) => {
-      v(t || N[0].target.clientWidth || 620), C(r || N[0].target.clientHeight || 480);
+    relativeHeight: s,
+    sources: m,
+    graphDescription: n,
+    footNote: l,
+    padding: f,
+    backgroundColor: h,
+    graphID: b,
+    mapStyles: x,
+    center: P,
+    zoomLevel: F,
+    language: O,
+    minHeight: X,
+    theme: $,
+    ariaLabel: A,
+    styles: i,
+    classNames: c,
+    mapLegend: R
+  } = S, V = h === void 0 ? !1 : h;
+  let _;
+  e[0] !== P ? (_ = P === void 0 ? [0, 0] : P, e[0] = P, e[1] = _) : _ = e[1];
+  const q = _, H = F === void 0 ? 3 : F, E = O === void 0 ? "en" : O, v = X === void 0 ? 0 : X, L = $ === void 0 ? "light" : $, [g, J] = Q(0), [M, W] = Q(0), w = k(null), B = k(null);
+  let D, G;
+  e[2] === Symbol.for("react.memo_cache_sentinel") ? (D = () => {
+    const N = new ResizeObserver((z) => {
+      J(z[0].target.clientWidth || 620), W(z[0].target.clientHeight || 480);
     });
-    return a.current && (C(a.current.clientHeight || 480), v(a.current.clientWidth || 620), t || m.observe(a.current)), () => m.disconnect();
-  }, [t, r]), /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      className: `${z || "light"} flex  ${t ? "w-fit grow-0" : "w-full grow"}`,
-      dir: j === "he" || j === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: E(
-            `${l ? l === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${j || "en"}`,
-            t ? "w-fit" : "w-full",
-            b?.graphContainer
-          ),
-          style: {
-            ...f?.graphContainer || {},
-            ...l && l !== !0 ? { backgroundColor: l } : {}
-          },
-          id: D,
-          "aria-label": P || `${n ? `The graph shows ${n}. ` : ""}This is a comparison between two maps.${s ? ` ${s}` : ""}`,
-          children: /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: l ? h || "1rem" : h || 0 },
-              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                n || s ? /* @__PURE__ */ e.jsx(
-                  J,
-                  {
-                    styles: {
-                      title: f?.title,
-                      description: f?.description
-                    },
-                    classNames: {
-                      title: b?.title,
-                      description: b?.description
-                    },
-                    graphTitle: n,
-                    graphDescription: s,
-                    width: t
-                  }
-                ) : null,
-                /* @__PURE__ */ e.jsx(
-                  "div",
-                  {
-                    className: "flex flex-col grow justify-center leading-0",
-                    ref: a,
-                    "aria-label": "map area",
-                    children: (t || x) && (r || y) ? /* @__PURE__ */ e.jsx(
-                      U,
-                      {
-                        width: t || x,
-                        height: Math.max(
-                          u,
-                          r || (o ? u ? (t || x) * o > u ? (t || x) * o : u : (t || x) * o : y)
-                        ),
-                        mapStyles: g,
-                        center: k,
-                        zoomLevel: S,
-                        mapLegend: $
-                      }
-                    ) : null
-                  }
-                ),
-                d || i ? /* @__PURE__ */ e.jsx(
-                  K,
-                  {
-                    styles: { footnote: f?.footnote, source: f?.source },
-                    classNames: {
-                      footnote: b?.footnote,
-                      source: b?.source
-                    },
-                    sources: d,
-                    footNote: i,
-                    width: t
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
+    return w.current && N.observe(w.current), () => N.disconnect();
+  }, G = [], e[2] = D, e[3] = G) : (D = e[2], G = e[3]), ne(D, G);
+  const j = c?.graphContainer, I = i?.graphContainer;
+  let d;
+  e[4] !== c?.description || e[5] !== c?.title || e[6] !== n || e[7] !== a || e[8] !== i?.description || e[9] !== i?.title || e[10] !== t ? (d = a || n ? /* @__PURE__ */ r.jsx(ve, { styles: {
+    title: i?.title,
+    description: i?.description
+  }, classNames: {
+    title: c?.title,
+    description: c?.description
+  }, graphTitle: a, graphDescription: n, width: t }) : null, e[4] = c?.description, e[5] = c?.title, e[6] = n, e[7] = a, e[8] = i?.description, e[9] = i?.title, e[10] = t, e[11] = d) : d = e[11];
+  let C;
+  e[12] !== q || e[13] !== o || e[14] !== R || e[15] !== x || e[16] !== v || e[17] !== s || e[18] !== M || e[19] !== g || e[20] !== t || e[21] !== H ? (C = g && M ? /* @__PURE__ */ r.jsx(Ce, { width: t || g, height: Math.max(v, o || (s ? v ? (t || g) * s > v ? (t || g) * s : v : (t || g) * s : M)), mapStyles: x, center: q, zoomLevel: H, mapLegend: R }) : null, e[12] = q, e[13] = o, e[14] = R, e[15] = x, e[16] = v, e[17] = s, e[18] = M, e[19] = g, e[20] = t, e[21] = H, e[22] = C) : C = e[22];
+  let u;
+  e[23] !== C ? (u = /* @__PURE__ */ r.jsx(xe, { ref: w, children: C }), e[23] = C, e[24] = u) : u = e[24];
+  let p;
+  e[25] !== c?.footnote || e[26] !== c?.source || e[27] !== l || e[28] !== m || e[29] !== i?.footnote || e[30] !== i?.source || e[31] !== t ? (p = m || l ? /* @__PURE__ */ r.jsx(ye, { styles: {
+    footnote: i?.footnote,
+    source: i?.source
+  }, classNames: {
+    footnote: c?.footnote,
+    source: c?.source
+  }, sources: m, footNote: l, width: t }) : null, e[25] = c?.footnote, e[26] = c?.source, e[27] = l, e[28] = m, e[29] = i?.footnote, e[30] = i?.source, e[31] = t, e[32] = p) : p = e[32];
+  let y;
+  return e[33] !== A || e[34] !== V || e[35] !== b || e[36] !== o || e[37] !== E || e[38] !== v || e[39] !== f || e[40] !== s || e[41] !== I || e[42] !== d || e[43] !== u || e[44] !== p || e[45] !== j || e[46] !== L || e[47] !== t ? (y = /* @__PURE__ */ r.jsxs(we, { className: j, style: I, id: b, ref: B, "aria-label": A, backgroundColor: V, theme: L, language: E, minHeight: v, width: t, height: o, relativeHeight: s, padding: f, children: [
+    d,
+    u,
+    p
+  ] }), e[33] = A, e[34] = V, e[35] = b, e[36] = o, e[37] = E, e[38] = v, e[39] = f, e[40] = s, e[41] = I, e[42] = d, e[43] = u, e[44] = p, e[45] = j, e[46] = L, e[47] = t, e[48] = y) : y = e[48], y;
 }
 export {
-  de as GeoHubCompareMaps
+  $e as GeoHubCompareMaps
 };
 //# sourceMappingURL=GeoHubCompareMaps.js.map