@opengeoweb/shared 2.14.0 → 4.0.0

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('react-draggable'), require('re-resizable'), require('lodash')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', 'lodash'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.lodash));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, Draggable, reResizable, lodash) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,10 +26,7 @@
 
     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.
@@ -665,7 +662,7 @@
             }
           },
           '& .MuiAlert-icon': {
-            margin: '-3px 10px 0px 0px',
+            marginTop: '-3px',
             padding: '0px'
           }
         } : {
@@ -686,13 +683,15 @@
           fontWeight: 'normal',
           marginTop: '0px!important',
           paddingTop: '0px!important',
-          marginBottom: '0px!important'
+          marginBottom: '0px!important',
+          lineHeight: isCompact ? '18px' : '24px'
         }
       }, title), info && /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           fontSize: '16px',
           marginTop: 1,
-          wordBreak: 'break-word'
+          wordBreak: 'break-word',
+          lineHeight: '22px'
         }
       }, info), actionButtonProps && /*#__PURE__*/React__namespace.createElement(material.Button, {
         variant: "flat",
@@ -723,28 +722,23 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function () {
-      return {
-        wrapper: {
+
+    var AppLayout = function AppLayout(_a) {
+      var header = _a.header,
+          children = _a.children;
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
           height: '100vh',
           display: 'flex',
           flexDirection: 'column'
         },
-        main: {
+        "data-testid": "appLayout"
+      }, header, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "main",
+        sx: {
           flex: 1,
           position: 'relative'
         }
-      };
-    });
-
-    var AppLayout = function AppLayout(_a) {
-      var header = _a.header,
-          children = _a.children;
-      var classes = useStyles$7();
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.wrapper
-      }, header, /*#__PURE__*/React__default["default"].createElement("main", {
-        className: classes.main
       }, children));
     };
 
@@ -764,13 +758,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$5 = {
+      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 +772,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$5.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        className: classes.container,
+        sx: styles$5.container,
         container: true,
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -823,7 +818,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$5.title
       }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1036,6 +1031,35 @@
       return ErrorBoundary;
     }(React__namespace.Component);
 
+    var styles$4 = {
+      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$4[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 +1076,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$3 = {
+      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 +1114,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$3.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$3.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$3.userMenu,
         variant: "menu"
       }, children))));
     };
@@ -1183,22 +1194,17 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function (theme) {
-      return {
-        footer: {
-          boxShadow: theme.shadows[1],
-          background: theme.palette.geowebColors.background.surface,
+
+    var ToolFooter = function ToolFooter() {
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "footer",
+        sx: {
+          boxShadow: 1,
+          backgroundColor: 'geowebColors.background.surface',
           textAlign: 'right',
           height: 18,
           zIndex: 1
         }
-      };
-    }); // drag handles will be handled by DraggableResizable/Resizable
-
-    var ToolFooter = function ToolFooter() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement("footer", {
-        className: classes.footer
       });
     };
 
@@ -1375,7 +1381,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$1 = {
+    var styles$2 = {
       container: {
         overflow: 'hidden',
         borderRadius: 0,
@@ -1416,7 +1422,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
-        sx: styles$1.container
+        sx: styles$2.container
       }, props), /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, null, /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
         title: title,
         size: size,
@@ -1425,7 +1431,7 @@
         className: headerClassName,
         leftComponent: leftComponent
       })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: styles$1.content,
+        sx: styles$2.content,
         style: {
           maxHeight: maxHeight
         }
