@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

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

@@ -1,171 +1,109 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RecommendationBundle = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var Carousel_1 = require("../../Molecules/Carousel");
-var Result_1 = require("../../Molecules/Result");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
-var ResultTracker_1 = require("../../Trackers/ResultTracker");
-var BundleSelector_1 = require("./BundleSelector");
-var BundleCTA_1 = require("./BundleCTA");
-var hooks_2 = require("../../../hooks");
-var componentNameToClassName_1 = require("../../../utilities/componentNameToClassName");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var vertical = _a.vertical, separatorIcon = _a.separatorIcon, carousel = _a.carousel, ctaInline = _a.ctaInline, hasSeed = _a.hasSeed, hideSeed = _a.hideSeed, carouselEnabled = _a.carouselEnabled, limit = _a.limit, inherits = _a.alias;
-    var classNamePrefix = 'ss__recommendation-bundle';
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const Carousel_1 = require("../../Molecules/Carousel");
+const Result_1 = require("../../Molecules/Result");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
+const ResultTracker_1 = require("../../Trackers/ResultTracker");
+const BundleSelector_1 = require("./BundleSelector");
+const BundleCTA_1 = require("./BundleCTA");
+const hooks_2 = require("../../../hooks");
+const componentNameToClassName_1 = require("../../../utilities/componentNameToClassName");
+const defaultStyles = ({ vertical, separatorIcon, carousel, ctaInline, hasSeed, hideSeed, carouselEnabled, limit, alias: inherits, }) => {
+    let classNamePrefix = 'ss__recommendation-bundle';
     if (inherits) {
-        classNamePrefix = "ss__".concat((0, componentNameToClassName_1.componentNameToClassName)(inherits));
+        classNamePrefix = `ss__${(0, componentNameToClassName_1.componentNameToClassName)(inherits)}`;
     }
-    var slidesPerView = carousel === null || carousel === void 0 ? void 0 : carousel.slidesPerView;
-    return (0, react_1.css)((_b = {},
-        _b[".".concat(classNamePrefix, "__wrapper")] = {
+    const slidesPerView = carousel?.slidesPerView;
+    return (0, react_1.css)({
+        [`.${classNamePrefix}__wrapper`]: {
             display: 'flex',
             maxWidth: '100%',
             margin: '0',
             padding: '0',
         },
-        _b[".".concat(classNamePrefix, "__wrapper__selector--seed")] = {
-            width: "".concat(vertical ? '100%' : 'auto'),
-            margin: "".concat(!separatorIcon ? 'auto !important' : 'initial'),
+        [`.${classNamePrefix}__wrapper__selector--seed`]: {
+            width: `${vertical ? '100%' : 'auto'}`,
+            margin: `${!separatorIcon ? 'auto !important' : 'initial'}`,
         },
-        _b[".".concat(classNamePrefix, "__wrapper__seed-container")] = {
-            width: vertical ? '100%' : "calc(100% / ".concat(slidesPerView + (!ctaInline ? 0 : 1), ")"),
+        [`.${classNamePrefix}__wrapper__seed-container`]: {
+            width: vertical ? '100%' : `calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)})`,
         },
-        _b[".".concat(classNamePrefix, "__wrapper__cta")] = (_c = {
-                width: vertical ? '100%' : "".concat(!ctaInline ? '100%' : "calc(100% / ".concat((carouselEnabled ? slidesPerView : limit || 0) + 1, ")")),
-                textAlign: 'center'
-            },
-            _c[".".concat(classNamePrefix, "__wrapper__cta__subtotal__prices")] = {
+        [`.${classNamePrefix}__wrapper__cta`]: {
+            width: vertical ? '100%' : `${!ctaInline ? '100%' : `calc(100% / ${(carouselEnabled ? slidesPerView : limit || 0) + 1})`}`,
+            textAlign: 'center',
+            [`.${classNamePrefix}__wrapper__cta__subtotal__prices`]: {
                 display: 'block',
             },
-            _c[".".concat(classNamePrefix, "__wrapper__cta__button--added")] = {
+            [`.${classNamePrefix}__wrapper__cta__button--added`]: {
                 cursor: 'none',
                 pointerEvents: 'none',
                 opacity: '.7',
             },
-            _c),
-        _b[".".concat(classNamePrefix, "__wrapper__carousel")] = {
+        },
+        [`.${classNamePrefix}__wrapper__carousel`]: {
             boxSizing: 'border-box',
-            width: vertical ? '100%' : "calc(calc(100% / ".concat(slidesPerView + (!ctaInline ? 0 : 1), ") * ").concat(slidesPerView - (hasSeed && !hideSeed ? 1 : 0), ")"),
+            width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView - (hasSeed && !hideSeed ? 1 : 0)})`,
         },
-        _b[".".concat(classNamePrefix, "__wrapper--seed-in-carousel")] = (_d = {},
-            _d[".".concat(classNamePrefix, "__wrapper__cta")] = {
-                width: vertical ? '100%' : "calc(100% / ".concat((carousel === null || carousel === void 0 ? void 0 : carousel.slidesPerView) + (!ctaInline ? 0 : 1), ")"),
+        [`.${classNamePrefix}__wrapper--seed-in-carousel`]: {
+            [`.${classNamePrefix}__wrapper__cta`]: {
+                width: vertical ? '100%' : `calc(100% / ${carousel?.slidesPerView + (!ctaInline ? 0 : 1)})`,
             },
-            _d[".".concat(classNamePrefix, "__wrapper__carousel")] = {
-                width: vertical ? '100%' : "calc(calc(100% / ".concat((carousel === null || carousel === void 0 ? void 0 : carousel.slidesPerView) + (!ctaInline ? 0 : 1), ") * ").concat(carousel === null || carousel === void 0 ? void 0 : carousel.slidesPerView, ")"),
+            [`.${classNamePrefix}__wrapper__carousel`]: {
+                width: vertical ? '100%' : `calc(calc(100% / ${carousel?.slidesPerView + (!ctaInline ? 0 : 1)}) * ${carousel?.slidesPerView})`,
                 padding: '0',
             },
-            _d),
-        _b['.swiper-slide, .swiper-slide-visible.swiper-last-visible-slide'] = (_e = {},
-            _e[".".concat(classNamePrefix, "__wrapper__selector__icon")] = {
+        },
+        '.swiper-slide, .swiper-slide-visible.swiper-last-visible-slide': {
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
                 display: 'none',
             },
-            _e),
-        _b['.swiper-slide-visible'] = (_f = {},
-            _f[".".concat(classNamePrefix, "__wrapper__selector__icon")] = {
+        },
+        '.swiper-slide-visible': {
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
                 display: 'block',
             },
-            _f),
-        _b[".".concat(classNamePrefix, "__wrapper--vertical")] = {
+        },
+        [`.${classNamePrefix}__wrapper--vertical`]: {
             flexDirection: 'column',
         },
-        _b[".".concat(classNamePrefix, "__wrapper__selector")] = (_g = {
-                alignItems: 'baseline',
-                position: 'relative'
-            },
-            _g["&.".concat(classNamePrefix, "__wrapper__selector--last")] = (_h = {},
-                _h[".".concat(classNamePrefix, "__wrapper__selector__icon")] = {
+        [`.${classNamePrefix}__wrapper__selector`]: {
+            alignItems: 'baseline',
+            position: 'relative',
+            [`&.${classNamePrefix}__wrapper__selector--last`]: {
+                [`.${classNamePrefix}__wrapper__selector__icon`]: {
                     display: 'none',
                 },
-                _h),
-            _g[".".concat(classNamePrefix, "__wrapper__selector__result-wrapper__seed-badge")] = {
+            },
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper__seed-badge`]: {
                 position: 'absolute',
                 top: '0',
                 left: '0',
                 zIndex: '1',
             },
-            _g[".".concat(classNamePrefix, "__wrapper__selector__icon")] = {
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
                 position: 'absolute',
                 right: '-1em',
                 top: '140px',
             },
-            _g[".".concat(classNamePrefix, "__wrapper__selector__result-wrapper")] = {
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper`]: {
                 alignItems: 'center',
                 position: 'relative',
-                margin: "0px ".concat(5 + (Number(carousel === null || carousel === void 0 ? void 0 : carousel.spaceBetween) || 0), "px"),
+                margin: `0px ${5 + (Number(carousel?.spaceBetween) || 0)}px`,
             },
-            _g[".".concat(classNamePrefix, "__wrapper__selector__result-wrapper__checkbox")] = {
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper__checkbox`]: {
                 position: 'absolute',
                 top: '0',
                 right: '0',
@@ -173,15 +111,13 @@ var defaultStyles = function (_a) {
                 zIndex: '101',
                 cursor: 'pointer',
             },
-            _g),
-        _b));
+        },
+    });
 };
-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, _1;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultCarouselBreakpoints = {
+exports.RecommendationBundle = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultCarouselBreakpoints = {
         0: {
             slidesPerView: 2,
             slidesPerGroup: 2,
@@ -199,7 +135,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             spaceBetween: 10,
         },
     };
-    var defaultProps = {
+    const defaultProps = {
         // default props
         breakpoints: JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
         hideCheckboxes: false,
@@ -211,104 +147,130 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
         ctaButtonSuccessText: 'Bundle Added!',
         ctaButtonSuccessTimeout: 2000,
         ctaInline: true,
-        title: (_g = (_f = (_e = (_d = (_c = properties.controller) === null || _c === void 0 ? void 0 : _c.store) === null || _d === void 0 ? void 0 : _d.profile) === null || _e === void 0 ? void 0 : _e.display) === null || _f === void 0 ? void 0 : _f.templateParameters) === null || _g === void 0 ? void 0 : _g.title,
-        description: (_m = (_l = (_k = (_j = (_h = properties.controller) === null || _h === void 0 ? void 0 : _h.store) === null || _j === void 0 ? void 0 : _j.profile) === null || _k === void 0 ? void 0 : _k.display) === null || _l === void 0 ? void 0 : _l.templateParameters) === null || _m === void 0 ? void 0 : _m.description,
+        title: properties.controller?.store?.profile?.display?.templateParameters?.title,
+        description: properties.controller?.store?.profile?.display?.templateParameters?.description,
         treePath: globalTreePath,
     };
     //mergeprops only uses names that are passed via properties, so this cannot be put in the defaultProps
-    var _properties = __assign({ name: (_r = (_q = (_p = (_o = properties.controller) === null || _o === void 0 ? void 0 : _o.store) === null || _p === void 0 ? void 0 : _p.profile) === null || _q === void 0 ? void 0 : _q.tag) === null || _r === void 0 ? void 0 : _r.toLowerCase() }, properties);
-    var props = (0, utilities_1.mergeProps)(_properties.alias || 'recommendationBundle', globalTheme, defaultProps, _properties);
-    var classNamePrefix = 'ss__recommendation-bundle';
+    const _properties = {
+        name: properties.controller?.store?.profile?.tag?.toLowerCase(),
+        ...properties,
+    };
+    let props = (0, utilities_1.mergeProps)(_properties.alias || 'recommendationBundle', globalTheme, defaultProps, _properties);
+    let classNamePrefix = 'ss__recommendation-bundle';
     if (props.alias) {
-        classNamePrefix = "ss__".concat((0, componentNameToClassName_1.componentNameToClassName)(props.alias));
+        classNamePrefix = `ss__${(0, componentNameToClassName_1.componentNameToClassName)(props.alias)}`;
     }
-    var displaySettings;
-    if (!(((_s = properties.theme) === null || _s === void 0 ? void 0 : _s.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates')) {
+    let displaySettings;
+    if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates')) {
         displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
         if (displaySettings && Object.keys(displaySettings).length) {
-            var theme = (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 });
+            const theme = (0, deepmerge_1.default)(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+            props = {
+                ...props,
+                ...displaySettings,
+                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, 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;
-    var carouselEnabled = mergedCarouselProps.enabled;
+    const { 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, ...additionalProps } = props;
+    const resultComponent = props.resultComponent;
+    const snap = (0, providers_1.useSnap)();
+    const isNamedResultComponent = typeof resultComponent === 'string';
+    const resultComponentName = isNamedResultComponent ? resultComponent : '';
+    const resultComponentMap = snap?.templates?.library.import.component.result || {};
+    const { ComponentOverride: resultComponentOverride, shouldWaitForNamedOverride: shouldWaitForNamedResultComponent } = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined);
+    const resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
+    const mergedlazyRender = {
+        enabled: true,
+        offset: '10%',
+        ...lazyRender,
+    };
+    const mergedCarouselProps = {
+        enabled: true,
+        loop: false,
+        spaceBetween: 10,
+        ...carousel,
+    };
+    const { seedInCarousel, prevButton, nextButton, hideButtons, loop, spaceBetween, pagination } = mergedCarouselProps;
+    const carouselEnabled = mergedCarouselProps.enabled;
     if (!controller || controller.type !== 'recommendation') {
-        throw new Error("<RecommendationBundle> Component requires 'controller' prop with an instance of RecommendationController");
+        throw new Error(`<RecommendationBundle> Component requires 'controller' prop with an instance of RecommendationController`);
     }
-    var resultsToRender = results || ((_u = controller.store) === null || _u === void 0 ? void 0 : _u.results);
+    let resultsToRender = results || controller.store?.results;
     if (limit) {
-        resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length ? limit + 1 : limit);
+        resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter((result) => result.bundleSeed == true).length ? limit + 1 : limit);
     }
-    var cartStore = controller.store.cart;
+    const cartStore = controller.store.cart;
     if (!cartStore) {
-        throw new Error("<RecommendationBundle> Component requires 'cartStore' to exist in the recommendation store");
+        throw new Error(`<RecommendationBundle> Component requires 'cartStore' to exist in the recommendation store`);
     }
-    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!");
+    if (!(results && results.length) && !controller.store?.results?.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()
-        : (_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, 
+    const seed = results
+        ? results.filter((result) => result.bundleSeed == true).pop()
+        : controller.store?.results?.filter((result) => result.bundleSeed == true).pop();
+    const resultSubProps = alias == 'recommendationBundleList' ? { hideImage: true, hideBadge: true } : {};
+    const subProps = {
+        carousel: {
+            loop: loop,
             // default props
-            internalClassName: 'ss__recommendation__carousel' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__recommendation__carousel',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        result: __assign(__assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        result: {
             // default props
-            internalClassName: 'ss__recommendation__result' }, resultSubProps), (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__recommendation__result',
+            ...resultSubProps,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var hasSeed = Boolean(resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length);
-    var slidesPerView = ((_z = props.carousel) === null || _z === void 0 ? void 0 : _z.slidesPerView) || props.slidesPerView;
+    const hasSeed = Boolean(resultsToRender.filter((result) => result.bundleSeed == true).length);
+    let slidesPerView = props.carousel?.slidesPerView || props.slidesPerView;
     if (!slidesPerView) {
         slidesPerView = 2;
     }
     else if (resultsToRender.length < Number(slidesPerView)) {
         slidesPerView = resultsToRender.length;
     }
-    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { carousel: __assign(__assign({}, mergedCarouselProps), { slidesPerView: slidesPerView }), hasSeed: hasSeed, carouselEnabled: carouselEnabled }), defaultStyles);
-    var _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
+    const styling = (0, utilities_1.mergeStyles)({ ...props, carousel: { ...mergedCarouselProps, slidesPerView }, hasSeed, carouselEnabled }, defaultStyles);
+    const _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
     //this resets the selected items if the results to render changes
     // so you dont end up with something selected that is no longer rendered
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         cartStore.reset();
         if (_preSelectedCount) {
-            resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.forEach(function (result, idx) {
+            resultsToRender?.forEach((result, idx) => {
                 if (idx < Number(_preSelectedCount)) {
                     cartStore.addItems([result]);
                 }
             });
         }
     }, [resultsToRender.length]);
-    var selectedItems = cartStore.items;
-    var modifiedBreakpoints = __assign({}, breakpoints);
+    const selectedItems = cartStore.items;
+    const modifiedBreakpoints = { ...breakpoints };
     if (carouselEnabled) {
-        var adjustSlides_1 = function (obj) {
+        const adjustSlides = (obj) => {
             // fallback in case slides per view/group were not provided in breakpoint...
-            var currentBreakpointSlidesPerView = (obj === null || obj === void 0 ? void 0 : obj.slidesPerView) || obj.slidesPerView || 2;
-            var currentBreakpointSlidesPerGroup = (obj === null || obj === void 0 ? void 0 : obj.slidesPerGroup) || obj.slidesPerGroup || 2;
-            var newSlidesPerView = currentBreakpointSlidesPerView;
-            var newSlidesPerGroup = currentBreakpointSlidesPerGroup;
-            var resultCount = !hasSeed || seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
+            const currentBreakpointSlidesPerView = obj?.slidesPerView || obj.slidesPerView || 2;
+            const currentBreakpointSlidesPerGroup = obj?.slidesPerGroup || obj.slidesPerGroup || 2;
+            let newSlidesPerView = currentBreakpointSlidesPerView;
+            let newSlidesPerGroup = currentBreakpointSlidesPerGroup;
+            const resultCount = !hasSeed || seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
             if (resultCount) {
                 if (resultCount >= currentBreakpointSlidesPerView) {
                     newSlidesPerView = currentBreakpointSlidesPerView - (!seedInCarousel && hasSeed ? 1 : 0);
@@ -326,21 +288,32 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             };
         };
         //no breakpoint props allowed in 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;
-                modifiedBreakpoints[breakpoint] = __assign(__assign({}, modifiedBreakpoints[breakpoint]), { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup });
+        if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates')) {
+            Object.keys(props.breakpoints).forEach((breakpoint) => {
+                const obj = props.breakpoints[breakpoint];
+                const { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup } = adjustSlides(obj);
+                modifiedBreakpoints[breakpoint] = {
+                    ...modifiedBreakpoints[breakpoint],
+                    slidesPerView: adjustedSlidesPerView,
+                    slidesPerGroup: adjustedSlidesPerGroup,
+                };
             });
         }
         else {
-            var _3 = adjustSlides_1(__assign(__assign({}, mergedCarouselProps), { slidesPerView: slidesPerView })), adjustedSlidesPerView = _3.slidesPerView, adjustedSlidesPerGroup = _3.slidesPerGroup;
-            displaySettings = __assign(__assign({}, mergedCarouselProps), { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup });
+            const { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup } = adjustSlides({
+                ...mergedCarouselProps,
+                slidesPerView: slidesPerView,
+            });
+            displaySettings = {
+                ...mergedCarouselProps,
+                slidesPerView: adjustedSlidesPerView,
+                slidesPerGroup: adjustedSlidesPerGroup,
+            };
         }
     }
-    var onProductSelect = function (product) {
+    const onProductSelect = (product) => {
         if (product) {
-            var idx = selectedItems.findIndex(function (result) { return result.id == product.id; });
+            const idx = selectedItems.findIndex((result) => result.id == product.id);
             //is it in the selected items?
             if (idx > -1) {
                 //already selected, deselect it now
@@ -356,56 +329,35 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             }
         }
     };
-    var addToCart = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: 
-                // add to cart tracking
-                return [4 /*yield*/, controller.addToCart(selectedItems)];
-                case 1:
-                    // add to cart tracking
-                    _b.sent();
-                    //call the function passed
-                    _a = onAddToCart;
-                    if (!_a) 
-                    //call the function passed
-                    return [3 /*break*/, 3];
-                    return [4 /*yield*/, onAddToCart(e, selectedItems)];
-                case 2:
-                    _a = (_b.sent());
-                    _b.label = 3;
-                case 3:
-                    //call the function passed
-                    _a;
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var setSeedwidth = function () {
-        var _a, _b;
+    const addToCart = async (e) => {
+        // add to cart tracking
+        await controller.addToCart(selectedItems);
+        //call the function passed
+        onAddToCart && (await onAddToCart(e, selectedItems));
+    };
+    const setSeedwidth = () => {
         if (seedRef.current) {
             // @ts-ignore - todo can this be typed appropriatly?
-            var seedElem = (_a = seedRef.current) === null || _a === void 0 ? void 0 : _a.base;
+            const seedElem = seedRef.current?.base;
             // @ts-ignore - todo can this be typed appropriatly?
-            var carouselElem = (_b = carouselRef.current) === null || _b === void 0 ? void 0 : _b.base;
-            var visibleSlide = carouselElem === null || carouselElem === void 0 ? void 0 : carouselElem.querySelector(".swiper-slide-visible .".concat(classNamePrefix, "__wrapper__selector"));
-            var width = visibleSlide === null || visibleSlide === void 0 ? void 0 : visibleSlide.offsetWidth;
+            const carouselElem = carouselRef.current?.base;
+            const visibleSlide = carouselElem?.querySelector(`.swiper-slide-visible .${classNamePrefix}__wrapper__selector`);
+            const width = visibleSlide?.offsetWidth;
             if (seedElem) {
-                seedElem.style.width = "".concat(width, "px");
+                seedElem.style.width = `${width}px`;
             }
         }
     };
-    var seedRef = (0, hooks_1.useRef)();
-    var carouselRef = (0, hooks_1.useRef)();
-    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;
+    const seedRef = (0, hooks_1.useRef)();
+    const carouselRef = (0, hooks_1.useRef)();
+    const [isVisible, setIsVisible] = (0, hooks_1.useState)(false);
+    const recsRef = (0, hooks_1.useRef)(null);
+    const inView = mergedlazyRender?.enabled ? (0, hooks_2.useIntersection)(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
     if (inView) {
         setIsVisible(true);
     }
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         seedText: {
             value: seedText,
         },
@@ -416,17 +368,17 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
             value: ctaButtonSuccessText,
         },
         ctaSubtotalTitle: {
-            value: "Subtotal for ".concat(cartStore.count, " items"),
+            value: `Subtotal for ${cartStore.count} items`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var renderedResults = (0, hooks_1.useMemo)(function () {
-        return resultsToRender.map(function (result, idx) {
-            var isSeed = Boolean(result.bundleSeed);
-            var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
-            var attributes = {
-                onCheck: function (e) {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const renderedResults = (0, hooks_1.useMemo)(() => {
+        return resultsToRender.map((result, idx) => {
+            const isSeed = Boolean(result.bundleSeed);
+            const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
+            let attributes = {
+                onCheck: (e) => {
                     e.stopPropagation();
                     onProductSelect(result);
                 },
@@ -435,13 +387,19 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
                 theme: props.theme,
                 icon: separatorIconSeedOnly ? false : separatorIcon,
                 className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '',
-                classNamePrefix: classNamePrefix,
-                treePath: treePath,
+                classNamePrefix,
+                treePath,
             };
             if (isSeed) {
-                attributes = __assign(__assign({}, attributes), { seedText: seedText, seed: true, icon: separatorIcon, lang: { seedText: lang.seedText } });
+                attributes = {
+                    ...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: resolvedResultComponent ? ((0, utilities_1.cloneWithProps)(resolvedResultComponent, {
+            return !isSeed || ((seedInCarousel || 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, { ...attributes, children: resolvedResultComponent ? ((0, utilities_1.cloneWithProps)(resolvedResultComponent, {
                         controller: controller,
                         theme: isNamedResultComponent
                             ? (0, deepmerge_1.default)(props.theme || {}, {
@@ -456,9 +414,9 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
                         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;
+                        selected,
+                        onProductSelect,
+                    })) : shouldWaitForNamedResultComponent ? null : ((0, jsx_runtime_1.jsx)(Result_1.Result, { ...subProps.result, controller: controller, result: result })) }) }, result.id)) : null;
         });
     }, [
         resultsToRender,
@@ -476,21 +434,21 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
     if (hideSeedText) {
         delete lang.seedText.value;
     }
-    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: (_1 = seed.display.mappings.core) === null || _1 === void 0 ? void 0 : _1.name, onCheck: function (e) {
+    return resultsToRender?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: recsRef, className: (0, classnames_1.default)(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: `${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)(`${classNamePrefix}__wrapper`, {
+                            [`${classNamePrefix}__wrapper--seed-in-carousel`]: seedInCarousel,
+                            [`${classNamePrefix}__wrapper--vertical`]: vertical,
+                        }), children: [carouselEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!seedInCarousel && !hideSeed && seed && ((0, jsx_runtime_1.jsx)("div", { className: `${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: seed.display.mappings.core?.name, onCheck: (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 () {
+                                                }, checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef, treePath: treePath, classNamePrefix: classNamePrefix, lang: { seedText: lang.seedText }, children: (() => {
                                                     if (resolvedResultComponent && controller) {
                                                         return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
-                                                            controller: controller,
+                                                            controller,
                                                             seed: true,
-                                                            selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
-                                                            onProductSelect: onProductSelect,
+                                                            selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
+                                                            onProductSelect,
                                                             result: seed,
-                                                            treePath: treePath,
+                                                            treePath,
                                                             theme: isNamedResultComponent
                                                                 ? (0, deepmerge_1.default)(props.theme || {}, {
                                                                     components: {
@@ -507,15 +465,15 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)(function (propert
                                                         return null;
                                                     }
                                                     else {
-                                                        return (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }));
+                                                        return (0, jsx_runtime_1.jsx)(Result_1.Result, { ...subProps.result, controller: controller, result: seed });
                                                     }
-                                                })() }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__carousel"), children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef, children: renderedResults })) })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedResults })), ctaInline && ((0, jsx_runtime_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
+                                                })() }) }) })), (0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__wrapper__carousel`, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef, children: renderedResults }) })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedResults })), ctaInline && ((0, jsx_runtime_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
                                     ctaButtonSuccessText: lang.ctaButtonSuccessText,
                                     ctaButtonText: lang.ctaButtonText,
                                     ctaSubtotalTitle: lang.ctaSubtotalTitle,
-                                } }))] }), !ctaInline && ((0, jsx_runtime_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
+                                } }))] }), !ctaInline && ((0, jsx_runtime_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
                             ctaButtonSuccessText: lang.ctaButtonSuccessText,
                             ctaButtonText: lang.ctaButtonText,
                             ctaSubtotalTitle: lang.ctaSubtotalTitle,
-                        } }))] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: resultsToRender.map(function (result) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })); }) })) })) })) : null;
+                        } }))] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: resultsToRender.map((result) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }))) })) }) })) : null;
 });