@opengeoweb/core 9.14.0 → 9.16.0

package/index.esm.js

@@ -1,24 +1,44 @@
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
-import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, ListItemIcon, Checkbox } from '@mui/material';
-import { CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, renderCounter, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, dateUtils, withEggs } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { LayerSelectButtonConnect, getUserAddedServices, layerSelectConfig } from '@opengeoweb/layer-select';
+import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, ListItemIcon, Checkbox } from '@mui/material';
+import { CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs } from '@opengeoweb/shared';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, uiActions, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, IS_LEGEND_OPEN_BY_DEFAULT, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
-import { LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, IS_LEGEND_OPEN_BY_DEFAULT, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
+import { LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers, WEBMAP_REACT_NAMESPACE, webmapReactTranslations } from '@opengeoweb/webmap-react';
 import { webmapUtils, getCapabilities, WMGetServiceFromStore, LayerType, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, WMLayer } from '@opengeoweb/webmap';
 import { Box as Box$1 } from '@mui/system';
-import { defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, NowButton, handleSetNowEvent, AnimationLengthButton, AnimationLength, TimeSpanButton, marks as marks$1, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, AutoUpdateButton, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
+import { defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, marks as marks$1, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
 import _, { isEqual, range } from 'lodash';
+import { LayerSelectButtonConnect, LayerSelectConnect, layerSelectConfig } from '@opengeoweb/layer-select';
 import axios from 'axios';
-import { useDebounce } from '@opengeoweb/api';
 import * as DOMPurify from 'dompurify';
+import i18n from 'i18next';
+import { initReactI18next, I18nextProvider } from 'react-i18next';
 import { SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 
+var en = {
+	core: "Core"
+};
+var fi = {
+	core: "Core"
+};
+var no = {
+	core: "Core"
+};
+var nl = {
+	core: "Core"
+};
+var coreTranslations = {
+	en: en,
+	fi: fi,
+	no: no,
+	nl: nl
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var fails$n = function (exec) {
@@ -87,17 +107,17 @@ var $TypeError$c = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
-var requireObjectCoercible$7 = function (it) {
+var requireObjectCoercible$8 = function (it) {
   if (isNullOrUndefined$3(it)) throw new $TypeError$c("Can't call method on " + it);
   return it;
 };
 
 // toObject with fallback for non-array-like ES3 strings
 var IndexedObject$2 = indexedObject;
-var requireObjectCoercible$6 = requireObjectCoercible$7;
+var requireObjectCoercible$7 = requireObjectCoercible$8;
 
 var toIndexedObject$5 = function (it) {
-  return IndexedObject$2(requireObjectCoercible$6(it));
+  return IndexedObject$2(requireObjectCoercible$7(it));
 };
 
 var check = function (it) {
@@ -105,7 +125,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$h =
+var global$g =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -116,49 +136,49 @@ var global$h =
   // eslint-disable-next-line no-new-func -- fallback
   (function () { return this; })() || Function('return this')();
 
-var shared$4 = {exports: {}};
+var sharedStore = {exports: {}};
 
-var global$g = global$h;
+var global$f = global$g;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$6 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$6(global$g, key, { value: value, configurable: true, writable: true });
+    defineProperty$6(global$f, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$g[key] = value;
+    global$f[key] = value;
   } return value;
 };
 
-var global$f = global$h;
+var globalThis$1 = global$g;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = global$f[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty$2(SHARED, {});
 
-var sharedStore = store$3;
-
-var store$2 = sharedStore;
-
-(shared$4.exports = function (key, value) {
-  return store$2[key] || (store$2[key] = value !== undefined ? value : {});
-})('versions', []).push({
-  version: '3.35.1',
+(store$3.versions || (store$3.versions = [])).push({
+  version: '3.36.1',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.36.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
-var requireObjectCoercible$5 = requireObjectCoercible$7;
+var store$2 = sharedStore.exports;
+
+var shared$4 = function (key, value) {
+  return store$2[key] || (store$2[key] = value || {});
+};
+
+var requireObjectCoercible$6 = requireObjectCoercible$8;
 
 var $Object$3 = Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
 var toObject$7 = function (argument) {
-  return $Object$3(requireObjectCoercible$5(argument));
+  return $Object$3(requireObjectCoercible$6(argument));
 };
 
 var uncurryThis$i = functionUncurryThis;
@@ -185,7 +205,7 @@ var uid$2 = function (key) {
 
 var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
-var global$e = global$h;
+var global$e = global$g;
 var userAgent$2 = engineUserAgent;
 
 var process = global$e.process;
@@ -216,7 +236,7 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 var V8_VERSION = engineV8Version;
 var fails$k = fails$n;
-var global$d = global$h;
+var global$d = global$g;
 
 var $String$5 = global$d.String;
 
@@ -239,8 +259,8 @@ var useSymbolAsUid = NATIVE_SYMBOL$1
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
-var global$c = global$h;
-var shared$3 = shared$4.exports;
+var global$c = global$g;
+var shared$3 = shared$4;
 var hasOwn$a = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL = symbolConstructorDetection;
@@ -272,18 +292,18 @@ var isCallable$i = typeof documentAll == 'undefined' && documentAll !== undefine
 
 var isCallable$h = isCallable$i;
 
-var isObject$a = function (it) {
+var isObject$b = function (it) {
   return typeof it == 'object' ? it !== null : isCallable$h(it);
 };
 
-var isObject$9 = isObject$a;
+var isObject$a = isObject$b;
 
 var $String$4 = String;
 var $TypeError$b = TypeError;
 
 // `Assert: Type(argument) is Object`
-var anObject$b = function (argument) {
-  if (isObject$9(argument)) return argument;
+var anObject$a = function (argument) {
+  if (isObject$a(argument)) return argument;
   throw new $TypeError$b($String$4(argument) + ' is not an object');
 };
 
@@ -312,12 +332,12 @@ var v8PrototypeDefineBug = DESCRIPTORS$b && fails$i(function () {
 
 var objectDefineProperty = {};
 
-var global$b = global$h;
-var isObject$8 = isObject$a;
+var global$b = global$g;
+var isObject$9 = isObject$b;
 
 var document$1 = global$b.document;
 // typeof document.createElement is 'object' in old IE
-var EXISTS$1 = isObject$8(document$1) && isObject$8(document$1.createElement);
+var EXISTS$1 = isObject$9(document$1) && isObject$9(document$1.createElement);
 
 var documentCreateElement$2 = function (it) {
   return EXISTS$1 ? document$1.createElement(it) : {};
@@ -343,7 +363,7 @@ var functionCall = NATIVE_BIND$1 ? call$d.bind(call$d) : function () {
   return call$d.apply(call$d, arguments);
 };
 
-var global$a = global$h;
+var global$a = global$g;
 var isCallable$g = isCallable$i;
 
 var aFunction = function (argument) {
@@ -405,7 +425,7 @@ var getMethod$3 = function (V, P) {
 
 var call$c = functionCall;
 var isCallable$d = isCallable$i;
-var isObject$7 = isObject$a;
+var isObject$8 = isObject$b;
 
 var $TypeError$9 = TypeError;
 
@@ -413,14 +433,14 @@ var $TypeError$9 = TypeError;
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
 var ordinaryToPrimitive$1 = function (input, pref) {
   var fn, val;
-  if (pref === 'string' && isCallable$d(fn = input.toString) && !isObject$7(val = call$c(fn, input))) return val;
-  if (isCallable$d(fn = input.valueOf) && !isObject$7(val = call$c(fn, input))) return val;
-  if (pref !== 'string' && isCallable$d(fn = input.toString) && !isObject$7(val = call$c(fn, input))) return val;
+  if (pref === 'string' && isCallable$d(fn = input.toString) && !isObject$8(val = call$c(fn, input))) return val;
+  if (isCallable$d(fn = input.valueOf) && !isObject$8(val = call$c(fn, input))) return val;
+  if (pref !== 'string' && isCallable$d(fn = input.toString) && !isObject$8(val = call$c(fn, input))) return val;
   throw new $TypeError$9("Can't convert object to primitive value");
 };
 
 var call$b = functionCall;
-var isObject$6 = isObject$a;
+var isObject$7 = isObject$b;
 var isSymbol$1 = isSymbol$2;
 var getMethod$2 = getMethod$3;
 var ordinaryToPrimitive = ordinaryToPrimitive$1;
@@ -432,13 +452,13 @@ var TO_PRIMITIVE = wellKnownSymbol$b('toPrimitive');
 // `ToPrimitive` abstract operation
 // https://tc39.es/ecma262/#sec-toprimitive
 var toPrimitive$1 = function (input, pref) {
-  if (!isObject$6(input) || isSymbol$1(input)) return input;
+  if (!isObject$7(input) || isSymbol$1(input)) return input;
   var exoticToPrim = getMethod$2(input, TO_PRIMITIVE);
   var result;
   if (exoticToPrim) {
     if (pref === undefined) pref = 'default';
     result = call$b(exoticToPrim, input, pref);
-    if (!isObject$6(result) || isSymbol$1(result)) return result;
+    if (!isObject$7(result) || isSymbol$1(result)) return result;
     throw new $TypeError$8("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
@@ -458,7 +478,7 @@ var toPropertyKey$2 = function (argument) {
 var DESCRIPTORS$9 = descriptors;
 var IE8_DOM_DEFINE$1 = ie8DomDefine;
 var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
-var anObject$a = anObject$b;
+var anObject$9 = anObject$a;
 var toPropertyKey$1 = toPropertyKey$2;
 
 var $TypeError$7 = TypeError;
@@ -473,9 +493,9 @@ var WRITABLE = 'writable';
 // `Object.defineProperty` method
 // https://tc39.es/ecma262/#sec-object.defineproperty
 objectDefineProperty.f = DESCRIPTORS$9 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function defineProperty(O, P, Attributes) {
-  anObject$a(O);
+  anObject$9(O);
   P = toPropertyKey$1(P);
-  anObject$a(Attributes);
+  anObject$9(Attributes);
   if (typeof O === 'function' && P === 'prototype' && 'value' in Attributes && WRITABLE in Attributes && !Attributes[WRITABLE]) {
     var current = $getOwnPropertyDescriptor$1(O, P);
     if (current && current[WRITABLE]) {
@@ -488,9 +508,9 @@ objectDefineProperty.f = DESCRIPTORS$9 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
     }
   } return $defineProperty(O, P, Attributes);
 } : $defineProperty : function defineProperty(O, P, Attributes) {
-  anObject$a(O);
+  anObject$9(O);
   P = toPropertyKey$1(P);
-  anObject$a(Attributes);
+  anObject$9(Attributes);
   if (IE8_DOM_DEFINE$1) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
@@ -561,6 +581,7 @@ var createMethod$3 = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$4($this);
     var length = lengthOfArrayLike$3(O);
+    if (length === 0) return !IS_INCLUDES && -1;
     var index = toAbsoluteIndex(fromIndex, length);
     var value;
     // Array#includes uses SameValueZero equality algorithm
@@ -632,7 +653,7 @@ var objectKeys$2 = Object.keys || function keys(O) {
 var DESCRIPTORS$8 = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$3 = objectDefineProperty;
-var anObject$9 = anObject$b;
+var anObject$8 = anObject$a;
 var toIndexedObject$2 = toIndexedObject$5;
 var objectKeys$1 = objectKeys$2;
 
@@ -640,7 +661,7 @@ var objectKeys$1 = objectKeys$2;
 // https://tc39.es/ecma262/#sec-object.defineproperties
 // eslint-disable-next-line es/no-object-defineproperties -- safe
 objectDefineProperties.f = DESCRIPTORS$8 && !V8_PROTOTYPE_DEFINE_BUG ? Object.defineProperties : function defineProperties(O, Properties) {
-  anObject$9(O);
+  anObject$8(O);
   var props = toIndexedObject$2(Properties);
   var keys = objectKeys$1(Properties);
   var length = keys.length;
@@ -654,7 +675,7 @@ var getBuiltIn$2 = getBuiltIn$4;
 
 var html$1 = getBuiltIn$2('document', 'documentElement');
 
-var shared$2 = shared$4.exports;
+var shared$2 = shared$4;
 var uid = uid$2;
 
 var keys = shared$2('keys');
@@ -664,7 +685,7 @@ var sharedKey$3 = function (key) {
 };
 
 /* global ActiveXObject -- old IE, WSH */
-var anObject$8 = anObject$b;
+var anObject$7 = anObject$a;
 var definePropertiesModule = objectDefineProperties;
 var enumBugKeys$1 = enumBugKeys$3;
 var hiddenKeys$2 = hiddenKeys$4;
@@ -738,7 +759,7 @@ hiddenKeys$2[IE_PROTO$1] = true;
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
-    EmptyConstructor[PROTOTYPE] = anObject$8(O);
+    EmptyConstructor[PROTOTYPE] = anObject$7(O);
     result = new EmptyConstructor();
     EmptyConstructor[PROTOTYPE] = null;
     // add "__proto__" for Object.getPrototypeOf polyfill
@@ -770,7 +791,7 @@ var addToUnscopables$2 = function (key) {
 
 var iterators = {};
 
-var global$9 = global$h;
+var global$9 = global$g;
 var isCallable$c = isCallable$i;
 
 var WeakMap$1 = global$9.WeakMap;
@@ -798,11 +819,11 @@ var createNonEnumerableProperty$8 = DESCRIPTORS$7 ? function (object, key, value
 };
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$8 = global$h;
-var isObject$5 = isObject$a;
+var global$8 = global$g;
+var isObject$6 = isObject$b;
 var createNonEnumerableProperty$7 = createNonEnumerableProperty$8;
 var hasOwn$8 = hasOwnProperty_1;
-var shared$1 = sharedStore;
+var shared$1 = sharedStore.exports;
 var sharedKey$1 = sharedKey$3;
 var hiddenKeys$1 = hiddenKeys$4;
 
@@ -818,7 +839,7 @@ var enforce = function (it) {
 var getterFor = function (TYPE) {
   return function (it) {
     var state;
-    if (!isObject$5(it) || (state = get(it)).type !== TYPE) {
+    if (!isObject$6(it) || (state = get(it)).type !== TYPE) {
       throw new TypeError$1('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
@@ -931,7 +952,7 @@ var functionName = {
 
 var uncurryThis$e = functionUncurryThis;
 var isCallable$b = isCallable$i;
-var store = sharedStore;
+var store = sharedStore.exports;
 
 var functionToString = uncurryThis$e(Function.toString);
 
@@ -1050,13 +1071,13 @@ var getBuiltIn$1 = getBuiltIn$4;
 var uncurryThis$c = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
-var anObject$7 = anObject$b;
+var anObject$6 = anObject$a;
 
 var concat$2 = uncurryThis$c([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$1 = getBuiltIn$1('Reflect', 'ownKeys') || function ownKeys(it) {
-  var keys = getOwnPropertyNamesModule.f(anObject$7(it));
+  var keys = getOwnPropertyNamesModule.f(anObject$6(it));
   var getOwnPropertySymbols = getOwnPropertySymbolsModule$1.f;
   return getOwnPropertySymbols ? concat$2(keys, getOwnPropertySymbols(it)) : keys;
 };
@@ -1101,7 +1122,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
 
 var isForced_1 = isForced$1;
 
-var global$7 = global$h;
+var global$7 = global$g;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$6 = createNonEnumerableProperty$8;
 var defineBuiltIn$4 = defineBuiltIn$5;
@@ -1189,7 +1210,7 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf :
 
 var fails$d = fails$n;
 var isCallable$6 = isCallable$i;
-var isObject$4 = isObject$a;
+var isObject$5 = isObject$b;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$3 = defineBuiltIn$5;
 var wellKnownSymbol$9 = wellKnownSymbol$c;
@@ -1212,7 +1233,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$4(IteratorPrototype$2) || fails$d(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject$5(IteratorPrototype$2) || fails$d(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
@@ -1272,10 +1293,10 @@ var functionUncurryThisAccessor = function (object, key, method) {
   } catch (error) { /* empty */ }
 };
 
-var isObject$3 = isObject$a;
+var isObject$4 = isObject$b;
 
 var isPossiblePrototype$1 = function (argument) {
-  return isObject$3(argument) || argument === null;
+  return isObject$4(argument) || argument === null;
 };
 
 var isPossiblePrototype = isPossiblePrototype$1;
@@ -1290,7 +1311,8 @@ var aPossiblePrototype$1 = function (argument) {
 
 /* eslint-disable no-proto -- safe */
 var uncurryThisAccessor = functionUncurryThisAccessor;
-var anObject$6 = anObject$b;
+var isObject$3 = isObject$b;
+var requireObjectCoercible$5 = requireObjectCoercible$8;
 var aPossiblePrototype = aPossiblePrototype$1;
 
 // `Object.setPrototypeOf` method
@@ -1307,8 +1329,9 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
     CORRECT_SETTER = test instanceof Array;
   } catch (error) { /* empty */ }
   return function setPrototypeOf(O, proto) {
-    anObject$6(O);
+    requireObjectCoercible$5(O);
     aPossiblePrototype(proto);
+    if (!isObject$3(O)) return O;
     if (CORRECT_SETTER) setter(O, proto);
     else O.__proto__ = proto;
     return O;
@@ -1593,7 +1616,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$6 = global$h;
+var global$6 = global$g;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
@@ -1892,7 +1915,7 @@ const layerManagerStyle = {
       }
     },
     '.header-layermanager': {
-      '.header-left, .header-title': {
+      '.header-left': {
         display: 'none'
       },
       '&>div': {
@@ -1982,6 +2005,43 @@ const returnCorrectSize = sizeResult => {
   return sizeSmall;
 };
 
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+const style = {
+  width: 'auto !important',
+  height: 'auto !important',
+  padding: 0
+};
+const LayerSelectButton = ({
+  tooltipTitle: _tooltipTitle = 'Open the layer selector',
+  icon: _icon = /*#__PURE__*/React.createElement(LayersAdd, {
+    "data-testid": "layerSelectButtonConnectIcon"
+  }),
+  onClick: _onClick = () => {}
+}) => {
+  return /*#__PURE__*/React.createElement(CustomIconButton, {
+    onClick: _onClick,
+    sx: style,
+    id: "layerSelectButton",
+    "data-testid": "layerSelectButton",
+    tooltipTitle: _tooltipTitle
+  }, _icon);
+};
+
 const styles$3 = {
   text: theme => Object.assign({
     paddingLeft: '10px',
@@ -1993,13 +2053,11 @@ const styles$3 = {
 const DescriptionRow = _a => {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   var {
-      mapId,
       mapPresetsModule,
-      source = 'app',
       settings,
-      isMultiMap
+      addLayerComponent
     } = _a,
-    gridProps = __rest(_a, ["mapId", "mapPresetsModule", "source", "settings", "isMultiMap"]);
+    gridProps = __rest(_a, ["mapPresetsModule", "settings", "addLayerComponent"]);
   const [mapPresetsModuleInline] = React.useState(mapPresetsModule ? Object.assign(Object.assign({}, mapPresetsModule), {
     props: Object.assign(Object.assign({}, mapPresetsModule.props), {
       id: 'mappresets-menubuttonInline'
@@ -2022,13 +2080,10 @@ const DescriptionRow = _a => {
       justifyContent: 'center',
       paddingRight: '6px'
     })
-  }, /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
-    mapId: mapId,
-    source: source,
+  }, addLayerComponent || ( /*#__PURE__*/React.createElement(LayerSelectButton, {
     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,
-    isMultiMap: isMultiMap
-  })), /*#__PURE__*/React.createElement(Grid, {
+    icon: (_c = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _c === void 0 ? void 0 : _c.icon
+  }))), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(Box, {
     className: `header-layer ${hasMapPresetsModule ? 'mappresetsModule-enabled' : ''}`,
@@ -2090,7 +2145,7 @@ $$9({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables('includes');
 
-var isObject$2 = isObject$a;
+var isObject$2 = isObject$b;
 var classof$5 = classofRaw$1;
 var wellKnownSymbol$5 = wellKnownSymbol$c;
 
@@ -2180,7 +2235,7 @@ var correctIsRegexpLogic = function (METHOD_NAME) {
 var $$8 = _export;
 var uncurryThis$9 = functionUncurryThis;
 var notARegExp = notARegexp;
-var requireObjectCoercible$4 = requireObjectCoercible$7;
+var requireObjectCoercible$4 = requireObjectCoercible$8;
 var toString$8 = toString$9;
 var correctIsRegExpLogic = correctIsRegexpLogic;
 
@@ -2235,7 +2290,8 @@ const DimensionSelectValue = ({
   valueMappings,
   hideLatestDuplicate,
   setUseLatestReferenceTime,
-  useLatestReferenceTime
+  useLatestReferenceTime,
+  skipLocalStyling
 }) => {
   var _a;
   const dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
@@ -2281,7 +2337,8 @@ const DimensionSelectValue = ({
     style: {
       maxWidth: '50%'
     },
-    IconComponent: icon
+    IconComponent: icon,
+    skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
   }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(dimensionValue => {
@@ -2320,7 +2377,8 @@ const DimensionSelectName = ({
   nameMappings,
   tooltip,
   isEnabled,
-  dimensionNames
+  dimensionNames,
+  skipLocalStyling
 }) => {
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
     disableUnderline: true,
@@ -2344,7 +2402,8 @@ const DimensionSelectName = ({
     style: {
       maxWidth: '50%'
     },
-    IconComponent: icon
+    IconComponent: icon,
+    skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
   }, "Dimension"), dimensionNames.map(name => ( /*#__PURE__*/React__default.createElement(MenuItem, {
@@ -2366,7 +2425,8 @@ const DimensionSelect = ({
   setUseLatestReferenceTime,
   useLatestReferenceTime,
   SingleValueComponent,
-  hideLatestDuplicate
+  hideLatestDuplicate,
+  skipLocalStyling
 }) => {
   var _a, _b, _c, _d, _e, _f;
   const [selectedDimensionName, setSelectedDimensionName] = useState((_a = _layerDimensions === null || _layerDimensions === void 0 ? void 0 : _layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name);
@@ -2407,7 +2467,8 @@ const DimensionSelect = ({
     tooltip: nameTooltip,
     isEnabled: _isEnabled,
     icon: icon,
-    nameMappings: nameMappings
+    nameMappings: nameMappings,
+    skipLocalStyling: skipLocalStyling
   })), collapseValueDropdown ? ( /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({}, _layerDimensions[0], {
     nameMappings: nameMappings,
     valueMappings: valueMappings,
@@ -2421,7 +2482,8 @@ const DimensionSelect = ({
     icon: icon,
     valueMappings: valueMappings,
     setUseLatestReferenceTime: setUseLatestReferenceTime,
-    useLatestReferenceTime: useLatestReferenceTime
+    useLatestReferenceTime: useLatestReferenceTime,
+    skipLocalStyling: skipLocalStyling
   }))));
 };
 
@@ -2450,7 +2512,8 @@ const RenderLayers = ({
   layerName,
   layers: _layers = [],
   isEnabled: _isEnabled = true,
-  tooltipPrefix: _tooltipPrefix = 'Layer: '
+  tooltipPrefix: _tooltipPrefix = 'Layer: ',
+  skipLocalStyling
 }) => {
   var _a;
   if (!_layers || !_layers.length) {
@@ -2497,6 +2560,7 @@ const RenderLayers = ({
     onChange: selectLayer,
     onChangeMouseWheel: e => onChangeLayerName(e.value),
     requiresCtrlToChange: true,
+    skipLocalStyling: skipLocalStyling,
     renderValue: value => extendedLayers.find(layer => layer.name === value).title
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
@@ -2785,7 +2849,8 @@ const RenderStyles = ({
   onChangeLayerStyle,
   isEnabled: _isEnabled = true,
   icon,
-  tooltipPrefix: _tooltipPrefix = 'Style: '
+  tooltipPrefix: _tooltipPrefix = 'Style: ',
+  skipLocalStyling
 }) => {
   var _a;
   const styles = [{
@@ -2822,7 +2887,8 @@ const RenderStyles = ({
     onChange: selectStyle,
     onChangeMouseWheel: e => onChangeLayerStyle(e.value),
     requiresCtrlToChange: true,
-    IconComponent: icon
+    IconComponent: icon,
+    skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, "Style"), styles.map(styleFromlayer => ( /*#__PURE__*/React.createElement(MenuItem, {
@@ -2951,7 +3017,7 @@ function getIcon(isActive, isEnabled, current) {
   });
 }
 
-var anObject$5 = anObject$b;
+var anObject$5 = anObject$a;
 
 // `RegExp.prototype.flags` getter implementation
 // https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
@@ -2984,7 +3050,7 @@ var regexpGetFlags = function (R) {
 
 var PROPER_FUNCTION_NAME$1 = functionName.PROPER;
 var defineBuiltIn$1 = defineBuiltIn$5;
-var anObject$4 = anObject$b;
+var anObject$4 = anObject$a;
 var $toString = toString$9;
 var fails$9 = fails$n;
 var getRegExpFlags = regexpGetFlags;
@@ -3044,7 +3110,8 @@ const AcceptanceTime = ({
   isEnabled: _isEnabled = true,
   acceptanceTimeInMinutes,
   icon,
-  tooltipTitle
+  tooltipTitle,
+  skipLocalStyling
 }) => {
   const onChange = acceptanceTimeRaw => {
     const acceptanceTime = acceptanceTimeRaw === 'off' ? undefined : Number(acceptanceTimeRaw);
@@ -3065,7 +3132,8 @@ const AcceptanceTime = ({
     list: acceptanceTimesValues,
     currentIndex: acceptanceTimes.findIndex(time => layerAcceptanceTime === time.value),
     IconComponent: icon,
-    "data-testid": "acceptanceTimeButton"
+    "data-testid": "acceptanceTimeButton",
+    skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
   }, "Acc Time"), acceptanceTimes.map(accTime => ( /*#__PURE__*/React__default.createElement(MenuItem, {
@@ -3242,22 +3310,6 @@ const useLoadDurationLabel = (mapId, layerId) => {
   return React.useSyncExternalStore(subscribe, getSnapshot);
 };
 
-/* *
- * 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)
- * */
 const LeftButtons = ({
   size,
   dragHandle,
@@ -3319,7 +3371,7 @@ const Acceptance = ({
   acceptanceTimeInMinutes: acceptanceTime,
   onChangeAcceptanceTime: onChangeAcceptanceTime
 }));
-const LayerRow = ({
+const LayerRowUnstyled = ({
   layerId,
   layer,
   layerName,
@@ -3350,7 +3402,8 @@ const LayerRow = ({
   dragHandle,
   layerAcceptanceTimeLayout,
   layerMissingDataLayout,
-  layerLoadDurationLayout
+  layerLoadDurationLayout,
+  className
 }) => {
   const onClickRow = () => _onLayerRowClick(layerId);
   const changeEnable = event => {
@@ -3382,31 +3435,60 @@ const LayerRow = ({
     mapId,
     layerId: layerId
   });
-  renderCounter.count(LayerRow.name);
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    "data-testid": `layerRow-${layerId}`,
-    className: "layerRow",
-    sx: {
-      backgroundColor: _isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.fill' : 'geowebColors.layerManager.tableRowDisabledCardContainer.fill',
-      border: 1,
-      borderColor: _isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.borderColor' : 'geowebColors.layerManager.tableRowDisabledCardContainer.borderColor',
-      borderRadius: 1,
-      marginBottom: 0.5,
-      minHeight: '34px',
-      '&.sortable-chosen': {
-        boxShadow: 1
-      },
-      '&.sortable-ghost': {
-        opacity: 0.5
-      }
-    },
-    alignItems: "center",
-    role: "listitem"
-  }, /*#__PURE__*/React__default.createElement(Accordion, {
-    LeftButtons: /*#__PURE__*/React__default.createElement(LeftButtons, {
-      size: "-medium",
+  renderCounter.count(LayerRowUnstyled.name);
+  return (
+    /*#__PURE__*/
+    // className needed for styled() utility
+    React__default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      "data-testid": `layerRow-${layerId}`,
+      className: "layerRow",
+      alignItems: "center",
+      role: "listitem"
+    }, /*#__PURE__*/React__default.createElement(Accordion, {
+      LeftButtons: /*#__PURE__*/React__default.createElement(LeftButtons, {
+        size: "-medium",
+        dragHandle: dragHandle,
+        layer: layer,
+        layerMissingDataLayout: layerMissingDataLayout,
+        layerEnableLayout: layerEnableLayout,
+        isEnabled: _isEnabled,
+        disableActivateLayer: disableActivateLayer,
+        layerActiveLayout: layerActiveLayout,
+        onChangeEnable: changeEnable,
+        onChangeActive: onClickRow
+      }),
+      layerName: layerName,
+      Styles: layerStylesLayout || ( /*#__PURE__*/React__default.createElement(Styles, {
+        style: layer.style,
+        onChangeStyle: changeStyle
+      })),
+      Opacity: layerOpacityLayout || ( /*#__PURE__*/React__default.createElement(Opacity, {
+        opacity: layer.opacity,
+        onChangeOpacity: changeOpacity
+      })),
+      Acceptance: layerAcceptanceTimeLayout || ( /*#__PURE__*/React__default.createElement(Acceptance, {
+        acceptanceTime: layer.acceptanceTimeInMinutes,
+        onChangeAcceptanceTime: changeAcceptanceTime
+      })),
+      LoadDuration: layerLoadDurationLayout || ( /*#__PURE__*/React__default.createElement(LoadDuration, {
+        layerId: layerId,
+        mapId: mapId
+      })),
+      ShowLayerInfo: layerShowLayerInfoLayout || ( /*#__PURE__*/React__default.createElement(ShowLayerInfo, {
+        onClick: () => {}
+      })),
+      DeleteLayer: layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+        onClick: deleteLayer
+      })
+    }), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column1,
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(LeftButtons, {
       dragHandle: dragHandle,
       layer: layer,
       layerMissingDataLayout: layerMissingDataLayout,
@@ -3416,118 +3498,97 @@ const LayerRow = ({
       layerActiveLayout: layerActiveLayout,
       onChangeEnable: changeEnable,
       onChangeActive: onClickRow
-    }),
-    layerName: layerName,
-    Styles: layerStylesLayout || ( /*#__PURE__*/React__default.createElement(Styles, {
+    })), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column2
+    }, layerServicesLayout || ( /*#__PURE__*/React__default.createElement(RenderLayers, {
+      layerName: layer.name,
+      layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
+      onChangeLayerName: name => {
+        onLayerChangeName({
+          layerId: layer.id,
+          name
+        });
+      }
+    }))), _isLayerMissing ? ( /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column7
+    }, /*#__PURE__*/React__default.createElement(AlertBanner, {
+      title: "This layer could not be loaded: does not exist on the server.",
+      isCompact: true
+    }))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column3
+    }, layerStylesLayout || ( /*#__PURE__*/React__default.createElement(Styles, {
       style: layer.style,
       onChangeStyle: changeStyle
-    })),
-    Opacity: layerOpacityLayout || ( /*#__PURE__*/React__default.createElement(Opacity, {
+    }))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column4
+    }, layerOpacityLayout || ( /*#__PURE__*/React__default.createElement(Opacity, {
       opacity: layer.opacity,
       onChangeOpacity: changeOpacity
-    })),
-    Acceptance: layerAcceptanceTimeLayout || ( /*#__PURE__*/React__default.createElement(Acceptance, {
+    }))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column5
+    }, layerDimensionLayout || ( /*#__PURE__*/React__default.createElement(DimensionSelect, {
+      layerDimensions: layerUtils.filterNonTimeDimensions(layer.dimensions),
+      onLayerChangeDimension: (dimensionName, dimensionValue) => {
+        const dimension = {
+          name: dimensionName,
+          currentValue: dimensionValue
+        };
+        onLayerChangeDimension({
+          origin: 'layerrow',
+          layerId: layerId,
+          dimension
+        });
+      }
+    }))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.acceptanceTime
+    }, layerAcceptanceTimeLayout || ( /*#__PURE__*/React__default.createElement(Acceptance, {
       acceptanceTime: layer.acceptanceTimeInMinutes,
       onChangeAcceptanceTime: changeAcceptanceTime
-    })),
-    LoadDuration: layerLoadDurationLayout || ( /*#__PURE__*/React__default.createElement(LoadDuration, {
+    }))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      display: "flex",
+      justifyContent: "flex-end",
+      className: columnClasses.loadDuration
+    }, layerLoadDurationLayout || ( /*#__PURE__*/React__default.createElement(LoadDuration, {
       layerId: layerId,
       mapId: mapId
-    })),
-    ShowLayerInfo: layerShowLayerInfoLayout || /*#__PURE__*/React__default.createElement(ShowLayerInfo, {
+    }))))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: columnClasses.column6,
+      alignItems: "center"
+    }, layerShowLayerInfoLayout || ( /*#__PURE__*/React__default.createElement(ShowLayerInfo, {
       onClick: () => {}
-    }),
-    DeleteLayer: layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
+    })), layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
       onClick: deleteLayer
-    })
-  }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column1,
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(LeftButtons, {
-    dragHandle: dragHandle,
-    layer: layer,
-    layerMissingDataLayout: layerMissingDataLayout,
-    layerEnableLayout: layerEnableLayout,
-    isEnabled: _isEnabled,
-    disableActivateLayer: disableActivateLayer,
-    layerActiveLayout: layerActiveLayout,
-    onChangeEnable: changeEnable,
-    onChangeActive: onClickRow
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column2
-  }, layerServicesLayout || ( /*#__PURE__*/React__default.createElement(RenderLayers, {
-    layerName: layer.name,
-    layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
-    onChangeLayerName: name => {
-      onLayerChangeName({
-        layerId: layer.id,
-        name
-      });
-    }
-  }))), _isLayerMissing ? ( /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column7
-  }, /*#__PURE__*/React__default.createElement(AlertBanner, {
-    title: "This layer could not be loaded: does not exist on the server.",
-    isCompact: true
-  }))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column3
-  }, layerStylesLayout || ( /*#__PURE__*/React__default.createElement(Styles, {
-    style: layer.style,
-    onChangeStyle: changeStyle
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column4
-  }, layerOpacityLayout || ( /*#__PURE__*/React__default.createElement(Opacity, {
-    opacity: layer.opacity,
-    onChangeOpacity: changeOpacity
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column5
-  }, layerDimensionLayout || ( /*#__PURE__*/React__default.createElement(DimensionSelect, {
-    layerDimensions: layerUtils.filterNonTimeDimensions(layer.dimensions),
-    onLayerChangeDimension: (dimensionName, dimensionValue) => {
-      const dimension = {
-        name: dimensionName,
-        currentValue: dimensionValue
-      };
-      onLayerChangeDimension({
-        origin: 'layerrow',
-        layerId: layerId,
-        dimension
-      });
-    }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.acceptanceTime
-  }, layerAcceptanceTimeLayout || ( /*#__PURE__*/React__default.createElement(Acceptance, {
-    acceptanceTime: layer.acceptanceTimeInMinutes,
-    onChangeAcceptanceTime: changeAcceptanceTime
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    display: "flex",
-    justifyContent: "flex-end",
-    className: columnClasses.loadDuration
-  }, layerLoadDurationLayout || ( /*#__PURE__*/React__default.createElement(LoadDuration, {
-    layerId: layerId,
-    mapId: mapId
-  }))))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: columnClasses.column6,
-    alignItems: "center"
-  }, layerShowLayerInfoLayout || /*#__PURE__*/React__default.createElement(ShowLayerInfo, {
-    onClick: () => {}
-  }), layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteLayer, {
-    onClick: deleteLayer
-  }), layerMenuLayout || ( /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
-    mapId: mapId,
-    layerId: layerId,
-    onLayerDuplicate: onLayerDuplicate
-  }))));
+    }), layerMenuLayout || ( /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
+      mapId: mapId,
+      layerId: layerId,
+      onLayerDuplicate: onLayerDuplicate
+    })))))
+  );
 };
+const LayerRow = styled(LayerRowUnstyled)(({
+  theme,
+  isEnabled: _isEnabled2 = true
+}) => {
+  return {
+    '& .MuiInputBase-root': Object.assign({}, tooltipContainerStyles(theme, _isEnabled2)),
+    '& .layerRow': {
+      backgroundColor: _isEnabled2 ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.fill : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.fill,
+      border: '1px solid',
+      borderColor: _isEnabled2 ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.borderColor : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.borderColor,
+      borderRadius: 1 * theme.shape.borderRadius,
+      marginBottom: theme.spacing(0.5),
+      minHeight: '34px'
+    }
+  };
+});
 const Accordion = ({
   Styles,
   Acceptance,
@@ -3827,7 +3888,8 @@ const useReferenceTimeWithLatestOption = layerId => {
  * */
 const DimensionSelectConnect = ({
   layerId,
-  mapId
+  mapId,
+  skipLocalStyling
 }) => {
   const {
     layerDimensions,
@@ -3855,7 +3917,8 @@ const DimensionSelectConnect = ({
     },
     isEnabled: isLayerEnabled,
     useLatestReferenceTime: useLatestReferenceTime,
-    setUseLatestReferenceTime: setUseLatestReferenceTime
+    setUseLatestReferenceTime: setUseLatestReferenceTime,
+    skipLocalStyling: skipLocalStyling
   });
 };
 
@@ -3879,7 +3942,8 @@ const RenderStylesConnect = ({
   layerId,
   mapId,
   icon,
-  tooltipPrefix
+  tooltipPrefix,
+  skipLocalStyling
 }) => {
   const dispatch = useDispatch();
   const layerService = useSelector(store => layerSelectors.getLayerService(store, layerId));
@@ -3901,7 +3965,8 @@ const RenderStylesConnect = ({
     onChangeLayerStyle: layerChangeStyle,
     isEnabled: isLayerEnabled,
     icon: icon,
-    tooltipPrefix: tooltipPrefix
+    tooltipPrefix: tooltipPrefix,
+    skipLocalStyling: skipLocalStyling
   });
 };
 
@@ -3924,7 +3989,8 @@ const RenderStylesConnect = ({
 const RenderLayersConnect = ({
   layerId,
   mapId,
-  tooltipPrefix
+  tooltipPrefix,
+  skipLocalStyling
 }) => {
   const dispatch = useDispatch();
   const layerName = useSelector(store => layerSelectors.getLayerName(store, layerId));
@@ -3977,7 +4043,8 @@ const RenderLayersConnect = ({
       });
     },
     isEnabled: isLayerEnabled,
-    tooltipPrefix: tooltipPrefix
+    tooltipPrefix: tooltipPrefix,
+    skipLocalStyling: skipLocalStyling
   });
 };
 
@@ -4235,7 +4302,8 @@ function getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, th
 const AcceptanceTimeConnect = ({
   layerId,
   icon,
-  tooltipTitle
+  tooltipTitle,
+  skipLocalStyling
 }) => {
   const isEnabled = useSelector(store => layerSelectors.getLayerEnabled(store, layerId));
   const dispatch = useDispatch();
@@ -4266,7 +4334,8 @@ const AcceptanceTimeConnect = ({
     acceptanceTimeInMinutes: acceptanceTimeInMinutes,
     onChangeAcceptanceTime: onChangeAcceptanceTime,
     icon: icon,
-    tooltipTitle: tooltipTitle
+    tooltipTitle: tooltipTitle,
+    skipLocalStyling: skipLocalStyling
   });
 };
 
@@ -4476,21 +4545,25 @@ const LayerRowConnect = /*#__PURE__*/React.memo(({
     })) : ( /*#__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: (_g = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _g === void 0 ? void 0 : _g.tooltipPrefix,
+      skipLocalStyling: true
     })),
     layerDimensionLayout: (settings === null || settings === void 0 ? void 0 : settings.dimensions) ? ( /*#__PURE__*/React.createElement(CustomDimensionSelectConnect, Object.assign({
       layerId: layerId,
       mapId: mapId
     }, settings === null || settings === void 0 ? void 0 : settings.dimensions))) : ( /*#__PURE__*/React.createElement(DimensionSelectConnect, {
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      skipLocalStyling: true
     })),
     layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, Object.assign({
       layerId: layerId,
-      mapId: mapId
+      mapId: mapId,
+      skipLocalStyling: true
     }, settings === null || settings === void 0 ? void 0 : settings.layerStyle)),
     layerAcceptanceTimeLayout: /*#__PURE__*/React.createElement(AcceptanceTimeConnect, Object.assign({
-      layerId: layerId
+      layerId: layerId,
+      skipLocalStyling: true
     }, settings === null || settings === void 0 ? void 0 : settings.acceptanceTime)),
     layerMissingDataLayout: /*#__PURE__*/React.createElement(MissingDataConnect, {
       mapId: mapId,
@@ -4664,7 +4737,13 @@ const LayerContainerRow = /*#__PURE__*/React.memo(_a => {
     sx: {
       width: '100%',
       maxHeight: 'calc(100% - 10px)',
-      overflow: 'auto'
+      overflow: 'auto',
+      '& .sortable-chosen': {
+        boxShadow: 1
+      },
+      '& .sortable-ghost': {
+        opacity: '0.5 !important'
+      }
     }
   }, gridProps), /*#__PURE__*/React.createElement(ReactSortable, {
     tag: "div",
@@ -4695,6 +4774,8 @@ var lengthOfArrayLike$1 = lengthOfArrayLike$4;
 
 var $TypeError$2 = TypeError;
 
+var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
+
 // `Array.prototype.{ reduce, reduceRight }` methods implementation
 var createMethod$2 = function (IS_RIGHT) {
   return function (that, callbackfn, argumentsLength, memo) {
@@ -4702,6 +4783,7 @@ var createMethod$2 = function (IS_RIGHT) {
     var self = IndexedObject(O);
     var length = lengthOfArrayLike$1(O);
     aCallable$1(callbackfn);
+    if (length === 0 && argumentsLength < 2) throw new $TypeError$2(REDUCE_EMPTY);
     var index = IS_RIGHT ? length - 1 : 0;
     var i = IS_RIGHT ? -1 : 1;
     if (argumentsLength < 2) while (true) {
@@ -4712,7 +4794,7 @@ var createMethod$2 = function (IS_RIGHT) {
       }
       index += i;
       if (IS_RIGHT ? index < 0 : length <= index) {
-        throw new $TypeError$2('Reduce of empty array with no initial value');
+        throw new $TypeError$2(REDUCE_EMPTY);
       }
     }
     for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
@@ -4741,7 +4823,7 @@ var arrayMethodIsStrict$2 = function (METHOD_NAME, argument) {
   });
 };
 
-var global$5 = global$h;
+var global$5 = global$g;
 var classof$1 = classofRaw$1;
 
 var engineIsNode = classof$1(global$5.process) === 'process';
@@ -4900,7 +4982,7 @@ const BaseLayersConnect = ({
 };
 
 var fails$7 = fails$n;
-var global$4 = global$h;
+var global$4 = global$g;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
 var $RegExp$2 = global$4.RegExp;
@@ -4931,7 +5013,7 @@ var regexpStickyHelpers = {
 };
 
 var fails$6 = fails$n;
-var global$3 = global$h;
+var global$3 = global$g;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
 var $RegExp$1 = global$3.RegExp;
@@ -4942,7 +5024,7 @@ var regexpUnsupportedDotAll = fails$6(function () {
 });
 
 var fails$5 = fails$n;
-var global$2 = global$h;
+var global$2 = global$g;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
 var $RegExp = global$2.RegExp;
@@ -4960,7 +5042,7 @@ var uncurryThis$7 = functionUncurryThis;
 var toString$7 = toString$9;
 var regexpFlags = regexpFlags$1;
 var stickyHelpers = regexpStickyHelpers;
-var shared = shared$4.exports;
+var shared = shared$4;
 var create = objectCreate;
 var getInternalState = internalState.get;
 var UNSUPPORTED_DOT_ALL = regexpUnsupportedDotAll;
@@ -5084,7 +5166,7 @@ $$4({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
 var $$3 = _export;
 var call$5 = functionCall;
 var isCallable$3 = isCallable$i;
-var anObject$3 = anObject$b;
+var anObject$3 = anObject$a;
 var toString$6 = toString$9;
 
 var DELEGATES_TO_EXEC = function () {
@@ -5119,7 +5201,7 @@ var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u200
   '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
 
 var uncurryThis$6 = functionUncurryThis;
-var requireObjectCoercible$3 = requireObjectCoercible$7;
+var requireObjectCoercible$3 = requireObjectCoercible$8;
 var toString$5 = toString$9;
 var whitespaces$1 = whitespaces$2;
 
@@ -5820,10 +5902,10 @@ const preloadedDefaultBaseServices = baseServices;
 const preloadedDefaultMapServices = services;
 
 var defaultConfigurations = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	availableDefaultBaseLayers: availableDefaultBaseLayers,
-	preloadedDefaultBaseServices: preloadedDefaultBaseServices,
-	preloadedDefaultMapServices: preloadedDefaultMapServices
+  __proto__: null,
+  availableDefaultBaseLayers: availableDefaultBaseLayers,
+  preloadedDefaultBaseServices: preloadedDefaultBaseServices,
+  preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
 const validateServiceUrl = url => {
@@ -6349,8 +6431,8 @@ const LayerManager = ({
   setFocused: _setFocused = () => {},
   settings,
   headerSize: _headerSize = 'medium',
-  isMultiMap,
-  mapWidthRef
+  mapWidthRef,
+  addLayerComponent
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const minSize = {
@@ -6466,10 +6548,9 @@ const LayerManager = ({
     sx: styles$1.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapPresetsModule: _leftHeaderComponent,
-    mapId: mapId,
     source: _source,
     settings: settings === null || settings === void 0 ? void 0 : settings.header,
-    isMultiMap: isMultiMap
+    addLayerComponent: addLayerComponent
   }), /*#__PURE__*/React.createElement(LayerContainerRow, {
     mapId: mapId,
     settings: settings === null || settings === void 0 ? void 0 : settings.content
@@ -6490,7 +6571,7 @@ const getServicesToLoad = services => services.map(service => {
   return {
     id: wmService.id,
     name: service.name,
-    serviceUrl: service.url,
+    url: service.url,
     scope,
     abstract: service.abstract || wmService.abstract
   };
@@ -6547,8 +6628,8 @@ const getDialogType = (mapId, isMultiMap, isDocked) => {
  * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
  *
  * Expects the following props:
- * @param {layerSelectTypes.LayerSelectService[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
- * @param {layerSelectTypes.LayerSelectService[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
+ * @param {serviceTypes.InitialService[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
+ * @param {serviceTypes.InitialService[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
  * @param {Layer[]} preloadedAvailableBaseLayers preloadedAvailableBaseLayers: array of Layer objects - contains an array of Layer objects (consisting solely of type baseLayer) that are available to be shown as basemaps
  * ``` <LayerManagerConnect />```
  */
@@ -6605,7 +6686,7 @@ const LayerManagerConnect = ({
   }, [dispatch, _isDocked, mapId, onCloseDialog, _source]);
   return React.useMemo(() => {
     const shownTitle = _showMapIdInTitle ? `${_title} ${mapId}` : _title;
-    return /*#__PURE__*/React.createElement(LayerManager, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManager, {
       mapId: mapId || initialMapId,
       preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
       preloadedBaseServices: preloadedBaseServices,
@@ -6623,7 +6704,6 @@ const LayerManagerConnect = ({
       onToggleDock: onToggleDock,
       setFocused: setFocused,
       headerSize: "xs",
-      isMultiMap: _isMultiMap,
       isDockedLayerManager: _isDocked,
       startPosition: _isDocked ? {
         top: 60,
@@ -6632,9 +6712,14 @@ const LayerManagerConnect = ({
         top: 85,
         left: 50
       },
-      mapWidthRef: mapWidthRef
-    });
-  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, _leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, setFocused, _showMapIdInTitle, _title, uiError, uiIsLoading, uiSource, mapWidthRef]);
+      mapWidthRef: mapWidthRef,
+      addLayerComponent: /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
+        mapId: mapId,
+        source: _source,
+        isMultiMap: _isMultiMap
+      })
+    }), !_isDocked && /*#__PURE__*/React.createElement(LayerInfoDialogConnect, null), !_isDocked && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
+  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, _leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, setFocused, _showMapIdInTitle, _title, uiError, uiIsLoading, uiSource, mapWidthRef, _source]);
 };
 
 /* *
@@ -6967,7 +7052,7 @@ var proxyAccessor$1 = function (Target, Source, key) {
 };
 
 var isCallable$2 = isCallable$i;
-var isObject$1 = isObject$a;
+var isObject$1 = isObject$b;
 var setPrototypeOf$1 = objectSetPrototypeOf;
 
 // makes subclassing work correct for wrapped built-ins
@@ -6991,7 +7076,7 @@ var normalizeStringArgument$1 = function (argument, $default) {
   return argument === undefined ? arguments.length < 2 ? '' : $default : toString$3(argument);
 };
 
-var isObject = isObject$a;
+var isObject = isObject$b;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$8;
 
 // `InstallErrorCause` abstract operation
@@ -7109,7 +7194,7 @@ var wrapErrorConstructorWithCause$1 = function (FULL_NAME, wrapper, FORCED, IS_A
 
 /* eslint-disable no-unused-vars -- required for functions `.length` */
 var $ = _export;
-var global$1 = global$h;
+var global$1 = global$g;
 var apply$1 = functionApply;
 var wrapErrorConstructorWithCause = wrapErrorConstructorWithCause$1;
 
@@ -7244,7 +7329,7 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
 var uncurryThis$2 = functionUncurryThis;
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$4;
 var toString$2 = toString$9;
-var requireObjectCoercible$2 = requireObjectCoercible$7;
+var requireObjectCoercible$2 = requireObjectCoercible$8;
 
 var charAt$2 = uncurryThis$2(''.charAt);
 var charCodeAt = uncurryThis$2(''.charCodeAt);
@@ -7287,7 +7372,7 @@ var advanceStringIndex$2 = function (S, index, unicode) {
 };
 
 var call$2 = functionCall;
-var anObject$2 = anObject$b;
+var anObject$2 = anObject$a;
 var isCallable$1 = isCallable$i;
 var classof = classofRaw$1;
 var regexpExec = regexpExec$2;
@@ -7309,11 +7394,11 @@ var regexpExecAbstract = function (R, S) {
 
 var call$1 = functionCall;
 var fixRegExpWellKnownSymbolLogic$1 = fixRegexpWellKnownSymbolLogic;
-var anObject$1 = anObject$b;
+var anObject$1 = anObject$a;
 var isNullOrUndefined$1 = isNullOrUndefined$4;
 var toLength$1 = toLength$3;
 var toString$1 = toString$9;
-var requireObjectCoercible$1 = requireObjectCoercible$7;
+var requireObjectCoercible$1 = requireObjectCoercible$8;
 var getMethod$1 = getMethod$3;
 var advanceStringIndex$1 = advanceStringIndex$2;
 var regExpExec$1 = regexpExecAbstract;
@@ -8663,42 +8748,6 @@ const TimeStepButtonConnect = ({
   });
 };
 
-const NowButtonConnect = ({
-  sourceId,
-  mapId,
-  isDisabled
-}) => {
-  const dispatch = useDispatch();
-  const currentTime = dateUtils.unix(dateUtils.utc());
-  const timeStep = useSelector(store => mapSelectors.getMapTimeStep(store, mapId));
-  const [dataStartTime, dataEndTime] = useSelector(store => mapSelectors.getDataLimitsFromLayers(store, mapId));
-  const isAnimating = useSelector(store => mapSelectors.isAnimating(store, mapId));
-  const turnOffAutoUpdateIfItsOn = useTurnOffAutoUpdateIfItsOn(mapId);
-  const onSetNewDate = newDate => {
-    turnOffAutoUpdateIfItsOn();
-    if (isAnimating) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId
-      }));
-    }
-    dispatch(genericActions.setTime({
-      sourceId,
-      origin: 'NowButtonConnect, 140',
-      value: handleDateUtilsISOString(newDate)
-    }));
-  };
-  const onSetCenterTime = newTime => {
-    dispatch(mapActions.setTimeSliderCenterTime({
-      mapId,
-      timeSliderCenterTime: newTime
-    }));
-  };
-  return /*#__PURE__*/React.createElement(NowButton, {
-    disabled: isDisabled,
-    onSetNow: () => handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime)
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8820,47 +8869,6 @@ const TimeSpanButtonConnect = ({
   });
 };
 
-/* *
- * 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)
- * */
-const connectRedux$2 = connect((store, props) => ({
-  isAutoUpdating: mapSelectors.isAutoUpdating(store, props.mapId)
-}), {
-  toggleAutoUpdate: mapActions.toggleAutoUpdate
-});
-const AutoUpdateButtonConnectComponent = connectRedux$2(({
-  mapId,
-  isAutoUpdating,
-  toggleAutoUpdate
-}) => {
-  const onClick = () => {
-    toggleAutoUpdate({
-      mapId,
-      shouldAutoUpdate: !isAutoUpdating,
-      origin: mapEnums.MapActionOrigin.map
-    });
-  };
-  return /*#__PURE__*/React.createElement(AutoUpdateButton, {
-    isAutoUpdating: isAutoUpdating,
-    toggleAutoUpdate: onClick,
-    disabled: false
-  });
-});
-const AutoUpdateButtonConnect = connectRedux$2(AutoUpdateButtonConnectComponent);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8886,20 +8894,12 @@ const AutoUpdateButtonConnect = connectRedux$2(AutoUpdateButtonConnectComponent)
  * ``` <OptionsMenuButtonConnect mapId={mapId} />```
  */
 const OptionsMenuButtonConnect = ({
-  sourceId,
   mapId
 }) => {
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
-    nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
-      mapId: mapId,
-      sourceId: sourceId
-    }),
     animationLengthBtn: /*#__PURE__*/React.createElement(AnimationLengthButtonConnect, {
       mapId: mapId
     }),
-    autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
-      mapId: mapId
-    }),
     speedBtn: /*#__PURE__*/React.createElement(SpeedButtonConnect, {
       mapId: mapId
     }),
@@ -8928,7 +8928,7 @@ const OptionsMenuButtonConnect = ({
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-const connectRedux$1 = connect((store, props) => ({
+const connectRedux$2 = connect((store, props) => ({
   animationStartTime: mapSelectors.getAnimationStartTime(store, props.mapId),
   animationEndTime: mapSelectors.getAnimationEndTime(store, props.mapId),
   timeStep: mapSelectors.getMapTimeStep(store, props.mapId),
@@ -8937,7 +8937,7 @@ const connectRedux$1 = connect((store, props) => ({
   mapStartAnimation: mapActions.mapStartAnimation,
   mapStopAnimation: mapActions.mapStopAnimation
 });
-const PlayButtonConnect = connectRedux$1(({
+const PlayButtonConnect = connectRedux$2(({
   mapId,
   animationStartTime,
   animationEndTime,
@@ -9007,6 +9007,83 @@ const BackwardForwardStepButtonConnect = ({
   });
 };
 
+/* *
+ * 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)
+ * */
+const connectRedux$1 = connect((store, props) => ({
+  isAutoUpdating: mapSelectors.isAutoUpdating(store, props.mapId)
+}), {
+  toggleAutoUpdate: mapActions.toggleAutoUpdate
+});
+const AutoUpdateButtonConnectComponent = connectRedux$1(({
+  mapId,
+  isAutoUpdating,
+  toggleAutoUpdate
+}) => {
+  const onClick = () => {
+    toggleAutoUpdate({
+      mapId,
+      shouldAutoUpdate: !isAutoUpdating,
+      origin: mapEnums.MapActionOrigin.map
+    });
+  };
+  return /*#__PURE__*/React.createElement(AutoUpdateButton, {
+    isAutoUpdating: isAutoUpdating,
+    toggleAutoUpdate: onClick,
+    disabled: false
+  });
+});
+const AutoUpdateButtonConnect = connectRedux$1(AutoUpdateButtonConnectComponent);
+
+const NowButtonConnect = ({
+  sourceId,
+  mapId,
+  isDisabled
+}) => {
+  const dispatch = useDispatch();
+  const currentTime = dateUtils.unix(dateUtils.utc());
+  const timeStep = useSelector(store => mapSelectors.getMapTimeStep(store, mapId));
+  const [dataStartTime, dataEndTime] = useSelector(store => mapSelectors.getDataLimitsFromLayers(store, mapId));
+  const isAnimating = useSelector(store => mapSelectors.isAnimating(store, mapId));
+  const turnOffAutoUpdateIfItsOn = useTurnOffAutoUpdateIfItsOn(mapId);
+  const onSetNewDate = newDate => {
+    turnOffAutoUpdateIfItsOn();
+    if (isAnimating) {
+      dispatch(mapActions.mapStopAnimation({
+        mapId
+      }));
+    }
+    dispatch(genericActions.setTime({
+      sourceId,
+      origin: 'NowButtonConnect, 140',
+      value: handleDateUtilsISOString(newDate)
+    }));
+  };
+  const onSetCenterTime = newTime => {
+    dispatch(mapActions.setTimeSliderCenterTime({
+      mapId,
+      timeSliderCenterTime: newTime
+    }));
+  };
+  return /*#__PURE__*/React.createElement(NowButton, {
+    disabled: isDisabled,
+    onSetNow: () => handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime)
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -9028,17 +9105,24 @@ const BackwardForwardStepButtonConnect = ({
  *
  * Expects the following props:
  * @param {string} mapId mapId: string - Id of the map
+ * @param {string} sourceId mapId: string - Id of the source
  * @example
- * ``` <TimeSliderButtonsConnect mapId={mapId} />```
+ * ``` <TimeSliderButtonsConnect mapId={mapId} sourceId={sourceId} />```
  */
 const TimeSliderButtonsConnectComponent = ({
   sourceId,
   mapId
 }) => ( /*#__PURE__*/React.createElement(TimeSliderButtons, {
-  optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
+  nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
     mapId: mapId,
     sourceId: sourceId
   }),
+  autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
+    mapId: mapId
+  }),
+  optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
+    mapId: mapId
+  }),
   playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
     mapId: mapId
   }),
@@ -9415,9 +9499,17 @@ const TimeSliderConnect = ({
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 const ControlButtonsConnect = ({
+  sourceId,
   mapId
 }) => {
   return /*#__PURE__*/React__default.createElement(ControlButtons, {
+    nowBtn: /*#__PURE__*/React__default.createElement(NowButtonConnect, {
+      mapId: mapId,
+      sourceId: sourceId
+    }),
+    autoUpdateBtn: /*#__PURE__*/React__default.createElement(AutoUpdateButtonConnect, {
+      mapId: mapId
+    }),
     playBtn: /*#__PURE__*/React__default.createElement(PlayButtonConnect, {
       mapId: mapId
     }),
@@ -9449,19 +9541,11 @@ const ControlButtonsConnect = ({
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 const OptionsMenuConnect = ({
-  sourceId,
   mapId
 }) => ( /*#__PURE__*/React__default.createElement(OptionsMenu, {
-  nowBtn: /*#__PURE__*/React__default.createElement(NowButtonConnect, {
-    mapId: mapId,
-    sourceId: sourceId
-  }),
   animationLengthBtn: /*#__PURE__*/React__default.createElement(AnimationLengthButtonConnect, {
     mapId: mapId
   }),
-  autoUpdateBtn: /*#__PURE__*/React__default.createElement(AutoUpdateButtonConnect, {
-    mapId: mapId
-  }),
   speedBtn: /*#__PURE__*/React__default.createElement(SpeedButtonConnect, {
     mapId: mapId
   }),
@@ -9497,12 +9581,12 @@ const TimeSliderClockConnect = ({
   return /*#__PURE__*/React__default.createElement(TimeSliderClock, {
     hideButton: isTimeSliderVisible,
     controls: /*#__PURE__*/React__default.createElement(ControlButtonsConnect, {
-      mapId: mapId
-    }),
-    options: /*#__PURE__*/React__default.createElement(OptionsMenuConnect, {
       mapId: mapId,
       sourceId: mapId
     }),
+    options: /*#__PURE__*/React__default.createElement(OptionsMenuConnect, {
+      mapId: mapId
+    }),
     time: selectedTime
   });
 };
@@ -9735,13 +9819,13 @@ var call = functionCall;
 var uncurryThis = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
 var fails = fails$n;
-var anObject = anObject$b;
+var anObject = anObject$a;
 var isCallable = isCallable$i;
 var isNullOrUndefined = isNullOrUndefined$4;
 var toIntegerOrInfinity = toIntegerOrInfinity$4;
 var toLength = toLength$3;
 var toString = toString$9;
-var requireObjectCoercible = requireObjectCoercible$7;
+var requireObjectCoercible = requireObjectCoercible$8;
 var advanceStringIndex = advanceStringIndex$2;
 var getMethod = getMethod$3;
 var getSubstitution = getSubstitution$1;
@@ -10615,19 +10699,64 @@ const simplePolygonGeoJSON = {
 };
 
 var testLayers = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	baseLayer: baseLayer,
-	baseLayerGrey: baseLayerGrey,
-	baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
-	baseLayerArcGisCanvas: baseLayerArcGisCanvas,
-	baseLayerWorldMap: baseLayerWorldMap,
-	baseLayerArcGisSat: baseLayerArcGisSat,
-	overLayer: overLayer,
-	overLayer2: overLayer2,
-	radarLayer: radarLayer,
-	simplePolygonGeoJSON: simplePolygonGeoJSON
+  __proto__: null,
+  baseLayer: baseLayer,
+  baseLayerGrey: baseLayerGrey,
+  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
+  baseLayerArcGisCanvas: baseLayerArcGisCanvas,
+  baseLayerWorldMap: baseLayerWorldMap,
+  baseLayerArcGisSat: baseLayerArcGisSat,
+  overLayer: overLayer,
+  overLayer2: overLayer2,
+  radarLayer: radarLayer,
+  simplePolygonGeoJSON: simplePolygonGeoJSON
 });
 
+/* *
+ * 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)
+ * */
+const CORE_NAMESPACE = 'core';
+const initCoreReactI18n = () => {
+  i18n.use(initReactI18next).init({
+    lng: 'en',
+    ns: CORE_NAMESPACE,
+    interpolation: {
+      escapeValue: false
+    },
+    resources: {
+      en: {
+        [CORE_NAMESPACE]: coreTranslations.en,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.en
+      },
+      fi: {
+        [CORE_NAMESPACE]: coreTranslations.fi,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.fi
+      },
+      no: {
+        [CORE_NAMESPACE]: coreTranslations.no,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.no
+      },
+      nl: {
+        [CORE_NAMESPACE]: coreTranslations.nl,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.nl
+      }
+    }
+  });
+};
+
 /**
  * A Provider component which provides the GeoWeb theme
  * @param children
@@ -10644,7 +10773,7 @@ const ThemeWrapperWithModules = withEggs([...coreModuleConfig, layerSelectConfig
   children
 }) => ( /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
   theme: theme
-}, children, " ")));
+}, children)));
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
  * Note: Should only be used with core components, as the provided store is only for core.
@@ -10660,6 +10789,18 @@ const CoreThemeStoreProvider = ({
 }, /*#__PURE__*/React__default.createElement(ThemeWrapperWithModules, {
   theme: _theme2
 }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
+const CoreI18nProvider = ({
+  children
+}) => {
+  initCoreReactI18n();
+  return /*#__PURE__*/React__default.createElement(I18nextProvider, {
+    i18n: i18n
+  }, children);
+};
+// used for react stories/tests
+const DemoWrapper = props => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(CoreThemeProvider, Object.assign({}, props))));
+// used for redux stories/tests
+const DemoWrapperConnect = props => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(CoreThemeStoreProvider, Object.assign({}, props))));
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -10703,4 +10844,4 @@ const RouterWrapperConnect = withEggs([routerModuleConfig])(props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavigateSetter, null), props.children);
 });
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };