@opengeoweb/shared 9.28.1 → 9.29.1

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox, ListItemSecondaryAction } from '@mui/material';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import * as React from 'react';
 import React__default, { useRef, Component } from 'react';
@@ -3472,22 +3472,22 @@ $$a({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   }
 });
 
-/* *
- * 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 showPrompt = event => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3508,22 +3508,22 @@ function usePreventBrowserClose(shouldPreventClose) {
   }, [shouldPreventClose]);
 }
 
-/* *
- * 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 pollingIntervalTimeout = 300000;
 const usePoller = (deps, callback, pollingInterval = pollingIntervalTimeout) => {
@@ -3547,22 +3547,22 @@ const usePoller = (deps, callback, pollingInterval = pollingIntervalTimeout) =>
   return interval;
 };
 
-/* *
- * 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)
  * */
 function usePrevious(value) {
   const ref = React.useRef();
@@ -3572,22 +3572,22 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/* *
- * 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 useIsMounted = () => {
   const isMounted = React.useRef(false);
@@ -3667,15 +3667,15 @@ const useMakeSureContainerStaysInsideWindow = (nodeRef, position, setPosition) =
   }, [onResizeWindow]);
 };
 
-/*
-  Accepts a value and timeout and will debounce
+/*
+  Accepts a value and timeout and will debounce
   
-  @param {string} value: value of element
-  @param {timeout} number: timer
-  @return {value: string}
+  @param {string} value: value of element
+  @param {timeout} number: timer
+  @return {value: string}
 
-  @example:
-   const debouncedName = useDebounce('testing', 2000)
+  @example:
+   const debouncedName = useDebounce('testing', 2000)
 */
 const useDebounce = (value, timeout) => {
   const [state, setState] = React.useState(value);
@@ -4615,12 +4615,12 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 }
 
 // TODO: (Sander de Snaijer 2020-07-13) this error wrappper should get more (non-breaking?) logic when we have decided how to handle errors.
-/**
- * ErrorBoundary
- * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
- *
- * @example
- * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
+/**
+ * ErrorBoundary
+ * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
+ *
+ * @example
+ * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
  */
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -4835,16 +4835,12 @@ const MenuItemTheme = () => {
   return jsx(MenuItem, Object.assign({
     divider: true
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true
     }, {
-      children: [jsx(Grid, Object.assign({
-        item: true
-      }, {
+      children: [jsx(Grid2, {
         children: t('shared-choose-app-mode')
-      })), jsx(Grid, Object.assign({
-        item: true
-      }, {
+      }), jsx(Grid2, {
         children: jsxs(RadioGroup, Object.assign({
           onChange: toggleTheme
         }, {
@@ -4862,7 +4858,7 @@ const MenuItemTheme = () => {
             label: t('shared-dark')
           })]
         }))
-      }))]
+      })]
     }))
   }));
 };
