@undp/data-viz 2.6.0 → 2.6.1

package/dist/ThreeDGlobe.js

@@ -1,419 +1,2 @@
-import { j as i, c as nt } from "./compiler-runtime-qHgugrLy.js";
-import { useState as I, useRef as Ke, useEffect as G, useCallback as lt, useEffectEvent as ct } from "react";
-import { Spinner as dt } from "@undp/design-system-react/Spinner";
-import pt from "react-globe.gl";
-import { i as ht } from "./index-Bwrro8-q.js";
-import * as $ from "three";
-import { P as Qe } from "@undp/design-system-react/Typography";
-import { cn as mt } from "@undp/design-system-react/cn";
-import { g as ut } from "./_commonjsHelpers-ByX85dGu.js";
-import { T as gt } from "./Tooltip-DO56mY4b.js";
-import { n as ft } from "./numberFormattingFunction-BUUV_luR.js";
-import { X as vt, E as yt } from "./index-D_ls5oK8.js";
-import { g as bt } from "./getCentroidCoordinates-s0OOUjLF.js";
-import { D as xt } from "./DetailsModal-k-Me_U_T.js";
-import { o as wt } from "./ordinal-CHaxGJ_l.js";
-import { t as Ct } from "./threshold-DFfqcDMa.js";
-import { GraphHeader as Dt } from "./GraphHeader.js";
-import { GraphFooter as St } from "./GraphFooter.js";
-import { b as jt } from "./fetchAndParseData-CDjQZ1fL.js";
-import { Colors as ae } from "./Colors.js";
-import { g as Nt } from "./getUniqValue-DsqSii6M.js";
-import { g as Rt } from "./getJenks-DTCcQSDi.js";
-import { a as kt, G as Ot } from "./GraphContainer-DcOM2CI6.js";
-var Ye, et;
-function Pt() {
-  if (et) return Ye;
-  et = 1;
-  var t = function(o) {
-    return o.charAt(0) === "#" ? o.slice(1) : o;
-  }, e = function(o) {
-    var n = o.length === 3 || o.length === 4, f = n ? "".concat(o.slice(0, 1)).concat(o.slice(0, 1)) : o.slice(0, 2), s = n ? "".concat(o.slice(1, 2)).concat(o.slice(1, 2)) : o.slice(2, 4), w = n ? "".concat(o.slice(2, 3)).concat(o.slice(2, 3)) : o.slice(4, 6), P = (n ? "".concat(o.slice(3, 4)).concat(o.slice(3, 4)) : o.slice(6, 8)) || "ff";
-    return {
-      r: f,
-      g: s,
-      b: w,
-      a: P
-    };
-  }, d = function(o) {
-    return parseInt(o, 16);
-  }, b = function(o) {
-    var n = o.r, f = o.g, s = o.b, w = o.a;
-    return {
-      r: d(n),
-      g: d(f),
-      b: d(s),
-      a: +(d(w) / 255).toFixed(2)
-    };
-  }, x = function(o) {
-    return !isNaN(parseFloat(o)) && isFinite(o);
-  }, D = function(o, n) {
-    var f = o.r, s = o.g, w = o.b, P = o.a, E = x(n) ? n : P;
-    return "rgba(".concat(f, ", ").concat(s, ", ").concat(w, ", ").concat(E, ")");
-  }, g = function(o, n) {
-    var f = t(o), s = e(f), w = b(s);
-    return D(w, n);
-  };
-  return Ye = g, Ye;
-}
-var Et = Pt();
-const tt = /* @__PURE__ */ ut(Et);
-function Lt(t) {
-  let e;
-  switch (t.type) {
-    case "ambient":
-      e = new $.AmbientLight(t.color, t.intensity);
-      break;
-    case "directional":
-      e = new $.DirectionalLight(t.color, t.intensity), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z)), (t.target || t.position === "camera") && e.target.position.set(t.target?.x || 0, t.target?.y || 0, t.target?.z === void 0 ? -1 : t.target.z), t.castShadow && (e.castShadow = !0, t.shadow && (e.shadow.mapSize.width = t.shadow.mapSize.width, e.shadow.mapSize.height = t.shadow.mapSize.height, e.shadow.camera.near = t.shadow.camera.near, e.shadow.camera.far = t.shadow.camera.far));
-      break;
-    case "point":
-      e = new $.PointLight(t.color, t.intensity, t.distance || 0, t.decay || 2), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z));
-      break;
-    case "spot":
-      e = new $.SpotLight(t.color, t.intensity, t.distance || 0, t.angle || Math.PI / 3, t.penumbra || 0, t.decay || 2), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z)), (t.target || t.position === "camera") && e.target.position.set(t.target?.x || 0, t.target?.y || 0, t.target?.z || 0), t.castShadow && (e.castShadow = !0, t.shadow && (e.shadow.mapSize.width = t.shadow.mapSize.width, e.shadow.mapSize.height = t.shadow.mapSize.height, e.shadow.camera.near = t.shadow.camera.near, e.shadow.camera.far = t.shadow.camera.far));
-      break;
-    default:
-      throw new Error("Unknown light type");
-  }
-  return e;
-}
-function zt(t) {
-  const {
-    width: e,
-    autoRotate: d,
-    data: b,
-    enableZoom: x,
-    categorical: D,
-    colorDomain: g,
-    colors: l,
-    globeMaterial: o,
-    height: n,
-    polygonData: f,
-    mapProperty: s,
-    mapBorderColor: w,
-    atmosphereColor: P,
-    tooltip: E,
-    styles: be,
-    classNames: W,
-    mapNoDataColor: ie,
-    colorLegendTitle: C,
-    showColorScale: se,
-    hoverStrokeColor: ne,
-    detailsOnClick: Z,
-    onSeriesMouseClick: V,
-    onSeriesMouseOver: xe,
-    resetSelectionOnDoubleClick: we,
-    highlightedIds: L,
-    scale: z,
-    globeOffset: m,
-    polygonAltitude: u,
-    centerLng: _,
-    centerLat: J,
-    atmosphereAltitude: le,
-    globeCurvatureResolution: X,
-    fogSettings: M,
-    lights: T,
-    highlightedAltitude: ce,
-    selectedId: v,
-    collapseColorScaleByDefault: Y,
-    dimmedOpacity: A,
-    numberDisplayOptions: U
-  } = t, [de, Ce] = I(!1), p = Ke(void 0), [R, q] = I(void 0), [De, pe] = I(Y === void 0 ? !(e < 680) : !Y), [K, Q] = I({
-    x: 0,
-    y: 0
-  }), [N, he] = I(void 0), ee = D ? wt().domain(g).range(l) : Ct().domain(g).range(l);
-  G(() => {
-    p.current && (p.current.controls().enableZoom = x);
-  }, [x]), G(() => {
-    p.current && (N || v ? p.current.controls().autoRotate = !1 : (p.current.controls().autoRotate = d !== 0, p.current.controls().autoRotateSpeed = d));
-  }, [N, v, d]), G(() => {
-    if (p.current && v) {
-      const r = f.find((y) => y.properties[s] === v), [a, c] = bt(r);
-      p.current.pointOfView({
-        lat: c,
-        lng: a,
-        altitude: z
-      }, 1e3);
-    }
-  }, [v, z, f, s]), G(() => {
-    const r = p.current?.renderer().domElement;
-    if (!r) return;
-    const a = (c) => {
-      Q({
-        x: c.clientX,
-        y: c.clientY
-      });
-    };
-    return r.addEventListener("mousemove", a), () => r.removeEventListener("mousemove", a);
-  }, []), G(() => {
-    p.current && p.current.pointOfView({
-      lat: J,
-      lng: _,
-      altitude: z
-    }, 1e3);
-  }, [z, _, J]);
-  const S = o || new $.MeshBasicMaterial({
-    color: "#FFF"
-  }), B = lt(() => {
-    if (!p.current) return;
-    const r = p.current.scene(), a = p.current.camera();
-    let c = [];
-    r.traverse((h) => {
-      h instanceof $.Light && c.push(h);
-    }), c = [...c, ...a.children], c.forEach((h) => h.parent?.remove(h)), T.map((h) => Lt(h)).forEach((h, j) => {
-      T[j].type !== "ambient" && T[j].position === "camera" ? (a.add(h), T[j].type !== "point" && a.add(h.target)) : r.add(h);
-    }), M && (r.fog = new $.Fog(M.color, M.near, M.far));
-  }, [T, M]), k = () => {
-    Ce(!0), B();
-  };
-  return G(() => {
-    de && B();
-  }, [de, B]), /* @__PURE__ */ i.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ i.jsx(pt, { ref: p, height: n, width: e, globeOffset: m, lineHoverPrecision: 0, polygonsData: f, polygonAltitude: (r) => L?.includes(r?.properties?.[s]) || r?.properties?.[s] === v || r?.properties?.[s] === N?.id || r?.properties?.[s] === R?.id ? ce : u, polygonCapColor: (r) => {
-      const a = v ? r?.properties?.[s] === v ? 1 : A : L ? L.includes(r?.properties?.[s]) ? 1 : A : 1, c = r?.properties?.[s], y = b.find((j) => j.id === c)?.x, h = y != null ? ee(y) : ie;
-      return tt(h, `${a}`);
-    }, polygonSideColor: (r) => {
-      const a = r?.properties?.[s], c = b.find((j) => j.id === a)?.x, y = v ? r?.properties?.[s] === v ? 1 : A : L ? L.includes(r?.properties?.[s]) ? 1 : A : 1, h = c != null ? ee(c) : ie;
-      return tt(h, `${y}`);
-    }, polygonStrokeColor: (r) => r?.properties?.[s] === N?.id ? ne : w, onGlobeClick: () => {
-      q(void 0);
-    }, onPolygonClick: (r) => {
-      const a = r?.properties?.[s] ? b.find((c) => c.id === r?.properties?.[s]) : void 0;
-      (V || Z) && (ht(R, a) && we && a ? (q(void 0), V?.(void 0)) : (q(a), V?.(a)));
-    }, onPolygonHover: (r) => {
-      const a = r?.properties?.[s] ? b.find((c) => c.id === r?.properties?.[s]) : void 0;
-      he(a), xe?.(a);
-    }, atmosphereColor: P, atmosphereAltitude: le, globeCurvatureResolution: X, globeMaterial: S, backgroundColor: "rgba(0, 0, 0, 0)", polygonsTransitionDuration: 100, onGlobeReady: () => {
-      if (p.current) {
-        p.current.pointOfView({
-          lat: J,
-          lng: _
-        });
-        const r = p.current.scene();
-        setTimeout(() => {
-          (r.children[3]?.children[0]?.children[4]?.children || []).forEach((y) => {
-            const h = y.children[1];
-            h.renderOrder = 2;
-          });
-        }, 300);
-        const a = p.current.camera();
-        r.add(a), k();
-      }
-    } }),
-    se === !1 ? null : /* @__PURE__ */ i.jsx("div", { className: mt("absolute left-4 bottom-4 map-color-legend", W?.colorLegend), children: De ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-      /* @__PURE__ */ i.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: () => {
-        pe(!1);
-      }, children: /* @__PURE__ */ i.jsx(vt, {}) }),
-      /* @__PURE__ */ i.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: D ? void 0 : "340px"
-      }, children: [
-        C && C !== "" ? /* @__PURE__ */ i.jsx(Qe, { size: "xs", marginBottom: "xs", className: "p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300", style: {
-          display: "-webkit-box",
-          WebkitLineClamp: "1",
-          WebkitBoxOrient: "vertical"
-        }, children: C }) : null,
-        D ? /* @__PURE__ */ i.jsx("div", { className: "flex flex-col gap-3", children: g.map((r, a) => /* @__PURE__ */ i.jsxs("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ i.jsx("div", { className: "w-2 h-2 rounded-full", style: {
-            backgroundColor: l[a % l.length]
-          } }),
-          /* @__PURE__ */ i.jsx(Qe, { size: "sm", marginBottom: "none", leading: "none", children: r })
-        ] }, a)) }) : /* @__PURE__ */ i.jsx("svg", { width: "100%", viewBox: "0 0 320 30", direction: "ltr", children: /* @__PURE__ */ i.jsxs("g", { children: [
-          g.map((r, a) => /* @__PURE__ */ i.jsxs("g", { className: "cursor-pointer", children: [
-            /* @__PURE__ */ i.jsx("rect", { x: a * 320 / l.length + 1, y: 1, width: 320 / l.length - 2, height: 8, style: {
-              fill: l[a],
-              stroke: l[a]
-            } }),
-            /* @__PURE__ */ i.jsx("text", { x: (a + 1) * 320 / l.length, y: 25, className: "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs", style: {
-              textAnchor: "middle"
-            }, children: ft(r, void 0, U?.precision ?? 2, void 0, void 0, U?.locale || "en", U?.padZeros || !1) })
-          ] }, a)),
-          /* @__PURE__ */ i.jsx("g", { children: /* @__PURE__ */ i.jsx("rect", { x: g.length * 320 / l.length + 1, y: 1, width: 320 / l.length - 2, height: 8, style: {
-            fill: l[g.length],
-            stroke: l[g.length]
-          } }) })
-        ] }) })
-      ] })
-    ] }) : /* @__PURE__ */ i.jsx("button", { type: "button", className: "p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button", onClick: () => {
-      pe(!0);
-    }, children: /* @__PURE__ */ i.jsx(yt, {}) }) }),
-    N && E ? /* @__PURE__ */ i.jsx(gt, { data: N, body: E, xPos: K.x, yPos: K.y, backgroundStyle: be?.tooltip, className: W?.tooltip }) : null,
-    Z && R !== void 0 ? /* @__PURE__ */ i.jsx(xt, { body: Z, data: R, setData: q, className: W?.modal }) : null
-  ] });
-}
-function co(t) {
-  const e = nt.c(96), {
-    data: d,
-    mapData: b,
-    graphTitle: x,
-    colors: D,
-    sources: g,
-    graphDescription: l,
-    height: o,
-    width: n,
-    footNote: f,
-    colorDomain: s,
-    colorLegendTitle: w,
-    scaleType: P,
-    padding: E,
-    mapNoDataColor: be,
-    backgroundColor: W,
-    mapBorderColor: ie,
-    relativeHeight: C,
-    tooltip: se,
-    graphID: ne,
-    mapProperty: Z,
-    dataDownload: V,
-    language: xe,
-    minHeight: we,
-    theme: L,
-    ariaLabel: z,
-    styles: m,
-    classNames: u,
-    autoRotate: _,
-    enableZoom: J,
-    globeMaterial: le,
-    centerPoint: X,
-    atmosphereColor: M,
-    showColorScale: T,
-    resetSelectionOnDoubleClick: ce,
-    detailsOnClick: v,
-    onSeriesMouseOver: Y,
-    onSeriesMouseClick: A,
-    highlightedIds: U,
-    highlightedAltitude: de,
-    dimmedOpacity: Ce,
-    scale: p,
-    globeOffset: R,
-    polygonAltitude: q,
-    globeCurvatureResolution: De,
-    atmosphereAltitude: pe,
-    fogSettings: K,
-    lights: Q,
-    selectedId: N,
-    collapseColorScaleByDefault: he,
-    numberDisplayOptions: ee
-  } = t, S = b === void 0 ? "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json" : b, B = f === 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." : f, k = P === void 0 ? "threshold" : P, r = be === void 0 ? ae.light.graphNoData : be, a = W === void 0 ? !1 : W, c = ie === void 0 ? ae.light.grays["gray-500"] : ie, y = Z === void 0 ? "ISO3" : Z, h = V === void 0 ? !1 : V, j = xe === void 0 ? "en" : xe, O = we === void 0 ? 0 : we, F = L === void 0 ? "light" : L, me = _ === void 0 ? !0 : _, Ae = J === void 0 ? !0 : J;
-  let Se;
-  e[0] !== X ? (Se = X === void 0 ? [0, 0] : X, e[0] = X, e[1] = Se) : Se = e[1];
-  const je = Se, Be = M === void 0 ? "#999" : M, Fe = T === void 0 ? !0 : T, Ge = ce === void 0 ? !0 : ce, Ie = de === void 0 ? 0.1 : de, Ue = Ce === void 0 ? 0.3 : Ce, qe = p === void 0 ? 1 : p;
-  let Ne;
-  e[2] !== R ? (Ne = R === void 0 ? [0, 0] : R, e[2] = R, e[3] = Ne) : Ne = e[3];
-  const He = Ne, $e = q === void 0 ? 0.01 : q, We = De === void 0 ? 4 : De, Ze = pe === void 0 ? 0.15 : pe;
-  let Re;
-  e[4] !== Q ? (Re = Q === void 0 ? [{
-    type: "ambient",
-    color: 4210752,
-    intensity: 0.4
-  }, {
-    type: "directional",
-    color: 16777215,
-    intensity: 1,
-    position: {
-      x: 5,
-      y: 10,
-      z: 5
-    }
-  }] : Q, e[4] = Q, e[5] = Re) : Re = e[5];
-  const Ve = Re, [ke, ot] = I(void 0), [H, rt] = I(0), [ue, at] = I(0), _e = Ke(null), it = Ke(null);
-  let Oe, Pe;
-  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (Oe = () => {
-    const ve = new ResizeObserver((ye) => {
-      rt(ye[0].target.clientWidth || 620), at(ye[0].target.clientHeight || 480);
-    });
-    return _e.current && ve.observe(_e.current), () => ve.disconnect();
-  }, Pe = [], e[6] = Oe, e[7] = Pe) : (Oe = e[6], Pe = e[7]), G(Oe, Pe);
-  let Ee;
-  e[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (Ee = (ve) => {
-    ot(ve);
-  }, e[8] = Ee) : Ee = e[8];
-  const ge = ct(Ee);
-  let Le;
-  e[9] !== S || e[10] !== ge ? (Le = () => {
-    typeof S == "string" ? jt(S).then((ye) => {
-      if (S === "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json") {
-        const st = ye.features.map(It);
-        ge(st);
-      } else
-        ge(ye.features);
-    }) : ge(S.features);
-  }, e[9] = S, e[10] = ge, e[11] = Le) : Le = e[11];
-  let ze;
-  e[12] !== S ? (ze = [S], e[12] = S, e[13] = ze) : ze = e[13], G(Le, ze);
-  let Me;
-  e[14] !== s || e[15] !== D?.length || e[16] !== d || e[17] !== k ? (Me = s || (k === "categorical" ? Nt(d, "x") : Rt(d.map(Gt), D?.length || 4)), e[14] = s, e[15] = D?.length, e[16] = d, e[17] = k, e[18] = Me) : Me = e[18];
-  const fe = Me, Je = u?.graphContainer, Xe = m?.graphContainer;
-  let te;
-  e[19] !== u?.description || e[20] !== u?.title || e[21] !== d || e[22] !== h || e[23] !== l || e[24] !== x || e[25] !== m?.description || e[26] !== m?.title || e[27] !== n ? (te = x || l || h ? /* @__PURE__ */ i.jsx(Dt, { styles: {
-    title: m?.title,
-    description: m?.description
-  }, classNames: {
-    title: u?.title,
-    description: u?.description
-  }, graphTitle: x, graphDescription: l, width: n, graphDownload: void 0, dataDownload: h ? d.map(Ft).filter(Bt).length > 0 ? d.map(At).filter(Tt) : d.filter(Mt) : null }) : null, e[19] = u?.description, e[20] = u?.title, e[21] = d, e[22] = h, e[23] = l, e[24] = x, e[25] = m?.description, e[26] = m?.title, e[27] = n, e[28] = te) : te = e[28];
-  let oe;
-  e[29] !== Ze || e[30] !== Be || e[31] !== me || e[32] !== je || e[33] !== u || e[34] !== he || e[35] !== w || e[36] !== D || e[37] !== d || e[38] !== v || e[39] !== Ue || e[40] !== fe || e[41] !== Ae || e[42] !== K || e[43] !== We || e[44] !== le || e[45] !== He || e[46] !== o || e[47] !== Ie || e[48] !== U || e[49] !== Ve || e[50] !== c || e[51] !== r || e[52] !== y || e[53] !== ke || e[54] !== O || e[55] !== ee || e[56] !== A || e[57] !== Y || e[58] !== $e || e[59] !== C || e[60] !== Ge || e[61] !== qe || e[62] !== k || e[63] !== N || e[64] !== Fe || e[65] !== m || e[66] !== ue || e[67] !== H || e[68] !== F || e[69] !== se || e[70] !== n ? (oe = /* @__PURE__ */ i.jsx(kt, { ref: _e, children: H && ue && ke ? /* @__PURE__ */ i.jsx(zt, { data: d, globeOffset: He, polygonData: ke, colorDomain: fe, width: H, height: ue, colors: D || (k === "categorical" ? ae[F].sequentialColors[`neutralColorsx0${fe.length}`] : ae[F].sequentialColors[`neutralColorsx0${fe.length + 1}`]), mapNoDataColor: r, categorical: k === "categorical", mapBorderColor: c, tooltip: se, mapProperty: y, styles: m, classNames: u, autoRotate: me === !0 ? 1.5 : me === !1 ? 0 : me, enableZoom: Ae, globeMaterial: le, atmosphereColor: Be, colorLegendTitle: w, showColorScale: Fe, hoverStrokeColor: F === "light" ? ae.light.grays["gray-700"] : ae.light.grays["gray-300"], highlightedIds: U, resetSelectionOnDoubleClick: Ge, detailsOnClick: v, onSeriesMouseOver: Y, onSeriesMouseClick: A, scale: qe, polygonAltitude: $e, centerLat: je[0], centerLng: je[1], atmosphereAltitude: Ze, globeCurvatureResolution: We, fogSettings: K, lights: Ve, highlightedAltitude: Ie, selectedId: N, collapseColorScaleByDefault: he, dimmedOpacity: Ue, numberDisplayOptions: ee }) : /* @__PURE__ */ i.jsx("div", { style: {
-    height: `${Math.max(O, o || (C ? O ? (n || H) * C > O ? (n || H) * C : O : (n || H) * C : ue))}px`
-  }, className: "flex items-center justify-center", children: /* @__PURE__ */ i.jsx(dt, { "aria-label": "Loading graph" }) }) }), e[29] = Ze, e[30] = Be, e[31] = me, e[32] = je, e[33] = u, e[34] = he, e[35] = w, e[36] = D, e[37] = d, e[38] = v, e[39] = Ue, e[40] = fe, e[41] = Ae, e[42] = K, e[43] = We, e[44] = le, e[45] = He, e[46] = o, e[47] = Ie, e[48] = U, e[49] = Ve, e[50] = c, e[51] = r, e[52] = y, e[53] = ke, e[54] = O, e[55] = ee, e[56] = A, e[57] = Y, e[58] = $e, e[59] = C, e[60] = Ge, e[61] = qe, e[62] = k, e[63] = N, e[64] = Fe, e[65] = m, e[66] = ue, e[67] = H, e[68] = F, e[69] = se, e[70] = n, e[71] = oe) : oe = e[71];
-  let re;
-  e[72] !== u?.footnote || e[73] !== u?.source || e[74] !== B || e[75] !== g || e[76] !== m?.footnote || e[77] !== m?.source || e[78] !== n ? (re = g || B ? /* @__PURE__ */ i.jsx(St, { styles: {
-    footnote: m?.footnote,
-    source: m?.source
-  }, classNames: {
-    footnote: u?.footnote,
-    source: u?.source
-  }, sources: g, footNote: B, width: n }) : null, e[72] = u?.footnote, e[73] = u?.source, e[74] = B, e[75] = g, e[76] = m?.footnote, e[77] = m?.source, e[78] = n, e[79] = re) : re = e[79];
-  let Te;
-  return e[80] !== z || e[81] !== a || e[82] !== ne || e[83] !== o || e[84] !== j || e[85] !== O || e[86] !== E || e[87] !== C || e[88] !== Je || e[89] !== Xe || e[90] !== te || e[91] !== oe || e[92] !== re || e[93] !== F || e[94] !== n ? (Te = /* @__PURE__ */ i.jsxs(Ot, { className: Je, style: Xe, id: ne, ref: it, "aria-label": z, backgroundColor: a, theme: F, language: j, minHeight: O, width: n, height: o, relativeHeight: C, padding: E, children: [
-    te,
-    oe,
-    re
-  ] }), e[80] = z, e[81] = a, e[82] = ne, e[83] = o, e[84] = j, e[85] = O, e[86] = E, e[87] = C, e[88] = Je, e[89] = Xe, e[90] = te, e[91] = oe, e[92] = re, e[93] = F, e[94] = n, e[95] = Te) : Te = e[95], Te;
-}
-function Mt(t) {
-  return t !== void 0;
-}
-function Tt(t) {
-  return t !== void 0;
-}
-function At(t) {
-  return t.data;
-}
-function Bt(t) {
-  return t !== void 0;
-}
-function Ft(t) {
-  return t.data;
-}
-function Gt(t) {
-  return t.x;
-}
-function It(t) {
-  if (t.geometry.type === "Polygon") {
-    const b = [...t.geometry.coordinates[0]].reverse(), x = {
-      ...t.geometry,
-      coordinates: [b]
-    };
-    return {
-      ...t,
-      geometry: x
-    };
-  }
-  const e = [];
-  t.geometry.coordinates.forEach((b) => {
-    const x = [...b[0]].reverse();
-    e.push([x]);
-  });
-  const d = {
-    ...t.geometry,
-    coordinates: e
-  };
-  return {
-    ...t,
-    geometry: d
-  };
-}
-export {
-  co as ThreeDGlobe
-};
-//# sourceMappingURL=ThreeDGlobe.js.map
+import { t as e } from "./ThreeDGlobe-DXL9WkNi.js";
+export { e as ThreeDGlobe };

package/dist/ThresholdColorLegendWithMouseOver.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./compiler-runtime-oPPev21o.cjs"),B=require("react"),P=require("@undp/design-system-react/cn"),_=require("@undp/design-system-react/Typography"),z=require("./numberFormattingFunction-u2iNHL_c.cjs");function H(A){const e=o.compilerRuntimeExports.c(55),{colorLegendTitle:k,colorDomain:r,colors:t,setSelectedColor:s,width:S,naColor:i,className:w,showNAColor:C,locale:T,naLabel:$}=A,R=T===void 0?"en":T,M=$===void 0?"NA":$,[l,c]=B.useState(void 0),n=i?320:360;let x;e[0]!==w?(x=P.cn("flex flex-wrap gap-0 justify-center leading-0",w),e[0]=w,e[1]=x):x=e[1];const b=S?`${S}px`:"none";let m;e[2]!==b?(m={maxWidth:b},e[2]=b,e[3]=m):m=e[3];let h;e[4]!==k?(h=k&&k!==""?o.jsxRuntimeExports.jsx(_.P,{size:"sm",marginBottom:"2xs",className:"w-full text-center",children:k}):null,e[4]=k,e[5]=h):h=e[5];let E;e[6]===Symbol.for("react.memo_cache_sentinel")?(E={maxWidth:"360px"},e[6]=E):E=e[6];let d;if(e[7]!==r||e[8]!==t||e[9]!==l||e[10]!==R||e[11]!==n||e[12]!==s){let D;e[14]!==t||e[15]!==l||e[16]!==R||e[17]!==n||e[18]!==s?(D=(F,a)=>o.jsxRuntimeExports.jsxs("g",{onMouseOver:()=>{c(t[a]),s(t[a])},onMouseLeave:()=>{c(void 0),s(void 0)},className:"cursor-pointer",children:[o.jsxRuntimeExports.jsx("rect",{x:a*n/t.length+1,y:1,width:n/t.length-2,height:8,className:`stroke-1 ${l===t[a]?"stroke-primary-gray-700 dark:stroke-primary-gray-300":""}`,style:{fill:t[a],...l!==t[a]?{stroke:t[a]}:{}}}),o.jsxRuntimeExports.jsx("text",{x:(a+1)*n/t.length,y:25,className:"fill-primary-gray-700 dark:fill-primary-gray-300 text-sm",style:{textAnchor:"middle"},children:z.numberFormattingFunction(F,void 0,2,"","",R)})]},a),e[14]=t,e[15]=l,e[16]=R,e[17]=n,e[18]=s,e[19]=D):D=e[19],d=r.map(D),e[7]=r,e[8]=t,e[9]=l,e[10]=R,e[11]=n,e[12]=s,e[13]=d}else d=e[13];let g;e[20]!==r.length||e[21]!==t||e[22]!==s?(g=()=>{c(t[r.length]),s(t[r.length])},e[20]=r.length,e[21]=t,e[22]=s,e[23]=g):g=e[23];let u;e[24]!==s?(u=()=>{c(void 0),s(void 0)},e[24]=s,e[25]=u):u=e[25];const L=r.length*n/t.length+1,O=n/t.length-2,W=`cursor-pointer stroke-1 ${l===t[r.length]?"stroke-primary-gray-700 dark:stroke-primary-gray-300":""}`,q=t[r.length];let y;e[26]!==r.length||e[27]!==t||e[28]!==l?(y=l!==t[r.length]?{stroke:t[r.length]}:{},e[26]=r.length,e[27]=t,e[28]=l,e[29]=y):y=e[29];let p;e[30]!==q||e[31]!==y?(p={fill:q,...y},e[30]=q,e[31]=y,e[32]=p):p=e[32];let f;e[33]!==L||e[34]!==O||e[35]!==W||e[36]!==p||e[37]!==g||e[38]!==u?(f=o.jsxRuntimeExports.jsx("g",{children:o.jsxRuntimeExports.jsx("rect",{onMouseOver:g,onMouseLeave:u,x:L,y:1,width:O,height:8,className:W,style:p})}),e[33]=L,e[34]=O,e[35]=W,e[36]=p,e[37]=g,e[38]=u,e[39]=f):f=e[39];let j;e[40]!==l||e[41]!==i||e[42]!==M||e[43]!==s||e[44]!==C?(j=C?o.jsxRuntimeExports.jsxs("g",{onMouseOver:()=>{c(i||"#D4D6D8"),s(i||"#D4D6D8")},onMouseLeave:()=>{c(void 0),s(void 0)},className:"cursor-pointer",children:[o.jsxRuntimeExports.jsx("rect",{x:335,y:1,width:24,height:8,className:`stroke-1 ${l===i?"stroke-primary-gray-700 dark:stroke-primary-gray-300":""}`,style:{fill:i||"#D4D6D8",...l!==i?{stroke:i}:{},strokeWidth:1}}),o.jsxRuntimeExports.jsx("text",{x:337.5,y:25,className:"fill-primary-gray-700 dark:fill-primary-gray-300 text-sm",style:{textAnchor:"start"},children:M})]}):null,e[40]=l,e[41]=i,e[42]=M,e[43]=s,e[44]=C,e[45]=j):j=e[45];let v;e[46]!==f||e[47]!==j||e[48]!==d?(v=o.jsxRuntimeExports.jsx("svg",{width:"100%",viewBox:"0 0 360 30",style:E,direction:"ltr",children:o.jsxRuntimeExports.jsxs("g",{children:[d,f,j]})}),e[46]=f,e[47]=j,e[48]=d,e[49]=v):v=e[49];let N;return e[50]!==v||e[51]!==x||e[52]!==m||e[53]!==h?(N=o.jsxRuntimeExports.jsxs("div",{className:x,style:m,"aria-label":"Color legend",children:[h,v]}),e[50]=v,e[51]=x,e[52]=m,e[53]=h,e[54]=N):N=e[54],N}exports.ThresholdColorLegendWithMouseOver=H;
-//# sourceMappingURL=ThresholdColorLegendWithMouseOver.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./jsx-runtime-Cd1vCQjn.cjs`),t=require(`./numberFormattingFunction-Caf5NyIo.cjs`);let n=require(`@undp/design-system-react/cn`),r=require(`react`),i=require(`@undp/design-system-react/Typography`);var a=e.t();function o(e){let{colorLegendTitle:o,colorDomain:s,colors:c,setSelectedColor:l,width:u,naColor:d,className:f,showNAColor:p,locale:m=`en`,naLabel:h=`NA`}=e,[g,_]=(0,r.useState)(void 0),v=d?320:360;return(0,a.jsxs)(`div`,{className:(0,n.cn)(`flex flex-wrap gap-0 justify-center leading-0`,f),style:{maxWidth:u?`${u}px`:`none`},children:[o&&o!==``?(0,a.jsx)(i.P,{size:`sm`,marginBottom:`2xs`,className:`w-full text-center`,children:o}):null,(0,a.jsxs)(`svg`,{width:`100%`,viewBox:`0 0 360 30`,style:{maxWidth:`360px`},direction:`ltr`,children:[(0,a.jsx)(`title`,{children:`Color legend`}),(0,a.jsxs)(`g`,{children:[s.map((e,n)=>(0,a.jsxs)(`g`,{onMouseOver:()=>{_(c[n]),l(c[n])},onFocus:()=>{_(c[n]),l(c[n])},onMouseLeave:()=>{_(void 0),l(void 0)},className:`cursor-pointer`,children:[(0,a.jsx)(`rect`,{x:n*v/c.length+1,y:1,width:v/c.length-2,height:8,className:`stroke-1 ${g===c[n]?`stroke-primary-gray-700 dark:stroke-primary-gray-300`:``}`,style:{fill:c[n],...g===c[n]?{}:{stroke:c[n]}}}),(0,a.jsx)(`text`,{x:(n+1)*v/c.length,y:25,className:`fill-primary-gray-700 dark:fill-primary-gray-300 text-sm`,style:{textAnchor:`middle`},children:t.t(e,void 0,2,``,``,m)})]},n)),(0,a.jsx)(`g`,{children:(0,a.jsx)(`rect`,{onMouseOver:()=>{_(c[s.length]),l(c[s.length])},onFocus:()=>{_(c[s.length]),l(c[s.length])},onMouseLeave:()=>{_(void 0),l(void 0)},x:s.length*v/c.length+1,y:1,width:v/c.length-2,height:8,className:`cursor-pointer stroke-1 ${g===c[s.length]?`stroke-primary-gray-700 dark:stroke-primary-gray-300`:``}`,style:{fill:c[s.length],...g===c[s.length]?{}:{stroke:c[s.length]}}})}),p?(0,a.jsxs)(`g`,{onMouseOver:()=>{_(d||`#D4D6D8`),l(d||`#D4D6D8`)},onFocus:()=>{_(d||`#D4D6D8`),l(d||`#D4D6D8`)},onMouseLeave:()=>{_(void 0),l(void 0)},className:`cursor-pointer`,children:[(0,a.jsx)(`rect`,{x:335,y:1,width:24,height:8,className:`stroke-1 ${g===d?`stroke-primary-gray-700 dark:stroke-primary-gray-300`:``}`,style:{fill:d||`#D4D6D8`,...g===d?{}:{stroke:d},strokeWidth:1}}),(0,a.jsx)(`text`,{x:337.5,y:25,className:`fill-primary-gray-700 dark:fill-primary-gray-300 text-sm`,style:{textAnchor:`start`},children:h})]}):null]})]})]})}exports.ThresholdColorLegendWithMouseOver=o;
+//# sourceMappingURL=ThresholdColorLegendWithMouseOver.cjs.map

package/dist/ThresholdColorLegendWithMouseOver.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdColorLegendWithMouseOver.cjs","sources":["../src/Components/Elements/ThresholdColorLegendWithMouseOver.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  colors: string[];\r\n  colorDomain: number[];\r\n  colorLegendTitle?: string;\r\n  setSelectedColor: (_d?: string) => void;\r\n  width?: number;\r\n  naColor?: string;\r\n  className?: string;\r\n  showNAColor: boolean;\r\n  locale?: string;\r\n  naLabel: string;\r\n}\r\n\r\nexport function ThresholdColorLegendWithMouseOver(props: Props) {\r\n  const {\r\n    colorLegendTitle,\r\n    colorDomain,\r\n    colors,\r\n    setSelectedColor,\r\n    width,\r\n    naColor,\r\n    className,\r\n    showNAColor,\r\n    locale = 'en',\r\n    naLabel = 'NA',\r\n  } = props;\r\n\r\n  const [hoveredColor, setHoveredColor] = useState<string | undefined>(undefined);\r\n  const mainColorWidth = naColor ? 320 : 360;\r\n  return (\r\n    <div\r\n      className={cn('flex flex-wrap gap-0 justify-center leading-0', className)}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n      aria-label='Color legend'\r\n    >\r\n      {colorLegendTitle && colorLegendTitle !== '' ? (\r\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\r\n          {colorLegendTitle}\r\n        </P>\r\n      ) : null}\r\n      <svg width='100%' viewBox='0 0 360 30' style={{ maxWidth: '360px' }} direction='ltr'>\r\n        <g>\r\n          {colorDomain.map((d, i) => (\r\n            <g\r\n              key={i}\r\n              onMouseOver={() => {\r\n                setHoveredColor(colors[i]);\r\n                setSelectedColor(colors[i]);\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              className='cursor-pointer'\r\n            >\r\n              <rect\r\n                x={(i * mainColorWidth) / colors.length + 1}\r\n                y={1}\r\n                width={mainColorWidth / colors.length - 2}\r\n                height={8}\r\n                className={`stroke-1 ${\r\n                  hoveredColor === colors[i]\r\n                    ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\r\n                    : ''\r\n                }`}\r\n                style={{\r\n                  fill: colors[i],\r\n                  ...(hoveredColor !== colors[i] ? { stroke: colors[i] } : {}),\r\n                }}\r\n              />\r\n              <text\r\n                x={((i + 1) * mainColorWidth) / colors.length}\r\n                y={25}\r\n                className='fill-primary-gray-700 dark:fill-primary-gray-300 text-sm'\r\n                style={{ textAnchor: 'middle' }}\r\n              >\r\n                {numberFormattingFunction(d as number, undefined, 2, '', '', locale)}\r\n              </text>\r\n            </g>\r\n          ))}\r\n          <g>\r\n            <rect\r\n              onMouseOver={() => {\r\n                setHoveredColor(colors[colorDomain.length]);\r\n                setSelectedColor(colors[colorDomain.length]);\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              x={(colorDomain.length * mainColorWidth) / colors.length + 1}\r\n              y={1}\r\n              width={mainColorWidth / colors.length - 2}\r\n              height={8}\r\n              className={`cursor-pointer stroke-1 ${\r\n                hoveredColor === colors[colorDomain.length]\r\n                  ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\r\n                  : ''\r\n              }`}\r\n              style={{\r\n                fill: colors[colorDomain.length],\r\n                ...(hoveredColor !== colors[colorDomain.length]\r\n                  ? { stroke: colors[colorDomain.length] }\r\n                  : {}),\r\n              }}\r\n            />\r\n          </g>\r\n          {showNAColor ? (\r\n            <g\r\n              onMouseOver={() => {\r\n                setHoveredColor(naColor || '#D4D6D8');\r\n                setSelectedColor(naColor || '#D4D6D8');\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              className='cursor-pointer'\r\n            >\r\n              <rect\r\n                x={335}\r\n                y={1}\r\n                width={24}\r\n                height={8}\r\n                className={`stroke-1 ${\r\n                  hoveredColor === naColor\r\n                    ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\r\n                    : ''\r\n                }`}\r\n                style={{\r\n                  fill: naColor || '#D4D6D8',\r\n                  ...(hoveredColor !== naColor ? { stroke: naColor } : {}),\r\n                  strokeWidth: 1,\r\n                }}\r\n              />\r\n              <text\r\n                x={337.5}\r\n                y={25}\r\n                className='fill-primary-gray-700 dark:fill-primary-gray-300 text-sm'\r\n                style={{ textAnchor: 'start' }}\r\n              >\r\n                {naLabel}\r\n              </text>\r\n            </g>\r\n          ) : null}\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["ThresholdColorLegendWithMouseOver","props","$","_c","colorLegendTitle","colorDomain","colors","setSelectedColor","width","naColor","className","showNAColor","locale","t0","naLabel","t1","undefined","hoveredColor","setHoveredColor","useState","mainColorWidth","t2","cn","t3","t4","maxWidth","t5","jsx","P","t6","Symbol","for","t7","t8","d","i","jsxs","length","fill","stroke","textAnchor","numberFormattingFunction","map","t9","t10","t11","t12","t13","t14","t15","t16","t17","strokeWidth","t18","t19"],"mappings":"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"}
+{"version":3,"file":"ThresholdColorLegendWithMouseOver.cjs","names":[],"sources":["../src/Components/Elements/ThresholdColorLegendWithMouseOver.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { P } from '@undp/design-system-react/Typography';\nimport { useState } from 'react';\n\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  colors: string[];\n  colorDomain: number[];\n  colorLegendTitle?: string;\n  setSelectedColor: (_d?: string) => void;\n  width?: number;\n  naColor?: string;\n  className?: string;\n  showNAColor: boolean;\n  locale?: string;\n  naLabel: string;\n}\n\nexport function ThresholdColorLegendWithMouseOver(props: Props) {\n  const {\n    colorLegendTitle,\n    colorDomain,\n    colors,\n    setSelectedColor,\n    width,\n    naColor,\n    className,\n    showNAColor,\n    locale = 'en',\n    naLabel = 'NA',\n  } = props;\n\n  const [hoveredColor, setHoveredColor] = useState<string | undefined>(undefined);\n  const mainColorWidth = naColor ? 320 : 360;\n  return (\n    <div\n      className={cn('flex flex-wrap gap-0 justify-center leading-0', className)}\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\n    >\n      {colorLegendTitle && colorLegendTitle !== '' ? (\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\n          {colorLegendTitle}\n        </P>\n      ) : null}\n      <svg width='100%' viewBox='0 0 360 30' style={{ maxWidth: '360px' }} direction='ltr'>\n        <title>Color legend</title>\n        <g>\n          {colorDomain.map((d, i) => (\n            //  biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend\n            <g\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              key={i}\n              onMouseOver={() => {\n                setHoveredColor(colors[i]);\n                setSelectedColor(colors[i]);\n              }}\n              onFocus={() => {\n                setHoveredColor(colors[i]);\n                setSelectedColor(colors[i]);\n              }}\n              onMouseLeave={() => {\n                setHoveredColor(undefined);\n                setSelectedColor(undefined);\n              }}\n              className='cursor-pointer'\n            >\n              <rect\n                x={(i * mainColorWidth) / colors.length + 1}\n                y={1}\n                width={mainColorWidth / colors.length - 2}\n                height={8}\n                className={`stroke-1 ${\n                  hoveredColor === colors[i]\n                    ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\n                    : ''\n                }`}\n                style={{\n                  fill: colors[i],\n                  ...(hoveredColor !== colors[i] ? { stroke: colors[i] } : {}),\n                }}\n              />\n              <text\n                x={((i + 1) * mainColorWidth) / colors.length}\n                y={25}\n                className='fill-primary-gray-700 dark:fill-primary-gray-300 text-sm'\n                style={{ textAnchor: 'middle' }}\n              >\n                {numberFormattingFunction(d as number, undefined, 2, '', '', locale)}\n              </text>\n            </g>\n          ))}\n          <g>\n            {/* biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend */}\n            <rect\n              onMouseOver={() => {\n                setHoveredColor(colors[colorDomain.length]);\n                setSelectedColor(colors[colorDomain.length]);\n              }}\n              onFocus={() => {\n                setHoveredColor(colors[colorDomain.length]);\n                setSelectedColor(colors[colorDomain.length]);\n              }}\n              onMouseLeave={() => {\n                setHoveredColor(undefined);\n                setSelectedColor(undefined);\n              }}\n              x={(colorDomain.length * mainColorWidth) / colors.length + 1}\n              y={1}\n              width={mainColorWidth / colors.length - 2}\n              height={8}\n              className={`cursor-pointer stroke-1 ${\n                hoveredColor === colors[colorDomain.length]\n                  ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\n                  : ''\n              }`}\n              style={{\n                fill: colors[colorDomain.length],\n                ...(hoveredColor !== colors[colorDomain.length]\n                  ? { stroke: colors[colorDomain.length] }\n                  : {}),\n              }}\n            />\n          </g>\n          {showNAColor ? (\n            //  biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend\n            <g\n              onMouseOver={() => {\n                setHoveredColor(naColor || '#D4D6D8');\n                setSelectedColor(naColor || '#D4D6D8');\n              }}\n              onFocus={() => {\n                setHoveredColor(naColor || '#D4D6D8');\n                setSelectedColor(naColor || '#D4D6D8');\n              }}\n              onMouseLeave={() => {\n                setHoveredColor(undefined);\n                setSelectedColor(undefined);\n              }}\n              className='cursor-pointer'\n            >\n              <rect\n                x={335}\n                y={1}\n                width={24}\n                height={8}\n                className={`stroke-1 ${\n                  hoveredColor === naColor\n                    ? 'stroke-primary-gray-700 dark:stroke-primary-gray-300'\n                    : ''\n                }`}\n                style={{\n                  fill: naColor || '#D4D6D8',\n                  ...(hoveredColor !== naColor ? { stroke: naColor } : {}),\n                  strokeWidth: 1,\n                }}\n              />\n              <text\n                x={337.5}\n                y={25}\n                className='fill-primary-gray-700 dark:fill-primary-gray-300 text-sm'\n                style={{ textAnchor: 'start' }}\n              >\n                {naLabel}\n              </text>\n            </g>\n          ) : null}\n        </g>\n      </svg>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ThresholdColorLegendWithMouseOver.d.ts

@@ -1,18 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface Props {
-    colors: string[];
-    colorDomain: number[];
-    colorLegendTitle?: string;
-    setSelectedColor: (_d?: string) => void;
-    width?: number;
-    naColor?: string;
-    className?: string;
-    showNAColor: boolean;
-    locale?: string;
-    naLabel: string;
-}
-
-export declare function ThresholdColorLegendWithMouseOver(props: Props): JSX.Element;
-
-export { }
+export * from './Components/Elements/ThresholdColorLegendWithMouseOver'
+export {}