@splunk/visualizations 28.7.0 → 28.9.0

package/Sankey.js

@@ -355,7 +355,10 @@ var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
     onSort = (e, { sortKey, sortDir }) => {
       if (typeof sortKey === "string") {
         const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
-        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
+        onRequestParamsChange(__spreadProps(__spreadValues({}, requestParams), {
+          offset: 0,
+          sort: { [sortKey]: nextSortDir }
+        }));
       } else {
         onRequestParamsChange(requestParams);
       }
@@ -499,7 +502,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
+  "data-splunk-visualization-version": "28.9.0 - 96b03188d"
 })`
     position: relative;
     width: 100%;
@@ -525,14 +528,23 @@ var defaultImport20 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
 var variables_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport21 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
 // esm-externals:@splunk/visualizations-shared/style
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport22 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var style_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -589,7 +601,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
+        "data-splunk-visualization-version": "28.9.0 - 96b03188d",
         width,
         height,
         backgroundColor
@@ -610,6 +622,14 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
+var PlaceholderContainer = styled_components_default.div`
+    /* The inline token color wins when supported. Older browsers discard an
+       unsupported oklch value and retain this inherited fallback instead. */
+    color: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+`;
 var IconPlaceholder = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -624,7 +644,6 @@ var IconPlaceholder = (props) => {
       style: {
         left: "50%",
         top: "50%",
-        color: iconColor,
         opacity: 0.15,
         position: "absolute",
         transform: "translate(-50%, -50%)"
@@ -634,7 +653,14 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
+  return /* @__PURE__ */ react_exports.createElement(
+    PlaceholderContainer,
+    {
+      "data-test": "icon-placeholder-container",
+      style: { width, height, background: backgroundColor, color: iconColor }
+    },
+    content
+  );
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -680,9 +706,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport23 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var numberUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // src/common/utils/dataUtils.ts
 var getFieldName = (field) => typeof field === "string" ? field : field.name;
@@ -708,7 +734,7 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
     let avgY = 0;
     let avgRangeStart = Math.floor((i + 1) * every) + 1;
     let avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    avgRangeEnd = Math.min(avgRangeEnd, dataLength);
     const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
       avgX += Number(data[avgRangeStart][0]);
@@ -743,9 +769,9 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
 };
 var strictlyCoerceYColumn = (column, options) => {
   const isNullCoercionEnabled = options.nullValueDisplay === "zero";
-  const canLooselyCoerceSomeValues = column.findIndex(
+  const canLooselyCoerceSomeValues = column.some(
     (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
-  ) >= 0;
+  );
   const coercedColumn = [];
   const canDownsampleColumn = !column.some((value) => {
     const coercedValue = Number(value);
@@ -764,7 +790,7 @@ var strictlyCoerceYColumn = (column, options) => {
 };
 var strictlyCoerceXColumn = (column, fieldType) => {
   if (fieldType === "number") {
-    const coercedXColumn = column.map((xValue) => Number(xValue));
+    const coercedXColumn = column.map(Number);
     if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
       return coercedXColumn;
     }
@@ -1063,16 +1089,16 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport24 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var FeatureFlags_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
-  if (context && Object.keys(context).find((key) => key === flagName)) {
+  if (context && Object.keys(context).includes(flagName)) {
     return context[flagName];
   }
-  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+  if (Object.keys(FeatureFlags_default).includes(flagName)) {
     return FeatureFlags_default[flagName];
   }
   return false;
@@ -1083,9 +1109,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var trellisUtils_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1102,9 +1128,9 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport26 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var visualization_canvas_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -1126,27 +1152,27 @@ var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport26 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport27 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var Triangle_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualizations-shared/propUtils
 var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var propUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var simpleXMLOptions_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -1185,9 +1211,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
+var canvasSupportedTimeSeriesCharts = /* @__PURE__ */ new Set(["splunk.line", "splunk.area"]);
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
+  return canvasSupportedTimeSeriesCharts.has(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -1203,7 +1229,7 @@ var filterChartDataFromInternalFields = (chartData) => {
   return { fields: filteredFields, columns: filteredColumns };
 };
 var convert2DArrayToNumbers = (arr) => {
-  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+  return arr.map((subArray) => subArray.map((element) => Number.parseFloat(element)));
 };
 var parseAxisValue = (val) => {
   if (val === void 0 || val === null || val === "auto" || val === "") {
@@ -1241,6 +1267,7 @@ var getLegend = (props) => {
       return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
         wrap: true
       }, commonLegendProps));
+    // Note: By default, use right legend
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
@@ -1373,10 +1400,10 @@ var getSeriesOverrides = (opts) => {
   let spanGaps;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode != null) {
-    spanGaps = true;
-  } else {
+  } else if (nullValueMode == null) {
     spanGaps = void 0;
+  } else {
+    spanGaps = true;
   }
   const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
   const isAreaChart = type === "area";
@@ -1449,9 +1476,9 @@ var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport30 = __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 defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -1816,11 +1843,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
-  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 xAxisMajorTickSizeNum = xAxisMajorTickSize == null ? void 0 : Number(xAxisMajorTickSize);
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize == null ? void 0 : Number(yAxisMajorTickSize);
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize == null ? void 0 : Number(y2AxisMajorTickSize);
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize == null ? void 0 : Number(yAxisMinorTickSize);
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize == null ? void 0 : Number(y2AxisMinorTickSize);
   const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
@@ -2232,6 +2259,76 @@ var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTr
   });
   return result;
 };
+var buildAllEventCallbackProps = (events, evaluatedOptionsToUse, onEventTrigger, { supportsEvents, hasEventHandlers, mode }) => {
+  if (!supportsEvents) return {};
+  const defaultEvents = {};
+  const userEvents = {};
+  Object.entries(events || {}).forEach(([eventKey, eventConfig]) => {
+    (eventConfig.source === "default" ? defaultEvents : userEvents)[eventKey] = eventConfig;
+  });
+  const userProps = hasEventHandlers && mode === "view" ? buildEventCallbackProps(userEvents, evaluatedOptionsToUse, onEventTrigger) : {};
+  return __spreadValues(__spreadValues({}, userProps), buildEventCallbackProps(defaultEvents, evaluatedOptionsToUse, onEventTrigger));
+};
+var applyContextTimezone = (localeContext) => {
+  if (localeContext.serializedTimezone && !moment_default.getDefaultSplunkTimezone()) {
+    moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
+  }
+};
+var getAsyncOptionsEvaluationParams = ({
+  visualizationID,
+  props,
+  optionsToEvaluate,
+  downsampledDataSources,
+  vizConfig,
+  bypassCloneDeepOptionScope,
+  lazyLoadingDataFrame
+}) => {
+  return {
+    visualizationID,
+    props,
+    options: __spreadValues({}, optionsToEvaluate),
+    dataSources: downsampledDataSources,
+    theme: vizConfig.themes,
+    bypassCloneDeepOptionScope,
+    lazyLoadingDataFrame
+  };
+};
+var evaluateOptionsSync = ({
+  optionsToEvaluate,
+  downsampledDataSources,
+  dataSourcesInState,
+  dataFramesInState,
+  setDataSourcesInState,
+  setDataFramesInState,
+  computeDataFrames,
+  featureFlagContext,
+  themeFunc
+}) => {
+  let dataFrames = dataFramesInState;
+  if (downsampledDataSources !== dataSourcesInState) {
+    setDataSourcesInState(downsampledDataSources);
+    dataFrames = Options_exports.Options.dataFrameFromDataSource(
+      downsampledDataSources,
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
+    setDataFramesInState(dataFrames);
+  }
+  let mergedFrames = dataFrames;
+  if (computeDataFrames && dataFrames) {
+    const derivedFrames = computeDataFrames({
+      dataSources: downsampledDataSources,
+      options: optionsToEvaluate.options
+    });
+    mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+  }
+  return Options_exports.Options.evaluate(
+    optionsToEvaluate,
+    downsampledDataSources,
+    themeFunc,
+    mergedFrames,
+    getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+  );
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2263,11 +2360,7 @@ var withDashboardViz = (opts) => {
       onRequestParamsChange = lodash_exports.noop
     } = props;
     const localeContext = react_exports.useContext(TimezoneContext_default);
-    if (localeContext.serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
-      }
-    }
+    applyContextTimezone(localeContext);
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
@@ -2295,7 +2388,12 @@ var withDashboardViz = (opts) => {
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
     );
     const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
-    const isMounted = react_exports.useRef(true);
+    const bypassCloneDeepOptionScope = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+    );
+    const lazyLoadingDataFrame = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
       const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
@@ -2334,63 +2432,74 @@ var withDashboardViz = (opts) => {
       threshold,
       isDownsamplingEnabled
     });
-    evaluatedOptions = useDeepMemo(() => {
+    const asyncOptionsEvaluationParams = useDeepMemo(
+      () => getAsyncOptionsEvaluationParams({
+        visualizationID,
+        props,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame
+      }),
+      [
+        visualizationID,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame,
+        currentThemeFamily,
+        currentThemeColorScheme,
+        currentThemeDensity,
+        localeContext.serializedTimezone
+      ]
+    );
+    react_exports.useEffect(() => {
+      if (!useAsyncEvaluatedOptions) {
+        return void 0;
+      }
+      let ownsEvaluation = true;
       try {
-        if (useAsyncEvaluatedOptions) {
-          const asyncDynamicOptionsEvaluatorParams = {
-            visualizationID,
-            props,
-            options: optionsToEvaluate,
-            dataSources: downsampledDataSources,
-            theme: vizConfig.themes,
-            bypassCloneDeepOptionScope: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-            ),
-            lazyLoadingDataFrame: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            )
-          };
-          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+        async_dynamic_options_evaluator_default.evaluate(asyncOptionsEvaluationParams).then((results) => {
+          if (ownsEvaluation) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(() => {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          let dataFrames = dataFramesInState;
-          if (downsampledDataSources !== dataSourcesInState) {
-            setDataSourcesInState(downsampledDataSources);
-            dataFrames = Options_exports.Options.dataFrameFromDataSource(
-              downsampledDataSources,
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            );
-            setDataFramesInState(dataFrames);
           }
-          let mergedFrames = dataFrames;
-          if (computeDataFrames && dataFrames) {
-            const derivedFrames = computeDataFrames({
-              dataSources: downsampledDataSources,
-              options: optionsToEvaluate.options
-            });
-            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+        }).catch(() => {
+          if (ownsEvaluation) {
+            setUseAsyncEvaluatedOptions(false);
           }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            mergedFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+        });
+      } catch (e) {
+        setUseAsyncEvaluatedOptions(false);
+      }
+      return () => {
+        ownsEvaluation = false;
+        async_dynamic_options_evaluator_default.reset(visualizationID);
+      };
+    }, [asyncOptionsEvaluationParams, useAsyncEvaluatedOptions, visualizationID]);
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          return {};
         }
+        return evaluateOptionsSync({
+          optionsToEvaluate,
+          downsampledDataSources,
+          dataSourcesInState,
+          dataFramesInState,
+          setDataSourcesInState,
+          setDataFramesInState,
+          computeDataFrames,
+          featureFlagContext,
+          themeFunc
+        });
       } catch (e) {
         if (e instanceof Error) {
           console.error(`unexpected error evaluating options: ${e.message}`);
         }
         return {};
       }
-      return {};
     }, [
       currentThemeFamily,
       currentThemeColorScheme,
@@ -2400,7 +2509,7 @@ var withDashboardViz = (opts) => {
       localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const evaluatedOptionsToUse = useAsyncEvaluatedOptions ? evaluatedOptionsAsync : evaluatedOptions;
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
     const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
@@ -2422,7 +2531,7 @@ var withDashboardViz = (opts) => {
       sortParams,
       paginatorParams
     };
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+    if (!vizConfig.supports.includes("page-and-sort" /* PAGE_AND_SORT */) && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       dataSourceMetadata = {};
     }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
@@ -2432,14 +2541,6 @@ var withDashboardViz = (opts) => {
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
     });
-    react_exports.useEffect(() => {
-      return () => {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_default.reset(visualizationID);
-        }
-      };
-    }, []);
     const { requiredProps = [], supports } = vizConfig;
     const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
@@ -2454,7 +2555,16 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const eventCallbackProps = buildAllEventCallbackProps(
+      vizConfig.events,
+      evaluatedOptionsToUse,
+      onEventTrigger,
+      {
+        supportsEvents: vizConfig.supports.includes("events" /* EVENTS */),
+        hasEventHandlers,
+        mode
+      }
+    );
     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.
@@ -2482,8 +2592,9 @@ var withDashboardViz = (opts) => {
     onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  return Object.assign(
+    (0, styled_components_exports.withTheme)(withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)),
+    { config: vizConfig }
   );
 };
 var withDashboardViz_default = withDashboardViz;
@@ -2493,36 +2604,36 @@ var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport31 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var visualization_color_palettes_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:d3-interpolate
 var d3_interpolate_exports = {};
 __export(d3_interpolate_exports, {
   default: () => d3_interpolate_default
 });
-var defaultImport31 = __toESM(require("d3-interpolate"));
+var defaultImport32 = __toESM(require("d3-interpolate"));
 __reExport(d3_interpolate_exports, require("d3-interpolate"));
-var d3_interpolate_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var d3_interpolate_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:d3-array
 var d3_array_exports = {};
 __export(d3_array_exports, {
   default: () => d3_array_default
 });
-var defaultImport32 = __toESM(require("d3-array"));
+var defaultImport33 = __toESM(require("d3-array"));
 __reExport(d3_array_exports, require("d3-array"));
-var d3_array_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var d3_array_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:d3-collection
 var d3_collection_exports = {};
 __export(d3_collection_exports, {
   default: () => d3_collection_default
 });
-var defaultImport33 = __toESM(require("d3-collection"));
+var defaultImport34 = __toESM(require("d3-collection"));
 __reExport(d3_collection_exports, require("d3-collection"));
-var d3_collection_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var d3_collection_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/Sankey/PureSankey/lib/sankey.js
 var d3_sankey = function() {
@@ -2908,18 +3019,18 @@ var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport34 = __toESM(require("d3-scale"));
+var defaultImport35 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var d3_scale_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualization-encoding/utils/types
 var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport36 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var types_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Sankey/PureSankey/SankeyUtils.ts
 var insertNodeIfNotExist = (sankeyData, nodeName) => {
@@ -2930,7 +3041,7 @@ var insertNodeIfNotExist = (sankeyData, nodeName) => {
     return;
   }
   nodeName = nodeName.trim();
-  if (!nodes.find((node) => node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase())) {
+  if (!nodes.some((node) => node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase())) {
     nodes.push({ name: nodeName });
   }
 };
@@ -3046,10 +3157,14 @@ var extractLinkMidPoint = (pathStr) => {
   const points = [];
   points.push(section1.split(",").map((i) => Number.parseFloat(i)));
   const point2Arr = section2.split(" ");
-  points.push(point2Arr[point2Arr.length - 1].split(",").map((i) => Number.parseFloat(i)));
-  points.push(section3.split(",").map((i) => Number.parseFloat(i)));
+  points.push(
+    point2Arr.at(-1).split(",").map((i) => Number.parseFloat(i)),
+    section3.split(",").map((i) => Number.parseFloat(i))
+  );
   const point4Arr = section4.split(" ");
-  points.push(point4Arr[point4Arr.length - 1].split(",").map((i) => Number.parseFloat(i)));
+  points.push(
+    point4Arr.at(-1).split(",").map((i) => Number.parseFloat(i))
+  );
   const width = Math.abs(points[0][0] - points[1][0]) / 2;
   const x = Math.min(points[0][0], points[1][0]) + width;
   const height = Math.abs(points[0][1] - points[2][1]) / 2;
@@ -3172,23 +3287,126 @@ var computeNodeLabelWidths = (nodes, nodeWidth, chartWidth) => {
   return widthMap;
 };
 
+// src/common/utils/textUtils.ts
+var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+var truncateEnd = (text, context, maxWidth, ellipsis) => {
+  for (let i = text.length - 1; i > 0; i -= 1) {
+    const truncatedText = text.slice(0, i) + ellipsis;
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateStart = (text, context, maxWidth, ellipsis) => {
+  for (let i = 0; i < text.length; i += 1) {
+    const truncatedText = ellipsis + text.slice(i);
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateMiddle = (text, context, maxWidth, ellipsis) => {
+  const ellipsisWidth = context.measureText(ellipsis).width;
+  for (let i = 0; i < text.length / 2; i += 1) {
+    const left = text.slice(0, Math.floor(text.length / 2) - i);
+    const right = text.slice(Math.ceil(text.length / 2) + i);
+    const truncatedText = left + ellipsis + right;
+    if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateText = (text, maxWidth, truncationType, font = `10px ${VIZ_FONT_FAMILY}`) => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) return text;
+  context.font = font;
+  const ellipsis = "...";
+  const fullTextWidth = context.measureText(text).width;
+  if (fullTextWidth <= maxWidth) {
+    return text;
+  }
+  if (truncationType === "ellipsisEnd") {
+    return truncateEnd(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisStart") {
+    return truncateStart(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisMiddle") {
+    return truncateMiddle(text, context, maxWidth, ellipsis);
+  }
+  return ellipsis;
+};
+
 // src/Sankey/PureSankey/SankeyNode.tsx
 var NODE_VALUE_PRECISION = 2;
 var MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY = 24;
 var LABEL_LINE_HEIGHT = 16;
 var MAX_LABEL_LINES = 3;
-var getNodeOpacity = (nodeIndex, activeNodes) => {
+var LABEL_FONT = `12px ${DEFAULT_FONT_FAMILY}`;
+var packWordsIntoLines = (words, context, maxWidthPx, maxLines) => {
+  const lines = [];
+  let currentLine = "";
+  let wordIndex = 0;
+  while (wordIndex < words.length && lines.length < maxLines) {
+    const word = words[wordIndex];
+    const candidate = currentLine ? `${currentLine} ${word}` : word;
+    if (currentLine && context.measureText(candidate).width > maxWidthPx) {
+      lines.push(currentLine);
+      currentLine = "";
+    } else {
+      currentLine = candidate;
+      wordIndex += 1;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  return { lines, wordIndex };
+};
+var wrapTextToLines = (text, maxWidthPx, maxLines) => {
+  if (!text) return [""];
+  if (maxWidthPx <= 0) return [truncateText(text, maxWidthPx, "ellipsisEnd", LABEL_FONT)];
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) return [text];
+  context.font = LABEL_FONT;
+  const words = text.split(" ");
+  const { lines, wordIndex } = packWordsIntoLines(words, context, maxWidthPx, maxLines);
+  if (lines.length === maxLines && wordIndex < words.length) {
+    lines[maxLines - 1] = `${lines[maxLines - 1]} ${words.slice(wordIndex).join(" ")}`;
+  }
+  const result = lines.length ? lines : [text];
+  return result.map((line) => truncateText(line, maxWidthPx, "ellipsisEnd", LABEL_FONT));
+};
+var getNodeOpacity = (nodeIndex, activeNodes, inactiveOpacity) => {
   if (!(activeNodes == null ? void 0 : activeNodes.length)) {
     return DEFAULT_NODE_OPACITY;
   }
   const isActiveNode = activeNodes.find((node) => node.index === nodeIndex);
-  return isActiveNode ? DEFAULT_NODE_OPACITY : INACTIVE_OPACITY;
+  return isActiveNode ? DEFAULT_NODE_OPACITY : inactiveOpacity;
 };
 var getNodeHeight = (node) => {
   return node.dy < 0 ? 1 : node.dy;
 };
+var getNodeLabelValueText = (showValues, labelDisplay, nodeValueFormatted, nodePercentFormatted, unit) => {
+  if (!showValues) {
+    return "";
+  }
+  switch (labelDisplay) {
+    case "values":
+      return `${unit}${nodeValueFormatted}`;
+    case "percentage":
+      return nodePercentFormatted;
+    case "valuesAndPercentage":
+      return `${nodePercentFormatted} ${unit}${nodeValueFormatted}`;
+    default:
+      return "";
+  }
+};
 var NodeGroup = styled_components_default.g`
