instantsearch.js 4.68.1 → 4.70.0

package/dist/instantsearch.development.js

@@ -1,10 +1,18 @@
-/*! InstantSearch.js 4.68.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.70.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) :
   (global = global || self, global.instantsearch = factory());
 }(this, (function () { 'use strict';
 
+  var id = 0;
+  function addWidgetId(widget) {
+    if (widget.dependsOn !== 'recommend') {
+      return;
+    }
+    widget.$$id = id++;
+  }
+
   function capitalize(text) {
     return text.toString().charAt(0).toUpperCase() + text.toString().slice(1);
   }
@@ -1411,6 +1419,18 @@
     });
   }
 
+  function hydrateRecommendCache(helper, initialResults) {
+    var recommendCache = Object.keys(initialResults).reduce(function (acc, indexName) {
+      var initialResult = initialResults[indexName];
+      if (initialResult.recommendResults) {
+        // @MAJOR: Use `Object.assign` instead of spread operator
+        return _objectSpread2(_objectSpread2({}, acc), initialResult.recommendResults.results);
+      }
+      return acc;
+    }, {});
+    helper._recommendCache = recommendCache;
+  }
+
   function hydrateSearchClient(client, results) {
     if (!results) {
       return;
@@ -1428,16 +1448,20 @@
         state = _results$key.state,
         requestParams = _results$key.requestParams,
         serverResults = _results$key.results;
-      return serverResults.map(function (result) {
+      return serverResults && state ? serverResults.map(function (result) {
         return _objectSpread2({
           indexName: state.index || result.index
         }, requestParams || result.params ? {
           params: serializeQueryParameters(requestParams || deserializeQueryParameters(result.params))
         } : {});
-      });
+      }) : [];
     });
     var cachedResults = Object.keys(results).reduce(function (acc, key) {
-      return acc.concat(results[key].results);
+      var res = results[key].results;
+      if (!res) {
+        return acc;
+      }
+      return acc.concat(res);
     }, []);
 
     // Algoliasearch API Client >= v4
@@ -1743,8 +1767,8 @@
       error: instantSearchInstance.error
     };
   }
-  function createRenderArgs(instantSearchInstance, parent) {
-    var results = parent.getResults();
+  function createRenderArgs(instantSearchInstance, parent, widget) {
+    var results = parent.getResultsForWidget(widget);
     var helper = parent.getHelper();
     return {
       helper: helper,
@@ -1752,7 +1776,7 @@
       instantSearchInstance: instantSearchInstance,
       results: results,
       scopedResults: parent.getScopedResults(),
-      state: results ? results._state : helper.state,
+      state: results && '_state' in results ? results._state : helper.state,
       renderState: instantSearchInstance.renderState,
       templatesConfig: instantSearchInstance.templatesConfig,
       createURL: parent.createURL,
@@ -4528,6 +4552,86 @@
   }
 
   var withUsage$d = createDocumentationMessageGenerator({
+    name: 'related-products',
+    connector: true
+  });
+  var connectRelatedProducts = function connectRelatedProducts(renderFn) {
+    var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    checkRendering(renderFn, withUsage$d());
+    return function relatedProducts(widgetParams) {
+      var _ref = widgetParams || {},
+        _ref$escapeHTML = _ref.escapeHTML,
+        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML,
+        objectIDs = _ref.objectIDs,
+        limit = _ref.limit,
+        threshold = _ref.threshold,
+        fallbackParameters = _ref.fallbackParameters,
+        queryParameters = _ref.queryParameters,
+        _ref$transformItems = _ref.transformItems,
+        transformItems = _ref$transformItems === void 0 ? function (items) {
+          return items;
+        } : _ref$transformItems;
+      if (!objectIDs || objectIDs.length === 0) {
+        throw new Error(withUsage$d('The `objectIDs` option is required.'));
+      }
+      return {
+        dependsOn: 'recommend',
+        $$type: 'ais.relatedProducts',
+        init: function init(initOptions) {
+          renderFn(_objectSpread2(_objectSpread2({}, this.getWidgetRenderState(initOptions)), {}, {
+            instantSearchInstance: initOptions.instantSearchInstance
+          }), true);
+        },
+        render: function render(renderOptions) {
+          var renderState = this.getWidgetRenderState(renderOptions);
+          renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
+            instantSearchInstance: renderOptions.instantSearchInstance
+          }), false);
+        },
+        getRenderState: function getRenderState(renderState) {
+          return renderState;
+        },
+        getWidgetRenderState: function getWidgetRenderState(_ref2) {
+          var results = _ref2.results;
+          if (results === null || results === undefined) {
+            return {
+              items: [],
+              widgetParams: widgetParams
+            };
+          }
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+          return {
+            items: transformItems(results.hits, {
+              results: results
+            }),
+            widgetParams: widgetParams
+          };
+        },
+        dispose: function dispose(_ref3) {
+          var recommendState = _ref3.recommendState;
+          unmountFn();
+          return recommendState.removeParams(this.$$id);
+        },
+        getWidgetParameters: function getWidgetParameters(state) {
+          var _this = this;
+          return objectIDs.reduce(function (acc, objectID) {
+            return acc.addRelatedProducts({
+              objectID: objectID,
+              maxRecommendations: limit,
+              threshold: threshold,
+              fallbackParameters: _objectSpread2(_objectSpread2({}, fallbackParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+              queryParameters: _objectSpread2(_objectSpread2({}, queryParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+              $$id: _this.$$id
+            });
+          }, state.removeParams(this.$$id));
+        }
+      };
+    };
+  };
+
+  var withUsage$e = createDocumentationMessageGenerator({
     name: 'search-box',
     connector: true
   });
@@ -4553,7 +4657,7 @@
    */
   var connectSearchBox = function connectSearchBox(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$d());
+    checkRendering(renderFn, withUsage$e());
     return function (widgetParams) {
       var _ref = widgetParams || {},
         _ref$queryHook = _ref.queryHook,
@@ -4624,7 +4728,7 @@
     };
   };
 
