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

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

@@ -51,9 +51,7 @@ var defaultStyles = function (_a) {
     });
 };
 exports.Slideout = (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 = {
         active: false,
@@ -66,12 +64,10 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
         rerender: true,
     };
     var props = (0, utilities_1.mergeProps)('slideout', globalTheme, defaultProps, properties);
-    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, 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.slideout) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _a = (0, hooks_2.useCustomComponentOverride)('slideout', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var subProps = {
         overlay: __assign(__assign({ 
@@ -87,20 +83,19 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
     // state
     var _b = (0, hooks_1.useState)(Boolean(active)), isActive = _b[0], setActive = _b[1];
     var _c = (0, hooks_1.useState)(Boolean(active)), renderContent = _c[0], setRenderContent = _c[1];
-    var toggleActive = function () {
-        if (isActive) {
-            setActive(false);
-            if (rerender) {
-                setTimeout(function () {
-                    setRenderContent(false);
-                }, 250);
-            }
-        }
-        else {
-            setActive(true);
+    var isActiveRef = (0, hooks_1.useRef)(isActive);
+    isActiveRef.current = isActive;
+    var toggleActive = function (force) {
+        var next = typeof force !== 'undefined' ? force : !isActiveRef.current;
+        setActive(next);
+        if (next) {
             setRenderContent(true);
         }
-        document.body.style.overflow = isActive ? 'hidden' : '';
+        else if (rerender) {
+            setTimeout(function () {
+                setRenderContent(false);
+            }, 250);
+        }
     };
     //this is used to update active state if active prop is changed from parent component.
     (0, hooks_1.useEffect)(function () {
@@ -115,19 +110,15 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     (0, hooks_1.useEffect)(function () {
-        if (buttonSelector) {
-            var button = void 0;
-            if (typeof buttonSelector == 'string') {
-                button = document.querySelector(buttonSelector);
-            }
-            else {
-                button = buttonSelector;
-            }
-            if (button) {
-                button.addEventListener('click', function () { return toggleActive(); });
-            }
-        }
-    }, []);
+        if (!buttonSelector)
+            return;
+        var targets = typeof buttonSelector == 'string' ? Array.from(document.querySelectorAll(buttonSelector)) : [buttonSelector];
+        var handler = typeof buttonSelector == 'string' ? function () { return toggleActive(true); } : function () { return toggleActive(); };
+        targets.forEach(function (target) { return target.addEventListener('click', handler); });
+        return function () {
+            targets.forEach(function (target) { return target.removeEventListener('click', handler); });
+        };
+    }, [buttonSelector]);
     return isVisible || !rerender ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); }, children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath: treePath }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' } }, styling, { children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive, treePath: treePath }) })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive }))] })) : null;
+                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); }, children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath: treePath }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' } }, styling, { children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive, treePath: treePath }) })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: function () { return toggleActive(false); } }))] })) : null;
 });

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

@@ -1,7 +1,8 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import { Lang } from '../../../hooks';
 import { LangAttributes } from '../../../hooks/useLang';
