@opengeoweb/core 4.18.0 → 4.19.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension, reactRouterDom) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('react-resize-detector'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'react-resize-detector', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.reactResizeDetector, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, reactResizeDetector, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension, reactRouterDom) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -354,8 +354,10 @@
         wmjsMap.getListener().suspendEvents();
 
         try {
-          wmjsMap.stopAnimating && wmjsMap.stopAnimating(); // eslint-disable-next-line no-empty
-        } catch (e) {}
+          wmjsMap.stopAnimating && wmjsMap.stopAnimating();
+        } catch (e) {
+          console.warn(e);
+        }
 
         Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
           var wmLayer = getWMLayerById(layerId);
@@ -811,8 +813,8 @@
           setTargetNode = _a[1]; // Check if pointer event targets current node element
 
 
-      var pointerEventListener = React__default["default"].useCallback(function (e) {
-        setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(e.target) : false);
+      var pointerEventListener = React__default["default"].useCallback(function (event) {
+        setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
       }, [nodeRef]);
       React__default["default"].useEffect(function () {
         document.addEventListener(eventType, pointerEventListener);
@@ -2540,6 +2542,30 @@
             map.autoUpdateLayerId = undefined;
           }
         },
+        setAutoTimestepLayerId: function setAutoTimestepLayerId(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              autoTimestepLayerId = _a.autoTimestepLayerId;
+          var map = draft.byId[mapId];
+
+          if (!map) {
+            return;
+          }
+
+          map.autoTimeStepLayerId = autoTimestepLayerId;
+        },
+        setAutoUpdateLayerId: function setAutoUpdateLayerId(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              autoUpdateLayerId = _a.autoUpdateLayerId;
+          var map = draft.byId[mapId];
+
+          if (!map) {
+            return;
+          }
+
+          map.autoUpdateLayerId = autoUpdateLayerId;
+        },
         setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -8041,8 +8067,7 @@
             _this.canvas = canvas;
           }
         }))));
