@athoscommerce/snap-preact 1.1.4 → 1.2.0

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

@@ -1,14 +1,14 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles, defined } from '../../../utilities';
 import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
-import { useLang } from '../../../hooks';
+import { useComponent, useLang } from '../../../hooks';
 import deepmerge from 'deepmerge';
-const defaultStyles = ({ theme, slidesToShow = 1, gap = 16, overlayNavigation = false, showNavigation }) => {
+const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return css({
         position: 'relative',
         overflow: 'hidden',
@@ -33,8 +33,15 @@ const defaultStyles = ({ theme, slidesToShow = 1, gap = 16, overlayNavigation =
             },
         },
         '.ss__slideshow__slide': {
-            maxWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
-            minWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
+            ...(slideWidth
+                ? {
+                    maxWidth: `${slideWidth}px`,
+                    minWidth: `${slideWidth}px`,
+                }
+                : {
+                    maxWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
+                    minWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
+                }),
             marginLeft: `calc(${gap}px / 2)`,
             marginRight: `calc(${gap}px / 2)`,
             position: 'relative',
@@ -136,6 +143,7 @@ const defaultStyles = ({ theme, slidesToShow = 1, gap = 16, overlayNavigation =
 };
 export function Slideshow(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
@@ -145,7 +153,7 @@ export function Slideshow(properties) {
         showNavigation: true,
         showPagination: true,
         centerInsufficientSlides: true,
-        slidesToShow: 4,
+        slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
         gap: 10,
         ariaLabel: 'slideshow',
@@ -153,7 +161,13 @@ export function Slideshow(properties) {
         dragThreshold: 50,
     };
     const props = mergeProps('slideshow', globalTheme, defaultProps, properties);
-    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, treePath, overlayNavigation, dragThreshold, } = props;
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.slideshow || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     let touchDragging = props.touchDragging;
     const subProps = {
         Image: {
@@ -226,9 +240,24 @@ export function Slideshow(properties) {
     }
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [containerWidth, setContainerWidth] = useState(0);
     const intervalRef = useRef(null);
     const slideshowRef = useRef(null);
     const trackRef = useRef(null);
+    // Track container width for slideWidth-based visible slide calculation
+    useEffect(() => {
+        const container = trackRef.current?.parentElement;
+        if (!container)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        observer.observe(container);
+        setContainerWidth(container.offsetWidth);
+        return () => observer.disconnect();
+    }, []);
     // Touch/Drag state
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
@@ -261,7 +290,11 @@ export function Slideshow(properties) {
     });
     // slide calculations
     const totalSlides = normalizedSlides.length;
-    const visibleSlides = Math.min(slidesToShow, totalSlides);
+    // When slideWidth is provided, compute how many slides fit in the container;
+    // otherwise fall back to the slidesToShow prop.
+    // Include gap in the calculation since each slide takes (slideWidth + gap) pixels
+    const computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap ?? 0)))) : slidesToShow ?? 4;
+    const visibleSlides = Math.min(computedSlidesToShow, totalSlides);
     const maxIndex = Math.max(0, totalSlides - visibleSlides);
     // Calculate slide groups for pagination
     const slideGroups = [];
@@ -272,7 +305,7 @@ export function Slideshow(properties) {
     const currentDotIndex = slideGroups.findIndex((groupStart) => currentIndex >= groupStart && currentIndex < groupStart + slidesToMove);
     // Auto-play functionality
     useEffect(() => {
-        if (isPlaying && normalizedSlides.length > slidesToShow && !isDragging) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
             intervalRef.current = setInterval(() => {
                 setCurrentIndex((prevIndex) => {
                     const nextIndex = prevIndex + slidesToMove;
@@ -299,7 +332,7 @@ export function Slideshow(properties) {
                 clearInterval(intervalRef.current);
             }
         }
-    }, [isPlaying, autoPlayInterval, normalizedSlides.length, slidesToShow, slidesToMove, loop, maxIndex, isDragging]);
+    }, [isPlaying, autoPlayInterval, normalizedSlides.length, computedSlidesToShow, slidesToMove, loop, maxIndex, isDragging]);
     // if all slides are visible, turn off touch dragging.
     if (totalSlides <= visibleSlides) {
         touchDragging = false;
@@ -328,8 +361,8 @@ export function Slideshow(properties) {
         if (!isDragging || !touchDragging)
             return;
         const diff = currentX - startX;
-        const containerWidth = trackRef.current?.parentElement?.offsetWidth || 0;
-        const slideWidthPx = containerWidth / visibleSlides;
+        const trackContainerWidth = trackRef.current?.parentElement?.offsetWidth || 0;
+        const slideWidthPx = trackContainerWidth / visibleSlides;
         const threshold = Math.min(dragThreshold, slideWidthPx * 0.3); // 30% of slide width or dragThreshold, whichever is smaller
         if (Math.abs(diff) > threshold) {
             if (diff > 0 && (loop || currentIndex > 0)) {
@@ -344,7 +377,7 @@ export function Slideshow(properties) {
         setIsDragging(false);
         setDragOffset(0);
         // Resume autoplay if it was playing
-        if (isPlaying && normalizedSlides.length > slidesToShow) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow) {
             intervalRef.current = setInterval(() => {
                 setCurrentIndex((prevIndex) => {
                     const nextIndex = prevIndex + slidesToMove;
@@ -383,7 +416,7 @@ export function Slideshow(properties) {
         }
     };
     const handleMouseLeave = () => {
-        if (isPlaying && normalizedSlides.length > slidesToShow && !isDragging) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
             intervalRef.current = setInterval(() => {
                 setCurrentIndex((prevIndex) => {
                     const nextIndex = prevIndex + slidesToMove;
@@ -481,13 +514,29 @@ export function Slideshow(properties) {
         return _jsx(_Fragment, {});
     }
     // Simplified transform calculation
-    const slidePercentage = 100 / visibleSlides; // Each visible slide takes this % of container
-    let translateX = -(currentIndex * slidePercentage);
-    // Apply drag offset
-    if (isDragging && trackRef.current) {
-        const containerWidth = trackRef.current.parentElement?.offsetWidth || 0;
-        const dragPercentage = (dragOffset / containerWidth) * 100;
-        translateX += dragPercentage;
+    let translateX;
+    let translateUnit;
+    if (slideWidth) {
+        // Fixed-width mode: translate by pixel amounts (slideWidth + gap per slide)
+        const slideStepPx = slideWidth + (gap ?? 0);
+        translateX = -(currentIndex * slideStepPx);
+        translateUnit = 'px';
+        // Apply drag offset
+        if (isDragging) {
+            translateX += dragOffset;
+        }
+    }
+    else {
+        // Percentage mode: each slide takes an equal share of the container
+        const slidePercentage = 100 / visibleSlides;
+        translateX = -(currentIndex * slidePercentage);
+        translateUnit = '%';
+        // Apply drag offset
+        if (isDragging && trackRef.current) {
+            const containerWidth = trackRef.current.parentElement?.offsetWidth || 0;
+            const dragPercentage = (dragOffset / containerWidth) * 100;
+            translateX += dragPercentage;
+        }
     }
     // Determine if navigation should be disabled
     const isPrevDisabled = !loop && currentIndex === 0;
@@ -525,8 +574,8 @@ export function Slideshow(properties) {
             // @ts-ignore - ignore
             onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsx("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), _jsx("div", { className: "ss__slideshow__container", children: _jsx("div", { ref: trackRef, className: classnames('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
-                            'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= slidesToShow,
-                        }), style: { transform: `translateX(${translateX}%)` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
+                            'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
+                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
                         // Touch events
                         // @ts-ignore - touch events
                         onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
@@ -554,7 +603,7 @@ export function Slideshow(properties) {
                         // Mouse events (for desktop dragging)
                         // @ts-ignore - mouse events
                         onMouseMove: touchDragging ? handleMouseMove : undefined, children: normalizedSlides.map((slide, index) => {
-                            const isVisible = index >= currentIndex && index < currentIndex + slidesToShow;
+                            const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;
                             const imageAlt = slide.alt || slideImageAlt || `Image ${index + 1}`;
@@ -577,7 +626,7 @@ export function Slideshow(properties) {
                                     'ss__slideshow__slide--clickable': hasClickHandler,
                                     'ss__slideshow__slide--content': hasContent,
                                 }), role: hasClickHandler ? 'button' : hasContent ? 'presentation' : 'img', "aria-hidden": !isVisible, tabIndex: hasClickHandler && isVisible ? 0 : -1, onClick: hasClickHandler ? () => handleSlideClick(slide, index) : undefined, onKeyDown: hasClickHandler ? (e) => handleSlideKeyDown(e, slide, index) : undefined, children: hasContent ? slide.content : _jsx(Image, { ...subProps.Image, src: slide.src || fallbackImage, alt: isVisible ? imageAlt : '' }) }, index));
-                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > slidesToShow)) && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: _jsx(Button, { icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled, ...mergedLang.prevButton.all, ...subProps.PrevButton, onClick: goToPrevious }) }), _jsx("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: _jsx(Button, { className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled, ...mergedLang.nextButton.all, ...subProps.NextButton, onClick: goToNext }) })] })), showPagination && totalSlides > visibleSlides && (_jsx("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map((_, index) => {
+                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > computedSlidesToShow)) && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: _jsx(Button, { icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled, ...mergedLang.prevButton.all, ...subProps.PrevButton, onClick: goToPrevious }) }), _jsx("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: _jsx(Button, { className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled, ...mergedLang.nextButton.all, ...subProps.NextButton, onClick: goToNext }) })] })), showPagination && totalSlides > visibleSlides && (_jsx("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map((_, index) => {
                         const defaultLang = {
                             paginationButton: {
                                 attributes: {

package/dist/esm/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,EAAE,MAAM,gBAAgB,CAAC;AAYtC,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA0HrD,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":"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"}

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

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Select } from '../Select';
 import { RadioList } from '../RadioList';
 import { List } from '../List';
+import { useComponent } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = () => {
     return css({
@@ -18,6 +19,7 @@ const defaultStyles = () => {
 };
 export const SortBy = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         label: 'Sort By',
@@ -25,8 +27,14 @@ export const SortBy = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('sortBy', globalTheme, defaultProps, properties);
-    const { sorting, type, controller, hideLabel, disableStyles, className, internalClassName, treePath } = props;
+    const { sorting, type, controller, hideLabel, disableStyles, className, internalClassName, treePath, customComponent } = props;
     let label = props.label;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.sortBy || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const store = sorting || controller?.store?.sorting;
     const subProps = {
         Select: {

package/dist/esm/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;AAG7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA2DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAwLjD;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":"AAIA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAI7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA2DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAiMjD;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/esm/components/src/components/Molecules/Swatches/Swatches.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import classnames from 'classnames';
 import { css } from '@emotion/react';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { useA11y, useDisplaySettings } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useA11y, useComponent, useDisplaySettings } from '../../../hooks';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Grid } from '../Grid';
 import { Image } from '../../Atoms/Image';
@@ -62,6 +62,7 @@ const defaultStyles = ({ theme }) => {
 };
 export function Swatches(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultCarouselBreakpoints = {
         0: {
@@ -103,7 +104,13 @@ export function Swatches(properties) {
             theme,
         };
     }
-    const { onSelect, disabled, options, hideLabels, disableStyles, className, internalClassName, type, slideshow, grid, treePath } = props;
+    const { onSelect, disabled, options, hideLabels, disableStyles, className, internalClassName, type, slideshow, grid, treePath, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.swatches || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const subProps = {
         slideshow: {
             // default props

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.js

@@ -322,10 +322,15 @@ const TemplateTargetSettings = observer((props) => {
     const configTarget = config[type]?.[recsType]?.[`${recsType.charAt(0).toUpperCase() + recsType.slice(1)}`] || config[type]?.targets?.[0];
     const libraryComponents = templatesStore.library.components;
     const libraryTemplates = recsType ? libraryComponents[type]?.[recsType] : libraryComponents[type];
-    const libraryResultComponents = libraryComponents?.result;
-    const DEAFULT_RESULT_COMPONENT = 'Result';
+    // const libraryResultComponents = libraryComponents?.result;
+    // const DEFAULT_RESULT_COMPONENT = 'Result';
     const activeTarget = templatesStore.getTarget(feature, configTarget.selector);
     const showTemplateReset = Boolean(activeTarget?.component) && activeTarget?.component !== configTarget?.component;
-    const showResultTemplateReset = (activeTarget?.resultComponent || DEAFULT_RESULT_COMPONENT) != (configTarget?.resultComponent || DEAFULT_RESULT_COMPONENT);
-    return (_jsxs("div", { className: "template-target-settings", children: [_jsx("h3", { children: type.charAt(0).toUpperCase() + type.slice(1) + (recsType ? ` (${recsType})` : '') }), !recsType && (_jsxs("div", { className: "option", children: [_jsx("label", { htmlFor: `${idPrefix}-target`, children: "Target" }), _jsx("div", { className: "reset" }), _jsx("div", { className: "value", children: _jsx("input", { id: `${idPrefix}-target`, type: "text", placeholder: '', disabled: true, value: configTarget.selector }) })] })), _jsx(DropdownControl, { label: 'Template', description: '', showReset: showTemplateReset, options: Object.keys(libraryTemplates), onReset: () => activeTarget?.setComponent(configTarget?.component), disabled: false, value: activeTarget?.component, onChange: (value) => activeTarget?.setComponent(`${value}`) }, `${idPrefix}-template`), _jsx(DropdownControl, { label: 'Result Template', description: '', showReset: showResultTemplateReset, options: Object.keys(libraryResultComponents), onReset: () => activeTarget?.setResultComponent(configTarget?.resultComponent || DEAFULT_RESULT_COMPONENT), disabled: false, value: activeTarget?.resultComponent, onChange: (value) => activeTarget?.setResultComponent(`${value}`) }, `${idPrefix}-result-template`)] }));
+    // const firstLetterOfComponent = configTarget.component.charAt(0).toLowerCase();
+    // const restOfComponent = configTarget.component.slice(1);
+    // const camelCaseComponent = firstLetterOfComponent + restOfComponent;
+    // const currentTargetActiveResultComponent = config?.theme?.overrides[`${camelCaseComponent} result`]?.customComponent || config?.theme?.overrides[`result`]?.customComponent || DEFAULT_RESULT_COMPONENT;
+    // const showResultTemplateReset =
+    // 	(currentTargetActiveResultComponent || DEFAULT_RESULT_COMPONENT) != (currentTargetActiveResultComponent ||DEFAULT_RESULT_COMPONENT);
+    return (_jsxs("div", { className: "template-target-settings", children: [_jsx("h3", { children: type.charAt(0).toUpperCase() + type.slice(1) + (recsType ? ` (${recsType})` : '') }), !recsType && (_jsxs("div", { className: "option", children: [_jsx("label", { htmlFor: `${idPrefix}-target`, children: "Target" }), _jsx("div", { className: "reset" }), _jsx("div", { className: "value", children: _jsx("input", { id: `${idPrefix}-target`, type: "text", placeholder: '', disabled: true, value: configTarget.selector }) })] })), _jsx(DropdownControl, { label: 'Template', description: '', showReset: showTemplateReset, options: Object.keys(libraryTemplates), onReset: () => activeTarget?.setComponent(configTarget?.component), disabled: false, value: activeTarget?.component, onChange: (value) => activeTarget?.setComponent(`${value}`) }, `${idPrefix}-template`)] }));
 });

package/dist/esm/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;AAEtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAoFnD,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":"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"}

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { createHoverProps } from '../../../toolbox';
 import { mergeProps, mergeStyles } from '../../../utilities';
-import { useLang } from '../../../hooks';
+import { useComponent, useLang } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({ vertical, theme }) => {
     return css({
@@ -63,6 +63,7 @@ const emIfyTerm = (term, search) => {
 };
 export const Terms = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         vertical: true,
@@ -70,9 +71,15 @@ export const Terms = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('terms', globalTheme, defaultProps, properties);
-    const { title, onTermClick, limit, previewOnHover, emIfy, className, internalClassName, controller } = props;
+    const { title, onTermClick, limit, previewOnHover, emIfy, className, internalClassName, controller, customComponent } = props;
     const currentInput = controller?.store?.state?.input;
     const terms = props.terms;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.terms || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     const termClickEvent = (e, term) => {
         onTermClick && onTermClick(e, term);

package/dist/esm/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;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA+KzE,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":"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"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { List } from '../List';
 import { Swatches } from '../Swatches';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { Icon } from '../../Atoms/Icon';
-import { useA11y } from '../../../hooks';
+import { useA11y, useComponent } from '../../../hooks';
 import { fieldNameToComponentName } from '@athoscommerce/snap-toolbox';
 const defaultStyles = () => {
     return css({
@@ -56,6 +56,7 @@ const dropdownContentStyles = () => {
 };
 export const VariantSelection = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
@@ -63,7 +64,13 @@ export const VariantSelection = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('variantSelection', globalTheme, defaultProps, properties);
-    const { selection, onSelect, disableStyles, className, internalClassName, treePath } = props;
+    const { selection, onSelect, disableStyles, className, internalClassName, treePath, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.variantSelection || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     let type = props.type;
     if (!type) {
         if (selection.type == 'swatch') {

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

@@ -1,7 +1,7 @@
 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, ResultComponent } from '../../../types';
+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) & {
@@ -11,6 +11,7 @@ export type AutocompleteProps = {
     lang?: Partial<AutocompleteLang>;
     controller: AutocompleteController;
     breakpoints?: BreakpointsProps;
+    resultComponent?: JSXComponent | JSX.Element;
 } & AutocompleteTemplatesLegalProps & ComponentProps<AutocompleteProps>;
 export type AutocompleteTemplatesLegalProps = {
     input: Element | string;
@@ -40,7 +41,6 @@ export type AutocompleteTemplatesLegalProps = {
     noResultsSlot?: JSX.Element | JSX.Element[];
     linkSlot?: JSX.Element | JSX.Element[];
     width?: string;
-    resultComponent?: ResultComponent;
     onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     templates?: {

package/dist/esm/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/esm/components/src/components/Organisms/Autocomplete/Autocomplete.js

@@ -11,15 +11,10 @@ import { Banner } from '../../Atoms/Banner';
 import { Facets } from '../Facets';
 import { defined, cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
 import { createHoverProps } from '../../../toolbox';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { FacetDisplay } from '../../../types';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
-import { useA11y, useLang } from '../../../hooks';
-// import { useSnap } from '../../../providers';
-// import { useComponent } from '../../../hooks';
-// import { useCreateController } from '../../../hooks/useCreateController';
-// import type { RecommendationController } from '@athoscommerce/snap-controller';
-// import type { FunctionalComponent } from 'preact';
+import { useA11y, useComponent, useLang } from '../../../hooks';
 // import type { SnapTemplates } from '../../../../../src';
 const defaultStyles = ({ hideFacets, horizontalTerms, controller, input, contentSlot, viewportMaxHeight, vertical, width, theme, }) => {
     let inputViewportOffsetBottom = 0;
@@ -166,6 +161,7 @@ const defaultStyles = ({ hideFacets, horizontalTerms, controller, input, content
 };
 export const Autocomplete = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         termsTitle: '',
@@ -178,6 +174,13 @@ export const Autocomplete = observer((properties) => {
         treePath: globalTreePath,
     };
     let props = mergeProps('autocomplete', globalTheme, defaultProps, properties);
+    const { customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.autocomplete || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const valueProps = createHoverProps();
     const facetClickEvent = (e) => {
         properties.onFacetOptionClick && properties.onFacetOptionClick(e);

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts

@@ -1,5 +1,5 @@
 import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
-import { ComponentProps, RecommendationComponentNames, ResultComponent } from '../../../types';
+import { ComponentProps, RecommendationComponentNames, JSXComponent } from '../../../types';
 import { Lang } from '../../../hooks';
 export declare const AutocompleteLayout: ((properties: AutocompleteLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
@@ -15,7 +15,7 @@ type Column = {
 };
 export type AutocompleteLayoutProps = {
     input: Element | string;
-    resultComponent?: ResultComponent;
+    resultComponent?: JSXComponent | JSX.Element;
     controller: AutocompleteController;
     lang?: Partial<AutocompleteLayoutLang>;
 } & AutocompleteLayoutTemplatesLegalProps & ComponentProps<AutocompleteLayoutProps>;

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAA4B,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AASvI,OAAO,EACN,cAAc,EAEd,4BAA4B,EAE5B,eAAe,EAEf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AA4KxD,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAokB7E,CAAC;AAcH,MAAM,MAAM,WAAW,GACpB,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,QAAQ,GACR,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,GAAG,GACH,aAAa,GACb,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AACnB,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,sBAAsB,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;AAE1F,KAAK,MAAM,GAAG;IACb,MAAM,EAAE,WAAW,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CACvC,GAAG,qCAAqC,GACxC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,MAAM,CAAC,EAAE,sBAAsB,EAAE,GAAG,eAAe,CAAC;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE;QACX,cAAc,CAAC,EAAE;YAChB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;YACzC,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;SACjD,CAAC;KACF,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACtC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH"}
+{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAA4B,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AASvI,OAAO,EAAE,cAAc,EAAgB,4BAA4B,EAA6C,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrJ,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AA4KxD,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAokB7E,CAAC;AAcH,MAAM,MAAM,WAAW,GACpB,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,QAAQ,GACR,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,GAAG,GACH,aAAa,GACb,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AACnB,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,sBAAsB,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;AAE1F,KAAK,MAAM,GAAG;IACb,MAAM,EAAE,WAAW,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CACvC,GAAG,qCAAqC,GACxC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,MAAM,CAAC,EAAE,sBAAsB,EAAE,GAAG,eAAe,CAAC;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE;QACX,cAAc,CAAC,EAAE;YAChB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;YACzC,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;SACjD,CAAC;KACF,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACtC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.js

@@ -12,7 +12,7 @@ import { Facets } from '../Facets';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { createHoverProps } from '../../../toolbox';
 import { useTheme, CacheProvider } from '../../../providers';
-import { FacetDisplay, } from '../../../types';
+import { FacetDisplay } from '../../../types';
 import { useA11y, useLang } from '../../../hooks';
 import { TermsList } from '../TermsList';
 import { Terms } from '../../Molecules/Terms';
@@ -437,7 +437,7 @@ export const AutocompleteLayout = observer((properties) => {
     let RecommendationTemplateResultComponent;
     const noresults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     if (templates?.recommendation?.enabled && noresults) {
-        const recs = createRecommendationTemplate(templates, properties.theme);
+        const recs = createRecommendationTemplate(templates);
         RecommendationTemplateComponent = recs.RecommendationTemplateComponent;
         RecommendationTemplateResultComponent = recs.RecommendationTemplateResultComponent;
         recsController = recs.recsController;

package/dist/esm/components/src/components/Organisms/BranchOverride/BranchOverride.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,MAAM,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,GAAG,EAAE;QACJ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,MAAM,EAAE;YACP,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;SACb,CAAC;KACF,CAAC;IACF,MAAM,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,UAAU,EAAE;YACX,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;KACF,CAAC;CACF,CAAC;AAuMF,eAAO,MAAM,cAAc,eAAgB,mBAAmB,4DA0G7D,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAM7D,MAAM,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,GAAG,EAAE;QACJ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,MAAM,EAAE;YACP,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;SACb,CAAC;KACF,CAAC;IACF,MAAM,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,UAAU,EAAE;YACX,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;KACF,CAAC;CACF,CAAC;AAuMF,eAAO,MAAM,cAAc,eAAgB,mBAAmB,4DAkH7D,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/esm/components/src/components/Organisms/BranchOverride/BranchOverride.js

@@ -4,7 +4,8 @@ import classnames from 'classnames';
 import { useState } from 'preact/hooks';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
-import { useTheme, useTreePath } from '../../../providers';
+import { useTheme, useTreePath, useSnap } from '../../../providers';
+import { useComponent } from '../../../hooks';
 // TODO: We want to avoid passing non-component props here. This may require some refactoring of this component.
 const defaultStyles = ({ componentTheme }) => {
     return css({
@@ -199,12 +200,19 @@ const componentThemes = {
 };
 export const BranchOverride = (properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
     };
     const props = mergeProps('branchOverride', globalTheme, defaultProps, properties);
-    const { branch, details, error, className, internalClassName, darkMode, disableStyles, onRemoveClick, treePath } = props;
+    const { branch, details, error, className, internalClassName, darkMode, disableStyles, onRemoveClick, treePath, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.branchOverride || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const subProps = {
         icon: {
             // default props

package/dist/esm/components/src/components/Organisms/Facet/Facet.d.ts.map

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