@opengeoweb/core 2.4.0 → 2.4.1

package/index.esm.js

@@ -8325,7 +8325,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$x = makeStyles({
+var useStyles$w = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8361,7 +8361,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$x();
+  var classes = useStyles$w();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8514,7 +8514,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles = {
+var styles$1 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -8566,7 +8566,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     title: tooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles.button,
+    sx: styles$1.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -8731,7 +8731,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$w = makeStyles({
+var useStyles$v = makeStyles({
   row: {
     height: '32px'
   },
@@ -8755,7 +8755,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$w();
+  var classes = useStyles$v();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8997,7 +8997,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$u = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9047,7 +9047,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$v();
+  var classes = useStyles$u();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -9102,7 +9102,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$t = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9125,7 +9125,7 @@ var useStyles$u = makeStyles(function (theme) {
       position: 'fixed',
       top: '-5px',
       boxSizing: 'initial',
-      zIndex: 1,
+      zIndex: 2,
       boxShadow: theme.shadows[8]
     }
   };
@@ -9163,7 +9163,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$u();
+  var classes = useStyles$t();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9391,7 +9391,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     svgIcon: {
       fill: function fill(_ref) {
@@ -9420,7 +9420,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$t({
+  var classes = useStyles$s({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9473,7 +9473,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9526,7 +9526,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$s(isEnabled);
+  var classes = useStyles$r(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -10152,7 +10152,7 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$r = makeStyles(function () {
+var useStyles$q = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10219,7 +10219,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$r(isSorting);
+  var classes = useStyles$q(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10429,7 +10429,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$q = makeStyles({
+var useStyles$p = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10452,7 +10452,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$q();
+  var classes = useStyles$p();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10481,7 +10481,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$p = makeStyles({
+var useStyles$o = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10516,7 +10516,7 @@ var LayerManager = function LayerManager(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
       showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$p();
+  var classes = useStyles$o();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11388,7 +11388,7 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
   });
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return {
     layerRow: {
       background: theme.palette.geowebColors.cards.cardContainer,
@@ -11446,7 +11446,7 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
-  var classes = useStyles$o();
+  var classes = useStyles$n();
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11701,7 +11701,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -11725,7 +11725,7 @@ var useStyles$n = makeStyles(function (theme) {
       fontSize: '0.875rem'
     },
     scrollArrowLeft: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
@@ -11733,7 +11733,10 @@ var useStyles$n = makeStyles(function (theme) {
       marginRight: '-120px',
       "float": 'left',
       zIndex: 1,
-      position: 'relative'
+      position: 'relative',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     },
     serviceList: {
       height: '32px',
@@ -11742,13 +11745,16 @@ var useStyles$n = makeStyles(function (theme) {
       overflow: 'hidden'
     },
     scrollArrowRight: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
       right: '0px',
       position: 'fixed',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     }
   });
 });
@@ -11776,7 +11782,7 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.useRef(null);
   var scrollSpeed = 5;
   var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-  var classes = useStyles$n({
+  var classes = useStyles$m({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
@@ -11890,63 +11896,49 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    servicesContainer: {
-      width: '300px',
-      maxHeight: '380px',
-      top: '140px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      boxShadow: theme.shadows[6],
-      overflow: 'auto'
-    },
-    header: {
-      position: 'sticky',
-      top: 0,
-      fontSize: theme.typography.fontSize,
-      padding: '12px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      zIndex: 100
-    },
-    footer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'sticky',
-      bottom: 0,
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      zIndex: 100
-    },
-    iconFill: {
-      color: theme.palette.geowebColors.typographyAndIcons.icon
-    },
-    button: {
-      margin: '16px',
-      width: '80%',
-      fontSize: '12px',
-      textTransform: 'none'
-    },
-    text: {
-      paddingTop: '3px',
-      fontSize: '12px',
-      fontFamily: theme.typography.fontFamily,
-      fontWeight: theme.typography.fontWeightRegular,
-      textTransform: 'none',
-      color: '#575f7a'
-    },
-    icon: {
-      width: '24px',
-      height: '24px'
-    }
-  });
-});
+var styles = {
+  servicesContainer: {
+    width: '300px',
+    maxHeight: '380px',
+    top: '140px',
+    backgroundColor: 'geowebColors.background.surface',
+    boxShadow: 6,
+    overflow: 'auto'
+  },
+  header: {
+    position: 'sticky',
+    top: 0,
+    fontSize: 'default',
+    padding: '12px',
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  button: {
+    margin: '16px',
+    width: '80%',
+    fontSize: '12px',
+    textTransform: 'none'
+  },
+  icon: {
+    width: '24px',
+    height: '24px'
+  }
+};
 
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
       mapStoreRemoveService = _ref.mapStoreRemoveService,
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers;
-  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11970,11 +11962,11 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    className: classes.servicesContainer,
+    sx: styles.servicesContainer,
     "data-testid": "ServiceDialog"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.header
-  }, " Services"), /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles.header
+  }, "Services"), /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, services.map(function (service) {
     return /*#__PURE__*/React.createElement(ListItem, {
@@ -12001,7 +11993,6 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       size: "large"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     })))))), /*#__PURE__*/React.createElement(Tooltip, {
       title: "Delete Service"
@@ -12014,18 +12005,17 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       "data-testid": "removeServiceButton"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     }))))))));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.footer
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     "data-testid": "openAddServiceButton",
-    className: classes.button,
+    sx: styles.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
-      className: classes.icon
+      sx: styles.icon
     }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
       fillRule: "evenodd"

package/index.umd.js

@@ -8539,7 +8539,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = makeStyles__default["default"]({
+  var useStyles$w = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8575,7 +8575,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$x();
+    var classes = useStyles$w();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8739,7 +8739,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var styles = {
+  var styles$1 = {
     buttonDiv: {
       position: 'relative'
     },
@@ -8790,7 +8790,7 @@
       title: tooltip
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
-      sx: styles.button,
+      sx: styles$1.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
       ref: ref,
@@ -8955,7 +8955,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"]({
+  var useStyles$v = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8979,7 +8979,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$w();
+    var classes = useStyles$v();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -9253,7 +9253,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$u = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9303,7 +9303,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$v();
+    var classes = useStyles$u();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -9374,7 +9374,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"](function (theme) {
+  var useStyles$t = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9397,7 +9397,7 @@
         position: 'fixed',
         top: '-5px',
         boxSizing: 'initial',
-        zIndex: 1,
+        zIndex: 2,
         boxShadow: theme.shadows[8]
       }
     };
@@ -9435,7 +9435,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$u();
+    var classes = useStyles$t();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9661,7 +9661,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"](function (theme) {
+  var useStyles$s = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
@@ -9690,7 +9690,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$t({
+    var classes = useStyles$s({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9743,7 +9743,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"](function (theme) {
+  var useStyles$r = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9797,7 +9797,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$s(isEnabled);
+    var classes = useStyles$r(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -10439,7 +10439,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function () {
+  var useStyles$q = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10505,7 +10505,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$r(isSorting);
+    var classes = useStyles$q(isSorting);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10715,7 +10715,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = makeStyles__default["default"]({
+  var useStyles$p = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10738,7 +10738,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$q();
+    var classes = useStyles$p();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10783,7 +10783,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"]({
+  var useStyles$o = makeStyles__default["default"]({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10818,7 +10818,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$p();
+    var classes = useStyles$o();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -11754,7 +11754,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"](function (theme) {
+  var useStyles$n = makeStyles__default["default"](function (theme) {
     return {
       layerRow: {
         background: theme.palette.geowebColors.cards.cardContainer,
@@ -11812,7 +11812,7 @@
         mapLayers = _a.mapLayers,
         keywordIds = _a.keywordIds,
         allKeywordsActive = _a.allKeywordsActive;
-    var classes = useStyles$o();
+    var classes = useStyles$n();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
@@ -12082,7 +12082,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
+  var useStyles$m = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -12106,7 +12106,7 @@
         fontSize: '0.875rem'
       },
       scrollArrowLeft: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
@@ -12114,7 +12114,10 @@
         marginRight: '-120px',
         "float": 'left',
         zIndex: 1,
-        position: 'relative'
+        position: 'relative',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       },
       serviceList: {
         height: '32px',
@@ -12123,13 +12126,16 @@
         overflow: 'hidden'
       },
       scrollArrowRight: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
         right: '0px',
         position: 'fixed',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       }
     });
   });
@@ -12154,7 +12160,7 @@
     var ref = React__namespace.useRef(null);
     var scrollSpeed = 5;
     var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-    var classes = useStyles$n({
+    var classes = useStyles$m({
       margin: margin,
       maxWidthValue: maxWidthValue
     });
@@ -12284,63 +12290,49 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      servicesContainer: {
-        width: '300px',
-        maxHeight: '380px',
-        top: '140px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        boxShadow: theme.shadows[6],
-        overflow: 'auto'
-      },
-      header: {
-        position: 'sticky',
-        top: 0,
-        fontSize: theme.typography.fontSize,
-        padding: '12px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      footer: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'sticky',
-        bottom: 0,
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      iconFill: {
-        color: theme.palette.geowebColors.typographyAndIcons.icon
-      },
-      button: {
-        margin: '16px',
-        width: '80%',
-        fontSize: '12px',
-        textTransform: 'none'
-      },
-      text: {
-        paddingTop: '3px',
-        fontSize: '12px',
-        fontFamily: theme.typography.fontFamily,
-        fontWeight: theme.typography.fontWeightRegular,
-        textTransform: 'none',
-        color: '#575f7a'
-      },
-      icon: {
-        width: '24px',
-        height: '24px'
-      }
-    });
-  });
+  var styles = {
+    servicesContainer: {
+      width: '300px',
+      maxHeight: '380px',
+      top: '140px',
+      backgroundColor: 'geowebColors.background.surface',
+      boxShadow: 6,
+      overflow: 'auto'
+    },
+    header: {
+      position: 'sticky',
+      top: 0,
+      fontSize: 'default',
+      padding: '12px',
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'sticky',
+      bottom: 0,
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    button: {
+      margin: '16px',
+      width: '80%',
+      fontSize: '12px',
+      textTransform: 'none'
+    },
+    icon: {
+      width: '24px',
+      height: '24px'
+    }
+  };
 
   var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
     var services = _a.services,
         mapStoreRemoveService = _a.mapStoreRemoveService,
         _b = _a.layers,
         layers = _b === void 0 ? [] : _b;
-    var classes = useStyles$m();
 
     var _c = __read(React__namespace.useState(false), 2),
         addServiceisOpen = _c[0],
@@ -12363,11 +12355,11 @@
     };
 
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-      className: classes.servicesContainer,
+      sx: styles.servicesContainer,
       "data-testid": "ServiceDialog"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.header
-    }, " Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.header
+    }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
       disablePadding: true
     }, services.map(function (service) {
       return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
@@ -12394,7 +12386,6 @@
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
       })))))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Delete Service"
@@ -12407,18 +12398,17 @@
         "data-testid": "removeServiceButton"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
       }))))))));
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.footer
+    })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.footer
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
       onClick: openAddService,
       "data-testid": "openAddServiceButton",
-      className: classes.button,
+      sx: styles.button,
       variant: "tertiary",
       startIcon: /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-        className: classes.icon
+        sx: styles.icon
       }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
         fillRule: "evenodd"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,22 +13,22 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^17.0.2",
-    "@opengeoweb/theme": "2.4.0",
+    "@opengeoweb/theme": "2.4.1",
     "@mui/material": "^5.2.8",
     "@mui/styles": "^5.2.3",
     "@mui/icons-material": "^5.2.5",
     "react-redux": "7.2.2",
     "moment": "^2.29.0",
     "react-intl": "^5.17.5",
-    "@opengeoweb/webmap": "2.4.0",
+    "@opengeoweb/webmap": "2.4.1",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
     "react-sortablejs": "^6.0.0",
-    "@opengeoweb/shared": "2.4.0",
+    "@opengeoweb/shared": "2.4.1",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.4.0",
+    "@opengeoweb/form-fields": "2.4.1",
     "react-hook-form": "^6.12.1",
     "moment-timezone": "^0.5.31",
     "@mui/lab": "^5.0.0-alpha.64",