@opengeoweb/core 4.19.1 → 4.21.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, 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, SearchHighlight, 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,
@@ -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)) {
@@ -4150,6 +4220,24 @@ var syncGroupGetViewState = createSelector(syncGroupStore, function (store) {
 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,
@@ -4161,7 +4249,8 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
   getTargetGroups: getTargetGroups,
   getAllTargetGroupsForSource: getAllTargetGroupsForSource,
   syncGroupGetViewState: syncGroupGetViewState,
-  getSyncedMapIdsForTimeslider: getSyncedMapIdsForTimeslider
+  getSyncedMapIdsForTimeslider: getSyncedMapIdsForTimeslider,
+  getSyncGroupTargets: getSyncGroupTargets
 });
 
 /* *
@@ -6894,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,
@@ -6908,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"
-  }))));
+  }));
 };
 
 /* *
@@ -6978,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() {
@@ -9561,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]
 };
@@ -9989,8 +10078,12 @@ var HeaderOptions = function HeaderOptions(_ref) {
   var isDockedLayerManager = _ref.isDockedLayerManager,
       shortcutsEnabled = _ref.shortcutsEnabled,
       onClickDockButton = _ref.onClickDockButton,
-      onChangeSize = _ref.onChangeSize;
-  React.useEffect(function () {
+      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) {
         if (event.ctrlKey && event.altKey && event.code === 'KeyS') {
@@ -10008,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,
@@ -10040,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);
 };
 
 /* *
@@ -10289,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);
   }
 };
 
@@ -10337,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: {
@@ -10346,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
   }));
@@ -10675,6 +10770,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       _ref$tooltipPrefix = _ref.tooltipPrefix,
       tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Opacity: ' : _ref$tooltipPrefix;
 
+  var _a;
+
   var _useControlledTooltip = useControlledTooltip(),
       _useControlledTooltip2 = _slicedToArray(_useControlledTooltip, 2),
       tooltipOpen = _useControlledTooltip2[0],
@@ -10686,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);
@@ -10733,10 +10831,10 @@ 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: "".concat(tooltipPrefix).concat(currentOpacityText),
     sx: tooltipContainerStyles(isEnabled),
@@ -10751,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
@@ -10769,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, {
@@ -10931,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) {
@@ -11022,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: {
@@ -11030,7 +11134,7 @@ var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
         backgroundColor: 'inherit'
       }
     },
-    active: isActive
+    isSelected: isActive
   }, Icon);
 };
 
@@ -11121,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() {
@@ -11172,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',
@@ -11257,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, {
@@ -11947,7 +12052,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
       layerIndex = _ref.layerIndex,
       settings = _ref.settings;
 
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  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);
@@ -11986,10 +12091,13 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
       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: (_g = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _g === void 0 ? void 0 : _g.tooltipPrefix
+      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,
@@ -11998,26 +12106,27 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
     layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, {
       layerId: layerId,
       mapId: mapId,
-      tooltipPrefix: (_h = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _h === void 0 ? void 0 : _h.tooltipPrefix,
-      icon: (_j = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _j === void 0 ? void 0 : _j.icon
+      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,
-      tooltipTitle: (_k = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _k === void 0 ? void 0 : _k.tooltipTitle,
-      icon: (_l = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _l === void 0 ? void 0 : _l.icon
+      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,
-      tooltipTitle: (_m = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _m === void 0 ? void 0 : _m.tooltipTitle,
-      icon: (_o = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _o === void 0 ? void 0 : _o.icon
+      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
   });
 };
@@ -12065,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',
@@ -13030,7 +13139,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles$3 = {
+var styles$4 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -13074,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,
@@ -13115,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) {
@@ -13142,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
   })));
 };
 
@@ -13185,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);
   });
@@ -13197,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%',
@@ -13233,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,
@@ -13260,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
@@ -13271,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);
@@ -13278,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,
@@ -13307,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;
@@ -13347,7 +13467,7 @@ 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,
@@ -13537,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();
@@ -13567,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,
@@ -13574,7 +13697,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     bounds: bounds,
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    showTitle: showTitle,
+    title: shownTitle,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
     source: uiSource,
@@ -13616,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,
@@ -13652,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,
@@ -13659,7 +13785,7 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     bounds: bounds,
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    showTitle: showTitle,
+    title: shownTitle,
     leftHeaderComponent: leftHeaderComponent,
     // isLoading={isMapPresetLoading}
     // error={mapPresetError}
@@ -13689,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) {
@@ -13712,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));
 };
 
@@ -13978,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) {
@@ -14033,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",
@@ -14539,43 +14664,6 @@ var sortByService = function sortByService(serviceObj) {
   }, {});
 };
 
-var highlightStyle = {
-  background: '#ffeecc'
-};
-
-var SearchHighlight = function SearchHighlight(_ref) {
-  var text = _ref.text,
-      search = _ref.search;
-
-  if (search === '') {
-    return /*#__PURE__*/React__default.createElement("span", null, text);
-  }
-
-  var searchWords = search.split(' ').reduce(function (words, word) {
-    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
-  }, []);
-  var searchRegex = searchWords.map(function (word) {
-    return escapeRegExp(word);
-  }).join('|');
-  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
-    var key = "".concat(part, "-").concat(index);
-
-    if (searchWords.some(function (search) {
-      return part.toLocaleLowerCase().includes(search);
-    })) {
-      return /*#__PURE__*/React__default.createElement("mark", {
-        key: key,
-        style: highlightStyle
-      }, part);
-    }
-
-    return /*#__PURE__*/React__default.createElement("span", {
-      key: key
-    }, part);
-  }));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15123,7 +15211,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',
@@ -15190,7 +15278,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') {
@@ -15200,9 +15288,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,
@@ -15211,12 +15299,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")));
@@ -16673,8 +16761,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) {
@@ -16687,13 +16775,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);
 };
 
 /* *
@@ -17476,8 +17566,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';
@@ -17489,21 +17579,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]
@@ -17559,20 +17648,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() {
@@ -17628,12 +17721,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';
@@ -17916,8 +18016,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';
 
@@ -17926,18 +18026,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"
-  }))));
+  }));
 };
 
 /* *
@@ -18104,21 +18204,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
     },
@@ -18127,7 +18228,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'
@@ -18157,8 +18262,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';
@@ -18168,17 +18273,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"
-  }))));
+  }));
 };
 
 /* *
@@ -18211,7 +18316,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)));
 };
 
 /* *
@@ -19179,7 +19284,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)),
@@ -19237,7 +19342,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;
@@ -19254,7 +19359,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;
@@ -19456,7 +19561,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;
@@ -19465,7 +19570,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));
@@ -19473,7 +19578,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));
@@ -19520,9 +19625,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;
 
@@ -19595,22 +19700,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));
 };
 
 /* *
@@ -20867,7 +20971,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',
@@ -20876,7 +20980,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',
@@ -20885,14 +20989,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',
@@ -20901,7 +21005,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',
@@ -20910,7 +21014,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',
@@ -20919,7 +21023,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',
@@ -20928,7 +21032,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',
@@ -20937,7 +21041,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',
@@ -20946,14 +21050,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,
@@ -20963,42 +21067,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',
@@ -21007,7 +21111,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,
@@ -21110,7 +21214,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,
@@ -21120,7 +21224,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,
@@ -21130,7 +21234,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,
@@ -21140,14 +21244,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,
@@ -21157,7 +21261,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,
@@ -21167,7 +21271,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,
@@ -21177,7 +21281,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,
@@ -21187,7 +21291,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,
@@ -21215,86 +21319,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);
 };
 
 /* *
@@ -21393,8 +21461,7 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
             coordinateIndexInFeature: _polygonIndex
           };
         }
-      } catch (e) {
-        console.warn(e);
+      } catch (e) {// console.warn(e);
       }
     }
   }
@@ -24050,7 +24117,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);
@@ -24350,7 +24417,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   _mapId = props.mapId;
               onUpdateLayerInformation && onUpdateLayerInformation({
                 origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
-                serviceLayers: null,
                 layerStyle: null,
                 layerDimensions: null,
                 mapDimensions: {
@@ -25532,8 +25598,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,
@@ -25566,13 +25632,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
@@ -26004,6 +26071,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,
@@ -26191,9 +26283,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, {
@@ -26549,17 +26639,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), "%")
@@ -26824,6 +26924,943 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   });
 };
 
+var DAY_TO_MILLISECOND = 24 * 60 * 60 * 1000;
+var DAY_TO_SECOND = 86400;
+var MILLISECOND_TO_DAY = 1 / 86400000;
+var MILLISECOND_TO_SECOND = 1 / 1000;
+var MINUTE_TO_SECOND = 60;
+var SECOND_TO_MILLISECOND = 1000;
+var ONE_DAY_IN_SECONDS = DAY_TO_SECOND;
+/**
+ * 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 getMonthChanges = function getMonthChanges(startDate, endDate) {
+  var result = [];
+  var currentDate = new Date(startDate.getTime());
+  var lastDate = new Date(endDate.getTime());
+  currentDate.setDate(1);
+  currentDate.setHours(0, 0, 0, 0);
+
+  while (currentDate <= lastDate) {
+    result.push(currentDate.getTime() * MILLISECOND_TO_SECOND);
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+
+  return result;
+};
+var getSelectedTimePx = function getSelectedTimePx(startTime, endTime, selectedTime, width) {
+  var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
+  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 * SECOND_TO_MILLISECOND);
+  var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
+  var selectedTimeX = Math.floor(selectedTimePx / width * (endTime - startTime));
+  var selectedTime = selectedTimeX + startDateX;
+  return selectedTime;
+};
+var TickMode;
+
+(function (TickMode) {
+  TickMode[TickMode["DAY"] = 1] = "DAY";
+  TickMode[TickMode["HALF_A_DAY"] = 2] = "HALF_A_DAY";
+  TickMode[TickMode["SIX_HOURS"] = 4] = "SIX_HOURS";
+  TickMode[TickMode["THREE_HOURS"] = 8] = "THREE_HOURS";
+  TickMode[TickMode["ONE_HOUR"] = 24] = "ONE_HOUR";
+  TickMode[TickMode["HALF_AN_HOUR"] = 48] = "HALF_AN_HOUR";
+  TickMode[TickMode["FIFTEEN_MINUTES"] = 96] = "FIFTEEN_MINUTES";
+})(TickMode || (TickMode = {}));
+
+var subTicksPerDay = function subTicksPerDay(dayWidthInPixels) {
+  if (dayWidthInPixels < 40) {
+    return TickMode.DAY;
+  }
+
+  if (dayWidthInPixels < 75) {
+    return TickMode.HALF_A_DAY;
+  }
+
+  if (dayWidthInPixels < 400) {
+    return TickMode.SIX_HOURS;
+  }
+
+  if (dayWidthInPixels < 800) {
+    return TickMode.THREE_HOURS;
+  }
+
+  if (dayWidthInPixels < 1600) {
+    return TickMode.ONE_HOUR;
+  }
+
+  if (dayWidthInPixels < 3200) {
+    return TickMode.HALF_AN_HOUR;
+  }
+
+  return TickMode.FIFTEEN_MINUTES;
+};
+var maxSubTicksPerDay = function maxSubTicksPerDay(dayWidthInPixels, timeStep) {
+  return Math.min(subTicksPerDay(dayWidthInPixels), Math.floor(ONE_DAY_IN_SECONDS / timeStep));
+};
+
+var Submenu;
+
+(function (Submenu) {
+  Submenu["TIME_RANGE"] = "Time range";
+  Submenu["TIME_STEP"] = "Time step";
+  Submenu["SPEED"] = "Speed";
+  Submenu["UPDATE_INTERVAL"] = "Update interval";
+})(Submenu || (Submenu = {}));
+
+/* *
+ * 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(_a) {
+  var children = _a.children,
+      right = _a.right,
+      left = _a.left,
+      props = __rest(_a, ["children", "right", "left"]);
+
+  return /*#__PURE__*/React__default.createElement(ButtonGroup, Object.assign({
+    orientation: "horizontal",
+    fullWidth: true
+  }, props, {
+    sx: Object.assign(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'
+    }), props.sx)
+  }), 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 = 6;
+var HOUR_LABEL_OFFSET = 1.5;
+var MONTH_LABEL_BREAKPOINT = 65;
+var HOUR_LABEL_BREAKPOINT = 800;
+var HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT = 1600;
+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,
+      timeStep = _ref.timeStep,
+      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 * SECOND_TO_MILLISECOND);
+  var endDate = new Date(endTime * SECOND_TO_MILLISECOND);
+  var totalDays = (endDate.getTime() - startDate.getTime()) * MILLISECOND_TO_DAY;
+  var tickSpacing = width / totalDays;
+
+  if (tickSpacing === Infinity || tickSpacing === -Infinity || isNaN(tickSpacing)) {
+    return null;
+  }
+
+  var tickOffset = (startDate.getHours() + startDate.getMinutes() / 60) / 24 * tickSpacing;
+  var showMonthLabel = tickSpacing < MONTH_LABEL_BREAKPOINT;
+  var showHourLabel = tickSpacing > HOUR_LABEL_BREAKPOINT;
+  var showHourLabelEveryThirdHour = tickSpacing < HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT; // Set up variables for date labels and background colors
+
+  var dayLabels = [];
+  var currentDate = startDate;
+  var lastDayLabelDate = new Date(endDate.getTime() + 2 * DAY_TO_MILLISECOND); // 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 monthChanges = getMonthChanges(startDate, endDate);
+  var monthLabels = showMonthLabel ? monthChanges.map(function (monthChange) {
+    var x = getSelectedTimePx(startTime, endTime, monthChange, width) + 4;
+    var dateString = new Date(monthChange * 1000).toLocaleDateString(locale, {
+      weekday: 'short',
+      month: 'numeric',
+      day: 'numeric'
+    });
+    var label = dateString.charAt(0).toUpperCase() + dateString.slice(1);
+    return /*#__PURE__*/React__default.createElement("text", {
+      x: x,
+      y: 14,
+      fill: timeSliderLite.timeline.fill,
+      textAnchor: "left",
+      fontSize: "12px",
+      key: "".concat(monthChange, "-month-change-text"),
+      style: {
+        userSelect: 'none'
+      }
+    }, label);
+  }) : null;
+  var backgroundRectangles = dayLabels.map(function (label, index) {
+    return /*#__PURE__*/React__default.createElement("rect", {
+      x: Math.floor(index * tickSpacing - tickOffset),
+      y: 0,
+      width: Math.ceil(tickSpacing),
+      height: height,
+      fill: index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill,
+      key: "".concat(label, "-color")
+    });
+  });
+  var dailyLabels = !showMonthLabel ? 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]);
+  }) : null;
+  var hourLabelsPerDay = 24;
+  var hourLabels = showHourLabel ? dayLabels.map(function (label, index) {
+    return Array.from({
+      length: hourLabelsPerDay
+    }, function (_, value) {
+      var defaultProps = {
+        x: index * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
+        y: height - 10,
+        visibility: showHourLabelEveryThirdHour && value % 3 !== 0 ? 'hidden' : 'visible',
+        fill: timeSliderLite.timeline.fill,
+        fontSize: '12px'
+      };
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", Object.assign({}, defaultProps, {
+        textAnchor: "end",
+        key: "".concat(label, "-").concat(value, "-hour-label"),
+        style: {
+          userSelect: 'none'
+        }
+      }), value), /*#__PURE__*/React__default.createElement("text", Object.assign({}, defaultProps, {
+        textAnchor: "start",
+        key: "".concat(label, "-").concat(value, "-00-label"),
+        style: {
+          userSelect: 'none'
+        }
+      }), ":00"));
+    });
+  }).flat() : null;
+  var ticksPerDay = timeStep ? maxSubTicksPerDay(tickSpacing, timeStep) : subTicksPerDay(tickSpacing);
+  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, monthLabels, dailyLabels, hourLabels);
+};
+
+/* *
+ * 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 && startTime < endTime;
+  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
+    },
+    timeStep: timeStep,
+    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,
+      tooltipDelay = _ref.tooltipDelay;
+
+  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,
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay
+  }), /*#__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,
+      tooltipDelay = _ref.tooltipDelay;
+
+  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,
+    placement: "top",
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay
+  }), /*#__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);
+  var Button = /*#__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);
+
+  if (menuOpen) {
+    return Button;
+  }
+
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: title
+  }), Button);
+};
+
+var TIME_SLIDER_LITE_DEFAULT_HEIGHT = 40;
+var TIME_SLIDER_LITE_DEFAULT_LOCALE = 'en';
+var TIME_SLIDER_LITE_DEFAULT_TIME_STEP = 5;
+var TIME_SLIDER_LITE_TOOLTIP_DELAY = 3000;
+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 _a, _b;
+
+  var _useState = useState(selectedTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      rawSelectedTime = _useState2[0],
+      setRawSelectedTime = _useState2[1];
+
+  var timeStepSeconds = timeStep * MINUTE_TO_SECOND;
+  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();
+    }
+  }; // Handle time range selection
+
+
+  useEffect(function () {
+    setRawSelectedTime(boundedValue(selectedTime, [roundedStartTime, roundedEndTime])); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime, endTime]);
+  var tooltipDelay = menuOpen ? TIME_SLIDER_LITE_TOOLTIP_DELAY : undefined;
+  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",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      boxShadow: isVisible ? (_a = sx) === null || _a === void 0 ? void 0 : _a.boxShadow : undefined
+    }),
+    "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,
+    tooltipDelay: tooltipDelay
+  }), /*#__PURE__*/React__default.createElement(StepButton, {
+    settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+    onClick: function onClick() {
+      return handleTimeStep(-timeStepSeconds);
+    },
+    tooltipDelay: tooltipDelay
+  }), /*#__PURE__*/React__default.createElement(StepButton, {
+    forward: true,
+    settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
+    onClick: function onClick() {
+      return handleTimeStep(timeStepSeconds);
+    },
+    tooltipDelay: tooltipDelay
+  }))), /*#__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: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      boxShadow: isVisible ? 'none' : (_b = sx) === null || _b === void 0 ? void 0 : _b.boxShadow,
+      borderRadius: isVisible ? 'none' : '4px',
+      height: "".concat(height, "px")
+    }
+  }, hideButton || /*#__PURE__*/React__default.createElement(ControlButtonGroup, {
+    className: "timeSliderLite-hideButtonGroup-".concat(isVisible ? 'hide' : 'show'),
+    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.
@@ -27791,4 +28828,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$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, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, selectors$3 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 };