instantsearch.js 4.86.1 → 4.87.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.86.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.87.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -13152,7 +13152,11 @@
     return function (widgetParams) {
       var _ref = widgetParams || {},
         _ref$escapeHTML = _ref.escapeHTML,
-        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML;
+        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML,
+        _ref$transformItems = _ref.transformItems,
+        transformItems = _ref$transformItems === void 0 ? function (indices) {
+          return indices;
+        } : _ref$transformItems;
        _warning(!widgetParams.indices, "\nThe option `indices` has been removed from the Autocomplete connector.\n\nThe indices to target are now inferred from the widgets tree.\n".concat(Array.isArray(widgetParams.indices) ? "\nAn alternative would be:\n\nconst autocomplete = connectAutocomplete(renderer);\n\nsearch.addWidgets([\n  ".concat(widgetParams.indices.map(function (_ref2) {
         var value = _ref2.value;
         return "index({ indexName: '".concat(value, "' }),");
@@ -13194,6 +13198,7 @@
               helper.setQuery(query).search();
             };
           }
+          var sendEventMap = {};
           var indices = scopedResults.map(function (scopedResult) {
             var _scopedResult$results, _scopedResult$results2;
             // We need to escape the hits because highlighting
@@ -13201,7 +13206,7 @@
             if (scopedResult.results) {
               scopedResult.results.hits = escapeHTML ? escapeHits(scopedResult.results.hits) : scopedResult.results.hits;
             }
-            var sendEvent = createSendEventForHits({
+            sendEventMap[scopedResult.indexId] = createSendEventForHits({
               instantSearchInstance: instantSearchInstance,
               helper: scopedResult.helper,
               widgetType: _this.$$type
@@ -13210,13 +13215,16 @@
               indexId: scopedResult.indexId,
               indexName: ((_scopedResult$results = scopedResult.results) === null || _scopedResult$results === void 0 ? void 0 : _scopedResult$results.index) || '',
               hits: ((_scopedResult$results2 = scopedResult.results) === null || _scopedResult$results2 === void 0 ? void 0 : _scopedResult$results2.hits) || [],
-              results: scopedResult.results || {},
-              sendEvent: sendEvent
+              results: scopedResult.results || {}
             };
           });
           return {
             currentRefinement: state.query || '',
-            indices: indices,
+            indices: transformItems(indices).map(function (transformedIndex) {
+              return _objectSpread2(_objectSpread2({}, transformedIndex), {}, {
+                sendEvent: sendEventMap[transformedIndex.indexId]
+              });
+            }),
             refine: connectorState.refine,
             widgetParams: widgetParams
           };
@@ -13912,6 +13920,242 @@
     };
   });
 
+  var withUsage$u = createDocumentationMessageGenerator({
+    name: 'filter-suggestions',
+    connector: true
+  });
+  var connectFilterSuggestions = function connectFilterSuggestions(renderFn) {
+    var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    checkRendering(renderFn, withUsage$u());
+    return function (widgetParams) {
+      var agentId = widgetParams.agentId,
+        attributes = widgetParams.attributes,
+        _widgetParams$maxSugg = widgetParams.maxSuggestions,
+        maxSuggestions = _widgetParams$maxSugg === void 0 ? 3 : _widgetParams$maxSugg,
+        _widgetParams$debounc = widgetParams.debounceMs,
+        debounceMs = _widgetParams$debounc === void 0 ? 300 : _widgetParams$debounc,
+        _widgetParams$hitsToS = widgetParams.hitsToSample,
+        hitsToSample = _widgetParams$hitsToS === void 0 ? 5 : _widgetParams$hitsToS,
+        _widgetParams$transfo = widgetParams.transformItems,
+        transformItems = _widgetParams$transfo === void 0 ? function (items) {
+          return items;
+        } : _widgetParams$transfo,
+        transport = widgetParams.transport;
+      if (!agentId && !transport) {
+        throw new Error(withUsage$u('The `agentId` option is required unless a custom `transport` is provided.'));
+      }
+      var endpoint;
+      var headers;
+      var suggestions = [];
+      var isLoading = false;
+      var debounceTimer;
+      var lastStateSignature = null; // null means never fetched
+      var refine;
+      var searchHelper = null;
+      var latestRenderOptions = null;
+
+      // Create a signature of the current search state (query + refinements)
+      var getStateSignature = function getStateSignature(results) {
+        var query = results.query || '';
+        var refinements = searchHelper ? JSON.stringify(searchHelper.state.facetsRefinements) + JSON.stringify(searchHelper.state.disjunctiveFacetsRefinements) + JSON.stringify(searchHelper.state.hierarchicalFacetsRefinements) : '';
+        return "".concat(query, "|").concat(refinements);
+      };
+      var _getWidgetRenderState = function getWidgetRenderState(renderOptions) {
+        var results = 'results' in renderOptions ? renderOptions.results : undefined;
+        var transformedSuggestions = transformItems(suggestions, {
+          results: results
+        });
+        return {
+          suggestions: transformedSuggestions,
+          isLoading: isLoading,
+          refine: refine,
+          widgetParams: widgetParams
+        };
+      };
+
+      // Minimum duration to show skeleton to avoid flash when results are cached
+      var MIN_SKELETON_DURATION_MS = 300;
+      var fetchSuggestions = function fetchSuggestions(results, renderOptions) {
+        var _results$hits, _rawResults$;
+        if (!(results !== null && results !== void 0 && (_results$hits = results.hits) !== null && _results$hits !== void 0 && _results$hits.length)) {
+          suggestions = [];
+          isLoading = false;
+          renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(renderOptions)), {}, {
+            instantSearchInstance: renderOptions.instantSearchInstance
+          }), false);
+          return;
+        }
+        var loadingStartTime = Date.now();
+        isLoading = true;
+        renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(renderOptions)), {}, {
+          instantSearchInstance: renderOptions.instantSearchInstance
+        }), false);
+
+        // Get facets from raw results (results.facets is processed differently)
+        var rawResults = results._rawResults;
+        var rawFacets = (rawResults === null || rawResults === void 0 ? void 0 : (_rawResults$ = rawResults[0]) === null || _rawResults$ === void 0 ? void 0 : _rawResults$.facets) || {};
+        var facetsToSend = attributes ? Object.fromEntries(Object.entries(rawFacets).filter(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 1),
+            key = _ref2[0];
+          return attributes.includes(key);
+        })) : rawFacets;
+
+        // Collect current refinements to exclude from suggestions
+        var currentRefinements = searchHelper ? getRefinements(results, searchHelper.state).map(function (refinement) {
+          return {
+            attribute: refinement.attribute,
+            value: refinement.name
+          };
+        }) : [];
+        var messageText = JSON.stringify({
+          query: results.query,
+          facets: facetsToSend,
+          hitsSample: results.hits.slice(0, hitsToSample),
+          currentRefinements: currentRefinements,
+          maxSuggestions: maxSuggestions
+        });
+        var payload = {
+          messages: [{
+            id: "sr-".concat(Date.now()),
+            createdAt: new Date().toISOString(),
+            role: 'user',
+            parts: [{
+              type: 'text',
+              text: messageText
+            }]
+          }]
+        };
+
+        // Apply custom body transformation if provided
+        var finalPayload = transport !== null && transport !== void 0 && transport.prepareSendMessagesRequest ? transport.prepareSendMessagesRequest(payload).body : payload;
+        fetch(endpoint, {
+          method: 'POST',
+          headers: _objectSpread2(_objectSpread2({}, headers), {}, {
+            'Content-Type': 'application/json'
+          }),
+          body: JSON.stringify(finalPayload)
+        }).then(function (response) {
+          if (!response.ok) {
+            throw new Error("HTTP error ".concat(response.status));
+          }
+          return response.json();
+        }).then(function (data) {
+          var parsedSuggestions = JSON.parse(data.parts[1].text);
+          var validSuggestions = (Array.isArray(parsedSuggestions) ? parsedSuggestions : []).filter(function (suggestion) {
+            if (!(suggestion !== null && suggestion !== void 0 && suggestion.attribute) || !(suggestion !== null && suggestion !== void 0 && suggestion.value) || !(suggestion !== null && suggestion !== void 0 && suggestion.label)) {
+              return false;
+            }
+            // If attributes filter is specified, only allow suggestions for those attributes
+            if (attributes && !attributes.includes(suggestion.attribute)) {
+              return false;
+            }
+            return true;
+          }).slice(0, maxSuggestions);
+          suggestions = validSuggestions;
+        }).catch(function () {
+          suggestions = [];
+        }).finally(function () {
+          var elapsed = Date.now() - loadingStartTime;
+          var remainingDelay = Math.max(0, MIN_SKELETON_DURATION_MS - elapsed);
+          var finishLoading = function finishLoading() {
+            isLoading = false;
+            renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(renderOptions)), {}, {
+              instantSearchInstance: renderOptions.instantSearchInstance
+            }), false);
+          };
+          if (remainingDelay > 0) {
+            setTimeout(finishLoading, remainingDelay);
+          } else {
+            finishLoading();
+          }
+        });
+      };
+      return {
+        $$type: 'ais.filterSuggestions',
+        init: function init(initOptions) {
+          var instantSearchInstance = initOptions.instantSearchInstance,
+            helper = initOptions.helper;
+          searchHelper = helper;
+          if (transport) {
+            // Use custom transport configuration
+            endpoint = transport.api;
+            headers = transport.headers || {};
+          } else {
+            // Use default Algolia agent endpoint
+            var _getAppIdAndApiKey = getAppIdAndApiKey(instantSearchInstance.client),
+              _getAppIdAndApiKey2 = _slicedToArray(_getAppIdAndApiKey, 2),
+              appId = _getAppIdAndApiKey2[0],
+              apiKey = _getAppIdAndApiKey2[1];
+            if (!appId || !apiKey) {
+              throw new Error(withUsage$u('Could not extract Algolia credentials from the search client.'));
+            }
+            endpoint = "https://".concat(appId, ".algolia.net/agent-studio/1/agents/").concat(agentId, "/completions?compatibilityMode=ai-sdk-5&stream=false");
+            headers = {
+              'x-algolia-application-id': appId,
+              'x-algolia-api-key': apiKey,
+              'x-algolia-agent': getAlgoliaAgent(instantSearchInstance.client)
+            };
+          }
+          refine = function refine(attribute, value) {
+            var _helper$state$hierarc;
+            // Check if the attribute belongs to a hierarchical facet
+            // by finding a hierarchical facet that includes this attribute
+            var attr = ((_helper$state$hierarc = helper.state.hierarchicalFacets.find(function (facet) {
+              return facet.attributes.includes(attribute);
+            })) === null || _helper$state$hierarc === void 0 ? void 0 : _helper$state$hierarc.name) || attribute;
+            helper.toggleFacetRefinement(attr, value);
+            helper.search();
+          };
+          renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(initOptions)), {}, {
+            instantSearchInstance: instantSearchInstance
+          }), true);
+        },
+        render: function render(renderOptions) {
+          var results = renderOptions.results,
+            instantSearchInstance = renderOptions.instantSearchInstance;
+
+          // Always store the latest render options
+          latestRenderOptions = renderOptions;
+          if (!results) {
+            renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(renderOptions)), {}, {
+              instantSearchInstance: instantSearchInstance
+            }), false);
+            return;
+          }
+
+          // Debounce: only fetch if search state changed (query or refinements) and after delay
+          var stateSignature = getStateSignature(results);
+          if (stateSignature !== lastStateSignature) {
+            lastStateSignature = stateSignature;
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(function () {
+              var _latestRenderOptions;
+              // Use the latest render options when the timeout fires
+              if ((_latestRenderOptions = latestRenderOptions) !== null && _latestRenderOptions !== void 0 && _latestRenderOptions.results) {
+                fetchSuggestions(latestRenderOptions.results, latestRenderOptions);
+              }
+            }, debounceMs);
+          }
+          renderFn(_objectSpread2(_objectSpread2({}, _getWidgetRenderState(renderOptions)), {}, {
+            instantSearchInstance: instantSearchInstance
+          }), false);
+        },
+        dispose: function dispose() {
+          clearTimeout(debounceTimer);
+          unmountFn();
+        },
+        getRenderState: function getRenderState(renderState, renderOptions) {
+          return _objectSpread2(_objectSpread2({}, renderState), {}, {
+            filterSuggestions: this.getWidgetRenderState(renderOptions)
+          });
+        },
+        getWidgetRenderState: function getWidgetRenderState(renderOptions) {
+          return _getWidgetRenderState(renderOptions);
+        }
+      };
+    };
+  };
+
   /** @deprecated answers is no longer supported */
   var EXPERIMENTAL_connectAnswers = deprecate(connectAnswers, 'answers is no longer supported');
 
@@ -13960,7 +14204,8 @@
     connectVoiceSearch: connectVoiceSearch,
     connectRelevantSort: connectRelevantSort,
     connectFrequentlyBoughtTogether: connectFrequentlyBoughtTogether,
-    connectLookingSimilar: connectLookingSimilar
+    connectLookingSimilar: connectLookingSimilar,
+    connectFilterSuggestions: connectFilterSuggestions
   });
 
   var NAMESPACE = 'ais';
@@ -15860,7 +16105,7 @@
 
   var _excluded$7 = ["initialSearchParameters"],
     _excluded2$2 = ["initialRecommendParameters"];
-  var withUsage$u = createDocumentationMessageGenerator({
+  var withUsage$v = createDocumentationMessageGenerator({
     name: 'index-widget'
   });
   /**
@@ -15954,7 +16199,7 @@
   }
   var index = function index(widgetParams) {
     if (widgetParams === undefined || widgetParams.indexName === undefined && !widgetParams.EXPERIMENTAL_isolated) {
-      throw new Error(withUsage$u('The `indexName` option is required.'));
+      throw new Error(withUsage$v('The `indexName` option is required.'));
     }
 
     // When isolated=true, we use an empty string as the default indexName.
@@ -16052,7 +16297,7 @@
       addWidgets: function addWidgets(widgets) {
         var _this = this;
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$u('The `addWidgets` method expects an array of widgets.'));
+          throw new Error(withUsage$v('The `addWidgets` method expects an array of widgets.'));
         }
         var flatWidgets = widgets.reduce(function (acc, w) {
           return acc.concat(Array.isArray(w) ? w : [w]);
@@ -16060,7 +16305,7 @@
         if (flatWidgets.some(function (widget) {
           return typeof widget.init !== 'function' && typeof widget.render !== 'function';
         })) {
-          throw new Error(withUsage$u('The widget definition expects a `render` and/or an `init` method.'));
+          throw new Error(withUsage$v('The widget definition expects a `render` and/or an `init` method.'));
         }
         flatWidgets.forEach(function (widget) {
           widget.parent = _this;
@@ -16121,7 +16366,7 @@
       removeWidgets: function removeWidgets(widgets) {
         var _this2 = this;
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$u('The `removeWidgets` method expects an array of widgets.'));
+          throw new Error(withUsage$v('The `removeWidgets` method expects an array of widgets.'));
         }
         var flatWidgets = widgets.reduce(function (acc, w) {
           return acc.concat(Array.isArray(w) ? w : [w]);
@@ -16129,7 +16374,7 @@
         if (flatWidgets.some(function (widget) {
           return typeof widget.dispose !== 'function';
         })) {
-          throw new Error(withUsage$u('The widget definition expects a `dispose` method.'));
+          throw new Error(withUsage$v('The widget definition expects a `dispose` method.'));
         }
         localWidgets = localWidgets.filter(function (widget) {
           return flatWidgets.indexOf(widget) === -1;
@@ -16590,9 +16835,9 @@
     };
   }
 
-  var version$1 = '4.86.1';
+  var version$1 = '4.87.0';
 
-  var withUsage$v = createDocumentationMessageGenerator({
+  var withUsage$w = createDocumentationMessageGenerator({
     name: 'instantsearch'
   });
   function defaultCreateURL() {
@@ -16715,7 +16960,7 @@
         _options$future = options.future,
         future = _options$future === void 0 ? _objectSpread2(_objectSpread2({}, INSTANTSEARCH_FUTURE_DEFAULTS), options.future || {}) : _options$future;
       if (searchClient === null) {
-        throw new Error(withUsage$v('The `searchClient` option is required.'));
+        throw new Error(withUsage$w('The `searchClient` option is required.'));
       }
       if (typeof searchClient.search !== 'function') {
         throw new Error("The `searchClient` must implement a `search` method.\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/going-further/backend-search/in-depth/backend-instantsearch/js/");
@@ -16725,7 +16970,7 @@
       }
        _warning(insightsClient === null, "`insightsClient` property has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `insights` middleware.\n\nFor more information, visit https://www.algolia.com/doc/guides/getting-insights-and-analytics/search-analytics/click-through-and-conversions/how-to/send-click-and-conversion-events-with-instantsearch/js/") ;
       if (insightsClient && typeof insightsClient !== 'function') {
-        throw new Error(withUsage$v('The `insightsClient` option should be a function.'));
+        throw new Error(withUsage$w('The `insightsClient` option should be a function.'));
       }
        _warning(!options.searchParameters, "The `searchParameters` option is deprecated and will not be supported in InstantSearch.js 4.x.\n\nYou can replace it with the `configure` widget:\n\n```\nsearch.addWidgets([\n  configure(".concat(JSON.stringify(options.searchParameters, null, 2), ")\n]);\n```\n\nSee ").concat(createDocumentationLink({
         name: 'configure'
@@ -16889,12 +17134,12 @@
       key: "addWidgets",
       value: function addWidgets(widgets) {
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$v('The `addWidgets` method expects an array of widgets. Please use `addWidget`.'));
+          throw new Error(withUsage$w('The `addWidgets` method expects an array of widgets. Please use `addWidget`.'));
         }
         if (this.compositionID && widgets.some(function (w) {
           return !Array.isArray(w) && isIndexWidget(w) && !w._isolated;
         })) {
-          throw new Error(withUsage$v('The `index` widget cannot be used with a composition-based InstantSearch implementation.'));
+          throw new Error(withUsage$w('The `index` widget cannot be used with a composition-based InstantSearch implementation.'));
         }
         this.mainIndex.addWidgets(widgets);
         return this;
@@ -16924,7 +17169,7 @@
       key: "removeWidgets",
       value: function removeWidgets(widgets) {
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$v('The `removeWidgets` method expects an array of widgets. Please use `removeWidget`.'));
+          throw new Error(withUsage$w('The `removeWidgets` method expects an array of widgets. Please use `removeWidget`.'));
         }
         this.mainIndex.removeWidgets(widgets);
         return this;
@@ -16939,7 +17184,7 @@
       value: function start() {
         var _this3 = this;
         if (this.started) {
-          throw new Error(withUsage$v('The `start` method has already been called once.'));
+          throw new Error(withUsage$w('The `start` method has already been called once.'));
         }
 
         // This Helper is used for the queries, we don't care about its state. The
@@ -17161,7 +17406,7 @@
         var _this5 = this;
         var callOnStateChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         if (!this.mainHelper) {
-          throw new Error(withUsage$v('The `start` method needs to be called before `setUiState`.'));
+          throw new Error(withUsage$w('The `start` method needs to be called before `setUiState`.'));
         }
 
         // We refresh the index UI state to update the local UI state that the
@@ -17197,7 +17442,7 @@
       value: function createURL() {
         var nextState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (!this.started) {
-          throw new Error(withUsage$v('The `start` method needs to be called before `createURL`.'));
+          throw new Error(withUsage$w('The `start` method needs to be called before `createURL`.'));
         }
         return this._createURL(nextState);
       }
@@ -17205,7 +17450,7 @@
       key: "refresh",
       value: function refresh() {
         if (!this.mainHelper) {
-          throw new Error(withUsage$v('The `start` method needs to be called before `refresh`.'));
+          throw new Error(withUsage$w('The `start` method needs to be called before `refresh`.'));
         }
         this.mainHelper.clearCache().search();
       }
@@ -17544,6 +17789,16 @@
 
   var _slicedToArray$1 = unwrapExports(slicedToArray);
 
+  function find$2(array, predicate) {
+    for (var index = 0; index < array.length; index++) {
+      var item = array[index];
+      if (predicate(item, index, array)) {
+        return item;
+      }
+    }
+    return undefined;
+  }
+
   function SubmitIcon(_ref) {
     var createElement = _ref.createElement;
     return createElement("svg", {
@@ -17972,18 +18227,23 @@
       getElementId = _ref5.getElementId;
     var itemsIds = [];
     var items = new Map();
-    for (var i = 0; i < indicesConfig.length; i++) {
+    var _loop = function _loop(i) {
       var _indices$i;
-      var config = indicesConfig[i];
+      var currentIndexConfig = find$2(indicesConfig, function (config) {
+        return config.indexName === indices[i].indexName;
+      });
       var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
       for (var position = 0; position < hits.length; position++) {
-        var itemId = getElementId('item', config.indexName, position);
+        var itemId = getElementId('item', (currentIndexConfig === null || currentIndexConfig === void 0 ? void 0 : currentIndexConfig.indexName) || indices[i].indexName, position);
         items.set(itemId, {
           item: hits[position],
-          config: config
+          config: currentIndexConfig
         });
         itemsIds.push(itemId);
       }
+    };
+    for (var i = 0; i < indices.length; i++) {
+      _loop(i);
     }
     return {
       items: items,
@@ -18044,6 +18304,27 @@
 
   var _toConsumableArray$1 = unwrapExports(toConsumableArray);
 
+  function ownKeys$1(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
   function createAutocompleteStorage(_ref) {
     var useEffect = _ref.useEffect,
       useMemo = _ref.useMemo,
@@ -18052,7 +18333,8 @@
       var showRecent = _ref2.showRecent,
         query = _ref2.query,
         indices = _ref2.indices,
-        indicesConfig = _ref2.indicesConfig;
+        indicesConfig = _ref2.indicesConfig,
+        suggestionsIndexName = _ref2.suggestionsIndexName;
       var storageKey = showRecent && _typeof$1(showRecent) === 'object' ? showRecent.storageKey : undefined;
       var storage = useMemo(function () {
         return createStorage({
@@ -18096,7 +18378,15 @@
           })
         };
       });
-      var indicesForPropGetters = _toConsumableArray$1(indices);
+      var indicesForPropGetters = _toConsumableArray$1(indices.map(function (index) {
+        return index.indexName === suggestionsIndexName ? _objectSpread(_objectSpread({}, index), {}, {
+          hits: index.hits.filter(function (hit) {
+            return !find$2(storageHits, function (storageHit) {
+              return storageHit.query === hit.query;
+            });
+          })
+        }) : index;
+      }));
       var indicesConfigForPropGetters = _toConsumableArray$1(indicesConfig);
       indicesForPropGetters.unshift({
         indexName: 'recent-searches',
@@ -18208,6 +18498,26 @@
     };
   }
 
+  var _excluded$c = ["variant", "size", "iconOnly", "className", "children"];
+  function createButtonComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function Button(userProps) {
+      var _userProps$variant = userProps.variant,
+        variant = _userProps$variant === void 0 ? 'primary' : _userProps$variant,
+        _userProps$size = userProps.size,
+        size = _userProps$size === void 0 ? 'md' : _userProps$size,
+        _userProps$iconOnly = userProps.iconOnly,
+        iconOnly = _userProps$iconOnly === void 0 ? false : _userProps$iconOnly,
+        className = userProps.className,
+        children = userProps.children,
+        props = _objectWithoutProperties$1(userProps, _excluded$c);
+      return createElement("button", _extends$1({
+        type: "button",
+        className: cx('ais-Button', "ais-Button--".concat(variant), "ais-Button--".concat(size), iconOnly && 'ais-Button--icon-only', className)
+      }, props), children);
+    };
+  }
+
   function createDefaultEmptyComponent(_ref) {
     var createElement = _ref.createElement,
       Fragment = _ref.Fragment;
@@ -18273,8 +18583,8 @@
     };
   }
 
-  var _excluded$c = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "canScrollLeft", "canScrollRight", "setCanScrollLeft", "setCanScrollRight", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "headerComponent", "showNavigation", "items", "translations", "sendEvent"];
-  function ownKeys$1(e, r) {
+  var _excluded$d = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "canScrollLeft", "canScrollRight", "setCanScrollLeft", "setCanScrollRight", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "headerComponent", "showNavigation", "items", "translations", "sendEvent"];
+  function ownKeys$2(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -18284,12 +18594,12 @@
     }
     return t;
   }
-  function _objectSpread(e) {
+  function _objectSpread$1(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) {
         _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -18356,8 +18666,8 @@
         items = userProps.items,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$1(userProps, _excluded$c);
-      var translations = _objectSpread({
+        props = _objectWithoutProperties$1(userProps, _excluded$d);
+      var translations = _objectSpread$1({
         listLabel: 'Items',
         nextButtonLabel: 'Next',
         nextButtonTitle: 'Next',
@@ -18470,8 +18780,27 @@
     };
   }
 
-  var _excluded$d = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$2(e, r) {
+  function SparklesIcon(_ref) {
+    var createElement = _ref.createElement;
+    return createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20"
+    }, createElement("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M10 1.875c.27 0 .51.173.594.43l1.593 4.844a1.043 1.043 0 0 0 .664.664l4.844 1.593a.625.625 0 0 1 0 1.188l-4.844 1.593a1.043 1.043 0 0 0-.664.664l-1.593 4.844a.625.625 0 0 1-1.188 0l-1.593-4.844a1.042 1.042 0 0 0-.664-.664l-4.844-1.593a.625.625 0 0 1 0-1.188l4.844-1.593a1.042 1.042 0 0 0 .664-.664l1.593-4.844a.625.625 0 0 1 .594-.43ZM9 7.539A2.292 2.292 0 0 1 7.54 9L4.5 10l3.04 1A2.292 2.292 0 0 1 9 12.46l1 3.04 1-3.04A2.293 2.293 0 0 1 12.46 11l3.04-1-3.04-1A2.292 2.292 0 0 1 11 7.54L10 4.5 9 7.54ZM4.167 1.875c.345 0 .625.28.625.625v3.333a.625.625 0 0 1-1.25 0V2.5c0-.345.28-.625.625-.625ZM15.833 13.542c.345 0 .625.28.625.625V17.5a.625.625 0 1 1-1.25 0v-3.333c0-.345.28-.625.625-.625Z",
+      clipRule: "evenodd"
+    }), createElement("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M1.875 4.167c0-.346.28-.625.625-.625h3.333a.625.625 0 1 1 0 1.25H2.5a.625.625 0 0 1-.625-.625ZM13.542 15.833c0-.345.28-.625.625-.625H17.5a.625.625 0 0 1 0 1.25h-3.333a.625.625 0 0 1-.625-.625Z",
+      clipRule: "evenodd"
+    }));
+  }
+
+  var _excluded$e = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$3(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -18481,12 +18810,12 @@
     }
     return t;
   }
-  function _objectSpread$1(e) {
+  function _objectSpread$2(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) {
         _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -18522,8 +18851,8 @@
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$1(userProps, _excluded$d);
-      var translations = _objectSpread$1({
+        props = _objectWithoutProperties$1(userProps, _excluded$e);
+      var translations = _objectSpread$2({
         title: 'Frequently bought together',
         sliderLabel: 'Frequently bought together products'
       }, userTranslations);
@@ -18555,7 +18884,7 @@
     };
   }
 
-  var _excluded$e = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
+  var _excluded$f = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
   function createHighlightPartComponent(_ref) {
     var createElement = _ref.createElement;
     return function HighlightPart(_ref2) {
@@ -18588,7 +18917,7 @@
         className = userProps.className,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
-        props = _objectWithoutProperties$1(userProps, _excluded$e);
+        props = _objectWithoutProperties$1(userProps, _excluded$f);
       return createElement("span", _extends$1({}, props, {
         className: cx(classNames.root, className)
       }), parts.map(function (part, partIndex) {
@@ -18610,7 +18939,7 @@
     };
   }
 
-  var _excluded$f = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
+  var _excluded$g = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 
   // Should be imported from a shared package in the future
 
@@ -18655,7 +18984,7 @@
         EmptyComponent = userProps.emptyComponent,
         banner = userProps.banner,
         BannerComponent = userProps.bannerComponent,
-        props = _objectWithoutProperties$1(userProps, _excluded$f);
+        props = _objectWithoutProperties$1(userProps, _excluded$g);
       return createElement("div", _extends$1({}, props, {
         className: cx('ais-Hits', classNames.root, hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot), props.className)
       }), banner && (BannerComponent ? createElement(BannerComponent, {
@@ -18683,8 +19012,8 @@
     };
   }
 
-  var _excluded$g = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$3(e, r) {
+  var _excluded$h = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$4(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -18694,12 +19023,12 @@
     }
     return t;
   }
-  function _objectSpread$2(e) {
+  function _objectSpread$3(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) {
         _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -18735,8 +19064,8 @@
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$1(userProps, _excluded$g);
-      var translations = _objectSpread$2({
+        props = _objectWithoutProperties$1(userProps, _excluded$h);
+      var translations = _objectSpread$3({
         title: 'Looking similar',
         sliderLabel: 'Looking similar'
       }, userTranslations);
@@ -18768,8 +19097,8 @@
     };
   }
 
-  var _excluded$h = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$4(e, r) {
+  var _excluded$i = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$5(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -18779,12 +19108,12 @@
     }
     return t;
   }
-  function _objectSpread$3(e) {
+  function _objectSpread$4(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) {
         _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -18820,8 +19149,8 @@
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$1(userProps, _excluded$h);
-      var translations = _objectSpread$3({
+        props = _objectWithoutProperties$1(userProps, _excluded$i);
+      var translations = _objectSpread$4({
         title: 'Related products',
         sliderLabel: 'Related products'
       }, userTranslations);
@@ -18853,8 +19182,8 @@
     };
   }
 
-  var _excluded$i = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$5(e, r) {
+  var _excluded$j = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$6(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -18864,12 +19193,12 @@
     }
     return t;
   }
-  function _objectSpread$4(e) {
+  function _objectSpread$5(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) {
         _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -18905,8 +19234,8 @@
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$1(userProps, _excluded$i);
-      var translations = _objectSpread$4({
+        props = _objectWithoutProperties$1(userProps, _excluded$j);
+      var translations = _objectSpread$5({
         title: 'Trending items',
         sliderLabel: 'Trending items'
       }, userTranslations);
@@ -18938,6 +19267,102 @@
     };
   }
 
+  var _excluded$k = ["classNames", "suggestions", "isLoading", "refine", "skeletonCount", "itemComponent", "headerComponent", "emptyComponent"];
+  function createFilterSuggestionsComponent(_ref) {
+    var createElement = _ref.createElement;
+    var Button = createButtonComponent({
+      createElement: createElement
+    });
+    function DefaultHeader(_ref2) {
+      var classNames = _ref2.classNames;
+      return createElement("div", {
+        className: cx('ais-FilterSuggestions-header', classNames.header)
+      }, createElement("span", {
+        className: cx('ais-FilterSuggestions-headerIcon', classNames.headerIcon)
+      }, createElement(SparklesIcon, {
+        createElement: createElement
+      })), createElement("span", {
+        className: cx('ais-FilterSuggestions-headerTitle', classNames.headerTitle)
+      }, "Filter suggestions"));
+    }
+    function DefaultItem(_ref3) {
+      var suggestion = _ref3.suggestion,
+        classNames = _ref3.classNames,
+        refine = _ref3.refine;
+      return createElement(Button, {
+        variant: "outline",
+        size: "sm",
+        className: cx(classNames.button),
+        onClick: refine
+      }, createElement("span", {
+        className: cx('ais-FilterSuggestions-label', classNames.label)
+      }, suggestion.label, ": ", suggestion.value), createElement("span", {
+        className: cx('ais-FilterSuggestions-count', classNames.count)
+      }, suggestion.count));
+    }
+    return function FilterSuggestions(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        suggestions = userProps.suggestions,
+        isLoading = userProps.isLoading,
+        _refine = userProps.refine,
+        _userProps$skeletonCo = userProps.skeletonCount,
+        skeletonCount = _userProps$skeletonCo === void 0 ? 3 : _userProps$skeletonCo,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? DefaultItem : _userProps$itemCompon,
+        headerComponent = userProps.headerComponent,
+        EmptyComponent = userProps.emptyComponent,
+        props = _objectWithoutProperties$1(userProps, _excluded$k);
+      var HeaderComponent = headerComponent === false ? null : headerComponent !== null && headerComponent !== void 0 ? headerComponent : DefaultHeader;
+      var isEmpty = suggestions.length === 0;
+      if (isEmpty && !isLoading) {
+        return createElement("div", _extends$1({}, props, {
+          className: cx('ais-FilterSuggestions', classNames.root, 'ais-FilterSuggestions--empty', classNames.emptyRoot, props.className)
+        }), EmptyComponent && createElement(EmptyComponent, {
+          classNames: {
+            emptyRoot: classNames.emptyRoot
+          }
+        }));
+      }
+      var headerClassNames = {
+        header: classNames.header,
+        headerIcon: classNames.headerIcon,
+        headerTitle: classNames.headerTitle
+      };
+      var itemClassNames = {
+        item: classNames.item,
+        button: classNames.button,
+        label: classNames.label,
+        count: classNames.count
+      };
+      return createElement("div", _extends$1({}, props, {
+        className: cx('ais-FilterSuggestions', classNames.root, isLoading && cx('ais-FilterSuggestions--loading', classNames.loadingRoot), props.className)
+      }), HeaderComponent && createElement(HeaderComponent, {
+        classNames: headerClassNames
+      }), isLoading ? createElement("div", {
+        className: cx('ais-FilterSuggestions-skeleton', classNames.skeleton)
+      }, _toConsumableArray$1(new Array(skeletonCount)).map(function (_, i) {
+        return createElement("div", {
+          key: i,
+          className: cx('ais-FilterSuggestions-skeletonItem', classNames.skeletonItem)
+        });
+      })) : createElement("ul", {
+        className: cx('ais-FilterSuggestions-list', classNames.list)
+      }, suggestions.map(function (suggestion) {
+        return createElement("li", {
+          key: "".concat(suggestion.attribute, "-").concat(suggestion.value),
+          className: cx('ais-FilterSuggestions-item', classNames.item)
+        }, createElement(ItemComponent, {
+          suggestion: suggestion,
+          classNames: itemClassNames,
+          refine: function refine() {
+            return _refine(suggestion.attribute, suggestion.value);
+          }
+        }));
+      })));
+    };
+  }
+
   var r$1,u$1,i,o$1,f$1=0,c$1=[],e$2=[],a$1=l.__b,v$1=l.__r,l$1=l.diffed,m$2=l.__c,d$1=l.unmount;function p$1(t,r){l.__h&&l.__h(u$1,t,f$1||r),f$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:e$2}),i.__[t]}function y$1(n){return f$1=1,h$1(C$1,n)}function h$1(n,t,i){var o=p$1(r$1++,2);if(o.t=n,!o.__c&&(o.__=[i?i(t):C$1(void 0,t),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=u$1,!u$1.u)){u$1.u=!0;var f=u$1.shouldComponentUpdate;u$1.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!!i&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function s$1(t,i){var o=p$1(r$1++,3);!l.__s&&B(o.__H,i)&&(o.__=t,o.i=i,u$1.__H.__h.push(o));}function A$1(n){return f$1=5,T$1(function(){return {current:n}},[])}function T$1(n,t){var u=p$1(r$1++,7);return B(u.__H,t)?(u.__V=n(),u.i=t,u.__h=n,u.__V):u.__}function b$1(){var n=p$1(r$1++,11);return n.__||(n.__="P"+function(n){for(var t=0,r=n.length;r>0;)t=(t<<5)-t+n.charCodeAt(--r)|0;return t}(u$1.__v.o)+r$1),n.__}function g$1(){for(var t;t=c$1.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(w$1),t.__H.__h.forEach(z$1),t.__H.__h=[];}catch(r){t.__H.__h=[],l.__e(r,t.__v);}}l.__b=function(n){"function"!=typeof n.type||n.o||n.type===p?n.o||(n.o=n.__&&n.__.o?n.__.o:""):n.o=(n.__&&n.__.o?n.__.o:"")+(n.__&&n.__.__k?n.__.__k.indexOf(n):0),u$1=null,a$1&&a$1(n);},l.__r=function(n){v$1&&v$1(n),r$1=0;var t=(u$1=n.__c).__H;t&&(i===u$1?(t.__h=[],u$1.__h=[],t.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=e$2,n.__N=n.i=void 0;})):(t.__h.forEach(w$1),t.__h.forEach(z$1),t.__h=[])),i=u$1;},l.diffed=function(t){l$1&&l$1(t);var r=t.__c;r&&r.__H&&(r.__H.__h.length&&(1!==c$1.push(r)&&o$1===l.requestAnimationFrame||((o$1=l.requestAnimationFrame)||k$1)(g$1)),r.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==e$2&&(n.__=n.__V),n.i=void 0,n.__V=e$2;})),i=u$1=null;},l.__c=function(t,r){r.some(function(t){try{t.__h.forEach(w$1),t.__h=t.__h.filter(function(n){return !n.__||z$1(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l.__e(u,t.__v);}}),m$2&&m$2(t,r);},l.unmount=function(t){d$1&&d$1(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{w$1(n);}catch(n){r=n;}}),u.__H=void 0,r&&l.__e(r,u.__v));};var j$1="function"==typeof requestAnimationFrame;function k$1(n){var t,r=function(){clearTimeout(u),j$1&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);j$1&&(t=requestAnimationFrame(r));}function w$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function z$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function B(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function C$1(n,t){return "function"==typeof t?t(n):t}
 
   var Carousel = createCarouselComponent({
@@ -19829,11 +20254,11 @@
     Fragment: p
   });
 
-  var _excluded$j = ["classNames"];
+  var _excluded$l = ["classNames"];
   function Highlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$l);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Highlight', classNames.root),
@@ -19844,12 +20269,12 @@
     }, props));
   }
 
-  var _excluded$k = ["hit", "attribute", "cssClasses"];
+  var _excluded$m = ["hit", "attribute", "cssClasses"];
   function Highlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$m);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable highlight for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -19863,11 +20288,11 @@
     }));
   }
 
-  var _excluded$l = ["classNames"];
+  var _excluded$n = ["classNames"];
   function ReverseHighlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$n);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseHighlight', classNames.root),
@@ -19878,13 +20303,13 @@
     }, props));
   }
 
-  var _excluded$m = ["hit", "attribute", "cssClasses"],
+  var _excluded$o = ["hit", "attribute", "cssClasses"],
     _excluded2$3 = ["isHighlighted"];
   function ReverseHighlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$o);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable highlight for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -19904,11 +20329,11 @@
     }));
   }
 
-  var _excluded$n = ["classNames"];
+  var _excluded$p = ["classNames"];
   function ReverseSnippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$p);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseSnippet', classNames.root),
@@ -19919,13 +20344,13 @@
     }, props));
   }
 
-  var _excluded$o = ["hit", "attribute", "cssClasses"],
+  var _excluded$q = ["hit", "attribute", "cssClasses"],
     _excluded2$4 = ["isHighlighted"];
   function ReverseSnippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$q);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable snippet for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -19945,11 +20370,11 @@
     }));
   }
 
-  var _excluded$p = ["classNames"];
+  var _excluded$r = ["classNames"];
   function Snippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$r);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Snippet', classNames.root),
@@ -19960,12 +20385,12 @@
     }, props));
   }
 
-  var _excluded$q = ["hit", "attribute", "cssClasses"];
+  var _excluded$s = ["hit", "attribute", "cssClasses"];
   function Snippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$s);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable snippet for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -20209,7 +20634,7 @@
     }
   };
 
-  var withUsage$w = createDocumentationMessageGenerator({
+  var withUsage$x = createDocumentationMessageGenerator({
     name: 'answers'
   });
   var suit$4 = component('Answers');
@@ -20256,7 +20681,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$w('The `container` option is required.'));
+      throw new Error(withUsage$x('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -20307,8 +20732,8 @@
     });
   };
 
-  var _excluded$r = ["container", "widgets", "fallbackWidget"];
-  var withUsage$x = createDocumentationMessageGenerator({
+  var _excluded$t = ["container", "widgets", "fallbackWidget"];
+  var withUsage$y = createDocumentationMessageGenerator({
     name: 'dynamic-widgets'
   });
   var suit$5 = component('DynamicWidgets');
@@ -20325,14 +20750,14 @@
       containerSelector = _ref.container,
       widgets = _ref.widgets,
       fallbackWidget = _ref.fallbackWidget,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$r);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$t);
     if (!containerSelector) {
-      throw new Error(withUsage$x('The `container` option is required.'));
+      throw new Error(withUsage$y('The `container` option is required.'));
     }
     if (!(widgets && Array.isArray(widgets) && widgets.every(function (widget) {
       return typeof widget === 'function';
     }))) {
-      throw new Error(withUsage$x('The `widgets` option expects an array of callbacks.'));
+      throw new Error(withUsage$y('The `widgets` option expects an array of callbacks.'));
     }
     var userContainer = getContainerNode(containerSelector);
     var rootContainer = document.createElement('div');
@@ -20381,7 +20806,7 @@
     });
   };
 
-  var withUsage$y = createDocumentationMessageGenerator({
+  var withUsage$z = createDocumentationMessageGenerator({
     name: 'analytics'
   });
   // @major this widget will be removed from the next major version.
@@ -20397,7 +20822,7 @@
       _ref$pushPagination = _ref.pushPagination,
       pushPagination = _ref$pushPagination === void 0 ? false : _ref$pushPagination;
     if (!pushFunction) {
-      throw new Error(withUsage$y('The `pushFunction` option is required.'));
+      throw new Error(withUsage$z('The `pushFunction` option is required.'));
     }
      _warning(false, "`analytics` widget has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `insights` middleware.\n\nFor the migration, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#analytics-widget") ;
     var cachedState = null;
@@ -20547,9 +20972,9 @@
     });
   };
 
-  var _excluded$s = ["instanceId", "containerNode"];
+  var _excluded$u = ["instanceId", "containerNode"];
   var autocompleteInstanceId = 0;
-  var withUsage$z = createDocumentationMessageGenerator({
+  var withUsage$A = createDocumentationMessageGenerator({
     name: 'autocomplete'
   });
   var suit$6 = component('Autocomplete');
@@ -20592,7 +21017,7 @@
   var createRenderer = function createRenderer(params) {
     var instanceId = params.instanceId,
       containerNode = params.containerNode,
-      rendererParams = _objectWithoutProperties(params, _excluded$s);
+      rendererParams = _objectWithoutProperties(params, _excluded$u);
     return function (connectorParams, isFirstRendering) {
       if (isFirstRendering) {
         var _targetIndex$getHelpe, _targetIndex$getHelpe2;
@@ -20694,7 +21119,8 @@
         query: searchboxQuery,
         showRecent: showRecent,
         indices: indices,
-        indicesConfig: indicesConfig
+        indicesConfig: indicesConfig,
+        suggestionsIndexName: showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName
       }),
       storage = _useStorage.storage,
       storageHits = _useStorage.storageHits,
@@ -20778,18 +21204,24 @@
       });
     }
     indices.forEach(function (_ref8, i) {
-      var _indicesConfig$i$temp;
+      var _currentIndexConfig$t;
       var indexId = _ref8.indexId,
         indexName = _ref8.indexName,
         hits = _ref8.hits;
+      var currentIndexConfig = find(indicesConfig, function (config) {
+        return config.indexName === indexName;
+      });
+      if (!currentIndexConfig) {
+        return;
+      }
       if (!renderState.indexTemplateProps[i]) {
         renderState.indexTemplateProps[i] = prepareTemplateProps({
           defaultTemplates: {},
           templatesConfig: instantSearchInstance.templatesConfig,
-          templates: indicesConfig[i].templates
+          templates: currentIndexConfig.templates
         });
       }
-      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref9) {
+      var headerComponent = (_currentIndexConfig$t = currentIndexConfig.templates) !== null && _currentIndexConfig$t !== void 0 && _currentIndexConfig$t.header ? function (_ref9) {
         var items = _ref9.items;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "header",
@@ -20829,7 +21261,7 @@
           });
         }),
         getItemProps: getItemProps,
-        classNames: indicesConfig[i].cssClasses
+        classNames: currentIndexConfig.cssClasses
       });
     });
     return h(Autocomplete, _extends({}, getRootProps(), {
@@ -20869,11 +21301,12 @@
       onSelect = _ref1.onSelect,
       _ref1$templates = _ref1.templates,
       templates = _ref1$templates === void 0 ? {} : _ref1$templates,
+      transformItems = _ref1.transformItems,
       _ref1$cssClasses = _ref1.cssClasses,
       userCssClasses = _ref1$cssClasses === void 0 ? {} : _ref1$cssClasses,
       placeholder = _ref1.placeholder;
     if (!container) {
-      throw new Error(withUsage$z('The `container` option is required.'));
+      throw new Error(withUsage$A('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var searchParameters = _objectSpread2({
@@ -20953,7 +21386,8 @@
         indexId: indexName
       }).addWidgets([configure(indexSearchParameters || {})]);
     })), [_objectSpread2(_objectSpread2({}, makeWidget({
-      escapeHTML: escapeHTML
+      escapeHTML: escapeHTML,
+      transformItems: transformItems
     })), {}, {
       $$widgetType: 'ais.autocomplete'
     })]))];
@@ -21033,7 +21467,7 @@
     }
   };
 
-  var withUsage$A = createDocumentationMessageGenerator({
+  var withUsage$B = createDocumentationMessageGenerator({
     name: 'breadcrumb'
   });
   var suit$7 = component('Breadcrumb');
@@ -21078,7 +21512,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$A('The `container` option is required.'));
+      throw new Error(withUsage$B('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -21149,7 +21583,7 @@
     }
   };
 
-  var withUsage$B = createDocumentationMessageGenerator({
+  var withUsage$C = createDocumentationMessageGenerator({
     name: 'clear-refinements'
   });
   var suit$8 = component('ClearRefinements');
@@ -21189,7 +21623,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$B('The `container` option is required.'));
+      throw new Error(withUsage$C('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -21267,7 +21701,7 @@
     })));
   };
 
-  var withUsage$C = createDocumentationMessageGenerator({
+  var withUsage$D = createDocumentationMessageGenerator({
     name: 'current-refinements'
   });
   var suit$9 = component('CurrentRefinements');
@@ -21296,7 +21730,7 @@
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$C('The `container` option is required.'));
+      throw new Error(withUsage$D('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -21726,10 +22160,10 @@
     }), container.querySelector(".".concat(cssClasses.tree)));
   };
 
-  var _excluded$t = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
+  var _excluded$v = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
     _excluded2$5 = ["item"],
     _excluded3 = ["item"];
-  var withUsage$D = createDocumentationMessageGenerator({
+  var withUsage$E = createDocumentationMessageGenerator({
     name: 'geo-search'
   });
   var suit$a = component('GeoSearch');
@@ -21770,7 +22204,7 @@
       enableRefineControl = _ref$enableRefineCont === void 0 ? true : _ref$enableRefineCont,
       container = _ref.container,
       googleReference = _ref.googleReference,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$t);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$v);
     var defaultBuiltInMarker = {
       createOptions: function createOptions() {
         return {};
@@ -21784,10 +22218,10 @@
       events: {}
     };
     if (!container) {
-      throw new Error(withUsage$D('The `container` option is required.'));
+      throw new Error(withUsage$E('The `container` option is required.'));
     }
     if (!googleReference) {
-      throw new Error(withUsage$D('The `googleReference` option is required.'));
+      throw new Error(withUsage$E('The `googleReference` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22120,7 +22554,7 @@
     })), subItems);
   }
 
-  var _excluded$u = ["root"];
+  var _excluded$w = ["root"];
 
   // CSS types
 
@@ -22149,7 +22583,7 @@
         if (isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) {
           var _this$props$cssClasse = _this.props.cssClasses,
             root = _this$props$cssClasse.root,
-            cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$u);
+            cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$w);
           subItems = h(RefinementList, _extends({}, _this.props, {
             // We want to keep `root` required for external usage but not for the
             // sub items.
@@ -22364,7 +22798,7 @@
     }
   };
 
-  var withUsage$E = createDocumentationMessageGenerator({
+  var withUsage$F = createDocumentationMessageGenerator({
     name: 'hierarchical-menu'
   });
   var suit$b = component('HierarchicalMenu');
@@ -22474,7 +22908,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$E('The `container` option is required.'));
+      throw new Error(withUsage$F('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22558,8 +22992,8 @@
     }
   };
 
-  var _excluded$v = ["hit", "index"];
-  var withUsage$F = createDocumentationMessageGenerator({
+  var _excluded$x = ["hit", "index"];
+  var withUsage$G = createDocumentationMessageGenerator({
     name: 'hits'
   });
   var Hits = createHitsComponent({
@@ -22606,7 +23040,7 @@
       var itemComponent = function itemComponent(_ref4) {
         var hit = _ref4.hit,
           index = _ref4.index,
-          rootProps = _objectWithoutProperties(_ref4, _excluded$v);
+          rootProps = _objectWithoutProperties(_ref4, _excluded$x);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "li",
@@ -22658,7 +23092,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$F('The `container` option is required.'));
+      throw new Error(withUsage$G('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = renderer$6({
@@ -22700,7 +23134,7 @@
     }));
   }
 
-  var withUsage$G = createDocumentationMessageGenerator({
+  var withUsage$H = createDocumentationMessageGenerator({
     name: 'hits-per-page'
   });
   var suit$c = component('HitsPerPage');
@@ -22736,7 +23170,7 @@
       userCssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses,
       transformItems = _ref5.transformItems;
     if (!container) {
-      throw new Error(withUsage$G('The `container` option is required.'));
+      throw new Error(withUsage$H('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22896,7 +23330,7 @@
     }
   };
 
-  var withUsage$H = createDocumentationMessageGenerator({
+  var withUsage$I = createDocumentationMessageGenerator({
     name: 'infinite-hits'
   });
   var suit$d = component('InfiniteHits');
@@ -22955,7 +23389,7 @@
       showPrevious = _ref3.showPrevious,
       cache = _ref3.cache;
     if (!container) {
-      throw new Error(withUsage$H('The `container` option is required.'));
+      throw new Error(withUsage$I('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -23034,7 +23468,7 @@
     }
   };
 
-  var withUsage$I = createDocumentationMessageGenerator({
+  var withUsage$J = createDocumentationMessageGenerator({
     name: 'menu'
   });
   var suit$e = component('Menu');
@@ -23092,7 +23526,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$I('The `container` option is required.'));
+      throw new Error(withUsage$J('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -23200,7 +23634,7 @@
     }
   };
 
-  var withUsage$J = createDocumentationMessageGenerator({
+  var withUsage$K = createDocumentationMessageGenerator({
     name: 'menu-select'
   });
   var suit$f = component('MenuSelect');
@@ -23243,7 +23677,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$J('The `container` option is required.'));
+      throw new Error(withUsage$K('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -23296,7 +23730,7 @@
     }
   };
 
-  var withUsage$K = createDocumentationMessageGenerator({
+  var withUsage$L = createDocumentationMessageGenerator({
     name: 'numeric-menu'
   });
   var suit$g = component('NumericMenu');
@@ -23340,7 +23774,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$K('The `container` option is required.'));
+      throw new Error(withUsage$L('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -23501,7 +23935,7 @@
   }
 
   var suit$h = component('Pagination');
-  var withUsage$L = createDocumentationMessageGenerator({
+  var withUsage$M = createDocumentationMessageGenerator({
     name: 'pagination'
   });
   var defaultTemplates$a = {
@@ -23583,7 +24017,7 @@
       _ref4$scrollTo = _ref4.scrollTo,
       userScrollTo = _ref4$scrollTo === void 0 ? 'body' : _ref4$scrollTo;
     if (!container) {
-      throw new Error(withUsage$L('The `container` option is required.'));
+      throw new Error(withUsage$M('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var scrollTo = userScrollTo === true ? 'body' : userScrollTo;
@@ -23716,7 +24150,7 @@
     }));
   }
 
-  var withUsage$M = createDocumentationMessageGenerator({
+  var withUsage$N = createDocumentationMessageGenerator({
     name: 'panel'
   });
   var suit$i = component('Panel');
@@ -23793,7 +24227,7 @@
     return function (widgetFactory) {
       return function (widgetParams) {
         if (!(widgetParams && widgetParams.container)) {
-          throw new Error(withUsage$M("The `container` option is required in the widget within the panel."));
+          throw new Error(withUsage$N("The `container` option is required in the widget within the panel."));
         }
         var containerNode = getContainerNode(widgetParams.container);
         var defaultTemplates = {
@@ -23867,7 +24301,7 @@
     };
   };
 
-  var _excluded$w = ["placesReference", "defaultPosition"],
+  var _excluded$y = ["placesReference", "defaultPosition"],
     _excluded2$6 = ["places"];
 
   /* Places.js is an optional dependency, no error should be reported if the package is missing */
@@ -23885,7 +24319,7 @@
       placesReference = _ref.placesReference,
       _ref$defaultPosition = _ref.defaultPosition,
       defaultPosition = _ref$defaultPosition === void 0 ? [] : _ref$defaultPosition,
-      placesOptions = _objectWithoutProperties(_ref, _excluded$w);
+      placesOptions = _objectWithoutProperties(_ref, _excluded$y);
     if (typeof placesReference !== 'function') {
       throw new Error('The `placesReference` option requires a valid Places.js reference.');
     }
@@ -23998,7 +24432,7 @@
   };
 
   var suit$j = component('PoweredBy');
-  var withUsage$N = createDocumentationMessageGenerator({
+  var withUsage$O = createDocumentationMessageGenerator({
     name: 'powered-by'
   });
   var renderer$e = function renderer(_ref) {
@@ -24027,7 +24461,7 @@
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? 'light' : _ref3$theme;
     if (!container) {
-      throw new Error(withUsage$N('The `container` option is required.'));
+      throw new Error(withUsage$O('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -24055,13 +24489,13 @@
     });
   };
 
-  var withUsage$O = createDocumentationMessageGenerator({
+  var withUsage$P = createDocumentationMessageGenerator({
     name: 'query-rule-context'
   });
   var queryRuleContext = function queryRuleContext() {
     var widgetParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (!widgetParams.trackedFilters) {
-      throw new Error(withUsage$O('The `trackedFilters` option is required.'));
+      throw new Error(withUsage$P('The `trackedFilters` option is required.'));
     }
     return _objectSpread2(_objectSpread2({}, connectQueryRules(noop)(widgetParams)), {}, {
       $$widgetType: 'ais.queryRuleContext'
@@ -24090,7 +24524,7 @@
       return JSON.stringify(items, null, 2);
     }
   };
-  var withUsage$P = createDocumentationMessageGenerator({
+  var withUsage$Q = createDocumentationMessageGenerator({
     name: 'query-rule-custom-data'
   });
   var suit$k = component('QueryRuleCustomData');
@@ -24119,7 +24553,7 @@
         return items;
       } : _ref4$transformItems;
     if (!container) {
-      throw new Error(withUsage$P('The `container` option is required.'));
+      throw new Error(withUsage$Q('The `container` option is required.'));
     }
     var cssClasses = {
       root: cx(suit$k(), userCssClasses.root)
@@ -24142,8 +24576,8 @@
     });
   };
 
-  var _excluded$x = ["item", "sendEvent"];
-  var withUsage$Q = createDocumentationMessageGenerator({
+  var _excluded$z = ["item", "sendEvent"];
+  var withUsage$R = createDocumentationMessageGenerator({
     name: 'related-products'
   });
   var RelatedProducts = createRelatedProductsComponent({
@@ -24181,7 +24615,7 @@
       var itemComponent = templates.item ? function (_ref3) {
         var item = _ref3.item,
           _sendEvent = _ref3.sendEvent,
-          rootProps = _objectWithoutProperties(_ref3, _excluded$x);
+          rootProps = _objectWithoutProperties(_ref3, _excluded$z);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -24250,7 +24684,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$Q('The `container` option is required.'));
+      throw new Error(withUsage$R('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = createRenderer$1({
@@ -24385,7 +24819,7 @@
     return RangeInput;
   }(d);
 
-  var withUsage$R = createDocumentationMessageGenerator({
+  var withUsage$S = createDocumentationMessageGenerator({
     name: 'range-input'
   });
   var suit$l = component('RangeInput');
@@ -24450,7 +24884,7 @@
       _ref3$templates = _ref3.templates,
       templates = _ref3$templates === void 0 ? {} : _ref3$templates;
     if (!container) {
-      throw new Error(withUsage$R('The `container` option is required.'));
+      throw new Error(withUsage$S('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -25173,7 +25607,7 @@
     return Slider;
   }(d);
 
-  var withUsage$S = createDocumentationMessageGenerator({
+  var withUsage$T = createDocumentationMessageGenerator({
     name: 'range-slider'
   });
   var suit$m = component('RangeSlider');
@@ -25242,7 +25676,7 @@
       _ref3$tooltips = _ref3.tooltips,
       tooltips = _ref3$tooltips === void 0 ? true : _ref3$tooltips;
     if (!container) {
-      throw new Error(withUsage$S('The `container` option is required.'));
+      throw new Error(withUsage$T('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -25322,7 +25756,7 @@
     }
   };
 
-  var withUsage$T = createDocumentationMessageGenerator({
+  var withUsage$U = createDocumentationMessageGenerator({
     name: 'rating-menu'
   });
   var suit$n = component('RatingMenu');
@@ -25410,7 +25844,7 @@
       _ref5$templates = _ref5.templates,
       templates = _ref5$templates === void 0 ? {} : _ref5$templates;
     if (!container) {
-      throw new Error(withUsage$T('The `container` option is required.'));
+      throw new Error(withUsage$U('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -25570,7 +26004,7 @@
     }
   };
 
-  var withUsage$U = createDocumentationMessageGenerator({
+  var withUsage$V = createDocumentationMessageGenerator({
     name: 'refinement-list'
   });
   var suit$o = component('RefinementList');
@@ -25674,7 +26108,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$U('The `container` option is required.'));
+      throw new Error(withUsage$V('The `container` option is required.'));
     }
     var escapeFacetValues = searchable ? Boolean(searchableEscapeFacetValues) : false;
     var containerNode = getContainerNode(container);
@@ -25826,7 +26260,7 @@
     }
   };
 
-  var withUsage$V = createDocumentationMessageGenerator({
+  var withUsage$W = createDocumentationMessageGenerator({
     name: 'relevant-sort'
   });
   var suit$p = component('RelevantSort');
@@ -25854,7 +26288,7 @@
       _widgetParams$cssClas = widgetParams.cssClasses,
       userCssClasses = _widgetParams$cssClas === void 0 ? {} : _widgetParams$cssClas;
     if (!container) {
-      throw new Error(withUsage$V('The `container` option is required.'));
+      throw new Error(withUsage$W('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -25881,7 +26315,7 @@
     });
   };
 
-  var withUsage$W = createDocumentationMessageGenerator({
+  var withUsage$X = createDocumentationMessageGenerator({
     name: 'search-box'
   });
   var suit$q = component('SearchBox');
@@ -25949,7 +26383,7 @@
       _ref3$templates = _ref3.templates,
       userTemplates = _ref3$templates === void 0 ? {} : _ref3$templates;
     if (!container) {
-      throw new Error(withUsage$W('The `container` option is required.'));
+      throw new Error(withUsage$X('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -26002,7 +26436,7 @@
     });
   };
 
-  var withUsage$X = createDocumentationMessageGenerator({
+  var withUsage$Y = createDocumentationMessageGenerator({
     name: 'sort-by'
   });
   var suit$r = component('SortBy');
@@ -26040,7 +26474,7 @@
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$X('The `container` option is required.'));
+      throw new Error(withUsage$Y('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -26068,13 +26502,13 @@
     });
   };
 
-  var _excluded$y = ["nbHits", "nbSortedHits", "cssClasses", "templateProps"];
+  var _excluded$A = ["nbHits", "nbSortedHits", "cssClasses", "templateProps"];
   var Stats = function Stats(_ref) {
     var nbHits = _ref.nbHits,
       nbSortedHits = _ref.nbSortedHits,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$A);
     return h("div", {
       className: cx(cssClasses.root)
     }, h(Template, _extends({}, templateProps, {
@@ -26097,7 +26531,7 @@
     })));
   };
 
-  var withUsage$Y = createDocumentationMessageGenerator({
+  var withUsage$Z = createDocumentationMessageGenerator({
     name: 'stats'
   });
   var suit$s = component('Stats');
@@ -26192,7 +26626,7 @@
       _ref5$templates = _ref5.templates,
       templates = _ref5$templates === void 0 ? {} : _ref5$templates;
     if (!container) {
-      throw new Error(withUsage$Y('The `container` option is required.'));
+      throw new Error(withUsage$Z('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -26250,7 +26684,7 @@
     }
   };
 
-  var withUsage$Z = createDocumentationMessageGenerator({
+  var withUsage$_ = createDocumentationMessageGenerator({
     name: 'toggle-refinement'
   });
   var suit$t = component('ToggleRefinement');
@@ -26303,7 +26737,7 @@
       on = _ref3$on === void 0 ? true : _ref3$on,
       off = _ref3.off;
     if (!container) {
-      throw new Error(withUsage$Z('The `container` option is required.'));
+      throw new Error(withUsage$_('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -26336,8 +26770,8 @@
     });
   };
 
-  var _excluded$z = ["item", "sendEvent"];
-  var withUsage$_ = createDocumentationMessageGenerator({
+  var _excluded$B = ["item", "sendEvent"];
+  var withUsage$$ = createDocumentationMessageGenerator({
     name: 'trending-items'
   });
   var TrendingItems = createTrendingItemsComponent({
@@ -26375,7 +26809,7 @@
       var itemComponent = templates.item ? function (_ref3) {
         var item = _ref3.item,
           _sendEvent = _ref3.sendEvent,
-          rootProps = _objectWithoutProperties(_ref3, _excluded$z);
+          rootProps = _objectWithoutProperties(_ref3, _excluded$B);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -26445,7 +26879,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$_('The `container` option is required.'));
+      throw new Error(withUsage$$('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = createRenderer$2({
@@ -26607,7 +27041,7 @@
     }
   };
 
-  var withUsage$$ = createDocumentationMessageGenerator({
+  var withUsage$10 = createDocumentationMessageGenerator({
     name: 'voice-search'
   });
   var suit$u = component('VoiceSearch');
@@ -26643,7 +27077,7 @@
       additionalQueryParameters = _ref3.additionalQueryParameters,
       createVoiceSearchHelper = _ref3.createVoiceSearchHelper;
     if (!container) {
-      throw new Error(withUsage$$('The `container` option is required.'));
+      throw new Error(withUsage$10('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -26677,8 +27111,8 @@
     });
   };
 
-  var _excluded$A = ["item", "sendEvent"];
-  var withUsage$10 = createDocumentationMessageGenerator({
+  var _excluded$C = ["item", "sendEvent"];
+  var withUsage$11 = createDocumentationMessageGenerator({
     name: 'frequently-bought-together'
   });
   var FrequentlyBoughtTogether = createFrequentlyBoughtTogetherComponent({
@@ -26716,7 +27150,7 @@
       var itemComponent = templates.item ? function (_ref3) {
         var item = _ref3.item,
           _sendEvent = _ref3.sendEvent,
-          rootProps = _objectWithoutProperties(_ref3, _excluded$A);
+          rootProps = _objectWithoutProperties(_ref3, _excluded$C);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -26785,7 +27219,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$10('The `container` option is required.'));
+      throw new Error(withUsage$11('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = renderer$q({
@@ -26810,8 +27244,8 @@
     });
   });
 
-  var _excluded$B = ["item", "sendEvent"];
-  var withUsage$11 = createDocumentationMessageGenerator({
+  var _excluded$D = ["item", "sendEvent"];
+  var withUsage$12 = createDocumentationMessageGenerator({
     name: 'looking-similar'
   });
   var LookingSimilar = createLookingSimilarComponent({
@@ -26849,7 +27283,7 @@
       var itemComponent = templates.item ? function (_ref3) {
         var item = _ref3.item,
           _sendEvent = _ref3.sendEvent,
-          rootProps = _objectWithoutProperties(_ref3, _excluded$B);
+          rootProps = _objectWithoutProperties(_ref3, _excluded$D);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -26918,7 +27352,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$11('The `container` option is required.'));
+      throw new Error(withUsage$12('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = createRenderer$3({
@@ -26943,6 +27377,118 @@
     });
   });
 
+  var withUsage$13 = createDocumentationMessageGenerator({
+    name: 'filter-suggestions'
+  });
+  var FilterSuggestions = createFilterSuggestionsComponent({
+    createElement: h,
+    Fragment: 'fragment'
+  });
+  var createRenderer$4 = function createRenderer(_ref) {
+    var renderState = _ref.renderState,
+      cssClasses = _ref.cssClasses,
+      containerNode = _ref.containerNode,
+      templates = _ref.templates,
+      maxSuggestions = _ref.maxSuggestions;
+    return function (props, isFirstRendering) {
+      var suggestions = props.suggestions,
+        isLoading = props.isLoading,
+        refine = props.refine,
+        instantSearchInstance = props.instantSearchInstance;
+      var headerTemplate = templates.header === false ? undefined : templates.header;
+      if (isFirstRendering) {
+        renderState.templateProps = prepareTemplateProps({
+          defaultTemplates: {},
+          templatesConfig: instantSearchInstance.templatesConfig,
+          templates: {
+            header: headerTemplate,
+            item: templates.item,
+            empty: templates.empty
+          }
+        });
+        return;
+      }
+      var headerComponent;
+      if (templates.header === false) {
+        headerComponent = false;
+      } else if (headerTemplate) {
+        headerComponent = function headerComponent(headerProps) {
+          return h(Template, _extends({}, renderState.templateProps, {
+            templateKey: "header",
+            rootTagName: "div",
+            data: headerProps
+          }));
+        };
+      }
+      var itemComponent = templates.item ? function (itemProps) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: itemProps
+        }));
+      } : undefined;
+      var emptyComponent = templates.empty ? function (emptyProps) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "empty",
+          rootTagName: "div",
+          data: emptyProps
+        }));
+      } : undefined;
+      var uiProps = {
+        suggestions: suggestions,
+        isLoading: isLoading,
+        refine: refine,
+        skeletonCount: maxSuggestions,
+        itemComponent: itemComponent,
+        headerComponent: headerComponent,
+        emptyComponent: emptyComponent
+      };
+      P(h(FilterSuggestions, _extends({
+        classNames: cssClasses
+      }, uiProps)), containerNode);
+    };
+  };
+  var filterSuggestions = (function filterSuggestions(widgetParams) {
+    var _ref2 = widgetParams || {},
+      container = _ref2.container,
+      _ref2$templates = _ref2.templates,
+      templates = _ref2$templates === void 0 ? {} : _ref2$templates,
+      _ref2$cssClasses = _ref2.cssClasses,
+      cssClasses = _ref2$cssClasses === void 0 ? {} : _ref2$cssClasses,
+      agentId = _ref2.agentId,
+      attributes = _ref2.attributes,
+      maxSuggestions = _ref2.maxSuggestions,
+      debounceMs = _ref2.debounceMs,
+      hitsToSample = _ref2.hitsToSample,
+      transformItems = _ref2.transformItems,
+      transport = _ref2.transport;
+    if (!container) {
+      throw new Error(withUsage$13('The `container` option is required.'));
+    }
+    var containerNode = getContainerNode(container);
+    var specializedRenderer = createRenderer$4({
+      containerNode: containerNode,
+      cssClasses: cssClasses,
+      renderState: {},
+      templates: templates,
+      maxSuggestions: maxSuggestions
+    });
+    var makeWidget = connectFilterSuggestions(specializedRenderer, function () {
+      return P(null, containerNode);
+    });
+    return _objectSpread2(_objectSpread2({}, makeWidget({
+      agentId: agentId,
+      attributes: attributes,
+      maxSuggestions: maxSuggestions,
+      debounceMs: debounceMs,
+      hitsToSample: hitsToSample,
+      transformItems: transformItems,
+      transport: transport
+    })), {}, {
+      $$widgetType: 'ais.filterSuggestions'
+    });
+  });
+
   /** @deprecated answers is no longer supported */
   var EXPERIMENTAL_answers = deprecate(answers, 'answers is no longer supported');
 
@@ -26996,7 +27542,8 @@
     trendingItems: trendingItems,
     voiceSearch: voiceSearch,
     frequentlyBoughtTogether: frequentlyBoughtTogether,
-    lookingSimilar: lookingSimilar
+    lookingSimilar: lookingSimilar,
+    filterSuggestions: filterSuggestions
   });
 
   /**