-      }; // eslint-disable-next-line react/static-property-placement
-
+      };
 
       CanvasComponent.defaultProps = {
         onRenderCanvas: function onRenderCanvas() {
@@ -10336,10 +10361,6 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var iconStyle = {
-      height: 24,
-      width: 24
-    };
     var sizeSmall = {
       width: 100,
       height: 300
@@ -10376,43 +10397,31 @@
           document.removeEventListener('keydown', handleKeyDown);
         };
       }, [onChangeSize, shortcutsEnabled]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "small"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "small",
         "data-testid": "collapseSmall-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
-        sx: iconStyle,
         className: "collapseSmall-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "medium"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "medium",
         "data-testid": "collapseMedium-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
-        sx: iconStyle,
         className: "collapseMedium-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "large"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "large",
         "data-testid": "collapseLarge-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
-        sx: iconStyle,
         className: "collapseLarge-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: isDockedLayerManager ? 'Undock' : 'Dock'
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: isDockedLayerManager ? 'Undock' : 'Dock',
         "data-testid": "dockedBtn",
         disableRipple: true,
-        size: "small",
-        sx: iconStyle,
         onClick: function onClick() {
           return onClickDockButton();
         }
@@ -10420,7 +10429,7 @@
         "data-testid": "dockedLayerManager-collapse"
       }) : /*#__PURE__*/React__namespace.createElement(theme.ExpandWindow, {
         "data-testid": "dockedLayerManager-uncollapse"
-      }))));
+      })));
     };
 
     /* *
@@ -10627,20 +10636,24 @@
      * 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 style$2 = {
-      width: '24px',
-      height: '24px',
-      margin: 'auto 0px auto 32px',
-      borderRadius: '15%'
+      padding: 0,
+      margin: 'auto 0px auto 32px'
     };
 
     var LayerSelectButtonConnect = function LayerSelectButtonConnect(_a) {
       var mapId = _a.mapId,
           _b = _a.source,
-          source = _b === void 0 ? 'app' : _b;
+          source = _b === void 0 ? 'app' : _b,
+          _c = _a.tooltipTitle,
+          tooltipTitle = _c === void 0 ? 'Open the layer selector' : _c,
+          _d = _a.icon,
+          icon = _d === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, {
+        "data-testid": "layerSelectButtonConnectIcon"
+      }) : _d;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, DialogTypes.LayerSelect);
@@ -10656,16 +10669,13 @@
           source: source
         }));
       }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Open the layer selector"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         onClick: openLayerSelectDialog,
         sx: style$2,
         id: "layerSelectButton",
         "data-testid": "layerSelectButton",
-        disableRipple: true,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)));
+        tooltipTitle: tooltipTitle
+      }, icon);
     };
 
     /* *
@@ -10694,17 +10704,20 @@
     };
 
     var DescriptionRow = function DescriptionRow(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+
       var mapId = _a.mapId,
           mapPresetsModule = _a.mapPresetsModule,
-          _b = _a.source,
-          source = _b === void 0 ? 'app' : _b;
+          _m = _a.source,
+          source = _m === void 0 ? 'app' : _m,
+          settings = _a.settings;
 
-      var _c = __read(React__namespace.useState(mapPresetsModule ? __assign(__assign({}, mapPresetsModule), {
+      var _o = __read(React__namespace.useState(mapPresetsModule ? __assign(__assign({}, mapPresetsModule), {
         props: __assign(__assign({}, mapPresetsModule.props), {
           id: 'mappresets-menubuttonInline'
         })
       }) : undefined), 1),
-          mapPresetsModuleInline = _c[0];
+          mapPresetsModuleInline = _o[0];
 
       var hasMapPresetsModule = mapPresetsModule !== undefined;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -10721,13 +10734,15 @@
         className: columnClasses.column1
       }, /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
         mapId: mapId,
-        source: source
+        source: source,
+        tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.tooltipTitle,
+        icon: (_c = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _c === void 0 ? void 0 : _c.icon
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-layer " + (hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
         sx: styles$4.text
-      }, "Layer"), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      }, (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : 'Layer'), /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-mapPresets",
         sx: {
           marginRight: 4
@@ -10736,15 +10751,15 @@
         className: columnClasses.column3
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Style")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : 'Style')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column4
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Opacity")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : 'Opacity')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column5
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : 'Dimensions')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column6
       }));
     };
@@ -11370,13 +11385,22 @@
       return 'geowebColors.buttons.flat.disabled.color';
     };
 
+    var AutoOptions;
+
+    (function (AutoOptions) {
+      AutoOptions["BOTH"] = "Auto both";
+      AutoOptions["NONE"] = "Auto none";
+      AutoOptions["TIMESTEP"] = "Auto-timestep";
+      AutoOptions["UPDATE"] = "Auto-update";
+    })(AutoOptions || (AutoOptions = {}));
+
     var ActivateLayer = function ActivateLayer(_a) {
       var _onChange = _a.onChange,
-          isActive = _a.isActive,
-          isEnabled = _a.isEnabled;
+          isEnabled = _a.isEnabled,
+          current = _a.current;
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         variant: "standard",
-        tooltip: "Auto update",
+        tooltip: "Leading layer",
         // Don't show arrow https://stackoverflow.com/questions/69085735/how-to-remove-arrow-from-react-textfield-select
         inputProps: {
           IconComponent: function IconComponent() {
@@ -11384,7 +11408,7 @@
           },
           tabIndex: -1
         },
-        value: isActive ? 'Both' : 'None',
+        value: current,
         sx: {
           '&& .MuiInput-input': {
             paddingRight: '2px',
@@ -11392,30 +11416,39 @@
             backgroundColor: 'inherit'
           }
         },
-        renderValue: function renderValue(optionSelected) {
+        renderValue: function renderValue(current) {
           return /*#__PURE__*/React__namespace.createElement(AutoUpdateButton$1, {
-            optionSelected: optionSelected,
-            isActive: isActive,
+            current: current,
             isEnabled: isEnabled
           });
         },
         onChange: function onChange(event) {
           event.stopPropagation();
 
-          _onChange(event.target.value === 'Both');
+          _onChange(event.target.value);
         },
         onClose: function onClose(event) {
           event.stopPropagation();
         }
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
-      }, "Auto-update"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        value: "None"
+      }, "Leading layer"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.NONE
       }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
         icon: /*#__PURE__*/React__namespace.createElement(theme.None, null),
         text: "None"
       })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        value: "Both"
+        value: AutoOptions.TIMESTEP
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.FastForward, null),
+        text: "Auto-timestep"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.UPDATE
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateActive, null),
+        text: "Auto-update"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.BOTH
       }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
         icon: /*#__PURE__*/React__namespace.createElement(theme.Both, null),
         text: "Both"
@@ -11423,20 +11456,13 @@
     };
 
     var AutoUpdateButton$1 = function AutoUpdateButton(_a) {
-      var optionSelected = _a.optionSelected,
-          isActive = _a.isActive,
+      var current = _a.current,
           isEnabled = _a.isEnabled;
-      var style = {
-        color: getIconColor(isActive, isEnabled)
-      };
-      var Icon = isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
-        sx: style
-      }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
-        sx: style
-      });
+      var isActive = current !== AutoOptions.NONE;
+      var Icon = getIcon(isActive, isEnabled, current);
       return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "aria-label": current,
         "data-testid": "activateLayer-btn",
-        "aria-label": "Auto update " + optionSelected,
         sx: {
           '&.MuiButtonBase-root': {
             backgroundColor: 'inherit'
@@ -11461,6 +11487,34 @@
       }, text), /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon));
     };
 
+    function getIcon(isActive, isEnabled, current) {
+      var style = {
+        color: getIconColor(isActive, isEnabled)
+      };
+
+      if (current === AutoOptions.BOTH) {
+        return /*#__PURE__*/React__namespace.createElement(theme.Both, {
+          sx: style
+        });
+      }
+
+      if (current === AutoOptions.TIMESTEP) {
+        return /*#__PURE__*/React__namespace.createElement(theme.FastForward, {
+          sx: style
+        });
+      }
+
+      if (current === AutoOptions.UPDATE) {
+        return /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateActive, {
+          sx: style
+        });
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(theme.None, {
+        sx: style
+      });
+    }
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -11474,8 +11528,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var LayerRow = function LayerRow(_a) {
@@ -11529,9 +11583,9 @@
           },
           '&.sortable-ghost': {
             opacity: 0.5
-          },
-          alignItems: 'center'
-        }
+          }
+        },
+        alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(shared.CustomAccordion, {
         className: "medium-layermanager",
         defaultExpanded: false,
@@ -11546,8 +11600,8 @@
             padding: 0
           }
         },
-        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
-          isEnabled: layer.enabled,
+        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+          shouldShowAsDisabled: !layer.enabled,
           tooltipTitle: layer.name,
           onClick: function onClick(event) {
             event.stopPropagation();
@@ -11556,11 +11610,10 @@
               enabled: !layer.enabled
             });
           },
-          "data-testid": "enableButton-medium",
-          icon: isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)
-        }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+          "data-testid": "enableButton-medium"
+        }, isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+          current: AutoOptions.BOTH,
           onChange: onClickRow,
-          isActive: false,
           isEnabled: true
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           sx: {
@@ -11619,7 +11672,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {}
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
         tooltipTitle: "Delete",
         onClick: function onClick() {
           onLayerDelete({
@@ -11627,13 +11680,13 @@
             layerId: layerId
           });
         },
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         "data-testid": "deleteButton"
-      }))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Delete, null)))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnClasses.column1
-      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
-        isEnabled: layer.enabled,
+        className: columnClasses.column1,
+        alignItems: "center"
+      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !layer.enabled,
         tooltipTitle: layer.name,
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -11642,11 +11695,10 @@
             enabled: !layer.enabled
           });
         },
-        icon: layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null),
         "data-testid": "enableButton"
-      }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+      }, layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
         onChange: onClickRow,
-        isActive: false,
+        current: AutoOptions.BOTH,
         isEnabled: true
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -11709,8 +11761,9 @@
         }
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnClasses.column6
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
+        className: columnClasses.column6,
+        alignItems: "center"
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
         tooltipTitle: "Delete",
         onClick: function onClick() {
           onLayerDelete({
@@ -11718,9 +11771,8 @@
             layerId: layerId
           });
         },
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         "data-testid": "deleteButton"
-      }), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Delete, null)), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
         mapId: mapId,
         layerId: layerId,
         onLayerDuplicate: onLayerDuplicate
@@ -11740,8 +11792,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var DeleteLayerConnect = function DeleteLayerConnect(_a) {
@@ -11763,7 +11815,7 @@
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         tooltipTitle: "Delete",
         onClick: function onClick() {
           layerDelete({
@@ -11772,10 +11824,9 @@
             layerIndex: layerIndex
           });
         },
-        isEnabled: isLayerEnabled,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
+        shouldShowAsDisabled: !isLayerEnabled,
         "data-testid": "deleteButton"
-      });
+      }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null));
     };
 
     /* *
@@ -11791,8 +11842,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var EnableLayerConnect = function EnableLayerConnect(_a) {
@@ -11813,8 +11864,8 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        isEnabled: isEnabled,
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !isEnabled,
         tooltipTitle: "Toggle visibility",
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -11824,10 +11875,12 @@
           });
         },
         className: "enable-btn",
-        icon: isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
-        "data-testid": "enableButton"
-      }), /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        isEnabled: isEnabled,
+        "data-testid": "enableButton",
+        sx: {
+          margin: 'auto 0px'
+        }
+      }, isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !isEnabled,
         tooltipTitle: layerName,
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -11837,9 +11890,11 @@
           });
         },
         className: "enable-btn-mini",
-        icon: isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
-        "data-testid": "enableButton"
-      }));
+        "data-testid": "enableButton",
+        sx: {
+          margin: 'auto 0px'
+        }
+      }, isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null)));
     };
 
     /* *
@@ -12168,49 +12223,127 @@
       var layerId = _a.layerId,
           mapId = _a.mapId;
       var dispatch = reactRedux.useDispatch();
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
+      var autoUpdateLayerId = reactRedux.useSelector(function (store) {
+        return getAutoUpdateLayerId(store, mapId);
+      });
+      var autoTimestepLayerId = reactRedux.useSelector(function (store) {
+        return getAutoTimeStepLayerId(store, mapId);
       });
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      var setActiveLayerId = React__namespace.useCallback(function (_a) {
-        var layerId = _a.layerId,
-            mapId = _a.mapId;
-        return dispatch(mapActions$1.setAutoLayerId({
+      var isAutoUpdating$1 = reactRedux.useSelector(function (store) {
+        return isAutoUpdating(store, mapId);
+      });
+
+      var goToLastAvailableTimeForLayerIfAutoUpdateIsOn = function goToLastAvailableTimeForLayerIfAutoUpdateIsOn() {
+        if (isAutoUpdating$1) {
+          dispatch(mapActions$1.toggleAutoUpdate({
+            mapId: mapId,
+            shouldAutoUpdate: true
+          }));
+        }
+      };
+
+      var thisLayerHasAutoUpdate = layerId === autoUpdateLayerId;
+      var thisLayerHasAutoTimestep = layerId === autoTimestepLayerId;
+      var thisLayerHasBoth = thisLayerHasAutoTimestep && thisLayerHasAutoUpdate;
+
+      function handleNoneClick() {
+        if (thisLayerHasBoth) {
+          dispatch(mapActions$1.setAutoLayerId({
+            autoTimeStepLayerId: undefined,
+            autoUpdateLayerId: undefined,
+            mapId: mapId,
+            origin: LayerActionOrigin.layerManager
+          }));
+        } else if (thisLayerHasAutoTimestep) {
+          dispatch(mapActions$1.setAutoTimestepLayerId({
+            mapId: mapId,
+            autoTimestepLayerId: undefined
+          }));
+        } else if (thisLayerHasAutoUpdate) {
+          dispatch(mapActions$1.setAutoUpdateLayerId({
+            mapId: mapId,
+            autoUpdateLayerId: undefined
+          }));
+        }
+      }
+
+      function handleBothClick() {
+        dispatch(mapActions$1.setAutoLayerId({
           autoTimeStepLayerId: layerId,
           autoUpdateLayerId: layerId,
           mapId: mapId,
           origin: LayerActionOrigin.layerManager
         }));
-      }, [dispatch]);
-      var isAutoUpdating$1 = reactRedux.useSelector(function (store) {
-        return isAutoUpdating(store, mapId);
-      });
-      var setAutoUpdateOn = React__namespace.useCallback(function (mapId) {
-        return dispatch(mapActions$1.toggleAutoUpdate({
+        goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+      }
+
+      function handleAutoUpdateClick() {
+        dispatch(mapActions$1.setAutoUpdateLayerId({
           mapId: mapId,
-          shouldAutoUpdate: true
+          autoUpdateLayerId: layerId
         }));
-      }, [dispatch]);
-      var isActive = activeLayerId === layerId;
-      return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
-        onChange: function onChange(isActive) {
-          setActiveLayerId({
+
+        if (thisLayerHasAutoTimestep) {
+          dispatch(mapActions$1.setAutoTimestepLayerId({
             mapId: mapId,
-            layerId: isActive ? layerId : undefined
-          });
+            autoTimestepLayerId: undefined
+          }));
+        }
 
-          if (isAutoUpdating$1) {
-            // Layer is now set active *and* autoupdate is currently on => autoupdate is desired to be set on.
-            setAutoUpdateOn(mapId);
+        goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+      }
+
+      function handleAutoTimestepClick() {
+        dispatch(mapActions$1.setAutoTimestepLayerId({
+          mapId: mapId,
+          autoTimestepLayerId: layerId
+        }));
+
+        if (thisLayerHasAutoUpdate) {
+          dispatch(mapActions$1.setAutoUpdateLayerId({
+            mapId: mapId,
+            autoUpdateLayerId: undefined
+          }));
+        }
+      }
+
+      var current = getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate);
+      return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
+        current: current,
+        onChange: function onChange(autoOption) {
+          if (autoOption === AutoOptions.BOTH) {
+            handleBothClick();
+          } else if (autoOption === AutoOptions.NONE) {
+            handleNoneClick();
+          } else if (autoOption === AutoOptions.TIMESTEP) {
+            handleAutoTimestepClick();
+          } else if (autoOption === AutoOptions.UPDATE) {
+            handleAutoUpdateClick();
           }
         },
-        isActive: isActive,
         isEnabled: isLayerEnabled
       });
     };
 
+    function getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate) {
+      if (thisLayerHasBoth) {
+        return AutoOptions.BOTH;
+      }
+
+      if (thisLayerHasAutoTimestep) {
+        return AutoOptions.TIMESTEP;
+      }
+
+      if (thisLayerHasAutoUpdate) {
+        return AutoOptions.UPDATE;
+      }
+
+      return AutoOptions.NONE;
+    }
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -12311,8 +12444,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var TOOLTIP_TITLE = 'Drag';
 
@@ -12322,20 +12455,17 @@
           _c = _a.index,
           index = _c === void 0 ? undefined : _c,
           _d = _a.hideTooltip,
-          hideTooltip = _d === void 0 ? false : _d,
+          hideTooltip = _d === void 0 ? true : _d,
           _e = _a.isSorting,
           isSorting = _e === void 0 ? false : _e;
       var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-      return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
         tooltipTitle: tooltipTitle,
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null),
         "data-testid": "dragHandle" + (index !== undefined ? "-" + index : ''),
         className: "handle",
         tabIndex: -1,
-        isEnabled: !isDisabled,
         disableTouchRipple: true,
         disabled: isDisabled,
-        isAccessible: true,
         sx: {
           cursor: isSorting ? 'grabbing' : 'grab',
           '&:hover': {
@@ -12344,9 +12474,12 @@
           marginLeft: '3px',
           marginRight: '3px',
           marginTop: 'auto',
-          marginBottom: 'auto'
+          marginBottom: 'auto',
+          '&.MuiIconButton-root': {
+            color: 'geowebColors.greys.accessible'
+          }
         }
-      });
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null));
     };
 
     /* *
@@ -12526,7 +12659,10 @@
 
       var selectedBaseLayers = _a.selectedBaseLayers,
           availableBaseLayers = _a.availableBaseLayers,
-          onChangeBaseLayers = _a.onChangeBaseLayers;
+          onChangeBaseLayers = _a.onChangeBaseLayers,
+          icon = _a.icon,
+          _c = _a.tooltipPrefix,
+          tooltipPrefix = _c === void 0 ? 'Layer: ' : _c;
 
       if (!availableBaseLayers || !availableBaseLayers.length) {
         return /*#__PURE__*/React__namespace.createElement("div", null, "No service available");
@@ -12547,7 +12683,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         disableUnderline: true,
-        tooltip: "Base layer: " + ((_b = availableBaseLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.name),
+        tooltip: "" + tooltipPrefix + ((_b = availableBaseLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.name),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectBaseLayer'
@@ -12565,7 +12701,8 @@
         },
         onChangeMouseWheel: function onChangeMouseWheel(e) {
           return onChangeBaseLayers(e.value);
-        }
+        },
+        IconComponent: icon
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
       }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
@@ -12637,7 +12774,9 @@
 
     var BaseLayersConnect = function BaseLayersConnect(_a) {
       var mapId = _a.mapId,
-          preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers;
+          preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers,
+          tooltipPrefix = _a.tooltipPrefix,
+          icon = _a.icon;
       var dispatch = reactRedux.useDispatch();
       var selectedBaseLayers = reactRedux.useSelector(function (store) {
         return getMapBaseLayers(store, mapId);
@@ -12672,7 +12811,9 @@
       return /*#__PURE__*/React__namespace.createElement(BaseLayers, {
         selectedBaseLayers: selectedBaseLayers,
         availableBaseLayers: currentAvailableBaseLayers,
-        onChangeBaseLayers: onChangeBaseLayers
+        onChangeBaseLayers: onChangeBaseLayers,
+        tooltipPrefix: tooltipPrefix,
+        icon: icon
       });
     };
 
@@ -12726,11 +12867,10 @@
       }, /*#__PURE__*/React__namespace.createElement(material.List, {
         dense: true
       }, sortedServices.map(function (service) {
-        return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        return /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
           "data-testid": "service-item",
           key: service.url,
           selected: service === activeService,
-          button: true,
           onClick: function onClick(event) {
             handleListItemClick(event, service);
           }
@@ -12753,8 +12893,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var WMSLayerTreeHeader = function WMSLayerTreeHeader(_a) {
@@ -12772,18 +12912,11 @@
         htmlFor: "select-multiple-native"
       }, "Available layers for ", serviceName)), onClickReload && /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Reload layers from service",
-        placement: "top"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "Reload layers from service",
         "data-testid": "reloadLayers",
-        color: "primary",
-        style: {
-          padding: 3
-        },
-        onClick: onClickReload,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))));
+        onClick: onClickReload
+      }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null))));
     };
 
     /* *
@@ -12932,10 +13065,9 @@
             textOverflow: 'ellipsis'
           }
         }, category)), layerMap[category].map(function (layer) {
-          return layer.leaf ? /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+          return layer.leaf ? /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
             "data-testid": "selectableLayer",
             key: layer.name,
-            button: true,
             selected: processedOK.indexOf(layer.name) !== -1 || layerExists(layer, highlightedLayers),
             onClick: function onClick() {
               return handleInternalSelect(layer.name);
@@ -13170,8 +13302,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var validateServiceUrl$1 = function validateServiceUrl(url) {
@@ -13287,7 +13419,7 @@
         alignItems: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: 10
+        xs: 12
       }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
         margin: "dense",
         id: "serviceurl",
@@ -13309,25 +13441,21 @@
         disabled: loading,
         error: urlError !== '',
         helperText: urlError,
-        variant: "standard"
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        xs: 2,
-        sx: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        "data-testid": "add-service",
-        onClick: handleAddServiceURL,
-        disabled: loading,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
-        size: 35,
-        sx: {
-          position: 'absolute',
-          top: '7px',
-          left: '7px',
-          zIndex: 1
+        variant: "filled",
+        InputProps: {
+          endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
+            position: "end"
+          }, loading ? /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
+            size: 24,
+            sx: {
+              zIndex: 1
+            }
+          }) : /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+            "data-testid": "add-service",
+            onClick: handleAddServiceURL,
+            disabled: loading,
+            size: "large"
+          }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)))
         }
       })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
         m: 2
@@ -13369,8 +13497,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var styles$3 = {
       buttonDiv: {
@@ -13383,10 +13511,7 @@
         zIndex: 1
       },
       button: {
-        width: '24px',
-        height: '24px',
-        margin: 'auto 0px auto 32px',
-        borderRadius: '15%'
+        margin: 'auto 0px auto 32px'
       }
     };
 
@@ -13406,39 +13531,24 @@
           open = _f[0],
           setOpen = _f[1];
 
-      var _g = __read(React__namespace.useState(shouldFocus), 2),
-          isTooltipDisabled = _g[0],
-          setTooltipDisabled = _g[1];
-
       var handleClose = function handleClose() {
         setOpen(!open);
       };
 
-      var onBlurTooltip = function onBlurTooltip(event) {
-        // enable tooltip again after user blurs
-        if (event.relatedTarget) {
-          setTooltipDisabled(false);
-        }
-      };
-
       React__namespace.useEffect(function () {
         if (shouldFocus && ref.current) {
           ref.current.focus();
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: tooltip,
-        disableFocusListener: isTooltipDisabled,
-        onBlur: onBlurTooltip
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         onClick: handleClose,
         sx: styles$3.button,
         disableRipple: true,
         "data-testid": "addLayersButton",
         ref: ref,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null))), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
+        tooltipTitle: tooltip
+      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
         open: open,
         handleClose: handleClose,
         onRenderTree: onRenderTree,
@@ -13465,13 +13575,16 @@
      * */
 
     var BaseLayerRow = function BaseLayerRow(_a) {
+      var _b, _c, _d;
+
       var mapId = _a.mapId,
-          _b = _a.preloadedAvailableBaseLayers,
-          preloadedAvailableBaseLayers = _b === void 0 ? availableDefaultBaseLayers : _b,
-          _c = _a.preloadedServices,
-          preloadedServices = _c === void 0 ? preloadedDefaultBaseServices : _c,
-          _d = _a.tooltip,
-          tooltip = _d === void 0 ? '' : _d;
+          _e = _a.preloadedAvailableBaseLayers,
+          preloadedAvailableBaseLayers = _e === void 0 ? availableDefaultBaseLayers : _e,
+          _f = _a.preloadedServices,
+          preloadedServices = _f === void 0 ? preloadedDefaultBaseServices : _f,
+          _g = _a.tooltip,
+          tooltip = _g === void 0 ? '' : _g,
+          settings = _a.settings;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
@@ -13497,12 +13610,14 @@
             layerType: LayerType.baseLayer
           });
         }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      })), (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _b === void 0 ? void 0 : _b.title, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
         mapId: mapId,
-        preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
+        preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
+        tooltipPrefix: (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _c === void 0 ? void 0 : _c.tooltipPrefix,
+        icon: (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _d === void 0 ? void 0 : _d.icon
       })));
     };
 
@@ -13627,7 +13742,8 @@
         left: 50
       } : _k,
           _l = _a.setFocused,
-          setFocused = _l === void 0 ? function () {} : _l;
+          setFocused = _l === void 0 ? function () {} : _l,
+          settings = _a.settings;
       var minSize = {
         width: 100,
         height: 126
@@ -13718,14 +13834,16 @@
       }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
         mapPresetsModule: leftHeaderComponent,
         mapId: mapId,
-        source: source
+        source: source,
+        settings: settings === null || settings === void 0 ? void 0 : settings.header
       }), /*#__PURE__*/React__namespace.createElement(LayerContainerRow, {
         mapId: mapId
       }), /*#__PURE__*/React__namespace.createElement(BaseLayerRow, {
         mapId: mapId,
         tooltip: "Add base layers",
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-        preloadedServices: preloadedBaseServices
+        preloadedServices: preloadedBaseServices,
+        settings: settings === null || settings === void 0 ? void 0 : settings.footer
       })))));
     };
 
@@ -14123,12 +14241,19 @@
      * 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 isURL = function isURL(string) {
       return /^https?:\/\//.test(string);
     };
+    var buttonStyle = {
+      '&.MuiButtonBase-root.MuiIconButton-root': {
+        width: 48,
+        height: 48,
+        marginRight: '-12px'
+      }
+    };
 
     var SearchFieldButtonContainer = function SearchFieldButtonContainer(_a) {
       var localSearchString = _a.localSearchString,
@@ -14136,16 +14261,13 @@
           setPopupIsOpen = _a.setPopupIsOpen;
 
       var ClearButton = function ClearButton() {
-        return /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-          title: "Clear",
-          placement: "top"
-        }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-          edge: "end",
+        return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+          tooltipTitle: "Clear",
+          sx: buttonStyle,
           onClick: function onClick() {
             onClickClear();
-          },
-          size: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null)));
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null));
       };
 
       if (isURL(localSearchString)) {
@@ -14165,13 +14287,10 @@
         return /*#__PURE__*/React__default["default"].createElement(ClearButton, null);
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-        title: "Search",
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        edge: "end",
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Search, null)));
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        tooltipTitle: "Search",
+        sx: buttonStyle
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Search, null));
     };
 
     /* *
@@ -15382,7 +15501,7 @@
         }));
       };
 
-      var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && service === 'all';
+      var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && (service === null || service === void 0 ? void 0 : service.serviceName) === 'all';
 
       var toggleChip = function toggleChip(service) {
         if (service === 'all') {
@@ -15572,8 +15691,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var styles$1 = {
       servicesContainer: {
@@ -15739,39 +15858,35 @@
             paddingRight: '70px'
           }
         }, serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
-          style: {
+          sx: {
             marginRight: '0px',
-            width: 100
+            width: 96,
+            button: {
+              marginLeft: 1
+            }
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          container: true
-        }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
+          container: true,
+          justifyContent: "left"
         }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           "data-testid": "updateServiceTooltip",
           title: updateServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "data-testid": "updateServiceButton",
           "aria-label": "Update layers from WMS service",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             layerSelectReloadService(serviceUrl);
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
-        }, userAddedService ? /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null))), userAddedService ? /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           title: editServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "edit service",
           "data-testid": "openEditServiceButton",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             setServicePopupInfo({
@@ -15785,10 +15900,9 @@
           title: showServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "show service",
           "data-testid": "openShowServiceButton",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             setServicePopupInfo({
@@ -15798,24 +15912,20 @@
               variant: 'show'
             });
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
-        }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null)))), userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           title: deleteServiceTitle(serviceHasActiveLayers),
           PopperProps: tooltipPopperProps,
           placement: tooltipPlacement(),
           "data-testid": "removeServiceTooltip"
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "data-testid": "removeServiceButton",
           "aria-label": "delete service",
-          size: "large",
           disabled: serviceHasActiveLayers,
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null)))))))));
+        }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null))))))));
       }));
     };
 
@@ -16240,8 +16350,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var FilterListItem = function FilterListItem(_a) {
@@ -16332,12 +16442,12 @@
             whiteSpace: 'nowrap',
             overflow: 'hidden'
           }
-        }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           style: {
-            backgroundColor: 'transparent'
+            backgroundColor: 'transparent',
+            width: 'auto'
           },
           edge: "end",
-          size: "small",
           onClick: function onClick() {
             return selectOnlyOne(filter.id);
           },
@@ -16654,8 +16764,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var style = {
       textField: {
@@ -16932,15 +17042,16 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "h5",
         component: "span"
-      }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         "aria-label": "close",
-        size: "small",
         onClick: closePopup,
         "data-testid": "closePopupButtonCross",
         sx: {
-          color: 'geowebColors.captions.captionDisabled.color',
           marginTop: 'auto',
-          marginBottom: 'auto'
+          marginBottom: 'auto',
+          '&.MuiButtonBase-root': {
+            color: 'geowebColors.greys.accessible'
+          }
         }
       }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))), isLoading && /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
@@ -16978,11 +17089,14 @@
           disableUnderline: isShowPopup,
           endAdornment: isShowPopup && /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
             position: "end"
-          }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
             "aria-label": "copy url",
             onClick: function onClick() {
               navigator.clipboard.writeText(serviceUrl);
               showSnackbar(COPY_URL_MESSAGE);
+            },
+            sx: {
+              marginTop: 0.5
             }
           }, /*#__PURE__*/React__namespace.createElement(theme.Copy, null)))
         },
@@ -17689,8 +17803,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_a) {
@@ -17731,16 +17845,16 @@
         key: layerId,
         item: true,
         xs: "auto"
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: tooltipTitle,
-        placement: "top"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: tooltipTitle,
         "data-testid": "syncButton",
-        size: "small",
         onClick: function onClick() {
           return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
+        },
+        sx: {
+          margin: '5px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(Icon, null))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
+      }, /*#__PURE__*/React__namespace.createElement(Icon, null)), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
         marks: marks,
         layerTitle: layerTitle,
         reverse: dimConfig ? dimConfig.reversed : false,
@@ -22098,7 +22212,6 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     /* Function which calculates the distance between two points */
-    // eslint-disable-next-line class-methods-use-this
 
     var distance = function distance(a, b) {
       return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
@@ -22177,9 +22290,10 @@
               return {
                 coordinateIndexInFeature: polygonIndex
               };
-            } // eslint-disable-next-line no-empty
-
-          } catch (e) {}
+            }
+          } catch (e) {
+            console.warn(e);
+          }
         }
       }
 
@@ -22205,9 +22319,10 @@
               return {
                 coordinateIndexInFeature: polygonIndex
               };
-            } // eslint-disable-next-line no-empty
-
-          } catch (e) {}
+            }
+          } catch (e) {
+            console.warn(e);
+          }
         }
       }
 
