@opengeoweb/shared 4.0.0 → 4.2.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 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';
@@ -488,7 +488,7 @@ function usePreventBrowserClose(shouldPreventClose) {
  * */
 var usePoller = function usePoller(deps, callback) {
   var pollingInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300000;
-  var interval = React.useRef(null);
+  var interval = useRef(null);
   React.useEffect(function () {
     if (deps.filter(function (dep) {
       return dep !== null;
@@ -781,7 +781,11 @@ var AlertBanner = function AlertBanner(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return isOpen && /*#__PURE__*/React.createElement(Alert, {
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
     icon: /*#__PURE__*/React.createElement(AlertIcon, {
@@ -891,28 +895,29 @@ var AppLayout = function AppLayout(_ref) {
 
 var styles$5 = {
   header: function header(theme) {
-    var _ref;
-
-    return _ref = {
+    return _defineProperty({
       height: 40,
       backgroundColor: theme.palette.geowebColors.brand.brand,
       color: theme.palette.common.white,
       boxShadow: theme.shadows[1],
-      zIndex: 1000
-    }, _defineProperty(_ref, theme.breakpoints.down('sm'), {
-      padding: '0 8px'
-    }), _defineProperty(_ref, theme.breakpoints.up('sm'), {
+      zIndex: 1000,
+      padding: '0 16px'
+    }, theme.breakpoints.up('md'), {
       padding: '0 24px'
-    }), _ref;
+    });
   },
   title: {
-    marginLeft: 1,
-    fontSize: '1.25rem',
-    fontWeight: 400,
+    fontSize: '20px',
+    fontWeight: 500,
+    fontStretch: 'normal',
+    fontStyle: 'normal',
+    lineHeight: 'normal',
+    letterSpacing: '0.15px',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    letterSpacing: '0.15px'
+    color: 'geowebColors.typographyAndIcons.text',
+    marginLeft: 1
   },
   container: {
     height: '100%'
@@ -933,27 +938,35 @@ var AppHeader = function AppHeader(_ref2) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start"
-  }, menu)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 10,
+    xs: 6,
     sm: 6
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justifyContent: "center",
     alignItems: "center",
-    wrap: "nowrap"
-  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
+    wrap: "nowrap",
+    sx: {
+      button: {
+        marginLeft: 4,
+        color: 'geowebColors.typographyAndIcons.text'
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
+    style: {
+      position: 'relative',
+      top: '-1px',
+      right: '-1px'
+    }
+  })), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     sx: styles$5.title
-  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, title), menu)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3,
+    xs: 6,
+    sm: 6,
     container: true,
     justifyContent: "flex-end"
   }, userMenu)));
@@ -1007,15 +1020,13 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
 var ResizeComponent = function ResizeComponent(_a) {
   var _a$startPosition = _a.startPosition,
       startPosition = _a$startPosition === void 0 ? {
-    left: null,
-    right: null,
-    top: null
+    left: undefined,
+    right: undefined,
+    top: undefined
   } : _a$startPosition,
       children = _a.children,
       _a$onResizeStart = _a.onResizeStart,
-      onResizeStart = _a$onResizeStart === void 0 ? function () {
-    return null;
-  } : _a$onResizeStart,
+      onResizeStart = _a$onResizeStart === void 0 ? function () {} : _a$onResizeStart,
       size = _a.size,
       setSize = _a.setSize,
       _a$minHeight = _a.minHeight,
@@ -1104,8 +1115,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.state = {
-      error: null,
-      errorInfo: null
+      error: undefined,
+      errorInfo: undefined
     };
     return _this;
   }
@@ -1165,9 +1176,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ErrorBoundary;
 }(React.Component);
 ErrorBoundary.defaultProps = {
-  onError: function onError() {
-    return null;
-  }
+  onError: function onError() {}
 };
 
 /* *
@@ -1192,11 +1201,7 @@ var styles$4 = {
     width: 16,
     fontSize: '0.5rem'
   },
-  large: {
-    height: 32,
-    width: 32,
-    fontSize: '0.938rem'
-  }
+  large: {}
 };
 
 var Avatar = function Avatar(_ref) {
@@ -1205,13 +1210,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$4[size]), {
-      fontWeight: 500,
-      color: 'geowebColors.brand.brand',
-      backgroundColor: 'common.white',
-      border: '0.1px solid',
-      borderColor: 'geowebColors.brand.brand'
-    })
+    sx: Object.assign({}, styles$4[size])
   }, children);
 };
 
@@ -1251,8 +1250,13 @@ var styles$3 = {
     }
   },
   button: {
-    color: 'common.white',
-    padding: 0
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    '&:hover': {
+      border: 'none',
+      background: 'transparent'
+    }
   }
 };
 
@@ -1260,13 +1264,9 @@ var UserMenu = function UserMenu(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$onToggle = _ref.onToggle,
-      onToggle = _ref$onToggle === void 0 ? function () {
-    return null;
-  } : _ref$onToggle,
+      onToggle = _ref$onToggle === void 0 ? function () {} : _ref$onToggle,
       _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {
-    return null;
-  } : _ref$onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -1376,8 +1376,8 @@ var ToolFooter = function ToolFooter() {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var getStyle = function getStyle(size) {
@@ -1618,27 +1618,21 @@ var DraggableComponent = function DraggableComponent(_a) {
   } : _a$startSize,
       _a$startPosition = _a.startPosition,
       startPosition = _a$startPosition === void 0 ? {
-    left: null,
-    right: null,
-    top: null
+    left: undefined,
+    right: undefined,
+    top: undefined
   } : _a$startPosition,
       children = _a.children,
       _a$isOpen = _a.isOpen,
       isOpen = _a$isOpen === void 0 ? true : _a$isOpen,
       _a$onClose = _a.onClose,
-      onClose = _a$onClose === void 0 ? function () {
-    return null;
-  } : _a$onClose,
+      onClose = _a$onClose === void 0 ? function () {} : _a$onClose,
       _a$initialMaxHeight = _a.initialMaxHeight,
       defaultInitialMaxHeight = _a$initialMaxHeight === void 0 ? 'initial' : _a$initialMaxHeight,
       _a$onChangeSize = _a.onChangeSize,
-      onChangeSize = _a$onChangeSize === void 0 ? function () {
-    return null;
-  } : _a$onChangeSize,
+      onChangeSize = _a$onChangeSize === void 0 ? function () {} : _a$onChangeSize,
       _a$onMouseDown = _a.onMouseDown,
-      onMouseDown = _a$onMouseDown === void 0 ? function () {
-    return null;
-  } : _a$onMouseDown,
+      onMouseDown = _a$onMouseDown === void 0 ? function () {} : _a$onMouseDown,
       _a$order = _a.order,
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
@@ -2452,11 +2446,11 @@ var ToggleMenu = function ToggleMenu(_ref) {
         transition: 'none'
       }
     },
-    MenuListProps: children && {
+    MenuListProps: Object.assign({}, children && {
       style: {
         padding: '0px'
       }
-    }
+    })
   }, menuItems && menuItems.map(function (menuItem) {
     var text = menuItem.text,
         icon = menuItem.icon,
@@ -2786,7 +2780,7 @@ var TooltipSelect = function TooltipSelect(_a) {
     title: tooltip,
     placement: "top",
     open: tooltipOpen,
-    sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
+    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
     onOpen: onOpen,
     onClose: onClose,

package/index.umd.js

@@ -357,7 +357,7 @@
         pollingInterval = 300000;
       }
 
-      var interval = React__namespace.useRef(null);
+      var interval = React.useRef(null);
       React__namespace.useEffect(function () {
         if (deps.filter(function (dep) {
           return dep !== null;
@@ -634,7 +634,11 @@
           isOpen = _h[0],
           setIsOpen = _h[1];
 
-      return isOpen && /*#__PURE__*/React__namespace.createElement(material.Alert, {
+      if (!isOpen) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
         icon: /*#__PURE__*/React__namespace.createElement(AlertIcon, {
@@ -755,8 +759,8 @@
      * 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)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var styles$5 = {
       header: function header(theme) {
@@ -767,21 +771,24 @@
           backgroundColor: theme.palette.geowebColors.brand.brand,
           color: theme.palette.common.white,
           boxShadow: theme.shadows[1],
-          zIndex: 1000
-        }, _a[theme.breakpoints.down('sm')] = {
-          padding: '0 8px'
-        }, _a[theme.breakpoints.up('sm')] = {
+          zIndex: 1000,
+          padding: '0 16px'
+        }, _a[theme.breakpoints.up('md')] = {
           padding: '0 24px'
         }, _a;
       },
       title: {
-        marginLeft: 1,
-        fontSize: '1.25rem',
-        fontWeight: 400,
+        fontSize: '20px',
+        fontWeight: 500,
+        fontStretch: 'normal',
+        fontStyle: 'normal',
+        lineHeight: 'normal',
+        letterSpacing: '0.15px',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
-        letterSpacing: '0.15px'
+        color: 'geowebColors.typographyAndIcons.text',
+        marginLeft: 1
       },
       container: {
         height: '100%'
@@ -802,27 +809,35 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "flex-start"
-      }, menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 10,
+        xs: 6,
         sm: 6
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justifyContent: "center",
         alignItems: "center",
-        wrap: "nowrap"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        wrap: "nowrap",
+        sx: {
+          button: {
+            marginLeft: 4,
+            color: 'geowebColors.typographyAndIcons.text'
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
+        style: {
+          position: 'relative',
+          top: '-1px',
+          right: '-1px'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         sx: styles$5.title
-      }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, title), menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3,
+        xs: 6,
+        sm: 6,
         container: true,
         justifyContent: "flex-end"
       }, userMenu)));
@@ -876,15 +891,13 @@
     var ResizeComponent = function ResizeComponent(_a) {
       var _b = _a.startPosition,
           startPosition = _b === void 0 ? {
-        left: null,
-        right: null,
-        top: null
+        left: undefined,
+        right: undefined,
+        top: undefined
       } : _b,
           children = _a.children,
           _c = _a.onResizeStart,
-          onResizeStart = _c === void 0 ? function () {
-        return null;
-      } : _c,
+          onResizeStart = _c === void 0 ? function () {} : _c,
           size = _a.size,
           setSize = _a.setSize,
           _d = _a.minHeight,
@@ -970,8 +983,8 @@
         var _this = _super.call(this, props) || this;
 
         _this.state = {
-          error: null,
-          errorInfo: null
+          error: undefined,
+          errorInfo: undefined
         };
         return _this;
       }
@@ -1024,9 +1037,7 @@
       };
 
       ErrorBoundary.defaultProps = {
-        onError: function onError() {
-          return null;
-        }
+        onError: function onError() {}
       };
       return ErrorBoundary;
     }(React__namespace.Component);
@@ -1037,11 +1048,7 @@
         width: 16,
         fontSize: '0.5rem'
       },
-      large: {
-        height: 32,
-        width: 32,
-        fontSize: '0.938rem'
-      }
+      large: {}
     };
 
     var Avatar = function Avatar(_a) {
@@ -1050,13 +1057,7 @@
           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'
-        })
+        sx: __assign({}, styles$4[size])
       }, children);
     };
 
