@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -114,7 +114,7 @@ export const AutocompleteFixed = observer((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-fixed__modal',
+            internalClassName: 'ss__autocomplete-fixed__modal',
             buttonSelector: buttonSelector,
             lockScroll: false,
             onOverlayClick: reset,
@@ -130,8 +130,8 @@ export const AutocompleteFixed = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-fixed__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-fixed__search-input ss__autocomplete__search-input',
             placeholderText: inputPlaceholderText || undefined,
             submitSearchButton: {
                 onClick: () => {
@@ -145,6 +145,11 @@ export const AutocompleteFixed = observer((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...defined({

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;AAMxI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAuD3F,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAsK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,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;AAMxI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAuD3F,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA2K3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,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

@@ -126,7 +126,7 @@ export const AutocompleteModal = observer((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-modal__modal',
+            internalClassName: 'ss__autocomplete-modal__modal',
             buttonSelector: buttonSelector,
             onOverlayClick: reset,
             overlayColor: overlayColor,
@@ -141,8 +141,8 @@ export const AutocompleteModal = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-modal__search-input ss__autocomplete__search-input',
             submitSearchButton: {
                 onClick: () => {
                     () => reset();
@@ -156,6 +156,11 @@ export const AutocompleteModal = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...defined({

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;AAKvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAkB3F,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA8JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,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;AAKvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAkB3F,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CAmKjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,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

@@ -91,8 +91,8 @@ export const AutocompleteSlideout = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-slideout__search-input ss__autocomplete__search-input',
             inputName: inputName,
             submitSearchButton: {
                 onClick: () => {
@@ -107,6 +107,11 @@ export const AutocompleteSlideout = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             // inherited props
             ...defined({
                 disableStyles,

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+import { ChatTemplatesLegalProps, ChatLang } from '../../Organisms/Chat';
+import type { ChatController } from '@athoscommerce/snap-controller';
+export declare const Chat: ((properties: ChatProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatProps = {
+    controller: ChatController;
+    lang?: Partial<ChatLang>;
+} & ChatTemplatesLegalProps & ComponentProps<ChatProps>;
+export type { ChatTemplatesLegalProps, ChatLang };
+//# sourceMappingURL=Chat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Chat/Chat.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAmC,uBAAuB,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1G,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAUrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAuC/D,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,YAAY,EAAE,uBAAuB,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { ChatOrganism } from '../../Organisms/Chat';
+const defaultStyles = () => {
+    // The template itself is layout-free — the underlying Chat organism handles
+    // fixed positioning and sizing. The wrapper exists purely so theme overrides
+    // flow through mergeProps('chat', ...) and so the Chat surface can be themed
+    // per-template like Search and Recommendation.
+    return css({});
+};
+export const Chat = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chat', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        Chat: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chat') itself, and passing
+    // this one down would append a second 'chat' segment (ss-path="chat chat")
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__chat-template', className, internalClassName), children: _jsx(ChatOrganism, { ...subProps.Chat, ...organismProps, controller: controller }) }) }));
+});

package/dist/esm/components/src/components/Templates/Chat/index.d.ts

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

package/dist/esm/components/src/components/Templates/Chat/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/Chat/index.js

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

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

@@ -0,0 +1,13 @@
+import { ComponentProps } from '../../../types';
+import { ChatButtonTemplatesLegalProps, ChatButtonLang } from '../../Organisms/ChatButton';
+import type { ChatController } from '@athoscommerce/snap-controller';
+export declare const ChatButton: ((properties: ChatButtonProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatButtonProps = {
+    controller: ChatController;
+    lang?: Partial<ChatButtonLang>;
+    content?: string | JSX.Element;
+} & ChatButtonTemplatesLegalProps & ComponentProps<ChatButtonProps>;
+export type { ChatButtonTemplatesLegalProps, ChatButtonLang };
+//# sourceMappingURL=ChatButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatButton.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/ChatButton/ChatButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAA+C,6BAA6B,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAUrE,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,GAAG,CAAC,OAAO;;CAuC3E,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,YAAY,EAAE,6BAA6B,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { ChatButtonOrganism } from '../../Organisms/ChatButton';
+const defaultStyles = () => {
+    // inline-block so the wrapper flows alongside its siblings when injected into
+    // merchant chrome (e.g. a nav); all button styling lives in the organism
+    return css({
+        display: 'inline-block',
+    });
+};
+export const ChatButton = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatButton', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        ChatButton: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chatButton') itself, and passing
+    // this one down would append a second 'chatButton' segment
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__chat-button-template', className, internalClassName), children: _jsx(ChatButtonOrganism, { ...subProps.ChatButton, ...organismProps, controller: controller }) }) }));
+});

package/dist/esm/components/src/components/Templates/ChatButton/index.d.ts

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

package/dist/esm/components/src/components/Templates/ChatButton/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/ChatButton/index.js

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

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewModal: ((properties: QuickviewModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewModalProps = {
+    quickviewManager: QuickviewManager;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewModal/QuickviewModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AA2DvE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAkIrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Modal } from '../../Molecules/Modal';
+import { QuickviewLayout, QuickviewTracker, } from '../../Organisms/QuickviewLayout';
+const defaultStyles = () => {
+    return css({
+        // Take the wrapper out of normal flow. The modal is injected into its own container at the
+        // end of `<body>`, but a consumer may still render it inside a grid (e.g. as a sibling of a
+        // result `<article>`), where in-flow it would occupy a cell and shift the layout when opened.
+        // The modal's content and overlay are both `position: fixed`, so an absolute, zero-size
+        // wrapper has no visual effect while keeping it out of any grid.
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        // Override the underlying Modal's `.ss__modal__content` positioning so the quickview
+        // is centered in the viewport rather than positioned relative to the source Result tile.
+        // Modal's default is `position: absolute` inside its (relative) wrapper, which lives
+        // inside the Results grid cell — that's why the modal was being clipped to a tile.
+        // We compound the wrapper class (`&.ss__quickview-modal`) into the selector to beat
+        // Modal's same-specificity rule (which would otherwise win on source-order since
+        // Modal's styles are emitted after ours), and use !important on the positioning
+        // properties so theme overrides can't accidentally re-anchor the modal to its tile.
+        '&.ss__quickview-modal .ss__modal__content': {
+            position: 'fixed !important',
+            top: '50% !important',
+            left: '50% !important',
+            transform: 'translate(-50%, -50%) !important',
+            minWidth: 'auto',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            width: 'auto',
+            overflow: 'auto',
+            zIndex: 10006,
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.2)',
+            borderRadius: '4px',
+        },
+        // Lower the Modal's Overlay backdrop too so it stays below both the modal content
+        // (10006) and the dropdown portal (10007) but above page content and autocomplete.
+        '&.ss__quickview-modal .ss__modal__overlay': {
+            zIndex: '10005 !important',
+        },
+        // Below the desktop breakpoint (where QuickviewLayout stacks to a single column) the
+        // modal spans the full viewport width instead of shrink-wrapping its content. The
+        // wrapper class is compounded into the content selector so this beats QuickviewLayout's
+        // same-specificity min/max width rule on the content div.
+        '@media (max-width: 767px)': {
+            '&.ss__quickview-modal .ss__modal__content': {
+                width: '100vw',
+                maxWidth: '100vw',
+                borderRadius: 0,
+            },
+            '&.ss__quickview-modal .ss__quickview__content': {
+                minWidth: 'auto',
+                maxWidth: '100%',
+            },
+        },
+    });
+};
+export const QuickviewModal = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        hideBadge: false,
+        layout: [['c1', 'c2']],
+        column1: {
+            layout: ['slideshow'],
+            width: '45%',
+        },
+        column2: {
+            layout: [
+                ['productDetail.mappings.core.name'],
+                ['calloutBadge'],
+                ['variantSelections'],
+                ['quantityPicker'],
+                ['button.add-to-cart'],
+                ['productDetail.mappings.core.description'],
+                ['productDetailTable'],
+                ['button.more-info'],
+            ],
+            width: 'auto',
+        },
+    };
+    const props = mergeProps('quickviewModal', globalTheme, defaultProps, properties);
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, layout, hideBadge, column1, column2, column3, column4, recommendation, lang, } = props;
+    // Dialog focus management: remember what had focus before the modal opened, move focus to
+    // the close button on open, and restore on close. This lives in the container (not the
+    // layout) because the layout unmounts when the Modal closes — only the always-mounted
+    // container can run the restore-focus branch on the open→close transition.
+    const wrapperRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = wrapperRef.current?.querySelector('.ss__quickview__close');
+            closeEl?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    if (!quickviewManager) {
+        console.warn(`[QuickviewModal] No quickviewManager provided; quickview cannot function without a QuickviewManager instance.`);
+        return null;
+    }
+    const store = quickviewManager.store;
+    const product = store.product;
+    const isOpen = Boolean(store.isOpen);
+    const onClose = () => quickviewManager.close();
+    const subProps = {
+        quickviewLayout: {
+            // default props
+            onClose,
+            ...defined({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            onOverlayClick: onClose,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = _jsx(QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: wrapperRef, className: classnames('ss__quickview-modal', className, internalClassName), onClick: (e) => e.stopPropagation(), children: _jsx(Modal, { ...subProps.modal, open: isOpen, children: product ? (_jsx(QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

package/dist/esm/components/src/components/Templates/QuickviewModal/index.d.ts

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

package/dist/esm/components/src/components/Templates/QuickviewModal/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/QuickviewModal/index.js

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+import { SlideDirectionType } from '../../Molecules/Slideout';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewSlideout: ((properties: QuickviewSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewSlideoutProps = {
+    quickviewManager: QuickviewManager;
+    slideDirection?: SlideDirectionType;
+    width?: string;
+    overlayColor?: string;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewSlideout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewSlideout/QuickviewSlideout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAqBvE,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA2I3E,CAAC;AAOH,MAAM,MAAM,sBAAsB,GAAG;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Slideout } from '../../Molecules/Slideout';
+import { QuickviewLayout, QuickviewTracker, } from '../../Organisms/QuickviewLayout';
+const defaultStyles = () => {
+    return css({
+        // The wrapper sits out of flow; the Slideout itself is `position: fixed`. Keep its panel
+        // and overlay above autocomplete (10002) like the Modal variant does.
+        '& .ss__slideout': {
+            zIndex: 10006,
+        },
+        '& .ss__slideout__overlay': {
+            zIndex: '10005 !important',
+        },
+        // Inside a single-column panel the content shouldn't be width-capped to the desktop modal size.
+        '& .ss__quickview__content': {
+            minWidth: 'auto',
+            maxWidth: '100%',
+        },
+    });
+};
+export const QuickviewSlideout = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        slideDirection: 'right',
+        width: '500px',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        hideBadge: false,
+        layout: [
+            ['slideshow'],
+            ['productDetail.mappings.core.name'],
+            ['calloutBadge'],
+            ['variantSelections'],
+            ['quantityPicker'],
+            ['button.add-to-cart'],
+            ['productDetail.mappings.core.description'],
+            ['productDetailTable'],
+            ['button.more-info'],
+        ],
+    };
+    const props = mergeProps('quickviewSlideout', globalTheme, defaultProps, properties);
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, layout, hideBadge, column1, column2, column3, column4, recommendation, slideDirection, width, overlayColor, lang, } = props;
+    // painted state used to ensure transition works with dynamic loading
+    const [painted, setPainted] = useState(false);
+    useEffect(() => {
+        setPainted(true);
+    }, []);
+    // Dialog focus management — see QuickviewModal for the rationale (effect lives in the
+    // always-mounted container so the restore-focus branch survives the open→close transition).
+    const wrapperRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        const isOpenNow = Boolean(quickviewManager?.store?.isOpen) && painted;
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = wrapperRef.current?.querySelector('.ss__quickview__close');
+            closeEl?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    if (!quickviewManager) {
+        console.warn(`[QuickviewSlideout] No quickviewManager provided; quickview cannot function without a QuickviewManager instance.`);
+        return null;
+    }
+    const store = quickviewManager.store;
+    const product = store.product;
+    const isOpen = Boolean(store.isOpen) && painted;
+    const onClose = () => quickviewManager.close();
+    const subProps = {
+        quickviewLayout: {
+            // default props
+            onClose,
+            ...defined({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        slideout: {
+            // default props
+            rerender: false,
+            slideDirection: slideDirection,
+            width: width,
+            overlayColor: overlayColor,
+            // Sync an overlay dismiss back to the store so `store.isOpen` stays the single source of truth.
+            onChange: (active) => {
+                if (!active)
+                    onClose();
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = _jsx(QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: wrapperRef, className: classnames('ss__quickview-slideout', className, internalClassName), onClick: (e) => e.stopPropagation(), children: _jsx(Slideout, { ...subProps.slideout, active: isOpen, children: product ? (_jsx(QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.d.ts

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

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.js

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

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;;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"}
+{"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;AAc/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA6NrE,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

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
 import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
 import { Result } from '../../Molecules/Result';
-import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { cloneWithProps, defined, lazyRenderMinSize, mergeProps, mergeStyles } from '../../../utilities';
 import { useIntersection, useComponent } from '../../../hooks';
 import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
@@ -15,6 +15,7 @@ import { useLang } from '../../../hooks';
 import { ResultTracker } from '../../Trackers/ResultTracker';
 const defaultStyles = ({ vertical }) => {
     return css({
+        ...lazyRenderMinSize,
         height: vertical ? '100%' : undefined,
         '.ss__result__image-wrapper': {
             height: vertical ? '85%' : undefined,
@@ -115,7 +116,7 @@ export const Recommendation = observer((properties) => {
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
     const mergedLang = useLang(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    return (Array.isArray(children) && children.length) || resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && (_jsx("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && _jsx("p", { className: "ss__recommendation__description", children: description }), _jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
+    return (Array.isArray(children) && children.length) || resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, style: disableStyles ? lazyRenderMinSize : undefined, className: classnames('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && (_jsx("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && _jsx("p", { className: "ss__recommendation__description", children: description }), _jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
                             ? children.map((child, idx) => (_jsx(ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })))
                             : resultsToRender.map((result) => (_jsx(ResultTracker, { controller: controller, result: result, children: (() => {
                                     if (resolvedResultComponent && controller) {