react-instantsearch 7.12.4 → 7.13.1

package/dist/umd/ReactInstantSearch.js

@@ -7,7 +7,7 @@
 
   var React__default = 'default' in React ? React['default'] : React;
 
-  var version = '7.12.4';
+  var version = '7.13.1';
 
   // Copyright Joyent, Inc. and other Node contributors.
   //
@@ -4531,7 +4531,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version$1 = '3.22.3';
+  var version$1 = '3.22.5';
 
   var escapeFacetValue$3 = escapeFacetValue_1.escapeFacetValue;
 
@@ -4901,7 +4901,10 @@
     maxFacetHits,
     userState
   ) {
-    var clientHasSFFV = typeof this.client.searchForFacetValues === 'function';
+    var clientHasSFFV =
+      typeof this.client.searchForFacetValues === 'function' &&
+      // v5 has a wrong sffv signature
+      typeof this.client.searchForFacets !== 'function';
     var clientHasInitIndex = typeof this.client.initIndex === 'function';
     if (
       !clientHasSFFV &&
@@ -8355,7 +8358,7 @@
     // search on it first.
     if ('transporter' in client && !client._cacheHydrated) {
       client._cacheHydrated = true;
-      var baseMethod = client.search;
+      var baseMethod = client.search.bind(client);
       // @ts-ignore wanting type checks for v3 on this would make this too complex
       client.search = function (requests) {
         for (var _len = arguments.length, methodArgs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -10908,7 +10911,7 @@
       _ref2$value = _ref2.value,
       attributeValue = _ref2$value === void 0 ? '' : _ref2$value;
 
-    // cx is not used, since it would be bundled as a dependency for Vue & Angular
+    // cx is not used, since it would be bundled as a dependency for Vue
     var className = suit({
       descendantName: 'highlighted'
     }) + (cssClasses.highlighted ? " ".concat(cssClasses.highlighted) : '');
@@ -10932,7 +10935,7 @@
       _ref2$value = _ref2.value,
       attributeValue = _ref2$value === void 0 ? '' : _ref2$value;
 
-    // cx is not used, since it would be bundled as a dependency for Vue & Angular
+    // cx is not used, since it would be bundled as a dependency for Vue
     var className = suit$1({
       descendantName: 'highlighted'
     }) + (cssClasses.highlighted ? " ".concat(cssClasses.highlighted) : '');
@@ -10957,7 +10960,7 @@
       _ref2$value = _ref2.value,
       attributeValue = _ref2$value === void 0 ? '' : _ref2$value;
 
-    // cx is not used, since it would be bundled as a dependency for Vue & Angular
+    // cx is not used, since it would be bundled as a dependency for Vue
     var className = suit$2({
       descendantName: 'highlighted'
     }) + (cssClasses.highlighted ? " ".concat(cssClasses.highlighted) : '');
@@ -10981,7 +10984,7 @@
       _ref2$value = _ref2.value,
       attributeValue = _ref2$value === void 0 ? '' : _ref2$value;
 
-    // cx is not used, since it would be bundled as a dependency for Vue & Angular
+    // cx is not used, since it would be bundled as a dependency for Vue
     var className = suit$3({
       descendantName: 'highlighted'
     }) + (cssClasses.highlighted ? " ".concat(cssClasses.highlighted) : '');
@@ -13089,7 +13092,7 @@
     };
   }
 
-  var version$3 = '4.73.4';
+  var version$3 = '4.74.1';
 
   function _typeof$q(obj) {
     "@babel/helpers - typeof";
@@ -20693,9 +20696,9 @@
     };
   }
 
-  function createListViewComponent(_ref) {
+  function createListComponent(_ref) {
     var createElement = _ref.createElement;
-    return function ListView(userProps) {
+    return function List(userProps) {
       var _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
         ItemComponent = userProps.itemComponent,
@@ -20718,7 +20721,7 @@
     };
   }
 
-  var _excluded$c = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+  var _excluded$c = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations"];
   function ownKeys$L(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
@@ -20740,6 +20743,175 @@
     }
     return target;
   }
+  var lastCarouselId = 0;
+  function generateCarouselId() {
+    return "ais-Carousel-".concat(lastCarouselId++);
+  }
+  function PreviousIconDefaultComponent(_ref) {
+    var createElement = _ref.createElement;
+    return createElement("svg", {
+      width: "8",
+      height: "16",
+      viewBox: "0 0 8 16",
+      fill: "none"
+    }, createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
+    }));
+  }
+  function NextIconDefaultComponent(_ref2) {
+    var createElement = _ref2.createElement;
+    return createElement("svg", {
+      width: "8",
+      height: "16",
+      viewBox: "0 0 8 16",
+      fill: "none"
+    }, createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+    }));
+  }
+  function createCarouselComponent(_ref3) {
+    var createElement = _ref3.createElement,
+      Fragment = _ref3.Fragment;
+    return function Carousel(userProps) {
+      var listRef = userProps.listRef,
+        nextButtonRef = userProps.nextButtonRef,
+        previousButtonRef = userProps.previousButtonRef,
+        carouselIdRef = userProps.carouselIdRef,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        _userProps$itemCompon = userProps.itemComponent,
+        ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+          createElement: createElement,
+          Fragment: Fragment
+        }) : _userProps$itemCompon,
+        _userProps$previousIc = userProps.previousIconComponent,
+        PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+        _userProps$nextIconCo = userProps.nextIconComponent,
+        NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+        items = userProps.items,
+        userTranslations = userProps.translations,
+        props = _objectWithoutProperties$d(userProps, _excluded$c);
+      var translations = _objectSpread$K({
+        listLabel: 'Items',
+        nextButtonLabel: 'Next',
+        nextButtonTitle: 'Next',
+        previousButtonLabel: 'Previous',
+        previousButtonTitle: 'Previous'
+      }, userTranslations);
+      var cssClasses = {
+        root: cx('ais-Carousel', classNames.root),
+        list: cx('ais-Carousel-list', classNames.list),
+        item: cx('ais-Carousel-item', classNames.item),
+        navigation: cx('ais-Carousel-navigation', classNames.navigation),
+        navigationNext: cx('ais-Carousel-navigation--next', classNames.navigationNext),
+        navigationPrevious: cx('ais-Carousel-navigation--previous', classNames.navigationPrevious)
+      };
+      function scrollLeft() {
+        if (listRef.current) {
+          listRef.current.scrollLeft -= listRef.current.offsetWidth * 0.75;
+        }
+      }
+      function scrollRight() {
+        if (listRef.current) {
+          listRef.current.scrollLeft += listRef.current.offsetWidth * 0.75;
+        }
+      }
+      function updateNavigationButtonsProps() {
+        if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
+          return;
+        }
+        previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
+        nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
+      }
+      if (items.length === 0) {
+        return null;
+      }
+      return createElement("div", _extends$2({}, props, {
+        className: cx(cssClasses.root)
+      }), createElement("button", {
+        ref: previousButtonRef,
+        title: translations.previousButtonTitle,
+        "aria-label": translations.previousButtonLabel,
+        hidden: true,
+        "aria-controls": carouselIdRef.current,
+        className: cx(cssClasses.navigation, cssClasses.navigationPrevious),
+        onClick: function onClick(event) {
+          event.preventDefault();
+          scrollLeft();
+        }
+      }, createElement(PreviousIconComponent, {
+        createElement: createElement
+      })), createElement("ol", {
+        className: cx(cssClasses.list),
+        ref: listRef,
+        tabIndex: 0,
+        id: carouselIdRef.current,
+        "aria-roledescription": "carousel",
+        "aria-label": translations.listLabel,
+        "aria-live": "polite",
+        onScroll: updateNavigationButtonsProps,
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            scrollLeft();
+          } else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            scrollRight();
+          }
+        }
+      }, items.map(function (item, index) {
+        return createElement("li", {
+          key: item.objectID,
+          className: cx(cssClasses.item),
+          "aria-roledescription": "slide",
+          "aria-label": "".concat(index + 1, " of ").concat(items.length)
+        }, createElement(ItemComponent, {
+          item: item
+        }));
+      })), createElement("button", {
+        ref: nextButtonRef,
+        title: translations.nextButtonTitle,
+        "aria-label": translations.nextButtonLabel,
+        "aria-controls": carouselIdRef.current,
+        className: cx(cssClasses.navigation, cssClasses.navigationNext),
+        onClick: function onClick(event) {
+          event.preventDefault();
+          scrollRight();
+        }
+      }, createElement(NextIconComponent, {
+        createElement: createElement
+      })));
+    };
+  }
+
+  var _excluded$d = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$M(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$L(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) {
+        _defineProperty$N(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(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;
@@ -20761,17 +20933,17 @@
           createElement: createElement,
           Fragment: Fragment
         }) : _userProps$itemCompon,
-        _userProps$view = userProps.view,
-        View = _userProps$view === void 0 ? createListViewComponent({
+        _userProps$layout = userProps.layout,
+        Layout = _userProps$layout === void 0 ? createListComponent({
           createElement: createElement,
           Fragment: Fragment
-        }) : _userProps$view,
+        }) : _userProps$layout,
         items = userProps.items,
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$d(userProps, _excluded$c);
-      var translations = _objectSpread$K({
+        props = _objectWithoutProperties$d(userProps, _excluded$d);
+      var translations = _objectSpread$L({
         title: 'Frequently bought together',
         sliderLabel: 'Frequently bought together products'
       }, userTranslations);
@@ -20794,9 +20966,8 @@
         classNames: cssClasses,
         items: items,
         translations: translations
-      }), createElement(View, {
+      }), createElement(Layout, {
         classNames: cssClasses,
-        translations: translations,
         itemComponent: ItemComponent,
         items: items,
         sendEvent: sendEvent
@@ -20804,7 +20975,7 @@
     };
   }
 
-  var _excluded$d = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
+  var _excluded$e = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
   function createHighlightPartComponent(_ref) {
     var createElement = _ref.createElement;
     return function HighlightPart(_ref2) {
@@ -20837,7 +21008,7 @@
         className = userProps.className,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
-        props = _objectWithoutProperties$d(userProps, _excluded$d);
+        props = _objectWithoutProperties$d(userProps, _excluded$e);
       return createElement("span", _extends$2({}, props, {
         className: cx(classNames.root, className)
       }), parts.map(function (part, partIndex) {
@@ -20859,7 +21030,7 @@
     };
   }
 
-  var _excluded$e = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
+  var _excluded$f = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 
   // Should be imported from a shared package in the future
 
@@ -20904,7 +21075,7 @@
         EmptyComponent = userProps.emptyComponent,
         banner = userProps.banner,
         BannerComponent = userProps.bannerComponent,
-        props = _objectWithoutProperties$d(userProps, _excluded$e);
+        props = _objectWithoutProperties$d(userProps, _excluded$f);
       return createElement("div", _extends$2({}, props, {
         className: cx('ais-Hits', classNames.root, hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot), props.className)
       }), banner && (BannerComponent ? createElement(BannerComponent, {
@@ -20932,8 +21103,8 @@
     };
   }
 
-  var _excluded$f = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
-  function ownKeys$M(object, enumerableOnly) {
+  var _excluded$g = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$N(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -20943,12 +21114,12 @@
     }
     return keys;
   }
-  function _objectSpread$L(target) {
+  function _objectSpread$M(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) {
+      i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) {
         _defineProperty$N(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -20975,17 +21146,17 @@
           createElement: createElement,
           Fragment: Fragment
         }) : _userProps$itemCompon,
-        _userProps$view = userProps.view,
-        View = _userProps$view === void 0 ? createListViewComponent({
+        _userProps$layout = userProps.layout,
+        Layout = _userProps$layout === void 0 ? createListComponent({
           createElement: createElement,
           Fragment: Fragment
-        }) : _userProps$view,
+        }) : _userProps$layout,
         items = userProps.items,
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$d(userProps, _excluded$f);
-      var translations = _objectSpread$L({
+        props = _objectWithoutProperties$d(userProps, _excluded$g);
+      var translations = _objectSpread$M({
         title: 'Looking similar',
         sliderLabel: 'Looking similar'
       }, userTranslations);
@@ -21008,9 +21179,8 @@
         classNames: cssClasses,
         items: items,
         translations: translations
-      }), createElement(View, {
+      }), createElement(Layout, {
         classNames: cssClasses,
-        translations: translations,
         itemComponent: ItemComponent,
         items: items,
         sendEvent: sendEvent
@@ -21018,8 +21188,8 @@
     };
   }
 
-  var _excluded$g = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
-  function ownKeys$N(object, enumerableOnly) {
+  var _excluded$h = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$O(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -21029,12 +21199,12 @@
     }
     return keys;
   }
-  function _objectSpread$M(target) {
+  function _objectSpread$N(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) {
+      i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) {
         _defineProperty$N(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -21061,17 +21231,17 @@
           createElement: createElement,
           Fragment: Fragment
         }) : _userProps$itemCompon,
-        _userProps$view = userProps.view,
-        View = _userProps$view === void 0 ? createListViewComponent({
+        _userProps$layout = userProps.layout,
+        Layout = _userProps$layout === void 0 ? createListComponent({
           createElement: createElement,
           Fragment: Fragment
-        }) : _userProps$view,
+        }) : _userProps$layout,
         items = userProps.items,
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$d(userProps, _excluded$g);
-      var translations = _objectSpread$M({
+        props = _objectWithoutProperties$d(userProps, _excluded$h);
+      var translations = _objectSpread$N({
         title: 'Related products',
         sliderLabel: 'Related products'
       }, userTranslations);
@@ -21094,9 +21264,8 @@
         classNames: cssClasses,
         items: items,
         translations: translations
-      }), createElement(View, {
+      }), createElement(Layout, {
         classNames: cssClasses,
-        translations: translations,
         itemComponent: ItemComponent,
         items: items,
         sendEvent: sendEvent
@@ -21104,8 +21273,8 @@
     };
   }
 
-  var _excluded$h = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
-  function ownKeys$O(object, enumerableOnly) {
+  var _excluded$i = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
+  function ownKeys$P(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -21115,12 +21284,12 @@
     }
     return keys;
   }
-  function _objectSpread$N(target) {
+  function _objectSpread$O(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) {
+      i % 2 ? ownKeys$P(Object(source), !0).forEach(function (key) {
         _defineProperty$N(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) {
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$P(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -21147,17 +21316,17 @@
           createElement: createElement,
           Fragment: Fragment
         }) : _userProps$itemCompon,
-        _userProps$view = userProps.view,
-        View = _userProps$view === void 0 ? createListViewComponent({
+        _userProps$layout = userProps.layout,
+        Layout = _userProps$layout === void 0 ? createListComponent({
           createElement: createElement,
           Fragment: Fragment
-        }) : _userProps$view,
+        }) : _userProps$layout,
         items = userProps.items,
         status = userProps.status,
         userTranslations = userProps.translations,
         sendEvent = userProps.sendEvent,
-        props = _objectWithoutProperties$d(userProps, _excluded$h);
-      var translations = _objectSpread$N({
+        props = _objectWithoutProperties$d(userProps, _excluded$i);
+      var translations = _objectSpread$O({
         title: 'Trending items',
         sliderLabel: 'Trending items'
       }, userTranslations);
@@ -21180,9 +21349,8 @@
         classNames: cssClasses,
         items: items,
         translations: translations
-      }), createElement(View, {
+      }), createElement(Layout, {
         classNames: cssClasses,
-        translations: translations,
         itemComponent: ItemComponent,
         items: items,
         sendEvent: sendEvent
@@ -21195,7 +21363,7 @@
     return Boolean(isMiddleClick || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
   }
 
-  var _excluded$i = ["classNames", "items", "hasItems", "createURL", "onNavigate", "separator", "translations"];
+  var _excluded$j = ["classNames", "items", "hasItems", "createURL", "onNavigate", "separator", "translations"];
   function Breadcrumb(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -21207,7 +21375,7 @@
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? '>' : _ref$separator,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$i);
+      props = _objectWithoutProperties$c(_ref, _excluded$j);
     var handleClick = function handleClick(value) {
       return function (event) {
         if (!isModifierClick(event)) {
@@ -21242,14 +21410,14 @@
     })));
   }
 
-  var _excluded$j = ["attributes", "rootPath", "separator", "transformItems", "translations"];
+  var _excluded$k = ["attributes", "rootPath", "separator", "transformItems", "translations"];
   function Breadcrumb$1(_ref) {
     var attributes = _ref.attributes,
       rootPath = _ref.rootPath,
       separator = _ref.separator,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$j);
+      props = _objectWithoutProperties$c(_ref, _excluded$k);
     var _useBreadcrumb = useBreadcrumb({
         attributes: attributes,
         rootPath: rootPath,
@@ -21273,7 +21441,7 @@
     return /*#__PURE__*/React__default.createElement(Breadcrumb, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$k = ["classNames", "disabled", "onClick", "translations"];
+  var _excluded$l = ["classNames", "disabled", "onClick", "translations"];
   function ClearRefinements(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -21282,7 +21450,7 @@
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$k);
+      props = _objectWithoutProperties$c(_ref, _excluded$l);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-ClearRefinements', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("button", {
@@ -21292,13 +21460,13 @@
     }, translations.resetButtonText));
   }
 
-  var _excluded$l = ["includedAttributes", "excludedAttributes", "transformItems", "translations"];
+  var _excluded$m = ["includedAttributes", "excludedAttributes", "transformItems", "translations"];
   function ClearRefinements$1(_ref) {
     var includedAttributes = _ref.includedAttributes,
       excludedAttributes = _ref.excludedAttributes,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$l);
+      props = _objectWithoutProperties$c(_ref, _excluded$m);
     var _useClearRefinements = useClearRefinements({
         includedAttributes: includedAttributes,
         excludedAttributes: excludedAttributes,
@@ -21322,7 +21490,7 @@
     return text.toString().charAt(0).toUpperCase() + text.toString().slice(1);
   }
 
-  var _excluded$m = ["classNames", "items", "hasRefinements"];
+  var _excluded$n = ["classNames", "items", "hasRefinements"];
   function CurrentRefinements(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -21330,7 +21498,7 @@
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$hasRefinements = _ref.hasRefinements,
       hasRefinements = _ref$hasRefinements === void 0 ? false : _ref$hasRefinements,
-      props = _objectWithoutProperties$c(_ref, _excluded$m);
+      props = _objectWithoutProperties$c(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-CurrentRefinements', classNames.root, !hasRefinements && cx('ais-CurrentRefinements--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement("ul", {
@@ -21362,12 +21530,12 @@
     })));
   }
 
-  var _excluded$n = ["includedAttributes", "excludedAttributes", "transformItems"];
+  var _excluded$o = ["includedAttributes", "excludedAttributes", "transformItems"];
   function CurrentRefinements$1(_ref) {
     var includedAttributes = _ref.includedAttributes,
       excludedAttributes = _ref.excludedAttributes,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$n);
+      props = _objectWithoutProperties$c(_ref, _excluded$o);
     var _useCurrentRefinement = useCurrentRefinements({
         includedAttributes: includedAttributes,
         excludedAttributes: excludedAttributes,
@@ -21384,7 +21552,7 @@
     return /*#__PURE__*/React__default.createElement(CurrentRefinements, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$o = ["objectIDs", "limit", "threshold", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent"];
+  var _excluded$p = ["objectIDs", "limit", "threshold", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var FrequentlyBoughtTogetherUiComponent = createFrequentlyBoughtTogetherComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -21399,7 +21567,8 @@
       itemComponent = _ref.itemComponent,
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$o);
+      layoutComponent = _ref.layoutComponent,
+      props = _objectWithoutProperties$c(_ref, _excluded$p);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useFrequentlyBoughtT = useFrequentlyBoughtTogether({
@@ -21413,28 +21582,37 @@
         $$widgetType: 'ais.frequentlyBoughtTogether'
       }),
       items = _useFrequentlyBoughtT.items;
+    var layout = layoutComponent ? function (layoutProps) {
+      return layoutComponent(_objectSpread2(_objectSpread2({}, layoutProps), {}, {
+        classNames: {
+          list: layoutProps.classNames.list,
+          item: layoutProps.classNames.item
+        }
+      }));
+    } : undefined;
     var uiProps = {
       items: items,
       itemComponent: itemComponent,
       headerComponent: headerComponent,
       emptyComponent: emptyComponent,
+      layout: layout,
       status: status,
       sendEvent: function sendEvent() {}
     };
     return /*#__PURE__*/React__default.createElement(FrequentlyBoughtTogetherUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$p = ["isShowingMore", "translations"];
+  var _excluded$q = ["isShowingMore", "translations"];
   function ShowMoreButton(_ref) {
     var isShowingMore = _ref.isShowingMore,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$p);
+      props = _objectWithoutProperties$c(_ref, _excluded$q);
     return /*#__PURE__*/React__default.createElement("button", props, translations.showMoreButtonText({
       isShowingMore: isShowingMore
     }));
   }
 
-  var _excluded$q = ["classNames", "items", "hasItems", "onNavigate", "createURL", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "translations"];
+  var _excluded$r = ["classNames", "items", "hasItems", "onNavigate", "createURL", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "translations"];
   function HierarchicalList(_ref) {
     var className = _ref.className,
       _ref$classNames = _ref.classNames,
@@ -21486,7 +21664,7 @@
       onToggleShowMore = _ref2.onToggleShowMore,
       isShowingMore = _ref2.isShowingMore,
       translations = _ref2.translations,
-      props = _objectWithoutProperties$c(_ref2, _excluded$q);
+      props = _objectWithoutProperties$c(_ref2, _excluded$r);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-HierarchicalMenu', classNames.root, !hasItems && cx('ais-HierarchicalMenu--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement(HierarchicalList, {
@@ -21503,7 +21681,7 @@
     }));
   }
 
-  var _excluded$r = ["attributes", "limit", "rootPath", "separator", "showMore", "showMoreLimit", "showParentLevel", "sortBy", "transformItems", "translations"];
+  var _excluded$s = ["attributes", "limit", "rootPath", "separator", "showMore", "showMoreLimit", "showParentLevel", "sortBy", "transformItems", "translations"];
   function HierarchicalMenu$1(_ref) {
     var attributes = _ref.attributes,
       limit = _ref.limit,
@@ -21515,7 +21693,7 @@
       sortBy = _ref.sortBy,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$r);
+      props = _objectWithoutProperties$c(_ref, _excluded$s);
     var _useHierarchicalMenu = useHierarchicalMenu({
         attributes: attributes,
         limit: limit,
@@ -21560,11 +21738,11 @@
     Fragment: React.Fragment
   });
 
-  var _excluded$s = ["classNames"];
+  var _excluded$t = ["classNames"];
   function Highlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$s);
+      props = _objectWithoutProperties$c(_ref, _excluded$t);
     return /*#__PURE__*/React__default.createElement(InternalHighlight, _extends$1({
       classNames: {
         root: cx('ais-Highlight', classNames.root),
@@ -21575,14 +21753,14 @@
     }, props));
   }
 
-  var _excluded$t = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
+  var _excluded$u = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
   function Highlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       highlightedTagName = _ref.highlightedTagName,
       nonHighlightedTagName = _ref.nonHighlightedTagName,
       separator = _ref.separator,
-      props = _objectWithoutProperties$c(_ref, _excluded$t);
+      props = _objectWithoutProperties$c(_ref, _excluded$u);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = Array.isArray(property) ? property : [property];
     var parts = properties.map(function (singleValue) {
@@ -21596,7 +21774,7 @@
     }));
   }
 
-  var _excluded$u = ["escapeHTML", "transformItems", "hitComponent", "bannerComponent"],
+  var _excluded$v = ["escapeHTML", "transformItems", "hitComponent", "bannerComponent"],
     _excluded2$4 = ["hit", "index"];
   // @MAJOR: Move default hit component back to the UI library
   // once flavour specificities are erased
@@ -21618,7 +21796,7 @@
       _ref2$hitComponent = _ref2.hitComponent,
       HitComponent = _ref2$hitComponent === void 0 ? DefaultHitComponent : _ref2$hitComponent,
       BannerComponent = _ref2.bannerComponent,
-      props = _objectWithoutProperties$c(_ref2, _excluded$u);
+      props = _objectWithoutProperties$c(_ref2, _excluded$v);
     var _useHits = useHits({
         escapeHTML: escapeHTML,
         transformItems: transformItems
@@ -21654,14 +21832,14 @@
     return /*#__PURE__*/React__default.createElement(HitsUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$v = ["items", "onChange", "currentValue", "classNames"];
+  var _excluded$w = ["items", "onChange", "currentValue", "classNames"];
   function HitsPerPage(_ref) {
     var items = _ref.items,
       _onChange = _ref.onChange,
       currentValue = _ref.currentValue,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$v);
+      props = _objectWithoutProperties$c(_ref, _excluded$w);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-HitsPerPage', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("select", {
@@ -21679,11 +21857,11 @@
     })));
   }
 
-  var _excluded$w = ["items", "transformItems"];
+  var _excluded$x = ["items", "transformItems"];
   function HitsPerPage$1(_ref) {
     var userItems = _ref.items,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$w);
+      props = _objectWithoutProperties$c(_ref, _excluded$x);
     var _useHitsPerPage = useHitsPerPage({
         items: userItems,
         transformItems: transformItems
@@ -21707,7 +21885,7 @@
     return /*#__PURE__*/React__default.createElement(HitsPerPage, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$x = ["hitComponent", "hits", "bannerComponent", "banner", "sendEvent", "isFirstPage", "isLastPage", "onShowPrevious", "onShowMore", "classNames", "translations"];
+  var _excluded$y = ["hitComponent", "hits", "bannerComponent", "banner", "sendEvent", "isFirstPage", "isLastPage", "onShowPrevious", "onShowMore", "classNames", "translations"];
   function DefaultHitComponent$1(_ref) {
     var hit = _ref.hit;
     return /*#__PURE__*/React__default.createElement("div", {
@@ -21752,7 +21930,7 @@
       _ref3$classNames = _ref3.classNames,
       classNames = _ref3$classNames === void 0 ? {} : _ref3$classNames,
       translations = _ref3.translations,
-      props = _objectWithoutProperties$c(_ref3, _excluded$x);
+      props = _objectWithoutProperties$c(_ref3, _excluded$y);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-InfiniteHits', classNames.root, hits.length === 0 && cx('ais-InfiniteHits--empty', classNames.emptyRoot), props.className)
     }), onShowPrevious && /*#__PURE__*/React__default.createElement("button", {
@@ -21788,7 +21966,7 @@
     }, translations.showMoreButtonText));
   }
 
-  var _excluded$y = ["showPrevious", "cache", "escapeHTML", "showPrevious", "transformItems", "translations", "bannerComponent"];
+  var _excluded$z = ["showPrevious", "cache", "escapeHTML", "showPrevious", "transformItems", "translations", "bannerComponent"];
   function InfiniteHits$1(_ref) {
     var _ref$showPrevious = _ref.showPrevious,
       shouldShowPrevious = _ref$showPrevious === void 0 ? true : _ref$showPrevious,
@@ -21798,7 +21976,7 @@
       transformItems = _ref.transformItems,
       translations = _ref.translations,
       BannerComponent = _ref.bannerComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$y);
+      props = _objectWithoutProperties$c(_ref, _excluded$z);
     var _useInfiniteHits = useInfiniteHits({
         cache: cache,
         escapeHTML: escapeHTML,
@@ -21834,7 +22012,7 @@
     return /*#__PURE__*/React__default.createElement(InfiniteHits, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$z = ["items", "classNames", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "createURL", "onRefine", "translations"];
+  var _excluded$A = ["items", "classNames", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "createURL", "onRefine", "translations"];
   function Menu(_ref) {
     var items = _ref.items,
       _ref$classNames = _ref.classNames,
@@ -21846,7 +22024,7 @@
       createURL = _ref.createURL,
       onRefine = _ref.onRefine,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$z);
+      props = _objectWithoutProperties$c(_ref, _excluded$A);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-Menu', classNames.root, items.length === 0 && cx('ais-Menu--noRefinement', classNames.noRefinementRoot), props.className)
     }), /*#__PURE__*/React__default.createElement("ul", {
@@ -21876,7 +22054,7 @@
     }));
   }
 
-  var _excluded$A = ["attribute", "limit", "showMore", "showMoreLimit", "sortBy", "transformItems", "translations"];
+  var _excluded$B = ["attribute", "limit", "showMore", "showMoreLimit", "sortBy", "transformItems", "translations"];
   function Menu$1(_ref) {
     var attribute = _ref.attribute,
       limit = _ref.limit,
@@ -21885,7 +22063,7 @@
       sortBy = _ref.sortBy,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$A);
+      props = _objectWithoutProperties$c(_ref, _excluded$B);
     var _useMenu = useMenu({
         attribute: attribute,
         limit: limit,
@@ -21922,7 +22100,7 @@
     }));
   }
 
-  var _excluded$B = ["pages", "currentPage", "nbPages", "isFirstPage", "isLastPage", "showFirst", "showPrevious", "showNext", "showLast", "createURL", "onNavigate", "translations", "classNames"],
+  var _excluded$C = ["pages", "currentPage", "nbPages", "isFirstPage", "isLastPage", "showFirst", "showPrevious", "showNext", "showLast", "createURL", "onNavigate", "translations", "classNames"],
     _excluded2$5 = ["isDisabled", "className", "classNames", "href", "onClick"];
   function Pagination(_ref) {
     var pages = _ref.pages,
@@ -21943,7 +22121,7 @@
       translations = _ref.translations,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$B);
+      props = _objectWithoutProperties$c(_ref, _excluded$C);
     var firstPageIndex = 0;
     var previousPageIndex = currentPage - 1;
     var nextPageIndex = currentPage + 1;
@@ -22037,7 +22215,7 @@
     }, props)));
   }
 
-  var _excluded$C = ["showFirst", "showPrevious", "showNext", "showLast", "padding", "totalPages", "translations"];
+  var _excluded$D = ["showFirst", "showPrevious", "showNext", "showLast", "padding", "totalPages", "translations"];
   function Pagination$1(_ref) {
     var showFirst = _ref.showFirst,
       showPrevious = _ref.showPrevious,
@@ -22046,7 +22224,7 @@
       padding = _ref.padding,
       totalPages = _ref.totalPages,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$C);
+      props = _objectWithoutProperties$c(_ref, _excluded$D);
     var _usePagination = usePagination({
         padding: padding,
         totalPages: totalPages
@@ -22095,14 +22273,14 @@
     }));
   }
 
-  var _excluded$D = ["classNames", "url", "theme"];
+  var _excluded$E = ["classNames", "url", "theme"];
   function PoweredBy(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       url = _ref.url,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-      props = _objectWithoutProperties$c(_ref, _excluded$D);
+      props = _objectWithoutProperties$c(_ref, _excluded$E);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-PoweredBy', theme === 'dark' ? cx('ais-PoweredBy--dark', classNames.dark) : cx('ais-PoweredBy--light', classNames.light), classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("a", {
@@ -22132,7 +22310,7 @@
     return /*#__PURE__*/React__default.createElement(PoweredBy, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$E = ["classNames", "range", "start", "step", "disabled", "onSubmit", "translations"];
+  var _excluded$F = ["classNames", "range", "start", "step", "disabled", "onSubmit", "translations"];
   // if the default value is undefined, React considers the component uncontrolled initially, which we don't want 0 or NaN as the default value
   var unsetNumberInputValue = '';
 
@@ -22157,7 +22335,7 @@
       disabled = _ref.disabled,
       _onSubmit = _ref.onSubmit,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$E);
+      props = _objectWithoutProperties$c(_ref, _excluded$F);
     var values = {
       min: minValue !== -Infinity && minValue !== min ? minValue : unsetNumberInputValue,
       max: maxValue !== Infinity && maxValue !== max ? maxValue : unsetNumberInputValue
@@ -22237,14 +22415,14 @@
     }, translations.submitButtonText)));
   }
 
-  var _excluded$F = ["attribute", "min", "max", "precision", "translations"];
+  var _excluded$G = ["attribute", "min", "max", "precision", "translations"];
   function RangeInput$1(_ref) {
     var attribute = _ref.attribute,
       min = _ref.min,
       max = _ref.max,
       precision = _ref.precision,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$F);
+      props = _objectWithoutProperties$c(_ref, _excluded$G);
     var _useRange = useRange({
         attribute: attribute,
         min: min,
@@ -22272,7 +22450,7 @@
     return /*#__PURE__*/React__default.createElement(RangeInput, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$G = ["canRefine", "items", "onRefine", "query", "searchBox", "noResults", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "className", "classNames", "translations"];
+  var _excluded$H = ["canRefine", "items", "onRefine", "query", "searchBox", "noResults", "showMore", "canToggleShowMore", "onToggleShowMore", "isShowingMore", "className", "classNames", "translations"];
   function RefinementList$1(_ref) {
     var canRefine = _ref.canRefine,
       items = _ref.items,
@@ -22288,7 +22466,7 @@
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$G);
+      props = _objectWithoutProperties$c(_ref, _excluded$H);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-RefinementList', classNames.root, items.length === 0 && cx('ais-RefinementList--noRefinement', classNames.noRefinementRoot), className)
     }), searchBox && /*#__PURE__*/React__default.createElement("div", {
@@ -22327,7 +22505,7 @@
     }));
   }
 
-  var _excluded$H = ["formRef", "inputRef", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
+  var _excluded$I = ["formRef", "inputRef", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
   var _ref2 = /*#__PURE__*/React__default.createElement("path", {
     d: "M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
   });
@@ -22407,7 +22585,7 @@
       _ref7$classNames = _ref7.classNames,
       classNames = _ref7$classNames === void 0 ? {} : _ref7$classNames,
       translations = _ref7.translations,
-      props = _objectWithoutProperties$c(_ref7, _excluded$H);
+      props = _objectWithoutProperties$c(_ref7, _excluded$I);
     function handleSubmit(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -22472,7 +22650,7 @@
     }))));
   }
 
-  var _excluded$I = ["searchable", "searchablePlaceholder", "attribute", "operator", "limit", "showMore", "showMoreLimit", "sortBy", "escapeFacetValues", "transformItems", "translations"];
+  var _excluded$J = ["searchable", "searchablePlaceholder", "attribute", "operator", "limit", "showMore", "showMoreLimit", "sortBy", "escapeFacetValues", "transformItems", "translations"];
   function RefinementList$2(_ref) {
     var searchable = _ref.searchable,
       searchablePlaceholder = _ref.searchablePlaceholder,
@@ -22485,7 +22663,7 @@
       escapeFacetValues = _ref.escapeFacetValues,
       transformItems = _ref.transformItems,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$I);
+      props = _objectWithoutProperties$c(_ref, _excluded$J);
     var _useRefinementList = useRefinementList({
         attribute: attribute,
         operator: operator,
@@ -22574,7 +22752,7 @@
     }));
   }
 
-  var _excluded$J = ["objectIDs", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent"];
+  var _excluded$K = ["objectIDs", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var RelatedProductsUiComponent = createRelatedProductsComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22590,7 +22768,8 @@
       itemComponent = _ref.itemComponent,
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$J);
+      layoutComponent = _ref.layoutComponent,
+      props = _objectWithoutProperties$c(_ref, _excluded$K);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useRelatedProducts = useRelatedProducts({
@@ -22605,18 +22784,27 @@
         $$widgetType: 'ais.relatedProducts'
       }),
       items = _useRelatedProducts.items;
+    var layout = layoutComponent ? function (layoutProps) {
+      return layoutComponent(_objectSpread2(_objectSpread2({}, layoutProps), {}, {
+        classNames: {
+          list: layoutProps.classNames.list,
+          item: layoutProps.classNames.item
+        }
+      }));
+    } : undefined;
     var uiProps = {
       items: items,
       itemComponent: itemComponent,
       headerComponent: headerComponent,
       emptyComponent: emptyComponent,
+      layout: layout,
       status: status,
       sendEvent: function sendEvent() {}
     };
     return /*#__PURE__*/React__default.createElement(RelatedProductsUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$K = ["queryHook", "searchAsYouType", "ignoreCompositionEvents", "translations"];
+  var _excluded$L = ["queryHook", "searchAsYouType", "ignoreCompositionEvents", "translations"];
   function SearchBox$1(_ref) {
     var queryHook = _ref.queryHook,
       _ref$searchAsYouType = _ref.searchAsYouType,
@@ -22624,7 +22812,7 @@
       _ref$ignoreCompositio = _ref.ignoreCompositionEvents,
       ignoreCompositionEvents = _ref$ignoreCompositio === void 0 ? false : _ref$ignoreCompositio,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$K);
+      props = _objectWithoutProperties$c(_ref, _excluded$L);
     var _useSearchBox = useSearchBox({
         queryHook: queryHook
       }, {
@@ -22685,11 +22873,11 @@
     return /*#__PURE__*/React__default.createElement(SearchBox, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$L = ["classNames"];
+  var _excluded$M = ["classNames"];
   function Snippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$L);
+      props = _objectWithoutProperties$c(_ref, _excluded$M);
     return /*#__PURE__*/React__default.createElement(InternalHighlight, _extends$1({
       classNames: {
         root: cx('ais-Snippet', classNames.root),
@@ -22700,14 +22888,14 @@
     }, props));
   }
 
-  var _excluded$M = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
+  var _excluded$N = ["hit", "attribute", "highlightedTagName", "nonHighlightedTagName", "separator"];
   function Snippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       highlightedTagName = _ref.highlightedTagName,
       nonHighlightedTagName = _ref.nonHighlightedTagName,
       separator = _ref.separator,
-      props = _objectWithoutProperties$c(_ref, _excluded$M);
+      props = _objectWithoutProperties$c(_ref, _excluded$N);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = Array.isArray(property) ? property : [property];
     var parts = properties.map(function (singleValue) {
@@ -22721,7 +22909,7 @@
     }));
   }
 
-  var _excluded$N = ["items", "value", "onChange", "classNames"];
+  var _excluded$O = ["items", "value", "onChange", "classNames"];
   function SortBy(_ref) {
     var items = _ref.items,
       value = _ref.value,
@@ -22729,7 +22917,7 @@
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties$c(_ref, _excluded$N);
+      props = _objectWithoutProperties$c(_ref, _excluded$O);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-SortBy', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("select", {
@@ -22748,11 +22936,11 @@
     })));
   }
 
