@opengeoweb/shared 3.0.0 → 4.1.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('@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/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/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.createStyles));
-})(this, (function (exports, React, material, theme, reactHookForm, formFields, makeStyles, Draggable, reResizable, lodash, 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('react-draggable'), require('re-resizable'), require('lodash')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', 'lodash'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.lodash));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, Draggable, reResizable, lodash) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,9 +26,7 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
-    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -664,7 +662,7 @@
             }
           },
           '& .MuiAlert-icon': {
-            margin: '-3px 10px 0px 0px',
+            marginTop: '-3px',
             padding: '0px'
           }
         } : {
@@ -685,13 +683,15 @@
           fontWeight: 'normal',
           marginTop: '0px!important',
           paddingTop: '0px!important',
-          marginBottom: '0px!important'
+          marginBottom: '0px!important',
+          lineHeight: isCompact ? '18px' : '24px'
         }
       }, title), info && /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           fontSize: '16px',
           marginTop: 1,
-          wordBreak: 'break-word'
+          wordBreak: 'break-word',
+          lineHeight: '22px'
         }
       }, info), actionButtonProps && /*#__PURE__*/React__namespace.createElement(material.Button, {
         variant: "flat",
@@ -722,28 +722,23 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](function () {
-      return {
-        wrapper: {
+
+    var AppLayout = function AppLayout(_a) {
+      var header = _a.header,
+          children = _a.children;
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
           height: '100vh',
           display: 'flex',
           flexDirection: 'column'
         },
-        main: {
+        "data-testid": "appLayout"
+      }, header, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "main",
+        sx: {
           flex: 1,
           position: 'relative'
         }
-      };
-    });
-
-    var AppLayout = function AppLayout(_a) {
-      var header = _a.header,
-          children = _a.children;
-      var classes = useStyles$5();
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.wrapper
-      }, header, /*#__PURE__*/React__default["default"].createElement("main", {
-        className: classes.main
       }, children));
     };
 
@@ -760,10 +755,10 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$4 = {
+    var styles$5 = {
       header: function header(theme) {
         var _a;
 
@@ -772,21 +767,24 @@
           backgroundColor: theme.palette.geowebColors.brand.brand,
           color: theme.palette.common.white,
           boxShadow: theme.shadows[1],
-          zIndex: 1000
-        }, _a[theme.breakpoints.down('sm')] = {
-          padding: '0 8px'
-        }, _a[theme.breakpoints.up('sm')] = {
+          zIndex: 1000,
+          padding: '0 16px'
+        }, _a[theme.breakpoints.up('md')] = {
           padding: '0 24px'
         }, _a;
       },
       title: {
-        marginLeft: 1,
-        fontSize: '1.25rem',
-        fontWeight: 400,
+        fontSize: '20px',
+        fontWeight: 500,
+        fontStretch: 'normal',
+        fontStyle: 'normal',
+        lineHeight: 'normal',
+        letterSpacing: '0.15px',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
-        letterSpacing: '0.15px'
+        color: 'geowebColors.typographyAndIcons.text',
+        marginLeft: 1
       },
       container: {
         height: '100%'
@@ -800,34 +798,42 @@
           title = _b === void 0 ? 'GeoWeb' : _b;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
-        sx: styles$4.header
+        sx: styles$5.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        sx: styles$4.container,
+        sx: styles$5.container,
         container: true,
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "flex-start"
-      }, menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 10,
+        xs: 6,
         sm: 6
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justifyContent: "center",
         alignItems: "center",
-        wrap: "nowrap"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        wrap: "nowrap",
+        sx: {
+          button: {
+            marginLeft: 4,
+            color: 'geowebColors.typographyAndIcons.text'
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
+        style: {
+          position: 'relative',
+          top: '-1px',
+          right: '-1px'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
-        sx: styles$4.title
-      }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        sx: styles$5.title
+      }, title), menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3,
+        xs: 6,
+        sm: 6,
         container: true,
         justifyContent: "flex-end"
       }, userMenu)));
@@ -1036,17 +1042,13 @@
       return ErrorBoundary;
     }(React__namespace.Component);
 
-    var styles$3 = {
+    var styles$4 = {
       small: {
         height: 16,
         width: 16,
         fontSize: '0.5rem'
       },
-      large: {
-        height: 32,
-        width: 32,
-        fontSize: '0.938rem'
-      }
+      large: {}
     };
 
     var Avatar = function Avatar(_a) {
@@ -1055,13 +1057,7 @@
           size = _b === void 0 ? 'large' : _b;
       return /*#__PURE__*/React__namespace.createElement(material.Avatar, {
         "data-testid": "avatar",
-        sx: __assign(__assign({}, styles$3[size]), {
-          fontWeight: 500,
-          color: 'geowebColors.brand.brand',
-          backgroundColor: 'common.white',
-          border: '0.1px solid',
-          borderColor: 'geowebColors.brand.brand'
-        })
+        sx: __assign({}, styles$4[size])
       }, children);
     };
 
@@ -1081,7 +1077,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$2 = {
+    var styles$3 = {
       container: {
         position: 'absolute',
         top: 38,
@@ -1101,8 +1097,13 @@
         }
       },
       button: {
-        color: 'common.white',
-        padding: 0
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        '&:hover': {
+          border: 'none',
+          background: 'transparent'
+        }
       }
     };
 
@@ -1122,16 +1123,16 @@
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
-        sx: styles$2.button,
+        sx: styles$3.button,
         size: "large"
       }, /*#__PURE__*/React__default["default"].createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        sx: styles$2.container,