-    opacity: ${(props) => getNodeOpacity(props.node.index, props.activeNodes)};
+    opacity: ${(props) => getNodeOpacity(props.node.index, props.activeNodes, props.inactiveOpacity)};
     &:hover {
         cursor: pointer;
     }
@@ -3197,10 +3415,50 @@ NodeGroup.displayName = "NodeGroup";
 var NodeRect = styled_components_default.rect`
     fill: ${(props) => typeof props.colorCategoryMapping === "function" ? props.colorCategoryMapping(props.node.name) : DEFAULT_NODE_COLOR};
 `;
+var OneCdLabelTspan = styled_components_default.tspan`
+    /* Loki's Chromium 90 does not support the 1CD oklch colors. */
+    fill: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+    @supports (color: oklch(0 0 0)) {
+        fill: ${themes_exports.variables.contentColorActive};
+    }
+    font-family: ${themes_exports.variables.fontFamily};
+    font-size: ${themes_exports.variables.fontSizeSmall};
+    font-style: normal;
+    font-weight: ${themes_exports.variables.fontWeightSemiBold};
+    line-height: ${themes_exports.variables.lineHeightComfortable};
+
+    /* Use directional shadows instead of WebKit text stroke so the outline
+       remains subtle and renders consistently in Storybook and Loki. */
+    text-shadow:
+        -1px 0 ${themes_exports.variables.contentColorInverted},
+        1px 0 ${themes_exports.variables.contentColorInverted},
+        0 -1px ${themes_exports.variables.contentColorInverted},
+        0 1px ${themes_exports.variables.contentColorInverted};
+`;
+var SankeyNodeLabelLines = ({ lines, textX, firstLineCenterY, isSplunk1cd }) => lines.map((line, i) => {
+  const sharedProps = {
+    key: i,
+    x: textX,
+    y: i === 0 ? firstLineCenterY : void 0,
+    dy: i === 0 ? "0.35em" : LABEL_LINE_HEIGHT,
+    "data-test": line.dataTest
+  };
+  return isSplunk1cd ? (
+    // eslint-disable-next-line react/jsx-key
+    /* @__PURE__ */ react_exports.createElement(OneCdLabelTspan, __spreadProps(__spreadValues({}, sharedProps), { opacity: line.opacity }), line.text)
+  ) : (
+    // eslint-disable-next-line react/jsx-key
+    /* @__PURE__ */ react_exports.createElement("tspan", __spreadProps(__spreadValues({}, sharedProps), { fill: line.fill, opacity: line.opacity }), line.text)
+  );
+});
 var SankeyNode = ({
   node,
   activeNodes,
   nodeWidth,
+  inactiveOpacity = INACTIVE_OPACITY,
   handleMouseOver = () => {
   },
   handleMouseLeave = () => {
@@ -3215,6 +3473,7 @@ var SankeyNode = ({
     {
       node,
       activeNodes,
+      inactiveOpacity,
       className: "node",
       key: `node-${node.index}`,
       "data-test": `node-${node.index}`,
@@ -3245,7 +3504,9 @@ var SankeyNodeLabel = ({
   nodeValueColor,
   maxNode,
   labelDisplay: labelDisplayInput,
-  unit
+  unit,
+  isSplunk1cd = false,
+  inactiveOpacity = INACTIVE_OPACITY
 }) => {
   const labelDisplay = labelDisplayInput != null ? labelDisplayInput : "off";
   let nodeValueFormatted = "";
@@ -3266,99 +3527,68 @@ var SankeyNodeLabel = ({
   const totalLinesAvailable = Math.min(MAX_LABEL_LINES + (showValues ? 1 : 0), totalLinesFromHeight);
   const valueLinesNeeded = showValues ? 1 : 0;
   const nameLinesAvailable = Math.min(MAX_LABEL_LINES, Math.max(1, totalLinesAvailable - valueLinesNeeded));
-  const contentLines = nameLinesAvailable + (showValues ? 1 : 0);
-  const minContentHeight = contentLines * LABEL_LINE_HEIGHT;
-  const foHeight = Math.max(nodeHeight, minContentHeight);
-  const foY = (nodeHeight - foHeight) / 2;
-  const foX = isLeftSide ? nodeWidth + LABEL_PADDING : -(labelWidth + LABEL_PADDING);
-  const foWidth = Math.max(0, labelWidth);
-  let valueText = "";
+  const labelWidthPx = Math.max(0, labelWidth);
+  const textX = node.x + (isLeftSide ? nodeWidth + LABEL_PADDING : -LABEL_PADDING);
+  const textAnchor = isLeftSide ? "start" : "end";
+  const valueText = getNodeLabelValueText(
+    showValues,
+    labelDisplay,
+    nodeValueFormatted,
+    nodePercentFormatted,
+    unit
+  );
+  if (labelWidthPx <= 0) return null;
+  const nameLines = wrapTextToLines(node.name, labelWidthPx, nameLinesAvailable);
+  const truncatedValueText = valueText ? truncateText(valueText, labelWidthPx, "ellipsisEnd", LABEL_FONT) : "";
+  const lines = nameLines.map((line) => ({ text: line, fill: nodeTextColor }));
   if (showValues) {
-    if (labelDisplay === "values") valueText = `${unit}${nodeValueFormatted}`;
-    else if (labelDisplay === "percentage") valueText = nodePercentFormatted;
-    else if (labelDisplay === "valuesAndPercentage")
-      valueText = `${nodePercentFormatted} ${unit}${nodeValueFormatted}`;
+    lines.push({
+      text: truncatedValueText,
+      fill: nodeValueColor || nodeTextColor,
+      opacity: isSplunk1cd ? 0.8 : 0.82,
+      dataTest: `node-label-${node.index}`
+    });
   }
-  const textAlign = isLeftSide ? "left" : "right";
-  const baseTextStyle = {
-    fontSize: "12px",
-    fontFamily: DEFAULT_FONT_FAMILY,
-    letterSpacing: "0.02em",
-    lineHeight: `${LABEL_LINE_HEIGHT}px`,
-    margin: 0,
-    padding: 0
-  };
-  if (foWidth <= 0) return null;
+  const totalLines = lines.length;
+  const firstLineCenterY = node.y + nodeHeight / 2 - (totalLines - 1) * LABEL_LINE_HEIGHT / 2;
   return /* @__PURE__ */ react_exports.createElement(
-    "foreignObject",
+    "text",
     {
-      x: node.x + foX,
-      y: node.y + foY,
-      width: foWidth,
-      height: foHeight,
-      opacity: getNodeOpacity(node.index, activeNodes),
-      style: { pointerEvents: "none", overflow: "visible" }
+      "data-test": `node-text-${node.index}`,
+      textAnchor,
+      style: { fontSize: "12px", fontFamily: DEFAULT_FONT_FAMILY, letterSpacing: "0.02em" },
+      opacity: isSplunk1cd ? void 0 : getNodeOpacity(node.index, activeNodes, inactiveOpacity),
+      pointerEvents: "none"
     },
     /* @__PURE__ */ react_exports.createElement(
-      "div",
+      SankeyNodeLabelLines,
       {
-        "data-test": `node-text-${node.index}`,
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          height: "100%",
-          overflow: "hidden",
-          textAlign,
-          pointerEvents: "none"
-        }
-      },
-      /* @__PURE__ */ react_exports.createElement(
-        "div",
-        {
-          style: __spreadProps(__spreadValues({}, baseTextStyle), {
-            color: nodeTextColor,
-            display: "-webkit-box",
-            WebkitLineClamp: nameLinesAvailable,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden",
-            wordBreak: "break-word"
-          })
-        },
-        node.name
-      ),
-      showValues && /* @__PURE__ */ react_exports.createElement(
-        "div",
-        {
-          "data-test": `node-label-${node.index}`,
-          style: __spreadProps(__spreadValues({}, baseTextStyle), {
-            color: nodeValueColor || nodeTextColor,
-            opacity: 0.82,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          })
-        },
-        valueText
-      )
+        lines,
+        textX,
+        firstLineCenterY,
+        isSplunk1cd
+      }
     )
   );
 };
 var SankeyNode_default = SankeyNode;
 
 // src/Sankey/PureSankey/SankeyLink.tsx
-var getLinkFill = (link, colorCategoryMapping, colorMode) => {
+var getLinkFill = (link, colorCategoryMapping, colorMode, gradientId) => {
+  if (gradientId) {
+    return `url(#${gradientId})`;
+  }
   if (colorMode === "categorical") {
     return colorCategoryMapping ? colorCategoryMapping(link.source.name) : DEFAULT_LINK_COLOR;
   }
   return (colorCategoryMapping == null ? void 0 : colorCategoryMapping[link.index]) || DEFAULT_LINK_COLOR;
 };
-var getLinkOpacity = (link, activeLinks, linkOpacity) => {
+var getLinkOpacity = (link, activeLinks, linkOpacity, inactiveOpacity) => {
   if (!(activeLinks == null ? void 0 : activeLinks.length)) {
     return linkOpacity;
   }
   const isActiveLink = activeLinks.find((l) => l.id === link.id);
-  return isActiveLink ? linkOpacity : INACTIVE_OPACITY;
+  return isActiveLink ? linkOpacity : inactiveOpacity;
 };
 var StyledSankeyLink = styled_components_default.g`
     &:hover {
@@ -3370,7 +3600,9 @@ var SankeyLink = ({
   colorCategoryMapping,
   activeLinks,
   linkOpacity,
+  inactiveOpacity = INACTIVE_OPACITY,
   colorMode,
+  gradientId,
   path,
   handleLinkClick,
   handleMouseOver = () => {
@@ -3387,8 +3619,8 @@ var SankeyLink = ({
       key: link.id,
       id: link.id,
       "data-test": link.id,
-      fill: getLinkFill(link, colorCategoryMapping, colorMode),
-      opacity: getLinkOpacity(link, activeLinks, linkOpacity),
+      fill: getLinkFill(link, colorCategoryMapping, colorMode, gradientId),
+      opacity: getLinkOpacity(link, activeLinks, linkOpacity, inactiveOpacity),
       onClick: linkClickHandler,
       onMouseOver: handleMouseOver,
       onMouseLeave: (ev) => {
@@ -3421,9 +3653,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport36 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport37 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var Popover_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/Sankey/PureSankey/SankeyTooltip.tsx
 var DEFAULT_PLACEMENT = "below";
@@ -3604,6 +3836,19 @@ var SankeyTooltip = ({
 };
 var SankeyTooltip_default = SankeyTooltip;
 
+// src/common/utils/visualizationTheme.ts
+var getVisualizationThemeFamily = ({ theme }) => {
+  var _a;
+  if (theme == null ? void 0 : theme.visualizationThemeFamily) {
+    return theme.visualizationThemeFamily;
+  }
+  if (((_a = theme == null ? void 0 : theme.splunkThemeV1) == null ? void 0 : _a.customizer) === themes_exports.unstable_splunk1cdThemeCustomizer) {
+    return "splunk-1cd";
+  }
+  return getSettingsFromThemedProps_default({ theme }).family;
+};
+var isSplunk1cdTheme = (props) => getVisualizationThemeFamily(props) === "splunk-1cd";
+
 // src/Sankey/PureSankey/PureSankey.tsx
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
 var DEFAULT_NODE_COLOR = "#909090";
@@ -3612,6 +3857,8 @@ var DEFAULT_SERIES_COLOR = visualization_color_palettes_exports.VIZ_CATEGORICAL;
 var DEFAULT_LINK_OPACITY = 0.5;
 var DEFAULT_NODE_OPACITY = 1;
 var INACTIVE_OPACITY = 0.05;
+var ONE_CD_INACTIVE_OPACITY = 0.15;
+var getInactiveOpacity = (isSplunk1cd) => isSplunk1cd ? ONE_CD_INACTIVE_OPACITY : INACTIVE_OPACITY;
 var CHART_MIN_WIDTH = 300;
 var CHART_MIN_HEIGHT = 200;
 var DEFAULT_CHART_WIDTH = 600;
@@ -3621,6 +3868,8 @@ var DEFAULT_TARGET_INDEX = 1;
 var DEFAULT_LINK_VALUE_INDEX = 2;
 var MARGIN = { top: 17, right: 25, bottom: 17, left: 30 };
 var TRANSLATE_POS = { x: 28, y: 17 };
+var ONE_CD_GRADIENT_START_OFFSET = "0.16%";
+var ONE_CD_GRADIENT_END_OFFSET = "99.85%";
 var SankeyContainer = styled_components_default.div`
     overflow: hidden;
     ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
@@ -3650,6 +3899,10 @@ var PureSankey = ({
   onNodeClick = lodash_exports.noop,
   onLinkClick = lodash_exports.noop
 }) => {
+  const theme = (0, styled_components_exports.useTheme)();
+  const isSplunk1cd = isSplunk1cdTheme({ theme });
+  const inactiveOpacity = getInactiveOpacity(isSplunk1cd);
+  const gradientIdPrefix = react_exports.useMemo(() => (0, id_exports.createDOMID)("sankey-gradient"), []);
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
   const cachedHandleResize = react_exports.useCallback((w, h) => {
@@ -3733,8 +3986,8 @@ var PureSankey = ({
     if (sankeyContainerElement == null ? void 0 : sankeyContainerElement.current) {
       const w = sankeyContainerElement.current.getBoundingClientRect().width;
       const h = sankeyContainerElement.current.getBoundingClientRect().height;
-      const sWidth = checkDigitsOnly(width) ? parseInt(width, 10) : w;
-      const sHeight = checkDigitsOnly(height) ? parseInt(height, 10) : h;
+      const sWidth = checkDigitsOnly(width) ? Number.parseInt(width, 10) : w;
+      const sHeight = checkDigitsOnly(height) ? Number.parseInt(height, 10) : h;
       setSankeyWidth(sWidth - MARGIN.left - MARGIN.right);
       setSankeyHeight(sHeight - MARGIN.top - MARGIN.bottom);
     }
@@ -3772,6 +4025,15 @@ var PureSankey = ({
   });
   const maxNode = getMaxNode(sankeyData.nodes);
   const nodeLabelWidths = computeNodeLabelWidths(sankeyData.nodes, nodeWidth, sankeyWidth);
+  const useOneCdGradients = isSplunk1cd && colorMode === "categorical";
+  const getGradientId = (link) => useOneCdGradients && link.source.index !== link.target.index ? `${gradientIdPrefix}-${link.source.index}-${link.target.index}-${link.index}` : void 0;
+  const getNodeColor = (node) => {
+    if (typeof colorCategoryMapping === "function") {
+      const color = colorCategoryMapping(node.name);
+      return typeof color === "string" ? color : DEFAULT_LINK_COLOR;
+    }
+    return DEFAULT_LINK_COLOR;
+  };
   const renderLinks = (links) => {
     return links.map((link) => /* @__PURE__ */ react_exports.createElement(
       SankeyLink_default,
@@ -3779,11 +4041,13 @@ var PureSankey = ({
         link,
         activeLinks,
         linkOpacity,
+        inactiveOpacity,
         path,
         key: getLinkId(link),
         "data-test": getLinkId(link),
         colorCategoryMapping,
         colorMode,
+        gradientId: getGradientId(link),
         handleMouseOver: (ev) => {
           setActiveLinks([link]);
           setActiveNodes([link.source, link.target]);
@@ -3805,6 +4069,7 @@ var PureSankey = ({
         "data-test": getNodeId(node),
         activeNodes,
         nodeWidth,
+        inactiveOpacity,
         colorCategoryMapping,
         handleMouseOver: (ev) => {
           const connections = nodeConnectionsMap[node.index];
@@ -3834,10 +4099,43 @@ var PureSankey = ({
         labelDisplay,
         unit,
         nodeTextColor,
-        nodeValueColor
+        nodeValueColor,
+        isSplunk1cd,
+        inactiveOpacity
       }
     ));
   };
+  const renderLinkGradients = () => {
+    if (!useOneCdGradients) {
+      return null;
+    }
+    return /* @__PURE__ */ react_exports.createElement("defs", null, sankeyData.links.map((link) => {
+      const gradientId = getGradientId(link);
+      if (!gradientId) {
+        return null;
+      }
+      return /* @__PURE__ */ react_exports.createElement(
+        "linearGradient",
+        {
+          id: gradientId,
+          key: gradientId,
+          gradientUnits: "userSpaceOnUse",
+          x1: link.source.x + link.source.dx,
+          y1: link.source.y + link.sy + link.dy / 2,
+          x2: link.target.x,
+          y2: link.target.y + link.ty + link.dy / 2
+        },
+        /* @__PURE__ */ react_exports.createElement(
+          "stop",
+          {
+            offset: ONE_CD_GRADIENT_START_OFFSET,
+            stopColor: getNodeColor(link.source)
+          }
+        ),
+        /* @__PURE__ */ react_exports.createElement("stop", { offset: ONE_CD_GRADIENT_END_OFFSET, stopColor: getNodeColor(link.target) })
+      );
+    }));
+  };
   if (containerWidth < CHART_MIN_WIDTH || containerHeight < CHART_MIN_HEIGHT) {
     return /* @__PURE__ */ react_exports.createElement(SankeyContainer, { height, width, ref: sankeyContainerElement }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
       Message_default,
@@ -3856,7 +4154,7 @@ var PureSankey = ({
       dataTestKey: "SankeyWrapper",
       onMouseLeave: handleWrapperMouseLeave
     },
-    /* @__PURE__ */ react_exports.createElement("svg", { height: "100%", width: "100%", "data-test": "sankey-svg" }, /* @__PURE__ */ react_exports.createElement("g", { transform: `translate(${TRANSLATE_POS.x},${TRANSLATE_POS.y})` }, /* @__PURE__ */ react_exports.createElement("g", { className: "link-group", "data-test": "link-group" }, renderLinks(sankeyData.links), openLinkToolTip && /* @__PURE__ */ react_exports.createElement(
+    /* @__PURE__ */ react_exports.createElement("svg", { height: "100%", width: "100%", "data-test": "sankey-svg" }, renderLinkGradients(), /* @__PURE__ */ react_exports.createElement("g", { transform: `translate(${TRANSLATE_POS.x},${TRANSLATE_POS.y})` }, /* @__PURE__ */ react_exports.createElement("g", { className: "link-group", "data-test": "link-group" }, renderLinks(sankeyData.links), openLinkToolTip && /* @__PURE__ */ react_exports.createElement(
       SankeyTooltip_default,
       {
         mode: "link",
@@ -3900,36 +4198,27 @@ var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport37 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport38 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var visualization_icons_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport38 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport39 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var placeholders_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport39 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport40 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport40 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var PresetPalettes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};