-  var _excluded$O = ["items", "transformItems"];
+  var _excluded$P = ["items", "transformItems"];
   function SortBy$1(_ref) {
     var items = _ref.items,
       transformItems = _ref.transformItems,
-      props = _objectWithoutProperties$c(_ref, _excluded$O);
+      props = _objectWithoutProperties$c(_ref, _excluded$P);
     var _useSortBy = useSortBy({
         items: items,
         transformItems: transformItems
@@ -22770,7 +22958,7 @@
     return /*#__PURE__*/React__default.createElement(SortBy, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$P = ["classNames", "nbHits", "processingTimeMS", "nbSortedHits", "areHitsSorted", "translations"];
+  var _excluded$Q = ["classNames", "nbHits", "processingTimeMS", "nbSortedHits", "areHitsSorted", "translations"];
   function Stats(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -22779,7 +22967,7 @@
       nbSortedHits = _ref.nbSortedHits,
       areHitsSorted = _ref.areHitsSorted,
       translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$P);
+      props = _objectWithoutProperties$c(_ref, _excluded$Q);
     var translationOptions = {
       nbHits: nbHits,
       processingTimeMS: processingTimeMS,
@@ -22793,10 +22981,10 @@
     }, translations.rootElementText(translationOptions)));
   }
 
-  var _excluded$Q = ["translations"];
+  var _excluded$R = ["translations"];
   function Stats$1(_ref) {
     var translations = _ref.translations,
-      props = _objectWithoutProperties$c(_ref, _excluded$Q);
+      props = _objectWithoutProperties$c(_ref, _excluded$R);
     var _useStats = useStats(undefined, {
         $$widgetType: 'ais.stats'
       }),
@@ -22846,14 +23034,14 @@
     return '';
   }
 
-  var _excluded$R = ["classNames", "checked", "onChange", "label"];
+  var _excluded$S = ["classNames", "checked", "onChange", "label"];
   function ToggleRefinement(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
       checked = _ref.checked,
       _onChange = _ref.onChange,
       label = _ref.label,
-      props = _objectWithoutProperties$c(_ref, _excluded$R);
+      props = _objectWithoutProperties$c(_ref, _excluded$S);
     return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
       className: cx('ais-ToggleRefinement', classNames.root, props.className)
     }), /*#__PURE__*/React__default.createElement("label", {
@@ -22870,12 +23058,12 @@
     }, label)));
   }
 
