@opengeoweb/shared 4.21.0 → 4.22.1

package/index.esm.js

@@ -1,3538 +0,0 @@
-import * as React from 'react';
-import React__default, { useRef } from 'react';
-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, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
-import { throttle, escapeRegExp } from 'lodash';
-import Draggable from 'react-draggable';
-import { Resizable } from 're-resizable';
-import { useStore } from 'react-redux';
-import { parseISO, parse, format, isEqual, isBefore, isAfter, add as add$1, sub as sub$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1 } from 'date-fns';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-var bgColors = {
-  green: 'geowebColors.functional.successOutline.fill',
-  grey: 'geowebColors.functional.disabledOutline.fill',
-  purple: 'geowebColors.functional.summaryOutline.fill',
-  red: 'geowebColors.functional.errorOutline.fill',
-  yellow: 'geowebColors.functional.warningOutline.fill',
-  blue: 'geowebColors.functional.notificationOutline.fill'
-};
-var borderColors = {
-  green: 'geowebColors.functional.successOutline.borderColor',
-  grey: 'geowebColors.functional.disabledOutline.borderColor',
-  purple: 'geowebColors.functional.summaryOutline.borderColor',
-  red: 'geowebColors.functional.errorOutline.borderColor',
-  yellow: 'geowebColors.functional.warningOutline.borderColor',
-  blue: 'geowebColors.functional.notificationOutline.borderColor'
-};
-
-var tagStyle = function tagStyle(color) {
-  // Set color to grey for summary
-  var backgroundColor = Object.assign({}, bgColors)[color];
-  var borderColor = Object.assign({}, borderColors)[color];
-  return {
-    backgroundColor: backgroundColor,
-    m: 0,
-    p: 0,
-    border: '1px solid',
-    borderColor: borderColor,
-    borderRadius: '4px',
-    width: '120px',
-    height: '18px',
-    lineHeight: '16px',
-    color: 'geowebColors.captions.captionStatus.rgba'
-  };
-};
-
-var StatusTag = function StatusTag(_a) {
-  var content = _a.content,
-      color = _a.color,
-      props = __rest(_a, ["content", "color"]);
-
-  return /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    "data-testid": "statusTag",
-    className: "statusTag",
-    sx: Object.assign(Object.assign({}, tagStyle(color)), props.sx)
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption"
-  }, content));
-};
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toArray(arr) {
-  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var defaultDelay = 1000;
-var useControlledTooltip = function useControlledTooltip() {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tooltipOpen = _React$useState2[0],
-      setTooltipOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      delayedTooltip = _React$useState4[0],
-      setDelayedTooltip = _React$useState4[1];
-
-  React.useEffect(function () {
-    if (tooltipOpen === true) {
-      var timer = setTimeout(function () {
-        return setDelayedTooltip(true);
-      }, defaultDelay);
-      return function () {
-        clearTimeout(timer);
-      };
-    }
-
-    setDelayedTooltip(false);
-    return function () {};
-  }, [tooltipOpen]);
-  return [delayedTooltip, setTooltipOpen];
-};
-var CustomTooltip = function CustomTooltip(props) {
-  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, props, {
-    enterDelay: defaultDelay,
-    enterNextDelay: defaultDelay,
-    disableInteractive: true
-  }));
-};
-
-var CustomIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$tooltipTitle = _a.tooltipTitle,
-      defaultTooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
-      _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'flat' : _a$variant,
-      _a$isSelected = _a.isSelected,
-      isSelected = _a$isSelected === void 0 ? false : _a$isSelected,
-      _a$shouldShowAsDisabl = _a.shouldShowAsDisabled,
-      shouldShowAsDisabled = _a$shouldShowAsDisabl === void 0 ? false : _a$shouldShowAsDisabl,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'small' : _a$size,
-      children = _a.children,
-      className = _a.className,
-      defaultTooltipProps = _a.tooltipProps,
-      props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"]);
-
-  var classNames = [].concat(_toConsumableArray(className ? [className] : []), _toConsumableArray(isSelected ? ['Mui-selected'] : []), [variant]).join(' ');
-  var tooltipTitle = (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
-  var tooltipProps = Object.assign(Object.assign({}, defaultTooltipProps), {
-    title: tooltipTitle,
-    placement: (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.placement) || 'top',
-    sx: {
-      pointerEvents: 'none'
-    }
-  });
-
-  var renderIconButton = function renderIconButton() {
-    return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-      "aria-label": tooltipTitle
-    }, props, {
-      size: size,
-      className: classNames,
-      ref: ref,
-      sx: Object.assign(Object.assign({}, props.sx), shouldShowAsDisabled && {
-        '&.MuiIconButton-root': {
-          color: "geowebColors.iconButtons.".concat(variant, ".disabled.color")
-        },
-        '&.Mui-focusVisible': {
-          color: "geowebColors.iconButtons.".concat(variant, ".default.color")
-        }
-      })
-    }), children);
-  };
-
-  return tooltipTitle && !props.disabled ? /*#__PURE__*/React.createElement(CustomTooltip, Object.assign({}, tooltipProps), renderIconButton()) : renderIconButton();
-});
-
-var CustomDialog = function CustomDialog(_a) {
-  var title = _a.title,
-      _onClose = _a.onClose,
-      _a$description = _a.description,
-      description = _a$description === void 0 ? '' : _a$description,
-      _a$actions = _a.actions,
-      actions = _a$actions === void 0 ? null : _a$actions,
-      children = _a.children,
-      sx = _a.sx,
-      other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
-
-  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
-    "data-testid": "customDialog",
-    PaperProps: {
-      sx: Object.assign({
-        width: '560px',
-        margin: 2.5
-      }, sx)
-    },
-    // fix for briefly showing default options when closing dialog
-    transitionDuration: 0,
-    onClose: function onClose() {
-      _onClose('CLOSED');
-    },
-    "aria-labelledby": "dialog-title"
-  }, 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: function onClick() {
-      return _onClose('CLOSED');
-    },
-    sx: {
-      '&.MuiIconButton-root': {
-        color: 'geowebColors.greys.accessible'
-      }
-    }
-  }, /*#__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'
-      }
-    }
-  }, actions));
-};
-
-var confirmStyle = {
-  width: {
-    xs: '100%',
-    sm: '150px'
-  },
-  marginLeft: {
-    xs: '0px!important',
-    sm: '8px!important'
-  },
-  marginTop: {
-    xs: 2,
-    sm: 0
-  }
-};
-var ConfirmationDialog = function ConfirmationDialog(_a) {
-  var open = _a.open,
-      title = _a.title,
-      _a$description = _a.description,
-      description = _a$description === void 0 ? 'Are you sure?' : _a$description,
-      _a$confirmLabel = _a.confirmLabel,
-      confirmLabel = _a$confirmLabel === void 0 ? 'Submit' : _a$confirmLabel,
-      _a$cancelLabel = _a.cancelLabel,
-      cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
-      onSubmit = _a.onSubmit,
-      onClose = _a.onClose,
-      _a$content = _a.content,
-      content = _a$content === void 0 ? null : _a$content,
-      _a$disableAutoFocus = _a.disableAutoFocus,
-      disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
-      _a$isLoading = _a.isLoading,
-      isLoading = _a$isLoading === void 0 ? false : _a$isLoading,
-      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
-
-  other.catchOnCancel;
-      var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
-
-
-  return /*#__PURE__*/React.createElement(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: function sx(theme) {
-        return {
-          width: {
-            xs: '100%',
-            sm: '150px'
-          },
-          '&:focus': {
-            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-            borderColor: 'transparent'
-          }
-        };
-      },
-      onClick: function onClick() {
-        return 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: function sx(theme) {
-        return Object.assign(Object.assign({}, confirmStyle), {
-          '&:focus': {
-            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-            borderColor: 'transparent'
-          }
-        });
-      },
-      onClick: onSubmit,
-      autoFocus: !disableAutoFocus
-    }, confirmLabel))
-  }, rest), content);
-};
-
-/* *
- * 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)
- * */
-var showPrompt = function showPrompt(event) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // eslint-disable-next-line no-param-reassign
-  event.returnValue = 'Changes that you made may not be saved.'; // changes are your browser have default text to overrule this
-};
-function usePreventBrowserClose(shouldPreventClose) {
-  React.useEffect(function () {
-    if (shouldPreventClose) {
-      window.addEventListener('beforeunload', showPrompt);
-    } else {
-      window.removeEventListener('beforeunload', showPrompt);
-    }
-
-    return function () {
-      window.removeEventListener('beforeunload', showPrompt);
-    };
-  }, [shouldPreventClose]);
-}
-
-/* *
- * 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)
- * */
-var usePoller = function usePoller(deps, callback) {
-  var pollingInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300000;
-  var interval = useRef(null);
-  React.useEffect(function () {
-    if (deps.filter(function (dep) {
-      return dep !== null;
-    }).length > 0) {
-      if (interval.current) {
-        clearInterval(interval.current);
-      }
-
-      interval.current = setInterval(function () {
-        callback();
-      }, pollingInterval);
-    }
-
-    return function () {
-      if (interval.current) {
-        clearInterval(interval.current);
-      }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [deps]);
-  return interval;
-};
-
-/* *
- * 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)
- * */
-function usePrevious(value) {
-  var ref = React.useRef();
-  React.useEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-/* *
- * 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)
- * */
-var useIsMounted = function useIsMounted() {
-  var isMounted = React.useRef(false);
-  React.useEffect(function () {
-    isMounted.current = true;
-    return function () {
-      isMounted.current = false;
-    };
-  }, []);
-  return {
-    isMounted: isMounted
-  };
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var adjustPosition = function adjustPosition(bbox, containingView, position, setPosition) {
-  var isHorizontallyLarger = bbox.width > containingView.width;
-  var isVerticallyLarger = bbox.height > containingView.height; // Check corner cases first
-  // bottom left
-
-  if (bbox.x < containingView.x && bbox.bottom >= containingView.bottom) {
-    var diffX = containingView.x - bbox.x;
-    var diffY = containingView.bottom - bbox.bottom;
-    setPosition({
-      x: position.x + diffX,
-      y: position.y + diffY
-    });
-  } else if ( // bottom right
-  bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
-    var _diffX = containingView.right - bbox.right;
-
-    var _diffY = containingView.bottom - bbox.bottom;
-
-    setPosition({
-      x: position.x + _diffX,
-      y: position.y + _diffY
-    });
-  } else if (bbox.x < containingView.x || isHorizontallyLarger) {
-    // left screen
-    var _diffX2 = containingView.x - bbox.x;
-
-    setPosition(Object.assign(Object.assign({}, position), {
-      x: position.x + _diffX2
-    }));
-  } else if (bbox.right >= containingView.right) {
-    // right screen
-    var _diffX3 = containingView.right - bbox.right;
-
-    setPosition(Object.assign(Object.assign({}, position), {
-      x: position.x + _diffX3
-    }));
-  } else if (bbox.y < containingView.y || isVerticallyLarger) {
-    // top screen
-    var _diffY2 = containingView.y - bbox.y;
-
-    setPosition(Object.assign(Object.assign({}, position), {
-      y: position.y + _diffY2
-    }));
-  } else if (bbox.bottom >= containingView.bottom) {
-    // bottom screen
-    var _diffY3 = containingView.bottom - bbox.bottom;
-
-    setPosition(Object.assign(Object.assign({}, position), {
-      y: position.y + _diffY3
-    }));
-  }
-};
-var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
-  var onResizeWindow = React__default.useCallback(function () {
-    if (!nodeRef.current) {
-      return;
-    }
-
-    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
-    var containingView = nodeRef.current.parentElement.getBoundingClientRect();
-    adjustPosition(bbox, containingView, position, setPosition);
-  }, [nodeRef, position, setPosition]);
-  React__default.useEffect(function () {
-    var throttledResize = throttle(onResizeWindow, 100);
-    window.addEventListener('resize', throttledResize);
-    return function () {
-      window.removeEventListener('resize', throttledResize);
-    };
-  }, [onResizeWindow]);
-};
-
-var ConfirmationServiceContext = /*#__PURE__*/React.createContext(Promise.reject);
-var useConfirmationDialog = function useConfirmationDialog() {
-  return React.useContext(ConfirmationServiceContext);
-};
-var useDialogActions = function useDialogActions(awaitingPromiseRef) {
-  var defaultOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-  var _useIsMounted = useIsMounted(),
-      isMounted = _useIsMounted.isMounted;
-
-  var _React$useState = React.useState(defaultOptions),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      confirmationState = _React$useState2[0],
-      setConfirmationState = _React$useState2[1];
-
-  var openConfirmation = function openConfirmation(options) {
-    setConfirmationState(options);
-    return new Promise(function (resolve, reject) {
-      // since this is a React.ref it's safe to reassign it, although eslint says no
-      // eslint-disable-next-line no-param-reassign
-      awaitingPromiseRef.current = {
-        resolve: resolve,
-        reject: reject
-      };
-    });
-  }; // clears state with timeout delay so optional values provided by the prop 'content' of ConfirmationDialog can be read
-
-
-  var clearState = function clearState() {
-    return setTimeout(function () {
-      if (isMounted.current) {
-        setConfirmationState(null);
-      }
-    }, 0);
-  };
-
-  var handleClose = function handleClose(reason) {
-    if (confirmationState && confirmationState.catchOnCancel && awaitingPromiseRef.current) {
-      awaitingPromiseRef.current.reject(reason);
-    }
-
-    clearState();
-  };
-
-  var handleSubmit = function handleSubmit() {
-    if (awaitingPromiseRef.current) {
-      awaitingPromiseRef.current.resolve();
-    }
-
-    clearState();
-  };
-
-  return {
-    openConfirmation: openConfirmation,
-    confirmationState: confirmationState,
-    handleSubmit: handleSubmit,
-    handleClose: handleClose
-  };
-};
-var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
-  var children = _ref.children;
-  var awaitingPromiseRef = React.useRef({
-    resolve: function resolve() {
-      return Promise.resolve();
-    },
-    reject: function reject() {
-      return Promise.reject();
-    }
-  });
-
-  var _useDialogActions = useDialogActions(awaitingPromiseRef),
-      openConfirmation = _useDialogActions.openConfirmation,
-      confirmationState = _useDialogActions.confirmationState,
-      handleSubmit = _useDialogActions.handleSubmit,
-      handleClose = _useDialogActions.handleClose;
-
-  return /*#__PURE__*/React.createElement(ConfirmationServiceContext.Provider, {
-    value: openConfirmation
-  }, children, /*#__PURE__*/React.createElement(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)
- * */
-
-var AlertIcon = function AlertIcon(_ref) {
-  var _ref$severity = _ref.severity,
-      severity = _ref$severity === void 0 ? 'error' : _ref$severity,
-      _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'alert-icon' : _ref$dataTestId;
-
-  switch (severity) {
-    case 'info':
-      return /*#__PURE__*/React.createElement(Info, {
-        sx: {
-          color: 'geowebColors.functional.notification'
-        },
-        "data-testid": dataTestId
-      });
-
-    case 'success':
-      return /*#__PURE__*/React.createElement(Success, {
-        sx: {
-          color: 'geowebColors.functional.success'
-        },
-        "data-testid": dataTestId
-      });
-
-    case 'warning':
-      return /*#__PURE__*/React.createElement(Exclamation, {
-        sx: {
-          color: 'geowebColors.functional.warning'
-        },
-        "data-testid": dataTestId
-      });
-
-    case 'error':
-    default:
-      return /*#__PURE__*/React.createElement(Exclamation, {
-        sx: {
-          color: 'geowebColors.functional.error'
-        },
-        "data-testid": dataTestId
-      });
-  }
-};
-
-var AlertBanner = function AlertBanner(_ref) {
-  var title = _ref.title,
-      _ref$severity = _ref.severity,
-      severity = _ref$severity === void 0 ? 'error' : _ref$severity,
-      _ref$info = _ref.info,
-      info = _ref$info === void 0 ? '' : _ref$info,
-      _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId,
-      _ref$isCompact = _ref.isCompact,
-      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
-      _ref$shouldClose = _ref.shouldClose,
-      shouldClose = _ref$shouldClose === void 0 ? false : _ref$shouldClose,
-      _ref$actionButtonProp = _ref.actionButtonProps,
-      actionButtonProps = _ref$actionButtonProp === void 0 ? undefined : _ref$actionButtonProp;
-
-  var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(Alert, {
-    "data-testid": dataTestId,
-    severity: severity,
-    icon: /*#__PURE__*/React.createElement(AlertIcon, {
-      severity: severity
-    }),
-    action: shouldClose ? /*#__PURE__*/React.createElement(Button, {
-      variant: "flat",
-      onClick: function onClick() {
-        return setIsOpen(false);
-      },
-      sx: {
-        backgroundColor: 'transparent!important'
-      }
-    }, "CLOSE") : undefined,
-    sx: isCompact ? {
-      height: '32px',
-      boxSizing: 'border-box',
-      '& .MuiAlert-message': {
-        padding: '0px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        '& .MuiTypography-root': {
-          display: 'inline'
-        }
-      },
-      '& .MuiAlert-icon': {
-        marginTop: '-3px',
-        padding: '0px'
-      }
-    } : {
-      padding: '3px 16px',
-      '& .MuiAlert-message': {
-        padding: '8px 0'
-      },
-      '& .MuiAlert-icon': {
-        padding: '8px 0'
-      },
-      '& .MuiAlert-action': {
-        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: function onClick(event) {
-      setIsOpen(false);
-      actionButtonProps.onClick(event);
-    },
-    sx: {
-      backgroundColor: 'transparent!important'
-    },
-    startIcon: /*#__PURE__*/React.createElement(ChevronRight, null)
-  }, 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)
- * */
-
-var AppLayout = function AppLayout(_ref) {
-  var header = _ref.header,
-      children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      height: '100vh',
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    "data-testid": "appLayout"
-  }, header, /*#__PURE__*/React__default.createElement(Box, {
-    component: "main",
-    sx: {
-      flex: 1,
-      position: 'relative'
-    }
-  }, children));
-};
-
-var AppHeader = function AppHeader(_ref) {
-  var _sx;
-
-  var menu = _ref.menu,
-      userMenu = _ref.userMenu,
-      workspaceTopBar = _ref.workspaceTopBar,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? 'GeoWeb' : _ref$title,
-      onClick = _ref.onClick;
-  var theme = useTheme();
-
-  var _React$useState = React__default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isDrawerOpen = _React$useState2[0],
-      toggleDrawer = _React$useState2[1];
-
-  var onToggleDrawer = function onToggleDrawer(isOpen) {
-    return toggleDrawer(isOpen);
-  };
-
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Tab' || event.key === 'Shift') {
-      return;
-    }
-
-    toggleDrawer(false);
-  };
-
-  return /*#__PURE__*/React__default.createElement(Box, {
-    component: "header",
-    role: "heading",
-    sx: (_sx = {
-      height: 40,
-      backgroundColor: theme.palette.geowebColors.brand.brand,
-      color: theme.palette.common.white,
-      boxShadow: theme.shadows[1],
-      zIndex: 1000,
-      display: 'flex',
-      padding: '0 16px'
-    }, _defineProperty(_sx, theme.breakpoints.up('md'), {
-      padding: '0 24px'
-    }), _defineProperty(_sx, theme.breakpoints.up('sm'), {
-      '.workspace-topbar': {
-        marginLeft: 3,
-        maxWidth: 260
-      },
-      '.hamburger-btn': {
-        marginLeft: 4
-      },
-      h1: {
-        maxWidth: 'initial',
-        display: 'block'
-      }
-    }), _sx)
-  }, /*#__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: function onClick() {
-      return onToggleDrawer(true);
-    },
-    isSelected: isDrawerOpen
-  }, /*#__PURE__*/React__default.createElement(HamburgerMenu, null)), /*#__PURE__*/React__default.createElement(Drawer, {
-    "data-testid": "app-drawer",
-    anchor: "left",
-    open: isDrawerOpen,
-    onClose: function onClose() {
-      return onToggleDrawer(false);
-    },
-    onClick: function onClick() {
-      return onToggleDrawer(false);
-    },
-    onKeyDown: onKeyDown,
-    sx: {
-      '& .MuiDrawer-paper': {
-        top: '40px'
-      }
-    }
-  }, /*#__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));
-};
-
-/* *
- * 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)
- * */
-
-var DraggableComponent$1 = function DraggableComponent(_a) {
-  var _a$bounds = _a.bounds,
-      bounds = _a$bounds === void 0 ? 'body' : _a$bounds,
-      children = _a.children,
-      props = __rest(_a, ["bounds", "children"]);
-
-  return /*#__PURE__*/React__default.createElement(Draggable, Object.assign({
-    bounds: bounds
-  }, props), 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)
- * */
-var isDraggingClassName = 'is-dragging';
-
-var ResizeComponent = function ResizeComponent(_a) {
-  var children = _a.children,
-      _a$onResizeStart = _a.onResizeStart,
-      onResizeStart = _a$onResizeStart === void 0 ? function () {} : _a$onResizeStart,
-      _a$onResizeStop = _a.onResizeStop,
-      onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
-      size = _a.size,
-      setSize = _a.setSize,
-      _a$minHeight = _a.minHeight,
-      minHeight = _a$minHeight === void 0 ? 50 : _a$minHeight,
-      _a$minWidth = _a.minWidth,
-      minWidth = _a$minWidth === void 0 ? 50 : _a$minWidth,
-      props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth"]);
-
-  var theme = useTheme();
-  var onStartResize = React__default.useCallback(function (event, _direction, node) {
-    event.stopPropagation();
-    node.classList.add(isDraggingClassName);
-
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-        width = _node$getBoundingClie.width,
-        height = _node$getBoundingClie.height;
-
-    setSize({
-      width: width,
-      height: height
-    }); // fix for when initial maxHeight gets cleared
-    // eslint-disable-next-line no-param-reassign
-
-    node.style.height = "".concat(height, "px");
-    onResizeStart();
-  }, [onResizeStart, setSize]);
-  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
-    node.classList.remove(isDraggingClassName);
-    var width = parseInt(size.width, 10) + delta.width;
-    var height = parseInt(size.height, 10) + delta.height;
-    setSize({
-      width: width,
-      height: height
-    });
-    onResizeStop(event, direction, node, delta);
-  }, [setSize, onResizeStop, size]);
-  return /*#__PURE__*/React__default.createElement(Resizable // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
-  , Object.assign({
-    // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
-    minHeight: minHeight,
-    minWidth: minWidth,
-    size: size,
-    onResizeStop: onStopResize,
-    handleComponent: {
-      bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
-        style: {
-          fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      }),
-      bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
-        isRightAligned: true,
-        style: {
-          fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      })
-    },
-    enable: {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false,
-      topRight: true,
-      bottomRight: true,
-      bottomLeft: true,
-      topLeft: true
-    },
-    onResizeStart: onStartResize
-  }, props), children);
-};
-
-/**
- * ErrorBoundary
- * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
- *
- * @example
- * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
- */
-
-var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ErrorBoundary, _React$Component);
-
-  var _super = _createSuper(ErrorBoundary);
-
-  function ErrorBoundary(props) {
-    var _this;
-
-    _classCallCheck(this, ErrorBoundary);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      error: undefined,
-      errorInfo: undefined
-    };
-    return _this;
-  }
-
-  _createClass(ErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, errorInfo) {
-      var onError = this.props.onError;
-      this.setState({
-        error: error,
-        errorInfo: errorInfo
-      });
-      onError(error, errorInfo);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          error = _this$state.error,
-          errorInfo = _this$state.errorInfo;
-      var children = this.props.children;
-
-      if (error) {
-        return /*#__PURE__*/React.createElement(Box, {
-          sx: {
-            whiteSpace: 'pre-wrap',
-            width: '100%',
-            height: '100%',
-            overflowY: 'scroll'
-          }
-        }, /*#__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: function onClick() {
-              return window.location.reload();
-            }
-          }, "Reload page"))
-        }));
-      }
-
-      return children;
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError(error) {
-      return {
-        error: error
-      };
-    }
-  }]);
-
-  return ErrorBoundary;
-}(React.Component);
-ErrorBoundary.defaultProps = {
-  onError: function onError() {}
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var styles$4 = {
-  small: {
-    height: 16,
-    width: 16,
-    fontSize: '0.5rem'
-  },
-  large: {}
-};
-
-var Avatar = function Avatar(_ref) {
-  var children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'large' : _ref$size;
-  return /*#__PURE__*/React.createElement(Avatar$1, {
-    "data-testid": "avatar",
-    sx: Object.assign({}, styles$4[size])
-  }, 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-var styles$3 = {
-  container: {
-    position: 'absolute',
-    top: 38,
-    right: 20,
-    width: 256,
-    borderRadius: 0,
-    boxShadow: 5,
-    backgroundColor: 'geowebColors.background.surface'
-  },
-  userMenu: {
-    padding: 0,
-    '& > li': {
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingLeft: 2,
-      paddingRight: 2
-    }
-  }
-};
-
-var UserMenu = function UserMenu(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-      _ref$onToggle = _ref.onToggle,
-      onToggle = _ref$onToggle === void 0 ? function () {} : _ref$onToggle,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      children = _ref.children,
-      initials = _ref.initials;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CustomIconButton, {
-    "data-testid": "userButton",
-    onClick: onToggle,
-    sx: {
-      '&.MuiButtonBase-root': {
-        background: 'transparent',
-        '&:hover': {
-          border: 'none',
-          background: 'transparent'
-        }
-      }
-    },
-    size: "medium"
-  }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    sx: styles$3.container,
-    "data-testid": "userMenu"
-  }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
-    onClickAway: onClose,
-    mouseEvent: "onMouseDown"
-  }, /*#__PURE__*/React__default.createElement(MenuList, {
-    sx: styles$3.userMenu,
-    variant: "menu"
-  }, 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)
- * */
-
-var MenuItemTheme = function MenuItemTheme() {
-  var _useThemeContext = useThemeContext(),
-      isDark = _useThemeContext.isDark,
-      toggleTheme = _useThemeContext.toggleTheme;
-
-  return /*#__PURE__*/React__default.createElement(MenuItem, {
-    divider: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, "Choose your default 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"
-  })))));
-};
-
-/* *
- * 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)
- * */
-
-var ToolFooter = function ToolFooter() {
-  return /*#__PURE__*/React__default.createElement(Box, {
-    component: "footer",
-    sx: {
-      boxShadow: 1,
-      backgroundColor: 'geowebColors.background.surface',
-      textAlign: 'right',
-      height: 18,
-      zIndex: 1
-    }
-  });
-};
-
-/* *
- * 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)
- * */
-
-var getStyle = function getStyle(size) {
-  switch (size) {
-    case 'xs':
-      {
-        return {
-          fontSize: 10,
-          fontWeight: 500
-        };
-      }
-
-    case 'small':
-      {
-        return {
-          fontSize: 16,
-          fontWeight: 500,
-          padding: '4px'
-        };
-      }
-
-    case 'medium':
-      {
-        return {
-          fontSize: 20,
-          fontWeight: 400,
-          padding: '4px 8px',
-          height: 40
-        };
-      }
-
-    case 'large':
-      {
-        return {
-          fontSize: 16,
-          fontWeight: 500,
-          padding: '12px'
-        };
-      }
-
-    default:
-      {
-        return {};
-      }
-  }
-};
-
-var iconStyle = {
-  color: 'geowebColors.greys.accessible',
-  padding: 0,
-  '&:hover': {
-    background: 'action.hover'
-  }
-};
-
-var ToolHeader = function ToolHeader(_ref) {
-  var size = _ref.size,
-      title = _ref.title,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? null : _ref$onClose,
-      _ref$isDraggable = _ref.isDraggable,
-      isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$leftHeaderCompon = _ref.leftHeaderComponent,
-      leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? null : _ref$leftHeaderCompon,
-      _ref$rightHeaderCompo = _ref.rightHeaderComponent,
-      rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo,
-      _ref$dragHandleIcon = _ref.dragHandleIcon,
-      dragHandleIcon = _ref$dragHandleIcon === void 0 ? /*#__PURE__*/React__default.createElement(DragHandle, null) : _ref$dragHandleIcon,
-      _ref$closeIcon = _ref.closeIcon,
-      closeIcon = _ref$closeIcon === void 0 ? /*#__PURE__*/React__default.createElement(Close, {
-    "data-testid": "CloseIcon"
-  }) : _ref$closeIcon;
-  var styles = getStyle(size);
-  var columnSizeIcon = leftHeaderComponent || rightHeaderComponent ? 4 : 1;
-  var columnSizeTitle = leftHeaderComponent || rightHeaderComponent ? 4 : 10;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    component: "header",
-    className: className,
-    sx: {
-      boxShadow: 1,
-      backgroundColor: 'geowebColors.background.surface',
-      zIndex: 2,
-      cursor: isDraggable ? 'move' : null
-    }
-  }, /*#__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: columnSizeIcon,
-    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: columnSizeTitle
-  }, /*#__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
-    }
-  }, 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: "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)))));
-};
-
-/* *
- * 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)
- * */
-var styles$2 = {
-  container: {
-    overflow: 'hidden',
-    borderRadius: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  },
-  content: {
-    flex: 1,
-    overflowY: 'auto',
-    position: 'relative'
-  }
-};
-var BASE_ELEVATION = 5;
-
-var ToolContainer = function ToolContainer(_a) {
-  var _a$title = _a.title,
-      title = _a$title === void 0 ? '' : _a$title,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'medium' : _a$size,
-      children = _a.children,
-      onClose = _a.onClose,
-      _a$isResizable = _a.isResizable,
-      isResizable = _a$isResizable === void 0 ? false : _a$isResizable,
-      _a$isDraggable = _a.isDraggable,
-      isDraggable = _a$isDraggable === void 0 ? false : _a$isDraggable,
-      _a$maxHeight = _a.maxHeight,
-      maxHeight = _a$maxHeight === void 0 ? 'initial' : _a$maxHeight,
-      _a$elevation = _a.elevation,
-      elevation = _a$elevation === void 0 ? BASE_ELEVATION : _a$elevation,
-      _a$headerClassName = _a.headerClassName,
-      headerClassName = _a$headerClassName === void 0 ? '' : _a$headerClassName,
-      _a$leftHeaderComponen = _a.leftHeaderComponent,
-      leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
-      _a$rightHeaderCompone = _a.rightHeaderComponent,
-      rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
-      dragHandleIcon = _a.dragHandleIcon,
-      closeIcon = _a.closeIcon,
-      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
-
-  return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
-    elevation: elevation,
-    sx: styles$2.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$2.content,
-    style: {
-      maxHeight: maxHeight
-    }
-  }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var getRightPositionAndSize = function getRightPositionAndSize(_ref) {
-  var currentX = _ref.currentX,
-      currentWidth = _ref.currentWidth,
-      newWidth = _ref.newWidth,
-      maxWidth = _ref.maxWidth,
-      position = _ref.position,
-      startSize = _ref.startSize;
-  var newSize = Object.assign(Object.assign({}, startSize), {
-    width: newWidth
-  }); // if new size is bigger than the window
-
-  if (newWidth >= maxWidth) {
-    return {
-      size: Object.assign(Object.assign({}, newSize), {
-        width: maxWidth
-      }),
-      position: Object.assign(Object.assign({}, position), {
-        x: position.x + (maxWidth - (currentX + currentWidth))
-      })
-    };
-  } // if new size overlaps left side of screen
-
-
-  var newStartX = currentX - (newWidth - currentWidth);
-
-  if (newStartX <= 0) {
-    return {
-      size: newSize,
-      position: Object.assign(Object.assign({}, position), {
-        x: position.x - newStartX
-      })
-    };
-  } // there is room to grow
-
-
-  return {
-    size: newSize,
-    position: position
-  };
-};
-var getLeftPositionAndSize = function getLeftPositionAndSize(_ref2) {
-  var currentX = _ref2.currentX,
-      newWidth = _ref2.newWidth,
-      maxWidth = _ref2.maxWidth,
-      position = _ref2.position,
-      startSize = _ref2.startSize;
-  var newSize = Object.assign(Object.assign({}, startSize), {
-    width: newWidth
-  }); // if new size is bigger than the window
-
-  if (newWidth >= maxWidth) {
-    return {
-      size: Object.assign(Object.assign({}, newSize), {
-        width: maxWidth
-      }),
-      position: Object.assign(Object.assign({}, position), {
-        x: position.x - currentX
-      })
-    };
-  } // if new size overlaps right side of screen
-
-
-  var newEndX = currentX + newWidth;
-
-  if (newEndX >= maxWidth) {
-    return {
-      size: newSize,
-      position: Object.assign(Object.assign({}, position), {
-        x: position.x + (maxWidth - newEndX)
-      })
-    };
-  } // there is room to grow
-
-
-  return {
-    size: newSize,
-    position: position
-  };
-};
-var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideComponent(_ref3) {
-  var nodeRef = _ref3.nodeRef,
-      startSize = _ref3.startSize,
-      bounds = _ref3.bounds,
-      isRightAligned = _ref3.isRightAligned,
-      size = _ref3.size,
-      setSize = _ref3.setSize,
-      position = _ref3.position,
-      setPosition = _ref3.setPosition;
-  React__default.useEffect(function () {
-    var _a, _b; // update size when startSize has changed outside the component
-
-
-    if (startSize !== size) {
-      var node = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
-      var boundsNode = bounds === 'parent' ? (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.parentNode : document.querySelector(bounds);
-
-      var _boundsNode$getBoundi = boundsNode.getBoundingClientRect(),
-          maxWidth = _boundsNode$getBoundi.width;
-
-      var newWidth = Number(startSize.width);
-
-      var _node$getBoundingClie = node.getBoundingClientRect(),
-          currentX = _node$getBoundingClie.x,
-          currentWidth = _node$getBoundingClie.width;
-
-      var _ref4 = isRightAligned ? getRightPositionAndSize({
-        currentX: currentX,
-        currentWidth: currentWidth,
-        newWidth: newWidth,
-        maxWidth: maxWidth,
-        position: position,
-        startSize: startSize
-      }) : getLeftPositionAndSize({
-        currentX: currentX,
-        newWidth: newWidth,
-        maxWidth: maxWidth,
-        position: position,
-        startSize: startSize
-      }),
-          newPosition = _ref4.position,
-          newSize = _ref4.size;
-
-      setSize(newSize);
-      setPosition(newPosition);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [startSize.width, startSize.height]);
-};
-
-var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
-  var width = window.innerWidth * 0.85;
-  var height = window.innerHeight * 0.85;
-  var top = window.innerHeight * 0.15 / 2;
-  var left = window.innerWidth * 0.15 / 2;
-  return {
-    width: width,
-    height: height,
-    top: top,
-    left: left
-  };
-};
-var BASE_Z_INDEX = 100;
-var calculateNewPosition = function calculateNewPosition(position, isRightAligned, handle, delta) {
-  var x = position.x,
-      y = position.y; // If dragging the same side as alignment, adjust position
-
-  if (isRightAligned && handle === 'bottomRight') {
-    x = position.x + delta.width;
-  } else if (!isRightAligned && handle === 'bottomLeft') {
-    x = position.x - delta.width;
-  } else if (isRightAligned && handle === 'topRight') {
-    x = position.x + delta.width;
-    y = position.y - delta.height;
-  } else if (isRightAligned && handle === 'topLeft') {
-    y = position.y - delta.height;
-  } else if (!isRightAligned && handle === 'topRight') {
-    y = position.y - delta.height;
-  } else if (!isRightAligned && handle === 'topLeft') {
-    x = position.x - delta.width;
-    y = position.y - delta.height;
-  }
-
-  return {
-    x: x,
-    y: y
-  };
-};
-
-var DraggableComponent = function DraggableComponent(_a) {
-  var title = _a.title,
-      _a$bounds = _a.bounds,
-      bounds = _a$bounds === void 0 ? 'body' : _a$bounds,
-      _a$cancel = _a.cancel,
-      cancel = _a$cancel === void 0 ? '.MuiButtonBase-root' : _a$cancel,
-      _a$headerSize = _a.headerSize,
-      headerSize = _a$headerSize === void 0 ? 'small' : _a$headerSize,
-      _a$startSize = _a.startSize,
-      startSize = _a$startSize === void 0 ? {
-    width: 'auto',
-    height: 'auto'
-  } : _a$startSize,
-      _a$startPosition = _a.startPosition,
-      startPosition = _a$startPosition === void 0 ? {
-    left: undefined,
-    right: undefined,
-    top: undefined
-  } : _a$startPosition,
-      children = _a.children,
-      _a$isOpen = _a.isOpen,
-      isOpen = _a$isOpen === void 0 ? true : _a$isOpen,
-      _a$onClose = _a.onClose,
-      onClose = _a$onClose === void 0 ? function () {} : _a$onClose,
-      _a$initialMaxHeight = _a.initialMaxHeight,
-      defaultInitialMaxHeight = _a$initialMaxHeight === void 0 ? 'initial' : _a$initialMaxHeight,
-      _a$onChangeSize = _a.onChangeSize,
-      onChangeSize = _a$onChangeSize === void 0 ? function () {} : _a$onChangeSize,
-      _a$onMouseDown = _a.onMouseDown,
-      onMouseDown = _a$onMouseDown === void 0 ? function () {} : _a$onMouseDown,
-      _a$onResizeStop = _a.onResizeStop,
-      onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
-      _a$onDragEnd = _a.onDragEnd,
-      onDragEnd = _a$onDragEnd === void 0 ? function () {} : _a$onDragEnd,
-      _a$onFocus = _a.onFocus,
-      onFocus = _a$onFocus === void 0 ? function () {} : _a$onFocus,
-      _a$onBlur = _a.onBlur,
-      onBlur = _a$onBlur === void 0 ? function () {} : _a$onBlur,
-      _a$order = _a.order,
-      order = _a$order === void 0 ? 1 : _a$order,
-      _a$source = _a.source,
-      source = _a$source === void 0 ? 'app' : _a$source,
-      _a$leftHeaderComponen = _a.leftHeaderComponent,
-      leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
-      _a$rightHeaderCompone = _a.rightHeaderComponent,
-      rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
-      dragHandleIcon = _a.dragHandleIcon,
-      closeIcon = _a.closeIcon,
-      className = _a.className,
-      _a$sx = _a.sx,
-      sx = _a$sx === void 0 ? {} : _a$sx,
-      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"]);
-
-  var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
-  var elevation = BASE_ELEVATION + order;
-  var nodeRef = React__default.useRef(null);
-
-  var _React$useState = React__default.useState({
-    x: 0,
-    y: 0
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      position = _React$useState2[0],
-      setPosition = _React$useState2[1];
-
-  var _React$useState3 = React__default.useState(startSize),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      size = _React$useState4[0],
-      setSize = _React$useState4[1];
-
-  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
-  var onStopDrag = React__default.useCallback(function (_event, position) {
-    setPosition(position);
-    onDragEnd(position, size);
-  }, [setPosition, onDragEnd, size]);
-
-  var _React$useState5 = React__default.useState(defaultInitialMaxHeight),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      initialMaxHeight = _React$useState6[0],
-      setInitialMaxHeight = _React$useState6[1];
-
-  var onStartResize = function onStartResize() {
-    setInitialMaxHeight('initial');
-  };
-
-  var onResize = React__default.useCallback(function (_event, handle, node, delta) {
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-        width = _node$getBoundingClie.width,
-        height = _node$getBoundingClie.height;
-
-    onChangeSize({
-      width: width,
-      height: height
-    });
-    var newPos = calculateNewPosition(position, isRightAligned, handle, delta); // eslint-disable-next-line no-param-reassign
-
-    var parent = node.parentNode;
-    parent.style.transform = "translate(".concat(newPos.x, "px, ").concat(newPos.y, "px)");
-  }, [onChangeSize, position, isRightAligned]);
-
-  var onStopResize = function onStopResize(_event, direction, node, delta) {
-    setPosition(calculateNewPosition(position, isRightAligned, direction, delta));
-    onResizeStop(_event, direction, node, delta);
-  };
-
-  useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
-  useHandleSizeFromOutsideComponent({
-    nodeRef: nodeRef,
-    startSize: startSize,
-    bounds: bounds,
-    isRightAligned: isRightAligned,
-    size: size,
-    setSize: setSize,
-    position: position,
-    setPosition: setPosition
-  });
-  var toolcontainerId = React__default.useRef(Date.now().toString()).current;
-  var headerClassName = "header-".concat(className || toolcontainerId);
-  return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
-    nodeRef: nodeRef,
-    bounds: bounds,
-    cancel: cancel,
-    position: position,
-    onStop: onStopDrag,
-    handle: ".".concat(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: zIndex
-    }, startPosition), sx), {
-      '&:hover .resizableHandle': {
-        display: 'inline'
-      }
-    }),
-    ref: nodeRef,
-    className: "toolContainerDraggable"
-  }, /*#__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;
-};
-
-/* *
- * 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)
- * */
-var segmentStyle = {
-  margin: '0 2px',
-  verticalAlign: 'middle',
-  fontSize: 14,
-  fontWeight: 500,
-  letterSpacing: 0.25,
-  justifyContent: 'center'
-};
-var styles$1 = {
-  icon: Object.assign(Object.assign({}, segmentStyle), {
-    backgroundColor: 'geowebColors.textInputField.default.rgba',
-    width: 40,
-    height: 40,
-    display: 'inline-flex',
-    alignItems: 'center',
-    borderRadius: 1
-  }),
-  connect: Object.assign(Object.assign({}, segmentStyle), {
-    fontSize: 18
-  }),
-  divider: Object.assign(Object.assign({}, segmentStyle), {
-    margin: '0 6px',
-    fontSize: 18
-  })
-};
-
-var ShortCutSegment = function ShortCutSegment(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      children = _ref.children;
-
-  if (type === 'divider') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.divider,
-      "data-testid": "segment-divider",
-      component: "span"
-    }, children);
-  }
-
-  if (type === 'icon') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.icon,
-      "data-testid": "segment-icon",
-      component: "span"
-    }, children);
-  }
-
-  if (type === 'connect') {
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.connect,
-      "data-testid": "segment-connect",
-      component: "span"
-    }, children);
-  }
-
-  return /*#__PURE__*/React__default.createElement(Typography, {
-    sx: segmentStyle,
-    "data-testid": "segment-text",
-    component: "span"
-  }, 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)
- * */
-var shortcuts = [{
-  title: 'Choose a selected time',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "Left click on the time slider rail")
-}, {
-  title: 'Move backwards/forwards in selected time',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "Mouse scroll over the time slider rail")
-}, {
-  title: 'Move 1 step backwards/forwards in selected time',
-  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"
-  }, "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"
-  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowRight, null)))
-}, {
-  title: 'Toggle hide/show time slider',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, "t")
-}, {
-  title: 'Change time slider scale (visible timespan)',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "Hold left click over Time Slider legend + drag left or right")
-}, {
-  title: 'Expand/shrink time slider scale (visible timespan)',
-  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "+ Scroll the slider rail"))
-}, {
-  title: 'Mouseover to change selected time',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "Hover over Time Slider rail or time indicator")
-}, {
-  title: 'Mouseover switch 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"))
-}, {
-  title: 'Change time step or animation 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"
-  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider 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"
-  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
-}, {
-  title: 'Return to current time',
-  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, "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, {
-    type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)))
-}, {
-  title: 'Change layer manager values by scrolling',
-  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
-    type: "icon"
-  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + 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, " + Mouse scroll"))
-}, {
-  title: 'Change size of layer manager to 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"))
-}, {
-  title: 'Change size of layer manager to 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"))
-}, {
-  title: 'Change size of layer manager to 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"))
-}];
-var getShortcutList = function getShortcutList(shortcutList) {
-  var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
-  return shortcutList.map(function (_ref) {
-    var title = _ref.title,
-        description = _ref.description,
-        descriptionMac = _ref.descriptionMac;
-    return Object.assign({
-      title: title,
-      description: description
-    }, platform === 'windows' ? {
-      description: description
-    } : {
-      description: descriptionMac || description
-    });
-  });
-};
-
-var ShortcutList = function ShortcutList(_ref2) {
-  var _ref2$platform = _ref2.platform,
-      platform = _ref2$platform === void 0 ? 'windows' : _ref2$platform;
-  var rows = getShortcutList(shortcuts, platform);
-  return /*#__PURE__*/React__default.createElement(List, {
-    "data-testid": "list-".concat(platform)
-  }, rows.map(function (row, index) {
-    return /*#__PURE__*/React__default.createElement(ListItem, {
-      sx: {
-        minHeight: 56
-      },
-      divider: index !== rows.length - 1,
-      key: row.title
-    }, /*#__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
-      }
-    }, row.title), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      sx: {
-        alignItems: 'center'
-      }
-    }, row.description))));
-  }));
-};
-
-var TabPanel = function TabPanel(_ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      index = _ref.index;
-  return /*#__PURE__*/React__default.createElement("div", {
-    role: "tabpanel",
-    hidden: value !== index,
-    id: "tabpanel-".concat(index),
-    "aria-labelledby": "tab-".concat(index)
-  }, value === index && children);
-};
-
-var styles = {
-  container: {
-    margin: '0px 20px',
-    maxHeight: '90vh'
-  },
-  tab: {
-    fontSize: 12
-  }
-};
-
-var CheatSheet = function CheatSheet() {
-  var _React$useState = React__default.useState(0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      activeTab = _React$useState2[0],
-      onChangeActiveTab = _React$useState2[1];
-
-  var onChangeTab = function onChangeTab(_event, newValue) {
-    onChangeActiveTab(newValue);
-  };
-
-  return /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles.container
-  }, /*#__PURE__*/React__default.createElement(Tabs, {
-    value: activeTab,
-    onChange: onChangeTab,
-    "aria-label": "platform"
-  }, /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles.tab,
-    label: "Windows"
-  }), /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles.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"
-  })));
-};
-
-var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-  var _React$useState = React__default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var onClose = function onClose() {
-    setOpen(false);
-  };
-
-  var onOpen = function onOpen() {
-    setOpen(true);
-  };
-
-  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
-  }, "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: "Cheat sheet",
-    headerSize: "small",
-    isOpen: true,
-    onClose: onClose,
-    bounds: "parent"
-  }, /*#__PURE__*/React__default.createElement(CheatSheet, null))));
-};
-
-var useUserMenu = function useUserMenu() {
-  var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-  var _React$useState = React__default.useState(open),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var onClose = function onClose() {
-    return setOpen(false);
-  };
-
-  var onToggle = function onToggle() {
-    return setOpen(!isOpen);
-  };
-
-  return {
-    isOpen: isOpen,
-    onClose: onClose,
-    onToggle: onToggle
-  };
-};
-
-/* *
- * 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)
- * */
-var getInitials = function getInitials(name) {
-  if (!name) {
-    return '';
-  }
-
-  var nameWithoutEmail = name.split('@')[0];
-  var array = nameWithoutEmail.split('.');
-
-  switch (array.length) {
-    case 1:
-      return array[0].charAt(0).toUpperCase();
-
-    default:
-      return array[0].charAt(0).toUpperCase() + array[array.length - 1].charAt(0).toUpperCase();
-  }
-};
-
-var sliderHeaderStyle = {
-  fontFamily: 'Roboto-Black, Roboto',
-  fontSize: 12,
-  color: 'geowebColors.typographyAndIcons.text',
-  padding: '11px 0 11px 16px'
-};
-var sliderStyle = {
-  '& span.selectedLabel': {
-    fontWeight: 'bold'
-  },
-  '& .MuiSlider-thumb': {
-    backgroundColor: 'geowebColors.customSlider.thumb',
-    boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
-    '&.Mui-focusVisible, &:hover, &:active': {
-      boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
-    }
-  },
-  '& .MuiSlider-mark': {
-    backgroundColor: 'geowebColors.customSlider.mark'
-  },
-  '& .MuiSlider-markLabel': {
-    fontFamily: 'Roboto-Black, Roboto',
-    fontSize: 12,
-    color: 'geowebColors.typographyAndIcons.text'
-  },
-  '& .MuiSlider-track': {
-    color: 'geowebColors.customSlider.track',
-    backgroundColor: 'geowebColors.customSlider.track'
-  },
-  '& .MuiSlider-rail': {
-    backgroundColor: 'geowebColors.customSlider.rail',
-    opacity: 1
-  },
-  '&.Mui-disabled': {
-    '& .MuiSlider-thumb': {
-      backgroundColor: 'geowebColors.customSlider.thumbDisabled'
-    },
-    '& .MuiSlider-mark': {
-      backgroundColor: 'geowebColors.customSlider.markDisabled'
-    },
-    '& .MuiSlider-track': {
-      backgroundColor: 'geowebColors.customSlider.trackDisabled',
-      color: 'geowebColors.customSlider.trackDisabled'
-    },
-    '& .MuiSlider-rail': {
-      backgroundColor: 'geowebColors.customSlider.railDisabled',
-      opacity: 1
-    }
-  }
-};
-var CustomSlider = function CustomSlider(_a) {
-  var value = _a.value,
-      _a$orientation = _a.orientation,
-      orientation = _a$orientation === void 0 ? 'vertical' : _a$orientation,
-      _a$shouldAutoFocus = _a.shouldAutoFocus,
-      shouldAutoFocus = _a$shouldAutoFocus === void 0 ? false : _a$shouldAutoFocus,
-      props = __rest(_a, ["value", "orientation", "shouldAutoFocus"]); // Add custom class (for bold text) to label adjacent to thumb component.
-  // Material UI doesn't support highlighing only adjacent label
-  // when track is highlighted everywhere below selected value.
-
-
-  var element = React.useRef(null);
-  var themeContext = useThemeContext();
-  React.useEffect(function () {
-    var activeMarkLabelElements = element.current.getElementsByClassName('MuiSlider-markLabelActive');
-
-    var _reverse = _toConsumableArray(activeMarkLabelElements).reverse(),
-        _reverse2 = _toArray(_reverse),
-        first = _reverse2[0],
-        rest = _reverse2.slice(1);
-
-    if (first) {
-      first.classList.add('selectedLabel');
-    }
-
-    rest.forEach(function (element) {
-      return element.classList.remove('selectedLabel');
-    });
-  }, [value, themeContext.isDark]); // autofocus
-
-  React.useEffect(function () {
-    if (shouldAutoFocus && element.current) {
-      var thumb = element.current.querySelector('.MuiSlider-thumb input');
-      thumb.focus();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  return /*#__PURE__*/React.createElement(Slider, Object.assign({
-    sx: sliderStyle,
-    ref: element,
-    value: value,
-    orientation: orientation
-  }, props));
-};
-
-/* *
- * 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)
- * */
-
-var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'primary' : _a$variant,
-      className = _a.className,
-      _a$value = _a.value,
-      value = _a$value === void 0 ? 0 : _a$value,
-      props = __rest(_a, ["variant", "className", "value"]);
-
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    ref: ref,
-    className: "".concat(variant, " ").concat(className),
-    value: value
-  }, props));
-});
-
-var getPosition = function getPosition(menuPosition) {
-  switch (menuPosition) {
-    case 'bottom':
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-
-    default:
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-  }
-};
-var ToggleMenu = function ToggleMenu(_ref) {
-  var _ref$buttonTestId = _ref.buttonTestId,
-      buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
-      _ref$menuPosition = _ref.menuPosition,
-      menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
-      menuItems = _ref.menuItems,
-      children = _ref.children,
-      buttonSx = _ref.buttonSx,
-      _ref$tooltipTitle = _ref.tooltipTitle,
-      tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
-      _ref$menuTitle = _ref.menuTitle,
-      menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
-      _ref$isDefaultOpen = _ref.isDefaultOpen,
-      isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
-      _ref$buttonIcon = _ref.buttonIcon,
-      buttonIcon = _ref$buttonIcon === void 0 ? /*#__PURE__*/React.createElement(Options, null) : _ref$buttonIcon;
-
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
-
-  var isOpen = Boolean(anchorEl);
-
-  var _getPosition = getPosition(menuPosition),
-      anchorOrigin = _getPosition.anchorOrigin,
-      transformOrigin = _getPosition.transformOrigin;
-
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleClose = function handleClose(event) {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-
-  React.useEffect(function () {
-    if (isDefaultOpen) {
-      setAnchorEl(document.getElementById(buttonTestId));
-    }
-  }, [isDefaultOpen, buttonTestId]);
-  return /*#__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
-  }, buttonIcon), /*#__PURE__*/React.createElement(Menu, {
-    anchorEl: anchorEl,
-    open: isOpen,
-    onClose: function onClose(event, reason) {
-      if (reason === 'tabKeyDown') {
-        return;
-      }
-
-      handleClose(event);
-    },
-    anchorOrigin: anchorOrigin,
-    transformOrigin: transformOrigin,
-    BackdropProps: {
-      style: {
-        opacity: 0,
-        transition: 'none'
-      }
-    },
-    MenuListProps: Object.assign({}, children && {
-      style: {
-        padding: '0px'
-      }
-    })
-  }, menuTitle && /*#__PURE__*/React.createElement(ListSubheader, {
-    "data-testid": "toggleMenuTitle"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    sx: {
-      fontSize: '12px'
-    }
-  }, menuTitle)), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
-    var text = menuItem.text,
-        icon = menuItem.icon,
-        action = menuItem.action;
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: text,
-      onClick: function onClick(event) {
-        action(event);
-        handleClose(event);
-      }
-    }, icon && /*#__PURE__*/React.createElement(ListItemIcon, null, icon), /*#__PURE__*/React.createElement(Typography, null, text));
-  }) : /*#__PURE__*/React.createElement("div", null) // Needed to make the menu work without any menuItems
-  , children));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
-  var hasBackgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return Object.assign({
-    width: '100%',
-    height: 32,
-    fontWeight: 500,
-    fontSize: function fontSize(theme) {
-      return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
-    },
-    color: isEnabled ? 'geowebColors.layerManager.tableRowDefaultText.rgba' : 'geowebColors.layerManager.tableRowDisabledText.rgba',
-    '& .MuiOutlinedInput-input': {
-      padding: '6px 24px 6px 8px'
-    },
-    '& .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'transparent!important'
-    },
-    '&:hover': {
-      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
-      borderRadius: 0
-    },
-    '&.Mui-focused .MuiSelect-select': {
-      outline: function outline(theme) {
-        return theme.palette.geowebColors.buttons.tool.focus.outline;
-      },
-      borderRadius: 0
-    },
-    '& .MuiSvgIcon-root': {
-      transition: 'none',
-      fill: function fill(theme) {
-        return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
-      }
-    },
-    '&>div': {
-      paddingLeft: '8px!important'
-    }
-  }, hasBackgroundColor && backgroundColor);
-};
-var backgroundColor = {
-  '&:hover .MuiSelect-select': {
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
-    borderRadius: 0
-  },
-  '&.Mui-focused .MuiSelect-select': {
-    outline: function outline(theme) {
-      return theme.palette.geowebColors.buttons.tool.focus.outline;
-    },
-    borderRadius: 0,
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-  },
-  '&:hover&.MuiButton-root': {
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-  },
-  '&:focus&.MuiButton-root': {
-    border: function border(theme) {
-      return theme.palette.geowebColors.buttons.tool.focus.outline;
-    },
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
-    transition: 'border'
-  }
-};
-
-var TooltipSelect = function TooltipSelect(_a) {
-  var tooltip = _a.tooltip,
-      _a$list = _a.list,
-      list = _a$list === void 0 ? [] : _a$list,
-      _a$currentIndex = _a.currentIndex,
-      currentIndex = _a$currentIndex === void 0 ? -1 : _a$currentIndex,
-      _a$onChangeMouseWheel = _a.onChangeMouseWheel,
-      onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
-      _a$requiresCtrlToChan = _a.requiresCtrlToChange,
-      requiresCtrlToChange = _a$requiresCtrlToChan === void 0 ? false : _a$requiresCtrlToChan,
-      isEnabled = _a.isEnabled,
-      noStyling = _a.noStyling,
-      hasBackgroundColor = _a.hasBackgroundColor,
-      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectOpen = _React$useState2[0],
-      setSelectOpen = _React$useState2[1];
-
-  var _useControlledTooltip = useControlledTooltip(),
-      _useControlledTooltip2 = _slicedToArray(_useControlledTooltip, 2),
-      tooltipOpen = _useControlledTooltip2[0],
-      setTooltipOpen = _useControlledTooltip2[1];
-
-  var theme = useTheme();
-  var onWheel = React.useCallback(function (event) {
-    if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
-      if (selectOpen) {
-        return;
-      }
-
-      var direction = event.deltaY < 0 ? 1 : -1;
-      var newIndex = currentIndex - direction;
-
-      if (newIndex < 0 || newIndex >= list.length) {
-        return;
-      }
-
-      onChangeMouseWheel(list[newIndex]);
-    }
-  }, [selectOpen, currentIndex, list, onChangeMouseWheel, requiresCtrlToChange]);
-  var onOpen = React.useCallback(function () {
-    setSelectOpen(true);
-    setTooltipOpen(false);
-  }, [setTooltipOpen]);
-  var onClose = React.useCallback(function () {
-    setSelectOpen(false);
-  }, []);
-  var onMouseEnter = React.useCallback(function () {
-    if (!selectOpen) {
-      setTooltipOpen(true);
-    }
-  }, [selectOpen, setTooltipOpen]);
-  var onMouseLeave = React.useCallback(function () {
-    setTooltipOpen(false);
-  }, [setTooltipOpen]);
-  var onFocus = React.useCallback(function () {
-    setTooltipOpen(true);
-  }, [setTooltipOpen]);
-  var onBlur = React.useCallback(function () {
-    setTooltipOpen(false);
-  }, [setTooltipOpen]);
-  var selectStyles = noStyling ? {} : tooltipContainerStyles(!!isEnabled, hasBackgroundColor);
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: tooltip,
-    placement: "top",
-    open: tooltipOpen
-  }, /*#__PURE__*/React.createElement(Select, Object.assign({
-    variant: "standard",
-    disableUnderline: true,
-    onOpen: onOpen,
-    onClose: onClose,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onWheel: onWheel,
-    MenuProps: {
-      BackdropProps: {
-        sx: {
-          '&.MuiBackdrop-root': {
-            backgroundColor: 'transparent'
-          }
-        }
-      },
-      sx: Object.assign({
-        '& ul': {
-          backgroundColor: 'geowebColors.background.surface'
-        },
-        '& li': {
-          fontSize: '16px',
-          padding: '12px',
-          '&:hover': {
-            backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-          },
-          '&.Mui-selected': {
-            color: 'geowebColors.buttons.tool.active.color',
-            backgroundColor: 'geowebColors.buttons.tool.active.fill',
-            boxShadow: "none",
-            '&:hover': {
-              backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
-            },
-            '&:focus': {
-              backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
-            },
-            '.MuiListItemIcon-root': {
-              color: 'geowebColors.buttons.tool.active.color'
-            }
-          },
-          '&:after': {
-            background: 'none!important'
-          },
-          '&.Mui-disabled': {
-            fontSize: '12px',
-            opacity: 0.67,
-            padding: '0px 12px',
-            '&.MuiMenuItem-root': {
-              minHeight: '30px!important'
-            }
-          }
-        }
-      }, theme.palette.geowebColors.tooltips.tooltipSelect.menu)
-    },
-    sx: Object.assign(Object.assign({}, selectStyles), theme.palette.geowebColors.tooltips.tooltipSelect.select)
-  }, props)));
-};
-
-function withEggs(eggs) {
-  return function (Component) {
-    var WithEggs = function WithEggs(props) {
-      var store = useStore();
-
-      var _React$useState = React.useState(function () {
-        return store.addEggs(eggs);
-      }),
-          _React$useState2 = _slicedToArray(_React$useState, 1),
-          remover = _React$useState2[0];
-
-      React.useEffect(function () {
-        return remover;
-      }, [remover]);
-      return /*#__PURE__*/React.createElement(Component, Object.assign({}, props));
-    };
-
-    WithEggs.displayName = "withEggs(".concat(Component.displayName || Component.name || 'Component', ")");
-    return WithEggs;
-  };
-}
-
-var CustomAccordion = function CustomAccordion(_a) {
-  var title = _a.title,
-      _a$defaultExpanded = _a.defaultExpanded,
-      defaultExpanded = _a$defaultExpanded === void 0 ? true : _a$defaultExpanded,
-      _a$disableGutters = _a.disableGutters,
-      disableGutters = _a$disableGutters === void 0 ? true : _a$disableGutters,
-      _a$expandedElevation = _a.expandedElevation,
-      expandedElevation = _a$expandedElevation === void 0 ? 3 : _a$expandedElevation,
-      _a$collapsedElevation = _a.collapsedElevation,
-      collapsedElevation = _a$collapsedElevation === void 0 ? 0 : _a$collapsedElevation,
-      _a$transitionDuration = _a.transitionDuration,
-      transitionDuration = _a$transitionDuration === void 0 ? 150 : _a$transitionDuration,
-      detailsSx = _a.detailsSx,
-      children = _a.children,
-      props = __rest(_a, ["title", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "children"]);
-
-  var _React$useState = React.useState(defaultExpanded),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      expanded = _React$useState2[0],
-      setExpanded = _React$useState2[1];
-
-  return /*#__PURE__*/React.createElement(Accordion, Object.assign({}, props, {
-    defaultExpanded: defaultExpanded,
-    elevation: expanded ? expandedElevation : collapsedElevation,
-    onChange: function onChange(_event, expanded) {
-      return setExpanded(expanded);
-    },
-    disableGutters: disableGutters,
-    TransitionProps: {
-      timeout: transitionDuration
-    }
-  }), /*#__PURE__*/React.createElement(AccordionSummary, {
-    expandIcon: /*#__PURE__*/React.createElement(ChevronDown, null)
-  }, title), /*#__PURE__*/React.createElement(AccordionDetails, {
-    sx: detailsSx
-  }, children));
-};
-
-var highlightStyle = {
-  background: '#ffeecc'
-};
-
-var SearchHighlight = function SearchHighlight(_ref) {
-  var _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      search = _ref.search;
-
-  if (search === '') {
-    return /*#__PURE__*/React__default.createElement("span", null, text);
-  }
-
-  var searchWords = search.split(' ').reduce(function (words, word) {
-    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
-  }, []);
-  var searchRegex = searchWords.map(function (word) {
-    return escapeRegExp(word);
-  }).join('|');
-  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
-    var key = "".concat(part, "-").concat(index);
-
-    if (searchWords.some(function (search) {
-      return part.toLocaleLowerCase().includes(search);
-    })) {
-      return /*#__PURE__*/React__default.createElement("mark", {
-        key: key,
-        style: highlightStyle
-      }, part);
-    }
-
-    return /*#__PURE__*/React__default.createElement("span", {
-      key: key
-    }, part);
-  }));
-};
-
-/* *
- * 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)
- * */
-var DEFAULT_ERROR_MESSAGE = 'An error has occurred'; // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
-
-var isAxiosError = function isAxiosError(error) {
-  return error.isAxiosError !== undefined;
-};
-var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
-  var data = error.response && error.response.data;
-
-  if (data && typeof data === 'string') {
-    return data;
-  }
-
-  if (data && data.message && typeof data.message === 'string') {
-    return data.message;
-  }
-
-  if (error.message) {
-    return error.message;
-  }
-
-  return DEFAULT_ERROR_MESSAGE;
-};
-var getErrorMessage = function getErrorMessage(error) {
-  if (isAxiosError(error)) {
-    return getAxiosErrorMessage(error);
-  }
-
-  return error.message || DEFAULT_ERROR_MESSAGE;
-};
-var getAxiosWarningMessage = function getAxiosWarningMessage(error) {
-  var data = error.response && error.response.data;
-
-  if (data && data.WarningMessage && typeof data.WarningMessage === 'string') {
-    return data.WarningMessage;
-  }
-
-  return '';
-};
-var getWarningMessage = function getWarningMessage(error) {
-  if (isAxiosError(error)) {
-    return getAxiosWarningMessage(error);
-  }
-
-  return '';
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-/**
- * Parsing date strings with geoweb dateUtils:
- *
- * An ISO String *with timezone* can safely be parsed directly to a date:
- *
- * date = new Date('2022-10-10T15:30:00Z')
- * date = new Date('2022-10-10T15:30:00+00:00')
- * date = new Date('2022-10-10T15:30:00+02:00')
- *
- * or using the dateUtils isoStringToDate function *with utc=false*
- *
- * date = isoStringToDate('2022-10-10T15:30:00Z', false)
- *
- * An ISO String *without a timezone* can be parsed with isoStringToDate
- *
- * date = isoStringToDate('2022-10-10T15:30:00')
- *
- * *Do not parse ISO without timezone using `new Date()` unless you correct for the local timezone*
- *
- * To parse an arbitrary date string with timezone use:
- *
- * date = stringToDate('2022.11.10, 11:15 +01:00', 'yyyy.MM.dd, HH:mm xxx', false)
- *
- * To parse an arbitrary date string without timezone use:
- *
- * date = stringToDate('2022.11.10, 11:15', 'yyyy.MM.dd, HH:mm')
- *
- *
- * To safely convert dates to utc strings use:
- *
- * date.toISOString()
- *
- * To get parts of UTC time use
- *
- * date.getUTCHours()
- * date.getUTCMins()
- *
- * To parse an arbitrary date string to a UTC string use:
- *
- * dateToString(new Date('2022-10-10T15:30:00Z', 'HH:ss dd MMM yyyy')
- *
- */
-
-/**
- * Parse an ISO string to a date
- *
- * Expects the following props:
- * @param {string} input - string containing date
- *
- * @returns {Date} Date
- * @example
- * ``` isoStringToDate("2022-5-10T20:32:00+00:00")) ```
- */
-
-var isoStringToDate = function isoStringToDate(input) {
-  var utc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var parsed = parseISO(input);
-
-  if (utc) {
-    return setUTCDate(parsed);
-  }
-
-  return parsed;
-};
-/**
- * Parse a string to a date
- *
- * ***NOTE: String will be parsed in local time if utc is set to false***
- *
- * Expects the following props:
- * @param {string} input - string containing date
- * @param {string} strFormat - format of the string, see: https://date-fns.org/v2.29.3/docs/parse
- * @param {boolean} utc [ default = true ] - boolean indicating whether to parse as UTC
- * @param {Date} referenceDate [ default = new Date() ] - defines values missing from the parsed dateString
- *
- * @returns {Date} Date
- * @example
- * ``` stringToDate("2022 5 10 20:32", 'yyyy M d HH:mm')) ```
- */
-
-var stringToDate = function stringToDate(input, strFormat) {
-  var utc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var referenceDate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Date();
-  var parsed = parse(input, strFormat, referenceDate);
-
-  if (utc) {
-    return setUTCDate(parsed);
-  }
-
-  return parsed;
-};
-/**
- * Use this if you initialise a date without a timezone to set it to utc correctly
- * eg.
- *   new Date(2022, 10, 12, 15, 30)
- * should be:
- *   setUTCDate(new Date(2022, 10, 12, 15, 30))
- *
- * Expects the following props:
- * @param {Date} inDate - date to be set to UTC
- *
- * @returns {Date} - Date in UTC
- * @example
- * ``` setUTCDate(new Date(2022, 10, 12, 15, 30)) ```
- */
-
-var setUTCDate = function setUTCDate(inDate) {
-  var utcDate = new Date(inDate);
-  utcDate.setUTCFullYear(inDate.getFullYear(), inDate.getMonth(), inDate.getDate());
-  utcDate.setUTCHours(inDate.getHours(), inDate.getMinutes(), inDate.getSeconds(), inDate.getMilliseconds());
-  return utcDate;
-};
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- * @param {string} strFormat - format of string
- * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
- *
- * @returns {string} - formatted date string
- * @example
- * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
- */
-
-var dateToString = function dateToString(inDate, strFormat) {
-  var utc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
-  if (utc) {
-    return format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat);
-  }
-
-  return format(inDate, strFormat);
-};
-/**
- * Find out if a date is between two other dates.
- *
- * Inclusivity parameter matches that used in momentjs where '[' indicates inclusion and '(' indicates exclusion.
- *
- * Expects the following props:
- * @param {Date} date - date to be tested
- * @param {Date} from - first date
- * @param {Date} to - last date
- * @param {string} inclusivity - [default: '()'] Must be one of : '()', '[]', '(]', '[)'
- *
- * @returns {boolen} - true if date is between, otherwise false
- *
- */
-
-var isBetween = function isBetween(date, from, to) {
-  var inclusivity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '()';
-
-  if (!['()', '[]', '(]', '[)'].includes(inclusivity)) {
-    throw new Error('Inclusivity parameter must be one of (), [], (], [)');
-  }
-
-  var isBeforeEqual = inclusivity[0] === '[';
-  var isAfterEqual = inclusivity[1] === ']';
-  return (isBeforeEqual ? isEqual(from, date) || isBefore(from, date) : isBefore(from, date)) && (isAfterEqual ? isEqual(to, date) || isAfter(to, date) : isAfter(to, date));
-};
-/**
- * Creates a new Date object with the specified date and time, or the current date and time if no arguments are provided.
- *
- * @param yearOrIsoString The year for the new Date object, or an ISO-formatted string representing the date and time.
- * @param month The month for the new Date object (0-11).
- * @param day The day for the new Date object (1-31).
- * @param hours The hour for the new Date object (0-23).
- * @param minutes The minute for the new Date object (0-59).
- * @param seconds The second for the new Date object (0-59).
- * @param milliseconds The millisecond for the new Date object (0-999).
- * @returns A new Date object with the specified date and time, or the current date and time if no arguments are provided.
- *
- * @example
- * createDate(2022, 11, 13);
- * // => 2022-12-13T00:00:00.000Z
- *
- * @example
- * createDate('2022-12-13T00:00:00.000Z');
- * // => 2022-12-13T00:00:00.000Z
- */
-
-var createDate = function createDate(yearOrIsoString, month, day) {
-  var hours = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var minutes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  var seconds = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
-  var milliseconds = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
-
-  if (yearOrIsoString === undefined) {
-    return new Date();
-  }
-
-  if (typeof yearOrIsoString === 'string') {
-    return new Date(yearOrIsoString);
-  }
-
-  return new Date(yearOrIsoString, month, day, hours, minutes, seconds, milliseconds);
-};
-/**
- *
- * @param date
- * @param duration
- * @returns {Date} the new Date
- */
-
-var add = function add(date, duration) {
-  return add$1(date, duration);
-};
-/**
- *
- * @param date
- * @param duration
- * @returns {Date} the new Date
- */
-
-var sub = function sub(date, duration) {
-  return sub$1(date, duration);
-};
-/**
- * Finds the number of minuts between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of minutes
- */
-
-var differenceInMinutes = function differenceInMinutes(dateLeft, dateRight) {
-  return differenceInMinutes$1(dateLeft, dateRight);
-};
-/**
- * Finds the number of hours between to dates
- *
- * @param dateLeft - the later date
- * @param dateRight - the earlier date
- * @returns {number} the number of hours
- */
-
-var differenceInHours = function differenceInHours(dateLeft, dateRight) {
-  return differenceInHours$1(dateLeft, dateRight);
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-
-var index = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    isoStringToDate: isoStringToDate,
-    stringToDate: stringToDate,
-    setUTCDate: setUTCDate,
-    dateToString: dateToString,
-    isBetween: isBetween,
-    createDate: createDate,
-    add: add,
-    sub: sub,
-    differenceInMinutes: differenceInMinutes,
-    differenceInHours: differenceInHours
-});
-
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, SearchHighlight, StatusTag, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };