@mapcomponents/react-maplibre 0.1.82 → 0.1.84

package/dist/index.esm.js

@@ -22,8 +22,7 @@ var ButtonGroup = require('@mui/material/ButtonGroup');
 var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
 var Box = require('@mui/material/Box');
-var styled = require('@emotion/styled');
-var css = require('@emotion/css');
+var Divider = require('@mui/material/Divider');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
 var Paper = require('@mui/material/Paper');
@@ -106,7 +105,7 @@ var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
 var ControlPointIcon__default = /*#__PURE__*/_interopDefaultLegacy(ControlPointIcon);
 var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveCircleOutlineIcon);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
 var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
 var syncMove__default = /*#__PURE__*/_interopDefaultLegacy(syncMove);
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
@@ -231,11 +230,6 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
 }
 
 var MapLibreGlWrapper = /** @class */ (function () {
@@ -784,31 +778,27 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
                 main: '#009EE0',
             },
             secondary: { main: '#747577' },
-            background: {
-                default: '#222222',
-                paper: '#414141',
-                icon: '#525252',
-            },
+            background: { paper: '#313131' },
             text: {
-                secondary: '#fff',
-                contrast: '#121212',
+                primary: '#FFF',
+                contrast: '#000',
             },
+            topToolbar: { barColor: '#000' },
+            navigation: { navColor: '#313131', navHover: '#747577' },
+            compass: { compColor: '#313131', compHover: '#747577' },
         }
         : {
             primary: {
                 main: '#009EE0',
             },
             secondary: { main: '#747577' },
-            background: {
-                default: '#fff',
-                paper: '#fdfdfd',
-                icon: '#bdbdbd',
-            },
             text: {
-                primary: '#1A171B',
-                secondary: '#121212',
+                primary: '#000',
                 contrast: '#fff',
             },
+            topToolbar: { barColor: '#fff' },
+            navigation: { navColor: '#fff', navHover: '#f5f5f5' },
+            compass: { compColor: '#fff', compHover: '#f5f5f5' },
         })) })); };
 var getTheme = function (mode) {
     var _a;
@@ -825,28 +815,11 @@ var getTheme = function (mode) {
             MuiAppBar: {
                 styleOverrides: {
                     root: {
-                        backgroundColor: theme.palette.background.default,
-                    },
-                },
-            },
-            MuiIconButton: {
-                styleOverrides: {
-                    root: {
-                        color: theme.palette.text.primary,
-                        backgroundColor: theme.palette.background.icon,
-                        ':hover': {
-                            backgroundColor: theme.palette.background.icon,
-                            color: theme.palette.primary.main,
-                        },
+                        backgroundColor: theme.palette.topToolbar.barColor,
                     },
                 },
             },
             MuiButton: {
-                styleOverrides: {
-                    contained: {
-                        color: '#fff',
-                    },
-                },
                 variants: [
                     {
                         props: { variant: 'navtools' },
@@ -865,17 +838,14 @@ var getTheme = function (mode) {
                                 height: '30px',
                                 fontSize: '1.2em',
                             },
-                            _a.backgroundColor = theme.palette.background.icon,
+                            _a.color = theme.palette.text.primary,
+                            _a.backgroundColor = theme.palette.navigation.navColor,
                             _a.borderRadius = '23%',
-                            //border: "1px solid #bbb",
-                            //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
                             _a.margin = '0.15px',
                             _a.marginTop = '4px',
                             _a[':hover'] = {
-                                color: theme.palette.primary.main,
-                                backgroundColor: theme.palette.background.icon,
+                                backgroundColor: theme.palette.navigation.navHover,
                             },
-                            _a.color = theme.palette.text.secondary,
                             _a),
                     },
                 ],
@@ -1562,7 +1532,7 @@ var MlCreatePdfButton = function (props) {
                     });
                 }
             } }, loading ? (React__default["default"].createElement(material.CircularProgress, { size: 24, sx: {
-                color: 'text.contrast',
+                color: '#fff',
             } })) : (React__default["default"].createElement(PrinterIcon__default["default"], null)))));
 };
 MlCreatePdfButton.defaultProps = {
@@ -2641,60 +2611,97 @@ MlMeasureTool.defaultProps = {
     unit: "kilometers",
 };
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgRotateRight = function SvgRotateRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    width: "39.675098mm",
-    height: "104.27064mm",
-    viewBox: "0 0 39.675098 104.27064"
-  }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-86.019554,-58.032633)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    style: {
-      strokeWidth: 0.744756
-    },
-    d: "m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z",
-    transform: "scale(0.26458333)"
-  })));
-};
-
-var _g$1;
+var _path$1, _path2$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgRotateLeft = function SvgRotateLeft(props) {
+var SvgCompassNeedle = function SvgCompassNeedle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    width: "39.675098mm",
-    height: "104.27064mm",
-    viewBox: "0 0 39.675098 104.27064"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-86.019554,-58.032633)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m 94.572523,58.032633 31.122127,8.55245 -14.4756,8.234638 c 5.81924,11.004841 8.69175,22.458582 10.1415,33.839279 1.81552,13.47801 1.57616,27.51604 -5.35471,41.13341 -1.58021,3.10296 -3.61373,6.24356 -6.45284,9.27798 -0.70371,0.75161 -1.49649,1.52256 -2.41535,2.29702 -0.23167,0.19521 -0.49044,0.40378 -0.78083,0.62322 -0.0785,0.0597 -0.16832,0.12632 -0.27027,0.19999 l -0.154,0.11265 -9.148793,-4.00131 0.0894,-0.0584 c 0.007,-0.004 0.02228,-0.0155 0.04857,-0.0346 0.123621,-0.0923 0.259794,-0.20319 0.412895,-0.33073 0.607899,-0.50626 1.181468,-1.07062 1.756997,-1.67742 2.328481,-2.45299 4.049011,-5.15919 5.513881,-7.97419 6.46189,-12.41085 6.55496,-25.67394 4.91598,-38.80952 -1.30807,-9.888781 -3.61235,-19.707408 -7.99176,-29.085561 l -15.510171,8.823235 z"
-  }))));
+    width: 9,
+    height: 40,
+    viewBox: "0 0 9 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3.34715 4.52028C3.57452 3.46874 5.0746 3.46874 5.30197 4.52028L8.64912 20H0L3.34715 4.52028Z",
+    fill: "#CF003D"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3.34715 35.4797C3.57452 36.5313 5.0746 36.5313 5.30197 35.4797L8.64912 20H0L3.34715 35.4797Z",
+    fill: "#D3DCE1"
+  })));
 };
 
