@opengeoweb/core 3.0.0 → 4.1.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('react-window'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', 'react-window', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.reactWindow, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, reactWindow, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('react-window'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'react-window', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.reactWindow, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, reactWindow, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,9 +29,6 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
-    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
-    var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
@@ -1306,7 +1303,7 @@
         status: status
       });
     };
-    var initialState$5 = {
+    var initialState$6 = {
       byId: {},
       allIds: [],
       availableBaseLayers: {
@@ -1314,8 +1311,8 @@
         allIds: []
       }
     };
-    var slice$5 = toolkit.createSlice({
-      initialState: initialState$5,
+    var slice$6 = toolkit.createSlice({
+      initialState: initialState$6,
       name: 'layerReducer',
       reducers: {
         addLayer: function addLayer(draft, action) {
@@ -1549,9 +1546,9 @@
               layerDimensions = _a.layerDimensions;
           var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
           var state = produce.current(draft);
-          var intermediateState = layerStyle === null ? state : reducer$5(state, layerStyleAction);
+          var intermediateState = layerStyle === null ? state : reducer$6(state, layerStyleAction);
           var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-          var newState = layerDimensions === null ? intermediateState : reducer$5(intermediateState, dimensionsAction);
+          var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
           return newState;
         }
       },
@@ -1596,7 +1593,7 @@
             };
             /* Handle the Layer action with the same logic, using the same reducer */
 
-            return reducer$5(prevState, action);
+            return reducer$6(prevState, action);
           }, state);
         }).addCase(setMapPreset, function (draft, action) {
           var mapId = action.payload.mapId;
@@ -1616,8 +1613,8 @@
         });
       }
     });
-    var reducer$5 = slice$5.reducer;
-    var layerActions = slice$5.actions;
+    var reducer$6 = slice$6.reducer;
+    var layerActions = slice$6.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1635,12 +1632,12 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var initialState$4 = {
+    var initialState$5 = {
       byId: {},
       allIds: []
     };
-    var slice$4 = toolkit.createSlice({
-      initialState: initialState$4,
+    var slice$5 = toolkit.createSlice({
+      initialState: initialState$5,
       name: 'serviceReducer',
       reducers: {
         serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1667,13 +1664,13 @@
           var serviceLayers = action.payload.serviceLayers;
           if (serviceLayers === null) return draft;
           var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-          var newState = reducer$4(draft, mapAction);
+          var newState = reducer$5(draft, mapAction);
           return newState;
         });
       }
     });
-    var reducer$4 = slice$4.reducer;
-    var serviceActions = slice$4.actions;
+    var reducer$5 = slice$5.reducer;
+    var serviceActions = slice$5.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1876,13 +1873,13 @@
         source: source
       };
     };
-    var initialState$3 = {
+    var initialState$4 = {
       order: [],
       dialogs: {},
       activeWindowId: undefined
     };
-    var slice$3 = toolkit.createSlice({
-      initialState: initialState$3,
+    var slice$4 = toolkit.createSlice({
+      initialState: initialState$4,
       name: 'uiReducer',
       reducers: {
         registerDialog: function registerDialog(draft, action) {
@@ -1959,8 +1956,8 @@
         }
       }
     });
-    var reducer$3 = slice$3.reducer;
-    var uiActions = slice$3.actions;
+    var reducer$4 = slice$4.reducer;
+    var uiActions = slice$4.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2027,12 +2024,12 @@
       });
     };
 
-    var initialState$2 = {
+    var initialState$3 = {
       byId: {},
       allIds: []
     };
-    var slice$2 = toolkit.createSlice({
-      initialState: initialState$2,
+    var slice$3 = toolkit.createSlice({
+      initialState: initialState$3,
       name: 'mapReducer',
       reducers: {
         registerMap: function registerMap(draft, action) {
@@ -2598,13 +2595,13 @@
             };
             /* Handle the Layer action with the same logic, using the same reducer */
 
-            return reducer$2(prevState, action);
+            return reducer$3(prevState, action);
           }, draft);
         }).addCase(onUpdateLayerInformation, function (draft, action) {
           var mapDimensions = action.payload.mapDimensions;
           if (mapDimensions === null) return draft;
           var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
-          return reducer$2(draft, mapAction);
+          return reducer$3(draft, mapAction);
         }).addCase(mapChangeDimension, function (draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2643,11 +2640,11 @@
         });
       }
     });
-    var mapActions$1 = __assign(__assign({}, slice$2.actions), {
+    var mapActions$1 = __assign(__assign({}, slice$3.actions), {
       setMapPreset: setMapPreset,
       mapChangeDimension: mapChangeDimension
     });
-    var reducer$2 = slice$2.reducer;
+    var reducer$3 = slice$3.reducer;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3145,7 +3142,7 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     var _a$2;
-    var initialState$1 = {
+    var initialState$2 = {
       sources: {
         byId: {},
         allIds: []
@@ -3169,8 +3166,8 @@
         }
       }
     };
-    var slice$1 = toolkit.createSlice({
-      initialState: initialState$1,
+    var slice$2 = toolkit.createSlice({
+      initialState: initialState$2,
       name: 'synchronizationGroupsReducer',
       reducers: {
         syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3314,7 +3311,7 @@
           });
         },
         syncGroupClear: function syncGroupClear() {
-          return initialState$1;
+          return initialState$2;
         },
         syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
           var viewState = action.payload.viewState;
@@ -3386,7 +3383,7 @@
       });
     };
 
-    var syncGroupAddGroup = (_a$2 = slice$1.actions, _a$2.syncGroupAddGroup),
+    var syncGroupAddGroup = (_a$2 = slice$2.actions, _a$2.syncGroupAddGroup),
         syncGroupAddSource = _a$2.syncGroupAddSource,
         syncGroupAddTarget = _a$2.syncGroupAddTarget;
         _a$2.syncGroupClear;
@@ -3395,8 +3392,8 @@
         syncGroupRemoveSource = _a$2.syncGroupRemoveSource,
         syncGroupRemoveTarget = _a$2.syncGroupRemoveTarget,
         syncGroupSetViewState = _a$2.syncGroupSetViewState;
-    var actions = slice$1.actions,
-        reducer$1 = slice$1.reducer;
+    var actions = slice$2.actions,
+        reducer$2 = slice$2.reducer;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3453,7 +3450,7 @@
         actions: actions,
         constants: constants,
         types: types$1,
-        initialState: initialState$1
+        initialState: initialState$2
     });
 
     /* *
@@ -4292,7 +4289,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var initialState = {
+    var initialState$1 = {
       filters: {
         searchFilter: '',
         activeServices: {
@@ -4305,8 +4302,8 @@
         }
       }
     };
-    var slice = toolkit.createSlice({
-      initialState: initialState,
+    var slice$1 = toolkit.createSlice({
+      initialState: initialState$1,
       name: 'layerSelect',
       reducers: {
         setSearchFilter: function setSearchFilter(draft, action) {
@@ -4492,8 +4489,8 @@
         }
       }
     });
-    var reducer = slice.reducer;
-    var layerSelectActions = slice.actions;
+    var reducer$1 = slice$1.reducer;
+    var layerSelectActions = slice$1.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4625,6 +4622,78 @@
       return (_d = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.keywords) === null || _c === void 0 ? void 0 : _c.byId[keywordId]) !== null && _d !== void 0 ? _d : {};
     };
 
+    /* *
+     * 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 snackbarAdapter = toolkit.createEntityAdapter();
+    var initialState = snackbarAdapter.getInitialState();
+    var slice = toolkit.createSlice({
+      initialState: initialState,
+      name: 'snackbar',
+      reducers: {
+        // To open the snackbar call this action
+        // eslint-disable-next-line no-unused-vars
+        openSnackbar: function openSnackbar(draft, action) {},
+        // triggerOpenSnackbarBySaga is triggered by the saga to open the snackbar after the current snackbars have all been closed
+        // DO NOT CALL THIS ACTION DIRECTLY!
+        triggerOpenSnackbarBySaga: function triggerOpenSnackbarBySaga(draft, action) {
+          var snackbarContent = action.payload.snackbarContent; // Ensure we have an id before proceeding
+
+          if (snackbarContent.id === undefined) {
+            return;
+          }
+
+          snackbarAdapter.setOne(draft, snackbarContent);
+        },
+        closeSnackbar: function closeSnackbar(draft) {
+          snackbarAdapter.removeAll(draft);
+        }
+      }
+    });
+    var reducer = slice.reducer;
+    var snackbarActions = slice.actions;
+
+    /* *
+     * 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 getCurrentSnackbarMessages = snackbarAdapter.getSelectors(function (state) {
+      var _a;
+
+      return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
+        entities: {},
+        ids: []
+      };
+    }).selectAll;
+    var getFirstSnackbarMessage = toolkit.createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+      return currentMessages.length > 0 ? currentMessages[0] : undefined;
+    });
+
     var types = /*#__PURE__*/Object.freeze({
         __proto__: null
     });
@@ -5269,7 +5338,7 @@
         }
       });
     }
-    function rootSaga$4() {
+    function rootSaga$5() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5639,7 +5708,7 @@
       });
     }
 
