@opengeoweb/shared 14.0.1 → 14.1.0

package/index.esm.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid, ListItemText, ListItemIcon, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
-import * as React from 'react';
-import React__default, { useRef, Component, useState } from 'react';
+import 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import React, { useRef, useEffect, useState, Component } from 'react';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { Resize, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, KeyCommand, ArrowUp, ArrowDown, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
-import 'i18next';
-import { initReactI18next, useTranslation } from 'react-i18next';
 import { throttle, merge, escapeRegExp, debounce } from 'lodash';
-import * as Sentry from '@sentry/react';
+import { addIntegration } from '@sentry/react';
 import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, setSeconds as setSeconds$1, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
 import { fi as fi$1, nl as nl$1, nb, enGB } from 'date-fns/locale';
 
@@ -572,7 +571,7 @@ function _regeneratorRuntime() {
   })();
 }
 
-var _excluded$e = ["content", "color", "icon"];
+var _excluded$e = ["content", "color", "icon", "sx"];
 var bgColors = {
   green: 'geowebColors.functional.successOutline.fill',
   grey: 'geowebColors.functional.disabledOutline.fill',
@@ -612,15 +611,16 @@ var StatusTag = function StatusTag(_ref) {
   var content = _ref.content,
     color = _ref.color,
     icon = _ref.icon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    sx = _ref.sx;
+    _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return jsxs(Box, {
-    display: "flex",
     alignItems: "center",
-    textAlign: "center",
-    "data-testid": "statusTag",
     className: "statusTag",
+    "data-testid": "statusTag",
+    display: "flex",
     position: "relative",
-    sx: Object.assign({}, tagStyle(color), props.sx),
+    sx: Object.assign({}, tagStyle(color), Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx),
+    textAlign: "center",
     children: [jsx(Box, {
       sx: {
         position: 'absolute',
@@ -637,6 +637,54 @@ var StatusTag = function StatusTag(_ref) {
   });
 };
 
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var SHARED_NAMESPACE = 'shared';
+var geowebLanguages = ['en', 'fi', 'no', 'nl'];
+var loadAllTranslations = function loadAllTranslations(i18nInstance, translationsToLoad) {
+  translationsToLoad.forEach(function (_ref) {
+    var ns = _ref.ns,
+      translations = _ref.translations;
+    geowebLanguages.forEach(function (lang) {
+      i18nInstance.addResourceBundle(lang, ns, translations[lang]);
+    });
+  });
+};
+var safelyInitI18nForTestsAndStories = function safelyInitI18nForTestsAndStories(i18nInstance, namespace, translationsToLoad, initLanguage) {
+  // This check ensures that we don't init the library many times.
+  // - in tests, the init is done globally, so this should not init
+  // - in stories, this function should init, but only once if called many times
+  if (!i18nInstance.isInitialized && !i18nInstance.isInitializing) {
+    void i18nInstance.use(initReactI18next).init({
+      lng: initLanguage != null ? initLanguage : 'en',
+      ns: namespace,
+      interpolation: {
+        escapeValue: false
+      },
+      resources: {}
+    });
+  }
+  loadAllTranslations(i18nInstance, translationsToLoad);
+};
+var useSharedTranslation = function useSharedTranslation() {
+  return useTranslation([SHARED_NAMESPACE]);
+};
+
 var _excluded$d = ["bounds", "setIsDragging", "children", "onStop"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
@@ -647,21 +695,21 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
-    setIsDragging && setIsDragging(true);
+    setIsDragging == null || setIsDragging(true);
     e.preventDefault();
   };
   var onDragStop = function onDragStop(event, pos) {
-    setIsDragging && setIsDragging(false);
-    onStop && onStop(event, pos);
+    setIsDragging == null || setIsDragging(false);
+    onStop == null || onStop(event, pos);
   };
   return jsx(Draggable, Object.assign({
     bounds: bounds
   }, props, {
+    enableUserSelectHack: false,
+    onStart: onDragStart,
     onStop: function onStop(event, pos) {
       return onDragStop(event, pos);
     },
-    enableUserSelectHack: false,
-    onStart: onDragStart,
     children: children
   }));
 };
@@ -669,10 +717,10 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
 var _excluded$c = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
 var isDraggingClassName = 'is-dragging';
 var useBoundsProps = function useBoundsProps(nodeRef) {
-  var _React$useState = React__default.useState({}),
+  var _React$useState = React.useState({}),
     boundsProps = _React$useState[0],
     setBoundsProps = _React$useState[1];
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     if (nodeRef) {
       var _nodeRef$current;
       setBoundsProps({
@@ -711,7 +759,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
     nodeRef = _ref.nodeRef,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var theme = useTheme();
-  var onStartResize = React__default.useCallback(function (event, _direction, node) {
+  var onStartResize = React.useCallback(function (event, _direction, node) {
     event.stopPropagation();
     node.classList.add(isDraggingClassName);
     var _node$getBoundingClie = node.getBoundingClientRect(),
@@ -726,7 +774,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
     node.style.height = height + "px";
     onResizeStart();
   }, [onResizeStart, setSize]);
-  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
+  var onStopResize = React.useCallback(function (event, direction, node, delta) {
     node.classList.remove(isDraggingClassName);
     if (!size) {
       return;
@@ -743,31 +791,31 @@ var ResizeComponent = function ResizeComponent(_ref) {
   return jsx(Resizable, Object.assign({
     minHeight: minHeight,
     minWidth: minWidth,
-    size: size,
-    onResizeStop: onStopResize
+    onResizeStop: onStopResize,
+    size: size
   }, boundsProps, {
+    enable: enable,
     handleComponent: {
       bottomRight: jsx(Resize, {
+        className: "resizableHandle",
         style: {
           fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
         },
         sx: {
           display: 'none'
-        },
-        className: "resizableHandle"
+        }
       }),
       bottomLeft: jsx(Resize, {
+        className: "resizableHandle",
         isRightAligned: true,
         style: {
           fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
         },
         sx: {
           display: 'none'
-        },
-        className: "resizableHandle"
+        }
       })
     },
-    enable: enable,
     onResizeStart: onStartResize
   }, props, {
     children: children
@@ -783,7 +831,7 @@ var useControlledTooltip = function useControlledTooltip() {
     delayedTooltip = _React$useState2[0],
     setDelayedTooltip = _React$useState2[1];
   React.useEffect(function () {
-    if (tooltipOpen === true) {
+    if (tooltipOpen) {
       var timer = setTimeout(function () {
         return setDelayedTooltip(true);
       }, defaultDelay);
@@ -798,14 +846,15 @@ var useControlledTooltip = function useControlledTooltip() {
 };
 var CustomTooltip = function CustomTooltip(props) {
   return jsx(Tooltip, Object.assign({}, props, {
+    disableInteractive: true,
     enterDelay: defaultDelay,
-    enterNextDelay: defaultDelay,
-    disableInteractive: true
+    enterNextDelay: defaultDelay
   }));
 };
 
 var _excluded$b = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
 var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _defaultTooltipProps$;
   var _ref$tooltipTitle = _ref.tooltipTitle,
     defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
     _ref$variant = _ref.variant,
@@ -821,11 +870,12 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     defaultTooltipProps = _ref.tooltipProps,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
-  var tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
+  var tooltipTitle = (_defaultTooltipProps$ = defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) != null ? _defaultTooltipProps$ : defaultTooltipTitle;
   var tooltipProps = React.useMemo(function () {
+    var _defaultTooltipProps$2;
     return Object.assign({}, defaultTooltipProps, {
       title: tooltipTitle,
-      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
+      placement: (_defaultTooltipProps$2 = defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) != null ? _defaultTooltipProps$2 : 'top',
       sx: {
         pointerEvents: 'none'
       }
@@ -835,11 +885,11 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     return jsx(IconButton, Object.assign({
       "aria-label": tooltipTitle
     }, props, {
-      size: size,
+      "aria-pressed": isSelected,
       className: classNames,
       ref: ref,
-      "aria-pressed": isSelected,
-      sx: Object.assign({}, props.sx, shouldShowAsDisabled && {
+      size: size,
+      sx: Object.assign({}, Array.isArray(props.sx) ? Object.assign.apply(Object, [{}].concat(props.sx)) : props.sx, shouldShowAsDisabled && {
         '&.MuiIconButton-root': {
           color: "geowebColors.iconButtons." + variant + ".disabled.color"
         },
@@ -937,29 +987,28 @@ var ToggleMenu = function ToggleMenu(_ref) {
   }, [isDefaultOpen, buttonTestId]);
   return jsxs(Fragment, {
     children: [jsx(CustomIconButton, {
+      "data-testid": buttonTestId,
+      disabled: isDisabled,
+      id: buttonTestId,
+      isSelected: isOpen,
+      onClick: handleClick,
+      sx: buttonSx,
       tooltipProps: {
         placement: 'top',
         title: tooltipTitle
       },
-      isSelected: isOpen,
-      sx: buttonSx,
-      onClick: handleClick,
-      "data-testid": buttonTestId,
       variant: variant,
-      id: buttonTestId,
-      disabled: isDisabled,
       children: buttonIcon
     }), jsxs(Menu, {
       anchorEl: anchorEl,
-      open: isOpen,
+      anchorOrigin: anchorOrigin,
       onClose: function onClose(event, reason) {
         if (reason === 'tabKeyDown') {
           return;
         }
         handleClose(event);
       },
-      anchorOrigin: anchorOrigin,
-      transformOrigin: transformOrigin,
+      open: isOpen,
       slotProps: {
         backdrop: {
           style: {
@@ -973,7 +1022,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
           }
         })
       },
-      children: [menuTitle && jsx(ListSubheader, {
+      transformOrigin: transformOrigin,
+      children: [menuTitle ? jsx(ListSubheader, {
         "data-testid": "toggleMenuTitle",
         children: jsx(Typography, {
           sx: {
@@ -981,28 +1031,28 @@ var ToggleMenu = function ToggleMenu(_ref) {
           },
           children: menuTitle
         })
-      }), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
+      }) : null, menuItems != null && menuItems.length ? menuItems.map(function (menuItem) {
         var text = menuItem.text,
           icon = menuItem.icon,
           action = menuItem.action,
           isDisabled = menuItem.isDisabled;
         return jsx(MenuItem, {
+          disabled: isDisabled,
           onClick: function onClick(event) {
             action(event);
             handleClose(event);
           },
-          disabled: isDisabled,
           selected: menuItem.isSelected,
           children: jsxs(Grid, {
             container: true,
-            spacing: 2,
             justifyContent: "space-between",
             size: "grow",
+            spacing: 2,
             children: [jsx(Grid, {
               children: jsx(ListItemText, {
                 children: text
               })
-            }), icon && jsx(Grid, {
+            }), icon ? jsx(Grid, {
               alignItems: "flex-end",
               children: jsx(ListItemIcon, {
                 sx: {
@@ -1012,7 +1062,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
                 },
                 children: icon
               })
-            })]
+            }) : null]
           })
         }, text);
       }) : jsx("div", {}) // Needed to make the menu work without any menuItems
@@ -1021,57 +1071,11 @@ var ToggleMenu = function ToggleMenu(_ref) {
   });
 };
 
-/* *
- * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var SHARED_NAMESPACE = 'shared';
-var geowebLanguages = ['en', 'fi', 'no', 'nl'];
-var loadAllTranslations = function loadAllTranslations(i18nInstance, translationsToLoad) {
-  translationsToLoad.forEach(function (_ref) {
-    var ns = _ref.ns,
-      translations = _ref.translations;
-    geowebLanguages.forEach(function (lang) {
-      i18nInstance.addResourceBundle(lang, ns, translations[lang]);
-    });
-  });
-};
-var safelyInitI18nForTestsAndStories = function safelyInitI18nForTestsAndStories(i18nInstance, namespace, translationsToLoad, initLanguage) {
-  // This check ensures that we don't init the library many times.
-  // - in tests, the init is done globally, so this should not init
-  // - in stories, this function should init, but only once if called many times
-  if (!i18nInstance.isInitialized && !i18nInstance.isInitializing) {
-    void i18nInstance.use(initReactI18next).init({
-      lng: initLanguage != null ? initLanguage : 'en',
-      ns: namespace,
-      interpolation: {
-        escapeValue: false
-      },
-      resources: {}
-    });
-  }
-  loadAllTranslations(i18nInstance, translationsToLoad);
-};
-var useSharedTranslation = function useSharedTranslation() {
-  return useTranslation([SHARED_NAMESPACE]);
-};
-
 var Title = function Title(_ref) {
   var title = _ref.title;
   return jsx(Typography, {
+    component: "span",
+    "data-testid": "customDialog-title",
     sx: {
       fontSize: '16px',
       fontWeight: 500,
@@ -1081,8 +1085,6 @@ var Title = function Title(_ref) {
       whiteSpace: 'nowrap',
       color: 'geowebColors.typographyAndIcons.text'
     },
-    "data-testid": "customDialog-title",
-    component: "span",
     children: title
   });
 };
@@ -1101,11 +1103,11 @@ var CustomDialogHeader = function CustomDialogHeader(_ref2) {
       justifyContent: 'space-between',
       alignItems: 'center'
     },
-    children: [title && jsx(Title, {
+    children: [title ? jsx(Title, {
       title: title
-    }), jsx(CustomIconButton, {
-      "data-testid": "customDialog-close",
+    }) : null, jsx(CustomIconButton, {
       "aria-label": "close",
+      "data-testid": "customDialog-close",
       onClick: function onClick() {
         return onClose('CLOSED');
       },
@@ -1119,41 +1121,41 @@ var CustomDialogHeader = function CustomDialogHeader(_ref2) {
       })
     })]
   }) : jsxs(Grid, {
+    alignItems: "center",
+    "aria-label": "Dialog options header",
     container: true,
     "data-testid": "dialog-action-header",
-    alignItems: "center",
     sx: {
       boxShadow: 1,
       py: 0.5,
       px: 1,
       zIndex: 1
     },
-    "aria-label": "Dialog options header",
     children: [jsx(Grid, {
       size: 4,
       children: jsx(Button, {
+        "aria-label": "close",
+        "data-testid": "contentdialog-close",
         onClick: function onClick() {
           return onClose('CLOSED');
         },
-        variant: "flat",
-        "aria-label": "close",
         startIcon: jsx(ChevronLeft, {}),
-        "data-testid": "contentdialog-close",
         sx: {
           textTransform: 'uppercase'
         },
+        variant: "flat",
         children: t('shared-customdialog-back')
       })
     }), jsx(Grid, {
+      size: 4,
       sx: {
         display: 'flex',
         justifyContent: 'center',
         textAlign: 'center'
       },
-      size: 4,
-      children: title && jsx(Title, {
+      children: title ? jsx(Title, {
         title: title
-      })
+      }) : null
     }), jsx(Grid, {
       size: 4,
       children: jsx(Box, {
@@ -1177,12 +1179,12 @@ var CustomDialogHeader = function CustomDialogHeader(_ref2) {
                 _ref3$isDisabled = _ref3.isDisabled,
                 isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
               return jsx(Button, {
+                disabled: isDisabled,
                 onClick: action,
-                variant: variant || 'flat',
                 sx: {
                   minWidth: 96
                 },
-                disabled: isDisabled,
+                variant: variant != null ? variant : 'flat',
                 children: text
               }, text + "-" + variant);
             })
@@ -1227,12 +1229,12 @@ var PaperComponent = function PaperComponent(_ref) {
   var maxWidth = '98%';
   var maxHeight = '98%';
   return jsx(ResizeComponent, Object.assign({
-    size: defaultSize,
-    maxWidth: maxWidth,
+    className: "custom-dialog-resize",
     maxHeight: maxHeight,
+    maxWidth: maxWidth,
     minHeight: 120,
     minWidth: 280,
-    className: "custom-dialog-resize",
+    size: defaultSize,
     style: {
       display: 'flex'
     }
@@ -1293,20 +1295,26 @@ var CustomDialog = function CustomDialog(_ref2) {
     size = _React$useState[0],
     setSize = _React$useState[1];
   return jsx(Dialog, Object.assign({
+    "aria-labelledby": "dialog-title",
     "data-testid": "customDialog",
     // fix for briefly showing default options when closing dialog
-    transitionDuration: 0,
+    transitionDuration: 0
+  }, isResizable && {
+    PaperComponent: PaperComponent
+  }, shouldRenderInline && {
+    disablePortal: true
+  }, {
+    disableRestoreFocus: disableRestoreFocus,
     onClose: function onClose() {
       _onClose('CLOSED');
     },
-    "aria-labelledby": "dialog-title",
     slotProps: Object.assign({}, slotProps, {
       paper: {
         sx: Object.assign({}, !other.fullWidth && !other.maxWidth && {
           maxWidth: '560px'
         }, other.maxWidth && {
           maxWidth: other.maxWidth
-        }, sx)
+        }, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx)
       }
     }, isResizable && {
       paper: {
@@ -1325,32 +1333,26 @@ var CustomDialog = function CustomDialog(_ref2) {
           position: 'absolute'
         }
       }
-    })
-  }, isResizable && {
-    PaperComponent: PaperComponent
-  }, shouldRenderInline && {
-    disablePortal: true
-  }, {
-    sx: Object.assign({}, sx, isResizable && {
+    }),
+    sx: Object.assign({}, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx, isResizable && {
       '.custom-dialog-resize': {
         height: 'initial'
       }
-    }),
-    disableRestoreFocus: disableRestoreFocus
+    })
   }, other, {
     children: hasLayout ? jsxs(Fragment, {
       children: [jsx(CustomDialogHeader, {
-        title: title,
         headerActions: headerActions,
-        onClose: _onClose
+        onClose: _onClose,
+        title: title
       }), jsxs(DialogContent, {
         sx: {
           padding: '8px 16px'
         },
-        children: [description && jsx(Typography, {
+        children: [description ? jsx(Typography, {
           variant: "body1",
           children: description
-        }), children]
+        }) : null, children]
       }), !headerActions && jsx(DialogActions, {
         sx: {
           padding: 2,
@@ -1395,7 +1397,9 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
   return jsxs(Fragment, {
     children: [jsx(Button, {
       "data-testid": "confirmationDialog-cancel",
-      variant: "tertiary",
+      onClick: function onClick() {
+        return onClose('CANCELLED');
+      },
       sx: function sx(theme) {
         return {
           width: {
@@ -1408,9 +1412,7 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
           }
         };
       },
-      onClick: function onClick() {
-        return onClose('CANCELLED');
-      },
+      variant: "tertiary",
       children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
     }), isLoading ? jsx(Box, {
       "data-testid": "confirm-dialog-spinner",
@@ -1421,12 +1423,13 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
         alignItems: 'center'
       }),
       children: jsx(CircularProgress, {
-        size: 40,
-        color: "secondary"
+        color: "secondary",
+        size: 40
       })
     }) : jsx(Button, {
+      autoFocus: !disableAutoFocus,
       "data-testid": "confirmationDialog-confirm",
-      variant: "primary",
+      onClick: onSubmit,
       sx: function sx(theme) {
         return Object.assign({}, confirmStyle, {
           '&:focus': {
@@ -1435,8 +1438,7 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
           }
         });
       },
-      onClick: onSubmit,
-      autoFocus: !disableAutoFocus,
+      variant: "primary",
       children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
     })]
   });
@@ -1464,19 +1466,19 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
   var _useSharedTranslation = useSharedTranslation(),
     t = _useSharedTranslation.t;
   return jsx(CustomDialog, Object.assign({
-    "data-testid": "confirmationDialog",
-    open: open,
-    title: title,
-    description: description != null ? description : t('shared-confirmation-description'),
-    onClose: onClose,
     actions: jsx(ConfirmationButtons, {
-      onClose: onClose,
       cancelLabel: cancelLabel,
-      isLoading: isLoading,
-      onSubmit: onSubmit,
+      confirmLabel: confirmLabel,
       disableAutoFocus: disableAutoFocus,
-      confirmLabel: confirmLabel
-    })
+      isLoading: isLoading,
+      onClose: onClose,
+      onSubmit: onSubmit
+    }),
+    "data-testid": "confirmationDialog",
+    description: description != null ? description : t('shared-confirmation-description'),
+    onClose: onClose,
+    open: open,
+    title: title
   }, rest, {
     children: content
   }));
@@ -1577,8 +1579,8 @@ var usePoller = function usePoller(deps, callback, pollingInterval) {
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 function usePrevious(value) {
-  var ref = React.useRef();
-  React.useEffect(function () {
+  var ref = useRef();
+  useEffect(function () {
     ref.current = value;
   });
   return ref.current;
@@ -1679,7 +1681,7 @@ var adjustPosition = function adjustPosition(bbox, containingView, position, set
   }
 };
 var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
-  var onResizeWindow = React__default.useCallback(function () {
+  var onResizeWindow = React.useCallback(function () {
     if (!nodeRef.current) {
       return;
     }
@@ -1687,7 +1689,7 @@ var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysIn
     var containingView = nodeRef.current.parentElement.getBoundingClientRect();
     adjustPosition(bbox, containingView, position, setPosition);
   }, [nodeRef, position, setPosition]);
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     var throttledResize = throttle(onResizeWindow, 100);
     window.addEventListener('resize', throttledResize);
     return function () {
@@ -1724,10 +1726,10 @@ var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysIn
    const debouncedName = useDebounce('testing', 2000)
 */
 var useDebounce = function useDebounce(value, timeout) {
-  var _React$useState = React.useState(value),
-    state = _React$useState[0],
-    setState = _React$useState[1];
-  React.useEffect(function () {
+  var _useState = useState(value),
+    state = _useState[0],
+    setState = _useState[1];
+  useEffect(function () {
     var handler = setTimeout(function () {
       return setState(value);
     }, timeout);
@@ -1756,8 +1758,8 @@ var useDebounce = function useDebounce(value, timeout) {
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var useWheelStopPropagation = function useWheelStopPropagation() {
-  var ref = React__default.useRef(null);
-  React__default.useEffect(function () {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
     var element = ref.current;
     if (!element) {
       return;
@@ -1800,8 +1802,8 @@ var useWheelStopPropagation = function useWheelStopPropagation() {
  *  as calling event.stopPropagation() on syncthetic events does not stop the propagation
  */
 var useScrollingInIsolation = function useScrollingInIsolation(options) {
-  var scrollInIsolationRef = React__default.useRef(null);
-  React__default.useEffect(function () {
+  var scrollInIsolationRef = React.useRef(null);
+  React.useEffect(function () {
     var element = scrollInIsolationRef.current;
     if (!element) {
       return;
@@ -1839,6 +1841,7 @@ var useDialogActions = function useDialogActions(awaitingPromiseRef, defaultOpti
   var _React$useState = React.useState(defaultOptions),
     confirmationState = _React$useState[0],
     setConfirmationState = _React$useState[1];
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
   var openConfirmation = function openConfirmation(options) {
     setConfirmationState(options);
     return new Promise(function (resolve, reject) {
@@ -1880,12 +1883,40 @@ var useDialogActions = function useDialogActions(awaitingPromiseRef, defaultOpti
 var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
   var children = _ref.children;
   var awaitingPromiseRef = React.useRef({
-    resolve: function resolve() {
-      return Promise.resolve();
-    },
-    reject: function reject() {
-      return Promise.reject();
-    }
+    resolve: function () {
+      var _resolve = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", Promise.resolve());
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function resolve() {
+        return _resolve.apply(this, arguments);
+      }
+      return resolve;
+    }(),
+    reject: function () {
+      var _reject = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", Promise.reject());
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function reject() {
+        return _reject.apply(this, arguments);
+      }
+      return reject;
+    }()
   });
   var _useDialogActions = useDialogActions(awaitingPromiseRef),
     openConfirmation = _useDialogActions.openConfirmation,
@@ -1895,9 +1926,9 @@ var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
   return jsxs(ConfirmationServiceContext.Provider, {
     value: openConfirmation,
     children: [children, jsx(ConfirmationDialog, Object.assign({
-      open: Boolean(confirmationState),
+      onClose: handleClose,
       onSubmit: handleSubmit,
-      onClose: handleClose
+      open: Boolean(confirmationState)
     }, confirmationState))]
   });
 };
@@ -1910,32 +1941,32 @@ var AlertIcon = function AlertIcon(_ref) {
   switch (severity) {
     case 'info':
       return jsx(Info, {
+        "data-testid": dataTestId,
         sx: {
           color: 'geowebColors.functional.notification'
-        },
-        "data-testid": dataTestId
+        }
       });
     case 'success':
       return jsx(Success, {
+        "data-testid": dataTestId,
         sx: {
           color: 'geowebColors.functional.success'
-        },
-        "data-testid": dataTestId
+        }
       });
     case 'warning':
       return jsx(Exclamation, {
+        "data-testid": dataTestId,
         sx: {
           color: 'geowebColors.functional.warning'
-        },
-        "data-testid": dataTestId
+        }
       });
     case 'error':
     default:
       return jsx(Exclamation, {
+        "data-testid": dataTestId,
         sx: {
           color: 'geowebColors.functional.error'
-        },
-        "data-testid": dataTestId
+        }
       });
   }
 };
@@ -1963,21 +1994,21 @@ var AlertBanner = function AlertBanner(_ref) {
     return null;
   }
   return jsxs(Alert, {
-    "data-testid": dataTestId,
-    severity: severity,
-    icon: jsx(AlertIcon, {
-      severity: severity
-    }),
     action: shouldClose ? jsx(Button, {
-      variant: "flat",
       onClick: function onClick() {
         return setIsOpen(false);
       },
       sx: {
         backgroundColor: 'transparent!important'
       },
+      variant: "flat",
       children: t('shared-close-caps')
     }) : undefined,
+    "data-testid": dataTestId,
+    icon: jsx(AlertIcon, {
+      severity: severity
+    }),
+    severity: severity,
     sx: isCompact ? {
       height: '32px',
       boxSizing: 'border-box',
@@ -2016,7 +2047,7 @@ var AlertBanner = function AlertBanner(_ref) {
         lineHeight: isCompact ? '18px' : '24px'
       },
       children: title
-    }), info && jsx(Box, {
+    }), info ? jsx(Box, {
       sx: {
         fontSize: '16px',
         marginTop: 1,
@@ -2024,18 +2055,18 @@ var AlertBanner = function AlertBanner(_ref) {
         lineHeight: '22px'
       },
       children: info
-    }), actionButtonProps && jsx(Button, {
-      variant: "flat",
+    }) : null, actionButtonProps ? jsx(Button, {
       onClick: function onClick(event) {
         setIsOpen(false);
         actionButtonProps.onClick(event);
       },
+      startIcon: jsx(ChevronRight, {}),
       sx: {
         backgroundColor: 'transparent!important'
       },
-      startIcon: jsx(ChevronRight, {}),
+      variant: "flat",
       children: actionButtonProps.title.toUpperCase()
-    })]
+    }) : null]
   });
 };
 
@@ -2043,12 +2074,12 @@ var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
     children = _ref.children;
   return jsxs(Box, {
+    "data-testid": "appLayout",
     sx: {
       height: '100dvh',
       display: 'flex',
       flexDirection: 'column'
     },
-    "data-testid": "appLayout",
     children: [header, jsx(Box, {
       component: "main",
       sx: {
@@ -2069,17 +2100,17 @@ var AppHeader = function AppHeader(_ref) {
     title = _ref$title === void 0 ? 'GeoWeb' : _ref$title,
     onClick = _ref.onClick;
   var theme = useTheme();
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React.useState(false),
     isDrawerOpen = _React$useState[0],
-    toggleDrawer = _React$useState[1];
+    setIsDrawerOpen = _React$useState[1];
   var onToggleDrawer = function onToggleDrawer(isOpen) {
-    return toggleDrawer(isOpen);
+    return setIsDrawerOpen(isOpen);
   };
   var onKeyDown = function onKeyDown(event) {
     if (event.key === 'Tab' || event.key === 'Shift') {
       return;
     }
-    toggleDrawer(false);
+    setIsDrawerOpen(false);
   };
   return jsxs(Box, {
     component: "header",
@@ -2115,8 +2146,8 @@ var AppHeader = function AppHeader(_ref) {
         cursor: onClick ? 'pointer' : 'auto'
       },
       children: [(_theme$palette$geoweb = theme.palette.geowebColors.logo) != null && _theme$palette$geoweb.image ? jsx("img", {
-        src: theme.palette.geowebColors.logo.image,
         alt: "GeoWeb",
+        src: theme.palette.geowebColors.logo.image,
         style: {
           height: '29px',
           width: '47px'
@@ -2128,7 +2159,6 @@ var AppHeader = function AppHeader(_ref) {
           right: '-1px'
         }
       }), jsx(Typography, {
-        variant: "h1",
         sx: {
           display: 'none',
           fontSize: '20px',
@@ -2144,9 +2174,10 @@ var AppHeader = function AppHeader(_ref) {
           marginLeft: 1,
           maxWidth: 130
         },
+        variant: "h1",
         children: title
       })]
-    }), menu && jsxs(Box, {
+    }), menu ? jsxs(Box, {
       className: "hamburger-btn",
       sx: {
         display: 'flex',
@@ -2155,22 +2186,22 @@ var AppHeader = function AppHeader(_ref) {
       },
       children: [jsx(CustomIconButton, {
         "data-testid": "menuButton",
+        isSelected: isDrawerOpen,
         onClick: function onClick() {
           return onToggleDrawer(true);
         },
-        isSelected: isDrawerOpen,
         children: jsx(HamburgerMenu, {})
       }), jsx(Drawer, {
-        "data-testid": "app-drawer",
         anchor: "left",
-        open: isDrawerOpen,
-        onClose: function onClose() {
+        "data-testid": "app-drawer",
+        onClick: function onClick() {
           return onToggleDrawer(false);
         },
-        onClick: function onClick() {
+        onClose: function onClose() {
           return onToggleDrawer(false);
         },
         onKeyDown: onKeyDown,
+        open: isDrawerOpen,
         sx: {
           '& .MuiDrawer-paper': {
             top: '40px'
@@ -2185,7 +2216,7 @@ var AppHeader = function AppHeader(_ref) {
           children: menu
         })
       })]
-    }), jsx(Box, {
+    }) : null, jsx(Box, {
       className: "workspace-topbar",
       sx: {
         flexGrow: 1,
@@ -2291,20 +2322,20 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       return jsx(Box, {
         sx: displayOnTop ? displayOnTopStyles : normalStyles,
         children: jsx(AlertBanner, {
-          severity: "error",
-          title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
           info: jsxs("div", {
-            children: [jsx("br", {}), error.toString(), jsx("br", {}), errorInfo && errorInfo.componentStack, jsx("br", {}), jsx("br", {}), jsx(Link, {
-              underline: "always",
-              style: {
-                cursor: 'pointer'
-              },
+            children: [jsx("br", {}), error.toString(), jsx("br", {}), errorInfo == null ? void 0 : errorInfo.componentStack, jsx("br", {}), jsx("br", {}), jsx(Link, {
               onClick: function onClick() {
                 return window.location.reload();
               },
+              style: {
+                cursor: 'pointer'
+              },
+              underline: "always",
               children: reloadPage
             })]
-          })
+          }),
+          severity: "error",
+          title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed."
         })
       });
     }
@@ -2376,9 +2407,10 @@ var UserMenu = function UserMenu(_ref) {
   var toggleRef = useRef(null);
   return jsxs(Fragment, {
     children: [jsx(CustomIconButton, {
-      ref: toggleRef,
       "data-testid": "userButton",
       onClick: onToggle,
+      ref: toggleRef,
+      size: "medium",
       sx: {
         '&.MuiButtonBase-root': Object.assign({
           background: 'transparent',
@@ -2393,11 +2425,10 @@ var UserMenu = function UserMenu(_ref) {
           }
         })
       },
-      size: "medium",
       children: !isAdmin ? jsx(Avatar, {
         children: initials
       }) : jsxs(Fragment, {
-        children: [jsx(Admin, {}), initials && jsx("div", {
+        children: [jsx(Admin, {}), initials ? jsx("div", {
           style: {
             position: 'absolute',
             fontSize: '14px',
@@ -2406,12 +2437,13 @@ var UserMenu = function UserMenu(_ref) {
             fontWeight: 500
           },
           children: initials
-        })]
+        }) : null]
       })
-    }), isOpen && jsx(Paper, {
-      sx: styles$4.container,
+    }), isOpen ? jsx(Paper, {
       "data-testid": "userMenu",
+      sx: styles$4.container,
       children: jsx(ClickAwayListener, {
+        mouseEvent: "onMouseDown",
         onClickAway: function onClickAway(event) {
           var _toggleRef$current;
           if ((_toggleRef$current = toggleRef.current) != null && _toggleRef$current.contains(event.target)) {
@@ -2419,14 +2451,13 @@ var UserMenu = function UserMenu(_ref) {
           }
           onClose();
         },
-        mouseEvent: "onMouseDown",
         children: jsx(MenuList, {
           sx: styles$4.userMenu,
           variant: "menu",
           children: children
         })
       })
-    })]
+    }) : null]
   });
 };
 
@@ -2451,38 +2482,38 @@ var MenuItemTheme = function MenuItemTheme(_ref) {
             }
           },
           children: [jsx(FormControlLabel, {
-            value: ThemeTypes.LIGHT_THEME,
             control: jsx(Radio, {
               checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.LIGHT_THEME
             }),
-            label: t('shared-light')
+            label: t('shared-light'),
+            value: ThemeTypes.LIGHT_THEME
           }), jsx(FormControlLabel, {
-            value: ThemeTypes.DARK_THEME,
             control: jsx(Radio, {
               checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DARK_THEME
             }),
-            label: t('shared-dark')
-          }), enableSpecialThemes && jsxs(Fragment, {
+            label: t('shared-dark'),
+            value: ThemeTypes.DARK_THEME
+          }), enableSpecialThemes ? jsxs(Fragment, {
             children: [jsx(FormControlLabel, {
-              value: ThemeTypes.DEMO_THEME,
               control: jsx(Radio, {
                 checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DEMO_THEME
               }),
-              label: "Demo"
+              label: "Demo",
+              value: ThemeTypes.DEMO_THEME
             }), jsx(FormControlLabel, {
-              value: ThemeTypes.XMAS2024_THEME,
               control: jsx(Radio, {
                 checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
               }),
-              label: t('shared-xmas') + " 2024"
+              label: t('shared-xmas') + " 2024",
+              value: ThemeTypes.XMAS2024_THEME
             }), jsx(FormControlLabel, {
-              value: ThemeTypes.EUMETNET_THEME,
               control: jsx(Radio, {
                 checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.EUMETNET_THEME
               }),
-              label: "EUMETNET"
+              label: "EUMETNET",
+              value: ThemeTypes.EUMETNET_THEME
             })]
-          })]
+          }) : null]
         })
       })]
     })
@@ -2493,14 +2524,14 @@ var MenuItemTheme = function MenuItemTheme(_ref) {
 var ToolFooter = function ToolFooter() {
   return jsx(Box, {
     component: "footer",
+    role: "contentinfo",
     sx: {
       boxShadow: 1,
       backgroundColor: 'geowebColors.background.surface',
       textAlign: 'right',
       height: 18,
       zIndex: 1
-    },
-    role: "contentinfo"
+    }
   });
 };
 
@@ -2583,14 +2614,16 @@ var ToolHeader = function ToolHeader(_ref) {
       "data-testid": "CloseIcon"
     }) : _ref$closeIcon;
   var styles = getStyle(size);
-  var columnSizeIcon = title && (leftHeaderComponent || rightHeaderComponent) ? 4 : 1;
-  var columnSizeTitle = leftHeaderComponent || rightHeaderComponent ? 4 : 10;
+  var columnSizeIcon = title && (leftHeaderComponent != null ? leftHeaderComponent : rightHeaderComponent) ? 4 : 1;
+  var columnSizeTitle = (leftHeaderComponent != null ? leftHeaderComponent : rightHeaderComponent) ? 4 : 10;
   var columnSizeLeft = title ? columnSizeIcon : 12 - columnSizeIcon;
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
   return jsx(Box, {
-    component: "header",
+    "aria-label": "toolheader",
     className: className,
+    component: "header",
+    role: "heading",
     sx: Object.assign({}, rightHeaderComponent ? headerStyle : {}, {
       boxShadow: 1,
       // elevation_01
@@ -2598,35 +2631,33 @@ var ToolHeader = function ToolHeader(_ref) {
       zIndex: 2,
       cursor: isDraggable ? 'move' : null
     }),
-    role: "heading",
-    "aria-label": "toolheader",
     children: jsxs(Grid, {
-      container: true,
       alignItems: "center",
+      container: true,
+      justifyContent: "space-between",
       sx: {
         padding: styles.padding,
         height: styles.height
       },
-      justifyContent: "space-between",
       children: [jsx(Grid, {
         className: "header-left",
+        size: columnSizeLeft,
         sx: {
           paddingRight: 1
         },
-        size: columnSizeLeft,
-        children: leftHeaderComponent && leftHeaderComponent
+        children: leftHeaderComponent != null ? leftHeaderComponent : null
       }), jsx(Grid, {
+        alignItems: "center",
         className: "header-title",
-        size: title ? columnSizeTitle : 0,
         container: true,
         justifyContent: "center",
-        alignItems: "center",
+        size: title ? columnSizeTitle : 0,
         sx: {
           minHeight: 12
         },
-        children: title && jsx(Typography, {
-          variant: "h2",
+        children: title ? jsx(Typography, {
           noWrap: true,
+          role: "heading",
           sx: {
             fontSize: styles.fontSize,
             fontWeight: styles.fontWeight,
@@ -2634,20 +2665,20 @@ var ToolHeader = function ToolHeader(_ref) {
             marginTop: styles.marginTop,
             textAlign: 'center'
           },
-          role: "heading",
+          variant: "h2",
           children: title
-        })
+        }) : null
       }), jsxs(Grid, {
         className: "header-right",
         container: true,
         justifyContent: "flex-end",
         size: columnSizeIcon,
-        children: [rightHeaderComponent && rightHeaderComponent, onClose && jsx(CustomTooltip, {
-          title: t('shared-close'),
+        children: [rightHeaderComponent != null ? rightHeaderComponent : null, onClose ? jsx(CustomTooltip, {
           placement: "bottom",
           sx: {
             pointerEvents: 'none'
           },
+          title: t('shared-close'),
           children: jsx(CustomIconButton, {
             "data-testid": "closeBtn",
             onClick: onClose,
@@ -2657,7 +2688,7 @@ var ToolHeader = function ToolHeader(_ref) {
             },
             children: closeIcon
           })
-        })]
+        }) : null]
       })]
     })
   });
@@ -2709,23 +2740,23 @@ var ToolContainer = function ToolContainer(_ref) {
   }, props, {
     children: [jsx(ErrorBoundary, {
       children: jsx(ToolHeader, {
-        title: title,
-        size: size,
-        isDraggable: isDraggable,
-        onClose: onClose,
         className: headerClassName,
+        closeIcon: closeIcon,
+        dragHandleIcon: dragHandleIcon,
+        isDraggable: isDraggable,
         leftHeaderComponent: leftHeaderComponent,
+        onClose: onClose,
         rightHeaderComponent: rightHeaderComponent,
-        dragHandleIcon: dragHandleIcon,
-        closeIcon: closeIcon
+        size: size,
+        title: title
       })
     }), jsx(Box, {
-      sx: styles$3.content,
       style: {
         maxHeight: maxHeight
       },
+      sx: styles$3.content,
       children: children
-    }), isResizable && jsx(ToolFooter, {})]
+    }), isResizable ? jsx(ToolFooter, {}) : null]
   }));
 };
 
@@ -2805,7 +2836,7 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
     isOpen = _ref.isOpen,
     startSize = _ref.startSize,
     onChangeSize = _ref.onChangeSize;
-  var updateDomDirectly = React__default.useCallback(function (position, size) {
+  var updateDomDirectly = React.useCallback(function (position, size) {
     if (nodeRef.current) {
       var element = nodeRef.current;
       var firstChild = element.firstChild;
@@ -2814,16 +2845,16 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
       firstChild.style.height = size.height + "px";
     }
   }, [nodeRef]);
-  var getBoundsNode = React__default.useCallback(function () {
+  var getBoundsNode = React.useCallback(function () {
     var _nodeRef$current;
     return bounds === 'parent' ? (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode : document.querySelector(bounds);
   }, [bounds, nodeRef]);
   // store the position as ref so we can access it in another ref
-  var refPosition = React__default.useRef(position);
+  var refPosition = React.useRef(position);
   refPosition.current = position;
-  var lastSize = React__default.useRef(startSize);
+  var lastSize = React.useRef(startSize);
   // handle size from outside component
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     var boundsNode = getBoundsNode();
     if (boundsNode && lastSize.current.width && lastSize.current.height && (lastSize.current.width !== startSize.width || lastSize.current.height !== startSize.height) && typeof startSize.height === 'number' && typeof startSize.width === 'number' && nodeRef.current) {
       var _getNewPositionSize = getNewPositionSize(nodeRef.current, boundsNode, isRightAligned, refPosition.current, startSize),
@@ -2837,7 +2868,7 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
     }
   }, [startSize, isRightAligned, lastSize, getBoundsNode, nodeRef, updateDomDirectly, onChangeSize]);
   // observe parent div dimensions
-  var resizeObserverRef = React__default.useRef(new ResizeObserver(function (entry) {
+  var resizeObserverRef = React.useRef(new ResizeObserver(function (entry) {
     var boundsTarget = entry[0].target;
     var element = nodeRef.current;
     var boundsBbox = boundsTarget.getBoundingClientRect();
@@ -2849,7 +2880,7 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
       newSize = _getNewPositionSize2.size;
     updateDomDirectly(newPosition, newSize);
   }));
-  React__default.useLayoutEffect(function () {
+  React.useLayoutEffect(function () {
     var boundsNode = getBoundsNode();
     if (!boundsNode || !isOpen) {
       return function () {};
@@ -2968,32 +2999,32 @@ var DraggableComponent = function DraggableComponent(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
-  var nodeRef = React__default.useRef(null);
-  var _React$useState = React__default.useState({
+  var nodeRef = React.useRef(null);
+  var _React$useState = React.useState({
       x: 0,
       y: 0
     }),
     position = _React$useState[0],
     setPosition = _React$useState[1];
-  var _React$useState2 = React__default.useState(startSize),
+  var _React$useState2 = React.useState(startSize),
     size = _React$useState2[0],
     setSize = _React$useState2[1];
-  var _React$useState3 = React__default.useState(false),
+  var _React$useState3 = React.useState(false),
     isDragging = _React$useState3[0],
     setIsDragging = _React$useState3[1];
   var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
-  var onStopDrag = React__default.useCallback(function (_event, position) {
+  var onStopDrag = React.useCallback(function (_event, position) {
     setPosition(position);
     onDragEnd(position, size);
   }, [setPosition, onDragEnd, size]);
-  var _React$useState4 = React__default.useState(defaultInitialMaxHeight),
+  var _React$useState4 = React.useState(defaultInitialMaxHeight),
     initialMaxHeight = _React$useState4[0],
     setInitialMaxHeight = _React$useState4[1];
   var onStartResize = function onStartResize() {
     setIsDragging(true);
     setInitialMaxHeight('initial');
   };
-  var onResize = React__default.useCallback(function (_event, handle, node, delta) {
+  var onResize = React.useCallback(function (_event, handle, node, delta) {
     var _node$getBoundingClie = node.getBoundingClientRect(),
       width = _node$getBoundingClie.width,
       height = _node$getBoundingClie.height;
@@ -3010,8 +3041,8 @@ var DraggableComponent = function DraggableComponent(_ref) {
     setPosition(calculateNewPosition(position, isRightAligned, direction, delta));
     onResizeStop(_event, direction, node, delta);
   };
-  var toolcontainerId = React__default.useRef(Date.now().toString()).current;
-  var headerClassName = "header-" + (className || toolcontainerId);
+  var toolcontainerId = React.useRef(Date.now().toString()).current;
+  var headerClassName = "header-" + (className != null ? className : toolcontainerId);
   useHandleSizeFromOutsideComponent({
     nodeRef: nodeRef,
     bounds: bounds,
@@ -3024,7 +3055,7 @@ var DraggableComponent = function DraggableComponent(_ref) {
     }
   });
   return isOpen ? jsxs(Fragment, {
-    children: [isDragging && jsx(Box, {
+    children: [isDragging ? jsx(Box, {
       "data-testid": "dragging-overlay",
       sx: {
         top: 0,
@@ -3034,51 +3065,51 @@ var DraggableComponent = function DraggableComponent(_ref) {
         position: 'absolute',
         zIndex: 999
       }
-    }), jsx(DraggableComponent$1, {
-      nodeRef: nodeRef,
+    }) : null, jsx(DraggableComponent$1, {
       bounds: bounds,
       cancel: cancel,
-      position: position,
-      onStop: onStopDrag,
       handle: "." + headerClassName,
+      nodeRef: nodeRef,
       onMouseDown: onMouseDown,
+      onStop: onStopDrag,
+      position: position,
       setIsDragging: setIsDragging,
       children: jsx(Box, {
-        tabIndex: -1,
+        "aria-label": title,
+        className: "toolContainerDraggable",
+        ref: nodeRef,
+        role: "dialog",
         sx: Object.assign({
           position: 'absolute',
           pointerEvents: 'all',
           zIndex: zIndex
-        }, startPosition, sx, {
+        }, startPosition, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx, {
           '&:hover .resizableHandle': {
             display: 'inline'
           }
         }),
-        ref: nodeRef,
-        className: "toolContainerDraggable",
-        role: "dialog",
-        "aria-label": title,
+        tabIndex: -1,
         children: jsx(ResizeComponent, Object.assign({}, props, {
-          size: size,
-          setSize: setSize,
+          nodeRef: nodeRef,
+          onResize: onResize,
           onResizeStart: onStartResize,
           onResizeStop: onStopResize,
-          onResize: onResize,
-          nodeRef: nodeRef,
-          children: jsx(ToolContainer, {
-            maxHeight: initialMaxHeight,
-            onClose: onClose,
-            title: title,
-            size: headerSize,
-            isDraggable: true,
-            isResizable: true,
+          setSize: setSize,
+          size: size,
+          children: jsx(ToolContainer, {
+            className: className,
+            closeIcon: closeIcon,
+            dragHandleIcon: dragHandleIcon,
             elevation: elevation,
             headerClassName: headerClassName,
+            isDraggable: true,
+            isResizable: true,
             leftHeaderComponent: leftHeaderComponent,
+            maxHeight: initialMaxHeight,
+            onClose: onClose,
             rightHeaderComponent: rightHeaderComponent,
-            dragHandleIcon: dragHandleIcon,
-            closeIcon: closeIcon,
-            className: className,
+            size: headerSize,
+            title: title,
             children: children
           })
         }))
@@ -3118,32 +3149,32 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
     children = _ref.children;
   if (type === 'divider') {
     return jsx(Typography, {
-      sx: styles$2.divider,
-      "data-testid": "segment-divider",
       component: "span",
+      "data-testid": "segment-divider",
+      sx: styles$2.divider,
       children: children
     });
   }
   if (type === 'icon') {
     return jsx(Typography, {
-      sx: styles$2.icon,
-      "data-testid": "segment-icon",
       component: "span",
+      "data-testid": "segment-icon",
+      sx: styles$2.icon,
       children: children
     });
   }
   if (type === 'connect') {
     return jsx(Typography, {
-      sx: styles$2.connect,
-      "data-testid": "segment-connect",
       component: "span",
+      "data-testid": "segment-connect",
+      sx: styles$2.connect,
       children: children
     });
   }
   return jsx(Typography, {
-    sx: segmentStyle,
-    "data-testid": "segment-text",
     component: "span",
+    "data-testid": "segment-text",
+    sx: segmentStyle,
     children: children
   });
 };
@@ -3472,15 +3503,15 @@ var ShortcutList = function ShortcutList(_ref) {
     "data-testid": "list-" + platform,
     children: shortcuts.map(function (shortcut, index) {
       return jsx(ListItem, {
+        divider: index !== shortcuts.length - 1,
         sx: {
           minHeight: 56
         },
-        divider: index !== shortcuts.length - 1,
         children: jsxs(Grid, {
+          alignItems: "center",
           container: true,
           direction: "row",
           justifyContent: "space-between",
-          alignItems: "center",
           size: "grow",
           children: [jsx(Grid, {
             sx: {
@@ -3509,10 +3540,10 @@ var TabPanel = function TabPanel(_ref) {
     value = _ref.value,
     index = _ref.index;
   return jsx("div", {
-    role: "tabpanel",
+    "aria-labelledby": "tab-" + index,
     hidden: value !== index,
     id: "tabpanel-" + index,
-    "aria-labelledby": "tab-" + index,
+    role: "tabpanel",
     children: value === index && children
   });
 };
@@ -3526,32 +3557,32 @@ var styles$1 = {
   }
 };
 var CheatSheet = function CheatSheet() {
-  var _React$useState = React__default.useState(0),
+  var _React$useState = React.useState(0),
     activeTab = _React$useState[0],
-    onChangeActiveTab = _React$useState[1];
+    setActiveTab = _React$useState[1];
   var onChangeTab = function onChangeTab(_event, newValue) {
-    onChangeActiveTab(newValue);
+    setActiveTab(newValue);
   };
   return jsxs(Box, {
     sx: styles$1.container,
     children: [jsxs(Tabs, {
-      value: activeTab,
-      onChange: onChangeTab,
       "aria-label": "platform",
+      onChange: onChangeTab,
+      value: activeTab,
       children: [jsx(Tab, {
-        sx: styles$1.tab,
-        label: "Windows"
+        label: "Windows",
+        sx: styles$1.tab
       }), jsx(Tab, {
-        sx: styles$1.tab,
-        label: "Mac"
+        label: "Mac",
+        sx: styles$1.tab
       })]
     }), jsx(TabPanel, {
-      value: activeTab,
       index: 0,
+      value: activeTab,
       children: jsx(ShortcutList, {})
     }), jsx(TabPanel, {
-      value: activeTab,
       index: 1,
+      value: activeTab,
       children: jsx(ShortcutList, {
         platform: "mac"
       })
@@ -3560,7 +3591,7 @@ var CheatSheet = function CheatSheet() {
 };
 
 var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React.useState(false),
     open = _React$useState[0],
     setOpen = _React$useState[1];
   var onClose = function onClose() {
@@ -3574,8 +3605,8 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
   return jsxs(Fragment, {
     children: [jsx(MenuItem, {
       "data-testid": "cheatsheet-btn",
-      onClick: onOpen,
       divider: true,
+      onClick: onOpen,
       children: jsx(Grid, {
         container: true,
         children: jsx(Grid, {
@@ -3589,15 +3620,15 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
         zIndex: 1
       },
       children: jsx(DraggableComponent, {
+        bounds: "parent",
+        isOpen: true,
+        minHeight: 300,
+        minWidth: 500,
+        onClose: onClose,
         startSize: {
           width: 700
         },
-        minHeight: 300,
-        minWidth: 500,
         title: t('shared-cheat-sheet'),
-        isOpen: true,
-        onClose: onClose,
-        bounds: "parent",
         children: jsx(CheatSheet, {})
       })
     })]
@@ -3607,13 +3638,13 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
 var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
   var recordButtonEnabled = _ref.recordButtonEnabled,
     setRecordButtonEnabled = _ref.setRecordButtonEnabled;
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React.useState(false),
     open = _React$useState[0],
     setOpen = _React$useState[1];
-  var _React$useState2 = React__default.useState(false),
+  var _React$useState2 = React.useState(false),
     canvasIntegrationEnabled = _React$useState2[0],
     setCanvasIntegrationEnabled = _React$useState2[1];
-  var _React$useState3 = React__default.useState(false),
+  var _React$useState3 = React.useState(false),
     htmlRecordingEnabled = _React$useState3[0],
     setHTMLRecordingEnabled = _React$useState3[1];
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
@@ -3648,11 +3679,11 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
           case 7:
             _yield$import = _context.sent;
             replayIntegration = _yield$import.replayIntegration;
-            Sentry.addIntegration(replayIntegration({
+            addIntegration(replayIntegration({
               maskAllText: false,
               blockAllMedia: false
             }));
-            setRecordButtonEnabled && setRecordButtonEnabled(!recordButtonEnabled);
+            setRecordButtonEnabled == null || setRecordButtonEnabled(!recordButtonEnabled);
             setHTMLRecordingEnabled(true);
             _context.next = 17;
             break;
@@ -3690,13 +3721,13 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
             _yield$import2 = _context2.sent;
             replayIntegration = _yield$import2.replayIntegration;
             replayCanvasIntegration = _yield$import2.replayCanvasIntegration;
-            Sentry.addIntegration(replayIntegration({
+            addIntegration(replayIntegration({
               maskAllText: false,
               blockAllMedia: false
             }));
-            Sentry.addIntegration(replayCanvasIntegration());
+            addIntegration(replayCanvasIntegration());
             setCanvasIntegrationEnabled(!canvasIntegrationEnabled);
-            setRecordButtonEnabled && setRecordButtonEnabled(!recordButtonEnabled);
+            setRecordButtonEnabled == null || setRecordButtonEnabled(!recordButtonEnabled);
             _context2.next = 17;
             break;
           case 14:
@@ -3717,8 +3748,8 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
   return jsxs(ErrorBoundary, {
     children: [jsx(MenuItem, {
       "data-testid": "sentryRecording-btn",
-      onClick: onOpen,
       divider: true,
+      onClick: onOpen,
       children: jsx(Grid, {
         container: true,
         children: jsx(Grid, {
@@ -3732,15 +3763,15 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
         zIndex: 1
       },
       children: jsx(DraggableComponent, {
+        bounds: "parent",
+        isOpen: true,
+        minHeight: 300,
+        minWidth: 500,
+        onClose: onClose,
         startSize: {
           width: 700
         },
-        minHeight: 300,
-        minWidth: 500,
         title: t('shared-sentry-recording'),
-        isOpen: true,
-        onClose: onClose,
-        bounds: "parent",
         children: jsxs(Grid, {
           container: true,
           spacing: 4,
@@ -3767,25 +3798,25 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
               children: t('shared-sentry-enable-message')
             })
           }), jsxs(Grid, {
-            container: true,
             alignItems: "center",
+            container: true,
             direction: "column",
             children: [jsx(Switch, {
-              checked: recordButtonEnabled && !canvasIntegrationEnabled,
-              onChange: enableHTMLRecording,
-              disabled: htmlRecordingEnabled
+              checked: recordButtonEnabled ? !canvasIntegrationEnabled : undefined,
+              disabled: htmlRecordingEnabled,
+              onChange: enableHTMLRecording
             }), recordButtonEnabled && !canvasIntegrationEnabled ? jsxs(Typography, {
               children: [" ", t('shared-sentry-disable')]
             }) : jsxs(Typography, {
               children: [" ", t('shared-sentry-enable')]
             })]
           }), jsxs(Grid, {
-            container: true,
             alignItems: "center",
+            container: true,
             direction: "column",
             children: [jsx(Switch, {
-              disabled: true,
               checked: canvasIntegrationEnabled,
+              disabled: true,
               onChange: enableHTMLAndCanvasRecording
             }), canvasIntegrationEnabled ? jsx(Typography, {
               children: t('shared-sentry-disable-both')
@@ -3796,10 +3827,10 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
                 },
                 children: t('shared-sentry-enable-both')
               }), jsxs(Typography, {
-                textAlign: "center",
                 sx: {
                   color: 'gray'
                 },
+                textAlign: "center",
                 children: ["(", t('shared-sentry-cors-wait'), ")"]
               })]
             })]
@@ -3841,14 +3872,14 @@ var useUserMenu = function useUserMenu(open) {
   if (open === void 0) {
     open = false;
   }
-  var _React$useState = React__default.useState(open),
+  var _React$useState = React.useState(open),
     isOpen = _React$useState[0],
-    setOpen = _React$useState[1];
+    setIsOpen = _React$useState[1];
   var onClose = function onClose() {
-    return setOpen(false);
+    return setIsOpen(false);
   };
   var onToggle = function onToggle() {
-    return setOpen(!isOpen);
+    return setIsOpen(!isOpen);
   };
   return {
     isOpen: isOpen,
@@ -3978,10 +4009,8 @@ var CustomSlider = function CustomSlider(_ref) {
   }, []);
   var mergedStyles = merge(extraStyles, sliderStyle);
   return jsx(Slider, Object.assign({
-    sx: mergedStyles,
-    ref: element,
-    value: value,
     orientation: orientation,
+    ref: element,
     role: "slider",
     slotProps: {
       thumb: {
@@ -3990,7 +4019,9 @@ var CustomSlider = function CustomSlider(_ref) {
       mark: {
         role: 'listitem'
       }
-    }
+    },
+    sx: mergedStyles,
+    value: value
   }, props));
 };
 
@@ -4004,8 +4035,8 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value = _ref$value === void 0 ? 0 : _ref$value,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return jsx(ToggleButton, Object.assign({
-    ref: ref,
     className: variant + " " + className,
+    ref: ref,
     value: value
   }, props));
 });
@@ -4076,23 +4107,23 @@ var TooltipSelect = function TooltipSelect(_ref) {
     onWheel: onWheel
   });
   return jsx(CustomTooltip, {
-    title: tooltip,
-    placement: "top",
     open: tooltipOpen,
+    placement: "top",
+    title: tooltip,
     children: jsx(StyledSelect, Object.assign({
-      ref: scrollInIsolationRef,
-      variant: variant,
+      additionalStyling: additionalStyling,
       disableUnderline: true,
-      onOpen: onOpen,
+      hasBackgroundColor: hasBackgroundColor,
+      isEnabled: isEnabled,
+      onBlur: onBlur,
       onClose: onClose,
+      onFocus: onFocus,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      isEnabled: isEnabled,
-      hasBackgroundColor: hasBackgroundColor,
-      additionalStyling: additionalStyling,
-      skipLocalStyling: skipLocalStyling
+      onOpen: onOpen,
+      ref: scrollInIsolationRef,
+      skipLocalStyling: skipLocalStyling,
+      variant: variant
     }, props))
   });
 };
@@ -4130,8 +4161,8 @@ var StyledSelect = styled(/*#__PURE__*/React.forwardRef(function (_ref3, ref) {
         }
       }
     },
-    sx: additionalStyling,
-    ref: ref
+    ref: ref,
+    sx: additionalStyling
   }));
 }))(function (_ref4) {
   var theme = _ref4.theme;
@@ -4257,11 +4288,11 @@ var CustomAccordion = function CustomAccordion(_ref) {
   var iconColor = theme.palette.geowebColors.buttons.icon["default"].color;
   return jsxs(Accordion, Object.assign({}, props, {
     defaultExpanded: defaultExpanded,
+    disableGutters: disableGutters,
     elevation: expanded ? expandedElevation : collapsedElevation,
     onChange: function onChange(_event, expanded) {
       return setExpanded(expanded);
     },
-    disableGutters: disableGutters,
     slotProps: {
       transition: {
         timeout: transitionDuration
@@ -4346,8 +4377,8 @@ var SearchHighlight = function SearchHighlight(_ref) {
         return part.toLocaleLowerCase().includes(search);
       })) {
         return jsx("mark", {
-          style: highlightStyle,
           "data-testid": "mark",
+          style: highlightStyle,
           children: part
         }, key);
       }
@@ -4376,8 +4407,8 @@ var SwitchButton = function SwitchButton(_ref) {
     tooltip = _ref$tooltip === void 0 ? 'Switch mode' : _ref$tooltip,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return jsx(CustomTooltip, {
-    title: tooltip,
     className: "switch-button",
+    title: tooltip,
     children: jsxs("span", {
       role: "button",
       children: [jsx(FormLabel, {
@@ -4401,9 +4432,9 @@ var ClearButton$1 = function ClearButton(_ref) {
   var _useSharedTranslation = useSharedTranslation(),
     t = _useSharedTranslation.t;
   return jsx(CustomIconButton, {
-    tooltipTitle: t('shared-clear'),
-    sx: buttonStyle,
     onClick: onClick,
+    sx: buttonStyle,
+    tooltipTitle: t('shared-clear'),
     children: jsx(Clear, {})
   });
 };
@@ -4432,10 +4463,10 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
           }
         })
       }), jsx(Button, {
-        variant: "tertiary",
         onClick: function onClick() {
           return setPopupIsOpen(true);
         },
+        variant: "tertiary",
         children: t('shared-save')
       })]
     });
@@ -4448,8 +4479,8 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
     });
   }
   return jsx(CustomIconButton, {
-    tooltipTitle: t('shared-search'),
     sx: buttonStyle,
+    tooltipTitle: t('shared-search'),
     children: jsx(Search, {})
   });
 };
@@ -4489,7 +4520,7 @@ var SearchField$1 = function SearchField(_ref) {
     setUrlIsValid = _React$useState2[1];
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
-  var translatedLabel = label || (onOpenServicePopup ? t('shared-search-services') : t('shared-search'));
+  var translatedLabel = label != null ? label : onOpenServicePopup ? t('shared-search-services') : t('shared-search');
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
   var handleChange = function handleChange(text) {
@@ -4529,34 +4560,34 @@ var SearchField$1 = function SearchField(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchFilter]);
   return jsx(TextField, {
-    variant: "filled",
+    autoFocus: true,
+    fullWidth: true,
     label: translatedLabel,
-    value: localSearchString,
     onChange: function onChange(e) {
       handleChange(e.target.value);
     },
-    autoFocus: true,
-    fullWidth: true,
     slotProps: {
       input: {
         endAdornment: jsx(InputAdornment, {
           position: "end",
           children: jsx(SearchFieldButton, {
-            setPopupIsOpen: onOpenServicePopup ? function () {
-              onOpenServicePopup(localSearchString);
-              setLocalSearchString('');
-            } : undefined,
             localSearchString: localSearchString,
             onClickClear: function onClickClear() {
               setLocalSearchString('');
               setSearchFilterDebounced('');
               setUrlIsValid(false);
-            }
+            },
+            setPopupIsOpen: onOpenServicePopup ? function () {
+              onOpenServicePopup(localSearchString);
+              setLocalSearchString('');
+            } : undefined
           })
         })
       }
     },
-    sx: small ? stylesSmall : {}
+    sx: small ? stylesSmall : {},
+    value: localSearchString,
+    variant: "filled"
   });
 };
 
@@ -4584,15 +4615,15 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
       justifyContent: 'flex-end'
     },
     children: [!hideLabel && jsx(Typography, {
+      "data-testid": dataTestId,
       sx: {
         color: 'geowebColors.captions.captionStatus.rgba',
         fontSize: '10px',
         lineHeight: '1.6',
         letterSpacing: '0.33px'
       },
-      "data-testid": dataTestId,
       children: getLastUpdateTitle(lastUpdateTime, t)
-    }), showRefreshButton && jsx(CustomIconButton, {
+    }), showRefreshButton ? jsx(CustomIconButton, {
       "data-testid": "refresh-button",
       onClick: onPressRefresh,
       sx: {
@@ -4605,7 +4636,7 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
       tooltipTitle: t('shared-click-to-refresh'),
       variant: "tool",
       children: jsx(Cached, {})
-    })]
+    }) : null]
   });
 };
 
@@ -4641,14 +4672,15 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     _this._documentKeyDown = _this._documentKeyDown.bind(_this);
     _this._isFocussed = false;
     _this.canvas = null;
-    _this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
-    _this.canvascontainer = /*#__PURE__*/React__default.createRef();
+    _this.canvascontaineroutside = /*#__PURE__*/React.createRef();
+    _this.canvascontainer = /*#__PURE__*/React.createRef();
     return _this;
   }
   _inheritsLoose(CanvasComponent, _Component);
   var _proto = CanvasComponent.prototype;
   _proto.componentDidMount = function componentDidMount() {
-    var _this2 = this;
+    var _this$canvascontainer,
+      _this2 = this;
     this.mounted = true;
     if (this.canvas) {
       this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
@@ -4670,7 +4702,7 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
       window.addEventListener('keyup', this.onKeyUp);
     }
     window.addEventListener('resize', this._handleWindowResize);
-    if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+    if ((_this$canvascontainer = this.canvascontaineroutside) != null && _this$canvascontainer.current && onKeyUp) {
       this.canvascontaineroutside.current.focus();
     }
     this.timer = setInterval(function () {
@@ -4741,16 +4773,19 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     onTouchEnd();
   };
   _proto.handleTouchMoveEvent = function handleTouchMoveEvent(event) {
+    var _event$touches, _touch$target, _target$offsetLeft;
     var _this$props3 = this.props,
       onTouchMove = _this$props3.onTouchMove,
       onCanvasClick = _this$props3.onCanvasClick;
-    var touches = event && event.touches && event.touches[0];
-    if (touches && touches.clientX && touches.clientY) {
-      var x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
-      var y2 = event.touches[0].clientY;
-      onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
+    var touch = (_event$touches = event.touches) == null ? void 0 : _event$touches[0];
+    var target = (_touch$target = touch == null ? void 0 : touch.target) != null ? _touch$target : null;
+    // Use ?? so 0 is allowed, and optional chaining for safety
+    var x = touch ? touch.clientX - ((_target$offsetLeft = target == null ? void 0 : target.offsetLeft) != null ? _target$offsetLeft : 0) : undefined;
+    var y = touch == null ? void 0 : touch.clientY;
+    if (x != null && y != null) {
+      onCanvasClick == null || onCanvasClick(x, y, this.currentWidth, this.currentHeight);
     }
-    onTouchMove(event, this.currentWidth);
+    onTouchMove == null || onTouchMove(event, this.currentWidth);
   };
   _proto.handleClickEvent = function handleClickEvent(event) {
     var onCanvasClick = this.props.onCanvasClick;
@@ -4783,11 +4818,12 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     }
   };
   _proto.onKeyUp = function onKeyUp(event) {
+    var _this$canvascontainer2;
     var onKeyUp = this.props.onKeyUp;
     if (onKeyUp) {
       onKeyUp(event);
     }
-    if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+    if ((_this$canvascontainer2 = this.canvascontaineroutside) != null && _this$canvascontainer2.current && onKeyUp) {
       if (event.code === 'Escape') {
         this.canvascontaineroutside.current.focus();
       }
@@ -4806,7 +4842,7 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
   };
   _proto.startLoop = function startLoop() {
     var onRenderCanvas = this.props.onRenderCanvas;
-    if (this.mounted === false || this.loopHasStarted === false) {
+    if (!this.mounted || !this.loopHasStarted) {
       return;
     }
     if (this.canvas) {
@@ -4834,7 +4870,7 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     if (loop !== true) {
       this.loopHasStarted = false;
       onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
-    } else if (this.loopHasStarted === false) {
+    } else if (!this.loopHasStarted) {
       this.loopHasStarted = true;
       this.startLoop();
     }
@@ -4842,14 +4878,14 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
   _proto.resize = function resize() {
     var canvascontainer = this.canvascontainer,
       resizeCallback = this.props.resizeCallback;
-    if (canvascontainer && canvascontainer.current) {
+    if (canvascontainer != null && canvascontainer.current) {
       var newWidth = canvascontainer.current.clientWidth;
       var newHeight = canvascontainer.current.clientHeight;
       if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
         this.currentWidth = newWidth;
         this.currentHeight = newHeight;
         this.updateCanvas();
-        resizeCallback && resizeCallback(newWidth);
+        resizeCallback == null || resizeCallback(newWidth);
       }
     }
   };
@@ -4858,11 +4894,10 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
     this.updateCanvas();
     this._handleWindowResize();
     return jsx("div", {
-      role: "button",
-      ref: this.canvascontaineroutside,
-      tabIndex: 0,
-      onFocus: this.onFocus,
       onBlur: this.onBlur,
+      onFocus: this.onFocus,
+      ref: this.canvascontaineroutside,
+      role: "button",
       style: {
         height: '100%',
         width: '100%',
@@ -4870,7 +4905,9 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
         display: 'block',
         overflow: 'hidden'
       },
+      tabIndex: 0,
       children: jsx("div", {
+        "data-testid": "canvas-container",
         ref: this.canvascontainer,
         style: {
           minWidth: 'inherit',
@@ -4881,15 +4918,14 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
           display: 'block',
           border: 'none'
         },
-        "data-testid": "canvas-container",
         children: jsx("div", {
+          "aria-label": "canvas",
+          role: "presentation",
           style: {
             overflow: 'visible',
             width: 0,
             height: 0
           },
-          role: "presentation",
-          "aria-label": "canvas",
           children: jsx("canvas", {
             "data-testid": "canvas",
             ref: function ref(canvas) {
@@ -4955,13 +4991,15 @@ var FilterChip = function FilterChip(_ref) {
     return onClickIcon == null ? void 0 : onClickIcon(chipRef.current, event);
   };
   return jsx(Chip, {
-    ref: chipRef,
-    size: size,
+    color: isSelected ? 'secondary' : 'default',
+    deleteIcon: actionIcon,
+    disabled: isDisabled,
     id: id,
     label: label,
-    disabled: isDisabled,
-    variant: isSelected ? 'filled' : 'outlined',
-    color: isSelected ? 'secondary' : 'default',
+    onClick: clickHandler,
+    onDelete: onClickIcon ? clickIconHandler : undefined,
+    ref: chipRef,
+    size: size,
     sx: {
       borderColor: isDisabled ? 'none' : theme.palette.geowebColors.buttons.tertiary["default"].borderColor,
       padding: '0px 4px',
@@ -4979,9 +5017,7 @@ var FilterChip = function FilterChip(_ref) {
         borderColor: 'transparent'
       }
     },
-    onClick: clickHandler,
-    deleteIcon: actionIcon,
-    onDelete: onClickIcon ? clickIconHandler : undefined
+    variant: isSelected ? 'filled' : 'outlined'
   });
 };
 
@@ -4995,32 +5031,32 @@ var FilterList = function FilterList(_ref) {
   var _useSharedTranslation = useSharedTranslation(),
     t = _useSharedTranslation.t;
   return jsxs(Stack, {
-    direction: "row",
-    "data-testid": "filterList",
     className: "filter-list",
+    "data-testid": "filterList",
+    direction: "row",
     flexWrap: "wrap",
     sx: {
       gap: 1,
       rowGap: 1
     },
     children: [jsx(FilterChip, {
-      id: "all",
-      label: t('shared-filter-all'),
-      isSelected: isAllSelected,
       handleClick: function handleClick(key) {
         return onChipClick(key, !isAllSelected);
-      }
+      },
+      id: "all",
+      isSelected: isAllSelected,
+      label: t('shared-filter-all')
     }), filters.map(function (filter) {
       return jsx(FilterChip, {
-        id: filter.id,
-        label: t(filter.label),
-        isSelected: isAllSelected ? false : filter.isSelected,
-        isDisabled: filter.isDisabled,
         handleClick: function handleClick(key) {
           // If they are all isSelected ensure that if one is clicked that one will be the only one set to selected
           var selected = isAllSelected ? true : !filter.isSelected;
           onChipClick(key, selected);
-        }
+        },
+        id: filter.id,
+        isDisabled: filter.isDisabled,
+        isSelected: isAllSelected ? false : filter.isSelected,
+        label: t(filter.label)
       }, filter.id);
     })]
   });
@@ -5030,19 +5066,19 @@ var DEBOUNCE_TIMEOUT = 300;
 var SearchButton = function SearchButton(_ref) {
   var label = _ref.label;
   return jsx(CustomIconButton, {
-    tooltipTitle: label,
     edge: "end",
     size: "large",
+    tooltipTitle: label,
     children: jsx(Search, {})
   });
 };
 var ClearButton = function ClearButton(_ref2) {
   var onClick = _ref2.onClick;
   return jsx(CustomIconButton, {
-    tooltipTitle: "Clear",
     edge: "end",
     onClick: onClick,
     size: "large",
+    tooltipTitle: "Clear",
     children: jsx(Clear, {})
   });
 };
@@ -5059,21 +5095,14 @@ var SearchField = function SearchField(_ref3) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var handleValueChangeDebounced = React.useCallback(debounce$1(valueChanged, DEBOUNCE_TIMEOUT), []);
   return jsx(TextField, {
-    variant: "filled",
-    size: "small",
-    sx: {
-      '& input': {
-        paddingTop: '18px'
-      }
-    },
-    label: label,
-    value: localValue,
     autoFocus: true,
     fullWidth: true,
+    label: label,
     onChange: function onChange(e) {
       handleValueChangeDebounced(e.target.value);
       setLocalValue(e.target.value);
     },
+    size: "small",
     slotProps: {
       input: {
         endAdornment: jsx(InputAdornment, {
@@ -5088,7 +5117,14 @@ var SearchField = function SearchField(_ref3) {
           })
         })
       }
-    }
+    },
+    sx: {
+      '& input': {
+        paddingTop: '18px'
+      }
+    },
+    value: localValue,
+    variant: "filled"
   });
 };
 
@@ -5104,11 +5140,11 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     searchQuery = _ref.searchQuery,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsx(Box, {
+    ref: ref,
     sx: Object.assign({
       marginBottom: '8px',
       width: '100%'
-    }, props.sx),
-    ref: ref,
+    }, Array.isArray(props.sx) ? Object.assign.apply(Object, [{}].concat(props.sx)) : props.sx),
     children: jsxs(Stack, {
       spacing: 1,
       children: [jsx(SearchField, {
@@ -5116,8 +5152,8 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         valueChanged: onSearch
       }), jsx(FilterList, {
         filters: filters,
-        onChipClick: onClickFilterChip,
-        isAllSelected: isAllSelected
+        isAllSelected: isAllSelected,
+        onChipClick: onClickFilterChip
       })]
     })
   });
@@ -5138,30 +5174,23 @@ var FilterOption = function FilterOption(_ref) {
     return setShowOnly(show);
   }, 100);
   return jsx(ListItem, {
-    disablePadding: true,
     dense: true,
-    sx: {
-      width: '100%',
-      minWidth: '300px',
-      paddingRight: '0px',
-      marginLeft: '-12px',
-      fontSize: '12px'
-    },
-    secondaryAction: showOnly && jsx(CustomIconButton, {
+    disablePadding: true,
+    secondaryAction: showOnly ? jsx(CustomIconButton, {
       "aria-label": "Only " + label,
-      style: {
-        backgroundColor: 'transparent',
-        width: 'auto'
-      },
       edge: "end",
       onClick: function onClick() {
         return _onClick(!checked, true);
       },
+      onMouseOut: function onMouseOut() {
+        return updateShowOnly(false);
+      },
       onMouseOver: function onMouseOver() {
         return updateShowOnly(true);
       },
-      onMouseOut: function onMouseOut() {
-        return updateShowOnly(false);
+      style: {
+        backgroundColor: 'transparent',
+        width: 'auto'
       },
       children: jsx(Typography, {
         sx: {
@@ -5171,20 +5200,27 @@ var FilterOption = function FilterOption(_ref) {
         },
         children: t('shared-only')
       })
-    }),
+    }) : null,
+    sx: {
+      width: '100%',
+      minWidth: '300px',
+      paddingRight: '0px',
+      marginLeft: '-12px',
+      fontSize: '12px'
+    },
     children: jsxs(ListItemButton, {
-      role: undefined,
+      dense: true,
+      disableGutters: true,
       onClick: function onClick() {
         return _onClick(!checked);
       },
-      onMouseOver: function onMouseOver() {
-        return updateShowOnly(true);
-      },
       onMouseOut: function onMouseOut() {
         return updateShowOnly(false);
       },
-      dense: true,
-      disableGutters: true,
+      onMouseOver: function onMouseOver() {
+        return updateShowOnly(true);
+      },
+      role: undefined,
       sx: {
         padding: 0
       },
@@ -5194,20 +5230,20 @@ var FilterOption = function FilterOption(_ref) {
         },
         children: jsx(Checkbox, {
           checked: checked,
-          tabIndex: -1,
           disableRipple: true,
+          name: optionId,
           slotProps: {
             input: {
               'aria-labelledby': optionId,
               'aria-label': optionId
             }
           },
-          name: optionId
+          tabIndex: -1
         })
       }), jsx(ListItemText, {
         id: optionId,
         primary: jsx(Box, {
-          sx: Object.assign({}, labelStyle),
+          sx: labelStyle,
           children: label
         })
       })]
@@ -5215,18 +5251,21 @@ var FilterOption = function FilterOption(_ref) {
   });
 };
 
-var _excluded = ["isDark", "children"];
+var _excluded = ["isDark", "children", "sx"];
 var StorybookDocsWrapper = function StorybookDocsWrapper(_ref) {
   var _ref$isDark = _ref.isDark,
     isDark = _ref$isDark === void 0 ? false : _ref$isDark,
     children = _ref.children,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? [] : _ref$sx,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return jsx(Box, {
-    sx: Object.assign({}, isDark && {
+  return jsx(Box, Object.assign({
+    sx: [].concat(isDark ? [{
       backgroundColor: 'geowebColors.background.surfaceBrowser'
-    }, props.sx),
+    }] : [], Array.isArray(sx) ? sx : [sx])
+  }, props, {
     children: children
-  });
+  }));
 };
 
 /* *
@@ -5263,7 +5302,7 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   if (data && typeof data === 'string') {
     return data;
   }
-  if (data && data.message && typeof data.message === 'string') {
+  if (data != null && data.message && typeof data.message === 'string') {
     return data.message;
   }
   if (error.message) {
@@ -5279,7 +5318,7 @@ var getErrorMessage = function getErrorMessage(error) {
 };
 var getAxiosWarningMessage = function getAxiosWarningMessage(error) {
   var data = error.response && error.response.data;
-  if (data && data.WarningMessage && typeof data.WarningMessage === 'string') {
+  if (data != null && data.WarningMessage && typeof data.WarningMessage === 'string') {
     return data.WarningMessage;
   }
   return '';
@@ -5289,8 +5328,9 @@ var getWarningMessage = function getWarningMessage(error) {
     return getAxiosWarningMessage(error);
   }
   try {
+    var _message$WarningMessa;
     var message = JSON.parse(error.message);
-    return message.WarningMessage || '';
+    return (_message$WarningMessa = message.WarningMessage) != null ? _message$WarningMessa : '';
   } catch (_unused) {
     return '';
   }
@@ -5539,7 +5579,7 @@ var isBetween = function isBetween(date, from, to, inclusivity) {
   if (!['()', '[]', '(]', '[)'].includes(inclusivity)) {
     throw new Error('Inclusivity parameter must be one of (), [], (], [)');
   }
-  var isBeforeEqual = inclusivity[0] === '[';
+  var isBeforeEqual = inclusivity.startsWith('[');
   var isAfterEqual = inclusivity[1] === ']';
   return (isBeforeEqual ? isEqual(from, date) || isBefore(from, date) : isBefore(from, date)) && (isAfterEqual ? isEqual(to, date) || isAfter(to, date) : isAfter(to, date));
 };
@@ -5701,13 +5741,15 @@ var isAfter = function isAfter(date, dateToCompare) {
  * @returns {Date} - Date in UTC, or current date when something invalid is passed.
  */
 var utc = function utc(dateStr) {
+  var _isoStringToDate2;
   if (!dateStr) {
     return createDate();
   }
   if (hasOffset(dateStr)) {
-    return isoStringToDate(dateStr, false) || createDate();
+    var _isoStringToDate;
+    return (_isoStringToDate = isoStringToDate(dateStr, false)) != null ? _isoStringToDate : createDate();
   }
-  return isoStringToDate(dateStr) || createDate();
+  return (_isoStringToDate2 = isoStringToDate(dateStr)) != null ? _isoStringToDate2 : createDate();
 };
 /**
  * Parsing string to a date. Stricter check, will return undefined when dateString is invalid.
@@ -5728,7 +5770,7 @@ var hasOffset = function hasOffset(dateStr) {
 };
 var getOffsetStr = function getOffsetStr(dateStr) {
   var offsetMatcher = /T.*([+-]\d{2}(:?\d{2})?|Z)$/;
-  var groups = dateStr.match(offsetMatcher);
+  var groups = offsetMatcher.exec(dateStr);
   return groups ? groups[1] : null;
 };
 /**
@@ -5941,7 +5983,7 @@ var convertNOWFormatToUTC = function convertNOWFormatToUTC(timeValue) {
   var now = new Date();
   var today = startOfDay(now);
   var regex = /(NOW|TODAY)([+-])PT(\d+)H(\d+)M/;
-  var matches = timeValue.match(regex);
+  var matches = regex.exec(timeValue);
   if (matches) {
     var base = matches[1] === 'NOW' ? now : today;
     var sign = matches[2] === '+' ? 1 : -1;
@@ -5960,7 +6002,7 @@ var convertNOWandTODAYFormatsToUTC = function convertNOWandTODAYFormatsToUTC(tim
   var now = new Date();
   var today = startOfDayUTC(now);
   var regex = /(NOW|TODAY)([+-])PT(\d+)H(\d+)M/;
-  var matches = timeValue.match(regex);
+  var matches = regex.exec(timeValue);
   if (matches) {
     var base = matches[1] === 'NOW' ? now : today;
     var sign = matches[2] === '+' ? 1 : -1;
@@ -6208,7 +6250,8 @@ var RenderCounter = /*#__PURE__*/function () {
     // console.log('numRenders', id, this.get(id));
   };
   _proto.get = function get(id) {
-    return this.numRenders.get(id) || 0;
+    var _this$numRenders$get;
+    return (_this$numRenders$get = this.numRenders.get(id)) != null ? _this$numRenders$get : 0;
   };
   return RenderCounter;
 }();
@@ -6245,7 +6288,8 @@ var sessionStorageProvider = {
     return sessionStorage.setItem(SessionStorageKey.CONFIG, JSON.stringify(value));
   },
   getConfig: function getConfig() {
-    return JSON.parse(sessionStorage.getItem(SessionStorageKey.CONFIG) || '{}');
+    var _sessionStorage$getIt;
+    return JSON.parse((_sessionStorage$getIt = sessionStorage.getItem(SessionStorageKey.CONFIG)) != null ? _sessionStorage$getIt : '{}');
   },
   setOauthState: function setOauthState(value) {
     return sessionStorage.setItem(SessionStorageKey.OAUTH_STATE, value);