@appbaseio/reactivesearch-vue 3.0.0-alpha.7 → 3.0.0-rc

package/dist/@appbaseio/reactivesearch-vue.umd.js

@@ -13397,7 +13397,7 @@
 	}, function (props) {
 	  return "url(" + props.src + ")";
 	});
-	var ListItem = styled('a')(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref) {
+	var ListItem = styled('a')(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n\n\t", "\n"])), function (_ref) {
 	  var theme = _ref.theme;
 	  return theme.colors.backgroundColor ? curriedLighten(0.1, theme.colors.backgroundColor) : '#fff';
 	}, function (_ref2) {
@@ -13418,6 +13418,11 @@
 	  return '100%';
 	}, function (props) {
 	  return props.image ? '10px' : 0;
+	}, function (props) {
+	  if (props.isTreeListItem) {
+	    return 'border-bottom: none; width:max-content; cursor:pointer;     padding: 5px 12px;';
+	  }
+	  return '';
 	});
 
 	var ResultListWrapper = {
@@ -13472,7 +13477,7 @@
 	    colors = _ref$theme$colors === void 0 ? {} : _ref$theme$colors;
 	  return "\n\tborder: 1px solid " + (colors.borderColor || '#ccc') + ";\n";
 	};
-	var Flex = styled('div')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
+	var Flex = styled('div')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
 	  return props.inline ? 'inline-flex' : 'flex';
 	}, function (props) {
 	  return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
@@ -13488,6 +13493,8 @@
 	  return props.justifyContent && "\n\t\t\tjustify-content: " + props.justifyContent + ";\n\t\t";
 	}, function (props) {
 	  return props.alignItems && "\n\t\t\talign-items: " + props.alignItems + ";\n\t\t";
+	}, function (props) {
+	  return props.gap && "\n\t\t\tgap: " + props.gap + ";\n\t\t";
 	}, function (props) {
 	  return props.flex && "\n\t\t\tflex: " + props.flex + ";\n\t\t";
 	}, function (props) {
@@ -20292,6 +20299,14 @@
 	  }
 	  return _extends({}, clonedQuery, extractQuery(props));
 	};
+	var sanitizeObject = function sanitizeObject(obj) {
+	  return JSON.parse(JSON.stringify(obj, function (key, value) {
+	    return (
+	      // eslint-disable-next-line eqeqeq
+	      value === null || value == {} || value === false ? undefined : value
+	    );
+	  }));
+	};
 
 	var updateQuery$2 = lib_5.updateQuery,
 	  setQueryOptions$1 = lib_5.setQueryOptions,
@@ -21140,235 +21155,2065 @@
 	  Vue.component(ListConnected$1.name, ListConnected$1);
 	};
 
