@infinilabs/discover 0.0.2 → 0.0.4

package/dist/{search_bar-CP6HzakZ.js → search_bar-Cc0AiLC6.js}

@@ -1,44 +1,24 @@
-import { o as __toESM } from "./chunk-CIp4IH9D.js";
-import { n as require_jsx_runtime, t as require_lodash } from "./lodash-D-qGlPRW.js";
-import { m as withKibana, p as useKibana, t as getIndexPatterns } from "./services-9wPHk1eh.js";
-import { c as FilterLabel } from "./public-BC9tZcui.js";
-import { t as require_classnames } from "./classnames-eUba3oot.js";
-import "./common-BlOHZJzI.js";
-import "./lib-C9j_E-l0.js";
-import { t as createLucideIcon } from "./createLucideIcon-BO6TDGE7.js";
-import { t as QueryBarTopRow } from "./query_bar_top_row-63VciJSV.js";
-import { a as init_ResizeObserver_es, o as ListFilter, r as ResizeObserver_es_default, t as Ft } from "./dist-DCz_Qv0B.js";
-import { $ as toggleFilterDisabled, Ct as moment_default, E as require_target, J as buildEmptyFilter, N as isFilterable, Q as pinFilter, St as init_moment, W as cleanFilter, X as enableFilter, Y as disableFilter, Z as isFilterPinned, et as toggleFilterNegated, f as Ipv4Address, it as getFilterParams, mt as getIndexPatternFromFilter, nt as unpinFilter, pt as getDisplayValueFromFilter, tt as toggleFilterPinned, vt as buildCustomFilter, yt as buildFilter } from "./common-Tr1I-HCs.js";
-import { t as FILTER_OPERATORS } from "./filter_operators-C-TaTcNc.js";
-import "./query_string_input-GJtRxVUU.js";
-import React, { Component, Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Checkbox, Divider, Empty, Input, Menu, Popover, Select, Space, Spin, Switch } from "antd";
-import { EuiBadge, EuiComboBox, EuiFieldNumber, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiForm, EuiFormControlLayoutDelimited, EuiFormRow, EuiSelect, EuiSpacer, useInnerText } from "@elastic/eui";
+import { o as __toESM } from "./chunk-D-4zIDrl.js";
+import { a as CirclePlus, i as ListFilter, o as CircleMinus, r as Ft, s as createLucideIcon, t as GlobalConfigContext } from "./components-BEmqsoEA.js";
+import { t as QueryBarTopRow } from "./query_bar_top_row-desyME3s.js";
+import { f as withKibana, t as getIndexPatterns } from "./services-Hp7HR5A8.js";
+import { c as FilterLabel } from "./public-BS_TzGX7.js";
+import { t as require_classnames } from "./classnames-BCXlvRQ0.js";
+import { t as require_lodash } from "./lodash-Gv_ptthU.js";
+import "./common-1_7zA8Zc.js";
+import "./lib-Cdf3LT56.js";
+import { $ as toggleFilterNegated, J as disableFilter, M as isFilterable, Q as toggleFilterDisabled, U as cleanFilter, X as isFilterPinned, Y as enableFilter, Z as pinFilter, _t as buildFilter, dt as getDisplayValueFromFilter, et as unpinFilter, f as Ipv4Address, ft as getIndexPatternFromFilter, gt as buildCustomFilter, nt as getFilterParams, q as buildEmptyFilter, yt as require_moment_timezone } from "./common-BQBJRuts.js";
+import "./editor.api-B3Kwz8AU.js";
+import "./monaco.contribution-DTll1C0Q.js";
+import { t as FILTER_OPERATORS } from "./filter_operators-B4Weryc1.js";
+import "./query_string_input-Cw7sdboC.js";
+import React, { Component, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Checkbox, Divider, Empty, Flex, Form, Input, InputNumber, Menu, Popover, Select, Space, Spin, Switch, Tag } from "antd";
+import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiFormRow, useInnerText } from "@elastic/eui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Icon, { BarsOutlined, CheckOutlined, CloseCircleOutlined, CloseOutlined, DownOutlined, FilterOutlined, LayoutOutlined, LeftOutlined, ReloadOutlined, RightOutlined, SortAscendingOutlined, TableOutlined, UpOutlined } from "@ant-design/icons";
-var CircleMinus = createLucideIcon("circle-minus", [["circle", {
-	cx: "12",
-	cy: "12",
-	r: "10",
-	key: "1mglay"
-}], ["path", {
-	d: "M8 12h8",
-	key: "1wcyev"
-}]]), CirclePlus = createLucideIcon("circle-plus", [
-	["circle", {
-		cx: "12",
-		cy: "12",
-		r: "10",
-		key: "1mglay"
-	}],
-	["path", {
-		d: "M8 12h8",
-		key: "1wcyev"
-	}],
-	["path", {
-		d: "M12 8v8",
-		key: "napkw2"
-	}]
-]), EyeOff = createLucideIcon("eye-off", [
+import dateMath from "@elastic/datemath";
+var EyeOff = createLucideIcon("eye-off", [
 	["path", {
 		d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
 		key: "ct8e1f"
@@ -69,29 +49,6 @@ var CircleMinus = createLucideIcon("circle-minus", [["circle", {
 }], ["path", {
 	d: "m15 5 4 4",
 	key: "1mk7zo"
-}]]), PinOff = createLucideIcon("pin-off", [
-	["path", {
-		d: "M12 17v5",
-		key: "bb1du9"
-	}],
-	["path", {
-		d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89",
-		key: "znwnzq"
-	}],
-	["path", {
-		d: "m2 2 20 20",
-		key: "1ooewy"
-	}],
-	["path", {
-		d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11",
-		key: "c9qhm2"
-	}]
-]), Pin = createLucideIcon("pin", [["path", {
-	d: "M12 17v5",
-	key: "bb1du9"
-}], ["path", {
-	d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
-	key: "1nkz8b"
 }]]), SquaresExclude = createLucideIcon("squares-exclude", [["path", {
 	d: "M16 12v2a2 2 0 0 1-2 2H9a1 1 0 0 0-1 1v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h0",
 	key: "1mcohs"
@@ -119,14 +76,284 @@ var CircleMinus = createLucideIcon("circle-minus", [["circle", {
 		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
 		key: "e791ji"
 	}]
-]);
-init_ResizeObserver_es();
-var import_lodash$10 = require_lodash(), import_classnames$2 = /* @__PURE__ */ __toESM(require_classnames(), 1), import_jsx_runtime = require_jsx_runtime();
+]), import_lodash$9 = require_lodash(), MapShim = (function() {
+	if (typeof Map < "u") return Map;
+	function e(e, t) {
+		var n = -1;
+		return e.some(function(e, r) {
+			return e[0] === t ? (n = r, !0) : !1;
+		}), n;
+	}
+	return function() {
+		function t() {
+			this.__entries__ = [];
+		}
+		return Object.defineProperty(t.prototype, "size", {
+			get: function() {
+				return this.__entries__.length;
+			},
+			enumerable: !0,
+			configurable: !0
+		}), t.prototype.get = function(t) {
+			var n = e(this.__entries__, t), r = this.__entries__[n];
+			return r && r[1];
+		}, t.prototype.set = function(t, n) {
+			var r = e(this.__entries__, t);
+			~r ? this.__entries__[r][1] = n : this.__entries__.push([t, n]);
+		}, t.prototype.delete = function(t) {
+			var n = this.__entries__, r = e(n, t);
+			~r && n.splice(r, 1);
+		}, t.prototype.has = function(t) {
+			return !!~e(this.__entries__, t);
+		}, t.prototype.clear = function() {
+			this.__entries__.splice(0);
+		}, t.prototype.forEach = function(e, t) {
+			t === void 0 && (t = null);
+			for (var n = 0, r = this.__entries__; n < r.length; n++) {
+				var i = r[n];
+				e.call(t, i[1], i[0]);
+			}
+		}, t;
+	}();
+})(), isBrowser = typeof window < "u" && typeof document < "u" && window.document === document, global$1 = (function() {
+	return typeof global < "u" && global.Math === Math ? global : typeof self < "u" && self.Math === Math ? self : typeof window < "u" && window.Math === Math ? window : Function("return this")();
+})(), requestAnimationFrame$1 = (function() {
+	return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(global$1) : function(e) {
+		return setTimeout(function() {
+			return e(Date.now());
+		}, 1e3 / 60);
+	};
+})(), trailingTimeout = 2;
+function throttle(e, t) {
+	var n = !1, r = !1, i = 0;
+	function a() {
+		n && (n = !1, e()), r && s();
+	}
+	function o() {
+		requestAnimationFrame$1(a);
+	}
+	function s() {
+		var e = Date.now();
+		if (n) {
+			if (e - i < trailingTimeout) return;
+			r = !0;
+		} else n = !0, r = !1, setTimeout(o, t);
+		i = e;
+	}
+	return s;
+}
+var REFRESH_DELAY = 20, transitionKeys = [
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"width",
+	"height",
+	"size",
+	"weight"
+], mutationObserverSupported = typeof MutationObserver < "u", ResizeObserverController = function() {
+	function e() {
+		this.connected_ = !1, this.mutationEventsAdded_ = !1, this.mutationsObserver_ = null, this.observers_ = [], this.onTransitionEnd_ = this.onTransitionEnd_.bind(this), this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+	}
+	return e.prototype.addObserver = function(e) {
+		~this.observers_.indexOf(e) || this.observers_.push(e), this.connected_ || this.connect_();
+	}, e.prototype.removeObserver = function(e) {
+		var t = this.observers_, n = t.indexOf(e);
+		~n && t.splice(n, 1), !t.length && this.connected_ && this.disconnect_();
+	}, e.prototype.refresh = function() {
+		this.updateObservers_() && this.refresh();
+	}, e.prototype.updateObservers_ = function() {
+		var e = this.observers_.filter(function(e) {
+			return e.gatherActive(), e.hasActive();
+		});
+		return e.forEach(function(e) {
+			return e.broadcastActive();
+		}), e.length > 0;
+	}, e.prototype.connect_ = function() {
+		!isBrowser || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), mutationObserverSupported ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
+			attributes: !0,
+			childList: !0,
+			characterData: !0,
+			subtree: !0
+		})) : (document.addEventListener("DOMSubtreeModified", this.refresh), this.mutationEventsAdded_ = !0), this.connected_ = !0);
+	}, e.prototype.disconnect_ = function() {
+		!isBrowser || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
+	}, e.prototype.onTransitionEnd_ = function(e) {
+		var t = e.propertyName, n = t === void 0 ? "" : t;
+		transitionKeys.some(function(e) {
+			return !!~n.indexOf(e);
+		}) && this.refresh();
+	}, e.getInstance = function() {
+		return this.instance_ ||= new e(), this.instance_;
+	}, e.instance_ = null, e;
+}(), defineConfigurable = (function(e, t) {
+	for (var n = 0, r = Object.keys(t); n < r.length; n++) {
+		var i = r[n];
+		Object.defineProperty(e, i, {
+			value: t[i],
+			enumerable: !1,
+			writable: !1,
+			configurable: !0
+		});
+	}
+	return e;
+}), getWindowOf = (function(e) {
+	return e && e.ownerDocument && e.ownerDocument.defaultView || global$1;
+}), emptyRect = createRectInit(0, 0, 0, 0);
+function toFloat(e) {
+	return parseFloat(e) || 0;
+}
+function getBordersSize(e) {
+	return [...arguments].slice(1).reduce(function(t, n) {
+		var r = e["border-" + n + "-width"];
+		return t + toFloat(r);
+	}, 0);
+}
+function getPaddings(e) {
+	for (var t = [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	], n = {}, r = 0, i = t; r < i.length; r++) {
+		var a = i[r], o = e["padding-" + a];
+		n[a] = toFloat(o);
+	}
+	return n;
+}
+function getSVGContentRect(e) {
+	var t = e.getBBox();
+	return createRectInit(0, 0, t.width, t.height);
+}
+function getHTMLElementContentRect(e) {
+	var t = e.clientWidth, n = e.clientHeight;
+	if (!t && !n) return emptyRect;
+	var r = getWindowOf(e).getComputedStyle(e), i = getPaddings(r), a = i.left + i.right, o = i.top + i.bottom, s = toFloat(r.width), c = toFloat(r.height);
+	if (r.boxSizing === "border-box" && (Math.round(s + a) !== t && (s -= getBordersSize(r, "left", "right") + a), Math.round(c + o) !== n && (c -= getBordersSize(r, "top", "bottom") + o)), !isDocumentElement(e)) {
+		var l = Math.round(s + a) - t, u = Math.round(c + o) - n;
+		Math.abs(l) !== 1 && (s -= l), Math.abs(u) !== 1 && (c -= u);
+	}
+	return createRectInit(i.left, i.top, s, c);
+}
+var isSVGGraphicsElement = (function() {
+	return typeof SVGGraphicsElement < "u" ? function(e) {
+		return e instanceof getWindowOf(e).SVGGraphicsElement;
+	} : function(e) {
+		return e instanceof getWindowOf(e).SVGElement && typeof e.getBBox == "function";
+	};
+})();
+function isDocumentElement(e) {
+	return e === getWindowOf(e).document.documentElement;
+}
+function getContentRect(e) {
+	return isBrowser ? isSVGGraphicsElement(e) ? getSVGContentRect(e) : getHTMLElementContentRect(e) : emptyRect;
+}
+function createReadOnlyRect(e) {
+	var t = e.x, n = e.y, r = e.width, i = e.height, a = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, o = Object.create(a.prototype);
+	return defineConfigurable(o, {
+		x: t,
+		y: n,
+		width: r,
+		height: i,
+		top: n,
+		right: t + r,
+		bottom: i + n,
+		left: t
+	}), o;
+}
+function createRectInit(e, t, n, r) {
+	return {
+		x: e,
+		y: t,
+		width: n,
+		height: r
+	};
+}
+var ResizeObservation = function() {
+	function e(e) {
+		this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = createRectInit(0, 0, 0, 0), this.target = e;
+	}
+	return e.prototype.isActive = function() {
+		var e = getContentRect(this.target);
+		return this.contentRect_ = e, e.width !== this.broadcastWidth || e.height !== this.broadcastHeight;
+	}, e.prototype.broadcastRect = function() {
+		var e = this.contentRect_;
+		return this.broadcastWidth = e.width, this.broadcastHeight = e.height, e;
+	}, e;
+}(), ResizeObserverEntry = function() {
+	function e(e, t) {
+		var n = createReadOnlyRect(t);
+		defineConfigurable(this, {
+			target: e,
+			contentRect: n
+		});
+	}
+	return e;
+}(), ResizeObserverSPI = function() {
+	function e(e, t, n) {
+		if (this.activeObservations_ = [], this.observations_ = new MapShim(), typeof e != "function") throw TypeError("The callback provided as parameter 1 is not a function.");
+		this.callback_ = e, this.controller_ = t, this.callbackCtx_ = n;
+	}
+	return e.prototype.observe = function(e) {
+		if (!arguments.length) throw TypeError("1 argument required, but only 0 present.");
+		if (!(typeof Element > "u" || !(Element instanceof Object))) {
+			if (!(e instanceof getWindowOf(e).Element)) throw TypeError("parameter 1 is not of type \"Element\".");
+			var t = this.observations_;
+			t.has(e) || (t.set(e, new ResizeObservation(e)), this.controller_.addObserver(this), this.controller_.refresh());
+		}
+	}, e.prototype.unobserve = function(e) {
+		if (!arguments.length) throw TypeError("1 argument required, but only 0 present.");
+		if (!(typeof Element > "u" || !(Element instanceof Object))) {
+			if (!(e instanceof getWindowOf(e).Element)) throw TypeError("parameter 1 is not of type \"Element\".");
+			var t = this.observations_;
+			t.has(e) && (t.delete(e), t.size || this.controller_.removeObserver(this));
+		}
+	}, e.prototype.disconnect = function() {
+		this.clearActive(), this.observations_.clear(), this.controller_.removeObserver(this);
+	}, e.prototype.gatherActive = function() {
+		var e = this;
+		this.clearActive(), this.observations_.forEach(function(t) {
+			t.isActive() && e.activeObservations_.push(t);
+		});
+	}, e.prototype.broadcastActive = function() {
+		if (this.hasActive()) {
+			var e = this.callbackCtx_, t = this.activeObservations_.map(function(e) {
+				return new ResizeObserverEntry(e.target, e.broadcastRect());
+			});
+			this.callback_.call(e, t, e), this.clearActive();
+		}
+	}, e.prototype.clearActive = function() {
+		this.activeObservations_.splice(0);
+	}, e.prototype.hasActive = function() {
+		return this.activeObservations_.length > 0;
+	}, e;
+}(), observers = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new MapShim(), ResizeObserver = function() {
+	function e(t) {
+		if (!(this instanceof e)) throw TypeError("Cannot call a class as a function.");
+		if (!arguments.length) throw TypeError("1 argument required, but only 0 present.");
+		var n = new ResizeObserverSPI(t, ResizeObserverController.getInstance(), this);
+		observers.set(this, n);
+	}
+	return e;
+}();
+[
+	"observe",
+	"unobserve",
+	"disconnect"
+].forEach(function(e) {
+	ResizeObserver.prototype[e] = function() {
+		var t;
+		return (t = observers.get(this))[e].apply(t, arguments);
+	};
+});
+var ResizeObserver_es_default = (function() {
+	return global$1.ResizeObserver === void 0 ? ResizeObserver : global$1.ResizeObserver;
+})(), import_classnames$1 = /* @__PURE__ */ __toESM(require_classnames(), 1);
 function GenericComboBox(e) {
-	let { options: t, selectedOptions: n, getLabel: r, onChange: i, ...a } = e, o = t.map(r), s = o.map((e) => ({ label: e })), c = n.filter((e) => t.indexOf(e) !== -1).map((e) => s[t.indexOf(e)]);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiComboBox, {
+	let { options: t, selectedOptions: n, getLabel: r, onChange: i, ...a } = e, o = t.map(r), s = o.map((e) => ({ label: e }));
+	return /* @__PURE__ */ jsx(EuiComboBox, {
 		options: s,
-		selectedOptions: c,
+		selectedOptions: n.filter((e) => t.indexOf(e) !== -1).map((e) => s[t.indexOf(e)]),
 		onChange: (e) => {
 			i(e.map(({ label: e }) => t[o.indexOf(e)]));
 		},
@@ -134,7 +361,6 @@ function GenericComboBox(e) {
 		...a
 	});
 }
-var import_target = /* @__PURE__ */ __toESM(require_target(), 1);
 function getFieldFromFilter(e, t) {
 	return t.fields.find((t) => t.name === e.meta.key);
 }
@@ -150,7 +376,7 @@ function getOperatorOptions(e) {
 function validateParams(e, t) {
 	switch (t) {
 		case "date":
-			let t = typeof e == "string" ? import_target.default.parse(e) : null;
+			let t = typeof e == "string" ? dateMath.parse(e) : null;
 			return !!(typeof e == "string" && t && t.isValid());
 		case "ip": try {
 			return !!new Ipv4Address(e);
@@ -190,7 +416,7 @@ var PhraseSuggestorUI = class extends React.Component {
 	onSearchChange = (e) => {
 		this.updateSuggestions(`${e}`);
 	};
-	updateSuggestions = (0, import_lodash$10.debounce)(async (e = "") => {
+	updateSuggestions = (0, import_lodash$9.debounce)(async (e = "") => {
 		this.abortController && this.abortController.abort(), this.abortController = new AbortController();
 		let { indexPattern: t, field: n, dateRangeFrom: r, dateRangeTo: i, timeField: a } = this.props;
 		if (!n || !this.isSuggestingValues()) return;
@@ -214,69 +440,56 @@ var PhraseSuggestorUI = class extends React.Component {
 	}, 500);
 };
 withKibana(PhraseSuggestorUI);
-var import_lodash$9 = require_lodash();
+var import_lodash$8 = require_lodash();
 const ValueInputType = class extends Component {
 	render() {
 		let e = this.props.value, t;
 		switch (this.props.type) {
 			case "string":
-				t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFieldText, {
+				t = /* @__PURE__ */ jsx(Input, {
 					placeholder: this.props.placeholder,
 					value: e,
 					onChange: this.onChange,
-					controlOnly: this.props.controlOnly,
 					className: this.props.className
 				});
 				break;
 			case "number":
-				t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFieldNumber, {
+				t = /* @__PURE__ */ jsx(InputNumber, {
 					placeholder: this.props.placeholder,
 					value: typeof e == "string" ? parseFloat(e) : e,
-					onChange: this.onChange,
-					controlOnly: this.props.controlOnly,
-					className: this.props.className
+					onChange: (e) => this.props.onChange(e === null ? "" : `${e}`),
+					className: `w-full ${this.props.className}`
 				});
 				break;
 			case "date":
-				t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFieldText, {
-					placeholder: this.props.placeholder,
-					value: e,
-					onChange: this.onChange,
-					onBlur: this.onBlur,
-					isInvalid: !(0, import_lodash$9.isEmpty)(e) && !validateParams(e, this.props.type),
-					controlOnly: this.props.controlOnly,
-					className: this.props.className
-				});
-				break;
 			case "ip":
-				t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFieldText, {
+				let n = (0, import_lodash$8.isEmpty)(e) || validateParams(e, this.props.type);
+				t = /* @__PURE__ */ jsx(Input, {
 					placeholder: this.props.placeholder,
 					value: e,
+					status: n ? "" : "error",
 					onChange: this.onChange,
-					isInvalid: !(0, import_lodash$9.isEmpty)(e) && !validateParams(e, this.props.type),
-					controlOnly: this.props.controlOnly,
+					onBlur: this.onBlur,
 					className: this.props.className
 				});
 				break;
 			case "boolean":
-				t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiSelect, {
-					options: [
-						{
-							value: void 0,
-							text: this.props.placeholder
-						},
-						{
-							value: "true",
-							text: "true"
-						},
-						{
-							value: "false",
-							text: "false"
-						}
-					],
-					value: e,
-					onChange: this.onBoolChange,
-					className: this.props.className
+				t = /* @__PURE__ */ jsx(Select, {
+					placeholder: this.props.placeholder,
+					value: e === void 0 ? void 0 : String(e),
+					onChange: (e) => {
+						let t = e === "true";
+						this.props.onChange(t);
+					},
+					className: `w-full ${this.props.className}`,
+					options: [{
+						value: "true",
+						label: "true"
+					}, {
+						value: "false",
+						label: "false"
+					}],
+					allowClear: !0
 				});
 				break;
 			default: break;
@@ -298,12 +511,14 @@ const ValueInputType = class extends Component {
 		}
 	};
 };
-var import_lodash$8 = require_lodash(), PhraseValueInputUI = class extends PhraseSuggestorUI {
+var import_lodash$7 = require_lodash();
+const PhraseValueInput = withKibana(class extends PhraseSuggestorUI {
 	render() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-			label: "Value",
-			children: this.isSuggestingValues() ? this.renderWithSuggestions() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueInputType, {
-				placeholder: "Enter a value",
+		return /* @__PURE__ */ jsx(Form.Item, {
+			label: this.props.label,
+			className: "!mb-12px",
+			children: this.isSuggestingValues() ? this.renderWithSuggestions() : /* @__PURE__ */ jsx(ValueInputType, {
+				placeholder: "",
 				value: this.props.value,
 				onChange: this.props.onChange,
 				type: this.props.field ? this.props.field.type : "string"
@@ -311,92 +526,107 @@ var import_lodash$8 = require_lodash(), PhraseValueInputUI = class extends Phras
 		});
 	}
 	renderWithSuggestions() {
-		let e = Array.isArray(this.state.suggestions) ? this.state.suggestions : [], { value: t, intl: n, onChange: r } = this.props, i = String(t);
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringComboBox$1, {
-			placeholder: "Select a value",
-			options: t ? (0, import_lodash$8.uniq)([i, ...e]) : e,
-			getLabel: (e) => e,
-			selectedOptions: t ? [i] : [],
-			onChange: ([e = ""]) => r(e),
-			onSearchChange: this.onSearchChange,
-			singleSelection: { asPlainText: !0 },
-			onCreateOption: r,
-			isClearable: !1,
-			"data-test-subj": "filterParamsComboBox phraseParamsComboxBox"
+		let e = Array.isArray(this.state.suggestions) ? this.state.suggestions : [], { value: t, onChange: n } = this.props, r = t === void 0 ? void 0 : String(t), i = (r ? (0, import_lodash$7.uniq)([r, ...e]) : e).map((e) => ({
+			label: e,
+			value: e
+		}));
+		return /* @__PURE__ */ jsx(Select, {
+			mode: "tags",
+			maxCount: 1,
+			placeholder: "",
+			value: r,
+			onChange: (e) => {
+				n(Array.isArray(e) ? e[e.length - 1] : e);
+			},
+			showSearch: { onSearch: this.onSearchChange },
+			options: i,
+			allowClear: !1,
+			style: { width: "100%" }
 		});
 	}
-};
-function StringComboBox$1(e) {
-	return GenericComboBox(e);
-}
-const PhraseValueInput = withKibana(PhraseValueInputUI);
-var import_lodash$7 = require_lodash(), PhrasesValuesInputUI = class extends PhraseSuggestorUI {
+});
+var import_lodash$6 = require_lodash();
+const PhrasesValuesInput = withKibana(class extends PhraseSuggestorUI {
 	render() {
-		let { suggestions: e } = this.state, { values: t, intl: n, onChange: r } = this.props;
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-			label: "Values",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringComboBox, {
-				placeholder: "Select values",
-				options: t ? (0, import_lodash$7.uniq)([...t, ...e]) : e,
-				getLabel: (e) => e,
-				selectedOptions: t || [],
-				onSearchChange: this.onSearchChange,
-				onCreateOption: (e) => r([...t || [], e]),
-				onChange: r,
-				isClearable: !1,
-				"data-test-subj": "filterParamsComboBox phrasesParamsComboxBox"
+		let { suggestions: e } = this.state, { values: t, onChange: n } = this.props, r = (t ? (0, import_lodash$6.uniq)([...t, ...e]) : e).map((e) => ({
+			label: e,
+			value: e
+		}));
+		return /* @__PURE__ */ jsx(Form.Item, {
+			label: this.props.label,
+			className: "!mb-12px",
+			children: /* @__PURE__ */ jsx(Select, {
+				mode: "tags",
+				placeholder: "",
+				value: t || [],
+				options: r,
+				onChange: (e) => {
+					n(e);
+				},
+				showSearch: { onSearch: this.onSearchChange },
+				allowClear: !1,
+				style: { width: "100%" },
+				tokenSeparators: [","]
 			})
 		});
 	}
-};
-function StringComboBox(e) {
-	return GenericComboBox(e);
-}
-const PhrasesValuesInput = withKibana(PhrasesValuesInputUI);
-init_moment();
-var import_lodash$6 = require_lodash();
+});
+var import_moment_timezone = /* @__PURE__ */ __toESM(require_moment_timezone(), 1);
 function RangeValueInputUI(e) {
-	useKibana();
 	let t = e.field ? e.field.type : "string", n = (e) => {
 		if (typeof e != "string" && typeof e != "number") return e;
-		let t = moment_default(e).tz("Browser");
-		return t.isValid() ? t?.format("YYYY-MM-DDTHH:mm:ss.SSSZ") : e;
-	}, r = (t) => {
-		if (typeof t != "string" && typeof t != "number") throw Error("Range params must be a string or number");
+		let t = (0, import_moment_timezone.default)(e).tz("Browser");
+		return t.isValid() ? t.format("YYYY-MM-DDTHH:mm:ss.SSSZ") : e;
+	}, r = (t, n) => {
+		if (typeof n != "string" && typeof n != "number") throw Error("Range params must be a string or number");
 		e.onChange({
-			from: t,
-			to: (0, import_lodash$6.get)(e, "value.to")
-		});
-	}, a = (t) => {
-		if (typeof t != "string" && typeof t != "number") throw Error("Range params must be a string or number");
-		e.onChange({
-			from: (0, import_lodash$6.get)(e, "value.from"),
-			to: t
+			...e.value,
+			[t]: n
 		});
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormControlLayoutDelimited, {
-		"aria-label": "Range",
-		startControl: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueInputType, {
-			controlOnly: !0,
-			type: t,
-			value: e.value ? e.value.from : void 0,
-			onChange: r,
-			onBlur: (e) => {
-				r(n(e));
-			},
-			placeholder: "Start of the range"
-		}),
-		endControl: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueInputType, {
-			controlOnly: !0,
-			type: t,
-			value: e.value ? e.value.to : void 0,
-			onChange: a,
-			onBlur: (e) => {
-				a(n(e));
-			},
-			placeholder: "End of the range"
+	return /* @__PURE__ */ jsx(Form.Item, {
+		label: e.label,
+		className: "!mb-12px",
+		children: /* @__PURE__ */ jsxs(Space.Compact, {
+			style: { width: "100%" },
+			children: [
+				/* @__PURE__ */ jsx(ValueInputType, {
+					controlOnly: !0,
+					type: t,
+					value: e.value?.from,
+					onChange: (e) => r("from", e),
+					onBlur: (t) => {
+						r("from", n(t?.target?.value ?? e.value?.from));
+					},
+					placeholder: "",
+					className: "!w-[calc(50%-15px)]"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					style: {
+						width: 31,
+						borderLeft: 0,
+						borderRight: 0,
+						pointerEvents: "none",
+						backgroundColor: "transparent",
+						textAlign: "center"
+					},
+					placeholder: "→",
+					disabled: !0
+				}),
+				/* @__PURE__ */ jsx(ValueInputType, {
+					controlOnly: !0,
+					type: t,
+					value: e.value?.to,
+					onChange: (e) => r("to", e),
+					onBlur: (t) => {
+						r("to", n(t?.target?.value ?? e.value?.to));
+					},
+					placeholder: "",
+					className: "!w-[calc(50%-15px)]"
+				})
+			]
 		})
-	}) });
+	});
 }
 const RangeValueInput = RangeValueInputUI;
 var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component {
@@ -413,62 +643,70 @@ var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component
 		};
 	}
 	render() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		let e = this.props.i18n?.filter?.item || {};
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 			className: "ant-popover-title !p-12px !uppercase !mb-0 !border-b-1px !border-b-solid !border-[var(--ant-color-border)] flex items-center justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Edit filter" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+			children: [/* @__PURE__ */ jsx("div", { children: this.props.title }), /* @__PURE__ */ jsx(Button, {
 				className: "h-auto px-0",
 				type: "link",
 				onClick: this.toggleCustomEditor,
-				children: this.state.isCustomEditorOpen ? "Edit filter values" : "Edit as Query DSL"
+				children: this.state.isCustomEditorOpen ? e.edit_values || "Edit filter values" : e.edit_dsl || "Edit as Query DSL"
 			})]
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			className: "globalFilterItem__editorForm",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EuiForm, { children: [
-				this.renderIndexPatternInput(),
-				this.state.isCustomEditorOpen ? this.renderCustomEditor() : this.renderRegularEditor(),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiSpacer, { size: "m" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-8px",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch, {
-						size: "small",
-						id: "filterEditorCustomLabelSwitch",
-						checked: this.state.useCustomLabel,
-						onChange: this.onCustomLabelSwitchChange
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Create custom label?" })]
-				}),
-				this.state.useCustomLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiSpacer, { size: "m" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-					label: "Custom label",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFieldText, {
-						value: `${this.state.customLabel}`,
-						onChange: this.onCustomLabelChange
+			children: /* @__PURE__ */ jsxs(Form, {
+				layout: "vertical",
+				children: [
+					this.renderIndexPatternInput(),
+					this.state.isCustomEditorOpen ? this.renderCustomEditor() : this.renderRegularEditor(),
+					/* @__PURE__ */ jsx(Form.Item, {
+						className: "!mb-12px",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-8px",
+							children: [/* @__PURE__ */ jsx(Switch, {
+								size: "small",
+								id: "filterEditorCustomLabelSwitch",
+								checked: this.state.useCustomLabel,
+								onChange: this.onCustomLabelSwitchChange
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-[var(--ant-form-label-color)] text-[var(--ant-form-label-font-size)]",
+								children: e.create_label || "Create custom label?"
+							})]
+						})
+					}),
+					this.state.useCustomLabel && /* @__PURE__ */ jsx(Form.Item, {
+						className: "!mb-12px",
+						label: e.custom_label || "Custom label",
+						children: /* @__PURE__ */ jsx(Input, {
+							value: `${this.state.customLabel}`,
+							onChange: this.onCustomLabelChange
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-right",
+						children: [/* @__PURE__ */ jsx(Button, {
+							className: "w-80px",
+							type: "text",
+							onClick: this.props.onCancel,
+							children: e.cancel || "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							className: "w-80px",
+							type: "primary",
+							onClick: this.onSubmit,
+							disabled: !this.isFilterValid(),
+							children: e.save || "Save"
+						})]
 					})
-				})] }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "mt-16px text-right",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-						className: "w-80px",
-						size: "large",
-						type: "text",
-						onClick: this.props.onCancel,
-						children: "Cancel"
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-						className: "w-80px",
-						size: "large",
-						type: "primary",
-						onClick: this.onSubmit,
-						disabled: !this.isFilterValid(),
-						children: "Save"
-					})]
-				})
-			] })
+				]
+			})
 		})] });
 	}
 	renderIndexPatternInput() {
 		if (this.props.indexPatterns.length <= 1 && this.props.indexPatterns.find((e) => e === this.getIndexPatternFromFilter())) return "";
 		let { selectedIndexPattern: e } = this.state;
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
+		return /* @__PURE__ */ jsx(EuiFlexGroup, { children: /* @__PURE__ */ jsx(EuiFlexItem, { children: /* @__PURE__ */ jsx(EuiFormRow, {
 			label: "Index Pattern",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndexPatternComboBox, {
+			children: /* @__PURE__ */ jsx(IndexPatternComboBox, {
 				placeholder: "Select an index pattern",
 				options: this.props.indexPatterns,
 				selectedOptions: e ? [e] : [],
@@ -481,80 +719,81 @@ var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component
 		}) }) });
 	}
 	renderRegularEditor() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EuiFlexGroup, {
-				responsive: !1,
-				gutterSize: "s",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexItem, {
-					grow: 2,
-					children: this.renderFieldInput()
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexItem, {
-					grow: !1,
-					style: { flexBasis: 160 },
-					children: this.renderOperatorInput()
-				})]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiSpacer, { size: "s" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				"data-test-subj": "filterParams",
-				children: this.renderParamsEditor()
-			})
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			this.renderFieldInput(),
+			this.renderOperatorInput(),
+			this.renderParamsEditor()
 		] });
 	}
 	renderFieldInput() {
-		let { selectedIndexPattern: e, selectedField: t } = this.state, n = e ? getFilterableFields(e) : [];
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-			label: "Field",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldComboBox, {
+		let { selectedIndexPattern: e, selectedField: t } = this.state, n = e ? getFilterableFields(e) : [], r = this.props.i18n?.filter?.item || {};
+		return /* @__PURE__ */ jsx(Form.Item, {
+			label: r.field || "Field",
+			className: "!mb-12px",
+			children: /* @__PURE__ */ jsx(Select, {
 				id: "fieldInput",
-				isDisabled: !e,
-				placeholder: "Select a field first",
-				options: n,
-				selectedOptions: t ? [t] : [],
-				getLabel: (e) => e.name,
-				onChange: this.onFieldChange,
-				singleSelection: { asPlainText: !0 },
-				isClearable: !1,
-				className: "globalFilterEditor__fieldInput",
-				"data-test-subj": "filterFieldSuggestionList"
+				showSearch: !0,
+				disabled: !e,
+				value: t?.name,
+				onChange: (e) => {
+					let t = n.find((t) => t.name === e);
+					this.onFieldChange([t]);
+				},
+				options: n.map((e) => ({
+					label: e.name,
+					value: e.name
+				})),
+				allowClear: !1,
+				style: { width: "100%" }
 			})
 		});
 	}
 	renderOperatorInput() {
-		let { selectedField: e, selectedOperator: t } = this.state, n = e ? getOperatorOptions(e) : [];
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-			label: "Operator",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OperatorComboBox, {
-				isDisabled: !e,
-				placeholder: e ? "Select" : "Waiting",
-				options: n,
-				selectedOptions: t ? [t] : [],
-				getLabel: ({ message: e }) => e,
-				onChange: this.onOperatorChange,
-				singleSelection: { asPlainText: !0 },
-				isClearable: !1,
-				"data-test-subj": "filterOperatorList"
+		let { selectedField: e, selectedOperator: t } = this.state, n = e ? getOperatorOptions(e) : [], r = this.props.i18n?.filter?.item || {}, i = this.props.i18n?.filter?.operators || {};
+		return /* @__PURE__ */ jsx(Form.Item, {
+			label: r.operator || "Operator",
+			className: "!mb-12px",
+			children: /* @__PURE__ */ jsx(Select, {
+				id: "fieldInput",
+				showSearch: !0,
+				disabled: !e,
+				value: t?.message,
+				onChange: (e) => {
+					let t = n.find((t) => t.message === e);
+					this.onOperatorChange([t]);
+				},
+				options: n.map((e) => ({
+					label: i[`${e.type}${e.negate ? "_false" : "_true"}`] || e.message,
+					value: e.message
+				})),
+				allowClear: !1,
+				style: { width: "100%" }
 			})
 		});
 	}
 	renderCustomEditor() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFormRow, {
-			label: "Query DSL",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ft, {
+		let e = this.props.i18n?.filter?.item || {};
+		return /* @__PURE__ */ jsx(Form.Item, {
+			label: e.dsl || "Query DSL",
+			className: "!mb-12px",
+			children: /* @__PURE__ */ jsx(Ft, {
 				value: this.state.queryDsl,
 				onChange: (e) => this.onQueryDslChange(e || ""),
 				language: "json",
 				width: "100%",
-				height: "250px"
+				height: "250px",
+				theme: this.props.theme === "dark" ? "vs-dark" : "light",
+				className: "border border-solid border-[var(--ant-color-border)] rounded-6px overflow-hidden"
 			})
 		});
 	}
 	renderParamsEditor() {
 		let e = this.state.selectedIndexPattern;
 		if (!e || !this.state.selectedOperator) return "";
+		let t = this.props.i18n?.filter?.item || {};
 		switch (this.state.selectedOperator.type) {
 			case "exists": return "";
-			case "phrase": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhraseValueInput, {
+			case "phrase": return /* @__PURE__ */ jsx(PhraseValueInput, {
 				indexPattern: e,
 				field: this.state.selectedField,
 				value: this.state.params,
@@ -563,9 +802,10 @@ var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component
 				services: this.props.services,
 				dateRangeFrom: this.props.dateRangeFrom,
 				dateRangeTo: this.props.dateRangeTo,
-				timeField: this.props.timeField
+				timeField: this.props.timeField,
+				label: t.value || "Value"
 			});
-			case "phrases": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhrasesValuesInput, {
+			case "phrases": return /* @__PURE__ */ jsx(PhrasesValuesInput, {
 				indexPattern: e,
 				field: this.state.selectedField,
 				values: this.state.params,
@@ -573,12 +813,18 @@ var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component
 				services: this.props.services,
 				dateRangeFrom: this.props.dateRangeFrom,
 				dateRangeTo: this.props.dateRangeTo,
-				timeField: this.props.timeField
+				timeField: this.props.timeField,
+				label: t.values || "Values"
 			});
-			case "range": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RangeValueInput, {
+			case "range": return /* @__PURE__ */ jsx(RangeValueInput, {
 				field: this.state.selectedField,
 				value: this.state.params,
-				onChange: this.onParamsChange
+				onChange: this.onParamsChange,
+				services: this.props.services,
+				dateRangeFrom: this.props.dateRangeFrom,
+				dateRangeTo: this.props.dateRangeTo,
+				timeField: this.props.timeField,
+				label: t.range || "Range"
 			});
 		}
 	}
@@ -669,29 +915,26 @@ var import_lodash$5 = require_lodash(), FilterEditorUI = class extends Component
 function IndexPatternComboBox(e) {
 	return GenericComboBox(e);
 }
-function FieldComboBox(e) {
-	return GenericComboBox(e);
-}
-function OperatorComboBox(e) {
-	return GenericComboBox(e);
-}
-const FilterEditor = FilterEditorUI, FilterView = ({ filter: e, iconOnClick: t, onClick: n, valueLabel: r, errorMessage: i, filterLabelStatus: a, ...s }) => {
-	let [c, l] = useInnerText(), u = i || `Filter: ${l}. Select for more filter actions.`;
-	return isFilterPinned(e) && (u = `'Pinned', ${u}`), e.meta.disabled && (u = `'Disabled', ${u}`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiBadge, {
-		title: u,
-		color: "hollow",
-		iconType: "cross",
-		iconSide: "right",
-		closeButtonProps: { tabIndex: -1 },
-		iconOnClick: t,
-		iconOnClickAriaLabel: "Delete",
+const FilterEditor = (e) => {
+	let { i18n: t } = useContext(GlobalConfigContext);
+	return /* @__PURE__ */ jsx(FilterEditorUI, {
+		...e,
+		i18n: t
+	});
+}, FilterView = ({ filter: e, iconOnClick: t, onClick: n, valueLabel: r, errorMessage: i, filterLabelStatus: a, className: o, ...s }) => {
+	let [c, l] = useInnerText(), d = i || `Filter: ${l}. Select for more filter actions.`;
+	return isFilterPinned(e) && (d = `'Pinned', ${d}`), e.meta.disabled && (d = `'Disabled', ${d}`), /* @__PURE__ */ jsx(Tag, {
+		title: d,
+		closable: !0,
+		onClose: (e) => {
+			e.preventDefault(), t();
+		},
 		onClick: n,
-		onClickAriaLabel: "Filter actions",
+		className: `${o} !bg-transparent !p-0 !text-14px flex items-center`,
 		...s,
-		className: "!p-6px !rounded-6px !border-[var(--ant-color-border)]",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		children: /* @__PURE__ */ jsx("span", {
 			ref: c,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterLabel, {
+			children: /* @__PURE__ */ jsx(FilterLabel, {
 				filter: e,
 				valueLabel: r,
 				filterLabelStatus: a
@@ -701,139 +944,121 @@ const FilterEditor = FilterEditorUI, FilterView = ({ filter: e, iconOnClick: t,
 };
 var FILTER_ITEM_OK = "", FILTER_ITEM_WARNING = "warn", FILTER_ITEM_ERROR = "error";
 function FilterItem(e) {
-	let [t, n] = useState(!1), [r, i] = useState(!1), [o, s] = useState(void 0), { id: c, filter: l, indexPatterns: u } = e;
+	let [n, i] = useState(!1), [a, s] = useState(!1), [c, u] = useState(void 0), { id: d, filter: f, indexPatterns: m } = e, { i18n: h } = useContext(GlobalConfigContext), _ = h?.filter?.item || {};
 	useEffect(() => {
 		let t = e.filter.meta.index;
 		t ? getIndexPatterns().get(t).then((e) => {
-			s(!!e);
+			u(!!e);
 		}).catch(() => {
-			s(!1);
-		}) : s(!0);
+			u(!1);
+		}) : u(!0);
 	}, [e.filter.meta.index]);
-	function d(t) {
-		n(!1), e.onUpdate(t);
+	function y(t) {
+		i(!1), e.onUpdate(t);
 	}
-	function f() {
-		let t = toggleFilterPinned(l);
-		e.onUpdate(t);
-	}
-	function p() {
-		let t = toggleFilterNegated(l);
+	function b() {
+		let t = toggleFilterNegated(f);
 		e.onUpdate(t);
 	}
-	function h() {
-		let t = toggleFilterDisabled(l);
+	function x() {
+		let t = toggleFilterDisabled(f);
 		e.onUpdate(t);
 	}
-	function g(e) {
-		return e.status === FILTER_ITEM_OK;
-	}
-	function _(e) {
-		let { disabled: t } = l.meta;
+	function C(e) {
+		let { disabled: t } = f.meta;
 		return t || e.status === FILTER_ITEM_ERROR;
 	}
-	function v(t, n) {
-		return (0, import_classnames$2.default)("globalFilterItem", {
-			"globalFilterItem-isDisabled": _(n),
+	function w(t, n) {
+		return (0, import_classnames$1.default)("globalFilterItem", {
+			"globalFilterItem-isDisabled": C(n),
 			"globalFilterItem-isError": n.status === FILTER_ITEM_ERROR,
 			"globalFilterItem-isWarning": n.status === FILTER_ITEM_WARNING,
-			"globalFilterItem-isPinned": isFilterPinned(l),
+			"globalFilterItem-isPinned": isFilterPinned(f),
 			"globalFilterItem-isExcluded": t
 		}, e.className);
 	}
-	function y(e) {
-		let t = l.meta.key ? `filter-key-${l.meta.key}` : "", n = l.meta.value ? `filter-value-${g(e) ? e.title : e.status}` : "", r = l.meta.negate ? "filter-negated" : "";
-		return `filter ${`filter-${_(e) ? "disabled" : "enabled"}`} ${t} ${n} ${`filter-${isFilterPinned(l) ? "pinned" : "unpinned"}`} ${r}`;
-	}
-	function b() {
-		return !e.indexPatterns.length || getIndexPatternFromFilter(l, u) ? !0 : u.map((e) => e.fields.map((e) => e.name)).reduce((e, t) => [...e, ...t], []).includes(l.meta?.key || "");
+	function E() {
+		return !e.indexPatterns.length || getIndexPatternFromFilter(f, m) ? !0 : m.map((e) => e.fields.map((e) => e.name)).reduce((e, t) => [...e, ...t], []).includes(f.meta?.key || "");
 	}
-	function x() {
+	function D() {
 		let e = {
 			title: "",
 			message: "",
 			status: FILTER_ITEM_OK
 		};
-		if (o === !1) e.status = FILTER_ITEM_ERROR, e.title = "Error", e.message = "Index pattern  not found";
-		else if (b()) try {
-			e.title = getDisplayValueFromFilter(l, u);
+		if (c === !1) e.status = FILTER_ITEM_ERROR, e.title = "Error", e.message = "Index pattern  not found";
+		else if (E()) try {
+			e.title = getDisplayValueFromFilter(f, m);
 		} catch (t) {
 			e.status = FILTER_ITEM_ERROR, e.title = "Error", e.message = t.message;
 		}
 		else e.status = FILTER_ITEM_WARNING, e.title = "Warning", e.message = "Field {filter.meta.key} does not exist in current view";
 		return e;
 	}
-	if (o === void 0) return null;
-	let S = x();
-	if (S.status === FILTER_ITEM_ERROR && !l.meta.disabled) return l.meta.disabled = !0, e.onUpdate(l), null;
-	let C = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterView, {
-		filter: l,
-		valueLabel: S.title,
-		filterLabelStatus: S.status,
-		errorMessage: S.message,
-		className: v(l.meta.negate, S),
+	if (c === void 0) return null;
+	let O = D();
+	if (O.status === FILTER_ITEM_ERROR && !f.meta.disabled) return f.meta.disabled = !0, e.onUpdate(f), null;
+	let k = /* @__PURE__ */ jsx(FilterView, {
+		filter: f,
+		valueLabel: O.title,
+		filterLabelStatus: O.status,
+		errorMessage: O.message,
+		className: w(f.meta.negate, O),
 		iconOnClick: () => e.onRemove(),
-		onClick: () => {},
-		"data-test-subj": y(S)
-	}), { negate: E, disabled: D, index: k } = l.meta;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
-		classNames: { container: `!p-0 !overflow-hidden ${r ? "w-400px" : "w-256px"}` },
+		onClick: () => {}
+	}), { negate: A, disabled: j, index: M } = f.meta;
+	return /* @__PURE__ */ jsx(Popover, {
+		classNames: { container: `!p-0 !overflow-hidden ${a ? "w-400px" : "w-256px"}` },
 		placement: "bottomLeft",
-		open: t,
+		open: n,
 		onOpenChange: (e) => {
-			e || i(!1), n(e);
+			e || s(!1), i(e);
 		},
-		content: r ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterEditor, {
-			filter: l,
-			indexPatterns: u,
-			onSubmit: d,
+		content: a ? /* @__PURE__ */ jsx(FilterEditor, {
+			filter: f,
+			indexPatterns: m,
+			onSubmit: y,
 			onCancel: () => {
-				n(!1);
+				i(!1);
 			},
-			services: e.services
-		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, {
+			services: e.services,
+			theme: e.theme,
+			title: _.edit || "Edit filter"
+		}) : /* @__PURE__ */ jsx(Menu, {
 			className: "!border-0",
 			classNames: { item: "!m-0 !px-12px !w-full !rounded-0" },
 			mode: "vertical",
 			items: [
-				{
-					key: "pin",
-					label: isFilterPinned(l) ? "Unpin" : "Pin across all apps",
-					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pin, { className: "w-14px h-14px" }),
-					onClick: () => {
-						n(!1), f();
-					}
-				},
-				k && {
+				M && {
 					key: "edit",
-					label: "Edit filter",
-					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, { className: "w-14px h-14px" }),
+					label: _.edit || "Edit filter",
+					icon: /* @__PURE__ */ jsx(Pencil, { className: "w-14px h-14px" }),
 					onClick: () => {
-						i(!0), f();
+						s(!0);
 					}
 				},
 				{
 					key: "include_exclude",
-					label: E ? "Include results" : "Exclude results",
-					icon: E ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CirclePlus, { className: "w-14px h-14px" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleMinus, { className: "w-14px h-14px" }),
+					label: A ? _.include_results || "Include results" : _.exclude_results || "Exclude results",
+					icon: jsx(A ? CirclePlus : CircleMinus, { className: "w-14px h-14px" }),
 					onClick: () => {
-						n(!1), p();
+						i(!1), b();
 					}
 				},
 				{
 					key: "enable_disabled",
-					label: D ? "Re-enable" : "Temporarily disable",
-					icon: D ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eye, { className: "w-14px h-14px" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeOff, { className: "w-14px h-14px" }),
+					label: j ? _.re_enable || "Re-enable" : _.temporarily_disable || "Temporarily disable",
+					icon: jsx(j ? Eye : EyeOff, { className: "w-14px h-14px" }),
 					onClick: () => {
-						n(!1), h();
+						i(!1), x();
 					}
 				},
 				{
 					key: "delete",
-					label: "Delete",
-					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "w-14px h-14px" }),
+					label: _.delete || "Delete",
+					icon: /* @__PURE__ */ jsx(Trash2, { className: "w-14px h-14px" }),
 					onClick: () => {
-						n(!1), e.onRemove();
+						i(!1), e.onRemove();
 					}
 				}
 			].filter((e) => !!e)
@@ -842,29 +1067,30 @@ function FilterItem(e) {
 		trigger: "click",
 		destroyOnHidden: !0,
 		arrow: !1,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-			className: "!p-0 !border-0 !outline-0 !shadow-none",
-			children: C
+		children: /* @__PURE__ */ jsx(Button, {
+			className: "px-8px",
+			children: k
 		})
 	});
 }
-var import_classnames$1 = /* @__PURE__ */ __toESM(require_classnames(), 1);
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
 function FilterBarUI(e) {
 	function t(t) {
 		e.onFiltersUpdated && e.onFiltersUpdated(t);
 	}
 	function n() {
-		return e.filters.map((t, n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexItem, {
-			grow: !1,
+		return e.filters.map((t, n) => /* @__PURE__ */ jsx("div", {
 			className: "globalFilterBar__flexItem",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterItem, {
+			style: { flex: "0 0 auto" },
+			children: /* @__PURE__ */ jsx(FilterItem, {
 				id: `${n}`,
 				intl: e.intl,
 				filter: t,
 				onUpdate: (e) => i(n, e),
 				onRemove: () => r(n),
 				indexPatterns: e.indexPatterns,
-				services: e.services
+				services: e.services,
+				theme: e.theme
 			})
 		}, n));
 	}
@@ -876,19 +1102,19 @@ function FilterBarUI(e) {
 		let i = [...e.filters];
 		i[n] = r, t(i);
 	}
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexGroup, {
+	return /* @__PURE__ */ jsx(Flex, {
 		className: "globalFilterGroup",
-		gutterSize: "none",
-		alignItems: "flexStart",
-		responsive: !1,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexItem, {
+		vertical: !1,
+		align: "flex-start",
+		gap: 0,
+		children: /* @__PURE__ */ jsx("div", {
 			className: "globalFilterGroup__filterFlexItem",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EuiFlexGroup, {
-				className: (0, import_classnames$1.default)("globalFilterBar", e.className),
-				wrap: !0,
-				responsive: !1,
-				gutterSize: "xs",
-				alignItems: "center",
+			style: { flex: 1 },
+			children: /* @__PURE__ */ jsx(Flex, {
+				className: (0, import_classnames.default)("globalFilterBar", e.className),
+				wrap: "wrap",
+				gap: 8,
+				align: "center",
 				children: n()
 			})
 		})
@@ -900,25 +1126,25 @@ var Loading_module_default = {
 	tips: "_tips_16hnu_13"
 }, Loading_default = (e) => {
 	let { loading: t = !0, currentLocales: n } = e;
-	return t ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	return t ? /* @__PURE__ */ jsx("div", {
 		className: Loading_module_default.loading,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spin, { tip: n["dropdownlist.loading"] })
+		children: /* @__PURE__ */ jsx(Spin, { tip: n["dropdownlist.loading"] })
 	}) : null;
 }, Error_module_default = {
 	error: "_error_1fev3_1",
 	tips: "_tips_1fev3_14"
 }, Error_default = (e) => {
 	let { currentLocales: t, failed: n = !0 } = e;
-	return n ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+	return n ? /* @__PURE__ */ jsxs("div", {
 		className: Error_module_default.error,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { component: CloseCircleOutlined }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		children: [/* @__PURE__ */ jsx(Icon, { component: CloseCircleOutlined }), /* @__PURE__ */ jsx("div", {
 			className: Error_module_default.tips,
 			children: t["dropdownlist.loading.failed"]
 		})]
 	}) : null;
-}, Empty_module_default = { empty: "_empty_1bf3s_1" }, Empty_default = (e) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+}, Empty_module_default = { empty: "_empty_1bf3s_1" }, Empty_default = (e) => /* @__PURE__ */ jsx("div", {
 	className: Empty_module_default.empty,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })
+	children: /* @__PURE__ */ jsx(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })
 }), List_module_default = {
 	container: "_container_f1ixt_1",
 	group: "_group_f1ixt_5",
@@ -948,32 +1174,32 @@ var Loading_module_default = {
 	options: "_options_f1ixt_185",
 	option: "_option_f1ixt_185"
 }, import_lodash$4 = require_lodash(), List_default = (e) => {
-	let { visible: t, value: n, onChange: r, loading: i = !1, failed: a = !1, rowKey: o, renderItem: s, renderTag: c, renderEmptyList: l, onSearchChange: u, searchValue: d, sorterOptions: f, pagination: p, data: m, sorter: h, onSorterChange: g, filters: _, onFiltersChange: v, filterOptions: y, groups: b, onGroupsChange: x, groupOptions: S, currentLocales: C, showGroup: w, onShowGroupChange: T, isMultiple: E, extraData: D = [], searchPlaceholder: O, onRefresh: k, actions: A = [] } = e, [j, M] = useState([]), [N, P] = useState(!1), F = useRef(null), I = useCallback(() => {
+	let { visible: t, value: n, onChange: r, loading: i = !1, failed: a = !1, rowKey: o, renderItem: s, renderTag: c, renderEmptyList: l, onSearchChange: u, searchValue: d, sorterOptions: f, pagination: p, data: m, sorter: h, onSorterChange: g, filters: _, onFiltersChange: v, filterOptions: y, groups: b, onGroupsChange: x, groupOptions: S, currentLocales: C, showGroup: w, onShowGroupChange: T, isMultiple: E, extraData: D = [], searchPlaceholder: O, onRefresh: k, actions: A = [] } = e, [j, M] = useState([]), [an, F] = useState(!1), I = useRef(null), L = useCallback(() => {
 		setTimeout(() => {
 			T(!1), u();
 		}, 500);
-	}, [T, u]), z = (e) => {
+	}, [T, u]), R = (e) => {
 		if (!e.disabled) if (E) {
 			let t = (0, import_lodash$4.cloneDeep)(n) || [], i = t.findIndex((t) => t[o] === e[o]);
 			i === -1 ? t.push(e) : t.splice(i, 1), r(t);
 		} else r(e);
-	}, V = () => {
+	}, z = () => {
 		T(!w);
-	}, U = (e, t) => {
+	}, V = (e, t) => {
 		let n = [...b];
 		n[e]?.value === t.value ? n.splice(e, 1) : n[e] = {
 			key: t.key,
 			value: t.value
 		}, n.splice(e + 1, n.length), x(n);
-	}, W = (e) => {
+	}, H = (e) => {
 		u(e.trim());
-	}, G = (e, t) => {
+	}, U = (e, t) => {
 		let n = [...j];
 		n[t] = e, M(n);
-	}, K = (e, t, n) => {
+	}, W = (e, t, n) => {
 		let r = (0, import_lodash$4.cloneDeep)(_), i = r[e] || [], a = i.indexOf(t);
 		a === -1 ? n && i.push(t) : n || i.splice(a, 1), r[e] = i, v(r);
-	}, q = (e) => {
+	}, G = (e) => {
 		let t = (0, import_lodash$4.cloneDeep)(n || []);
 		m.forEach((n) => {
 			if (n.disabled) return;
@@ -982,238 +1208,238 @@ var Loading_module_default = {
 		}), r(t);
 	};
 	useEffect(() => {
-		F.current && t && F.current.focus();
-	}, [t, F]), useEffect(() => {
-		t || I();
+		I.current && t && I.current.focus();
 	}, [t, I]), useEffect(() => {
+		t || L();
+	}, [t, L]), useEffect(() => {
 		M(h);
 	}, [h]);
-	let { currentPage: J, pageSize: Y, total: X, pages: Z } = p, Q = useMemo(() => b[0] === void 0 ? [] : S.find((e) => e.value === b[0].value)?.list || [], [S, b]), $ = useMemo(() => {
+	let { currentPage: K, pageSize: q, total: J, pages: Y } = p, sn = useMemo(() => b[0] === void 0 ? [] : S.find((e) => e.value === b[0].value)?.list || [], [S, b]), X = useMemo(() => {
 		if (!E) return !1;
 		if (E) return n?.length === 0 ? !1 : m.every((e) => n.findIndex((t) => t[o] === e[o]) !== -1) ? !0 : m.some((e) => n.findIndex((t) => t[o] === e[o]) !== -1) ? "indeterminate" : !1;
 	}, [
 		E,
 		JSON.stringify(m),
 		JSON.stringify(n)
-	]), Gt = (e, t) => !w || e.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	]), Q = (e, t) => !w || e.length === 0 ? null : /* @__PURE__ */ jsx("div", {
 		className: List_module_default.group,
-		children: e.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		children: e.map((e) => /* @__PURE__ */ jsxs("div", {
 			className: `${List_module_default.item} ${b[t]?.value === e.value ? List_module_default.selected : ""}`,
-			onClick: () => U(t, e),
+			onClick: () => V(t, e),
 			title: e.label,
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			children: [/* @__PURE__ */ jsx("span", {
 				className: List_module_default.label,
 				children: e.label
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+			}), /* @__PURE__ */ jsx(Icon, {
 				component: RightOutlined,
 				className: List_module_default.icon
 			})]
 		}, e.value))
-	}), Kt = A.concat(k ? [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+	}), $ = A.concat(k ? [/* @__PURE__ */ jsx("a", {
 		disabled: i,
 		onClick: () => {
 			i || k();
 		},
 		children: C["dropdownlist.refresh"]
 	})] : []);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: `${List_module_default.container} css-var-r0`,
 		children: [
-			Gt(S, 0),
-			Gt(Q, 1),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			Q(S, 0),
+			Q(sn, 1),
+			/* @__PURE__ */ jsxs("div", {
 				className: List_module_default.content,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
-						ref: F,
+					/* @__PURE__ */ jsx(Input, {
+						ref: I,
 						value: d,
 						onChange: (e) => {
 							if (!i) {
 								let t = e.target.value;
-								W(t);
+								H(t);
 							}
 						},
 						allowClear: !0,
 						className: List_module_default.search,
 						placeholder: O || C["dropdownlist.search.placeholder"]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					/* @__PURE__ */ jsxs("div", {
 						className: List_module_default.tools,
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						children: [/* @__PURE__ */ jsxs("div", {
 							className: List_module_default.result,
 							children: [
 								C["dropdownlist.result.found"],
 								" ",
-								p === !1 ? m.length : X,
+								p === !1 ? m.length : J,
 								" ",
 								C["dropdownlist.result.records"]
 							]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						}), /* @__PURE__ */ jsxs("div", {
 							className: List_module_default.actions,
 							children: [
-								f.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
-									open: N,
-									onOpenChange: P,
+								f.length > 0 && /* @__PURE__ */ jsx(Popover, {
+									open: an,
+									onOpenChange: F,
 									overlayClassName: List_module_default.filterPopover,
 									placement: "bottom",
 									trigger: "click",
-									content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									content: /* @__PURE__ */ jsxs("div", {
 										className: List_module_default.sorter,
 										children: [
-											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											/* @__PURE__ */ jsx("div", {
 												className: List_module_default.title,
 												children: C["dropdownlist.sort.by"]
 											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											/* @__PURE__ */ jsxs("div", {
 												className: List_module_default.form,
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select, {
+												children: [/* @__PURE__ */ jsx(Select, {
 													value: j[0],
 													style: { width: "65%" },
-													onChange: (e) => G(e, 0),
-													children: f.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Option, {
+													onChange: (e) => U(e, 0),
+													children: f.map((e) => /* @__PURE__ */ jsx(Select.Option, {
 														value: e.key,
 														children: e.label
 													}, e.key))
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select, {
+												}), /* @__PURE__ */ jsxs(Select, {
 													value: j[1],
 													style: { width: "35%" },
-													onChange: (e) => G(e, 1),
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Option, {
+													onChange: (e) => U(e, 1),
+													children: [/* @__PURE__ */ jsx(Select.Option, {
 														value: "desc",
 														children: C["dropdownlist.sort.by.desc"]
-													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Option, {
+													}), /* @__PURE__ */ jsx(Select.Option, {
 														value: "asc",
 														children: C["dropdownlist.sort.by.asc"]
 													})]
 												})]
 											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											/* @__PURE__ */ jsxs("div", {
 												className: List_module_default.actions,
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+												children: [/* @__PURE__ */ jsx(Button, {
 													type: "link",
 													onClick: () => {
-														g([]), P(!1);
+														g([]), F(!1);
 													},
 													children: C["dropdownlist.sort.by.clear"]
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+												}), /* @__PURE__ */ jsx(Button, {
 													style: { width: 80 },
 													type: "primary",
 													onClick: () => {
-														g(j), P(!1);
+														g(j), F(!1);
 													},
 													children: C["dropdownlist.apply"]
 												})]
 											})
 										]
 									}),
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+									children: /* @__PURE__ */ jsx(Icon, {
 										style: { cursor: "pointer" },
 										component: SortAscendingOutlined
 									})
 								}),
-								y.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
+								y.length > 0 && /* @__PURE__ */ jsx(Popover, {
 									overlayClassName: List_module_default.filterPopover,
 									placement: "bottom",
 									trigger: "click",
-									content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									content: /* @__PURE__ */ jsxs("div", {
 										className: List_module_default.filters,
-										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										children: [/* @__PURE__ */ jsxs("div", {
 											className: List_module_default.title,
-											children: [C["dropdownlist.filters"], /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+											children: [C["dropdownlist.filters"], /* @__PURE__ */ jsx(Icon, {
 												className: List_module_default.clear,
 												component: ReloadOutlined,
 												onClick: () => {
 													v({});
 												}
 											})]
-										}), y.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										}), y.map((e) => /* @__PURE__ */ jsxs("div", {
 											className: List_module_default.content,
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											children: [/* @__PURE__ */ jsx("div", {
 												className: List_module_default.label,
 												children: e.label
-											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											}), /* @__PURE__ */ jsx("div", {
 												className: List_module_default.options,
-												children: (e.list || []).map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												children: (e.list || []).map((t) => /* @__PURE__ */ jsxs("div", {
 													className: List_module_default.option,
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, {
-														onChange: (n) => K(e.key, t.value, n.target.checked),
+													children: [/* @__PURE__ */ jsx(Checkbox, {
+														onChange: (n) => W(e.key, t.value, n.target.checked),
 														checked: (_[e.key] || []).indexOf(t.value) !== -1,
 														children: t.label || t.value
-													}), t.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: t.count })]
+													}), t.count !== void 0 && /* @__PURE__ */ jsx("div", { children: t.count })]
 												}, t.value))
 											})]
 										}, e.key))]
 									}),
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+									children: /* @__PURE__ */ jsx(Icon, {
 										style: { cursor: "pointer" },
 										component: FilterOutlined
 									})
 								}),
-								S.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+								S.length > 0 && /* @__PURE__ */ jsx(Icon, {
 									style: { cursor: "pointer" },
 									component: LayoutOutlined,
-									onClick: V
+									onClick: z
 								}),
-								E && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, {
-									indeterminate: $ === "indeterminate",
-									onChange: (e) => q(e.target.checked),
-									checked: $ === !0
+								E && /* @__PURE__ */ jsx(Checkbox, {
+									indeterminate: X === "indeterminate",
+									onChange: (e) => G(e.target.checked),
+									checked: X === !0
 								})
 							]
 						})]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ jsx("div", {
 						className: List_module_default.listWrapper,
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						children: /* @__PURE__ */ jsx("div", {
 							className: List_module_default.list,
-							style: { maxHeight: `${32 * (Y + D.length)}px` },
-							children: i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading_default, { currentLocales: C }) : a ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Error_default, { currentLocales: C }) : m.length === 0 && D.length === 0 ? l ? l() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty_default, {}) : D.concat(m).map((e) => {
+							style: { maxHeight: `${32 * (q + D.length)}px` },
+							children: i ? /* @__PURE__ */ jsx(Loading_default, { currentLocales: C }) : a ? /* @__PURE__ */ jsx(Error_default, { currentLocales: C }) : m.length === 0 && D.length === 0 ? l ? l() : /* @__PURE__ */ jsx(Empty_default, {}) : D.concat(m).map((e) => {
 								let t = E ? (n || []).findIndex((t) => t[o] === e[o]) !== -1 : n?.[o] === e[o];
-								return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								return /* @__PURE__ */ jsxs("div", {
 									className: `${List_module_default.item} ${t ? List_module_default.selected : ""} ${e.disabled ? List_module_default.disabled : ""}`,
-									onClick: () => z(e),
+									onClick: () => R(e),
 									children: [
-										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+										/* @__PURE__ */ jsx("div", {
 											className: List_module_default.label,
 											children: s ? s(e) : e[o]
 										}),
-										c && !w ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+										c && !w ? /* @__PURE__ */ jsx("div", {
 											className: List_module_default.tag,
 											children: s ? c(e) : e[o]
 										}) : null,
-										t && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { component: CheckOutlined })
+										t && /* @__PURE__ */ jsx(Icon, { component: CheckOutlined })
 									]
 								}, e[o]);
 							})
 						})
 					}),
-					p === !1 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					p === !1 ? null : /* @__PURE__ */ jsx("div", {
 						className: List_module_default.footerWrapper,
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						children: /* @__PURE__ */ jsxs("div", {
 							className: List_module_default.footer,
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							children: [/* @__PURE__ */ jsx("div", {
 								className: List_module_default.actions,
-								children: Kt.map((e, t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Fragment, { children: [e, t !== Kt.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, { orientation: "vertical" })] }, t))
-							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								children: $.map((e, t) => /* @__PURE__ */ jsxs(Fragment, { children: [e, t !== $.length - 1 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" })] }, t))
+							}), /* @__PURE__ */ jsxs("div", {
 								className: List_module_default.pager,
 								children: [
-									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-										onClick: () => p.onChange(J - 1),
+									/* @__PURE__ */ jsx(Icon, {
+										onClick: () => p.onChange(K - 1),
 										component: LeftOutlined,
-										className: `${List_module_default.icon} ${J <= 1 ? List_module_default.disabled : ""}`
+										className: `${List_module_default.icon} ${K <= 1 ? List_module_default.disabled : ""}`
 									}),
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									/* @__PURE__ */ jsxs("span", {
 										className: List_module_default.pageNum,
 										children: [
-											J,
+											K,
 											"/",
-											Z
+											Y
 										]
 									}),
-									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-										onClick: () => p.onChange(J + 1),
+									/* @__PURE__ */ jsx(Icon, {
+										onClick: () => p.onChange(K + 1),
 										component: RightOutlined,
-										className: `${List_module_default.icon} ${J >= Z ? List_module_default.disabled : ""}`
+										className: `${List_module_default.icon} ${K >= Y ? List_module_default.disabled : ""}`
 									})
 								]
 							})]
@@ -1269,7 +1495,7 @@ var Loading_module_default = {
 		let { currentPage: e, pageSize: t } = l;
 		return f.filter((n, r) => r >= (e - 1) * t && r < e * t);
 	}, [f, l]);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List_default, {
+	return /* @__PURE__ */ jsx(List_default, {
 		...e,
 		visible: t,
 		data: p,
@@ -1280,7 +1506,7 @@ var Loading_module_default = {
 	});
 }, CustomList_default = (e) => {
 	let { visible: t, data: n = [], pagination: r = {} } = e, i = r.total || n.length, a = r.pageSize || 10;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List_default, {
+	return /* @__PURE__ */ jsx(List_default, {
 		...e,
 		visible: t,
 		data: n,
@@ -1330,25 +1556,25 @@ var Loading_module_default = {
 	allowClear: "_allowClear_1nq1q_44",
 	popover: "_popover_1nq1q_50"
 }, import_lodash$2 = require_lodash(), DropdownList_default = (e) => {
-	let { className: t = "", popoverClassName: n = "", popoverPlacement: r = "bottomLeft", children: i, width: a = 300, dropdownWidth: o, locale: s = "en-US", allowClear: c = !1, mode: l = "", value: u, disabled: d = !1, onChange: f, placeholder: p = "", loading: m = !1, data: h = [], rowKey: g, renderItem: _, renderLabel: v, pagination: y, onSearchChange: b = () => {}, sorter: x = [], onSorterChange: S = () => {}, sorterOptions: C = [], filters: w = {}, onFiltersChange: T = () => {}, filterOptions: E = [], defaultGroupVisible: D = !1, groups: O = [], onGroupsChange: k = () => {}, groupOptions: A = [], onGroupVisibleChange: j = () => {}, autoAdjustOverflow: M = { adjustX: 1 }, getPopupContainer: N = (e) => e.parentNode, extraData: P = [], showListIcon: F = !0 } = e, [I, L] = useState(!1), [R, Ut] = useState(D), [Wt, z] = useState(), [B, V] = useState(), H = useRef(null), U = useMemo(() => l === "multiple" && (u === void 0 || Array.isArray(u)), [l, u]), W = (e) => {
-		L(e);
+	let { className: t = "", popoverClassName: n = "", popoverPlacement: r = "bottomLeft", children: i, width: a = 300, dropdownWidth: o, locale: s = "en-US", allowClear: c = !1, mode: l = "", value: u, disabled: d = !1, onChange: f, placeholder: p = "", loading: m = !1, data: h = [], rowKey: g, renderItem: _, renderLabel: v, pagination: y, onSearchChange: b = () => {}, sorter: x = [], onSorterChange: S = () => {}, sorterOptions: C = [], filters: w = {}, onFiltersChange: T = () => {}, filterOptions: E = [], defaultGroupVisible: D = !1, groups: O = [], onGroupsChange: k = () => {}, groupOptions: A = [], onGroupVisibleChange: j = () => {}, autoAdjustOverflow: M = { adjustX: 1 }, getPopupContainer: nn = (e) => e.parentNode, extraData: rn = [], showListIcon: an = !0 } = e, [N, P] = useState(!1), [F, I] = useState(D), [L, on] = useState(), [R, z] = useState(), B = useRef(null), V = useMemo(() => l === "multiple" && (u === void 0 || Array.isArray(u)), [l, u]), H = (e) => {
+		P(e);
+	}, U = (e) => {
+		f(e), V || P(!1);
+	}, W = (e) => {
+		on(e), b(e);
 	}, G = (e) => {
-		f(e), U || L(!1);
-	}, K = (e) => {
-		z(e), b(e);
-	}, q = (e) => {
 		let t = (0, import_lodash$2.cloneDeep)(u) || [];
 		t.splice(e, 1), f(t);
-	}, J = () => {
-		f(U ? [] : void 0);
-	}, Y = () => {
+	}, K = () => {
+		f(V ? [] : void 0);
+	}, q = () => {
 		let t = {
 			...e,
 			value: u,
 			loading: m,
 			data: h,
-			onSearchChange: K,
-			searchValue: Wt,
+			onSearchChange: W,
+			searchValue: L,
 			sorter: x,
 			onSorterChange: S,
 			sorterOptions: C,
@@ -1358,81 +1584,81 @@ var Loading_module_default = {
 			groups: O,
 			onGroupsChange: k,
 			groupOptions: A,
-			visible: I,
-			onChange: G,
+			visible: N,
+			onChange: U,
 			currentLocales: locales_default[s] || {},
-			showGroup: R,
+			showGroup: F,
 			onShowGroupChange: (e) => {
-				Ut(e), j(e);
+				I(e), j(e);
 			},
-			isMultiple: U
+			isMultiple: V
 		};
-		return !y || !y.currentPage || !y.total ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoList_default, { ...t }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomList_default, { ...t });
-	}, X = (e) => v ? v(e) : _ ? _(e) : e[g], Z = () => {
-		let e = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		return !y || !y.currentPage || !y.total ? /* @__PURE__ */ jsx(AutoList_default, { ...t }) : /* @__PURE__ */ jsx(CustomList_default, { ...t });
+	}, J = (e) => v ? v(e) : _ ? _(e) : e[g], Y = () => {
+		let e = /* @__PURE__ */ jsx("span", {
 			style: { color: "#999" },
 			children: p
 		});
-		return U ? u?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: u.filter((e) => !!(e && e[g])).map((e, t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		return V ? u?.length > 0 ? /* @__PURE__ */ jsx(Fragment$1, { children: u.filter((e) => !!(e && e[g])).map((e, t) => /* @__PURE__ */ jsxs("span", {
 			className: `${index_module_default$1.multipleItem} common-ui-dropdownlist-multiple-item`,
-			children: [X(e), e.disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+			children: [J(e), e.disabled ? null : /* @__PURE__ */ jsx(Icon, {
 				component: CloseOutlined,
 				style: {
 					marginLeft: 4,
 					fontSize: 10
 				},
 				onClick: (e) => {
-					e.stopPropagation(), q(t);
+					e.stopPropagation(), G(t);
 				}
 			})]
-		}, t)) }) : e : u && u[g] ? X(u) : e;
+		}, t)) }) : e : u && u[g] ? J(u) : e;
 	};
 	useEffect(() => {
-		!o && isNaN(Number(a)) && H.current && V(H.current.offsetWidth);
+		!o && isNaN(Number(a)) && B.current && z(B.current.offsetWidth);
 	}, [
 		o,
 		a,
-		H
+		B
 	]);
-	let Q = o || a;
-	isNaN(Number(Q)) ? B && (Q = `${B}px`) : Q = `${Q}px`, R && (Q = `calc(${Q} + ${120 * O.length || 120}px)`);
-	let $ = Z();
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	let Z = o || a;
+	isNaN(Number(Z)) ? R && (Z = `${R}px`) : Z = `${Z}px`, F && (Z = `calc(${Z} + ${120 * O.length || 120}px)`);
+	let cn = Y();
+	return /* @__PURE__ */ jsx("div", {
 		className: `${index_module_default$1.dropdownList} ${t}`,
 		style: { width: a },
-		ref: H,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
-			open: d ? !1 : I,
-			onOpenChange: W,
+		ref: B,
+		children: /* @__PURE__ */ jsx(Popover, {
+			open: d ? !1 : N,
+			onOpenChange: H,
 			placement: r,
-			content: Y(),
+			content: q(),
 			trigger: "click",
 			overlayClassName: `${index_module_default$1.popover} ${n}`,
 			overlayStyle: {
-				width: Q,
+				width: Z,
 				maxHeight: 126 + (y?.pageSize || 10) * 32
 			},
 			autoAdjustOverflow: M,
-			getPopupContainer: N,
-			children: i || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+			getPopupContainer: nn,
+			children: i || /* @__PURE__ */ jsx(Button, {
 				style: { width: "100%" },
 				disabled: d,
 				className: `${index_module_default$1.button} css-var-r0 common-ui-dropdownlist-select ${c ? index_module_default$1.allowClear : ""}`,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: index_module_default$1.content,
 					children: [
-						F && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarsOutlined, { className: index_module_default$1.icon }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						an && /* @__PURE__ */ jsx(BarsOutlined, { className: index_module_default$1.icon }),
+						/* @__PURE__ */ jsx("div", {
 							className: index_module_default$1.label,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: $ })
+							children: /* @__PURE__ */ jsx("span", { children: cn })
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-							component: I ? UpOutlined : DownOutlined,
+						/* @__PURE__ */ jsx(Icon, {
+							component: N ? UpOutlined : DownOutlined,
 							className: index_module_default$1.down
 						}),
-						c && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+						c && /* @__PURE__ */ jsx(Icon, {
 							onClick: (e) => {
-								e.stopPropagation(), J();
+								e.stopPropagation(), K();
 							},
 							theme: "filled",
 							component: CloseCircleOutlined,
@@ -1445,10 +1671,11 @@ var Loading_module_default = {
 	});
 }, index_module_default = {}, IndexPatternSelect_default = (e) => {
 	let { selectedIndexPattern: t, onIndexPatternChange: n, indices: r = [] } = e, [i, a] = useState([]), [o, s] = useState({ type: ["index", "specialIndex"] }), c = useMemo(() => r?.map((e) => ({
-		id: e,
-		title: e,
-		name: e,
-		type: e.startsWith(".") ? "specialIndex" : "index"
+		id: e.name,
+		title: e.name,
+		name: e.name,
+		type: e.name?.startsWith(".") ? "specialIndex" : "index",
+		_source: e
 	})) || [], [r]), l = useMemo(() => [{
 		label: "Type",
 		key: "type",
@@ -1460,7 +1687,7 @@ var Loading_module_default = {
 			value: "specialIndex"
 		}]
 	}], []);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownList_default, {
+	return /* @__PURE__ */ jsx(DropdownList_default, {
 		className: index_module_default.indexPatternSelect,
 		width: 282,
 		value: {
@@ -1474,7 +1701,8 @@ var Loading_module_default = {
 		placeholder: "Please select",
 		rowKey: "id",
 		data: c,
-		renderItem: (e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableOutlined, { className: "mr-4px" }), e.name] }),
+		renderItem: (e) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableOutlined, { className: "mr-4px" }), e.name] }),
+		renderTag: (e) => e._source?.docs ? /* @__PURE__ */ jsx(Tag, { children: e._source.docs }) : null,
 		renderLabel: (e) => e.name,
 		renderEmptyList: () => null,
 		searchKey: "name",
@@ -1488,8 +1716,7 @@ var Loading_module_default = {
 		onFiltersChange: s,
 		filterOptions: l
 	});
-};
-const FilterOptions = class extends Component {
+}, FilterOptionsUI = class extends Component {
 	state = { isPopoverOpen: !1 };
 	togglePopover = () => {
 		this.setState((e) => ({ isPopoverOpen: !e.isPopoverOpen }));
@@ -1498,7 +1725,8 @@ const FilterOptions = class extends Component {
 		this.setState({ isPopoverOpen: !1 });
 	};
 	render() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
+		let e = this.props.i18n?.filter?.all || {};
+		return /* @__PURE__ */ jsx(Popover, {
 			classNames: {
 				container: "!p-0 !overflow-hidden",
 				title: "!p-12px !uppercase !mb-0 !border-b-1px !border-b-solid !border-[var(--ant-color-border)]"
@@ -1508,7 +1736,7 @@ const FilterOptions = class extends Component {
 			onOpenChange: (e) => {
 				this.setState({ isPopoverOpen: e });
 			},
-			content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, {
+			content: /* @__PURE__ */ jsx(Menu, {
 				onClick: () => {},
 				className: "!border-0",
 				classNames: { item: "!m-0 !px-12px !w-full !rounded-0" },
@@ -1516,137 +1744,130 @@ const FilterOptions = class extends Component {
 				items: [
 					{
 						key: "enable",
-						label: "Enable all",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eye, { className: "w-14px h-14px" }),
+						label: e.enable || "Enable all",
+						icon: /* @__PURE__ */ jsx(Eye, { className: "w-14px h-14px" }),
 						onClick: () => {
 							this.closePopover(), this.props.onEnableAll();
 						}
 					},
 					{
 						key: "disable",
-						label: "Disable all",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeOff, { className: "w-14px h-14px" }),
+						label: e.disable || "Disable all",
+						icon: /* @__PURE__ */ jsx(EyeOff, { className: "w-14px h-14px" }),
 						onClick: () => {
 							this.closePopover(), this.props.onDisableAll();
 						}
 					},
-					{
-						key: "pin",
-						label: "Pin all",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pin, { className: "w-14px h-14px" }),
-						onClick: () => {
-							this.closePopover(), this.props.onPinAll();
-						}
-					},
-					{
-						key: "unpin",
-						label: "Unpin all",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinOff, { className: "w-14px h-14px" }),
-						onClick: () => {
-							this.closePopover(), this.props.onUnpinAll();
-						}
-					},
 					{
 						key: "invert_inclusion",
-						label: "Invert inclusion",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SquaresExclude, { className: "w-14px h-14px" }),
+						label: e.invert_inclusion || "Invert inclusion",
+						icon: /* @__PURE__ */ jsx(SquaresExclude, { className: "w-14px h-14px" }),
 						onClick: () => {
 							this.closePopover(), this.props.onToggleAllNegated();
 						}
 					},
 					{
-						key: "invert_enabled_disabled",
-						label: "Invert enabled/disabled",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eye, { className: "w-14px h-14px" }),
+						key: "invert_enable_disable",
+						label: e.invert_enable_disable || "Invert enabled/disabled",
+						icon: /* @__PURE__ */ jsx(Eye, { className: "w-14px h-14px" }),
 						onClick: () => {
 							this.closePopover(), this.props.onToggleAllDisabled();
 						}
 					},
 					{
 						key: "remove_all",
-						label: "Remove all",
-						icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "w-14px h-14px" }),
+						label: e.remove_all || "Remove all",
+						icon: /* @__PURE__ */ jsx(Trash2, { className: "w-14px h-14px" }),
 						onClick: () => {
 							this.closePopover(), this.props.onRemoveAll();
 						}
 					}
 				]
 			}),
-			title: "Change all filters",
+			title: e.title || "Change all filters",
 			trigger: "click",
 			destroyOnHidden: !0,
 			arrow: !1,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListFilter, { className: "w-14px h-14px" }) })
+			children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ListFilter, { className: "w-14px h-14px" }) })
 		});
 	}
 };
+const FilterOptions = (e) => {
+	let { i18n: t } = useContext(GlobalConfigContext);
+	return /* @__PURE__ */ jsx(FilterOptionsUI, {
+		...e,
+		i18n: t
+	});
+};
 function FilterActions(e) {
-	let [t, n] = useState(!1);
-	function r() {
-		let [r] = e.indexPatterns, i = buildEmptyFilter(!0, r && r.id);
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover, {
+	let [n, r] = useState(!1), { i18n: i } = useContext(GlobalConfigContext), a = i?.filter?.item || {};
+	function s() {
+		let [i] = e.indexPatterns, o = buildEmptyFilter(!0, i && i.id);
+		return /* @__PURE__ */ jsx(Popover, {
 			classNames: {
 				container: "!p-0 !overflow-hidden w-400px",
 				title: "!p-12px !mb-0 !border-b-1px !border-b-solid !border-[var(--ant-color-border)]"
 			},
 			placement: "bottom",
-			open: t,
-			onOpenChange: n,
-			content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterEditor, {
-				filter: i,
+			open: n,
+			onOpenChange: r,
+			content: /* @__PURE__ */ jsx(FilterEditor, {
+				filter: o,
 				indexPatterns: e.indexPatterns,
-				onSubmit: a,
-				onCancel: () => n(!1),
+				onSubmit: l,
+				onCancel: () => r(!1),
 				services: e.services,
 				dateRangeFrom: e.dateRangeFrom,
 				dateRangeTo: e.dateRangeTo,
-				timeField: e.timeField
-			}, JSON.stringify(i)),
+				timeField: e.timeField,
+				theme: e.theme,
+				title: a.create || "Add filter"
+			}, JSON.stringify(o)),
 			title: null,
 			trigger: "click",
 			destroyOnHidden: !0,
 			arrow: !1,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CirclePlus, { className: "w-14px h-14px" }) })
+			children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(CirclePlus, { className: "w-14px h-14px" }) })
 		});
 	}
-	function i(t) {
+	function c(t) {
 		e.onFiltersUpdated && e.onFiltersUpdated(t);
 	}
-	function a(t) {
-		n(!1), i([...e.filters, t]);
+	function l(t) {
+		r(!1), c([...e.filters, t]);
 	}
-	function o() {
-		i(e.filters.map(enableFilter));
+	function u() {
+		c(e.filters.map(enableFilter));
 	}
-	function s() {
-		i(e.filters.map(disableFilter));
+	function d() {
+		c(e.filters.map(disableFilter));
 	}
-	function c() {
-		i(e.filters.map(pinFilter));
+	function f() {
+		c(e.filters.map(pinFilter));
 	}
-	function l() {
-		i(e.filters.map(unpinFilter));
+	function h() {
+		c(e.filters.map(unpinFilter));
 	}
-	function u() {
-		i(e.filters.map(toggleFilterNegated));
+	function _() {
+		c(e.filters.map(toggleFilterNegated));
 	}
-	function d() {
-		i(e.filters.map(toggleFilterDisabled));
+	function v() {
+		c(e.filters.map(toggleFilterDisabled));
 	}
-	function f() {
-		i([]);
+	function x() {
+		c([]);
 	}
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Space.Compact, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterOptions, {
-		onEnableAll: o,
-		onDisableAll: s,
-		onPinAll: c,
-		onUnpinAll: l,
-		onToggleAllNegated: u,
-		onToggleAllDisabled: d,
-		onRemoveAll: f
-	}), r()] });
+	return /* @__PURE__ */ jsxs(Space.Compact, { children: [/* @__PURE__ */ jsx(FilterOptions, {
+		onEnableAll: u,
+		onDisableAll: d,
+		onPinAll: f,
+		onUnpinAll: h,
+		onToggleAllNegated: _,
+		onToggleAllDisabled: v,
+		onRemoveAll: x
+	}), s()] });
 }
-var import_lodash = require_lodash(), import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1), import_lodash$1 = require_lodash(), search_bar_default = withKibana(class extends Component {
+var import_lodash = require_lodash(), import_lodash$1 = require_lodash(), search_bar_default = withKibana(class extends Component {
 	static defaultProps = {
 		showQueryBar: !0,
 		showFilterBar: !0,
@@ -1679,8 +1900,8 @@ var import_lodash = require_lodash(), import_classnames = /* @__PURE__ */ __toES
 		showSaveNewQueryModal: !1,
 		currentProps: this.props,
 		query: this.props.query ? { ...this.props.query } : void 0,
-		dateRangeFrom: (0, import_lodash$1.get)(this.props, "dateRangeFrom", "now-15m"),
-		dateRangeTo: (0, import_lodash$1.get)(this.props, "dateRangeTo", "now")
+		dateRangeFrom: (0, import_lodash$1.get)(this.props, "dateRangeFrom", ""),
+		dateRangeTo: (0, import_lodash$1.get)(this.props, "dateRangeTo", "")
 	};
 	isDirty = () => !this.props.showDatePicker && this.state.query && this.props.query ? this.state.query.query !== this.props.query.query : this.state.query && this.props.query && this.state.query.query !== this.props.query.query || this.state.dateRangeFrom !== this.props.dateRangeFrom || this.state.dateRangeTo !== this.props.dateRangeTo;
 	shouldRenderQueryBar() {
@@ -1734,7 +1955,7 @@ var import_lodash = require_lodash(), import_classnames = /* @__PURE__ */ __toES
 	render() {
 		if (!this.props.selectedIndexPattern) return null;
 		let e;
-		this.shouldRenderQueryBar() && (e = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QueryBarTopRow, {
+		this.shouldRenderQueryBar() && (e = /* @__PURE__ */ jsx(QueryBarTopRow, {
 			timeHistory: this.props.timeHistory,
 			query: this.state.query,
 			screenTitle: this.props.screenTitle,
@@ -1759,54 +1980,42 @@ var import_lodash = require_lodash(), import_classnames = /* @__PURE__ */ __toES
 			services: this.props.services,
 			renderTimeField: this.props.renderTimeField,
 			timefilterUpdateHandler: this.props.timefilterUpdateHandler,
-			timeSetting: this.props.timeSetting
+			timeSetting: this.props.timeSetting,
+			locale: this.props.locale
 		}));
 		let t;
-		return this.shouldRenderFilterBar() && (t = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			id: "GlobalFilterGroup",
-			ref: (e) => {
-				this.filterBarWrapperRef = e;
-			},
-			className: (0, import_classnames.default)("globalFilterGroup__wrapper", { "globalFilterGroup__wrapper-isVisible": this.state.isFiltersVisible }),
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				ref: (e) => {
-					this.filterBarRef = e;
-				},
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterBar, {
-					className: "globalFilterGroup__filterBar",
-					filters: this.props.filters,
-					onFiltersUpdated: this.props.onFiltersUpdated,
-					indexPatterns: this.props.indexPatterns,
-					dateRangeFrom: this.state.dateRangeFrom,
-					dateRangeTo: this.state.dateRangeTo,
-					timeField: this.props.timeSetting?.timeField,
-					services: this.props.services
-				})
-			})
-		})), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		return this.shouldRenderFilterBar() && (t = /* @__PURE__ */ jsx(FilterBar, {
+			className: "globalFilterGroup__filterBar",
+			filters: this.props.filters,
+			onFiltersUpdated: this.props.onFiltersUpdated,
+			indexPatterns: this.props.indexPatterns,
+			dateRangeFrom: this.state.dateRangeFrom,
+			dateRangeTo: this.state.dateRangeTo,
+			timeField: this.props.timeSetting?.timeField,
+			services: this.props.services,
+			theme: this.props.theme
+		})), /* @__PURE__ */ jsxs("div", {
 			className: "p-8px",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-8px",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-8px flex-wrap",
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndexPatternSelect_default, {
+					/* @__PURE__ */ jsx(IndexPatternSelect_default, {
 						selectedIndexPattern: this.props.selectedIndexPattern,
 						onIndexPatternChange: this.props.setIndexPattern,
-						indices: this.props.indices
+						indices: this.props.indices,
+						locale: this.props.locale
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterActions, {
-						className: "globalFilterGroup__filterBar",
+					/* @__PURE__ */ jsx(FilterActions, {
 						filters: this.props.filters,
 						onFiltersUpdated: this.props.onFiltersUpdated,
 						indexPatterns: this.props.indexPatterns,
 						dateRangeFrom: this.state.dateRangeFrom,
 						dateRangeTo: this.state.dateRangeTo,
 						timeField: this.props.selectedIndexPattern.timeFieldName,
-						services: this.props.services
+						services: this.props.services,
+						theme: this.props.theme
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "flex-1",
-						children: e
-					})
+					e
 				]
 			}), t]
 		});