-    function rootSaga$3() {
+    function rootSaga$4() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5732,9 +5801,9 @@
     var synchronizationGroupConfig = {
       id: 'syncronizationGroupStore-module',
       reducerMap: {
-        syncronizationGroupStore: reducer$1
+        syncronizationGroupStore: reducer$2
       },
-      sagas: [rootSaga$4, rootSaga$3]
+      sagas: [rootSaga$5, rootSaga$4]
     };
 
     /* *
@@ -5856,7 +5925,7 @@
         }
       });
     }
-    function rootSaga$2() {
+    function rootSaga$3() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5900,9 +5969,9 @@
     var uiModuleConfig = {
       id: 'ui-module',
       reducerMap: {
-        ui: reducer$3
+        ui: reducer$4
       },
-      sagas: [rootSaga$2]
+      sagas: [rootSaga$3]
     };
 
     /* *
@@ -6070,103 +6139,57 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var parseBoolean = function parseBoolean(value) {
-      return ['true', 'false', true, false].includes(value) && JSON.parse(value);
-    };
-
-    var isBaseLayer = function isBaseLayer(layer) {
-      return ['baseLayer'].includes(layer.layerType);
-    };
-
-    var isMapLayer = function isMapLayer(layer) {
-      return ['mapLayer'].includes(layer.layerType);
-    };
-
-    var isOverLayer = function isOverLayer(layer) {
-      return ['overLayer'].includes(layer.layerType);
-    };
-
     var isValidService = function isValidService(service) {
       return Object.prototype.hasOwnProperty.call(service, 'url');
     };
 
-    var parseLayerType = function parseLayerType(layer, defaultValue) {
-      if (isBaseLayer(layer)) {
-        return LayerType.baseLayer;
-      }
-
-      if (isMapLayer(layer)) {
-        return LayerType.mapLayer;
-      }
-
-      if (isOverLayer(layer)) {
-        return LayerType.overLayer;
-      }
-
-      return defaultValue;
+    var parseBoolean = function parseBoolean(value) {
+      return typeof value === 'boolean' ? value : value === 'true';
     };
-
     var parseLayer = function parseLayer(layer) {
-      var lr = JSON.parse(JSON.stringify(layer)); // Cloning used here to achieve object immutability
-
-      if (!lr.id) {
-        lr.id = generateLayerId();
-      }
-
-      if (lr.layerType) {
-        lr.layerType = parseLayerType(lr, null);
-      }
-
-      if (lr.enabled) {
-        lr.enabled = parseBoolean(lr.enabled);
-      }
-
-      return lr;
+      return __assign(__assign(__assign({}, layer), !layer.id && {
+        id: generateLayerId()
+      }), layer.enabled && {
+        enabled: parseBoolean(layer.enabled)
+      });
     };
 
-    var filterBaseLayers = function filterBaseLayers(presetArray) {
-      var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-      var filteredBaseLayers = hasLayers ? presetArray.filter(function (preset) {
-        return isBaseLayer(preset);
-      }).map(function (filteredPresetLayer) {
-        return parseLayer(filteredPresetLayer);
-      }) : null;
-      var hasBaseLayers = filteredBaseLayers && filteredBaseLayers.length > 0;
-      var baseLayers = hasBaseLayers ? filteredBaseLayers : undefined;
-      return baseLayers;
-    };
-    var filterMapLayers = function filterMapLayers(presetArray) {
-      var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-      var filteredMapLayers = hasLayers ? presetArray.filter(function (preset) {
-        return isMapLayer(preset);
-      }).map(function (filteredPresetLayer) {
-        return parseLayer(filteredPresetLayer);
-      }) : null;
-      var hasMapLayers = filteredMapLayers && filteredMapLayers.length > 0;
-      var mapLayers = hasMapLayers ? filteredMapLayers : undefined;
-      return mapLayers;
+    var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
+      return {
+        mapLayers: existingList,
+        baseLayers: existingList,
+        overLayers: existingList
+      };
     };
-    var filterLayers = function filterLayers(layers) {
+
+    var filterLayers = function filterLayers(layers, layerParser) {
       if (layers === void 0) {
         layers = [];
       }
 
+      if (layerParser === void 0) {
+        layerParser = function layerParser(layer) {
+          return layer;
+        };
+      }
+
       return layers.reduce(function (layers, layer) {
         var mapLayers = layers.mapLayers,
             baseLayers = layers.baseLayers,
             overLayers = layers.overLayers;
+        var parsedLayer = layerParser(layer);
 
         if (layer.layerType === LayerType.baseLayer) {
           return {
             mapLayers: mapLayers,
-            baseLayers: baseLayers.concat(layer),
+            baseLayers: baseLayers.concat(parsedLayer),
             overLayers: overLayers
           };
         }
 
         if (layer.layerType === LayerType.mapLayer) {
           return {
-            mapLayers: mapLayers.concat(layer),
+            mapLayers: mapLayers.concat(parsedLayer),
             baseLayers: baseLayers,
             overLayers: overLayers
           };
@@ -6176,16 +6199,12 @@
           return {
             mapLayers: mapLayers,
             baseLayers: baseLayers,
-            overLayers: overLayers.concat(layer)
+            overLayers: overLayers.concat(parsedLayer)
           };
         }
 
         return layers;
-      }, {
-        mapLayers: [],
-        baseLayers: [],
-        overLayers: []
-      });
+      }, createEmtpyFilteredList([]));
     };
     var filterServices = function filterServices(presetArray) {
       var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
@@ -6196,21 +6215,28 @@
       var services = hasValidServices ? validServices : undefined;
       return services;
     };
-    var filterMapPresets = function filterMapPresets(presets) {
-      var preset = presets && presets.preset;
-      var filterredServices = preset && preset.services ? filterServices(preset.services) : undefined;
-      var baseServices = preset && preset.baseServices ? filterServices(preset.baseServices) : undefined;
-      var filteredBaseLayers = preset && preset.layers ? filterBaseLayers(preset.layers) : undefined;
-      var filteredMapLayers = preset && preset.layers ? filterMapLayers(preset.layers) : undefined;
+    var filterMapPresets = function filterMapPresets(initialAppPreset) {
+      var preset = initialAppPreset && initialAppPreset.preset || {};
+      var layers = preset.layers,
+          services = preset.services,
+          baseServices = preset.baseServices;
+
+      var _a = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+          baseLayers = _a.baseLayers,
+          mapLayers = _a.mapLayers;
+
+      var filterredServices = services ? filterServices(services) : undefined;
+      var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
       var filteredPreset = {
         services: filterredServices,
-        baseServices: baseServices,
-        baseLayers: filteredBaseLayers,
-        mapLayers: filteredMapLayers
+        baseServices: filteredBaseServices,
+        baseLayers: baseLayers,
+        mapLayers: mapLayers
       };
       return filteredPreset;
-    };
-    var getInitialPresets = function getInitialPresets(mapPreset, defaultInitialPresets) {
+    }; // loads the initialPresets.json
+
+    var getInitialAppPresets = function getInitialAppPresets(mapPreset, defaultInitialPresets) {
       var filteredPresets = mapPreset ? filterMapPresets(mapPreset) : null;
       var initialPresets = filteredPresets || filterMapPresets(defaultInitialPresets);
       return initialPresets;
@@ -7143,47 +7169,11 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var defaultCanvasWidth = 150;
-    var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
-
-    var useStyles$s = makeStyles__default["default"](function (theme) {
-      return {
-        legendCanvas: {
-          margin: '10px 0px 10px 0px'
-        },
-        noLegendTitle: {
-          fontSize: '12px',
-          fontFamily: 'Roboto, Helvetica, Arial',
-          color: 'red'
-        },
-        legendComponent: {
-          padding: 10,
-          border: '1px solid grey',
-          display: 'inline-block',
-          backgroundColor: '#FFF',
-          overflow: 'hidden',
-          marginBottom: 4
-        },
-        legendTitle: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: '10px',
-          minWidth: defaultCanvasWidth,
-          wordWrap: 'break-word',
-          color: theme.palette.common.black
-        },
-        legendInfo: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: 10,
-          color: theme.palette.common.black,
-          overflowX: 'hidden',
-          minWidth: defaultCanvasWidth,
-          wordWrap: 'break-word'
-        }
-      };
-    });
+    var defaultCanvasHeight = 30;
     /**
      * Renders a legendgraphic image based on a WMImage.
      *
@@ -7217,7 +7207,6 @@
 
     var Legend = function Legend(_a) {
       var layer = _a.layer;
-      var classes = useStyles$s();
       /* Variable to remember the previous image */
 
       var previousLegendImage = React.useRef(null);
@@ -7263,23 +7252,36 @@
       var wmLayer = getWMLayerById(layer.id);
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
         "data-testid": "legend",
-        className: classes.legendComponent
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        sx: {
+          padding: '10px',
+          border: '1px solid grey',
+          display: 'inline-block',
+          backgroundColor: '#FFF',
+          overflow: 'hidden',
+          marginBottom: 0.5
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         "data-testid": "legend-title",
         style: {
           maxWidth: canvasContainerWidth
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        className: classes.legendTitle,
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: '10px',
+          minWidth: defaultCanvasWidth + "px",
+          wordWrap: 'break-word',
+          color: 'common.black'
+        },
         variant: "h3"
       }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: wmLayer && wmLayer.title || 'loading',
         placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.legendCanvas,
-        style: {
-          height: canvasContainerHeight,
-          width: canvasContainerWidth
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          margin: '10px 0px 10px 0px',
+          height: canvasContainerHeight + "px",
+          width: canvasContainerWidth + "px"
         }
       }, /*#__PURE__*/React__default["default"].createElement(CanvasComponent, {
         redrawInterval: 500,
@@ -7336,16 +7338,21 @@
             renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
           }
         }
-      }))), /*#__PURE__*/React__default["default"].createElement("div", {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         "data-testid": "legend-info",
-        className: classes.legendInfo,
-        style: {
-          maxWidth: canvasContainerWidth
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: 10,
+          color: 'common.black',
+          overflowX: 'hidden',
+          minWidth: defaultCanvasWidth + "px",
+          wordWrap: 'break-word',
+          maxWidth: canvasContainerWidth + "px"
         }
       }, layer.dimensions && layer.dimensions.map(function (dim) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
           key: layer.name + dim.name
-        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
           style: {
             fontWeight: 500
           }
@@ -7366,23 +7373,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$r = makeStyles__default["default"](function () {
-      return {
-        legendList: {
-          display: 'flex',
-          flexDirection: 'column',
-          '&>div:last-child': {
-            marginBottom: 0
-          }
-        },
-        legendContainer: {
-          padding: 4
-        }
-      };
-    });
 
     var LegendDialog = function LegendDialog(_a) {
       var layers = _a.layers,
@@ -7397,7 +7390,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'app' : _e;
-      var classes = useStyles$r();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         startPosition: {
           right: 20,
@@ -7414,11 +7406,19 @@
         onMouseDown: onMouseDown,
         order: order,
         source: source
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.legendContainer
-      }, layers && layers.length > 0 ? /*#__PURE__*/React__namespace.createElement("div", {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: 0.5
+        }
+      }, layers && layers.length > 0 ? /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "LegendList",
-        className: classes.legendList
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          '&>div:last-child': {
+            marginBottom: 0
+          }
+        }
       }, layers.map(function (layer) {
         return /*#__PURE__*/React__namespace.createElement(Legend, {
           key: layer.id,
@@ -8342,7 +8342,7 @@
         }
       });
     }
-    function rootSaga$1() {
+    function rootSaga$2() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -8425,11 +8425,11 @@
     var moduleConfig = {
       id: 'webmap-module',
       reducerMap: {
-        webmap: reducer$2,
-        services: reducer$4,
-        layers: reducer$5
+        webmap: reducer$3,
+        services: reducer$5,
+        layers: reducer$6
       },
-      sagas: [rootSaga$1]
+      sagas: [rootSaga$2]
     };
 
     function _typeof(obj) {
@@ -8465,15 +8465,15 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-      return Object.values(__assign(__assign({}, presets.reduce(function (byId, preset) {
+      return Object.values(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
         var _a;
 
-        return __assign(__assign({}, byId), (_a = {}, _a[preset.id] = preset, _a));
+        return __assign(__assign({}, byUrl), (_a = {}, _a[preset.url] = preset, _a));
       }, {})), userAddedServices));
     };
-    var isService = function isService(param) {
+    var isNoIdService = function isNoIdService(param) {
       var serviceParam = param;
-      return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url), serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.isUserAddedService);
+      return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
     };
 
     var getUserAddedServices = function getUserAddedServices() {
@@ -8482,13 +8482,6 @@
         var parsedData = JSON.parse(storedString);
 
         if (parsedData && _typeof(parsedData) === 'object') {
-          Object.values(parsedData).forEach(function (value) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (value.hasOwnProperty('url') && value.hasOwnProperty('id')) {
-              var service = value;
-              service.isUserAddedService = true;
-            }
-          });
           return Object.entries(parsedData).reduce(function (userServices, _a) {
             var _b;
 
@@ -8496,7 +8489,9 @@
                 serviceUrl = _c[0],
                 service = _c[1];
 
-            return __assign(__assign({}, userServices), isService(service) ? (_b = {}, _b[serviceUrl] = service, _b) : {});
+            return __assign(__assign({}, userServices), isNoIdService(service) ? (_b = {}, _b[serviceUrl] = __assign(__assign({}, service), {
+              isUserAddedService: true
+            }), _b) : {});
           }, {});
         }
       } catch (e) {
@@ -8590,7 +8585,6 @@
       if (!isUserAddedService) return;
       var localStorageServices = getUserAddedServices();
       setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
-        id: serviceUrl,
         name: name,
         url: serviceUrl
       }, _b)));
@@ -8606,7 +8600,7 @@
       delete updatedServices[serviceUrl];
       setUserAddedServices(updatedServices);
     }
-    function rootSaga() {
+    function rootSaga$1() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -8664,9 +8658,9 @@
     var layerSelectConfig = {
       id: 'layerSelect-module',
       reducerMap: {
-        layerSelect: reducer
+        layerSelect: reducer$1
       },
-      sagas: [rootSaga]
+      sagas: [rootSaga$1]
     };
 
     /* *
@@ -8682,33 +8676,164 @@
      * 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 coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig];
+    var hideTime = 4000;
+    function openSnackbarSaga(capturedAction) {
+      var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            snackbarMessage = capturedAction.payload.message;
+            return [4
+            /*yield*/
+            , effects.select(getCurrentSnackbarMessages)];
 
-    /* *
-     * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
-    /**
-     * Converts webmapjs node structure to LayerTree
-     * @param nodesToRecur THe WebMapJS node structure from service.getNodes();
-     */
+          case 1:
+            currentSnackbarMessages = _a.sent();
+            if (!currentSnackbarMessages.length) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.closeSnackbar())];
 
-    var recurseNodes = function recurseNodes(nodesToRecur) {
+          case 2:
+            _a.sent();
+
+            _a.label = 3;
+
+          case 3:
+            id = "snackbar" + Date.now().toString();
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.triggerOpenSnackbarBySaga({
+              snackbarContent: {
+                message: snackbarMessage,
+                id: id
+              }
+            }))];
+
+          case 4:
+            _a.sent(); // If no new snackbar is triggered cancelling this saga, hide the snackbar after X seconds
+
+
+            return [4
+            /*yield*/
+            , effects.delay(hideTime)];
+
+          case 5:
+            // If no new snackbar is triggered cancelling this saga, hide the snackbar after X seconds
+            _a.sent();
+
+            return [4
+            /*yield*/
+            , effects.select(getCurrentSnackbarMessages)];
+
+          case 6:
+            currentSnackbarMessagesOpen = _a.sent();
+            if (!currentSnackbarMessagesOpen.length) return [3
+            /*break*/
+            , 8];
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.closeSnackbar())];
+
+          case 7:
+            _a.sent();
+
+            _a.label = 8;
+
+          case 8:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+    function rootSaga() {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , effects.takeLatest(snackbarActions.openSnackbar.type, openSnackbarSaga)];
+
+          case 1:
+            _a.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+
+    /* *
+     * 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 snackbarModuleConfig = {
+      id: 'snackbar-module',
+      reducerMap: {
+        snackbar: reducer
+      },
+      sagas: [rootSaga]
+    };
+
+    /* *
+     * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig, snackbarModuleConfig];
+
+    /* *
+     * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * */
+    /**
+     * Converts webmapjs node structure to LayerTree
+     * @param nodesToRecur THe WebMapJS node structure from service.getNodes();
+     */
+
+    var recurseNodes = function recurseNodes(nodesToRecur) {
       var newLayerTreeObj = {
         leaf: nodesToRecur.leaf,
         name: nodesToRecur.name,
@@ -9262,25 +9387,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$q = makeStyles__default["default"]({
-      buttonDiv: {
-        position: 'relative'
-      },
-      loadingButton: {
-        position: 'absolute',
-        top: 7,
-        left: 7,
-        zIndex: 1
-      },
-      button: {
-        width: '24px',
-        height: '24px',
-        margin: '6px 0px 0px 10px'
-      }
-    });
 
     var validateServiceUrl = function validateServiceUrl(url) {
       if (url === '' || url === null || typeof url === 'undefined') return false;
@@ -9298,7 +9407,6 @@
           handleClose = _a.handleClose,
           _d = _a.layerType,
           layerType = _d === void 0 ? LayerType.mapLayer : _d;
-      var classes = useStyles$q();
 
       var _e = __read(React__namespace.useState(''), 2),
           serviceURL = _e[0],
@@ -9415,7 +9523,9 @@
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: 2,
-        className: classes.buttonDiv
+        sx: {
+          position: 'relative'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "add-service",
         onClick: handleAddServiceURL,
@@ -9423,7 +9533,12 @@
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
         size: 35,
-        className: classes.loadingButton
+        sx: {
+          position: 'absolute',
+          top: '7px',
+          left: '7px',
+          zIndex: 1
+        }
       })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
         m: 2
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -9467,7 +9582,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$2 = {
+    var styles$4 = {
       buttonDiv: {
         position: 'relative'
       },
@@ -9528,7 +9643,7 @@
         onBlur: onBlurTooltip
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         onClick: handleClose,
-        sx: styles$2.button,
+        sx: styles$4.button,
         disableRipple: true,
         "data-testid": "addLayersButton",
         ref: ref,
@@ -9555,12 +9670,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var iconButtonSize = 30;
     var totalButtons = 5;
-    var LayerManagerColumnsLarge = makeStyles__default["default"]({
+    var LayerManagerColumnsLarge = {
       column1: {
         width: iconButtonSize * 3,
         display: 'flex'
@@ -9584,8 +9699,8 @@
       columns35: {
         width: "calc((100% - " + iconButtonSize * totalButtons + "px) * 0.75)"
       }
-    });
-    var LayerManagerColumnsSmall = makeStyles__default["default"]({
+    };
+    var LayerManagerColumnsSmall = {
       column1: {
         width: iconButtonSize * 3
       },
@@ -9608,7 +9723,7 @@
       columns35: {
         display: 'none'
       }
-    });
+    };
     var LayerManagerWidth;
 
     (function (LayerManagerWidth) {
@@ -9688,10 +9803,10 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$p = makeStyles__default["default"]({
+    var styles$3 = {
       row: {
         height: '32px'
       },
@@ -9702,7 +9817,7 @@
         fontFamily: 'Roboto',
         opacity: 0.67
       }
-    });
+    };
 
     var DescriptionRow = function DescriptionRow(_a) {
       var mapId = _a.mapId,
@@ -9715,16 +9830,15 @@
           layerManagerWidth = _a.layerManagerWidth,
           _e = _a.layerSelect,
           layerSelect = _e === void 0 ? false : _e;
-      var classes = useStyles$p();
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         "data-testid": "descriptionRow",
-        className: classes.row
+        sx: styles$3.row
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1
+        sx: columnSizes.column1
       }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
         preloadedServices: preloadedServices,
         tooltip: tooltip,
@@ -9739,23 +9853,23 @@
       }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
         mapId: mapId
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column2
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column2
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Layer")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column3
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column3
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Style")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column4
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column4
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Opacity")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column5
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.text
+        sx: columnSizes.column5
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$3.text
       }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: columnSizes.column6
+        sx: columnSizes.column6
       }));
     };
 
@@ -9936,24 +10050,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$o = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        dropdownEmpty: {
-          paddingLeft: 8,
-          height: 32,
-          display: 'inline-flex',
-          alignItems: 'center'
-        },
-        emptyText: {
-          fontSize: theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize,
-          color: theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba,
-          fontWeight: 500
-        }
-      });
-    });
 
     var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
       var serviceLayer = layers.find(function (l) {
@@ -9991,14 +10090,22 @@
           layers = _c === void 0 ? [] : _c,
           _d = _a.isEnabled,
           isEnabled = _d === void 0 ? true : _d;
-      var classes = useStyles$o();
 
       if (!layers || !layers.length) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.dropdownEmpty
+        return /*#__PURE__*/React__namespace.createElement(material.Box, {
+          sx: {
+            paddingLeft: 1,
+            height: '32px',
+            display: 'inline-flex',
+            alignItems: 'center'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
           variant: "body1",
-          className: classes.emptyText
+          sx: {
+            fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+            color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
+            fontWeight: 500
+          }
         }, "No service available"));
       }
 
@@ -10070,37 +10177,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$n = makeStyles__default["default"](function (theme) {
-      return {
-        opacityDiv: {
-          height: 'calc(100% - 5px)',
-          width: '100%',
-          position: 'relative',
-          top: '2px'
-        },
-        opacityButton: {
-          height: '100%',
-          width: '100%',
-          borderRadius: '0',
-          minWidth: '49px'
-        },
-        sliderBackground: {
-          padding: '0 0 60px 0',
-          marginLeft: '60px',
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '82px',
-          height: '248px',
-          position: 'fixed',
-          top: '-5px',
-          boxSizing: 'initial',
-          zIndex: 2,
-          boxShadow: theme.shadows[8]
-        }
-      };
-    });
     var marks$1 = [{
       value: 0,
       label: '0 %'
@@ -10133,7 +10212,6 @@
           onLayerChangeOpacity = _a.onLayerChangeOpacity,
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? true : _b;
-      var classes = useStyles$n();
 
       var _c = __read(React__namespace.useState(false), 2),
           open = _c[0],
@@ -10176,10 +10254,15 @@
         setTooltipOpen(false);
       }, []);
       var currentOpacityText = Math.round(currentOpacity * 100) + "  %";
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.opacityDiv,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         onWheel: onWheel,
-        "data-testid": "scrollOpacity"
+        "data-testid": "scrollOpacity",
+        sx: {
+          height: 'calc(100% - 5px)',
+          width: '100%',
+          position: 'relative',
+          top: '2px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Opacity: " + currentOpacityText,
         sx: shared.tooltipContainerStyles(isEnabled),
@@ -10187,16 +10270,32 @@
         open: tooltipOpen
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         tabIndex: 0,
-        className: classes.opacityButton,
         onClick: onClickButton,
         "data-testid": "selectOpacity",
         disableRipple: true,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onFocus: onFocus,
-        onBlur: onBlur
-      }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
+        onBlur: onBlur,
+        style: {
+          height: '100%',
+          width: '100%',
+          borderRadius: '0',
+          minWidth: '49px'
+        }
+      }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 0 60px 0',
+          marginLeft: '60px',
+          backgroundColor: 'geowebColors.background.surface',
+          width: '82px',
+          height: '248px',
+          position: 'fixed',
+          top: '-5px',
+          boxSizing: 'initial',
+          zIndex: 2,
+          boxShadow: 8
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: shared.sliderHeaderStyle
       }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
@@ -10346,26 +10445,22 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$m = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        svgIcon: {
-          fill: function fill(_a) {
-            var isActive = _a.isActive,
-                isEnabled = _a.isEnabled;
-
-            if (isActive) {
-              return theme.palette.common.white;
-            }
 
-            if (isEnabled) {
-              return theme.palette.geowebColors.buttons.flat["default"].color;
-            }
+    var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
+      return {
+        color: function color() {
+          if (isActive) {
+            return 'common.white';
+          }
 
-            return theme.palette.geowebColors.buttons.flat.disabled.color;
+          if (isEnabled) {
+            return 'geowebColors.buttons.flat.default.color';
           }
+
+          return 'geowebColors.buttons.flat.disabled.color';
         }
-      });
-    });
+      };
+    };
 
     var ActivateLayer = function ActivateLayer(_a) {
       var _b = _a.tooltipTitle,
@@ -10375,15 +10470,12 @@
           isActive = _c === void 0 ? false : _c,
           _d = _a.isEnabled,
           isEnabled = _d === void 0 ? true : _d;
-      var classes = useStyles$m({
-        isActive: isActive,
-        isEnabled: isEnabled
-      });
+      var iconStyle = makeIconStyle(isActive, isEnabled);
       return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickActivate,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Flag, {
-          className: classes.svgIcon
+          sx: iconStyle
         }),
         testId: "activateLayerButton",
         isActive: isActive
@@ -10403,31 +10495,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$l = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        row: {
-          background: function background(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.fill : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.fill;
-          },
-          border: function border(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.border : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.border;
-          },
-          borderRadius: theme.shape.borderRadius,
-          marginBottom: 4,
-          height: 34,
-          '&.sortable-drag': {
-            boxShadow: theme.shadows[4] // elevation_06
-
-          },
-          '&.sortable-ghost': {
-            opacity: 0.5
-          }
-        }
-      });
-    });
 
     var LayerRow = function LayerRow(_a) {
       var layerId = _a.layerId,
@@ -10460,21 +10530,33 @@
           layerActiveLayout = _a.layerActiveLayout,
           layerManagerWidth = _a.layerManagerWidth,
           dragHandle = _a.dragHandle;
-      var classes = useStyles$l(isEnabled);
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
 
       var onClickRow = function onClickRow() {
         return onLayerRowClick(layerId);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        className: classes.row,
         item: true,
         container: true,
-        "data-testid": "layerRow-" + layerId
+        "data-testid": "layerRow-" + layerId,
+        sx: {
+          backgroundColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.fill' : 'geowebColors.layerManager.tableRowDisabledCardContainer.fill',
+          border: 1,
+          borderColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.borderColor' : 'geowebColors.layerManager.tableRowDisabledCardContainer.borderColor',
+          borderRadius: 1,
+          marginBottom: 0.5,
+          height: '34px',
+          '&.sortable-drag': {
+            boxShadow: 4
+          },
+          '&.sortable-ghost': {
+            opacity: 0.5
+          }
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1
+        sx: columnSizes.column1
       }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
         isEnabled: layer.enabled,
         title: layer.name,
@@ -10488,7 +10570,7 @@
         onClickActivate: onClickRow
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column2
+        sx: columnSizes.column2
       }, layerServicesLayout || /*#__PURE__*/React__default["default"].createElement(RenderLayers, {
         layerName: layer.name,
         layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
@@ -10500,13 +10582,13 @@
         }
       })), isLayerMissing ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.columns35
