@opengeoweb/core 9.28.1 → 9.29.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
-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, circularProgressClasses, ListItemIcon, Checkbox } from '@mui/material';
+import { Grid2, 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, circularProgressClasses, ListItemIcon, Checkbox } from '@mui/material';
 import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } 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, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
@@ -2081,22 +2081,22 @@ const HeaderOptions = ({
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const iconButtonSize = 30;
 const columnClasses = {
@@ -2341,9 +2341,8 @@ const DescriptionRow = _a => {
     })
   }) : undefined);
   const hasMapPresetsModule = mapPresetsModule !== undefined;
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "descriptionRow",
     sx: {
       height: 40
@@ -2351,8 +2350,7 @@ const DescriptionRow = _a => {
     className: "descriptionRow",
     alignItems: "center"
   }, gridProps, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
+    children: [jsx(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: Object.assign(Object.assign({}, leftButtonsStyle), {
         justifyContent: 'center',
@@ -2363,7 +2361,7 @@ const DescriptionRow = _a => {
         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
       })
-    })), jsxs(Grid, Object.assign({
+    })), jsxs(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: [jsx(Box, Object.assign({
@@ -2379,7 +2377,7 @@ const DescriptionRow = _a => {
       }, {
         children: mapPresetsModuleInline
       }))]
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column3
     }, {
       children: jsx(Box, Object.assign({
@@ -2387,7 +2385,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : t('layermanager-style-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column4
     }, {
       children: jsx(Box, Object.assign({
@@ -2395,7 +2393,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : t('layermanager-opacity-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column5
     }, {
       children: jsx(Box, Object.assign({
@@ -2403,7 +2401,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : t('layermanager-dimensions-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.acceptanceTime
     }, {
       children: jsx(Box, Object.assign({
@@ -2413,7 +2411,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_o = (_m = settings === null || settings === void 0 ? void 0 : settings.acceptanceTime) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : t('layermanager-acceptance-time')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.loadDuration
     }, {
       children: jsx(Box, Object.assign({
@@ -2424,7 +2422,7 @@ const DescriptionRow = _a => {
       }, {
         children: jsx(CloudLoading, {})
       }))
-    })), jsx(Grid, {
+    })), jsx(Grid2, {
       className: columnClasses.column6
     })]
   }));
@@ -2948,15 +2946,14 @@ const DimensionSelect = ({
   const defaultValueTooltip = (_d = defaultDimensionValueTooltip(selectedDimension)) !== null && _d !== void 0 ? _d : '';
   const nameTooltip = (_e = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension)) !== null && _e !== void 0 ? _e : defaultNameTooltip;
   const valueTooltip = (_f = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension, true)) !== null && _f !== void 0 ? _f : defaultValueTooltip;
-  return jsx(Grid, Object.assign({
+  return jsx(Grid2, Object.assign({
     container: true,
     direction: "row",
     justifyContent: "flex-start",
     alignItems: "center"
   }, {
-    children: jsxs(Grid, Object.assign({
-      item: true,
-      xs: 12
+    children: jsxs(Grid2, Object.assign({
+      size: 12
     }, {
       children: [collapseDimensionDropdown ? jsx(SingleValueComponent, Object.assign({}, _layerDimensions[0], {
         nameMappings: nameMappings,
@@ -3799,12 +3796,12 @@ const roundToDecimals = (num, decimals) => {
     useGrouping: false
   });
 };
-/**
- * Hook to subscribe to changes in the load duration for a map layer.
- * This will only trigger a render when the load duration rounded down to seconds changes for the given layer and map combination
- * @param mapId
- * @param layerId
- * @returns {number}
+/**
+ * Hook to subscribe to changes in the load duration for a map layer.
+ * This will only trigger a render when the load duration rounded down to seconds changes for the given layer and map combination
+ * @param mapId
+ * @param layerId
+ * @returns {number}
  */
 const useLoadDurationLabel = (mapId, layerId) => {
   const subscribe = React.useCallback(onStoreChange => {
@@ -3984,8 +3981,7 @@ const LayerRowUnstyled = ({
     jsx("div", Object.assign({
       className: className
     }, {
-      children: jsxs(Grid, Object.assign({
-        item: true,
+      children: jsxs(Grid2, Object.assign({
         container: true,
         "data-testid": `layerRow-${layerId}`,
         className: "layerRow",
@@ -4028,8 +4024,7 @@ const LayerRowUnstyled = ({
           DeleteLayer: layerDeleteLayout || jsx(DeleteLayer, {
             onClick: deleteLayer
           })
-        }), jsx(Grid, Object.assign({
-          item: true,
+        }), jsx(Grid2, Object.assign({
           className: columnClasses.column1,
           alignItems: "center"
         }, {
@@ -4044,8 +4039,7 @@ const LayerRowUnstyled = ({
             onChangeEnable: changeEnable,
             onChangeActive: onClickRow
           })
-        })), jsx(Grid, Object.assign({
-          item: true,
+        })), jsx(Grid2, Object.assign({
           className: columnClasses.column2
         }, {
           children: layerServicesLayout || jsx(RenderLayers, {
@@ -4058,8 +4052,7 @@ const LayerRowUnstyled = ({
               });
             }
           })
-        })), _isLayerMissing ? jsx(Grid, Object.assign({
-          item: true,
+        })), _isLayerMissing ? jsx(Grid2, Object.assign({
           className: columnClasses.column7
         }, {
           children: jsx(AlertBanner, {
@@ -4067,24 +4060,21 @@ const LayerRowUnstyled = ({
             isCompact: true
           })
         })) : jsxs(Fragment, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
+          children: [jsx(Grid2, Object.assign({
             className: columnClasses.column3
           }, {
             children: layerStylesLayout || jsx(Styles, {
               style: layer.style,
               onChangeStyle: changeStyle
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.column4
           }, {
             children: layerOpacityLayout || jsx(Opacity, {
               opacity: layer.opacity,
               onChangeOpacity: changeOpacity
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.column5
           }, {
             children: layerDimensionLayout || jsx(DimensionSelect, {
@@ -4101,16 +4091,14 @@ const LayerRowUnstyled = ({
                 });
               }
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.acceptanceTime
           }, {
             children: layerAcceptanceTimeLayout || jsx(Acceptance, {
               acceptanceTime: layer.acceptanceTimeInMinutes,
               onChangeAcceptanceTime: changeAcceptanceTime
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             display: "flex",
             justifyContent: "flex-end",
             className: columnClasses.loadDuration
@@ -4120,8 +4108,7 @@ const LayerRowUnstyled = ({
               mapId: mapId
             })
           }))]
-        }), jsxs(Grid, Object.assign({
-          item: true,
+        }), jsxs(Grid2, Object.assign({
           className: columnClasses.column6,
           alignItems: "center"
         }, {
@@ -4195,68 +4182,53 @@ const Accordion = ({
       }))]
     })
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true,
       sx: {
         padding: '16px 32px'
       },
       spacing: 3
     }, {
-      children: [jsxs(Grid, Object.assign({
-        container: true,
-        item: true
+      children: [jsxs(Grid2, Object.assign({
+        container: true
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-style-title')
-        })), Styles]
-      })), jsxs(Grid, Object.assign({
+        }), Styles]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         sx: {
           '.MuiButtonBase-root': {
             justifyContent: 'flex-start'
           }
         }
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-opacity-title')
-        })), Opacity]
-      })), jsxs(Grid, Object.assign({
-        container: true,
-        item: true
+        }), Opacity]
+      })), jsxs(Grid2, Object.assign({
+        container: true
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-acceptance-time')
-        })), Acceptance]
-      })), jsxs(Grid, Object.assign({
+        }), Acceptance]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         flexDirection: "column"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: jsx(CloudLoading, {})
-        })), LoadDuration]
-      })), jsxs(Grid, Object.assign({
+        }), LoadDuration]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         justifyContent: "center",
         spacing: 2
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
+        children: [jsx(Grid2, Object.assign({
           sx: {}
         }, {
           children: ShowLayerInfo
-        })), jsx(Grid, Object.assign({
-          item: true,
+        })), jsx(Grid2, Object.assign({
           sx: {}
         }, {
           children: DeleteLayer
@@ -4384,22 +4356,22 @@ const OpacitySelectConnect = ({
   });
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const useLayerDimensions = (layerId, mapId) => {
   const dispatch = useDispatch();
@@ -5158,9 +5130,8 @@ const LayerContainerRow = /*#__PURE__*/React.memo(_a => {
       });
     }
   }, [layerLength, rowsToDisplay]);
-  return jsx(Grid, Object.assign({
+  return jsx(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "layerContainerRow",
     className: "layerContainerRow",
     sx: {
@@ -5691,23 +5662,18 @@ const WMSServerList = ({
   };
   const sortedServices = [...availableServices].sort((a, b) => a.name.localeCompare(b.name));
   return jsxs(Fragment, {
-    children: [jsx(Grid, Object.assign({
+    children: [jsx(Grid2, Object.assign({
       container: true,
       direction: "row",
-      spacing: 1,
       style: {
-        height: '34px'
+        height: '26px'
       }
     }, {
-      children: jsx(Grid, Object.assign({
-        item: true
+      children: jsx(InputLabel, Object.assign({
+        shrink: true,
+        htmlFor: "select-multiple-native"
       }, {
-        children: jsx(InputLabel, Object.assign({
-          shrink: true,
-          htmlFor: "select-multiple-native"
-        }, {
-          children: t('add-layer-popup-available-services')
-        }))
+        children: t('add-layer-popup-available-services')
       }))
     })), jsx(Paper, Object.assign({
       style: {
@@ -5741,15 +5707,13 @@ const WMSLayerTreeHeader = ({
   const {
     t
   } = useCoreTranslation();
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     direction: "row",
     spacing: 1,
     justifyContent: "space-between"
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true
-    }, {
+    children: [jsx(Grid2, {
       children: jsx(InputLabel, Object.assign({
         shrink: true,
         htmlFor: "select-multiple-native"
@@ -5758,9 +5722,7 @@ const WMSLayerTreeHeader = ({
           serviceName
         })
       }))
-    })), onClickReload && jsx(Grid, Object.assign({
-      item: true
-    }, {
+    }), onClickReload && jsx(Grid2, {
       children: jsx(CustomIconButton, Object.assign({
         tooltipTitle: t('add-layer-popup-reload-layers'),
         "data-testid": "reloadLayers",
@@ -5768,7 +5730,7 @@ const WMSLayerTreeHeader = ({
       }, {
         children: jsx(Cached, {})
       }))
-    }))]
+    })]
   }));
 };
 
@@ -5966,22 +5928,22 @@ const ConnectedTree = ({
 };
 const WMSLayerTreeConnect = connectRedux$3(ConnectedTree);
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const isValidService = service => Object.prototype.hasOwnProperty.call(service, 'url');
 const filterServices = presetArray => {
@@ -6149,22 +6111,22 @@ var initialPreset = {
 	preset: preset
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const {
   services,
@@ -6270,14 +6232,13 @@ const AddLayersPopup = ({
       }), jsx(Box, Object.assign({
         m: 2
       }, {
-        children: jsx(Grid, Object.assign({
+        children: jsx(Grid2, Object.assign({
           container: true,
           direction: "row",
           alignItems: "center"
         }, {
-          children: jsx(Grid, Object.assign({
-            item: true,
-            xs: 12
+          children: jsx(Grid2, Object.assign({
+            size: 12
           }, {
             children: jsx(TextField, {
               margin: "dense",
@@ -6301,24 +6262,26 @@ const AddLayersPopup = ({
               error: urlError !== '',
               helperText: urlError,
               variant: "filled",
-              InputProps: {
-                endAdornment: jsx(InputAdornment, Object.assign({
-                  position: "end"
-                }, {
-                  children: loading ? jsx(CircularProgress, {
-                    size: 24,
-                    sx: {
-                      zIndex: 1
-                    }
-                  }) : jsx(CustomIconButton, Object.assign({
-                    "data-testid": "add-service",
-                    onClick: handleAddServiceURL,
-                    disabled: loading,
-                    size: "large"
+              slotProps: {
+                input: {
+                  endAdornment: jsx(InputAdornment, Object.assign({
+                    position: "end"
                   }, {
-                    children: jsx(Add, {})
+                    children: loading ? jsx(CircularProgress, {
+                      size: 24,
+                      sx: {
+                        zIndex: 1
+                      }
+                    }) : jsx(CustomIconButton, Object.assign({
+                      "data-testid": "add-service",
+                      onClick: handleAddServiceURL,
+                      disabled: loading,
+                      size: "large"
+                    }, {
+                      children: jsx(Add, {})
+                    }))
                   }))
-                }))
+                }
               }
             })
           }))
@@ -6326,24 +6289,22 @@ const AddLayersPopup = ({
       })), jsx(Box, Object.assign({
         m: 2
       }, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           direction: "row",
           alignItems: "center",
           spacing: 3
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 4
+          children: [jsx(Grid2, Object.assign({
+            size: 4
           }, {
             children: jsx(WMSServerList, {
               availableServices: services,
               service: activeService,
               handleChangeService: handleChangeService
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 8
+          })), jsx(Grid2, Object.assign({
+            size: 8
           }, {
             children: onRenderTree ? onRenderTree(activeService) : jsx(WMSLayerTreeConnect, {
               mapId: "",
@@ -6436,9 +6397,8 @@ const BaseLayerRow = _a => {
     } = _a,
     gridProps = __rest(_a, ["mapId", "preloadedAvailableBaseLayers", "preloadedServices", "tooltip", "settings"]);
   const theme = useTheme();
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "baseLayerRow",
     className: "addLayer-column",
     sx: Object.assign({
@@ -6446,8 +6406,7 @@ const BaseLayerRow = _a => {
       height: '36px'
     }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
   }, gridProps, {
-    children: [jsxs(Grid, Object.assign({
-      item: true,
+    children: [jsxs(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
@@ -6462,8 +6421,7 @@ const BaseLayerRow = _a => {
           layerType: LayerType.baseLayer
         })
       }), (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _d === void 0 ? void 0 : _d.title]
-    })), jsx(Grid, Object.assign({
-      item: true,
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: jsx(BaseLayersConnect, {
@@ -6575,7 +6533,7 @@ const ProjectionSelect = ({
   const index = availableProjections.findIndex(projection => projection.value === currentProjection);
   const currentProjectionObject = availableProjections.find(projection => projection.value === currentProjection);
   const title = t('projection-title');
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     className: "setProjection-column",
     sx: {
@@ -6583,8 +6541,7 @@ const ProjectionSelect = ({
       height: '36px'
     }
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
+    children: [jsx(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
@@ -6599,8 +6556,7 @@ const ProjectionSelect = ({
       }, {
         children: jsx(WorldMapProjection, {})
       }))
-    })), jsx(Grid, Object.assign({
-      item: true,
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: jsx(FormControl, Object.assign({
@@ -6800,7 +6756,7 @@ const LayerManager = ({
             title: error,
             shouldClose: true
           })
-        })), jsxs(Grid, Object.assign({
+        })), jsxs(Grid2, Object.assign({
           container: true,
           "data-testid": "layerManagerRowContainer",
           sx: styles$1.layerRowContainer
@@ -6869,16 +6825,16 @@ const getDialogType = (mapId, isMultiMap, isDocked) => {
   }
   return uiTypes.DialogTypes.LayerManager;
 };
-/**
- * Layer Managerconnected to the store displaying the layers forthe active map Id
- * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
- * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
- *
- * Expects the following props:
- * @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 />```
+/**
+ * Layer Managerconnected to the store displaying the layers forthe active map Id
+ * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
+ * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
+ *
+ * Expects the following props:
+ * @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 />```
  */
 const LayerManagerConnect = ({
   preloadedAvailableBaseLayers,
@@ -7734,22 +7690,22 @@ const useTouchZoomPan = (mapIsActive, mapId) => {
 };
 const TOUCH_PAN_STEP_PERCENTAGE = 0.02;
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const useKeyboardZoomAndPan = (mapIsActive, mapId) => {
   React.useEffect(() => {
@@ -7803,17 +7759,17 @@ const useKeyboardZoomAndPan = (mapIsActive, mapId) => {
 const PAN_STEP_PERCENTAGE = 0.02;
 
 const ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
-/**
- * Connected component used to display the map and selected layers.
- * Includes options to disable the map controls and legend.
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @param {object} [controls.zoomControls] **optional** controls: object - toggle the map controls, zoomControls defaults to true
- * @param {boolean} [displayTimeInMap] **optional** displayTimeInMap: boolean, toggles the mapTime, defaults to true
- * @param {boolean} [showScaleBar] **optional** showScaleBar: boolean, toggles the scaleBar, defaults to true
- * @example
- * ```<MapViewConnect mapId={mapId} controls={{ zoomControls: false }} displayTimeInMap={false} showScaleBar={false}/>```
+/**
+ * Connected component used to display the map and selected layers.
+ * Includes options to disable the map controls and legend.
+ *
+ * Expects the following props:
+ * @param {string} mapId mapId: string - Id of the map
+ * @param {object} [controls.zoomControls] **optional** controls: object - toggle the map controls, zoomControls defaults to true
+ * @param {boolean} [displayTimeInMap] **optional** displayTimeInMap: boolean, toggles the mapTime, defaults to true
+ * @param {boolean} [showScaleBar] **optional** showScaleBar: boolean, toggles the scaleBar, defaults to true
+ * @example
+ * ```<MapViewConnect mapId={mapId} controls={{ zoomControls: false }} displayTimeInMap={false} showScaleBar={false}/>```
  */
 const MapViewConnect = _a => {
   var {
@@ -8140,16 +8096,16 @@ const LegendConnectComponent = ({
     source: uiSource
   });
 };
-/**
- * Legend component connected to the store displaying a legend for every layer shown on the active map Id
- * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
- * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
- *
- * Expects the following props:
- * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
- * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
+/**
+ * Legend component connected to the store displaying a legend for every layer shown on the active map Id
+ * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
+ * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
+ *
+ * Expects the following props:
+ * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
+ * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
 
- * ``` <LegendConnect legendDialogId={legendDialogId} />```
+ * ``` <LegendConnect legendDialogId={legendDialogId} />```
  */
 const LegendConnect = _a => {
   var {
@@ -8186,37 +8142,37 @@ const LegendMapButtonConnect = ({
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-/**
- * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
- * @param layerId
- * @returns Title for the layer
+/**
+ * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
+ * @param layerId
+ * @returns Title for the layer
  */
 const getTitle = layerId => {
   const wmjsLayer = webmapUtils.getWMLayerById(layerId);
   return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
 };
-/**
- * Make a list of GFI Layers to display.
- * @param layers
- * @param mapId
- * @returns
+/**
+ * Make a list of GFI Layers to display.
+ * @param layers
+ * @param mapId
+ * @returns
  */
 const getLayersToUpdate = (layers, mapId) => {
   const wmjsMap = webmapUtils.getWMJSMapById(mapId);
@@ -8224,11 +8180,11 @@ const getLayersToUpdate = (layers, mapId) => {
     return [];
   }
   return layers.filter(layer => layer && layer.enabled && !!webmapUtils.getWMLayerById(layer.id)).map(layer => {
-    /*
-      We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
-      But it seems that its dimension are lazely updated (by ReactMapView).
-      Therefore make a clone of this layer and set its dimensions based on the layer object.
-      Otherwise we risk making a getfeatureinfo call with outdated dimension values.
+    /*
+      We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
+      But it seems that its dimension are lazely updated (by ReactMapView).
+      Therefore make a clone of this layer and set its dimensions based on the layer object.
+      Otherwise we risk making a getfeatureinfo call with outdated dimension values.
     */
     const wmjsLayer = webmapUtils.getWMLayerById(layer.id).cloneLayer();
     return {
@@ -8239,22 +8195,22 @@ const getLayersToUpdate = (layers, mapId) => {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const sanitizeHTML = htmlToBeSanitezed => ({
   __html: DOMPurify.sanitize(htmlToBeSanitezed, {
@@ -8296,9 +8252,9 @@ const GetFeatureInfoDialog = ({
   };
   /* Build a layerlist array with a set of arguments per layer to do the query for */
   const layerToUpdateList = isOpen ? getLayersToUpdate(layers, mapId) : [];
-  /*
-    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
-    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
+  /*
+    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
+    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
   */
   const debouncedlayerListString = useDebounce(layerToUpdateList.map(layer => layer.url).join(','), 100);
   /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
@@ -8380,7 +8336,7 @@ const GetFeatureInfoDialog = ({
           if (!result) {
             return null;
           }
-          return jsxs(Grid, Object.assign({
+          return jsxs(Grid2, Object.assign({
             sx: {
               margin: '4px 6px 4px 6px',
               padding: '6px',
@@ -8684,7 +8640,7 @@ const MyMapLocation = ({
         sx: {
           height: '100%',
           width: '100%',
-          color: theme => theme.palette.mode === 'light' ? '#bad4ff' : '#414751',
+          color: theme => theme.palette.mode === 'light' ? '#bad4ff' : '#45556F',
           animationDuration: '1000ms',
           position: 'absolute',
           left: 0,
@@ -8741,20 +8697,22 @@ const SearchDialog = ({
       id: "dummy-search-field",
       label: t('search-title'),
       variant: "filled",
-      InputProps: {
-        disableUnderline: true,
-        endAdornment: jsx(InputAdornment, Object.assign({
-          position: "end"
-        }, {
-          children: jsx(CustomIconButton, Object.assign({
-            tooltipTitle: t('actions-close'),
-            edge: "end",
-            onClick: onClose,
-            size: "large"
+      slotProps: {
+        input: {
+          disableUnderline: true,
+          endAdornment: jsx(InputAdornment, Object.assign({
+            position: "end"
           }, {
-            children: jsx(Close, {})
+            children: jsx(CustomIconButton, Object.assign({
+              tooltipTitle: t('actions-close'),
+              edge: "end",
+              onClick: onClose,
+              size: "large"
+            }, {
+              children: jsx(Close, {})
+            }))
           }))
-        }))
+        }
       }
     })]
   })) : null;
@@ -8775,22 +8733,22 @@ const SearchControlConnect = ({
   });
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const useTurnOffAutoUpdateIfItsOn = mapId => {
   const isAutoUpdating = useSelector(store => mapSelectors.isAutoUpdating(store, mapId));
@@ -8805,8 +8763,8 @@ const useTurnOffAutoUpdateIfItsOn = mapId => {
   };
   return turnOffAutoUpdateIfItsOn;
 };
-/**
- * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
+/**
+ * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */
 const getTimeBounds = dimensions => {
   const defaultStartEnd = dateUtils.unix(dateUtils.set(dateUtils.utc(), {
@@ -8974,13 +8932,13 @@ const TimeSpanButtonConnect = ({
   });
 };
 
-/**
- * OptionsMenuButtonConnect component with components connected to the store displaying the options menu button
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @example
- * ``` <OptionsMenuButtonConnect mapId={mapId} />```
+/**
+ * OptionsMenuButtonConnect component with components connected to the store displaying the options menu button
+ *
+ * Expects the following props:
+ * @param {string} mapId mapId: string - Id of the map
+ * @example
+ * ``` <OptionsMenuButtonConnect mapId={mapId} />```
  */
 const OptionsMenuButtonConnect = ({
   mapId
@@ -9125,14 +9083,14 @@ const NowButtonConnect = ({
   });
 };
 
-/**
- * TimeSliderButtons component with components connected to the store displaying the time slider buttons
- *
- * 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} sourceId={sourceId} />```
+/**
+ * TimeSliderButtons component with components connected to the store displaying the time slider buttons
+ *
+ * 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} sourceId={sourceId} />```
  */
 const TimeSliderButtonsConnectComponent = ({
   sourceId,
@@ -10055,10 +10013,10 @@ const useGetLatestReferenceTime = inputLayer => {
   }, [inputLayer]);
   return latestReferenceTime;
 };
-/**
- * Custom hook to find out if the list of syncgroup id's contains a group which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
- * @param syncGroupsIds A string array of syncgroup ids
- * @returns True if indeed a group is included which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+/**
+ * Custom hook to find out if the list of syncgroup id's contains a group which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+ * @param syncGroupsIds A string array of syncgroup ids
+ * @returns True if indeed a group is included which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
  */
 const useHasSyncGroupWithLayerActions = syncGroupsIds => {
   /* Get Syncgroupstate */
@@ -10145,7 +10103,7 @@ const useGetReferenceTimes = inputLayer => {
     const wmLayer = new WMLayer(Object.assign({}, inputLayer));
     wmLayer.parseLayerPromise().then(layer => {
       const refTimeDim = layer.getDimension('reference_time');
-      /* Loop through all values of the dimension.
+      /* Loop through all values of the dimension.
          A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
       for (let j = 0; j < refTimeDim.size(); j += 1) {
         const referenceTimeValue = refTimeDim.getValueForIndex(j);
@@ -10436,11 +10394,11 @@ const SyncGroupViewer = ({
   const {
     t
   } = useCoreTranslation();
-  /*
-      _____ Handle Toggle _____
-        - Handles checking, unchecking and toggling between in groups
-        1. If checkbox is checked      -> uncheck it
-        2. If checkbox is not checked  -> check if its checked elsewhere and uncheck it if found
+  /*
+      _____ Handle Toggle _____
+        - Handles checking, unchecking and toggling between in groups
+        1. If checkbox is checked      -> uncheck it
+        2. If checkbox is not checked  -> check if its checked elsewhere and uncheck it if found
   */
   const handleToggle = (groupCategory, groupId, sourceId) => {
     const {
@@ -10475,10 +10433,10 @@ const SyncGroupViewer = ({
       });
     }
   };
-  /*
-      _____ Add new group _____
-        - Called when user clicks on + in the sidepane
-        - Sends an action to add a new group in Redux
+  /*
+      _____ Add new group _____
+        - Called when user clicks on + in the sidepane
+        - Sends an action to add a new group in Redux
   */
   const addNewGroup = (groupCategory, groupId) => {
     syncGroupsSelector.groupTypes.forEach(({
@@ -10496,10 +10454,10 @@ const SyncGroupViewer = ({
       }
     });
   };
-  /*
-      _____ Remove Group _____
-        - Called when user clicks on the trashcan icon in sidepane
-        - Send an action to remove the group in Redux
+  /*
+      _____ Remove Group _____
+        - Called when user clicks on the trashcan icon in sidepane
+        - Send an action to remove the group in Redux
   */
   const removeGroup = (groupCategory, groupId) => {
     syncGroupsSelector.groupTypes.forEach(({
@@ -10588,22 +10546,22 @@ const SyncGroupViewerConnect = () => {
   });
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const baseLayer = {
   name: 'arcGisSat',
@@ -10705,10 +10663,10 @@ var testLayers = /*#__PURE__*/Object.freeze({
   simplePolygonGeoJSON: simplePolygonGeoJSON
 });
 
-/**
- * A Provider component which provides the GeoWeb theme
- * @param children
- * @returns
+/**
+ * A Provider component which provides the GeoWeb theme
+ * @param children
+ * @returns
  */
 const CoreThemeProvider = ({
   children,
@@ -10726,11 +10684,11 @@ const ThemeWrapperWithModules = withEggs([...coreModuleConfig, layerSelectConfig
 }, {
   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.
- * @param children
- * @returns
+/**
+ * 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.
+ * @param children
+ * @returns
  */
 const CoreThemeStoreProvider = ({
   children,
@@ -10766,22 +10724,22 @@ const DemoWrapperConnect = props => jsx(CoreI18nProvider, {
   children: jsx(CoreThemeStoreProvider, Object.assign({}, props))
 });
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const NavigateSetter = () => {
   // stores navigate hook method to historyDict, so it can be used outside components