@xyo-network/react-map 3.0.2 → 3.0.3

package/dist/browser/lib/MapStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapStyle.d.ts","sourceRoot":"","sources":["../../../src/lib/MapStyle.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,IAAI,oBAAoB;IACxB,KAAK,qBAAqB;IAC1B,QAAQ,wBAAwB;IAChC,SAAS,wBAAwB;IACjC,gBAAgB,iCAAiC;IACjD,OAAO,uBAAuB;CAC/B"}

package/dist/browser/lib/index.d.ts

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

package/dist/browser/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA"}

package/dist/browser/types/NetworkLocationAnswerBase.d.ts

@@ -0,0 +1,37 @@
+import type { Payload } from '@xyo-network/payload-model';
+import type { Feature, Point, Polygon } from 'geojson';
+export interface NetworkLocationAnswerBase<T> {
+    result: T;
+}
+export declare const NetworkLocationAnswerSchema = "network.xyo.location.range.answer";
+export type NetworkLocationAnswerSchema = 'network.xyo.location.range.answer';
+export type NetworkLocationAnswerPayload = Payload<NetworkLocationAnswerBase<{
+    features: Feature<Point>[];
+}>, NetworkLocationAnswerSchema>;
+export declare const isNetworkLocationAnswer: (x?: unknown | null) => x is import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & NetworkLocationAnswerBase<{
+    features: Feature<Point>[];
+}> & {
+    schema: "network.xyo.location.range.answer";
+};
+export declare const NetworkLocationHeatmapAnswerSchema = "network.xyo.location.heatmap.answer";
+export type NetworkLocationHeatmapAnswerSchema = 'network.xyo.location.heatmap.answer';
+export type NetworkLocationHeatmapAnswerPayload = Payload<NetworkLocationAnswerBase<{
+    features: Feature<Polygon>[];
+}>, NetworkLocationHeatmapAnswerSchema>;
+export declare const isNetworkLocationHeatmapAnswer: (x?: unknown | null) => x is import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & NetworkLocationAnswerBase<{
+    features: Feature<Polygon>[];
+}> & {
+    schema: "network.xyo.location.heatmap.answer";
+};
+export declare const NetworkLocationHeatmapQuadkeyAnswerSchema = "network.xyo.location.heatmap.quadkey.answer";
+export type NetworkLocationHeatmapQuadkeyAnswerSchema = 'network.xyo.location.heatmap.quadkey.answer';
+export type NetworkLocationHeatmapQuadkeyAnswerPayload = Payload<NetworkLocationAnswerBase<{
+    density: number;
+    quadkey: string;
+}[]>, NetworkLocationHeatmapQuadkeyAnswerSchema>;
+export declare const isNetworkLocationHeatmapQuadkeyAnswer: (x?: unknown | null) => x is import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & NetworkLocationAnswerBase<{
+    features: Feature<Polygon>[];
+}> & {
+    schema: "network.xyo.location.heatmap.answer";
+};
+//# sourceMappingURL=NetworkLocationAnswerBase.d.ts.map

package/dist/browser/types/NetworkLocationAnswerBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkLocationAnswerBase.d.ts","sourceRoot":"","sources":["../../../src/types/NetworkLocationAnswerBase.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEzD,OAAO,KAAK,EACV,OAAO,EAAE,KAAK,EAAE,OAAO,EACxB,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,CAAA;CACV;AAED,eAAO,MAAM,2BAA2B,sCAAsC,CAAA;AAC9E,MAAM,MAAM,2BAA2B,GAAG,mCAAmC,CAAA;AAC7E,MAAM,MAAM,4BAA4B,GAAG,OAAO,CAAC,yBAAyB,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAA;CAAE,CAAC,EAAE,2BAA2B,CAAC,CAAA;AAC1I,eAAO,MAAM,uBAAuB;cADqD,OAAO,CAAC,KAAK,CAAC,EAAE;;;CACc,CAAA;AAEvH,eAAO,MAAM,kCAAkC,wCAAwC,CAAA;AACvF,MAAM,MAAM,kCAAkC,GAAG,qCAAqC,CAAA;AACtF,MAAM,MAAM,mCAAmC,GAAG,OAAO,CACvD,yBAAyB,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAA;CAAE,CAAC,EAC3D,kCAAkC,CACnC,CAAA;AACD,eAAO,MAAM,8BAA8B;cAHH,OAAO,CAAC,OAAO,CAAC,EAAE;;;CAGkF,CAAA;AAE5I,eAAO,MAAM,yCAAyC,gDAAgD,CAAA;AACtG,MAAM,MAAM,yCAAyC,GAAG,6CAA6C,CAAA;AACrG,MAAM,MAAM,0CAA0C,GAAG,OAAO,CAC9D,yBAAyB,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC,EACjE,yCAAyC,CAC1C,CAAA;AACD,eAAO,MAAM,qCAAqC;cAXV,OAAO,CAAC,OAAO,CAAC,EAAE;;;CAazD,CAAA"}

package/dist/browser/types/index.d.ts

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

package/dist/browser/types/index.d.ts.map

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

package/package.json

@@ -1,80 +1,85 @@
 {
   "name": "@xyo-network/react-map",
+  "version": "3.0.3",
+  "description": "Common React library for all XYO projects that use React",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xyo.network",
+  "bugs": {
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
+    "email": "support@xyo.network"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "license": "LGPL-3.0-only",
   "author": {
-    "email": "support@xyo.network",
     "name": "XYO Development Team",
+    "email": "support@xyo.network",
     "url": "https://xyo.network"
   },
-  "bugs": {
-    "email": "support@xyo.network",
-    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "dist/browser/index.mjs",
+  "types": "dist/browser/index.d.ts",
+  "scripts": {
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+    "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
-    "@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/assert": "^4.0.5",
+    "@xylabs/delay": "^4.0.5",
+    "@xylabs/exists": "^4.0.5",
+    "@xylabs/forget": "^4.0.5",
+    "@xylabs/hex": "^4.0.5",
     "@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/payload-model": "^3.0.15",
+    "@xyo-network/react-app-settings": "^3.0.3",
+    "@xyo-network/react-archivist": "^3.0.3",
+    "@xyo-network/react-network": "^3.0.3",
+    "@xyo-network/react-shared": "^3.0.3",
     "@xyo-network/sdk-geo": "^3.0.1",
-    "geojson": "^0.5.0",
     "mapbox-gl": "^3.6.0"
   },
-  "peerDependencies": {
+  "devDependencies": {
     "@mui/icons-material": "^5",
     "@mui/material": "^5",
     "@mui/styles": "^5",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "description": "Common React library for all XYO projects that use React",
-  "devDependencies": {
     "@storybook/react": "^8.2.9",
     "@types/geojson": "7946.0.14",
-    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
-    "@xylabs/tsconfig-react": "^4.0.0-rc.20",
+    "@xylabs/ts-scripts-yarn3": "^4.0.7",
+    "@xylabs/tsconfig-react": "^4.0.7",
+    "react": "^18",
+    "react-dom": "^18",
+    "storybook": "^8.2.9",
     "typescript": "^5.5.4"
   },
-  "docs": "dist/docs.json",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/browser/index.d.ts",
-        "default": "./dist/browser/index.mjs"
-      },
-      "types": "./dist/browser/index.d.ts",
-      "default": "./dist/browser/index.mjs"
-    },
-    "./package.json": "./package.json"
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "react": "^18",
+    "react-dom": "^18"
   },
-  "module": "dist/browser/index.mjs",
-  "homepage": "https://xyo.network",
-  "keywords": [
-    "xyo",
-    "utility",
-    "typescript",
-    "react"
-  ],
-  "license": "LGPL-3.0-only",
   "publishConfig": {
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
-  },
-  "scripts": {
-    "lint-pkg": "npmPkgJsonLint .",
-    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
-  },
-  "sideEffects": false,
-  "types": "dist/browser/index.d.ts",
-  "version": "3.0.2",
-  "type": "module"
+  "docs": "dist/docs.json"
 }

package/src/AnimatedHeatMapSettings.ts

@@ -1,7 +1,9 @@
 import { DefaultMapSettings } from './Settings/index.ts'
 
 export const AnimatedHeatMapSettings = DefaultMapSettings()
-const { debugLayer, scrollToZoom, fitToPoints, preferDark } = AnimatedHeatMapSettings
+const {
+  debugLayer, scrollToZoom, fitToPoints, preferDark,
+} = AnimatedHeatMapSettings
 debugLayer.hidden = false
 scrollToZoom.value = true
 fitToPoints.value = false

package/src/Components/AnimatedHeatMap.tsx

@@ -5,7 +5,9 @@ import type { Feature, Polygon } from 'geojson'
 import React, { useState } from 'react'
 
 import type { AnimatedHeatMapColorProps } from '../Colors/index.ts'
-import { HeatMapInitializerProvider, MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts/index.ts'
+import {
+  HeatMapInitializerProvider, MapBoxInstanceProvider, MapSettingsProvider,
+} from '../Contexts/index.ts'
 import type { MapLayer } from '../Layers/index.ts'
 import { LocationHeatMapLayerBuilderAnimated, MapHeatConstants } from '../Layers/index.ts'
 import type { MapSetting } from '../Settings/index.ts'
@@ -28,10 +30,12 @@ export const AnimatedHeatMap: React.FC<WithChildren<AnimatedHeatMapProps>> = ({
   ...props
 }) => {
   const theme = useTheme()
-  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {}
+  const {
+    staticMapColor, lowUsageColor, highUsageColor,
+  } = heatMapColorProps || {}
   const localStaticMapColor = staticMapColor ?? theme.palette.primary.light
 
-  const [layers] = useState<MapLayer[]>([
+  const [layers] = useState<MapLayer[]>(() => [
     LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, 'static'),
     LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, 'animated'),
     LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, 'animated'),

package/src/Components/AnimatedHeatMapLoaded.tsx

@@ -6,7 +6,9 @@ import type { Feature, Polygon } from 'geojson'
 import React from 'react'
 
 import { AnimatedHeatMapSettings } from '../AnimatedHeatMapSettings.ts'
-import { useFindHashes, useHeatMapColors, useQuadKeyPayloadsToFeatures } from '../hooks/index.ts'
+import {
+  useFindHashes, useHeatMapColors, useQuadKeyPayloadsToFeatures,
+} from '../hooks/index.ts'
 import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 import { AnimatedHeatMap } from './AnimatedHeatMap.tsx'
 import { AnimatedHeatMapLegend } from './Legend.tsx'
@@ -16,7 +18,9 @@ export interface AnimatedHeatMapLoadedProps extends FlexBoxProps {
   archivistNameOrAddress: string
 }
 
-export const AnimatedHeatMapLoaded: React.FC<AnimatedHeatMapLoadedProps> = ({ accessToken, archivistNameOrAddress, ...props }) => {
+export const AnimatedHeatMapLoaded: React.FC<AnimatedHeatMapLoadedProps> = ({
+  accessToken, archivistNameOrAddress, ...props
+}) => {
   const hashes = useFindHashes()
   const [archivist] = useWeakArchivistFromNode(archivistNameOrAddress)
   const [payloads, xyoError] = useWeakArchivistGet<NetworkLocationHeatmapQuadkeyAnswerPayload>(archivist, hashes)

package/src/Components/HeatMapSettings.ts

@@ -1,7 +1,9 @@
 import { DefaultMapSettings } from '../Settings/index.ts'
 
 const HeatMapSettings = DefaultMapSettings()
-const { debugLayer, scrollToZoom, fitToPoints } = HeatMapSettings
+const {
+  debugLayer, scrollToZoom, fitToPoints,
+} = HeatMapSettings
 debugLayer.hidden = false
 scrollToZoom.value = true
 fitToPoints.value = true

package/src/Components/LayerAnimator.tsx

@@ -1,7 +1,9 @@
 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 React, {
+  useCallback, useEffect, useRef, useState,
+} from 'react'
 
 import type { MapLayer } from '../Layers/index.ts'
 import type { MapboxFlexBoxProps } from '../lib/index.ts'
@@ -16,7 +18,9 @@ export interface LayerAnimatorProps {
 const timeIncrement = 2000
 const animatedLayerCount = 3
 
-export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({ animateLayers, children, layers, layersInitialized, map }) => {
+export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({
+  animateLayers, children, layers, layersInitialized, map,
+}) => {
   const [fillLayers, setFillLayers] = useState<MapLayer[]>([])
   const layerIndexQueue = useRef<number[]>([])
 

package/src/Components/Legend.tsx

@@ -6,7 +6,9 @@ import type { ColorGradientLegendProps } from '../Colors/index.ts'
 import { ColorGradientLegend } from './Legends/index.ts'
 
 const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {
-  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps
+  const {
+    startColor, endColor, startLabel, endLabel, heading, textColor,
+  } = legendProps
   const theme = useTheme()
   const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
 

package/src/Components/Legends/ColorGradient.tsx

@@ -4,7 +4,9 @@ import React from 'react'
 
 import type { ColorGradientLegendProps } from '../../Colors/index.ts'
 
-const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({
+  startColor, endColor, startLabel, endLabel, heading, textColor, ...props
+}) => {
   const theme = useTheme()
 
   return (

package/src/Components/MapBox.stories.tsx

@@ -1,5 +1,7 @@
 import { Button } from '@mui/material'
-import type { 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'
 
@@ -32,22 +34,19 @@ const WithMapSettingsDecorator: Decorator = (Story, args) => {
 }
 
 export default {
-  args: {
-    accessToken: process.env.STORYBOOK_MAPBOX_TOKEN,
-  },
+  args: { accessToken: process.env.STORYBOOK_MAPBOX_TOKEN },
   component: MapBox,
   decorators: [WithMapboxProviders],
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'map/Mapbox',
 } as Meta
 
 const Template: StoryFn<typeof MapBox> = (args) => {
   return (
-    <div style={{ minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease' }}>
+    <div style={{
+      minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease',
+    }}
+    >
       <MapBox {...args} />
     </div>
   )
@@ -69,7 +68,9 @@ const ContainerResizeTemplate: StoryFn<typeof MapBox> = (args) => {
       </Button>
       <div
         ref={ref => (containerRef.current = ref)}
-        style={{ minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease' }}
+        style={{
+          minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease',
+        }}
       >
         <MapBox {...args} />
       </div>
@@ -85,4 +86,6 @@ const WithContainerResize = ContainerResizeTemplate.bind({})
 const WithMapSettings = Template.bind({})
 WithMapSettings.decorators = [WithMapSettingsDecorator]
 
-export { Default, WithContainerResize, WithMapSettings }
+export {
+  Default, WithContainerResize, WithMapSettings,
+}

package/src/Components/MapBox.tsx

@@ -3,7 +3,9 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 
 import type { MapOptions } from 'mapbox-gl'
 import { Map } from 'mapbox-gl'
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect, useRef, useState,
+} from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
 import { useDynamicMapResize } from '../hooks/index.ts'
@@ -16,7 +18,9 @@ export interface MapBoxProps {
   zoom?: number
 }
 
-export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+export const MapBox: React.FC<MapBoxProps> = ({
+  accessToken, darkMode = false, options, zoom = 2, ...props
+}) => {
   const [map, setMap] = useState<Map>()
   const mapContainerRef = useRef<HTMLDivElement | null>(null)
   const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)

package/src/Components/MapBoxHeat.tsx

@@ -5,7 +5,9 @@ import type { MapboxFlexBoxProps } from '../lib/index.ts'
 import { MapBox } from './MapBox.tsx'
 import { MapSettingsBox } from './MapSettingsComponents/index.ts'
 
-export const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
+export const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({
+  accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props
+}) => {
   return (
     <FlexCol {...props}>
       <MapBox accessToken={accessToken} options={mapBoxOptions} zoom={zoom} />

package/src/Components/MapBoxPoints.tsx

@@ -2,7 +2,9 @@ import { Alert } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import type { Feature, Point } from 'geojson'
 import type { MapOptions } from 'mapbox-gl'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, {
+  useCallback, useEffect, useState,
+} from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
 import type { MapboxFlexBoxProps } from '../lib/index.ts'
@@ -33,9 +35,7 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
    */
   const customFitToBoundsOptions = (zoom?: number): MapOptions['fitBoundsOptions'] => {
     if (zoom !== undefined) {
-      return {
-        maxZoom: zoom,
-      }
+      return { maxZoom: zoom }
     }
     return {}
   }
@@ -52,7 +52,9 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
 
     if (mapPoints && map && fitToPoints?.value === true) {
       mapPoints.initialMapPositioning({
-        padding: { bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding },
+        padding: {
+          bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding,
+        },
         ...customFitToBoundsOptions(zoom),
       })
     }
@@ -60,7 +62,9 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
 
   const reInitializeMap = useCallback(() => {
     mapPoints?.initialMapPositioning({
-      padding: { bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding },
+      padding: {
+        bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding,
+      },
       ...customFitToBoundsOptions(zoom),
     })
     updateFeatures()
@@ -68,7 +72,9 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
 
   useEffect(() => {
     if (map && features?.length) {
-      setMapPoints(new MapPoints({ features, map, zoom }))
+      setMapPoints(new MapPoints({
+        features, map, zoom,
+      }))
     }
   }, [map, features, zoom])
 

package/src/Components/MapSettingsComponents/Setting.tsx

@@ -9,7 +9,9 @@ export interface MapSettingSwitchProps extends SwitchProps {
   field: string
 }
 
-export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {
+export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({
+  developerMode, field, ...props
+}) => {
   const { mapSettings, setMapSettings } = useMapSettings()
   const setting = mapSettings?.[field]
 

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -1,7 +1,9 @@
 import { forget } from '@xylabs/forget'
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Feature, Polygon } from 'geojson'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import type { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
 import { useDynamicPositioning } from '../../hooks/index.ts'
@@ -66,7 +68,11 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
       if (map) {
         if (fitToPoints?.value === true) {
           MapHeat.initialMapPositioning(
-            { padding: { bottom: fitToPadding, left: fitToPadding, right: fitToPadding, top: fitToPadding } },
+            {
+              padding: {
+                bottom: fitToPadding, left: fitToPadding, right: fitToPadding, top: fitToPadding,
+              },
+            },
             map,
             features,
           )
@@ -81,7 +87,9 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
   useEffect(() => {
     if (map && features?.length) {
       // Every time we get a new map or features, we make a new class
-      setMapHeat(new MapHeat({ features, map, zoom }))
+      setMapHeat(new MapHeat({
+        features, map, zoom,
+      }))
     }
   }, [map, features, zoom])
 

package/src/Contexts/MapBoxInstance/Provider.tsx

@@ -1,6 +1,8 @@
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Map } from 'mapbox-gl'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { MapBoxInstanceContext } from './Context.ts'
 
@@ -8,7 +10,9 @@ export const MapBoxInstanceProvider: React.FC<WithChildren> = ({ children }) =>
   const [map, setMapBoxInstance] = useState<Map>()
   const [mapInitialized, setMapInitialized] = useState(false)
 
-  const value = useMemo(() => ({ map, mapInitialized, setMapBoxInstance }), [map, mapInitialized, setMapBoxInstance])
+  const value = useMemo(() => ({
+    map, mapInitialized, setMapBoxInstance,
+  }), [map, mapInitialized, setMapBoxInstance])
 
   useEffect(() => {
     if (!mapInitialized && map) {

package/src/Contexts/MapSettings/Provider.tsx

@@ -1,5 +1,7 @@
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { MapSettings } from '../../MapBoxClasses/index.ts'
 import type { MapSetting } from '../../Settings/index.ts'
@@ -31,7 +33,9 @@ export const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps
 
   useEffect(() => {
     if (mapSettings && map && mapInitialized) {
-      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom })
+      MapSettings.updateSettings({
+        debugLayerName, map, requestLocation, settings: mapSettings, zoom,
+      })
     }
   }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom])
 

package/src/Contexts/MapboxAccessToken/Provider.tsx

@@ -1,5 +1,5 @@
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { MapboxAccessTokenContext } from './Context.ts'
 
@@ -10,6 +10,14 @@ export interface MapboxAccessTokenProviderProps {
 export const MapboxAccessTokenProvider: React.FC<WithChildren<MapboxAccessTokenProviderProps>> = ({ defaultAccessToken, ...props }) => {
   const [accessToken, setAccessToken] = useState<string>()
 
-  // eslint-disable-next-line @eslint-react/no-unstable-context-value
-  return <MapboxAccessTokenContext.Provider value={{ accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }} {...props} />
+  const value = useMemo(() => ({
+    accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken,
+  }), [accessToken, defaultAccessToken, setAccessToken])
+
+  return (
+    <MapboxAccessTokenContext.Provider
+      value={value}
+      {...props}
+    />
+  )
 }

package/src/Layers/Builders/LocationHeatMapLayerBuilder.ts

@@ -1,4 +1,6 @@
-import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from '../Configs/index.ts'
+import {
+  HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig,
+} from '../Configs/index.ts'
 import { FillLayerBuilder } from '../FillLayer.ts'
 import { LineLayerBuilder } from '../LineLayer.ts'
 import { SymbolLayerBuilder } from '../SymbolLayer.ts'

package/src/Layers/CircleLayer.ts

@@ -9,7 +9,9 @@ export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
 
   constructor(id: string, source: string, CircleLayerOptions?: Partial<CircleLayerSpecification>) {
     super(id, source)
-    this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: 'circle' }
+    this.CircleLayerOptions = CircleLayerOptions || {
+      id: this.id, source: this.source, type: 'circle',
+    }
   }
 
   buildLayer(): CircleLayerSpecification {

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -14,7 +14,5 @@ export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpe
     'text-size': 10,
     'visibility': 'none',
   },
-  paint: {
-    'text-color': color,
-  },
+  paint: { 'text-color': color },
 })

package/src/MapBoxClasses/MapBase.ts

@@ -16,7 +16,9 @@ export abstract class MapBase<T extends Geometry> {
   private _config: MapBaseConfig<T>
 
   constructor(config: MapBaseConfig<T>) {
-    this._config = { requestLocation: true, zoom: 2, ...config }
+    this._config = {
+      requestLocation: true, zoom: 2, ...config,
+    }
   }
 
   get isMapReady() {

package/src/MapBoxClasses/MapHeat.ts

@@ -3,7 +3,9 @@ import { delay } from '@xylabs/delay'
 import { forget } from '@xylabs/forget'
 import { GeoJson } from '@xyo-network/sdk-geo'
 import type { Feature, Polygon } from 'geojson'
-import type { GeoJSONSource, GeoJSONSourceSpecification, Map, MapOptions } from 'mapbox-gl'
+import type {
+  GeoJSONSource, GeoJSONSourceSpecification, Map, MapOptions,
+} from 'mapbox-gl'
 import { LngLatBounds } from 'mapbox-gl'
 
 import type { MapLayer } from '../Layers/index.ts'