@opengeoweb/shared 12.1.2 → 12.3.0

package/index.esm.js

@@ -1,16 +1,15 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, useTheme, Dialog, DialogTitle, DialogContent, DialogActions, Paper, Button, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
+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 { Resize, Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import { Resize, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, KeyOption, ArrowLeft, ArrowRight, KeyCommand, ArrowUp, ArrowDown, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import 'i18next';
-import { useTranslation } from 'react-i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
 import * as Sentry 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 { configureStore } from '@reduxjs/toolkit';
 
 var en = {
 	"shared-choose-app-mode": "Choose your default app mode",
@@ -72,7 +71,8 @@ var en = {
 	"shared-filter-system-presets": "System presets",
 	"shared-filter-shared-presets": "Shared presets",
 	"shared-filter-search": "Search",
-	"shared-only": "ONLY"
+	"shared-only": "ONLY",
+	"shared-customdialog-back": "Back"
 };
 var fi = {
 	"shared-choose-app-mode": "Sovelluksen väriteema",
@@ -134,7 +134,8 @@ var fi = {
 	"shared-filter-system-presets": "Järestelmä presetit",
 	"shared-filter-shared-presets": "ei käännetty",
 	"shared-filter-search": "Etsi",
-	"shared-only": "Pelkästään"
+	"shared-only": "Pelkästään",
+	"shared-customdialog-back": "PALAA TAKAISIN"
 };
 var no = {
 	"shared-choose-app-mode": "Velg din standardmodus",
@@ -196,7 +197,8 @@ var no = {
 	"shared-filter-system-presets": "System presets",
 	"shared-filter-shared-presets": "Delte arbeidsflater",
 	"shared-filter-search": "Søk",
-	"shared-only": "BARE"
+	"shared-only": "BARE",
+	"shared-customdialog-back": "Tilbake"
 };
 var nl = {
 	"shared-choose-app-mode": "Kies je standaard app-modus",
@@ -258,7 +260,8 @@ var nl = {
 	"shared-filter-system-presets": "Systeem presets",
 	"shared-filter-shared-presets": "Gedeelde presets",
 	"shared-filter-search": "Zoeken",
-	"shared-only": "ALLEEN"
+	"shared-only": "ALLEEN",
+	"shared-customdialog-back": "Terug"
 };
 var sharedTranslations = {
 	en: en,
@@ -299,7 +302,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -322,9 +325,9 @@ function _regeneratorRuntime() {
   function define(t, e, r) {
     return Object.defineProperty(t, e, {
       value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }), t[e];
   }
   try {
@@ -417,7 +420,7 @@ function _regeneratorRuntime() {
         if ("throw" === i) throw a;
         return {
           value: t,
-          done: !0
+          done: true
         };
       }
       for (n.method = i, n.arg = a;;) {
@@ -468,7 +471,7 @@ function _regeneratorRuntime() {
   function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(true);
   }
   function values(e) {
     if (e || "" === e) {
@@ -478,8 +481,8 @@ function _regeneratorRuntime() {
       if (!isNaN(e.length)) {
         var o = -1,
           i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
+            return next.value = t, next.done = true, next;
           };
         return i.next = i;
       }
@@ -488,10 +491,10 @@ function _regeneratorRuntime() {
   }
   return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
-    configurable: !0
+    configurable: true
   }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
-    configurable: !0
+    configurable: true
   }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
     var e = "function" == typeof t && t.constructor;
     return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
@@ -520,17 +523,17 @@ function _regeneratorRuntime() {
     return r.reverse(), function next() {
       for (; r.length;) {
         var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
+        if (t in e) return next.value = t, next.done = false, next;
       }
-      return next.done = !0, next;
+      return next.done = true, next;
     };
   }, e.values = values, Context.prototype = {
     constructor: Context,
     reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
-      this.done = !0;
+      this.done = true;
       var t = this.tryEntries[0].completion;
       if ("throw" === t.type) throw t.arg;
       return this.rval;
@@ -549,10 +552,10 @@ function _regeneratorRuntime() {
           var c = n.call(i, "catchLoc"),
             u = n.call(i, "finallyLoc");
           if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
           } else {
             if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
@@ -674,96 +677,14 @@ var StatusTag = function StatusTag(_ref) {
   });
 };
 
-var defaultDelay = 1000;
-var useControlledTooltip = function useControlledTooltip() {
-  var _React$useState = React.useState(false),
-    tooltipOpen = _React$useState[0],
-    setTooltipOpen = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    delayedTooltip = _React$useState2[0],
-    setDelayedTooltip = _React$useState2[1];
-  React.useEffect(function () {
-    if (tooltipOpen === true) {
-      var timer = setTimeout(function () {
-        return setDelayedTooltip(true);
-      }, defaultDelay);
-      return function () {
-        clearTimeout(timer);
-      };
-    }
-    setDelayedTooltip(false);
-    return function () {};
-  }, [tooltipOpen]);
-  return [delayedTooltip, setTooltipOpen];
-};
-var CustomTooltip = function CustomTooltip(props) {
-  return jsx(Tooltip, Object.assign({}, props, {
-    enterDelay: defaultDelay,
-    enterNextDelay: defaultDelay,
-    disableInteractive: true
-  }));
-};
-
-var _excluded$d = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
-var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$tooltipTitle = _ref.tooltipTitle,
-    defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$shouldShowAsDisa = _ref.shouldShowAsDisabled,
-    shouldShowAsDisabled = _ref$shouldShowAsDisa === void 0 ? false : _ref$shouldShowAsDisa,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    children = _ref.children,
-    className = _ref.className,
-    defaultTooltipProps = _ref.tooltipProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
-  var tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
-  var tooltipProps = React.useMemo(function () {
-    return Object.assign({}, defaultTooltipProps, {
-      title: tooltipTitle,
-      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
-      sx: {
-        pointerEvents: 'none'
-      }
-    });
-  }, [defaultTooltipProps, tooltipTitle]);
-  var renderIconButton = function renderIconButton() {
-    return jsx(IconButton, Object.assign({
-      "aria-label": tooltipTitle
-    }, props, {
-      size: size,
-      className: classNames,
-      ref: ref,
-      "aria-pressed": isSelected,
-      sx: Object.assign({}, props.sx, shouldShowAsDisabled && {
-        '&.MuiIconButton-root': {
-          color: "geowebColors.iconButtons." + variant + ".disabled.color"
-        },
-        '&.Mui-focusVisible': {
-          color: "geowebColors.iconButtons." + variant + ".default.color"
-        }
-      }),
-      children: children
-    }));
-  };
-  return tooltipTitle && !props.disabled ? jsx(CustomTooltip, Object.assign({}, tooltipProps, {
-    children: renderIconButton()
-  })) : renderIconButton();
-});
-var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
-
-var _excluded$c = ["bounds", "setIsDragging", "children", "onStop"];
+var _excluded$d = ["bounds", "setIsDragging", "children", "onStop"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
     bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
     setIsDragging = _ref.setIsDragging,
     children = _ref.children,
     onStop = _ref.onStop,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
     setIsDragging && setIsDragging(true);
@@ -785,7 +706,7 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
   }));
 };
 
-var _excluded$b = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+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({}),
@@ -828,7 +749,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
       topLeft: true
     } : _ref$enable,
     nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var theme = useTheme();
   var onStartResize = React__default.useCallback(function (event, _direction, node) {
     event.stopPropagation();
@@ -893,8 +814,444 @@ var ResizeComponent = function ResizeComponent(_ref) {
   }));
 };
 
+var defaultDelay = 1000;
+var useControlledTooltip = function useControlledTooltip() {
+  var _React$useState = React.useState(false),
+    tooltipOpen = _React$useState[0],
+    setTooltipOpen = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    delayedTooltip = _React$useState2[0],
+    setDelayedTooltip = _React$useState2[1];
+  React.useEffect(function () {
+    if (tooltipOpen === true) {
+      var timer = setTimeout(function () {
+        return setDelayedTooltip(true);
+      }, defaultDelay);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+    setDelayedTooltip(false);
+    return function () {};
+  }, [tooltipOpen]);
+  return [delayedTooltip, setTooltipOpen];
+};
+var CustomTooltip = function CustomTooltip(props) {
+  return jsx(Tooltip, Object.assign({}, props, {
+    enterDelay: defaultDelay,
+    enterNextDelay: defaultDelay,
+    disableInteractive: true
+  }));
+};
+
+var _excluded$b = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
+var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$tooltipTitle = _ref.tooltipTitle,
+    defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$shouldShowAsDisa = _ref.shouldShowAsDisabled,
+    shouldShowAsDisabled = _ref$shouldShowAsDisa === void 0 ? false : _ref$shouldShowAsDisa,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    children = _ref.children,
+    className = _ref.className,
+    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 tooltipProps = React.useMemo(function () {
+    return Object.assign({}, defaultTooltipProps, {
+      title: tooltipTitle,
+      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
+      sx: {
+        pointerEvents: 'none'
+      }
+    });
+  }, [defaultTooltipProps, tooltipTitle]);
+  var renderIconButton = function renderIconButton() {
+    return jsx(IconButton, Object.assign({
+      "aria-label": tooltipTitle
+    }, props, {
+      size: size,
+      className: classNames,
+      ref: ref,
+      "aria-pressed": isSelected,
+      sx: Object.assign({}, props.sx, shouldShowAsDisabled && {
+        '&.MuiIconButton-root': {
+          color: "geowebColors.iconButtons." + variant + ".disabled.color"
+        },
+        '&.Mui-focusVisible': {
+          color: "geowebColors.iconButtons." + variant + ".default.color"
+        }
+      }),
+      children: children
+    }));
+  };
+  return tooltipTitle && !props.disabled ? jsx(CustomTooltip, Object.assign({}, tooltipProps, {
+    children: renderIconButton()
+  })) : renderIconButton();
+});
+var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
+
+var getPosition = function getPosition(menuPosition) {
+  switch (menuPosition) {
+    case 'bottom':
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+    // eslint-disable-next-line default-case-last
+    default:
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
+  }
+};
+var ToggleMenu = function ToggleMenu(_ref) {
+  var _ref$buttonTestId = _ref.buttonTestId,
+    buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
+    menuItems = _ref.menuItems,
+    children = _ref.children,
+    buttonSx = _ref.buttonSx,
+    _ref$tooltipTitle = _ref.tooltipTitle,
+    tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+    _ref$menuTitle = _ref.menuTitle,
+    menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
+    _ref$isDefaultOpen = _ref.isDefaultOpen,
+    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+    _ref$buttonIcon = _ref.buttonIcon,
+    buttonIcon = _ref$buttonIcon === void 0 ? jsx(Options, {}) : _ref$buttonIcon,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var _React$useState = React.useState(null),
+    anchorEl = _React$useState[0],
+    setAnchorEl = _React$useState[1];
+  var isOpen = Boolean(anchorEl);
+  var _getPosition = getPosition(menuPosition),
+    anchorOrigin = _getPosition.anchorOrigin,
+    transformOrigin = _getPosition.transformOrigin;
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+  React.useEffect(function () {
+    if (isDefaultOpen) {
+      setAnchorEl(document.getElementById(buttonTestId));
+    }
+  }, [isDefaultOpen, buttonTestId]);
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, {
+      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,
+      onClose: function onClose(event, reason) {
+        if (reason === 'tabKeyDown') {
+          return;
+        }
+        handleClose(event);
+      },
+      anchorOrigin: anchorOrigin,
+      transformOrigin: transformOrigin,
+      BackdropProps: {
+        style: {
+          opacity: 0,
+          transition: 'none'
+        }
+      },
+      MenuListProps: Object.assign({}, children && {
+        style: {
+          padding: '0px'
+        }
+      }),
+      children: [menuTitle && jsx(ListSubheader, {
+        "data-testid": "toggleMenuTitle",
+        children: jsx(Typography, {
+          sx: {
+            fontSize: '12px'
+          },
+          children: menuTitle
+        })
+      }), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
+        var text = menuItem.text,
+          icon = menuItem.icon,
+          action = menuItem.action,
+          isDisabled = menuItem.isDisabled;
+        return jsx(MenuItem, {
+          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",
+            children: [jsx(Grid, {
+              children: jsx(ListItemText, {
+                children: text
+              })
+            }), icon && jsx(Grid, {
+              alignItems: "flex-end",
+              children: jsx(ListItemIcon, {
+                sx: {
+                  '&.MuiListItemIcon-root': {
+                    minWidth: '24px'
+                  }
+                },
+                children: icon
+              })
+            })]
+          })
+        }, text);
+      }) : jsx("div", {}) // Needed to make the menu work without any menuItems
+      , children]
+    })]
+  });
+};
+
+/* *
+ * 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, {
+    sx: {
+      fontSize: '16px',
+      fontWeight: 500,
+      height: 24,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      color: 'geowebColors.typographyAndIcons.text'
+    },
+    "data-testid": "customDialog-title",
+    component: "span",
+    children: title
+  });
+};
+var CustomDialogHeader = function CustomDialogHeader(_ref2) {
+  var headerActions = _ref2.headerActions,
+    title = _ref2.title,
+    onClose = _ref2.onClose;
+  var _useSharedTranslation = useSharedTranslation(),
+    t = _useSharedTranslation.t;
+  return !headerActions ? jsxs(DialogTitle, {
+    id: "dialog-title",
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    children: [title && jsx(Title, {
+      title: title
+    }), jsx(CustomIconButton, {
+      "data-testid": "customDialog-close",
+      "aria-label": "close",
+      onClick: function onClick() {
+        return onClose('CLOSED');
+      },
+      sx: {
+        '&.MuiIconButton-root': {
+          color: 'geowebColors.greys.accessible'
+        }
+      },
+      children: jsx(Close, {
+        "data-testid": "CloseIcon"
+      })
+    })]
+  }) : jsxs(Grid, {
+    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, {
+        onClick: function onClick() {
+          return onClose('CLOSED');
+        },
+        variant: "flat",
+        "aria-label": "close",
+        startIcon: jsx(ChevronLeft, {}),
+        "data-testid": "contentdialog-close",
+        sx: {
+          textTransform: 'uppercase'
+        },
+        children: t('shared-customdialog-back')
+      })
+    }), jsx(Grid, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: 'center'
+      },
+      size: 4,
+      children: title && jsx(Title, {
+        title: title
+      })
+    }), jsx(Grid, {
+      size: 4,
+      children: jsx(Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          'button:not(:first-of-type)': {
+            marginLeft: 1
+          }
+        },
+        children: jsxs(Box, {
+          children: [jsx(Box, {
+            display: {
+              xs: 'none',
+              lg: 'flex'
+            },
+            children: headerActions.map(function (_ref3) {
+              var action = _ref3.action,
+                text = _ref3.text,
+                variant = _ref3.variant,
+                _ref3$isDisabled = _ref3.isDisabled,
+                isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+              return jsx(Button, {
+                onClick: action,
+                variant: variant || 'flat',
+                sx: {
+                  minWidth: 96
+                },
+                disabled: isDisabled,
+                children: text
+              }, text + "-" + variant);
+            })
+          }), jsx(Box, {
+            display: {
+              sm: 'block',
+              lg: 'none'
+            },
+            children: headerActions.length > 0 && jsx(ToggleMenu, {
+              menuItems: headerActions.map(function (_ref4) {
+                var text = _ref4.text,
+                  action = _ref4.action,
+                  isDisabled = _ref4.isDisabled,
+                  isSelected = _ref4.isSelected;
+                return {
+                  text: text,
+                  action: action,
+                  isDisabled: isDisabled,
+                  isSelected: isSelected
+                };
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
 var _excluded$a = ["defaultSize", "onResizeStop", "hasLayout"],
-  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps", "disableRestoreFocus"];
+  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps", "disableRestoreFocus", "headerActions"];
 var PaperComponent = function PaperComponent(_ref) {
   var _ref$defaultSize = _ref.defaultSize,
     defaultSize = _ref$defaultSize === void 0 ? {
@@ -968,25 +1325,28 @@ var CustomDialog = function CustomDialog(_ref2) {
     slotProps = _ref2.slotProps,
     _ref2$disableRestoreF = _ref2.disableRestoreFocus,
     disableRestoreFocus = _ref2$disableRestoreF === void 0 ? true : _ref2$disableRestoreF,
+    headerActions = _ref2.headerActions,
     other = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var _React$useState = React.useState(resizableDefaultSize),
     size = _React$useState[0],
     setSize = _React$useState[1];
   return jsx(Dialog, Object.assign({
     "data-testid": "customDialog",
-    PaperProps: {
-      sx: Object.assign({
-        width: '560px',
-        margin: 2.5
-      }, sx)
-    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0,
     onClose: function onClose() {
       _onClose('CLOSED');
     },
     "aria-labelledby": "dialog-title",
-    slotProps: Object.assign({}, slotProps, isResizable && {
+    slotProps: Object.assign({}, slotProps, {
+      paper: {
+        sx: Object.assign({}, !other.fullWidth && !other.maxWidth && {
+          maxWidth: '560px'
+        }, other.maxWidth && {
+          maxWidth: other.maxWidth
+        }, sx)
+      }
+    }, isResizable && {
       paper: {
         defaultSize: size,
         onResizeStop: setSize,
@@ -1004,51 +1364,23 @@ var CustomDialog = function CustomDialog(_ref2) {
         }
       }
     })
-  }, isResizable && {
-    PaperComponent: PaperComponent
-  }, shouldRenderInline && {
-    disablePortal: true
-  }, {
-    sx: Object.assign({}, sx, isResizable && {
-      '.custom-dialog-resize': {
-        height: 'initial'
-      }
-    }),
-    disableRestoreFocus: disableRestoreFocus
-  }, other, {
-    children: hasLayout ? jsxs(Fragment, {
-      children: [jsxs(DialogTitle, {
-        id: "dialog-title",
-        sx: {
-          zIndex: 1,
-          padding: 2,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        },
-        children: [jsx(Typography, {
-          sx: {
-            fontSize: '16px',
-            fontWeight: 500
-          },
-          "data-testid": "customDialog-title",
-          component: "span",
-          children: title
-        }), jsx(CustomIconButton, {
-          "data-testid": "customDialog-close",
-          "aria-label": "close",
-          onClick: function onClick() {
-            return _onClose('CLOSED');
-          },
-          sx: {
-            '&.MuiIconButton-root': {
-              color: 'geowebColors.greys.accessible'
-            }
-          },
-          children: jsx(Close, {
-            "data-testid": "CloseIcon"
-          })
-        })]
+  }, isResizable && {
+    PaperComponent: PaperComponent
+  }, shouldRenderInline && {
+    disablePortal: true
+  }, {
+    sx: Object.assign({}, sx, isResizable && {
+      '.custom-dialog-resize': {
+        height: 'initial'
+      }
+    }),
+    disableRestoreFocus: disableRestoreFocus
+  }, other, {
+    children: hasLayout ? jsxs(Fragment, {
+      children: [jsx(CustomDialogHeader, {
+        title: title,
+        headerActions: headerActions,
+        onClose: _onClose
       }), jsxs(DialogContent, {
         sx: {
           padding: '8px 16px'
@@ -1057,7 +1389,7 @@ var CustomDialog = function CustomDialog(_ref2) {
           variant: "body1",
           children: description
         }), children]
-      }), jsx(DialogActions, {
+      }), !headerActions && jsx(DialogActions, {
         sx: {
           padding: 2,
           flexDirection: {
@@ -1071,28 +1403,6 @@ var CustomDialog = function CustomDialog(_ref2) {
   }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var SHARED_NAMESPACE = 'shared';
-var useSharedTranslation = function useSharedTranslation() {
-  return useTranslation([SHARED_NAMESPACE]);
-};
-
 var confirmStyle = {
   width: {
     xs: '100%',
@@ -2025,6 +2335,8 @@ var styles$4 = {
     backgroundColor: 'geowebColors.background.surface'
   },
   userMenu: {
+    maxHeight: 'calc(100vh - 40px)',
+    overflowY: 'auto',
     padding: 0,
     '& > li': {
       paddingTop: 3,
@@ -2045,8 +2357,10 @@ var UserMenu = function UserMenu(_ref) {
     initials = _ref.initials,
     _ref$isAdmin = _ref.isAdmin,
     isAdmin = _ref$isAdmin === void 0 ? false : _ref$isAdmin;
+  var toggleRef = useRef(null);
   return jsxs(Fragment, {
     children: [jsx(CustomIconButton, {
+      ref: toggleRef,
       "data-testid": "userButton",
       onClick: onToggle,
       sx: {
@@ -2082,7 +2396,13 @@ var UserMenu = function UserMenu(_ref) {
       sx: styles$4.container,
       "data-testid": "userMenu",
       children: jsx(ClickAwayListener, {
-        onClickAway: onClose,
+        onClickAway: function onClickAway(event) {
+          var _toggleRef$current;
+          if ((_toggleRef$current = toggleRef.current) != null && _toggleRef$current.contains(event.target)) {
+            return; // don't close here if clicking the toggle
+          }
+          onClose();
+        },
         mouseEvent: "onMouseDown",
         children: jsx(MenuList, {
           sx: styles$4.userMenu,
@@ -2103,11 +2423,11 @@ var MenuItemTheme = function MenuItemTheme(_ref) {
     t = _useTranslation.t;
   return jsx(MenuItem, {
     divider: true,
-    children: jsxs(Grid2, {
+    children: jsxs(Grid, {
       container: true,
-      children: [jsx(Grid2, {
+      children: [jsx(Grid, {
         children: t('shared-choose-app-mode')
-      }), jsx(Grid2, {
+      }), jsx(Grid, {
         children: jsxs(RadioGroup, {
           onChange: function onChange(event, value) {
             if (value && setThemeName) {
@@ -2258,7 +2578,7 @@ var ToolHeader = function ToolHeader(_ref) {
     }),
     role: "heading",
     "aria-label": "toolheader",
-    children: jsxs(Grid2, {
+    children: jsxs(Grid, {
       container: true,
       alignItems: "center",
       sx: {
@@ -2266,14 +2586,14 @@ var ToolHeader = function ToolHeader(_ref) {
         height: styles.height
       },
       justifyContent: "space-between",
-      children: [jsx(Grid2, {
+      children: [jsx(Grid, {
         className: "header-left",
         sx: {
           paddingRight: 1
         },
         size: columnSizeLeft,
         children: leftHeaderComponent && leftHeaderComponent
-      }), jsx(Grid2, {
+      }), jsx(Grid, {
         className: "header-title",
         size: title ? columnSizeTitle : 0,
         container: true,
@@ -2295,7 +2615,7 @@ var ToolHeader = function ToolHeader(_ref) {
           role: "heading",
           children: title
         })
-      }), jsxs(Grid2, {
+      }), jsxs(Grid, {
         className: "header-right",
         container: true,
         justifyContent: "flex-end",
@@ -3135,13 +3455,13 @@ var ShortcutList = function ShortcutList(_ref) {
           minHeight: 56
         },
         divider: index !== shortcuts.length - 1,
-        children: jsxs(Grid2, {
+        children: jsxs(Grid, {
           container: true,
           direction: "row",
           justifyContent: "space-between",
           alignItems: "center",
           size: "grow",
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             sx: {
               fontSize: 12,
               fontWeight: 300,
@@ -3149,7 +3469,7 @@ var ShortcutList = function ShortcutList(_ref) {
               opacity: 0.67
             },
             children: t(shortcut.titleKey)
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             children: jsx(Box, {
               sx: {
                 alignItems: 'center'
@@ -3235,9 +3555,9 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
       "data-testid": "cheatsheet-btn",
       onClick: onOpen,
       divider: true,
-      children: jsx(Grid2, {
+      children: jsx(Grid, {
         container: true,
-        children: jsx(Grid2, {
+        children: jsx(Grid, {
           children: t('shared-cheat-sheet')
         })
       })
@@ -3378,9 +3698,9 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
       "data-testid": "sentryRecording-btn",
       onClick: onOpen,
       divider: true,
-      children: jsx(Grid2, {
+      children: jsx(Grid, {
         container: true,
-        children: jsx(Grid2, {
+        children: jsx(Grid, {
           children: t('shared-sentry-recording')
         })
       })
@@ -3400,14 +3720,14 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
         isOpen: true,
         onClose: onClose,
         bounds: "parent",
-        children: jsxs(Grid2, {
+        children: jsxs(Grid, {
           container: true,
           spacing: 4,
           sx: {
             paddingLeft: '70px',
             paddingRight: '70px'
           },
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             container: true,
             justifyContent: "center",
             sx: {
@@ -3416,7 +3736,7 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
             children: jsx(Typography, {
               children: t('shared-sentry-information')
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             container: true,
             justifyContent: "center",
             sx: {
@@ -3425,7 +3745,7 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
             children: jsx(Typography, {
               children: t('shared-sentry-enable-message')
             })
-          }), jsxs(Grid2, {
+          }), jsxs(Grid, {
             container: true,
             alignItems: "center",
             direction: "column",
@@ -3438,7 +3758,7 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
             }) : jsxs(Typography, {
               children: [" ", t('shared-sentry-enable')]
             })]
-          }), jsxs(Grid2, {
+          }), jsxs(Grid, {
             container: true,
             alignItems: "center",
             direction: "column",
@@ -3462,7 +3782,7 @@ var UserMenuItemSentryRecording = function UserMenuItemSentryRecording(_ref) {
                 children: ["(", t('shared-sentry-cors-wait'), ")"]
               })]
             })]
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             container: true,
             justifyContent: "center",
             children: jsx(Typography, {
@@ -3666,169 +3986,6 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var getPosition = function getPosition(menuPosition) {
-  switch (menuPosition) {
-    case 'bottom':
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-    // eslint-disable-next-line default-case-last
-    default:
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-  }
-};
-var ToggleMenu = function ToggleMenu(_ref) {
-  var _ref$buttonTestId = _ref.buttonTestId,
-    buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
-    _ref$menuPosition = _ref.menuPosition,
-    menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
-    menuItems = _ref.menuItems,
-    children = _ref.children,
-    buttonSx = _ref.buttonSx,
-    _ref$tooltipTitle = _ref.tooltipTitle,
-    tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
-    _ref$menuTitle = _ref.menuTitle,
-    menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
-    _ref$isDefaultOpen = _ref.isDefaultOpen,
-    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
-    _ref$buttonIcon = _ref.buttonIcon,
-    buttonIcon = _ref$buttonIcon === void 0 ? jsx(Options, {}) : _ref$buttonIcon,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  var _React$useState = React.useState(null),
-    anchorEl = _React$useState[0],
-    setAnchorEl = _React$useState[1];
-  var isOpen = Boolean(anchorEl);
-  var _getPosition = getPosition(menuPosition),
-    anchorOrigin = _getPosition.anchorOrigin,
-    transformOrigin = _getPosition.transformOrigin;
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  var handleClose = function handleClose(event) {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-  React.useEffect(function () {
-    if (isDefaultOpen) {
-      setAnchorEl(document.getElementById(buttonTestId));
-    }
-  }, [isDefaultOpen, buttonTestId]);
-  return jsxs(Fragment, {
-    children: [jsx(CustomIconButton, {
-      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,
-      onClose: function onClose(event, reason) {
-        if (reason === 'tabKeyDown') {
-          return;
-        }
-        handleClose(event);
-      },
-      anchorOrigin: anchorOrigin,
-      transformOrigin: transformOrigin,
-      BackdropProps: {
-        style: {
-          opacity: 0,
-          transition: 'none'
-        }
-      },
-      MenuListProps: Object.assign({}, children && {
-        style: {
-          padding: '0px'
-        }
-      }),
-      children: [menuTitle && jsx(ListSubheader, {
-        "data-testid": "toggleMenuTitle",
-        children: jsx(Typography, {
-          sx: {
-            fontSize: '12px'
-          },
-          children: menuTitle
-        })
-      }), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
-        var text = menuItem.text,
-          icon = menuItem.icon,
-          action = menuItem.action,
-          isDisabled = menuItem.isDisabled;
-        return jsx(MenuItem, {
-          onClick: function onClick(event) {
-            action(event);
-            handleClose(event);
-          },
-          disabled: isDisabled,
-          selected: menuItem.isSelected,
-          children: jsxs(Grid2, {
-            container: true,
-            spacing: 2,
-            justifyContent: "space-between",
-            size: "grow",
-            children: [jsx(Grid2, {
-              children: jsx(ListItemText, {
-                children: text
-              })
-            }), icon && jsx(Grid2, {
-              alignItems: "flex-end",
-              children: jsx(ListItemIcon, {
-                sx: {
-                  '&.MuiListItemIcon-root': {
-                    minWidth: '24px'
-                  }
-                },
-                children: icon
-              })
-            })]
-          })
-        }, text);
-      }) : jsx("div", {}) // Needed to make the menu work without any menuItems
-      , children]
-    })]
-  });
-};
-
 var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
   _excluded2 = ["className", "additionalStyling"];
 var TooltipSelect = function TooltipSelect(_ref) {
@@ -4364,7 +4521,9 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
   var _ref$onPressRefresh = _ref.onPressRefresh,
     onPressRefresh = _ref$onPressRefresh === void 0 ? function () {} : _ref$onPressRefresh,
     lastUpdateTime = _ref.lastUpdateTime,
-    dataTestId = _ref.dataTestId;
+    dataTestId = _ref.dataTestId,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel;
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
   return jsxs(Box, {
@@ -4374,7 +4533,7 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
       height: '100%',
       justifyContent: 'flex-end'
     },
-    children: [jsx(Typography, {
+    children: [!hideLabel && jsx(Typography, {
       sx: {
         color: 'geowebColors.captions.captionStatus.rgba',
         fontSize: '10px',
@@ -4889,7 +5048,8 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsx(Box, {
     sx: Object.assign({
-      marginBottom: '8px'
+      marginBottom: '8px',
+      width: '100%'
     }, props.sx),
     ref: ref,
     children: jsxs(Stack, {
@@ -5834,33 +5994,6 @@ var index = /*#__PURE__*/Object.freeze({
   utc: utc
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var createToolkitMockStore = function createToolkitMockStore(storeConfig) {
-  var reducer = storeConfig.reducer,
-    preloadedState = storeConfig.preloadedState;
-  var store = configureStore(Object.assign({}, storeConfig, {
-    reducer: reducer,
-    preloadedState: preloadedState
-  }));
-  return store;
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6005,6 +6138,83 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var SessionStorageKey;
+(function (SessionStorageKey) {
+  SessionStorageKey["CONFIG"] = "config";
+  SessionStorageKey["OAUTH_STATE"] = "oauth_state";
+  SessionStorageKey["OAUTH_CODE_VERIFIER"] = "code_verifier";
+  SessionStorageKey["OAUTH_CODE_CHALLENGE"] = "code_challenge";
+  SessionStorageKey["HAS_AUTHENTICATED"] = "has_authenticated";
+  SessionStorageKey["CALLBACK_URL"] = "callback_url";
+})(SessionStorageKey || (SessionStorageKey = {}));
+var sessionStorageProvider = {
+  setConfig: function setConfig(value) {
+    return sessionStorage.setItem(SessionStorageKey.CONFIG, JSON.stringify(value));
+  },
+  getConfig: function getConfig() {
+    return JSON.parse(sessionStorage.getItem(SessionStorageKey.CONFIG) || '{}');
+  },
+  setOauthState: function setOauthState(value) {
+    return sessionStorage.setItem(SessionStorageKey.OAUTH_STATE, value);
+  },
+  getOauthState: function getOauthState() {
+    return sessionStorage.getItem(SessionStorageKey.OAUTH_STATE);
+  },
+  removeOauthState: function removeOauthState() {
+    return sessionStorage.removeItem(SessionStorageKey.OAUTH_STATE);
+  },
+  setOauthCodeVerifier: function setOauthCodeVerifier(value) {
+    return sessionStorage.setItem(SessionStorageKey.OAUTH_CODE_VERIFIER, value);
+  },
+  getOauthCodeVerifier: function getOauthCodeVerifier() {
+    return sessionStorage.getItem(SessionStorageKey.OAUTH_CODE_VERIFIER);
+  },
+  removeOauthCodeVerifier: function removeOauthCodeVerifier() {
+    return sessionStorage.removeItem(SessionStorageKey.OAUTH_CODE_VERIFIER);
+  },
+  setOauthCodeChallenge: function setOauthCodeChallenge(value) {
+    return sessionStorage.setItem(SessionStorageKey.OAUTH_CODE_CHALLENGE, value);
+  },
+  getOauthCodeChallenge: function getOauthCodeChallenge() {
+    return sessionStorage.getItem(SessionStorageKey.OAUTH_CODE_CHALLENGE);
+  },
+  removeOauthCodeChallenge: function removeOauthCodeChallenge() {
+    return sessionStorage.removeItem(SessionStorageKey.OAUTH_CODE_CHALLENGE);
+  },
+  setHasAuthenticated: function setHasAuthenticated(value) {
+    return sessionStorage.setItem(SessionStorageKey.HAS_AUTHENTICATED, value);
+  },
+  getHasAuthenticated: function getHasAuthenticated() {
+    return sessionStorage.getItem(SessionStorageKey.HAS_AUTHENTICATED);
+  },
+  removeHasAuthenticated: function removeHasAuthenticated() {
+    return sessionStorage.removeItem(SessionStorageKey.HAS_AUTHENTICATED);
+  },
+  getCallbackUrl: function getCallbackUrl() {
+    return sessionStorage.getItem(SessionStorageKey.CALLBACK_URL);
+  },
+  setCallbackUrl: function setCallbackUrl(value) {
+    return sessionStorage.setItem(SessionStorageKey.CALLBACK_URL, value);
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6027,9 +6237,5 @@ var SystemScope = {
   user: 'user',
   system: 'system'
 };
-// eslint-disable-next-line no-redeclare
-var PresetScope = Object.assign({}, SystemScope, {
-  shared: 'shared'
-});
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, PresetScope, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, 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, useUserMenu, useWheelStopPropagation };