-var _g;
+var _circle, _path, _path2, _path3, _path4;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgNeedle = function SvgNeedle(props) {
+var SvgCompassBackground = function SvgCompassBackground(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: "75.967445mm",
-    height: "234.71339mm",
-    viewBox: "0 0 75.967445 234.71339"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-76.705281,-29.77268)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m 114.68901,29.77268 37.98372,117.3567 H 76.705281 Z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m 114.68901,264.48608 37.98372,-117.3567 H 76.705281 Z"
-  }))));
+    width: 52,
+    height: 53,
+    viewBox: "0 0 52 53",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 26.0001,
+    cy: 26.1843,
+    r: 24,
+    fill: "white",
+    stroke: "#009EE0",
+    strokeWidth: 2
+  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
+    fill: "#009EE0"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
+    fill: "#009EE0"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z",
+    fill: "#009EE0"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z",
+    fill: "#009EE0"
+  })));
 };
 
-var NeedleButton = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\twidth: 40%;\n\tdisplay: flex;\n\talign-items: center;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n\tpath {\n\t\tfilter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));\n\t}\n\t&:hover path {\n\t\tfilter: drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));\n\t}\n\tpath:nth-of-type(2) {\n\t\tfill: #343434;\n\t}\n\t&:hover path:nth-of-type(2) {\n\t\tfill: #434343;\n\t}\n\tpath:nth-of-type(1) {\n\t\tfill: #e90318;\n\t}\n\t&:hover path:nth-of-type(1) {\n\t\tfill: #fb4052;\n\t}\n"], ["\n\twidth: 40%;\n\tdisplay: flex;\n\talign-items: center;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n\tpath {\n\t\tfilter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));\n\t}\n\t&:hover path {\n\t\tfilter: drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));\n\t}\n\tpath:nth-of-type(2) {\n\t\tfill: #343434;\n\t}\n\t&:hover path:nth-of-type(2) {\n\t\tfill: #434343;\n\t}\n\tpath:nth-of-type(1) {\n\t\tfill: #e90318;\n\t}\n\t&:hover path:nth-of-type(1) {\n\t\tfill: #fb4052;\n\t}\n"])));
-var NeedleContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tpointer-events: none;\n\tdisplay: flex;\n\tz-index: 1002;\n\tposition: absolute;\n\talign-items: center;\n\n\tmargin-left: -30%;\n\tpath:nth-of-type(2) {\n\t}\n\tsvg g {\n\t\ttransform: translate(-76.7053, -29.7727) scale(2, 1);\n\t}\n\tsvg {\n\t\tz-index: 9990;\n\t\theight: 150px;\n\t\twidth: 200px;\n\t}\n"], ["\n\tpointer-events: none;\n\tdisplay: flex;\n\tz-index: 1002;\n\tposition: absolute;\n\talign-items: center;\n\n\tmargin-left: -30%;\n\tpath:nth-of-type(2) {\n\t}\n\tsvg g {\n\t\ttransform: translate(-76.7053, -29.7727) scale(2, 1);\n\t}\n\tsvg {\n\t\tz-index: 9990;\n\t\theight: 150px;\n\t\twidth: 200px;\n\t}\n"])));
-var RotateButton = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\twidth: 30%;\n\tmargin-top: 14px;\n\tz-index: 999;\n\tdisplay: flex;\n\n\tsvg:hover {\n\t\tcursor: pointer;\n\t}\n\tsvg:hover path {\n\t\tfill: #ececec;\n\t\tfilter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));\n\t}\n\tpath {\n\t\tfill: #bbb;\n\t}\n\tsvg {\n\t\ttransform: scale(0.6);\n\t\tz-index: 9990;\n\t\theight: 172px;\n\t}\n"], ["\n\twidth: 30%;\n\tmargin-top: 14px;\n\tz-index: 999;\n\tdisplay: flex;\n\n\tsvg:hover {\n\t\tcursor: pointer;\n\t}\n\tsvg:hover path {\n\t\tfill: #ececec;\n\t\tfilter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));\n\t}\n\tpath {\n\t\tfill: #bbb;\n\t}\n\tsvg {\n\t\ttransform: scale(0.6);\n\t\tz-index: 9990;\n\t\theight: 172px;\n\t}\n"])));
+var StyleBox = material.styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            zIndex: 1000,
+            cursor: 'pointer',
+            transform: 'scale(1)'
+        },
+        _b[theme.breakpoints.down('md')] = {
+            transform: 'scale(1.6)',
+        },
+        _b);
+});
+var CompassBox = material.styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            position: 'absolute',
+            right: '-10px',
+            top: '-52px'
+        },
+        _b[theme.breakpoints.down('md')] = {
+            right: '0px',
+            top: '-52px',
+        },
+        _b.circle = {
+            fill: theme.palette.compass.compColor,
+        },
+        _b['&:hover circle'] = {
+            fill: theme.palette.compass.compHover,
+        },
+        _b);
+});
+var NeedleBox = material.styled('div')({
+    position: 'absolute',
+    right: '21.4px',
+    top: '6px',
+});
 /**
  * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
  *
- * All style props are applied using @emotion/css to allow more complex css selectors.
+ * All style props are applied using @mui/material/styled to allow more complex css selectors.
  *
  * @component
  */
@@ -2704,89 +2711,46 @@ var MlNavigationCompass = function (props) {
         waitForLayer: props.insertBeforeLayer,
     });
     var _a = React.useState(0), bearing = _a[0], setBearing = _a[1];
+    var _updateBearing = function () {
+        var _a, _b;
+        if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
+            return;
+        setBearing(Math.round(mapHook.map.map.getBearing()));
+    };
     React.useEffect(function () {
         if (!mapHook.map)
             return;
-        var _updateBearing = function () {
-            var _a, _b;
-            if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
-                return;
-            setBearing(Math.round(mapHook.map.map.getBearing()));
-        };
-        mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
+        mapHook.map.on('rotate', _updateBearing, mapHook.componentId);
         _updateBearing();
         return function () {
             var _a;
-            (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off("rotate", _updateBearing);
+            (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off('rotate', _updateBearing);
         };
     }, [mapHook.map, props.mapId]);
+    var rotate = function () {
+        var _a, _b, _c, _d;
+        if (bearing == 0) {
+            (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(-90);
+        }
+        else if (bearing == -90) {
+            (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map.setBearing(180);
+        }
+        else if (bearing == 180) {
+            (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.map.setBearing(90);
+        }
+        else {
+            (_d = mapHook.map) === null || _d === void 0 ? void 0 : _d.map.setBearing(0);
+        }
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: css.css(__assign({ zIndex: 1000, top: 0, position: "absolute" }, props.style)) },
-            React__default["default"].createElement("div", { className: css.css(__assign({ position: "absolute", border: "10px solid #bcbcbc", backgroundColor: "#717171", background: "radial-gradient(#717171, #414141)", height: "200px", width: "200px", borderRadius: "50%", display: "flex", justifyContent: "center", transform: "scale(0.2) translateX(-448px) translateY(-448px)" }, props.backgroundStyle)) },
-                React__default["default"].createElement(RotateButton, { className: css.css(__assign({}, props.rotateRightStyle)) },
-                    React__default["default"].createElement(SvgRotateRight, { onClick: function () {
-                            if (!mapHook.map)
-                                return;
-                            var bearing = Math.round(mapHook.map.map.getBearing());
-                            var rest = Math.round(bearing % 90);
-                            if (bearing > 0) {
-                                rest = 90 - rest;
-                            }
-                            if (rest === 0) {
-                                rest = 90;
-                            }
-                            mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
-                        } })),
-                React__default["default"].createElement(NeedleButton, { className: css.css(__assign({}, props.needleStyle)), onClick: function () {
-                        var _a;
-                        (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(0);
-                    } },
-                    React__default["default"].createElement(NeedleContainer, { style: {
-                            transform: "rotate(" + (bearing > 0 ? "-" + bearing : -1 * bearing) + "deg)",
-                        } },
-                        React__default["default"].createElement(SvgNeedle, null))),
-                React__default["default"].createElement(RotateButton, { className: css.css(__assign({}, props.rotateLeftStyle)) },
-                    React__default["default"].createElement(SvgRotateLeft, { onClick: function () {
-                            if (!mapHook.map)
-                                return;
-                            var bearing = Math.round(mapHook.map.map.getBearing());
-                            var rest = Math.round(bearing % 90);
-                            if (bearing < 0) {
-                                rest = 90 + rest;
-                            }
-                            if (rest === 0) {
-                                rest = 90;
-                            }
-                            mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
+        React__default["default"].createElement(StyleBox, { sx: __assign({}, props.style) },
+            React__default["default"].createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
+                React__default["default"].createElement(SvgCompassBackground, null),
+                React__default["default"].createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
+                    React__default["default"].createElement(SvgCompassNeedle, { style: {
+                            transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
                         } }))))));
-};
-MlNavigationCompass.propTypes = {
-    /**
-     * Component id prefix
-     */
-    idPrefix: PropTypes__default["default"].string,
-    /**
-     * Style object to adjust css definitions of the component.
-     */
-    style: PropTypes__default["default"].object,
-    /**
-     * Style object to adjust css definitions of the background.
-     */
-    backgroundStyle: PropTypes__default["default"].object,
-    /**
-     * Style object to adjust css definitions of the compass needle.
-     */
-    needleStyle: PropTypes__default["default"].object,
-    /**
-     * Style object to adjust css definitions of the rotate right button.
-     */
-    rotateRightStyle: PropTypes__default["default"].object,
-    /**
-     * Style object to adjust css definitions of the rotate left button.
-     */
-    rotateLeftStyle: PropTypes__default["default"].object,
-};
-var templateObject_1, templateObject_2, templateObject_3;
+};
 
 /**
  * @component
@@ -2797,7 +2761,7 @@ var MlNavigationTools = function (props) {
         waitForLayer: props.insertBeforeLayer,
     });
     var _a = React.useState(0), pitch = _a[0], setPitch = _a[1];
-    var mediaIsMobile = useMediaQuery__default["default"]('(max-width:900px)');
+    var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('md'); });
     React.useEffect(function () {
         if (!mapHook.map)
             return;
@@ -2831,27 +2795,19 @@ var MlNavigationTools = function (props) {
         }
         mapHook.map.map.easeTo({ pitch: targetPitch });
     }, [mapHook.map]);
-    return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column' }, (mediaIsMobile ? { margin: '20px 10px 20px 10px' } : {})), props.sx) },
-        React__default["default"].createElement(MlNavigationCompass, { style: {
-                width: '31px',
-                position: 'relative',
-                height: mediaIsMobile ? '55px' : '45px',
-                marginLeft: mediaIsMobile ? '3px' : '-5px',
-                transform: mediaIsMobile ? 'scale(1.6)' : 'scale(1)',
-            }, backgroundStyle: {
-                boxShadow: '0px 0px 18px rgba(0,0,0,.5)',
-            } }),
+    return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 20px 10px' } : { marginTop: '50px' })), props.sx) },
+        React__default["default"].createElement(MlNavigationCompass, null),
         props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch ? '2D' : '3D')),
         props.showFollowGpsButton && React__default["default"].createElement(MlFollowGps, null),
         props.showCenterLocationButton && React__default["default"].createElement(MlCenterPosition, null),
         React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
-                width: '50px',
                 border: 'none',
                 Button: { minWidth: '20px !important' },
                 'Button:hover': { border: 'none' },
             } }, props.showZoomButtons && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: zoomIn },
                 React__default["default"].createElement(ControlPointIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
+            React__default["default"].createElement(Divider__default["default"], { sx: { zIndex: 500, marginLeft: '7px', marginRight: '7px' } }),
             React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: zoomOut },
                 React__default["default"].createElement(RemoveCircleOutlineIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
         props.children && React__default["default"].cloneElement(props.children, {})));
@@ -2862,10 +2818,6 @@ MlNavigationTools.defaultProps = {
     showFollowGpsButton: true,
     showCenterLocationButton: false,
     showZoomButtons: true,
-    sx: {
-        right: "5px",
-        bottom: "20px",
-    },
 };
 
 /**
@@ -5601,7 +5553,7 @@ function TemporalControllerPlayer(props) {
     var _b = React.useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
     var range = props.maxVal - props.minVal;
     var intervalRef = React.useRef();
-    var mediaIsMobile = material.useMediaQuery('(max-width:900px)');
+    var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
     React.useEffect(function () {
         return function () {
             if (intervalRef.current) {
@@ -6282,15 +6234,22 @@ var ColorPicker = function (_a) {
     var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
-            React__default["default"].createElement(material.Grid, { xs: 2, item: true },
+            React__default["default"].createElement(material.Grid, { xs: 12, item: true },
                 React__default["default"].createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
-                        minWidth: 'initial',
+                        minWidth: '100%',
                         padding: '5px',
+                        marginBottom: '10px',
+                        justifyContent: 'flex-start',
                         borderColor: function (theme) { return theme.palette.text.primary; },
+                        color: function (theme) { return theme.palette.text.primary; },
                     } },
-                    React__default["default"].createElement("div", { style: { width: '25px', height: '25px', backgroundColor: value } }))),
-            React__default["default"].createElement(material.Grid, { xs: 10, item: true },
-                React__default["default"].createElement(material.TextField, { onClick: function () { return setShowPicker(true); }, value: value, variant: "outlined", disabled: true }))),
+                    React__default["default"].createElement("div", { style: {
+                            width: '25px',
+                            height: '25px',
+                            marginRight: '10px',
+                            backgroundColor: value,
+                        } }),
+                    value))),
         showPicker && (React__default["default"].createElement("div", { style: { position: 'relative', marginTop: 0 } },
             React__default["default"].createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
                 React__default["default"].createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
@@ -6396,13 +6355,16 @@ function LayerPropertyForm(_a) {
         return null;
     }, [paintProps]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.ListItem, { key: key + '_paintPropForm' },
-            React__default["default"].createElement(material.Paper, { sx: {
-                    padding: '15px',
-                    boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)',
-                    borderRadius: '5px',
-                    width: '100%',
-                } }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); })))));
+        React__default["default"].createElement(material.Paper, { sx: {
+                marginLeft: '-100px',
+                marginRight: '-21px',
+                paddingLeft: '81px',
+                borderRadius: '0px',
+            } },
+            React__default["default"].createElement(material.ListItem, { key: key + '_paintPropForm' },
+                React__default["default"].createElement(material.Box, { sx: {
+                        marginLeft: '61px',
+                    } }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
 }
 
 function LayerListFolder(_a) {
@@ -6431,14 +6393,18 @@ function LayerListFolder(_a) {
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     }, [_visible]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.ListItem, { secondaryAction: React__default["default"].createElement(material.IconButton, { sx: { padding: '4px', marginTop: '-3px' }, edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandLess, null) : React__default["default"].createElement(iconsMaterial.ExpandMore, null)), sx: {
+        React__default["default"].createElement(material.ListItem, { className: 'listItemFolder', sx: {
                 paddingRight: 0,
                 paddingLeft: 0,
                 paddingTop: 0,
                 paddingBottom: '4px',
             } },
             React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                React__default["default"].createElement(material.Checkbox, { sx: { padding: 0 }, disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
+                React__default["default"].createElement(material.IconButton, { sx: {
+                        marginRight: '0px',
+                        padding: '0px',
+                    }, edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandMore, null) : React__default["default"].createElement(iconsMaterial.KeyboardArrowRight, null)),
+                React__default["default"].createElement(material.Checkbox, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, sx: { padding: 0, marginRight: '5px' }, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
                         }
@@ -6448,7 +6414,7 @@ function LayerListFolder(_a) {
                     } })),
             React__default["default"].createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
         React__default["default"].createElement(system.Box, { sx: { display: open ? 'block' : 'none' } },
-            React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: { paddingLeft: '18px' } }, _children))));
+            React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: { marginLeft: '25px' } }, _children))));
 }
 
 function LayerListItemVectorLayer(_a) {
@@ -6587,13 +6553,13 @@ function LayerListItem(_a) {
         return undefined;
     }, [layerComponent]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        !((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: 0, paddingTop: 0, paddingBottom: '4px' }, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
+        !((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: '25px', paddingTop: 0, paddingBottom: '4px' }, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
                 props.buttons,
                 React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
                         setPaintPropsFormVisible(function (current) {
                             return !current;
                         });
-                    }, sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
+                    }, sx: __assign({ marginRight: '0px', padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
                     React__default["default"].createElement(TuneIcon__default["default"], null)),
                 props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(material.IconButton, { edge: "end", "aria-label": "delete", onClick: function () {
@@ -6934,7 +6900,7 @@ var Puller = styles.styled(Box__default["default"])(function (_a) {
 });
 function Sidebar(_a) {
     var drawerPaperProps = _a.drawerPaperProps, drawerHeaderProps = _a.drawerHeaderProps, setOpen = _a.setOpen, props = __rest(_a, ["drawerPaperProps", "drawerHeaderProps", "setOpen"]);
-    var mediaIsMobile = useMediaQuery__default["default"]('(max-width:600px)');
+    var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('sm'); });
     var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         !mediaIsMobile ? (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
@@ -19867,7 +19833,6 @@ var SpeedDial = function () {
         }
     };
     var handleClose = function () { return setOpen(false); };
-    var theme = getTheme('light');
     return (React__default["default"].createElement(Box__default["default"], { sx: {
             height: 330,
             transform: 'translateZ(0px)',
@@ -19878,7 +19843,7 @@ var SpeedDial = function () {
             width: '100px',
             zIndex: '1000',
         } },
-        React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: theme.palette.secondary.main } } })); }))));
+        React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: 'text.primary' } } })); }))));
 };
 SpeedDial.defaultProps = {
     mapId: undefined,