@splunk/visualizations 25.1.0 → 25.3.0

package/Markdown.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 210);
+/******/ 	return __webpack_require__(__webpack_require__.s = 400);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,39 +95,53 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+
+/***/ 109:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Markdown");
+
+/***/ }),
+
+/***/ 11:
+/***/ (function(module, exports) {
+
 module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 106:
+/***/ 114:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paragraph");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 12:
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -137,15 +151,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+var SizeAwareWrapper_1 = __webpack_require__(20);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(15);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -202,7 +216,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.1.0 - 812a9a4d8",
+      "data-splunk-visualization-version": "25.3.0 - dae70ec02",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -224,7 +238,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 13:
+/***/ 14:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -257,50 +271,52 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 133:
+/***/ 143:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(81);
+var _taggedTemplateLiteral = __webpack_require__(86);
 
 var _templateObject;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = void 0;
+exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = exports.FONT_SIZES = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var React = __webpack_require__(1);
+var types_1 = __webpack_require__(81);
+
+var React = __webpack_require__(0);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(15);
 
-var Markdown_1 = __webpack_require__(211);
+var Markdown_1 = __webpack_require__(109);
 
 var styled_components_1 = __webpack_require__(4);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var themes_1 = __webpack_require__(69);
 
-var Heading_1 = __webpack_require__(212);
+var Heading_1 = __webpack_require__(401);
 
-var Paragraph_1 = __webpack_require__(106);
+var Paragraph_1 = __webpack_require__(114);
 
-var List_1 = __webpack_require__(213);
+var List_1 = __webpack_require__(402);
 
-var Code_1 = __webpack_require__(214);
+var Code_1 = __webpack_require__(403);
 
-var withDashboardViz_1 = __webpack_require__(31);
+var withDashboardViz_1 = __webpack_require__(32);
 
-var config_1 = __webpack_require__(215);
+var config_1 = __webpack_require__(404);
 
 exports.config = config_1.default; // map of valid font sizes with elements' respective pixel sizes
 
-var FONT_SIZES = {
+exports.FONT_SIZES = {
   extraSmall: {
     h1: 18,
     h2: 14,
@@ -355,7 +371,7 @@ var MarkdownContainer = styled_components_1.default.div.withConfig({
 var CodeBlockContainer = styled_components_1.default.div.withConfig({
   displayName: "Markdown__CodeBlockContainer",
   componentId: "zd3qkg-1"
-})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;}"], themes_1.pick({
+})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;line-height:", "px !important;}"], themes_1.pick({
   enterprise: themes_1.variables.spacingHalf,
   prisma: styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["10px ", ""])), themes_1.variables.spacingLarge)
 }), themes_1.pick({
@@ -369,6 +385,8 @@ var CodeBlockContainer = styled_components_1.default.div.withConfig({
   prisma: themes_1.variables.backgroundColorSection
 }), function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.fontSize;
 });
 var CodeInlineContainer = styled_components_1.default.code.withConfig({
   displayName: "Markdown__CodeInlineContainer",
@@ -385,30 +403,44 @@ var CodeInlineContainer = styled_components_1.default.code.withConfig({
 var getFontMap = function getFontMap(fontSize) {
   var font = fontSize;
 
-  if (!FONT_SIZES[fontSize]) {
+  if (!exports.FONT_SIZES[fontSize] && fontSize !== 'custom') {
     console.error("'".concat(fontSize, "' is not a valid value for Markdown's fontSize option. Using the 'default' font size."));
     font = 'default';
   }
 
-  return FONT_SIZES[font];
+  return exports.FONT_SIZES[font];
 };
 
 exports.getFontMap = getFontMap;
 
 var handleLinkClick = function handleLinkClick(e) {
   return e.stopPropagation();
-}; // returns renderers customized with the appropriate font sizes given the provided `fontSize` value.
+};
 
+var StyledA = styled_components_1.default.a.withConfig({
+  displayName: "Markdown__StyledA",
+  componentId: "zd3qkg-3"
+})(["text-decoration:underlined;"]); // returns renderers customized with the appropriate font sizes given the provided `fontSize` value.
 
-var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
+var getMarkdownRenderer = function getMarkdownRenderer(fontSize, customFontSize) {
+  // defaults to customFontSize of 14px if value is invalid
+  var cleanedCustomFontSize = types_1.isNumber(customFontSize) ? customFontSize : 14;
+  var isCustomFontSize = fontSize === 'custom';
   /* eslint-disable react/display-name, react/prop-types */
-  var fontMap = getFontMap(fontSize);
+
+  var fontMap = isCustomFontSize ? {
+    h1: cleanedCustomFontSize * 2.0,
+    h2: cleanedCustomFontSize * 1.5,
+    h3: cleanedCustomFontSize * 1.25,
+    p: cleanedCustomFontSize
+  } : getFontMap(fontSize);
   return {
     paragraphRenderer: function paragraphRenderer(_ref2) {
       var children = _ref2.children;
       return React.createElement(Paragraph_1.default, {
         style: {
-          fontSize: fontMap.p
+          fontSize: fontMap.p,
+          lineHeight: "".concat(fontMap.p, "px")
         }
       }, children);
     },
@@ -428,7 +460,8 @@ var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
           nodeKey = _ref4.nodeKey;
       return React.createElement(List_1.default.Item, {
         style: {
-          fontSize: fontMap.p
+          fontSize: fontMap.p,
+          lineHeight: "".concat(fontMap.p, "px")
         },
         key: nodeKey
       }, children);
@@ -456,10 +489,6 @@ var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
     linkRenderer: function linkRenderer(_ref7) {
       var href = _ref7.href,
           children = _ref7.children;
-      var StyledA = styled_components_1.default.a.withConfig({
-        displayName: "Markdown__StyledA",
-        componentId: "zd3qkg-3"
-      })(["text-decoration:underlined;"]);
       return React.createElement(StyledA, {
         href: href,
         onClick: handleLinkClick
@@ -475,6 +504,7 @@ var MarkdownVisualization = function MarkdownVisualization(_ref8) {
       backgroundColor = _ref8.backgroundColor,
       fontColor = _ref8.fontColor,
       fontSize = _ref8.fontSize,
+      customFontSize = _ref8.customFontSize,
       hasEventHandlers = _ref8.hasEventHandlers,
       onMarkdownClick = _ref8.onMarkdownClick;
 
@@ -482,7 +512,7 @@ var MarkdownVisualization = function MarkdownVisualization(_ref8) {
 
 
   var stringifiedMarkdown = "".concat(markdown);
-  var renderersForFontSize = getMarkdownRenderer(fontSize);
+  var renderersForFontSize = getMarkdownRenderer(fontSize, customFontSize);
   return React.createElement(MarkdownContainer, {
     "data-testid": "markdown-container",
     padding: [5, 5, 5, 5],
@@ -509,6 +539,7 @@ var propTypes = {
   backgroundColor: T.string,
   fontColor: T.string,
   fontSize: T.string,
+  customFontSize: T.number,
   hasEventHandlers: T.bool,
   onMarkdownClick: T.func
 };
@@ -519,6 +550,7 @@ var defaultProps = {
   backgroundColor: 'transparent',
   fontColor: 'rgba(255, 255, 255, 0.7)',
   fontSize: 'default',
+  customFontSize: 14,
   hasEventHandlers: false,
   onMarkdownClick: function onMarkdownClick() {}
 };
@@ -541,29 +573,29 @@ exports.default = Markdown;
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
+var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(6);
+var _defineProperty = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -585,9 +617,9 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(15);
+var schemaUtils_1 = __webpack_require__(16);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
 var dynamicOptionsDSLType = {
   type: 'string',
@@ -663,7 +695,7 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  */
 
 function enhanceConfig(vizConfig) {
-  var enhancedConfig = vizConfig;
+  var enhancedConfig = Object.assign({}, vizConfig);
 
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
@@ -671,7 +703,7 @@ function enhanceConfig(vizConfig) {
 
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
-      open: false
+      open: config.open || false
     });
   });
   return enhancedConfig;
@@ -686,7 +718,7 @@ exports.enhanceConfig = enhanceConfig;
  */
 
 function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = vizConfig;
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: true
@@ -792,488 +824,255 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 18:
+/***/ 19:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 19:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 20:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 2:
+/***/ 23:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 210:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 25:
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
+/***/ }),
 
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
+/***/ 26:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+
+/***/ }),
+
+/***/ 27:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
 
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.shouldShowIconPlaceholder = void 0;
 
-__exportStar(__webpack_require__(133), exports);
+var React = __webpack_require__(0);
 
-var Markdown_1 = __webpack_require__(133);
+var T = __webpack_require__(1);
 
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Markdown_1.default;
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(10);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
   }
-});
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
 
-/***/ 211:
-/***/ (function(module, exports) {
+/***/ 28:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/react-ui/Markdown");
+"use strict";
 
-/***/ }),
 
-/***/ 212:
-/***/ (function(module, exports) {
+var _defineProperty = __webpack_require__(7);
 
-module.exports = require("@splunk/react-ui/Heading");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-/***/ }),
+var T = __webpack_require__(1);
 
-/***/ 213:
-/***/ (function(module, exports) {
+var lodash_1 = __webpack_require__(3);
 
-module.exports = require("@splunk/react-ui/List");
+var DataSource_1 = __webpack_require__(39);
 
-/***/ }),
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
+});
 
-/***/ 214:
-/***/ (function(module, exports) {
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
 
-module.exports = require("@splunk/react-ui/Code");
+  if (lodash_1.isFunction(onRequestParamsChange)) {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
+
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
+
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
+
+exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 215:
+/***/ 29:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(7);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var themes_1 = __webpack_require__(69);
+var T = __webpack_require__(1);
 
-var i18n_1 = __webpack_require__(2);
+var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(15);
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
 
-var VizBehavior_1 = __webpack_require__(5);
+var getPaginationParams = function getPaginationParams(_ref) {
+  var requestParams = _ref.requestParams,
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var totalCount = meta && meta.totalCount || 0;
+  var offset = requestParams && requestParams.offset || 0;
+  var count = requestParams && requestParams.count;
+  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
+  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
 
-var VizCategory_1 = __webpack_require__(30);
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = lodash_1.cloneDeep(requestParams);
 
-var configUtils_1 = __webpack_require__(16);
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
 
-var BackgroundColor_1 = __webpack_require__(49);
-
-var dataContract = {
-  requiredDataSources: [],
-  optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
-    // {
-    //     name: 'annotation',
-    //     description: 'DataSource that populate event annotations',
-    // },
-  ],
-  initialRequestParams: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
-  }
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
-};
-var defaultContext = {};
-var optionsSchema = {
-  backgroundColor: {
-    description: 'Specify the background color using a Hex code such as "#FF0000".',
-    type: 'string',
-    default: 'transparent',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-  },
-  fontColor: {
-    description: 'Specify the text color using Hex codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)". The default for enterprise light is "#3c444d". The default for enterprise dark is "#FFFFFF". The default for prisma dark is "rgba(255, 255, 255, 0.7)".',
-    type: 'string',
-    default: '> themes.defaultFontColor',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-  },
-  fontSize: {
-    description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
-    type: 'string',
-    default: 'default',
-    pattern: schemaUtils_1.getPattern(['extraSmall', 'small', 'default', 'large', 'extraLarge'])
-  },
-  markdown: {
-    description: 'Add text using basic markdown syntax.',
-    type: 'string'
-  }
-};
-var themes = {
-  defaultFontColor: function defaultFontColor(props) {
-    return themes_1.pick({
-      enterprise: {
-        dark: themes_1.variables.textColor(props),
-        light: themes_1.variables.textColor(props)
-      },
-      prisma: themes_1.variables.contentColorDefault(props)
-    })(props);
-  }
-};
-var editorConfig = [{
-  label: i18n_1._('Markdown Settings'),
-  layout: [[{
-    label: '',
-    option: 'markdown',
-    editor: 'editor.markdown'
-  }]]
-}, {
-  label: i18n_1._('General'),
-  layout: [[{
-    label: i18n_1._('Font Color'),
-    option: 'fontColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: 'top',
-      themes: themes
-    }
-  }].concat(_toConsumableArray(BackgroundColor_1.default({
-    label: 'Background Color',
-    themes: themes
-  }))), [{
-    label: i18n_1._('Font Size'),
-    option: 'fontSize',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Extra Small'),
-        value: 'extraSmall'
-      }, {
-        label: i18n_1._('Small'),
-        value: 'small'
-      }, {
-        label: i18n_1._('Default'),
-        value: 'default'
-      }, {
-        label: i18n_1._('Large'),
-        value: 'large'
-      }, {
-        label: i18n_1._('Extra Large'),
-        value: 'extraLarge'
-      }]
-    }
-  }]]
-}];
-/**
- * visualization configuration
- */
-
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.markdown',
-
-  /**
-   * viz name
-   */
-  name: 'Markdown',
-  category: VizCategory_1.VizCategory.COMPARISONS,
-
-  /**
-   * viz icon
-   */
-  icon: null,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  events: {
-    'markdown.click': {
-      description: 'triggered when user clicks on markdown area not formatted as a link'
-    }
-  },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
-  themes: themes
-};
-exports.default = configUtils_1.enhanceConfig(config);
-
-/***/ }),
-
-/***/ 22:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/TimezoneContext");
-
-/***/ }),
-
-/***/ 24:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/hocUtils");
-
-/***/ }),
-
-/***/ 25:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
-
-/***/ }),
-
-/***/ 27:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-var i18n_1 = __webpack_require__(2);
-
-var Message_1 = __webpack_require__(9);
-
-var FixedSizeContainer_1 = __webpack_require__(12);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
-
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
-
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
-
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
-
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
-  }
-
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
-  });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 28:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _defineProperty = __webpack_require__(6);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-var DataSource_1 = __webpack_require__(38);
-
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
-
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
-  };
-  var onSort;
-
-  if (lodash_1.isFunction(onRequestParamsChange)) {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
-      currentSortKey = Object.keys(requestParams.sort).shift();
-      currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
-
-
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
-
-      if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
-  }
-
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
-};
-
-exports.getSortingParams = getSortingParams;
-
-/***/ }),
-
-/***/ 29:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-exports.PaginatorParamsPropTypes = T.shape({
-  isPaging: T.bool,
-  current: T.number,
-  totalPages: T.number,
-  onChange: T.func
-});
-
-var getPaginationParams = function getPaginationParams(_ref) {
-  var requestParams = _ref.requestParams,
-      meta = _ref.meta,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var totalCount = meta && meta.totalCount || 0;
-  var offset = requestParams && requestParams.offset || 0;
-  var count = requestParams && requestParams.count;
-  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
-  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
-
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var page = _ref2.page,
-        countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
-
-    if (typeof countArg === 'number') {
-      newParams.count = countArg;
-      newParams.offset = 0;
-    }
-
-    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
 
     if (typeof page === 'number' && page > 0) {
       newParams.count = pageCount;
@@ -1302,7 +1101,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 30:
+/***/ 31:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1331,7 +1130,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1341,41 +1140,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(32);
+var getSettingsFromThemedProps_1 = __webpack_require__(33);
 
-var Options_1 = __webpack_require__(33);
+var Options_1 = __webpack_require__(34);
 
-var SanitizeProps_1 = __webpack_require__(34);
+var SanitizeProps_1 = __webpack_require__(35);
 
-var TimezoneContext_1 = __webpack_require__(22);
+var TimezoneContext_1 = __webpack_require__(23);
 
-var moment_1 = __webpack_require__(35);
+var moment_1 = __webpack_require__(36);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(24);
+var hocUtils_1 = __webpack_require__(25);
 
-var JSONSchemaUtils_1 = __webpack_require__(25);
+var JSONSchemaUtils_1 = __webpack_require__(26);
 
-var SplunkVisualization_1 = __webpack_require__(36);
+var SplunkVisualization_1 = __webpack_require__(37);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
 var getSorting_1 = __webpack_require__(28);
 
 var getPagination_1 = __webpack_require__(29);
 
-var useDeepMemo_1 = __webpack_require__(39);
+var useDeepMemo_1 = __webpack_require__(40);
 
-var MissingPropsMessage_1 = __webpack_require__(40);
+var MissingPropsMessage_1 = __webpack_require__(41);
 
-var withEditModeCover_1 = __webpack_require__(41);
+var withEditModeCover_1 = __webpack_require__(42);
 
-var withPlaceholder_1 = __webpack_require__(42);
+var withPlaceholder_1 = __webpack_require__(43);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -1577,41 +1376,41 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(11);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1619,11 +1418,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(37); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(38); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1757,15 +1556,15 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(18);
+var _createClass = __webpack_require__(19);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1795,7 +1594,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1809,7 +1608,14 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1820,7 +1626,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1855,14 +1661,255 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 4:
+/***/ 400:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  Object.defineProperty(o, k2, {
+    enumerable: true,
+    get: function get() {
+      return m[k];
+    }
+  });
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+__exportStar(__webpack_require__(143), exports);
+
+var Markdown_1 = __webpack_require__(143);
+
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Markdown_1.default;
+  }
+});
+
+/***/ }),
+
+/***/ 401:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
 
