@athoscommerce/snap-preact 1.7.1-beta.133 → 1.9.0

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

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/reac
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { mergeProps, mergeStyles, defined } from '../../../utilities';
 import { Image } from '../../Atoms/Image';
@@ -141,7 +142,7 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
         },
     });
 };
-export function Slideshow(properties) {
+export const Slideshow = observer((properties) => {
     const globalTheme = useTheme();
     const globalTreePath = useTreePath();
     const defaultProps = {
@@ -575,7 +576,7 @@ export function Slideshow(properties) {
                         }), 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].clientX) : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {
@@ -590,10 +591,6 @@ export function Slideshow(properties) {
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
                             ? (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);
                             }
@@ -647,4 +644,4 @@ export function Slideshow(properties) {
                                 'ss__slideshow__dot--active': selected,
                             }), onClick: () => goToSlide(index), "aria-selected": selected, ...paginationLangObj.paginationButton.all, ...subpropsToUse, children: _jsx("span", { className: 'ss__slideshow__dot-inner' }) }, index));
                     }) })), autoPlay && (_jsx(Button, { className: "ss__slideshow__sr-only", ...subProps.PauseButton, onClick: togglePlayPause, ...mergedLang.pauseButton.all }))] }) }));
-}
+});

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

@@ -2,7 +2,9 @@ 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 | h.JSX.Element | null;
+export declare const Swatches: ((properties: SwatchesProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
 export type SwatchesProps = {
     breakpoints?: BreakpointsProps;
 } & SwatchesTemplatesLegalProps & ComponentProps<SwatchesProps>;

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":"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"}
+{"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;AAO1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA6DzE,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkMzD,CAAC;AAEH,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

@@ -6,6 +6,7 @@ import { useA11y, useDisplaySettings, useCustomComponentOverride } from '../../.
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Grid } from '../Grid';
 import { Image } from '../../Atoms/Image';
+import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
 import { filters } from '@athoscommerce/snap-toolbox';
 import { colord, extend } from 'colord';
@@ -62,7 +63,7 @@ const defaultStyles = ({ theme }) => {
         },
     });
 };
-export function Swatches(properties) {
+export const Swatches = observer((properties) => {
     const globalTheme = useTheme();
     const globalTreePath = useTreePath();
     const defaultCarouselBreakpoints = {
@@ -202,4 +203,4 @@ export function Swatches(properties) {
     return typeof options == 'object' && options?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__swatches', className, internalClassName), children: type == 'slideshow' ? (_jsx(Slideshow, { slides: slidesArray, ...subProps.slideshow })) : (_jsx(Grid, { ...subProps.grid, options: options, onSelect: (e, option) => {
                     !disabled && makeSelection(e, option);
                 }, selected: selected })) }) })) : null;
-}
+});

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

@@ -430,7 +430,7 @@ export const Facet = observer((properties) => {
                 ? ''
                 : 'ss__facet--showing-all'), children: justContent ? (_jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang })) : (_jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: () => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), disableA11y: true, button: _jsxs("div", { className: "ss__facet__header", ref: (e) => useA11y(e, disableCollapse ? -1 : 0), role: "heading", "aria-level": 3, ...mergedLang.dropdownButton.attributes, children: [_jsxs("span", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
                                         e.stopPropagation();
-                                        facet?.clear.url?.link.onClick();
+                                        facet?.clear.url.link.onClick();
                                     }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), !disableCollapse && (_jsx(Icon, { ...subProps.icon, ...(facet?.collapsed
                                 ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
                                 : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }), name: facet?.collapsed ? 'expand' : 'collapse' }))] }), children: _jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang }) })) }) })) : null;

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

@@ -19,10 +19,11 @@ export type FacetsHorizontalTemplatesLegalProps = {
     showClearAllText?: boolean;
     clearAllIcon?: IconType | Partial<IconProps>;
     limit?: number;
-    alwaysShowFiltersButton?: boolean;
-    hideFiltersButton?: boolean;
+    alwaysShowToggleSidebarButton?: boolean;
+    hideToggleSidebarButton?: boolean;
     iconCollapse?: IconType | Partial<IconProps>;
     iconExpand?: IconType | Partial<IconProps>;
+    toggleSidebarButtonText?: string;
     onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
 };
 export interface FacetsHorizontalLang {
@@ -30,5 +31,9 @@ export interface FacetsHorizontalLang {
         selectedFacet: IndividualFacetType;
         facet: IndividualFacetType;
     }>;
+    toggleSidebarButtonText?: Lang<{
+        facets: IndividualFacetType[];
+        sidebarOpenState: boolean;
+    }>;
 }
 //# sourceMappingURL=FacetsHorizontal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FacetsHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAE5F,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmF7D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA8PzE,CAAC;AAUH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAE7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,mBAAmB,CAAC;QACnC,KAAK,EAAE,mBAAmB,CAAC;KAC3B,CAAC,CAAC;CACH"}
+{"version":3,"file":"FacetsHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAE5F,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiF7D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAmTzE,CAAC;AAYH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAE7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,mBAAmB,CAAC;QACnC,KAAK,EAAE,mBAAmB,CAAC;KAC3B,CAAC,CAAC;IACH,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7F"}

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

@@ -7,11 +7,12 @@ import deepmerge from 'deepmerge';
 import { Facet } from '../Facet';
 import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
