@opengeoweb/core 4.19.0 → 4.20.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('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('react-resize-detector'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'react-resize-detector', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], 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.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.reactResizeDetector, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, reactResizeDetector, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension, reactRouterDom) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('lodash'), require('immer'), require('moment'), require('react'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('react-resize-detector'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('dompurify'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'lodash', 'immer', 'moment', 'react', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'react-resize-detector', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', 'dompurify', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global._, global.produce, global.moment, global.React, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.reactResizeDetector, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.DOMPurify, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
+})(this, (function (exports, toolkit, _, produce, moment, React, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, reactResizeDetector, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, DOMPurify, reduxToolkit, sagaExtension, reactRouterDom) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,11 +24,11 @@
         return Object.freeze(n);
     }
 
+    var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
     var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
-    var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
     var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
     var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
     var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
@@ -38,6 +38,7 @@
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+    var DOMPurify__namespace = /*#__PURE__*/_interopNamespace(DOMPurify);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -186,38 +187,68 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var LayerType;
-
-    (function (LayerType) {
-      LayerType["mapLayer"] = "mapLayer";
-      LayerType["baseLayer"] = "baseLayer";
-      LayerType["overLayer"] = "overLayer";
-    })(LayerType || (LayerType = {}));
-
-    var LayerStatus;
-
-    (function (LayerStatus) {
-      LayerStatus["default"] = "default";
-      LayerStatus["error"] = "error";
-    })(LayerStatus || (LayerStatus = {}));
-
-    var LayerActionOrigin;
+    var initialState$8 = {
+      byId: {},
+      allIds: []
+    };
+    var slice$8 = toolkit.createSlice({
+      initialState: initialState$8,
+      name: 'serviceReducer',
+      reducers: {
+        serviceSetLayers: function serviceSetLayers(draft, action) {
+          var id = action.payload.id;
+          draft.byId[id] = __assign({}, action.payload);
 
-    (function (LayerActionOrigin) {
-      LayerActionOrigin["layerManager"] = "layerManager";
-      LayerActionOrigin["wmsLoader"] = "WMSLayerTreeConnect";
-      LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
-      LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
-      LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
-      LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
-    })(LayerActionOrigin || (LayerActionOrigin = {}));
+          if (!draft.allIds.includes(id)) {
+            draft.allIds.push(id);
+          }
+        },
+        mapStoreRemoveService: function mapStoreRemoveService(draft, action) {
+          var foundServiceIndex = draft.allIds.findIndex(function (id) {
+            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+          });
 
-    var types$3 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        get LayerType () { return LayerType; },
-        get LayerStatus () { return LayerStatus; },
-        get LayerActionOrigin () { return LayerActionOrigin; }
+          if (foundServiceIndex !== -1) {
+            var serviceId_1 = draft.allIds[foundServiceIndex];
+            draft.allIds = draft.allIds.filter(function (id) {
+              return id !== serviceId_1;
+            });
+            delete draft.byId[serviceId_1];
+          }
+        },
+        fetchInitialServices: function fetchInitialServices( // eslint-disable-next-line no-unused-vars
+        draft, // eslint-disable-next-line no-unused-vars
+        action) {}
+      }
     });
+    var reducer$8 = slice$8.reducer;
+    var serviceActions = slice$8.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 selectorMemoizationOptions = {
+      memoizeOptions: {
+        maxSize: 1000,
+        resultEqualityCheck: _.isEqual
+      }
+    };
+    var isUserAddedService = function isUserAddedService(scope) {
+      return scope === 'user';
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -235,38 +266,123 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var Scale;
 
-    (function (Scale) {
-      Scale[Scale["Minutes5"] = 0] = "Minutes5";
-      Scale[Scale["Hour"] = 1] = "Hour";
-      Scale[Scale["Hours3"] = 2] = "Hours3";
-      Scale[Scale["Hours6"] = 3] = "Hours6";
-      Scale[Scale["Day"] = 4] = "Day";
-      Scale[Scale["Week"] = 5] = "Week";
-      Scale[Scale["Month"] = 6] = "Month";
-      Scale[Scale["Year"] = 7] = "Year";
-      Scale[Scale["DataScale"] = 8] = "DataScale";
-    })(Scale || (Scale = {}));
+    var servicesStore = function servicesStore(store) {
+      return store && store.services ? store.services : null;
+    };
+    /**
+     * Retrieves all serviceIds
+     *
+     * Example: serviceIds = getServiceIds(store)
+     * @param {object} store store: object - object from which the service state will be extracted
+     * @returns {array} returnType: array - an array of all serviceIds
+     */
 
-    var AnimationLength;
 
-    (function (AnimationLength) {
-      AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
-      AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
-      AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
-      AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
-      AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
-      AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
-      AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
-      AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
-    })(AnimationLength || (AnimationLength = {}));
+    var getServiceIds = toolkit.createSelector(servicesStore, function (serviceState) {
+      return serviceState ? serviceState.allIds : [];
+    }, selectorMemoizationOptions);
+    /**
+     * Gets map services
+     *
+     * Example: services = getServices(store)
+     * @param {object} store store: object - Store object
+     * @returns {object} returnType: ServiceState
+     */
 
-    var MapActionOrigin;
+    var getServices = toolkit.createSelector(servicesStore, function (store) {
+      return store ? store.byId : {};
+    }, selectorMemoizationOptions);
+    /**
+     * Gets the service object by its url
+     *
+     * Example: service = getServiceByName(store, 'serviceName')
+     * @param {object} store store: object - Store object
+     * @returns {ReduxService} returnType: Service
+     */
 
-    (function (MapActionOrigin) {
-      MapActionOrigin["map"] = "map";
-    })(MapActionOrigin || (MapActionOrigin = {}));
+    var getServiceByName = toolkit.createSelector([servicesStore, function (state, serviceUrl) {
+      return serviceUrl;
+    }], function (serviceState, serviceUrl) {
+      var foundServiceIndex = serviceState.allIds.findIndex(function (id) {
+        return serviceState.byId[id].serviceUrl === serviceUrl;
+      });
+      /* Add the service based on a url */
+
+      var id = foundServiceIndex !== -1 ? serviceState.allIds[foundServiceIndex] : null;
+
+      if (serviceState && serviceState.byId && serviceState.byId[id]) {
+        return serviceState.byId[id];
+      }
+
+      return null;
+    }, selectorMemoizationOptions);
+    /**
+     * Gets the layer from the store using the serviceUrl and layerName
+     *
+     * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
+     * @param {object} store store: object - object from which the layers state will be extracted
+     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+     * @returns {array} returnType: ServiceLayer[] - All layers within the service object.
+     */
+
+    var getLayersFromService$1 = toolkit.createSelector(getServiceByName, function (service) {
+      return service && service.layers || null;
+    }, selectorMemoizationOptions);
+    /**
+     * Gets the layer from the store using the serviceUrl and layerName
+     *
+     * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
+     * @param {object} store store: object - The application store
+     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+     * @param {string}  layerName layerName: string - Name of the layer in the service
+     * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
+     */
+
+    var getLayerFromService = toolkit.createSelector(function (store, serviceUrl) {
+      return getLayersFromService$1(store, serviceUrl);
+    }, function (store, serviceUrl) {
+      return serviceUrl;
+    }, function (store, serviceUrl, layerName) {
+      return layerName;
+    }, function (layers, serviceUrl, layerName) {
+      if (!layers) {
+        return null;
+      }
+
+      var index = layers.findIndex(function (serviceLayer) {
+        return serviceLayer.name === layerName;
+      });
+
+      if (index === -1) {
+        return null;
+      }
+
+      return layers[index];
+    }, selectorMemoizationOptions);
+    /**
+     * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
+     *
+     * Example: layerStyles = getLayerStyles(store, layerService, layerName);
+     * @param {object} store store: object - store from which the layers state will be extracted
+     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+     * @param {string}  layerName layerName: string - Name of the layer in the service
+     * @returns {array} returnType: Style[] - array containing layer styles
+     */
+
+    var getLayerStyles$1 = toolkit.createSelector(getLayerFromService, function (layer) {
+      return layer && layer.styles ? layer.styles : [];
+    }, selectorMemoizationOptions);
+
+    var selectors$5 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        getServiceIds: getServiceIds,
+        getServices: getServices,
+        getServiceByName: getServiceByName,
+        getLayersFromService: getLayersFromService$1,
+        getLayerFromService: getLayerFromService,
+        getLayerStyles: getLayerStyles$1
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -329,6 +445,16 @@
         delete registeredWMLayersForReactLayerId[layerId];
       }
     };
+    var unRegisterAllWMJSLayersAndMaps = function unRegisterAllWMJSLayersAndMaps() {
+      var allLayerIds = Object.values(registeredWMLayersForReactLayerId);
+      allLayerIds.forEach(function (layerId) {
+        unRegisterWMJSLayer(layerId);
+      });
+      var allMapIds = Object.values(registeredWMMapForReactMapId);
+      allMapIds.forEach(function (mapId) {
+        unRegisterWMJSMap(mapId);
+      });
+    };
     /**
      * Map for registering wmlayers with their id's
      */
@@ -509,27 +635,125 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
+    var Scale;
 
-    var types$2 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        get Scale () { return Scale; },
-        get AnimationLength () { return AnimationLength; },
-        get MapActionOrigin () { return MapActionOrigin; },
-        get LayerType () { return LayerType; },
-        get LayerStatus () { return LayerStatus; },
-        get LayerActionOrigin () { return LayerActionOrigin; }
-    });
-
-    var millisecondsInSecond = 1000;
-    var defaultAnimationDelayAtStart = 250;
-    var defaultDelay = 1000; // [ms]
-
-    var defaultTimeStep = 5;
-    var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+    (function (Scale) {
+      Scale[Scale["Minutes5"] = 0] = "Minutes5";
+      Scale[Scale["Hour"] = 1] = "Hour";
+      Scale[Scale["Hours3"] = 2] = "Hours3";
+      Scale[Scale["Hours6"] = 3] = "Hours6";
+      Scale[Scale["Day"] = 4] = "Day";
+      Scale[Scale["Week"] = 5] = "Week";
+      Scale[Scale["Month"] = 6] = "Month";
+      Scale[Scale["Year"] = 7] = "Year";
+      Scale[Scale["DataScale"] = 8] = "DataScale";
+    })(Scale || (Scale = {}));
 
-    /**
-     * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
-     */
+    var AnimationLength;
+
+    (function (AnimationLength) {
+      AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+      AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+      AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+      AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+      AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+      AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+      AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+      AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+    })(AnimationLength || (AnimationLength = {}));
+
+    var MapActionOrigin;
+
+    (function (MapActionOrigin) {
+      MapActionOrigin["map"] = "map";
+    })(MapActionOrigin || (MapActionOrigin = {}));
+
+    /* *
+     * 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)
+     * */
+    var LayerType;
+
+    (function (LayerType) {
+      LayerType["mapLayer"] = "mapLayer";
+      LayerType["baseLayer"] = "baseLayer";
+      LayerType["overLayer"] = "overLayer";
+    })(LayerType || (LayerType = {}));
+
+    var LayerStatus;
+
+    (function (LayerStatus) {
+      LayerStatus["default"] = "default";
+      LayerStatus["error"] = "error";
+    })(LayerStatus || (LayerStatus = {}));
+
+    var LayerActionOrigin;
+
+    (function (LayerActionOrigin) {
+      LayerActionOrigin["layerManager"] = "layerManager";
+      LayerActionOrigin["wmsLoader"] = "WMSLayerTreeConnect";
+      LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
+      LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
+      LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+      LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
+    })(LayerActionOrigin || (LayerActionOrigin = {}));
+
+    var types$3 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get LayerType () { return LayerType; },
+        get LayerStatus () { return LayerStatus; },
+        get LayerActionOrigin () { return LayerActionOrigin; }
+    });
+
+    /* *
+     * 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)
+     * */
+
+    var types$2 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get Scale () { return Scale; },
+        get AnimationLength () { return AnimationLength; },
+        get MapActionOrigin () { return MapActionOrigin; },
+        get LayerType () { return LayerType; },
+        get LayerStatus () { return LayerStatus; },
+        get LayerActionOrigin () { return LayerActionOrigin; }
+    });
+
+    var millisecondsInSecond = 1000;
+    var defaultAnimationDelayAtStart = 250;
+    var defaultDelay = 1000; // [ms]
+
+    var defaultTimeStep = 5;
+    var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+
+    /**
+     * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+     */
 
     var getSpeedDelay = function getSpeedDelay(speedFactor) {
       return defaultDelay / speedFactor;
@@ -1248,6 +1472,129 @@
         getActiveLayerTimeStep: getActiveLayerTimeStep
     });
 
+    /* *
+     * 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)
+     * */
+    /**
+     * Generic action to set the time.
+     *
+     * @param payload: SetTimePayload;
+     *   {
+     *     sourceId: string; // Source where the new time value originates from
+     *     value: string;    // ISO 8601 string time value like "2010-10-01T00:00:00Z"
+     *   }
+     */
+
+    var setTime = toolkit.createAction('GENERIC_SETTIME');
+    /**
+     * Generic action to set the bounding box.
+     *
+     * @param payload: SetBboxPayload;
+     *
+     * {
+     *   sourceId: string;  // Source where the new time value originates from
+     *   bbox: {            // Bbbox object
+     *     left: number;
+     *     bottom: number;
+     *     right: number;
+     *     top: number;
+     *   };
+     *   srs: string;       // Projection string according to EPSG, e.g. (EPSG:3857 ==  Mercator)
+     * }
+     */
+
+    var setBbox = toolkit.createAction('GENERIC_SETBBOX');
+
+    /* *
+     * 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)
+     * */
+    /**
+     * These actions are fired by the generic/saga.ts, based on generic actions and the synchronizationGroup state.
+     *
+     * These actions should not be used by components directly. Components should only use the generic actions.
+     */
+
+    var setTimeSync = toolkit.createAction('GENERIC_SYNC_SETTIME', function (payload, targets, groups) {
+      return {
+        payload: {
+          source: setTime(payload),
+          groups: groups,
+          targets: targets
+        }
+      };
+    });
+    var setBboxSync = toolkit.createAction('GENERIC_SYNC_SETBBOX', function (payload, targets, groups) {
+      return {
+        payload: {
+          source: setBbox(payload),
+          groups: groups,
+          targets: targets
+        }
+      };
+    });
+    var setLayerActionSync = toolkit.createAction('GENERIC_SYNC_SETLAYERACTIONS', function (payload, targets, type) {
+      return {
+        payload: {
+          source: {
+            type: type,
+            payload: payload
+          },
+          targets: targets
+        }
+      };
+    });
+
+    /* *
+     * 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)
+     * */
+    /**
+     * These actions causes circular dependency if they are defined in the reducer.ts file.
+     * Therefor they are instead added to this file
+     * https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices
+     */
+
+    var mapChangeDimension = toolkit.createAction('MAP_CHANGE_DIMENSION');
+    var setMapPreset = toolkit.createAction('SET_MAP_PRESET');
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1399,129 +1746,6 @@
       }
     };
 
-    /* *
-     * 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)
-     * */
-    /**
-     * These actions causes circular dependency if they are defined in the reducer.ts file.
-     * Therefor they are instead added to this file
-     * https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices
-     */
-
-    var mapChangeDimension = toolkit.createAction('MAP_CHANGE_DIMENSION');
-    var setMapPreset = toolkit.createAction('SET_MAP_PRESET');
-
-    /* *
-     * 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)
-     * */
-    /**
-     * Generic action to set the time.
-     *
-     * @param payload: SetTimePayload;
-     *   {
-     *     sourceId: string; // Source where the new time value originates from
-     *     value: string;    // ISO 8601 string time value like "2010-10-01T00:00:00Z"
-     *   }
-     */
-
-    var setTime = toolkit.createAction('GENERIC_SETTIME');
-    /**
-     * Generic action to set the bounding box.
-     *
-     * @param payload: SetBboxPayload;
-     *
-     * {
-     *   sourceId: string;  // Source where the new time value originates from
-     *   bbox: {            // Bbbox object
-     *     left: number;
-     *     bottom: number;
-     *     right: number;
-     *     top: number;
-     *   };
-     *   srs: string;       // Projection string according to EPSG, e.g. (EPSG:3857 ==  Mercator)
-     * }
-     */
-
-    var setBbox = toolkit.createAction('GENERIC_SETBBOX');
-
-    /* *
-     * 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)
-     * */
-    /**
-     * These actions are fired by the generic/saga.ts, based on generic actions and the synchronizationGroup state.
-     *
-     * These actions should not be used by components directly. Components should only use the generic actions.
-     */
-
-    var setTimeSync = toolkit.createAction('GENERIC_SYNC_SETTIME', function (payload, targets, groups) {
-      return {
-        payload: {
-          source: setTime(payload),
-          groups: groups,
-          targets: targets
-        }
-      };
-    });
-    var setBboxSync = toolkit.createAction('GENERIC_SYNC_SETBBOX', function (payload, targets, groups) {
-      return {
-        payload: {
-          source: setBbox(payload),
-          groups: groups,
-          targets: targets
-        }
-      };
-    });
-    var setLayerActionSync = toolkit.createAction('GENERIC_SYNC_SETLAYERACTIONS', function (payload, targets, type) {
-      return {
-        payload: {
-          source: {
-            type: type,
-            payload: payload
-          },
-          targets: targets
-        }
-      };
-    });
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1567,7 +1791,7 @@
         status: status
       });
     };
-    var initialState$8 = {
+    var initialState$7 = {
       byId: {},
       allIds: [],
       availableBaseLayers: {
@@ -1575,8 +1799,8 @@
         allIds: []
       }
     };
-    var slice$8 = toolkit.createSlice({
-      initialState: initialState$8,
+    var slice$7 = toolkit.createSlice({
+      initialState: initialState$7,
       name: 'layerReducer',
       reducers: {
         addLayer: function addLayer(draft, action) {
@@ -1842,12 +2066,68 @@
           var _a = action.payload,
               layerStyle = _a.layerStyle,
               layerDimensions = _a.layerDimensions;
-          var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
-          var state = produce.current(draft);
-          var intermediateState = layerStyle === null ? state : reducer$8(state, layerStyleAction);
-          var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-          var newState = layerDimensions === null ? intermediateState : reducer$8(intermediateState, dimensionsAction);
-          return newState;
+          /* Set style */
+
+          if (layerStyle && draft.byId[layerStyle.layerId]) {
+            draft.byId[layerStyle.layerId].style = layerStyle === null || layerStyle === void 0 ? void 0 : layerStyle.style;
+          }
+          /* Set layer dimensions */
+
+
+          if (layerDimensions) {
+            /* Find the corresponding layer we want to update */
+            var currentLayer_1 = draft.byId[layerDimensions.layerId];
+            /* Find all other layers with the same name and service, and update these at once (atomic update) */
+
+            Object.values(draft.byId).filter(function (draftLayer) {
+              return draftLayer.name === currentLayer_1.name && draftLayer.service === currentLayer_1.service;
+            }).forEach(function (draftLayer) {
+              var layerId = draftLayer.id;
+
+              if (layerId && draft.byId[layerId]) {
+                if (!draft.byId[layerId].dimensions) {
+                  draft.byId[layerId].dimensions = [];
+                }
+
+                var draftLayerDimensions_1 = draft.byId[layerId].dimensions;
+                /* Now update the dimension for each layer */
+
+                layerDimensions.dimensions.forEach(function (newLayerDimension) {
+                  /* Find the wmLayer */
+                  var wmLayer = getWMLayerById(layerId);
+                  /* Find the wmDimension */
+
+                  var wmDimension = wmLayer && wmLayer.getDimension(newLayerDimension.name);
+                  /* This will set the new range of start/stop values for this dimension, making getClosestValue work properly */
+
+                  wmDimension && wmDimension.reInitializeValues(newLayerDimension.values);
+                  /* Find corresponding draftLayerDimensions */
+
+                  var draftLayerDimension = draftLayerDimensions_1 === null || draftLayerDimensions_1 === void 0 ? void 0 : draftLayerDimensions_1.find(function (d) {
+                    return d.name === newLayerDimension.name && d.units === newLayerDimension.units;
+                  });
+
+                  if (draftLayerDimension) {
+                    /* If found update only minValue, maxValue and values */
+                    draftLayerDimension.maxValue = newLayerDimension.maxValue;
+                    draftLayerDimension.minValue = newLayerDimension.minValue;
+                    draftLayerDimension.values = newLayerDimension.values;
+                  } else if (layerId === layerDimensions.layerId) {
+                    /* Otherwise add a new one, but only for this layer. */
+                    draftLayerDimensions_1.push({
+                      name: newLayerDimension.name,
+                      units: newLayerDimension.units,
+                      currentValue: newLayerDimension.currentValue,
+                      minValue: newLayerDimension.minValue,
+                      maxValue: newLayerDimension.maxValue,
+                      validSyncSelection: newLayerDimension.validSyncSelection,
+                      values: newLayerDimension.values
+                    });
+                  }
+                });
+              }
+            });
+          }
         },
         setSelectedFeature: function setSelectedFeature(draft, action) {
           var _a = action.payload,
@@ -1902,7 +2182,7 @@
             };
             /* Handle the Layer action with the same logic, using the same reducer */
 
-            return reducer$8(prevState, action);
+            return reducer$7(prevState, action);
           }, state);
         }).addCase(setMapPreset, function (draft, action) {
           var mapId = action.payload.mapId;
@@ -1922,8 +2202,8 @@
         });
       }
     });
-    var reducer$8 = slice$8.reducer;
-    var layerActions = slice$8.actions;
+    var reducer$7 = slice$7.reducer;
+    var layerActions = slice$7.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1938,312 +2218,96 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var initialState$7 = {
-      byId: {},
-      allIds: []
+    var moveToTop = function moveToTop(list, element) {
+      var filteredList = list.filter(function (item) {
+        return item !== element;
+      });
+
+      var newOrder = __spreadArray([element], __read(filteredList));
+
+      return newOrder;
     };
-    var slice$7 = toolkit.createSlice({
-      initialState: initialState$7,
-      name: 'serviceReducer',
+    var createUIDialogElement = function createUIDialogElement(_a) {
+      var activeMapId = _a.activeMapId,
+          type = _a.type,
+          setOpen = _a.setOpen,
+          _b = _a.source,
+          source = _b === void 0 ? 'app' : _b;
+      return {
+        activeMapId: activeMapId,
+        isOpen: setOpen,
+        type: type,
+        source: source,
+        isLoading: false,
+        error: undefined,
+        focused: false
+      };
+    };
+    var initialState$6 = {
+      order: [],
+      dialogs: {},
+      activeWindowId: undefined
+    };
+    var slice$6 = toolkit.createSlice({
+      initialState: initialState$6,
+      name: 'uiReducer',
       reducers: {
-        serviceSetLayers: function serviceSetLayers(draft, action) {
-          var id = action.payload.id;
-          draft.byId[id] = __assign({}, action.payload);
+        registerDialog: function registerDialog(draft, action) {
+          var type = action.payload.type;
+          var activeMapId = action.payload.mapId ? action.payload.mapId : '';
+          var setOpen = action.payload.setOpen ? action.payload.setOpen : false;
+          var source = action.payload.source ? action.payload.source : 'app';
 
-          if (!draft.allIds.includes(id)) {
-            draft.allIds.push(id);
+          if (!Object.keys(draft.dialogs).includes(type)) {
+            draft.dialogs[type] = createUIDialogElement({
+              activeMapId: activeMapId,
+              type: type,
+              setOpen: setOpen,
+              source: source
+            });
+          } // register dialog to order
+
+
+          if (!draft.order.includes(type)) {
+            draft.order.push(type);
           }
         },
-        mapStoreRemoveService: function mapStoreRemoveService(draft, action) {
-          var foundServiceIndex = draft.allIds.findIndex(function (id) {
-            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
-          });
+        unregisterDialog: function unregisterDialog(draft, action) {
+          var type = action.payload.type;
 
-          if (foundServiceIndex !== -1) {
-            var serviceId_1 = draft.allIds[foundServiceIndex];
-            draft.allIds = draft.allIds.filter(function (id) {
-              return id !== serviceId_1;
+          if (draft.dialogs[type]) {
+            delete draft.dialogs[type];
+            draft.order = draft.order.filter(function (item) {
+              return item !== type;
             });
-            delete draft.byId[serviceId_1];
           }
         },
-        fetchInitialServices: function fetchInitialServices( // eslint-disable-next-line no-unused-vars
-        draft, // eslint-disable-next-line no-unused-vars
-        action) {}
-      },
-      extraReducers: function extraReducers(builder) {
-        return builder.addCase(layerActions.onUpdateLayerInformation, function (draft, action) {
-          var serviceLayers = action.payload.serviceLayers;
+        setActiveMapIdForDialog: function setActiveMapIdForDialog(draft, action) {
+          var _a = action.payload,
+              type = _a.type,
+              mapId = _a.mapId,
+              source = _a.source;
 
-          if (serviceLayers === null) {
-            return draft;
+          if (!draft.dialogs[type]) {
+            return;
           }
 
-          var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-          var newState = reducer$7(draft, mapAction);
-          return newState;
-        });
-      }
-    });
-    var reducer$7 = slice$7.reducer;
-    var serviceActions = slice$7.actions;
+          var isOpen = action.payload.setOpen !== undefined ? action.payload.setOpen : draft.dialogs[type].isOpen;
+          draft.dialogs[type].activeMapId = mapId;
+          draft.dialogs[type].isOpen = isOpen;
+          draft.dialogs[type].source = source;
 
-    /* *
-     * 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 selectorMemoizationOptions = {
-      memoizeOptions: {
-        maxSize: 1000,
-        resultEqualityCheck: _.isEqual
-      }
-    };
-    var isUserAddedService = function isUserAddedService(scope) {
-      return scope === 'user';
-    };
-
-    /* *
-     * 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)
-     * */
-
-    var servicesStore = function servicesStore(store) {
-      return store && store.services ? store.services : null;
-    };
-    /**
-     * Retrieves all serviceIds
-     *
-     * Example: serviceIds = getServiceIds(store)
-     * @param {object} store store: object - object from which the service state will be extracted
-     * @returns {array} returnType: array - an array of all serviceIds
-     */
-
-
-    toolkit.createSelector(servicesStore, function (serviceState) {
-      return serviceState ? serviceState.allIds : [];
-    }, selectorMemoizationOptions);
-    /**
-     * Gets map services
-     *
-     * Example: services = getServices(store)
-     * @param {object} store store: object - Store object
-     * @returns {object} returnType: ServiceState
-     */
-
-    var getServices = toolkit.createSelector(servicesStore, function (store) {
-      return store ? store.byId : {};
-    }, selectorMemoizationOptions);
-    /**
-     * Gets the service object by its url
-     *
-     * Example: service = getServiceByName(store, 'serviceName')
-     * @param {object} store store: object - Store object
-     * @returns {ReduxService} returnType: Service
-     */
-
-    var getServiceByName = toolkit.createSelector([servicesStore, function (state, serviceUrl) {
-      return serviceUrl;
-    }], function (serviceState, serviceUrl) {
-      var foundServiceIndex = serviceState.allIds.findIndex(function (id) {
-        return serviceState.byId[id].serviceUrl === serviceUrl;
-      });
-      /* Add the service based on a url */
-
-      var id = foundServiceIndex !== -1 ? serviceState.allIds[foundServiceIndex] : null;
-
-      if (serviceState && serviceState.byId && serviceState.byId[id]) {
-        return serviceState.byId[id];
-      }
-
-      return null;
-    }, selectorMemoizationOptions);
-    /**
-     * Gets the layer from the store using the serviceUrl and layerName
-     *
-     * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
-     * @param {object} store store: object - object from which the layers state will be extracted
-     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
-     * @returns {array} returnType: ServiceLayer[] - All layers within the service object.
-     */
-
-    var getLayersFromService$1 = toolkit.createSelector(getServiceByName, function (service) {
-      return service && service.layers || null;
-    }, selectorMemoizationOptions);
-    /**
-     * Gets the layer from the store using the serviceUrl and layerName
-     *
-     * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
-     * @param {object} store store: object - The application store
-     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
-     * @param {string}  layerName layerName: string - Name of the layer in the service
-     * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
-     */
-
-    var getLayerFromService = toolkit.createSelector(function (store, serviceUrl) {
-      return getLayersFromService$1(store, serviceUrl);
-    }, function (store, serviceUrl) {
-      return serviceUrl;
-    }, function (store, serviceUrl, layerName) {
-      return layerName;
-    }, function (layers, serviceUrl, layerName) {
-      if (!layers) {
-        return null;
-      }
-
-      var index = layers.findIndex(function (serviceLayer) {
-        return serviceLayer.name === layerName;
-      });
-
-      if (index === -1) {
-        return null;
-      }
-
-      return layers[index];
-    }, selectorMemoizationOptions);
-    /**
-     * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
-     *
-     * Example: layerStyles = getLayerStyles(store, layerService, layerName);
-     * @param {object} store store: object - store from which the layers state will be extracted
-     * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
-     * @param {string}  layerName layerName: string - Name of the layer in the service
-     * @returns {array} returnType: Style[] - array containing layer styles
-     */
-
-    var getLayerStyles$1 = toolkit.createSelector(getLayerFromService, function (layer) {
-      return layer && layer.styles ? layer.styles : [];
-    }, selectorMemoizationOptions);
-
-    /* *
-     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2023 - Finnish Meteorological Institute (FMI)
-     * */
-    var moveToTop = function moveToTop(list, element) {
-      var filteredList = list.filter(function (item) {
-        return item !== element;
-      });
-
-      var newOrder = __spreadArray([element], __read(filteredList));
-
-      return newOrder;
-    };
-    var createUIDialogElement = function createUIDialogElement(_a) {
-      var activeMapId = _a.activeMapId,
-          type = _a.type,
-          setOpen = _a.setOpen,
-          _b = _a.source,
-          source = _b === void 0 ? 'app' : _b;
-      return {
-        activeMapId: activeMapId,
-        isOpen: setOpen,
-        type: type,
-        source: source,
-        isLoading: false,
-        error: undefined,
-        focused: false
-      };
-    };
-    var initialState$6 = {
-      order: [],
-      dialogs: {},
-      activeWindowId: undefined
-    };
-    var slice$6 = toolkit.createSlice({
-      initialState: initialState$6,
-      name: 'uiReducer',
-      reducers: {
-        registerDialog: function registerDialog(draft, action) {
-          var type = action.payload.type;
-          var activeMapId = action.payload.mapId ? action.payload.mapId : '';
-          var setOpen = action.payload.setOpen ? action.payload.setOpen : false;
-          var source = action.payload.source ? action.payload.source : 'app';
-
-          if (!Object.keys(draft.dialogs).includes(type)) {
-            draft.dialogs[type] = createUIDialogElement({
-              activeMapId: activeMapId,
-              type: type,
-              setOpen: setOpen,
-              source: source
-            });
-          } // register dialog to order
-
-
-          if (!draft.order.includes(type)) {
-            draft.order.push(type);
-          }
-        },
-        unregisterDialog: function unregisterDialog(draft, action) {
-          var type = action.payload.type;
-
-          if (draft.dialogs[type]) {
-            delete draft.dialogs[type];
-            draft.order = draft.order.filter(function (item) {
-              return item !== type;
-            });
-          }
-        },
-        setActiveMapIdForDialog: function setActiveMapIdForDialog(draft, action) {
-          var _a = action.payload,
-              type = _a.type,
-              mapId = _a.mapId,
-              source = _a.source;
-
-          if (!draft.dialogs[type]) {
-            return;
-          }
-
-          var isOpen = action.payload.setOpen !== undefined ? action.payload.setOpen : draft.dialogs[type].isOpen;
-          draft.dialogs[type].activeMapId = mapId;
-          draft.dialogs[type].isOpen = isOpen;
-          draft.dialogs[type].source = source;
-
-          if (isOpen) {
-            draft.order = moveToTop(draft.order, type);
-          }
-        },
-        setToggleOpenDialog: function setToggleOpenDialog(draft, action) {
-          var _a = action.payload,
-              type = _a.type,
-              setOpen = _a.setOpen;
+          if (isOpen) {
+            draft.order = moveToTop(draft.order, type);
+          }
+        },
+        setToggleOpenDialog: function setToggleOpenDialog(draft, action) {
+          var _a = action.payload,
+              type = _a.type,
+              setOpen = _a.setOpen;
 
           if (!draft.dialogs[type]) {
             return;
@@ -2316,9 +2380,9 @@
         baseLayerDelete = layerActions.baseLayerDelete,
         layerChangeDimension$1 = layerActions.layerChangeDimension,
         layerDelete$1 = layerActions.layerDelete,
-        onUpdateLayerInformation = layerActions.onUpdateLayerInformation,
         setBaseLayers$1 = layerActions.setBaseLayers,
-        setLayers = layerActions.setLayers;
+        setLayers = layerActions.setLayers,
+        onUpdateLayerInformation = layerActions.onUpdateLayerInformation;
     /**
      * Checks if the layer id is already taken in one of the maps.
      * @param state The WebMapState
@@ -2976,12 +3040,16 @@
         }).addCase(onUpdateLayerInformation, function (draft, action) {
           var mapDimensions = action.payload.mapDimensions;
 
-          if (mapDimensions === null) {
+          if (!mapDimensions) {
             return draft;
           }
 
-          var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
-          return reducer$5(draft, mapAction);
+          var dimensions = mapDimensions.dimensions,
+              mapId = mapDimensions.mapId;
+          dimensions.forEach(function (dimension) {
+            return produceDraftStateSetWebMapDimension(draft, mapId, dimension, false);
+          });
+          return draft;
         }).addCase(mapChangeDimension, function (draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -3344,7 +3412,7 @@
       }, []);
     }, selectorMemoizationOptions);
 
-    var selectors$3 = /*#__PURE__*/Object.freeze({
+    var selectors$4 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getLayerById: getLayerById,
         getLayersById: getLayersById,
@@ -3450,7 +3518,9 @@
       if (store && store.ui && store.ui.order) {
         var order = store.ui.order;
         var visibleOrder = order.filter(function (orderedDialogType) {
-          return store.ui.dialogs[orderedDialogType].isOpen;
+          var _a;
+
+          return (_a = store.ui.dialogs[orderedDialogType]) === null || _a === void 0 ? void 0 : _a.isOpen;
         });
 
         if (!visibleOrder.includes(dialogType)) {
@@ -3512,7 +3582,7 @@
       return details && details.focused || false;
     });
 
-    var selectors$2 = /*#__PURE__*/Object.freeze({
+    var selectors$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getUiStore: getUiStore,
         getDialogDetailsByType: getDialogDetailsByType,
@@ -3922,18 +3992,188 @@
      * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
+    var syncGroupStore = function syncGroupStore(store) {
+      return store.syncronizationGroupStore || null;
+    };
+    /**
+     * Gets synchronization group state
+     *
+     * Example: synchronizationGroupState = getSynchronizationGroupState(store)
+     * @param {object} store store: object - Store object
+     * @returns {object} returnType: SynchronizationGroupState
+     */
 
-    var index = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        actions: actions,
-        constants: constants,
-        types: types$1,
-        initialState: initialState$4
+    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store || null;
     });
-
+    var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
+      return syncGroupStore(state).groups.byId[id];
+    };
+    var getSynchronizationGroupSource = function getSynchronizationGroupSource(state, id) {
+      return syncGroupStore(state).sources.byId[id];
+    };
+    var getTargets = function getTargets(state, payload, actionType) {
+      var actionPayloads = [];
+      var targetsInActionPayload = {};
+      var syncronizationGroupStore = syncGroupStore(state);
+      /* All the groups the source is member of */
+
+      if (syncronizationGroupStore && payload) {
+        /* Backwards compatibility, if there are no groups, connect everything */
+        if (syncronizationGroupStore.groups.allIds.length === 0) {
+          syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
+            // Only add if should react to this action
+            if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
+              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+              targetsInActionPayload[targetId] = true;
+              /* Compose the payload */
+
+              var newPayload = __assign({
+                targetId: targetId
+              }, payload);
+
+              actionPayloads.push(newPayload);
+            }
+          });
+        }
+
+        syncronizationGroupStore.groups.allIds.forEach(function (id) {
+          var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
+
+          if (actionType === syncronizationGroup.type) {
+            /* Check if the source is in the target list of the synchonizationGroup */
+            var source = syncronizationGroup.targets.byId[payload.sourceId];
+            /* If the source is part of the target list, and is linked, continue syncing the other targets */
+
+            if (source && source.linked) {
+              syncronizationGroup.targets.allIds.forEach(function (targetId) {
+                var target = syncronizationGroup.targets.byId[targetId];
+
+                if (target.linked && !targetsInActionPayload[targetId]) {
+                  /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+                  targetsInActionPayload[targetId] = true;
+                  /* Compose the payload */
+
+                  var newPayload = __assign({
+                    targetId: targetId
+                  }, payload);
+
+                  actionPayloads.push(newPayload);
+                }
+              });
+            }
+          }
+        });
+      }
+
+      return actionPayloads;
+    };
+    var getTargetGroups = function getTargetGroups(state, payload, actionType) {
+      var syncronizationGroupStore = syncGroupStore(state);
+      var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
+        var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+
+        if (actionType === syncronizationGroup.type) {
+          /* Check if the source is in the target list of the synchronizationGroup */
+          var source = syncronizationGroup.targets.byId[payload.sourceId];
+          /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+          if (source && source.linked) {
+            return list.concat(groupId);
+          }
+        }
+
+        return list;
+      }, []);
+      return groups;
+    };
+    var getAllTargetGroupsForSource = function getAllTargetGroupsForSource(state, sourceId) {
+      var syncronizationGroupStore = syncGroupStore(state);
+
+      if (syncronizationGroupStore === null || syncronizationGroupStore === void 0 ? void 0 : syncronizationGroupStore.groups) {
+        return syncronizationGroupStore.groups.allIds.reduce(function (linkedSyncGroupIds, groupId) {
+          var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+          var source = syncronizationGroup.targets.byId[sourceId];
+          /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+          if (source && source.linked) {
+            return linkedSyncGroupIds.concat(groupId);
+          }
+
+          return linkedSyncGroupIds;
+        }, []);
+      }
+
+      return [];
+    };
+    var syncGroupGetViewState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store.viewState;
+    });
+    var getSyncedMapIdsForTimeslider = toolkit.createSelector(syncGroupStore, function (store) {
+      return store.viewState.timeslider.groups[0].selected;
+    }, selectorMemoizationOptions);
+    var getSyncGroupTargets = function getSyncGroupTargets(state) {
+      var syncStore = syncGroupStore(state);
+
+      if (!syncStore || !syncStore.groups) {
+        return [];
+      }
+
+      return syncStore.groups.allIds.reduce(function (targets, groupId) {
+        var group = syncStore.groups.byId[groupId];
+        return targets.concat(group.targets.allIds.map(function (targetId) {
+          return {
+            groupId: groupId,
+            targetId: targetId,
+            linked: group.targets.byId[targetId].linked
+          };
+        }));
+      }, []);
+    };
+
+    var selectors$2 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        syncGroupStore: syncGroupStore,
+        getSynchronizationGroupState: getSynchronizationGroupState,
+        getSynchronizationGroup: getSynchronizationGroup,
+        getSynchronizationGroupSource: getSynchronizationGroupSource,
+        getTargets: getTargets,
+        getTargetGroups: getTargetGroups,
+        getAllTargetGroupsForSource: getAllTargetGroupsForSource,
+        syncGroupGetViewState: syncGroupGetViewState,
+        getSyncedMapIdsForTimeslider: getSyncedMapIdsForTimeslider,
+        getSyncGroupTargets: getSyncGroupTargets
+    });
+
+    /* *
+     * 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 index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        actions: actions,
+        constants: constants,
+        types: types$1,
+        initialState: initialState$4,
+        syncGroupsSelectors: selectors$2
+    });
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -5551,121 +5791,6 @@
     var reducer = slice.reducer;
     var appActions = 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
-    var syncGroupStore = function syncGroupStore(store) {
-      return store.syncronizationGroupStore || null;
-    };
-    /**
-     * Gets synchronization group state
-     *
-     * Example: synchronizationGroupState = getSynchronizationGroupState(store)
-     * @param {object} store store: object - Store object
-     * @returns {object} returnType: SynchronizationGroupState
-     */
-
-    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
-      return store || null;
-    });
-    var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
-      return syncGroupStore(state).groups.byId[id];
-    };
-    var getTargets = function getTargets(state, payload, actionType) {
-      var actionPayloads = [];
-      var targetsInActionPayload = {};
-      var syncronizationGroupStore = syncGroupStore(state);
-      /* All the groups the source is member of */
-
-      if (syncronizationGroupStore && payload) {
-        /* Backwards compatibility, if there are no groups, connect everything */
-        if (syncronizationGroupStore.groups.allIds.length === 0) {
-          syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
-            // Only add if should react to this action
-            if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
-              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-              targetsInActionPayload[targetId] = true;
-              /* Compose the payload */
-
-              var newPayload = __assign({
-                targetId: targetId
-              }, payload);
-
-              actionPayloads.push(newPayload);
-            }
-          });
-        }
-
-        syncronizationGroupStore.groups.allIds.forEach(function (id) {
-          var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
-
-          if (actionType === syncronizationGroup.type) {
-            /* Check if the source is in the target list of the synchonizationGroup */
-            var source = syncronizationGroup.targets.byId[payload.sourceId];
-            /* If the source is part of the target list, and is linked, continue syncing the other targets */
-
-            if (source && source.linked) {
-              syncronizationGroup.targets.allIds.forEach(function (targetId) {
-                var target = syncronizationGroup.targets.byId[targetId];
-
-                if (target.linked && !targetsInActionPayload[targetId]) {
-                  /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-                  targetsInActionPayload[targetId] = true;
-                  /* Compose the payload */
-
-                  var newPayload = __assign({
-                    targetId: targetId
-                  }, payload);
-
-                  actionPayloads.push(newPayload);
-                }
-              });
-            }
-          }
-        });
-      }
-
-      return actionPayloads;
-    };
-    var getTargetGroups = function getTargetGroups(state, payload, actionType) {
-      var syncronizationGroupStore = syncGroupStore(state);
-      var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
-        var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
-
-        if (actionType === syncronizationGroup.type) {
-          /* Check if the source is in the target list of the synchronizationGroup */
-          var source = syncronizationGroup.targets.byId[payload.sourceId];
-          /* If the source is part of the target list, and it linked, continue syncin the other targets */
-
-          if (source && source.linked) {
-            return list.concat(groupId);
-          }
-        }
-
-        return list;
-      }, []);
-      return groups;
-    };
-    var syncGroupGetViewState = toolkit.createSelector(syncGroupStore, function (store) {
-      return store.viewState;
-    });
-    var getSyncedMapIdsForTimeslider = toolkit.createSelector(syncGroupStore, function (store) {
-      return store.viewState.timeslider.groups[0].selected;
-    }, selectorMemoizationOptions);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -6958,11 +7083,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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
-    var PlayButton = function PlayButton(_a) {
+    var PlayButton$1 = function PlayButton(_a) {
       var isAnimating = _a.isAnimating,
           isDisabled = _a.isDisabled,
           _b = _a.onTogglePlayButton,
@@ -6972,18 +7097,18 @@
         onTogglePlayButton();
       };
 
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: isAnimating ? 'Pause' : 'Play'
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
+        tooltipTitle: isAnimating ? 'Pause' : 'Play',
         onClick: onTogglePlay,
         disabled: isDisabled,
         "data-testid": "playButton",
-        active: isAnimating
+        isSelected: isAnimating
       }, isAnimating ? /*#__PURE__*/React__namespace.createElement(theme.Pause, {
         "data-testid": "pause-svg-path"
       }) : /*#__PURE__*/React__namespace.createElement(theme.Play, {
         "data-testid": "play-svg-path"
-      }))));
+      }));
     };
 
     /* *
@@ -7042,7 +7167,7 @@
         }
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(PlayButton, {
+      return /*#__PURE__*/React__default["default"].createElement(PlayButton$1, {
         isAnimating: linkedMapAnimationInfo.isAnimating,
         isDisabled: isDisabled,
         onTogglePlayButton: function onTogglePlayButton() {
@@ -9860,8 +9985,8 @@
       id: 'webmap-module',
       reducersMap: {
         webmap: reducer$5,
-        services: reducer$7,
-        layers: reducer$8
+        services: reducer$8,
+        layers: reducer$7
       },
       sagas: [rootSaga$4, rootSaga$3]
     };
@@ -10375,10 +10500,13 @@
     };
 
     var HeaderOptions = function HeaderOptions(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+
       var isDockedLayerManager = _a.isDockedLayerManager,
           shortcutsEnabled = _a.shortcutsEnabled,
           onClickDockButton = _a.onClickDockButton,
-          onChangeSize = _a.onChangeSize;
+          onChangeSize = _a.onChangeSize,
+          buttonSettings = _a.buttonSettings;
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           if (shortcutsEnabled) {
@@ -10397,28 +10525,28 @@
           document.removeEventListener('keydown', handleKeyDown);
         };
       }, [onChangeSize, shortcutsEnabled]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, !((_b = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.small) === null || _b === void 0 ? void 0 : _b.isDisabled) && /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         tooltipTitle: "small",
         "data-testid": "collapseSmall-btn",
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
         className: "collapseSmall-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+      }, (_d = (_c = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.small) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null)), !((_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _e === void 0 ? void 0 : _e.isDisabled) && /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         tooltipTitle: "medium",
         "data-testid": "collapseMedium-btn",
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
         className: "collapseMedium-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+      }, (_g = (_f = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _f === void 0 ? void 0 : _f.icon) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null)), !((_h = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _h === void 0 ? void 0 : _h.isDisabled) && /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         tooltipTitle: "large",
         "data-testid": "collapseLarge-btn",
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
         className: "collapseLarge-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+      }, (_k = (_j = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _j === void 0 ? void 0 : _j.icon) !== null && _k !== void 0 ? _k : /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null)), !((_l = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.dock) === null || _l === void 0 ? void 0 : _l.isDisabled) && /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         tooltipTitle: isDockedLayerManager ? 'Undock' : 'Dock',
         "data-testid": "dockedBtn",
         disableRipple: true,
@@ -10429,7 +10557,7 @@
         "data-testid": "dockedLayerManager-collapse"
       }) : /*#__PURE__*/React__namespace.createElement(theme.ExpandWindow, {
         "data-testid": "dockedLayerManager-uncollapse"
-      })));
+      })), (_m = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.divider) === null || _m === void 0 ? void 0 : _m.element);
     };
 
     /* *
@@ -10694,12 +10822,14 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$4 = {
-      text: {
-        paddingLeft: '10px',
-        fontSize: '12px',
-        fontFamily: 'Roboto',
-        opacity: 0.67
+    var styles$5 = {
+      text: function text(theme) {
+        return __assign({
+          paddingLeft: '10px',
+          fontSize: '12px',
+          fontFamily: 'Roboto',
+          opacity: 0.67
+        }, theme.palette.geowebColors.layerManager.headerRowText);
       }
     };
 
@@ -10741,7 +10871,7 @@
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-layer " + (hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
-        sx: styles$4.text
+        sx: styles$5.text
       }, (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : 'Layer'), /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-mapPresets",
         sx: {
@@ -10750,15 +10880,15 @@
       }, mapPresetsModuleInline)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column3
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$4.text
+        sx: styles$5.text
       }, (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : 'Style')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column4
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$4.text
+        sx: styles$5.text
       }, (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : 'Opacity')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column5
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$4.text
+        sx: styles$5.text
       }, (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : 'Dimensions')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column6
       }));
@@ -10998,7 +11128,9 @@
           _c = _a.layers,
           layers = _c === void 0 ? [] : _c,
           _d = _a.isEnabled,
-          isEnabled = _d === void 0 ? true : _d;
+          isEnabled = _d === void 0 ? true : _d,
+          _e = _a.tooltipPrefix,
+          tooltipPrefix = _e === void 0 ? 'Layer: ' : _e;
 
       if (!layers || !layers.length) {
         return /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -11025,10 +11157,10 @@
         onChangeLayerName(event.target.value);
       };
 
-      var _e = getRenderLayersValues(layerName, layers),
-          currentIndex = _e.currentIndex,
-          currentValue = _e.currentValue,
-          extendedLayers = _e.extendedLayers;
+      var _f = getRenderLayersValues(layerName, layers),
+          currentIndex = _f.currentIndex,
+          currentValue = _f.currentValue,
+          extendedLayers = _f.extendedLayers;
 
       var list = extendedLayers.map(function (layer) {
         return {
@@ -11037,7 +11169,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         disableUnderline: true,
-        tooltip: "Layer: " + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
+        tooltip: "" + tooltipPrefix + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectLayer'
@@ -11119,20 +11251,25 @@
     }];
 
     var OpacitySelect = function OpacitySelect(_a) {
+      var _b;
+
       var currentOpacity = _a.currentOpacity,
           onLayerChangeOpacity = _a.onLayerChangeOpacity,
-          _b = _a.isEnabled,
-          isEnabled = _b === void 0 ? true : _b;
+          _c = _a.isEnabled,
+          isEnabled = _c === void 0 ? true : _c,
+          _d = _a.tooltipPrefix,
+          tooltipPrefix = _d === void 0 ? 'Opacity: ' : _d;
 
-      var _c = __read(shared.useControlledTooltip(), 2),
-          tooltipOpen = _c[0],
-          setTooltipOpen = _c[1];
+      var _e = __read(shared.useControlledTooltip(), 2),
+          tooltipOpen = _e[0],
+          setTooltipOpen = _e[1];
 
-      var _d = __read(React__namespace.useState(null), 2),
-          anchorEl = _d[0],
-          setAnchorEl = _d[1];
+      var _f = __read(React__namespace.useState(null), 2),
+          anchorEl = _f[0],
+          setAnchorEl = _f[1];
 
       var isOpen = Boolean(anchorEl);
+      var theme = material.useTheme();
 
       var handleClick = function handleClick(event) {
         setAnchorEl(anchorEl ? null : event.currentTarget);
@@ -11180,12 +11317,12 @@
         onWheel: onWheel,
         className: "opacity-select",
         "data-testid": "scrollOpacity",
-        sx: {
+        sx: __assign({
           width: '100%',
           height: 32
-        }
+        }, (_b = theme.palette.geowebColors.layerManager.opacitySelect) === null || _b === void 0 ? void 0 : _b.root)
       }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Opacity: " + currentOpacityText,
+        title: "" + tooltipPrefix + currentOpacityText,
         sx: shared.tooltipContainerStyles(isEnabled),
         placement: "top",
         open: tooltipOpen
@@ -11198,12 +11335,17 @@
         onMouseLeave: onMouseLeave,
         onFocus: onFocus,
         onBlur: onBlur,
-        style: {
+        sx: __assign({
           height: '100%',
           width: '100%',
           borderRadius: '0',
-          minWidth: '49px'
-        },
+          minWidth: '49px',
+          fontSize: function fontSize(theme) {
+            return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
+          },
+          color: isEnabled ? 'geowebColors.layerManager.tableRowDefaultText.rgba' : 'geowebColors.layerManager.tableRowDisabledText.rgba'
+        }, theme.palette.geowebColors.layerManager.opacitySelect.button),
+        className: isOpen ? 'open' : '',
         // Safari-based browsers handle focus differently with buttons
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
         // Use div instead to fix onBlur hander's event.relatedTarget below
@@ -11216,14 +11358,14 @@
         },
         placement: "right"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: {
+        sx: __assign({
           padding: '0 0 60px 0',
           backgroundColor: 'geowebColors.background.surface',
           width: '82px',
           height: '248px',
           boxSizing: 'initial',
           boxShadow: 8
-        }
+        }, theme.palette.geowebColors.layerManager.opacitySelect.popper)
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: shared.sliderHeaderStyle
       }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
@@ -11268,7 +11410,10 @@
     var LayerManagerMenuButton = function LayerManagerMenuButton(_a) {
       var mapId = _a.mapId,
           layerId = _a.layerId,
-          onLayerDuplicate = _a.onLayerDuplicate;
+          onLayerDuplicate = _a.onLayerDuplicate,
+          _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? 'Options' : _b,
+          icon = _a.icon;
 
       var onClickDuplicate = function onClickDuplicate() {
         onLayerDuplicate({
@@ -11292,7 +11437,8 @@
           action: onClickDuplicate,
           icon: /*#__PURE__*/React__namespace.createElement(theme.Copy, null)
         }],
-        tooltipTitle: "Options"
+        tooltipTitle: tooltipTitle,
+        buttonIcon: icon
       });
     };
 
@@ -11303,7 +11449,10 @@
           currentLayerStyle = _a.currentLayerStyle,
           onChangeLayerStyle = _a.onChangeLayerStyle,
           _c = _a.isEnabled,
-          isEnabled = _c === void 0 ? true : _c;
+          isEnabled = _c === void 0 ? true : _c,
+          icon = _a.icon,
+          _d = _a.tooltipPrefix,
+          tooltipPrefix = _d === void 0 ? 'Style: ' : _d;
       var styles = [{
         title: 'default',
         name: 'default',
@@ -11331,7 +11480,7 @@
         return currentStyle === style.name;
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
-        tooltip: "Style: " + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
+        tooltip: "" + tooltipPrefix + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectStyle'
@@ -11345,7 +11494,8 @@
         onChangeMouseWheel: function onChangeMouseWheel(e) {
           return onChangeLayerStyle(e.value);
         },
-        requiresCtrlToChange: true
+        requiresCtrlToChange: true,
+        IconComponent: icon
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
       }, "Style"), styles.map(function (styleFromlayer) {
@@ -11369,8 +11519,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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var getIconColor = function getIconColor(isActive, isEnabled) {
@@ -11460,7 +11610,8 @@
           isEnabled = _a.isEnabled;
       var isActive = current !== AutoOptions.NONE;
       var Icon = getIcon(isActive, isEnabled, current);
-      return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
         "aria-label": current,
         "data-testid": "activateLayer-btn",
         sx: {
@@ -11468,7 +11619,7 @@
             backgroundColor: 'inherit'
           }
         },
-        active: isActive
+        isSelected: isActive
       }, Icon);
     };
 
@@ -11560,6 +11711,7 @@
           layerDeleteLayout = _a.layerDeleteLayout,
           layerMenuLayout = _a.layerMenuLayout,
           layerActiveLayout = _a.layerActiveLayout,
+          disableActivateLayer = _a.disableActivateLayer,
           dragHandle = _a.dragHandle;
 
       var onClickRow = function onClickRow() {
@@ -11611,11 +11763,11 @@
             });
           },
           "data-testid": "enableButton-medium"
-        }, isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+        }, isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
           current: AutoOptions.BOTH,
           onChange: onClickRow,
           isEnabled: true
-        }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           sx: {
             fontWeight: '500',
             fontSize: '12px',
@@ -11696,11 +11848,11 @@
           });
         },
         "data-testid": "enableButton"
-      }, layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+      }, layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
         onChange: onClickRow,
         current: AutoOptions.BOTH,
         isEnabled: true
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
       }, layerServicesLayout || /*#__PURE__*/React__default["default"].createElement(RenderLayers, {
@@ -11799,7 +11951,11 @@
     var DeleteLayerConnect = function DeleteLayerConnect(_a) {
       var layerId = _a.layerId,
           mapId = _a.mapId,
-          layerIndex = _a.layerIndex;
+          layerIndex = _a.layerIndex,
+          _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? 'Delete' : _b,
+          _c = _a.icon,
+          icon = _c === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Delete, null) : _c;
       var dispatch = reactRedux.useDispatch();
       var layerDelete = React__namespace.useCallback(function (_a) {
         var mapId = _a.mapId,
@@ -11816,7 +11972,7 @@
         return getLayerEnabled(store, layerId);
       });
       return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
-        tooltipTitle: "Delete",
+        tooltipTitle: tooltipTitle,
         onClick: function onClick() {
           layerDelete({
             mapId: mapId,
@@ -11826,7 +11982,7 @@
         },
         shouldShowAsDisabled: !isLayerEnabled,
         "data-testid": "deleteButton"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null));
+      }, icon);
     };
 
     /* *
@@ -11852,7 +12008,10 @@
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? false : _b,
           _c = _a.layerName,
-          layerName = _c === void 0 ? '' : _c;
+          layerName = _c === void 0 ? '' : _c,
+          _d = _a.icon,
+          icon = _d === void 0 ? isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null) : _d,
+          tooltipTitle = _a.tooltipTitle;
       var dispatch = reactRedux.useDispatch();
       var layerChangeEnabled = React__namespace.useCallback(function (_a) {
         var layerId = _a.layerId,
@@ -11864,9 +12023,11 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
+      var normalTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : 'Toggle visibility';
+      var miniTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : layerName;
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         shouldShowAsDisabled: !isEnabled,
-        tooltipTitle: "Toggle visibility",
+        tooltipTitle: normalTooltip,
         onClick: function onClick(event) {
           event.stopPropagation();
           layerChangeEnabled({
@@ -11879,9 +12040,9 @@
         sx: {
           margin: 'auto 0px'
         }
-      }, isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+      }, icon), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         shouldShowAsDisabled: !isEnabled,
-        tooltipTitle: layerName,
+        tooltipTitle: miniTooltip,
         onClick: function onClick(event) {
           event.stopPropagation();
           layerChangeEnabled({
@@ -11894,7 +12055,7 @@
         sx: {
           margin: 'auto 0px'
         }
-      }, isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null)));
+      }, icon));
     };
 
     /* *
@@ -11916,7 +12077,8 @@
 
     var OpacitySelectConnect = function OpacitySelectConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var opacity = reactRedux.useSelector(function (store) {
         return getLayerOpacity(store, layerId);
@@ -11934,7 +12096,8 @@
             origin: LayerActionOrigin.layerManager
           }));
         },
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -12011,7 +12174,9 @@
 
     var RenderStylesConnect = function RenderStylesConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          icon = _a.icon,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var layerService = reactRedux.useSelector(function (store) {
         return getLayerService(store, layerId);
@@ -12040,7 +12205,9 @@
         layerStyles: layerStyles,
         currentLayerStyle: currentLayerStyle,
         onChangeLayerStyle: layerChangeStyle,
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        icon: icon,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -12063,7 +12230,8 @@
 
     var RenderLayersConnect = function RenderLayersConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var layerName = reactRedux.useSelector(function (store) {
         return getLayerName(store, layerId);
@@ -12150,7 +12318,8 @@
             name: name
           });
         },
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -12173,7 +12342,9 @@
 
     var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipTitle = _a.tooltipTitle,
+          icon = _a.icon;
       var dispatch = reactRedux.useDispatch();
       var layer = reactRedux.useSelector(function (store) {
         return getLayerById(store, layerId);
@@ -12198,7 +12369,9 @@
             mapId: mapId,
             layer: layer
           });
-        }
+        },
+        tooltipTitle: tooltipTitle,
+        icon: icon
       });
     };
 
@@ -12362,12 +12535,13 @@
      * */
 
     var LayerRowConnect = function LayerRowConnect(_a) {
-      var _b;
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
 
       var layerId = _a.layerId,
           mapId = _a.mapId,
           dragHandle = _a.dragHandle,
-          layerIndex = _a.layerIndex;
+          layerIndex = _a.layerIndex,
+          settings = _a.settings;
       var isEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
@@ -12396,15 +12570,22 @@
           layerId: layerId,
           mapId: mapId,
           isEnabled: isEnabled,
-          layerName: fullLayerName || layerName
+          layerName: fullLayerName || layerName,
+          icon: isEnabled ? (_c = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _c === void 0 ? void 0 : _c.enabledIcon : (_d = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _d === void 0 ? void 0 : _d.disabledIcon,
+          tooltipTitle: isEnabled ? (_e = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _e === void 0 ? void 0 : _e.enabledTooltipTitle : (_f = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _f === void 0 ? void 0 : _f.disabledTooltipTitle
         }),
         layerOpacityLayout: /*#__PURE__*/React__namespace.createElement(OpacitySelectConnect, {
           layerId: layerId,
-          mapId: mapId
+          mapId: mapId,
+          tooltipPrefix: (_g = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _g === void 0 ? void 0 : _g.tooltipPrefix
         }),
-        layerServicesLayout: /*#__PURE__*/React__namespace.createElement(RenderLayersConnect, {
+        layerServicesLayout: ((_h = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _h === void 0 ? void 0 : _h.Element) ? /*#__PURE__*/React__namespace.createElement(settings.renderLayer.Element, {
           layerId: layerId,
           mapId: mapId
+        }) : /*#__PURE__*/React__namespace.createElement(RenderLayersConnect, {
+          layerId: layerId,
+          mapId: mapId,
+          tooltipPrefix: (_j = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _j === void 0 ? void 0 : _j.tooltipPrefix
         }),
         layerDimensionLayout: /*#__PURE__*/React__namespace.createElement(DimensionSelectConnect, {
           layerId: layerId,
@@ -12412,21 +12593,28 @@
         }),
         layerStylesLayout: /*#__PURE__*/React__namespace.createElement(RenderStylesConnect, {
           layerId: layerId,
-          mapId: mapId
+          mapId: mapId,
+          tooltipPrefix: (_k = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _k === void 0 ? void 0 : _k.tooltipPrefix,
+          icon: (_l = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _l === void 0 ? void 0 : _l.icon
         }),
         layerDeleteLayout: /*#__PURE__*/React__namespace.createElement(DeleteLayerConnect, {
           mapId: mapId,
           layerId: layerId,
-          layerIndex: layerIndex
+          layerIndex: layerIndex,
+          tooltipTitle: (_m = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _m === void 0 ? void 0 : _m.tooltipTitle,
+          icon: (_o = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _o === void 0 ? void 0 : _o.icon
         }),
         layerMenuLayout: /*#__PURE__*/React__namespace.createElement(LayerManagerMenuButtonConnect, {
           mapId: mapId,
-          layerId: layerId
+          layerId: layerId,
+          tooltipTitle: (_p = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _p === void 0 ? void 0 : _p.tooltipTitle,
+          icon: (_q = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _q === void 0 ? void 0 : _q.icon
         }),
-        layerActiveLayout: /*#__PURE__*/React__namespace.createElement(ActivateLayerConnect, {
+        layerActiveLayout: ((_r = settings === null || settings === void 0 ? void 0 : settings.activateLayer) === null || _r === void 0 ? void 0 : _r.isDisabled) ? undefined : /*#__PURE__*/React__namespace.createElement(ActivateLayerConnect, {
           mapId: mapId,
           layerId: layerId
         }),
+        disableActivateLayer: (_s = settings === null || settings === void 0 ? void 0 : settings.activateLayer) === null || _s === void 0 ? void 0 : _s.isDisabled,
         dragHandle: dragHandle
       });
     };
@@ -12457,10 +12645,16 @@
           _d = _a.hideTooltip,
           hideTooltip = _d === void 0 ? true : _d,
           _e = _a.isSorting,
-          isSorting = _e === void 0 ? false : _e;
-      var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
+          isSorting = _e === void 0 ? false : _e,
+          _f = _a.icon,
+          icon = _f === void 0 ? /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, {
+        "data-testid": "dragHandleIcon"
+      }) : _f,
+          _g = _a.tooltipTitle,
+          tooltipTitle = _g === void 0 ? TOOLTIP_TITLE : _g;
+      var usedTooltipTitle = hideTooltip ? '' : tooltipTitle;
       return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
-        tooltipTitle: tooltipTitle,
+        tooltipTitle: usedTooltipTitle,
         "data-testid": "dragHandle" + (index !== undefined ? "-" + index : ''),
         className: "handle",
         tabIndex: -1,
@@ -12468,8 +12662,8 @@
         disabled: isDisabled,
         sx: {
           cursor: isSorting ? 'grabbing' : 'grab',
-          '&:hover': {
-            backgroundColor: 'inherit!important'
+          '&.handle:hover': function handleHover(theme) {
+            return __assign({}, theme.palette.geowebColors.layerManager.dragHandleHover);
           },
           marginLeft: '3px',
           marginRight: '3px',
@@ -12479,7 +12673,7 @@
             color: 'geowebColors.greys.accessible'
           }
         }
-      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null));
+      }, icon);
     };
 
     /* *
@@ -12500,7 +12694,8 @@
      * */
 
     var LayerContainerRow = function LayerContainerRow(_a) {
-      var mapId = _a.mapId;
+      var mapId = _a.mapId,
+          settings = _a.settings;
       var dispatch = reactRedux.useDispatch();
 
       var _b = __read(React__namespace.useState(false), 2),
@@ -12622,6 +12817,8 @@
           width: '100%'
         }
       }, layerIds.map(function (layerId, index) {
+        var _a, _b;
+
         return /*#__PURE__*/React__namespace.createElement(LayerRowConnect, {
           mapId: mapId,
           layerId: layerId,
@@ -12631,8 +12828,11 @@
             isDisabled: isDragDisabled,
             index: index,
             hideTooltip: isSorting || isDragDisabled,
-            isSorting: isSorting
-          })
+            isSorting: isSorting,
+            icon: (_a = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _a === void 0 ? void 0 : _a.icon,
+            tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _b === void 0 ? void 0 : _b.tooltipTitle
+          }),
+          settings: settings
         });
       })));
     };
@@ -13500,7 +13700,7 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$3 = {
+    var styles$4 = {
       buttonDiv: {
         position: 'relative'
       },
@@ -13543,7 +13743,7 @@
       }, []);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         onClick: handleClose,
-        sx: styles$3.button,
+        sx: styles$4.button,
         disableRipple: true,
         "data-testid": "addLayersButton",
         ref: ref,
@@ -13575,32 +13775,33 @@
      * */
 
     var BaseLayerRow = function BaseLayerRow(_a) {
-      var _b, _c, _d;
+      var _b, _c, _d, _e, _f;
 
       var mapId = _a.mapId,
-          _e = _a.preloadedAvailableBaseLayers,
-          preloadedAvailableBaseLayers = _e === void 0 ? availableDefaultBaseLayers : _e,
-          _f = _a.preloadedServices,
-          preloadedServices = _f === void 0 ? preloadedDefaultBaseServices : _f,
-          _g = _a.tooltip,
-          tooltip = _g === void 0 ? '' : _g,
+          _g = _a.preloadedAvailableBaseLayers,
+          preloadedAvailableBaseLayers = _g === void 0 ? availableDefaultBaseLayers : _g,
+          _h = _a.preloadedServices,
+          preloadedServices = _h === void 0 ? preloadedDefaultBaseServices : _h,
+          _j = _a.tooltip,
+          tooltip = _j === void 0 ? '' : _j,
           settings = _a.settings;
+      var theme = material.useTheme();
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
         "data-testid": "baseLayerRow",
         className: "addLayer-column",
-        sx: {
+        sx: __assign({
           width: '100%',
           height: '36px'
-        }
+        }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         className: columnClasses.column1,
         sx: {
           marginTop: '-2px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
+      }, !((_c = (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _b === void 0 ? void 0 : _b.addLayersButton) === null || _c === void 0 ? void 0 : _c.isDisabled) && /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
         preloadedServices: preloadedServices,
         tooltip: tooltip,
         onRenderTree: function onRenderTree(service) {
@@ -13610,14 +13811,14 @@
             layerType: LayerType.baseLayer
           });
         }
-      })), (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _b === void 0 ? void 0 : _b.title, /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }), (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _d === void 0 ? void 0 : _d.title), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-        tooltipPrefix: (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _c === void 0 ? void 0 : _c.tooltipPrefix,
-        icon: (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _d === void 0 ? void 0 : _d.icon
+        tooltipPrefix: (_e = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _e === void 0 ? void 0 : _e.tooltipPrefix,
+        icon: (_f = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _f === void 0 ? void 0 : _f.icon
       })));
     };
 
@@ -13653,7 +13854,8 @@
       var isDockedLayerManager = _a.isDockedLayerManager,
           mapId = _a.mapId,
           onClickDockButton = _a.onClickDockButton,
-          onChangeSize = _a.onChangeSize;
+          onChangeSize = _a.onChangeSize,
+          buttonSettings = _a.buttonSettings;
       var activeMapId = reactRedux.useSelector(function (store) {
         return getActiveWindowId(store);
       });
@@ -13665,7 +13867,8 @@
         isDockedLayerManager: isDockedLayerManager,
         shortcutsEnabled: shortcutsEnabled,
         onClickDockButton: onClickDockButton,
-        onChangeSize: onChangeSize
+        onChangeSize: onChangeSize,
+        buttonSettings: buttonSettings
       });
     };
 
@@ -13685,7 +13888,7 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$2 = {
+    var styles$3 = {
       layerRowContainer: {
         position: 'relative',
         width: '100%',
@@ -13712,37 +13915,40 @@
     };
 
     var LayerManager = function LayerManager(_a) {
+      var _b, _c, _d, _e, _f;
+
       var mapId = _a.mapId,
           preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers,
           preloadedBaseServices = _a.preloadedBaseServices,
           bounds = _a.bounds,
           onClose = _a.onClose,
-          showTitle = _a.showTitle,
+          _g = _a.title,
+          title = _g === void 0 ? 'Layer Manager' : _g,
           isOpen = _a.isOpen,
-          _b = _a.onMouseDown,
-          onMouseDown = _b === void 0 ? function () {} : _b,
-          _c = _a.order,
-          order = _c === void 0 ? 0 : _c,
-          _d = _a.source,
-          source = _d === void 0 ? 'app' : _d,
-          _e = _a.leftHeaderComponent,
-          leftHeaderComponent = _e === void 0 ? undefined : _e,
-          _f = _a.isLoading,
-          isLoading = _f === void 0 ? false : _f,
+          _h = _a.onMouseDown,
+          onMouseDown = _h === void 0 ? function () {} : _h,
+          _j = _a.order,
+          order = _j === void 0 ? 0 : _j,
+          _k = _a.source,
+          source = _k === void 0 ? 'app' : _k,
+          _l = _a.leftHeaderComponent,
+          leftHeaderComponent = _l === void 0 ? undefined : _l,
+          _m = _a.isLoading,
+          isLoading = _m === void 0 ? false : _m,
           error = _a.error,
-          _g = _a.isDockedLayerManager,
-          isDockedLayerManager = _g === void 0 ? false : _g,
-          _h = _a.onToggleDock,
-          onToggleDock = _h === void 0 ? function () {} : _h,
-          _j = _a.size,
-          size = _j === void 0 ? sizeLarge : _j,
-          _k = _a.startPosition,
-          startPosition = _k === void 0 ? {
+          _o = _a.isDockedLayerManager,
+          isDockedLayerManager = _o === void 0 ? false : _o,
+          _p = _a.onToggleDock,
+          onToggleDock = _p === void 0 ? function () {} : _p,
+          _q = _a.size,
+          size = _q === void 0 ? sizeLarge : _q,
+          _r = _a.startPosition,
+          startPosition = _r === void 0 ? {
         top: 85,
         left: 50
-      } : _k,
-          _l = _a.setFocused,
-          setFocused = _l === void 0 ? function () {} : _l,
+      } : _r,
+          _s = _a.setFocused,
+          setFocused = _s === void 0 ? function () {} : _s,
           settings = _a.settings;
       var minSize = {
         width: 100,
@@ -13750,10 +13956,11 @@
       };
       var startSizeCalc = calculateStartSize(minSize, size, startPosition);
 
-      var _m = __read(React__namespace.useState(startSizeCalc), 2),
-          sizeInState = _m[0],
-          setSizeInState = _m[1];
+      var _t = __read(React__namespace.useState(startSizeCalc), 2),
+          sizeInState = _t[0],
+          setSizeInState = _t[1];
 
+      var theme = material.useTheme();
       React__namespace.useEffect(function () {
         if (size !== sizeInState && isDockedLayerManager && isOpen) {
           setSizeInState(size);
@@ -13761,7 +13968,7 @@
 
       }, [size, isOpen]);
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
-        title: showTitle ? "Layer Manager " + mapId : 'Layer Manager',
+        title: title,
         startSize: sizeInState,
         minWidth: minSize.width,
         minHeight: minSize.height,
@@ -13790,10 +13997,13 @@
             setSizeInState(__assign(__assign({}, sizeInState), {
               width: width
             }));
-          }
+          },
+          buttonSettings: (_b = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _b === void 0 ? void 0 : _b.controlButtonSettings
         }),
+        dragHandleIcon: (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _c === void 0 ? void 0 : _c.dragHandle) === null || _d === void 0 ? void 0 : _d.icon,
+        closeIcon: (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _e === void 0 ? void 0 : _e.closeButton) === null || _f === void 0 ? void 0 : _f.icon,
         className: "layermanager",
-        sx: layerManagerStyle,
+        sx: __assign(__assign({}, layerManagerStyle), theme.palette.geowebColors.layerManager.root),
         onResizeStop: function onResizeStop(_event, _direction, node) {
           var width = node.offsetWidth,
               height = node.offsetHeight;
@@ -13830,14 +14040,15 @@
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         "data-testid": "layerManagerRowContainer",
-        sx: styles$2.layerRowContainer
+        sx: styles$3.layerRowContainer
       }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
         mapPresetsModule: leftHeaderComponent,
         mapId: mapId,
         source: source,
         settings: settings === null || settings === void 0 ? void 0 : settings.header
       }), /*#__PURE__*/React__namespace.createElement(LayerContainerRow, {
-        mapId: mapId
+        mapId: mapId,
+        settings: settings === null || settings === void 0 ? void 0 : settings.content
       }), /*#__PURE__*/React__namespace.createElement(BaseLayerRow, {
         mapId: mapId,
         tooltip: "Add base layers",
@@ -14043,24 +14254,26 @@
           preloadedMapServices = _a.preloadedMapServices,
           preloadedBaseServices = _a.preloadedBaseServices,
           bounds = _a.bounds,
-          _b = _a.showTitle,
-          showTitle = _b === void 0 ? false : _b,
-          _c = _a.leftHeaderComponent,
-          leftHeaderComponent = _c === void 0 ? undefined : _c;
+          _b = _a.title,
+          title = _b === void 0 ? 'Layer Manager' : _b,
+          _c = _a.showMapIdInTitle,
+          showMapIdInTitle = _c === void 0 ? false : _c,
+          _d = _a.leftHeaderComponent,
+          leftHeaderComponent = _d === void 0 ? undefined : _d;
       var dispatch = reactRedux.useDispatch();
       var mapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, dialogType);
       });
 
-      var _d = useSetupDialog(dialogType),
-          dialogOrder = _d.dialogOrder,
-          setDialogOrder = _d.setDialogOrder,
-          onCloseDialog = _d.onCloseDialog,
-          isDialogOpen = _d.isDialogOpen,
-          uiSource = _d.uiSource,
-          uiIsLoading = _d.uiIsLoading,
-          uiError = _d.uiError,
-          setFocused = _d.setFocused;
+      var _e = useSetupDialog(dialogType),
+          dialogOrder = _e.dialogOrder,
+          setDialogOrder = _e.setDialogOrder,
+          onCloseDialog = _e.onCloseDialog,
+          isDialogOpen = _e.isDialogOpen,
+          uiSource = _e.uiSource,
+          uiIsLoading = _e.uiIsLoading,
+          uiError = _e.uiError,
+          setFocused = _e.setFocused;
 
       useFetchServices(dialogType, preloadedMapServices);
 
@@ -14073,6 +14286,7 @@
         }));
       };
 
+      var shownTitle = showMapIdInTitle ? title + " " + mapId : title;
       return /*#__PURE__*/React__namespace.createElement(LayerManager, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
@@ -14080,7 +14294,7 @@
         bounds: bounds,
         isOpen: isDialogOpen,
         onClose: onCloseDialog,
-        showTitle: showTitle,
+        title: shownTitle,
         onMouseDown: setDialogOrder,
         order: dialogOrder,
         source: uiSource,
@@ -14122,12 +14336,14 @@
           preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers,
           preloadedBaseServices = _a.preloadedBaseServices,
           bounds = _a.bounds,
-          _b = _a.showTitle,
-          showTitle = _b === void 0 ? false : _b,
-          _c = _a.leftHeaderComponent,
-          leftHeaderComponent = _c === void 0 ? undefined : _c,
-          _d = _a.source,
-          source = _d === void 0 ? 'app' : _d;
+          _b = _a.title,
+          title = _b === void 0 ? 'Layer Manager' : _b,
+          _c = _a.showMapIdInTitle,
+          showMapIdInTitle = _c === void 0 ? false : _c,
+          _d = _a.leftHeaderComponent,
+          leftHeaderComponent = _d === void 0 ? undefined : _d,
+          _e = _a.source,
+          source = _e === void 0 ? 'app' : _e;
       var dispatch = reactRedux.useDispatch();
       var dockedLayerManagerSize = reactRedux.useSelector(function (store) {
         return getDockedLayerManagerSize(store, mapId);
@@ -14141,11 +14357,11 @@
 
       var dialogType = DialogTypes.DockedLayerManager + "-" + mapId;
 
-      var _e = useSetupDialog(dialogType, source),
-          dialogOrder = _e.dialogOrder,
-          isDialogOpen = _e.isDialogOpen,
-          setDialogOrder = _e.setDialogOrder,
-          onCloseDialog = _e.onCloseDialog;
+      var _f = useSetupDialog(dialogType, source),
+          dialogOrder = _f.dialogOrder,
+          isDialogOpen = _f.isDialogOpen,
+          setDialogOrder = _f.setDialogOrder,
+          onCloseDialog = _f.onCloseDialog;
 
       var onToggleDock = function onToggleDock() {
         // Close docked layer manager and open the floating layer manager
@@ -14158,6 +14374,7 @@
         }));
       };
 
+      var shownTitle = showMapIdInTitle ? title + " " + mapId : title;
       return /*#__PURE__*/React__namespace.createElement(LayerManager, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
@@ -14165,7 +14382,7 @@
         bounds: bounds,
         isOpen: isDialogOpen,
         onClose: onCloseDialog,
-        showTitle: showTitle,
+        title: shownTitle,
         leftHeaderComponent: leftHeaderComponent,
         // isLoading={isMapPresetLoading}
         // error={mapPresetError}
@@ -14195,8 +14412,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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_a) {
@@ -14218,13 +14435,12 @@
           source: source
         }));
       }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-      return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
         onClick: openFilterResultsDialog,
-        active: isOpenInStore,
+        isSelected: isOpenInStore,
         id: "keywordFilterButton",
-        "data-testid": "keywordFilterButton",
-        disableRipple: true,
-        variant: "tool"
+        "data-testid": "keywordFilterButton"
       }, /*#__PURE__*/React__namespace.createElement(theme.Filter, null));
     };
 
@@ -14499,8 +14715,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var LayerInfoButtonConnect = function LayerInfoButtonConnect(_a) {
@@ -14554,9 +14770,9 @@
         }
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
-        variant: "icon",
-        active: isActive && isOpenInStore,
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        variant: "flat",
+        isSelected: isActive && isOpenInStore,
         onClick: onClick,
         id: "layerInfoButton",
         "aria-label": "layer info",
@@ -15694,7 +15910,7 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$1 = {
+    var styles$2 = {
       servicesContainer: {
         width: '360px',
         maxHeight: '412px',
@@ -15761,7 +15977,7 @@
         (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, []);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.servicesContainer,
+        sx: styles$2.servicesContainer,
         "data-testid": "ServiceDialog",
         onKeyDown: function onKeyDown(event) {
           if (event.key !== 'Escape') {
@@ -15771,9 +15987,9 @@
         tabIndex: -1,
         ref: dialogRef
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.header
+        sx: styles$2.header
       }, "Services"), /*#__PURE__*/React__namespace.createElement(material.Backdrop, {
-        sx: styles$1.loading,
+        sx: styles$2.loading,
         open: isLoading
       }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, null)), /*#__PURE__*/React__namespace.createElement(Rows, {
         services: services,
@@ -15782,12 +15998,12 @@
         setServicePopupInfo: setServicePopupInfo,
         selectedLayers: selectedLayers
       }), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.footer
+        sx: styles$2.footer
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: openAddService,
         onKeyDown: stopTabPropagation,
         "data-testid": "openAddServiceButton",
-        sx: styles$1.button,
+        sx: styles$2.button,
         variant: "tertiary",
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
       }, "Add a new service")));
@@ -17344,8 +17560,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var MapControlButton = function MapControlButton(_a) {
@@ -17358,13 +17574,15 @@
           isActive = _c === void 0 ? false : _c,
           props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
 
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        placement: placement,
-        title: title
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, __assign({
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, __assign({
+        variant: "tool",
+        tooltipProps: {
+          placement: placement,
+          title: title
+        },
         onClick: onClick,
-        active: isActive
-      }, props), children));
+        isSelected: isActive
+      }, props), children);
     };
 
     /* *
@@ -18161,8 +18379,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var titleOn = 'Auto update on';
     var titleOff = 'Auto update off';
@@ -18174,21 +18392,20 @@
           isAutoUpdating = _c === void 0 ? false : _c,
           _d = _a.disabled,
           disabled = _d === void 0 ? false : _d;
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: isAutoUpdating ? titleOn : titleOff,
-        "data-testid": "autoUpdateButtonTooltip"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
-        active: isAutoUpdating,
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
+        isSelected: isAutoUpdating,
         disabled: disabled,
         onClick: function onClick() {
           return toggleAutoUpdate();
         },
-        "data-testid": "autoUpdateButton"
+        "data-testid": "autoUpdateButton",
+        tooltipTitle: isAutoUpdating ? titleOn : titleOff
       }, isAutoUpdating ? /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateActive, {
         "data-testid": "auto-update-svg-on"
       }) : /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateInActive, {
         "data-testid": "auto-update-svg-off"
-      }))));
+      }));
     };
 
     /* *
@@ -18204,8 +18421,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var THROTTLE_WAIT_TIME = 300; // [ms]
 
@@ -18258,20 +18475,24 @@
         onKeyDown: function onKeyDown(event) {
           event.stopPropagation();
         }
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: title
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
+        tooltipTitle: title,
         onClick: function onClick() {
           setOpen(true);
         },
         ref: setAnchorRef,
-        active: true,
-        width: "100%",
-        onWheel: onWheel
+        isSelected: true,
+        onWheel: onWheel,
+        sx: {
+          padding: '11px!important',
+          width: '100%!important'
+        }
       }, icon, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         fontSize: 12,
-        fontWeight: 400
-      }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+        fontWeight: 400,
+        textTransform: "none"
+      }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text)), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorRef,
         open: open,
         onClose: function onClose() {
@@ -18327,12 +18548,19 @@
             minHeight: '30px!important'
           }
         }
-      }, "length"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, "length"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
         "data-testid": "menu-animation-length-button",
-        active: false,
-        disableRipple: true,
-        width: "100%"
-      }, minutesToDescribedDuration(value))));
+        sx: {
+          padding: '11px!important',
+          width: '100%!important'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        fontSize: 14,
+        fontWeight: 500,
+        textTransform: "none",
+        lineHeight: 2
+      }, minutesToDescribedDuration(value)))));
     };
 
     /* *
@@ -18631,8 +18859,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var title$1 = 'Now';
 
@@ -18641,18 +18869,18 @@
           onSetNow = _b === void 0 ? function () {} : _b,
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c;
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: title$1,
-        "data-testid": "nowButtonTooltip"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
+        "aria-label": "now",
+        tooltipTitle: title$1,
+        "data-testid": "nowButtonTooltip",
         disabled: disabled,
         onClick: function onClick() {
           return onSetNow();
-        },
-        "aria-label": "now"
+        }
       }, /*#__PURE__*/React__namespace.createElement(theme.Now, {
         "data-testid": "now-svg"
-      }))));
+      }));
     };
 
     /* *
@@ -18807,8 +19035,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var OptionsMenuButton = function OptionsMenuButton(_a) {
@@ -18834,21 +19062,22 @@
           setOpen(true);
         }
       }, [anchorEl, isOpenByDefault]);
-      return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-        title: "Animation options",
-        placement: "bottom"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        ref: function ref(_ref) {
-          setAnchorEl(_ref);
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        variant: "tool",
         onClick: function onClick() {
           setOpen(!open);
         },
         "data-testid": "optionsMenuButton",
-        active: open,
-        "aria-label": "animation options"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Options, null)))), /*#__PURE__*/React__default["default"].createElement(material.Popper, {
+        isSelected: open,
+        "aria-label": "animation options",
+        tooltipProps: {
+          title: 'Animation options',
+          placement: 'bottom'
+        },
+        ref: function ref(_ref) {
+          setAnchorEl(_ref);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Options, null)), /*#__PURE__*/React__default["default"].createElement(material.Popper, {
         sx: {
           zIndex: 3
         },
@@ -18857,7 +19086,11 @@
         "data-testid": "optionsMenuPopOver",
         anchorEl: anchorEl
       }, /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        elevation: 3
+        elevation: 3,
+        sx: {
+          position: 'relative',
+          top: 1
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         sx: {
           padding: '0px 10px 10px'
@@ -18887,8 +19120,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var forwardTooltipTitle = 'Forward';
     var backwardTooltipTitle = 'Backward';
@@ -18898,17 +19131,17 @@
           isDisabled = _a.isDisabled,
           _b = _a.onClickBFButton,
           onClickBFButton = _b === void 0 ? function () {} : _b;
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        variant: "tool",
         disabled: isDisabled,
         "aria-label": isForwardStep ? 'forward' : 'backward',
-        onClick: onClickBFButton
+        onClick: onClickBFButton,
+        tooltipTitle: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
       }, isForwardStep ? /*#__PURE__*/React__namespace.createElement(theme.StepForward, {
         "data-testid": "step-forward-svg-path"
       }) : /*#__PURE__*/React__namespace.createElement(theme.StepBackward, {
         "data-testid": "step-backward-svg-path"
-      }))));
+      }));
     };
 
     /* *
@@ -18941,7 +19174,7 @@
         isForwardStep: true
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
-      }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null)));
+      }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton$1, null)));
     };
 
     /* *
@@ -19980,7 +20213,7 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var TIME_SLIDER_LEGEND_HEIGHT = 24;
-    var DRAG_AREA_WIDTH = 24;
+    var DRAG_AREA_WIDTH$1 = 24;
 
     function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition) {
       var _a = __read(React__namespace.useState(convertStringTimeToUnix(animationStartTime)), 2),
@@ -20035,7 +20268,7 @@
 
         if (leftMarkerDragging) {
           var mousePosition = leftMarkerPx + x;
-          var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2;
+          var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH$1 * 2;
 
           if (mousePosition >= rightAnimationPosition || mousePosition <= 0) {
             return;
@@ -20051,7 +20284,7 @@
 
         if (rightMarkerDragging) {
           var mousePosition = rightMarkerPx + x;
-          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2;
+          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH$1 * 2;
 
           if (leftAnimationPosition >= mousePosition || mousePosition >= canvasWidth) {
             return;
@@ -20240,7 +20473,7 @@
             selectedTimePx = _a[2]; // start dragging selected time.
 
 
-        if (isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH)) {
+        if (isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH$1)) {
           setCursorStyle('grabbing');
           setSelectedTimeDragging(true);
           return;
@@ -20249,7 +20482,7 @@
         if (animationStartTime && animationEndTime) {
           dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
 
-          if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
+          if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH$1) && !rightMarkerDragging) {
             setCursorStyle('grabbing');
             setLeftMarkerDragging(true);
             setTooltipTime(moment__default["default"].utc(animationStartTime));
@@ -20257,7 +20490,7 @@
             return;
           }
 
-          if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
+          if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH$1) && !leftMarkerDragging) {
             setCursorStyle('grabbing');
             setRightMarkerDragging(true);
             setTooltipTime(moment__default["default"].utc(animationEndTime));
@@ -20303,9 +20536,9 @@
             selectedTimePx = _a[2]; // Adjust mouse cursor while hovering draggable areas
 
 
-        var leftAnimationIconArea = isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH);
-        var rightAnimationIconArea = isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH);
-        var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH);
+        var leftAnimationIconArea = isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH$1);
+        var rightAnimationIconArea = isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH$1);
+        var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH$1);
         var insideAnimationArea = isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx);
         var hoveringLegendHandles = leftAnimationIconArea || rightAnimationIconArea || selectedTimeArea || mouseDownInLegend;
 
@@ -20378,22 +20611,21 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var HideSliderButton = function HideSliderButton(_a) {
       var isVisible = _a.isVisible,
           toggleTimeSliderIsVisible = _a.toggleTimeSliderIsVisible;
-      return /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-        title: isVisible ? 'Hide timeslider' : 'Show timeslider',
-        "data-testid": "autoUpdateButtonTooltip"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        variant: "tool",
         onClick: function onClick() {
           toggleTimeSliderIsVisible(!isVisible);
         },
-        "data-testid": "hideTimeSliderButton"
-      }, isVisible ? /*#__PURE__*/React__default["default"].createElement(theme.ChevronDown, null) : /*#__PURE__*/React__default["default"].createElement(theme.ChevronUp, null))));
+        "data-testid": "hideTimeSliderButton",
+        tooltipTitle: isVisible ? 'Hide timeslider' : 'Show timeslider'
+      }, isVisible ? /*#__PURE__*/React__default["default"].createElement(theme.ChevronDown, null) : /*#__PURE__*/React__default["default"].createElement(theme.ChevronUp, null));
     };
 
     /* *
@@ -21763,7 +21995,7 @@
     var tileRenderSettings = {
       WorldMap_Light_Grey_Canvas: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap_Light_Grey_Canvas/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap_Light_Grey_Canvas/EPSG3857/',
           minLevel: 0,
           maxLevel: 9,
           tileServerType: 'osm',
@@ -21772,7 +22004,7 @@
       },
       OpenStreetMap_NL: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/OpenStreetMap_NL/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/OpenStreetMap_NL/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21781,14 +22013,14 @@
       },
       OpenStreets_NL: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/OpenStreets_NL/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/OpenStreets_NL/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
           copyRight: 'OpenStreetMap - contributors | Ingmapping'
         },
         'EPSG:28992': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/OpenStreets_NL/EPSG28992/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/OpenStreets_NL/EPSG28992/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21797,7 +22029,7 @@
       },
       Positron_NL: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/Positron_NL/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/Positron_NL/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21806,7 +22038,7 @@
       },
       Positron_NL_NoLabels: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/Positron_NL_NoLabels/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/Positron_NL_NoLabels/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21815,7 +22047,7 @@
       },
       Klokantech_Basic_NL: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/Klokantech_Basic_NL/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/Klokantech_Basic_NL/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21824,7 +22056,7 @@
       },
       Klokantech_Basic_NL_NoLabels: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/Klokantech_Basic_NL_NoLabels/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/Klokantech_Basic_NL_NoLabels/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21833,7 +22065,7 @@
       },
       OSM_Blossom_NL: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/OSM_Blossom_NL/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/OSM_Blossom_NL/EPSG3857/',
           minLevel: 0,
           maxLevel: 16,
           tileServerType: 'osm',
@@ -21842,14 +22074,14 @@
       },
       WorldMap: {
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG3857/',
           minLevel: 0,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'TODO__EPSG:4326': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG4326/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG4326/',
           minLevel: 0,
           maxLevel: 9,
           origX: -180,
@@ -21859,42 +22091,42 @@
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:3411': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG3411/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG3411/',
           minLevel: 3,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:28992': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG28992/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG28992/',
           minLevel: 5,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:3412': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG3412/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG3412/',
           minLevel: 3,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:32661': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG32661/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG32661/',
           minLevel: 4,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:54030': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG54030/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG54030/',
           minLevel: 3,
           maxLevel: 9,
           tileServerType: 'osm',
           copyRight: 'Natural Earth II | Ingmapping'
         },
         'EPSG:3575': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/WorldMap/EPSG3575/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/WorldMap/EPSG3575/',
           minLevel: 5,
           maxLevel: 9,
           tileServerType: 'osm',
@@ -21903,7 +22135,7 @@
       },
       OSM_Antarctica: {
         'EPSG:3412': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/OSM_Antarctica/EPSG3412/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/OSM_Antarctica/EPSG3412/',
           minLevel: 1,
           maxLevel: 7,
           origX: -3000000,
@@ -22006,7 +22238,7 @@
       },
       NaturalEarth2: {
         'EPSG:3411': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG3411/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG3411/',
           minLevel: 1,
           maxLevel: 6,
           origX: -12400000,
@@ -22016,7 +22248,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:3412': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG3412/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG3412/',
           minLevel: 1,
           maxLevel: 6,
           origX: -12400000,
@@ -22026,7 +22258,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:3575': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG3575/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG3575/',
           minLevel: 1,
           maxLevel: 6,
           origX: -13000000,
@@ -22036,14 +22268,14 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:3857': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG3857/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG3857/',
           minLevel: 1,
           maxLevel: 7,
           tileServerType: 'wmst',
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:4258': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG4326/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG4326/',
           minLevel: 1,
           maxLevel: 6,
           origX: -180,
@@ -22053,7 +22285,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:4326': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG4326/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG4326/',
           minLevel: 1,
           maxLevel: 6,
           origX: -180,
@@ -22063,7 +22295,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:28992': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG28992/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG28992/',
           minLevel: 1,
           maxLevel: 5,
           origX: -2999000,
@@ -22073,7 +22305,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:32661': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG32661/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG32661/',
           minLevel: 1,
           maxLevel: 7,
           origX: -5000000,
@@ -22083,7 +22315,7 @@
           copyRight: 'NPS - Natural Earth II'
         },
         'EPSG:54030': {
-          home: 'https://knmi-geoweb-assets.s3-eu-west-1.amazonaws.com/NaturalEarth2/EPSG54030/',
+          home: 'https://geoweb-maps-assets.pmc.knmi.cloud/NaturalEarth2/EPSG54030/',
           minLevel: 1,
           maxLevel: 7,
           origX: -17000000,
@@ -22111,88 +22343,50 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var getCurrentDimensionValue = function getCurrentDimensionValue(dimensions, name) {
-      if (dimensions === void 0) {
-        dimensions = [];
-      }
-
-      var currentDimension = dimensions.find(function (dim) {
-        return dim.name === name;
-      });
-      return currentDimension === null || currentDimension === void 0 ? void 0 : currentDimension.currentValue;
-    };
-    var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, mapProperties, onUpdateLayerInformation) {
+    var setLayerInfo = function setLayerInfo(wmLayer, mapId, onUpdateLayerInformation) {
       var origin = LayerActionOrigin.ReactMapViewParseLayer;
-      var service = webmap.WMGetServiceFromStore(wmLayer.service);
-      var serviceName = mapProperties.services && mapProperties.services[service.id] && mapProperties.services[service.id].name || service.id;
-      var webMapJSInstance = getWMJSMapById(mapId);
+      var map = getWMJSMapById(mapId);
       /* Update list of layers for service */
 
-      var done = function done(layers) {
-        var updateObject = {
+      var updateObject = {
+        origin: origin,
+        layerStyle: {
           origin: origin,
-          serviceLayers: {
-            name: serviceName,
-            id: service.id,
-            serviceUrl: wmLayer.service,
-            layers: layers,
-            scope: 'system'
-          },
-          layerStyle: {
-            origin: origin,
-            layerId: wmLayer.ReactWMJSLayerId,
-            style: wmLayer.currentStyle
-          },
-          mapDimensions: {
-            origin: origin,
-            mapId: mapId,
-            dimensions: webMapJSInstance.mapdimensions.map(function (_a) {
-              var name = _a.name,
-                  units = _a.units,
-                  currentValue = _a.currentValue,
-                  synced = _a.synced;
-              var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
-                return dim.name === name;
-              });
-              var newDimValue = reactDim && reactDim.currentValue || currentValue;
-              var newDimSynced = reactDim && reactDim.synced || synced;
-              return {
-                name: name,
-                units: units,
-                currentValue: newDimValue,
-                synced: newDimSynced
-              };
-            })
-          },
-          layerDimensions: {
-            origin: origin,
-            layerId: wmLayer.id,
-            dimensions: wmLayer.dimensions.map(function (dim) {
-              var name = dim.name,
-                  units = dim.units,
-                  synced = dim.synced;
-              var currentDimensionValue = getCurrentDimensionValue(wmLayer.dimensions, name);
-              var newDimensionValue = currentDimensionValue || dim.getValue();
-              return {
-                name: name,
-                units: units,
-                currentValue: newDimensionValue,
-                minValue: dim.getFirstValue(),
-                maxValue: dim.getLastValue(),
-                timeInterval: dim.getDimInterval(),
-                values: dim.getValues(),
-                synced: synced
-              };
-            })
-          }
-        };
-        onUpdateLayerInformation && onUpdateLayerInformation(updateObject);
+          layerId: wmLayer.ReactWMJSLayerId,
+          style: wmLayer.currentStyle
+        },
+        mapDimensions: {
+          mapId: mapId,
+          origin: origin,
+          dimensions: map && map.mapdimensions.map(function (mapdim) {
+            return {
+              units: mapdim.units,
+              currentValue: mapdim.currentValue,
+              name: mapdim.name
+            };
+          }) || []
+        },
+        layerDimensions: {
+          origin: origin,
+          layerId: wmLayer.id,
+          dimensions: wmLayer.dimensions.map(function (dim) {
+            var name = dim.name,
+                units = dim.units,
+                synced = dim.synced;
+            return {
+              name: name,
+              units: units,
+              currentValue: dim.getValue(),
+              minValue: dim.getFirstValue(),
+              maxValue: dim.getLastValue(),
+              timeInterval: dim.getDimInterval(),
+              values: dim.getValues(),
+              synced: synced
+            };
+          })
+        }
       };
-
-      service.getLayerObjectsFlat(done, function () {// do nothing
-      }, false, {
-        headers: wmLayer.headers
-      });
+      onUpdateLayerInformation && onUpdateLayerInformation(updateObject);
     };
 
     /* *
@@ -22291,8 +22485,7 @@
                 coordinateIndexInFeature: polygonIndex
               };
             }
-          } catch (e) {
-            console.warn(e);
+          } catch (e) {// console.warn(e);
           }
         }
       }
@@ -24900,7 +25093,7 @@
                 mapId = _a.mapId;
 
             try {
-              setServiceMetadata(wmLayer, mapId, _this.props, onUpdateLayerInformation);
+              setLayerInfo(wmLayer, mapId, onUpdateLayerInformation);
             } catch (e) {
               /* Provide a hint on what is going wrong */
               console.error(e);
@@ -25192,7 +25385,6 @@
                   mapId_1 = props.mapId;
               onUpdateLayerInformation && onUpdateLayerInformation({
                 origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
-                serviceLayers: null,
                 layerStyle: null,
                 layerDimensions: null,
                 mapDimensions: {
@@ -26370,8 +26562,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var ClockContainer = function ClockContainer(_a) {
       var fontSize = _a.fontSize,
@@ -26404,13 +26596,14 @@
         item: true,
         zIndex: 2,
         ref: setButtonElement
-      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        variant: "tool",
         onClick: onButtonClick,
         sx: {
           color: '#fff!important'
         },
         "aria-label": "Animation options",
-        active: isPopperOpen
+        isSelected: isPopperOpen
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         isPopperOpen: isPopperOpen,
         popperPlacement: popperPlacement
@@ -26865,20 +27058,45 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
+    var sanitizeHTML = function sanitizeHTML(htmlToBeSanitezed) {
+      return {
+        __html: DOMPurify__namespace.sanitize(htmlToBeSanitezed, {
+          ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'table', 'td', 'tr', 'br', 'hr', 'th'],
+          ALLOWED_ATTR: ['href']
+        })
+      };
+    };
 
-    var GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
-      var layers = _a.layers,
-          isOpen = _a.isOpen,
-          onClose = _a.onClose,
-          _b = _a.onMouseDown,
-          onMouseDown = _b === void 0 ? function () {} : _b,
-          mapId = _a.mapId,
-          _c = _a.showMapId,
-          showMapId = _c === void 0 ? false : _c,
-          _d = _a.order,
-          order = _d === void 0 ? 0 : _d,
-          _e = _a.source,
-          source = _e === void 0 ? 'app' : _e,
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
+      var layers = _a.layers,
+          isOpen = _a.isOpen,
+          onClose = _a.onClose,
+          _b = _a.onMouseDown,
+          onMouseDown = _b === void 0 ? function () {} : _b,
+          mapId = _a.mapId,
+          _c = _a.showMapId,
+          showMapId = _c === void 0 ? false : _c,
+          _d = _a.order,
+          order = _d === void 0 ? 0 : _d,
+          _e = _a.source,
+          source = _e === void 0 ? 'app' : _e,
           mapPinLocation = _a.mapPinLocation;
       /* Ref and state for maplocation */
 
@@ -27053,9 +27271,7 @@
           },
           "data-testid": "layer-result-ready-" + layerId,
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: result.data.replace(/<hr\/>/g, '')
-          }
+          dangerouslySetInnerHTML: sanitizeHTML(result.data)
         }) : /*#__PURE__*/React__default["default"].createElement("div", {
           "data-testid": "layer-result-loading-" + layerId
         }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
@@ -27430,17 +27646,27 @@
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
         dispatch(genericActions.syncGroupAddTarget(payload));
       }, [dispatch]);
+      var syncTargets = reactRedux.useSelector(function (store) {
+        return getSyncGroupTargets(store);
+      });
       React__default["default"].useEffect(function () {
         maps.forEach(function (map) {
           map.syncGroupsIds && map.syncGroupsIds.forEach(function (syncGroupsId) {
-            syncGroupAddTarget({
-              groupId: syncGroupsId,
-              targetId: map.id,
-              linked: true
-            });
+            var alreadySyncedTargetIndex = syncTargets.findIndex(function (target) {
+              return target.targetId === map.id && target.groupId === syncGroupsId && target.linked === true;
+            }); // Only trigger an action if the target was not yet added to the group or was not linked.
+
+            if (alreadySyncedTargetIndex === -1) {
+              syncGroupAddTarget({
+                groupId: syncGroupsId,
+                targetId: map.id,
+                linked: true,
+                origin: 'system'
+              });
+            }
           });
         });
-      }, [maps, syncGroupAddTarget]);
+      }, [maps, syncGroupAddTarget, syncTargets]);
       var mapStyle = {
         width: Math.round(100 / cols) + "%",
         height: Math.round(100 / rows) + "%"
@@ -27737,6 +27963,815 @@
       });
     };
 
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var timeSliderLiteButtonDefaultProps = {
+      sx: {
+        width: '36px',
+        height: '36px'
+      }
+    };
+    var timeSliderLiteTooltipDefaultProps = {
+      placement: 'top'
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var HideButton = function HideButton(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j;
+
+      var isVisible = _a.isVisible,
+          settings = _a.settings,
+          onClick = _a.onClick;
+      var hideTitle = (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.label) === null || _b === void 0 ? void 0 : _b.hide) !== null && _c !== void 0 ? _c : 'Hide timeslider';
+      var showTitle = (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.label) === null || _d === void 0 ? void 0 : _d.show) !== null && _e !== void 0 ? _e : 'Show timeslider';
+      var hideIcon = (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _f === void 0 ? void 0 : _f.hide) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__default["default"].createElement(theme.ChevronDown, null);
+      var showIcon = (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _h === void 0 ? void 0 : _h.show) !== null && _j !== void 0 ? _j : /*#__PURE__*/React__default["default"].createElement(theme.ChevronUp, null);
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
+        title: isVisible ? hideTitle : showTitle
+      }), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
+        "aria-selected": !isVisible,
+        onClick: onClick,
+        "data-testid": "TimeSliderLite-HideButton"
+      }), isVisible ? hideIcon : showIcon));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var ControlButtonGroup = function ControlButtonGroup(_a) {
+      var children = _a.children,
+          right = _a.right,
+          left = _a.left;
+      return /*#__PURE__*/React__default["default"].createElement(material.ButtonGroup, {
+        orientation: "horizontal",
+        fullWidth: true,
+        sx: __assign(__assign(__assign({}, right && {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0
+        }), left && {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0
+        }), {
+          backgroundColor: 'geowebColors.background.surface',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '4px',
+          gap: '2px'
+        })
+      }, 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var TICK_HEIGHT = 8;
+    var TIME_SLIDER_LITE_PADDING_RIGHT = 1;
+
+    var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_a) {
+      var width = _a.width,
+          height = _a.height,
+          startTime = _a.startTime,
+          endTime = _a.endTime,
+          style = _a.style,
+          locale = _a.locale;
+      var timeSliderLite = material.useTheme().palette.geowebColors.timeSliderLite;
+
+      if (!width) {
+        return /*#__PURE__*/React__default["default"].createElement("svg", {
+          style: style,
+          height: height
+        });
+      } // Convert start and end time from Unix timestamp to JavaScript Date object
+
+
+      var startDate = new Date(startTime * 1000);
+      var endDate = new Date(endTime * 1000);
+      var totalDays = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
+      var tickSpacing = width / totalDays;
+      var tickOffset = (startDate.getHours() + startDate.getMinutes() / 60) / 24 * tickSpacing; // Set up variables for date labels and background colors
+
+      var dayLabels = [];
+      var currentDate = startDate;
+      var lastDayLabelDate = new Date(endDate.getTime() + 2 * 24 * 60 * 60 * 1000); // Append two more days
+
+      while (currentDate < lastDayLabelDate) {
+        var dateString = currentDate.toLocaleDateString(locale, {
+          weekday: 'short',
+          month: 'numeric',
+          day: 'numeric'
+        });
+        var label = dateString.charAt(0).toUpperCase() + dateString.slice(1);
+        dayLabels.push(label);
+        currentDate.setDate(currentDate.getDate() + 1);
+      }
+
+      var backgroundRectangles = dayLabels.map(function (label, index) {
+        return /*#__PURE__*/React__default["default"].createElement("rect", {
+          x: index * tickSpacing - tickOffset,
+          y: 0,
+          width: tickSpacing,
+          height: height,
+          fill: index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill,
+          key: label + "-color"
+        });
+      });
+      var labels = dayLabels.map(function (label, index) {
+        return /*#__PURE__*/React__default["default"].createElement("text", {
+          x: index * tickSpacing + 8 - tickOffset,
+          y: 14,
+          fill: timeSliderLite.timeline.fill,
+          textAnchor: "left",
+          fontSize: "12px",
+          key: label + "-text",
+          style: {
+            userSelect: 'none'
+          }
+        }, dayLabels[index]);
+      });
+      var ticksPerDay = 4;
+      var tickMarks = dayLabels.map(function (label, index) {
+        return Array.from({
+          length: ticksPerDay + 1
+        }, function (_, value) {
+          return /*#__PURE__*/React__default["default"].createElement("line", {
+            x1: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+            y1: height,
+            x2: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+            y2: Math.floor(height - TICK_HEIGHT),
+            stroke: timeSliderLite.timeline.stroke,
+            key: label + "-" + value
+          });
+        });
+      }).flat();
+      return /*#__PURE__*/React__default["default"].createElement("svg", {
+        style: style,
+        width: width + TIME_SLIDER_LITE_PADDING_RIGHT,
+        height: height
+      }, backgroundRectangles, tickMarks, labels);
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var MILLISECOND_TO_SECOND = 1 / 1000;
+    /**
+     * Reformats a date that has capitalized first letter and colon separator for time
+     * @param dateString Date string from Date.toLocaleDateString
+     * @returns Reformatted date string
+     */
+
+    var reformatFinnishDateString = function reformatFinnishDateString(dateString) {
+      var charPositionOfTimestamp = -4;
+      return dateString.charAt(0).toUpperCase() + dateString.slice(1, charPositionOfTimestamp) + dateString.slice(charPositionOfTimestamp).replace('.', ':');
+    };
+    var getSelectedTimePx = function getSelectedTimePx(startTime, endTime, selectedTime, width) {
+      var startDate = new Date(startTime * 1000);
+      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
+      var selectedTimeX = selectedTime - startDateX;
+      var needleX = Math.floor(selectedTimeX / (endTime - startTime) * width);
+      return needleX;
+    };
+    var boundedValue = function boundedValue(value, bounds) {
+      var _a = __read(bounds, 2),
+          min = _a[0],
+          max = _a[1];
+
+      return Math.max(min, Math.min(max, value));
+    };
+    var getSelectedTimeFromPx = function getSelectedTimeFromPx(startTime, endTime, selectedTimePx, width) {
+      var startDate = new Date(startTime * 1000);
+      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
+      var selectedTimeX = Math.floor(selectedTimePx / width * (endTime - startTime));
+      var selectedTime = selectedTimeX + startDateX;
+      return selectedTime;
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var DRAG_AREA_WIDTH = 10;
+    var NEEDLE_WIDTH = 5;
+    var SHADOW_SPREAD = 2;
+
+    var NeedleShadow = function NeedleShadow(_a) {
+      var x = _a.x,
+          stroke = _a.stroke,
+          height = _a.height,
+          width = _a.width;
+      return /*#__PURE__*/React__default["default"].createElement("line", {
+        x1: x,
+        y1: height - (height - SHADOW_SPREAD / 2),
+        x2: x,
+        y2: height - SHADOW_SPREAD / 2,
+        strokeWidth: width + SHADOW_SPREAD,
+        stroke: stroke,
+        strokeLinecap: "round",
+        filter: "blur(0.5px)",
+        "data-testid": "TimeSliderLite-NeedleShadow"
+      });
+    };
+
+    var NeedleLine = function NeedleLine(_a) {
+      var x = _a.x,
+          stroke = _a.stroke,
+          height = _a.height,
+          width = _a.width;
+      return /*#__PURE__*/React__default["default"].createElement("line", {
+        x1: x,
+        y1: width / 2,
+        x2: x,
+        y2: height - width / 2,
+        strokeWidth: width,
+        strokeLinecap: "round",
+        stroke: stroke,
+        "data-testid": "TimeSliderLite-NeedleLine"
+      });
+    };
+
+    var TimeSliderDraggableNeedle = function TimeSliderDraggableNeedle(_a) {
+      var draggableLabel = _a.draggableLabel,
+          width = _a.width,
+          height = _a.height,
+          locale = _a.locale,
+          startTime = _a.startTime,
+          endTime = _a.endTime,
+          _b = _a.needleDragAreaWidth,
+          needleDragAreaWidth = _b === void 0 ? DRAG_AREA_WIDTH : _b,
+          needleLabelZIndex = _a.needleLabelZIndex,
+          needleLabelOffset = _a.needleLabelOffset,
+          _c = _a.needleWidth,
+          needleWidth = _c === void 0 ? NEEDLE_WIDTH : _c,
+          timeStep = _a.timeStep,
+          selectedTime = _a.selectedTime,
+          setSelectedTime = _a.setSelectedTime,
+          style = _a.style;
+      var draggableRef = React.useRef(null);
+      var timeSliderLite = material.useTheme().palette.geowebColors.timeSliderLite;
+      var x = getSelectedTimePx(startTime, endTime, selectedTime, width) - needleDragAreaWidth / 2;
+      var roundedSelectedTime = Math.floor(selectedTime / timeStep) * timeStep;
+      var dateString = new Date(roundedSelectedTime * 1000).toLocaleDateString(locale, {
+        weekday: 'short',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+      });
+      var label = locale === 'fi' || locale === 'sv-FI' ? reformatFinnishDateString(dateString) : dateString;
+      return /*#__PURE__*/React__default["default"].createElement(Draggable__default["default"], {
+        handle: ".TimeSliderLite-DraggableNeedle",
+        axis: "x",
+        nodeRef: draggableRef,
+        bounds: {
+          left: -needleDragAreaWidth / 2,
+          right: width - needleDragAreaWidth / 2
+        },
+        position: {
+          x: x,
+          y: 0
+        },
+        onDrag: function onDrag(_, position) {
+          var positionOffsetToCompensateFlooring = 0.5;
+          var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring, width);
+          setSelectedTime(newSelectedTime);
+        },
+        onStop: function onStop(_, position) {
+          var positionOffsetToCompensateFlooring = 0.5;
+          var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring, width);
+          var roundedSelectedTime = Math.floor(newSelectedTime / timeStep) * timeStep;
+          setSelectedTime(roundedSelectedTime);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TimeSliderLite-DraggableNeedle",
+        ref: draggableRef,
+        "data-testid": "TimeSliderLite-DraggableNeedle"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: label,
+        arrow: true,
+        placement: "top",
+        open: true,
+        componentsProps: {
+          tooltip: {
+            sx: {
+              padding: '0 3px 0 3px',
+              fontSize: '12px',
+              backgroundColor: timeSliderLite.needleLabel.backgroundColor,
+              border: "1px solid " + timeSliderLite.needleLabel.borderColor
+            }
+          },
+          arrow: {
+            sx: {
+              color: timeSliderLite.needleLabel.backgroundColor
+            }
+          },
+          popper: {
+            className: draggableLabel ? 'TimeSliderLite-DraggableNeedle' : '',
+            sx: {
+              pointerEvents: draggableLabel ? null : 'none',
+              zIndex: needleLabelZIndex !== null && needleLabelZIndex !== void 0 ? needleLabelZIndex : null,
+              cursor: draggableLabel ? 'ew-resize' : 'default'
+            },
+            modifiers: [{
+              name: 'offset',
+              options: {
+                offset: needleLabelOffset !== null && needleLabelOffset !== void 0 ? needleLabelOffset : [0, 30 - height]
+              }
+            }]
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("svg", {
+        style: style,
+        cursor: "ew-resize",
+        width: needleDragAreaWidth,
+        height: height,
+        "data-testid": "TimeSliderLite-NeedleSvg"
+      }, /*#__PURE__*/React__default["default"].createElement(NeedleShadow, {
+        x: needleDragAreaWidth / 2,
+        stroke: timeSliderLite.needleShadow.stroke,
+        height: height,
+        width: needleWidth
+      }), /*#__PURE__*/React__default["default"].createElement(NeedleLine, {
+        x: needleDragAreaWidth / 2,
+        stroke: timeSliderLite.needle.stroke,
+        height: height,
+        width: needleWidth
+      })))));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var TimeSliderLiteBackground = function TimeSliderLiteBackground(_a) {
+      var height = _a.height,
+          draggableTimeStamp = _a.draggableTimeStamp,
+          locale = _a.locale,
+          startTime = _a.startTime,
+          endTime = _a.endTime,
+          needleWidth = _a.needleWidth,
+          needleDragAreaWidth = _a.needleDragAreaWidth,
+          needleLabelZIndex = _a.needleLabelZIndex,
+          needleLabelOffset = _a.needleLabelOffset,
+          timeStep = _a.timeStep,
+          selectedTime = _a.selectedTime,
+          setSelectedTime = _a.setSelectedTime;
+      var sliderAreaRef = React.useRef(null);
+
+      var _b = __read(React__default["default"].useState(0), 2),
+          areaWidth = _b[0],
+          setAreaWidth = _b[1];
+
+      var drawNeedle = selectedTime && areaWidth;
+      React.useLayoutEffect(function () {
+        var sliderArea = sliderAreaRef.current;
+        setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
+        var observer = new ResizeObserver(function () {
+          setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
+        });
+        observer.observe(sliderArea);
+        return function () {
+          observer.disconnect();
+        };
+      }, [sliderAreaRef]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        ref: sliderAreaRef,
+        sx: {
+          position: 'relative',
+          height: height + "px",
+          overflow: 'hidden',
+          width: '100%'
+        },
+        "data-testid": "TimeSliderLite-Background"
+      }, /*#__PURE__*/React__default["default"].createElement(TimeSliderLiteBackgroundSvg, {
+        style: {
+          position: 'absolute',
+          top: 0
+        },
+        width: areaWidth,
+        height: height,
+        startTime: startTime,
+        endTime: endTime,
+        locale: locale
+      }), drawNeedle && /*#__PURE__*/React__default["default"].createElement(TimeSliderDraggableNeedle, {
+        needleWidth: needleWidth,
+        draggableLabel: draggableTimeStamp,
+        style: {
+          position: 'absolute',
+          top: 0
+        },
+        locale: locale,
+        width: areaWidth,
+        needleDragAreaWidth: needleDragAreaWidth,
+        needleLabelZIndex: needleLabelZIndex,
+        needleLabelOffset: needleLabelOffset,
+        height: height,
+        startTime: startTime,
+        endTime: endTime,
+        timeStep: timeStep,
+        selectedTime: selectedTime,
+        setSelectedTime: setSelectedTime
+      }));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var StepButton = function StepButton(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j;
+
+      var forward = _a.forward,
+          isDisabled = _a.isDisabled,
+          _k = _a.onClick,
+          onClick = _k === void 0 ? function () {} : _k,
+          settings = _a.settings;
+      var forwardTitle = (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.label) === null || _b === void 0 ? void 0 : _b.forward) !== null && _c !== void 0 ? _c : 'Forward';
+      var backwardTitle = (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.label) === null || _d === void 0 ? void 0 : _d.backward) !== null && _e !== void 0 ? _e : 'Backward';
+      var forwardIcon = (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _f === void 0 ? void 0 : _f.forward) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__namespace.createElement(theme.StepForward, {
+        "data-testid": "step-forward-svg-path"
+      });
+      var backwardIcon = (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _h === void 0 ? void 0 : _h.backward) !== null && _j !== void 0 ? _j : /*#__PURE__*/React__namespace.createElement(theme.StepBackward, {
+        "data-testid": "step-backward-svg-path"
+      });
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
+        title: forward ? forwardTitle : backwardTitle
+      }), /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
+        disabled: isDisabled,
+        "aria-label": forward ? forwardTitle : backwardTitle,
+        onClick: onClick,
+        "data-testid": "TimeSliderLite-StepButton" + (forward ? 'Forward' : 'Backward')
+      }), forward ? forwardIcon : backwardIcon));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var PlayButton = function PlayButton(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j;
+
+      var isAnimating = _a.isAnimating,
+          isDisabled = _a.isDisabled,
+          onTogglePlayButton = _a.onTogglePlayButton,
+          settings = _a.settings;
+      var pauseTitle = (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.label) === null || _b === void 0 ? void 0 : _b.pause) !== null && _c !== void 0 ? _c : 'Pause';
+      var playTitle = (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.label) === null || _d === void 0 ? void 0 : _d.play) !== null && _e !== void 0 ? _e : 'Play';
+      var pauseIcon = (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _f === void 0 ? void 0 : _f.pause) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__default["default"].createElement(theme.Pause, null);
+      var playIcon = (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _h === void 0 ? void 0 : _h.play) !== null && _j !== void 0 ? _j : /*#__PURE__*/React__default["default"].createElement(theme.Play, null);
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
+        title: isAnimating ? pauseTitle : playTitle
+      }), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
+        sx: __assign(__assign({}, isAnimating && {
+          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+        }), timeSliderLiteButtonDefaultProps.sx),
+        onClick: function onClick() {
+          onTogglePlayButton();
+        },
+        disabled: isDisabled,
+        "data-testid": "TimeSliderLite-PlayButton"
+      }), isAnimating ? pauseIcon : playIcon));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var MenuButton = function MenuButton(_a) {
+      var _b, _c;
+
+      var menuOpen = _a.menuOpen,
+          onClick = _a.onClick,
+          settings = _a.settings;
+      var title = (_b = settings === null || settings === void 0 ? void 0 : settings.label) !== null && _b !== void 0 ? _b : 'Animation options';
+      var icon = (_c = settings === null || settings === void 0 ? void 0 : settings.icon) !== null && _c !== void 0 ? _c : /*#__PURE__*/React__default["default"].createElement(theme.Options, null);
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
+        title: title
+      }), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
+        sx: __assign(__assign({}, menuOpen && {
+          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+        }), timeSliderLiteButtonDefaultProps.sx),
+        "aria-selected": menuOpen,
+        onClick: onClick,
+        "data-testid": "TimeSliderLite-MenuButton"
+      }), icon));
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var TIME_SLIDER_LITE_DEFAULT_HEIGHT = 40;
+    var TIME_SLIDER_LITE_DEFAULT_LOCALE = 'en';
+    var TIME_SLIDER_LITE_DEFAULT_TIME_STEP = 5;
+    var styles$1 = {
+      container: {
+        display: 'grid',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px'
+      }
+    };
+
+    var TimeSliderLite = function TimeSliderLite(_a) {
+      var controlButtons = _a.controlButtons,
+          endTime = _a.endTime,
+          _b = _a.height,
+          height = _b === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _b,
+          hideButton = _a.hideButton,
+          isAnimating = _a.isAnimating,
+          isVisible = _a.isVisible,
+          _c = _a.locale,
+          locale = _c === void 0 ? TIME_SLIDER_LITE_DEFAULT_LOCALE : _c,
+          mapId = _a.mapId,
+          menuOpen = _a.menuOpen,
+          overrideAnimation = _a.overrideAnimation,
+          onToggleAnimation = _a.onToggleAnimation,
+          onToggleMenu = _a.onToggleMenu,
+          needleWidth = _a.needleWidth,
+          needleDragAreaWidth = _a.needleDragAreaWidth,
+          needleLabelZIndex = _a.needleLabelZIndex,
+          needleLabelOffset = _a.needleLabelOffset,
+          draggableTimeStamp = _a.draggableTimeStamp,
+          onToggleTimeSlider = _a.onToggleTimeSlider,
+          selectedTime = _a.selectedTime,
+          setSelectedTime = _a.setSelectedTime,
+          settings = _a.settings,
+          startTime = _a.startTime,
+          sx = _a.sx,
+          _d = _a.timeStep,
+          timeStep = _d === void 0 ? TIME_SLIDER_LITE_DEFAULT_TIME_STEP : _d;
+
+      var _e = __read(React.useState(selectedTime), 2),
+          rawSelectedTime = _e[0],
+          setRawSelectedTime = _e[1];
+
+      var timeStepSeconds = timeStep * 60;
+      var roundedStartTime = Math.floor(startTime / timeStepSeconds) * timeStepSeconds;
+      var roundedEndTime = Math.floor(endTime / timeStepSeconds) * timeStepSeconds;
+      var runningExternalAnimation = overrideAnimation && isAnimating;
+      var runningInternalAnimation = !overrideAnimation && isAnimating;
+      React.useEffect(function () {
+        if (!runningExternalAnimation) {
+          var roundedSelectedTime = Math.floor(rawSelectedTime / timeStepSeconds) * timeStepSeconds;
+          setSelectedTime(roundedSelectedTime);
+        }
+      }, [setSelectedTime, rawSelectedTime, timeStepSeconds, runningExternalAnimation]);
+      React.useEffect(function () {
+        if (runningInternalAnimation) {
+          var interval_1 = setInterval(function () {
+            setRawSelectedTime(function (prevTime) {
+              if (prevTime + timeStepSeconds > roundedEndTime) {
+                return roundedStartTime;
+              }
+
+              return prevTime + timeStepSeconds;
+            });
+          }, 200);
+          return function () {
+            return clearInterval(interval_1);
+          };
+        }
+
+        if (runningExternalAnimation) {
+          setRawSelectedTime(selectedTime);
+        }
+
+        return function () {};
+      }, [roundedEndTime, isAnimating, roundedStartTime, timeStepSeconds, runningInternalAnimation, runningExternalAnimation, selectedTime]);
+
+      var handleTimeStep = function handleTimeStep(stepSeconds) {
+        var newSteppedTime = Math.floor(rawSelectedTime / timeStepSeconds) * timeStepSeconds + stepSeconds;
+        setRawSelectedTime(boundedValue(newSteppedTime, [roundedStartTime, roundedEndTime]));
+
+        if (isAnimating && onToggleAnimation) {
+          onToggleAnimation();
+        }
+      };
+
+      var handleTimeSelect = function handleTimeSelect(value) {
+        setRawSelectedTime(boundedValue(value, [roundedStartTime, roundedEndTime]));
+
+        if (isAnimating && onToggleAnimation) {
+          onToggleAnimation();
+        }
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        sx: __assign(__assign(__assign({}, styles$1.container), sx), {
+          gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto"
+        }),
+        "data-testid": "timeSliderLite-" + mapId
+      }, isVisible ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: {
+          height: height + "px"
+        }
+      }, controlButtons || /*#__PURE__*/React__default["default"].createElement(ControlButtonGroup, {
+        left: true
+      }, /*#__PURE__*/React__default["default"].createElement(MenuButton, {
+        settings: settings === null || settings === void 0 ? void 0 : settings.menuButton,
+        menuOpen: menuOpen,
+        onClick: onToggleMenu
+      }), /*#__PURE__*/React__default["default"].createElement(material.Divider, {
+        orientation: "vertical",
+        sx: {
+          height: height + "px",
+          margin: '2px'
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(PlayButton, {
+        settings: settings === null || settings === void 0 ? void 0 : settings.playButton,
+        isAnimating: isAnimating,
+        onTogglePlayButton: onToggleAnimation
+      }), /*#__PURE__*/React__default["default"].createElement(StepButton, {
+        settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+        onClick: function onClick() {
+          return handleTimeStep(-timeStepSeconds);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(StepButton, {
+        forward: true,
+        settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+        onClick: function onClick() {
+          return handleTimeStep(timeStepSeconds);
+        }
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true
+      }, /*#__PURE__*/React__default["default"].createElement(TimeSliderLiteBackground, {
+        draggableTimeStamp: draggableTimeStamp,
+        startTime: roundedStartTime,
+        locale: locale,
+        endTime: roundedEndTime,
+        needleWidth: needleWidth,
+        needleDragAreaWidth: needleDragAreaWidth,
+        needleLabelZIndex: needleLabelZIndex,
+        needleLabelOffset: needleLabelOffset,
+        timeStep: timeStepSeconds,
+        selectedTime: runningExternalAnimation ? selectedTime : rawSelectedTime,
+        setSelectedTime: handleTimeSelect,
+        height: height
+      }))) : /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true
+      }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: {
+          height: height + "px"
+        }
+      }, hideButton || /*#__PURE__*/React__default["default"].createElement(ControlButtonGroup, {
+        right: isVisible
+      }, /*#__PURE__*/React__default["default"].createElement(HideButton, {
+        settings: settings === null || settings === void 0 ? void 0 : settings.hideButton,
+        onClick: onToggleTimeSlider,
+        isVisible: isVisible
+      }))));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -28012,7 +29047,8 @@
         if (isChecked) {
           syncGroupRemoveTarget({
             groupId: String(groupId),
-            targetId: String(sourceId)
+            targetId: String(sourceId),
+            origin: 'user'
           });
         } else {
           var groups = syncGroupViewState[groupCategory].groups;
@@ -28025,7 +29061,8 @@
               if (group.id !== groupId && group.selected.includes(sourceId)) {
                 syncGroupRemoveTarget({
                   groupId: String(group.id),
-                  targetId: String(sourceId)
+                  targetId: String(sourceId),
+                  origin: 'user'
                 });
               }
             }
@@ -28044,7 +29081,8 @@
 
           syncGroupAddTarget({
             groupId: String(groupId),
-            targetId: String(sourceId)
+            targetId: String(sourceId),
+            origin: 'user'
           });
         }
       };
@@ -28775,6 +29813,7 @@
     exports.TimeSliderBackwardForwardStepButtonConnect = BackwardForwardStepButtonConnect;
     exports.TimeSliderButtonsConnect = TimeSliderButtonsConnect;
     exports.TimeSliderConnect = TimeSliderConnect;
+    exports.TimeSliderLite = TimeSliderLite;
     exports.TimeSliderOptionsMenuButtonConnect = OptionsMenuButtonConnect;
     exports.TimeSliderPlayButtonConnect = PlayButtonConnect;
     exports.ZoomControlConnect = ZoomControlConnect;
@@ -28804,8 +29843,8 @@
     exports.getWMJSTimeDimensionForLayerId = getWMJSTimeDimensionForLayerId;
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
-    exports.layerReducer = reducer$8;
-    exports.layerSelectors = selectors$3;
+    exports.layerReducer = reducer$7;
+    exports.layerSelectors = selectors$4;
     exports.layerTypes = types$3;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
@@ -28820,20 +29859,26 @@
     exports.registerWMJSMap = registerWMJSMap;
     exports.registerWMLayer = registerWMLayer;
     exports.routerActions = routerActions;
+    exports.serviceSelectors = selectors$5;
     exports.snackbarActions = snackbarActions;
     exports.store = store;
     exports.syncGroupActions = genericActions;
+    exports.syncGroupsSelectors = selectors$2;
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
     exports.timeSliderUtils = timeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
-    exports.uiSelectors = selectors$2;
+    exports.uiReducer = reducer$6;
+    exports.uiSelectors = selectors$3;
     exports.uiTypes = types;
+    exports.unRegisterAllWMJSLayersAndMaps = unRegisterAllWMJSLayersAndMaps;
     exports.unRegisterWMJSLayer = unRegisterWMJSLayer;
     exports.unRegisterWMJSMap = unRegisterWMJSMap;
+    exports.useFetchServices = useFetchServices;
     exports.useSetupDialog = useSetupDialog;
+    exports.webmapReducer = reducer$5;
 
     Object.defineProperty(exports, '__esModule', { value: true });