@@ -1617,91 +1623,63 @@
       }, children)))) : null;
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var useStyles$3 = makeStyles__default["default"](function (theme) {
-      return {
-        icon: {
-          backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
-          width: 40,
-          height: 40,
-          display: 'inline-flex',
-          verticalAlign: 'middle',
-          alignItems: 'center',
-          borderRadius: theme.shape.borderRadius,
-          '&>span': {
-            textAlign: 'center',
-            fontSize: 14,
-            fontWeight: 500,
-            display: 'flex',
-            margin: 'auto',
-            letterSpacing: 0.25
-          }
-        },
-        segment: {
-          margin: '0 2px',
-          verticalAlign: 'middle',
-          fontSize: 14,
-          fontWeight: 500,
-          letterSpacing: 0.25
-        },
-        connect: {
-          fontSize: 18
-        },
-        divider: {
-          margin: '0 6px',
-          fontSize: 18
-        }
-      };
-    });
+    var segmentStyle = {
+      margin: '0 2px',
+      verticalAlign: 'middle',
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0.25,
+      justifyContent: 'center'
+    };
+    var styles$1 = {
+      icon: __assign(__assign({}, segmentStyle), {
+        backgroundColor: 'geowebColors.textInputField.default.rgba',
+        width: 40,
+        height: 40,
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: 1
+      }),
+      connect: __assign(__assign({}, segmentStyle), {
+        fontSize: 18
+      }),
+      divider: __assign(__assign({}, segmentStyle), {
+        margin: '0 6px',
+        fontSize: 18
+      })
+    };
 
     var ShortCutSegment = function ShortCutSegment(_a) {
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$3();
 
       if (type === 'divider') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+          sx: styles$1.divider,
           "data-testid": "segment-divider",
-          className: classes.segment + " " + classes.divider,
           component: "span"
         }, children);
       }
 
       if (type === 'icon') {
-        return /*#__PURE__*/React__default["default"].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+          sx: styles$1.icon,
           "data-testid": "segment-icon",
-          className: classes.segment + " " + classes.icon
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           component: "span"
-        }, children));
+        }, children);
       }
 
       if (type === 'connect') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          className: classes.segment + " " + classes.connect,
+          sx: styles$1.connect,
           "data-testid": "segment-connect",
           component: "span"
         }, children);
       }
 
       return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        className: classes.segment,
+        sx: segmentStyle,
         "data-testid": "segment-text",
         component: "span"
       }, children);
@@ -1845,33 +1823,18 @@
         });
       });
     };
-    var useStyles$2 = makeStyles__default["default"](function () {
-      return {
-        row: {
-          minHeight: 56
-        },
-        title: {
-          fontSize: 12,
-          fontWeight: 300,
-          letterSpacing: 0.4,
-          opacity: 0.67
-        },
-        description: {
-          alignItems: 'center'
-        }
-      };
-    });
 
     var ShortcutList = function ShortcutList(_a) {
       var _b = _a.platform,
           platform = _b === void 0 ? 'windows' : _b;
-      var classes = useStyles$2();
       var rows = getShortcutList(shortcuts, platform);
       return /*#__PURE__*/React__default["default"].createElement(material.List, {
         "data-testid": "list-" + platform
       }, rows.map(function (row, index) {
         return /*#__PURE__*/React__default["default"].createElement(material.ListItem, {
-          className: classes.row,
+          sx: {
+            minHeight: 56
+          },
           divider: index !== rows.length - 1,
           key: row.title
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1881,11 +1844,18 @@
           alignItems: "center"
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
-          className: classes.title
+          sx: {
+            fontSize: 12,
+            fontWeight: 300,
+            letterSpacing: 0.4,
+            opacity: 0.67
+          }
         }, row.title), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: classes.description
+        }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          sx: {
+            alignItems: 'center'
+          }
         }, row.description))));
       }));
     };
@@ -1943,17 +1913,7 @@
       })));
     };
 
-    var useStyles$1 = makeStyles__default["default"](function () {
-      return {
-        backdrop: {
-          zIndex: 1
-        }
-      };
-    });
-
     var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-      var classes = useStyles$1();
-
       var _a = __read(React__default["default"].useState(false), 2),
           open = _a[0],
           setOpen = _a[1];
@@ -1977,7 +1937,9 @@
       }, "Cheat sheet"))), /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
         "data-testid": "cheatsheet-content",
         open: open,
