@athoscommerce/snap-preact 1.5.1 → 1.7.0

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

@@ -35,9 +35,7 @@ var defaultStyles = function (_a) {
     });
 };
 exports.LayoutSelector = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         label: 'Layout',
@@ -47,13 +45,11 @@ exports.LayoutSelector = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('layoutSelector', globalTheme, defaultProps, properties);
-    var options = props.options, selected = props.selected, type = props.type, onSelect = props.onSelect, showSingleOption = props.showSingleOption, hideLabel = props.hideLabel, hideOptionLabels = props.hideOptionLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
+    var options = props.options, selected = props.selected, type = props.type, onSelect = props.onSelect, showSingleOption = props.showSingleOption, hideLabel = props.hideLabel, hideOptionLabels = props.hideOptionLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
     var label = props.label;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.layoutSelector) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var _a = (0, hooks_1.useCustomComponentOverride)('layoutSelector', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var subProps = {
         Select: __assign(__assign({ hideOptionLabels: hideOptionLabels }, (0, utilities_1.defined)({

package/dist/cjs/components/src/components/Molecules/List/List.d.ts

@@ -1,6 +1,7 @@
+import { h } from 'preact';
 import { ComponentProps, ListOption } from '../../../types';
 import { Lang } from '../../../hooks';
-export declare function List(properties: ListProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function List(properties: ListProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export type ListProps = {
     lang?: Partial<ListLang>;
 } & ListTemplatesLegalProps & ComponentProps<ListProps>;

package/dist/cjs/components/src/components/Molecules/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAkC,MAAM,gBAAgB,CAAC;AAoDtE,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAkLzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AAmDpF,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2EA+KzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -78,20 +78,17 @@ var defaultStyles = function (_a) {
     });
 };
 function List(properties) {
-    var _a, _b, _c;
+    var _a, _b;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('list', globalTheme, defaultProps, properties);
-    var titleText = props.titleText, onSelect = props.onSelect, native = props.native, multiSelect = props.multiSelect, hideOptionLabels = props.hideOptionLabels, hideOptionIcons = props.hideOptionIcons, hideOptionCheckboxes = props.hideOptionCheckboxes, disabled = props.disabled, hideTitleText = props.hideTitleText, options = props.options, requireSelection = props.requireSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_2.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.list) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var titleText = props.titleText, onSelect = props.onSelect, native = props.native, multiSelect = props.multiSelect, hideOptionLabels = props.hideOptionLabels, hideOptionIcons = props.hideOptionIcons, hideOptionCheckboxes = props.hideOptionCheckboxes, disabled = props.disabled, hideTitleText = props.hideTitleText, options = props.options, requireSelection = props.requireSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _c = (0, hooks_2.useCustomComponentOverride)('list', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var selected = props.selected;
     var subProps = {
@@ -167,7 +164,7 @@ function List(properties) {
         options: 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__list', { 'ss__list--native': native, 'ss__list--disabled': disabled }, className, internalClassName), children: [(titleText || ((_b = lang === null || lang === void 0 ? void 0 : lang.title) === null || _b === void 0 ? void 0 : _b.value)) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: "ss__list__title" }, (_c = mergedLang.title) === null || _c === void 0 ? void 0 : _c.all, { children: titleText }))), (0, jsx_runtime_1.jsx)("ul", { className: "ss__list__options", role: "listbox", "aria-label": titleText, children: options.map(function (option) {
+    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__list', { 'ss__list--native': native, 'ss__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__list__title" }, (_b = mergedLang.title) === null || _b === void 0 ? void 0 : _b.all, { children: titleText }))), (0, jsx_runtime_1.jsx)("ul", { className: "ss__list__options", role: "listbox", "aria-label": titleText, children: options.map(function (option) {
                         var _a;
                         var selected = selection.some(function (select) { return select.value == option.value; });
                         return ((0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)("ss__list__option ss__list__option--".concat(snap_toolbox_1.filters.handleize((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString())), {

package/dist/cjs/components/src/components/Molecules/LoadMore/LoadMore.d.ts

@@ -1,9 +1,10 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import { Lang } from '../../../hooks';
 import type { SearchPaginationStore } from '@athoscommerce/snap-store-mobx';
 import type { SearchController } from '@athoscommerce/snap-controller';
 import { IconProps, IconType } from '../../Atoms/Icon';
-export declare const LoadMore: ((properties: LoadMoreProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const LoadMore: ((properties: LoadMoreProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type LoadMoreProps = {

package/dist/cjs/components/src/components/Molecules/LoadMore/LoadMore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAA0C,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAsD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA2KzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}
+{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAC5F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwKzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}

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

@@ -79,9 +79,8 @@ var defaultStyles = function (_a) {
     });
 };
 exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         loadMoreText: 'Load More',
@@ -92,15 +91,13 @@ exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('loadMore', globalTheme, defaultProps, properties);
-    var pagination = props.pagination, controller = props.controller, onClick = props.onClick, autoFetch = props.autoFetch, intersectionOffset = props.intersectionOffset, loading = props.loading, loadMoreText = props.loadMoreText, hideProgressIndicator = props.hideProgressIndicator, hideProgressText = props.hideProgressText, loadingLocation = props.loadingLocation, loadingIcon = props.loadingIcon, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_2.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.loadMore) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var pagination = props.pagination, controller = props.controller, onClick = props.onClick, autoFetch = props.autoFetch, intersectionOffset = props.intersectionOffset, loading = props.loading, loadMoreText = props.loadMoreText, hideProgressIndicator = props.hideProgressIndicator, hideProgressText = props.hideProgressText, loadingLocation = props.loadingLocation, loadingIcon = props.loadingIcon, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _d = (0, hooks_2.useCustomComponentOverride)('loadMore', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
-    var store = pagination || ((_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.pagination);
-    var isLoading = typeof loading == 'boolean' ? loading : (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.loading;
+    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
+    var isLoading = typeof loading == 'boolean' ? loading : (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.loading;
     var isButtonDisabled = (isLoading && loadingLocation === 'button') || !Boolean(store === null || store === void 0 ? void 0 : store.next);
     var subProps = {
         button: __assign(__assign({ 
@@ -161,5 +158,5 @@ exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
                                 var _a;
                                 (_a = store.next) === null || _a === void 0 ? void 0 : _a.url.go({ history: 'replace' });
                                 onClick && onClick(e);
-                            } }, subProps.button, mergedLang.loadMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.loadMoreButton.value, { children: loadMoreText })), loadingIcon && isLoading && loadingLocation === 'button' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon)))) : null] })), loadingIcon && isLoading && loadingLocation === 'outside' && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon))))] })), (!hideProgressIndicator || !hideProgressText) && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress', children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideProgressIndicator && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress__indicator', children: (0, jsx_runtime_1.jsx)("div", { className: "ss__load-more__progress__indicator__bar" }) })), !hideProgressText && ((0, jsx_runtime_1.jsx)("div", __assign({ "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text' }, (_d = mergedLang.progressText) === null || _d === void 0 ? void 0 : _d.all)))] }) }))] })) })) : null;
+                            } }, subProps.button, mergedLang.loadMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.loadMoreButton.value, { children: loadMoreText })), loadingIcon && isLoading && loadingLocation === 'button' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon)))) : null] })), loadingIcon && isLoading && loadingLocation === 'outside' && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon))))] })), (!hideProgressIndicator || !hideProgressText) && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress', children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideProgressIndicator && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress__indicator', children: (0, jsx_runtime_1.jsx)("div", { className: "ss__load-more__progress__indicator__bar" }) })), !hideProgressText && ((0, jsx_runtime_1.jsx)("div", __assign({ "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text' }, (_c = mergedLang.progressText) === null || _c === void 0 ? void 0 : _c.all)))] }) }))] })) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
-import { ComponentChildren } from 'preact';
+import { ComponentChildren, h } from 'preact';
 import { ComponentProps } from '../../../types';
-export declare const Modal: ((properties: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const Modal: ((properties: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type ModalProps = ModalTemplatesLegalProps & ComponentProps<ModalProps>;

package/dist/cjs/components/src/components/Molecules/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAwC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA8KnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA2KnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}

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

@@ -57,9 +57,7 @@ var defaultStyles = function () {
 };
 exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
     var _a;
-    var _b;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         startOpen: false,
@@ -69,12 +67,10 @@ exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('modal', globalTheme, defaultProps, properties);
-    var button = props.button, content = props.content, buttonSelector = props.buttonSelector, children = props.children, disabled = props.disabled, open = props.open, onClick = props.onClick, lockScroll = props.lockScroll, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, disableStyles = props.disableStyles, overlayColor = props.overlayColor, onOverlayClick = props.onOverlayClick, treePath = props.treePath, customComponent = props.customComponent;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_2.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.modal) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var button = props.button, content = props.content, buttonSelector = props.buttonSelector, children = props.children, disabled = props.disabled, open = props.open, onClick = props.onClick, lockScroll = props.lockScroll, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, disableStyles = props.disableStyles, overlayColor = props.overlayColor, onOverlayClick = props.onOverlayClick, treePath = props.treePath;
+    var _b = (0, hooks_2.useCustomComponentOverride)('modal', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var subProps = {
         overlay: __assign(__assign({ 

package/dist/cjs/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts

@@ -1,8 +1,8 @@
-import { ComponentChildren } from 'preact';
+import { ComponentChildren, h } from 'preact';
 import { ComponentProps, ComponentMap } from '../../../types';
 import type { AutocompleteController, RecommendationController, SearchController } from '@athoscommerce/snap-controller';
 import type { Product } from '@athoscommerce/snap-store-mobx';
-export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type OverlayBadgeProps = {

package/dist/cjs/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAuD9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAgE9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}

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

@@ -58,8 +58,16 @@ var defaultStyles = function (_a) {
         '& .ss__overlay-badge__grid-wrapper': __assign({ pointerEvents: 'none', display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
     });
 };
+var BadgeRenderer = function (_a) {
+    var badge = _a.badge, badgeComponentMap = _a.badgeComponentMap, treePath = _a.treePath;
+    var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component).ComponentOverride;
+    if (!BadgeComponent) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters, { treePath: treePath }));
+};
 exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     var globalTheme = (0, providers_1.useTheme)();
     var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
@@ -68,25 +76,23 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('overlayBadge', globalTheme, defaultProps, properties);
-    var result = props.result, children = props.children, controller = props.controller, renderEmpty = props.renderEmpty, limit = props.limit, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.overlayBadge) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var result = props.result, children = props.children, controller = props.controller, renderEmpty = props.renderEmpty, limit = props.limit, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _h = (0, hooks_1.useCustomComponentOverride)('overlayBadge', props), overrideElement = _h.overrideElement, shouldRenderDefault = _h.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     if (!children) {
-        (_b = controller === null || controller === void 0 ? void 0 : controller.log) === null || _b === void 0 ? void 0 : _b.warn('OverlayBadge component must have children');
+        (_a = controller === null || controller === void 0 ? void 0 : controller.log) === null || _a === void 0 ? void 0 : _a.warn('OverlayBadge component must have children');
         return null;
     }
-    var meta = (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.meta;
+    var meta = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.meta;
     if (!meta) {
-        (_d = controller === null || controller === void 0 ? void 0 : controller.log) === null || _d === void 0 ? void 0 : _d.warn('Controller must have a meta store');
+        (_c = controller === null || controller === void 0 ? void 0 : controller.log) === null || _c === void 0 ? void 0 : _c.warn('Controller must have a meta store');
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     }
     var group = 'overlay';
-    var badgeComponentMap = __assign(__assign(__assign({}, utilities_1.defaultBadgeComponentMap), (((_e = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _e === void 0 ? void 0 : _e.library.import.component.badge) || {})), props.componentMap);
-    var sections = (_h = (_g = (_f = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _f === void 0 ? void 0 : _f.groups) === null || _g === void 0 ? void 0 : _g[group]) === null || _h === void 0 ? void 0 : _h.sections;
+    var badgeComponentMap = __assign(__assign(__assign({}, utilities_1.defaultBadgeComponentMap), (((_d = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _d === void 0 ? void 0 : _d.library.import.component.badge) || {})), props.componentMap);
+    var sections = (_g = (_f = (_e = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _e === void 0 ? void 0 : _e.groups) === null || _f === void 0 ? void 0 : _f[group]) === null || _g === void 0 ? void 0 : _g.sections;
     // build locations and filter out the locations that have no badges in them to prevent rendering
     var locations = sections === null || sections === void 0 ? void 0 : sections.map(function (section) {
         var _a, _b;
@@ -112,13 +118,7 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
                             var _a;
                             return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.map(function (slot) {
                                 var badgeStyles = defaultBadgeStyles(__assign(__assign({}, props), { tag: slot.tag, section: location.section, index: index, top: slot.top, bottom: slot.bottom }));
-                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [badgeStyles], children: slot.badges.map(function (badge) {
-                                        var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
-                                        if (!BadgeComponent) {
-                                            return null;
-                                        }
-                                        return (0, jsx_runtime_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters, { treePath: treePath }));
-                                    }) }));
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [badgeStyles], children: slot.badges.map(function (badge, badgeIndex) { return ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, "".concat(slot.tag, "-").concat(badge.component, "-").concat(badgeIndex))); }) }, "".concat(location.section, "-").concat(slot.tag)));
                             });
                         }) }), children] })) }));
     }

