@opengeoweb/shared 2.9.0 → 2.13.0

package/index.esm.js

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
-import Close from '@mui/icons-material/Close';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
 import makeStyles from '@mui/styles/makeStyles';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
-import { 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';
 
 /* *
@@ -104,6 +101,20 @@ function __rest(s, e) {
     return t;
 }
 
+var confirmStyle = {
+  width: {
+    xs: '100%',
+    sm: '150px'
+  },
+  marginLeft: {
+    xs: '0px!important',
+    sm: '8px!important'
+  },
+  marginTop: {
+    xs: 2,
+    sm: 0
+  }
+};
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -114,10 +125,14 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       _a$cancelLabel = _a.cancelLabel,
       cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
       onSubmit = _a.onSubmit,
-      onClose = _a.onClose,
+      _onClose = _a.onClose,
       _a$content = _a.content,
       content = _a$content === void 0 ? null : _a$content,
-      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
+      _a$disableAutoFocus = _a.disableAutoFocus,
+      disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
+      _a$isLoading = _a.isLoading,
+      isLoading = _a$isLoading === void 0 ? false : _a$isLoading,
+      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
 
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -133,7 +148,10 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       }
     },
     // fix for briefly showing default options when closing dialog
-    transitionDuration: 0
+    transitionDuration: 0,
+    onClose: function onClose() {
+      _onClose('CLOSED');
+    }
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
     sx: {
       zIndex: 1,
@@ -159,10 +177,12 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     "data-testid": "confirmationDialog-close",
     "aria-label": "close",
     onClick: function onClick() {
-      return onClose('CLOSED');
+      return _onClose('CLOSED');
     },
     size: "small"
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
+  }, /*#__PURE__*/React.createElement(Close, {
+    "data-testid": "CloseIcon"
+  }))), /*#__PURE__*/React.createElement(DialogContent, {
     sx: {
       padding: '8px 16px'
     }
@@ -179,35 +199,49 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   }, /*#__PURE__*/React.createElement(Button, {
     "data-testid": "confirmationDialog-cancel",
     variant: "tertiary",
-    sx: {
-      width: {
-        xs: '100%',
-        sm: '150px'
-      }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    sx: function sx(theme) {
+      return {
+        width: {
+          xs: '100%',
+          sm: '150px'
+        },
+        '&:focus': {
+          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+          borderColor: 'transparent'
+        }
+      };
     },
     onClick: function onClick() {
-      return onClose('CANCELLED');
+      return _onClose('CANCELLED');
     },
-    autoFocus: true,
-    disableRipple: true
-  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+    disableFocusRipple: true
+  }, cancelLabel), isLoading ? /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "confirm-dialog-spinner",
+    sx: Object.assign(Object.assign({}, confirmStyle), {
+      height: '40px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    })
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 40,
+    color: "secondary"
+  })) : /*#__PURE__*/React.createElement(Button, {
     "data-testid": "confirmationDialog-confirm",
     variant: "primary",
-    sx: {
-      width: {
-        xs: '100%',
-        sm: '150px'
-      },
-      marginLeft: {
-        xs: '0px!important',
-        sm: '8px!important'
-      },
-      marginTop: {
-        xs: 2,
-        sm: 0
-      }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    sx: function sx(theme) {
+      return Object.assign(Object.assign({}, confirmStyle), {
+        '&:focus': {
+          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+          borderColor: 'transparent'
+        }
+      });
     },
-    onClick: onSubmit
+    onClick: onSubmit,
+    autoFocus: !disableAutoFocus,
+    disableFocusRipple: true
   }, confirmLabel)));
 };
 
@@ -696,74 +730,40 @@ var AlertIcon = function AlertIcon(_ref) {
 
   switch (severity) {
     case 'info':
-      return /*#__PURE__*/React.createElement(SvgIcon, {
+      return /*#__PURE__*/React.createElement(Info, {
         sx: {
           color: 'geowebColors.functional.notification'
         },
         "data-testid": dataTestId
-      }, /*#__PURE__*/React.createElement("rect", {
-        width: 24,
-        height: 24,
-        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)"
-      }));
+      });
 
     case 'success':
-      return /*#__PURE__*/React.createElement(SvgIcon, {
+      return /*#__PURE__*/React.createElement(Success, {
         sx: {
           color: 'geowebColors.functional.success'
         },
         "data-testid": dataTestId
-      }, /*#__PURE__*/React.createElement("rect", {
-        width: 24,
-        height: 24,
-        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)"
-      }));
+      });
 
     case 'warning':
