@opengeoweb/shared 3.0.0 → 4.0.0

package/index.esm.js

@@ -4,11 +4,9 @@ import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, Dialog
 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 createStyles from '@mui/styles/createStyles';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -811,7 +809,7 @@ var AlertBanner = function AlertBanner(_ref) {
         }
       },
       '& .MuiAlert-icon': {
-        margin: '-3px 10px 0px 0px',
+        marginTop: '-3px',
         padding: '0px'
       }
     } : {
@@ -832,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",
@@ -869,32 +869,27 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = 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$5();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.wrapper
-  }, header, /*#__PURE__*/React__default.createElement("main", {
-    className: classes.main
   }, children));
 };
 
-var styles$4 = {
+var styles$5 = {
   header: function header(theme) {
     var _ref;
 
@@ -931,9 +926,9 @@ var AppHeader = function AppHeader(_ref2) {
       title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
-    sx: styles$4.header
+    sx: styles$5.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    sx: styles$4.container,
+    sx: styles$5.container,
     container: true,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -954,7 +949,7 @@ var AppHeader = function AppHeader(_ref2) {
     wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
-    sx: styles$4.title
+    sx: styles$5.title
   }, title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 1,
@@ -1191,7 +1186,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var styles$3 = {
+var styles$4 = {
   small: {
     height: 16,
     width: 16,
@@ -1210,7 +1205,7 @@ var Avatar = function Avatar(_ref) {
       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]), {
+    sx: Object.assign(Object.assign({}, styles$4[size]), {
       fontWeight: 500,
       color: 'geowebColors.brand.brand',
       backgroundColor: 'common.white',
@@ -1236,7 +1231,7 @@ var Avatar = function Avatar(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var styles$2 = {
+var styles$3 = {
   container: {
     position: 'absolute',
     top: 38,
@@ -1277,16 +1272,16 @@ var UserMenu = function UserMenu(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    sx: styles$2.button,
+    sx: styles$3.button,
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    sx: styles$2.container,
+    sx: styles$3.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    sx: styles$2.userMenu,
+    sx: styles$3.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -1354,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
   });
 };
 
@@ -1546,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,
@@ -1585,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,
@@ -1594,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
     }
@@ -1788,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);
@@ -2013,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, {
@@ -2049,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))));
   }));
 };
@@ -2112,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],
@@ -2147,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
@@ -2471,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,
@@ -2525,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,
@@ -2588,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);
@@ -2604,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));
 };

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/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';
+    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,9 +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 createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -664,7 +662,7 @@
             }
           },
           '& .MuiAlert-icon': {
-            margin: '-3px 10px 0px 0px',
+            marginTop: '-3px',
             padding: '0px'
           }
         } : {
@@ -685,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",
@@ -722,28 +722,23 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = 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$5();
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.wrapper
-      }, header, /*#__PURE__*/React__default["default"].createElement("main", {
-        className: classes.main
       }, children));
     };
 
@@ -763,7 +758,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$4 = {
+    var styles$5 = {
       header: function header(theme) {
         var _a;
 
@@ -800,9 +795,9 @@
           title = _b === void 0 ? 'GeoWeb' : _b;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
-        sx: styles$4.header
+        sx: styles$5.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        sx: styles$4.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",
-        sx: styles$4.title
+        sx: styles$5.title
       }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1036,7 +1031,7 @@
       return ErrorBoundary;
     }(React__namespace.Component);
 
-    var styles$3 = {
+    var styles$4 = {
       small: {
         height: 16,
         width: 16,
@@ -1055,7 +1050,7 @@
           size = _b === void 0 ? 'large' : _b;
       return /*#__PURE__*/React__namespace.createElement(material.Avatar, {
         "data-testid": "avatar",
-        sx: __assign(__assign({}, styles$3[size]), {
+        sx: __assign(__assign({}, styles$4[size]), {
           fontWeight: 500,
           color: 'geowebColors.brand.brand',
           backgroundColor: 'common.white',
@@ -1081,7 +1076,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$2 = {
+    var styles$3 = {
       container: {
         position: 'absolute',
         top: 38,
@@ -1122,16 +1117,16 @@
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
-        sx: styles$2.button,
+        sx: styles$3.button,
         size: "large"
       }, /*#__PURE__*/React__default["default"].createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        sx: styles$2.container,
+        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, {
-        sx: styles$2.userMenu,
+        sx: styles$3.userMenu,
         variant: "menu"
       }, children))));
     };
@@ -1199,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
       });
     };
 
@@ -1391,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,
@@ -1432,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,
@@ -1441,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
         }
@@ -1633,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);
@@ -1861,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, {
@@ -1897,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))));
       }));
     };
@@ -1959,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];
@@ -1993,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
@@ -2348,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,
@@ -2402,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,
@@ -2465,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);
@@ -2481,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));
     };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './ErrorBoundary.css';
 export declare const ErrorBoundaryDemo: {
     (): React.ReactElement;
     storyName: string;

package/lib/components/ManagerButton/ManagerButton.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { IconButtonProps } from '@mui/material';
-export interface ManagerButtonStyle {
-    isActive?: boolean;
-    isEnabled?: boolean;
-    isAccessible?: boolean;
-}
-interface ManagerButtonProps extends IconButtonProps {
+export interface ManagerButtonProps extends IconButtonProps {
     tooltipTitle: string;
     onClick?: (event: React.MouseEvent) => void;
     isActive?: boolean;
@@ -15,4 +10,3 @@ interface ManagerButtonProps extends IconButtonProps {
     isAccessible?: boolean;
 }
 export declare const ManagerButton: React.FC<ManagerButtonProps>;
-export {};

package/package.json

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