@athoscommerce/snap-preact 1.6.0 → 1.7.1-beta.121

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,37 +76,35 @@ 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;
         var sectionSlots = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.data) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.locations[section];
         var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot, index) {
-            var _a;
+            var _a, _b;
             return ({
                 tag: slot.tag,
                 name: slot.name,
                 top: index == 0,
                 bottom: index == sectionSlots.length - 1,
-                badges: (_a = result === null || result === void 0 ? void 0 : result.display.badges) === null || _a === void 0 ? void 0 : _a.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
+                badges: (_b = (_a = result === null || result === void 0 ? void 0 : result.display) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
             });
         }).filter(function (slot) { var _a; return (_a = slot.badges) === null || _a === void 0 ? void 0 : _a.length; });
         return {
@@ -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"}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./OverlayResult"), exports);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAmB7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAgL7D,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,MAAM,MAAM,6BAA6B,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,KAAK,EAAE,IAAI,CAAC;QACX,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;CACH"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAkB3E,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CA6K7D,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,MAAM,MAAM,6BAA6B,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,KAAK,EAAE,IAAI,CAAC;QACX,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;CACH"}

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

@@ -40,21 +40,18 @@ var defaultStyles = function () {
     });
 };
 exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         pages: 5,
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('pagination', globalTheme, defaultProps, properties);
-    var pagination = props.pagination, controller = props.controller, pages = props.pages, pagesLeft = props.pagesLeft, pagesRight = props.pagesRight, hideFirst = props.hideFirst, hideLast = props.hideLast, persistFirst = props.persistFirst, persistLast = props.persistLast, hideEllipsis = props.hideEllipsis, hideNext = props.hideNext, hidePrev = props.hidePrev, nextButton = props.nextButton, prevButton = props.prevButton, firstButton = props.firstButton, lastButton = props.lastButton, disableStyles = props.disableStyles, 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.pagination) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var pagination = props.pagination, controller = props.controller, pages = props.pages, pagesLeft = props.pagesLeft, pagesRight = props.pagesRight, hideFirst = props.hideFirst, hideLast = props.hideLast, persistFirst = props.persistFirst, persistLast = props.persistLast, hideEllipsis = props.hideEllipsis, hideNext = props.hideNext, hidePrev = props.hidePrev, nextButton = props.nextButton, prevButton = props.prevButton, firstButton = props.firstButton, lastButton = props.lastButton, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _f = (0, hooks_1.useCustomComponentOverride)('pagination', props), overrideElement = _f.overrideElement, shouldRenderDefault = _f.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var subProps = {
         icon: __assign(__assign({ 
@@ -65,7 +62,7 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
             // component theme overrides
             theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
     };
-    var store = pagination || ((_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.pagination);
+    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
     var getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
     var _pages = store === null || store === void 0 ? void 0 : store.getPages.apply(store, getPagesParams);
     var pageNumbers = _pages === null || _pages === void 0 ? void 0 : _pages.map(function (page) { return page.number; });
@@ -98,7 +95,7 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
     var mergedLang = (0, hooks_1.useLang)(lang, {
         pagination: store,
     });
-    return pageNumbers && pageNumbers.length > 1 && (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className, internalClassName), children: (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous') }, (_c = mergedLang.previous) === null || _c === void 0 ? void 0 : _c.all, { children: prevButton ? prevButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left', name: 'prev' })) }))), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first') }, (_d = mergedLang.first) === null || _d === void 0 ? void 0 : _d.all, { children: firstButton ? firstButton : store.first.number })), !pageNumbers.includes(2) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" })] })), _pages &&
+    return pageNumbers && pageNumbers.length > 1 && (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className, internalClassName), children: (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous') }, (_b = mergedLang.previous) === null || _b === void 0 ? void 0 : _b.all, { children: prevButton ? prevButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left', name: 'prev' })) }))), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first') }, (_c = mergedLang.first) === null || _c === void 0 ? void 0 : _c.all, { children: firstButton ? firstButton : store.first.number })), !pageNumbers.includes(2) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" })] })), _pages &&
                         _pages.map(function (page) {
                             var _a, _b;
                             //initialize lang
@@ -116,5 +113,5 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
                                 page: page,
                             });
                             return page.active ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active') }, (_a = mergedPageLang.page) === null || _a === void 0 ? void 0 : _a.all, { "aria-current": "true", "aria-live": "polite", children: page.number }))) : ((0, jsx_runtime_1.jsx)("a", __assign({}, page.url.link, { className: "ss__pagination__page" }, (_b = mergedPageLang.page) === null || _b === void 0 ? void 0 : _b.all, { children: page.number })));
-                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" }), (0, jsx_runtime_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last') }, (_e = mergedLang.last) === null || _e === void 0 ? void 0 : _e.all, { children: lastButton ? lastButton : store.last.number }))] })), store.next && !hideNext && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next') }, (_f = mergedLang.next) === null || _f === void 0 ? void 0 : _f.all, { children: nextButton ? nextButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right', name: 'next' })) })))] }) })) })) : null;
+                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" }), (0, jsx_runtime_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last') }, (_d = mergedLang.last) === null || _d === void 0 ? void 0 : _d.all, { children: lastButton ? lastButton : store.last.number }))] })), store.next && !hideNext && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next') }, (_e = mergedLang.next) === null || _e === void 0 ? void 0 : _e.all, { children: nextButton ? nextButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right', name: 'next' })) })))] }) })) })) : null;
 });