@appbaseio/reactivesearch-vue 3.0.0-rc.6.4 → 3.0.0-rc.6.6

package/dist/es/{install-cb6c5753.js → install-af4c53c4.js}

@@ -4,7 +4,7 @@ import _transformOn from '@vue/babel-helper-vue-transform-on';
 import { _ as _taggedTemplateLiteralLoose, a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ded08042.js';
 import { createVNode, createTextVNode, defineComponent, ref, watch, isVNode, mergeProps, h } from 'vue';
 import VueTypes from 'vue-types';
-import { getQueryOptions, getObjectFromLocalStorage, suggestionTypes, getClassName as getClassName$2, setObjectInLocalStorage, recLookup, updateCustomQuery as updateCustomQuery$1, updateDefaultQuery as updateDefaultQuery$1, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual as isEqual$1, transformRawTreeListData, setDeep, getComponent as getComponent$1, getOptionsFromQuery, checkValueChange as checkValueChange$1, getAggsQuery, updateInternalQuery, isFunction as isFunction$1 } from '@appbaseio/reactivecore/lib/utils/helper';
+import { getQueryOptions, featuredSuggestionsActionTypes, suggestionTypes, getObjectFromLocalStorage, getClassName as getClassName$2, setObjectInLocalStorage, recLookup, updateCustomQuery as updateCustomQuery$1, updateDefaultQuery as updateDefaultQuery$1, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual as isEqual$1, transformRawTreeListData, setDeep, getComponent as getComponent$1, getOptionsFromQuery, checkValueChange as checkValueChange$1, getAggsQuery, updateInternalQuery, isFunction as isFunction$1 } from '@appbaseio/reactivecore/lib/utils/helper';
 import { styled } from '@appbaseio/vue-emotion';
 import { css, keyframes } from '@emotion/css';
 import { lighten } from 'polished';
@@ -21,12 +21,13 @@ import { F as Flex } from './Flex-25792bc3.js';
 import { recordAISessionUsefulness } from '@appbaseio/reactivecore/lib/actions/analytics';
 import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
+import xss from 'xss';
 import { Remarkable } from 'remarkable';
-import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './DropDown-39fedff8.js';
-import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, a as suggestions } from './Input-11d211d2.js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, B as ButtonIconWrapper, D as Downshift, b as InputWrapper } from './DropDown-bede2a41.js';
+import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, a as suggestions, b as searchboxSuggestions } from './Input-4376ac1f.js';
 import { C as Container } from './Container-d00219f7.js';
 import Highlight from 'vue-highlight-words';
-import { fetchAIResponse } from '@appbaseio/reactivecore/lib/actions/query';
+import { fetchAIResponse, createAISession } from '@appbaseio/reactivecore/lib/actions/query';
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 import { C as Checkbox, R as Radio } from './FormControlList-fe6eaee4.js';
 import { s as sanitizeObject } from './utils-d7dd4f4e.js';
@@ -48,7 +49,9 @@ import ResultList from './ResultList.js';
 import StateProvider from './StateProvider.js';
 
 var _templateObject;
-var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
+var InputGroup = styled('div')(_templateObject || (_templateObject = _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};\n"])), function (props) {
+  return props.isOpen && 'box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;';
+});
 InputGroup.defaultProps = {
   className: 'input-group'
 };
@@ -1066,6 +1069,9 @@ var AIFeedback = defineComponent({
   }
 });
 