@@ -1096,8 +1097,13 @@
         }
       },
       button: {
-        color: 'common.white',
-        padding: 0
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        '&:hover': {
+          border: 'none',
+          background: 'transparent'
+        }
       }
     };
 
@@ -1105,13 +1111,9 @@
       var _b = _a.isOpen,
           isOpen = _b === void 0 ? false : _b,
           _c = _a.onToggle,
-          onToggle = _c === void 0 ? function () {
-        return null;
-      } : _c,
+          onToggle = _c === void 0 ? function () {} : _c,
           _d = _a.onClose,
-          onClose = _d === void 0 ? function () {
-        return null;
-      } : _d,
+          onClose = _d === void 0 ? function () {} : _d,
           children = _a.children,
           initials = _a.initials;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
@@ -1221,8 +1223,8 @@
      * 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)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var getStyle = function getStyle(size) {
@@ -1482,27 +1484,21 @@
       } : _d,
           _e = _a.startPosition,
           startPosition = _e === void 0 ? {
-        left: null,
-        right: null,
-        top: null
+        left: undefined,
+        right: undefined,
+        top: undefined
       } : _e,
           children = _a.children,
           _f = _a.isOpen,
           isOpen = _f === void 0 ? true : _f,
           _g = _a.onClose,
-          onClose = _g === void 0 ? function () {
-        return null;
-      } : _g,
+          onClose = _g === void 0 ? function () {} : _g,
           _h = _a.initialMaxHeight,
           defaultInitialMaxHeight = _h === void 0 ? 'initial' : _h,
           _j = _a.onChangeSize,
