@opengeoweb/shared 2.1.3 → 2.1.4

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider, createStyles } from '@material-ui/core';
-import { Close, DragIndicator } from '@material-ui/icons';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { Close, DragIndicator } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
-import { Alert, AlertTitle } from '@material-ui/lab';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useThemeContext } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -46,16 +48,13 @@ var tagStyle = function tagStyle(color) {
   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 ".concat(borderColor),
+    borderRadius: '4px',
+    width: '85px',
+    height: '20px',
     color: '#051039',
     maxHeight: '1em',
     boxSizing: 'content-box'
@@ -65,13 +64,13 @@ var tagStyle = function tagStyle(color) {
 var StatusTag = function StatusTag(_ref) {
   var content = _ref.content,
       color = _ref.color;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
-  }, tagStyle(color), {
+    justifyContent: "center",
+    sx: Object.assign({}, tagStyle(color)),
     "data-testid": "statusTag"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: "caption"
   }, content));
 };
@@ -113,10 +112,7 @@ var useStyles$e = makeStyles(function () {
       alignItems: 'center'
     },
     dialogContent: {
-      padding: '40px 20px 0px 20px'
-    },
-    dialogOptions: {
-      padding: '4px 20px 16px 20px'
+      padding: '40px 20px 0px 20px !important'
     }
   };
 });
@@ -146,14 +142,14 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     open: open,
     maxWidth: "sm",
     fullWidth: true,
-    disableBackdropClick: true,
+    // fix for briefly showing default options when closing dialog
     transitionDuration: 0
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
-    disableTypography: true,
     className: classes.dialogHeader
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h5",
-    "data-testid": "confirmationDialog-title"
+    "data-testid": "confirmationDialog-title",
+    component: "span"
   }, title), /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "confirmationDialog-close",
     "aria-label": "close",
@@ -829,14 +825,14 @@ var AppHeader = function AppHeader(_ref) {
     sm: 3
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, menu)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 10,
     sm: 6
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "center",
+    justifyContent: "center",
     alignItems: "center",
     wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement("img", {
@@ -851,7 +847,7 @@ var AppHeader = function AppHeader(_ref) {
     xs: 1,
     sm: 3,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, userMenu)));
 };
 
@@ -1159,7 +1155,8 @@ var UserMenu = function UserMenu(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    className: classes.button
+    className: classes.button,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     className: classes.avatar
   }, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
@@ -1384,17 +1381,18 @@ var ToolHeader = function ToolHeader(_ref) {
     xs: 1
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn",
     className: classes.iconDrag,
-    disableRipple: true
+    disableRipple: true,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 10
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "center",
+    justifyContent: "center",
     alignItems: "center"
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h2",
@@ -1408,11 +1406,12 @@ var ToolHeader = function ToolHeader(_ref) {
     item: true,
     xs: 1,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
     className: classes.iconClose,
-    onClick: onClickClose
+    onClick: onClickClose,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Close, null)))));
 };
 
@@ -2073,7 +2072,7 @@ var ShortcutList = function ShortcutList(_ref2) {
     }, /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
       direction: "row",
-      justify: "space-between",
+      justifyContent: "space-between",
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
@@ -2259,32 +2258,22 @@ var sliderStyles = makeStyles(function (theme) {
 var CustomSliderComponent = withStyles(function (theme) {
   return {
     root: {
-      marginLeft: '16px',
       // highlight selected label
       '& span.selectedLabel': {
         fontWeight: 'bold'
       }
     },
     thumb: {
-      width: 20,
-      height: 20,
-      marginLeft: '-7px !important',
-      marginBottom: '-10px !important',
       backgroundColor: theme.palette.geowebColors.customSlider.thumb,
       '$disabled &': {
-        width: 20,
-        height: 20,
         backgroundColor: theme.palette.geowebColors.customSlider.thumbDisabled
       },
       boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
-      '&:focus, &:hover, &:active': {
+      '&.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
@@ -2296,18 +2285,15 @@ var CustomSliderComponent = withStyles(function (theme) {
       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,
@@ -2347,7 +2333,7 @@ var CustomSlider = function CustomSlider(_a) {
 
   React.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
 

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$e = 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'
         }
       };
     });
@@ -193,31 +194,31 @@
           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$d = 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"
@@ -571,11 +572,11 @@
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d;
       var classes = useStyles$d();
-      return /*#__PURE__*/React__namespace.createElement(lab.Alert, {
+      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$c = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -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$b = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -681,39 +682,39 @@
       var classes = useStyles$b();
       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)));
     };
 
@@ -763,7 +764,7 @@
      * */
 
     var useStyles$a = function useStyles(isRightAligned) {
-      return core.makeStyles(function () {
+      return makeStyles__default["default"](function () {
         return {
           icon: __assign(__assign({
             width: 20,
@@ -784,9 +785,9 @@
 
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
-      var theme = core.useTheme();
+      var theme = material.useTheme();
       var styles = useStyles$a(isRightAligned)();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      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$9 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1010,19 +1011,20 @@
           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, {
+      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$8 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1169,7 +1171,7 @@
       }
     };
 
-    var useStyles$7 = core.makeStyles(function (theme) {
+    var useStyles$7 = makeStyles__default["default"](function (theme) {
       return {
         header: {
           boxShadow: theme.shadows[1],
@@ -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, {
+      }, 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$6 = makeStyles__default["default"](function () {
       return {
         container: {
           overflow: 'hidden',
@@ -1327,7 +1331,7 @@
           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({
+      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$5 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1571,7 +1575,7 @@
       var classes = useStyles$5();
 
       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$4 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           fill: theme.palette.geowebColors.typographyAndIcons.text
@@ -1627,7 +1631,7 @@
     });
     var OptionIcon = function OptionIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 11",
         style: {
           width: 12,
@@ -1650,7 +1654,7 @@
     };
     var CommandIcon = function CommandIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 12",
         style: {
           width: 12,
@@ -1673,7 +1677,7 @@
     };
     var ArrowLeftIcon = function ArrowLeftIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
           width: 12,
@@ -1697,7 +1701,7 @@
     };
     var ArrowRightIcon = function ArrowRightIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
           width: 12,
@@ -1721,7 +1725,7 @@
     };
     var ArrowDownIcon = function ArrowDownIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 6 12",
         style: {
           width: 6,
@@ -1744,7 +1748,7 @@
     };
     var ArrowUpIcon = function ArrowUpIcon() {
       var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+      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$3 = makeStyles__default["default"](function () {
       return {
         row: {
           minHeight: 56
@@ -1919,22 +1923,22 @@
           platform = _b === void 0 ? 'windows' : _b;
       var classes = useStyles$3();
       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,7 +1958,7 @@
       }, value === index && children);
     };
 
-    var useStyles$2 = core.makeStyles(function () {
+    var useStyles$2 = makeStyles__default["default"](function () {
       return {
         container: {
           margin: '0px 20px'
@@ -1978,14 +1982,14 @@
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.container
-      }, /*#__PURE__*/React__default["default"].createElement(core.Tabs, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
         value: activeTab,
         onChange: onChangeTab,
         "aria-label": "platform"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Tab, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Tab, {
         className: classes.tab,
         label: "Windows"
-      }), /*#__PURE__*/React__default["default"].createElement(core.Tab, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tab, {
         className: classes.tab,
         label: "Mac"
       })), /*#__PURE__*/React__default["default"].createElement(TabPanel, {
@@ -1999,7 +2003,7 @@
       })));
     };
 
-    var useStyles$1 = core.makeStyles(function () {
+    var useStyles$1 = makeStyles__default["default"](function () {
       return {
         backdrop: {
           zIndex: 1
@@ -2022,14 +2026,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 +2137,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 +2147,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 +2177,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 +2195,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 +2224,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 +2238,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 +2293,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)));
     };

package/lib/components/AlertBanner/AlertBanner.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Color } from '@material-ui/lab';
+import { AlertColor } from '@mui/material';
 interface AlertBannerProps {
     title: string;
-    severity?: Color;
+    severity?: AlertColor;
     info?: string | React.ReactElement;
     dataTestId?: string;
 }

package/lib/components/CustomSlider/CustomSlider.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { SliderProps } from '@material-ui/core';
-export declare const sliderStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"sliderHeader">;
+import { SliderProps } from '@mui/material';
+export declare const sliderStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"sliderHeader">;
 interface CustomSliderProps extends Omit<SliderProps, 'onChange'> {
-    onChange: (event: React.ChangeEvent<HTMLSpanElement>, newValue: number) => void;
+    onChange: (event: Event, newValue: number) => void;
     shouldAutoFocus?: boolean;
 }
 export declare const CustomSlider: React.FC<CustomSliderProps>;

package/lib/components/ToolContainer/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaperProps } from '@material-ui/core';
+import { PaperProps } from '@mui/material';
 export declare type HeaderSize = 'xxs' | 'xs' | 'small' | 'medium' | 'large';
 export interface ToolHeaderProps {
     title?: string;

package/lib/utils/axiosErrorUtils/axiosErrorUtils.d.ts

@@ -1,3 +1,3 @@
 import { AxiosError } from 'axios';
-export declare const isAxiosError: (error: AxiosError | Error) => error is AxiosError<any>;
+export declare const isAxiosError: (error: AxiosError | Error) => error is AxiosError<any, any>;
 export declare const getAxiosErrorMessage: (error: AxiosError) => string;

package/package.json

@@ -1,31 +1,30 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
-  "main": "./shared.umd.js",
-  "module": "./shared.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "react": "16.14.0",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@opengeoweb/theme": "2.1.3",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "react": "^17.0.2",
+    "@mui/material": "^5.2.8",
+    "@opengeoweb/theme": "2.1.4",
+    "@mui/styles": "^5.2.3",
+    "@mui/icons-material": "^5.2.5",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.1.3",
+    "@opengeoweb/form-fields": "2.1.4",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
-    "@material-ui/pickers": "^3.2.10",
     "moment-timezone": "^0.5.31",
-    "@date-io/moment": "^1.3.13",
-    "axios": "^0.21.4"
+    "@mui/lab": "^5.0.0-alpha.64",
+    "axios": "^0.25.0"
   }
 }