@opengeoweb/shared 2.1.2 → 2.2.0

package/{shared.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles));
+})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,10 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
+    var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
+    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -99,10 +102,14 @@
         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;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
 
     var bgColors = {
@@ -125,16 +132,13 @@
       var bgcolor = bgColors[color];
       var borderColor = borderColors[color];
       return {
-        bgcolor: bgcolor,
-        borderColor: borderColor,
+        backgroundColor: bgcolor,
         m: 0,
         p: 0.5,
-        border: 2,
-        borderRadius: 4,
-        style: {
-          width: '85px',
-          height: '20px'
-        },
+        border: "2px solid " + borderColor,
+        borderRadius: '4px',
+        width: '85px',
+        height: '20px',
         color: '#051039',
         maxHeight: '1em',
         boxSizing: 'content-box'
@@ -144,18 +148,18 @@
     var StatusTag = function StatusTag(_a) {
       var content = _a.content,
           color = _a.color;
-      return /*#__PURE__*/React__namespace.createElement(core.Box, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
-      }, tagStyle(color), {
+        justifyContent: "center",
+        sx: __assign({}, tagStyle(color)),
         "data-testid": "statusTag"
-      }), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "caption"
       }, content));
     };
 
-    var useStyles$e = core.makeStyles(function () {
+    var useStyles$d = makeStyles__default["default"](function () {
       return {
         dialogHeader: {
           zIndex: 1,
@@ -165,10 +169,7 @@
           alignItems: 'center'
         },
         dialogContent: {
-          padding: '40px 20px 0px 20px'
-        },
-        dialogOptions: {
-          padding: '4px 20px 16px 20px'
+          padding: '40px 20px 0px 20px !important'
         }
       };
     });
@@ -187,37 +188,37 @@
           content = _e === void 0 ? null : _e,
           other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-      var classes = useStyles$e();
+      var classes = useStyles$d();
 
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
 
-      return /*#__PURE__*/React__namespace.createElement(core.Dialog, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "confirmationDialog",
         open: open,
         maxWidth: "sm",
         fullWidth: true,
-        disableBackdropClick: true,
+        // fix for briefly showing default options when closing dialog
         transitionDuration: 0
-      }, rest), /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
-        disableTypography: true,
+      }, rest), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
         className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "h5",
-        "data-testid": "confirmationDialog-title"
-      }, title), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+        "data-testid": "confirmationDialog-title",
+        component: "span"
+      }, title), /*#__PURE__*/React__namespace.createElement(material.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, {
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
         className: classes.dialogContent
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1"
-      }, description), content), /*#__PURE__*/React__namespace.createElement(core.DialogActions, null, /*#__PURE__*/React__namespace.createElement(core.Button, {
+      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
         "data-testid": "conformationDialog-cancel",
         color: "secondary",
         variant: "outlined",
@@ -226,7 +227,7 @@
         },
         autoFocus: true,
         disableRipple: true
-      }, cancelLabel), /*#__PURE__*/React__namespace.createElement(core.Button, {
+      }, cancelLabel), /*#__PURE__*/React__namespace.createElement(material.Button, {
         "data-testid": "conformationDialog-confirm",
         color: "secondary",
         variant: "contained",
@@ -500,7 +501,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$d = core.makeStyles(function () {
+    var useStyles$c = makeStyles__default["default"](function () {
       return {
         title: {
           fontSize: '14px',
@@ -516,7 +517,7 @@
     var getIcon = function getIcon(severity) {
       switch (severity) {
         case 'info':
-          return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -527,7 +528,7 @@
           }));
 
         case 'success':
-          return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -538,7 +539,7 @@
           }));
 
         case 'warning':
-          return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -550,7 +551,7 @@
 
         case 'error':
         default:
-          return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -570,12 +571,12 @@
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d;
-      var classes = useStyles$d();
-      return /*#__PURE__*/React__namespace.createElement(lab.Alert, {
+      var classes = useStyles$c();
+      return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
         icon: getIcon(severity)
-      }, /*#__PURE__*/React__namespace.createElement(lab.AlertTitle, {
+      }, /*#__PURE__*/React__namespace.createElement(material.AlertTitle, {
         className: classes.title
       }, title), info && /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.info
@@ -598,7 +599,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = core.makeStyles(function () {
+    var useStyles$b = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -615,7 +616,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$c();
+      var classes = useStyles$b();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -641,7 +642,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$b = core.makeStyles(function (theme) {
+    var useStyles$a = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -678,42 +679,42 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$b();
+      var classes = useStyles$a();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: classes.container,
         container: true,
         alignItems: "center"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
         sm: 3
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "flex-start"
-      }, menu)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        justifyContent: "flex-start"
+      }, menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 10,
         sm: 6
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "center",
+        justifyContent: "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, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         className: classes.title
-      }, title))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
         sm: 3,
         container: true,
-        justify: "flex-end"
+        justifyContent: "flex-end"
       }, userMenu)));
     };
 
