@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,48 +1,25 @@
 "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 __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.Recommendation = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-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 hooks_2 = require("../../../hooks");
-var providers_1 = require("../../../providers");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
-var hooks_3 = require("../../../hooks");
-var ResultTracker_1 = require("../../Trackers/ResultTracker");
-var defaultStyles = function (_a) {
-    var vertical = _a.vertical;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+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 hooks_2 = require("../../../hooks");
+const providers_1 = require("../../../providers");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
+const hooks_3 = require("../../../hooks");
+const ResultTracker_1 = require("../../Trackers/ResultTracker");
+const defaultStyles = ({ vertical }) => {
     return (0, react_1.css)({
         height: vertical ? '100%' : undefined,
         '.ss__result__image-wrapper': {
@@ -50,90 +27,107 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Recommendation = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         breakpoints: properties.vertical
             ? JSON.parse(JSON.stringify(Carousel_1.defaultVerticalCarouselBreakpoints))
             : JSON.parse(JSON.stringify(Carousel_1.defaultCarouselBreakpoints)),
         pagination: false,
         loop: true,
-        title: (_e = (_d = (_c = (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.display) === null || _d === void 0 ? void 0 : _d.templateParameters) === null || _e === void 0 ? void 0 : _e.title,
-        description: (_k = (_j = (_h = (_g = (_f = properties.controller) === null || _f === void 0 ? void 0 : _f.store) === null || _g === void 0 ? void 0 : _g.profile) === null || _h === void 0 ? void 0 : _h.display) === null || _j === void 0 ? void 0 : _j.templateParameters) === null || _k === void 0 ? void 0 : _k.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: (_p = (_o = (_m = (_l = properties.controller) === null || _l === void 0 ? void 0 : _l.store) === null || _m === void 0 ? void 0 : _m.profile) === null || _o === void 0 ? void 0 : _o.tag) === null || _p === void 0 ? void 0 : _p.toLowerCase() }, properties);
-    var props = (0, utilities_1.mergeProps)('recommendation', globalTheme, defaultProps, _properties);
-    var displaySettings;
+    const _properties = {
+        name: properties.controller?.store?.profile?.tag?.toLowerCase(),
+        ...properties,
+    };
+    let props = (0, utilities_1.mergeProps)('recommendation', globalTheme, defaultProps, _properties);
+    let displaySettings;
     //no breakpoint props allowed in templates
-    if (!(((_q = properties.theme) === null || _q === void 0 ? void 0 : _q.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates') && props.breakpoints) {
+    if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates') && props.breakpoints) {
         // breakpoint settings are calculated in ThemeStore for snap templates
         displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
         if (displaySettings && Object.keys(displaySettings).length) {
             // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
-            props = __assign(__assign({}, props), displaySettings);
+            props = {
+                ...props,
+                ...displaySettings,
+            };
         }
     }
-    var title = props.title, description = props.description, controller = props.controller, children = props.children, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, lazyRender = props.lazyRender, vertical = props.vertical, hideTitle = props.hideTitle, treePath = props.treePath, additionalProps = __rest(props, ["title", "description", "controller", "children", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "className", "internalClassName", "style", "styleScript", "themeStyleScript", "lazyRender", "vertical", "hideTitle", "treePath"]);
-    var resultComponent = props.resultComponent;
-    var snap = (0, providers_1.useSnap)();
-    var isNamedResultComponent = typeof resultComponent === 'string';
-    var resultComponentName = isNamedResultComponent ? resultComponent : '';
-    var resultComponentMap = ((_r = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _r === void 0 ? void 0 : _r.library.import.component.result) || {};
-    var _u = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined), resultComponentOverride = _u.ComponentOverride, shouldWaitForNamedResultComponent = _u.shouldWaitForNamedOverride;
-    var resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
-    var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
+    const { title, description, controller, children, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, className, internalClassName, style: _, styleScript: __, themeStyleScript: ___, lazyRender, vertical, hideTitle, 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,
+    };
     if (!controller || controller.type !== 'recommendation') {
-        throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
+        throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
     }
-    var resultsToRender = results || ((_s = controller.store) === null || _s === void 0 ? void 0 : _s.results);
+    const resultsToRender = results || controller.store?.results;
     if (Array.isArray(children) && children.length !== resultsToRender.length) {
-        controller.log.error("<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'");
+        controller.log.error(`<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'`);
         return null;
     }
-    var subProps = {
-        carousel: __assign(__assign({ 
+    const subProps = {
+        carousel: {
             // default props
-            internalClassName: 'ss__recommendation__Carousel' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            vertical: vertical,
-        })), { 
+            internalClassName: 'ss__recommendation__Carousel',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                vertical,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        result: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        result: {
             // default props
-            internalClassName: 'ss__recommendation__result' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__recommendation__result',
+            // 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 styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _v = (0, hooks_1.useState)(false), isVisible = _v[0], setIsVisible = _v[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 styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    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 = {
         titleText: {
-            value: "".concat(title),
+            value: `${title}`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_3.useLang)(lang, {});
-    return (Array.isArray(children) && children.length) || (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, { className: (0, classnames_1.default)('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && ((0, jsx_runtime_1.jsx)("h3", __assign({ className: "ss__recommendation__title" }, (_t = mergedLang.titleText) === null || _t === void 0 ? void 0 : _t.all, { children: title }))), description && (0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation__description", children: description }), (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination }, subProps.carousel, additionalProps, { children: Array.isArray(children) && children.length
-                            ? children.map(function (child, idx) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })); })
-                            : resultsToRender.map(function (result) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (function () {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_3.useLang)(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return (Array.isArray(children) && children.length) || resultsToRender?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && ((0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && (0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation__description", children: description }), (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
+                            ? children.map((child, idx) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })))
+                            : resultsToRender.map((result) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (() => {
                                     if (resolvedResultComponent && controller) {
                                         return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
-                                            controller: controller,
-                                            result: result,
+                                            controller,
+                                            result,
                                             treePath: subProps.result.treePath,
                                             theme: isNamedResultComponent
                                                 ? (0, deepmerge_1.default)(props.theme || {}, {
@@ -151,9 +145,9 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
                                         if (shouldWaitForNamedResultComponent) {
                                             return null;
                                         }
-                                        return (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }), result.id);
+                                        return (0, jsx_runtime_1.jsx)(Result_1.Result, { ...subProps.result, controller: controller, result: result }, result.id);
                                     }
-                                })() })); }) }))] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: Array.isArray(children) && children.length
-                    ? children.map(function (child, idx) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })); })
-                    : 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, {}) })); }) })) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+                                })() }))) })] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: Array.isArray(children) && children.length
+                    ? children.map((child, idx) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })))
+                    : 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, {}) }))) })) }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
 });

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

@@ -1,122 +1,70 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BundledCTA = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var classnames_1 = __importDefault(require("classnames"));
-var utilities_1 = require("../../../utilities");
-var Button_1 = require("../../Atoms/Button");
-var Price_1 = require("../../Atoms/Price");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-exports.BundledCTA = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var _b, _c, _d;
-    var props = __assign({}, properties);
-    props.onAddToCart = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, properties.onAddToCart(e)];
-                case 1:
-                    _a.sent();
-                    setAddedToCart(true);
-                    setTimeout(function () { return setAddedToCart(false); }, properties.ctaButtonSuccessTimeout);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var ctaSlot = props.ctaSlot, cartStore = props.cartStore, onAddToCart = props.onAddToCart, ctaIcon = props.ctaIcon, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, treePath = props.treePath, classNamePrefix = props.classNamePrefix;
-    var _e = (0, hooks_1.useState)(false), addedToCart = _e[0], setAddedToCart = _e[1];
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../../utilities");
+const Button_1 = require("../../Atoms/Button");
+const Price_1 = require("../../Atoms/Price");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+exports.BundledCTA = (0, mobx_react_lite_1.observer)((properties) => {
+    const props = {
+        // default props
+        // global theme
+        ...properties,
+    };
+    props.onAddToCart = async (e) => {
+        await properties.onAddToCart(e);
+        setAddedToCart(true);
+        setTimeout(() => setAddedToCart(false), properties.ctaButtonSuccessTimeout);
+    };
+    const { ctaSlot, cartStore, onAddToCart, ctaIcon, ctaButtonText, ctaButtonSuccessText, treePath, classNamePrefix } = props;
+    const [addedToCart, setAddedToCart] = (0, hooks_1.useState)(false);
     props.addedToCart = addedToCart;
-    var subProps = {
+    const subProps = {
         icon: {
             name: 'bundle-cart',
             // default props
-            internalClassName: "".concat(classNamePrefix, "__wrapper__cta__icon"),
+            internalClassName: `${classNamePrefix}__wrapper__cta__icon`,
             size: 50,
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
-            treePath: treePath,
+            theme: props?.theme,
+            treePath,
         },
         subtotalStrike: {
             // default props
             name: 'bundle-msrp',
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
-            treePath: treePath,
+            theme: props?.theme,
+            treePath,
         },
         subtotalPrice: {
             // default props
             name: 'bundle-price',
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
-            treePath: treePath,
+            theme: props?.theme,
+            treePath,
         },
         button: {
             // default props
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
-            treePath: treePath,
+            theme: props?.theme,
+            treePath,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)({}, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        cartStore: cartStore,
-    });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__cta"), children: ctaSlot ? ((0, utilities_1.cloneWithProps)(ctaSlot, props)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal"), "aria-atomic": "false", "aria-live": "polite", children: [ctaIcon ? ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__icon__wrapper"), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof ctaIcon == 'string' ? { icon: ctaIcon } : ctaIcon))) })) : null, (0, jsx_runtime_1.jsx)("span", __assign({ className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__title") }, (_b = mergedLang.ctaSubtotalTitle) === null || _b === void 0 ? void 0 : _b.all)), (0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__prices"), children: [cartStore.msrp && cartStore.msrp !== cartStore.price ? ((0, jsx_runtime_1.jsxs)("label", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__strike"), children: ["Was ", (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.subtotalStrike, { lineThrough: true, value: cartStore.msrp }))] })) : null, (0, jsx_runtime_1.jsx)("label", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__price"), children: (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.subtotalPrice, { value: cartStore.price })) })] })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: (0, classnames_1.default)("".concat(classNamePrefix, "__wrapper__cta__button"), (_a = {},
-                        _a["".concat(classNamePrefix, "__wrapper__cta__button--added")] = addedToCart,
-                        _a)), "aria-live": addedToCart, onClick: function (e) { return onAddToCart(e); } }, (addedToCart ? (_c = mergedLang.ctaButtonSuccessText) === null || _c === void 0 ? void 0 : _c.all : (_d = mergedLang.ctaButtonText) === null || _d === void 0 ? void 0 : _d.all), { children: addedToCart ? ctaButtonSuccessText : ctaButtonText }))] })) }));
+    const lang = (0, deepmerge_1.default)({}, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        cartStore,
+    }, { activeBreakpoint: props?.theme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__wrapper__cta`, children: ctaSlot ? ((0, utilities_1.cloneWithProps)(ctaSlot, props)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `${classNamePrefix}__wrapper__cta__subtotal`, "aria-atomic": "false", "aria-live": "polite", children: [ctaIcon ? ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__wrapper__cta__subtotal__icon__wrapper`, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof ctaIcon == 'string' ? { icon: ctaIcon } : ctaIcon) }) })) : null, (0, jsx_runtime_1.jsx)("span", { className: `${classNamePrefix}__wrapper__cta__subtotal__title`, ...mergedLang.ctaSubtotalTitle?.all }), (0, jsx_runtime_1.jsxs)("div", { className: `${classNamePrefix}__wrapper__cta__subtotal__prices`, children: [cartStore.msrp && cartStore.msrp !== cartStore.price ? ((0, jsx_runtime_1.jsxs)("label", { className: `${classNamePrefix}__wrapper__cta__subtotal__strike`, children: ["Was ", (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.subtotalStrike, lineThrough: true, value: cartStore.msrp })] })) : null, (0, jsx_runtime_1.jsx)("label", { className: `${classNamePrefix}__wrapper__cta__subtotal__price`, children: (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.subtotalPrice, value: cartStore.price }) })] })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, internalClassName: (0, classnames_1.default)(`${classNamePrefix}__wrapper__cta__button`, {
+                        [`${classNamePrefix}__wrapper__cta__button--added`]: addedToCart,
+                    }), "aria-live": addedToCart, onClick: (e) => onAddToCart(e), ...(addedToCart ? mergedLang.ctaButtonSuccessText?.all : mergedLang.ctaButtonText?.all), children: addedToCart ? ctaButtonSuccessText : ctaButtonText })] })) }));
 });

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

