@opengeoweb/shared 2.0.1

package/shared.esm.js

@@ -0,0 +1,2220 @@
+import * as React from 'react';
+import React__default from 'react';
+import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider } from '@material-ui/core';
+import { Close, DragIndicator } from '@material-ui/icons';
+import { useFormContext } from 'react-hook-form';
+import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
+import { useThemeContext } from '@opengeoweb/theme';
+import { throttle } from 'lodash';
+
+/* *
+ * 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 bgColors = {
+  green: '#fcffeb',
+  grey: '#f8f9f9',
+  purple: '#f8f9f9',
+  red: '#f9e8ea',
+  yellow: '#fff8eb'
+};
+var borderColors = {
+  green: '#72bb23',
+  grey: '#9b9fb0',
+  purple: '#9d9df2',
+  red: '#f24a00',
+  yellow: '#ffa800'
+};
+
+var tagStyle = function tagStyle(color) {
+  // Set color to grey for summary
+  var bgcolor = bgColors[color];
+  var borderColor = borderColors[color];
+  return {
+    bgcolor: bgcolor,
+    borderColor: borderColor,
+    m: 0,
+    p: 0.5,
+    border: 2,
+    borderRadius: 4,
+    style: {
+      width: '85px',
+      height: '20px'
+    },
+    color: '#051039',
+    maxHeight: '1em',
+    boxSizing: 'content-box'
+  };
+};
+
+var StatusTag = function StatusTag(_ref) {
+  var content = _ref.content,
+      color = _ref.color;
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, tagStyle(color), {
+    "data-testid": "statusTag"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, content));
+};
+
+/*! *****************************************************************************
+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 useStyles$d = makeStyles(function () {
+  return {
+    dialogHeader: {
+      zIndex: 1,
+      padding: '8px 20px',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    dialogContent: {
+      padding: '40px 20px 0px 20px'
+    },
+    dialogOptions: {
+      padding: '4px 20px 16px 20px'
+    }
+  };
+});
+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,
+      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
+
+  var classes = useStyles$d();
+
+  other.catchOnCancel;
+      var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
+
+
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    "data-testid": "confirmationDialog",
+    open: open,
+    maxWidth: "sm",
+    fullWidth: true,
+    disableBackdropClick: true,
+    transitionDuration: 0
+  }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
+    disableTypography: true,
+    className: classes.dialogHeader
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    "data-testid": "confirmationDialog-title"
+  }, title), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "confirmationDialog-close",
+    "aria-label": "close",
+    onClick: function onClick() {
+      return onClose('CLOSED');
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, description), content), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "conformationDialog-cancel",
+    color: "secondary",
+    variant: "outlined",
+    onClick: function onClick() {
+      return onClose('CANCELLED');
+    },
+    autoFocus: true
+  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "conformationDialog-confirm",
+    color: "secondary",
+    variant: "contained",
+    onClick: onSubmit
+  }, confirmLabel)));
+};
+
+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 _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.");
+}
+
+/* *
+ * 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 = React.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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+
+var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
+var useDraftFormHelpers = function useDraftFormHelpers() {
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue,
+      register = _useFormContext.register;
+
+  var isDraft = function isDraft() {
+    return getValues(HIDDEN_INPUT_HELPER_IS_DRAFT) === true;
+  };
+
+  var isRequired = function isRequired(value) {
+    if (!isDraft() && isEmpty(value)) {
+      return errorMessages.required;
+    }
+
+    return true;
+  };
+
+  var toggleIsDraft = function toggleIsDraft(isDraft) {
+    return setValue(HIDDEN_INPUT_HELPER_IS_DRAFT, isDraft);
+  };
+
+  var DraftFieldHelper = function DraftFieldHelper() {
+    return /*#__PURE__*/React.createElement("input", Object.assign({
+      defaultValue: "false"
+    }, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
+      type: "hidden"
+    }));
+  };
+
+  return {
+    isRequired: isRequired,
+    toggleIsDraft: toggleIsDraft,
+    isDraft: isDraft,
+    DraftFieldHelper: DraftFieldHelper
+  };
+};
+
+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();
+
+  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 useStyles$c = makeStyles(function () {
+  return {
+    title: {
+      fontSize: '14px',
+      fontWeight: 'normal',
+      marginTop: '0px!important'
+    },
+    info: {
+      fontSize: '16px'
+    }
+  };
+});
+
+var getIcon = function getIcon(severity) {
+  switch (severity) {
+    case 'info':
+      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M12 4c4.418 0 8 3.581 8 8 0 4.418-3.582 8-8 8s-8-3.582-8-8c0-4.419 3.582-8 8-8zm1.052 6H10v1.613h.949v3.774H10V17h4v-1.613h-.948V10zM11.99 6c-.837 0-1.491.654-1.491 1.49 0 .837.654 1.51 1.49 1.51.837 0 1.51-.673 1.51-1.51 0-.836-.673-1.49-1.51-1.49z",
+        transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)",
+        fill: "#0062E6"
+      }));
+
+    case 'success':
+      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M16.51 10.034l-5.633 5.633-3.387-3.386c-.369-.37-.369-.973 0-1.343.36-.357.983-.357 1.342 0l2.045 2.046 4.292-4.291c.357-.357.983-.359 1.342 0 .368.369.368.97 0 1.341M12 4C7.582 4 4 7.582 4 12s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8",
+        transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)",
+        fill: "#72BB23"
+      }));
+
+    case 'warning':
+      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
+        transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)",
+        fill: "#FFA800"
+      }));
+
+    case 'error':
+    default:
+      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
+        transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)",
+        fill: "#C00000"
+      }));
+  }
+};
+
+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;
+  var classes = useStyles$c();
+  return /*#__PURE__*/React.createElement(Alert, {
+    "data-testid": dataTestId,
+    severity: severity,
+    icon: getIcon(severity)
+  }, /*#__PURE__*/React.createElement(AlertTitle, {
+    className: classes.title
+  }, title), info && /*#__PURE__*/React.createElement("div", {
+    className: classes.info
+  }, info));
+};
+
+/* *
+ * 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 useStyles$b = makeStyles(function () {
+  return {
+    wrapper: {
+      height: '100vh',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    main: {
+      flex: 1,
+      position: 'relative'
+    }
+  };
+});
+
+var AppLayout = function AppLayout(_ref) {
+  var header = _ref.header,
+      children = _ref.children;
+  var classes = useStyles$b();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classes.wrapper
+  }, header, /*#__PURE__*/React__default.createElement("main", {
+    className: classes.main
+  }, children));
+};
+
+var img = "data:image/svg+xml,%3c!--Licensed under the Apache License%2c Version 2.0 (the 'License')%3byou 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.0Unless required by applicable law or agreed to in writing%2c softwaredistributed under the License is distributed on an 'AS IS' BASIS%2cWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND%2c either express or implied.See the License for the specific language governing permissions andlimitations under the License.Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)Copyright 2021 - Finnish Meteorological Institute (FMI)--%3e%3csvg id='svg4550' xmlnsRdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='55.156mm' viewBox='0 0 289.84072 195.43326' width='81.799mm' version='1.1' xmlnsCc='http://creativecommons.org/ns%23' xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsDc='http://purl.org/dc/elements/1.1/'%3e %3cdefs id='defs14'%3e %3clinearGradient id='linearGradient4263' y2='113.1' gradientUnits='userSpaceOnUse' y1='76.066' gradientTransform='translate(0 -.0012816)' x2='199.26' x1='160.9'%3e %3cstop id='stop4259' stop-color='white' stop-opacity='.33333' offset='0'/%3e %3cstop id='stop4261' stop-color='white' stop-opacity='0' offset='1'/%3e %3c/linearGradient%3e %3clinearGradient id='linearGradient4240' y2='79.833' gradientUnits='userSpaceOnUse' x2='120.82' y1='120.77' x1='128.56'%3e %3cstop id='stop4236' stop-color='white' stop-opacity='0' offset='0'/%3e %3cstop id='stop4238' stop-color='white' stop-opacity='.33333' offset='1'/%3e %3c/linearGradient%3e %3c/defs%3e %3cg id='layer1' transform='translate(353.49 -626.07)'%3e %3cg id='g4'%3e %3cpath id='path4220' d='m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%230b9ee5'/%3e %3cpath id='path4220-7' opacity='.98' d='m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z' fill='%2360bce9'/%3e %3c/g%3e %3cpath id='path4220-2' d='m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='white' fill-opacity='.31373'/%3e %3c/g%3e %3cg id='g4244' transform='translate(2.926 -1.3827)'%3e %3cpath id='path4329' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%23003232' d='m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3e %3cpath id='path4329-2' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='url(%23linearGradient4263)' d='m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z'/%3e %3cpath id='path4329-7' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' d='m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z' fill='url(%23linearGradient4240)'/%3e %3c/g%3e%3c/svg%3e";
+
+var useStyles$a = makeStyles(function (theme) {
+  var _header;
+
+  return {
+    header: (_header = {
+      height: 40,
+      background: theme.palette.geowebColors.brand.brand,
+      color: theme.palette.common.white,
+      boxShadow: theme.shadows[1],
+      zIndex: 1000
+    }, _defineProperty(_header, theme.breakpoints.down('sm'), {
+      padding: '0 8px'
+    }), _defineProperty(_header, theme.breakpoints.up('sm'), {
+      padding: '0 24px'
+    }), _header),
+    logo: {
+      height: 30
+    },
+    title: {
+      marginLeft: 6,
+      fontSize: '1.25rem',
+      fontWeight: 400,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
+    container: {
+      height: '100%'
+    }
+  };
+});
+
+var AppHeader = function AppHeader(_ref) {
+  var menu = _ref.menu,
+      userMenu = _ref.userMenu,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
+  var classes = useStyles$a();
+  return /*#__PURE__*/React__default.createElement("header", {
+    className: classes.header
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: classes.container,
+    container: true,
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 1,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justify: "flex-start"
+  }, menu)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 10,
+    sm: 6
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justify: "center",
+    alignItems: "center",
+    wrap: "nowrap"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    alt: title,
+    className: classes.logo,
+    src: img
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "h1",
+    className: classes.title
+  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 1,
+    sm: 3,
+    container: true,
+    justify: "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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - 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 useStyles$9 = function useStyles(isRightAligned) {
+  return makeStyles(function () {
+    return {
+      icon: Object.assign(Object.assign({
+        width: 20,
+        height: 20,
+        top: -10,
+        position: 'relative'
+      }, isRightAligned ? {
+        left: -10
+      } : {
+        left: 10,
+        transform: 'rotate(90deg)'
+      }), {
+        zIndex: 100
+      })
+    };
+  });
+};
+
+var ResizeHandle = function ResizeHandle(_ref2) {
+  var isRightAligned = _ref2.isRightAligned;
+  var theme = useTheme();
+  var styles = useStyles$9(isRightAligned)();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    className: styles.icon,
+    "data-testid": "resizeHandle"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    fill: "#ffffff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
+    fill: "".concat(theme.palette.geowebColors.greys.accessible),
+    transform: "rotate(-45 16.687 16.787)"
+  }));
+};
+
+var ResizeComponent = function ResizeComponent(_a) {
+  var _a$startPosition = _a.startPosition,
+      startPosition = _a$startPosition === void 0 ? {
+    left: null,
+    right: null,
+    top: null
+  } : _a$startPosition,
+      children = _a.children,
+      _a$onResizeStart = _a.onResizeStart,
+      onResizeStart = _a$onResizeStart === void 0 ? function () {
+    return null;
+  } : _a$onResizeStart,
+      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, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
+
+  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
+  var onStartResize = React__default.useCallback(function (event, _direction, node) {
+    event.stopPropagation();
+
+    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 onResizeStop = React__default.useCallback(function (_event, _direction, _ref, delta) {
+    var width = parseInt(size.width, 10) + delta.width;
+    var height = parseInt(size.height, 10) + delta.height;
+    setSize({
+      width: width,
+      height: height
+    });
+  }, [setSize, 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: onResizeStop,
+    handleComponent: {
+      bottomRight: /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        isRightAligned: true
+      }),
+      bottomLeft: /*#__PURE__*/React__default.createElement(ResizeHandle, null)
+    },
+    enable: {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false,
+      topRight: false,
+      bottomRight: !isRightAligned,
+      bottomLeft: isRightAligned,
+      topLeft: false
+    },
+    onResizeStart: onStartResize
+  }, 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 useStyles$8 = makeStyles(function (theme) {
+  return {
+    container: {
+      position: 'absolute',
+      top: 38,
+      right: 20,
+      width: 256,
+      borderRadius: 0,
+      boxShadow: theme.shadows[5],
+      background: theme.palette.geowebColors.background.surface
+    },
+    userMenu: {
+      padding: 0,
+      '& > li': {
+        paddingTop: 24,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 16
+      }
+    },
+    button: {
+      color: theme.palette.common.white,
+      padding: 0
+    },
+    avatar: {
+      height: 32,
+      width: 32,
+      fontSize: '0.938rem',
+      fontWeight: 500,
+      color: theme.palette.geowebColors.brand.brand,
+      backgroundColor: theme.palette.common.white
+    }
+  };
+});
+
+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 () {
+    return null;
+  } : _ref$onToggle,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {
+    return null;
+  } : _ref$onClose,
+      children = _ref.children,
+      initials = _ref.initials;
+  var classes = useStyles$8();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    "data-testid": "userButton",
+    onClick: onToggle,
+    className: classes.button
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: classes.avatar
+  }, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
+    className: classes.container,
+    "data-testid": "userMenu"
+  }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
+    onClickAway: onClose,
+    mouseEvent: "onMouseDown"
+  }, /*#__PURE__*/React__default.createElement(MenuList, {
+    className: classes.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, null, /*#__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 useStyles$7 = makeStyles(function (theme) {
+  return {
+    footer: {
+      boxShadow: theme.shadows[1],
+      background: theme.palette.geowebColors.background.surface,
+      textAlign: 'right',
+      height: 18,
+      zIndex: 1
+    }
+  };
+}); // drag handles will be handled by DraggableResizable/Resizable
+
+var ToolFooter = function ToolFooter() {
+  var classes = useStyles$7();
+  return /*#__PURE__*/React__default.createElement("footer", {
+    className: classes.footer
+  });
+};
+
+/* *
+ * 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 getStyle = function getStyle(size) {
+  switch (size) {
+    case 'xs':
+      {
+        return {
+          fontSize: 10,
+          fontWeight: 500
+        };
+      }
+
+    case 'small':
+      {
+        return {
+          fontSize: 16,
+          fontWeight: 500,
+          padding: 4
+        };
+      }
+
+    case 'medium':
+      {
+        return {
+          fontSize: 20,
+          fontWeight: 400,
+          padding: 8
+        };
+      }
+
+    case 'large':
+      {
+        return {
+          fontSize: 16,
+          fontWeight: 500,
+          padding: 12
+        };
+      }
+
+    default:
+      {
+        return {};
+      }
+  }
+};
+
+var useStyles$6 = makeStyles(function (theme) {
+  return {
+    header: {
+      boxShadow: theme.shadows[1],
+      background: theme.palette.geowebColors.background.surface,
+      padding: function padding(props) {
+        return props.styles.padding;
+      },
+      zIndex: 1,
+      cursor: function cursor(props) {
+        return props.isDraggable ? 'move' : null;
+      }
+    },
+    title: {
+      fontSize: function fontSize(props) {
+        return props.styles.fontSize;
+      },
+      fontWeight: function fontWeight(props) {
+        return props.styles.fontWeight;
+      }
+    },
+    iconClose: {
+      color: theme.palette.geowebColors.greys.accessible,
+      padding: 0
+    },
+    iconDrag: {
+      color: theme.palette.geowebColors.greys.accessible,
+      padding: 0,
+      pointerEvents: 'none'
+    },
+    iconDragHorizontal: {
+      color: theme.palette.geowebColors.greys.accessible,
+      padding: 0,
+      pointerEvents: 'none',
+      transform: 'rotate(90deg)',
+      height: 12
+    }
+  };
+});
+
+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;
+  var styles = getStyle(size);
+  var classes = useStyles$6({
+    styles: styles,
+    isDraggable: isDraggable
+  });
+
+  var onClickClose = function onClickClose() {
+    return onClose();
+  };
+
+  return /*#__PURE__*/React__default.createElement("header", {
+    className: "".concat(classes.header, " ").concat(className)
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 1
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justify: "flex-start"
+  }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
+    "data-testid": "dragBtn",
+    className: classes.iconDrag,
+    disableRipple: true
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 10
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justify: "center",
+    alignItems: "center"
+  }, title && /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "h2",
+    className: classes.title
+  }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
+    "data-testid": "dragBtn",
+    className: classes.iconDragHorizontal,
+    disableRipple: true,
+    size: "small"
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 1,
+    container: true,
+    justify: "flex-end"
+  }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
+    "data-testid": "closeBtn",
+    className: classes.iconClose,
+    onClick: onClickClose
+  }, /*#__PURE__*/React__default.createElement(Close, 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 useStyles$5 = makeStyles(function () {
+  return {
+    container: {
+      overflow: 'hidden',
+      borderRadius: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    },
+    content: {
+      flex: 1,
+      overflowY: 'auto',
+      zIndex: 2,
+      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,
+      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
+
+  var classes = useStyles$5();
+  return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
+    elevation: elevation,
+    className: classes.container
+  }, props), /*#__PURE__*/React__default.createElement(ToolHeader, {
+    title: title,
+    size: size,
+    isDraggable: isDraggable,
+    onClose: onClose,
+    className: headerClassName
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classes.content,
+    style: {
+      maxHeight: maxHeight
+    }
+  }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
+};
+
+var BASE_Z_INDEX = 100;
+
+var DraggableComponent = function DraggableComponent(_a) {
+  var title = _a.title,
+      _a$bounds = _a.bounds,
+      bounds = _a$bounds === void 0 ? 'body' : _a$bounds,
+      _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: null,
+    right: null,
+    top: null
+  } : _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 () {
+    return null;
+  } : _a$onClose,
+      _a$initialMaxHeight = _a.initialMaxHeight,
+      defaultInitialMaxHeight = _a$initialMaxHeight === void 0 ? 'initial' : _a$initialMaxHeight,
+      _a$onChangeSize = _a.onChangeSize,
+      onChangeSize = _a$onChangeSize === void 0 ? function () {
+    return null;
+  } : _a$onChangeSize,
+      _a$onMouseDown = _a.onMouseDown,
+      onMouseDown = _a$onMouseDown === void 0 ? function () {
+    return null;
+  } : _a$onMouseDown,
+      _a$order = _a.order,
+      order = _a$order === void 0 ? 1 : _a$order,
+      _a$source = _a.source,
+      source = _a$source === void 0 ? 'app' : _a$source,
+      props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source"]);
+
+  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 onStopDrag = React__default.useCallback(function (_event, position) {
+    setPosition(position);
+  }, [setPosition]);
+
+  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) {
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+        width = _node$getBoundingClie.width,
+        height = _node$getBoundingClie.height;
+
+    onChangeSize({
+      width: width,
+      height: height
+    });
+  }, [onChangeSize]);
+  var onResizeWindow = React__default.useCallback(function (event) {
+    if (!nodeRef.current) return;
+    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
+    var windowTarget = event.currentTarget;
+    if (!windowTarget) return;
+    var innerHeight = windowTarget.innerHeight,
+        innerWidth = windowTarget.innerWidth;
+    var isHorizontallyLarger = bbox.width > innerWidth;
+    var isVerticallyLarger = bbox.height > innerHeight; // left screen
+
+    if (bbox.x < 0 || isHorizontallyLarger) {
+      setPosition(Object.assign(Object.assign({}, position), {
+        x: position.x - bbox.x
+      }));
+    } // right screen
+    else if (bbox.x + bbox.width >= innerWidth) {
+        var diffX = innerWidth - bbox.x - bbox.width;
+        setPosition(Object.assign(Object.assign({}, position), {
+          x: position.x + diffX
+        }));
+      } // top screen
+      else if (bbox.y < 0 || isVerticallyLarger) {
+          setPosition(Object.assign(Object.assign({}, position), {
+            y: position.y - bbox.y
+          }));
+        } // bottom screen
+        else if (bbox.y + bbox.height >= innerHeight) {
+            var diffY = innerHeight - bbox.y - bbox.height;
+            setPosition(Object.assign(Object.assign({}, position), {
+              y: position.y + diffY
+            }));
+          }
+  }, [position]);
+  React__default.useEffect(function () {
+    var throttledResize = throttle(onResizeWindow, 100);
+    window.addEventListener('resize', throttledResize);
+    return function () {
+      window.removeEventListener('resize', throttledResize);
+    };
+  }, [onResizeWindow]);
+  var toolcontainerId = React__default.useRef(Date.now().toString()).current;
+  var headerClassName = "header-".concat(toolcontainerId);
+  return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
+    nodeRef: nodeRef,
+    bounds: bounds,
+    position: position,
+    onStop: onStopDrag,
+    handle: ".".concat(headerClassName),
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: Object.assign({
+      position: 'absolute',
+      zIndex: zIndex
+    }, startPosition),
+    ref: nodeRef
+  }, /*#__PURE__*/React__default.createElement(ResizeComponent, Object.assign({}, props, {
+    startPosition: startPosition,
+    size: size,
+    setSize: setSize,
+    onResizeStart: onStartResize,
+    onResize: onResize
+  }), /*#__PURE__*/React__default.createElement(ToolContainer, {
+    maxHeight: initialMaxHeight,
+    onClose: onClose,
+    title: title,
+    size: headerSize,
+    isDraggable: true,
+    isResizable: true,
+    elevation: elevation,
+    headerClassName: headerClassName
+  }, 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 useStyles$4 = makeStyles(function (theme) {
+  return {
+    icon: {
+      backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
+      width: 40,
+      height: 40,
+      display: 'inline-flex',
+      verticalAlign: 'middle',
+      alignItems: 'center',
+      borderRadius: theme.shape.borderRadius,
+      '&>span': {
+        textAlign: 'center',
+        fontSize: 14,
+        fontWeight: 500,
+        display: 'flex',
+        margin: 'auto',
+        letterSpacing: 0.25
+      }
+    },
+    segment: {
+      margin: '0 2px',
+      verticalAlign: 'middle',
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0.25
+    },
+    connect: {
+      fontSize: 18
+    },
+    divider: {
+      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;
+  var classes = useStyles$4();
+
+  if (type === 'divider') {
+    return /*#__PURE__*/React__default.createElement(Typography, {
+      "data-testid": "segment-divider",
+      className: "".concat(classes.segment, " ").concat(classes.divider),
+      component: "span"
+    }, children);
+  }
+
+  if (type === 'icon') {
+    return /*#__PURE__*/React__default.createElement("span", {
+      "data-testid": "segment-icon",
+      className: "".concat(classes.segment, " ").concat(classes.icon)
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      component: "span"
+    }, children));
+  }
+
+  if (type === 'connect') {
+    return /*#__PURE__*/React__default.createElement(Typography, {
+      className: "".concat(classes.segment, " ").concat(classes.connect),
+      "data-testid": "segment-connect",
+      component: "span"
+    }, children);
+  }
+
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    className: classes.segment,
+    "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 useStyles$3 = makeStyles(function (theme) {
+  return {
+    icon: {
+      fill: theme.palette.geowebColors.typographyAndIcons.text
+    }
+  };
+});
+var OptionIcon = function OptionIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 12 11",
+    style: {
+      width: 12,
+      height: 11
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Option"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Option-\"\u2325\"",
+    transform: "translate(-14.000000, -13.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M18.01,13.88 L22.56,22.99 L25.7,22.99 L25.7,24 L21.74,24 L17.19,14.9 L14.06,14.9 L14.06,13.88 L18.01,13.88 Z M25.7,13.88 L25.7,14.9 L20.97,14.9 L20.97,13.88 L25.7,13.88 Z",
+    id: "Option"
+  }))));
+};
+var CommandIcon = function CommandIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 12 12",
+    style: {
+      width: 12,
+      height: 12
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Command"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Command-\"\u2318\"",
+    transform: "translate(-14.000000, -13.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.04,13.63 C24.08,13.63 25.19,14.44 25.19,15.8 C25.19,16.8 24.4,17.93 23.04,17.93 L23.04,17.93 L21.9,17.93 L21.9,19.95 L23,19.95 C24.4,19.95 25.19,21.1 25.19,22 C25.19,23.6 24,24.26 23,24.26 C22,24.26 20.89,23.5 20.89,22 L20.89,22 L20.89,20.97 L18.86,20.97 L18.86,22 C18.86,23.5 17.75,24.26 16.71,24.26 C15.7,24.26 14.56,23.5 14.56,22 C14.56,21 15.55,19.95 16.71,19.95 L16.71,19.95 L17.85,19.95 L17.85,17.93 L16.71,17.93 C15.55,17.93 14.525085,17 14.5614747,15.7207438 C14.5978644,14.4414876 15.7,13.63 16.71,13.63 C17.75,13.63 18.86,14.38 18.86,15.8 L18.86,15.8 L18.86,16.92 L20.89,16.92 L20.89,15.8 C20.89,14.38 22,13.63 23.04,13.63 Z M17.85,20.96 L16.71,20.96 C16.0803954,20.96 15.57,21.4703954 15.57,22.1 C15.57,22.7296046 16.0803954,23.24 16.71,23.24 C17.3396046,23.24 17.85,22.7296046 17.85,22.1 L17.85,22.1 L17.85,20.96 Z M23.04,20.96 L21.9,20.96 L21.9,22.1 L21.9066894,22.2242156 C21.9685825,22.7953889 22.452369,23.24 23.04,23.24 C23.6696046,23.24 24.18,22.7296046 24.18,22.1 C24.18,21.4703954 23.6696046,20.96 23.04,20.96 L23.04,20.96 Z M20.89,17.93 L18.86,17.93 L18.86,19.95 L20.89,19.95 L20.89,17.93 Z M16.71,14.64 C16.0803954,14.64 15.57,15.1503954 15.57,15.78 C15.57,16.4096046 16.0803954,16.92 16.71,16.92 L16.71,16.92 L17.85,16.92 L17.85,15.78 L17.8433106,15.6557844 C17.7814175,15.0846111 17.297631,14.64 16.71,14.64 Z M23.04,14.64 C22.4103954,14.64 21.9,15.1503954 21.9,15.78 L21.9,15.78 L21.9,16.92 L23.04,16.92 C23.6696046,16.92 24.18,16.4096046 24.18,15.78 C24.18,15.1503954 23.6696046,14.64 23.04,14.64 Z",
+    id: "Command"
+  }))));
+};
+var ArrowLeftIcon = function ArrowLeftIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 12 6",
+    style: {
+      width: 12,
+      height: 6
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow left"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Arrow-left-\"\u2190\"",
+    transform: "translate(-14.000000, -16.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "Arrow-left",
+    transform: "translate(19.880000, 18.960000) rotate(90.000000) translate(-19.880000, -18.960000) ",
+    points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
+  }))));
+};
+var ArrowRightIcon = function ArrowRightIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 12 6",
+    style: {
+      width: 12,
+      height: 6
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow right"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Arrow-right-\"\u2192\"",
+    transform: "translate(-14.000000, -16.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "Arrow-right",
+    transform: "translate(19.880000, 18.960000) rotate(-90.000000) translate(-19.880000, -18.960000) ",
+    points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
+  }))));
+};
+var ArrowDownIcon = function ArrowDownIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 6 12",
+    style: {
+      width: 6,
+      height: 12
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow down"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Arrow-down-\"\u2193\"",
+    transform: "translate(-17.000000, -13.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "Arrow-down",
+    points: "16.92 21.89 19.88 24.85 22.84 21.89 20.39 21.89 20.39 13.88 19.37 13.88 19.37 21.89"
+  }))));
+};
+var ArrowUpIcon = function ArrowUpIcon() {
+  var classes = useStyles$3();
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    viewBox: "0 0 6 11",
+    style: {
+      width: 6,
+      height: 11
+    }
+  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow up"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Symbols:-General",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Shortcut-Arrow-up-\"\u2191\"",
+    transform: "translate(-17.000000, -13.000000)",
+    className: classes.icon
+  }, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "Arrow-up",
+    transform: "translate(19.880000, 18.485000) scale(1, -1) translate(-19.880000, -18.485000) ",
+    points: "16.92 21.01 19.88 23.97 22.84 21.01 20.39 21.01 20.39 13 19.37 13 19.37 21.01"
+  }))));
+};
+
+/* *
+ * 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(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "divider"
+  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
+  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "connect"
+  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "connect"
+  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "divider"
+  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, 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(OptionIcon, 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(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "divider"
+  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, 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(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "connect"
+  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "divider"
+  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, 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(ArrowLeftIcon, null)))
+}];
+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 useStyles$2 = makeStyles(function () {
+  return {
+    row: {
+      minHeight: 56
+    },
+    title: {
+      fontSize: 12,
+      fontWeight: 300,
+      letterSpacing: 0.4,
+      opacity: 0.67
+    },
+    description: {
+      alignItems: 'center'
+    }
+  };
+});
+
+var ShortcutList = function ShortcutList(_ref2) {
+  var _ref2$platform = _ref2.platform,
+      platform = _ref2$platform === void 0 ? 'windows' : _ref2$platform;
+  var classes = useStyles$2();
+  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, {
+      className: classes.row,
+      divider: index !== rows.length - 1,
+      key: row.title
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      container: true,
+      direction: "row",
+      justify: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      className: classes.title
+    }, row.title), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classes.description
+    }, 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 useStyles$1 = makeStyles(function () {
+  return {
+    container: {
+      margin: '0px 20px'
+    },
+    tab: {
+      fontSize: 12
+    }
+  };
+});
+
+var CheatSheet = function CheatSheet() {
+  var classes = useStyles$1();
+
+  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("div", {
+    className: classes.container
+  }, /*#__PURE__*/React__default.createElement(Tabs, {
+    value: activeTab,
+    onChange: onChangeTab,
+    "aria-label": "platform"
+  }, /*#__PURE__*/React__default.createElement(Tab, {
+    className: classes.tab,
+    label: "Windows"
+  }), /*#__PURE__*/React__default.createElement(Tab, {
+    className: classes.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 useStyles = makeStyles(function () {
+  return {
+    backdrop: {
+      zIndex: 1
+    }
+  };
+});
+
+var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
+  var classes = useStyles();
+
+  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
+  }, /*#__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,
+    className: classes.backdrop
+  }, /*#__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 sliderStyles = makeStyles(function (theme) {
+  return {
+    sliderHeader: {
+      fontFamily: 'Roboto-Black, Roboto',
+      fontSize: 12,
+      color: theme.palette.geowebColors.typographyAndIcons.text,
+      padding: '11px 0 11px 16px'
+    }
+  };
+});
+var CustomSliderComponent = withStyles(function (theme) {
+  return {
+    root: {
+      marginLeft: '16px',
+      // highlight selected label
+      '& span.selectedLabel': {
+        fontWeight: 'bold'
+      }
+    },
+    thumb: {
+      width: 20,
+      height: 20,
+      marginLeft: '-7px !important',
+      marginBottom: '-10px !important',
+      backgroundColor: theme.palette.geowebColors.customSlider.thumb,
+      '$disabled &': {
+        width: 20,
+        height: 20,
+        backgroundColor: theme.palette.geowebColors.customSlider.thumbDisabled
+      },
+      boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
+      '&:focus, &:hover, &:active': {
+        boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
+      }
+    },
+    mark: {
+      height: '2px',
+      width: '2px',
+      marginLeft: '2px',
+      backgroundColor: theme.palette.geowebColors.customSlider.mark,
+      '$disabled &': {
+        backgroundColor: theme.palette.geowebColors.customSlider.markDisabled
+      }
+    },
+    markLabel: {
+      fontFamily: 'Roboto-Black, Roboto',
+      fontSize: 12,
+      color: theme.palette.geowebColors.typographyAndIcons.text
+    },
+    track: {
+      borderRadius: '0 0 4.5px 4.5px',
+      width: '6px !important',
+      backgroundColor: theme.palette.geowebColors.customSlider.track,
+      '$disabled &': {
+        backgroundColor: theme.palette.geowebColors.customSlider.trackDisabled
+      }
+    },
+    rail: {
+      width: '4px !important',
+      borderRadius: 4.5,
+      backgroundColor: theme.palette.geowebColors.customSlider.rail,
+      marginLeft: '1px',
+      opacity: 1,
+      '$disabled &': {
+        backgroundColor: theme.palette.geowebColors.customSlider.railDisabled,
+        opacity: 1
+      }
+    },
+    disabled: {// this has to exist, because otherwise '$disabled &' rules above has no effect ???
+    }
+  };
+})(Slider);
+var CustomSlider = function CustomSlider(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
+      _ref$dataTestId = _ref.dataTestId,
+      dataTestId = _ref$dataTestId === void 0 ? 'customSlider' : _ref$dataTestId,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
+      max = _ref.max,
+      min = _ref.min,
+      step = _ref.step,
+      _ref$marks = _ref.marks,
+      marks = _ref$marks === void 0 ? [] : _ref$marks,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      ThumbComponent = _ref.ThumbComponent;
+  // 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]);
+  return /*#__PURE__*/React.createElement(CustomSliderComponent, {
+    ref: element,
+    "data-testid": dataTestId,
+    orientation: orientation,
+    value: value,
+    step: step,
+    max: max,
+    min: min,
+    marks: marks,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    disabled: disabled,
+    ThumbComponent: ThumbComponent
+  });
+};
+
+/* *
+ * 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)
+ * */
+// 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;
+  }
+
+  return 'An error has occurred';
+};
+
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };