react-instantsearch 7.19.0 → 7.20.1

package/dist/umd/ReactInstantSearch.js

@@ -7,7 +7,7 @@
 
   var React__default = 'default' in React ? React['default'] : React;
 
-  var version = '7.19.0';
+  var version = '7.20.1';
 
   // Copyright Joyent, Inc. and other Node contributors.
   //
@@ -8068,6 +8068,11 @@
     return insideBoundingBoxStringToBoundingBox(value);
   }
 
+  function getAlgoliaAgent(client) {
+    var clientTyped = client;
+    return clientTyped.transporter && clientTyped.transporter.userAgent ? clientTyped.transporter.userAgent.value : clientTyped._ua;
+  }
+
   // typed as any, since it accepts the _real_ js clients, not the interface we otherwise expect
   function getAppIdAndApiKey(searchClient) {
     if (searchClient.appId && searchClient.apiKey) {
@@ -10516,6 +10521,12 @@
           helper: helper
         })));
       },
+      scheduleLocalSearch: defer(function () {
+        if (isolated) {
+          var _helper2;
+          (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+        }
+      }),
       getWidgets: function getWidgets() {
         return localWidgets;
       },
@@ -10581,8 +10592,7 @@
             }
           });
           if (isolated) {
-            var _helper2;
-            (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+            this.scheduleLocalSearch();
           } else {
             localInstantSearchInstance.scheduleSearch();
           }
@@ -10661,8 +10671,7 @@
           helper.recommendState = cleanedRecommendState;
           if (localWidgets.length) {
             if (isolated) {
-              var _helper3;
-              (_helper3 = helper) === null || _helper3 === void 0 ? void 0 : _helper3.search();
+              this.scheduleLocalSearch();
             } else {
               localInstantSearchInstance.scheduleSearch();
             }
@@ -10906,7 +10915,7 @@
       },
       dispose: function dispose() {
         var _this5 = this,
-          _helper4,
+          _helper3,
           _derivedHelper3;
         localWidgets.forEach(function (widget) {
           if (widget.dispose && helper) {
@@ -10926,7 +10935,7 @@
         });
         localInstantSearchInstance = null;
         localParent = null;
-        (_helper4 = helper) === null || _helper4 === void 0 ? void 0 : _helper4.removeAllListeners();
+        (_helper3 = helper) === null || _helper3 === void 0 ? void 0 : _helper3.removeAllListeners();
         helper = null;
         (_derivedHelper3 = derivedHelper) === null || _derivedHelper3 === void 0 ? void 0 : _derivedHelper3.detach();
         derivedHelper = null;
@@ -11823,8 +11832,7 @@
         subscribe: function subscribe() {
           // using setTimeout here to delay extraction until widgets have been added in a tick (e.g. Vue)
           setTimeout(function () {
-            var client = instantSearchInstance.client;
-            payload.ua = client.transporter && client.transporter.userAgent ? client.transporter.userAgent.value : client._ua;
+            payload.ua = getAlgoliaAgent(instantSearchInstance.client);
             extractWidgetPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
             instantSearchInstance.middleware.forEach(function (middleware) {
               return payload.widgets.push({
@@ -13347,7 +13355,7 @@
     };
   }
 
-  var version$3 = '4.83.0';
+  var version$3 = '4.85.0';
 
   function _typeof$q(o) {
     "@babel/helpers - typeof";
@@ -20937,7 +20945,7 @@
           onSelect = _getItemProps.onSelect,
           itemProps = _objectWithoutProperties$d(_getItemProps, _excluded$d);
         return createElement("li", _extends$2({
-          key: item.objectID
+          key: "".concat(itemProps.id, ":").concat(item.objectID)
         }, itemProps, {
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
@@ -20948,16 +20956,23 @@
     };
   }
 
-  var _excluded$e = ["children", "classNames"];
+  var _excluded$e = ["children", "classNames", "hidden"];
   function createAutocompletePanelComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompletePanel(userProps) {
       var children = userProps.children,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        hidden = userProps.hidden,
         props = _objectWithoutProperties$d(userProps, _excluded$e);
       return createElement("div", _extends$2({}, props, {
-        className: cx('ais-AutocompletePanel', classNames.root, props.className)
+        "aria-hidden": hidden,
+        className: cx('ais-AutocompletePanel', !hidden && 'ais-AutocompletePanel--open', classNames.root, props.className),
+        onMouseDown: function onMouseDown(event) {
+          // Prevents the autocomplete panel from blurring the input when
+          // clicking inside the panel.
+          event.preventDefault();
+        }
       }), createElement("div", {
         className: cx('ais-AutocompletePanelLayout', classNames.layout)
       }, children));
@@ -21106,25 +21121,21 @@
 
   var _slicedToArray$h = unwrapExports(slicedToArray);
 
-  function AutocompleteSubmitIcon(_ref) {
+  function SubmitIcon(_ref) {
     var createElement = _ref.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteSubmitIcon",
       viewBox: "0 0 24 24",
-      width: "20",
-      height: "20",
       fill: "currentColor"
     }, createElement("path", {
       d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
     }));
   }
-  function AutocompleteLoadingIcon(_ref2) {
+  function LoadingIcon(_ref2) {
     var createElement = _ref2.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteLoadingIcon",
-      viewBox: "0 0 100 100",
-      width: "20",
-      height: "20"
+      viewBox: "0 0 100 100"
     }, createElement("circle", {
       cx: "50",
       cy: "50",
@@ -21142,19 +21153,17 @@
       keyTimes: "0;0.40;0.65;1"
     })));
   }
-  function AutocompleteClearIcon(_ref3) {
+  function ClearIcon(_ref3) {
     var createElement = _ref3.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteClearIcon",
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
       fill: "currentColor"
     }, createElement("path", {
       d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
     }));
   }
-  function AutocompleteClockIcon(_ref4) {
+  function ClockIcon(_ref4) {
     var createElement = _ref4.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -21163,7 +21172,7 @@
       d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
     }));
   }
-  function AutocompleteTrashIcon(_ref5) {
+  function TrashIcon(_ref5) {
     var createElement = _ref5.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -21177,6 +21186,7 @@
     var createElement = _ref.createElement;
     return function AutocompleteRecentSearch(_ref2) {
       var item = _ref2.item,
+        children = _ref2.children,
         onSelect = _ref2.onSelect,
         onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
         _ref2$classNames = _ref2.classNames,
@@ -21188,11 +21198,11 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
-      }, createElement(AutocompleteClockIcon, {
+      }, createElement(ClockIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-      }, item.query)), createElement("div", {
+      }, children)), createElement("div", {
         className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
       }, createElement("button", {
         className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
@@ -21201,7 +21211,7 @@
           evt.stopPropagation();
           onRemoveRecentSearch();
         }
-      }, createElement(AutocompleteTrashIcon, {
+      }, createElement(TrashIcon, {
         createElement: createElement
       }))));
     };
@@ -21214,6 +21224,7 @@
         onClear = _ref2.onClear,
         query = _ref2.query,
         isSearchStalled = _ref2.isSearchStalled;
+      var inputRef = inputProps.ref;
       return createElement("form", {
         className: "ais-AutocompleteForm",
         action: "",
@@ -21221,6 +21232,10 @@
         role: "search",
         onSubmit: function onSubmit(e) {
           return e.preventDefault();
+        },
+        onReset: function onReset() {
+          var _inputRef$current;
+          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         }
       }, createElement("div", {
         className: "ais-AutocompleteInputWrapperPrefix"
@@ -21233,12 +21248,12 @@
         className: "ais-AutocompleteSubmitButton",
         type: "submit",
         title: "Submit"
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteLoadingIndicator",
         hidden: !isSearchStalled
-      }, createElement(AutocompleteLoadingIcon, {
+      }, createElement(LoadingIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteInputWrapper"
@@ -21251,7 +21266,6 @@
         autoCapitalize: "off",
         enterKeyHint: "search",
         spellCheck: "false",
-        placeholder: "",
         maxLength: 512,
         type: "search",
         value: query
@@ -21263,7 +21277,7 @@
         title: "Clear",
         hidden: query.length === 0 || isSearchStalled,
         onClick: onClear
-      }, createElement(AutocompleteClearIcon, {
+      }, createElement(ClearIcon, {
         createElement: createElement
       }))));
     };
@@ -21272,7 +21286,7 @@
   function createAutocompleteSuggestionComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteSuggestion(_ref2) {
-      var item = _ref2.item,
+      var children = _ref2.children,
         onSelect = _ref2.onSelect,
         _ref2$classNames = _ref2.classNames,
         classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -21283,11 +21297,11 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-      }, item.query)));
+      }, children)));
     };
   }
 
@@ -21301,8 +21315,10 @@
       var indices = _ref2.indices,
         indicesConfig = _ref2.indicesConfig,
         onRefine = _ref2.onRefine,
-        globalOnSelect = _ref2.onSelect;
+        globalOnSelect = _ref2.onSelect,
+        placeholder = _ref2.placeholder;
       var getElementId = createGetElementId(useId());
+      var inputRef = useRef(null);
       var rootRef = useRef(null);
       var _useState = useState(false),
         _useState2 = _slicedToArray$h(_useState, 2),
@@ -21334,7 +21350,7 @@
           document.body.removeEventListener('click', onBodyClick);
         };
       }, [rootRef]);
-      var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      var getNextActiveDescendant = function getNextActiveDescendant(key) {
         switch (key) {
           case 'ArrowLeft':
           case 'ArrowUp':
@@ -21353,11 +21369,21 @@
         }
       };
       var submit = function submit() {
-        var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
-        setIsOpen(false);
-        if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+        var _override$activeDesce;
+        var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        if (isOpen) {
+          setIsOpen(false);
+        } else {
+          var _inputRef$current;
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+        }
+        var actualDescendant = (_override$activeDesce = override.activeDescendant) !== null && _override$activeDesce !== void 0 ? _override$activeDesce : activeDescendant;
+        if (!actualDescendant && override.query) {
+          onRefine(override.query);
+        }
+        if (actualDescendant && items.has(actualDescendant)) {
           var _getQuery;
-          var _ref3 = items.get(actualActiveDescendant),
+          var _ref3 = items.get(actualDescendant),
             _item = _ref3.item,
             _ref3$config = _ref3.config,
             indexOnSelect = _ref3$config.onSelect,
@@ -21379,43 +21405,54 @@
         getInputProps: function getInputProps() {
           return {
             id: getElementId('input'),
+            ref: inputRef,
             role: 'combobox',
             'aria-autocomplete': 'list',
             'aria-expanded': isOpen,
             'aria-haspopup': 'grid',
             'aria-controls': getElementId('panel'),
             'aria-activedescendant': activeDescendant,
+            placeholder: placeholder,
             onFocus: function onFocus() {
               return setIsOpen(true);
             },
             onKeyDown: function onKeyDown(event) {
-              if (event.key === 'Escape') {
-                setActiveDescendant(undefined);
-                setIsOpen(false);
-                return;
-              }
               switch (event.key) {
+                case 'Escape':
+                  {
+                    if (isOpen) {
+                      setIsOpen(false);
+                      event.preventDefault();
+                    } else {
+                      setActiveDescendant(undefined);
+                    }
+                    break;
+                  }
                 case 'ArrowLeft':
                 case 'ArrowUp':
                 case 'ArrowRight':
                 case 'ArrowDown':
                   {
                     var _document$getElementB;
-                    var nextActiveDescendent = getNextActiveDescendent(event.key);
-                    setActiveDescendant(nextActiveDescendent);
-                    (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                    setIsOpen(true);
+                    var nextActiveDescendant = getNextActiveDescendant(event.key);
+                    setActiveDescendant(nextActiveDescendant);
+                    (_document$getElementB = document.getElementById(nextActiveDescendant)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
                     event.preventDefault();
                     break;
                   }
                 case 'Enter':
                   {
-                    submit();
+                    submit({
+                      query: event.target.value
+                    });
                     break;
                   }
                 case 'Tab':
                   setIsOpen(false);
                   break;
                 default:
+                  setIsOpen(true);
                   return;
               }
             },
@@ -21443,7 +21480,9 @@
             role: 'row',
             'aria-selected': id === activeDescendant,
             onSelect: function onSelect() {
-              return submit(id);
+              return submit({
+                activeDescendant: id
+              });
             }
           };
         },
@@ -21584,7 +21623,13 @@
         return {
           objectID: value,
           query: value,
-          __indexName: 'recent-searches'
+          __indexName: 'recent-searches',
+          _highlightResult: getHighlightedAttribute({
+            item: {
+              query: value
+            },
+            query: query || ''
+          })
         };
       });
       var indicesForPropGetters = _toConsumableArray$9(indices);
@@ -21620,6 +21665,24 @@
       return false;
     }
   }
+  function getHighlightedAttribute(_ref3) {
+    var item = _ref3.item,
+      query = _ref3.query;
+    if (!query.trim().length) {
+      return {
+        query: {
+          matchLevel: 'none'
+        }
+      };
+    }
+    return {
+      query: {
+        value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+          return "<mark>".concat(match, "</mark>");
+        })
+      }
+    };
+  }
   function getLocalStorage() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
     if (!isLocalStorageSupported()) {
@@ -21644,10 +21707,10 @@
       }
     };
   }
-  function createStorage(_ref3) {
-    var _ref3$limit = _ref3.limit,
-      limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-      storageKey = _ref3.storageKey;
+  function createStorage(_ref4) {
+    var _ref4$limit = _ref4.limit,
+      limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+      storageKey = _ref4.storageKey;
     var storage = getLocalStorage(storageKey);
     var updateListener = null;
     return {
@@ -21820,9 +21883,9 @@
           Fragment: Fragment
         }) : _userProps$itemCompon,
         _userProps$previousIc = userProps.previousIconComponent,
-        PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+        PreviousIcon = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
         _userProps$nextIconCo = userProps.nextIconComponent,
-        NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+        NextIcon = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
         HeaderComponent = userProps.headerComponent,
         _userProps$showNaviga = userProps.showNavigation,
         showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
@@ -21891,7 +21954,7 @@
           event.preventDefault();
           scrollLeft();
         }
-      }, createElement(PreviousIconComponent, {
+      }, createElement(PreviousIcon, {
         createElement: createElement
       })), createElement("ol", {
         className: cx(cssClasses.list),
@@ -21937,7 +22000,7 @@
           event.preventDefault();
           scrollRight();
         }
-      }, createElement(NextIconComponent, {
+      }, createElement(NextIcon, {
         createElement: createElement
       })));
     };
@@ -22434,8 +22497,56 @@
     });
   }
 
-  var _excluded$m = ["indices", "showSuggestions", "showRecent"],
-    _excluded2$4 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "showRecent"];
+  var InternalHighlight = createHighlightComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
+
+  var _excluded$m = ["classNames"];
+  function ReverseHighlight(_ref) {
+    var _ref$classNames = _ref.classNames,
+      classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+      props = _objectWithoutProperties$c(_ref, _excluded$m);
+    return /*#__PURE__*/React__default.createElement(InternalHighlight, _extends$1({
+      classNames: {
+        root: cx('ais-ReverseHighlight', classNames.root),
+        highlighted: cx('ais-ReverseHighlight-highlighted', classNames.highlighted),
+        nonHighlighted: cx('ais-ReverseHighlight-nonHighlighted', classNames.nonHighlighted),
+        separator: cx('ais-ReverseHighlight-separator', classNames.separator)
+      }
+    }, props));
+  }
+
+  var _excluded$n = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"],
+    _excluded2$4 = ["isHighlighted"];
+  function ReverseHighlight$1(_ref) {
+    var hit = _ref.hit,
+      attribute = _ref.attribute,
+      highlightedTagName = _ref.highlightedTagName,
+      nonHighlightedTagName = _ref.nonHighlightedTagName,
+      separator = _ref.separator,
+      props = _objectWithoutProperties$c(_ref, _excluded$n);
+    var property = getPropertyByPath(hit._highlightResult, attribute) || [];
+    var properties = Array.isArray(property) ? property : [property];
+    var parts = properties.map(function (singleValue) {
+      return getHighlightedParts(unescape$1(singleValue.value || '')).map(function (_ref2) {
+        var isHighlighted = _ref2.isHighlighted,
+          rest = _objectWithoutProperties$c(_ref2, _excluded2$4);
+        return _objectSpread2(_objectSpread2({}, rest), {}, {
+          isHighlighted: !isHighlighted
+        });
+      });
+    });
+    return /*#__PURE__*/React__default.createElement(ReverseHighlight, _extends$1({}, props, {
+      parts: parts,
+      highlightedTagName: highlightedTagName,
+      nonHighlightedTagName: nonHighlightedTagName,
+      separator: separator
+    }));
+  }
+
+  var _excluded$o = ["indices", "showSuggestions", "showRecent", "searchParameters"],
+    _excluded2$5 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions", "placeholder"];
   var Autocomplete = createAutocompleteComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22468,15 +22579,13 @@
     useMemo: React.useMemo,
     useState: React.useState
   });
-  var _ref2 = /*#__PURE__*/React__default.createElement(Configure, {
-    hitsPerPage: 5
-  });
   function EXPERIMENTAL_Autocomplete(_ref) {
     var _ref$indices = _ref.indices,
       indices = _ref$indices === void 0 ? [] : _ref$indices,
       showSuggestions = _ref.showSuggestions,
       showRecent = _ref.showRecent,
-      props = _objectWithoutProperties$c(_ref, _excluded$m);
+      userSearchParameters = _ref.searchParameters,
+      props = _objectWithoutProperties$c(_ref, _excluded$o);
     var _useInstantSearch = useInstantSearch(),
       indexUiState = _useInstantSearch.indexUiState,
       indexRenderState = _useInstantSearch.indexRenderState;
@@ -22485,13 +22594,25 @@
         $$widgetType: 'ais.autocomplete'
       }),
       refine = _useSearchBox.refine;
+    var searchParameters = _objectSpread2({
+      hitsPerPage: 5
+    }, userSearchParameters);
     var indicesConfig = _toConsumableArray$8(indices);
     if (showSuggestions !== null && showSuggestions !== void 0 && showSuggestions.indexName) {
       var _showSuggestions$clas, _showSuggestions$clas2, _showSuggestions$clas3, _showSuggestions$clas4;
       indicesConfig.unshift({
         indexName: showSuggestions.indexName,
         headerComponent: showSuggestions.headerComponent,
-        itemComponent: showSuggestions.itemComponent || AutocompleteSuggestion,
+        itemComponent: showSuggestions.itemComponent || function (_ref2) {
+          var item = _ref2.item,
+            onSelect = _ref2.onSelect;
+          return /*#__PURE__*/React__default.createElement(AutocompleteSuggestion, {
+            item: item,
+            onSelect: onSelect
+          }, /*#__PURE__*/React__default.createElement(ConditionalReverseHighlight, {
+            item: item
+          }));
+        },
         classNames: {
           root: cx('ais-AutocompleteSuggestions', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions$clas = showSuggestions.classNames) === null || _showSuggestions$clas === void 0 ? void 0 : _showSuggestions$clas.root),
           list: cx('ais-AutocompleteSuggestionsList', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions$clas2 = showSuggestions.classNames) === null || _showSuggestions$clas2 === void 0 ? void 0 : _showSuggestions$clas2.list),
@@ -22509,17 +22630,18 @@
     }, [indexRenderState]);
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Index, {
       EXPERIMENTAL_isolated: true
-    }, _ref2, indicesConfig.map(function (index) {
+    }, /*#__PURE__*/React__default.createElement(Configure, searchParameters), indicesConfig.map(function (index) {
       return /*#__PURE__*/React__default.createElement(Index, {
         key: index.indexName,
         indexName: index.indexName
-      });
+      }, /*#__PURE__*/React__default.createElement(Configure, index.searchParameters));
     }), /*#__PURE__*/React__default.createElement(InnerAutocomplete, _extends$1({}, props, {
       indicesConfig: indicesConfig,
       refineSearchBox: refine,
       indexUiState: indexUiState,
       isSearchPage: isSearchPage,
-      showRecent: showRecent
+      showRecent: showRecent,
+      showSuggestions: showSuggestions
     }))));
   }
   function InnerAutocomplete(_ref3) {
@@ -22529,8 +22651,11 @@
       userOnSelect = _ref3.onSelect,
       indexUiState = _ref3.indexUiState,
       isSearchPage = _ref3.isSearchPage,
+      PanelComponent = _ref3.panelComponent,
       showRecent = _ref3.showRecent,
-      props = _objectWithoutProperties$c(_ref3, _excluded2$4);
+      showSuggestions = _ref3.showSuggestions,
+      placeholder = _ref3.placeholder,
+      props = _objectWithoutProperties$c(_ref3, _excluded2$5);
     var _useAutocomplete = useAutocomplete(),
       indices = _useAutocomplete.indices,
       refineAutocomplete = _useAutocomplete.refine,
@@ -22568,68 +22693,102 @@
             return;
           }
           setQuery(query);
-        }
+        },
+        placeholder: placeholder
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
     var AutocompleteRecentSearchComponent = _typeof$S(showRecent) === 'object' && showRecent.itemComponent || AutocompleteRecentSearch;
-    return /*#__PURE__*/React__default.createElement(Autocomplete, _extends$1({}, props, getRootProps()), /*#__PURE__*/React__default.createElement(AutocompleteSearch, {
-      inputProps: getInputProps(),
-      clearQuery: function clearQuery() {
-        refineSearchBox('');
-        refineAutocomplete('');
-      }
-    }), /*#__PURE__*/React__default.createElement(AutocompletePanel, getPanelProps(), showRecent && /*#__PURE__*/React__default.createElement(AutocompleteIndex
-    // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
-    , {
-      ItemComponent: function ItemComponent(_ref5) {
-        var item = _ref5.item,
-          onSelect = _ref5.onSelect;
-        return /*#__PURE__*/React__default.createElement(AutocompleteRecentSearchComponent, {
-          item: item,
-          onSelect: onSelect,
-          onRemoveRecentSearch: function onRemoveRecentSearch() {
-            return storage.onRemove(item.query);
-          }
-        });
-      },
-      classNames: {
-        root: 'ais-AutocompleteRecentSearches',
-        list: 'ais-AutocompleteRecentSearchesList',
-        item: 'ais-AutocompleteRecentSearchesItem'
-      },
-      items: storageHits,
-      getItemProps: getItemProps
-    }), indices.map(function (_ref6, index) {
+    var elements = {};
+    if (showRecent) {
+      elements.recent = /*#__PURE__*/React__default.createElement(AutocompleteIndex
+      // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+      , {
+        ItemComponent: function ItemComponent(_ref5) {
+          var item = _ref5.item,
+            onSelect = _ref5.onSelect;
+          return /*#__PURE__*/React__default.createElement(AutocompleteRecentSearchComponent, {
+            item: item,
+            onSelect: onSelect,
+            onRemoveRecentSearch: function onRemoveRecentSearch() {
+              return storage.onRemove(item.query);
+            }
+          }, /*#__PURE__*/React__default.createElement(ConditionalReverseHighlight, {
+            item: item
+          }));
+        },
+        classNames: {
+          root: 'ais-AutocompleteRecentSearches',
+          list: 'ais-AutocompleteRecentSearchesList',
+          item: 'ais-AutocompleteRecentSearchesItem'
+        },
+        items: storageHits,
+        getItemProps: getItemProps,
+        key: "recentSearches"
+      });
+    }
+    indices.forEach(function (_ref6, i) {
       var indexId = _ref6.indexId,
+        indexName = _ref6.indexName,
         hits = _ref6.hits;
-      return /*#__PURE__*/React__default.createElement(AutocompleteIndex, {
+      var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+      var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+        return !storageHits.find(function (storageHit) {
+          return storageHit.query === suggestionHit.query;
+        });
+      }) : hits;
+      elements[elementId] = /*#__PURE__*/React__default.createElement(AutocompleteIndex, {
         key: indexId
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
         ,
-        HeaderComponent: indicesConfig[index].headerComponent
+        HeaderComponent: indicesConfig[i].headerComponent
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
         ,
-        ItemComponent: indicesConfig[index].itemComponent,
-        items: hits.map(function (item) {
+        ItemComponent: indicesConfig[i].itemComponent,
+        items: filteredHits.map(function (item) {
           return _objectSpread2(_objectSpread2({}, item), {}, {
             __indexName: indexId
           });
         }),
         getItemProps: getItemProps,
-        classNames: indicesConfig[index].classNames
+        classNames: indicesConfig[i].classNames
       });
+    });
+    return /*#__PURE__*/React__default.createElement(Autocomplete, _extends$1({}, props, getRootProps()), /*#__PURE__*/React__default.createElement(AutocompleteSearch, {
+      inputProps: getInputProps(),
+      clearQuery: function clearQuery() {
+        refineSearchBox('');
+        refineAutocomplete('');
+      }
+    }), /*#__PURE__*/React__default.createElement(AutocompletePanel, getPanelProps(), PanelComponent ? /*#__PURE__*/React__default.createElement(PanelComponent, {
+      elements: elements,
+      indices: indices
+    }) : Object.keys(elements).map(function (elementId) {
+      return elements[elementId];
     })));
   }
+  function ConditionalReverseHighlight(_ref7) {
+    var _item$_highlightResul;
+    var item = _ref7.item;
+    if (!((_item$_highlightResul = item._highlightResult) !== null && _item$_highlightResul !== void 0 && _item$_highlightResul.query) ||
+    // @ts-expect-error - we should not have matchLevel as arrays here
+    item._highlightResult.query.matchLevel === 'none') {
+      return item.query;
+    }
+    return /*#__PURE__*/React__default.createElement(ReverseHighlight$1, {
+      attribute: "query",
+      hit: item
+    });
+  }
 
   function isModifierClick(event) {
     var isMiddleClick = event.button === 1;
     return Boolean(isMiddleClick || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
   }
 
-  var _excluded$n = ["classNames", "items", "hasItems", "createURL", "onNavigate", "separator", "translations"];
+  var _excluded$p = ["classNames", "items", "hasItems", "createURL", "onNavigate", "separator", "translations"];
   function Breadcrumb(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -22641,7 +22800,7 @@
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? '>' : _ref$separator,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$n);
+      props = _objectWithoutProperties$c(_ref, _excluded$p);
     var handleClick = function handleClick(value) {
       return function (event) {
         if (!isModifierClick(event)) {
@@ -22676,14 +22835,14 @@
     })));
   }
 
-  var _excluded$o = ["attributes", "rootPath", "separator", "transformItems", "translations"];
+  var _excluded$q = ["attributes", "rootPath", "separator", "transformItems", "translations"];
   function Breadcrumb$1(_ref) {
     var attributes = _ref.attributes,
       rootPath = _ref.rootPath,
       separator = _ref.separator,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$o);
+      props = _objectWithoutProperties$c(_ref, _excluded$q);
     var _useBreadcrumb = useBreadcrumb({
         attributes: attributes,
         rootPath: rootPath,
@@ -22707,7 +22866,7 @@
     return /*#__PURE__*/React__default.createElement(Breadcrumb, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$p = ["classNames", "disabled", "onClick", "translations"];
+  var _excluded$r = ["classNames", "disabled", "onClick", "translations"];
   function ClearRefinements(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -22716,7 +22875,7 @@
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$p);
+      props = _objectWithoutProperties$c(_ref, _excluded$r);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-ClearRefinements', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("button", {
@@ -22726,13 +22885,13 @@
     }, translations.resetButtonText));
   }
 
-  var _excluded$q = ["includedAttributes", "excludedAttributes", "transformItems", "translations"];
+  var _excluded$s = ["includedAttributes", "excludedAttributes", "transformItems", "translations"];
   function ClearRefinements$1(_ref) {
     var includedAttributes = _ref.includedAttributes,
       excludedAttributes = _ref.excludedAttributes,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$q);
+      props = _objectWithoutProperties$c(_ref, _excluded$s);
     var _useClearRefinements = useClearRefinements({
         includedAttributes: includedAttributes,
         excludedAttributes: excludedAttributes,
@@ -22756,7 +22915,7 @@
     return text.toString().charAt(0).toUpperCase() + text.toString().slice(1);
   }
 
-  var _excluded$r = ["classNames", "items", "hasRefinements"];
+  var _excluded$t = ["classNames", "items", "hasRefinements"];
   function CurrentRefinements(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -22764,7 +22923,7 @@
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$hasRefinements = _ref.hasRefinements,
       hasRefinements = _ref$hasRefinements === void 0 ? false : _ref$hasRefinements,
-      props = _objectWithoutProperties$c(_ref, _excluded$r);
+      props = _objectWithoutProperties$c(_ref, _excluded$t);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-CurrentRefinements', classNames.root, !hasRefinements && cx('ais-CurrentRefinements--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement("ul", {
@@ -22796,12 +22955,12 @@
     })));
   }
 
-  var _excluded$s = ["includedAttributes", "excludedAttributes", "transformItems"];
+  var _excluded$u = ["includedAttributes", "excludedAttributes", "transformItems"];
   function CurrentRefinements$1(_ref) {
     var includedAttributes = _ref.includedAttributes,
       excludedAttributes = _ref.excludedAttributes,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$s);
+      props = _objectWithoutProperties$c(_ref, _excluded$u);
     var _useCurrentRefinement = useCurrentRefinements({
         includedAttributes: includedAttributes,
         excludedAttributes: excludedAttributes,
@@ -22818,7 +22977,7 @@
     return /*#__PURE__*/React__default.createElement(CurrentRefinements, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$t = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
+  var _excluded$v = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var FrequentlyBoughtTogetherUiComponent = createFrequentlyBoughtTogetherComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22835,7 +22994,7 @@
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
       layoutComponent = _ref.layoutComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$t);
+      props = _objectWithoutProperties$c(_ref, _excluded$v);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useFrequentlyBoughtT = useFrequentlyBoughtTogether({
@@ -22878,17 +23037,17 @@
     return /*#__PURE__*/React__default.createElement(FrequentlyBoughtTogetherUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$u = ["isShowingMore", "translations"];
+  var _excluded$w = ["isShowingMore", "translations"];
   function ShowMoreButton(_ref) {
     var isShowingMore = _ref.isShowingMore,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$u);
+      props = _objectWithoutProperties$c(_ref, _excluded$w);
     return /*#__PURE__*/React__default.createElement("button", props, translations.showMoreButtonText({
       isShowingMore: isShowingMore
     }));
   }
 
-  var _excluded$v = ["classNames", "items", "hasItems", "onNavigate", "createURL", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "translations"];
+  var _excluded$x = ["classNames", "items", "hasItems", "onNavigate", "createURL", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "translations"];
   function HierarchicalList(_ref) {
     var className = _ref.className,
       _ref$classNames = _ref.classNames,
@@ -22940,7 +23099,7 @@
       onToggleShowMore = _ref2.onToggleShowMore,
       isShowingMore = _ref2.isShowingMore,
       translations = _ref2.translations,
-      props = _objectWithoutProperties$c(_ref2, _excluded$v);
+      props = _objectWithoutProperties$c(_ref2, _excluded$x);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-HierarchicalMenu', classNames.root, !hasItems && cx('ais-HierarchicalMenu--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement(HierarchicalList, {
@@ -22957,7 +23116,7 @@
     }));
   }
 
-  var _excluded$w = ["attributes", "limit", "rootPath", "separator", "showMore", "showMoreLimit", "showParentLevel", "sortBy", "transformItems", "translations"];
+  var _excluded$y = ["attributes", "limit", "rootPath", "separator", "showMore", "showMoreLimit", "showParentLevel", "sortBy", "transformItems", "translations"];
   function HierarchicalMenu$1(_ref) {
     var attributes = _ref.attributes,
       limit = _ref.limit,
@@ -22969,7 +23128,7 @@
       sortBy = _ref.sortBy,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$w);
+      props = _objectWithoutProperties$c(_ref, _excluded$y);
     var _useHierarchicalMenu = useHierarchicalMenu({
         attributes: attributes,
         limit: limit,
@@ -23009,16 +23168,11 @@
     }));
   }
 
-  var InternalHighlight = createHighlightComponent({
-    createElement: React.createElement,
-    Fragment: React.Fragment
-  });
-
-  var _excluded$x = ["classNames"];
+  var _excluded$z = ["classNames"];
   function Highlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$x);
+      props = _objectWithoutProperties$c(_ref, _excluded$z);
     return /*#__PURE__*/React__default.createElement(InternalHighlight, _extends$1({
       classNames: {
         root: cx('ais-Highlight', classNames.root),
@@ -23029,14 +23183,14 @@
     }, props));
   }
 
-  var _excluded$y = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
+  var _excluded$A = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
   function Highlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       highlightedTagName = _ref.highlightedTagName,
       nonHighlightedTagName = _ref.nonHighlightedTagName,
       separator = _ref.separator,
-      props = _objectWithoutProperties$c(_ref, _excluded$y);
+      props = _objectWithoutProperties$c(_ref, _excluded$A);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = Array.isArray(property) ? property : [property];
     var parts = properties.map(function (singleValue) {
@@ -23050,8 +23204,8 @@
     }));
   }
 
