@opengeoweb/shared 2.9.0 → 2.13.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/icons-material/Close'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('@mui/icons-material'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/icons-material/MoreVert'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/icons-material/Close', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', '@opengeoweb/theme', '@mui/icons-material', 'lodash', '@mui/styles/withStyles', '@mui/icons-material/MoreVert', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.Close, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.theme, global.iconsMaterial, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
-})(this, (function (exports, React, material, Close, reactHookForm, formFields, makeStyles, Draggable, reResizable, theme, iconsMaterial, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.lodash, global.withStyles, global.createStyles));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, makeStyles, Draggable, reResizable, lodash, withStyles, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,11 +26,9 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-    var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
     var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
-    var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
     var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
@@ -161,6 +159,20 @@
       }, content));
     };
 
+    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,
@@ -171,10 +183,14 @@
           _d = _a.cancelLabel,
           cancelLabel = _d === void 0 ? 'Go back' : _d,
           onSubmit = _a.onSubmit,
-          onClose = _a.onClose,
+          _onClose = _a.onClose,
           _e = _a.content,
           content = _e === void 0 ? null : _e,
-          other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
+          _f = _a.disableAutoFocus,
+          disableAutoFocus = _f === void 0 ? false : _f,
+          _g = _a.isLoading,
+          isLoading = _g === void 0 ? false : _g,
+          other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
 
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -190,7 +206,10 @@
           }
         },
         // fix for briefly showing default options when closing dialog
-        transitionDuration: 0
+        transitionDuration: 0,
+        onClose: function onClose() {
+          _onClose('CLOSED');
+        }
       }, rest), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
         sx: {
           zIndex: 1,
@@ -216,10 +235,12 @@
         "data-testid": "confirmationDialog-close",
         "aria-label": "close",
         onClick: function onClick() {
-          return onClose('CLOSED');
+          return _onClose('CLOSED');
         },
         size: "small"
-      }, /*#__PURE__*/React__namespace.createElement(Close__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.Close, {
+        "data-testid": "CloseIcon"
+      }))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
         sx: {
           padding: '8px 16px'
         }
@@ -236,35 +257,49 @@
       }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.Button, {
+        disableFocusRipple: true
+      }, cancelLabel), isLoading ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "confirm-dialog-spinner",
+        sx: __assign(__assign({}, confirmStyle), {
+          height: '40px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        })
+      }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
+        size: 40,
+        color: "secondary"
+      })) : /*#__PURE__*/React__namespace.createElement(material.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 __assign(__assign({}, confirmStyle), {
+            '&:focus': {
+              outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+              borderColor: 'transparent'
+            }
+          });
         },
-        onClick: onSubmit
+        onClick: onSubmit,
+        autoFocus: !disableAutoFocus,
+        disableFocusRipple: true
       }, confirmLabel)));
     };
 
@@ -549,74 +584,40 @@
 
       switch (severity) {
         case 'info':
-          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Info, {
             sx: {
               color: 'geowebColors.functional.notification'
             },
             "data-testid": dataTestId
-          }, /*#__PURE__*/React__namespace.createElement("rect", {
-            width: 24,
-            height: 24,
-            fill: "transparent"
-          }), /*#__PURE__*/React__namespace.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__namespace.createElement(material.SvgIcon, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Success, {
             sx: {
               color: 'geowebColors.functional.success'
             },
             "data-testid": dataTestId
-          }, /*#__PURE__*/React__namespace.createElement("rect", {
-            width: 24,
-            height: 24,
-            fill: "transparent"
-          }), /*#__PURE__*/React__namespace.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__namespace.createElement(material.SvgIcon, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Exclamation, {
             sx: {
               color: 'geowebColors.functional.warning'
             },
             "data-testid": dataTestId
-          }, /*#__PURE__*/React__namespace.createElement("rect", {
-            width: 24,
-            height: 24,
-            fill: "transparent"
-          }), /*#__PURE__*/React__namespace.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__namespace.createElement(material.SvgIcon, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Exclamation, {
             sx: {
               color: 'geowebColors.functional.error'
             },
             "data-testid": dataTestId
-          }, /*#__PURE__*/React__namespace.createElement("rect", {
-            width: 24,
-            height: 24,
-            fill: "transparent"
-          }), /*#__PURE__*/React__namespace.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__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.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(_a) {
       var title = _a.title,
           _b = _a.severity,
@@ -690,7 +691,8 @@
       }, title), info && /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           fontSize: '16px',
-          marginTop: 1
+          marginTop: 1,
+          wordBreak: 'break-word'
         }
       }, info), actionButtonProps && /*#__PURE__*/React__namespace.createElement(material.Button, {
         variant: "flat",
@@ -701,7 +703,7 @@
         sx: {
           backgroundColor: 'transparent!important'
         },
-        startIcon: IconChevronRight
+        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronRight, null)
       }, actionButtonProps.title.toUpperCase()));
     };
 
@@ -721,7 +723,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = makeStyles__default["default"](function () {
+    var useStyles$7 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -738,7 +740,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -746,8 +748,6 @@
       }, 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";
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -764,7 +764,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function (theme) {
+    var useStyles$6 = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -779,9 +779,6 @@
         }, _a[theme.breakpoints.up('sm')] = {
           padding: '0 24px'
         }, _a),
-        logo: {
-          height: 30
-        },
         title: {
           marginLeft: 6,
           fontSize: '1.25rem',
@@ -801,7 +798,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$7();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -824,11 +821,7 @@
         justifyContent: "center",
         alignItems: "center",
         wrap: "nowrap"
-      }, /*#__PURE__*/React__default["default"].createElement("img", {
-        alt: title,
-        className: classes.logo,
-        src: img
-      }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         className: classes.title
       }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -885,33 +878,6 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ResizeHandle = function ResizeHandle(_a) {
-      var isRightAligned = _a.isRightAligned;
-      var theme = material.useTheme();
-      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
-        sx: __assign(__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["default"].createElement("rect", {
-        fill: "#ffffff"
-      }), /*#__PURE__*/React__default["default"].createElement("path", {
-        d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-        fill: "" + theme.palette.geowebColors.buttons.flat["default"].color,
-        transform: "rotate(-45 16.687 16.787)"
-      }));
-    };
-
     var ResizeComponent = function ResizeComponent(_a) {
       var _b = _a.startPosition,
           startPosition = _b === void 0 ? {
@@ -932,6 +898,7 @@
           minWidth = _e === void 0 ? 50 : _e,
           props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
 
+      var theme$1 = material.useTheme();
       var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
       var onStartResize = React__default["default"].useCallback(function (event, _direction, node) {
         event.stopPropagation();
@@ -965,10 +932,17 @@
         size: size,
         onResizeStop: onResizeStop,
         handleComponent: {
-          bottomRight: /*#__PURE__*/React__default["default"].createElement(ResizeHandle, {
-            isRightAligned: true
+          bottomRight: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
+            style: {
+              fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
+            }
           }),
-          bottomLeft: /*#__PURE__*/React__default["default"].createElement(ResizeHandle, null)
+          bottomLeft: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
+            isRightAligned: true,
+            style: {
+              fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
+            }
+          })
         },
         enable: {
           top: false,
@@ -1029,9 +1003,12 @@
         var children = this.props.children;
 
         if (error) {
-          return /*#__PURE__*/React__namespace.createElement("div", {
-            style: {
-              whiteSpace: 'pre-wrap'
+          return /*#__PURE__*/React__namespace.createElement(material.Box, {
+            sx: {
+              whiteSpace: 'pre-wrap',
+              width: 'inherit',
+              height: 'inherit',
+              overflowY: 'scroll'
             }
           }, /*#__PURE__*/React__namespace.createElement(AlertBanner, {
             severity: "error",
@@ -1075,7 +1052,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
+    var useStyles$5 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1123,7 +1100,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$6();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -1206,7 +1183,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](function (theme) {
+    var useStyles$4 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1219,7 +1196,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$5();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1306,11 +1283,6 @@
           _e = _a.leftComponent,
           leftComponent = _e === void 0 ? null : _e;
       var styles = getStyle(size);
-
-      var onClickClose = function onClickClose() {
-        return onClose();
-      };
-
       var columnSizeIcon = leftComponent ? 3 : 1;
       var columnSizeTitle = leftComponent ? 6 : 10;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -1328,7 +1300,10 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: columnSizeIcon
+        xs: columnSizeIcon,
+        sx: {
+          paddingRight: 1
+        }
       }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "flex-start"
@@ -1339,7 +1314,7 @@
         sx: __assign(__assign({}, iconStyle), {
           pointerEvents: 'none'
         })
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: columnSizeTitle
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1362,17 +1337,26 @@
           transform: 'rotate(90deg)',
           height: 12
         })
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: columnSizeIcon,
         container: true,
         justifyContent: "flex-end"
-      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Close",
+        placement: "bottom",
+        sx: {
+          pointerEvents: 'none'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
-        onClick: onClickClose,
+        onClick: onClose,
+        onTouchEnd: onClose,
         size: "large",
         sx: iconStyle
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Close, null)))));
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Close, {
+        "data-testid": "CloseIcon"
+      }))))));
     };
 
     /* *
@@ -1433,14 +1417,14 @@
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
         sx: styles$1.container
-      }, props), /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
+      }, props), /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, null, /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
         title: title,
         size: size,
         isDraggable: isDraggable,
         onClose: onClose,
         className: headerClassName,
         leftComponent: leftComponent
-      }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: styles$1.content,
         style: {
           maxHeight: maxHeight
@@ -1649,7 +1633,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function (theme) {
+    var useStyles$3 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1689,7 +1673,7 @@
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$4();
+      var classes = useStyles$3();
 
       if (type === 'divider') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -1723,171 +1707,6 @@
       }, 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__default["default"](function (theme) {
-      return {
-        icon: {
-          fill: theme.palette.geowebColors.typographyAndIcons.text
-        }
-      };
-    });
-    var OptionIcon = function OptionIcon() {
-      var classes = useStyles$3();
-      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 12 11",
-        style: {
-          width: 12,
-          height: 11
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Option"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Option-\"\u2325\"",
-        transform: "translate(-14.000000, -13.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 12 12",
-        style: {
-          width: 12,
-          height: 12
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Command"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Command-\"\u2318\"",
-        transform: "translate(-14.000000, -13.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 12 6",
-        style: {
-          width: 12,
-          height: 6
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow left"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Arrow-left-\"\u2190\"",
-        transform: "translate(-14.000000, -16.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 12 6",
-        style: {
-          width: 12,
-          height: 6
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow right"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Arrow-right-\"\u2192\"",
-        transform: "translate(-14.000000, -16.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 6 12",
-        style: {
-          width: 6,
-          height: 12
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow down"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Arrow-down-\"\u2193\"",
-        transform: "translate(-17.000000, -13.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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["default"].createElement(material.SvgIcon, {
-        viewBox: "0 0 6 11",
-        style: {
-          width: 6,
-          height: 11
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("title", null, "Arrow up"), /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Symbols:-General",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__default["default"].createElement("g", {
-        id: "Shortcut-Arrow-up-\"\u2191\"",
-        transform: "translate(-17.000000, -13.000000)",
-        className: classes.icon
-      }, /*#__PURE__*/React__default["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"
-      }))));
-    };
-
     var shortcuts = [{
       title: 'Choose a selected time',
       description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "Left click on the time slider rail")
@@ -1902,26 +1721,26 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon, null))),
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowRight, null))),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
       }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyOption, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon, null)))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowRight, null)))
     }, {
       title: 'Toggle hide/show time slider',
       description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -1957,7 +1776,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyOption, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
@@ -1970,22 +1789,22 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)")),
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)")),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyCommand, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)"))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)"))
     }, {
       title: 'Return to current time',
       description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -1997,7 +1816,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)))
     }, {
       title: 'Change layer manager values by scrolling',
       description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -2005,7 +1824,7 @@
       }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll")),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyCommand, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
     }];
     var getShortcutList = function getShortcutList(shortcutList, platform) {
       if (platform === void 0) {
@@ -2428,7 +2247,10 @@
           width: width + "!important",
           height: height + "!important",
           textTransform: 'none!important',
-          padding: '11px!important'
+          padding: '11px!important',
+          '& .MuiSvgIcon-root': {
+            marginRight: '0px!important'
+          }
         }, sx)
       }, props), children);
     };
@@ -2512,17 +2334,17 @@
           setAnchorEl(document.getElementById(buttonTestId));
         }
       }, [isDefaultOpen, buttonTestId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        placement: "top",
+        title: tooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
         active: isOpen,
         sx: buttonSx,
         onClick: handleClick,
         "data-testid": buttonTestId,
         variant: variant,
         id: buttonTestId
-      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        placement: "top",
-        title: tooltipTitle
-      }, /*#__PURE__*/React__namespace.createElement(MoreVertIcon__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null)))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorEl,
         open: isOpen,
         onClose: handleClose,
@@ -2572,10 +2394,10 @@
     var useStyles = makeStyles__default["default"](function (theme) {
       return createStyles__default["default"]({
         button: {
-          height: 28,
-          width: 28,
+          height: 24,
+          width: 24,
           borderRadius: 5,
-          marginTop: 2,
+          marginTop: 4,
           color: function color(_a) {
             var isActive = _a.isActive,
                 isAccessible = _a.isAccessible,
@@ -2684,12 +2506,7 @@
       return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
-        icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.Delete, {
-          sx: {
-            width: 20,
-            height: 20
-          }
-        }),
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
         testId: "deleteButton",
         isEnabled: isEnabled
       });
@@ -2720,24 +2537,6 @@
         onChangeEnableLayer(!isEnabled);
       };
 
-      var visibilityIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
-        width: 24,
-        height: 24,
-        fill: "transparent"
-      }), /*#__PURE__*/React__namespace.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__namespace.createElement(material.SvgIcon, {
-        style: {
-          marginTop: 2
-        }
-      }, /*#__PURE__*/React__namespace.createElement("rect", {
-        width: 24,
-        height: 24,
-        fill: "transparent"
-      }), /*#__PURE__*/React__namespace.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__namespace.createElement(ManagerButton, {
         tooltipTitle: title,
         onClick: onClick,
@@ -2756,8 +2555,8 @@
               color: 'inherit'
             }
           },
-          icon: visibilityOffIcon,
-          checkedIcon: visibilityIcon,
+          icon: /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
+          checkedIcon: /*#__PURE__*/React__namespace.createElement(theme.Visibility, null),
           checked: isEnabled,
           disableFocusRipple: true,
           tabIndex: -1