@splunk/visualizations 28.5.3 → 28.7.0

package/Map.js

@@ -12,6 +12,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -59,6 +60,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -191,104 +193,273 @@ var defaultImport11 = __toESM(require("@splunk/react-ui/Button"));
 __reExport(Button_exports, require("@splunk/react-ui/Button"));
 var Button_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
 // esm-externals:@splunk/visualization-context/MapContext
 var MapContext_exports = {};
 __export(MapContext_exports, {
   default: () => MapContext_default
 });
-var defaultImport12 = __toESM(require("@splunk/visualization-context/MapContext"));
+var defaultImport13 = __toESM(require("@splunk/visualization-context/MapContext"));
 __reExport(MapContext_exports, require("@splunk/visualization-context/MapContext"));
-var MapContext_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var MapContext_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport13 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport14 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var visualization_schemas_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// src/common/utils/shadowDomUtils.ts
+var getFloatingLayerStyleTarget = (anchor) => {
+  if (!anchor || typeof anchor.getRootNode !== "function") {
+    return void 0;
+  }
+  const rootNode = anchor.getRootNode();
+  if (typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot) {
+    return anchor.ownerDocument.head;
+  }
+  return void 0;
+};
 
 // esm-externals:@splunk/visualizations-shared/style
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport15 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var style_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:maplibre-gl/dist/maplibre-gl.css
 var maplibre_gl_exports2 = {};
 __export(maplibre_gl_exports2, {
   default: () => maplibre_gl_default2
 });
-var defaultImport15 = __toESM(require("maplibre-gl/dist/maplibre-gl.css"));
+var defaultImport16 = __toESM(require("maplibre-gl/dist/maplibre-gl.css"));
 __reExport(maplibre_gl_exports2, require("maplibre-gl/dist/maplibre-gl.css"));
-var maplibre_gl_default2 = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var maplibre_gl_default2 = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // esm-externals:@splunk/visualizations-shared/iconUtils
 var iconUtils_exports = {};
 __export(iconUtils_exports, {
   default: () => iconUtils_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
+var defaultImport17 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
 __reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
-var iconUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var iconUtils_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/visualizations-shared/RemoteIcon
 var RemoteIcon_exports = {};
 __export(RemoteIcon_exports, {
   default: () => RemoteIcon_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
+var defaultImport18 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
 __reExport(RemoteIcon_exports, require("@splunk/visualizations-shared/RemoteIcon"));
-var RemoteIcon_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var RemoteIcon_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport19 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var FeatureFlagContext_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
+});
+var defaultImport20 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// src/Map/PureMap/keyboardConstants.ts
+var KEYBOARD_KEYS = {
+  ARROW_RIGHT: "ArrowRight",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  HOME: "Home",
+  END: "End",
+  ENTER: "Enter",
+  SPACE: " "
+};
+
+// esm-externals:@splunk/react-ui/Popover
+var Popover_exports = {};
+__export(Popover_exports, {
+  default: () => Popover_default
+});
+var defaultImport21 = __toESM(require("@splunk/react-ui/Popover"));
+__reExport(Popover_exports, require("@splunk/react-ui/Popover"));
+var Popover_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport22 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport19 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport23 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var id_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// src/Map/PureMap/Tooltip.tsx
+var StyledPopover = styled_components_default(Popover_default)`
+    min-width: 250px;
+    max-width: 332px;
+    max-width: fit-content;
+    font-size: 12px;
+`;
+var StyledTable = styled_components_default.table`
+    margin: 2px 6px 2px 6px;
+    width: calc(100% - 12px);
+`;
+var StyledTitleColumn = styled_components_default.td`
+    opacity: 0.85;
+    word-break: break-all;
+    vertical-align: top;
+`;
+var StyledValueColumn = styled_components_default.td`
+    text-align: right;
+    word-break: break-all;
+    vertical-align: top;
+`;
+var StyledColorBlock = styled_components_default.div`
+    background-color: ${(props) => props.color};
+    display: inline-block;
+    margin-right: 4px;
+    border-radius: 2px;
+    width: 6px;
+    height: 11px;
+    transform: translateY(1px);
+`;
+var StyledIconWrapper = styled_components_default.span`
+    margin-left: 4px;
+    display: inline-block;
+    vertical-align: middle;
+`;
+var StyledTooltipHeader = styled_components_default.thead`
+    th {
+        height: 16px;
+        color: ${themes_exports.variables.contentColorActive};
+        padding: 0;
+    }
+
+    span {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+`;
+var convertDegToDMS = (decimalDegree, type) => {
+  const truncate = (n) => n > 0 ? Math.floor(n) : Math.ceil(n);
+  const absoluteDegree = Math.abs(decimalDegree);
+  let degrees = truncate(absoluteDegree);
+  let minutes = truncate((absoluteDegree - degrees) * 60);
+  let seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);
+  if (seconds === 60) {
+    minutes += 1;
+    seconds = 0;
+  }
+  if (minutes === 60) {
+    degrees += 1;
+    minutes = 0;
+  }
+  let direction;
+  if (type === "longitude") {
+    direction = decimalDegree < 0 ? "W" : "E";
+  } else if (type === "latitude") {
+    direction = decimalDegree < 0 ? "S" : "N";
+  }
+  return `${degrees}\xB0 ${minutes}' ${seconds}" ${direction}`;
+};
+var Tooltip = ({
+  id,
+  open,
+  anchor,
+  latitude,
+  longitude,
+  areaId,
+  areaValue,
+  additionalFields = [],
+  showCoordinates = true,
+  tooltipHeader = null,
+  stylesManagedExternally = false,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+  const isTooltipIconFlagEnabled = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTooltipIcon);
+  const styleTarget = stylesManagedExternally ? void 0 : getFloatingLayerStyleTarget(anchor);
+  const popover = /* @__PURE__ */ react_exports.createElement(
+    StyledPopover,
+    {
+      id,
+      role: "tooltip",
+      open,
+      animation: false,
+      anchor,
+      "data-test": "map-marker-tooltip",
+      defaultPlacement: "above",
+      onMouseEnter,
+      onMouseLeave
+    },
+    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, Boolean(areaId && areaValue) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement("span", null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
+  );
+  return styleTarget ? /* @__PURE__ */ react_exports.createElement(styled_components_exports.StyleSheetManager, { target: styleTarget }, popover) : popover;
+};
+var Tooltip_default2 = Tooltip;
 
 // esm-externals:d3-scale
 var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport20 = __toESM(require("d3-scale"));
+var defaultImport24 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var d3_scale_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualization-color-palettes
 var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport25 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var visualization_color_palettes_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualization-encoding/utils/types
 var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport26 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var types_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/Map/PureMap/MapUtils.ts
 var MAX_LATITUDE = 90;
@@ -472,7 +643,7 @@ var transposeArray = (array2) => {
   if (!(array2 == null ? void 0 : array2.length) || !((_a = array2[0]) == null ? void 0 : _a.length)) {
     return [];
   }
-  return array2[0].map((_7, i) => array2.map((row) => row[i]));
+  return array2[0].map((_10, i) => array2.map((row) => row[i]));
 };
 var sanitizeValues = (values) => {
   if (!values) {
@@ -650,124 +821,30 @@ var formatMetadata = (choroplethLayer, i) => {
   }, base);
 };
 
-// esm-externals:@splunk/react-ui/Popover
-var Popover_exports = {};
-__export(Popover_exports, {
-  default: () => Popover_default
-});
-var defaultImport23 = __toESM(require("@splunk/react-ui/Popover"));
-__reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport24 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
-
-// src/Map/PureMap/Tooltip.tsx
-var StyledPopover = styled_components_default(Popover_default)`
-    min-width: 250px;
-    max-width: 332px;
-    max-width: fit-content;
-    font-size: 12px;
-`;
-var StyledTable = styled_components_default.table`
-    margin: 2px 6px 2px 6px;
-    width: calc(100% - 12px);
-`;
-var StyledTitleColumn = styled_components_default.td`
-    opacity: 0.85;
-    word-break: break-all;
-    vertical-align: top;
-`;
-var StyledValueColumn = styled_components_default.td`
-    text-align: right;
-    word-break: break-all;
-    vertical-align: top;
-`;
-var StyledColorBlock = styled_components_default.div`
-    background-color: ${(props) => props.color};
-    display: inline-block;
-    margin-right: 4px;
-    border-radius: 2px;
-    width: 6px;
-    height: 11px;
-    transform: translateY(1px);
-`;
-var StyledIconWrapper = styled_components_default.span`
-    margin-left: 4px;
-    display: inline-block;
-    vertical-align: middle;
-`;
-var StyledTooltipHeader = styled_components_default.thead`
-    th {
-        height: 16px;
-        color: ${themes_exports.variables.contentColorActive};
-        padding: 0;
-    }
-
-    span {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-    }
-`;
-var convertDegToDMS = (decimalDegree, type) => {
-  const truncate = (n) => n > 0 ? Math.floor(n) : Math.ceil(n);
-  const absoluteDegree = Math.abs(decimalDegree);
-  let degrees = truncate(absoluteDegree);
-  let minutes = truncate((absoluteDegree - degrees) * 60);
-  let seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);
-  if (seconds === 60) {
-    minutes += 1;
-    seconds = 0;
-  }
-  if (minutes === 60) {
-    degrees += 1;
-    minutes = 0;
-  }
-  let direction;
-  if (type === "longitude") {
-    direction = decimalDegree < 0 ? "W" : "E";
-  } else if (type === "latitude") {
-    direction = decimalDegree < 0 ? "S" : "N";
+// src/Map/PureMap/MapContext.tsx
+var MapContext = react_exports.createContext({
+  activeTooltipId: null,
+  setActiveTooltipId: () => {
+  },
+  activeChoroplethId: null,
+  setActiveChoroplethId: () => {
   }
-  return `${degrees}\xB0 ${minutes}' ${seconds}" ${direction}`;
-};
-var Tooltip = ({
-  open,
-  anchor,
-  latitude,
-  longitude,
-  areaId,
-  areaValue,
-  additionalFields = [],
-  showCoordinates = true,
-  tooltipHeader = null
-}) => {
-  const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-  const isTooltipIconFlagEnabled = Boolean(
-    featureFlagContext && featureFlagContext.visualizations_enableTooltipIcon
-  );
-  return /* @__PURE__ */ react_exports.createElement(
-    StyledPopover,
-    {
-      open,
-      animation: false,
-      anchor,
-      "data-test": "map-marker-tooltip",
-      defaultPlacement: "above"
-    },
-    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, Boolean(areaId && areaValue) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement("span", null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
+});
+var MapProvider = ({ children }) => {
+  const [activeTooltipId, setActiveTooltipId] = react_exports.useState(null);
+  const [activeChoroplethId, setActiveChoroplethId] = react_exports.useState(null);
+  const value = react_exports.useMemo(
+    () => ({
+      activeTooltipId,
+      setActiveTooltipId,
+      activeChoroplethId,
+      setActiveChoroplethId
+    }),
+    [activeTooltipId, activeChoroplethId]
   );
+  return /* @__PURE__ */ react_exports.createElement(MapContext.Provider, { value }, children);
 };
-var Tooltip_default = Tooltip;
+var useMapContext = () => react_exports.useContext(MapContext);
 
 // src/Map/PureMap/MarkerWrapper.tsx
 var MarkerWrapper = (_a) => {
@@ -779,9 +856,10 @@ var MarkerWrapper = (_a) => {
     additionalFields = [],
     tooltipHeader = null,
     map,
-    isChoroplethTooltipOpen,
     children,
-    showCoordinates = true
+    showCoordinates = true,
+    stylesManagedExternally = false,
+    customMarkerId
   } = _b, otherProps = __objRest(_b, [
     "longitude",
     "latitude",
@@ -790,19 +868,120 @@ var MarkerWrapper = (_a) => {
     "additionalFields",
     "tooltipHeader",
     "map",
-    "isChoroplethTooltipOpen",
     "children",
-    "showCoordinates"
+    "showCoordinates",
+    "stylesManagedExternally",
+    "customMarkerId"
   ]);
   const container = react_exports.useRef();
   const marker = react_exports.useRef();
   const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
-  const isChoroplethTooltip = react_exports.useCallback(
-    () => isChoroplethTooltipOpen !== void 0,
-    [isChoroplethTooltipOpen]
+  const [isFocused, setIsFocused] = react_exports.useState(false);
+  const [isHovered, setIsHovered] = react_exports.useState(false);
+  const [isPopoverHovered, setIsPopoverHovered] = react_exports.useState(false);
+  const tooltipId = react_exports.useMemo(() => (0, id_exports.createDOMID)(), []);
+  const pendingMoveEndHandler = react_exports.useRef(null);
+  const closeTimeoutRef = react_exports.useRef(null);
+  const generatedMarkerId = react_exports.useMemo(() => (0, id_exports.createDOMID)(), []);
+  const markerId = customMarkerId || generatedMarkerId;
+  const { activeTooltipId, setActiveTooltipId } = useMapContext();
+  const mapMoveHandlerRef = react_exports.useRef(null);
+  const openTooltip = react_exports.useCallback(() => {
+    setActiveTooltipId(markerId);
+    setTooltipOpenStatus(true);
+  }, [markerId, setActiveTooltipId]);
+  const cleanupPendingMoveEnd = react_exports.useCallback(() => {
+    if (pendingMoveEndHandler.current && map.current && typeof map.current.off === "function") {
+      map.current.off("moveend", pendingMoveEndHandler.current);
+      pendingMoveEndHandler.current = null;
+    }
+  }, [map]);
+  const cleanupMapMoveHandler = react_exports.useCallback(() => {
+    if (mapMoveHandlerRef.current && map.current && typeof map.current.off === "function") {
+      map.current.off("move", mapMoveHandlerRef.current);
+      mapMoveHandlerRef.current = null;
+    }
+  }, [map]);
+  const shouldCloseTooltip = react_exports.useCallback(
+    (focused, hovered, popoverHovered) => {
+      return !focused && !hovered && !popoverHovered;
+    },
+    []
   );
-  const openTooltip = react_exports.useCallback(() => setTooltipOpenStatus(true), []);
-  const closeTooltip = react_exports.useCallback(() => setTooltipOpenStatus(false), []);
+  const cancelCloseTimeout = react_exports.useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const closeTooltipIfShould = react_exports.useCallback(
+    (focused, hovered, popoverHovered) => {
+      cancelCloseTimeout();
+      if (shouldCloseTooltip(focused, hovered, popoverHovered)) {
+        closeTimeoutRef.current = setTimeout(() => {
+          setTooltipOpenStatus(false);
+          setActiveTooltipId((currentId) => currentId === markerId ? null : currentId);
+          closeTimeoutRef.current = null;
+        }, 100);
+      }
+    },
+    [shouldCloseTooltip, markerId, setActiveTooltipId, cancelCloseTimeout]
+  );
+  const handleMouseEnter = react_exports.useCallback(() => {
+    cancelCloseTimeout();
+    setIsHovered(true);
+    openTooltip();
+  }, [openTooltip, cancelCloseTimeout]);
+  const handleMouseLeave = react_exports.useCallback(() => {
+    setIsHovered(false);
+    closeTooltipIfShould(isFocused, false, isPopoverHovered);
+  }, [isFocused, isPopoverHovered, closeTooltipIfShould]);
+  const handlePopoverMouseEnter = react_exports.useCallback(() => {
+    cancelCloseTimeout();
+    setIsPopoverHovered(true);
+  }, [cancelCloseTimeout]);
+  const handlePopoverMouseLeave = react_exports.useCallback(() => {
+    setIsPopoverHovered(false);
+    closeTooltipIfShould(isFocused, isHovered, false);
+  }, [isFocused, isHovered, closeTooltipIfShould]);
+  const handleBlur = react_exports.useCallback(() => {
+    setIsFocused(false);
+    cleanupPendingMoveEnd();
+    closeTooltipIfShould(false, isHovered, isPopoverHovered);
+  }, [isHovered, isPopoverHovered, cleanupPendingMoveEnd, closeTooltipIfShould]);
+  const handleEscapeKey = react_exports.useCallback(
+    (e) => {
+      if (e.key === "Escape" && activeTooltipId === markerId) {
+        cancelCloseTimeout();
+        setIsFocused(false);
+        setIsHovered(false);
+        setIsPopoverHovered(false);
+        cleanupPendingMoveEnd();
+        setTooltipOpenStatus(false);
+        setActiveTooltipId(null);
+      }
+    },
+    [activeTooltipId, markerId, cleanupPendingMoveEnd, setActiveTooltipId, cancelCloseTimeout]
+  );
+  const handleFocus = react_exports.useCallback(() => {
+    cleanupPendingMoveEnd();
+    if (map.current && longitude !== void 0 && latitude !== void 0 && typeof map.current.once === "function") {
+      const bounds = map.current.getBounds();
+      if (!bounds.contains([longitude, latitude])) {
+        const moveEndHandler = () => {
+          pendingMoveEndHandler.current = null;
+          setIsFocused(true);
+          openTooltip();
+        };
+        pendingMoveEndHandler.current = moveEndHandler;
+        map.current.once("moveend", moveEndHandler);
+        map.current.panTo([longitude, latitude]);
+        return;
+      }
+    }
+    setIsFocused(true);
+    openTooltip();
+  }, [openTooltip, map, longitude, latitude, cleanupPendingMoveEnd]);
   const cleanupMarker = react_exports.useCallback(() => {
     if (marker.current) {
       marker.current.remove();
@@ -823,40 +1002,231 @@ var MarkerWrapper = (_a) => {
       cleanupMarker();
     }
   }, [latitude, longitude, map]);
-  react_exports.useEffect(() => cleanupMarker, []);
+  react_exports.useEffect(() => {
+    if (isTooltipOpen && activeTooltipId === markerId) {
+      document.addEventListener("keydown", handleEscapeKey);
+      return () => {
+        document.removeEventListener("keydown", handleEscapeKey);
+      };
+    }
+    return void 0;
+  }, [isTooltipOpen, activeTooltipId, markerId, handleEscapeKey]);
+  react_exports.useEffect(() => {
+    if (isTooltipOpen && activeTooltipId !== markerId && activeTooltipId !== null) {
+      setTooltipOpenStatus(false);
+    }
+  }, [activeTooltipId, markerId, isTooltipOpen]);
+  react_exports.useEffect(() => {
+    if (!isTooltipOpen && activeTooltipId === null && (isFocused || isHovered || isPopoverHovered)) {
+      openTooltip();
+    }
+  }, [activeTooltipId, isTooltipOpen, isFocused, isHovered, isPopoverHovered, openTooltip]);
+  react_exports.useEffect(() => {
+    if (!customMarkerId) return;
+    if (activeTooltipId === markerId) {
+      setTooltipOpenStatus(true);
+    } else {
+      setTooltipOpenStatus(false);
+    }
+  }, [customMarkerId, activeTooltipId, markerId]);
+  const [, forceUpdate] = react_exports.useReducer((x) => x + 1, 0);
+  react_exports.useEffect(() => {
+    if (!isTooltipOpen || !map.current || typeof map.current.on !== "function") {
+      return void 0;
+    }
+    let rafId = null;
+    const handleMapMove = () => {
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          forceUpdate();
+          rafId = null;
+        });
+      }
+    };
+    mapMoveHandlerRef.current = handleMapMove;
+    map.current.on("move", handleMapMove);
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      cleanupMapMoveHandler();
+    };
+  }, [isTooltipOpen, map, cleanupMapMoveHandler]);
+  react_exports.useEffect(
+    () => () => {
+      cancelCloseTimeout();
+      cleanupPendingMoveEnd();
+      cleanupMapMoveHandler();
+      cleanupMarker();
+    },
+    [cancelCloseTimeout, cleanupPendingMoveEnd, cleanupMapMoveHandler, cleanupMarker]
+  );
   const filteredAdditionalFields = additionalFields.filter(({ value }) => value && String(value) !== "0");
-  const showTooltip = showCoordinates || filteredAdditionalFields.length || areaId && areaValue;
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" } }, /* @__PURE__ */ react_exports.createElement(
+  const showTooltip = showCoordinates || filteredAdditionalFields.length || areaId && !Number.isNaN(areaValue);
+  const isTooltipVisible = activeTooltipId === markerId && (isTooltipOpen || customMarkerId !== void 0);
+  const childrenWithTooltipId = react_exports.useMemo(() => {
+    if (!children) return null;
+    if (!react_exports.isValidElement(children)) return children;
+    return react_exports.cloneElement(children, {
+      "aria-describedby": tooltipId
+    });
+  }, [children, tooltipId]);
+  return /* @__PURE__ */ react_exports.createElement("div", null, /* @__PURE__ */ react_exports.createElement(
     "div",
     __spreadValues({
-      style: {
-        visibility: isChoroplethTooltip() ? "hidden" : "visible"
-      },
       ref: container,
       "data-test": "map-marker",
-      onMouseOver: openTooltip,
-      onMouseLeave: closeTooltip,
-      onFocus: openTooltip,
-      onBlur: closeTooltip
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
     }, otherProps),
-    children
+    childrenWithTooltipId
   ), /* @__PURE__ */ react_exports.createElement("div", null, showTooltip && /* @__PURE__ */ react_exports.createElement(
-    Tooltip_default,
+    Tooltip_default2,
     {
-      open: isChoroplethTooltip() ? isChoroplethTooltipOpen : isTooltipOpen,
+      id: tooltipId,
+      open: isTooltipVisible,
       anchor: container.current,
-      latitude: isChoroplethTooltip() ? null : latitude,
-      longitude: isChoroplethTooltip() ? null : longitude,
+      latitude: showCoordinates ? latitude : null,
+      longitude: showCoordinates ? longitude : null,
       areaId,
       areaValue,
       additionalFields,
       showCoordinates,
-      tooltipHeader
+      tooltipHeader,
+      stylesManagedExternally,
+      onMouseEnter: handlePopoverMouseEnter,
+      onMouseLeave: handlePopoverMouseLeave
     }
   )));
 };
 var MarkerWrapper_default = MarkerWrapper;
 
+// src/Map/PureMap/useRovingTabindex.ts
+var useRovingTabindex = (map) => {
+  const elementRefsRef = react_exports.useRef(
+    new globalThis.Map()
+  );
+  const focusedIndexRef = react_exports.useRef(0);
+  const moveFocusOnElementRemove = react_exports.useCallback((removedElementIndex) => {
+    const removedElement = elementRefsRef.current.get(removedElementIndex);
+    const wasFocused = (removedElement == null ? void 0 : removedElement.getAttribute("tabindex")) === "0";
+    elementRefsRef.current.delete(removedElementIndex);
+    if (wasFocused) {
+      let replacementIndex = null;
+      const indices = Array.from(elementRefsRef.current.keys()).sort((a, b) => a - b);
+      const nextIndex = indices.find((i) => i > removedElementIndex);
+      if (nextIndex !== void 0) {
+        replacementIndex = nextIndex;
+      } else if (indices.length > 0) {
+        replacementIndex = indices[indices.length - 1];
+      }
+      if (replacementIndex !== null) {
+        focusedIndexRef.current = replacementIndex;
+        const replacementElement = elementRefsRef.current.get(replacementIndex);
+        if (replacementElement) {
+          replacementElement.setAttribute("tabindex", "0");
+        }
+      } else {
+        focusedIndexRef.current = 0;
+      }
+    }
+  }, []);
+  const setElementRef = react_exports.useCallback(
+    (index, element) => {
+      if (element) {
+        const existingElement = elementRefsRef.current.get(index);
+        const hadFocus = (existingElement == null ? void 0 : existingElement.getAttribute("tabindex")) === "0";
+        elementRefsRef.current.set(index, element);
+        if (hadFocus) {
+          element.setAttribute("tabindex", "0");
+        } else {
+          element.setAttribute("tabindex", index === focusedIndexRef.current ? "0" : "-1");
+        }
+      } else {
+        moveFocusOnElementRemove(index);
+      }
+    },
+    [moveFocusOnElementRemove]
+  );
+  const resolveFocusedIndex = react_exports.useCallback(() => {
+    let currentIndex = focusedIndexRef.current;
+    if (!elementRefsRef.current.has(currentIndex)) {
+      for (const [index, element] of elementRefsRef.current.entries()) {
+        if (element.getAttribute("tabindex") === "0") {
+          currentIndex = index;
+          focusedIndexRef.current = index;
+          break;
+        }
+      }
+    }
+    return currentIndex;
+  }, []);
+  const handleKeyDown = react_exports.useCallback(
+    (e) => {
+      const currentIndex = resolveFocusedIndex();
+      const count = elementRefsRef.current.size;
+      let newIndex;
+      switch (e.key) {
+        case KEYBOARD_KEYS.ARROW_RIGHT:
+        case KEYBOARD_KEYS.ARROW_DOWN:
+          e.preventDefault();
+          newIndex = currentIndex === count - 1 ? 0 : currentIndex + 1;
+          break;
+        case KEYBOARD_KEYS.ARROW_LEFT:
+        case KEYBOARD_KEYS.ARROW_UP:
+          e.preventDefault();
+          newIndex = currentIndex === 0 ? count - 1 : currentIndex - 1;
+          break;
+        case KEYBOARD_KEYS.HOME:
+          e.preventDefault();
+          newIndex = 0;
+          break;
+        case KEYBOARD_KEYS.END:
+          e.preventDefault();
+          newIndex = count - 1;
+          break;
+        default:
+          return;
+      }
+      if (newIndex !== currentIndex) {
+        focusedIndexRef.current = newIndex;
+        const oldElement = elementRefsRef.current.get(currentIndex);
+        const newElement = elementRefsRef.current.get(newIndex);
+        if (oldElement) {
+          oldElement.setAttribute("tabindex", "-1");
+        }
+        if (newElement) {
+          newElement.setAttribute("tabindex", "0");
+          requestAnimationFrame(() => {
+            newElement.focus();
+          });
+        }
+      }
+    },
+    [resolveFocusedIndex]
+  );
+  const handleFocus = react_exports.useCallback(() => {
+    var _a;
+    if ((_a = map.current) == null ? void 0 : _a.keyboard) {
+      map.current.keyboard.disable();
+    }
+  }, [map]);
+  const handleBlur = react_exports.useCallback(() => {
+    var _a;
+    if ((_a = map.current) == null ? void 0 : _a.keyboard) {
+      map.current.keyboard.enable();
+    }
+  }, [map]);
+  return {
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    setElementRef
+  };
+};
+
 // src/Map/PureMap/BubbleLayer.tsx
 var GEO_BOUND_PREFIX = "_geo_bounds_";
 var GEO_LAT_AND_LONG_FIELD = ["_geo_long_field", "_geo_lat_field"];
@@ -869,21 +1239,51 @@ var PieSegment = react_exports.memo(
     color,
     themeColor,
     segmentMetadata,
-    handleBubbleClick
+    handleBubbleClick,
+    ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    elementRef,
+    hasEventHandlers
   }) => {
     const { name, value } = segmentMetadata != null ? segmentMetadata : {};
-    const handleSegmentClick = react_exports.useCallback(
+    const handleInteraction = react_exports.useCallback(
       (e) => {
+        if ("key" in e && e.key !== KEYBOARD_KEYS.ENTER && e.key !== KEYBOARD_KEYS.SPACE) {
+          return;
+        }
+        e.preventDefault();
         handleBubbleClick(e, name, value);
       },
       [name, value, handleBubbleClick]
     );
+    const handleKeyDown = react_exports.useCallback(
+      (e) => {
+        if (hasEventHandlers && (e.key === KEYBOARD_KEYS.ENTER || e.key === KEYBOARD_KEYS.SPACE)) {
+          handleInteraction(e);
+        }
+        if (onKeyDown) {
+          onKeyDown(e);
+        }
+      },
+      [hasEventHandlers, handleInteraction, onKeyDown]
+    );
     if (end - start === 1) {
       return /* @__PURE__ */ react_exports.createElement(
         BubbleSegment,
         {
+          $hasEventHandlers: hasEventHandlers,
+          ref: elementRef,
           as: "circle",
-          onClick: handleSegmentClick,
+          role: hasEventHandlers ? "button" : "graphics-symbol",
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedBy,
+          onClick: hasEventHandlers ? handleInteraction : void 0,
+          onKeyDown: handleKeyDown,
+          onFocus,
+          onBlur,
           cx: radius,
           cy: radius,
           r: radius,
@@ -904,8 +1304,16 @@ var PieSegment = react_exports.memo(
     return /* @__PURE__ */ react_exports.createElement(
       BubbleSegment,
       {
+        $hasEventHandlers: hasEventHandlers,
+        ref: elementRef,
         as: "path",
-        onClick: handleSegmentClick,
+        role: hasEventHandlers ? "button" : "graphics-symbol",
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        onClick: hasEventHandlers ? handleInteraction : void 0,
+        onKeyDown: handleKeyDown,
+        onFocus,
+        onBlur,
         d: `M ${radius} ${radius} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${arc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius} ${radius} A 0 0 0 ${arc} 0 ${radius} ${radius}`,
         fill: color,
         fillOpacity: 0.8,
@@ -920,14 +1328,122 @@ PieSegment.displayName = "MapBubblePieSegment";
 var BubbleSegment = styled_components_default.path`
     transition: 0.2s ease-in-out;
     transition-property: fill, stroke;
+    ${({ $hasEventHandlers }) => $hasEventHandlers && "cursor: pointer;"}
+
+    &:focus {
+        outline: none;
+    }
 `;
 var BUBBLE_SEGMENT_DIMMED_STYLES = {
   fill: "rgba(150, 150, 150, 0.3)",
   stroke: "rgba(200, 200, 200, 0.4)"
 };
-var StyledMarkerWrapper = styled_components_default(MarkerWrapper_default)`
-    cursor: pointer;
-`;
+var BubbleSvg = react_exports.memo(
+  ({
+    values,
+    valueRange,
+    tooltipHeader,
+    latitude,
+    longitude,
+    icon,
+    isPie,
+    themeColor,
+    segmentStartIndex,
+    colors,
+    bubbleSize,
+    onClick,
+    "aria-describedby": ariaDescribedBy,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    setElementRef,
+    hasEventHandlers
+  }) => {
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const isBubbleMapIconFlagEnabled = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableBubbleMapIcon);
+    const total = values.reduce((totalValue, v) => totalValue + v, 0);
+    const radius = matchBubbleSize(valueRange, total);
+    const getAriaLabel = react_exports.useCallback(
+      (segmentName, segmentValue) => {
+        let segmentLabel = (0, i18n_exports._)("Map marker");
+        if (tooltipHeader) {
+          segmentLabel = tooltipHeader;
+        } else if (latitude !== void 0 && longitude !== void 0) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("Location: %(lat)s, %(lng)s"), {
+            lat: convertDegToDMS(latitude, "latitude"),
+            lng: convertDegToDMS(longitude, "longitude")
+          });
+        }
+        if (segmentName != null && segmentValue != null) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(locationLabel)s, %(segmentName)s: %(segmentValue)s"), {
+            locationLabel: segmentLabel,
+            segmentName,
+            segmentValue: segmentValue.toString()
+          });
+        }
+        if (hasEventHandlers) {
+          segmentLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(label)s, Click for drilldown"), { label: segmentLabel });
+        }
+        return segmentLabel;
+      },
+      [tooltipHeader, latitude, longitude, hasEventHandlers]
+    );
+    const offsets = [];
+    let runningTotal = 0;
+    values.forEach((count) => {
+      offsets.push(runningTotal);
+      runningTotal += count;
+    });
+    const width = radius * 2;
+    const showIcon = isBubbleMapIconFlagEnabled && radius >= ICON_DISPLAY_CUTOFF && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon));
+    return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie && /* @__PURE__ */ react_exports.createElement(
+      "circle",
+      {
+        cx: radius,
+        cy: radius,
+        r: radius,
+        fill: "none",
+        strokeWidth: 2,
+        stroke: themeColor,
+        strokeOpacity: 0.3
+      }
+    ), values.map((v, i) => {
+      var _a, _b;
+      const globalIndex = segmentStartIndex + i;
+      return /* @__PURE__ */ react_exports.createElement(
+        PieSegment,
+        {
+          key: globalIndex,
+          start: offsets[i] / total,
+          end: (offsets[i] + v) / total,
+          radius,
+          color: colors[i],
+          themeColor,
+          segmentMetadata: bubbleSize[i],
+          handleBubbleClick: onClick,
+          ariaLabel: getAriaLabel((_a = bubbleSize[i]) == null ? void 0 : _a.name, (_b = bubbleSize[i]) == null ? void 0 : _b.value),
+          "aria-describedby": ariaDescribedBy,
+          onKeyDown,
+          onFocus,
+          onBlur,
+          elementRef: setElementRef ? (element) => setElementRef(globalIndex, element) : void 0,
+          hasEventHandlers
+        }
+      );
+    }), showIcon && /* @__PURE__ */ react_exports.createElement(
+      "foreignObject",
+      {
+        x: radius - radius * 0.8 / 2,
+        y: radius - radius * 0.8 / 2,
+        width: radius * 0.8,
+        height: radius * 0.8,
+        style: { pointerEvents: "none" },
+        "data-test": "bubble-icon-wrapper"
+      },
+      /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: radius * 0.8, height: radius * 0.8 })
+    ));
+  }
+);
 var Bubble = react_exports.memo(
   ({
     originalValues,
@@ -943,12 +1459,15 @@ var Bubble = react_exports.memo(
     map,
     handleMapClick,
     icon,
-    showCoordinates
+    showCoordinates,
+    stylesManagedExternally,
+    segmentStartIndex = 0,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    setElementRef,
+    hasEventHandlers
   }) => {
-    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const isBubbleMapIconFlagEnabled = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableBubbleMapIcon
-    );
     const onBubbleClick = react_exports.useCallback(
       (e, name, value) => {
         handleMapClick(e, name, value);
@@ -958,58 +1477,9 @@ var Bubble = react_exports.memo(
     );
     const allZeros = originalValues.every((v) => v === 0);
     const values = originalValues.map((v) => v > 0 ? v : 0);
-    const total = values.reduce((totalValue, v) => totalValue + v, 0);
-    const radius = matchBubbleSize(valueRange, total);
-    const bubble = react_exports.useMemo(() => {
-      if (allZeros || !originalValues.length) return null;
-      const offsets = [];
-      let runningTotal = 0;
-      values.forEach((count) => {
-        offsets.push(runningTotal);
-        runningTotal += count;
-      });
-      const width = radius * 2;
-      return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie && /* @__PURE__ */ react_exports.createElement(
-        "circle",
-        {
-          cx: radius,
-          cy: radius,
-          r: radius,
-          fill: "none",
-          strokeWidth: 2,
-          stroke: themeColor,
-          strokeOpacity: 0.3
-        }
-      ), values.map((v, i) => /* @__PURE__ */ react_exports.createElement(
-        PieSegment,
-        {
-          key: (0, id_exports.createDOMID)(),
-          start: offsets[i] / total,
-          end: (offsets[i] + v) / total,
-          radius,
-          color: colors[i],
-          themeColor,
-          segmentMetadata: bubbleSize[i],
-          handleBubbleClick: onBubbleClick
-        }
-      )));
-    }, [
-      bubbleSize,
-      colors,
-      isPie,
-      onBubbleClick,
-      originalValues,
-      themeColor,
-      allZeros,
-      radius,
-      total,
-      values
-    ]);
-    if (!bubble) {
-      return null;
-    }
+    if (allZeros || !originalValues.length) return null;
     return /* @__PURE__ */ react_exports.createElement(
-      StyledMarkerWrapper,
+      MarkerWrapper_default,
       {
         longitude,
         latitude,
@@ -1017,29 +1487,46 @@ var Bubble = react_exports.memo(
         tooltipHeader,
         map,
         "data-test-type": "bubble",
-        showCoordinates
+        showCoordinates,
+        stylesManagedExternally
       },
-      bubble,
-      isBubbleMapIconFlagEnabled && radius >= ICON_DISPLAY_CUTOFF && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) && /* @__PURE__ */ react_exports.createElement(
-        "div",
+      /* @__PURE__ */ react_exports.createElement(
+        BubbleSvg,
         {
-          "data-test": "bubble-icon-wrapper",
-          style: {
-            position: "absolute",
-            top: `${radius}px`,
-            left: `${radius}px`,
-            transform: "translate(-50%, -50%)",
-            pointerEvents: "none"
-          }
-        },
-        /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: radius * 0.8, height: radius * 0.8 })
+          values,
+          valueRange,
+          colors,
+          bubbleSize,
+          isPie,
+          themeColor,
+          segmentStartIndex,
+          latitude,
+          longitude,
+          tooltipHeader,
+          icon,
+          onClick: onBubbleClick,
+          onKeyDown,
+          onFocus,
+          onBlur,
+          setElementRef,
+          hasEventHandlers
+        }
       )
     );
   }
 );
 Bubble.displayName = "MapBubble";
 var BubbleLayer = (props) => {
-  const { bubbleLayer, themeColorScheme, map, zoom, onMapClick, showCoordinates } = props;
+  const {
+    bubbleLayer,
+    themeColorScheme,
+    map,
+    zoom,
+    onMapClick,
+    showCoordinates,
+    stylesManagedExternally = false,
+    hasEventHandlers
+  } = props;
   bubbleLayer.seriesColors = bubbleLayer.seriesColors || DEFAULT_SERIES_COLORS;
   bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];
   bubbleLayer.icon = bubbleLayer.icon || [];
@@ -1079,7 +1566,15 @@ var BubbleLayer = (props) => {
     },
     [dataToRender, onMapClick]
   );
+  const { handleKeyDown, handleFocus, handleBlur, setElementRef } = useRovingTabindex(map);
+  let globalSegmentIndex = 0;
   return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, dataToRender.map((datum, i) => {
+    const allZeros = datum.data.values.every((v) => v === 0);
+    const segmentStartIndex = globalSegmentIndex;
+    const segmentCount = datum.data.values.length;
+    if (!allZeros) {
+      globalSegmentIndex += segmentCount;
+    }
     const colors = dynamicColors ? [
       dataToRender.map(
         (obj) => (0, colorUtils_exports.isColor)(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : DEFAULT_CLUSTER_COLOR
@@ -1117,7 +1612,14 @@ var BubbleLayer = (props) => {
         map,
         handleMapClick: (e, name, value) => handleMapClick(e, name, value, i),
         icon: bubbleLayer.icon[datum.idx],
-        showCoordinates
+        showCoordinates,
+        stylesManagedExternally,
+        segmentStartIndex,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        setElementRef,
+        hasEventHandlers
       }
     );
   }));
@@ -1140,37 +1642,6 @@ var PureMapContainer = styled_components_default.div.attrs({
         z-index: 0;
     }
 
-    // overwrite maplibregl zoom control styles
-    .maplibregl-ctrl-top-left {
-        display: ${(props) => props.showZoomControls ? "block" : "none"};
-        position: absolute;
-        top: 12px;
-        left: 16px;
-        .maplibregl-ctrl-group {
-            width: 40px !important;
-            height: 87px !important;
-            border-radius: 4px;
-            margin: 8px 0px;
-            background-color: ${(props) => props.controlBackgroundColor};
-            box-shadow:
-                0px 26px 103px rgba(0, 0, 0, 0.64),
-                0px 11px 18px rgba(0, 0, 0, 0.32),
-                0px 3px 6px rgba(0, 0, 0, 0.3);
-            & button {
-                width: 40px;
-                height: 43px;
-                border-top: 0;
-            }
-            .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
-                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
-            }
-
-            .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
-                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="3" viewBox="0 0 14 3" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
-            }
-        }
-    }
-
     // overwrite maplibregl scale styles
     .maplibregl-ctrl-bottom-left {
         display: ${(props) => props.showScale ? "block" : "none"};
@@ -1203,7 +1674,8 @@ var PureMapContainer = styled_components_default.div.attrs({
         }
     }
 
-    :has(${BubbleSegment}:hover) ${BubbleSegment}:not(:hover) {
+    /* When a segment is hovered/focused, dim other segments */
+    :has(${BubbleSegment}:is(:focus-visible, :hover)) ${BubbleSegment}:not(:is(:focus-visible, :hover)) {
         fill: ${BUBBLE_SEGMENT_DIMMED_STYLES.fill};
         stroke: ${BUBBLE_SEGMENT_DIMMED_STYLES.stroke};
     }
@@ -1211,29 +1683,92 @@ var PureMapContainer = styled_components_default.div.attrs({
 var PureMapContainer_default = PureMapContainer;
 
 // src/Map/PureMap/MarkerLayer.tsx
+var svgFocusStyle = styled_components_exports.css`
+    &:focus {
+        outline: none;
+        filter: drop-shadow(2px 0px 1px ${themes_exports.variables.focusColor})
+            drop-shadow(-2px 0px 1px ${themes_exports.variables.focusColor}) drop-shadow(0px 2px 1px ${themes_exports.variables.focusColor})
+            drop-shadow(0px -2px 1px ${themes_exports.variables.focusColor});
+    }
+`;
+var FocusableSvg = styled_components_default.svg`
+    ${({ $hasEventHandlers }) => $hasEventHandlers && "cursor: pointer;"}
+    ${svgFocusStyle}
+`;
 var MarkerIcon = (_a) => {
-  var _b = _a, { theme, color } = _b, otherProps = __objRest(_b, ["theme", "color"]);
+  var _b = _a, {
+    theme,
+    color,
+    ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    onInteraction,
+    onKeyDown: onKeyDownProp,
+    onFocus,
+    onBlur,
+    elementRef,
+    hasEventHandlers
+  } = _b, otherProps = __objRest(_b, [
+    "theme",
+    "color",
+    "ariaLabel",
+    "aria-describedby",
+    "onInteraction",
+    "onKeyDown",
+    "onFocus",
+    "onBlur",
+    "elementRef",
+    "hasEventHandlers"
+  ]);
   const strokeOpacity = theme === "light" ? 0.7 : 0.15;
-  return /* @__PURE__ */ react_exports.createElement("svg", __spreadValues({ width: 22, height: 28, fill: "none" }, otherProps), /* @__PURE__ */ react_exports.createElement(
-    "path",
-    {
-      d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
-      fill: color
-    }
-  ), /* @__PURE__ */ react_exports.createElement(
-    "path",
-    {
-      d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
-      stroke: "#08090A"
-    }
-  ), /* @__PURE__ */ react_exports.createElement(
-    "path",
-    {
-      d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
-      stroke: color,
-      strokeOpacity
-    }
-  ));
+  const handleKeyDown = react_exports.useCallback(
+    (e) => {
+      if (hasEventHandlers && (e.key === KEYBOARD_KEYS.ENTER || e.key === KEYBOARD_KEYS.SPACE)) {
+        e.preventDefault();
+        onInteraction == null ? void 0 : onInteraction(e);
+      }
+      onKeyDownProp == null ? void 0 : onKeyDownProp(e);
+    },
+    [hasEventHandlers, onInteraction, onKeyDownProp]
+  );
+  return /* @__PURE__ */ react_exports.createElement(
+    FocusableSvg,
+    __spreadValues({
+      $hasEventHandlers: hasEventHandlers,
+      ref: elementRef,
+      width: 22,
+      height: 28,
+      fill: "none",
+      role: hasEventHandlers ? "button" : "graphics-symbol",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
+      onClick: hasEventHandlers ? onInteraction : void 0,
+      onKeyDown: handleKeyDown,
+      onFocus,
+      onBlur
+    }, otherProps),
+    /* @__PURE__ */ react_exports.createElement(
+      "path",
+      {
+        d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+        fill: color
+      }
+    ),
+    /* @__PURE__ */ react_exports.createElement(
+      "path",
+      {
+        d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+        stroke: "#08090A"
+      }
+    ),
+    /* @__PURE__ */ react_exports.createElement(
+      "path",
+      {
+        d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+        stroke: color,
+        strokeOpacity
+      }
+    )
+  );
 };
 var Marker2 = react_exports.memo(
   ({
@@ -1245,14 +1780,58 @@ var Marker2 = react_exports.memo(
     additionalFields,
     handleLayerClick,
     showCoordinates,
-    tooltipHeader
+    tooltipHeader,
+    stylesManagedExternally,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    elementRef,
+    hasEventHandlers
   }) => {
+    const ariaLabel = react_exports.useMemo(() => {
+      let markerLabel = (0, i18n_exports._)("Map marker");
+      if (tooltipHeader) {
+        markerLabel = tooltipHeader;
+      } else if (latitude !== void 0 && longitude !== void 0) {
+        markerLabel = (0, format_exports.sprintf)((0, i18n_exports._)("Location: %(lat)s, %(lng)s"), {
+          lat: convertDegToDMS(latitude, "latitude"),
+          lng: convertDegToDMS(longitude, "longitude")
+        });
+      }
+      if (hasEventHandlers) {
+        markerLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(label)s, Click for drilldown"), { label: markerLabel });
+      }
+      return markerLabel;
+    }, [tooltipHeader, latitude, longitude, hasEventHandlers]);
     const icon = react_exports.useMemo(
-      () => /* @__PURE__ */ react_exports.createElement(MarkerIcon, { color, theme: themeColorScheme, onClick: handleLayerClick }),
-      [color, handleLayerClick, themeColorScheme]
+      () => /* @__PURE__ */ react_exports.createElement(
+        MarkerIcon,
+        {
+          color,
+          theme: themeColorScheme,
+          ariaLabel,
+          onInteraction: handleLayerClick,
+          onKeyDown,
+          onFocus,
+          onBlur,
+          elementRef,
+          hasEventHandlers
+        }
+      ),
+      [
+        color,
+        handleLayerClick,
+        themeColorScheme,
+        ariaLabel,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        elementRef,
+        hasEventHandlers
+      ]
     );
     return /* @__PURE__ */ react_exports.createElement(
-      StyledMarkerWrapper2,
+      StyledMarkerWrapper,
       {
         latitude,
         longitude,
@@ -1260,20 +1839,21 @@ var Marker2 = react_exports.memo(
         additionalFields,
         "data-test-type": "marker",
         showCoordinates,
-        tooltipHeader
+        tooltipHeader,
+        stylesManagedExternally
       },
       icon
     );
   }
 );
 Marker2.displayName = "MapMarker";
-var StyledMarkerWrapper2 = styled_components_default(MarkerWrapper_default)`
+var StyledMarkerWrapper = styled_components_default(MarkerWrapper_default)`
     width: 22px;
     height: 28px;
     cursor: pointer;
 `;
 var generateMarkerWrapperProps = (markerLayer, showCoordinates, onMapClick = lodash_exports.noop) => {
-  var _a;
+  var _a, _b;
   const latArray = markerLayer.latitude;
   const lonArray = markerLayer.longitude;
   const isStaticColor = !markerLayer.dataColors;
@@ -1287,8 +1867,8 @@ var generateMarkerWrapperProps = (markerLayer, showCoordinates, onMapClick = lod
     const staticColor = markerLayer.seriesColors && (0, colorUtils_exports.isColor)(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : DEFAULT_CLUSTER_COLOR;
     const dynamicColor = markerLayer.dataColors && (0, colorUtils_exports.isColor)(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : DEFAULT_CLUSTER_COLOR;
     const color = isStaticColor ? staticColor : dynamicColor;
-    const tooltipHeader = markerLayer.tooltipHeaderField && markerLayer.tooltipHeaderField[i];
-    const additionalFields = ((_a = markerLayer.metadata) == null ? void 0 : _a[i]) ? markerLayer.additionalTooltipFields.map((field) => ({
+    const tooltipHeader = (_a = markerLayer.tooltipHeaderField) == null ? void 0 : _a[i];
+    const additionalFields = ((_b = markerLayer.metadata) == null ? void 0 : _b[i]) ? markerLayer.additionalTooltipFields.map((field) => ({
       name: field,
       value: markerLayer.metadata[i][field]
     })) : [];
@@ -1315,12 +1895,21 @@ var generateMarkerWrapperProps = (markerLayer, showCoordinates, onMapClick = lod
   return markerProps;
 };
 var MarkerLayer = (props) => {
-  const { map, themeColorScheme, markerLayer, onMapClick, showCoordinates = true } = props;
+  const {
+    map,
+    themeColorScheme,
+    markerLayer,
+    onMapClick,
+    showCoordinates = true,
+    stylesManagedExternally = false,
+    hasEventHandlers
+  } = props;
   markerLayer.seriesColors = markerLayer.seriesColors || DEFAULT_SERIES_COLORS;
   const markerPropsList = react_exports.useMemo(
     () => generateMarkerWrapperProps(markerLayer, showCoordinates, onMapClick),
     [markerLayer, onMapClick, showCoordinates]
   );
+  const { handleKeyDown, handleFocus, handleBlur, setElementRef } = useRovingTabindex(map);
   return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, markerPropsList.map((markerProps, i) => /* @__PURE__ */ react_exports.createElement(
     Marker2,
     __spreadProps(__spreadValues({
@@ -1328,7 +1917,13 @@ var MarkerLayer = (props) => {
       themeColorScheme,
       map
     }, markerProps), {
-      showCoordinates
+      showCoordinates,
+      stylesManagedExternally,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      elementRef: (element) => setElementRef(i, element),
+      hasEventHandlers
     })
   )));
 };
@@ -1341,24 +1936,28 @@ var ClusterLayer = ({
   zoom,
   map,
   onMapClick,
-  showCoordinates
+  showCoordinates,
+  stylesManagedExternally = false,
+  hasEventHandlers
 }) => {
   var _a;
   if (((_a = map == null ? void 0 : map.current) == null ? void 0 : _a.isStyleLoaded) && [clusterLayer.longitude, clusterLayer.latitude].every(Array.isArray)) {
     if ((clusterLayer == null ? void 0 : clusterLayer.type) === visualization_schemas_exports.LAYER_TYPE.Marker && !("geobin" in clusterLayer)) {
-      return /* @__PURE__ */ react_exports.createElement(
+      return /* @__PURE__ */ react_exports.createElement(MapProvider, null, /* @__PURE__ */ react_exports.createElement(
         MarkerLayer_default,
         {
           markerLayer: clusterLayer,
           themeColorScheme,
           map,
           onMapClick,
-          showCoordinates
+          showCoordinates,
+          stylesManagedExternally,
+          hasEventHandlers
         }
-      );
+      ));
     }
     if ((clusterLayer == null ? void 0 : clusterLayer.type) === visualization_schemas_exports.LAYER_TYPE.Bubble && Array.isArray(clusterLayer.bubbleSize)) {
-      return /* @__PURE__ */ react_exports.createElement(
+      return /* @__PURE__ */ react_exports.createElement(MapProvider, null, /* @__PURE__ */ react_exports.createElement(
         BubbleLayer_default,
         {
           bubbleLayer: clusterLayer,
@@ -1366,9 +1965,11 @@ var ClusterLayer = ({
           map,
           zoom,
           onMapClick,
-          showCoordinates
+          showCoordinates,
+          stylesManagedExternally,
+          hasEventHandlers
         }
-      );
+      ));
     }
   }
   return null;
@@ -1379,6 +1980,25 @@ var ClusterLayer_default = ClusterLayer;
 var getShapeId = (id) => `shape-${id}`;
 var getSourceId = (id) => `source-${id}`;
 var getStrokeId = (id) => `stroke-${id}`;
+var getCentroid = (geom) => {
+  if (!(geom == null ? void 0 : geom.coordinates)) {
+    return null;
+  }
+  const flattenCoordinates = (coords) => {
+    if (typeof coords[0] === "number") return [coords];
+    return coords.flatMap(flattenCoordinates);
+  };
+  const allCoords = flattenCoordinates(geom.coordinates);
+  if (allCoords.length === 0) {
+    return null;
+  }
+  const lngs = allCoords.map((c) => c[0]);
+  const lats = allCoords.map((c) => c[1]);
+  return [lngs.reduce((a, b) => a + b, 0) / lngs.length, lats.reduce((a, b) => a + b, 0) / lats.length];
+};
+var FocusableShapeButton = styled_components_default.button`
+    ${themes_exports.mixins.screenReaderContent()};
+`;
 var compareGeom = (prev, next) => {
   if (prev !== null && next !== null) {
     return prev.type === next.type && (0, lodash_exports.isEqual)(prev.coordinates, next.coordinates);
@@ -1386,7 +2006,7 @@ var compareGeom = (prev, next) => {
   return prev === null && next === null;
 };
 var compareChoropleth = (prevProps, nextProps) => {
-  return compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && (0, lodash_exports.isEqual)(prevProps.additionalFields, nextProps.additionalFields) && prevProps.tooltipHeader === nextProps.tooltipHeader && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
+  return compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && (0, lodash_exports.isEqual)(prevProps.additionalFields, nextProps.additionalFields) && prevProps.tooltipHeader === nextProps.tooltipHeader && prevProps.handleMapClick === nextProps.handleMapClick && prevProps.hasEventHandlers === nextProps.hasEventHandlers;
 };
 var cleanupChoropleth = (shapeId, sourceId, strokeId, map) => {
   var _a, _b, _c;
@@ -1423,26 +2043,40 @@ var Choropleth = react_exports.memo(
     isThemeChanged,
     additionalFields,
     tooltipHeader,
-    handleMapClick
+    handleMapClick,
+    stylesManagedExternally = false,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    elementRef,
+    hasEventHandlers
   }) => {
     const sourceId = getSourceId(id);
     const shapeId = getShapeId(id);
     const strokeId = getStrokeId(id);
-    const formattedGeomData = {
-      type: "Feature",
-      geometry: geomData,
-      properties: {}
-    };
-    const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
-    const [mouseLat, setmouseLat] = react_exports.useState(0);
-    const [mouseLng, setmouseLng] = react_exports.useState(0);
-    const openTooltip = react_exports.useCallback(() => {
-      setTooltipOpenStatus(true);
-    }, []);
-    const closeTooltip = react_exports.useCallback(() => {
-      setTooltipOpenStatus(false);
-    }, []);
-    const updateChoropleth = react_exports.useCallback(() => {
+    const formattedGeomData = react_exports.useMemo(
+      () => ({
+        type: "Feature",
+        geometry: geomData,
+        properties: {}
+      }),
+      [geomData]
+    );
+    const [isFocused, setIsFocused] = react_exports.useState(false);
+    const [isHovered, setIsHovered] = react_exports.useState(false);
+    const [centroidLat, centroidLng] = react_exports.useMemo(() => {
+      const centroid = getCentroid(geomData);
+      if (!centroid) {
+        return [null, null];
+      }
+      const [lng, lat] = centroid;
+      return [lat, lng];
+    }, [geomData]);
+    const [mouseLat, setmouseLat] = react_exports.useState(centroidLat != null ? centroidLat : 0);
+    const [mouseLng, setmouseLng] = react_exports.useState(centroidLng != null ? centroidLng : 0);
+    const markerId = react_exports.useMemo(() => `choropleth-${shapeId}`, [shapeId]);
+    const { activeChoroplethId, setActiveChoroplethId, setActiveTooltipId } = useMapContext();
+    const updateLayers = react_exports.useCallback(() => {
       cleanupChoropleth(shapeId, sourceId, strokeId, map);
       map.current.addSource(sourceId, {
         type: "geojson",
@@ -1470,41 +2104,142 @@ var Choropleth = react_exports.memo(
           }
         });
       }
-      map.current.on("mousemove", shapeId, (e) => {
-        const mouseLngLat = e.lngLat;
-        setmouseLat(mouseLngLat.lat);
-        setmouseLng(mouseLngLat.lng);
-        openTooltip();
+    }, [shapeId, sourceId, strokeId, map, formattedGeomData, color, opacity, strokeColor]);
+    const registerEventHandlers = react_exports.useCallback(() => {
+      var _a;
+      const layer = (_a = map.current) == null ? void 0 : _a.getLayer(shapeId);
+      if (!layer) return () => {
+      };
+      const handleMouseMove = (e) => {
+        setmouseLat(e.lngLat.lat);
+        setmouseLng(e.lngLat.lng);
+        setIsHovered(true);
+        setActiveTooltipId(markerId);
         map.current.getCanvas().style.cursor = "pointer";
-      });
-      map.current.on("mouseleave", shapeId, () => {
-        closeTooltip();
+      };
+      const handleMouseLeave = () => {
+        setIsHovered(false);
+        setActiveTooltipId(null);
         map.current.getCanvas().style.cursor = "";
-      });
-      map.current.on("click", shapeId, (e) => {
-        handleMapClick(e);
-      });
-    }, [shapeId, sourceId, map, color, opacity, formattedGeomData]);
+      };
+      const handleClick2 = (e) => {
+        if (hasEventHandlers) {
+          handleMapClick == null ? void 0 : handleMapClick(e);
+        }
+      };
+      map.current.on("mousemove", shapeId, handleMouseMove);
+      map.current.on("mouseleave", shapeId, handleMouseLeave);
+      map.current.on("click", shapeId, handleClick2);
+      return () => {
+        if (map.current) {
+          map.current.off("mousemove", shapeId, handleMouseMove);
+          map.current.off("mouseleave", shapeId, handleMouseLeave);
+          map.current.off("click", shapeId, handleClick2);
+        }
+      };
+    }, [shapeId, markerId, map, setActiveTooltipId, hasEventHandlers, handleMapClick]);
+    react_exports.useEffect(() => {
+      updateLayers();
+    }, [updateLayers]);
+    react_exports.useEffect(() => {
+      return registerEventHandlers();
+    }, [registerEventHandlers]);
     react_exports.useEffect(() => {
-      updateChoropleth();
-    }, [map, geomData, color, opacity, id, strokeColor]);
+      if (!map.current) return;
+      const layer = map.current.getLayer(shapeId);
+      if (!layer) return;
+      if (activeChoroplethId === null || activeChoroplethId === shapeId) {
+        map.current.setPaintProperty(shapeId, "fill-opacity", opacity);
+      } else {
+        map.current.setPaintProperty(shapeId, "fill-opacity", opacity * 0.3);
+      }
+    }, [activeChoroplethId, shapeId, opacity, map]);
     react_exports.useEffect(() => () => cleanupChoropleth(shapeId, sourceId, strokeId, map), []);
     if (isThemeChanged) {
-      updateChoropleth();
+      updateLayers();
     }
+    const handleFocus = react_exports.useCallback(() => {
+      if (onFocus) {
+        onFocus();
+      }
+      setIsFocused(true);
+      setmouseLat(centroidLat);
+      setmouseLng(centroidLng);
+      setActiveChoroplethId(shapeId);
+      setActiveTooltipId(markerId);
+    }, [centroidLat, centroidLng, shapeId, markerId, setActiveChoroplethId, setActiveTooltipId, onFocus]);
+    const handleBlur = react_exports.useCallback(() => {
+      setIsFocused(false);
+      setActiveChoroplethId(null);
+      setActiveTooltipId(null);
+      onBlur == null ? void 0 : onBlur();
+    }, [setActiveChoroplethId, setActiveTooltipId, onBlur]);
+    const handleKeyDown = react_exports.useCallback(
+      (e) => {
+        var _a, _b;
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        if (hasEventHandlers && (e.key === KEYBOARD_KEYS.ENTER || e.key === KEYBOARD_KEYS.SPACE)) {
+          e.preventDefault();
+          const mockEvent = {
+            lngLat: {
+              lng: (_a = mouseLng != null ? mouseLng : centroidLng) != null ? _a : 0,
+              lat: (_b = mouseLat != null ? mouseLat : centroidLat) != null ? _b : 0
+            },
+            originalEvent: e
+          };
+          handleMapClick(mockEvent);
+        }
+      },
+      [hasEventHandlers, handleMapClick, onKeyDown, centroidLat, centroidLng, mouseLat, mouseLng]
+    );
+    const tooltipPosition = react_exports.useMemo(() => {
+      if (isFocused) return { lat: centroidLat, lng: centroidLng };
+      if (!isHovered || !map.current) return { lat: mouseLat, lng: mouseLng };
+      const mousePoint = map.current.project([mouseLng, mouseLat]);
+      mousePoint.y -= 24;
+      const offsetCoords = map.current.unproject(mousePoint);
+      return { lat: offsetCoords.lat, lng: offsetCoords.lng };
+    }, [isFocused, isHovered, mouseLat, mouseLng, centroidLat, centroidLng, map]);
+    const hasCentroid = centroidLat !== null && centroidLng !== null;
+    const ariaLabel = react_exports.useMemo(() => {
+      const formattedAreaValue = typeof areaValue === "number" && !Number.isNaN(areaValue) ? areaValue.toString() : "N/A";
+      let choroplethLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(areaId)s: %(areaValue)s"), {
+        areaId: areaId.toString(),
+        areaValue: formattedAreaValue
+      });
+      if (hasEventHandlers) {
+        choroplethLabel = (0, format_exports.sprintf)((0, i18n_exports._)("%(label)s, Click for drilldown"), { label: choroplethLabel });
+      }
+      return choroplethLabel;
+    }, [areaId, areaValue, hasEventHandlers]);
     return /* @__PURE__ */ react_exports.createElement(
       MarkerWrapper_default,
       {
-        isChoroplethTooltipOpen: isTooltipOpen,
         additionalFields,
         tooltipHeader,
-        latitude: mouseLat,
-        longitude: mouseLng,
+        latitude: tooltipPosition.lat,
+        longitude: tooltipPosition.lng,
         map,
         areaId,
-        areaValue
+        areaValue,
+        stylesManagedExternally,
+        customMarkerId: markerId,
+        showCoordinates: false
       },
-      /* @__PURE__ */ react_exports.createElement("div", { "data-test": "choropleth-anchor", style: { padding: "24px", visibility: "hidden" } })
+      /* @__PURE__ */ react_exports.createElement(
+        FocusableShapeButton,
+        {
+          "data-test": "choropleth-anchor",
+          ref: elementRef,
+          role: hasEventHandlers && hasCentroid ? "button" : "graphics-symbol",
+          "aria-label": ariaLabel,
+          "aria-hidden": !hasCentroid,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown,
+          onClick: hasEventHandlers ? handleMapClick : void 0
+        }
+      )
     );
   },
   compareChoropleth
@@ -1512,7 +2247,15 @@ var Choropleth = react_exports.memo(
 Choropleth.displayName = "MapChoropleth";
 var ChoroplethLayer = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { map, choroplethLayer, isThemeChanged, setIsThemeChanged, onMapClick } = props;
+  const {
+    map,
+    choroplethLayer,
+    isThemeChanged,
+    setIsThemeChanged,
+    onMapClick,
+    stylesManagedExternally = false,
+    hasEventHandlers
+  } = props;
   const cfgOpacity = Math.min(Math.max(choroplethLayer == null ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
   const scaledOpacities = (_a = getScaledOpacities(choroplethLayer == null ? void 0 : choroplethLayer.dataColors, cfgOpacity)) != null ? _a : [];
   const colors = (_b = choroplethLayer == null ? void 0 : choroplethLayer.dataColors) == null ? void 0 : _b.map((color) => (color == null ? void 0 : color.length) > 7 ? color.slice(0, 7) : color);
@@ -1522,6 +2265,7 @@ var ChoroplethLayer = (props) => {
     (_f = (_e = choroplethLayer == null ? void 0 : choroplethLayer.geom) == null ? void 0 : _e.length) != null ? _f : 0,
     (choroplethLayer == null ? void 0 : choroplethLayer.resultLimit) ? choroplethLayer.resultLimit : DEFAULT_RESULT_LIMIT
   );
+  const { handleKeyDown, handleFocus, handleBlur, setElementRef } = useRovingTabindex(map);
   const areaIdSliced = (_h = (_g = choroplethLayer == null ? void 0 : choroplethLayer.areaIds) == null ? void 0 : _g.slice(0, limit)) != null ? _h : [];
   const uniqueAreaIdSliced = (0, lodash_exports.uniq)(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map((id, i) => `${id}${i}`) : areaIdSliced;
   const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map((choroplethMetadata) => {
@@ -1561,8 +2305,14 @@ var ChoroplethLayer = (props) => {
         areaId,
         areaValue,
         additionalFields: additionalFields[i],
-        tooltipHeader: tooltipHeaderField && tooltipHeaderField[i],
-        handleMapClick: (e) => handleMapClick(e, i)
+        tooltipHeader: tooltipHeaderField == null ? void 0 : tooltipHeaderField[i],
+        handleMapClick: (e) => handleMapClick(e, i),
+        stylesManagedExternally,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        elementRef: (element) => setElementRef(i, element),
+        hasEventHandlers
       }
     );
   }));
@@ -1574,32 +2324,41 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var Message_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualization-context/GeoRegistry
 var GeoRegistry_exports = {};
 __export(GeoRegistry_exports, {
   default: () => GeoRegistry_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
+var defaultImport28 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
 __reExport(GeoRegistry_exports, require("@splunk/visualization-context/GeoRegistry"));
-var GeoRegistry_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var GeoRegistry_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualization-context/GeoJsonProvider
 var GeoJsonProvider_exports = {};
 __export(GeoJsonProvider_exports, {
   default: () => GeoJsonProvider_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
+var defaultImport29 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
 __reExport(GeoJsonProvider_exports, require("@splunk/visualization-context/GeoJsonProvider"));
-var GeoJsonProvider_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var GeoJsonProvider_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/Map/PureMap/LocalChoroplethLayer.tsx
 var LocalChoroplethLayer = (props) => {
   var _a, _b;
-  const { width, height, map, choroplethLayer, isThemeChanged, setIsThemeChanged, onMapClick } = props;
+  const {
+    width,
+    height,
+    map,
+    choroplethLayer,
+    isThemeChanged,
+    setIsThemeChanged,
+    onMapClick,
+    hasEventHandlers
+  } = props;
   const cfgOpacity = Math.min(Math.max(choroplethLayer == null ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
   const emptyFeature = {
     type: "Feature",
@@ -1616,6 +2375,7 @@ var LocalChoroplethLayer = (props) => {
   const [geoJsonError, setGeoJsonError] = react_exports.useState({
     message: ""
   });
+  const { handleKeyDown, handleFocus, handleBlur, setElementRef } = useRovingTabindex(map);
   react_exports.useEffect(() => {
     let isMounted = true;
     const geoRegistry = GeoRegistry_default.create();
@@ -1718,29 +2478,42 @@ var LocalChoroplethLayer = (props) => {
       level: "error",
       message: geoJsonError.message
     }
-  ), validGeoJson && updatedAllChoroplethData.map((el, i) => {
-    var _a2, _b2;
-    const geometry = (_a2 = geoJson.features[i]) == null ? void 0 : _a2.geometry;
-    const geomData = geometry && (geometry.type === "MultiPolygon" || geometry.type === "Polygon") ? geometry : null;
-    return /* @__PURE__ */ react_exports.createElement(
-      Choropleth,
-      {
-        key: el.name,
-        id: el.name,
-        map,
-        color: el.color,
-        opacity: el.opacity,
-        strokeColor: choroplethLayer.choroplethStrokeColor,
-        areaId: el.name,
-        areaValue: typeof el.areaValue === "number" ? el.areaValue : Number(el.areaValue),
-        handleMapClick: (e) => handleMapClick(e, el.idx),
-        isThemeChanged,
-        geomData,
-        additionalFields: additionalFields[el.idx],
-        tooltipHeader: (_b2 = choroplethLayer.tooltipHeaderField) == null ? void 0 : _b2[el.idx]
+  ), validGeoJson && (() => {
+    let renderIndex = 0;
+    return updatedAllChoroplethData.map((el, i) => {
+      var _a2, _b2;
+      const geometry = (_a2 = geoJson.features[i]) == null ? void 0 : _a2.geometry;
+      const geomData = geometry && (geometry.type === "MultiPolygon" || geometry.type === "Polygon") ? geometry : null;
+      if (!geomData) {
+        return null;
       }
-    );
-  }));
+      const currentRenderIndex = renderIndex;
+      renderIndex += 1;
+      return /* @__PURE__ */ react_exports.createElement(
+        Choropleth,
+        {
+          key: el.name,
+          id: el.name,
+          map,
+          color: el.color,
+          opacity: el.opacity,
+          strokeColor: choroplethLayer.choroplethStrokeColor,
+          areaId: el.name,
+          areaValue: typeof el.areaValue === "number" ? el.areaValue : Number(el.areaValue),
+          handleMapClick: (e) => handleMapClick(e, el.idx),
+          isThemeChanged,
+          geomData,
+          additionalFields: additionalFields[el.idx],
+          tooltipHeader: (_b2 = choroplethLayer.tooltipHeaderField) == null ? void 0 : _b2[el.idx],
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          elementRef: (element) => setElementRef(currentRenderIndex, element),
+          hasEventHandlers
+        }
+      );
+    });
+  })());
 };
 var LocalChoroplethLayer_default = LocalChoroplethLayer;
 
@@ -1760,24 +2533,49 @@ var formatColor = (color) => {
     opacity: chromaColor.alpha()
   };
 };
-var StyledFitToDataButton = styled_components_default(Button_default).attrs({
-  "data-test": "fit-to-data-button"
-})`
+var ControlButtonContainer = styled_components_default.div`
     position: absolute;
-    top: ${(props) => props.showZoomControls ? "115px" : "12px"};
     left: 16px;
     z-index: 3;
-    width: 40px !important;
-    height: 40px;
+    width: 40px;
     border-radius: 4px;
-    border: none;
+    background-color: ${(props) => props.controlBackgroundColor};
     box-shadow:
         0px 26px 103px rgba(0, 0, 0, 0.64),
         0px 11px 18px rgba(0, 0, 0, 0.32),
-        0px 3px 6px rgba(0, 0, 0, 0.3) !important;
-    background-color: ${(props) => props.controlBackgroundColor} !important;
+        0px 3px 6px rgba(0, 0, 0, 0.3);
+`;
+var ZoomControlsContainer = styled_components_default(ControlButtonContainer)`
+    top: 12px;
+    display: flex;
+    flex-direction: column;
+`;
+var FitToDataButtonContainer = styled_components_default(ControlButtonContainer)`
+    top: ${(props) => props.showZoomControls ? "115px" : "12px"};
+`;
+var ControlButton = styled_components_default(Button_default)`
+    width: 40px;
+    height: 43px;
+    border: none;
+    background-color: ${(props) => props.controlBackgroundColor};
     background-repeat: no-repeat;
     background-position: center;
+`;
+var ZoomInButton = styled_components_default(ControlButton).attrs({
+  "data-test": "zoom-in-button",
+  "data-is-first": true
+})`
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
+`;
+var ZoomOutButton = styled_components_default(ControlButton).attrs({
+  "data-test": "zoom-out-button"
+})`
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="3" viewBox="0 0 14 3" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
+`;
+var StyledFitToDataButton = styled_components_default(ControlButton).attrs({
+  "data-test": "fit-to-data-button"
+})`
+    height: 40px;
     background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="${(props) => props.controlIconColorEncoded.color}" stroke-width="2" stroke-linecap="round"/><path d="M12 3.5V6.5M12 20.5V17.5M3.5 12H6.5M20.5 12H17.5" stroke="${(props) => props.controlIconColorEncoded.color}" stroke-width="2" stroke-linecap="round"/></svg>');
 `;
 PureMapContainer_default.displayName = "PureMapContainer";
@@ -1802,13 +2600,13 @@ var PureMap = (props) => {
     onMapClick,
     onOptionsChange,
     title,
-    showCoordinates
+    showCoordinates,
+    hasEventHandlers = false
   } = props;
   const { defaultTileConfig, customTileConfig } = (0, react_exports.useContext)(MapContext_default);
   const basemapContainer = (0, react_exports.useRef)(null);
   const map = (0, react_exports.useRef)(null);
   const scaleControl = (0, react_exports.useRef)(null);
-  const zoomControl = (0, react_exports.useRef)(null);
   const fitToDataButtonClickedRef = (0, react_exports.useRef)(false);
   const isUserInteractingRef = (0, react_exports.useRef)(false);
   const [hasUserPanned, setHasUserPanned] = react_exports.useState(false);
@@ -1957,8 +2755,6 @@ var PureMap = (props) => {
           setMapMinZoom(mapZoomLevel);
         }
       });
-      zoomControl.current = new maplibre_gl_exports.NavigationControl({ showCompass: false });
-      map.current.addControl(zoomControl.current, "top-left");
     },
     [lngLatCenter, zoomLevel, layers == null ? void 0 : layers.length]
   );
@@ -2097,6 +2893,19 @@ var PureMap = (props) => {
     }
     onOptionsChangeProxy({ center: void 0, zoom: void 0 });
   }, [onOptionsChangeProxy, fitMapToContent, center, zoom, lngLatCenter, zoomLevel]);
+  const floatingLayerStyleTarget = getFloatingLayerStyleTarget(basemapContainer.current);
+  const stylesManagedExternally = Boolean(floatingLayerStyleTarget);
+  const wrapFloatingLayers = (children) => floatingLayerStyleTarget ? /* @__PURE__ */ react_exports.createElement(styled_components_exports.StyleSheetManager, { target: floatingLayerStyleTarget }, children) : children;
+  const handleZoomIn = (0, react_exports.useCallback)(() => {
+    if (map.current) {
+      map.current.zoomIn();
+    }
+  }, []);
+  const handleZoomOut = (0, react_exports.useCallback)(() => {
+    if (map.current) {
+      map.current.zoomOut();
+    }
+  }, []);
   return /* @__PURE__ */ react_exports.createElement(
     PureMapContainer_default,
     {
@@ -2112,49 +2921,76 @@ var PureMap = (props) => {
       showScale,
       showZoomControls
     },
-    showResetButton() && /* @__PURE__ */ react_exports.createElement(
-      StyledFitToDataButton,
+    showZoomControls && /* @__PURE__ */ react_exports.createElement(ZoomControlsContainer, { controlBackgroundColor }, /* @__PURE__ */ react_exports.createElement(Tooltip_default, { content: (0, i18n_exports._)("Zoom in"), contentRelationship: "label" }, /* @__PURE__ */ react_exports.createElement(
+      ZoomInButton,
       {
-        onClick: handleResetClick,
-        title: (0, i18n_exports._)("Fit to data"),
+        onClick: handleZoomIn,
         controlBackgroundColor,
         controlForegroundColor,
-        controlIconColorEncoded: formatColor(controlForegroundColor),
-        showZoomControls
+        controlIconColorEncoded: formatColor(controlForegroundColor)
       }
-    ),
-    isMapLoaded && layer && (layer.type === visualization_schemas_exports.LAYER_TYPE.Bubble || layer.type === visualization_schemas_exports.LAYER_TYPE.Marker) && /* @__PURE__ */ react_exports.createElement(
-      ClusterLayer_default,
+    )), /* @__PURE__ */ react_exports.createElement(Tooltip_default, { content: (0, i18n_exports._)("Zoom out"), contentRelationship: "label" }, /* @__PURE__ */ react_exports.createElement(
+      ZoomOutButton,
       {
-        clusterLayer: layer,
-        themeColorScheme,
-        map,
-        zoom: currentZoomLevel,
-        onMapClick,
-        showCoordinates
+        onClick: handleZoomOut,
+        controlBackgroundColor,
+        controlForegroundColor,
+        controlIconColorEncoded: formatColor(controlForegroundColor)
       }
-    ),
-    isMapLoaded && layer && layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth && layer.source && /* @__PURE__ */ react_exports.createElement(
-      LocalChoroplethLayer_default,
+    ))),
+    showResetButton() && /* @__PURE__ */ react_exports.createElement(
+      FitToDataButtonContainer,
       {
-        width,
-        height,
-        map,
-        choroplethLayer: layer,
-        isThemeChanged,
-        setIsThemeChanged: setIsThemeChangedCallback,
-        onMapClick
-      }
+        controlBackgroundColor,
+        showZoomControls
+      },
+      /* @__PURE__ */ react_exports.createElement(Tooltip_default, { content: (0, i18n_exports._)("Fit to data"), contentRelationship: "label" }, /* @__PURE__ */ react_exports.createElement(
+        StyledFitToDataButton,
+        {
+          onClick: handleResetClick,
+          controlBackgroundColor,
+          controlForegroundColor,
+          controlIconColorEncoded: formatColor(controlForegroundColor)
+        }
+      ))
     ),
-    isMapLoaded && layer && layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth && !layer.source && /* @__PURE__ */ react_exports.createElement(
-      ChoroplethLayer_default,
-      {
-        map,
-        choroplethLayer: layer,
-        isThemeChanged,
-        setIsThemeChanged: setIsThemeChangedCallback,
-        onMapClick
-      }
+    wrapFloatingLayers(
+      /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, isMapLoaded && layer && (layer.type === visualization_schemas_exports.LAYER_TYPE.Bubble || layer.type === visualization_schemas_exports.LAYER_TYPE.Marker) && /* @__PURE__ */ react_exports.createElement(
+        ClusterLayer_default,
+        {
+          clusterLayer: layer,
+          themeColorScheme,
+          map,
+          zoom: currentZoomLevel,
+          onMapClick,
+          showCoordinates,
+          stylesManagedExternally,
+          hasEventHandlers
+        }
+      ), isMapLoaded && layer && layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth && layer.source && /* @__PURE__ */ react_exports.createElement(MapProvider, null, /* @__PURE__ */ react_exports.createElement(
+        LocalChoroplethLayer_default,
+        {
+          width,
+          height,
+          map,
+          choroplethLayer: layer,
+          isThemeChanged,
+          setIsThemeChanged: setIsThemeChangedCallback,
+          onMapClick,
+          hasEventHandlers
+        }
+      )), isMapLoaded && layer && layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth && !layer.source && /* @__PURE__ */ react_exports.createElement(MapProvider, null, /* @__PURE__ */ react_exports.createElement(
+        ChoroplethLayer_default,
+        {
+          map,
+          choroplethLayer: layer,
+          isThemeChanged,
+          setIsThemeChanged: setIsThemeChangedCallback,
+          onMapClick,
+          stylesManagedExternally,
+          hasEventHandlers
+        }
+      )))
     )
   );
 };
