@longline/aqua-ui 1.0.160 → 1.0.162

package/containers/Dock/Dockable.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { useViewState } from '../../map/Map';
 var DockableBase = function (props) {

package/controls/View/EllipsizedContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Is the View in `ghost` mode? */
+    ghost?: boolean;
+}
+declare const EllipsizedContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { EllipsizedContent };

package/controls/View/EllipsizedContent.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var EllipsizedContentBase = function (props) {
+    return React.createElement("div", { className: props.className }, !props.ghost && props.children);
+};
+var EllipsizedContent = styled(EllipsizedContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n\n  display: flex;\n  align-items: center;\n  height: 36px;\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n\n  display: flex;\n  align-items: center;\n  height: 36px;\n"])));
+export { EllipsizedContent };
+var templateObject_1;

package/controls/View/ScrollingContent.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Is this View in `ghost` mode? */
+    ghost?: boolean;
+    /** Height of the view, in pixels. */
+    height: number;
+}
+declare const ScrollingContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { ScrollingContent };

package/controls/View/ScrollingContent.js

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+var ScrollingContentBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(OverlayScrollbarsComponent, { defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
+                position: "absolute",
+                left: 0,
+                top: 8,
+                right: 0,
+                bottom: 0,
+                paddingBottom: "20px",
+                paddingRight: "16px",
+                overflowY: "auto",
+            } }, !props.ghost && props.children));
+};
+var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: calc(", "px - 44px);\n"], ["\n  position: relative;\n  height: calc(", "px - 44px);\n"])), function (p) { return p.height; });
+export { ScrollingContent };
+var templateObject_1;

package/controls/View/View.d.ts

@@ -11,6 +11,20 @@ interface IProps {
      * `View` label, e.g. `Email address`. Can be JSX.
      */
     label?: React.ReactNode;
+    /**
+     * Optional hint. Can be JSX.
+     */
+    hint?: React.ReactNode;
+    /**
+     * If set, hint area will not have a background color.
+     */
+    noHintBg?: boolean;
+    /**
+     * By default, content is ellipsized to one line. If `height` is set,
+     * content is allowed to grow, and a scrollbar is added. Height is in
+     * pixels.
+     */
+    height?: number;
     /**
      * Views may provide their weight in relative units to other Views,
      * for flexbox alignment, e.g. `2`.

package/controls/View/View.js

@@ -27,13 +27,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Label } from '../../containers/Form/elements/Label';
+import { ScrollingContent } from './ScrollingContent';
+import { EllipsizedContent } from './EllipsizedContent';
 var ViewBase = function (props) {
     return (React.createElement("div", { className: props.className },
         React.createElement(Label, null, props.label),
-        React.createElement(Content, null, !props.ghost && props.children)));
+        React.createElement(Content, null, props.height
+            ? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height, children: props.children })
+            : React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
+        props.hint && React.createElement(HintContent, null, props.hint)));
 };
-var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
-var ViewStyled = styled(ViewBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  overflow: hidden;\n\n  // Hint/error background:\n  &:before {\n    z-index: -1;\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    height: 22px;\n    background-color: rgb(from ", " r g b / 30%);\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  overflow: hidden;\n\n  // Hint/error background:\n  &:before {\n    z-index: -1;\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    height: 22px;\n    background-color: rgb(from ", " r g b / 30%);\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"
+var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-height: 36px;\n  margin-top: 22px;\n  margin-bottom: 22px;\n"], ["\n  position: relative;\n  min-height: 36px;\n  margin-top: 22px;\n  margin-bottom: 22px;\n"])));
+var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
+var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  ", "\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  ", "\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"
     /**
      * A `View` is used to display static (read-only) data. A `View` has a label, and its
      * children are its value.
@@ -42,7 +48,7 @@ var ViewStyled = styled(ViewBase)(templateObject_4 || (templateObject_4 = __make
      * <View label="Email address">{email}</View>
      * ```
      */
-])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", "px;"], ["height: ", "px;"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
 /**
  * A `View` is used to display static (read-only) data. A `View` has a label, and its
  * children are its value.
@@ -56,4 +62,4 @@ var View = function (_a) {
     return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
 };
 export { View };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/map/Map/Map.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { MapMouseEvent, Map as OriginalMap } from 'mapbox-gl';
-import { ViewState } from 'react-map-gl';
-import { PaddingOptions } from 'react-map-gl/dist/esm/types';
+import { ViewState } from 'react-map-gl/mapbox';
 interface IProps {
     /** @ignore */
     children?: React.ReactNode;
