@opengeoweb/core 4.19.0 → 4.20.0

package/index.esm.js

@@ -1,14 +1,14 @@
-import { createAction, createSlice, createSelector, createEntityAdapter } from '@reduxjs/toolkit';
+import { createSlice, createSelector, createAction, createEntityAdapter } from '@reduxjs/toolkit';
+import _, { isEqual, debounce, compact, escapeRegExp, groupBy, throttle, range } from 'lodash';
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
-import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
-import _, { debounce, isEqual, compact, escapeRegExp, groupBy, throttle, range } from 'lodash';
+import React__default, { Component, useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { CustomTooltip, ToolButton, ToolContainerDraggable, CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { CustomIconButton, CustomTooltip, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { Paper, Box, Typography, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
+import { Paper, Box, Typography, Grid, MenuItem, useTheme, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
@@ -28,10 +28,224 @@ import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import axios from 'axios';
 import { useDebounce } from '@opengeoweb/api';
+import * as DOMPurify from 'dompurify';
 import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 import { useNavigate } from 'react-router-dom';
 
+/* *
+ * 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 initialState$8 = {
+  byId: {},
+  allIds: []
+};
+var slice$8 = createSlice({
+  initialState: initialState$8,
+  name: 'serviceReducer',
+  reducers: {
+    serviceSetLayers: function serviceSetLayers(draft, action) {
+      var id = action.payload.id;
+      draft.byId[id] = Object.assign({}, action.payload);
+
+      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;
+      });
+
+      if (foundServiceIndex !== -1) {
+        var serviceId = draft.allIds[foundServiceIndex];
+        draft.allIds = draft.allIds.filter(function (id) {
+          return id !== serviceId;
+        });
+        delete draft.byId[serviceId];
+      }
+    },
+    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");
+ * 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
+ */
+
+
+var getServiceIds = 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 = 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 = 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 = 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 = 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 = 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
+});
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -293,141 +507,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-/* *
- * 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 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 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.
@@ -489,6 +568,16 @@ var unRegisterWMJSLayer = function unRegisterWMJSLayer(layerId) {
     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
  */
@@ -653,6 +742,104 @@ var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
   return wmjsTimeDim.getLastValue();
 };
 
+/* *
+ * 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 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 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.
@@ -1422,32 +1609,192 @@ var utils = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 /**
- * Sets a dimension value for a layer in the state. If the dimension does not exist it is added to the layer.
- * @param draft The draft layerstate
- * @param layerId The layerId
- * @param dimensionValueToUpdate The dimension with values to update in the layer.
+ * 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 produceLayerDimensionDraftState = function produceLayerDimensionDraftState(draft, layerId, dimensionValueToUpdate) {
-  if (!draft.byId[layerId].dimensions) {
-    draft.byId[layerId].dimensions = [];
-  }
+var setTime = 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 existingLayerDimIndex = draft.byId[layerId].dimensions.findIndex(function (layerDim) {
-    return layerDim.name === dimensionValueToUpdate.name;
-  });
+var setBbox = createAction('GENERIC_SETBBOX');
 
-  if (existingLayerDimIndex < 0) {
-    draft.byId[layerId].dimensions.push(Object.assign({}, dimensionValueToUpdate));
-  } else {
-    if (dimensionValueToUpdate.currentValue) {
-      draft.byId[layerId].dimensions[existingLayerDimIndex].currentValue = dimensionValueToUpdate.currentValue;
-    }
+/* *
+ * 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.
+ */
 
-    if (dimensionValueToUpdate.synced !== undefined) {
-      draft.byId[layerId].dimensions[existingLayerDimIndex].synced = dimensionValueToUpdate.synced;
+var setTimeSync = createAction('GENERIC_SYNC_SETTIME', function (payload, targets, groups) {
+  return {
+    payload: {
+      source: setTime(payload),
+      groups: groups,
+      targets: targets
     }
-
+  };
+});
+var setBboxSync = createAction('GENERIC_SYNC_SETBBOX', function (payload, targets, groups) {
+  return {
+    payload: {
+      source: setBbox(payload),
+      groups: groups,
+      targets: targets
+    }
+  };
+});
+var setLayerActionSync = 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 = createAction('MAP_CHANGE_DIMENSION');
+var setMapPreset = createAction('SET_MAP_PRESET');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/* *
+ * 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)
+ * */
+/**
+ * Sets a dimension value for a layer in the state. If the dimension does not exist it is added to the layer.
+ * @param draft The draft layerstate
+ * @param layerId The layerId
+ * @param dimensionValueToUpdate The dimension with values to update in the layer.
+ */
+
+var produceLayerDimensionDraftState = function produceLayerDimensionDraftState(draft, layerId, dimensionValueToUpdate) {
+  if (!draft.byId[layerId].dimensions) {
+    draft.byId[layerId].dimensions = [];
+  }
+
+  var existingLayerDimIndex = draft.byId[layerId].dimensions.findIndex(function (layerDim) {
+    return layerDim.name === dimensionValueToUpdate.name;
+  });
+
+  if (existingLayerDimIndex < 0) {
+    draft.byId[layerId].dimensions.push(Object.assign({}, dimensionValueToUpdate));
+  } else {
+    if (dimensionValueToUpdate.currentValue) {
+      draft.byId[layerId].dimensions[existingLayerDimIndex].currentValue = dimensionValueToUpdate.currentValue;
+    }
+
+    if (dimensionValueToUpdate.synced !== undefined) {
+      draft.byId[layerId].dimensions[existingLayerDimIndex].synced = dimensionValueToUpdate.synced;
+    }
+
     if (dimensionValueToUpdate.validSyncSelection !== undefined) {
       draft.byId[layerId].dimensions[existingLayerDimIndex].validSyncSelection = dimensionValueToUpdate.validSyncSelection;
     }
@@ -1556,129 +1903,6 @@ var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftSt
   }
 };
 
-/* *
- * 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 = createAction('MAP_CHANGE_DIMENSION');
-var setMapPreset = 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 = 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 = 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 = createAction('GENERIC_SYNC_SETTIME', function (payload, targets, groups) {
-  return {
-    payload: {
-      source: setTime(payload),
-      groups: groups,
-      targets: targets
-    }
-  };
-});
-var setBboxSync = createAction('GENERIC_SYNC_SETBBOX', function (payload, targets, groups) {
-  return {
-    payload: {
-      source: setBbox(payload),
-      groups: groups,
-      targets: targets
-    }
-  };
-});
-var setLayerActionSync = createAction('GENERIC_SYNC_SETLAYERACTIONS', function (payload, targets, type) {
-  return {
-    payload: {
-      source: {
-        type: type,
-        payload: payload
-      },
-      targets: targets
-    }
-  };
-});
-
 var createLayer = function createLayer(_a) {
   var id = _a.id,
       _a$opacity = _a.opacity,
@@ -1708,7 +1932,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$8 = {
+var initialState$7 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -1716,9 +1940,9 @@ var initialState$8 = {
     allIds: []
   }
 };
-var slice$8 = createSlice({
-  initialState: initialState$8,
-  name: 'layerReducer',
+var slice$7 = createSlice({
+  initialState: initialState$7,
+  name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
       var _action$payload = action.payload,
@@ -1983,12 +2207,68 @@ var slice$8 = createSlice({
       var _action$payload12 = action.payload,
           layerStyle = _action$payload12.layerStyle,
           layerDimensions = _action$payload12.layerDimensions;
-      var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
-      var state = 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 = 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.name && draftLayer.service === currentLayer.service;
+        }).forEach(function (draftLayer) {
+          var layerId = draftLayer.id;
+
+          if (layerId && draft.byId[layerId]) {
+            if (!draft.byId[layerId].dimensions) {
+              draft.byId[layerId].dimensions = [];
+            }
+
+            var draftLayerDimensions = 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 === null || draftLayerDimensions === void 0 ? void 0 : draftLayerDimensions.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.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 _action$payload13 = action.payload,
@@ -2043,7 +2323,7 @@ var slice$8 = createSlice({
         };
         /* 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;
@@ -2063,224 +2343,8 @@ var slice$8 = createSlice({
     });
   }
 });
-var reducer$8 = slice$8.reducer;
-var layerActions = 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var initialState$7 = {
-  byId: {},
-  allIds: []
-};
-var slice$7 = createSlice({
-  initialState: initialState$7,
-  name: 'serviceReducer',
-  reducers: {
-    serviceSetLayers: function serviceSetLayers(draft, action) {
-      var id = action.payload.id;
-      draft.byId[id] = Object.assign({}, action.payload);
-
-      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;
-      });
-
-      if (foundServiceIndex !== -1) {
-        var serviceId = draft.allIds[foundServiceIndex];
-        draft.allIds = draft.allIds.filter(function (id) {
-          return id !== serviceId;
-        });
-        delete draft.byId[serviceId];
-      }
-    },
-    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;
-
-      if (serviceLayers === null) {
-        return draft;
-      }
-
-      var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-      var newState = reducer$7(draft, mapAction);
-      return newState;
-    });
-  }
-});
 var reducer$7 = slice$7.reducer;
-var serviceActions = slice$7.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");
- * 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
- */
-
-
-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 = 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 = 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 = 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 = 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 = createSelector(getLayerFromService, function (layer) {
-  return layer && layer.styles ? layer.styles : [];
-}, selectorMemoizationOptions);
+var layerActions = slice$7.actions;
 
 var moveToTop = function moveToTop(list, element) {
   var filteredList = list.filter(function (item) {
@@ -2423,9 +2487,9 @@ var addBaseLayer = layerActions.addBaseLayer,
     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
@@ -3083,12 +3147,16 @@ var slice$5 = createSlice({
     }).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 _action$payload35 = action.payload,
           mapId = _action$payload35.mapId,
@@ -3451,7 +3519,7 @@ var getDimensionLayerIds = createSelector(getLayersIds, getLayersById, function
   }, []);
 }, selectorMemoizationOptions);
 
-var selectors$3 = /*#__PURE__*/Object.freeze({
+var selectors$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
@@ -3557,7 +3625,9 @@ var getDialogOrder = createSelector(function (store, dialogType) {
   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)) {
@@ -3619,7 +3689,7 @@ var getDialogFocused = createSelector(getDialogDetailsByType, function (details)
   return details && details.focused || false;
 });
 
-var selectors$2 = /*#__PURE__*/Object.freeze({
+var selectors$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getUiStore: getUiStore,
   getDialogDetailsByType: getDialogDetailsByType,
@@ -4029,16 +4099,184 @@ var types$1 = /*#__PURE__*/Object.freeze({
  * 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,
+var getSynchronizationGroupState = 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 = Object.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 = Object.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 = createSelector(syncGroupStore, function (store) {
+  return store.viewState;
+});
+var getSyncedMapIdsForTimeslider = 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
+  initialState: initialState$4,
+  syncGroupsSelectors: selectors$2
 });
 
 /* *
@@ -5609,119 +5847,6 @@ var slice = createSlice({
 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 = 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 = Object.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 = Object.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 = createSelector(syncGroupStore, function (store) {
-  return store.viewState;
-});
-var getSyncedMapIdsForTimeslider = 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.
@@ -6858,11 +6983,11 @@ function replaceLayerIds(layers, autoLayerIdOld, autoLayerIdNew) {
  * 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(_ref) {
+var PlayButton$1 = function PlayButton(_ref) {
   var isAnimating = _ref.isAnimating,
       isDisabled = _ref.isDisabled,
       _ref$onTogglePlayButt = _ref.onTogglePlayButton,
@@ -6872,18 +6997,18 @@ var PlayButton = function PlayButton(_ref) {
     onTogglePlayButton();
   };
 
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: isAnimating ? 'Pause' : 'Play'
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    variant: "tool",
+    tooltipTitle: isAnimating ? 'Pause' : 'Play',
     onClick: onTogglePlay,
     disabled: isDisabled,
     "data-testid": "playButton",
-    active: isAnimating
+    isSelected: isAnimating
   }, isAnimating ? /*#__PURE__*/React.createElement(Pause, {
     "data-testid": "pause-svg-path"
   }) : /*#__PURE__*/React.createElement(Play, {
     "data-testid": "play-svg-path"
-  }))));
+  }));
 };
 
 /* *
@@ -6942,7 +7067,7 @@ var PlayButtonConnect = connectRedux$3(function (_ref) {
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(PlayButton, {
+  return /*#__PURE__*/React__default.createElement(PlayButton$1, {
     isAnimating: linkedMapAnimationInfo.isAnimating,
     isDisabled: isDisabled,
     onTogglePlayButton: function onTogglePlayButton() {
@@ -9525,8 +9650,8 @@ var moduleConfig = {
   id: 'webmap-module',
   reducersMap: {
     webmap: reducer$5,
-    services: reducer$7,
-    layers: reducer$8
+    services: reducer$8,
+    layers: reducer$7
   },
   sagas: [rootSaga$4, rootSaga$3]
 };
@@ -9953,7 +10078,11 @@ var HeaderOptions = function HeaderOptions(_ref) {
   var isDockedLayerManager = _ref.isDockedLayerManager,
       shortcutsEnabled = _ref.shortcutsEnabled,
       onClickDockButton = _ref.onClickDockButton,
-      onChangeSize = _ref.onChangeSize;
+      onChangeSize = _ref.onChangeSize,
+      buttonSettings = _ref.buttonSettings;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (shortcutsEnabled) {
@@ -9972,28 +10101,28 @@ var HeaderOptions = function HeaderOptions(_ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [onChangeSize, shortcutsEnabled]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !((_a = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.small) === null || _a === void 0 ? void 0 : _a.isDisabled) && /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "small",
     "data-testid": "collapseSmall-btn",
     onClick: function onClick() {
       return onChangeSize(sizeSmall);
     },
     className: "collapseSmall-btn"
-  }, /*#__PURE__*/React.createElement(CollapseSmall, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+  }, (_c = (_b = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.small) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : /*#__PURE__*/React.createElement(CollapseSmall, null)), !((_d = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _d === void 0 ? void 0 : _d.isDisabled) && /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "medium",
     "data-testid": "collapseMedium-btn",
     onClick: function onClick() {
       return onChangeSize(sizeMedium);
     },
     className: "collapseMedium-btn"
-  }, /*#__PURE__*/React.createElement(CollapseMedium, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+  }, (_f = (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : /*#__PURE__*/React.createElement(CollapseMedium, null)), !((_g = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _g === void 0 ? void 0 : _g.isDisabled) && /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "large",
     "data-testid": "collapseLarge-btn",
     onClick: function onClick() {
       return onChangeSize(sizeLarge);
     },
     className: "collapseLarge-btn"
-  }, /*#__PURE__*/React.createElement(CollapseLarge, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+  }, (_j = (_h = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _h === void 0 ? void 0 : _h.icon) !== null && _j !== void 0 ? _j : /*#__PURE__*/React.createElement(CollapseLarge, null)), !((_k = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.dock) === null || _k === void 0 ? void 0 : _k.isDisabled) && /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: isDockedLayerManager ? 'Undock' : 'Dock',
     "data-testid": "dockedBtn",
     disableRipple: true,
@@ -10004,7 +10133,7 @@ var HeaderOptions = function HeaderOptions(_ref) {
     "data-testid": "dockedLayerManager-collapse"
   }) : /*#__PURE__*/React.createElement(ExpandWindow, {
     "data-testid": "dockedLayerManager-uncollapse"
-  })));
+  })), (_l = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.divider) === null || _l === void 0 ? void 0 : _l.element);
 };
 
 /* *
@@ -10253,12 +10382,14 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
   }, icon);
 };
 
-var styles$4 = {
-  text: {
-    paddingLeft: '10px',
-    fontSize: '12px',
-    fontFamily: 'Roboto',
-    opacity: 0.67
+var styles$5 = {
+  text: function text(theme) {
+    return Object.assign({
+      paddingLeft: '10px',
+      fontSize: '12px',
+      fontFamily: 'Roboto',
+      opacity: 0.67
+    }, theme.palette.geowebColors.layerManager.headerRowText);
   }
 };
 
@@ -10301,7 +10432,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(Box, {
     className: "header-layer ".concat(hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
-    sx: styles$4.text
+    sx: styles$5.text
   }, (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : 'Layer'), /*#__PURE__*/React.createElement(Box, {
     className: "header-mapPresets",
     sx: {
@@ -10310,15 +10441,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }, mapPresetsModuleInline)), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column3
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$4.text
+    sx: styles$5.text
   }, (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : 'Style')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column4
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$4.text
+    sx: styles$5.text
   }, (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : 'Opacity')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column5
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$4.text
+    sx: styles$5.text
   }, (_k = (_j = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : 'Dimensions')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column6
   }));
