@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/RadioList/RadioList.js

@@ -1,33 +1,21 @@
 "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.RadioList = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var react_2 = require("react");
-var Radio_1 = require("../Radio/Radio");
-var hooks_1 = require("../../../hooks");
-var Icon_1 = require("../../Atoms/Icon");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var horizontal = _a.horizontal;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const react_2 = require("react");
+const Radio_1 = require("../Radio/Radio");
+const hooks_1 = require("../../../hooks");
+const Icon_1 = require("../../Atoms/Icon");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ horizontal }) => {
     return (0, react_1.css)({
         '& .ss__radio-list__options-wrapper': {
             display: 'flex',
@@ -63,42 +51,55 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.RadioList = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.RadioList = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('radioList', globalTheme, defaultProps, properties);
-    var titleText = props.titleText, onSelect = props.onSelect, hideOptionRadios = props.hideOptionRadios, hideOptionIcons = props.hideOptionIcons, hideOptionLabels = props.hideOptionLabels, hideTitleText = props.hideTitleText, native = props.native, disabled = props.disabled, selected = props.selected, options = props.options, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _c = (0, hooks_1.useCustomComponentOverride)('radioList', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('radioList', globalTheme, defaultProps, properties);
+    const { titleText, onSelect, hideOptionRadios, hideOptionIcons, hideOptionLabels, hideTitleText, native, disabled, selected, options, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('radioList', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        Radio: __assign(__assign({ internalClassName: 'ss__radio-list__option__radio', native: native, disableA11y: true, disabled: disabled }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        Radio: {
+            internalClassName: 'ss__radio-list__option__radio',
+            native: native,
+            disableA11y: true,
+            disabled: disabled,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        Icon: __assign(__assign({ internalClassName: 'ss__radio-list__option__icon', size: '16px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        Icon: {
+            internalClassName: 'ss__radio-list__option__icon',
+            size: '16px',
+            // 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);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // selection state
-    var _d = (0, react_2.useState)(selected), selection = _d[0], setSelection = _d[1];
+    const [selection, setSelection] = (0, react_2.useState)(selected);
     // original selection state
-    var originalSelected = (0, react_2.useState)(selected)[0];
+    const [originalSelected] = (0, react_2.useState)(selected);
     // reset selection if 'selected' prop changes
     try {
         if (selected) {
-            var originalSelectedstr = JSON.stringify(originalSelected);
-            var selectedstr = JSON.stringify(selected);
-            var selectionstr = JSON.stringify(selection);
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
             if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
                 setSelection(selected);
             }
@@ -107,22 +108,22 @@ exports.RadioList = (0, mobx_react_lite_1.observer)(function (properties) {
     catch (e) {
         // noop
     }
-    var makeSelection = function (e, option) {
+    const makeSelection = (e, option) => {
         if (onSelect) {
             onSelect(e, option);
         }
         setSelection(option);
     };
     //initialize lang
-    var defaultLang = {};
+    const defaultLang = {};
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
-        options: options,
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        options,
         selectedOptions: selection,
-    });
-    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__radio-list', { 'ss__radio-list--native': native, 'ss__radio-list--disabled': disabled }, className, internalClassName), children: [(titleText || ((_a = lang === null || lang === void 0 ? void 0 : lang.title) === null || _a === void 0 ? void 0 : _a.value)) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: "ss__radio-list__title" }, (_b = mergedLang.title) === null || _b === void 0 ? void 0 : _b.all, { children: titleText }))), (0, jsx_runtime_1.jsx)("ul", { className: "ss__radio-list__options-wrapper", role: "listbox", "aria-label": titleText, children: options.map(function (option) {
-                        var selected = selection && selection.value == option.value;
-                        return ((0, jsx_runtime_1.jsxs)("li", { className: "ss__radio-list__option ".concat(selected ? 'ss__radio-list__option--selected' : '', " ").concat(option.disabled ? 'ss__radio-list__option--disabled' : ''), ref: function (e) { return (0, hooks_1.useA11y)(e); }, onClick: function (e) { return !disabled && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected, children: [!hideOptionRadios && (0, jsx_runtime_1.jsx)(Radio_1.Radio, __assign({}, subProps.Radio, { checked: selected, disableA11y: true })), option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.Icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))), !hideOptionLabels && (option.label || !option.icon) && ((0, jsx_runtime_1.jsx)("label", { className: "ss__radio-list__option__label", children: option.label || option.value }))] }));
-                    }) })] })) })) : null;
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return typeof options == 'object' && options?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__radio-list', { 'ss__radio-list--native': native, 'ss__radio-list--disabled': disabled }, className, internalClassName), children: [(titleText || lang?.title?.value) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", { className: "ss__radio-list__title", ...mergedLang.title?.all, children: titleText })), (0, jsx_runtime_1.jsx)("ul", { className: `ss__radio-list__options-wrapper`, role: "listbox", "aria-label": titleText, children: options.map((option) => {
+                        const selected = selection && selection.value == option.value;
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: `ss__radio-list__option ${selected ? 'ss__radio-list__option--selected' : ''} ${option.disabled ? 'ss__radio-list__option--disabled' : ''}`, ref: (e) => (0, hooks_1.useA11y)(e), onClick: (e) => !disabled && makeSelection(e, option), title: option.label, role: "option", "aria-selected": selected, children: [!hideOptionRadios && (0, jsx_runtime_1.jsx)(Radio_1.Radio, { ...subProps.Radio, checked: selected, disableA11y: true }), option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.Icon, ...(typeof option.icon == 'string' ? { icon: option.icon } : option.icon) })), !hideOptionLabels && (option.label || !option.icon) && ((0, jsx_runtime_1.jsx)("label", { className: "ss__radio-list__option__label", children: option.label || option.value }))] }));
+                    }) })] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Rating/Rating.js

