@opengeoweb/core 4.0.0 → 4.1.0

package/index.esm.js

@@ -6,15 +6,12 @@ import React__default, { Component, useRef, useState, useEffect } from 'react';
 import _, { isEqual, debounce, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { Tooltip, Paper, Typography, Grid, InputLabel, IconButton, Box, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, SliderThumb, Snackbar } from '@mui/material';
 import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Close, Search, Clear, ChevronLeft, ChevronRight, Edit, Delete, Home, Minus, Layers, Equalizer, Sort, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import makeStyles from '@mui/styles/makeStyles';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { Sortable, ReactSortable } from 'react-sortablejs';
-import createStyles from '@mui/styles/createStyles';
 import { FixedSizeList } from 'react-window';
-import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -4735,7 +4732,7 @@ var _snackbarAdapter$getS = snackbarAdapter.getSelectors(function (state) {
   };
 }),
     getCurrentSnackbarMessages = _snackbarAdapter$getS.selectAll;
-createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, function (currentMessages) {
   return currentMessages.length > 0 ? currentMessages[0] : undefined;
 });
 
@@ -7063,43 +7060,7 @@ CanvasComponent.defaultProps = {
 };
 
 var defaultCanvasWidth = 150;
-var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
-
-var useStyles$r = makeStyles(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.
  *
@@ -7133,9 +7094,8 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 
 var Legend = function Legend(_ref) {
   var layer = _ref.layer;
-  var classes = useStyles$r();
-  /* Variable to remember the previous image */
 
+  /* Variable to remember the previous image */
   var previousLegendImage = useRef(null);
   /* Function to force rerender of this component when legend image loads */
 
@@ -7182,23 +7142,36 @@ var Legend = function Legend(_ref) {
   var wmLayer = getWMLayerById(layer.id);
   return /*#__PURE__*/React__default.createElement(Paper, {
     "data-testid": "legend",
-    className: classes.legendComponent
-  }, /*#__PURE__*/React__default.createElement("div", {
+    sx: {
+      padding: '10px',
+      border: '1px solid grey',
+      display: 'inline-block',
+      backgroundColor: '#FFF',
+      overflow: 'hidden',
+      marginBottom: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
     "data-testid": "legend-title",
     style: {
       maxWidth: canvasContainerWidth
     }
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.legendTitle,
+    sx: {
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: '10px',
+      minWidth: "".concat(defaultCanvasWidth, "px"),
+      wordWrap: 'break-word',
+      color: 'common.black'
+    },
     variant: "h3"
   }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default.createElement(Tooltip, {
     title: wmLayer && wmLayer.title || 'loading',
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.legendCanvas,
-    style: {
-      height: canvasContainerHeight,
-      width: canvasContainerWidth
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      margin: '10px 0px 10px 0px',
+      height: "".concat(canvasContainerHeight, "px"),
+      width: "".concat(canvasContainerWidth, "px")
     }
   }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
     redrawInterval: 500,
@@ -7255,16 +7228,21 @@ var Legend = function Legend(_ref) {
         renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
       }
     }
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement(Box, {
     "data-testid": "legend-info",
-    className: classes.legendInfo,
-    style: {
-      maxWidth: canvasContainerWidth
+    sx: {
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: 10,
+      color: 'common.black',
+      overflowX: 'hidden',
+      minWidth: "".concat(defaultCanvasWidth, "px"),
+      wordWrap: 'break-word',
+      maxWidth: "".concat(canvasContainerWidth, "px")
     }
   }, layer.dimensions && layer.dimensions.map(function (dim) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Box, {
       key: layer.name + dim.name
-    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
       style: {
         fontWeight: 500
       }
@@ -7285,23 +7263,9 @@ var Legend = function Legend(_ref) {
  * 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(function () {
-  return {
-    legendList: {
-      display: 'flex',
-      flexDirection: 'column',
-      '&>div:last-child': {
-        marginBottom: 0
-      }
-    },
-    legendContainer: {
-      padding: 4
-    }
-  };
-});
 
 var LegendDialog = function LegendDialog(_ref) {
   var layers = _ref.layers,
@@ -7316,7 +7280,6 @@ var LegendDialog = function LegendDialog(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var classes = useStyles$q();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -7333,11 +7296,19 @@ var LegendDialog = function LegendDialog(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.legendContainer
-  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: 0.5
+    }
+  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     "data-testid": "LegendList",
-    className: classes.legendList
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      '&>div:last-child': {
+        marginBottom: 0
+      }
+    }
   }, layers.map(function (layer) {
     return /*#__PURE__*/React.createElement(Legend, {
       key: layer.id,
@@ -8405,7 +8376,7 @@ function openSnackbarSaga(capturedAction) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
-          snackbarMessage = capturedAction.payload.snackbarContent.message;
+          snackbarMessage = capturedAction.payload.message;
           _context.next = 3;
           return select(getCurrentSnackbarMessages);
 
@@ -9041,23 +9012,6 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$p = makeStyles({
-  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;
   var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
@@ -9074,7 +9028,6 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$p();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9196,7 +9149,9 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 2,
-    className: classes.buttonDiv
+    sx: {
+      position: 'relative'
+    }
   }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "add-service",
     onClick: handleAddServiceURL,
@@ -9204,7 +9159,12 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
     size: 35,
-    className: classes.loadingButton
+    sx: {
+      position: 'absolute',
+      top: '7px',
+      left: '7px',
+      zIndex: 1
+    }
   })))), /*#__PURE__*/React.createElement(Box, {
     m: 2
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -9232,7 +9192,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles$2 = {
+var styles$4 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -9295,7 +9255,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     onBlur: onBlurTooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles$2.button,
+    sx: styles$4.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -9322,12 +9282,12 @@ var AddLayersButton = function AddLayersButton(_ref) {
  * 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({
+var LayerManagerColumnsLarge = {
   column1: {
     width: iconButtonSize * 3,
     display: 'flex'
@@ -9351,8 +9311,8 @@ var LayerManagerColumnsLarge = makeStyles({
   columns35: {
     width: "calc((100% - ".concat(iconButtonSize * totalButtons, "px) * 0.75)")
   }
-});
-var LayerManagerColumnsSmall = makeStyles({
+};
+var LayerManagerColumnsSmall = {
   column1: {
     width: iconButtonSize * 3
   },
@@ -9375,7 +9335,7 @@ var LayerManagerColumnsSmall = makeStyles({
   columns35: {
     display: 'none'
   }
-});
+};
 var LayerManagerWidth;
 
 (function (LayerManagerWidth) {
@@ -9455,10 +9415,10 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * 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({
+var styles$3 = {
   row: {
     height: '32px'
   },
@@ -9469,7 +9429,7 @@ var useStyles$o = makeStyles({
     fontFamily: 'Roboto',
     opacity: 0.67
   }
-});
+};
 
 var DescriptionRow = function DescriptionRow(_ref) {
   var mapId = _ref.mapId,
@@ -9482,16 +9442,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$o();
-  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     "data-testid": "descriptionRow",
-    className: classes.row
+    sx: styles$3.row
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: columnSizes.column1
+    sx: columnSizes.column1
   }, /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
@@ -9506,23 +9465,23 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
     mapId: mapId
   })), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column2
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column2
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Layer")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column3
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column3
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Style")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column4
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column4
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Opacity")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column5
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column5
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Dimensions")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column6
+    sx: columnSizes.column6
   }));
 };
 
@@ -9674,22 +9633,6 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$n = makeStyles(function (theme) {
-  return createStyles({
-    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) {
     return l.name === layerName;
@@ -9727,14 +9670,21 @@ var RenderLayers = function RenderLayers(_ref) {
 
   var _a;
 
-  var classes = useStyles$n();
-
   if (!layers || !layers.length) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.dropdownEmpty
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        paddingLeft: 1,
+        height: '32px',
+        display: 'inline-flex',
+        alignItems: 'center'
+      }
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "body1",
-      className: classes.emptyText
+      sx: {
+        fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+        color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
+        fontWeight: 500
+      }
     }, "No service available"));
   }
 
@@ -9793,34 +9743,6 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$m = makeStyles(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 %'
@@ -9853,7 +9775,6 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9898,10 +9819,15 @@ var OpacitySelect = function OpacitySelect(_ref) {
     setTooltipOpen(false);
   }, []);
   var currentOpacityText = "".concat(Math.round(currentOpacity * 100), "  %");
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.opacityDiv,
+  return /*#__PURE__*/React.createElement(Box, {
     onWheel: onWheel,
-    "data-testid": "scrollOpacity"
+    "data-testid": "scrollOpacity",
+    sx: {
+      height: 'calc(100% - 5px)',
+      width: '100%',
+      position: 'relative',
+      top: '2px'
+    }
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Opacity: ".concat(currentOpacityText),
     sx: tooltipContainerStyles(isEnabled),
@@ -9909,16 +9835,32 @@ var OpacitySelect = function OpacitySelect(_ref) {
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(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.createElement("div", {
-    className: classes.sliderBackground
+    onBlur: onBlur,
+    style: {
+      height: '100%',
+      width: '100%',
+      borderRadius: '0',
+      minWidth: '49px'
+    }
+  }, currentOpacityText)), open ? /*#__PURE__*/React.createElement(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.createElement(Box, {
     sx: sliderHeaderStyle
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
@@ -10119,31 +10061,9 @@ var ActivateLayer = function ActivateLayer(_ref) {
  * 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(function (theme) {
-  return createStyles({
-    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(_ref) {
   var layerId = _ref.layerId,
@@ -10175,21 +10095,33 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.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.createElement(Grid, {
-    className: classes.row,
     item: true,
     container: true,
-    "data-testid": "layerRow-".concat(layerId)
+    "data-testid": "layerRow-".concat(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.createElement(Grid, {
     item: true,
-    className: columnSizes.column1
+    sx: columnSizes.column1
   }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableButton, {
     isEnabled: layer.enabled,
     title: layer.name,
@@ -10203,7 +10135,7 @@ var LayerRow = function LayerRow(_ref) {
     onClickActivate: onClickRow
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column2)
+    sx: columnSizes.column2
   }, layerServicesLayout || /*#__PURE__*/React__default.createElement(RenderLayers, {
     layerName: layer.name,
     layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
@@ -10215,13 +10147,13 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), isLayerMissing ? /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.columns35)
+    sx: columnSizes.columns35
   }, /*#__PURE__*/React__default.createElement(AlertBanner, {
     title: "This layer could not be loaded: does not exist on the server.",
     isCompact: true
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column3)
+    sx: columnSizes.column3
   }, layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
     layerStyles: layer.styles,
     currentLayerStyle: layer.style,
@@ -10233,7 +10165,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column4)
+    sx: columnSizes.column4
   }, layerOpacityLayout || /*#__PURE__*/React__default.createElement(OpacitySelect, {
     currentOpacity: layer.opacity,
     onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
@@ -10244,7 +10176,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column5)
+    sx: columnSizes.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
     layerId: layerId,
     layerDimensions: filterNonTimeDimensions(layer.dimensions),
@@ -10262,7 +10194,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: columnSizes.column6
+    sx: columnSizes.column6
   }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerDeleteButton, {
     tooltipTitle: "Delete",
     onClickDelete: function onClickDelete() {
@@ -10817,22 +10749,6 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$k = makeStyles(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(_ref) {
   var mapId = _ref.mapId,
       layerManagerWidth = _ref.layerManagerWidth;
@@ -10890,7 +10806,6 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$k(isSorting);
 
   var keyPressedTrue = function keyPressedTrue(event) {
     if (event.ctrlKey || event.metaKey) {
@@ -10930,8 +10845,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   return /*#__PURE__*/React.createElement(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.createElement(ReactSortable, {
     tag: "div",
     list: layerIds.map(function (layerId) {
@@ -10946,9 +10865,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     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.createElement(LayerRowConnect, {
       mapId: mapId,
@@ -11150,22 +11072,9 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * 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({
-  layerRow: {
-    width: '100%',
-    height: '36px'
-  },
-  icon: {
-    width: '24px',
-    height: '24px'
-  },
-  addBaseLayers: {
-    marginTop: '-2px'
-  }
-});
 
 var BaseLayerRow = function BaseLayerRow(_ref) {
   var mapId = _ref.mapId,
@@ -11176,16 +11085,20 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$j();
-  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
-    className: classes.layerRow,
-    "data-testid": "baseLayerRow"
+    "data-testid": "baseLayerRow",
+    sx: {
+      width: '100%',
+      height: '36px'
+    }
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column1, " ").concat(classes.addBaseLayers)
+    sx: Object.assign(Object.assign({}, columnSizes.column1), {
+      marginTop: '-2px'
+    })
   }, /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
@@ -11198,14 +11111,14 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column2)
+    sx: columnSizes.column2
   }, /*#__PURE__*/React.createElement(BaseLayersConnect, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
   })));
 };
 
-var styles$1 = {
+var styles$2 = {
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -11278,7 +11191,7 @@ var LayerManager = function LayerManager(_ref) {
     source: source,
     leftComponent: leftComponent
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.layerManagerContainer
+    sx: styles$2.layerManagerContainer
   }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
@@ -11296,7 +11209,7 @@ var LayerManager = function LayerManager(_ref) {
   }), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     "data-testid": "layerManagerRowContainer",
-    sx: styles$1.layerRowContainer
+    sx: styles$2.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapId: mapId,
     tooltip: showAddLayersTooltip ? 'Add layers' : '',
@@ -12372,73 +12285,9 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$i = makeStyles(function (theme) {
-  return createStyles({
-    serviceChips: {
-      width: '100%',
-      display: 'inline-flex',
-      alignItems: 'center',
-      overflowX: 'visible',
-      "float": 'left',
-      paddingLeft: '40px',
-      marginRight: function marginRight(_ref) {
-        var margin = _ref.margin;
-        return margin;
-      },
-      marginLeft: function marginLeft(_ref2) {
-        var margin = _ref2.margin;
-        return -margin;
-      },
-      maxWidth: function maxWidth(_ref3) {
-        var maxWidthValue = _ref3.maxWidthValue;
-        return maxWidthValue;
-      },
-      fontSize: '0.875rem'
-    },
-    scrollArrowLeft: {
-      width: '100px',
-      marginBottom: '-12px',
-      height: '34px',
-      backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(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), ".concat(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(_ref4) {
-  var layerSelectWidth = _ref4.layerSelectWidth,
-      activeServices = _ref4.activeServices;
+var ServiceList = function ServiceList(_ref) {
+  var layerSelectWidth = _ref.layerSelectWidth,
+      activeServices = _ref.activeServices;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12458,10 +12307,6 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.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;
@@ -12508,17 +12353,52 @@ var ServiceList = function ServiceList(_ref4) {
   var isAllSelected = Object.values(activeServices).every(function (activeService) {
     return activeService.enabled;
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList,
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '32px',
+      marginTop: '8px',
+      width: '100%',
+      overflow: 'hidden'
+    },
     "data-testid": "serviceList",
     onWheel: onMouseWheelScroll
   }, margin !== 0 && /*#__PURE__*/React.createElement(ChevronLeft, {
-    className: classes.scrollArrowLeft,
     onMouseDown: onLeftChevronPressed,
     onMouseUp: onChevronMouseUp,
-    "data-testid": "leftScrollArrow"
-  }), /*#__PURE__*/React.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), ".concat(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.createElement(Box, {
+    sx: {
+      width: '100%',
+      display: 'inline-flex',
+      alignItems: 'center',
+      overflowX: 'visible',
+      "float": 'left',
+      paddingLeft: '40px',
+      marginRight: "".concat(margin, "px"),
+      marginLeft: "".concat(-margin, "px"),
+      maxWidth: maxWidthValue,
+      fontSize: '0.875rem'
+    },
     ref: ref
   }, activeServices && Object.keys(activeServices) && Object.keys(activeServices).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
     key: "All",
@@ -12535,8 +12415,26 @@ var ServiceList = function ServiceList(_ref4) {
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
       isDisabled: activeServices[serviceId] === undefined
     });
-  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
-    className: classes.scrollArrowRight,
+  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(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), ".concat(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"
@@ -12571,7 +12469,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var styles = {
+var styles$1 = {
   servicesContainer: {
     width: '300px',
     maxHeight: '380px',
@@ -12637,10 +12535,10 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    sx: styles.servicesContainer,
+    sx: styles$1.servicesContainer,
     "data-testid": "ServiceDialog"
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles.header
+    sx: styles$1.header
   }, "Services"), /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, Object.keys(services).map(function (serviceId) {
@@ -12686,11 +12584,11 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       "data-testid": "removeServiceButton"
     }, /*#__PURE__*/React.createElement(Delete, null))))));
   })), /*#__PURE__*/React.createElement(Box, {
-    sx: styles.footer
+    sx: styles$1.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     "data-testid": "openAddServiceButton",
-    sx: styles.button,
+    sx: styles$1.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(Add, null)
   }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
@@ -12764,26 +12662,6 @@ var ServiceOptionsButton = function ServiceOptionsButton() {
   }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null));
 };
 
-var useStyles$h = makeStyles({
-  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(_ref) {
   var mapId = _ref.mapId,
       bounds = _ref.bounds,
@@ -12797,7 +12675,6 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$h();
 
   var _React$useState = React.useState(500),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12837,66 +12714,45 @@ var LayerSelect = function LayerSelect(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
       padding: '6px'
     }
-  }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.keywordFilterButton
+  }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      "float": 'left',
+      position: 'absolute',
+      margin: '12px 0 0 8px',
+      zIndex: 2
+    }
   }, /*#__PURE__*/React.createElement(KeywordFilterButtonConnect, {
     mapId: mapId
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceOptionsButton
-  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'absolute',
+      margin: '12px 0 0 calc(100% - 36px)',
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '48px'
+    }
   }, /*#__PURE__*/React.createElement(ServiceListConnect, {
     layerSelectWidth: width
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.layerSelectContainer
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '0 8px'
+    }
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
     mapId: mapId,
     layerSelectHeight: height
   })));
 };
 
-var useStyles$g = makeStyles(function (theme) {
-  return createStyles({
-    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(_ref) {
   var keyword = _ref.keyword,
       toggleKeywords = _ref.toggleKeywords,
       enableOnlyOneKeyword = _ref.enableOnlyOneKeyword;
-  var classes = useStyles$g();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12926,19 +12782,38 @@ var FilterListItem = function FilterListItem(_ref) {
       onBlur: handleMouseLeave,
       "data-testid": "filterResultListItem"
     }, /*#__PURE__*/React.createElement(ListItem, {
-      className: classes.listItem
+      sx: {
+        width: '100%',
+        minWidth: '300px',
+        padding: '0px',
+        paddingLeft: '10px',
+        paddingRight: '50px',
+        fontSize: '12px'
+      }
     }, /*#__PURE__*/React.createElement(ListItemIcon, {
-      className: classes.listItemIcon
+      sx: {
+        minWidth: '42px'
+      }
     }, /*#__PURE__*/React.createElement(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.createElement(Typography, {
       variant: "body2",
-      className: classes.listItemText
+      sx: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }
     }, keyword.id), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
       style: {
         backgroundColor: 'transparent'
@@ -12950,7 +12825,11 @@ var FilterListItem = function FilterListItem(_ref) {
       },
       "data-testid": "onlyButton"
     }, /*#__PURE__*/React.createElement(Typography, {
-      className: classes.onlyByttonText
+      sx: {
+        color: 'geowebColors.buttons.primary.default.fill',
+        fontSize: '14px',
+        fontWeight: 500
+      }
     }, "ONLY"))) : null));
   }
 
@@ -13053,26 +12932,9 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
  * 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(function (theme) {
-  return createStyles({
-    selectAll: {
-      padding: '15px',
-      paddingLeft: '20px'
-    },
-    "switch": {
-      padding: '15px'
-    },
-    selectAllContainer: {
-      backgroundColor: theme.palette.background.paper,
-      position: 'sticky',
-      top: 0,
-      zIndex: 100
-    }
-  });
-});
 
 var KeywordFilterResults = function KeywordFilterResults(_ref) {
   var allKeywordIds = _ref.allKeywordIds,
@@ -13088,7 +12950,6 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$f();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
     "data-testid": "keywordFilterResults",
@@ -13111,21 +12972,31 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     xs: 12,
     justifyContent: "space-between",
     alignItems: "center",
-    className: classes.selectAllContainer
+    sx: {
+      backgroundColor: 'background.paper',
+      position: 'sticky',
+      top: 0,
+      zIndex: 100
+    }
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
     justifyContent: "flex-start",
     alignItems: "center",
-    className: classes.selectAll
+    sx: {
+      padding: '15px',
+      paddingLeft: '20px'
+    }
   }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
     justifyContent: "flex-end",
     alignContent: "center",
-    className: classes["switch"]
+    sx: {
+      padding: '15px'
+    }
   }, /*#__PURE__*/React.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React.createElement(List, {
     dense: true,
     style: {
@@ -13620,37 +13491,30 @@ var ZoomControlConnect = function ZoomControlConnect(_ref) {
  * 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(function () {
-  return {
-    container: {
-      '& > button': {
-        marginBottom: 8
-      }
-    },
-    wrapper: {
+
+var MapControls = function MapControls(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement(Box, Object.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.createElement("div", Object.assign({
-    className: classes.wrapper
   }, props), /*#__PURE__*/React.createElement(Grid, {
-    className: classes.container,
+    sx: {
+      '& > button': {
+        marginBottom: 1
+      }
+    },
     container: true,
     direction: "column"
   }, children));
@@ -13769,28 +13633,13 @@ var DimensionSelectButton = function DimensionSelectButton(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, null));
 };
 
-var useStyles$d = makeStyles(function () {
+var SmallFontSlider = styled(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({
-  markLabel: {
-    fontSize: '80%'
-  }
-})(Slider);
 
 var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var marks = _ref.marks,
@@ -13806,7 +13655,6 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       _ref$alertColor = _ref.alertColor,
       alertColor = _ref$alertColor === void 0 ? 'red' : _ref$alertColor,
       onChangeDimensionValue = _ref.onChangeDimensionValue;
-  var classes = useStyles$d();
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -13835,9 +13683,15 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var sliderValue = managedValue !== null ? values.findIndex(function (v) {
     return v === managedValue;
   }) : currentIndex;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classes.verticalLevelDimensionSelectContainer,
-    "data-testid": "slider-dimensionSelect"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "slider-dimensionSelect",
+    sx: {
+      height: '320px',
+      margin: '10px',
+      marginLeft: '-5px',
+      minWidth: 120,
+      fontSize: '90%'
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     component: "span",
     m: 1
@@ -13862,7 +13716,12 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
     title: layerName
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
-    className: classes.layerName
+    sx: {
+      paddingLeft: '10px',
+      maxWidth: 130,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
   }, layerName)));
 };
 
@@ -14366,30 +14225,11 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }))));
 };
 
-var useStyles$c = makeStyles(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(_ref) {
   var animationDelay = _ref.animationDelay,
       setMapAnimationDelay = _ref.setMapAnimationDelay;
-  var classes = useStyles$c();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14442,8 +14282,12 @@ var SpeedButton = function SpeedButton(_ref) {
   };
 
   var text = marks[currentValue].text;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.speedButtonDiv
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '24px',
+      width: '24px',
+      position: 'relative'
+    }
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: speedTooltipTitle
   }, /*#__PURE__*/React.createElement(ToolButton, {
@@ -14452,8 +14296,15 @@ var SpeedButton = function SpeedButton(_ref) {
     "data-testid": "speedButton"
   }, /*#__PURE__*/React.createElement(TextIcon, {
     text: text
-  }))), open ? /*#__PURE__*/React.createElement("div", {
-    className: classes.sliderBackground
+  }))), open ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '0 0 60px 0',
+      backgroundColor: 'geowebColors.background.surface',
+      width: '95px',
+      height: '150px',
+      position: 'absolute',
+      bottom: '35px'
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
   }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
@@ -14476,12 +14327,6 @@ var SpeedButton = function SpeedButton(_ref) {
   })) : null);
 };
 
-var timestepAutoSwitchActive = {
-  title: 'Timestep Auto on'
-};
-var timestepAutoSwitchInactive = {
-  title: 'Timestep Auto off'
-};
 var timeStepMarks = [{
   value: 1,
   label: '1 min',
@@ -14588,34 +14433,6 @@ var timeStepMarks = [{
   timeStepValue: 5256000,
   text: '10y'
 }];
-var useStyles$b = makeStyles(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(_ref) {
@@ -14629,131 +14446,109 @@ var TimeStepButton = function TimeStepButton(_ref) {
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {
     return null;
-  } : _ref$onToggleTimestep;
-  var classes = useStyles$b();
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var onClickButton = function onClickButton() {
-    setOpen(!open);
-  };
-
-  var timestepAutoSwitch = !isTimestepAuto ? timestepAutoSwitchInactive : timestepAutoSwitchActive;
-  var timestepAutoTextStyle = !isTimestepAuto ? classes.timestepAutoText : classes.timestepAutoTextOff;
-  var disabledSlider = disabled || isTimestepAuto;
+  } : _ref$onToggleTimestep,
+      _ref$isOpenByDefault = _ref.isOpenByDefault,
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   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;
-
-  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);
+  React__default.useEffect(function () {
+    if (isTimestepAuto) {
+      onChangeTimeStep(timeStepFromLayer);
     }
-  };
-
-  var onKeyDown = function onKeyDown(event) {
-    // disable default Slider behavior
-    event.stopPropagation();
-    event.preventDefault(); // custom logic
+  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
-    if (event.key === 'Tab') {
-      setOpen(!open);
-    }
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      anchorRef = _React$useState2[0],
+      setAnchorRef = _React$useState2[1];
 
-    var newValue = getValueFromKeyboardEvent(event, value, min, max);
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      open = _React$useState4[0],
+      setOpen = _React$useState4[1];
 
-    if (newValue !== null) {
-      onChangeTimeStep(getTimeStepValue(newValue), MapActionOrigin.map);
+  React__default.useEffect(function () {
+    if (anchorRef && isOpenByDefault) {
+      setOpen(true);
     }
-  };
-
-  React.useEffect(function () {
-    if (isTimestepAuto) {
-      onChangeTimeStep(timeStepFromLayer);
+  }, [anchorRef, isOpenByDefault]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
     }
-  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeStepDiv
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: timeStepTitle
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      setOpen(true);
+    },
+    ref: setAnchorRef,
     active: true,
-    onClick: onClickButton,
-    "data-testid": "timeStepButton",
     width: "58px"
-  }, /*#__PURE__*/React.createElement(FastForward, null), /*#__PURE__*/React.createElement(TextIcon, {
-    text: currentMark && currentMark.text || '',
-    "data-testid": "timeStepButtonText"
-  }))), open ? /*#__PURE__*/React.createElement("div", {
-    className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: sliderHeaderStyle
-  }, "Time step"), /*#__PURE__*/React.createElement(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.createElement(Tooltip, {
-    title: timestepAutoSwitch.title
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-testid": "timestepAutoSwitchTooltip"
-  }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(Switch, {
-      checked: isTimestepAuto,
-      onChange: function onChange() {
-        return onToggleTimestepAuto();
-      },
-      disabled: disabled,
-      id: "timestepAutoSwitch",
-      disableRipple: true,
+  }, /*#__PURE__*/React__default.createElement(FastForward, null), /*#__PURE__*/React__default.createElement(TextIcon, {
+    text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+  }))), /*#__PURE__*/React__default.createElement(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.createElement(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.createElement(MenuItem, {
+    onClick: function onClick() {
+      onToggleTimestepAuto();
+      setOpen(false);
+    },
+    selected: isTimestepAuto,
+    disabled: disabled
+  }, "Auto")));
 };
 
-var OptionsPopOver = withStyles(function (theme) {
+var OptionsPopOver = styled(Popover)(function (_ref) {
+  var theme = _ref.theme;
   return {
-    paper: {
-      height: '24px',
-      padding: '8px',
-      borderRadius: '0',
+    '& .MuiPaper-root': {
+      padding: '5px',
       overflow: 'visible',
       backgroundColor: theme.palette.geowebColors.background.surface
     }
   };
-})(Popover);
+});
 
-var OptionsMenuButton = function OptionsMenuButton(_ref) {
-  var autoUpdateBtn = _ref.autoUpdateBtn,
-      speedBtn = _ref.speedBtn,
-      timeStepBtn = _ref.timeStepBtn;
+var OptionsMenuButton = function OptionsMenuButton(_ref2) {
+  var autoUpdateBtn = _ref2.autoUpdateBtn,
+      speedBtn = _ref2.speedBtn,
+      timeStepBtn = _ref2.timeStepBtn;
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14771,21 +14566,22 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var open = Boolean(anchorEl);
   var id = open ? 'simple-popover' : undefined;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Options"
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+    title: "Animation options",
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
     active: open
   }, /*#__PURE__*/React.createElement(Options, {
     "data-testid": "optionsIcon"
-  }))), /*#__PURE__*/React.createElement(OptionsPopOver, {
+  })))), /*#__PURE__*/React.createElement(OptionsPopOver, {
     id: id,
     open: open,
     "data-testid": "optionsMenuPopOver",
     anchorEl: anchorEl,
     onClose: handleClose,
     anchorOrigin: {
-      vertical: 'top',
+      vertical: -5,
       horizontal: 'left'
     },
     transformOrigin: {
@@ -14833,53 +14629,18 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$a = makeStyles({
-  buttonContainerBig: {
-    padding: '20px 0px 0px 12px',
-    width: '210px'
-  },
-  buttonContainerSmall: {
-    padding: '20px 0px 0px 12px',
-    width: '80px'
-  }
-});
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
-  var autoUpdateBtn = _ref.autoUpdateBtn,
-      optionsMenuBtn = _ref.optionsMenuBtn,
-      playBtn = _ref.playBtn,
-      speedBtn = _ref.speedBtn,
-      timeStepBtn = _ref.timeStepBtn;
-  var classes = useStyles$a();
-  var matches = useMediaQuery('(min-width:600px)');
+  var optionsMenuBtn = _ref.optionsMenuBtn,
+      playBtn = _ref.playBtn;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "timeSliderButtons"
-  }, matches ? /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 2,
-    className: classes.buttonContainerBig
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, timeStepBtn || /*#__PURE__*/React.createElement(TimeStepButton, {
-    timeStep: 5,
-    onChangeTimeStep: function onChangeTimeStep() {
-      return null;
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, speedBtn || /*#__PURE__*/React.createElement(SpeedButton, {
-    animationDelay: defaultAnimationDelayAtStart,
-    setMapAnimationDelay: function setMapAnimationDelay() {
-      return null;
+    sx: {
+      padding: '20px 0px 0px 16px'
     }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))) : /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1,
-    className: classes.buttonContainerSmall
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, optionsMenuBtn || /*#__PURE__*/React.createElement(OptionsMenuButton, null)), /*#__PURE__*/React.createElement(Grid, {
@@ -15562,12 +15323,6 @@ var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, can
   drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
 };
 
-var useStyles$9 = makeStyles({
-  timeSliderLegend: {
-    height: '50px'
-  }
-});
-
 var getNextSecondsPerPxValue = function getNextSecondsPerPxValue(direction, oldSecondsPerPx, dataScaleToSecondsPerPx) {
   var fullSecondsPerPxValues = secondsPerPxValues(dataScaleToSecondsPerPx);
   var ind = fullSecondsPerPxValues.indexOf(oldSecondsPerPx);
@@ -15605,7 +15360,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime,
       onZoom = _ref.onZoom;
-  var classes = useStyles$9();
 
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
@@ -15685,9 +15439,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     throttledZoom(newSecondsPerPx, newCenterTime);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeSliderLegend,
-    "data-testid": "timeSliderLegend"
+  return /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "timeSliderLegend",
+    sx: {
+      height: '50px'
+    }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
     onMouseMove: function onMouseMove(x, y, event, width) {
@@ -15756,31 +15512,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
  * 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(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: "".concat(theme.palette.geowebColors.timeSlider.timeScaleText.fontSize, "px Roboto")
-    }
-  };
-});
 
 var thumbComponent = function thumbComponent(props) {
   var children = props.children,
@@ -15835,14 +15572,15 @@ var valueLabelFormat = function valueLabelFormat(value) {
   return valueNew;
 };
 
-var GeoWebScaleSlider = withStyles(function (theme) {
+var GeoWebScaleSlider = styled(Slider)(function (_ref) {
+  var theme = _ref.theme;
   return {
-    root: {
+    '&.MuiSlider-root': {
       height: 4,
       width: 167,
       margin: "0 0 18px ".concat(scaleSliderOtherSettings.LEFT_PADDING)
     },
-    thumb: {
+    '& .MuiSlider-thumb': {
       backgroundColor: 'rgba(0,0,0,0)',
       marginTop: 0,
       width: 12,
@@ -15855,57 +15593,56 @@ var GeoWebScaleSlider = withStyles(function (theme) {
         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
       }
     }
   };
-})(Slider);
+});
 var RAIL_GUTTER_OFFSET = 0.4;
 
-var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
-  var layers = _ref.layers,
-      _ref$timeSliderScale = _ref.timeSliderScale,
-      timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      selectedTime = _ref.selectedTime,
-      onChangeTimeSliderScale = _ref.onChangeTimeSliderScale;
-  var classes = useStyles$8();
+var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref2) {
+  var layers = _ref2.layers,
+      _ref2$timeSliderScale = _ref2.timeSliderScale,
+      timeSliderScale = _ref2$timeSliderScale === void 0 ? Scale.Hour : _ref2$timeSliderScale,
+      centerTime = _ref2.centerTime,
+      secondsPerPx = _ref2.secondsPerPx,
+      selectedTime = _ref2.selectedTime,
+      onChangeTimeSliderScale = _ref2.onChangeTimeSliderScale;
   var min = 0;
   var max = marks.length - 1;
   var value = marks.findIndex(function (mark) {
@@ -15949,12 +15686,25 @@ var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
   var scaleTextPadding = {
     paddingLeft: paddingLeft
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.Background,
-    "data-testid": "scaleSlider"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "scaleSlider",
+    sx: {
+      backgroundColor: 'geowebColors.background.surface',
+      width: '229px',
+      height: '40px',
+      paddingTop: '4px',
+      paddingBottom: '7px',
+      boxSizing: 'content-box'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(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.createElement("div", null, /*#__PURE__*/React.createElement(GeoWebScaleSlider, {
     "data-testid": "scaleSliderSlider",
@@ -16165,18 +15915,6 @@ var renderTimeSliderRailWithNeedle = function renderTimeSliderRailWithNeedle(ctx
   drawNewNeedleLabel(ctx, selected, selectedPx, animationStartPx, animationEndPx, scale, theme);
 };
 
-var useStyles$7 = makeStyles({
-  timeSliderRail: {
-    '& div': {
-      outline: 'none'
-    },
-    height: '45px',
-    '& canvas': {
-      display: 'block'
-    }
-  }
-});
-
 var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
   var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
   if (!prevTimeStep) return;
@@ -16214,7 +15952,6 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
       onSetAnimationEndTime = _ref.onSetAnimationEndTime,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime;
-  var classes = useStyles$7();
   var ZOOM_RATIO = 1.1;
 
   var zoomOut = function zoomOut(relativeX) {
@@ -16433,12 +16170,20 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
 
   }, [selectedTimeUnix]);
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeSliderRail,
+  return /*#__PURE__*/React.createElement(Box, {
     style: {
       cursor: cursorStyle
     },
-    "data-testid": "timeSliderRail"
+    "data-testid": "timeSliderRail",
+    sx: {
+      '& div': {
+        outline: 'none'
+      },
+      height: '45px',
+      '& canvas': {
+        display: 'block'
+      }
+    }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
     onMouseDown: onMouseDown,
@@ -16496,19 +16241,9 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
  * 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({
-  container: {
-    display: 'grid',
-    gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-    gridTemplateRows: '50px'
-  },
-  scaleSlider: {
-    height: '50px'
-  }
-});
 
 var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
@@ -16545,12 +16280,15 @@ var TimeSlider = function TimeSlider(_ref) {
       isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
-  var styles = useStyles$6();
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
   return isVisible ? /*#__PURE__*/React.createElement(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.createElement(Grid, {
     item: true
   }, " ", buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React.createElement(Grid, {
@@ -16560,7 +16298,9 @@ var TimeSlider = function TimeSlider(_ref) {
     mapIsActive: mapIsActive
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: styles.scaleSlider
+    sx: {
+      height: '50px'
+    }
   }, scaleSlider || /*#__PURE__*/React.createElement(TimeSliderScaleSlider, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
     timeSliderScale: Scale.Hour,
@@ -16789,20 +16529,11 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
 var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
   var mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(TimeSliderButtons, {
-    autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
-      mapId: mapId
-    }),
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
       mapId: mapId
     }),
     playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
       mapId: mapId
-    }),
-    speedBtn: /*#__PURE__*/React.createElement(SpeedButtonConnect, {
-      mapId: mapId
-    }),
-    timeStepBtn: /*#__PURE__*/React.createElement(TimeStepButtonComponent, {
-      mapId: mapId
     })
   });
 };
@@ -17245,29 +16976,25 @@ var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
  * 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({
-  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.createElement("div", {
+  return /*#__PURE__*/React.createElement(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.createElement("div", null, id), /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
@@ -18565,12 +18292,12 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
       if (onHoverFeature) {
         var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
-          var result = checkHoverFeatures(_this2.geojson, mouseX, mouseY, function (coordinates) {
+          var result = checkHoverFeatures(_this2.geojson, _this2.mouseX, _this2.mouseY, function (coordinates) {
             return _this2.convertGeoCoordsToScreenCoords(coordinates);
           });
 
           if (result) {
-            var featureEvent = {
+            _this2.featureEvent = {
               coordinateIndexInFeature: result.coordinateIndexInFeature,
               featureIndex: result.featureIndex,
               mouseX: mouseX,
@@ -18578,8 +18305,13 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
               isInEditMode: isInEditMode,
               feature: result.feature
             };
-            onHoverFeature(featureEvent);
+            onHoverFeature(_this2.featureEvent);
+          } else {
+            _this2.featureEvent = undefined;
           }
+
+          var webmapjs = _this2.props.webmapjs;
+          webmapjs && webmapjs.draw('AdagucMapDraw::onHoverFeature');
         };
 
         window.clearTimeout(this.mouseStoppedTimer);
@@ -19728,6 +19460,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
 
       if (featureProperties.drawFunction) {
+        var isHovered = this.featureEvent && this.featureEvent.feature === feature;
         featureProperties.drawFunction({
           context: ctx,
           featureIndex: featureIndex,
@@ -19737,7 +19470,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           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);
@@ -21048,22 +20782,9 @@ ReactMapView.defaultProps = {
  * 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(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;
@@ -21078,7 +20799,6 @@ var MapTime = function MapTime(_ref) {
   var dimensions = _ref.dimensions,
       _ref$timeFormat = _ref.timeFormat,
       timeFormat = _ref$timeFormat === void 0 ? defaultTimeFormat : _ref$timeFormat;
-  var classes = useStyles$4();
   var timeDimension = getTimeDimension(dimensions);
 
   if (!timeDimension) {
@@ -21086,12 +20806,19 @@ var MapTime = function MapTime(_ref) {
   }
 
   var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "map-time",
-    className: classes.mapTimeContainer
+    sx: {
+      zIndex: 10,
+      justifySelf: 'center',
+      bottom: '12px',
+      position: 'absolute'
+    }
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
-    className: classes.mapTimeText
+    sx: {
+      fontWeight: 500
+    }
   }, mapTime)));
 };
 
@@ -21108,24 +20835,9 @@ var MapTime = function MapTime(_ref) {
  * 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(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,
@@ -21137,11 +20849,16 @@ var MapView = function MapView(_a) {
       displayTimeInMap = _a$displayTimeInMap === void 0 ? true : _a$displayTimeInMap,
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-  var classes = useStyles$3();
   var dimensions = props.dimensions;
   var adagucRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.mapViewContainer
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'grid',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
+    }
   }, controls && controls.zoomControls && /*#__PURE__*/React.createElement(MapControls, {
     style: {
       top: 0,
@@ -21157,8 +20874,11 @@ var MapView = function MapView(_a) {
     onZoomReset: function onZoomReset() {
       return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.mapView
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      gridColumnStart: 1,
+      gridRowStart: 1
+    }
   }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, props, {
     onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
       adagucRef.current = adaguc;
@@ -21170,6 +20890,207 @@ var MapView = function MapView(_a) {
   }));
 };
 
+var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      firstTouchX = _React$useState2[0],
+      setFirstTouchX = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      firstTouchY = _React$useState4[0],
+      setFirstTouchY = _React$useState4[1];
+
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      secondTouchX = _React$useState6[0],
+      setSecondTouchX = _React$useState6[1];
+
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      secondTouchY = _React$useState8[0],
+      setSecondTouchY = _React$useState8[1];
+
+  var _React$useState9 = React.useState(0),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      prevDist = _React$useState10[0],
+      setPrevDist = _React$useState10[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.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.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.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.useCallback(function () {}, []);
+  React.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.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.
@@ -21286,7 +21207,14 @@ var MapViewConnect = function MapViewConnect(_a) {
   var setSelectedFeature = React.useCallback(function (payload) {
     dispatch(mapActions$1.setSelectedFeature(payload));
   }, [dispatch]);
-  useKeyboardZoomAndPan(mapId);
+  var activeWindowId = useSelector(getActiveWindowId);
+
+  var isActiveWindowId = function isActiveWindowId() {
+    return activeWindowId === mapId;
+  };
+
+  useKeyboardZoomAndPan(isActiveWindowId(), mapId);
+  useTouchZoomPan(isActiveWindowId(), mapId);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%'
@@ -21382,69 +21310,6 @@ var MapViewConnect = function MapViewConnect(_a) {
   }), children));
 };
 
-var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapId) {
-  var activeWindowId = useSelector(getActiveWindowId);
-  var mapIsActive = activeWindowId === mapId;
-  React.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.
@@ -21645,20 +21510,20 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
  * 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(function (theme) {
+
+var mapBoxStyle = function mapBoxStyle(theme) {
   return {
-    box: {
-      boxSizing: 'border-box',
-      "float": 'left',
-      '& .MapViewComponent': {
-        border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
-      }
+    boxSizing: 'border-box',
+    "float": 'left',
+    '& .MapViewComponent': {
+      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
     }
   };
-});
+};
+
 var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   var maps = _ref.maps,
       rows = _ref.rows,
@@ -21669,7 +21534,6 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
       _ref$multiLegend = _ref.multiLegend,
       multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-  var classes = useStyles$2();
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
@@ -21714,10 +21578,10 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     multiLegend: multiLegend
   }), maps.map(function (map, mapIndex) {
     var mapId = map.id;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.box,
+    return /*#__PURE__*/React__default.createElement(Box, {
       key: mapId,
-      style: mapStyle
+      style: mapStyle,
+      sx: mapBoxStyle
     }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
       title: map.title,
       id: mapId,
@@ -22006,18 +21870,32 @@ var componentsLookUp = function componentsLookUp(_ref) {
  * 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(_ref) {
   var viewStateData = _ref.viewStateData,
       groupId = _ref.groupId,
       selected = _ref.selected,
       sourcesById = _ref.sourcesById,
       handleToggle = _ref.handleToggle;
-  var classes = useStyles$1();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.listItem
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: styles.listItem
   }, sourcesById.map(function (source) {
     var isChecked = selected.includes(source.id); // Check if checkbox is checked in another group
 
@@ -22031,7 +21909,7 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
       onClick: function onClick() {
         return handleToggle(source.id);
       },
-      className: classes.listItem
+      sx: styles.listItem
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Checkbox, {
       edge: "start",
       checked: isChecked,
@@ -22040,30 +21918,13 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
       inputProps: {
         'aria-labelledby': source.name
       },
-      className: isNotCheckedElseWhere ? classes.checkboxIsActive : classes.isDisabled,
+      sx: isNotCheckedElseWhere ? styles.checkboxIsActive : styles.isDisabled,
       color: "default"
     })), /*#__PURE__*/React.createElement(Typography, {
-      className: isNotCheckedElseWhere ? classes.isActive : classes.isDisabled
+      sx: isNotCheckedElseWhere ? styles.isActive : styles.isDisabled
     }, source.name));
   }));
 };
-var useStyles$1 = makeStyles(function (theme) {
-  return createStyles({
-    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");
@@ -22078,8 +21939,8 @@ var useStyles$1 = makeStyles(function (theme) {
  * 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(_ref) {
   var viewStateData = _ref.viewStateData,
@@ -22087,15 +21948,26 @@ var SyncGroupList = function SyncGroupList(_ref) {
       _handleToggle = _ref.handleToggle,
       addNewGroup = _ref.addNewGroup,
       removeGroup = _ref.removeGroup;
-  var classes = useStyles();
   return /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, viewStateData.groups.map(function (groupObject, index) {
     return /*#__PURE__*/React.createElement(Box, {
       key: groupObject.id,
-      className: index === 0 ? null : classes.childListItem
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.syncGroupHeader
+      sx: Object.assign({}, index !== 0 && {
+        backgroundColor: 'geowebColors.syncGroups.drawerOpen.fill',
+        boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
+        color: '#000000'
+      })
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        color: 'geowebColors.typographyAndIcons.text',
+        paddingLeft: '15px',
+        paddingTop: '10px'
+      }
     }, /*#__PURE__*/React.createElement(Typography, null, title), /*#__PURE__*/React.createElement(Tooltip, {
       title: index === 0 ? 'Add new group to list' : 'Remove group from list'
     }, /*#__PURE__*/React.createElement(IconButton, {
@@ -22120,24 +21992,6 @@ var SyncGroupList = function SyncGroupList(_ref) {
     }));
   }));
 };
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    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'
-    }
-  });
-});
 
 var SyncGroupViewer = function SyncGroupViewer(_ref) {
   var onClose = _ref.onClose,
@@ -22566,6 +22420,90 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, 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.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Snackbar, Object.assign({
+    "data-testid": "snackbarComponent",
+    open: isOpen,
+    onClose: onCloseSnackbar,
+    autoHideDuration: null,
+    key: id,
+    ClickAwayListenerProps: {
+      mouseEvent: false
+    },
+    action: /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": "close",
+      "data-testid": "snackbarCloseButton",
+      onClick: onCloseSnackbar,
+      sx: {
+        color: 'geowebColors.snackbar.action',
+        '&:hover': {
+          backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+        }
+      }
+    }, /*#__PURE__*/React.createElement(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 = useDispatch();
+
+  var onCloseSnackbar = function onCloseSnackbar() {
+    dispatch(snackbarActions.closeSnackbar());
+  };
+
+  var currentSnackbarMessage = useSelector(function (store) {
+    return getFirstSnackbarMessage(store);
+  });
+  return /*#__PURE__*/React.createElement(DynamicModuleLoader, {
+    modules: [snackbarModuleConfig]
+  }, /*#__PURE__*/React.createElement(SnackbarWrapper, Object.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.
@@ -22583,7 +22521,9 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var MapWarningProperties = function MapWarningProperties(_ref) {
-  var selectedFeatureProperties = _ref.selectedFeatureProperties;
+  var selectedFeatureProperties = _ref.selectedFeatureProperties,
+      languageIndex = _ref.languageIndex;
+  var language = languageIndex || 0;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "map-warning-properties",
     style: {
@@ -22602,13 +22542,13 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     "data-testid": "map-warning-properties-title"
   }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
+  }, "event: ", selectedFeatureProperties.languages[language].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, "Sent:", ' ', moment.utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[language].senderName && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, "Identifier: ", selectedFeatureProperties.identifier));
 };
@@ -22631,4 +22571,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes };