@xyo-network/react-map 7.5.8 → 7.5.11

package/dist/browser/index.mjs

@@ -1,74 +1,47 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/Components/AnimatedHeatMap.tsx
 import { useTheme } from "@mui/material";
 import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
 import { darkenCss } from "@xylabs/react-theme";
-import React8, { useState as useState5 } from "react";
+import { useState as useState3 } from "react";
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
 import { forget as forget2 } from "@xylabs/sdk-js";
-import React3, { useEffect as useEffect5, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5 } from "react";
 
 // src/hooks/useDynamicMapResize.tsx
-import { useEffect, useMemo } from "react";
-var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
-  const resizer = useMemo(() => new ResizeObserver(() => {
-    const width = mapContainerRef.current?.getBoundingClientRect().width;
-    if (width && mapCanvasRef.current) {
-      mapCanvasRef.current.style.width = `${width}px`;
-      setTimeout(() => mapInstance?.resize());
-    }
-  }), [
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance
-  ]);
-  const dependenciesReady = useMemo(() => {
-    return !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
-  }, [
-    active,
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance
-  ]);
+import { useEffect } from "react";
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
   useEffect(() => {
-    if (dependenciesReady) {
-      if (mapContainerRef.current) {
-        resizer.observe(mapContainerRef.current);
+    if (active && mapInstance) {
+      const container = mapContainerRef.current;
+      if (container) {
+        let timerId;
+        const resizer = new ResizeObserver(() => {
+          const width = container.getBoundingClientRect().width;
+          const canvas = mapCanvasRef.current;
+          if (width && canvas) {
+            canvas.style.width = `${width}px`;
+            timerId = setTimeout(() => mapInstance.resize());
+          }
+        });
+        resizer.observe(container);
+        return () => {
+          clearTimeout(timerId);
+          resizer.disconnect();
+        };
       }
-      return () => {
-        resizer.disconnect();
-      };
     }
-  }, [
-    active,
-    dependenciesReady,
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance,
-    resizer
-  ]);
-}, "useDynamicMapResize");
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+};
 
 // src/hooks/useDynamicPositioning.tsx
 import { useWindowSize } from "@xylabs/react-shared";
-import { useMemo as useMemo2 } from "react";
+import { useMemo } from "react";
 var defaultZoom = 1.6;
-var defaultAspectRatioRange = [
-  0.5,
-  2
-];
-var latRange = [
-  0.9121644205263664,
-  1.71785031559439
-];
-var lngRange = [
-  -81.4742014851959,
-  12.788958675506933
-];
-var linearInterpolate = /* @__PURE__ */ __name((aspectRatio, degreeRange, aspectRatioRange) => {
+var defaultAspectRatioRange = [0.5, 2];
+var latRange = [0.9121644205263664, 1.71785031559439];
+var lngRange = [-81.4742014851959, 12.788958675506933];
+var linearInterpolate = (aspectRatio, degreeRange, aspectRatioRange) => {
   const [degreeMin, degreeMax] = degreeRange;
   const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange;
   const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin;
@@ -76,84 +49,78 @@ var linearInterpolate = /* @__PURE__ */ __name((aspectRatio, degreeRange, aspect
   const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan;
   const scaledDegree = percent * degreeRangeSpan + degreeMin;
   return scaledDegree;
-}, "linearInterpolate");
-var useDynamicPositioning = /* @__PURE__ */ __name(() => {
+};
+var useDynamicPositioning = () => {
   const { width, height } = useWindowSize();
-  const options = useMemo2(() => {
+  const options = useMemo(() => {
     if (width && height) {
       const aspectRatio = width / height;
       return {
-        center: [
-          linearInterpolate(aspectRatio, lngRange),
-          linearInterpolate(aspectRatio, latRange)
-        ],
+        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
         zoom: defaultZoom
       };
     }
-  }, [
-    height,
-    width
-  ]);
-  return {
-    options
-  };
-}, "useDynamicPositioning");
+  }, [height, width]);
+  return { options };
+};
 
 // src/hooks/useQuadKeyPayloadsToFeatures.tsx
 import { GeoJson } from "@xylabs/geo";
 import { exists } from "@xylabs/sdk-js";
-import { useEffect as useEffect2, useState } from "react";
-var quadKeyToFeature = /* @__PURE__ */ __name(({ density, quadkey }) => {
+import { useMemo as useMemo2 } from "react";
+var quadKeyToFeature = ({ density, quadkey }) => {
   const polygonFeature = new GeoJson(quadkey).polygonFeature();
   polygonFeature.properties = {
     count: density,
     density
   };
   return polygonFeature;
-}, "quadKeyToFeature");
-var setDensity = /* @__PURE__ */ __name((feature) => {
+};
+var setDensity = (feature) => {
   if (feature.properties) {
     feature.properties.value = feature.properties.density / 5;
   }
   return feature;
-}, "setDensity");
-var useQuadKeyPayloadsToFeatures = /* @__PURE__ */ __name((payloads) => {
-  const [multipleFeatureSets, setMultipleFeatureSets] = useState([
-    []
-  ]);
-  const [features, setFeatures] = useState([]);
-  const [error, setError] = useState();
-  useEffect2(() => {
+};
+var useQuadKeyPayloadsToFeatures = (payloads) => {
+  const {
+    multipleFeatureSets,
+    features,
+    error
+  } = useMemo2(() => {
+    let multipleFeatureSets2 = [[]];
+    let features2 = [];
+    let error2;
     if (Array.isArray(payloads)) {
       if (payloads?.filter(exists).length > 0) {
         const mappedFeatures = payloads?.map((payload) => payload?.result.map(quadKeyToFeature));
-        setMultipleFeatureSets(mappedFeatures.map((features2) => features2?.map(setDensity) ?? []));
+        multipleFeatureSets2 = mappedFeatures.map((f) => f?.map(setDensity) ?? []);
       } else {
-        setError(new Error("Cannot find payloads for provided hashes"));
+        error2 = new Error("Cannot find payloads for provided hashes");
       }
     }
     if (payloads && payloads.result) {
       const singlePayload = payloads;
       const mappedFeatures = singlePayload.result.map(quadKeyToFeature);
-      setFeatures(mappedFeatures.map(setDensity));
+      features2 = mappedFeatures.map(setDensity);
     }
-  }, [
-    payloads
-  ]);
+    return {
+      multipleFeatureSets: multipleFeatureSets2,
+      features: features2,
+      error: error2
+    };
+  }, [payloads]);
   return {
     error,
     features,
     multipleFeatureSets
   };
-}, "useQuadKeyPayloadsToFeatures");
+};
 
 // src/MapBoxClasses/MapBase.ts
 import { GeoJson as GeoJson2 } from "@xylabs/geo";
 import { assertEx } from "@xylabs/sdk-js";
 var MapBase = class {
-  static {
-    __name(this, "MapBase");
-  }
   _config;
   constructor(config) {
     this._config = {
@@ -166,10 +133,10 @@ var MapBase = class {
     return !!this._config.map;
   }
   initializeMapSource(layer) {
-    const getSource = /* @__PURE__ */ __name(() => {
+    const getSource = () => {
       const featuresCollection = GeoJson2.featureCollection(this._config.features);
       return GeoJson2.featuresSource(featuresCollection);
-    }, "getSource");
+    };
     const existingSource = this._config.map.getSource(layer.source);
     const source = getSource();
     if (existingSource) {
@@ -184,13 +151,13 @@ var MapBase = class {
 
 // src/MapBoxClasses/MapHeat.ts
 import { GeoJson as GeoJson3 } from "@xylabs/geo";
-import { assertEx as assertEx2, delay, forget } from "@xylabs/sdk-js";
+import {
+  assertEx as assertEx2,
+  delay,
+  forget
+} from "@xylabs/sdk-js";
 import { LngLatBounds } from "mapbox-gl";
 var MapHeat = class extends MapBase {
-  static {
-    __name(this, "MapHeat");
-  }
-  // eslint-disable-next-line sonarjs/public-static-readonly
   static animationStarted = false;
   config;
   constructor(config) {
@@ -238,7 +205,7 @@ var MapHeat = class extends MapBase {
     const stepLength = frameLength / steps;
     const lowUsageColor = startColor ?? "#FFB3B3";
     const highUsageColor = endColor ?? "#FF0000";
-    const dynamicFillColor = /* @__PURE__ */ __name((factor2, initialPad2, i) => {
+    const dynamicFillColor = (factor2, initialPad2, i) => {
       const sinFade = Math.sin(i / steps * Math.PI / 2);
       const cosFade = Math.cos(i / steps * Math.PI / 2);
       const divisor = factor2 + factor2 * sinFade;
@@ -246,54 +213,27 @@ var MapHeat = class extends MapBase {
       return [
         "let",
         "density",
-        [
-          "+",
-          [
-            "/",
-            [
-              "number",
-              [
-                "get",
-                "value"
-              ]
-            ],
-            divisor
-          ],
-          offset
-        ],
-        [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "var",
-            "density"
-          ],
-          0,
-          lowUsageColor,
-          0.5,
-          highUsageColor
-        ]
+        ["+", ["/", ["number", ["get", "value"]], divisor], offset],
+        ["interpolate", ["linear"], ["var", "density"], 0, lowUsageColor, 0.5, highUsageColor]
       ];
-    }, "dynamicFillColor");
+    };
     const fadedIn = layers.map((_) => false);
-    const fadeIn = /* @__PURE__ */ __name(async (id, index) => {
+    const fadeIn = async (id, index) => {
       for (let i = steps; i >= 1; i--) {
         map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
         await delay(stepLength);
       }
       fadedIn[index] = true;
-    }, "fadeIn");
-    const fadeOut = /* @__PURE__ */ __name(async (id, index) => {
+    };
+    const fadeOut = async (id, index) => {
       for (let i = 1; i <= steps; i++) {
         map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
         await delay(stepLength);
       }
       fadedIn[index] = false;
-    }, "fadeOut");
+    };
     let started = false;
-    const startAnimation = /* @__PURE__ */ __name(async () => {
+    const startAnimation = async () => {
       assertEx2(!started, () => "Animation Already Started");
       started = true;
       while (this.animationStarted) {
@@ -315,7 +255,7 @@ var MapHeat = class extends MapBase {
         layerTick++;
         sourceTick++;
       }
-    }, "startAnimation");
+    };
     await startAnimation();
   }
   static updateLayer(map, layer, source) {
@@ -329,10 +269,10 @@ var MapHeat = class extends MapBase {
   }
   // Build layers each with the same features
   initializeHeatMapSource(layers) {
-    const getSource = /* @__PURE__ */ __name((_) => {
+    const getSource = (_) => {
       const featuresCollection = GeoJson3.featureCollection(this.config.features);
       return GeoJson3.featuresSource(featuresCollection);
-    }, "getSource");
+    };
     for (const [index, layer] of layers.entries()) {
       const existingSource = this.config.map.getSource(layer.source);
       const source = getSource(index);
@@ -350,9 +290,6 @@ var MapHeat = class extends MapBase {
 // src/MapBoxClasses/MapPoints.ts
 import { LngLatBounds as LngLatBounds2 } from "mapbox-gl";
 var MapPoints = class extends MapBase {
-  static {
-    __name(this, "MapPoints");
-  }
   config;
   constructor(config) {
     super(config);
@@ -377,24 +314,17 @@ var MapPoints = class extends MapBase {
 // src/MapBoxClasses/MapSettings.ts
 import { GeolocateControl, NavigationControl } from "mapbox-gl";
 var MapSettings = class _MapSettings {
-  static {
-    __name(this, "MapSettings");
-  }
-  // eslint-disable-next-line sonarjs/public-static-readonly
   static geoLocateControl;
-  // eslint-disable-next-line sonarjs/public-static-readonly
   static mapListeners = {
-    logData: /* @__PURE__ */ __name((ev, map) => {
+    logData: (ev, map) => {
       const target = map || ev?.target;
       if (target) {
         console.log("zoom", target.getZoom());
         console.log("center", target.getCenter());
       }
-    }, "logData")
+    }
   };
-  // eslint-disable-next-line sonarjs/public-static-readonly
   static navControl;
-  // eslint-disable-next-line sonarjs/public-static-readonly
   static requestLocation;
   static toggleControls(value, map, zoom, requestLocation) {
     if (value) {
@@ -416,11 +346,7 @@ var MapSettings = class _MapSettings {
     return this;
   }
   static toggleDebugLogging(value, map) {
-    const debugEvents = [
-      "resize",
-      "zoomend",
-      "dragend"
-    ];
+    const debugEvents = ["resize", "zoomend", "dragend"];
     if (value) {
       this.mapListeners.logData(void 0, map);
       for (const event of debugEvents) map.on(event, this.mapListeners.logData);
@@ -437,24 +363,29 @@ var MapSettings = class _MapSettings {
     return this;
   }
   static updateSettings(config) {
-    const { settings, map, zoom, requestLocation, debugLayerName = "" } = config;
-    const { scrollToZoom: scrollToZoom2, enableControls, debugLayer: debugLayer2, debugLogging } = settings;
+    const {
+      settings,
+      map,
+      zoom,
+      requestLocation,
+      debugLayerName = ""
+    } = config;
+    const {
+      scrollToZoom: scrollToZoom2,
+      enableControls,
+      debugLayer: debugLayer2,
+      debugLogging
+    } = settings;
     _MapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation).toggleScrollToZoom(scrollToZoom2?.value, map).toggleDebugLayer(debugLayer2?.value, map, debugLayerName).toggleDebugLogging(debugLogging.value, map);
   }
   // Needs to be static so we ensure controls are only instantiated once
   static addControls(map, zoom, requestLocation) {
     const geolocateControl = new GeolocateControl({
-      fitBoundsOptions: {
-        zoom: zoom || 2
-      },
-      positionOptions: {
-        enableHighAccuracy: true
-      },
+      fitBoundsOptions: { zoom: zoom || 2 },
+      positionOptions: { enableHighAccuracy: true },
       trackUserLocation: true
     });
-    const navControl = new NavigationControl({
-      showCompass: false
-    });
+    const navControl = new NavigationControl({ showCompass: false });
     this.geoLocateControl = this.geoLocateControl || geolocateControl;
     this.navControl = this.navControl || navControl;
     if (!map.hasControl(this.geoLocateControl) && requestLocation) {
@@ -477,69 +408,72 @@ var MapSettings = class _MapSettings {
 };
 
 // src/Contexts/MapBoxInstance/Provider.tsx
-import React, { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
+import {
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useState
+} from "react";
 
 // src/Contexts/MapBoxInstance/Context.ts
 import { createContext } from "react";
 var MapBoxInstanceContext = createContext({});
 
 // src/Contexts/MapBoxInstance/Provider.tsx
-var MapBoxInstanceProvider = /* @__PURE__ */ __name(({ children }) => {
-  const [map, setMapBoxInstance] = useState2();
-  const [mapInitialized, setMapInitialized] = useState2(false);
+import { jsx } from "react/jsx-runtime";
+var MapBoxInstanceProvider = ({ children }) => {
+  const [map, setMap] = useState();
+  const [mapInitialized, setMapInitialized] = useState(false);
   const value = useMemo3(() => ({
     map,
     mapInitialized,
-    setMapBoxInstance
-  }), [
-    map,
-    mapInitialized,
-    setMapBoxInstance
-  ]);
-  useEffect3(() => {
+    setMapBoxInstance: setMap
+  }), [map, mapInitialized]);
+  useEffect2(() => {
     if (!mapInitialized && map) {
       map?.on("load", () => {
         setMapInitialized(true);
       });
     }
-  }, [
-    map,
-    mapInitialized,
-    setMapInitialized
-  ]);
-  return /* @__PURE__ */ React.createElement(MapBoxInstanceContext, {
-    value
-  }, children);
-}, "MapBoxInstanceProvider");
+  }, [map, mapInitialized, setMapInitialized]);
+  return /* @__PURE__ */ jsx(MapBoxInstanceContext, { value, children });
+};
 
 // src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
 import { assertEx as assertEx3 } from "@xylabs/sdk-js";
 import { use } from "react";
-var useMapBoxInstance = /* @__PURE__ */ __name(() => {
+var useMapBoxInstance = () => {
   const context = use(MapBoxInstanceContext);
   assertEx3("map" in context, () => "useMapBoxInstance must be used within a MapBoxInstanceContext");
   return context;
-}, "useMapBoxInstance");
+};
 
 // src/Contexts/MapSettings/Provider.tsx
-import React2, { useEffect as useEffect4, useMemo as useMemo4, useState as useState3 } from "react";
+import {
+  useEffect as useEffect3,
+  useMemo as useMemo4,
+  useState as useState2
+} from "react";
 
 // src/Contexts/MapSettings/Context.ts
 import { createContext as createContext2 } from "react";
 var MapSettingsContext = createContext2({});
 
 // src/Contexts/MapSettings/Provider.tsx
-var MapSettingsProvider = /* @__PURE__ */ __name(({ children, debugLayerName, defaultMapSettings, requestLocation, zoom = 1 }) => {
-  const [mapSettings, setMapSettings] = useState3(defaultMapSettings || {});
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapSettingsProvider = ({
+  children,
+  debugLayerName,
+  defaultMapSettings,
+  requestLocation,
+  zoom = 1
+}) => {
+  const [mapSettings, setMapSettings] = useState2(defaultMapSettings || {});
   const { map, mapInitialized } = useMapBoxInstance();
   const value = useMemo4(() => ({
     mapSettings,
     setMapSettings
-  }), [
-    mapSettings,
-    setMapSettings
-  ]);
-  useEffect4(() => {
+  }), [mapSettings, setMapSettings]);
+  useEffect3(() => {
     if (mapSettings && map && mapInitialized) {
       MapSettings.updateSettings({
         debugLayerName,
@@ -549,32 +483,33 @@ var MapSettingsProvider = /* @__PURE__ */ __name(({ children, debugLayerName, de
         zoom
       });
     }
-  }, [
-    debugLayerName,
-    map,
-    mapInitialized,
-    mapSettings,
-    requestLocation,
-    zoom
-  ]);
-  return /* @__PURE__ */ React2.createElement(MapSettingsContext, {
-    value
-  }, children);
-}, "MapSettingsProvider");
+  }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom]);
+  return /* @__PURE__ */ jsx2(MapSettingsContext, { value, children });
+};
 
 // src/Contexts/MapSettings/useMapSettings.tsx
 import { use as use2 } from "react";
-var useMapSettings = /* @__PURE__ */ __name(() => {
+var useMapSettings = () => {
   const context = use2(MapSettingsContext);
   return context;
-}, "useMapSettings");
+};
 
 // src/Contexts/HeatMapInitializer/Context.ts
 import { createContext as createContext3 } from "react";
 var HeatMapInitializerContext = createContext3({});
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
-var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets, featureSetsLayers, features, fitToPadding, heatMapColorProps, layers, zoom }) => {
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HeatMapInitializerProvider = ({
+  children,
+  featureSets,
+  featureSetsLayers,
+  features,
+  fitToPadding,
+  heatMapColorProps,
+  layers,
+  zoom
+}) => {
   const { options } = useDynamicPositioning();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
@@ -584,19 +519,12 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
       map,
       zoom
     }) : void 0;
-  }, [
-    map,
-    features,
-    zoom
-  ]);
+  }, [map, features, zoom]);
   const value = useMemo5(() => ({
     MapHeat: mapHeat,
     heatMapColorProps
-  }), [
-    mapHeat,
-    heatMapColorProps
-  ]);
-  useEffect5(() => {
+  }), [mapHeat, heatMapColorProps]);
+  useEffect4(() => {
     if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {
       const { lowUsageColor, highUsageColor } = heatMapColorProps;
       forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
@@ -604,187 +532,94 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
     return () => {
       MapHeat.animationStarted = false;
     };
-  }, [
-    featureSets,
-    featureSetsLayers,
-    mapInitialized,
-    map,
-    heatMapColorProps
-  ]);
-  useEffect5(() => {
+  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
+  useEffect4(() => {
     if (mapHeat && mapInitialized && features?.length && layers?.length) {
       mapHeat.initializeHeatMapSource(layers);
     }
-  }, [
-    mapHeat,
-    features?.length,
-    layers,
-    mapInitialized
-  ]);
-  useEffect5(() => {
+  }, [mapHeat, features?.length, layers, mapInitialized]);
+  useEffect4(() => {
     if (mapInitialized) {
       const { fitToPoints: fitToPoints2 } = mapSettings || {};
       if (map) {
         if (fitToPoints2?.value === true) {
-          MapHeat.initialMapPositioning({
-            padding: {
-              bottom: fitToPadding,
-              left: fitToPadding,
-              right: fitToPadding,
-              top: fitToPadding
-            }
-          }, map, features);
+          MapHeat.initialMapPositioning(
+            {
+              padding: {
+                bottom: fitToPadding,
+                left: fitToPadding,
+                right: fitToPadding,
+                top: fitToPadding
+              }
+            },
+            map,
+            features
+          );
         } else if (options?.zoom && options.center) {
           map.setZoom(options.zoom);
           map.setCenter(options.center);
         }
       }
     }
-  }, [
-    mapHeat,
-    map,
-    mapSettings,
-    fitToPadding,
-    options,
-    mapInitialized,
-    features
-  ]);
-  return /* @__PURE__ */ React3.createElement(HeatMapInitializerContext, {
-    value
-  }, children);
-}, "HeatMapInitializerProvider");
+  }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features]);
+  return /* @__PURE__ */ jsx3(HeatMapInitializerContext, { value, children });
+};
 
 // src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
 import { assertEx as assertEx4 } from "@xylabs/sdk-js";
 import { use as use3 } from "react";
-var useHeatMapInitializer = /* @__PURE__ */ __name(() => {
+var useHeatMapInitializer = () => {
   const context = use3(HeatMapInitializerContext);
   assertEx4("heatMapInitialized" in context, () => "useHeatMapInitializer must be used within a HeatMapInitializerContext");
   return context;
-}, "useHeatMapInitializer");
+};
 
 // src/Layers/Configs/HeatMapFillLayerConfig.ts
-var HeatMapFillLayerConfig = /* @__PURE__ */ __name((color) => ({
+var HeatMapFillLayerConfig = (color) => ({
   paint: {
     "fill-color": color,
     "fill-opacity": [
       "let",
       "density",
-      [
-        "+",
-        [
-          "/",
-          [
-            "number",
-            [
-              "get",
-              "value"
-            ]
-          ],
-          4
-        ],
-        0.125
-      ],
-      [
-        "interpolate",
-        [
-          "linear"
-        ],
-        [
-          "var",
-          "density"
-        ],
-        0.8,
-        [
-          "var",
-          "density"
-        ],
-        1,
-        0.85
-      ]
+      ["+", ["/", ["number", ["get", "value"]], 4], 0.125],
+      ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]
     ]
   }
-}), "HeatMapFillLayerConfig");
+});
 
 // src/Layers/Configs/HeatMapLineLayerConfig.ts
-var HeatMapLineLayerConfig = /* @__PURE__ */ __name((color) => ({
+var HeatMapLineLayerConfig = (color) => ({
   layout: {
     // Enable for debugging
     visibility: "none"
   },
   paint: {
     "line-color": color,
-    "line-opacity": [
-      "let",
-      "density",
-      0,
-      [
-        "interpolate",
-        [
-          "linear"
-        ],
-        [
-          "var",
-          "density"
-        ],
-        0.8,
-        [
-          "var",
-          "density"
-        ],
-        1,
-        0.85
-      ]
-    ],
+    "line-opacity": ["let", "density", 0, ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]],
     "line-width": 0.5
   }
-}), "HeatMapLineLayerConfig");
+});
 
 // src/Layers/Configs/HeatMapSymbolLayerConfig.ts
-var HeatMapSymbolLayerConfig = /* @__PURE__ */ __name((color) => ({
+var HeatMapSymbolLayerConfig = (color) => ({
   layout: {
     "text-anchor": "center",
     "text-field": [
       "concat",
       "value: ",
-      [
-        "to-string",
-        [
-          "+",
-          [
-            "/",
-            [
-              "number",
-              [
-                "get",
-                "value"
-              ]
-            ],
-            2
-          ],
-          0.25
-        ]
-      ],
+      ["to-string", ["+", ["/", ["number", ["get", "value"]], 2], 0.25]],
       "\n",
       "count: ",
-      [
-        "to-string",
-        [
-          "get",
-          "count"
-        ]
-      ]
+      ["to-string", ["get", "count"]]
     ],
     "text-size": 10,
     "visibility": "none"
   },
-  paint: {
-    "text-color": color
-  }
-}), "HeatMapSymbolLayerConfig");
+  paint: { "text-color": color }
+});
 
 // src/Layers/Configs/LocationPointLayerConfig.ts
-var LocationPointLayerConfig = /* @__PURE__ */ __name((color, circleRadius, circleOpacity) => {
+var LocationPointLayerConfig = (color, circleRadius, circleOpacity) => {
   return {
     paint: {
       "circle-color": color,
@@ -792,23 +627,17 @@ var LocationPointLayerConfig = /* @__PURE__ */ __name((color, circleRadius, circ
       "circle-radius": circleRadius
     }
   };
-}, "LocationPointLayerConfig");
+};
 
 // src/Layers/FillLayer.ts
 import { LayerBase } from "@xylabs/geo";
 var FillLayerBuilder = class extends LayerBase {
-  static {
-    __name(this, "FillLayerBuilder");
-  }
   FillLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "fill";
   constructor(id, source, FillLayerOptions) {
     super(id, source);
-    this.FillLayerOptions = FillLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
+    this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source };
   }
   buildLayer() {
     return {
@@ -823,18 +652,12 @@ var FillLayerBuilder = class extends LayerBase {
 // src/Layers/LineLayer.ts
 import { LayerBase as LayerBase2 } from "@xylabs/geo";
 var LineLayerBuilder = class extends LayerBase2 {
-  static {
-    __name(this, "LineLayerBuilder");
-  }
   LineLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "line";
   constructor(id, source, LineLayerOptions) {
     super(id, source);
-    this.LineLayerOptions = LineLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
+    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source };
   }
   buildLayer() {
     return {
@@ -850,18 +673,12 @@ var LineLayerBuilder = class extends LayerBase2 {
 // src/Layers/SymbolLayer.ts
 import { LayerBase as LayerBase3 } from "@xylabs/geo";
 var SymbolLayerBuilder = class extends LayerBase3 {
-  static {
-    __name(this, "SymbolLayerBuilder");
-  }
   SymbolLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "symbol";
   constructor(id, source, SymbolLayerOptions) {
     super(id, source);
-    this.SymbolLayerOptions = SymbolLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
+    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source };
   }
   buildLayer() {
     return {
@@ -882,43 +699,43 @@ var MapHeatConstants = {
   LocationLineLayerId: "location-line-id",
   LocationLineLayerSource: "location-line-source"
 };
-var LocationHeatMapLayerBuilder = /* @__PURE__ */ __name((color, alternateColor = "#000") => {
-  const { LocationFillLayerId, LocationFillLayerSource, LocationLineLayerId, LocationLineLayerSource, LocationDebugLayerId, LocationDebugLayerSource } = MapHeatConstants;
+var LocationHeatMapLayerBuilder = (color, alternateColor = "#000") => {
+  const {
+    LocationFillLayerId,
+    LocationFillLayerSource,
+    LocationLineLayerId,
+    LocationLineLayerSource,
+    LocationDebugLayerId,
+    LocationDebugLayerSource
+  } = MapHeatConstants;
   const fillLayerConfig = HeatMapFillLayerConfig(color);
   const lineLayerConfig = HeatMapLineLayerConfig(color);
   const debugLayerConfig = HeatMapSymbolLayerConfig(alternateColor);
   const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
   const lineLayer = new LineLayerBuilder(LocationLineLayerId, LocationLineLayerSource, lineLayerConfig);
   const debugLayer2 = new SymbolLayerBuilder(LocationDebugLayerId, LocationDebugLayerSource, debugLayerConfig);
-  return [
-    fillLayer,
-    lineLayer,
-    debugLayer2
-  ];
-}, "LocationHeatMapLayerBuilder");
+  return [fillLayer, lineLayer, debugLayer2];
+};
 
 // src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts
-var MapHeatConstants2 = /* @__PURE__ */ __name((index, type) => ({
+var MapHeatConstants2 = (index, type) => ({
   LocationDebugLayerId: `location-${type}-debug-id-${index}`,
   LocationDebugLayerSource: `location-${type}-debug-source-${index}`,
   LocationFillLayerId: `location-${type}-fill-id-${index}`,
   LocationFillLayerSource: `location-${type}-fill-source-${index}`,
   LocationLineLayerId: `location-${type}-line-id-${index}`,
   LocationLineLayerSource: `location-${type}-line-source-${index}`
-}), "MapHeatConstants");
-var LocationHeatMapLayerBuilderAnimated = /* @__PURE__ */ __name((color, index, type = "") => {
+});
+var LocationHeatMapLayerBuilderAnimated = (color, index, type = "") => {
   const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants2(index, type);
   const fillLayerConfig = HeatMapFillLayerConfig(color);
   const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
   return fillLayer;
-}, "LocationHeatMapLayerBuilderAnimated");
+};
 
 // src/Layers/CircleLayer.ts
 import { LayerBase as LayerBase4 } from "@xylabs/geo";
 var CircleLayerBuilder = class extends LayerBase4 {
-  static {
-    __name(this, "CircleLayerBuilder");
-  }
   CircleLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "circle";
@@ -932,11 +749,7 @@ var CircleLayerBuilder = class extends LayerBase4 {
   }
   buildLayer() {
     return {
-      filter: [
-        "==",
-        "$type",
-        "Point"
-      ],
+      filter: ["==", "$type", "Point"],
       layout: {},
       paint: {
         "circle-color": "#ff0000",
@@ -955,258 +768,256 @@ var MapPointsConstants = {
   LocationDotsLayerId: "location-dots",
   LocationDotsLayerSource: "location-dots-source"
 };
-var LocationPointsMapLayerBuilder = /* @__PURE__ */ __name((color, circleRadius = 6, circleOpacity = 0.8) => {
+var LocationPointsMapLayerBuilder = (color, circleRadius = 6, circleOpacity = 0.8) => {
   const { LocationDotsLayerId, LocationDotsLayerSource } = MapPointsConstants;
   const dotLayerConfig = LocationPointLayerConfig(color, circleRadius, circleOpacity);
   const dotLayer = new CircleLayerBuilder(LocationDotsLayerId, LocationDotsLayerSource, dotLayerConfig);
-  return [
-    dotLayer
-  ];
-}, "LocationPointsMapLayerBuilder");
+  return [dotLayer];
+};
 
 // src/Components/MapBoxHeat.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
-import React7 from "react";
 
 // src/Components/MapBox.tsx
 import "mapbox-gl/dist/mapbox-gl.css";
 import { MapStyle } from "@xyo-network/react-map-model";
 import { Map } from "mapbox-gl";
-import React4, { useEffect as useEffect6, useRef, useState as useState4 } from "react";
-var MapBox = /* @__PURE__ */ __name(({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
-  const [map, setMap] = useState4();
+import { useEffect as useEffect5, useRef } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MapBox = ({
+  accessToken,
+  darkMode = false,
+  options,
+  zoom = 2,
+  ...props
+}) => {
+  const mapRef = useRef(void 0);
   const mapContainerRef = useRef(null);
   const mapCanvasRef = useRef(null);
   const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
   const { mapSettings } = useMapSettings();
   const activeResize = mapSettings?.dynamicMapResize.value;
   useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
-  useEffect6(() => {
+  useEffect5(() => {
     if (mapSettings?.preferDark?.value === true) {
-      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
+      mapRef.current?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
     } else {
-      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`);
+      mapRef.current?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`);
     }
-  }, [
-    map,
-    darkMode,
-    mapSettings
-  ]);
-  useEffect6(() => {
-    const map2 = new Map({
+  }, [darkMode, mapSettings]);
+  useEffect5(() => {
+    const map = new Map({
       accessToken,
-      center: [
-        0,
-        0
-      ],
+      center: [0, 0],
       container: mapContainerRef.current ?? "",
       style: `mapbox://styles/${MapStyle.Light}`,
       zoom,
       ...options
     });
-    setMapBoxInstance?.(map2);
-    setMap(map2);
+    mapRef.current = map;
+    setMapBoxInstance?.(map);
     mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
     console.log("Created Map");
     return () => {
       console.log("Removing Map");
-      map2.remove();
+      map.remove();
     };
-  }, [
-    mapContainerRef,
-    setMap,
-    options,
-    zoom,
-    setMapBoxInstance,
-    accessToken
-  ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref: /* @__PURE__ */ __name((el) => {
-      mapContainerRef.current = el;
-    }, "ref"),
-    style: {
-      bottom: 0,
-      left: 0,
-      position: "absolute",
-      right: 0,
-      top: 0,
-      ...props
+  }, [mapContainerRef, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: (el) => {
+        mapContainerRef.current = el;
+      },
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
     }
-  });
-}, "MapBox");
+  );
+};
 
 // src/Components/MapSettingsComponents/Setting.tsx
 import { FormControlLabel, Switch } from "@mui/material";
-import React5 from "react";
-var MapSettingSwitch = /* @__PURE__ */ __name(({ developerMode, field, ...props }) => {
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MapSettingSwitch = ({
+  developerMode,
+  field,
+  ...props
+}) => {
   const { mapSettings, setMapSettings } = useMapSettings();
   const setting = mapSettings?.[field];
-  const onLocalChange = /* @__PURE__ */ __name((event) => {
+  const onLocalChange = (event) => {
     if (setting) {
       setMapSettings?.((previous) => {
         previous[setting.field].value = event.target.checked;
-        return {
-          ...previous
-        };
+        return { ...previous };
       });
     }
-  }, "onLocalChange");
+  };
   if (setting?.devMode && developerMode === false) {
     return null;
   }
-  return setting?.hidden ? null : /* @__PURE__ */ React5.createElement(FormControlLabel, {
-    label: setting?.label,
-    control: /* @__PURE__ */ React5.createElement(Switch, {
-      checked: setting?.value,
-      onChange: onLocalChange,
-      ...props
-    })
-  });
-}, "MapSettingSwitch");
+  return setting?.hidden ? null : /* @__PURE__ */ jsx5(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx5(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
+};
 
 // src/Components/MapSettingsComponents/SettingsBox.tsx
 import { Paper, Stack } from "@mui/material";
 import { useAppSettings } from "@xylabs/react-app-settings";
 import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
-import React6 from "react";
-var MapSettingsBox = /* @__PURE__ */ __name(({ developerMode, ...props }) => {
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MapSettingsBox = ({ developerMode, ...props }) => {
   const { mapSettings } = useMapSettings();
   const { developerMode: devModeFromContext } = useAppSettings();
   const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ React6.createElement(FlexGrowRow, {
-    bottom: 36,
-    left: 10,
-    position: "absolute",
-    ...props
-  }, /* @__PURE__ */ React6.createElement(FlexRow, {
-    paddingX: 2
-  }, /* @__PURE__ */ React6.createElement(Paper, null, /* @__PURE__ */ React6.createElement(Stack, {
-    direction: "row",
-    spacing: 1,
-    marginX: 1
-  }, Object.keys(mapSettings).map((key, index) => {
-    return /* @__PURE__ */ React6.createElement(MapSettingSwitch, {
-      key: index,
-      field: mapSettings[key].field,
-      developerMode
-    });
-  }))))) : null;
-}, "MapSettingsBox");
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx6(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx6(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx6(Paper, { children: /* @__PURE__ */ jsx6(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key) => {
+    return /* @__PURE__ */ jsx6(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, key);
+  }) }) }) }) }) : null;
+};
 
 // src/Components/MapBoxHeat.tsx
-var MapboxHeatFlexBox = /* @__PURE__ */ __name(({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(FlexCol, props, /* @__PURE__ */ React7.createElement(MapBox, {
-    accessToken,
-    options: mapBoxOptions,
-    zoom
-  }), /* @__PURE__ */ React7.createElement(MapSettingsBox, {
-    developerMode
-  }), legend, children);
-}, "MapboxHeatFlexBox");
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var MapboxHeatFlexBox = ({
+  accessToken,
+  children,
+  mapBoxOptions,
+  zoom,
+  legend,
+  developerMode,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx7(MapBox, { accessToken, options: mapBoxOptions, zoom }),
+    /* @__PURE__ */ jsx7(MapSettingsBox, { developerMode }),
+    legend,
+    children
+  ] });
+};
 
 // src/Components/AnimatedHeatMap.tsx
-var AnimatedHeatMap = /* @__PURE__ */ __name(({ accessToken, animatedFeatureSets, defaultMapSettings, heatMapColorProps, staticFeatureSet, ...props }) => {
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AnimatedHeatMap = ({
+  accessToken,
+  animatedFeatureSets,
+  defaultMapSettings,
+  heatMapColorProps,
+  staticFeatureSet,
+  ...props
+}) => {
   const theme = useTheme();
-  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
+  const {
+    staticMapColor,
+    lowUsageColor,
+    highUsageColor
+  } = heatMapColorProps || {};
   const localStaticMapColor = staticMapColor ?? theme.vars.palette.primary.light;
-  const [layers] = useState5(() => [
+  const [layers] = useState3(() => [
     LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
     LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
     LocationHeatMapLayerBuilderAnimated(highUsageColor || darkenCss(localStaticMapColor, 0.9), 1, "animated")
   ]);
-  return animatedFeatureSets?.length ? /* @__PURE__ */ React8.createElement(MapBoxInstanceProvider, null, /* @__PURE__ */ React8.createElement(MapSettingsProvider, {
-    defaultMapSettings,
-    debugLayerName: MapHeatConstants.LocationDebugLayerId
-  }, /* @__PURE__ */ React8.createElement(HeatMapInitializerProvider, {
-    features: staticFeatureSet,
-    layers: [
-      layers[0]
-    ],
-    featureSets: animatedFeatureSets,
-    featureSetsLayers: layers.slice(1, 3),
-    heatMapColorProps
-  }, /* @__PURE__ */ React8.createElement(MapboxHeatFlexBox, {
-    accessToken,
-    ...props
-  })))) : /* @__PURE__ */ React8.createElement(FlexCol2, {
-    minHeight: 160,
-    minWidth: 160,
-    busy: true
-  });
-}, "AnimatedHeatMap");
+  return animatedFeatureSets?.length ? /* @__PURE__ */ jsx8(MapBoxInstanceProvider, { children: /* @__PURE__ */ jsx8(MapSettingsProvider, { defaultMapSettings, debugLayerName: MapHeatConstants.LocationDebugLayerId, children: /* @__PURE__ */ jsx8(
+    HeatMapInitializerProvider,
+    {
+      features: staticFeatureSet,
+      layers: [layers[0]],
+      featureSets: animatedFeatureSets,
+      featureSetsLayers: layers.slice(1, 3),
+      heatMapColorProps,
+      children: /* @__PURE__ */ jsx8(MapboxHeatFlexBox, { accessToken, ...props })
+    }
+  ) }) }) : /* @__PURE__ */ jsx8(FlexCol2, { minHeight: 160, minWidth: 160, busy: true });
+};
 
 // src/Components/AnimatedHeatMapLoaded.tsx
 import { Alert, AlertTitle } from "@mui/material";
 import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
 import { useWeakArchivistFromNode, useWeakArchivistGet } from "@xyo-network/react-archivist";
-import { AnimatedHeatMapSettings, useFindHashes, useHeatMapColors } from "@xyo-network/react-map-model";
-import React11 from "react";
+import {
+  AnimatedHeatMapSettings,
+  useFindHashes,
+  useHeatMapColors
+} from "@xyo-network/react-map-model";
 
 // src/Components/Legend.tsx
 import { useMediaQuery, useTheme as useTheme3 } from "@mui/material";
 import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
-import React10 from "react";
 
 // src/Components/Legends/ColorGradient.tsx
 import { Typography, useTheme as useTheme2 } from "@mui/material";
 import { FlexCol as FlexCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React9 from "react";
-var ColorGradientLegend = /* @__PURE__ */ __name(({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var ColorGradientLegend = ({
+  startColor,
+  endColor,
+  startLabel,
+  endLabel,
+  heading,
+  textColor,
+  ...props
+}) => {
   const theme = useTheme2();
-  return /* @__PURE__ */ React9.createElement(FlexCol3, props, /* @__PURE__ */ React9.createElement(Typography, {
-    mb: theme.spacing(0.25),
-    color: textColor,
-    variant: "caption",
-    textAlign: "center"
-  }, heading), /* @__PURE__ */ React9.createElement(FlexCol3, {
-    flexGrow: 1,
-    alignItems: "stretch",
-    paddingX: theme.spacing(1),
-    mb: theme.spacing(0.25)
-  }, /* @__PURE__ */ React9.createElement(FlexCol3, {
-    height: theme.spacing(0.75),
-    border: `1px solid ${textColor}`,
-    sx: {
-      backgroundImage: `linear-gradient(to right, ${startColor},${endColor})`
-    }
-  })), /* @__PURE__ */ React9.createElement(FlexRow2, {
-    flexGrow: 1,
-    justifyContent: "space-between"
-  }, /* @__PURE__ */ React9.createElement(Typography, {
-    color: textColor,
-    variant: "caption"
-  }, startLabel), /* @__PURE__ */ React9.createElement(Typography, {
-    color: textColor,
-    variant: "caption"
-  }, endLabel)));
-}, "ColorGradientLegend");
+  return /* @__PURE__ */ jsxs2(FlexCol3, { ...props, children: [
+    /* @__PURE__ */ jsx9(Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
+    /* @__PURE__ */ jsx9(FlexCol3, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ jsx9(
+      FlexCol3,
+      {
+        height: theme.spacing(0.75),
+        border: `1px solid ${textColor}`,
+        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(FlexRow2, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx9(Typography, { color: textColor, variant: "caption", children: startLabel }),
+      /* @__PURE__ */ jsx9(Typography, { color: textColor, variant: "caption", children: endLabel })
+    ] })
+  ] });
+};
 
 // src/Components/Legend.tsx
-var AnimatedHeatMapLegend = /* @__PURE__ */ __name(({ ...legendProps }) => {
-  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
-  const theme = useTheme3();
-  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
-  return /* @__PURE__ */ React10.createElement(FlexCol4, {
-    position: "absolute",
-    bottom: 0,
-    right: 0
-  }, /* @__PURE__ */ React10.createElement(ColorGradientLegend, {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var AnimatedHeatMapLegend = ({ ...legendProps }) => {
+  const {
     startColor,
     endColor,
     startLabel,
     endLabel,
     heading,
-    textColor,
-    alignItems: "stretch",
-    marginBottom: theme.spacing(4),
-    marginLeft: isSmall ? theme.spacing(3) : 0,
-    marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
-    width: isSmall ? "40vw" : theme.spacing(18)
-  }));
-}, "AnimatedHeatMapLegend");
+    textColor
+  } = legendProps;
+  const theme = useTheme3();
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsx10(FlexCol4, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ jsx10(
+    ColorGradientLegend,
+    {
+      startColor,
+      endColor,
+      startLabel,
+      endLabel,
+      heading,
+      textColor,
+      ...{
+        alignItems: "stretch",
+        marginBottom: theme.spacing(4),
+        marginLeft: isSmall ? theme.spacing(3) : 0,
+        marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
+        width: isSmall ? "40vw" : theme.spacing(18)
+      }
+    }
+  ) });
+};
 
 // src/Components/AnimatedHeatMapLoaded.tsx
-var AnimatedHeatMapLoaded = /* @__PURE__ */ __name(({ accessToken, archivistNameOrAddress, ...props }) => {
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var AnimatedHeatMapLoaded = ({
+  accessToken,
+  archivistNameOrAddress,
+  ...props
+}) => {
   const hashes = useFindHashes();
   const [archivist] = useWeakArchivistFromNode(archivistNameOrAddress);
   const [payloads, xyoError] = useWeakArchivistGet(archivist, hashes);
@@ -1214,106 +1025,113 @@ var AnimatedHeatMapLoaded = /* @__PURE__ */ __name(({ accessToken, archivistName
   const { heatMapColorProps, legendProps } = useHeatMapColors();
   const MapBoxHeatProps = {
     flexGrow: 1,
-    legend: legendProps ? /* @__PURE__ */ React11.createElement(AnimatedHeatMapLegend, legendProps) : null
+    legend: legendProps ? /* @__PURE__ */ jsx11(AnimatedHeatMapLegend, { ...legendProps }) : null
   };
-  return /* @__PURE__ */ React11.createElement(FlexCol5, {
-    alignItems: "stretch",
-    ...props
-  }, xyoError ? /* @__PURE__ */ React11.createElement(Alert, {
-    sx: {
-      mt: 2
-    }
-  }, /* @__PURE__ */ React11.createElement(AlertTitle, null, "Error Loading Map"), xyoError.message ? `Error: ${xyoError.message}` : null, "You might try authenticating again.") : null, hashes === void 0 ? /* @__PURE__ */ React11.createElement(Alert, null, "Missing answer hash for heat map query") : /* @__PURE__ */ React11.createElement(AnimatedHeatMap, {
-    accessToken,
-    defaultMapSettings: AnimatedHeatMapSettings,
-    animatedFeatureSets: multipleFeatureSets.slice(1),
-    staticFeatureSet: multipleFeatureSets[0],
-    heatMapColorProps,
-    ...MapBoxHeatProps
-  }));
-}, "AnimatedHeatMapLoaded");
+  return /* @__PURE__ */ jsxs3(FlexCol5, { alignItems: "stretch", ...props, children: [
+    xyoError ? /* @__PURE__ */ jsxs3(Alert, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx11(AlertTitle, { children: "Error Loading Map" }),
+      xyoError.message ? `Error: ${xyoError.message}` : null,
+      "You might try authenticating again."
+    ] }) : null,
+    hashes === void 0 ? /* @__PURE__ */ jsx11(Alert, { children: "Missing answer hash for heat map query" }) : /* @__PURE__ */ jsx11(
+      AnimatedHeatMap,
+      {
+        accessToken,
+        defaultMapSettings: AnimatedHeatMapSettings,
+        animatedFeatureSets: multipleFeatureSets.slice(1),
+        staticFeatureSet: multipleFeatureSets[0],
+        heatMapColorProps,
+        ...MapBoxHeatProps
+      }
+    )
+  ] });
+};
 
 // src/Components/HeatMapSettings.ts
 import { DefaultMapSettings } from "@xyo-network/react-map-model";
 var HeatMapSettings = DefaultMapSettings();
-var { debugLayer, scrollToZoom, fitToPoints } = HeatMapSettings;
+var {
+  debugLayer,
+  scrollToZoom,
+  fitToPoints
+} = HeatMapSettings;
 debugLayer.hidden = false;
 scrollToZoom.value = true;
 fitToPoints.value = true;
 
 // src/Components/LayerAnimator.tsx
 import { useInterval } from "@xylabs/react-shared";
-import React12, { useCallback, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef2 } from "react";
+import {
+  useCallback,
+  useEffect as useEffect6,
+  useMemo as useMemo6,
+  useRef as useRef2
+} from "react";
+import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
 var timeIncrement = 2e3;
 var animatedLayerCount = 3;
-var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, layersInitialized, map }) => {
-  const layerIndexQueue = useRef2([]);
+var LayerAnimator = ({
+  animateLayers,
+  children,
+  layers,
+  layersInitialized,
+  map
+}) => {
+  const layerIndexQueueRef = useRef2([]);
   const fillLayers = useMemo6(() => {
     if (layers?.length && map && layersInitialized) {
       return layers.filter((layer) => {
         const fillLayer = layer.id.startsWith("location-fill");
         if (fillLayer) {
-          map.setPaintProperty(layer.id, "fill-opacity-transition", {
-            delay: 0,
-            duration: 4e3
-          });
+          map.setPaintProperty(layer.id, "fill-opacity-transition", { delay: 0, duration: 4e3 });
         }
         return fillLayer;
       });
     }
     return [];
-  }, [
-    layers,
-    layersInitialized,
-    map
-  ]);
-  const incrementQueue = useCallback((index) => {
-    if (fillLayers[index]) {
-      layerIndexQueue.current.push(index);
-    } else {
-      layerIndexQueue.current.push(0);
-    }
-    return layerIndexQueue.current.at(-1);
-  }, [
-    fillLayers
-  ]);
+  }, [layers, layersInitialized, map]);
+  const incrementQueue = useCallback(
+    (index) => {
+      if (fillLayers[index]) {
+        layerIndexQueueRef.current.push(index);
+      } else {
+        layerIndexQueueRef.current.push(0);
+      }
+      return layerIndexQueueRef.current.at(-1);
+    },
+    [fillLayers]
+  );
   const lastQueuedIndex = useCallback(() => {
-    const last = layerIndexQueue.current.at(-1);
+    const last = layerIndexQueueRef.current.at(-1);
     if (last === void 0) {
       incrementQueue(0);
       return 0;
     } else {
       return last;
     }
-  }, [
-    incrementQueue
-  ]);
+  }, [incrementQueue]);
   const unshiftQueue = useCallback(() => {
-    layerIndexQueue.current.shift();
+    layerIndexQueueRef.current.shift();
   }, []);
   const getNextLayer = useCallback(() => {
     const nextLayer = fillLayers[lastQueuedIndex()];
     incrementQueue(lastQueuedIndex() + 1);
     return nextLayer;
-  }, [
-    fillLayers,
-    incrementQueue,
-    lastQueuedIndex
-  ]);
-  const layerAnimateWorker = useCallback((layer) => {
-    if (layer) {
-      map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
-      setTimeout(() => {
-        map?.setPaintProperty(layer.id, "fill-opacity", 0);
-        unshiftQueue();
-      }, timeIncrement * 2);
-    } else {
-      console.warn("tried to queue an empty layer");
-    }
-  }, [
-    map,
-    unshiftQueue
-  ]);
+  }, [fillLayers, incrementQueue, lastQueuedIndex]);
+  const layerAnimateWorker = useCallback(
+    (layer) => {
+      if (layer) {
+        map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
+        setTimeout(() => {
+          map?.setPaintProperty(layer.id, "fill-opacity", 0);
+          unshiftQueue();
+        }, timeIncrement * 2);
+      } else {
+        console.warn("tried to queue an empty layer");
+      }
+    },
+    [map, unshiftQueue]
+  );
   const queueLayerAnimation = useCallback(() => {
     const animatedLayers = [];
     for (let i = 0; i < animatedLayerCount; i++) {
@@ -1328,122 +1146,71 @@ var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, l
         }, timeIncrement * index);
       }
     }
-  }, [
-    getNextLayer,
-    layerAnimateWorker
-  ]);
-  useEffect7(() => {
+  }, [getNextLayer, layerAnimateWorker]);
+  useEffect6(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
       queueLayerAnimation();
     }
-  }, [
-    animateLayers,
-    fillLayers.length,
-    layersInitialized,
-    map,
-    queueLayerAnimation
-  ]);
+  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation]);
   useInterval(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
       queueLayerAnimation();
     }
   }, timeIncrement * animatedLayerCount);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, children);
-}, "LayerAnimator");
+  return /* @__PURE__ */ jsx12(Fragment, { children });
+};
 
 // src/Components/MapBoxPoints.tsx
 import { Alert as Alert2 } from "@mui/material";
 import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
-import React13, { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo7 } from "react";
-var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitToPointsPadding = 20, layers, zoom, ...props }) => {
+import { useEffect as useEffect7 } from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var MapboxPointsFlexBox = ({
+  accessToken,
+  features,
+  fitToPointsPadding = 20,
+  layers,
+  zoom,
+  ...props
+}) => {
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
-  const customFitToBoundsOptions = /* @__PURE__ */ __name((zoom2) => {
+  const customFitToBoundsOptions = (zoom2) => {
     if (zoom2 !== void 0) {
-      return {
-        maxZoom: zoom2
-      };
+      return { maxZoom: zoom2 };
     }
     return {};
-  }, "customFitToBoundsOptions");
-  const mapPoints = useMemo7(() => {
-    return map && features?.length ? new MapPoints({
-      features,
-      map,
-      zoom
-    }) : void 0;
-  }, [
-    map,
-    features,
-    zoom
-  ]);
-  const updateFeatures = useCallback2(() => {
-    if (mapPoints?.isMapReady && features?.length && layers) for (const layer of layers) {
-      mapPoints.initializeMapSource(layer);
-    }
-  }, [
-    mapPoints,
-    features,
-    layers
-  ]);
-  const updateMapSetup = useCallback2(() => {
-    const { fitToPoints: fitToPoints2 } = mapSettings || {};
-    if (mapPoints && map && fitToPoints2?.value === true) {
-      mapPoints.initialMapPositioning({
-        padding: {
-          bottom: fitToPointsPadding,
-          left: fitToPointsPadding,
-          right: fitToPointsPadding,
-          top: fitToPointsPadding
-        },
-        ...customFitToBoundsOptions(zoom)
-      });
-    }
-  }, [
-    mapSettings,
-    mapPoints,
-    map,
-    fitToPointsPadding,
-    zoom
-  ]);
-  const reInitializeMap = useCallback2(() => {
-    mapPoints?.initialMapPositioning({
-      padding: {
+  };
+  useEffect7(() => {
+    if (mapInitialized) {
+      const mapPoints = map && features?.length ? new MapPoints({
+        features,
+        map,
+        zoom
+      }) : void 0;
+      const { fitToPoints: fitToPoints2 } = mapSettings || {};
+      const padding = {
         bottom: fitToPointsPadding,
         left: fitToPointsPadding,
         right: fitToPointsPadding,
         top: fitToPointsPadding
-      },
-      ...customFitToBoundsOptions(zoom)
-    });
-    updateFeatures();
-  }, [
-    mapPoints,
-    fitToPointsPadding,
-    updateFeatures,
-    zoom
-  ]);
-  useEffect8(() => {
-    if (mapInitialized) {
-      updateMapSetup();
-      reInitializeMap();
+      };
+      if (mapPoints && map && fitToPoints2?.value === true) {
+        mapPoints.initialMapPositioning({ padding, ...customFitToBoundsOptions(zoom) });
+      }
+      mapPoints?.initialMapPositioning({ padding, ...customFitToBoundsOptions(zoom) });
+      if (mapPoints?.isMapReady && features?.length && layers) {
+        for (const layer of layers) {
+          mapPoints.initializeMapSource(layer);
+        }
+      }
     }
-  }, [
-    mapInitialized,
-    reInitializeMap,
-    updateMapSetup
-  ]);
-  return /* @__PURE__ */ React13.createElement(FlexCol6, {
-    alignItems: "stretch",
-    id: "xyo-mapbox-wrap",
-    ...props
-  }, features ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(MapBox, {
-    accessToken,
-    zoom
-  }), /* @__PURE__ */ React13.createElement(MapSettingsBox, null)) : /* @__PURE__ */ React13.createElement(Alert2, {
-    severity: "error"
-  }, "No data to show"));
-}, "MapboxPointsFlexBox");
+  }, [mapInitialized, mapSettings, map, fitToPointsPadding, zoom, features, layers]);
+  return /* @__PURE__ */ jsx13(FlexCol6, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(MapBox, { accessToken, zoom }),
+    /* @__PURE__ */ jsx13(MapSettingsBox, {})
+  ] }) : /* @__PURE__ */ jsx13(Alert2, { severity: "error", children: "No data to show" }) });
+};
 export {
   AnimatedHeatMap,
   AnimatedHeatMapLegend,