-        className: classes.backdrop
+        sx: {
+          zIndex: 1
+        }
       }, /*#__PURE__*/React__default["default"].createElement(DraggableComponent, {
         startSize: {
           width: 700
@@ -2078,65 +2040,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 +2123,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 +2148,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 +2179,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 +2195,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 +2210,7 @@
           }
         }, sx)
       }, props), children);
-    };
+    });
 
     var getPosition = function getPosition(menuPosition) {
       switch (menuPosition) {
@@ -2337,14 +2294,14 @@
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         placement: "top",
         title: tooltipTitle
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+      }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
         active: isOpen,
         sx: buttonSx,
         onClick: handleClick,
         "data-testid": buttonTestId,
         variant: variant,
         id: buttonTestId
-      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null)))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorEl,
         open: isOpen,
         onClose: handleClose,
@@ -2391,56 +2348,46 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        button: {
-          height: 24,
-          width: 24,
-          borderRadius: 5,
-          marginTop: 4,
-          color: function color(_a) {
-            var isActive = _a.isActive,
-                isAccessible = _a.isAccessible,
-                isEnabled = _a.isEnabled;
-
-            if (!isEnabled) {
-              return theme.palette.geowebColors.buttons.flat.disabled.color;
-            }
 
-            if (isAccessible) {
-              return theme.palette.geowebColors.greys.accessible;
-            }
+    var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessible) {
+      return {
+        height: '24px',
+        width: '24px',
+        borderRadius: '5px',
+        marginTop: '4px',
+        color: function color() {
+          if (!isEnabled) {
+            return 'geowebColors.buttons.flat.disabled.color';
+          }
 
-            if (isActive) {
-              return theme.palette.common.white;
-            }
+          if (isAccessible) {
+            return 'geowebColors.greys.accessible';
+          }
 
-            return theme.palette.geowebColors.buttons.flat["default"].color;
-          },
-          backgroundColor: function backgroundColor(_a) {
-            var isActive = _a.isActive;
-            return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-          },
-          '&:focus': {
-            backgroundColor: function backgroundColor(_a) {
-              var isActive = _a.isActive;
-              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-            },
-            outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-            borderRadius: 0
-          },
-          '&:hover': {
-            backgroundColor: function backgroundColor(_a) {
-              var isActive = _a.isActive;
-              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-            }
+          if (isActive) {
+            return 'common.white';
           }
+
+          return 'geowebColors.buttons.flat.default.color';
         },
-        popper: {
-          pointerEvents: 'none'
+        backgroundColor: function backgroundColor() {
+          return isActive ? 'geowebColors.buttons.primary.active.fill' : 'inherit';
+        },
+        '&:focus': {
+          backgroundColor: function backgroundColor() {
+            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+          },
+          outline: 'geowebColors.buttons.focusDefault.outline',
+          borderRadius: 0
+        },
+        '&:hover': {
+          backgroundColor: function backgroundColor() {
+            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+          }
         }
-      });
-    });
+      };
+    };
+
     var ManagerButton = function ManagerButton(_a) {
       var _b = _a.tooltipTitle,
           tooltipTitle = _b === void 0 ? '' : _b,
@@ -2454,14 +2401,10 @@
           testId = _a.testId,
           _f = _a.isAccessible,
           isAccessible = _f === void 0 ? false : _f,
-          className = _a.className,
-          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
+          sx = _a.sx,
+          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx"]);
 
-      var classes = useStyles({
-        isActive: isActive,
-        isEnabled: isEnabled,
-        isAccessible: isAccessible
-      });
+      var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
       var handleClick = function handleClick(event) {
         onClick(event);
@@ -2470,14 +2413,14 @@
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: tooltipTitle,
         placement: "top",
-        classes: {
-          popper: classes.popper
+        sx: {
+          pointerEvents: 'none'
         }
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
         size: "small",
         onClick: handleClick,
         "data-testid": testId,
-        className: classes.button + " " + className,
+        sx: __assign(__assign({}, buttonStyles), sx),
         disableFocusRipple: true
       }, props), icon));
     };
@@ -2792,7 +2735,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 +2751,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 +2811,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;