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

package/dist/cjs/components/src/themes/pike/components/templates/autocompleteSlideout.js

@@ -1,108 +1,147 @@
 "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 _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.autocompleteSlideout = void 0;
-var react_1 = require("@emotion/react");
-var autocompleteSlideout_1 = require("../../../themeComponents/autocompleteSlideout");
-var autocompleteShared_1 = require("../templates/autocompleteShared");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const autocompleteSlideout_1 = require("../../../themeComponents/autocompleteSlideout");
+const autocompleteShared_1 = require("../templates/autocompleteShared");
+const custom_1 = require("../../custom");
 // static variables
-var searchInputHeight = 40;
+const searchInputHeight = 40;
 // CSS in JS style script for the Search component
-var autocompleteSlideoutStyleScript = function (props) {
-    var _a;
+const autocompleteSlideoutStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    const variables = props?.theme?.variables;
     // autocomplete shared styles
-    var sharedStyles = (0, react_1.css)({
+    const sharedStyles = (0, react_1.css)({
         '.ss__autocomplete-slideout__inner': {
-            '.ss__autocomplete': __assign({}, (0, autocompleteShared_1.autocompleteSharedStyleScript)(props, 'autocompleteSlideout')),
+            '.ss__autocomplete': {
+                ...(0, autocompleteShared_1.autocompleteSharedStyleScript)(props, 'autocompleteSlideout'),
+            },
         },
     });
     // autocomplete fixed styles
-    var fixedStyles = (0, react_1.css)({
+    const fixedStyles = (0, react_1.css)({
         border: 0,
-        padding: "".concat(custom_1.custom.spacing.x4, "px"),
+        padding: `${custom_1.custom.spacing.x4}px`,
         '.ss__autocomplete-slideout__inner': {
             height: '100%',
             '& > .ss__search-input': {
-                height: "".concat(searchInputHeight, "px"),
-                margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                height: `${searchInputHeight}px`,
+                margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
                 '.ss__button, .ss__search-input__button--close-search-button': {
-                    width: "".concat(searchInputHeight, "px"),
+                    width: `${searchInputHeight}px`,
                 },
                 '.ss__search-input__input': {
                     backgroundColor: custom_1.custom.colors.white,
                 },
             },
-            '.ss__autocomplete': __assign({ alignContent: 'flex-start', overflow: 'visible', height: 'calc(100% - 60px)', overflowY: 'auto', overflowX: 'hidden' }, custom_1.custom.styles.scrollbar()),
+            '.ss__autocomplete': {
+                alignContent: 'flex-start',
+                overflow: 'visible',
+                height: 'calc(100% - 60px)',
+                overflowY: 'auto',
+                overflowX: 'hidden',
+                ...custom_1.custom.styles.scrollbar(),
+            },
         },
     });
     // autocomplete styles
-    var autocompleteSlideoutStyles = (0, react_1.css)([sharedStyles, fixedStyles]);
+    const autocompleteSlideoutStyles = (0, react_1.css)([sharedStyles, fixedStyles]);
     return autocompleteSlideoutStyles;
 };
 exports.autocompleteSlideout = {
-    default: __assign(__assign({}, autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.default), { autocompleteSlideout: __assign(__assign({}, (((_a = autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['autocompleteSlideout']) || {})), { themeStyleScript: autocompleteSlideoutStyleScript, layout: 'mobile', contentTitle: 'Product Suggestions' }), 'autocompleteSlideout terms': {
+    default: {
+        ...autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.default,
+        autocompleteSlideout: {
+            ...(autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.default?.['autocompleteSlideout'] || {}),
+            themeStyleScript: autocompleteSlideoutStyleScript,
+            layout: 'mobile',
+            contentTitle: 'Product Suggestions',
+        },
+        'autocompleteSlideout terms': {
             vertical: false,
-        }, 'autocompleteSlideout termsList': {
+        },
+        'autocompleteSlideout termsList': {
             verticalOptions: false,
-        }, 'autocompleteSlideout results': {
+        },
+        'autocompleteSlideout results': {
             rows: 2,
             columns: 3,
-            gapSize: "".concat(custom_1.custom.spacing.x4, "px"),
-        }, 'autocompleteSlideout recommendationGrid': {
+            gapSize: `${custom_1.custom.spacing.x4}px`,
+        },
+        'autocompleteSlideout recommendationGrid': {
             rows: 2,
             columns: 3,
-        }, 'autocompleteSlideout button.see-more icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+        },
+        'autocompleteSlideout button.see-more icon': {
+            size: `${custom_1.custom.sizes.icon12}px`,
             icon: custom_1.custom.icons.arrowRight,
-        } }),
-    mobile: __assign(__assign({}, autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.mobile), { autocompleteSlideout: __assign(__assign({}, (((_b = autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.mobile) === null || _b === void 0 ? void 0 : _b['autocompleteSlideout']) || {})), { layout: 'mobile' }), 'autocompleteSlideout terms': {
+        },
+    },
+    mobile: {
+        ...autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.mobile,
+        autocompleteSlideout: {
+            ...(autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.mobile?.['autocompleteSlideout'] || {}),
+            layout: 'mobile',
+        },
+        'autocompleteSlideout terms': {
             vertical: false,
-        }, 'autocompleteSlideout termsList': {
+        },
+        'autocompleteSlideout termsList': {
             verticalOptions: false,
-        }, 'autocompleteSlideout results': {
+        },
+        'autocompleteSlideout results': {
             rows: 2,
             columns: 3,
-            gapSize: "".concat(custom_1.custom.spacing.x4, "px ").concat(custom_1.custom.spacing.x2, "px"),
-        }, 'autocompleteSlideout recommendationGrid': {
+            gapSize: `${custom_1.custom.spacing.x4}px ${custom_1.custom.spacing.x2}px`,
+        },
+        'autocompleteSlideout recommendationGrid': {
             rows: 2,
             columns: 3,
-        } }),
-    tablet: __assign(__assign({}, autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.tablet), { autocompleteSlideout: __assign(__assign({}, (((_c = autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.tablet) === null || _c === void 0 ? void 0 : _c['autocompleteSlideout']) || {})), { layout: 'mobile' }), 'autocompleteSlideout terms': {
+        },
+    },
+    tablet: {
+        ...autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.tablet,
+        autocompleteSlideout: {
+            ...(autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.tablet?.['autocompleteSlideout'] || {}),
+            layout: 'mobile',
+        },
+        'autocompleteSlideout terms': {
             vertical: false,
-        }, 'autocompleteSlideout termsList': {
+        },
+        'autocompleteSlideout termsList': {
             verticalOptions: false,
-        }, 'autocompleteSlideout results': {
+        },
+        'autocompleteSlideout results': {
             rows: 2,
             columns: 3,
-            gapSize: "".concat(custom_1.custom.spacing.x4, "px"),
-        }, 'autocompleteSlideout recommendationGrid': {
+            gapSize: `${custom_1.custom.spacing.x4}px`,
+        },
+        'autocompleteSlideout recommendationGrid': {
             rows: 2,
             columns: 3,
-        } }),
-    desktop: __assign(__assign({}, autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.desktop), { autocompleteSlideout: __assign(__assign({}, (((_d = autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.desktop) === null || _d === void 0 ? void 0 : _d['autocompleteSlideout']) || {})), { layout: 'mobile' }), 'autocompleteSlideout terms': {
+        },
+    },
+    desktop: {
+        ...autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.desktop,
+        autocompleteSlideout: {
+            ...(autocompleteSlideout_1.autocompleteSlideoutThemeComponentProps.desktop?.['autocompleteSlideout'] || {}),
+            layout: 'mobile',
+        },
+        'autocompleteSlideout terms': {
             vertical: false,
-        }, 'autocompleteSlideout termsList': {
+        },
+        'autocompleteSlideout termsList': {
             verticalOptions: false,
-        }, 'autocompleteSlideout results': {
+        },
+        'autocompleteSlideout results': {
             rows: 2,
             columns: 3,
-            gapSize: "".concat(custom_1.custom.spacing.x4, "px"),
-        }, 'autocompleteSlideout recommendationGrid': {
+            gapSize: `${custom_1.custom.spacing.x4}px`,
+        },
+        'autocompleteSlideout recommendationGrid': {
             rows: 2,
             columns: 3,
-        } }),
+        },
+    },
 };

package/dist/cjs/components/src/themes/pike/components/templates/chat.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chat = void 0;
+const chat_1 = require("../../../themeComponents/chat");
+// Chat component props come from Template export
+exports.chat = chat_1.chatThemeComponentProps;

package/dist/cjs/components/src/themes/pike/components/templates/chatButton.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButton = void 0;
+const chatButton_1 = require("../../../themeComponents/chatButton");
+// ChatButton component props come from Template export
+exports.chatButton = chatButton_1.chatButtonThemeComponentProps;

package/dist/cjs/components/src/themes/pike/components/templates/index.js

@@ -1,34 +1,89 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = void 0;
 // TEMPLATES
-var autocompleteFixed_1 = require("./autocompleteFixed");
-var autocompleteModal_1 = require("./autocompleteModal");
-var autocompleteSlideout_1 = require("./autocompleteSlideout");
-var recommendation_1 = require("./recommendation");
-var recommendationBundle_1 = require("./recommendationBundle");
-var recommendationBundleEasyAdd_1 = require("./recommendationBundleEasyAdd");
-var recommendationBundleList_1 = require("./recommendationBundleList");
-var recommendationBundleVertical_1 = require("./recommendationBundleVertical");
-var recommendationGrid_1 = require("./recommendationGrid");
-var recommendationEmail_1 = require("./recommendationEmail");
-var search_1 = require("./search");
-var searchHorizontal_1 = require("./searchHorizontal");
-var searchCollapsible_1 = require("./searchCollapsible");
+const autocompleteFixed_1 = require("./autocompleteFixed");
+const chat_1 = require("./chat");
+const chatButton_1 = require("./chatButton");
+const autocompleteModal_1 = require("./autocompleteModal");
+const autocompleteSlideout_1 = require("./autocompleteSlideout");
+const recommendation_1 = require("./recommendation");
+const recommendationBundle_1 = require("./recommendationBundle");
+const recommendationBundleEasyAdd_1 = require("./recommendationBundleEasyAdd");
+const recommendationBundleList_1 = require("./recommendationBundleList");
+const recommendationBundleVertical_1 = require("./recommendationBundleVertical");
+const recommendationGrid_1 = require("./recommendationGrid");
+const recommendationEmail_1 = require("./recommendationEmail");
+const search_1 = require("./search");
+const searchHorizontal_1 = require("./searchHorizontal");
+const searchCollapsible_1 = require("./searchCollapsible");
 exports.templates = {
-    default: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, autocompleteFixed_1.autocompleteFixed.default), autocompleteModal_1.autocompleteModal.default), autocompleteSlideout_1.autocompleteSlideout.default), recommendation_1.recommendation.default), recommendationBundle_1.recommendationBundle.default), recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.default), recommendationBundleList_1.recommendationBundleList.default), recommendationBundleVertical_1.recommendationBundleVertical.default), recommendationGrid_1.recommendationGrid.default), recommendationEmail_1.recommendationEmail.default), search_1.search.default), searchCollapsible_1.searchCollapsible.default), searchHorizontal_1.searchHorizontal.default),
-    mobile: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, autocompleteFixed_1.autocompleteFixed.mobile), autocompleteModal_1.autocompleteModal.mobile), autocompleteSlideout_1.autocompleteSlideout.mobile), recommendation_1.recommendation.mobile), recommendationBundle_1.recommendationBundle.mobile), recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.mobile), recommendationBundleList_1.recommendationBundleList.mobile), recommendationBundleVertical_1.recommendationBundleVertical.mobile), recommendationGrid_1.recommendationGrid.mobile), recommendationEmail_1.recommendationEmail.mobile), search_1.search.mobile), searchCollapsible_1.searchCollapsible.mobile), searchHorizontal_1.searchHorizontal.mobile),
-    tablet: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, autocompleteFixed_1.autocompleteFixed.tablet), autocompleteModal_1.autocompleteModal.tablet), autocompleteSlideout_1.autocompleteSlideout.tablet), recommendation_1.recommendation.tablet), recommendationBundle_1.recommendationBundle.tablet), recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.tablet), recommendationBundleList_1.recommendationBundleList.tablet), recommendationBundleVertical_1.recommendationBundleVertical.tablet), recommendationGrid_1.recommendationGrid.tablet), recommendationEmail_1.recommendationEmail.tablet), search_1.search.tablet), searchCollapsible_1.searchCollapsible.tablet), searchHorizontal_1.searchHorizontal.tablet),
-    desktop: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, autocompleteFixed_1.autocompleteFixed.desktop), autocompleteModal_1.autocompleteModal.desktop), autocompleteSlideout_1.autocompleteSlideout.desktop), recommendation_1.recommendation.desktop), recommendationBundle_1.recommendationBundle.desktop), recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.desktop), recommendationBundleList_1.recommendationBundleList.desktop), recommendationBundleVertical_1.recommendationBundleVertical.desktop), recommendationGrid_1.recommendationGrid.desktop), recommendationEmail_1.recommendationEmail.desktop), search_1.search.desktop), searchCollapsible_1.searchCollapsible.desktop), searchHorizontal_1.searchHorizontal.desktop),
+    default: {
+        ...chat_1.chat.default,
+        ...chatButton_1.chatButton.default,
+        ...autocompleteFixed_1.autocompleteFixed.default,
+        ...autocompleteModal_1.autocompleteModal.default,
+        ...autocompleteSlideout_1.autocompleteSlideout.default,
+        ...recommendation_1.recommendation.default,
+        ...recommendationBundle_1.recommendationBundle.default,
+        ...recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.default,
+        ...recommendationBundleList_1.recommendationBundleList.default,
+        ...recommendationBundleVertical_1.recommendationBundleVertical.default,
+        ...recommendationGrid_1.recommendationGrid.default,
+        ...recommendationEmail_1.recommendationEmail.default,
+        ...search_1.search.default,
+        ...searchCollapsible_1.searchCollapsible.default,
+        ...searchHorizontal_1.searchHorizontal.default,
+    },
+    mobile: {
+        ...chat_1.chat.mobile,
+        ...chatButton_1.chatButton.mobile,
+        ...autocompleteFixed_1.autocompleteFixed.mobile,
+        ...autocompleteModal_1.autocompleteModal.mobile,
+        ...autocompleteSlideout_1.autocompleteSlideout.mobile,
+        ...recommendation_1.recommendation.mobile,
+        ...recommendationBundle_1.recommendationBundle.mobile,
+        ...recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.mobile,
+        ...recommendationBundleList_1.recommendationBundleList.mobile,
+        ...recommendationBundleVertical_1.recommendationBundleVertical.mobile,
+        ...recommendationGrid_1.recommendationGrid.mobile,
+        ...recommendationEmail_1.recommendationEmail.mobile,
+        ...search_1.search.mobile,
+        ...searchCollapsible_1.searchCollapsible.mobile,
+        ...searchHorizontal_1.searchHorizontal.mobile,
+    },
+    tablet: {
+        ...chat_1.chat.tablet,
+        ...chatButton_1.chatButton.tablet,
+        ...autocompleteFixed_1.autocompleteFixed.tablet,
+        ...autocompleteModal_1.autocompleteModal.tablet,
+        ...autocompleteSlideout_1.autocompleteSlideout.tablet,
+        ...recommendation_1.recommendation.tablet,
+        ...recommendationBundle_1.recommendationBundle.tablet,
+        ...recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.tablet,
+        ...recommendationBundleList_1.recommendationBundleList.tablet,
+        ...recommendationBundleVertical_1.recommendationBundleVertical.tablet,
+        ...recommendationGrid_1.recommendationGrid.tablet,
+        ...recommendationEmail_1.recommendationEmail.tablet,
+        ...search_1.search.tablet,
+        ...searchCollapsible_1.searchCollapsible.tablet,
+        ...searchHorizontal_1.searchHorizontal.tablet,
+    },
+    desktop: {
+        ...chat_1.chat.desktop,
+        ...chatButton_1.chatButton.desktop,
+        ...autocompleteFixed_1.autocompleteFixed.desktop,
+        ...autocompleteModal_1.autocompleteModal.desktop,
+        ...autocompleteSlideout_1.autocompleteSlideout.desktop,
+        ...recommendation_1.recommendation.desktop,
+        ...recommendationBundle_1.recommendationBundle.desktop,
+        ...recommendationBundleEasyAdd_1.recommendationBundleEasyAdd.desktop,
+        ...recommendationBundleList_1.recommendationBundleList.desktop,
+        ...recommendationBundleVertical_1.recommendationBundleVertical.desktop,
+        ...recommendationGrid_1.recommendationGrid.desktop,
+        ...recommendationEmail_1.recommendationEmail.desktop,
+        ...search_1.search.desktop,
+        ...searchCollapsible_1.searchCollapsible.desktop,
+        ...searchHorizontal_1.searchHorizontal.desktop,
+    },
 };

package/dist/cjs/components/src/themes/pike/components/templates/recommendation.js

@@ -1,81 +1,72 @@
 "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 _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recommendation = void 0;
-var react_1 = require("@emotion/react");
-var recommendation_1 = require("../../../themeComponents/recommendation");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const recommendation_1 = require("../../../themeComponents/recommendation");
+const custom_1 = require("../../custom");
 // static variables
-var arrowSizes = {
+const arrowSizes = {
     default: 24,
     mobile: 28,
     tablet: 32,
 };
-var carouselOptions = {
+const carouselOptions = {
     spacing: custom_1.custom.spacing.x2,
     button: 32, // size of previous next buttons
     pagination: 12, // size of pagination bullets
     scrollbar: 6, // size of scrollbar
 };
 // CSS in JS style script for the Recommendation component
-var recommendationStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d, _e;
+const recommendationStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var tabletBp = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.tablet;
-    var mobileBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
+    const variables = props?.theme?.variables;
+    const tabletBp = variables?.breakpoints?.tablet;
+    const mobileBp = variables?.breakpoints?.mobile;
     // spacing and position variables for features
-    var spacing = 0;
-    if ((props === null || props === void 0 ? void 0 : props.pagination) && (props === null || props === void 0 ? void 0 : props.scrollbar)) {
+    let spacing = 0;
+    if (props?.pagination && props?.scrollbar) {
         spacing = carouselOptions.spacing * 2 + carouselOptions.pagination + carouselOptions.scrollbar;
     }
-    else if ((props === null || props === void 0 ? void 0 : props.pagination) && !(props === null || props === void 0 ? void 0 : props.scrollbar)) {
+    else if (props?.pagination && !props?.scrollbar) {
         spacing = carouselOptions.spacing + carouselOptions.pagination;
     }
-    else if (!(props === null || props === void 0 ? void 0 : props.pagination) && (props === null || props === void 0 ? void 0 : props.scrollbar)) {
+    else if (!props?.pagination && props?.scrollbar) {
         spacing = carouselOptions.spacing + carouselOptions.scrollbar;
     }
     // recommendation styles
-    var recommendationStyles = (0, react_1.css)((_a = {
-            margin: "".concat(custom_1.custom.spacing.x8, "px 0"),
-            position: 'relative',
-            '.ss__recommendation__title, .ss__recommendation__description': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-            },
-            '.ss__recommendation__title': __assign(__assign({ paddingRight: "".concat(arrowSizes.default * 2 + custom_1.custom.spacing.x1 + custom_1.custom.spacing.x2, "px") }, custom_1.custom.styles.headerText((_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.secondary, '18px')), custom_1.custom.styles.textOverflow()),
-            '.ss__recommendation__description': __assign({}, custom_1.custom.styles.baseText()),
-            '.ss__carousel': {
-                position: 'static',
-                '& >': {
-                    '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
-                        top: '1px',
-                        bottom: 'auto',
-                        left: 'auto',
-                        width: "".concat(arrowSizes.default, "px"),
-                        height: "".concat(arrowSizes.default, "px"),
-                    },
-                    '.ss__carousel__prev-wrapper': {
-                        right: "".concat(arrowSizes.default + custom_1.custom.spacing.x1, "px"),
-                    },
-                    '.ss__carousel__next-wrapper': {
-                        right: 0,
-                    },
+    const recommendationStyles = (0, react_1.css)({
+        margin: `${custom_1.custom.spacing.x8}px 0`,
+        position: 'relative',
+        '.ss__recommendation__title, .ss__recommendation__description': {
+            margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+        },
+        '.ss__recommendation__title': {
+            paddingRight: `${arrowSizes.default * 2 + custom_1.custom.spacing.x1 + custom_1.custom.spacing.x2}px`,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '18px'),
+            ...custom_1.custom.styles.textOverflow(),
+        },
+        '.ss__recommendation__description': {
+            ...custom_1.custom.styles.baseText(),
+        },
+        '.ss__carousel': {
+            position: 'static',
+            '& >': {
+                '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
+                    top: '1px',
+                    bottom: 'auto',
+                    left: 'auto',
+                    width: `${arrowSizes.default}px`,
+                    height: `${arrowSizes.default}px`,
+                },
+                '.ss__carousel__prev-wrapper': {
+                    right: `${arrowSizes.default + custom_1.custom.spacing.x1}px`,
                 },
-            }
+                '.ss__carousel__next-wrapper': {
+                    right: 0,
+                },
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
             '.ss__recommendation__title': {
                 fontSize: '22px',
             },
@@ -85,19 +76,19 @@ var recommendationStyleScript = function (props) {
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
             '.ss__carousel': {
                 '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
                     top: '2.5px',
-                    width: "".concat(arrowSizes.mobile, "px"),
-                    height: "".concat(arrowSizes.mobile, "px"),
+                    width: `${arrowSizes.mobile}px`,
+                    height: `${arrowSizes.mobile}px`,
                 },
                 '.ss__carousel__prev-wrapper': {
-                    right: "".concat(arrowSizes.mobile + custom_1.custom.spacing.x1, "px"),
+                    right: `${arrowSizes.mobile + custom_1.custom.spacing.x1}px`,
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
             '.ss__recommendation__title, .ss__recommendation__description': {
                 textAlign: 'center',
             },
@@ -106,46 +97,77 @@ var recommendationStyleScript = function (props) {
             },
             '.ss__carousel': {
                 position: 'relative',
-                padding: "0 ".concat(custom_1.custom.spacing.x4 + arrowSizes.tablet, "px"),
+                padding: `0 ${custom_1.custom.spacing.x4 + arrowSizes.tablet}px`,
                 '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
                     top: 0,
-                    bottom: "calc(10.40rem + ".concat(spacing - custom_1.custom.spacing.x4, "px)"),
-                    width: "".concat(arrowSizes.tablet, "px"),
-                    height: "".concat(arrowSizes.tablet, "px"),
+                    bottom: `calc(10.40rem + ${spacing - custom_1.custom.spacing.x4}px)`,
+                    width: `${arrowSizes.tablet}px`,
+                    height: `${arrowSizes.tablet}px`,
                 },
                 '.ss__carousel__prev-wrapper': {
-                    right: "auto",
+                    right: `auto`,
                     left: 0,
                 },
             },
         },
-        _a));
+    });
     return recommendationStyles;
 };
 // Recommendation component props come from Template export
 exports.recommendation = {
-    default: __assign(__assign({}, recommendation_1.recommendationThemeComponentProps.default), { recommendation: __assign(__assign({}, (((_a = recommendation_1.recommendationThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['recommendation']) || {})), { themeStyleScript: recommendationStyleScript }), 'recommendation carousel': {
+    default: {
+        ...recommendation_1.recommendationThemeComponentProps.default,
+        recommendation: {
+            ...(recommendation_1.recommendationThemeComponentProps.default?.['recommendation'] || {}),
+            themeStyleScript: recommendationStyleScript,
+        },
+        'recommendation carousel': {
             spaceBetween: custom_1.custom.spacing.x4,
-        }, 'recommendation carousel icon.prev': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
-        }, 'recommendation carousel icon.next': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
-        } }),
-    mobile: __assign(__assign({}, recommendation_1.recommendationThemeComponentProps.mobile), { recommendation: __assign({}, (((_b = recommendation_1.recommendationThemeComponentProps.mobile) === null || _b === void 0 ? void 0 : _b['recommendation']) || {})), 'recommendation carousel': {
+        },
+        'recommendation carousel icon.prev': {
+            size: `${custom_1.custom.sizes.icon12}px`,
+        },
+        'recommendation carousel icon.next': {
+            size: `${custom_1.custom.sizes.icon12}px`,
+        },
+    },
+    mobile: {
+        ...recommendation_1.recommendationThemeComponentProps.mobile,
+        recommendation: {
+            ...(recommendation_1.recommendationThemeComponentProps.mobile?.['recommendation'] || {}),
+        },
+        'recommendation carousel': {
             spaceBetween: custom_1.custom.spacing.x2,
-        }, 'recommendation carousel icon.prev': {
-            size: "".concat(custom_1.custom.sizes.icon08, "px"),
-        }, 'recommendation carousel icon.next': {
-            size: "".concat(custom_1.custom.sizes.icon08, "px"),
-        } }),
-    tablet: __assign(__assign({}, recommendation_1.recommendationThemeComponentProps.tablet), { recommendation: __assign({}, (((_c = recommendation_1.recommendationThemeComponentProps.tablet) === null || _c === void 0 ? void 0 : _c['recommendation']) || {})), 'recommendation carousel': {
+        },
+        'recommendation carousel icon.prev': {
+            size: `${custom_1.custom.sizes.icon08}px`,
+        },
+        'recommendation carousel icon.next': {
+            size: `${custom_1.custom.sizes.icon08}px`,
+        },
+    },
+    tablet: {
+        ...recommendation_1.recommendationThemeComponentProps.tablet,
+        recommendation: {
+            ...(recommendation_1.recommendationThemeComponentProps.tablet?.['recommendation'] || {}),
+        },
+        'recommendation carousel': {
             spaceBetween: custom_1.custom.spacing.x4,
-        }, 'recommendation carousel icon.prev': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
-        }, 'recommendation carousel icon.next': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
-        } }),
-    desktop: __assign(__assign({}, recommendation_1.recommendationThemeComponentProps.desktop), { recommendation: __assign({}, (((_d = recommendation_1.recommendationThemeComponentProps.desktop) === null || _d === void 0 ? void 0 : _d['recommendation']) || {})), 'recommendation carousel': {
+        },
+        'recommendation carousel icon.prev': {
+            size: `${custom_1.custom.sizes.icon10}px`,
+        },
+        'recommendation carousel icon.next': {
+            size: `${custom_1.custom.sizes.icon10}px`,
+        },
+    },
+    desktop: {
+        ...recommendation_1.recommendationThemeComponentProps.desktop,
+        recommendation: {
+            ...(recommendation_1.recommendationThemeComponentProps.desktop?.['recommendation'] || {}),
+        },
+        'recommendation carousel': {
             spaceBetween: custom_1.custom.spacing.x4,
-        } }),
+        },
+    },
 };