@splunk/visualizations 26.4.0 → 27.0.0

package/SingleValueIcon.config.js

@@ -1,916 +1,517 @@
-/*!
- * Copyright © 2024 Splunk Inc.
- * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
- * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 68);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-schemas");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
-
-var lodash_1 = __webpack_require__(5); // included for backwards compatibility
-
-
-var visualization_schemas_1 = __webpack_require__(2);
-
-Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
-  enumerable: true,
-  get: function get() {
-    return visualization_schemas_1.enhanceOptionsSchemaWithDynamicOptions;
-  }
-});
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
-
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
-    });
-  });
-  return enhancedConfig;
-}
-
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
-
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
-
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
-
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
-
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
-
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
-
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
-
-
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
-
-
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
-    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
-
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
-
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
-
-function generatePrecisionValues(numPrecisionValues) {
-  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
-
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
-
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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 = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+  return to;
 };
-
-exports.insertLayout = insertLayout;
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/configUtils");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SingleValueIcon/config.ts
+var config_exports = {};
+__export(config_exports, {
+  default: () => config_default
 });
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
-
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports, __webpack_require__) {
+module.exports = __toCommonJS(config_exports);
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
 });
-exports.VizCategory = void 0;
-var VizCategory;
-
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/pick");
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/variables");
-
-/***/ }),
-/* 10 */,
-/* 11 */,
-/* 12 */,
-/* 13 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
-
-/***/ }),
-/* 14 */,
-/* 15 */,
-/* 16 */,
-/* 17 */,
-/* 18 */,
-/* 19 */,
-/* 20 */,
-/* 21 */,
-/* 22 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
-
-var StaticBackgroundColorEditor = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background color'),
-  option: 'backgroundColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
-  }
-};
-/* harmony default export */ __webpack_exports__["default"] = (StaticBackgroundColorEditor);
-
-/***/ }),
-/* 23 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
-
-/***/ }),
-/* 24 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
-
-var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-      defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
-    option: 'trendColor',
-    context: 'trendColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
+var defaultImport = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport2 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
+var PresetPalettes_exports = {};
+__export(PresetPalettes_exports, {
+  default: () => PresetPalettes_default
+});
+var defaultImport3 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var PresetPalettes_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport4 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport5 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/visualizations-shared/configUtils
+var configUtils_exports = {};
+__export(configUtils_exports, {
+  default: () => configUtils_default
+});
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
+var configUtils_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// src/common/configContext/singleValueContext.ts
+var defaultContext = {
+  trendColorConfig: [
+    {
+      to: 0,
+      value: "#9E2520"
     },
-    editorProps: {
-      labelPosition: 'top',
-      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: trend value'),
-      formatters: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
-        value: 'rangeValue',
-        defaults: {
-          trendValue: defaultContext.trendColorConfig
-        }
-      }],
-      dataSelectors: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
-        value: 'trendValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
+    {
+      from: 0,
+      value: "#1C6B2D"
     }
-  };
+  ],
+  majorColorConfig: [
+    { to: 20, value: "#D41F1F" },
+    { from: 20, to: 40, value: "#D94E17" },
+    { from: 40, to: 60, value: "#CBA700" },
+    { from: 60, to: 80, value: "#669922" },
+    { from: 80, value: "#118832" }
+  ],
+  majorColorMatchConfig: [{ match: "", value: "#5C33FF" }]
 };
 
-/***/ }),
-/* 25 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicBackgroundColorEditor", function() { return getDynamicBackgroundColorEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
-
-var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-      defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background color'),
-    option: 'backgroundColor',
-    context: 'backgroundColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
+// src/common/editorConfig/StaticMajorAndTrendLayout.js
+var StaticMajorAndTrendLayout = [
+  [
+    {
+      label: (0, i18n_exports._)("Unit position"),
+      // todo: we need a new editor combining unit and position
+      option: "unitPosition",
+      editor: "editor.select",
+      editorProps: {
+        values: [
+          { label: (0, i18n_exports._)("Before"), value: "before" },
+          { label: (0, i18n_exports._)("After"), value: "after" }
+        ]
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
     },
-    editorProps: {
-      labelPosition: 'top',
-      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: background'),
-      formatters: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
-        value: 'rangeValue',
-        defaults: {
-          majorValue: defaultContext.majorColorConfig,
-          trendValue: defaultContext.trendColorConfig
-        }
-      }, {
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Matches'),
-        value: 'matchValue',
-        defaults: {
-          majorValue: defaultContext.majorColorMatchConfig
-        }
-      }],
-      dataSelectors: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major Value'),
-        value: 'majorValue'
-      }, {
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend'),
-        value: 'trendValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
+    {
+      label: (0, i18n_exports._)("Unit label"),
+      option: "unit",
+      editor: "editor.text",
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
     }
-  };
-};
-
-/***/ }),
-/* 26 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Precision"),
+      option: "numberPrecision",
+      editor: "editor.number",
+      editorProps: {
+        min: 0,
+        max: 20
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    }
+  ]
+];
+var StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
+// src/common/editorConfig/StaticBackgroundColorEditor.js
+var StaticBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
+};
+var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
 
-var StaticMajorAndTrendLayout = [[{
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Unit position'),
-  // todo: we need a new editor combining unit and position
-  option: 'unitPosition',
-  editor: 'editor.select',
-  editorProps: {
-    values: [{
-      label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Before'),
-      value: 'before'
-    }, {
-      label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('After'),
-      value: 'after'
-    }]
-  },
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return options.showValue || options.showValue === undefined;
-  }
-}, {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Unit label'),
-  option: 'unit',
-  editor: 'editor.text',
-  showEditor: function showEditor(_ref2) {
-    var options = _ref2.options;
-    return options.showValue || options.showValue === undefined;
-  }
-}], [{
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Precision'),
-  option: 'numberPrecision',
-  editor: 'editor.number',
-  editorProps: {
-    min: 0,
-    max: 20
-  },
-  showEditor: function showEditor(_ref3) {
-    var options = _ref3.options;
-    return options.showValue || options.showValue === undefined;
+// esm-externals:@splunk/visualizations-shared/colorConstants
+var colorConstants_exports = {};
+__export(colorConstants_exports, {
+  default: () => colorConstants_default
+});
+var defaultImport7 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+__reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
+var colorConstants_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// src/common/editorConfig/StaticIconColorEditor.js
+var StaticIconColorEditor = [
+  {
+    label: (0, i18n_exports._)("Icon"),
+    option: "iconColor",
+    editor: "editor.color",
+    showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.iconColor),
+    editorProps: {
+      labelPosition: "top",
+      value: null,
+      palette: [null, ...colorConstants_exports.COLOR_EDITOR_PALETTE]
+    }
   }
-}]];
-/* harmony default export */ __webpack_exports__["default"] = (StaticMajorAndTrendLayout);
-
-/***/ }),
-/* 27 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
+];
+var StaticIconColorEditor_default = StaticIconColorEditor;
 
+// src/common/editorConfig/StaticMajorColorEditor.js
 var StaticMajorColorEditor = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
-  option: 'majorColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
-  }
+  label: (0, i18n_exports._)("Major value"),
+  option: "majorColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.majorColor)
 };
-/* harmony default export */ __webpack_exports__["default"] = (StaticMajorColorEditor);
-
-/***/ }),
-/* 28 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
+var StaticMajorColorEditor_default = StaticMajorColorEditor;
 
+// src/common/editorConfig/StaticTrendColorEditor.js
 var StaticTrendColorEditor = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
-  option: 'trendColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
-  },
-  isDisabled: function isDisabled(_ref2) {
-    var options = _ref2.options;
-    return options.trendDisplay === 'off';
-  }
+  label: (0, i18n_exports._)("Trend value"),
+  option: "trendColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.trendColor),
+  isDisabled: ({ options }) => options.trendDisplay === "off"
 };
-/* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
-
-/***/ }),
-/* 29 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TrellisBackgroundColorEditor = exports.TrellisEditorConfig = void 0;
-
-var React = __webpack_require__(30);
-
-var i18n_1 = __webpack_require__(0);
-
-var FeatureFlagContext_1 = __webpack_require__(31);
-
-var visualization_schemas_1 = __webpack_require__(2);
-/* eslint-disable react-hooks/rules-of-hooks */
-
-
-exports.TrellisEditorConfig = [[{
-  label: (0, i18n_1._)('Trellis layout'),
-  option: 'splitByLayout',
-  editor: 'editor.toggle',
-  showEditor: function showEditor() {
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn;
-  }
-}], [{
-  label: (0, i18n_1._)('Split by'),
-  option: 'trellisSplitBy',
-  editor: 'editor.trellisSplitBy',
-  editorProps: {
-    dataSourceKey: 'primary'
-  },
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
-  }
-}], [{
-  label: (0, i18n_1._)('Number of columns'),
-  option: 'trellisColumns',
-  editor: 'editor.number',
-  editorProps: {
-    min: 1
-  },
-  placeholder: (0, i18n_1._)('Auto'),
-  showEditor: function showEditor(_ref2) {
-    var options = _ref2.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
-  }
-}], [{
-  label: (0, i18n_1._)('Min column width'),
-  option: 'trellisMinColumnWidth',
-  editor: 'editor.number',
-  editorProps: {
-    min: 1
-  },
-  showEditor: function showEditor(_ref3) {
-    var options = _ref3.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
-  }
-}, {
-  label: (0, i18n_1._)('Row height'),
-  option: 'trellisRowHeight',
-  editor: 'editor.number',
+var StaticTrendColorEditor_default = StaticTrendColorEditor;
+
+// src/common/editorConfig/DynamicMajorColorEditor.js
+var getDynamicMajorColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Major value"),
+  option: "majorColor",
+  context: "majorColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.majorColor),
   editorProps: {
-    min: 1
-  },
-  showEditor: function showEditor(_ref4) {
-    var options = _ref4.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: major value"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorConfig
+        }
+      },
+      {
+        label: (0, i18n_exports._)("Matches"),
+        value: "matchValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorMatchConfig
+        }
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Major value"),
+        value: "majorValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
   }