-/***/ 40:
+/***/ 402:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/List");
+
+/***/ }),
+
+/***/ 403:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Code");
+
+/***/ }),
+
+/***/ 404:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var themes_1 = __webpack_require__(69);
+
+var i18n_1 = __webpack_require__(2);
+
+var schemaUtils_1 = __webpack_require__(16);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var VizCategory_1 = __webpack_require__(31);
+
+var configUtils_1 = __webpack_require__(17);
+
+var BackgroundColor_1 = __webpack_require__(50);
+
+var FONT_OPTIONS = new Set(['extraSmall', 'small', 'default', 'large', 'extraLarge']);
+var dataContract = {
+  requiredDataSources: [],
+  optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
+    // {
+    //     name: 'annotation',
+    //     description: 'DataSource that populate event annotations',
+    // },
+  ],
+  initialRequestParams: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
+};
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {};
+var optionsSchema = {
+  backgroundColor: {
+    description: 'Specify the background color using a Hex code such as "#FF0000".',
+    type: 'string',
+    default: 'transparent',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+  },
+  customFontSize: {
+    description: 'Specify the font size (in pixels) you would like to use for unformatted text when `fontSize` is set to `custom`. Header elements are calculated with the following formula: h1 = 2 × `customFontSize`, h2 = 1.5 × `customFontSize`, h3 = 1.25 × `customFontSize`',
+    default: 14,
+    type: 'number'
+  },
+  fontColor: {
+    description: 'Specify the text color using Hex codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)". The default for enterprise light is "#3c444d". The default for enterprise dark is "#FFFFFF". The default for prisma dark is "rgba(255, 255, 255, 0.7)".',
+    type: 'string',
+    default: '> themes.defaultFontColor',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+  },
+  fontSize: {
+    description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
+    type: 'string',
+    default: 'default',
+    pattern: schemaUtils_1.getPattern(['extraSmall', 'small', 'default', 'large', 'extraLarge', 'custom'])
+  },
+  markdown: {
+    description: 'Add text using basic markdown syntax.',
+    type: 'string'
+  }
+};
+var themes = {
+  defaultFontColor: function defaultFontColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.textColor(props),
+        light: themes_1.variables.textColor(props)
+      },
+      prisma: themes_1.variables.contentColorDefault(props)
+    })(props);
+  }
+};
+var editorConfig = [{
+  label: i18n_1._('Markdown Settings'),
+  open: true,
+  layout: [[{
+    label: '',
+    option: 'markdown',
+    editor: 'editor.markdown'
+  }]]
+}, {
+  label: i18n_1._('General'),
+  layout: [[{
+    label: i18n_1._('Font Color'),
+    option: 'fontColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: 'top',
+      themes: themes
+    }
+  }].concat(_toConsumableArray(BackgroundColor_1.default({
+    label: 'Background Color',
+    themes: themes
+  }))), [{
+    label: i18n_1._('Font Size'),
+    option: 'fontSize',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Extra Small'),
+        value: 'extraSmall'
+      }, {
+        label: i18n_1._('Small'),
+        value: 'small'
+      }, {
+        label: i18n_1._('Default'),
+        value: 'default'
+      }, {
+        label: i18n_1._('Large'),
+        value: 'large'
+      }, {
+        label: i18n_1._('Extra Large'),
+        value: 'extraLarge'
+      }, {
+        label: i18n_1._('Custom'),
+        value: 'custom'
+      }]
+    }
+  }, {
+    label: i18n_1._('Custom Font Size (px)'),
+    option: 'customFontSize',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0,
+      labelPosition: 'top'
+    },
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return options.fontSize && !FONT_OPTIONS.has(options.fontSize);
+    }
+  }]]
+}];
+/**
+ * visualization configuration
+ */
+
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.markdown',
+
+  /**
+   * viz name
+   */
+  name: 'Markdown',
+  category: VizCategory_1.VizCategory.COMPARISONS,
+
+  /**
+   * viz icon
+   */
+  icon: null,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  events: {
+    'markdown.click': {
+      description: 'triggered when user clicks on markdown area not formatted as a link'
+    }
+  },
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
+  themes: themes
+};
+exports.default = configUtils_1.enhanceConfig(config);
+
+/***/ }),
+
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1873,15 +1920,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(9);
+var Message_1 = __webpack_require__(10);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
+var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
@@ -1943,7 +1990,7 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1953,18 +2000,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(13);
+var hocUtils_1 = __webpack_require__(14);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.1.0 - 812a9a4d8"
+  'data-splunk-visualization-version': "25.3.0 - dae70ec02"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1996,7 +2043,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2006,17 +2053,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
-var variables_1 = __webpack_require__(8);
+var variables_1 = __webpack_require__(9);
 
 var IconPlaceholder_1 = __webpack_require__(27);
 
-var VizBehavior_1 = __webpack_require__(5);
+var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(13);
+var hocUtils_1 = __webpack_require__(14);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -2061,7 +2108,7 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2092,7 +2139,7 @@ exports.default = background;
 
 /***/ }),
 
-/***/ 5:
+/***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2130,35 +2177,35 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 6:
+/***/ 69:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@splunk/themes");
 
 /***/ }),
 
-/***/ 69:
+/***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 7:
+/***/ 8:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 8:
+/***/ 81:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
-/***/ 81:
+/***/ 86:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
@@ -2168,7 +2215,7 @@ module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@splunk/themes/variables");
 
 /***/ })