@xyo-network/react-map 2.64.0-rc.7 → 2.64.0

package/dist/node/Components/LayerAnimator.js

@@ -1,35 +1,13 @@
-"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 LayerAnimator_exports = {};
-__export(LayerAnimator_exports, {
-  LayerAnimator: () => LayerAnimator
-});
-module.exports = __toCommonJS(LayerAnimator_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react_shared = require("@xylabs/react-shared");
-var import_react = require("react");
-const timeIncrement = 2e3;
-const animatedLayerCount = 3;
-const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
-  const [fillLayers, setFillLayers] = (0, import_react.useState)([]);
-  const layerIndexQueue = (0, import_react.useRef)([]);
-  const incrementQueue = (0, import_react.useCallback)(
+// src/Components/LayerAnimator.tsx
+import { useInterval } from "@xylabs/react-shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var timeIncrement = 2e3;
+var animatedLayerCount = 3;
+var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
+  const [fillLayers, setFillLayers] = useState([]);
+  const layerIndexQueue = useRef([]);
+  const incrementQueue = useCallback(
     (index) => {
       if (fillLayers[index]) {
         layerIndexQueue.current.push(index);
@@ -40,7 +18,7 @@ const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map
     },
     [fillLayers]
   );
-  const lastQueuedIndex = (0, import_react.useCallback)(() => {
+  const lastQueuedIndex = useCallback(() => {
     const last = layerIndexQueue.current.at(-1);
     if (last === void 0) {
       incrementQueue(0);
@@ -49,20 +27,20 @@ const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map
       return last;
     }
   }, [incrementQueue]);
-  const unshiftQueue = (0, import_react.useCallback)(() => {
+  const unshiftQueue = useCallback(() => {
     layerIndexQueue.current.shift();
   }, []);
-  const getNextLayer = (0, import_react.useCallback)(() => {
+  const getNextLayer = useCallback(() => {
     const nextLayer = fillLayers[lastQueuedIndex()];
     incrementQueue(lastQueuedIndex() + 1);
     return nextLayer;
   }, [fillLayers, incrementQueue, lastQueuedIndex]);
-  const layerAnimateWorker = (0, import_react.useCallback)(
+  const layerAnimateWorker = useCallback(
     (layer) => {
       if (layer) {
-        map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
+        map == null ? void 0 : map.setPaintProperty(layer.id, "fill-opacity", 0.85);
         setTimeout(() => {
-          map?.setPaintProperty(layer.id, "fill-opacity", 0);
+          map == null ? void 0 : map.setPaintProperty(layer.id, "fill-opacity", 0);
           unshiftQueue();
         }, timeIncrement * 2);
       } else {
@@ -71,8 +49,8 @@ const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map
     },
     [map, unshiftQueue]
   );
-  (0, import_react.useEffect)(() => {
-    if (layers?.length && map && layersInitialized) {
+  useEffect(() => {
+    if ((layers == null ? void 0 : layers.length) && map && layersInitialized) {
       setFillLayers(
         layers.filter((layer) => {
           const fillLayer = layer.id.startsWith("location-fill");
@@ -84,7 +62,7 @@ const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map
       );
     }
   }, [layers, layersInitialized, map]);
-  const queueLayerAnimation = (0, import_react.useCallback)(() => {
+  const queueLayerAnimation = useCallback(() => {
     const animatedLayers = [];
     for (let i = 0; i < animatedLayerCount; i++) {
       animatedLayers.push(getNextLayer());
@@ -99,20 +77,19 @@ const LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map
       }
     });
   }, [getNextLayer, layerAnimateWorker]);
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length) {
       queueLayerAnimation();
     }
   }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation]);
-  (0, import_react_shared.useInterval)(() => {
+  useInterval(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length) {
       queueLayerAnimation();
     }
   }, timeIncrement * animatedLayerCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   LayerAnimator
-});
+};
 //# sourceMappingURL=LayerAnimator.js.map

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

@@ -1 +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":[]}
+{"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.cjs

@@ -0,0 +1,81 @@
+"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);
+
+// src/Components/Legend.tsx
+var Legend_exports = {};
+__export(Legend_exports, {
+  AnimatedHeatMapLegend: () => AnimatedHeatMapLegend
+});
+module.exports = __toCommonJS(Legend_exports);
+var import_material2 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+
+// src/Components/Legends/ColorGradient.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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 })
+    ] })
+  ] });
+};
+
+// src/Components/Legend.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AnimatedHeatMapLegend = ({ ...legendProps }) => {
+  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
+  const theme = (0, import_material2.useTheme)();
+  const isSmall = (0, import_material2.useMediaQuery)(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexCol, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.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)
+      }
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedHeatMapLegend
+});
+//# sourceMappingURL=Legend.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/Legend.tsx","../../../src/Components/Legends/ColorGradient.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","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;AAAA,IAAAA,mBAAwC;AACxC,IAAAC,wBAAwB;;;ACDxB,sBAAqC;AACrC,2BAAiC;AAS3B;AALN,IAAM,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;;;ADjBM,IAAAC,sBAAA;AAPN,IAAM,wBAA4D,CAAC,EAAE,GAAG,YAAY,MAAM;AACxF,QAAM,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,UAAU,IAAI;AAC3E,QAAM,YAAQ,2BAAS;AACvB,QAAM,cAAU,gCAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE1D,SACE,6CAAC,iCAAQ,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":["import_material","import_react_flexbox","import_jsx_runtime"]}

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

@@ -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.cts.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

@@ -1,36 +1,38 @@
-"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;
+// src/Components/Legend.tsx
+import { useMediaQuery, useTheme as useTheme2 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+
+// src/Components/Legends/ColorGradient.tsx
+import { Typography, useTheme } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var 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 })
+    ] })
+  ] });
 };
-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 }) => {
+
+// src/Components/Legend.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var 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,
+  const theme = useTheme2();
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsx2(FlexCol2, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ jsx2(
+    ColorGradientLegend,
     {
       startColor,
       endColor,
@@ -48,8 +50,7 @@ const AnimatedHeatMapLegend = ({ ...legendProps }) => {
     }
   ) });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   AnimatedHeatMapLegend
-});
+};
 //# sourceMappingURL=Legend.js.map

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/Components/Legend.tsx","../../../src/Components/Legends/ColorGradient.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","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,SAAS,eAAe,YAAAA,iBAAgB;AACxC,SAAS,WAAAC,gBAAe;;;ACDxB,SAAS,YAAY,gBAAgB;AACrC,SAAS,SAAS,eAAe;AAS3B,cAUA,YAVA;AALN,IAAM,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;;;ADjBM,gBAAAC,YAAA;AAPN,IAAM,wBAA4D,CAAC,EAAE,GAAG,YAAY,MAAM;AACxF,QAAM,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,UAAU,IAAI;AAC3E,QAAM,QAAQC,UAAS;AACvB,QAAM,UAAU,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE1D,SACE,gBAAAD,KAACE,UAAA,EAAQ,UAAS,YAAW,QAAQ,GAAG,OAAO,GAC7C,0BAAAF;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":["useTheme","FlexCol","jsx","useTheme","FlexCol"]}

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

@@ -0,0 +1,51 @@
+"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);
+
+// src/Components/Legends/ColorGradient.tsx
+var ColorGradient_exports = {};
+__export(ColorGradient_exports, {
+  ColorGradientLegend: () => ColorGradientLegend
+});
+module.exports = __toCommonJS(ColorGradient_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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.cjs.map

package/dist/node/Components/Legends/ColorGradient.cjs.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;AAAA,sBAAqC;AACrC,2BAAiC;AAS3B;AALN,IAAM,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.d.cts

@@ -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.cts.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

@@ -1,49 +1,26 @@
-"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,
+// src/Components/Legends/ColorGradient.tsx
+import { Typography, useTheme } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var 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__ */ (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 })
+    /* @__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 })
     ] })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   ColorGradientLegend
-});
+};
 //# sourceMappingURL=ColorGradient.js.map

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

@@ -1 +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":[]}
+{"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,SAAS,YAAY,gBAAgB;AACrC,SAAS,SAAS,eAAe;AAS3B,cAUA,YAVA;AALN,IAAM,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.cjs

@@ -0,0 +1,53 @@
+"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);
+
+// src/Components/Legends/index.ts
+var Legends_exports = {};
+__export(Legends_exports, {
+  ColorGradientLegend: () => ColorGradientLegend
+});
+module.exports = __toCommonJS(Legends_exports);
+
+// src/Components/Legends/ColorGradient.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Components/Legends/index.ts","../../../../src/Components/Legends/ColorGradient.tsx"],"sourcesContent":["export * from './ColorGradient'\n","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;;;ACAA,sBAAqC;AACrC,2BAAiC;AAS3B;AALN,IAAM,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/index.d.cts

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

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

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