@longline/aqua-ui 1.0.339 → 1.0.340

package/inputs/Textarea/Textarea.js

@@ -34,14 +34,15 @@ var TextareaBase = function (props) {
         }
     };
     var toggleFullscreen = function () {
+        var _a;
         if (document.fullscreenElement) {
             document.exitFullscreen();
         }
         else {
-            textareaRef.current.requestFullscreen();
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
         }
     };
-    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex, style: props.style },
         React.createElement("textarea", { "data-testid": props['data-testid'] || "Textarea", className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
         props.fullscreen &&
             React.createElement(FullscreenToggle, { onClick: toggleFullscreen },

package/map/Map/Map.d.ts

@@ -128,8 +128,8 @@ interface IMapProps extends ITestable {
      */
     onMouseLeave?: (e: MapMouseEvent) => void;
 }
-declare const ViewStateContext: React.Context<ViewState>;
-declare const useViewState: () => ViewState;
+declare const ViewStateContext: React.Context<ViewState | null>;
+declare const useViewState: () => ViewState | null;
 declare const Map: {
     ({ longitude, latitude, zoom, pitch, bearing, logoPosition, interactiveLayerIds, noRotate, preserveDrawingBuffer, minZoom, maxZoom, fadeDuration, doubleClickZoom, ...props }: IMapProps): React.JSX.Element;
     displayName: string;

package/map/Map/Map.js

@@ -74,21 +74,24 @@ var useViewState = function () {
  * The map's current ViewState is tracked in local state, and fed into a context provider.
  * The ViewState can be retrieved by child components using `useViewState()`.
  */
+// Default view-state prop values, referenced both by the MapBase fallbacks and
+// the Map wrapper below.
+var DEFAULT_LONGITUDE = -64.6;
+var DEFAULT_LATITUDE = 44.02;
+var DEFAULT_ZOOM = 11;
+var DEFAULT_PITCH = 0;
+var DEFAULT_BEARING = 0;
 var MapBase = function (props) {
+    var _a, _b, _c, _d, _e;
     var theme = useTheme();
-    var _a = React.useState({
-        longitude: props.longitude,
-        latitude: props.latitude,
-        zoom: props.zoom,
-        pitch: props.pitch,
-        bearing: props.bearing,
+    var _f = React.useState({
+        longitude: (_a = props.longitude) !== null && _a !== void 0 ? _a : DEFAULT_LONGITUDE,
+        latitude: (_b = props.latitude) !== null && _b !== void 0 ? _b : DEFAULT_LATITUDE,
+        zoom: (_c = props.zoom) !== null && _c !== void 0 ? _c : DEFAULT_ZOOM,
+        pitch: (_d = props.pitch) !== null && _d !== void 0 ? _d : DEFAULT_PITCH,
+        bearing: (_e = props.bearing) !== null && _e !== void 0 ? _e : DEFAULT_BEARING,
         padding: props.padding || { top: 0, bottom: 0, left: 0, right: 0 }
-    }), viewState = _a[0], setViewState = _a[1];
-    // TODO: REMOVE THIS!
-    // React.useEffect(() => {
-    //   // Clears entire Mapbox tile cache for testing of clipping strategy.
-    //   MapboxGL.clearStorage();
-    // }, []);  
+    }), viewState = _f[0], setViewState = _f[1];
     var loadImage = function (url) {
         return new Promise(function (res, rej) {
             var img = new Image();
@@ -169,7 +172,7 @@ var MapBase = function (props) {
     };
     React.useEffect(function () {
         if (!props.clipped)
-            return;
+            return undefined;
         var originalFetch = window.fetch;
         window.fetch = function () {
             var args = [];
@@ -201,6 +204,9 @@ var MapBase = function (props) {
                 });
             });
         };
+        // Restore the original fetch when the clipped map unmounts, so the global
+        // override doesn't leak into the rest of the app.
+        return function () { window.fetch = originalFetch; };
     }, []);
     var handleLoad = function (e) {
         var map = e.target;
@@ -229,7 +235,7 @@ var MapBase = function (props) {
 };
 var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
 var Map = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIds, interactiveLayerIds = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, _p = _a.doubleClickZoom, doubleClickZoom = _p === void 0 ? true : _p, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIds", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration", "doubleClickZoom"]);
+    var _b = _a.longitude, longitude = _b === void 0 ? DEFAULT_LONGITUDE : _b, _c = _a.latitude, latitude = _c === void 0 ? DEFAULT_LATITUDE : _c, _d = _a.zoom, zoom = _d === void 0 ? DEFAULT_ZOOM : _d, _e = _a.pitch, pitch = _e === void 0 ? DEFAULT_PITCH : _e, _f = _a.bearing, bearing = _f === void 0 ? DEFAULT_BEARING : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIds, interactiveLayerIds = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, _p = _a.doubleClickZoom, doubleClickZoom = _p === void 0 ? true : _p, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIds", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration", "doubleClickZoom"]);
     return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, logoPosition: logoPosition, interactiveLayerIds: interactiveLayerIds, noRotate: noRotate, preserveDrawingBuffer: preserveDrawingBuffer, minZoom: minZoom, maxZoom: maxZoom, fadeDuration: fadeDuration, doubleClickZoom: doubleClickZoom }, props));
 };
 Map.displayName = 'Map';

package/map/PositionsManager/PositionBox.js

@@ -24,15 +24,19 @@ var PositionBox = function (props) {
         };
     });
     var handleMouseMove = function (ev) {
-        if (dragging)
+        if (dragging && dragOffset.current)
             props.onMove(ev.clientX - dragOffset.current[0], ev.clientY - dragOffset.current[1]);
     };
     var handleMouseUp = function () {
         setDragging(false);
     };
     var handleStartDrag = function (ev) {
-        var x = wrapperRef.current.parentElement.offsetLeft;
-        var y = wrapperRef.current.parentElement.offsetTop;
+        var _a;
+        var parent = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent)
+            return;
+        var x = parent.offsetLeft;
+        var y = parent.offsetTop;
         dragOffset.current = [ev.clientX - x - 9, ev.clientY - y - 38];
         setDragging(true);
     };

package/map/PositionsManager/PositionsManager.js

@@ -40,10 +40,16 @@ var PositionsManager = function (_a) {
     var store = storage == 'session' ? sessionStorage : localStorage;
     // Retrieve positions from storage. Returns [] if no data in store.
     var loadPositionsFromStorage = function () {
-        var json = store.getItem(STORAGE_KEY);
-        if (json == null)
+        try {
+            var json = store.getItem(STORAGE_KEY);
+            if (json == null)
+                return [];
+            return JSON.parse(json);
+        }
+        catch (_a) {
+            // Ignore corrupt/unavailable storage.
             return [];
-        return JSON.parse(json);
+        }
     };
     // Save positions to store.
     var savePositionsToStorage = function (positions) {
@@ -55,13 +61,16 @@ var PositionsManager = function (_a) {
         // Ctrl key must be held down.
         if (!ev.originalEvent.ctrlKey)
             return;
+        var m = map.current;
+        if (!m)
+            return;
         // Add click coordinates to positions list.
         setPositions(function (positions) {
             // Allow no more than 3 saved positions.
             if (positions.length >= maxPositions)
                 return positions;
             // Add new position to positions list.
-            var position = { lng: ev.lngLat.lng, lat: ev.lngLat.lat, zoom: map.current.getZoom() };
+            var position = { lng: ev.lngLat.lng, lat: ev.lngLat.lat, zoom: m.getZoom() };
             var newPositions = __spreadArray([position], positions, true);
             // Store new positions list in store.
             savePositionsToStorage(newPositions);
@@ -71,31 +80,42 @@ var PositionsManager = function (_a) {
     // Add a CTRL+click handler to the map, and removes
     // it on unmount. 
     React.useEffect(function () {
-        map.current.on('click', handleRegisterCoordinate);
-        return function () { map.current.off('contextmenu', handleRegisterCoordinate); };
+        var m = map.current;
+        if (!m)
+            return undefined;
+        m.on('click', handleRegisterCoordinate);
+        return function () { m.off('click', handleRegisterCoordinate); };
     }, []);
     var handleMovePosition = function (idx, x, y) {
-        var _a = map.current.unproject([x, y]), lng = _a.lng, lat = _a.lat;
-        var position = { lng: lng, lat: lat, zoom: map.current.getZoom() };
+        var m = map.current;
+        if (!m)
+            return;
+        var _a = m.unproject([x, y]), lng = _a.lng, lat = _a.lat;
+        var position = { lng: lng, lat: lat, zoom: m.getZoom() };
         var head = positions.slice(0, idx);
         var tail = positions.slice(idx + 1);
         var newPositions = __spreadArray(__spreadArray(__spreadArray([], head, true), [position], false), tail, true);
         setPositions(newPositions);
-        savePositionsToStorage(positions);
+        savePositionsToStorage(newPositions);
     };
     var handleDeletePosition = function (idx) {
-        positions.splice(idx, 1);
-        setPositions(__spreadArray([], positions, true));
-        savePositionsToStorage(positions);
+        var newPositions = positions.filter(function (_, i) { return i !== idx; });
+        setPositions(newPositions);
+        savePositionsToStorage(newPositions);
     };
     var handleFocus = function (idx) {
         var position = positions[idx];
+        if (!map.current)
+            return;
         map.current.easeTo({
             center: [position.lng, position.lat],
             zoom: position.zoom
         });
     };
-    return (React.createElement(React.Fragment, null, positions.reverse().map(function (position, idx) {
+    return (React.createElement(React.Fragment, null, positions.slice().reverse().map(function (position, revIdx) {
+        // Map the display (reversed) index back to the canonical index so the
+        // move/delete/focus handlers target the correct entry.
+        var idx = positions.length - 1 - revIdx;
         return React.createElement(PositionBox, { key: idx, coord: position, onMove: function (x, y) { return handleMovePosition(idx, x, y); }, onDelete: function () { return handleDeletePosition(idx); }, onFocus: function () { return handleFocus(idx); } });
     })));
 };

package/map/controls/CompassButton/CompassButton.js

@@ -34,7 +34,7 @@ import { Key } from '../../../controls/Key';
 var CompassButtonBase = function (props) {
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", ariaLabel: "Reset bearing and pitch", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, props),
         React.createElement("div", { style: { transform: "rotateX(".concat(props.visualizePitch ? viewState.pitch : 0, "deg)") } },
             React.createElement("svg", { style: { transform: "rotateZ(".concat(-viewState.bearing, "deg)") }, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 1000 1000" },
                 React.createElement("polygon", { className: "tip", points: "100,1000 500,0 900,1000 500,700 " }),

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -59,7 +59,7 @@ var FullscreenButton = function (_a) {
             window.document.exitFullscreen();
         }
     };
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "FullscreenButton", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "FullscreenButton", ariaLabel: "Toggle fullscreen", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" }))));
 };

package/map/controls/Geocoder/Geocoder.js

@@ -33,27 +33,34 @@ import { GeocoderList } from './GeocoderList';
 import { GeocoderSelector } from './GeocoderSelector';
 import { MapControl } from '../base/MapControl';
 import { useOutsideClose } from '../../../hooks/useOutsideClose';
+// Default prop values, referenced both by the GeocoderBase fallbacks and the
+// Geocoder wrapper below.
+var DEFAULT_SEARCH_ICON = false;
+var DEFAULT_PLACEHOLDER = "Type to search places";
+var DEFAULT_UPWARDS = false;
 var GeocoderBase = function (props) {
+    var _a, _b, _c;
     var wrapperRef = React.useRef(null);
     var map = useMap().current;
     // Timer is used for debouncing requests:
-    var _a = React.useState(null), timer = _a[0], setTimer = _a[1];
+    var _d = React.useState(null), timer = _d[0], setTimer = _d[1];
     // Current query:
-    var _b = React.useState(""), q = _b[0], setQ = _b[1];
+    var _e = React.useState(""), q = _e[0], setQ = _e[1];
     // Currently retrieved features:
-    var _c = React.useState([]), features = _c[0], setFeatures = _c[1];
+    var _f = React.useState([]), features = _f[0], setFeatures = _f[1];
     // Offset of currently-selected feature (0-based):
-    var _d = React.useState(-1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var _g = React.useState(-1), selectedIndex = _g[0], setSelectedIndex = _g[1];
     //
     // Clear the control, removing any items.
     // Focus on input.
     //  
     var clear = function () {
+        var _a;
         setQ("");
         setFeatures([]);
         setSelectedIndex(-1);
-        if (wrapperRef)
-            wrapperRef.current.querySelector('input').focus();
+        if (wrapperRef.current)
+            (_a = wrapperRef.current.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
     };
     useOutsideClose({
         open: features.length > 0,
@@ -66,7 +73,7 @@ var GeocoderBase = function (props) {
     // Call mapbox geocoder API, and store results in state.
     //
     var lookup = function (q) {
-        if (q == "") {
+        if (q === "") {
             clear();
             return;
         }
@@ -78,13 +85,17 @@ var GeocoderBase = function (props) {
             setFeatures(res);
             if (res.length > 0)
                 setSelectedIndex(0);
+        })
+            .catch(function () {
+            setFeatures([]);
+            setSelectedIndex(-1);
         });
     };
     // 
     // Debounce calls to lookup by 350ms.
     // 
     var lookupDebounced = function (q) {
-        if (timer != null) {
+        if (timer !== null) {
             window.clearTimeout(timer);
             setTimer(null);
         }
@@ -95,6 +106,8 @@ var GeocoderBase = function (props) {
         lookupDebounced(newq);
     };
     var handleClick = function (feature) {
+        if (!map)
+            return;
         if (feature.properties.bbox) {
             map.fitBounds(feature.properties.bbox);
         }
@@ -121,7 +134,8 @@ var GeocoderBase = function (props) {
             case 'Enter':
             case 'NumpadEnter':
                 e.preventDefault();
-                handleClick(features[selectedIndex]);
+                if (selectedIndex >= 0 && features[selectedIndex])
+                    handleClick(features[selectedIndex]);
                 break;
             case 'Escape':
                 e.preventDefault();
@@ -129,11 +143,11 @@ var GeocoderBase = function (props) {
                 break;
         }
     };
-    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "Geocoder", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "Geocoder", x: props.x, y: props.y, respectPadding: props.respectPadding, style: props.style },
         React.createElement("div", { className: props.className, onKeyDown: function (e) { return handleKeyDown(e); }, ref: wrapperRef },
-            React.createElement(GeocoderSelector, { placeholder: props.placeholder, searchIcon: props.searchIcon, value: q, onChange: handleChange }),
-            features.length > 0 && React.createElement(GeocoderList, { upwards: props.upwards }, features.map(function (f, idx) {
-                return React.createElement(GeocoderEntry, { key: idx, feature: f, selected: idx == selectedIndex, onClick: function () { return handleClick(f); } });
+            React.createElement(GeocoderSelector, { placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : DEFAULT_PLACEHOLDER, searchIcon: (_b = props.searchIcon) !== null && _b !== void 0 ? _b : DEFAULT_SEARCH_ICON, value: q, onChange: handleChange }),
+            features.length > 0 && React.createElement(GeocoderList, { upwards: (_c = props.upwards) !== null && _c !== void 0 ? _c : DEFAULT_UPWARDS }, features.map(function (f, idx) {
+                return React.createElement(GeocoderEntry, { key: idx, feature: f, selected: idx === selectedIndex, onClick: function () { return handleClick(f); } });
             })))));
 };
 var GeocoderStyled = styled(GeocoderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  pointer-events: all !important;\n"], ["\n  width: ", "px;\n  pointer-events: all !important;\n"
@@ -159,7 +173,7 @@ var GeocoderStyled = styled(GeocoderBase)(templateObject_1 || (templateObject_1
  * Mapbox geocoding playground: https://docs.mapbox.com/playground/geocoding/
  */
 var Geocoder = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Type to search places" : _d, _e = _a.pointZoom, pointZoom = _e === void 0 ? 15 : _e, _f = _a.proximityIP, proximityIP = _f === void 0 ? true : _f, _g = _a.upwards, upwards = _g === void 0 ? false : _g, props = __rest(_a, ["width", "searchIcon", "placeholder", "pointZoom", "proximityIP", "upwards"]);
+    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? DEFAULT_SEARCH_ICON : _c, _d = _a.placeholder, placeholder = _d === void 0 ? DEFAULT_PLACEHOLDER : _d, _e = _a.pointZoom, pointZoom = _e === void 0 ? 15 : _e, _f = _a.proximityIP, proximityIP = _f === void 0 ? true : _f, _g = _a.upwards, upwards = _g === void 0 ? DEFAULT_UPWARDS : _g, props = __rest(_a, ["width", "searchIcon", "placeholder", "pointZoom", "proximityIP", "upwards"]);
     return React.createElement(GeocoderStyled, __assign({ width: width, searchIcon: searchIcon, placeholder: placeholder, pointZoom: pointZoom, proximityIP: proximityIP, upwards: upwards }, props));
 };
 Geocoder.displayName = "Geocoder";

package/map/controls/Geocoder/GeocoderApi.js

@@ -55,6 +55,8 @@ var GeocoderApi = /** @class */ (function () {
                             })];
                     case 1:
                         res = _a.sent();
+                        if (!res.ok)
+                            throw new Error("Geocoder lookup failed: ".concat(res.status, " ").concat(res.statusText));
                         return [4 /*yield*/, res.json()];
                     case 2:
                         json = _a.sent();

package/map/controls/Geocoder/GeocoderSelector.js

@@ -20,6 +20,6 @@ var GeocoderSelectorBase = function (props) {
             React.createElement(Icon, { url: SVG.Icons.Search, color: theme.colors.neutral[50] }),
         React.createElement("input", { placeholder: props.placeholder, value: props.value, onChange: handleChange })));
 };
-var GeocoderSelector = styled(GeocoderSelectorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"], ["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.fontColor; });
+var GeocoderSelector = styled(GeocoderSelectorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"], ["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; });
 export { GeocoderSelector };
 var templateObject_1;

package/map/controls/Graticule/Graticule.js

@@ -75,7 +75,6 @@ var Graticule = function (props) {
         var step = props.adaptive ? props.degrees / Math.pow(2, Math.ceil(viewState.zoom - 1)) : props.degrees;
         var bounds = getBounds();
         var features = [];
-        var count = 0;
         for (var lng = -180; lng <= 180; lng += step) {
             if (!(lng > bounds.west && lng < bounds.east))
                 continue;
@@ -84,7 +83,6 @@ var Graticule = function (props) {
                 geometry: { type: 'LineString', coordinates: [[lng, -90], [lng, 90]] },
                 properties: {}
             });
-            count++;
         }
         for (var lat = -90; lat <= 90; lat += step) {
             if (!(lat < bounds.north && lat > bounds.south))
@@ -94,7 +92,6 @@ var Graticule = function (props) {
                 geometry: { type: 'LineString', coordinates: [[-180, lat], [180, lat]] },
                 properties: {}
             });
-            count++;
         }
         for (var lng = -180 + step; lng <= 180; lng += step) {
             if (!(lng > bounds.west && lng < bounds.east))
@@ -112,7 +109,6 @@ var Graticule = function (props) {
                     geometry: { type: 'Point', coordinates: [lng, lat + step / 2] },
                     properties: { x: props.decimal ? formatNumber(lng, 3) : formatLongitude(lng) }
                 });
-                count += 2;
             }
         }
         return { type: 'FeatureCollection', features: features };
@@ -120,7 +116,7 @@ var Graticule = function (props) {
     var _b = React.useState({ type: 'FeatureCollection', features: [] }), featureCollection = _b[0], setFeatureCollection = _b[1];
     React.useEffect(function () {
         setFeatureCollection(buildGrid());
-    }, [viewState.zoom, viewState.latitude, viewState.longitude]);
+    }, [viewState.zoom, viewState.latitude, viewState.longitude, props.degrees, props.adaptive, props.decimal]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Source, { type: "geojson", data: featureCollection },
             React.createElement(Layer, { type: "line", filter: ['==', ["geometry-type"], 'LineString'], paint: {

package/map/controls/MapLoader/MapLoader.js

@@ -30,7 +30,7 @@ import { MapControl } from '../base/MapControl';
 var DEFAULT_SIZE = 40; // Default control size (px)
 var DEFAULT_COLOR = "white"; // Default control color
 var MapLoaderBase = function (props) {
-    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "MapLoader", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "MapLoader", x: props.x, y: props.y, respectPadding: props.respectPadding, style: props.style },
         React.createElement("div", { className: props.className },
             React.createElement(Svg, { width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { d: "M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" })))));

package/map/controls/ScaleControl/ScaleControl.js

@@ -100,7 +100,7 @@ var ScaleControlStyled = styled(ScaleControlBase)(templateObject_1 || (templateO
  * ```
  */
 var ScaleControl = function (_a) {
-    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, props = __rest(_a, ["x", "y", "width"]);
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? DEFAULT_WIDTH : _d, props = __rest(_a, ["x", "y", "width"]);
     return React.createElement(ScaleControlStyled, __assign({ x: x, y: y, width: width }, props));
 };
 ScaleControl.displayName = 'ScaleControl';

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -49,7 +49,7 @@ var ZoomInButton = function (_a) {
         " Zoom in") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomInButton", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomInButton", ariaLabel: "Zoom in", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M100,43.2v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6v29.5c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H43.2c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h29.5V6.8c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h13.6c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v29.5h29.5c1.9,0,3.5,0.7,4.8,2C99.3,39.7,100,41.3,100,43.2z" }))));
 };

package/map/controls/ZoomOutButton/ZoomOutButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { IMapButtonProps } from '../base/MapButton';
 /**
- * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * The `ZoomOutButton` zooms the map out when clicked.  It respects the min and
  * max zoom levels of the map.
  *
  * The current map ViewState must be passed to this control, which is done

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -27,7 +27,7 @@ import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
 /**
- * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * The `ZoomOutButton` zooms the map out when clicked.  It respects the min and
  * max zoom levels of the map.
  *
  * The current map ViewState must be passed to this control, which is done
@@ -49,7 +49,7 @@ var ZoomOutButton = function (_a) {
         " Zoom out") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomOutButton", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomOutButton", ariaLabel: "Zoom out", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M93.2,36.4c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2" }))));
 };

package/map/controls/base/MapButton/MapButton.d.ts

@@ -15,6 +15,11 @@ interface IMapButtonProps extends IMapControlProps {
      * Optional hint to show on hover. This can be JSX. No hint is shown if this value is `null`.
      */
     hint?: React.ReactNode;
+    /**
+     * Accessible label for the button, read by screen readers. Provide this when
+     * the `hint` is JSX (a string hint is used as the label automatically).
+     */
+    ariaLabel?: string;
     /**
      * Button size in pixels.
      * @defaultValue 32
@@ -31,9 +36,10 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
     /**
-     * Fired when the map button is clicked.
+     * Fired when the map button is clicked, or activated with Enter/Space.
+     * Receives the originating mouse or keyboard event.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
  * A `MapButton` is a square button to be used on a Mapbox map. It must

package/map/controls/base/MapButton/MapButton.js

@@ -39,6 +39,14 @@ var MapButtonBase = function (props) {
         if (props.onClick)
             props.onClick(e);
     };
+    var handleKeyDown = function (e) {
+        if (props.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            props.onClick(e);
+        }
+    };
     var handleMouseEnter = function () {
         if (hintRef)
             hintRef.style.opacity = "1";
@@ -60,7 +68,8 @@ var MapButtonBase = function (props) {
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     var renderButton = function () {
-        return React.createElement("div", { ref: setWrapperRef, className: props.className, "data-testid": props['data-testid'] || "MapButton", tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        var _a;
+        return React.createElement("div", { ref: setWrapperRef, className: props.className, "data-testid": props['data-testid'] || "MapButton", tabIndex: props.disabled ? -1 : 0, role: "button", "aria-label": (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : (typeof props.hint === 'string' ? props.hint : undefined), "aria-disabled": props.disabled, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             React.createElement(Button, { "data-testid": "MapButton.Button", "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
             props.hint &&
                 createPortal(React.createElement(Hint, { "data-testid": "MapButton.Hint", ref: setHintRef, styles: styles.popper, attributes: __assign({}, attributes.popper) }, props.hint), document.body));
@@ -69,7 +78,7 @@ var MapButtonBase = function (props) {
         return renderButton();
     return React.createElement(MapControl, { x: props.x, y: props.y }, renderButton());
 };
-var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"], [" \n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$grouped && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "], ["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "]))); }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.$active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.accent; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "], ["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }); });
+var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$grouped && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "], ["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "]))); }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.$active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.accent; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "], ["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }); });
 var MapButtonStyled = styled(MapButtonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  pointer-events: all;\n\n  // Size control:\n  width: ", "px;\n  height: ", "px;\n\n  outline: 0;\n  user-select: none;\n\n  // Grouped button has a separator border (though not the last button in the group):\n  ", "\n\n  // Disabled mode:\n  ", "  \n"], ["\n  position: relative;\n  pointer-events: all;\n\n  // Size control:\n  width: ", "px;\n  height: ", "px;\n\n  outline: 0;\n  user-select: none;\n\n  // Grouped button has a separator border (though not the last button in the group):\n  ", "\n\n  // Disabled mode:\n  ", "  \n"
     /**
      * A `MapButton` is a square button to be used on a Mapbox map. It must

package/map/controls/base/MapControl/MapControl.d.ts

@@ -20,6 +20,11 @@ interface IMapControlProps extends ITestable {
      * @default false
      */
     respectPadding?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, merged after (and so
+     * overriding) the computed positioning styles.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * `MapControl` positions a control of top of a map, taking Mapbox `padding`

package/map/controls/base/MapControl/MapControl.js

@@ -27,15 +27,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from 'styled-components';
 import { useViewState } from '../../../Map';
+// Default prop values, referenced both by the MapControlBase fallbacks and the
+// MapControl wrapper below.
+var DEFAULT_X = 0;
+var DEFAULT_Y = 0;
 var MapControlBase = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var viewState = useViewState();
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "MapControl", className: props.className, style: {
+    var x = (_a = props.x) !== null && _a !== void 0 ? _a : DEFAULT_X;
+    var y = (_b = props.y) !== null && _b !== void 0 ? _b : DEFAULT_Y;
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MapControl", className: props.className, style: __assign({ 
             // Must calculate this style dynamically, because it needs local state.
-            left: props.x >= 0 ? "".concat(props.x + (props.respectPadding ? viewState.padding.left : 0), "px") : 'auto',
-            right: props.x < 0 ? "".concat((props.respectPadding ? viewState.padding.right : 0) - props.x, "px") : 'auto',
-            top: props.y >= 0 ? "".concat(props.y + (props.respectPadding ? viewState.padding.top : 0), "px") : 'auto',
-            bottom: props.y < 0 ? "".concat(-props.y - -(props.respectPadding ? viewState.padding.bottom : 0), "px") : 'auto'
-        } }, props.children));
+            left: x >= 0 ? "".concat(x + (props.respectPadding ? ((_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _c === void 0 ? void 0 : _c.left) !== null && _d !== void 0 ? _d : 0) : 0), "px") : 'auto', right: x < 0 ? "".concat((props.respectPadding ? ((_f = (_e = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _e === void 0 ? void 0 : _e.right) !== null && _f !== void 0 ? _f : 0) : 0) - x, "px") : 'auto', top: y >= 0 ? "".concat(y + (props.respectPadding ? ((_h = (_g = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _g === void 0 ? void 0 : _g.top) !== null && _h !== void 0 ? _h : 0) : 0), "px") : 'auto', bottom: y < 0 ? "".concat(-y - -(props.respectPadding ? ((_k = (_j = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _j === void 0 ? void 0 : _j.bottom) !== null && _k !== void 0 ? _k : 0) : 0), "px") : 'auto' }, props.style) }, props.children));
 };
 var MapControlStyled = styled(MapControlBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 100;\n  box-sizing: border-box;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  z-index: 100;\n  box-sizing: border-box;\n  pointer-events: none;\n"
     /**
@@ -70,7 +73,7 @@ var MapControlStyled = styled(MapControlBase)(templateObject_1 || (templateObjec
  * and `ScaleControl`.
  */
 var MapControl = function (_a) {
-    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.respectPadding, respectPadding = _d === void 0 ? false : _d, props = __rest(_a, ["x", "y", "respectPadding"]);
+    var _b = _a.x, x = _b === void 0 ? DEFAULT_X : _b, _c = _a.y, y = _c === void 0 ? DEFAULT_Y : _c, _d = _a.respectPadding, respectPadding = _d === void 0 ? false : _d, props = __rest(_a, ["x", "y", "respectPadding"]);
     return React.createElement(MapControlStyled, __assign({ x: x, y: y, respectPadding: respectPadding }, props));
 };
 export { MapControl };

package/map/layers/ClusterLayer/ClusterLayer.d.ts

@@ -11,7 +11,7 @@ interface IClusterLayerProps {
     items: IItem[];
     /**
      * Radius of cluster (in pixels).
-     * @default 18
+     * @default 24
      */
     radius?: number;
     /**