@xyo-network/react-map 2.64.0-rc.3 → 2.64.0-rc.6

package/dist/node/Components/LayerAnimator.mjs

@@ -0,0 +1,94 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useInterval } from "@xylabs/react-shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+const timeIncrement = 2e3;
+const animatedLayerCount = 3;
+const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
+  const [fillLayers, setFillLayers] = useState([]);
+  const layerIndexQueue = useRef([]);
+  const incrementQueue = useCallback(
+    (index) => {
+      if (fillLayers[index]) {
+        layerIndexQueue.current.push(index);
+      } else {
+        layerIndexQueue.current.push(0);
+      }
+      return layerIndexQueue.current.at(-1);
+    },
+    [fillLayers]
+  );
+  const lastQueuedIndex = useCallback(() => {
+    const last = layerIndexQueue.current.at(-1);
+    if (last === void 0) {
+      incrementQueue(0);
+      return 0;
+    } else {
+      return last;
+    }
+  }, [incrementQueue]);
+  const unshiftQueue = useCallback(() => {
+    layerIndexQueue.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]
+  );
+  useEffect(() => {
+    if (layers?.length && map && layersInitialized) {
+      setFillLayers(
+        layers.filter((layer) => {
+          const fillLayer = layer.id.startsWith("location-fill");
+          if (fillLayer) {
+            map.setPaintProperty(layer.id, "fill-opacity-transition", { delay: 0, duration: 4e3 });
+          }
+          return fillLayer;
+        })
+      );
+    }
+  }, [layers, layersInitialized, map]);
+  const queueLayerAnimation = useCallback(() => {
+    const animatedLayers = [];
+    for (let i = 0; i < animatedLayerCount; i++) {
+      animatedLayers.push(getNextLayer());
+    }
+    animatedLayers.forEach((layer, index) => {
+      if (index === 0) {
+        layerAnimateWorker(layer);
+      } else {
+        setTimeout(() => {
+          layerAnimateWorker(layer);
+        }, timeIncrement * index);
+      }
+    });
+  }, [getNextLayer, layerAnimateWorker]);
+  useEffect(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length) {
+      queueLayerAnimation();
+    }
+  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation]);
+  useInterval(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length) {
+      queueLayerAnimation();
+    }
+  }, timeIncrement * animatedLayerCount);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+export {
+  LayerAnimator
+};
+//# sourceMappingURL=LayerAnimator.mjs.map