-	var _templateObject$m, _templateObject2$7;
-	var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
-	var dark$2 = function dark(_ref) {
-	  var theme = _ref.theme;
-	  return "\n\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\tborder-color: " + (theme.colors ? theme.colors.borderColor : '') + ";\n\tcolor: " + (theme.colors ? theme.colors.textColor : '') + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\t}\n";
-	};
-	var Select = styled('button')(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
-	  return props.small ? small : null;
-	}, function (_ref2) {
-	  var themePreset = _ref2.themePreset;
-	  return themePreset === 'dark' && dark$2;
-	});
-	var Tick = styled('span')(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
-	  var theme = _ref3.theme;
-	  return theme.colors.primaryColor;
+	var reactIs_development = createCommonjsModule(function (module, exports) {
+
+	  {
+	    (function () {
+
+	      // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+	      // nor polyfill, then a plain number is used for performance.
+	      var hasSymbol = typeof Symbol === 'function' && Symbol["for"];
+	      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol["for"]('react.element') : 0xeac7;
+	      var REACT_PORTAL_TYPE = hasSymbol ? Symbol["for"]('react.portal') : 0xeaca;
+	      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol["for"]('react.fragment') : 0xeacb;
+	      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol["for"]('react.strict_mode') : 0xeacc;
+	      var REACT_PROFILER_TYPE = hasSymbol ? Symbol["for"]('react.profiler') : 0xead2;
+	      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol["for"]('react.provider') : 0xeacd;
+	      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol["for"]('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+	      // (unstable) APIs that have been removed. Can we remove the symbols?
+
+	      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol["for"]('react.async_mode') : 0xeacf;
+	      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol["for"]('react.concurrent_mode') : 0xeacf;
+	      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol["for"]('react.forward_ref') : 0xead0;
+	      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol["for"]('react.suspense') : 0xead1;
+	      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol["for"]('react.suspense_list') : 0xead8;
+	      var REACT_MEMO_TYPE = hasSymbol ? Symbol["for"]('react.memo') : 0xead3;
+	      var REACT_LAZY_TYPE = hasSymbol ? Symbol["for"]('react.lazy') : 0xead4;
+	      var REACT_BLOCK_TYPE = hasSymbol ? Symbol["for"]('react.block') : 0xead9;
+	      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol["for"]('react.fundamental') : 0xead5;
+	      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol["for"]('react.responder') : 0xead6;
+	      var REACT_SCOPE_TYPE = hasSymbol ? Symbol["for"]('react.scope') : 0xead7;
+	      function isValidElementType(type) {
+	        return typeof type === 'string' || typeof type === 'function' ||
+	        // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+	        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	      }
+	      function typeOf(object) {
+	        if (typeof object === 'object' && object !== null) {
+	          var $$typeof = object.$$typeof;
+	          switch ($$typeof) {
+	            case REACT_ELEMENT_TYPE:
+	              var type = object.type;
+	              switch (type) {
+	                case REACT_ASYNC_MODE_TYPE:
+	                case REACT_CONCURRENT_MODE_TYPE:
+	                case REACT_FRAGMENT_TYPE:
+	                case REACT_PROFILER_TYPE:
+	                case REACT_STRICT_MODE_TYPE:
+	                case REACT_SUSPENSE_TYPE:
+	                  return type;
+	                default:
+	                  var $$typeofType = type && type.$$typeof;
+	                  switch ($$typeofType) {
+	                    case REACT_CONTEXT_TYPE:
+	                    case REACT_FORWARD_REF_TYPE:
+	                    case REACT_LAZY_TYPE:
+	                    case REACT_MEMO_TYPE:
+	                    case REACT_PROVIDER_TYPE:
+	                      return $$typeofType;
+	                    default:
+	                      return $$typeof;
+	                  }
+	              }
+	            case REACT_PORTAL_TYPE:
+	              return $$typeof;
+	          }
+	        }
+	        return undefined;
+	      } // AsyncMode is deprecated along with isAsyncMode
+
+	      var AsyncMode = REACT_ASYNC_MODE_TYPE;
+	      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+	      var ContextConsumer = REACT_CONTEXT_TYPE;
+	      var ContextProvider = REACT_PROVIDER_TYPE;
+	      var Element = REACT_ELEMENT_TYPE;
+	      var ForwardRef = REACT_FORWARD_REF_TYPE;
+	      var Fragment = REACT_FRAGMENT_TYPE;
+	      var Lazy = REACT_LAZY_TYPE;
+	      var Memo = REACT_MEMO_TYPE;
+	      var Portal = REACT_PORTAL_TYPE;
+	      var Profiler = REACT_PROFILER_TYPE;
+	      var StrictMode = REACT_STRICT_MODE_TYPE;
+	      var Suspense = REACT_SUSPENSE_TYPE;
+	      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+	      function isAsyncMode(object) {
+	        {
+	          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+	          }
+	        }
+	        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+	      }
+	      function isConcurrentMode(object) {
+	        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+	      }
+	      function isContextConsumer(object) {
+	        return typeOf(object) === REACT_CONTEXT_TYPE;
+	      }
+	      function isContextProvider(object) {
+	        return typeOf(object) === REACT_PROVIDER_TYPE;
+	      }
+	      function isElement(object) {
+	        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	      }
+	      function isForwardRef(object) {
+	        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	      }
+	      function isFragment(object) {
+	        return typeOf(object) === REACT_FRAGMENT_TYPE;
+	      }
+	      function isLazy(object) {
+	        return typeOf(object) === REACT_LAZY_TYPE;
+	      }
+	      function isMemo(object) {
+	        return typeOf(object) === REACT_MEMO_TYPE;
+	      }
+	      function isPortal(object) {
+	        return typeOf(object) === REACT_PORTAL_TYPE;
+	      }
+	      function isProfiler(object) {
+	        return typeOf(object) === REACT_PROFILER_TYPE;
+	      }
+	      function isStrictMode(object) {
+	        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	      }
+	      function isSuspense(object) {
+	        return typeOf(object) === REACT_SUSPENSE_TYPE;
+	      }
+	      exports.AsyncMode = AsyncMode;
+	      exports.ConcurrentMode = ConcurrentMode;
+	      exports.ContextConsumer = ContextConsumer;
+	      exports.ContextProvider = ContextProvider;
+	      exports.Element = Element;
+	      exports.ForwardRef = ForwardRef;
+	      exports.Fragment = Fragment;
+	      exports.Lazy = Lazy;
+	      exports.Memo = Memo;
+	      exports.Portal = Portal;
+	      exports.Profiler = Profiler;
+	      exports.StrictMode = StrictMode;
+	      exports.Suspense = Suspense;
+	      exports.isAsyncMode = isAsyncMode;
+	      exports.isConcurrentMode = isConcurrentMode;
+	      exports.isContextConsumer = isContextConsumer;
+	      exports.isContextProvider = isContextProvider;
+	      exports.isElement = isElement;
+	      exports.isForwardRef = isForwardRef;
+	      exports.isFragment = isFragment;
+	      exports.isLazy = isLazy;
+	      exports.isMemo = isMemo;
+	      exports.isPortal = isPortal;
+	      exports.isProfiler = isProfiler;
+	      exports.isStrictMode = isStrictMode;
+	      exports.isSuspense = isSuspense;
+	      exports.isValidElementType = isValidElementType;
+	      exports.typeOf = typeOf;
+	    })();
+	  }
 	});
+	var reactIs_development_1 = reactIs_development.AsyncMode;
+	var reactIs_development_2 = reactIs_development.ConcurrentMode;
+	var reactIs_development_3 = reactIs_development.ContextConsumer;
+	var reactIs_development_4 = reactIs_development.ContextProvider;
+	var reactIs_development_5 = reactIs_development.Element;
+	var reactIs_development_6 = reactIs_development.ForwardRef;
+	var reactIs_development_7 = reactIs_development.Fragment;
+	var reactIs_development_8 = reactIs_development.Lazy;
+	var reactIs_development_9 = reactIs_development.Memo;
+	var reactIs_development_10 = reactIs_development.Portal;
+	var reactIs_development_11 = reactIs_development.Profiler;
+	var reactIs_development_12 = reactIs_development.StrictMode;
+	var reactIs_development_13 = reactIs_development.Suspense;
+	var reactIs_development_14 = reactIs_development.isAsyncMode;
+	var reactIs_development_15 = reactIs_development.isConcurrentMode;
+	var reactIs_development_16 = reactIs_development.isContextConsumer;
+	var reactIs_development_17 = reactIs_development.isContextProvider;
+	var reactIs_development_18 = reactIs_development.isElement;
+	var reactIs_development_19 = reactIs_development.isForwardRef;
+	var reactIs_development_20 = reactIs_development.isFragment;
+	var reactIs_development_21 = reactIs_development.isLazy;
+	var reactIs_development_22 = reactIs_development.isMemo;
+	var reactIs_development_23 = reactIs_development.isPortal;
+	var reactIs_development_24 = reactIs_development.isProfiler;
+	var reactIs_development_25 = reactIs_development.isStrictMode;
+	var reactIs_development_26 = reactIs_development.isSuspense;
+	var reactIs_development_27 = reactIs_development.isValidElementType;
+	var reactIs_development_28 = reactIs_development.typeOf;
+
+	var reactIs = createCommonjsModule(function (module) {
 
-	var _templateObject$n;
-	var open = "\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n";
-	var Chevron = styled('span')(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
-	  return props.open ? open : null;
+	  {
+	    module.exports = reactIs_development;
+	  }
 	});
 
-	var getClassName$6 = lib_8.getClassName;
-	var Dropdown = {
-	  data: function data() {
-	    this.__state = {
-	      isOpen: false,
-	      searchTerm: ''
-	    };
-	    return this.__state;
-	  },
-	  inject: {
-	    theme: {
-	      from: 'theme_reactivesearch'
-	    }
-	  },
-	  props: {
-	    innerClass: types.style,
-	    items: types.data,
-	    keyField: Q.string.def('key'),
-	    labelField: Q.string.def('label'),
-	    multi: Q.bool,
-	    // change event
-	    placeholder: types.string,
-	    returnsObject: Q.bool,
-	    customLabelRenderer: types.func,
-	    hasCustomRenderer: Q.bool,
-	    customRenderer: types.func,
-	    renderItem: types.func,
-	    renderNoResults: Q.any,
-	    handleChange: types.func,
-	    transformData: types.func,
-	    selectedItem: types.selectedValue,
-	    showCount: Q.bool,
-	    single: Q.bool,
-	    small: Q.bool.def(false),
-	    themePreset: types.themePreset,
-	    showSearch: Q.bool,
-	    showClear: Q.bool,
-	    searchPlaceholder: Q.string.def('Type here to search...')
-	  },
-	  render: function render() {
-	    var _this = this;
-	    var _this$$props = this.$props,
-	      items = _this$$props.items,
-	      selectedItem = _this$$props.selectedItem,
-	      placeholder = _this$$props.placeholder,
-	      labelField = _this$$props.labelField,
-	      keyField = _this$$props.keyField,
-	      themePreset = _this$$props.themePreset,
-	      renderItem = _this$$props.renderItem,
-	      transformData = _this$$props.transformData,
-	      footer = _this$$props.footer,
-	      customLabelRenderer = _this$$props.customLabelRenderer,
-	      hasCustomRenderer = _this$$props.hasCustomRenderer,
-	      customRenderer = _this$$props.customRenderer;
-	    var itemsToRender = items;
-	    if (transformData) {
-	      itemsToRender = transformData(itemsToRender);
+	/*
+	object-assign
+	(c) Sindre Sorhus
+	@license MIT
+	*/
+
+	/* eslint-disable no-unused-vars */
+	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+	var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+	function toObject(val) {
+	  if (val === null || val === undefined) {
+	    throw new TypeError('Object.assign cannot be called with null or undefined');
+	  }
+	  return Object(val);
+	}
+	function shouldUseNative() {
+	  try {
+	    if (!Object.assign) {
+	      return false;
 	    }
-	    var filteredItemsToRender = itemsToRender.filter(function (item) {
-	      if (String(item[labelField]).length) {
-	        if (_this.$props.showSearch && _this.$data.searchTerm) {
-	          return suggestions_1(String(item[labelField])).toLowerCase().includes(suggestions_1(_this.$data.searchTerm.toLowerCase()));
-	        }
-	        return true;
-	      }
+
+	    // Detect buggy property enumeration order in older V8 versions.
+
+	    // https://bugs.chromium.org/p/v8/issues/detail?id=4118
+	    var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
+	    test1[5] = 'de';
+	    if (Object.getOwnPropertyNames(test1)[0] === '5') {
 	      return false;
+	    }
+
+	    // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+	    var test2 = {};
+	    for (var i = 0; i < 10; i++) {
+	      test2['_' + String.fromCharCode(i)] = i;
+	    }
+	    var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+	      return test2[n];
 	    });
-	    return vue.createVNode(Downshift, {
-	      "isOpen": this.$data.isOpen,
-	      "selectedItem": selectedItem,
-	      "handleChange": this.onChange,
-	      "handleMouseup": this.handleStateChange
-	    }, {
-	      "default": function _default(_ref) {
-	        var getItemProps = _ref.getItemProps,
-	          isOpen = _ref.isOpen,
-	          highlightedIndex = _ref.highlightedIndex,
-	          getButtonProps = _ref.getButtonProps,
-	          getItemEvents = _ref.getItemEvents,
-	          getInputEvents = _ref.getInputEvents;
-	        return vue.createVNode("div", {
-	          "class": suggestionsContainer
-	        }, [vue.createVNode(Select, vue.mergeProps(babelHelperVueTransformOn(getButtonProps({
-	          onClick: _this.toggle
-	        })), {
-	          "class": getClassName$6(_this.$props.innerClass, 'select') || '',
-	          "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
-	          "small": _this.$props.small,
-	          "themePreset": _this.$props.themePreset
-	        }), {
-	          "default": function _default() {
-	            return [customLabelRenderer ? customLabelRenderer(selectedItem) : vue.createVNode("div", null, [selectedItem ? _this.renderToString(selectedItem) : placeholder]), vue.createVNode(Chevron, {
-	              "open": isOpen
-	            }, null)];
-	          }
-	        }), hasCustomRenderer ? customRenderer(itemsToRender, {
-	          getItemProps: getItemProps,
-	          isOpen: isOpen,
-	          highlightedIndex: highlightedIndex,
-	          getButtonProps: getButtonProps,
-	          getItemEvents: getItemEvents
-	        }) : isOpen && itemsToRender.length ? vue.createVNode("ul", {
-	          "class": suggestions$1(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName$6(_this.$props.innerClass, 'list')
-	        }, [_this.$props.showSearch ? _this.renderSearchbox({
-	          on: {
-	            input: getInputEvents({
-	              onInput: _this.handleInputChange
-	            }).input
-	          }
-	        }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
-	          var selected = _this.$props.multi // MultiDropdownList
-	          && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
-	          || Array.isArray(selectedItem) && selectedItem.find(function (value) {
-	            return value[labelField] === item[labelField];
-	          }));
-	          if (!_this.$props.multi) selected = item.key === selectedItem;
-	          return vue.createVNode("li", vue.mergeProps(getItemProps({
-	            item: item
-	          }), babelHelperVueTransformOn(getItemEvents({
-	            item: item
-	          })), {
-	            "key": item[keyField],
-	            "class": "" + (selected ? 'active' : ''),
-	            "style": {
-	              backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
-	            }
-	          }), [renderItem ? renderItem({
-	            label: item[labelField],
-	            count: item.doc_count,
-	            isChecked: selected && _this.$props.multi
-	          }) : vue.createVNode("div", null, [typeof item[labelField] === 'string' ? vue.createVNode("span", {
-	            "innerHTML": item[labelField]
-	          }, null) : item[labelField], _this.$props.showCount && item.doc_count && vue.createVNode("span", {
-	            "class": getClassName$6(_this.$props.innerClass, 'count') || ''
-	          }, [vue.createTextVNode("\xA0("), item.doc_count, vue.createTextVNode(")")])]), selected && _this.$props.multi ? vue.createVNode(Tick, {
-	            "class": getClassName$6(_this.$props.innerClass, 'icon') || ''
-	          }, null) : null]);
-	        }), footer]) : null]);
-	      }
+	    if (order2.join('') !== '0123456789') {
+	      return false;
+	    }
+
+	    // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+	    var test3 = {};
+	    'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+	      test3[letter] = letter;
 	    });
-	  },
-	  methods: {
-	    toggle: function toggle() {
-	      this.isOpen = !this.$data.isOpen;
-	    },
-	    close: function close() {
-	      this.isOpen = false;
-	    },
-	    onChange: function onChange(item) {
-	      if (this.$props.returnsObject) {
-	        this.$props.handleChange(item);
-	      } else {
-	        this.$props.handleChange(item[this.$props.keyField]);
-	      }
-	      if (!this.$props.multi) {
-	        this.isOpen = false;
-	        this.searchTerm = '';
-	      }
-	    },
-	    handleStateChange: function handleStateChange(_ref2) {
-	      var isOpen = _ref2.isOpen;
-	      this.isOpen = isOpen;
-	    },
-	    getBackgroundColor: function getBackgroundColor(highlighted, selected) {
-	      var isDark = this.$props.themePreset === 'dark';
-	      if (highlighted) {
-	        return isDark ? '#555' : '#eee';
-	      }
-	      if (selected) {
-	        return isDark ? '#686868' : '#fafafa';
-	      }
-	      return isDark ? '#424242' : '#fff';
-	    },
-	    handleInputChange: function handleInputChange(e) {
-	      var value = e.target.value;
-	      this.searchTerm = value;
-	    },
-	    clearSearchTerm: function clearSearchTerm() {
-	      this.searchTerm = '';
-	    },
-	    renderToString: function renderToString(value) {
-	      var _this2 = this;
-	      var customLabelRenderer = this.$props.customLabelRenderer;
-	      if (customLabelRenderer) {
-	        var customLabel = customLabelRenderer(value);
-	        if (typeof customLabel === 'string') {
-	          return customLabel;
-	        }
-	      }
-	      if (Array.isArray(value) && value.length) {
-	        var arrayToRender = value.map(function (item) {
-	          return _this2.renderToString(item);
-	        });
-	        return arrayToRender.join(', ');
+	    if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
+	      return false;
+	    }
+	    return true;
+	  } catch (err) {
+	    // We don't expect any of the above to throw, but better to be safe.
+	    return false;
+	  }
+	}
+	var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+	  var from;
+	  var to = toObject(target);
+	  var symbols;
+	  for (var s = 1; s < arguments.length; s++) {
+	    from = Object(arguments[s]);
+	    for (var key in from) {
+	      if (hasOwnProperty$1.call(from, key)) {
+	        to[key] = from[key];
 	      }
-	      if (value && typeof value === 'object') {
-	        if (value[this.$props.labelField]) {
-	          return value[this.$props.labelField];
-	        }
-	        if (Object.keys(value).length) {
-	          return this.renderToString(Object.keys(value));
+	    }
+	    if (getOwnPropertySymbols) {
+	      symbols = getOwnPropertySymbols(from);
+	      for (var i = 0; i < symbols.length; i++) {
+	        if (propIsEnumerable.call(from, symbols[i])) {
+	          to[symbols[i]] = from[symbols[i]];
 	        }
-	        return this.$props.placeholder;
 	      }
-	      return value;
-	    },
+	    }
+	  }
+	  return to;
+	};
+
+	/**
+	 * Copyright (c) 2013-present, Facebook, Inc.
+	 *
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+
+	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+	var ReactPropTypesSecret_1 = ReactPropTypesSecret;
+
+	var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+	var printWarning = function printWarning() {};
+	{
+	  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+	  var loggedTypeFailures = {};
+	  var has$1 = has;
+	  printWarning = function printWarning(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) {/**/}
+	  };
+	}
+
+	/**
+	 * Assert that the values match with the type specs.
+	 * Error messages are memorized and will only be shown once.
+	 *
+	 * @param {object} typeSpecs Map of name to a ReactPropType
+	 * @param {object} values Runtime values that need to be type-checked
+	 * @param {string} location e.g. "prop", "context", "child context"
+	 * @param {string} componentName Name of the component for error messages.
+	 * @param {?Function} getStack Returns the component stack.
+	 * @private
+	 */
+	function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+	  {
+	    for (var typeSpecName in typeSpecs) {
+	      if (has$1(typeSpecs, typeSpecName)) {
+	        var error;
+	        // Prop type validation may throw. In case they do, we don't want to
+	        // fail the render phase where it didn't fail before. So we log it.
+	        // After these have been cleaned up, we'll let them throw.
+	        try {
+	          // This is intentionally an invariant that gets caught. It's the same
+	          // behavior as without this statement except with a better message.
+	          if (typeof typeSpecs[typeSpecName] !== 'function') {
+	            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+	            err.name = 'Invariant Violation';
+	            throw err;
+	          }
+	          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
+	        } catch (ex) {
+	          error = ex;
+	        }
+	        if (error && !(error instanceof Error)) {
+	          printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
+	        }
+	        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+	          // Only monitor this failure once because there tends to be a lot of the
+	          // same error.
+	          loggedTypeFailures[error.message] = true;
+	          var stack = getStack ? getStack() : '';
+	          printWarning('Failed ' + location + ' type: ' + error.message + (stack != null ? stack : ''));
+	        }
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Resets warning cache when testing.
+	 *
+	 * @private
+	 */
+	checkPropTypes.resetWarningCache = function () {
+	  {
+	    loggedTypeFailures = {};
+	  }
+	};
+	var checkPropTypes_1 = checkPropTypes;
+
+	var printWarning$1 = function printWarning() {};
+	{
+	  printWarning$1 = function printWarning(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) {}
+	  };
+	}
+	function emptyFunctionThatReturnsNull() {
+	  return null;
+	}
+	var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, throwOnDirectAccess) {
+	  /* global Symbol */
+	  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+	  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+	  /**
+	   * Returns the iterator method function contained on the iterable object.
+	   *
+	   * Be sure to invoke the function with the iterable as context:
+	   *
+	   *     var iteratorFn = getIteratorFn(myIterable);
+	   *     if (iteratorFn) {
+	   *       var iterator = iteratorFn.call(myIterable);
+	   *       ...
+	   *     }
+	   *
+	   * @param {?object} maybeIterable
+	   * @return {?function}
+	   */
+	  function getIteratorFn(maybeIterable) {
+	    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+	    if (typeof iteratorFn === 'function') {
+	      return iteratorFn;
+	    }
+	  }
+
+	  /**
+	   * Collection of methods that allow declaration and validation of props that are
+	   * supplied to React components. Example usage:
+	   *
+	   *   var Props = require('ReactPropTypes');
+	   *   var MyArticle = React.createClass({
+	   *     propTypes: {
+	   *       // An optional string prop named "description".
+	   *       description: Props.string,
+	   *
+	   *       // A required enum prop named "category".
+	   *       category: Props.oneOf(['News','Photos']).isRequired,
+	   *
+	   *       // A prop named "dialog" that requires an instance of Dialog.
+	   *       dialog: Props.instanceOf(Dialog).isRequired
+	   *     },
+	   *     render: function() { ... }
+	   *   });
+	   *
+	   * A more formal specification of how these methods are used:
+	   *
+	   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+	   *   decl := ReactPropTypes.{type}(.isRequired)?
+	   *
+	   * Each and every declaration produces a function with the same signature. This
+	   * allows the creation of custom validation functions. For example:
+	   *
+	   *  var MyLink = React.createClass({
+	   *    propTypes: {
+	   *      // An optional string or URI prop named "href".
+	   *      href: function(props, propName, componentName) {
+	   *        var propValue = props[propName];
+	   *        if (propValue != null && typeof propValue !== 'string' &&
+	   *            !(propValue instanceof URI)) {
+	   *          return new Error(
+	   *            'Expected a string or an URI for ' + propName + ' in ' +
+	   *            componentName
+	   *          );
+	   *        }
+	   *      }
+	   *    },
+	   *    render: function() {...}
+	   *  });
+	   *
+	   * @internal
+	   */
+
+	  var ANONYMOUS = '<<anonymous>>';
+
+	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+	  var ReactPropTypes = {
+	    array: createPrimitiveTypeChecker('array'),
+	    bigint: createPrimitiveTypeChecker('bigint'),
+	    bool: createPrimitiveTypeChecker('boolean'),
+	    func: createPrimitiveTypeChecker('function'),
+	    number: createPrimitiveTypeChecker('number'),
+	    object: createPrimitiveTypeChecker('object'),
+	    string: createPrimitiveTypeChecker('string'),
+	    symbol: createPrimitiveTypeChecker('symbol'),
+	    any: createAnyTypeChecker(),
+	    arrayOf: createArrayOfTypeChecker,
+	    element: createElementTypeChecker(),
+	    elementType: createElementTypeTypeChecker(),
+	    instanceOf: createInstanceTypeChecker,
+	    node: createNodeChecker(),
+	    objectOf: createObjectOfTypeChecker,
+	    oneOf: createEnumTypeChecker,
+	    oneOfType: createUnionTypeChecker,
+	    shape: createShapeTypeChecker,
+	    exact: createStrictShapeTypeChecker
+	  };
+
+	  /**
+	   * inlined Object.is polyfill to avoid requiring consumers ship their own
+	   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	   */
+	  /*eslint-disable no-self-compare*/
+	  function is(x, y) {
+	    // SameValue algorithm
+	    if (x === y) {
+	      // Steps 1-5, 7-10
+	      // Steps 6.b-6.e: +0 != -0
+	      return x !== 0 || 1 / x === 1 / y;
+	    } else {
+	      // Step 6.a: NaN == NaN
+	      return x !== x && y !== y;
+	    }
+	  }
+	  /*eslint-enable no-self-compare*/
+
+	  /**
+	   * We use an Error-like object for backward compatibility as people may call
+	   * PropTypes directly and inspect their output. However, we don't use real
+	   * Errors anymore. We don't inspect their stack anyway, and creating them
+	   * is prohibitively expensive if they are created too often, such as what
+	   * happens in oneOfType() for any type before the one that matched.
+	   */
+	  function PropTypeError(message, data) {
+	    this.message = message;
+	    this.data = data && typeof data === 'object' ? data : {};
+	    this.stack = '';
+	  }
+	  // Make `instanceof Error` still work for returned errors.
+	  PropTypeError.prototype = Error.prototype;
+	  function createChainableTypeChecker(validate) {
+	    {
+	      var manualPropTypeCallCache = {};
+	      var manualPropTypeWarningCount = 0;
+	    }
+	    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+	      componentName = componentName || ANONYMOUS;
+	      propFullName = propFullName || propName;
+	      if (secret !== ReactPropTypesSecret_1) {
+	        if (throwOnDirectAccess) {
+	          // New behavior only for users of `prop-types` package
+	          var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use `PropTypes.checkPropTypes()` to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
+	          err.name = 'Invariant Violation';
+	          throw err;
+	        } else if ( typeof console !== 'undefined') {
+	          // Old behavior for people using React.PropTypes
+	          var cacheKey = componentName + ':' + propName;
+	          if (!manualPropTypeCallCache[cacheKey] &&
+	          // Avoid spamming the console because they are often not actionable except for lib authors
+	          manualPropTypeWarningCount < 3) {
+	            printWarning$1('You are manually calling a React.PropTypes validation ' + 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' + 'and will throw in the standalone `prop-types` package. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.');
+	            manualPropTypeCallCache[cacheKey] = true;
+	            manualPropTypeWarningCount++;
+	          }
+	        }
+	      }
+	      if (props[propName] == null) {
+	        if (isRequired) {
+	          if (props[propName] === null) {
+	            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+	          }
+	          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+	        }
+	        return null;
+	      } else {
+	        return validate(props, propName, componentName, location, propFullName);
+	      }
+	    }
+	    var chainedCheckType = checkType.bind(null, false);
+	    chainedCheckType.isRequired = checkType.bind(null, true);
+	    return chainedCheckType;
+	  }
+	  function createPrimitiveTypeChecker(expectedType) {
+	    function validate(props, propName, componentName, location, propFullName, secret) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== expectedType) {
+	        // `propValue` being instance of, say, date/regexp, pass the 'object'
+	        // check, but we can offer a more precise error message here rather than
+	        // 'of type `object`'.
+	        var preciseType = getPreciseType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'), {
+	          expectedType: expectedType
+	        });
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createAnyTypeChecker() {
+	    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+	  }
+	  function createArrayOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+	      }
+	      var propValue = props[propName];
+	      if (!Array.isArray(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+	      }
+	      for (var i = 0; i < propValue.length; i++) {
+	        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
+	        if (error instanceof Error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createElementTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!isValidElement(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createElementTypeTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!reactIs.isValidElementType(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createInstanceTypeChecker(expectedClass) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!(props[propName] instanceof expectedClass)) {
+	        var expectedClassName = expectedClass.name || ANONYMOUS;
+	        var actualClassName = getClassName(props[propName]);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createEnumTypeChecker(expectedValues) {
+	    if (!Array.isArray(expectedValues)) {
+	      {
+	        if (arguments.length > 1) {
+	          printWarning$1('Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' + 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).');
+	        } else {
+	          printWarning$1('Invalid argument supplied to oneOf, expected an array.');
+	        }
+	      }
+	      return emptyFunctionThatReturnsNull;
+	    }
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      for (var i = 0; i < expectedValues.length; i++) {
+	        if (is(propValue, expectedValues[i])) {
+	          return null;
+	        }
+	      }
+	      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+	        var type = getPreciseType(value);
+	        if (type === 'symbol') {
+	          return String(value);
+	        }
+	        return value;
+	      });
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createObjectOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+	      }
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+	      }
+	      for (var key in propValue) {
+	        if (has(propValue, key)) {
+	          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+	          if (error instanceof Error) {
+	            return error;
+	          }
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createUnionTypeChecker(arrayOfTypeCheckers) {
+	    if (!Array.isArray(arrayOfTypeCheckers)) {
+	       printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') ;
+	      return emptyFunctionThatReturnsNull;
+	    }
+	    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	      var checker = arrayOfTypeCheckers[i];
+	      if (typeof checker !== 'function') {
+	        printWarning$1('Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.');
+	        return emptyFunctionThatReturnsNull;
+	      }
+	    }
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var expectedTypes = [];
+	      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	        var checker = arrayOfTypeCheckers[i];
+	        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1);
+	        if (checkerResult == null) {
+	          return null;
+	        }
+	        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+	          expectedTypes.push(checkerResult.data.expectedType);
+	        }
+	      }
+	      var expectedTypesMessage = expectedTypes.length > 0 ? ', expected one of type [' + expectedTypes.join(', ') + ']' : '';
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createNodeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!isNode(props[propName])) {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function invalidValidatorError(componentName, location, propFullName, key, type) {
+	    return new PropTypeError((componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + type + '`.');
+	  }
+	  function createShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      for (var key in shapeTypes) {
+	        var checker = shapeTypes[key];
+	        if (typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function createStrictShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      // We need to check all keys in case some are required but missing from props.
+	      var allKeys = objectAssign({}, props[propName], shapeTypes);
+	      for (var key in allKeys) {
+	        var checker = shapeTypes[key];
+	        if (has(shapeTypes, key) && typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        if (!checker) {
+	          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + '\nBad object: ' + JSON.stringify(props[propName], null, '  ') + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  '));
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+	  function isNode(propValue) {
+	    switch (typeof propValue) {
+	      case 'number':
+	      case 'string':
+	      case 'undefined':
+	        return true;
+	      case 'boolean':
+	        return !propValue;
+	      case 'object':
+	        if (Array.isArray(propValue)) {
+	          return propValue.every(isNode);
+	        }
+	        if (propValue === null || isValidElement(propValue)) {
+	          return true;
+	        }
+	        var iteratorFn = getIteratorFn(propValue);
+	        if (iteratorFn) {
+	          var iterator = iteratorFn.call(propValue);
+	          var step;
+	          if (iteratorFn !== propValue.entries) {
+	            while (!(step = iterator.next()).done) {
+	              if (!isNode(step.value)) {
+	                return false;
+	              }
+	            }
+	          } else {
+	            // Iterator will provide entry [k,v] tuples rather than values.
+	            while (!(step = iterator.next()).done) {
+	              var entry = step.value;
+	              if (entry) {
+	                if (!isNode(entry[1])) {
+	                  return false;
+	                }
+	              }
+	            }
+	          }
+	        } else {
+	          return false;
+	        }
+	        return true;
+	      default:
+	        return false;
+	    }
+	  }
+	  function isSymbol(propType, propValue) {
+	    // Native Symbol.
+	    if (propType === 'symbol') {
+	      return true;
+	    }
+
+	    // falsy value can't be a Symbol
+	    if (!propValue) {
+	      return false;
+	    }
+
+	    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+	    if (propValue['@@toStringTag'] === 'Symbol') {
+	      return true;
+	    }
+
+	    // Fallback for non-spec compliant Symbols which are polyfilled.
+	    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+	      return true;
+	    }
+	    return false;
+	  }
+
+	  // Equivalent of `typeof` but with special handling for array and regexp.
+	  function getPropType(propValue) {
+	    var propType = typeof propValue;
+	    if (Array.isArray(propValue)) {
+	      return 'array';
+	    }
+	    if (propValue instanceof RegExp) {
+	      // Old webkits (at least until Android 4.0) return 'function' rather than
+	      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+	      // passes PropTypes.object.
+	      return 'object';
+	    }
+	    if (isSymbol(propType, propValue)) {
+	      return 'symbol';
+	    }
+	    return propType;
+	  }
+
+	  // This handles more types than `getPropType`. Only used for error messages.
+	  // See `createPrimitiveTypeChecker`.
+	  function getPreciseType(propValue) {
+	    if (typeof propValue === 'undefined' || propValue === null) {
+	      return '' + propValue;
+	    }
+	    var propType = getPropType(propValue);
+	    if (propType === 'object') {
+	      if (propValue instanceof Date) {
+	        return 'date';
+	      } else if (propValue instanceof RegExp) {
+	        return 'regexp';
+	      }
+	    }
+	    return propType;
+	  }
+
+	  // Returns a string that is postfixed to a warning about an invalid type.
+	  // For example, "undefined" or "of type array"
+	  function getPostfixForTypeWarning(value) {
+	    var type = getPreciseType(value);
+	    switch (type) {
+	      case 'array':
+	      case 'object':
+	        return 'an ' + type;
+	      case 'boolean':
+	      case 'date':
+	      case 'regexp':
+	        return 'a ' + type;
+	      default:
+	        return type;
+	    }
+	  }
+
+	  // Returns class name of the object, if any.
+	  function getClassName(propValue) {
+	    if (!propValue.constructor || !propValue.constructor.name) {
+	      return ANONYMOUS;
+	    }
+	    return propValue.constructor.name;
+	  }
+	  ReactPropTypes.checkPropTypes = checkPropTypes_1;
+	  ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+	  return ReactPropTypes;
+	};
+
+	var propTypes = createCommonjsModule(function (module) {
+	  /**
+	   * Copyright (c) 2013-present, Facebook, Inc.
+	   *
+	   * This source code is licensed under the MIT license found in the
+	   * LICENSE file in the root directory of this source tree.
+	   */
+
+	  {
+	    var ReactIs = reactIs;
+
+	    // By explicitly using `prop-types` you are opting into new development behavior.
+	    // http://fb.me/prop-types-in-prod
+	    var throwOnDirectAccess = true;
+	    module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
+	  }
+	});
+
+	var types_1 = createCommonjsModule(function (module, exports) {
+	  Object.defineProperty(exports, "__esModule", {
+	    value: true
+	  });
+	  var _dateFormats2 = _interopRequireDefault(dateFormats_1);
+	  function _interopRequireDefault(obj) {
+	    return obj && obj.__esModule ? obj : {
+	      "default": obj
+	    };
+	  }
+	  var reactKeyType = (0, propTypes.oneOfType)([propTypes.string, (0, propTypes.arrayOf)(propTypes.string), propTypes.object, (0, propTypes.arrayOf)(propTypes.object)]);
+	  function validateLocation(props, propName) {
+	    if (isNaN(props[propName])) {
+	      return new Error(propName + ' value must be a number');
+	    }
+	    if (propName === 'lat' && (props[propName] < -90 || props[propName] > 90)) {
+	      return new Error(propName + ' value should be between -90 and 90.');
+	    } else if (propName === 'lng' && (props[propName] < -180 || props[propName] > 180)) {
+	      return new Error(propName + ' value should be between -180 and 180.');
+	    }
+	    return null;
+	  }
+	  var dataFieldValidator = function dataFieldValidator(props, propName, componentName) {
+	    var requiredError = new Error(propName + ' supplied to ' + componentName + ' is required. Validation failed.');
+	    var propValue = props[propName];
+	    if (!propValue) return requiredError;
+	    if (typeof propValue !== 'string' && typeof propValue !== 'object' && !Array.isArray(propValue)) {
+	      return new Error('Invalid ' + propName + ' supplied to ' + componentName + '. Validation failed.');
+	    }
+	    if (Array.isArray(propValue) && propValue.length === 0) return requiredError;
+	  };
+	  var types = {
+	    any: propTypes.any,
+	    analyticsConfig: (0, propTypes.shape)({
+	      emptyQuery: propTypes.bool,
+	      suggestionAnalytics: propTypes.bool,
+	      userId: propTypes.string,
+	      customEvents: propTypes.object
+	    }),
+	    appbaseConfig: (0, propTypes.shape)({
+	      enableQueryRules: propTypes.bool,
+	      enableSearchRelevancy: propTypes.bool,
+	      recordAnalytics: propTypes.bool,
+	      emptyQuery: propTypes.bool,
+	      suggestionAnalytics: propTypes.bool,
+	      userId: propTypes.string,
+	      useCache: propTypes.bool,
+	      customEvents: propTypes.object,
+	      enableTelemetry: propTypes.bool,
+	      queryString: propTypes.object
+	    }),
+	    bool: propTypes.bool,
+	    boolRequired: propTypes.bool.isRequired,
+	    components: (0, propTypes.arrayOf)(propTypes.string),
+	    children: propTypes.any,
+	    data: (0, propTypes.arrayOf)(propTypes.object),
+	    dataFieldArray: (0, propTypes.oneOfType)([propTypes.string, (0, propTypes.arrayOf)(propTypes.string)]).isRequired,
+	    dataNumberBox: (0, propTypes.shape)({
+	      label: propTypes.string,
+	      start: propTypes.number.isRequired,
+	      end: propTypes.number.isRequired
+	    }).isRequired,
+	    date: (0, propTypes.oneOfType)([propTypes.string, (0, propTypes.arrayOf)(propTypes.string)]),
+	    dateObject: propTypes.object,
+	    excludeFields: (0, propTypes.arrayOf)(propTypes.string),
+	    fieldWeights: (0, propTypes.arrayOf)(propTypes.number),
+	    filterLabel: propTypes.string,
+	    func: propTypes.func,
+	    funcRequired: propTypes.func.isRequired,
+	    fuzziness: (0, propTypes.oneOf)([0, 1, 2, 'AUTO']),
+	    headers: propTypes.object,
+	    hits: (0, propTypes.arrayOf)(propTypes.object),
+	    rawData: propTypes.object,
+	    iconPosition: (0, propTypes.oneOf)(['left', 'right']),
+	    includeFields: (0, propTypes.arrayOf)(propTypes.string),
+	    labelPosition: (0, propTypes.oneOf)(['left', 'right', 'top', 'bottom']),
+	    number: propTypes.number,
+	    options: (0, propTypes.oneOfType)([(0, propTypes.arrayOf)(propTypes.object), propTypes.object]),
+	    paginationAt: (0, propTypes.oneOf)(['top', 'bottom', 'both']),
+	    range: (0, propTypes.shape)({
+	      start: (0, propTypes.oneOfType)([propTypes.number, propTypes.string, propTypes.object]).isRequired,
+	      end: (0, propTypes.oneOfType)([propTypes.number, propTypes.string, propTypes.object]).isRequired
+	    }),
+	    rangeLabels: (0, propTypes.shape)({
+	      start: propTypes.string.isRequired,
+	      end: propTypes.string.isRequired
+	    }),
+	    react: (0, propTypes.shape)({
+	      and: reactKeyType,
+	      or: reactKeyType,
+	      not: reactKeyType
+	    }),
+	    categorySearchValue: (0, propTypes.shape)({
+	      term: propTypes.string,
+	      category: propTypes.string
+	    }),
+	    selectedValues: propTypes.object,
+	    selectedValue: (0, propTypes.oneOfType)([propTypes.string, (0, propTypes.arrayOf)(propTypes.string), (0, propTypes.arrayOf)(propTypes.object), propTypes.object, propTypes.number, (0, propTypes.arrayOf)(propTypes.number)]),
+	    suggestions: (0, propTypes.arrayOf)(propTypes.object),
+	    supportedOrientations: (0, propTypes.oneOf)(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']),
+	    tooltipTrigger: (0, propTypes.oneOf)(['hover', 'none', 'focus', 'always']),
+	    sortBy: (0, propTypes.oneOf)(['asc', 'desc']),
+	    sortOptions: (0, propTypes.arrayOf)((0, propTypes.shape)({
+	      label: propTypes.string,
+	      dataField: propTypes.string,
+	      sortBy: propTypes.string
+	    })),
+	    sortByWithCount: (0, propTypes.oneOf)(['asc', 'desc', 'count']),
+	    stats: (0, propTypes.arrayOf)(propTypes.object),
+	    string: propTypes.string,
+	    stringArray: (0, propTypes.arrayOf)(propTypes.string),
+	    stringOrArray: (0, propTypes.oneOfType)([propTypes.string, (0, propTypes.arrayOf)(propTypes.string)]),
+	    stringRequired: propTypes.string.isRequired,
+	    style: propTypes.object,
+	    themePreset: (0, propTypes.oneOf)(['light', 'dark']),
+	    queryFormatDate: (0, propTypes.oneOf)(Object.keys(_dateFormats2["default"])),
+	    queryFormatSearch: (0, propTypes.oneOf)(['and', 'or']),
+	    queryFormatNumberBox: (0, propTypes.oneOf)(['exact', 'lte', 'gte']),
+	    params: propTypes.object.isRequired,
+	    props: propTypes.object,
+	    rangeLabelsAlign: (0, propTypes.oneOf)(['left', 'right']),
+	    title: (0, propTypes.oneOfType)([propTypes.string, propTypes.any]),
+	    location: (0, propTypes.shape)({
+	      lat: validateLocation,
+	      lng: validateLocation
+	    }),
+	    unit: (0, propTypes.oneOf)(['mi', 'miles', 'yd', 'yards', 'ft', 'feet', 'in', 'inch', 'km', 'kilometers', 'm', 'meters', 'cm', 'centimeters', 'mm', 'millimeters', 'NM', 'nmi', 'nauticalmiles']),
+	    aggregationData: propTypes.array,
+	    showClearAll: (0, propTypes.oneOf)([constants$1.CLEAR_ALL.NEVER, constants$1.CLEAR_ALL.ALWAYS, constants$1.CLEAR_ALL.DEFAULT, true, false]),
+	    componentType: (0, propTypes.oneOf)(Object.values(constants$1.componentTypes)),
+	    componentObject: propTypes.object,
+	    dataFieldValidator: dataFieldValidator,
+	    focusShortcuts: (0, propTypes.oneOfType)([(0, propTypes.arrayOf)(propTypes.string), (0, propTypes.arrayOf)(propTypes.number)]),
+	    mongodb: (0, propTypes.shape)({
+	      db: propTypes.string,
+	      collection: propTypes.string
+	    }),
+	    calendarInterval: (0, propTypes.oneOf)(['month', 'day', 'year', 'week', 'quarter', 'hour', 'minute']),
+	    preferences: propTypes.object,
+	    endpoint: (0, propTypes.shape)({
+	      url: propTypes.string.isRequired,
+	      method: propTypes.string,
+	      headers: propTypes.object,
+	      body: propTypes.object
+	    })
+	  };
+	  exports["default"] = types;
+	});
+	var types$1 = unwrapExports(types_1);
+
+	var _templateObject$m, _templateObject2$7;
+	var HierarchicalMenuList = styled('ul')(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+	var HierarchicalMenuListItem = styled('li')(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
+	  return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
+	});
+
+	var HierarchicalMenuListItemComponent = {
+	  name: 'HierarchicalMenuListItemComponent',
+	  data: function data() {
+	    return {
+	      isExpanded: false,
+	      newParentPath: ''
+	    };
+	  },
+	  created: function created() {
+	    var listItemLabel = this.listItem.key;
+	    var newParentPath = listItemLabel;
+	    if (this.parentPath) {
+	      newParentPath = "" + this.parentPath + constants_6$1 + listItemLabel;
+	    }
+	    this.newParentPath = newParentPath;
+	    this.isExpanded = !!helper_6(this.selectedValues, newParentPath, constants_6$1);
+	  },
+	  watch: {
+	    listItem: function listItem(newVal) {
+	      if (newVal.initiallyExpanded) {
+	        this.isExpanded = newVal.initiallyExpanded;
+	      }
+	    },
+	    selectedValues: function selectedValues(newVal) {
+	      this.isExpanded = !!helper_6(newVal, this.newParentPath, constants_6$1);
+	    }
+	  },
+	  props: {
+	    parentPath: types$1.string,
+	    selectedValues: types$1.rawData,
+	    mode: types$1.string,
+	    searchTerm: types$1.string,
+	    listItem: types$1.rawData,
+	    showLine: types$1.bool,
+	    renderItem: types$1.func,
+	    handleListItemClick: types$1.func,
+	    renderSwitcherIcon: types$1.func,
+	    showCheckbox: Q.bool,
+	    innerClass: types$1.style,
+	    showRadio: Q.bool,
+	    renderIcon: types$1.func,
+	    showCount: Q.bool,
+	    showSwitcherIcon: types$1.bool,
+	    switcherIcon: types$1.children
+	  },
+	  render: function render() {
+	    var _this = this;
+	    var _this$$props = this.$props,
+	      selectedValues = _this$$props.selectedValues,
+	      mode = _this$$props.mode,
+	      searchTerm = _this$$props.searchTerm,
+	      listItem = _this$$props.listItem,
+	      parentPath = _this$$props.parentPath,
+	      showLine = _this$$props.showLine,
+	      renderItem = _this$$props.renderItem,
+	      handleListItemClick = _this$$props.handleListItemClick,
+	      showCheckbox = _this$$props.showCheckbox,
+	      innerClass = _this$$props.innerClass,
+	      showRadio = _this$$props.showRadio,
+	      renderIcon = _this$$props.renderIcon,
+	      showCount = _this$$props.showCount,
+	      showSwitcherIcon = _this$$props.showSwitcherIcon;
+	    if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
+	      return null;
+	    }
+	    var listItemLabel = listItem.key;
+	    var listItemCount = listItem.count;
+	    var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
+	    var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
+	      if (showSwitcherIcon === false) {
+	        return null;
+	      }
+	      var switcherIcon = _this.$props.switcherIcon;
+	      if (switcherIcon) return switcherIcon(isExpandedProp);
+	      return (
+	        /* eslint-disable jsx-a11y/click-events-have-key-events
+	        , jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
+	        vue.createVNode("span", {
+	          "tabIndex": "0",
+	          "onClick": function onClick(e) {
+	            e.stopPropagation();
+	            _this.isExpanded = !_this.isExpanded;
+	          },
+	          "class": "--switcher-icon"
+	        }, [vue.createTextVNode("\u27A4")])
+	      );
+	    };
+	    var isSelected = false;
+	    if (mode === 'single') {
+	      if (helper_6(selectedValues, this.newParentPath, constants_6$1) === true) {
+	        isSelected = true;
+	      }
+	    } else {
+	      isSelected = !!helper_6(selectedValues, this.newParentPath, constants_6$1);
+	    }
+	    return vue.createVNode(HierarchicalMenuListItem, {
+	      "class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
+	      "key": this.newParentPath,
+	      "showLine": showLine
+	    }, {
+	      "default": function _default() {
+	        return [vue.createVNode(ListItem, {
+	          "isTreeListItem": true,
+	          "onClick": function onClick() {
+	            handleListItemClick(listItemLabel, parentPath);
+	          },
+	          "style": {
+	            textDecoration: 'none'
+	          }
+	        }, {
+	          "default": function _default() {
+	            return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : vue.createVNode(Flex, {
+	              "alignItems": "center",
+	              "gap": "5px"
+	            }, {
+	              "default": function _default() {
+	                return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && vue.createVNode(Flex, {
+	                  "alignItems": "center",
+	                  "gap": "5px"
+	                }, {
+	                  "default": function _default() {
+	                    return [vue.createVNode(Checkbox, {
+	                      "type": "checkbox",
+	                      "class": helper_28(innerClass, 'checkbox') || null,
+	                      "checked": isSelected,
+	                      "id": listItemLabel + "-checkbox-" + _this.newParentPath,
+	                      "name": listItemLabel + "-checkbox-" + _this.newParentPath,
+	                      "show": true,
+	                      "readOnly": true
+	                    }, null), vue.createVNode("label", {
+	                      "style": {
+	                        width: '26px',
+	                        marginTop: 0,
+	                        marginBottom: 0,
+	                        marginRight: '-9px',
+	                        left: '-3px'
+	                      },
+	                      "htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
+	                      "onClick": function onClick(e) {
+	                        e.stopPropagation();
+	                      }
+	                    }, null)];
+	                  }
+	                }), mode === 'single' && showRadio && vue.createVNode(Flex, {
+	                  "alignItems": "center",
+	                  "gap": "5px"
+	                }, {
+	                  "default": function _default() {
+	                    return [vue.createVNode(Radio, {
+	                      "checked": isSelected,
+	                      "class": helper_28(innerClass, 'radio') || null,
+	                      "id": listItemLabel + "-radio-" + _this.newParentPath,
+	                      "name": listItemLabel + "-radio-" + _this.newParentPath,
+	                      "show": true,
+	                      "readOnly": true,
+	                      "type": "radio"
+	                    }, null), vue.createVNode("label", {
+	                      "style": {
+	                        width: '26px',
+	                        marginTop: 0,
+	                        marginBottom: 0,
+	                        marginRight: '-9px',
+	                        left: '-3px'
+	                      },
+	                      "htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
+	                      "onClick": function onClick(e) {
+	                        e.stopPropagation();
+	                      }
+	                    }, null)];
+	                  }
+	                }), ' ', renderIcon(isLeafNode), vue.createVNode("div", {
+	                  "class": "--list-item-label-count-wrapper"
+	                }, [vue.createVNode("span", {
+	                  "class": "--list-item-label " + (helper_28(innerClass, 'label') || '')
+	                }, [listItemLabel]), showCount && vue.createVNode("span", {
+	                  "class": "--list-item-count " + (helper_28(innerClass, 'count') || '')
+	                }, [listItemCount])])];
+	              }
+	            })];
+	          }
+	        }), isLeafNode === false && vue.createVNode("div", {
+	          "class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
+	        }, [vue.createVNode(HierarchicalMenuComponent, {
+	          "key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
+	          "listArray": listItem.list,
+	          "parentPath": _this.newParentPath,
+	          "isExpanded": _this.isExpanded,
+	          "listItemProps": {
+	            mode: mode,
+	            selectedValues: selectedValues,
+	            searchTerm: searchTerm,
+	            showLine: showLine,
+	            renderItem: renderItem,
+	            handleListItemClick: handleListItemClick,
+	            renderSwitcherIcon: renderSwitcherIcon,
+	            showCheckbox: showCheckbox,
+	            innerClass: innerClass,
+	            showRadio: showRadio,
+	            renderIcon: renderIcon,
+	            showCount: showCount,
+	            showSwitcherIcon: showSwitcherIcon,
+	            switcherIcon: _this.$props.switcherIcon
+	          }
+	        }, null)])];
+	      }
+	    });
+	  }
+	};
+
+	function _isSlot$6(s) {
+	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+	}
+	var HierarchicalMenuComponent = {
+	  name: 'HierarchicalMenuComponent',
+	  props: {
+	    listArray: Q.arrayOf(Q.object),
+	    // array of objects
+	    parentPath: Q.string.def(''),
+	    isExpanded: Q.bool.def(false),
+	    listItemProps: types$1.rawData
+	  },
+	  render: function render() {
+	    var _slot;
+	    var _this$$props = this.$props,
+	      listArray = _this$$props.listArray,
+	      isExpanded = _this$$props.isExpanded,
+	      parentPath = _this$$props.parentPath,
+	      listItemProps = _this$$props.listItemProps;
+	    if (!Array.isArray(listArray) || listArray.length === 0) {
+	      return null;
+	    }
+	    return vue.createVNode(HierarchicalMenuList, {
+	      "class": "" + (isExpanded ? '--open' : ''),
+	      "isSelected": isExpanded
+	    }, _isSlot$6(_slot = listArray.map(function (listItem) {
+	      return vue.createVNode(HierarchicalMenuListItemComponent, vue.mergeProps({
+	        "key": parentPath + "__" + JSON.stringify(listItem),
+	        "parentPath": parentPath,
+	        "listItem": listItem
+	      }, listItemProps), null);
+	    })) ? _slot : {
+	      "default": function _default() {
+	        return [_slot];
+	      }
+	    });
+	  }
+	};
+
+	function _isSlot$7(s) {
+	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+	}
+	var updateQueryAction = lib_5.updateQuery,
+	  setQueryOptions$3 = lib_5.setQueryOptions;
+	var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
+	  var valueToSet = {};
+	  if (valueArray.length) {
+	    var newSelectedValues = {};
+	    valueArray.forEach(function (valueItem) {
+	      helper_48(newSelectedValues, valueItem.split(' > '), !helper_6(newSelectedValues, valueItem.split(' > '), constants_6$1), true);
+	    });
+	    valueToSet = newSelectedValues;
+	  }
+	  return valueToSet;
+	};
+	var TreeList = {
+	  name: 'TreeList',
+	  props: {
+	    selectedValue: types.selectedValue,
+	    error: types.title,
+	    rawData: types.rawData,
+	    aggregationData: types.rawData,
+	    themePreset: types.themePreset,
+	    updateQueryAction: types.funcRequired,
+	    setQueryOptions: types.funcRequired,
+	    // component props
+	    componentId: types.string.isRequired,
+	    className: types.string,
+	    style: types.style,
+	    showRadio: Q.bool.def(false),
+	    showCheckbox: types.bool.def(false),
+	    mode: Q.oneOf(['single', 'multiple']).def('multiple'),
+	    showCount: Q.bool.def(false),
+	    showSearch: Q.bool.def(false),
+	    showIcon: Q.bool.def(false),
+	    icon: types.children,
+	    showLeafIcon: Q.bool.def(false),
+	    leafIcon: types.children,
+	    showLine: Q.bool.def(false),
+	    switcherIcon: types.func,
+	    render: types.func,
+	    renderItem: types.func,
+	    innerClass: types.style,
+	    placeholder: types.string,
+	    title: types.title,
+	    isLoading: types.bool,
+	    dataField: types.stringArray.isRequired,
+	    onQueryChange: types.func,
+	    defaultValue: types.stringArray,
+	    value: types.stringArray,
+	    customQuery: types.func,
+	    defaultQuery: types.func,
+	    enableAppbase: types.bool,
+	    index: types.string,
+	    showFilter: types.bool,
+	    URLParams: types.bool,
+	    filterLabel: types.string,
+	    onChange: types.func,
+	    onValueChange: types.func,
+	    beforeValueChange: types.func,
+	    sortBy: types.sortByWithCount.def('count'),
+	    onError: types.func,
+	    showSwitcherIcon: types.bool.def(true),
+	    renderError: types.title,
+	    renderNoResults: types.func,
+	    loader: types.title,
+	    aggergationSize: types.number,
+	    endpoint: types.endpoint,
+	    queryFormat: types.queryFormatSearch.def('or'),
+	    size: types.number.def(100),
+	    nestedField: types.string,
+	    react: types.react,
+	    transformData: types.func,
+	    selectAllLabel: types.string,
+	    showMissing: Q.bool.def(false),
+	    missingLabel: Q.string.def('N/A')
+	  },
+	  data: function data() {
+	    var props = this.$props;
+	    this.__state = {
+	      selectedValues: {},
+	      searchTerm: '',
+	      aggregationData: []
+	    };
+	    this.internalComponent = props.componentId + "__internal";
+	    return this.__state;
+	  },
+	  created: function created() {
+	    var props = this.$props;
+	    var componentId = props.componentId;
+	    var defaultValue = this.defaultValue || this.value;
+	    var currentValueArray = this.selectedValue || defaultValue || [];
+	    // update local state for selected values
+	    if (currentValueArray.length) {
+	      var newSelectedValues = transformValueIntoLocalState(currentValueArray);
+	      this.setValue(newSelectedValues, true);
+	    }
+
+	    // Set custom and default queries in store
+	    helper_32(componentId, props, currentValueArray);
+	    helper_31(componentId, props, currentValueArray);
+	    this.updateQueryOptions();
+	  },
+	  mounted: function mounted() {
+	    var _this$$props = this.$props,
+	      enableAppbase = _this$$props.enableAppbase,
+	      index = _this$$props.index;
+	    if (!enableAppbase && index) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+	  },
+	  watch: {
+	    defaultQuery: function defaultQuery() {
+	      this.updateDefaultQuery();
+	      this.updateQuery([]);
+	    },
+	    customQuery: function customQuery() {
+	      var valueArray = helper_4(this.$data.selectedValues) || [];
+	      this.updateQuery(valueArray);
+	    },
+	    sortBy: function sortBy() {
+	      this.updateQueryOptions();
+	    },
+	    dataField: function dataField() {
+	      var valueArray = helper_4(this.$data.selectedValues) || [];
+	      this.updateQueryOptions();
+	      this.updateQuery(valueArray);
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!helper_33(newVal, oldVal)) {
+	        this.setValue(newVal);
+	      }
+	    },
+	    selectedValue: function selectedValue(newVal) {
+	      if (!helper_33(helper_4(this.$data.selectedValues), newVal)) {
+	        var _this$$props2 = this.$props,
+	          value = _this$$props2.value,
+	          onChange = _this$$props2.onChange;
+	        var valueToSet = [];
+	        if (Array.isArray(newVal) && newVal.length) {
+	          valueToSet = newVal;
+	        }
+	        if (value === undefined) {
+	          this.setValue(valueToSet);
+	        } else if (onChange && !helper_33(value, valueToSet)) {
+	          onChange(valueToSet);
+	        }
+	      }
+	    },
+	    aggregationData: function aggregationData(newVal, oldVal) {
+	      if (newVal && !helper_33(newVal, oldVal)) {
+	        this.$data.aggregationData = newVal;
+	      }
+	    }
+	  },
+	  computed: {
+	    hasCustomRenderer: function hasCustomRenderer$1() {
+	      return hasCustomRenderer(this);
+	    }
+	  },
+	  methods: {
+	    renderIcon: function renderIcon(isLeafNode) {
+	      var _this$$props3 = this.$props,
+	        showIcon = _this$$props3.showIcon,
+	        showLeafIcon = _this$$props3.showLeafIcon,
+	        icon = _this$$props3.icon;
+	      if (isLeafNode) {
+	        if (!showLeafIcon) return null;
+	        var _ref = this.$slots || this.$props,
+	          leafIcon = _ref.leafIcon;
+	        if (leafIcon) return leafIcon();
+	        return vue.createVNode("span", {
+	          "role": "img",
+	          "aria-label": "file",
+	          "class": "--leaf-icon"
+	        }, [vue.createVNode("svg", {
+	          "viewBox": "64 64 896 896",
+	          "focusable": "false",
+	          "data-icon": "file",
+	          "width": "1em",
+	          "height": "1em",
+	          "fill": "currentColor",
+	          "aria-hidden": "true"
+	        }, [vue.createVNode("path", {
+	          "d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
+	        }, null)])]);
+	      }
+	      if (!showIcon) return null;
+	      if (icon) {
+	        return icon;
+	      }
+	      if (this.$slots.icon) {
+	        return this.$slots.icon();
+	      }
+	      return vue.createVNode("span", {
+	        "role": "img",
+	        "aria-label": "folder-open",
+	        "class": "--folder-icon"
+	      }, [vue.createVNode("svg", {
+	        "viewBox": "64 64 896 896",
+	        "focusable": "false",
+	        "data-icon": "folder-open",
+	        "width": "1em",
+	        "height": "1em",
+	        "fill": "currentColor",
+	        "aria-hidden": "true"
+	      }, [vue.createVNode("path", {
+	        "d": "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"
+	      }, null)])]);
+	    },
+	    getTransformedData: function getTransformedData() {
+	      var _this$$props4 = this.$props,
+	        dataField = _this$$props4.dataField,
+	        showSearch = _this$$props4.showSearch;
+	      var transformedData = helper_5(this.$data.aggregationData, dataField);
+	      var filteredData = [];
+	      if (showSearch && this.searchTerm) {
+	        filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
+	      }
+	      return filteredData.length ? filteredData : transformedData;
+	    },
+	    handleInputChange: function handleInputChange(e) {
+	      var value = e.target.value;
+	      this.searchTerm = value;
+	    },
+	    renderSearch: function renderSearch() {
+	      var _this$$props5 = this.$props,
+	        showSearch = _this$$props5.showSearch,
+	        innerClass = _this$$props5.innerClass,
+	        placeholder = _this$$props5.placeholder,
+	        componentId = _this$$props5.componentId,
+	        themePreset = _this$$props5.themePreset;
+	      if (showSearch) {
+	        return vue.createVNode(Input, {
+	          "class": helper_28(innerClass, 'input') || null,
+	          "onInput": this.handleInputChange,
+	          "value": this.searchTerm,
+	          "placeholder": placeholder || 'Search',
+	          "style": {
+	            margin: '0 0 8px'
+	          },
+	          "aria-label": componentId + "-search",
+	          "themePreset": themePreset
+	        }, null);
+	      }
+	      return null;
+	    },
+	    handleListItemClick: function handleListItemClick(key, parentPath) {
+	      var path = key;
+	      if (parentPath) {
+	        path = "" + parentPath + constants_6$1 + key;
+	      }
+	      var newSelectedValues = _extends({}, this.selectedValues);
+	      if (this.$props.mode === 'single') {
+	        newSelectedValues = {};
+	        helper_48(newSelectedValues, path.split(constants_6$1), true, true);
+	      } else {
+	        var newValue = !helper_6(newSelectedValues, path, constants_6$1);
+	        helper_48(newSelectedValues, path.split(constants_6$1), newValue, true);
+	      }
+	      newSelectedValues = sanitizeObject(_extends({}, newSelectedValues));
+	      if (this.$props.value === undefined) {
+	        this.setValue(newSelectedValues);
+	      } else if (this.$props.onChange) {
+	        var valueToSet = helper_4(newSelectedValues);
+	        this.$props.onChange(valueToSet);
+	      }
+	    },
+	    filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
+	      var _this = this;
+	      if (!(listArray && Array.isArray(listArray) && listArray.length)) {
+	        return null;
+	      }
+	      var result = [];
+	      listArray.forEach(function (ele) {
+	        var isLeafItem = !ele.list;
+	        var newParentPath = ele.key;
+	        if (parentPath) {
+	          newParentPath = parentPath + "." + ele.key;
+	        }
+	        var keyHasSearchTerm = suggestions_1(ele.key).toLowerCase().includes(suggestions_1(_this.$data.searchTerm).toLowerCase()) || helper_6(_this.$data.selectedValues, newParentPath, constants_6$1);
+	        if (isLeafItem && keyHasSearchTerm) {
+	          result.push(_extends({}, ele, {
+	            initiallyExpanded: keyHasSearchTerm
+	          }));
+	        } else if (!isLeafItem) {
+	          var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
+	          if (keyHasSearchTerm || !!filteredChildrenItems.length) {
+	            result.push(_extends({}, ele, {
+	              initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
+	              list: filteredChildrenItems
+	            }));
+	          }
+	        }
+	      });
+	      return result;
+	    },
+	    getComponent: function getComponent() {
+	      var _this$$props6 = this.$props,
+	        rawData = _this$$props6.rawData,
+	        error = _this$$props6.error,
+	        isLoading = _this$$props6.isLoading;
+	      var data = {
+	        data: this.getTransformedData(),
+	        rawData: rawData,
+	        error: error,
+	        handleClick: this.handleListItemClick,
+	        value: this.$data.selectedValues,
+	        loading: isLoading,
+	        PATH_SEPARATOR: constants_6$1
+	      };
+	      return this.$slots.render(data) || helper_8(data, this.$props);
+	    },
+	    getDefaultQuery: function getDefaultQuery(value) {
+	      var _this2 = this;
+	      var query = null;
+	      var type = 'term';
+	      var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
+	      if (!Array.isArray(value) || value.length === 0) {
+	        return null;
+	      }
+	      if (value) {
+	        var _bool;
+	        // adds a sub-query with must as an array of objects for each term/value
+	        var queryArray = value.map(function (item) {
+	          return {
+	            bool: {
+	              must: item.split(' > ').map(function (subItem, i) {
+	                var _type, _ref2;
+	                return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
+	              })
+	            }
+	          };
+	        });
+	        var listQuery = {
+	          bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
+	        };
+	        query = value.length ? listQuery : null;
+	      }
+	      if (query && this.$props.nestedField) {
+	        return {
+	          nested: {
+	            path: this.$props.nestedField,
+	            query: query
+	          }
+	        };
+	      }
+	      return query;
+	    },
+	    updateQuery: function updateQuery(value) {
+	      var customQuery = this.$props.customQuery;
+	      var query = this.getDefaultQuery(value);
+	      var customQueryOptions;
+	      if (customQuery) {
+	        var _ref3 = customQuery(value, this.$props) || {};
+	        query = _ref3.query;
+	        customQueryOptions = helper_24(customQuery(value, this.$props));
+	        helper_32(this.$props.componentId, this.$props, value);
+	      }
+	      this.setQueryOptions(this.$props.componentId, _extends({}, this.generateQueryOptions(), customQueryOptions));
+	      this.updateQueryAction({
+	        componentId: this.$props.componentId,
+	        query: query,
+	        value: value,
+	        label: this.$props.filterLabel,
+	        showFilter: this.$props.showFilter,
+	        URLParams: this.$props.URLParams,
+	        componentType: constants_1$1.treeList
+	      });
+	    },
+	    setValue: function setValue(value, hasMountedParam) {
+	      var _this3 = this;
+	      if (hasMountedParam === void 0) {
+	        hasMountedParam = true;
+	      }
+	      var finalValues = Array.isArray(value) === false ? helper_4(value) : value;
+	      var performUpdate = function performUpdate() {
+	        var handleUpdates = function handleUpdates() {
+	          _this3.updateQuery(finalValues);
+	          if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
+	        };
+	        if (hasMountedParam) {
+	          _this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
+	          handleUpdates();
+	        } else {
+	          handleUpdates();
+	        }
+	      };
+	      helper_39(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
+	    },
+	    generateQueryOptions: function generateQueryOptions() {
+	      var queryOptions = helper_36(this.$props);
+	      var valueArray = helper_4(this.selectedValues);
+	      return helper_17(valueArray, queryOptions, this.$props);
+	    },
+	    updateDefaultQuery: function updateDefaultQuery(queryOptions) {
+	      var value = helper_4(this.selectedValues);
+	      // Update default query for RS API
+	      helper_31(this.$props.componentId, this.$props, value);
+	      helper_19(transform_11(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
+	    },
+	    updateQueryOptions: function updateQueryOptions() {
+	      // for a new query due to other changes don't append after to get fresh results
+	      var queryOptions = this.generateQueryOptions(this.$props, {}, helper_4(this.$data.selectedValues));
+	      if (this.$props.defaultQuery) {
+	        // eslint-disable-next-line no-use-before-define
+	        this.updateDefaultQuery(queryOptions);
+	      } else {
+	        this.setQueryOptions(transform_11(this.$props.componentId), queryOptions);
+	      }
+	    }
+	  },
+	  render: function render() {
+	    var _this4 = this;
+	    var props = this.$props;
+	    var style = props.style,
+	      className = props.className,
+	      mode = props.mode,
+	      showLine = props.showLine,
+	      renderItem = props.renderItem,
+	      showCheckbox = props.showCheckbox,
+	      innerClass = props.innerClass,
+	      showRadio = props.showRadio,
+	      showCount = props.showCount,
+	      showSwitcherIcon = props.showSwitcherIcon,
+	      switcherIcon = props.switcherIcon,
+	      title = props.title,
+	      loader = props.loader,
+	      renderError = props.renderError;
+	    if (this.isLoading) {
+	      return (this.$slots.loader ? this.$slots.loader() : loader) || null;
+	    }
+	    if (this.error) {
+	      if (this.$slots.renderError) {
+	        return this.$slots.renderError(this.error);
+	      }
+	      return helper_9(renderError) ? renderError(this.error) : renderError;
+	    }
+	    var transformedData = this.getTransformedData();
+	    if (!transformedData || transformedData.length === 0) {
+	      return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
+	    }
+	    return vue.createVNode(Container, {
+	      "style": style,
+	      "class": className
+	    }, {
+	      "default": function _default() {
+	        return [props.title && vue.createVNode(Title, {
+	          "class": helper_28(innerClass, 'title') || null
+	        }, _isSlot$7(title) ? title : {
+	          "default": function _default() {
+	            return [title];
+	          }
+	        }), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : vue.createVNode(HierarchicalMenuComponent, {
+	          "key": "initial-node",
+	          "listArray": transformedData,
+	          "parentPath": "",
+	          "isExpanded": true,
+	          "listItemProps": {
+	            mode: mode,
+	            selectedValues: _this4.selectedValues,
+	            searchTerm: _this4.searchTerm,
+	            showLine: showLine,
+	            renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
+	            handleListItemClick: _this4.handleListItemClick,
+	            showCheckbox: showCheckbox,
+	            innerClass: innerClass,
+	            showRadio: showRadio,
+	            renderIcon: _this4.renderIcon,
+	            showCount: showCount,
+	            showSwitcherIcon: showSwitcherIcon,
+	            switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
+	          }
+	        }, null)];
+	      }
+	    });
+	  }
+	};
+	var mapStateToProps$6 = function mapStateToProps(state, props) {
+	  return {
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    rawData: state.rawData[props.componentId] || {},
+	    aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
+	    themePreset: state.config.themePreset,
+	    error: state.error[props.componentId],
+	    isLoading: state.isLoading[props.componentId],
+	    enableAppbase: state.config.enableAppbase
+	  };
+	};
+	var mapDispatchtoProps$4 = {
+	  setQueryOptions: setQueryOptions$3,
+	  updateQueryAction: updateQueryAction
+	};
+	TreeList.hasInternalComponent = function () {
+	  return true;
+	};
+	var TreeListConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$4)(TreeList), {
+	  componentType: constants_1$1.treeList,
+	  internalComponent: TreeList.hasInternalComponent()
+	}));
+	TreeListConnected.name = TreeList.name;
+	TreeListConnected.install = function (Vue) {
+	  Vue.component(TreeListConnected.name, TreeListConnected);
+	};
+
+	// Add componentType for SSR
+	TreeListConnected.componentType = constants_1$1.treeList;
+
+	var _templateObject$n, _templateObject2$8;
+	var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
+	var dark$2 = function dark(_ref) {
+	  var theme = _ref.theme;
+	  return "\n\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\tborder-color: " + (theme.colors ? theme.colors.borderColor : '') + ";\n\tcolor: " + (theme.colors ? theme.colors.textColor : '') + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\t}\n";
+	};
+	var Select = styled('button')(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
+	  return props.small ? small : null;
+	}, function (_ref2) {
+	  var themePreset = _ref2.themePreset;
+	  return themePreset === 'dark' && dark$2;
+	});
+	var Tick = styled('span')(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
+	  var theme = _ref3.theme;
+	  return theme.colors.primaryColor;
+	});
+
+	var _templateObject$o;
+	var open = "\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n";
+	var Chevron = styled('span')(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
+	  return props.open ? open : null;
+	});
+
+	var getClassName$6 = lib_8.getClassName;
+	var Dropdown = {
+	  data: function data() {
+	    this.__state = {
+	      isOpen: false,
+	      searchTerm: ''
+	    };
+	    return this.__state;
+	  },
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
+	  props: {
+	    innerClass: types.style,
+	    items: types.data,
+	    keyField: Q.string.def('key'),
+	    labelField: Q.string.def('label'),
+	    multi: Q.bool,
+	    // change event
+	    placeholder: types.string,
+	    returnsObject: Q.bool,
+	    customLabelRenderer: types.func,
+	    hasCustomRenderer: Q.bool,
+	    customRenderer: types.func,
+	    renderItem: types.func,
+	    renderNoResults: Q.any,
+	    handleChange: types.func,
+	    transformData: types.func,
+	    selectedItem: types.selectedValue,
+	    showCount: Q.bool,
+	    single: Q.bool,
+	    small: Q.bool.def(false),
+	    themePreset: types.themePreset,
+	    showSearch: Q.bool,
+	    showClear: Q.bool,
+	    searchPlaceholder: Q.string.def('Type here to search...')
+	  },
+	  render: function render() {
+	    var _this = this;
+	    var _this$$props = this.$props,
+	      items = _this$$props.items,
+	      selectedItem = _this$$props.selectedItem,
+	      placeholder = _this$$props.placeholder,
+	      labelField = _this$$props.labelField,
+	      keyField = _this$$props.keyField,
+	      themePreset = _this$$props.themePreset,
+	      renderItem = _this$$props.renderItem,
+	      transformData = _this$$props.transformData,
+	      footer = _this$$props.footer,
+	      customLabelRenderer = _this$$props.customLabelRenderer,
+	      hasCustomRenderer = _this$$props.hasCustomRenderer,
+	      customRenderer = _this$$props.customRenderer;
+	    var itemsToRender = items;
+	    if (transformData) {
+	      itemsToRender = transformData(itemsToRender);
+	    }
+	    var filteredItemsToRender = itemsToRender.filter(function (item) {
+	      if (String(item[labelField]).length) {
+	        if (_this.$props.showSearch && _this.$data.searchTerm) {
+	          return suggestions_1(String(item[labelField])).toLowerCase().includes(suggestions_1(_this.$data.searchTerm.toLowerCase()));
+	        }
+	        return true;
+	      }
+	      return false;
+	    });
+	    return vue.createVNode(Downshift, {
+	      "isOpen": this.$data.isOpen,
+	      "selectedItem": selectedItem,
+	      "handleChange": this.onChange,
+	      "handleMouseup": this.handleStateChange
+	    }, {
+	      "default": function _default(_ref) {
+	        var getItemProps = _ref.getItemProps,
+	          isOpen = _ref.isOpen,
+	          highlightedIndex = _ref.highlightedIndex,
+	          getButtonProps = _ref.getButtonProps,
+	          getItemEvents = _ref.getItemEvents,
+	          getInputEvents = _ref.getInputEvents;
+	        return vue.createVNode("div", {
+	          "class": suggestionsContainer
+	        }, [vue.createVNode(Select, vue.mergeProps(babelHelperVueTransformOn(getButtonProps({
+	          onClick: _this.toggle
+	        })), {
+	          "class": getClassName$6(_this.$props.innerClass, 'select') || '',
+	          "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
+	          "small": _this.$props.small,
+	          "themePreset": _this.$props.themePreset
+	        }), {
+	          "default": function _default() {
+	            return [customLabelRenderer ? customLabelRenderer(selectedItem) : vue.createVNode("div", null, [selectedItem ? _this.renderToString(selectedItem) : placeholder]), vue.createVNode(Chevron, {
+	              "open": isOpen
+	            }, null)];
+	          }
+	        }), hasCustomRenderer ? customRenderer(itemsToRender, {
+	          getItemProps: getItemProps,
+	          isOpen: isOpen,
+	          highlightedIndex: highlightedIndex,
+	          getButtonProps: getButtonProps,
+	          getItemEvents: getItemEvents
+	        }) : isOpen && itemsToRender.length ? vue.createVNode("ul", {
+	          "class": suggestions$1(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName$6(_this.$props.innerClass, 'list')
+	        }, [_this.$props.showSearch ? _this.renderSearchbox({
+	          on: {
+	            input: getInputEvents({
+	              onInput: _this.handleInputChange
+	            }).input
+	          }
+	        }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
+	          var selected = _this.$props.multi // MultiDropdownList
+	          && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
+	          || Array.isArray(selectedItem) && selectedItem.find(function (value) {
+	            return value[labelField] === item[labelField];
+	          }));
+	          if (!_this.$props.multi) selected = item.key === selectedItem;
+	          return vue.createVNode("li", vue.mergeProps(getItemProps({
+	            item: item
+	          }), babelHelperVueTransformOn(getItemEvents({
+	            item: item
+	          })), {
+	            "key": item[keyField],
+	            "class": "" + (selected ? 'active' : ''),
+	            "style": {
+	              backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
+	            }
+	          }), [renderItem ? renderItem({
+	            label: item[labelField],
+	            count: item.doc_count,
+	            isChecked: selected && _this.$props.multi
+	          }) : vue.createVNode("div", null, [typeof item[labelField] === 'string' ? vue.createVNode("span", {
+	            "innerHTML": item[labelField]
+	          }, null) : item[labelField], _this.$props.showCount && item.doc_count && vue.createVNode("span", {
+	            "class": getClassName$6(_this.$props.innerClass, 'count') || ''
+	          }, [vue.createTextVNode("\xA0("), item.doc_count, vue.createTextVNode(")")])]), selected && _this.$props.multi ? vue.createVNode(Tick, {
+	            "class": getClassName$6(_this.$props.innerClass, 'icon') || ''
+	          }, null) : null]);
+	        }), footer]) : null]);
+	      }
+	    });
+	  },
+	  methods: {
+	    toggle: function toggle() {
+	      this.isOpen = !this.$data.isOpen;
+	    },
+	    close: function close() {
+	      this.isOpen = false;
+	    },
+	    onChange: function onChange(item) {
+	      if (this.$props.returnsObject) {
+	        this.$props.handleChange(item);
+	      } else {
+	        this.$props.handleChange(item[this.$props.keyField]);
+	      }
+	      if (!this.$props.multi) {
+	        this.isOpen = false;
+	        this.searchTerm = '';
+	      }
+	    },
+	    handleStateChange: function handleStateChange(_ref2) {
+	      var isOpen = _ref2.isOpen;
+	      this.isOpen = isOpen;
+	    },
+	    getBackgroundColor: function getBackgroundColor(highlighted, selected) {
+	      var isDark = this.$props.themePreset === 'dark';
+	      if (highlighted) {
+	        return isDark ? '#555' : '#eee';
+	      }
+	      if (selected) {
+	        return isDark ? '#686868' : '#fafafa';
+	      }
+	      return isDark ? '#424242' : '#fff';
+	    },
+	    handleInputChange: function handleInputChange(e) {
+	      var value = e.target.value;
+	      this.searchTerm = value;
+	    },
+	    clearSearchTerm: function clearSearchTerm() {
+	      this.searchTerm = '';
+	    },
+	    renderToString: function renderToString(value) {
+	      var _this2 = this;
+	      var customLabelRenderer = this.$props.customLabelRenderer;
+	      if (customLabelRenderer) {
+	        var customLabel = customLabelRenderer(value);
+	        if (typeof customLabel === 'string') {
+	          return customLabel;
+	        }
+	      }
+	      if (Array.isArray(value) && value.length) {
+	        var arrayToRender = value.map(function (item) {
+	          return _this2.renderToString(item);
+	        });
+	        return arrayToRender.join(', ');
+	      }
+	      if (value && typeof value === 'object') {
+	        if (value[this.$props.labelField]) {
+	          return value[this.$props.labelField];
+	        }
+	        if (Object.keys(value).length) {
+	          return this.renderToString(Object.keys(value));
+	        }
+	        return this.$props.placeholder;
+	      }
+	      return value;
+	    },
 	    renderNoResult: function renderNoResult() {
 	      var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
 	      return vue.createVNode("p", {
@@ -21422,11 +23267,11 @@
 	  }
 	};
 
-	function _isSlot$6(s) {
+	function _isSlot$8(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var updateQuery$4 = lib_5.updateQuery,
-	  setQueryOptions$3 = lib_5.setQueryOptions,
+	  setQueryOptions$4 = lib_5.setQueryOptions,
 	  setCustomQuery$3 = lib_5.setCustomQuery,
 	  setDefaultQuery$4 = lib_5.setDefaultQuery;
 	var getQueryOptions$3 = lib_8.getQueryOptions,
@@ -21637,7 +23482,7 @@
 	            "css": loadMoreContainer
 	          }, [vue.createVNode(Button, {
 	            "onClick": _this2.handleLoadMore
-	          }, _isSlot$6(loadMoreLabel) ? loadMoreLabel : {
+	          }, _isSlot$8(loadMoreLabel) ? loadMoreLabel : {
 	            "default": function _default() {
 	              return [loadMoreLabel];
 	            }
@@ -21784,7 +23629,7 @@
 	SingleDropdownList.hasInternalComponent = function () {
 	  return true;
 	};
-	var mapStateToProps$6 = function mapStateToProps(state, props) {
+	var mapStateToProps$7 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -21796,13 +23641,13 @@
 	    componentProps: state.props[props.componentId]
 	  };
 	};
-	var mapDispatchtoProps$4 = {
-	  setQueryOptions: setQueryOptions$3,
+	var mapDispatchtoProps$5 = {
+	  setQueryOptions: setQueryOptions$4,
 	  updateQuery: updateQuery$4,
 	  setCustomQuery: setCustomQuery$3,
 	  setDefaultQuery: setDefaultQuery$4
 	};
-	var ListConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$4)(SingleDropdownList), {
+	var ListConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$5)(SingleDropdownList), {
 	  componentType: constants_1$1.singleDropdownList,
 	  internalComponent: SingleDropdownList.hasInternalComponent()
 	}));
@@ -21816,11 +23661,11 @@
 	  Vue.component(ListConnected$2.name, ListConnected$2);
 	};
 
-	function _isSlot$7(s) {
+	function _isSlot$9(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var updateQuery$5 = lib_5.updateQuery,
-	  setQueryOptions$4 = lib_5.setQueryOptions,
+	  setQueryOptions$5 = lib_5.setQueryOptions,
 	  setCustomQuery$4 = lib_5.setCustomQuery,
 	  setDefaultQuery$5 = lib_5.setDefaultQuery;
 	var isEqual$8 = lib_8.isEqual,
@@ -22043,7 +23888,7 @@
 	            "css": loadMoreContainer
 	          }, [vue.createVNode(Button, {
 	            "onClick": _this3.handleLoadMore
-	          }, _isSlot$7(loadMoreLabel) ? loadMoreLabel : {
+	          }, _isSlot$9(loadMoreLabel) ? loadMoreLabel : {
 	            "default": function _default() {
 	              return [loadMoreLabel];
 	            }
@@ -22239,7 +24084,7 @@
 	MultiDropdownList.hasInternalComponent = function () {
 	  return true;
 	};
-	var mapStateToProps$7 = function mapStateToProps(state, props) {
+	var mapStateToProps$8 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -22251,13 +24096,13 @@
 	    componentProps: state.props[props.componentId]
 	  };
 	};
-	var mapDispatchtoProps$5 = {
-	  setQueryOptions: setQueryOptions$4,
+	var mapDispatchtoProps$6 = {
+	  setQueryOptions: setQueryOptions$5,
 	  updateQuery: updateQuery$5,
 	  setCustomQuery: setCustomQuery$4,
 	  setDefaultQuery: setDefaultQuery$5
 	};
-	var ListConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$5)(MultiDropdownList), {
+	var ListConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$6)(MultiDropdownList), {
 	  componentType: constants_1$1.multiDropdownList,
 	  internalComponent: MultiDropdownList.hasInternalComponent()
 	}));
@@ -22273,7 +24118,7 @@
 	};
 
 	var updateQuery$6 = lib_5.updateQuery,
-	  setQueryOptions$5 = lib_5.setQueryOptions,
+	  setQueryOptions$6 = lib_5.setQueryOptions,
 	  setCustomQuery$5 = lib_5.setCustomQuery;
 	var isEqual$9 = lib_8.isEqual,
 	  checkValueChange$5 = lib_8.checkValueChange,
@@ -22436,123 +24281,410 @@
 	        componentType: constants_1$1.toggleButton
 	      });
 	    },
-	    handleClick: function handleClick(item) {
-	      var _this$$props = this.$props,
-	        enableStrictSelection = _this$$props.enableStrictSelection,
-	        multiSelect = _this$$props.multiSelect;
-	      if (enableStrictSelection && !multiSelect && this.$data.currentValue.find(function (stateItem) {
-	        return isEqual$9(item, stateItem);
-	      })) {
-	        return false;
+	    handleClick: function handleClick(item) {
+	      var _this$$props = this.$props,
+	        enableStrictSelection = _this$$props.enableStrictSelection,
+	        multiSelect = _this$$props.multiSelect;
+	      if (enableStrictSelection && !multiSelect && this.$data.currentValue.find(function (stateItem) {
+	        return isEqual$9(item, stateItem);
+	      })) {
+	        return false;
+	      }
+	      var value = this.$props.value;
+	      if (value === undefined) {
+	        this.handleToggle(item);
+	      } else {
+	        this.$emit('change', item.value);
+	      }
+	      return true;
+	    },
+	    renderButton: function renderButton(item) {
+	      var _this2 = this;
+	      var renderItem = this.$slots.renderItem || this.renderItem;
+	      var isSelected = this.$data.currentValue.some(function (value) {
+	        return value.value === item.value;
+	      });
+	      return renderItem ? renderItem({
+	        item: item,
+	        isSelected: isSelected,
+	        handleClick: function handleClick() {
+	          return _this2.handleClick(item);
+	        }
+	      }) : vue.createVNode(Button, {
+	        "class": getClassName$9(this.$props.innerClass, 'button') + " " + (isSelected ? 'active' : ''),
+	        "onClick": function onClick() {
+	          return _this2.handleClick(item);
+	        },
+	        "key": item.value,
+	        "primary": isSelected,
+	        "large": true,
+	        "tabIndex": isSelected ? '-1' : '0',
+	        "onKeypress": function onKeypress(e) {
+	          return handleA11yAction$1(e, function () {
+	            return _this2.handleClick(item);
+	          });
+	        }
+	      }, {
+	        "default": function _default() {
+	          return [item.label];
+	        }
+	      });
+	    }
+	  },
+	  render: function render() {
+	    var _this3 = this;
+	    return vue.createVNode(Container, {
+	      "class": toggleButtons
+	    }, {
+	      "default": function _default() {
+	        return [_this3.$props.title && vue.createVNode(Title, {
+	          "class": getClassName$9(_this3.$props.innerClass, 'title')
+	        }, {
+	          "default": function _default() {
+	            return [_this3.$props.title];
+	          }
+	        }), _this3.$props.data.map(function (item) {
+	          return _this3.renderButton(item);
+	        })];
+	      }
+	    });
+	  }
+	};
+	ToggleButton.parseValue = function (value, props) {
+	  if (Array.isArray(value)) {
+	    if (typeof value[0] === 'string') {
+	      return props.data.filter(function (item) {
+	        return value.includes(item.value);
+	      });
+	    }
+	    return value;
+	  }
+	  return props.data.filter(function (item) {
+	    return item.value === value;
+	  });
+	};
+	ToggleButton.defaultQuery = function (value, props) {
+	  return {
+	    query: {
+	      queryFormat: props.queryFormat,
+	      dataField: props.dataField,
+	      value: value,
+	      nestedField: props.nestedField,
+	      selectAllLabel: props.selectAllLabel,
+	      showMissing: props.showMissing,
+	      multiSelect: props.multiSelect
+	    }
+	  };
+	};
+	var mapStateToProps$9 = function mapStateToProps(state, props) {
+	  return {
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    componentProps: state.props[props.componentId]
+	  };
+	};
+	var mapDispatchtoProps$7 = {
+	  updateQueryHandler: updateQuery$6,
+	  setQueryOptions: setQueryOptions$6,
+	  setCustomQuery: setCustomQuery$5
+	};
+	var TBConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$9, mapDispatchtoProps$7)(ToggleButton), {
+	  componentType: constants_1$1.toggleButton
+	}));
+	TBConnected.parseValue = ToggleButton.parseValue;
+	TBConnected.defaultQuery = ToggleButton.defaultQuery;
+	TBConnected.name = ToggleButton.name;
+	TBConnected.install = function (Vue) {
+	  Vue.component(TBConnected.name, TBConnected);
+	};
+	// Add componentType for SSR
+	TBConnected.componentType = constants_1$1.toggleButton;
+
+	var _excluded$1 = ["options"];
+	var updateQuery$7 = lib_5.updateQuery,
+	  setQueryOptions$7 = lib_5.setQueryOptions,
+	  setCustomQuery$6 = lib_5.setCustomQuery,
+	  setDefaultQuery$6 = lib_5.setDefaultQuery;
+	var parseHits$1 = lib_8.parseHits,
+	  isEqual$a = lib_8.isEqual,
+	  getCompositeAggsQuery$4 = lib_8.getCompositeAggsQuery,
+	  getResultStats$2 = lib_8.getResultStats,
+	  extractQueryFromCustomQuery$5 = lib_8.extractQueryFromCustomQuery,
+	  getOptionsForCustomQuery$5 = lib_8.getOptionsForCustomQuery;
+	var ReactiveComponent = {
+	  name: 'ReactiveComponent',
+	  props: {
+	    componentId: types.stringRequired,
+	    aggregationField: types.string,
+	    aggregationSize: Q.number,
+	    size: Q.number,
+	    defaultQuery: types.func,
+	    customQuery: types.func,
+	    filterLabel: types.string,
+	    react: types.react,
+	    showFilter: Q.bool.def(true),
+	    URLParams: Q.bool.def(false),
+	    distinctField: types.string,
+	    distinctFieldConfig: types.props,
+	    index: Q.string,
+	    endpoint: types.endpointConfig
+	  },
+	  created: function created() {
+	    var _this = this;
+	    var props = this.$props;
+	    this.internalComponent = null;
+	    this.$defaultQuery = null;
+	    // Set custom query in store
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	    var customQuery = props.customQuery,
+	      componentId = props.componentId,
+	      filterLabel = props.filterLabel,
+	      showFilter = props.showFilter,
+	      URLParams = props.URLParams;
+	    if (customQuery) {
+	      var calcCustomQuery = customQuery(this.selectedValue, props);
+	      var query = extractQueryFromCustomQuery$5(calcCustomQuery);
+	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$5(calcCustomQuery) : null;
+	      if (customQueryOptions) {
+	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+	      this.updateQuery({
+	        componentId: componentId,
+	        query: query,
+	        value: this.selectedValue || null,
+	        label: filterLabel,
+	        showFilter: showFilter,
+	        URLParams: URLParams
+	      });
+	    }
+	    this.setQuery = function (_ref) {
+	      var options = _ref.options,
+	        obj = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+	      var queryToBeSet = obj.query;
+
+	      // when enableAppbase is true, Backend throws error because of repeated query in request body
+	      if (queryToBeSet && queryToBeSet.query) {
+	        queryToBeSet = queryToBeSet.query;
+	      }
+	      var customQueryCalc = _extends({}, options, {
+	        query: queryToBeSet
+	      });
+	      var rsAPIQuery = customQueryCalc;
+	      // handle stored queries
+	      if (queryToBeSet && queryToBeSet.id) {
+	        rsAPIQuery = queryToBeSet;
+	      }
+	      // Update customQuery field for RS API
+	      _this.setCustomQuery(props.componentId, rsAPIQuery);
+	      if (options) {
+	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
+	      }
+	      _this.updateQuery(_extends({}, obj, {
+	        query: customQueryCalc.query,
+	        componentId: props.componentId,
+	        label: props.filterLabel,
+	        showFilter: props.showFilter,
+	        URLParams: props.URLParams
+	      }));
+	    };
+	    if (props.defaultQuery) {
+	      this.internalComponent = props.componentId + "__internal";
+	    }
+	    if (this.internalComponent && this.$props.defaultQuery) {
+	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
+	      var _query = extractQueryFromCustomQuery$5(this.$defaultQuery);
+	      var queryOptions = getOptionsForCustomQuery$5(this.$defaultQuery);
+	      if (queryOptions) {
+	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+	      this.updateQuery({
+	        componentId: this.internalComponent,
+	        query: _query
+	      });
+	    }
+	  },
+	  watch: {
+	    hits: function hits(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    rawData: function rawData(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    aggregations: function aggregations(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    aggregationData: function aggregationData(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    promotedResults: function promotedResults(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    hidden: function hidden(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    total: function total(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    time: function time(newVal, oldVal) {
+	      if (!isEqual$a(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
 	      }
-	      var value = this.$props.value;
-	      if (value === undefined) {
-	        this.handleToggle(item);
-	      } else {
-	        this.$emit('change', item.value);
+	    },
+	    defaultQuery: function defaultQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$5(this.$defaultQuery);
+	        var queryOptions = getOptionsForCustomQuery$5(this.$defaultQuery);
+	        if (queryOptions) {
+	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+	        // Update default query for RS API
+	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: this.internalComponent,
+	          query: query
+	        });
 	      }
-	      return true;
 	    },
-	    renderButton: function renderButton(item) {
-	      var _this2 = this;
-	      var renderItem = this.$slots.renderItem || this.renderItem;
-	      var isSelected = this.$data.currentValue.some(function (value) {
-	        return value.value === item.value;
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        var componentId = this.$props.componentId;
+	        this.$customQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$5(this.$customQuery);
+	        var queryOptions = getOptionsForCustomQuery$5(this.$customQuery);
+	        if (queryOptions) {
+	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+
+	        // Update custom query for RS API
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: componentId,
+	          query: query
+	        });
+	      }
+	    }
+	  },
+	  render: function render() {
+	    try {
+	      var dom = this.$slots["default"];
+	      var error = this.error,
+	        isLoading = this.isLoading,
+	        selectedValue = this.selectedValue;
+	      var propsToBePassed = _extends({
+	        error: error,
+	        loading: isLoading
+	      }, this.getData(), {
+	        value: selectedValue,
+	        setQuery: this.setQuery
 	      });
-	      return renderItem ? renderItem({
-	        item: item,
-	        isSelected: isSelected,
-	        handleClick: function handleClick() {
-	          return _this2.handleClick(item);
-	        }
-	      }) : vue.createVNode(Button, {
-	        "class": getClassName$9(this.$props.innerClass, 'button') + " " + (isSelected ? 'active' : ''),
-	        "onClick": function onClick() {
-	          return _this2.handleClick(item);
-	        },
-	        "key": item.value,
-	        "primary": isSelected,
-	        "large": true,
-	        "tabIndex": isSelected ? '-1' : '0',
-	        "onKeypress": function onKeypress(e) {
-	          return handleA11yAction$1(e, function () {
-	            return _this2.handleClick(item);
+	      return vue.createVNode("div", null, [dom(propsToBePassed)]);
+	    } catch (e) {
+	      return null;
+	    }
+	  },
+	  methods: {
+	    getAggsQuery: function getAggsQuery() {
+	      if (this.aggregationField) {
+	        return {
+	          aggs: getCompositeAggsQuery$4({
+	            props: this.$props,
+	            showTopHits: true,
+	            value: this.selectedValue
+	          }).aggs
+	        };
+	      }
+	      return {};
+	    },
+	    getData: function getData() {
+	      var hits = this.hits,
+	        aggregations = this.aggregations,
+	        aggregationData = this.aggregationData,
+	        promotedResults = this.promotedResults,
+	        rawData = this.rawData;
+	      var filteredResults = parseHits$1(hits);
+	      if (promotedResults.length) {
+	        var ids = promotedResults.map(function (item) {
+	          return item._id;
+	        }).filter(Boolean);
+	        if (ids) {
+	          filteredResults = filteredResults.filter(function (item) {
+	            return !ids.includes(item._id);
 	          });
 	        }
-	      }, {
-	        "default": function _default() {
-	          return [item.label];
-	        }
-	      });
+	        filteredResults = [].concat(promotedResults, filteredResults);
+	      }
+	      return {
+	        data: filteredResults,
+	        aggregationData: aggregationData,
+	        rawData: rawData,
+	        aggregations: aggregations,
+	        promotedData: promotedResults,
+	        resultStats: this.stats
+	      };
 	    }
 	  },
-	  render: function render() {
-	    var _this3 = this;
-	    return vue.createVNode(Container, {
-	      "class": toggleButtons
-	    }, {
-	      "default": function _default() {
-	        return [_this3.$props.title && vue.createVNode(Title, {
-	          "class": getClassName$9(_this3.$props.innerClass, 'title')
-	        }, {
-	          "default": function _default() {
-	            return [_this3.$props.title];
-	          }
-	        }), _this3.$props.data.map(function (item) {
-	          return _this3.renderButton(item);
-	        })];
-	      }
-	    });
-	  }
-	};
-	ToggleButton.parseValue = function (value, props) {
-	  if (Array.isArray(value)) {
-	    if (typeof value[0] === 'string') {
-	      return props.data.filter(function (item) {
-	        return value.includes(item.value);
-	      });
+	  computed: {
+	    stats: function stats() {
+	      return getResultStats$2(this);
 	    }
-	    return value;
 	  }
-	  return props.data.filter(function (item) {
-	    return item.value === value;
-	  });
 	};
-	ToggleButton.defaultQuery = function (value, props) {
-	  return {
-	    query: {
-	      queryFormat: props.queryFormat,
-	      dataField: props.dataField,
-	      value: value,
-	      nestedField: props.nestedField,
-	      selectAllLabel: props.selectAllLabel,
-	      showMissing: props.showMissing,
-	      multiSelect: props.multiSelect
-	    }
-	  };
+	ReactiveComponent.hasInternalComponent = function (props) {
+	  return !!props.defaultQuery;
 	};
-	var mapStateToProps$8 = function mapStateToProps(state, props) {
+	var mapStateToProps$a = function mapStateToProps(state, props) {
 	  return {
+	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
+	    aggregationData: state.compositeAggregations[props.componentId] || [],
+	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
+	    rawData: state.rawData[props.componentId],
+	    error: state.error[props.componentId],
+	    isLoading: state.isLoading[props.componentId],
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    promotedResults: state.promotedResults[props.componentId] || [],
+	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	    componentProps: state.props[props.componentId]
 	  };
 	};
-	var mapDispatchtoProps$6 = {
-	  updateQueryHandler: updateQuery$6,
-	  setQueryOptions: setQueryOptions$5,
-	  setCustomQuery: setCustomQuery$5
-	};
-	var TBConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$6)(ToggleButton), {
-	  componentType: constants_1$1.toggleButton
-	}));
-	TBConnected.parseValue = ToggleButton.parseValue;
-	TBConnected.defaultQuery = ToggleButton.defaultQuery;
-	TBConnected.name = ToggleButton.name;
-	TBConnected.install = function (Vue) {
-	  Vue.component(TBConnected.name, TBConnected);
+	var mapDispatchtoProps$8 = {
+	  setQueryOptions: setQueryOptions$7,
+	  updateQuery: updateQuery$7,
+	  setCustomQuery: setCustomQuery$6,
+	  setDefaultQuery: setDefaultQuery$6
 	};
+	var ConnectedComponent = ComponentWrapper$1(connect(mapStateToProps$a, mapDispatchtoProps$8)(ReactiveComponent), {
+	  componentType: constants_1$1.reactiveComponent
+	});
+	var RcConnected = PreferencesConsumer({
+	  name: 'RcConnected',
+	  render: function render() {
+	    return vue.h(ConnectedComponent, null, this.$slots);
+	  }
+	});
+	RcConnected.name = ReactiveComponent.name;
+	RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
 	// Add componentType for SSR
-	TBConnected.componentType = constants_1$1.toggleButton;
+	RcConnected.componentType = constants_1$1.reactiveComponent;
+	RcConnected.install = function (Vue) {
+	  Vue.component(RcConnected.name, RcConnected);
+	};
 
 	// client only component
 	// render the placeholder slot on SSR
@@ -22586,8 +24718,8 @@
 	  }
 	});
 
-	var _templateObject$o;
-	var Slider = styled('div')(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
+	var _templateObject$p;
+	var Slider = styled('div')(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
 
 	var global$1 = typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};
 
@@ -22620,18 +24752,18 @@
 	var addComponent$1 = lib_5.addComponent,
 	  removeComponent$1 = lib_5.removeComponent,
 	  watchComponent$1 = lib_5.watchComponent,
-	  updateQuery$7 = lib_5.updateQuery,
+	  updateQuery$8 = lib_5.updateQuery,
 	  setQueryListener$1 = lib_5.setQueryListener,
-	  setQueryOptions$6 = lib_5.setQueryOptions,
+	  setQueryOptions$8 = lib_5.setQueryOptions,
 	  setComponentProps$1 = lib_5.setComponentProps,
-	  setCustomQuery$6 = lib_5.setCustomQuery,
+	  setCustomQuery$7 = lib_5.setCustomQuery,
 	  updateComponentProps$2 = lib_5.updateComponentProps;
 	var checkValueChange$6 = lib_8.checkValueChange,
 	  getClassName$a = lib_8.getClassName,
-	  isEqual$a = lib_8.isEqual,
+	  isEqual$b = lib_8.isEqual,
 	  checkSomePropChange$1 = lib_8.checkSomePropChange,
-	  extractQueryFromCustomQuery$5 = lib_8.extractQueryFromCustomQuery,
-	  getOptionsForCustomQuery$5 = lib_8.getOptionsForCustomQuery;
+	  extractQueryFromCustomQuery$6 = lib_8.extractQueryFromCustomQuery,
+	  getOptionsForCustomQuery$6 = lib_8.getOptionsForCustomQuery;
 	var DynamicRangeSlider = {
 	  name: 'DynamicRangeSlider',
 	  components: getComponents(),
@@ -22816,11 +24948,11 @@
 	      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
 	      if (this.$props.customQuery) {
 	        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
-	        var queryTobeSet = extractQueryFromCustomQuery$5(customQueryTobeSet);
+	        var queryTobeSet = extractQueryFromCustomQuery$6(customQueryTobeSet);
 	        if (queryTobeSet) {
 	          query = queryTobeSet;
 	        }
-	        var customQueryOptions = getOptionsForCustomQuery$5(customQueryTobeSet);
+	        var customQueryOptions = getOptionsForCustomQuery$6(customQueryTobeSet);
 	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
 	        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
 	      }
@@ -22867,7 +24999,7 @@
 	      this.setReact();
 	    },
 	    selectedValue: function selectedValue(newValue) {
-	      if (isEqual$a(newValue, this.currentValue)) return;
+	      if (isEqual$b(newValue, this.currentValue)) return;
 	      var value = newValue || {
 	        start: this.range.start,
 	        end: this.range.end
@@ -22876,7 +25008,7 @@
 	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	    },
 	    range: function range(newValue, oldValue) {
-	      if (isEqual$a(newValue, oldValue) || !this.currentValue) return;
+	      if (isEqual$b(newValue, oldValue) || !this.currentValue) return;
 	      var _ref3 = this.currentValue || [],
 	        currentStart = _ref3[0],
 	        currentEnd = _ref3[1];
@@ -22893,7 +25025,7 @@
 	      }
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
 	      }
 	    }
@@ -22966,7 +25098,7 @@
 	DynamicRangeSlider.hasInternalComponent = function () {
 	  return true;
 	};
-	var mapStateToProps$9 = function mapStateToProps(state, props) {
+	var mapStateToProps$b = function mapStateToProps(state, props) {
 	  var componentId = state.aggregations[props.componentId];
 	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
 	  var options = componentId && componentId[props.dataField];
@@ -22991,18 +25123,18 @@
 	    componentProps: state.props[props.componentId]
 	  };
 	};
-	var mapDispatchtoProps$7 = {
+	var mapDispatchtoProps$9 = {
 	  addComponent: addComponent$1,
 	  removeComponent: removeComponent$1,
-	  updateQuery: updateQuery$7,
+	  updateQuery: updateQuery$8,
 	  watchComponent: watchComponent$1,
 	  setQueryListener: setQueryListener$1,
-	  setQueryOptions: setQueryOptions$6,
+	  setQueryOptions: setQueryOptions$8,
 	  setComponentProps: setComponentProps$1,
-	  setCustomQuery: setCustomQuery$6,
+	  setCustomQuery: setCustomQuery$7,
 	  updateComponentProps: updateComponentProps$2
 	};
-	var RangeConnected = PreferencesConsumer(connect(mapStateToProps$9, mapDispatchtoProps$7)(DynamicRangeSlider));
+	var RangeConnected = PreferencesConsumer(connect(mapStateToProps$b, mapDispatchtoProps$9)(DynamicRangeSlider));
 	RangeConnected.defaultQuery = DynamicRangeSlider.defaultQuery;
 	RangeConnected.parseValue = DynamicRangeSlider.parseValue;
 	RangeConnected.hasInternalComponent = DynamicRangeSlider.hasInternalComponent;
@@ -23014,13 +25146,13 @@
 	  Vue.component(RangeConnected.name, RangeConnected);
 	};
 
-	function _isSlot$8(s) {
+	function _isSlot$a(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	var updateQuery$8 = lib_5.updateQuery,
-	  setQueryOptions$7 = lib_5.setQueryOptions,
-	  setCustomQuery$7 = lib_5.setCustomQuery;
-	var isEqual$b = lib_8.isEqual,
+	var updateQuery$9 = lib_5.updateQuery,
+	  setQueryOptions$9 = lib_5.setQueryOptions,
+	  setCustomQuery$8 = lib_5.setCustomQuery;
+	var isEqual$c = lib_8.isEqual,
 	  checkValueChange$7 = lib_8.checkValueChange,
 	  getClassName$b = lib_8.getClassName,
 	  getOptionsFromQuery$1 = lib_8.getOptionsFromQuery;
@@ -23072,12 +25204,12 @@
 	      this.setValue(newVal);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
+	      if (!isEqual$c(newVal, oldVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$b(this.$data.currentValue, newVal)) {
+	      if (!isEqual$c(this.$data.currentValue, newVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
@@ -23102,7 +25234,7 @@
 	          }
 	        }), vue.createVNode(UL, {
 	          "class": getClassName$b(_this.$props.innerClass, 'list')
-	        }, _isSlot$8(_slot = _this.$props.data.map(function (item) {
+	        }, _isSlot$a(_slot = _this.$props.data.map(function (item) {
 	          var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
 	          return vue.createVNode("li", {
 	            "key": item.label,
@@ -23189,18 +25321,18 @@
 	    }
 	  };
 	};
-	var mapStateToProps$a = function mapStateToProps(state, props) {
+	var mapStateToProps$c = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId]
-	  };
-	};
-	var mapDispatchtoProps$8 = {
-	  updateQuery: updateQuery$8,
-	  setQueryOptions: setQueryOptions$7,
-	  setCustomQuery: setCustomQuery$7
+	  };
+	};
+	var mapDispatchtoProps$a = {
+	  updateQuery: updateQuery$9,
+	  setQueryOptions: setQueryOptions$9,
+	  setCustomQuery: setCustomQuery$8
 	};
-	var RangeConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$a, mapDispatchtoProps$8)(SingleRange), {
+	var RangeConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$a)(SingleRange), {
 	  componentType: constants_1$1.singleRange
 	}));
 	RangeConnected$1.name = SingleRange.name;
@@ -23213,13 +25345,13 @@
 	// Add componentType for SSR
 	RangeConnected$1.componentType = constants_1$1.singleRange;
 
-	function _isSlot$9(s) {
+	function _isSlot$b(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	var updateQuery$9 = lib_5.updateQuery,
-	  setQueryOptions$8 = lib_5.setQueryOptions,
-	  setCustomQuery$8 = lib_5.setCustomQuery;
-	var isEqual$c = lib_8.isEqual,
+	var updateQuery$a = lib_5.updateQuery,
+	  setQueryOptions$a = lib_5.setQueryOptions,
+	  setCustomQuery$9 = lib_5.setCustomQuery;
+	var isEqual$d = lib_8.isEqual,
 	  checkValueChange$8 = lib_8.checkValueChange,
 	  getClassName$c = lib_8.getClassName,
 	  getOptionsFromQuery$2 = lib_8.getOptionsFromQuery;
@@ -23345,12 +25477,12 @@
 	      this.selectItem(newVal, true, undefined, true);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$c(newVal, oldVal)) {
+	      if (!isEqual$d(newVal, oldVal)) {
 	        this.selectItem(newVal, true, undefined, true);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$c(this.$data.currentValue, newVal)) {
+	      if (!isEqual$d(this.$data.currentValue, newVal)) {
 	        var processSelectedValues = newVal ? newVal.map(function (item) {
 	          if (typeof item === 'object' && 'label' in item) {
 	            return item.label;
@@ -23390,278 +25522,42 @@
 	          "default": function _default() {
 	            return [_this2.$props.title];
 	          }
-	        }), vue.createVNode(UL, {
-	          "class": getClassName$c(_this2.$props.innerClass, 'list')
-	        }, _isSlot$9(_slot = _this2.$props.data.map(function (item) {
-	          var selected = !!_this2.$data.currentValue && _this2.$data.currentValue.label === item.label;
-	          return vue.createVNode("li", {
-	            "key": item.label,
-	            "class": "" + (selected ? 'active' : '')
-	          }, [vue.createVNode(Checkbox, vue.mergeProps(babelHelperVueTransformOn({
-	            click: _this2.handleClick
-	          }), {
-	            "class": getClassName$c(_this2.$props.innerClass, 'checkbox'),
-	            "id": _this2.$props.componentId + "-" + item.label,
-	            "name": _this2.$props.componentId,
-	            "value": item.label,
-	            "type": "Checkbox",
-	            "show": _this2.$props.showCheckbox,
-	            "checked": _this2.selectedValues[item.label]
-	          }), null), vue.createVNode("label", {
-	            "class": getClassName$c(_this2.$props.innerClass, 'label'),
-	            "for": _this2.$props.componentId + "-" + item.label
-	          }, [item.label])]);
-	        })) ? _slot : {
-	          "default": function _default() {
-	            return [_slot];
-	          }
-	        })];
-	      }
-	    });
-	  }
-	};
-	MultiRange.parseValue = function (value, props) {
-	  return value ? props.data.filter(function (item) {
-	    return value.includes(item.label);
-	  }) : null;
-	};
-	MultiRange.defaultQuery = function (value, props) {
-	  return {
-	    query: {
-	      queryFormat: props.queryFormat,
-	      dataField: props.dataField,
-	      value: value,
-	      showMissing: props.showMissing
-	    }
-	  };
-	};
-	var mapStateToProps$b = function mapStateToProps(state, props) {
-	  return {
-	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-	    componentProps: state.props[props.componentId]
-	  };
-	};
-	var mapDispatchtoProps$9 = {
-	  updateQuery: updateQuery$9,
-	  setQueryOptions: setQueryOptions$8,
-	  setCustomQuery: setCustomQuery$8
-	};
-	var RangeConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$b, mapDispatchtoProps$9)(MultiRange), {
-	  componentType: constants_1$1.multiRange
-	}));
-	RangeConnected$2.name = MultiRange.name;
-	RangeConnected$2.defaultQuery = MultiRange.defaultQuery;
-	RangeConnected$2.parseValue = MultiRange.parseValue;
-	RangeConnected$2.hasInternalComponent = MultiRange.hasInternalComponent;
-	RangeConnected$2.install = function (Vue) {
-	  Vue.component(RangeConnected$2.name, RangeConnected$2);
-	};
-	// Add componentType for SSR
-	RangeConnected$2.componentType = constants_1$1.multiRange;
-
-	var updateQuery$a = lib_5.updateQuery,
-	  setQueryOptions$9 = lib_5.setQueryOptions,
-	  setCustomQuery$9 = lib_5.setCustomQuery;
-	var checkValueChange$9 = lib_8.checkValueChange,
-	  getClassName$d = lib_8.getClassName,
-	  getOptionsFromQuery$3 = lib_8.getOptionsFromQuery,
-	  isEqual$d = lib_8.isEqual;
-	var RangeSlider = {
-	  name: 'RangeSlider',
-	  components: getComponents(),
-	  inject: {
-	    theme: {
-	      from: 'theme_reactivesearch'
-	    }
-	  },
-	  data: function data() {
-	    var state = {
-	      currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
-	      stats: []
-	    };
-	    return state;
-	  },
-	  props: {
-	    beforeValueChange: types.func,
-	    className: Q.string.def(''),
-	    range: Q.shape({
-	      start: Q.integer.def(0),
-	      end: Q.integer.def(10)
-	    }),
-	    rangeLabels: types.rangeLabels,
-	    componentId: types.stringRequired,
-	    customQuery: types.func,
-	    data: types.data,
-	    dataField: types.stringRequired,
-	    defaultValue: types.range,
-	    value: types.range,
-	    filterLabel: types.string,
-	    innerClass: types.style,
-	    react: types.react,
-	    showFilter: Q.bool.def(true),
-	    showCheckbox: Q.bool.def(true),
-	    title: types.title,
-	    URLParams: Q.bool.def(false),
-	    sliderOptions: Q.object.def({}),
-	    nestedField: types.string,
-	    index: Q.string,
-	    endpoint: types.endpointConfig
-	  },
-	  methods: {
-	    handleSliderChange: function handleSliderChange(values) {
-	      var value = this.$props.value;
-	      if (value === undefined) {
-	        this.handleChange(values);
-	      } else {
-	        this.$emit('change', {
-	          start: values[0],
-	          end: values[1]
-	        });
-	      }
-	    },
-	    handleSlider: function handleSlider() {
-	      var sliderValues = this.$refs.slider.getValue();
-	      this.handleSliderChange(sliderValues);
-	    },
-	    handleChange: function handleChange(currentValue, props) {
-	      var _this = this;
-	      if (props === void 0) {
-	        props = this.$props;
-	      }
-	      var performUpdate = function performUpdate() {
-	        _this.currentValue = currentValue;
-	        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
-	        _this.$emit('valueChange', {
-	          start: currentValue[0],
-	          end: currentValue[1]
-	        });
-	        _this.$emit('value-change', {
-	          start: currentValue[0],
-	          end: currentValue[1]
-	        });
-	      };
-	      checkValueChange$9(props.componentId, {
-	        start: currentValue[0],
-	        end: currentValue[1]
-	      }, props.beforeValueChange, performUpdate);
-	    },
-	    updateQueryHandler: function updateQueryHandler(value, props) {
-	      var customQuery = props.customQuery;
-	      var query = RangeSlider.defaultQuery(value, props);
-	      if (customQuery) {
-	        var _ref = customQuery(value, props) || {};
-	        query = _ref.query;
-	        var customQueryOptions = getOptionsFromQuery$3(customQuery(value, props));
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	        this.setQueryOptions(props.componentId, customQueryOptions, false);
-	      }
-	      var showFilter = props.showFilter,
-	        _props$range = props.range,
-	        start = _props$range.start,
-	        end = _props$range.end;
-	      var currentStart = value[0],
-	        currentEnd = value[1];
-	      // check if the slider is at its initial position
-	      var isInitialValue = currentStart === start && currentEnd === end;
-	      this.updateQuery({
-	        componentId: props.componentId,
-	        query: query,
-	        value: value,
-	        label: props.filterLabel,
-	        showFilter: showFilter && !isInitialValue,
-	        URLParams: props.URLParams,
-	        componentType: constants_1$1.rangeSlider
-	      });
-	    }
-	  },
-	  watch: {
-	    defaultValue: function defaultValue(newVal) {
-	      this.handleChange(RangeSlider.parseValue(newVal, this.$props));
-	    },
-	    value: function value(newVal, oldVal) {
-	      if (!isEqual$d(newVal, oldVal)) {
-	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
-	      }
-	    },
-	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$d(this.$data.currentValue, newVal)) {
-	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
-	        this.$emit('change', newVal);
-	      }
-	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-	        this.updateQueryHandler(this.$data.currentValue, this.$props);
-	      }
-	    }
-	  },
-	  created: function created() {
-	    if (!this.$props.range) {
-	      console.error('%crange is not defined. Read more about this at https://opensource.appbase.io/reactive-manual/vue/range-components/rangeslider.html#props', 'font-size: 12.5px;');
-	    }
-
-	    // Set custom query in store
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	    var _this$$props = this.$props,
-	      value = _this$$props.value,
-	      defaultValue = _this$$props.defaultValue;
-	    var selectedValue = this.selectedValue;
-	    if (this.$props.range) {
-	      if (Array.isArray(selectedValue)) {
-	        this.handleChange(selectedValue);
-	      } else if (selectedValue) {
-	        this.handleChange(RangeSlider.parseValue(selectedValue, this.$props));
-	      } else if (value) {
-	        this.handleChange(RangeSlider.parseValue(value, this.$props));
-	      } else if (defaultValue) {
-	        this.handleChange(RangeSlider.parseValue(defaultValue, this.$props));
-	      }
-	    }
-	  },
-	  render: function render() {
-	    var _this2 = this;
-	    return vue.createVNode(Container, {
-	      "class": this.$props.className
-	    }, {
-	      "default": function _default() {
-	        return [_this2.$props.title && vue.createVNode(Title, {
-	          "class": getClassName$d(_this2.$props.innerClass, 'title')
-	        }, {
-	          "default": function _default() {
-	            return [_this2.$props.title];
-	          }
-	        }), _this2.$props.range ? vue.createVNode(NoSSR, null, {
+	        }), vue.createVNode(UL, {
+	          "class": getClassName$c(_this2.$props.innerClass, 'list')
+	        }, _isSlot$b(_slot = _this2.$props.data.map(function (item) {
+	          var selected = !!_this2.$data.currentValue && _this2.$data.currentValue.label === item.label;
+	          return vue.createVNode("li", {
+	            "key": item.label,
+	            "class": "" + (selected ? 'active' : '')
+	          }, [vue.createVNode(Checkbox, vue.mergeProps(babelHelperVueTransformOn({
+	            click: _this2.handleClick
+	          }), {
+	            "class": getClassName$c(_this2.$props.innerClass, 'checkbox'),
+	            "id": _this2.$props.componentId + "-" + item.label,
+	            "name": _this2.$props.componentId,
+	            "value": item.label,
+	            "type": "Checkbox",
+	            "show": _this2.$props.showCheckbox,
+	            "checked": _this2.selectedValues[item.label]
+	          }), null), vue.createVNode("label", {
+	            "class": getClassName$c(_this2.$props.innerClass, 'label'),
+	            "for": _this2.$props.componentId + "-" + item.label
+	          }, [item.label])]);
+	        })) ? _slot : {
 	          "default": function _default() {
-	            return [vue.createVNode(Slider, {
-	              "class": getClassName$d(_this2.$props.innerClass, 'slider')
-	            }, {
-	              "default": function _default() {
-	                return [vue.createVNode(vue.resolveComponent("vue-slider-component"), vue.mergeProps({
-	                  "ref": "slider",
-	                  "modelValue": _this2.currentValue,
-	                  "min": _this2.$props.range.start,
-	                  "max": _this2.$props.range.end,
-	                  "dotSize": 20,
-	                  "height": 4,
-	                  "enable-cross": false,
-	                  "onDrag-end": _this2.handleSlider,
-	                  "tooltip": "always"
-	                }, _this2.$props.sliderOptions), null), _this2.$props.rangeLabels && vue.createVNode("div", {
-	                  "class": "label-container"
-	                }, [vue.createVNode("label", {
-	                  "class": getClassName$d(_this2.$props.innerClass, 'label') || 'range-label-left'
-	                }, [_this2.$props.rangeLabels.start]), vue.createVNode("label", {
-	                  "class": getClassName$d(_this2.$props.innerClass, 'label') || 'range-label-right'
-	                }, [_this2.$props.rangeLabels.end])])];
-	              }
-	            })];
+	            return [_slot];
 	          }
-	        }) : null];
+	        })];
 	      }
 	    });
 	  }
 	};
-	RangeSlider.defaultQuery = function (value, props) {
+	MultiRange.parseValue = function (value, props) {
+	  return value ? props.data.filter(function (item) {
+	    return value.includes(item.label);
+	  }) : null;
+	};
+	MultiRange.defaultQuery = function (value, props) {
 	  return {
 	    query: {
 	      queryFormat: props.queryFormat,
@@ -23671,58 +25567,40 @@
 	    }
 	  };
 	};
-	RangeSlider.parseValue = function (value, props) {
-	  if (value) {
-	    return Array.isArray(value) ? value : [value.start, value.end];
-	  }
-	  if (props.range) {
-	    return [props.range.start, props.range.end];
-	  }
-	  return [];
-	};
-	var mapStateToProps$c = function mapStateToProps(state, props) {
+	var mapStateToProps$d = function mapStateToProps(state, props) {
 	  return {
-	    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
-	    : [],
-	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId]
 	  };
 	};
-	var mapDispatchtoProps$a = {
+	var mapDispatchtoProps$b = {
 	  updateQuery: updateQuery$a,
-	  setQueryOptions: setQueryOptions$9,
+	  setQueryOptions: setQueryOptions$a,
 	  setCustomQuery: setCustomQuery$9
 	};
-	var RangeConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$a)(RangeSlider), {
-	  componentType: constants_1$1.rangeSlider
+	var RangeConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$b)(MultiRange), {
+	  componentType: constants_1$1.multiRange
 	}));
-	RangeConnected$3.name = RangeSlider.name;
-	RangeConnected$3.defaultQuery = RangeSlider.defaultQuery;
-	RangeConnected$3.parseValue = RangeSlider.parseValue;
-	RangeConnected$3.hasInternalComponent = RangeSlider.hasInternalComponent;
-	RangeConnected$3.install = function (Vue) {
-	  Vue.component(RangeConnected$3.name, RangeConnected$3);
+	RangeConnected$2.name = MultiRange.name;
+	RangeConnected$2.defaultQuery = MultiRange.defaultQuery;
+	RangeConnected$2.parseValue = MultiRange.parseValue;
+	RangeConnected$2.hasInternalComponent = MultiRange.hasInternalComponent;
+	RangeConnected$2.install = function (Vue) {
+	  Vue.component(RangeConnected$2.name, RangeConnected$2);
 	};
-
 	// Add componentType for SSR
-	RangeConnected$3.componentType = constants_1$1.rangeSlider;
-
-	var _templateObject$p;
-	var alert = function alert(_ref) {
-	  var theme = _ref.theme;
-	  return "\n\tcolor: " + theme.colors.alertColor + ";\n";
-	};
-	var Content = styled('div')(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
-	  return props.alert && alert;
-	});
+	RangeConnected$2.componentType = constants_1$1.multiRange;
 
-	var getClassName$e = lib_8.getClassName,
+	var updateQuery$b = lib_5.updateQuery,
+	  setQueryOptions$b = lib_5.setQueryOptions,
+	  setCustomQuery$a = lib_5.setCustomQuery;
+	var checkValueChange$9 = lib_8.checkValueChange,
+	  getClassName$d = lib_8.getClassName,
+	  getOptionsFromQuery$3 = lib_8.getOptionsFromQuery,
 	  isEqual$e = lib_8.isEqual;
-	var RangeInput = {
-	  name: 'RangeInput',
-	  components: {
-	    RangeSlider: RangeConnected$3
-	  },
+	var RangeSlider = {
+	  name: 'RangeSlider',
+	  components: getComponents(),
 	  inject: {
 	    theme: {
 	      from: 'theme_reactivesearch'
@@ -23730,43 +25608,27 @@
 	  },
 	  data: function data() {
 	    var state = {
-	      currentValue: {
-	        start: this.$props.range ? this.$props.range.start : 0,
-	        end: this.$props.range ? this.$props.range.end : 10
-	      },
-	      isStartValid: true,
-	      isEndValid: true
+	      currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
+	      stats: []
 	    };
 	    return state;
 	  },
 	  props: {
-	    className: {
-	      types: types.string,
-	      "default": ''
-	    },
-	    defaultValue: types.range,
-	    validateRange: types.func,
-	    value: types.range,
-	    dataField: types.stringRequired,
-	    innerClass: types.style,
-	    range: {
-	      types: types.range,
-	      "default": function _default() {
-	        return {
-	          start: 0,
-	          end: 10
-	        };
-	      }
-	    },
+	    beforeValueChange: types.func,
+	    className: Q.string.def(''),
+	    range: Q.shape({
+	      start: Q.integer.def(0),
+	      end: Q.integer.def(10)
+	    }),
 	    rangeLabels: types.rangeLabels,
-	    stepValue: types.number,
-	    componentStyle: types.style,
 	    componentId: types.stringRequired,
-	    includeNullValues: Q.bool,
-	    beforeValueChange: types.func,
 	    customQuery: types.func,
 	    data: types.data,
+	    dataField: types.stringRequired,
+	    defaultValue: types.range,
+	    value: types.range,
 	    filterLabel: types.string,
+	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: Q.bool.def(true),
 	    showCheckbox: Q.bool.def(true),
@@ -23774,524 +25636,521 @@
 	    URLParams: Q.bool.def(false),
 	    sliderOptions: Q.object.def({}),
 	    nestedField: types.string,
+	    index: Q.string,
 	    endpoint: types.endpointConfig
 	  },
 	  methods: {
-	    shouldUpdate: function shouldUpdate(value) {
-	      var validateRange = this.$props.validateRange;
-	      if (validateRange && value) {
-	        return validateRange([value.start, value.end]);
-	      }
-	      if (value) {
-	        return value.start <= value.end;
+	    handleSliderChange: function handleSliderChange(values) {
+	      var value = this.$props.value;
+	      if (value === undefined) {
+	        this.handleChange(values);
+	      } else {
+	        this.$emit('change', {
+	          start: values[0],
+	          end: values[1]
+	        });
 	      }
-	      return false;
 	    },
-	    isControlled: function isControlled() {
-	      if (this.$props.value && this.$attrs) {
-	        return true;
-	      }
-	      return false;
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
+	      this.handleSliderChange(sliderValues);
 	    },
-	    handleChange: function handleChange(value, event) {
-	      var currentValue = value;
-	      if (this.shouldUpdate(value) && !isEqual$e(value, this.currentValue)) {
-	        switch (event) {
-	          case 'change':
-	            if (!value) {
-	              currentValue = {
-	                start: this.$props.range ? this.$props.range.start : 0,
-	                end: this.$props.range ? this.$props.range.end : 10
-	              };
-	            }
-	            this.currentValue = currentValue;
-	            this.$emit('change', this.currentValue);
-	            break;
-	          case 'value-change':
-	            this.$emit('valueChange', this.currentValue);
-	            this.$emit('value-change', this.currentValue);
-	            break;
-	          default:
-	            this.currentValue = _extends({}, currentValue);
-	            break;
-	        }
+	    handleChange: function handleChange(currentValue, props) {
+	      var _this = this;
+	      if (props === void 0) {
+	        props = this.$props;
 	      }
+	      var performUpdate = function performUpdate() {
+	        _this.currentValue = currentValue;
+	        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
+	        _this.$emit('valueChange', {
+	          start: currentValue[0],
+	          end: currentValue[1]
+	        });
+	        _this.$emit('value-change', {
+	          start: currentValue[0],
+	          end: currentValue[1]
+	        });
+	      };
+	      checkValueChange$9(props.componentId, {
+	        start: currentValue[0],
+	        end: currentValue[1]
+	      }, props.beforeValueChange, performUpdate);
 	    },
-	    handleOnChange: function handleOnChange(value) {
-	      this.handleChange(value || this.$props.range, 'change');
-	    },
-	    handleValueChange: function handleValueChange(value) {
-	      this.handleChange(value, 'value-change');
-	    },
-	    handleInputChange: function handleInputChange(e) {
-	      var _e$target = e.target,
-	        name = _e$target.name,
-	        value = _e$target.value;
-	      if (Number.isNaN(value)) {
-	        if (name === 'start') {
-	          this.isStartValid = false;
-	        } else {
-	          this.isEndValid = false;
-	        }
-	      } else if (name === 'start' && !this.isStartValid) {
-	        this.isStartValid = true;
-	      } else if (name === 'end' && !this.isEndValid) {
-	        this.isEndValid = true;
-	      }
-	      if (this.isStartValid && this.isEndValid) {
-	        if (name === 'start') {
-	          this.handleChange({
-	            start: Number(value),
-	            end: this.currentValue.end
-	          }, 'change');
-	        } else {
-	          this.handleChange({
-	            start: this.currentValue.start,
-	            end: Number(value)
-	          }, 'change');
-	        }
+	    updateQueryHandler: function updateQueryHandler(value, props) {
+	      var customQuery = props.customQuery;
+	      var query = RangeSlider.defaultQuery(value, props);
+	      if (customQuery) {
+	        var _ref = customQuery(value, props) || {};
+	        query = _ref.query;
+	        var customQueryOptions = getOptionsFromQuery$3(customQuery(value, props));
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	        this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      }
+	      var showFilter = props.showFilter,
+	        _props$range = props.range,
+	        start = _props$range.start,
+	        end = _props$range.end;
+	      var currentStart = value[0],
+	        currentEnd = value[1];
+	      // check if the slider is at its initial position
+	      var isInitialValue = currentStart === start && currentEnd === end;
+	      this.updateQuery({
+	        componentId: props.componentId,
+	        query: query,
+	        value: value,
+	        label: props.filterLabel,
+	        showFilter: showFilter && !isInitialValue,
+	        URLParams: props.URLParams,
+	        componentType: constants_1$1.rangeSlider
+	      });
 	    }
 	  },
 	  watch: {
-	    defaultValue: function defaultValue(newVal, oldVal) {
-	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
-	        this.handleChange(newVal);
-	      }
+	    defaultValue: function defaultValue(newVal) {
+	      this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	    },
 	    value: function value(newVal, oldVal) {
 	      if (!isEqual$e(newVal, oldVal)) {
-	        if (this.isControlled()) {
-	          this.handleChange(newVal, 'change');
-	        }
+	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
+	      }
+	    },
+	    selectedValue: function selectedValue(newVal) {
+	      if (!isEqual$e(this.$data.currentValue, newVal)) {
+	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
+	        this.$emit('change', newVal);
+	      }
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.updateQueryHandler(this.$data.currentValue, this.$props);
 	      }
 	    }
 	  },
 	  created: function created() {
-	    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
-	      this.handleChange(this.$props.defaultValue);
+	    if (!this.$props.range) {
+	      console.error('%crange is not defined. Read more about this at https://opensource.appbase.io/reactive-manual/vue/range-components/rangeslider.html#props', 'font-size: 12.5px;');
 	    }
-	    if (this.isControlled()) {
-	      this.handleChange(this.$props.value, 'change');
+
+	    // Set custom query in store
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	    var _this$$props = this.$props,
+	      value = _this$$props.value,
+	      defaultValue = _this$$props.defaultValue;
+	    var selectedValue = this.selectedValue;
+	    if (this.$props.range) {
+	      if (Array.isArray(selectedValue)) {
+	        this.handleChange(selectedValue);
+	      } else if (selectedValue) {
+	        this.handleChange(RangeSlider.parseValue(selectedValue, this.$props));
+	      } else if (value) {
+	        this.handleChange(RangeSlider.parseValue(value, this.$props));
+	      } else if (defaultValue) {
+	        this.handleChange(RangeSlider.parseValue(defaultValue, this.$props));
+	      }
 	    }
 	  },
 	  render: function render() {
-	    var _this = this;
-	    var _this$$props = this.$props,
-	      className = _this$$props.className,
-	      dataField = _this$$props.dataField,
-	      range = _this$$props.range,
-	      rangeLabels = _this$$props.rangeLabels,
-	      componentId = _this$$props.componentId,
-	      innerClass = _this$$props.innerClass,
-	      stepValue = _this$$props.stepValue,
-	      componentStyle = _this$$props.componentStyle,
-	      themePreset = _this$$props.themePreset,
-	      includeNullValues = _this$$props.includeNullValues,
-	      beforeValueChange = _this$$props.beforeValueChange,
-	      customQuery = _this$$props.customQuery,
-	      data = _this$$props.data,
-	      filterLabel = _this$$props.filterLabel,
-	      react = _this$$props.react,
-	      showFilter = _this$$props.showFilter,
-	      showCheckbox = _this$$props.showCheckbox,
-	      title = _this$$props.title,
-	      URLParams = _this$$props.URLParams,
-	      sliderOptions = _this$$props.sliderOptions,
-	      nestedField = _this$$props.nestedField;
+	    var _this2 = this;
 	    return vue.createVNode(Container, {
-	      "style": componentStyle,
-	      "class": className
+	      "class": this.$props.className
 	    }, {
 	      "default": function _default() {
-	        return [vue.createVNode(RangeConnected$3, vue.mergeProps(babelHelperVueTransformOn({
-	          change: _this.handleOnChange,
-	          'value-change': _this.handleValueChange
-	        }), {
-	          "componentId": componentId,
-	          "value": {
-	            start: _this.currentValue.start,
-	            end: _this.currentValue.end
-	          },
-	          "range": range,
-	          "dataField": dataField,
-	          "rangeLabels": rangeLabels,
-	          "includeNullValues": includeNullValues,
-	          "beforeValueChange": beforeValueChange,
-	          "customQuery": customQuery,
-	          "data": data,
-	          "filterLabel": filterLabel,
-	          "react": react,
-	          "showFilter": showFilter,
-	          "showCheckbox": showCheckbox,
-	          "title": title,
-	          "URLParams": URLParams,
-	          "sliderOptions": sliderOptions,
-	          "nestedField": nestedField
-	        }), null), vue.createVNode(Flex, {
-	          "class": getClassName$e(innerClass, 'input-container') || ''
+	        return [_this2.$props.title && vue.createVNode(Title, {
+	          "class": getClassName$d(_this2.$props.innerClass, 'title')
 	        }, {
 	          "default": function _default() {
-	            return [vue.createVNode(Flex, {
-	              "direction": "column",
-	              "flex": 2
-	            }, {
-	              "default": function _default() {
-	                return [vue.createVNode(Input, vue.mergeProps(babelHelperVueTransformOn({
-	                  change: _this.handleInputChange
-	                }), {
-	                  "key": componentId + "-start-value",
-	                  "name": "start",
-	                  "type": "number",
-	                  "step": stepValue,
-	                  "themePreset": themePreset,
-	                  "aria-label": componentId + "-start-input",
-	                  "min": _this.$props.range ? _this.$props.range.start : 0,
-	                  "class": getClassName$e(innerClass, 'input') || '',
-	                  "alert": !_this.isStartValid,
-	                  "value": _this.currentValue.start || 0
-	                }), null), !_this.isStartValid && vue.createVNode(Content, {
-	                  "alert": true
-	                }, {
-	                  "default": function _default() {
-	                    return [vue.createTextVNode("Input range is invalid")];
-	                  }
-	                })];
-	              }
-	            }), vue.createVNode(Flex, {
-	              "justifyContent": "center",
-	              "alignItems": "center",
-	              "flex": 1
-	            }, {
-	              "default": function _default() {
-	                return [vue.createTextVNode("-")];
-	              }
-	            }), vue.createVNode(Flex, {
-	              "direction": "column",
-	              "flex": 2
+	            return [_this2.$props.title];
+	          }
+	        }), _this2.$props.range ? vue.createVNode(NoSSR, null, {
+	          "default": function _default() {
+	            return [vue.createVNode(Slider, {
+	              "class": getClassName$d(_this2.$props.innerClass, 'slider')
 	            }, {
 	              "default": function _default() {
-	                return [vue.createVNode(Input, vue.mergeProps(babelHelperVueTransformOn({
-	                  change: _this.handleInputChange
-	                }), {
-	                  "key": componentId + "-end-value",
-	                  "name": "end",
-	                  "type": "number",
-	                  "step": stepValue,
-	                  "themePreset": themePreset,
-	                  "aria-label": componentId + "-end-input",
-	                  "max": _this.$props.range ? _this.$props.range.end : 10,
-	                  "class": getClassName$e(innerClass, 'input') || '',
-	                  "alert": !_this.isEndValid,
-	                  "value": _this.currentValue.end || 0
-	                }), null), !_this.isEndValid && vue.createVNode(Content, {
-	                  "alert": true
-	                }, {
-	                  "default": function _default() {
-	                    return [vue.createTextVNode("Input range is invalid")];
-	                  }
-	                })];
+	                return [vue.createVNode(vue.resolveComponent("vue-slider-component"), vue.mergeProps({
+	                  "ref": "slider",
+	                  "modelValue": _this2.currentValue,
+	                  "min": _this2.$props.range.start,
+	                  "max": _this2.$props.range.end,
+	                  "dotSize": 20,
+	                  "height": 4,
+	                  "enable-cross": false,
+	                  "onDrag-end": _this2.handleSlider,
+	                  "tooltip": "always"
+	                }, _this2.$props.sliderOptions), null), _this2.$props.rangeLabels && vue.createVNode("div", {
+	                  "class": "label-container"
+	                }, [vue.createVNode("label", {
+	                  "class": getClassName$d(_this2.$props.innerClass, 'label') || 'range-label-left'
+	                }, [_this2.$props.rangeLabels.start]), vue.createVNode("label", {
+	                  "class": getClassName$d(_this2.$props.innerClass, 'label') || 'range-label-right'
+	                }, [_this2.$props.rangeLabels.end])])];
 	              }
 	            })];
 	          }
-	        })];
+	        }) : null];
 	      }
 	    });
 	  }
 	};
-	var mapStateToProps$d = function mapStateToProps(state) {
+	RangeSlider.defaultQuery = function (value, props) {
 	  return {
-	    themePreset: state.config.themePreset
+	    query: {
+	      queryFormat: props.queryFormat,
+	      dataField: props.dataField,
+	      value: value,
+	      showMissing: props.showMissing
+	    }
 	  };
 	};
-	var RangeConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$d, {})(RangeInput), {
-	  componentType: constants_1$1.rangeInput
+	RangeSlider.parseValue = function (value, props) {
+	  if (value) {
+	    return Array.isArray(value) ? value : [value.start, value.end];
+	  }
+	  if (props.range) {
+	    return [props.range.start, props.range.end];
+	  }
+	  return [];
+	};
+	var mapStateToProps$e = function mapStateToProps(state, props) {
+	  return {
+	    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
+	    : [],
+	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
+	    componentProps: state.props[props.componentId]
+	  };
+	};
+	var mapDispatchtoProps$c = {
+	  updateQuery: updateQuery$b,
+	  setQueryOptions: setQueryOptions$b,
+	  setCustomQuery: setCustomQuery$a
+	};
+	var RangeConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$e, mapDispatchtoProps$c)(RangeSlider), {
+	  componentType: constants_1$1.rangeSlider
 	}));
-	RangeConnected$4.name = RangeInput.name;
-	RangeConnected$4.install = function (Vue) {
-	  Vue.component(RangeConnected$4.name, RangeConnected$4);
+	RangeConnected$3.name = RangeSlider.name;
+	RangeConnected$3.defaultQuery = RangeSlider.defaultQuery;
+	RangeConnected$3.parseValue = RangeSlider.parseValue;
+	RangeConnected$3.hasInternalComponent = RangeSlider.hasInternalComponent;
+	RangeConnected$3.install = function (Vue) {
+	  Vue.component(RangeConnected$3.name, RangeConnected$3);
 	};
 
-	// Add componentType for SSR
-	RangeConnected$4.componentType = constants_1$1.rangeInput;
-
-	var _excluded$1 = ["options"];
-	var updateQuery$b = lib_5.updateQuery,
-	  setQueryOptions$a = lib_5.setQueryOptions,
-	  setCustomQuery$a = lib_5.setCustomQuery,
-	  setDefaultQuery$6 = lib_5.setDefaultQuery;
-	var parseHits$1 = lib_8.parseHits,
-	  isEqual$f = lib_8.isEqual,
-	  getCompositeAggsQuery$4 = lib_8.getCompositeAggsQuery,
-	  getResultStats$2 = lib_8.getResultStats,
-	  extractQueryFromCustomQuery$6 = lib_8.extractQueryFromCustomQuery,
-	  getOptionsForCustomQuery$6 = lib_8.getOptionsForCustomQuery;
-	var ReactiveComponent = {
-	  name: 'ReactiveComponent',
+	// Add componentType for SSR
+	RangeConnected$3.componentType = constants_1$1.rangeSlider;
+
+	var _templateObject$q;
+	var alert = function alert(_ref) {
+	  var theme = _ref.theme;
+	  return "\n\tcolor: " + theme.colors.alertColor + ";\n";
+	};
+	var Content = styled('div')(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
+	  return props.alert && alert;
+	});
+
+	var getClassName$e = lib_8.getClassName,
+	  isEqual$f = lib_8.isEqual;
+	var RangeInput = {
+	  name: 'RangeInput',
+	  components: {
+	    RangeSlider: RangeConnected$3
+	  },
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
+	  data: function data() {
+	    var state = {
+	      currentValue: {
+	        start: this.$props.range ? this.$props.range.start : 0,
+	        end: this.$props.range ? this.$props.range.end : 10
+	      },
+	      isStartValid: true,
+	      isEndValid: true
+	    };
+	    return state;
+	  },
 	  props: {
+	    className: {
+	      types: types.string,
+	      "default": ''
+	    },
+	    defaultValue: types.range,
+	    validateRange: types.func,
+	    value: types.range,
+	    dataField: types.stringRequired,
+	    innerClass: types.style,
+	    range: {
+	      types: types.range,
+	      "default": function _default() {
+	        return {
+	          start: 0,
+	          end: 10
+	        };
+	      }
+	    },
+	    rangeLabels: types.rangeLabels,
+	    stepValue: types.number,
+	    componentStyle: types.style,
 	    componentId: types.stringRequired,
-	    aggregationField: types.string,
-	    aggregationSize: Q.number,
-	    size: Q.number,
-	    defaultQuery: types.func,
+	    includeNullValues: Q.bool,
+	    beforeValueChange: types.func,
 	    customQuery: types.func,
+	    data: types.data,
 	    filterLabel: types.string,
 	    react: types.react,
 	    showFilter: Q.bool.def(true),
+	    showCheckbox: Q.bool.def(true),
+	    title: types.title,
 	    URLParams: Q.bool.def(false),
-	    distinctField: types.string,
-	    distinctFieldConfig: types.props,
-	    index: Q.string,
+	    sliderOptions: Q.object.def({}),
+	    nestedField: types.string,
 	    endpoint: types.endpointConfig
 	  },
-	  created: function created() {
-	    var _this = this;
-	    var props = this.$props;
-	    this.internalComponent = null;
-	    this.$defaultQuery = null;
-	    // Set custom query in store
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	    var customQuery = props.customQuery,
-	      componentId = props.componentId,
-	      filterLabel = props.filterLabel,
-	      showFilter = props.showFilter,
-	      URLParams = props.URLParams;
-	    if (customQuery) {
-	      var calcCustomQuery = customQuery(this.selectedValue, props);
-	      var query = extractQueryFromCustomQuery$6(calcCustomQuery);
-	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$6(calcCustomQuery) : null;
-	      if (customQueryOptions) {
-	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-	      this.updateQuery({
-	        componentId: componentId,
-	        query: query,
-	        value: this.selectedValue || null,
-	        label: filterLabel,
-	        showFilter: showFilter,
-	        URLParams: URLParams
-	      });
-	    }
-	    this.setQuery = function (_ref) {
-	      var options = _ref.options,
-	        obj = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-	      var queryToBeSet = obj.query;
-
-	      // when enableAppbase is true, Backend throws error because of repeated query in request body
-	      if (queryToBeSet && queryToBeSet.query) {
-	        queryToBeSet = queryToBeSet.query;
-	      }
-	      var customQueryCalc = _extends({}, options, {
-	        query: queryToBeSet
-	      });
-	      var rsAPIQuery = customQueryCalc;
-	      // handle stored queries
-	      if (queryToBeSet && queryToBeSet.id) {
-	        rsAPIQuery = queryToBeSet;
-	      }
-	      // Update customQuery field for RS API
-	      _this.setCustomQuery(props.componentId, rsAPIQuery);
-	      if (options) {
-	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
-	      }
-	      _this.updateQuery(_extends({}, obj, {
-	        query: customQueryCalc.query,
-	        componentId: props.componentId,
-	        label: props.filterLabel,
-	        showFilter: props.showFilter,
-	        URLParams: props.URLParams
-	      }));
-	    };
-	    if (props.defaultQuery) {
-	      this.internalComponent = props.componentId + "__internal";
-	    }
-	    if (this.internalComponent && this.$props.defaultQuery) {
-	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
-	      var _query = extractQueryFromCustomQuery$6(this.$defaultQuery);
-	      var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
-	      if (queryOptions) {
-	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-	      this.updateQuery({
-	        componentId: this.internalComponent,
-	        query: _query
-	      });
-	    }
-	  },
-	  watch: {
-	    hits: function hits(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    rawData: function rawData(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    aggregations: function aggregations(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	  methods: {
+	    shouldUpdate: function shouldUpdate(value) {
+	      var validateRange = this.$props.validateRange;
+	      if (validateRange && value) {
+	        return validateRange([value.start, value.end]);
 	      }
-	    },
-	    aggregationData: function aggregationData(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	      if (value) {
+	        return value.start <= value.end;
 	      }
+	      return false;
 	    },
-	    promotedResults: function promotedResults(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	    isControlled: function isControlled() {
+	      if (this.$props.value && this.$attrs) {
+	        return true;
 	      }
+	      return false;
 	    },
-	    hidden: function hidden(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	    handleChange: function handleChange(value, event) {
+	      var currentValue = value;
+	      if (this.shouldUpdate(value) && !isEqual$f(value, this.currentValue)) {
+	        switch (event) {
+	          case 'change':
+	            if (!value) {
+	              currentValue = {
+	                start: this.$props.range ? this.$props.range.start : 0,
+	                end: this.$props.range ? this.$props.range.end : 10
+	              };
+	            }
+	            this.currentValue = currentValue;
+	            this.$emit('change', this.currentValue);
+	            break;
+	          case 'value-change':
+	            this.$emit('valueChange', this.currentValue);
+	            this.$emit('value-change', this.currentValue);
+	            break;
+	          default:
+	            this.currentValue = _extends({}, currentValue);
+	            break;
+	        }
 	      }
 	    },
-	    total: function total(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
+	    handleOnChange: function handleOnChange(value) {
+	      this.handleChange(value || this.$props.range, 'change');
 	    },
-	    time: function time(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
+	    handleValueChange: function handleValueChange(value) {
+	      this.handleChange(value, 'value-change');
 	    },
-	    defaultQuery: function defaultQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$6(this.$defaultQuery);
-	        var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
-	        if (queryOptions) {
-	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-	        // Update default query for RS API
-	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: this.internalComponent,
-	          query: query
-	        });
+	    handleInputChange: function handleInputChange(e) {
+	      var _e$target = e.target,
+	        name = _e$target.name,
+	        value = _e$target.value;
+	      if (Number.isNaN(value)) {
+	        if (name === 'start') {
+	          this.isStartValid = false;
+	        } else {
+	          this.isEndValid = false;
+	        }
+	      } else if (name === 'start' && !this.isStartValid) {
+	        this.isStartValid = true;
+	      } else if (name === 'end' && !this.isEndValid) {
+	        this.isEndValid = true;
 	      }
-	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        var componentId = this.$props.componentId;
-	        this.$customQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$6(this.$customQuery);
-	        var queryOptions = getOptionsForCustomQuery$6(this.$customQuery);
-	        if (queryOptions) {
-	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-
-	        // Update custom query for RS API
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: componentId,
-	          query: query
-	        });
+	      if (this.isStartValid && this.isEndValid) {
+	        if (name === 'start') {
+	          this.handleChange({
+	            start: Number(value),
+	            end: this.currentValue.end
+	          }, 'change');
+	        } else {
+	          this.handleChange({
+	            start: this.currentValue.start,
+	            end: Number(value)
+	          }, 'change');
+	        }
 	      }
 	    }
 	  },
-	  render: function render() {
-	    try {
-	      var dom = this.$slots["default"];
-	      var error = this.error,
-	        isLoading = this.isLoading,
-	        selectedValue = this.selectedValue;
-	      var propsToBePassed = _extends({
-	        error: error,
-	        loading: isLoading
-	      }, this.getData(), {
-	        value: selectedValue,
-	        setQuery: this.setQuery
-	      });
-	      return vue.createVNode("div", null, [dom(propsToBePassed)]);
-	    } catch (e) {
-	      return null;
-	    }
-	  },
-	  methods: {
-	    getAggsQuery: function getAggsQuery() {
-	      if (this.aggregationField) {
-	        return {
-	          aggs: getCompositeAggsQuery$4({
-	            props: this.$props,
-	            showTopHits: true,
-	            value: this.selectedValue
-	          }).aggs
-	        };
+	  watch: {
+	    defaultValue: function defaultValue(newVal, oldVal) {
+	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
+	        this.handleChange(newVal);
 	      }
-	      return {};
 	    },
-	    getData: function getData() {
-	      var hits = this.hits,
-	        aggregations = this.aggregations,
-	        aggregationData = this.aggregationData,
-	        promotedResults = this.promotedResults,
-	        rawData = this.rawData;
-	      var filteredResults = parseHits$1(hits);
-	      if (promotedResults.length) {
-	        var ids = promotedResults.map(function (item) {
-	          return item._id;
-	        }).filter(Boolean);
-	        if (ids) {
-	          filteredResults = filteredResults.filter(function (item) {
-	            return !ids.includes(item._id);
-	          });
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$f(newVal, oldVal)) {
+	        if (this.isControlled()) {
+	          this.handleChange(newVal, 'change');
 	        }
-	        filteredResults = [].concat(promotedResults, filteredResults);
 	      }
-	      return {
-	        data: filteredResults,
-	        aggregationData: aggregationData,
-	        rawData: rawData,
-	        aggregations: aggregations,
-	        promotedData: promotedResults,
-	        resultStats: this.stats
-	      };
 	    }
 	  },
-	  computed: {
-	    stats: function stats() {
-	      return getResultStats$2(this);
+	  created: function created() {
+	    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
+	      this.handleChange(this.$props.defaultValue);
+	    }
+	    if (this.isControlled()) {
+	      this.handleChange(this.$props.value, 'change');
 	    }
+	  },
+	  render: function render() {
+	    var _this = this;
+	    var _this$$props = this.$props,
+	      className = _this$$props.className,
+	      dataField = _this$$props.dataField,
+	      range = _this$$props.range,
+	      rangeLabels = _this$$props.rangeLabels,
+	      componentId = _this$$props.componentId,
+	      innerClass = _this$$props.innerClass,
+	      stepValue = _this$$props.stepValue,
+	      componentStyle = _this$$props.componentStyle,
+	      themePreset = _this$$props.themePreset,
+	      includeNullValues = _this$$props.includeNullValues,
+	      beforeValueChange = _this$$props.beforeValueChange,
+	      customQuery = _this$$props.customQuery,
+	      data = _this$$props.data,
+	      filterLabel = _this$$props.filterLabel,
+	      react = _this$$props.react,
+	      showFilter = _this$$props.showFilter,
+	      showCheckbox = _this$$props.showCheckbox,
+	      title = _this$$props.title,
+	      URLParams = _this$$props.URLParams,
+	      sliderOptions = _this$$props.sliderOptions,
+	      nestedField = _this$$props.nestedField;
+	    return vue.createVNode(Container, {
+	      "style": componentStyle,
+	      "class": className
+	    }, {
+	      "default": function _default() {
+	        return [vue.createVNode(RangeConnected$3, vue.mergeProps(babelHelperVueTransformOn({
+	          change: _this.handleOnChange,
+	          'value-change': _this.handleValueChange
+	        }), {
+	          "componentId": componentId,
+	          "value": {
+	            start: _this.currentValue.start,
+	            end: _this.currentValue.end
+	          },
+	          "range": range,
+	          "dataField": dataField,
+	          "rangeLabels": rangeLabels,
+	          "includeNullValues": includeNullValues,
+	          "beforeValueChange": beforeValueChange,
+	          "customQuery": customQuery,
+	          "data": data,
+	          "filterLabel": filterLabel,
+	          "react": react,
+	          "showFilter": showFilter,
+	          "showCheckbox": showCheckbox,
+	          "title": title,
+	          "URLParams": URLParams,
+	          "sliderOptions": sliderOptions,
+	          "nestedField": nestedField
+	        }), null), vue.createVNode(Flex, {
+	          "class": getClassName$e(innerClass, 'input-container') || ''
+	        }, {
+	          "default": function _default() {
+	            return [vue.createVNode(Flex, {
+	              "direction": "column",
+	              "flex": 2
+	            }, {
+	              "default": function _default() {
+	                return [vue.createVNode(Input, vue.mergeProps(babelHelperVueTransformOn({
+	                  change: _this.handleInputChange
+	                }), {
+	                  "key": componentId + "-start-value",
+	                  "name": "start",
+	                  "type": "number",
+	                  "step": stepValue,
+	                  "themePreset": themePreset,
+	                  "aria-label": componentId + "-start-input",
+	                  "min": _this.$props.range ? _this.$props.range.start : 0,
+	                  "class": getClassName$e(innerClass, 'input') || '',
+	                  "alert": !_this.isStartValid,
+	                  "value": _this.currentValue.start || 0
+	                }), null), !_this.isStartValid && vue.createVNode(Content, {
+	                  "alert": true
+	                }, {
+	                  "default": function _default() {
+	                    return [vue.createTextVNode("Input range is invalid")];
+	                  }
+	                })];
+	              }
+	            }), vue.createVNode(Flex, {
+	              "justifyContent": "center",
+	              "alignItems": "center",
+	              "flex": 1
+	            }, {
+	              "default": function _default() {
+	                return [vue.createTextVNode("-")];
+	              }
+	            }), vue.createVNode(Flex, {
+	              "direction": "column",
+	              "flex": 2
+	            }, {
+	              "default": function _default() {
+	                return [vue.createVNode(Input, vue.mergeProps(babelHelperVueTransformOn({
+	                  change: _this.handleInputChange
+	                }), {
+	                  "key": componentId + "-end-value",
+	                  "name": "end",
+	                  "type": "number",
+	                  "step": stepValue,
+	                  "themePreset": themePreset,
+	                  "aria-label": componentId + "-end-input",
+	                  "max": _this.$props.range ? _this.$props.range.end : 10,
+	                  "class": getClassName$e(innerClass, 'input') || '',
+	                  "alert": !_this.isEndValid,
+	                  "value": _this.currentValue.end || 0
+	                }), null), !_this.isEndValid && vue.createVNode(Content, {
+	                  "alert": true
+	                }, {
+	                  "default": function _default() {
+	                    return [vue.createTextVNode("Input range is invalid")];
+	                  }
+	                })];
+	              }
+	            })];
+	          }
+	        })];
+	      }
+	    });
 	  }
 	};
-	ReactiveComponent.hasInternalComponent = function (props) {
-	  return !!props.defaultQuery;
-	};
-	var mapStateToProps$e = function mapStateToProps(state, props) {
+	var mapStateToProps$f = function mapStateToProps(state) {
 	  return {
-	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
-	    aggregationData: state.compositeAggregations[props.componentId] || [],
-	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
-	    rawData: state.rawData[props.componentId],
-	    error: state.error[props.componentId],
-	    isLoading: state.isLoading[props.componentId],
-	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-	    promotedResults: state.promotedResults[props.componentId] || [],
-	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
-	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
-	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
-	    componentProps: state.props[props.componentId]
+	    themePreset: state.config.themePreset
 	  };
 	};
-	var mapDispatchtoProps$b = {
-	  setQueryOptions: setQueryOptions$a,
-	  updateQuery: updateQuery$b,
-	  setCustomQuery: setCustomQuery$a,
-	  setDefaultQuery: setDefaultQuery$6
+	var RangeConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$f, {})(RangeInput), {
+	  componentType: constants_1$1.rangeInput
+	}));
+	RangeConnected$4.name = RangeInput.name;
+	RangeConnected$4.install = function (Vue) {
+	  Vue.component(RangeConnected$4.name, RangeConnected$4);
 	};
-	var ConnectedComponent = ComponentWrapper$1(connect(mapStateToProps$e, mapDispatchtoProps$b)(ReactiveComponent), {
-	  componentType: constants_1$1.reactiveComponent
-	});
-	var RcConnected = PreferencesConsumer({
+
+	// Add componentType for SSR
+	RangeConnected$4.componentType = constants_1$1.rangeInput;
+
+	var RcConnected$1 = PreferencesConsumer({
 	  name: 'RcConnected',
 	  render: function render() {
-	    var component = ConnectedComponent;
+	    var component = RcConnected;
 	    switch (this.$attrs.componentType) {
 	      case constants_1$1.reactiveList:
 	        component = RLConnected;
@@ -24336,12 +26195,12 @@
 	    return vue.h(component, null, this.$slots);
 	  }
 	});
-	RcConnected.name = ReactiveComponent.name;
-	RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
+	RcConnected$1.name = RcConnected.name;
+	RcConnected$1.hasInternalComponent = RcConnected.hasInternalComponent;
 	// Add componentType for SSR
-	RcConnected.componentType = constants_1$1.reactiveComponent;
-	RcConnected.install = function (Vue) {
-	  Vue.component(RcConnected.name, RcConnected);
+	RcConnected$1.componentType = constants_1$1.reactiveComponent;
+	RcConnected$1.install = function (Vue) {
+	  Vue.component(RcConnected$1.name, RcConnected$1);
 	};
 
 	var setValue$2 = lib_5.setValue,
@@ -24502,24 +26361,24 @@
 	    }
 	  }
 	};
-	var mapStateToProps$f = function mapStateToProps(state) {
+	var mapStateToProps$g = function mapStateToProps(state) {
 	  return {
 	    components: state.components,
 	    selectedValues: state.selectedValues
 	  };
 	};
-	var mapDispatchtoProps$c = {
+	var mapDispatchtoProps$d = {
 	  clearValuesAction: clearValues,
 	  setValue: setValue$2,
 	  resetValuesToDefault: resetValuesToDefault
 	};
-	var RcConnected$1 = connect(mapStateToProps$f, mapDispatchtoProps$c)(SelectedFilters);
-	RcConnected$1.name = SelectedFilters.name;
-	RcConnected$1.install = function (Vue) {
-	  Vue.component(RcConnected$1.name, RcConnected$1);
+	var RcConnected$2 = connect(mapStateToProps$g, mapDispatchtoProps$d)(SelectedFilters);
+	RcConnected$2.name = SelectedFilters.name;
+	RcConnected$2.install = function (Vue) {
+	  Vue.component(RcConnected$2.name, RcConnected$2);
 	};
 
-	function _isSlot$a(s) {
+	function _isSlot$c(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var ResultCardTitle = {
@@ -24527,7 +26386,7 @@
 	  render: function render() {
 	    var _slot;
 	    var children = this.$slots["default"];
-	    return vue.createVNode(Title, this.$props, _isSlot$a(_slot = children()) ? _slot : {
+	    return vue.createVNode(Title, this.$props, _isSlot$c(_slot = children()) ? _slot : {
 	      "default": function _default() {
 	        return [_slot];
 	      }
@@ -24571,7 +26430,7 @@
 	};
 
 	var _excluded$3 = ["href", "target"];
-	function _isSlot$b(s) {
+	function _isSlot$d(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var ResultCard = {
@@ -24596,7 +26455,7 @@
 	      "href": href,
 	      "target": target,
 	      "rel": target === '_blank' ? 'noopener noreferrer' : null
-	    }, rest), _isSlot$b(_slot = children()) ? _slot : {
+	    }, rest), _isSlot$d(_slot = children()) ? _slot : {
 	      "default": function _default() {
 	        return [_slot];
 	      }
@@ -24654,7 +26513,7 @@
 	  Vue.component(ResultListImage.name, ResultListImage);
 	};
 
-	function _isSlot$c(s) {
+	function _isSlot$e(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var ResultListTitle = {
@@ -24662,7 +26521,7 @@
 	  render: function render() {
 	    var _slot;
 	    var children = this.$slots["default"];
-	    return vue.createVNode(Title, this.$props, _isSlot$c(_slot = children()) ? _slot : {
+	    return vue.createVNode(Title, this.$props, _isSlot$e(_slot = children()) ? _slot : {
 	      "default": function _default() {
 	        return [_slot];
 	      }
@@ -24674,7 +26533,7 @@
 	};
 
 	var _excluded$5 = ["href", "target"];
-	function _isSlot$d(s) {
+	function _isSlot$f(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
 	var ResultList = {
@@ -24723,7 +26582,7 @@
 	      "small": isSmall,
 	      "target": target,
 	      "rel": target === '_blank' ? 'noopener noreferrer' : null
-	    }, props), _isSlot$d(_slot = children()) ? _slot : {
+	    }, props), _isSlot$f(_slot = children()) ? _slot : {
 	      "default": function _default() {
 	        return [_slot];
 	      }
@@ -24952,7 +26811,7 @@
 	    }) : null;
 	  }
 	};
-	var mapStateToProps$g = function mapStateToProps(state, props) {
+	var mapStateToProps$h = function mapStateToProps(state, props) {
 	  return {
 	    selectedValues: filterByComponentIds(state.selectedValues, props),
 	    queryLog: filterByComponentIds(state.queryLog, props),
@@ -24969,10 +26828,10 @@
 	    components: state.components
 	  };
 	};
-	var mapDispatchtoProps$d = {
+	var mapDispatchtoProps$e = {
 	  setSearchStateFn: setSearchState
 	};
-	var StateProviderConnected = connect(mapStateToProps$g, mapDispatchtoProps$d)(StateProvider);
+	var StateProviderConnected = connect(mapStateToProps$h, mapDispatchtoProps$e)(StateProvider);
 	StateProviderConnected.name = StateProvider.name;
 	StateProviderConnected.install = function (Vue) {
 	  Vue.component(StateProviderConnected.name, StateProviderConnected);
@@ -27984,7 +29843,7 @@
 	var main = geohash;
 
 	var setStreaming = lib_5.setStreaming,
-	  setQueryOptions$b = lib_5.setQueryOptions,
+	  setQueryOptions$c = lib_5.setQueryOptions,
 	  updateQuery$c = lib_5.updateQuery,
 	  loadMore$1 = lib_5.loadMore,
 	  setValue$3 = lib_5.setValue,
@@ -28726,7 +30585,7 @@
 	    }, [this.renderErrorComponent(), this.isLoading && loader, this.hasCustomRender ? this.getComponent() : null, this.renderMap(this.getMapParams()), this.pagination ? this.renderPagination() : null]);
 	  }
 	};
-	var mapStateToProps$h = function mapStateToProps(state, props) {
+	var mapStateToProps$i = function mapStateToProps(state, props) {
 	  return {
 	    defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1 || -1,
 	    error: state.error[props.componentId],
@@ -28743,7 +30602,7 @@
 	var mapDispatchToProps$3 = {
 	  loadMoreAction: loadMore$1,
 	  setPageURL: setValue$3,
-	  setQueryOptions: setQueryOptions$b,
+	  setQueryOptions: setQueryOptions$c,
 	  setStreaming: setStreaming,
 	  updateQuery: updateQuery$c,
 	  updateComponentProps: updateComponentProps$3,
@@ -28751,7 +30610,7 @@
 	  recordResultClick: recordResultClick$1,
 	  setMapData: setMapData
 	};
-	var RMConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$h, mapDispatchToProps$3)(ReactiveMap), {
+	var RMConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$i, mapDispatchToProps$3)(ReactiveMap), {
 	  componentType: constants_1$1.reactiveMap,
 	  internalComponent: true
 	}));
@@ -29586,9 +31445,9 @@
 	  }
 	};
 
-	var _templateObject$q, _templateObject2$8, _templateObject3$5;
-	var MapPin = styled('div')(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
-	var MapPinArrow = styled('div')(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
+	var _templateObject$r, _templateObject2$9, _templateObject3$5;
+	var MapPin = styled('div')(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
+	var MapPinArrow = styled('div')(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
 	var mapPinWrapper = css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"])));
 
 	var recordResultClick$3 = lib_5.recordResultClick;
@@ -29917,7 +31776,7 @@
 	  }
 	};
 
-	var _templateObject$r;
+	var _templateObject$s;
 	var ReactiveGoogleMap = {
 	  name: 'ReactiveGoogleMap',
 	  props: {
@@ -29992,7 +31851,7 @@
 	        "style": {
 	          height: '100%'
 	        },
-	        "class": css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t"]))),
+	        "class": css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t"]))),
 	        "options": {
 	          zoomControl: true
 	        },
@@ -31163,9 +33022,9 @@
 	  }, queryString, renderFunction);
 	}
 
-	var version = "3.0.0-alpha.7";
+	var version = "3.0.0-rc";
 
-	var components = [RLConnected, ResultCard, ResultList, ReactiveBase, SBConnected, ListConnected, ListConnected$1, RangeConnected$1, RangeConnected$2, RangeConnected$3, RangeConnected, RcConnected, RcConnected$1, TBConnected, ListConnected$2, ListConnected$3, StateProviderConnected, RangeConnected$4];
+	var components = [RLConnected, ResultCard, ResultList, ReactiveBase, SBConnected, ListConnected, ListConnected$1, RangeConnected$1, RangeConnected$2, RangeConnected$3, RangeConnected, RcConnected, RcConnected$1, RcConnected$2, TBConnected, ListConnected$2, ListConnected$3, StateProviderConnected, RangeConnected$4, TreeListConnected];
 	function install$1 (Vue) {
 	  components.map(function (component) {
 	    Vue.use(component);
@@ -31190,17 +33049,19 @@
 	exports.RangeSlider = RangeConnected$3;
 	exports.ReactiveBase = ReactiveBase;
 	exports.ReactiveComponent = RcConnected;
+	exports.ReactiveComponentPrivate = RcConnected$1;
 	exports.ReactiveGoogleMap = ReactiveGoogleMap;
 	exports.ReactiveList = RLConnected;
 	exports.ResultCard = ResultCard;
 	exports.ResultList = ResultList;
 	exports.SearchBox = SBConnected;
-	exports.SelectedFilters = RcConnected$1;
+	exports.SelectedFilters = RcConnected$2;
 	exports.SingleDropdownList = ListConnected$2;
 	exports.SingleList = ListConnected;
 	exports.SingleRange = RangeConnected$1;
 	exports.StateProvider = StateProviderConnected;
 	exports.ToggleButton = TBConnected;
+	exports.TreeList = TreeListConnected;
 	exports.componentTypes = constants_1$1;
 	exports.default = index$1;
 	exports.getServerState = getServerState;