+        sx: columnSizes.columns35
       }, /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
         title: "This layer could not be loaded: does not exist on the server.",
         isCompact: true
       })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column3
+        sx: columnSizes.column3
       }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
         layerStyles: layer.styles,
         currentLayerStyle: layer.style,
@@ -10518,7 +10600,7 @@
         }
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column4
+        sx: columnSizes.column4
       }, layerOpacityLayout || /*#__PURE__*/React__default["default"].createElement(OpacitySelect, {
         currentOpacity: layer.opacity,
         onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
@@ -10529,7 +10611,7 @@
         }
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column5
+        sx: columnSizes.column5
       }, layerDimensionLayout || /*#__PURE__*/React__default["default"].createElement(DimensionSelect, {
         layerId: layerId,
         layerDimensions: filterNonTimeDimensions(layer.dimensions),
@@ -10547,7 +10629,7 @@
         }
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnSizes.column6
+        sx: columnSizes.column6
       }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
         tooltipTitle: "Delete",
         onClickDelete: function onClickDelete() {
@@ -11115,24 +11197,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$k = makeStyles__default["default"](function () {
-      return {
-        layerRows: {
-          width: '100%',
-          maxHeight: 'calc(100% - 10px)',
-          overflow: 'auto'
-        },
-        sortableRow: {
-          width: '100%',
-          cursor: function cursor(isSorting) {
-            return isSorting ? 'grabbing' : 'inherit';
-          }
-        }
-      };
-    });
 
     var LayerContainerRow = function LayerContainerRow(_a) {
       var mapId = _a.mapId,
@@ -11189,7 +11256,6 @@
 
       var isSorting = activeDragIndex !== null;
       var isDragDisabled = layerIds.length === 1;
-      var classes = useStyles$k(isSorting);
 
       var keyPressedTrue = function keyPressedTrue(event) {
         if (event.ctrlKey || event.metaKey) {
@@ -11229,8 +11295,12 @@
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
-        className: classes.layerRows,
-        "data-testid": "layerContainerRow"
+        "data-testid": "layerContainerRow",
+        sx: {
+          width: '100%',
+          maxHeight: 'calc(100% - 10px)',
+          overflow: 'auto'
+        }
       }, /*#__PURE__*/React__namespace.createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: layerIds.map(function (layerId) {
@@ -11245,9 +11315,12 @@
         direction: "vertical",
         // hover props
         forceFallback: true,
-        className: classes.sortableRow,
         onStart: onStart,
-        onEnd: onEnd
+        onEnd: onEnd,
+        style: {
+          width: '100%',
+          cursor: isSorting ? 'grabbing' : 'inherit'
+        }
       }, layerIds.map(function (layerId, index) {
         return /*#__PURE__*/React__namespace.createElement(LayerRowConnect, {
           mapId: mapId,
@@ -11449,22 +11522,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$j = makeStyles__default["default"]({
-      layerRow: {
-        width: '100%',
-        height: '36px'
-      },
-      icon: {
-        width: '24px',
-        height: '24px'
-      },
-      addBaseLayers: {
-        marginTop: '-2px'
-      }
-    });
 
     var BaseLayerRow = function BaseLayerRow(_a) {
       var mapId = _a.mapId,
@@ -11475,16 +11535,20 @@
           layerManagerWidth = _a.layerManagerWidth,
           _d = _a.tooltip,
           tooltip = _d === void 0 ? '' : _d;
-      var classes = useStyles$j();
-      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+      var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
-        className: classes.layerRow,
-        "data-testid": "baseLayerRow"
+        "data-testid": "baseLayerRow",
+        sx: {
+          width: '100%',
+          height: '36px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: columnSizes.column1 + " " + classes.addBaseLayers
+        sx: __assign(__assign({}, columnSizes.column1), {
+          marginTop: '-2px'
+        })
       }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
         preloadedServices: preloadedServices,
         tooltip: tooltip,
@@ -11497,7 +11561,7 @@
         }
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: "" + columnSizes.column2
+        sx: columnSizes.column2
       }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
@@ -11520,7 +11584,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$1 = {
+    var styles$2 = {
       layerRowContainer: {
         position: 'relative',
         width: '100%',
@@ -11592,7 +11656,7 @@
         source: source,
         leftComponent: leftComponent
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.layerManagerContainer
+        sx: styles$2.layerManagerContainer
       }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
         "data-testid": "loading-bar",
         color: "secondary",
@@ -11610,7 +11674,7 @@
       }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         "data-testid": "layerManagerRowContainer",
-        sx: styles$1.layerRowContainer
+        sx: styles$2.layerRowContainer
       }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
         mapId: mapId,
         tooltip: showAddLayersTooltip ? 'Add layers' : '',
@@ -12806,72 +12870,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$i = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        serviceChips: {
-          width: '100%',
-          display: 'inline-flex',
-          alignItems: 'center',
-          overflowX: 'visible',
-          "float": 'left',
-          paddingLeft: '40px',
-          marginRight: function marginRight(_a) {
-            var margin = _a.margin;
-            return margin;
-          },
-          marginLeft: function marginLeft(_a) {
-            var margin = _a.margin;
-            return -margin;
-          },
-          maxWidth: function maxWidth(_a) {
-            var maxWidthValue = _a.maxWidthValue;
-            return maxWidthValue;
-          },
-          fontSize: '0.875rem'
-        },
-        scrollArrowLeft: {
-          width: '100px',
-          marginBottom: '-12px',
-          height: '34px',
-          backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-          cursor: 'pointer',
-          marginRight: '-120px',
-          paddingTop: '6px',
-          paddingBottom: '6px',
-          "float": 'left',
-          zIndex: 1,
-          position: 'relative',
-          color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-          '&:hover': {
-            color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-          }
-        },
-        serviceList: {
-          height: '32px',
-          marginTop: '8px',
-          width: '100%',
-          overflow: 'hidden'
-        },
-        scrollArrowRight: {
-          width: '100px',
-          marginBottom: '-12px',
-          height: '34px',
-          paddingTop: '6px',
-          paddingBottom: '6px',
-          backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-          right: '0px',
-          position: 'fixed',
-          cursor: 'pointer',
-          color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-          '&:hover': {
-            color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-          }
-        }
-      });
-    });
 
     var ServiceList = function ServiceList(_a) {
       var layerSelectWidth = _a.layerSelectWidth,
@@ -12892,10 +12893,6 @@
       var ref = React__namespace.useRef(null);
       var scrollSpeed = 5;
       var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-      var classes = useStyles$i({
-        margin: margin,
-        maxWidthValue: maxWidthValue
-      });
 
       var onMouseWheelScroll = function onMouseWheelScroll(e) {
         var delta = e.deltaY;
@@ -12942,17 +12939,52 @@
       var isAllSelected = Object.values(activeServices).every(function (activeService) {
         return activeService.enabled;
       });
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceList,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '32px',
+          marginTop: '8px',
+          width: '100%',
+          overflow: 'hidden'
+        },
         "data-testid": "serviceList",
         onWheel: onMouseWheelScroll
       }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, {
-        className: classes.scrollArrowLeft,
         onMouseDown: onLeftChevronPressed,
         onMouseUp: onChevronMouseUp,
-        "data-testid": "leftScrollArrow"
-      }), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceChips,
+        "data-testid": "leftScrollArrow",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          return {
+            width: '100px',
+            marginBottom: '-12px',
+            height: '34px',
+            backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+            cursor: 'pointer',
+            marginRight: '-120px',
+            paddingTop: '6px',
+            paddingBottom: '6px',
+            "float": 'left',
+            zIndex: 1,
+            position: 'relative',
+            color: 'geowebColors.buttons.tertiary.default.color',
+            '&:hover': {
+              color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+            }
+          };
+        }
+      }), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          width: '100%',
+          display: 'inline-flex',
+          alignItems: 'center',
+          overflowX: 'visible',
+          "float": 'left',
+          paddingLeft: '40px',
+          marginRight: margin + "px",
+          marginLeft: -margin + "px",
+          maxWidth: maxWidthValue,
+          fontSize: '0.875rem'
+        },
         ref: ref
       }, activeServices && Object.keys(activeServices) && Object.keys(activeServices).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
         key: "All",
@@ -12969,8 +13001,26 @@
           isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
           isDisabled: activeServices[serviceId] === undefined
         });
-      })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(theme.ChevronRight, {
-        className: classes.scrollArrowRight,
+      })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(theme.ChevronRight // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+      , {
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          return {
+            width: '100px',
+            marginBottom: '-12px',
+            height: '34px',
+            paddingTop: '6px',
+            paddingBottom: '6px',
+            backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+            right: '0px',
+            position: 'fixed',
+            cursor: 'pointer',
+            color: 'geowebColors.buttons.tertiary.default.color',
+            '&:hover': {
+              color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+            }
+          };
+        },
         onMouseDown: onRightChevronPressed,
         onMouseUp: onChevronMouseUp,
         "data-testid": "rightScrollArrow"
@@ -13021,7 +13071,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var styles = {
+    var styles$1 = {
       servicesContainer: {
         width: '300px',
         maxHeight: '380px',
@@ -13085,10 +13135,10 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.servicesContainer,
+        sx: styles$1.servicesContainer,
         "data-testid": "ServiceDialog"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.header
+        sx: styles$1.header
       }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
       }, Object.keys(services).map(function (serviceId) {
@@ -13134,11 +13184,11 @@
           "data-testid": "removeServiceButton"
         }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null))))));
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles.footer
+        sx: styles$1.footer
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: openAddService,
         "data-testid": "openAddServiceButton",
-        sx: styles.button,
+        sx: styles$1.button,
         variant: "tertiary",
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
       }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
@@ -13225,28 +13275,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$h = makeStyles__default["default"]({
-      serviceList: {
-        height: '48px'
-      },
-      keywordFilterButton: {
-        "float": 'left',
-        position: 'absolute',
-        margin: '12px 0 0 8px',
-        zIndex: 2
-      },
-      serviceOptionsButton: {
-        position: 'absolute',
-        margin: '12px 0 0 calc(100% - 36px)',
-        zIndex: 2
-      },
-      layerSelectContainer: {
-        padding: '0 8px'
-      }
-    });
 
     var LayerSelect = function LayerSelect(_a) {
       var mapId = _a.mapId,
@@ -13261,7 +13292,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'module' : _e;
-      var classes = useStyles$h();
 
       var _f = __read(React__namespace.useState(500), 2),
           height = _f[0],
@@ -13299,22 +13329,35 @@
         onMouseDown: onMouseDown,
         order: order,
         source: source
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
           padding: '6px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.keywordFilterButton
+      }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          "float": 'left',
+          position: 'absolute',
+          margin: '12px 0 0 8px',
+          zIndex: 2
+        }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterButtonConnect, {
         mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceOptionsButton
-      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.serviceList
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          position: 'absolute',
+          margin: '12px 0 0 calc(100% - 36px)',
+          zIndex: 2
+        }
+      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '48px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
         layerSelectWidth: width
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.layerSelectContainer
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 8px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
         mapId: mapId,
         layerSelectHeight: height
@@ -13334,47 +13377,14 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$g = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        listItem: {
-          width: '100%',
-          minWidth: '300px',
-          padding: '0px',
-          paddingLeft: '10px',
-          paddingRight: '50px',
-          fontSize: '12px'
-        },
-        onlyByttonText: {
-          color: theme.palette.geowebColors.buttons.primary["default"].fill,
-          fontSize: '14px',
-          fontWeight: 500
-        },
-        checkbox: {
-          paddingTop: '6px',
-          paddingBottom: '7px',
-          '&&:hover': {
-            backgroundColor: 'transparent'
-          }
-        },
-        listItemIcon: {
-          minWidth: '42px'
-        },
-        listItemText: {
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden'
-        }
-      });
-    });
 
     var FilterListItem = function FilterListItem(_a) {
       var keyword = _a.keyword,
           toggleKeywords = _a.toggleKeywords,
           enableOnlyOneKeyword = _a.enableOnlyOneKeyword;
-      var classes = useStyles$g();
 
       var _b = __read(React__namespace.useState(false), 2),
           hovering = _b[0],
@@ -13403,19 +13413,38 @@
           onBlur: handleMouseLeave,
           "data-testid": "filterResultListItem"
         }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
-          className: classes.listItem
+          sx: {
+            width: '100%',
+            minWidth: '300px',
+            padding: '0px',
+            paddingLeft: '10px',
+            paddingRight: '50px',
+            fontSize: '12px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
-          className: classes.listItemIcon
+          sx: {
+            minWidth: '42px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
           color: "secondary",
           checked: keyword.checked,
           onChange: function onChange() {
             return toggleCheckbox(keyword.id);
           },
-          className: classes.checkbox
+          sx: {
+            paddingTop: '6px',
+            paddingBottom: '7px',
+            '&&:hover': {
+              backgroundColor: 'transparent'
+            }
+          }
         })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
           variant: "body2",
-          className: classes.listItemText
+          sx: {
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden'
+          }
         }, keyword.id), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           style: {
             backgroundColor: 'transparent'
@@ -13427,7 +13456,11 @@
           },
           "data-testid": "onlyButton"
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-          className: classes.onlyByttonText
+          sx: {
+            color: 'geowebColors.buttons.primary.default.fill',
+            fontSize: '14px',
+            fontWeight: 500
+          }
         }, "ONLY"))) : null));
       }
 
@@ -13530,26 +13563,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$f = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        selectAll: {
-          padding: '15px',
-          paddingLeft: '20px'
-        },
-        "switch": {
-          padding: '15px'
-        },
-        selectAllContainer: {
-          backgroundColor: theme.palette.background.paper,
-          position: 'sticky',
-          top: 0,
-          zIndex: 100
-        }
-      });
-    });
 
     var KeywordFilterResults = function KeywordFilterResults(_a) {
       var allKeywordIds = _a.allKeywordIds,
@@ -13565,7 +13581,6 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'module' : _e;
-      var classes = useStyles$f();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         title: showTitle ? "Filter Results " + mapId : 'Filter Results',
         "data-testid": "keywordFilterResults",
@@ -13588,21 +13603,31 @@
         xs: 12,
         justifyContent: "space-between",
         alignItems: "center",
-        className: classes.selectAllContainer
+        sx: {
+          backgroundColor: 'background.paper',
+          position: 'sticky',
+          top: 0,
+          zIndex: 100
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         xs: 6,
         justifyContent: "flex-start",
         alignItems: "center",
-        className: classes.selectAll
+        sx: {
+          padding: '15px',
+          paddingLeft: '20px'
+        }
       }, "Select all"), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         xs: 6,
         justifyContent: "flex-end",
         alignContent: "center",
-        className: classes["switch"]
+        sx: {
+          padding: '15px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React__namespace.createElement(material.List, {
         dense: true,
         style: {
@@ -13989,15 +14014,10 @@
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         placement: placement,
         title: title
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        component: "span",
-        sx: {
-          marginBottom: '8px'
-        }
       }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, __assign({
         onClick: onClick,
         active: isActive
-      }, props), children)));
+      }, props), children));
     };
 
     /* *
@@ -14099,37 +14119,30 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$e = makeStyles__default["default"](function () {
-      return {
-        container: {
-          '& > button': {
-            marginBottom: 8
-          }
-        },
-        wrapper: {
+
+    var MapControls = function MapControls(_a) {
+      var children = _a.children,
+          props = __rest(_a, ["children"]);
+
+      return /*#__PURE__*/React__namespace.createElement(material.Box, __assign({
+        sx: {
           position: 'absolute',
           overflow: 'visible',
           display: 'block',
           left: 0,
-          margin: 8,
+          margin: 1,
           zIndex: 50,
-          top: 96
+          top: '96px'
         }
-      };
-    });
-
-    var MapControls = function MapControls(_a) {
-      var children = _a.children,
-          props = __rest(_a, ["children"]);
-
-      var classes = useStyles$e();
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({
-        className: classes.wrapper
       }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        className: classes.container,
+        sx: {
+          '& > button': {
+            marginBottom: 1
+          }
+        },
         container: true,
         direction: "column"
       }, children));
@@ -14261,31 +14274,16 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$d = makeStyles__default["default"](function () {
+    var SmallFontSlider = material.styled(material.Slider)(function () {
       return {
-        verticalLevelDimensionSelectContainer: {
-          height: '320px',
-          margin: '10px',
-          marginLeft: '-5px',
-          minWidth: 120,
-          fontSize: '90%'
-        },
-        layerName: {
-          paddingLeft: '10px',
-          maxWidth: 130,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
+        '& .MuiSlider-markLabel': {
+          fontSize: '80%'
         }
       };
     });
-    var SmallFontSlider = withStyles__default["default"]({
-      markLabel: {
-        fontSize: '80%'
-      }
-    })(material.Slider);
 
     var DimensionSelectSlider = function DimensionSelectSlider(_a) {
       var marks = _a.marks,
@@ -14301,7 +14299,6 @@
           _f = _a.alertColor,
           alertColor = _f === void 0 ? 'red' : _f,
           onChangeDimensionValue = _a.onChangeDimensionValue;
-      var classes = useStyles$d();
 
       var _g = __read(React.useState(0), 2),
           currentIndex = _g[0],
@@ -14329,9 +14326,15 @@
       var sliderValue = managedValue !== null ? values.findIndex(function (v) {
         return v === managedValue;
       }) : currentIndex;
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.verticalLevelDimensionSelectContainer,
-        "data-testid": "slider-dimensionSelect"
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "slider-dimensionSelect",
+        sx: {
+          height: '320px',
+          margin: '10px',
+          marginLeft: '-5px',
+          minWidth: 120,
+          fontSize: '90%'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "span",
         m: 1
@@ -14356,9 +14359,14 @@
         title: layerName
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body2",
-        className: classes.layerName
-      }, layerName)));
-    };
+        sx: {
+          paddingLeft: '10px',
+          maxWidth: 130,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      }, layerName)));
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14830,6 +14838,8 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
+    var titleOn = 'Auto update on';
+    var titleOff = 'Auto update off';
 
     var AutoUpdateButton = function AutoUpdateButton(_a) {
       var _b = _a.toggleAutoUpdate,
@@ -14841,10 +14851,9 @@
           _d = _a.disabled,
           disabled = _d === void 0 ? false : _d;
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: isAutoUpdating ? 'Auto update on' : 'Auto update off'
-      }, /*#__PURE__*/React__namespace.createElement("span", {
+        title: isAutoUpdating ? titleOn : titleOff,
         "data-testid": "autoUpdateButtonTooltip"
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         active: isAutoUpdating,
         disabled: disabled,
         onClick: function onClick() {
@@ -14871,32 +14880,14 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = makeStyles__default["default"](function (theme) {
-      return {
-        speedButtonDiv: {
-          height: '24px',
-          width: '24px',
-          position: 'relative'
-        },
-        sliderBackground: {
-          padding: '0 0 60px 0',
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '95px',
-          height: '150px',
-          position: 'absolute',
-          bottom: '34px',
-          left: '-18px'
-        }
-      };
-    });
+    var speedTooltipTitle = 'Speed';
 
     var SpeedButton = function SpeedButton(_a) {
       var animationDelay = _a.animationDelay,
           setMapAnimationDelay = _a.setMapAnimationDelay;
-      var classes = useStyles$c();
 
       var _b = __read(React__namespace.useState(false), 2),
           open = _b[0],
@@ -14948,18 +14939,29 @@
       };
 
       var text = marks[currentValue].text;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.speedButtonDiv
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          height: '24px',
+          width: '24px',
+          position: 'relative'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Speed"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        title: speedTooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         active: true,
         "data-testid": "speedButton"
       }, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
         text: text
-      })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
+      }))), open ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          padding: '0 0 60px 0',
+          backgroundColor: 'geowebColors.background.surface',
+          width: '95px',
+          height: '150px',
+          position: 'absolute',
+          bottom: '35px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: shared.sliderHeaderStyle
       }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
@@ -14998,12 +15000,6 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var timestepAutoSwitchActive = {
-      title: 'Timestep Auto on'
-    };
-    var timestepAutoSwitchInactive = {
-      title: 'Timestep Auto off'
-    };
     var timeStepMarks = [{
       value: 1,
       label: '1 min',
@@ -15110,34 +15106,7 @@
       timeStepValue: 5256000,
       text: '10y'
     }];
-    var useStyles$b = makeStyles__default["default"](function (theme) {
-      return {
-        timeStepDiv: {
-          width: '58px',
-          height: '24px',
-          position: 'relative'
-        },
-        sliderBackground: {
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '110px',
-          height: '350px',
-          padding: '0 0 83px 0',
-          position: 'absolute',
-          bottom: '34px'
-        },
-        timestepAutoText: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text
-        },
-        timestepAutoTextOff: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text
-        },
-        disabled: {}
-      };
-    });
+    var timeStepTitle = 'Time step';
 
     var TimeStepButton = function TimeStepButton(_a) {
       var timeStep = _a.timeStep,
@@ -15150,112 +15119,90 @@
           _d = _a.onToggleTimestepAuto,
           onToggleTimestepAuto = _d === void 0 ? function () {
         return null;
-      } : _d;
-      var classes = useStyles$b();
-
-      var _e = __read(React__namespace.useState(false), 2),
-          open = _e[0],
-          setOpen = _e[1];
-
-      var onClickButton = function onClickButton() {
-        setOpen(!open);
-      };
-
-      var timestepAutoSwitch = !isTimestepAuto ? timestepAutoSwitchInactive : timestepAutoSwitchActive;
-      var timestepAutoTextStyle = !isTimestepAuto ? classes.timestepAutoText : classes.timestepAutoTextOff;
-      var disabledSlider = disabled || isTimestepAuto;
+      } : _d,
+          _e = _a.isOpenByDefault,
+          isOpenByDefault = _e === void 0 ? false : _e;
       var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
       var currentMark = timeStepMarks.find(function (mark) {
         return mark.timeStepValue === timeStep;
       });
