@opengeoweb/shared 2.0.1

package/shared.umd.js

@@ -0,0 +1,2232 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('@material-ui/icons'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@material-ui/lab'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', '@material-ui/icons', 'react-hook-form', '@opengeoweb/form-fields', '@material-ui/lab', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.core, global.icons, global.reactHookForm, global.formFields, global.lab, global.Draggable, global.reResizable, global.theme, global.lodash));
+})(this, (function (exports, React, core, icons, reactHookForm, formFields, lab, Draggable, reResizable, theme, lodash) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
+
+    /*! *****************************************************************************
+    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.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
+    }
+
+    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(_a) {
+      var content = _a.content,
+          color = _a.color;
+      return /*#__PURE__*/React__namespace.createElement(core.Box, __assign({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, tagStyle(color), {
+        "data-testid": "statusTag"
+      }), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+        variant: "caption"
+      }, content));
+    };
+
+    var useStyles$d = core.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,
+          _b = _a.description,
+          description = _b === void 0 ? 'Are you sure?' : _b,
+          _c = _a.confirmLabel,
+          confirmLabel = _c === void 0 ? 'Submit' : _c,
+          _d = _a.cancelLabel,
+          cancelLabel = _d === void 0 ? 'Go back' : _d,
+          onSubmit = _a.onSubmit,
+          onClose = _a.onClose,
+          _e = _a.content,
+          content = _e === void 0 ? null : _e,
+          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__namespace.createElement(core.Dialog, __assign({
+        "data-testid": "confirmationDialog",
+        open: open,
+        maxWidth: "sm",
+        fullWidth: true,
+        disableBackdropClick: true,
+        transitionDuration: 0
+      }, rest), /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
+        disableTypography: true,
+        className: classes.dialogHeader
+      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+        variant: "h5",
+        "data-testid": "confirmationDialog-title"
+      }, title), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+        "data-testid": "confirmationDialog-close",
+        "aria-label": "close",
+        onClick: function onClick() {
+          return onClose('CLOSED');
+        },
+        size: "small"
+      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement(core.DialogContent, {
+        className: classes.dialogContent
+      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+        variant: "body1"
+      }, description), content), /*#__PURE__*/React__namespace.createElement(core.DialogActions, null, /*#__PURE__*/React__namespace.createElement(core.Button, {
+        "data-testid": "conformationDialog-cancel",
+        color: "secondary",
+        variant: "outlined",
+        onClick: function onClick() {
+          return onClose('CANCELLED');
+        },
+        autoFocus: true
+      }, cancelLabel), /*#__PURE__*/React__namespace.createElement(core.Button, {
+        "data-testid": "conformationDialog-confirm",
+        color: "secondary",
+        variant: "contained",
+        onClick: onSubmit
+      }, confirmLabel)));
+    };
+
+    /* *
+     * 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__namespace.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, pollingInterval) {
+      if (pollingInterval === void 0) {
+        pollingInterval = 300000;
+      }
+
+      var interval = React__namespace.useRef(null);
+      React__namespace.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__namespace.useRef();
+      React__namespace.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__namespace.useRef(false);
+      React__namespace.useEffect(function () {
+        isMounted.current = true;
+        return function () {
+          isMounted.current = false;
+        };
+      }, []);
+      return {
+        isMounted: isMounted
+      };
+    };
+
+    var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
+    var useDraftFormHelpers = function useDraftFormHelpers() {
+      var _a = reactHookForm.useFormContext(),
+          getValues = _a.getValues,
+          setValue = _a.setValue,
+          register = _a.register;
+
+      var isDraft = function isDraft() {
+        return getValues(HIDDEN_INPUT_HELPER_IS_DRAFT) === true;
+      };
+
+      var isRequired = function isRequired(value) {
+        if (!isDraft() && formFields.isEmpty(value)) {
+          return formFields.errorMessages.required;
+        }
+
+        return true;
+      };
+
+      var toggleIsDraft = function toggleIsDraft(isDraft) {
+        return setValue(HIDDEN_INPUT_HELPER_IS_DRAFT, isDraft);
+      };
+
+      var DraftFieldHelper = function DraftFieldHelper() {
+        return /*#__PURE__*/React__namespace.createElement("input", __assign({
+          defaultValue: "false"
+        }, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
+          type: "hidden"
+        }));
+      };
+
+      return {
+        isRequired: isRequired,
+        toggleIsDraft: toggleIsDraft,
+        isDraft: isDraft,
+        DraftFieldHelper: DraftFieldHelper
+      };
+    };
+
+    var ConfirmationServiceContext = /*#__PURE__*/React__namespace.createContext(Promise.reject);
+    var useConfirmationDialog = function useConfirmationDialog() {
+      return React__namespace.useContext(ConfirmationServiceContext);
+    };
+    var useDialogActions = function useDialogActions(awaitingPromiseRef, defaultOptions) {
+      if (defaultOptions === void 0) {
+        defaultOptions = null;
+      }
+
+      var isMounted = useIsMounted().isMounted;
+
+      var _a = __read(React__namespace.useState(defaultOptions), 2),
+          confirmationState = _a[0],
+          setConfirmationState = _a[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(_a) {
+      var children = _a.children;
+      var awaitingPromiseRef = React__namespace.useRef();
+
+      var _b = useDialogActions(awaitingPromiseRef),
+          openConfirmation = _b.openConfirmation,
+          confirmationState = _b.confirmationState,
+          handleSubmit = _b.handleSubmit,
+          handleClose = _b.handleClose;
+
+      return /*#__PURE__*/React__namespace.createElement(ConfirmationServiceContext.Provider, {
+        value: openConfirmation
+      }, children, /*#__PURE__*/React__namespace.createElement(ConfirmationDialog, __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 = core.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__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+            width: 24,
+            height: 24,
+            fill: "transparent"
+          }), /*#__PURE__*/React__namespace.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__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+            width: 24,
+            height: 24,
+            fill: "transparent"
+          }), /*#__PURE__*/React__namespace.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__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+            width: 24,
+            height: 24,
+            fill: "transparent"
+          }), /*#__PURE__*/React__namespace.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__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+            width: 24,
+            height: 24,
+            fill: "transparent"
+          }), /*#__PURE__*/React__namespace.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(_a) {
+      var title = _a.title,
+          _b = _a.severity,
+          severity = _b === void 0 ? 'error' : _b,
+          _c = _a.info,
+          info = _c === void 0 ? '' : _c,
+          _d = _a.dataTestId,
+          dataTestId = _d === void 0 ? 'alert-banner' : _d;
+      var classes = useStyles$c();
+      return /*#__PURE__*/React__namespace.createElement(lab.Alert, {
+        "data-testid": dataTestId,
+        severity: severity,
+        icon: getIcon(severity)
+      }, /*#__PURE__*/React__namespace.createElement(lab.AlertTitle, {
+        className: classes.title
+      }, title), info && /*#__PURE__*/React__namespace.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 = core.makeStyles(function () {
+      return {
+        wrapper: {
+          height: '100vh',
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        main: {
+          flex: 1,
+          position: 'relative'
+        }
+      };
+    });
+
+    var AppLayout = function AppLayout(_a) {
+      var header = _a.header,
+          children = _a.children;
+      var classes = useStyles$b();
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classes.wrapper
+      }, header, /*#__PURE__*/React__default["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";
+
+    /* *
+     * 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$a = core.makeStyles(function (theme) {
+      var _a;
+
+      return {
+        header: (_a = {
+          height: 40,
+          background: theme.palette.geowebColors.brand.brand,
+          color: theme.palette.common.white,
+          boxShadow: theme.shadows[1],
+          zIndex: 1000
+        }, _a[theme.breakpoints.down('sm')] = {
+          padding: '0 8px'
+        }, _a[theme.breakpoints.up('sm')] = {
+          padding: '0 24px'
+        }, _a),
+        logo: {
+          height: 30
+        },
+        title: {
+          marginLeft: 6,
+          fontSize: '1.25rem',
+          fontWeight: 400,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis'
+        },
+        container: {
+          height: '100%'
+        }
+      };
+    });
+
+    var AppHeader = function AppHeader(_a) {
+      var menu = _a.menu,
+          userMenu = _a.userMenu,
+          _b = _a.title,
+          title = _b === void 0 ? 'GeoWeb' : _b;
+      var classes = useStyles$a();
+      return /*#__PURE__*/React__default["default"].createElement("header", {
+        className: classes.header
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        className: classes.container,
+        container: true,
+        alignItems: "center"
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true,
+        xs: 1,
+        sm: 3
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true,
+        justify: "flex-start"
+      }, menu)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true,
+        xs: 10,
+        sm: 6
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true,
+        justify: "center",
+        alignItems: "center",
+        wrap: "nowrap"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        alt: title,
+        className: classes.logo,
+        src: img
+      }), /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+        variant: "h1",
+        className: classes.title
+      }, title))), /*#__PURE__*/React__default["default"].createElement(core.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 _b = _a.bounds,
+          bounds = _b === void 0 ? 'body' : _b,
+          children = _a.children,
+          props = __rest(_a, ["bounds", "children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(Draggable__default["default"], __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 core.makeStyles(function () {
+        return {
+          icon: __assign(__assign({
+            width: 20,
+            height: 20,
+            top: -10,
+            position: 'relative'
+          }, isRightAligned ? {
+            left: -10
+          } : {
+            left: 10,
+            transform: 'rotate(90deg)'
+          }), {
+            zIndex: 100
+          })
+        };
+      });
+    };
+
+    var ResizeHandle = function ResizeHandle(_a) {
+      var isRightAligned = _a.isRightAligned;
+      var theme = core.useTheme();
+      var styles = useStyles$9(isRightAligned)();
+      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+        className: styles.icon,
+        "data-testid": "resizeHandle"
+      }, /*#__PURE__*/React__default["default"].createElement("rect", {
+        fill: "#ffffff"
+      }), /*#__PURE__*/React__default["default"].createElement("path", {
+        d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
+        fill: "" + theme.palette.geowebColors.greys.accessible,
+        transform: "rotate(-45 16.687 16.787)"
+      }));
+    };
+
+    var ResizeComponent = function ResizeComponent(_a) {
+      var _b = _a.startPosition,
+          startPosition = _b === void 0 ? {
+        left: null,
+        right: null,
+        top: null
+      } : _b,
+          children = _a.children,
+          _c = _a.onResizeStart,
+          onResizeStart = _c === void 0 ? function () {
+        return null;
+      } : _c,
+          size = _a.size,
+          setSize = _a.setSize,
+          _d = _a.minHeight,
+          minHeight = _d === void 0 ? 50 : _d,
+          _e = _a.minWidth,
+          minWidth = _e === void 0 ? 50 : _e,
+          props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
+
+      var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
+      var onStartResize = React__default["default"].useCallback(function (event, _direction, node) {
+        event.stopPropagation();
+
+        var _a = node.getBoundingClientRect(),
+            width = _a.width,
+            height = _a.height;
+
+        setSize({
+          width: width,
+          height: height
+        }); // fix for when initial maxHeight gets cleared
+        // eslint-disable-next-line no-param-reassign
+
+        node.style.height = height + "px";
+        onResizeStart();
+      }, [onResizeStart, setSize]);
+      var onResizeStop = React__default["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["default"].createElement(reResizable.Resizable // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
+      , __assign({
+        // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
+        minHeight: minHeight,
+        minWidth: minWidth,
+        size: size,
+        onResizeStop: onResizeStop,
+        handleComponent: {
+          bottomRight: /*#__PURE__*/React__default["default"].createElement(ResizeHandle, {
+            isRightAligned: true
+          }),
+          bottomLeft: /*#__PURE__*/React__default["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 = core.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(_a) {
+      var _b = _a.isOpen,
+          isOpen = _b === void 0 ? false : _b,
+          _c = _a.onToggle,
+          onToggle = _c === void 0 ? function () {
+        return null;
+      } : _c,
+          _d = _a.onClose,
+          onClose = _d === void 0 ? function () {
+        return null;
+      } : _d,
+          children = _a.children,
+          initials = _a.initials;
+      var classes = useStyles$8();
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "data-testid": "userButton",
+        onClick: onToggle,
+        className: classes.button
+      }, /*#__PURE__*/React__default["default"].createElement(core.Avatar, {
+        className: classes.avatar
+      }, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(core.Paper, {
+        className: classes.container,
+        "data-testid": "userMenu"
+      }, /*#__PURE__*/React__default["default"].createElement(core.ClickAwayListener, {
+        onClickAway: onClose,
+        mouseEvent: "onMouseDown"
+      }, /*#__PURE__*/React__default["default"].createElement(core.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 _a = theme.useThemeContext(),
+          isDark = _a.isDark,
+          toggleTheme = _a.toggleTheme;
+
+      return /*#__PURE__*/React__default["default"].createElement(core.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true
+      }, "Choose your default app mode"), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true
+      }, /*#__PURE__*/React__default["default"].createElement(core.RadioGroup, {
+        onChange: toggleTheme
+      }, /*#__PURE__*/React__default["default"].createElement(core.FormControlLabel, {
+        value: true,
+        control: /*#__PURE__*/React__default["default"].createElement(core.Radio, {
+          checked: !isDark
+        }),
+        label: "Light"
+      }), /*#__PURE__*/React__default["default"].createElement(core.FormControlLabel, {
+        value: false,
+        control: /*#__PURE__*/React__default["default"].createElement(core.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 = core.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["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 = core.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(_a) {
+      var size = _a.size,
+          title = _a.title,
+          _b = _a.onClose,
+          onClose = _b === void 0 ? null : _b,
+          _c = _a.isDraggable,
+          isDraggable = _c === void 0 ? false : _c,
+          _d = _a.className,
+          className = _d === void 0 ? '' : _d;
+      var styles = getStyle(size);
+      var classes = useStyles$6({
+        styles: styles,
+        isDraggable: isDraggable
+      });
+
+      var onClickClose = function onClickClose() {
+        return onClose();
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement("header", {
+        className: classes.header + " " + className
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true,
+        alignItems: "center"
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true,
+        xs: 1
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true,
+        justify: "flex-start"
+      }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "data-testid": "dragBtn",
+        className: classes.iconDrag,
+        disableRipple: true
+      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true,
+        xs: 10
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true,
+        justify: "center",
+        alignItems: "center"
+      }, title && /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+        variant: "h2",
+        className: classes.title
+      }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "data-testid": "dragBtn",
+        className: classes.iconDragHorizontal,
+        disableRipple: true,
+        size: "small"
+      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true,
+        xs: 1,
+        container: true,
+        justify: "flex-end"
+      }, onClose && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "data-testid": "closeBtn",
+        className: classes.iconClose,
+        onClick: onClickClose
+      }, /*#__PURE__*/React__default["default"].createElement(icons.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 = core.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 _b = _a.title,
+          title = _b === void 0 ? '' : _b,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c,
+          children = _a.children,
+          onClose = _a.onClose,
+          _d = _a.isResizable,
+          isResizable = _d === void 0 ? false : _d,
+          _e = _a.isDraggable,
+          isDraggable = _e === void 0 ? false : _e,
+          _f = _a.maxHeight,
+          maxHeight = _f === void 0 ? 'initial' : _f,
+          _g = _a.elevation,
+          elevation = _g === void 0 ? BASE_ELEVATION : _g,
+          // elevation_06
+      _h = _a.headerClassName,
+          // elevation_06
+      headerClassName = _h === void 0 ? '' : _h,
+          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
+
+      var classes = useStyles$5();
+      return /*#__PURE__*/React__default["default"].createElement(core.Paper, __assign({
+        elevation: elevation,
+        className: classes.container
+      }, props), /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
+        title: title,
+        size: size,
+        isDraggable: isDraggable,
+        onClose: onClose,
+        className: headerClassName
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classes.content,
+        style: {
+          maxHeight: maxHeight
+        }
+      }, children), isResizable && /*#__PURE__*/React__default["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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var BASE_Z_INDEX = 100;
+
+    var DraggableComponent = function DraggableComponent(_a) {
+      var title = _a.title,
+          _b = _a.bounds,
+          bounds = _b === void 0 ? 'body' : _b,
+          _c = _a.headerSize,
+          headerSize = _c === void 0 ? 'small' : _c,
+          _d = _a.startSize,
+          startSize = _d === void 0 ? {
+        width: 'auto',
+        height: 'auto'
+      } : _d,
+          _e = _a.startPosition,
+          startPosition = _e === void 0 ? {
+        left: null,
+        right: null,
+        top: null
+      } : _e,
+          children = _a.children,
+          _f = _a.isOpen,
+          isOpen = _f === void 0 ? true : _f,
+          _g = _a.onClose,
+          onClose = _g === void 0 ? function () {
+        return null;
+      } : _g,
+          _h = _a.initialMaxHeight,
+          defaultInitialMaxHeight = _h === void 0 ? 'initial' : _h,
+          _j = _a.onChangeSize,
+          onChangeSize = _j === void 0 ? function () {
+        return null;
+      } : _j,
+          _k = _a.onMouseDown,
+          onMouseDown = _k === void 0 ? function () {
+        return null;
+      } : _k,
+          _l = _a.order,
+          order = _l === void 0 ? 1 : _l,
+          _m = _a.source,
+          source = _m === void 0 ? 'app' : _m,
+          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["default"].useRef(null);
+
+      var _o = __read(React__default["default"].useState({
+        x: 0,
+        y: 0
+      }), 2),
+          position = _o[0],
+          setPosition = _o[1];
+
+      var _p = __read(React__default["default"].useState(startSize), 2),
+          size = _p[0],
+          setSize = _p[1];
+
+      var onStopDrag = React__default["default"].useCallback(function (_event, position) {
+        setPosition(position);
+      }, [setPosition]);
+
+      var _q = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
+          initialMaxHeight = _q[0],
+          setInitialMaxHeight = _q[1];
+
+      var onStartResize = function onStartResize() {
+        setInitialMaxHeight('initial');
+      };
+
+      var onResize = React__default["default"].useCallback(function (_event, _handle, node) {
+        var _a = node.getBoundingClientRect(),
+            width = _a.width,
+            height = _a.height;
+
+        onChangeSize({
+          width: width,
+          height: height
+        });
+      }, [onChangeSize]);
+      var onResizeWindow = React__default["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(__assign(__assign({}, position), {
+            x: position.x - bbox.x
+          }));
+        } // right screen
+        else if (bbox.x + bbox.width >= innerWidth) {
+            var diffX = innerWidth - bbox.x - bbox.width;
+            setPosition(__assign(__assign({}, position), {
+              x: position.x + diffX
+            }));
+          } // top screen
+          else if (bbox.y < 0 || isVerticallyLarger) {
+              setPosition(__assign(__assign({}, position), {
+                y: position.y - bbox.y
+              }));
+            } // bottom screen
+            else if (bbox.y + bbox.height >= innerHeight) {
+                var diffY = innerHeight - bbox.y - bbox.height;
+                setPosition(__assign(__assign({}, position), {
+                  y: position.y + diffY
+                }));
+              }
+      }, [position]);
+      React__default["default"].useEffect(function () {
+        var throttledResize = lodash.throttle(onResizeWindow, 100);
+        window.addEventListener('resize', throttledResize);
+        return function () {
+          window.removeEventListener('resize', throttledResize);
+        };
+      }, [onResizeWindow]);
+      var toolcontainerId = React__default["default"].useRef(Date.now().toString()).current;
+      var headerClassName = "header-" + toolcontainerId;
+      return isOpen ? /*#__PURE__*/React__default["default"].createElement(DraggableComponent$1, {
+        nodeRef: nodeRef,
+        bounds: bounds,
+        position: position,
+        onStop: onStopDrag,
+        handle: "." + headerClassName,
+        onMouseDown: onMouseDown
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        style: __assign({
+          position: 'absolute',
+          zIndex: zIndex
+        }, startPosition),
+        ref: nodeRef
+      }, /*#__PURE__*/React__default["default"].createElement(ResizeComponent, __assign({}, props, {
+        startPosition: startPosition,
+        size: size,
+        setSize: setSize,
+        onResizeStart: onStartResize,
+        onResize: onResize
+      }), /*#__PURE__*/React__default["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 = core.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(_a) {
+      var _b = _a.type,
+          type = _b === void 0 ? 'text' : _b,
+          children = _a.children;
+      var classes = useStyles$4();
+
+      if (type === 'divider') {
+        return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+          "data-testid": "segment-divider",
+          className: classes.segment + " " + classes.divider,
+          component: "span"
+        }, children);
+      }
+
+      if (type === 'icon') {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          "data-testid": "segment-icon",
+          className: classes.segment + " " + classes.icon
+        }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+          component: "span"
+        }, children));
+      }
+
+      if (type === 'connect') {
+        return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+          className: classes.segment + " " + classes.connect,
+          "data-testid": "segment-connect",
+          component: "span"
+        }, children);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(core.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 = core.makeStyles(function (theme) {
+      return {
+        icon: {
+          fill: theme.palette.geowebColors.typographyAndIcons.text
+        }
+      };
+    });
+    var OptionIcon = function OptionIcon() {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 12 11",
+        style: {
+          width: 12,
+          height: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Option"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Option-\"\u2325\"",
+        transform: "translate(-14.000000, -13.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 12 12",
+        style: {
+          width: 12,
+          height: 12
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Command"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Command-\"\u2318\"",
+        transform: "translate(-14.000000, -13.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 12 6",
+        style: {
+          width: 12,
+          height: 6
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow left"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Arrow-left-\"\u2190\"",
+        transform: "translate(-14.000000, -16.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 12 6",
+        style: {
+          width: 12,
+          height: 6
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow right"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Arrow-right-\"\u2192\"",
+        transform: "translate(-14.000000, -16.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 6 12",
+        style: {
+          width: 6,
+          height: 12
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow down"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Arrow-down-\"\u2193\"",
+        transform: "translate(-17.000000, -13.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+        viewBox: "0 0 6 11",
+        style: {
+          width: 6,
+          height: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow up"), /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Symbols:-General",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
+        id: "Shortcut-Arrow-up-\"\u2191\"",
+        transform: "translate(-17.000000, -13.000000)",
+        className: classes.icon
+      }, /*#__PURE__*/React__default["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"
+      }))));
+    };
+
+    var shortcuts = [{
+      title: 'Choose a selected time',
+      description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "Left click on the time slider rail")
+    }, {
+      title: 'Move backwards/forwards in selected time',
+      description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "Mouse scroll over the time slider rail")
+    }, {
+      title: 'Move 1 step backwards/forwards in selected time',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "divider"
+      }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon, null))),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "divider"
+      }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon, null)))
+    }, {
+      title: 'Toggle hide/show time slider',
+      description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "t")
+    }, {
+      title: 'Change time slider scale (visible timespan)',
+      description: /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "+ Scroll the slider rail"))
+    }, {
+      title: 'Mouseover to change selected time',
+      description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "Hover over Time Slider rail or time indicator")
+    }, {
+      title: 'Mouseover switch on/off',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Alt"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "h")),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "h"))
+    }, {
+      title: 'Change time step or animation speed',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "divider"
+      }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)")),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "divider"
+      }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)"))
+    }, {
+      title: 'Return to current time',
+      description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Home"),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "fn"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "connect"
+      }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)))
+    }];
+    var getShortcutList = function getShortcutList(shortcutList, platform) {
+      if (platform === void 0) {
+        platform = 'windows';
+      }
+
+      return shortcutList.map(function (_a) {
+        var title = _a.title,
+            description = _a.description,
+            descriptionMac = _a.descriptionMac;
+        return __assign({
+          title: title,
+          description: description
+        }, platform === 'windows' ? {
+          description: description
+        } : {
+          description: descriptionMac || description
+        });
+      });
+    };
+    var useStyles$2 = core.makeStyles(function () {
+      return {
+        row: {
+          minHeight: 56
+        },
+        title: {
+          fontSize: 12,
+          fontWeight: 300,
+          letterSpacing: 0.4,
+          opacity: 0.67
+        },
+        description: {
+          alignItems: 'center'
+        }
+      };
+    });
+
+    var ShortcutList = function ShortcutList(_a) {
+      var _b = _a.platform,
+          platform = _b === void 0 ? 'windows' : _b;
+      var classes = useStyles$2();
+      var rows = getShortcutList(shortcuts, platform);
+      return /*#__PURE__*/React__default["default"].createElement(core.List, {
+        "data-testid": "list-" + platform
+      }, rows.map(function (row, index) {
+        return /*#__PURE__*/React__default["default"].createElement(core.ListItem, {
+          className: classes.row,
+          divider: index !== rows.length - 1,
+          key: row.title
+        }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+          container: true,
+          direction: "row",
+          justify: "space-between",
+          alignItems: "center"
+        }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+          item: true,
+          className: classes.title
+        }, row.title), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+          item: true
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: classes.description
+        }, row.description))));
+      }));
+    };
+
+    var TabPanel = function TabPanel(_a) {
+      var children = _a.children,
+          value = _a.value,
+          index = _a.index;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        role: "tabpanel",
+        hidden: value !== index,
+        id: "tabpanel-" + index,
+        "aria-labelledby": "tab-" + index
+      }, value === index && children);
+    };
+
+    var useStyles$1 = core.makeStyles(function () {
+      return {
+        container: {
+          margin: '0px 20px'
+        },
+        tab: {
+          fontSize: 12
+        }
+      };
+    });
+
+    var CheatSheet = function CheatSheet() {
+      var classes = useStyles$1();
+
+      var _a = __read(React__default["default"].useState(0), 2),
+          activeTab = _a[0],
+          onChangeActiveTab = _a[1];
+
+      var onChangeTab = function onChangeTab(_event, newValue) {
+        onChangeActiveTab(newValue);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classes.container
+      }, /*#__PURE__*/React__default["default"].createElement(core.Tabs, {
+        value: activeTab,
+        onChange: onChangeTab,
+        "aria-label": "platform"
+      }, /*#__PURE__*/React__default["default"].createElement(core.Tab, {
+        className: classes.tab,
+        label: "Windows"
+      }), /*#__PURE__*/React__default["default"].createElement(core.Tab, {
+        className: classes.tab,
+        label: "Mac"
+      })), /*#__PURE__*/React__default["default"].createElement(TabPanel, {
+        value: activeTab,
+        index: 0
+      }, /*#__PURE__*/React__default["default"].createElement(ShortcutList, null)), /*#__PURE__*/React__default["default"].createElement(TabPanel, {
+        value: activeTab,
+        index: 1
+      }, /*#__PURE__*/React__default["default"].createElement(ShortcutList, {
+        platform: "mac"
+      })));
+    };
+
+    var useStyles = core.makeStyles(function () {
+      return {
+        backdrop: {
+          zIndex: 1
+        }
+      };
+    });
+
+    var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
+      var classes = useStyles();
+
+      var _a = __read(React__default["default"].useState(false), 2),
+          open = _a[0],
+          setOpen = _a[1];
+
+      var onClose = function onClose() {
+        setOpen(false);
+      };
+
+      var onOpen = function onOpen() {
+        setOpen(true);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.MenuItem, {
+        "data-testid": "cheatsheet-btn",
+        onClick: onOpen
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        container: true
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true
+      }, "Cheat sheet"))), /*#__PURE__*/React__default["default"].createElement(core.Backdrop, {
+        "data-testid": "cheatsheet-content",
+        open: open,
+        className: classes.backdrop
+      }, /*#__PURE__*/React__default["default"].createElement(DraggableComponent, {
+        startSize: {
+          width: 700
+        },
+        minHeight: 300,
+        minWidth: 500,
+        title: "Cheat sheet",
+        headerSize: "small",
+        isOpen: true,
+        onClose: onClose,
+        bounds: "parent"
+      }, /*#__PURE__*/React__default["default"].createElement(CheatSheet, 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 useUserMenu = function useUserMenu(open) {
+      if (open === void 0) {
+        open = false;
+      }
+
+      var _a = __read(React__default["default"].useState(open), 2),
+          isOpen = _a[0],
+          setOpen = _a[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();
+      }
+    };
+
+    /* *
+     * 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 sliderStyles = core.makeStyles(function (theme) {
+      return {
+        sliderHeader: {
+          fontFamily: 'Roboto-Black, Roboto',
+          fontSize: 12,
+          color: theme.palette.geowebColors.typographyAndIcons.text,
+          padding: '11px 0 11px 16px'
+        }
+      };
+    });
+    var CustomSliderComponent = core.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 ???
+        }
+      };
+    })(core.Slider);
+    var CustomSlider = function CustomSlider(_a) {
+      var value = _a.value,
+          onChange = _a.onChange,
+          onKeyDown = _a.onKeyDown,
+          _b = _a.dataTestId,
+          dataTestId = _b === void 0 ? 'customSlider' : _b,
+          _c = _a.orientation,
+          orientation = _c === void 0 ? 'vertical' : _c,
+          max = _a.max,
+          min = _a.min,
+          step = _a.step,
+          _d = _a.marks,
+          marks = _d === void 0 ? [] : _d,
+          _e = _a.disabled,
+          disabled = _e === void 0 ? false : _e,
+          ThumbComponent = _a.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__namespace.useRef(null);
+      var themeContext = theme.useThemeContext();
+      React__namespace.useEffect(function () {
+        var activeMarkLabelElements = element.current.getElementsByClassName('MuiSlider-markLabelActive');
+
+        var _a = __read(__spreadArray([], __read(activeMarkLabelElements)).reverse()),
+            first = _a[0],
+            rest = _a.slice(1);
+
+        if (first) first.classList.add('selectedLabel');
+        rest.forEach(function (element) {
+          return element.classList.remove('selectedLabel');
+        });
+      }, [value, themeContext.isDark]);
+      return /*#__PURE__*/React__namespace.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';
+    };
+
+    exports.AlertBanner = AlertBanner;
+    exports.AppHeader = AppHeader;
+    exports.AppLayout = AppLayout;
+    exports.ConfirmationDialog = ConfirmationDialog;
+    exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
+    exports.CustomSlider = CustomSlider;
+    exports.Draggable = DraggableComponent$1;
+    exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
+    exports.Resizable = ResizeComponent;
+    exports.StatusTag = StatusTag;
+    exports.ToolContainer = ToolContainer;
+    exports.ToolContainerDraggable = DraggableComponent;
+    exports.ToolFooter = ToolFooter;
+    exports.ToolHeader = ToolHeader;
+    exports.UserMenu = UserMenu;
+    exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
+    exports.UserMenuItemTheme = MenuItemTheme;
+    exports.getAxiosErrorMessage = getAxiosErrorMessage;
+    exports.getInitials = getInitials;
+    exports.isAxiosError = isAxiosError;
+    exports.showPrompt = showPrompt;
+    exports.sliderStyles = sliderStyles;
+    exports.useConfirmationDialog = useConfirmationDialog;
+    exports.useDialogActions = useDialogActions;
+    exports.useDraftFormHelpers = useDraftFormHelpers;
+    exports.useIsMounted = useIsMounted;
+    exports.usePoller = usePoller;
+    exports.usePreventBrowserClose = usePreventBrowserClose;
+    exports.usePrevious = usePrevious;
+    exports.useUserMenu = useUserMenu;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));