@undp/data-viz 1.5.9 → 2.0.1

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