@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.5 → 3.0.0-rc.6

package/dist/es/SearchBox.js

@@ -1,1847 +0,0 @@
-import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import _transformOn from '@vue/babel-helper-vue-transform-on';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
-import { createVNode, createTextVNode, defineComponent, isVNode, mergeProps } from 'vue';
-import VueTypes from 'vue-types';
-import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
-import { styled, createGlobalStyle } from '@appbaseio/vue-emotion';
-import { css } from '@emotion/css';
-import 'polished';
-import { B as Button } from './Button-fd869491.js';
-import { t as types } from './vueTypes-f1923c72.js';
-import '@appbaseio/reactivecore/lib/utils/transform';
-import 'redux';
-import { g as getComponent, h as hasCustomRenderer, f as decodeHtml, i as isQueryIdentical, u as updateDefaultQuery, j as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-882489e1.js';
-import { C as ComponentWrapper } from './ComponentWrapper-8a3c388d.js';
-import { P as PreferencesConsumer } from './PreferencesConsumer-b058d14e.js';
-import { T as Title } from './Title-863dfa42.js';
-import { F as Flex } from './Flex-25792bc3.js';
-import hotkeys from 'hotkeys-js';
-import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-e7ae49e9.js';
-import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-f7499ef8.js';
-import 'compute-scroll-into-view';
-import { C as Container } from './Container-d00219f7.js';
-import Highlight from 'vue-highlight-words';
-
-var _templateObject;
-var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n"])));
-InputGroup.defaultProps = {
-  className: 'input-group'
-};
-
-var _templateObject$1;
-var InputAddon = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fafafa;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-weight: 400;\n  padding: 0 11px;\n  position: relative;\n  transition: all 0.3s;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  &:first-of-type {\n    border-right: none;\n  }\n  &:last-of-type {\n    border-left: none;\n  }\n"])));
-InputAddon.defaultProps = {
-  className: 'input-addon'
-};
-
-var getClassName = helper.getClassName;
-var SuggestionWrapper = {
-  name: 'SuggestionWrapper',
-  props: {
-    innerClassName: types.string,
-    themePreset: types.themePreset,
-    innerClass: types.style
-  },
-  render: function render() {
-    var _this$$props = this.$props,
-      themePreset = _this$$props.themePreset,
-      innerClass = _this$$props.innerClass,
-      innerClassName = _this$$props.innerClassName;
-    return createVNode("div", {
-      "class": noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
-    }, [createVNode("li", null, [this.$slots["default"]()])]);
-  }
-};
-
-var _templateObject$2;
-var highlightStyle = {
-  fontWeight: 600,
-  padding: 0,
-  backgroundColor: 'transparent',
-  color: 'inherit'
-};
-var PredictiveSuggestion = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
-var SuggestionItem = {
-  name: 'SuggestionItem',
-  props: {
-    currentValue: types.string,
-    suggestion: types.any
-  },
-  render: function render() {
-    var _this = this;
-    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,
-      _suggestion_type = _this$suggestion._suggestion_type,
-      _category = _this$suggestion._category;
-    if (label) {
-      // label has highest precedence
-      return typeof label === 'string' ? createVNode("div", {
-        "class": "trim"
-      }, [(_category ? false : isPredictiveSuggestion
-      // eslint-disable-next-line
-      || !!_suggestion_type) ? createVNode(PredictiveSuggestion, {
-        "innerHTML": label
-      }, null) : createVNode(Highlight, {
-        "searchWords": _category ? [_category] : this.currentValue.split(' '),
-        "textToHighlight": label,
-        "autoEscape": true,
-        "highlightStyle": highlightStyle
-      }, null)]) : label;
-    }
-    if (title || image || description) {
-      return createVNode(Flex, {
-        "alignItems": "center",
-        "css": {
-          width: '100%'
-        }
-      }, {
-        "default": function _default() {
-          return [image && createVNode("div", {
-            "css": {
-              margin: 'auto',
-              marginRight: 10
-            }
-          }, [createVNode("img", {
-            "src": image,
-            "alt": " ",
-            "height": "50px",
-            "width": "50px",
-            "css": {
-              objectFit: 'contain'
-            }
-          }, null)]), createVNode(Flex, {
-            "direction": "column",
-            "css": {
-              width: image ? 'calc(100% - 60px)' : '100%'
-            }
-          }, {
-            "default": function _default() {
-              return [title && createVNode("div", {
-                "class": "trim"
-              }, [createVNode(Highlight, {
-                "searchWords": _this.currentValue.split(' '),
-                "textToHighlight": title,
-                "highlightStyle": highlightStyle,
-                "class": css({
-                  fontSize: '1rem'
-                })
-              }, null)]), description && createVNode("div", {
-                "class": ['trim', css({
-                  marginTop: 3
-                })]
-              }, [createVNode(Highlight, {
-                "searchWords": _this.currentValue.split(' '),
-                "textToHighlight": description,
-                "highlightStyle": highlightStyle
-              }, null)])];
-            }
-          })];
-        }
-      });
-    }
-    return value;
-  }
-};
-
-var SearchSvg = {
-  name: 'SearchSvg',
-  props: ['styles'],
-  render: function render() {
-    return createVNode("svg", {
-      "alt": "Search",
-      "class": "search-icon",
-      "height": "12",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "viewBox": "0 0 15 15",
-      "style": _extends({
-        transform: 'scale(1.35)',
-        position: 'relative'
-      }, this.$props.styles ? this.$props.styles : {})
-    }, [createVNode("title", null, [createTextVNode("Search")]), createVNode("path", {
-      "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'
-    }, null)]);
-  }
-};
-
-var _templateObject$3;
-
-// eslint-disable-next-line
-createGlobalStyle(_templateObject$3 || (_templateObject$3 = _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"])));
-var MicSvg = {
-  name: 'MicSvg',
-  props: ['className'],
-  render: function render() {
-    return createVNode("svg", {
-      "viewBox": "0 0 480 480",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "id": "el_xS0FRzQjJ",
-      "width": 28,
-      "height": 28,
-      "className": this.$props.className,
-      "style": {
-        transform: 'scale(1.5)'
-      }
-    }, [createVNode("g", {
-      "id": "el_TvxDfTAtKp",
-      "fillRule": "evenodd"
-    }, [createVNode("g", {
-      "id": "el_D93PK3GbmJ",
-      "fillRule": "nonzero",
-      "style": {
-        fill: '#595959'
-      }
-    }, [createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null)])])]);
-  }
-};
-
-var _templateObject$4;
-
-// eslint-disable-next-line
-createGlobalStyle(_templateObject$4 || (_templateObject$4 = _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"])));
-var MuteSvg = {
-  name: 'MuteSvg',
-  props: ['className'],
-  render: function render() {
-    return createVNode("svg", {
-      "style": {
-        transform: 'scale(1.5)'
-      },
-      "viewBox": "0 0 480 480",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "id": "el_D1rEpH2zj",
-      "width": 28,
-      "height": 28,
-      "className": this.$props.className
-    }, [createVNode("g", {
-      "id": "el_X81iT9kZYo",
-      "fillRule": "evenodd"
-    }, [createVNode("g", {
-      "id": "el_gMpyalCphp"
-    }, [createVNode("path", {
-      "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'
-      }
-    }, null), createVNode("path", {
-      "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'
-      }
-    }, null), createVNode("path", {
-      "d": "M11.5,206.5 L142.5,12.5",
-      "id": "el_M8X8g37WOI",
-      "strokeLinecap": "round",
-      "strokeLinejoin": "round"
-    }, null)])])]);
-  }
-};
-
-var _templateObject$5;
-
-// eslint-disable-next-line
-createGlobalStyle(_templateObject$5 || (_templateObject$5 = _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"])));
-var ListenSvg = {
-  name: 'ListenSvg',
-  props: ['className'],
-  render: function render() {
-    return createVNode("svg", {
-      "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,
-      "style": {
-        transform: 'scale(1.5)'
-      }
-    }, [createVNode("defs", null, [createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("path", {
-      "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"
-    }, null)]), createVNode("g", {
-      "id": "el_QJeJ_2CDw5",
-      "fillRule": "evenodd"
-    }, [createVNode("g", {
-      "id": "el_UYYCfubTRf"
-    }, [createVNode("path", {
-      "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'
-      }
-    }, null), createVNode("path", {
-      "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"
-    }, null), createVNode("g", {
-      "id": "el_6SDP2LAgKC"
-    }, [createVNode("mask", {
-      "id": "mask-2",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-1"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_q04iZcSim4",
-      "mask": "url(#mask-2)",
-      "x": "0.279",
-      "width": "77",
-      "height": "130"
-    }, null)]), createVNode("g", {
-      "id": "el_6WKby7wXqV"
-    }, [createVNode("mask", {
-      "id": "mask-4",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-3"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_NKxqi9eIym",
-      "mask": "url(#mask-4)",
-      "x": "0.279",
-      "width": "77",
-      "height": "115"
-    }, null)]), createVNode("g", {
-      "id": "el_Wi-my975tM"
-    }, [createVNode("mask", {
-      "id": "mask-6",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-5"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_1OsvRT8HkeZ",
-      "mask": "url(#mask-6)",
-      "x": "0.279",
-      "width": "77",
-      "height": "100"
-    }, null)]), createVNode("g", {
-      "id": "el_DkfFFTaFxy8"
-    }, [createVNode("mask", {
-      "id": "mask-8",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-7"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_tea114vWg0J",
-      "mask": "url(#mask-8)",
-      "x": "0.279",
-      "width": "77",
-      "height": "85"
-    }, null)]), createVNode("g", {
-      "id": "el_34IgwiMB5rf"
-    }, [createVNode("mask", {
-      "id": "mask-10",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-9"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_7nfuWmA5Uhy",
-      "mask": "url(#mask-10)",
-      "x": "0.279",
-      "width": "77",
-      "height": "70"
-    }, null)]), createVNode("g", {
-      "id": "el_DeebuCsPTGA"
-    }, [createVNode("mask", {
-      "id": "mask-12",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-11"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_8DnEQnD7VWV",
-      "mask": "url(#mask-12)",
-      "x": "0.279",
-      "width": "77",
-      "height": "55"
-    }, null)]), createVNode("g", {
-      "id": "el_ZOjjrPTvyrv"
-    }, [createVNode("mask", {
-      "id": "mask-14",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-13"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_XZty4MnTp5Y",
-      "mask": "url(#mask-14)",
-      "x": "0.279",
-      "width": "77",
-      "height": "40"
-    }, null)]), createVNode("g", {
-      "id": "el_2FATegVmf0K"
-    }, [createVNode("mask", {
-      "id": "mask-16",
-      "fill": "#fff"
-    }, [createVNode("use", {
-      "xlink:href": "#path-15"
-    }, null)]), createVNode("path", {
-      "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)"
-    }, null), createVNode("rect", {
-      "id": "el_RgLcovvFiO1",
-      "mask": "url(#mask-16)",
-      "x": "0.279",
-      "width": "77",
-      "height": "25"
-    }, null)])])])]);
-  }
-};
-
-var STATUS = {
-  inactive: 'INACTIVE',
-  stopped: 'STOPPED',
-  active: 'ACTIVE',
-  denied: 'DENIED'
-};
-var Mic = {
-  name: 'Mic',
-  props: {
-    children: types.title,
-    lang: VueTypes.string.def('en-US'),
-    iconPosition: VueTypes.string.def('left'),
-    handleResult: types.func,
-    onNoMatch: types.func,
-    onError: types.func,
-    getInstance: types.func,
-    render: types.func,
-    className: types.string,
-    applyClearStyle: VueTypes.bool,
-    showIcon: VueTypes.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 status = this.$data.status;
-      var className = this.$props.className;
-      switch (status) {
-        case STATUS.active:
-          return createVNode(ListenSvg, {
-            "className": className,
-            "nativeOnClick": this.handleClick
-          }, null);
-        case STATUS.stopped:
-        case STATUS.denied:
-          return createVNode(MuteSvg, {
-            "className": className,
-            "nativeOnClick": this.handleClick
-          }, null);
-        default:
-          return createVNode(MicSvg, {
-            "className": className,
-            "nativeOnClick": this.handleClick
-          }, null);
-      }
-    }
-  },
-  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 _this2 = this;
-    if (this.hasCustomRenderer) {
-      return this.getComponent();
-    }
-    return createVNode(IconWrapper, null, {
-      "default": function _default() {
-        return [_this2.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() {
-    if (this.customIcon) {
-      return createVNode("div", {
-        "class": this.$props.className
-      }, [this.customIcon]);
-    }
-    if (this.$props.type === 'recent-search-icon') {
-      return createVNode("svg", {
-        "xmlns": "http://www.w3.org/2000/svg",
-        "alt": "Recent Search",
-        "height": "20",
-        "width": "20",
-        "viewBox": "0 0 24 24",
-        "style": {
-          fill: '#707070'
-        },
-        "class": this.$props.className
-      }, [createVNode("path", {
-        "d": "M0 0h24v24H0z",
-        "fill": "none"
-      }, null), createVNode("path", {
-        "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"
-      }, null)]);
-    }
-    if (this.$props.type === 'promoted-search-icon') {
-      return createVNode("svg", {
-        "xmlns": "http://www.w3.org/2000/svg",
-        "width": "20",
-        "alt": "promoted search",
-        "height": "20",
-        "viewBox": "0 0 24 24",
-        "class": this.$props.className,
-        "style": {
-          fill: '#707070'
-        }
-      }, [createVNode("path", {
-        "d": "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
-      }, null)]);
-    }
-    if (this.$props.type === 'popular-search-icon') {
-      return createVNode("svg", {
-        "xmlns": "http://www.w3.org/2000/svg",
-        "alt": "Popular Search",
-        "height": "20",
-        "width": "20",
-        "viewBox": "0 0 24 24",
-        "style": {
-          fill: '#707070'
-        },
-        "class": this.$props.className
-      }, [createVNode("path", {
-        "d": "M0 0h24v24H0z",
-        "fill": "none"
-      }, null), createVNode("path", {
-        "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"
-      }, null)]);
-    }
-    return createVNode(SearchSvg, {
-      "styles": {
-        position: 'relative',
-        fill: '#707070',
-        left: '3px',
-        marginRight: '8px'
-      }
-    }, null);
-  }
-};
-
-var _templateObject$6;
-var AutofillSvgIcon = styled('button')(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
-var AutoFillSvg = {
-  name: 'AutoFillSvg',
-  render: function render() {
-    return createVNode(AutofillSvgIcon, {
-      "onClick": this.$attrs.click
-    }, {
-      "default": function _default() {
-        return [createVNode("svg", {
-          "viewBox": "0 0 24 24"
-        }, [createVNode("path", {
-          "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
-        }, null)])];
-      }
-    });
-  },
-  methods: {
-    clicked: function clicked(e) {
-      e.stopPropagation();
-      window.console.log('hey', e);
-    }
-  }
-};
-
-var _templateObject$7, _templateObject2;
-var TagsContainer = styled('div')(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
-var TagItem = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tcursor: default;\n\tbox-sizing: border-box;\n\tmargin: 0 4px 4px 0;\n\tcolor: #000000d9;\n\tfont-size: 14px;\n\tfont-variant: tabular-nums;\n\tline-height: 1.5715;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tdisplay: inline-block;\n\theight: auto;\n\tpadding: 0 2px 0 7px;\n\tfont-size: 12px;\n\tline-height: 22px;\n\twhite-space: nowrap;\n\tbackground: #fafafa;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 2px;\n\topacity: 1;\n\ttransition: all 0.3s;\n\n\tspan.close-icon {\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\theight: 15px;\n\t\t\tposition: relative;\n\t\t\ttop: 4px;\n\t\t\tfill: #262626;\n\t\t}\n\t}\n"])));
-
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
-}
-var updateQuery = Actions.updateQuery,
-  setCustomQuery = Actions.setCustomQuery,
-  setDefaultQuery = Actions.setDefaultQuery,
-  recordSuggestionClick = Actions.recordSuggestionClick;
-var _debounce = helper.debounce,
-  checkValueChange = helper.checkValueChange,
-  getClassName$1 = helper.getClassName,
-  isEqual = helper.isEqual,
-  getCompositeAggsQuery = helper.getCompositeAggsQuery,
-  withClickIds = helper.withClickIds,
-  getResultStats = helper.getResultStats;
-var SearchBox = defineComponent({
-  name: 'SearchBox',
-  isTagsMode: false,
-  data: function data() {
-    var props = this.$props;
-    this.__state = {
-      currentValue: '',
-      selectedTags: [],
-      isOpen: false,
-      normalizedSuggestions: []
-    };
-    this.internalComponent = props.componentId + "__internal";
-    return this.__state;
-  },
-  inject: {
-    theme: {
-      from: 'theme_reactivesearch'
-    }
-  },
-  created: function created() {
-    var mode = this.$props.mode;
-    if (mode === SEARCH_COMPONENTS_MODES.TAG) {
-      this.$options.isTagsMode = true;
-    }
-    if (this.$options.isTagsMode) {
-      console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
-    }
-    this.currentValue = decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
-    if (this.$options.isTagsMode) {
-      this.currentValue = '';
-    }
-    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
-
-    // Set custom and default queries in store
-    this.triggerCustomQuery(this.currentValue, this.selectedCategory);
-    this.triggerDefaultQuery(this.currentValue);
-    if (this.selectedValue) {
-      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
-    } else if (this.$props.value) {
-      this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
-    } else if (this.$props.defaultValue) {
-      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
-    }
-  },
-  computed: {
-    hasCustomRenderer: function hasCustomRenderer$1() {
-      return hasCustomRenderer(this);
-    },
-    stats: function stats() {
-      return getResultStats(this);
-    }
-  },
-  props: {
-    autoFocus: VueTypes.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.shape({
-      field: VueTypes.string,
-      weight: VueTypes.number
-    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
-      field: VueTypes.string,
-      weight: VueTypes.number
-    })]),
-    aggregationField: types.string,
-    aggregationSize: VueTypes.number,
-    size: VueTypes.number,
-    debounce: VueTypes.number.def(0),
-    defaultValue: types.string,
-    excludeFields: types.excludeFields,
-    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), types.value]),
-    defaultSuggestions: types.suggestions,
-    enableSynonyms: VueTypes.bool.def(true),
-    enableQuerySuggestions: VueTypes.bool.def(false),
-    enablePopularSuggestions: VueTypes.bool.def(false),
-    enableRecentSuggestions: VueTypes.bool.def(false),
-    fieldWeights: types.fieldWeights,
-    filterLabel: types.string,
-    fuzziness: types.fuzziness,
-    highlight: VueTypes.bool,
-    highlightField: types.stringOrArray,
-    icon: types.children,
-    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
-    includeFields: types.includeFields,
-    innerClass: types.style,
-    innerRef: VueTypes.string.def('searchInputField'),
-    render: 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,
-    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: VueTypes.bool.def(false),
-    getMicInstance: types.func,
-    renderMic: types.func,
-    distinctField: types.string,
-    distinctFieldConfig: types.props,
-    //
-    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
-    addonBefore: VueTypes.any,
-    addonAfter: VueTypes.any,
-    expandSuggestionsContainer: VueTypes.bool.def(true),
-    index: VueTypes.string,
-    popularSuggestionsConfig: VueTypes.object,
-    recentSuggestionsConfig: VueTypes.object,
-    applyStopwords: VueTypes.bool,
-    customStopwords: types.stringArray,
-    onData: types.func,
-    renderItem: types.func,
-    enterButton: VueTypes.bool.def(false),
-    renderEnterButton: VueTypes.any,
-    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
-    renderSelectedTags: VueTypes.any,
-    searchboxId: VueTypes.string,
-    endpoint: types.endpointConfig
-  },
-  mounted: function mounted() {
-    this.listenForFocusShortcuts();
-  },
-  watch: {
-    dataField: function dataField(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal)) {
-        this.triggerCustomQuery(this.$data.currentValue);
-      }
-    },
-    fieldWeights: function fieldWeights() {
-      this.triggerCustomQuery(this.$data.currentValue);
-    },
-    fuzziness: function fuzziness() {
-      this.triggerCustomQuery(this.$data.currentValue);
-    },
-    queryFormat: function queryFormat() {
-      this.triggerCustomQuery(this.$data.currentValue);
-    },
-    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, newVal === '' ? causes.CLEAR_VALUE : undefined, false);
-      }
-    },
-    defaultQuery: function defaultQuery(newVal, oldVal) {
-      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-        this.triggerDefaultQuery(this.$data.currentValue);
-      }
-    },
-    customQuery: function customQuery(newVal, oldVal) {
-      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-        this.triggerCustomQuery(this.$data.currentValue);
-      }
-    },
-    suggestions: function suggestions(newVal) {
-      var suggestionsList = [];
-      if (Array.isArray(newVal) && newVal.length) {
-        suggestionsList = [].concat(withClickIds(newVal));
-      } else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
-        suggestionsList = [].concat(withClickIds(this.$props.defaultSuggestions));
-      }
-      this.normalizedSuggestions = suggestionsList;
-    },
-    selectedValue: function selectedValue(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
-        if (!newVal && this.$data.currentValue) {
-          // selected value is cleared, call onValueSelected
-          this.onValueSelectedHandler('', causes.CLEAR_VALUE);
-        }
-        if (this.$options.isTagsMode) {
-          // handling reset of tags through SelectedFilters or URL
-          this.selectedTags = [];
-        }
-        var cause = !newVal ? causes.CLEAR_VALUE : undefined;
-        if (this.$options.isTagsMode) {
-          cause = causes.SUGGESTION_SELECT;
-        }
-        this.setValue(newVal || '', true, this.$props, cause);
-      }
-    },
-    focusShortcuts: function focusShortcuts() {
-      this.listenForFocusShortcuts();
-    },
-    rawData: function rawData(newVal) {
-      this.$emit('on-data', {
-        data: this.normalizedSuggestions,
-        rawData: newVal,
-        aggregationData: this.aggregationData,
-        loading: this.isLoading,
-        error: this.isError
-      });
-    },
-    aggregationData: function aggregationData(newVal) {
-      this.$emit('on-data', {
-        data: this.normalizedSuggestions,
-        rawData: this.rawData,
-        aggregationData: newVal,
-        loading: this.isLoading,
-        error: this.isError
-      });
-    },
-    loading: function loading(newVal) {
-      this.$emit('on-data', {
-        data: this.normalizedSuggestions,
-        rawData: this.rawData,
-        aggregationData: this.aggregationData,
-        loading: newVal,
-        error: this.isError
-      });
-    },
-    error: function error(newVal) {
-      this.$emit('on-data', {
-        data: this.normalizedSuggestions,
-        rawData: this.rawData,
-        aggregationData: this.aggregationData,
-        loading: this.isLoading,
-        error: newVal
-      });
-    },
-    debounce: function debounce(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal)) {
-        this.handleTextChange = _debounce(this.handleText, newVal);
-      }
-    }
-  },
-  methods: {
-    handleText: function handleText(value, cause) {
-      if (cause === causes.CLEAR_VALUE) {
-        this.triggerCustomQuery(value);
-        this.triggerDefaultQuery(value);
-      } else if (this.$props.autosuggest) {
-        this.triggerDefaultQuery(value);
-      } else if (!this.$props.enterButton) {
-        this.triggerCustomQuery(value);
-      }
-    },
-    getComponent: function getComponent$1(downshiftProps) {
-      if (downshiftProps === void 0) {
-        downshiftProps = {};
-      }
-      var currentValue = this.$data.currentValue;
-      var data = {
-        error: this.error,
-        loading: this.isLoading,
-        downshiftProps: downshiftProps,
-        data: this.normalizedSuggestions,
-        rawData: this.rawData,
-        value: currentValue,
-        resultStats: this.stats
-      };
-      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;
-    },
-    handleSearchIconClick: function handleSearchIconClick() {
-      var currentValue = this.currentValue;
-      if (currentValue.trim()) {
-        this.setValue(currentValue, true);
-        this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
-      }
-    },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
-      var _this = this;
-      if (isDefaultValue === void 0) {
-        isDefaultValue = false;
-      }
-      if (props === void 0) {
-        props = this.$props;
-      }
-      if (toggleIsOpen === void 0) {
-        toggleIsOpen = true;
-      }
-      if (categoryValue === void 0) {
-        categoryValue = undefined;
-      }
-      var performUpdate = function performUpdate() {
-        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
-          return;
-        }
-        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
-          if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
-            // check if value already present in selectedTags
-            if (typeof value === 'string' && _this.selectedTags.includes(value)) {
-              _this.isOpen = false;
-              return;
-            }
-            _this.selectedTags = [].concat(_this.selectedTags);
-            if (typeof value === 'string' && !!value) {
-              _this.selectedTags.push(value);
-            } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
-              _this.selectedTags = value;
-            }
-          } else if (value) {
-            _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
-          }
-          _this.currentValue = '';
-        } else {
-          _this.currentValue = decodeHtml(value);
-        }
-        var queryHandlerValue = value;
-        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
-          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
-        }
-        if (isDefaultValue) {
-          if (_this.$props.autosuggest) {
-            if (toggleIsOpen) {
-              _this.isOpen = false;
-            }
-            if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
-          } // 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 || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
-              _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
-            } else {
-              _this.setValue('', true);
-            }
-          } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
-            _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
-          }
-        } else {
-          // debounce for handling text while typing
-          _this.handleTextChange(value, cause);
-        }
-        _this.$emit('valueChange', value);
-        _this.$emit('value-change', value);
-      };
-      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
-    },
-    triggerDefaultQuery: function triggerDefaultQuery(paramValue) {
-      if (!this.$props.autosuggest) {
-        return;
-      }
-      var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
-      var query = SearchBox.defaultQuery(value, this.$props);
-      if (this.defaultQuery) {
-        var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
-        }
-
-        // Update calculated default query in store
-        updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
-      }
-      this.updateQuery({
-        componentId: this.internalComponent,
-        query: query,
-        value: value,
-        componentType: componentTypes.searchBox
-      });
-    },
-    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
-      if (categoryValue === void 0) {
-        categoryValue = undefined;
-      }
-      var _this$$props = this.$props,
-        customQuery = _this$$props.customQuery,
-        filterLabel = _this$$props.filterLabel,
-        showFilter = _this$$props.showFilter,
-        URLParams = _this$$props.URLParams;
-      var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
-      if (this.$options.isTagsMode) {
-        value = paramValue;
-      }
-      var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
-      var query = defaultQueryTobeSet;
-      if (customQuery) {
-        var customQueryTobeSet = customQuery(value, this.$props);
-        var queryTobeSet = customQueryTobeSet.query;
-        if (queryTobeSet) {
-          query = queryTobeSet;
-        }
-        updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
-      }
-      this.updateQuery({
-        componentId: this.$props.componentId,
-        query: query,
-        value: value,
-        label: filterLabel,
-        showFilter: showFilter,
-        URLParams: URLParams,
-        componentType: componentTypes.searchBox,
-        category: categoryValue
-      });
-    },
-    handleFocus: function handleFocus(event) {
-      if (this.$props.autosuggest) {
-        this.isOpen = true;
-      }
-      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.setValue(results[0][0].transcript.trim(), true);
-      }
-    },
-    triggerQuery: function triggerQuery(_ref2) {
-      var _ref2$isOpen = _ref2.isOpen,
-        isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
-        _ref2$customQuery = _ref2.customQuery,
-        customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
-        _ref2$defaultQuery = _ref2.defaultQuery,
-        defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
-        _ref2$value = _ref2.value,
-        value = _ref2$value === void 0 ? undefined : _ref2$value,
-        _ref2$categoryValue = _ref2.categoryValue,
-        categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
-      if (typeof isOpen === 'boolean') {
-        this.isOpen = isOpen;
-      }
-      if (customQuery) {
-        this.triggerCustomQuery(value, categoryValue);
-      }
-      if (defaultQuery) {
-        this.triggerDefaultQuery(value);
-      }
-    },
-    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
-      // click analytics would only work client side and after javascript loads
-      var docId = documentId;
-      if (!docId) {
-        var hitData = this.normalizedSuggestions.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.setValue('', false, this.$props, causes.CLEAR_VALUE, false);
-      this.onValueSelectedHandler('', causes.CLEAR_VALUE);
-    },
-    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
-      if (highlightedIndex === void 0) {
-        highlightedIndex = null;
-      }
-      // if a suggestion was selected, delegate the handling to suggestion handler
-      if (event.key === 'Enter') {
-        if (this.$props.autosuggest === false) {
-          this.enterButtonOnClick();
-        } else if (highlightedIndex === null) {
-          this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined // to handle tags
-          );
-
-          this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
-        }
-      }
-
-      // Need to review
-      this.$emit('keyDown', event, this.triggerQuery);
-      this.$emit('key-down', event, this.triggerQuery);
-    },
-    onInputChange: function onInputChange(e) {
-      var _this2 = this;
-      var inputValue = e.target.value;
-      if (!this.$data.isOpen && this.$props.autosuggest) {
-        this.isOpen = true;
-      }
-      var value = this.$props.value;
-      if (value === undefined) {
-        this.setValue(inputValue, false, this.$props, inputValue === '' ? causes.CLEAR_VALUE : undefined);
-      } else {
-        this.$emit('change', inputValue, function (_ref3) {
-          var isOpen = _ref3.isOpen;
-          return _this2.triggerQuery({
-            defaultQuery: true,
-            customQuery: true,
-            value: inputValue,
-            isOpen: isOpen
-          });
-        }, e);
-      }
-    },
-    onSuggestionSelected: function onSuggestionSelected(suggestion) {
-      var _this3 = this;
-      this.isOpen = false;
-      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, false, suggestion._category);
-      } else {
-        var emitValue = suggestion.value;
-        if (this.$options.isTagsMode) {
-          emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
-          if (this.selectedTags.includes(suggestion.value)) {
-            // avoid duplicates in tags array
-            this.isOpen = false;
-            return;
-          }
-          emitValue.push(suggestion.value);
-        }
-        this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
-        this.$emit('change', emitValue, function (_ref4) {
-          var isOpen = _ref4.isOpen;
-          return _this3.triggerQuery(_extends({
-            isOpen: isOpen,
-            value: emitValue
-          }, !_this3.$options.isTagsMode && {
-            categoryValue: suggestion._category
-          }));
-        });
-      }
-      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() {
-      if (this.$props.showIcon) {
-        return this.$props.icon || createVNode(SearchSvg, null, null);
-      }
-      return null;
-    },
-    renderErrorComponent: function renderErrorComponent() {
-      var _this4 = this;
-      var renderError = this.$slots.renderError || this.$props.renderError;
-      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
-        return createVNode(SuggestionWrapper, {
-          "innerClass": this.$props.innerClass,
-          "innerClassName": "error",
-          "theme": this.theme,
-          "themePreset": this.themePreset
-        }, {
-          "default": function _default() {
-            return [isFunction(renderError) ? renderError(_this4.error) : renderError];
-          }
-        });
-      }
-      return null;
-    },
-    renderCancelIcon: function renderCancelIcon() {
-      if (this.$props.showClear) {
-        return this.$props.clearIcon || createVNode(CancelSvg, null, null);
-      }
-      return null;
-    },
-    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
-      if (finalSuggestionsList === void 0) {
-        finalSuggestionsList = [];
-      }
-      var innerClass = this.$props.innerClass;
-      var renderNoSuggestion = this.$slots.renderNoSuggestion || this.$props.renderNoSuggestion;
-      var renderError = this.$slots.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 createVNode(SuggestionWrapper, {
-          "innerClass": innerClass,
-          "themePreset": this.themePreset,
-          "theme": this.theme,
-          "innerClassName": "noSuggestion"
-        }, {
-          "default": function _default() {
-            return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
-          }
-        });
-      }
-      return null;
-    },
-    renderInputAddonBefore: function renderInputAddonBefore() {
-      var addonBefore = this.$slots.addonBefore;
-      if (addonBefore) {
-        var _slot;
-        return createVNode(InputAddon, {
-          "class": "addon-before"
-        }, _isSlot(_slot = addonBefore()) ? _slot : {
-          "default": function _default() {
-            return [_slot];
-          }
-        });
-      }
-      return null;
-    },
-    renderInputAddonAfter: function renderInputAddonAfter() {
-      var addonAfter = this.$slots.addonAfter;
-      if (addonAfter) {
-        var _slot2;
-        return createVNode(InputAddon, {
-          "class": "addon-after"
-        }, _isSlot(_slot2 = addonAfter()) ? _slot2 : {
-          "default": function _default() {
-            return [_slot2];
-          }
-        });
-      }
-      return null;
-    },
-    enterButtonOnClick: function enterButtonOnClick() {
-      this.triggerQuery({
-        isOpen: false,
-        value: this.currentValue,
-        customQuery: true
-      });
-    },
-    renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this5 = this;
-      var _this$$props2 = this.$props,
-        enterButton = _this$$props2.enterButton,
-        innerClass = _this$$props2.innerClass;
-      var renderEnterButton = this.$slots.renderEnterButton;
-      if (enterButton) {
-        var getEnterButtonMarkup = function getEnterButtonMarkup() {
-          if (renderEnterButton) {
-            return renderEnterButton(_this5.enterButtonOnClick);
-          }
-          return createVNode(Button, {
-            "class": "enter-btn " + getClassName$1(innerClass, 'enter-button'),
-            "primary": true,
-            "onClick": _this5.enterButtonOnClick
-          }, {
-            "default": function _default() {
-              return [createTextVNode("Search")];
-            }
-          });
-        };
-        return createVNode("div", {
-          "class": "enter-button-wrapper"
-        }, [getEnterButtonMarkup()]);
-      }
-      return null;
-    },
-    renderIcons: function renderIcons() {
-      var _this6 = this;
-      var _slot3, _slot4, _slot5;
-      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.$slots.renderMic || this.$props.renderMic;
-      var currentValue = this.$data.currentValue;
-      return createVNode("div", null, [createVNode(IconGroup, {
-        "groupPosition": "right",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [currentValue && showClear && createVNode(IconWrapper, {
-            "onClick": _this6.clearValue,
-            "showIcon": showIcon,
-            "isClearIcon": true
-          }, _isSlot(_slot3 = _this6.renderCancelIcon()) ? _slot3 : {
-            "default": function _default() {
-              return [_slot3];
-            }
-          }), showVoiceSearch && createVNode(Mic, {
-            "getInstance": getMicInstance,
-            "render": renderMic,
-            "handleResult": _this6.handleVoiceResults,
-            "className": getClassName$1(innerClass, 'mic') || null
-          }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this6.handleSearchIconClick
-          }, _isSlot(_slot4 = _this6.renderIcon()) ? _slot4 : {
-            "default": function _default() {
-              return [_slot4];
-            }
-          })];
-        }
-      }), createVNode(IconGroup, {
-        "groupPosition": "left",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this6.handleSearchIconClick
-          }, _isSlot(_slot5 = _this6.renderIcon()) ? _slot5 : {
-            "default": function _default() {
-              return [_slot5];
-            }
-          })];
-        }
-      })]);
-    },
-    focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs, _this$$refs$this$$pro;
-      var elt = event.target || event.srcElement;
-      var tagName = elt.tagName;
-      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
-        // already in an input
-        return;
-      }
-      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
-    },
-    listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this7 = this;
-      var _this$$props$focusSho = this.$props.focusShortcuts,
-        focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
-      if (isEmpty(focusShortcuts)) {
-        return;
-      }
-      var shortcutsString = parseFocusShortcuts(focusShortcuts).join(',');
-
-      // handler for alphabets and other key combinations
-      hotkeys(shortcutsString,
-      // eslint-disable-next-line no-unused-vars
-      /* eslint-disable no-shadow */
-      function (event, handler) {
-        // Prevent the default refresh event under WINDOWS system
-        event.preventDefault();
-        _this7.focusSearchBox(event);
-      });
-
-      // if one of modifier keys are used, they are handled below
-      hotkeys('*', function (event) {
-        var modifierKeys = extractModifierKeysFromFocusShortcuts(focusShortcuts);
-        if (modifierKeys.length === 0) return;
-        for (var index = 0; index < modifierKeys.length; index += 1) {
-          var element = modifierKeys[index];
-          if (hotkeys[element]) {
-            _this7.focusSearchBox(event);
-            break;
-          }
-        }
-      });
-    },
-    onAutofillClick: function onAutofillClick(suggestion) {
-      var value = suggestion.value;
-      this.isOpen = true;
-      this.currentValue = decodeHtml(value);
-      this.triggerDefaultQuery(value);
-    },
-    renderAutoFill: function renderAutoFill(suggestion) {
-      var _this8 = this;
-      var handleAutoFillClick = function handleAutoFillClick(e) {
-        e.stopPropagation();
-        _this8.onAutofillClick(suggestion);
-      };
-      /* 👇 avoid showing autofill for category suggestions👇 */
-      return suggestion._category ? null : createVNode(AutoFillSvg, {
-        "onClick": handleAutoFillClick
-      }, null);
-    },
-    renderTag: function renderTag(item) {
-      var _this9 = this;
-      var innerClass = this.$props.innerClass;
-      return createVNode(TagItem, {
-        "class": getClassName$1(innerClass, 'selected-tag') || ''
-      }, {
-        "default": function _default() {
-          return [createVNode("span", null, [item]), createVNode("span", {
-            "role": "img",
-            "aria-label": "delete-tag",
-            "class": "close-icon",
-            "onClick": function onClick() {
-              return _this9.clearTag(item);
-            }
-          }, [createVNode(CancelSvg, null, null)])];
-        }
-      });
-    },
-    clearAllTags: function clearAllTags() {
-      this.selectedTags = [];
-      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
-      if (this.$props.value !== undefined) {
-        this.$emit('change', this.selectedTags, this.triggerQuery);
-      }
-    },
-    clearTag: function clearTag(tagValue) {
-      this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
-        return tag !== tagValue;
-      }));
-      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
-      if (this.$props.value !== undefined) {
-        this.$emit('change', this.selectedTags, this.triggerQuery);
-      }
-    },
-    renderTags: function renderTags() {
-      var _this10 = this;
-      if (!Array.isArray(this.selectedTags)) {
-        return null;
-      }
-      var tagsList = [].concat(this.selectedTags);
-      var shouldRenderClearAllTag = tagsList.length > 1;
-      var renderSelectedTags = this.$slots.renderSelectedTags || this.$props.renderSelectedTags;
-      return renderSelectedTags ? renderSelectedTags({
-        values: this.selectedTags,
-        handleClear: this.clearTag,
-        handleClearAll: this.clearAllTags
-      }) : createVNode(TagsContainer, null, {
-        "default": function _default() {
-          return [tagsList.map(function (item) {
-            return _this10.renderTag(item);
-          }), shouldRenderClearAllTag && createVNode(TagItem, {
-            "class": getClassName$1(_this10.$props.innerClass, 'selected-tag') || ''
-          }, {
-            "default": function _default() {
-              return [createVNode("span", null, [createTextVNode("Clear All")]), createVNode("span", {
-                "role": "img",
-                "aria-label": "delete-tag",
-                "class": "close-icon",
-                "onClick": _this10.clearAllTags
-              }, [createVNode(CancelSvg, null, null)])];
-            }
-          })];
-        }
-      });
-    }
-  },
-  render: function render() {
-    var _this11 = this;
-    var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
-    var _this$$slots = this.$slots,
-      recentSearchesIcon = _this$$slots.recentSearchesIcon,
-      popularSearchesIcon = _this$$slots.popularSearchesIcon;
-    var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
-    var renderItem = this.$slots.renderItem || this.$props.renderItem;
-    return createVNode(Container, {
-      "class": this.$props.className
-    }, {
-      "default": function _default() {
-        return [_this11.$props.title && createVNode(Title, {
-          "class": getClassName$1(_this11.$props.innerClass, 'title') || ''
-        }, {
-          "default": function _default() {
-            return [_this11.$props.title];
-          }
-        }), _this11.$props.autosuggest ? createVNode(Downshift, {
-          "id": _this11.$props.componentId + "-downshift",
-          "handleChange": _this11.onSuggestionSelected,
-          "handleMouseup": _this11.handleStateChange,
-          "isOpen": _this11.$data.isOpen
-        }, {
-          "default": function _default(_ref5) {
-            var getInputEvents = _ref5.getInputEvents,
-              getInputProps = _ref5.getInputProps,
-              getItemProps = _ref5.getItemProps,
-              getItemEvents = _ref5.getItemEvents,
-              isOpen = _ref5.isOpen,
-              highlightedIndex = _ref5.highlightedIndex,
-              setHighlightedIndex = _ref5.setHighlightedIndex;
-            var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-              var getIcon = function getIcon(iconType) {
-                switch (iconType) {
-                  case suggestionTypes.Recent:
-                    return recentSearchesIcon;
-                  case suggestionTypes.Popular:
-                    return popularSearchesIcon;
-                  default:
-                    return null;
-                }
-              };
-              return createVNode("div", null, [_this11.hasCustomRenderer && _this11.getComponent({
-                isOpen: isOpen,
-                getItemProps: getItemProps,
-                getItemEvents: getItemEvents,
-                highlightedIndex: highlightedIndex
-              }), _this11.renderErrorComponent(), !_this11.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
-                "class": suggestions(_this11.themePreset, _this11.theme) + " " + getClassName$1(_this11.$props.innerClass, 'list')
-              }, [_this11.normalizedSuggestions.map(function (item, index) {
-                return renderItem ? createVNode("li", mergeProps(getItemProps({
-                  item: item
-                }), getItemEvents({
-                  item: item
-                }), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [renderItem(item)]) : createVNode("li", mergeProps(getItemProps({
-                  item: item
-                }), _transformOn(getItemEvents({
-                  item: item
-                })), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [createVNode("div", {
-                  "style": {
-                    padding: '0 10px 0 0',
-                    display: 'flex'
-                  }
-                }, [createVNode(CustomSvg, {
-                  "className": getClassName$1(_this11.$props.innerClass, item._suggestion_type + "-search-icon") || null,
-                  "icon": getIcon(item._suggestion_type),
-                  "type": item._suggestion_type + "-search-icon"
-                }, null)]), createVNode(SuggestionItem, {
-                  "currentValue": _this11.currentValue,
-                  "suggestion": item
-                }, null), _this11.renderAutoFill(item)]);
-              })]) : _this11.renderNoSuggestions(_this11.normalizedSuggestions)]);
-            };
-            return createVNode("div", {
-              "class": suggestionsContainer
-            }, [createVNode(InputGroup, null, {
-              "default": function _default() {
-                return [_this11.renderInputAddonBefore(), createVNode(InputWrapper, null, {
-                  "default": function _default() {
-                    return [createVNode(Input, mergeProps(_transformOn(getInputEvents({
-                      onInput: _this11.onInputChange,
-                      onBlur: function onBlur(e) {
-                        _this11.$emit('blur', e, _this11.triggerQuery);
-                      },
-                      onFocus: _this11.handleFocus,
-                      onKeyPress: function onKeyPress(e) {
-                        _this11.$emit('keyPress', e, _this11.triggerQuery);
-                        _this11.$emit('key-press', e, _this11.triggerQuery);
-                      },
-                      onKeyDown: function onKeyDown(e) {
-                        return _this11.handleKeyDown(e, highlightedIndex);
-                      },
-                      onKeyUp: function onKeyUp(e) {
-                        _this11.$emit('keyUp', e, _this11.triggerQuery);
-                        _this11.$emit('key-up', e, _this11.triggerQuery);
-                      },
-                      onClick: function onClick() {
-                        setHighlightedIndex(null);
-                      }
-                    })), {
-                      "id": _this11.$props.componentId + "-input",
-                      "showIcon": _this11.$props.showIcon,
-                      "showClear": _this11.$props.showClear,
-                      "iconPosition": _this11.$props.iconPosition,
-                      "ref": _this11.$props.innerRef,
-                      "class": getClassName$1(_this11.$props.innerClass, 'input'),
-                      "placeholder": _this11.$props.placeholder,
-                      "autoFocus": _this11.$props.autoFocus
-                    }, getInputProps({
-                      value: _this11.$data.currentValue === null ? '' : _this11.$data.currentValue
-                    }), {
-                      "themePreset": _this11.themePreset,
-                      "autocomplete": "off"
-                    }), null), _this11.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
-                  }
-                }), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
-              }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this11.renderTags()]);
-          }
-        }) : createVNode("div", {
-          "class": suggestionsContainer
-        }, [createVNode(InputGroup, null, {
-          "default": function _default() {
-            return [_this11.renderInputAddonBefore(), createVNode(InputWrapper, null, {
-              "default": function _default() {
-                return [createVNode(Input, mergeProps(_transformOn({
-                  blur: function blur(e) {
-                    _this11.$emit('blur', e, _this11.triggerQuery);
-                  },
-                  keypress: function keypress(e) {
-                    _this11.$emit('keyPress', e, _this11.triggerQuery);
-                    _this11.$emit('key-press', e, _this11.triggerQuery);
-                  },
-                  input: _this11.onInputChange,
-                  focus: function focus(e) {
-                    _this11.$emit('focus', e, _this11.triggerQuery);
-                  },
-                  keydown: _this11.handleKeyDown,
-                  keyup: function keyup(e) {
-                    _this11.$emit('keyUp', e, _this11.triggerQuery);
-                    _this11.$emit('key-up', e, _this11.triggerQuery);
-                  }
-                }), {
-                  "class": getClassName$1(_this11.$props.innerClass, 'input') || '',
-                  "placeholder": _this11.$props.placeholder,
-                  "autofocus": _this11.$props.autoFocus,
-                  "value": _this11.$data.currentValue ? _this11.$data.currentValue : '',
-                  "iconPosition": _this11.$props.iconPosition,
-                  "showIcon": _this11.$props.showIcon,
-                  "showClear": _this11.$props.showClear,
-                  "ref": _this11.$props.innerRef,
-                  "themePreset": _this11.themePreset
-                }), null), _this11.renderIcons()];
-              }
-            }), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
-          }
-        })])];
-      }
-    });
-  },
-  destroyed: function destroyed() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-});
-SearchBox.hasInternalComponent = function () {
-  return true;
-};
-SearchBox.defaultQuery = function (value, props) {
-  var finalQuery = null;
-  finalQuery = {
-    bool: {
-      should: SearchBox.shouldQuery(value, props),
-      minimum_should_match: '1'
-    }
-  };
-  if (finalQuery && props.nestedField) {
-    return {
-      query: {
-        nested: {
-          path: props.nestedField,
-          query: finalQuery
-        }
-      }
-    };
-  }
-  return finalQuery;
-};
-SearchBox.shouldQuery = function (value, props) {
-  return {
-    query: {
-      queryFormat: props.queryFormat,
-      dataField: props.dataField,
-      value: value,
-      nestedField: props.nestedField,
-      queryString: props.queryString,
-      searchOperators: props.searchOperators
-    }
-  };
-};
-var mapStateToProps = function mapStateToProps(state, props) {
-  return {
-    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-    selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
-    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
-    rawData: state.rawData[props.componentId],
-    aggregationData: state.compositeAggregations[props.componentId] || [],
-    themePreset: state.config.themePreset,
-    isLoading: !!state.isLoading[props.componentId + "_active"],
-    error: state.error[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
-  };
-};
-var mapDispatchToProps = {
-  updateQuery: updateQuery,
-  setCustomQuery: setCustomQuery,
-  setDefaultQuery: setDefaultQuery,
-  recordSuggestionClick: recordSuggestionClick
-};
-var SBConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
-  componentType: componentTypes.searchBox,
-  internalComponent: true
-}));
-SBConnected.name = SearchBox.name;
-SBConnected.defaultQuery = SearchBox.defaultQuery;
-SBConnected.shouldQuery = SearchBox.shouldQuery;
-SBConnected.hasInternalComponent = SearchBox.hasInternalComponent;
-SBConnected.install = function (Vue) {
-  Vue.component(SBConnected.name, SBConnected);
-};
-// Add componentType for SSR
-SBConnected.componentType = componentTypes.searchBox;
-
-export default SBConnected;
-export { SBConnected };