@appbaseio/reactivesearch-vue 1.16.0-alpha.6 → 1.16.0-alpha.62

package/dist/es/DataSearch.js

@@ -1,2155 +1,22 @@
-import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
-import VueTypes from 'vue-types';
-import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import '@appbaseio/reactivecore';
+import './_rollupPluginBabelHelpers-76660dab.js';
+import 'vue-types';
+import '@appbaseio/reactivecore/lib/utils/constants';
+import '@appbaseio/reactivecore/lib/utils/helper';
 import 'emotion';
-import styled, { css, cx, injectGlobal } from '@appbaseio/vue-emotion';
+import '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-98d938a9.js';
+import './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as hasQuerySuggestionsRenderer, c as connect } from './index-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
-import { T as Title } from './Title-f0217338.js';
-import { F as Flex } from './Flex-16d1103a.js';
-import { getQueryOptions } from '@appbaseio/reactivecore/lib/utils/helper';
-import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-1159c4b5.js';
+import './index-7788a843.js';
+import './ComponentWrapper-424e86fd.js';
+import './Title-3342664a.js';
+import './Flex-1f0795c3.js';
+import 'hotkeys-js';
+export { D as default } from './DataSearch-e71a1014.js';
+import './CancelSvg-4cfae5fd.js';
+import './Input-7a2a9fac.js';
 import 'compute-scroll-into-view';
-import { D as Downshift } from './DownShift-92347b5e.js';
-import { C as Container } from './Container-88c805ef.js';
-import Highlight from 'vue-highlight-words';
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: ", ";\n\tcursor: pointer;\n\t", ";\n\t", ";\n\t", ";\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t}\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-right: 29px;\n\tright: 0;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-right: 12px;\n\tright: 0;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-left: 12px;\n\tleft: 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var left = css(_templateObject());
-var right = css(_templateObject2());
-var clear = css(_templateObject3());
-var InputIcon = styled('div')(_templateObject4(), function (_ref) {
-  var isClearIcon = _ref.isClearIcon;
-  return isClearIcon ? '12px' : '13px';
-}, function (_ref2) {
-  var iconPosition = _ref2.iconPosition;
-
-  if (iconPosition === 'left') {
-    return left;
-  } else if (iconPosition === 'right') {
-    return right;
-  }
-
-  return null;
-}, function (_ref3) {
-  var clearIcon = _ref3.clearIcon;
-  return clearIcon && clear;
-}, function (_ref4) {
-  var showIcon = _ref4.showIcon;
-  return !showIcon && 'padding-right:10px';
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.primaryColor;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.borderColor;
-});
-
-var getClassName = helper.getClassName;
-var SuggestionWrapper = {
-  name: 'SuggestionWrapper',
-  props: {
-    innerClassName: types.string,
-    themePreset: types.themePreset,
-    innerClass: types.style
-  },
-  render: function render() {
-    var h = arguments[0];
-    var _this$$props = this.$props,
-        themePreset = _this$$props.themePreset,
-        innerClass = _this$$props.innerClass,
-        innerClassName = _this$$props.innerClassName;
-    return h("div", {
-      "class": noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
-    }, [h("li", [this.$scopedSlots["default"]()])]);
-  }
-};
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var highlightStyle = {
-  fontWeight: 600,
-  padding: 0,
-  backgroundColor: 'transparent',
-  color: 'inherit'
-};
-var PredictiveSuggestion = styled('span')(_templateObject$1());
-var SuggestionItem = {
-  name: 'SuggestionItem',
-  props: {
-    currentValue: types.string,
-    suggestion: types.any
-  },
-  render: function render() {
-    var h = arguments[0];
-    var _this$suggestion = this.suggestion,
-        label = _this$suggestion.label,
-        value = _this$suggestion.value,
-        title = _this$suggestion.title,
-        description = _this$suggestion.description,
-        image = _this$suggestion.image,
-        isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion;
-
-    if (label) {
-      // label has highest precedence
-      return typeof label === 'string' ? h("div", {
-        "class": "trim"
-      }, [isPredictiveSuggestion ? h(PredictiveSuggestion, {
-        "domProps": {
-          "innerHTML": label
-        }
-      }) : h(Highlight, {
-        "attrs": {
-          "searchWords": this.currentValue.split(' '),
-          "textToHighlight": label,
-          "autoEscape": true,
-          "highlightStyle": highlightStyle
-        }
-      })]) : label;
-    }
-
-    if (title || image || description) {
-      return h(Flex, {
-        "attrs": {
-          "alignItems": "center",
-          "css": {
-            width: '100%'
-          }
-        }
-      }, [image && h("div", {
-        "attrs": {
-          "css": {
-            margin: 'auto',
-            marginRight: 10
-          }
-        }
-      }, [h("img", {
-        "attrs": {
-          "src": image,
-          "alt": " ",
-          "height": "50px",
-          "width": "50px",
-          "css": {
-            objectFit: 'contain'
-          }
-        }
-      })]), h(Flex, {
-        "attrs": {
-          "direction": "column",
-          "css": {
-            width: image ? 'calc(100% - 60px)' : '100%'
-          }
-        }
-      }, [title && h("div", {
-        "class": "trim"
-      }, [h(Highlight, {
-        "attrs": {
-          "searchWords": this.currentValue.split(' '),
-          "textToHighlight": title,
-          "highlightStyle": highlightStyle
-        },
-        "class": css({
-          fontSize: '1rem'
-        })
-      })]), description && h("div", {
-        "class": cx('trim', css({
-          marginTop: 3
-        }))
-      }, [h(Highlight, {
-        "attrs": {
-          "searchWords": this.currentValue.split(' '),
-          "textToHighlight": description,
-          "highlightStyle": highlightStyle
-        }
-      })])])]);
-    }
-
-    return value;
-  }
-};
-
-var SearchSvg = {
-  functional: true,
-  render: function render(h) {
-    return h("svg", {
-      "attrs": {
-        "alt": "Search",
-        "height": "14",
-        "width": "10",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "viewBox": "0 0 15 15"
-      },
-      "class": "search-icon"
-    }, [h("title", ["Search"]), h("path", {
-      "attrs": {
-        "d": 'M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'
-      }
-    })]);
-  }
-};
-
-var CancelSvg = {
-  functional: true,
-  render: function render(h) {
-    return h("svg", {
-      "attrs": {
-        "alt": "Clear",
-        "height": "10",
-        "width": "8",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "viewBox": "0 0 212.982 212.982"
-      },
-      "class": "cancel-icon"
-    }, [h("title", ["Clear"]), h("path", {
-      "attrs": {
-        "d": 'M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z'
-      }
-    })]);
-  }
-};
-
-function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\theight: 40px;\n\tposition: absolute;\n\ttop: 8px;\n\tcursor: pointer;\n\tright: 15px;\n\t", "\n\t", "\n  width: 11px;\n"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tright: 35px;\n"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var right$1 = css(_templateObject$2());
-var MicIcon = styled('div')(_templateObject2$1(), function (_ref) {
-  var iconPosition = _ref.iconPosition,
-      showClear = _ref.showClear;
-  if (showClear && iconPosition !== 'left') return 'right: 51px;';
-
-  if (iconPosition === 'right' || showClear) {
-    return right$1;
-  }
-
-  return null;
-}, function (_ref2) {
-  var showIcon = _ref2.showIcon,
-      showClear = _ref2.showClear;
-  if (!showIcon && showClear) return 'right: 32px;';
-  if (!showIcon && !showClear) return 'right: 15px;';
-  return null;
-});
-
-function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$3());
-var MicSvg = {
-  name: 'MicSvg',
-  props: ['className'],
-  render: function render() {
-    var h = arguments[0];
-    return h("svg", {
-      "attrs": {
-        "viewBox": "0 0 480 480",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "id": "el_xS0FRzQjJ",
-        "width": 28,
-        "height": 28,
-        "className": this.$props.className
-      }
-    }, [h("g", {
-      "attrs": {
-        "id": "el_TvxDfTAtKp",
-        "fillRule": "evenodd"
-      }
-    }, [h("g", {
-      "attrs": {
-        "id": "el_D93PK3GbmJ",
-        "fillRule": "nonzero"
-      },
-      "style": {
-        fill: '#595959'
-      }
-    }, [h("path", {
-      "attrs": {
-        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
-        "id": "el_uly3EwA2O3"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
-        "id": "el_tnDbR4ytu4"
-      }
-    })])])]);
-  }
-};
-
-function _templateObject$4() {
-  var data = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$4());
-var MuteSvg = {
-  name: 'MuteSvg',
-  props: ['className'],
-  render: function render() {
-    var h = arguments[0];
-    return h("svg", {
-      "attrs": {
-        "viewBox": "0 0 480 480",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "id": "el_D1rEpH2zj",
-        "width": 28,
-        "height": 28,
-        "className": this.$props.className
-      }
-    }, [h("g", {
-      "attrs": {
-        "id": "el_X81iT9kZYo",
-        "fillRule": "evenodd"
-      }
-    }, [h("g", {
-      "attrs": {
-        "id": "el_gMpyalCphp"
-      }
-    }, [h("path", {
-      "attrs": {
-        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
-        "id": "el_c7H-3u-D4l",
-        "fillRule": "nonzero"
-      },
-      "style": {
-        fill: '#595959'
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
-        "id": "el_qhFcdAAFwo",
-        "fillRule": "nonzero"
-      },
-      "style": {
-        fill: '#595959'
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M11.5,206.5 L142.5,12.5",
-        "id": "el_M8X8g37WOI",
-        "strokeLinecap": "round",
-        "strokeLinejoin": "round"
-      }
-    })])])]);
-  }
-};
-
-function _templateObject$5() {
-  var data = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$5());
-var ListenSvg = {
-  name: 'ListenSvg',
-  props: ['className'],
-  render: function render() {
-    var h = arguments[0];
-    return h("svg", {
-      "attrs": {
-        "viewBox": "0 0 480 480",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "xmlnsXlink": "http://www.w3.org/1999/xlink",
-        "id": "el_hiibMG0x-",
-        "width": 28,
-        "height": 29,
-        "className": this.$props.className
-      }
-    }, [h("defs", [h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-1"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-3"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-5"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-7"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-9"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-11"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-13"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "path-15"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_QJeJ_2CDw5",
-        "fillRule": "evenodd"
-      }
-    }, [h("g", {
-      "attrs": {
-        "id": "el_UYYCfubTRf"
-      }
-    }, [h("path", {
-      "attrs": {
-        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
-        "id": "el_uzZNtK32Zi",
-        "fillRule": "nonzero"
-      },
-      "style": {
-        fill: '#0B6AFF'
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,0 76.9864699,0 C55.8825877,0 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
-        "id": "el_EYKQ2N9Kgy",
-        "fillRule": "nonzero"
-      }
-    }), h("g", {
-      "attrs": {
-        "id": "el_6SDP2LAgKC"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-2",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-1"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_-Vm65Ltfy7",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-2)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_q04iZcSim4",
-        "mask": "url(#mask-2)",
-        "x": "0.279",
-        "width": "77",
-        "height": "130"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_6WKby7wXqV"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-4",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-3"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_9bggsfQOtU",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-4)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_NKxqi9eIym",
-        "mask": "url(#mask-4)",
-        "x": "0.279",
-        "width": "77",
-        "height": "115"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_Wi-my975tM"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-6",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-5"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_zclQ34fvf7",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-6)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_1OsvRT8HkeZ",
-        "mask": "url(#mask-6)",
-        "x": "0.279",
-        "width": "77",
-        "height": "100"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_DkfFFTaFxy8"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-8",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-7"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_aa9sjx4H0vA",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-8)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_tea114vWg0J",
-        "mask": "url(#mask-8)",
-        "x": "0.279",
-        "width": "77",
-        "height": "85"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_34IgwiMB5rf"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-10",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-9"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_z5u6RAFhx7d",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-10)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_7nfuWmA5Uhy",
-        "mask": "url(#mask-10)",
-        "x": "0.279",
-        "width": "77",
-        "height": "70"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_DeebuCsPTGA"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-12",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-11"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el__ZcqlS20zcw",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-12)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_8DnEQnD7VWV",
-        "mask": "url(#mask-12)",
-        "x": "0.279",
-        "width": "77",
-        "height": "55"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_ZOjjrPTvyrv"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-14",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-13"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_FYYKCI_u24e",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-14)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_XZty4MnTp5Y",
-        "mask": "url(#mask-14)",
-        "x": "0.279",
-        "width": "77",
-        "height": "40"
-      }
-    })]), h("g", {
-      "attrs": {
-        "id": "el_2FATegVmf0K"
-      }
-    }, [h("mask", {
-      "attrs": {
-        "id": "mask-16",
-        "fill": "#fff"
-      }
-    }, [h("use", {
-      "attrs": {
-        "xlink:href": "#path-15"
-      }
-    })]), h("path", {
-      "attrs": {
-        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
-        "id": "el_RMT1KUfbdF8",
-        "fillRule": "nonzero",
-        "mask": "url(#mask-16)"
-      }
-    }), h("rect", {
-      "attrs": {
-        "id": "el_RgLcovvFiO1",
-        "mask": "url(#mask-16)",
-        "x": "0.279",
-        "width": "77",
-        "height": "25"
-      }
-    })])])])]);
-  }
-};
-
-var STATUS = {
-  inactive: 'INACTIVE',
-  stopped: 'STOPPED',
-  active: 'ACTIVE',
-  denied: 'DENIED'
-};
-var Mic = {
-  name: 'Mic',
-  props: {
-    children: types.title,
-    lang: types.string.def('en-US'),
-    iconPosition: types.string.def('left'),
-    handleResult: types.func,
-    onNoMatch: types.func,
-    onError: types.func,
-    getInstance: types.func,
-    render: types.func,
-    className: types.string,
-    applyClearStyle: types.bool,
-    showIcon: types.bool
-  },
-  methods: {
-    getComponent: function getComponent$1() {
-      var status = this.$data.status;
-      var data = {
-        handleClick: this.handleClick,
-        status: status
-      };
-      return getComponent(data, this);
-    },
-    stopMic: function stopMic() {
-      if (this.instance) {
-        this.status = STATUS.inactive;
-        this.instance.stop();
-        this.instance = null;
-      }
-    },
-    handleClick: function handleClick() {
-      var _this = this;
-
-      this.results = [];
-
-      if (window && window.SpeechRecognition) {
-        var status = this.$data.status;
-
-        if (status === STATUS.active) {
-          this.status = STATUS.inactive;
-        }
-
-        var _this$$props = this.$props,
-            handleResult = _this$$props.handleResult,
-            onNoMatch = _this$$props.onNoMatch,
-            onError = _this$$props.onError,
-            lang = _this$$props.lang,
-            getInstance = _this$$props.getInstance;
-        var _window = window,
-            SpeechRecognition = _window.SpeechRecognition;
-
-        if (this.instance && this.status !== STATUS.denied) {
-          this.status = STATUS.inactive;
-          this.instance.stop();
-          this.instance = null;
-          return;
-        }
-
-        this.instance = new SpeechRecognition();
-        this.instance.continuous = true;
-        this.instance.interimResults = true;
-        this.instance.lang = lang;
-
-        if (getInstance) {
-          getInstance(this.instance);
-        }
-
-        this.instance.start();
-
-        this.instance.onstart = function () {
-          _this.status = STATUS.active;
-        };
-
-        this.instance.onresult = function (_ref) {
-          var results = _ref.results,
-              timeStamp = _ref.timeStamp;
-
-          _this.stopMic();
-
-          if (handleResult) {
-            handleResult({
-              results: results,
-              timeStamp: timeStamp
-            });
-          }
-
-          _this.results.push({
-            results: results,
-            timeStamp: timeStamp
-          });
-        };
-
-        this.instance.onnomatch = function (e) {
-          return onNoMatch ? onNoMatch(e) : console.warn(e);
-        };
-
-        this.instance.onerror = function (e) {
-          if (e.error === 'no-speech' || e.error === 'audio-capture') {
-            _this.status = STATUS.inactive;
-          } else if (e.error === 'not-allowed') {
-            _this.status = STATUS.denied;
-          }
-
-          console.error(e);
-
-          if (onError) {
-            onError(e);
-          }
-        };
-        /* Below Two methods run when Continuous is False */
-
-
-        this.instance.onspeechend = function () {
-          _this.status = STATUS.inactive;
-        };
-
-        this.instance.onaudioend = function () {
-          _this.status = STATUS.inactive;
-        };
-      }
-    }
-  },
-  computed: {
-    hasCustomRenderer: function hasCustomRenderer$1() {
-      return hasCustomRenderer(this);
-    },
-    Icon: function Icon() {
-      var h = this.$createElement;
-      var status = this.$data.status;
-      var className = this.$props.className;
-
-      switch (status) {
-        case STATUS.active:
-          return h(ListenSvg, {
-            "attrs": {
-              "className": className
-            },
-            "nativeOn": {
-              "click": this.handleClick
-            }
-          });
-
-        case STATUS.stopped:
-        case STATUS.denied:
-          return h(MuteSvg, {
-            "attrs": {
-              "className": className
-            },
-            "nativeOn": {
-              "click": this.handleClick
-            }
-          });
-
-        default:
-          return h(MicSvg, {
-            "attrs": {
-              "className": className
-            },
-            "nativeOn": {
-              "click": this.handleClick
-            }
-          });
-      }
-    }
-  },
-  data: function data() {
-    return {
-      status: STATUS.inactive
-    };
-  },
-  created: function created() {
-    this.results = [];
-
-    if (typeof window !== 'undefined') {
-      window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition || null;
-
-      if (!window.SpeechRecognition) {
-        console.error('SpeechRecognition is not supported in this browser. Please check the browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility.');
-      }
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var _this$$props2 = this.$props,
-        iconPosition = _this$$props2.iconPosition,
-        applyClearStyle = _this$$props2.applyClearStyle,
-        showIcon = _this$$props2.showIcon;
-
-    if (this.hasCustomRenderer) {
-      return this.getComponent();
-    }
-
-    return h(MicIcon, {
-      "attrs": {
-        "showIcon": showIcon,
-        "showClear": applyClearStyle,
-        "iconPosition": iconPosition
-      }
-    }, [this.Icon]);
-  }
-};
-
-var CustomSvg = {
-  name: 'CustomSvg',
-  props: {
-    className: String,
-    icon: Function,
-    type: String
-  },
-  data: function data() {
-    return {
-      customIcon: this.$props.icon && typeof this.$props.icon === 'function' ? this.$props.icon() : null
-    };
-  },
-  render: function render() {
-    var h = arguments[0];
-
-    if (this.customIcon) {
-      return h("div", {
-        "class": this.$props.className
-      }, [this.customIcon]);
-    }
-
-    if (this.$props.type === 'popular-search-icon') {
-      return h("svg", {
-        "attrs": {
-          "xmlns": "http://www.w3.org/2000/svg",
-          "alt": "Popular Searches",
-          "height": "20",
-          "width": "20",
-          "viewBox": "0 0 24 24"
-        },
-        "style": {
-          fill: '#707070'
-        },
-        "class": this.$props.className
-      }, [h("path", {
-        "attrs": {
-          "d": "M0 0h24v24H0z",
-          "fill": "none"
-        }
-      }), h("path", {
-        "attrs": {
-          "d": "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"
-        }
-      })]);
-    } else {
-      return h("svg", {
-        "attrs": {
-          "xmlns": "http://www.w3.org/2000/svg",
-          "alt": "Recent Searches",
-          "height": "20",
-          "width": "20",
-          "viewBox": "0 0 24 24"
-        },
-        "style": {
-          fill: '#707070'
-        },
-        "class": this.$props.className
-      }, [h("path", {
-        "attrs": {
-          "d": "M0 0h24v24H0z",
-          "fill": "none"
-        }
-      }), h("path", {
-        "attrs": {
-          "d": "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
-        }
-      })]);
-    }
-  }
-};
-
-var updateQuery = Actions.updateQuery,
-    setQueryOptions = Actions.setQueryOptions,
-    setCustomQuery = Actions.setCustomQuery,
-    setDefaultQuery = Actions.setDefaultQuery,
-    setCustomHighlightOptions = Actions.setCustomHighlightOptions,
-    recordSuggestionClick = Actions.recordSuggestionClick,
-    loadPopularSuggestions = Actions.loadPopularSuggestions,
-    getRecentSearches = Actions.getRecentSearches;
-var debounce = helper.debounce,
-    checkValueChange = helper.checkValueChange,
-    getClassName$1 = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
-    isEqual = helper.isEqual,
-    getCompositeAggsQuery = helper.getCompositeAggsQuery,
-    withClickIds = helper.withClickIds,
-    getResultStats = helper.getResultStats,
-    handleOnSuggestions = helper.handleOnSuggestions,
-    getTopSuggestions = helper.getTopSuggestions;
-var DataSearch = {
-  name: 'DataSearch',
-  data: function data() {
-    var props = this.$props;
-    this.__state = {
-      currentValue: '',
-      isOpen: false,
-      normalizedSuggestions: [],
-      isPending: false
-    };
-    this.internalComponent = props.componentId + "__internal";
-    return this.__state;
-  },
-  inject: {
-    theme: {
-      from: 'theme_reactivesearch'
-    }
-  },
-  created: function created() {
-    var _this = this;
-
-    var _this$$props = this.$props,
-        enableQuerySuggestions = _this$$props.enableQuerySuggestions,
-        renderQuerySuggestions = _this$$props.renderQuerySuggestions,
-        enableRecentSearches = _this$$props.enableRecentSearches,
-        distinctField = _this$$props.distinctField,
-        distinctFieldConfig = _this$$props.distinctFieldConfig; // TODO: Remove in 2.0
-
-    if (enableQuerySuggestions) {
-      console.warn('Warning(ReactiveSearch): The `enableQuerySuggestions` prop has been marked as deprecated, please use the `enablePopularSuggestions` prop instead.');
-    } // TODO: Remove in 2.0
-
-
-    if (renderQuerySuggestions) {
-      console.warn('Warning(ReactiveSearch): The `renderQuerySuggestions` prop has been marked as deprecated, please use the `renderPopularSuggestions` prop instead.');
-    }
-
-    if (this.config.enableAppbase && this.aggregationField && this.aggregationField !== '') {
-      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
-    }
-
-    if (!this.config.enableAppbase && (distinctField || distinctFieldConfig)) {
-      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    }
-
-    this.loadPopularSuggestions(this.$props.componentId);
-    this.currentValue = this.selectedValue || '';
-
-    if (enableRecentSearches) {
-      this.getRecentSearches();
-    }
-
-    this.handleTextChange = debounce(function (value) {
-      if (_this.$props.autosuggest) {
-        _this.updateDefaultQueryHandler(value, _this.$props);
-      } else {
-        _this.updateQueryHandler(_this.$props.componentId, value, _this.$props);
-      }
-    }, this.$props.debounce); // Set custom and default queries in store
-
-    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-    updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
-  },
-  computed: {
-    suggestionsList: function suggestionsList() {
-      var suggestionsList = [];
-
-      if (!this.$data.currentValue && this.$props.defaultSuggestions && this.$props.defaultSuggestions.length) {
-        suggestionsList = this.$props.defaultSuggestions;
-      } else if (this.$data.currentValue) {
-        suggestionsList = this.normalizedSuggestions;
-      }
-
-      return withClickIds(suggestionsList);
-    },
-    topSuggestions: function topSuggestions() {
-      if (!this.currentValue) {
-        return [];
-      }
-
-      return this.enableQuerySuggestions || this.enablePopularSuggestions ? this.normalizedPopularSuggestions : [];
-    },
-    normalizedRecentSearches: function normalizedRecentSearches() {
-      return this.recentSearches || [];
-    },
-    normalizedPopularSuggestions: function normalizedPopularSuggestions() {
-      return getTopSuggestions( // use default popular suggestions if value is empty
-      this.currentValue ? this.popularSuggestions : this.defaultPopularSuggestions || [], this.currentValue, this.showDistinctSuggestions);
-    },
-    defaultSearchSuggestions: function defaultSearchSuggestions() {
-      var isPopularSuggestionsEnabled = this.enableQuerySuggestions || this.enablePopularSuggestions;
-
-      if (this.currentValue) {
-        return [];
-      }
-
-      var customDefaultPopularSuggestions = (this.defaultPopularSuggestions || []).map(function (suggestion) {
-        return _extends(_extends({}, suggestion), {}, {
-          _popular_suggestion: true
-        });
-      });
-      var customNormalizedRecentSearches = (this.normalizedRecentSearches || []).map(function (search) {
-        return _extends(_extends({}, search), {}, {
-          _recent_search: true
-        });
-      });
-      var defaultSuggestions = isPopularSuggestionsEnabled ? [].concat(customNormalizedRecentSearches, customDefaultPopularSuggestions || []) : customNormalizedRecentSearches;
-      return getTopSuggestions( // use default popular suggestions if value is empty
-      defaultSuggestions, this.currentValue, this.showDistinctSuggestions);
-    },
-    hasCustomRenderer: function hasCustomRenderer$1() {
-      return hasCustomRenderer(this);
-    },
-    stats: function stats() {
-      return getResultStats(this);
-    }
-  },
-  props: {
-    options: types.options,
-    autoFocus: types.bool,
-    autosuggest: VueTypes.bool.def(true),
-    beforeValueChange: types.func,
-    className: VueTypes.string.def(''),
-    clearIcon: types.children,
-    componentId: types.stringRequired,
-    customHighlight: types.func,
-    customQuery: types.func,
-    defaultQuery: types.func,
-    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
-    aggregationField: types.string,
-    aggregationSize: VueTypes.number,
-    size: VueTypes.number.def(10),
-    debounce: VueTypes.number.def(0),
-    defaultValue: types.string,
-    excludeFields: types.excludeFields.def([]),
-    value: types.value,
-    defaultSuggestions: types.suggestions,
-    enableSynonyms: types.bool.def(true),
-    enableQuerySuggestions: VueTypes.bool.def(false),
-    enablePopularSuggestions: VueTypes.bool.def(false),
-    enableRecentSearches: VueTypes.bool.def(false),
-    fieldWeights: types.fieldWeights,
-    filterLabel: types.string,
-    fuzziness: types.fuzziness,
-    highlight: types.bool,
-    highlightField: types.stringOrArray,
-    icon: types.children,
-    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
-    includeFields: types.includeFields.def(['*']),
-    innerClass: types.style,
-    innerRef: types.string,
-    render: types.func,
-    renderQuerySuggestions: types.func,
-    renderPopularSuggestions: types.func,
-    parseSuggestion: types.func,
-    renderNoSuggestion: types.title,
-    renderError: types.title,
-    placeholder: VueTypes.string.def('Search'),
-    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
-    react: types.react,
-    showClear: VueTypes.bool.def(true),
-    showDistinctSuggestions: VueTypes.bool.def(true),
-    showFilter: VueTypes.bool.def(true),
-    showIcon: VueTypes.bool.def(true),
-    title: types.title,
-    theme: types.style,
-    URLParams: VueTypes.bool.def(false),
-    strictSelection: VueTypes.bool.def(false),
-    nestedField: types.string,
-    enablePredictiveSuggestions: VueTypes.bool.def(false),
-    recentSearchesIcon: VueTypes.any,
-    popularSearchesIcon: VueTypes.any,
-    //	mic props
-    showVoiceSearch: types.bool.def(false),
-    getMicInstance: types.func,
-    renderMic: types.func,
-    distinctField: types.string,
-    distinctFieldConfig: types.props
-  },
-  beforeMount: function beforeMount() {
-    if (this.$props.highlight) {
-      if (this.customHighlight && typeof this.customHighlight === 'function') {
-        this.setCustomHighlightOptions(this.componentId, this.customHighlight(this.$props));
-      }
-
-      var queryOptions = DataSearch.highlightQuery(this.$props) || {};
-      this.queryOptions = _extends(_extends({}, queryOptions), this.getBasicQueryOptions());
-      this.setQueryOptions(this.$props.componentId, this.queryOptions);
-    } else {
-      this.queryOptions = this.getBasicQueryOptions();
-      this.setQueryOptions(this.$props.componentId, this.queryOptions);
-    }
-
-    if (this.selectedValue) {
-      this.setValue(this.selectedValue, true);
-    } else if (this.$props.value) {
-      this.setValue(this.$props.value, true);
-    } else if (this.$props.defaultValue) {
-      this.setValue(this.$props.defaultValue, true);
-    }
-  },
-  watch: {
-    highlight: function highlight() {
-      this.updateQueryOptions();
-    },
-    dataField: function dataField() {
-      this.updateQueryOptions();
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
-    },
-    highlightField: function highlightField() {
-      this.updateQueryOptions();
-    },
-    fieldWeights: function fieldWeights() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
-    },
-    fuzziness: function fuzziness() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
-    },
-    queryFormat: function queryFormat() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
-    },
-    defaultValue: function defaultValue(newVal) {
-      this.setValue(newVal, true, this.$props);
-    },
-    value: function value(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal)) {
-        this.setValue(newVal, true, this.$props, undefined, false);
-      }
-    },
-    defaultQuery: function defaultQuery(newVal, oldVal) {
-      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-        this.updateDefaultQueryHandler(this.$data.currentValue, this.$props);
-      }
-    },
-    customQuery: function customQuery(newVal, oldVal) {
-      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-        this.updateQueryHandler(this.componentId, this.$data.currentValue, this.$props);
-      }
-    },
-    suggestions: function suggestions(newVal) {
-      if (Array.isArray(newVal) && this.$data.currentValue.trim().length) {
-        // shallow check allows us to set suggestions even if the next set
-        // of suggestions are same as the current one
-        this.$emit('suggestions', newVal);
-        this.normalizedSuggestions = this.onSuggestions(newVal);
-      }
-    },
-    selectedValue: function selectedValue(newVal, oldVal) {
-      if (oldVal !== newVal && this.$data.currentValue !== newVal) {
-        if (!newVal && this.$data.currentValue) {
-          // selected value is cleared, call onValueSelected
-          this.onValueSelectedHandler("", causes.CLEAR_VALUE);
-        }
-
-        this.setValue(newVal || '', true, this.$props);
-      }
-    }
-  },
-  methods: {
-    validateDataField: function validateDataField() {
-      var propName = 'dataField';
-      var componentName = DataSearch.name;
-      var props = this.$props;
-      var requiredError = propName + " supplied to " + componentName + " is required. Validation failed.";
-      var propValue = props[propName];
-
-      if (this.config && !this.config.enableAppbase) {
-        if (!propValue) {
-          console.error(requiredError);
-          return;
-        }
-
-        if (typeof propValue !== 'string' && !Array.isArray(propValue)) {
-          console.error("Invalid " + propName + " supplied to " + componentName + ". Validation failed.");
-          return;
-        }
-
-        if (Array.isArray(propValue) && propValue.length === 0) {
-          console.error(requiredError);
-        }
-      }
-    },
-    updateQueryOptions: function updateQueryOptions() {
-      if (this.customHighlight && typeof this.customHighlight === 'function') {
-        this.setCustomHighlightOptions(this.componentId, this.customHighlight(this.$props));
-      }
-
-      var queryOptions = DataSearch.highlightQuery(this.$props) || {};
-      this.queryOptions = _extends(_extends({}, queryOptions), this.getBasicQueryOptions());
-      this.setQueryOptions(this.$props.componentId, this.queryOptions);
-    },
-    getComponent: function getComponent$1(downshiftProps, isQuerySuggestionsRender) {
-      if (downshiftProps === void 0) {
-        downshiftProps = {};
-      }
-
-      if (isQuerySuggestionsRender === void 0) {
-        isQuerySuggestionsRender = false;
-      }
-
-      var currentValue = this.$data.currentValue;
-      var data = {
-        error: this.error,
-        loading: this.isLoading,
-        downshiftProps: downshiftProps,
-        data: this.suggestionsList,
-        promotedData: this.promotedResults,
-        aggregationData: this.aggregationData,
-        rawData: this.rawData,
-        customData: this.customData,
-        value: currentValue,
-        triggerClickAnalytics: this.triggerClickAnalytics,
-        resultStats: this.stats,
-        querySuggestions: this.normalizedPopularSuggestions,
-        popularSuggestions: this.normalizedPopularSuggestions
-      };
-
-      if (isQuerySuggestionsRender) {
-        return getQuerySuggestionsComponent({
-          downshiftProps: downshiftProps,
-          data: this.normalizedPopularSuggestions,
-          value: currentValue,
-          loading: this.isLoading,
-          error: this.error
-        }, this);
-      }
-
-      return getComponent(data, this);
-    },
-    // returns size and aggs property
-    getBasicQueryOptions: function getBasicQueryOptions() {
-      var aggregationField = this.$props.aggregationField;
-      var queryOptions = getQueryOptions(this.$props);
-
-      if (aggregationField) {
-        queryOptions.aggs = getCompositeAggsQuery({
-          props: this.$props,
-          showTopHits: true
-        }).aggs;
-      }
-
-      return queryOptions;
-    },
-    onSuggestions: function onSuggestions(results) {
-      return handleOnSuggestions(results, this.$data.currentValue, this);
-    },
-    handleSearchIconClick: function handleSearchIconClick() {
-      var currentValue = this.currentValue;
-
-      if (currentValue.trim()) {
-        this.isPending = false;
-        this.setValue(currentValue, true);
-        this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
-      }
-    },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen) {
-      var _this2 = this;
-
-      if (isDefaultValue === void 0) {
-        isDefaultValue = false;
-      }
-
-      if (props === void 0) {
-        props = this.$props;
-      }
-
-      if (toggleIsOpen === void 0) {
-        toggleIsOpen = true;
-      }
-
-      var performUpdate = function performUpdate() {
-        // Refresh recent searches when value becomes empty
-        if (!value && _this2.currentValue && _this2.enableRecentSearches) {
-          _this2.getRecentSearches();
-        }
-
-        _this2.currentValue = value;
-
-        if (isDefaultValue) {
-          if (_this2.$props.autosuggest) {
-            if (toggleIsOpen) {
-              _this2.isOpen = false;
-            }
-
-            _this2.updateDefaultQueryHandler(value, _this2.$props);
-          } // in case of strict selection only SUGGESTION_SELECT should be able
-          // to set the query otherwise the value should reset
-
-
-          if (props.strictSelection) {
-            if (cause === causes.SUGGESTION_SELECT || value === '') {
-              _this2.updateQueryHandler(props.componentId, value, props);
-            } else {
-              _this2.setValue('', true);
-            }
-          } else {
-            _this2.updateQueryHandler(props.componentId, value, props);
-          }
-        } else {
-          // debounce for handling text while typing
-          _this2.handleTextChange(value);
-        }
-
-        _this2.$emit('valueChange', value);
-
-        _this2.$emit('value-change', value); // Set the already fetched suggestions if query is same as used last to fetch the hits
-
-
-        if (value === _this2.lastUsedQuery) {
-          _this2.suggestions = _this2.onSuggestions(_this2.suggestions); // invoke on suggestions
-
-          _this2.$emit('suggestions', _this2.suggestions);
-        } else if (!value) {
-          // reset suggestions
-          _this2.suggestions = []; // invoke on suggestions
-
-          _this2.$emit('suggestions', _this2.suggestions);
-        }
-      };
-
-      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
-    },
-    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
-      var defaultQueryOptions;
-      var query = DataSearch.defaultQuery(value, props);
-
-      if (this.defaultQuery) {
-        var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
-
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
-        }
-
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
-
-        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
-      }
-
-      this.setQueryOptions(this.internalComponent, _extends(_extends({}, this.queryOptions), defaultQueryOptions));
-      this.updateQuery({
-        componentId: this.internalComponent,
-        query: query,
-        value: value,
-        componentType: componentTypes.dataSearch
-      });
-    },
-    updateQueryHandler: function updateQueryHandler(componentId, value, props) {
-      var customQuery = props.customQuery,
-          filterLabel = props.filterLabel,
-          showFilter = props.showFilter,
-          URLParams = props.URLParams;
-      var customQueryOptions;
-      var defaultQueryTobeSet = DataSearch.defaultQuery(value, props);
-      var query = defaultQueryTobeSet;
-
-      if (customQuery) {
-        var customQueryTobeSet = customQuery(value, props);
-        var queryTobeSet = customQueryTobeSet.query;
-
-        if (queryTobeSet) {
-          query = queryTobeSet;
-        }
-
-        customQueryOptions = getOptionsFromQuery(customQueryTobeSet);
-        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
-        this.setQueryOptions(componentId, _extends(_extends({}, this.queryOptions), customQueryOptions));
-      }
-
-      if (!this.isPending) {
-        this.updateQuery({
-          componentId: componentId,
-          query: query,
-          value: value,
-          label: filterLabel,
-          showFilter: showFilter,
-          URLParams: URLParams,
-          componentType: 'DATASEARCH'
-        });
-      }
-    },
-    // need to review
-    handleFocus: function handleFocus(event) {
-      this.isOpen = true;
-
-      if (this.$props.onFocus) {
-        this.$emit('focus', event);
-      }
-    },
-    handleVoiceResults: function handleVoiceResults(_ref) {
-      var results = _ref.results;
-
-      if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
-        this.isPending = false;
-        this.setValue(results[0][0].transcript.trim(), true);
-
-        if (this.$props.autosuggest) {
-          this.isOpen = true;
-        }
-      }
-    },
-    triggerQuery: function triggerQuery() {
-      var value = this.$props.value;
-
-      if (value !== undefined) {
-        this.isPending = false;
-        this.setValue(this.$props.value, true);
-      }
-    },
-    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
-      // click analytics would only work client side and after javascript loads
-      var docId = documentId;
-
-      if (!docId) {
-        var hitData = this.suggestionsList.find(function (hit) {
-          return hit._click_id === searchPosition;
-        });
-
-        if (hitData && hitData.source && hitData.source._id) {
-          docId = hitData.source._id;
-        }
-      }
-
-      this.recordSuggestionClick(searchPosition, docId);
-    },
-    clearValue: function clearValue() {
-      this.isPending = false;
-      this.setValue('', true);
-      this.onValueSelectedHandler("", causes.CLEAR_VALUE);
-    },
-    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
-      var value = this.$props.value;
-
-      if (value !== undefined) {
-        this.isPending = true;
-      } // if a suggestion was selected, delegate the handling to suggestion handler
-
-
-      if (event.key === 'Enter' && highlightedIndex === null) {
-        this.setValue(event.target.value, true);
-        this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
-      } // Need to review
-
-
-      if (this.$props.onKeyDown) {
-        // TODO: Remove camelCase events in 2.0
-        this.$emit('keyDown', event, this.triggerQuery);
-        this.$emit('key-down', event, this.triggerQuery);
-      }
-    },
-    onInputChange: function onInputChange(e) {
-      var inputValue = e.target.value;
-
-      if (!this.$data.isOpen) {
-        this.isOpen = true;
-      }
-
-      var value = this.$props.value;
-
-      if (value === undefined) {
-        this.setValue(inputValue);
-      } else {
-        this.isPending = true;
-        this.$emit('change', inputValue, this.triggerQuery, e);
-      }
-    },
-    onSuggestionSelected: function onSuggestionSelected(suggestion) {
-      var value = this.$props.value; // Record analytics for selected suggestions
-
-      this.triggerClickAnalytics(suggestion._click_id);
-
-      if (value === undefined) {
-        this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT);
-      } else {
-        this.$emit('change', suggestion.value, this.triggerQuery);
-      }
-
-      this.onValueSelectedHandler(suggestion.value, causes.SUGGESTION_SELECT, suggestion.source);
-    },
-    onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
-      if (currentValue === void 0) {
-        currentValue = this.$data.currentValue;
-      }
-
-      for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        cause[_key - 1] = arguments[_key];
-      }
-
-      this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
-      this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
-    },
-    handleStateChange: function handleStateChange(changes) {
-      var isOpen = changes.isOpen;
-      this.isOpen = isOpen;
-    },
-    getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
-      var isDark = this.themePreset === 'dark';
-
-      if (isDark) {
-        return highlightedIndex === index ? '#555' : '#424242';
-      }
-
-      return highlightedIndex === index ? '#eee' : '#fff';
-    },
-    renderIcon: function renderIcon() {
-      var h = this.$createElement;
-
-      if (this.$props.showIcon) {
-        return this.$props.icon || h(SearchSvg);
-      }
-
-      return null;
-    },
-    renderErrorComponent: function renderErrorComponent() {
-      var h = this.$createElement;
-      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
-
-      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
-        return h(SuggestionWrapper, {
-          "attrs": {
-            "innerClass": this.$props.innerClass,
-            "innerClassName": "error",
-            "theme": this.theme,
-            "themePreset": this.themePreset
-          }
-        }, [isFunction(renderError) ? renderError(this.error) : renderError]);
-      }
-
-      return null;
-    },
-    renderCancelIcon: function renderCancelIcon() {
-      var h = this.$createElement;
-
-      if (this.$props.showClear) {
-        return this.$props.clearIcon || h(CancelSvg);
-      }
-
-      return null;
-    },
-    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
-      if (finalSuggestionsList === void 0) {
-        finalSuggestionsList = [];
-      }
-
-      var h = this.$createElement;
-      var _this$$props2 = this.$props,
-          theme = _this$$props2.theme,
-          innerClass = _this$$props2.innerClass;
-      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
-      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
-      var _this$$data = this.$data,
-          isOpen = _this$$data.isOpen,
-          currentValue = _this$$data.currentValue;
-
-      if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
-        return h(SuggestionWrapper, {
-          "attrs": {
-            "innerClass": innerClass,
-            "themePreset": this.themePreset,
-            "theme": theme,
-            "innerClassName": "noSuggestion"
-          },
-          "scopedSlots": {
-            "default": function _default() {
-              return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
-            }
-          }
-        });
-      }
-
-      return null;
-    },
-    renderIcons: function renderIcons() {
-      var h = this.$createElement;
-      var _this$$props3 = this.$props,
-          iconPosition = _this$$props3.iconPosition,
-          showClear = _this$$props3.showClear,
-          innerClass = _this$$props3.innerClass,
-          getMicInstance = _this$$props3.getMicInstance,
-          showVoiceSearch = _this$$props3.showVoiceSearch,
-          showIcon = _this$$props3.showIcon;
-      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
-      var currentValue = this.$data.currentValue;
-      return h("div", [currentValue && showClear && h(InputIcon, {
-        "on": {
-          "click": this.clearValue
-        },
-        "attrs": {
-          "iconPosition": "right",
-          "clearIcon": iconPosition === 'right',
-          "showIcon": showIcon,
-          "isClearIcon": true
-        }
-      }, [this.renderCancelIcon()]), showVoiceSearch && h(Mic, {
-        "attrs": {
-          "getInstance": getMicInstance,
-          "render": renderMic,
-          "iconPosition": iconPosition,
-          "handleResult": this.handleVoiceResults,
-          "className": getClassName$1(innerClass, 'mic') || null,
-          "applyClearStyle": !!currentValue && showClear,
-          "showIcon": showIcon
-        }
-      }), h(InputIcon, {
-        "on": {
-          "click": this.handleSearchIconClick
-        },
-        "attrs": {
-          "showIcon": showIcon,
-          "iconPosition": iconPosition
-        }
-      }, [this.renderIcon()])]);
-    }
-  },
-  render: function render() {
-    var _this3 = this;
-
-    var h = arguments[0];
-    var _this$$props4 = this.$props,
-        theme = _this$$props4.theme,
-        size = _this$$props4.size;
-    var _this$$scopedSlots = this.$scopedSlots,
-        recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
-        popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
-    var hasSuggestions = this.currentValue ? this.suggestionsList.length || this.topSuggestions.length : this.defaultSearchSuggestions.length;
-    return h(Container, {
-      "class": this.$props.className
-    }, [this.$props.title && h(Title, {
-      "class": getClassName$1(this.$props.innerClass, 'title') || ''
-    }, [this.$props.title]), this.$props.defaultSuggestions || this.$props.autosuggest ? h(Downshift, {
-      "attrs": {
-        "id": this.$props.componentId + "-downshift",
-        "handleChange": this.onSuggestionSelected,
-        "handleMouseup": this.handleStateChange,
-        "isOpen": this.$data.isOpen
-      },
-      "scopedSlots": {
-        "default": function _default(_ref2) {
-          var getInputEvents = _ref2.getInputEvents,
-              getInputProps = _ref2.getInputProps,
-              getItemProps = _ref2.getItemProps,
-              getItemEvents = _ref2.getItemEvents,
-              isOpen = _ref2.isOpen,
-              highlightedIndex = _ref2.highlightedIndex,
-              setHighlightedIndex = _ref2.setHighlightedIndex;
-          return h("div", {
-            "class": suggestionsContainer
-          }, [h(Input, {
-            "attrs": {
-              "id": _this3.$props.componentId + "-input",
-              "showIcon": _this3.$props.showIcon,
-              "showClear": _this3.$props.showClear,
-              "iconPosition": _this3.$props.iconPosition,
-              "placeholder": _this3.$props.placeholder,
-              "themePreset": _this3.themePreset,
-              "autocomplete": 'off'
-            },
-            "ref": _this3.$props.innerRef,
-            "class": getClassName$1(_this3.$props.innerClass, 'input'),
-            "on": _extends({}, getInputEvents({
-              onInput: _this3.onInputChange,
-              onBlur: function onBlur(e) {
-                _this3.$emit('blur', e, _this3.triggerQuery);
-              },
-              onFocus: _this3.handleFocus,
-              onKeyPress: function onKeyPress(e) {
-                _this3.$emit('keyPress', e, _this3.triggerQuery);
-
-                _this3.$emit('key-press', e, _this3.triggerQuery);
-              },
-              onKeyDown: function onKeyDown(e) {
-                return _this3.handleKeyDown(e, highlightedIndex);
-              },
-              onKeyUp: function onKeyUp(e) {
-                _this3.$emit('keyUp', e, _this3.triggerQuery);
-
-                _this3.$emit('key-up', e, _this3.triggerQuery);
-              },
-              onClick: function onClick() {
-                setHighlightedIndex(null);
-              }
-            })),
-            "domProps": _extends({}, getInputProps({
-              value: _this3.$data.currentValue === null ? '' : _this3.$data.currentValue
-            }))
-          }), _this3.renderIcons(), _this3.hasCustomRenderer && _this3.getComponent({
-            isOpen: isOpen,
-            getItemProps: getItemProps,
-            getItemEvents: getItemEvents,
-            highlightedIndex: highlightedIndex
-          }), _this3.renderErrorComponent(), !_this3.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-            "class": suggestions(_this3.themePreset, theme) + " " + getClassName$1(_this3.$props.innerClass, 'list')
-          }, [_this3.suggestionsList.slice(0, size).map(function (item, index) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: item
-              })),
-              "on": _extends({}, getItemEvents({
-                item: item
-              })),
-              "key": index + 1 + "-" + item.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, index)
-              }
-            }, [h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": item
-              }
-            })]);
-          }), _this3.defaultSearchSuggestions.map(function (sugg, index) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: sugg
-              })),
-              "on": _extends({}, getItemEvents({
-                item: sugg
-              })),
-              "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
-                justifyContent: 'flex-start'
-              }
-            }, [h("div", {
-              "style": {
-                padding: '0 10px 0 0'
-              }
-            }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'recent-search-icon') || null,
-                "icon": recentSearchesIcon,
-                "type": "recent-search-icon"
-              }
-            }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
-                "icon": popularSearchesIcon,
-                "type": "popular-search-icon"
-              }
-            })]), h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": sugg
-              }
-            })]);
-          }), hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
-            isOpen: isOpen,
-            getItemProps: getItemProps,
-            getItemEvents: getItemEvents,
-            highlightedIndex: highlightedIndex
-          }, true) : _this3.topSuggestions.map(function (sugg, index) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: sugg
-              })),
-              "on": _extends({}, getItemEvents({
-                item: sugg
-              })),
-              "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
-                justifyContent: 'flex-start'
-              }
-            }, [h("div", {
-              "style": {
-                padding: '0 10px 0 0'
-              }
-            }, [h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
-                "icon": popularSearchesIcon,
-                "type": "popular-search-icon"
-              }
-            })]), h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": sugg
-              }
-            })]);
-          })]) : _this3.renderNoSuggestions(_this3.suggestionsList), ' ']);
-        }
-      }
-    }) : h("div", {
-      "class": suggestionsContainer
-    }, [h(Input, {
-      "class": getClassName$1(this.$props.innerClass, 'input') || '',
-      "attrs": {
-        "placeholder": this.$props.placeholder,
-        "iconPosition": this.$props.iconPosition,
-        "showIcon": this.$props.showIcon,
-        "showClear": this.$props.showClear,
-        "innerRef": this.$props.innerRef,
-        "themePreset": this.themePreset
-      },
-      "on": _extends({}, {
-        blur: function blur(e) {
-          _this3.$emit('blur', e, _this3.triggerQuery);
-        },
-        keypress: function keypress(e) {
-          _this3.$emit('keyPress', e, _this3.triggerQuery);
-
-          _this3.$emit('key-press', e, _this3.triggerQuery);
-        },
-        input: this.onInputChange,
-        focus: function focus(e) {
-          _this3.$emit('focus', e, _this3.triggerQuery);
-        },
-        keydown: function keydown(e) {
-          _this3.$emit('keyDown', e, _this3.triggerQuery);
-
-          _this3.$emit('key-down', e, _this3.triggerQuery);
-        },
-        keyup: function keyup(e) {
-          _this3.$emit('keyUp', e, _this3.triggerQuery);
-
-          _this3.$emit('key-up', e, _this3.triggerQuery);
-        }
-      }),
-      "domProps": _extends({}, {
-        autofocus: this.$props.autoFocus,
-        value: this.$data.currentValue ? this.$data.currentValue : ''
-      })
-    }), this.renderIcons()])]);
-  }
-};
-
-DataSearch.defaultQuery = function (value, props) {
-  var finalQuery = null;
-  var fields = [];
-
-  if (value) {
-    if (Array.isArray(props.dataField)) {
-      fields = props.dataField;
-    } else if (props.dataField) {
-      fields = [props.dataField];
-    }
-
-    finalQuery = {
-      bool: {
-        should: DataSearch.shouldQuery(value, fields, props),
-        minimum_should_match: '1'
-      }
-    };
-  }
-
-  if (value === '') {
-    finalQuery = null;
-  }
-
-  if (finalQuery && props.nestedField) {
-    return {
-      query: {
-        nested: {
-          path: props.nestedField,
-          query: finalQuery
-        }
-      }
-    };
-  }
-
-  return finalQuery;
-};
-
-DataSearch.shouldQuery = function (value, dataFields, props) {
-  var finalQuery = [];
-  var phrasePrefixFields = [];
-  var fields = (dataFields || []).map(function (field, index) {
-    var queryField = "" + field + (Array.isArray(props.fieldWeights) && props.fieldWeights[index] ? "^" + props.fieldWeights[index] : '');
-
-    if (!(field.endsWith('.keyword') || field.endsWith('.autosuggest') || field.endsWith('.search'))) {
-      phrasePrefixFields.push(queryField);
-    }
-
-    return queryField;
-  });
-
-  if (props.searchOperators || props.queryString) {
-    return {
-      query: value,
-      fields: fields,
-      default_operator: props.queryFormat
-    };
-  }
-
-  if (props.queryFormat === 'and') {
-    finalQuery.push({
-      multi_match: {
-        query: value,
-        fields: fields,
-        type: 'cross_fields',
-        operator: 'and'
-      }
-    });
-    finalQuery.push({
-      multi_match: {
-        query: value,
-        fields: fields,
-        type: 'phrase',
-        operator: 'and'
-      }
-    });
-
-    if (phrasePrefixFields.length > 0) {
-      finalQuery.push({
-        multi_match: {
-          query: value,
-          fields: phrasePrefixFields,
-          type: 'phrase_prefix',
-          operator: 'and'
-        }
-      });
-    }
-
-    return finalQuery;
-  }
-
-  finalQuery.push({
-    multi_match: {
-      query: value,
-      fields: fields,
-      type: 'best_fields',
-      operator: 'or',
-      fuzziness: props.fuzziness ? props.fuzziness : 0
-    }
-  });
-  finalQuery.push({
-    multi_match: {
-      query: value,
-      fields: fields,
-      type: 'phrase',
-      operator: 'or'
-    }
-  });
-
-  if (phrasePrefixFields.length > 0) {
-    finalQuery.push({
-      multi_match: {
-        query: value,
-        fields: phrasePrefixFields,
-        type: 'phrase_prefix',
-        operator: 'or'
-      }
-    });
-  }
-
-  return finalQuery;
-};
-
-DataSearch.highlightQuery = function (props) {
-  if (props.customHighlight) {
-    return props.customHighlight(props);
-  }
-
-  if (!props.highlight) {
-    return null;
-  }
-
-  var fields = {};
-  var highlightField = props.highlightField ? props.highlightField : props.dataField;
-
-  if (typeof highlightField === 'string') {
-    fields[highlightField] = {};
-  } else if (Array.isArray(highlightField)) {
-    highlightField.forEach(function (item) {
-      fields[item] = {};
-    });
-  }
-
-  return {
-    highlight: _extends({
-      pre_tags: ['<mark>'],
-      post_tags: ['</mark>'],
-      fields: fields
-    }, props.highlightField && {
-      require_field_match: false
-    })
-  };
-};
-
-var mapStateToProps = function mapStateToProps(state, props) {
-  return {
-    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
-    rawData: state.rawData[props.componentId],
-    aggregationData: state.compositeAggregations[props.componentId] || [],
-    isLoading: !!state.isLoading[props.componentId + "_active"],
-    themePreset: state.config.themePreset,
-    error: state.error[props.componentId],
-    analytics: state.analytics,
-    config: state.config,
-    headers: state.appbaseRef.headers,
-    promotedResults: state.promotedResults[props.componentId] || [],
-    customData: state.customData[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,
-    popularSuggestions: state.querySuggestions[props.componentId],
-    defaultPopularSuggestions: state.defaultPopularSuggestions[props.componentId],
-    componentProps: state.props[props.componentId],
-    lastUsedQuery: state.queryToHits[props.componentId],
-    recentSearches: state.recentSearches.data
-  };
-};
-
-var mapDispatchToProps = {
-  setQueryOptions: setQueryOptions,
-  updateQuery: updateQuery,
-  setCustomQuery: setCustomQuery,
-  setDefaultQuery: setDefaultQuery,
-  setCustomHighlightOptions: setCustomHighlightOptions,
-  recordSuggestionClick: recordSuggestionClick,
-  loadPopularSuggestions: loadPopularSuggestions,
-  getRecentSearches: getRecentSearches
-};
-var DSConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(DataSearch), {
-  componentType: componentTypes.dataSearch,
-  internalComponent: true
-});
-
-DataSearch.install = function (Vue) {
-  Vue.component(DataSearch.name, DSConnected);
-}; // Add componentType for SSR
-
-
-DataSearch.componentType = componentTypes.dataSearch;
-
-export default DataSearch;
+import './Container-ba826e96.js';
+import 'vue-highlight-words';