@appbaseio/reactivesearch-vue 3.0.0-rc.8 → 3.0.0-rc.9

package/dist/cjs/{install-2a1c953d.js → install-e8141489.js}

@@ -26,9 +26,8 @@ var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
 var remarkable = require('remarkable');
-var xss = _interopDefault(require('xss'));
-var DropDown = require('./DropDown-82d92f8b.js');
-var Input = require('./Input-fcd780de.js');
+var DropDown = require('./DropDown-aef75c14.js');
+var Input = require('./Input-56eba499.js');
 var Container = require('./Container-29f049b2.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 var query = require('@appbaseio/reactivecore/lib/actions/query');
@@ -53,13 +52,7 @@ var ResultList = require('./ResultList.js');
 var StateProvider = require('./StateProvider.js');
 
 var _templateObject;
-var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  \tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n\t", "\n\t};\n"])), function (_ref) {
-  var theme = _ref.theme,
-    searchBox = _ref.searchBox;
-  return searchBox && "background-color: " + (theme.colors.backgroundColor || '#fafafa') + ";\n\t\tcolor: " + (theme.colors.textColor || '#fff') + ";\n\n\t\t&:focus-within {\n\t\t\tbackground-color: " + (theme.colors.backgroundColor || '#fff') + ";\n\t\t}";
-}, function (props) {
-  return props.isOpen && 'box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;';
-});
+var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
 InputGroup.defaultProps = {
   className: 'input-group'
 };
@@ -789,11 +782,8 @@ var _templateObject$4, _templateObject2;
 var TagsContainer = vueEmotion.styled('div')(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
 var TagItem = vueEmotion.styled('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._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"])));
 
-var _templateObject$5;
-var AutosuggestFooterContainer = vueEmotion.styled('div')(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
-
-var _templateObject$6, _templateObject2$1, _templateObject3;
-var skeletonAnimation = css.keyframes(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
+var _templateObject$5, _templateObject2$1, _templateObject3;
+var skeletonAnimation = css.keyframes(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
 var SkeletonLoader = vueEmotion.styled('div')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n"])));
 var SkeletonLine = vueEmotion.styled('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 20px;\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\trgba(220, 220, 220, 0.5) 25%,\n\t\trgba(240, 240, 240, 0.9) 50%,\n\t\trgba(220, 220, 220, 0.5) 75%\n\t);\n\tbackground-size: 200% 100%;\n\tanimation: ", " 1.5s infinite;\n"])), skeletonAnimation);
 var HorizontalSkeletonLoader = vue.defineComponent({
@@ -807,8 +797,8 @@ var HorizontalSkeletonLoader = vue.defineComponent({
   }
 });
 
-var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var Chatbox = vueEmotion.styled('div')(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n"])), function (props) {
+var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var Chatbox = vueEmotion.styled('div')(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n"])), function (props) {
   return props.theme && props.theme.colors ? props.theme.colors.backgroundColor : '#fff';
 });
 var ChatContainer = vueEmotion.styled('div')(_templateObject2$2 || (_templateObject2$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tposition: relative;\n\t.--ai-answer-error-container {\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tbottom: 0px;\n\t\t", ";\n\t\tz-index: 1;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 100%;\n\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tpadding: 10px;\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 -5px 5px -2px\n\t\t\t\t", ";\n\n\t\t\tspan {\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t}\n\t\t}\n\t}\n\n\t", ";\n"])), function (props) {
@@ -883,8 +873,8 @@ var MessageInput = vueEmotion.styled(Input.TextArea)(_templateObject9 || (_templ
 var SendButton = vueEmotion.styled(Button.Button)(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: none;\n\tcolor: #ffffff;\n\tcursor: pointer;\n\tfont-size: 16px;\n\tmargin-left: 8px;\n\toutline: none;\n\tpadding: 10px;\n\ttext-align: center;\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t}\n"])));
 var AIFeedbackContainer = vueEmotion.styled('div')(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t.--feedback-svgs-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\tgap: 5px;\n\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\ttransition: all ease-in 0.1s;\n\t\t\t&.selected {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t}\n\t\t}\n\t}\n\n\t.--feedback-input-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 7px;\n\t}\n"])));
 
-var _templateObject$8, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
-var fadeInFromBottom = css.keyframes(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var _templateObject$7, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
+var fadeInFromBottom = css.keyframes(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 var fadeInFromTop = css.keyframes(_templateObject2$3 || (_templateObject2$3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 var SearchBoxAISection = vueEmotion.styled('div')(_templateObject3$2 || (_templateObject3$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tpadding: 10px;\n\tborder-radius: 4px;\n\tmin-height: 200px;\n\tpadding-top: 20px;\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\t.--ai-answer-error-container {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tgap: 10px;\n\t\t}\n\t}\n"])), function (_ref) {
   var themePreset = _ref.themePreset,
@@ -1157,26 +1147,6 @@ var SearchBox = vue.defineComponent({
     },
     stats: function stats() {
       return getResultStats(this);
-    },
-    parsedSuggestions: function parsedSuggestions() {
-      var suggestionsArray = [];
-      if (Array.isArray(this.suggestions) && this.suggestions.length) {
-        suggestionsArray = [].concat(withClickIds(this.suggestions));
-      }
-      var sectionsAccumulated = [];
-      var sectionisedSuggestions = suggestionsArray.reduce(function (acc, d, currentIndex) {
-        if (sectionsAccumulated.includes(d.sectionId)) return acc;
-        if (d.sectionId) {
-          acc[currentIndex] = suggestionsArray.filter(function (g) {
-            return g.sectionId === d.sectionId;
-          });
-          sectionsAccumulated.push(d.sectionId);
-        } else {
-          acc[currentIndex] = d;
-        }
-        return acc;
-      }, {});
-      return Object.values(sectionisedSuggestions);
     }
   },
   props: {
@@ -1243,20 +1213,12 @@ var SearchBox = vue.defineComponent({
     distinctFieldConfig: vueTypes.types.props,
     //
     focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
-    showFocusShortcutsIcon: VueTypes.bool.def(true),
     addonBefore: VueTypes.any,
     addonAfter: VueTypes.any,
-    showSuggestionsFooter: VueTypes.bool.def(true),
     expandSuggestionsContainer: VueTypes.bool.def(true),
-    renderSuggestionsFooter: VueTypes.func,
     index: VueTypes.string,
     popularSuggestionsConfig: VueTypes.object,
     recentSuggestionsConfig: VueTypes.object,
-    featuredSuggestionsConfig: VueTypes.shape({
-      maxSuggestionsPerSection: VueTypes.number,
-      sectionsOrder: VueTypes.arrayOf(VueTypes.string)
-    }),
-    customEvents: VueTypes.object,
     applyStopwords: VueTypes.bool,
     customStopwords: vueTypes.types.stringArray,
     onData: vueTypes.types.func,
@@ -1702,52 +1664,12 @@ var SearchBox = vue.defineComponent({
         }, e);
       }
     },
-    handleFeaturedSuggestionClicked: function handleFeaturedSuggestionClicked(suggestion) {
-      try {
-        var _this$$refs2, _this$$refs2$this$$pr;
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.NAVIGATE) {
-          var _JSON$parse = JSON.parse(suggestion.subAction),
-            _JSON$parse$target = _JSON$parse.target,
-            target = _JSON$parse$target === void 0 ? '_self' : _JSON$parse$target,
-            _JSON$parse$link = _JSON$parse.link,
-            link = _JSON$parse$link === void 0 ? '/' : _JSON$parse$link;
-          if (typeof window !== 'undefined') {
-            window.open(link, target);
-          }
-        }
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
-          var matchedValues = suggestion.subAction.match(/function\s*\(.*\)(.|\n)*/);
-          var functionStr = matchedValues && matchedValues[0];
-          // eslint-disable-next-line no-new-func
-          var func = new Function("return " + functionStr)();
-          func(suggestion, this.$data.currentValue, this.$props.customEvents);
-        }
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.SELECT) {
-          this.setValue(suggestion.value, true, this.$props, this.$options.isTagsMode.current ? reactivecore.causes.SUGGESTION_SELECT : reactivecore.causes.ENTER_PRESS);
-          this.onValueSelectedHandler(suggestion.value, reactivecore.causes.SUGGESTION_SELECT);
-        }
-        // blur is important to close the dropdown
-        // on selecting one of featured suggestions
-        // else Downshift probably is focusing the dropdown
-        // and not letting it close
-        // eslint-disable-next-line no-unused-expressions
-        (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.blur();
-      } catch (e) {
-        console.error("Error: There was an error parsing the subAction for the featured suggestion with label, \"" + suggestion.label + "\"", e);
-      }
-    },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
       var _this4 = this;
       if (!this.$props.enableAI) this.isOpen = false;else {
         this.showAIScreen = true;
       }
       var value = this.$props.value;
-
-      // handle featured suggestions click event
-      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
-        this.handleFeaturedSuggestionClicked(suggestion);
-        return;
-      }
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
@@ -1903,13 +1825,6 @@ var SearchBox = vue.defineComponent({
         customQuery: true
       });
     },
-    suggestionsFooter: function suggestionsFooter() {
-      return typeof renderSuggestionsFooter === 'function' ? this.$props.renderSuggestionsFooter() : vue.createVNode(AutosuggestFooterContainer, null, {
-        "default": function _default() {
-          return [vue.createVNode("div", null, [vue.createTextVNode("\u2191\u2193 Navigate")]), vue.createVNode("div", null, [vue.createTextVNode("\u21A9 Go")])];
-        }
-      });
-    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this6 = this;
       var _this$$props2 = this.$props,
@@ -1937,98 +1852,71 @@ var SearchBox = vue.defineComponent({
       }
       return null;
     },
-    renderShortcut: function renderShortcut() {
-      if (this.$props.focusShortcuts && this.$props.focusShortcuts.length) {
-        var shortcut = this.$props.focusShortcuts[0];
-        shortcut = shortcut.toLowerCase();
-        shortcut = shortcut.replace('shift', '⬆️');
-        shortcut = shortcut.replace('command', 'cmd');
-        shortcut = shortcut.replace('control', 'ctrl');
-        shortcut = shortcut.replace('option', 'alt');
-        return shortcut.toUpperCase();
-      }
-      return '/';
-    },
-    renderLeftIcons: function renderLeftIcons() {
+    renderIcons: function renderIcons() {
       var _this7 = this;
-      var _slot3;
+      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;
-      return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
-        "groupPosition": "left"
-      }, {
-        "default": function _default() {
-          return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.IconWrapper, {
-            "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot3 = _this7.renderIcon()) ? _slot3 : {
-            "default": function _default() {
-              return [_slot3];
-            }
-          })];
-        }
-      })]);
-    },
-    renderRightIcons: function renderRightIcons() {
-      var _this8 = this;
-      var _slot4, _slot5, _slot6;
-      var _this$$props4 = this.$props,
-        iconPosition = _this$$props4.iconPosition,
-        showClear = _this$$props4.showClear,
-        innerClass = _this$$props4.innerClass,
-        getMicInstance = _this$$props4.getMicInstance,
-        showVoiceSearch = _this$$props4.showVoiceSearch,
-        showIcon = _this$$props4.showIcon,
-        showFocusShortcutsIcon = _this$$props4.showFocusShortcutsIcon;
       var renderMic = this.$slots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
-        "groupPosition": "right"
+        "groupPosition": "right",
+        "positionType": "absolute"
       }, {
         "default": function _default() {
           return [currentValue && showClear && vue.createVNode(DropDown.IconWrapper, {
-            "onClick": _this8.clearValue,
+            "onClick": _this7.clearValue,
             "showIcon": showIcon,
             "isClearIcon": true
-          }, _isSlot(_slot4 = _this8.renderCancelIcon()) ? _slot4 : {
+          }, _isSlot(_slot3 = _this7.renderCancelIcon()) ? _slot3 : {
             "default": function _default() {
-              return [_slot4];
-            }
-          }), showFocusShortcutsIcon && vue.createVNode(DropDown.ButtonIconWrapper, {
-            "onClick": function onClick(e) {
-              return _this8.focusSearchBox(e);
-            }
-          }, _isSlot(_slot5 = _this8.renderShortcut()) ? _slot5 : {
-            "default": function _default() {
-              return [_slot5];
+              return [_slot3];
             }
           }), showVoiceSearch && vue.createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this8.handleVoiceResults,
+            "handleResult": _this7.handleVoiceResults,
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && vue.createVNode(DropDown.IconWrapper, {
-            "onClick": _this8.handleSearchIconClick
-          }, _isSlot(_slot6 = _this8.renderIcon()) ? _slot6 : {
+            "onClick": _this7.handleSearchIconClick
+          }, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
             "default": function _default() {
-              return [_slot6];
+              return [_slot4];
+            }
+          })];
+        }
+      }), vue.createVNode(DropDown.IconGroup, {
+        "groupPosition": "left",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.IconWrapper, {
+            "onClick": _this7.handleSearchIconClick
+          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
+            "default": function _default() {
+              return [_slot5];
             }
           })];
         }
       })]);
     },
     focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs3, _this$$refs3$this$$pr;
