@opengeoweb/shared 2.2.1 → 2.4.1

package/index.esm.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import { Close, DragIndicator } from '@mui/icons-material';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox } from '@mui/material';
+import Close from '@mui/icons-material/Close';
 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 { useThemeContext } from '@opengeoweb/theme';
+import { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import createStyles from '@mui/styles/createStyles';
 
 /* *
@@ -102,20 +104,6 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$d = makeStyles(function () {
-  return {
-    dialogHeader: {
-      zIndex: 1,
-      padding: '8px 20px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    dialogContent: {
-      padding: '40px 20px 0px 20px !important'
-    }
-  };
-});
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -131,8 +119,6 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-  var classes = useStyles$d();
-
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -140,14 +126,33 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
-    maxWidth: "sm",
-    fullWidth: true,
+    PaperProps: {
+      sx: {
+        width: '560px',
+        margin: 2.5
+      }
+    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
+    sx: {
+      fontSize: {
+        xs: '16px',
+        sm: '34px'
+      },
+      fontWeight: {
+        xs: 500,
+        sm: 400
+      }
+    },
     "data-testid": "confirmationDialog-title",
     component: "span"
   }, title), /*#__PURE__*/React.createElement(IconButton, {
@@ -158,22 +163,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     },
     size: "small"
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: {
+      padding: '8px 16px'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
-  }, description), content), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-cancel",
-    color: "secondary",
-    variant: "outlined",
+  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: {
+      padding: 2,
+      flexDirection: {
+        xs: 'column',
+        sm: 'row'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "confirmationDialog-cancel",
+    variant: "tertiary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      }
+    },
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
     autoFocus: true,
     disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-confirm",
-    color: "secondary",
-    variant: "contained",
+    "data-testid": "confirmationDialog-confirm",
+    variant: "primary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      },
+      marginLeft: {
+        xs: '0px!important',
+        sm: '8px!important'
+      },
+      marginTop: {
+        xs: 2,
+        sm: 0
+      }
+    },
     onClick: onSubmit
   }, confirmLabel)));
 };
