@opengeoweb/shared 14.0.1 → 14.2.1

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';
 
@@ -286,6 +285,11 @@ var sharedTranslations = {
 function _OverloadYield(e, d) {
   this.v = e, this.k = d;
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -311,6 +315,23 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: true
+      } : {
+        done: false,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _inheritsLoose(t, o) {
   t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
@@ -503,6 +524,13 @@ function _setPrototypeOf(t, e) {
     return t.__proto__ = e, t;
   }, _setPrototypeOf(t, e);
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 function _regeneratorRuntime() {
 
   var r = _regenerator(),
@@ -572,7 +600,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 +640,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 +666,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 +724,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 +746,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 +788,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 +803,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 +820,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 +860,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 +875,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 +899,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 +914,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 +1016,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 +1051,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 +1060,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 +1091,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
                 },
                 children: icon
               })
-            })]
+            }) : null]
           })
         }, text);
       }) : jsx("div", {}) // Needed to make the menu work without any menuItems
@@ -1021,57 +1100,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 +1114,6 @@ var Title = function Title(_ref) {
       whiteSpace: 'nowrap',
       color: 'geowebColors.typographyAndIcons.text'
     },
-    "data-testid": "customDialog-title",
-    component: "span",
     children: title
   });
 };
@@ -1101,11 +1132,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 +1150,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 +1208,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 +1258,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 +1324,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 +1362,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 +1426,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 +1441,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 +1452,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 +1467,7 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
           }
         });
       },
-      onClick: onSubmit,
-      autoFocus: !disableAutoFocus,
+      variant: "primary",
       children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
     })]
   });
@@ -1464,19 +1495,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 +1608,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 +1710,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 +1718,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 +1755,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 +1787,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 +1831,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;
@@ -1826,6 +1857,43 @@ var useScrollingInIsolation = function useScrollingInIsolation(options) {
   return scrollInIsolationRef;
 };
 
+/*
+  Accepts an array and html div element that is being observed for resizes.
+*/
+var useResizeObserver = function useResizeObserver(listContainerRef, collections,
+/**
+ * Optional ResizeObserver implementation for dependency injection (testing, polyfills).
+ * Defaults to window.ResizeObserver when not provided.
+ */
+ResizeObserverImpl) {
+  if (ResizeObserverImpl === void 0) {
+    ResizeObserverImpl = window.ResizeObserver;
+  }
+  var _React$useState = React.useState(350),
+    listHeight = _React$useState[0],
+    setListHeight = _React$useState[1]; // default fallback
+  React.useEffect(function () {
+    var node = listContainerRef.current;
+    if (!node) {
+      return;
+    }
+    var resizeObserver = new ResizeObserverImpl(function (entries) {
+      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+        var entry = _step.value;
+        if (entry.contentRect) {
+          if (collections && collections.length > 1) {
+            setListHeight(entry.contentRect.height - 150); // Subtract header height + accordion summary height
+          } else {
+            setListHeight(entry.contentRect.height - 115); // Subtract header height
+          }
+        }
+      }
+    });
+    resizeObserver.observe(node);
+  }, [listContainerRef, collections, ResizeObserverImpl]);
+  return listHeight;
+};
+
 var ConfirmationServiceContext = /*#__PURE__*/React.createContext(Promise.reject);
 var useConfirmationDialog = function useConfirmationDialog() {
   return React.useContext(ConfirmationServiceContext);
@@ -1839,6 +1907,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 +1949,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 +1992,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 +2007,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 +2060,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 +2113,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 +2121,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 +2140,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 +2166,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 +2212,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 +2225,6 @@ var AppHeader = function AppHeader(_ref) {
           right: '-1px'
         }
       }), jsx(Typography, {
-        variant: "h1",
         sx: {
           display: 'none',
           fontSize: '20px',
@@ -2144,9 +2240,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 +2252,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 +2282,7 @@ var AppHeader = function AppHeader(_ref) {
           children: menu
         })
       })]
-    }), jsx(Box, {
+    }) : null, jsx(Box, {
       className: "workspace-topbar",
       sx: {
         flexGrow: 1,
@@ -2291,20 +2388,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 +2473,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 +2491,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 +2503,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 +2517,13 @@ var UserMenu = function UserMenu(_ref) {
           }
           onClose();
         },
-        mouseEvent: "onMouseDown",
         children: jsx(MenuList, {
           sx: styles$4.userMenu,
           variant: "menu",
           children: children
         })
       })
-    })]
+    }) : null]
   });
 };
 
@@ -2451,38 +2548,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 +2590,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 +2680,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 +2697,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 +2731,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 +2754,7 @@ var ToolHeader = function ToolHeader(_ref) {
             },
             children: closeIcon
           })
-        })]
+        }) : null]
       })]
     })
   });
