@opengeoweb/shared 9.19.0 → 9.20.1

package/index.esm.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import React__default, { useRef, Component } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment } 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 i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
@@ -10,7 +11,7 @@ import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 import { styled } from '@mui/material/styles';
 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, 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, isWithinInterval, getDayOfYear, getDay, getMonth, getYear, getWeek } from 'date-fns';
+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, 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 configureStore from 'redux-mock-store';
 import { configureStore as configureStore$1 } from '@reduxjs/toolkit';
 
@@ -540,7 +541,9 @@ var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty
   source: 'https://github.com/zloirock/core-js'
 });
 
-var store$2 = sharedStore.exports;
+var sharedStoreExports = sharedStore.exports;
+
+var store$2 = sharedStoreExports;
 
 var shared$4 = function (key, value) {
   return store$2[key] || (store$2[key] = value || {});
@@ -782,7 +785,7 @@ var functionName = {
 
 var uncurryThis$j = functionUncurryThis;
 var isCallable$h = isCallable$n;
-var store$1 = sharedStore.exports;
+var store$1 = sharedStoreExports;
 
 var functionToString = uncurryThis$j(Function.toString);
 
@@ -818,7 +821,7 @@ var global$h = global$p;
 var isObject$9 = isObject$e;
 var createNonEnumerableProperty$8 = createNonEnumerableProperty$9;
 var hasOwn$a = hasOwnProperty_1;
-var shared$1 = sharedStore.exports;
+var shared$1 = sharedStoreExports;
 var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
@@ -939,9 +942,11 @@ Function.prototype.toString = makeBuiltIn$2(function toString() {
   return isCallable$f(this) && getInternalState$3(this).source || inspectSource$2(this);
 }, 'toString');
 
+var makeBuiltInExports = makeBuiltIn$3.exports;
+
 var isCallable$e = isCallable$n;
 var definePropertyModule$2 = objectDefineProperty;
-var makeBuiltIn$1 = makeBuiltIn$3.exports;
+var makeBuiltIn$1 = makeBuiltInExports;
 var defineGlobalProperty$1 = defineGlobalProperty$3;
 
 var defineBuiltIn$8 = function (O, key, value, options) {
@@ -1306,6 +1311,8 @@ 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 = {};
@@ -1374,7 +1381,7 @@ const StatusTag = _a => {
       icon
     } = _a,
     props = __rest(_a, ["content", "color", "icon"]);
-  return /*#__PURE__*/React.createElement(Box, {
+  return jsxs(Box, Object.assign({
     display: "flex",
     alignItems: "center",
     textAlign: "center",
@@ -1382,17 +1389,23 @@ const StatusTag = _a => {
     className: "statusTag",
     position: "relative",
     sx: Object.assign(Object.assign({}, tagStyle(color)), props.sx)
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      position: 'absolute',
-      color: 'geowebColors.iconButtons.flat.default.color'
-    }
-  }, icon), /*#__PURE__*/React.createElement(Typography, {
-    sx: {
-      width: '100%'
-    },
-    variant: "caption"
-  }, content));
+  }, {
+    children: [jsx(Box, Object.assign({
+      sx: {
+        position: 'absolute',
+        color: 'geowebColors.iconButtons.flat.default.color'
+      }
+    }, {
+      children: icon
+    })), jsx(Typography, Object.assign({
+      sx: {
+        width: '100%'
+      },
+      variant: "caption"
+    }, {
+      children: content
+    }))]
+  }));
 };
 
 var wellKnownSymbol$h = wellKnownSymbol$j;
@@ -1443,7 +1456,7 @@ var toString$c = function (argument) {
   return $String$1(argument);
 };
 
-var makeBuiltIn = makeBuiltIn$3.exports;
+var makeBuiltIn = makeBuiltInExports;
 var defineProperty$4 = objectDefineProperty;
 
 var defineBuiltInAccessor$3 = function (target, name, descriptor) {
@@ -2069,7 +2082,7 @@ const useControlledTooltip = () => {
   return [delayedTooltip, setTooltipOpen];
 };
 const CustomTooltip = props => {
-  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, props, {
+  return jsx(Tooltip, Object.assign({}, props, {
     enterDelay: defaultDelay,
     enterNextDelay: defaultDelay,
     disableInteractive: true
@@ -2099,7 +2112,7 @@ const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
       }
     });
   }, [defaultTooltipProps, tooltipTitle]);
-  const renderIconButton = () => ( /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  const renderIconButton = () => jsx(IconButton, Object.assign({
     "aria-label": tooltipTitle
   }, props, {
     size: size,
@@ -2114,8 +2127,12 @@ const CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef((_a, ref) => {
         color: `geowebColors.iconButtons.${variant}.default.color`
       }
     })
-  }), children));
-  return tooltipTitle && !props.disabled ? ( /*#__PURE__*/React.createElement(CustomTooltip, Object.assign({}, tooltipProps), renderIconButton())) : renderIconButton();
+  }, {
+    children: children
+  }));
+  return tooltipTitle && !props.disabled ? jsx(CustomTooltip, Object.assign({}, tooltipProps, {
+    children: renderIconButton()
+  })) : renderIconButton();
 });
 const CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
 
@@ -2129,7 +2146,7 @@ const CustomDialog = _a => {
       sx
     } = _a,
     other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
-  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+  return jsxs(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
       sx: Object.assign({
@@ -2143,48 +2160,62 @@ const CustomDialog = _a => {
       onClose('CLOSED');
     },
     "aria-labelledby": "dialog-title"
-  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    id: "dialog-title",
-    sx: {
-      zIndex: 1,
-      padding: 2,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    sx: {
-      fontSize: '16px',
-      fontWeight: 500
-    },
-    "data-testid": "customDialog-title",
-    component: "span"
-  }, title), /*#__PURE__*/React.createElement(CustomIconButton, {
-    "data-testid": "customDialog-close",
-    "aria-label": "close",
-    onClick: () => onClose('CLOSED'),
-    sx: {
-      '&.MuiIconButton-root': {
-        color: 'geowebColors.greys.accessible'
+  }, other, {
+    children: [jsxs(DialogTitle, Object.assign({
+      id: "dialog-title",
+      sx: {
+        zIndex: 1,
+        padding: 2,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
       }
-    }
-  }, /*#__PURE__*/React.createElement(Close, {
-    "data-testid": "CloseIcon"
-  }))), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: {
-      padding: '8px 16px'
-    }
-  }, description && /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1"
-  }, description), children), /*#__PURE__*/React.createElement(DialogActions, {
-    sx: {
-      padding: 2,
-      flexDirection: {
-        xs: 'column',
-        sm: 'row'
+    }, {
+      children: [jsx(Typography, Object.assign({
+        sx: {
+          fontSize: '16px',
+          fontWeight: 500
+        },
+        "data-testid": "customDialog-title",
+        component: "span"
+      }, {
+        children: title
+      })), jsx(CustomIconButton, Object.assign({
+        "data-testid": "customDialog-close",
+        "aria-label": "close",
+        onClick: () => onClose('CLOSED'),
+        sx: {
+          '&.MuiIconButton-root': {
+            color: 'geowebColors.greys.accessible'
+          }
+        }
+      }, {
+        children: jsx(Close, {
+          "data-testid": "CloseIcon"
+        })
+      }))]
+    })), jsxs(DialogContent, Object.assign({
+      sx: {
+        padding: '8px 16px'
       }
-    }
-  }, actions));
+    }, {
+      children: [description && jsx(Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: description
+      })), children]
+    })), jsx(DialogActions, Object.assign({
+      sx: {
+        padding: 2,
+        flexDirection: {
+          xs: 'column',
+          sm: 'row'
+        }
+      }
+    }, {
+      children: actions
+    }))]
+  }));
 };
 
 const SHARED_NAMESPACE = 'shared';
@@ -2244,52 +2275,62 @@ const ConfirmationDialog = _a => {
     } = _a,
     other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
   const rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
-  return /*#__PURE__*/React.createElement(CustomDialog, Object.assign({
+  return jsx(CustomDialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
     title: title,
     description: description,
     onClose: onClose,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "confirmationDialog-cancel",
-      variant: "tertiary",
-      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-      sx: theme => ({
-        width: {
-          xs: '100%',
-          sm: '150px'
-        },
-        '&:focus': {
-          outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-          borderColor: 'transparent'
-        }
-      }),
-      onClick: () => onClose('CANCELLED')
-    }, cancelLabel), isLoading ? ( /*#__PURE__*/React.createElement(Box, {
-      "data-testid": "confirm-dialog-spinner",
-      sx: Object.assign(Object.assign({}, confirmStyle), {
-        height: '40px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      })
-    }, /*#__PURE__*/React.createElement(CircularProgress, {
-      size: 40,
-      color: "secondary"
-    }))) : ( /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "confirmationDialog-confirm",
-      variant: "primary",
-      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-      sx: theme => Object.assign(Object.assign({}, confirmStyle), {
-        '&:focus': {
-          outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-          borderColor: 'transparent'
-        }
-      }),
-      onClick: onSubmit,
-      autoFocus: !disableAutoFocus
-    }, confirmLabel)))
-  }, rest), content);
+    actions: jsxs(Fragment, {
+      children: [jsx(Button, Object.assign({
+        "data-testid": "confirmationDialog-cancel",
+        variant: "tertiary",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: theme => ({
+          width: {
+            xs: '100%',
+            sm: '150px'
+          },
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        }),
+        onClick: () => onClose('CANCELLED')
+      }, {
+        children: cancelLabel
+      })), isLoading ? jsx(Box, Object.assign({
+        "data-testid": "confirm-dialog-spinner",
+        sx: Object.assign(Object.assign({}, confirmStyle), {
+          height: '40px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        })
+      }, {
+        children: jsx(CircularProgress, {
+          size: 40,
+          color: "secondary"
+        })
+      })) : jsx(Button, Object.assign({
+        "data-testid": "confirmationDialog-confirm",
+        variant: "primary",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: theme => Object.assign(Object.assign({}, confirmStyle), {
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        }),
+        onClick: onSubmit,
+        autoFocus: !disableAutoFocus
+      }, {
+        children: confirmLabel
+      }))]
+    })
+  }, rest, {
+    children: content
+  }));
 };
 
 var global$d = global$p;