-  var _excluded$S = ["attribute", "on", "off"];
+  var _excluded$T = ["attribute", "on", "off"];
   function ToggleRefinement$1(_ref) {
     var attribute = _ref.attribute,
       on = _ref.on,
       off = _ref.off,
-      props = _objectWithoutProperties$c(_ref, _excluded$S);
+      props = _objectWithoutProperties$c(_ref, _excluded$T);
     var _useToggleRefinement = useToggleRefinement({
         attribute: attribute,
         on: on,
@@ -22898,7 +23086,7 @@
     }, props, uiProps));
   }
 
-  var _excluded$T = ["facetName", "facetValue", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent"];
+  var _excluded$U = ["facetName", "facetValue", "limit", "threshold", "fallbackParameters", "queryParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var TrendingItemsUiComponent = createTrendingItemsComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22915,7 +23103,8 @@
       itemComponent = _ref.itemComponent,
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$T);
+      layoutComponent = _ref.layoutComponent,
+      props = _objectWithoutProperties$c(_ref, _excluded$U);
     var facetParameters = facetName && facetValue ? {
       facetName: facetName,
       facetValue: facetValue
@@ -22933,18 +23122,27 @@
         $$widgetType: 'ais.trendingItems'
       }),
       items = _useTrendingItems.items;
+    var layout = layoutComponent ? function (layoutProps) {
+      return layoutComponent(_objectSpread2(_objectSpread2({}, layoutProps), {}, {
+        classNames: {
+          list: layoutProps.classNames.list,
+          item: layoutProps.classNames.item
+        }
+      }));
+    } : undefined;
     var uiProps = {
       items: items,
       itemComponent: itemComponent,
       headerComponent: headerComponent,
       emptyComponent: emptyComponent,
+      layout: layout,
       status: status,
       sendEvent: function sendEvent() {}
     };
     return /*#__PURE__*/React__default.createElement(TrendingItemsUiComponent, _extends$1({}, props, uiProps));
   }
 
-  var _excluded$U = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent"];
+  var _excluded$V = ["objectIDs", "limit", "threshold", "queryParameters", "fallbackParameters", "escapeHTML", "transformItems", "itemComponent", "headerComponent", "emptyComponent", "layoutComponent"];
   var LookingSimilarUiComponent = createLookingSimilarComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22960,7 +23158,8 @@
       itemComponent = _ref.itemComponent,
       headerComponent = _ref.headerComponent,
       emptyComponent = _ref.emptyComponent,
-      props = _objectWithoutProperties$c(_ref, _excluded$U);
+      layoutComponent = _ref.layoutComponent,
+      props = _objectWithoutProperties$c(_ref, _excluded$V);
     var _useInstantSearch = useInstantSearch(),
       status = _useInstantSearch.status;
     var _useLookingSimilar = useLookingSimilar({
@@ -22975,18 +23174,42 @@
         $$widgetType: 'ais.lookingSimilar'
       }),
       items = _useLookingSimilar.items;