@@ -10523,7 +10654,9 @@ var RenderLayers = function RenderLayers(_ref) {
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Layer: ' : _ref$tooltipPrefix;
 
   var _a;
 
@@ -10564,7 +10697,7 @@ var RenderLayers = function RenderLayers(_ref) {
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
+    tooltip: "".concat(tooltipPrefix).concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectLayer'
@@ -10633,7 +10766,11 @@ var OpacitySelect = function OpacitySelect(_ref) {
   var currentOpacity = _ref.currentOpacity,
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Opacity: ' : _ref$tooltipPrefix;
+
+  var _a;
 
   var _useControlledTooltip = useControlledTooltip(),
       _useControlledTooltip2 = _slicedToArray(_useControlledTooltip, 2),
@@ -10646,6 +10783,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       setAnchorEl = _React$useState2[1];
 
   var isOpen = Boolean(anchorEl);
+  var theme = useTheme();
 
   var handleClick = function handleClick(event) {
     setAnchorEl(anchorEl ? null : event.currentTarget);
@@ -10693,12 +10831,12 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onWheel: onWheel,
     className: "opacity-select",
     "data-testid": "scrollOpacity",
-    sx: {
+    sx: Object.assign({
       width: '100%',
       height: 32
-    }
+    }, (_a = theme.palette.geowebColors.layerManager.opacitySelect) === null || _a === void 0 ? void 0 : _a.root)
   }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Opacity: ".concat(currentOpacityText),
+    title: "".concat(tooltipPrefix).concat(currentOpacityText),
     sx: tooltipContainerStyles(isEnabled),
     placement: "top",
     open: tooltipOpen
@@ -10711,12 +10849,17 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     onBlur: onBlur,
-    style: {
+    sx: Object.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
@@ -10729,14 +10872,14 @@ var OpacitySelect = function OpacitySelect(_ref) {
     },
     placement: "right"
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
+    sx: Object.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.createElement(Box, {
     sx: sliderHeaderStyle
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
@@ -10781,7 +10924,10 @@ var OpacitySelect = function OpacitySelect(_ref) {
 var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
   var mapId = _ref.mapId,
       layerId = _ref.layerId,
-      onLayerDuplicate = _ref.onLayerDuplicate;
+      onLayerDuplicate = _ref.onLayerDuplicate,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Options' : _ref$tooltipTitle,
+      icon = _ref.icon;
 
   var onClickDuplicate = function onClickDuplicate() {
     onLayerDuplicate({
@@ -10805,7 +10951,8 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       action: onClickDuplicate,
       icon: /*#__PURE__*/React.createElement(Copy, null)
     }],
-    tooltipTitle: "Options"
+    tooltipTitle: tooltipTitle,
+    buttonIcon: icon
   });
 };
 
@@ -10814,7 +10961,10 @@ var RenderStyles = function RenderStyles(_ref) {
       currentLayerStyle = _ref.currentLayerStyle,
       onChangeLayerStyle = _ref.onChangeLayerStyle,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      icon = _ref.icon,
+      _ref$tooltipPrefix = _ref.tooltipPrefix,
+      tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Style: ' : _ref$tooltipPrefix;
 
   var _a;
 
@@ -10845,7 +10995,7 @@ var RenderStyles = function RenderStyles(_ref) {
     return currentStyle === style.name;
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
-    tooltip: "Style: ".concat((_a = styles[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
+    tooltip: "".concat(tooltipPrefix).concat((_a = styles[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectStyle'
@@ -10859,7 +11009,8 @@ var RenderStyles = function RenderStyles(_ref) {
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerStyle(e.value);
     },
-    requiresCtrlToChange: true
+    requiresCtrlToChange: true,
+    IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, "Style"), styles.map(function (styleFromlayer) {
@@ -10883,8 +11034,8 @@ var RenderStyles = function RenderStyles(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var getIconColor = function getIconColor(isActive, isEnabled) {
@@ -10974,7 +11125,8 @@ var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
       isEnabled = _ref2.isEnabled;
   var isActive = current !== AutoOptions.NONE;
   var Icon = getIcon(isActive, isEnabled, current);
-  return /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    variant: "tool",
     "aria-label": current,
     "data-testid": "activateLayer-btn",
     sx: {
@@ -10982,7 +11134,7 @@ var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
         backgroundColor: 'inherit'
       }
     },
-    active: isActive
+    isSelected: isActive
   }, Icon);
 };
 
@@ -11073,6 +11225,7 @@ var LayerRow = function LayerRow(_ref) {
       layerDeleteLayout = _ref.layerDeleteLayout,
       layerMenuLayout = _ref.layerMenuLayout,
       layerActiveLayout = _ref.layerActiveLayout,
+      disableActivateLayer = _ref.disableActivateLayer,
       dragHandle = _ref.dragHandle;
 
   var onClickRow = function onClickRow() {
@@ -11124,11 +11277,11 @@ var LayerRow = function LayerRow(_ref) {
         });
       },
       "data-testid": "enableButton-medium"
-    }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+    }, isEnabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
       current: AutoOptions.BOTH,
       onChange: onClickRow,
       isEnabled: true
-    }), /*#__PURE__*/React__default.createElement(Typography, {
+    })), /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
         fontWeight: '500',
         fontSize: '12px',
@@ -11209,11 +11362,11 @@ var LayerRow = function LayerRow(_ref) {
       });
     },
     "data-testid": "enableButton"
-  }, layer.enabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
+  }, layer.enabled ? /*#__PURE__*/React__default.createElement(Visibility, null) : /*#__PURE__*/React__default.createElement(VisibilityOff, null)), !disableActivateLayer && (layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
     onChange: onClickRow,
     current: AutoOptions.BOTH,
     isEnabled: true
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, layerServicesLayout || /*#__PURE__*/React__default.createElement(RenderLayers, {
@@ -11312,7 +11465,11 @@ var LayerRow = function LayerRow(_ref) {
 var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var layerId = _ref.layerId,
       mapId = _ref.mapId,
-      layerIndex = _ref.layerIndex;
+      layerIndex = _ref.layerIndex,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Delete' : _ref$tooltipTitle,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Delete, null) : _ref$icon;
   var dispatch = useDispatch();
   var layerDelete = React.useCallback(function (_ref2) {
     var mapId = _ref2.mapId,
@@ -11329,7 +11486,7 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
     return getLayerEnabled(store, layerId);
   });
   return /*#__PURE__*/React.createElement(CustomIconButton, {
-    tooltipTitle: "Delete",
+    tooltipTitle: tooltipTitle,
     onClick: function onClick() {
       layerDelete({
         mapId: mapId,
@@ -11339,7 +11496,7 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
     },
     shouldShowAsDisabled: !isLayerEnabled,
     "data-testid": "deleteButton"
-  }, /*#__PURE__*/React.createElement(Delete, null));
+  }, icon);
 };
 
 /* *
@@ -11365,7 +11522,10 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? false : _ref$isEnabled,
       _ref$layerName = _ref.layerName,
-      layerName = _ref$layerName === void 0 ? '' : _ref$layerName;
+      layerName = _ref$layerName === void 0 ? '' : _ref$layerName,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null) : _ref$icon,
+      tooltipTitle = _ref.tooltipTitle;
   var dispatch = useDispatch();
   var layerChangeEnabled = React.useCallback(function (_ref2) {
     var layerId = _ref2.layerId,
@@ -11377,9 +11537,11 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
     shouldShowAsDisabled: !isEnabled,
-    tooltipTitle: "Toggle visibility",
+    tooltipTitle: normalTooltip,
     onClick: function onClick(event) {
       event.stopPropagation();
       layerChangeEnabled({
@@ -11392,9 +11554,9 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
     sx: {
       margin: 'auto 0px'
     }
-  }, isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null)), /*#__PURE__*/React.createElement(CustomIconButton, {
+  }, icon), /*#__PURE__*/React.createElement(CustomIconButton, {
     shouldShowAsDisabled: !isEnabled,
-    tooltipTitle: layerName,
+    tooltipTitle: miniTooltip,
     onClick: function onClick(event) {
       event.stopPropagation();
       layerChangeEnabled({
@@ -11407,7 +11569,7 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
     sx: {
       margin: 'auto 0px'
     }
-  }, isEnabled ? /*#__PURE__*/React.createElement(Visibility, null) : /*#__PURE__*/React.createElement(VisibilityOff, null)));
+  }, icon));
 };
 
 /* *
@@ -11429,7 +11591,8 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
 
 var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var opacity = useSelector(function (store) {
     return getLayerOpacity(store, layerId);
@@ -11447,7 +11610,8 @@ var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
         origin: LayerActionOrigin.layerManager
       }));
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11524,7 +11688,9 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
 
 var RenderStylesConnect = function RenderStylesConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      icon = _ref.icon,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var layerService = useSelector(function (store) {
     return getLayerService(store, layerId);
@@ -11553,7 +11719,9 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
     layerStyles: layerStyles,
     currentLayerStyle: currentLayerStyle,
     onChangeLayerStyle: layerChangeStyle,
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    icon: icon,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11576,7 +11744,8 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
 
 var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipPrefix = _ref.tooltipPrefix;
   var dispatch = useDispatch();
   var layerName = useSelector(function (store) {
     return getLayerName(store, layerId);
@@ -11660,7 +11829,8 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
         name: name
       });
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    tooltipPrefix: tooltipPrefix
   });
 };
 
@@ -11683,7 +11853,9 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
 
 var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref) {
   var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      tooltipTitle = _ref.tooltipTitle,
+      icon = _ref.icon;
   var dispatch = useDispatch();
   var layer = useSelector(function (store) {
     return getLayerById(store, layerId);
@@ -11708,7 +11880,9 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
         mapId: mapId,
         layer: layer
       });
-    }
+    },
+    tooltipTitle: tooltipTitle,
+    icon: icon
   });
 };
 
@@ -11875,9 +12049,10 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
   var layerId = _ref.layerId,
       mapId = _ref.mapId,
       dragHandle = _ref.dragHandle,
-      layerIndex = _ref.layerIndex;
+      layerIndex = _ref.layerIndex,
+      settings = _ref.settings;
 
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
 
   var isEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
@@ -11907,15 +12082,22 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
       layerId: layerId,
       mapId: mapId,
       isEnabled: isEnabled,
-      layerName: fullLayerName || layerName
+      layerName: fullLayerName || layerName,
+      icon: isEnabled ? (_b = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _b === void 0 ? void 0 : _b.enabledIcon : (_c = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _c === void 0 ? void 0 : _c.disabledIcon,
+      tooltipTitle: isEnabled ? (_d = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _d === void 0 ? void 0 : _d.enabledTooltipTitle : (_e = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _e === void 0 ? void 0 : _e.disabledTooltipTitle
     }),
     layerOpacityLayout: /*#__PURE__*/React.createElement(OpacitySelectConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      tooltipPrefix: (_f = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _f === void 0 ? void 0 : _f.tooltipPrefix
     }),
-    layerServicesLayout: /*#__PURE__*/React.createElement(RenderLayersConnect, {
+    layerServicesLayout: ((_g = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _g === void 0 ? void 0 : _g.Element) ? /*#__PURE__*/React.createElement(settings.renderLayer.Element, {
       layerId: layerId,
       mapId: mapId
+    }) : /*#__PURE__*/React.createElement(RenderLayersConnect, {
+      layerId: layerId,
+      mapId: mapId,
+      tooltipPrefix: (_h = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _h === void 0 ? void 0 : _h.tooltipPrefix
     }),
     layerDimensionLayout: /*#__PURE__*/React.createElement(DimensionSelectConnect, {
       layerId: layerId,
@@ -11923,21 +12105,28 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
     }),
     layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      tooltipPrefix: (_j = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _j === void 0 ? void 0 : _j.tooltipPrefix,
+      icon: (_k = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _k === void 0 ? void 0 : _k.icon
     }),
     layerDeleteLayout: /*#__PURE__*/React.createElement(DeleteLayerConnect, {
       mapId: mapId,
       layerId: layerId,
-      layerIndex: layerIndex
+      layerIndex: layerIndex,
+      tooltipTitle: (_l = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _l === void 0 ? void 0 : _l.tooltipTitle,
+      icon: (_m = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _m === void 0 ? void 0 : _m.icon
     }),
     layerMenuLayout: /*#__PURE__*/React.createElement(LayerManagerMenuButtonConnect, {
       mapId: mapId,
-      layerId: layerId
+      layerId: layerId,
+      tooltipTitle: (_o = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _o === void 0 ? void 0 : _o.tooltipTitle,
+      icon: (_p = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _p === void 0 ? void 0 : _p.icon
     }),
-    layerActiveLayout: /*#__PURE__*/React.createElement(ActivateLayerConnect, {
+    layerActiveLayout: ((_q = settings === null || settings === void 0 ? void 0 : settings.activateLayer) === null || _q === void 0 ? void 0 : _q.isDisabled) ? undefined : /*#__PURE__*/React.createElement(ActivateLayerConnect, {
       mapId: mapId,
       layerId: layerId
     }),
+    disableActivateLayer: (_r = settings === null || settings === void 0 ? void 0 : settings.activateLayer) === null || _r === void 0 ? void 0 : _r.isDisabled,
     dragHandle: dragHandle
   });
 };
@@ -11968,10 +12157,16 @@ var DragHandle = function DragHandle(_ref) {
       _ref$hideTooltip = _ref.hideTooltip,
       hideTooltip = _ref$hideTooltip === void 0 ? true : _ref$hideTooltip,
       _ref$isSorting = _ref.isSorting,
-      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting;
-  var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React__default.createElement(DragHandle$1, {
+    "data-testid": "dragHandleIcon"
+  }) : _ref$icon,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? TOOLTIP_TITLE : _ref$tooltipTitle;
+  var usedTooltipTitle = hideTooltip ? '' : tooltipTitle;
   return /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    tooltipTitle: tooltipTitle,
+    tooltipTitle: usedTooltipTitle,
     "data-testid": "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
     className: "handle",
     tabIndex: -1,
@@ -11979,8 +12174,8 @@ var DragHandle = function DragHandle(_ref) {
     disabled: isDisabled,
     sx: {
       cursor: isSorting ? 'grabbing' : 'grab',
-      '&:hover': {
-        backgroundColor: 'inherit!important'
+      '&.handle:hover': function handleHover(theme) {
+        return Object.assign({}, theme.palette.geowebColors.layerManager.dragHandleHover);
       },
       marginLeft: '3px',
       marginRight: '3px',
@@ -11990,11 +12185,12 @@ var DragHandle = function DragHandle(_ref) {
         color: 'geowebColors.greys.accessible'
       }
     }
-  }, /*#__PURE__*/React__default.createElement(DragHandle$1, null));
+  }, icon);
 };
 
 var LayerContainerRow = function LayerContainerRow(_ref) {
-  var mapId = _ref.mapId;
+  var mapId = _ref.mapId,
+      settings = _ref.settings;
   var dispatch = useDispatch();
 
   var _React$useState = React.useState(false),
@@ -12118,6 +12314,8 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       width: '100%'
     }
   }, layerIds.map(function (layerId, index) {
+    var _a, _b;
+
     return /*#__PURE__*/React.createElement(LayerRowConnect, {
       mapId: mapId,
       layerId: layerId,
@@ -12127,8 +12325,11 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
         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
     });
   })));
 };
@@ -12938,7 +13139,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles$3 = {
+var styles$4 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -12982,7 +13183,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
     onClick: handleClose,
-    sx: styles$3.button,
+    sx: styles$4.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -13023,24 +13224,25 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
       settings = _ref.settings;
 
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
 
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     "data-testid": "baseLayerRow",
     className: "addLayer-column",
-    sx: {
+    sx: Object.assign({
       width: '100%',
       height: '36px'
-    }
+    }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column1,
     sx: {
       marginTop: '-2px'
     }
-  }, /*#__PURE__*/React.createElement(AddLayersButton, {
+  }, !((_b = (_a = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _a === void 0 ? void 0 : _a.addLayersButton) === null || _b === void 0 ? void 0 : _b.isDisabled) && /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
     onRenderTree: function onRenderTree(service) {
@@ -13050,14 +13252,14 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
         layerType: LayerType.baseLayer
       });
     }
-  })), (_a = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _a === void 0 ? void 0 : _a.title, /*#__PURE__*/React.createElement(Grid, {
+  }), (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _c === void 0 ? void 0 : _c.title), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(BaseLayersConnect, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-    tooltipPrefix: (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _b === void 0 ? void 0 : _b.tooltipPrefix,
-    icon: (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _c === void 0 ? void 0 : _c.icon
+    tooltipPrefix: (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _d === void 0 ? void 0 : _d.tooltipPrefix,
+    icon: (_e = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _e === void 0 ? void 0 : _e.icon
   })));
 };
 
@@ -13093,7 +13295,8 @@ var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
   var isDockedLayerManager = _ref.isDockedLayerManager,
       mapId = _ref.mapId,
       onClickDockButton = _ref.onClickDockButton,
-      onChangeSize = _ref.onChangeSize;
+      onChangeSize = _ref.onChangeSize,
+      buttonSettings = _ref.buttonSettings;
   var activeMapId = useSelector(function (store) {
     return getActiveWindowId(store);
   });
@@ -13105,11 +13308,12 @@ var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
     isDockedLayerManager: isDockedLayerManager,
     shortcutsEnabled: shortcutsEnabled,
     onClickDockButton: onClickDockButton,
-    onChangeSize: onChangeSize
+    onChangeSize: onChangeSize,
+    buttonSettings: buttonSettings
   });
 };
 
-var styles$2 = {
+var styles$3 = {
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -13141,7 +13345,8 @@ var LayerManager = function LayerManager(_ref) {
       preloadedBaseServices = _ref.preloadedBaseServices,
       bounds = _ref.bounds,
       onClose = _ref.onClose,
-      showTitle = _ref.showTitle,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Layer Manager' : _ref$title,
       isOpen = _ref.isOpen,
       _ref$onMouseDown = _ref.onMouseDown,
       onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
@@ -13168,6 +13373,9 @@ var LayerManager = function LayerManager(_ref) {
       _ref$setFocused = _ref.setFocused,
       setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused,
       settings = _ref.settings;
+
+  var _a, _b, _c, _d, _e;
+
   var minSize = {
     width: 100,
     height: 126
@@ -13179,6 +13387,7 @@ var LayerManager = function LayerManager(_ref) {
       sizeInState = _React$useState2[0],
       setSizeInState = _React$useState2[1];
 
+  var theme = useTheme();
   React.useEffect(function () {
     if (size !== sizeInState && isDockedLayerManager && isOpen) {
       setSizeInState(size);
@@ -13186,7 +13395,7 @@ var LayerManager = function LayerManager(_ref) {
 
   }, [size, isOpen]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: showTitle ? "Layer Manager ".concat(mapId) : 'Layer Manager',
+    title: title,
     startSize: sizeInState,
     minWidth: minSize.width,
     minHeight: minSize.height,
@@ -13215,10 +13424,13 @@ var LayerManager = function LayerManager(_ref) {
         setSizeInState(Object.assign(Object.assign({}, sizeInState), {
           width: width
         }));
-      }
+      },
+      buttonSettings: (_a = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _a === void 0 ? void 0 : _a.controlButtonSettings
     }),
+    dragHandleIcon: (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _b === void 0 ? void 0 : _b.dragHandle) === null || _c === void 0 ? void 0 : _c.icon,
+    closeIcon: (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.toolbar) === null || _d === void 0 ? void 0 : _d.closeButton) === null || _e === void 0 ? void 0 : _e.icon,
     className: "layermanager",
-    sx: layerManagerStyle,
+    sx: Object.assign(Object.assign({}, layerManagerStyle), theme.palette.geowebColors.layerManager.root),
     onResizeStop: function onResizeStop(_event, _direction, node) {
       var width = node.offsetWidth,
           height = node.offsetHeight;
@@ -13255,14 +13467,15 @@ var LayerManager = function LayerManager(_ref) {
   })), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     "data-testid": "layerManagerRowContainer",
-    sx: styles$2.layerRowContainer
+    sx: styles$3.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapPresetsModule: leftHeaderComponent,
     mapId: mapId,
     source: source,
     settings: settings === null || settings === void 0 ? void 0 : settings.header
   }), /*#__PURE__*/React.createElement(LayerContainerRow, {
-    mapId: mapId
+    mapId: mapId,
+    settings: settings === null || settings === void 0 ? void 0 : settings.content
   }), /*#__PURE__*/React.createElement(BaseLayerRow, {
     mapId: mapId,
     tooltip: "Add base layers",
@@ -13444,8 +13657,10 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       preloadedMapServices = _ref.preloadedMapServices,
       preloadedBaseServices = _ref.preloadedBaseServices,
       bounds = _ref.bounds,
-      _ref$showTitle = _ref.showTitle,
-      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Layer Manager' : _ref$title,
+      _ref$showMapIdInTitle = _ref.showMapIdInTitle,
+      showMapIdInTitle = _ref$showMapIdInTitle === void 0 ? false : _ref$showMapIdInTitle,
       _ref$leftHeaderCompon = _ref.leftHeaderComponent,
       leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? undefined : _ref$leftHeaderCompon;
   var dispatch = useDispatch();
@@ -13474,6 +13689,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     }));
   };
 
+  var shownTitle = showMapIdInTitle ? "".concat(title, " ").concat(mapId) : title;
   return /*#__PURE__*/React.createElement(LayerManager, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
@@ -13481,7 +13697,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     bounds: bounds,
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    showTitle: showTitle,
+    title: shownTitle,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
     source: uiSource,
@@ -13523,8 +13739,10 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
       preloadedAvailableBaseLayers = _ref.preloadedAvailableBaseLayers,
       preloadedBaseServices = _ref.preloadedBaseServices,
       bounds = _ref.bounds,
-      _ref$showTitle = _ref.showTitle,
-      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Layer Manager' : _ref$title,
+      _ref$showMapIdInTitle = _ref.showMapIdInTitle,
+      showMapIdInTitle = _ref$showMapIdInTitle === void 0 ? false : _ref$showMapIdInTitle,
       _ref$leftHeaderCompon = _ref.leftHeaderComponent,
       leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? undefined : _ref$leftHeaderCompon,
       _ref$source = _ref.source,
@@ -13559,6 +13777,7 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     }));
   };
 
+  var shownTitle = showMapIdInTitle ? "".concat(title, " ").concat(mapId) : title;
   return /*#__PURE__*/React.createElement(LayerManager, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
@@ -13566,7 +13785,7 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     bounds: bounds,
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    showTitle: showTitle,
+    title: shownTitle,
     leftHeaderComponent: leftHeaderComponent,
     // isLoading={isMapPresetLoading}
     // error={mapPresetError}
@@ -13596,8 +13815,8 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
@@ -13619,13 +13838,12 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
       source: source
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-  return /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    variant: "tool",
     onClick: openFilterResultsDialog,
-    active: isOpenInStore,
+    isSelected: isOpenInStore,
     id: "keywordFilterButton",
-    "data-testid": "keywordFilterButton",
-    disableRipple: true,
-    variant: "tool"
+    "data-testid": "keywordFilterButton"
   }, /*#__PURE__*/React.createElement(Filter, null));
 };
 
@@ -13885,8 +14103,8 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
  * 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(_ref) {
@@ -13940,9 +14158,9 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(ToolButton, {
-    variant: "icon",
-    active: isActive && isOpenInStore,
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    variant: "flat",
+    isSelected: isActive && isOpenInStore,
     onClick: onClick,
     id: "layerInfoButton",
     "aria-label": "layer info",
@@ -15030,7 +15248,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var styles$1 = {
+var styles$2 = {
   servicesContainer: {
     width: '360px',
     maxHeight: '412px',
@@ -15097,7 +15315,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   }, []);
   return /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.servicesContainer,
+    sx: styles$2.servicesContainer,
     "data-testid": "ServiceDialog",
     onKeyDown: function onKeyDown(event) {
       if (event.key !== 'Escape') {
@@ -15107,9 +15325,9 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     tabIndex: -1,
     ref: dialogRef
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.header
+    sx: styles$2.header
   }, "Services"), /*#__PURE__*/React.createElement(Backdrop, {
-    sx: styles$1.loading,
+    sx: styles$2.loading,
     open: isLoading
   }, /*#__PURE__*/React.createElement(CircularProgress, null)), /*#__PURE__*/React.createElement(Rows, {
     services: services,
@@ -15118,12 +15336,12 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     setServicePopupInfo: setServicePopupInfo,
     selectedLayers: selectedLayers
   }), /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.footer
+    sx: styles$2.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     onKeyDown: stopTabPropagation,
     "data-testid": "openAddServiceButton",
-    sx: styles$1.button,
+    sx: styles$2.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(Add, null)
   }, "Add a new service")));