-      var value = currentMark && currentMark.value ? currentMark.value : 0;
-      var min = timeStepMarks[0].value;
-      var max = timeStepMarks[timeStepMarks.length - 1].value;
-
-      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["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 _f = __read(React__default["default"].useState(null), 2),
+          anchorRef = _f[0],
+          setAnchorRef = _f[1];
 
-        var newValue = getValueFromKeyboardEvent(event, value, min, max);
+      var _g = __read(React__default["default"].useState(false), 2),
+          open = _g[0],
+          setOpen = _g[1];
 
-        if (newValue !== null) {
-          onChangeTimeStep(getTimeStepValue(newValue), MapActionOrigin.map);
+      React__default["default"].useEffect(function () {
+        if (anchorRef && isOpenByDefault) {
+          setOpen(true);
         }
-      };
-
-      React__namespace.useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
+      }, [anchorRef, isOpenByDefault]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        onKeyDown: function onKeyDown(event) {
+          event.stopPropagation();
         }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeStepDiv
-      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Time step"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: timeStepTitle
+      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          setOpen(true);
+        },
+        ref: setAnchorRef,
         active: true,
-        onClick: onClickButton,
-        "data-testid": "timeStepButton",
         width: "58px"
-      }, /*#__PURE__*/React__namespace.createElement(theme.FastForward, null), /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
-        text: currentMark && currentMark.text || '',
-        "data-testid": "timeStepButtonText"
-      })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: shared.sliderHeaderStyle
-      }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-        "data-testid": "timeStepButtonSlider",
-        orientation: "vertical",
-        value: value,
-        step: null,
-        min: min,
-        max: max,
-        marks: timeStepMarks,
-        disabled: disabledSlider,
-        onChange: onChangeSlider,
-        onKeyDown: onKeyDown,
-        shouldAutoFocus: true
-      }), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: timestepAutoSwitch.title
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        "data-testid": "timestepAutoSwitchTooltip"
-      }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
-        control: /*#__PURE__*/React__namespace.createElement(material.Switch, {
-          checked: isTimestepAuto,
-          onChange: function onChange() {
-            return onToggleTimestepAuto();
-          },
-          disabled: disabled,
-          id: "timestepAutoSwitch",
-          disableRipple: true,
+      }, /*#__PURE__*/React__default["default"].createElement(theme.FastForward, null), /*#__PURE__*/React__default["default"].createElement(theme.TextIcon, {
+        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Menu, {
+        anchorEl: anchorRef,
+        open: open,
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        BackdropProps: {
           sx: {
-            marginLeft: '18px'
+            backgroundColor: 'transparent'
           }
-        }),
-        label: "Auto",
-        labelPlacement: "end",
-        classes: {
-          label: timestepAutoTextStyle
+        },
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
         }
-      })))) : null);
+      }, timeStepMarks.sort(function (a, b) {
+        return b.timeStepValue - a.timeStepValue;
+      }).map(function (time) {
+        return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+          onClick: function onClick() {
+            if (isTimestepAuto) {
+              onToggleTimestepAuto();
+            }
+
+            onChangeTimeStep(time.timeStepValue, MapActionOrigin.map);
+            setOpen(false);
+          },
+          key: time.timeStepValue,
+          selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.timeStepValue) === time.timeStepValue,
+          disabled: disabled
+        }, time.label);
+      }), /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+        onClick: function onClick() {
+          onToggleTimestepAuto();
+          setOpen(false);
+        },
+        selected: isTimestepAuto,
+        disabled: disabled
+      }, "Auto")));
     };
 
     /* *
@@ -15271,20 +15218,19 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var OptionsPopOver = withStyles__default["default"](function (theme) {
+    var OptionsPopOver = material.styled(material.Popover)(function (_a) {
+      var theme = _a.theme;
       return {
-        paper: {
-          height: '24px',
-          padding: '8px',
-          borderRadius: '0',
+        '& .MuiPaper-root': {
+          padding: '5px',
           overflow: 'visible',
           backgroundColor: theme.palette.geowebColors.background.surface
         }
       };
-    })(material.Popover);
+    });
 
     var OptionsMenuButton = function OptionsMenuButton(_a) {
       var autoUpdateBtn = _a.autoUpdateBtn,
@@ -15306,7 +15252,8 @@
       var open = Boolean(anchorEl);
       var id = open ? 'simple-popover' : undefined;
       return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Options"
+        title: "Animation options",
+        placement: "bottom"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         "data-testid": "optionsMenuButton",
@@ -15320,7 +15267,7 @@
         anchorEl: anchorEl,
         onClose: handleClose,
         anchorOrigin: {
-          vertical: 'top',
+          vertical: -5,
           horizontal: 'left'
         },
         transformOrigin: {
@@ -15368,53 +15315,18 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = makeStyles__default["default"]({
-      buttonContainerBig: {
-        padding: '20px 0px 0px 12px',
-        width: '210px'
-      },
-      buttonContainerSmall: {
-        padding: '20px 0px 0px 12px',
-        width: '80px'
-      }
-    });
 
     var TimeSliderButtons = function TimeSliderButtons(_a) {
-      var autoUpdateBtn = _a.autoUpdateBtn,
-          optionsMenuBtn = _a.optionsMenuBtn,
-          playBtn = _a.playBtn,
-          speedBtn = _a.speedBtn,
-          timeStepBtn = _a.timeStepBtn;
-      var classes = useStyles$a();
-      var matches = material.useMediaQuery('(min-width:600px)');
+      var optionsMenuBtn = _a.optionsMenuBtn,
+          playBtn = _a.playBtn;
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-testid": "timeSliderButtons"
-      }, matches ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         spacing: 2,
-        className: classes.buttonContainerBig
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
-        timeStep: 5,
-        onChangeTimeStep: function onChangeTimeStep() {
-          return null;
-        }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {
-          return null;
+        sx: {
+          padding: '20px 0px 0px 16px'
         }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true,
-        spacing: 1,
-        className: classes.buttonContainerSmall
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -16125,14 +16037,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$9 = makeStyles__default["default"]({
-      timeSliderLegend: {
-        height: '50px'
-      }
-    });
 
     var getNextSecondsPerPxValue = function getNextSecondsPerPxValue(direction, oldSecondsPerPx, dataScaleToSecondsPerPx) {
       var fullSecondsPerPxValues = secondsPerPxValues(dataScaleToSecondsPerPx);
@@ -16171,7 +16078,6 @@
           onSetNewDate = _a.onSetNewDate,
           onSetCenterTime = _a.onSetCenterTime,
           onZoom = _a.onZoom;
-      var classes = useStyles$9();
 
       var _e = __read(useCanvasTarget('mousedown'), 2),
           isAllowedCanvasNodePointed = _e[0],
@@ -16245,9 +16151,11 @@
         throttledZoom(newSecondsPerPx, newCenterTime);
       };
 
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeSliderLegend,
-        "data-testid": "timeSliderLegend"
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "timeSliderLegend",
+        sx: {
+          height: '50px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
         onMouseMove: function onMouseMove(x, y, event, width) {
@@ -16316,31 +16224,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var scaleSliderOtherSettings = {
       LEFT_PADDING: '10%'
     };
-    var useStyles$8 = makeStyles__default["default"](function (theme) {
-      return {
-        Background: {
-          backgroundColor: theme.palette.geowebColors.background.surface,
-          width: '229px',
-          height: '40px',
-          paddingTop: '4px',
-          paddingBottom: '7px',
-          boxSizing: 'content-box'
-        },
-        ScaleText: {
-          width: '67px',
-          height: '15px',
-          padding: '0px 10px 0 8px',
-          color: theme.palette.geowebColors.typographyAndIcons.text,
-          font: theme.palette.geowebColors.timeSlider.timeScaleText.fontSize + "px Roboto"
-        }
-      };
-    });
 
     var thumbComponent = function thumbComponent(props) {
       var children = props.children,
@@ -16395,14 +16284,15 @@
       return valueNew;
     };
 
-    var GeoWebScaleSlider = withStyles__default["default"](function (theme) {
+    var GeoWebScaleSlider = material.styled(material.Slider)(function (_a) {
+      var theme = _a.theme;
       return {
-        root: {
+        '&.MuiSlider-root': {
           height: 4,
           width: 167,
           margin: "0 0 18px " + scaleSliderOtherSettings.LEFT_PADDING
         },
-        thumb: {
+        '& .MuiSlider-thumb': {
           backgroundColor: 'rgba(0,0,0,0)',
           marginTop: 0,
           width: 12,
@@ -16415,46 +16305,46 @@
             display: 'none'
           }
         },
-        valueLabel: {
+        '& .MuiSlider-valueLabel': {
           left: '20px'
         },
-        rail: {
+        '& .MuiSlider-rail': {
           color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
           height: 4,
           width: 170,
           borderRadius: 4.5,
           opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
         },
-        mark: {
+        '& .MuiSlider-mark': {
           backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
           height: 6,
           width: 2,
-          marginTop: -9
-        },
-        markActive: {
-          backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-          height: 6,
-          width: 2,
-          marginTop: -9
+          marginTop: -9,
+          '&.MuiSlider-markActive': {
+            backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
+            height: 6,
+            width: 2,
+            marginTop: -9
+          }
         },
         '@media (max-width: 585px)': {
-          root: {
+          '&.MuiSlider-root': {
             width: 110
           },
-          rail: {
+          '& .MuiSlider-rail': {
             width: 110
           }
         },
         '@media (max-width: 395px)': {
-          root: {
+          '&.MuiSlider-root': {
             width: 60
           },
-          rail: {
+          '& .MuiSlider-rail': {
             width: 60
           }
         }
       };
-    })(material.Slider);
+    });
     var RAIL_GUTTER_OFFSET = 0.4;
 
     var TimeSliderScaleSlider = function TimeSliderScaleSlider(_a) {
@@ -16465,7 +16355,6 @@
           secondsPerPx = _a.secondsPerPx,
           selectedTime = _a.selectedTime,
           onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
-      var classes = useStyles$8();
       var min = 0;
       var max = marks.length - 1;
       var value = marks.findIndex(function (mark) {
@@ -16509,12 +16398,25 @@
       var scaleTextPadding = {
         paddingLeft: paddingLeft
       };
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.Background,
-        "data-testid": "scaleSlider"
-      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "scaleSlider",
+        sx: {
+          backgroundColor: 'geowebColors.background.surface',
+          width: '229px',
+          height: '40px',
+          paddingTop: '4px',
+          paddingBottom: '7px',
+          boxSizing: 'content-box'
+        }
+      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "scaleSliderText",
-        className: classes.ScaleText,
+        sx: {
+          width: '67px',
+          height: '15px',
+          padding: '0px 10px 0 8px',
+          color: 'geowebColors.typographyAndIcons.text',
+          font: '12px Roboto'
+        },
         style: scaleTextPadding
       }, text)), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(GeoWebScaleSlider, {
         "data-testid": "scaleSliderSlider",
@@ -16737,20 +16639,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"]({
-      timeSliderRail: {
-        '& div': {
-          outline: 'none'
-        },
-        height: '45px',
-        '& canvas': {
-          display: 'block'
-        }
-      }
-    });
 
     var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
       var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
@@ -16789,7 +16680,6 @@
           onSetAnimationEndTime = _a.onSetAnimationEndTime,
           onSetNewDate = _a.onSetNewDate,
           onSetCenterTime = _a.onSetCenterTime;
-      var classes = useStyles$7();
       var ZOOM_RATIO = 1.1;
 
       var zoomOut = function zoomOut(relativeX) {
@@ -16997,12 +16887,20 @@
 
       }, [selectedTimeUnix]);
       var theme = material.useTheme();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.timeSliderRail,
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         style: {
           cursor: cursorStyle
         },
-        "data-testid": "timeSliderRail"
+        "data-testid": "timeSliderRail",
+        sx: {
+          '& div': {
+            outline: 'none'
+          },
+          height: '45px',
+          '& canvas': {
+            display: 'block'
+          }
+        }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
         onMouseDown: onMouseDown,
@@ -17059,19 +16957,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"]({
-      container: {
-        display: 'grid',
-        gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-        gridTemplateRows: '50px'
-      },
-      scaleSlider: {
-        height: '50px'
-      }
-    });
 
     var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
       React__namespace.useEffect(function () {
@@ -17108,12 +16996,15 @@
           isVisible = _c === void 0 ? true : _c,
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
-      var styles = useStyles$6();
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        className: styles.container,
-        "data-testid": "timeSlider"
+        "data-testid": "timeSlider",
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
+          gridTemplateRows: '50px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -17123,7 +17014,9 @@
         mapIsActive: mapIsActive
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        className: styles.scaleSlider
+        sx: {
+          height: '50px'
+        }
       }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime.unix(),
         timeSliderScale: Scale.Hour,
@@ -17352,20 +17245,11 @@
     var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_a) {
       var mapId = _a.mapId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, {
-        autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
-          mapId: mapId
-        }),
         optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
           mapId: mapId
         }),
         playBtn: /*#__PURE__*/React__namespace.createElement(PlayButtonConnect, {
           mapId: mapId
-        }),
-        speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
-          mapId: mapId
-        }),
-        timeStepBtn: /*#__PURE__*/React__namespace.createElement(TimeStepButtonComponent, {
-          mapId: mapId
         })
       });
     };