+    var layout = layoutComponent ? function (layoutProps) {
+      return layoutComponent(_objectSpread2(_objectSpread2({}, layoutProps), {}, {
+        classNames: {
+          list: layoutProps.classNames.list,
+          item: layoutProps.classNames.item
+        }
+      }));
+    } : undefined;
     var uiProps = {
       items: items,
       itemComponent: itemComponent,
       headerComponent: headerComponent,
       emptyComponent: emptyComponent,
+      layout: layout,
       status: status,
       sendEvent: function sendEvent() {}
     };
     return /*#__PURE__*/React__default.createElement(LookingSimilarUiComponent, _extends$1({}, props, uiProps));
   }
 
+  var CarouselUiComponent = createCarouselComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
+  function Carousel(props) {
+    var carouselRefs = {
+      listRef: React.useRef(null),
+      nextButtonRef: React.useRef(null),
+      previousButtonRef: React.useRef(null),
+      carouselIdRef: React.useRef(generateCarouselId())
+    };
+    return /*#__PURE__*/React__default.createElement(CarouselUiComponent, _extends$1({}, carouselRefs, props));
+  }
+
   exports.Breadcrumb = Breadcrumb$1;
+  exports.Carousel = Carousel;
   exports.ClearRefinements = ClearRefinements$1;
   exports.Configure = Configure;
   exports.CurrentRefinements = CurrentRefinements$1;