@@ -3659,52 +3700,38 @@ const ConfirmationServiceProvider = ({
     handleSubmit,
     handleClose
   } = useDialogActions(awaitingPromiseRef);
-  return /*#__PURE__*/React.createElement(ConfirmationServiceContext.Provider, {
+  return jsxs(ConfirmationServiceContext.Provider, Object.assign({
     value: openConfirmation
-  }, children, /*#__PURE__*/React.createElement(ConfirmationDialog, Object.assign({
-    open: Boolean(confirmationState),
-    onSubmit: handleSubmit,
-    onClose: handleClose
-  }, confirmationState)));
+  }, {
+    children: [children, jsx(ConfirmationDialog, Object.assign({
+      open: Boolean(confirmationState),
+      onSubmit: handleSubmit,
+      onClose: handleClose
+    }, confirmationState))]
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 const AlertIcon = ({
   severity: _severity = 'error',
   dataTestId: _dataTestId = 'alert-icon'
 }) => {
   switch (_severity) {
     case 'info':
-      return /*#__PURE__*/React.createElement(Info, {
+      return jsx(Info, {
         sx: {
           color: 'geowebColors.functional.notification'
         },
         "data-testid": _dataTestId
       });
     case 'success':
-      return /*#__PURE__*/React.createElement(Success, {
+      return jsx(Success, {
         sx: {
           color: 'geowebColors.functional.success'
         },
         "data-testid": _dataTestId
       });
     case 'warning':
-      return /*#__PURE__*/React.createElement(Exclamation, {
+      return jsx(Exclamation, {
         sx: {
           color: 'geowebColors.functional.warning'
         },
@@ -3712,7 +3739,7 @@ const AlertIcon = ({
       });
     case 'error':
     default:
-      return /*#__PURE__*/React.createElement(Exclamation, {
+      return jsx(Exclamation, {
         sx: {
           color: 'geowebColors.functional.error'
         },
@@ -3737,19 +3764,21 @@ const AlertBanner = ({
   if (!isOpen) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Alert, {
+  return jsxs(Alert, Object.assign({
     "data-testid": _dataTestId,
     severity: _severity,
-    icon: /*#__PURE__*/React.createElement(AlertIcon, {
+    icon: jsx(AlertIcon, {
       severity: _severity
     }),
-    action: _shouldClose ? ( /*#__PURE__*/React.createElement(Button, {
+    action: _shouldClose ? jsx(Button, Object.assign({
       variant: "flat",
       onClick: () => setIsOpen(false),
       sx: {
         backgroundColor: 'transparent!important'
       }
-    }, t('shared-close-caps'))) : undefined,
+    }, {
+      children: t('shared-close-caps')
+    })) : undefined,
     sx: _isCompact ? {
       height: '32px',
       boxSizing: 'border-box',
@@ -3778,69 +3807,65 @@ const AlertBanner = ({
         padding: 0
       }
     }
-  }, /*#__PURE__*/React.createElement(AlertTitle, {
-    sx: {
-      fontSize: '14px',
-      fontWeight: 'normal',
-      marginTop: '0px!important',
-      paddingTop: '0px!important',
-      marginBottom: '0px!important',
-      lineHeight: _isCompact ? '18px' : '24px'
-    }
-  }, title), _info && ( /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '16px',
-      marginTop: 1,
-      wordBreak: 'break-word',
-      lineHeight: '22px'
-    }
-  }, _info)), _actionButtonProps && ( /*#__PURE__*/React.createElement(Button, {
-    variant: "flat",
-    onClick: event => {
-      setIsOpen(false);
-      _actionButtonProps.onClick(event);
-    },
-    sx: {
-      backgroundColor: 'transparent!important'
-    },
-    startIcon: /*#__PURE__*/React.createElement(ChevronRight, null)
-  }, _actionButtonProps.title.toUpperCase())));
+  }, {
+    children: [jsx(AlertTitle, Object.assign({
+      sx: {
+        fontSize: '14px',
+        fontWeight: 'normal',
+        marginTop: '0px!important',
+        paddingTop: '0px!important',
+        marginBottom: '0px!important',
+        lineHeight: _isCompact ? '18px' : '24px'
+      }
+    }, {
+      children: title
+    })), _info && jsx(Box, Object.assign({
+      sx: {
+        fontSize: '16px',
+        marginTop: 1,
+        wordBreak: 'break-word',
+        lineHeight: '22px'
+      }
+    }, {
+      children: _info
+    })), _actionButtonProps && jsx(Button, Object.assign({
+      variant: "flat",
+      onClick: event => {
+        setIsOpen(false);
+        _actionButtonProps.onClick(event);
+      },
+      sx: {
+        backgroundColor: 'transparent!important'
+      },
+      startIcon: jsx(ChevronRight, {})
+    }, {
+      children: _actionButtonProps.title.toUpperCase()
+    }))]
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 const AppLayout = ({
   header,
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsxs(Box, Object.assign({
     sx: {
       height: '100vh',
       display: 'flex',
       flexDirection: 'column'
     },
     "data-testid": "appLayout"
-  }, header, /*#__PURE__*/React__default.createElement(Box, {
-    component: "main",
-    sx: {
-      flex: 1,
-      position: 'relative'
-    }
-  }, children));
+  }, {
+    children: [header, jsx(Box, Object.assign({
+      component: "main",
+      sx: {
+        flex: 1,
+        position: 'relative'
+      }
+    }, {
+      children: children
+    }))]
+  }));
 };
 
 const AppHeader = ({
@@ -3859,7 +3884,7 @@ const AppHeader = ({
     }
     toggleDrawer(false);
   };
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsxs(Box, Object.assign({
     component: "header",
     role: "heading",
     sx: {
@@ -3887,82 +3912,100 @@ const AppHeader = ({
         }
       }
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    onClick: onClick,
-    sx: {
-      display: 'inherit',
-      alignItems: 'center',
-      cursor: onClick ? 'pointer' : 'auto'
-    }
-  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
-    style: {
-      position: 'relative',
-      top: '-1px',
-      right: '-1px'
-    }
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h1",
-    sx: {
-      display: 'none',
-      fontSize: '20px',
-      fontWeight: 500,
-      fontStretch: 'normal',
-      fontStyle: 'normal',
-      lineHeight: 'normal',
-      letterSpacing: '0.15px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      color: 'geowebColors.typographyAndIcons.text',
-      marginLeft: 1,
-      maxWidth: 130
-    }
-  }, _title)), menu && ( /*#__PURE__*/React__default.createElement(Box, {
-    className: "hamburger-btn",
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      marginLeft: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "menuButton",
-    onClick: () => onToggleDrawer(true),
-    isSelected: isDrawerOpen
-  }, /*#__PURE__*/React__default.createElement(HamburgerMenu, null)), /*#__PURE__*/React__default.createElement(Drawer, {
-    "data-testid": "app-drawer",
-    anchor: "left",
-    open: isDrawerOpen,
-    onClose: () => onToggleDrawer(false),
-    onClick: () => onToggleDrawer(false),
-    onKeyDown: onKeyDown,
-    sx: {
-      '& .MuiDrawer-paper': {
-        top: '40px'
+  }, {
+    children: [jsxs(Box, Object.assign({
+      onClick: onClick,
+      sx: {
+        display: 'inherit',
+        alignItems: 'center',
+        cursor: onClick ? 'pointer' : 'auto'
       }
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    role: "presentation",
-    sx: {
-      width: '250px',
-      overflowY: 'auto'
-    }
-  }, menu)))), /*#__PURE__*/React__default.createElement(Box, {
-    className: "workspace-topbar",
-    sx: {
-      flexGrow: 1,
-      display: 'flex',
-      marginLeft: 1,
-      alignItems: 'center',
-      maxWidth: 168
-    }
-  }, workspaceTopBar), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      flexGrow: 1,
-      justifyContent: 'flex-end'
-    }
-  }, userMenu));
+    }, {
+      children: [jsx(GeoWebLogo, {
+        style: {
+          position: 'relative',
+          top: '-1px',
+          right: '-1px'
+        }
+      }), jsx(Typography, Object.assign({
+        variant: "h1",
+        sx: {
+          display: 'none',
+          fontSize: '20px',
+          fontWeight: 500,
+          fontStretch: 'normal',
+          fontStyle: 'normal',
+          lineHeight: 'normal',
+          letterSpacing: '0.15px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          color: 'geowebColors.typographyAndIcons.text',
+          marginLeft: 1,
+          maxWidth: 130
+        }
+      }, {
+        children: _title
+      }))]
+    })), menu && jsxs(Box, Object.assign({
+      className: "hamburger-btn",
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 1
+      }
+    }, {
+      children: [jsx(CustomIconButton, Object.assign({
+        "data-testid": "menuButton",
+        onClick: () => onToggleDrawer(true),
+        isSelected: isDrawerOpen
+      }, {
+        children: jsx(HamburgerMenu, {})
+      })), jsx(Drawer, Object.assign({
+        "data-testid": "app-drawer",
+        anchor: "left",
+        open: isDrawerOpen,
+        onClose: () => onToggleDrawer(false),
+        onClick: () => onToggleDrawer(false),
+        onKeyDown: onKeyDown,
+        sx: {
+          '& .MuiDrawer-paper': {
+            top: '40px'
+          }
+        }
+      }, {
+        children: jsx(Box, Object.assign({
+          role: "presentation",
+          sx: {
+            width: '250px',
+            overflowY: 'auto'
+          }
+        }, {
+          children: menu
+        }))
+      }))]
+    })), jsx(Box, Object.assign({
+      className: "workspace-topbar",
+      sx: {
+        flexGrow: 1,
+        display: 'flex',
+        marginLeft: 1,
+        alignItems: 'center',
+        maxWidth: 168
+      }
+    }, {
+      children: workspaceTopBar
+    })), jsx(Box, Object.assign({
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        flexGrow: 1,
+        justifyContent: 'flex-end'
+      }
+    }, {
+      children: userMenu
+    }))]
+  }));
 };
 
 const DraggableComponent$1 = _a => {
@@ -3975,12 +4018,14 @@ const DraggableComponent$1 = _a => {
     // This makes sure that nothing is selected during drag
     e.preventDefault();
   };
-  return /*#__PURE__*/React__default.createElement(Draggable, Object.assign({
+  return jsx(Draggable, Object.assign({
     bounds: bounds
   }, props, {
     enableUserSelectHack: false,
     onStart: onDragStart
-  }), children);
+  }, {
+    children: children
+  }));
 };
 
 var classof$3 = classofRaw$2;
@@ -4198,7 +4243,7 @@ const ResizeComponent = _a => {
     });
     onResizeStop(event, direction, node, delta);
   }, [setSize, onResizeStop, size]);
-  return /*#__PURE__*/React__default.createElement(Resizable
+  return jsx(Resizable
   // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
   , Object.assign({
     // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
@@ -4207,7 +4252,7 @@ const ResizeComponent = _a => {
     size: size,
     onResizeStop: onStopResize,
     handleComponent: {
-      bottomRight: ( /*#__PURE__*/React__default.createElement(Resize, {
+      bottomRight: jsx(Resize, {
         style: {
           fill: `${theme.palette.geowebColors.buttons.flat.default.color}`
         },
@@ -4215,8 +4260,8 @@ const ResizeComponent = _a => {
           display: 'none'
         },
         className: "resizableHandle"
-      })),
-      bottomLeft: ( /*#__PURE__*/React__default.createElement(Resize, {
+      }),
+      bottomLeft: jsx(Resize, {
         isRightAligned: true,
         style: {
           fill: `${theme.palette.geowebColors.buttons.flat.default.color}`
@@ -4225,7 +4270,7 @@ const ResizeComponent = _a => {
           display: 'none'
         },
         className: "resizableHandle"
-      }))
+      })
     },
     enable: {
       top: false,
@@ -4238,7 +4283,9 @@ const ResizeComponent = _a => {
       topLeft: true
     },
     onResizeStart: onStartResize
-  }, props), children);
+  }, props, {
+    children: children
+  }));
 };
 
 var defineProperty = objectDefineProperty.f;
@@ -4588,18 +4635,24 @@ class ErrorBoundary extends React.Component {
       overflowY: 'scroll'
     };
     if (error) {
-      return /*#__PURE__*/React.createElement(Box, {
+      return jsx(Box, Object.assign({
         sx: displayOnTop ? displayOnTopStyles : normalStyles
-      }, /*#__PURE__*/React.createElement(AlertBanner, {
-        severity: "error",
-        title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
-        info: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), error.toString(), /*#__PURE__*/React.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
-          underline: "always",
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: () => window.location.reload()
-        }, reloadPage))
+      }, {
+        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({
+              underline: "always",
+              style: {
+                cursor: 'pointer'
+              },
+              onClick: () => window.location.reload()
+            }, {
+              children: reloadPage
+            }))]
+          })
+        })
       }));
     }
     return children;
@@ -4621,10 +4674,12 @@ const Avatar = ({
   children,
   size: _size = 'large'
 }) => {
-  return /*#__PURE__*/React.createElement(Avatar$1, {
+  return jsx(Avatar$1, Object.assign({
     "data-testid": "avatar",
     sx: Object.assign({}, styles$5[_size])
-  }, children);
+  }, {
+    children: children
+  }));
 };
 
 const styles$4 = {
@@ -4655,52 +4710,50 @@ const UserMenu = ({
   initials,
   isAdmin: _isAdmin = false
 }) => {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "userButton",
-    onClick: _onToggle,
-    sx: {
-      '&.MuiButtonBase-root': Object.assign({
-        background: 'transparent',
-        '&:hover': {
-          border: 'none',
-          background: 'transparent'
-        }
-      }, _isAdmin && {
-        svg: {
-          width: 32,
-          height: 32
-        }
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, Object.assign({
+      "data-testid": "userButton",
+      onClick: _onToggle,
+      sx: {
+        '&.MuiButtonBase-root': Object.assign({
+          background: 'transparent',
+          '&:hover': {
+            border: 'none',
+            background: 'transparent'
+          }
+        }, _isAdmin && {
+          svg: {
+            width: 32,
+            height: 32
+          }
+        })
+      },
+      size: "medium"
+    }, {
+      children: !_isAdmin ? jsx(Avatar, {
+        children: initials
+      }) : jsx(Admin, {
+        children: initials
       })
-    },
-    size: "medium"
-  }, !_isAdmin ? /*#__PURE__*/React__default.createElement(Avatar, null, initials) : /*#__PURE__*/React__default.createElement(Admin, null, initials)), _isOpen && ( /*#__PURE__*/React__default.createElement(Paper, {
-    sx: styles$4.container,
-    "data-testid": "userMenu"
-  }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
-    onClickAway: _onClose,
-    mouseEvent: "onMouseDown"
-  }, /*#__PURE__*/React__default.createElement(MenuList, {
-    sx: styles$4.userMenu,
-    variant: "menu"
-  }, children)))));
+    })), _isOpen && jsx(Paper, Object.assign({
+      sx: styles$4.container,
+      "data-testid": "userMenu"
+    }, {
+      children: jsx(ClickAwayListener, Object.assign({
+        onClickAway: _onClose,
+        mouseEvent: "onMouseDown"
+      }, {
+        children: jsx(MenuList, Object.assign({
+          sx: styles$4.userMenu,
+          variant: "menu"
+        }, {
+          children: children
+        }))
+      }))
+    }))]
+  });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 const MenuItemTheme = () => {
   const {
     isDark,
@@ -4709,50 +4762,44 @@ const MenuItemTheme = () => {
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return /*#__PURE__*/React__default.createElement(MenuItem, {
+  return jsx(MenuItem, Object.assign({
     divider: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, t('shared-choose-app-mode')), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(RadioGroup, {
-    onChange: toggleTheme
-  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
-    value: true,
-    control: /*#__PURE__*/React__default.createElement(Radio, {
-      checked: !isDark
-    }),
-    label: "Light"
-  }), /*#__PURE__*/React__default.createElement(FormControlLabel, {
-    value: false,
-    control: /*#__PURE__*/React__default.createElement(Radio, {
-      checked: isDark
-    }),
-    label: "Dark"
-  })))));
+  }, {
+    children: jsxs(Grid, Object.assign({
+      container: true
+    }, {
+      children: [jsx(Grid, Object.assign({
+        item: true
+      }, {
+        children: t('shared-choose-app-mode')
+      })), jsx(Grid, Object.assign({
+        item: true
+      }, {
+        children: jsxs(RadioGroup, Object.assign({
+          onChange: toggleTheme
+        }, {
+          children: [jsx(FormControlLabel, {
+            value: true,
+            control: jsx(Radio, {
+              checked: !isDark
+            }),
+            label: "Light"
+          }), jsx(FormControlLabel, {
+            value: false,
+            control: jsx(Radio, {
+              checked: isDark
+            }),
+            label: "Dark"
+          })]
+        }))
+      }))]
+    }))
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 // drag handles will be handled by DraggableResizable/Resizable
 const ToolFooter = () => {
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsx(Box, {
     component: "footer",
     sx: {
       boxShadow: 1,
@@ -4834,8 +4881,8 @@ const ToolHeader = ({
   className: _className = '',
   leftHeaderComponent: _leftHeaderComponent = null,
   rightHeaderComponent: _rightHeaderComponent = null,
-  dragHandleIcon: _dragHandleIcon = /*#__PURE__*/React__default.createElement(DragHandle, null),
-  closeIcon: _closeIcon = /*#__PURE__*/React__default.createElement(Close, {
+  dragHandleIcon: _dragHandleIcon = jsx(DragHandle, {}),
+  closeIcon: _closeIcon = jsx(Close, {
     "data-testid": "CloseIcon"
   })
 }) => {
@@ -4846,7 +4893,7 @@ const ToolHeader = ({
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsx(Box, Object.assign({
     component: "header",
     className: _className,
     sx: Object.assign(Object.assign({}, _rightHeaderComponent ? headerStyle : {}), {
@@ -4857,78 +4904,102 @@ const ToolHeader = ({
     }),
     role: "heading",
     "aria-label": "toolheader"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    sx: {
-      padding: styles.padding,
-      height: styles.height
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    className: "header-left",
-    item: true,
-    xs: columnSizeLeft,
-    sx: {
-      paddingRight: 1
-    }
-  }, _isDraggable && size !== 'xxs' && !_leftHeaderComponent && ( /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "dragBtn",
-    disableRipple: true,
-    sx: {
-      pointerEvents: 'none',
-      '&.MuiIconButton-root': iconStyle
-    }
-  }, _dragHandleIcon))), _leftHeaderComponent && _leftHeaderComponent), /*#__PURE__*/React__default.createElement(Grid, {
-    className: "header-title",
-    item: true,
-    xs: title ? columnSizeTitle : 0
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "center",
-    alignItems: "center"
-  }, title && ( /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h2",
-    noWrap: true,
-    sx: {
-      fontSize: styles.fontSize,
-      fontWeight: styles.fontWeight,
-      lineHeight: styles.lineHeight,
-      marginTop: styles.marginTop
-    },
-    role: "heading"
-  }, title)), size === 'xxs' && ( /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "dragBtn-xxs",
-    disableRipple: true,
-    sx: {
-      pointerEvents: 'none',
-      transform: 'rotate(90deg)',
-      '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
-        height: 12
-      })
-    }
-  }, _dragHandleIcon)))), /*#__PURE__*/React__default.createElement(Grid, {
-    className: "header-right",
-    item: true,
-    xs: columnSizeIcon,
-    container: true,
-    justifyContent: "flex-end"
-  }, _rightHeaderComponent && _rightHeaderComponent, _onClose && ( /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: t('shared-close'),
-    placement: "bottom",
-    sx: {
-      pointerEvents: 'none'
-    }
-  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "closeBtn",
-    onClick: _onClose,
-    onTouchEnd: _onClose,
-    sx: {
-      '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
-    }
-  }, _closeIcon))))));
+  }, {
+    children: jsxs(Grid, Object.assign({
+      container: true,
+      alignItems: "center",
+      sx: {
+        padding: styles.padding,
+        height: styles.height
+      }
+    }, {
+      children: [jsxs(Grid, Object.assign({
+        className: "header-left",
+        item: true,
+        xs: columnSizeLeft,
+        sx: {
+          paddingRight: 1
+        }
+      }, {
+        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid, Object.assign({
+          container: true,
+          justifyContent: "flex-start"
+        }, {
+          children: jsx(CustomIconButton, Object.assign({
+            "data-testid": "dragBtn",
+            disableRipple: true,
+            sx: {
+              pointerEvents: 'none',
+              '&.MuiIconButton-root': iconStyle
+            }
+          }, {
+            children: _dragHandleIcon
+          }))
+        })), _leftHeaderComponent && _leftHeaderComponent]
+      })), jsx(Grid, Object.assign({
+        className: "header-title",
+        item: true,
+        xs: title ? columnSizeTitle : 0
+      }, {
+        children: jsxs(Grid, Object.assign({
+          container: true,
+          justifyContent: "center",
+          alignItems: "center"
+        }, {
+          children: [title && jsx(Typography, Object.assign({
+            variant: "h2",
+            noWrap: true,
+            sx: {
+              fontSize: styles.fontSize,
+              fontWeight: styles.fontWeight,
+              lineHeight: styles.lineHeight,
+              marginTop: styles.marginTop
+            },
+            role: "heading"
+          }, {
+            children: title
+          })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
+            "data-testid": "dragBtn-xxs",
+            disableRipple: true,
+            sx: {
+              pointerEvents: 'none',
+              transform: 'rotate(90deg)',
+              '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
+                height: 12
+              })
+            }
+          }, {
+            children: _dragHandleIcon
+          }))]
+        }))
+      })), jsxs(Grid, Object.assign({
+        className: "header-right",
+        item: true,
+        xs: columnSizeIcon,
+        container: true,
+        justifyContent: "flex-end"
+      }, {
+        children: [_rightHeaderComponent && _rightHeaderComponent, _onClose && jsx(CustomTooltip, Object.assign({
+          title: t('shared-close'),
+          placement: "bottom",
+          sx: {
+            pointerEvents: 'none'
+          }
+        }, {
+          children: jsx(CustomIconButton, Object.assign({
+            "data-testid": "closeBtn",
+            onClick: _onClose,
+            onTouchEnd: _onClose,
+            sx: {
+              '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
+            }
+          }, {
+            children: _closeIcon
+          }))
+        }))]
+      }))]
+    }))
+  }));
 };
 
 const styles$3 = {
@@ -4964,25 +5035,31 @@ const ToolContainer = _a => {
       closeIcon
     } = _a,
     props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
-  return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
+  return jsxs(Paper, Object.assign({
     elevation: elevation,
     sx: styles$3.container
-  }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
-    title: title,
-    size: size,
-    isDraggable: isDraggable,
-    onClose: onClose,
-    className: headerClassName,
-    leftHeaderComponent: leftHeaderComponent,
-    rightHeaderComponent: rightHeaderComponent,
-    dragHandleIcon: dragHandleIcon,
-    closeIcon: closeIcon
-  })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles$3.content,
-    style: {
-      maxHeight
-    }
-  }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
+  }, props, {
+    children: [jsx(ErrorBoundary, {
+      children: jsx(ToolHeader, {
+        title: title,
+        size: size,
+        isDraggable: isDraggable,
+        onClose: onClose,
+        className: headerClassName,
+        leftHeaderComponent: leftHeaderComponent,
+        rightHeaderComponent: rightHeaderComponent,
+        dragHandleIcon: dragHandleIcon,
+        closeIcon: closeIcon
+      })
+    }), jsx(Box, Object.assign({
+      sx: styles$3.content,
+      style: {
+        maxHeight
+      }
+    }, {
+      children: children
+    })), isResizable && jsx(ToolFooter, {})]
+  }));
 };
 
 const getRightPositionAndSize = ({
@@ -5183,8 +5260,6 @@ const DraggableComponent = _a => {
       onMouseDown = () => {},
       onResizeStop = () => {},
       onDragEnd = () => {},
-      onFocus = () => {},
-      onBlur = () => {},
       order = 1,
       source = 'app',
       leftHeaderComponent = null,
@@ -5194,7 +5269,7 @@ const DraggableComponent = _a => {
       className,
       sx = {}
     } = _a,
-    props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"]);
+    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"]);
   const zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   const elevation = BASE_ELEVATION + order;
   const nodeRef = React__default.useRef(null);
@@ -5243,7 +5318,7 @@ const DraggableComponent = _a => {
   });
   const toolcontainerId = React__default.useRef(Date.now().toString()).current;
   const headerClassName = `header-${className || toolcontainerId}`;
-  return isOpen ? ( /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
+  return isOpen ? jsx(DraggableComponent$1, Object.assign({
     nodeRef: nodeRef,
     bounds: bounds,
     cancel: cancel,
@@ -5251,44 +5326,50 @@ const DraggableComponent = _a => {
     onStop: onStopDrag,
     handle: `.${headerClassName}`,
     onMouseDown: onMouseDown
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    tabIndex: -1,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    sx: Object.assign(Object.assign(Object.assign({
-      position: 'absolute',
-      pointerEvents: 'all',
-      zIndex
-    }, startPosition), sx), {
-      '&:hover .resizableHandle': {
-        display: 'inline'
-      }
-    }),
-    ref: nodeRef,
-    className: "toolContainerDraggable",
-    role: "dialog",
-    "aria-label": title
-  }, /*#__PURE__*/React__default.createElement(ResizeComponent, Object.assign({}, props, {
-    size: size,
-    setSize: setSize,
-    onResizeStart: onStartResize,
-    onResizeStop: onStopResize,
-    onResize: onResize
-  }), /*#__PURE__*/React__default.createElement(ToolContainer, {
-    maxHeight: initialMaxHeight,
-    onClose: onClose,
-    title: title,
-    size: headerSize,
-    isDraggable: true,
-    isResizable: true,
-    elevation: elevation,
-    headerClassName: headerClassName,
-    leftHeaderComponent: leftHeaderComponent,
-    rightHeaderComponent: rightHeaderComponent,
-    dragHandleIcon: dragHandleIcon,
-    closeIcon: closeIcon,
-    className: className
-  }, children))))) : null;
+  }, {
+    children: jsx(Box, Object.assign({
+      tabIndex: -1,
+      sx: Object.assign(Object.assign(Object.assign({
+        position: 'absolute',
+        pointerEvents: 'all',
+        zIndex
+      }, startPosition), sx), {
+        '&:hover .resizableHandle': {
+          display: 'inline'
+        }
+      }),
+      ref: nodeRef,
+      className: "toolContainerDraggable",
+      role: "dialog",
+      "aria-label": title
+    }, {
+      children: jsx(ResizeComponent, Object.assign({}, props, {
+        size: size,
+        setSize: setSize,
+        onResizeStart: onStartResize,
+        onResizeStop: onStopResize,
+        onResize: onResize
+      }, {
+        children: jsx(ToolContainer, Object.assign({
+          maxHeight: initialMaxHeight,
+          onClose: onClose,
+          title: title,
+          size: headerSize,
+          isDraggable: true,
+          isResizable: true,
+          elevation: elevation,
+          headerClassName: headerClassName,
+          leftHeaderComponent: leftHeaderComponent,
+          rightHeaderComponent: rightHeaderComponent,
+          dragHandleIcon: dragHandleIcon,
+          closeIcon: closeIcon,
+          className: className
+        }, {
+          children: children
+        }))
+      }))
+    }))
+  })) : null;
 };
 
 const segmentStyle = {
@@ -5321,31 +5402,39 @@ const ShortCutSegment = ({
   children
 }) => {
   if (_type === 'divider') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
+    return jsx(Typography, Object.assign({
       sx: styles$2.divider,
       "data-testid": "segment-divider",
       component: "span"
-    }, children);
+    }, {
+      children: children
+    }));
   }
   if (_type === 'icon') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
+    return jsx(Typography, Object.assign({
       sx: styles$2.icon,
       "data-testid": "segment-icon",
       component: "span"
-    }, children);
+    }, {
+      children: children
+    }));
   }
   if (_type === 'connect') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
+    return jsx(Typography, Object.assign({
       sx: styles$2.connect,
       "data-testid": "segment-connect",
       component: "span"
-    }, children);
+    }, {
+      children: children
+    }));
   }
-  return /*#__PURE__*/React__default.createElement(Typography, {
+  return jsx(Typography, Object.assign({
     sx: segmentStyle,
     "data-testid": "segment-text",
     component: "span"
-  }, children);
+  }, {
+    children: children
+  }));
 };
 
 const ShortcutList = ({
@@ -5356,211 +5445,414 @@ const ShortcutList = ({
   } = useTranslation();
   const shortcuts = [{
     titleKey: 'shared-choose-selected-time',
-    description: ( /*#__PURE__*/React__default.createElement(ShortCutSegment, null, t('shared-shortcut-left-click')))
+    description: jsx(ShortCutSegment, {
+      children: t('shared-shortcut-left-click')
+    })
   }, {
     titleKey: 'shared-move-selected-time',
-    description: ( /*#__PURE__*/React__default.createElement(ShortCutSegment, null, t('shared-shortcut-mouse-scroll-timeslider')))
+    description: jsx(ShortCutSegment, {
+      children: t('shared-shortcut-mouse-scroll-timeslider')
+    })
   }, {
     titleKey: 'shared-move-one-step',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "divider"
-    }, t('shared-shortcut-or')), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowRight, null)))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "divider"
-    }, t('shared-shortcut-or')), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowRight, null))))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowLeft, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "divider"
+      }, {
+        children: t('shared-shortcut-or')
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowRight, {})
+      }))]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyOption, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowLeft, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "divider"
+      }, {
+        children: t('shared-shortcut-or')
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowRight, {})
+      }))]
+    })
   }, {
     titleKey: 'shared-toggle-timeslider',
-    description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    description: jsx(ShortCutSegment, Object.assign({
       type: "icon"
-    }, "T")
+    }, {
+      children: "T"
+    }))
   }, {
     titleKey: 'shared-timeslider-scale',
-    description: ( /*#__PURE__*/React__default.createElement(ShortCutSegment, null, t('shared-shortcut-hold-click')))
+    description: jsx(ShortCutSegment, {
+      children: t('shared-shortcut-hold-click')
+    })
   }, {
     titleKey: 'shared-expand-timeslider-scale',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, t('shared-shortcut-scroll'))))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: t('shared-shortcut-scroll')
