@opengeoweb/core 4.0.0 → 4.1.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('react-window'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', 'react-window', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.reactWindow, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, reactWindow, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('react-window'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'react-window', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.reactWindow, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, reactWindow, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,9 +29,6 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
-    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
-    var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
@@ -4693,7 +4690,7 @@
         ids: []
       };
     }).selectAll;
-    toolkit.createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+    var getFirstSnackbarMessage = toolkit.createSelector(getCurrentSnackbarMessages, function (currentMessages) {
       return currentMessages.length > 0 ? currentMessages[0] : undefined;
     });
 
@@ -7172,47 +7169,11 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var defaultCanvasWidth = 150;
-    var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
-
-    var useStyles$r = makeStyles__default["default"](function (theme) {
-      return {
-        legendCanvas: {
-          margin: '10px 0px 10px 0px'
-        },
-        noLegendTitle: {
-          fontSize: '12px',
-          fontFamily: 'Roboto, Helvetica, Arial',
-          color: 'red'
-        },
-        legendComponent: {
-          padding: 10,
-          border: '1px solid grey',
-          display: 'inline-block',
-          backgroundColor: '#FFF',
-          overflow: 'hidden',
-          marginBottom: 4
-        },
-        legendTitle: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: '10px',
-          minWidth: defaultCanvasWidth,
-          wordWrap: 'break-word',
-          color: theme.palette.common.black
-        },
-        legendInfo: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: 10,
-          color: theme.palette.common.black,
-          overflowX: 'hidden',
-          minWidth: defaultCanvasWidth,
-          wordWrap: 'break-word'
-        }
-      };
-    });
+    var defaultCanvasHeight = 30;
     /**
      * Renders a legendgraphic image based on a WMImage.
      *
@@ -7246,7 +7207,6 @@
 
     var Legend = function Legend(_a) {
       var layer = _a.layer;
-      var classes = useStyles$r();
       /* Variable to remember the previous image */
 
       var previousLegendImage = React.useRef(null);
@@ -7292,23 +7252,36 @@
       var wmLayer = getWMLayerById(layer.id);
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
         "data-testid": "legend",
-        className: classes.legendComponent
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        sx: {
+          padding: '10px',
+          border: '1px solid grey',
+          display: 'inline-block',
+          backgroundColor: '#FFF',
+          overflow: 'hidden',
+          marginBottom: 0.5
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         "data-testid": "legend-title",
         style: {
           maxWidth: canvasContainerWidth
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        className: classes.legendTitle,
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: '10px',
+          minWidth: defaultCanvasWidth + "px",
+          wordWrap: 'break-word',
+          color: 'common.black'
+        },
         variant: "h3"
       }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: wmLayer && wmLayer.title || 'loading',
         placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.legendCanvas,
-        style: {
-          height: canvasContainerHeight,
-          width: canvasContainerWidth
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          margin: '10px 0px 10px 0px',
+          height: canvasContainerHeight + "px",
+          width: canvasContainerWidth + "px"
         }
       }, /*#__PURE__*/React__default["default"].createElement(CanvasComponent, {
         redrawInterval: 500,
@@ -7365,16 +7338,21 @@
             renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
           }
         }
-      }))), /*#__PURE__*/React__default["default"].createElement("div", {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         "data-testid": "legend-info",
-        className: classes.legendInfo,
-        style: {
-          maxWidth: canvasContainerWidth
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: 10,
+          color: 'common.black',
+          overflowX: 'hidden',
+          minWidth: defaultCanvasWidth + "px",
+          wordWrap: 'break-word',
+          maxWidth: canvasContainerWidth + "px"
         }
       }, layer.dimensions && layer.dimensions.map(function (dim) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
           key: layer.name + dim.name
-        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
           style: {
             fontWeight: 500
           }
@@ -7395,23 +7373,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$q = makeStyles__default["default"](function () {
-      return {
-        legendList: {
-          display: 'flex',
-          flexDirection: 'column',
-          '&>div:last-child': {
-            marginBottom: 0
-          }
-        },
-        legendContainer: {
-          padding: 4
-        }
-      };
-    });
 
     var LegendDialog = function LegendDialog(_a) {
       var layers = _a.layers,
@@ -7426,7 +7390,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'app' : _e;
-      var classes = useStyles$q();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         startPosition: {
           right: 20,
@@ -7443,11 +7406,19 @@
         onMouseDown: onMouseDown,
         order: order,
         source: source
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.legendContainer
-      }, layers && layers.length > 0 ? /*#__PURE__*/React__namespace.createElement("div", {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: 0.5
+        }
+      }, layers && layers.length > 0 ? /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "LegendList",
-        className: classes.legendList
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          '&>div:last-child': {
+            marginBottom: 0
+          }
+        }
       }, layers.map(function (layer) {
         return /*#__PURE__*/React__namespace.createElement(Legend, {
           key: layer.id,
@@ -8714,7 +8685,7 @@
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            snackbarMessage = capturedAction.payload.snackbarContent.message;
+            snackbarMessage = capturedAction.payload.message;
             return [4
             /*yield*/
             , effects.select(getCurrentSnackbarMessages)];
@@ -9416,25 +9387,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$p = makeStyles__default["default"]({
-      buttonDiv: {
-        position: 'relative'
-      },
-      loadingButton: {
-        position: 'absolute',
-        top: 7,
-        left: 7,
-        zIndex: 1
-      },
-      button: {
-        width: '24px',
-        height: '24px',
-        margin: '6px 0px 0px 10px'
-      }
-    });
 
     var validateServiceUrl = function validateServiceUrl(url) {
       if (url === '' || url === null || typeof url === 'undefined') return false;
@@ -9452,7 +9407,6 @@
           handleClose = _a.handleClose,
           _d = _a.layerType,
           layerType = _d === void 0 ? LayerType.mapLayer : _d;
-      var classes = useStyles$p();
 
       var _e = __read(React__namespace.useState(''), 2),
           serviceURL = _e[0],
@@ -9569,7 +9523,9 @@
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: 2,
-        className: classes.buttonDiv
+        sx: {
+          position: 'relative'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "add-service",
         onClick: handleAddServiceURL,
@@ -9577,7 +9533,12 @@
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
         size: 35,
-        className: classes.loadingButton
+        sx: {
+          position: 'absolute',
+          top: '7px',
+          left: '7px',
+          zIndex: 1
+        }
       })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
         m: 2
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -9621,7 +9582,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$2 = {
+    var styles$4 = {
       buttonDiv: {
         position: 'relative'
       },
@@ -9682,7 +9643,7 @@
         onBlur: onBlurTooltip
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         onClick: handleClose,
-        sx: styles$2.button,
+        sx: styles$4.button,
         disableRipple: true,
         "data-testid": "addLayersButton",
         ref: ref,
@@ -9709,12 +9670,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var iconButtonSize = 30;
     var totalButtons = 5;
-    var LayerManagerColumnsLarge = makeStyles__default["default"]({
+    var LayerManagerColumnsLarge = {
       column1: {
         width: iconButtonSize * 3,
         display: 'flex'
@@ -9738,8 +9699,8 @@
       columns35: {
         width: "calc((100% - " + iconButtonSize * totalButtons + "px) * 0.75)"
       }
-    });
-    var LayerManagerColumnsSmall = makeStyles__default["default"]({
+    };
+    var LayerManagerColumnsSmall = {
       column1: {
         width: iconButtonSize * 3
       },
@@ -9762,7 +9723,7 @@
       columns35: {
         display: 'none'
       }
-    });
+    };
     var LayerManagerWidth;
 
     (function (LayerManagerWidth) {
@@ -9842,10 +9803,10 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$o = makeStyles__default["default"]({
+    var styles$3 = {
       row: {
         height: '32px'
       },
@@ -9856,7 +9817,7 @@
         fontFamily: 'Roboto',
         opacity: 0.67
       }
-    });
+    };
 
     var DescriptionRow = function DescriptionRow(_a) {
       var mapId = _a.mapId,
@@ -9869,16 +9830,15 @@
           layerManagerWidth = _a.layerManagerWidth,
           _e = _a.layerSelect,
           layerSelect = _e === void 0 ? false : _e;
-      var classes = useStyles$o();
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         "data-testid": "descriptionRow",
-        className: classes.row
+        sx: styles$3.row
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1
+        sx: columnSizes.column1
       }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
         preloadedServices: preloadedServices,
         tooltip: tooltip,
@@ -9893,23 +9853,23 @@
       }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
         mapId: mapId
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column2
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column2
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Layer")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column3
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column3
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Style")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column4
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column4
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Opacity")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column5
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column5
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column6
+        sx: columnSizes.column6
       }));
     };
 
@@ -10090,24 +10050,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$n = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        dropdownEmpty: {
-          paddingLeft: 8,
-          height: 32,
-          display: 'inline-flex',
-          alignItems: 'center'
-        },
-        emptyText: {
-          fontSize: theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize,
-          color: theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba,
-          fontWeight: 500
-        }
-      });
-    });
 
     var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
       var serviceLayer = layers.find(function (l) {
@@ -10145,14 +10090,22 @@
           layers = _c === void 0 ? [] : _c,
           _d = _a.isEnabled,
           isEnabled = _d === void 0 ? true : _d;
-      var classes = useStyles$n();
 
       if (!layers || !layers.length) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.dropdownEmpty
+        return /*#__PURE__*/React__namespace.createElement(material.Box, {
+          sx: {
+            paddingLeft: 1,
+            height: '32px',
+            display: 'inline-flex',
+            alignItems: 'center'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
           variant: "body1",
-          className: classes.emptyText
+          sx: {
+            fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+            color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
+            fontWeight: 500
+          }
         }, "No service available"));
       }
 
@@ -10224,37 +10177,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$m = makeStyles__default["default"](function (theme) {
-      return {
-        opacityDiv: {
-          height: 'calc(100% - 5px)',
-          width: '100%',
-          position: 'relative',
-          top: '2px'
-        },
-        opacityButton: {
-          height: '100%',
-          width: '100%',
-          borderRadius: '0',
-          minWidth: '49px'
-        },
-        sliderBackground: {
-          padding: '0 0 60px 0',
-          marginLeft: '60px',
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '82px',
-          height: '248px',
-          position: 'fixed',
-          top: '-5px',
-          boxSizing: 'initial',
-          zIndex: 2,
-          boxShadow: theme.shadows[8]
-        }
-      };
-    });
     var marks$1 = [{
       value: 0,
       label: '0 %'
@@ -10287,7 +10212,6 @@
           onLayerChangeOpacity = _a.onLayerChangeOpacity,
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? true : _b;
-      var classes = useStyles$m();
 
       var _c = __read(React__namespace.useState(false), 2),
           open = _c[0],
@@ -10330,10 +10254,15 @@
         setTooltipOpen(false);
       }, []);
       var currentOpacityText = Math.round(currentOpacity * 100) + "  %";
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.opacityDiv,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         onWheel: onWheel,
-        "data-testid": "scrollOpacity"
+        "data-testid": "scrollOpacity",
+        sx: {
+          height: 'calc(100% - 5px)',
+          width: '100%',
+          position: 'relative',
+          top: '2px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Opacity: " + currentOpacityText,
         sx: shared.tooltipContainerStyles(isEnabled),
@@ -10341,16 +10270,32 @@
         open: tooltipOpen
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         tabIndex: 0,
-        className: classes.opacityButton,
         onClick: onClickButton,
         "data-testid": "selectOpacity",
         disableRipple: true,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onFocus: onFocus,
-        onBlur: onBlur
-      }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
+        onBlur: onBlur,
+        style: {
+          height: '100%',
+          width: '100%',
+          borderRadius: '0',
+          minWidth: '49px'
+        }
+      }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 0 60px 0',
+          marginLeft: '60px',
+          backgroundColor: 'geowebColors.background.surface',
+          width: '82px',
+          height: '248px',
+          position: 'fixed',
+          top: '-5px',
+          boxSizing: 'initial',
+          zIndex: 2,
+          boxShadow: 8
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: shared.sliderHeaderStyle
       }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
@@ -10550,31 +10495,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$l = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        row: {
-          background: function background(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.fill : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.fill;
-          },
-          border: function border(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.border : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.border;
-          },
-          borderRadius: theme.shape.borderRadius,
-          marginBottom: 4,
-          height: 34,
-          '&.sortable-drag': {
-            boxShadow: theme.shadows[4] // elevation_06
-
-          },
-          '&.sortable-ghost': {
-            opacity: 0.5
-          }
-        }
-      });
-    });
 
     var LayerRow = function LayerRow(_a) {
       var layerId = _a.layerId,
@@ -10607,21 +10530,33 @@
           layerActiveLayout = _a.layerActiveLayout,
           layerManagerWidth = _a.layerManagerWidth,
           dragHandle = _a.dragHandle;
-      var classes = useStyles$l(isEnabled);
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
 
       var onClickRow = function onClickRow() {
         return onLayerRowClick(layerId);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        className: classes.row,
         item: true,
         container: true,
-        "data-testid": "layerRow-" + layerId
+        "data-testid": "layerRow-" + layerId,
+        sx: {
+          backgroundColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.fill' : 'geowebColors.layerManager.tableRowDisabledCardContainer.fill',
+          border: 1,
+          borderColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.borderColor' : 'geowebColors.layerManager.tableRowDisabledCardContainer.borderColor',
+          borderRadius: 1,
+          marginBottom: 0.5,
+          height: '34px',
+          '&.sortable-drag': {
+            boxShadow: 4
+          },
+          '&.sortable-ghost': {
+            opacity: 0.5
+          }
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1
+        sx: columnSizes.column1
       }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
         isEnabled: layer.enabled,
         title: layer.name,
@@ -10635,7 +10570,7 @@
         onClickActivate: onClickRow
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column2
+        sx: columnSizes.column2
       }, layerServicesLayout || /*#__PURE__*/React__default["default"].createElement(RenderLayers, {
         layerName: layer.name,
         layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
@@ -10647,13 +10582,13 @@
         }
       })), isLayerMissing ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.columns35
+        sx: columnSizes.columns35
       }, /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
         title: "This layer could not be loaded: does not exist on the server.",
         isCompact: true
       })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column3
+        sx: columnSizes.column3
       }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
         layerStyles: layer.styles,
         currentLayerStyle: layer.style,