-  var _excluded$z = ["escapeHTML", "transformItems", "hitComponent", "bannerComponent"],
-    _excluded2$5 = ["hit", "index"];
+  var _excluded$B = ["escapeHTML", "transformItems", "hitComponent", "bannerComponent"],
+    _excluded2$6 = ["hit", "index"];
   // @MAJOR: Move default hit component back to the UI library
   // once flavour specificities are erased
   function DefaultHitComponent(_ref) {
@@ -23072,7 +23226,7 @@
       _ref2$hitComponent = _ref2.hitComponent,
       HitComponent = _ref2$hitComponent === void 0 ? DefaultHitComponent : _ref2$hitComponent,
       BannerComponent = _ref2.bannerComponent,
-      props = _objectWithoutProperties$c(_ref2, _excluded$z);
+      props = _objectWithoutProperties$c(_ref2, _excluded$B);
     var _useHits = useHits({
         escapeHTML: escapeHTML,
         transformItems: transformItems
@@ -23086,7 +23240,7 @@
       return function (_ref3) {
         var hit = _ref3.hit,
           index = _ref3.index,
-          itemProps = _objectWithoutProperties$c(_ref3, _excluded2$5);
+          itemProps = _objectWithoutProperties$c(_ref3, _excluded2$6);
         return /*#__PURE__*/React__default.createElement("li", _extends$1({
           key: hit.objectID
         }, itemProps), /*#__PURE__*/React__default.createElement(HitComponent, {
@@ -23108,14 +23262,14 @@
     return /*#__PURE__*/React__default.createElement(HitsUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$A = ["items", "onChange", "currentValue", "classNames"];
+  var _excluded$C = ["items", "onChange", "currentValue", "classNames"];
   function HitsPerPage(_ref) {
     var items = _ref.items,
       _onChange = _ref.onChange,
       currentValue = _ref.currentValue,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$A);
+      props = _objectWithoutProperties$c(_ref, _excluded$C);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-HitsPerPage', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("select", {
@@ -23133,11 +23287,11 @@
     })));
   }
 
-  var _excluded$B = ["items", "transformItems"];
+  var _excluded$D = ["items", "transformItems"];
   function HitsPerPage$1(_ref) {
     var userItems = _ref.items,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$B);
+      props = _objectWithoutProperties$c(_ref, _excluded$D);
     var _useHitsPerPage = useHitsPerPage({
         items: userItems,
         transformItems: transformItems
@@ -23161,7 +23315,7 @@
     return /*#__PURE__*/React__default.createElement(HitsPerPage, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$C = ["hitComponent", "hits", "bannerComponent", "banner", "sendEvent", "isFirstPage", "isLastPage", "onShowPrevious", "onShowMore", "classNames", "translations"];
+  var _excluded$E = ["hitComponent", "hits", "bannerComponent", "banner", "sendEvent", "isFirstPage", "isLastPage", "onShowPrevious", "onShowMore", "classNames", "translations"];
   function DefaultHitComponent$1(_ref) {
     var hit = _ref.hit;
     return /*#__PURE__*/React__default.createElement("div", {
@@ -23206,7 +23360,7 @@
       _ref3$classNames = _ref3.classNames,
       classNames = _ref3$classNames === void 0 ? {} : _ref3$classNames,
       translations = _ref3.translations,
-      props = _objectWithoutProperties$c(_ref3, _excluded$C);
+      props = _objectWithoutProperties$c(_ref3, _excluded$E);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-InfiniteHits', classNames.root, hits.length === 0 && cx('ais-InfiniteHits--empty', classNames.emptyRoot), props.className)
     }), onShowPrevious && /*#__PURE__*/React__default.createElement("button", {
@@ -23242,7 +23396,7 @@
     }, translations.showMoreButtonText));
   }
 
-  var _excluded$D = ["showPrevious", "cache", "escapeHTML", "transformItems", "translations", "bannerComponent"];
+  var _excluded$F = ["showPrevious", "cache", "escapeHTML", "transformItems", "translations", "bannerComponent"];
   function InfiniteHits$1(_ref) {
     var _ref$showPrevious = _ref.showPrevious,
       shouldShowPrevious = _ref$showPrevious === void 0 ? true : _ref$showPrevious,
@@ -23251,7 +23405,7 @@
       transformItems = _ref.transformItems,
       translations = _ref.translations,
       BannerComponent = _ref.bannerComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$D);
+      props = _objectWithoutProperties$c(_ref, _excluded$F);
     var _useInfiniteHits = useInfiniteHits({
         cache: cache,
         escapeHTML: escapeHTML,
@@ -23287,7 +23441,7 @@
     return /*#__PURE__*/React__default.createElement(InfiniteHits, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$E = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
+  var _excluded$G = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var LookingSimilarUiComponent = createLookingSimilarComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -23304,7 +23458,7 @@
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
       layoutComponent = _ref.layoutComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$E);
+      props = _objectWithoutProperties$c(_ref, _excluded$G);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useLookingSimilar = useLookingSimilar({
@@ -23347,7 +23501,7 @@
     return /*#__PURE__*/React__default.createElement(LookingSimilarUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$F = ["items", "classNames", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "createURL", "onRefine", "translations"];
+  var _excluded$H = ["items", "classNames", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "createURL", "onRefine", "translations"];
   function Menu(_ref) {
     var items = _ref.items,
       _ref$classNames = _ref.classNames,
@@ -23359,7 +23513,7 @@
       createURL = _ref.createURL,
       onRefine = _ref.onRefine,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$F);
+      props = _objectWithoutProperties$c(_ref, _excluded$H);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-Menu', classNames.root, items.length === 0 && cx('ais-Menu--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement("ul", {
@@ -23392,7 +23546,7 @@
     }));
   }
 
-  var _excluded$G = ["attribute", "limit", "showMore", "showMoreLimit", "sortBy", "transformItems", "translations"];
+  var _excluded$I = ["attribute", "limit", "showMore", "showMoreLimit", "sortBy", "transformItems", "translations"];
   function Menu$1(_ref) {
     var attribute = _ref.attribute,
       limit = _ref.limit,
@@ -23401,7 +23555,7 @@
       sortBy = _ref.sortBy,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$G);
+      props = _objectWithoutProperties$c(_ref, _excluded$I);
     var _useMenu = useMenu({
         attribute: attribute,
         limit: limit,
@@ -23438,8 +23592,8 @@
     }));
   }
 
-  var _excluded$H = ["pages", "currentPage", "nbPages", "isFirstPage", "isLastPage", "showFirst", "showPrevious", "showNext", "showLast", "createURL", "onNavigate", "translations", "classNames"],
-    _excluded2$6 = ["isDisabled", "className", "classNames", "href", "onClick"];
+  var _excluded$J = ["pages", "currentPage", "nbPages", "isFirstPage", "isLastPage", "showFirst", "showPrevious", "showNext", "showLast", "createURL", "onNavigate", "translations", "classNames"],
+    _excluded2$7 = ["isDisabled", "className", "classNames", "href", "onClick"];
   function Pagination(_ref) {
     var pages = _ref.pages,
       currentPage = _ref.currentPage,
@@ -23459,7 +23613,7 @@
       translations = _ref.translations,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$H);
+      props = _objectWithoutProperties$c(_ref, _excluded$J);
     var firstPageIndex = 0;
     var previousPageIndex = currentPage - 1;
     var nextPageIndex = currentPage + 1;
@@ -23530,7 +23684,7 @@
       classNames = _ref2.classNames,
       href = _ref2.href,
       _onClick = _ref2.onClick,
-      props = _objectWithoutProperties$c(_ref2, _excluded2$6);
+      props = _objectWithoutProperties$c(_ref2, _excluded2$7);
     if (isDisabled) {
       return /*#__PURE__*/React__default.createElement("li", {
         className: cx('ais-Pagination-item', classNames.item, 'ais-Pagination-item--disabled', classNames.disabledItem, className)
@@ -23553,7 +23707,7 @@
     }, props)));
   }
 
-  var _excluded$I = ["showFirst", "showPrevious", "showNext", "showLast", "padding", "totalPages", "translations"];
+  var _excluded$K = ["showFirst", "showPrevious", "showNext", "showLast", "padding", "totalPages", "translations"];
   function Pagination$1(_ref) {
     var showFirst = _ref.showFirst,
       showPrevious = _ref.showPrevious,
@@ -23562,7 +23716,7 @@
       padding = _ref.padding,
       totalPages = _ref.totalPages,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$I);
+      props = _objectWithoutProperties$c(_ref, _excluded$K);
     var _usePagination = usePagination({
         padding: padding,
         totalPages: totalPages
@@ -23611,14 +23765,14 @@
     }));
   }
 
-  var _excluded$J = ["classNames", "url", "theme"];
+  var _excluded$L = ["classNames", "url", "theme"];
   function PoweredBy(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       url = _ref.url,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-      props = _objectWithoutProperties$c(_ref, _excluded$J);
+      props = _objectWithoutProperties$c(_ref, _excluded$L);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-PoweredBy', theme === 'dark' ? cx('ais-PoweredBy--dark', classNames.dark) : cx('ais-PoweredBy--light', classNames.light), classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("a", {
@@ -23648,7 +23802,7 @@
     return /*#__PURE__*/React__default.createElement(PoweredBy, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$K = ["classNames", "range", "start", "step", "disabled", "onSubmit", "translations"];
+  var _excluded$M = ["classNames", "range", "start", "step", "disabled", "onSubmit", "translations"];
   // if the default value is undefined, React considers the component uncontrolled initially, which we don't want 0 or NaN as the default value
   var unsetNumberInputValue = '';
 
@@ -23673,7 +23827,7 @@
       disabled = _ref.disabled,
       _onSubmit = _ref.onSubmit,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$K);
+      props = _objectWithoutProperties$c(_ref, _excluded$M);
     var values = {
       min: minValue !== -Infinity && minValue !== min ? minValue : unsetNumberInputValue,
       max: maxValue !== Infinity && maxValue !== max ? maxValue : unsetNumberInputValue
@@ -23753,14 +23907,14 @@
     }, translations.submitButtonText)));
   }
 
-  var _excluded$L = ["attribute", "min", "max", "precision", "translations"];
+  var _excluded$N = ["attribute", "min", "max", "precision", "translations"];
   function RangeInput$1(_ref) {
     var attribute = _ref.attribute,
       min = _ref.min,
       max = _ref.max,
       precision = _ref.precision,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$L);
+      props = _objectWithoutProperties$c(_ref, _excluded$N);
     var _useRange = useRange({
         attribute: attribute,
         min: min,
@@ -23788,7 +23942,7 @@
     return /*#__PURE__*/React__default.createElement(RangeInput, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$M = ["canRefine", "items", "onRefine", "query", "searchBox", "noResults", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "className", "classNames", "translations"];
+  var _excluded$O = ["canRefine", "items", "onRefine", "query", "searchBox", "noResults", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "className", "classNames", "translations"];
   function RefinementList$1(_ref) {
     var canRefine = _ref.canRefine,
       items = _ref.items,
@@ -23804,7 +23958,7 @@
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$M);
+      props = _objectWithoutProperties$c(_ref, _excluded$O);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-RefinementList', classNames.root, items.length === 0 && cx('ais-RefinementList--noRefinement', classNames.noRefinementRoot), className)
     }), searchBox && /*#__PURE__*/React__default.createElement("div", {
@@ -23843,8 +23997,8 @@
     }));
   }
 