+      })]
+    })
   }, {
     titleKey: 'shared-mouseover-selected-time',
-    description: ( /*#__PURE__*/React__default.createElement(ShortCutSegment, null, t('shared-shortcut-hover')))
+    description: jsx(ShortCutSegment, {
+      children: t('shared-shortcut-hover')
+    })
   }, {
     titleKey: 'shared-mouseover-on-off',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Alt"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "h"))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "h")))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Alt"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "h"
+      }))]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyOption, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "h"
+      }))]
+    })
   }, {
     titleKey: 'shared-change-timestep-or-speed',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "divider"
-    }, t('shared-shortcut-or')), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(", t('shared-shortcut-when-active'), ")"))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyCommand, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "divider"
-    }, t('shared-shortcut-or')), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(", t('shared-shortcut-when-active'), ")")))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowUp, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "divider"
+      }, {
+        children: t('shared-shortcut-or')
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowDown, {})
+      })), jsxs(ShortCutSegment, {
+        children: ["(", t('shared-shortcut-when-active'), ")"]
+      })]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyCommand, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowUp, {})
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "divider"
+      }, {
+        children: t('shared-shortcut-or')
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowDown, {})
+      })), jsxs(ShortCutSegment, {
+        children: ["(", t('shared-shortcut-when-active'), ")"]
+      })]
+    })
   }, {
     titleKey: 'shared-return-to-current-time',
-    description: ( /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, t('shared-shortcut-home'))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "fn"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "connect"
-    }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    description: jsx(ShortCutSegment, Object.assign({
       type: "icon"
-    }, /*#__PURE__*/React__default.createElement(ArrowLeft, null))))
+    }, {
+      children: t('shared-shortcut-home')
+    })),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "fn"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "connect"
+      }, {
+        children: "+"
+      })), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(ArrowLeft, {})
+      }))]
+    })
   }, {
     titleKey: 'shared-change-layer-values-scrolling',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, ' ', t('shared-shortcut-mouse-scroll')))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyCommand, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, ' ', t('shared-shortcut-mouse-scroll'))))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsxs(ShortCutSegment, {
+        children: [' ', t('shared-shortcut-mouse-scroll')]
+      })]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyCommand, {})
+      })), jsxs(ShortCutSegment, {
+        children: [' ', t('shared-shortcut-mouse-scroll')]
+      })]
+    })
   }, {
     titleKey: 'shared-change-layermanager-small',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Alt"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "s"))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "s")))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Alt"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "s"
+      }))]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyOption, {})
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "s"
+      }))]
+    })
   }, {
     titleKey: 'shared-change-layermanager-medium',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Alt"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "m"))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "m")))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Alt"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "m"
+      }))]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyOption, {})
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "m"
+      }))]
+    })
   }, {
     titleKey: 'shared-change-layermanager-large',
-    description: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Alt"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "l"))),
-    descriptionMac: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + "), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-      type: "icon"
-    }, "l")))
+    description: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Alt"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "l"
+      }))]
+    }),
+    descriptionMac: jsxs(Fragment, {
+      children: [jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "Ctrl"
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: jsx(KeyOption, {})
+      })), jsx(ShortCutSegment, {
+        children: " + "
+      }), jsx(ShortCutSegment, Object.assign({
+        type: "icon"
+      }, {
+        children: "l"
+      }))]
+    })
   }];