@@ -650,12 +683,13 @@ var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$c = makeStyles(function () {
+var useStyles$a = makeStyles(function () {
   return {
     title: {
       fontSize: '14px',
       fontWeight: 'normal',
-      marginTop: '0px!important'
+      marginTop: '0px!important',
+      paddingTop: '0px!important'
     },
     info: {
       fontSize: '16px'
@@ -672,8 +706,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12 4c4.418 0 8 3.581 8 8 0 4.418-3.582 8-8 8s-8-3.582-8-8c0-4.419 3.582-8 8-8zm1.052 6H10v1.613h.949v3.774H10V17h4v-1.613h-.948V10zM11.99 6c-.837 0-1.491.654-1.491 1.49 0 .837.654 1.51 1.49 1.51.837 0 1.51-.673 1.51-1.51 0-.836-.673-1.49-1.51-1.49z",
-        transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#0062E6"
+        transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'success':
@@ -683,8 +716,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M16.51 10.034l-5.633 5.633-3.387-3.386c-.369-.37-.369-.973 0-1.343.36-.357.983-.357 1.342 0l2.045 2.046 4.292-4.291c.357-.357.983-.359 1.342 0 .368.369.368.97 0 1.341M12 4C7.582 4 4 7.582 4 12s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8",
-        transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#72BB23"
+        transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'warning':
@@ -694,8 +726,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-        transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#FFA800"
+        transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'error':
@@ -706,8 +737,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-        transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#C00000"
+        transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
   }
 };
@@ -719,12 +749,31 @@ var AlertBanner = function AlertBanner(_ref) {
       _ref$info = _ref.info,
       info = _ref$info === void 0 ? '' : _ref$info,
       _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId;
-  var classes = useStyles$c();
+      dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
+  var classes = useStyles$a();
   return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
-    icon: getIcon(severity)
+    icon: getIcon(severity),
+    sx: isCompact ? {
+      height: '32px',
+      boxSizing: 'border-box',
+      '& .MuiAlert-message': {
+        padding: '0px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '& .MuiTypography-root': {
+          display: 'inline'
+        }
+      },
+      '& .MuiAlert-icon': {
+        margin: '-3px 10px 0px 0px',
+        padding: '0px'
+      }
+    } : {}
   }, /*#__PURE__*/React.createElement(AlertTitle, {
     className: classes.title
   }, title), info && /*#__PURE__*/React.createElement("div", {
@@ -748,7 +797,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$b = makeStyles(function () {
+var useStyles$9 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -765,7 +814,7 @@ var useStyles$b = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$b();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -775,7 +824,7 @@ var AppLayout = function AppLayout(_ref) {
 
 var img = "data:image/svg+xml,%3c!--Licensed under the Apache License%2c Version 2.0 (the 'License')%3byou 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.0Unless required by applicable law or agreed to in writing%2c softwaredistributed under the License is distributed on an 'AS IS' BASIS%2cWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND%2c either express or implied.See the License for the specific language governing permissions andlimitations under the License.Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)Copyright 2021 - Finnish Meteorological Institute (FMI)--%3e%3csvg id='svg4550' xmlnsRdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='55.156mm' viewBox='0 0 289.84072 195.43326' width='81.799mm' version='1.1' xmlnsCc='http://creativecommons.org/ns%23' xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsDc='http://purl.org/dc/elements/1.1/'%3e %3cdefs id='defs14'%3e %3clinearGradient id='linearGradient4263' y2='113.1' gradientUnits='userSpaceOnUse' y1='76.066' gradientTransform='translate(0 -.0012816)' x2='199.26' x1='160.9'%3e %3cstop id='stop4259' stop-color='white' stop-opacity='.33333' offset='0'/%3e %3cstop id='stop4261' stop-color='white' stop-opacity='0' offset='1'/%3e %3c/linearGradient%3e %3clinearGradient id='linearGradient4240' y2='79.833' gradientUnits='userSpaceOnUse' x2='120.82' y1='120.77' x1='128.56'%3e %3cstop id='stop4236' stop-color='white' stop-opacity='0' offset='0'/%3e %3cstop id='stop4238' stop-color='white' stop-opacity='.33333' offset='1'/%3e %3c/linearGradient%3e %3c/defs%3e %3cg id='layer1' transform='translate(353.49 -626.07)'%3e %3cg id='g4'%3e %3cpath id='path4220' d='m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%230b9ee5'/%3e %3cpath id='path4220-7' opacity='.98' d='m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z' fill='%2360bce9'/%3e %3c/g%3e %3cpath id='path4220-2' d='m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='white' fill-opacity='.31373'/%3e %3c/g%3e %3cg id='g4244' transform='translate(2.926 -1.3827)'%3e %3cpath id='path4329' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%23003232' d='m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3e %3cpath id='path4329-2' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='url(%23linearGradient4263)' d='m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z'/%3e %3cpath id='path4329-7' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' d='m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z' fill='url(%23linearGradient4240)'/%3e %3c/g%3e%3c/svg%3e";
 
-var useStyles$a = makeStyles(function (theme) {
+var useStyles$8 = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -812,7 +861,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$a();
+  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -896,38 +945,29 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var useStyles$9 = function useStyles(isRightAligned) {
-  return makeStyles(function () {
-    return {
-      icon: Object.assign(Object.assign({
-        width: 20,
-        height: 20,
-        top: -10,
-        position: 'relative'
-      }, isRightAligned ? {
-        left: -10
-      } : {
-        left: 10,
-        transform: 'rotate(90deg)'
-      }), {
-        zIndex: 1
-      })
-    };
-  });
-};
-
 var ResizeHandle = function ResizeHandle(_ref2) {
   var isRightAligned = _ref2.isRightAligned;
   var theme = useTheme();
-  var styles = useStyles$9(isRightAligned)();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    className: styles.icon,
+    sx: Object.assign(Object.assign({
+      width: 20,
+      height: 20,
+      top: -10,
+      position: 'relative'
+    }, isRightAligned ? {
+      left: -10
+    } : {
+      left: 10,
+      transform: 'rotate(90deg)'
+    }), {
+      zIndex: 1
+    }),
     "data-testid": "resizeHandle"
   }, /*#__PURE__*/React__default.createElement("rect", {
     fill: "#ffffff"
   }), /*#__PURE__*/React__default.createElement("path", {
     d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-    fill: "".concat(theme.palette.geowebColors.greys.accessible),
+    fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color),
     transform: "rotate(-45 16.687 16.787)"
   }));
 };
@@ -1103,7 +1143,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$7 = makeStyles(function (theme) {
   return {
     container: {
       position: 'absolute',
@@ -1151,7 +1191,7 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
@@ -1193,7 +1233,9 @@ var MenuItemTheme = function MenuItemTheme() {
       isDark = _useThemeContext.isDark,
       toggleTheme = _useThemeContext.toggleTheme;
 
-  return /*#__PURE__*/React__default.createElement(MenuItem, null, /*#__PURE__*/React__default.createElement(Grid, {
+  return /*#__PURE__*/React__default.createElement(MenuItem, {
+    divider: true
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -1232,7 +1274,7 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function (theme) {
+var useStyles$6 = makeStyles(function (theme) {
   return {
     footer: {
       boxShadow: theme.shadows[1],
@@ -1245,7 +1287,7 @@ var useStyles$7 = makeStyles(function (theme) {
 }); // drag handles will be handled by DraggableResizable/Resizable
 
 var ToolFooter = function ToolFooter() {
-  var classes = useStyles$7();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement("footer", {
     className: classes.footer
   });
@@ -1283,7 +1325,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 16,
           fontWeight: 500,
-          padding: 4
+          padding: '4px'
         };
       }
 
@@ -1292,7 +1334,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 20,
           fontWeight: 400,
-          padding: 8
+          padding: '8px'
         };
       }
 
@@ -1301,7 +1343,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 16,
           fontWeight: 500,
-          padding: 12
+          padding: '12px'
         };
       }
 
@@ -1312,45 +1354,13 @@ var getStyle = function getStyle(size) {
   }
 };
 
-var useStyles$6 = makeStyles(function (theme) {
-  return {
-    header: {
-      boxShadow: theme.shadows[1],
-      background: theme.palette.geowebColors.background.surface,
-      padding: function padding(props) {
-        return props.styles.padding;
-      },
-      zIndex: 1,
-      cursor: function cursor(props) {
-        return props.isDraggable ? 'move' : null;
-      }
-    },
-    title: {
-      fontSize: function fontSize(props) {
-        return props.styles.fontSize;
-      },
-      fontWeight: function fontWeight(props) {
-        return props.styles.fontWeight;
-      }
-    },
-    iconClose: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0
-    },
-    iconDrag: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0,
-      pointerEvents: 'none'
-    },
-    iconDragHorizontal: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0,
-      pointerEvents: 'none',
-      transform: 'rotate(90deg)',
-      height: 12
-    }
-  };
-});
+var iconStyle = {
+  color: 'geowebColors.greys.accessible',
+  padding: 0,
+  '&:hover': {
+    background: 'action.hover'
+  }
+};
 
 var ToolHeader = function ToolHeader(_ref) {
   var size = _ref.size,
@@ -1362,17 +1372,21 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var styles = getStyle(size);
-  var classes = useStyles$6({
-    styles: styles,
-    isDraggable: isDraggable
-  });
 
   var onClickClose = function onClickClose() {
     return onClose();
   };
 
-  return /*#__PURE__*/React__default.createElement("header", {
-    className: "".concat(classes.header, " ").concat(className)
+  return /*#__PURE__*/React__default.createElement(Box, {
+    component: "header",
+    className: className,
+    sx: {
+      boxShadow: 1,
+      backgroundColor: 'geowebColors.background.surface',
+      padding: styles.padding,
+      zIndex: 2,
+      cursor: isDraggable ? 'move' : null
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center"
@@ -1384,9 +1398,11 @@ var ToolHeader = function ToolHeader(_ref) {
     justifyContent: "flex-start"
   }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn",
-    className: classes.iconDrag,
     disableRipple: true,
-    size: "large"
+    size: "large",
+    sx: Object.assign(Object.assign({}, iconStyle), {
+      pointerEvents: 'none'
+    })
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 10
@@ -1396,12 +1412,19 @@ var ToolHeader = function ToolHeader(_ref) {
     alignItems: "center"
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h2",
-    className: classes.title
+    sx: {
+      fontSize: styles.fontSize,
+      fontWeight: styles.fontWeight
+    }
   }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn-xxs",
-    className: classes.iconDragHorizontal,
     disableRipple: true,
-    size: "small"
+    size: "small",
+    sx: Object.assign(Object.assign({}, iconStyle), {
+      pointerEvents: 'none',
+      transform: 'rotate(90deg)',
+      height: 12
+    })
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 1,
@@ -1409,10 +1432,10 @@ var ToolHeader = function ToolHeader(_ref) {
     justifyContent: "flex-end"
   }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
-    className: classes.iconClose,
     onClick: onClickClose,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Close, null)))));
+    size: "large",
+    sx: iconStyle
+  }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
 };
 
 /* *
@@ -1443,7 +1466,6 @@ var useStyles$5 = makeStyles(function () {
     content: {
       flex: 1,
       overflowY: 'auto',
-      zIndex: 2,
       position: 'relative'
     }
   };
@@ -1487,6 +1509,18 @@ var ToolContainer = function ToolContainer(_a) {
   }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
 };
 
+var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
+  var width = window.innerWidth * 0.85;
+  var height = window.innerHeight * 0.85;
+  var top = window.innerHeight * 0.15 / 2;
+  var left = window.innerWidth * 0.15 / 2;
+  return {
+    width: width,
+    height: height,
+    top: top,
+    left: left
+  };
+};
 var BASE_Z_INDEX = 100;
 
 var DraggableComponent = function DraggableComponent(_a) {
@@ -1621,6 +1655,7 @@ var DraggableComponent = function DraggableComponent(_a) {
   }, /*#__PURE__*/React__default.createElement("div", {
     style: Object.assign({
       position: 'absolute',
+      pointerEvents: 'all',
       zIndex: zIndex
     }, startPosition),
     ref: nodeRef
@@ -2023,6 +2058,14 @@ var shortcuts = [{
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
   }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)))
+}, {
+  title: 'Change layer manager values by scrolling',
+  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll")),
+  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
 }];
 var getShortcutList = function getShortcutList(shortcutList) {
   var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
@@ -2165,7 +2208,8 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem, {
     "data-testid": "cheatsheet-btn",
-    onClick: onOpen
+    onClick: onOpen,
+    divider: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -2357,83 +2401,373 @@ var CustomSlider = function CustomSlider(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var Z_INDEX_TOP = 600;
-var Z_INDEX_BOTTOM = 550;
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    draggableDialog: function draggableDialog(props) {
+
+var CustomToggleButton = function CustomToggleButton(_a) {
+  var _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'primary' : _a$variant,
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      props = __rest(_a, ["variant", "value"]);
+
+  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+    className: variant,
+    value: value
+  }, props));
+};
+
+/* *
+ * 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 ToolButton = function ToolButton(_a) {
+  var active = _a.active,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? '24px' : _a$width,
+      _a$height = _a.height,
+      height = _a$height === void 0 ? '24px' : _a$height,
+      children = _a.children,
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      _a$sx = _a.sx,
+      sx = _a$sx === void 0 ? {} : _a$sx,
+      props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+
+  return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
+    variant: "tool",
+    disableRipple: true,
+    selected: active,
+    value: value,
+    sx: Object.assign({
+      width: "".concat(width, "!important"),
+      height: "".concat(height, "!important"),
+      textTransform: 'none!important',
+      padding: '11px!important'
+    }, sx)
+  }, props), children);
+};
+
+var getPosition = function getPosition(menuPosition) {
+  switch (menuPosition) {
+    case 'bottom':
       return {
-        width: props.dialogWidth ? props.dialogWidth : '90%',
-        position: 'absolute',
-        top: props.dialogTop ? props.dialogTop : '2%',
-        left: '5%',
-        maxWidth: '90%',
-        maxHeight: props.dialogMaxHeight ? props.dialogMaxHeight : '95%',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        zIndex: props.zIndex
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
       };
-    },
-    dialogContent: {
-      marginTop: '40px',
-      overflowY: 'scroll'
-    },
-    dialogHeader: function dialogHeader(props) {
+
+    default:
+    case 'left':
       return {
-        position: 'absolute',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
-        width: '100%',
-        backgroundColor: '#ffffff',
-        zIndex: props.zIndex + 10
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
       };
+  }
+};
+
+var ToggleMenu = function ToggleMenu(_ref) {
+  var _ref$buttonTestId = _ref.buttonTestId,
+      buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
+      _ref$menuPosition = _ref.menuPosition,
+      menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
+      menuItems = _ref.menuItems,
+      children = _ref.children,
+      buttonSx = _ref.buttonSx,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
+
+  var isOpen = Boolean(anchorEl);
+
+  var _getPosition = getPosition(menuPosition),
+      anchorOrigin = _getPosition.anchorOrigin,
+      transformOrigin = _getPosition.transformOrigin;
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
+    active: isOpen,
+    sx: buttonSx,
+    onClick: handleClick,
+    "data-testid": buttonTestId
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: tooltipTitle
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, null))), /*#__PURE__*/React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: isOpen,
+    onClose: handleClose,
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin,
+    BackdropProps: {
+      style: {
+        opacity: 0,
+        transition: 'none'
+      }
     },
-    iconClose: {
-      padding: theme.spacing(1)
+    MenuListProps: children && {
+      style: {
+        padding: '0px'
+      }
+    }
+  }, menuItems && menuItems.map(function (menuItem) {
+    var text = menuItem.text,
+        icon = menuItem.icon,
+        action = menuItem.action;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: text,
+      onClick: function onClick() {
+        action();
+        handleClose();
+      }
+    }, icon && /*#__PURE__*/React.createElement(ListItemIcon, null, icon), /*#__PURE__*/React.createElement(Typography, null, text));
+  }), children));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var useStyles = makeStyles(function (theme) {
+  return createStyles({
+    button: {
+      height: 28,
+      width: 28,
+      borderRadius: 5,
+      marginTop: 2,
+      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;
+        }
+
+        if (isActive) {
+          return theme.palette.common.white;
+        }
+
+        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;
+        }
+      }
     },
-    iconDrag: {
-      padding: theme.spacing(1)
+    popper: {
+      pointerEvents: 'none'
     }
   });
 });
+var ManagerButton = function ManagerButton(_a) {
+  var _a$tooltipTitle = _a.tooltipTitle,
+      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
+      _a$onClick = _a.onClick,
+      onClick = _a$onClick === void 0 ? function () {} : _a$onClick,
+      _a$isActive = _a.isActive,
+      isActive = _a$isActive === void 0 ? false : _a$isActive,
+      _a$isEnabled = _a.isEnabled,
+      isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
+      icon = _a.icon,
+      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"]);
+
+  var classes = useStyles({
+    isActive: isActive,
+    isEnabled: isEnabled,
+    isAccessible: isAccessible
+  });
+
+  var handleClick = function handleClick(event) {
+    onClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    placement: "top",
+    classes: {
+      popper: classes.popper
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    size: "small",
+    onClick: handleClick,
+    "data-testid": testId,
+    className: "".concat(classes.button, " ").concat(className),
+    disableFocusRipple: true
+  }, props), icon));
+};
+
+/* *
+ * 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 ManagerDeleteButton = function ManagerDeleteButton(_ref) {
+  var tooltipTitle = _ref.tooltipTitle,
+      onClickDelete = _ref.onClickDelete,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  return /*#__PURE__*/React.createElement(ManagerButton, {
+    tooltipTitle: tooltipTitle,
+    onClick: onClickDelete,
+    icon: /*#__PURE__*/React.createElement(Delete, {
+      sx: {
+        width: 20,
+        height: 20
+      }
+    }),
+    testId: "deleteButton",
+    isEnabled: isEnabled
+  });
+};
 
-var DraggableDialog = function DraggableDialog(_ref) {
-  var handleClose = _ref.handleClose,
+/* *
+ * 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 EnableButton = function EnableButton(_ref) {
+  var isEnabled = _ref.isEnabled,
       title = _ref.title,
-      children = _ref.children,
-      _ref$dialogStyling = _ref.dialogStyling,
-      dialogStyling = _ref$dialogStyling === void 0 ? {} : _ref$dialogStyling,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? Z_INDEX_TOP : _ref$zIndex;
-  var classes = useStyles(Object.assign(Object.assign({}, dialogStyling), {
-    zIndex: zIndex
+      onChangeEnableLayer = _ref.onChangeEnableLayer;
+
+  var onClick = function onClick() {
+    onChangeEnableLayer(!isEnabled);
+  };
+
+  var visibilityIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+    width: 24,
+    height: 24,
+    fill: "transparent"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
   }));
-  return /*#__PURE__*/React.createElement(Draggable, {
-    handle: "strong",
-    bounds: "body"
-  }, /*#__PURE__*/React.createElement(Paper, {
-    "data-testid": title,
-    className: classes.draggableDialog,
-    elevation: 24
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogHeader
-  }, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "dragDialog",
-    size: "small",
-    className: classes.iconDrag
-  }, /*#__PURE__*/React.createElement(DragIndicator, null))), /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1"
-  }, title), /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "closeDialog",
-    size: "small",
-    onClick: handleClose,
-    className: classes.iconClose
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogContent
-  }, children)));
+  var visibilityOffIcon = /*#__PURE__*/React.createElement(SvgIcon, {
+    style: {
+      marginTop: 2
+    }
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: 24,
+    height: 24,
+    fill: "transparent"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
+  }));
+  return /*#__PURE__*/React.createElement(ManagerButton, {
+    tooltipTitle: title,
+    onClick: onClick,
+    icon: /*#__PURE__*/React.createElement(Checkbox, {
+      sx: {
+        color: 'inherit',
+        padding: 0.5,
+        borderRadius: 1.25,
+        '&.Mui-focusVisible': {
+          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+        },
+        '&:hover': {
+          backgroundColor: 'transparent!important'
+        },
+        '&.Mui-checked': {
+          color: 'inherit'
+        }
+      },
+      icon: visibilityOffIcon,
+      checkedIcon: visibilityIcon,
+      checked: isEnabled,
+      disableFocusRipple: true,
+      tabIndex: -1
+    }),
+    testId: "enableButton",
+    isEnabled: isEnabled
+  });
 };
 
 /* *
@@ -2470,4 +2804,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, DraggableDialog, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, Z_INDEX_BOTTOM, Z_INDEX_TOP, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };