@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/map/components/features/layers/MapLayerGroup.js

@@ -13,19 +13,23 @@ const MapLayerGroup = (props) => {
     const [group, setGroup] = (0, react_1.useState)();
     const [childApi, setChildApi] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        var _a;
         const newGroup = new H.map.Group({
             min: minZoom,
             max: maxZoom,
         });
         newGroup.setVisibility(isVisible);
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        api.map?.addObject(newGroup);
         setGroup(newGroup);
-        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        setChildApi({
+            ...context,
+            api: {
+                ...api,
+                group: newGroup,
+            },
+        });
         return () => {
-            var _a, _b;
-            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
-                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            if (api.map?.getObjects().includes(newGroup)) {
+                api.map?.removeObject(newGroup);
             }
             newGroup.dispose();
         };
@@ -35,6 +39,6 @@ const MapLayerGroup = (props) => {
             group.setVisibility(isVisible);
         }
     }, [isVisible]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && (0, jsx_runtime_1.jsx)(MapContext_1.MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'MapLayerGroup', children: childApi && (0, jsx_runtime_1.jsx)(MapContext_1.MapContext.Provider, { value: childApi, children: children }) }));
 };
 exports.default = MapLayerGroup;

package/lib/es/components/map/components/features/layers/MapOverlayLayers.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
 const constants_1 = require("../../constants");
 const IncidentsLayer_1 = tslib_1.__importDefault(require("./overlayLayers/IncidentsLayer"));

package/lib/es/components/map/components/features/layers/MarkerLayer.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const ClusterLayer_1 = tslib_1.__importDefault(require("./clustering/ClusterLayer"));
 const clustering_1 = require("../../../utils/clustering");
 const MapContext_1 = require("../../MapContext");
@@ -12,10 +10,13 @@ const MapContext_1 = require("../../MapContext");
  */
 const MarkerLayer = (props) => {
     const mapContext = (0, MapContext_1.useMapContext)();
-    const { simpleTheme, clusterDissolvable = true } = props, rest = tslib_1.__rest(props, ["simpleTheme", "clusterDissolvable"]);
+    const { simpleTheme, clusterDissolvable = true, ...rest } = props;
     // Norbert: Not an ideal solution
     const showCluster = !clusterDissolvable || mapContext.showCluster;
-    const newProps = Object.assign({ clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }, rest);
-    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
+    const newProps = {
+        clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme),
+        ...rest,
+    };
+    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, { ...newProps, minWeight: showCluster ? undefined : 1000000000 });
 };
 exports.default = MarkerLayer;

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { EventListenerMap } from '../../../../utils/eventHandling';
 export type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
 export type ClusterTheme = H.clustering.ITheme;

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -46,7 +46,6 @@ const ClusterLayer = (props) => {
         //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>
         //     )
         // );
-        var _a;
         const clusterProviderOptions = {
             clusteringOptions: {
                 strategy: getClusterStrategy(clusterStrategy),
@@ -97,11 +96,10 @@ const ClusterLayer = (props) => {
         };
         const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);
         const objectLayer = new H.map.layer.ObjectLayer(newProvider);
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(objectLayer);
+        api.map?.addLayer(objectLayer);
         setProvider(newProvider);
         return () => {
-            var _a;
-            (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(objectLayer);
+            api.map?.removeLayer(objectLayer);
             objectLayer.dispose();
             newProvider.dispose();
         };

package/lib/es/components/map/components/features/layers/clustering/SimpleClusterLayer.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const ClusterLayer_1 = tslib_1.__importDefault(require("./ClusterLayer"));
 const clustering_1 = require("../../../../utils/clustering");
 const SimpleClusterLayer = (props) => {
-    const { simpleTheme } = props, rest = tslib_1.__rest(props, ["simpleTheme"]);
-    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, rest, { clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }));
+    const { simpleTheme, ...rest } = props;
+    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, { ...rest, clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) });
 };
 exports.default = SimpleClusterLayer;

package/lib/es/components/map/components/features/layers/overlayLayers/IncidentsLayer.js