@@ -10665,7 +10600,7 @@
         }
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column4
+        sx: columnSizes.column4
       }, layerOpacityLayout || /*#__PURE__*/React__default["default"].createElement(OpacitySelect, {
         currentOpacity: layer.opacity,
         onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
@@ -10676,7 +10611,7 @@
         }
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column5
+        sx: columnSizes.column5
       }, layerDimensionLayout || /*#__PURE__*/React__default["default"].createElement(DimensionSelect, {
         layerId: layerId,
         layerDimensions: filterNonTimeDimensions(layer.dimensions),
@@ -10694,7 +10629,7 @@
         }
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnSizes.column6
+        sx: columnSizes.column6
       }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
         tooltipTitle: "Delete",
         onClickDelete: function onClickDelete() {
@@ -11262,24 +11197,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$k = makeStyles__default["default"](function () {
-      return {
-        layerRows: {
-          width: '100%',
-          maxHeight: 'calc(100% - 10px)',
-          overflow: 'auto'
-        },
-        sortableRow: {
-          width: '100%',
-          cursor: function cursor(isSorting) {
-            return isSorting ? 'grabbing' : 'inherit';
-          }
-        }
-      };
-    });
 
     var LayerContainerRow = function LayerContainerRow(_a) {
       var mapId = _a.mapId,
@@ -11336,7 +11256,6 @@
 
       var isSorting = activeDragIndex !== null;
       var isDragDisabled = layerIds.length === 1;
-      var classes = useStyles$k(isSorting);
 
       var keyPressedTrue = function keyPressedTrue(event) {
         if (event.ctrlKey || event.metaKey) {
@@ -11376,8 +11295,12 @@
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
-        className: classes.layerRows,
-        "data-testid": "layerContainerRow"
+        "data-testid": "layerContainerRow",
+        sx: {
+          width: '100%',
+          maxHeight: 'calc(100% - 10px)',
+          overflow: 'auto'
+        }
       }, /*#__PURE__*/React__namespace.createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: layerIds.map(function (layerId) {
@@ -11392,9 +11315,12 @@
         direction: "vertical",
         // hover props
         forceFallback: true,
-        className: classes.sortableRow,
         onStart: onStart,
-        onEnd: onEnd
+        onEnd: onEnd,
+        style: {
+          width: '100%',
+          cursor: isSorting ? 'grabbing' : 'inherit'
+        }
       }, layerIds.map(function (layerId, index) {
         return /*#__PURE__*/React__namespace.createElement(LayerRowConnect, {
           mapId: mapId,
@@ -11596,22 +11522,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$j = makeStyles__default["default"]({
-      layerRow: {
-        width: '100%',
-        height: '36px'
-      },
-      icon: {
-        width: '24px',
-        height: '24px'
-      },
-      addBaseLayers: {
-        marginTop: '-2px'
-      }
-    });
 
     var BaseLayerRow = function BaseLayerRow(_a) {
       var mapId = _a.mapId,
@@ -11622,16 +11535,20 @@
           layerManagerWidth = _a.layerManagerWidth,
           _d = _a.tooltip,
           tooltip = _d === void 0 ? '' : _d;
-      var classes = useStyles$j();
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
-        className: classes.layerRow,
-        "data-testid": "baseLayerRow"
+        "data-testid": "baseLayerRow",
+        sx: {
+          width: '100%',
+          height: '36px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1 + " " + classes.addBaseLayers
+        sx: __assign(__assign({}, columnSizes.column1), {
+          marginTop: '-2px'
+        })
       }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
         preloadedServices: preloadedServices,
         tooltip: tooltip,
@@ -11644,7 +11561,7 @@
         }
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column2
+        sx: columnSizes.column2
       }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
@@ -11667,7 +11584,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$1 = {
+    var styles$2 = {
       layerRowContainer: {
         position: 'relative',
         width: '100%',
@@ -11739,7 +11656,7 @@
         source: source,
         leftComponent: leftComponent
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.layerManagerContainer
+        sx: styles$2.layerManagerContainer
       }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
         "data-testid": "loading-bar",
         color: "secondary",
@@ -11757,7 +11674,7 @@
       }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         "data-testid": "layerManagerRowContainer",
-        sx: styles$1.layerRowContainer
+        sx: styles$2.layerRowContainer
       }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
         mapId: mapId,
         tooltip: showAddLayersTooltip ? 'Add layers' : '',
@@ -12953,72 +12870,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$i = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        serviceChips: {
-          width: '100%',
-          display: 'inline-flex',
-          alignItems: 'center',
-          overflowX: 'visible',
-          "float": 'left',
-          paddingLeft: '40px',
-          marginRight: function marginRight(_a) {
-            var margin = _a.margin;
-            return margin;
-          },
-          marginLeft: function marginLeft(_a) {
-            var margin = _a.margin;
-            return -margin;
-          },
-          maxWidth: function maxWidth(_a) {
-            var maxWidthValue = _a.maxWidthValue;
-            return maxWidthValue;
-          },
-          fontSize: '0.875rem'
-        },
-        scrollArrowLeft: {
-          width: '100px',
-          marginBottom: '-12px',
-          height: '34px',
-          backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-          cursor: 'pointer',
-          marginRight: '-120px',
-          paddingTop: '6px',
-          paddingBottom: '6px',
-          "float": 'left',
-          zIndex: 1,
-          position: 'relative',
-          color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-          '&:hover': {
-            color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-          }
-        },
-        serviceList: {
-          height: '32px',
-          marginTop: '8px',
-          width: '100%',
-          overflow: 'hidden'
-        },
-        scrollArrowRight: {
-          width: '100px',
-          marginBottom: '-12px',
-          height: '34px',
-          paddingTop: '6px',
-          paddingBottom: '6px',
-          backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-          right: '0px',
-          position: 'fixed',
-          cursor: 'pointer',
-          color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-          '&:hover': {
-            color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-          }
-        }
-      });
-    });
 
     var ServiceList = function ServiceList(_a) {
       var layerSelectWidth = _a.layerSelectWidth,
@@ -13039,10 +12893,6 @@
       var ref = React__namespace.useRef(null);
       var scrollSpeed = 5;
       var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-      var classes = useStyles$i({
-        margin: margin,
-        maxWidthValue: maxWidthValue
-      });
 
       var onMouseWheelScroll = function onMouseWheelScroll(e) {
         var delta = e.deltaY;
@@ -13089,17 +12939,52 @@
       var isAllSelected = Object.values(activeServices).every(function (activeService) {
         return activeService.enabled;
       });
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceList,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '32px',
+          marginTop: '8px',
+          width: '100%',
+          overflow: 'hidden'
+        },
         "data-testid": "serviceList",
         onWheel: onMouseWheelScroll
       }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, {
-        className: classes.scrollArrowLeft,
         onMouseDown: onLeftChevronPressed,
         onMouseUp: onChevronMouseUp,
-        "data-testid": "leftScrollArrow"
-      }), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceChips,
+        "data-testid": "leftScrollArrow",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          return {
+            width: '100px',
+            marginBottom: '-12px',
+            height: '34px',
+            backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+            cursor: 'pointer',
+            marginRight: '-120px',
+            paddingTop: '6px',
+            paddingBottom: '6px',
+            "float": 'left',
+            zIndex: 1,
+            position: 'relative',
+            color: 'geowebColors.buttons.tertiary.default.color',
+            '&:hover': {
+              color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+            }
+          };
+        }
+      }), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          width: '100%',
+          display: 'inline-flex',
+          alignItems: 'center',
+          overflowX: 'visible',
+          "float": 'left',
+          paddingLeft: '40px',
+          marginRight: margin + "px",
+          marginLeft: -margin + "px",
+          maxWidth: maxWidthValue,
+          fontSize: '0.875rem'
+        },
         ref: ref
       }, activeServices && Object.keys(activeServices) && Object.keys(activeServices).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
         key: "All",
@@ -13116,8 +13001,26 @@
           isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
           isDisabled: activeServices[serviceId] === undefined
         });
-      })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(theme.ChevronRight, {
-        className: classes.scrollArrowRight,
+      })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(theme.ChevronRight // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+      , {
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          return {
+            width: '100px',
+            marginBottom: '-12px',
+            height: '34px',
+            paddingTop: '6px',
+            paddingBottom: '6px',
+            backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+            right: '0px',
+            position: 'fixed',
+            cursor: 'pointer',
+            color: 'geowebColors.buttons.tertiary.default.color',
+            '&:hover': {
+              color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+            }
+          };
+        },
         onMouseDown: onRightChevronPressed,
         onMouseUp: onChevronMouseUp,
         "data-testid": "rightScrollArrow"
@@ -13168,7 +13071,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var styles = {
+    var styles$1 = {
       servicesContainer: {
         width: '300px',
         maxHeight: '380px',
@@ -13232,10 +13135,10 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.servicesContainer,
+        sx: styles$1.servicesContainer,
         "data-testid": "ServiceDialog"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.header
+        sx: styles$1.header
       }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
       }, Object.keys(services).map(function (serviceId) {
@@ -13281,11 +13184,11 @@
           "data-testid": "removeServiceButton"
         }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null))))));
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.footer
+        sx: styles$1.footer
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: openAddService,
         "data-testid": "openAddServiceButton",
-        sx: styles.button,
+        sx: styles$1.button,
         variant: "tertiary",
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
       }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
@@ -13372,28 +13275,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$h = makeStyles__default["default"]({
-      serviceList: {
-        height: '48px'
-      },
-      keywordFilterButton: {
-        "float": 'left',
-        position: 'absolute',
-        margin: '12px 0 0 8px',
-        zIndex: 2
-      },
-      serviceOptionsButton: {
-        position: 'absolute',
-        margin: '12px 0 0 calc(100% - 36px)',
-        zIndex: 2
-      },
-      layerSelectContainer: {
-        padding: '0 8px'
-      }
-    });
 
     var LayerSelect = function LayerSelect(_a) {
       var mapId = _a.mapId,
@@ -13408,7 +13292,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'module' : _e;
-      var classes = useStyles$h();
 
       var _f = __read(React__namespace.useState(500), 2),
           height = _f[0],
@@ -13446,22 +13329,35 @@
         onMouseDown: onMouseDown,
         order: order,
         source: source
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
           padding: '6px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.keywordFilterButton
+      }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          "float": 'left',
+          position: 'absolute',
+          margin: '12px 0 0 8px',
+          zIndex: 2
+        }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterButtonConnect, {
         mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceOptionsButton
-      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceList
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          position: 'absolute',
+          margin: '12px 0 0 calc(100% - 36px)',
+          zIndex: 2
+        }
+      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '48px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
         layerSelectWidth: width
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.layerSelectContainer
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 8px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
         mapId: mapId,
         layerSelectHeight: height
@@ -13481,47 +13377,14 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$g = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        listItem: {
-          width: '100%',
-          minWidth: '300px',
-          padding: '0px',
-          paddingLeft: '10px',
-          paddingRight: '50px',
-          fontSize: '12px'
-        },
-        onlyByttonText: {
-          color: theme.palette.geowebColors.buttons.primary["default"].fill,
-          fontSize: '14px',
-          fontWeight: 500
-        },
-        checkbox: {
-          paddingTop: '6px',
-          paddingBottom: '7px',
-          '&&:hover': {
-            backgroundColor: 'transparent'
-          }
-        },
-        listItemIcon: {
-          minWidth: '42px'
-        },
-        listItemText: {
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden'
-        }
-      });
-    });
 
     var FilterListItem = function FilterListItem(_a) {
       var keyword = _a.keyword,
           toggleKeywords = _a.toggleKeywords,
           enableOnlyOneKeyword = _a.enableOnlyOneKeyword;
-      var classes = useStyles$g();
 
       var _b = __read(React__namespace.useState(false), 2),
           hovering = _b[0],
@@ -13550,19 +13413,38 @@
           onBlur: handleMouseLeave,
           "data-testid": "filterResultListItem"
         }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
