@opengeoweb/shared 2.14.0 → 4.0.0

package/index.esm.js

@@ -1,15 +1,12 @@
 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';
-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';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -812,7 +809,7 @@ var AlertBanner = function AlertBanner(_ref) {
         }
       },
       '& .MuiAlert-icon': {
-        margin: '-3px 10px 0px 0px',
+        marginTop: '-3px',
         padding: '0px'
       }
     } : {
@@ -833,13 +830,15 @@ var AlertBanner = function AlertBanner(_ref) {
       fontWeight: 'normal',
       marginTop: '0px!important',
       paddingTop: '0px!important',
-      marginBottom: '0px!important'
+      marginBottom: '0px!important',
+      lineHeight: isCompact ? '18px' : '24px'
     }
   }, title), info && /*#__PURE__*/React.createElement(Box, {
     sx: {
       fontSize: '16px',
       marginTop: 1,
-      wordBreak: 'break-word'
+      wordBreak: 'break-word',
+      lineHeight: '22px'
     }
   }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
     variant: "flat",
@@ -870,70 +869,66 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function () {
-  return {
-    wrapper: {
+
+var AppLayout = function AppLayout(_ref) {
+  var header = _ref.header,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       height: '100vh',
       display: 'flex',
       flexDirection: 'column'
     },
-    main: {
+    "data-testid": "appLayout"
+  }, header, /*#__PURE__*/React__default.createElement(Box, {
+    component: "main",
+    sx: {
       flex: 1,
       position: 'relative'
     }
-  };
-});
-
-var AppLayout = function AppLayout(_ref) {
-  var header = _ref.header,
-      children = _ref.children;
-  var classes = useStyles$7();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.wrapper
-  }, header, /*#__PURE__*/React__default.createElement("main", {
-    className: classes.main
   }, children));
 };
 
-var useStyles$6 = makeStyles(function (theme) {
-  var _header;
+var styles$5 = {
+  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$5.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    className: classes.container,
+    sx: styles$5.container,
     container: true,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -954,7 +949,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$5.title
   }, title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 1,
@@ -1175,6 +1170,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$4 = {
+  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$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.
@@ -1191,40 +1231,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$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(_ref) {
   var _ref$isOpen = _ref.isOpen,
@@ -1239,22 +1269,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$3.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$3.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    className: classes.userMenu,
+    sx: styles$3.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -1322,22 +1349,17 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function (theme) {
-  return {
-    footer: {
-      boxShadow: theme.shadows[1],
-      background: theme.palette.geowebColors.background.surface,
+
+var ToolFooter = function ToolFooter() {
+  return /*#__PURE__*/React__default.createElement(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.createElement("footer", {
-    className: classes.footer
   });
 };
 
@@ -1514,7 +1536,7 @@ var ToolHeader = function ToolHeader(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var styles$1 = {
+var styles$2 = {
   container: {
     overflow: 'hidden',
     borderRadius: 0,
@@ -1553,7 +1575,7 @@ var ToolContainer = function ToolContainer(_a) {
 
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
-    sx: styles$1.container
+    sx: styles$2.container
   }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
     title: title,
     size: size,
@@ -1562,7 +1584,7 @@ var ToolContainer = function ToolContainer(_a) {
     className: headerClassName,
     leftComponent: leftComponent
   })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles$1.content,
+    sx: styles$2.content,
     style: {
       maxHeight: maxHeight
     }
@@ -1756,75 +1778,63 @@ var DraggableComponent = function DraggableComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$3 = makeStyles(function (theme) {
-  return {
-    icon: {
-      backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
-      width: 40,
-      height: 40,
-      display: 'inline-flex',
-      verticalAlign: 'middle',
-      alignItems: 'center',
-      borderRadius: theme.shape.borderRadius,
-      '&>span': {
-        textAlign: 'center',
-        fontSize: 14,
-        fontWeight: 500,
-        display: 'flex',
-        margin: 'auto',
-        letterSpacing: 0.25
-      }
-    },
-    segment: {
-      margin: '0 2px',
-      verticalAlign: 'middle',
-      fontSize: 14,
-      fontWeight: 500,
-      letterSpacing: 0.25
-    },
-    connect: {
-      fontSize: 18
-    },
-    divider: {
-      margin: '0 6px',
-      fontSize: 18
-    }
-  };
-});
+var segmentStyle = {
+  margin: '0 2px',
+  verticalAlign: 'middle',
+  fontSize: 14,
+  fontWeight: 500,
+  letterSpacing: 0.25,
+  justifyContent: 'center'
+};
+var styles$1 = {
+  icon: Object.assign(Object.assign({}, segmentStyle), {
+    backgroundColor: 'geowebColors.textInputField.default.rgba',
+    width: 40,
+    height: 40,
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: 1
+  }),
+  connect: Object.assign(Object.assign({}, segmentStyle), {
+    fontSize: 18
+  }),
+  divider: Object.assign(Object.assign({}, segmentStyle), {
+    margin: '0 6px',
+    fontSize: 18
+  })
+};
 
 var ShortCutSegment = function ShortCutSegment(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
       children = _ref.children;
-  var classes = useStyles$3();
 
   if (type === 'divider') {
     return /*#__PURE__*/React__default.createElement(Typography, {
+      sx: styles$1.divider,
       "data-testid": "segment-divider",
-      className: "".concat(classes.segment, " ").concat(classes.divider),
       component: "span"
     }, children);
   }
 
   if (type === 'icon') {
-    return /*#__PURE__*/React__default.createElement("span", {
+    return /*#__PURE__*/React__default.createElement(Typography, {
+      sx: styles$1.icon,
       "data-testid": "segment-icon",
-      className: "".concat(classes.segment, " ").concat(classes.icon)
-    }, /*#__PURE__*/React__default.createElement(Typography, {
       component: "span"
-    }, children));
+    }, children);
   }
 
   if (type === 'connect') {
     return /*#__PURE__*/React__default.createElement(Typography, {
-      className: "".concat(classes.segment, " ").concat(classes.connect),
+      sx: styles$1.connect,
       "data-testid": "segment-connect",
       component: "span"
     }, children);
   }
 
   return /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.segment,
+    sx: segmentStyle,
     "data-testid": "segment-text",
     component: "span"
   }, children);
@@ -1981,33 +1991,18 @@ var getShortcutList = function getShortcutList(shortcutList) {
     });
   });
 };
-var useStyles$2 = makeStyles(function () {
-  return {
-    row: {
-      minHeight: 56
-    },
-    title: {
-      fontSize: 12,
-      fontWeight: 300,
-      letterSpacing: 0.4,
-      opacity: 0.67
-    },
-    description: {
-      alignItems: 'center'
-    }
-  };
-});
 
 var ShortcutList = function ShortcutList(_ref2) {
   var _ref2$platform = _ref2.platform,
       platform = _ref2$platform === void 0 ? 'windows' : _ref2$platform;
-  var classes = useStyles$2();
   var rows = getShortcutList(shortcuts, platform);
   return /*#__PURE__*/React__default.createElement(List, {
     "data-testid": "list-".concat(platform)
   }, rows.map(function (row, index) {
     return /*#__PURE__*/React__default.createElement(ListItem, {
-      className: classes.row,
+      sx: {
+        minHeight: 56
+      },
       divider: index !== rows.length - 1,
       key: row.title
     }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -2017,11 +2012,18 @@ var ShortcutList = function ShortcutList(_ref2) {
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
-      className: classes.title
+      sx: {
+        fontSize: 12,
+        fontWeight: 300,
+        letterSpacing: 0.4,
+        opacity: 0.67
+      }
     }, row.title), /*#__PURE__*/React__default.createElement(Grid, {
       item: true
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classes.description
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      sx: {
+        alignItems: 'center'
+      }
     }, row.description))));
   }));
 };
@@ -2080,17 +2082,7 @@ var CheatSheet = function CheatSheet() {
   })));
 };
 