-export declare function Slideshow(properties: SlideshowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Slideshow(properties: SlideshowProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export interface SlideshowLang {
     pauseButton: Lang<{
         isPlaying: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA4JxD,wBAAgB,SAAS,CAAC,UAAU,EAAE,cAAc,oDAupBnD;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA4JxD,wBAAgB,SAAS,CAAC,UAAU,EAAE,cAAc,2EAupBnD;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

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

@@ -155,9 +155,8 @@ var defaultStyles = function (_a) {
     });
 };
 function Slideshow(properties) {
-    var _a, _b;
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         treePath: globalTreePath,
@@ -175,12 +174,10 @@ function Slideshow(properties) {
         dragThreshold: 50,
     };
     var props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
-    var className = props.className, slides = props.slides, fallbackImage = props.fallbackImage, autoPlay = props.autoPlay, autoPlayInterval = props.autoPlayInterval, showNavigation = props.showNavigation, showPagination = props.showPagination, loop = props.loop, alwaysShowNavigation = props.alwaysShowNavigation, slidesToShow = props.slidesToShow, slideImageAlt = props.slideImageAlt, centerInsufficientSlides = props.centerInsufficientSlides, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, disableStyles = props.disableStyles, slideWidth = props.slideWidth, gap = props.gap, treePath = props.treePath, overlayNavigation = props.overlayNavigation, dragThreshold = props.dragThreshold, 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.slideshow) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var className = props.className, slides = props.slides, fallbackImage = props.fallbackImage, autoPlay = props.autoPlay, autoPlayInterval = props.autoPlayInterval, showNavigation = props.showNavigation, showPagination = props.showPagination, loop = props.loop, alwaysShowNavigation = props.alwaysShowNavigation, slidesToShow = props.slidesToShow, slideImageAlt = props.slideImageAlt, centerInsufficientSlides = props.centerInsufficientSlides, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, disableStyles = props.disableStyles, slideWidth = props.slideWidth, gap = props.gap, treePath = props.treePath, overlayNavigation = props.overlayNavigation, dragThreshold = props.dragThreshold;
+    var _b = (0, hooks_2.useCustomComponentOverride)('slideshow', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var touchDragging = props.touchDragging;
     var subProps = {
@@ -518,7 +515,7 @@ function Slideshow(properties) {
         translateUnit = '%';
         // Apply drag offset
         if (isDragging && trackRef.current) {
-            var containerWidth_1 = ((_b = trackRef.current.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+            var containerWidth_1 = ((_a = trackRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
             var dragPercentage = (dragOffset / containerWidth_1) * 100;
             translateX += dragPercentage;
         }
@@ -563,7 +560,7 @@ function Slideshow(properties) {
                         }), style: { transform: "translateX(".concat(translateX).concat(translateUnit, ")") }, role: "group", "aria-label": "Slide group ".concat(currentIndex, " of ").concat(totalDots), 
                         // Touch events
                         // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? function (event) { return handleDragStart(event.touches[0]); } : undefined, 
+                        onTouchStart: touchDragging ? function (event) { return handleDragStart(event.touches[0].clientX); } : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? function (event) {
@@ -578,6 +575,10 @@ function Slideshow(properties) {
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
                             ? function (event) {
+                                // Only initiate dragging with the primary (left) mouse button.
+                                // Right/middle clicks should not start a drag (e.g. opening the context menu).
+                                if (event.button !== 0)
+                                    return;
                                 event.preventDefault();
                                 handleDragStart(event.clientX);
                             }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SortBy/SortBy.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAgB,MAAM,gBAAgB,CAAC;AAapD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAkIrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SortBy/SortBy.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,IAAI,EAA8B,MAAM,gBAAgB,CAAC;AAYlE,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAgIrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -35,9 +35,8 @@ var defaultStyles = function () {
     });
 };
 exports.SortBy = (0, mobx_react_lite_1.observer)(function (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 = {
         label: 'Sort By',
@@ -45,15 +44,13 @@ exports.SortBy = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('sortBy', globalTheme, defaultProps, properties);
-    var sorting = props.sorting, type = props.type, controller = props.controller, hideLabel = props.hideLabel, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
+    var sorting = props.sorting, type = props.type, controller = props.controller, hideLabel = props.hideLabel, 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.sortBy) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var _c = (0, hooks_1.useCustomComponentOverride)('sortBy', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
-    var store = sorting || ((_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.sorting);
+    var store = sorting || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.sorting);
     var subProps = {
         Select: __assign(__assign({}, (0, utilities_1.defined)({
             disableStyles: disableStyles,
@@ -85,7 +82,7 @@ exports.SortBy = (0, mobx_react_lite_1.observer)(function (properties) {
         label = undefined;
     }
     // options can be an Array or ObservableArray - but should have length
-    return (store === null || store === void 0 ? void 0 : store.current) && typeof (store === null || store === void 0 ? void 0 : store.options) == 'object' && ((_c = store.options) === null || _c === void 0 ? void 0 : _c.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName) }, subProps.Select, { label: label, options: store.options, selected: store.current, onSelect: function (e, selection) {
+    return (store === null || store === void 0 ? void 0 : store.current) && typeof (store === null || store === void 0 ? void 0 : store.options) == 'object' && ((_b = store.options) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName) }, subProps.Select, { label: label, options: store.options, selected: store.current, onSelect: function (e, selection) {
                     var _a;
                     (_a = selection === null || selection === void 0 ? void 0 : selection.url) === null || _a === void 0 ? void 0 : _a.go();
                 }, lang: {

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

@@ -1,7 +1,8 @@
+import { h } from 'preact';
 import { ComponentProps, SwatchOption, BreakpointsProps } from '../../../types';
 import { GridProps } from '../Grid';
 import { SlideshowProps } from '../Slideshow';
-export declare function Swatches(properties: SwatchesProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function Swatches(properties: SwatchesProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export type SwatchesProps = {
     breakpoints?: BreakpointsProps;
 } & SwatchesTemplatesLegalProps & ComponentProps<SwatchesProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAI7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAM1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA6DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAqMjD;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAM1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA6DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2EAkMjD;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAC5B,CAAC"}

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

@@ -82,9 +82,7 @@ var defaultStyles = function (_a) {
     });
 };
 function Swatches(properties) {
-    var _a;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultCarouselBreakpoints = {
         0: {
@@ -122,12 +120,10 @@ function Swatches(properties) {
         var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
         props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
     }
-    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, type = props.type, slideshow = props.slideshow, grid = props.grid, 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.swatches) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, type = props.type, slideshow = props.slideshow, grid = props.grid, treePath = props.treePath;
+    var _a = (0, hooks_1.useCustomComponentOverride)('swatches', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var subProps = {
         slideshow: __assign(__assign(__assign({ 

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

@@ -1,9 +1,10 @@
+import { h } from 'preact';
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import type { AutocompleteTermStore } from '@athoscommerce/snap-store-mobx';
 import { ComponentProps } from '../../../types';
 import { Term } from '@athoscommerce/snap-store-mobx';
 import type { Lang } from '../../../hooks';
-export declare const Terms: ((properties: TermsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const Terms: ((properties: TermsProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type TermsProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Terms.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Terms/Terms.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA4FnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Terms.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Terms/Terms.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA0FnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC"}

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

@@ -81,9 +81,8 @@ var emIfyTerm = function (term, search) {
     return "<em>".concat(term, "</em>");
 };
 exports.Terms = (0, mobx_react_lite_1.observer)(function (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 = {
         vertical: true,
@@ -91,14 +90,12 @@ exports.Terms = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('terms', globalTheme, defaultProps, properties);
-    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller, customComponent = props.customComponent;
+    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller;
     var currentInput = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.input;
     var terms = props.terms;
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_1.useComponent)(((_c = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _c === void 0 ? void 0 : _c.library.import.component.terms) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var _c = (0, hooks_1.useCustomComponentOverride)('terms', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     var termClickEvent = function (e, term) {

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

@@ -1,6 +1,7 @@
+import { h } from 'preact';
 import { ComponentProps, ListOption } from '../../../types';
 import type { VariantSelection as VariantSelectionType } from '@athoscommerce/snap-store-mobx';
-export declare const VariantSelection: ((properties: VariantSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const VariantSelection: ((properties: VariantSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type VariantSelectionProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA4D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAuLzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAqLzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}

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

@@ -72,9 +72,7 @@ var dropdownContentStyles = function () {
     });
 };
 exports.VariantSelection = (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 = {
         // default props
@@ -82,12 +80,10 @@ exports.VariantSelection = (0, mobx_react_lite_1.observer)(function (properties)
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('variantSelection', globalTheme, defaultProps, properties);
-    var selection = props.selection, onSelect = props.onSelect, 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.variantSelection) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var selection = props.selection, onSelect = props.onSelect, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _a = (0, hooks_1.useCustomComponentOverride)('variantSelection', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var type = props.type;
     if (!type) {

package/dist/cjs/components/src/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -1,10 +1,11 @@
+import { h } from 'preact';
 import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
 import type { Term } from '@athoscommerce/snap-store-mobx';
 import { IconProps } from '../../Atoms/Icon/Icon';
 import { ComponentProps, BreakpointsProps, JSXComponent } from '../../../types';
 import { Lang } from '../../../hooks';
 import { IconType } from '../../Atoms/Icon';
-export declare const Autocomplete: ((properties: AutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const Autocomplete: ((properties: AutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type AutocompleteProps = {

package/dist/cjs/components/src/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/src/components/Organisms/Autocomplete/Autocomplete.js

@@ -32,7 +32,6 @@ var providers_1 = require("../../../providers");
 var types_1 = require("../../../types");
 var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
 var hooks_2 = require("../../../hooks");
-// import type { SnapTemplates } from '../../../../../src';
 var defaultStyles = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     var hideFacets = _a.hideFacets, horizontalTerms = _a.horizontalTerms, controller = _a.controller, input = _a.input, contentSlot = _a.contentSlot, viewportMaxHeight = _a.viewportMaxHeight, vertical = _a.vertical, width = _a.width, theme = _a.theme;
@@ -179,9 +178,8 @@ var defaultStyles = function (_a) {
     });
 };
 exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         termsTitle: '',
@@ -194,12 +192,9 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('autocomplete', globalTheme, defaultProps, properties);
-    var 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.autocomplete) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var _x = (0, hooks_2.useCustomComponentOverride)('autocomplete', props), overrideElement = _x.overrideElement, shouldRenderDefault = _x.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var valueProps = (0, toolbox_1.createHoverProps)();
     var facetClickEvent = function (e) {
@@ -238,17 +233,17 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             0: {
                 columns: 2,
                 rows: 1,
-                hideFacets: (_b = props.hideFacets) !== null && _b !== void 0 ? _b : true,
-                vertical: (_c = props.vertical) !== null && _c !== void 0 ? _c : true,
-                hideHistory: (_d = props.hideHistory) !== null && _d !== void 0 ? _d : true,
-                hideTrending: (_e = props.hideTrending) !== null && _e !== void 0 ? _e : true,
+                hideFacets: (_a = props.hideFacets) !== null && _a !== void 0 ? _a : true,
+                vertical: (_b = props.vertical) !== null && _b !== void 0 ? _b : true,
+                hideHistory: (_c = props.hideHistory) !== null && _c !== void 0 ? _c : true,
+                hideTrending: (_d = props.hideTrending) !== null && _d !== void 0 ? _d : true,
             },
             540: {
                 columns: 3,
                 rows: 1,
-                vertical: (_f = props.vertical) !== null && _f !== void 0 ? _f : true,
-                hideHistory: (_g = props.hideHistory) !== null && _g !== void 0 ? _g : true,
-                hideTrending: (_h = props.hideTrending) !== null && _h !== void 0 ? _h : true,
+                vertical: (_e = props.vertical) !== null && _e !== void 0 ? _e : true,
+                hideHistory: (_f = props.hideHistory) !== null && _f !== void 0 ? _f : true,
+                hideTrending: (_g = props.hideTrending) !== null && _g !== void 0 ? _g : true,
             },
             768: {
                 columns: 2,
@@ -362,11 +357,11 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
     var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded && !loading;
     // results logic
-    var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string));
+    var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
     if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
         showResults = false;
     }
-    var noResults = Boolean(((_k = search === null || search === void 0 ? void 0 : search.query) === null || _k === void 0 ? void 0 : _k.string) && results.length === 0);
+    var noResults = Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0);
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     var reset = function () {
         controller.setFocused();
@@ -397,7 +392,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
         ? typeof seeMoreButtonText == 'function'
             ? seeMoreButtonText(controller)
             : seeMoreButtonText
-        : "See ".concat(pagination.totalResults, " ").concat(filters.length > 0 ? 'filtered' : '', " result").concat(pagination.totalResults == 1 ? '' : 's', " for \"").concat((_l = search.query) === null || _l === void 0 ? void 0 : _l.string, "\"");
+        : "See ".concat(pagination.totalResults, " ").concat(filters.length > 0 ? 'filtered' : '', " result").concat(pagination.totalResults == 1 ? '' : 's', " for \"").concat((_k = search.query) === null || _k === void 0 ? void 0 : _k.string, "\"");
     //initialize lang
     var defaultLang = {
         trendingTitle: {
@@ -422,7 +417,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             value: facetsTitle,
         },
         noResultsText: {
-            value: "<p>No results found for \"".concat(((_m = search.originalQuery) === null || _m === void 0 ? void 0 : _m.string) || ((_o = search.query) === null || _o === void 0 ? void 0 : _o.string), "\".</p><p>Please try another search.</p>"),
+            value: "<p>No results found for \"".concat(((_l = search.originalQuery) === null || _l === void 0 ? void 0 : _l.string) || ((_m = search.query) === null || _m === void 0 ? void 0 : _m.string), "\".</p><p>Please try another search.</p>"),
         },
         seeMoreButton: {
             value: defaultSeeMoreButtonText,
@@ -437,7 +432,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                 'ss__autocomplete--only-terms': onlyTerms,
                 'ss__autocomplete--vertical': vertical,
                 'ss__autocomplete--no-results': noResults,
-            }), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [(0, jsx_runtime_1.jsx)("span", __assign({ role: 'link', ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function () { return reset(); }, className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' } }, (_p = mergedLang.closeButton) === null || _p === void 0 ? void 0 : _p.all)), !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }), children: termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
+            }), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [(0, jsx_runtime_1.jsx)("span", __assign({ role: 'link', ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function () { return reset(); }, className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' } }, (_o = mergedLang.closeButton) === null || _o === void 0 ? void 0 : _o.all)), !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }), children: termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
                         terms: terms,
                         trending: trending,
                         termsTitle: termsTitle,
@@ -450,7 +445,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                         onTermClick: onTermClick,
                         controller: controller,
                         treePath: treePath,
-                    })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [terms.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__suggestions", children: [termsTitle || lang.termsTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_q = mergedLang.termsTitle) === null || _q === void 0 ? void 0 : _q.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle, children: terms.map(function (term, idx) {
+                    })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [terms.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__suggestions", children: [termsTitle || lang.termsTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_p = mergedLang.termsTitle) === null || _p === void 0 ? void 0 : _p.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle, children: terms.map(function (term, idx) {
                                             var _a;
                                             //initialize lang
                                             var defaultLang = {
@@ -470,7 +465,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                                             return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                                                     'ss__autocomplete__terms__option--active': term.active,
                                                 }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = suggestionTermLangObj.suggestionsTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
-                                        }) })] })) : null, showTrending && !hideTrending ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__trending", children: [trendingTitle || lang.trendingTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_r = mergedLang.trendingTitle) === null || _r === void 0 ? void 0 : _r.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle, children: trending.map(function (term, idx) {
+                                        }) })] })) : null, showTrending && !hideTrending ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__trending", children: [trendingTitle || lang.trendingTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_q = mergedLang.trendingTitle) === null || _q === void 0 ? void 0 : _q.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle, children: trending.map(function (term, idx) {
                                             var _a;
                                             //initialize lang
                                             var defaultLang = {
@@ -490,7 +485,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                                             return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                                                     'ss__autocomplete__terms__option--active': term.active,
                                                 }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = trendingTermLangObj.trendingTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
-                                        }) })] })) : null, showHistory && !hideHistory ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__history", children: [historyTitle || lang.historyTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_s = mergedLang.historyTitle) === null || _s === void 0 ? void 0 : _s.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle, children: history.map(function (term, idx) {
+                                        }) })] })) : null, showHistory && !hideHistory ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__history", children: [historyTitle || lang.historyTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_r = mergedLang.historyTitle) === null || _r === void 0 ? void 0 : _r.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle, children: history.map(function (term, idx) {
                                             var _a;
                                             //initialize lang
                                             var defaultLang = {
@@ -511,7 +506,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                                                     'ss__autocomplete__terms__option--active': term.active,
                                                 }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = historyTermLangObj.historyTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
                                         }) })] })) : null] })) })), !hideFacets &&
