@opengeoweb/shared 2.13.0 → 3.0.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
@@ -8,7 +8,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { throttle } from 'lodash';
-import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
 
 /* *
@@ -870,7 +869,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function () {
+var useStyles$5 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -887,7 +886,7 @@ var useStyles$7 = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$7();
+  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -895,45 +894,46 @@ var AppLayout = function AppLayout(_ref) {
   }, children));
 };
 
-var useStyles$6 = makeStyles(function (theme) {
-  var _header;
+var styles$4 = {
+  header: function header(theme) {
+    var _ref;
 
-  return {
-    header: (_header = {
+    return _ref = {
       height: 40,
-      background: theme.palette.geowebColors.brand.brand,
+      backgroundColor: theme.palette.geowebColors.brand.brand,
       color: theme.palette.common.white,
       boxShadow: theme.shadows[1],
       zIndex: 1000
-    }, _defineProperty(_header, theme.breakpoints.down('sm'), {
+    }, _defineProperty(_ref, theme.breakpoints.down('sm'), {
       padding: '0 8px'
-    }), _defineProperty(_header, theme.breakpoints.up('sm'), {
+    }), _defineProperty(_ref, theme.breakpoints.up('sm'), {
       padding: '0 24px'
-    }), _header),
-    title: {
-      marginLeft: 6,
-      fontSize: '1.25rem',
-      fontWeight: 400,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
-    },
-    container: {
-      height: '100%'
-    }
-  };
-});
+    }), _ref;
+  },
+  title: {
+    marginLeft: 1,
+    fontSize: '1.25rem',
+    fontWeight: 400,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    letterSpacing: '0.15px'
+  },
+  container: {
+    height: '100%'
+  }
+};
 
-var AppHeader = function AppHeader(_ref) {
-  var menu = _ref.menu,
-      userMenu = _ref.userMenu,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$6();
-  return /*#__PURE__*/React__default.createElement("header", {
-    className: classes.header
+var AppHeader = function AppHeader(_ref2) {
+  var menu = _ref2.menu,
+      userMenu = _ref2.userMenu,
+      _ref2$title = _ref2.title,
+      title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    component: "header",
+    sx: styles$4.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    className: classes.container,
+    sx: styles$4.container,
     container: true,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -954,7 +954,7 @@ var AppHeader = function AppHeader(_ref) {
     wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
-    className: classes.title
+    sx: styles$4.title
   }, title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 1,
@@ -1175,6 +1175,51 @@ ErrorBoundary.defaultProps = {
   }
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var styles$3 = {
+  small: {
+    height: 16,
+    width: 16,
+    fontSize: '0.5rem'
+  },
+  large: {
+    height: 32,
+    width: 32,
+    fontSize: '0.938rem'
+  }
+};
+
+var Avatar = function Avatar(_ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size;
+  return /*#__PURE__*/React.createElement(Avatar$1, {
+    "data-testid": "avatar",
+    sx: Object.assign(Object.assign({}, styles$3[size]), {
+      fontWeight: 500,
+      color: 'geowebColors.brand.brand',
+      backgroundColor: 'common.white',
+      border: '0.1px solid',
+      borderColor: 'geowebColors.brand.brand'
+    })
+  }, children);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1191,40 +1236,30 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function (theme) {
-  return {
-    container: {
-      position: 'absolute',
-      top: 38,
-      right: 20,
-      width: 256,
-      borderRadius: 0,
-      boxShadow: theme.shadows[5],
-      background: theme.palette.geowebColors.background.surface
-    },
-    userMenu: {
-      padding: 0,
-      '& > li': {
-        paddingTop: 24,
-        paddingBottom: 24,
-        paddingLeft: 16,
-        paddingRight: 16
-      }
-    },
-    button: {
-      color: theme.palette.common.white,
-      padding: 0
-    },
-    avatar: {
-      height: 32,
-      width: 32,
-      fontSize: '0.938rem',
-      fontWeight: 500,
-      color: theme.palette.geowebColors.brand.brand,
-      backgroundColor: theme.palette.common.white
+var styles$2 = {
+  container: {
+    position: 'absolute',
+    top: 38,
+    right: 20,
+    width: 256,
+    borderRadius: 0,
+    boxShadow: 5,
+    backgroundColor: 'geowebColors.background.surface'
+  },
+  userMenu: {
+    padding: 0,
+    '& > li': {
+      paddingTop: 3,
+      paddingBottom: 3,
+      paddingLeft: 2,
+      paddingRight: 2
     }
-  };
-});
+  },
+  button: {
+    color: 'common.white',
+    padding: 0
+  }
+};
 
 var UserMenu = function UserMenu(_ref) {
   var _ref$isOpen = _ref.isOpen,
@@ -1239,22 +1274,19 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    className: classes.button,
+    sx: styles$2.button,
     size: "large"
-  }, /*#__PURE__*/React__default.createElement(Avatar, {
-    className: classes.avatar
-  }, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    className: classes.container,
+  }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
+    sx: styles$2.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    className: classes.userMenu,
+    sx: styles$2.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -2183,65 +2215,56 @@ var getInitials = function getInitials(name) {
   }
 };
 
-var sliderStyles = makeStyles(function (theme) {
-  return {
-    sliderHeader: {
-      fontFamily: 'Roboto-Black, Roboto',
-      fontSize: 12,
-      color: theme.palette.geowebColors.typographyAndIcons.text,
-      padding: '11px 0 11px 16px'
+var sliderHeaderStyle = {
+  fontFamily: 'Roboto-Black, Roboto',
+  fontSize: 12,
+  color: 'geowebColors.typographyAndIcons.text',
+  padding: '11px 0 11px 16px'
+};
+var sliderStyle = {
+  '& span.selectedLabel': {
+    fontWeight: 'bold'
+  },
+  '& .MuiSlider-thumb': {
+    backgroundColor: 'geowebColors.customSlider.thumb',
+    boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
+    '&.Mui-focusVisible, &:hover, &:active': {
+      boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
     }
-  };
-});
-var CustomSliderComponent = withStyles(function (theme) {
-  return {
-    root: {
-      // highlight selected label
-      '& span.selectedLabel': {
-        fontWeight: 'bold'
-      }
-    },
-    thumb: {
-      backgroundColor: theme.palette.geowebColors.customSlider.thumb,
-      '$disabled &': {
-        backgroundColor: theme.palette.geowebColors.customSlider.thumbDisabled
-      },
-      boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
-      '&.Mui-focusVisible, &:hover, &:active': {
-        boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
-      }
-    },
-    mark: {
-      backgroundColor: theme.palette.geowebColors.customSlider.mark,
-      '$disabled &': {
-        backgroundColor: theme.palette.geowebColors.customSlider.markDisabled
-      }
-    },
-    markLabel: {
-      fontFamily: 'Roboto-Black, Roboto',
-      fontSize: 12,
-      color: theme.palette.geowebColors.typographyAndIcons.text
+  },
+  '& .MuiSlider-mark': {
+    backgroundColor: 'geowebColors.customSlider.mark'
+  },
+  '& .MuiSlider-markLabel': {
+    fontFamily: 'Roboto-Black, Roboto',
+    fontSize: 12,
+    color: 'geowebColors.typographyAndIcons.text'
+  },
+  '& .MuiSlider-track': {
+    color: 'geowebColors.customSlider.track',
+    backgroundColor: 'geowebColors.customSlider.track'
+  },
+  '& .MuiSlider-rail': {
+    backgroundColor: 'geowebColors.customSlider.rail',
+    opacity: 1
+  },
+  '&.Mui-disabled': {
+    '& .MuiSlider-thumb': {
+      backgroundColor: 'geowebColors.customSlider.thumbDisabled'
     },
-    track: {
-      color: theme.palette.geowebColors.customSlider.track,
-      backgroundColor: theme.palette.geowebColors.customSlider.track,
-      '$disabled &': {
-        backgroundColor: theme.palette.geowebColors.customSlider.trackDisabled,
-        color: theme.palette.geowebColors.customSlider.trackDisabled
-      }
+    '& .MuiSlider-mark': {
+      backgroundColor: 'geowebColors.customSlider.markDisabled'
     },
-    rail: {
-      backgroundColor: theme.palette.geowebColors.customSlider.rail,
-      opacity: 1,
-      '$disabled &': {
-        backgroundColor: theme.palette.geowebColors.customSlider.railDisabled,
-        opacity: 1
-      }
+    '& .MuiSlider-track': {
+      backgroundColor: 'geowebColors.customSlider.trackDisabled',
+      color: 'geowebColors.customSlider.trackDisabled'
     },
-    disabled: {// this has to exist, because otherwise '$disabled &' rules above has no effect ???
+    '& .MuiSlider-rail': {
+      backgroundColor: 'geowebColors.customSlider.railDisabled',
+      opacity: 1
     }
-  };
-})(Slider);
+  }
+};
 var CustomSlider = function CustomSlider(_a) {
   var value = _a.value,
       _a$orientation = _a.orientation,
@@ -2276,7 +2299,8 @@ var CustomSlider = function CustomSlider(_a) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  return /*#__PURE__*/React.createElement(CustomSliderComponent, Object.assign({
+  return /*#__PURE__*/React.createElement(Slider, Object.assign({
+    sx: sliderStyle,
     ref: element,
     value: value,
     orientation: orientation
@@ -2300,18 +2324,20 @@ var CustomSlider = function CustomSlider(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var CustomToggleButton = function CustomToggleButton(_a) {
+var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'primary' : _a$variant,
+      className = _a.className,
       _a$value = _a.value,
       value = _a$value === void 0 ? 0 : _a$value,
-      props = __rest(_a, ["variant", "value"]);
+      props = __rest(_a, ["variant", "className", "value"]);
 
   return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: variant,
+    ref: ref,
+    className: "".concat(variant, " ").concat(className),
     value: value
   }, props));
-};
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2329,7 +2355,7 @@ var CustomToggleButton = function CustomToggleButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var ToolButton = function ToolButton(_a) {
+var ToolButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var active = _a.active,
       _a$width = _a.width,
       width = _a$width === void 0 ? '24px' : _a$width,
@@ -2345,6 +2371,7 @@ var ToolButton = function ToolButton(_a) {
       props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
   return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
+    ref: ref,
     variant: variant,
     disableRipple: true,
     selected: active,
@@ -2359,7 +2386,7 @@ var ToolButton = function ToolButton(_a) {
       }
     }, sx)
   }, props), children);
-};
+});
 
 var getPosition = function getPosition(menuPosition) {
   switch (menuPosition) {
@@ -2882,7 +2909,8 @@ var TooltipSelect = function TooltipSelect(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-// Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+var DEFAULT_ERROR_MESSAGE = 'An error has occurred'; // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+
 var isAxiosError = function isAxiosError(error) {
   return error.isAxiosError !== undefined;
 };
@@ -2897,7 +2925,34 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
     return data.message;
   }
 
-  return 'An error has occurred';
+  if (error.message) {
+    return error.message;
+  }
+
+  return DEFAULT_ERROR_MESSAGE;
+};
+var getErrorMessage = function getErrorMessage(error) {
+  if (isAxiosError(error)) {
+    return getAxiosErrorMessage(error);
+  }
+
+  return error.message || DEFAULT_ERROR_MESSAGE;
+};
+var getAxiosWarningMessage = function getAxiosWarningMessage(error) {
+  var data = error.response && error.response.data;
+
+  if (data && data.WarningMessage && typeof data.WarningMessage === 'string') {
+    return data.WarningMessage;
+  }
+
+  return '';
+};
+var getWarningMessage = function getWarningMessage(error) {
+  if (isAxiosError(error)) {
+    return getAxiosWarningMessage(error);
+  }
+
+  return '';
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, getPosition, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.lodash, global.withStyles, global.createStyles));
-})(this, (function (exports, React, material, theme, reactHookForm, formFields, makeStyles, Draggable, reResizable, lodash, withStyles, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('lodash'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', 'lodash', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.lodash, global.createStyles));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, makeStyles, Draggable, reResizable, lodash, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +28,6 @@
     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);
 
     /*! *****************************************************************************
@@ -723,7 +722,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function () {
+    var useStyles$5 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -740,7 +739,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$7();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -764,13 +763,13 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
-      var _a;
+    var styles$4 = {
+      header: function header(theme) {
+        var _a;
 
-      return {
-        header: (_a = {
+        return _a = {
           height: 40,
-          background: theme.palette.geowebColors.brand.brand,
+          backgroundColor: theme.palette.geowebColors.brand.brand,
           color: theme.palette.common.white,
           boxShadow: theme.shadows[1],
           zIndex: 1000
@@ -778,31 +777,32 @@
           padding: '0 8px'
         }, _a[theme.breakpoints.up('sm')] = {
           padding: '0 24px'
-        }, _a),
-        title: {
-          marginLeft: 6,
-          fontSize: '1.25rem',
-          fontWeight: 400,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis'
-        },
-        container: {
-          height: '100%'
-        }
-      };
-    });
+        }, _a;
+      },
+      title: {
+        marginLeft: 1,
+        fontSize: '1.25rem',
+        fontWeight: 400,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        letterSpacing: '0.15px'
+      },
+      container: {
+        height: '100%'
+      }
+    };
 
     var AppHeader = function AppHeader(_a) {
       var menu = _a.menu,
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$6();
-      return /*#__PURE__*/React__default["default"].createElement("header", {
-        className: classes.header
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "header",
+        sx: styles$4.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        className: classes.container,
+        sx: styles$4.container,
         container: true,
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -823,7 +823,7 @@
         wrap: "nowrap"
       }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
-        className: classes.title
+        sx: styles$4.title
       }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1036,6 +1036,35 @@
       return ErrorBoundary;
     }(React__namespace.Component);
 
+    var styles$3 = {
+      small: {
+        height: 16,
+        width: 16,
+        fontSize: '0.5rem'
+      },
+      large: {
+        height: 32,
+        width: 32,
+        fontSize: '0.938rem'
+      }
+    };
+
+    var Avatar = function Avatar(_a) {
+      var children = _a.children,
+          _b = _a.size,
+          size = _b === void 0 ? 'large' : _b;
+      return /*#__PURE__*/React__namespace.createElement(material.Avatar, {
+        "data-testid": "avatar",
+        sx: __assign(__assign({}, styles$3[size]), {
+          fontWeight: 500,
+          color: 'geowebColors.brand.brand',
+          backgroundColor: 'common.white',
+          border: '0.1px solid',
+          borderColor: 'geowebColors.brand.brand'
+        })
+      }, children);
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1052,40 +1081,30 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](function (theme) {
-      return {
-        container: {
-          position: 'absolute',
-          top: 38,
-          right: 20,
-          width: 256,
-          borderRadius: 0,
-          boxShadow: theme.shadows[5],
-          background: theme.palette.geowebColors.background.surface
-        },
-        userMenu: {
-          padding: 0,
-          '& > li': {
-            paddingTop: 24,
-            paddingBottom: 24,
-            paddingLeft: 16,
-            paddingRight: 16
-          }
-        },
-        button: {
-          color: theme.palette.common.white,
-          padding: 0
-        },
-        avatar: {
-          height: 32,
-          width: 32,
-          fontSize: '0.938rem',
-          fontWeight: 500,
-          color: theme.palette.geowebColors.brand.brand,
-          backgroundColor: theme.palette.common.white
+    var styles$2 = {
+      container: {
+        position: 'absolute',
+        top: 38,
+        right: 20,
+        width: 256,
+        borderRadius: 0,
+        boxShadow: 5,
+        backgroundColor: 'geowebColors.background.surface'
+      },
+      userMenu: {
+        padding: 0,
+        '& > li': {
+          paddingTop: 3,
+          paddingBottom: 3,
+          paddingLeft: 2,
+          paddingRight: 2
         }
-      };
-    });
+      },
+      button: {
+        color: 'common.white',
+        padding: 0
+      }
+    };
 
     var UserMenu = function UserMenu(_a) {
       var _b = _a.isOpen,
@@ -1100,22 +1119,19 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$5();
       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,
+        sx: styles$2.button,
         size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Avatar, {
-        className: classes.avatar
-      }, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        className: classes.container,
+      }, /*#__PURE__*/React__default["default"].createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
+        sx: styles$2.container,
         "data-testid": "userMenu"
       }, /*#__PURE__*/React__default["default"].createElement(material.ClickAwayListener, {
         onClickAway: onClose,
         mouseEvent: "onMouseDown"
       }, /*#__PURE__*/React__default["default"].createElement(material.MenuList, {
-        className: classes.userMenu,
+        sx: styles$2.userMenu,
         variant: "menu"
       }, children))));
     };
@@ -2078,65 +2094,56 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var sliderStyles = makeStyles__default["default"](function (theme) {
-      return {
-        sliderHeader: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text,
-          padding: '11px 0 11px 16px'
+    var sliderHeaderStyle = {
+      fontFamily: 'Roboto-Black, Roboto',
+      fontSize: 12,
+      color: 'geowebColors.typographyAndIcons.text',
+      padding: '11px 0 11px 16px'
+    };
+    var sliderStyle = {
+      '& span.selectedLabel': {
+        fontWeight: 'bold'
+      },
+      '& .MuiSlider-thumb': {
+        backgroundColor: 'geowebColors.customSlider.thumb',
+        boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
+        '&.Mui-focusVisible, &:hover, &:active': {
+          boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
         }
-      };
-    });
-    var CustomSliderComponent = withStyles__default["default"](function (theme) {
-      return {
-        root: {
-          // highlight selected label
-          '& span.selectedLabel': {
-            fontWeight: 'bold'
-          }
-        },
-        thumb: {
-          backgroundColor: theme.palette.geowebColors.customSlider.thumb,
-          '$disabled &': {
-            backgroundColor: theme.palette.geowebColors.customSlider.thumbDisabled
-          },
-          boxShadow: '0px 3px 5px 1px rgba(0,0,0,0.3)',
-          '&.Mui-focusVisible, &:hover, &:active': {
-            boxShadow: '0px 3px 5px 2px rgba(0,0,0,0.4)'
-          }
-        },
-        mark: {
-          backgroundColor: theme.palette.geowebColors.customSlider.mark,
-          '$disabled &': {
-            backgroundColor: theme.palette.geowebColors.customSlider.markDisabled
-          }
-        },
-        markLabel: {
-          fontFamily: 'Roboto-Black, Roboto',
-          fontSize: 12,
-          color: theme.palette.geowebColors.typographyAndIcons.text
+      },
+      '& .MuiSlider-mark': {
+        backgroundColor: 'geowebColors.customSlider.mark'
+      },
+      '& .MuiSlider-markLabel': {
+        fontFamily: 'Roboto-Black, Roboto',
+        fontSize: 12,
+        color: 'geowebColors.typographyAndIcons.text'
+      },
+      '& .MuiSlider-track': {
+        color: 'geowebColors.customSlider.track',
+        backgroundColor: 'geowebColors.customSlider.track'
+      },
+      '& .MuiSlider-rail': {
+        backgroundColor: 'geowebColors.customSlider.rail',
+        opacity: 1
+      },
+      '&.Mui-disabled': {
+        '& .MuiSlider-thumb': {
+          backgroundColor: 'geowebColors.customSlider.thumbDisabled'
         },
-        track: {
-          color: theme.palette.geowebColors.customSlider.track,
-          backgroundColor: theme.palette.geowebColors.customSlider.track,
-          '$disabled &': {
-            backgroundColor: theme.palette.geowebColors.customSlider.trackDisabled,
-            color: theme.palette.geowebColors.customSlider.trackDisabled
-          }
+        '& .MuiSlider-mark': {
+          backgroundColor: 'geowebColors.customSlider.markDisabled'
         },
-        rail: {
-          backgroundColor: theme.palette.geowebColors.customSlider.rail,
-          opacity: 1,
-          '$disabled &': {
-            backgroundColor: theme.palette.geowebColors.customSlider.railDisabled,
-            opacity: 1
-          }
+        '& .MuiSlider-track': {
+          backgroundColor: 'geowebColors.customSlider.trackDisabled',
+          color: 'geowebColors.customSlider.trackDisabled'
         },
-        disabled: {// this has to exist, because otherwise '$disabled &' rules above has no effect ???
+        '& .MuiSlider-rail': {
+          backgroundColor: 'geowebColors.customSlider.railDisabled',
+          opacity: 1
         }
-      };
-    })(material.Slider);
+      }
+    };
     var CustomSlider = function CustomSlider(_a) {
       var value = _a.value,
           _b = _a.orientation,
@@ -2170,7 +2177,8 @@
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
-      return /*#__PURE__*/React__namespace.createElement(CustomSliderComponent, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.Slider, __assign({
+        sx: sliderStyle,
         ref: element,
         value: value,
         orientation: orientation
@@ -2194,18 +2202,20 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var CustomToggleButton = function CustomToggleButton(_a) {
+    var CustomToggleButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
       var _b = _a.variant,
           variant = _b === void 0 ? 'primary' : _b,
+          className = _a.className,
           _c = _a.value,
           value = _c === void 0 ? 0 : _c,
-          props = __rest(_a, ["variant", "value"]);
+          props = __rest(_a, ["variant", "className", "value"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
-        className: variant,
+        ref: ref,
+        className: variant + " " + className,
         value: value
       }, props));
-    };
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2223,7 +2233,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var ToolButton = function ToolButton(_a) {
+    var ToolButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
       var active = _a.active,
           _b = _a.width,
           width = _b === void 0 ? '24px' : _b,
@@ -2239,6 +2249,7 @@
           props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
       return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+        ref: ref,
         variant: variant,
         disableRipple: true,
         selected: active,
@@ -2253,7 +2264,7 @@
           }
         }, sx)
       }, props), children);
-    };
+    });
 
     var getPosition = function getPosition(menuPosition) {
       switch (menuPosition) {
@@ -2792,7 +2803,8 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+    var DEFAULT_ERROR_MESSAGE = 'An error has occurred'; // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+
     var isAxiosError = function isAxiosError(error) {
       return error.isAxiosError !== undefined;
     };
@@ -2807,17 +2819,46 @@
         return data.message;
       }
 
-      return 'An error has occurred';
+      if (error.message) {
+        return error.message;
+      }
+
+      return DEFAULT_ERROR_MESSAGE;
+    };
+    var getErrorMessage = function getErrorMessage(error) {
+      if (isAxiosError(error)) {
+        return getAxiosErrorMessage(error);
+      }
+
+      return error.message || DEFAULT_ERROR_MESSAGE;
+    };
+    var getAxiosWarningMessage = function getAxiosWarningMessage(error) {
+      var data = error.response && error.response.data;
+
+      if (data && data.WarningMessage && typeof data.WarningMessage === 'string') {
+        return data.WarningMessage;
+      }
+
+      return '';
+    };
+    var getWarningMessage = function getWarningMessage(error) {
+      if (isAxiosError(error)) {
+        return getAxiosWarningMessage(error);
+      }
+
+      return '';
     };
 
     exports.AlertBanner = AlertBanner;
     exports.AlertIcon = AlertIcon;
     exports.AppHeader = AppHeader;
     exports.AppLayout = AppLayout;
+    exports.Avatar = Avatar;
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
     exports.CustomToggleButton = CustomToggleButton;
+    exports.DEFAULT_ERROR_MESSAGE = DEFAULT_ERROR_MESSAGE;
     exports.Draggable = DraggableComponent$1;
     exports.EnableButton = EnableButton;
     exports.ErrorBoundary = ErrorBoundary;
@@ -2838,11 +2879,14 @@
     exports.UserMenuItemTheme = MenuItemTheme;
     exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
+    exports.getAxiosWarningMessage = getAxiosWarningMessage;
+    exports.getErrorMessage = getErrorMessage;
     exports.getInitials = getInitials;
     exports.getPosition = getPosition;
+    exports.getWarningMessage = getWarningMessage;
     exports.isAxiosError = isAxiosError;
     exports.showPrompt = showPrompt;
-    exports.sliderStyles = sliderStyles;
+    exports.sliderHeaderStyle = sliderHeaderStyle;
     exports.tooltipContainerStyles = tooltipContainerStyles;
     exports.useConfirmationDialog = useConfirmationDialog;
     exports.useDialogActions = useDialogActions;

package/lib/components/AppHeader/AppHeader.stories.d.ts

@@ -1,2 +1,13 @@
 import React from 'react';
-export declare const AppHeaders: () => React.ReactElement;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AppHeaderDark: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const AppHeaderLight: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface AvatarProps {
+    children: React.ReactNode;
+    size?: 'small' | 'large';
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/lib/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AvatarLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const AvatarDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

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

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { SliderProps } from '@mui/material';
-export declare const sliderStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"sliderHeader">;
+export declare const sliderHeaderStyle: {
+    fontFamily: string;
+    fontSize: number;
+    color: string;
+    padding: string;
+};
 interface CustomSliderProps extends Omit<SliderProps, 'onChange'> {
     onChange: (event: Event, newValue: number) => void;
     shouldAutoFocus?: boolean;

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

@@ -3,7 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const CustomSliderComponent: () => React.ReactElement;
 export declare const CustomSliderLightTheme: {
     (): React.ReactElement;
     storyName: string;

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

@@ -1 +1 @@
-export { CustomSlider, sliderStyles } from './CustomSlider';
+export { CustomSlider, sliderHeaderStyle } from './CustomSlider';

package/lib/components/components.stories.d.ts

@@ -1,4 +1,3 @@
-export * from './AppHeader/AppHeader.stories';
 export * from './ErrorBoundary/ErrorBoundary.stories';
 declare const _default: {
     title: string;

package/lib/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './ManagerDeleteButton';
 export * from './EnableButton';
 export * from './AlertIcon';
 export * from './TooltipSelect';
+export * from './Avatar';

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

@@ -1,3 +1,7 @@
 import { AxiosError } from 'axios';
+export declare const DEFAULT_ERROR_MESSAGE = "An error has occurred";
 export declare const isAxiosError: (error: AxiosError | Error) => error is AxiosError<any, any>;
 export declare const getAxiosErrorMessage: (error: AxiosError) => string;
+export declare const getErrorMessage: (error: Error | AxiosError) => string;
+export declare const getAxiosWarningMessage: (error: AxiosError) => string;
+export declare const getWarningMessage: (error: AxiosError | Error) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.13.0",
+  "version": "3.0.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "2.13.0",
+    "@opengeoweb/theme": "3.0.0",
     "@mui/styles": "^5.2.3",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.13.0",
+    "@opengeoweb/form-fields": "3.0.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",