+var _templateObject$8;
+var AutosuggestFooterContainer = styled('div')(_templateObject$8 || (_templateObject$8 = _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 _excluded = ["_source"];
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
@@ -1102,7 +1108,8 @@ var SearchBox = defineComponent({
       showAIScreen: false,
       showAIScreenFooter: false,
       showFeedbackComponent: false,
-      feedbackState: null
+      feedbackState: null,
+      prefilledAIAnswer: ''
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -1143,6 +1150,37 @@ var SearchBox = defineComponent({
     },
     stats: function stats() {
       return getResultStats(this);
+    },
+    mergedAIAnswer: function mergedAIAnswer() {
+      return this.prefilledAIAnswer || this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text;
+    },
+    parsedSuggestions: function parsedSuggestions() {
+      var suggestionsArray = [];
+      if (Array.isArray(this.suggestions) && this.suggestions.length) {
+        suggestionsArray = [].concat(withClickIds(this.suggestions));
+      }
+      suggestionsArray = suggestionsArray.map(function (s) {
+        if (s.sectionId) {
+          return s;
+        }
+        return _extends({}, s, {
+          sectionId: s._suggestion_type
+        });
+      });
+      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: {
@@ -1174,6 +1212,11 @@ var SearchBox = defineComponent({
     enableQuerySuggestions: VueTypes.bool.def(false),
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSuggestions: VueTypes.bool.def(false),
+    enableFAQSuggestions: VueTypes.bool.def(false),
+    FAQSuggestionsConfig: VueTypes.shape({
+      sectionLabel: VueTypes.string,
+      size: VueTypes.number
+    }),
     fieldWeights: types.fieldWeights,
     filterLabel: types.string,
     fuzziness: types.fuzziness,
@@ -1209,12 +1252,20 @@ var SearchBox = defineComponent({
     distinctFieldConfig: 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: types.stringArray,
     onData: types.func,
@@ -1402,7 +1453,7 @@ var SearchBox = defineComponent({
         resultStats: this.stats,
         AIData: {
           question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          answer: this.mergedAIAnswerc,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           showAIScreen: this.showAIScreen,
           sources: this.getAISourceObjects(),
@@ -1433,7 +1484,7 @@ var SearchBox = defineComponent({
         this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
       }
     },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue, shouldExecuteQuery) {
       var _this2 = this;
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
@@ -1447,6 +1498,9 @@ var SearchBox = defineComponent({
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
+      if (shouldExecuteQuery === void 0) {
+        shouldExecuteQuery = true;
+      }
       var performUpdate = function performUpdate() {
         if (_this2.$options.isTagsMode && isEqual(value, _this2.selectedTags)) {
           return;
@@ -1482,17 +1536,18 @@ var SearchBox = defineComponent({
             }
             if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
               enableAI: true
-            } : {});
+            } : {}, shouldExecuteQuery);
           } // 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 || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
-              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
             } else {
               _this2.setValue('', true);
             }
           } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
-            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+            _this2.showAIScreen = false;
+            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
           }
         } else {
           // debounce for handling text while typing
@@ -1503,10 +1558,13 @@ var SearchBox = defineComponent({
       };
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
-    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta, shouldExecuteQuery) {
       if (meta === void 0) {
         meta = {};
       }
+      if (shouldExecuteQuery === void 0) {
+        shouldExecuteQuery = true;
+      }
       if (!this.$props.autosuggest) {
         return;
       }
@@ -1527,12 +1585,15 @@ var SearchBox = defineComponent({
         value: value,
         componentType: componentTypes.searchBox,
         meta: meta
-      });
+      }, shouldExecuteQuery);
     },
-    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue, shouldExecuteQuery) {
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
+      if (shouldExecuteQuery === void 0) {
+        shouldExecuteQuery = true;
+      }
       var _this$$props = this.$props,
         customQuery = _this$$props.customQuery,
         filterLabel = _this$$props.filterLabel,
@@ -1561,7 +1622,7 @@ var SearchBox = defineComponent({
         URLParams: URLParams,
         componentType: componentTypes.searchBox,
         category: categoryValue
-      });
+      }, shouldExecuteQuery);
     },
     handleFocus: function handleFocus(event) {
       if (this.$props.autosuggest) {
@@ -1660,12 +1721,60 @@ var SearchBox = defineComponent({
         }, e);
       }
     },
+    handleFeaturedSuggestionClicked: function handleFeaturedSuggestionClicked(suggestion) {
+      try {
+        var _this$$refs2, _this$$refs2$this$$pr;
+        if (suggestion.action === 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 === 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 === featuredSuggestionsActionTypes.SELECT) {
+          this.setValue(suggestion.value, true, this.$props, this.$options.isTagsMode.current ? causes.SUGGESTION_SELECT : causes.ENTER_PRESS);
+          this.onValueSelectedHandler(suggestion.value, 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;
+      // handle when FAQ suggestion is clicked
+      if (suggestion && suggestion._suggestion_type === suggestionTypes.FAQ) {
+        this.prefilledAIAnswer = suggestion._answer;
+        this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, true, false, suggestion._category, false);
+        this.isOpen = true;
+        this.showAIScreen = true;
+        return;
+      }
       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 === suggestionTypes.Featured) {
+        this.handleFeaturedSuggestionClicked(suggestion);
+        return;
+      }
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
@@ -1821,6 +1930,13 @@ var SearchBox = defineComponent({
         customQuery: true
       });
     },
+    suggestionsFooter: function suggestionsFooter() {
+      return typeof renderSuggestionsFooter === 'function' ? this.$props.renderSuggestionsFooter() : createVNode(AutosuggestFooterContainer, null, {
+        "default": function _default() {
+          return [createVNode("div", null, [createTextVNode("\u2191\u2193 Navigate")]), createVNode("div", null, [createTextVNode("\u21A9 Go")])];
+        }
+      });
+    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this6 = this;
       var _this$$props2 = this.$props,
@@ -1848,16 +1964,29 @@ var SearchBox = 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 '/';
+    },
     renderIcons: function renderIcons() {
       var _this7 = this;
-      var _slot3, _slot4, _slot5;
+      var _slot3, _slot4, _slot5, _slot6;
       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;
+        showIcon = _this$$props3.showIcon,
+        showFocusShortcutsIcon = _this$$props3.showFocusShortcutsIcon;
       var renderMic = this.$slots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return createVNode("div", null, [createVNode(IconGroup, {
@@ -1873,6 +2002,14 @@ var SearchBox = defineComponent({
             "default": function _default() {
               return [_slot3];
             }
+          }), showFocusShortcutsIcon && createVNode(ButtonIconWrapper, {
+            "onClick": function onClick(e) {
+              return _this7.focusSearchBox(e);
+            }
+          }, _isSlot(_slot4 = _this7.renderShortcut()) ? _slot4 : {
+            "default": function _default() {
+              return [_slot4];
+            }
           }), showVoiceSearch && createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
@@ -1880,9 +2017,9 @@ var SearchBox = defineComponent({
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
             "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
+          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
             "default": function _default() {
-              return [_slot4];
+              return [_slot5];
             }
           })];
         }
@@ -1893,23 +2030,23 @@ var SearchBox = defineComponent({
         "default": function _default() {
           return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
             "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
+          }, _isSlot(_slot6 = _this7.renderIcon()) ? _slot6 : {
             "default": function _default() {
-              return [_slot5];
+              return [_slot6];
             }
           })];
         }
       })]);
     },
     focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs2, _this$$refs2$this$$pr;
+      var _this$$refs3, _this$$refs3$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$$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
+      (_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
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
       var _this8 = this;
@@ -1949,16 +2086,31 @@ var SearchBox = defineComponent({
       this.currentValue = decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
-    renderAutoFill: function renderAutoFill(suggestion) {
+    renderActionIcon: function renderActionIcon(suggestion) {
       var _this9 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
         _this9.onAutofillClick(suggestion);
       };
-      /* 👇 avoid showing autofill for category suggestions👇 */
-      return suggestion._category ? null : createVNode(AutoFillSvg, {
-        "onClick": handleAutoFillClick
-      }, null);
+      if (suggestion._suggestion_type === suggestionTypes.Featured) {
+        if (suggestion.action === featuredSuggestionsActionTypes.FUNCTION) {
+          return createVNode(AutoFillSvg, {
+            "style": {
+              transform: 'rotate(135deg)',
+              pointerEvents: 'none'
+            }
+          }, null);
+        }
+        return null;
+      }
+      if (!suggestion._category) {
+        /* 👇 avoid showing autofill for category suggestions👇 */
+
+        return createVNode(AutoFillSvg, {
+          "onClick": handleAutoFillClick
+        }, null);
+      }
+      return null;
     },
     renderTag: function renderTag(item) {
       var _this10 = this;
@@ -2065,7 +2217,7 @@ var SearchBox = defineComponent({
       return createVNode(HorizontalSkeletonLoader, null, null);
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
-      var _slot6;
+      var _slot7;
       var _this12 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
@@ -2080,7 +2232,7 @@ var SearchBox = defineComponent({
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
+          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot7 = _this12.getAISourceObjects().map(function (el) {
             return createVNode(Button, {
               "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
               "title": el[sourceDocumentLabel],
@@ -2093,9 +2245,9 @@ var SearchBox = defineComponent({
                 return [el[sourceDocumentLabel]];
               }
             });
-          })) ? _slot6 : {
+          })) ? _slot7 : {
             "default": function _default() {
-              return [_slot6];
+              return [_slot7];
             }
           })];
         }
@@ -2107,7 +2259,7 @@ var SearchBox = defineComponent({
       if (customAIRenderer) {
         return customAIRenderer({
           question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          answer: this.mergedAIAnswer,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           loading: this.isAIResponseLoading || this.isLoading,
           sources: this.getAISourceObjects(),
@@ -2118,7 +2270,7 @@ var SearchBox = defineComponent({
         return this.renderAIScreenLoader();
       }
       return createVNode("div", null, [createVNode(Answer, {
-        "innerHTML": md.render(this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text)
+        "innerHTML": md.render(this.mergedAIAnswer)
       }, null), this.renderAIScreenFooter(), this.showFeedbackComponent && createVNode("div", {
         "class": "" + (getClassName$1(this.$props.innerClass, 'ai-feedback') || '')
       }, [createVNode(AIFeedback, {
@@ -2227,23 +2379,58 @@ var SearchBox = defineComponent({
               highlightedIndex = _ref8.highlightedIndex,
               setHighlightedIndex = _ref8.setHighlightedIndex;
             var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-              var getIcon = function getIcon(iconType) {
+              var getIcon = function getIcon(iconType, item, leaveSpaceForIcon) {
                 switch (iconType) {
                   case suggestionTypes.Recent:
                     return recentSearchesIcon;
                   case suggestionTypes.Popular:
                     return popularSearchesIcon;
+                  case suggestionTypes.Featured:
+                    if (item.icon) {
+                      return function () {
+                        return 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
+                          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 createVNode("span", {
+                        "style": {
+                          display: 'inline-block',
+                          height: '25px',
+                          width: leaveSpaceForIcon ? '25px' : 0
+                        }
+                      }, null);
+                    };
                   default:
                     return null;
                 }
               };
+              var indexOffset = 0;
               return createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
                 isOpen: isOpen,
                 getItemProps: getItemProps,
                 getItemEvents: getItemEvents,
                 highlightedIndex: highlightedIndex
               }), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
-                "class": suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
+                "class": suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list') + " " + searchboxSuggestions(_this15.themePreset, _this15.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
                 "ref": _dropdownULRef
               }, [_this15.showAIScreen && createVNode(SearchBoxAISection, {
                 "themePreset": _this15.$props.themePreset
@@ -2251,43 +2438,63 @@ var SearchBox = defineComponent({
                 "default": function _default() {
                   return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
                 }
-              }), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
-                return renderItem ? createVNode("li", 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)]) : createVNode("li", mergeProps(getItemProps({
-                  item: item
-                }), _transformOn(getItemEvents({
-                  item: item
-                })), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [createVNode("div", {
-                  "style": {
-                    padding: '0 10px 0 0',
-                    display: 'flex'
-                  }
-                }, [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)]), createVNode(SuggestionItem, {
-                  "currentValue": _this15.currentValue,
-                  "suggestion": item
-                }, null), _this15.renderAutoFill(item)]);
-              })]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
+              }), !_this15.showAIScreen && _this15.parsedSuggestions.map(function (item, itemIndex) {
+                var index = indexOffset + itemIndex;
+                if (Array.isArray(item)) {
+                  var sectionHtml = xss(item[0].sectionLabel);
+                  indexOffset += item.length - 1;
+                  return createVNode("div", {
+                    "class": "section-container"
+                  }, [sectionHtml ? createVNode("div", {
+                    "class": "section-header " + getClassName$1(_this15.$props.innerClass, 'section-label'),
+                    "key": "" + item[0].sectionId,
+                    "innerHTML": sectionHtml
+                  }, null) : null, createVNode("ul", {
+                    "class": "section-list"
+                  }, [item.map(function (sectionItem, sectionIndex) {
+                    var suggestionsHaveIcon = item.some(function (s) {
+                      return s.icon || s.iconURL;
+                    });
+                    return renderItem ? createVNode("li", 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(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
+                    }), [renderItem(sectionItem)]) : createVNode("li", 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(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
+                    }), [createVNode("div", {
+                      "style": {
+                        padding: '0 10px 0 0',
+                        display: 'flex'
+                      }
+                    }, [createVNode(CustomSvg, {
+                      "key": sectionItem._suggestion_type + "-" + sectionIndex,
+                      "className": getClassName$1(_this15.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
+                      "icon": getIcon(sectionItem._suggestion_type, sectionItem, suggestionsHaveIcon),
+                      "type": sectionItem._suggestion_type + "-search-icon"
+                    }, null)]), createVNode(SuggestionItem, {
+                      "currentValue": _this15.currentValue,
+                      "suggestion": sectionItem
+                    }, null), _this15.renderActionIcon(sectionItem)]);
+                  })])]);
+                }
+                return createVNode("div", null, [createTextVNode("No suggestions")]);
+              }), _this15.$props.showSuggestionsFooter ? _this15.suggestionsFooter() : null]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
             };
             return createVNode("div", {
               "class": suggestionsContainer
@@ -2327,7 +2534,8 @@ var SearchBox = defineComponent({
                       "placeholder": _this15.$props.placeholder,
                       "autoFocus": _this15.$props.autoFocus,
                       "showFocusShortcutsIcon": _this15.$props.showFocusShortcutsIcon,
-                      "showVoiceSearch": _this15.$props.showVoiceSearch
+                      "showVoiceSearch": _this15.$props.showVoiceSearch,
+                      "searchBox": true
                     }, getInputProps({
                       value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
                     }), {
@@ -2542,6 +2750,7 @@ var AIAnswer = defineComponent({
     isLoading: types.boolRequired,
     sessionIdFromStore: VueTypes.string,
     showComponent: types.boolRequired,
+    componentError: types.componentObject,
     style: types.style
   },
   mounted: function mounted() {},
@@ -2625,14 +2834,50 @@ var AIAnswer = defineComponent({
     },
     messages: function messages() {
       this.scrollToBottom();
+    },
+    componentError: function componentError(newVal) {
+      var _this = this;
+      if (newVal && newVal._bodyBlob) {
+        this.AISessionId = ((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+        if (!this.AISessionId) {
+          this.generateNewSessionId();
+        }
+        newVal._bodyBlob.text().then(function (textData) {
+          try {
+            var parsedErrorRes = JSON.parse(textData);
+            if (parsedErrorRes.error) {
+              _this.error = parsedErrorRes.error;
+              _this.$emit('on-data', {
+                data: _this.messages,
+                rawData: _this.$props.rawData,
+                loading: _this.$props.isAIResponseLoading || _this.$props.isLoading,
+                error: parsedErrorRes.error
+              });
+            }
+          } catch (error) {
+            console.error('Error parsing component error JSON:', error);
+          }
+        })["catch"](function (error) {
+          console.error('Error reading  component error text data:', error);
+        });
+      }
     }
   },
   methods: {
+    generateNewSessionId: function generateNewSessionId() {
+      var _this2 = this;
+      var newSessionPromise = this.createAISession();
+      newSessionPromise.then(function (res) {
+        _this2.AISessionId = res.AIsessionId;
+      })["catch"](function (e) {
+        console.error(e);
+      });
+    },
     scrollToBottom: function scrollToBottom() {
-      var _this = this;
+      var _this3 = this;
       this.$nextTick(function () {
-        var _this$$refs;
-        var messageContainer = (_this$$refs = _this.$refs) == null ? void 0 : _this$$refs[_this.$props.innerRef];
+        var _this3$$refs;
+        var messageContainer = (_this3$$refs = _this3.$refs) == null ? void 0 : _this3$$refs[_this3.$props.innerRef];
         if (messageContainer && messageContainer.$el) {
           messageContainer.$el.scrollTo({
             top: messageContainer.$el.scrollHeight,
@@ -2699,7 +2944,7 @@ var AIAnswer = defineComponent({
           "class": "--ai-answer-error-container " + (getClassName$2(this.$props.innerClass, 'ai-error') || '')
         }, [createVNode("div", {
           "class": "--default-error-element"
-        }, [createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? "Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && createVNode(Button, {
+        }, [createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? ", Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && createVNode(Button, {
           "primary": true,
           "onClick": this.handleRetryRequest
         }, {
@@ -2750,7 +2995,7 @@ var AIAnswer = defineComponent({
       }
     },
     renderIcons: function renderIcons() {
-      var _this2 = this;
+      var _this4 = this;
       var _slot, _slot2;
       var _this$$props = this.$props,
         getMicInstance = _this$$props.getMicInstance,
@@ -2764,12 +3009,12 @@ var AIAnswer = defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [!_this2.isLoadingState && _this2.AISessionId && _this2.shouldMicRender(showVoiceInput) && createVNode(Mic, {
+          return [!_this4.isLoadingState && _this4.AISessionId && _this4.shouldMicRender(showVoiceInput) && createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this2.handleVoiceResults,
+            "handleResult": _this4.handleVoiceResults,
             "class": getClassName$2(innerClass, 'ai-search-mic') || null
-          }, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot$1(_slot = _this2.renderIcon()) ? _slot : {
+          }, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot$1(_slot = _this4.renderIcon()) ? _slot : {
             "default": function _default() {
               return [_slot];
             }
@@ -2781,7 +3026,7 @@ var AIAnswer = defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot$1(_slot2 = _this2.renderIcon()) ? _slot2 : {
+          return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot$1(_slot2 = _this4.renderIcon()) ? _slot2 : {
             "default": function _default() {
               return [_slot2];
             }
@@ -2793,7 +3038,7 @@ var AIAnswer = defineComponent({
       this.handleSendMessage(e);
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this3 = this;
+      var _this5 = this;
       var _this$$props2 = this.$props,
         enterButton = _this$$props2.enterButton,
         innerClass = _this$$props2.innerClass;
@@ -2801,16 +3046,16 @@ var AIAnswer = defineComponent({
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this3.enterButtonOnClick);
+            return renderEnterButton(_this5.enterButtonOnClick);
           }
           return createVNode(SendButton, {
             "primary": true,
             "type": "submit",
             "tabIndex": 0,
-            "onClick": _this3.handleSendMessage,
-            "onKeyPress": _this3.handleKeyPress,
+            "onClick": _this5.handleSendMessage,
+            "onKeyPress": _this5.handleKeyPress,
             "class": "ask-btn " + getClassName$2(innerClass, 'ai-enter-button'),
-            "disabled": _this3.isLoadingState || !_this3.AISessionId
+            "disabled": _this5.isLoadingState || !_this5.AISessionId
           }, {
             "default": function _default() {
               return [createTextVNode("Send")];
@@ -2833,10 +3078,10 @@ var AIAnswer = defineComponent({
       return getComponent(data, this);
     },
     handleTextAreaHeightChange: function handleTextAreaHeightChange() {
-      var _this$$refs2, _this$$refs2$_inputRe, _this$$refs3, _this$$refs3$_inputWr, _this$$refs4;
-      var textArea = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputRe = _this$$refs2[_inputRef]) == null ? void 0 : _this$$refs2$_inputRe.$el;
-      var inputWrapper = (_this$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$_inputWr = _this$$refs3[_inputWrapperRef]) == null ? void 0 : _this$$refs3$_inputWr.$el;
-      var errorContainer = (_this$$refs4 = this.$refs) == null ? void 0 : _this$$refs4[_errorContainerRef];
+      var _this$$refs, _this$$refs$_inputRef, _this$$refs2, _this$$refs2$_inputWr, _this$$refs3;
+      var textArea = (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$_inputRef = _this$$refs[_inputRef]) == null ? void 0 : _this$$refs$_inputRef.$el;
+      var inputWrapper = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputWr = _this$$refs2[_inputWrapperRef]) == null ? void 0 : _this$$refs2$_inputWr.$el;
+      var errorContainer = (_this$$refs3 = this.$refs) == null ? void 0 : _this$$refs3[_errorContainerRef];
       if (textArea) {
         textArea.style.height = '42px';
         var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
@@ -2868,21 +3113,20 @@ var AIAnswer = defineComponent({
   },
   render: function render() {
     var _slot3;
-    var _this4 = this;
+    var _this6 = this;
     var props = this.$props;
     if (!this.shouldShowComponent) {
       return null;
     }
     return createVNode(Chatbox, {
-      "style": props.style,
-      "class": "--ai-chat-box-wrapper"
+      "style": props.style || {}
     }, {
       "default": function _default() {
-        return [_this4.$props.title && createVNode(Title, {
-          "class": getClassName$2(_this4.$props.innerClass, 'title') || ''
+        return [_this6.$props.title && createVNode(Title, {
+          "class": getClassName$2(_this6.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this4.$props.title];
+            return [_this6.$props.title];
           }
         }), createVNode(ChatContainer, {
           "class": "--ai-chat-container",
@@ -2890,33 +3134,33 @@ var AIAnswer = defineComponent({
           "showInput": props.showInput
         }, {
           "default": function _default() {
-            return [_this4.hasCustomRenderer && createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            return [_this6.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
-            }, _isSlot$1(_slot3 = _this4.getComponent()) ? _slot3 : {
+            }, _isSlot$1(_slot3 = _this6.getComponent()) ? _slot3 : {
               "default": function _default() {
                 return [_slot3];
               }
-            }), !_this4.hasCustomRenderer && createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            }), !_this6.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
             }, {
               "default": function _default() {
-                return [_this4.messages.map(function (message, index) {
+                return [_this6.messages.map(function (message, index) {
                   return createVNode(Message, {
                     "key": index,
                     "isSender": message.role === AI_ROLES.USER,
                     "innerHTML": md$1.render(message.content),
-                    "themePreset": _this4.themePreset,
+                    "themePreset": _this6.themePreset,
                     "theme": props.theme,
                     "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || '')
                   }, null);
-                }), _this4.isLoadingState && createVNode(Message, {
-                  "themePreset": _this4.themePreset,
+                }), _this6.isLoadingState && createVNode(Message, {
+                  "themePreset": _this6.themePreset,
                   "theme": props.theme,
                   "isSender": false,
                   "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || null)
@@ -2925,31 +3169,31 @@ var AIAnswer = defineComponent({
                     return [createVNode(TypingIndicator, null, {
                       "default": function _default() {
                         return [createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null)];
                       }
                     })];
                   }
                 })];
               }
-            }), _this4.renderErrorComponent(), ' ', props.showFeedback && createVNode("div", {
+            }), _this6.renderErrorComponent(), ' ', props.showFeedback && createVNode("div", {
               "class": "--ai-answer-feedback-container " + (getClassName$2(props.innerClass, 'ai-feedback') || '')
             }, [createVNode(AIFeedback, {
-              "hideUI": _this4.isLoadingState || !_this4.sessionId,
-              "key": _this4.sessionId,
+              "hideUI": _this6.isLoadingState || !_this6.sessionId,
+              "key": _this6.sessionId,
               "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-                _this4.trackUsefullness(_this4.sessionId, {
+                _this6.trackUsefullness(_this6.sessionId, {
                   useful: useful,
                   reason: reason
                 });
               }
             }, null)]), props.showInput && createVNode(MessageInputContainer, {
               "class": "--ai-input-container",
-              "onSubmit": _this4.handleSendMessage
+              "onSubmit": _this6.handleSendMessage
             }, {
               "default": function _default() {
                 return [createVNode(InputGroup, {
@@ -2965,19 +3209,19 @@ var AIAnswer = defineComponent({
                           "ref": _inputRef,
                           "placeholder": props.placeholder,
                           "enterButton": props.enterButton,
-                          "value": _this4.inputMessage,
-                          "onInput": _this4.handleMessageInputChange,
+                          "value": _this6.inputMessage,
+                          "onInput": _this6.handleMessageInputChange,
                           "id": props.componentId + "-ai-input",
                           "showIcon": props.showIcon,
                           "iconPosition": props.iconPosition,
-                          "themePreset": _this4.themePreset,
-                          "disabled": _this4.isLoadingState || !_this4.AISessionId,
+                          "themePreset": _this6.themePreset,
+                          "disabled": _this6.isLoadingState || !_this6.AISessionId,
                           "class": getClassName$2(props.innerClass, 'ai-input') || null
-                        }, null), ' ', _this4.renderIcons()];
+                        }, null), ' ', _this6.renderIcons()];
                       }
                     })];
                   }
-                }), _this4.renderEnterButtonElement()];
+                }), _this6.renderEnterButtonElement()];
               }
             }), ' '];
           }
@@ -3004,12 +3248,14 @@ var mapStateToProps$1 = function mapStateToProps(state, props) {
     rawData: state.rawData[props.componentId],
     themePreset: state.config.themePreset,
     isLoading: state.isLoading[props.componentId] || false,
-    sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || ''
+    sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || '',
+    componentError: state.error[props.componentId]
   };
 };
 var mapDispatchToProps$1 = {
   getAIResponse: fetchAIResponse,
-  trackUsefullness: recordAISessionUsefulness
+  trackUsefullness: recordAISessionUsefulness,
+  createAISession: createAISession
 };
 var AIConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps$1, mapDispatchToProps$1)(AIAnswer), {
   componentType: componentTypes.AIAnswer,
@@ -3023,8 +3269,8 @@ AIConnected.install = function (Vue) {
 // Add componentType for SSR
 AIConnected.componentType = componentTypes.AIAnswer;
 
-var _templateObject$8, _templateObject2$4;
-var HierarchicalMenuList = styled('ul')(_templateObject$8 || (_templateObject$8 = _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$9, _templateObject2$4;
+var HierarchicalMenuList = styled('ul')(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
 var HierarchicalMenuListItem = styled('li')(_templateObject2$4 || (_templateObject2$4 = _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";
 });