@splunk/visualizations 28.5.2 → 28.6.0

package/ChoroplethSvg.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);
 
 // src/ChoroplethSvg/index.ts
 var ChoroplethSvg_exports = {};
@@ -237,7 +239,7 @@ var DefaultVizActionHandler = class {
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -313,11 +315,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,
@@ -332,7 +334,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/interfaces/DataSource.ts
@@ -386,9 +388,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";
@@ -505,7 +507,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.5.2 - fd77ce608"
+  "data-splunk-visualization-version": "28.6.0 - 92427899a"
 })`
     position: relative;
     width: 100%;
@@ -604,7 +606,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.5.2 - fd77ce608",
+        "data-splunk-visualization-version": "28.6.0 - 92427899a",
         width,
         height,
         backgroundColor
@@ -1145,6 +1147,24 @@ var defaultImport28 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
 var Triangle_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport30 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
 var getAnnotationsForCanvas = ({
@@ -1182,9 +1202,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;
@@ -1339,46 +1359,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;
@@ -1426,9 +1466,9 @@ var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport31 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var visualization_schemas_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -1458,8 +1498,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,
     {
@@ -1595,6 +1654,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, {
@@ -1684,6 +1775,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -1712,7 +1805,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;
@@ -1729,13 +1825,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
   );
@@ -1744,6 +1838,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;
@@ -1774,26 +1869,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 config3 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config3.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config3.y.range = () => [0, 1];
+      }
+      return config3;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -1825,10 +1934,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,
@@ -1837,8 +1947,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -1850,7 +1963,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -1918,50 +2034,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)(() => {
@@ -2016,7 +2136,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -2068,7 +2189,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);
@@ -2096,6 +2218,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,
@@ -2153,9 +2306,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
@@ -2320,38 +2471,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 = computeVizProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const computedVizProps = computeVizProps(__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) {
@@ -2380,32 +2505,59 @@ var withDashboardViz = (opts) => {
 };
 var withDashboardViz_default = withDashboardViz;
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport32 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport33 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+var defaultImport34 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
 // esm-externals:xpath
 var xpath_exports = {};
 __export(xpath_exports, {
   default: () => xpath_default
 });
-var defaultImport30 = __toESM(require("xpath"));
+var defaultImport35 = __toESM(require("xpath"));
 __reExport(xpath_exports, require("xpath"));
-var xpath_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var xpath_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@xmldom/xmldom
 var xmldom_exports = {};
 __export(xmldom_exports, {
   default: () => xmldom_default
 });
-var defaultImport31 = __toESM(require("@xmldom/xmldom"));
+var defaultImport36 = __toESM(require("@xmldom/xmldom"));
 __reExport(xmldom_exports, require("@xmldom/xmldom"));
-var xmldom_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var xmldom_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:jexl
 var jexl_exports = {};
 __export(jexl_exports, {
   default: () => jexl_default
 });
-var defaultImport32 = __toESM(require("jexl"));
+var defaultImport37 = __toESM(require("jexl"));
 __reExport(jexl_exports, require("jexl"));
-var jexl_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var jexl_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/ChoroplethSvg/PureChoroplethSvg/SvgMutator.ts
 var ERROR_NON_ATTRIBUTE_MUTATION = "mutations only allowed on attribute nodes";
@@ -2415,6 +2567,8 @@ var _SvgMutator = class _SvgMutator {
    * @param {SvgMutatorArgs} props
    */
   constructor(props) {
+    __publicField(this, "svgDoc");
+    __publicField(this, "props");
     const { svg } = props;
     this.svgDoc = new xmldom_exports.DOMParser().parseFromString(svg);
     this.props = __spreadValues({}, props);
@@ -2504,6 +2658,8 @@ var _SvgMutator = class _SvgMutator {
       sandbox: "allow-scripts",
       id: "svgChoroplethIframe",
       "data-test": "svgChoroplethIframe",
+      tabIndex: -1,
+      "data-kb-message-nonce": NONCE,
       "data-viz-supports-simulated-clicks": true
     });
     let intervalID = null;
@@ -2577,8 +2733,9 @@ var _SvgMutator = class _SvgMutator {
     return xpath_exports.evaluate(xpath, doc, resolver, XPathResult.ANY_TYPE, null);
   }
   static getTitle(data, i) {
+    var _a;
     let title = "";
-    if (data.featureIDs && data.featureIDs[i]) {
+    if ((_a = data.featureIDs) == null ? void 0 : _a[i]) {
       title += `name: ${data.featureIDs[i]}`;
     }
     if (data.values && data.values[i] !== void 0) {
@@ -2600,6 +2757,7 @@ value: ${data.values[i]}`;
    * @returns {any}
    */
   static mutateNode(n, dataBinding, data, i) {
+    var _a, _b;
     if (n.nodeType && n.nodeType != Node.ATTRIBUTE_NODE) {
       throw new Error(ERROR_NON_ATTRIBUTE_MUTATION);
     }
@@ -2613,20 +2771,19 @@ value: ${data.values[i]}`;
     n.nodeValue = computed;
     n.value = computed;
     const parent = n.ownerElement;
-    const title = _SvgMutator.getTitle(data, i);
-    if (data.featureIDs && data.featureIDs[i]) {
+    if (((_a = data.featureIDs) == null ? void 0 : _a[i]) !== void 0) {
       parent.setAttribute("data-name", data.featureIDs[i]);
+    } else {
+      parent.removeAttribute("data-name");
     }
-    if (data.values && data.values[i] !== void 0) {
-      parent.setAttribute("data-value", data.values[i]);
-    }
-    if (title !== "") {
-      const titleElem = n.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "title");
-      titleElem.textContent = title;
-      parent.appendChild(titleElem);
-    }
-    if (data.featureIDs) {
-      parent.setAttribute("data-name", data.featureIDs[i]);
+    const interactiveValue = (_b = data.values) == null ? void 0 : _b[i];
+    const hasInteractiveValue = interactiveValue !== void 0 && interactiveValue !== null && interactiveValue !== "";
+    if (hasInteractiveValue) {
+      parent.setAttribute("data-value", interactiveValue);
+      parent.setAttribute("data-interactive", "true");
+    } else {
+      parent.removeAttribute("data-value");
+      parent.setAttribute("data-interactive", "false");
     }
     return computed;
   }
@@ -2681,6 +2838,14 @@ value: ${data.values[i]}`;
                 }
                 svg {
                     pointer-events:all;
+                }
+                svg [data-kb-focus="true"] {
+                    outline: 2px solid #2684FF;
+                    outline-offset: 2px;
+                    stroke: #2684FF;
+                    stroke-width: 2px;
+                    vector-effect: non-scaling-stroke;
+                }
                 }`;
   }
   static getCsp(nonce) {
@@ -2702,14 +2867,21 @@ value: ${data.values[i]}`;
 
                             let parentOrigin = null;
                             let parentWindow = null;