@@ -2234,36 +3070,36 @@ var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport30 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var PresetPalettes_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport31 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var visualization_icons_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport32 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var placeholders_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport33 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var configUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -2297,18 +3133,18 @@ var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport32 = __toESM(require("@splunk/themes/pick"));
+var defaultImport34 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var pick_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport33 = __toESM(require("@splunk/themes/variables"));
+var defaultImport35 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var variables_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({
@@ -2463,7 +3299,10 @@ var editorConfig = [
           label: (0, i18n_exports._)("Bubble size"),
           option: "layers[0].bubbleSize",
           editor: "editor.columnMultiSelector",
-          showEditor: ({ options }) => !(options.layers && options.layers.length && (options.layers[0].type === "marker" || options.layers[0].type === "choropleth")),
+          showEditor: ({ options }) => {
+            var _a;
+            return !(((_a = options.layers) == null ? void 0 : _a.length) && (options.layers[0].type === "marker" || options.layers[0].type === "choropleth"));
+          },
           editorProps: {
             dataSourceKey: "primary",
             shouldShowInternalFields: false,
@@ -2820,54 +3659,54 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport34 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport36 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var getSettingsFromThemedProps_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport37 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var Options_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport38 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var SanitizeProps_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport37 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport39 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var TimezoneContext_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport38 = __toESM(require("@splunk/moment"));
+var defaultImport40 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var moment_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport39 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport41 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var async_dynamic_options_evaluator_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -2882,7 +3721,7 @@ var DefaultVizActionHandler = class {
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -2958,11 +3797,11 @@ SplunkVisualization.propTypes = {
    * A callback to request new data with updated request params
    */
   onRequestParamsChange: prop_types_exports.func
-};
+});
 /**
  *
  */
-SplunkVisualization.defaults = {
+__publicField(SplunkVisualization, "defaults", {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -2977,7 +3816,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/interfaces/DataSource.ts
@@ -3031,9 +3870,9 @@ var usePaginationParams = ({
   meta,
   onRequestParamsChange
 }) => {
-  const totalCount = meta && meta.totalCount || 0;
-  const offset = requestParams && requestParams.offset || 0;
-  const count = requestParams && requestParams.count;
+  const totalCount = (meta == null ? void 0 : meta.totalCount) || 0;
+  const offset = (requestParams == null ? void 0 : requestParams.offset) || 0;
+  const count = requestParams == null ? void 0 : requestParams.count;
   const totalPages = typeof count === "number" && count > 0 ? Math.ceil(totalCount / count) : 0;
   const current = typeof count === "number" && count > 0 ? Math.floor(offset / count) + 1 : 0;
   const isPaging = totalPages > 1 && typeof onRequestParamsChange === "function";
@@ -3075,9 +3914,9 @@ var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport42 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var SizeAwareWrapper_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/components/MissingPropsMessage.tsx
 var isMissing = (v) => {
@@ -3132,7 +3971,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.5.3 - 657435b86"
+  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
 })`
     position: relative;
     width: 100%;
@@ -3204,7 +4043,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.5.3 - 657435b86",
+        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
         width,
         height,
         backgroundColor
@@ -3295,13 +4134,14 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport41 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport43 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+var numberUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/utils/dataUtils.ts
 var convertToArrOfObjects = (columns, fields) => {
-  if (!columns || !columns[0] || !columns[0].length) return [];
+  var _a;
+  if (!((_a = columns == null ? void 0 : columns[0]) == null ? void 0 : _a.length)) return [];
   const data = [];
   for (let i = 0; i < columns[0].length; i += 1) {
     const newObj = {};
@@ -3695,9 +4535,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport42 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport44 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+var FeatureFlags_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -3715,9 +4555,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport43 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport45 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+var trellisUtils_default = "default" in defaultImport45 ? defaultImport45.default : defaultImport45;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -3734,9 +4574,9 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport44 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport46 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
+var visualization_canvas_default = "default" in defaultImport46 ? defaultImport46.default : defaultImport46;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -3758,9 +4598,27 @@ var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport45 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport47 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport45 ? defaultImport45.default : defaultImport45;
+var Triangle_default = "default" in defaultImport47 ? defaultImport47.default : defaultImport47;
+
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport48 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport48 ? defaultImport48.default : defaultImport48;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport49 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport49 ? defaultImport49.default : defaultImport49;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -3799,9 +4657,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -3956,46 +4814,66 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
+var getSeriesType = (isOverlay, isAreaChart, isStacked) => {
+  if (isOverlay) return "line";
+  if (!isAreaChart) return void 0;
+  return isStacked ? "stacked-area" : "area";
+};
+var getY2Scale = (field, y2fields, overlayFields) => {
+  const assignToY2 = (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || !(y2fields == null ? void 0 : y2fields.length) && (overlayFields == null ? void 0 : overlayFields.includes(field));
+  return assignToY2 ? "y2" : "y";
+};
+var getSeriesOverrides = (opts) => {
+  var _a;
+  const {
+    yfields,
+    y2fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode,
+    markerDisplay,
+    lineDashStyle,
+    lineDashStylesByField,
+    stepPosition,
+    stepPositionsByField,
+    type,
+    stackMode,
+    showLines
+  } = opts;
   const seriesConfig = {};
   let spanGaps;
-  let replaceNullsWithZero;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+  } else if (nullValueMode != null) {
     spanGaps = true;
-    if (nullValueMode === "zero") {
-      replaceNullsWithZero = true;
-    }
+  } else {
+    spanGaps = void 0;
   }
-  yfields.forEach((field) => {
+  const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
+  const isAreaChart = type === "area";
+  const isStacked = isAreaChart && (stackMode === "stacked" || stackMode === "stacked100");
+  const areaFields = isAreaChart ? yfields.filter((f) => !(overlayFields == null ? void 0 : overlayFields.includes(f))) : yfields;
+  const overlayFieldsInOrder = (_a = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a : [];
+  const orderedFields = isAreaChart ? [...areaFields, ...overlayFieldsInOrder] : yfields;
+  orderedFields.forEach((field) => {
+    var _a2;
+    const isOverlay = (_a2 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a2 : false;
+    const isPercent = isAreaChart && stackMode === "stacked100" && !isOverlay;
+    const shouldHideAreaOutline = isAreaChart && showLines === false && !isOverlay;
     seriesConfig[field] = {
-      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+      overrides: __spreadValues({
+        width: shouldHideAreaOutline ? 0 : lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH
+      }, isPercent ? { stacking: { mode: "percent", group: "A" } } : {})
     };
-    if (spanGaps !== void 0) {
-      seriesConfig[field].overrides.spanGaps = spanGaps;
-    }
-    if (y2Enabled) {
-      const shouldAssignToY2 = (
-        // If y2Fields are present, assign all y2Fields to y2 scale
-        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
-        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
-      );
-      if (shouldAssignToY2) {
-        seriesConfig[field].overrides.scale = "y2";
-      } else {
-        seriesConfig[field].overrides.scale = "y";
-      }
-    }
-    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
-      seriesConfig[field].type = "line";
-    }
-    if (markerDisplay !== void 0) {
-      seriesConfig[field].markerDisplay = markerDisplay;
-    }
-    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
-    if (fieldDashStyle) {
-      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    const seriesType = getSeriesType(isOverlay, isAreaChart, isStacked);
+    if (seriesType !== void 0) seriesConfig[field].type = seriesType;
+    if (spanGaps !== void 0) seriesConfig[field].overrides.spanGaps = spanGaps;
+    if (y2Enabled) seriesConfig[field].overrides.scale = getY2Scale(field, y2fields, overlayFields);
+    if (markerDisplay !== void 0) seriesConfig[field].markerDisplay = markerDisplay;
+    if (!isAreaChart || isOverlay) {
+      const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+      if (fieldDashStyle) seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
     const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
     const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
@@ -4066,8 +4944,27 @@ var TrellisTitleDiv = styled_components_default.div`
     background-color: ${(props) => props.backgroundColor};
     box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
 `;
+var formatTrellisKey = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  try {
+    return JSON.stringify(value);
+  } catch (e) {
+    return typeof value === "bigint" ? value.toString() : "";
+  }
+};
 var TrellisTitle = (props) => {
-  const titleText = String(props.trellisKey).toString();
+  const titleText = formatTrellisKey(props.trellisKey);
   return /* @__PURE__ */ react_exports.createElement(
     TrellisTitleDiv,
     {
@@ -4203,6 +5100,38 @@ var parseArrayOption = (value) => {
   }
   return void 0;
 };
+var getAreaOpacityForCanvas = (areaOpacity) => (
+  // Preserve legacy visualizations behavior where area opacity is squared to match charting output.
+  areaOpacity !== void 0 && areaOpacity !== null ? __pow(areaOpacity, 2) : areaOpacity
+);
+var parseTickIntervalOption = (simpleXMLValue, canvasValue) => {
+  if (simpleXMLValue) return Number(simpleXMLValue);
+  if (canvasValue) return Number(canvasValue);
+  return void 0;
+};
+var getYAxisTitles = ({
+  y2Enabled,
+  yFields,
+  y2Fields,
+  overlayFields,
+  yAxisTitleText,
+  yAxisTitleVisibility,
+  y2AxisTitleText,
+  y2AxisTitleVisibility,
+  containerHeight
+}) => {
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
+  const yAxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility),
+    containerHeight
+  );
+  const y2AxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility),
+    containerHeight
+  );
+  return { yAxisTitle, y2AxisTitle };
+};
 var TimeSeriesChartWrapper = (props) => {
   var _b, _c, _d;
   const _a = props, {
@@ -4292,6 +5221,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -4320,7 +5251,10 @@ var TimeSeriesChartWrapper = (props) => {
     yAxisMinorTickSize,
     y2AxisMinorTickSize,
     showYAxisWithZero: showYAxisWithZeroFromOptions,
-    showY2AxisWithZero: showY2AxisWithZeroFromOptions
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions,
+    // area only props
+    areaFillOpacity: areaOpacity,
+    chart: chartType
   } = options;
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
@@ -4337,13 +5271,11 @@ var TimeSeriesChartWrapper = (props) => {
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
   const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
-  const parseTickInterval = (simpleXMLValue, canvasValue) => {
-    if (simpleXMLValue) return Number(simpleXMLValue);
-    if (canvasValue) return Number(canvasValue);
-    return void 0;
-  };
-  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
-  const y2AxisMajorTickIntervalNum = parseTickInterval(
+  const yAxisMajorTickIntervalNum = parseTickIntervalOption(
+    yAxisMajorUnitFromSimpleXML,
+    yAxisMajorTickInterval
+  );
+  const y2AxisMajorTickIntervalNum = parseTickIntervalOption(
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
@@ -4352,6 +5284,7 @@ var TimeSeriesChartWrapper = (props) => {
   const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
   const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
   const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
@@ -4382,26 +5315,40 @@ var TimeSeriesChartWrapper = (props) => {
   );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
-  yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
-  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
-  let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
-  y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
+  const { yAxisTitle, y2AxisTitle } = getYAxisTitles({
+    y2Enabled,
+    yFields,
+    y2Fields,
+    overlayFields,
+    yAxisTitleText,
+    yAxisTitleVisibility,
+    y2AxisTitleText,
+    y2AxisTitleVisibility,
+    containerHeight
+  });
   const xScaleConfig = (0, react_exports.useMemo)(
     () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
     [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
   );
+  const isStacked100 = stackMode === "stacked100";
   const yScaleConfig = (0, react_exports.useMemo)(
-    () => getYScaleConfig(
-      yAxisTitle,
-      yAxisAbbreviation,
-      yAxisScale,
-      yAxisLabelVisibility,
-      yAxisMin,
-      yAxisMax
-    ),
-    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+    () => {
+      const config2 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config2.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config2.y.range = () => [0, 1];
+      }
+      return config2;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -4433,10 +5380,11 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
+  const normalizedStackMode = stackMode === "stacked" || stackMode === "stacked100" ? stackMode : "auto";
   const seriesOverrides = (0, react_exports.useMemo)(
-    () => getSeriesOverrides(
-      yFields,
-      y2Fields,
+    () => getSeriesOverrides({
+      yfields: yFields,
+      y2fields: y2Fields,
       lineWidth,
       overlayFields,
       y2Enabled,
@@ -4445,8 +5393,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -4458,7 +5409,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -4526,50 +5480,54 @@ var TimeSeriesChartWrapper = (props) => {
   react_exports.useEffect(() => {
     additionalTooltipValuesRef.current = additionalTooltipValues;
   }, [additionalTooltipValues]);
+  const handleCrosshairMouseout = react_exports.useCallback(() => {
+    if (onPointMouseOut && lastPayloadRef.current) {
+      onPointMouseOut({
+        type: "point.mouseout",
+        originalEvent: lastOriginalEventRef.current,
+        payload: lastPayloadRef.current
+      });
+    }
+    previousMouseoverPayloadRef.current = null;
+  }, [onPointMouseOut]);
   const handleChartCrosshairChange = react_exports.useCallback(
     (event) => {
-      if (onPointMouseOver || onPointMouseOut) {
-        if (!event) {
-          if (onPointMouseOut && lastPayloadRef.current) {
-            onPointMouseOut({
-              type: "point.mouseout",
-              originalEvent: lastOriginalEventRef.current,
-              payload: lastPayloadRef.current
-            });
-          }
-          previousMouseoverPayloadRef.current = null;
-          return;
-        }
-        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
-          name: event.seriesKey
+      if (!onPointMouseOver && !onPointMouseOut) {
+        return;
+      }
+      if (!event) {
+        handleCrosshairMouseout();
+        return;
+      }
+      const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+        name: event.seriesKey
+      });
+      delete payload.seriesKey;
+      if (event.rowContext) {
+        Object.assign(
+          payload,
+          Object.keys(event.rowContext).reduce((acc, fieldName) => {
+            acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+            return acc;
+          }, {})
+        );
+      }
+      const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+      if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+        return;
+      }
+      lastPayloadRef.current = updatedPayload;
+      lastOriginalEventRef.current = event;
+      previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+      if (onPointMouseOver) {
+        onPointMouseOver({
+          type: "point.mouseover",
+          originalEvent: event,
+          payload: updatedPayload
         });
-        delete payload.seriesKey;
-        if (event.rowContext) {
-          Object.assign(
-            payload,
-            Object.keys(event.rowContext).reduce((acc, fieldName) => {
-              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
-              return acc;
-            }, {})
-          );
-        }
-        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
-        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
-          return;
-        }
-        lastPayloadRef.current = updatedPayload;
-        lastOriginalEventRef.current = event;
-        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
-        if (onPointMouseOver) {
-          onPointMouseOver({
-            type: "point.mouseover",
-            originalEvent: event,
-            payload: updatedPayload
-          });
-        }
       }
     },
-    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy, handleCrosshairMouseout]
   );
   const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
   const memoizedChart = (0, react_exports.useMemo)(() => {
@@ -4624,7 +5582,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -4676,7 +5635,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYAxisLine,
     showY2AxisLine,
     legendMode,
-    xAxisMaxLabelParts
+    xAxisMaxLabelParts,
+    areaOpacityForCanvas
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -4704,6 +5664,37 @@ var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
 var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTrigger) => {
+  const result = {};
+  Object.keys(supportedEvents).forEach((eventName) => {
+    const { parentKeys, payloadKeys } = supportedEvents[eventName];
+    const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+    let payload = {};
+    if (Array.isArray(payloadKeys) && payloadKeys.length) {
+      payloadKeys.forEach((p) => {
+        payload[p] = evaluatedOptionsToUse[p];
+      });
+    }
+    result[eventCallbackPropName] = (ev) => {
+      if (ev == null ? void 0 : ev.payload) {
+        payload = __spreadValues({}, ev.payload);
+      }
+      return onEventTrigger({
+        originalEvent: ev,
+        payload,
+        type: eventName
+      });
+    };
+    if (parentKeys) {
+      for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+        const newObject = {};
+        newObject[parentKeys[i]] = result[eventCallbackPropName];
+        result[eventCallbackPropName] = newObject;
+      }
+    }
+  });
+  return result;
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -4761,9 +5752,7 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
     const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isAcceleratedRenderFeatureFlagOn = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
@@ -4928,38 +5917,12 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = {};
-    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
-      const supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach((eventName) => {
-        const { parentKeys, payloadKeys } = supportedEvents[eventName];
-        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
-        let payload = {};
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach((p) => {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
-        eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev == null ? void 0 : ev.payload) {
-            payload = __spreadValues({}, ev.payload);
-          }
-          return onEventTrigger({
-            originalEvent: ev,
-            payload,
-            type: eventName
-          });
-        };
-        if (parentKeys) {
-          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
-            const newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
-      });
-    }
-    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
+      // Align option transformation with the actual renderer selected below.
+      // This prevents canvas-only option preservation from leaking into Highcharts mode.
+      isAcceleratedRenderOn
+    }), eventCallbackProps), {
       themeFunc
     }));
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
@@ -4993,9 +5956,9 @@ var dsl_exports = {};
 __export(dsl_exports, {
   default: () => dsl_default
 });
-var defaultImport46 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
+var defaultImport50 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
 __reExport(dsl_exports, require("@splunk/visualization-encoding/utils/dsl"));
-var dsl_default = "default" in defaultImport46 ? defaultImport46.default : defaultImport46;
+var dsl_default = "default" in defaultImport50 ? defaultImport50.default : defaultImport50;
 
 // src/common/utils/mapUtils.ts
 var columnsNullToZeros = (config2, dataSources, options) => {
@@ -5071,7 +6034,7 @@ var formatLayer = (l, dataFields, dataSourceData, transformedData) => {
 };
 var computeVizProps = (props) => {
   var _a, _b, _c;
-  const { themeFunc, theme, layers, dataSources, onOptionsChange, title } = props;
+  const { themeFunc, theme, layers, dataSources, onOptionsChange, title, hasEventHandlers } = props;
   const themeColorVariables = ["controlBackgroundColor", "controlForegroundColor"];
   const themeColors = {};
   themeColorVariables.forEach((variable) => {
@@ -5088,14 +6051,15 @@ var computeVizProps = (props) => {
     themeColorScheme
   }), layers), {
     onOptionsChange,
-    title
+    title,
+    hasEventHandlers
   });
 };
 var withTooltipFields = (Viz) => {
   const VizWithTooltipFields = (_a) => {
     var _b = _a, { dataSources, options } = _b, otherProps = __objRest(_b, ["dataSources", "options"]);
-    var _a2, _b2, _c;
-    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+    var _a2, _b2, _c, _d;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, otherProps), { options }));
     }
     const mergedOptions = (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
@@ -5103,8 +6067,8 @@ var withTooltipFields = (Viz) => {
       options,
       (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(config_default.optionsSchema, "default")
     );
-    if ((_a2 = mergedOptions.layers) == null ? void 0 : _a2[0]) {
-      if (((_c = (_b2 = mergedOptions.layers) == null ? void 0 : _b2[0]) == null ? void 0 : _c.type) === "bubble") {
+    if ((_b2 = mergedOptions.layers) == null ? void 0 : _b2[0]) {
+      if (((_d = (_c = mergedOptions.layers) == null ? void 0 : _c[0]) == null ? void 0 : _d.type) === "bubble") {
         mergedOptions.layers[0].bubbleSizeFields = "> bubbleSize | getField()";
         mergedOptions.layers[0].dataValuesField = "> dataValues | getField()";
         mergedOptions.layers[0].tooltipHeaderFieldName = "> tooltipHeaderField | getField()";
@@ -5127,7 +6091,8 @@ var withTooltipFields = (Viz) => {
 var withoutInternalFields = (Viz) => {
   const VizWithoutInternalFields = (_a) => {
     var _b = _a, { dataSources } = _b, otherProps = __objRest(_b, ["dataSources"]);
-    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+    var _a2;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, otherProps));
     }
     const { primary } = dataSources;
@@ -5165,7 +6130,8 @@ var withoutInternalFields = (Viz) => {
 var withNullToZeros = (Viz) => {
   const VizWithColumnsNullToZeros = (_a) => {
     var _b = _a, { dataSources, options } = _b, otherProps = __objRest(_b, ["dataSources", "options"]);
-    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+    var _a2;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ options }, otherProps));
     }
     const modifiedDatasources = columnsNullToZeros(config_default, dataSources, options);