diff --git a/examples/kepler/index.html b/examples/kepler/index.html
index fcb3a249..c8e85cb4 100644
--- a/examples/kepler/index.html
+++ b/examples/kepler/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Hubble.gl in Kepler.gl</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
   <style>
     body {margin: 0; font-family: sans-serif; overflow: hidden;}
     #app {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: stretch;}
@@ -12,8 +13,8 @@
 <body>
   <div id="app"></div>
 </body>
-<script type="text/javascript" src="app.js"></script>
-<script type="text/javascript">
-  Root.renderToDOM(document.getElementById('app'));
+<script type="module">
+  import {renderToDOM} from './src/main.jsx';
+  renderToDOM(document.getElementById('app'));
 </script>
 </html>
diff --git a/examples/kepler/package.json b/examples/kepler/package.json
index e58c00da..24c54e38 100644
--- a/examples/kepler/package.json
+++ b/examples/kepler/package.json
@@ -1,46 +1,36 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "start-local-luma": "webpack-dev-server --env.local --env.local-luma --progress --hot --open",
-    "clean": "rm -rf yarn.lock ./node_modules",
-    "bootstrap": "yarn clean && yarn",
-    "build": "rm -rf dist && mkdir dist && cp index.html dist/ && webpack --env.production=true"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.mjs",
+    "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "8.2.0",
+    "deck.gl": "8.9.27",
     "d3-request": "^1.0.6",
     "global": "^4.3.0",
-    "hubble.gl": "^1.3.0",
-    "kepler.gl": "^2.5.5",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-map-gl": "^5.2.10",
-    "react-markdown": "^4.2.2",
-    "react-palm": "^3.3.6",
-    "redux-actions": "^2.2.1",
+    "hubble.gl": "^1.4.0-alpha.0",
+    "kepler.gl": "3.1.0",
+    "mapbox-gl": "1.13.1",
+    "maplibre-gl": "^3.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.8",
+    "react-markdown": "^6.0.3",
     "redux-thunk": "^1.0.0",
-    "react-intl": "^3.12.0"
+    "react-intl": "^6.8.9",
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
-    "babel-loader": "^8.0.0",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-middleware": "^3.5.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-hot-middleware": "^2.24.3"
+    "vite": "^4.0.0"
   },
   "resolutions_comments": [
-    "deck.gl: pinned to 8.2.0 for compatibility with kepler.gl"
+    "deck.gl: pinned to 8.9.27 for compatibility with kepler.gl"
   ],
   "resolutions": {
-    "deck.gl": "8.2.0",
-    "@luma.gl/constants": "8.2.0",
-    "@luma.gl/core": "8.2.0",
-    "@luma.gl/shadertools": "8.2.0",
-    "@luma.gl/experimental": "8.2.0"
+    "deck.gl": "8.9.27",
+    "@luma.gl/constants": "8.5.21",
+    "@luma.gl/core": "8.5.21",
+    "@luma.gl/shadertools": "8.5.21",
+    "@luma.gl/experimental": "8.5.21"
   }
 }
diff --git a/examples/kepler/src/actions.js b/examples/kepler/src/actions.js
index ac1bc461..dddbfbea 100644
--- a/examples/kepler/src/actions.js
+++ b/examples/kepler/src/actions.js
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {text as requestText, json as requestJson} from 'd3-request';
-import {toggleModal} from 'kepler.gl/actions';
+import {toggleModal} from '@kepler.gl/actions';
 
 import {
   LOADING_SAMPLE_ERROR_MESSAGE,
diff --git a/examples/kepler/src/app.js b/examples/kepler/src/app.jsx
similarity index 74%
rename from examples/kepler/src/app.js
rename to examples/kepler/src/app.jsx
index 9bd41372..ab80ff29 100644
--- a/examples/kepler/src/app.js
+++ b/examples/kepler/src/app.jsx
@@ -20,30 +20,41 @@
 
 import React, {Component} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import styled, {createGlobalStyle, ThemeProvider} from 'styled-components';
+import styled, {createGlobalStyle, ThemeProvider, StyleSheetManager} from 'styled-components';
 import window from 'global/window';
 import {connect} from 'react-redux';
 import {IntlProvider} from 'react-intl';
-import {messages} from 'kepler.gl/localization';
-import {theme} from 'kepler.gl/styles';
+import {messages} from '@kepler.gl/localization';
+import {theme} from '@kepler.gl/styles';
 import {replaceLoadDataModal} from './factories/load-data-modal';
 import {replaceMapControl} from './factories/map-control';
 import {replacePanelHeader} from './factories/panel-header';
 import {replaceSaveExportDropdown} from './factories/export-modal';
 import {AUTH_TOKENS} from './constants/default-settings';
 import {loadSampleConfigurations} from './actions';
-
+import isPropValid from '@emotion/is-prop-valid';
 import ExportVideo from './components/export-video';
+import {injectComponents} from '@kepler.gl/components';
 
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
 import sampleAnimateTrip from './data/sample-animate-trip-data';
-import {addDataToMap} from 'kepler.gl/actions';
-import {processCsvData, processGeojson} from 'kepler.gl/processors';
+import {addDataToMap} from '@kepler.gl/actions';
+import {processCsvData, processGeojson} from '@kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
-const KeplerGl = require('kepler.gl/components').injectComponents([
+// This implements the default behavior from styled-components v5
+function shouldForwardProp(propName, target) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
+const KeplerGl = injectComponents([
   replaceLoadDataModal(),
   replaceMapControl(),
   replacePanelHeader(),
@@ -185,30 +196,32 @@ class App extends Component {
 
   render() {
     return (
-      <IntlProvider locale="en" messages={messages.en}>
-        <ThemeProvider theme={theme}>
-          <GlobalStyle />
-          <WindowSize>
-            <ExportVideo />
-            <div style={{transition: 'margin 1s, height 1s', flex: 1}}>
-              <AutoSizer>
-                {({height, width}) => (
-                  <KeplerGl
-                    mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
-                    id="map"
-                    /*
-                     * Specify path to keplerGl state, because it is not mount at the root
-                     */
-                    getState={keplerGlGetState}
-                    width={width}
-                    height={height}
-                  />
-                )}
-              </AutoSizer>
-            </div>
-          </WindowSize>
-        </ThemeProvider>
-      </IntlProvider>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+        <IntlProvider locale="en" messages={messages.en}>
+          <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <WindowSize>
+              <ExportVideo />
+              <div style={{transition: 'margin 1s, height 1s', flex: 1}}>
+                <AutoSizer>
+                  {({height, width}) => (
+                    <KeplerGl
+                      mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
+                      id="map"
+                      /*
+                      * Specify path to keplerGl state, because it is not mount at the root
+                      */
+                      getState={keplerGlGetState}
+                      width={width}
+                      height={height}
+                    />
+                  )}
+                </AutoSizer>
+              </div>
+            </WindowSize>
+          </ThemeProvider>
+        </IntlProvider>
+      </StyleSheetManager>
     );
   }
 }
diff --git a/examples/kepler/src/components/export-video.js b/examples/kepler/src/components/export-video.jsx
similarity index 93%
rename from examples/kepler/src/components/export-video.js
rename to examples/kepler/src/components/export-video.jsx
index 3582b74f..7254352d 100644
--- a/examples/kepler/src/components/export-video.js
+++ b/examples/kepler/src/components/export-video.jsx
@@ -25,7 +25,8 @@ import styled, {withTheme} from 'styled-components';
 import {InjectKeplerUI, ExportVideoModal, ExportVideoPanelContainer} from '@hubble.gl/react';
 // Redux stores/actions
 import {toggleHubbleExportModal} from '../actions';
-import {setFilter, setLayerAnimationTime} from 'kepler.gl/actions';
+import {setFilter, setLayerAnimationTime} from '@kepler.gl/actions';
+import mapboxgl from 'mapbox-gl';
 
 // Hook up mutual kepler imports
 import {
@@ -37,7 +38,7 @@ import {
   LoadingSpinner,
   ModalTabsFactory,
   Play
-} from 'kepler.gl/components';
+} from '@kepler.gl/components';
 
 const IconButton = styled(Button)`
   padding: 0;
@@ -95,6 +96,9 @@ class ExportVideo extends Component {
               onTripFrameUpdate={onTripFrameUpdate}
               exportVideoWidth={720}
               defaultFileName={'hubble.gl'}
+              mapProps={{
+                mapLib: mapboxgl
+              }}
             />
           </ExportVideoModal>
         </div>
diff --git a/examples/kepler/src/components/load-data-modal/sample-data-viewer.js b/examples/kepler/src/components/load-data-modal/sample-data-viewer.js
deleted file mode 100644
index 0d2f335b..00000000
--- a/examples/kepler/src/components/load-data-modal/sample-data-viewer.js
+++ /dev/null
@@ -1,154 +0,0 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import {format} from 'd3-format';
-import {LoadingDialog} from 'kepler.gl/components';
-import {FormattedMessage, IntlProvider} from 'react-intl';
-import {messages} from '../../constants/localization';
-
-const numFormat = format(',');
-
-const StyledSampleGallery = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-`;
-
-const StyledSampleMap = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: ${props => props.theme.textColorLT};
-  line-height: 22px;
-  width: 30%;
-  max-width: 480px;
-  margin-bottom: 50px;
-
-  .sample-map__image {
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 12px;
-    opacity: 0.9;
-    transition: opacity 0.4s ease;
-    position: relative;
-    line-height: 0;
-
-    img {
-      max-width: 100%;
-    }
-    :hover {
-      cursor: pointer;
-      opacity: 1;
-    }
-  }
-
-  .sample-map__size {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 24px;
-  }
-
-  :hover {
-    .sample-map__image__caption {
-      opacity: 0.8;
-      transition: opacity 0.4s ease;
-    }
-  }
-`;
-
-const StyledImageCaption = styled.div`
-  color: ${props => props.theme.labelColorLT};
-  font-size: 11px;
-  font-weight: 400;
-  line-height: 16px;
-  margin-top: 10px;
-  opacity: 0;
-`;
-
-const StyledError = styled.div`
-  color: red;
-  font-size: 14px;
-  margin-bottom: 16px;
-`;
-
-const SampleMap = ({id, sample, onClick, locale}) => (
-  <StyledSampleMap id={id} className="sample-map-gallery__item">
-    <IntlProvider locale={locale} messages={messages[locale]}>
-      <div className="sample-map">
-        <div className="sample-map__image" onClick={onClick}>
-          {sample.imageUrl && <img src={sample.imageUrl} />}
-        </div>
-        <div className="sample-map__title">{sample.label}</div>
-        <div className="sample-map__size">
-          <FormattedMessage
-            id={'sampleDataViewer.rowCount'}
-            values={{rowCount: numFormat(sample.size)}}
-          />
-        </div>
-        <StyledImageCaption className="sample-map__image__caption">
-          {sample.description}
-        </StyledImageCaption>
-      </div>
-    </IntlProvider>
-  </StyledSampleMap>
-);
-
-export default class SampleMapGallery extends Component {
-  static propTypes = {
-    sampleMaps: PropTypes.arrayOf(PropTypes.object),
-    onLoadSample: PropTypes.func.isRequired,
-    loadSampleConfigurations: PropTypes.func.isRequired,
-    error: PropTypes.object
-  };
-  componentDidMount() {
-    if (!this.props.sampleMaps.length) {
-      this.props.loadSampleConfigurations();
-    }
-  }
-
-  render() {
-    const {sampleMaps, onLoadSample, error, isMapLoading, locale} = this.props;
-    return (
-      <div className="sample-data-modal">
-        {error ? (
-          <StyledError>{error.message}</StyledError>
-        ) : isMapLoading ? (
-          <LoadingDialog size={64} />
-        ) : (
-          <StyledSampleGallery className="sample-map-gallery">
-            {sampleMaps
-              .filter(sp => sp.visible)
-              .map(sp => (
-                <SampleMap
-                  id={sp.id}
-                  sample={sp}
-                  key={sp.id}
-                  onClick={() => onLoadSample(sp)}
-                  locale={locale}
-                />
-              ))}
-          </StyledSampleGallery>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/examples/kepler/src/components/load-data-modal/sample-data-viewer.jsx b/examples/kepler/src/components/load-data-modal/sample-data-viewer.jsx
new file mode 100644
index 00000000..99496cc6
--- /dev/null
+++ b/examples/kepler/src/components/load-data-modal/sample-data-viewer.jsx
@@ -0,0 +1,144 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the hubble.gl project
+
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {format} from 'd3-format';
+import {LoadingDialog} from '@kepler.gl/components';
+import {FormattedMessage, IntlProvider} from 'react-intl';
+import {messages} from '../../constants/localization';
+
+const numFormat = format(',');
+
+const StyledSampleGallery = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const StyledSampleMap = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${props => props.theme.textColorLT};
+  line-height: 22px;
+  width: 30%;
+  max-width: 480px;
+  margin-bottom: 50px;
+
+  .sample-map__image {
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+    opacity: 0.9;
+    transition: opacity 0.4s ease;
+    position: relative;
+    line-height: 0;
+
+    img {
+      max-width: 100%;
+    }
+    &:hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+
+  .sample-map__size {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  &:hover {
+    .sample-map__image__caption {
+      opacity: 0.8;
+      transition: opacity 0.4s ease;
+    }
+  }
+`;
+
+const StyledImageCaption = styled.div`
+  color: ${props => props.theme.labelColorLT};
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 10px;
+  opacity: 0;
+`;
+
+const StyledError = styled.div`
+  color: red;
+  font-size: 14px;
+  margin-bottom: 16px;
+`;
+
+const SampleMap = ({id, sample, onClick, locale}) => (
+  <StyledSampleMap id={id} className="sample-map-gallery__item">
+    <IntlProvider locale={locale} messages={messages[locale]}>
+      <div className="sample-map">
+        <div className="sample-map__image" onClick={onClick}>
+          {sample.imageUrl && <img src={sample.imageUrl} />}
+        </div>
+        <div className="sample-map__title">{sample.label}</div>
+        <div className="sample-map__size">
+          <FormattedMessage
+            id={'sampleDataViewer.rowCount'}
+            values={{rowCount: numFormat(sample.size)}}
+          />
+        </div>
+        <StyledImageCaption className="sample-map__image__caption">
+          {sample.description}
+        </StyledImageCaption>
+      </div>
+    </IntlProvider>
+  </StyledSampleMap>
+);
+
+const SampleMapGallery = ({
+  sampleMaps,
+  onLoadSample,
+  error,
+  isMapLoading,
+  locale,
+  loadSampleConfigurations
+}) => {
+  useEffect(() => {
+    if (!sampleMaps.length) {
+      loadSampleConfigurations();
+    }
+  }, [sampleMaps, loadSampleConfigurations]);
+
+  return (
+    <div className="sample-data-modal">
+      {error ? (
+        <StyledError>{error.message}</StyledError>
+      ) : isMapLoading ? (
+        <LoadingDialog size={64} />
+      ) : (
+        <StyledSampleGallery className="sample-map-gallery">
+          {sampleMaps
+            .filter(sp => sp.visible)
+            .map(sp => (
+              <SampleMap
+                id={sp.id}
+                sample={sp}
+                key={sp.id}
+                onClick={() => onLoadSample(sp)}
+                locale={locale}
+              />
+            ))}
+        </StyledSampleGallery>
+      )}
+    </div>
+  );
+};
+
+SampleMapGallery.propTypes = {
+  sampleMaps: PropTypes.arrayOf(PropTypes.object),
+  onLoadSample: PropTypes.func.isRequired,
+  loadSampleConfigurations: PropTypes.func.isRequired,
+  error: PropTypes.object
+};
+
+export default SampleMapGallery;
diff --git a/examples/kepler/src/components/load-data-modal/sample-maps-tab.js b/examples/kepler/src/components/load-data-modal/sample-maps-tab.jsx
similarity index 59%
rename from examples/kepler/src/components/load-data-modal/sample-maps-tab.js
rename to examples/kepler/src/components/load-data-modal/sample-maps-tab.jsx
index f805a8b5..94ce15c4 100644
--- a/examples/kepler/src/components/load-data-modal/sample-maps-tab.js
+++ b/examples/kepler/src/components/load-data-modal/sample-maps-tab.jsx
@@ -1,27 +1,10 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the hubble.gl project
 
 import React from 'react';
 import styled from 'styled-components';
-import {Icons} from 'kepler.gl/components';
-import {media} from 'kepler.gl/styles';
+import {Icons} from '@kepler.gl/components';
+import {media} from '@kepler.gl/styles';
 import {FormattedMessage, IntlProvider} from 'react-intl';
 
 import {ASSETS_URL} from '../../constants/default-settings';
@@ -74,7 +57,7 @@ const StyledTrySampleData = styled.div`
       font-size: 12px;
     `};
 
-    :hover {
+    &:hover {
       color: ${props => props.theme.textColorLT};
     }
 
@@ -95,10 +78,10 @@ const SampleMapsTab = ({onClick, intl}) => {
       <IntlProvider locale={intl.locale} messages={messages[intl.locale]}>
         <div className="demo-map-title">
           <div className="demo-map-label">
-            <FormattedMessage id={'sampleMapsTab.noData'} />
+            <FormattedMessage id={'sampleMapsTab.noData'} defaultMessage="No Data" />
           </div>
           <div className="demo-map-action" onClick={onClick}>
-            <FormattedMessage id={'sampleMapsTab.trySampleData'} />
+            <FormattedMessage id={'sampleMapsTab.trySampleData'} defaultMessage="Sample Maps" />
             <Icons.ArrowRight height="16px" />
           </div>
         </div>
diff --git a/examples/kepler/src/components/map-control/map-control.js b/examples/kepler/src/components/map-control/map-control.jsx
similarity index 98%
rename from examples/kepler/src/components/map-control/map-control.js
rename to examples/kepler/src/components/map-control/map-control.jsx
index 1d89e97c..f99b4fba 100644
--- a/examples/kepler/src/components/map-control/map-control.js
+++ b/examples/kepler/src/components/map-control/map-control.jsx
@@ -20,7 +20,7 @@
 
 import React, {useState} from 'react';
 import styled from 'styled-components';
-import {Icons, IconRoundSmall, MapControlButton} from 'kepler.gl/components';
+import {Icons, IconRoundSmall, MapControlButton} from '@kepler.gl/components';
 import ReactMarkdown from 'react-markdown';
 
 const StyledFloatingPanel = styled.div`
@@ -80,7 +80,7 @@ const StyledPanelAction = styled.div`
     }
   }
 
-  :hover {
+  &:hover {
     cursor: pointer;
     a {
       color: ${props => props.theme.textColorHl};
diff --git a/examples/kepler/src/constants/localization.js b/examples/kepler/src/constants/localization.js
index 35562ea2..75862693 100644
--- a/examples/kepler/src/constants/localization.js
+++ b/examples/kepler/src/constants/localization.js
@@ -23,7 +23,10 @@
 const en = {
   'sampleMapsTab.noData': 'No data ?',
   'sampleMapsTab.trySampleData': 'Try sample data',
-  'sampleDataViewer.rowCount': ' {rowCount} rows'
+  'sampleDataViewer.rowCount': ' {rowCount} rows',
+  'exportVideoModal.animation': 'Animation',
+  'exportVideoModal.settings': 'Settings',
+  'placeholder.search': 'Search',
 };
 
 export const messages = {
diff --git a/examples/kepler/src/factories/export-modal.js b/examples/kepler/src/factories/export-modal.js
index 9c958d2f..bee56519 100644
--- a/examples/kepler/src/factories/export-modal.js
+++ b/examples/kepler/src/factories/export-modal.js
@@ -1,10 +1,10 @@
-import {SaveExportDropdownFactory, withState} from 'kepler.gl/components';
+import {SaveExportDropdownFactory, withState} from '@kepler.gl/components';
 import {toggleHubbleExportModal} from '../actions';
-import {Icons} from 'kepler.gl/components';
+import {Icons} from '@kepler.gl/components';
 
 const CustomSaveExportDropdownFactory = (...deps) => {
   const SaveExportDropdown = SaveExportDropdownFactory(...deps);
-  const defaultLoadingMethods = SaveExportDropdown.defaultProps.items;
+  const defaultItems = SaveExportDropdown.defaultItems;
 
   const exportVideoModal = {
     label: 'toolbar.exportVideoModal',
@@ -14,12 +14,15 @@ const CustomSaveExportDropdownFactory = (...deps) => {
   };
 
   // add more loading methods
-  SaveExportDropdown.defaultProps = {
-    ...SaveExportDropdown.defaultProps,
-    items: [...defaultLoadingMethods, exportVideoModal]
-  };
+  const items = [...defaultItems, exportVideoModal];
 
-  return withState([], () => {}, {toggleHubbleExportModal})(SaveExportDropdown);
+  return withState(
+    [],
+    state => ({...state.demo.app, items}),
+    {
+      toggleHubbleExportModal
+    }
+  )(SaveExportDropdown);
 };
 
 CustomSaveExportDropdownFactory.deps = SaveExportDropdownFactory.deps;
diff --git a/examples/kepler/src/factories/load-data-modal.js b/examples/kepler/src/factories/load-data-modal.js
index dffecf70..0aeef080 100644
--- a/examples/kepler/src/factories/load-data-modal.js
+++ b/examples/kepler/src/factories/load-data-modal.js
@@ -1,56 +1,45 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the hubble.gl project
 
-import {LoadDataModalFactory, withState} from 'kepler.gl/components';
+import {LoadDataModalFactory, withState} from '@kepler.gl/components';
 import {LOADING_METHODS} from '../constants/default-settings';
+
 import SampleMapGallery from '../components/load-data-modal/sample-data-viewer';
 import SampleMapsTab from '../components/load-data-modal/sample-maps-tab';
 import {loadSample, loadSampleConfigurations} from '../actions';
 
-const additionalMethods = {
-  sample: {
-    id: LOADING_METHODS.sample,
-    label: 'Sample Maps',
-    elementType: SampleMapGallery,
-    tabElementType: SampleMapsTab
-  }
-};
-
 const CustomLoadDataModalFactory = (...deps) => {
   const LoadDataModal = LoadDataModalFactory(...deps);
-  const defaultLoadingMethods = LoadDataModal.defaultProps.loadingMethods;
+  const defaultLoadingMethods = LoadDataModal.defaultLoadingMethods;
+  const additionalMethods = {
+    sample: {
+      id: LOADING_METHODS.sample,
+      label: 'modal.loadData.sample',
+      elementType: SampleMapGallery,
+      tabElementType: SampleMapsTab
+    }
+  };
 
   // add more loading methods
-  LoadDataModal.defaultProps = {
-    ...LoadDataModal.defaultProps,
-    loadingMethods: [defaultLoadingMethods.find(lm => lm.id === 'upload'), additionalMethods.sample]
-  };
+  const loadingMethods = [
+    defaultLoadingMethods.find(lm => lm.id === 'upload'),
+    // defaultLoadingMethods.find(lm => lm.id === 'tileset'),
+    defaultLoadingMethods.find(lm => lm.id === 'storage'),
+    additionalMethods.sample
+  ];
 
-  return withState([], state => ({...state.demo.app, ...state.demo.keplerGl.map.uiState}), {
-    onLoadSample: loadSample,
-    loadSampleConfigurations
-  })(LoadDataModal);
+  return withState(
+    [],
+    state => ({...state.demo.app, ...state.demo.keplerGl.map.uiState, loadingMethods}),
+    {
+      onLoadSample: loadSample,
+      loadSampleConfigurations
+    }
+  )(LoadDataModal);
 };
 
 CustomLoadDataModalFactory.deps = LoadDataModalFactory.deps;
 
 export function replaceLoadDataModal() {
   return [LoadDataModalFactory, CustomLoadDataModalFactory];
-}
+}
\ No newline at end of file
diff --git a/examples/kepler/src/factories/map-control.js b/examples/kepler/src/factories/map-control.jsx
similarity index 96%
rename from examples/kepler/src/factories/map-control.js
rename to examples/kepler/src/factories/map-control.jsx
index ab41f12b..4c240a2d 100644
--- a/examples/kepler/src/factories/map-control.js
+++ b/examples/kepler/src/factories/map-control.jsx
@@ -20,7 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {MapControlFactory, withState} from 'kepler.gl/components';
+import {MapControlFactory, withState} from '@kepler.gl/components';
 import {SampleMapPanel} from '../components/map-control/map-control';
 
 CustomMapControlFactory.deps = MapControlFactory.deps;
diff --git a/examples/kepler/src/factories/panel-header.js b/examples/kepler/src/factories/panel-header.js
index 17013aea..34d86eb4 100644
--- a/examples/kepler/src/factories/panel-header.js
+++ b/examples/kepler/src/factories/panel-header.js
@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {PanelHeaderFactory, Icons} from 'kepler.gl/components';
-import {BUG_REPORT_LINK, USER_GUIDE_DOC} from 'kepler.gl/constants';
+import {PanelHeaderFactory, Icons} from '@kepler.gl/components';
+import {BUG_REPORT_LINK, USER_GUIDE_DOC} from '@kepler.gl/constants';
 
 export function CustomPanelHeaderFactory(...deps) {
   const PanelHeader = PanelHeaderFactory(...deps);
diff --git a/examples/kepler/src/main.js b/examples/kepler/src/main.jsx
similarity index 89%
rename from examples/kepler/src/main.js
rename to examples/kepler/src/main.jsx
index 6928ddfd..eb446a92 100644
--- a/examples/kepler/src/main.js
+++ b/examples/kepler/src/main.jsx
@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import {createRoot} from 'react-dom/client'; 
 import {Provider} from 'react-redux';
 import {render} from 'react-dom';
 import store from './store';
@@ -30,6 +31,7 @@ export const Root = () => (
   </Provider>
 );
 
-export function renderToDOM(container) {
-  render(<Root />, container);
-}
+export async function renderToDOM(container) {
+  const root = createRoot(container);
+  root.render(<Root />);
+}
\ No newline at end of file
diff --git a/examples/kepler/src/reducers/index.js b/examples/kepler/src/reducers/index.js
index 49e61341..d37a0923 100644
--- a/examples/kepler/src/reducers/index.js
+++ b/examples/kepler/src/reducers/index.js
@@ -21,10 +21,10 @@
 import {combineReducers} from 'redux';
 import {handleActions} from 'redux-actions';
 
-import keplerGlReducer, {combinedUpdaters, uiStateUpdaters} from 'kepler.gl/reducers';
-import {processGeojson, processCsvData} from 'kepler.gl/processors';
-import KeplerGlSchema from 'kepler.gl/schemas';
-import {EXPORT_MAP_FORMATS} from 'kepler.gl/constants';
+import keplerGlReducer, {combinedUpdaters, uiStateUpdaters} from '@kepler.gl/reducers';
+import {processGeojson, processCsvData} from '@kepler.gl/processors';
+import KeplerGlSchema from '@kepler.gl/schemas';
+import {EXPORT_MAP_FORMATS} from '@kepler.gl/constants';
 
 import {
   INIT,
diff --git a/examples/kepler/src/store.js b/examples/kepler/src/store.js
index e3d13fd5..0825f570 100644
--- a/examples/kepler/src/store.js
+++ b/examples/kepler/src/store.js
@@ -1,25 +1,8 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the hubble.gl project
 
 import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
-import {enhanceReduxMiddleware} from 'kepler.gl/middleware';
+import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import thunk from 'redux-thunk';
 // eslint-disable-next-line no-unused-vars
 import window from 'global/window';
diff --git a/examples/kepler/webpack.config.js b/examples/kepler/webpack.config.js
deleted file mode 100644
index 7a40a8a4..00000000
--- a/examples/kepler/webpack.config.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const webpack = require('webpack');
-const resolve = require('path').resolve;
-
-const CONFIG = {
-  mode: 'development',
-
-  entry: {
-    app: resolve('./src/main.js')
-  },
-
-  output: {
-    library: 'Root'
-  },
-
-  devtool: 'source-map',
-
-  module: {
-    rules: [
-      {
-        // Transpile ES6 to ES5 with babel
-        // Remove if your app does not use JSX or you don't need to support old browsers
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: [/node_modules/],
-        options: {
-          presets: ['@babel/preset-env', '@babel/preset-react']
-        }
-      }
-    ]
-  },
-
-  plugins: [
-    // Optional: Enables reading mapbox token from environment variable
-    new webpack.EnvironmentPlugin(['MapboxAccessToken'])
-  ]
-};
-
-// This line enables bundling against src in this repo rather than installed module
-module.exports = env => (env ? require('../webpack.config.local')(CONFIG)(env) : CONFIG);
diff --git a/examples/vite.config.local.mjs b/examples/vite.config.local.mjs
index 9efe39e4..c6e2ba89 100644
--- a/examples/vite.config.local.mjs
+++ b/examples/vite.config.local.mjs
@@ -7,17 +7,16 @@ const rootDir = join(__dirname, '..');
 /** https://vitejs.dev/config/ */
 export default defineConfig(async () => {
   const {aliases} = await getOcularConfig({root: rootDir});
-
   return {
     resolve: {
       alias: {
         ...aliases,
         // Use root dependencies
-        '@luma.gl': join(rootDir, './node_modules/@luma.gl'),
+        '@luma.gl': join(rootDir, './node_modules/@luma.gl'), // Multiple installs cause issues for equality e.g. "instanceof Program" "Model needs a Program"
         // '@math.gl': join(rootDir, './node_modules/@math.gl'),
         // '@arcgis/core': join(rootDir, './node_modules/@arcgis/core'),
         // '@loaders.gl/core': join(rootDir, './node_modules/@loaders.gl/core'),
-        'react': join(rootDir, './node_modules/react'),
+        'react': join(rootDir, './node_modules/react'), // Multiple installs cause issues for hooks e.g. useState
       }
     },
     define: {
diff --git a/modules/react/package.json b/modules/react/package.json
index d1dcceeb..73cc274e 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -43,24 +43,24 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
+    "mapbox-gl": "1.13.1",
     "popmotion": "9.3.1",
     "prop-types": "^15.7.2",
     "react-lifecycles-compat": "^3.0.4",
-    "react-map-gl": "^5.2.10",
+    "react-map-gl": "^7.1.8",
     "react-modal": "^3.8.1",
     "react-onclickoutside": "^6.9.0",
     "reselect": "^3.0.0",
-    "styled-components": "^6.1.11"
+    "styled-components": "6.1.8"
   },
   "peerDependencies": {
     "@deck.gl/core": ">=8.3",
     "@deck.gl/mapbox": ">=8.3",
     "@deck.gl/react": ">=8.3",
-    "@hubble.gl/core": "^1.3.0",
+    "@hubble.gl/core": "^1.4.0",
     "@loaders.gl/core": "^3.0.0",
-    "mapbox-gl": "<=2.4.1",
-    "react": ">=16.3.0",
-    "react-dom": ">=16.3.0"
+    "react": ">=18.2",
+    "react-dom": ">=18.2"
   },
   "devDependencies": {
     "@deck.gl/core": "^8.9",
diff --git a/modules/react/src/components/export-video/export-video-modal.tsx b/modules/react/src/components/export-video/export-video-modal.tsx
index 1ef08241..26a6ab2a 100644
--- a/modules/react/src/components/export-video/export-video-modal.tsx
+++ b/modules/react/src/components/export-video/export-video-modal.tsx
@@ -101,7 +101,8 @@ class ExportVideoModal extends Component<PropsWithChildren<ExportVideoModalProps
                   this.root.current ||
                   ({
                     removeChild: () => {},
-                    appendChild: () => {}
+                    appendChild: () => {},
+                    contains: () => {}
                   } as unknown as HTMLElement)
                 );
               }}
diff --git a/modules/react/src/components/export-video/export-video-panel-container.tsx b/modules/react/src/components/export-video/export-video-panel-container.tsx
index 76bf3486..9a2c1a89 100644
--- a/modules/react/src/components/export-video/export-video-panel-container.tsx
+++ b/modules/react/src/components/export-video/export-video-panel-container.tsx
@@ -19,7 +19,7 @@ import {
 import ExportVideoPanel from './export-video-panel';
 import {parseSetCameraType, scaleToVideoExport} from './utils';
 import {DEFAULT_FILENAME, getResolutionSetting} from './constants';
-import {StaticMapProps} from 'react-map-gl';
+import type {MapProps} from 'react-map-gl';
 import type {DeckProps, MapViewState} from '@deck.gl/core/typed';
 
 const ENCODERS = {
@@ -46,8 +46,8 @@ type ExportVideoPanelContainerProps = {
   mapData: any;
   header: boolean;
   deckProps?: DeckProps;
-  staticMapProps: StaticMapProps;
-  disableStaticMap: boolean;
+  mapProps: MapProps;
+  disableBaseMap: boolean;
   mapboxLayerBeforeId?: string;
   defaultFileName: string;
 
@@ -379,8 +379,8 @@ export class ExportVideoPanelContainer extends Component<
       mapData,
       header,
       deckProps,
-      staticMapProps,
-      disableStaticMap,
+      mapProps,
+      disableBaseMap,
       mapboxLayerBeforeId,
       defaultFileName
     } = this.props;
@@ -430,8 +430,8 @@ export class ExportVideoPanelContainer extends Component<
         viewState={viewState}
         setViewState={this.setViewState}
         deckProps={deckProps}
-        staticMapProps={staticMapProps}
-        disableStaticMap={disableStaticMap}
+        mapProps={mapProps}
+        disableBaseMap={disableBaseMap}
         mapboxLayerBeforeId={mapboxLayerBeforeId}
         // Settings Props
         settings={settings}
@@ -455,7 +455,7 @@ ExportVideoPanelContainer.defaultProps = {
   header: true,
   glContext: undefined,
   deckProps: {},
-  staticMapProps: {},
+  mapProps: {},
   disableStaticMap: false,
   defaultFileName: DEFAULT_FILENAME
 };
diff --git a/modules/react/src/components/export-video/export-video-panel-preview.tsx b/modules/react/src/components/export-video/export-video-panel-preview.tsx
index e21f58e2..47c827eb 100644
--- a/modules/react/src/components/export-video/export-video-panel-preview.tsx
+++ b/modules/react/src/components/export-video/export-video-panel-preview.tsx
@@ -3,23 +3,24 @@
 // Copyright (c) vis.gl contributors
 /* global window */
 
-import React, {Component, RefObject} from 'react';
-import DeckGL, {DeckGLRef} from '@deck.gl/react/typed';
-import {MapRef, StaticMap, StaticMapProps} from 'react-map-gl';
-import {MapboxLayer} from '@deck.gl/mapbox/typed';
-import type {DeckProps, MapViewState} from '@deck.gl/core/typed';
+import React, {Component, ForwardedRef, RefObject, forwardRef} from 'react';
+import DeckGL from '@deck.gl/react/typed';
+import ReactMapGL, {type MapProps, type MapRef, useControl} from 'react-map-gl';
+import {MapboxOverlay, MapboxOverlayProps} from '@deck.gl/mapbox/typed';
+import type {Deck, DeckProps, Layer, MapViewState} from '@deck.gl/core/typed';
 import isEqual from 'lodash.isequal';
 
 import {deckStyle, DeckCanvas} from './styled-components';
 import {RenderingSpinner} from './rendering-spinner';
 import {createKeplerLayers} from '../../kepler-layers';
 import {DeckAdapter} from '@hubble.gl/core';
+import {setRef} from './set-ref';
 
 export type ExportVideoPanelPreviewProps = {
   mapData: any;
   resolution: [number, number];
   exportVideoWidth: number;
-  disableStaticMap: boolean;
+  disableBaseMap: boolean;
   deckProps?: DeckProps;
   viewState: MapViewState;
   adapter: DeckAdapter;
@@ -28,35 +29,50 @@ export type ExportVideoPanelPreviewProps = {
   saving: boolean;
   setViewState: (viewState: MapViewState) => void;
   durationMs: number;
-  staticMapProps?: StaticMapProps;
+  mapProps?: MapProps;
 };
 
 type ExportVideoPanelPreviewState = {
   memoDevicePixelRatio: number;
   mapStyle: string;
-  mapboxLayerIds?: string[];
-  glContext?: WebGLRenderingContext;
+  mapboxAccessToken?: string;
+  deckLayers: Layer[];
 };
 
+const DeckGLOverlay = forwardRef<Deck, MapboxOverlayProps>(
+  (props: MapboxOverlayProps, ref: ForwardedRef<Deck>) => {
+    // MapboxOverlay handles a variety of props differently than the Deck class.
+    // https://deck.gl/docs/api-reference/mapbox/mapbox-overlay#constructor
+    const deck = useControl<MapboxOverlay>(() => new MapboxOverlay({...props, interleaved: true}));
+
+    deck.setProps(props);
+
+    // @ts-expect-error private property
+    setRef(ref, deck._deck);
+    return null;
+  }
+);
+
 export class ExportVideoPanelPreview extends Component<
   ExportVideoPanelPreviewProps,
   ExportVideoPanelPreviewState
 > {
   mapRef: RefObject<MapRef>;
-  deckRef: RefObject<DeckGLRef>;
+  deckRef: RefObject<Deck>;
 
   constructor(props: ExportVideoPanelPreviewProps) {
     super(props);
     const mapStyle = this.props.mapData.mapStyle;
-    const mapStyleUrl = mapStyle.mapStyles[mapStyle.styleType].url;
+    const {url, accessToken} = mapStyle.mapStyles[mapStyle.styleType];
 
     this.mapRef = React.createRef<MapRef>();
-    this.deckRef = React.createRef<DeckGLRef>();
+    this.deckRef = React.createRef<Deck>();
 
     this.state = {
-      mapStyle: mapStyleUrl, // Unsure if mapStyle would ever change but allowing it just in case
-      glContext: undefined,
-      memoDevicePixelRatio: window.devicePixelRatio // memoize
+      mapStyle: url, // Unsure if mapStyle would ever change but allowing it just in case
+      mapboxAccessToken: accessToken,
+      memoDevicePixelRatio: 1,
+      deckLayers: []
     };
 
     this._onMapLoad = this._onMapLoad.bind(this);
@@ -73,32 +89,24 @@ export class ExportVideoPanelPreview extends Component<
   }
 
   componentWillUnmount() {
-    const {memoDevicePixelRatio} = this.state;
-    this._setDevicePixelRatio(memoDevicePixelRatio);
-
     if (this.mapRef.current) {
       const map = this.mapRef.current.getMap();
 
       // remove all rendering related handlers to prevent rendering after unmount
+      // @ts-ignore _listeners is private
       const listeners = [...map._listeners.render];
       listeners.forEach(listener => {
         map.off('render', listener);
       });
-
-      if (this.state.mapboxLayerIds) {
-        this.state.mapboxLayerIds.forEach(id => {
-          map.removeLayer(id);
-        });
-      }
     }
   }
 
   _resizeVideo() {
-    const {exportVideoWidth, resolution, disableStaticMap} = this.props;
+    const {exportVideoWidth, resolution, disableBaseMap} = this.props;
 
     this._setDevicePixelRatio(resolution[0] / exportVideoWidth);
 
-    if (disableStaticMap) {
+    if (disableBaseMap) {
       return;
     }
 
@@ -136,44 +144,29 @@ export class ExportVideoPanelPreview extends Component<
     return {height: exportVideoWidth / aspectRatio, width: exportVideoWidth};
   }
 
-  createLayers() {
+  createLayers(beforeId?: string) {
     const {deckProps, mapData, viewState} = this.props;
     // returns an arr of DeckGL layer objects
     if (deckProps && deckProps.layers) {
       return deckProps.layers;
     }
-    return createKeplerLayers(mapData, viewState);
+    return createKeplerLayers(mapData, viewState, beforeId);
   }
 
   _onAfterRender() {
     this.props.adapter.onAfterRender(() => {
       this.forceUpdate();
-    }, this.props.disableStaticMap || this.mapRef.current.getMap().areTilesLoaded());
+    }, this.props.disableBaseMap || this.mapRef.current.getMap().areTilesLoaded());
   }
 
   _onMapLoad() {
     // Adds mapbox layer to modal
     const map = this.mapRef.current.getMap();
-    const deck = this.deckRef.current.deck;
 
-    const keplerLayers = this.createLayers();
     const beforeId = this.props.mapboxLayerBeforeId;
+    const keplerLayers = this.createLayers(beforeId);
 
-    const mapboxLayerIds = [];
-
-    // If there aren't any layers, combine map and deck with a fake layer.
-    if (!keplerLayers.length) {
-      map.addLayer(new MapboxLayer({id: '%%blank-layer', deck}));
-      mapboxLayerIds.push('%%blank-layer');
-    }
-
-    for (let i = 0; i < keplerLayers.length; i++) {
-      // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
-      map.addLayer(new MapboxLayer({id: keplerLayers[i].id, deck}), beforeId);
-      mapboxLayerIds.push(keplerLayers[i].id);
-    }
-
-    this.setState({mapboxLayerIds});
+    this.setState({deckLayers: keplerLayers});
 
     map.on('render', this._onAfterRender);
   }
@@ -188,43 +181,45 @@ export class ExportVideoPanelPreview extends Component<
       durationMs,
       resolution,
       deckProps,
-      staticMapProps,
-      disableStaticMap
+      mapProps,
+      disableBaseMap
     } = this.props;
-    const {glContext, mapStyle} = this.state;
-    const deck = this.deckRef.current && this.deckRef.current.deck;
+    const {mapStyle, deckLayers, mapboxAccessToken} = this.state;
+    const deck = this.deckRef.current;
     const {width, height} = this._getContainer();
-
+    const doubleResolution = {width: resolution[0] * 2, height: resolution[1] * 2};
     return (
       <>
         <DeckCanvas id="deck-canvas" $width={width} $height={height}>
-          <DeckGL
-            ref={this.deckRef}
-            viewState={viewState}
-            id="hubblegl-overlay"
-            layers={this.createLayers()}
-            style={deckStyle}
-            controller={true}
-            glOptions={{stencil: true}}
-            onWebGLInitialized={gl => this.setState({glContext: gl})}
-            onViewStateChange={({viewState: vs}) => setViewState(vs as MapViewState)}
-            {...(disableStaticMap ? {onAfterRender: this._onAfterRender} : {})}
-            width={resolution[0]}
-            height={resolution[1]}
-            // onClick={visStateActions.onLayerClick}
-            {...adapter.getProps({deck, extraProps: deckProps})}
-          >
-            {disableStaticMap || !glContext ? null : (
-              <StaticMap
-                ref={this.mapRef}
-                mapStyle={mapStyle}
-                preventStyleDiffing={true}
-                gl={glContext}
-                onLoad={this._onMapLoad}
-                {...staticMapProps}
+          {disableBaseMap ? (
+            <DeckGL
+              ref={ref => setRef(this.deckRef, ref?.deck)}
+              {...adapter.getProps({deck, extraProps: {...deckProps, layers: deckLayers}})}
+              // {...doubleResolution}
+              {...this._getContainer()}
+              layers={deckLayers}
+            />
+          ) : (
+            <ReactMapGL
+              // style={doubleResolution}
+              ref={this.mapRef}
+              style={{width, height}}
+              antialias
+              {...mapProps}
+              {...viewState}
+              mapStyle={mapStyle}
+              mapboxAccessToken={mapboxAccessToken}
+              onLoad={this._onMapLoad}
+              onMove={e => setViewState(e.viewState)}
+              projection={{name: 'mercator'}}
+            >
+              <DeckGLOverlay
+                ref={this.deckRef}
+                glOptions={{stencil: true}}
+                {...adapter.getProps({deck, extraProps: {...deckProps, layers: deckLayers}})}
               />
-            )}
-          </DeckGL>
+            </ReactMapGL>
+          )}
         </DeckCanvas>
         {rendering && (
           <RenderingSpinner
diff --git a/modules/react/src/components/export-video/export-video-panel.tsx b/modules/react/src/components/export-video/export-video-panel.tsx
index a0e05307..cbf28691 100644
--- a/modules/react/src/components/export-video/export-video-panel.tsx
+++ b/modules/react/src/components/export-video/export-video-panel.tsx
@@ -56,8 +56,8 @@ const PanelBody = ({
   resolution,
   viewState,
   deckProps,
-  staticMapProps,
-  disableStaticMap,
+  mapProps,
+  disableBaseMap,
   mapboxLayerBeforeId,
   handlePreviewVideo,
   handleRenderVideo,
@@ -80,8 +80,8 @@ const PanelBody = ({
           saving={saving}
           durationMs={settings.durationMs}
           deckProps={deckProps}
-          staticMapProps={staticMapProps}
-          disableStaticMap={disableStaticMap}
+          mapProps={mapProps}
+          disableBaseMap={disableBaseMap}
           mapboxLayerBeforeId={mapboxLayerBeforeId}
         />
         <ExportVideoPanelSettings
@@ -140,8 +140,8 @@ const ExportVideoPanel = ({
   resolution,
   viewState,
   deckProps,
-  staticMapProps,
-  disableStaticMap
+  mapProps,
+  disableBaseMap
 }: ExportVideoPanelProps) => {
   return (
     <Panel $exportVideoWidth={exportVideoWidth} className="export-video-panel">
@@ -160,8 +160,8 @@ const ExportVideoPanel = ({
         resolution={resolution}
         viewState={viewState}
         deckProps={deckProps}
-        staticMapProps={staticMapProps}
-        disableStaticMap={disableStaticMap}
+        mapProps={mapProps}
+        disableBaseMap={disableBaseMap}
         mapboxLayerBeforeId={mapboxLayerBeforeId}
         handlePreviewVideo={handlePreviewVideo}
         handleRenderVideo={handleRenderVideo}
diff --git a/modules/react/src/components/export-video/set-ref.ts b/modules/react/src/components/export-video/set-ref.ts
new file mode 100644
index 00000000..342ec221
--- /dev/null
+++ b/modules/react/src/components/export-video/set-ref.ts
@@ -0,0 +1,11 @@
+import type {ForwardedRef} from 'react';
+
+// Helper for covering all of the typescript cases for setting a ref
+export function setRef<T>(ref: ForwardedRef<T>, value: T) {
+  if (!ref) return;
+  if (typeof ref === 'function') {
+    ref(value);
+  } else {
+    ref.current = value;
+  }
+}
diff --git a/modules/react/src/components/export-video/utils.ts b/modules/react/src/components/export-video/utils.ts
index f848dd7f..d8fde134 100644
--- a/modules/react/src/components/export-video/utils.ts
+++ b/modules/react/src/components/export-video/utils.ts
@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 import {point} from '@turf/helpers';
 import transformTranslate from '@turf/transform-translate';
-import {WebMercatorViewport} from '@deck.gl/core';
+import {WebMercatorViewport} from '@deck.gl/core'; // importing non-typed module since it's a peer dependency and node errors while testing
 import type {MapViewState} from '@deck.gl/core/typed';
 
 export function scaleToVideoExport(
diff --git a/modules/react/src/hooks.ts b/modules/react/src/hooks.ts
index 31b83b00..073a8662 100644
--- a/modules/react/src/hooks.ts
+++ b/modules/react/src/hooks.ts
@@ -7,7 +7,7 @@ import {DeckAdapter, DeckAnimation, DeckAnimationConstructor} from '@hubble.gl/c
 import {MapboxLayer} from '@deck.gl/mapbox/typed';
 import type {Layer, MapViewState} from '@deck.gl/core/typed';
 import type {DeckGLRef} from '@deck.gl/react/typed';
-import {MapRef} from 'react-map-gl';
+import type {MapRef} from 'react-map-gl';
 
 export function useNextFrame() {
   const [, updateState] = useState({});
@@ -60,10 +60,12 @@ export function useHubbleGl({
       const map = staticMapRef.current.getMap();
       // If there aren't any layers, combine map and deck with a fake layer.
       if (!layers.length) {
+        // @ts-expect-error maplibre and mapbox have different types
         map.addLayer(new MapboxLayer({id: '%%blank-layer', deck}));
       }
       for (let i = 0; i < layers.length; i++) {
         // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
+        // @ts-expect-error maplibre and mapbox have different types
         map.addLayer(new MapboxLayer({id: layers[i].id, deck}));
       }
       map.on('render', () => adapter.onAfterRender(nextFrame, map.areTilesLoaded()));
diff --git a/modules/react/src/kepler-layers.ts b/modules/react/src/kepler-layers.ts
index 13312c61..d43cd831 100644
--- a/modules/react/src/kepler-layers.ts
+++ b/modules/react/src/kepler-layers.ts
@@ -41,7 +41,13 @@ function _onLayerSetDomain(idx: number, colorDomain: any) {
   // });
 }
 
-function renderLayer(overlays: any, idx: number, map: any, viewState: MapViewState) {
+function renderLayer(
+  overlays: any,
+  idx: number,
+  map: any,
+  viewState: MapViewState,
+  beforeId?: string
+) {
   const {
     visState: {datasets, layers, layerData, hoverInfo, clicked, interactionConfig, animationConfig},
     mapState
@@ -68,11 +74,17 @@ function renderLayer(overlays: any, idx: number, map: any, viewState: MapViewSta
       animationConfig,
       objectHovered
     })
-    .map((deckLayer: Layer) => deckLayer.clone({pickable: false}));
+    .map((deckLayer: Layer) =>
+      deckLayer.clone({
+        pickable: false,
+        // @ts-expect-error MapboxOverlay layers are extended to include beforeId
+        beforeId
+      })
+    );
   return overlays.concat(layerOverlay || []);
 }
 
-export function createKeplerLayers(map: any, viewState: MapViewState) {
+export function createKeplerLayers(map: any, viewState: MapViewState, beforeId?: string) {
   const layersToRender = layersToRenderSelector(map);
   // returns an arr of DeckGL layer objects
   const {layerOrder, layerData, layers} = map.visState;
@@ -81,9 +93,12 @@ export function createKeplerLayers(map: any, viewState: MapViewState) {
       .slice()
       .reverse()
       .filter(
-        (idx: number) => layers[idx].overlayType === 'deckgl' && layersToRender[layers[idx].id]
+        (_, idx: number) => layers[idx].overlayType === 'deckgl' && layersToRender[layers[idx].id]
       )
-      .reduce((overlays: any, idx: number) => renderLayer(overlays, idx, map, viewState), []); // Slicing & reversing to create same layer order as Kepler
+      .reduce(
+        (overlays: any, _, idx: number) => renderLayer(overlays, idx, map, viewState, beforeId),
+        []
+      ); // Slicing & reversing to create same layer order as Kepler
   }
   return [];
 }
diff --git a/package.json b/package.json
index da8d0af4..3cfebc23 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   ],
   "devDependencies": {
     "@loaders.gl/polyfills": "^4.2.0",
+    "@luma.gl/experimental": "^8.5.0",
     "@probe.gl/bench": "^3.5.0",
     "@probe.gl/test-utils": "^3.5.0",
     "coveralls": "^3.0.0",
@@ -57,10 +58,12 @@
     "tape-catch": "^1.0.6"
   },
   "resolutions_comments": [
-    "@loaders.gl/video: https://github.com/visgl/loaders.gl/issues/2164"
+    "@loaders.gl/video: https://github.com/visgl/loaders.gl/issues/2164",
+    "@luma.gl/experimental: must include in devDeps for local dev examples"
   ],
   "resolutions": {
-    "@loaders.gl/video": "3.0.12"
+    "@loaders.gl/video": "3.0.12",
+    "@luma.gl/experimental": "8.5.21"
   },
   "volta": {
     "node": "18.20.5",
diff --git a/yarn.lock b/yarn.lock
index dfbede05..b7ea736a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1538,12 +1538,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:1.2.2":
-  version: 1.2.2
-  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+"@emotion/is-prop-valid@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@emotion/is-prop-valid@npm:1.2.1"
   dependencies:
     "@emotion/memoize": "npm:^0.8.1"
-  checksum: 10c0/bb1530dcb4e0e5a4fabb219279f2d0bc35796baf66f6241f98b0d03db1985c890a8cafbea268e0edefd5eeda143dbd5c09a54b5fba74cee8c69b98b13194af50
+  checksum: 10c0/7c2aabdf0ca9986ca25abc9dae711348308cf18d418d64ffa4c8ffd2114806c47f2e06ba8ee769f38ec67d65bd59ec73f34d94023e81baa1c43510ac86ccd5e6
   languageName: node
   linkType: hard
 
@@ -1554,10 +1554,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/unitless@npm:0.8.1"
-  checksum: 10c0/a1ed508628288f40bfe6dd17d431ed899c067a899fa293a13afe3aed1d70fac0412b8a215fafab0b42829360db687fecd763e5f01a64ddc4a4b58ec3112ff548
+"@emotion/unitless@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/unitless@npm:0.8.0"
+  checksum: 10c0/1f2cfb7c0ccb83c20b1c6d8d92a74a93da4b2a440f9a0d49ded08647faf299065a2ffde17e1335920fa10397b85f8635bbfe14f3cd29222a59ea81d978478072
   languageName: node
   linkType: hard
 
@@ -1977,25 +1977,25 @@ __metadata:
     lodash.get: "npm:^4.4.2"
     lodash.isequal: "npm:^4.5.0"
     lodash.uniqby: "npm:^4.7.0"
+    mapbox-gl: "npm:1.13.1"
     popmotion: "npm:9.3.1"
     prop-types: "npm:^15.7.2"
     react: "npm:^18.3.0"
     react-dom: "npm:^18.3.0"
     react-lifecycles-compat: "npm:^3.0.4"
-    react-map-gl: "npm:^5.2.10"
+    react-map-gl: "npm:^7.1.8"
     react-modal: "npm:^3.8.1"
     react-onclickoutside: "npm:^6.9.0"
     reselect: "npm:^3.0.0"
-    styled-components: "npm:^6.1.11"
+    styled-components: "npm:6.1.8"
   peerDependencies:
     "@deck.gl/core": ">=8.3"
     "@deck.gl/mapbox": ">=8.3"
     "@deck.gl/react": ">=8.3"
-    "@hubble.gl/core": ^1.3.0
+    "@hubble.gl/core": ^1.4.0
     "@loaders.gl/core": ^3.0.0
-    mapbox-gl: <=2.4.1
-    react: ">=16.3.0"
-    react-dom: ">=16.3.0"
+    react: ">=18.2"
+    react-dom: ">=18.2"
   languageName: unknown
   linkType: soft
 
@@ -2454,6 +2454,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@luma.gl/experimental@npm:8.5.21":
+  version: 8.5.21
+  resolution: "@luma.gl/experimental@npm:8.5.21"
+  dependencies:
+    "@luma.gl/constants": "npm:8.5.21"
+    "@math.gl/core": "npm:^3.5.0"
+    earcut: "npm:^2.0.6"
+  peerDependencies:
+    "@loaders.gl/gltf": ^3.0.0
+    "@loaders.gl/images": ^3.0.0
+    "@luma.gl/engine": ^8.4.0
+    "@luma.gl/gltools": ^8.4.0
+    "@luma.gl/shadertools": ^8.4.0
+    "@luma.gl/webgl": ^8.4.0
+  checksum: 10c0/ed65e12b71fbabca9dccaf237b5d185eb7303491a92a9b8c438f9f8d1d551fe8ac615503bb86fd46c8d2244e9a7fc0b57e4c6254622f3d537d33c4ae329fe6a3
+  languageName: node
+  linkType: hard
+
 "@luma.gl/gltools@npm:8.5.21":
   version: 8.5.21
   resolution: "@luma.gl/gltools@npm:8.5.21"
@@ -2509,7 +2527,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/jsonlint-lines-primitives@npm:^2.0.2":
+"@mapbox/jsonlint-lines-primitives@npm:^2.0.2, @mapbox/jsonlint-lines-primitives@npm:~2.0.2":
   version: 2.0.2
   resolution: "@mapbox/jsonlint-lines-primitives@npm:2.0.2"
   checksum: 10c0/5814e42fc453700132f93ea742aabcef9a3c98d9bf17d4c1106f82d1dcd91bbc93052e66e29014323b9b2a41b020c743d897e4a96cc4ed2f734482d587d8c2b2
@@ -2546,6 +2564,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mapbox/unitbezier@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@mapbox/unitbezier@npm:0.0.1"
+  checksum: 10c0/97f39d4fbdf9579d0a1a8be0d536eb113a805d36459e774014f488a7ca6cc9dcfc77ab7a2ebe5af395ad50da6efb4dbf2566de0db3f62b6b8675cddbace8f86a
+  languageName: node
+  linkType: hard
+
 "@mapbox/vector-tile@npm:^1.3.1":
   version: 1.3.1
   resolution: "@mapbox/vector-tile@npm:1.3.1"
@@ -2562,6 +2587,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@maplibre/maplibre-gl-style-spec@npm:^19.2.1":
+  version: 19.3.3
+  resolution: "@maplibre/maplibre-gl-style-spec@npm:19.3.3"
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives": "npm:~2.0.2"
+    "@mapbox/unitbezier": "npm:^0.0.1"
+    json-stringify-pretty-compact: "npm:^3.0.0"
+    minimist: "npm:^1.2.8"
+    rw: "npm:^1.3.3"
+    sort-object: "npm:^3.0.3"
+  bin:
+    gl-style-format: dist/gl-style-format.mjs
+    gl-style-migrate: dist/gl-style-migrate.mjs
+    gl-style-validate: dist/gl-style-validate.mjs
+  checksum: 10c0/ef315bf9c4e5ebce0d76a7722e53c3e4192b92ea405c95392f61655f551a112bbc17fd00c7c62a16eeb57cdb79a2145e385c4eaf2ca7f50222d2540c9e7e0a7a
+  languageName: node
+  linkType: hard
+
 "@math.gl/core@npm:3.6.3, @math.gl/core@npm:^3.6.2":
   version: 3.6.3
   resolution: "@math.gl/core@npm:3.6.3"
@@ -2607,7 +2650,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@math.gl/web-mercator@npm:^3.5.5, @math.gl/web-mercator@npm:^3.6.2":
+"@math.gl/web-mercator@npm:^3.6.2":
   version: 3.6.2
   resolution: "@math.gl/web-mercator@npm:3.6.2"
   dependencies:
@@ -3415,12 +3458,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox-gl@npm:^2.0.3":
-  version: 2.7.5
-  resolution: "@types/mapbox-gl@npm:2.7.5"
+"@types/mapbox-gl@npm:>=1.0.0":
+  version: 3.4.1
+  resolution: "@types/mapbox-gl@npm:3.4.1"
   dependencies:
     "@types/geojson": "npm:*"
-  checksum: 10c0/96a5e14877db1b71db3d54354c0b8fab12633556ba5ef1fcdf69c6a46f65b4343b4ae307d211d338cdde944b927ba1944ae59ffc23c0e60b8e8127001a135e3f
+  checksum: 10c0/475f48063a39cc791a0efa099f4a62b84df56a52e1d111e32d11930fcee8e281f20b157f4069ff0ff4d5e13889ce9b452ca4a57e5c27c6d70a32fb3f5a184e72
   languageName: node
   linkType: hard
 
@@ -3537,10 +3580,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stylis@npm:4.2.5":
-  version: 4.2.5
-  resolution: "@types/stylis@npm:4.2.5"
-  checksum: 10c0/23f5b35a3a04f6bb31a29d404fa1bc8e0035fcaff2356b4047743a057e0c37b2eba7efe14d57dd2b95b398cea3bac294d9c6cd93ed307d8c0b7f5d282224b469
+"@types/stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@types/stylis@npm:4.2.0"
+  checksum: 10c0/c76c13e76ca485f598a13984cfb5e07bb88a851da5bee213587424a5f101f182c74f4f92d633cebf9abcec40ccebb645d600d184b7e4b42793e3eeca8729b110
   languageName: node
   linkType: hard
 
@@ -3999,6 +4042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arr-union@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "arr-union@npm:3.1.0"
+  checksum: 10c0/7d5aa05894e54aa93c77c5726c1dd5d8e8d3afe4f77983c0aa8a14a8a5cbe8b18f0cf4ecaa4ac8c908ef5f744d2cbbdaa83fd6e96724d15fea56cfa7f5efdd51
+  languageName: node
+  linkType: hard
+
 "array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
@@ -4153,6 +4203,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assign-symbols@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "assign-symbols@npm:1.0.0"
+  checksum: 10c0/29a654b8a6da6889a190d0d0efef4b1bfb5948fa06cbc245054aef05139f889f2f7c75b989917e3fde853fc4093b88048e4de8578a73a76f113d41bfd66e5775
+  languageName: node
+  linkType: hard
+
 "ast-types-flow@npm:^0.0.7":
   version: 0.0.7
   resolution: "ast-types-flow@npm:0.0.7"
@@ -4428,6 +4485,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bytewise-core@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "bytewise-core@npm:1.2.3"
+  dependencies:
+    typewise-core: "npm:^1.2"
+  checksum: 10c0/210239f3048de9463b4ab02968bd0ef7b3c9b330c0329f9df1851fee0819e19fbb0eca8cc235947112dcce942ed58541283ddaefe29515c93a2b7e0820be3f2d
+  languageName: node
+  linkType: hard
+
+"bytewise@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "bytewise@npm:1.1.0"
+  dependencies:
+    bytewise-core: "npm:^1.2.2"
+    typewise: "npm:^1.0.3"
+  checksum: 10c0/bcf994a8b635390dce43b22e97201cc0e3df0089ada4e77cc0bb48ce241efd0c27ca24a9400828cdd288a69a961da0b60c05bf7381b6cb529f048ab22092cc6d
+  languageName: node
+  linkType: hard
+
 "c8@npm:^7.12.0":
   version: 7.14.0
   resolution: "c8@npm:7.14.0"
@@ -5144,7 +5220,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:3.1.3, csstype@npm:^3.0.2":
+"csstype@npm:3.1.2":
+  version: 3.1.2
+  resolution: "csstype@npm:3.1.2"
+  checksum: 10c0/32c038af259897c807ac738d9eab16b3d86747c72b09d5c740978e06f067f9b7b1737e1b75e407c7ab1fe1543dc95f20e202b4786aeb1b8d3bdf5d5ce655e6c6
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -5516,7 +5599,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"earcut@npm:^2.2.2":
+"earcut@npm:^2.0.6, earcut@npm:^2.2.2":
   version: 2.2.4
   resolution: "earcut@npm:2.2.4"
   checksum: 10c0/01ca51830edd2787819f904ae580087d37351f6048b4565e7add4b3da8a86b7bc19262ab2aa7fdc64129ab03af2d9cec8cccee4d230c82275f97ef285c79aafb
@@ -6338,6 +6421,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"extend-shallow@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "extend-shallow@npm:2.0.1"
+  dependencies:
+    is-extendable: "npm:^0.1.0"
+  checksum: 10c0/ee1cb0a18c9faddb42d791b2d64867bd6cfd0f3affb711782eb6e894dd193e2934a7f529426aac7c8ddb31ac5d38000a00aa2caf08aa3dfc3e1c8ff6ba340bd9
+  languageName: node
+  linkType: hard
+
+"extend-shallow@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "extend-shallow@npm:3.0.2"
+  dependencies:
+    assign-symbols: "npm:^1.0.0"
+    is-extendable: "npm:^1.0.1"
+  checksum: 10c0/f39581b8f98e3ad94995e33214fff725b0297cf09f2725b6f624551cfb71e0764accfd0af80becc0182af5014d2a57b31b85ec999f9eb8a6c45af81752feac9a
+  languageName: node
+  linkType: hard
+
 "extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
@@ -6895,6 +6997,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-value@npm:^2.0.2, get-value@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "get-value@npm:2.0.6"
+  checksum: 10c0/f069c132791b357c8fc4adfe9e2929b0a2c6e95f98ca7bc6fcbc27f8a302e552f86b4ae61ec56d9e9ac2544b93b6a39743d479866a37b43fcc104088ba74f0d9
+  languageName: node
+  linkType: hard
+
 "getpass@npm:^0.1.1":
   version: 0.1.7
   resolution: "getpass@npm:0.1.7"
@@ -7453,6 +7562,7 @@ __metadata:
   resolution: "hubble.gl-monorepo@workspace:."
   dependencies:
     "@loaders.gl/polyfills": "npm:^4.2.0"
+    "@luma.gl/experimental": "npm:^8.5.0"
     "@probe.gl/bench": "npm:^3.5.0"
     "@probe.gl/test-utils": "npm:^3.5.0"
     coveralls: "npm:^3.0.0"
@@ -7855,6 +7965,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "is-extendable@npm:0.1.1"
+  checksum: 10c0/dd5ca3994a28e1740d1e25192e66eed128e0b2ff161a7ea348e87ae4f616554b486854de423877a2a2c171d5f7cd6e8093b91f54533bc88a59ee1c9838c43879
+  languageName: node
+  linkType: hard
+
+"is-extendable@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-extendable@npm:1.0.1"
+  dependencies:
+    is-plain-object: "npm:^2.0.4"
+  checksum: 10c0/1d6678a5be1563db6ecb121331c819c38059703f0179f52aa80c242c223ee9c6b66470286636c0e63d7163e4d905c0a7d82a096e0b5eaeabb51b9f8d0af0d73f
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -7957,7 +8083,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^2.0.4":
+"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
   dependencies:
@@ -8386,6 +8512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-stringify-pretty-compact@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "json-stringify-pretty-compact@npm:3.0.0"
+  checksum: 10c0/fc522c25047bd96d72ded77af4002e7f12e9ba9f4b7e7e12a9316aee166f1b8f9c7b0d0d989a8494e3fdd804a23819f411479f68f2ef10b2f7a144581b2c68f4
+  languageName: node
+  linkType: hard
+
 "json-stringify-safe@npm:^5.0.1, json-stringify-safe@npm:~5.0.1":
   version: 5.0.1
   resolution: "json-stringify-safe@npm:5.0.1"
@@ -8927,9 +9060,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mapbox-gl@npm:^1.0.0":
-  version: 1.13.2
-  resolution: "mapbox-gl@npm:1.13.2"
+"mapbox-gl@npm:1.13.1":
+  version: 1.13.1
+  resolution: "mapbox-gl@npm:1.13.1"
   dependencies:
     "@mapbox/geojson-rewind": "npm:^0.5.0"
     "@mapbox/geojson-types": "npm:^1.0.2"
@@ -8954,7 +9087,7 @@ __metadata:
     supercluster: "npm:^7.1.0"
     tinyqueue: "npm:^2.0.3"
     vt-pbf: "npm:^3.1.1"
-  checksum: 10c0/4924ec3838c0d0d740a1ec380a5ed65ffea59f41f54dde1fda5eb696ee2b497ba163588f3ce87357c62b5960f0a2ef5cbd6ea5e83806b4080b1f03a5dd959d74
+  checksum: 10c0/d507b1ce27fe77ed68250096a60a929ea4149fcab3f7037f60a7b73709391a6f78413aa4e98fd2f5e37388cb1a040b5cc15cbf8b164fdb65d98362ba726523d6
   languageName: node
   linkType: hard
 
@@ -9284,7 +9417,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mjolnir.js@npm:^2.5.0, mjolnir.js@npm:^2.7.0":
+"mjolnir.js@npm:^2.7.0":
   version: 2.7.1
   resolution: "mjolnir.js@npm:2.7.1"
   dependencies:
@@ -9379,6 +9512,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.6":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -10483,14 +10625,14 @@ __metadata:
   linkType: hard
 
 "pbf@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "pbf@npm:3.2.1"
+  version: 3.3.0
+  resolution: "pbf@npm:3.3.0"
   dependencies:
     ieee754: "npm:^1.1.12"
     resolve-protobuf-schema: "npm:^2.1.0"
   bin:
     pbf: bin/pbf
-  checksum: 10c0/63b4a27749a9b5a3cf4260d75f9d91ad8d8b326bcdd2bfafd9460a94d0a297a80f80c70d5481213d6c4ebf03c027aca0ac9287c7d8217d327a6d0456f23b9d3c
+  checksum: 10c0/79e5dc59a9391789de84b0a6d713fad0dd1e5ce6eb721536af8c9ec49feae04fdebab9f077b760bba858e615a95ac714a7d248ecb43736e904bb8396885e16d6
   languageName: node
   linkType: hard
 
@@ -10617,7 +10759,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.38, postcss@npm:^8.4.27":
+"postcss@npm:8.4.31":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
+  dependencies:
+    nanoid: "npm:^3.3.6"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.27":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -10953,21 +11106,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-map-gl@npm:^5.2.10":
-  version: 5.3.19
-  resolution: "react-map-gl@npm:5.3.19"
+"react-map-gl@npm:^7.1.8":
+  version: 7.1.8
+  resolution: "react-map-gl@npm:7.1.8"
   dependencies:
-    "@babel/runtime": "npm:^7.0.0"
-    "@types/geojson": "npm:^7946.0.7"
-    "@types/mapbox-gl": "npm:^2.0.3"
-    mapbox-gl: "npm:^1.0.0"
-    mjolnir.js: "npm:^2.5.0"
-    prop-types: "npm:^15.7.2"
-    resize-observer-polyfill: "npm:^1.5.1"
-    viewport-mercator-project: "npm:^7.0.4"
+    "@maplibre/maplibre-gl-style-spec": "npm:^19.2.1"
+    "@types/mapbox-gl": "npm:>=1.0.0"
   peerDependencies:
+    mapbox-gl: ">=1.13.0"
+    maplibre-gl: ">=1.13.0"
     react: ">=16.3.0"
-  checksum: 10c0/2c8e1a16489065c563c98cabcea876c1f09c3054b8c0f5f7f376ec5f13e7bd3fd6299a3a4b5a6a1d1c41ca8626d873137d02631d863abd29fdbd753428b0b3a9
+    react-dom: ">=16.3.0"
+  peerDependenciesMeta:
+    mapbox-gl:
+      optional: true
+    maplibre-gl:
+      optional: true
+  checksum: 10c0/0b97bb4d15ee567c8b1d540c50523d508a6ec52d399049865a937e451da677ea445bea86a0d2512d49d35d0d92c783f9818743742faab3927b8e84fd3f150412
   languageName: node
   linkType: hard
 
@@ -11335,13 +11490,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "resize-observer-polyfill@npm:1.5.1"
-  checksum: 10c0/5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
-  languageName: node
-  linkType: hard
-
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -11741,6 +11889,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-value@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "set-value@npm:2.0.1"
+  dependencies:
+    extend-shallow: "npm:^2.0.1"
+    is-extendable: "npm:^0.1.1"
+    is-plain-object: "npm:^2.0.3"
+    split-string: "npm:^3.0.1"
+  checksum: 10c0/4c40573c4f6540456e4b38b95f570272c4cfbe1d12890ad4057886da8535047cd772dfadf5b58e2e87aa244dfb4c57e3586f6716b976fc47c5144b6b09e1811b
+  languageName: node
+  linkType: hard
+
 "setimmediate@npm:^1.0.5":
   version: 1.0.5
   resolution: "setimmediate@npm:1.0.5"
@@ -11903,6 +12063,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sort-asc@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "sort-asc@npm:0.2.0"
+  checksum: 10c0/637d08a3f42d9b20ad489fa50970cc46ff606764ecfc95f00e607151d38a4b9086b74366ef99177783ff2da75ad821dff5d76557caa7206e5b3082e1e743e7cf
+  languageName: node
+  linkType: hard
+
+"sort-desc@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "sort-desc@npm:0.2.0"
+  checksum: 10c0/d9b49e49c8aa1d443ace95a86845f7ad9c9aeb9bb231f43adf7af22109bbd05b11983497f7c449d88ee6c499f43cf0591cde59975f5321c7883c6a395dce8482
+  languageName: node
+  linkType: hard
+
 "sort-keys@npm:^2.0.0":
   version: 2.0.0
   resolution: "sort-keys@npm:2.0.0"
@@ -11912,6 +12086,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sort-object@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "sort-object@npm:3.0.3"
+  dependencies:
+    bytewise: "npm:^1.1.0"
+    get-value: "npm:^2.0.2"
+    is-extendable: "npm:^0.1.1"
+    sort-asc: "npm:^0.2.0"
+    sort-desc: "npm:^0.2.0"
+    union-value: "npm:^1.0.1"
+  checksum: 10c0/b19518e3659875d0997bfb6e4a2bc681a71b3cc30a39b7ab673fcb5c32e65b2c9d4b66eba6c97c29c78b5fc437306ec0e0a85a381565d54eff8716388535db5d
+  languageName: node
+  linkType: hard
+
+"source-map-js@npm:^1.0.2":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
@@ -11977,6 +12172,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"split-string@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "split-string@npm:3.1.0"
+  dependencies:
+    extend-shallow: "npm:^3.0.0"
+  checksum: 10c0/72d7cd625445c7af215130e1e2bc183013bb9dd48a074eda1d35741e2b0dcb355e6df5b5558a62543a24dcec37dd1d6eb7a6228ff510d3c9de0f3dc1d1da8a70
+  languageName: node
+  linkType: hard
+
 "split2@npm:^3.2.2":
   version: 3.2.2
   resolution: "split2@npm:3.2.2"
@@ -12286,30 +12490,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6.1.11":
-  version: 6.1.11
-  resolution: "styled-components@npm:6.1.11"
+"styled-components@npm:6.1.8":
+  version: 6.1.8
+  resolution: "styled-components@npm:6.1.8"
   dependencies:
-    "@emotion/is-prop-valid": "npm:1.2.2"
-    "@emotion/unitless": "npm:0.8.1"
-    "@types/stylis": "npm:4.2.5"
+    "@emotion/is-prop-valid": "npm:1.2.1"
+    "@emotion/unitless": "npm:0.8.0"
+    "@types/stylis": "npm:4.2.0"
     css-to-react-native: "npm:3.2.0"
-    csstype: "npm:3.1.3"
-    postcss: "npm:8.4.38"
+    csstype: "npm:3.1.2"
+    postcss: "npm:8.4.31"
     shallowequal: "npm:1.1.0"
-    stylis: "npm:4.3.2"
-    tslib: "npm:2.6.2"
+    stylis: "npm:4.3.1"
+    tslib: "npm:2.5.0"
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-  checksum: 10c0/1d149a51d24f779bba700c8c23ec0538b2d2b57745ccd49d1cfdc2dfce8bcea21e8ff81fed1143d1b35d127cc591717a398da72ea6671abbf705432b13e59e56
+  checksum: 10c0/fafe4b9198d5d7980c2358821d1a89f86200d55c8eec03670cf12cf43b8a05a77eafaf0872cd85821f68238308e0f5c9d9aa43a62e6987c65b70baa2c3277ab8
   languageName: node
   linkType: hard
 
-"stylis@npm:4.3.2":
-  version: 4.3.2
-  resolution: "stylis@npm:4.3.2"
-  checksum: 10c0/0410e1404cbeee3388a9e17587875211ce2f014c8379af0d1e24ca55878867c9f1ccc7b0ce9a156ca53f5d6e301391a82b0645522a604674a378b3189a4a1994
+"stylis@npm:4.3.1":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: 10c0/33e8ebd2bfa5f0bd0215f718dc2d3be896e1d00c5bcaeb9a4ae03cf239db6867af9eee230f57229bf1c29499357073ba3e6b547484ba1db2f5de1e8be7d4eee9
   languageName: node
   linkType: hard
 
@@ -12721,10 +12925,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.6.2, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
+"tslib@npm:2.5.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: 10c0/e32fc99cc730dd514e53c44e668d76016e738f0bcc726aad5dbd2d335cf19b87a95a9b1e4f0a9993e370f1d702b5e471cdd4acabcac428a3099d496b9af2021e
   languageName: node
   linkType: hard
 
@@ -12735,6 +12939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
+  languageName: node
+  linkType: hard
+
 "tuf-js@npm:^1.1.7":
   version: 1.1.7
   resolution: "tuf-js@npm:1.1.7"
@@ -12903,6 +13114,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typewise-core@npm:^1.2, typewise-core@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "typewise-core@npm:1.2.0"
+  checksum: 10c0/0c574b036e430ef29a3c71dca1f88c041597734448db50e697ec4b7d03d71af4f8afeec556a2553f7db1cf98f9313b983071f0731d784108b2daf4f2e0c37d9e
+  languageName: node
+  linkType: hard
+
+"typewise@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typewise@npm:1.0.3"
+  dependencies:
+    typewise-core: "npm:^1.2.0"
+  checksum: 10c0/0e300a963cd344f9f4216343eb1c9714e1aee12c5b928ae3ff4a19b4b1edcd82356b8bd763905bd72528718a3c863612f8259cb047934b59bdd849f305e12e80
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.16.3
   resolution: "uglify-js@npm:3.16.3"
@@ -12965,6 +13192,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"union-value@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "union-value@npm:1.0.1"
+  dependencies:
+    arr-union: "npm:^3.1.0"
+    get-value: "npm:^2.0.6"
+    is-extendable: "npm:^0.1.1"
+    set-value: "npm:^2.0.1"
+  checksum: 10c0/8758d880cb9545f62ce9cfb9b791b2b7a206e0ff5cc4b9d7cd6581da2c6839837fbb45e639cf1fd8eef3cae08c0201b614b7c06dd9f5f70d9dbe7c5fe2fbf592
+  languageName: node
+  linkType: hard
+
 "uniq@npm:^1.0.0":
   version: 1.0.1
   resolution: "uniq@npm:1.0.1"
@@ -13142,15 +13381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"viewport-mercator-project@npm:^7.0.4":
-  version: 7.0.4
-  resolution: "viewport-mercator-project@npm:7.0.4"
-  dependencies:
-    "@math.gl/web-mercator": "npm:^3.5.5"
-  checksum: 10c0/9a8a12f4bd68355a8162a23d4b161133b45aee71b2453fd8d57f54c55466007428cf502d0c02f58620d4c92ba934c29608613bc3176dd8c1d348f8a9deb34e32
-  languageName: node
-  linkType: hard
-
 "vite@npm:^4.5.0":
   version: 4.5.3
   resolution: "vite@npm:4.5.3"
