@hisptz/dhis2-analytics 2.0.0-alpha.1 → 2.0.0

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/index.js

@@ -1,14 +1,21 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { capitalize, head, isEmpty, sortBy, find } from 'lodash';
-import { useRef, useMemo } from 'react';
-import { LayersControl, LayerGroup, TileLayer, GeoJSON, Tooltip, Popup } from 'react-leaflet';
-import { useBoundaryData } from '../BoundaryLayer/hooks/useBoundaryData.js';
-import useGoogleEngineLayer from './hooks/index.js';
-import { highlightFeature, resetHighlight } from '../../../../utils/map.js';
-import { highlightStyle, defaultStyle } from '../BoundaryLayer/index.js';
-import { useQuery } from 'react-query';
-import { Center, CircularLoader, Divider } from '@dhis2/ui';
-import i18n from '@dhis2/d2-i18n';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lodash = require('lodash');
+var react = require('react');
+var reactLeaflet = require('react-leaflet');
+var useBoundaryData_js = require('../BoundaryLayer/hooks/useBoundaryData.js');
+var useGoogleEngineLayer = require('./hooks/index.js');
+var map_js = require('../../../../utils/map.js');
+var index_js = require('../BoundaryLayer/index.js');
+var reactQuery = require('react-query');
+var ui = require('@dhis2/ui');
+var i18n = require('@dhis2/d2-i18n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var useGoogleEngineLayer__default = /*#__PURE__*/_interopDefault(useGoogleEngineLayer);
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 
 function formatValues(value) {
   return Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(
@@ -26,28 +33,28 @@ function Legend({
   value,
   unit
 }) {
-  const legend = find(legends, ["id", header]);
-  return /* @__PURE__ */ jsxs("div", { className: "row gap-8 space-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "row gap-8", children: [
-      /* @__PURE__ */ jsx(
+  const legend = lodash.find(legends, ["id", header]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-8 space-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "legend-item-color",
           style: { backgroundColor: legend?.color }
         }
       ),
-      /* @__PURE__ */ jsx("div", { children: legend?.name })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: legend?.name })
     ] }),
-    /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       formatValues(value),
       getUnit(unit)
     ] })
   ] });
 }
 function AggregationView({ header, value }) {
-  return /* @__PURE__ */ jsxs("div", { className: "row space-between", children: [
-    /* @__PURE__ */ jsx("span", { children: capitalize(header.toString()) }),
-    /* @__PURE__ */ jsx("span", { children: formatValues(value) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row space-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: lodash.capitalize(header.toString()) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatValues(value) })
   ] });
 }
 function EarthEnginePopup({
@@ -59,10 +66,10 @@ function EarthEnginePopup({
   const engine = layer?.engine;
   const legends = layer?.engine?.options?.legend?.items;
   const data = engine?.getAggregation(orgUnit)?.data;
-  const unit = layer?.engine?.options?.unit ?? head(layer?.engine?.options.aggregations);
-  const aggregations = useMemo(() => {
-    if (!isEmpty(legends)) {
-      return sortBy(
+  const unit = layer?.engine?.options?.unit ?? lodash.head(layer?.engine?.options.aggregations);
+  const aggregations = react.useMemo(() => {
+    if (!lodash.isEmpty(legends)) {
+      return lodash.sortBy(
         Object.keys(data ?? {}).map((key) => {
           return {
             id: parseInt(key),
@@ -75,33 +82,33 @@ function EarthEnginePopup({
     return data ?? {};
   }, [data]);
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(CircularLoader, { extrasmall: true }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Center, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { extrasmall: true }) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
-      /* @__PURE__ */ jsx(Divider, { margin: "0" }),
-      /* @__PURE__ */ jsxs("div", { className: "column gap-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "column", children: [
-          /* @__PURE__ */ jsx("b", { children: layer?.options?.name }),
-          /* @__PURE__ */ jsx("div", { children: layer?.options?.unit })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("b", { children: layer?.options?.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: layer?.options?.unit })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "column", children: [
-          /* @__PURE__ */ jsx("p", { children: i18n.t("Could not get aggregate data") }),
-          /* @__PURE__ */ jsx("p", { children: error })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: i18n__default.default.t("Could not get aggregate data") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: error })
         ] })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
-    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
-    /* @__PURE__ */ jsxs("div", { className: "column gap-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "column", children: [
-        /* @__PURE__ */ jsx("b", { children: layer?.options?.name }),
-        /* @__PURE__ */ jsx("div", { children: layer?.options?.unit ?? unit })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: layer?.options?.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: layer?.options?.unit ?? unit })
       ] }),
-      data && /* @__PURE__ */ jsx("div", { className: "column", children: Array.isArray(aggregations) ? aggregations?.map(({ id, value }) => /* @__PURE__ */ jsx(
+      data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column", children: Array.isArray(aggregations) ? aggregations?.map(({ id, value }) => /* @__PURE__ */ jsxRuntime.jsx(
         Legend,
         {
           legends: legends ?? [],
@@ -110,7 +117,7 @@ function EarthEnginePopup({
           unit
         },
         `${orgUnit.id}-legend-details-${id}`
-      )) : Object.keys(aggregations)?.map((key) => /* @__PURE__ */ jsx(
+      )) : Object.keys(aggregations)?.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
         AggregationView,
         {
           header: key,
@@ -127,21 +134,21 @@ function EarthEngineArea({
   loading,
   error
 }) {
-  const ref = useRef();
-  return /* @__PURE__ */ jsxs(
-    GeoJSON,
+  const ref = react.useRef();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactLeaflet.GeoJSON,
     {
       ref,
       data: area.geoJSON,
       interactive: true,
       eventHandlers: {
-        mouseover: (e) => highlightFeature(e, highlightStyle),
-        mouseout: (e) => resetHighlight(e, defaultStyle)
+        mouseover: (e) => map_js.highlightFeature(e, index_js.highlightStyle),
+        mouseout: (e) => map_js.resetHighlight(e, index_js.defaultStyle)
       },
-      pathOptions: defaultStyle,
+      pathOptions: index_js.defaultStyle,
       children: [
-        /* @__PURE__ */ jsx(Tooltip, { children: area.name }),
-        /* @__PURE__ */ jsx(Popup, { minWidth: 100, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { children: area.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { minWidth: 100, children: /* @__PURE__ */ jsxRuntime.jsx(
           EarthEnginePopup,
           {
             error,
@@ -156,27 +163,27 @@ function EarthEngineArea({
   );
 }
 function GoogleEngineLayer({ layerId }) {
-  const layer = useGoogleEngineLayer(layerId);
+  const layer = useGoogleEngineLayer__default.default(layerId);
   const { name, type, enabled, url, options, engine } = layer ?? {};
-  const { isLoading: loadingAggregateData, error } = useQuery(
+  const { isLoading: loadingAggregateData, error } = reactQuery.useQuery(
     [engine],
     async () => engine?.getAggregations(),
     {
       suspense: false
     }
   );
-  const orgUnits = useBoundaryData();
+  const orgUnits = useBoundaryData_js.useBoundaryData();
   if (!url)
     return null;
-  return /* @__PURE__ */ jsx(
-    LayersControl.Overlay,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.LayersControl.Overlay,
     {
       checked: enabled,
-      name: name ?? capitalize(type),
-      children: /* @__PURE__ */ jsxs(LayerGroup, { children: [
-        /* @__PURE__ */ jsx(TileLayer, { id: options?.id, url }),
+      name: name ?? lodash.capitalize(type),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.LayerGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.TileLayer, { id: options?.id, url }),
         orgUnits?.map((area) => {
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(
             EarthEngineArea,
             {
               error: error?.toString(),
@@ -192,6 +199,6 @@ function GoogleEngineLayer({ layerId }) {
   );
 }
 
-export { GoogleEngineLayer as default };
+module.exports = GoogleEngineLayer;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/interfaces/index.js

@@ -1,3 +1,4 @@
+'use strict';
 
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/services/api.js

@@ -1,3 +1,5 @@
+'use strict';
+
 var $jscomp = $jscomp || {};
 $jscomp.scope = {};
 $jscomp.arrayIteratorImpl = function(array) {
@@ -31461,6 +31463,6 @@ ee.data.Profiler.Format.JSON = new ee.data.Profiler.Format("json");
 goog.Timer.defaultTimerObject = self;
 var api_default = ee;
 
-export { api_default as default };
+module.exports = api_default;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=api.js.map

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/services/engine.js

@@ -1,8 +1,30 @@
-import { getInfo, getScale, getFeatureCollectionProperties, getHistogramStatistics, hasClasses, combineReducers } from '../utils/index.js';
-import { head, isEmpty, find } from 'lodash';
-import * as EE from './api.js';
+'use strict';
 
-const ee = EE;
+var index_js = require('../utils/index.js');
+var lodash = require('lodash');
+var EE = require('./api.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var EE__namespace = /*#__PURE__*/_interopNamespace(EE);
+
+const ee = EE__namespace;
 window.ee = ee;
 const FEATURE_STYLE = { color: "FFA500", strokeWidth: 2 };
 const DEFAULT_TILE_SCALE = 1;
@@ -75,7 +97,7 @@ class EarthEngine {
     }
     const imageCollection = this.instance.distinct("system:time_start").sort("system:time_start", false);
     const featureCollection = ee.FeatureCollection(imageCollection).select(["system:time_start", "system:time_end"], null, false);
-    return getInfo(featureCollection);
+    return index_js.getInfo(featureCollection);
   }
   async info() {
     return new Promise((resolve) => {
@@ -87,10 +109,10 @@ class EarthEngine {
       const { type } = this.options;
       switch (type) {
         case "ImageCollection":
-          this.scale = await getScale(this.instance.first());
+          this.scale = await index_js.getScale(this.instance.first());
           break;
         default:
-          this.scale = await getScale(this.getImage());
+          this.scale = await index_js.getScale(this.getImage());
       }
     } catch (e) {
     }
@@ -104,20 +126,20 @@ class EarthEngine {
       const count = dataset.filterBounds(feature.geometry()).size();
       return feature.set("count", count);
     }).select(["count"], null, false);
-    return getInfo(aggFeatures).then(getFeatureCollectionProperties);
+    return index_js.getInfo(aggFeatures).then(index_js.getFeatureCollectionProperties);
   }
   async getHistogramAggregations() {
     try {
-      const aggregation = head(this.options.aggregations) ?? "";
+      const aggregation = lodash.head(this.options.aggregations) ?? "";
       const reducer = ee.Reducer.frequencyHistogram();
       const collection = this.getFeatureCollection();
       const legend = this.options.legend?.items;
       const scale = this.scale;
       const tileScale = this.options.tileScale ?? DEFAULT_TILE_SCALE;
-      const scaleValue = await getInfo(scale);
+      const scaleValue = await index_js.getInfo(scale);
       const image = this.getImage();
       const features = Object.values(
-        await getInfo(
+        await index_js.getInfo(
           image.reduceRegions({
             collection,
             reducer,
@@ -125,7 +147,7 @@ class EarthEngine {
             tileScale
           }).select(["histogram"], null, false)
         ).then(
-          (data) => getHistogramStatistics({
+          (data) => index_js.getHistogramStatistics({
             data,
             scale: scaleValue,
             aggregationType: aggregation,
@@ -155,11 +177,11 @@ class EarthEngine {
     const aggregations = this.options.aggregations;
     if (!aggregations)
       return;
-    if (hasClasses(head(aggregations) ?? "")) {
+    if (index_js.hasClasses(lodash.head(aggregations) ?? "")) {
       this.aggregationData = await this.getHistogramAggregations();
       return;
     }
-    const reducer = combineReducers(ee)(aggregations);
+    const reducer = index_js.combineReducers(ee)(aggregations);
     const collection = this.getFeatureCollection();
     const image = this.getImage();
     const scale = this.scale;
@@ -171,9 +193,9 @@ class EarthEngine {
       tileScale
     }).select(aggregations, null, false);
     const features = Object.values(
-      getFeatureCollectionProperties(await getInfo(aggregatedFeatures))
+      index_js.getFeatureCollectionProperties(await index_js.getInfo(aggregatedFeatures))
     );
-    if (!isEmpty(features) && features.length === this.orgUnits?.length) {
+    if (!lodash.isEmpty(features) && features.length === this.orgUnits?.length) {
       this.aggregationData = features.map(
         (feature, index) => {
           return {
@@ -185,10 +207,10 @@ class EarthEngine {
     }
   }
   getAggregation(orgUnit) {
-    if (isEmpty(this.aggregationData)) {
+    if (lodash.isEmpty(this.aggregationData)) {
       return;
     }
-    return find(
+    return lodash.find(
       this.aggregationData,
       (aggregation) => aggregation.orgUnit.id === orgUnit.id
     );
@@ -360,6 +382,6 @@ class EarthEngine {
   }
 }
 
-export { EarthEngine };
+exports.EarthEngine = EarthEngine;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=engine.js.map

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/utils/index.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const combineReducers = (ee) => (types) => types.reduce(
   (r, t, i) => i === 0 ? r[t]() : r.combine({
     reducer2: ee.Reducer[t](),
@@ -88,6 +90,12 @@ const getHistogramStatistics = ({
   {}
 );
 
-export { combineReducers, getClassifiedImage, getFeatureCollectionProperties, getHistogramStatistics, getInfo, getScale, hasClasses };
+exports.combineReducers = combineReducers;
+exports.getClassifiedImage = getClassifiedImage;
+exports.getFeatureCollectionProperties = getFeatureCollectionProperties;
+exports.getHistogramStatistics = getHistogramStatistics;
+exports.getInfo = getInfo;
+exports.getScale = getScale;
+exports.hasClasses = hasClasses;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/LegendArea/components/LegendCardHeader/index.js

@@ -1,17 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconLaunch16 } from '@dhis2/ui';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
 
 function LegendCardHeader({
   title,
   collapsible,
   onCollapse
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "row w-100 space-between align-items-center", children: [
-    /* @__PURE__ */ jsx("h4", { style: { margin: 0 }, className: "legend-header", children: title }),
-    collapsible && /* @__PURE__ */ jsx("div", { onClick: onCollapse, children: /* @__PURE__ */ jsx(IconLaunch16, {}) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row w-100 space-between align-items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: 0 }, className: "legend-header", children: title }),
+    collapsible && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onCollapse, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconLaunch16, {}) })
   ] });
 }
 
-export { LegendCardHeader as default };
+module.exports = LegendCardHeader;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/LegendArea/index.js

@@ -1,24 +1,35 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconLegend24, Portal, Popper, colors } from '@dhis2/ui';
-import { compact, head } from 'lodash';
-import React, { useState, useRef, useEffect } from 'react';
-import { CustomControl } from '../../../MapControls/components/CustomControl/index.js';
-import { SUPPORTED_EARTH_ENGINE_LAYERS } from '../../interfaces/index.js';
-import PointLegend from '../PointLayer/components/PointLegend/index.js';
-import BubbleLegend from '../ThematicLayer/components/Bubble/components/BubbleLegend/index.js';
-import ChoroplethLegend from '../ThematicLayer/components/Choropleth/components/ChoroplethLegend.js';
-import EarthEngineLegend from '../GoogleEngineLayer/components/EarthEngineLegend.js';
-import classes from './LegendArea.module.css';
-import { usePrintMedia } from '../../../../hooks/map.js';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var lodash = require('lodash');
+var React = require('react');
+var index_js = require('../../../MapControls/components/CustomControl/index.js');
+var index_js$1 = require('../../interfaces/index.js');
+var PointLegend = require('../PointLayer/components/PointLegend/index.js');
+var BubbleLegend = require('../ThematicLayer/components/Bubble/components/BubbleLegend/index.js');
+var ChoroplethLegend = require('../ThematicLayer/components/Choropleth/components/ChoroplethLegend.js');
+var EarthEngineLegend = require('../GoogleEngineLayer/components/EarthEngineLegend.js');
+var classes = require('./LegendArea.module.css');
+var map_js = require('../../../../hooks/map.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PointLegend__default = /*#__PURE__*/_interopDefault(PointLegend);
+var BubbleLegend__default = /*#__PURE__*/_interopDefault(BubbleLegend);
+var ChoroplethLegend__default = /*#__PURE__*/_interopDefault(ChoroplethLegend);
+var EarthEngineLegend__default = /*#__PURE__*/_interopDefault(EarthEngineLegend);
+var classes__default = /*#__PURE__*/_interopDefault(classes);
 
 const TOOLTIP_OFFSET = 4;
 function getLegendComponent(layer) {
   if (layer.type === "point") {
-    return /* @__PURE__ */ jsx(PointLegend, { name: layer.label });
+    return /* @__PURE__ */ jsxRuntime.jsx(PointLegend__default.default, { name: layer.label });
   }
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    return /* @__PURE__ */ jsx(
-      EarthEngineLegend,
+  if (index_js$1.SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EarthEngineLegend__default.default,
       {
         name: layer.name ?? "",
         layer
@@ -31,8 +42,8 @@ function getLegendComponent(layer) {
   }
   switch (type) {
     case "bubble":
-      return /* @__PURE__ */ jsx(
-        BubbleLegend,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BubbleLegend__default.default,
         {
           radius: layer?.radius ?? {
             min: 0,
@@ -41,17 +52,17 @@ function getLegendComponent(layer) {
           legends: legends ?? [],
           name: name ?? dataItem.displayName,
           data,
-          dataItem: head(data)?.dataItem ?? dataItem
+          dataItem: lodash.head(data)?.dataItem ?? dataItem
         }
       );
     case "choropleth":
-      return /* @__PURE__ */ jsx(
-        ChoroplethLegend,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ChoroplethLegend__default.default,
         {
           legends: legends ?? [],
           name: name ?? dataItem.displayName,
           data,
-          dataItem: head(data)?.dataItem ?? dataItem
+          dataItem: lodash.head(data)?.dataItem ?? dataItem
         }
       );
   }
@@ -62,10 +73,10 @@ function CollapsedLegendIcon({
 }) {
   const openDelay = 200;
   const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef(null);
-  const closeTimerRef = useRef(null);
-  const ref = useRef(null);
+  const [openTooltip, setOpenTooltip] = React.useState(false);
+  const openTimerRef = React.useRef(null);
+  const closeTimerRef = React.useRef(null);
+  const ref = React.useRef(null);
   const hideModifier = { name: "hide" };
   const offsetModifier = {
     name: "offset",
@@ -89,14 +100,14 @@ function CollapsedLegendIcon({
       setOpenTooltip(false);
     }, closeDelay);
   };
-  useEffect(
+  React.useEffect(
     () => () => {
       clearTimeout(openTimerRef.current);
       clearTimeout(closeTimerRef.current);
     },
     []
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
@@ -106,24 +117,24 @@ function CollapsedLegendIcon({
       style: { width: 28, height: 28 },
       className: "legend-card collapsed",
       children: [
-        /* @__PURE__ */ jsx(IconLegend24, {}),
-        openTooltip && /* @__PURE__ */ jsx(
-          Portal,
+        /* @__PURE__ */ jsxRuntime.jsx(ui.IconLegend24, {}),
+        openTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Portal,
           {
-            className: classes["map-tooltip"],
-            children: /* @__PURE__ */ jsx(
-              Popper,
+            className: classes__default.default["map-tooltip"],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Popper,
               {
-                className: classes["map-tooltip"],
+                className: classes__default.default["map-tooltip"],
                 reference: ref,
                 modifiers: [offsetModifier, flipModifier, hideModifier],
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     style: {
-                      backgroundColor: `${colors.grey900}`,
+                      backgroundColor: `${ui.colors.grey900}`,
                       borderRadius: 3,
-                      color: `${colors.white}`,
+                      color: `${ui.colors.white}`,
                       padding: "4px 6px"
                     },
                     "data-test": `content`,
@@ -142,29 +153,29 @@ function Legend({
   children,
   collapsible
 }) {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
+  const [collapsed, setCollapsed] = React.useState(collapsible);
+  const inPrintMode = map_js.usePrintMedia();
   const onCollapse = () => {
     if (collapsible) {
       setCollapsed((prevState) => !prevState);
     }
   };
-  const name = head(React.Children.toArray(children))?.props.name;
+  const name = lodash.head(React__default.default.Children.toArray(children))?.props.name;
   const shouldCollapse = collapsed && !inPrintMode;
-  return /* @__PURE__ */ jsx("div", { className: "w-100", children: shouldCollapse ? /* @__PURE__ */ jsx(CollapsedLegendIcon, { name, onCollapse }) : React.Children.map(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-100", children: shouldCollapse ? /* @__PURE__ */ jsxRuntime.jsx(CollapsedLegendIcon, { name, onCollapse }) : React__default.default.Children.map(
     children,
-    (child) => React.cloneElement(child, { collapsible, onCollapse })
+    (child) => React__default.default.cloneElement(child, { collapsible, onCollapse })
   ) });
 }
 function LegendArea({
   layers,
   legends: legendConfig
 }) {
-  const legends = compact(
+  const legends = lodash.compact(
     layers.filter((layer) => layer.enabled).map(getLegendComponent)
   );
   const { position, collapsible } = legendConfig ?? {};
-  return /* @__PURE__ */ jsx(CustomControl, { position, children: /* @__PURE__ */ jsx("div", { className: "column gap-16 align-items-end", children: legends?.map((legend, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(index_js.CustomControl, { position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column gap-16 align-items-end", children: legends?.map((legend, index) => /* @__PURE__ */ jsxRuntime.jsx(
     Legend,
     {
       collapsible: collapsible ?? true,
@@ -174,6 +185,6 @@ function LegendArea({
   )) }) });
 }
 
-export { LegendArea as default };
+module.exports = LegendArea;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map