@opengeoweb/shared 9.30.0 → 9.32.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox } from '@mui/material';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox, ListItemButton } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import * as React from 'react';
-import React__default, { useRef, Component } from 'react';
+import React__default, { useRef, Component, useState } from 'react';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
@@ -11,7 +11,6 @@ import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 import { useStore } from 'react-redux';
 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$3, getHours as getHours$1, startOfDay, addMinutes, addHours, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
-import configureStoreToBeDeprecated from 'redux-mock-store';
 import { configureStore } from '@reduxjs/toolkit';
 
 var en = {
@@ -253,6 +252,16 @@ var sharedTranslations = {
 	nl: nl
 };
 
+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;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var check = function (it) {
@@ -260,7 +269,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$q =
+var globalThis_1 =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -411,7 +420,7 @@ var isObject$e = function (it) {
   return typeof it == 'object' ? it !== null : isCallable$m(it);
 };
 
-var global$p = global$q;
+var globalThis$r = globalThis_1;
 var isCallable$l = isCallable$n;
 
 var aFunction = function (argument) {
@@ -419,20 +428,25 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$8 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$p[namespace]) : global$p[namespace] && global$p[namespace][method];
+  return arguments.length < 2 ? aFunction(globalThis$r[namespace]) : globalThis$r[namespace] && globalThis$r[namespace][method];
 };
 
 var uncurryThis$n = functionUncurryThis;
 
 var objectIsPrototypeOf = uncurryThis$n({}.isPrototypeOf);
 
-var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
+var globalThis$q = globalThis_1;
 
-var global$o = global$q;
-var userAgent$3 = engineUserAgent;
+var navigator = globalThis$q.navigator;
+var userAgent$5 = navigator && navigator.userAgent;
 
-var process$3 = global$o.process;
-var Deno$1 = global$o.Deno;
+var environmentUserAgent = userAgent$5 ? String(userAgent$5) : '';
+
+var globalThis$p = globalThis_1;
+var userAgent$4 = environmentUserAgent;
+
+var process$3 = globalThis$p.process;
+var Deno$1 = globalThis$p.Deno;
 var versions = process$3 && process$3.versions || Deno$1 && Deno$1.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -446,22 +460,22 @@ if (v8) {
 
 // BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
 // so check `userAgent` even if `.v8` exists, but 0
-if (!version && userAgent$3) {
-  match = userAgent$3.match(/Edge\/(\d+)/);
+if (!version && userAgent$4) {
+  match = userAgent$4.match(/Edge\/(\d+)/);
   if (!match || match[1] >= 74) {
-    match = userAgent$3.match(/Chrome\/(\d+)/);
+    match = userAgent$4.match(/Chrome\/(\d+)/);
     if (match) version = +match[1];
   }
 }
 
-var engineV8Version = version;
+var environmentV8Version = version;
 
 /* eslint-disable es/no-symbol -- required for testing */
-var V8_VERSION$1 = engineV8Version;
+var V8_VERSION$1 = environmentV8Version;
 var fails$l = fails$p;
-var global$n = global$q;
+var globalThis$o = globalThis_1;
 
-var $String$5 = global$n.String;
+var $String$5 = globalThis$o.String;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
 var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$l(function () {
@@ -478,9 +492,9 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$l(func
 /* eslint-disable es/no-symbol -- required for testing */
 var NATIVE_SYMBOL$2 = symbolConstructorDetection;
 
-var useSymbolAsUid = NATIVE_SYMBOL$2
-  && !Symbol.sham
-  && typeof Symbol.iterator == 'symbol';
+var useSymbolAsUid = NATIVE_SYMBOL$2 &&
+  !Symbol.sham &&
+  typeof Symbol.iterator == 'symbol';
 
 var getBuiltIn$7 = getBuiltIn$8;
 var isCallable$k = isCallable$n;
@@ -545,30 +559,30 @@ var ordinaryToPrimitive$1 = function (input, pref) {
 
 var sharedStore = {exports: {}};
 
-var global$m = global$q;
+var globalThis$n = globalThis_1;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$7 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$7(global$m, key, { value: value, configurable: true, writable: true });
+    defineProperty$7(globalThis$n, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$m[key] = value;
+    globalThis$n[key] = value;
   } return value;
 };
 
-var globalThis$1 = global$q;
+var globalThis$m = globalThis_1;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = sharedStore.exports = globalThis$m[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.37.1',
+  version: '3.39.0',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.37.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -612,14 +626,14 @@ var uid$2 = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$e(++id + postfix, 36);
 };
 
-var global$l = global$q;
+var globalThis$l = globalThis_1;
 var shared$3 = shared$4;
 var hasOwn$d = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
-var Symbol$3 = global$l.Symbol;
+var Symbol$3 = globalThis$l.Symbol;
 var WellKnownSymbolsStore = shared$3('wks');
 var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$3['for'] || Symbol$3 : Symbol$3 && Symbol$3.withoutSetter || uid$1;
 
@@ -667,10 +681,10 @@ var toPropertyKey$2 = function (argument) {
   return isSymbol(key) ? key : key + '';
 };
 
-var global$k = global$q;
+var globalThis$k = globalThis_1;
 var isObject$b = isObject$e;
 
-var document$3 = global$k.document;
+var document$3 = globalThis$k.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$b(document$3) && isObject$b(document$3.createElement);
 
@@ -829,10 +843,10 @@ if (!isCallable$h(store$1.inspectSource)) {
 
 var inspectSource$3 = store$1.inspectSource;
 
-var global$j = global$q;
+var globalThis$j = globalThis_1;
 var isCallable$g = isCallable$n;
 
-var WeakMap$1 = global$j.WeakMap;
+var WeakMap$1 = globalThis$j.WeakMap;
 
 var weakMapBasicDetection = isCallable$g(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
@@ -848,7 +862,7 @@ var sharedKey$3 = function (key) {
 var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$i = global$q;
+var globalThis$i = globalThis_1;
 var isObject$9 = isObject$e;
 var createNonEnumerableProperty$8 = createNonEnumerableProperty$9;
 var hasOwn$a = hasOwnProperty_1;
@@ -857,8 +871,8 @@ var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$2 = global$i.TypeError;
-var WeakMap = global$i.WeakMap;
+var TypeError$2 = globalThis$i.TypeError;
+var WeakMap = globalThis$i.WeakMap;
 var set$2, get, has;
 
 var enforce = function (it) {
@@ -1196,7 +1210,7 @@ var POLYFILL = isForced$3.POLYFILL = 'P';
 
 var isForced_1 = isForced$3;
 
-var global$h = global$q;
+var globalThis$h = globalThis_1;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$7 = createNonEnumerableProperty$9;
 var defineBuiltIn$7 = defineBuiltIn$8;
@@ -1225,11 +1239,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$h;
+    target = globalThis$h;
   } else if (STATIC) {
-    target = global$h[TARGET] || defineGlobalProperty(TARGET, {});
+    target = globalThis$h[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global$h[TARGET] && global$h[TARGET].prototype;
+    target = globalThis$h[TARGET] && globalThis$h[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1328,50 +1342,7 @@ $$i({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
+const _excluded$d = ["content", "color", "icon"];
 const bgColors = {
   green: 'geowebColors.functional.successOutline.fill',
   grey: 'geowebColors.functional.disabledOutline.fill',
@@ -1405,38 +1376,35 @@ const tagStyle = color => {
     color: 'geowebColors.captions.captionStatus.rgba'
   };
 };
-const StatusTag = _a => {
-  var {
+const StatusTag = _ref => {
+  let {
       content,
       color,
       icon
-    } = _a,
-    props = __rest(_a, ["content", "color", "icon"]);
-  return jsxs(Box, Object.assign({
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  return jsxs(Box, {
     display: "flex",
     alignItems: "center",
     textAlign: "center",
     "data-testid": "statusTag",
     className: "statusTag",
     position: "relative",
-    sx: Object.assign(Object.assign({}, tagStyle(color)), props.sx)
-  }, {
-    children: [jsx(Box, Object.assign({
+    sx: Object.assign({}, tagStyle(color), props.sx),
+    children: [jsx(Box, {
       sx: {
         position: 'absolute',
         color: 'geowebColors.iconButtons.flat.default.color'
-      }
-    }, {
+      },
       children: icon
-    })), jsx(Typography, Object.assign({
+    }), jsx(Typography, {
       sx: {
         width: '100%'
       },
-      variant: "caption"
-    }, {
+      variant: "caption",
       children: content
-    }))]
-  }));
+    })]
+  });
 };
 
 var wellKnownSymbol$h = wellKnownSymbol$j;
@@ -1498,7 +1466,7 @@ var defineBuiltInAccessor$3 = function (target, name, descriptor) {
 
 var $$h = _export;
 var DESCRIPTORS$7 = descriptors;
-var global$g = global$q;
+var globalThis$g = globalThis_1;
 var uncurryThis$f = functionUncurryThis;
 var hasOwn$6 = hasOwnProperty_1;
 var isCallable$b = isCallable$n;
@@ -1507,7 +1475,7 @@ var toString$c = toString$d;
 var defineBuiltInAccessor$2 = defineBuiltInAccessor$3;
 var copyConstructorProperties$1 = copyConstructorProperties$3;
 
-var NativeSymbol = global$g.Symbol;
+var NativeSymbol = globalThis$g.Symbol;
 var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
 
 if (DESCRIPTORS$7 && isCallable$b(NativeSymbol) && (!('description' in SymbolPrototype) ||
@@ -1519,6 +1487,7 @@ if (DESCRIPTORS$7 && isCallable$b(NativeSymbol) && (!('description' in SymbolPro
   var SymbolWrapper = function Symbol() {
     var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$c(arguments[0]);
     var result = isPrototypeOf$5(SymbolPrototype, this)
+      // eslint-disable-next-line sonarjs/inconsistent-function-call -- ok
       ? new NativeSymbol(description)
       // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
       : description === undefined ? NativeSymbol() : NativeSymbol(description);
@@ -1606,7 +1575,8 @@ var NullProtoObjectViaActiveX = function (activeXDocument) {
   activeXDocument.write(scriptTag(''));
   activeXDocument.close();
   var temp = activeXDocument.parentWindow.Object;
-  activeXDocument = null; // avoid memory leak
+  // eslint-disable-next-line no-useless-assignment -- avoid memory leak
+  activeXDocument = null;
   return temp;
 };
 
@@ -1991,7 +1961,7 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
   var target = state.target;
   var index = state.index++;
   if (!target || index >= target.length) {
-    state.target = undefined;
+    state.target = null;
     return createIterResultObject(undefined, true);
   }
   switch (state.kind) {
@@ -2059,7 +2029,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$f = global$q;
+var globalThis$f = globalThis_1;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
@@ -2091,7 +2061,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$f[COLLECTION_NAME] && global$f[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(globalThis$f[COLLECTION_NAME] && globalThis$f[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -2120,8 +2090,9 @@ const CustomTooltip = props => {
   }));
 };
 
-const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
+const _excluded$c = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
+const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
       tooltipTitle: defaultTooltipTitle = '',
       variant = 'flat',
       isSelected = false,
@@ -2130,14 +2101,14 @@ const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
       children,
       className,
       tooltipProps: defaultTooltipProps
-    } = _a,
-    props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const classNames = [...(className ? [className] : []), ...(isSelected ? ['Mui-selected'] : []), variant].join(' ');
-  const tooltipTitle = (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
+  const tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
   const tooltipProps = React.useMemo(() => {
-    return Object.assign(Object.assign({}, defaultTooltipProps), {
+    return Object.assign({}, defaultTooltipProps, {
       title: tooltipTitle,
-      placement: (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.placement) || 'top',
+      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
       sx: {
         pointerEvents: 'none'
       }
@@ -2150,15 +2121,14 @@ const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
     className: classNames,
     ref: ref,
     "aria-pressed": isSelected,
-    sx: Object.assign(Object.assign({}, props.sx), shouldShowAsDisabled && {
+    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, {
@@ -2167,16 +2137,17 @@ const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 const CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
 
-const CustomDialog = _a => {
-  var {
+const _excluded$b = ["title", "onClose", "description", "actions", "children", "sx"];
+const CustomDialog = _ref => {
+  let {
       title,
       onClose,
       description = '',
       actions = null,
       children,
       sx
-    } = _a,
-    other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return jsxs(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
@@ -2192,7 +2163,7 @@ const CustomDialog = _a => {
     },
     "aria-labelledby": "dialog-title"
   }, other, {
-    children: [jsxs(DialogTitle, Object.assign({
+    children: [jsxs(DialogTitle, {
       id: "dialog-title",
       sx: {
         zIndex: 1,
@@ -2200,18 +2171,16 @@ const CustomDialog = _a => {
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center'
-      }
-    }, {
-      children: [jsx(Typography, Object.assign({
+      },
+      children: [jsx(Typography, {
         sx: {
           fontSize: '16px',
           fontWeight: 500
         },
         "data-testid": "customDialog-title",
-        component: "span"
-      }, {
+        component: "span",
         children: title
-      })), jsx(CustomIconButton, Object.assign({
+      }), jsx(CustomIconButton, {
         "data-testid": "customDialog-close",
         "aria-label": "close",
         onClick: () => onClose('CLOSED'),
@@ -2219,39 +2188,35 @@ const CustomDialog = _a => {
           '&.MuiIconButton-root': {
             color: 'geowebColors.greys.accessible'
           }
-        }
-      }, {
+        },
         children: jsx(Close, {
           "data-testid": "CloseIcon"
         })
-      }))]
-    })), jsxs(DialogContent, Object.assign({
+      })]
+    }), jsxs(DialogContent, {
       sx: {
         padding: '8px 16px'
-      }
-    }, {
-      children: [description && jsx(Typography, Object.assign({
-        variant: "body1"
-      }, {
+      },
+      children: [description && jsx(Typography, {
+        variant: "body1",
         children: description
-      })), children]
-    })), jsx(DialogActions, Object.assign({
+      }), children]
+    }), jsx(DialogActions, {
       sx: {
         padding: 2,
         flexDirection: {
           xs: 'column',
           sm: 'row'
         }
-      }
-    }, {
+      },
       children: actions
-    }))]
+    })]
   }));
 };
 
 const SHARED_NAMESPACE = 'shared';
 const initSharedI18n = () => {
-  i18n.use(initReactI18next).init({
+  void i18n.use(initReactI18next).init({
     lng: 'en',
     fallbackLng: 'en',
     ns: SHARED_NAMESPACE,
@@ -2275,11 +2240,10 @@ const initSharedI18n = () => {
   });
 };
 initSharedI18n();
-const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
-  ns: SHARED_NAMESPACE
-}, params));
 const useSharedTranslation = () => useTranslation([SHARED_NAMESPACE]);
 
+const _excluded$a = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
+  _excluded2$1 = ["catchOnCancel"];
 const confirmStyle = {
   width: {
     xs: '100%',
@@ -2298,29 +2262,32 @@ const confirmStyle = {
     sm: 0
   }
 };
-const ConfirmationDialog = _a => {
-  var {
+const ConfirmationDialog = _ref => {
+  let {
       open,
       title,
-      description = translateKeyOutsideComponents('shared-confirmation-description'),
-      confirmLabel = translateKeyOutsideComponents('shared-confirmation-submit'),
-      cancelLabel = translateKeyOutsideComponents('shared-confirmation-cancel'),
+      description,
+      confirmLabel,
+      cancelLabel,
       onSubmit,
       onClose,
       content = null,
       disableAutoFocus = false,
       isLoading = false
-    } = _a,
-    other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
-  const rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  const rest = _objectWithoutPropertiesLoose(other, _excluded2$1); // remove unwanted props
+  const {
+    t
+  } = useSharedTranslation();
   return jsx(CustomDialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
     title: title,
-    description: description,
+    description: description != null ? description : t('shared-confirmation-description'),
     onClose: onClose,
     actions: jsxs(Fragment, {
-      children: [jsx(Button, Object.assign({
+      children: [jsx(Button, {
         "data-testid": "confirmationDialog-cancel",
         variant: "tertiary",
         // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -2334,47 +2301,64 @@ const ConfirmationDialog = _a => {
             borderColor: 'transparent'
           }
         }),
-        onClick: () => onClose('CANCELLED')
-      }, {
-        children: cancelLabel
-      })), isLoading ? jsx(Box, Object.assign({
+        onClick: () => onClose('CANCELLED'),
+        children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
+      }), isLoading ? jsx(Box, {
         "data-testid": "confirm-dialog-spinner",
-        sx: Object.assign(Object.assign({}, confirmStyle), {
+        sx: Object.assign({}, confirmStyle, {
           height: '40px',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center'
-        })
-      }, {
+        }),
         children: jsx(CircularProgress, {
           size: 40,
           color: "secondary"
         })
-      })) : jsx(Button, Object.assign({
+      }) : jsx(Button, {
         "data-testid": "confirmationDialog-confirm",
         variant: "primary",
         // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-        sx: theme => Object.assign(Object.assign({}, confirmStyle), {
+        sx: theme => Object.assign({}, confirmStyle, {
           '&:focus': {
             outline: theme.palette.geowebColors.buttons.primary.focus.outline,
             borderColor: 'transparent'
           }
         }),
         onClick: onSubmit,
-        autoFocus: !disableAutoFocus
-      }, {
-        children: confirmLabel
-      }))]
+        autoFocus: !disableAutoFocus,
+        children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
+      })]
     })
   }, rest, {
     children: content
   }));
 };
 
-var global$e = global$q;
+/* global Bun, Deno -- detection */
+var globalThis$e = globalThis_1;
+var userAgent$3 = environmentUserAgent;
 var classof$6 = classofRaw$2;
 
-var engineIsNode = classof$6(global$e.process) === 'process';
+var userAgentStartsWith = function (string) {
+  return userAgent$3.slice(0, string.length) === string;
+};
+
+var environment = (function () {
+  if (userAgentStartsWith('Bun/')) return 'BUN';
+  if (userAgentStartsWith('Cloudflare-Workers')) return 'CLOUDFLARE';
+  if (userAgentStartsWith('Deno/')) return 'DENO';
+  if (userAgentStartsWith('Node.js/')) return 'NODE';
+  if (globalThis$e.Bun && typeof Bun.version == 'string') return 'BUN';
+  if (globalThis$e.Deno && typeof Deno.version == 'object') return 'DENO';
+  if (classof$6(globalThis$e.process) === 'process') return 'NODE';
+  if (globalThis$e.window && globalThis$e.document) return 'BROWSER';
+  return 'REST';
+})();
+
+var ENVIRONMENT$1 = environment;
+
+var environmentIsNode = ENVIRONMENT$1 === 'NODE';
 
 var getBuiltIn$4 = getBuiltIn$8;
 var defineBuiltInAccessor$1 = defineBuiltInAccessor$3;
@@ -2527,12 +2511,12 @@ var validateArgumentsLength$1 = function (passed, required) {
   return passed;
 };
 
-var userAgent$2 = engineUserAgent;
+var userAgent$2 = environmentUserAgent;
 
 // eslint-disable-next-line redos/no-vulnerable -- safe
-var engineIsIos = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent$2);
+var environmentIsIos = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent$2);
 
-var global$d = global$q;
+var globalThis$d = globalThis_1;
 var apply$1 = functionApply;
 var bind$4 = functionBindContext;
 var isCallable$6 = isCallable$n;
@@ -2542,16 +2526,16 @@ var html = html$2;
 var arraySlice = arraySlice$1;
 var createElement = documentCreateElement$2;
 var validateArgumentsLength = validateArgumentsLength$1;
-var IS_IOS$1 = engineIsIos;
-var IS_NODE$4 = engineIsNode;
-
-var set$1 = global$d.setImmediate;
-var clear = global$d.clearImmediate;
-var process$2 = global$d.process;
-var Dispatch = global$d.Dispatch;
-var Function$1 = global$d.Function;
-var MessageChannel = global$d.MessageChannel;
-var String$1 = global$d.String;
+var IS_IOS$1 = environmentIsIos;
+var IS_NODE$3 = environmentIsNode;
+
+var set$1 = globalThis$d.setImmediate;
+var clear = globalThis$d.clearImmediate;
+var process$2 = globalThis$d.process;
+var Dispatch = globalThis$d.Dispatch;
+var Function$1 = globalThis$d.Function;
+var MessageChannel = globalThis$d.MessageChannel;
+var String$1 = globalThis$d.String;
 var counter = 0;
 var queue$2 = {};
 var ONREADYSTATECHANGE = 'onreadystatechange';
@@ -2559,7 +2543,7 @@ var $location, defer, channel, port;
 
 fails$c(function () {
   // Deno throws a ReferenceError on `location` access without `--location` flag
-  $location = global$d.location;
+  $location = globalThis$d.location;
 });
 
 var run = function (id) {
@@ -2582,7 +2566,7 @@ var eventListener = function (event) {
 
 var globalPostMessageDefer = function (id) {
   // old engines have not location.origin
-  global$d.postMessage(String$1(id), $location.protocol + '//' + $location.host);
+  globalThis$d.postMessage(String$1(id), $location.protocol + '//' + $location.host);
 };
 
 // Node.js 0.9+ & IE10+ has setImmediate, otherwise:
@@ -2601,7 +2585,7 @@ if (!set$1 || !clear) {
     delete queue$2[id];
   };
   // Node.js 0.8-
-  if (IS_NODE$4) {
+  if (IS_NODE$3) {
     defer = function (id) {
       process$2.nextTick(runner(id));
     };
@@ -2620,14 +2604,14 @@ if (!set$1 || !clear) {
   // Browsers with postMessage, skip WebWorkers
   // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
   } else if (
-    global$d.addEventListener &&
-    isCallable$6(global$d.postMessage) &&
-    !global$d.importScripts &&
+    globalThis$d.addEventListener &&
+    isCallable$6(globalThis$d.postMessage) &&
+    !globalThis$d.importScripts &&
     $location && $location.protocol !== 'file:' &&
     !fails$c(globalPostMessageDefer)
   ) {
     defer = globalPostMessageDefer;
-    global$d.addEventListener('message', eventListener, false);
+    globalThis$d.addEventListener('message', eventListener, false);
   // IE8-
   } else if (ONREADYSTATECHANGE in createElement('script')) {
     defer = function (id) {
@@ -2649,7 +2633,7 @@ var task$1 = {
   clear: clear
 };
 
-var global$c = global$q;
+var globalThis$c = globalThis_1;
 var DESCRIPTORS$3 = descriptors;
 
 // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
@@ -2657,8 +2641,8 @@ var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // Avoid NodeJS experimental warning
 var safeGetBuiltIn$1 = function (name) {
-  if (!DESCRIPTORS$3) return global$c[name];
-  var descriptor = getOwnPropertyDescriptor(global$c, name);
+  if (!DESCRIPTORS$3) return globalThis$c[name];
+  var descriptor = getOwnPropertyDescriptor(globalThis$c, name);
   return descriptor && descriptor.value;
 };
 
@@ -2687,28 +2671,28 @@ Queue$2.prototype = {
 
 var queue$1 = Queue$2;
 
-var userAgent$1 = engineUserAgent;
+var userAgent$1 = environmentUserAgent;
 
-var engineIsIosPebble = /ipad|iphone|ipod/i.test(userAgent$1) && typeof Pebble != 'undefined';
+var environmentIsIosPebble = /ipad|iphone|ipod/i.test(userAgent$1) && typeof Pebble != 'undefined';
 
-var userAgent = engineUserAgent;
+var userAgent = environmentUserAgent;
 
-var engineIsWebosWebkit = /web0s(?!.*chrome)/i.test(userAgent);
+var environmentIsWebosWebkit = /web0s(?!.*chrome)/i.test(userAgent);
 
-var global$b = global$q;
+var globalThis$b = globalThis_1;
 var safeGetBuiltIn = safeGetBuiltIn$1;
 var bind$3 = functionBindContext;
 var macrotask = task$1.set;
 var Queue$1 = queue$1;
-var IS_IOS = engineIsIos;
-var IS_IOS_PEBBLE = engineIsIosPebble;
-var IS_WEBOS_WEBKIT = engineIsWebosWebkit;
-var IS_NODE$3 = engineIsNode;
-
-var MutationObserver = global$b.MutationObserver || global$b.WebKitMutationObserver;
-var document$2 = global$b.document;
-var process$1 = global$b.process;
-var Promise$1 = global$b.Promise;
+var IS_IOS = environmentIsIos;
+var IS_IOS_PEBBLE = environmentIsIosPebble;
+var IS_WEBOS_WEBKIT = environmentIsWebosWebkit;
+var IS_NODE$2 = environmentIsNode;
+
+var MutationObserver = globalThis$b.MutationObserver || globalThis$b.WebKitMutationObserver;
+var document$2 = globalThis$b.document;
+var process$1 = globalThis$b.process;
+var Promise$1 = globalThis$b.Promise;
 var microtask$1 = safeGetBuiltIn('queueMicrotask');
 var notify$1, toggle, node, promise, then;
 
@@ -2718,7 +2702,7 @@ if (!microtask$1) {
 
   var flush = function () {
     var parent, fn;
-    if (IS_NODE$3 && (parent = process$1.domain)) parent.exit();
+    if (IS_NODE$2 && (parent = process$1.domain)) parent.exit();
     while (fn = queue.get()) try {
       fn();
     } catch (error) {
@@ -2730,7 +2714,7 @@ if (!microtask$1) {
 
   // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339
   // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898
-  if (!IS_IOS && !IS_NODE$3 && !IS_WEBOS_WEBKIT && MutationObserver && document$2) {
+  if (!IS_IOS && !IS_NODE$2 && !IS_WEBOS_WEBKIT && MutationObserver && document$2) {
     toggle = true;
     node = document$2.createTextNode('');
     new MutationObserver(flush).observe(node, { characterData: true });
@@ -2748,7 +2732,7 @@ if (!microtask$1) {
       then(flush);
     };
   // Node.js without promises
-  } else if (IS_NODE$3) {
+  } else if (IS_NODE$2) {
     notify$1 = function () {
       process$1.nextTick(flush);
     };
@@ -2760,7 +2744,7 @@ if (!microtask$1) {
   // - setTimeout
   } else {
     // `webpack` dev server bug on IE global methods - use bind(fn, global)
-    macrotask = bind$3(macrotask, global$b);
+    macrotask = bind$3(macrotask, globalThis$b);
     notify$1 = function () {
       macrotask(flush);
     };
@@ -2789,34 +2773,23 @@ var perform$3 = function (exec) {
   }
 };
 
-var global$a = global$q;
-
-var promiseNativeConstructor = global$a.Promise;
-
-/* global Deno -- Deno case */
-var engineIsDeno = typeof Deno == 'object' && Deno && typeof Deno.version == 'object';
+var globalThis$a = globalThis_1;
 
-var IS_DENO$1 = engineIsDeno;
-var IS_NODE$2 = engineIsNode;
+var promiseNativeConstructor = globalThis$a.Promise;
 
-var engineIsBrowser = !IS_DENO$1 && !IS_NODE$2
-  && typeof window == 'object'
-  && typeof document == 'object';
-
-var global$9 = global$q;
+var globalThis$9 = globalThis_1;
 var NativePromiseConstructor$3 = promiseNativeConstructor;
 var isCallable$5 = isCallable$n;
 var isForced$1 = isForced_1;
 var inspectSource = inspectSource$3;
 var wellKnownSymbol$8 = wellKnownSymbol$j;
-var IS_BROWSER = engineIsBrowser;
-var IS_DENO = engineIsDeno;
-var V8_VERSION = engineV8Version;
+var ENVIRONMENT = environment;
+var V8_VERSION = environmentV8Version;
 
 NativePromiseConstructor$3 && NativePromiseConstructor$3.prototype;
 var SPECIES$2 = wellKnownSymbol$8('species');
 var SUBCLASSING = false;
-var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$5(global$9.PromiseRejectionEvent);
+var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$5(globalThis$9.PromiseRejectionEvent);
 
 var FORCED_PROMISE_CONSTRUCTOR$5 = isForced$1('Promise', function () {
   var PROMISE_CONSTRUCTOR_SOURCE = inspectSource(NativePromiseConstructor$3);
@@ -2839,7 +2812,7 @@ var FORCED_PROMISE_CONSTRUCTOR$5 = isForced$1('Promise', function () {
     SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise;
     if (!SUBCLASSING) return true;
   // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test
-  } return !GLOBAL_CORE_JS_PROMISE && (IS_BROWSER || IS_DENO) && !NATIVE_PROMISE_REJECTION_EVENT$1;
+  } return !GLOBAL_CORE_JS_PROMISE && (ENVIRONMENT === 'BROWSER' || ENVIRONMENT === 'DENO') && !NATIVE_PROMISE_REJECTION_EVENT$1;
 });
 
 var promiseConstructorDetection = {
@@ -2872,8 +2845,8 @@ newPromiseCapability$2.f = function (C) {
 };
 
 var $$f = _export;
-var IS_NODE$1 = engineIsNode;
-var global$8 = global$q;
+var IS_NODE$1 = environmentIsNode;
+var globalThis$8 = globalThis_1;
 var call$d = functionCall;
 var defineBuiltIn$4 = defineBuiltIn$8;
 var setPrototypeOf$2 = objectSetPrototypeOf;
@@ -2903,13 +2876,13 @@ var setInternalState = InternalStateModule.set;
 var NativePromisePrototype$1 = NativePromiseConstructor$2 && NativePromiseConstructor$2.prototype;
 var PromiseConstructor = NativePromiseConstructor$2;
 var PromisePrototype = NativePromisePrototype$1;
-var TypeError$1 = global$8.TypeError;
-var document$1 = global$8.document;
-var process = global$8.process;
+var TypeError$1 = globalThis$8.TypeError;
+var document$1 = globalThis$8.document;
+var process = globalThis$8.process;
 var newPromiseCapability$1 = newPromiseCapabilityModule$3.f;
 var newGenericPromiseCapability = newPromiseCapability$1;
 
-var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && global$8.dispatchEvent);
+var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && globalThis$8.dispatchEvent);
 var UNHANDLED_REJECTION = 'unhandledrejection';
 var REJECTION_HANDLED = 'rejectionhandled';
 var PENDING = 0;
@@ -2982,14 +2955,14 @@ var dispatchEvent = function (name, promise, reason) {
     event.promise = promise;
     event.reason = reason;
     event.initEvent(name, false, true);
-    global$8.dispatchEvent(event);
+    globalThis$8.dispatchEvent(event);
   } else event = { promise: promise, reason: reason };
-  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = global$8['on' + name])) handler(event);
+  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = globalThis$8['on' + name])) handler(event);
   else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);
 };
 
 var onUnhandled = function (state) {
-  call$d(task, global$8, function () {
+  call$d(task, globalThis$8, function () {
     var promise = state.facade;
     var value = state.value;
     var IS_UNHANDLED = isUnhandled(state);
@@ -3012,7 +2985,7 @@ var isUnhandled = function (state) {
 };
 
 var onHandleUnhandled = function (state) {
-  call$d(task, global$8, function () {
+  call$d(task, globalThis$8, function () {
     var promise = state.facade;
     if (IS_NODE$1) {
       process.emit('rejectionHandled', promise);
@@ -3091,7 +3064,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
       reactions: new Queue(),
       rejection: false,
       state: PENDING,
-      value: undefined
+      value: null
     });
   };
 
@@ -3151,6 +3124,8 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
   }
 }
 
+// `Promise` constructor
+// https://tc39.es/ecma262/#sec-promise-executor
 $$f({ global: true, constructor: true, wrap: true, forced: FORCED_PROMISE_CONSTRUCTOR$4 }, {
   Promise: PromiseConstructor
 });
@@ -3623,25 +3598,25 @@ const adjustPosition = (bbox, containingView, position, setPosition) => {
   } else if (bbox.x < containingView.x || isHorizontallyLarger) {
     // left screen
     const diffX = containingView.x - bbox.x;
-    setPosition(Object.assign(Object.assign({}, position), {
+    setPosition(Object.assign({}, position, {
       x: position.x + diffX
     }));
   } else if (bbox.right >= containingView.right) {
     // right screen
     const diffX = containingView.right - bbox.right;
-    setPosition(Object.assign(Object.assign({}, position), {
+    setPosition(Object.assign({}, position, {
       x: position.x + diffX
     }));
   } else if (bbox.y < containingView.y || isVerticallyLarger) {
     // top screen
     const diffY = containingView.y - bbox.y;
-    setPosition(Object.assign(Object.assign({}, position), {
+    setPosition(Object.assign({}, position, {
       y: position.y + diffY
     }));
   } else if (bbox.bottom >= containingView.bottom) {
     // bottom screen
     const diffY = containingView.bottom - bbox.bottom;
-    setPosition(Object.assign(Object.assign({}, position), {
+    setPosition(Object.assign({}, position, {
       y: position.y + diffY
     }));
   }
@@ -3739,15 +3714,14 @@ const ConfirmationServiceProvider = ({
     handleSubmit,
     handleClose
   } = useDialogActions(awaitingPromiseRef);
-  return jsxs(ConfirmationServiceContext.Provider, Object.assign({
-    value: openConfirmation
-  }, {
+  return jsxs(ConfirmationServiceContext.Provider, {
+    value: openConfirmation,
     children: [children, jsx(ConfirmationDialog, Object.assign({
       open: Boolean(confirmationState),
       onSubmit: handleSubmit,
       onClose: handleClose
     }, confirmationState))]
-  }));
+  });
 };
 
 const AlertIcon = ({
@@ -3803,21 +3777,20 @@ const AlertBanner = ({
   if (!isOpen) {
     return null;
   }
-  return jsxs(Alert, Object.assign({
+  return jsxs(Alert, {
     "data-testid": _dataTestId,
     severity: _severity,
     icon: jsx(AlertIcon, {
       severity: _severity
     }),
-    action: _shouldClose ? jsx(Button, Object.assign({
+    action: _shouldClose ? jsx(Button, {
       variant: "flat",
       onClick: () => setIsOpen(false),
       sx: {
         backgroundColor: 'transparent!important'
-      }
-    }, {
+      },
       children: t('shared-close-caps')
-    })) : undefined,
+    }) : undefined,
     sx: _isCompact ? {
       height: '32px',
       boxSizing: 'border-box',
@@ -3845,9 +3818,8 @@ const AlertBanner = ({
       '& .MuiAlert-action': {
         padding: 0
       }
-    }
-  }, {
-    children: [jsx(AlertTitle, Object.assign({
+    },
+    children: [jsx(AlertTitle, {
       sx: {
         fontSize: '14px',
         fontWeight: 'normal',
@@ -3855,19 +3827,17 @@ const AlertBanner = ({
         paddingTop: '0px!important',
         marginBottom: '0px!important',
         lineHeight: _isCompact ? '18px' : '24px'
-      }
-    }, {
+      },
       children: title
-    })), _info && jsx(Box, Object.assign({
+    }), _info && jsx(Box, {
       sx: {
         fontSize: '16px',
         marginTop: 1,
         wordBreak: 'break-word',
         lineHeight: '22px'
-      }
-    }, {
+      },
       children: _info
-    })), _actionButtonProps && jsx(Button, Object.assign({
+    }), _actionButtonProps && jsx(Button, {
       variant: "flat",
       onClick: event => {
         setIsOpen(false);
@@ -3876,35 +3846,32 @@ const AlertBanner = ({
       sx: {
         backgroundColor: 'transparent!important'
       },
-      startIcon: jsx(ChevronRight, {})
-    }, {
+      startIcon: jsx(ChevronRight, {}),
       children: _actionButtonProps.title.toUpperCase()
-    }))]
-  }));
+    })]
+  });
 };
 
 const AppLayout = ({
   header,
   children
 }) => {
-  return jsxs(Box, Object.assign({
+  return jsxs(Box, {
     sx: {
       height: '100vh',
       display: 'flex',
       flexDirection: 'column'
     },
-    "data-testid": "appLayout"
-  }, {
-    children: [header, jsx(Box, Object.assign({
+    "data-testid": "appLayout",
+    children: [header, jsx(Box, {
       component: "main",
       sx: {
         flex: 1,
         position: 'relative'
-      }
-    }, {
+      },
       children: children
-    }))]
-  }));
+    })]
+  });
 };
 
 const AppHeader = ({
@@ -3923,7 +3890,7 @@ const AppHeader = ({
     }
     toggleDrawer(false);
   };
-  return jsxs(Box, Object.assign({
+  return jsxs(Box, {
     component: "header",
     role: "heading",
     sx: {
@@ -3950,23 +3917,21 @@ const AppHeader = ({
           display: 'block'
         }
       }
-    }
-  }, {
-    children: [jsxs(Box, Object.assign({
+    },
+    children: [jsxs(Box, {
       onClick: onClick,
       sx: {
         display: 'inherit',
         alignItems: 'center',
         cursor: onClick ? 'pointer' : 'auto'
-      }
-    }, {
+      },
       children: [jsx(GeoWebLogo, {
         style: {
           position: 'relative',
           top: '-1px',
           right: '-1px'
         }
-      }), jsx(Typography, Object.assign({
+      }), jsx(Typography, {
         variant: "h1",
         sx: {
           display: 'none',
@@ -3982,25 +3947,22 @@ const AppHeader = ({
           color: 'geowebColors.typographyAndIcons.text',
           marginLeft: 1,
           maxWidth: 130
-        }
-      }, {
+        },
         children: _title
-      }))]
-    })), menu && jsxs(Box, Object.assign({
+      })]
+    }), menu && jsxs(Box, {
       className: "hamburger-btn",
       sx: {
         display: 'flex',
         alignItems: 'center',
         marginLeft: 1
-      }
-    }, {
-      children: [jsx(CustomIconButton, Object.assign({
+      },
+      children: [jsx(CustomIconButton, {
         "data-testid": "menuButton",
         onClick: () => onToggleDrawer(true),
-        isSelected: isDrawerOpen
-      }, {
+        isSelected: isDrawerOpen,
         children: jsx(HamburgerMenu, {})
-      })), jsx(Drawer, Object.assign({
+      }), jsx(Drawer, {
         "data-testid": "app-drawer",
         anchor: "left",
         open: isDrawerOpen,
@@ -4011,19 +3973,17 @@ const AppHeader = ({
           '& .MuiDrawer-paper': {
             top: '40px'
           }
-        }
-      }, {
-        children: jsx(Box, Object.assign({
+        },
+        children: jsx(Box, {
           role: "presentation",
           sx: {
             width: '250px',
             overflowY: 'auto'
-          }
-        }, {
+          },
           children: menu
-        }))
-      }))]
-    })), jsx(Box, Object.assign({
+        })
+      })]
+    }), jsx(Box, {
       className: "workspace-topbar",
       sx: {
         flexGrow: 1,
@@ -4031,28 +3991,27 @@ const AppHeader = ({
         marginLeft: 1,
         alignItems: 'center',
         maxWidth: 168
-      }
-    }, {
+      },
       children: workspaceTopBar
-    })), jsx(Box, Object.assign({
+    }), jsx(Box, {
       sx: {
         display: 'flex',
         alignItems: 'center',
         flexGrow: 1,
         justifyContent: 'flex-end'
-      }
-    }, {
+      },
       children: userMenu
-    }))]
-  }));
+    })]
+  });
 };
 
-const DraggableComponent$1 = _a => {
-  var {
+const _excluded$9 = ["bounds", "children"];
+const DraggableComponent$1 = _ref => {
+  let {
       bounds = 'body',
       children
-    } = _a,
-    props = __rest(_a, ["bounds", "children"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   const onDragStart = e => {
     // This makes sure that nothing is selected during drag
     e.preventDefault();
@@ -4061,8 +4020,7 @@ const DraggableComponent$1 = _a => {
     bounds: bounds
   }, props, {
     enableUserSelectHack: false,
-    onStart: onDragStart
-  }, {
+    onStart: onDragStart,
     children: children
   }));
 };
@@ -4211,15 +4169,15 @@ var stringTrim = {
   trim: createMethod$2(3)
 };
 
-var global$7 = global$q;
+var globalThis$7 = globalThis_1;
 var fails$b = fails$p;
 var uncurryThis$8 = functionUncurryThis;
 var toString$a = toString$d;
 var trim$1 = stringTrim.trim;
 var whitespaces$1 = whitespaces$3;
 
-var $parseInt$1 = global$7.parseInt;
-var Symbol$2 = global$7.Symbol;
+var $parseInt$1 = globalThis$7.parseInt;
+var Symbol$2 = globalThis$7.Symbol;
 var ITERATOR$1 = Symbol$2 && Symbol$2.iterator;
 var hex = /^[+-]?0x/i;
 var exec$2 = uncurryThis$8(hex.exec);
@@ -4243,14 +4201,15 @@ $$8({ global: true, forced: parseInt !== $parseInt }, {
   parseInt: $parseInt
 });
 
+const _excluded$8 = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
 const isDraggingClassName = 'is-dragging';
 const useBoundsProps = nodeRef => {
   const [boundsProps, setBoundsProps] = React__default.useState({});
   React__default.useEffect(() => {
-    var _a;
     if (nodeRef) {
+      var _nodeRef$current;
       setBoundsProps({
-        bounds: (_a = nodeRef === null || nodeRef === void 0 ? void 0 : nodeRef.current) === null || _a === void 0 ? void 0 : _a.parentNode,
+        bounds: nodeRef == null || (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode,
         boundsByDirection: true
       });
     }
@@ -4258,8 +4217,8 @@ const useBoundsProps = nodeRef => {
   }, []);
   return boundsProps;
 };
-const ResizeComponent = _a => {
-  var {
+const ResizeComponent = _ref => {
+  let {
       children,
       onResizeStart = () => {},
       onResizeStop = () => {},
@@ -4278,8 +4237,8 @@ const ResizeComponent = _a => {
         topLeft: true
       },
       nodeRef
-    } = _a,
-    props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const theme = useTheme();
   const onStartResize = React__default.useCallback((event, _direction, node) => {
     event.stopPropagation();
@@ -4397,7 +4356,7 @@ var $Error = Error;
 var replace$2 = uncurryThis$7(''.replace);
 
 var TEST = (function (arg) { return String(new $Error(arg).stack); })('zxcasd');
-// eslint-disable-next-line redos/no-vulnerable -- safe
+// eslint-disable-next-line redos/no-vulnerable, sonarjs/slow-regex -- safe
 var V8_OR_CHAKRA_STACK_ENTRY = /\n\s*at [^:]*:[^\n]*/;
 var IS_V8_OR_CHAKRA_STACK = V8_OR_CHAKRA_STACK_ENTRY.test(TEST);
 
@@ -4498,12 +4457,12 @@ var wrapErrorConstructorWithCause$1 = function (FULL_NAME, wrapper, FORCED, IS_A
 
 /* eslint-disable no-unused-vars -- required for functions `.length` */
 var $$7 = _export;
-var global$6 = global$q;
+var globalThis$6 = globalThis_1;
 var apply = functionApply;
 var wrapErrorConstructorWithCause = wrapErrorConstructorWithCause$1;
 
 var WEB_ASSEMBLY = 'WebAssembly';
-var WebAssembly = global$6[WEB_ASSEMBLY];
+var WebAssembly = globalThis$6[WEB_ASSEMBLY];
 
 // eslint-disable-next-line es/no-error-cause -- feature detection
 var FORCED$2 = new Error('e', { cause: 7 }).cause !== 7;
@@ -4692,25 +4651,23 @@ class ErrorBoundary extends React.Component {
       overflowY: 'scroll'
     };
     if (error) {
-      return jsx(Box, Object.assign({
-        sx: displayOnTop ? displayOnTopStyles : normalStyles
-      }, {
+      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, Object.assign({
+            children: [jsx("br", {}), error.toString(), jsx("br", {}), errorInfo && errorInfo.componentStack, jsx("br", {}), jsx("br", {}), jsx(Link, {
               underline: "always",
               style: {
                 cursor: 'pointer'
               },
-              onClick: () => window.location.reload()
-            }, {
+              onClick: () => window.location.reload(),
               children: reloadPage
-            }))]
+            })]
           })
         })
-      }));
+      });
     }
     return children;
   }
@@ -4731,12 +4688,11 @@ const Avatar = ({
   children,
   size: _size = 'large'
 }) => {
-  return jsx(Avatar$1, Object.assign({
+  return jsx(Avatar$1, {
     "data-testid": "avatar",
-    sx: Object.assign({}, styles$5[_size])
-  }, {
+    sx: Object.assign({}, styles$5[_size]),
     children: children
-  }));
+  });
 };
 
 const styles$4 = {
@@ -4768,7 +4724,7 @@ const UserMenu = ({
   isAdmin: _isAdmin = false
 }) => {
   return jsxs(Fragment, {
-    children: [jsx(CustomIconButton, Object.assign({
+    children: [jsx(CustomIconButton, {
       "data-testid": "userButton",
       onClick: _onToggle,
       sx: {
@@ -4785,39 +4741,34 @@ const UserMenu = ({
           }
         })
       },
-      size: "medium"
-    }, {
+      size: "medium",
       children: !_isAdmin ? jsx(Avatar, {
         children: initials
       }) : jsxs(Fragment, {
-        children: [jsx(Admin, {}), initials && jsx("div", Object.assign({
+        children: [jsx(Admin, {}), initials && jsx("div", {
           style: {
             position: 'absolute',
             fontSize: '14px',
             color: '#FFF',
             fontFamily: 'Roboto',
             fontWeight: 500
-          }
-        }, {
+          },
           children: initials
-        }))]
+        })]
       })
-    })), _isOpen && jsx(Paper, Object.assign({
+    }), _isOpen && jsx(Paper, {
       sx: styles$4.container,
-      "data-testid": "userMenu"
-    }, {
-      children: jsx(ClickAwayListener, Object.assign({
+      "data-testid": "userMenu",
+      children: jsx(ClickAwayListener, {
         onClickAway: _onClose,
-        mouseEvent: "onMouseDown"
-      }, {
-        children: jsx(MenuList, Object.assign({
+        mouseEvent: "onMouseDown",
+        children: jsx(MenuList, {
           sx: styles$4.userMenu,
-          variant: "menu"
-        }, {
+          variant: "menu",
           children: children
-        }))
-      }))
-    }))]
+        })
+      })
+    })]
   });
 };
 
@@ -4829,18 +4780,15 @@ const MenuItemTheme = () => {
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return jsx(MenuItem, Object.assign({
-    divider: true
-  }, {
-    children: jsxs(Grid2, Object.assign({
-      container: true
-    }, {
+  return jsx(MenuItem, {
+    divider: true,
+    children: jsxs(Grid2, {
+      container: true,
       children: [jsx(Grid2, {
         children: t('shared-choose-app-mode')
       }), jsx(Grid2, {
-        children: jsxs(RadioGroup, Object.assign({
-          onChange: toggleTheme
-        }, {
+        children: jsxs(RadioGroup, {
+          onChange: toggleTheme,
           children: [jsx(FormControlLabel, {
             value: true,
             control: jsx(Radio, {
@@ -4854,10 +4802,10 @@ const MenuItemTheme = () => {
             }),
             label: t('shared-dark')
           })]
-        }))
+        })
       })]
-    }))
-  }));
+    })
+  });
 };
 
 // drag handles will be handled by DraggableResizable/Resizable
@@ -4956,59 +4904,54 @@ const ToolHeader = ({
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return jsx(Box, Object.assign({
+  return jsx(Box, {
     component: "header",
     className: _className,
-    sx: Object.assign(Object.assign({}, _rightHeaderComponent ? headerStyle : {}), {
+    sx: Object.assign({}, _rightHeaderComponent ? headerStyle : {}, {
       boxShadow: 1,
+      // elevation_01
       backgroundColor: 'geowebColors.background.surface',
       zIndex: 2,
       cursor: _isDraggable ? 'move' : null
     }),
     role: "heading",
-    "aria-label": "toolheader"
-  }, {
-    children: jsxs(Grid2, Object.assign({
+    "aria-label": "toolheader",
+    children: jsxs(Grid2, {
       container: true,
       alignItems: "center",
       sx: {
         padding: styles.padding,
         height: styles.height
-      }
-    }, {
-      children: [jsxs(Grid2, Object.assign({
+      },
+      children: [jsxs(Grid2, {
         className: "header-left",
         sx: {
           paddingRight: 1
         },
         size: {
           sm: columnSizeLeft
-        }
-      }, {
-        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid2, Object.assign({
+        },
+        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid2, {
           container: true,
           justifyContent: "flex-start",
-          size: "grow"
-        }, {
-          children: jsx(CustomIconButton, Object.assign({
+          size: "grow",
+          children: jsx(CustomIconButton, {
             "data-testid": "dragBtn",
             disableRipple: true,
             sx: {
               pointerEvents: 'none',
               '&.MuiIconButton-root': iconStyle
-            }
-          }, {
+            },
             children: _dragHandleIcon
-          }))
-        })), _leftHeaderComponent && _leftHeaderComponent]
-      })), jsxs(Grid2, Object.assign({
+          })
+        }), _leftHeaderComponent && _leftHeaderComponent]
+      }), jsxs(Grid2, {
         className: "header-title",
         size: title ? columnSizeTitle : 0,
         container: true,
         justifyContent: "center",
-        alignItems: "center"
-      }, {
-        children: [title && jsx(Typography, Object.assign({
+        alignItems: "center",
+        children: [title && jsx(Typography, {
           variant: "h2",
           noWrap: true,
           sx: {
@@ -5018,52 +4961,48 @@ const ToolHeader = ({
             marginTop: styles.marginTop,
             textAlign: 'center'
           },
-          role: "heading"
-        }, {
+          role: "heading",
           children: title
-        })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
+        }), size === 'xxs' && jsx(CustomIconButton, {
           "data-testid": "dragBtn-xxs",
           disableRipple: true,
           sx: {
             pointerEvents: 'none',
             right: -12,
             transform: 'rotate(90deg)',
-            '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
+            '&.MuiButtonBase-root.MuiIconButton-root': Object.assign({}, iconStyle, {
               height: 12
             })
-          }
-        }, {
+          },
           children: _dragHandleIcon
-        }))]
-      })), jsxs(Grid2, Object.assign({
+        })]
+      }), jsxs(Grid2, {
         className: "header-right",
         container: true,
         justifyContent: "flex-end",
-        size: columnSizeIcon
-      }, {
-        children: [_rightHeaderComponent && _rightHeaderComponent, _onClose && jsx(CustomTooltip, Object.assign({
+        size: columnSizeIcon,
+        children: [_rightHeaderComponent && _rightHeaderComponent, _onClose && jsx(CustomTooltip, {
           title: t('shared-close'),
           placement: "bottom",
           sx: {
             pointerEvents: 'none'
-          }
-        }, {
-          children: jsx(CustomIconButton, Object.assign({
+          },
+          children: jsx(CustomIconButton, {
             "data-testid": "closeBtn",
             onClick: _onClose,
             onTouchEnd: _onClose,
             sx: {
               '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
-            }
-          }, {
+            },
             children: _closeIcon
-          }))
-        }))]
-      }))]
-    }))
-  }));
+          })
+        })]
+      })]
+    })
+  });
 };
 
+const _excluded$7 = ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"];
 const styles$3 = {
   container: {
     overflow: 'hidden',
@@ -5079,8 +5018,8 @@ const styles$3 = {
   }
 };
 const BASE_ELEVATION = 5;
-const ToolContainer = _a => {
-  var {
+const ToolContainer = _ref => {
+  let {
       title = '',
       size = 'xs',
       children,
@@ -5095,8 +5034,8 @@ const ToolContainer = _a => {
       rightHeaderComponent = null,
       dragHandleIcon,
       closeIcon
-    } = _a,
-    props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return jsxs(Paper, Object.assign({
     elevation: elevation,
     sx: styles$3.container
@@ -5113,18 +5052,17 @@ const ToolContainer = _a => {
         dragHandleIcon: dragHandleIcon,
         closeIcon: closeIcon
       })
-    }), jsx(Box, Object.assign({
+    }), jsx(Box, {
       sx: styles$3.content,
       style: {
         maxHeight
-      }
-    }, {
+      },
       children: children
-    })), isResizable && jsx(ToolFooter, {})]
+    }), isResizable && jsx(ToolFooter, {})]
   }));
 };
 
-var global$5 = global$q;
+var globalThis$5 = globalThis_1;
 var fails$8 = fails$p;
 var uncurryThis$6 = functionUncurryThis;
 var toString$8 = toString$d;
@@ -5132,8 +5070,8 @@ var trim = stringTrim.trim;
 var whitespaces = whitespaces$3;
 
 var charAt$4 = uncurryThis$6(''.charAt);
-var $parseFloat$1 = global$5.parseFloat;
-var Symbol$1 = global$5.Symbol;
+var $parseFloat$1 = globalThis$5.parseFloat;
+var Symbol$1 = globalThis$5.Symbol;
 var ITERATOR = Symbol$1 && Symbol$1.iterator;
 var FORCED$1 = 1 / $parseFloat$1(whitespaces + '-0') !== -Infinity
   // MS Edge 18- broken with boxed symbols
@@ -5226,8 +5164,8 @@ const useHandleSizeFromOutsideComponent = ({
     }
   }, [nodeRef]);
   const getBoundsNode = React__default.useCallback(() => {
-    var _a;
-    return bounds === 'parent' ? (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.parentNode : document.querySelector(bounds);
+    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
   const refPosition = React__default.useRef(position);
@@ -5284,6 +5222,7 @@ const useHandleSizeFromOutsideComponent = ({
   }, [isOpen, getBoundsNode]);
 };
 
+const _excluded$6 = ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"];
 // calculate dialog size and position to 85% of screensize
 const calculateDialogSizeAndPosition = () => {
   const width = window.innerWidth * 0.85;
@@ -5334,8 +5273,8 @@ const calculateNewPosition = (position, isRightAligned, handle, delta) => {
     y
   };
 };
-const DraggableComponent = _a => {
-  var {
+const DraggableComponent = _ref => {
+  let {
       title,
       bounds = 'body',
       cancel = '.MuiButtonBase-root',
@@ -5365,8 +5304,8 @@ const DraggableComponent = _a => {
       closeIcon,
       className,
       sx = {}
-    } = _a,
-    props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   const elevation = BASE_ELEVATION + order;
   const nodeRef = React__default.useRef(null);
@@ -5415,22 +5354,21 @@ const DraggableComponent = _a => {
       setSize(size);
     }
   });
-  return isOpen ? jsx(DraggableComponent$1, Object.assign({
+  return isOpen ? jsx(DraggableComponent$1, {
     nodeRef: nodeRef,
     bounds: bounds,
     cancel: cancel,
     position: position,
     onStop: onStopDrag,
     handle: `.${headerClassName}`,
-    onMouseDown: onMouseDown
-  }, {
-    children: jsx(Box, Object.assign({
+    onMouseDown: onMouseDown,
+    children: jsx(Box, {
       tabIndex: -1,
-      sx: Object.assign(Object.assign(Object.assign({
+      sx: Object.assign({
         position: 'absolute',
         pointerEvents: 'all',
         zIndex
-      }, startPosition), sx), {
+      }, startPosition, sx, {
         '&:hover .resizableHandle': {
           display: 'inline'
         }
@@ -5438,17 +5376,15 @@ const DraggableComponent = _a => {
       ref: nodeRef,
       className: "toolContainerDraggable",
       role: "dialog",
-      "aria-label": title
-    }, {
+      "aria-label": title,
       children: jsx(ResizeComponent, Object.assign({}, props, {
         size: size,
         setSize: setSize,
         onResizeStart: onStartResize,
         onResizeStop: onStopResize,
         onResize: onResize,
-        nodeRef: nodeRef
-      }, {
-        children: jsx(ToolContainer, Object.assign({
+        nodeRef: nodeRef,
+        children: jsx(ToolContainer, {
           maxHeight: initialMaxHeight,
           onClose: onClose,
           title: title,
@@ -5461,13 +5397,12 @@ const DraggableComponent = _a => {
           rightHeaderComponent: rightHeaderComponent,
           dragHandleIcon: dragHandleIcon,
           closeIcon: closeIcon,
-          className: className
-        }, {
+          className: className,
           children: children
-        }))
+        })
       }))
-    }))
-  })) : null;
+    })
+  }) : null;
 };
 
 const segmentStyle = {
@@ -5479,7 +5414,7 @@ const segmentStyle = {
   justifyContent: 'center'
 };
 const styles$2 = {
-  icon: Object.assign(Object.assign({}, segmentStyle), {
+  icon: Object.assign({}, segmentStyle, {
     backgroundColor: 'geowebColors.textInputField.default.rgba',
     width: 40,
     height: 40,
@@ -5487,10 +5422,10 @@ const styles$2 = {
     alignItems: 'center',
     borderRadius: 1
   }),
-  connect: Object.assign(Object.assign({}, segmentStyle), {
+  connect: Object.assign({}, segmentStyle, {
     fontSize: 18
   }),
-  divider: Object.assign(Object.assign({}, segmentStyle), {
+  divider: Object.assign({}, segmentStyle, {
     margin: '0 6px',
     fontSize: 18
   })
@@ -5500,39 +5435,35 @@ const ShortCutSegment = ({
   children
 }) => {
   if (_type === 'divider') {
-    return jsx(Typography, Object.assign({
+    return jsx(Typography, {
       sx: styles$2.divider,
       "data-testid": "segment-divider",
-      component: "span"
-    }, {
+      component: "span",
       children: children
-    }));
+    });
   }
   if (_type === 'icon') {
-    return jsx(Typography, Object.assign({
+    return jsx(Typography, {
       sx: styles$2.icon,
       "data-testid": "segment-icon",
-      component: "span"
-    }, {
+      component: "span",
       children: children
-    }));
+    });
   }
   if (_type === 'connect') {
-    return jsx(Typography, Object.assign({
+    return jsx(Typography, {
       sx: styles$2.connect,
       "data-testid": "segment-connect",
-      component: "span"
-    }, {
+      component: "span",
       children: children
-    }));
+    });
   }
-  return jsx(Typography, Object.assign({
+  return jsx(Typography, {
     sx: segmentStyle,
     "data-testid": "segment-text",
-    component: "span"
-  }, {
+    component: "span",
     children: children
-  }));
+  });
 };
 
 const ShortcutList = ({
@@ -5554,66 +5485,53 @@ const ShortcutList = ({
   }, {
     titleKey: 'shared-move-one-step',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowLeft, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "divider"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "divider",
         children: t('shared-shortcut-or')
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowRight, {})
-      }))]
+      })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyOption, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowLeft, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "divider"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "divider",
         children: t('shared-shortcut-or')
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowRight, {})
-      }))]
+      })]
     })
   }, {
     titleKey: 'shared-toggle-timeslider',
-    description: jsx(ShortCutSegment, Object.assign({
-      type: "icon"
-    }, {
+    description: jsx(ShortCutSegment, {
+      type: "icon",
       children: "T"
-    }))
+    })
   }, {
     titleKey: 'shared-timeslider-scale',
     description: jsx(ShortCutSegment, {
@@ -5622,11 +5540,10 @@ const ShortcutList = ({
   }, {
     titleKey: 'shared-expand-timeslider-scale',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: t('shared-shortcut-scroll')
       })]
     })
@@ -5638,317 +5555,267 @@ const ShortcutList = ({
   }, {
     titleKey: 'shared-mouseover-on-off',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "Alt"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "h"
-      }))]
+      })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyOption, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "h"
-      }))]
+      })]
     })
   }, {
     titleKey: 'shared-change-timestep-or-speed',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowUp, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "divider"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "divider",
         children: t('shared-shortcut-or')
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowDown, {})
-      })), jsxs(ShortCutSegment, {
+      }), jsxs(ShortCutSegment, {
         children: ["(", t('shared-shortcut-when-active'), ")"]
       })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyCommand, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowUp, {})
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "divider"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "divider",
         children: t('shared-shortcut-or')
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowDown, {})
-      })), jsxs(ShortCutSegment, {
+      }), jsxs(ShortCutSegment, {
         children: ["(", t('shared-shortcut-when-active'), ")"]
       })]
     })
   }, {
     titleKey: 'shared-return-to-current-time',
-    description: jsx(ShortCutSegment, Object.assign({
-      type: "icon"
-    }, {
+    description: jsx(ShortCutSegment, {
+      type: "icon",
       children: t('shared-shortcut-home')
-    })),
+    }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "fn"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "connect"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "connect",
         children: "+"
-      })), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(ArrowLeft, {})
-      }))]
+      })]
     })
   }, {
     titleKey: 'shared-change-layer-values-scrolling',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsxs(ShortCutSegment, {
+      }), jsxs(ShortCutSegment, {
         children: [' ', t('shared-shortcut-mouse-scroll')]
       })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyCommand, {})
-      })), jsxs(ShortCutSegment, {
+      }), jsxs(ShortCutSegment, {
         children: [' ', t('shared-shortcut-mouse-scroll')]
       })]
     })
   }, {
     titleKey: 'shared-change-layermanager-small',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "Alt"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "s"
-      }))]
+      })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyOption, {})
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "s"
-      }))]
+      })]
     })
   }, {
     titleKey: 'shared-change-layermanager-medium',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "Alt"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "m"
-      }))]
+      })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyOption, {})
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "m"
-      }))]
+      })]
     })
   }, {
     titleKey: 'shared-change-layermanager-large',
     description: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "Alt"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "l"
-      }))]
+      })]
     }),
     descriptionMac: jsxs(Fragment, {
-      children: [jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      children: [jsx(ShortCutSegment, {
+        type: "icon",
         children: "Ctrl"
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: jsx(KeyOption, {})
-      })), jsx(ShortCutSegment, {
+      }), jsx(ShortCutSegment, {
         children: " + "
-      }), jsx(ShortCutSegment, Object.assign({
-        type: "icon"
-      }, {
+      }), jsx(ShortCutSegment, {
+        type: "icon",
         children: "l"
-      }))]
+      })]
     })
   }];
-  return jsx(List, Object.assign({
-    "data-testid": `list-${_platform}`
-  }, {
-    children: shortcuts.map((shortcut, index) => jsx(ListItem, Object.assign({
+  return jsx(List, {
+    "data-testid": `list-${_platform}`,
+    children: shortcuts.map((shortcut, index) => jsx(ListItem, {
       sx: {
         minHeight: 56
       },
-      divider: index !== shortcuts.length - 1
-    }, {
-      children: jsxs(Grid2, Object.assign({
+      divider: index !== shortcuts.length - 1,
+      children: jsxs(Grid2, {
         container: true,
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        size: "grow"
-      }, {
-        children: [jsx(Grid2, Object.assign({
+        size: "grow",
+        children: [jsx(Grid2, {
           sx: {
             fontSize: 12,
             fontWeight: 300,
             letterSpacing: 0.4,
             opacity: 0.67
-          }
-        }, {
+          },
           children: t(shortcut.titleKey)
-        })), jsx(Grid2, {
-          children: jsx(Box, Object.assign({
+        }), jsx(Grid2, {
+          children: jsx(Box, {
             sx: {
               alignItems: 'center'
-            }
-          }, {
+            },
             children: _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description
-          }))
+          })
         })]
-      }))
-    }), shortcut.titleKey))
-  }));
+      })
+    }, shortcut.titleKey))
+  });
 };
 
 const TabPanel = ({
   children,
   value,
   index
-}) => jsx("div", Object.assign({
+}) => jsx("div", {
   role: "tabpanel",
   hidden: value !== index,
   id: `tabpanel-${index}`,
-  "aria-labelledby": `tab-${index}`
-}, {
+  "aria-labelledby": `tab-${index}`,
   children: value === index && children
-}));
+});
 const styles$1 = {
   container: {
     margin: '0px 20px',
@@ -5963,14 +5830,12 @@ const CheatSheet = () => {
   const onChangeTab = (_event, newValue) => {
     onChangeActiveTab(newValue);
   };
-  return jsxs(Box, Object.assign({
-    sx: styles$1.container
-  }, {
-    children: [jsxs(Tabs, Object.assign({
+  return jsxs(Box, {
+    sx: styles$1.container,
+    children: [jsxs(Tabs, {
       value: activeTab,
       onChange: onChangeTab,
-      "aria-label": "platform"
-    }, {
+      "aria-label": "platform",
       children: [jsx(Tab, {
         sx: styles$1.tab,
         label: "Windows"
@@ -5978,20 +5843,18 @@ const CheatSheet = () => {
         sx: styles$1.tab,
         label: "Mac"
       })]
-    })), jsx(TabPanel, Object.assign({
+    }), jsx(TabPanel, {
       value: activeTab,
-      index: 0
-    }, {
+      index: 0,
       children: jsx(ShortcutList, {})
-    })), jsx(TabPanel, Object.assign({
+    }), jsx(TabPanel, {
       value: activeTab,
-      index: 1
-    }, {
+      index: 1,
       children: jsx(ShortcutList, {
         platform: "mac"
       })
-    }))]
-  }));
+    })]
+  });
 };
 
 const UserMenuItemCheatSheet = () => {
@@ -6006,26 +5869,23 @@ const UserMenuItemCheatSheet = () => {
     t
   } = useTranslation(SHARED_NAMESPACE);
   return jsxs(Fragment, {
-    children: [jsx(MenuItem, Object.assign({
+    children: [jsx(MenuItem, {
       "data-testid": "cheatsheet-btn",
       onClick: onOpen,
-      divider: true
-    }, {
-      children: jsx(Grid2, Object.assign({
-        container: true
-      }, {
+      divider: true,
+      children: jsx(Grid2, {
+        container: true,
         children: jsx(Grid2, {
           children: t('shared-cheat-sheet')
         })
-      }))
-    })), jsx(Backdrop, Object.assign({
+      })
+    }), jsx(Backdrop, {
       "data-testid": "cheatsheet-content",
       open: open,
       sx: {
         zIndex: 1
-      }
-    }, {
-      children: jsx(DraggableComponent, Object.assign({
+      },
+      children: jsx(DraggableComponent, {
         startSize: {
           width: 700
         },
@@ -6034,11 +5894,10 @@ const UserMenuItemCheatSheet = () => {
         title: t('shared-cheat-sheet'),
         isOpen: true,
         onClose: onClose,
-        bounds: "parent"
-      }, {
+        bounds: "parent",
         children: jsx(CheatSheet, {})
-      }))
-    }))]
+      })
+    })]
   });
 };
 
@@ -6058,7 +5917,7 @@ const UserMenuItemSentryRecording = ({
   const onOpen = () => {
     setOpen(true);
   };
-  const enableHTMLRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+  const enableHTMLRecording = async () => {
     if (recordButtonEnabled) {
       return;
     }
@@ -6068,7 +5927,7 @@ const UserMenuItemSentryRecording = ({
     try {
       const {
         replayIntegration
-      } = yield import('@sentry/react');
+      } = await import('@sentry/react');
       Sentry.addIntegration(replayIntegration({
         maskAllText: false,
         blockAllMedia: false
@@ -6079,8 +5938,8 @@ const UserMenuItemSentryRecording = ({
       // eslint-disable-next-line no-console
       console.log(error);
     }
-  });
-  const enableHTMLAndCanvasRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+  };
+  const enableHTMLAndCanvasRecording = async () => {
     if (recordButtonEnabled) {
       return;
     }
@@ -6088,7 +5947,7 @@ const UserMenuItemSentryRecording = ({
       const {
         replayIntegration,
         replayCanvasIntegration
-      } = yield import('@sentry/react');
+      } = await import('@sentry/react');
       Sentry.addIntegration(replayIntegration({
         maskAllText: false,
         blockAllMedia: false
@@ -6100,28 +5959,25 @@ const UserMenuItemSentryRecording = ({
       // eslint-disable-next-line no-console
       console.log(error);
     }
-  });
+  };
   return jsxs(ErrorBoundary, {
-    children: [jsx(MenuItem, Object.assign({
+    children: [jsx(MenuItem, {
       "data-testid": "sentryRecording-btn",
       onClick: onOpen,
-      divider: true
-    }, {
-      children: jsx(Grid2, Object.assign({
-        container: true
-      }, {
+      divider: true,
+      children: jsx(Grid2, {
+        container: true,
         children: jsx(Grid2, {
           children: t('shared-sentry-recording')
         })
-      }))
-    })), jsx(Backdrop, Object.assign({
+      })
+    }), jsx(Backdrop, {
       "data-testid": "sentryRecording-content",
       open: open,
       sx: {
         zIndex: 1
-      }
-    }, {
-      children: jsx(DraggableComponent, Object.assign({
+      },
+      children: jsx(DraggableComponent, {
         startSize: {
           width: 700
         },
@@ -6130,41 +5986,36 @@ const UserMenuItemSentryRecording = ({
         title: t('shared-sentry-recording'),
         isOpen: true,
         onClose: onClose,
-        bounds: "parent"
-      }, {
-        children: jsxs(Grid2, Object.assign({
+        bounds: "parent",
+        children: jsxs(Grid2, {
           container: true,
           spacing: 4,
           sx: {
             paddingLeft: '70px',
             paddingRight: '70px'
-          }
-        }, {
-          children: [jsx(Grid2, Object.assign({
+          },
+          children: [jsx(Grid2, {
             container: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
-            }
-          }, {
+            },
             children: jsx(Typography, {
               children: t('shared-sentry-information')
             })
-          })), jsx(Grid2, Object.assign({
+          }), jsx(Grid2, {
             container: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
-            }
-          }, {
+            },
             children: jsx(Typography, {
               children: t('shared-sentry-enable-message')
             })
-          })), jsxs(Grid2, Object.assign({
+          }), jsxs(Grid2, {
             container: true,
             alignItems: "center",
-            direction: "column"
-          }, {
+            direction: "column",
             children: [jsx(Switch, {
               checked: recordButtonEnabled && !canvasIntegrationEnabled,
               onChange: enableHTMLRecording,
@@ -6174,11 +6025,10 @@ const UserMenuItemSentryRecording = ({
             }) : jsxs(Typography, {
               children: [" ", t('shared-sentry-enable')]
             })]
-          })), jsxs(Grid2, Object.assign({
+          }), jsxs(Grid2, {
             container: true,
             alignItems: "center",
-            direction: "column"
-          }, {
+            direction: "column",
             children: [jsx(Switch, {
               disabled: true,
               checked: canvasIntegrationEnabled,
@@ -6186,37 +6036,33 @@ const UserMenuItemSentryRecording = ({
             }), canvasIntegrationEnabled ? jsx(Typography, {
               children: t('shared-sentry-disable-both')
             }) : jsxs(Fragment, {
-              children: [jsx(Typography, Object.assign({
+              children: [jsx(Typography, {
                 sx: {
                   color: 'gray'
-                }
-              }, {
+                },
                 children: t('shared-sentry-enable-both')
-              })), jsxs(Typography, Object.assign({
+              }), jsxs(Typography, {
                 textAlign: "center",
                 sx: {
                   color: 'gray'
-                }
-              }, {
+                },
                 children: ["(", t('shared-sentry-cors-wait'), ")"]
-              }))]
+              })]
             })]
-          })), jsx(Grid2, Object.assign({
+          }), jsx(Grid2, {
             container: true,
-            justifyContent: "center"
-          }, {
-            children: jsx(Typography, Object.assign({
+            justifyContent: "center",
+            children: jsx(Typography, {
               sx: {
                 paddingTop: '20px',
                 textAlign: 'center'
-              }
-            }, {
+              },
               children: t('shared-sentry-disclaimer')
-            }))
-          }))]
-        }))
-      }))
-    }))]
+            })
+          })]
+        })
+      })
+    })]
   });
 };
 
@@ -6281,6 +6127,7 @@ $$5({ target: 'Array', proto: true, forced: String(test) === String(test.reverse
   }
 });
 
+const _excluded$5 = ["value", "orientation", "shouldAutoFocus"];
 const sliderHeaderStyle = {
   fontFamily: 'Roboto-Black, Roboto',
   fontSize: 12,
@@ -6331,13 +6178,13 @@ const sliderStyle = {
     }
   }
 };
-const CustomSlider = _a => {
-  var {
+const CustomSlider = _ref => {
+  let {
       value,
       orientation = 'vertical',
       shouldAutoFocus = false
-    } = _a,
-    props = __rest(_a, ["value", "orientation", "shouldAutoFocus"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   // Add custom class (for bold text) to label adjacent to thumb component.
   // Material UI doesn't support highlighing only adjacent label
   // when track is highlighted everywhere below selected value.
@@ -6379,14 +6226,15 @@ const CustomSlider = _a => {
   }, props));
 };
 
+const _excluded$4 = ["variant", "className", "value"];
 // This button is same as MUI ToggleButton but adds the variant prop
-const CustomToggleButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
+const CustomToggleButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
       variant = 'primary',
       className,
       value = 0
-    } = _a,
-    props = __rest(_a, ["variant", "className", "value"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return jsx(ToggleButton, Object.assign({
     ref: ref,
     className: `${variant} ${className}`,
@@ -6466,7 +6314,7 @@ const ToggleMenu = ({
     }
   }, [_isDefaultOpen, _buttonTestId]);
   return jsxs(Fragment, {
-    children: [jsx(CustomIconButton, Object.assign({
+    children: [jsx(CustomIconButton, {
       tooltipProps: {
         placement: 'top',
         title: _tooltipTitle
@@ -6477,10 +6325,9 @@ const ToggleMenu = ({
       "data-testid": _buttonTestId,
       variant: _variant,
       id: _buttonTestId,
-      disabled: _isDisabled
-    }, {
+      disabled: _isDisabled,
       children: _buttonIcon
-    })), jsxs(Menu, Object.assign({
+    }), jsxs(Menu, {
       anchorEl: anchorEl,
       open: isOpen,
       onClose: (event, reason) => {
@@ -6501,66 +6348,61 @@ const ToggleMenu = ({
         style: {
           padding: '0px'
         }
-      })
-    }, {
-      children: [_menuTitle && jsx(ListSubheader, Object.assign({
-        "data-testid": "toggleMenuTitle"
-      }, {
-        children: jsx(Typography, Object.assign({
+      }),
+      children: [_menuTitle && jsx(ListSubheader, {
+        "data-testid": "toggleMenuTitle",
+        children: jsx(Typography, {
           sx: {
             fontSize: '12px'
-          }
-        }, {
+          },
           children: _menuTitle
-        }))
-      })), menuItems && menuItems.length ? menuItems.map(menuItem => {
+        })
+      }), menuItems && menuItems.length ? menuItems.map(menuItem => {
         const {
           text,
           icon,
           action,
           isDisabled
         } = menuItem;
-        return jsx(MenuItem, Object.assign({
+        return jsx(MenuItem, {
           onClick: event => {
             action(event);
             handleClose(event);
           },
           disabled: isDisabled,
-          selected: menuItem.isSelected
-        }, {
-          children: jsxs(Grid2, Object.assign({
+          selected: menuItem.isSelected,
+          children: jsxs(Grid2, {
             container: true,
             spacing: 2,
             justifyContent: "space-between",
-            size: "grow"
-          }, {
+            size: "grow",
             children: [jsx(Grid2, {
               children: jsx(ListItemText, {
                 children: text
               })
-            }), icon && jsx(Grid2, Object.assign({
-              alignItems: "flex-end"
-            }, {
-              children: jsx(ListItemIcon, Object.assign({
+            }), icon && jsx(Grid2, {
+              alignItems: "flex-end",
+              children: jsx(ListItemIcon, {
                 sx: {
                   '&.MuiListItemIcon-root': {
                     minWidth: '24px'
                   }
-                }
-              }, {
+                },
                 children: icon
-              }))
-            }))]
-          }))
-        }), text);
+              })
+            })]
+          })
+        }, text);
       }) : jsx("div", {}) // Needed to make the menu work without any menuItems
       , children]
-    }))]
+    })]
   });
 };
 
-const TooltipSelect = _a => {
-  var {
+const _excluded$3 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
+  _excluded2 = ["className", "additionalStyling"];
+const TooltipSelect = _ref => {
+  let {
       tooltip = '',
       list = [],
       currentIndex = -1,
@@ -6571,8 +6413,8 @@ const TooltipSelect = _a => {
       variant = 'standard',
       additionalStyling = {},
       skipLocalStyling = false
-    } = _a,
-    props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const [tooltipOpen, setTooltipOpen] = useControlledTooltip();
   const onWheel = React.useCallback(event => {
@@ -6609,11 +6451,10 @@ const TooltipSelect = _a => {
   const onBlur = React.useCallback(() => {
     setTooltipOpen(false);
   }, [setTooltipOpen]);
-  return jsx(CustomTooltip, Object.assign({
+  return jsx(CustomTooltip, {
     title: tooltip,
     placement: "top",
-    open: tooltipOpen
-  }, {
+    open: tooltipOpen,
     children: jsx(StyledSelect, Object.assign({
       variant: variant,
       disableUnderline: true,
@@ -6629,7 +6470,7 @@ const TooltipSelect = _a => {
       additionalStyling: additionalStyling,
       skipLocalStyling: skipLocalStyling
     }, props))
-  }));
+  });
 };
 // Style the select
 const BaseSelect = styled(Select, {
@@ -6643,12 +6484,12 @@ const BaseSelect = styled(Select, {
   return Object.assign({}, !skipLocalStyling && tooltipContainerStyles(theme, !!isEnabled, hasBackgroundColor));
 });
 // Style the menu pop-over
-const StyledSelect = styled( /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
+const StyledSelect = styled( /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
       className,
       additionalStyling
-    } = _a,
-    props = __rest(_a, ["className", "additionalStyling"]);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return jsx(BaseSelect, Object.assign({}, props, {
     MenuProps: {
       classes: {
@@ -6708,7 +6549,7 @@ const StyledSelect = styled( /*#__PURE__*/React.forwardRef((_a, ref) => {
     }
   }
 }));
-const tooltipContainerStyles = (theme, isEnabled, hasBackgroundColor = true) => Object.assign(Object.assign({
+const tooltipContainerStyles = (theme, isEnabled, hasBackgroundColor = true) => Object.assign({
   width: '100%',
   height: 32,
   fontWeight: 500,
@@ -6736,7 +6577,7 @@ const tooltipContainerStyles = (theme, isEnabled, hasBackgroundColor = true) =>
   '&>div': {
     paddingLeft: '8px!important'
   }
-}, theme.palette.geowebColors.tooltips.tooltipSelect.select), hasBackgroundColor && {
+}, theme.palette.geowebColors.tooltips.tooltipSelect.select, hasBackgroundColor && {
   '&:hover': {
     backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill,
     borderRadius: 0
@@ -6774,8 +6615,9 @@ function withEggs(eggs) {
   };
 }
 
-const CustomAccordion = _a => {
-  var {
+const _excluded$2 = ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"];
+const CustomAccordion = _ref => {
+  let {
       title,
       title2,
       defaultExpanded = true,
@@ -6787,8 +6629,8 @@ const CustomAccordion = _a => {
       CustomExpandIcon,
       children,
       amountOfItems
-    } = _a,
-    props = __rest(_a, ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const [expanded, setExpanded] = React.useState(defaultExpanded);
   const theme = useTheme();
   const iconColor = theme.palette.geowebColors.buttons.icon.default.color;
@@ -6799,9 +6641,8 @@ const CustomAccordion = _a => {
     disableGutters: disableGutters,
     TransitionProps: {
       timeout: transitionDuration
-    }
-  }, {
-    children: [jsx(AccordionSummary, Object.assign({
+    },
+    children: [jsx(AccordionSummary, {
       expandIcon: CustomExpandIcon ? jsx(CustomExpandIcon, {
         style: {
           fill: `${iconColor}`
@@ -6810,53 +6651,46 @@ const CustomAccordion = _a => {
         style: {
           fill: `${iconColor}`
         }
-      })
-    }, {
-      children: jsxs(Box, Object.assign({
+      }),
+      children: jsxs(Box, {
         sx: {
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%'
-        }
-      }, {
-        children: [jsxs(Box, Object.assign({
+        },
+        children: [jsxs(Box, {
           sx: {
             width: '100%',
             display: 'flex',
             justifyContent: 'space-between'
-          }
-        }, {
-          children: [jsx(Box, Object.assign({
+          },
+          children: [jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'flex-start'
-            }
-          }, {
+            },
             children: title
-          })), jsx(Box, Object.assign({
+          }), jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'flex-end',
               paddingRight: '25px'
-            }
-          }, {
+            },
             children: title2
-          }))]
-        })), jsx(Box, Object.assign({
+          })]
+        }), jsx(Box, {
           sx: {
             display: 'flex',
             justifyContent: 'flex-end',
             marginRight: '10px'
-          }
-        }, {
+          },
           children: amountOfItems
-        }))]
-      }))
-    })), jsx(AccordionDetails, Object.assign({
-      sx: detailsSx
-    }, {
+        })]
+      })
+    }), jsx(AccordionDetails, {
+      sx: detailsSx,
       children: children
-    }))]
+    })]
   }));
 };
 
@@ -6941,8 +6775,8 @@ var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
 var $$3 = _export;
 var $reduce = arrayReduce.left;
 var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var CHROME_VERSION = engineV8Version;
-var IS_NODE = engineIsNode;
+var CHROME_VERSION = environmentV8Version;
+var IS_NODE = environmentIsNode;
 
 // Chrome 80-82 has a critical bug
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
@@ -6972,10 +6806,10 @@ var isRegexp = function (it) {
 };
 
 var fails$5 = fails$p;
-var global$4 = global$q;
+var globalThis$4 = globalThis_1;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$4.RegExp;
+var $RegExp$2 = globalThis$4.RegExp;
 
 var UNSUPPORTED_Y$3 = fails$5(function () {
   var re = $RegExp$2('a', 'y');
@@ -7003,10 +6837,10 @@ var regexpStickyHelpers = {
 };
 
 var fails$4 = fails$p;
-var global$3 = global$q;
+var globalThis$3 = globalThis_1;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$3.RegExp;
+var $RegExp$1 = globalThis$3.RegExp;
 
 var regexpUnsupportedDotAll = fails$4(function () {
   var re = $RegExp$1('.', 's');
@@ -7014,10 +6848,10 @@ var regexpUnsupportedDotAll = fails$4(function () {
 });
 
 var fails$3 = fails$p;
-var global$2 = global$q;
+var globalThis$2 = globalThis_1;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$2.RegExp;
+var $RegExp = globalThis$2.RegExp;
 
 var regexpUnsupportedNcg = fails$3(function () {
   var re = $RegExp('(?<a>b)', 'g');
@@ -7026,7 +6860,7 @@ var regexpUnsupportedNcg = fails$3(function () {
 });
 
 var DESCRIPTORS$1 = descriptors;
-var global$1 = global$q;
+var globalThis$1 = globalThis_1;
 var uncurryThis$4 = functionUncurryThis;
 var isForced = isForced_1;
 var inheritIfRequired = inheritIfRequired$2;
@@ -7049,9 +6883,9 @@ var UNSUPPORTED_DOT_ALL$2 = regexpUnsupportedDotAll;
 var UNSUPPORTED_NCG$1 = regexpUnsupportedNcg;
 
 var MATCH$1 = wellKnownSymbol$2('match');
-var NativeRegExp = global$1.RegExp;
+var NativeRegExp = globalThis$1.RegExp;
 var RegExpPrototype$2 = NativeRegExp.prototype;
-var SyntaxError = global$1.SyntaxError;
+var SyntaxError = globalThis$1.SyntaxError;
 var exec$1 = uncurryThis$4(RegExpPrototype$2.exec);
 var charAt$3 = uncurryThis$4(''.charAt);
 var replace$1 = uncurryThis$4(''.replace);
@@ -7072,6 +6906,7 @@ var BASE_FORCED = DESCRIPTORS$1 &&
   (!CORRECT_NEW || MISSED_STICKY || UNSUPPORTED_DOT_ALL$2 || UNSUPPORTED_NCG$1 || fails$2(function () {
     re2[MATCH$1] = false;
     // RegExp constructor can alter flags and IsRegExp works correct with @@match
+    // eslint-disable-next-line sonarjs/inconsistent-function-call -- required for testing
     return NativeRegExp(re1) !== re1 || NativeRegExp(re2) === re2 || String(NativeRegExp(re1, 'i')) !== '/a/i';
   }));
 
@@ -7121,11 +6956,15 @@ var handleNCG = function (string) {
         brackets = true;
         break;
       case chr === '(':
+        result += chr;
+        // ignore non-capturing groups
+        if (stringSlice$3(string, index + 1, index + 3) === '?:') {
+          continue;
+        }
         if (exec$1(IS_NCG, stringSlice$3(string, index + 1))) {
           index += 2;
           ncg = true;
         }
-        result += chr;
         groupid++;
         continue;
       case chr === '>' && ncg:
@@ -7211,7 +7050,7 @@ if (isForced('RegExp', BASE_FORCED)) {
 
   RegExpPrototype$2.constructor = RegExpWrapper;
   RegExpWrapper.prototype = RegExpPrototype$2;
-  defineBuiltIn$1(global$1, 'RegExp', RegExpWrapper, { constructor: true });
+  defineBuiltIn$1(globalThis$1, 'RegExp', RegExpWrapper, { constructor: true });
 }
 
 // https://tc39.es/ecma262/#sec-get-regexp-@@species
@@ -7734,12 +7573,11 @@ const SearchHighlight = ({
     children: textParts.map((part, index) => {
       const key = `${part}-${index}`;
       if (searchWords.some(search => part.toLocaleLowerCase().includes(search))) {
-        return jsx("mark", Object.assign({
+        return jsx("mark", {
           style: highlightStyle,
-          "data-testid": "mark"
-        }, {
+          "data-testid": "mark",
           children: part
-        }), key);
+        }, key);
       }
       return jsx("span", {
         children: part
@@ -7748,6 +7586,7 @@ const SearchHighlight = ({
   });
 };
 
+const _excluded$1 = ["activeLabel", "inActiveLabel", "tooltip"];
 const styles = {
   label: {
     color: 'geowebColors.buttons.tertiary.default.color',
@@ -7756,32 +7595,28 @@ const styles = {
     fontWeight: 500
   }
 };
-const SwitchButton = _a => {
-  var {
+const SwitchButton = _ref => {
+  let {
       activeLabel = 'Editor',
       inActiveLabel = 'Viewer',
       tooltip = 'Switch mode'
-    } = _a,
-    props = __rest(_a, ["activeLabel", "inActiveLabel", "tooltip"]);
-  return jsx(CustomTooltip, Object.assign({
-    title: tooltip
-  }, {
-    children: jsxs("span", Object.assign({
-      role: "button"
-    }, {
-      children: [jsx(FormLabel, Object.assign({
-        sx: styles.label
-      }, {
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return jsx(CustomTooltip, {
+    title: tooltip,
+    children: jsxs("span", {
+      role: "button",
+      children: [jsx(FormLabel, {
+        sx: styles.label,
         children: inActiveLabel
-      })), jsx(Switch, Object.assign({
+      }), jsx(Switch, Object.assign({
         "data-testid": "switchMode"
-      }, props)), jsx(FormLabel, Object.assign({
-        sx: styles.label
-      }, {
+      }, props)), jsx(FormLabel, {
+        sx: styles.label,
         children: activeLabel
-      }))]
-    }))
-  }));
+      })]
+    })
+  });
 };
 
 // TODO: Remove from `core-js@4` since it's moved to entry points
@@ -7822,13 +7657,17 @@ $({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
 const isURL = string => /^https?:\/\//.test(string);
 const ClearButton$1 = ({
   onClick
-}) => jsx(CustomIconButton, Object.assign({
-  tooltipTitle: translateKeyOutsideComponents('shared-clear'),
-  sx: buttonStyle,
-  onClick: onClick
-}, {
-  children: jsx(Clear, {})
-}));
+}) => {
+  const {
+    t
+  } = useSharedTranslation();
+  return jsx(CustomIconButton, {
+    tooltipTitle: t('shared-clear'),
+    sx: buttonStyle,
+    onClick: onClick,
+    children: jsx(Clear, {})
+  });
+};
 const buttonStyle = {
   '&.MuiButtonBase-root.MuiIconButton-root': {
     width: 48,
@@ -7843,23 +7682,21 @@ const SearchFieldButton = ({
 }) => {
   const {
     t
-  } = useTranslation(SHARED_NAMESPACE);
+  } = useSharedTranslation();
   if (isURL(localSearchString)) {
     return jsxs(Fragment, {
-      children: [jsx("div", Object.assign({
+      children: [jsx("div", {
         style: {
           marginRight: '15px'
-        }
-      }, {
+        },
         children: jsx(ClearButton$1, {
           onClick: () => onClickClear()
         })
-      })), jsx(Button, Object.assign({
+      }), jsx(Button, {
         variant: "tertiary",
-        onClick: () => setPopupIsOpen(true)
-      }, {
+        onClick: () => setPopupIsOpen(true),
         children: t('shared-save')
-      }))]
+      })]
     });
   }
   if (localSearchString) {
@@ -7867,12 +7704,11 @@ const SearchFieldButton = ({
       onClick: () => onClickClear()
     });
   }
-  return jsx(CustomIconButton, Object.assign({
+  return jsx(CustomIconButton, {
     tooltipTitle: t('shared-search'),
-    sx: buttonStyle
-  }, {
+    sx: buttonStyle,
     children: jsx(Search, {})
-  }));
+  });
 };
 
 const SearchField$1 = ({
@@ -7936,9 +7772,8 @@ const SearchField$1 = ({
     fullWidth: true,
     slotProps: {
       input: {
-        endAdornment: jsx(InputAdornment, Object.assign({
-          position: "end"
-        }, {
+        endAdornment: jsx(InputAdornment, {
+          position: "end",
           children: jsx(SearchFieldButton, {
             setPopupIsOpen: () => {
               onOpenServicePopup(localSearchString);
@@ -7951,7 +7786,7 @@ const SearchField$1 = ({
               setUrlIsValid(false);
             }
           })
-        }))
+        })
       }
     }
   });
@@ -7970,25 +7805,23 @@ const LastUpdateTime = ({
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return jsxs(Box, Object.assign({
+  return jsxs(Box, {
     sx: {
       display: 'flex',
       alignItems: 'center',
       height: '100%',
       justifyContent: 'flex-end'
-    }
-  }, {
-    children: [jsx(Typography, Object.assign({
+    },
+    children: [jsx(Typography, {
       sx: {
         color: 'geowebColors.captions.captionStatus.rgba',
         fontSize: '10px',
         lineHeight: '1.6',
         letterSpacing: '0.33px'
       },
-      "data-testid": dataTestId
-    }, {
+      "data-testid": dataTestId,
       children: getLastUpdateTitle(lastUpdateTime, t)
-    })), jsx(CustomIconButton, Object.assign({
+    }), jsx(CustomIconButton, {
       "data-testid": "refresh-button",
       onClick: _onPressRefresh,
       sx: {
@@ -7999,11 +7832,10 @@ const LastUpdateTime = ({
         marginLeft: 1
       },
       tooltipTitle: t('shared-click-to-refresh'),
-      variant: "tool"
-    }, {
+      variant: "tool",
       children: jsx(Cached, {})
-    }))]
-  }));
+    })]
+  });
 };
 
 class CanvasComponent extends Component {
@@ -8279,7 +8111,7 @@ class CanvasComponent extends Component {
   render() {
     this.updateCanvas();
     this._handleWindowResize();
-    return jsx("div", Object.assign({
+    return jsx("div", {
       role: "button",
       ref: this.canvascontaineroutside,
       tabIndex: 0,
@@ -8291,9 +8123,8 @@ class CanvasComponent extends Component {
         border: 'none',
         display: 'block',
         overflow: 'hidden'
-      }
-    }, {
-      children: jsx("div", Object.assign({
+      },
+      children: jsx("div", {
         ref: this.canvascontainer,
         style: {
           minWidth: 'inherit',
@@ -8304,26 +8135,24 @@ class CanvasComponent extends Component {
           display: 'block',
           border: 'none'
         },
-        "data-testid": "canvas-container"
-      }, {
-        children: jsx("div", Object.assign({
+        "data-testid": "canvas-container",
+        children: jsx("div", {
           style: {
             overflow: 'visible',
             width: 0,
             height: 0
           },
           role: "presentation",
-          "aria-label": "canvas"
-        }, {
+          "aria-label": "canvas",
           children: jsx("canvas", {
             "data-testid": "canvas",
             ref: canvas => {
               this.canvas = canvas;
             }
           })
-        }))
-      }))
-    }));
+        })
+      })
+    });
   }
 }
 CanvasComponent.defaultProps = {
@@ -8405,12 +8234,11 @@ const FilterList = ({
   const {
     t
   } = useSharedTranslation();
-  return jsxs(Stack, Object.assign({
+  return jsxs(Stack, {
     direction: "row",
     spacing: 1,
     "data-testid": "filterList",
-    className: "filter-list"
-  }, {
+    className: "filter-list",
     children: [jsx(FilterChip, {
       id: "all",
       label: t('shared-filter-all'),
@@ -8429,29 +8257,27 @@ const FilterList = ({
         }
       }, filter.id);
     })]
-  }));
+  });
 };
 
 const DEBOUNCE_TIMEOUT = 300;
 const SearchButton = ({
   label
-}) => jsx(CustomIconButton, Object.assign({
+}) => jsx(CustomIconButton, {
   tooltipTitle: label,
   edge: "end",
-  size: "large"
-}, {
+  size: "large",
   children: jsx(Search, {})
-}));
+});
 const ClearButton = ({
   onClick
-}) => jsx(CustomIconButton, Object.assign({
+}) => jsx(CustomIconButton, {
   tooltipTitle: "Clear",
   edge: "end",
   onClick: onClick,
-  size: "large"
-}, {
+  size: "large",
   children: jsx(Clear, {})
-}));
+});
 const SearchField = ({
   valueChanged,
   value: _value = ''
@@ -8481,9 +8307,8 @@ const SearchField = ({
     },
     slotProps: {
       input: {
-        endAdornment: jsx(InputAdornment, Object.assign({
-          position: "end"
-        }, {
+        endAdornment: jsx(InputAdornment, {
+          position: "end",
           children: localValue ? jsx(ClearButton, {
             onClick: () => {
               setLocalValue('');
@@ -8492,31 +8317,30 @@ const SearchField = ({
           }) : jsx(SearchButton, {
             label: label
           })
-        }))
+        })
       }
     }
   });
 };
 
+const _excluded = ["filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery"];
 const DEFAULT_FILTER_HEIGHT = 85;
-const Filter = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
+const Filter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
       filters,
       onClickFilterChip = () => {},
       onSearch = () => {},
       isAllSelected,
       searchQuery
-    } = _a,
-    props = __rest(_a, ["filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery"]);
-  return jsx(Box, Object.assign({
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return jsx(Box, {
     sx: Object.assign({
       marginBottom: '8px'
     }, props.sx),
-    ref: ref
-  }, {
-    children: jsxs(Stack, Object.assign({
-      spacing: 1
-    }, {
+    ref: ref,
+    children: jsxs(Stack, {
+      spacing: 1,
       children: [jsx(SearchField, {
         value: searchQuery,
         valueChanged: onSearch
@@ -8525,23 +8349,22 @@ const Filter = /*#__PURE__*/React.forwardRef((_a, ref) => {
         onChipClick: onClickFilterChip,
         isAllSelected: isAllSelected
       })]
-    }))
-  }));
+    })
+  });
 });
 
 const FilterLabel = ({
   name
-}) => jsx(Typography, Object.assign({
+}) => jsx(Typography, {
   variant: "body2",
   sx: {
     fontSize: '16px',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden'
-  }
-}, {
+  },
   children: name
-}));
+});
 const FilterListItem = ({
   filter,
   toggleFilter: _toggleFilter = () => {},
@@ -8584,14 +8407,13 @@ const FilterListItem = ({
   };
   const name = filter.amountVisible ? `${filter.name} (${filter.amountVisible})` : filter.name;
   if (filter.amountVisible !== 0) {
-    return jsx("div", Object.assign({
+    return jsx("div", {
       ref: mouseMoveRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleMouseEnter,
-      onBlur: handleMouseLeave
-    }, {
-      children: jsxs(ListItem, Object.assign({
+      onBlur: handleMouseLeave,
+      children: jsxs(ListItem, {
         sx: {
           width: '100%',
           minWidth: '300px',
@@ -8600,7 +8422,7 @@ const FilterListItem = ({
           paddingRight: '50px',
           fontSize: '12px'
         },
-        secondaryAction: jsx(CustomIconButton, Object.assign({
+        secondaryAction: jsx(CustomIconButton, {
           "aria-label": `Only ${filter.name}`,
           style: {
             backgroundColor: 'transparent',
@@ -8610,24 +8432,20 @@ const FilterListItem = ({
           edge: "end",
           onClick: () => {
             selectOnlyOne(filter.id);
-          }
-        }, {
-          children: jsx(Typography, Object.assign({
+          },
+          children: jsx(Typography, {
             sx: {
               color: 'geowebColors.buttons.primary.default.fill',
               fontSize: '14px',
               fontWeight: 500
-            }
-          }, {
+            },
             children: t('shared-only')
-          }))
-        }))
-      }, {
-        children: [jsx(ListItemIcon, Object.assign({
+          })
+        }),
+        children: [jsx(ListItemIcon, {
           sx: {
             minWidth: '42px'
-          }
-        }, {
+          },
           children: jsx(Checkbox, {
             inputProps: {
               'aria-label': filter.name,
@@ -8647,15 +8465,101 @@ const FilterListItem = ({
               }
             }
           })
-        })), children || jsx(FilterLabel, {
+        }), children || jsx(FilterLabel, {
           name: name
         })]
-      }))
-    }));
+      })
+    });
   }
   return null;
 };
 
+const FilterOption = ({
+  optionId,
+  checked,
+  onClick,
+  labelStyle,
+  label
+}) => {
+  const {
+    t
+  } = useSharedTranslation();
+  const [showOnly, setShowOnly] = useState(false);
+  const updateShowOnly = debounce(show => 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, {
+      "aria-label": `Only ${label}`,
+      style: {
+        backgroundColor: 'transparent',
+        width: 'auto'
+      },
+      edge: "end",
+      onClick: () => onClick(!checked, true),
+      onMouseOver: () => updateShowOnly(true),
+      onMouseOut: () => updateShowOnly(false),
+      children: jsx(Typography, {
+        sx: {
+          color: 'geowebColors.buttons.primary.default.fill',
+          fontSize: '14px',
+          fontWeight: 500
+        },
+        children: t('shared-only')
+      })
+    }),
+    children: jsxs(ListItemButton, {
+      role: undefined,
+      onClick: () => onClick(!checked),
+      onMouseOver: () => updateShowOnly(true),
+      onMouseOut: () => updateShowOnly(false),
+      dense: true,
+      disableGutters: true,
+      sx: {
+        padding: 0
+      },
+      children: [jsx(ListItemIcon, {
+        sx: {
+          width: '42px'
+        },
+        children: jsx(Checkbox, {
+          checked: checked,
+          tabIndex: -1,
+          disableRipple: true,
+          inputProps: {
+            'aria-labelledby': optionId,
+            'aria-label': optionId
+          },
+          name: optionId
+        })
+      }), jsx(ListItemText, {
+        id: optionId,
+        sx: {
+          padding: 0,
+          margin: 0
+        },
+        primary: jsx(Typography, {
+          variant: "body2",
+          sx: Object.assign({
+            fontSize: '16px',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden'
+          }, labelStyle),
+          children: label
+        })
+      })]
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8679,9 +8583,9 @@ const isAxiosError = error => {
   return error.isAxiosError !== undefined;
 };
 const isAxiosAuthError = error => {
-  var _a, _b;
   if (isAxiosError(error)) {
-    return ((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 401 || ((_b = error.response) === null || _b === void 0 ? void 0 : _b.status) === 403;
+    var _error$response, _error$response2;
+    return ((_error$response = error.response) == null ? void 0 : _error$response.status) === 401 || ((_error$response2 = error.response) == null ? void 0 : _error$response2.status) === 403;
   }
   return false;
 };
@@ -9439,18 +9343,12 @@ var index = /*#__PURE__*/Object.freeze({
   utc: utc
 });
 
-const createMockStoreWithEggs = mockState => {
-  const mockStore = configureStoreToBeDeprecated();
-  const store = mockStore(mockState);
-  store.addEggs = typeof jest !== 'undefined' ? jest.fn() : () => {}; // mocking the dynamic module loader
-  return store;
-};
 const createToolkitMockStoreWithEggs = storeConfig => {
   const {
     reducer,
     preloadedState
   } = storeConfig;
-  const store = configureStore(Object.assign(Object.assign({}, storeConfig), {
+  const store = configureStore(Object.assign({}, storeConfig, {
     reducer,
     preloadedState
   }));
@@ -9599,4 +9497,4 @@ class RenderCounter {
 }
 const renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterLabel, FilterListItem, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createToolkitMockStoreWithEggs, 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, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterLabel, FilterListItem, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStoreWithEggs, 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, withEggs };