@@ -17830,34 +17714,30 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"]({
-      MapViewLayer: {
-        width: '100%',
-        padding: '2px',
-        margin: 0,
-        wordWrap: 'break-word',
-        border: '1px solid rgba(0, 0, 0, 0.5)',
-        lineHeight: '14px',
-        fontSize: '10px',
-        background: 'rgba(255, 255, 255, 0.5)',
-        display: 'none'
-      }
-    });
 
     var MapViewLayer = function MapViewLayer(props) {
       var id = props.id;
-      var classes = useStyles$5();
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "mapViewLayer",
-        className: classes.MapViewLayer
-      }, /*#__PURE__*/React__namespace.createElement("div", null, id), /*#__PURE__*/React__namespace.createElement("div", {
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: {
-          __html: JSON.stringify(props, null, '--').replace(new RegExp('\\n', 'g'), '<br/>')
-        }
+        sx: {
+          width: '100%',
+          padding: '2px',
+          margin: 0,
+          wordWrap: 'break-word',
+          border: '1px solid rgba(0, 0, 0, 0.5)',
+          lineHeight: '14px',
+          fontSize: '10px',
+          background: 'rgba(255, 255, 255, 0.5)',
+          display: 'none'
+        }
+      }, /*#__PURE__*/React__namespace.createElement("div", null, id), /*#__PURE__*/React__namespace.createElement("div", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify(props, null, '--').replace(new RegExp('\\n', 'g'), '<br/>')
+        }
       }));
     };
 
@@ -19150,12 +19030,12 @@
 
         if (onHoverFeature) {
           var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
-            var result = checkHoverFeatures(_this.geojson, mouseX, mouseY, function (coordinates) {
+            var result = checkHoverFeatures(_this.geojson, _this.mouseX, _this.mouseY, function (coordinates) {
               return _this.convertGeoCoordsToScreenCoords(coordinates);
             });
 
             if (result) {
-              var featureEvent = {
+              _this.featureEvent = {
                 coordinateIndexInFeature: result.coordinateIndexInFeature,
                 featureIndex: result.featureIndex,
                 mouseX: mouseX,
@@ -19163,8 +19043,13 @@
                 isInEditMode: isInEditMode,
                 feature: result.feature
               };
-              onHoverFeature(featureEvent);
+              onHoverFeature(_this.featureEvent);
+            } else {
+              _this.featureEvent = undefined;
             }
+
+            var webmapjs = _this.props.webmapjs;
+            webmapjs && webmapjs.draw('AdagucMapDraw::onHoverFeature');
           };
 
           window.clearTimeout(this.mouseStoppedTimer);
@@ -20277,6 +20162,7 @@
         var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
 
         if (featureProperties.drawFunction) {
+          var isHovered = this.featureEvent && this.featureEvent.feature === feature;
           featureProperties.drawFunction({
             context: ctx,
             featureIndex: featureIndex,
@@ -20286,7 +20172,8 @@
             isInEditMode: isInEditMode,
             feature: feature,
             mouseX: this.mouseX,
-            mouseY: this.mouseY
+            mouseY: this.mouseY,
+            isHovered: isHovered
           });
         } else if (drawStyledMarker || drawMarkerByDefault) {
           this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
@@ -21550,22 +21437,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function () {
-      return {
-        mapTimeContainer: {
-          zIndex: 10,
-          justifySelf: 'center',
-          bottom: 12,
-          position: 'absolute'
-        },
-        mapTimeText: {
-          fontWeight: 500
-        }
-      };
-    });
     var getTimeDimension = function getTimeDimension(dimensions) {
       return dimensions.find(function (dimension) {
         return dimension.name === 'time' && dimension.currentValue !== undefined;
@@ -21580,7 +21454,6 @@
       var dimensions = _a.dimensions,
           _b = _a.timeFormat,
           timeFormat = _b === void 0 ? defaultTimeFormat : _b;
-      var classes = useStyles$4();
       var timeDimension = getTimeDimension(dimensions);
 
       if (!timeDimension) {
@@ -21588,12 +21461,19 @@
       }
 
       var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "map-time",
-        className: classes.mapTimeContainer
+        sx: {
+          zIndex: 10,
+          justifySelf: 'center',
+          bottom: '12px',
+          position: 'absolute'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "caption",
-        className: classes.mapTimeText
+        sx: {
+          fontWeight: 500
+        }
       }, mapTime)));
     };
 
@@ -21610,24 +21490,9 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$3 = makeStyles__default["default"](function () {
-      return {
-        mapViewContainer: {
-          display: 'grid',
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden'
-        },
-        mapView: {
-          gridColumnStart: 1,
-          gridRowStart: 1
-        }
-      };
-    });
 
     var MapView = function MapView(_a) {
       var children = _a.children,
@@ -21640,11 +21505,16 @@
           // rest props
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-      var classes = useStyles$3();
       var dimensions = props.dimensions;
       var adagucRef = React__namespace.useRef(null);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.mapViewContainer
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'grid',
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          overflow: 'hidden'
+        }
       }, controls && controls.zoomControls && /*#__PURE__*/React__namespace.createElement(MapControls, {
         style: {
           top: 0,
@@ -21660,8 +21530,11 @@
         onZoomReset: function onZoomReset() {
           return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
         }
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.mapView
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          gridColumnStart: 1,
+          gridRowStart: 1
+        }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
         onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
           adagucRef.current = adaguc;
@@ -21673,6 +21546,217 @@
       }));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
+      var _a = __read(React__namespace.useState(0), 2),
+          firstTouchX = _a[0],
+          setFirstTouchX = _a[1];
+
+      var _b = __read(React__namespace.useState(0), 2),
+          firstTouchY = _b[0],
+          setFirstTouchY = _b[1];
+
+      var _c = __read(React__namespace.useState(0), 2),
+          secondTouchX = _c[0],
+          setSecondTouchX = _c[1];
+
+      var _d = __read(React__namespace.useState(0), 2),
+          secondTouchY = _d[0],
+          setSecondTouchY = _d[1];
+
+      var _e = __read(React__namespace.useState(0), 2),
+          prevDist = _e[0],
+          setPrevDist = _e[1];
+
+      var isPanning = function isPanning(touches) {
+        return (touches === null || touches === void 0 ? void 0 : touches.length) === 1;
+      };
+
+      var isZooming = function isZooming(touches) {
+        return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
+      };
+
+      var isValidMap = React__namespace.useCallback(function (map, event) {
+        var target = event.target;
+        return map && target.tagName !== 'INPUT' && mapIsActive;
+      }, [mapIsActive]);
+
+      var distance = function distance(x1, y1, x2, y2) {
+        var dx = x1 - x2;
+        var dy = y1 - y2;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+
+      var handleStart = React__namespace.useCallback(function (event) {
+        var map = getWMJSMapById(mapId);
+        if (!isValidMap(map, event)) return;
+        var targetTouches = event.targetTouches;
+        var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
+        setFirstTouchX(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX);
+        setFirstTouchY(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY);
+
+        if (isZooming(targetTouches)) {
+          var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+          setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
+          setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
+        }
+      }, [isValidMap, mapId]);
+      var handleMove = React__namespace.useCallback(function (event) {
+        var map = getWMJSMapById(mapId);
+        if (!isValidMap(map, event)) return;
+        event.preventDefault();
+        var targetTouches = event.targetTouches;
+        var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
+        var firstX = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX;
+        var firstY = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY;
+        var elemWidth = firstTouch.target.clientWidth;
+        var elemHeight = firstTouch.target.clientHeight;
+        var distanceEps = TOUCH_PAN_STEP_PERCENTAGE * Math.min(elemWidth, elemHeight);
+
+        if (isPanning(targetTouches)) {
+          // Pan with a one-point touch
+          var dist = distance(firstTouchX, firstTouchY, firstX, firstY);
+
+          if (dist > distanceEps) {
+            var distX = firstX - firstTouchX;
+            var distY = firstY - firstTouchY;
+            var unitDirX = distX / dist;
+            var unitDirY = -distY / dist;
+            setFirstTouchX(firstX);
+            setFirstTouchY(firstY);
+            map.mapPanPercentage(unitDirX * TOUCH_PAN_STEP_PERCENTAGE, unitDirY * TOUCH_PAN_STEP_PERCENTAGE);
+          }
+        } else if (isZooming(targetTouches)) {
+          // Zoom with a two-point "pinch" touch
+          setFirstTouchX(firstX);
+          setFirstTouchY(firstY);
+          var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+          setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
+          setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
+          var dist = distance(firstTouchX, firstTouchY, secondTouchX, secondTouchY);
+
+          if (Math.abs(dist - prevDist) > distanceEps) {
+            if (dist < prevDist) {
+              map.zoomOut();
+            } else if (dist > prevDist) {
+              map.zoomIn(1);
+            }
+
+            setPrevDist(dist);
+          }
+        }
+      }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+      var handleEnd = React__namespace.useCallback(function () {}, []);
+      React__namespace.useEffect(function () {
+        document.addEventListener('touchstart', handleStart, {
+          passive: false
+        });
+        document.addEventListener('touchmove', handleMove, {
+          passive: false
+        });
+        document.addEventListener('touchend', handleEnd, {
+          passive: false
+        });
+        return function () {
+          document.removeEventListener('touchstart', handleStart);
+          document.removeEventListener('touchmove', handleMove);
+          document.removeEventListener('touchend', handleEnd);
+        };
+      }, [firstTouchX, firstTouchY, secondTouchX, secondTouchY, mapId, mapIsActive, prevDist, handleStart, handleMove, handleEnd]);
+    };
+    var TOUCH_PAN_STEP_PERCENTAGE = 0.02;
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId) {
+      React__namespace.useEffect(function () {
+        var keysPressedDown = {};
+
+        var handleKeyPress = function handleKeyPress(event) {
+          var target = event.target;
+          var map = getWMJSMapById(mapId);
+
+          if (map && target.tagName !== 'INPUT' && mapIsActive) {
+            var key = event.key,
+                type = event.type;
+            keysPressedDown[key] = type === 'keydown';
+
+            if (keysPressedDown['+']) {
+              map.zoomIn(1);
+            } else if (keysPressedDown['-']) {
+              map.zoomOut();
+            }
+
+            var arrowRight = keysPressedDown['ArrowRight'];
+            var arrowLeft = keysPressedDown['ArrowLeft'];
+            var arrowUp = keysPressedDown['ArrowUp'];
+            var arrowDown = keysPressedDown['ArrowDown'];
+            var control = keysPressedDown['Control'];
+
+            if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
+              var x = 0;
+              var y = 0;
+
+              if (arrowRight) {
+                x -= PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowLeft) {
+                x += PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowUp) {
+                y -= PAN_STEP_PERCENTAGE;
+              }
+
+              if (arrowDown) {
+                y += PAN_STEP_PERCENTAGE;
+              }
+
+              map.mapPanPercentage(x, y);
+            }
+          }
+        };
+
+        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener('keyup', handleKeyPress);
+        return function () {
+          document.removeEventListener('keydown', handleKeyPress);
+          document.removeEventListener('keyup', handleKeyPress);
+        };
+      }, [mapIsActive, mapId]);
+    };
+    var PAN_STEP_PERCENTAGE = 0.02;
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -21789,7 +21873,14 @@
       var setSelectedFeature = React__namespace.useCallback(function (payload) {
         dispatch(mapActions$1.setSelectedFeature(payload));
       }, [dispatch]);