@@ -1,38 +1,18 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rating = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         display: 'flex',
         alignItems: 'center',
@@ -61,36 +41,47 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Rating = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Rating = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         fullIcon: 'star',
         emptyIcon: 'star-o',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('rating', globalTheme, defaultProps, properties);
-    var alwaysRender = props.alwaysRender, count = props.count, text = props.text, disablePartialFill = props.disablePartialFill, emptyIcon = props.emptyIcon, fullIcon = props.fullIcon, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _a = (0, hooks_1.useCustomComponentOverride)('rating', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('rating', globalTheme, defaultProps, properties);
+    const { alwaysRender, count, text, disablePartialFill, emptyIcon, fullIcon, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('rating', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        fullIcon: __assign(__assign({ name: 'star--full' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        fullIcon: {
+            name: 'star--full',
+            // default props
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        emptyIcon: __assign(__assign({ name: 'star--empty', 
+            theme: props?.theme,
+            treePath,
+        },
+        emptyIcon: {
+            name: 'star--empty',
             // default props
-            color: '#ccc' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            color: '#ccc',
+            // 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,
+        },
     };
     // normalize values to ensure good rendering
-    var value = props.value;
+    let value = props.value;
     if (isNaN(value)) {
         value = Number(value) || 0;
     }
@@ -100,15 +91,15 @@ exports.Rating = (0, mobx_react_lite_1.observer)(function (properties) {
     if (value > 5) {
         value = 5;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // with 'disablePartialFill' we are rounding down
-    var numStarsToShow = disablePartialFill ? Math.floor(value) : Math.ceil(value);
-    return alwaysRender || value || count ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__rating', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__rating__icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__rating__stars ss__rating__stars--empty", children: __spreadArray([], Array(5), true).map(function () { return ((0, jsx_runtime_1.jsx)("span", { className: "ss__rating__stars__star ss__rating__stars__star--empty", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.emptyIcon, (typeof emptyIcon == 'string' ? { icon: emptyIcon } : emptyIcon))) })); }) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__rating__stars ss__rating__stars--full", children: __spreadArray([], Array(numStarsToShow), true).map(function (e, i) {
-                                var width = 100;
+    const numStarsToShow = disablePartialFill ? Math.floor(value) : Math.ceil(value);
+    return alwaysRender || value || count ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__rating', className, internalClassName), ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__rating__icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__rating__stars ss__rating__stars--empty", children: [...Array(5)].map(() => ((0, jsx_runtime_1.jsx)("span", { className: "ss__rating__stars__star ss__rating__stars__star--empty", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.emptyIcon, ...(typeof emptyIcon == 'string' ? { icon: emptyIcon } : emptyIcon) }) }))) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__rating__stars ss__rating__stars--full", children: [...Array(numStarsToShow)].map((e, i) => {
+                                let width = 100;
                                 //if its the last star and there is remainder
                                 if (i + 1 == numStarsToShow && !disablePartialFill && value % 1 != 0) {
                                     width = (value % 1 || 1) * 100;
                                 }
-                                return ((0, jsx_runtime_1.jsx)("span", { className: "ss__rating__stars__star ss__rating__stars__star--full", style: { width: "".concat(width, "%") }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.fullIcon, (typeof fullIcon == 'string' ? { icon: fullIcon } : fullIcon))) }));
-                            }) })] }), count ? (0, jsx_runtime_1.jsxs)("span", { className: "ss__rating__count", children: ["(", count, ")"] }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), text ? (0, jsx_runtime_1.jsx)("span", { className: "ss__rating__text", children: text }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })) })) : null;
+                                return ((0, jsx_runtime_1.jsx)("span", { className: "ss__rating__stars__star ss__rating__stars__star--full", style: { width: `${width}%` }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.fullIcon, ...(typeof fullIcon == 'string' ? { icon: fullIcon } : fullIcon) }) }));
+                            }) })] }), count ? (0, jsx_runtime_1.jsxs)("span", { className: "ss__rating__count", children: ["(", count, ")"] }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), text ? (0, jsx_runtime_1.jsx)("span", { className: "ss__rating__text", children: text }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Result/Result.js

@@ -1,39 +1,28 @@
 "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.Result = 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 react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var Image_1 = require("../../Atoms/Image");
-var Price_1 = require("../../Atoms/Price");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var types_1 = require("../../../types");
-var CalloutBadge_1 = require("../../Molecules/CalloutBadge");
-var OverlayBadge_1 = require("../../Molecules/OverlayBadge");
-var Rating_1 = require("../Rating");
-var Button_1 = require("../../Atoms/Button");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var hooks_2 = require("../../../hooks");
-var VariantSelection_1 = require("../VariantSelection");
-var defaultStyles = function () {
+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 react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const Image_1 = require("../../Atoms/Image");
+const Price_1 = require("../../Atoms/Price");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const types_1 = require("../../../types");
+const CalloutBadge_1 = require("../../Molecules/CalloutBadge");
+const OverlayBadge_1 = require("../../Molecules/OverlayBadge");
+const Rating_1 = require("../Rating");
+const Button_1 = require("../../Atoms/Button");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const hooks_2 = require("../../../hooks");
+const VariantSelection_1 = require("../VariantSelection");
+const defaultStyles = () => {
     return (0, react_1.css)({
         '&.ss__result--grid': {
             display: 'flex',
@@ -81,11 +70,10 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         layout: types_1.ResultsLayout.grid,
         treePath: globalTreePath,
         addToCartButtonText: 'Add To Cart',
@@ -94,99 +82,136 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
         hideAddToCartButton: true,
         hideRating: true,
     };
-    var props = (0, utilities_1.mergeProps)('result', globalTheme, defaultProps, properties);
-    var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, layout = props.layout, onClick = props.onClick, controller = props.controller, hideVariantSelections = props.hideVariantSelections, hideAddToCartButton = props.hideAddToCartButton, onAddToCartClick = props.onAddToCartClick, addToCartButtonText = props.addToCartButtonText, addToCartButtonSuccessText = props.addToCartButtonSuccessText, addToCartButtonSuccessTimeout = props.addToCartButtonSuccessTimeout, hideRating = props.hideRating, trackingRef = props.trackingRef, treePath = props.treePath;
-    var _j = (0, hooks_2.useCustomComponentOverride)('result', __assign(__assign({}, props), { customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined })), overrideElement = _j.overrideElement, shouldRenderDefault = _j.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('result', globalTheme, defaultProps, properties);
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('result', {
+        ...props,
+        customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
+    });
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var core = ((_a = result === null || result === void 0 ? void 0 : result.display) === null || _a === void 0 ? void 0 : _a.mappings.core) || ((_b = result === null || result === void 0 ? void 0 : result.mappings) === null || _b === void 0 ? void 0 : _b.core);
-    var _k = (0, hooks_1.useState)(false), addedToCart = _k[0], setAddedToCart = _k[1];
-    var subProps = {
-        variantSelection: __assign(__assign({ 
+    const core = result?.display?.mappings.core || result?.mappings?.core;
+    const [addedToCart, setAddedToCart] = (0, hooks_1.useState)(false);
+    const subProps = {
+        variantSelection: {
             // global theme
-            internalClassName: 'ss__result__variant-selection' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__result__variant-selection',
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        price: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        price: {
             // global theme
-            internalClassName: 'ss__result__price' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__result__price',
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        calloutBadge: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        calloutBadge: {
             // default props
-            internalClassName: 'ss__result__callout-badge', result: result }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__result__callout-badge',
+            result,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        overlayBadge: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        overlayBadge: {
             // default props
-            internalClassName: 'ss__result__overlay-badge', result: result, controller: controller }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__result__overlay-badge',
+            result,
+            controller: controller,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        image: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        image: {
             // default props
-            internalClassName: 'ss__result__image', alt: (core === null || core === void 0 ? void 0 : core.name) || '', src: (core === null || core === void 0 ? void 0 : core.imageUrl) || '' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            fallback: fallback,
-        })), { 
+            internalClassName: 'ss__result__image',
+            alt: core?.name || '',
+            src: core?.imageUrl || '',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                fallback: fallback,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        rating: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        rating: {
             // default props
-            internalClassName: 'ss__result__rating', value: (core === null || core === void 0 ? void 0 : core.rating) || 0, count: Number((core === null || core === void 0 ? void 0 : core.ratingCount) || 0) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__result__rating',
+            value: core?.rating || 0,
+            count: Number(core?.ratingCount || 0),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        button: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        button: {
             // default props
-            internalClassName: 'ss__result__button--addToCart', onClick: function (e) {
+            internalClassName: 'ss__result__button--addToCart',
+            onClick: (e) => {
                 setAddedToCart(true);
                 if (onAddToCartClick) {
                     onAddToCartClick(e, result);
                 }
-                controller === null || controller === void 0 ? void 0 : controller.addToCart([result]);
-                setTimeout(function () { return setAddedToCart(false); }, addToCartButtonSuccessTimeout);
-            } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+                controller?.addToCart([result]);
+                setTimeout(() => setAddedToCart(false), addToCartButtonSuccessTimeout);
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var displayName = core === null || core === void 0 ? void 0 : core.name;
+    let displayName = core?.name;
     if (props.truncateTitle) {
-        displayName = snap_toolbox_1.filters.truncate((core === null || core === void 0 ? void 0 : core.name) || '', props.truncateTitle.limit, props.truncateTitle.append);
+        displayName = snap_toolbox_1.filters.truncate(core?.name || '', props.truncateTitle.limit, props.truncateTitle.append);
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
         result: result,
         controller: controller,
-    });
-    var isOnSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && (core === null || core === void 0 ? void 0 : core.price) && (core === null || core === void 0 ? void 0 : core.price) < (core === null || core === void 0 ? void 0 : core.msrp));
-    var renderPrices = ((_f = (_e = (_d = (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.asyncState) === null || _e === void 0 ? void 0 : _e.product) === null || _f === void 0 ? void 0 : _f.price) ? result.state.priceFetched : true;
-    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
+    const renderPrices = controller?.store?.config?.asyncState?.product?.price ? result.state.priceFetched : true;
+    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", { ...styling, className: (0, classnames_1.default)('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                             onClick && onClick(e);
-                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, __assign({}, subProps.overlayBadge, { controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image)) }))) : ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image))) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image }) })) : ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image })) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',
-                                } }) })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, __assign({}, subProps.rating)), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.msrp, lineThrough: true, name: 'msrp' })), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price, name: 'price' }))] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price }))) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result: result, treePath: treePath }), !hideVariantSelections && ((_g = result.variants) === null || _g === void 0 ? void 0 : _g.selections.length) ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__variant-selection", children: (_h = result.variants) === null || _h === void 0 ? void 0 : _h.selections.map(function (selection) {
-                                return ((0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, __assign({}, subProps.variantSelection, { type: selection.type, selection: selection })));
-                            }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, mergedLang.addToCartButtonText.all)) }))] })] })) })) : null;
+                                } }) })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ...subProps.rating }), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price, name: 'price' })] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price })) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                return ((0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { ...subProps.variantSelection, type: selection.type, selection: selection }));
+                            }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, ...mergedLang.addToCartButtonText.all }) }))] })] }) })) : null;
 });