package/dist/node/Components/LayerAnimator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/LayerAnimator.tsx"],"sourcesContent":["import { useInterval, WithChildren } from '@xylabs/react-shared'\nimport { Map } from 'mapbox-gl'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { MapLayer } from '../Layers'\nimport { MapboxFlexBoxProps } from '../lib'\n\nexport interface LayerAnimatorProps {\n  animateLayers?: boolean\n  layers: MapboxFlexBoxProps['layers']\n  layersInitialized: boolean\n  map: Map | undefined\n}\n\nconst timeIncrement = 2000\nconst animatedLayerCount = 3\n\nexport const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({ animateLayers, children, layers, layersInitialized, map }) => {\n  const [fillLayers, setFillLayers] = useState<MapLayer[]>([])\n  const layerIndexQueue = useRef<number[]>([])\n\n  const incrementQueue = useCallback(\n    (index: number) => {\n      if (fillLayers[index]) {\n        layerIndexQueue.current.push(index)\n      } else {\n        layerIndexQueue.current.push(0)\n      }\n      return layerIndexQueue.current.at(-1)\n    },\n    [fillLayers],\n  )\n\n  const lastQueuedIndex = useCallback(() => {\n    const last = layerIndexQueue.current.at(-1)\n    if (last === undefined) {\n      incrementQueue(0)\n      return 0\n    } else {\n      return last\n    }\n  }, [incrementQueue])\n\n  const unshiftQueue = useCallback(() => {\n    layerIndexQueue.current.shift()\n  }, [])\n\n  const getNextLayer = useCallback(() => {\n    const nextLayer = fillLayers[lastQueuedIndex()]\n    incrementQueue(lastQueuedIndex() + 1)\n    return nextLayer\n  }, [fillLayers, incrementQueue, lastQueuedIndex])\n\n  const layerAnimateWorker = useCallback(\n    (layer: MapLayer) => {\n      if (layer) {\n        map?.setPaintProperty(layer.id, 'fill-opacity', 0.85)\n        setTimeout(() => {\n          map?.setPaintProperty(layer.id, 'fill-opacity', 0)\n          unshiftQueue()\n        }, timeIncrement * 2)\n      } else {\n        console.warn('tried to queue an empty layer')\n      }\n    },\n    [map, unshiftQueue],\n  )\n\n  useEffect(() => {\n    if (layers?.length && map && layersInitialized) {\n      // Only animate fill layers for now\n      setFillLayers(\n        layers.filter((layer) => {\n          const fillLayer = layer.id.startsWith('location-fill')\n          if (fillLayer) {\n            map.setPaintProperty(layer.id, 'fill-opacity-transition', { delay: 0, duration: 4000 })\n          }\n          return fillLayer\n        }),\n      )\n    }\n  }, [layers, layersInitialized, map])\n\n  //\n  const queueLayerAnimation = useCallback(() => {\n    const animatedLayers: MapLayer[] = []\n\n    for (let i = 0; i < animatedLayerCount; i++) {\n      animatedLayers.push(getNextLayer())\n    }\n\n    animatedLayers.forEach((layer, index) => {\n      if (index === 0) {\n        layerAnimateWorker(layer)\n      } else {\n        setTimeout(() => {\n          layerAnimateWorker(layer)\n        }, timeIncrement * index)\n      }\n    })\n  }, [getNextLayer, layerAnimateWorker])\n\n  // Run a single layer animation before the interval kicks in\n  useEffect(() => {\n    if (animateLayers && layersInitialized && map && fillLayers.length) {\n      queueLayerAnimation()\n    }\n  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation])\n\n  useInterval(() => {\n    if (animateLayers && layersInitialized && map && fillLayers.length) {\n      queueLayerAnimation()\n    }\n  }, timeIncrement * animatedLayerCount)\n\n  return <>{children}</>\n}\n"],"mappings":"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","names":[]}

package/dist/node/Components/Legend.d.mts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorGradientLegendProps } from '../Colors';
+declare const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps>;
+export { AnimatedHeatMapLegend };
+//# sourceMappingURL=Legend.d.ts.map

package/dist/node/Components/Legend.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/Components/Legend.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAGpD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwB7D,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/node/Components/Legend.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorGradientLegendProps } from '../Colors';
+declare const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps>;
+export { AnimatedHeatMapLegend };
+//# sourceMappingURL=Legend.d.ts.map

package/dist/node/Components/Legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/Components/Legend.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAGpD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwB7D,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/node/Components/Legend.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Legend_exports = {};
+__export(Legend_exports, {
+  AnimatedHeatMapLegend: () => AnimatedHeatMapLegend
+});
+module.exports = __toCommonJS(Legend_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_Legends = require("./Legends");
+const AnimatedHeatMapLegend = ({ ...legendProps }) => {
+  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
+  const theme = (0, import_material.useTheme)();
+  const isSmall = (0, import_material.useMediaQuery)(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Legends.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)
+      }
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedHeatMapLegend
+});
+//# sourceMappingURL=Legend.js.map

package/dist/node/Components/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/Legend.tsx"],"sourcesContent":["import { useMediaQuery, useTheme } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nimport { ColorGradientLegendProps } from '../Colors'\nimport { ColorGradientLegend } from './Legends'\n\nconst AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {\n  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps\n  const theme = useTheme()\n  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <FlexCol position=\"absolute\" bottom={0} right={0}>\n      <ColorGradientLegend\n        startColor={startColor}\n        endColor={endColor}\n        startLabel={startLabel}\n        endLabel={endLabel}\n        heading={heading}\n        textColor={textColor}\n        {...{\n          alignItems: 'stretch',\n          marginBottom: theme.spacing(4),\n          marginLeft: isSmall ? theme.spacing(3) : 0,\n          marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),\n          width: isSmall ? '40vw' : theme.spacing(18),\n        }}\n      />\n    </FlexCol>\n  )\n}\n\nexport { AnimatedHeatMapLegend }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM;AAbN,sBAAwC;AACxC,2BAAwB;AAGxB,qBAAoC;AAEpC,MAAM,wBAA4D,CAAC,EAAE,GAAG,YAAY,MAAM;AACxF,QAAM,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,UAAU,IAAI;AAC3E,QAAM,YAAQ,0BAAS;AACvB,QAAM,cAAU,+BAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE1D,SACE,4CAAC,gCAAQ,UAAS,YAAW,QAAQ,GAAG,OAAO,GAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,QACF,YAAY;AAAA,QACZ,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC7B,YAAY,UAAU,MAAM,QAAQ,CAAC,IAAI;AAAA,QACzC,aAAa,UAAU,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC;AAAA,QACzD,OAAO,UAAU,SAAS,MAAM,QAAQ,EAAE;AAAA,MAC5C;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/node/Components/Legend.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { ColorGradientLegend } from "./Legends";
+const AnimatedHeatMapLegend = ({ ...legendProps }) => {
+  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
+  const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsx(FlexCol, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ jsx(
+    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)
+      }
+    }
+  ) });
+};
+export {
+  AnimatedHeatMapLegend
+};
+//# sourceMappingURL=Legend.mjs.map