-      useKeyboardZoomAndPan(mapId);
+      var activeWindowId = reactRedux.useSelector(getActiveWindowId);
+
+      var isActiveWindowId = function isActiveWindowId() {
+        return activeWindowId === mapId;
+      };
+
+      useKeyboardZoomAndPan(isActiveWindowId(), mapId);
+      useTouchZoomPan(isActiveWindowId(), mapId);
       return /*#__PURE__*/React__namespace.createElement("div", {
         style: {
           height: '100%'
@@ -21885,69 +21976,6 @@
       }), children));
     };
 
-    var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapId) {
-      var activeWindowId = reactRedux.useSelector(getActiveWindowId);
-      var mapIsActive = activeWindowId === mapId;
-      React__namespace.useEffect(function () {
-        var keysPressedDown = {};
-
-        var handleKeyPress = function handleKeyPress(event) {
-          var target = event.target;
-          var map = getWMJSMapById(mapId);
-
-          if (map && target.tagName !== 'INPUT' && mapIsActive) {
-            var key = event.key,
-                type = event.type;
-            keysPressedDown[key] = type === 'keydown';
-
-            if (keysPressedDown['+']) {
-              map.zoomIn(1);
-            } else if (keysPressedDown['-']) {
-              map.zoomOut();
-            }
-
-            var arrowRight = keysPressedDown['ArrowRight'];
-            var arrowLeft = keysPressedDown['ArrowLeft'];
-            var arrowUp = keysPressedDown['ArrowUp'];
-            var arrowDown = keysPressedDown['ArrowDown'];
-            var control = keysPressedDown['Control'];
-
-            if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
-              var x = 0;
-              var y = 0;
-
-              if (arrowRight) {
-                x -= PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowLeft) {
-                x += PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowUp) {
-                y -= PAN_STEP_PERCENTAGE;
-              }
-
-              if (arrowDown) {
-                y += PAN_STEP_PERCENTAGE;
-              }
-
-              map.mapPanPercentage(x, y);
-            }
-          }
-        };
-
-        document.addEventListener('keydown', handleKeyPress);
-        document.addEventListener('keyup', handleKeyPress);
-        return function () {
-          document.removeEventListener('keydown', handleKeyPress);
-          document.removeEventListener('keyup', handleKeyPress);
-        };
-      }, [mapIsActive, mapId]);
-    };
-
-    var PAN_STEP_PERCENTAGE = 0.02;
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -22167,20 +22195,20 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$2 = makeStyles__default["default"](function (theme) {
+
+    var mapBoxStyle = function mapBoxStyle(theme) {
       return {
-        box: {
-          boxSizing: 'border-box',
-          "float": 'left',
-          '& .MapViewComponent': {
-            border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-          }
+        boxSizing: 'border-box',
+        "float": 'left',
+        '& .MapViewComponent': {
+          border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
         }
       };
-    });
+    };
+
     var MultiMapViewConnect = function MultiMapViewConnect(_a) {
       var maps = _a.maps,
           rows = _a.rows,
@@ -22191,7 +22219,6 @@
           showZoomControls = _c === void 0 ? true : _c,
           _d = _a.multiLegend,
           multiLegend = _d === void 0 ? false : _d;
-      var classes = useStyles$2();
       var dispatch = reactRedux.useDispatch();
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
         dispatch(genericActions.syncGroupAddTarget(payload));
@@ -22236,10 +22263,10 @@
         multiLegend: multiLegend
       }), maps.map(function (map, mapIndex) {
         var mapId = map.id;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: classes.box,
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
           key: mapId,
-          style: mapStyle
+          style: mapStyle,
+          sx: mapBoxStyle
         }, /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, {
           title: map.title,
           id: mapId,
@@ -22561,18 +22588,32 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
+    var styles = {
+      listItem: {
+        width: '80%',
+        borderRadius: '5px'
+      },
+      isActive: {
+        color: 'geowebColors.typographyAndIcons.icon'
+      },
+      checkboxIsActive: {
+        color: 'geowebColors.typographyAndIcons.iconLinkActive'
+      },
+      isDisabled: {
+        color: 'geowebColors.typographyAndIcons.iconLinkDisabled'
+      }
+    };
     var SyncGroupListItem = function SyncGroupListItem(_a) {
       var viewStateData = _a.viewStateData,
           groupId = _a.groupId,
           selected = _a.selected,
           sourcesById = _a.sourcesById,
           handleToggle = _a.handleToggle;
-      var classes = useStyles$1();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.listItem
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles.listItem
       }, sourcesById.map(function (source) {
         var isChecked = selected.includes(source.id); // Check if checkbox is checked in another group
 
@@ -22586,7 +22627,7 @@
           onClick: function onClick() {
             return handleToggle(source.id);
           },
-          className: classes.listItem
+          sx: styles.listItem
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
           edge: "start",
           checked: isChecked,
@@ -22595,30 +22636,13 @@
           inputProps: {
             'aria-labelledby': source.name
           },
-          className: isNotCheckedElseWhere ? classes.checkboxIsActive : classes.isDisabled,
+          sx: isNotCheckedElseWhere ? styles.checkboxIsActive : styles.isDisabled,
           color: "default"
         })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
-          className: isNotCheckedElseWhere ? classes.isActive : classes.isDisabled
+          sx: isNotCheckedElseWhere ? styles.isActive : styles.isDisabled
         }, source.name));
       }));
     };
-    var useStyles$1 = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        listItem: {
-          width: '80%',
-          borderRadius: '5px'
-        },
-        isActive: {
-          color: theme.palette.geowebColors.typographyAndIcons.icon
-        },
-        checkboxIsActive: {
-          color: theme.palette.geowebColors.typographyAndIcons.iconLinkActive
-        },
-        isDisabled: {
-          color: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
-      });
-    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22633,8 +22657,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var SyncGroupList = function SyncGroupList(_a) {
       var viewStateData = _a.viewStateData,
@@ -22642,15 +22666,26 @@
           _handleToggle = _a.handleToggle,
           addNewGroup = _a.addNewGroup,
           removeGroup = _a.removeGroup;
-      var classes = useStyles();
       return /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
       }, viewStateData.groups.map(function (groupObject, index) {
         return /*#__PURE__*/React__namespace.createElement(material.Box, {
           key: groupObject.id,
-          className: index === 0 ? null : classes.childListItem
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.syncGroupHeader
+          sx: __assign({}, index !== 0 && {
+            backgroundColor: 'geowebColors.syncGroups.drawerOpen.fill',
+            boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
+            color: '#000000'
+          })
+        }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+          sx: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            color: 'geowebColors.typographyAndIcons.text',
+            paddingLeft: '15px',
+            paddingTop: '10px'
+          }
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: index === 0 ? 'Add new group to list' : 'Remove group from list'
         }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -22675,24 +22710,6 @@
         }));
       }));
     };
-    var useStyles = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        syncGroupHeader: {
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          color: theme.palette.geowebColors.typographyAndIcons.text,
-          paddingLeft: '15px',
-          paddingTop: '10px'
-        },
-        childListItem: {
-          backgroundColor: theme.palette.geowebColors.syncGroups.drawerOpen.fill,
-          boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
-          color: '#000000'
-        }
-      });
-    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23141,6 +23158,90 @@
       }, children)));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var SnackbarWrapper = function SnackbarWrapper(_a) {
+      var children = _a.children,
+          isOpen = _a.isOpen,
+          onCloseSnackbar = _a.onCloseSnackbar,
+          id = _a.id,
+          props = __rest(_a, ["children", "isOpen", "onCloseSnackbar", "id"]);
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children, /*#__PURE__*/React__namespace.createElement(material.Snackbar, __assign({
+        "data-testid": "snackbarComponent",
+        open: isOpen,
+        onClose: onCloseSnackbar,
+        autoHideDuration: null,
+        key: id,
+        ClickAwayListenerProps: {
+          mouseEvent: false
+        },
+        action: /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          "aria-label": "close",
+          "data-testid": "snackbarCloseButton",
+          onClick: onCloseSnackbar,
+          sx: {
+            color: 'geowebColors.snackbar.action',
+            '&:hover': {
+              backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+            }
+          }
+        }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))
+      }, props)));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
+      var props = __rest(_a, []);
+
+      var dispatch = reactRedux.useDispatch();
+
+      var onCloseSnackbar = function onCloseSnackbar() {
+        dispatch(snackbarActions.closeSnackbar());
+      };
+
+      var currentSnackbarMessage = reactRedux.useSelector(function (store) {
+        return getFirstSnackbarMessage(store);
+      });
+      return /*#__PURE__*/React__namespace.createElement(reduxDynamicModules.DynamicModuleLoader, {
+        modules: [snackbarModuleConfig]
+      }, /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __assign({
+        isOpen: !!currentSnackbarMessage,
+        onCloseSnackbar: onCloseSnackbar,
+        message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
+        id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
+      }, props)));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -23158,7 +23259,9 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var MapWarningProperties = function MapWarningProperties(_a) {
-      var selectedFeatureProperties = _a.selectedFeatureProperties;
+      var selectedFeatureProperties = _a.selectedFeatureProperties,
+          languageIndex = _a.languageIndex;
+      var language = languageIndex || 0;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "map-warning-properties",
         style: {
@@ -23177,13 +23280,13 @@
         "data-testid": "map-warning-properties-title"
       }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "event: ", selectedFeatureProperties.languages[language].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
       }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[language].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
       }, "Identifier: ", selectedFeatureProperties.identifier));
     };
@@ -23225,6 +23328,7 @@
     exports.MultiMapViewConnect = MultiMapViewConnect;
     exports.ReactMapView = ReactMapView;
     exports.ReactMapViewLayer = ReactMapViewLayer;
+    exports.SnackbarWrapperConnect = SnackbarWrapperConnect;
     exports.SyncGroupViewerConnect = SyncGroupViewerConnect;
     exports.SyncGroups = index;
     exports.TimeSliderConnect = TimeSliderConnect;
@@ -23235,9 +23339,7 @@
     exports.dateFormat = dateFormat;
     exports.defaultBbox = defaultBbox;
     exports.defaultConfigurations = defaultConfigurations;
-    exports.filterBaseLayers = filterBaseLayers;
     exports.filterLayers = filterLayers;
-    exports.filterMapLayers = filterMapLayers;
     exports.filterMapPresets = filterMapPresets;
     exports.filterNonTimeDimensions = filterNonTimeDimensions;
     exports.filterServices = filterServices;
@@ -23245,7 +23347,7 @@
     exports.generateMapId = generateMapId;
     exports.generateTimesliderId = generateTimesliderId;
     exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
-    exports.getInitialPresets = getInitialPresets;
+    exports.getInitialAppPresets = getInitialAppPresets;
     exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;
     exports.getNextTimeStepForLayerId = getNextTimeStepForLayerId;
     exports.getPreviousTimeStepForLayerId = getPreviousTimeStepForLayerId;
@@ -23254,16 +23356,19 @@
     exports.getWMJSTimeDimensionForLayerId = getWMJSTimeDimensionForLayerId;
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
-    exports.layerReducer = reducer$5;
+    exports.layerReducer = reducer$6;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
     exports.mapSelectors = selectors;
     exports.mapTypes = types$2;
     exports.mapUtils = utils;
+    exports.parseBoolean = parseBoolean;
+    exports.parseLayer = parseLayer;
     exports.publicLayers = publicLayers;
     exports.publicServices = publicServices;
     exports.registerWMJSMap = registerWMJSMap;
     exports.registerWMLayer = registerWMLayer;
+    exports.snackbarActions = snackbarActions;
     exports.store = store;
     exports.syncGroupActions = genericActions;
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
@@ -23273,7 +23378,6 @@
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;
     exports.uiTypes = types;
-    exports.useStyles = useStyles$2;
 
     Object.defineProperty(exports, '__esModule', { value: true });