-  var _excluded$N = ["formRef", "inputRef", "inputProps", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
-  var _ref2$1 = /*#__PURE__*/React__default.createElement("path", {
+  var _excluded$P = ["formRef", "inputRef", "inputProps", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
+  var _ref2 = /*#__PURE__*/React__default.createElement("path", {
     d: "M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
   });
   function DefaultSubmitIcon(_ref) {
@@ -23855,7 +24009,7 @@
       height: "10",
       viewBox: "0 0 40 40",
       "aria-hidden": "true"
-    }, _ref2$1);
+    }, _ref2);
   }
   var _ref4 = /*#__PURE__*/React__default.createElement("path", {
     d: "M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
@@ -23924,7 +24078,7 @@
       _ref7$classNames = _ref7.classNames,
       classNames = _ref7$classNames === void 0 ? {} : _ref7$classNames,
       translations = _ref7.translations,
-      props = _objectWithoutProperties$c(_ref7, _excluded$N);
+      props = _objectWithoutProperties$c(_ref7, _excluded$P);
     function handleSubmit(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -23989,7 +24143,7 @@
     }))));
   }
 
-  var _excluded$O = ["searchable", "searchablePlaceholder", "searchableSelectOnSubmit", "attribute", "operator", "limit", "showMore", "showMoreLimit", "sortBy", "escapeFacetValues", "transformItems", "translations"];
+  var _excluded$Q = ["searchable", "searchablePlaceholder", "searchableSelectOnSubmit", "attribute", "operator", "limit", "showMore", "showMoreLimit", "sortBy", "escapeFacetValues", "transformItems", "translations"];
   function RefinementList$2(_ref) {
     var searchable = _ref.searchable,
       searchablePlaceholder = _ref.searchablePlaceholder,
@@ -24004,7 +24158,7 @@
       escapeFacetValues = _ref.escapeFacetValues,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$O);