package/dist/cjs/components/src/components/Molecules/OverlayResult/OverlayResult.d.ts

@@ -0,0 +1,48 @@
+import { h } from 'preact';
+import { MutableRef } from 'preact/hooks';
+import { ComponentProps } from '../../../types';
+import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import { Lang } from '../../../hooks';
+export declare const OverlayResult: ((properties: OverlayResultProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export interface TruncateTitleProps {
+    limit: number;
+    append?: string;
+}
+export type OverlayResultProps = {
+    result: Product;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+    lang?: Partial<OverlayResultLang>;
+    trackingRef?: MutableRef<HTMLElement | null>;
+} & OverlayResultTemplatesLegalProps & ComponentProps<OverlayResultProps>;
+export type OverlayResultTemplatesLegalProps = {
+    disableSlide?: boolean;
+    overlayBackground?: string;
+    hideBadge?: boolean;
+    hideTitle?: boolean;
+    hideImage?: boolean;
+    hidePricing?: boolean;
+    hideRating?: boolean;
+    hideVariantSelections?: boolean;
+    hideAddToCartButton?: boolean;
+    addToCartButtonText?: string;
+    onAddToCartClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, result: Product) => void;
+    addToCartButtonSuccessText?: string;
+    addToCartButtonSuccessTimeout?: number;
+    detailSlot?: JSX.Element | JSX.Element[];
+    fallback?: string;
+    truncateTitle?: TruncateTitleProps;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
+};
+export interface OverlayResultLang {
+    addToCartButtonText: Lang<OverlayResultPropData>;
+    addToCartButtonSuccessText: Lang<OverlayResultPropData>;
+}
+interface OverlayResultPropData {
+    result: Product;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+}
+export {};
+//# sourceMappingURL=OverlayResult.d.ts.map

package/dist/cjs/components/src/components/Molecules/OverlayResult/OverlayResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayResult/OverlayResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAI9D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAiH3E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CAwQnE,CAAC;AAWH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,mBAAmB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACjD,0BAA0B,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;CACxD;AAED,UAAU,qBAAqB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

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

@@ -0,0 +1,241 @@
+"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.OverlayResult = 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 CalloutBadge_1 = require("../CalloutBadge");
+var OverlayBadge_1 = require("../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 (props) {
+    var overlayBackground = props.overlayBackground, disableSlide = props.disableSlide;
+    return (0, react_1.css)({
+        position: 'relative',
+        overflow: 'hidden',
+        '& .ss__overlay-result__image-wrapper': {
+            position: 'relative',
+            width: '100%',
+            '& .ss__overlay-result__badge': {
+                background: 'rgba(255, 255, 255, 0.5)',
+                padding: '10px',
+            },
+            '& .ss__overlay-result__image': {
+                display: 'block',
+                width: '100%',
+                objectFit: 'cover',
+            },
+        },
+        '& .ss__overlay-result__details': {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            width: '100%',
+            boxSizing: 'border-box',
+            padding: '18px 10px 10px',
+            background: overlayBackground,
+            color: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+            alignItems: 'flex-start',
+            textAlign: 'left',
+            transform: 'translateY(0)',
+            transition: disableSlide ? 'none' : 'transform 260ms ease',
+            '& .ss__overlay-result__details__title': {
+                marginBottom: '4px',
+                '& a': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+            },
+            '& .ss__overlay-result__details__pricing': {
+                marginBottom: '4px',
+                '& .ss__overlay-result__price': {
+                    color: '#fff',
+                    fontSize: '1.3em',
+                },
+                '& .ss__price--strike': {
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: '0.9em',
+                },
+            },
+            '& .ss__overlay-result__rating': {
+                marginBottom: '4px',
+            },
+            '& .ss__overlay-result__button--addToCart': {
+                marginTop: '6px',
+            },
+            '& .ss__overlay-result__details__extra': {
+                display: 'grid',
+                gridTemplateRows: disableSlide ? '1fr' : '0fr',
+                opacity: disableSlide ? 1 : 0,
+                transform: disableSlide ? 'translateY(0)' : 'translateY(1px)',
+                transition: disableSlide ? 'none' : 'grid-template-rows 260ms ease, opacity 220ms ease, transform 260ms ease',
+                width: '100%',
+                '& .ss__overlay-result__details__extra-inner': {
+                    overflow: 'hidden',
+                    minHeight: 0,
+                },
+            },
+        },
+        '&:hover .ss__overlay-result__details': {
+            transform: 'translateY(0)',
+        },
+        '&:hover .ss__overlay-result__details .ss__overlay-result__details__extra': {
+            gridTemplateRows: '1fr',
+            opacity: 1,
+            transform: 'translateY(0)',
+        },
+        //a11y support for touch devices - show details on focus of the result
+        '&:focus-within .ss__overlay-result__details': {
+            transform: 'translateY(0)',
+        },
+        '&:focus-within .ss__overlay-result__details .ss__overlay-result__details__extra': {
+            gridTemplateRows: '1fr',
+            opacity: 1,
+            transform: 'translateY(0)',
+        },
+        '@media (hover: none)': {
+            '& .ss__overlay-result__details .ss__overlay-result__details__extra': {
+                gridTemplateRows: '1fr',
+                opacity: 1,
+                transform: 'translateY(0)',
+            },
+        },
+    });
+};
+exports.OverlayResult = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+        addToCartButtonText: 'Add To Cart',
+        addToCartButtonSuccessText: 'Added!',
+        addToCartButtonSuccessTimeout: 2000,
+        hideAddToCartButton: true,
+        overlayBackground: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)',
+    };
+    var props = (0, utilities_1.mergeProps)('overlayResult', 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, 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 _f = (0, hooks_2.useCustomComponentOverride)('overlayResult', __assign(__assign({}, props), { customComponent: !((_a = treePath === null || treePath === void 0 ? void 0 : treePath.split(' ')) === null || _a === void 0 ? void 0 : _a.includes('result')) && props.customComponent && props.customComponent !== 'OverlayResult'
+            ? props.customComponent
+            : undefined })), overrideElement = _f.overrideElement, shouldRenderDefault = _f.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    var core = ((_b = result === null || result === void 0 ? void 0 : result.display) === null || _b === void 0 ? void 0 : _b.mappings.core) || ((_c = result === null || result === void 0 ? void 0 : result.mappings) === null || _c === void 0 ? void 0 : _c.core);
+    var _g = (0, hooks_1.useState)(false), addedToCart = _g[0], setAddedToCart = _g[1];
+    var subProps = {
+        variantSelection: __assign(__assign({ 
+            // global theme
+            internalClassName: 'ss__overlay-result__variant-selection' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        price: __assign(__assign({ 
+            // global theme
+            internalClassName: 'ss__overlay-result__price' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        calloutBadge: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__overlay-result__callout-badge', result: result }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        overlayBadge: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__overlay-result__overlay-badge', result: result, controller: controller }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        image: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__overlay-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,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        rating: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__overlay-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,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        button: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__overlay-result__button--addToCart', onClick: function (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,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var displayName = core === null || core === void 0 ? void 0 : 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);
+    }
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var 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, {
+        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));
+    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__overlay-result', { 'ss__overlay-result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (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__overlay-result__details", children: [!hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+                                    onClick && onClick(e);
+                                }, dangerouslySetInnerHTML: {
+                                    __html: displayName || '',
+                                } }) })), (0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__extra", children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__overlay-result__details__extra-inner", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, __assign({}, subProps.rating)), !hidePricing && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-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 && ((_d = result.variants) === null || _d === void 0 ? void 0 : _d.selections.length) ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__details__variant-selection", children: (_e = result.variants) === null || _e === void 0 ? void 0 : _e.selections.map(function (selection) {
+                                            return (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, __assign({}, subProps.variantSelection, { selection: selection }));
+                                        }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { content: addToCartButtonText }, mergedLang.addToCartButtonText.all)) }))] }) })] })] })) })) : null;
+});

package/dist/cjs/components/src/components/Molecules/OverlayResult/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OverlayResult';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/components/Molecules/OverlayResult/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayResult/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}