-}], [{
-  label: (0, i18n_1._)('Max number of components per page'),
-  option: 'trellisPageCount',
-  editor: 'editor.number',
+});
+
+// src/common/editorConfig/DynamicTrendColorEditor.js
+var getDynamicTrendColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Trend value"),
+  option: "trendColor",
+  context: "trendColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.trendColor),
   editorProps: {
-    min: 1
-  },
-  showEditor: function showEditor(_ref5) {
-    var options = _ref5.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
-  }
-}]];
-exports.TrellisBackgroundColorEditor = {
-  label: (0, i18n_1._)('Trellis background'),
-  option: 'trellisBackgroundColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref6) {
-    var options = _ref6.options;
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: trend value"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          trendValue: defaultContext2.trendColorConfig
+        }
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Trend value"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
   }
-};
-
-/***/ }),
-/* 30 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 31 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/FeatureFlagContext");
-
-/***/ }),
-/* 32 */,
-/* 33 */,
-/* 34 */,
-/* 35 */,
-/* 36 */,
-/* 37 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
 });
-exports.defaultContext = void 0;
-exports.defaultContext = {
-  trendColorConfig: [{
-    to: 0,
-    value: '#9E2520'
-  }, {
-    from: 0,
-    value: '#1C6B2D'
-  }],
-  majorColorConfig: [{
-    to: 20,
-    value: '#D41F1F'
-  }, {
-    from: 20,
-    to: 40,
-    value: '#D94E17'
-  }, {
-    from: 40,
-    to: 60,
-    value: '#CBA700'
-  }, {
-    from: 60,
-    to: 80,
-    value: '#669922'
-  }, {
-    from: 80,
-    value: '#118832'
-  }],
-  majorColorMatchConfig: [{
-    match: '',
-    value: '#5C33FF'
-  }]
-};
-
-/***/ }),
-/* 38 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorEditor", function() { return getDynamicMajorColorEditor; });
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
-
-var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-      defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
-    option: 'majorColor',
-    context: 'majorColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
-    },
-    editorProps: {
-      labelPosition: 'top',
-      flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: major value'),
-      formatters: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
-        value: 'rangeValue',
+// src/common/editorConfig/DynamicBackgroundColorEditor.js
+var getDynamicBackgroundColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  context: "backgroundColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.backgroundColor),
+  editorProps: {
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: background"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
         defaults: {
-          majorValue: defaultContext.majorColorConfig
+          majorValue: defaultContext2.majorColorConfig,
+          trendValue: defaultContext2.trendColorConfig
         }
-      }, {
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Matches'),
-        value: 'matchValue',
+      },
+      {
+        label: (0, i18n_exports._)("Matches"),
+        value: "matchValue",
         defaults: {
-          majorValue: defaultContext.majorColorMatchConfig
+          majorValue: defaultContext2.majorColorMatchConfig
         }
-      }],
-      dataSelectors: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
-        value: 'majorValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Major Value"),
+        value: "majorValue"
+      },
+      {
+        label: (0, i18n_exports._)("Trend"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
+  }
+});
+
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport8 = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport9 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// src/common/editorConfig/TrellisEditors.ts
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: () => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn;
+      }
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: ({ options }) => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+      }
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: ({ options }) => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+      }
     }
-  };
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: ({ options }) => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+      }
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: ({ options }) => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+      }
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: ({ options }) => {
+        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+        const isTrellisFeatureFlagOn = Boolean(
+          featureFlagContext && featureFlagContext.visualizations_enableTrellis
+        );
+        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+      }
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => {
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const isTrellisFeatureFlagOn = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+  }
 };
 
-/***/ }),
-/* 39 */,
-/* 40 */,
-/* 41 */,
-/* 42 */,
-/* 43 */,
-/* 44 */,
-/* 45 */,
-/* 46 */,
-/* 47 */,
-/* 48 */,
-/* 49 */,
-/* 50 */,
-/* 51 */,
-/* 52 */,
-/* 53 */,
-/* 54 */,
-/* 55 */,
-/* 56 */,
-/* 57 */,
-/* 58 */,
-/* 59 */,
-/* 60 */,
-/* 61 */,
-/* 62 */,
-/* 63 */,
-/* 64 */,
-/* 65 */,
-/* 66 */,
-/* 67 */,
-/* 68 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(1);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
 });
+var defaultImport10 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
-var i18n_1 = __webpack_require__(0);
-
-var visualization_schemas_1 = __webpack_require__(2);
-
-var PresetPalettes_1 = __webpack_require__(13);
-
-var pick_1 = __webpack_require__(8);
-
-var variables_1 = __webpack_require__(9);
-
-var configUtils_1 = __webpack_require__(4);
-
-var singleValueContext_1 = __webpack_require__(37);
-
-var StaticMajorAndTrendLayout_1 = __webpack_require__(26);
-
-var StaticBackgroundColorEditor_1 = __webpack_require__(22);
-
-var StaticIconColorEditor_1 = __webpack_require__(69);
-
-var StaticMajorColorEditor_1 = __webpack_require__(27);
-
-var StaticTrendColorEditor_1 = __webpack_require__(28);
-
-var DynamicMajorColorEditor_1 = __webpack_require__(38);
-
-var DynamicTrendColorEditor_1 = __webpack_require__(24);
-
-var DynamicBackgroundColorEditor_1 = __webpack_require__(25);
-
-var TrellisEditors_1 = __webpack_require__(29);
-
-var VizBehavior_1 = __webpack_require__(6);
-
-var configUtils_2 = __webpack_require__(3);
-
-var VizCategory_1 = __webpack_require__(7);
+// src/common/utils/configUtils.ts
+function enhanceConfig(vizConfig) {
+  const enhancedConfig = __spreadValues({}, vizConfig);
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
+    (config2) => {
+      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+    }
+  );
+  return enhancedConfig;
+}
+function hasCompatibleContexts(vizContext, presetContext) {
+  const presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(
+    (contextKey) => presetContext[contextKey] === void 0 && vizContext[contextKey] === void 0 || presetContext[contextKey] !== void 0 && vizContext[contextKey] !== void 0
+  );
+}
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  const presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(
+    (optionKey) => (0, configUtils_exports.isDynamicOption)(presetOptions[optionKey]) === (0, configUtils_exports.isDynamicOption)(vizOptions[optionKey])
+  );
+}
+function getInitialPreset(vizContext, vizOptions, presets2) {
+  return presets2.find((preset) => {
+    const presetContext = (0, lodash_exports.get)(preset, ["value", "context"], {});
+    const presetOptions = (0, lodash_exports.get)(preset, ["value", "options"], {});
+    const presetContextKeys = Object.keys(presetContext);
+    const presetOptionKeys = Object.keys(presetOptions);
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
 
+// src/SingleValueIcon/config.ts
 var dataContract = {
-  requiredDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
+  requiredDataSources: [
+    {
+      name: "primary",
+      description: "DataSource that powers the visualization"
+    }
+  ],
   optionalDataSources: [],
   initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
+    primary: { offset: 0, count: 1e4 }
   }
 };
 var size = {
@@ -918,361 +519,334 @@ var size = {
   initialHeight: 250
 };
 var basePresetContext = {
-  iconColorEditorConfig: undefined,
-  majorColorEditorConfig: undefined,
-  trendColorEditorConfig: undefined,
-  backgroundColorEditorConfig: undefined
+  iconColorEditorConfig: void 0,
+  majorColorEditorConfig: void 0,
+  trendColorEditorConfig: void 0,
+  backgroundColorEditorConfig: void 0
 };
 var basePresetOptions = {
-  iconColor: undefined,
-  majorColor: undefined,
-  trendColor: undefined,
-  backgroundColor: undefined
+  iconColor: void 0,
+  majorColor: void 0,
+  trendColor: void 0,
+  backgroundColor: void 0
 };
-var presets = [{
-  // dummy context variables to allow for resetting of unused context states
-  label: (0, i18n_1._)('None'),
-  name: 'singleValueIcon.none',
-  value: {
-    context: Object.assign({}, basePresetContext),
-    options: Object.assign({}, basePresetOptions)
-  }
-}, {
-  label: (0, i18n_1._)('Icon'),
-  name: 'singleValueIcon.icon',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      iconColorEditorConfig: singleValueContext_1.defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      iconColor: '> majorValue | rangeValue(iconColorEditorConfig)'
-    })
-  }
-}, {
-  label: (0, i18n_1._)('Major value'),
-  name: 'singleValueIcon.majorValue',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      majorColorEditorConfig: singleValueContext_1.defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)'
-    })
-  }
-}, {
-  label: (0, i18n_1._)('Trend value'),
-  name: 'singleValueIcon.trend',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      trendColorEditorConfig: singleValueContext_1.defaultContext.trendColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      trendColor: '> trendValue | rangeValue(trendColorEditorConfig)'
-    })
-  }
-}, {
-  label: (0, i18n_1._)('Icon and Major value'),
-  name: 'singleValueIcon.iconAndMajorValue',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      iconColorEditorConfig: singleValueContext_1.defaultContext.majorColorConfig,
-      majorColorEditorConfig: singleValueContext_1.defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      iconColor: '> majorValue | rangeValue(iconColorEditorConfig)',
-      majorColor: '> majorValue | rangeValue(majorColorEditorConfig)'
-    })
-  }
-}, {
-  label: (0, i18n_1._)('Background'),
-  name: 'singleValueIcon.background',
-  value: {
-    context: Object.assign(Object.assign({}, basePresetContext), {
-      backgroundColorEditorConfig: singleValueContext_1.defaultContext.majorColorConfig
-    }),
-    options: Object.assign(Object.assign({}, basePresetOptions), {
-      backgroundColor: '> majorValue | rangeValue(backgroundColorEditorConfig)'
-    })
-  }
-}];
-/**
- * TODO
- * common theme variables such as enterprise.defaultFontColor
- * that are repeated in multiple viz config themes should be DRYd up.
- */
-
-var themes = {
-  defaultFontColor: function defaultFontColor(props) {
-    return (0, pick_1.default)({
-      enterprise: {
-        dark: variables_1.default.textColor(props),
-        light: variables_1.default.gray20(props)
-      },
-      prisma: variables_1.default.contentColorActive(props)
-    })(props);
-  },
-  defaultBlockFontColor: function defaultBlockFontColor(props) {
-    return (0, pick_1.default)({
-      enterprise: variables_1.default.white(props),
-      prisma: variables_1.default.contentColorActive(props)
-    })(props);
-  }
-};
-var editorConfig = [{
-  label: (0, i18n_1._)('Data configurations'),
-  layout: [[{
-    label: (0, i18n_1._)('Value'),
-    editor: 'editor.columnSelector',
-    option: 'majorValue',
-    context: 'valuesContext',
-    editorProps: {
-      dataSourceKey: 'primary',
-      prepareValue: function prepareValue(definition) {
-        var baseSPL = definition.options.majorValue;
-        return {
-          context: {},
-          options: {
-            majorValue: "".concat(baseSPL, " | lastPoint()"),
-            trendValue: "".concat(baseSPL, " | delta(-2)")
-          }
-        };
-      }
-    },
-    isDisabled: function isDisabled(_ref) {
-      var options = _ref.options;
-      return options.splitByLayout === visualization_schemas_1.LAYOUT_TYPE.Trellis;
-    }
-  }]]
-}, {
-  label: (0, i18n_1._)('Data display'),
-  layout: [[{
-    label: (0, i18n_1._)('Show major and trend value'),
-    option: 'showValue',
-    editor: 'editor.toggle'
-  }]].concat(_toConsumableArray(StaticMajorAndTrendLayout_1.default), [[{
-    label: (0, i18n_1._)('Trend display'),
-    option: 'trendDisplay',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Percent'),
-        value: 'percent'
-      }, {
-        label: (0, i18n_1._)('Absolute'),
-        value: 'absolute'
-      }, {
-        label: (0, i18n_1._)('Off'),
-        value: 'off'
-      }]
-    },
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return options.showValue || options.showValue === undefined;
+var presets = [
+  {
+    // dummy context variables to allow for resetting of unused context states
+    label: (0, i18n_exports._)("None"),
+    name: "singleValueIcon.none",
+    value: {
+      context: __spreadValues({}, basePresetContext),
+      options: __spreadValues({}, basePresetOptions)
     }
-  }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
-}, {
-  label: (0, i18n_1._)('Color and style'),
-  layout: [[{
-    label: (0, i18n_1._)('Dynamic elements'),
-    key: 'presetSelector',
-    editor: 'editor.presetSelector',
-    editorProps: {
-      presets: presets,
-      value: function value(_ref3) {
-        var context = _ref3.context,
-            options = _ref3.options;
-        var initialPreset = (0, configUtils_2.getInitialPreset)(context, options, presets);
-        return initialPreset && initialPreset.label || null;
-      }
-    }
-  }], StaticIconColorEditor_1.default, [{
-    label: (0, i18n_1._)('Icon'),
-    option: 'iconColor',
-    context: 'iconColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
-      return (0, configUtils_1.isDynamicOption)(options.iconColor);
-    },
-    editorProps: {
-      labelPosition: 'top',
-      flyoutTitle: 'Dynamic coloring: icon',
-      formatters: [{
-        label: (0, i18n_1._)('Ranges'),
-        value: 'rangeValue',
-        defaults: {
-          trendValue: singleValueContext_1.defaultContext.trendColorConfig,
-          majorValue: singleValueContext_1.defaultContext.majorColorConfig
-        }
-      }, {
-        label: (0, i18n_1._)('Matches'),
-        value: 'matchValue',
-        defaults: {
-          majorValue: singleValueContext_1.defaultContext.majorColorMatchConfig
-        }
-      }],
-      dataSelectors: [{
-        label: (0, i18n_1._)('Major value'),
-        value: 'majorValue'
-      }, {
-        label: (0, i18n_1._)('Trend'),
-        value: 'trendValue'
-      }],
-      defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-    }
-  }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
-    editorProps: {
-      themes: themes
-    }
-  })], [(0, DynamicMajorColorEditor_1.getDynamicMajorColorEditor)({
-    defaultContext: singleValueContext_1.defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
-    editorProps: {
-      themes: themes
+  },
+  {
+    label: (0, i18n_exports._)("Icon"),
+    name: "singleValueIcon.icon",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        iconColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)"
+      })
     }
-  })], [(0, DynamicTrendColorEditor_1.getDynamicTrendColorEditor)({
-    defaultContext: singleValueContext_1.defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
-    editorProps: {
-      themes: themes
+  },
+  {
+    label: (0, i18n_exports._)("Major value"),
+    name: "singleValueIcon.majorValue",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        majorColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
+      })
     }
-  })], [Object.assign(Object.assign({}, TrellisEditors_1.TrellisBackgroundColorEditor), {
-    editorProps: {
-      themes: themes
+  },
+  {
+    label: (0, i18n_exports._)("Trend value"),
+    name: "singleValueIcon.trend",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        trendColorEditorConfig: defaultContext.trendColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
+      })
     }
-  })], [(0, DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor)({
-    defaultContext: singleValueContext_1.defaultContext,
-    defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], [{
-    label: (0, i18n_1._)('Major value size (px)'),
-    option: 'majorFontSize',
-    editor: 'editor.number',
-    editorProps: {
-      min: 1
-    },
-    placeholder: (0, i18n_1._)('Auto'),
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
-      return options.showValue || options.showValue === undefined;
+  },
+  {
+    label: (0, i18n_exports._)("Icon and Major value"),
+    name: "singleValueIcon.iconAndMajorValue",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        iconColorEditorConfig: defaultContext.majorColorConfig,
+        majorColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)",
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
+      })
     }
-  }, {
-    label: (0, i18n_1._)('Trend value size (px)'),
-    option: 'trendFontSize',
-    editor: 'editor.number',
-    editorProps: {
-      min: 1
-    },
-    placeholder: (0, i18n_1._)('Auto'),
-    showEditor: function showEditor(_ref6) {
-      var options = _ref6.options;
-      return options.showValue || options.showValue === undefined;
-    },
-    isDisabled: function isDisabled(_ref7) {
-      var options = _ref7.options;
-      return options.trendDisplay === 'off';
+  },
+  {
+    label: (0, i18n_exports._)("Background"),
+    name: "singleValueIcon.background",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        backgroundColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        backgroundColor: "> majorValue | rangeValue(backgroundColorEditorConfig)"
+      })
     }
-  }], [{
-    label: (0, i18n_1._)('Major value abbreviation'),
-    option: 'shouldAbbreviateMajorValue',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Trend value abbreviation'),
-    option: 'shouldAbbreviateTrendValue',
-    editor: 'editor.checkbox'
-  }], [{
-    label: (0, i18n_1._)('Alignment'),
-    editor: 'editor.radioBar',
-    option: 'align',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Left'),
-        value: 'left'
-      }, {
-        label: (0, i18n_1._)('Center'),
-        value: 'center'
-      }, {
-        label: (0, i18n_1._)('Right'),
-        value: 'right'
-      }]
+  }
+];
+var themes = {
+  defaultFontColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.gray20(props)
     },