-          onChangeSize = _j === void 0 ? function () {
-        return null;
-      } : _j,
+          onChangeSize = _j === void 0 ? function () {} : _j,
           _k = _a.onMouseDown,
-          onMouseDown = _k === void 0 ? function () {
-        return null;
-      } : _k,
+          onMouseDown = _k === void 0 ? function () {} : _k,
           _l = _a.order,
           order = _l === void 0 ? 1 : _l,
           _m = _a.source,
@@ -2313,11 +2309,11 @@
             transition: 'none'
           }
         },
-        MenuListProps: children && {
+        MenuListProps: __assign({}, children && {
           style: {
             padding: '0px'
           }
-        }
+        })
       }, menuItems && menuItems.map(function (menuItem) {
         var text = menuItem.text,
             icon = menuItem.icon,
@@ -2664,7 +2660,7 @@
         title: tooltip,
         placement: "top",
         open: tooltipOpen,
-        sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
+        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
       }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
         onOpen: onOpen,
         onClose: onClose,

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

@@ -6,8 +6,20 @@ export default _default;
 export declare const AppHeaderDark: {
     (): React.ReactElement;
     storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
 };
 export declare const AppHeaderLight: {
     (): React.ReactElement;
     storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
 };

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

@@ -5,9 +5,25 @@ declare const _default: {
 export default _default;
 export declare const AvatarLight: {
     (): React.ReactElement;
-    storyName: string;
+    story: {
+        name: string;
+        parameters: {
+            zeplinLink: {
+                name: string;
+                link: string;
+            }[];
+        };
+    };
 };
 export declare const AvatarDark: {
     (): React.ReactElement;
-    storyName: string;
+    story: {
+        name: string;
+        parameters: {
+            zeplinLink: {
+                name: string;
+                link: string;
+            }[];
+        };
+    };
 };

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

@@ -8,5 +8,21 @@ interface ToolContainerDemoProps {
     isSnapShot?: boolean;
 }
 export declare const ToolContainerDemo: React.FC<ToolContainerDemoProps>;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

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

@@ -3,8 +3,21 @@ declare const _default: {
     title: string;
 };
 export default _default;
-interface DemoStoryProps {
-    linkToZeplinDesign?: string;
-}
-export declare const ThemeLight: React.FC<DemoStoryProps>;
-export declare const ThemeDark: React.FC<DemoStoryProps>;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

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

@@ -3,8 +3,24 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
 export declare const ThemeLightSnapShot: {
     (): React.ReactElement;
     storyName: string;

package/lib/hooks/usePoller/usePoller.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const usePoller: (deps: unknown[], callback: () => void, pollingInterval?: number) => React.MutableRefObject<number>;
+export declare const usePoller: (deps: unknown[], callback: () => void, pollingInterval?: number) => React.RefObject<ReturnType<typeof setTimeout>>;

package/package.json

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