-  var withUsage$e = createDocumentationMessageGenerator({
+  var withUsage$f = createDocumentationMessageGenerator({
     name: 'sort-by',
     connector: true
   });
@@ -4637,7 +4741,7 @@
 
   var connectSortBy = function connectSortBy(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$e());
+    checkRendering(renderFn, withUsage$f());
     var connectorState = {};
     return function (widgetParams) {
       var _ref = widgetParams || {},
@@ -4647,7 +4751,7 @@
           return x;
         } : _ref$transformItems;
       if (!Array.isArray(items)) {
-        throw new Error(withUsage$e('The `items` option expects an array of objects.'));
+        throw new Error(withUsage$f('The `items` option expects an array of objects.'));
       }
       return {
         $$type: 'ais.sortBy',
@@ -4719,7 +4823,7 @@
     };
   };
 
-  var withUsage$f = createDocumentationMessageGenerator({
+  var withUsage$g = createDocumentationMessageGenerator({
     name: 'rating-menu',
     connector: true
   });
@@ -4776,7 +4880,7 @@
    */
   var connectRatingMenu = function connectRatingMenu(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$f());
+    checkRendering(renderFn, withUsage$g());
     return function (widgetParams) {
       var _ref2 = widgetParams || {},
         attribute = _ref2.attribute,
@@ -4784,7 +4888,7 @@
         max = _ref2$max === void 0 ? 5 : _ref2$max;
       var sendEvent;
       if (!attribute) {
-        throw new Error(withUsage$f('The `attribute` option is required.'));
+        throw new Error(withUsage$g('The `attribute` option is required.'));
       }
       var _getRefinedStar = function getRefinedStar(state) {
         var _values$;
@@ -4991,7 +5095,7 @@
     return indexUiState;
   }
 
-  var withUsage$g = createDocumentationMessageGenerator({
+  var withUsage$h = createDocumentationMessageGenerator({
     name: 'stats',
     connector: true
   });
@@ -5003,7 +5107,7 @@
 
   var connectStats = function connectStats(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$g());
+    checkRendering(renderFn, withUsage$h());
     return function (widgetParams) {
       return {
         $$type: 'ais.stats',
@@ -5059,7 +5163,7 @@
     };
   };
 
-  var withUsage$h = createDocumentationMessageGenerator({
+  var withUsage$i = createDocumentationMessageGenerator({
     name: 'toggle-refinement',
     connector: true
   });
@@ -5119,7 +5223,7 @@
    */
   var connectToggleRefinement = function connectToggleRefinement(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$h());
+    checkRendering(renderFn, withUsage$i());
     return function (widgetParams) {
       var _ref2 = widgetParams || {},
         attribute = _ref2.attribute,
@@ -5127,7 +5231,7 @@
         userOn = _ref2$on === void 0 ? true : _ref2$on,
         userOff = _ref2.off;
       if (!attribute) {
-        throw new Error(withUsage$h('The `attribute` option is required.'));
+        throw new Error(withUsage$i('The `attribute` option is required.'));
       }
       var hasAnOffValue = userOff !== undefined;
       // even though facet values can be numbers and boolean,
@@ -5355,13 +5459,89 @@
     };
   };
 
-  var withUsage$i = createDocumentationMessageGenerator({
+  var withUsage$j = createDocumentationMessageGenerator({
+    name: 'trending-items',
+    connector: true
+  });
+  var connectTrendingItems = function connectTrendingItems(renderFn) {
+    var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    checkRendering(renderFn, withUsage$j());
+    return function trendingItems(widgetParams) {
+      var _ref = widgetParams || {},
+        facetName = _ref.facetName,
+        facetValue = _ref.facetValue,
+        limit = _ref.limit,
+        threshold = _ref.threshold,
+        fallbackParameters = _ref.fallbackParameters,
+        queryParameters = _ref.queryParameters,
+        _ref$escapeHTML = _ref.escapeHTML,
+        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML,
+        _ref$transformItems = _ref.transformItems,
+        transformItems = _ref$transformItems === void 0 ? function (items) {
+          return items;
+        } : _ref$transformItems;
+      return {
+        dependsOn: 'recommend',
+        $$type: 'ais.trendingItems',
+        init: function init(initOptions) {
+          renderFn(_objectSpread2(_objectSpread2({}, this.getWidgetRenderState(initOptions)), {}, {
+            instantSearchInstance: initOptions.instantSearchInstance
+          }), true);
+        },
+        render: function render(renderOptions) {
+          var renderState = this.getWidgetRenderState(renderOptions);
+          renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
+            instantSearchInstance: renderOptions.instantSearchInstance
+          }), false);
+        },
+        getRenderState: function getRenderState(renderState) {
+          return renderState;
+        },
+        getWidgetRenderState: function getWidgetRenderState(_ref2) {
+          var results = _ref2.results;
+          if (results === null || results === undefined) {
+            return {
+              items: [],
+              widgetParams: widgetParams
+            };
+          }
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+          return {
+            items: transformItems(results.hits, {
+              results: results
+            }),
+            widgetParams: widgetParams
+          };
+        },
+        dispose: function dispose(_ref3) {
+          var recommendState = _ref3.recommendState;
+          unmountFn();
+          return recommendState.removeParams(this.$$id);
+        },
+        getWidgetParameters: function getWidgetParameters(state) {
+          return state.removeParams(this.$$id).addTrendingItems({
+            facetName: facetName,
+            facetValue: facetValue,
+            maxRecommendations: limit,
+            threshold: threshold,
+            fallbackParameters: _objectSpread2(_objectSpread2({}, fallbackParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+            queryParameters: _objectSpread2(_objectSpread2({}, queryParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+            $$id: this.$$id
+          });
+        }
+      };
+    };
+  };
+
+  var withUsage$k = createDocumentationMessageGenerator({
     name: 'breadcrumb',
     connector: true
   });
   var connectBreadcrumb = function connectBreadcrumb(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$i());
+    checkRendering(renderFn, withUsage$k());
     var connectorState = {};
     return function (widgetParams) {
       var _ref = widgetParams || {},
@@ -5375,7 +5555,7 @@
           return items;
         } : _ref$transformItems;
       if (!attributes || !Array.isArray(attributes) || attributes.length === 0) {
-        throw new Error(withUsage$i('The `attributes` option expects an array of strings.'));
+        throw new Error(withUsage$k('The `attributes` option expects an array of strings.'));
       }
       var _attributes = _slicedToArray(attributes, 1),
         hierarchicalFacetName = _attributes[0];
@@ -5525,7 +5705,7 @@
     return indexUiState;
   }
 
-  var withUsage$j = createDocumentationMessageGenerator({
+  var withUsage$l = createDocumentationMessageGenerator({
     name: 'geo-search',
     connector: true
   });
@@ -5551,7 +5731,7 @@
    */
   var connectGeoSearch = function connectGeoSearch(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$j());
+    checkRendering(renderFn, withUsage$l());
     return function (widgetParams) {
       var _ref = widgetParams || {},
         _ref$enableRefineOnMa = _ref.enableRefineOnMapMove,
@@ -5723,7 +5903,7 @@
     };
   };
 
-  var withUsage$k = createDocumentationMessageGenerator({
+  var withUsage$m = createDocumentationMessageGenerator({
     name: 'powered-by',
     connector: true
   });
@@ -5733,7 +5913,7 @@
    */
   var connectPoweredBy = function connectPoweredBy(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$k());
+    checkRendering(renderFn, withUsage$m());
     var defaultUrl = 'https://www.algolia.com/?' + 'utm_source=instantsearch.js&' + 'utm_medium=website&' + "utm_content=".concat(safelyRunOnBrowser(function (_ref) {
       var _window$location;
       var window = _ref.window;
@@ -6297,15 +6477,8 @@
 
     addParams: function (params) {
       var newParams = this.params.slice();
-      var existingParamsIndex = this.params.findIndex(function (currentParams) {
-        return currentParams.$$id === params.$$id;
-      });
 
-      if (existingParamsIndex !== -1) {
-        newParams.splice(existingParamsIndex, 1, params);
-      } else {
-        newParams.push(params);
-      }
+      newParams.push(params);
 
       return new RecommendParameters({ params: newParams });
     },
@@ -6348,18 +6521,50 @@
       );
     },
 
-    _buildQueries: function (indexName) {
-      return this.params.map(function (params) {
-        var query = Object.assign({}, params, { indexName: indexName });
-        delete query.$$id;
+    _buildQueries: function (indexName, cache) {
+      return this.params
+        .filter(function (params) {
+          return cache[params.$$id] === undefined;
+        })
+        .map(function (params) {
+          var query = Object.assign({}, params, { indexName: indexName });
+          delete query.$$id;
 
-        return query;
-      });
+          return query;
+        });
     },
   };
 
   var RecommendParameters_1 = RecommendParameters;
 
+  /**
+   * Constructor for SearchResults
+   * @class
+   * @classdesc SearchResults contains the results of a query to Algolia using the
+   * {@link AlgoliaSearchHelper}.
+   * @param {RecommendParameters} state state that led to the response
+   * @param {Record<string,RecommendResultItem>} results the results from algolia client
+   **/
+  function RecommendResults(state, results) {
+    this._state = state;
+    this._rawResults = {};
+
+    // eslint-disable-next-line consistent-this
+    var self = this;
+
+    state.params.forEach(function (param) {
+      var id = param.$$id;
+      self[id] = results[id];
+      self._rawResults[id] = results[id];
+    });
+  }
+
+  RecommendResults.prototype = {
+    constructor: RecommendResults,
+  };
+
+  var RecommendResults_1 = RecommendResults;
+
   function sortObject(obj) {
     return Object.keys(obj)
       .sort()
@@ -10207,7 +10412,66 @@
 
   var SearchResults_1 = SearchResults;
 
-  var version = '3.19.0';
+  // @MAJOR: remove this function and use Array.prototype.flat
+  var flat = function flat(arr) {
+    return arr.reduce(function (acc, val) {
+      return acc.concat(val);
+    }, []);
+  };
+
+  function getAverageIndices(indexTracker, nrOfObjs) {
+    var avgIndices = [];
+
+    Object.keys(indexTracker).forEach(function (key) {
+      if (indexTracker[key].count < 2) {
+        indexTracker[key].indexSum += 100;
+      }
+      avgIndices.push({
+        objectID: key,
+        avgOfIndices: indexTracker[key].indexSum / nrOfObjs,
+      });
+    });
+
+    return avgIndices.sort(function (a, b) {
+      return a.avgOfIndices > b.avgOfIndices ? 1 : -1;
+    });
+  }
+
+  function sortAndMergeRecommendations(results) {
+    var indexTracker = {};
+
+    results.forEach(function (hits) {
+      hits.forEach(function (hit, index) {
+        if (!indexTracker[hit.objectID]) {
+          indexTracker[hit.objectID] = { indexSum: index, count: 1 };
+        } else {
+          indexTracker[hit.objectID] = {
+            indexSum: indexTracker[hit.objectID].indexSum + index,
+            count: indexTracker[hit.objectID].count + 1,
+          };
+        }
+      });
+    });
+
+    var sortedAverageIndices = getAverageIndices(indexTracker, results.length);
+
+    var finalOrder = sortedAverageIndices.reduce(function (
+      orderedHits,
+      avgIndexRef
+    ) {
+      var result = find$1(flat(results), function (hit) {
+        return hit.objectID === avgIndexRef.objectID;
+      });
+      return result ? orderedHits.concat(result) : orderedHits;
+    },
+    []);
+
+    return finalOrder;
+  }
+
+  var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
+
+  var version = '3.21.0';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -10220,6 +10484,8 @@
 
 
 
+
+
   /**
    * Event triggered when a parameter is set or updated
    * @event AlgoliaSearchHelper#event:change
@@ -10346,6 +10612,7 @@
     this._currentNbQueries = 0;
     this._currentNbRecommendQueries = 0;
     this._searchResultsOptions = searchResultsOptions;
+    this._recommendCache = {};
   }
 
   inherits_1(AlgoliaSearchHelper, events);
@@ -11134,7 +11401,7 @@
   /**
    * Removes a "frequently bought together" recommendation query.
    *
-   * @param {string} id identifier of the recommendation widget
+   * @param {number} id identifier of the recommendation widget
    * @returns {AlgoliaSearchHelper} Method is chainable, it returns itself
    * @fires change
    * @chainable
@@ -11150,7 +11417,7 @@
   /**
    * Removes a "related products" recommendation query.
    *
-   * @param {string} id identifier of the recommendation widget
+   * @param {number} id identifier of the recommendation widget
    * @returns {AlgoliaSearchHelper} Method is chainable, it returns itself
    * @fires change
    * @chainable
@@ -11166,7 +11433,7 @@
   /**
    * Removes a "trending items" recommendation query.
    *
-   * @param {string} id identifier of the recommendation widget
+   * @param {number} id identifier of the recommendation widget
    * @returns {AlgoliaSearchHelper} Method is chainable, it returns itself
    * @fires change
    * @chainable
@@ -11182,7 +11449,7 @@
   /**
    * Removes a "trending facets" recommendation query.
    *
-   * @param {string} id identifier of the recommendation widget
+   * @param {number} id identifier of the recommendation widget
    * @returns {AlgoliaSearchHelper} Method is chainable, it returns itself
    * @fires change
    * @chainable
@@ -11198,7 +11465,7 @@
   /**
    * Removes a "looking similar" recommendation query.
    *
-   * @param {string} id identifier of the recommendation widget
+   * @param {number} id identifier of the recommendation widget
    * @returns {AlgoliaSearchHelper} Method is chainable, it returns itself
    * @fires change
    * @chainable
@@ -11783,6 +12050,9 @@
     var recommendState = this.recommendState;
     var index = this.getIndex();
     var states = [{ state: recommendState, index: index, helper: this }];
+    var ids = recommendState.params.map(function (param) {
+      return param.$$id;
+    });
 
     this.emit('fetch', {
       recommend: {
@@ -11791,6 +12061,8 @@
       },
     });
 
+    var cache = this._recommendCache;
+
     var derivedQueries = this.derivedHelpers.map(function (derivedHelper) {
       var derivedIndex = derivedHelper.getModifiedState(searchState).index;
       if (!derivedIndex) {
@@ -11809,6 +12081,13 @@
         helper: derivedHelper,
       });
 
+      ids = Array.prototype.concat.apply(
+        ids,
+        derivedState.params.map(function (param) {
+          return param.$$id;
+        })
+      );
+
       derivedHelper.emit('fetch', {
         recommend: {
           state: derivedState,
@@ -11816,11 +12095,11 @@
         },
       });
 
-      return derivedState._buildQueries(derivedIndex);
+      return derivedState._buildQueries(derivedIndex, cache);
     });
 
     var queries = Array.prototype.concat.apply(
-      this.recommendState._buildQueries(index),
+      this.recommendState._buildQueries(index, cache),
       derivedQueries
     );
 
@@ -11834,7 +12113,7 @@
     ) {
       // eslint-disable-next-line no-console
       console.warn(
-        'Please update algoliasearch/lite to the latest version in order to use recommendations widgets.'
+        'Please update algoliasearch/lite to the latest version in order to use recommend widgets.'
       );
       return;
     }
@@ -11845,7 +12124,7 @@
     try {
       this.client
         .getRecommendations(queries)
-        .then(this._dispatchRecommendResponse.bind(this, queryId, states))
+        .then(this._dispatchRecommendResponse.bind(this, queryId, states, ids))
         .catch(this._dispatchRecommendError.bind(this, queryId));
     } catch (error) {
       // If we reach this part, we're in an internal error state
@@ -11919,6 +12198,7 @@
   AlgoliaSearchHelper.prototype._dispatchRecommendResponse = function (
     queryId,
     states,
+    ids,
     content
   ) {
     // @TODO remove the number of outdated queries discarded instead of just one
@@ -11934,7 +12214,39 @@
 
     if (this._currentNbRecommendQueries === 0) this.emit('recommendQueueEmpty');
 
-    var results = content.results.slice();
+    var cache = this._recommendCache;
+
+    var idsMap = {};
+    ids
+      .filter(function (id) {
+        return cache[id] === undefined;
+      })
+      .forEach(function (id, index) {
+        if (!idsMap[id]) idsMap[id] = [];
+
+        idsMap[id].push(index);
+      });
+
+    Object.keys(idsMap).forEach(function (id) {
+      var indices = idsMap[id];
+      var firstResult = content.results[indices[0]];
+      if (indices.length === 1) {
+        cache[id] = firstResult;
+        return;
+      }
+      cache[id] = Object.assign({}, firstResult, {
+        hits: sortAndMergeRecommendations_1(
+          indices.map(function (idx) {
+            return content.results[idx].hits;
+          })
+        ),
+      });
+    });
+
+    var results = {};
+    ids.forEach(function (id) {
+      results[id] = cache[id];
+    });
 
     states.forEach(function (s) {
       var state = s.state;
@@ -11950,7 +12262,7 @@
         return;
       }
 
-      helper.lastRecommendResults = results;
+      helper.lastRecommendResults = new RecommendResults_1(state, results);
 
       // eslint-disable-next-line no-warning-comments
       // TODO: emit "result" event when events for Recommend are implemented
@@ -12236,13 +12548,20 @@
    */
   algoliasearchHelper.SearchResults = SearchResults_1;
 
+  /**
+   * Constructor for the object containing the results for Recommend.
+   * @member module:algoliasearchHelper.RecommendResults
+   * @type {RecommendResults}
+   */
+  algoliasearchHelper.RecommendResults = RecommendResults_1;
+
   var algoliasearchHelper_1 = algoliasearchHelper;
 
   /**
    * Refine the given search parameters.
    */
 
-  var withUsage$l = createDocumentationMessageGenerator({
+  var withUsage$n = createDocumentationMessageGenerator({
     name: 'configure',
     connector: true
   });
@@ -12259,7 +12578,7 @@
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     return function (widgetParams) {
       if (!widgetParams || !isPlainObject(widgetParams.searchParameters)) {
-        throw new Error(withUsage$l('The `searchParameters` option expects an object.'));
+        throw new Error(withUsage$n('The `searchParameters` option expects an object.'));
       }
       var connectorState = {};
       function refine(helper) {
@@ -12328,7 +12647,7 @@
     };
   };
 
-  var withUsage$m = createDocumentationMessageGenerator({
+  var withUsage$o = createDocumentationMessageGenerator({
     name: 'configure-related-items',
     connector: true
   });
@@ -12348,10 +12667,10 @@
           return x;
         } : _ref2$transformSearch;
       if (!hit) {
-        throw new Error(withUsage$m('The `hit` option is required.'));
+        throw new Error(withUsage$o('The `hit` option is required.'));
       }
       if (!matchingPatterns) {
-        throw new Error(withUsage$m('The `matchingPatterns` option is required.'));
+        throw new Error(withUsage$o('The `matchingPatterns` option is required.'));
       }
       var optionalFilters = Object.keys(matchingPatterns).reduce(function (acc, attributeName) {
         var attribute = matchingPatterns[attributeName];
@@ -12390,13 +12709,13 @@
     };
   };
 
-  var withUsage$n = createDocumentationMessageGenerator({
+  var withUsage$p = createDocumentationMessageGenerator({
     name: 'autocomplete',
     connector: true
   });
   var connectAutocomplete = function connectAutocomplete(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$n());
+    checkRendering(renderFn, withUsage$p());
     return function (widgetParams) {
       var _ref = widgetParams || {},
         _ref$escapeHTML = _ref.escapeHTML,
@@ -12503,7 +12822,7 @@
     };
   };
 
-  var withUsage$o = createDocumentationMessageGenerator({
+  var withUsage$q = createDocumentationMessageGenerator({
     name: 'query-rules',
     connector: true
   });
@@ -12561,7 +12880,7 @@
   }
   var connectQueryRules = function connectQueryRules(_render) {
     var unmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(_render, withUsage$o());
+    checkRendering(_render, withUsage$q());
     return function (widgetParams) {
       var _ref2 = widgetParams || {},
         _ref2$trackedFilters = _ref2.trackedFilters,
@@ -12576,7 +12895,7 @@
         } : _ref2$transformItems;
       Object.keys(trackedFilters).forEach(function (facetName) {
         if (typeof trackedFilters[facetName] !== 'function') {
-          throw new Error(withUsage$o("'The \"".concat(facetName, "\" filter value in the `trackedFilters` option expects a function.")));
+          throw new Error(withUsage$q("'The \"".concat(facetName, "\" filter value in the `trackedFilters` option expects a function.")));
         }
       });
       var hasTrackedFilters = Object.keys(trackedFilters).length > 0;
@@ -12769,13 +13088,13 @@
     };
   };
 
-  var withUsage$p = createDocumentationMessageGenerator({
+  var withUsage$r = createDocumentationMessageGenerator({
     name: 'voice-search',
     connector: true
   });
   var connectVoiceSearch = function connectVoiceSearch(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-    checkRendering(renderFn, withUsage$p());
+    checkRendering(renderFn, withUsage$r());
     return function (widgetParams) {
       var _widgetParams$searchA = widgetParams.searchAsYouSpeak,
         searchAsYouSpeak = _widgetParams$searchA === void 0 ? false : _widgetParams$searchA,
@@ -12967,44 +13286,207 @@
     };
   };
 
-  /** @deprecated answers is no longer supported */
-  var EXPERIMENTAL_connectAnswers = deprecate(connectAnswers, 'answers is no longer supported');
-
-  /** @deprecated use connectDynamicWidgets */
-  var EXPERIMENTAL_connectDynamicWidgets = deprecate(connectDynamicWidgets, 'use connectDynamicWidgets');
-
-  var connectors = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    EXPERIMENTAL_connectAnswers: EXPERIMENTAL_connectAnswers,
-    EXPERIMENTAL_connectDynamicWidgets: EXPERIMENTAL_connectDynamicWidgets,
-    connectDynamicWidgets: connectDynamicWidgets,
-    connectClearRefinements: connectClearRefinements,
-    connectCurrentRefinements: connectCurrentRefinements,
-    connectHierarchicalMenu: connectHierarchicalMenu,
-    connectHits: connectHits,
-    connectHitsWithInsights: connectHitsWithInsights,
-    connectHitsPerPage: connectHitsPerPage,
-    connectInfiniteHits: connectInfiniteHits,
-    connectInfiniteHitsWithInsights: connectInfiniteHitsWithInsights,
-    connectMenu: connectMenu,
-    connectNumericMenu: connectNumericMenu,
-    connectPagination: connectPagination,
-    connectRange: connectRange,
-    connectRefinementList: connectRefinementList,
-    connectSearchBox: connectSearchBox,
-    connectSortBy: connectSortBy,
-    connectRatingMenu: connectRatingMenu,
-    connectStats: connectStats,
-    connectToggleRefinement: connectToggleRefinement,
-    connectBreadcrumb: connectBreadcrumb,
-    connectGeoSearch: connectGeoSearch,
-    connectPoweredBy: connectPoweredBy,
-    connectConfigure: connectConfigure,
+  var withUsage$s = createDocumentationMessageGenerator({
+    name: 'frequently-bought-together',
+    connector: true
+  });
+  var connectFrequentlyBoughtTogether = function connectFrequentlyBoughtTogether(renderFn) {
+    var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    checkRendering(renderFn, withUsage$s());
+    return function (widgetParams) {
+      var _ref = widgetParams || {},
+        _ref$escapeHTML = _ref.escapeHTML,
+        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML,
+        _ref$transformItems = _ref.transformItems,
+        transformItems = _ref$transformItems === void 0 ? function (items) {
+          return items;
+        } : _ref$transformItems,
+        objectIDs = _ref.objectIDs,
+        limit = _ref.limit,
+        threshold = _ref.threshold,
+        queryParameters = _ref.queryParameters;
+      if (!objectIDs || objectIDs.length === 0) {
+        throw new Error(withUsage$s('The `objectIDs` option is required.'));
+      }
+      return {
+        dependsOn: 'recommend',
+        $$type: 'ais.frequentlyBoughtTogether',
+        init: function init(initOptions) {
+          renderFn(_objectSpread2(_objectSpread2({}, this.getWidgetRenderState(initOptions)), {}, {
+            instantSearchInstance: initOptions.instantSearchInstance
+          }), true);
+        },
+        render: function render(renderOptions) {
+          var renderState = this.getWidgetRenderState(renderOptions);
+          renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
+            instantSearchInstance: renderOptions.instantSearchInstance
+          }), false);
+        },
+        getRenderState: function getRenderState(renderState) {
+          return renderState;
+        },
+        getWidgetRenderState: function getWidgetRenderState(_ref2) {
+          var results = _ref2.results;
+          if (results === null || results === undefined) {
+            return {
+              items: [],
+              widgetParams: widgetParams
+            };
+          }
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+          var transformedItems = transformItems(results.hits, {
+            results: results
+          });
+          return {
+            items: transformedItems,
+            widgetParams: widgetParams
+          };
+        },
+        dispose: function dispose(_ref3) {
+          var recommendState = _ref3.recommendState;
+          unmountFn();
+          return recommendState.removeParams(this.$$id);
+        },
+        getWidgetParameters: function getWidgetParameters(state) {
+          var _this = this;
+          return objectIDs.reduce(function (acc, objectID) {
+            return acc.addFrequentlyBoughtTogether({
+              objectID: objectID,
+              threshold: threshold,
+              maxRecommendations: limit,
+              queryParameters: _objectSpread2(_objectSpread2({}, queryParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+              $$id: _this.$$id
+            });
+          }, state.removeParams(this.$$id));
+        }
+      };
+    };
+  };
+
+  var withUsage$t = createDocumentationMessageGenerator({
+    name: 'looking-similar',
+    connector: true
+  });
+  var connectLookingSimilar = function connectLookingSimilar(renderFn) {
+    var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    checkRendering(renderFn, withUsage$t());
+    return function LookingSimilar(widgetParams) {
+      var _ref = widgetParams || {},
+        _ref$escapeHTML = _ref.escapeHTML,
+        escapeHTML = _ref$escapeHTML === void 0 ? true : _ref$escapeHTML,
+        objectIDs = _ref.objectIDs,
+        limit = _ref.limit,
+        threshold = _ref.threshold,
+        fallbackParameters = _ref.fallbackParameters,
+        queryParameters = _ref.queryParameters,
+        _ref$transformItems = _ref.transformItems,
+        transformItems = _ref$transformItems === void 0 ? function (items) {
+          return items;
+        } : _ref$transformItems;
+      if (!objectIDs || objectIDs.length === 0) {
+        throw new Error(withUsage$t('The `objectIDs` option is required.'));
+      }
+      return {
+        dependsOn: 'recommend',
+        $$type: 'ais.lookingSimilar',
+        init: function init(initOptions) {
+          renderFn(_objectSpread2(_objectSpread2({}, this.getWidgetRenderState(initOptions)), {}, {
+            instantSearchInstance: initOptions.instantSearchInstance
+          }), true);
+        },
+        render: function render(renderOptions) {
+          var renderState = this.getWidgetRenderState(renderOptions);
+          renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
+            instantSearchInstance: renderOptions.instantSearchInstance
+          }), false);
+        },
+        getRenderState: function getRenderState(renderState) {
+          return renderState;
+        },
+        getWidgetRenderState: function getWidgetRenderState(_ref2) {
+          var results = _ref2.results;
+          if (results === null || results === undefined) {
+            return {
+              items: [],
+              widgetParams: widgetParams
+            };
+          }
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+          return {
+            items: transformItems(results.hits, {
+              results: results
+            }),
+            widgetParams: widgetParams
+          };
+        },
+        dispose: function dispose(_ref3) {
+          var recommendState = _ref3.recommendState;
+          unmountFn();
+          return recommendState.removeParams(this.$$id);
+        },
+        getWidgetParameters: function getWidgetParameters(state) {
+          var _this = this;
+          return objectIDs.reduce(function (acc, objectID) {
+            return acc.addLookingSimilar({
+              objectID: objectID,
+              maxRecommendations: limit,
+              threshold: threshold,
+              fallbackParameters: _objectSpread2(_objectSpread2({}, fallbackParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+              queryParameters: _objectSpread2(_objectSpread2({}, queryParameters), escapeHTML ? TAG_PLACEHOLDER : {}),
+              $$id: _this.$$id
+            });
+          }, state.removeParams(this.$$id));
+        }
+      };
+    };
+  };
+
+  /** @deprecated answers is no longer supported */
+  var EXPERIMENTAL_connectAnswers = deprecate(connectAnswers, 'answers is no longer supported');
+
+  /** @deprecated use connectDynamicWidgets */
+  var EXPERIMENTAL_connectDynamicWidgets = deprecate(connectDynamicWidgets, 'use connectDynamicWidgets');
+
+  var connectors = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    EXPERIMENTAL_connectAnswers: EXPERIMENTAL_connectAnswers,
+    EXPERIMENTAL_connectDynamicWidgets: EXPERIMENTAL_connectDynamicWidgets,
+    connectDynamicWidgets: connectDynamicWidgets,
+    connectClearRefinements: connectClearRefinements,
+    connectCurrentRefinements: connectCurrentRefinements,
+    connectHierarchicalMenu: connectHierarchicalMenu,
+    connectHits: connectHits,
+    connectHitsWithInsights: connectHitsWithInsights,
+    connectHitsPerPage: connectHitsPerPage,
+    connectInfiniteHits: connectInfiniteHits,
+    connectInfiniteHitsWithInsights: connectInfiniteHitsWithInsights,
+    connectMenu: connectMenu,
+    connectNumericMenu: connectNumericMenu,
+    connectPagination: connectPagination,
+    connectRange: connectRange,
+    connectRefinementList: connectRefinementList,
+    connectRelatedProducts: connectRelatedProducts,
+    connectSearchBox: connectSearchBox,
+    connectSortBy: connectSortBy,
+    connectRatingMenu: connectRatingMenu,
+    connectStats: connectStats,
+    connectToggleRefinement: connectToggleRefinement,
+    connectTrendingItems: connectTrendingItems,
+    connectBreadcrumb: connectBreadcrumb,
+    connectGeoSearch: connectGeoSearch,
+    connectPoweredBy: connectPoweredBy,
+    connectConfigure: connectConfigure,
     EXPERIMENTAL_connectConfigureRelatedItems: connectConfigureRelatedItems,
     connectAutocomplete: connectAutocomplete,
     connectQueryRules: connectQueryRules,
     connectVoiceSearch: connectVoiceSearch,
-    connectRelevantSort: connectRelevantSort
+    connectRelevantSort: connectRelevantSort,
+    connectFrequentlyBoughtTogether: connectFrequentlyBoughtTogether,
+    connectLookingSimilar: connectLookingSimilar
   });
 
   var NAMESPACE = 'ais';
@@ -14819,7 +15301,7 @@
 
   var _excluded$7 = ["initialSearchParameters"],
     _excluded2$2 = ["initialRecommendParameters"];
-  var withUsage$q = createDocumentationMessageGenerator({
+  var withUsage$u = createDocumentationMessageGenerator({
     name: 'index-widget'
   });
   /**
@@ -14914,7 +15396,7 @@
   }
   var index = function index(widgetParams) {
     if (widgetParams === undefined || widgetParams.indexName === undefined) {
-      throw new Error(withUsage$q('The `indexName` option is required.'));
+      throw new Error(withUsage$u('The `indexName` option is required.'));
     }
     var indexName = widgetParams.indexName,
       _widgetParams$indexId = widgetParams.indexId,
@@ -14926,6 +15408,8 @@
     var helper = null;
     var derivedHelper = null;
     var lastValidSearchParameters = null;
+    var hasRecommendWidget = false;
+    var hasSearchWidget = false;
     return {
       $$type: 'ais.index',
       $$widgetType: 'ais.index',
@@ -14950,6 +15434,16 @@
         derivedHelper.lastResults._state = helper.state;
         return derivedHelper.lastResults;
       },
+      getResultsForWidget: function getResultsForWidget(widget) {
+        var _helper;
+        if (widget.dependsOn !== 'recommend' || isIndexWidget(widget) || widget.$$id === undefined) {
+          return this.getResults();
+        }
+        if (!((_helper = helper) !== null && _helper !== void 0 && _helper.lastRecommendResults)) {
+          return null;
+        }
+        return helper.lastRecommendResults[widget.$$id];
+      },
       getPreviousState: function getPreviousState() {
         return lastValidSearchParameters;
       },
@@ -14987,13 +15481,28 @@
       addWidgets: function addWidgets(widgets) {
         var _this = this;
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$q('The `addWidgets` method expects an array of widgets.'));
+          throw new Error(withUsage$u('The `addWidgets` method expects an array of widgets.'));
         }
         if (widgets.some(function (widget) {
           return typeof widget.init !== 'function' && typeof widget.render !== 'function';
         })) {
-          throw new Error(withUsage$q('The widget definition expects a `render` and/or an `init` method.'));
+          throw new Error(withUsage$u('The widget definition expects a `render` and/or an `init` method.'));
         }
+        widgets.forEach(function (widget) {
+          if (isIndexWidget(widget)) {
+            return;
+          }
+          if (localInstantSearchInstance && widget.dependsOn === 'recommend') {
+            localInstantSearchInstance._hasRecommendWidget = true;
+          } else if (localInstantSearchInstance) {
+            localInstantSearchInstance._hasSearchWidget = true;
+          } else if (widget.dependsOn === 'recommend') {
+            hasRecommendWidget = true;
+          } else {
+            hasSearchWidget = true;
+          }
+          addWidgetId(widget);
+        });
         localWidgets = localWidgets.concat(widgets);
         if (localInstantSearchInstance && Boolean(widgets.length)) {
           privateHelperSetState(helper, {
@@ -15033,26 +15542,51 @@
       removeWidgets: function removeWidgets(widgets) {
         var _this2 = this;
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$q('The `removeWidgets` method expects an array of widgets.'));
+          throw new Error(withUsage$u('The `removeWidgets` method expects an array of widgets.'));
         }
         if (widgets.some(function (widget) {
           return typeof widget.dispose !== 'function';
         })) {
-          throw new Error(withUsage$q('The widget definition expects a `dispose` method.'));
+          throw new Error(withUsage$u('The widget definition expects a `dispose` method.'));
         }
         localWidgets = localWidgets.filter(function (widget) {
           return widgets.indexOf(widget) === -1;
         });
+        localWidgets.forEach(function (widget) {
+          if (isIndexWidget(widget)) {
+            return;
+          }
+          if (localInstantSearchInstance && widget.dependsOn === 'recommend') {
+            localInstantSearchInstance._hasRecommendWidget = true;
+          } else if (localInstantSearchInstance) {
+            localInstantSearchInstance._hasSearchWidget = true;
+          } else if (widget.dependsOn === 'recommend') {
+            hasRecommendWidget = true;
+          } else {
+            hasSearchWidget = true;
+          }
+        });
         if (localInstantSearchInstance && Boolean(widgets.length)) {
-          var cleanedState = widgets.reduce(function (state, widget) {
-            // the `dispose` method exists at this point we already assert it
-            var next = widget.dispose({
-              helper: helper,
-              state: state,
-              parent: _this2
-            });
-            return next || state;
-          }, helper.state);
+          var _widgets$reduce = widgets.reduce(function (states, widget) {
+              // the `dispose` method exists at this point we already assert it
+              var next = widget.dispose({
+                helper: helper,
+                state: states.cleanedSearchState,
+                recommendState: states.cleanedRecommendState,
+                parent: _this2
+              });
+              if (next instanceof algoliasearchHelper_1.RecommendParameters) {
+                states.cleanedRecommendState = next;
+              } else if (next) {
+                states.cleanedSearchState = next;
+              }
+              return states;
+            }, {
+              cleanedSearchState: helper.state,
+              cleanedRecommendState: helper.recommendState
+            }),
+            cleanedSearchState = _widgets$reduce.cleanedSearchState,
+            cleanedRecommendState = _widgets$reduce.cleanedRecommendState;
           var newState = localInstantSearchInstance.future.preserveSharedStateOnUnmount ? getLocalWidgetsSearchParameters(localWidgets, {
             uiState: localUiState,
             initialSearchParameters: new algoliasearchHelper_1.SearchParameters({
@@ -15060,16 +15594,17 @@
             })
           }) : getLocalWidgetsSearchParameters(localWidgets, {
             uiState: getLocalWidgetsUiState(localWidgets, {
-              searchParameters: cleanedState,
+              searchParameters: cleanedSearchState,
               helper: helper
             }),
-            initialSearchParameters: cleanedState
+            initialSearchParameters: cleanedSearchState
           });
           localUiState = getLocalWidgetsUiState(localWidgets, {
             searchParameters: newState,
             helper: helper
           });
           helper.setState(newState);
+          helper.recommendState = cleanedRecommendState;
           if (localWidgets.length) {
             localInstantSearchInstance.scheduleSearch();
           }
@@ -15145,13 +15680,20 @@
           return _this3.getHelper().recommendState;
         });
         var indexInitialResults = (_instantSearchInstanc = instantSearchInstance._initialResults) === null || _instantSearchInstanc === void 0 ? void 0 : _instantSearchInstanc[this.getIndexId()];
-        if (indexInitialResults) {
+        if (indexInitialResults !== null && indexInitialResults !== void 0 && indexInitialResults.results) {
           // We restore the shape of the results provided to the instance to respect
           // the helper's structure.
           var results = new algoliasearchHelper_1.SearchResults(new algoliasearchHelper_1.SearchParameters(indexInitialResults.state), indexInitialResults.results);
           derivedHelper.lastResults = results;
           helper.lastResults = results;
         }
+        if (indexInitialResults !== null && indexInitialResults !== void 0 && indexInitialResults.recommendResults) {
+          var recommendResults = new algoliasearchHelper_1.RecommendResults(new algoliasearchHelper_1.RecommendParameters({
+            params: indexInitialResults.recommendResults.params
+          }), indexInitialResults.recommendResults.results);
+          derivedHelper.lastRecommendResults = recommendResults;
+          helper.lastRecommendResults = recommendResults;
+        }
 
         // Subscribe to the Helper state changes for the page before widgets
         // are initialized. This behavior mimics the original one of the Helper.
@@ -15255,9 +15797,16 @@
           // schedule a render that will render the results injected on the helper.
           instantSearchInstance.scheduleRender();
         }
+        if (hasRecommendWidget) {
+          instantSearchInstance._hasRecommendWidget = true;
+        }
+        if (hasSearchWidget) {
+          instantSearchInstance._hasSearchWidget = true;
+        }
       },
       render: function render(_ref6) {
-        var _this4 = this;
+        var _derivedHelper2,
+          _this4 = this;
         var instantSearchInstance = _ref6.instantSearchInstance;
         // we can't attach a listener to the error event of search, as the error
         // then would no longer be thrown for global handlers.
@@ -15267,7 +15816,7 @@
 
         // We only render index widgets if there are no results.
         // This makes sure `render` is never called with `results` being `null`.
-        var widgetsToRender = this.getResults() ? localWidgets : localWidgets.filter(isIndexWidget);
+        var widgetsToRender = this.getResults() || (_derivedHelper2 = derivedHelper) !== null && _derivedHelper2 !== void 0 && _derivedHelper2.lastRecommendResults ? localWidgets : localWidgets.filter(isIndexWidget);
         widgetsToRender = widgetsToRender.filter(function (widget) {
           if (!widget.shouldRender) {
             return true;
@@ -15278,7 +15827,7 @@
         });
         widgetsToRender.forEach(function (widget) {
           if (widget.getRenderState) {
-            var renderState = widget.getRenderState(instantSearchInstance.renderState[_this4.getIndexId()] || {}, createRenderArgs(instantSearchInstance, _this4));
+            var renderState = widget.getRenderState(instantSearchInstance.renderState[_this4.getIndexId()] || {}, createRenderArgs(instantSearchInstance, _this4, widget));
             storeRenderState({
               renderState: renderState,
               instantSearchInstance: instantSearchInstance,
@@ -15295,14 +15844,14 @@
           // not have results yet.
 
           if (widget.render) {
-            widget.render(createRenderArgs(instantSearchInstance, _this4));
+            widget.render(createRenderArgs(instantSearchInstance, _this4, widget));
           }
         });
       },
       dispose: function dispose() {
         var _this5 = this,
-          _helper,
-          _derivedHelper2;
+          _helper2,
+          _derivedHelper3;
         localWidgets.forEach(function (widget) {
           if (widget.dispose && helper) {
             // The dispose function is always called once the instance is started
@@ -15314,15 +15863,16 @@
             widget.dispose({
               helper: helper,
               state: helper.state,
+              recommendState: helper.recommendState,
               parent: _this5
             });
           }
         });
         localInstantSearchInstance = null;
         localParent = null;
-        (_helper = helper) === null || _helper === void 0 ? void 0 : _helper.removeAllListeners();
+        (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.removeAllListeners();
         helper = null;
-        (_derivedHelper2 = derivedHelper) === null || _derivedHelper2 === void 0 ? void 0 : _derivedHelper2.detach();
+        (_derivedHelper3 = derivedHelper) === null || _derivedHelper3 === void 0 ? void 0 : _derivedHelper3.detach();
         derivedHelper = null;
       },
       getWidgetUiState: function getWidgetUiState(uiState) {
@@ -15428,9 +15978,9 @@
     };
   }
 
-  var version$1 = '4.68.1';
+  var version$1 = '4.70.0';
 
-  var withUsage$r = createDocumentationMessageGenerator({
+  var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
   });
   function defaultCreateURL() {
@@ -15481,6 +16031,8 @@
       _defineProperty(_assertThisInitialized(_this), "_createURL", void 0);
       _defineProperty(_assertThisInitialized(_this), "_searchFunction", void 0);
       _defineProperty(_assertThisInitialized(_this), "_mainHelperSearch", void 0);
+      _defineProperty(_assertThisInitialized(_this), "_hasSearchWidget", false);
+      _defineProperty(_assertThisInitialized(_this), "_hasRecommendWidget", false);
       _defineProperty(_assertThisInitialized(_this), "_insights", void 0);
       _defineProperty(_assertThisInitialized(_this), "middleware", []);
       _defineProperty(_assertThisInitialized(_this), "sendEventToInsights", void 0);
@@ -15545,7 +16097,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$r('The `searchClient` option is required.'));
+        throw new Error(withUsage$v('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/");
@@ -15555,7 +16107,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$r('The `insightsClient` option should be a function.'));
+        throw new Error(withUsage$v('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'
@@ -15716,12 +16268,12 @@
       key: "addWidgets",
       value: function addWidgets(widgets) {
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$r('The `addWidgets` method expects an array of widgets. Please use `addWidget`.'));
+          throw new Error(withUsage$v('The `addWidgets` method expects an array of widgets. Please use `addWidget`.'));
         }
         if (widgets.some(function (widget) {
           return typeof widget.init !== 'function' && typeof widget.render !== 'function';
         })) {
-          throw new Error(withUsage$r('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.'));
         }
         this.mainIndex.addWidgets(widgets);
         return this;
@@ -15751,12 +16303,12 @@
       key: "removeWidgets",
       value: function removeWidgets(widgets) {
         if (!Array.isArray(widgets)) {
-          throw new Error(withUsage$r('The `removeWidgets` method expects an array of widgets. Please use `removeWidget`.'));
+          throw new Error(withUsage$v('The `removeWidgets` method expects an array of widgets. Please use `removeWidget`.'));
         }
         if (widgets.some(function (widget) {
           return typeof widget.dispose !== 'function';
         })) {
-          throw new Error(withUsage$r('The widget definition expects a `dispose` method.'));
+          throw new Error(withUsage$v('The widget definition expects a `dispose` method.'));
         }
         this.mainIndex.removeWidgets(widgets);
         return this;
@@ -15771,7 +16323,7 @@
       value: function start() {
         var _this3 = this;
         if (this.started) {
-          throw new Error(withUsage$r('The `start` method has already been called once.'));
+          throw new Error(withUsage$v('The `start` method has already been called once.'));
         }
 
         // This Helper is used for the queries, we don't care about its state. The
@@ -15791,7 +16343,13 @@
           // under the hood, we have a different implementation. It should be
           // completely transparent for the rest of the codebase. Only this module
           // is impacted.
-          return mainHelper.searchOnlyWithDerivedHelpers() && mainHelper.recommend();
+          if (_this3._hasSearchWidget) {
+            mainHelper.searchOnlyWithDerivedHelpers();
+          }
+          if (_this3._hasRecommendWidget) {
+            mainHelper.recommend();
+          }
+          return mainHelper;
         };
         if (this._searchFunction) {
           // this client isn't used to actually search, but required for the helper
@@ -15858,6 +16416,7 @@
         });
         if (this._initialResults) {
           hydrateSearchClient(this.client, this._initialResults);
+          hydrateRecommendCache(this.mainHelper, this._initialResults);
           var originalScheduleSearch = this.scheduleSearch;
           // We don't schedule a first search when initial results are provided
           // because we already have the results to render. This skips the initial
@@ -15968,7 +16527,7 @@
         var _this5 = this;
         var callOnStateChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         if (!this.mainHelper) {
-          throw new Error(withUsage$r('The `start` method needs to be called before `setUiState`.'));
+          throw new Error(withUsage$v('The `start` method needs to be called before `setUiState`.'));
         }
 
         // We refresh the index UI state to update the local UI state that the
@@ -16004,7 +16563,7 @@
       value: function createURL() {
         var nextState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (!this.started) {
-          throw new Error(withUsage$r('The `start` method needs to be called before `createURL`.'));
+          throw new Error(withUsage$v('The `start` method needs to be called before `createURL`.'));
         }
         return this._createURL(nextState);
       }
@@ -16012,7 +16571,7 @@
       key: "refresh",
       value: function refresh() {
         if (!this.mainHelper) {
-          throw new Error(withUsage$r('The `start` method needs to be called before `refresh`.'));
+          throw new Error(withUsage$v('The `start` method needs to be called before `refresh`.'));
         }
         this.mainHelper.clearCache().search();
       }
@@ -16092,6 +16651,70 @@
 
   var _extends$1 = unwrapExports(_extends_1);
 
+  var _typeof_1 = createCommonjsModule(function (module) {
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+  }
+  module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(_typeof_1);
+
+  var toPrimitive = createCommonjsModule(function (module) {
+  var _typeof = _typeof_1["default"];
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  module.exports = _toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(toPrimitive);
+
+  var toPropertyKey = createCommonjsModule(function (module) {
+  var _typeof = _typeof_1["default"];
+
+  function _toPropertyKey(arg) {
+    var key = toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+  module.exports = _toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(toPropertyKey);
+
+  var defineProperty = createCommonjsModule(function (module) {
+  function _defineProperty(obj, key, value) {
+    key = toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  var _defineProperty$1 = unwrapExports(defineProperty);
+
   var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
@@ -16143,45 +16766,192 @@
     }, []).filter(Boolean).join(' ');
   }
 
-  var _excluded$9 = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
-  function createHighlightPartComponent(_ref) {
+  function createDefaultEmptyComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    var _ref2 = createElement(Fragment, null, "No results");
+    return function DefaultEmpty() {
+      return _ref2;
+    };
+  }
+
+  function createDefaultHeaderComponent(_ref) {
     var createElement = _ref.createElement;
-    return function HighlightPart(_ref2) {
-      var classNames = _ref2.classNames,
-        children = _ref2.children,
-        highlightedTagName = _ref2.highlightedTagName,
-        isHighlighted = _ref2.isHighlighted,
-        nonHighlightedTagName = _ref2.nonHighlightedTagName;
-      var TagName = isHighlighted ? highlightedTagName : nonHighlightedTagName;
-      return createElement(TagName, {
-        className: isHighlighted ? classNames.highlighted : classNames.nonHighlighted
-      }, children);
+    return function DefaultHeader(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        items = userProps.items,
+        translations = userProps.translations;
+      if (!items || items.length < 1) {
+        return null;
+      }
+      if (!translations.title) {
+        return null;
+      }
+      return createElement("h3", {
+        className: classNames.title
+      }, translations.title);
     };
   }
-  function createHighlightComponent(_ref3) {
-    var createElement = _ref3.createElement,
-      Fragment = _ref3.Fragment;
-    var HighlightPart = createHighlightPartComponent({
-      createElement: createElement,
-      Fragment: Fragment
-    });
-    return function Highlight(userProps) {
-      var parts = userProps.parts,
-        _userProps$highlighte = userProps.highlightedTagName,
-        highlightedTagName = _userProps$highlighte === void 0 ? 'mark' : _userProps$highlighte,
-        _userProps$nonHighlig = userProps.nonHighlightedTagName,
-        nonHighlightedTagName = _userProps$nonHighlig === void 0 ? 'span' : _userProps$nonHighlig,
-        _userProps$separator = userProps.separator,
-        separator = _userProps$separator === void 0 ? ', ' : _userProps$separator,
-        className = userProps.className,
-        _userProps$classNames = userProps.classNames,
+
+  function createDefaultItemComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    return function DefaultItem(userProps) {
+      return createElement(Fragment, null, JSON.stringify(userProps.item, null, 2));
+    };
+  }
+
+  function createListViewComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function ListView(userProps) {
+      var _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
-        props = _objectWithoutProperties$1(userProps, _excluded$9);
-      return createElement("span", _extends$1({}, props, {
-        className: cx(classNames.root, className)
-      }), parts.map(function (part, partIndex) {
-        var isLastPart = partIndex === parts.length - 1;
-        return createElement(Fragment, {
+        ItemComponent = userProps.itemComponent,
+        items = userProps.items,
+        sendEvent = userProps.sendEvent;
+      return createElement("div", {
+        className: classNames.container
+      }, createElement("ol", {
+        className: classNames.list
+      }, items.map(function (item) {
+        return createElement("li", {
+          key: item.objectID,
+          className: classNames.item,
+          onClick: sendEvent,
+          onAuxClick: sendEvent
+        }, createElement(ItemComponent, {
+          item: item
+        }));
+      })));
+    };
+  }
+
+  var _excluded$9 = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+  function ownKeys$1(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
+        _defineProperty$1(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  function createFrequentlyBoughtTogetherComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    return function FrequentlyBoughtTogether(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        _userProps$emptyCompo = userProps.emptyComponent,
+        EmptyComponent = _userProps$emptyCompo === void 0 ? createDefaultEmptyComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$emptyCompo,
+        _userProps$headerComp = userProps.headerComponent,
+        HeaderComponent = _userProps$headerComp === void 0 ? createDefaultHeaderComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$headerComp,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$itemCompon,
+        _userProps$view = userProps.view,
+        View = _userProps$view === void 0 ? createListViewComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$view,
+        items = userProps.items,
+        status = userProps.status,
+        userTranslations = userProps.translations,
+        sendEvent = userProps.sendEvent,
+        props = _objectWithoutProperties$1(userProps, _excluded$9);
+      var translations = _objectSpread({
+        title: 'Frequently bought together',
+        sliderLabel: 'Frequently bought together products'
+      }, userTranslations);
+      var cssClasses = {
+        root: cx('ais-FrequentlyBoughtTogether', classNames.root),
+        emptyRoot: cx('ais-FrequentlyBoughtTogether', classNames.root, 'ais-FrequentlyBoughtTogether--empty', classNames.emptyRoot, props.className),
+        title: cx('ais-FrequentlyBoughtTogether-title', classNames.title),
+        container: cx('ais-FrequentlyBoughtTogether-container', classNames.container),
+        list: cx('ais-FrequentlyBoughtTogether-list', classNames.list),
+        item: cx('ais-FrequentlyBoughtTogether-item', classNames.item)
+      };
+      if (items.length === 0 && status === 'idle') {
+        return createElement("section", _extends$1({}, props, {
+          className: cssClasses.emptyRoot
+        }), createElement(EmptyComponent, null));
+      }
+      return createElement("section", _extends$1({}, props, {
+        className: cssClasses.root
+      }), createElement(HeaderComponent, {
+        classNames: cssClasses,
+        items: items,
+        translations: translations
+      }), createElement(View, {
+        classNames: cssClasses,
+        translations: translations,
+        itemComponent: ItemComponent,
+        items: items,
+        sendEvent: sendEvent
+      }));
+    };
+  }
+
+  var _excluded$a = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
+  function createHighlightPartComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function HighlightPart(_ref2) {
+      var classNames = _ref2.classNames,
+        children = _ref2.children,
+        highlightedTagName = _ref2.highlightedTagName,
+        isHighlighted = _ref2.isHighlighted,
+        nonHighlightedTagName = _ref2.nonHighlightedTagName;
+      var TagName = isHighlighted ? highlightedTagName : nonHighlightedTagName;
+      return createElement(TagName, {
+        className: isHighlighted ? classNames.highlighted : classNames.nonHighlighted
+      }, children);
+    };
+  }
+  function createHighlightComponent(_ref3) {
+    var createElement = _ref3.createElement,
+      Fragment = _ref3.Fragment;
+    var HighlightPart = createHighlightPartComponent({
+      createElement: createElement,
+      Fragment: Fragment
+    });
+    return function Highlight(userProps) {
+      var parts = userProps.parts,
+        _userProps$highlighte = userProps.highlightedTagName,
+        highlightedTagName = _userProps$highlighte === void 0 ? 'mark' : _userProps$highlighte,
+        _userProps$nonHighlig = userProps.nonHighlightedTagName,
+        nonHighlightedTagName = _userProps$nonHighlig === void 0 ? 'span' : _userProps$nonHighlig,
+        _userProps$separator = userProps.separator,
+        separator = _userProps$separator === void 0 ? ', ' : _userProps$separator,
+        className = userProps.className,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        props = _objectWithoutProperties$1(userProps, _excluded$a);
+      return createElement("span", _extends$1({}, props, {
+        className: cx(classNames.root, className)
+      }), parts.map(function (part, partIndex) {
+        var isLastPart = partIndex === parts.length - 1;
+        return createElement(Fragment, {
           key: partIndex
         }, part.map(function (subPart, subPartIndex) {
           return createElement(HighlightPart, {
@@ -16198,14 +16968,13 @@
     };
   }
 
-  var _excluded$a = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
+  var _excluded$b = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 
   // Should be imported from a shared package in the future
 
   function createDefaultBannerComponent(_ref) {
     var createElement = _ref.createElement;
     return function DefaultBanner(_ref2) {
-      var _banner$link;
       var classNames = _ref2.classNames,
         banner = _ref2.banner;
       if (!banner.image.urls[0].url) {
@@ -16213,7 +16982,7 @@
       }
       return createElement("aside", {
         className: cx('ais-Hits-banner', classNames.bannerRoot)
-      }, (_banner$link = banner.link) !== null && _banner$link !== void 0 && _banner$link.url ? createElement("a", {
+      }, banner.link ? createElement("a", {
         className: cx('ais-Hits-banner-link', classNames.bannerLink),
         href: banner.link.url,
         target: banner.link.target
@@ -16244,7 +17013,7 @@
         EmptyComponent = userProps.emptyComponent,
         banner = userProps.banner,
         BannerComponent = userProps.bannerComponent,
-        props = _objectWithoutProperties$1(userProps, _excluded$a);
+        props = _objectWithoutProperties$1(userProps, _excluded$b);
       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, {
@@ -16272,6 +17041,264 @@
     };
   }
 
+  var _excluded$c = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+  function ownKeys$2(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread$1(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) {
+        _defineProperty$1(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  function createRelatedProductsComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    return function RelatedProducts(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        _userProps$emptyCompo = userProps.emptyComponent,
+        EmptyComponent = _userProps$emptyCompo === void 0 ? createDefaultEmptyComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$emptyCompo,
+        _userProps$headerComp = userProps.headerComponent,
+        HeaderComponent = _userProps$headerComp === void 0 ? createDefaultHeaderComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$headerComp,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$itemCompon,
+        _userProps$view = userProps.view,
+        View = _userProps$view === void 0 ? createListViewComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$view,
+        items = userProps.items,
+        status = userProps.status,
+        userTranslations = userProps.translations,
+        sendEvent = userProps.sendEvent,
+        props = _objectWithoutProperties$1(userProps, _excluded$c);
+      var translations = _objectSpread$1({
+        title: 'Related products',
+        sliderLabel: 'Related products'
+      }, userTranslations);
+      var cssClasses = {
+        root: cx('ais-RelatedProducts', classNames.root),
+        emptyRoot: cx('ais-RelatedProducts', classNames.root, 'ais-RelatedProducts--empty', classNames.emptyRoot, props.className),
+        title: cx('ais-RelatedProducts-title', classNames.title),
+        container: cx('ais-RelatedProducts-container', classNames.container),
+        list: cx('ais-RelatedProducts-list', classNames.list),
+        item: cx('ais-RelatedProducts-item', classNames.item)
+      };
+      if (items.length === 0 && status === 'idle') {
+        return createElement("section", _extends$1({}, props, {
+          className: cssClasses.emptyRoot
+        }), createElement(EmptyComponent, null));
+      }
+      return createElement("section", _extends$1({}, props, {
+        className: cssClasses.root
+      }), createElement(HeaderComponent, {
+        classNames: cssClasses,
+        items: items,
+        translations: translations
+      }), createElement(View, {
+        classNames: cssClasses,
+        translations: translations,
+        itemComponent: ItemComponent,
+        items: items,
+        sendEvent: sendEvent
+      }));
+    };
+  }
+
+  var _excluded$d = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+  function ownKeys$3(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread$2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) {
+        _defineProperty$1(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  function createTrendingItemsComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    return function TrendingItems(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        _userProps$emptyCompo = userProps.emptyComponent,
+        EmptyComponent = _userProps$emptyCompo === void 0 ? createDefaultEmptyComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$emptyCompo,
+        _userProps$headerComp = userProps.headerComponent,
+        HeaderComponent = _userProps$headerComp === void 0 ? createDefaultHeaderComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$headerComp,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$itemCompon,
+        _userProps$view = userProps.view,
+        View = _userProps$view === void 0 ? createListViewComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$view,
+        items = userProps.items,
+        status = userProps.status,
+        userTranslations = userProps.translations,
+        sendEvent = userProps.sendEvent,
+        props = _objectWithoutProperties$1(userProps, _excluded$d);
+      var translations = _objectSpread$2({
+        title: 'Trending items',
+        sliderLabel: 'Trending items'
+      }, userTranslations);
+      var cssClasses = {
+        root: cx('ais-TrendingItems', classNames.root),
+        emptyRoot: cx('ais-TrendingItems', classNames.root, 'ais-TrendingItems--empty', classNames.emptyRoot, props.className),
+        title: cx('ais-TrendingItems-title', classNames.title),
+        container: cx('ais-TrendingItems-container', classNames.container),
+        list: cx('ais-TrendingItems-list', classNames.list),
+        item: cx('ais-TrendingItems-item', classNames.item)
+      };
+      if (items.length === 0 && status === 'idle') {
+        return createElement("section", _extends$1({}, props, {
+          className: cssClasses.emptyRoot
+        }), createElement(EmptyComponent, null));
+      }
+      return createElement("section", _extends$1({}, props, {
+        className: cssClasses.root
+      }), createElement(HeaderComponent, {
+        classNames: cssClasses,
+        items: items,
+        translations: translations
+      }), createElement(View, {
+        classNames: cssClasses,
+        translations: translations,
+        itemComponent: ItemComponent,
+        items: items,
+        sendEvent: sendEvent
+      }));
+    };
+  }
+
+  var _excluded$e = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+  function ownKeys$4(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread$3(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) {
+        _defineProperty$1(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  function createLookingSimilarComponent(_ref) {
+    var createElement = _ref.createElement,
+      Fragment = _ref.Fragment;
+    return function LookingSimilar(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        _userProps$emptyCompo = userProps.emptyComponent,
+        EmptyComponent = _userProps$emptyCompo === void 0 ? createDefaultEmptyComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$emptyCompo,
+        _userProps$headerComp = userProps.headerComponent,
+        HeaderComponent = _userProps$headerComp === void 0 ? createDefaultHeaderComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$headerComp,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$itemCompon,
+        _userProps$view = userProps.view,
+        View = _userProps$view === void 0 ? createListViewComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$view,
+        items = userProps.items,
+        status = userProps.status,
+        userTranslations = userProps.translations,
+        sendEvent = userProps.sendEvent,
+        props = _objectWithoutProperties$1(userProps, _excluded$e);
+      var translations = _objectSpread$3({
+        title: 'Looking similar',
+        sliderLabel: 'Looking similar'
+      }, userTranslations);
+      var cssClasses = {
+        root: cx('ais-LookingSimilar', classNames.root),
+        emptyRoot: cx('ais-LookingSimilar', classNames.root, 'ais-LookingSimilar--empty', classNames.emptyRoot, props.className),
+        title: cx('ais-LookingSimilar-title', classNames.title),
+        container: cx('ais-LookingSimilar-container', classNames.container),
+        list: cx('ais-LookingSimilar-list', classNames.list),
+        item: cx('ais-LookingSimilar-item', classNames.item)
+      };
+      if (items.length === 0 && status === 'idle') {
+        return createElement("section", _extends$1({}, props, {
+          className: cssClasses.emptyRoot
+        }), createElement(EmptyComponent, null));
+      }
+      return createElement("section", _extends$1({}, props, {
+        className: cssClasses.root
+      }), createElement(HeaderComponent, {
+        classNames: cssClasses,
+        items: items,
+        translations: translations
+      }), createElement(View, {
+        classNames: cssClasses,
+        translations: translations,
+        itemComponent: ItemComponent,
+        items: items,
+        sendEvent: sendEvent
+      }));
+    };
+  }
+
   function prepareTemplates(
   // can not use = {} here, since the template could have different constraints
   defaultTemplates) {
@@ -17088,11 +18115,11 @@
     Fragment: p
   });
 
-  var _excluded$b = ["classNames"];
+  var _excluded$f = ["classNames"];
   function Highlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$f);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Highlight', classNames.root),
@@ -17103,12 +18130,12 @@
     }, props));
   }
 
-  var _excluded$c = ["hit", "attribute", "cssClasses"];
+  var _excluded$g = ["hit", "attribute", "cssClasses"];
   function Highlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$g);
     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")) ;
@@ -17122,11 +18149,11 @@
     }));
   }
 
-  var _excluded$d = ["classNames"];
+  var _excluded$h = ["classNames"];
   function ReverseHighlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$h);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseHighlight', classNames.root),
@@ -17137,13 +18164,13 @@
     }, props));
   }
 
-  var _excluded$e = ["hit", "attribute", "cssClasses"],
+  var _excluded$i = ["hit", "attribute", "cssClasses"],
     _excluded2$3 = ["isHighlighted"];
   function ReverseHighlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$i);
     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")) ;
@@ -17163,11 +18190,11 @@
     }));
   }
 
-  var _excluded$f = ["classNames"];
+  var _excluded$j = ["classNames"];
   function ReverseSnippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$j);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseSnippet', classNames.root),
@@ -17178,13 +18205,13 @@
     }, props));
   }
 
-  var _excluded$g = ["hit", "attribute", "cssClasses"],
+  var _excluded$k = ["hit", "attribute", "cssClasses"],
     _excluded2$4 = ["isHighlighted"];
   function ReverseSnippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$k);
     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")) ;
@@ -17204,11 +18231,11 @@
     }));
   }
 
-  var _excluded$h = ["classNames"];
+  var _excluded$l = ["classNames"];
   function Snippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$l);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Snippet', classNames.root),
@@ -17219,12 +18246,12 @@
     }, props));
   }
 
-  var _excluded$i = ["hit", "attribute", "cssClasses"];
+  var _excluded$m = ["hit", "attribute", "cssClasses"];
   function Snippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$m);
     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")) ;
@@ -17468,7 +18495,7 @@
     }
   };
 
-  var withUsage$s = createDocumentationMessageGenerator({
+  var withUsage$w = createDocumentationMessageGenerator({
     name: 'answers'
   });
   var suit$4 = component('Answers');
@@ -17515,7 +18542,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$s('The `container` option is required.'));
+      throw new Error(withUsage$w('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -17559,8 +18586,8 @@
   };
   var answers = deprecate(answersWidget, 'The answers widget is deprecated and will be removed in InstantSearch.js 5.0');
 
-  var _excluded$j = ["container", "widgets", "fallbackWidget"];
-  var withUsage$t = createDocumentationMessageGenerator({
+  var _excluded$n = ["container", "widgets", "fallbackWidget"];
+  var withUsage$x = createDocumentationMessageGenerator({
     name: 'dynamic-widgets'
   });
   var suit$5 = component('DynamicWidgets');
@@ -17577,14 +18604,14 @@
       containerSelector = _ref.container,
       widgets = _ref.widgets,
       fallbackWidget = _ref.fallbackWidget,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$j);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$n);
     if (!containerSelector) {
-      throw new Error(withUsage$t('The `container` option is required.'));
+      throw new Error(withUsage$x('The `container` option is required.'));
     }
     if (!(widgets && Array.isArray(widgets) && widgets.every(function (widget) {
       return typeof widget === 'function';
     }))) {
-      throw new Error(withUsage$t('The `widgets` option expects an array of callbacks.'));
+      throw new Error(withUsage$x('The `widgets` option expects an array of callbacks.'));
     }
     var userContainer = getContainerNode(containerSelector);
     var rootContainer = document.createElement('div');
@@ -17633,7 +18660,7 @@
     });
   };
 
-  var withUsage$u = createDocumentationMessageGenerator({
+  var withUsage$y = createDocumentationMessageGenerator({
     name: 'analytics'
   });
   // @major this widget will be removed from the next major version.
@@ -17649,7 +18676,7 @@
       _ref$pushPagination = _ref.pushPagination,
       pushPagination = _ref$pushPagination === void 0 ? false : _ref$pushPagination;
     if (!pushFunction) {
-      throw new Error(withUsage$u('The `pushFunction` option is required.'));
+      throw new Error(withUsage$y('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;
@@ -17835,7 +18862,7 @@
     }
   };
 
-  var withUsage$v = createDocumentationMessageGenerator({
+  var withUsage$z = createDocumentationMessageGenerator({
     name: 'breadcrumb'
   });
   var suit$6 = component('Breadcrumb');
@@ -17880,7 +18907,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$v('The `container` option is required.'));
+      throw new Error(withUsage$z('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -17951,7 +18978,7 @@
     }
   };
 
-  var withUsage$w = createDocumentationMessageGenerator({
+  var withUsage$A = createDocumentationMessageGenerator({
     name: 'clear-refinements'
   });
   var suit$7 = component('ClearRefinements');
@@ -17991,7 +19018,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$A('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -18085,7 +19112,7 @@
     })));
   };
 
-  var withUsage$x = createDocumentationMessageGenerator({
+  var withUsage$B = createDocumentationMessageGenerator({
     name: 'current-refinements'
   });
   var suit$8 = component('CurrentRefinements');
@@ -18114,7 +19141,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$B('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -18551,10 +19578,10 @@
     }), container.querySelector(".".concat(cssClasses.tree)));
   };
 
-  var _excluded$k = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
+  var _excluded$o = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
     _excluded2$5 = ["item"],
     _excluded3 = ["item"];
-  var withUsage$y = createDocumentationMessageGenerator({
+  var withUsage$C = createDocumentationMessageGenerator({
     name: 'geo-search'
   });
   var suit$9 = component('GeoSearch');
@@ -18595,7 +19622,7 @@
       enableRefineControl = _ref$enableRefineCont === void 0 ? true : _ref$enableRefineCont,
       container = _ref.container,
       googleReference = _ref.googleReference,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$k);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$o);
     var defaultBuiltInMarker = {
       createOptions: function createOptions() {
         return {};
@@ -18609,10 +19636,10 @@
       events: {}
     };
     if (!container) {
-      throw new Error(withUsage$y('The `container` option is required.'));
+      throw new Error(withUsage$C('The `container` option is required.'));
     }
     if (!googleReference) {
-      throw new Error(withUsage$y('The `googleReference` option is required.'));
+      throw new Error(withUsage$C('The `googleReference` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -18932,7 +19959,7 @@
     })), subItems);
   }
 
-  var _excluded$l = ["root"];
+  var _excluded$p = ["root"];
 
   // CSS types
 
@@ -18959,7 +19986,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$l);
+            cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$p);
           subItems = h(RefinementList, _extends({}, _this.props, {
             // We want to keep `root` required for external usage but not for the
             // sub items.
@@ -19156,7 +20183,7 @@
     }
   };
 
-  var withUsage$z = createDocumentationMessageGenerator({
+  var withUsage$D = createDocumentationMessageGenerator({
     name: 'hierarchical-menu'
   });
   var suit$a = component('HierarchicalMenu');
@@ -19266,7 +20293,7 @@
       _ref3$cssClasses = _ref3.cssClasses,
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
     if (!container) {
-      throw new Error(withUsage$z('The `container` option is required.'));
+      throw new Error(withUsage$D('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -19347,8 +20374,8 @@
     }
   };
 
-  var _excluded$m = ["hit", "index"];
-  var withUsage$A = createDocumentationMessageGenerator({
+  var _excluded$q = ["hit", "index"];
+  var withUsage$E = createDocumentationMessageGenerator({
     name: 'hits'
   });
   var Hits = createHitsComponent({
@@ -19395,7 +20422,7 @@
       var itemComponent = function itemComponent(_ref4) {
         var hit = _ref4.hit,
           index = _ref4.index,
-          rootProps = _objectWithoutProperties(_ref4, _excluded$m);
+          rootProps = _objectWithoutProperties(_ref4, _excluded$q);
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "li",
@@ -19447,7 +20474,7 @@
       _ref5$cssClasses = _ref5.cssClasses,
       cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
-      throw new Error(withUsage$A('The `container` option is required.'));
+      throw new Error(withUsage$E('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var specializedRenderer = renderer$6({
@@ -19489,7 +20516,7 @@
     }));
   }
 
-  var withUsage$B = createDocumentationMessageGenerator({
+  var withUsage$F = createDocumentationMessageGenerator({
     name: 'hits-per-page'
   });
   var suit$b = component('HitsPerPage');
@@ -19525,7 +20552,7 @@
       userCssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses,
       transformItems = _ref5.transformItems;
     if (!container) {
-      throw new Error(withUsage$B('The `container` option is required.'));
+      throw new Error(withUsage$F('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -19642,7 +20669,7 @@
     }
   };
 
-  var withUsage$C = createDocumentationMessageGenerator({
+  var withUsage$G = createDocumentationMessageGenerator({
     name: 'infinite-hits'
   });
   var suit$c = component('InfiniteHits');
@@ -19699,7 +20726,7 @@
       showPrevious = _ref3.showPrevious,
       cache = _ref3.cache;
     if (!container) {
-      throw new Error(withUsage$C('The `container` option is required.'));
+      throw new Error(withUsage$G('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -19769,7 +20796,7 @@
     }
   };
 
-  var withUsage$D = createDocumentationMessageGenerator({
+  var withUsage$H = createDocumentationMessageGenerator({
     name: 'menu'
   });
   var suit$d = component('Menu');
@@ -19827,7 +20854,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$D('The `container` option is required.'));
+      throw new Error(withUsage$H('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -19935,7 +20962,7 @@
     }
   };
 
-  var withUsage$E = createDocumentationMessageGenerator({
+  var withUsage$I = createDocumentationMessageGenerator({
     name: 'menu-select'
   });
   var suit$e = component('MenuSelect');
@@ -19978,7 +21005,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$E('The `container` option is required.'));
+      throw new Error(withUsage$I('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -20031,7 +21058,7 @@
     }
   };
 
-  var withUsage$F = createDocumentationMessageGenerator({
+  var withUsage$J = createDocumentationMessageGenerator({
     name: 'numeric-menu'
   });
   var suit$f = component('NumericMenu');
@@ -20075,7 +21102,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$F('The `container` option is required.'));
+      throw new Error(withUsage$J('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -20236,7 +21263,7 @@
   }
 
   var suit$g = component('Pagination');
-  var withUsage$G = createDocumentationMessageGenerator({
+  var withUsage$K = createDocumentationMessageGenerator({
     name: 'pagination'
   });
   var defaultTemplates$a = {
@@ -20318,7 +21345,7 @@
       _ref4$scrollTo = _ref4.scrollTo,
       userScrollTo = _ref4$scrollTo === void 0 ? 'body' : _ref4$scrollTo;
     if (!container) {
-      throw new Error(withUsage$G('The `container` option is required.'));
+      throw new Error(withUsage$K('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var scrollTo = userScrollTo === true ? 'body' : userScrollTo;
@@ -20453,7 +21480,7 @@
     }));
   }
 
-  var withUsage$H = createDocumentationMessageGenerator({
+  var withUsage$L = createDocumentationMessageGenerator({
     name: 'panel'
   });
   var suit$h = component('Panel');
@@ -20530,7 +21557,7 @@
     return function (widgetFactory) {
       return function (widgetParams) {
         if (!(widgetParams && widgetParams.container)) {
-          throw new Error(withUsage$H("The `container` option is required in the widget within the panel."));
+          throw new Error(withUsage$L("The `container` option is required in the widget within the panel."));
         }
         var containerNode = getContainerNode(widgetParams.container);
         var defaultTemplates = {
@@ -20604,7 +21631,7 @@
     };
   };
 
-  var _excluded$n = ["placesReference", "defaultPosition"],
+  var _excluded$r = ["placesReference", "defaultPosition"],
     _excluded2$6 = ["places"];
 
   /* Places.js is an optional dependency, no error should be reported if the package is missing */
@@ -20620,7 +21647,7 @@
       placesReference = _ref.placesReference,
       _ref$defaultPosition = _ref.defaultPosition,
       defaultPosition = _ref$defaultPosition === void 0 ? [] : _ref$defaultPosition,
-      placesOptions = _objectWithoutProperties(_ref, _excluded$n);
+      placesOptions = _objectWithoutProperties(_ref, _excluded$r);
     if (typeof placesReference !== 'function') {
       throw new Error('The `placesReference` option requires a valid Places.js reference.');
     }
@@ -20733,7 +21760,7 @@
   };
 
   var suit$i = component('PoweredBy');
-  var withUsage$I = createDocumentationMessageGenerator({
+  var withUsage$M = createDocumentationMessageGenerator({
     name: 'powered-by'
   });
   var renderer$e = function renderer(_ref) {
@@ -20762,7 +21789,7 @@
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? 'light' : _ref3$theme;
     if (!container) {
-      throw new Error(withUsage$I('The `container` option is required.'));
+      throw new Error(withUsage$M('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -20790,13 +21817,13 @@
     });
   };
 
-  var withUsage$J = createDocumentationMessageGenerator({
+  var withUsage$N = 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$J('The `trackedFilters` option is required.'));
+      throw new Error(withUsage$N('The `trackedFilters` option is required.'));
     }
     return _objectSpread2(_objectSpread2({}, connectQueryRules(noop)(widgetParams)), {}, {
       $$widgetType: 'ais.queryRuleContext'
@@ -20825,7 +21852,7 @@
       return JSON.stringify(items, null, 2);
     }
   };
-  var withUsage$K = createDocumentationMessageGenerator({
+  var withUsage$O = createDocumentationMessageGenerator({
     name: 'query-rule-custom-data'
   });
   var suit$j = component('QueryRuleCustomData');
@@ -20854,7 +21881,7 @@
         return items;
       } : _ref4$transformItems;
     if (!container) {
-      throw new Error(withUsage$K('The `container` option is required.'));
+      throw new Error(withUsage$O('The `container` option is required.'));
     }
     var cssClasses = {
       root: cx(suit$j(), userCssClasses.root)
@@ -20877,6 +21904,107 @@
     });
   };
 
+  var withUsage$P = createDocumentationMessageGenerator({
+    name: 'related-products'
+  });
+  var RelatedProducts = createRelatedProductsComponent({
+    createElement: h,
+    Fragment: p
+  });
+  function createRenderer(_ref) {
+    var renderState = _ref.renderState,
+      cssClasses = _ref.cssClasses,
+      containerNode = _ref.containerNode,
+      templates = _ref.templates;
+    return function renderer(_ref2, isFirstRendering) {
+      var items = _ref2.items,
+        results = _ref2.results,
+        instantSearchInstance = _ref2.instantSearchInstance;
+      if (isFirstRendering) {
+        renderState.templateProps = prepareTemplateProps({
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          defaultTemplates: {},
+          templatesConfig: instantSearchInstance.templatesConfig,
+          templates: templates
+        });
+        return;
+      }
+      var headerComponent = templates.header ? function (data) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "header",
+          rootTagName: "fragment",
+          data: {
+            cssClasses: data.classNames,
+            items: data.items
+          }
+        }));
+      } : undefined;
+      var itemComponent = templates.item ? function (_ref3) {
+        var item = _ref3.item;
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: item
+        }));
+      } : undefined;
+      var emptyComponent = templates.empty ? function () {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "empty",
+          rootTagName: "fragment",
+          data: results
+        }));
+      } : undefined;
+      P(h(RelatedProducts, {
+        items: items,
+        sendEvent: function sendEvent() {},
+        classNames: cssClasses,
+        headerComponent: headerComponent,
+        itemComponent: itemComponent,
+        emptyComponent: emptyComponent,
+        status: instantSearchInstance.status
+      }), containerNode);
+    };
+  }
+  var relatedProducts = function relatedProducts(widgetParams) {
+    var _ref4 = widgetParams || {},
+      container = _ref4.container,
+      objectIDs = _ref4.objectIDs,
+      limit = _ref4.limit,
+      queryParameters = _ref4.queryParameters,
+      fallbackParameters = _ref4.fallbackParameters,
+      threshold = _ref4.threshold,
+      escapeHTML = _ref4.escapeHTML,
+      transformItems = _ref4.transformItems,
+      _ref4$templates = _ref4.templates,
+      templates = _ref4$templates === void 0 ? {} : _ref4$templates,
+      _ref4$cssClasses = _ref4.cssClasses,
+      cssClasses = _ref4$cssClasses === void 0 ? {} : _ref4$cssClasses;
+    if (!container) {
+      throw new Error(withUsage$P('The `container` option is required.'));
+    }
+    var containerNode = getContainerNode(container);
+    var specializedRenderer = createRenderer({
+      containerNode: containerNode,
+      cssClasses: cssClasses,
+      renderState: {},
+      templates: templates
+    });
+    var makeWidget = connectRelatedProducts(specializedRenderer, function () {
+      return P(null, containerNode);
+    });
+    return _objectSpread2(_objectSpread2({}, makeWidget({
+      objectIDs: objectIDs,
+      limit: limit,
+      queryParameters: queryParameters,
+      fallbackParameters: fallbackParameters,
+      threshold: threshold,
+      escapeHTML: escapeHTML,
+      transformItems: transformItems
+    })), {}, {
+      $$widgetType: 'ais.relatedProducts'
+    });
+  };
+
   // Strips leading `0` from a positive number value
   function stripLeadingZeroFromInput(value) {
     return value.replace(/^(0+)\d/, function (part) {
@@ -20987,7 +22115,7 @@
     return RangeInput;
   }(d);
 
-  var withUsage$L = createDocumentationMessageGenerator({
+  var withUsage$Q = createDocumentationMessageGenerator({
     name: 'range-input'
   });
   var suit$k = component('RangeInput');
@@ -21052,7 +22180,7 @@
       _ref3$templates = _ref3.templates,
       templates = _ref3$templates === void 0 ? {} : _ref3$templates;
     if (!container) {
-      throw new Error(withUsage$L('The `container` option is required.'));
+      throw new Error(withUsage$Q('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -21775,7 +22903,7 @@
     return Slider;
   }(d);
 
-  var withUsage$M = createDocumentationMessageGenerator({
+  var withUsage$R = createDocumentationMessageGenerator({
     name: 'range-slider'
   });
   var suit$l = component('RangeSlider');
@@ -21844,7 +22972,7 @@
       _ref3$tooltips = _ref3.tooltips,
       tooltips = _ref3$tooltips === void 0 ? true : _ref3$tooltips;
     if (!container) {
-      throw new Error(withUsage$M('The `container` option is required.'));
+      throw new Error(withUsage$R('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -21923,7 +23051,7 @@
     }
   };
 
-  var withUsage$N = createDocumentationMessageGenerator({
+  var withUsage$S = createDocumentationMessageGenerator({
     name: 'rating-menu'
   });
   var suit$m = component('RatingMenu');
@@ -22011,7 +23139,7 @@
       _ref5$templates = _ref5.templates,
       templates = _ref5$templates === void 0 ? {} : _ref5$templates;
     if (!container) {
-      throw new Error(withUsage$N('The `container` option is required.'));
+      throw new Error(withUsage$S('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22171,7 +23299,7 @@
     }
   };
 
-  var withUsage$O = createDocumentationMessageGenerator({
+  var withUsage$T = createDocumentationMessageGenerator({
     name: 'refinement-list'
   });
   var suit$n = component('RefinementList');
@@ -22271,7 +23399,7 @@
       templates = _ref3$templates === void 0 ? {} : _ref3$templates,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$O('The `container` option is required.'));
+      throw new Error(withUsage$T('The `container` option is required.'));
     }
     var escapeFacetValues = searchable ? Boolean(searchableEscapeFacetValues) : false;
     var containerNode = getContainerNode(container);
@@ -22422,7 +23550,7 @@
     }
   };
 
-  var withUsage$P = createDocumentationMessageGenerator({
+  var withUsage$U = createDocumentationMessageGenerator({
     name: 'relevant-sort'
   });
   var suit$o = component('RelevantSort');
@@ -22450,7 +23578,7 @@
       _widgetParams$cssClas = widgetParams.cssClasses,
       userCssClasses = _widgetParams$cssClas === void 0 ? {} : _widgetParams$cssClas;
     if (!container) {
-      throw new Error(withUsage$P('The `container` option is required.'));
+      throw new Error(withUsage$U('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22477,7 +23605,7 @@
     });
   };
 
-  var withUsage$Q = createDocumentationMessageGenerator({
+  var withUsage$V = createDocumentationMessageGenerator({
     name: 'search-box'
   });
   var suit$p = component('SearchBox');
@@ -22545,7 +23673,7 @@
       _ref3$templates = _ref3.templates,
       userTemplates = _ref3$templates === void 0 ? {} : _ref3$templates;
     if (!container) {
-      throw new Error(withUsage$Q('The `container` option is required.'));
+      throw new Error(withUsage$V('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22598,7 +23726,7 @@
     });
   };
 
-  var withUsage$R = createDocumentationMessageGenerator({
+  var withUsage$W = createDocumentationMessageGenerator({
     name: 'sort-by'
   });
   var suit$q = component('SortBy');
@@ -22636,7 +23764,7 @@
       userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses,
       transformItems = _ref3.transformItems;
     if (!container) {
-      throw new Error(withUsage$R('The `container` option is required.'));
+      throw new Error(withUsage$W('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22664,13 +23792,13 @@
     });
   };
 
-  var _excluded$o = ["nbHits", "nbSortedHits", "cssClasses", "templateProps"];
+  var _excluded$s = ["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$o);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
     return h("div", {
       className: cx(cssClasses.root)
     }, h(Template, _extends({}, templateProps, {
@@ -22693,7 +23821,7 @@
     })));
   };
 
-  var withUsage$S = createDocumentationMessageGenerator({
+  var withUsage$X = createDocumentationMessageGenerator({
     name: 'stats'
   });
   var suit$r = component('Stats');
@@ -22788,7 +23916,7 @@
       _ref5$templates = _ref5.templates,
       templates = _ref5$templates === void 0 ? {} : _ref5$templates;
     if (!container) {
-      throw new Error(withUsage$S('The `container` option is required.'));
+      throw new Error(withUsage$X('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22846,7 +23974,7 @@
     }
   };
 
-  var withUsage$T = createDocumentationMessageGenerator({
+  var withUsage$Y = createDocumentationMessageGenerator({
     name: 'toggle-refinement'
   });
   var suit$s = component('ToggleRefinement');
@@ -22899,7 +24027,7 @@
       on = _ref3$on === void 0 ? true : _ref3$on,
       off = _ref3.off;
     if (!container) {
-      throw new Error(withUsage$T('The `container` option is required.'));
+      throw new Error(withUsage$Y('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -22932,6 +24060,111 @@
     });
   };
 
+  var withUsage$Z = createDocumentationMessageGenerator({
+    name: 'trending-items'
+  });
+  var TrendingItems = createTrendingItemsComponent({
+    createElement: h,
+    Fragment: p
+  });
+  function createRenderer$1(_ref) {
+    var renderState = _ref.renderState,
+      cssClasses = _ref.cssClasses,
+      containerNode = _ref.containerNode,
+      templates = _ref.templates;
+    return function renderer(_ref2, isFirstRendering) {
+      var items = _ref2.items,
+        results = _ref2.results,
+        instantSearchInstance = _ref2.instantSearchInstance;
+      if (isFirstRendering) {
+        renderState.templateProps = prepareTemplateProps({
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          defaultTemplates: {},
+          templatesConfig: instantSearchInstance.templatesConfig,
+          templates: templates
+        });
+        return;
+      }
+      var headerComponent = templates.header ? function (data) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "header",
+          rootTagName: "fragment",
+          data: {
+            cssClasses: data.classNames,
+            items: data.items
+          }
+        }));
+      } : undefined;
+      var itemComponent = templates.item ? function (_ref3) {
+        var item = _ref3.item;
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: item
+        }));
+      } : undefined;
+      var emptyComponent = templates.empty ? function () {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "empty",
+          rootTagName: "fragment",
+          data: results
+        }));
+      } : undefined;
+      P(h(TrendingItems, {
+        items: items,
+        sendEvent: function sendEvent() {},
+        classNames: cssClasses,
+        headerComponent: headerComponent,
+        itemComponent: itemComponent,
+        emptyComponent: emptyComponent,
+        status: instantSearchInstance.status
+      }), containerNode);
+    };
+  }
+  var trendingItems = function trendingItems(widgetParams) {
+    var _ref4 = widgetParams || {},
+      container = _ref4.container,
+      facetName = _ref4.facetName,
+      facetValue = _ref4.facetValue,
+      limit = _ref4.limit,
+      queryParameters = _ref4.queryParameters,
+      fallbackParameters = _ref4.fallbackParameters,
+      threshold = _ref4.threshold,
+      escapeHTML = _ref4.escapeHTML,
+      transformItems = _ref4.transformItems,
+      _ref4$templates = _ref4.templates,
+      templates = _ref4$templates === void 0 ? {} : _ref4$templates,
+      _ref4$cssClasses = _ref4.cssClasses,
+      cssClasses = _ref4$cssClasses === void 0 ? {} : _ref4$cssClasses;
+    if (!container) {
+      throw new Error(withUsage$Z('The `container` option is required.'));
+    }
+    var containerNode = getContainerNode(container);
+    var specializedRenderer = createRenderer$1({
+      containerNode: containerNode,
+      cssClasses: cssClasses,
+      renderState: {},
+      templates: templates
+    });
+    var makeWidget = connectTrendingItems(specializedRenderer, function () {
+      return P(null, containerNode);
+    });
+    var facetParameters = facetName && facetValue ? {
+      facetName: facetName,
+      facetValue: facetValue
+    } : {};
+    return _objectSpread2(_objectSpread2({}, makeWidget(_objectSpread2(_objectSpread2({}, facetParameters), {}, {
+      limit: limit,
+      queryParameters: queryParameters,
+      fallbackParameters: fallbackParameters,
+      threshold: threshold,
+      escapeHTML: escapeHTML,
+      transformItems: transformItems
+    }))), {}, {
+      $$widgetType: 'ais.trendingItems'
+    });
+  };
+
   var VoiceSearch = function VoiceSearch(_ref) {
     var cssClasses = _ref.cssClasses,
       isBrowserSupported = _ref.isBrowserSupported,
@@ -23066,7 +24299,7 @@
     }
   };
 
-  var withUsage$U = createDocumentationMessageGenerator({
+  var withUsage$_ = createDocumentationMessageGenerator({
     name: 'voice-search'
   });
   var suit$t = component('VoiceSearch');
@@ -23102,7 +24335,7 @@
       additionalQueryParameters = _ref3.additionalQueryParameters,
       createVoiceSearchHelper = _ref3.createVoiceSearchHelper;
     if (!container) {
-      throw new Error(withUsage$U('The `container` option is required.'));
+      throw new Error(withUsage$_('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
@@ -23136,6 +24369,206 @@
     });
   };
 
+  var withUsage$$ = createDocumentationMessageGenerator({
+    name: 'frequently-bought-together'
+  });
+  var FrequentlyBoughtTogether = createFrequentlyBoughtTogetherComponent({
+    createElement: h,
+    Fragment: p
+  });
+  var renderer$q = function renderer(_ref) {
+    var renderState = _ref.renderState,
+      cssClasses = _ref.cssClasses,
+      containerNode = _ref.containerNode,
+      templates = _ref.templates;
+    return function (_ref2, isFirstRendering) {
+      var items = _ref2.items,
+        results = _ref2.results,
+        instantSearchInstance = _ref2.instantSearchInstance;
+      if (isFirstRendering) {
+        renderState.templateProps = prepareTemplateProps({
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          defaultTemplates: {},
+          templatesConfig: instantSearchInstance.templatesConfig,
+          templates: templates
+        });
+        return;
+      }
+      var headerComponent = templates.header ? function (data) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "header",
+          rootTagName: "fragment",
+          data: {
+            cssClasses: data.classNames,
+            items: data.items
+          }
+        }));
+      } : undefined;
+      var itemComponent = templates.item ? function (_ref3) {
+        var item = _ref3.item;
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: item
+        }));
+      } : undefined;
+      var emptyComponent = templates.empty ? function () {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "empty",
+          rootTagName: "fragment",
+          data: results
+        }));
+      } : undefined;
+      P(h(FrequentlyBoughtTogether, {
+        items: items,
+        headerComponent: headerComponent,
+        itemComponent: itemComponent,
+        sendEvent: function sendEvent() {},
+        classNames: cssClasses,
+        emptyComponent: emptyComponent,
+        status: instantSearchInstance.status
+      }), containerNode);
+    };
+  };
+  var frequentlyBoughtTogether = function frequentlyBoughtTogether(widgetParams) {
+    var _ref4 = widgetParams || {},
+      container = _ref4.container,
+      objectIDs = _ref4.objectIDs,
+      limit = _ref4.limit,
+      queryParameters = _ref4.queryParameters,
+      threshold = _ref4.threshold,
+      escapeHTML = _ref4.escapeHTML,
+      transformItems = _ref4.transformItems,
+      _ref4$templates = _ref4.templates,
+      templates = _ref4$templates === void 0 ? {} : _ref4$templates,
+      _ref4$cssClasses = _ref4.cssClasses,
+      cssClasses = _ref4$cssClasses === void 0 ? {} : _ref4$cssClasses;
+    if (!container) {
+      throw new Error(withUsage$$('The `container` option is required.'));
+    }
+    var containerNode = getContainerNode(container);
+    var specializedRenderer = renderer$q({
+      containerNode: containerNode,
+      cssClasses: cssClasses,
+      renderState: {},
+      templates: templates
+    });
+    var makeWidget = connectFrequentlyBoughtTogether(specializedRenderer, function () {
+      return P(null, containerNode);
+    });
+    return _objectSpread2(_objectSpread2({}, makeWidget({
+      objectIDs: objectIDs,
+      limit: limit,
+      queryParameters: queryParameters,
+      threshold: threshold,
+      escapeHTML: escapeHTML,
+      transformItems: transformItems
+    })), {}, {
+      $$widgetType: 'ais.frequentlyBoughtTogether'
+    });
+  };
+
+  var withUsage$10 = createDocumentationMessageGenerator({
+    name: 'looking-similar'
+  });
+  var LookingSimilar = createLookingSimilarComponent({
+    createElement: h,
+    Fragment: p
+  });
+  var renderer$r = function renderer(_ref) {
+    var renderState = _ref.renderState,
+      cssClasses = _ref.cssClasses,
+      containerNode = _ref.containerNode,
+      templates = _ref.templates;
+    return function (_ref2, isFirstRendering) {
+      var items = _ref2.items,
+        results = _ref2.results,
+        instantSearchInstance = _ref2.instantSearchInstance;
+      if (isFirstRendering) {
+        renderState.templateProps = prepareTemplateProps({
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          defaultTemplates: {},
+          templatesConfig: instantSearchInstance.templatesConfig,
+          templates: templates
+        });
+        return;
+      }
+      var headerComponent = templates.header ? function (data) {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "header",
+          rootTagName: "fragment",
+          data: {
+            cssClasses: data.classNames,
+            items: data.items
+          }
+        }));
+      } : undefined;
+      var itemComponent = templates.item ? function (_ref3) {
+        var item = _ref3.item;
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: item
+        }));
+      } : undefined;
+      var emptyComponent = templates.empty ? function () {
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "empty",
+          rootTagName: "fragment",
+          data: results
+        }));
+      } : undefined;
+      P(h(LookingSimilar, {
+        items: items,
+        headerComponent: headerComponent,
+        itemComponent: itemComponent,
+        sendEvent: function sendEvent() {},
+        classNames: cssClasses,
+        emptyComponent: emptyComponent,
+        status: instantSearchInstance.status
+      }), containerNode);
+    };
+  };
+  var lookingSimilar = function lookingSimilar(widgetParams) {
+    var _ref4 = widgetParams || {},
+      container = _ref4.container,
+      objectIDs = _ref4.objectIDs,
+      limit = _ref4.limit,
+      queryParameters = _ref4.queryParameters,
+      fallbackParameters = _ref4.fallbackParameters,
+      threshold = _ref4.threshold,
+      escapeHTML = _ref4.escapeHTML,
+      transformItems = _ref4.transformItems,
+      _ref4$templates = _ref4.templates,
+      templates = _ref4$templates === void 0 ? {} : _ref4$templates,
+      _ref4$cssClasses = _ref4.cssClasses,
+      cssClasses = _ref4$cssClasses === void 0 ? {} : _ref4$cssClasses;
+    if (!container) {
+      throw new Error(withUsage$10('The `container` option is required.'));
+    }
+    var containerNode = getContainerNode(container);
+    var specializedRenderer = renderer$r({
+      containerNode: containerNode,
+      cssClasses: cssClasses,
+      renderState: {},
+      templates: templates
+    });
+    var makeWidget = connectLookingSimilar(specializedRenderer, function () {
+      return P(null, containerNode);
+    });
+    return _objectSpread2(_objectSpread2({}, makeWidget({
+      objectIDs: objectIDs,
+      limit: limit,
+      queryParameters: queryParameters,
+      fallbackParameters: fallbackParameters,
+      threshold: threshold,
+      escapeHTML: escapeHTML,
+      transformItems: transformItems
+    })), {}, {
+      $$widgetType: 'ais.lookingSimilar'
+    });
+  };
+
   /** @deprecated answers is no longer supported */
   var EXPERIMENTAL_answers = deprecate(answers, 'answers is no longer supported');
 
@@ -23168,6 +24601,7 @@
     poweredBy: poweredBy,
     queryRuleContext: queryRuleContext,
     queryRuleCustomData: queryRuleCustomData,
+    relatedProducts: relatedProducts,
     rangeInput: rangeInput,
     rangeSlider: rangeSlider,
     ratingMenu: ratingMenu,
@@ -23177,7 +24611,10 @@
     sortBy: sortBy,
     stats: stats,
     toggleRefinement: toggleRefinement,
-    voiceSearch: voiceSearch
+    trendingItems: trendingItems,
+    voiceSearch: voiceSearch,
+    frequentlyBoughtTogether: frequentlyBoughtTogether,
+    lookingSimilar: lookingSimilar
   });
 
   /**