+                            let keyboardNavigationMode = false;
+                            let lastInputModality = 'unknown';
+                            let focusedElement = null;
+                            let focusedIndex = -1;
+                            // Fallback to [data-value] for legacy/dashboard flows where SVG nodes are
+                            // data-annotated but do not yet have explicit data-interactive attributes.
+                            const FOCUSABLE_SELECTOR = '[data-interactive="true"], [data-value]';
 
-                            function sendMessage(m){
+                            function sendMessage(m, transfer){
 
                                 if(!parentWindow){
                                     return; // don't send any messages until we know where to send them
                                 }
                                 m.nonce = '${nonce}'; // set nonce into message.
-                                parentWindow.postMessage(m,parentOrigin);
+                                parentWindow.postMessage(m,parentOrigin, transfer || []);
                             }
 
 
@@ -2736,72 +2908,466 @@ value: ${data.values[i]}`;
 
                                 //listen for a first message to establish the parent origin
                                 window.addEventListener('message', parentSetupMessageListener);
-
-                                ['mousemove', 'mouseover', 'mousedown', 'mouseup', 'click'].forEach(eventType => {
-                                    const svgElement = document.getElementsByTagName('svg')[0];
-                                    svgElement.addEventListener(eventType, (e)=> {
-                                        const value = e.target.getAttribute('data-value');
-                                        const name = e.target.getAttribute('data-name');
-                                        sendMessage({
-                                            nonce:'${nonce}',
-                                            eventType,
-                                            clientX:e.clientX,
-                                            clientY:e.clientY,
-                                            value,
-                                            name,
-                                        });
+                                const svgElement = document.getElementsByTagName('svg')[0];
+                                if(!svgElement){
+                                    return;
+                                }
+                                svgElement.addEventListener('click', event => {
+                                    const target = getInteractiveTarget(event.target);
+                                    if(!target){
+                                        return;
+                                    }
+                                    sendPointerMessage({
+                                        eventType: 'click',
+                                        target,
+                                        clientX: event.clientX,
+                                        clientY: event.clientY,
+                                    });
+                                });
+                                svgElement.addEventListener('mouseover', event => {
+                                    const target = getInteractiveTarget(event.target);
+                                    if(!target){
+                                        return;
+                                    }
+                                    sendPointerMessage({
+                                        eventType: 'mouseover',
+                                        target,
+                                        clientX: event.clientX,
+                                        clientY: event.clientY,
+                                    });
+                                });
+                                svgElement.addEventListener('mousemove', event => {
+                                    const target = getInteractiveTarget(event.target);
+                                    if(!target){
+                                        return;
+                                    }
+                                    sendPointerMessage({
+                                        eventType: 'mousemove',
+                                        target,
+                                        clientX: event.clientX,
+                                        clientY: event.clientY,
                                     });
                                 });
+                                svgElement.addEventListener('mouseout', event => {
+                                    const target = getInteractiveTarget(event.target);
+                                    if(!target){
+                                        return;
+                                    }
+                                    const relatedTarget = getInteractiveTarget(event.relatedTarget);
+                                    if(relatedTarget === target){
+                                        return;
+                                    }
+                                    sendPointerMessage({
+                                        eventType: 'mouseout',
+                                        target,
+                                        clientX: event.clientX,
+                                        clientY: event.clientY,
+                                    });
+                                });
+                            }
+
+                            function getInteractiveTarget(element){
+                                if(!element || !element.closest){
+                                    return null;
+                                }
+                                let target = element.closest(FOCUSABLE_SELECTOR);
+                                while(target && !isFocusableElement(target)){
+                                    target = target.parentElement ? target.parentElement.closest(FOCUSABLE_SELECTOR) : null;
+                                }
+                                return target;
+                            }
+
+                            function isFocusableElement(el){
+                                if(!el || !el.closest){
+                                    return false;
+                                }
+                                const dataInteractive = el.getAttribute('data-interactive');
+                                if(dataInteractive === 'false'){
+                                    return false;
+                                }
+                                if(dataInteractive !== 'true'){
+                                    // Legacy fallback: treat non-empty data-value as interactive
+                                    // unless explicitly marked data-interactive="false".
+                                    const value = el.getAttribute('data-value');
+                                    if(value === null || value === ''){
+                                        return false;
+                                    }
+                                }
+                                const id = el.getAttribute && el.getAttribute('id');
+                                if(id && id.startsWith('Icon/')){
+                                    return false;
+                                }
+                                if(el.closest('defs, clipPath, mask, pattern, symbol, metadata, title, desc, style, script')){
+                                    return false;
+                                }
+                                const style = window.getComputedStyle(el);
+                                if(style.display === 'none' || style.visibility === 'hidden' || style.pointerEvents === 'none'){
+                                    return false;
+                                }
+                                return true;
+                            }
+
+                            function getFocusableElements(){
+                                const svgElement = document.getElementsByTagName('svg')[0];
+                                if(!svgElement){
+                                    return [];
+                                }
+                                const elements = Array.from(svgElement.querySelectorAll(FOCUSABLE_SELECTOR));
+                                return elements.filter(isFocusableElement);
+                            }
+
+                            function sendFocusMessage(target, eventType){
+                                if(!target || !target.getBoundingClientRect){
+                                    return;
+                                }
+                                const rect = target.getBoundingClientRect();
+                                sendPointerMessage({
+                                    eventType,
+                                    target,
+                                    clientX: rect.left + rect.width / 2,
+                                    clientY: rect.top + rect.height / 2,
+                                });
+                            }
+
+                            function sendKeyboardHoverMessage(target, eventType){
+                                if(!target || !target.getBoundingClientRect){
+                                    return;
+                                }
+                                const rect = target.getBoundingClientRect();
+                                const value = target.getAttribute('data-value');
+                                const name = target.getAttribute('data-name');
+                                sendMessage({
+                                    type: 'kbAreaHover',
+                                    interactionSource: 'keyboard',
+                                    eventType,
+                                    clientX: rect.left + rect.width / 2,
+                                    clientY: rect.top + rect.height / 2,
+                                    anchorX: rect.right,
+                                    anchorY: rect.top + rect.height / 2,
+                                    value,
+                                    name,
+                                    tooltipText: getTooltipText(target),
+                                });
+                            }
+
+                            function getTooltipText(target){
+                                if(!target){
+                                    return '';
+                                }
+                                const name = target.getAttribute('data-name');
+                                const value = target.getAttribute('data-value');
+                                let text = '';
+                                if(name){
+                                    text += 'name: ' + name;
+                                }
+                                if(value !== null && value !== undefined){
+                                    text += (text ? '\\n' : '') + 'value: ' + value;
+                                }
+                                return text;
+                            }
+
+                            function sendPointerMessage({ eventType, target, clientX, clientY }){
+                                const value = target ? target.getAttribute('data-value') : null;
+                                const name = target ? target.getAttribute('data-name') : null;
+                                const rect =
+                                    target && target.getBoundingClientRect
+                                        ? target.getBoundingClientRect()
+                                        : null;
+                                sendMessage({
+                                    interactionSource: 'mouse',
+                                    eventType,
+                                    clientX,
+                                    clientY,
+                                    anchorX: rect ? rect.right : clientX,
+                                    anchorY: rect ? rect.top + rect.height / 2 : clientY,
+                                    value,
+                                    name,
+                                    tooltipText: getTooltipText(target),
+                                });
+                            }
 
+                            function clearFocusedElement(){
+                                if(focusedElement){
+                                    sendKeyboardHoverMessage(focusedElement, 'mouseout');
+                                    focusedElement.removeAttribute('data-kb-focus');
+                                    sendFocusMessage(focusedElement, 'mouseout');
+                                    focusedElement = null;
+                                    focusedIndex = -1;
+                                }
+                                sendMessage({
+                                    type: 'kbTooltipAnnouncement',
+                                    tooltipText: '',
+                                });
+                            }
 
+                            function focusElementAt(index){
+                                const elements = getFocusableElements();
+                                if(!elements.length){
+                                    clearFocusedElement();
+                                    return;
+                                }
+                                if(index < 0){
+                                    index = 0;
+                                }
+                                if(index >= elements.length){
+                                    index = elements.length - 1;
+                                }
+                                if(focusedElement){
+                                    focusedElement.removeAttribute('data-kb-focus');
+                                    sendFocusMessage(focusedElement, 'mouseout');
+                                }
+                                focusedIndex = index;
+                                focusedElement = elements[focusedIndex];
+                                focusedElement.setAttribute('data-kb-focus', 'true');
+                                sendKeyboardHoverMessage(focusedElement, 'mousemove');
+                                sendFocusMessage(focusedElement, 'mouseover');
+                                sendFocusMessage(focusedElement, 'mousemove');
+                                sendMessage({
+                                    type: 'kbTooltipAnnouncement',
+                                    tooltipText: getTooltipText(focusedElement),
+                                });
+                            }
+
+                            function moveFocus(direction){
+                                const elements = getFocusableElements();
+                                if(!elements.length){
+                                    clearFocusedElement();
+                                    return;
+                                }
+                                if(focusedIndex === -1){
+                                    // After iframe remount, keyboard state is reset. Start deterministically from first.
+                                    focusElementAt(0);
+                                    return;
+                                }
+                                const nextIndex =
+                                    direction === 'prev'
+                                        ? (focusedIndex - 1 + elements.length) % elements.length
+                                        : (focusedIndex + 1) % elements.length;
+                                focusElementAt(nextIndex);
+                            }
+
+                            function handleKeyboardNavigation(event){
+                                if(!keyboardNavigationMode){
+                                    return;
+                                }
+                                if(event.key === 'Tab' && event.shiftKey){
+                                    keyboardNavigationMode = false;
+                                    clearFocusedElement();
+                                    sendMessage({ type: 'kbExitBackward' });
+                                    event.preventDefault();
+                                    return;
+                                }
+                                if(event.key === 'ArrowLeft' || event.key === 'ArrowRight'){
+                                    moveFocus(event.key === 'ArrowLeft' ? 'prev' : 'next');
+                                    event.preventDefault();
+                                    return;
+                                }
+                                if(event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar'){
+                                    if(!focusedElement){
+                                        focusElementAt(0);
+                                    }
+                                    if(focusedElement){
+                                        sendFocusMessage(focusedElement, 'click');
+                                    }
+                                    event.preventDefault();
+                                }
                             }
                             registerListeners();
+
+                            window.addEventListener('keydown', () => {
+                                lastInputModality = 'keyboard';
+                            }, true);
+
+                            window.addEventListener('pointerdown', () => {
+                                lastInputModality = 'pointer';
+                            }, true);
+
+                            window.addEventListener('mousedown', () => {
+                                lastInputModality = 'pointer';
+                            }, true);
+
+                            window.addEventListener('focus', () => {
+                                if(lastInputModality !== 'pointer'){
+                                    keyboardNavigationMode = true;
+                                }
+                                if(!keyboardNavigationMode){
+                                    return;
+                                }
+                                if(!focusedElement){
+                                    focusElementAt(0);
+                                }
+                            });
+
+                            window.addEventListener('blur', () => {
+                                keyboardNavigationMode = false;
+                                lastInputModality = 'unknown';
+                                clearFocusedElement();
+                            });
+
+                            window.addEventListener('keydown', event => {
+                                handleKeyboardNavigation(event);
+                            });
                         <\/script>
                       </body></html>`;
   }