@@ -762,8 +763,8 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useStyles$a = function useStyles(isRightAligned) {
-      return core.makeStyles(function () {
+    var useStyles$9 = function useStyles(isRightAligned) {
+      return makeStyles__default["default"](function () {
         return {
           icon: __assign(__assign({
             width: 20,
@@ -776,7 +777,7 @@
             left: 10,
             transform: 'rotate(90deg)'
           }), {
-            zIndex: 100
+            zIndex: 1
           })
         };
       });
@@ -784,9 +785,9 @@
 
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
-      var theme = core.useTheme();
-      var styles = useStyles$a(isRightAligned)();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var theme = material.useTheme();
+      var styles = useStyles$9(isRightAligned)();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         className: styles.icon,
         "data-testid": "resizeHandle"
       }, /*#__PURE__*/React__default["default"].createElement("rect", {
@@ -922,7 +923,7 @@
           }, /*#__PURE__*/React__namespace.createElement(AlertBanner, {
             severity: "error",
             title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
-            info: /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("br", null), error.toString(), /*#__PURE__*/React__namespace.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(core.Link, {
+            info: /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("br", null), error.toString(), /*#__PURE__*/React__namespace.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(material.Link, {
               underline: "always",
               style: {
                 cursor: 'pointer'
@@ -961,7 +962,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$9 = core.makeStyles(function (theme) {
+    var useStyles$8 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1009,20 +1010,21 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$9();
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      var classes = useStyles$8();
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
-        className: classes.button
-      }, /*#__PURE__*/React__default["default"].createElement(core.Avatar, {
+        className: classes.button,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Avatar, {
         className: classes.avatar
-      }, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(core.Paper, {
+      }, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
         className: classes.container,
         "data-testid": "userMenu"
-      }, /*#__PURE__*/React__default["default"].createElement(core.ClickAwayListener, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.ClickAwayListener, {
         onClickAway: onClose,
         mouseEvent: "onMouseDown"
-      }, /*#__PURE__*/React__default["default"].createElement(core.MenuList, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.MenuList, {
         className: classes.userMenu,
         variant: "menu"
       }, children))));
@@ -1050,23 +1052,23 @@
           isDark = _a.isDark,
           toggleTheme = _a.toggleTheme;
 
-      return /*#__PURE__*/React__default["default"].createElement(core.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, "Choose your default app mode"), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, "Choose your default app mode"), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.RadioGroup, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.RadioGroup, {
         onChange: toggleTheme
-      }, /*#__PURE__*/React__default["default"].createElement(core.FormControlLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         value: true,
-        control: /*#__PURE__*/React__default["default"].createElement(core.Radio, {
+        control: /*#__PURE__*/React__default["default"].createElement(material.Radio, {
           checked: !isDark
         }),
         label: "Light"
-      }), /*#__PURE__*/React__default["default"].createElement(core.FormControlLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         value: false,
-        control: /*#__PURE__*/React__default["default"].createElement(core.Radio, {
+        control: /*#__PURE__*/React__default["default"].createElement(material.Radio, {
           checked: isDark
         }),
         label: "Dark"
@@ -1089,7 +1091,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = core.makeStyles(function (theme) {
+    var useStyles$7 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1102,7 +1104,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1169,7 +1171,7 @@
       }
     };
 
-    var useStyles$7 = core.makeStyles(function (theme) {
+    var useStyles$6 = makeStyles__default["default"](function (theme) {
       return {
         header: {
           boxShadow: theme.shadows[1],
@@ -1219,7 +1221,7 @@
           _d = _a.className,
           className = _d === void 0 ? '' : _d;
       var styles = getStyle(size);
-      var classes = useStyles$7({
+      var classes = useStyles$6({
         styles: styles,
         isDraggable: isDraggable
       });
@@ -1230,44 +1232,46 @@
 
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header + " " + className
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "flex-start"
-      }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        justifyContent: "flex-start"
+      }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn",
         className: classes.iconDrag,
-        disableRipple: true
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        disableRipple: true,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 10
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "center",
+        justifyContent: "center",
         alignItems: "center"
-      }, title && /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h2",
         className: classes.title
-      }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
-        "data-testid": "dragBtn",
+      }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        "data-testid": "dragBtn-xxs",
         className: classes.iconDragHorizontal,
         disableRipple: true,
         size: "small"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
         container: true,
-        justify: "flex-end"
-      }, onClose && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        justifyContent: "flex-end"
+      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
         className: classes.iconClose,
-        onClick: onClickClose
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Close, null)))));
+        onClick: onClickClose,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Close, null)))));
     };
 
     /* *
@@ -1286,7 +1290,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = core.makeStyles(function () {
+    var useStyles$5 = makeStyles__default["default"](function () {
       return {
         container: {
           overflow: 'hidden',
@@ -1326,8 +1330,8 @@
       headerClassName = _h === void 0 ? '' : _h,
           props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
 
-      var classes = useStyles$6();
-      return /*#__PURE__*/React__default["default"].createElement(core.Paper, __assign({
+      var classes = useStyles$5();
+      return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
         className: classes.container
       }, props), /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
@@ -1528,7 +1532,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = core.makeStyles(function (theme) {
+    var useStyles$4 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1568,10 +1572,10 @@
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$5();
+      var classes = useStyles$4();
 
       if (type === 'divider') {
-        return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           "data-testid": "segment-divider",
           className: classes.segment + " " + classes.divider,
           component: "span"
@@ -1582,20 +1586,20 @@
         return /*#__PURE__*/React__default["default"].createElement("span", {
           "data-testid": "segment-icon",
           className: classes.segment + " " + classes.icon
-        }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           component: "span"
         }, children));
       }
 
       if (type === 'connect') {
-        return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           className: classes.segment + " " + classes.connect,
           "data-testid": "segment-connect",
           component: "span"
         }, children);
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         className: classes.segment,
         "data-testid": "segment-text",
         component: "span"
@@ -1618,7 +1622,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = core.makeStyles(function (theme) {
+    var useStyles$3 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           fill: theme.palette.geowebColors.typographyAndIcons.text
@@ -1626,8 +1630,8 @@
       };
     });
     var OptionIcon = function OptionIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 11",
         style: {
           width: 12,
@@ -1649,8 +1653,8 @@
       }))));
     };
     var CommandIcon = function CommandIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 12",
         style: {
           width: 12,
@@ -1672,8 +1676,8 @@
       }))));
     };
     var ArrowLeftIcon = function ArrowLeftIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
           width: 12,
@@ -1696,8 +1700,8 @@
       }))));
     };
     var ArrowRightIcon = function ArrowRightIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
           width: 12,
@@ -1720,8 +1724,8 @@
       }))));
     };
     var ArrowDownIcon = function ArrowDownIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 6 12",
         style: {
           width: 6,
@@ -1743,8 +1747,8 @@
       }))));
     };
     var ArrowUpIcon = function ArrowUpIcon() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      var classes = useStyles$3();
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 6 11",
         style: {
           width: 6,
@@ -1897,7 +1901,7 @@
         });
       });
     };
-    var useStyles$3 = core.makeStyles(function () {
+    var useStyles$2 = makeStyles__default["default"](function () {
       return {
         row: {
           minHeight: 56
@@ -1917,24 +1921,24 @@
     var ShortcutList = function ShortcutList(_a) {
       var _b = _a.platform,
           platform = _b === void 0 ? 'windows' : _b;
-      var classes = useStyles$3();
+      var classes = useStyles$2();
       var rows = getShortcutList(shortcuts, platform);
-      return /*#__PURE__*/React__default["default"].createElement(core.List, {
+      return /*#__PURE__*/React__default["default"].createElement(material.List, {
         "data-testid": "list-" + platform
       }, rows.map(function (row, index) {
-        return /*#__PURE__*/React__default["default"].createElement(core.ListItem, {
+        return /*#__PURE__*/React__default["default"].createElement(material.ListItem, {
           className: classes.row,
           divider: index !== rows.length - 1,
           key: row.title
-        }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           container: true,
           direction: "row",
-          justify: "space-between",
+          justifyContent: "space-between",
           alignItems: "center"
-        }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           className: classes.title
-        }, row.title), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        }, row.title), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: classes.description
@@ -1954,20 +1958,16 @@
       }, value === index && children);
     };
 
-    var useStyles$2 = core.makeStyles(function () {
-      return {
-        container: {
-          margin: '0px 20px'
-        },
-        tab: {
-          fontSize: 12
-        }
-      };
-    });
+    var styles = {
+      container: {
+        margin: '0px 20px'
+      },
+      tab: {
+        fontSize: 12
+      }
+    };
 
     var CheatSheet = function CheatSheet() {
-      var classes = useStyles$2();
-
       var _a = __read(React__default["default"].useState(0), 2),
           activeTab = _a[0],
           onChangeActiveTab = _a[1];
@@ -1976,17 +1976,17 @@
         onChangeActiveTab(newValue);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.container
-      }, /*#__PURE__*/React__default["default"].createElement(core.Tabs, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: styles.container
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
         value: activeTab,
         onChange: onChangeTab,
         "aria-label": "platform"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Tab, {
-        className: classes.tab,
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tab, {
+        sx: styles.tab,
         label: "Windows"
-      }), /*#__PURE__*/React__default["default"].createElement(core.Tab, {
-        className: classes.tab,
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tab, {
+        sx: styles.tab,
         label: "Mac"
       })), /*#__PURE__*/React__default["default"].createElement(TabPanel, {
         value: activeTab,
@@ -1999,7 +1999,7 @@
       })));
     };
 
-    var useStyles$1 = core.makeStyles(function () {
+    var useStyles$1 = makeStyles__default["default"](function () {
       return {
         backdrop: {
           zIndex: 1
@@ -2022,14 +2022,14 @@
         setOpen(true);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.MenuItem, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
         "data-testid": "cheatsheet-btn",
         onClick: onOpen
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, "Cheat sheet"))), /*#__PURE__*/React__default["default"].createElement(core.Backdrop, {
+      }, "Cheat sheet"))), /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
         "data-testid": "cheatsheet-content",
         open: open,
         className: classes.backdrop
@@ -2133,7 +2133,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var sliderStyles = core.makeStyles(function (theme) {
+    var sliderStyles = makeStyles__default["default"](function (theme) {
       return {
         sliderHeader: {
           fontFamily: 'Roboto-Black, Roboto',
@@ -2143,35 +2143,25 @@
         }
       };
     });
-    var CustomSliderComponent = core.withStyles(function (theme) {
+    var CustomSliderComponent = withStyles__default["default"](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': {
+          '&.Mui-focusVisible, &: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
@@ -2183,18 +2173,15 @@
           color: theme.palette.geowebColors.typographyAndIcons.text
         },
         track: {
-          borderRadius: '0 0 4.5px 4.5px',
-          width: '6px !important',
+          color: theme.palette.geowebColors.customSlider.track,
           backgroundColor: theme.palette.geowebColors.customSlider.track,
           '$disabled &': {
-            backgroundColor: theme.palette.geowebColors.customSlider.trackDisabled
+            backgroundColor: theme.palette.geowebColors.customSlider.trackDisabled,
+            color: 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,
@@ -2204,7 +2191,7 @@
         disabled: {// this has to exist, because otherwise '$disabled &' rules above has no effect ???
         }
       };
-    })(core.Slider);
+    })(material.Slider);
     var CustomSlider = function CustomSlider(_a) {
       var value = _a.value,
           _b = _a.orientation,
@@ -2233,7 +2220,7 @@
 
       React__namespace.useEffect(function () {
         if (shouldAutoFocus && element.current) {
-          var thumb = element.current.querySelector('.MuiSlider-thumb');
+          var thumb = element.current.querySelector('.MuiSlider-thumb input');
           thumb.focus();
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -2247,8 +2234,8 @@
 
     var Z_INDEX_TOP = 600;
     var Z_INDEX_BOTTOM = 550;
-    var useStyles = core.makeStyles(function (theme) {
-      return core.createStyles({
+    var useStyles = makeStyles__default["default"](function (theme) {
+      return createStyles__default["default"]({
         draggableDialog: function draggableDialog(props) {
           return {
             width: props.dialogWidth ? props.dialogWidth : '90%',
@@ -2302,24 +2289,24 @@
       return /*#__PURE__*/React__namespace.createElement(Draggable__default["default"], {
         handle: "strong",
         bounds: "body"
-      }, /*#__PURE__*/React__namespace.createElement(core.Paper, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Paper, {
         "data-testid": title,
         className: classes.draggableDialog,
         elevation: 24
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement("strong", null, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement("strong", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "dragDialog",
         size: "small",
         className: classes.iconDrag
-      }, /*#__PURE__*/React__namespace.createElement(icons.DragIndicator, null))), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.DragIndicator, null))), /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "subtitle1"
-      }, title), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "closeDialog",
         size: "small",
         onClick: handleClose,
         className: classes.iconClose
-      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement("div", {
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.dialogContent
       }, children)));
     };