@@ -108,7 +108,6 @@ const IncidentsLayer = () => {
                         // Bind cluster data to the marker:
                         noiseMarker.setData(noisePoint);
                         noiseMarker.addEventListener('pointerenter', (event) => {
-                            var _a;
                             const tooltipContent = event.target.getData().getData().tooltipContent;
                             const point = event.target.getData().getPosition();
                             // Define the bubble arrow position
@@ -118,7 +117,7 @@ const IncidentsLayer = () => {
                             const bubble = new H.ui.InfoBubble(map.screenToGeo(screenPosition.x, screenPosition.y), {
                                 content: tooltipContent,
                             });
-                            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.addBubble(bubble);
+                            api.ui?.addBubble(bubble);
                         });
                         noiseMarker.addEventListener('pointerleave', (event) => {
                             clearBubbles();
@@ -128,11 +127,10 @@ const IncidentsLayer = () => {
                 },
             });
             fetchIncidents = () => {
-                var _a;
                 clearBubbles();
                 clusteredDataProvider.setDataPoints(dataPoints);
                 // HERE Maps API for JavaScript 3.1
-                const bbox = (_a = map.getViewModel().getLookAtData().bounds) === null || _a === void 0 ? void 0 : _a.getBoundingBox();
+                const bbox = map.getViewModel().getLookAtData().bounds?.getBoundingBox();
                 const center = map.getViewModel().getLookAtData().position;
                 if (bbox && center) {
                     getTrafficIncidents(clusteredDataProvider, bbox, center, language);
@@ -142,25 +140,23 @@ const IncidentsLayer = () => {
             fetchIncidents();
             // Re-fetch incidents when map view changes as it shows a different part of the map
             // where incidents may become visible or hidden
-            map === null || map === void 0 ? void 0 : map.addEventListener('mapviewchangeend', fetchIncidents);
+            map?.addEventListener('mapviewchangeend', fetchIncidents);
             incidentsLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
             map.addLayer(incidentsLayer);
             console.log(`add layer - ${constants_1.MAP_LAYER_INCIDENTS}`);
         }
         return () => {
-            var _a;
             if (incidentsLayer) {
-                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(incidentsLayer);
+                api.map?.removeLayer(incidentsLayer);
                 incidentsLayer.dispose();
                 console.log(`remove layer - ${constants_1.MAP_LAYER_INCIDENTS}`);
             }
             if (fetchIncidents) {
-                map === null || map === void 0 ? void 0 : map.removeEventListener('mapviewchangeend', fetchIncidents);
+                map?.removeEventListener('mapviewchangeend', fetchIncidents);
             }
         };
     }, [api.map]);
     const getTrafficIncidents = (clusteredDataProvider, bbox, center, lang) => {
-        var _a;
         // NOTE: API traffic doesn't provide information for a bounding box got from a zoom level lower than 11
         if (map && map.getZoom() < 11) {
             console.log('Too much incidents to show, please zoom in');
@@ -171,7 +167,7 @@ const IncidentsLayer = () => {
             'https://data.traffic.hereapi.com/v7/incidents?in=',
             `bbox:${area}`,
             '&locationReferencing=shape',
-            `&apiKey=${(_a = api.credentials) === null || _a === void 0 ? void 0 : _a.apikey}`,
+            `&apiKey=${api.credentials?.apikey}`,
         ].join('');
         fetch(url)
             .then(response => response.json())
@@ -258,17 +254,18 @@ const IncidentsLayer = () => {
                 return getIncidentClosedSvg(color);
             case 'construction':
                 return getIncidentConstructionSvg(color);
-            case 'other' && noisePoint.getData().roadClosed:
-                return getIncidentClosedSvg(color);
+            case 'other':
+                if (noisePoint.getData().roadClosed) {
+                    return getIncidentClosedSvg(color);
+                }
+                return getIncidentGenericSvg(color);
             default:
                 return getIncidentGenericSvg(color);
         }
     };
     const clearBubbles = () => {
-        var _a;
-        (_a = api.ui) === null || _a === void 0 ? void 0 : _a.getBubbles().forEach(bubble => {
-            var _a;
-            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.removeBubble(bubble);
+        api.ui?.getBubbles().forEach(bubble => {
+            api.ui?.removeBubble(bubble);
         });
     };
     return null;

package/lib/es/components/map/components/features/layers/overlayLayers/Layer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { MapApi } from '../../../../utils/mapTypes';
 export type LayerProps = {
     id: string;

package/lib/es/components/map/components/features/layers/overlayLayers/Layer.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const MapContext_1 = require("../../../MapContext");
-require("../../../constants");
 const Layer = (props) => {
-    var _a;
     const { id, createLayer } = props;
     const [currentLayers, setCurrentLayers] = (0, react_1.useState)([]);
     const currentLayerRef = (0, react_1.useRef)([]);
@@ -20,10 +18,9 @@ const Layer = (props) => {
     //     currentLayerRef.current = [];
     //     // setPreviousBaseLayer(baseLayer);
     // }, [baseLayer]);
-    const mapLayers = (_a = api.map) === null || _a === void 0 ? void 0 : _a.getLayers();
-    console.log({ mapLayers: mapLayers === null || mapLayers === void 0 ? void 0 : mapLayers.asArray() });
+    const mapLayers = api.map?.getLayers();
+    console.log({ mapLayers: mapLayers?.asArray() });
     (0, react_1.useEffect)(() => {
-        var _a;
         const newLayer = createLayer(api, enableWebGL, baseLayer, language);
         // console.log({ currentLayers: currentLayerRef.current });
         // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });
@@ -40,15 +37,14 @@ const Layer = (props) => {
             // console.log({ mapLayers: mapLayers?.asArray() });
             // const hasLayer = mapLayers?.asArray().includes(newLayer);
             // console.log({ hasLayer });
-            (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(newLayer);
+            api.map?.addLayer(newLayer);
             // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);
             // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];
             // console.log({ currentLayers: currentLayerRef.current });
         }
         return () => {
-            var _a;
             if (newLayer) {
-                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(newLayer);
+                api.map?.removeLayer(newLayer);
                 newLayer.dispose();
                 console.log(`remove layer - ${id}`);
                 // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);

package/lib/es/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.js

@@ -2,17 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const constants_1 = require("../../../constants");
 const Layer_1 = tslib_1.__importDefault(require("./Layer"));
 const MapContext_1 = require("../../../MapContext");
 const rendering_1 = require("../../../../utils/rendering");
 // Layer for rendering truck road signs
 const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
-    var _a;
     // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+    const trafficTileService = api.platform?.getRasterTileService({
         resource: 'blank',
         format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
         queryParams: {
@@ -35,6 +32,6 @@ const RoadRestrictionLayer = (props) => {
     const { enableWebGL, baseLayer, devicePixelRatio } = (0, MapContext_1.useMapContext)();
     const engineType = (0, rendering_1.isVectorBased)(enableWebGL, baseLayer) ? constants_1.ENGINE_TYPE_HARP : constants_1.ENGINE_TYPE_P2D;
     const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
-    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, props, { createLayer: restrictionLayerCreator }));
+    return (0, jsx_runtime_1.jsx)(Layer_1.default, { ...props, createLayer: restrictionLayerCreator });
 };
 exports.default = RoadRestrictionLayer;

package/lib/es/components/map/components/features/layers/overlayLayers/TrafficLayer.js

@@ -2,24 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const constants_1 = require("../../../constants");
 const Layer_1 = tslib_1.__importDefault(require("./Layer"));
 const MapContext_1 = require("../../../MapContext");
 const rendering_1 = require("../../../../utils/rendering");
 const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
-    var _a, _b;
     // Traffic
     const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');
     // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+    const trafficTileService = api.platform?.getRasterTileService({
         baseUrl: baseTrafficUrl,
         format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
         path: 'v3',
         resource: 'flow',
         queryParams: {
-            apikey: (_b = api.credentials) === null || _b === void 0 ? void 0 : _b.apikey,
+            apikey: api.credentials?.apikey,
             lang: language,
             ppi: 400,
             style: 'explore.day',
@@ -34,11 +31,10 @@ const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
     return trafficTileLayer;
 };
 const createVectorTrafficLayer = (api, useWebGL, baseLayerName) => {
-    var _a;
     // @ts-ignore-next-line
     const providerTrafficFlow = new H.service.trafficVectorTile.Provider(
     // @ts-ignore-next-line
-    (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getTrafficVectorTileService({ layer: 'flow' }), 
+    api.platform?.getTrafficVectorTileService({ layer: 'flow' }), 
     // @ts-ignore-next-line
     new H.map.render.harp.Style({}), { engineType: constants_1.ENGINE_TYPE_HARP });
     // @ts-ignore-next-line:
@@ -50,6 +46,6 @@ const TrafficLayer = (props) => {
     const layerCreator = (0, rendering_1.isVectorBased)(mapContext.enableWebGL, mapContext.baseLayer)
         ? createVectorTrafficLayer
         : createRasterTrafficLayer;
-    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, props, { createLayer: layerCreator }));
+    return (0, jsx_runtime_1.jsx)(Layer_1.default, { ...props, createLayer: layerCreator });
 };
 exports.default = TrafficLayer;

package/lib/es/components/map/components/features/settings/MapSettingsItem.js

@@ -7,8 +7,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const MapSettingsItem = (props) => {
     const { onClick = noop_1.default, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
-    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
-    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
+    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
     const defaultIcon = activeIcon &&
         react_1.default.cloneElement(activeIcon, {
             className: activeIconClassNames,
@@ -18,6 +18,6 @@ const MapSettingsItem = (props) => {
             className: inactiveIconClassNames,
         });
     const mapSettingsItemClassNames = (0, classnames_1.default)('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: mapSettingsItemClassNames, onClick: onClick }, { children: [label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'margin-left--5' }, { children: [highlightedIcon, defaultIcon] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 line-height-16 padding-right-5' }, { children: label }))] })), !label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [highlightedIcon, defaultIcon] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: mapSettingsItemClassNames, onClick: onClick, children: [label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'margin-left--5', children: [highlightedIcon, defaultIcon] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex-1-1 line-height-16 padding-right-5', children: label })] })), !label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [highlightedIcon, defaultIcon] }))] }));
 };
 exports.default = MapSettingsItem;

package/lib/es/components/map/components/features/settings/MapSettingsPanel.js

@@ -2,16 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const MapSettingsPanel = (props) => {
     const { className = '', children } = props;
     const panelClassNames = (0, classnames_1.default)('MapSettingsPanel', className);
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
             duration: 0.15,
             ease: 'easeInOut',
-        }, className: panelClassNames }, { children: children })));
+        }, className: panelClassNames, children: children }));
 };
 exports.default = MapSettingsPanel;

package/lib/es/components/map/components/features/settings/MapSettingsTile.js

@@ -16,10 +16,10 @@ const deviceUtils_1 = require("../../../../../utils/deviceUtils");
 const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
 const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
 const getComponentWithTooltip = (component, tooltip) => {
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: Tooltip_1.default.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: Tooltip_1.default.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { id: 'tooltip', width: 'auto', children: tooltip }), children: component }));
 };
 const MapSettingsTile = (props) => {
-    const { onToggle = noop_1.default, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip } = props, remainingProps = tslib_1.__rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "items", "className", "buttonClassName", "tooltip"]);
+    const { onToggle = noop_1.default, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip, ...remainingProps } = props;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -51,7 +51,7 @@ const MapSettingsTile = (props) => {
             : [],
     });
     const dropdownWrapperRef = (0, useClickOutside_1.default)((event) => {
-        if (toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.contains(event.target)) {
+        if (toggleRef?.contains(event.target)) {
             return;
         }
         if (isOpen) {
@@ -61,20 +61,20 @@ const MapSettingsTile = (props) => {
     });
     const wrapperClasses = (0, classnames_1.default)('MapSettingsTile', className);
     const buttonClasses = (0, classnames_1.default)('MapSettingsButton', isOpen && 'active', buttonClassName);
-    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
-    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
-    const button = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: buttonClasses, onClick: handleToggle }, { children: [activeIcon &&
+    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
+    const button = ((0, jsx_runtime_1.jsxs)("div", { className: buttonClasses, onClick: handleToggle, children: [activeIcon &&
                 react_1.default.cloneElement(activeIcon, {
                     className: activeIconClassNames,
                 }), inactiveIcon &&
                 react_1.default.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
-                })] })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [!items && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'overflow-hidden' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && panel && panel }) }))] })), items && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'MapSettingsTile-inner position-relative', ref: setToggleRef }, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'dropdown', ref: dropdownWrapperRef }, { children: isOpen && items && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: Object.assign(Object.assign({}, styles.popper), { minWidth: '180px' }) }, attributes.popper, { children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, ref: buttonRef, ...remainingProps, children: [!items && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)("div", { className: 'overflow-hidden', children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && panel && panel }) })] })), items && ((0, jsx_runtime_1.jsxs)("div", { className: 'MapSettingsTile-inner position-relative', ref: setToggleRef, children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)("div", { className: 'dropdown', ref: dropdownWrapperRef, children: isOpen && items && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: { ...styles.popper, minWidth: '180px' }, ...attributes.popper, children: items?.map((item, index) => {
                                     if (item.type.isMapSettingsDropdownHeader) {
                                         return item;
                                     }
                                     return (0, jsx_runtime_1.jsx)(MenuItem_1.default, { value: item }, index);
-                                }) }))) })) })] })))] })));
+                                }) })) }) })] }))] }));
 };
 exports.default = MapSettingsTile;

package/lib/es/components/map/components/features/settings/ZoomButtons.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const MapIcon_1 = require("../../../icons/MapIcon");
 const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
     const buttonClasses = (0, classnames_1.default)('ZoomButtons');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: buttonClasses }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapSettingsTile', onClick: onZoomIn }, { children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) })), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTileSpacer' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapSettingsTile', onClick: onZoomOut }, { children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: buttonClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTile', onClick: onZoomIn, children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTileSpacer' }), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTile', onClick: onZoomOut, children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) })] }));
 };
 exports.default = ZoomButtons;

package/lib/es/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.js

@@ -2,16 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const union_1 = tslib_1.__importDefault(require("lodash/fp/union"));
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapAdditionalLayerSettings = (props) => {
-    const { activeBuiltinLayers = [], activeLayers = [], layers = [] } = props, remainingProps = tslib_1.__rest(props, ["activeBuiltinLayers", "activeLayers", "layers"]);
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;
     const allActiveLayer = (0, union_1.default)(activeBuiltinLayers, activeLayers);
     const isActive = !(0, isEmpty_1.default)(allActiveLayer);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapAdditionalLayerSettings', isActive: !(0, isEmpty_1.default)(allActiveLayer), activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers }, remainingProps)));
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapAdditionalLayerSettings', isActive: !(0, isEmpty_1.default)(allActiveLayer), activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers, ...remainingProps }));
 };
 exports.default = MapAdditionalLayerSettings;

package/lib/es/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
 const MapSettingsPanel_1 = tslib_1.__importDefault(require("../MapSettingsPanel"));
@@ -12,7 +10,7 @@ const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"))
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapSettingsDropdownHeader_1 = tslib_1.__importDefault(require("../items/MapSettingsDropdownHeader"));
 const MapClusterSettings = (props) => {
-    const { showCluster = true, onShowClusterChange = noop_1.default, onToggle = noop_1.default, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText } = props, remainingProps = tslib_1.__rest(props, ["showCluster", "onShowClusterChange", "onToggle", "clusterEnabledLabel", "clusterDisabledLabel", "dropdownHeaderText"]);
+    const { showCluster = true, onShowClusterChange = noop_1.default, onToggle = noop_1.default, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText, ...remainingProps } = props;
     const handleShowCluster = (setShowCluster) => {
         onShowClusterChange(setShowCluster);
         onToggle(setShowCluster);
@@ -21,6 +19,6 @@ const MapClusterSettings = (props) => {
     const dropdownHeader = dropdownHeaderText && ((0, jsx_runtime_1.jsx)(MapSettingsDropdownHeader_1.default, { label: dropdownHeaderText }, 'mapClusterDropdownHeader'));
     const enableClusterButtons = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }), label: clusterEnabledLabel }, 'enableClusterButtons'));
     const disableClusterButton = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }), label: clusterDisabledLabel }, 'disableClusterButton'));
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_INACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_INACTIVE }), items: hasLabels ? (0, compact_1.default)([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableClusterButtons, disableClusterButton] })) }, remainingProps)));
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapClusterSettings', isActive: showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_INACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_INACTIVE }), items: hasLabels ? (0, compact_1.default)([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableClusterButtons, disableClusterButton] })), ...remainingProps }));
 };
 exports.default = MapClusterSettings;