package/dist/node/Components/Legend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/Legend.tsx"],"sourcesContent":["import { useMediaQuery, useTheme } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nimport { ColorGradientLegendProps } from '../Colors'\nimport { ColorGradientLegend } from './Legends'\n\nconst AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {\n  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps\n  const theme = useTheme()\n  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <FlexCol position=\"absolute\" bottom={0} right={0}>\n      <ColorGradientLegend\n        startColor={startColor}\n        endColor={endColor}\n        startLabel={startLabel}\n        endLabel={endLabel}\n        heading={heading}\n        textColor={textColor}\n        {...{\n          alignItems: 'stretch',\n          marginBottom: theme.spacing(4),\n          marginLeft: isSmall ? theme.spacing(3) : 0,\n          marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),\n          width: isSmall ? '40vw' : theme.spacing(18),\n        }}\n      />\n    </FlexCol>\n  )\n}\n\nexport { AnimatedHeatMapLegend }\n"],"mappings":"AAaM;AAbN,SAAS,eAAe,gBAAgB;AACxC,SAAS,eAAe;AAGxB,SAAS,2BAA2B;AAEpC,MAAM,wBAA4D,CAAC,EAAE,GAAG,YAAY,MAAM;AACxF,QAAM,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,UAAU,IAAI;AAC3E,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE1D,SACE,oBAAC,WAAQ,UAAS,YAAW,QAAQ,GAAG,OAAO,GAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,QACF,YAAY;AAAA,QACZ,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC7B,YAAY,UAAU,MAAM,QAAQ,CAAC,IAAI;AAAA,QACzC,aAAa,UAAU,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC;AAAA,QACzD,OAAO,UAAU,SAAS,MAAM,QAAQ,EAAE;AAAA,MAC5C;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/node/Components/Legends/ColorGradient.d.mts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorGradientLegendProps } from '../../Colors';
+declare const ColorGradientLegend: React.FC<ColorGradientLegendProps>;
+export { ColorGradientLegend };
+//# sourceMappingURL=ColorGradient.d.ts.map

package/dist/node/Components/Legends/ColorGradient.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorGradient.d.ts","sourceRoot":"","sources":["../../../../src/Components/Legends/ColorGradient.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyB3D,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/node/Components/Legends/ColorGradient.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorGradientLegendProps } from '../../Colors';
+declare const ColorGradientLegend: React.FC<ColorGradientLegendProps>;
+export { ColorGradientLegend };
+//# sourceMappingURL=ColorGradient.d.ts.map