-    showEditor: function showEditor(_ref8) {
-      var options = _ref8.options;
-      return options.showValue || options.showValue === undefined;
-    }
-  }]]
-}];
-/**
- * visualization configuration
- */
-
+    prisma: variables_default.contentColorActive(props)
+  })(props),
+  defaultBlockFontColor: (props) => pick_default({
+    enterprise: variables_default.white(props),
+    prisma: variables_default.contentColorActive(props)
+  })(props)
+};
+var editorConfig = [
+  {
+    label: (0, i18n_exports._)("Data configurations"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Value"),
+          editor: "editor.columnSelector",
+          option: "majorValue",
+          context: "valuesContext",
+          editorProps: {
+            dataSourceKey: "primary",
+            prepareValue: (definition) => {
+              const {
+                options: { majorValue: baseSPL }
+              } = definition;
+              return {
+                context: {},
+                options: {
+                  majorValue: `${baseSPL} | lastPoint()`,
+                  trendValue: `${baseSPL} | delta(-2)`
+                }
+              };
+            }
+          },
+          isDisabled: ({ options }) => options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis
+        }
+      ]
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Data display"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Show major and trend value"),
+          option: "showValue",
+          editor: "editor.toggle"
+        }
+      ],
+      ...StaticMajorAndTrendLayout_default,
+      [
+        {
+          label: (0, i18n_exports._)("Trend display"),
+          option: "trendDisplay",
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Percent"), value: "percent" },
+              { label: (0, i18n_exports._)("Absolute"), value: "absolute" },
+              { label: (0, i18n_exports._)("Off"), value: "off" }
+            ]
+          },
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        }
+      ],
+      ...TrellisEditorConfig
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Color and style"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Dynamic elements"),
+          key: "presetSelector",
+          editor: "editor.presetSelector",
+          editorProps: {
+            presets,
+            value: ({ context, options }) => {
+              const initialPreset = getInitialPreset(context, options, presets);
+              return initialPreset && initialPreset.label || null;
+            }
+          }
+        }
+      ],
+      StaticIconColorEditor_default,
+      [
+        {
+          label: (0, i18n_exports._)("Icon"),
+          option: "iconColor",
+          context: "iconColorEditorConfig",
+          editor: "editor.dynamicColor",
+          showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.iconColor),
+          editorProps: {
+            labelPosition: "top",
+            flyoutTitle: "Dynamic coloring: icon",
+            formatters: [
+              {
+                label: (0, i18n_exports._)("Ranges"),
+                value: "rangeValue",
+                defaults: {
+                  trendValue: defaultContext.trendColorConfig,
+                  majorValue: defaultContext.majorColorConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Matches"),
+                value: "matchValue",
+                defaults: {
+                  majorValue: defaultContext.majorColorMatchConfig
+                }
+              }
+            ],
+            dataSelectors: [
+              {
+                label: (0, i18n_exports._)("Major value"),
+                value: "majorValue"
+              },
+              {
+                label: (0, i18n_exports._)("Trend"),
+                value: "trendValue"
+              }
+            ],
+            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+          }
+        }
+      ],
+      [
+        __spreadProps(__spreadValues({}, StaticMajorColorEditor_default), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [getDynamicMajorColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        __spreadProps(__spreadValues({}, StaticTrendColorEditor_default), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [getDynamicTrendColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        __spreadProps(__spreadValues({}, StaticBackgroundColorEditor_default), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [
+        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [getDynamicBackgroundColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        {
+          label: (0, i18n_exports._)("Major value size (px)"),
+          option: "majorFontSize",
+          editor: "editor.number",
+          editorProps: {
+            min: 1
+          },
+          placeholder: (0, i18n_exports._)("Auto"),
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        },
+        {
+          label: (0, i18n_exports._)("Trend value size (px)"),
+          option: "trendFontSize",
+          editor: "editor.number",
+          editorProps: {
+            min: 1
+          },
+          placeholder: (0, i18n_exports._)("Auto"),
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0,
+          isDisabled: ({ options }) => options.trendDisplay === "off"
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Major value abbreviation"),
+          option: "shouldAbbreviateMajorValue",
+          editor: "editor.checkbox"
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Trend value abbreviation"),
+          option: "shouldAbbreviateTrendValue",
+          editor: "editor.checkbox"
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Alignment"),
+          editor: "editor.radioBar",
+          option: "align",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Left"), value: "left" },
+              { label: (0, i18n_exports._)("Center"), value: "center" },
+              { label: (0, i18n_exports._)("Right"), value: "right" }
+            ]
+          },
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        }
+      ]
+    ]
+  }
+];
 var config = {
   /**
    * unique viz key
    */
-  key: 'splunk.singlevalueicon',
-
+  key: "splunk.singlevalueicon",
   /**
    * viz name
    */
-  name: (0, i18n_1._)('Single value icon'),
-  category: VizCategory_1.VizCategory.SINGLE_VALUE,
-
+  name: (0, i18n_exports._)("Single value icon"),
+  category: "Single Value" /* SINGLE_VALUE */,
   /**
    * viz icon
    */
   icon: null,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: singleValueContext_1.defaultContext,
-  optionsSchema: visualization_schemas_1.singleValueIconOptionsSchema,
-  editorConfig: editorConfig,
+  dataContract,
+  size,
+  defaultContext,
+  optionsSchema: visualization_schemas_exports.singleValueIconOptionsSchema,
+  editorConfig,
   events: {
-    'value.click': {
-      description: 'trigger when user clicks major value or icon',
-      payloadKeys: ['majorValue', 'trendValue', 'icon']
+    "value.click": {
+      description: "trigger when user clicks major value or icon",
+      payloadKeys: ["majorValue", "trendValue", "icon"]
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.TRELLIS],
-  themes: themes
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */, "trellis" /* TRELLIS */],
+  themes
 };
-exports.default = (0, configUtils_2.enhanceConfig)(config);
-
-/***/ }),
-/* 69 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var StaticIconColorEditor = [{
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__["_"])('Icon'),
-  option: 'iconColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__["isDynamicOption"])(options.iconColor);
-  },
-  editorProps: {
-    labelPosition: 'top',
-    value: null,
-    palette: [null].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__["COLOR_EDITOR_PALETTE"]))
-  }
-}];
-/* harmony default export */ __webpack_exports__["default"] = (StaticIconColorEditor);
-
-/***/ })
-/******/ ]);
-//# sourceMappingURL=SingleValueIcon.config.js.map
+var config_default = enhanceConfig(config);
+//# sourceMappingURL=SingleValueIcon.config.js.map