-      return /*#__PURE__*/React.createElement(SvgIcon, {
+      return /*#__PURE__*/React.createElement(Exclamation, {
         sx: {
           color: 'geowebColors.functional.warning'
         },
         "data-testid": dataTestId
-      }, /*#__PURE__*/React.createElement("rect", {
-        width: 24,
-        height: 24,
-        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)"
-      }));
+      });
 
     case 'error':
     default:
-      return /*#__PURE__*/React.createElement(SvgIcon, {
+      return /*#__PURE__*/React.createElement(Exclamation, {
         sx: {
           color: 'geowebColors.functional.error'
         },
         "data-testid": dataTestId
-      }, /*#__PURE__*/React.createElement("rect", {
-        width: 24,
-        height: 24,
-        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)"
-      }));
+      });
   }
 };
 
-var IconChevronRight = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
-  d: "M5.427 15.03c-.57.618-.57 1.57 0 2.188.57.603 1.494.603 2.062 0l5.514-5.843 5.512 5.843c.57.603 1.494.603 2.063 0 .285-.303.426-.7.426-1.094a1.59 1.59 0 0 0-.426-1.094L13.003 7l-7.576 8.03z",
-  id: "chrevron-right",
-  transform: "rotate(90 13.002 12.335)"
-}));
-
 var AlertBanner = function AlertBanner(_ref) {
   var title = _ref.title,
       _ref$severity = _ref.severity,
@@ -838,7 +838,8 @@ var AlertBanner = function AlertBanner(_ref) {
   }, title), info && /*#__PURE__*/React.createElement(Box, {
     sx: {
       fontSize: '16px',
-      marginTop: 1
+      marginTop: 1,
+      wordBreak: 'break-word'
     }
   }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
     variant: "flat",
@@ -849,7 +850,7 @@ var AlertBanner = function AlertBanner(_ref) {
     sx: {
       backgroundColor: 'transparent!important'
     },
-    startIcon: IconChevronRight
+    startIcon: /*#__PURE__*/React.createElement(ChevronRight, null)
   }, actionButtonProps.title.toUpperCase()));
 };
 
@@ -869,7 +870,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles(function () {
+var useStyles$7 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -886,7 +887,7 @@ var useStyles$8 = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -894,9 +895,7 @@ var AppLayout = function AppLayout(_ref) {
   }, children));
 };
 