@@ -16580,8 +16798,8 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var MapControlButton = function MapControlButton(_a) {
@@ -16594,13 +16812,15 @@ var MapControlButton = function MapControlButton(_a) {
       isActive = _a$isActive === void 0 ? false : _a$isActive,
       props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
 
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    placement: placement,
-    title: title
-  }, /*#__PURE__*/React.createElement(ToolButton, Object.assign({
+  return /*#__PURE__*/React.createElement(CustomIconButton, Object.assign({
+    variant: "tool",
+    tooltipProps: {
+      placement: placement,
+      title: title
+    },
     onClick: onClick,
-    active: isActive
-  }, props), children));
+    isSelected: isActive
+  }, props), children);
 };
 
 /* *
@@ -17383,8 +17603,8 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
  * 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';
@@ -17396,21 +17616,20 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
       isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: isAutoUpdating ? titleOn : titleOff,
-    "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
-    active: isAutoUpdating,
+  return /*#__PURE__*/React.createElement(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.createElement(AutoUpdateActive, {
     "data-testid": "auto-update-svg-on"
   }) : /*#__PURE__*/React.createElement(AutoUpdateInActive, {
     "data-testid": "auto-update-svg-off"
-  }))));
+  }));
 };
 
 var THROTTLE_WAIT_TIME = 300; // [ms]
@@ -17466,20 +17685,24 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     onKeyDown: function onKeyDown(event) {
       event.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: title
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement(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.createElement(Typography, {
     fontSize: 12,
-    fontWeight: 400
-  }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text))), /*#__PURE__*/React.createElement(Menu, {
+    fontWeight: 400,
+    textTransform: "none"
+  }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text)), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorRef,
     open: open,
     onClose: function onClose() {
@@ -17535,12 +17758,19 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         minHeight: '30px!important'
       }
     }
-  }, "length"), displayVariableDuration && /*#__PURE__*/React.createElement(ToolButton, {
+  }, "length"), displayVariableDuration && /*#__PURE__*/React.createElement(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.createElement(Typography, {
+    fontSize: 14,
+    fontWeight: 500,
+    textTransform: "none",
+    lineHeight: 2
+  }, minutesToDescribedDuration(value)))));
 };
 
 var speedTooltipTitle = 'Speed';
@@ -17823,8 +18053,8 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
  * 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';
 
@@ -17833,18 +18063,18 @@ var NowButton = function NowButton(_ref) {
       onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: title$1,
-    "data-testid": "nowButtonTooltip"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    variant: "tool",
+    "aria-label": "now",
+    tooltipTitle: title$1,
+    "data-testid": "nowButtonTooltip",
     disabled: disabled,
     onClick: function onClick() {
       return onSetNow();
-    },
-    "aria-label": "now"
+    }
   }, /*#__PURE__*/React.createElement(Now, {
     "data-testid": "now-svg"
-  }))));
+  }));
 };
 
 /* *
@@ -18011,21 +18241,22 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       setOpen(true);
     }
   }, [anchorEl, isOpenByDefault]);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Animation options",
-    placement: "bottom"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    ref: function ref(_ref2) {
-      setAnchorEl(_ref2);
-    }
-  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    variant: "tool",
     onClick: function onClick() {
       setOpen(!open);
     },
     "data-testid": "optionsMenuButton",
-    active: open,
-    "aria-label": "animation options"
-  }, /*#__PURE__*/React__default.createElement(Options, null)))), /*#__PURE__*/React__default.createElement(Popper, {
+    isSelected: open,
+    "aria-label": "animation options",
+    tooltipProps: {
+      title: 'Animation options',
+      placement: 'bottom'
+    },
+    ref: function ref(_ref2) {
+      setAnchorEl(_ref2);
+    }
+  }, /*#__PURE__*/React__default.createElement(Options, null)), /*#__PURE__*/React__default.createElement(Popper, {
     sx: {
       zIndex: 3
     },
@@ -18034,7 +18265,11 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     "data-testid": "optionsMenuPopOver",
     anchorEl: anchorEl
   }, /*#__PURE__*/React__default.createElement(Paper, {
-    elevation: 3
+    elevation: 3,
+    sx: {
+      position: 'relative',
+      top: 1
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     sx: {
       padding: '0px 10px 10px'
@@ -18064,8 +18299,8 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
  * 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';
@@ -18075,17 +18310,17 @@ var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
       isDisabled = _ref.isDisabled,
       _ref$onClickBFButton = _ref.onClickBFButton,
       onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    variant: "tool",
     disabled: isDisabled,
     "aria-label": isForwardStep ? 'forward' : 'backward',
-    onClick: onClickBFButton
+    onClick: onClickBFButton,
+    tooltipTitle: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
   }, isForwardStep ? /*#__PURE__*/React.createElement(StepForward, {
     "data-testid": "step-forward-svg-path"
   }) : /*#__PURE__*/React.createElement(StepBackward, {
     "data-testid": "step-backward-svg-path"
-  }))));
+  }));
 };
 
 /* *
@@ -18118,7 +18353,7 @@ var ControlButtons = function ControlButtons(_ref) {
     isForwardStep: true
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null)));
+  }, playBtn || /*#__PURE__*/React.createElement(PlayButton$1, null)));
 };
 
 /* *
@@ -19086,7 +19321,7 @@ var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx,
 };
 
 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 _React$useState = React.useState(convertStringTimeToUnix(animationStartTime)),
@@ -19144,7 +19379,7 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
 
     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;
@@ -19161,7 +19396,7 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
     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;
@@ -19363,7 +19598,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         selectedTimePx = _map4[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;
@@ -19372,7 +19607,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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.utc(animationStartTime));
@@ -19380,7 +19615,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         return;
       }
 
-      if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
+      if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH$1) && !leftMarkerDragging) {
         setCursorStyle('grabbing');
         setRightMarkerDragging(true);
         setTooltipTime(moment.utc(animationEndTime));
@@ -19427,9 +19662,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         selectedTimePx = _map6[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;
 
@@ -19502,22 +19737,21 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
  * 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(_ref) {
   var isVisible = _ref.isVisible,
       toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
-  return /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: isVisible ? 'Hide timeslider' : 'Show timeslider',
-    "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    variant: "tool",
     onClick: function onClick() {
       toggleTimeSliderIsVisible(!isVisible);
     },
-    "data-testid": "hideTimeSliderButton"
-  }, isVisible ? /*#__PURE__*/React__default.createElement(ChevronDown, null) : /*#__PURE__*/React__default.createElement(ChevronUp, null))));
+    "data-testid": "hideTimeSliderButton",
+    tooltipTitle: isVisible ? 'Hide timeslider' : 'Show timeslider'
+  }, isVisible ? /*#__PURE__*/React__default.createElement(ChevronDown, null) : /*#__PURE__*/React__default.createElement(ChevronUp, null));
 };
 
 /* *
@@ -20774,7 +21008,7 @@ var ReactMapViewLayer = function ReactMapViewLayer(props) {
 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',
@@ -20783,7 +21017,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20792,14 +21026,14 @@ var tileRenderSettings = {
   },
   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',
@@ -20808,7 +21042,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20817,7 +21051,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20826,7 +21060,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20835,7 +21069,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20844,7 +21078,7 @@ var tileRenderSettings = {
   },
   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',
@@ -20853,14 +21087,14 @@ var tileRenderSettings = {
   },
   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,
@@ -20870,42 +21104,42 @@ var tileRenderSettings = {
       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',
@@ -20914,7 +21148,7 @@ var tileRenderSettings = {
   },
   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,
@@ -21017,7 +21251,7 @@ var tileRenderSettings = {
   },
   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,
@@ -21027,7 +21261,7 @@ var tileRenderSettings = {
       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,
@@ -21037,7 +21271,7 @@ var tileRenderSettings = {
       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,
@@ -21047,14 +21281,14 @@ var tileRenderSettings = {
       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,
@@ -21064,7 +21298,7 @@ var tileRenderSettings = {
       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,
@@ -21074,7 +21308,7 @@ var tileRenderSettings = {
       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,
@@ -21084,7 +21318,7 @@ var tileRenderSettings = {
       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,
@@ -21094,7 +21328,7 @@ var tileRenderSettings = {
       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,
@@ -21122,86 +21356,50 @@ var tileRenderSettings = {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var getCurrentDimensionValue = function getCurrentDimensionValue() {
-  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var name = arguments.length > 1 ? arguments[1] : undefined;
-  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 = 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 (_ref) {
-          var name = _ref.name,
-              units = _ref.units,
-              currentValue = _ref.currentValue,
-              synced = _ref.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);
 };
 
 /* *
@@ -21300,8 +21498,7 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
             coordinateIndexInFeature: _polygonIndex
           };
         }
-      } catch (e) {
-        console.warn(e);
+      } catch (e) {// console.warn(e);
       }
     }
   }
@@ -23957,7 +24154,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
             mapId = _this$props.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);
@@ -24257,7 +24454,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   _mapId = props.mapId;
               onUpdateLayerInformation && onUpdateLayerInformation({
                 origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
-                serviceLayers: null,
                 layerStyle: null,
                 layerDimensions: null,
                 mapDimensions: {
@@ -25439,8 +25635,8 @@ var OptionsMenuConnect = function OptionsMenuConnect(_ref) {
  * 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(_ref) {
   var fontSize = _ref.fontSize,
@@ -25473,13 +25669,14 @@ var ClockContainer = function ClockContainer(_ref) {
     item: true,
     zIndex: 2,
     ref: setButtonElement
-  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    variant: "tool",
     onClick: onButtonClick,
     sx: {
       color: '#fff!important'
     },
     "aria-label": "Animation options",
-    active: isPopperOpen
+    isSelected: isPopperOpen
   }, /*#__PURE__*/React__default.createElement(Icon, {
     isPopperOpen: isPopperOpen,
     popperPlacement: popperPlacement
@@ -25911,6 +26108,31 @@ var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
   });
 };
 