-import { MobileSidebar } from '../MobileSidebar';
 import { useClickOutside, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { Icon } from '../../Atoms/Icon';
 import { Button } from '../../Atoms/Button';
+import { Slideout } from '../../Molecules/Slideout';
+import { Sidebar } from '../Sidebar';
 const defaultStyles = ({ theme }) => {
     return css({
         margin: '10px 0px',
@@ -19,9 +20,6 @@ const defaultStyles = ({ theme }) => {
             display: 'flex',
             flexWrap: 'wrap',
             gap: '10px',
-            '& .ss__mobile-sidebar': {
-                margin: '0 10px',
-            },
             '& .ss__facet__header__inner': {
                 display: 'flex',
             },
@@ -91,11 +89,12 @@ export const FacetsHorizontal = observer((properties) => {
         iconCollapse: 'angle-down',
         iconExpand: 'angle-up',
         clearAllText: 'Clear All',
+        toggleSidebarButtonText: 'Filters',
         facets: properties.controller?.store?.facets,
         treePath: globalTreePath,
     };
     let props = mergeProps('facetsHorizontal', globalTheme, defaultProps, properties);
-    const { facets, limit, alwaysShowFiltersButton, hideFiltersButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, disableStyles, className, internalClassName, controller, treePath, } = props;
+    const { facets, limit, alwaysShowToggleSidebarButton, hideToggleSidebarButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, toggleSidebarButtonText, disableStyles, className, internalClassName, controller, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('facetsHorizontal', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -136,6 +135,7 @@ export const FacetsHorizontal = observer((properties) => {
             facetsToShow = [];
         }
     }
+    const [sidebarOpenState, setSidebarOpenState] = useState(false);
     const subProps = {
         dropdown: {
             // default props
@@ -176,7 +176,7 @@ export const FacetsHorizontal = observer((properties) => {
             internalClassName: `ss__facets-horizontal__content__facet`,
             justContent: true,
             // this should be turned on if there is ever a filters button rendering.
-            statefulOverflow: !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) ? true : undefined,
+            statefulOverflow: !hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton) ? true : undefined,
             // inherited props
             ...defined({
                 disableStyles,
@@ -185,9 +185,30 @@ export const FacetsHorizontal = observer((properties) => {
             theme: props?.theme,
             treePath: `${treePath} dropdown`,
         },
-        MobileSidebar: {
+        slideout: {
             // default props
-            internalClassName: 'ss__facets-horizontal__header__mobile-sidebar',
+            internalClassName: 'ss__facets-horizontal__slideout',
+            onChange: (active) => setSidebarOpenState(active),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        sidebar: {
+            // default props
+            internalClassName: 'ss__facets-horizontal__sidebar',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        toggleSidebarButton: {
             // inherited props
             ...defined({
                 disableStyles,
@@ -202,41 +223,54 @@ export const FacetsHorizontal = observer((properties) => {
     const innerRef = useClickOutside(() => {
         selectedFacet && setSelectedFacet(undefined);
     });
+    //initialize lang
+    const defaultLang = {
+        toggleSidebarButtonText: {
+            value: toggleSidebarButtonText,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, { facets: facets, sidebarOpenState: sidebarOpenState });
+    const ToggleSidebarButton = ({ sidebarOpenState, setSidebarOpenState, subProps }) => {
+        return (_jsx(Button, { ...subProps.toggleSidebarButton, internalClassName: "ss__facets-horizontal__header__toggle-sidebar", onClick: () => setSidebarOpenState(!sidebarOpenState), children: _jsx("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
+    };
+    const renderSidebar = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
     //todo investigate keyboard navigation here when overlay prop is true/false
-    return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: _jsxs("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
-                        const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
-                            facet?.active?.high !== facet?.range?.high ||
-                            facet?.active?.low !== facet?.range?.low;
-                        //initialize lang
-                        const defaultLang = {
-                            dropdownButton: {
-                                attributes: {
-                                    'aria-label': `currently ${selectedFacet?.field === facet.field ? 'open' : 'collapsed'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}`,
+    return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: [_jsxs("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
+                            const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
+                                facet?.active?.high !== facet?.range?.high ||
+                                facet?.active?.low !== facet?.range?.low;
+                            //initialize lang
+                            const defaultLang = {
+                                dropdownButton: {
+                                    attributes: {
+                                        'aria-label': `currently ${selectedFacet?.field === facet.field ? 'open' : 'collapsed'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}`,
+                                    },
+                                },
+                                clearAllText: {
+                                    value: clearAllText,
                                 },
-                            },
-                            clearAllText: {
-                                value: clearAllText,
-                            },
-                        };
-                        //deep merge with props.lang
-                        const lang = deepmerge(defaultLang, props.lang || {});
-                        const mergedLang = useLang(lang, {
-                            selectedFacet,
-                            facet,
-                        });
-                        return (_jsx(Dropdown, { ...subProps.dropdown, internalClassName: classnames(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
-                                // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
-                                if (selectedFacet !== facet && e.code !== 'Escape') {
-                                    setSelectedFacet(facet);
-                                }
-                                else {
-                                    setSelectedFacet(undefined);
-                                }
-                            }, button: _jsxs("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [_jsxs("div", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    facet?.clear.url?.link.onClick();
-                                                }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
-                                            ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
-                                            : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
-                    }), !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) && (_jsx(MobileSidebar, { controller: controller, ...subProps.MobileSidebar }))] }) }) })) : null;
+                            };
+                            //deep merge with props.lang
+                            const lang = deepmerge(defaultLang, props.lang || {});
+                            const mergedLang = useLang(lang, {
+                                selectedFacet,
+                                facet,
+                            });
+                            return (_jsx(Dropdown, { ...subProps.dropdown, internalClassName: classnames(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
+                                    // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
+                                    if (selectedFacet !== facet && e.code !== 'Escape') {
+                                        setSelectedFacet(facet);
+                                    }
+                                    else {
+                                        setSelectedFacet(undefined);
+                                    }
+                                }, button: _jsxs("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [_jsxs("div", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        facet?.clear.url.link.onClick();
+                                                    }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
+                                                ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
+                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
+                        }), renderSidebar && _jsx(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps })] }), renderSidebar && (_jsx(Slideout, { ...subProps.slideout, active: sidebarOpenState, children: _jsx(Sidebar, { ...subProps.sidebar, controller: controller }) }))] }) })) : null;
 });

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

@@ -9,5 +9,5 @@ export interface LayoutProps extends ComponentProps {
     layout: (ModuleNames | ModuleNames[])[];
     toggleSideBarButton?: Partial<ButtonProps>;
 }
-export type ModuleNames = 'searchHeader' | 'filterSummary' | 'mobileSidebar' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facets' | 'facetsHorizontal' | 'banner.left';
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facets' | 'facetsHorizontal' | 'banner.left';
 //# sourceMappingURL=Layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Layout/Layout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAOvE,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAiCzD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAkSrD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,WAAW,GAEpB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GAEf,QAAQ,GACR,kBAAkB,GAClB,aAAa,CAAC"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Layout/Layout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAMvE,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAiCzD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiRrD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,WAAW,GAEpB,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GAEf,QAAQ,GACR,kBAAkB,GAClB,aAAa,CAAC"}

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

@@ -10,7 +10,6 @@ import { LoadMore } from '../../Molecules/LoadMore';
 import { SortBy } from '../../Molecules/SortBy';
 import { PerPage } from '../../Molecules/PerPage';
 import { LayoutSelector } from '../../Molecules/LayoutSelector';
-import { MobileSidebar } from '../MobileSidebar';
 import { PaginationInfo } from '../../Atoms/PaginationInfo/PaginationInfo';
 import { SearchHeader } from '../../Atoms/SearchHeader/SearchHeader';
 import { Button } from '../../Atoms/Button';
@@ -55,17 +54,6 @@ export const Layout = observer((properties) => {
     delete props.treePath;
     const styling = mergeStyles(props, defaultStyles);
     const subProps = {
-        MobileSidebar: {
-            // default props
-            controller,
-            // inherited props
-            ...defined({
-                disableStyles,
-            }),
-            // component theme overrides
-            theme: props?.theme,
-            treePath: properties.treePath,
-        },
         Banner: {
             // default props
             controller,
@@ -217,11 +205,6 @@ export const Layout = observer((properties) => {
     const hasResults = controller.store.pagination.totalResults > 0;
     function renderModule(module) {
         switch (module) {
-            case 'mobileSidebar':
-                if (hasResults) {
-                    return _jsx(MobileSidebar, { controller: controller, ...subProps.MobileSidebar });
-                }
-                break;
             case 'searchHeader':
                 return _jsx(SearchHeader, { ...subProps.SearchHeader });
             case 'filterSummary':
@@ -251,7 +234,7 @@ export const Layout = observer((properties) => {
                 break;
             case 'button.sidebar-toggle':
                 if (hasResults) {
-                    return (ToggleSideBarButton && (_jsx("div", { className: "ss__button--sidebar-toggle-button-wrapper", children: _jsx(Button, { ...subProps.ToggleSideBarButton }) })));
+                    return (ToggleSideBarButton && (_jsx("div", { className: "ss__layout__sidebar-toggle-button-wrapper", children: _jsx(Button, { ...subProps.ToggleSideBarButton }) })));
                 }
                 break;
             case 'pagination':

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

@@ -1 +1 @@
-{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,gCAAgC,CAAC;AAIzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4C5G,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAsIvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACtD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;CACpD,CAAC"}
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,gCAAgC,CAAC;AAIzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4C5G,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAiJvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACtD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;CACpD,CAAC"}

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

@@ -19,7 +19,7 @@ const defaultStyles = ({ gapSize, columns }) => {
         flexFlow: 'row wrap',
         gap: gapSize,
         gridTemplateRows: 'auto',
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
         '& .ss__result, & .ss__result-layout': {
             boxSizing: 'border-box',
             flex: '0 1 auto',
@@ -122,6 +122,16 @@ export const Results = observer((properties) => {
         results = results?.slice(0, props.columns * props.rows);
     }
     const styling = mergeStyles({ ...props, columns: layout == ResultsLayout.list ? 1 : props.columns }, defaultStyles);
+    // Precompute merged theme for named result components to avoid repeated deepmerge in the loop
+    const mergedResultComponentTheme = isNamedResultComponent
+        ? deepmerge(theme || {}, {
+            components: {
+                result: {
+                    customComponent: resultComponent,
+                },
+            },
+        })
+        : theme;
     return results?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className, internalClassName), children: results.map((result) => (() => {
                 switch (result.type) {
                     case ContentType.BANNER:
@@ -135,7 +145,7 @@ export const Results = observer((properties) => {
                                     key: result.id,
                                     controller,
                                     result: result,
-                                    theme,
+                                    theme: mergedResultComponentTheme,
                                     treePath,
                                 }) }));
                         }

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

@@ -13,6 +13,6 @@ export type ToolbarTemplatesLegalProps = {
     layout?: (ModuleNames | ModuleNames[])[];
     toggleSideBarButton?: Partial<ButtonProps>;
 };
-export type ModuleNames = 'searchHeader' | 'filterSummary' | 'mobileSidebar' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facetsHorizontal';
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facetsHorizontal';
 export type ToolbarNames = 'top' | 'middle' | 'bottom';
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMjD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA8CvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC;CACpB,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,WAAW,GACpB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GACf,kBAAkB,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMjD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA8CvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC;CACpB,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,WAAW,GACpB,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GACf,kBAAkB,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC"}

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

@@ -14,7 +14,7 @@ export const Toolbar = observer((properties) => {
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
-        layout: ['mobileSidebar', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
+        layout: ['button.sidebar-toggle', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
     };
     const props = mergeProps('toolbar', globalTheme, defaultProps, properties);
     const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout } = props;
@@ -26,10 +26,10 @@ export const Toolbar = observer((properties) => {
     const subProps = {
         Layout: {
             // default props
-            toggleSideBarButton,
             internalClassName: 'ss__toolbar__layout',
             // inherited props
             ...defined({
+                toggleSideBarButton,
                 disableStyles,
             }),
             // component theme overrides

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
-export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 interface inputBounds {

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA+CxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA0N3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA+CxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAmN3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,qCAAqC,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -138,9 +138,6 @@ export const AutocompleteFixed = observer((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...defined({
@@ -214,5 +211,5 @@ export const AutocompleteFixed = observer((properties) => {
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return (_jsx(_Fragment, { children: layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-fixed', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-fixed__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` }) })] }) }) }) })) : null }));
+    return layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-fixed', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-fixed__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` }) })] }) }) }) })) : null;
 });

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
-export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export type AutocompleteModalProps = {

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA4DxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAqK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA4DxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA8J3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,qCAAqC,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -149,9 +149,6 @@ export const AutocompleteModal = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...defined({
@@ -183,5 +180,5 @@ export const AutocompleteModal = observer((properties) => {
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return (_jsx(_Fragment, { children: layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-modal', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-modal__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` })] }) }) }) })) : null }));
+    return layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-modal', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-modal__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` })] }) }) }) })) : null;
 });

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts

@@ -2,7 +2,7 @@ import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
 import { SlideDirectionType } from '../../Molecules/Slideout';
-export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export type AutocompleteSlideoutProps = {

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA6JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CAsJjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,qCAAqC,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.js

@@ -100,9 +100,6 @@ export const AutocompleteSlideout = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             // inherited props
             ...defined({
                 disableStyles,
@@ -137,5 +134,5 @@ export const AutocompleteSlideout = observer((properties) => {
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
     /***************************************/
-    return (_jsx(_Fragment, { children: layout?.length ? (_jsx(CacheProvider, { children: _jsx(Slideout, { ...styling, ...subProps.slideout, className: classNames('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: _jsxs("div", { className: "ss__autocomplete-slideout__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} slideout` })] }) }) })) : null }));
+    return layout?.length ? (_jsx(CacheProvider, { children: _jsx(Slideout, { ...styling, ...subProps.slideout, className: classNames('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: _jsxs("div", { className: "ss__autocomplete-slideout__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} slideout` })] }) }) })) : null;
 });

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAa/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA8MrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,IAAI,CAAC,iCAAiC,EAAE,iBAAiB,CAAC,GAC7D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAa/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAwNrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,IAAI,CAAC,iCAAiC,EAAE,iBAAiB,CAAC,GAC7D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.js

@@ -123,6 +123,16 @@ export const Recommendation = observer((properties) => {
                                             controller,
                                             result,
                                             treePath: subProps.result.treePath,
+                                            theme: isNamedResultComponent
+                                                ? deepmerge(props.theme || {}, {
+                                                    components: {
+                                                        // in order to preserve theme overrides for resultComponent vs. customComponent
+                                                        result: {
+                                                            customComponent: resultComponent,
+                                                        },
+                                                    },
+                                                })
+                                                : props.theme,
                                         });
                                     }
                                     else {