+        sx: styles$3.container,
         "data-testid": "userMenu"
       }, /*#__PURE__*/React__default["default"].createElement(material.ClickAwayListener, {
         onClickAway: onClose,
         mouseEvent: "onMouseDown"
       }, /*#__PURE__*/React__default["default"].createElement(material.MenuList, {
-        sx: styles$2.userMenu,
+        sx: styles$3.userMenu,
         variant: "menu"
       }, children))));
     };
@@ -1199,22 +1200,17 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function (theme) {
-      return {
-        footer: {
-          boxShadow: theme.shadows[1],
-          background: theme.palette.geowebColors.background.surface,
+
+    var ToolFooter = function ToolFooter() {
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "footer",
+        sx: {
+          boxShadow: 1,
+          backgroundColor: 'geowebColors.background.surface',
           textAlign: 'right',
           height: 18,
           zIndex: 1
         }
-      };
-    }); // drag handles will be handled by DraggableResizable/Resizable
-
-    var ToolFooter = function ToolFooter() {
-      var classes = useStyles$4();
-      return /*#__PURE__*/React__default["default"].createElement("footer", {
-        className: classes.footer
       });
     };
 
@@ -1231,8 +1227,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var getStyle = function getStyle(size) {
@@ -1391,7 +1387,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$1 = {
+    var styles$2 = {
       container: {
         overflow: 'hidden',
         borderRadius: 0,
@@ -1432,7 +1428,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
-        sx: styles$1.container
+        sx: styles$2.container
       }, props), /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, null, /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
         title: title,
         size: size,
@@ -1441,7 +1437,7 @@
         className: headerClassName,
         leftComponent: leftComponent
       })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: styles$1.content,
+        sx: styles$2.content,
         style: {
           maxHeight: maxHeight
         }
@@ -1633,91 +1629,63 @@
       }, children)))) : null;
     };
 
-    /* *
-     * 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: {
-          backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
-          width: 40,
-          height: 40,
-          display: 'inline-flex',
-          verticalAlign: 'middle',
-          alignItems: 'center',
-          borderRadius: theme.shape.borderRadius,
-          '&>span': {
-            textAlign: 'center',
-            fontSize: 14,
-            fontWeight: 500,
-            display: 'flex',
-            margin: 'auto',
-            letterSpacing: 0.25
-          }
-        },
-        segment: {
-          margin: '0 2px',
-          verticalAlign: 'middle',
-          fontSize: 14,
-          fontWeight: 500,
-          letterSpacing: 0.25
-        },
-        connect: {
-          fontSize: 18
-        },
-        divider: {
-          margin: '0 6px',
-          fontSize: 18
-        }
-      };
-    });
+    var segmentStyle = {
+      margin: '0 2px',
+      verticalAlign: 'middle',
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0.25,
+      justifyContent: 'center'
+    };
+    var styles$1 = {
+      icon: __assign(__assign({}, segmentStyle), {
+        backgroundColor: 'geowebColors.textInputField.default.rgba',
+        width: 40,
+        height: 40,
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: 1
+      }),
+      connect: __assign(__assign({}, segmentStyle), {
+        fontSize: 18
+      }),
+      divider: __assign(__assign({}, segmentStyle), {
+        margin: '0 6px',
+        fontSize: 18
+      })
+    };
 
     var ShortCutSegment = function ShortCutSegment(_a) {
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$3();
 
       if (type === 'divider') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+          sx: styles$1.divider,
           "data-testid": "segment-divider",
-          className: classes.segment + " " + classes.divider,
           component: "span"
         }, children);
       }
 
       if (type === 'icon') {
-        return /*#__PURE__*/React__default["default"].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+          sx: styles$1.icon,
           "data-testid": "segment-icon",
-          className: classes.segment + " " + classes.icon
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           component: "span"
-        }, children));
+        }, children);
       }
 
       if (type === 'connect') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          className: classes.segment + " " + classes.connect,
+          sx: styles$1.connect,
           "data-testid": "segment-connect",
           component: "span"
         }, children);
       }
 
       return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        className: classes.segment,
+        sx: segmentStyle,
         "data-testid": "segment-text",
         component: "span"
       }, children);
@@ -1861,33 +1829,18 @@
         });
       });
     };
