@xyo-network/react-map 3.0.0 → 3.0.2

package/package.json

@@ -7,24 +7,24 @@
   },
   "bugs": {
     "email": "support@xyo.network",
-    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/assert": "^4.0.0",
-    "@xylabs/delay": "^4.0.0",
-    "@xylabs/forget": "^4.0.0",
-    "@xylabs/hex": "^4.0.0",
-    "@xylabs/lodash": "^4.0.0",
-    "@xylabs/react-flexbox": "^4.0.0",
-    "@xylabs/react-shared": "^4.0.0",
-    "@xyo-network/payload-model": "^3.0.1",
-    "@xyo-network/react-app-settings": "^3.0.0",
-    "@xyo-network/react-archivist": "^3.0.0",
-    "@xyo-network/react-network": "^3.0.0",
-    "@xyo-network/react-shared": "^3.0.0",
-    "@xyo-network/sdk-geo": "^2.11.5",
+    "@xylabs/assert": "^4.0.2",
+    "@xylabs/delay": "^4.0.2",
+    "@xylabs/exists": "^4.0.2",
+    "@xylabs/forget": "^4.0.2",
+    "@xylabs/hex": "^4.0.2",
+    "@xylabs/react-flexbox": "^4.0.3",
+    "@xylabs/react-shared": "^4.0.3",
+    "@xyo-network/payload-model": "^3.0.3",
+    "@xyo-network/react-app-settings": "^3.0.2",
+    "@xyo-network/react-archivist": "^3.0.2",
+    "@xyo-network/react-network": "^3.0.2",
+    "@xyo-network/react-shared": "^3.0.2",
+    "@xyo-network/sdk-geo": "^3.0.1",
     "geojson": "^0.5.0",
-    "mapbox-gl": "^3.5.2"
+    "mapbox-gl": "^3.6.0"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "@storybook/react": "^8.2.9",
     "@types/geojson": "7946.0.14",
-    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.15",
-    "@xylabs/tsconfig-react": "^4.0.0-rc.15",
+    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
+    "@xylabs/tsconfig-react": "^4.0.0-rc.20",
     "typescript": "^5.5.4"
   },
   "docs": "dist/docs.json",
@@ -67,7 +67,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
   },
   "scripts": {
     "lint-pkg": "npmPkgJsonLint .",
@@ -75,6 +75,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module"
 }

package/src/Components/AnimatedHeatMap.tsx

@@ -1,13 +1,14 @@
 import { darken, useTheme } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
-import { WithChildren } from '@xylabs/react-shared'
-import { Feature, Polygon } from 'geojson'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Feature, Polygon } from 'geojson'
 import React, { useState } from 'react'
 