-          className: classes.listItem
+          sx: {
+            width: '100%',
+            minWidth: '300px',
+            padding: '0px',
+            paddingLeft: '10px',
+            paddingRight: '50px',
+            fontSize: '12px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
-          className: classes.listItemIcon
+          sx: {
+            minWidth: '42px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
           color: "secondary",
           checked: keyword.checked,
           onChange: function onChange() {
             return toggleCheckbox(keyword.id);
           },
-          className: classes.checkbox
+          sx: {
+            paddingTop: '6px',
+            paddingBottom: '7px',
+            '&&:hover': {
+              backgroundColor: 'transparent'
+            }
+          }
         })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
           variant: "body2",
-          className: classes.listItemText
+          sx: {
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden'
+          }
         }, keyword.id), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           style: {
             backgroundColor: 'transparent'
@@ -13574,7 +13456,11 @@
           },
           "data-testid": "onlyButton"
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-          className: classes.onlyByttonText
+          sx: {
+            color: 'geowebColors.buttons.primary.default.fill',
+            fontSize: '14px',
+            fontWeight: 500
+          }
         }, "ONLY"))) : null));
       }
 
@@ -13677,26 +13563,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$f = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        selectAll: {
-          padding: '15px',
-          paddingLeft: '20px'
-        },
-        "switch": {
-          padding: '15px'
-        },
-        selectAllContainer: {
-          backgroundColor: theme.palette.background.paper,
-          position: 'sticky',
-          top: 0,
-          zIndex: 100
-        }
-      });
-    });
 
     var KeywordFilterResults = function KeywordFilterResults(_a) {
       var allKeywordIds = _a.allKeywordIds,
@@ -13712,7 +13581,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'module' : _e;
-      var classes = useStyles$f();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         title: showTitle ? "Filter Results " + mapId : 'Filter Results',
         "data-testid": "keywordFilterResults",
@@ -13735,21 +13603,31 @@
         xs: 12,
         justifyContent: "space-between",
         alignItems: "center",
-        className: classes.selectAllContainer
+        sx: {
+          backgroundColor: 'background.paper',
+          position: 'sticky',
+          top: 0,
+          zIndex: 100
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         xs: 6,
         justifyContent: "flex-start",
         alignItems: "center",
-        className: classes.selectAll
+        sx: {
+          padding: '15px',
+          paddingLeft: '20px'
+        }
       }, "Select all"), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         xs: 6,
         justifyContent: "flex-end",
         alignContent: "center",
-        className: classes["switch"]
+        sx: {
+          padding: '15px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React__namespace.createElement(material.List, {
         dense: true,
         style: {
@@ -14241,37 +14119,30 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$e = makeStyles__default["default"](function () {
-      return {
-        container: {
-          '& > button': {
-            marginBottom: 8
-          }
-        },
-        wrapper: {
+
+    var MapControls = function MapControls(_a) {
+      var children = _a.children,
+          props = __rest(_a, ["children"]);
+
+      return /*#__PURE__*/React__namespace.createElement(material.Box, __assign({
+        sx: {
           position: 'absolute',
           overflow: 'visible',
           display: 'block',
           left: 0,
-          margin: 8,
+          margin: 1,
           zIndex: 50,
-          top: 96
+          top: '96px'
         }
-      };
-    });
-
-    var MapControls = function MapControls(_a) {
-      var children = _a.children,
-          props = __rest(_a, ["children"]);
-
-      var classes = useStyles$e();
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({
-        className: classes.wrapper
       }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: classes.container,
+        sx: {
+          '& > button': {
+            marginBottom: 1
+          }
+        },
         container: true,
         direction: "column"
       }, children));
@@ -14403,31 +14274,16 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$d = makeStyles__default["default"](function () {
+    var SmallFontSlider = material.styled(material.Slider)(function () {
       return {
-        verticalLevelDimensionSelectContainer: {
-          height: '320px',
-          margin: '10px',
-          marginLeft: '-5px',
-          minWidth: 120,
-          fontSize: '90%'
-        },
-        layerName: {
-          paddingLeft: '10px',
-          maxWidth: 130,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
+        '& .MuiSlider-markLabel': {
+          fontSize: '80%'
         }
       };
     });
-    var SmallFontSlider = withStyles__default["default"]({
-      markLabel: {
-        fontSize: '80%'
-      }
-    })(material.Slider);
 
     var DimensionSelectSlider = function DimensionSelectSlider(_a) {
       var marks = _a.marks,
@@ -14443,7 +14299,6 @@
           _f = _a.alertColor,
           alertColor = _f === void 0 ? 'red' : _f,
           onChangeDimensionValue = _a.onChangeDimensionValue;
-      var classes = useStyles$d();
 
       var _g = __read(React.useState(0), 2),
           currentIndex = _g[0],
@@ -14471,9 +14326,15 @@
       var sliderValue = managedValue !== null ? values.findIndex(function (v) {
         return v === managedValue;
       }) : currentIndex;
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.verticalLevelDimensionSelectContainer,
-        "data-testid": "slider-dimensionSelect"
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "slider-dimensionSelect",
+        sx: {
+          height: '320px',
+          margin: '10px',
+          marginLeft: '-5px',
+          minWidth: 120,
+          fontSize: '90%'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "span",
         m: 1
@@ -14498,7 +14359,12 @@
         title: layerName
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body2",
-        className: classes.layerName
+        sx: {
+          paddingLeft: '10px',
+          maxWidth: 130,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
       }, layerName)));
     };
 
@@ -15014,33 +14880,14 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = makeStyles__default["default"](function (theme) {
-      return {
-        speedButtonDiv: {
-          height: '24px',
-          width: '24px',
-          position: 'relative'
-        },
-        sliderBackground: {
-          padding: '0 0 60px 0',
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '95px',
-          height: '150px',
-          position: 'absolute',
-          bottom: '34px',
-          left: '-18px'
-        }
-      };
-    });
     var speedTooltipTitle = 'Speed';
 
     var SpeedButton = function SpeedButton(_a) {
       var animationDelay = _a.animationDelay,
           setMapAnimationDelay = _a.setMapAnimationDelay;
-      var classes = useStyles$c();
 
       var _b = __read(React__namespace.useState(false), 2),
           open = _b[0],
@@ -15092,8 +14939,12 @@
       };
 
       var text = marks[currentValue].text;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.speedButtonDiv
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '24px',
+          width: '24px',
+          position: 'relative'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: speedTooltipTitle
       }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
@@ -15102,8 +14953,15 @@
         "data-testid": "speedButton"
       }, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
         text: text
-      }))), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
+      }))), open ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 0 60px 0',
+          backgroundColor: 'geowebColors.background.surface',
+          width: '95px',
+          height: '150px',
+          position: 'absolute',
+          bottom: '35px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: shared.sliderHeaderStyle
       }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
@@ -15142,12 +15000,6 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var timestepAutoSwitchActive = {
-      title: 'Timestep Auto on'
-    };
-    var timestepAutoSwitchInactive = {
-      title: 'Timestep Auto off'
-    };
     var timeStepMarks = [{
       value: 1,
       label: '1 min',
@@ -15254,34 +15106,6 @@
       timeStepValue: 5256000,
       text: '10y'
     }];
-    var useStyles$b = makeStyles__default["default"](function (theme) {
-      return {
-        timeStepDiv: {
-          width: '58px',
-          height: '24px',
-          position: 'relative'
-        },
-        sliderBackground: {
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '110px',
-          height: '350px',
-          padding: '0 0 83px 0',
-          position: 'absolute',
-          bottom: '34px'
-        },
-        timestepAutoText: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text
-        },
-        timestepAutoTextOff: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text
-        },
-        disabled: {}
-      };
-    });
     var timeStepTitle = 'Time step';
 
     var TimeStepButton = function TimeStepButton(_a) {
@@ -15295,112 +15119,90 @@
           _d = _a.onToggleTimestepAuto,
           onToggleTimestepAuto = _d === void 0 ? function () {
         return null;
-      } : _d;
-      var classes = useStyles$b();
-
-      var _e = __read(React__namespace.useState(false), 2),
-          open = _e[0],
-          setOpen = _e[1];
-
-      var onClickButton = function onClickButton() {
-        setOpen(!open);
-      };
-
-      var timestepAutoSwitch = !isTimestepAuto ? timestepAutoSwitchInactive : timestepAutoSwitchActive;
-      var timestepAutoTextStyle = !isTimestepAuto ? classes.timestepAutoText : classes.timestepAutoTextOff;
-      var disabledSlider = disabled || isTimestepAuto;
+      } : _d,
+          _e = _a.isOpenByDefault,
+          isOpenByDefault = _e === void 0 ? false : _e;
       var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
       var currentMark = timeStepMarks.find(function (mark) {
         return mark.timeStepValue === timeStep;
       });