-var useStyles$1 = makeStyles(function () {
-  return {
-    backdrop: {
-      zIndex: 1
-    }
-  };
-});
-
 var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-  var classes = useStyles$1();
-
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       open = _React$useState2[0],
@@ -2115,7 +2107,9 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
   }, "Cheat sheet"))), /*#__PURE__*/React__default.createElement(Backdrop, {
     "data-testid": "cheatsheet-content",
     open: open,
-    className: classes.backdrop
+    sx: {
+      zIndex: 1
+    }
   }, /*#__PURE__*/React__default.createElement(DraggableComponent, {
     startSize: {
       width: 700
@@ -2183,65 +2177,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 +2261,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 +2286,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 +2317,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 +2333,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 +2348,7 @@ var ToolButton = function ToolButton(_a) {
       }
     }, sx)
   }, props), children);
-};
+});
 
 var getPosition = function getPosition(menuPosition) {
   switch (menuPosition) {
@@ -2444,14 +2433,14 @@ var ToggleMenu = function ToggleMenu(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: tooltipTitle
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     active: isOpen,
     sx: buttonSx,
     onClick: handleClick,
     "data-testid": buttonTestId,
     variant: variant,
     id: buttonTestId
-  }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement(Options, null))), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: handleClose,
@@ -2498,56 +2487,46 @@ var ToggleMenu = function ToggleMenu(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: 24,
-      width: 24,
-      borderRadius: 5,
-      marginTop: 4,
-      color: function color(_ref) {
-        var isActive = _ref.isActive,
-            isAccessible = _ref.isAccessible,
-            isEnabled = _ref.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(_ref2) {
-        var isActive = _ref2.isActive;
-        return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-      },
-      '&:focus': {
-        backgroundColor: function backgroundColor(_ref3) {
-          var isActive = _ref3.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(_ref4) {
-          var isActive = _ref4.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 _a$tooltipTitle = _a.tooltipTitle,
       tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
@@ -2561,14 +2540,10 @@ var ManagerButton = function ManagerButton(_a) {
       testId = _a.testId,
       _a$isAccessible = _a.isAccessible,
       isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
-      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);
@@ -2577,14 +2552,14 @@ var ManagerButton = function ManagerButton(_a) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
     placement: "top",
-    classes: {
-      popper: classes.popper
+    sx: {
+      pointerEvents: 'none'
     }
   }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
     "data-testid": testId,
-    className: "".concat(classes.button, " ").concat(className),
+    sx: Object.assign(Object.assign({}, buttonStyles), sx),
     disableFocusRipple: true
   }, props), icon));
 };
@@ -2882,7 +2857,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 +2873,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 };