package/dist/node/Components/Legends/ColorGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorGradient.d.ts","sourceRoot":"","sources":["../../../../src/Components/Legends/ColorGradient.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyB3D,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/node/Components/Legends/ColorGradient.js

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ColorGradient_exports = {};
+__export(ColorGradient_exports, {
+  ColorGradientLegend: () => ColorGradientLegend
+});
+module.exports = __toCommonJS(ColorGradient_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+const ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+  const theme = (0, import_material.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_flexbox.FlexCol,
+      {
+        height: theme.spacing(0.75),
+        border: `1px solid ${textColor}`,
+        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { color: textColor, variant: "caption", children: startLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { color: textColor, variant: "caption", children: endLabel })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorGradientLegend
+});
+//# sourceMappingURL=ColorGradient.js.map

package/dist/node/Components/Legends/ColorGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Components/Legends/ColorGradient.tsx"],"sourcesContent":["import { Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nimport { ColorGradientLegendProps } from '../../Colors'\n\nconst ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {\n  const theme = useTheme()\n\n  return (\n    <FlexCol {...props}>\n      <Typography mb={theme.spacing(0.25)} color={textColor} variant=\"caption\" textAlign=\"center\">\n        {heading}\n      </Typography>\n      <FlexCol flexGrow={1} alignItems=\"stretch\" paddingX={theme.spacing(1)} mb={theme.spacing(0.25)}>\n        <FlexCol\n          height={theme.spacing(0.75)}\n          border={`1px solid ${textColor}`}\n          sx={{ backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }}\n        />\n      </FlexCol>\n      <FlexRow flexGrow={1} justifyContent=\"space-between\">\n        <Typography color={textColor} variant=\"caption\">\n          {startLabel}\n        </Typography>\n        <Typography color={textColor} variant=\"caption\">\n          {endLabel}\n        </Typography>\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nexport { ColorGradientLegend }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM;AAVN,sBAAqC;AACrC,2BAAiC;AAIjC,MAAM,sBAA0D,CAAC,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,WAAW,GAAG,MAAM,MAAM;AAChJ,QAAM,YAAQ,0BAAS;AAEvB,SACE,6CAAC,gCAAS,GAAG,OACX;AAAA,gDAAC,8BAAW,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,WAAW,SAAQ,WAAU,WAAU,UAChF,mBACH;AAAA,IACA,4CAAC,gCAAQ,UAAU,GAAG,YAAW,WAAU,UAAU,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,IAAI,GAC3F;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,MAAM,QAAQ,IAAI;AAAA,QAC1B,QAAQ,aAAa,SAAS;AAAA,QAC9B,IAAI,EAAE,iBAAiB,6BAA6B,UAAU,IAAI,QAAQ,IAAI;AAAA;AAAA,IAChF,GACF;AAAA,IACA,6CAAC,gCAAQ,UAAU,GAAG,gBAAe,iBACnC;AAAA,kDAAC,8BAAW,OAAO,WAAW,SAAQ,WACnC,sBACH;AAAA,MACA,4CAAC,8BAAW,OAAO,WAAW,SAAQ,WACnC,oBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/node/Components/Legends/ColorGradient.mjs

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Typography, useTheme } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+const ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx(Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
+    /* @__PURE__ */ jsx(FlexCol, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ jsx(
+      FlexCol,
+      {
+        height: theme.spacing(0.75),
+        border: `1px solid ${textColor}`,
+        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(FlexRow, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Typography, { color: textColor, variant: "caption", children: startLabel }),
+      /* @__PURE__ */ jsx(Typography, { color: textColor, variant: "caption", children: endLabel })
+    ] })
+  ] });
+};
+export {
+  ColorGradientLegend
+};
+//# sourceMappingURL=ColorGradient.mjs.map

