@athoscommerce/snap-preact 1.5.1 → 1.7.0

package/dist/cjs/components/src/components/Templates/RecommendationBundle/RecommendationBundle.js

@@ -142,7 +142,7 @@ var defaultStyles = function (_a) {
 };
 exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (properties) {
     var _a, _b;
-    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
     var globalTheme = (0, providers_1.useTheme)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultCarouselBreakpoints = {
@@ -195,7 +195,14 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
         }
     }
-    var title = props.title, description = props.description, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, hideSeedText = props.hideSeedText, lazyRender = props.lazyRender, className = props.className, internalClassName = props.internalClassName, alias = props.alias, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, treePath = props.treePath, additionalProps = __rest(props, ["title", "description", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "hideSeedText", "lazyRender", "className", "internalClassName", "alias", "style", "styleScript", "themeStyleScript", "treePath"]);
+    var title = props.title, description = props.description, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, hideSeedText = props.hideSeedText, lazyRender = props.lazyRender, className = props.className, internalClassName = props.internalClassName, alias = props.alias, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, treePath = props.treePath, additionalProps = __rest(props, ["title", "description", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "hideSeedText", "lazyRender", "className", "internalClassName", "alias", "style", "styleScript", "themeStyleScript", "treePath"]);
+    var resultComponent = props.resultComponent;
+    var snap = (0, providers_1.useSnap)();
+    var isNamedResultComponent = typeof resultComponent === 'string';
+    var resultComponentName = isNamedResultComponent ? resultComponent : '';
+    var resultComponentMap = ((_t = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _t === void 0 ? void 0 : _t.library.import.component.result) || {};
+    var _2 = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined), resultComponentOverride = _2.ComponentOverride, shouldWaitForNamedResultComponent = _2.shouldWaitForNamedOverride;
+    var resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
     var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
     var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
     var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
@@ -203,7 +210,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
     if (!controller || controller.type !== 'recommendation') {
         throw new Error("<RecommendationBundle> Component requires 'controller' prop with an instance of RecommendationController");
     }
-    var resultsToRender = results || ((_t = controller.store) === null || _t === void 0 ? void 0 : _t.results);
+    var resultsToRender = results || ((_u = controller.store) === null || _u === void 0 ? void 0 : _u.results);
     if (limit) {
         resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length ? limit + 1 : limit);
     }
@@ -211,13 +218,13 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
     if (!cartStore) {
         throw new Error("<RecommendationBundle> Component requires 'cartStore' to exist in the recommendation store");
     }