-  return /*#__PURE__*/React__default.createElement(List, {
+  return jsx(List, Object.assign({
     "data-testid": `list-${_platform}`
-  }, shortcuts.map((shortcut, index) => ( /*#__PURE__*/React__default.createElement(ListItem, {
-    sx: {
-      minHeight: 56
-    },
-    divider: index !== shortcuts.length - 1,
-    key: shortcut.titleKey
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    sx: {
-      fontSize: 12,
-      fontWeight: 300,
-      letterSpacing: 0.4,
-      opacity: 0.67
-    }
-  }, t(shortcut.titleKey)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description)))))));
+  }, {
+    children: shortcuts.map((shortcut, index) => jsx(ListItem, Object.assign({
+      sx: {
+        minHeight: 56
+      },
+      divider: index !== shortcuts.length - 1
+    }, {
+      children: jsxs(Grid, Object.assign({
+        container: true,
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, {
+        children: [jsx(Grid, Object.assign({
+          item: true,
+          sx: {
+            fontSize: 12,
+            fontWeight: 300,
+            letterSpacing: 0.4,
+            opacity: 0.67
+          }
+        }, {
+          children: t(shortcut.titleKey)
+        })), jsx(Grid, Object.assign({
+          item: true
+        }, {
+          children: jsx(Box, Object.assign({
+            sx: {
+              alignItems: 'center'
+            }
+          }, {
+            children: _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description
+          }))
+        }))]
+      }))
+    }), shortcut.titleKey))
+  }));
 };
 
 const TabPanel = ({
   children,
   value,
   index
-}) => ( /*#__PURE__*/React__default.createElement("div", {
+}) => jsx("div", Object.assign({
   role: "tabpanel",
   hidden: value !== index,
   id: `tabpanel-${index}`,
   "aria-labelledby": `tab-${index}`
-}, value === index && children));
+}, {
+  children: value === index && children
+}));
 const styles$1 = {
   container: {
     margin: '0px 20px',
@@ -5575,27 +5867,35 @@ const CheatSheet = () => {
   const onChangeTab = (_event, newValue) => {
     onChangeActiveTab(newValue);
   };
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsxs(Box, Object.assign({
     sx: styles$1.container
-  }, /*#__PURE__*/React__default.createElement(Tabs, {
-    value: activeTab,
-    onChange: onChangeTab,
-    "aria-label": "platform"
-  }, /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles$1.tab,
-    label: "Windows"
-  }), /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles$1.tab,
-    label: "Mac"
-  })), /*#__PURE__*/React__default.createElement(TabPanel, {
-    value: activeTab,
-    index: 0
-  }, /*#__PURE__*/React__default.createElement(ShortcutList, null)), /*#__PURE__*/React__default.createElement(TabPanel, {
-    value: activeTab,
-    index: 1
-  }, /*#__PURE__*/React__default.createElement(ShortcutList, {
-    platform: "mac"
-  })));
+  }, {
+    children: [jsxs(Tabs, Object.assign({
+      value: activeTab,
+      onChange: onChangeTab,
+      "aria-label": "platform"
+    }, {
+      children: [jsx(Tab, {
+        sx: styles$1.tab,
+        label: "Windows"
+      }), jsx(Tab, {
+        sx: styles$1.tab,
+        label: "Mac"
+      })]
+    })), jsx(TabPanel, Object.assign({
+      value: activeTab,
+      index: 0
+    }, {
+      children: jsx(ShortcutList, {})
+    })), jsx(TabPanel, Object.assign({
+      value: activeTab,
+      index: 1
+    }, {
+      children: jsx(ShortcutList, {
+        platform: "mac"
+      })
+    }))]
+  }));
 };
 
 const UserMenuItemCheatSheet = () => {
@@ -5609,31 +5909,43 @@ const UserMenuItemCheatSheet = () => {
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem, {
-    "data-testid": "cheatsheet-btn",
-    onClick: onOpen,
-    divider: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, t('shared-cheat-sheet')))), /*#__PURE__*/React__default.createElement(Backdrop, {
-    "data-testid": "cheatsheet-content",
-    open: open,
-    sx: {
-      zIndex: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(DraggableComponent, {
-    startSize: {
-      width: 700
-    },
-    minHeight: 300,
-    minWidth: 500,
-    title: t('shared-cheat-sheet'),
-    isOpen: true,
-    onClose: onClose,
-    bounds: "parent"
-  }, /*#__PURE__*/React__default.createElement(CheatSheet, null))));
+  return jsxs(Fragment, {
+    children: [jsx(MenuItem, Object.assign({
+      "data-testid": "cheatsheet-btn",
+      onClick: onOpen,
+      divider: true
+    }, {
+      children: jsx(Grid, Object.assign({
+        container: true
+      }, {
+        children: jsx(Grid, Object.assign({
+          item: true
+        }, {
+          children: t('shared-cheat-sheet')
+        }))
+      }))
+    })), jsx(Backdrop, Object.assign({
+      "data-testid": "cheatsheet-content",
+      open: open,
+      sx: {
+        zIndex: 1
+      }
+    }, {
+      children: jsx(DraggableComponent, Object.assign({
+        startSize: {
+          width: 700
+        },
+        minHeight: 300,
+        minWidth: 500,
+        title: t('shared-cheat-sheet'),
+        isOpen: true,
+        onClose: onClose,
+        bounds: "parent"
+      }, {
+        children: jsx(CheatSheet, {})
+      }))
+    }))]
+  });
 };
 
 const UserMenuItemSentryRecording = ({
@@ -5695,88 +6007,130 @@ const UserMenuItemSentryRecording = ({
       console.log(error);
     }
   });
-  return /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(MenuItem, {
-    "data-testid": "sentryRecording-btn",
-    onClick: onOpen,
-    divider: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, t('shared-sentry-recording')))), /*#__PURE__*/React__default.createElement(Backdrop, {
-    "data-testid": "sentryRecording-content",
-    open: open,
-    sx: {
-      zIndex: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(DraggableComponent, {
-    startSize: {
-      width: 700
-    },
-    minHeight: 300,
-    minWidth: 500,
-    title: "Sentry Recording",
-    isOpen: true,
-    onClose: onClose,
-    bounds: "parent"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    spacing: 4,
-    sx: {
-      paddingLeft: '70px',
-      paddingRight: '70px'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    justifyContent: "center",
-    sx: {
-      textAlign: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, null, t('shared-sentry-information'))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    justifyContent: "center",
-    sx: {
-      textAlign: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, null, t('shared-sentry-enable-message'))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    alignItems: "center",
-    direction: "column"
-  }, /*#__PURE__*/React__default.createElement(Switch, {
-    checked: recordButtonEnabled && !canvasIntegrationEnabled,
-    onChange: enableHTMLRecording,
-    disabled: htmlRecordingEnabled
-  }), recordButtonEnabled && !canvasIntegrationEnabled ? ( /*#__PURE__*/React__default.createElement(Typography, null, " ", t('shared-sentry-disable'))) : ( /*#__PURE__*/React__default.createElement(Typography, null, " ", t('shared-sentry-enable')))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    alignItems: "center",
-    direction: "column"
-  }, /*#__PURE__*/React__default.createElement(Switch, {
-    disabled: true,
-    checked: canvasIntegrationEnabled,
-    onChange: enableHTMLAndCanvasRecording
-  }), canvasIntegrationEnabled ? ( /*#__PURE__*/React__default.createElement(Typography, null, t('shared-sentry-disable-both'))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      color: 'gray'
-    }
-  }, t('shared-sentry-enable-both')), /*#__PURE__*/React__default.createElement(Typography, {
-    textAlign: "center",
-    sx: {
-      color: 'gray'
-    }
-  }, "(", t('shared-sentry-cors-wait'), ")")))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      paddingTop: '20px',
-      textAlign: 'center'
-    }
-  }, ' ', t('shared-sentry-disclaimer')))))));
+  return jsxs(ErrorBoundary, {
+    children: [jsx(MenuItem, Object.assign({
+      "data-testid": "sentryRecording-btn",
+      onClick: onOpen,
+      divider: true
+    }, {
+      children: jsx(Grid, Object.assign({
+        container: true
+      }, {
+        children: jsx(Grid, Object.assign({
+          item: true
+        }, {
+          children: t('shared-sentry-recording')
+        }))
+      }))
+    })), jsx(Backdrop, Object.assign({
+      "data-testid": "sentryRecording-content",
+      open: open,
+      sx: {
+        zIndex: 1
+      }
+    }, {
+      children: jsx(DraggableComponent, Object.assign({
+        startSize: {
+          width: 700
+        },
+        minHeight: 300,
+        minWidth: 500,
+        title: "Sentry Recording",
+        isOpen: true,
+        onClose: onClose,
+        bounds: "parent"
+      }, {
+        children: jsxs(Grid, Object.assign({
+          container: true,
+          spacing: 4,
+          sx: {
+            paddingLeft: '70px',
+            paddingRight: '70px'
+          }
+        }, {
+          children: [jsx(Grid, Object.assign({
+            container: true,
+            item: true,
+            justifyContent: "center",
+            sx: {
+              textAlign: 'center'
+            }
+          }, {
+            children: jsx(Typography, {
+              children: t('shared-sentry-information')
+            })
+          })), jsx(Grid, Object.assign({
+            container: true,
+            item: true,
+            justifyContent: "center",
+            sx: {
+              textAlign: 'center'
+            }
+          }, {
+            children: jsx(Typography, {
+              children: t('shared-sentry-enable-message')
+            })
+          })), jsxs(Grid, Object.assign({
+            container: true,
+            item: true,
+            alignItems: "center",
+            direction: "column"
+          }, {
+            children: [jsx(Switch, {
+              checked: recordButtonEnabled && !canvasIntegrationEnabled,
+              onChange: enableHTMLRecording,
+              disabled: htmlRecordingEnabled
+            }), recordButtonEnabled && !canvasIntegrationEnabled ? jsxs(Typography, {
+              children: [" ", t('shared-sentry-disable')]
+            }) : jsxs(Typography, {
+              children: [" ", t('shared-sentry-enable')]
+            })]
+          })), jsxs(Grid, Object.assign({
+            container: true,
+            item: true,
+            alignItems: "center",
+            direction: "column"
+          }, {
+            children: [jsx(Switch, {
+              disabled: true,
+              checked: canvasIntegrationEnabled,
+              onChange: enableHTMLAndCanvasRecording
+            }), canvasIntegrationEnabled ? jsx(Typography, {
+              children: t('shared-sentry-disable-both')
+            }) : jsxs(Fragment, {
+              children: [jsx(Typography, Object.assign({
+                sx: {
+                  color: 'gray'
+                }
+              }, {
+                children: t('shared-sentry-enable-both')
+              })), jsxs(Typography, Object.assign({
+                textAlign: "center",
+                sx: {
+                  color: 'gray'
+                }
+              }, {
+                children: ["(", t('shared-sentry-cors-wait'), ")"]
+              }))]
+            })]
+          })), jsx(Grid, Object.assign({
+            container: true,
+            item: true,
+            justifyContent: "center"
+          }, {
+            children: jsxs(Typography, Object.assign({
+              sx: {
+                paddingTop: '20px',
+                textAlign: 'center'
+              }
+            }, {
+              children: [' ', t('shared-sentry-disclaimer')]
+            }))
+          }))]
+        }))
+      }))
+    }))]
+  });
 };
 
 const useUserMenu = (open = false) => {
@@ -5920,7 +6274,7 @@ const CustomSlider = _a => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(Slider, Object.assign({
+  return jsx(Slider, Object.assign({
     sx: sliderStyle,
     ref: element,
     value: value,
@@ -5945,7 +6299,7 @@ const CustomToggleButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
       value = 0
     } = _a,
     props = __rest(_a, ["variant", "className", "value"]);
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+  return jsx(ToggleButton, Object.assign({
     ref: ref,
     className: `${variant} ${className}`,
     value: value
@@ -6001,7 +6355,7 @@ const ToggleMenu = ({
   menuTitle: _menuTitle = '',
   variant: _variant = 'tool',
   isDefaultOpen: _isDefaultOpen = false,
-  buttonIcon: _buttonIcon = /*#__PURE__*/React.createElement(Options, null),
+  buttonIcon: _buttonIcon = jsx(Options, {}),
   isDisabled: _isDisabled = false
 }) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -6023,79 +6377,100 @@ const ToggleMenu = ({
       setAnchorEl(document.getElementById(_buttonTestId));
     }
   }, [_isDefaultOpen, _buttonTestId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
-    tooltipProps: {
-      placement: 'top',
-      title: _tooltipTitle
-    },
-    isSelected: isOpen,
-    sx: buttonSx,
-    onClick: handleClick,
-    "data-testid": _buttonTestId,
-    variant: _variant,
-    id: _buttonTestId,
-    disabled: _isDisabled
-  }, _buttonIcon), /*#__PURE__*/React.createElement(Menu, {
-    anchorEl: anchorEl,
-    open: isOpen,
-    onClose: (event, reason) => {
-      if (reason === 'tabKeyDown') {
-        return;
-      }
-      handleClose(event);
-    },
-    anchorOrigin: anchorOrigin,
-    transformOrigin: transformOrigin,
-    BackdropProps: {
-      style: {
-        opacity: 0,
-        transition: 'none'
-      }
-    },
-    MenuListProps: Object.assign({}, children && {
-      style: {
-        padding: '0px'
-      }
-    })
-  }, _menuTitle && ( /*#__PURE__*/React.createElement(ListSubheader, {
-    "data-testid": "toggleMenuTitle"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    sx: {
-      fontSize: '12px'
-    }
-  }, _menuTitle))), menuItems && menuItems.length ? menuItems.map(menuItem => {
-    const {
-      text,
-      icon,
-      action,
-      isDisabled
-    } = menuItem;
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: text,
-      onClick: event => {
-        action(event);
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, Object.assign({
+      tooltipProps: {
+        placement: 'top',
+        title: _tooltipTitle
+      },
+      isSelected: isOpen,
+      sx: buttonSx,
+      onClick: handleClick,
+      "data-testid": _buttonTestId,
+      variant: _variant,
+      id: _buttonTestId,
+      disabled: _isDisabled
+    }, {
+      children: _buttonIcon
+    })), jsxs(Menu, Object.assign({
+      anchorEl: anchorEl,
+      open: isOpen,
+      onClose: (event, reason) => {
+        if (reason === 'tabKeyDown') {
+          return;
+        }
         handleClose(event);
       },
-      disabled: isDisabled,
-      selected: menuItem.isSelected
-    }, /*#__PURE__*/React.createElement(Grid, {
-      container: true,
-      spacing: 2,
-      justifyContent: "space-between"
-    }, /*#__PURE__*/React.createElement(Grid, {
-      item: true
-    }, /*#__PURE__*/React.createElement(ListItemText, null, text)), icon && ( /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      alignItems: "flex-end"
-    }, /*#__PURE__*/React.createElement(ListItemIcon, {
-      sx: {
-        '&.MuiListItemIcon-root': {
-          minWidth: '24px'
+      anchorOrigin: anchorOrigin,
+      transformOrigin: transformOrigin,
+      BackdropProps: {
+        style: {
+          opacity: 0,
+          transition: 'none'
         }
-      }
-    }, icon)))));
-  }) : ( /*#__PURE__*/React.createElement("div", null) // Needed to make the menu work without any menuItems
-  ), children));
+      },
+      MenuListProps: Object.assign({}, children && {
+        style: {
+          padding: '0px'
+        }
+      })
+    }, {
+      children: [_menuTitle && jsx(ListSubheader, Object.assign({
+        "data-testid": "toggleMenuTitle"
+      }, {
+        children: jsx(Typography, Object.assign({
+          sx: {
+            fontSize: '12px'
+          }
+        }, {
+          children: _menuTitle
+        }))
+      })), menuItems && menuItems.length ? menuItems.map(menuItem => {
+        const {
+          text,
+          icon,
+          action,
+          isDisabled
+        } = menuItem;
+        return jsx(MenuItem, Object.assign({
+          onClick: event => {
+            action(event);
+            handleClose(event);
+          },
+          disabled: isDisabled,
+          selected: menuItem.isSelected
+        }, {
+          children: jsxs(Grid, Object.assign({
+            container: true,
+            spacing: 2,
+            justifyContent: "space-between"
+          }, {
+            children: [jsx(Grid, Object.assign({
+              item: true
+            }, {
+              children: jsx(ListItemText, {
+                children: text
+              })
+            })), icon && jsx(Grid, Object.assign({
+              item: true,
+              alignItems: "flex-end"
+            }, {
+              children: jsx(ListItemIcon, Object.assign({
+                sx: {
+                  '&.MuiListItemIcon-root': {
+                    minWidth: '24px'
+                  }
+                }
+              }, {
+                children: icon
+              }))
+            }))]
+          }))
+        }), text);
+      }) : jsx("div", {}) // Needed to make the menu work without any menuItems
+      , children]
+    }))]
+  });
 };
 
 const TooltipSelect = _a => {
@@ -6148,25 +6523,27 @@ const TooltipSelect = _a => {
   const onBlur = React.useCallback(() => {
     setTooltipOpen(false);
   }, [setTooltipOpen]);
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
+  return jsx(CustomTooltip, Object.assign({
     title: tooltip,
     placement: "top",
     open: tooltipOpen
-  }, /*#__PURE__*/React.createElement(StyledSelect, Object.assign({
-    variant: variant,
-    disableUnderline: true,
-    onOpen: onOpen,
-    onClose: onClose,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onWheel: onWheel,
-    isEnabled: isEnabled,
-    hasBackgroundColor: hasBackgroundColor,
-    additionalStyling: additionalStyling,
-    skipLocalStyling: skipLocalStyling
-  }, props)));
+  }, {
+    children: jsx(StyledSelect, Object.assign({
+      variant: variant,
+      disableUnderline: true,
+      onOpen: onOpen,
+      onClose: onClose,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onWheel: onWheel,
+      isEnabled: isEnabled,
+      hasBackgroundColor: hasBackgroundColor,
+      additionalStyling: additionalStyling,
+      skipLocalStyling: skipLocalStyling
+    }, props))
+  }));
 };
 // Style the select
 const BaseSelect = styled(Select, {
@@ -6186,7 +6563,7 @@ const StyledSelect = styled( /*#__PURE__*/React.forwardRef((_a, ref) => {
       additionalStyling
     } = _a,
     props = __rest(_a, ["className", "additionalStyling"]);
-  return /*#__PURE__*/React.createElement(BaseSelect, Object.assign({}, props, {
+  return jsx(BaseSelect, Object.assign({}, props, {
     MenuProps: {
       classes: {
         paper: className
@@ -6304,7 +6681,7 @@ function withEggs(eggs) {
       const store = useStore();
       const [remover] = React.useState(() => store.addEggs(eggs));
       React.useEffect(() => remover, [remover]);
-      return /*#__PURE__*/React.createElement(Component, Object.assign({}, props));
+      return jsx(Component, Object.assign({}, props));
     };
     WithEggs.displayName = `withEggs(${Component.displayName || Component.name || 'Component'})`;
     return WithEggs;
@@ -6325,7 +6702,7 @@ const CustomAccordion = _a => {
     } = _a,
     props = __rest(_a, ["title", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children"]);
   const [expanded, setExpanded] = React.useState(defaultExpanded);
-  return /*#__PURE__*/React.createElement(Accordion, Object.assign({}, props, {
+  return jsxs(Accordion, Object.assign({}, props, {
     defaultExpanded: defaultExpanded,
     elevation: expanded ? expandedElevation : collapsedElevation,
     onChange: (_event, expanded) => setExpanded(expanded),
@@ -6333,11 +6710,17 @@ const CustomAccordion = _a => {
     TransitionProps: {
       timeout: transitionDuration
     }
-  }), /*#__PURE__*/React.createElement(AccordionSummary, {
-    expandIcon: CustomExpandIcon ? /*#__PURE__*/React.createElement(CustomExpandIcon, null) : /*#__PURE__*/React.createElement(ChevronDown, null)
-  }, title), /*#__PURE__*/React.createElement(AccordionDetails, {
-    sx: detailsSx
-  }, children));
+  }, {
+    children: [jsx(AccordionSummary, Object.assign({
+      expandIcon: CustomExpandIcon ? jsx(CustomExpandIcon, {}) : jsx(ChevronDown, {})
+    }, {
+      children: title
+    })), jsx(AccordionDetails, Object.assign({
+      sx: detailsSx
+    }, {
+      children: children
+    }))]
+  }));
 };
 
 var $$4 = _export;
@@ -7203,24 +7586,29 @@ const SearchHighlight = ({
   search
 }) => {
   if (search === '') {
-    return /*#__PURE__*/React__default.createElement("span", null, _text);
+    return jsx("span", {
+      children: _text
+    });
   }
   const searchWords = search.split(' ').reduce((words, word) => word ? [...words, word.toLocaleLowerCase()] : words, []);
   const searchRegex = searchWords.map(word => escapeRegExp(word)).join('|');
   const textParts = _text.split(new RegExp(`(${searchRegex})`, 'gi'));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map((part, index) => {
-    const key = `${part}-${index}`;
-    if (searchWords.some(search => part.toLocaleLowerCase().includes(search))) {
-      return /*#__PURE__*/React__default.createElement("mark", {
-        key: key,
-        style: highlightStyle,
-        "data-testid": "mark"
-      }, part);
-    }
-    return /*#__PURE__*/React__default.createElement("span", {
-      key: key
-    }, part);
-  }));
+  return jsx(Fragment, {
+    children: textParts.map((part, index) => {
+      const key = `${part}-${index}`;
+      if (searchWords.some(search => part.toLocaleLowerCase().includes(search))) {
+        return jsx("mark", Object.assign({
+          style: highlightStyle,
+          "data-testid": "mark"
+        }, {
+          children: part
+        }), key);
+      }
+      return jsx("span", {
+        children: part
+      }, key);
+    })
+  });
 };
 
 const styles = {
@@ -7238,17 +7626,25 @@ const SwitchButton = _a => {
       tooltip = 'Switch mode'
     } = _a,
     props = __rest(_a, ["activeLabel", "inActiveLabel", "tooltip"]);
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
+  return jsx(CustomTooltip, Object.assign({
     title: tooltip
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "button"
-  }, /*#__PURE__*/React.createElement(FormLabel, {
-    sx: styles.label
-  }, inActiveLabel), /*#__PURE__*/React.createElement(Switch, Object.assign({
-    "data-testid": "switchMode"
-  }, props)), /*#__PURE__*/React.createElement(FormLabel, {
-    sx: styles.label
-  }, activeLabel)));
+  }, {
+    children: jsxs("span", Object.assign({
+      role: "button"
+    }, {
+      children: [jsx(FormLabel, Object.assign({
+        sx: styles.label
+      }, {
+        children: inActiveLabel
+      })), jsx(Switch, Object.assign({
+        "data-testid": "switchMode"
+      }, props)), jsx(FormLabel, Object.assign({
+        sx: styles.label
+      }, {
+        children: activeLabel
+      }))]
+    }))
+  }));
 };
 
 // TODO: Remove from `core-js@4` since it's moved to entry points
@@ -7289,11 +7685,13 @@ $({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
 const isURL = string => /^https?:\/\//.test(string);
 const ClearButton = ({
   onClick
-}) => ( /*#__PURE__*/React__default.createElement(CustomIconButton, {
+}) => jsx(CustomIconButton, Object.assign({
   tooltipTitle: "Clear",
   sx: buttonStyle,
   onClick: onClick
-}, /*#__PURE__*/React__default.createElement(Clear, null)));
+}, {
+  children: jsx(Clear, {})
+}));
 const buttonStyle = {
   '&.MuiButtonBase-root.MuiIconButton-root': {
     width: 48,
@@ -7310,26 +7708,34 @@ const SearchFieldButton = ({
     t
   } = useTranslation(SHARED_NAMESPACE);
   if (isURL(localSearchString)) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        marginRight: '15px'
-      }
-    }, /*#__PURE__*/React__default.createElement(ClearButton, {
-      onClick: () => onClickClear()
-    })), /*#__PURE__*/React__default.createElement(Button, {
-      variant: "tertiary",
-      onClick: () => setPopupIsOpen(true)
-    }, t('shared-save')));
+    return jsxs(Fragment, {
+      children: [jsx("div", Object.assign({
+        style: {
+          marginRight: '15px'
+        }
+      }, {
+        children: jsx(ClearButton, {
+          onClick: () => onClickClear()
+        })
+      })), jsx(Button, Object.assign({
+        variant: "tertiary",
+        onClick: () => setPopupIsOpen(true)
+      }, {
+        children: t('shared-save')
+      }))]
+    });
   }
   if (localSearchString) {
-    return /*#__PURE__*/React__default.createElement(ClearButton, {
+    return jsx(ClearButton, {
       onClick: () => onClickClear()
     });
   }
-  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+  return jsx(CustomIconButton, Object.assign({
     tooltipTitle: t('shared-search'),
     sx: buttonStyle
-  }, /*#__PURE__*/React__default.createElement(Search, null));
+  }, {
+    children: jsx(Search, {})
+  }));
 };
 
 const SearchField = ({
@@ -7382,7 +7788,7 @@ const SearchField = ({
     setLocalSearchString(searchFilter);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchFilter]);
-  return /*#__PURE__*/React.createElement(TextField, {
+  return jsx(TextField, {
     variant: "filled",
     label: translatedLabel,
     value: localSearchString,
@@ -7392,40 +7798,26 @@ const SearchField = ({
     autoFocus: true,
     fullWidth: true,
     InputProps: {
-      endAdornment: ( /*#__PURE__*/React.createElement(InputAdornment, {
+      endAdornment: jsx(InputAdornment, Object.assign({
         position: "end"
-      }, /*#__PURE__*/React.createElement(SearchFieldButton, {
-        setPopupIsOpen: () => {
-          onOpenServicePopup(localSearchString);
-          setLocalSearchString('');
-        },
-        localSearchString: localSearchString,
-        onClickClear: () => {
-          setLocalSearchString('');
-          setSearchFilterDebounced('');
-          setUrlIsValid(false);
-        }
-      })))
+      }, {
+        children: jsx(SearchFieldButton, {
+          setPopupIsOpen: () => {
+            onOpenServicePopup(localSearchString);
+            setLocalSearchString('');
+          },
+          localSearchString: localSearchString,
+          onClickClear: () => {
+            setLocalSearchString('');
+            setSearchFilterDebounced('');
+            setUrlIsValid(false);
+          }
+        })
+      }))
     }
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
 const getLastUpdateTitle = (time, t) => {
   return t('shared-last-updated', {
     time
@@ -7439,52 +7831,42 @@ const LastUpdateTime = ({
   const {
     t
   } = useTranslation(SHARED_NAMESPACE);
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsxs(Box, Object.assign({
     sx: {
       display: 'flex',
       alignItems: 'center',
       height: '100%',
       justifyContent: 'flex-end'
     }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      color: 'geowebColors.captions.captionStatus.rgba',
-      fontSize: '10px',
-      lineHeight: '1.6',
-      letterSpacing: '0.33px'
-    },
-    "data-testid": dataTestId
-  }, getLastUpdateTitle(lastUpdateTime, t)), /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "refresh-button",
-    onClick: _onPressRefresh,
-    sx: {
-      marginRight: {
-        xs: 2,
-        sm: 1
+  }, {
+    children: [jsx(Typography, Object.assign({
+      sx: {
+        color: 'geowebColors.captions.captionStatus.rgba',
+        fontSize: '10px',
+        lineHeight: '1.6',
+        letterSpacing: '0.33px'
       },
-      marginLeft: 1
-    },
-    tooltipTitle: t('shared-click-to-refresh'),
-    variant: "tool"
-  }, /*#__PURE__*/React__default.createElement(Cached, null)));
+      "data-testid": dataTestId
+    }, {
+      children: getLastUpdateTitle(lastUpdateTime, t)
+    })), jsx(CustomIconButton, Object.assign({
+      "data-testid": "refresh-button",
+      onClick: _onPressRefresh,
+      sx: {
+        marginRight: {
+          xs: 2,
+          sm: 1
+        },
+        marginLeft: 1
+      },
+      tooltipTitle: t('shared-click-to-refresh'),
+      variant: "tool"
+    }, {
+      children: jsx(Cached, {})
+    }))]
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
 class CanvasComponent extends Component {
   constructor(props) {
     super(props);
@@ -7758,7 +8140,7 @@ class CanvasComponent extends Component {
   render() {
     this.updateCanvas();
     this._handleWindowResize();
-    return /*#__PURE__*/React__default.createElement("div", {
+    return jsx("div", Object.assign({
       role: "button",
       ref: this.canvascontaineroutside,
       tabIndex: 0,
@@ -7771,31 +8153,37 @@ class CanvasComponent extends Component {
         display: 'block',
         overflow: 'hidden'
       }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      ref: this.canvascontainer,
-      style: {
-        minWidth: 'inherit',
-        minHeight: 'inherit',
-        width: 'inherit',
-        height: 'inherit',
-        overflow: 'hidden',
-        display: 'block',
-        border: 'none'
-      },
-      "data-testid": "canvas-container"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        overflow: 'visible',
-        width: 0,
-        height: 0
-      },
-      role: "presentation",
-      "aria-label": "canvas"
-    }, /*#__PURE__*/React__default.createElement("canvas", {
-      ref: canvas => {
-        this.canvas = canvas;
-      }
-    }))));
+    }, {
+      children: jsx("div", Object.assign({
+        ref: this.canvascontainer,
+        style: {
+          minWidth: 'inherit',
+          minHeight: 'inherit',
+          width: 'inherit',
+          height: 'inherit',
+          overflow: 'hidden',
+          display: 'block',
+          border: 'none'
+        },
+        "data-testid": "canvas-container"
+      }, {
+        children: jsx("div", Object.assign({
+          style: {
+            overflow: 'visible',
+            width: 0,
+            height: 0
+          },
+          role: "presentation",
+          "aria-label": "canvas"
+        }, {
+          children: jsx("canvas", {
+            ref: canvas => {
+              this.canvas = canvas;
+            }
+          })
+        }))
+      }))
+    }));
   }
 }
 CanvasComponent.defaultProps = {
@@ -8544,56 +8932,56 @@ const convertNOWandTODAYFormatsToUTC = timeValue => {
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  isoStringToDate: isoStringToDate,
-  isValidIsoDateString: isValidIsoDateString,
-  stringToDate: stringToDate,
+  DATE_FORMAT_DATEPICKER: DATE_FORMAT_DATEPICKER,
+  DATE_FORMAT_HOURS: DATE_FORMAT_HOURS,
+  DATE_FORMAT_NAME_OF_DAY_MONTH: DATE_FORMAT_NAME_OF_DAY_MONTH,
+  DATE_FORMAT_NAME_OF_MONTH: DATE_FORMAT_NAME_OF_MONTH,
+  DATE_FORMAT_UTC: DATE_FORMAT_UTC,
+  DATE_FORMAT_YEAR: DATE_FORMAT_YEAR,
+  add: add,
+  convertNOWFormatToUTC: convertNOWFormatToUTC,
+  convertNOWandTODAYFormatsToUTC: convertNOWandTODAYFormatsToUTC,
+  createDate: createDate,
   dateToIsoString: dateToIsoString,
-  setUTCDate: setUTCDate,
   dateToString: dateToString,
-  isBetween: isBetween,
-  createDate: createDate,
-  add: add,
-  sub: sub,
-  differenceInYears: differenceInYears,
-  differenceInMonths: differenceInMonths,
   differenceInDays: differenceInDays,
-  differenceInMinutes: differenceInMinutes,
   differenceInHours: differenceInHours,
+  differenceInMinutes: differenceInMinutes,
+  differenceInMonths: differenceInMonths,
   differenceInSeconds: differenceInSeconds,
-  isBefore: isBefore,
-  isAfter: isAfter,
-  utc: utc,
+  differenceInYears: differenceInYears,
+  fromUnix: fromUnix,
+  getCurrentTimeAsString: getCurrentTimeAsString,
+  getDay: getDay,
+  getDayOfYear: getDayOfYear,
+  getHours: getHours,
+  getMonth: getMonth,
+  getNowUtc: getNowUtc,
   getUtcFromString: getUtcFromString,
+  getWeek: getWeek,
+  getYear: getYear,
+  isAfter: isAfter,
+  isBefore: isBefore,
+  isBetween: isBetween,
+  isEqual: isEqual,
   isValid: isValid,
-  unix: unix,
-  fromUnix: fromUnix,
+  isValidIsoDateString: isValidIsoDateString,
+  isWithinInterval: isWithinInterval,
+  isoStringToDate: isoStringToDate,
   parseCustomDateString: parseCustomDateString,
-  getNowUtc: getNowUtc,
-  getCurrentTimeAsString: getCurrentTimeAsString,
+  parseISO: parseISO,
   set: set,
-  getHours: getHours,
-  startOfHourUTC: startOfHourUTC,
+  setUTCDate: setUTCDate,
+  startOfDay: startOfDay,
   startOfDayUTC: startOfDayUTC,
-  startOfWeekUTC: startOfWeekUTC,
+  startOfHourUTC: startOfHourUTC,
   startOfMonthUTC: startOfMonthUTC,
+  startOfWeekUTC: startOfWeekUTC,
   startOfYearUTC: startOfYearUTC,
-  convertNOWFormatToUTC: convertNOWFormatToUTC,
-  convertNOWandTODAYFormatsToUTC: convertNOWandTODAYFormatsToUTC,
-  isEqual: isEqual,
-  startOfDay: startOfDay,
-  parseISO: parseISO,
-  isWithinInterval: isWithinInterval,
-  getDayOfYear: getDayOfYear,
-  getDay: getDay,
-  getMonth: getMonth,
-  getYear: getYear,
-  getWeek: getWeek,
-  DATE_FORMAT_DATEPICKER: DATE_FORMAT_DATEPICKER,
-  DATE_FORMAT_UTC: DATE_FORMAT_UTC,
-  DATE_FORMAT_YEAR: DATE_FORMAT_YEAR,
-  DATE_FORMAT_HOURS: DATE_FORMAT_HOURS,
-  DATE_FORMAT_NAME_OF_DAY_MONTH: DATE_FORMAT_NAME_OF_DAY_MONTH,
-  DATE_FORMAT_NAME_OF_MONTH: DATE_FORMAT_NAME_OF_MONTH
+  stringToDate: stringToDate,
+  sub: sub,
+  unix: unix,
+  utc: utc
 });
 
 /* *