@@ -1,69 +1,57 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BundleSelector = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var Checkbox_1 = require("../../Molecules/Checkbox");
-var Icon_1 = require("../../Atoms/Icon");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-exports.BundleSelector = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var defaultProps = {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const Checkbox_1 = require("../../Molecules/Checkbox");
+const Icon_1 = require("../../Atoms/Icon");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+exports.BundleSelector = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const defaultProps = {
         hideCheckboxes: false,
         classNamePrefix: 'ss__recommendation-bundle',
     };
-    var props = (0, utilities_1.mergeProps)('bundleSelector', globalTheme, defaultProps, properties);
-    var children = props.children, checked = props.checked, icon = props.icon, seedText = props.seedText, seed = props.seed, hideCheckboxes = props.hideCheckboxes, onCheck = props.onCheck, title = props.title, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, classNamePrefix = props.classNamePrefix;
-    var lastPath = treePath === null || treePath === void 0 ? void 0 : treePath.lastIndexOf(' ');
-    var modifiedTreePath = lastPath !== -1 ? treePath === null || treePath === void 0 ? void 0 : treePath.slice(0, lastPath) : treePath;
-    var subProps = {
+    const props = (0, utilities_1.mergeProps)('bundleSelector', globalTheme, defaultProps, properties);
+    const { children, checked, icon, seedText, seed, hideCheckboxes, onCheck, title, className, internalClassName, treePath, classNamePrefix } = props;
+    const lastPath = treePath?.lastIndexOf(' ');
+    const modifiedTreePath = lastPath !== -1 ? treePath?.slice(0, lastPath) : treePath;
+    const subProps = {
         icon: {
             // default props
             name: 'bundle-selector',
-            internalClassName: "".concat(classNamePrefix, "__wrapper__selector__icon"),
+            internalClassName: `${classNamePrefix}__wrapper__selector__icon`,
             size: 15,
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
+            theme: props?.theme,
             treePath: modifiedTreePath,
         },
         checkbox: {
-            internalClassName: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper__checkbox"),
+            internalClassName: `${classNamePrefix}__wrapper__selector__result-wrapper__checkbox`,
             checked: checked,
             size: '18px',
             onClick: onCheck,
             lang: {
                 checkbox: {
                     attributes: {
-                        'aria-label': checked ? "remove product from bundle ".concat(title) : "add product to bundle ".concat(title),
+                        'aria-label': checked ? `remove product from bundle ${title}` : `add product to bundle ${title}`,
                     },
                 },
             },
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme,
+            theme: props?.theme,
             treePath: modifiedTreePath,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)({}, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {});
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("".concat(classNamePrefix, "__wrapper__selector"), checked ? "".concat(classNamePrefix, "__wrapper__selector--selected") : '', seedText || seed ? "".concat(classNamePrefix, "__wrapper__selector--seed") : '', className, internalClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper"), children: [!hideCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox)), seedText && (0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper__seed-badge") }, (_a = mergedLang.seedText) === null || _a === void 0 ? void 0 : _a.all)), children] }), icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))) : undefined] }));
+    const lang = (0, deepmerge_1.default)({}, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__wrapper__selector`, checked ? `${classNamePrefix}__wrapper__selector--selected` : '', seedText || seed ? `${classNamePrefix}__wrapper__selector--seed` : '', className, internalClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${classNamePrefix}__wrapper__selector__result-wrapper`, children: [!hideCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...subProps.checkbox }), seedText && (0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__wrapper__selector__result-wrapper__seed-badge`, ...mergedLang.seedText?.all }), children] }), icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) }) : undefined] }));
 });