+      var _this$$refs2, _this$$refs2$this$$pr;
       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$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$this$$pr = _this$$refs3[this.$props.innerRef]) == null ? void 0 : _this$$refs3$this$$pr.focus(); // eslint-disable-line
+      (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this9 = this;
+      var _this8 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (index.isEmpty(focusShortcuts)) {
@@ -2043,7 +1931,7 @@ var SearchBox = vue.defineComponent({
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this9.focusSearchBox(event);
+        _this8.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -2053,7 +1941,7 @@ var SearchBox = vue.defineComponent({
         for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
           var element = modifierKeys[index$1];
           if (hotkeys[element]) {
-            _this9.focusSearchBox(event);
+            _this8.focusSearchBox(event);
             break;
           }
         }
@@ -2065,34 +1953,19 @@ var SearchBox = vue.defineComponent({
       this.currentValue = index.decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
-    renderActionIcon: function renderActionIcon(suggestion) {
-      var _this10 = this;
+    renderAutoFill: function renderAutoFill(suggestion) {
+      var _this9 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this10.onAutofillClick(suggestion);
+        _this9.onAutofillClick(suggestion);
       };
-      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
-          return vue.createVNode(AutoFillSvg, {
-            "style": {
-              transform: 'rotate(135deg)',
-              pointerEvents: 'none'
-            }
-          }, null);
-        }
-        return null;
-      }
-      if (!suggestion._category) {
-        /* 👇 avoid showing autofill for category suggestions👇 */
-
-        return vue.createVNode(AutoFillSvg, {
-          "onClick": handleAutoFillClick
-        }, null);
-      }
-      return null;
+      /* 👇 avoid showing autofill for category suggestions👇 */
+      return suggestion._category ? null : vue.createVNode(AutoFillSvg, {
+        "onClick": handleAutoFillClick
+      }, null);
     },
     renderTag: function renderTag(item) {
-      var _this11 = this;
+      var _this10 = this;
       var innerClass = this.$props.innerClass;
       return vue.createVNode(TagItem, {
         "class": getClassName$1(innerClass, 'selected-tag') || ''
@@ -2103,7 +1976,7 @@ var SearchBox = vue.defineComponent({
             "aria-label": "delete-tag",
             "class": "close-icon",
             "onClick": function onClick() {
-              return _this11.clearTag(item);
+              return _this10.clearTag(item);
             }
           }, [vue.createVNode(DropDown.CancelSvg, null, null)])];
         }
@@ -2126,7 +1999,7 @@ var SearchBox = vue.defineComponent({
       }
     },
     renderTags: function renderTags() {
-      var _this12 = this;
+      var _this11 = this;
       if (!Array.isArray(this.selectedTags)) {
         return null;
       }
@@ -2140,16 +2013,16 @@ var SearchBox = vue.defineComponent({
       }) : vue.createVNode(TagsContainer, null, {
         "default": function _default() {
           return [tagsList.map(function (item) {
-            return _this12.renderTag(item);
+            return _this11.renderTag(item);
           }), shouldRenderClearAllTag && vue.createVNode(TagItem, {
-            "class": getClassName$1(_this12.$props.innerClass, 'selected-tag') || ''
+            "class": getClassName$1(_this11.$props.innerClass, 'selected-tag') || ''
           }, {
             "default": function _default() {
               return [vue.createVNode("span", null, [vue.createTextVNode("Clear All")]), vue.createVNode("span", {
                 "role": "img",
                 "aria-label": "delete-tag",
                 "class": "close-icon",
-                "onClick": _this12.clearAllTags
+                "onClick": _this11.clearAllTags
               }, [vue.createVNode(DropDown.CancelSvg, null, null)])];
             }
           })];
@@ -2196,8 +2069,8 @@ var SearchBox = vue.defineComponent({
       return vue.createVNode(HorizontalSkeletonLoader, null, null);
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
-      var _slot7;
-      var _this13 = this;
+      var _slot6;
+      var _this12 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
       var _ref6 = AIUIConfig || {},
@@ -2211,9 +2084,9 @@ var SearchBox = vue.defineComponent({
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot7 = _this13.getAISourceObjects().map(function (el) {
+          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
             return vue.createVNode(Button.Button, {
-              "class": "--ai-source-tag " + (getClassName$1(_this13.$props.innerClass, 'ai-source-tag') || ''),
+              "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
               "title": el[sourceDocumentLabel],
               "info": true,
               "onClick": function onClick() {
@@ -2224,16 +2097,16 @@ var SearchBox = vue.defineComponent({
                 return [el[sourceDocumentLabel]];
               }
             });
-          })) ? _slot7 : {
+          })) ? _slot6 : {
             "default": function _default() {
-              return [_slot7];
+              return [_slot6];
             }
           })];
         }
       }) : null;
     },
     renderAIScreen: function renderAIScreen() {
-      var _this14 = this;
+      var _this13 = this;
       var customAIRenderer = this.$props.renderAIAnswer || this.$slots.renderAIAnswer;
       if (customAIRenderer) {
         return customAIRenderer({
@@ -2257,11 +2130,11 @@ var SearchBox = vue.defineComponent({
         "hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
         "key": this.sessionIdFromStore,
         "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-          _this14.feedbackState = {
+          _this13.feedbackState = {
             isRecorded: true,
             feedbackType: useful ? 'positive' : 'negative'
           };
-          _this14.recordAISessionUsefulness(_this14.sessionIdFromStore, {
+          _this13.recordAISessionUsefulness(_this13.sessionIdFromStore, {
             useful: useful,
             reason: reason
           });
@@ -2296,22 +2169,22 @@ var SearchBox = vue.defineComponent({
       });
     },
     renderAskButtonElement: function renderAskButtonElement() {
-      var _this15 = this;
-      var _this$$props5 = this.$props,
-        AIUIConfig = _this$$props5.AIUIConfig,
-        innerClass = _this$$props5.innerClass;
+      var _this14 = this;
+      var _this$$props4 = this.$props,
+        AIUIConfig = _this$$props4.AIUIConfig,
+        innerClass = _this$$props4.innerClass;
       var _ref7 = AIUIConfig || {},
         askButton = _ref7.askButton;
       var renderAskButton = this.$slots.renderAskButton;
       if (askButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderAskButton) {
-            return renderAskButton(_this15.askButtonOnClick);
+            return renderAskButton(_this14.askButtonOnClick);
           }
           return vue.createVNode(Button.Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
             "info": true,
-            "onClick": _this15.askButtonOnClick
+            "onClick": _this14.askButtonOnClick
           }, {
             "default": function _default() {
               return [vue.createTextVNode("Ask")];
@@ -2326,7 +2199,7 @@ var SearchBox = vue.defineComponent({
     }
   },
   render: function render() {
-    var _this16 = this;
+    var _this15 = this;
     var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
     var _this$$slots = this.$slots,
       recentSearchesIcon = _this$$slots.recentSearchesIcon,
@@ -2337,17 +2210,17 @@ var SearchBox = vue.defineComponent({
       "class": this.$props.className
     }, {
       "default": function _default() {
-        return [_this16.$props.title && vue.createVNode(Title.Title, {
-          "class": getClassName$1(_this16.$props.innerClass, 'title') || ''
+        return [_this15.$props.title && vue.createVNode(Title.Title, {
+          "class": getClassName$1(_this15.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this16.$props.title];
+            return [_this15.$props.title];
           }
-        }), _this16.$props.autosuggest ? vue.createVNode(DropDown.Downshift, {
-          "id": _this16.$props.componentId + "-downshift",
-          "handleChange": _this16.onSuggestionSelected,
-          "handleMouseup": _this16.handleStateChange,
-          "isOpen": _this16.$data.isOpen
+        }), _this15.$props.autosuggest ? vue.createVNode(DropDown.Downshift, {
+          "id": _this15.$props.componentId + "-downshift",
+          "handleChange": _this15.onSuggestionSelected,
+          "handleMouseup": _this15.handleStateChange,
+          "isOpen": _this15.$data.isOpen
         }, {
           "default": function _default(_ref8) {
             var getInputEvents = _ref8.getInputEvents,
@@ -2358,229 +2231,156 @@ var SearchBox = vue.defineComponent({
               highlightedIndex = _ref8.highlightedIndex,
               setHighlightedIndex = _ref8.setHighlightedIndex;
             var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-              var getIcon = function getIcon(iconType, item, leaveSpaceForIcon) {
+              var getIcon = function getIcon(iconType) {
                 switch (iconType) {
                   case helper.suggestionTypes.Recent:
                     return recentSearchesIcon;
                   case helper.suggestionTypes.Popular:
                     return popularSearchesIcon;
-                  case helper.suggestionTypes.Featured:
-                    if (item.icon) {
-                      return function () {
-                        return vue.createVNode("div", {
-                          "style": {
-                            display: 'flex'
-                          },
-                          "innerHTML": xss(item.icon)
-                        }, null);
-                      };
-                    }
-                    if (item.iconURL) {
-                      return function () {
-                        return (// When you change below also change the empty icon below
-                          vue.createVNode("img", {
-                            "style": {
-                              maxHeight: '25px'
-                            },
-                            "src": xss(item.iconURL),
-                            "alt": item.value
-                          }, null)
-                        );
-                      };
-                    }
-                    // Render an empty icon when no icon is provided from the dashboard
-                    return function () {
-                      return vue.createVNode("span", {
-                        "style": {
-                          display: 'inline-block',
-                          height: '25px',
-                          width: leaveSpaceForIcon ? '25px' : 0
-                        }
-                      }, null);
-                    };
                   default:
                     return null;
                 }
               };
-              var indexOffset = 0;
-              return vue.createVNode("div", null, [_this16.hasCustomRenderer && _this16.getComponent({
+              return vue.createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
                 isOpen: isOpen,
                 getItemProps: getItemProps,
                 getItemEvents: getItemEvents,
                 highlightedIndex: highlightedIndex
-              }), _this16.renderErrorComponent(), !_this16.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
-                "class": Input.suggestions(_this16.themePreset, _this16.theme) + " " + getClassName$1(_this16.$props.innerClass, 'list') + " " + Input.searchboxSuggestions(_this16.themePreset, _this16.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
+              }), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
+                "class": Input.suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
                 "ref": _dropdownULRef
-              }, [_this16.showAIScreen && vue.createVNode(SearchBoxAISection, {
-                "themePreset": _this16.$props.themePreset
+              }, [_this15.showAIScreen && vue.createVNode(SearchBoxAISection, {
+                "themePreset": _this15.$props.themePreset
               }, {
                 "default": function _default() {
-                  return [_this16.renderAIScreen(), ' ', _this16.renderErrorComponent(true)];
-                }
-              }), !_this16.showAIScreen && _this16.parsedSuggestions.map(function (item, itemIndex) {
-                var index = indexOffset + itemIndex;
-                if (Array.isArray(item)) {
-                  var sectionHtml = xss(item[0].sectionLabel);
-                  indexOffset += item.length - 1;
-                  return vue.createVNode("div", {
-                    "class": "section-container"
-                  }, [sectionHtml ? vue.createVNode("div", {
-                    "class": "section-header " + getClassName$1(_this16.$props.innerClass, 'section-label'),
-                    "key": "" + item[0].sectionId,
-                    "innerHTML": sectionHtml
-                  }, null) : null, vue.createVNode("ul", {
-                    "class": "section-list"
-                  }, [item.map(function (sectionItem, sectionIndex) {
-                    var suggestionsHaveIcon = item.some(function (s) {
-                      return s.icon || s.iconURL;
-                    });
-                    return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
-                      item: sectionItem
-                    }), _transformOn(getItemEvents({
-                      item: sectionItem
-                    })), {
-                      "key": index + sectionIndex,
-                      "style": {
-                        justifyContent: 'flex-start',
-                        alignItems: 'center'
-                      },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
-                    }), [renderItem(sectionItem)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
-                      item: sectionItem
-                    }), _transformOn(getItemEvents({
-                      item: sectionItem
-                    })), {
-                      "key": index + sectionIndex,
-                      "style": {
-                        justifyContent: 'flex-start',
-                        alignItems: 'center'
-                      },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
-                    }), [vue.createVNode("div", {
-                      "style": {
-                        padding: '0 10px 0 0',
-                        display: 'flex'
-                      }
-                    }, [vue.createVNode(CustomSvg, {
-                      "className": getClassName$1(_this16.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
-                      "icon": getIcon(sectionItem._suggestion_type, sectionItem, suggestionsHaveIcon),
-                      "type": sectionItem._suggestion_type + "-search-icon"
-                    }, null)]), vue.createVNode(SuggestionItem, {
-                      "currentValue": _this16.currentValue,
-                      "suggestion": sectionItem
-                    }, null), _this16.renderActionIcon(sectionItem)]);
-                  })])]);
+                  return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
                 }
-                return vue.createVNode("div", null, [vue.createTextVNode("No suggestions")]);
-              }), _this16.$props.showSuggestionsFooter ? _this16.suggestionsFooter() : null]) : _this16.renderNoSuggestions(_this16.normalizedSuggestions)]);
+              }), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
+                return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
+                  item: item
+                }), getItemEvents({
+                  item: item
+                }), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [renderItem(item)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
+                  item: item
+                }), _transformOn(getItemEvents({
+                  item: item
+                })), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [vue.createVNode("div", {
+                  "style": {
+                    padding: '0 10px 0 0',
+                    display: 'flex'
+                  }
+                }, [vue.createVNode(CustomSvg, {
+                  "className": getClassName$1(_this15.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "icon": getIcon(item._suggestion_type),
+                  "type": item._suggestion_type + "-search-icon"
+                }, null)]), vue.createVNode(SuggestionItem, {
+                  "currentValue": _this15.currentValue,
+                  "suggestion": item
+                }, null), _this15.renderAutoFill(item)]);
+              })]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
             };
             return vue.createVNode("div", {
               "class": Input.suggestionsContainer
             }, [vue.createVNode(InputGroup, {
-              "searchBox": true,
               "ref": _inputGroupRef
             }, {
               "default": function _default() {
-                return [vue.createVNode(Input.Actions, null, {
-                  "default": function _default() {
-                    return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
-                  }
-                }), vue.createVNode(DropDown.InputWrapper, null, {
+                return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
                   "default": function _default() {
                     return [vue.createVNode(Input.TextArea, vue.mergeProps(_transformOn(getInputEvents({
-                      onInput: _this16.onInputChange,
+                      onInput: _this15.onInputChange,
                       onBlur: function onBlur(e) {
-                        _this16.$emit('blur', e, _this16.triggerQuery);
+                        _this15.$emit('blur', e, _this15.triggerQuery);
                       },
-                      onFocus: _this16.handleFocus,
+                      onFocus: _this15.handleFocus,
                       onKeyPress: function onKeyPress(e) {
-                        _this16.$emit('keyPress', e, _this16.triggerQuery);
-                        _this16.$emit('key-press', e, _this16.triggerQuery);
+                        _this15.$emit('keyPress', e, _this15.triggerQuery);
+                        _this15.$emit('key-press', e, _this15.triggerQuery);
                       },
                       onKeyDown: function onKeyDown(e) {
-                        return _this16.handleKeyDown(e, highlightedIndex);
+                        return _this15.handleKeyDown(e, highlightedIndex);
                       },
                       onKeyUp: function onKeyUp(e) {
-                        _this16.$emit('keyUp', e, _this16.triggerQuery);
-                        _this16.$emit('key-up', e, _this16.triggerQuery);
+                        _this15.$emit('keyUp', e, _this15.triggerQuery);
+                        _this15.$emit('key-up', e, _this15.triggerQuery);
                       },
                       onClick: function onClick() {
                         setHighlightedIndex(null);
                       }
                     })), {
-                      "id": _this16.$props.componentId + "-input",
-                      "showIcon": _this16.$props.showIcon,
-                      "showClear": _this16.$props.showClear,
-                      "iconPosition": _this16.$props.iconPosition,
-                      "ref": _this16.$props.innerRef,
-                      "class": getClassName$1(_this16.$props.innerClass, 'input'),
-                      "placeholder": _this16.$props.placeholder,
-                      "autoFocus": _this16.$props.autoFocus,
-                      "searchBox": true,
-                      "showFocusShortcutsIcon": _this16.$props.showFocusShortcutsIcon,
-                      "showVoiceSearch": _this16.$props.showVoiceSearch
+                      "id": _this15.$props.componentId + "-input",
+                      "showIcon": _this15.$props.showIcon,
+                      "showClear": _this15.$props.showClear,
+                      "iconPosition": _this15.$props.iconPosition,
+                      "ref": _this15.$props.innerRef,
+                      "class": getClassName$1(_this15.$props.innerClass, 'input'),
+                      "placeholder": _this15.$props.placeholder,
+                      "autoFocus": _this15.$props.autoFocus,
+                      "showFocusShortcutsIcon": _this15.$props.showFocusShortcutsIcon,
+                      "showVoiceSearch": _this15.$props.showVoiceSearch
                     }, getInputProps({
-                      value: _this16.$data.currentValue === null ? '' : _this16.$data.currentValue
+                      value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
                     }), {
-                      "themePreset": _this16.themePreset,
+                      "themePreset": _this15.themePreset,
                       "autocomplete": "off"
-                    }), null), !expandSuggestionsContainer && renderSuggestionsDropdown()];
-                  }
-                }), vue.createVNode(Input.Actions, null, {
-                  "default": function _default() {
-                    return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderAskButtonElement(), _this16.renderEnterButtonElement()];
+                    }), null), _this15.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
                   }
-                })];
+                }), _this15.renderInputAddonAfter(), _this15.renderAskButtonElement(), _this15.renderEnterButtonElement()];
               }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this16.renderTags()]);
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this15.renderTags()]);
           }
         }) : vue.createVNode("div", {
           "class": Input.suggestionsContainer
         }, [vue.createVNode(InputGroup, {
-          "searchBox": true,
           "ref": _inputGroupRef
         }, {
           "default": function _default() {
-            return [vue.createVNode(Input.Actions, null, {
-              "default": function _default() {
-                return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
-              }
-            }), vue.createVNode(DropDown.InputWrapper, null, {
+            return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
               "default": function _default() {
                 return [vue.createVNode(Input.TextArea, vue.mergeProps(_transformOn({
                   blur: function blur(e) {
-                    _this16.$emit('blur', e, _this16.triggerQuery);
+                    _this15.$emit('blur', e, _this15.triggerQuery);
                   },
                   keypress: function keypress(e) {
-                    _this16.$emit('keyPress', e, _this16.triggerQuery);
-                    _this16.$emit('key-press', e, _this16.triggerQuery);
+                    _this15.$emit('keyPress', e, _this15.triggerQuery);
+                    _this15.$emit('key-press', e, _this15.triggerQuery);
                   },
-                  input: _this16.onInputChange,
+                  input: _this15.onInputChange,
                   focus: function focus(e) {
-                    _this16.$emit('focus', e, _this16.triggerQuery);
+                    _this15.$emit('focus', e, _this15.triggerQuery);
                   },
-                  keydown: _this16.handleKeyDown,
+                  keydown: _this15.handleKeyDown,
                   keyup: function keyup(e) {
-                    _this16.$emit('keyUp', e, _this16.triggerQuery);
-                    _this16.$emit('key-up', e, _this16.triggerQuery);
+                    _this15.$emit('keyUp', e, _this15.triggerQuery);
+                    _this15.$emit('key-up', e, _this15.triggerQuery);
                   }
                 }), {
-                  "class": getClassName$1(_this16.$props.innerClass, 'input') || '',
-                  "placeholder": _this16.$props.placeholder,
-                  "autofocus": _this16.$props.autoFocus,
-                  "value": _this16.$data.currentValue ? _this16.$data.currentValue : '',
-                  "iconPosition": _this16.$props.iconPosition,
-                  "showIcon": _this16.$props.showIcon,
-                  "showClear": _this16.$props.showClear,
-                  "ref": _this16.$props.innerRef,
-                  "themePreset": _this16.themePreset
-                }), null)];
+                  "class": getClassName$1(_this15.$props.innerClass, 'input') || '',
+                  "placeholder": _this15.$props.placeholder,
+                  "autofocus": _this15.$props.autoFocus,
+                  "value": _this15.$data.currentValue ? _this15.$data.currentValue : '',
+                  "iconPosition": _this15.$props.iconPosition,
+                  "showIcon": _this15.$props.showIcon,
+                  "showClear": _this15.$props.showClear,
+                  "ref": _this15.$props.innerRef,
+                  "themePreset": _this15.themePreset
+                }), null), _this15.renderIcons()];
               }
-            }), vue.createVNode(Input.Actions, null, {
-              "default": function _default() {
-                return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderEnterButtonElement()];
-              }
-            })];
+            }), _this15.renderInputAddonAfter(), _this15.renderEnterButtonElement()];
           }
         })])];
       }
@@ -3265,8 +3065,8 @@ AIConnected.install = function (Vue) {
 // Add componentType for SSR
 AIConnected.componentType = constants.componentTypes.AIAnswer;
 
-var _templateObject$9, _templateObject2$4;
-var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$9 || (_templateObject$9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+var _templateObject$8, _templateObject2$4;
+var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
 var HierarchicalMenuListItem = vueEmotion.styled('li')(_templateObject2$4 || (_templateObject2$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
   return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
 });