-import { AnimatedHeatMapColorProps } from '../Colors/index.ts'
+import type { AnimatedHeatMapColorProps } from '../Colors/index.ts'
 import { HeatMapInitializerProvider, MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts/index.ts'
-import { LocationHeatMapLayerBuilderAnimated, MapHeatConstants, MapLayer } from '../Layers/index.ts'
-import { MapSetting } from '../Settings/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
+import { LocationHeatMapLayerBuilderAnimated, MapHeatConstants } from '../Layers/index.ts'
+import type { MapSetting } from '../Settings/index.ts'
 import { MapboxHeatFlexBox } from './MapBoxHeat.tsx'
 
 export interface AnimatedHeatMapProps {

package/src/Components/AnimatedHeatMapLoaded.tsx

@@ -1,12 +1,13 @@
 import { Alert, AlertTitle } from '@mui/material'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
 import { useWeakArchivistFromNode, useWeakArchivistGet } from '@xyo-network/react-archivist'
-import { Feature, Polygon } from 'geojson'
+import type { Feature, Polygon } from 'geojson'
 import React from 'react'
 
 import { AnimatedHeatMapSettings } from '../AnimatedHeatMapSettings.ts'
 import { useFindHashes, useHeatMapColors, useQuadKeyPayloadsToFeatures } from '../hooks/index.ts'
-import { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
+import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 import { AnimatedHeatMap } from './AnimatedHeatMap.tsx'
 import { AnimatedHeatMapLegend } from './Legend.tsx'
 

package/src/Components/FeaturesToLayersMap.ts

@@ -1,6 +1,6 @@
-import { Feature, Polygon } from 'geojson'
+import type { Feature, Polygon } from 'geojson'
 
-import { MapLayer } from '../Layers/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
 
 export interface FeaturesToLayersMap {
   features: Feature<Polygon>[]

package/src/Components/LayerAnimator.tsx

@@ -1,9 +1,10 @@
-import { useInterval, WithChildren } from '@xylabs/react-shared'
-import { Map } from 'mapbox-gl'
+import type { WithChildren } from '@xylabs/react-shared'
+import { useInterval } from '@xylabs/react-shared'
+import type { Map } from 'mapbox-gl'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-import { MapLayer } from '../Layers/index.ts'
-import { MapboxFlexBoxProps } from '../lib/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
+import type { MapboxFlexBoxProps } from '../lib/index.ts'
 
 export interface LayerAnimatorProps {
   animateLayers?: boolean

package/src/Components/Legend.tsx

@@ -2,7 +2,7 @@ import { useMediaQuery, useTheme } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
-import { ColorGradientLegendProps } from '../Colors/index.ts'
+import type { ColorGradientLegendProps } from '../Colors/index.ts'
 import { ColorGradientLegend } from './Legends/index.ts'
 
 const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {

package/src/Components/Legends/ColorGradient.tsx

@@ -2,7 +2,7 @@ import { Typography, useTheme } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
-import { ColorGradientLegendProps } from '../../Colors/index.ts'
+import type { ColorGradientLegendProps } from '../../Colors/index.ts'
 
 const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
   const theme = useTheme()

package/src/Components/MapBox.stories.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@mui/material'
-import { Decorator, Meta, StoryFn } from '@storybook/react'
+import type { Decorator, Meta, StoryFn } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 import React, { useRef } from 'react'
 

package/src/Components/MapBox.tsx

@@ -1,7 +1,8 @@
 // eslint-disable-next-line import-x/no-internal-modules
 import 'mapbox-gl/dist/mapbox-gl.css'
 
-import { Map, MapOptions } from 'mapbox-gl'
+import type { MapOptions } from 'mapbox-gl'
+import { Map } from 'mapbox-gl'
 import React, { useEffect, useRef, useState } from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'

package/src/Components/MapBoxHeat.tsx

@@ -1,7 +1,7 @@
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
-import { MapboxFlexBoxProps } from '../lib/index.ts'
+import type { MapboxFlexBoxProps } from '../lib/index.ts'
 import { MapBox } from './MapBox.tsx'
 import { MapSettingsBox } from './MapSettingsComponents/index.ts'
 

package/src/Components/MapBoxPoints.tsx

@@ -1,11 +1,11 @@
 import { Alert } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
-import { Feature, Point } from 'geojson'
-import { MapOptions } from 'mapbox-gl'
+import type { Feature, Point } from 'geojson'
+import type { MapOptions } from 'mapbox-gl'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
-import { MapboxFlexBoxProps } from '../lib/index.ts'
+import type { MapboxFlexBoxProps } from '../lib/index.ts'
 import { MapPoints } from '../MapBoxClasses/index.ts'
 import { MapBox } from './MapBox.tsx'
 import { MapSettingsBox } from './MapSettingsComponents/index.ts'

package/src/Components/MapSettingsComponents/Setting.tsx

@@ -1,4 +1,5 @@
-import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
+import type { SwitchProps } from '@mui/material'
+import { FormControlLabel, Switch } from '@mui/material'
 import React from 'react'
 
 import { useMapSettings } from '../../Contexts/index.ts'

package/src/Components/MapSettingsComponents/SettingsBox.tsx

@@ -1,5 +1,6 @@
 import { Paper, Stack } from '@mui/material'
-import { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
 import { useAppSettings } from '@xyo-network/react-app-settings'
 import React from 'react'
 

package/src/Contexts/HeatMapInitializer/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { HeatMapInitializerState } from './State.ts'
+import type { HeatMapInitializerState } from './State.ts'
 
 const HeatMapInitializerContext = createContext<HeatMapInitializerState>({})
 

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -1,16 +1,16 @@
 import { forget } from '@xylabs/forget'
-import { WithChildren } from '@xylabs/react-shared'
-import { Feature, Polygon } from 'geojson'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Feature, Polygon } from 'geojson'
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
+import type { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
 import { useDynamicPositioning } from '../../hooks/index.ts'
-import { MapLayer } from '../../Layers/index.ts'
+import type { MapLayer } from '../../Layers/index.ts'
 import { MapHeat } from '../../MapBoxClasses/index.ts'
 import { useMapBoxInstance } from '../MapBoxInstance/index.ts'
 import { useMapSettings } from '../MapSettings/index.ts'
 import { HeatMapInitializerContext } from './Context.ts'
-import { HeatMapInitializerState } from './State.ts'
+import type { HeatMapInitializerState } from './State.ts'
 
 export interface MapInitializerProviderProps {
   featureSets?: Feature<Polygon>[][]

package/src/Contexts/HeatMapInitializer/State.ts

@@ -1,5 +1,5 @@
-import { HeatMapColorProps } from '../../Colors/index.ts'
-import { MapHeat } from '../../MapBoxClasses/index.ts'
+import type { HeatMapColorProps } from '../../Colors/index.ts'
+import type { MapHeat } from '../../MapBoxClasses/index.ts'
 
 export interface HeatMapInitializerState {
   MapHeat?: MapHeat

package/src/Contexts/MapBoxInstance/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { MapBoxInstanceState } from './State.ts'
+import type { MapBoxInstanceState } from './State.ts'
 
 const MapBoxInstanceContext = createContext<MapBoxInstanceState>({})
 

package/src/Contexts/MapBoxInstance/Provider.tsx

@@ -1,5 +1,5 @@
-import { WithChildren } from '@xylabs/react-shared'
-import { Map } from 'mapbox-gl'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Map } from 'mapbox-gl'
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { MapBoxInstanceContext } from './Context.ts'

package/src/Contexts/MapBoxInstance/State.ts

@@ -1,5 +1,5 @@
-import { Map } from 'mapbox-gl'
-import { Dispatch, SetStateAction } from 'react'
+import type { Map } from 'mapbox-gl'
+import type { Dispatch, SetStateAction } from 'react'
 
 export interface MapBoxInstanceState {
   map?: Map

package/src/Contexts/MapSettings/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { MapSettingsState } from './State.ts'
+import type { MapSettingsState } from './State.ts'
 
 const MapSettingsContext = createContext<MapSettingsState>({})
 

package/src/Contexts/MapSettings/Provider.tsx

@@ -1,11 +1,11 @@
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { MapSettings } from '../../MapBoxClasses/index.ts'
-import { MapSetting } from '../../Settings/index.ts'
+import type { MapSetting } from '../../Settings/index.ts'
 import { useMapBoxInstance } from '../MapBoxInstance/index.ts'
 import { MapSettingsContext } from './Context.ts'
-import { MapSettingsState } from './State.ts'
+import type { MapSettingsState } from './State.ts'
 
 export interface MapSettingsProviderProps {
   debugLayerName?: string

package/src/Contexts/MapSettings/State.ts

@@ -1,6 +1,6 @@
-import { Dispatch } from 'react'
+import type { Dispatch } from 'react'
 
-import { MapSetting } from '../../Settings/index.ts'
+import type { MapSetting } from '../../Settings/index.ts'
 
 export interface MapSettingsState {
   mapSettings?: MapSetting

package/src/Contexts/MapboxAccessToken/Context.ts

@@ -1,5 +1,5 @@
 import { createContextEx } from '@xyo-network/react-shared'
 
-import { MapboxAccessTokenContextState } from './State.ts'
+import type { MapboxAccessTokenContextState } from './State.ts'
 
 export const MapboxAccessTokenContext = createContextEx<MapboxAccessTokenContextState>()

package/src/Contexts/MapboxAccessToken/Provider.tsx

@@ -1,4 +1,4 @@
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 import React, { useState } from 'react'
 
 import { MapboxAccessTokenContext } from './Context.ts'

package/src/Contexts/MapboxAccessToken/State.ts

@@ -1,5 +1,5 @@
-import { ContextExState } from '@xyo-network/react-shared'
-import { Dispatch } from 'react'
+import type { ContextExState } from '@xyo-network/react-shared'
+import type { Dispatch } from 'react'
 
 export interface MapboxAccessTokenContextState extends ContextExState {
   accessToken?: string

package/src/Layers/CircleLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { CircleLayerSpecification } from 'mapbox-gl'
+import type { CircleLayerSpecification } from 'mapbox-gl'
 
 export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
   CircleLayerOptions: Partial<CircleLayerSpecification>

package/src/Layers/Configs/HeatMapFillLayerConfig.ts

@@ -1,4 +1,4 @@
-import { FillLayerSpecification } from 'mapbox-gl'
+import type { FillLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = color => ({
   paint: {

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -1,4 +1,4 @@
-import { LineLayerSpecification } from 'mapbox-gl'
+import type { LineLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = color => ({
   layout: {

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -1,4 +1,4 @@
-import { SymbolLayerSpecification } from 'mapbox-gl'
+import type { SymbolLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = color => ({
   layout: {

package/src/Layers/Configs/LocationPointLayerConfig.ts

@@ -1,4 +1,4 @@
-import { CircleLayerSpecification } from 'mapbox-gl'
+import type { CircleLayerSpecification } from 'mapbox-gl'
 
 export const LocationPointLayerConfig: (color: string, circleRadius: number, circleOpacity: number) => Partial<CircleLayerSpecification> = (
   color,

package/src/Layers/FillLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { FillLayerSpecification } from 'mapbox-gl'
+import type { FillLayerSpecification } from 'mapbox-gl'
 
 export class FillLayerBuilder extends LayerBase<FillLayerSpecification> {
   FillLayerOptions: Partial<FillLayerSpecification>

package/src/Layers/LineLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { LineLayerSpecification } from 'mapbox-gl'
+import type { LineLayerSpecification } from 'mapbox-gl'
 
 export class LineLayerBuilder extends LayerBase<LineLayerSpecification> {
   LineLayerOptions: Partial<LineLayerSpecification>

package/src/Layers/MapLayer.ts

@@ -1,5 +1,5 @@
-import { LayerBase } from '@xyo-network/sdk-geo'
-import { Layer, LayerSpecification } from 'mapbox-gl'
+import type { LayerBase } from '@xyo-network/sdk-geo'
+import type { Layer, LayerSpecification } from 'mapbox-gl'
 
 export interface MapLayer extends Layer {
   update: LayerBase<LayerSpecification>['update']

package/src/Layers/SymbolLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { SymbolLayerSpecification } from 'mapbox-gl'
+import type { SymbolLayerSpecification } from 'mapbox-gl'
 
 export class SymbolLayerBuilder extends LayerBase<SymbolLayerSpecification> {
   SymbolLayerOptions: Partial<SymbolLayerSpecification>

package/src/MapBoxClasses/MapBase.ts

@@ -1,9 +1,9 @@
 import { assertEx } from '@xylabs/assert'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Geometry } from 'geojson'
-import { GeoJSONSource, Map } from 'mapbox-gl'
+import type { Feature, Geometry } from 'geojson'
+import type { GeoJSONSource, Map } from 'mapbox-gl'
 
-import { MapLayer } from '../Layers/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
 
 export interface MapBaseConfig<T extends Geometry> {
   features: Feature<T>[]

package/src/MapBoxClasses/MapHeat.ts

@@ -2,11 +2,13 @@ import { assertEx } from '@xylabs/assert'
 import { delay } from '@xylabs/delay'
 import { forget } from '@xylabs/forget'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Polygon } from 'geojson'
-import { GeoJSONSource, GeoJSONSourceSpecification, LngLatBounds, Map, MapOptions } from 'mapbox-gl'
+import type { Feature, Polygon } from 'geojson'
+import type { GeoJSONSource, GeoJSONSourceSpecification, Map, MapOptions } from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
 
-import { MapLayer } from '../Layers/index.ts'
-import { MapBase, MapBaseConfig } from './MapBase.ts'
+import type { MapLayer } from '../Layers/index.ts'
+import type { MapBaseConfig } from './MapBase.ts'
+import { MapBase } from './MapBase.ts'
 
 export class MapHeat extends MapBase<Polygon> {
   static animationStarted = false

package/src/MapBoxClasses/MapPoints.ts

@@ -1,7 +1,9 @@
-import { Feature, Point } from 'geojson'
-import { LngLatBounds, MapOptions } from 'mapbox-gl'
+import type { Feature, Point } from 'geojson'
+import type { MapOptions } from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
 
-import { MapBase, MapBaseConfig } from './MapBase.ts'
+import type { MapBaseConfig } from './MapBase.ts'
+import { MapBase } from './MapBase.ts'
 
 export interface MapPointsConfig extends MapBaseConfig<Point> {
   features: Feature<Point>[]

package/src/MapBoxClasses/MapSettings.ts

@@ -1,6 +1,7 @@
-import { GeolocateControl, Map, MapEventOf, MapEventType, NavigationControl } from 'mapbox-gl'
+import type { Map, MapEventOf, MapEventType } from 'mapbox-gl'
+import { GeolocateControl, NavigationControl } from 'mapbox-gl'
 
-import { MapSetting } from '../Settings/index.ts'
+import type { MapSetting } from '../Settings/index.ts'
 
 export interface MapSettingsConfig {
   debugLayerName?: string

package/src/Settings/DefaultMapSettings.ts

@@ -1,4 +1,4 @@
-import { MapSetting } from './MapSetting.ts'
+import type { MapSetting } from './MapSetting.ts'
 
 export const DefaultMapSettings: () => MapSetting = () => ({
   debugLayer: {

package/src/hooks/useDynamicMapResize.tsx

@@ -1,5 +1,6 @@
-import { Map } from 'mapbox-gl'
-import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import type { Map } from 'mapbox-gl'
+import type { MutableRefObject } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 /**
  * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2

package/src/hooks/useDynamicPositioning.tsx

@@ -1,5 +1,5 @@
 import { useWindowSize } from '@xylabs/react-shared'
-import { MapOptions } from 'mapbox-gl'
+import type { MapOptions } from 'mapbox-gl'
 import { useEffect, useState } from 'react'
 
 /**

package/src/hooks/useFindHashes.tsx

@@ -1,5 +1,6 @@
-import { Hash } from '@xylabs/hex'
-import { ArchivistPreset, useNetwork } from '@xyo-network/react-network'
+import type { Hash } from '@xylabs/hex'
+import type { ArchivistPreset } from '@xyo-network/react-network'
+import { useNetwork } from '@xyo-network/react-network'
 import { useMemo } from 'react'
 
 const animatedAnswerHashesConst: Hash[] = [

package/src/hooks/useHeatMapColors.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material'
 
-import { AnimatedHeatMapColorProps, ColorGradientLegendProps } from '../Colors/index.ts'
+import type { AnimatedHeatMapColorProps, ColorGradientLegendProps } from '../Colors/index.ts'
 
 const useHeatMapColors = () => {
   const theme = useTheme()

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -1,9 +1,9 @@
-import { compact } from '@xylabs/lodash'
+import { exists } from '@xylabs/exists'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Geometry } from 'geojson'
+import type { Feature, Geometry } from 'geojson'
 import { useEffect, useState } from 'react'
 
-import { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
+import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 
 const quadKeyToFeature = ({ density, quadkey }: { density: number; quadkey: string }) => {
   const polygonFeature = new GeoJson(quadkey).polygonFeature()
@@ -29,7 +29,7 @@ const useQuadKeyPayloadsToFeatures = (payloads?: NetworkLocationHeatmapQuadkeyAn
   useEffect(() => {
     // Convert Multiple Payloads from Quadkey to GeoJson
     if (Array.isArray(payloads)) {
-      if (compact(payloads).length > 0) {
+      if ((payloads)?.filter(exists).length > 0) {
         const mappedFeatures = payloads?.map(payload => payload?.result.map(quadKeyToFeature))
 
         setMultipleFeatureSets(mappedFeatures.map(features => features?.map(setDensity) ?? []))

package/src/lib/MapBoxBaseProps.ts

@@ -1,9 +1,9 @@
-import { FlexBoxProps } from '@xylabs/react-flexbox'
-import { Feature } from 'geojson'
-import { MapOptions } from 'mapbox-gl'
-import { ReactNode } from 'react'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import type { Feature } from 'geojson'
+import type { MapOptions } from 'mapbox-gl'
+import type { ReactNode } from 'react'
 
-import { MapLayer } from '../Layers/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
 
 export interface MapboxFlexBoxProps extends FlexBoxProps {
   accessToken: string

package/src/types/NetworkLocationAnswerBase.ts

@@ -1,5 +1,6 @@
-import { isPayloadOfSchemaType, Payload } from '@xyo-network/payload-model'
-import { Feature, Point, Polygon } from 'geojson'
+import type { Payload } from '@xyo-network/payload-model'
+import { isPayloadOfSchemaType } from '@xyo-network/payload-model'
+import type { Feature, Point, Polygon } from 'geojson'
 
 export interface NetworkLocationAnswerBase<T> {
   result: T

package/xy.config.ts

@@ -1,4 +1,4 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
     browser: {