@xyo-network/react-map 7.5.7 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-map",
-  "version": "7.5.7",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,54 +36,177 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/geo": "~5.0.90",
-    "@xylabs/react-app-settings": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-shared": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@xyo-network/react-archivist": "7.5.7",
-    "@xyo-network/react-map-model": "7.5.7",
-    "@xyo-network/sdk-geo": "~3.0.3",
-    "geojson": "~0.5.0",
-    "mapbox-gl": "~3.20.0"
+    "@xyo-network/react-archivist": "~7.5.11",
+    "@xyo-network/react-map-model": "~7.5.11"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
-    "@types/geojson": "7946.0.16",
+    "@bitauth/libauth": "~3.0.0",
+    "@emotion/react": "^11.14.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@scure/bip39": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/geojson": "~7946.0.16",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/geo": "^5.0.100",
+    "@xylabs/react-app-settings": "~7.1.20",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-crypto": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-number-status": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/archivist-memory": "~5.5.5",
+    "@xyo-network/archivist-model": "^5.5.5",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/module-wrapper": "~5.5.5",
+    "@xyo-network/network": "~5.5.1",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/sdk-geo": "~3.0.3",
+    "@xyo-network/wallet": "~5.5.1",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "geojson": "^0.5.0",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "mapbox-gl": "^3.22.0",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-icons": "~5.6.0",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@emotion/react": "^11.14.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@scure/bip39": "~2.2.0",
+    "@xylabs/geo": "^5.0.100",
+    "@xylabs/react-app-settings": "~7.1.20",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-crypto": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-number-status": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/archivist-memory": "~5.5.5",
+    "@xyo-network/archivist-model": "^5.5.5",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/module-wrapper": "~5.5.5",
+    "@xyo-network/network": "~5.5.1",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/sdk-geo": "~3.0.3",
+    "@xyo-network/wallet": "~5.5.1",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "mapbox-gl": "^3.22.0",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-icons": "~5.6.0",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/Components/AnimatedHeatMap.tsx

@@ -1,61 +0,0 @@
-import { useTheme } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { darkenCss } from '@xylabs/react-theme'
-import type { AnimatedHeatMapColorProps, MapSetting } from '@xyo-network/react-map-model'
-import type { Feature, Polygon } from 'geojson'
-import type { PropsWithChildren } from 'react'
-import React, { useState } from 'react'
-
-import {
-  HeatMapInitializerProvider, MapBoxInstanceProvider, MapSettingsProvider,
-} from '../Contexts/index.ts'
-import type { MapLayer } from '../Layers/index.ts'
-import { LocationHeatMapLayerBuilderAnimated, MapHeatConstants } from '../Layers/index.ts'
-import { MapboxHeatFlexBox } from './MapBoxHeat.tsx'
-
-export interface AnimatedHeatMapProps {
-  accessToken: string
-  animatedFeatureSets: Feature<Polygon>[][]
-  defaultMapSettings?: MapSetting
-  heatMapColorProps: AnimatedHeatMapColorProps
-  staticFeatureSet: Feature<Polygon>[]
-}
-
-export const AnimatedHeatMap: React.FC<PropsWithChildren<AnimatedHeatMapProps>> = ({
-  accessToken,
-  animatedFeatureSets,
-  defaultMapSettings,
-  heatMapColorProps,
-  staticFeatureSet,
-  ...props
-}) => {
-  const theme = useTheme()
-  const {
-    staticMapColor, lowUsageColor, highUsageColor,
-  } = heatMapColorProps || {}
-  const localStaticMapColor = staticMapColor ?? theme.vars.palette.primary.light
-
-  const [layers] = useState<MapLayer[]>(() => [
-    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, 'static'),
-    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, 'animated'),
-    LocationHeatMapLayerBuilderAnimated(highUsageColor || darkenCss(localStaticMapColor, 0.9), 1, 'animated'),
-  ])
-
-  return animatedFeatureSets?.length
-    ? (
-        <MapBoxInstanceProvider>
-          <MapSettingsProvider defaultMapSettings={defaultMapSettings} debugLayerName={MapHeatConstants.LocationDebugLayerId}>
-            <HeatMapInitializerProvider
-              features={staticFeatureSet}
-              layers={[layers[0]]}
-              featureSets={animatedFeatureSets}
-              featureSetsLayers={layers.slice(1, 3)}
-              heatMapColorProps={heatMapColorProps}
-            >
-              <MapboxHeatFlexBox accessToken={accessToken} {...props}></MapboxHeatFlexBox>
-            </HeatMapInitializerProvider>
-          </MapSettingsProvider>
-        </MapBoxInstanceProvider>
-      )
-    : <FlexCol minHeight={160} minWidth={160} busy />
-}