-      var value = currentMark && currentMark.value ? currentMark.value : 0;
-      var min = timeStepMarks[0].value;
-      var max = timeStepMarks[timeStepMarks.length - 1].value;
+      React__default["default"].useEffect(function () {
+        if (isTimestepAuto) {
+          onChangeTimeStep(timeStepFromLayer);
+        }
+      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
-      var getTimeStepValue = function getTimeStepValue(value) {
-        return timeStepMarks[Math.round(value - 1)].timeStepValue;
-      };
-
-      var onChangeSlider = function onChangeSlider(event, value) {
-        var newValue = getTimeStepValue(value);
-
-        if (event.type !== 'keydown') {
-          onChangeTimeStep(newValue, MapActionOrigin.map);
-        }
-      };
-
-      var onKeyDown = function onKeyDown(event) {
-        // disable default Slider behavior
-        event.stopPropagation();
-        event.preventDefault(); // custom logic
-
-        if (event.key === 'Tab') {
-          setOpen(!open);
-        }
+      var _f = __read(React__default["default"].useState(null), 2),
+          anchorRef = _f[0],
+          setAnchorRef = _f[1];
 
-        var newValue = getValueFromKeyboardEvent(event, value, min, max);
+      var _g = __read(React__default["default"].useState(false), 2),
+          open = _g[0],
+          setOpen = _g[1];
 
-        if (newValue !== null) {
-          onChangeTimeStep(getTimeStepValue(newValue), MapActionOrigin.map);
+      React__default["default"].useEffect(function () {
+        if (anchorRef && isOpenByDefault) {
+          setOpen(true);
         }
-      };
-
-      React__namespace.useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
+      }, [anchorRef, isOpenByDefault]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        onKeyDown: function onKeyDown(event) {
+          event.stopPropagation();
         }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeStepDiv
-      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: timeStepTitle
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          setOpen(true);
+        },
+        ref: setAnchorRef,
         active: true,
-        onClick: onClickButton,
-        "data-testid": "timeStepButton",
         width: "58px"
-      }, /*#__PURE__*/React__namespace.createElement(theme.FastForward, null), /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
-        text: currentMark && currentMark.text || '',
-        "data-testid": "timeStepButtonText"
-      }))), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: shared.sliderHeaderStyle
-      }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-        "data-testid": "timeStepButtonSlider",
-        orientation: "vertical",
-        value: value,
-        step: null,
-        min: min,
-        max: max,
-        marks: timeStepMarks,
-        disabled: disabledSlider,
-        onChange: onChangeSlider,
-        onKeyDown: onKeyDown,
-        shouldAutoFocus: true
-      }), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: timestepAutoSwitch.title
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        "data-testid": "timestepAutoSwitchTooltip"
-      }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
-        control: /*#__PURE__*/React__namespace.createElement(material.Switch, {
-          checked: isTimestepAuto,
-          onChange: function onChange() {
-            return onToggleTimestepAuto();
-          },
-          disabled: disabled,
-          id: "timestepAutoSwitch",
-          disableRipple: true,
+      }, /*#__PURE__*/React__default["default"].createElement(theme.FastForward, null), /*#__PURE__*/React__default["default"].createElement(theme.TextIcon, {
+        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Menu, {
+        anchorEl: anchorRef,
+        open: open,
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        BackdropProps: {
           sx: {
-            marginLeft: '18px'
+            backgroundColor: 'transparent'
           }
-        }),
-        label: "Auto",
-        labelPlacement: "end",
-        classes: {
-          label: timestepAutoTextStyle
+        },
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
         }
-      })))) : null);
+      }, timeStepMarks.sort(function (a, b) {
+        return b.timeStepValue - a.timeStepValue;
+      }).map(function (time) {
+        return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+          onClick: function onClick() {
+            if (isTimestepAuto) {
+              onToggleTimestepAuto();
+            }
+
+            onChangeTimeStep(time.timeStepValue, MapActionOrigin.map);
+            setOpen(false);
+          },
+          key: time.timeStepValue,
+          selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.timeStepValue) === time.timeStepValue,
+          disabled: disabled
+        }, time.label);
+      }), /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+        onClick: function onClick() {
+          onToggleTimestepAuto();
+          setOpen(false);
+        },
+        selected: isTimestepAuto,
+        disabled: disabled
+      }, "Auto")));
     };
 
     /* *
@@ -15416,20 +15218,19 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var OptionsPopOver = withStyles__default["default"](function (theme) {
+    var OptionsPopOver = material.styled(material.Popover)(function (_a) {
+      var theme = _a.theme;
       return {
-        paper: {
-          height: '24px',
-          padding: '8px',
-          borderRadius: '0',
+        '& .MuiPaper-root': {
+          padding: '5px',
           overflow: 'visible',
           backgroundColor: theme.palette.geowebColors.background.surface
         }
       };
-    })(material.Popover);
+    });
 
     var OptionsMenuButton = function OptionsMenuButton(_a) {
       var autoUpdateBtn = _a.autoUpdateBtn,
@@ -15451,21 +15252,22 @@
       var open = Boolean(anchorEl);
       var id = open ? 'simple-popover' : undefined;
       return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Options"
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        title: "Animation options",
+        placement: "bottom"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         "data-testid": "optionsMenuButton",
         active: open
       }, /*#__PURE__*/React__namespace.createElement(theme.Options, {
         "data-testid": "optionsIcon"
-      }))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
+      })))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
         id: id,
         open: open,
         "data-testid": "optionsMenuPopOver",
         anchorEl: anchorEl,
         onClose: handleClose,
         anchorOrigin: {
-          vertical: 'top',
+          vertical: -5,
           horizontal: 'left'
         },
         transformOrigin: {
@@ -15513,53 +15315,18 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = makeStyles__default["default"]({
-      buttonContainerBig: {
-        padding: '20px 0px 0px 12px',
-        width: '210px'
-      },
-      buttonContainerSmall: {
-        padding: '20px 0px 0px 12px',
-        width: '80px'
-      }
-    });
 
     var TimeSliderButtons = function TimeSliderButtons(_a) {
-      var autoUpdateBtn = _a.autoUpdateBtn,
-          optionsMenuBtn = _a.optionsMenuBtn,
-          playBtn = _a.playBtn,
-          speedBtn = _a.speedBtn,
-          timeStepBtn = _a.timeStepBtn;
-      var classes = useStyles$a();
-      var matches = material.useMediaQuery('(min-width:600px)');
+      var optionsMenuBtn = _a.optionsMenuBtn,
+          playBtn = _a.playBtn;
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-testid": "timeSliderButtons"
-      }, matches ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         spacing: 2,
-        className: classes.buttonContainerBig
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
-        timeStep: 5,
-        onChangeTimeStep: function onChangeTimeStep() {
-          return null;
-        }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {
-          return null;
+        sx: {
+          padding: '20px 0px 0px 16px'
         }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true,
-        spacing: 1,
-        className: classes.buttonContainerSmall
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -16270,14 +16037,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$9 = makeStyles__default["default"]({
-      timeSliderLegend: {
-        height: '50px'
-      }
-    });
 
     var getNextSecondsPerPxValue = function getNextSecondsPerPxValue(direction, oldSecondsPerPx, dataScaleToSecondsPerPx) {
       var fullSecondsPerPxValues = secondsPerPxValues(dataScaleToSecondsPerPx);
@@ -16316,7 +16078,6 @@
           onSetNewDate = _a.onSetNewDate,
           onSetCenterTime = _a.onSetCenterTime,
           onZoom = _a.onZoom;
-      var classes = useStyles$9();
 
       var _e = __read(useCanvasTarget('mousedown'), 2),
           isAllowedCanvasNodePointed = _e[0],
@@ -16390,9 +16151,11 @@
         throttledZoom(newSecondsPerPx, newCenterTime);
       };
 
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeSliderLegend,
-        "data-testid": "timeSliderLegend"
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "timeSliderLegend",
+        sx: {
+          height: '50px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
         onMouseMove: function onMouseMove(x, y, event, width) {
@@ -16461,31 +16224,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var scaleSliderOtherSettings = {
       LEFT_PADDING: '10%'
     };
-    var useStyles$8 = makeStyles__default["default"](function (theme) {
-      return {
-        Background: {
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '229px',
-          height: '40px',
-          paddingTop: '4px',
-          paddingBottom: '7px',
-          boxSizing: 'content-box'
-        },
-        ScaleText: {
-          width: '67px',
-          height: '15px',
-          padding: '0px 10px 0 8px',
-          color: theme.palette.geowebColors.typographyAndIcons.text,
-          font: theme.palette.geowebColors.timeSlider.timeScaleText.fontSize + "px Roboto"
-        }
-      };
-    });
 
     var thumbComponent = function thumbComponent(props) {
       var children = props.children,
@@ -16540,14 +16284,15 @@
       return valueNew;
     };
 
-    var GeoWebScaleSlider = withStyles__default["default"](function (theme) {
+    var GeoWebScaleSlider = material.styled(material.Slider)(function (_a) {
+      var theme = _a.theme;
       return {
-        root: {
+        '&.MuiSlider-root': {
           height: 4,
           width: 167,
           margin: "0 0 18px " + scaleSliderOtherSettings.LEFT_PADDING
         },
-        thumb: {
+        '& .MuiSlider-thumb': {
           backgroundColor: 'rgba(0,0,0,0)',
           marginTop: 0,
           width: 12,
@@ -16560,46 +16305,46 @@
             display: 'none'
           }
         },
-        valueLabel: {
+        '& .MuiSlider-valueLabel': {
           left: '20px'
         },
-        rail: {
+        '& .MuiSlider-rail': {
           color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
           height: 4,
           width: 170,
           borderRadius: 4.5,
           opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
         },
-        mark: {
+        '& .MuiSlider-mark': {
           backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
           height: 6,
           width: 2,
-          marginTop: -9
-        },
-        markActive: {
-          backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-          height: 6,
-          width: 2,
-          marginTop: -9
+          marginTop: -9,
+          '&.MuiSlider-markActive': {
+            backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
+            height: 6,
+            width: 2,
+            marginTop: -9
+          }
         },
         '@media (max-width: 585px)': {
-          root: {
+          '&.MuiSlider-root': {
             width: 110
           },
-          rail: {
+          '& .MuiSlider-rail': {
             width: 110
           }
         },
         '@media (max-width: 395px)': {
-          root: {
+          '&.MuiSlider-root': {
             width: 60
           },
-          rail: {
+          '& .MuiSlider-rail': {
             width: 60
           }
         }
       };
-    })(material.Slider);
+    });
     var RAIL_GUTTER_OFFSET = 0.4;
 
     var TimeSliderScaleSlider = function TimeSliderScaleSlider(_a) {
@@ -16610,7 +16355,6 @@
           secondsPerPx = _a.secondsPerPx,
           selectedTime = _a.selectedTime,
           onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
-      var classes = useStyles$8();
       var min = 0;
       var max = marks.length - 1;
       var value = marks.findIndex(function (mark) {
@@ -16654,12 +16398,25 @@
       var scaleTextPadding = {
         paddingLeft: paddingLeft
       };
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.Background,
-        "data-testid": "scaleSlider"
-      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "scaleSlider",
+        sx: {
+          backgroundColor: 'geowebColors.background.surface',
+          width: '229px',
+          height: '40px',
+          paddingTop: '4px',
+          paddingBottom: '7px',
+          boxSizing: 'content-box'
+        }
+      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "scaleSliderText",
-        className: classes.ScaleText,
+        sx: {
+          width: '67px',
+          height: '15px',
+          padding: '0px 10px 0 8px',
+          color: 'geowebColors.typographyAndIcons.text',
+          font: '12px Roboto'
+        },
         style: scaleTextPadding
       }, text)), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(GeoWebScaleSlider, {
         "data-testid": "scaleSliderSlider",
@@ -16882,20 +16639,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"]({
-      timeSliderRail: {
-        '& div': {
-          outline: 'none'
-        },
-        height: '45px',
-        '& canvas': {
-          display: 'block'
-        }
-      }
-    });
 
     var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
       var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
@@ -16934,7 +16680,6 @@
           onSetAnimationEndTime = _a.onSetAnimationEndTime,
           onSetNewDate = _a.onSetNewDate,
           onSetCenterTime = _a.onSetCenterTime;
-      var classes = useStyles$7();
       var ZOOM_RATIO = 1.1;
 
       var zoomOut = function zoomOut(relativeX) {
@@ -17142,12 +16887,20 @@
 
       }, [selectedTimeUnix]);
       var theme = material.useTheme();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeSliderRail,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         style: {
           cursor: cursorStyle
         },
-        "data-testid": "timeSliderRail"
+        "data-testid": "timeSliderRail",
+        sx: {
+          '& div': {
+            outline: 'none'
+          },
+          height: '45px',
+          '& canvas': {
+            display: 'block'
+          }
+        }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
         onMouseDown: onMouseDown,
@@ -17204,19 +16957,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"]({
-      container: {
-        display: 'grid',
-        gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-        gridTemplateRows: '50px'
-      },
-      scaleSlider: {
-        height: '50px'
-      }
-    });
 
     var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
       React__namespace.useEffect(function () {
@@ -17253,12 +16996,15 @@
           isVisible = _c === void 0 ? true : _c,
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
-      var styles = useStyles$6();
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        className: styles.container,
-        "data-testid": "timeSlider"
+        "data-testid": "timeSlider",
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
+          gridTemplateRows: '50px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -17268,7 +17014,9 @@
         mapIsActive: mapIsActive
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: styles.scaleSlider
+        sx: {
+          height: '50px'
+        }
       }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime.unix(),
         timeSliderScale: Scale.Hour,
@@ -17497,20 +17245,11 @@
     var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_a) {
       var mapId = _a.mapId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, {
-        autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
-          mapId: mapId
-        }),
         optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
           mapId: mapId
         }),
         playBtn: /*#__PURE__*/React__namespace.createElement(PlayButtonConnect, {
           mapId: mapId
-        }),
-        speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
-          mapId: mapId
-        }),
-        timeStepBtn: /*#__PURE__*/React__namespace.createElement(TimeStepButtonComponent, {
-          mapId: mapId
         })
       });
     };
@@ -17975,29 +17714,25 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"]({
-      MapViewLayer: {
-        width: '100%',
-        padding: '2px',
-        margin: 0,
-        wordWrap: 'break-word',
-        border: '1px solid rgba(0, 0, 0, 0.5)',
-        lineHeight: '14px',
-        fontSize: '10px',
-        background: 'rgba(255, 255, 255, 0.5)',
-        display: 'none'
-      }
-    });
 
     var MapViewLayer = function MapViewLayer(props) {
       var id = props.id;
-      var classes = useStyles$5();
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "mapViewLayer",
-        className: classes.MapViewLayer
+        sx: {
+          width: '100%',
+          padding: '2px',
+          margin: 0,
+          wordWrap: 'break-word',
+          border: '1px solid rgba(0, 0, 0, 0.5)',
+          lineHeight: '14px',
+          fontSize: '10px',
+          background: 'rgba(255, 255, 255, 0.5)',
+          display: 'none'
+        }
       }, /*#__PURE__*/React__namespace.createElement("div", null, id), /*#__PURE__*/React__namespace.createElement("div", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -19295,12 +19030,12 @@
 
         if (onHoverFeature) {
           var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
-            var result = checkHoverFeatures(_this.geojson, mouseX, mouseY, function (coordinates) {
+            var result = checkHoverFeatures(_this.geojson, _this.mouseX, _this.mouseY, function (coordinates) {
               return _this.convertGeoCoordsToScreenCoords(coordinates);
             });
 
             if (result) {
-              var featureEvent = {
+              _this.featureEvent = {
                 coordinateIndexInFeature: result.coordinateIndexInFeature,
                 featureIndex: result.featureIndex,
                 mouseX: mouseX,
@@ -19308,8 +19043,13 @@
                 isInEditMode: isInEditMode,
                 feature: result.feature
               };
-              onHoverFeature(featureEvent);
+              onHoverFeature(_this.featureEvent);
+            } else {
+              _this.featureEvent = undefined;
             }
+
+            var webmapjs = _this.props.webmapjs;
+            webmapjs && webmapjs.draw('AdagucMapDraw::onHoverFeature');
           };
 
           window.clearTimeout(this.mouseStoppedTimer);
@@ -20422,6 +20162,7 @@
         var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
 
         if (featureProperties.drawFunction) {
+          var isHovered = this.featureEvent && this.featureEvent.feature === feature;
           featureProperties.drawFunction({
             context: ctx,
             featureIndex: featureIndex,
@@ -20431,7 +20172,8 @@
             isInEditMode: isInEditMode,
             feature: feature,
             mouseX: this.mouseX,
-            mouseY: this.mouseY
+            mouseY: this.mouseY,
+            isHovered: isHovered
           });
         } else if (drawStyledMarker || drawMarkerByDefault) {
           this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
@@ -21695,22 +21437,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function () {
-      return {
-        mapTimeContainer: {
-          zIndex: 10,
-          justifySelf: 'center',
-          bottom: 12,
-          position: 'absolute'
-        },
-        mapTimeText: {
-          fontWeight: 500
-        }
-      };
-    });
     var getTimeDimension = function getTimeDimension(dimensions) {
       return dimensions.find(function (dimension) {
         return dimension.name === 'time' && dimension.currentValue !== undefined;
@@ -21725,7 +21454,6 @@
       var dimensions = _a.dimensions,
           _b = _a.timeFormat,
           timeFormat = _b === void 0 ? defaultTimeFormat : _b;
-      var classes = useStyles$4();
       var timeDimension = getTimeDimension(dimensions);
 
       if (!timeDimension) {
@@ -21733,12 +21461,19 @@
       }
 
       var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "map-time",
-        className: classes.mapTimeContainer
+        sx: {
+          zIndex: 10,
+          justifySelf: 'center',
+          bottom: '12px',
+          position: 'absolute'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "caption",
-        className: classes.mapTimeText
+        sx: {
+          fontWeight: 500
+        }
       }, mapTime)));
     };
 
@@ -21755,24 +21490,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$3 = makeStyles__default["default"](function () {
-      return {
-        mapViewContainer: {
-          display: 'grid',
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden'
-        },
-        mapView: {
-          gridColumnStart: 1,
-          gridRowStart: 1
-        }
-      };
-    });
 
     var MapView = function MapView(_a) {
       var children = _a.children,
@@ -21785,11 +21505,16 @@
           // rest props
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-      var classes = useStyles$3();
       var dimensions = props.dimensions;
       var adagucRef = React__namespace.useRef(null);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.mapViewContainer
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'grid',
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          overflow: 'hidden'
+        }
       }, controls && controls.zoomControls && /*#__PURE__*/React__namespace.createElement(MapControls, {
         style: {
           top: 0,
@@ -21805,8 +21530,11 @@
         onZoomReset: function onZoomReset() {
           return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
         }
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.mapView
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          gridColumnStart: 1,
+          gridRowStart: 1
+        }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
         onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
           adagucRef.current = adaguc;
@@ -21818,6 +21546,217 @@
       }));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
+      var _a = __read(React__namespace.useState(0), 2),
+          firstTouchX = _a[0],
+          setFirstTouchX = _a[1];
+
+      var _b = __read(React__namespace.useState(0), 2),
+          firstTouchY = _b[0],
+          setFirstTouchY = _b[1];
+
+      var _c = __read(React__namespace.useState(0), 2),
+          secondTouchX = _c[0],
+          setSecondTouchX = _c[1];
+
+      var _d = __read(React__namespace.useState(0), 2),
+          secondTouchY = _d[0],
+          setSecondTouchY = _d[1];
+
+      var _e = __read(React__namespace.useState(0), 2),
+          prevDist = _e[0],
+          setPrevDist = _e[1];
+
+      var isPanning = function isPanning(touches) {
+        return (touches === null || touches === void 0 ? void 0 : touches.length) === 1;
+      };
+
+      var isZooming = function isZooming(touches) {
+        return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
+      };
+
+      var isValidMap = React__namespace.useCallback(function (map, event) {
+        var target = event.target;
+        return map && target.tagName !== 'INPUT' && mapIsActive;
+      }, [mapIsActive]);
+
+      var distance = function distance(x1, y1, x2, y2) {
+        var dx = x1 - x2;
+        var dy = y1 - y2;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+
+      var handleStart = React__namespace.useCallback(function (event) {
+        var map = getWMJSMapById(mapId);
+        if (!isValidMap(map, event)) return;
+        var targetTouches = event.targetTouches;
+        var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
+        setFirstTouchX(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX);
+        setFirstTouchY(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY);
+
+        if (isZooming(targetTouches)) {
+          var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+          setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
+          setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
+        }
+      }, [isValidMap, mapId]);
+      var handleMove = React__namespace.useCallback(function (event) {
+        var map = getWMJSMapById(mapId);
+        if (!isValidMap(map, event)) return;
+        event.preventDefault();
+        var targetTouches = event.targetTouches;
+        var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
+        var firstX = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX;
+        var firstY = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY;
+        var elemWidth = firstTouch.target.clientWidth;
+        var elemHeight = firstTouch.target.clientHeight;
+        var distanceEps = TOUCH_PAN_STEP_PERCENTAGE * Math.min(elemWidth, elemHeight);
+
+        if (isPanning(targetTouches)) {
+          // Pan with a one-point touch
+          var dist = distance(firstTouchX, firstTouchY, firstX, firstY);
+
+          if (dist > distanceEps) {
+            var distX = firstX - firstTouchX;
+            var distY = firstY - firstTouchY;
+            var unitDirX = distX / dist;
+            var unitDirY = -distY / dist;
+            setFirstTouchX(firstX);
+            setFirstTouchY(firstY);
+            map.mapPanPercentage(unitDirX * TOUCH_PAN_STEP_PERCENTAGE, unitDirY * TOUCH_PAN_STEP_PERCENTAGE);
+          }
+        } else if (isZooming(targetTouches)) {
+          // Zoom with a two-point "pinch" touch
+          setFirstTouchX(firstX);
+          setFirstTouchY(firstY);
+          var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+          setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
+          setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
+          var dist = distance(firstTouchX, firstTouchY, secondTouchX, secondTouchY);
+
+          if (Math.abs(dist - prevDist) > distanceEps) {
+            if (dist < prevDist) {
+              map.zoomOut();
+            } else if (dist > prevDist) {
+              map.zoomIn(1);
+            }
+
+            setPrevDist(dist);
+          }
+        }
+      }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+      var handleEnd = React__namespace.useCallback(function () {}, []);
+      React__namespace.useEffect(function () {
+        document.addEventListener('touchstart', handleStart, {
+          passive: false
+        });
+        document.addEventListener('touchmove', handleMove, {
+          passive: false
+        });
+        document.addEventListener('touchend', handleEnd, {
+          passive: false
+        });
+        return function () {
+          document.removeEventListener('touchstart', handleStart);
+          document.removeEventListener('touchmove', handleMove);
+          document.removeEventListener('touchend', handleEnd);
+        };
+      }, [firstTouchX, firstTouchY, secondTouchX, secondTouchY, mapId, mapIsActive, prevDist, handleStart, handleMove, handleEnd]);
+    };
+    var TOUCH_PAN_STEP_PERCENTAGE = 0.02;
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId) {
+      React__namespace.useEffect(function () {
+        var keysPressedDown = {};
+
+        var handleKeyPress = function handleKeyPress(event) {
+          var target = event.target;
+          var map = getWMJSMapById(mapId);
+
+          if (map && target.tagName !== 'INPUT' && mapIsActive) {
+            var key = event.key,
+                type = event.type;
+            keysPressedDown[key] = type === 'keydown';
+
+            if (keysPressedDown['+']) {
+              map.zoomIn(1);
+            } else if (keysPressedDown['-']) {
+              map.zoomOut();
+            }
+
+            var arrowRight = keysPressedDown['ArrowRight'];
+            var arrowLeft = keysPressedDown['ArrowLeft'];
+            var arrowUp = keysPressedDown['ArrowUp'];
+            var arrowDown = keysPressedDown['ArrowDown'];
+            var control = keysPressedDown['Control'];
+
+            if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
+              var x = 0;
+              var y = 0;
+
+              if (arrowRight) {
+                x -= PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowLeft) {
+                x += PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowUp) {
+                y -= PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowDown) {
+                y += PAN_STEP_PERCENTAGE;
+              }
+
+              map.mapPanPercentage(x, y);
+            }
+          }
+        };
+
+        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener('keyup', handleKeyPress);
+        return function () {
+          document.removeEventListener('keydown', handleKeyPress);
+          document.removeEventListener('keyup', handleKeyPress);
+        };
+      }, [mapIsActive, mapId]);
+    };
+    var PAN_STEP_PERCENTAGE = 0.02;
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -21934,7 +21873,14 @@
       var setSelectedFeature = React__namespace.useCallback(function (payload) {
         dispatch(mapActions$1.setSelectedFeature(payload));
       }, [dispatch]);