+  static isInvalidIframeMessage(nonce, expectedNonce, origin, jsdom) {
+    return nonce !== expectedNonce || !jsdom && origin !== "null";
+  }
+  static dispatchKbExitBackwardEvent(div) {
+    const mEvent = new CustomEvent("kbExitBackward", {
+      bubbles: true,
+      cancelable: false,
+      composed: true
+    });
+    div.dispatchEvent(mEvent);
+  }
+  static dispatchKbAreaHoverEvent(div, boundingRect, payload) {
+    const { clientX, clientY, anchorX, anchorY, value, name, tooltipText, eventType, interactionSource } = payload;
+    const hoverEvent = new CustomEvent("areaHover", {
+      detail: {
+        clientX: Number.isFinite(clientX) ? Math.round(clientX + boundingRect.left) : void 0,
+        clientY: Number.isFinite(clientY) ? Math.round(clientY + boundingRect.top) : void 0,
+        anchorX: Number.isFinite(anchorX) ? Math.round(anchorX + boundingRect.left) : void 0,
+        anchorY: Number.isFinite(anchorY) ? Math.round(anchorY + boundingRect.top) : void 0,
+        value,
+        name,
+        tooltipText,
+        eventType,
+        interactionSource
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    });
+    div.dispatchEvent(hoverEvent);
+  }
+  static dispatchKbTooltipAnnouncementEvent(div, tooltipText) {
+    const mEvent = new CustomEvent("kbTooltipAnnouncement", {
+      detail: { text: tooltipText || "" },
+      bubbles: true,
+      cancelable: false,
+      composed: true
+    });
+    div.dispatchEvent(mEvent);
+  }
+  static dispatchOutlineFocusEvent(div) {
+    const outlineDiv = div.closest('[data-test="select-outline"]');
+    if (!outlineDiv) {
+      return;
+    }
+    const focusEvent = new FocusEvent("focusin", {
+      relatedTarget: outlineDiv
+    });
+    outlineDiv.dispatchEvent(focusEvent);
+  }
+  static dispatchAreaClickEvent(div, clientX, clientY, value, name, eventSetting) {
+    const clickEvent = new CustomEvent("areaClick", __spreadValues({
+      detail: {
+        clientX,
+        clientY,
+        value,
+        name
+      }
+    }, eventSetting));
+    _SvgMutator.dispatchOutlineFocusEvent(div);
+    div.dispatchEvent(clickEvent);
+  }
+  static dispatchMouseAndHoverEvents(div, boundingRect, payload, eventSetting) {
+    const { eventType, clientX, clientY, anchorX, anchorY, value, name, tooltipText, interactionSource } = payload;
+    const mouseEvent = new MouseEvent(eventType, __spreadValues({
+      clientX,
+      clientY
+    }, eventSetting));
+    const hoverEvent = new CustomEvent("areaHover", __spreadValues({
+      detail: {
+        clientX,
+        clientY,
+        anchorX: Number.isFinite(anchorX) ? Math.round(anchorX + boundingRect.left) : clientX,
+        anchorY: Number.isFinite(anchorY) ? Math.round(anchorY + boundingRect.top) : clientY,
+        value,
+        name,
+        tooltipText,
+        eventType,
+        interactionSource
+      }
+    }, eventSetting));
+    div.dispatchEvent(hoverEvent);
+    div.dispatchEvent(mouseEvent);
+  }
   static createIframeMessageListener(expectedNonce, intervalId, div, jsdom = false) {
     return (m) => {
-      const { nonce, eventType, clientX, clientY, value, name } = m.data;
-      if (nonce !== expectedNonce || !jsdom && m.origin !== "null") {
+      const {
+        nonce,
+        eventType,
+        clientX,
+        clientY,
+        value,
+        name,
+        type,
+        tooltipText,
+        anchorX,
+        anchorY,
+        interactionSource
+      } = m.data;
+      if (_SvgMutator.isInvalidIframeMessage(nonce, expectedNonce, m.origin, jsdom)) {
         return;
       }
       if (intervalId) {
         clearInterval(intervalId);
       }
       const boundingRect = div.getBoundingClientRect();
-      if (eventType && clientX && clientY) {
-        let mEvent;
-        const realClientX = Math.round(clientX + boundingRect.left);
-        const realClientY = Math.round(clientY + boundingRect.top);
-        const eventSetting = {
-          bubbles: true,
-          cancelable: true,
-          composed: true
-        };
-        if (eventType === "click") {
-          mEvent = new CustomEvent("areaClick", __spreadValues({
-            detail: {
-              clientX: realClientX,
-              clientY: realClientY,
-              value,
-              name
-            }
-          }, eventSetting));
-          const outlineDiv = div.closest('[data-test="select-outline"]');
-          if (outlineDiv) {
-            const focusEvent = new FocusEvent("focusin", {
-              relatedTarget: outlineDiv
-            });
-            outlineDiv.dispatchEvent(focusEvent);
-          }
-        } else {
-          mEvent = new MouseEvent(eventType, __spreadValues({
-            clientX: realClientX,
-            clientY: realClientY
-          }, eventSetting));
-        }
-        div.dispatchEvent(mEvent);
+      if (type === "kbExitBackward") {
+        _SvgMutator.dispatchKbExitBackwardEvent(div);
+        return;
+      }
+      if (type === "kbAreaHover") {
+        _SvgMutator.dispatchKbAreaHoverEvent(div, boundingRect, {
+          clientX,
+          clientY,
+          anchorX,
+          anchorY,
+          value,
+          name,
+          tooltipText,
+          eventType,
+          interactionSource
+        });
+        return;
+      }
+      if (type === "kbTooltipAnnouncement") {
+        _SvgMutator.dispatchKbTooltipAnnouncementEvent(div, tooltipText);
+        return;
+      }
+      if (!eventType || !Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+        return;
       }
+      const realClientX = Math.round(clientX + boundingRect.left);
+      const realClientY = Math.round(clientY + boundingRect.top);
+      const eventSetting = {
+        bubbles: true,
+        cancelable: true,
+        composed: true
+      };
+      if (eventType === "click") {
+        _SvgMutator.dispatchAreaClickEvent(div, realClientX, realClientY, value, name, eventSetting);
+        return;
+      }
+      _SvgMutator.dispatchMouseAndHoverEvents(
+        div,
+        boundingRect,
+        {
+          eventType,
+          clientX: realClientX,
+          clientY: realClientY,
+          anchorX,
+          anchorY,
+          value,
+          name,
+          tooltipText,
+          interactionSource
+        },
+        eventSetting
+      );
     };
   }
   static removeIframeEventListener(element, messageListener, intervalID, refCallback) {
@@ -2814,25 +3380,48 @@ value: ${data.values[i]}`;
     refCallback(element);
   }
 };
-_SvgMutator.serializer = new xmldom_exports.XMLSerializer();
+__publicField(_SvgMutator, "serializer", new xmldom_exports.XMLSerializer());
 var SvgMutator = _SvgMutator;
 
 // src/ChoroplethSvg/PureChoroplethSvg/SvgChoroplethDynamic.tsx
 var SvgChoroplethDynamic = class extends react_exports.Component {
   constructor(props, context) {
     super(props, context);
-    this.handleAreaClick = (ev) => {
+    __publicField(this, "node");
+    __publicField(this, "handleAreaClick", (ev) => {
+      const customEvent = ev;
       if (typeof this.props.onAreaClick === "function") {
-        this.props.onAreaClick(__spreadProps(__spreadValues({}, ev), { payload: ev.detail }));
+        this.props.onAreaClick(__spreadProps(__spreadValues({}, customEvent), { payload: customEvent.detail }));
       }
-    };
-    this.areaClickRef = (node) => {
-      if (!node) {
+    });
+    __publicField(this, "handleAreaKeydown", (ev) => {
+      var _a, _b;
+      const customEvent = ev;
+      const key = (_b = (_a = customEvent.detail) == null ? void 0 : _a.key) != null ? _b : customEvent.key;
+      const isActivationKey = key === "Enter" || key === " " || key === "Spacebar";
+      if (typeof this.props.onAreaKeydown === "function") {
+        this.props.onAreaKeydown(__spreadProps(__spreadValues({}, customEvent), { payload: customEvent.detail }));
+      }
+      if (isActivationKey && typeof this.props.onAreaClick === "function") {
+        this.props.onAreaClick(__spreadProps(__spreadValues({}, customEvent), { payload: customEvent.detail }));
+      }
+    });
+    __publicField(this, "handleAreaHover", (ev) => {
+      const customEvent = ev;
+      if (typeof this.props.onAreaHover === "function") {
+        this.props.onAreaHover(__spreadProps(__spreadValues({}, customEvent), { payload: customEvent.detail }));
+      }
+    });
+    __publicField(this, "rootRef", (node) => {
+      if (this.node === node) {
+        this.setForwardedRef(node);
         return;
       }
-      node.addEventListener("areaClick", (ev) => this.handleAreaClick(ev));
+      this.detachListeners(this.node);
+      this.attachListeners(node);
       this.node = node;
-    };
+      this.setForwardedRef(node);
+    });
     this.state = { svgNode: null, renderCT: 0 };
     this.node = null;
   }
@@ -2849,9 +3438,35 @@ var SvgChoroplethDynamic = class extends react_exports.Component {
     }
   }
   componentWillUnmount() {
-    if (this.node) {
-      this.node.removeEventListener("areaClick", this.handleAreaClick);
+    this.detachListeners(this.node);
+    this.setForwardedRef(null);
+  }
+  setForwardedRef(node) {
+    const { forwardedRef } = this.props;
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+      return;
+    }
+    forwardedRef.current = node;
+  }
+  detachListeners(node) {
+    if (!node) {
+      return;
+    }
+    node.removeEventListener("areaClick", this.handleAreaClick);
+    node.removeEventListener("areaHover", this.handleAreaHover);
+    node.removeEventListener("areaKeydown", this.handleAreaKeydown);
+  }
+  attachListeners(node) {
+    if (!node) {
+      return;
     }
+    node.addEventListener("areaClick", this.handleAreaClick);
+    node.addEventListener("areaHover", this.handleAreaHover);
+    node.addEventListener("areaKeydown", this.handleAreaKeydown);
   }
   mutate() {
     const { svg } = this.props;
@@ -2867,23 +3482,33 @@ var SvgChoroplethDynamic = class extends react_exports.Component {
     }
   }
   render() {
-    const { width = "100%", height = "100%" } = this.props;
+    const { width = "100%", height = "100%", onFocus, onKeyDown } = this.props;
     const { svgNode, renderCT } = this.state;
     if (svgNode) {
-      return /* @__PURE__ */ react_exports.createElement(
-        "div",
-        {
-          "data-test": "svgChoroplethDynamic",
-          style: { width, height },
-          ref: this.areaClickRef,
-          key: renderCT
-        },
-        svgNode
+      return (
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
+        /* @__PURE__ */ react_exports.createElement(
+          "div",
+          {
+            "data-test": "svgChoroplethDynamic",
+            style: { width, height, outline: "none" },
+            ref: this.rootRef,
+            key: renderCT,
+            onFocus,
+            onKeyDown
+          },
+          svgNode
+        )
       );
     }
     return null;
   }
 };
+var ForwardedSvgChoroplethDynamic = react_exports.forwardRef(
+  (props, ref) => /* @__PURE__ */ react_exports.createElement(SvgChoroplethDynamic, __spreadProps(__spreadValues({}, props), { forwardedRef: ref }))
+);
+ForwardedSvgChoroplethDynamic.displayName = "SvgChoroplethDynamic";
+var SvgChoroplethDynamic_default = ForwardedSvgChoroplethDynamic;
 
 // src/ChoroplethSvg/PureChoroplethSvg/PureChoroplethSvg.tsx
 var Container = styled_components_default.div`
@@ -2898,6 +3523,41 @@ var ChoroplethSvgWrapper = styled_components_default.div`
     flex: 1;
     position: relative;
 `;
+var LiveRegion = styled_components_default.div`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+`;
+var KeyboardNavButton = styled_components_default(Button_default)`
+    ${themes_exports.mixins.skipLink()}
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 2;
+    /**
+     * Need to override the secondary Button's specificity to set a background color
+     * because it's explicitly set as transparent by default
+     */
+    &:not([disabled], [aria-disabled='true']) {
+        background-color: ${themes_exports.variables.backgroundColorSection};
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+            background-color: ${themes_exports.variables.backgroundColorSection};
+        }
+    }
+`;
+var ChoroplethTooltipContent = styled_components_default.span`
+    white-space: pre-line;
+`;
 var computeSvgDynamicProps = (_a) => {
   var props = __objRest(_a, []);
   const data = {
@@ -2916,24 +3576,244 @@ var computeSvgDynamicProps = (_a) => {
     dataBinding
   });
 };
+var keyboardNavBtnText = (0, i18n_exports._)("Navigate map with left or right arrow");
 var PureChoroplethSvg = (_a) => {
   var props = __objRest(_a, []);
   const { width = "100%", height = 250, backgroundColor } = props;
+  const [keyboardNavigationEnabled, setKeyboardNavigationEnabled] = react_exports.useState(false);
+  const [liveRegionMessage, setLiveRegionMessage] = react_exports.useState("");
+  const wrapperRef = react_exports.useRef(null);
+  const keyboardNavButtonRef = react_exports.useRef(null);
   const cachedHandleResize = react_exports.useCallback((w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   }, []);
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
+  const [wrapperElement, setWrapperElement] = react_exports.useState(null);
+  const hoverTooltipTimerRef = react_exports.useRef(null);
+  const [areaTooltip, setAreaTooltip] = react_exports.useState({
+    open: false,
+    text: "",
+    x: 0,
+    y: 0
+  });
+  const focusIframe = react_exports.useCallback(() => {
+    var _a2;
+    const iframe = (_a2 = wrapperRef.current) == null ? void 0 : _a2.querySelector("#svgChoroplethIframe");
+    if (!iframe) {
+      return;
+    }
+    iframe.focus();
+  }, []);
+  const blurIframe = react_exports.useCallback(() => {
+    var _a2;
+    const iframe = (_a2 = wrapperRef.current) == null ? void 0 : _a2.querySelector("#svgChoroplethIframe");
+    if (!iframe) {
+      return;
+    }
+    iframe.blur();
+  }, []);
+  const handleWrapperRef = react_exports.useCallback((node) => {
+    wrapperRef.current = node;
+    setWrapperElement(node);
+  }, []);
+  react_exports.useEffect(() => {
+    var _a2, _b;
+    if (keyboardNavigationEnabled) {
+      (_a2 = wrapperRef.current) == null ? void 0 : _a2.blur();
+      focusIframe();
+    } else {
+      (_b = wrapperRef.current) == null ? void 0 : _b.blur();
+      blurIframe();
+      if (hoverTooltipTimerRef.current) {
+        window.clearTimeout(hoverTooltipTimerRef.current);
+        hoverTooltipTimerRef.current = null;
+      }
+      setAreaTooltip((prev) => __spreadProps(__spreadValues({}, prev), { open: false, text: "" }));
+      setLiveRegionMessage("");
+    }
+  }, [keyboardNavigationEnabled, focusIframe, blurIframe]);
+  react_exports.useEffect(() => {
+    if (!keyboardNavigationEnabled) {
+      return () => {
+      };
+    }
+    const shouldDisableKeyboardNav = (target) => {
+      const wrapperNode = wrapperRef.current;
+      if (!wrapperNode || !(target instanceof Node)) {
+        return false;
+      }
+      return !wrapperNode.contains(target);
+    };
+    const handleMouseDownOutside = (mouseEvent) => {
+      if (shouldDisableKeyboardNav(mouseEvent.target)) {
+        setKeyboardNavigationEnabled(false);
+      }
+    };
+    const handleMouseDragOutside = (mouseEvent) => {
+      if (mouseEvent.buttons > 0 && shouldDisableKeyboardNav(mouseEvent.target)) {
+        setKeyboardNavigationEnabled(false);
+      }
+    };
+    const handleWindowResize = () => {
+      setKeyboardNavigationEnabled(false);
+    };
+    window.addEventListener("mousedown", handleMouseDownOutside, true);
+    window.addEventListener("mousemove", handleMouseDragOutside, true);
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("mousedown", handleMouseDownOutside, true);
+      window.removeEventListener("mousemove", handleMouseDragOutside, true);
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, [keyboardNavigationEnabled]);
+  react_exports.useEffect(() => {
+    if (!wrapperElement) {
+      return () => {
+      };
+    }
+    const handleTooltipAnnouncement = (event) => {
+      var _a2;
+      const customEvent = event;
+      setLiveRegionMessage(((_a2 = customEvent.detail) == null ? void 0 : _a2.text) || "");
+    };
+    const handleKeyboardExitBackward = () => {
+      var _a2;
+      setKeyboardNavigationEnabled(false);
+      (_a2 = keyboardNavButtonRef.current) == null ? void 0 : _a2.focus();
+    };
+    wrapperElement.addEventListener("kbTooltipAnnouncement", handleTooltipAnnouncement);
+    wrapperElement.addEventListener("kbExitBackward", handleKeyboardExitBackward);
+    return () => {
+      wrapperElement.removeEventListener("kbTooltipAnnouncement", handleTooltipAnnouncement);
+      wrapperElement.removeEventListener("kbExitBackward", handleKeyboardExitBackward);
+    };
+  }, [wrapperElement]);
+  react_exports.useEffect(() => {
+    return () => {
+      if (hoverTooltipTimerRef.current) {
+        window.clearTimeout(hoverTooltipTimerRef.current);
+        hoverTooltipTimerRef.current = null;
+      }
+    };
+  }, []);
+  const handleAreaHover = react_exports.useCallback((event) => {
+    const payload = (event == null ? void 0 : event.payload) || {};
+    const { eventType, clientX, clientY, anchorX, anchorY, name, value, interactionSource } = payload;
+    const applyTooltipPosition = () => {
+      const text = SvgMutator.getTitle(
+        {
+          featureIDs: [name],
+          values: [value]
+        },
+        0
+      );
+      if (!text || !wrapperRef.current) {
+        setAreaTooltip((prev) => __spreadProps(__spreadValues({}, prev), { open: false, text: "" }));
+        return;
+      }
+      const anchorRect = wrapperRef.current.getBoundingClientRect();
+      const hostX = Number.isFinite(anchorX) ? anchorX : clientX;
+      const hostY = Number.isFinite(anchorY) ? anchorY : clientY;
+      setAreaTooltip({
+        open: true,
+        text,
+        x: Math.max(0, Math.round(hostX - anchorRect.left)),
+        y: Math.max(0, Math.round(hostY - anchorRect.top))
+      });
+    };
+    if (eventType === "mouseout") {
+      if (hoverTooltipTimerRef.current) {
+        window.clearTimeout(hoverTooltipTimerRef.current);
+        hoverTooltipTimerRef.current = null;
+      }
+      setAreaTooltip((prev) => __spreadProps(__spreadValues({}, prev), { open: false, text: "" }));
+      return;
+    }
+    if (interactionSource === "mouse" && (eventType === "mouseover" || eventType === "mousemove")) {
+      if (hoverTooltipTimerRef.current) {
+        window.clearTimeout(hoverTooltipTimerRef.current);
+      }
+      hoverTooltipTimerRef.current = window.setTimeout(() => {
+        applyTooltipPosition();
+      }, 120);
+      return;
+    }
+    if (hoverTooltipTimerRef.current) {
+      window.clearTimeout(hoverTooltipTimerRef.current);
+      hoverTooltipTimerRef.current = null;
+    }
+    applyTooltipPosition();
+  }, []);
   const renderVisualization = () => {
     if (!containerWidth || !containerHeight) {
       return null;
     }
     const svgProps = computeSvgDynamicProps(__spreadProps(__spreadValues({}, props), {
       width: containerWidth,
-      height: containerHeight
+      height: containerHeight,
+      keyboardNavigationEnabled
     }));
-    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor, dataTestKey: "ChoroplethSvgWrapper" }, /* @__PURE__ */ react_exports.createElement(SvgChoroplethDynamic, __spreadValues({}, svgProps)));
+    return /* @__PURE__ */ react_exports.createElement(
+      VizStyleWrapper_default,
+      {
+        backgroundColor,
+        dataTestKey: "ChoroplethSvgWrapper",
+        ref: handleWrapperRef,
+        style: keyboardNavigationEnabled ? { outline: "none" } : void 0,
+        "aria-label": "Choropleth SVG container",
+        onBlurCapture: (event) => {
+          var _a2;
+          const nextTarget = (_a2 = event.relatedTarget) != null ? _a2 : document.activeElement;
+          if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+            setKeyboardNavigationEnabled(false);
+          }
+        }
+      },
+      props.mode !== "edit" ? /* @__PURE__ */ react_exports.createElement(
+        KeyboardNavButton,
+        {
+          onClick: () => setKeyboardNavigationEnabled(true),
+          elementRef: keyboardNavButtonRef
+        },
+        keyboardNavBtnText
+      ) : null,
+      /* @__PURE__ */ react_exports.createElement(LiveRegion, { "aria-live": "polite", "aria-atomic": "true" }, liveRegionMessage),
+      /* @__PURE__ */ react_exports.createElement(SvgChoroplethDynamic_default, __spreadProps(__spreadValues({}, svgProps), { onAreaHover: handleAreaHover })),
+      /* @__PURE__ */ react_exports.createElement(
+        Tooltip_default,
+        {
+          open: areaTooltip.open,
+          content: /* @__PURE__ */ react_exports.createElement(ChoroplethTooltipContent, null, areaTooltip.text),
+          inline: false,
+          defaultPlacement: "right",
+          renderAnchor: (anchorProps) => {
+            const _a2 = anchorProps, { elementRef } = _a2, restAnchorProps = __objRest(_a2, ["elementRef"]);
+            return /* @__PURE__ */ react_exports.createElement(
+              "span",
+              __spreadProps(__spreadValues({}, restAnchorProps), {
+                ref: (node) => {
+                  if (typeof elementRef === "function") {
+                    elementRef(node);
+                  } else if (elementRef && "current" in elementRef) {
+                    elementRef.current = node;
+                  }
+                },
+                style: {
+                  position: "absolute",
+                  left: areaTooltip.x,
+                  top: areaTooltip.y,
+                  width: 0,
+                  height: 0,
+                  pointerEvents: "none"
+                }
+              })
+            );
+          }
+        }
+      )
+    );
   };
   return /* @__PURE__ */ react_exports.createElement(Container, { width, height }, /* @__PURE__ */ react_exports.createElement(ChoroplethSvgWrapper, null, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), renderVisualization()));
 };
@@ -2944,36 +3824,36 @@ var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport33 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport38 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var PresetPalettes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport39 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var visualization_icons_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport40 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var placeholders_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport41 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var configUtils_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -2998,9 +3878,9 @@ var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport37 = __toESM(require("@splunk/themes/pick"));
+var defaultImport42 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var pick_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({
@@ -3215,7 +4095,7 @@ var createProtocolHandlers = (featureFlagContext = {}, imageContext = null) => {
   const handlers = {
     data: new Downloader_exports.URLDownloader()
   };
-  if (imageContext && imageContext.listProviders) {
+  if (imageContext == null ? void 0 : imageContext.listProviders) {
     imageContext.listProviders().forEach(({ type }) => {
       handlers[type] = new Downloader_exports.ImageRegistryFetcher(imageContext);
     });