@@ -4975,7 +4971,7 @@ const ToolHeader = ({
     role: "heading",
     "aria-label": "toolheader"
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true,
       alignItems: "center",
       sx: {
@@ -4983,17 +4979,19 @@ const ToolHeader = ({
         height: styles.height
       }
     }, {
-      children: [jsxs(Grid, Object.assign({
+      children: [jsxs(Grid2, Object.assign({
         className: "header-left",
-        item: true,
-        xs: columnSizeLeft,
         sx: {
           paddingRight: 1
+        },
+        size: {
+          sm: columnSizeLeft
         }
       }, {
-        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid, Object.assign({
+        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid2, Object.assign({
           container: true,
-          justifyContent: "flex-start"
+          justifyContent: "flex-start",
+          size: "grow"
         }, {
           children: jsx(CustomIconButton, Object.assign({
             "data-testid": "dragBtn",
@@ -5006,48 +5004,45 @@ const ToolHeader = ({
             children: _dragHandleIcon
           }))
         })), _leftHeaderComponent && _leftHeaderComponent]
-      })), jsx(Grid, Object.assign({
+      })), jsxs(Grid2, Object.assign({
         className: "header-title",
-        item: true,
-        xs: title ? columnSizeTitle : 0
+        size: title ? columnSizeTitle : 0,
+        container: true,
+        justifyContent: "center",
+        alignItems: "center"
       }, {
-        children: jsxs(Grid, Object.assign({
-          container: true,
-          justifyContent: "center",
-          alignItems: "center"
+        children: [title && jsx(Typography, Object.assign({
+          variant: "h2",
+          noWrap: true,
+          sx: {
+            fontSize: styles.fontSize,
+            fontWeight: styles.fontWeight,
+            lineHeight: styles.lineHeight,
+            marginTop: styles.marginTop,
+            textAlign: 'center'
+          },
+          role: "heading"
         }, {
-          children: [title && jsx(Typography, Object.assign({
-            variant: "h2",
-            noWrap: true,
-            sx: {
-              fontSize: styles.fontSize,
-              fontWeight: styles.fontWeight,
-              lineHeight: styles.lineHeight,
-              marginTop: styles.marginTop
-            },
-            role: "heading"
-          }, {
-            children: title
-          })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
-            "data-testid": "dragBtn-xxs",
-            disableRipple: true,
-            sx: {
-              pointerEvents: 'none',
-              transform: 'rotate(90deg)',
-              '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
-                height: 12
-              })
-            }
-          }, {
-            children: _dragHandleIcon
-          }))]
-        }))
-      })), jsxs(Grid, Object.assign({
+          children: title
+        })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
+          "data-testid": "dragBtn-xxs",
+          disableRipple: true,
+          sx: {
+            pointerEvents: 'none',
+            right: -12,
+            transform: 'rotate(90deg)',
+            '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
+              height: 12
+            })
+          }
+        }, {
+          children: _dragHandleIcon
+        }))]
+      })), jsxs(Grid2, Object.assign({
         className: "header-right",
-        item: true,
-        xs: columnSizeIcon,
         container: true,
-        justifyContent: "flex-end"
+        justifyContent: "flex-end",
+        size: columnSizeIcon
       }, {
         children: [_rightHeaderComponent && _rightHeaderComponent, _onClose && jsx(CustomTooltip, Object.assign({
           title: t('shared-close'),
@@ -5915,14 +5910,14 @@ const ShortcutList = ({
       },
       divider: index !== shortcuts.length - 1
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         container: true,
         direction: "row",
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        size: "grow"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
+        children: [jsx(Grid2, Object.assign({
           sx: {
             fontSize: 12,
             fontWeight: 300,
@@ -5931,9 +5926,7 @@ const ShortcutList = ({
           }
         }, {
           children: t(shortcut.titleKey)
-        })), jsx(Grid, Object.assign({
-          item: true
-        }, {
+        })), jsx(Grid2, {
           children: jsx(Box, Object.assign({
             sx: {
               alignItems: 'center'
@@ -5941,7 +5934,7 @@ const ShortcutList = ({
           }, {
             children: _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description
           }))
-        }))]
+        })]
       }))
     }), shortcut.titleKey))
   }));
@@ -6021,14 +6014,12 @@ const UserMenuItemCheatSheet = () => {
       onClick: onOpen,
       divider: true
     }, {
-      children: jsx(Grid, Object.assign({
+      children: jsx(Grid2, Object.assign({
         container: true
       }, {
-        children: jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: jsx(Grid2, {
           children: t('shared-cheat-sheet')
-        }))
+        })
       }))
     })), jsx(Backdrop, Object.assign({
       "data-testid": "cheatsheet-content",
@@ -6119,14 +6110,12 @@ const UserMenuItemSentryRecording = ({
       onClick: onOpen,
       divider: true
     }, {
-      children: jsx(Grid, Object.assign({
+      children: jsx(Grid2, Object.assign({
         container: true
       }, {
-        children: jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: jsx(Grid2, {
           children: t('shared-sentry-recording')
-        }))
+        })
       }))
     })), jsx(Backdrop, Object.assign({
       "data-testid": "sentryRecording-content",
@@ -6146,7 +6135,7 @@ const UserMenuItemSentryRecording = ({
         onClose: onClose,
         bounds: "parent"
       }, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           spacing: 4,
           sx: {
@@ -6154,9 +6143,8 @@ const UserMenuItemSentryRecording = ({
             paddingRight: '70px'
           }
         }, {
-          children: [jsx(Grid, Object.assign({
+          children: [jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
@@ -6165,9 +6153,8 @@ const UserMenuItemSentryRecording = ({
             children: jsx(Typography, {
               children: t('shared-sentry-information')
             })
-          })), jsx(Grid, Object.assign({
+          })), jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
@@ -6176,9 +6163,8 @@ const UserMenuItemSentryRecording = ({
             children: jsx(Typography, {
               children: t('shared-sentry-enable-message')
             })
-          })), jsxs(Grid, Object.assign({
+          })), jsxs(Grid2, Object.assign({
             container: true,
-            item: true,
             alignItems: "center",
             direction: "column"
           }, {
@@ -6191,9 +6177,8 @@ const UserMenuItemSentryRecording = ({
             }) : jsxs(Typography, {
               children: [" ", t('shared-sentry-enable')]
             })]
-          })), jsxs(Grid, Object.assign({
+          })), jsxs(Grid2, Object.assign({
             container: true,
-            item: true,
             alignItems: "center",
             direction: "column"
           }, {
@@ -6219,9 +6204,8 @@ const UserMenuItemSentryRecording = ({
                 children: ["(", t('shared-sentry-cors-wait'), ")"]
               }))]
             })]
-          })), jsx(Grid, Object.assign({
+          })), jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center"
           }, {
             children: jsx(Typography, Object.assign({
@@ -6250,22 +6234,22 @@ const useUserMenu = (open = false) => {
   };
 };
 
-/* *
- * 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 getInitials = name => {
   if (!name) {
@@ -6547,19 +6531,17 @@ const ToggleMenu = ({
           disabled: isDisabled,
           selected: menuItem.isSelected
         }, {
-          children: jsxs(Grid, Object.assign({
+          children: jsxs(Grid2, Object.assign({
             container: true,
             spacing: 2,
-            justifyContent: "space-between"
+            justifyContent: "space-between",
+            size: "grow"
           }, {
-            children: [jsx(Grid, Object.assign({
-              item: true
-            }, {
+            children: [jsx(Grid2, {
               children: jsx(ListItemText, {
                 children: text
               })
-            })), icon && jsx(Grid, Object.assign({
-              item: true,
+            }), icon && jsx(Grid2, Object.assign({
               alignItems: "flex-end"
             }, {
               children: jsx(ListItemIcon, Object.assign({
@@ -6798,6 +6780,7 @@ function withEggs(eggs) {
 const CustomAccordion = _a => {
   var {
       title,
+      title2,
       defaultExpanded = true,
       disableGutters = true,
       expandedElevation = 3,
@@ -6808,7 +6791,7 @@ const CustomAccordion = _a => {
       children,
       amountOfItems
     } = _a,
-    props = __rest(_a, ["title", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"]);
+    props = __rest(_a, ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"]);
   const [expanded, setExpanded] = React.useState(defaultExpanded);
   const theme = useTheme();
   const iconColor = theme.palette.geowebColors.buttons.icon.default.color;
@@ -6839,22 +6822,38 @@ const CustomAccordion = _a => {
           width: '100%'
         }
       }, {
-        children: [jsx(Box, Object.assign({
+        children: [jsxs(Box, Object.assign({
           sx: {
+            width: '100%',
             display: 'flex',
-            justifyContent: 'flex-start'
+            justifyContent: 'space-between'
           }
         }, {
-          children: title
-        })), amountOfItems ? jsx(Box, Object.assign({
+          children: [jsx(Box, Object.assign({
+            sx: {
+              display: 'flex',
+              justifyContent: 'flex-start'
+            }
+          }, {
+            children: title
+          })), jsx(Box, Object.assign({
+            sx: {
+              display: 'flex',
+              justifyContent: 'flex-end',
+              paddingRight: '25px'
+            }
+          }, {
+            children: title2
+          }))]
+        })), jsx(Box, Object.assign({
           sx: {
             display: 'flex',
             justifyContent: 'flex-end',
-            marginRight: '15px'
+            marginRight: '10px'
           }
         }, {
           children: amountOfItems
-        })) : null]
+        }))]
       }))
     })), jsx(AccordionDetails, Object.assign({
       sx: detailsSx
@@ -7938,23 +7937,25 @@ const SearchField$1 = ({
     },
     autoFocus: true,
     fullWidth: true,
-    InputProps: {
-      endAdornment: jsx(InputAdornment, Object.assign({
-        position: "end"
-      }, {
-        children: jsx(SearchFieldButton, {
-          setPopupIsOpen: () => {
-            onOpenServicePopup(localSearchString);
-            setLocalSearchString('');
-          },
-          localSearchString: localSearchString,
-          onClickClear: () => {
-            setLocalSearchString('');
-            setSearchFilterDebounced('');
-            setUrlIsValid(false);
-          }
-        })
-      }))
+    slotProps: {
+      input: {
+        endAdornment: jsx(InputAdornment, Object.assign({
+          position: "end"
+        }, {
+          children: jsx(SearchFieldButton, {
+            setPopupIsOpen: () => {
+              onOpenServicePopup(localSearchString);
+              setLocalSearchString('');
+            },
+            localSearchString: localSearchString,
+            onClickClear: () => {
+              setLocalSearchString('');
+              setSearchFilterDebounced('');
+              setUrlIsValid(false);
+            }
+          })
+        }))
+      }
     }
   });
 };
@@ -8364,12 +8365,15 @@ const FilterChip = ({
   isSelected: _isSelected = false,
   isDisabled: _isDisabled = false,
   handleClick: _handleClick = () => {},
-  onAction,
+  onClick,
   actionIcon,
   size: _size = 'small'
 }) => {
   const theme = useTheme();
+  const chipRef = useRef(null);
+  const clickHandler = () => onClick ? onClick(chipRef.current) : _handleClick(id, _isSelected);
   return jsx(Chip, {
+    ref: chipRef,
     size: _size,
     id: id,
     label: label,
@@ -8386,13 +8390,13 @@ const FilterChip = ({
       '& .MuiChip-filled': {
         border: '1px solid transparent'
       },
-      '& .MuiChip-labelMedium': {
+      '&.MuiChip-sizeMedium > .MuiChip-label': {
         overflow: 'visible'
       }
     },
-    onClick: () => _handleClick(id, _isSelected),
+    onClick: clickHandler,
     deleteIcon: actionIcon,
-    onDelete: onAction
+    onDelete: actionIcon ? clickHandler : undefined
   });
 };
 
@@ -8478,19 +8482,21 @@ const SearchField = ({
       handleValueChangeDebounced(e.target.value);
       setLocalValue(e.target.value);
     },
-    InputProps: {
-      endAdornment: jsx(InputAdornment, Object.assign({
-        position: "end"
-      }, {
-        children: localValue ? jsx(ClearButton, {
-          onClick: () => {
-            setLocalValue('');
-            valueChanged('');
-          }
-        }) : jsx(SearchButton, {
-          label: label
-        })
-      }))
+    slotProps: {
+      input: {
+        endAdornment: jsx(InputAdornment, Object.assign({
+          position: "end"
+        }, {
+          children: localValue ? jsx(ClearButton, {
+            onClick: () => {
+              setLocalValue('');
+              valueChanged('');
+            }
+          }) : jsx(SearchButton, {
+            label: label
+          })
+        }))
+      }
     }
   });
 };
@@ -8596,7 +8602,29 @@ const FilterListItem = ({
           paddingLeft: '0px',
           paddingRight: '50px',
           fontSize: '12px'
-        }
+        },
+        secondaryAction: jsx(CustomIconButton, Object.assign({
+          "aria-label": `Only ${filter.name}`,
+          style: {
+            backgroundColor: 'transparent',
+            width: 'auto',
+            display: isHovering ? 'block' : 'none'
+          },
+          edge: "end",
+          onClick: () => {
+            selectOnlyOne(filter.id);
+          }
+        }, {
+          children: jsx(Typography, Object.assign({
+            sx: {
+              color: 'geowebColors.buttons.primary.default.fill',
+              fontSize: '14px',
+              fontWeight: 500
+            }
+          }, {
+            children: t('shared-only')
+          }))
+        }))
       }, {
         children: [jsx(ListItemIcon, Object.assign({
           sx: {
@@ -8605,8 +8633,10 @@ const FilterListItem = ({
         }, {
           children: jsx(Checkbox, {
             inputProps: {
-              'aria-label': filter.name
+              'aria-label': filter.name,
+              checked: filter.checked
             },
+            className: filter.checked ? 'is-checked' : '',
             color: "secondary",
             checked: filter.checked,
             onChange: () => {
@@ -8622,49 +8652,29 @@ const FilterListItem = ({
           })
         })), children || jsx(FilterLabel, {
           name: name
-        }), isHovering ? jsx(ListItemSecondaryAction, {
-          children: jsx(CustomIconButton, Object.assign({
-            "aria-label": `Only ${filter.name}`,
-            style: {
-              backgroundColor: 'transparent',
-              width: 'auto'
-            },
-            edge: "end",
-            onClick: () => selectOnlyOne(filter.id)
-          }, {
-            children: jsx(Typography, Object.assign({
-              sx: {
-                color: 'geowebColors.buttons.primary.default.fill',
-                fontSize: '14px',
-                fontWeight: 500
-              }
-            }, {
-              children: t('shared-only')
-            }))
-          }))
-        }) : null]
+        })]
       }))
     }));
   }
   return null;
 };
 
-/* *
- * 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 DEFAULT_ERROR_MESSAGE = 'An error has occurred';
 // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
@@ -8759,22 +8769,22 @@ fixRegExpWellKnownSymbolLogic('match', function (MATCH, nativeMatch, maybeCallNa
   ];
 });
 
-/* *
- * 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 DATE_FORMAT_DATEPICKER = 'dd/MM/yyyy HH:mm';
 const DATE_FORMAT_UTC = "yyyy-MM-dd'T'HH:mm:ss'Z'";
@@ -8784,58 +8794,58 @@ const DATE_FORMAT_NAME_OF_DAY_MONTH = 'eee dd MMM HH:mm';
 const DATE_FORMAT_NAME_OF_MONTH = 'dd MMM yyyy, HH:mm';
 const DATE_FORMAT_NAME_OF_DAY = 'eee dd/MM/yyyy HH:mm';
 
-/**
- * Parsing date strings with geoweb dateUtils:
- *
- * An ISO String *with timezone* can safely be parsed directly to a date:
- *
- * date = new Date('2022-10-10T15:30:00Z')
- * date = new Date('2022-10-10T15:30:00+00:00')
- * date = new Date('2022-10-10T15:30:00+02:00')
- *
- * or using the dateUtils isoStringToDate function *with utc=false*
- *
- * date = isoStringToDate('2022-10-10T15:30:00Z', false)
- *
- * An ISO String *without a timezone* can be parsed with isoStringToDate
- *
- * date = isoStringToDate('2022-10-10T15:30:00')
- *
- * *Do not parse ISO without timezone using `new Date()` unless you correct for the local timezone*
- *
- * To parse an arbitrary date string with timezone use:
- *
- * date = stringToDate('2022.11.10, 11:15 +01:00', 'yyyy.MM.dd, HH:mm xxx', false)
- *
- * To parse an arbitrary date string without timezone use:
- *
- * date = stringToDate('2022.11.10, 11:15', 'yyyy.MM.dd, HH:mm')
- *
- *
- * To safely convert dates to utc strings use:
- *
- * date.toISOString()
- *
- * To get parts of UTC time use
- *
- * date.getUTCHours()
- * date.getUTCMins()
- *
- * To parse an arbitrary date string to a UTC string use:
- *
- * dateToString(new Date('2022-10-10T15:30:00Z'), 'HH:ss dd MMM yyyy')
- *
+/**
+ * Parsing date strings with geoweb dateUtils:
+ *
+ * An ISO String *with timezone* can safely be parsed directly to a date:
+ *
+ * date = new Date('2022-10-10T15:30:00Z')
+ * date = new Date('2022-10-10T15:30:00+00:00')
+ * date = new Date('2022-10-10T15:30:00+02:00')
+ *
+ * or using the dateUtils isoStringToDate function *with utc=false*
+ *
+ * date = isoStringToDate('2022-10-10T15:30:00Z', false)
+ *
+ * An ISO String *without a timezone* can be parsed with isoStringToDate
+ *
+ * date = isoStringToDate('2022-10-10T15:30:00')
+ *
+ * *Do not parse ISO without timezone using `new Date()` unless you correct for the local timezone*
+ *
+ * To parse an arbitrary date string with timezone use:
+ *
+ * date = stringToDate('2022.11.10, 11:15 +01:00', 'yyyy.MM.dd, HH:mm xxx', false)
+ *
+ * To parse an arbitrary date string without timezone use:
+ *
+ * date = stringToDate('2022.11.10, 11:15', 'yyyy.MM.dd, HH:mm')
+ *
+ *
+ * To safely convert dates to utc strings use:
+ *
+ * date.toISOString()
+ *
+ * To get parts of UTC time use
+ *
+ * date.getUTCHours()
+ * date.getUTCMins()
+ *
+ * To parse an arbitrary date string to a UTC string use:
+ *
+ * dateToString(new Date('2022-10-10T15:30:00Z'), 'HH:ss dd MMM yyyy')
+ *
  */
-/**
- * Parse an ISO string to a date
- *
- * Expects the following props:
- * @param {string} input - string containing date
- *
- * @returns {Date} Date
- * @example
- * ``` isoStringToDate("2022-5-10T20:32:00+00:00") ```
- * ``` isoStringToDate("2022-5-10T20:32:00:00Z", false) ```
+/**
+ * Parse an ISO string to a date
+ *
+ * Expects the following props:
+ * @param {string} input - string containing date
+ *
+ * @returns {Date} Date
+ * @example
+ * ``` isoStringToDate("2022-5-10T20:32:00+00:00") ```
+ * ``` isoStringToDate("2022-5-10T20:32:00:00Z", false) ```
  */
 const isoStringToDate = (input, utc = true) => {
   if (!input) {
@@ -8856,20 +8866,20 @@ const isValidIsoDateString = input => {
   }
   return isoStringToDate(input) !== undefined;
 };
-/**
- * Parse a string to a date
- *
- * ***NOTE: String will be parsed in local time if utc is set to false***
- *
- * Expects the following props:
- * @param {string} input - string containing date
- * @param {string} strFormat - format of the string, see: https://date-fns.org/v2.29.3/docs/parse
- * @param {boolean} utc [ default = true ] - boolean indicating whether to parse as UTC
- * @param {Date} referenceDate [ default = new Date() ] - defines values missing from the parsed dateString
- *
- * @returns {Date} Date
- * @example
- * ``` stringToDate("2022 5 10 20:32", 'yyyy M d HH:mm')) ```
+/**
+ * Parse a string to a date
+ *
+ * ***NOTE: String will be parsed in local time if utc is set to false***
+ *
+ * Expects the following props:
+ * @param {string} input - string containing date
+ * @param {string} strFormat - format of the string, see: https://date-fns.org/v2.29.3/docs/parse
+ * @param {boolean} utc [ default = true ] - boolean indicating whether to parse as UTC
+ * @param {Date} referenceDate [ default = new Date() ] - defines values missing from the parsed dateString
+ *
+ * @returns {Date} Date
+ * @example
+ * ``` stringToDate("2022 5 10 20:32", 'yyyy M d HH:mm')) ```
  */
 const stringToDate = (input, strFormat, utc = true, referenceDate = new Date()) => {
   if (!input) {
@@ -8890,19 +8900,19 @@ const dateToIsoString = input => {
   }
   return input.toISOString();
 };
-/**
- * Use this if you initialise a date without a timezone to set it to utc correctly
- * eg.
- *   new Date(2022, 10, 12, 15, 30)
- * should be:
- *   setUTCDate(new Date(2022, 10, 12, 15, 30))
- *
- * Expects the following props:
- * @param {Date} inDate - date to be set to UTC
- *
- * @returns {Date} - Date in UTC
- * @example
- * ``` setUTCDate(new Date(2022, 10, 12, 15, 30)) ```
+/**
+ * Use this if you initialise a date without a timezone to set it to utc correctly
+ * eg.
+ *   new Date(2022, 10, 12, 15, 30)
+ * should be:
+ *   setUTCDate(new Date(2022, 10, 12, 15, 30))
+ *
+ * Expects the following props:
+ * @param {Date} inDate - date to be set to UTC
+ *
+ * @returns {Date} - Date in UTC
+ * @example
+ * ``` setUTCDate(new Date(2022, 10, 12, 15, 30)) ```
  */
 const setUTCDate = inDate => {
   if (!inDate || !isValid(inDate)) {
@@ -8913,17 +8923,17 @@ const setUTCDate = inDate => {
   utcDate.setUTCHours(inDate.getHours(), inDate.getMinutes(), inDate.getSeconds(), inDate.getMilliseconds());
   return utcDate;
 };
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
- * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
- *
- * @returns {string} - formatted date string
- * @example
- * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
+/**
+ * Format a date to a string
+ *
+ * Expects the following props:
+ * @param {Date} inDate - date to be formatted
+ * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
+ * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
+ *
+ * @returns {string} - formatted date string
+ * @example
+ * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
  */
 const dateToString = (inDate, strFormat = DATE_FORMAT_UTC, utc = true) => {
   if (!inDate || !isValid(inDate)) {
@@ -8932,19 +8942,19 @@ const dateToString = (inDate, strFormat = DATE_FORMAT_UTC, utc = true) => {
   const formattedDate = utc ? format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat) : format(inDate, strFormat);
   return formattedDate;
 };
-/**
- * Find out if a date is between two other dates.
- *
- * Inclusivity parameter matches that used in momentjs where '[' indicates inclusion and '(' indicates exclusion.
- *
- * Expects the following props:
- * @param {Date} date - date to be tested
- * @param {Date} from - first date
- * @param {Date} to - last date
- * @param {string} inclusivity - [default: '()'] Must be one of : '()', '[]', '(]', '[)'
- *
- * @returns {boolen} - true if date is between, otherwise false
- *
+/**
+ * Find out if a date is between two other dates.
+ *
+ * Inclusivity parameter matches that used in momentjs where '[' indicates inclusion and '(' indicates exclusion.
+ *
+ * Expects the following props:
+ * @param {Date} date - date to be tested
+ * @param {Date} from - first date
+ * @param {Date} to - last date
+ * @param {string} inclusivity - [default: '()'] Must be one of : '()', '[]', '(]', '[)'
+ *
+ * @returns {boolen} - true if date is between, otherwise false
+ *
  */
 const isBetween = (date, from, to, inclusivity = '()') => {
   if (!['()', '[]', '(]', '[)'].includes(inclusivity)) {
@@ -8954,25 +8964,25 @@ const isBetween = (date, from, to, inclusivity = '()') => {
   const isAfterEqual = inclusivity[1] === ']';
   return (isBeforeEqual ? isEqual(from, date) || isBefore(from, date) : isBefore(from, date)) && (isAfterEqual ? isEqual(to, date) || isAfter(to, date) : isAfter(to, date));
 };
-/**
- * Creates a new Date object with the specified date and time, or the current date and time if no arguments are provided.
- *
- * @param yearOrIsoString The year for the new Date object, or an ISO-formatted string representing the date and time.
- * @param month The month for the new Date object (0-11).
- * @param day The day for the new Date object (1-31).
- * @param hours The hour for the new Date object (0-23).
- * @param minutes The minute for the new Date object (0-59).
- * @param seconds The second for the new Date object (0-59).
- * @param milliseconds The millisecond for the new Date object (0-999).
- * @returns A new Date object with the specified date and time, or the current date and time if no arguments are provided.
- *
- * @example
- * createDate(2022, 11, 13);
- * // => 2022-12-13T00:00:00.000Z
- *
- * @example
- * createDate('2022-12-13T00:00:00.000Z');
- * // => 2022-12-13T00:00:00.000Z
+/**
+ * Creates a new Date object with the specified date and time, or the current date and time if no arguments are provided.
+ *
+ * @param yearOrIsoString The year for the new Date object, or an ISO-formatted string representing the date and time.
+ * @param month The month for the new Date object (0-11).
+ * @param day The day for the new Date object (1-31).
+ * @param hours The hour for the new Date object (0-23).
+ * @param minutes The minute for the new Date object (0-59).
+ * @param seconds The second for the new Date object (0-59).
+ * @param milliseconds The millisecond for the new Date object (0-999).
+ * @returns A new Date object with the specified date and time, or the current date and time if no arguments are provided.
+ *
+ * @example
+ * createDate(2022, 11, 13);
+ * // => 2022-12-13T00:00:00.000Z
+ *
+ * @example
+ * createDate('2022-12-13T00:00:00.000Z');
+ * // => 2022-12-13T00:00:00.000Z
  */
 const createDate = (yearOrIsoString, month, day, hours = 0, minutes = 0, seconds = 0, milliseconds = 0) => {
   if (yearOrIsoString === undefined) {
@@ -8983,121 +8993,121 @@ const createDate = (yearOrIsoString, month, day, hours = 0, minutes = 0, seconds
   }
   return new Date(yearOrIsoString, month, day, hours, minutes, seconds, milliseconds);
 };
-/**
- *
- * @param date
- * @param duration
- * @returns {Date} the new Date
+/**
+ *
+ * @param date
+ * @param duration
+ * @returns {Date} the new Date
  */
 const add = (date, duration) => {
   return add$1(date, duration);
 };
-/**
- *
- * @param date
- * @param duration
- * @returns {Date} the new Date
+/**
+ *
+ * @param date
+ * @param duration
+ * @returns {Date} the new Date
  */
 const sub = (date, duration) => {
   return sub$1(date, duration);
 };
-/**
- * Finds the number of years between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
+/**
+ * Finds the number of years between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
  */
 const differenceInYears = (dateLeft, dateRight) => {
   return differenceInYears$1(dateLeft, dateRight);
 };
-/**
- * Finds the number of months between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
+/**
+ * Finds the number of months between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
  */
 const differenceInMonths = (dateLeft, dateRight) => {
   return differenceInMonths$1(dateLeft, dateRight);
 };
-/**
- * Finds the number of days between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
+/**
+ * Finds the number of days between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
  */
 const differenceInDays = (dateLeft, dateRight) => {
   return differenceInDays$1(dateLeft, dateRight);
 };
-/**
- * Finds the number of minuts between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
+/**
+ * Finds the number of minuts between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
  */
 const differenceInMinutes = (dateLeft, dateRight) => {
   return differenceInMinutes$1(dateLeft, dateRight);
 };
-/**
- * Finds the number of hours between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of hours
+/**
+ * Finds the number of hours between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of hours
  */
 const differenceInHours = (dateLeft, dateRight, roundingMethod) => {
   return roundingMethod ? differenceInHours$1(dateLeft, dateRight, {
     roundingMethod
   }) : differenceInHours$1(dateLeft, dateRight);
 };
-/**
- * Finds the number of seconds between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
+/**
+ * Finds the number of seconds between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
  */
 const differenceInSeconds = (dateLeft, dateRight) => {
   return differenceInSeconds$1(dateLeft, dateRight);
 };
-/**
- *
- * @param date - the date to be rounded
- * @param options - the options for rounding
- * @returns the new date
+/**
+ *
+ * @param date - the date to be rounded
+ * @param options - the options for rounding
+ * @returns the new date
  */
 const roundToNearestMinutes = (date, options) => {
   return roundToNearestMinutes$1(date, options);
 };
-/**
- *
- * @param date - the date that should be before the other one to return true
- * @param dateToCompare -the date to compare with
- *
- * @returns the first date is before the second date
+/**
+ *
+ * @param date - the date that should be before the other one to return true
+ * @param dateToCompare -the date to compare with
+ *
+ * @returns the first date is before the second date
  */
 const isBefore = (date, dateToCompare) => {
   const before = isBefore$1(date, dateToCompare);
   return before;
 };
-/**
- *
- * @param date - the date that should be after the other one to return true
- * @param dateToCompare -the date to compare with
- *
- * @returns the first date is after the second date
+/**
+ *
+ * @param date - the date that should be after the other one to return true
+ * @param dateToCompare -the date to compare with
+ *
+ * @returns the first date is after the second date
  */
 const isAfter = (date, dateToCompare) => {
   return isAfter$1(date, dateToCompare);
 };
-/**
- * Gracefully parsing string to a date, setting tz to UTC even if it's missing or input is invalid
- * Note: use getUtcFromString() to convert a string to a date with stricter returns
- * @param dateStr - string containing date
- * @returns {Date} - Date in UTC, or current date when something invalid is passed.
+/**
+ * Gracefully parsing string to a date, setting tz to UTC even if it's missing or input is invalid
+ * Note: use getUtcFromString() to convert a string to a date with stricter returns
+ * @param dateStr - string containing date
+ * @returns {Date} - Date in UTC, or current date when something invalid is passed.
  */
 const utc = dateStr => {
   if (!dateStr) {
@@ -9108,10 +9118,10 @@ const utc = dateStr => {
   }
   return isoStringToDate(dateStr) || createDate();
 };
-/**
- * Parsing string to a date. Stricter check, will return undefined when dateString is invalid.
- * @param dateStr - string containing date
- * @returns {Date} - Date in UTC, undefined when not valid
+/**
+ * Parsing string to a date. Stricter check, will return undefined when dateString is invalid.
+ * @param dateStr - string containing date
+ * @returns {Date} - Date in UTC, undefined when not valid
  */
 const getUtcFromString = dateStr => {
   if (!dateStr || typeof dateStr !== 'string') {
@@ -9130,26 +9140,26 @@ const getOffsetStr = dateStr => {
   const groups = dateStr.match(offsetMatcher);
   return groups ? groups[1] : null;
 };
-/**
- * Check if a date object is valid
- * @param {Date | number} date - date to be checked
- * @returns {boolean} - True if valid
+/**
+ * Check if a date object is valid
+ * @param {Date | number} date - date to be checked
+ * @returns {boolean} - True if valid
  */
 const isValid = date => {
   return isValid$1(date);
 };
-/**
- * Get the seconds timestamp of the given date
- * @param {Date} date - the given date
- * @returns the timestamp
+/**
+ * Get the seconds timestamp of the given date
+ * @param {Date} date - the given date
+ * @returns the timestamp
  */
 const unix = date => {
   return getUnixTime(date);
 };
-/**
- * Return the Date object for a given timestamp
- * @param {number} unixTime - timestamp
- * @returns the timestamp
+/**
+ * Return the Date object for a given timestamp
+ * @param {number} unixTime - timestamp
+ * @returns the timestamp
  */
 const fromUnix = unixTime => {
   return fromUnixTime(unixTime);
@@ -9175,30 +9185,30 @@ const parseCustomDateString = dateStr => {
   }
   return new Date(dateStr);
 };
-/**
- * Returns Date in UTC
- * @returns {Date} - Date in UTC
+/**
+ * Returns Date in UTC
+ * @returns {Date} - Date in UTC
  */
 const getNowUtc = () => {
   return createDate();
 };
-/**
- * Returns current time as string
- * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
- * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
- *
- * @returns {string} - formatted date string
+/**
+ * Returns current time as string
+ * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
+ * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
+ *
+ * @returns {string} - formatted date string
  */
 const getCurrentTimeAsString = (strFormat = DATE_FORMAT_UTC, utc = true) => {
   return dateToString(getNowUtc(), strFormat, utc);
 };
-/**
- * Set date values to a given date (by default it is assumed you are passing the new values in UTC).
- * Note that months start at 0!
- * @param date - the dater to be changed
- * @param values - an object with options
- * @param useLocalTimeZone - boolean true if you are passing the values in local timezone
- * @returns the new date with options set
+/**
+ * Set date values to a given date (by default it is assumed you are passing the new values in UTC).
+ * Note that months start at 0!
+ * @param date - the dater to be changed
+ * @param values - an object with options
+ * @param useLocalTimeZone - boolean true if you are passing the values in local timezone
+ * @returns the new date with options set
  */
 const set = (date, values, useLocalTimeZone = false) => {
   if (useLocalTimeZone) {
@@ -9228,11 +9238,11 @@ const set = (date, values, useLocalTimeZone = false) => {
   }
   return newDate;
 };
-/**
- * Get hours of a passed date in UTC (or local timezone if passed false)
- * @param date - the date of which to extract hours
- * @param utc - boolean true - whether to get UTC hours
- * @returns the hour number
+/**
+ * Get hours of a passed date in UTC (or local timezone if passed false)
+ * @param date - the date of which to extract hours
+ * @param utc - boolean true - whether to get UTC hours
+ * @returns the hour number
  */
 const getHours = (date, utc = true) => {
   if (utc) {
@@ -9240,10 +9250,10 @@ const getHours = (date, utc = true) => {
   }
   return getHours$1(date);
 };
-/**
- * Return the start of hour for the given date. The result will be in UTC.
- * @param date - the date of which to retrieve the start of the hour
- * @returns the new date
+/**
+ * Return the start of hour for the given date. The result will be in UTC.
+ * @param date - the date of which to retrieve the start of the hour
+ * @returns the new date
  */
 const startOfHourUTC = date => {
   const hourNum = date.getUTCHours();
@@ -9254,10 +9264,10 @@ const startOfHourUTC = date => {
     milliseconds: 0
   });
 };
-/**
- * Return the start of a day for the given date. The result will be in UTC.
- * @param date - the date of which to retrieve the start of day
- * @returns the new date
+/**
+ * Return the start of a day for the given date. The result will be in UTC.
+ * @param date - the date of which to retrieve the start of day
+ * @returns the new date
  */
 const startOfDayUTC = date => {
   const dateNum = date.getUTCDate();
@@ -9269,10 +9279,10 @@ const startOfDayUTC = date => {
     milliseconds: 0
   });
 };
-/**
- * Return the start of a week for the given date. The result will be in UTC.
- * @param date - the date of which to retrieve the start of the week
- * @returns the new date
+/**
+ * Return the start of a week for the given date. The result will be in UTC.
+ * @param date - the date of which to retrieve the start of the week
+ * @returns the new date
  */
 const startOfWeekUTC = date => {
   const dateNum = date.getUTCDate();
@@ -9286,10 +9296,10 @@ const startOfWeekUTC = date => {
     milliseconds: 0
   });
 };
-/**
- * Return the start of a month for the given date. The result will be in UTC.
- * @param date - the date of which to retrieve the start of the month
- * @returns the new date
+/**
+ * Return the start of a month for the given date. The result will be in UTC.
+ * @param date - the date of which to retrieve the start of the month
+ * @returns the new date
  */
 const startOfMonthUTC = date => {
   return set(new Date(date), {
@@ -9300,10 +9310,10 @@ const startOfMonthUTC = date => {
     milliseconds: 0
   });
 };
-/**
- * Return the start of a year for the given date. The result will be in UTC.
- * @param date - the date of which to retrieve the start of the year
- * @returns the new date
+/**
+ * Return the start of a year for the given date. The result will be in UTC.
+ * @param date - the date of which to retrieve the start of the year
+ * @returns the new date
  */
 const startOfYearUTC = date => {
   const yearNum = date.getUTCFullYear();
@@ -9319,10 +9329,10 @@ const startOfYearUTC = date => {
 };
 // TODO - IF TODAY time is going to be used, we need to edit this to handle the time.
 //      - now.getTimezoneOffset();   by subtracting the timezone offset, this can be used to convert the time to similar to UTC, because startOfDay retuns values in local time with offset
-/**
- * Parse custom time format of NOW+current time | current date in UTC. The result will be in UTC.
- * @param timeValue - string value
- * @returns Time in UTC format
+/**
+ * Parse custom time format of NOW+current time | current date in UTC. The result will be in UTC.
+ * @param timeValue - string value
+ * @returns Time in UTC format
  */
 const convertNOWFormatToUTC = timeValue => {
   const now = new Date();
@@ -9338,10 +9348,10 @@ const convertNOWFormatToUTC = timeValue => {
   }
   throw new Error('Invalid endTime format');
 };
-/**
- * Parse custom time format of NOW+-hours and minutes || TODAY+-hours and minutes into UTC. The result will be in UTC.
- * @param timeValue - string value
- * @returns Time in UTC format
+/**
+ * Parse custom time format of NOW+-hours and minutes || TODAY+-hours and minutes into UTC. The result will be in UTC.
+ * @param timeValue - string value
+ * @returns Time in UTC format
  */
 const convertNOWandTODAYFormatsToUTC = timeValue => {
   const now = new Date();
@@ -9358,22 +9368,22 @@ const convertNOWandTODAYFormatsToUTC = timeValue => {
   throw new Error('Invalid endTime format');
 };
 
-/* *
- * 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)
  * */
 
 var index = /*#__PURE__*/Object.freeze({
@@ -9432,22 +9442,22 @@ var index = /*#__PURE__*/Object.freeze({
   utc: utc
 });
 
-/* *
- * 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 createMockStoreWithEggs = mockState => {
   const mockStore = configureStore();
@@ -9468,22 +9478,22 @@ const createToolkitMockStoreWithEggs = storeConfig => {
   return store;
 };
 
-/* *
- * 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 PROJECTION = {
   EPSG_3035: {
@@ -9560,34 +9570,34 @@ const PROJECTION = {
   }
 };
 
-/* *
- * 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)
  * */
-/**
- * Utility function to keep track of number of renders by a react component
- *
- * Usage:
- * 1) reset all counters to zero by:
- *      renderCounter.reset()
- * 2) in the render function of the functional component do:
- *      renderCounter.count(<your react functional component>.name);
- * 3) in the test do:
- *      expect(renderCounter.get(<your react functional component>.name)).toBe(1);
- *
+/**
+ * Utility function to keep track of number of renders by a react component
+ *
+ * Usage:
+ * 1) reset all counters to zero by:
+ *      renderCounter.reset()
+ * 2) in the render function of the functional component do:
+ *      renderCounter.count(<your react functional component>.name);
+ * 3) in the test do:
+ *      expect(renderCounter.get(<your react functional component>.name)).toBe(1);
+ *
  */
 class RenderCounter {
   constructor() {