package/src/Components/AnimatedHeatMapLoaded.tsx

@@ -1,61 +0,0 @@
-import { Alert, AlertTitle } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { useWeakArchivistFromNode, useWeakArchivistGet } from '@xyo-network/react-archivist'
-import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '@xyo-network/react-map-model'
-import {
-  AnimatedHeatMapSettings,
-  useFindHashes, useHeatMapColors,
-} from '@xyo-network/react-map-model'
-import type { Feature, Polygon } from 'geojson'
-import React from 'react'
-
-import { useQuadKeyPayloadsToFeatures } from '../hooks/index.ts'
-import { AnimatedHeatMap } from './AnimatedHeatMap.tsx'
-import { AnimatedHeatMapLegend } from './Legend.tsx'
-
-export interface AnimatedHeatMapLoadedProps extends FlexBoxProps {
-  accessToken: string
-  archivistNameOrAddress: string
-}
-
-export const AnimatedHeatMapLoaded: React.FC<AnimatedHeatMapLoadedProps> = ({
-  accessToken, archivistNameOrAddress, ...props
-}) => {
-  const hashes = useFindHashes()
-  const [archivist] = useWeakArchivistFromNode(archivistNameOrAddress)
-  const [payloads, xyoError] = useWeakArchivistGet<NetworkLocationHeatmapQuadkeyAnswerPayload>(archivist, hashes)
-  const { multipleFeatureSets } = useQuadKeyPayloadsToFeatures(payloads)
-  const { heatMapColorProps, legendProps } = useHeatMapColors()
-
-  const MapBoxHeatProps = {
-    flexGrow: 1,
-    legend: legendProps ? <AnimatedHeatMapLegend {...legendProps} /> : null,
-  }
-
-  return (
-    <FlexCol alignItems="stretch" {...props}>
-      {xyoError
-        ? (
-            <Alert sx={{ mt: 2 }}>
-              <AlertTitle>Error Loading Map</AlertTitle>
-              {xyoError.message ? `Error: ${xyoError.message}` : null}
-              You might try authenticating again.
-            </Alert>
-          )
-        : null}
-      {hashes === undefined
-        ? <Alert>Missing answer hash for heat map query</Alert>
-        : (
-            <AnimatedHeatMap
-              accessToken={accessToken}
-              defaultMapSettings={AnimatedHeatMapSettings}
-              animatedFeatureSets={multipleFeatureSets.slice(1) as Feature<Polygon>[][]}
-              staticFeatureSet={multipleFeatureSets[0] as Feature<Polygon>[]}
-              heatMapColorProps={heatMapColorProps}
-              {...MapBoxHeatProps}
-            />
-          )}
-    </FlexCol>
-  )
-}

package/src/Components/FeaturesToLayersMap.ts

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

package/src/Components/HeatMapSettings.ts

@@ -1,11 +0,0 @@
-import { DefaultMapSettings } from '@xyo-network/react-map-model'
-
-const HeatMapSettings = DefaultMapSettings()
-const {
-  debugLayer, scrollToZoom, fitToPoints,
-} = HeatMapSettings
-debugLayer.hidden = false
-scrollToZoom.value = true
-fitToPoints.value = true
-
-export { HeatMapSettings }

package/src/Components/LayerAnimator.tsx