-                    (facetsSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__facets", children: (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps, treePath: treePath }) })) : (facetsToShow.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(facetsTitle || lang.facetsTitle.value) && vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_t = mergedLang.facetsTitle) === null || _t === void 0 ? void 0 : _t.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(facetsTitle || lang.facetsTitle.value) && !vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_u = mergedLang.facetsTitle) === null || _u === void 0 ? void 0 : _u.all)) })) : null, (0, jsx_runtime_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })))), !hideContent ? (contentSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller, treePath: treePath }) })) : showResults ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' })) : null, !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' })) : null, results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__results", children: resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(contentTitle || lang.contentTitle.value) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_v = mergedLang.contentTitle) === null || _v === void 0 ? void 0 : _v.all)) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller }))] })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results", children: noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_w = mergedLang.noResultsText) === null || _w === void 0 ? void 0 : _w.all))) })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' })) : null, !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller, treePath: treePath })) : ((_x = search === null || search === void 0 ? void 0 : search.query) === null || _x === void 0 ? void 0 : _x.string) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__info", children: (0, jsx_runtime_1.jsxs)("a", __assign({ href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } }, mergedLang.seeMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.seeMoreButton.value)), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof seeMoreButtonIcon == 'string' ? { icon: seeMoreButtonIcon } : seeMoreButtonIcon)))] })) })) : null) : null] }) })) : null) : null] })) })) : null;
+                    (facetsSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__facets", children: (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps, treePath: treePath }) })) : (facetsToShow.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(facetsTitle || lang.facetsTitle.value) && vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_s = mergedLang.facetsTitle) === null || _s === void 0 ? void 0 : _s.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(facetsTitle || lang.facetsTitle.value) && !vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_t = mergedLang.facetsTitle) === null || _t === void 0 ? void 0 : _t.all)) })) : null, (0, jsx_runtime_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })))), !hideContent ? (contentSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller, treePath: treePath }) })) : showResults ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' })) : null, !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' })) : null, results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__results", children: resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(contentTitle || lang.contentTitle.value) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_u = mergedLang.contentTitle) === null || _u === void 0 ? void 0 : _u.all)) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller }))] })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results", children: noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_v = mergedLang.noResultsText) === null || _v === void 0 ? void 0 : _v.all))) })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' })) : null, !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller, treePath: treePath })) : ((_w = search === null || search === void 0 ? void 0 : search.query) === null || _w === void 0 ? void 0 : _w.string) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__info", children: (0, jsx_runtime_1.jsxs)("a", __assign({ href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } }, mergedLang.seeMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.seeMoreButton.value)), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof seeMoreButtonIcon == 'string' ? { icon: seeMoreButtonIcon } : seeMoreButtonIcon)))] })) })) : null) : null] }) })) : null) : null] })) })) : null;
 });
 var emIfy = function (term, search) {
     if (term && search) {