-    if (!(results && results.length) && !((_v = (_u = controller.store) === null || _u === void 0 ? void 0 : _u.results) === null || _v === void 0 ? void 0 : _v.length)) {
+    if (!(results && results.length) && !((_w = (_v = controller.store) === null || _v === void 0 ? void 0 : _v.results) === null || _w === void 0 ? void 0 : _w.length)) {
         controller.log.error("<RecommendationBundle> Component has no results to render!");
         return null;
     }
     var seed = results
         ? results.filter(function (result) { return result.bundleSeed == true; }).pop()
-        : (_x = (_w = controller.store) === null || _w === void 0 ? void 0 : _w.results) === null || _x === void 0 ? void 0 : _x.filter(function (result) { return result.bundleSeed == true; }).pop();
+        : (_y = (_x = controller.store) === null || _x === void 0 ? void 0 : _x.results) === null || _y === void 0 ? void 0 : _y.filter(function (result) { return result.bundleSeed == true; }).pop();
     var resultSubProps = alias == 'recommendationBundleList' ? { hideImage: true, hideBadge: true } : {};
     var subProps = {
         carousel: __assign(__assign({ loop: loop, 
@@ -236,7 +243,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
     };
     var hasSeed = Boolean(resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length);
-    var slidesPerView = ((_y = props.carousel) === null || _y === void 0 ? void 0 : _y.slidesPerView) || props.slidesPerView;
+    var slidesPerView = ((_z = props.carousel) === null || _z === void 0 ? void 0 : _z.slidesPerView) || props.slidesPerView;
     if (!slidesPerView) {
         slidesPerView = 2;
     }
@@ -284,7 +291,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             };
         };
         //no breakpoint props allowed in templates
-        if (!(((_z = properties.theme) === null || _z === void 0 ? void 0 : _z.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates')) {
+        if (!(((_0 = properties.theme) === null || _0 === void 0 ? void 0 : _0.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates')) {
             Object.keys(props.breakpoints).forEach(function (breakpoint) {
                 var obj = props.breakpoints[breakpoint];
                 var _a = adjustSlides_1(obj), adjustedSlidesPerView = _a.slidesPerView, adjustedSlidesPerGroup = _a.slidesPerGroup;
@@ -292,7 +299,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             });
         }
         else {
-            var _1 = adjustSlides_1(__assign(__assign({}, mergedCarouselProps), { slidesPerView: slidesPerView })), adjustedSlidesPerView = _1.slidesPerView, adjustedSlidesPerGroup = _1.slidesPerGroup;
+            var _3 = adjustSlides_1(__assign(__assign({}, mergedCarouselProps), { slidesPerView: slidesPerView })), adjustedSlidesPerView = _3.slidesPerView, adjustedSlidesPerGroup = _3.slidesPerGroup;
             displaySettings = __assign(__assign({}, mergedCarouselProps), { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup });
         }
     }
@@ -336,7 +343,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
     };
     var seedRef = (0, hooks_1.useRef)();
     var carouselRef = (0, hooks_1.useRef)();
-    var _2 = (0, hooks_1.useState)(false), isVisible = _2[0], setIsVisible = _2[1];
+    var _4 = (0, hooks_1.useState)(false), isVisible = _4[0], setIsVisible = _4[1];
     var recsRef = (0, hooks_1.useRef)(null);
     var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
     if (inView) {
@@ -379,7 +386,14 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             if (isSeed) {
                 attributes = __assign(__assign({}, attributes), { seedText: seedText, seed: true, icon: separatorIcon, lang: { seedText: lang.seedText } });
             }
-            return !isSeed || ((seedInCarousel || (carousel === null || carousel === void 0 ? void 0 : carousel.enabled) == false) && isSeed && !hideSeed) ? ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: Boolean(!isSeed) }, children: (0, jsx_runtime_1.jsx)(BundleSelector_1.BundleSelector, __assign({}, attributes, { children: resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { controller: controller, treePath: treePath, result: result, seed: isSeed, selected: selected, onProductSelect: onProductSelect })) : ((0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))) })) }, result.id)) : null;
+            return !isSeed || ((seedInCarousel || (carousel === null || carousel === void 0 ? void 0 : carousel.enabled) == false) && isSeed && !hideSeed) ? ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: Boolean(!isSeed) }, children: (0, jsx_runtime_1.jsx)(BundleSelector_1.BundleSelector, __assign({}, attributes, { children: resolvedResultComponent ? ((0, utilities_1.cloneWithProps)(resolvedResultComponent, {
+                        controller: controller,
+                        treePath: treePath,
+                        result: result,
+                        seed: isSeed,
+                        selected: selected,
+                        onProductSelect: onProductSelect,
+                    })) : shouldWaitForNamedResultComponent ? null : ((0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))) })) }, result.id)) : null;
         });
     }, [
         resultsToRender,
@@ -389,7 +403,8 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
         separatorIcon,
         seedInCarousel,
         hideSeed,
-        resultComponent,
+        shouldWaitForNamedResultComponent,
+        resolvedResultComponent,
         props.theme,
         seedText,
     ]);
@@ -399,12 +414,12 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
     return (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)(classNamePrefix, (_a = {}, _a["".concat(classNamePrefix, "--stacked")] = !ctaInline, _a), className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "".concat(classNamePrefix, "__title"), children: (0, jsx_runtime_1.jsx)("span", { children: title }) })), description && ((0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation-bundle__description", children: (0, jsx_runtime_1.jsx)("span", { children: description }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("".concat(classNamePrefix, "__wrapper"), (_b = {},
                             _b["".concat(classNamePrefix, "__wrapper--seed-in-carousel")] = seedInCarousel,
                             _b["".concat(classNamePrefix, "__wrapper--vertical")] = vertical,
-                            _b)), children: [carouselEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!seedInCarousel && !hideSeed && seed && ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__seed-container"), children: (0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: seed, track: { impression: false }, children: (0, jsx_runtime_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, title: (_0 = seed.display.mappings.core) === null || _0 === void 0 ? void 0 : _0.name, onCheck: function (e) {
+                            _b)), children: [carouselEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!seedInCarousel && !hideSeed && seed && ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__seed-container"), children: (0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: seed, track: { impression: false }, children: (0, jsx_runtime_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, title: (_1 = seed.display.mappings.core) === null || _1 === void 0 ? void 0 : _1.name, onCheck: function (e) {
                                                     e.stopPropagation();
                                                     onProductSelect(seed);
                                                 }, checked: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef, treePath: treePath, classNamePrefix: classNamePrefix, lang: { seedText: lang.seedText }, children: (function () {
-                                                    if (resultComponent && controller) {
-                                                        return (0, utilities_1.cloneWithProps)(resultComponent, {
+                                                    if (resolvedResultComponent && controller) {
+                                                        return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
                                                             controller: controller,
                                                             seed: true,
                                                             selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
@@ -413,6 +428,9 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
                                                             treePath: treePath,
                                                         });
                                                     }
+                                                    else if (shouldWaitForNamedResultComponent) {
+                                                        return null;
+                                                    }
                                                     else {
                                                         return (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }));
                                                     }

package/dist/cjs/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.d.ts

@@ -10,6 +10,6 @@ export type RecommendationBundleEasyAddProps = {
     alias?: string | undefined;
     lang?: Partial<RecommendationBundleLang> | undefined;
     results?: Product[] | undefined;
-} & RecommendationBundleEasyAddTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<RecommendationBundleEasyAddTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type RecommendationBundleEasyAddTemplatesLegalProps = Omit<RecommendationBundleProps, 'controller' | 'alias' | 'lang' | 'results' | 'hideSeed' | 'limit' | 'hideCheckboxes' | 'carousel' | 'separatorIcon' | 'separatorIconSeedOnly' | 'preselectedCount' | 'breakpoints'>;
 //# sourceMappingURL=RecommendationBundleEasyAdd.d.ts.map

package/dist/cjs/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundleEasyAdd.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAY9F,eAAO,MAAM,2BAA2B,gBAAyB,gCAAgC;;CAwC/F,CAAC;AAEH,MAAM,MAAM,gCAAgC,GAAG;IAC9C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,8CAA8C,GACjD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,8CAA8C,GAAG,IAAI,CAChE,yBAAyB,EACvB,YAAY,GACZ,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,UAAU,GACV,eAAe,GACf,uBAAuB,GACvB,kBAAkB,GAClB,aAAa,CACf,CAAC"}
+{"version":3,"file":"RecommendationBundleEasyAdd.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAY9F,eAAO,MAAM,2BAA2B,gBAAyB,gCAAgC;;CAwC/F,CAAC;AAEH,MAAM,MAAM,gCAAgC,GAAG;IAC9C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,IAAI,CAAC,8CAA8C,EAAE,iBAAiB,CAAC,GAC1E,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,8CAA8C,GAAG,IAAI,CAChE,yBAAyB,EACvB,YAAY,GACZ,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,UAAU,GACV,eAAe,GACf,uBAAuB,GACvB,kBAAkB,GAClB,aAAa,CACf,CAAC"}

package/dist/cjs/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.d.ts

@@ -11,7 +11,7 @@ export type RecommendationBundleListProps = {
     alias?: string | undefined;
     lang?: Partial<RecommendationBundleLang> | undefined;
     results?: Product[] | undefined;
-} & RecommendationBundleListTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<RecommendationBundleListTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type RecommendationBundleListTemplatesLegalProps = Omit<RecommendationBundleProps, 'controller' | 'alias' | 'lang' | 'results' | 'seedText' | 'ctaInline' | 'ctaIcon' | 'vertical' | 'slidesPerView' | 'carousel' | 'breakpoints'>;
 export declare const CTASlot: ((props: BundledCTAProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
     displayName: string;

package/dist/cjs/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundleList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAKpH,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAMpE,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAwDzD,eAAO,MAAM,wBAAwB,gBAAyB,6BAA6B;;CAyCzF,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG;IAC3C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,2CAA2C,GAC9C,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,2CAA2C,GAAG,IAAI,CAC7D,yBAAyB,EACzB,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,UAAU,GAAG,aAAa,CAC9I,CAAC;AAcF,eAAO,MAAM,OAAO,WAAoB,eAAe;;CAmIrD,CAAC"}
+{"version":3,"file":"RecommendationBundleList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAKpH,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAMpE,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAwDzD,eAAO,MAAM,wBAAwB,gBAAyB,6BAA6B;;CAyCzF,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG;IAC3C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,IAAI,CAAC,2CAA2C,EAAE,iBAAiB,CAAC,GACvE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,2CAA2C,GAAG,IAAI,CAC7D,yBAAyB,EACzB,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,UAAU,GAAG,aAAa,CAC9I,CAAC;AAcF,eAAO,MAAM,OAAO,WAAoB,eAAe;;CAmIrD,CAAC"}

package/dist/cjs/components/src/components/Templates/RecommendationBundleVertical/RecommendationBundleVertical.d.ts

@@ -10,6 +10,6 @@ export type RecommendationBundleVerticalProps = {
     alias?: string | undefined;
     lang?: Partial<RecommendationBundleLang> | undefined;
     results?: Product[] | undefined;
-} & RecommendationBundleVerticalTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<RecommendationBundleVerticalTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type RecommendationBundleVerticalTemplatesLegalProps = Omit<RecommendationBundleProps, 'controller' | 'alias' | 'lang' | 'results' | 'vertical' | 'ctaInline' | 'carousel' | 'slidesPerView'>;
 //# sourceMappingURL=RecommendationBundleVertical.d.ts.map

package/dist/cjs/components/src/components/Templates/RecommendationBundleVertical/RecommendationBundleVertical.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundleVertical.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleVertical/RecommendationBundleVertical.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAe9F,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CAkCjG,CAAC;AAEH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,+CAA+C,GAClD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,+CAA+C,GAAG,IAAI,CACjE,yBAAyB,EACzB,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,eAAe,CACrG,CAAC"}
+{"version":3,"file":"RecommendationBundleVertical.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleVertical/RecommendationBundleVertical.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAe9F,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CAkCjG,CAAC;AAEH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,IAAI,CAAC,+CAA+C,EAAE,iBAAiB,CAAC,GAC3E,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,+CAA+C,GAAG,IAAI,CACjE,yBAAyB,EACzB,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,eAAe,CACrG,CAAC"}

package/dist/cjs/components/src/components/Templates/RecommendationEmail/RecommendationEmail.d.ts

@@ -11,8 +11,9 @@ export type RecommendationEmailProps = {
     controller?: RecommendationController;
     results?: Product[];
     resultComponent?: JSXComponent | JSX.Element;
-} & RecommendationEmailTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<RecommendationEmailTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type RecommendationEmailTemplatesLegalProps = {
+    resultComponent?: string;
     resultProps?: Partial<ResultProps> | Record<string, any>;
     resultWidth?: string;
 };

package/dist/cjs/components/src/components/Templates/RecommendationEmail/RecommendationEmail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationEmail.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationEmail/RecommendationEmail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAS,cAAc,EAAyB,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3E,eAAO,MAAM,sCAAsC,EAAE,cAAc,CAClE,wCAAwC,EACxC,wBAAwB,EACxB,sCAAsC,CAMtC,CAAC;AAMF,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB;;CA0E/E,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG;IACtC,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,sCAAsC,GACzC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,sCAAsC,GAAG;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"RecommendationEmail.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationEmail/RecommendationEmail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAS,cAAc,EAAkC,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI3E,eAAO,MAAM,sCAAsC,EAAE,cAAc,CAClE,wCAAwC,EACxC,wBAAwB,EACxB,sCAAsC,CAMtC,CAAC;AAMF,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB;;CAuF/E,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG;IACtC,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,sCAAsC,EAAE,iBAAiB,CAAC,GAClE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,sCAAsC,GAAG;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/dist/cjs/components/src/components/Templates/RecommendationEmail/RecommendationEmail.js

@@ -22,6 +22,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Result_1 = require("../../Molecules/Result");
 var utilities_1 = require("../../../utilities");
 var providers_1 = require("../../../providers");
+var hooks_1 = require("../../../hooks");
 exports.recommendationEmailThemeComponentProps = {
     default: {},
     mobile: {},
@@ -32,7 +33,7 @@ var defaultStyles = function () {
     return (0, react_1.css)({});
 };
 exports.RecommendationEmail = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     var globalTheme = (0, providers_1.useTheme)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
@@ -41,7 +42,14 @@ exports.RecommendationEmail = (0, mobx_react_lite_1.observer)(function (properti
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('recommendationEmail', globalTheme, defaultProps, properties);
-    var controller = props.controller, results = props.results, resultComponent = props.resultComponent, resultProps = props.resultProps, resultWidth = props.resultWidth, treePath = props.treePath, disableStyles = props.disableStyles, internalClassName = props.internalClassName, className = props.className;
+    var controller = props.controller, results = props.results, resultProps = props.resultProps, resultWidth = props.resultWidth, treePath = props.treePath, disableStyles = props.disableStyles, internalClassName = props.internalClassName, className = props.className;
+    var resultComponent = props.resultComponent;
+    var snap = (0, providers_1.useSnap)();
+    var isNamedResultComponent = typeof resultComponent === 'string';
+    var resultComponentName = isNamedResultComponent ? resultComponent : '';
+    var resultComponentMap = ((_e = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _e === void 0 ? void 0 : _e.library.import.component.result) || {};
+    var _g = (0, hooks_1.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined), resultComponentOverride = _g.ComponentOverride, shouldWaitForNamedResultComponent = _g.shouldWaitForNamedOverride;
+    var resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
     var subProps = {
         result: __assign(__assign({ 
             // default props
@@ -52,12 +60,15 @@ exports.RecommendationEmail = (0, mobx_react_lite_1.observer)(function (properti
             theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
     };
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var resultsToRender = results || ((_e = controller === null || controller === void 0 ? void 0 : controller.store) === null || _e === void 0 ? void 0 : _e.results) || [];
+    var resultsToRender = results || ((_f = controller === null || controller === void 0 ? void 0 : controller.store) === null || _f === void 0 ? void 0 : _f.results) || [];
     return resultsToRender.length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-email', className, internalClassName) }, styling, { children: resultsToRender.map(function (result, idx) { return ((0, jsx_runtime_1.jsx)("div", { id: "ss-emailrec".concat(idx), className: (0, classnames_1.default)('ss__recommendation-email__result-wrapper'), style: { display: 'block', width: resultWidth }, children: (function () {
-                if (resultComponent) {
-                    return (0, utilities_1.cloneWithProps)(resultComponent, __assign(__assign({ controller: controller, result: result }, resultProps), { email: true, treePath: treePath }));
+                if (resolvedResultComponent) {
+                    return (0, utilities_1.cloneWithProps)(resolvedResultComponent, __assign(__assign({ controller: controller, result: result }, resultProps), { email: true, treePath: treePath }));
                 }
                 else {
+                    if (shouldWaitForNamedResultComponent) {
+                        return null;
+                    }
                     return ((0, jsx_runtime_1.jsx)(Result_1.Result, __assign({ result: result, hideBadge: true, theme: {
                             components: {
                                 image: {

package/dist/cjs/components/src/components/Templates/RecommendationGrid/RecommendationGrid.d.ts

@@ -9,8 +9,9 @@ export type RecommendationGridProps = {
     breakpoints?: BreakpointsProps;
     resultComponent?: JSXComponent | JSX.Element;
     results?: Product[];
-} & RecommendationGridTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<RecommendationGridTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type RecommendationGridTemplatesLegalProps = {
+    resultComponent?: string;
     title?: string;
     columns?: number;
     rows?: number;

package/dist/cjs/components/src/components/Templates/RecommendationGrid/RecommendationGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationGrid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA6B7F,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAgI7E,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACrC,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB,GAAG,qCAAqC,GACxC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}
+{"version":3,"file":"RecommendationGrid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA8B7F,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CA6I7E,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACrC,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,GACjE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}

package/dist/cjs/components/src/components/Templates/RecommendationGrid/RecommendationGrid.js

@@ -48,7 +48,7 @@ var defaultStyles = function (_a) {
     });
 };
 exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var globalTheme = (0, providers_1.useTheme)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
@@ -66,7 +66,14 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (propertie
         var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
         props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
     }
-    var disableStyles = props.disableStyles, title = props.title, resultComponent = props.resultComponent, trim = props.trim, lazyRender = props.lazyRender, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, theme = props.theme, controller = props.controller;
+    var disableStyles = props.disableStyles, title = props.title, trim = props.trim, lazyRender = props.lazyRender, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, theme = props.theme, controller = props.controller;
+    var resultComponent = props.resultComponent;
+    var snap = (0, providers_1.useSnap)();
+    var isNamedResultComponent = typeof resultComponent === 'string';
+    var resultComponentName = isNamedResultComponent ? resultComponent : '';
+    var resultComponentMap = ((_o = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _o === void 0 ? void 0 : _o.library.import.component.result) || {};
+    var _p = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined), resultComponentOverride = _p.ComponentOverride, shouldWaitForNamedResultComponent = _p.shouldWaitForNamedOverride;
+    var resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
     var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
     var subProps = {
         result: __assign(__assign({ 
@@ -100,7 +107,7 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (propertie
         results = results === null || results === void 0 ? void 0 : results.slice(0, props.columns * props.rows);
     }
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _o = (0, react_2.useState)(false), isVisible = _o[0], setIsVisible = _o[1];
+    var _q = (0, react_2.useState)(false), isVisible = _q[0], setIsVisible = _q[1];
     var recsRef = (0, hooks_1.useRef)(null);
     var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
     if (inView) {
@@ -108,8 +115,8 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (propertie
     }
     return (results === null || results === void 0 ? void 0 : results.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-grid', className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation-grid__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "ss__recommendation-grid__results", children: results.map(function (result) {
                             return (function () {
-                                if (resultComponent && controller) {
-                                    return (0, utilities_1.cloneWithProps)(resultComponent, {
+                                if (resolvedResultComponent && controller) {
+                                    return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
                                         controller: controller,
                                         result: result,
                                         theme: theme,
@@ -117,6 +124,9 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (propertie
                                     });
                                 }
                                 else {
+                                    if (shouldWaitForNamedResultComponent) {
+                                        return null;
+                                    }
                                     return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { result: result, controller: controller, children: (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { result: result, controller: controller, treePath: treePath }), result.id) }));
                                 }
                             })();

package/dist/cjs/components/src/components/Templates/Search/Search.d.ts

@@ -10,8 +10,9 @@ export type SearchProps = {
     lang?: Partial<SearchLang>;
     alias?: 'searchCollapsible' | 'searchHorizontal';
     resultComponent?: JSXComponent | JSX.Element;
-} & SearchTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & Omit<SearchTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type SearchTemplatesLegalProps = {
+    resultComponent?: string;
     mobileDisplayAt?: string;
     hideSidebar?: boolean;
     hideTopToolbar?: boolean;

package/dist/cjs/components/src/components/Templates/Search/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKlG,OAAO,EAAE,IAAI,EAA0B,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAwCnE,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA+LrD,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;IACjD,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,yBAAyB,GAC5B,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,OAAO,EAAE,iBAAiB,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1F"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKlG,OAAO,EAAE,IAAI,EAA0B,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAwCnE,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA6LrD,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;IACjD,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,yBAAyB,EAAE,iBAAiB,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,OAAO,EAAE,iBAAiB,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1F"}

package/dist/cjs/components/src/components/Templates/Search/Search.js

@@ -78,10 +78,8 @@ exports.Search = (0, mobx_react_lite_1.observer)(function (properties) {
     if (props.alias) {
         classNamePrefix = "ss__".concat((0, componentNameToClassName_1.componentNameToClassName)(props.alias));
     }
-    // handle selected layoutOptions
-    if ((globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.name) && props.layoutOptions) {
-        (0, useLayoutOptions_1.useLayoutOptions)(props, globalTheme);
-    }
+    // handle selected layoutOptions - must always call to preserve hook order
+    (0, useLayoutOptions_1.useLayoutOptions)(props, globalTheme);
     var store = controller.store;
     var isMobile = (0, hooks_2.useMediaQuery)("(max-width: ".concat(mobileDisplayAt, ")"));
     var _f = (0, hooks_1.useState)(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed)), sidebarOpenState = _f[0], setSidebarOpenState = _f[1];

package/dist/cjs/components/src/components/Templates/SearchCollapsible/SearchCollapsible.d.ts

@@ -6,6 +6,6 @@ export declare const SearchCollapsible: ((properties: SearchCollapsibleProps) =>
 };
 export type SearchCollapsibleProps = {
     controller: SearchController;
-} & SearchProps & SearchCollapsibleTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & SearchProps & Omit<SearchCollapsibleTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type SearchCollapsibleTemplatesLegalProps = SearchTemplatesLegalProps;
 //# sourceMappingURL=SearchCollapsible.d.ts.map

package/dist/cjs/components/src/components/Templates/SearchCollapsible/SearchCollapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchCollapsible/SearchCollapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAM3E,CAAC;AAIH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,oCAAoC,GACpC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG,yBAAyB,CAAC"}
+{"version":3,"file":"SearchCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchCollapsible/SearchCollapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAM3E,CAAC;AAIH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAC7D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG,yBAAyB,CAAC"}

package/dist/cjs/components/src/components/Templates/SearchHorizontal/SearchHorizontal.d.ts

@@ -6,6 +6,6 @@ export declare const SearchHorizontal: ((properties: SearchHorizontalProps) => i
 };
 export type SearchHorizontalProps = {
     controller: SearchController;
-} & SearchProps & SearchHorizontalTemplatesLegalProps & Omit<ComponentProps, 'customComponent'>;
+} & SearchProps & Omit<SearchHorizontalTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type SearchHorizontalTemplatesLegalProps = SearchTemplatesLegalProps;
 //# sourceMappingURL=SearchHorizontal.d.ts.map

package/dist/cjs/components/src/components/Templates/SearchHorizontal/SearchHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAMzE,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IACnC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,mCAAmC,GACnC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,mCAAmC,GAAG,yBAAyB,CAAC"}
+{"version":3,"file":"SearchHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAMzE,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IACnC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,IAAI,CAAC,mCAAmC,EAAE,iBAAiB,CAAC,GAC5D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,mCAAmC,GAAG,yBAAyB,CAAC"}

package/dist/cjs/components/src/hooks/createRecommendationTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createRecommendationTemplate.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/createRecommendationTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AAK1G,OAAO,EAAE,YAAY,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;IAC3B,cAAc,CAAC,EAAE;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;QACzC,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;KACjD,CAAC;CACF,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,+BAA+B,EAAE,CAAC,CAAC,KAAK,EAAE,4BAA4B,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7G,qCAAqC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChE,cAAc,EAAE,wBAAwB,GAAG,SAAS,CAAC;CACrD,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,aAAa,GAAG,UAAU,CA6CjF"}
+{"version":3,"file":"createRecommendationTemplate.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/createRecommendationTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AAK1G,OAAO,EAAE,YAAY,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;IAC3B,cAAc,CAAC,EAAE;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;QACzC,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;KACjD,CAAC;CACF,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,+BAA+B,EAAE,CAAC,CAAC,KAAK,EAAE,4BAA4B,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7G,qCAAqC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChE,cAAc,EAAE,wBAAwB,GAAG,SAAS,CAAC;CACrD,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,aAAa,GAAG,UAAU,CAqDjF"}

package/dist/cjs/components/src/hooks/createRecommendationTemplate.js

@@ -5,16 +5,26 @@ var providers_1 = require("../providers");
 var useCreateController_1 = require("./useCreateController");
 var useComponent_1 = require("./useComponent");
 function createRecommendationTemplate(templates) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var recommendationTemplateComponent;
     var recommendationTemplateResultComponent;
     var recsController;
-    if ((_a = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _a === void 0 ? void 0 : _a.enabled) {
-        var componentName = ((_b = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _b === void 0 ? void 0 : _b.component) || 'RecommendationGrid';
-        var snap = (0, providers_1.useSnap)();
+    var snap = (0, providers_1.useSnap)();
+    var recommendationTemplatesEnabled = Boolean((_a = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _a === void 0 ? void 0 : _a.enabled);
+    var componentName = recommendationTemplatesEnabled ? ((_b = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _b === void 0 ? void 0 : _b.component) || 'RecommendationGrid' : undefined;
+    var resultComponentName = recommendationTemplatesEnabled ? ((_c = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _c === void 0 ? void 0 : _c.resultComponent) || 'Result' : undefined;
+    var recommendationTemplateComponentMap = ((_d = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _d === void 0 ? void 0 : _d.library.import.component.recommendation.default) || {};
+    var recommendationTemplateResultComponentMap = ((_e = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _e === void 0 ? void 0 : _e.library.import.component.result) || {};
+    var _j = (0, useComponent_1.useComponent)(recommendationTemplateComponentMap, componentName), namedRecommendationTemplateComponent = _j.ComponentOverride, shouldWaitForNamedRecommendationTemplateComponent = _j.shouldWaitForNamedOverride;
+    var _k = (0, useComponent_1.useComponent)(recommendationTemplateResultComponentMap, resultComponentName), namedRecommendationTemplateResultComponent = _k.ComponentOverride, shouldWaitForNamedRecommendationTemplateResultComponent = _k.shouldWaitForNamedOverride;
+    if (recommendationTemplatesEnabled) {
+        recommendationTemplateComponent = shouldWaitForNamedRecommendationTemplateComponent
+            ? undefined
+            : namedRecommendationTemplateComponent;
+        recommendationTemplateResultComponent = shouldWaitForNamedRecommendationTemplateResultComponent
+            ? undefined
+            : namedRecommendationTemplateResultComponent;
         if (snap === null || snap === void 0 ? void 0 : snap.templates) {
-            var defaultResultComponentFromTheme = 'Result';
-            var resultComponentName = (((_c = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _c === void 0 ? void 0 : _c.resultComponent) || defaultResultComponentFromTheme);
             var mergedConfig = Object.assign({
                 id: '',
                 tag: 'no-results',
@@ -22,15 +32,9 @@ function createRecommendationTemplate(templates) {
             }, templates.recommendation.config);
             mergedConfig.id = mergedConfig.id || "search-".concat(mergedConfig.tag);
             recsController = (0, useCreateController_1.useCreateController)(snap, 'recommendation', mergedConfig);
-            if (!((_d = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _d === void 0 ? void 0 : _d.loaded) && !((_e = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _e === void 0 ? void 0 : _e.loading) && ((_f = recsController === null || recsController === void 0 ? void 0 : recsController.store.error) === null || _f === void 0 ? void 0 : _f.type) !== 'error') {
+            if (!((_f = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _f === void 0 ? void 0 : _f.loaded) && !((_g = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _g === void 0 ? void 0 : _g.loading) && ((_h = recsController === null || recsController === void 0 ? void 0 : recsController.store.error) === null || _h === void 0 ? void 0 : _h.type) !== 'error') {
                 recsController === null || recsController === void 0 ? void 0 : recsController.search();
             }
-            if (resultComponentName && ((_g = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _g === void 0 ? void 0 : _g.library.import.component.result)) {
-                recommendationTemplateResultComponent = (0, useComponent_1.useComponent)((_h = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _h === void 0 ? void 0 : _h.library.import.component.result, resultComponentName);
-            }
-            if (componentName && ((_j = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _j === void 0 ? void 0 : _j.library.import.component.recommendation.default)) {
-                recommendationTemplateComponent = (0, useComponent_1.useComponent)((_k = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _k === void 0 ? void 0 : _k.library.import.component.recommendation.default, componentName);
-            }
         }
     }
     var returnObj = {

package/dist/cjs/components/src/hooks/index.d.ts

@@ -10,5 +10,6 @@ export { useLang, Lang } from './useLang';
 export * from './useDeepCompareEffect';
 export * from './useCreateController';
 export * from './useComponent';
+export * from './useCustomComponentOverride';
 export * from './useTracking';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,eAAe,CAAC"}

package/dist/cjs/components/src/hooks/index.js

@@ -28,4 +28,5 @@ Object.defineProperty(exports, "useLang", { enumerable: true, get: function () {
 __exportStar(require("./useDeepCompareEffect"), exports);
 __exportStar(require("./useCreateController"), exports);
 __exportStar(require("./useComponent"), exports);
+__exportStar(require("./useCustomComponentOverride"), exports);
 __exportStar(require("./useTracking"), exports);

package/dist/cjs/components/src/hooks/useComponent.d.ts

@@ -1,3 +1,7 @@
 import { ComponentMap, JSXComponent } from '../types';
-export declare const useComponent: (map: ComponentMap, name: string) => JSXComponent | undefined;
+export type UseComponentResult = {
+    ComponentOverride: JSXComponent | undefined;
+    shouldWaitForNamedOverride: boolean;
+};
+export declare const useComponent: (map: ComponentMap, name?: string) => UseComponentResult;
 //# sourceMappingURL=useComponent.d.ts.map

package/dist/cjs/components/src/hooks/useComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComponent.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAS,YAAY,QAAQ,MAAM,KAAG,YAAY,GAAG,SAoB7E,CAAC"}
+{"version":3,"file":"useComponent.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAChC,iBAAiB,EAAE,YAAY,GAAG,SAAS,CAAC;IAC5C,0BAA0B,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAS,YAAY,SAAS,MAAM,KAAG,kBAgE/D,CAAC"}

package/dist/cjs/components/src/hooks/useComponent.js

@@ -4,23 +4,61 @@ exports.useComponent = void 0;
 var hooks_1 = require("preact/hooks");
 var useComponent = function (map, name) {
     var _a = (0, hooks_1.useState)(undefined), importedComponent = _a[0], setImportedComponent = _a[1];
+    var _b = (0, hooks_1.useState)(false), importFailed = _b[0], setImportFailed = _b[1];
     (0, hooks_1.useEffect)(function () {
+        // This flag belongs to one specific effect run.
+        // Cleanup flips it so any async work from that run can no longer update state.
+        var isActive = true;
+        if (!name) {
+            // Clear the current component when nothing is selected.
+            setImportedComponent(undefined);
+            return function () {
+                isActive = false;
+            };
+        }
+        setImportFailed(false);
         var importFn = map[name];
         if (importFn && typeof importFn === 'function') {
             var componentFn_1 = importFn();
             if (componentFn_1 instanceof Promise) {
-                componentFn_1.then(function (component) {
+                // Guard against stale promises resolving after the effect has moved on.
+                componentFn_1
+                    .then(function (component) {
+                    if (!isActive) {
+                        return;
+                    }
                     setImportedComponent(function () { return component; });
+                })
+                    .catch(function (error) {
+                    if (!isActive) {
+                        return;
+                    }
+                    setImportFailed(true);
+                    setImportedComponent(undefined);
+                    console.warn("Failed to load component \"".concat(name, "\"."), error);
                 });
             }
             else {
-                setImportedComponent(function () { return componentFn_1; });
+                // Synchronous resolution can update immediately as long as this effect is still current.
+                if (isActive) {
+                    setImportedComponent(function () { return componentFn_1; });
+                }
             }
         }
         else {
+            // Missing map entries intentionally clear the component and warn for easier debugging.
+            setImportedComponent(undefined);
             console.warn("Component \"".concat(name, "\" not found in component map."));
         }
-    }, []);
-    return importedComponent;
+        // Cleanup runs before the next effect invocation and on unmount.
+        return function () {
+            isActive = false;
+        };
+    }, [map, name]);
+    var hasNamedOverride = Boolean(name && typeof map[name] === 'function');
+    return {
+        ComponentOverride: importedComponent,
+        shouldWaitForNamedOverride: hasNamedOverride && !importedComponent && !importFailed,
+    };
 };
 exports.useComponent = useComponent;