@@ -1,119 +0,0 @@
-import { useInterval } from '@xylabs/react-shared'
-import type { Map } from 'mapbox-gl'
-import type { PropsWithChildren } from 'react'
-import React, {
-  useCallback, useEffect, useMemo, useRef,
-} from 'react'
-
-import type { MapLayer } from '../Layers/index.ts'
-import type { MapboxFlexBoxProps } from '../lib/index.ts'
-
-export interface LayerAnimatorProps {
-  animateLayers?: boolean
-  layers: MapboxFlexBoxProps['layers']
-  layersInitialized: boolean
-  map: Map | undefined
-}
-
-const timeIncrement = 2000
-const animatedLayerCount = 3
-
-export const LayerAnimator: React.FC<PropsWithChildren<LayerAnimatorProps>> = ({
-  animateLayers, children, layers, layersInitialized, map,
-}) => {
-  const layerIndexQueue = useRef<number[]>([])
-
-  const fillLayers: MapLayer[] = useMemo(() => {
-    if (layers?.length && map && layersInitialized) {
-      return layers.filter((layer) => {
-        const fillLayer = layer.id.startsWith('location-fill')
-        if (fillLayer) {
-          map.setPaintProperty(layer.id, 'fill-opacity-transition', { delay: 0, duration: 4000 })
-        }
-        return fillLayer
-      })
-    }
-    return []
-  }, [layers, layersInitialized, map])
-
-  const incrementQueue = useCallback(
-    (index: number) => {
-      if (fillLayers[index]) {
-        layerIndexQueue.current.push(index)
-      } else {
-        layerIndexQueue.current.push(0)
-      }
-      return layerIndexQueue.current.at(-1)
-    },
-    [fillLayers],
-  )
-
-  const lastQueuedIndex = useCallback(() => {
-    const last = layerIndexQueue.current.at(-1)
-    if (last === undefined) {
-      incrementQueue(0)
-      return 0
-    } else {
-      return last
-    }
-  }, [incrementQueue])
-
-  const unshiftQueue = useCallback(() => {
-    layerIndexQueue.current.shift()
-  }, [])
-
-  const getNextLayer = useCallback(() => {
-    const nextLayer = fillLayers[lastQueuedIndex()]
-    incrementQueue(lastQueuedIndex() + 1)
-    return nextLayer
-  }, [fillLayers, incrementQueue, lastQueuedIndex])
-
-  const layerAnimateWorker = useCallback(
-    (layer: MapLayer) => {
-      if (layer) {
-        map?.setPaintProperty(layer.id, 'fill-opacity', 0.85)
-        setTimeout(() => {
-          map?.setPaintProperty(layer.id, 'fill-opacity', 0)
-          unshiftQueue()
-        }, timeIncrement * 2)
-      } else {
-        console.warn('tried to queue an empty layer')
-      }
-    },
-    [map, unshiftQueue],
-  )
-
-  //
-  const queueLayerAnimation = useCallback(() => {
-    const animatedLayers: MapLayer[] = []
-
-    for (let i = 0; i < animatedLayerCount; i++) {
-      animatedLayers.push(getNextLayer())
-    }
-
-    for (const [index, layer] of animatedLayers.entries()) {
-      if (index === 0) {
-        layerAnimateWorker(layer)
-      } else {
-        setTimeout(() => {
-          layerAnimateWorker(layer)
-        }, timeIncrement * index)
-      }
-    }
-  }, [getNextLayer, layerAnimateWorker])
-
-  // Run a single layer animation before the interval kicks in
-  useEffect(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
-      queueLayerAnimation()
-    }
-  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation])
-
-  useInterval(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
-      queueLayerAnimation()
-    }
-  }, timeIncrement * animatedLayerCount)
-
-  return <>{children}</>
-}

package/src/Components/Legend.tsx

@@ -1,36 +0,0 @@
-import { useMediaQuery, useTheme } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { ColorGradientLegendProps } from '@xyo-network/react-map-model'
-import React from 'react'
-
-import { ColorGradientLegend } from './Legends/index.ts'
-
-const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {
-  const {
-    startColor, endColor, startLabel, endLabel, heading, textColor,
-  } = legendProps
-  const theme = useTheme()
-  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
-
-  return (
-    <FlexCol position="absolute" bottom={0} right={0}>
-      <ColorGradientLegend
-        startColor={startColor}
-        endColor={endColor}
-        startLabel={startLabel}
-        endLabel={endLabel}
-        heading={heading}
-        textColor={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),
-        }}
-      />
-    </FlexCol>
-  )
-}
-
-export { AnimatedHeatMapLegend }

package/src/Components/Legends/ColorGradient.tsx

@@ -1,35 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import type { ColorGradientLegendProps } from '@xyo-network/react-map-model'
-import React from 'react'
-
-const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({
-  startColor, endColor, startLabel, endLabel, heading, textColor, ...props
-}) => {
-  const theme = useTheme()
-
-  return (
-    <FlexCol {...props}>
-      <Typography mb={theme.spacing(0.25)} color={textColor} variant="caption" textAlign="center">
-        {heading}
-      </Typography>
-      <FlexCol flexGrow={1} alignItems="stretch" paddingX={theme.spacing(1)} mb={theme.spacing(0.25)}>
-        <FlexCol
-          height={theme.spacing(0.75)}
-          border={`1px solid ${textColor}`}
-          sx={{ backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }}
-        />
-      </FlexCol>
-      <FlexRow flexGrow={1} justifyContent="space-between">
-        <Typography color={textColor} variant="caption">
-          {startLabel}
-        </Typography>
-        <Typography color={textColor} variant="caption">
-          {endLabel}
-        </Typography>
-      </FlexRow>
-    </FlexCol>
-  )
-}
-
-export { ColorGradientLegend }

package/src/Components/Legends/index.ts

@@ -1 +0,0 @@
-export * from './ColorGradient.tsx'

package/src/Components/MapBox.stories.tsx

@@ -1,92 +0,0 @@
-/// <reference types="vite/client" />
-import { Button } from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { DefaultMapSettings } from '@xyo-network/react-map-model'
-import React, { useRef } from 'react'
-
-import { MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts/index.ts'
-import { MapBox } from './MapBox.tsx'
-import { MapSettingsBox } from './MapSettingsComponents/index.ts'
-
-const WithMapboxProviders: Decorator = (Story, props) => {
-  const defaultSettings = DefaultMapSettings()
-  defaultSettings.enableControls.hidden = false
-  defaultSettings.scrollToZoom.hidden = false
-
-  return (
-    <MapBoxInstanceProvider>
-      <MapSettingsProvider defaultMapSettings={defaultSettings}>
-        <Story {...props} />
-      </MapSettingsProvider>
-    </MapBoxInstanceProvider>
-  )
-}
-
-const WithMapSettingsDecorator: Decorator = (Story, args) => {
-  return (
-    <>
-      <Story {...args} />
-      <MapSettingsBox developerMode={true} />
-    </>
-  )
-}
-
-export default {
-  args: { accessToken: import.meta.env.VITE_MAPBOX_TOKEN },
-  component: MapBox,
-  decorators: [WithMapboxProviders],
-  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',
-    }}
-    >
-      <MapBox {...args} />
-    </div>
-  )
-}
-
-const ContainerResizeTemplate: StoryFn<typeof MapBox> = (args) => {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const handleClick = () => {
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.style.minWidth
-      containerRef.current.style.minWidth = containerWidth === '100%' ? '50%' : '100%'
-    }
-  }
-
-  return (
-    <FlexGrowCol rowGap={2} alignItems="start">
-      <Button variant="contained" sx={{ my: 1 }} onClick={handleClick}>
-        Toggle Container minWidth
-      </Button>
-      <div
-        ref={containerRef}
-        style={{
-          minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease',
-        }}
-      >
-        <MapBox {...args} />
-      </div>
-    </FlexGrowCol>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithContainerResize = ContainerResizeTemplate.bind({})
-
-const WithMapSettings = Template.bind({})
-WithMapSettings.decorators = [WithMapSettingsDecorator]
-
-export {
-  Default, WithContainerResize, WithMapSettings,
-}