-      useKeyboardZoomAndPan(mapId);
+      var activeWindowId = reactRedux.useSelector(getActiveWindowId);
+
+      var isActiveWindowId = function isActiveWindowId() {
+        return activeWindowId === mapId;
+      };
+
+      useKeyboardZoomAndPan(isActiveWindowId(), mapId);
+      useTouchZoomPan(isActiveWindowId(), mapId);
       return /*#__PURE__*/React__namespace.createElement("div", {
         style: {
           height: '100%'
@@ -22030,69 +21976,6 @@
       }), children));
     };
 
-    var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapId) {
-      var activeWindowId = reactRedux.useSelector(getActiveWindowId);
-      var mapIsActive = activeWindowId === mapId;
-      React__namespace.useEffect(function () {
-        var keysPressedDown = {};
-
-        var handleKeyPress = function handleKeyPress(event) {
-          var target = event.target;
-          var map = getWMJSMapById(mapId);
-
-          if (map && target.tagName !== 'INPUT' && mapIsActive) {
-            var key = event.key,
-                type = event.type;
-            keysPressedDown[key] = type === 'keydown';
-
-            if (keysPressedDown['+']) {
-              map.zoomIn(1);
-            } else if (keysPressedDown['-']) {
-              map.zoomOut();
-            }
-
-            var arrowRight = keysPressedDown['ArrowRight'];
-            var arrowLeft = keysPressedDown['ArrowLeft'];
-            var arrowUp = keysPressedDown['ArrowUp'];
-            var arrowDown = keysPressedDown['ArrowDown'];
-            var control = keysPressedDown['Control'];
-
-            if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
-              var x = 0;
-              var y = 0;
-
-              if (arrowRight) {
-                x -= PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowLeft) {
-                x += PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowUp) {
-                y -= PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowDown) {
-                y += PAN_STEP_PERCENTAGE;
-              }
-
-              map.mapPanPercentage(x, y);
-            }
-          }
-        };
-
-        document.addEventListener('keydown', handleKeyPress);
-        document.addEventListener('keyup', handleKeyPress);
-        return function () {
-          document.removeEventListener('keydown', handleKeyPress);
-          document.removeEventListener('keyup', handleKeyPress);
-        };
-      }, [mapIsActive, mapId]);
-    };
-
-    var PAN_STEP_PERCENTAGE = 0.02;
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -22312,20 +22195,20 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$2 = makeStyles__default["default"](function (theme) {
+
+    var mapBoxStyle = function mapBoxStyle(theme) {
       return {
-        box: {
-          boxSizing: 'border-box',
-          "float": 'left',
-          '& .MapViewComponent': {
-            border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-          }
+        boxSizing: 'border-box',
+        "float": 'left',
+        '& .MapViewComponent': {
+          border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
         }
       };
-    });
+    };
+
     var MultiMapViewConnect = function MultiMapViewConnect(_a) {
       var maps = _a.maps,
           rows = _a.rows,
@@ -22336,7 +22219,6 @@
           showZoomControls = _c === void 0 ? true : _c,
           _d = _a.multiLegend,
           multiLegend = _d === void 0 ? false : _d;
-      var classes = useStyles$2();
       var dispatch = reactRedux.useDispatch();
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
         dispatch(genericActions.syncGroupAddTarget(payload));
@@ -22381,10 +22263,10 @@
         multiLegend: multiLegend
       }), maps.map(function (map, mapIndex) {
         var mapId = map.id;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: classes.box,
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
           key: mapId,
-          style: mapStyle
+          style: mapStyle,
+          sx: mapBoxStyle
         }, /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, {
           title: map.title,
           id: mapId,
@@ -22706,18 +22588,32 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
+    var styles = {
+      listItem: {
+        width: '80%',
+        borderRadius: '5px'
+      },
+      isActive: {
+        color: 'geowebColors.typographyAndIcons.icon'
+      },
+      checkboxIsActive: {
+        color: 'geowebColors.typographyAndIcons.iconLinkActive'
+      },
+      isDisabled: {
+        color: 'geowebColors.typographyAndIcons.iconLinkDisabled'
+      }
+    };
     var SyncGroupListItem = function SyncGroupListItem(_a) {
       var viewStateData = _a.viewStateData,
           groupId = _a.groupId,
           selected = _a.selected,
           sourcesById = _a.sourcesById,
           handleToggle = _a.handleToggle;
-      var classes = useStyles$1();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.listItem
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles.listItem
       }, sourcesById.map(function (source) {
         var isChecked = selected.includes(source.id); // Check if checkbox is checked in another group
 
@@ -22731,7 +22627,7 @@
           onClick: function onClick() {
             return handleToggle(source.id);
           },
-          className: classes.listItem
+          sx: styles.listItem
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
           edge: "start",
           checked: isChecked,
@@ -22740,30 +22636,13 @@
           inputProps: {
             'aria-labelledby': source.name
           },
-          className: isNotCheckedElseWhere ? classes.checkboxIsActive : classes.isDisabled,
+          sx: isNotCheckedElseWhere ? styles.checkboxIsActive : styles.isDisabled,
           color: "default"
         })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
-          className: isNotCheckedElseWhere ? classes.isActive : classes.isDisabled
+          sx: isNotCheckedElseWhere ? styles.isActive : styles.isDisabled
         }, source.name));
       }));
     };
-    var useStyles$1 = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        listItem: {
-          width: '80%',
-          borderRadius: '5px'
-        },
-        isActive: {
-          color: theme.palette.geowebColors.typographyAndIcons.icon
-        },
-        checkboxIsActive: {
-          color: theme.palette.geowebColors.typographyAndIcons.iconLinkActive
-        },
-        isDisabled: {
-          color: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
-      });
-    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22778,8 +22657,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var SyncGroupList = function SyncGroupList(_a) {
       var viewStateData = _a.viewStateData,
@@ -22787,15 +22666,26 @@
           _handleToggle = _a.handleToggle,
           addNewGroup = _a.addNewGroup,
           removeGroup = _a.removeGroup;
-      var classes = useStyles();
       return /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
       }, viewStateData.groups.map(function (groupObject, index) {
         return /*#__PURE__*/React__namespace.createElement(material.Box, {
           key: groupObject.id,
-          className: index === 0 ? null : classes.childListItem
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.syncGroupHeader
+          sx: __assign({}, index !== 0 && {
+            backgroundColor: 'geowebColors.syncGroups.drawerOpen.fill',
+            boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
+            color: '#000000'
+          })
+        }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+          sx: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            color: 'geowebColors.typographyAndIcons.text',
+            paddingLeft: '15px',
+            paddingTop: '10px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: index === 0 ? 'Add new group to list' : 'Remove group from list'
         }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -22820,24 +22710,6 @@
         }));
       }));
     };
-    var useStyles = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        syncGroupHeader: {
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          color: theme.palette.geowebColors.typographyAndIcons.text,
-          paddingLeft: '15px',
-          paddingTop: '10px'
-        },
-        childListItem: {
-          backgroundColor: theme.palette.geowebColors.syncGroups.drawerOpen.fill,
-          boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
-          color: '#000000'
-        }
-      });
-    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23286,6 +23158,90 @@
       }, children)));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var SnackbarWrapper = function SnackbarWrapper(_a) {
+      var children = _a.children,
+          isOpen = _a.isOpen,
+          onCloseSnackbar = _a.onCloseSnackbar,
+          id = _a.id,
+          props = __rest(_a, ["children", "isOpen", "onCloseSnackbar", "id"]);
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children, /*#__PURE__*/React__namespace.createElement(material.Snackbar, __assign({
+        "data-testid": "snackbarComponent",
+        open: isOpen,
+        onClose: onCloseSnackbar,
+        autoHideDuration: null,
+        key: id,
+        ClickAwayListenerProps: {
+          mouseEvent: false
+        },
+        action: /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          "aria-label": "close",
+          "data-testid": "snackbarCloseButton",
+          onClick: onCloseSnackbar,
+          sx: {
+            color: 'geowebColors.snackbar.action',
+            '&:hover': {
+              backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+            }
+          }
+        }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))
+      }, props)));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
+      var props = __rest(_a, []);
+
+      var dispatch = reactRedux.useDispatch();
+
+      var onCloseSnackbar = function onCloseSnackbar() {
+        dispatch(snackbarActions.closeSnackbar());
+      };
+
+      var currentSnackbarMessage = reactRedux.useSelector(function (store) {
+        return getFirstSnackbarMessage(store);
+      });
+      return /*#__PURE__*/React__namespace.createElement(reduxDynamicModules.DynamicModuleLoader, {
+        modules: [snackbarModuleConfig]
+      }, /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __assign({
+        isOpen: !!currentSnackbarMessage,
+        onCloseSnackbar: onCloseSnackbar,
+        message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
+        id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
+      }, props)));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -23303,7 +23259,9 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var MapWarningProperties = function MapWarningProperties(_a) {
-      var selectedFeatureProperties = _a.selectedFeatureProperties;
+      var selectedFeatureProperties = _a.selectedFeatureProperties,
+          languageIndex = _a.languageIndex;
+      var language = languageIndex || 0;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "map-warning-properties",
         style: {
@@ -23322,13 +23280,13 @@
         "data-testid": "map-warning-properties-title"
       }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "event: ", selectedFeatureProperties.languages[language].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
       }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[language].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
       }, "Identifier: ", selectedFeatureProperties.identifier));
     };
@@ -23370,6 +23328,7 @@
     exports.MultiMapViewConnect = MultiMapViewConnect;
     exports.ReactMapView = ReactMapView;
     exports.ReactMapViewLayer = ReactMapViewLayer;
+    exports.SnackbarWrapperConnect = SnackbarWrapperConnect;
     exports.SyncGroupViewerConnect = SyncGroupViewerConnect;
     exports.SyncGroups = index;
     exports.TimeSliderConnect = TimeSliderConnect;
@@ -23409,6 +23368,7 @@
     exports.publicServices = publicServices;
     exports.registerWMJSMap = registerWMJSMap;
     exports.registerWMLayer = registerWMLayer;
+    exports.snackbarActions = snackbarActions;
     exports.store = store;
     exports.syncGroupActions = genericActions;
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
@@ -23418,7 +23378,6 @@
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;
     exports.uiTypes = types;
-    exports.useStyles = useStyles$2;
 
     Object.defineProperty(exports, '__esModule', { value: true });