package/dist/node/Components/Legends/ColorGradient.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Components/Legends/ColorGradient.tsx"],"sourcesContent":["import { Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nimport { ColorGradientLegendProps } from '../../Colors'\n\nconst ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {\n  const theme = useTheme()\n\n  return (\n    <FlexCol {...props}>\n      <Typography mb={theme.spacing(0.25)} color={textColor} variant=\"caption\" textAlign=\"center\">\n        {heading}\n      </Typography>\n      <FlexCol flexGrow={1} alignItems=\"stretch\" paddingX={theme.spacing(1)} mb={theme.spacing(0.25)}>\n        <FlexCol\n          height={theme.spacing(0.75)}\n          border={`1px solid ${textColor}`}\n          sx={{ backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }}\n        />\n      </FlexCol>\n      <FlexRow flexGrow={1} justifyContent=\"space-between\">\n        <Typography color={textColor} variant=\"caption\">\n          {startLabel}\n        </Typography>\n        <Typography color={textColor} variant=\"caption\">\n          {endLabel}\n        </Typography>\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nexport { ColorGradientLegend }\n"],"mappings":"AAUM,cAUA,YAVA;AAVN,SAAS,YAAY,gBAAgB;AACrC,SAAS,SAAS,eAAe;AAIjC,MAAM,sBAA0D,CAAC,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,WAAW,GAAG,MAAM,MAAM;AAChJ,QAAM,QAAQ,SAAS;AAEvB,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,WAAW,SAAQ,WAAU,WAAU,UAChF,mBACH;AAAA,IACA,oBAAC,WAAQ,UAAU,GAAG,YAAW,WAAU,UAAU,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,IAAI,GAC3F;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,MAAM,QAAQ,IAAI;AAAA,QAC1B,QAAQ,aAAa,SAAS;AAAA,QAC9B,IAAI,EAAE,iBAAiB,6BAA6B,UAAU,IAAI,QAAQ,IAAI;AAAA;AAAA,IAChF,GACF;AAAA,IACA,qBAAC,WAAQ,UAAU,GAAG,gBAAe,iBACnC;AAAA,0BAAC,cAAW,OAAO,WAAW,SAAQ,WACnC,sBACH;AAAA,MACA,oBAAC,cAAW,OAAO,WAAW,SAAQ,WACnC,oBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/node/Components/Legends/index.d.mts

@@ -0,0 +1,2 @@
+export * from './ColorGradient';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/Components/Legends/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Components/Legends/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/node/Components/Legends/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorGradient';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/Components/Legends/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Components/Legends/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/node/Components/Legends/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Legends_exports = {};
+module.exports = __toCommonJS(Legends_exports);
+__reExport(Legends_exports, require("./ColorGradient"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./ColorGradient")
+});
+//# sourceMappingURL=index.js.map

package/dist/node/Components/Legends/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Components/Legends/index.ts"],"sourcesContent":["export * from './ColorGradient'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAc,4BAAd;","names":[]}

package/dist/node/Components/Legends/index.mjs

@@ -0,0 +1,2 @@
+export * from "./ColorGradient";
+//# sourceMappingURL=index.mjs.map

package/dist/node/Components/Legends/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Components/Legends/index.ts"],"sourcesContent":["export * from './ColorGradient'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/node/Components/MapBox.d.mts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { MapboxOptions } from 'mapbox-gl';
+export interface MapBoxProps {
+    accessToken: string;
+    darkMode?: boolean;
+    options?: Partial<MapboxOptions>;
+    zoom?: number;
+}
+export declare const MapBox: React.FC<MapBoxProps>;
+//# sourceMappingURL=MapBox.d.ts.map

package/dist/node/Components/MapBox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAO,aAAa,EAAE,MAAM,WAAW,CAAA;AAO9C,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/node/Components/MapBox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { MapboxOptions } from 'mapbox-gl';
+export interface MapBoxProps {
+    accessToken: string;
+    darkMode?: boolean;
+    options?: Partial<MapboxOptions>;
+    zoom?: number;
+}
+export declare const MapBox: React.FC<MapBoxProps>;
+//# sourceMappingURL=MapBox.d.ts.map

package/dist/node/Components/MapBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAO,aAAa,EAAE,MAAM,WAAW,CAAA;AAO9C,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/node/Components/MapBox.js

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MapBox_exports = {};
+__export(MapBox_exports, {
+  MapBox: () => MapBox
+});
+module.exports = __toCommonJS(MapBox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_mapbox_gl = require("mapbox-gl/dist/mapbox-gl.css");
+var import_mapbox_gl2 = require("mapbox-gl");
+var import_react = require("react");
+var import_Contexts = require("../Contexts");
+var import_hooks = require("../hooks");
+var import_lib = require("../lib");
+const MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = (0, import_react.useState)();
+  const mapContainerRef = (0, import_react.useRef)(null);
+  const mapCanvasRef = (0, import_react.useRef)(null);
+  const { setMapBoxInstance, map: mapInstance } = (0, import_Contexts.useMapBoxInstance)();
+  const { mapSettings } = (0, import_Contexts.useMapSettings)();
+  const activeResize = mapSettings?.dynamicMapResize.value;
+  (0, import_hooks.useDynamicMapResize)(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  (0, import_react.useEffect)(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${import_lib.MapStyle.Dark}`);
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? import_lib.MapStyle.Dark : import_lib.MapStyle.Light}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  (0, import_react.useEffect)(() => {
+    const map2 = new import_mapbox_gl2.Map({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${import_lib.MapStyle.Light}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance?.(map2);
+    setMap(map2);
+    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
+    console.log("Created Map");
+    return () => {
+      console.log("Removing Map");
+      map2.remove();
+    };
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapBox
+});
+//# sourceMappingURL=MapBox.js.map

package/dist/node/Components/MapBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/MapBox.tsx"],"sourcesContent":["// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DI;AA5DJ,uBAAO;AAEP,IAAAA,oBAAmC;AACnC,mBAA4C;AAE5C,sBAAkD;AAClD,mBAAoC;AACpC,iBAAyB;AASlB,MAAM,SAAgC,CAAC,EAAE,aAAa,WAAW,OAAO,SAAS,OAAO,GAAG,GAAG,MAAM,MAAM;AAC/G,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAc;AACpC,QAAM,sBAAkB,qBAA8B,IAAI;AAC1D,QAAM,mBAAe,qBAAiC,IAAI;AAC1D,QAAM,EAAE,mBAAmB,KAAK,YAAY,QAAI,mCAAkB;AAClE,QAAM,EAAE,YAAY,QAAI,gCAAe;AAEvC,QAAM,eAAe,aAAa,iBAAiB;AACnD,wCAAoB,iBAAiB,cAAc,aAAa,YAAY;AAE5E,8BAAU,MAAM;AACd,QAAI,aAAa,YAAY,UAAU,MAAM;AAC3C,WAAK,SAAS,mBAAmB,oBAAS,IAAI,EAAE;AAAA,IAClD,OAAO;AACL,WAAK,SAAS,mBAAmB,WAAW,oBAAS,OAAO,oBAAS,KAAK,EAAE;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,WAAW,CAAC;AAE/B,8BAAU,MAAM;AACd,UAAMC,OAAM,IAAI,sBAAI;AAAA,MAClB;AAAA,MACA,QAAQ,CAAC,GAAG,CAAC;AAAA,MACb,WAAW,gBAAgB,WAAW;AAAA,MACtC,OAAO,mBAAmB,oBAAS,KAAK;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAGD,wBAAoBA,IAAG;AACvB,WAAOA,IAAG;AAGV,iBAAa,UAAU,SAAS,cAAc,kBAAkB;AAEhE,YAAQ,IAAI,aAAa;AAEzB,WAAO,MAAM;AACX,cAAQ,IAAI,cAAc;AAC1B,MAAAA,KAAI,OAAO;AAAA,IACb;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,SAAS,MAAM,mBAAmB,WAAW,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,CAAC,OAAQ,gBAAgB,UAAU;AAAA,MACxC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":["import_mapbox_gl","map"]}

package/dist/node/Components/MapBox.mjs

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Map } from "mapbox-gl";
+import { useEffect, useRef, useState } from "react";
+import { useMapBoxInstance, useMapSettings } from "../Contexts";
+import { useDynamicMapResize } from "../hooks";
+import { MapStyle } from "../lib";
+const MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState();
+  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);
+  useEffect(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  useEffect(() => {
+    const map2 = new Map({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${MapStyle.Light}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance?.(map2);
+    setMap(map2);
+    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
+    console.log("Created Map");
+    return () => {
+      console.log("Removing Map");
+      map2.remove();
+    };
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+export {
+  MapBox
+};
+//# sourceMappingURL=MapBox.mjs.map

package/dist/node/Components/MapBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/MapBox.tsx"],"sourcesContent":["// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n"],"mappings":"AA6DI;AA5DJ,OAAO;AAEP,SAAS,WAA0B;AACnC,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AASlB,MAAM,SAAgC,CAAC,EAAE,aAAa,WAAW,OAAO,SAAS,OAAO,GAAG,GAAG,MAAM,MAAM;AAC/G,QAAM,CAAC,KAAK,MAAM,IAAI,SAAc;AACpC,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAiC,IAAI;AAC1D,QAAM,EAAE,mBAAmB,KAAK,YAAY,IAAI,kBAAkB;AAClE,QAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,QAAM,eAAe,aAAa,iBAAiB;AACnD,sBAAoB,iBAAiB,cAAc,aAAa,YAAY;AAE5E,YAAU,MAAM;AACd,QAAI,aAAa,YAAY,UAAU,MAAM;AAC3C,WAAK,SAAS,mBAAmB,SAAS,IAAI,EAAE;AAAA,IAClD,OAAO;AACL,WAAK,SAAS,mBAAmB,WAAW,SAAS,OAAO,SAAS,KAAK,EAAE;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,WAAW,CAAC;AAE/B,YAAU,MAAM;AACd,UAAMA,OAAM,IAAI,IAAI;AAAA,MAClB;AAAA,MACA,QAAQ,CAAC,GAAG,CAAC;AAAA,MACb,WAAW,gBAAgB,WAAW;AAAA,MACtC,OAAO,mBAAmB,SAAS,KAAK;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAGD,wBAAoBA,IAAG;AACvB,WAAOA,IAAG;AAGV,iBAAa,UAAU,SAAS,cAAc,kBAAkB;AAEhE,YAAQ,IAAI,aAAa;AAEzB,WAAO,MAAM;AACX,cAAQ,IAAI,cAAc;AAC1B,MAAAA,KAAI,OAAO;AAAA,IACb;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,SAAS,MAAM,mBAAmB,WAAW,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,CAAC,OAAQ,gBAAgB,UAAU;AAAA,MACxC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":["map"]}