+/* *
+ * 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 sanitizeHTML = function sanitizeHTML(htmlToBeSanitezed) {
+  return {
+    __html: DOMPurify.sanitize(htmlToBeSanitezed, {
+      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'table', 'td', 'tr', 'br', 'hr', 'th'],
+      ALLOWED_ATTR: ['href']
+    })
+  };
+};
+
 var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
   var layers = _ref.layers,
       isOpen = _ref.isOpen,
@@ -26098,9 +26320,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
       },
       "data-testid": "layer-result-ready-".concat(layerId),
       // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: result.data.replace(/<hr\/>/g, '')
-      }
+      dangerouslySetInnerHTML: sanitizeHTML(result.data)
     }) : /*#__PURE__*/React__default.createElement("div", {
       "data-testid": "layer-result-loading-".concat(layerId)
     }, /*#__PURE__*/React__default.createElement(CircularProgress, {
@@ -26456,17 +26676,27 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
   }, [dispatch]);
+  var syncTargets = useSelector(function (store) {
+    return getSyncGroupTargets(store);
+  });
   React__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: "".concat(Math.round(100 / cols), "%"),
     height: "".concat(Math.round(100 / rows), "%")
@@ -26731,6 +26961,793 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   });
 };
 
+/* *
+ * 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(_ref) {
+  var isVisible = _ref.isVisible,
+      settings = _ref.settings,
+      onClick = _ref.onClick;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+
+  var hideTitle = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.label) === null || _a === void 0 ? void 0 : _a.hide) !== null && _b !== void 0 ? _b : 'Hide timeslider';
+  var showTitle = (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.label) === null || _c === void 0 ? void 0 : _c.show) !== null && _d !== void 0 ? _d : 'Show timeslider';
+  var hideIcon = (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _e === void 0 ? void 0 : _e.hide) !== null && _f !== void 0 ? _f : /*#__PURE__*/React__default.createElement(ChevronDown, null);
+  var showIcon = (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _g === void 0 ? void 0 : _g.show) !== null && _h !== void 0 ? _h : /*#__PURE__*/React__default.createElement(ChevronUp, null);
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: isVisible ? hideTitle : showTitle
+  }), /*#__PURE__*/React__default.createElement(IconButton, Object.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(_ref) {
+  var children = _ref.children,
+      right = _ref.right,
+      left = _ref.left;
+  return /*#__PURE__*/React__default.createElement(ButtonGroup, {
+    orientation: "horizontal",
+    fullWidth: true,
+    sx: Object.assign(Object.assign(Object.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(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      startTime = _ref.startTime,
+      endTime = _ref.endTime,
+      style = _ref.style,
+      locale = _ref.locale;
+
+  var _useTheme = useTheme(),
+      timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
+
+  if (!width) {
+    return /*#__PURE__*/React__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.createElement("rect", {
+      x: index * tickSpacing - tickOffset,
+      y: 0,
+      width: tickSpacing,
+      height: height,
+      fill: index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill,
+      key: "".concat(label, "-color")
+    });
+  });
+  var labels = dayLabels.map(function (label, index) {
+    return /*#__PURE__*/React__default.createElement("text", {
+      x: index * tickSpacing + 8 - tickOffset,
+      y: 14,
+      fill: timeSliderLite.timeline.fill,
+      textAnchor: "left",
+      fontSize: "12px",
+      key: "".concat(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.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: "".concat(label, "-").concat(value)
+      });
+    });
+  }).flat();
+  return /*#__PURE__*/React__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 _bounds = _slicedToArray(bounds, 2),
+      min = _bounds[0],
+      max = _bounds[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(_ref) {
+  var x = _ref.x,
+      stroke = _ref.stroke,
+      height = _ref.height,
+      width = _ref.width;
+  return /*#__PURE__*/React__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(_ref2) {
+  var x = _ref2.x,
+      stroke = _ref2.stroke,
+      height = _ref2.height,
+      width = _ref2.width;
+  return /*#__PURE__*/React__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(_ref3) {
+  var draggableLabel = _ref3.draggableLabel,
+      width = _ref3.width,
+      height = _ref3.height,
+      locale = _ref3.locale,
+      startTime = _ref3.startTime,
+      endTime = _ref3.endTime,
+      _ref3$needleDragAreaW = _ref3.needleDragAreaWidth,
+      needleDragAreaWidth = _ref3$needleDragAreaW === void 0 ? DRAG_AREA_WIDTH : _ref3$needleDragAreaW,
+      needleLabelZIndex = _ref3.needleLabelZIndex,
+      needleLabelOffset = _ref3.needleLabelOffset,
+      _ref3$needleWidth = _ref3.needleWidth,
+      needleWidth = _ref3$needleWidth === void 0 ? NEEDLE_WIDTH : _ref3$needleWidth,
+      timeStep = _ref3.timeStep,
+      selectedTime = _ref3.selectedTime,
+      setSelectedTime = _ref3.setSelectedTime,
+      style = _ref3.style;
+  var draggableRef = useRef(null);
+
+  var _useTheme = useTheme(),
+      timeSliderLite = _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.createElement(Draggable, {
+    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.createElement("div", {
+    className: "TimeSliderLite-DraggableNeedle",
+    ref: draggableRef,
+    "data-testid": "TimeSliderLite-DraggableNeedle"
+  }, /*#__PURE__*/React__default.createElement(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 ".concat(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.createElement("svg", {
+    style: style,
+    cursor: "ew-resize",
+    width: needleDragAreaWidth,
+    height: height,
+    "data-testid": "TimeSliderLite-NeedleSvg"
+  }, /*#__PURE__*/React__default.createElement(NeedleShadow, {
+    x: needleDragAreaWidth / 2,
+    stroke: timeSliderLite.needleShadow.stroke,
+    height: height,
+    width: needleWidth
+  }), /*#__PURE__*/React__default.createElement(NeedleLine, {
+    x: needleDragAreaWidth / 2,
+    stroke: timeSliderLite.needle.stroke,
+    height: height,
+    width: needleWidth
+  })))));
+};
+
+var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
+  var height = _ref.height,
+      draggableTimeStamp = _ref.draggableTimeStamp,
+      locale = _ref.locale,
+      startTime = _ref.startTime,
+      endTime = _ref.endTime,
+      needleWidth = _ref.needleWidth,
+      needleDragAreaWidth = _ref.needleDragAreaWidth,
+      needleLabelZIndex = _ref.needleLabelZIndex,
+      needleLabelOffset = _ref.needleLabelOffset,
+      timeStep = _ref.timeStep,
+      selectedTime = _ref.selectedTime,
+      setSelectedTime = _ref.setSelectedTime;
+  var sliderAreaRef = useRef(null);
+
+  var _React$useState = React__default.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      areaWidth = _React$useState2[0],
+      setAreaWidth = _React$useState2[1];
+
+  var drawNeedle = selectedTime && areaWidth;
+  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.createElement(Box, {
+    ref: sliderAreaRef,
+    sx: {
+      position: 'relative',
+      height: "".concat(height, "px"),
+      overflow: 'hidden',
+      width: '100%'
+    },
+    "data-testid": "TimeSliderLite-Background"
+  }, /*#__PURE__*/React__default.createElement(TimeSliderLiteBackgroundSvg, {
+    style: {
+      position: 'absolute',
+      top: 0
+    },
+    width: areaWidth,
+    height: height,
+    startTime: startTime,
+    endTime: endTime,
+    locale: locale
+  }), drawNeedle && /*#__PURE__*/React__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(_ref) {
+  var forward = _ref.forward,
+      isDisabled = _ref.isDisabled,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      settings = _ref.settings;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+
+  var forwardTitle = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.label) === null || _a === void 0 ? void 0 : _a.forward) !== null && _b !== void 0 ? _b : 'Forward';
+  var backwardTitle = (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.label) === null || _c === void 0 ? void 0 : _c.backward) !== null && _d !== void 0 ? _d : 'Backward';
+  var forwardIcon = (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _e === void 0 ? void 0 : _e.forward) !== null && _f !== void 0 ? _f : /*#__PURE__*/React.createElement(StepForward, {
+    "data-testid": "step-forward-svg-path"
+  });
+  var backwardIcon = (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _g === void 0 ? void 0 : _g.backward) !== null && _h !== void 0 ? _h : /*#__PURE__*/React.createElement(StepBackward, {
+    "data-testid": "step-backward-svg-path"
+  });
+  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: forward ? forwardTitle : backwardTitle
+  }), /*#__PURE__*/React.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+    disabled: isDisabled,
+    "aria-label": forward ? forwardTitle : backwardTitle,
+    onClick: onClick,
+    "data-testid": "TimeSliderLite-StepButton".concat(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(_ref) {
+  var isAnimating = _ref.isAnimating,
+      isDisabled = _ref.isDisabled,
+      onTogglePlayButton = _ref.onTogglePlayButton,
+      settings = _ref.settings;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+
+  var pauseTitle = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.label) === null || _a === void 0 ? void 0 : _a.pause) !== null && _b !== void 0 ? _b : 'Pause';
+  var playTitle = (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.label) === null || _c === void 0 ? void 0 : _c.play) !== null && _d !== void 0 ? _d : 'Play';
+  var pauseIcon = (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _e === void 0 ? void 0 : _e.pause) !== null && _f !== void 0 ? _f : /*#__PURE__*/React__default.createElement(Pause, null);
+  var playIcon = (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _g === void 0 ? void 0 : _g.play) !== null && _h !== void 0 ? _h : /*#__PURE__*/React__default.createElement(Play, null);
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: isAnimating ? pauseTitle : playTitle
+  }), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+    sx: Object.assign(Object.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(_ref) {
+  var menuOpen = _ref.menuOpen,
+      onClick = _ref.onClick,
+      settings = _ref.settings;
+
+  var _a, _b;
+
+  var title = (_a = settings === null || settings === void 0 ? void 0 : settings.label) !== null && _a !== void 0 ? _a : 'Animation options';
+  var icon = (_b = settings === null || settings === void 0 ? void 0 : settings.icon) !== null && _b !== void 0 ? _b : /*#__PURE__*/React__default.createElement(Options, null);
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: title
+  }), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+    sx: Object.assign(Object.assign({}, menuOpen && {
+      backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+    }), timeSliderLiteButtonDefaultProps.sx),
+    "aria-selected": menuOpen,
+    onClick: onClick,
+    "data-testid": "TimeSliderLite-MenuButton"
+  }), icon));
+};
+
+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(_ref) {
+  var controlButtons = _ref.controlButtons,
+      endTime = _ref.endTime,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _ref$height,
+      hideButton = _ref.hideButton,
+      isAnimating = _ref.isAnimating,
+      isVisible = _ref.isVisible,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? TIME_SLIDER_LITE_DEFAULT_LOCALE : _ref$locale,
+      mapId = _ref.mapId,
+      menuOpen = _ref.menuOpen,
+      overrideAnimation = _ref.overrideAnimation,
+      onToggleAnimation = _ref.onToggleAnimation,
+      onToggleMenu = _ref.onToggleMenu,
+      needleWidth = _ref.needleWidth,
+      needleDragAreaWidth = _ref.needleDragAreaWidth,
+      needleLabelZIndex = _ref.needleLabelZIndex,
+      needleLabelOffset = _ref.needleLabelOffset,
+      draggableTimeStamp = _ref.draggableTimeStamp,
+      onToggleTimeSlider = _ref.onToggleTimeSlider,
+      selectedTime = _ref.selectedTime,
+      setSelectedTime = _ref.setSelectedTime,
+      settings = _ref.settings,
+      startTime = _ref.startTime,
+      sx = _ref.sx,
+      _ref$timeStep = _ref.timeStep,
+      timeStep = _ref$timeStep === void 0 ? TIME_SLIDER_LITE_DEFAULT_TIME_STEP : _ref$timeStep;
+
+  var _useState = useState(selectedTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      rawSelectedTime = _useState2[0],
+      setRawSelectedTime = _useState2[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;
+  useEffect(function () {
+    if (!runningExternalAnimation) {
+      var roundedSelectedTime = Math.floor(rawSelectedTime / timeStepSeconds) * timeStepSeconds;
+      setSelectedTime(roundedSelectedTime);
+    }
+  }, [setSelectedTime, rawSelectedTime, timeStepSeconds, runningExternalAnimation]);
+  useEffect(function () {
+    if (runningInternalAnimation) {
+      var interval = setInterval(function () {
+        setRawSelectedTime(function (prevTime) {
+          if (prevTime + timeStepSeconds > roundedEndTime) {
+            return roundedStartTime;
+          }
+
+          return prevTime + timeStepSeconds;
+        });
+      }, 200);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+
+    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.createElement(Grid, {
+    container: true,
+    sx: Object.assign(Object.assign(Object.assign({}, styles$1.container), sx), {
+      gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto"
+    }),
+    "data-testid": "timeSliderLite-".concat(mapId)
+  }, isVisible ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: {
+      height: "".concat(height, "px")
+    }
+  }, controlButtons || /*#__PURE__*/React__default.createElement(ControlButtonGroup, {
+    left: true
+  }, /*#__PURE__*/React__default.createElement(MenuButton, {
+    settings: settings === null || settings === void 0 ? void 0 : settings.menuButton,
+    menuOpen: menuOpen,
+    onClick: onToggleMenu
+  }), /*#__PURE__*/React__default.createElement(Divider, {
+    orientation: "vertical",
+    sx: {
+      height: "".concat(height, "px"),
+      margin: '2px'
+    }
+  }), /*#__PURE__*/React__default.createElement(PlayButton, {
+    settings: settings === null || settings === void 0 ? void 0 : settings.playButton,
+    isAnimating: isAnimating,
+    onTogglePlayButton: onToggleAnimation
+  }), /*#__PURE__*/React__default.createElement(StepButton, {
+    settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+    onClick: function onClick() {
+      return handleTimeStep(-timeStepSeconds);
+    }
+  }), /*#__PURE__*/React__default.createElement(StepButton, {
+    forward: true,
+    settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+    onClick: function onClick() {
+      return handleTimeStep(timeStepSeconds);
+    }
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React__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.createElement(Grid, {
+    item: true
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: {
+      height: "".concat(height, "px")
+    }
+  }, hideButton || /*#__PURE__*/React__default.createElement(ControlButtonGroup, {
+    right: isVisible
+  }, /*#__PURE__*/React__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.
@@ -26989,7 +28006,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     if (isChecked) {
       syncGroupRemoveTarget({
         groupId: String(groupId),
-        targetId: String(sourceId)
+        targetId: String(sourceId),
+        origin: 'user'
       });
     } else {
       var groups = syncGroupViewState[groupCategory].groups; // Check all other groups and if checkmark is found -> uncheck it
@@ -27004,7 +28022,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
           if (group.id !== groupId && group.selected.includes(sourceId)) {
             syncGroupRemoveTarget({
               groupId: String(group.id),
-              targetId: String(sourceId)
+              targetId: String(sourceId),
+              origin: 'user'
             });
           }
         } // Add new checkmark
@@ -27017,7 +28036,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
 
       syncGroupAddTarget({
         groupId: String(groupId),
-        targetId: String(sourceId)
+        targetId: String(sourceId),
+        origin: 'user'
       });
     }
   };
@@ -27695,4 +28715,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$8 as layerReducer, selectors$3 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, selectors$2 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, selectors$5 as serviceSelectors, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$3 as uiSelectors, types as uiTypes, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, useFetchServices, useSetupDialog, reducer$5 as webmapReducer };