-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$7 = makeStyles(function (theme) {
+var useStyles$6 = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -911,9 +910,6 @@ var useStyles$7 = makeStyles(function (theme) {
     }), _defineProperty(_header, theme.breakpoints.up('sm'), {
       padding: '0 24px'
     }), _header),
-    logo: {
-      height: 30
-    },
     title: {
       marginLeft: 6,
       fontSize: '1.25rem',
@@ -933,7 +929,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$7();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -956,11 +952,7 @@ var AppHeader = function AppHeader(_ref) {
     justifyContent: "center",
     alignItems: "center",
     wrap: "nowrap"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    alt: title,
-    className: classes.logo,
-    src: img
-  }), /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     className: classes.title
   }, title))), /*#__PURE__*/React__default.createElement(Grid, {
@@ -1017,33 +1009,6 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var ResizeHandle = function ResizeHandle(_ref2) {
-  var isRightAligned = _ref2.isRightAligned;
-  var theme = useTheme();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    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.buttons.flat["default"].color),
-    transform: "rotate(-45 16.687 16.787)"
-  }));
-};
-
 var ResizeComponent = function ResizeComponent(_a) {
   var _a$startPosition = _a.startPosition,
       startPosition = _a$startPosition === void 0 ? {
@@ -1064,6 +1029,7 @@ var ResizeComponent = function ResizeComponent(_a) {
       minWidth = _a$minWidth === void 0 ? 50 : _a$minWidth,
       props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
 
+  var theme = useTheme();
   var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
   var onStartResize = React__default.useCallback(function (event, _direction, node) {
     event.stopPropagation();
@@ -1097,10 +1063,17 @@ var ResizeComponent = function ResizeComponent(_a) {
     size: size,
     onResizeStop: onResizeStop,
     handleComponent: {
-      bottomRight: /*#__PURE__*/React__default.createElement(ResizeHandle, {
-        isRightAligned: true
+      bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
+        style: {
+          fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
+        }
       }),
-      bottomLeft: /*#__PURE__*/React__default.createElement(ResizeHandle, null)
+      bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
+        }
+      })
     },
     enable: {
       top: false,
@@ -1161,9 +1134,12 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       var children = this.props.children;
 
       if (error) {
-        return /*#__PURE__*/React.createElement("div", {
-          style: {
-            whiteSpace: 'pre-wrap'
+        return /*#__PURE__*/React.createElement(Box, {
+          sx: {
+            whiteSpace: 'pre-wrap',
+            width: 'inherit',
+            height: 'inherit',
+            overflowY: 'scroll'
           }
         }, /*#__PURE__*/React.createElement(AlertBanner, {
           severity: "error",
@@ -1215,7 +1191,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$5 = makeStyles(function (theme) {
   return {
     container: {
       position: 'absolute',
@@ -1263,7 +1239,7 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$6();
+  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
@@ -1346,7 +1322,7 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function (theme) {
+var useStyles$4 = makeStyles(function (theme) {
   return {
     footer: {
       boxShadow: theme.shadows[1],
@@ -1359,7 +1335,7 @@ var useStyles$5 = makeStyles(function (theme) {
 }); // drag handles will be handled by DraggableResizable/Resizable
 
 var ToolFooter = function ToolFooter() {
-  var classes = useStyles$5();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement("footer", {
     className: classes.footer
   });
@@ -1446,11 +1422,6 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$leftComponent = _ref.leftComponent,
       leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
   var styles = getStyle(size);
-
-  var onClickClose = function onClickClose() {
-    return onClose();
-  };
-
   var columnSizeIcon = leftComponent ? 3 : 1;
   var columnSizeTitle = leftComponent ? 6 : 10;
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -1468,7 +1439,10 @@ var ToolHeader = function ToolHeader(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: columnSizeIcon
+    xs: columnSizeIcon,
+    sx: {
+      paddingRight: 1
+    }
   }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "flex-start"
@@ -1479,7 +1453,7 @@ var ToolHeader = function ToolHeader(_ref) {
     sx: Object.assign(Object.assign({}, iconStyle), {
       pointerEvents: 'none'
     })
-  }, /*#__PURE__*/React__default.createElement(DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: columnSizeTitle
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1502,17 +1476,26 @@ var ToolHeader = function ToolHeader(_ref) {
       transform: 'rotate(90deg)',
       height: 12
     })
-  }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: columnSizeIcon,
     container: true,
     justifyContent: "flex-end"
-  }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, onClose && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Close",
+    placement: "bottom",
+    sx: {
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
-    onClick: onClickClose,
+    onClick: onClose,
+    onTouchEnd: onClose,
     size: "large",
     sx: iconStyle
-  }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    "data-testid": "CloseIcon"
+  }))))));
 };
 
 /* *
@@ -1571,14 +1554,14 @@ var ToolContainer = function ToolContainer(_a) {
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
     sx: styles$1.container
-  }, props), /*#__PURE__*/React__default.createElement(ToolHeader, {
+  }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
     title: title,
     size: size,
     isDraggable: isDraggable,
     onClose: onClose,
     className: headerClassName,
     leftComponent: leftComponent
-  }), /*#__PURE__*/React__default.createElement(Box, {
+  })), /*#__PURE__*/React__default.createElement(Box, {
     sx: styles$1.content,
     style: {
       maxHeight: maxHeight
@@ -1773,7 +1756,7 @@ var DraggableComponent = function DraggableComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function (theme) {
+var useStyles$3 = makeStyles(function (theme) {
   return {
     icon: {
       backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1813,7 +1796,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
       children = _ref.children;
-  var classes = useStyles$4();
+  var classes = useStyles$3();
 
   if (type === 'divider') {
     return /*#__PURE__*/React__default.createElement(Typography, {
@@ -1847,171 +1830,6 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
   }, 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$3 = makeStyles(function (theme) {
-  return {
-    icon: {
-      fill: theme.palette.geowebColors.typographyAndIcons.text
-    }
-  };
-});
-var OptionIcon = function OptionIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 12 11",
-    style: {
-      width: 12,
-      height: 11
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Option"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Option-\"\u2325\"",
-    transform: "translate(-14.000000, -13.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.01,13.88 L22.56,22.99 L25.7,22.99 L25.7,24 L21.74,24 L17.19,14.9 L14.06,14.9 L14.06,13.88 L18.01,13.88 Z M25.7,13.88 L25.7,14.9 L20.97,14.9 L20.97,13.88 L25.7,13.88 Z",
-    id: "Option"
-  }))));
-};
-var CommandIcon = function CommandIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 12 12",
-    style: {
-      width: 12,
-      height: 12
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Command"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Command-\"\u2318\"",
-    transform: "translate(-14.000000, -13.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M23.04,13.63 C24.08,13.63 25.19,14.44 25.19,15.8 C25.19,16.8 24.4,17.93 23.04,17.93 L23.04,17.93 L21.9,17.93 L21.9,19.95 L23,19.95 C24.4,19.95 25.19,21.1 25.19,22 C25.19,23.6 24,24.26 23,24.26 C22,24.26 20.89,23.5 20.89,22 L20.89,22 L20.89,20.97 L18.86,20.97 L18.86,22 C18.86,23.5 17.75,24.26 16.71,24.26 C15.7,24.26 14.56,23.5 14.56,22 C14.56,21 15.55,19.95 16.71,19.95 L16.71,19.95 L17.85,19.95 L17.85,17.93 L16.71,17.93 C15.55,17.93 14.525085,17 14.5614747,15.7207438 C14.5978644,14.4414876 15.7,13.63 16.71,13.63 C17.75,13.63 18.86,14.38 18.86,15.8 L18.86,15.8 L18.86,16.92 L20.89,16.92 L20.89,15.8 C20.89,14.38 22,13.63 23.04,13.63 Z M17.85,20.96 L16.71,20.96 C16.0803954,20.96 15.57,21.4703954 15.57,22.1 C15.57,22.7296046 16.0803954,23.24 16.71,23.24 C17.3396046,23.24 17.85,22.7296046 17.85,22.1 L17.85,22.1 L17.85,20.96 Z M23.04,20.96 L21.9,20.96 L21.9,22.1 L21.9066894,22.2242156 C21.9685825,22.7953889 22.452369,23.24 23.04,23.24 C23.6696046,23.24 24.18,22.7296046 24.18,22.1 C24.18,21.4703954 23.6696046,20.96 23.04,20.96 L23.04,20.96 Z M20.89,17.93 L18.86,17.93 L18.86,19.95 L20.89,19.95 L20.89,17.93 Z M16.71,14.64 C16.0803954,14.64 15.57,15.1503954 15.57,15.78 C15.57,16.4096046 16.0803954,16.92 16.71,16.92 L16.71,16.92 L17.85,16.92 L17.85,15.78 L17.8433106,15.6557844 C17.7814175,15.0846111 17.297631,14.64 16.71,14.64 Z M23.04,14.64 C22.4103954,14.64 21.9,15.1503954 21.9,15.78 L21.9,15.78 L21.9,16.92 L23.04,16.92 C23.6696046,16.92 24.18,16.4096046 24.18,15.78 C24.18,15.1503954 23.6696046,14.64 23.04,14.64 Z",
-    id: "Command"
-  }))));
-};
-var ArrowLeftIcon = function ArrowLeftIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 12 6",
-    style: {
-      width: 12,
-      height: 6
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow left"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Arrow-left-\"\u2190\"",
-    transform: "translate(-14.000000, -16.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "Arrow-left",
-    transform: "translate(19.880000, 18.960000) rotate(90.000000) translate(-19.880000, -18.960000) ",
-    points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
-  }))));
-};
-var ArrowRightIcon = function ArrowRightIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 12 6",
-    style: {
-      width: 12,
-      height: 6
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow right"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Arrow-right-\"\u2192\"",
-    transform: "translate(-14.000000, -16.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "Arrow-right",
-    transform: "translate(19.880000, 18.960000) rotate(-90.000000) translate(-19.880000, -18.960000) ",
-    points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
-  }))));
-};
-var ArrowDownIcon = function ArrowDownIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 6 12",
-    style: {
-      width: 6,
-      height: 12
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow down"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Arrow-down-\"\u2193\"",
-    transform: "translate(-17.000000, -13.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "Arrow-down",
-    points: "16.92 21.89 19.88 24.85 22.84 21.89 20.39 21.89 20.39 13.88 19.37 13.88 19.37 21.89"
-  }))));
-};
-var ArrowUpIcon = function ArrowUpIcon() {
-  var classes = useStyles$3();
-  return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    viewBox: "0 0 6 11",
-    style: {
-      width: 6,
-      height: 11
-    }
-  }, /*#__PURE__*/React__default.createElement("title", null, "Arrow up"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Symbols:-General",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Shortcut-Arrow-up-\"\u2191\"",
-    transform: "translate(-17.000000, -13.000000)",
-    className: classes.icon
-  }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "Arrow-up",
-    transform: "translate(19.880000, 18.485000) scale(1, -1) translate(-19.880000, -18.485000) ",
-    points: "16.92 21.01 19.88 23.97 22.84 21.01 20.39 21.01 20.39 13 19.37 13 19.37 21.01"
-  }))));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2042,26 +1860,26 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "divider"
   }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
+  }, /*#__PURE__*/React__default.createElement(ArrowRight, null))),
   descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
   }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "divider"
   }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null)))
+  }, /*#__PURE__*/React__default.createElement(ArrowRight, null)))
 }, {
   title: 'Toggle hide/show time slider',
   description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2097,7 +1915,7 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -2110,22 +1928,22 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "divider"
   }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
+  }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
   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, {
+  }, /*#__PURE__*/React__default.createElement(KeyCommand, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "divider"
   }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
+  }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
 }, {
   title: 'Return to current time',
   description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2137,7 +1955,7 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)))
+  }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)))
 }, {
   title: 'Change layer manager values by scrolling',
   description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2145,7 +1963,7 @@ var shortcuts = [{
   }, "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"))
+  }, /*#__PURE__*/React__default.createElement(KeyCommand, 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';
@@ -2535,7 +2353,10 @@ var ToolButton = function ToolButton(_a) {
       width: "".concat(width, "!important"),
       height: "".concat(height, "!important"),
       textTransform: 'none!important',
-      padding: '11px!important'
+      padding: '11px!important',
+      '& .MuiSvgIcon-root': {
+        marginRight: '0px!important'
+      }
     }, sx)
   }, props), children);
 };
@@ -2620,17 +2441,17 @@ var ToggleMenu = function ToggleMenu(_ref) {
       setAnchorEl(document.getElementById(buttonTestId));
     }
   }, [isDefaultOpen, buttonTestId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: tooltipTitle
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ToolButton, {
     active: isOpen,
     sx: buttonSx,
     onClick: handleClick,
     "data-testid": buttonTestId,
     variant: variant,
     id: buttonTestId
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    placement: "top",
-    title: tooltipTitle
-  }, /*#__PURE__*/React.createElement(MoreVertIcon, null))), /*#__PURE__*/React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: handleClose,
@@ -2680,10 +2501,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
 var useStyles = makeStyles(function (theme) {
   return createStyles({
     button: {
-      height: 28,
-      width: 28,
+      height: 24,
+      width: 24,
       borderRadius: 5,
-      marginTop: 2,
+      marginTop: 4,
       color: function color(_ref) {
         var isActive = _ref.isActive,
             isAccessible = _ref.isAccessible,
@@ -2792,12 +2613,7 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
-    icon: /*#__PURE__*/React.createElement(Delete, {
-      sx: {
-        width: 20,
-        height: 20
-      }
-    }),
+    icon: /*#__PURE__*/React.createElement(Delete, null),
     testId: "deleteButton",
     isEnabled: isEnabled
   });
@@ -2828,24 +2644,6 @@ var EnableButton = function EnableButton(_ref) {
     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"
-  }));
-  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,
@@ -2864,8 +2662,8 @@ var EnableButton = function EnableButton(_ref) {
           color: 'inherit'
         }
       },
-      icon: visibilityOffIcon,
-      checkedIcon: visibilityIcon,
+      icon: /*#__PURE__*/React.createElement(VisibilityOff, null),
+      checkedIcon: /*#__PURE__*/React.createElement(Visibility, null),
       checked: isEnabled,
       disableFocusRipple: true,
       tabIndex: -1