-    var useStyles$2 = makeStyles__default["default"](function () {
-      return {
-        row: {
-          minHeight: 56
-        },
-        title: {
-          fontSize: 12,
-          fontWeight: 300,
-          letterSpacing: 0.4,
-          opacity: 0.67
-        },
-        description: {
-          alignItems: 'center'
-        }
-      };
-    });
 
     var ShortcutList = function ShortcutList(_a) {
       var _b = _a.platform,
           platform = _b === void 0 ? 'windows' : _b;
-      var classes = useStyles$2();
       var rows = getShortcutList(shortcuts, platform);
       return /*#__PURE__*/React__default["default"].createElement(material.List, {
         "data-testid": "list-" + platform
       }, rows.map(function (row, index) {
         return /*#__PURE__*/React__default["default"].createElement(material.ListItem, {
-          className: classes.row,
+          sx: {
+            minHeight: 56
+          },
           divider: index !== rows.length - 1,
           key: row.title
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1897,11 +1850,18 @@
           alignItems: "center"
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
-          className: classes.title
+          sx: {
+            fontSize: 12,
+            fontWeight: 300,
+            letterSpacing: 0.4,
+            opacity: 0.67
+          }
         }, row.title), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: classes.description
+        }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          sx: {
+            alignItems: 'center'
+          }
         }, row.description))));
       }));
     };
@@ -1959,17 +1919,7 @@
       })));
     };
 
-    var useStyles$1 = makeStyles__default["default"](function () {
-      return {
-        backdrop: {
-          zIndex: 1
-        }
-      };
-    });
-
     var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-      var classes = useStyles$1();
-
       var _a = __read(React__default["default"].useState(false), 2),
           open = _a[0],
           setOpen = _a[1];
@@ -1993,7 +1943,9 @@
       }, "Cheat sheet"))), /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
         "data-testid": "cheatsheet-content",
         open: open,
-        className: classes.backdrop
+        sx: {
+          zIndex: 1
+        }
       }, /*#__PURE__*/React__default["default"].createElement(DraggableComponent, {
         startSize: {
           width: 700
@@ -2348,14 +2300,14 @@
       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, {
+      }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
         active: isOpen,
         sx: buttonSx,
         onClick: handleClick,
         "data-testid": buttonTestId,
         variant: variant,
         id: buttonTestId
-      }, /*#__PURE__*/React__namespace.createElement(theme.Options, 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,
@@ -2402,56 +2354,46 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        button: {
-          height: 24,
-          width: 24,
-          borderRadius: 5,
-          marginTop: 4,
-          color: function color(_a) {
-            var isActive = _a.isActive,
-                isAccessible = _a.isAccessible,
-                isEnabled = _a.isEnabled;
-
-            if (!isEnabled) {
-              return theme.palette.geowebColors.buttons.flat.disabled.color;
-            }
 
-            if (isAccessible) {
-              return theme.palette.geowebColors.greys.accessible;
-            }
+    var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessible) {
+      return {
+        height: '24px',
+        width: '24px',
+        borderRadius: '5px',
+        marginTop: '4px',
+        color: function color() {
+          if (!isEnabled) {
+            return 'geowebColors.buttons.flat.disabled.color';
+          }
 
-            if (isActive) {
-              return theme.palette.common.white;
-            }
+          if (isAccessible) {
+            return 'geowebColors.greys.accessible';
+          }
 
-            return theme.palette.geowebColors.buttons.flat["default"].color;
-          },
-          backgroundColor: function backgroundColor(_a) {
-            var isActive = _a.isActive;
-            return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-          },
-          '&:focus': {
-            backgroundColor: function backgroundColor(_a) {
-              var isActive = _a.isActive;
-              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-            },
-            outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-            borderRadius: 0
-          },
-          '&:hover': {
-            backgroundColor: function backgroundColor(_a) {
-              var isActive = _a.isActive;
-              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-            }
+          if (isActive) {
+            return 'common.white';
           }
+
+          return 'geowebColors.buttons.flat.default.color';
         },
-        popper: {
-          pointerEvents: 'none'
+        backgroundColor: function backgroundColor() {
+          return isActive ? 'geowebColors.buttons.primary.active.fill' : 'inherit';
+        },
+        '&:focus': {
+          backgroundColor: function backgroundColor() {
+            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+          },
+          outline: 'geowebColors.buttons.focusDefault.outline',
+          borderRadius: 0
+        },
+        '&:hover': {
+          backgroundColor: function backgroundColor() {
+            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+          }
         }
-      });
-    });
+      };
+    };
+
     var ManagerButton = function ManagerButton(_a) {
       var _b = _a.tooltipTitle,
           tooltipTitle = _b === void 0 ? '' : _b,
@@ -2465,14 +2407,10 @@
           testId = _a.testId,
           _f = _a.isAccessible,
           isAccessible = _f === void 0 ? false : _f,
-          className = _a.className,
-          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
+          sx = _a.sx,
+          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx"]);
 
-      var classes = useStyles({
-        isActive: isActive,
-        isEnabled: isEnabled,
-        isAccessible: isAccessible
-      });
+      var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
       var handleClick = function handleClick(event) {
         onClick(event);
@@ -2481,14 +2419,14 @@
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: tooltipTitle,
         placement: "top",
-        classes: {
-          popper: classes.popper
+        sx: {
+          pointerEvents: 'none'
         }
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
         size: "small",
         onClick: handleClick,
         "data-testid": testId,
-        className: classes.button + " " + className,
+        sx: __assign(__assign({}, buttonStyles), sx),
         disableFocusRipple: true
       }, props), icon));
     };