@@ -42,7 +41,12 @@ interface IProps {
      * Initial padding.
      * @default 0,0,0,0
      */
-    padding?: PaddingOptions;
+    padding?: {
+        readonly top?: number;
+        readonly bottom?: number;
+        readonly right?: number;
+        readonly left?: number;
+    };
     /**
      * If set, water is clipped at given elevation.
      * A value of `1` generally works.

package/map/Map/Map.js

@@ -62,7 +62,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { useTheme } from "styled-components";
-import { Map as GLMap, Layer, Source } from 'react-map-gl';
+import { Map as GLMap, Layer, Source } from 'react-map-gl/mapbox';
 var ViewStateContext = React.createContext(null);
 var useViewState = function () {
     return React.useContext(ViewStateContext);

package/map/PositionsManager/PositionsManager.js

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { PositionBox } from './PositionBox';
 // Storage key for saving and restoring positions.
 var STORAGE_KEY = 'positions';

package/map/controls/CompassButton/CompassButton.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 /**
  * The `FullscreenButton` toggles the map full-screen when clicked.

package/map/controls/Geocoder/Geocoder.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { GeocoderApi } from './GeocoderApi';
 import { GeocoderEntry } from './GeocoderEntry';
 import { GeocoderList } from './GeocoderList';

package/map/controls/Graticule/Graticule.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Layer, Source, useMap } from 'react-map-gl';
+import { Layer, Source, useMap } from 'react-map-gl/mapbox';
 import { useViewState } from '../../Map';
 /**
  * The `Graticule` component draws a graticule over the map. The caller

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { Source, useMap } from 'react-map-gl';
+import { Source, useMap } from 'react-map-gl/mapbox';
 import { HtmlMarkerLayer } from '../HtmlMarkerLayer/HtmlMarkerLayer';
 import { ClusterMarker } from '../../markers/ClusterMarker';
 function uuidv4() {

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import { Marker } from 'mapbox-gl';
 /**
  * The `HtmlMarkerLayer` manages HTML markers on a map. HTML markers are far slower

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import { featureCollection, point } from '@turf/helpers';
 import { MercatorCoordinate } from 'mapbox-gl';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import tin from '@turf/tin';
 import { RgbColor } from '../../../helper/RgbColor';
 import { LevelsVertexShader } from './LevelsVertexShader';
@@ -239,11 +239,7 @@ var InterpolationLayerBase = function (props) {
         gl.viewport(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
         renderContours(gl, matrix, width, height);
     };
-    return (React.createElement(Layer
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 /**
  * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -33,7 +33,7 @@ import * as React from 'react';
 import { featureCollection, point } from '@turf/helpers';
 import tin from '@turf/tin';
 import { MercatorCoordinate } from 'mapbox-gl';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import { UVVertexShader } from './UVVertexShader';
 import { UVFragmentShader } from './UVFragmentShader';
 import { ParticlesFragmentShader } from './ParticlesFragmentShader';
@@ -328,11 +328,7 @@ var ParticlesLayerBase = function (props) {
         // Render particles:
         renderParticles(gl, matrix);
     };
-    return (React.createElement(Layer
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 var ParticlesLayer = function (_a) {
     var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.160",
+  "version": "1.0.162",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",
@@ -51,17 +51,17 @@
     "@turf/helpers": "^7.1.0",
     "@turf/tin": "^7.1.0",
     "@types/geojson": "^7946.0.14",
-    "@types/mapbox-gl": "^3.4.0",
+    "@types/mapbox-gl": "^3.4.1",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "awesome-debounce-promise": "^2.1.0",
     "date-fns": "^4.1.0",
     "gl-matrix": "^3.4.3",
-    "mapbox-gl": "^3.7.0",
+    "mapbox-gl": "^3.9.4",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.26.2",
     "react-transition-state": "^2.2.0",