@mapcomponents/react-maplibre 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## [v1.1.0] - 2025-03-21
+
+### Added
+- add dependabot
+
+### Changed
+- update @dnd-kit and actions/setup-node@v2
+- update actions/cache@v2 -> v3 
+- update dependencies
+- update publish workflow node version
+- change Design/ml measure tool
+
+### Fixed
+- fix MlNavigation Zoom
+
 ## [v1.0.11] - 2025-02-14
 
 ### Fixed

package/dist/index.cjs.js

@@ -20,10 +20,12 @@ var Box = require('@mui/material/Box');
 var Grid = require('@mui/material/Grid');
 var PolylineIcon = require('@mui/icons-material/Polyline');
 var PentagonIcon = require('@mui/icons-material/Pentagon');
-var iconsMaterial = require('@mui/icons-material');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var TuneIcon = require('@mui/icons-material/Tune');
 var system = require('@mui/system');
+var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var reactColor = require('react-color');
-var TuneIcon = require('@mui/icons-material/Tune');
 var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
@@ -34,8 +36,6 @@ var utilities = require('@dnd-kit/utilities');
 var CloseIcon = require('@mui/icons-material/Close');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var react = require('@emotion/react');
-var _ = require('@mui/material/');
-var DeleteIcon = require('@mui/icons-material/Delete');
 var ButtonGroup = require('@mui/material/ButtonGroup');
 var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
@@ -43,7 +43,6 @@ var Divider = require('@mui/material/Divider');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
 var Paper = require('@mui/material/Paper');
 var xmldom = require('@xmldom/xmldom');
-var PropTypes = require('prop-types');
 var helpers = require('@turf/helpers');
 var WMSCapabilities = require('wms-capabilities');
 var InfoIcon = require('@mui/icons-material/Info');
@@ -64,6 +63,9 @@ var osm2geojson = require('osm2geojson-lite');
 var topojsonClient = require('topojson-client');
 var externParser = require('@tmcw/togeojson');
 var d3 = require('d3');
+var ArrowCircleDownIcon = require('@mui/icons-material/ArrowCircleDown');
+var ArrowCircleUpIcon = require('@mui/icons-material/ArrowCircleUp');
+var CenterFocusWeakIcon = require('@mui/icons-material/CenterFocusWeak');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
@@ -86,6 +88,7 @@ var DesignServicesIcon = require('@mui/icons-material/DesignServices');
 var PictureAsPdfIcon = require('@mui/icons-material/PictureAsPdf');
 var reactRedux = require('react-redux');
 var toolkit = require('@reduxjs/toolkit');
+var KeyboardArrowRightIcon = require('@mui/icons-material/KeyboardArrowRight');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -2944,7 +2947,7 @@ var MlFollowGps = function (props) {
         isFollowed && userLocationGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && orientationCone && (React.createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && userLocationGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
-        React.createElement(material.Button, { variant: "navtools", sx: {
+        React.createElement(material.Button, { variant: "navtools", "data-testid": "mlFollowGpsBtn", sx: {
                 zIndex: 1002,
                 color: isFollowed
                     ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
@@ -3185,7 +3188,7 @@ function LayerListFolder(_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItemStyled$2, null,
             React.createElement(ListItemIconStyled$1, null,
-                React.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                React.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(ExpandLessIcon, null)),
                 React.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
@@ -3213,7 +3216,7 @@ var ColorPicker = function (_a) {
     var value = (props === null || props === void 0 ? void 0 : props.value) || '';
     return (React.createElement(React.Fragment, null,
         React.createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
-            React.createElement(material.Grid, { xs: 12, item: true },
+            React.createElement(material.Grid, { size: 12 },
                 React.createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
                         minWidth: '100%',
                         padding: '5px',
@@ -3458,7 +3461,8 @@ function LayerListItem(_a) {
     var deletedRef = React.useRef(false);
     var visibleRef = React.useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _u = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) || ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
+    var _u = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
+        ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
         getDefaultPaintPropsByType(((_e = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _e === void 0 ? void 0 : _e.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _u[0], setPaintProps = _u[1];
     var _visible = React.useMemo(function () {
         if (!visible) {
@@ -3514,7 +3518,7 @@ function LayerListItem(_a) {
                         layout: {
                             visibility: _visible ? 'visible' : 'none',
                         },
-                        options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps }))
+                        options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps })),
                     });
             }
         }
@@ -3538,7 +3542,7 @@ function LayerListItem(_a) {
                         return !current;
                     });
                 } },
-                React.createElement(iconsMaterial.Tune, null)))) : undefined },
+                React.createElement(TuneIcon, null)))) : undefined },
         React.createElement(CheckboxListItemIcon, null,
             React.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
                     setLocalVisible(function (val) { return !val; });
@@ -3546,7 +3550,7 @@ function LayerListItem(_a) {
         React.createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
     return (React.createElement(React.Fragment, null,
         props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
-        !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (listContent),
+        !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && listContent,
         _layerComponent,
         !((_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) &&
             Object.keys(paintProps).length > 0 &&
@@ -3558,7 +3562,7 @@ function LayerListItem(_a) {
                             setShowDeletionConfirmationDialog(true);
                         }
                     } },
-                    React.createElement(iconsMaterial.Delete, null)),
+                    React.createElement(DeleteIcon, null)),
                 showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                         if (typeof setLayerState === 'function') {
                             deletedRef.current = true;
@@ -3609,7 +3613,7 @@ function Sidebar(_a) {
                             lg: '350px',
                         }, boxSizing: 'border-box' }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
                 React.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
-                    React.createElement(_.Typography, { variant: "h6" }, props.name),
+                    React.createElement(material.Typography, { variant: "h6" }, props.name),
                     React.createElement(material.IconButton, { onClick: setOpen
                             ? function () {
                                 setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
@@ -3628,7 +3632,7 @@ function Sidebar(_a) {
                         overflow: 'visible',
                     },
                 } }),
-            React.createElement(_.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
+            React.createElement(material.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
                     ? function () {
                         setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
                     }
@@ -3656,7 +3660,7 @@ function Sidebar(_a) {
                         left: 0,
                     } },
                     React.createElement(Puller, null),
-                    React.createElement(_.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
+                    React.createElement(material.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
                 React.createElement(material.Paper, { sx: {
                         px: '15px',
                         pb: '15px',
@@ -3703,14 +3707,16 @@ var MlMultiMeasureTool = function (props) {
         });
     };
     React.useEffect(function () {
-        reload && setReload(false);
-        reload &&
+        if (reload) {
+            setReload(false);
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             measureState &&
-            setMeasureList(function (current) {
-                var newList = __spreadArray([], current, true);
-                newList.push(measureState);
-                return newList;
-            });
+                setMeasureList(function (current) {
+                    var newList = __spreadArray([], current, true);
+                    newList.push(measureState);
+                    return newList;
+                });
+        }
     }, [reload]);
     React.useEffect(function () {
         setMeasureState(undefined);
@@ -3720,7 +3726,7 @@ var MlMultiMeasureTool = function (props) {
             React.createElement(Box, { sx: { flexGrow: 1 } },
                 React.createElement("br", null),
                 React.createElement(Grid, { container: true, spacing: 4, justifyContent: "flex-start" },
-                    React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Grid, { size: 3 },
                         React.createElement(material.Tooltip, { title: "Measure Area" },
                             React.createElement(material.Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'polygon'
@@ -3735,7 +3741,7 @@ var MlMultiMeasureTool = function (props) {
                                     setReload(true);
                                 } },
                                 React.createElement(PentagonIcon, null)))),
-                    React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Grid, { size: 3 },
                         React.createElement(material.Tooltip, { title: "Measure Distance" },
                             React.createElement(material.Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'line'
@@ -3751,7 +3757,7 @@ var MlMultiMeasureTool = function (props) {
                                 } },
                                 React.createElement(PolylineIcon, null)))))),
             React.createElement("br", null),
-            React.createElement(Grid, { item: true, xs: 4 },
+            React.createElement(Grid, { size: 4 },
                 React.createElement(material.FormControl, null,
                     React.createElement(material.InputLabel, { id: "unit-select-label" }, "Unit"),
                     React.createElement(material.Select, { labelId: "unit-select-label", id: "unit-select", value: selectedUnit, label: "Unit", onChange: function (e) {
@@ -3823,56 +3829,24 @@ MlMultiMeasureTool.defaultProps = {
     buttonStyleOverride: {},
 };
 
-var _g;
-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 SvgCompassNeedle = function SvgCompassNeedle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    width: 10,
-    height: 40,
-    viewBox: "0 0 10 40",
-    fill: "none",
-    id: "svg6"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    id: "g14",
-    transform: "translate(0.67544,-1.25e-5)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z",
-    fill: "#cf003d"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z",
-    fill: "#d3dcf0"
-  }))));
+var CompassBackground = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
+    return (React.createElement("svg", { width: "52", height: "53", viewBox: "0 0 52 53", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
+        title && React.createElement("title", null, title),
+        React.createElement("circle", { cx: "26.0001", cy: "26.1843", r: "24", fill: "white", stroke: "#009EE0", strokeWidth: "2" }),
+        React.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" }),
+        React.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" }),
+        React.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" }),
+        React.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 _circle, _path$1, _path2$1, _path3, _path4;
-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 SvgCompassBackground = function SvgCompassBackground(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    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$1 || (_path$1 = /*#__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$1 || (_path2$1 = /*#__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 CompassNeedle = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
+    return (React.createElement("svg", { width: "10", height: "40", viewBox: "0 0 10 40", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
+        title && React.createElement("title", null, title),
+        React.createElement("g", { transform: "translate(0.67544,-1.25e-5)" },
+            React.createElement("path", { d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z", fill: "#cf003d" }),
+            React.createElement("path", { d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z", fill: "#d3dcf0" }))));
 };
 
 var BoxStyled$2 = material.styled(material.Box)(function (_a) {
@@ -3978,9 +3952,9 @@ var MlNavigationCompass = function (props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
             React.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
-                React.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
+                React.createElement(CompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
                 React.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
-                    React.createElement(SvgCompassNeedle, { style: {
+                    React.createElement(CompassNeedle, { style: {
                             transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
                         } }))))));
 };
@@ -4294,20 +4268,11 @@ MlLayerMagnify.defaultProps = {
     magnifierStyle: {},
 };
 
-var _path, _path2;
-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 SvgIcononlyarrow = function SvgIcononlyarrow(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    viewBox: "0 0 47 30",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
-    fill: "#009EE0"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z",
-    fill: "#009EE0"
-  })));
+var SwipeIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style, color = _a.color;
+    return (React.createElement("svg", { viewBox: "0 0 47 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style, color: color },
+        React.createElement("path", { d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z", fill: "#009EE0" }),
+        React.createElement("path", { d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z", fill: "#009EE0" })));
 };
 
 /**
@@ -4401,7 +4366,7 @@ var MlLayerSwipe = function (props) {
         };
     }, [mapContext]);
     return (React.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
-        React.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
+        React.createElement(SwipeIcon, { color: "#0066ff", style: {
                 width: '65px',
                 height: '65px',
                 justifyContent: 'center',
@@ -5588,12 +5553,6 @@ var MlShareMapState = function (props) {
 MlShareMapState.defaultProps = {
     mapId: undefined,
 };
-MlShareMapState.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-};
 
 function getElevationData(_geojsonInfo, elevationFactor) {
     var createStep = function (x, y, z, x2, y2) {
@@ -5939,12 +5898,6 @@ var MlWmsFeatureInfoPopup = function (props) {
 MlWmsFeatureInfoPopup.defaultProps = {
     mapId: undefined,
 };
-MlWmsFeatureInfoPopup.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-};
 
 var defaultProps = {
     visible: true,
@@ -6056,51 +6009,6 @@ var MlWmsLayer = function (props) {
     return React.createElement(React.Fragment, null);
 };
 MlWmsLayer.defaultProps = __assign({}, defaultProps);
-MlWmsLayer.propTypes = {
-    /**
-     * WMS URL
-     */
-    url: PropTypes.string.isRequired,
-    /**
-     * URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object.
-     */
-    urlParameters: PropTypes.shape({
-        layers: PropTypes.string.isRequired,
-        bbox: PropTypes.string,
-        format: PropTypes.string,
-        service: PropTypes.string,
-        version: PropTypes.string,
-        request: PropTypes.string,
-        srs: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-    }),
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-    /**
-     * MapLibre attribution shown in the bottom right of the map, if this layer is visible
-     */
-    attribution: PropTypes.string,
-    /**
-     * Object that is passed to the MapLibre.addLayer call as config option parameter
-     */
-    layerOptions: PropTypes.object,
-    /**
-     * Object that is passed to the MapLibre.addSource call as config option parameter
-     */
-    sourceOptions: PropTypes.object,
-    /**
-     * Id of an existing layer in the mapLibre instance to help specify the layer order
-     * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-     */
-    insertBeforeLayer: PropTypes.string,
-    /**
-     * Sets layer "visibility" property to "visible" if true or "none" if false
-     */
-    visible: PropTypes.bool,
-};
 
 function useWms(props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
@@ -6412,7 +6320,7 @@ var MlWmsLoader = function (props) {
                     }
                 }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
                 React.createElement(InfoIcon, null))),
-            React.createElement(IconButton, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React.createElement(iconsMaterial.ExpandLess, null) : React.createElement(iconsMaterial.ExpandMore, null)),
+            React.createElement(IconButton, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React.createElement(ExpandLessIcon, null) : React.createElement(ExpandMoreIcon, null)),
             props.showDeleteButton && (React.createElement(React.Fragment, null,
                 React.createElement(IconButton, { "aria-label": "delete", edge: "end", onClick: function () {
                         if (typeof props.onConfigChange === 'function') {
@@ -6776,9 +6684,8 @@ function TemporalControllerPlayer(props) {
                 flexShrink: 0,
                 '& .MuiDrawer-paper': mediaIsMobile ? mobileScreenBoxStyle : bigScreenBoxStyle,
             } },
-            React.createElement(material.Grid, { container: true },
-                mediaIsMobile ? React.createElement(React.Fragment, null) : React.createElement(material.Grid, { item: true, xs: 3 }),
-                React.createElement(material.Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
+            React.createElement(material.Grid, { container: true, alignItems: "center", justifyContent: "space-between" },
+                React.createElement(material.Grid, { item: true, xs: 12, sm: 10, textAlign: "center" },
                     React.createElement(material.Button, { onClick: handleFastRewind },
                         React.createElement(FastRewindIcon, null)),
                     React.createElement(material.Button, { onClick: handleStop },
@@ -6786,8 +6693,11 @@ function TemporalControllerPlayer(props) {
                     React.createElement(material.Button, { onClick: handlePlayPause }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayArrowIcon, null)),
                     React.createElement(material.Button, { onClick: handleFastForward },
                         React.createElement(FastForwardIcon, null))),
-                props.display && !mediaIsMobile && (React.createElement(material.Grid, { item: true, xs: 3 },
-                    React.createElement(material.Typography, { variant: 'h5', textAlign: 'right', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
+                props.display && !mediaIsMobile && (
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                React.createElement(material.Grid, { item: true, xs: 12, sm: 5, textAlign: "right" },
+                    React.createElement(material.Typography, { variant: 'h5', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
             React.createElement(material.Slider, { sx: {
                     position: 'flex',
                     width: '95%',
@@ -7791,9 +7701,6 @@ var SimpleDataProvider = function (props) {
     };
     return (React.createElement(SimpleDataContextProvider, { value: value }, props.children));
 };
-SimpleDataProvider.propTypes = {
-    children: PropTypes.node.isRequired,
-};
 
 var IconButtonStyled$1 = material.styled(material.IconButton)({
     padding: '4px',
@@ -7901,13 +7808,13 @@ function LayerListItemFactory(props) {
                                     React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                             layerContext.moveDown(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                        React.createElement(ArrowCircleDownIcon, null)),
                                     React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                             layerContext.moveUp(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                        React.createElement(ArrowCircleUpIcon, null)),
                                     React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                        React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                        React.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
                                     return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                         var _layers = __spreadArray([], current, true);
                                         if (layerConfig === false) {
@@ -7947,26 +7854,26 @@ function LayerListItemFactory(props) {
                                         React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                            React.createElement(ArrowCircleDownIcon, null)),
                                         React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                            React.createElement(ArrowCircleUpIcon, null)),
                                         React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))) }))));
+                                            React.createElement(CenterFocusWeakIcon, null))) }))));
                         case 'vt':
                             return (React.createElement(React.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
                                 React.createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || (layer === null || layer === void 0 ? void 0 : layer.type) + ' layer' || 'unnamed layer', layerComponent: React.createElement(MlVectorTileLayer, { layers: ((_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.layers) || [], key: layer.id, mapId: layer === null || layer === void 0 ? void 0 : layer.config.mapId, sourceOptions: (_d = layer === null || layer === void 0 ? void 0 : layer.config) === null || _d === void 0 ? void 0 : _d.sourceOptions, layerId: layer.id, url: (_e = layer === null || layer === void 0 ? void 0 : layer.config) === null || _e === void 0 ? void 0 : _e.url }), buttons: React.createElement(React.Fragment, null,
                                         React.createElement(IconButtonStyled$1, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                            React.createElement(ArrowCircleDownIcon, null)),
                                         React.createElement(IconButtonStyled$1, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                            React.createElement(ArrowCircleUpIcon, null)),
                                         React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                            React.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
                                         return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                             var _layers = __spreadArray([], current, true);
                                             if (layerConfig === false) {
@@ -21706,18 +21613,18 @@ function LayerTreeListItem(props) {
                         React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveDown(layer.uuid);
                             } },
-                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                            React.createElement(ArrowCircleDownIcon, null)),
                         React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveUp(layer.uuid);
                             } },
-                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                            React.createElement(ArrowCircleUpIcon, null)),
                         layer.configurable && (React.createElement(React.Fragment, null,
                             React.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
                                     setPaintPropsFormVisible(function (current) {
                                         return !current;
                                     });
                                 } },
-                                React.createElement(iconsMaterial.Tune, null))))) },
+                                React.createElement(TuneIcon, null))))) },
                     React.createElement(CheckboxListItemIcon, null,
                         React.createElement(CheckboxStyled, { checked: visible, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible); } })),
                     React.createElement(material.ListItemText, { variant: "layerlist", primary: layer.name || '', secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }),
@@ -21725,7 +21632,7 @@ function LayerTreeListItem(props) {
                 layer.configurable && paintPropsFormVisible && (React.createElement(React.Fragment, null,
                     props.showDeleteButton && (React.createElement(React.Fragment, null,
                         React.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () { } },
-                            React.createElement(iconsMaterial.Delete, null)),
+                            React.createElement(DeleteIcon, null)),
                         showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                                 setShowDeletionConfirmationDialog(false);
                             }, onCancel: function () {
@@ -21737,7 +21644,7 @@ function LayerTreeListItem(props) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
                     React.createElement(ListItemIconStyled, null,
-                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(KeyboardArrowRightIcon, null)),
                         React.createElement(CheckboxListItemIcon, null,
                             React.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible === false, onClick: function () { var _a; return handleToggleVisibility((_a = layer.visible) !== null && _a !== void 0 ? _a : false); } }))),
                     React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
@@ -21767,7 +21674,7 @@ function LayerTreeListItem(props) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx) },
                     React.createElement(ListItemIconStyled, null,
-                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(KeyboardArrowRightIcon, null)),
                         React.createElement(CheckboxListItemIcon, null,
                             React.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible, onClick: function () { return handleToggleVisibility(layer.visible ? layer.visible : false); } }))),
                     React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),