@@ -22435,7 +22550,7 @@
             if (feature.geometry) {
               var coordinates = feature.geometry.coordinates;
 
-              if (_this.snappedPolygonIndex > coordinates.length - 1) {
+              if (Number(_this.snappedPolygonIndex) > coordinates.length - 1) {
                 _this.snappedPolygonIndex = coordinates.length - 1;
               }
             }
@@ -25578,7 +25693,26 @@
 
       var dimensions = props.dimensions,
           mapId = props.mapId;
+      var wmjsMapRef = React__namespace.useRef(null);
+
+      var _d = reactResizeDetector.useResizeDetector(),
+          ref = _d.ref,
+          height = _d.height,
+          width = _d.width;
+
+      React__namespace.useEffect(function () {
+        if (wmjsMapRef.current && !!width && !!height) {
+          var _a = wmjsMapRef.current.getSize(),
+              mapHeight = _a.height,
+              mapWidth = _a.width;
+
+          if (width !== mapWidth || height !== mapHeight) {
+            wmjsMapRef.current.setSize(Math.ceil(width), Math.ceil(height));
+          }
+        }
+      }, [width, height]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        ref: ref,
         sx: {
           display: 'grid',
           width: '100%',
@@ -25611,7 +25745,10 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
         showLegend: false,
-        displayTimeInMap: false
+        displayTimeInMap: false,
+        onWMJSMount: function onWMJSMount(id) {
+          wmjsMapRef.current = getWMJSMapById(id);
+        }
       }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React__namespace.createElement(MapTime, {
         dimensions: dimensions
       }));
@@ -26725,8 +26862,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
@@ -26896,11 +27033,10 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1"
-        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
           sx: {
             "float": 'right'
           },
-          size: "small",
           "aria-label": "Open layer featureinfo in another page",
           onClick: function onClick() {
             window.open(url);
@@ -27300,8 +27436,7 @@
             syncGroupAddTarget({
               groupId: syncGroupsId,
               targetId: map.id,
-              linked: true,
-              origin: 'system'
+              linked: true
             });
           });
         });
@@ -27744,10 +27879,9 @@
         var isNotCheckedElseWhere = viewStateData.groups.every(function (group) {
           return !(group.id !== groupId && group.selected.includes(source.id));
         });
-        return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        return /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
           key: source.id,
           dense: true,
-          button: true,
           onClick: function onClick() {
             return handleToggle(source.id);
           },
@@ -27781,8 +27915,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var SyncGroupList = function SyncGroupList(_a) {
       var viewStateData = _a.viewStateData,
@@ -27810,9 +27944,8 @@
             paddingLeft: '15px',
             paddingTop: '10px'
           }
-        }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: index === 0 ? 'Add new group to list' : 'Remove group from list'
-        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+          tooltipTitle: index === 0 ? 'Add new group to list' : 'Remove group from list',
           style: {
             right: '10px'
           },
@@ -27821,9 +27954,8 @@
             return addNewGroup(groupObject.id);
           } : function () {
             return removeGroup(groupObject.id);
-          },
-          size: "large"
-        }, index === 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, null) : /*#__PURE__*/React__namespace.createElement(theme.Delete, null)))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
+          }
+        }, index === 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, null) : /*#__PURE__*/React__namespace.createElement(theme.Delete, null))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
           viewStateData: viewStateData,
           groupId: groupObject.id,
           selected: groupObject.selected,
@@ -27933,7 +28065,8 @@
             syncGroupAddGroup({
               groupId: String(groupId + Math.floor(Math.random() * 1000)),
               title: title,
-              type: syncType
+              type: syncType,
+              origin: 'user'
             });
           }
         });
@@ -28211,8 +28344,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var SnackbarWrapper = function SnackbarWrapper(_a) {
       var children = _a.children,
@@ -28230,14 +28363,19 @@
         ClickAwayListenerProps: {
           mouseEvent: false
         },
-        action: /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        action: /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "close",
           "data-testid": "snackbarCloseButton",
           onClick: onCloseSnackbar,
+          size: "large",
           sx: {
-            color: 'geowebColors.snackbar.action',
-            '&:hover': {
-              backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+            '&.MuiButtonBase-root': {
+              borderRadius: 20,
+              color: 'geowebColors.snackbar.action',
+              '&:hover': {
+                color: 'geowebColors.snackbar.action',
+                backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+              }
             }
           }
         }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))
@@ -28352,6 +28490,7 @@
      * */
     // stores navigate hook method to object, so it can be used outside components
     var historyDict = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       navigate: null
     };
 
@@ -28450,8 +28589,6 @@
      * */
     var NavigateSetter = function NavigateSetter() {
       // stores navigate hook method to historyDict, so it can be used outside components
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       historyDict.navigate = reactRouterDom.useNavigate();
       return null;
     };