package/lib/es/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -11,21 +11,17 @@ const MapSettingsPanel_1 = tslib_1.__importDefault(require("../MapSettingsPanel"
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapLayerSettings = (props) => {
-    var _a;
-    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["activeBuiltinLayers", "activeLayers", "layers", "onMapLayerChange"]);
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop_1.default, ...remainingProps } = props;
     const allActiveLayer = (0, union_1.default)(activeBuiltinLayers, activeLayers);
-    const hasLabels = !!((_a = layers.at(0)) === null || _a === void 0 ? void 0 : _a.props.label);
+    const hasLabels = !!layers.at(0)?.props.label;
     const isActive = !(0, isEmpty_1.default)(allActiveLayer);
     // Inject onMapLayerChange from the MapContext which will be handled
     // in the main Map component.
-    const enrichedLayers = (0, map_1.default)(layer => {
-        var _a;
-        return react_1.default.cloneElement(layer, {
-            key: (_a = layer === null || layer === void 0 ? void 0 : layer.key) !== null && _a !== void 0 ? _a : `MapLayerSettings_${crypto.randomUUID()}`,
-            activeBuiltinLayers,
-            onMapLayerChange,
-        });
-    }, layers);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && (0, jsx_runtime_1.jsx)(MapSettingsPanel_1.default, { children: enrichedLayers }) }, remainingProps)));
+    const enrichedLayers = (0, map_1.default)(layer => react_1.default.cloneElement(layer, {
+        key: layer?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,
+        activeBuiltinLayers,
+        onMapLayerChange,
+    }), layers);
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && (0, jsx_runtime_1.jsx)(MapSettingsPanel_1.default, { children: enrichedLayers }), ...remainingProps }));
 };
 exports.default = MapLayerSettings;

package/lib/es/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -12,7 +12,7 @@ const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"))
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapSettingsDropdownHeader_1 = tslib_1.__importDefault(require("../items/MapSettingsDropdownHeader"));
 const MapTypeSettings = (props) => {
-    const { mapType, onMapTypeChange = noop_1.default, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText } = props, remainingProps = tslib_1.__rest(props, ["mapType", "onMapTypeChange", "enableNightMap", "defaultTypeLabel", "truckTypeLabel", "terrainTypeLabel", "satelliteTypeLabel", "nightTypeLabel", "dropdownHeaderText"]);
+    const { mapType, onMapTypeChange = noop_1.default, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText, ...remainingProps } = props;
     const type = (0, react_1.useMemo)(() => ({
         isDefault: mapType === constants_1.MAP_TYPE_DEFAULT,
         isFleetStyle: mapType === constants_1.MAP_TYPE_FLEET_STYLE,
@@ -44,7 +44,7 @@ const MapTypeSettings = (props) => {
     const mapTypeTruck = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_INACTIVE }), label: truckTypeLabel }, 'MapTypeFlatTruck'));
     const mapTypeDefault = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_INACTIVE }), label: defaultTypeLabel }, 'MapTypeFlat'));
     const hasLabels = !!defaultTypeLabel || !!truckTypeLabel || !!terrainTypeLabel || !!satelliteTypeLabel || !!nightTypeLabel;
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
             ? (0, compact_1.default)([
                 dropdownHeader,
                 mapTypeNight,
@@ -53,6 +53,6 @@ const MapTypeSettings = (props) => {
                 mapTypeTruck,
                 mapTypeDefault,
             ])
-            : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })) }, remainingProps)));
+            : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })), ...remainingProps }));
 };
 exports.default = MapTypeSettings;

package/lib/es/components/map/components/features/settings/buttons/MapBoundingBoxButton.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapBoundingBoxButton = (props) => {
-    const { isActive = false, onToggle } = props, remainingProps = tslib_1.__rest(props, ["isActive", "onToggle"]);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapBoundingBoxButton', isActive: isActive, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.BOUNDING_BOX_ACTIVE, className: 'MapBoundingBoxButtonIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.BOUNDING_BOX_INACTIVE, className: 'MapBoundingBoxButtonIconInactive' }), onToggle: onToggle }, remainingProps)));
+    const { isActive = false, onToggle, ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapBoundingBoxButton', isActive: isActive, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.BOUNDING_BOX_ACTIVE, className: 'MapBoundingBoxButtonIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.BOUNDING_BOX_INACTIVE, className: 'MapBoundingBoxButtonIconInactive' }), onToggle: onToggle, ...remainingProps }));
 };
 exports.default = MapBoundingBoxButton;

package/lib/es/components/map/components/features/settings/buttons/MapCenterMarkerButton.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapCenterMarkerButton = (props) => {
-    const { isActive = false, onToggle } = props, remainingProps = tslib_1.__rest(props, ["isActive", "onToggle"]);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle }, remainingProps)));
+    const { isActive = false, onToggle, ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, { className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle, ...remainingProps }));
 };
 exports.default = MapCenterMarkerButton;