@@ -2709,23 +2806,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 +2902,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 +2911,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 +2934,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 +2946,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 +3065,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 +3107,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 +3121,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 +3131,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 +3215,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 +3569,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 +3606,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 +3623,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 +3657,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 +3671,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 +3686,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 +3704,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 +3745,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 +3787,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 +3814,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 +3829,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 +3864,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 +3893,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 +3938,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 +4075,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 +4085,9 @@ var CustomSlider = function CustomSlider(_ref) {
       mark: {
         role: 'listitem'
       }
-    }
+    },
+    sx: mergedStyles,
+    value: value
   }, props));
 };
 
@@ -4004,8 +4101,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 +4173,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 +4227,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,18 +4354,20 @@ 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
       }
     },
     children: [jsx(AccordionSummary, {
+      "aria-label": expanded ? 'Drawer opened' : 'Drawer closed',
       component: "div",
+      "data-testid": title && amountOfItems ? title + " " + amountOfItems : title,
       expandIcon: CustomExpandIcon ? jsx(CustomExpandIcon, {
         style: {
           fill: "" + iconColor
@@ -4346,8 +4445,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 +4475,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 +4500,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 +4531,10 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
           }
         })
       }), jsx(Button, {
-        variant: "tertiary",
         onClick: function onClick() {
           return setPopupIsOpen(true);
         },
+        variant: "tertiary",
         children: t('shared-save')
       })]
     });
@@ -4448,8 +4547,8 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
     });
   }
   return jsx(CustomIconButton, {
-    tooltipTitle: t('shared-search'),
     sx: buttonStyle,
+    tooltipTitle: t('shared-search'),
     children: jsx(Search, {})
   });
 };
@@ -4489,7 +4588,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 +4628,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 +4683,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 +4704,7 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
       tooltipTitle: t('shared-click-to-refresh'),
       variant: "tool",
       children: jsx(Cached, {})
-    })]
+    }) : null]
   });
 };
 
@@ -4641,14 +4740,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 +4770,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 +4841,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 +4886,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 +4910,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 +4938,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 +4946,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 +4962,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 +4973,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 +4986,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 +5059,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 +5085,7 @@ var FilterChip = function FilterChip(_ref) {
         borderColor: 'transparent'
       }
     },
-    onClick: clickHandler,
-    deleteIcon: actionIcon,
-    onDelete: onClickIcon ? clickIconHandler : undefined
+    variant: isSelected ? 'filled' : 'outlined'
   });
 };
 
@@ -4995,32 +5099,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 +5134,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 +5163,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 +5185,14 @@ var SearchField = function SearchField(_ref3) {
           })
         })
       }
-    }
+    },
+    sx: {
+      '& input': {
+        paddingTop: '18px'
+      }
+    },
+    value: localValue,
+    variant: "filled"
   });
 };
 
@@ -5104,11 +5208,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 +5220,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 +5242,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 +5268,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 +5298,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 +5319,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 +5370,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 +5386,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 +5396,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 '';
   }
@@ -5314,6 +5422,7 @@ var getWarningMessage = function getWarningMessage(error) {
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var DATE_FORMAT_DATEPICKER = 'dd/MM/yyyy HH:mm';
+var DATE_FORMAT_DATEPICKER_NO_YEAR = 'dd/MM HH:mm';
 var DATE_FORMAT_UTC = "yyyy-MM-dd'T'HH:mm:ss'Z'";
 var DATE_FORMAT_YEAR = 'yyyy-MM-dd';
 var DATE_FORMAT_HOURS = 'HH:mm';
@@ -5539,7 +5648,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 +5810,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 +5839,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 +6052,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 +6071,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;
@@ -6015,6 +6126,7 @@ var setSeconds = function setSeconds(date, seconds) {
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DATE_FORMAT_DATEPICKER: DATE_FORMAT_DATEPICKER,
+  DATE_FORMAT_DATEPICKER_NO_YEAR: DATE_FORMAT_DATEPICKER_NO_YEAR,
   DATE_FORMAT_HOURS: DATE_FORMAT_HOURS,
   DATE_FORMAT_NAME_OF_DAY: DATE_FORMAT_NAME_OF_DAY,
   DATE_FORMAT_NAME_OF_DAY_MONTH: DATE_FORMAT_NAME_OF_DAY_MONTH,
@@ -6208,7 +6320,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 +6358,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);
@@ -6314,4 +6428,4 @@ var SystemScope = {
   system: 'system'
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, loadAllTranslations, pollingIntervalTimeout, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useScrollingInIsolation, useUserMenu, useWheelStopPropagation };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, loadAllTranslations, pollingIntervalTimeout, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useResizeObserver, useScrollingInIsolation, useUserMenu, useWheelStopPropagation };