+      props = _objectWithoutProperties$c(_ref, _excluded$Q);
     var _useRefinementList = useRefinementList({
         attribute: attribute,
         operator: operator,
@@ -24096,7 +24250,7 @@
     }));
   }
 
-  var _excluded$P = ["objectIDs", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
+  var _excluded$R = ["objectIDs", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var RelatedProductsUiComponent = createRelatedProductsComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -24113,7 +24267,7 @@
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
       layoutComponent = _ref.layoutComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$P);
+      props = _objectWithoutProperties$c(_ref, _excluded$R);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useRelatedProducts = useRelatedProducts({
@@ -24156,7 +24310,7 @@
     return /*#__PURE__*/React__default.createElement(RelatedProductsUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$Q = ["queryHook", "searchAsYouType", "ignoreCompositionEvents", "translations"];
+  var _excluded$S = ["queryHook", "searchAsYouType", "ignoreCompositionEvents", "translations"];
   function SearchBox$1(_ref) {
     var queryHook = _ref.queryHook,
       _ref$searchAsYouType = _ref.searchAsYouType,
@@ -24164,7 +24318,7 @@
       _ref$ignoreCompositio = _ref.ignoreCompositionEvents,
       ignoreCompositionEvents = _ref$ignoreCompositio === void 0 ? false : _ref$ignoreCompositio,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$Q);
+      props = _objectWithoutProperties$c(_ref, _excluded$S);
     var _useSearchBox = useSearchBox({
         queryHook: queryHook
       }, {
@@ -24225,11 +24379,11 @@
     return /*#__PURE__*/React__default.createElement(SearchBox, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$R = ["classNames"];
+  var _excluded$T = ["classNames"];
   function Snippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$R);
+      props = _objectWithoutProperties$c(_ref, _excluded$T);
     return /*#__PURE__*/React__default.createElement(InternalHighlight, _extends$1({
       classNames: {
         root: cx('ais-Snippet', classNames.root),
@@ -24240,14 +24394,14 @@
     }, props));
   }
 
-  var _excluded$S = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
+  var _excluded$U = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
   function Snippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       highlightedTagName = _ref.highlightedTagName,
       nonHighlightedTagName = _ref.nonHighlightedTagName,
       separator = _ref.separator,
-      props = _objectWithoutProperties$c(_ref, _excluded$S);
+      props = _objectWithoutProperties$c(_ref, _excluded$U);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = Array.isArray(property) ? property : [property];
     var parts = properties.map(function (singleValue) {
@@ -24261,7 +24415,7 @@
     }));
   }
 
-  var _excluded$T = ["items", "value", "onChange", "classNames"];
+  var _excluded$V = ["items", "value", "onChange", "classNames"];
   function SortBy(_ref) {
     var items = _ref.items,
       value = _ref.value,
@@ -24269,7 +24423,7 @@
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$T);
+      props = _objectWithoutProperties$c(_ref, _excluded$V);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-SortBy', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("select", {
@@ -24288,11 +24442,11 @@
     })));
   }
 
-  var _excluded$U = ["items", "transformItems"];
+  var _excluded$W = ["items", "transformItems"];
   function SortBy$1(_ref) {
     var items = _ref.items,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$U);
+      props = _objectWithoutProperties$c(_ref, _excluded$W);
     var _useSortBy = useSortBy({
         items: items,
         transformItems: transformItems
@@ -24310,7 +24464,7 @@
     return /*#__PURE__*/React__default.createElement(SortBy, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$V = ["classNames", "nbHits", "processingTimeMS", "nbSortedHits", "areHitsSorted", "translations"];
+  var _excluded$X = ["classNames", "nbHits", "processingTimeMS", "nbSortedHits", "areHitsSorted", "translations"];
   function Stats(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -24319,7 +24473,7 @@
       nbSortedHits = _ref.nbSortedHits,
       areHitsSorted = _ref.areHitsSorted,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$V);
+      props = _objectWithoutProperties$c(_ref, _excluded$X);
     var translationOptions = {
       nbHits: nbHits,
       processingTimeMS: processingTimeMS,
@@ -24333,10 +24487,10 @@
     }, translations.rootElementText(translationOptions)));
   }
 
-  var _excluded$W = ["translations"];
+  var _excluded$Y = ["translations"];
   function Stats$1(_ref) {
     var translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$W);
+      props = _objectWithoutProperties$c(_ref, _excluded$Y);
     var _useStats = useStats(undefined, {
         $$widgetType: 'ais.stats'
       }),
@@ -24386,14 +24540,14 @@
     return '';
   }
 
-  var _excluded$X = ["classNames", "checked", "onChange", "label"];
+  var _excluded$Z = ["classNames", "checked", "onChange", "label"];
   function ToggleRefinement(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       checked = _ref.checked,
       _onChange = _ref.onChange,
       label = _ref.label,
-      props = _objectWithoutProperties$c(_ref, _excluded$X);
+      props = _objectWithoutProperties$c(_ref, _excluded$Z);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-ToggleRefinement', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("label", {
@@ -24410,12 +24564,12 @@
     }, label)));
   }
 
-  var _excluded$Y = ["attribute", "on", "off"];
+  var _excluded$_ = ["attribute", "on", "off"];
   function ToggleRefinement$1(_ref) {
     var attribute = _ref.attribute,
       on = _ref.on,
       off = _ref.off,
-      props = _objectWithoutProperties$c(_ref, _excluded$Y);
+      props = _objectWithoutProperties$c(_ref, _excluded$_);
     var _useToggleRefinement = useToggleRefinement({
         attribute: attribute,
         on: on,
@@ -24438,7 +24592,7 @@
     }, props, uiProps));
   }
 
-  var _excluded$Z = ["facetName", "facetValue", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
+  var _excluded$$ = ["facetName", "facetValue", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var TrendingItemsUiComponent = createTrendingItemsComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -24456,7 +24610,7 @@
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
       layoutComponent = _ref.layoutComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$Z);
+      props = _objectWithoutProperties$c(_ref, _excluded$$);
     var facetParameters = facetName && facetValue ? {
       facetName: facetName,
       facetValue: facetValue
@@ -24563,6 +24717,7 @@
   exports.RecommendToolType = RecommendToolType;
   exports.RefinementList = RefinementList$2;
   exports.RelatedProducts = RelatedProducts;
+  exports.ReverseHighlight = ReverseHighlight$1;
   exports.SearchBox = SearchBox$1;
   exports.SearchIndexToolType = SearchIndexToolType;
   exports.Snippet = Snippet$1;