@athoscommerce/snap-preact 1.10.1-beta.150 → 1.12.0

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useEffect, useLayoutEffect } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
@@ -69,24 +69,28 @@ export const Slideout = observer((properties) => {
     // state
     const [isActive, setActive] = useState(Boolean(active));
     const [renderContent, setRenderContent] = useState(Boolean(active));
-    const isActiveRef = useRef(isActive);
-    isActiveRef.current = isActive;
-    const toggleActive = (force) => {
-        const next = typeof force === 'boolean' ? force : !isActiveRef.current;
-        setActive(next);
-        if (next) {
-            setRenderContent(true);
+    const toggleActive = () => {
+        const newActive = !isActive;
+        if (isActive) {
+            setActive(false);
+            if (rerender) {
+                setTimeout(() => {
+                    setRenderContent(false);
+                }, 250);
+            }
         }
-        else if (rerender) {
-            setTimeout(() => {
-                setRenderContent(false);
-            }, 250);
+        else {
+            setActive(true);
+            setRenderContent(true);
         }
-        document.body.style.overflow = next ? 'hidden' : '';
-        onChange && onChange(next);
+        document.body.style.overflow = newActive ? 'hidden' : '';
+        onChange && onChange(newActive);
     };
-    //this is used to update active state if active prop is changed from parent component.
-    useEffect(() => {
+    // Sync internal state when the active prop changes from the parent component. This is a
+    // layout effect so the content commit is scheduled before consumers' passive effects run —
+    // a plain effect would mount the content one tick later, after a parent that opened the
+    // slideout has already tried (and failed) to move focus into it.
+    useLayoutEffect(() => {
         setRenderContent(Boolean(active));
         setActive(Boolean(active));
     }, [active]);
@@ -96,16 +100,19 @@ export const Slideout = observer((properties) => {
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
     const styling = mergeStyles(props, defaultStyles);
     useEffect(() => {
-        if (!buttonSelector)
-            return;
-        // string selectors bind to every matching element
-        const targets = typeof buttonSelector == 'string' ? Array.from(document.querySelectorAll(buttonSelector)) : [buttonSelector];
-        const handler = () => toggleActive();
-        targets.forEach((target) => target.addEventListener('click', handler));
-        return () => {
-            targets.forEach((target) => target.removeEventListener('click', handler));
-        };
-    }, [buttonSelector]);
+        if (buttonSelector) {
+            let button;
+            if (typeof buttonSelector == 'string') {
+                button = document.querySelector(buttonSelector);
+            }
+            else {
+                button = buttonSelector;
+            }
+            if (button) {
+                button.addEventListener('click', () => toggleActive());
+            }
+        }
+    }, []);
     return isVisible || !rerender ? (_jsxs(CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: () => toggleActive(false) })] })) : null;
+                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
 });

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

@@ -58,6 +58,7 @@ export type SlideshowTemplatesLegalProps = {
     slidesToShow?: number;
     slideWidth?: number;
     slidesToMove?: number;
+    startIndex?: number;
     gap?: number;
     slideImageAlt?: string;
     ariaLabel?: string;

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

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

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

@@ -9,6 +9,8 @@ import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
 import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
+// Pointer travel (px) past which a press is treated as a drag rather than a click.
+const DRAG_CLICK_THRESHOLD = 5;
 const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return css({
         position: 'relative',
@@ -155,13 +157,14 @@ export const Slideshow = observer((properties) => {
         centerInsufficientSlides: true,
         slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
+        startIndex: 0,
         gap: 10,
         ariaLabel: 'slideshow',
         touchDragging: true,
         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, slideWidth, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, startIndex, gap, treePath, overlayNavigation, dragThreshold, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -236,12 +239,17 @@ export const Slideshow = observer((properties) => {
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    const [currentIndex, setCurrentIndex] = useState(0);
+    const [currentIndex, setCurrentIndex] = useState(startIndex ?? 0);
     const [isPlaying, setIsPlaying] = useState(autoPlay);
     const [containerWidth, setContainerWidth] = useState(0);
     const intervalRef = useRef(null);
     const slideshowRef = useRef(null);
     const trackRef = useRef(null);
+    // Tracks whether the pointer moved during the current press. The browser fires a `click`
+    // after a drag's `mouseup`, by which point `isDragging` state has already been reset — so a
+    // swipe would otherwise be treated as a click (e.g. opening a lightbox). This synchronous ref
+    // lets `handleSlideClick` suppress that trailing click.
+    const hasDraggedRef = useRef(false);
     // Track container width for slideWidth-based visible slide calculation
     useEffect(() => {
         const container = trackRef.current?.parentElement;
@@ -294,6 +302,23 @@ export const Slideshow = observer((properties) => {
     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);
+    // Navigate to startIndex when it changes (e.g. a consumer syncing the active slide to external
+    // state), clamped to the valid range. Updates the index in place rather than remounting.
+    // maxIndex must be a dependency: in slideWidth mode it is derived from the slidesToShow
+    // fallback until the container is measured (after the first render), so the mount-time clamp
+    // can land short and needs to re-run when the real value arrives. But once the requested
+    // startIndex has been satisfied the effect must go inert, or every resize that shifts
+    // maxIndex would yank the shopper back to startIndex mid-navigation.
+    const appliedStartIndexRef = useRef(undefined);
+    useEffect(() => {
+        const target = Math.max(0, startIndex ?? 0);
+        if (appliedStartIndexRef.current === target)
+            return;
+        setCurrentIndex(Math.min(target, maxIndex));
+        if (target <= maxIndex) {
+            appliedStartIndexRef.current = target;
+        }
+    }, [startIndex, maxIndex]);
     // Calculate slide groups for pagination
     const slideGroups = [];
     for (let i = 0; i <= maxIndex; i += slidesToMove) {
@@ -339,6 +364,7 @@ export const Slideshow = observer((properties) => {
     const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
+        hasDraggedRef.current = false;
         setIsPlaying(false);
         setIsDragging(true);
         setStartX(clientX);
@@ -353,6 +379,11 @@ export const Slideshow = observer((properties) => {
             return;
         setCurrentX(clientX);
         const diff = clientX - startX;
+        // Past a few pixels of travel this is a drag, not a click — flag it so the trailing
+        // click (fired after mouseup/touchend) doesn't trigger slide onClick handlers.
+        if (Math.abs(diff) > DRAG_CLICK_THRESHOLD) {
+            hasDraggedRef.current = true;
+        }
         setDragOffset(diff);
     };
     const handleDragEnd = () => {
@@ -434,7 +465,7 @@ export const Slideshow = observer((properties) => {
     };
     // Handle image click
     const handleSlideClick = (slide, index) => {
-        if (slide.onClick && !isDragging) {
+        if (slide.onClick && !isDragging && !hasDraggedRef.current) {
             slide.onClick(slide, index);
         }
     };
@@ -442,7 +473,9 @@ export const Slideshow = observer((properties) => {
     const handleSlideKeyDown = (event, slide, index) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            handleSlideClick(slide, index);
+            if (slide.onClick && !isDragging) {
+                slide.onClick(slide, index);
+            }
         }
     };
     // Keyboard navigation
@@ -591,10 +624,6 @@ export const Slideshow = observer((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);
                             }

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

@@ -116,7 +116,7 @@ export const Swatches = observer((properties) => {
             // default props
             internalClassName: 'ss__swatches__slideshow',
             loop: false,
-            slidesToShow: 6, // Add explicit slidesToShow
+            slideWidth: 20, // Fixed swatch size so previews stay a consistent, legible size regardless of container width
             slidesToMove: 1, // Add explicit slidesToMove
             gap: 8, // Add smaller gap
             showNavigation: true, // Enable navigation

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

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+import type { TabManagerStore, Tab } from '../../../../../src/Templates/Stores/TabManagerStore';
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+import { LangAttributes } from '../../../hooks/useLang';
+export declare const TabSelection: ((properties: TabSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type TabSelectionProps = {
+    lang?: Partial<TabSelectionLang>;
+    tabManager?: TabManagerStore;
+} & TabSelectionTemplatesLegalProps & ComponentProps<TabSelectionProps>;
+export type TabSelectionTemplatesLegalProps = {
+    titleText?: string;
+    showResultCount?: boolean;
+    enableEmptyTabs?: boolean;
+    onTabClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, tab: Tab) => void;
+};
+export interface TabSelectionLang {
+    title?: Lang<{
+        tabManager: TabManagerStore;
+    }>;
+    tabList?: LangAttributes<{
+        tabManager: TabManagerStore;
+    }>;
+    tabButton?: Lang<{
+        tab: Tab;
+        resultCount?: number;
+        active: boolean;
+    }>;
+}
+//# sourceMappingURL=TabSelection.d.ts.map

package/dist/esm/components/src/components/Molecules/TabSelection/TabSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TabSelection/TabSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,qDAAqD,CAAC;AAChG,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAwBxD,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA6GjE,CAAC;AAMH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9E,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;QAAE,UAAU,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,cAAc,CAAC;QAAE,UAAU,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,IAAI,CAAC;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACtE"}

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+const defaultStyles = () => {
+    return css({
+        '.ss__tab-selection__title': {
+            textAlign: 'center',
+        },
+        '.ss__tab-selection__tabs': {
+            display: 'flex',
+            gap: '10px',
+            textAlign: 'center',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+        },
+        '.ss__tab-selection__button--active': {
+            fontWeight: 'bold',
+        },
+        '.ss__tab-selection__button__count': {
+            marginLeft: '5px',
+        },
+    });
+};
+export const TabSelection = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        showResultCount: true,
+        enableEmptyTabs: false,
+    };
+    const props = mergeProps('tabSelection', globalTheme, defaultProps, properties);
+    const { tabManager, titleText, showResultCount, enableEmptyTabs, onTabClick, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('tabSelection', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    if (!tabManager || !tabManager.tabs?.length) {
+        return null;
+    }
+    const subProps = {
+        button: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+    };
+    function getResultCount(controller) {
+        const store = controller.store;
+        return store?.loaded ? store.pagination?.totalResults : undefined;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        title: {
+            value: titleText,
+        },
+        tabList: {
+            attributes: {
+                'aria-label': 'Result tabs',
+            },
+        },
+    };
+    //deep merge with props.lang - scoped per key, each is resolved against different data
+    const langs = deepmerge(defaultLang, { title: props.lang?.title || {}, tabList: props.lang?.tabList || {} });
+    const mergedLang = useLang(langs, { tabManager }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__tab-selection', className, internalClassName), children: [titleText || props.lang?.title?.value ? _jsx("h4", { className: "ss__tab-selection__title", ...mergedLang.title?.all }) : null, _jsx("div", { className: "ss__tab-selection__tabs", role: "tablist", ...mergedLang.tabList?.attributes, children: tabManager.tabs.map((tab) => {
+                        const active = tabManager.active?.id === tab.id;
+                        const resultCount = getResultCount(tab.controller);
+                        const disabled = !enableEmptyTabs && !active && resultCount === 0;
+                        const label = tab.label || tab.id;
+                        const displayedCount = showResultCount ? resultCount : undefined;
+                        const defaultTabLang = {
+                            tabButton: {
+                                value: label,
+                                attributes: {
+                                    'aria-label': typeof displayedCount == 'number' ? `${label}, ${displayedCount} results` : label,
+                                },
+                            },
+                        };
+                        const tabLangs = deepmerge(defaultTabLang, { tabButton: props.lang?.tabButton || {} });
+                        const tabLang = useLang(tabLangs, { tab, resultCount, active }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                        return (_jsxs(Button, { ...subProps.button, internalClassName: classnames('ss__tab-selection__button', `ss__tab-selection__button--${tab.id}`, {
+                                'ss__tab-selection__button--active': active,
+                            }), disabled: disabled, 
+                            // @ts-ignore - role and aria-selected are valid props for Button, but not defined in ButtonProps
+                            role: "tab", "aria-selected": active, ...tabLang.tabButton?.attributes, onClick: (e) => {
+                                onTabClick && onTabClick(e, tab);
+                                tabManager.setActive(tab.id);
+                            }, children: [_jsx("span", { className: "ss__tab-selection__button__label", ...tabLang.tabButton?.value }), typeof displayedCount == 'number' ? _jsxs("span", { className: "ss__tab-selection__button__count", children: ["(", displayedCount, ")"] }) : null] }, tab.id));
+                    }) })] }) }));
+});

package/dist/esm/components/src/components/Molecules/TabSelection/index.d.ts

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

package/dist/esm/components/src/components/Molecules/TabSelection/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/TabSelection/index.js

@@ -0,0 +1 @@
+export * from './TabSelection';

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAoIvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}
+{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAwIvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}

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

@@ -319,5 +319,5 @@ export const TemplatesEditor = observer((properties) => {
                                 return (_jsx("div", { className: classnames('tab', { active: editorStore.storedState.activeTab === tab }), onClick: () => {
                                         editorStore.switchTabs(tab);
                                     }, children: tab }, i));
-                            }) }), _jsxs("div", { className: "tab-view", children: [_jsx("div", { className: "tab-view-shadow" }), _jsxs("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.controllers.search, feature: "controllers/search" }), _jsx("h1", { children: "Autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.controllers.autocomplete, feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? (_jsxs(_Fragment, { children: [_jsx(AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), _jsx(AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), _jsx("div", { className: "tab-view-shadow bottom" })] })] }), _jsx("footer", {})] }) }));
+                            }) }), _jsxs("div", { className: "tab-view", children: [_jsx("div", { className: "tab-view-shadow" }), _jsxs("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('search'), feature: "controllers/search" }), _jsx("h1", { children: "Autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('autocomplete'), feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? (_jsxs(_Fragment, { children: [_jsx(AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), _jsx(AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), _jsx("div", { className: "tab-view-shadow bottom" })] })] }), _jsx("footer", {})] }) }));
 });

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

@@ -148,7 +148,13 @@ export const VariantSelection = observer((properties) => {
                         'ss__variant-selection__option--selected': selected,
                         'ss__variant-selection__option--disabled': val.disabled,
                         'ss__variant-selection__option--unavailable': val.available === false,
-                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+                    }), onClick: (e) => {
+                        if (!val.disabled) {
+                            onSelectHandler(e, val);
+                            // close the dropdown on selection
+                            toggleOpen?.(e, false);
+                        }
+                    }, ref: (e) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
             }) }));
     };
     return selection.values.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {

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

@@ -1,10 +1,11 @@
 import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
 import { ComponentProps, RecommendationComponentNames, JSXComponent } from '../../../types';
 import { Lang } from '../../../hooks';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const AutocompleteLayout: ((properties: AutocompleteLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
-export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
+export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | 'tabSelection' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
 type ColumnsNames = 'c1' | 'c2' | 'c3' | 'c4';
 type PrebuiltLayouts = 'terms' | 'mobile' | 'desktop' | 'tablet';
 type ModuleNamesWithColumns = ModuleNames | ColumnsNames | ModuleNames[] | ColumnsNames[];
@@ -18,6 +19,7 @@ export type AutocompleteLayoutProps = {
     resultComponent?: JSXComponent | JSX.Element;
     controller: AutocompleteController;
     lang?: Partial<AutocompleteLayoutLang>;
+    tabManager?: TabManagerStore;
 } & Omit<AutocompleteLayoutTemplatesLegalProps, 'resultComponent'> & ComponentProps<AutocompleteLayoutProps>;
 export type AutocompleteLayoutTemplatesLegalProps = {
     resultComponent?: string;

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

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

@@ -18,6 +18,7 @@ import { TermsList } from '../TermsList';
 import { Terms } from '../../Molecules/Terms';
 import { FacetsHorizontal } from '../FacetsHorizontal';
 import { Button } from '../../Atoms/Button';
+import { TabSelection } from '../../Molecules/TabSelection';
 import { createRecommendationTemplate } from '../../../hooks/createRecommendationTemplate';
 const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, column1, column2, column3, column4, }) => {
     let inputViewportOffsetBottom = 0;
@@ -35,23 +36,23 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
     const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return css({
         '.ss__autocomplete__column.ss__autocomplete__column--c1': {
-            flex: column1?.width == 'auto' ? '1 1 auto' : `1 0 ${column1?.width}`,
-            maxWidth: column1?.width == 'auto' ? 'auto' : column1?.width,
+            flex: column1?.width == 'auto' ? '1 1 0' : `1 0 ${column1?.width}`,
+            maxWidth: column1?.width == 'auto' ? 'none' : column1?.width,
             alignContent: column1?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c2': {
-            flex: column2?.width == 'auto' ? '1 1 auto' : `1 0 ${column2?.width}`,
-            maxWidth: column2?.width == 'auto' ? 'auto' : column2?.width,
+            flex: column2?.width == 'auto' ? '1 1 0' : `1 0 ${column2?.width}`,
+            maxWidth: column2?.width == 'auto' ? 'none' : column2?.width,
             alignContent: column2?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c3': {
-            flex: column3?.width == 'auto' ? '1 1 auto' : `1 0 ${column3?.width}`,
-            maxWidth: column3?.width == 'auto' ? 'auto' : column3?.width,
+            flex: column3?.width == 'auto' ? '1 1 0' : `1 0 ${column3?.width}`,
+            maxWidth: column3?.width == 'auto' ? 'none' : column3?.width,
             alignContent: column3?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c4': {
-            flex: column4?.width == 'auto' ? '1 1 auto' : `1 0 ${column4?.width}`,
-            maxWidth: column4?.width == 'auto' ? 'auto' : column4?.width,
+            flex: column4?.width == 'auto' ? '1 1 0' : `1 0 ${column4?.width}`,
+            maxWidth: column4?.width == 'auto' ? 'none' : column4?.width,
             alignContent: column4?.alignContent,
         },
         '.ss__autocomplete__column, .ss__autocomplete__row': {
@@ -180,7 +181,7 @@ export const AutocompleteLayout = observer((properties) => {
             width: '150px',
         },
         column3: {
-            layout: [['content'], ['_', 'button.see-more']],
+            layout: [['tabSelection'], ['content'], ['_', 'button.see-more']],
             width: 'auto',
             alignContent: 'space-between',
         },
@@ -274,7 +275,7 @@ export const AutocompleteLayout = observer((properties) => {
             input = document.querySelector(input);
         }
     }
-    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, } = props;
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, } = props;
     let layout = props.layout;
     const subProps = {
         button: {
@@ -376,6 +377,17 @@ export const AutocompleteLayout = observer((properties) => {
             theme: props.theme,
             treePath: properties.treePath,
         },
+        tabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
     };
     const { search, terms, trending, results, merchandising, pagination, filters, facets, state, loading, loaded } = controller.store;
     const history = controller.store.history || [];
@@ -514,6 +526,9 @@ export const AutocompleteLayout = observer((properties) => {
         if (module == 'no-results' && showResults) {
             return (_jsx("div", { className: "ss__autocomplete__content", children: results.length == 0 && !loading ? (_jsxs("div", { className: "ss__autocomplete__content__no-results", children: [_jsx("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all }), RecommendationTemplateComponent && recsController?.store?.loaded ? (_jsx("div", { className: "ss__autocomplete__content__no-results__recommendations", children: _jsx(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : (_jsx(_Fragment, {})) }));
         }
+        if (module == 'tabSelection') {
+            return tabManager ? _jsx(TabSelection, { ...subProps.tabSelection, tabManager: tabManager }) : null;
+        }
         if (module == '_') {
             return _jsx("div", { className: "ss__autocomplete__separator" });
         }

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

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '../../../types';
 import type { SearchController } from '@athoscommerce/snap-controller';
 import { ButtonProps } from '../../Atoms/Button';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const Layout: ((properties: LayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
@@ -8,6 +9,7 @@ export interface LayoutProps extends ComponentProps {
     controller: SearchController;
     layout: (ModuleNames | ModuleNames[])[];
     toggleSideBarButton?: Partial<ButtonProps>;
+    tabManager?: TabManagerStore;
 }
-export type ModuleNames = 'searchHeader' | 'filterSummary' | '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' | 'tabSelection' | '_' | '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;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"}
+{"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;AAOzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AA4B3F,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA6RrD,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;IAC3C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAEpB,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,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

@@ -18,6 +18,7 @@ import { ContentType } from '@athoscommerce/snap-store-mobx';
 import { Facets } from '../Facets';
 import { FacetsHorizontal } from '../FacetsHorizontal';
 import { Breadcrumbs } from '../../Atoms/Breadcrumbs';
+import { TabSelection } from '../../Molecules/TabSelection';
 const defaultStyles = ({}) => {
     return css({
         display: 'flex',
@@ -50,7 +51,7 @@ export const Layout = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('layout', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout, tabManager } = props;
     delete props.treePath;
     const styling = mergeStyles(props, defaultStyles);
     const subProps = {
@@ -200,6 +201,17 @@ export const Layout = observer((properties) => {
             theme: props?.theme,
             treePath: properties.treePath,
         },
+        TabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: properties.treePath,
+        },
     };
     const ToggleSideBarButton = toggleSideBarButton;
     const hasResults = controller.store.pagination.totalResults > 0;
@@ -207,6 +219,8 @@ export const Layout = observer((properties) => {
         switch (module) {
             case 'searchHeader':
                 return _jsx(SearchHeader, { ...subProps.SearchHeader });
+            case 'tabSelection':
+                return tabManager ? _jsx(TabSelection, { ...subProps.TabSelection, tabManager: tabManager }) : null;
             case 'filterSummary':
                 if (hasResults) {
                     return _jsx(FilterSummary, { ...subProps.FilterSummary });